From 29e344c51f6f3073bbccfbbac16cf9ac5031f1b4 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 5 Sep 2024 09:49:17 +0200 Subject: [PATCH] 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 Co-authored-by: tyxla Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/CHANGELOG.md | 1 + packages/components/src/composite/README.md | 25 +- .../src/composite/{context.ts => context.tsx} | 3 +- .../components/src/composite/group-label.tsx | 2 +- packages/components/src/composite/group.tsx | 2 +- packages/components/src/composite/hover.tsx | 2 +- packages/components/src/composite/index.tsx | 45 +-- packages/components/src/composite/item.tsx | 2 +- .../components/src/composite/legacy/index.tsx | 10 +- packages/components/src/composite/row.tsx | 2 +- packages/components/src/composite/store.ts | 46 --- .../src/composite/stories/index.story.tsx | 351 +++++++++--------- .../src/composite/stories/utils.tsx | 76 ---- .../components/src/composite/typeahead.tsx | 2 +- packages/components/src/composite/types.ts | 28 +- packages/components/src/private-apis.ts | 2 - packages/components/src/slot-fill/index.tsx | 1 + .../dataviews-filters/search-widget.tsx | 3 +- 18 files changed, 236 insertions(+), 367 deletions(-) rename packages/components/src/composite/{context.ts => context.tsx} (75%) delete mode 100644 packages/components/src/composite/store.ts delete mode 100644 packages/components/src/composite/stories/utils.tsx diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 535f49ae00b11c..699f63e94b9808 100644 --- 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 index 35881d815cf1bc..bde28d4fbbfe8b 100644 --- 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(); - + Label Item 1 @@ -21,11 +20,11 @@ const store = useCompositeStore(); ``` -## 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` - -Object returned by the `useCompositeStore` hook. - -- Required: yes - ##### `render`: `RenderProp & { ref?: React.Ref | undefined; }> | React.ReactElement>` 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 b/packages/components/src/composite/context.tsx similarity index 75% rename from packages/components/src/composite/context.ts rename to packages/components/src/composite/context.tsx index 69a052c5bfba19..4a8b22a712b031 100644 --- a/packages/components/src/composite/context.ts +++ b/packages/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 index 26d043cd0a1400..17070dbb86bf81 100644 --- 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 ( diff --git a/packages/components/src/composite/group.tsx b/packages/components/src/composite/group.tsx index a6b1b8b3f5254a..ae21ca6f11dd92 100644 --- 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 ( diff --git a/packages/components/src/composite/hover.tsx b/packages/components/src/composite/hover.tsx index 76a240e0767009..ca0bd9d8f6aa12 100644 --- 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 ( diff --git a/packages/components/src/composite/index.tsx b/packages/components/src/composite/index.tsx index 629010d271e811..e9e97072261fbf 100644 --- 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(); - * + * * Item 1 * Item 2 * @@ -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(); - * + * * * Label * Item 1 @@ -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(); - * + * * * Label * Item 1 @@ -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(); - * + * * Item 1 * Item 2 * Item 3 @@ -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(); - * + * * * Item 1.1 * Item 1.2 @@ -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(); - * + * * }> * Item 1 * @@ -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(); - * }> + * }> * Item 1 * Item 2 * diff --git a/packages/components/src/composite/item.tsx b/packages/components/src/composite/item.tsx index 8067c222c1c97f..6d75b90f0baaaa 100644 --- 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 ( diff --git a/packages/components/src/composite/legacy/index.tsx b/packages/components/src/composite/legacy/index.tsx index 41ecc6ceb3f66b..cff564af1f8e7a 100644 --- 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 index cbb9f80045de76..a082af03ad6785 100644 --- 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 ( diff --git a/packages/components/src/composite/store.ts b/packages/components/src/composite/store.ts deleted file mode 100644 index acf24b96cb8128..00000000000000 --- a/packages/components/src/composite/store.ts +++ /dev/null @@ -1,46 +0,0 @@ -/** - * External dependencies - */ -import * as Ariakit from '@ariakit/react'; - -/** - * Internal dependencies - */ -import type { CompositeStoreProps } from './types'; - -// Props are already documented in TypeScript types. -// eslint-disable-next-line jsdoc/require-param -/** - * Creates a composite store. - * - * @example - * ```jsx - * import { Composite, useCompositeStore } from '@wordpress/components'; - * - * const store = useCompositeStore(); - * - * Item - * Item - * Item - * - * ``` - */ -export function useCompositeStore( { - focusLoop = false, - focusWrap = false, - focusShift = false, - virtualFocus = false, - orientation = 'both', - rtl = false, - ...props -}: CompositeStoreProps = {} ) { - return Ariakit.useCompositeStore( { - focusLoop, - focusWrap, - focusShift, - virtualFocus, - orientation, - rtl, - ...props, - } ); -} diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx index 2fdec079255490..b8552840d66cf1 100644 --- a/packages/components/src/composite/stories/index.story.tsx +++ b/packages/components/src/composite/stories/index.story.tsx @@ -1,12 +1,11 @@ /** * External dependencies */ -import type { Meta, StoryFn, StoryContext } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; /** * WordPress dependencies */ -import { isRTL } from '@wordpress/i18n'; import { useContext, useMemo } from '@wordpress/element'; /** @@ -14,15 +13,11 @@ import { useContext, useMemo } from '@wordpress/element'; */ import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill'; import { Composite } from '..'; -import { useCompositeStore } from '../store'; -import { UseCompositeStorePlaceholder, transform } from './utils'; -const meta: Meta< typeof UseCompositeStorePlaceholder > = { +const meta: Meta< typeof Composite > = { title: 'Components/Composite (V2)', - component: UseCompositeStorePlaceholder, + component: Composite, subcomponents: { - // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 - Composite, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 'Composite.Group': Composite.Group, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 @@ -35,8 +30,12 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = { 'Composite.Hover': Composite.Hover, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 'Composite.Typeahead': Composite.Typeahead, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + 'Composite.Context': Composite.Context, }, argTypes: { + children: { control: { type: null } }, + render: { control: { type: null } }, setActiveId: { control: { type: null } }, focusLoop: { control: 'select', @@ -52,7 +51,6 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = { controls: { expanded: true }, docs: { canvas: { sourceState: 'shown' }, - source: { transform }, }, }, decorators: [ @@ -93,116 +91,111 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = { }; export default meta; -export const Default: StoryFn< typeof UseCompositeStorePlaceholder > = ( - storeProps -) => { - const rtl = isRTL(); - const store = useCompositeStore( { rtl, ...storeProps } ); - - return ( - - Item one - Item two - Item three - - ); +export const Default: StoryObj< typeof Composite > = { + args: { + children: ( + <> + Item one + Item two + Item three + + ), + }, }; -export const Groups: StoryFn< typeof UseCompositeStorePlaceholder > = ( - storeProps -) => { - const rtl = isRTL(); - const store = useCompositeStore( { rtl, ...storeProps } ); - - return ( - - - Group one - Item 1.1 - Item 1.2 - - - Group two - Item 2.1 - Item 2.1 - - - ); +export const Groups: StoryObj< typeof Composite > = { + ...Default, + args: { + ...Default.args, + children: ( + <> + + Group one + Item 1.1 + Item 1.2 + + + Group two + Item 2.1 + Item 2.1 + + + ), + }, }; -export const Grid: StoryFn< typeof UseCompositeStorePlaceholder > = ( - storeProps -) => { - const rtl = isRTL(); - const store = useCompositeStore( { rtl, ...storeProps } ); - - return ( - - - Item A1 - Item A2 - Item A3 - - - Item B1 - Item B2 - Item B3 - - - Item C1 - Item C2 - Item C3 - - - ); +export const Grid: StoryObj< typeof Composite > = { + ...Default, + args: { + ...Default.args, + role: 'grid', + 'aria-label': 'Composite', + children: ( + <> + + Item A1 + Item A2 + Item A3 + + + Item B1 + Item B2 + Item B3 + + + Item C1 + Item C2 + Item C3 + + + ), + }, }; -export const Hover: StoryFn< typeof UseCompositeStorePlaceholder > = ( - storeProps -) => { - const rtl = isRTL(); - const store = useCompositeStore( { rtl, ...storeProps } ); - - return ( - - }> - Hover item one - - }> - Hover item two - - }> - Hover item three - - - ); -}; -Hover.parameters = { - docs: { - description: { - story: 'Elements in the composite widget will receive focus on mouse move and lose focus to the composite base element on mouse leave.', +export const Hover: StoryObj< typeof Composite > = { + ...Default, + args: { + ...Default.args, + children: ( + <> + }> + Hover item one + + }> + Hover item two + + }> + Hover item three + + + ), + }, + parameters: { + docs: { + description: { + story: 'Elements in the composite widget will receive focus on mouse move and lose focus to the composite base element on mouse leave.', + }, }, }, }; -export const Typeahead: StoryFn< typeof UseCompositeStorePlaceholder > = ( - storeProps -) => { - const rtl = isRTL(); - const store = useCompositeStore( { rtl, ...storeProps } ); - - return ( - }> - Apple - Banana - Peach - - ); -}; -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.', +export const Typeahead: StoryObj< typeof Composite > = { + args: { + ...Default.args, + render: , + children: ( + <> + Apple + Banana + Peach + + ), + }, + 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.', + }, }, }, }; @@ -257,82 +250,106 @@ const Fill = ( { children }: { children: React.ReactNode } ) => { ); }; -export const WithSlotFill: StoryFn< typeof UseCompositeStorePlaceholder > = ( - props -) => { - return ( - - +export const WithSlotFill: StoryObj< typeof Composite > = { + ...Default, + args: { + ...Default.args, + children: ( + <> Item one (direct child) Item four (direct child) - + + ), + }, + decorators: [ + ( Story ) => { + return ( + + - - Item two (from slot fill) - Item three (from slot fill) - - - ); -}; -WithSlotFill.args = { - ...Default.args, -}; -WithSlotFill.parameters = { - docs: { - description: { - story: 'When rendering Composite components across a SlotFill, the Composite.Context should be manually forwarded from the Slot to the Fill component.', + + + Item two (from slot fill) + + + Item three (from slot fill) + + + + ); }, - source: { - transform: ( code: string, storyContext: StoryContext ) => { - return `const ExampleSlotFill = createSlotFill( 'Example' ); + ], + parameters: { + docs: { + description: { + story: 'When rendering Composite components across a SlotFill, the Composite.Context should be manually forwarded from the Slot to the Fill component.', + }, + source: { + transform: ( code: string ) => { + return `const ExampleSlotFill = createSlotFill( 'Example' ); const Slot = () => { - const compositeContext = useContext( Composite.Context ); + const compositeContext = useContext( Composite.Context ); - // Forward the Slot's composite context to the Fill via fillProps, so that - // Composite components rendered inside the Fill can work as expected. - const fillProps = useMemo( - () => ( { - forwardedContext: [ - [ Composite.Context.Provider, { value: compositeContext } ], - ], - } ), - [ compositeContext ] - ); + // Forward the Slot's composite context to the Fill via fillProps, so that + // Composite components rendered inside the Fill can work as expected. + const fillProps = useMemo( + () => ( { + forwardedContext: [ + [ Composite.Context.Provider, { value: compositeContext } ], + ], + } ), + [ compositeContext ] + ); - return ( - - ); + return ( + + ); }; const Fill = ( { children } ) => { - const innerMarkup = <>{ children }; + const innerMarkup = <>{ children }; - return ( - - { ( fillProps ) => { - const { forwardedContext = [] } = fillProps; + return ( + + { ( fillProps ) => { + const { forwardedContext = [] } = fillProps; - // Render all context providers forwarded by the Slot via fillProps. - return forwardedContext.reduce( - ( inner, [ Provider, props ] ) => ( - { inner } - ), - innerMarkup - ); - } } - - ); + // Render all context providers forwarded by the Slot via fillProps. + return forwardedContext.reduce( + ( inner, [ Provider, props ] ) => ( + { inner } + ), + innerMarkup + ); + } } + + ); }; // In a separate component: -${ transform( code, storyContext ) }`; + + ${ + // Add one level of indentation to match the surrounding code. + code.replaceAll( '\n', '\n ' ) + } + + + + Item two (from slot fill) + + + Item three (from slot fill) + + +`; + }, }, }, }, diff --git a/packages/components/src/composite/stories/utils.tsx b/packages/components/src/composite/stories/utils.tsx deleted file mode 100644 index f2f197877ff76d..00000000000000 --- a/packages/components/src/composite/stories/utils.tsx +++ /dev/null @@ -1,76 +0,0 @@ -/** - * External dependencies - */ -import type { StoryContext } from '@storybook/react'; - -/** - * Internal dependencies - */ -import type { CompositeStoreProps } from '../types'; - -/** - * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite) - * role, which provides a single tab stop on the page and arrow key navigation - * through the focusable descendants. - * - * ```jsx - * import { Composite, useCompositeStore } from '@wordpress/components'; - * - * const store = useCompositeStore(); - * - * Item 1 - * Item 2 - * - * ``` - */ -export function UseCompositeStorePlaceholder( props: CompositeStoreProps ) { - return ( -
- { Object.entries( props ).map( ( [ name, value ] ) => ( - <> -
{ name }
-
{ JSON.stringify( value ) }
- - ) ) } -
- ); -} -UseCompositeStorePlaceholder.displayName = 'useCompositeStore'; - -// The output generated by Storybook for these components is -// messy, so we apply this transform to make it more useful -// for anyone reading the docs. -export function transform( code: string, context: StoryContext ) { - const storeConfig = ` ${ JSON.stringify( context.args, null, 2 ) } `; - const formattedStoreConfig = storeConfig.replace( ' {} ', '' ); - return [ - // Include a setup line, showing how to make use of - // `useCompositeStore` to convert store options into - // a composite store prop. - `const store = useCompositeStore(${ formattedStoreConfig });`, - '', - 'return (', - ' ' + - code - // The generated output includes a full dump of everything - // in the store; the reader probably isn't interested in - // what that looks like, so instead we drop all of that - // in favor of the store generated above. - .replaceAll( /store=\{\{[\s\S]*?\}\}/g, 'store={ store }' ) - // Now we tidy the output by removing any unnecessary - // whitespace... - .replaceAll( //g, ( match ) => - match.replaceAll( /\s+\s/g, ' ' ) - ) - // ...including around children... - .replaceAll( - />\s*(\w[\w ]*?)\s*<\//g, - ( _, value ) => `>${ value }', '}>' ) - // Finally we indent everything to make it more readable. - .replaceAll( /\n/g, '\n ' ), - ');', - ].join( '\n' ); -} diff --git a/packages/components/src/composite/typeahead.tsx b/packages/components/src/composite/typeahead.tsx index d5bb7e6e2e4cc5..771d58bcb6c25c 100644 --- a/packages/components/src/composite/typeahead.tsx +++ b/packages/components/src/composite/typeahead.tsx @@ -22,7 +22,7 @@ export const CompositeTypeahead = forwardRef< const context = useCompositeContext(); return ( diff --git a/packages/components/src/composite/types.ts b/packages/components/src/composite/types.ts index fcde842e1cba77..ed95c7f0253b33 100644 --- a/packages/components/src/composite/types.ts +++ b/packages/components/src/composite/types.ts @@ -3,16 +3,18 @@ */ import type * as Ariakit from '@ariakit/react'; -export type CompositeContextProps = - | { - /** - * Object returned by the `useCompositeStore` hook. - */ - store: Ariakit.CompositeStore; - } - | undefined; +export type CompositeContextProps = { + /** + * The component store, used for advanced usage of the component. + * + * _Note: Using the store directly is not recommended. Instead, use the props + * exposed by the `Composite` component._ + * + */ + store?: unknown; +}; -export type CompositeStoreProps = { +type CompositeStoreProps = { /** * The current active item `id`. The active item is the element within the * composite widget that has either DOM or virtual focus (in case @@ -117,22 +119,18 @@ export type CompositeStoreProps = { */ orientation?: Ariakit.CompositeStoreProps[ 'orientation' ]; /** - * Determines how the `store`'s `next` and `previous` functions will behave. + * Controls how the previous and next items are determined. * If `rtl` is set to `true`, they will be inverted. * * This only affects the composite widget behavior. You still need to set * `dir="rtl"` on HTML/CSS. * - * @default false + * @default `isRtl()` */ rtl?: Ariakit.CompositeStoreProps[ 'rtl' ]; }; export type CompositeProps = CompositeStoreProps & { - /** - * Object returned by the `useCompositeStore` hook. - */ - 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 diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts index 7bcab0e052e022..b4e4b3a16d4ff9 100644 --- a/packages/components/src/private-apis.ts +++ b/packages/components/src/private-apis.ts @@ -2,7 +2,6 @@ * Internal dependencies */ import { Composite } from './composite'; -import { useCompositeStore } from './composite/store'; import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils'; import { createPrivateSlotFill } from './slot-fill'; import { DropdownMenuV2 } from './dropdown-menu-v2'; @@ -20,7 +19,6 @@ lock( privateApis, { CompositeRowV2: Composite.Row, CompositeTypeaheadV2: Composite.Typeahead, CompositeHoverV2: Composite.Hover, - useCompositeStoreV2: useCompositeStore, __experimentalPopoverLegacyPositionToPlacement, createPrivateSlotFill, ComponentsContext, diff --git a/packages/components/src/slot-fill/index.tsx b/packages/components/src/slot-fill/index.tsx index b2df054973a5ba..03ed33a67f13b6 100644 --- a/packages/components/src/slot-fill/index.tsx +++ b/packages/components/src/slot-fill/index.tsx @@ -71,6 +71,7 @@ export function Provider( { ); } +Provider.displayName = 'SlotFillProvider'; export function createSlotFill( key: SlotKey ) { const baseName = typeof key === 'symbol' ? key.description : key; diff --git a/packages/dataviews/src/components/dataviews-filters/search-widget.tsx b/packages/dataviews/src/components/dataviews-filters/search-widget.tsx index 24ef3b5594b413..c11c789218cd1e 100644 --- a/packages/dataviews/src/components/dataviews-filters/search-widget.tsx +++ b/packages/dataviews/src/components/dataviews-filters/search-widget.tsx @@ -126,8 +126,7 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) { ) } onFocusVisible={ () => { // `onFocusVisible` needs the `Composite` component to be focusable, - // which is implicitly achieved via the `virtualFocus: true` option - // in the `useCompositeStore` hook. + // which is implicitly achieved via the `virtualFocus` prop. if ( ! activeCompositeId && filter.elements.length ) { setActiveCompositeId( generateFilterElementCompositeItemId(