Components: Use useStoreState() instead of store.useState() (#64648)

* Components: Use useStoreState() instead of store.useState() * CHANGELOG * Cleanup TabList Co-authored-by: ciampo <[email protected]> --------- Co-authored-by: ciampo <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: ciampo <[email protected]>
WordPress · Aug 21, 2024 · 9749a4a · 9749a4a · github-actions · Aug 21, 2024
1 parent c47491a
commit 9749a4a
Show file tree

Hide file tree

Showing 13 changed files with 41 additions and 19 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -76,6 +76,7 @@
 -   `DropdownMenu` v2: use themed color variables ([#64647](https://github.com/WordPress/gutenberg/pull/64647)).
 -   `CustomSelectControl`: Improve type inferring ([#64412](https://github.com/WordPress/gutenberg/pull/64412)).
 -   Update `ariakit` to version `0.4.10` ([#64637](https://github.com/WordPress/gutenberg/pull/64637)).
+-   Ariakit: Use `useStoreState()` instead of `store.useState()` ([#64648](https://github.com/WordPress/gutenberg/pull/64648)).
 
 ## 28.5.0 (2024-08-07)
 

diff --git a/packages/components/src/alignment-matrix-control/index.tsx b/packages/components/src/alignment-matrix-control/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -68,7 +69,7 @@ export function AlignmentMatrixControl( {
 		rtl: isRTL(),
 	} );
 
-	const activeId = compositeStore.useState( 'activeId' );
+	const activeId = useStoreState( compositeStore, 'activeId' );
 
 	const classes = clsx( 'component-alignment-matrix-control', className );
 

diff --git a/packages/components/src/circular-option-picker/circular-option-picker-option.tsx b/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import { useStoreState } from '@ariakit/react';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -52,7 +53,7 @@ function UnforwardedOptionAsOption(
 	forwardedRef: ForwardedRef< any >
 ) {
 	const { id, isSelected, compositeStore, ...additionalProps } = props;
-	const activeId = compositeStore.useState( 'activeId' );
+	const activeId = useStoreState( compositeStore, 'activeId' );
 
 	if ( isSelected && ! activeId ) {
 		compositeStore.setActiveId( id );

diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -62,7 +63,7 @@ const CustomSelectButton = ( {
 		CustomSelectStore,
 	'onChange'
 > ) => {
-	const { value: currentValue } = store.useState();
+	const { value: currentValue } = useStoreState( store );
 
 	const computedRenderSelectedValue = useMemo(
 		() => renderSelectedValue ?? defaultRenderSelectedValue,

diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -248,9 +249,10 @@ const UnconnectedDropdownMenu = (
 	);
 
 	// Extract the side from the applied placement — useful for animations.
-	const appliedPlacementSide = dropdownMenuStore
-		.useState( 'placement' )
-		.split( '-' )[ 0 ];
+	const appliedPlacementSide = useStoreState(
+		dropdownMenuStore,
+		'placement'
+	).split( '-' )[ 0 ];
 
 	if (
 		dropdownMenuStore.parent &&

diff --git a/packages/components/src/radio-group/radio.tsx b/packages/components/src/radio-group/radio.tsx
@@ -7,6 +7,7 @@ import { forwardRef, useContext } from '@wordpress/element';
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * Internal dependencies
@@ -26,7 +27,7 @@ function UnforwardedRadio(
 ) {
 	const { store, disabled } = useContext( RadioGroupContext );
 
-	const selectedValue = store?.useState( 'value' );
+	const selectedValue = useStoreState( store, 'value' );
 	const isChecked = selectedValue !== undefined && selectedValue === value;
 
 	return (

diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
@@ -121,7 +122,9 @@ const UnforwardedTabPanel = (
 		defaultSelectedId: prependInstanceId( initialTabName ),
 	} );
 
-	const selectedTabName = extractTabName( tabStore.useState( 'selectedId' ) );
+	const selectedTabName = extractTabName(
+		useStoreState( tabStore, 'selectedId' )
+	);
 
 	const setTabStoreSelectedId = useCallback(
 		( tabName: string ) => {

diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -48,7 +49,7 @@ function Tabs( {
 
 	const isControlled = selectedTabId !== undefined;
 
-	const { items, selectedId, activeId } = store.useState();
+	const { items, selectedId, activeId } = useStoreState( store );
 	const { setSelectedId, setActiveId } = store;
 
 	// Keep track of whether tabs have been populated. This is used to prevent

diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -26,7 +27,8 @@ export const TabList = forwardRef<
 >( function TabList( { children, ...otherProps }, ref ) {
 	const context = useTabsContext();
 
-	const selectedId = context?.store.useState( 'selectedId' );
+	const tabStoreState = useStoreState( context?.store );
+	const selectedId = tabStoreState?.selectedId;
 	const indicatorPosition = useTrackElementOffsetRect(
 		context?.store.item( selectedId )?.element
 	);
@@ -37,13 +39,13 @@ export const TabList = forwardRef<
 		( { previousValue } ) => previousValue && setAnimationEnabled( true )
 	);
 
-	if ( ! context ) {
+	if ( ! context || ! tabStoreState ) {
 		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
 		return null;
 	}
-	const { store } = context;
 
-	const { activeId, selectOnMove } = store.useState();
+	const { store } = context;
+	const { activeId, selectOnMove } = tabStoreState;
 	const { setActiveId } = store;
 
 	const onBlur = () => {

diff --git a/packages/components/src/tabs/tabpanel.tsx b/packages/components/src/tabs/tabpanel.tsx
@@ -1,7 +1,11 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
+import { useStoreState } from '@ariakit/react';
 
+/**
+ * WordPress dependencies
+ */
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -22,13 +26,13 @@ export const TabPanel = forwardRef<
 	ref
 ) {
 	const context = useTabsContext();
+	const selectedId = useStoreState( context?.store, 'selectedId' );
 	if ( ! context ) {
 		warning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );
 		return null;
 	}
 	const { store, instanceId } = context;
 	const instancedTabId = `${ instanceId }-${ tabId }`;
-	const selectedId = store.useState( ( state ) => state.selectedId );
 
 	return (
 		<StyledTabPanel

diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
@@ -3,6 +3,7 @@
  */
 import type { ForwardedRef } from 'react';
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
@@ -66,7 +67,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		setValue: wrappedOnChangeProp,
 	} );
 
-	const selectedValue = radio.useState( 'value' );
+	const selectedValue = useStoreState( radio, 'value' );
 	const setValue = radio.setValue;
 
 	const groupContextValue = useMemo(

diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 import clsx from 'clsx';
 
 /**
@@ -93,7 +94,7 @@ function UnforwardedTooltip(
 		placement: computedPlacement,
 		showTimeout: delay,
 	} );
-	const mounted = tooltipStore.useState( 'mounted' );
+	const mounted = useStoreState( tooltipStore, 'mounted' );
 
 	if ( isNestedInTooltip ) {
 		return isOnlyChild ? (

diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -3,6 +3,8 @@
  */
 import clsx from 'clsx';
 // TODO: use the @wordpress/components one once public
+// eslint-disable-next-line no-restricted-imports
+import { useStoreState } from '@ariakit/react';
 // Import CompositeStore type, which is not exported from @wordpress/components.
 // eslint-disable-next-line no-restricted-imports
 import type { CompositeStore } from '@ariakit/react';
@@ -359,10 +361,11 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 
 	const store = useCompositeStore( {
 		defaultActiveId: getItemDomId( selectedItem ),
-	} );
+	} ) as CompositeStore; // TODO, remove once composite APIs are public
 
 	// Manage focused item, when the active one is removed from the list.
-	const isActiveIdInList = store.useState(
+	const isActiveIdInList = useStoreState(
+		store,
 		( state: { items: any[]; activeId: any } ) =>
 			state.items.some(
 				( item: { id: any } ) => item.id === state.activeId