Add Typeahead docs and Storybook example

WordPress · Aug 9, 2024 · 3e4a062 · 3e4a062
1 parent 045a9f7
commit 3e4a062
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 9 deletions.
diff --git a/packages/components/src/composite/README.md b/packages/components/src/composite/README.md
@@ -206,4 +206,16 @@ Determines if the composite item should lose focus when the mouse leaves. By def
 
 ### `Composite.Typeahead`
 
-TODO
+Renders a component that adds typeahead functionality to composite components. Hitting printable character keys will move focus to the next composite item that begins with the input characters.
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
diff --git a/packages/components/src/composite/index.tsx b/packages/components/src/composite/index.tsx
@@ -213,9 +213,8 @@ export const Composite = Object.assign(
 		Hover,
 		/**
 		 * Renders a component that adds typeahead functionality to composite
-		 * components. When the `typeahead` prop is enabled, which it is by default,
-		 * hitting printable character keys will move focus to the next composite item
-		 * that begins with the input characters.
+		 * components. Hitting printable character keys will move focus to the next
+		 * composite item that begins with the input characters.
 		 * @see https://ariakit.org/reference/composite-typeahead
 		 * @example
 		 * ```jsx

diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx
@@ -209,10 +209,7 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 							},
 						},
 					},
-					'Composite.Typeahead': {
-						...commonArgTypes,
-						// TODO
-					},
+					'Composite.Typeahead': commonArgTypes,
 				};
 
 				const name = component.displayName ?? '';
@@ -315,3 +312,25 @@ Hover.parameters = {
 		},
 	},
 };
+
+export const Typeahead: StoryFn< typeof UseCompositeStorePlaceholder > = (
+	storeProps
+) => {
+	const rtl = isRTL();
+	const store = useCompositeStore( { rtl, ...storeProps } );
+
+	return (
+		<Composite store={ store } render={ <Composite.Typeahead /> }>
+			<Composite.Item>Apple</Composite.Item>
+			<Composite.Item>Banana</Composite.Item>
+			<Composite.Item>Peach</Composite.Item>
+		</Composite>
+	);
+};
+Typeahead.parameters = {
+	docs: {
+		description: {
+			story: 'When focus in on the composite widget, hitting printable character keys will move focus to the next composite item that begins with the input characters.',
+		},
+	},
+};
diff --git a/packages/components/src/composite/types.ts b/packages/components/src/composite/types.ts
@@ -51,7 +51,6 @@ export type CompositeHoverProps = Pick<
 	'render' | 'children' | 'focusOnHover' | 'blurOnHoverEnd'
 >;
 
-// TODO: check that props make sense
 export type CompositeTypeaheadProps = Pick<
 	Ariakit.CompositeTypeaheadProps,
 	'render' | 'children'