@wordpress/components 28.2.0 → 28.4.0

package/src/custom-select-control/index.tsx

@@ -0,0 +1,176 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import _CustomSelect from '../custom-select-control-v2/custom-select';
+import CustomSelectItem from '../custom-select-control-v2/item';
+import * as Styled from '../custom-select-control-v2/styles';
+import type { CustomSelectProps } from './types';
+
+function useDeprecatedProps( {
+	__experimentalShowSelectedHint,
+	...otherProps
+}: CustomSelectProps ) {
+	return {
+		showSelectedHint: __experimentalShowSelectedHint,
+		...otherProps,
+	};
+}
+
+// The removal of `__experimentalHint` in favour of `hint` doesn't happen in
+// the `useDeprecatedProps` hook in order not to break consumers that rely
+// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)
+function applyOptionDeprecations( {
+	__experimentalHint,
+	...rest
+}: CustomSelectProps[ 'options' ][ number ] ) {
+	return {
+		hint: __experimentalHint,
+		...rest,
+	};
+}
+
+function CustomSelectControl( props: CustomSelectProps ) {
+	const {
+		__next40pxDefaultSize = false,
+		describedBy,
+		options,
+		onChange,
+		size = 'default',
+		value,
+		className: classNameProp,
+		showSelectedHint = false,
+		...restProps
+	} = useDeprecatedProps( props );
+
+	// Forward props + store from v2 implementation
+	const store = Ariakit.useSelectStore( {
+		async setValue( nextValue ) {
+			const nextOption = options.find(
+				( item ) => item.name === nextValue
+			);
+
+			if ( ! onChange || ! nextOption ) {
+				return;
+			}
+
+			// Executes the logic in a microtask after the popup is closed.
+			// This is simply to ensure the isOpen state matches the one from the
+			// previous legacy implementation.
+			await Promise.resolve();
+			const state = store.getState();
+
+			const changeObject = {
+				highlightedIndex: state.renderedItems.findIndex(
+					( item ) => item.value === nextValue
+				),
+				inputValue: '',
+				isOpen: state.open,
+				selectedItem: nextOption,
+				type: '',
+			};
+			onChange( changeObject );
+		},
+		value: value?.name,
+		// Setting the first option as a default value when no value is provided
+		// is already done natively by the underlying Ariakit component,
+		// but doing this explicitly avoids the `onChange` callback from firing
+		// on initial render, thus making this implementation closer to the v1.
+		defaultValue: options[ 0 ]?.name,
+	} );
+
+	const children = options
+		.map( applyOptionDeprecations )
+		.map( ( { name, key, hint, style, className } ) => {
+			const withHint = (
+				<Styled.WithHintItemWrapper>
+					<span>{ name }</span>
+					<Styled.WithHintItemHint
+						// Keeping the classname for legacy reasons
+						className="components-custom-select-control__item-hint"
+					>
+						{ hint }
+					</Styled.WithHintItemHint>
+				</Styled.WithHintItemWrapper>
+			);
+
+			return (
+				<CustomSelectItem
+					key={ key }
+					value={ name }
+					children={ hint ? withHint : name }
+					style={ style }
+					className={ clsx(
+						className,
+						// Keeping the classnames for legacy reasons
+						'components-custom-select-control__item',
+						{
+							'has-hint': hint,
+						}
+					) }
+				/>
+			);
+		} );
+
+	const renderSelectedValueHint = () => {
+		const { value: currentValue } = store.getState();
+
+		const selectedOptionHint = options
+			?.map( applyOptionDeprecations )
+			?.find( ( { name } ) => currentValue === name )?.hint;
+
+		return (
+			<Styled.SelectedExperimentalHintWrapper>
+				{ currentValue }
+				{ selectedOptionHint && (
+					<Styled.SelectedExperimentalHintItem
+						// Keeping the classname for legacy reasons
+						className="components-custom-select-control__hint"
+					>
+						{ selectedOptionHint }
+					</Styled.SelectedExperimentalHintItem>
+				) }
+			</Styled.SelectedExperimentalHintWrapper>
+		);
+	};
+
+	const translatedSize = ( () => {
+		if (
+			( __next40pxDefaultSize && size === 'default' ) ||
+			size === '__unstable-large'
+		) {
+			return 'default';
+		}
+		if ( ! __next40pxDefaultSize && size === 'default' ) {
+			return 'compact';
+		}
+		return size;
+	} )();
+
+	return (
+		<_CustomSelect
+			aria-describedby={ describedBy }
+			renderSelectedValue={
+				showSelectedHint ? renderSelectedValueHint : undefined
+			}
+			size={ translatedSize }
+			store={ store }
+			className={ clsx(
+				// Keeping the classname for legacy reasons
+				'components-custom-select-control',
+				classNameProp
+			) }
+			isLegacy
+			{ ...restProps }
+		>
+			{ children }
+		</_CustomSelect>
+	);
+}
+
+export default CustomSelectControl;

package/src/custom-select-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,32 +13,40 @@ import { useState } from '@wordpress/element';
  */
 import CustomSelectControl from '..';
 
-export default {
+const meta: Meta< typeof CustomSelectControl > = {
 	title: 'Components/CustomSelectControl',
 	component: CustomSelectControl,
 	argTypes: {
-		__next40pxDefaultSize: { control: { type: 'boolean' } },
-		__experimentalShowSelectedHint: { control: { type: 'boolean' } },
-		size: {
-			options: [ 'small', 'default', '__unstable-large' ],
-			control: {
-				type: 'radio',
-			},
-		},
 		onChange: { control: { type: null } },
 		value: { control: { type: null } },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: {
+			source: { excludeDecorators: true },
+		},
 	},
+	decorators: [
+		( Story ) => (
+			<div
+				style={ {
+					minHeight: '150px',
+				} }
+			>
+				<Story />
+			</div>
+		),
+	],
 };
+export default meta;
 
 const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
 	const [ value, setValue ] = useState( props.options[ 0 ] );
 
 	const onChange: React.ComponentProps<
 		typeof CustomSelectControl
-	>[ 'onChange' ] = ( changeObject: { selectedItem: any } ) => {
+	>[ 'onChange' ] = ( changeObject ) => {
 		setValue( changeObject.selectedItem );
 		props.onChange?.( changeObject );
 	};
@@ -52,7 +60,7 @@ const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
 	);
 };
 
-export const Default: StoryFn = Template.bind( {} );
+export const Default = Template.bind( {} );
 Default.args = {
 	label: 'Label',
 	options: [
@@ -80,7 +88,7 @@ Default.args = {
 	],
 };
 
-export const WithLongLabels: StoryFn = Template.bind( {} );
+export const WithLongLabels = Template.bind( {} );
 WithLongLabels.args = {
 	...Default.args,
 	options: [
@@ -99,29 +107,29 @@ WithLongLabels.args = {
 	],
 };
 
-export const WithHints: StoryFn = Template.bind( {} );
+export const WithHints = Template.bind( {} );
 WithHints.args = {
 	...Default.args,
 	options: [
 		{
 			key: 'thumbnail',
 			name: 'Thumbnail',
-			__experimentalHint: '150x150',
+			hint: '150x150',
 		},
 		{
 			key: 'medium',
 			name: 'Medium',
-			__experimentalHint: '250x250',
+			hint: '250x250',
 		},
 		{
 			key: 'large',
 			name: 'Large',
-			__experimentalHint: '1024x1024',
+			hint: '1024x1024',
 		},
 		{
 			key: 'full',
 			name: 'Full Size',
-			__experimentalHint: '1600x1600',
+			hint: '1600x1600',
 		},
 	],
 };