Composite: accept store props on top level component

WordPress · Aug 27, 2024 · 1b9270c · 1b9270c
1 parent 57c9c69
commit 1b9270c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/packages/components/src/composite/index.tsx b/packages/components/src/composite/index.tsx
@@ -52,9 +52,44 @@ export const Composite = Object.assign(
 		HTMLDivElement,
 		WordPressComponentProps< CompositeProps, 'div', false >
 	>( function Composite(
-		{ children, store, disabled = false, ...props },
+		{
+			// Composite store props
+			activeId,
+			defaultActiveId,
+			setActiveId,
+			focusLoop = false,
+			focusWrap = false,
+			focusShift = false,
+			virtualFocus = false,
+			orientation = 'both',
+			rtl = false,
+
+			// Composite component props
+			children,
+			disabled = false,
+
+			// To be removed
+			store: storeProp,
+
+			// Rest props
+			...props
+		},
 		ref
 	) {
+		const store = Ariakit.useCompositeStore(
+			storeProp ?? {
+				activeId,
+				defaultActiveId,
+				setActiveId,
+				focusLoop,
+				focusWrap,
+				focusShift,
+				virtualFocus,
+				orientation,
+				rtl,
+			}
+		);
+
 		const contextValue = useMemo(
 			() => ( {
 				store,

diff --git a/packages/components/src/composite/types.ts b/packages/components/src/composite/types.ts
@@ -128,11 +128,11 @@ export type CompositeStoreProps = {
 	rtl?: Ariakit.CompositeStoreProps[ 'rtl' ];
 };
 
-export type CompositeProps = {
+export type CompositeProps = CompositeStoreProps & {
 	/**
 	 * Object returned by the `useCompositeStore` hook.
 	 */
-	store: Ariakit.CompositeStore;
+	store?: Ariakit.CompositeStore;
 	/**
 	 * 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