Composite: remove store prop and useCompositeStore hook (#64723)

* Composite: remove store prop and useCompositeStore hook Instead, expose props directly on top-level component * Add tsx extension to context * Update usage examples * Update legacy implementation * Remove from private APIs * Update and simplify Storybook * Obfuscate store type in Composite context * Remove store prop from Composite * Update README * Update comment * Add Context subcomponent to Storybook * Inherit default story args in each story * CHANGELOG * Add SlotFillProvider to Storybook code snippet * Add extra comment to the context store * Better `rtl` default value and docs --- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
WordPress · Sep 5, 2024 · 29e344c · 29e344c
1 parent 3d8b6e5
commit 29e344c
Show file tree

Hide file tree

Showing 18 changed files with 236 additions and 367 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -78,6 +78,7 @@
 -   `Composite` V2: fix Storybook docgen ([#64682](https://github.com/WordPress/gutenberg/pull/64682)).
 -   `Composite` V2: add "With Slot Fill" example ([#65051](https://github.com/WordPress/gutenberg/pull/65051)).
 -   `Composite` V2: accept store props on top-level component ([#64832](https://github.com/WordPress/gutenberg/pull/64832)).
+-   `Composite` V2: remove `store` prop and `useCompositeStore` hook ([#64723](https://github.com/WordPress/gutenberg/pull/64723)).
 
 ## 28.6.0 (2024-08-21)
 

diff --git a/packages/components/src/composite/README.md b/packages/components/src/composite/README.md
@@ -9,10 +9,9 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import { Composite, useCompositeStore } from '@wordpress/components';
+import { Composite } from '@wordpress/components';
 
-const store = useCompositeStore();
-<Composite store={store}>
+<Composite>
   <Composite.Group>
     <Composite.GroupLabel>Label</Composite.GroupLabel>
     <Composite.Item>Item 1</Composite.Item>
@@ -21,11 +20,11 @@ const store = useCompositeStore();
 </Composite>
 ```
 
-## Hooks
+## Components
 
-### `useCompositeStore`
+### `Composite`
 
-Creates a composite store.
+Renders a composite widget.
 
 #### Props
 
@@ -131,20 +130,6 @@ This only affects the composite widget behavior. You still need to set `dir="rtl
 -   Required: no
 -   Default: `false`
 
-## Components
-
-### `Composite`
-
-Renders a composite widget.
-
-#### Props
-
-##### `store`: `CompositeStore<CompositeStoreItem>`
-
-Object returned by the `useCompositeStore` hook.
-
--   Required: yes
-
 ##### `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.

diff --git a/packages/components/src/composite/context.ts → ...ages/components/src/composite/context.tsx b/packages/components/src/composite/context.ts → ...ages/components/src/composite/context.tsx
@@ -8,7 +8,6 @@ import { createContext, useContext } from '@wordpress/element';
  */
 import type { CompositeContextProps } from './types';
 
-export const CompositeContext =
-	createContext< CompositeContextProps >( undefined );
+export const CompositeContext = createContext< CompositeContextProps >( {} );
 
 export const useCompositeContext = () => useContext( CompositeContext );
diff --git a/packages/components/src/composite/group-label.tsx b/packages/components/src/composite/group-label.tsx
@@ -22,7 +22,7 @@ export const CompositeGroupLabel = forwardRef<
 	const context = useCompositeContext();
 	return (
 		<Ariakit.CompositeGroupLabel
-			store={ context?.store }
+			store={ context.store as Ariakit.CompositeStore }
 			{ ...props }
 			ref={ ref }
 		/>

diff --git a/packages/components/src/composite/group.tsx b/packages/components/src/composite/group.tsx
@@ -22,7 +22,7 @@ export const CompositeGroup = forwardRef<
 	const context = useCompositeContext();
 	return (
 		<Ariakit.CompositeGroup
-			store={ context?.store }
+			store={ context.store as Ariakit.CompositeStore }
 			{ ...props }
 			ref={ ref }
 		/>

diff --git a/packages/components/src/composite/hover.tsx b/packages/components/src/composite/hover.tsx
@@ -22,7 +22,7 @@ export const CompositeHover = forwardRef<
 	const context = useCompositeContext();
 	return (
 		<Ariakit.CompositeHover
-			store={ context?.store }
+			store={ context.store as Ariakit.CompositeStore }
 			{ ...props }
 			ref={ ref }
 		/>

diff --git a/packages/components/src/composite/index.tsx b/packages/components/src/composite/index.tsx
@@ -16,6 +16,7 @@ import * as Ariakit from '@ariakit/react';
 /**
  * WordPress dependencies
  */
+import { isRTL } from '@wordpress/i18n';
 import { useMemo, forwardRef } from '@wordpress/element';
 
 /**
@@ -38,10 +39,9 @@ import type { CompositeProps } from './types';
  *
  * @example
  * ```jsx
- * import { Composite, useCompositeStore } from '@wordpress/components';
+ * import { Composite } from '@wordpress/components';
  *
- * const store = useCompositeStore();
- * <Composite store={store}>
+ * <Composite>
  *   <Composite.Item>Item 1</Composite.Item>
  *   <Composite.Item>Item 2</Composite.Item>
  * </Composite>
@@ -62,21 +62,18 @@ export const Composite = Object.assign(
 			focusShift = false,
 			virtualFocus = false,
 			orientation = 'both',
-			rtl = false,
+			rtl = isRTL(),
 
 			// Composite component props
 			children,
 			disabled = false,
 
-			// To be removed
-			store: storeProp,
-
 			// Rest props
 			...props
 		},
 		ref
 	) {
-		const newStore = Ariakit.useCompositeStore( {
+		const store = Ariakit.useCompositeStore( {
 			activeId,
 			defaultActiveId,
 			setActiveId,
@@ -88,8 +85,6 @@ export const Composite = Object.assign(
 			rtl,
 		} );
 
-		const store = storeProp || newStore;
-
 		const contextValue = useMemo(
 			() => ( {
 				store,
@@ -116,10 +111,9 @@ export const Composite = Object.assign(
 		 *
 		 * @example
 		 * ```jsx
-		 * import { Composite, useCompositeStore } from '@wordpress/components';
+		 * import { Composite } from '@wordpress/components';
 		 *
-		 * const store = useCompositeStore();
-		 * <Composite store={store}>
+		 * <Composite>
 		 *   <Composite.Group>
 		 *     <Composite.GroupLabel>Label</Composite.GroupLabel>
 		 *     <Composite.Item>Item 1</Composite.Item>
@@ -138,10 +132,9 @@ export const Composite = Object.assign(
 		 *
 		 * @example
 		 * ```jsx
-		 * import { Composite, useCompositeStore } from '@wordpress/components';
+		 * import { Composite } from '@wordpress/components';
 		 *
-		 * const store = useCompositeStore();
-		 * <Composite store={store}>
+		 * <Composite>
 		 *   <Composite.Group>
 		 *     <Composite.GroupLabel>Label</Composite.GroupLabel>
 		 *     <Composite.Item>Item 1</Composite.Item>
@@ -158,10 +151,9 @@ export const Composite = Object.assign(
 		 *
 		 * @example
 		 * ```jsx
-		 * import { Composite, useCompositeStore } from '@wordpress/components';
+		 * import { Composite } from '@wordpress/components';
 		 *
-		 * const store = useCompositeStore();
-		 * <Composite store={store}>
+		 * <Composite>
 		 *   <Composite.Item>Item 1</Composite.Item>
 		 *   <Composite.Item>Item 2</Composite.Item>
 		 *   <Composite.Item>Item 3</Composite.Item>
@@ -176,10 +168,9 @@ export const Composite = Object.assign(
 		 *
 		 * @example
 		 * ```jsx
-		 * import { Composite, useCompositeStore } from '@wordpress/components';
+		 * import { Composite } from '@wordpress/components';
 		 *
-		 * const store = useCompositeStore();
-		 * <Composite store={store}>
+		 * <Composite>
 		 *   <Composite.Row>
 		 *     <Composite.Item>Item 1.1</Composite.Item>
 		 *     <Composite.Item>Item 1.2</Composite.Item>
@@ -201,10 +192,9 @@ export const Composite = Object.assign(
 		 *
 		 * @example
 		 * ```jsx
-		 * import { Composite, useCompositeStore } from '@wordpress/components';
+		 * import { Composite } from '@wordpress/components';
 		 *
-		 * const store = useCompositeStore();
-		 * <Composite store={store}>
+		 * <Composite>
 		 *   <Composite.Hover render={ <Composite.Item /> }>
 		 *     Item 1
 		 *   </Composite.Hover>
@@ -224,10 +214,9 @@ export const Composite = Object.assign(
 		 *
 		 * @example
 		 * ```jsx
-		 * import { Composite, useCompositeStore } from '@wordpress/components';
+		 * import { Composite } from '@wordpress/components';
 		 *
-		 * const store = useCompositeStore();
-		 * <Composite store={store} render={ <CompositeTypeahead /> }>
+		 * <Composite render={ <CompositeTypeahead /> }>
 		 *   <Composite.Item>Item 1</Composite.Item>
 		 *   <Composite.Item>Item 2</Composite.Item>
 		 * </Composite>

diff --git a/packages/components/src/composite/item.tsx b/packages/components/src/composite/item.tsx
@@ -22,7 +22,7 @@ export const CompositeItem = forwardRef<
 	const context = useCompositeContext();
 	return (
 		<Ariakit.CompositeItem
-			store={ context?.store }
+			store={ context.store as Ariakit.CompositeStore }
 			{ ...props }
 			ref={ ref }
 		/>

diff --git a/packages/components/src/composite/legacy/index.tsx b/packages/components/src/composite/legacy/index.tsx
@@ -13,6 +13,11 @@
  * @see https://ariakit.org/components/composite
  */
 
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
 /**
  * WordPress dependencies
  */
@@ -22,7 +27,6 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { Composite as Current } from '..';
-import { useCompositeStore } from '../store';
 import { useInstanceId } from '@wordpress/compose';
 
 type Orientation = 'horizontal' | 'vertical';
@@ -79,7 +83,7 @@ export interface LegacyStateOptions {
 
 type Component = React.FunctionComponent< any >;
 
-type CompositeStore = ReturnType< typeof useCompositeStore >;
+type CompositeStore = ReturnType< typeof Ariakit.useCompositeStore >;
 type CompositeStoreState = { store: CompositeStore };
 export type CompositeState = CompositeStoreState &
 	Required< Pick< LegacyStateOptions, 'baseId' > >;
@@ -180,7 +184,7 @@ export function useCompositeState(
 
 	return {
 		baseId: useInstanceId( Composite, 'composite', baseId ),
-		store: useCompositeStore( {
+		store: Ariakit.useCompositeStore( {
 			defaultActiveId,
 			rtl,
 			orientation,

diff --git a/packages/components/src/composite/row.tsx b/packages/components/src/composite/row.tsx
@@ -22,7 +22,7 @@ export const CompositeRow = forwardRef<
 	const context = useCompositeContext();
 	return (
 		<Ariakit.CompositeRow
-			store={ context?.store }
+			store={ context.store as Ariakit.CompositeStore }
 			{ ...props }
 			ref={ ref }
 		/>

diff --git a/packages/components/src/composite/store.ts b/packages/components/src/composite/store.ts