CustomSelectControl: Add adapter for legacy to new version

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

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import type { CustomSelectItemProps } from './types';
+import type { WordPressComponentProps } from '../context';
+import * as Styled from './styles';
+import { CustomSelectContext } from './custom-select';
+
+export function CustomSelectItem( {
+	children,
+	...props
+}: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {
+	const customSelectContext = useContext( CustomSelectContext );
+	return (
+		<Styled.CustomSelectItem
+			store={ customSelectContext?.store }
+			{ ...props }
+		>
+			{ children ?? props.value }
+			<Ariakit.SelectItemCheck />
+		</Styled.CustomSelectItem>
+	);
+}
+
+export default CustomSelectItem;

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

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { VisuallyHidden } from '..';
+import * as Styled from './styles';
+import type {
+	CustomSelectProps,
+	CustomSelectContext as CustomSelectContextType,
+} from './types';
+import type { WordPressComponentProps } from '../context';
+
+export const CustomSelectContext =
+	createContext< CustomSelectContextType >( undefined );
+
+function defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) {
+	const isValueEmpty = Array.isArray( value )
+		? value.length === 0
+		: value === undefined || value === null;
+
+	if ( isValueEmpty ) {
+		return __( 'Select an item' );
+	}
+
+	if ( Array.isArray( value ) ) {
+		return value.length === 1
+			? value[ 0 ]
+			: // translators: %s: number of items selected (it will always be 2 or more items)
+			  sprintf( __( '%s items selected' ), value.length );
+	}
+
+	return value;
+}
+
+export function CustomSelect( {
+	children,
+	defaultValue,
+	hideLabelFromVision = false,
+	label,
+	onChange,
+	size = 'default',
+	value,
+	renderSelectedValue = defaultRenderSelectedValue,
+	...props
+}: WordPressComponentProps< CustomSelectProps, 'button', false > ) {
+	const store = Ariakit.useSelectStore( {
+		setValue: ( nextValue ) => onChange?.( nextValue ),
+		defaultValue,
+		value,
+	} );
+
+	const { value: currentValue } = store.useState();
+
+	return (
+		<>
+			{ hideLabelFromVision ? (
+				<VisuallyHidden as="label">{ label }</VisuallyHidden>
+			) : (
+				<Styled.CustomSelectLabel store={ store }>
+					{ label }
+				</Styled.CustomSelectLabel>
+			) }
+			<Styled.CustomSelectButton
+				{ ...props }
+				size={ size }
+				hasCustomRenderProp={ !! renderSelectedValue }
+				store={ store }
+			>
+				{ renderSelectedValue( currentValue ) }
+				<Ariakit.SelectArrow />
+			</Styled.CustomSelectButton>
+			<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>
+				<CustomSelectContext.Provider value={ { store } }>
+					{ children }
+				</CustomSelectContext.Provider>
+			</Styled.CustomSelectPopover>
+		</>
+	);
+}
+
+export default CustomSelect;

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

@@ -1,100 +1,5 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import * as Ariakit from '@ariakit/react';
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import * as Styled from './styles';
-import type {
-	CustomSelectProps,
-	CustomSelectItemProps,
-	CustomSelectContext as CustomSelectContextType,
-} from './types';
-import type { WordPressComponentProps } from '../context';
-
-export const CustomSelectContext =
-	createContext< CustomSelectContextType >( undefined );
-
-function defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) {
-	const isValueEmpty = Array.isArray( value )
-		? value.length === 0
-		: value === undefined || value === null;
-
-	if ( isValueEmpty ) {
-		return __( 'Select an item' );
-	}
-
-	if ( Array.isArray( value ) ) {
-		return value.length === 1
-			? value[ 0 ]
-			: // translators: %s: number of items selected (it will always be 2 or more items)
-			  sprintf( __( '%s items selected' ), value.length );
-	}
-
-	return value;
-}
-
-export function CustomSelect( {
-	children,
-	defaultValue,
-	label,
-	onChange,
-	size = 'default',
-	value,
-	renderSelectedValue = defaultRenderSelectedValue,
-	...props
-}: WordPressComponentProps< CustomSelectProps, 'button', false > ) {
-	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
-				{ ...props }
-				size={ size }
-				hasCustomRenderProp={ !! renderSelectedValue }
-				store={ store }
-			>
-				{ renderSelectedValue( currentValue ) }
-				<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
-}: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {
-	const customSelectContext = useContext( CustomSelectContext );
-	return (
-		<Styled.CustomSelectItem
-			store={ customSelectContext?.store }
-			{ ...props }
-		>
-			{ children ?? props.value }
-			<Ariakit.SelectItemCheck />
-		</Styled.CustomSelectItem>
-	);
-}
+export { LegacyAdapter as CustomSelect } from './legacy-adapter';
+export { default as CustomSelectItem } from './custom-select-item';

packages/components/src/custom-select-control-v2/legacy-adapter.tsx

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import CustomSelect from './custom-select';
+import type { LegacyCustomSelectProps } from './types';
+import { useDeprecatedProps } from './use-deprecated-props';
+
+export function LegacyAdapter( props: LegacyCustomSelectProps ) {
+	return <CustomSelect { ...useDeprecatedProps( props ) } />;
+}

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

@@ -11,7 +11,8 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { CustomSelect, CustomSelectItem } from '..';
+import CustomSelect from '../custom-select';
+import { CustomSelectItem } from '..';
 
 const meta: Meta< typeof CustomSelect > = {
 	title: 'Components (Experimental)/CustomSelectControl v2',

packages/components/src/custom-select-control-v2/styles.ts

@@ -70,7 +70,15 @@ export const CustomSelectItem = styled( Ariakit.SelectItem )`
 	align-items: center;
 	justify-content: space-between;
 	padding: ${ space( 2 ) };
+	line-height: 2;
 	&[data-active-item] {
 		background-color: ${ COLORS.gray[ 300 ] };
 	}
 `;
+
+export const LegacyHint = styled.span`
+	color: ${ COLORS.gray[ 600 ] };
+	text-align: right;
+	margin-inline-end: ${ space( 2 ) };
+	flex-grow: 1;
+`;