Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Aug 21, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d3f9d9
Components: Use useStoreState() instead of store.useState()
tyxla Aug 20, 2024
13619bd
CHANGELOG
tyxla Aug 20, 2024
c9b238f
Cleanup TabList
tyxla Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
- `Composite` v2: add `Context` subcomponent ([#64493](https://github.com/WordPress/gutenberg/pull/64493)).
- `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)

Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/alignment-matrix-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import clsx from 'clsx';
import { useStoreState } from '@ariakit/react';

/**
* WordPress dependencies
Expand Down Expand Up @@ -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 );

Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/circular-option-picker/circular-option-picker-option.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import clsx from 'clsx';
import { useStoreState } from '@ariakit/react';
import type { ForwardedRef } from 'react';

/**
Expand Down Expand Up @@ -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 );
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/custom-select-control-v2/custom-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import * as Ariakit from '@ariakit/react';
import { useStoreState } from '@ariakit/react';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason for using a separate import instead of Ariakit.useStoreState?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think so, no. I think it was caused by the automated way I addressed these changes. Let me fix these in a follow-up PR.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#67818 - thanks for spotting @Mamaduka 🙌


/**
* WordPress dependencies
Expand Down Expand Up @@ -62,7 +63,7 @@ const CustomSelectButton = ( {
CustomSelectStore,
'onChange'
> ) => {
const { value: currentValue } = store.useState();
const { value: currentValue } = useStoreState( store );

const computedRenderSelectedValue = useMemo(
() => renderSelectedValue ?? defaultRenderSelectedValue,
Expand Down
8 changes: 5 additions & 3 deletions packages/components/src/dropdown-menu-v2/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import * as Ariakit from '@ariakit/react';
import { useStoreState } from '@ariakit/react';

/**
* WordPress dependencies
Expand Down Expand Up @@ -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 &&
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/radio-group/radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 (
Expand Down
5 changes: 4 additions & 1 deletion packages/components/src/tab-panel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 ) => {
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/tabs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import * as Ariakit from '@ariakit/react';
import { useStoreState } from '@ariakit/react';

/**
* WordPress dependencies
Expand Down Expand Up @@ -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
Expand Down
10 changes: 6 additions & 4 deletions packages/components/src/tabs/tablist.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import * as Ariakit from '@ariakit/react';
import { useStoreState } from '@ariakit/react';

/**
* WordPress dependencies
Expand All @@ -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
);
Expand All @@ -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;
tyxla marked this conversation as resolved.
Show resolved Hide resolved

const onBlur = () => {
Expand Down
8 changes: 6 additions & 2 deletions packages/components/src/tabs/tabpanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
/**
* WordPress dependencies
* External dependencies
*/
import { useStoreState } from '@ariakit/react';

/**
* WordPress dependencies
*/
import { forwardRef } from '@wordpress/element';

/**
Expand All @@ -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 );
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved up above the condition to fulfill the rules of hooks. Simplified the callback syntax.


return (
<StyledTabPanel
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
import type { ForwardedRef } from 'react';
import * as Ariakit from '@ariakit/react';
import { useStoreState } from '@ariakit/react';

/**
* WordPress dependencies
Expand Down Expand Up @@ -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(
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/tooltip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import * as Ariakit from '@ariakit/react';
import { useStoreState } from '@ariakit/react';
import clsx from 'clsx';

/**
Expand Down Expand Up @@ -93,7 +94,7 @@ function UnforwardedTooltip(
placement: computedPlacement,
showTimeout: delay,
} );
const mounted = tooltipStore.useState( 'mounted' );
const mounted = useStoreState( tooltipStore, 'mounted' );

if ( isNestedInTooltip ) {
return isOnlyChild ? (
Expand Down
7 changes: 5 additions & 2 deletions packages/dataviews/src/dataviews-layouts/list/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@WordPress/gutenberg-components WDYT - should we re-export this from @wordpress/components?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it depends on what we decide around exposing stores in #63704. Better hold off for now

// Import CompositeStore type, which is not exported from @wordpress/components.
// eslint-disable-next-line no-restricted-imports
import type { CompositeStore } from '@ariakit/react';
Expand Down Expand Up @@ -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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Necessary for the useStoreState call. Previously was any due to the locked nature of the private API.


// 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
Expand Down
Loading