Try Ariakit Select for new CustomSelectControl component

docs/manifest.json

@@ -785,6 +785,12 @@
 		"markdown_source": "../packages/components/src/confirm-dialog/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "CustomSelectControlV2",
+		"slug": "custom-select-control-v2",
+		"markdown_source": "../packages/components/src/custom-select-control-v2/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "CustomSelectControl",
 		"slug": "custom-select-control",

packages/components/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 -   `Tabs`: Memoize and expose the component context ([#56224](https://github.com/WordPress/gutenberg/pull/56224)).
 
+### Internal
+
+-   Introduce experimental new version of `CustomSelectControl` based on `ariakit` ([#55790](https://github.com/WordPress/gutenberg/pull/55790))
+
 ## 25.12.0 (2023-11-16)
 
 ### Bug Fix

packages/components/src/custom-select-control-v2/README.md

@@ -0,0 +1,73 @@
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+### `CustomSelect`
+
+Used to render a checkbox item.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The child elements. This should be composed of CustomSelect.Item components.
+
+-   Required: yes
+
+##### `defaultValue`: `string`
+
+An optional default value for the control. If left `undefined`, the first non-disabled item will be used.
+
+-   Required: no
+
+##### `label`: `string`
+
+Label for the control.
+
+-   Required: no
+
+##### `onChange`: `( newValue: string ) => void`
+
+A function that receives the new value of the input.
+
+-   Required: no
+
+##### `renderSelectedValue`: `( selectValue: string ) => React.ReactNode`
+
+Can be used to render select UI with custom styled values.
+
+-   Required: no
+
+##### `size`: `'default' | 'large'`
+
+The size of the control.
+
+-   Required: no
+
+##### `value`: `string`
+
+Can be used to externally control the value of the control.
+
+-   Required: no
+
+### `CustomSelectItemProps`
+
+Used to render a select item.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The children to display for each select item.
+
+-   Required: no
+
+##### `value`: `string`
+
+The value of the select item. This will be used as the children if children are left `undefined`.
+
+-   Required: yes

packages/components/src/custom-select-control-v2/index.tsx

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import * as Styled from './styles';
+import type {
+	CustomSelectProps,
+	CustomSelectItemProps,
+	CustomSelectContext as CustomSelectContextType,
+} from './types';
+
+export const CustomSelectContext =
+	createContext< CustomSelectContextType >( undefined );
+
+export function CustomSelect( props: CustomSelectProps ) {
+	const {
+		children,
+		defaultValue,
+		label,
+		onChange,
+		size = 'default',
+		value,
+		renderSelectedValue,
+	} = props;
+
+	const store = Ariakit.useSelectStore( {
+		setValue: ( nextValue ) => onChange?.( nextValue ),
+		defaultValue,
+		value,
+	} );
+
+	const { value: currentValue } = store.useState();
+
+	return (
+		<>
+			<Styled.CustomSelectLabel store={ store }>
+				{ label }
+			</Styled.CustomSelectLabel>
+			<Styled.CustomSelectButton
+				size={ size }
+				hasCustomRenderProp={ !! renderSelectedValue }
+				store={ store }
+			>
+				{ renderSelectedValue
+					? renderSelectedValue( currentValue )
+					: currentValue ?? __( 'Select an item' ) }
+				<Ariakit.SelectArrow />
+			</Styled.CustomSelectButton>
+			<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>
+				<CustomSelectContext.Provider value={ { store } }>
+					{ children }
+				</CustomSelectContext.Provider>
+			</Styled.CustomSelectPopover>
+		</>
+	);
+}
+
+export function CustomSelectItem( {
+	children,
+	...props
+}: CustomSelectItemProps ) {
+	const customSelectContext = useContext( CustomSelectContext );
+	return (
+		<Styled.CustomSelectItem
+			store={ customSelectContext?.store }
+			{ ...props }
+		>
+			{ children ?? props.value }
+			<Ariakit.SelectItemCheck />
+		</Styled.CustomSelectItem>
+	);
+}

packages/components/src/custom-select-control-v2/stories/index.story.tsx

@@ -0,0 +1,143 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { CustomSelect, CustomSelectItem } from '..';
+
+const meta: Meta< typeof CustomSelect > = {
+	title: 'Components (Experimental)/CustomSelectControl v2',
+	component: CustomSelect,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		CustomSelectItem,
+	},
+	argTypes: {
+		children: { control: { type: null } },
+		renderSelectedValue: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { excludeDecorators: true },
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div
+				style={ {
+					minHeight: '150px',
+				} }
+			>
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+const Template: StoryFn< typeof CustomSelect > = ( props ) => {
+	return <CustomSelect { ...props } />;
+};
+
+const ControlledTemplate: StoryFn< typeof CustomSelect > = ( props ) => {
+	const [ value, setValue ] = useState< string | string[] >();
+	return (
+		<CustomSelect
+			{ ...props }
+			onChange={ ( nextValue ) => {
+				setValue( nextValue );
+				props.onChange?.( nextValue );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Label',
+	children: (
+		<>
+			<CustomSelectItem value="Small">
+				<span style={ { fontSize: '75%' } }>Small</span>
+			</CustomSelectItem>
+			<CustomSelectItem value="Something bigger">
+				<span style={ { fontSize: '200%' } }>Something bigger</span>
+			</CustomSelectItem>
+		</>
+	),
+};
+
+export const MultiSelect = Template.bind( {} );
+MultiSelect.args = {
+	defaultValue: [ 'lavender', 'tangerine' ],
+	label: 'Select Colors',
+	renderSelectedValue: ( currentValue: string | string[] ) => {
+		if ( ! Array.isArray( currentValue ) ) {
+			return currentValue;
+		}
+		if ( currentValue.length === 0 ) return 'No colors selected';
+		if ( currentValue.length === 1 ) return `${ currentValue[ 0 ] }`;
+		return <div>{ currentValue.length } colors selected</div>;
+	},
+	children: (
+		<>
+			{ [
+				'amber',
+				'aquamarine',
+				'flamingo pink',
+				'lavender',
+				'maroon',
+				'tangerine',
+			].map( ( item ) => (
+				<CustomSelectItem key={ item } value={ item }>
+					{ item }
+				</CustomSelectItem>
+			) ) }
+		</>
+	),
+};
+
+const renderControlledValue = ( gravatar: string | string[] ) => {
+	const avatar = `https://gravatar.com/avatar?d=${ gravatar }`;
+	return (
+		<div style={ { display: 'flex', alignItems: 'center' } }>
+			<img
+				style={ { maxHeight: '75px', marginRight: '10px' } }
+				key={ avatar }
+				src={ avatar }
+				alt=""
+				aria-hidden
+			/>
+			<span>{ gravatar }</span>
+		</div>
+	);
+};
+
+export const Controlled = ControlledTemplate.bind( {} );
+Controlled.args = {
+	label: 'Default Gravatars',
+	renderSelectedValue: renderControlledValue,
+	children: (
+		<>
+			{ [ 'mystery-person', 'identicon', 'wavatar', 'retro' ].map(
+				( option ) => (
+					<CustomSelectItem key={ option } value={ option }>
+						{ renderControlledValue( option ) }
+					</CustomSelectItem>
+				)
+			) }
+		</>
+	),
+};