@wordpress/components 26.0.4 → 27.1.0

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

@@ -0,0 +1,122 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useMemo } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, chevronDown } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { VisuallyHidden } from '..';
+import * as Styled from './styles';
+import type {
+	CustomSelectContext as CustomSelectContextType,
+	CustomSelectStore,
+	CustomSelectButtonProps,
+	_CustomSelectProps,
+} from './types';
+import {
+	contextConnectWithoutRef,
+	useContextSystem,
+	type WordPressComponentProps,
+} from '../context';
+
+export const CustomSelectContext =
+	createContext< CustomSelectContextType >( undefined );
+
+function defaultRenderSelectedValue(
+	value: CustomSelectButtonProps[ '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;
+}
+
+const UnconnectedCustomSelectButton = (
+	props: Omit<
+		WordPressComponentProps<
+			CustomSelectButtonProps & CustomSelectStore,
+			'button',
+			false
+		>,
+		'onChange'
+	>
+) => {
+	const {
+		renderSelectedValue,
+		size = 'default',
+		store,
+		...restProps
+	} = useContextSystem( props, 'CustomSelectControlButton' );
+
+	const { value: currentValue } = store.useState();
+
+	const computedRenderSelectedValue = useMemo(
+		() => renderSelectedValue ?? defaultRenderSelectedValue,
+		[ renderSelectedValue ]
+	);
+
+	return (
+		<Styled.Select
+			{ ...restProps }
+			size={ size }
+			hasCustomRenderProp={ !! renderSelectedValue }
+			store={ store }
+			// to match legacy behavior where using arrow keys
+			// move selection rather than open the popover
+			showOnKeyDown={ false }
+		>
+			<div>{ computedRenderSelectedValue( currentValue ) }</div>
+			<Icon icon={ chevronDown } size={ 18 } />
+		</Styled.Select>
+	);
+};
+
+const CustomSelectButton = contextConnectWithoutRef(
+	UnconnectedCustomSelectButton,
+	'CustomSelectControlButton'
+);
+
+function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
+	const {
+		children,
+		hideLabelFromVision = false,
+		label,
+		store,
+		...restProps
+	} = props;
+
+	return (
+		<>
+			{ hideLabelFromVision ? ( // TODO: Replace with BaseControl
+				<VisuallyHidden as="label">{ label }</VisuallyHidden>
+			) : (
+				<Styled.SelectLabel store={ store }>
+					{ label }
+				</Styled.SelectLabel>
+			) }
+			<CustomSelectButton { ...restProps } store={ store } />
+			<Styled.SelectPopover gutter={ 12 } store={ store } sameWidth>
+				<CustomSelectContext.Provider value={ { store } }>
+					{ children }
+				</CustomSelectContext.Provider>
+			</Styled.SelectPopover>
+		</>
+	);
+}
+
+export default _CustomSelect;

package/src/custom-select-control-v2/default-component/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+/**
+ * Internal dependencies
+ */
+import _CustomSelect from '../custom-select';
+import type { CustomSelectProps } from '../types';
+import type { WordPressComponentProps } from '../../context';
+
+function CustomSelect(
+	props: WordPressComponentProps< CustomSelectProps, 'button', false >
+) {
+	const { defaultValue, onChange, value, ...restProps } = props;
+	// Forward props + store from v2 implementation
+	const store = Ariakit.useSelectStore( {
+		setValue: ( nextValue ) => onChange?.( nextValue ),
+		defaultValue,
+		value,
+	} );
+
+	return <_CustomSelect { ...restProps } store={ store } />;
+}
+
+export default CustomSelect;

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

@@ -1,105 +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,
-	...props
-}: WordPressComponentProps< CustomSelectProps, 'button', false > ) {
-	const store = Ariakit.useSelectStore( {
-		setValue: ( nextValue ) => onChange?.( nextValue ),
-		defaultValue,
-		value,
-		// fix for Safari bug: https://github.com/WordPress/gutenberg/issues/55023#issuecomment-1834035917
-		virtualFocus: false,
-	} );
-
-	const { value: currentValue } = store.useState();
-
-	const computedRenderSelectedValue =
-		renderSelectedValue ?? defaultRenderSelectedValue;
-
-	return (
-		<>
-			<Styled.CustomSelectLabel store={ store }>
-				{ label }
-			</Styled.CustomSelectLabel>
-			<Styled.CustomSelectButton
-				{ ...props }
-				size={ size }
-				hasCustomRenderProp={ !! renderSelectedValue }
-				store={ store }
-			>
-				{ computedRenderSelectedValue( 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 { default as CustomSelect } from './default-component';
+export { default as CustomSelectItem } from './custom-select-item';

package/src/custom-select-control-v2/legacy-component/index.tsx

@@ -0,0 +1,133 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import _CustomSelect from '../custom-select';
+import type { LegacyCustomSelectProps } from '../types';
+import { CustomSelectItem } from '..';
+import * as Styled from '../styles';
+import { ContextSystemProvider } from '../../context';
+
+function CustomSelect( props: LegacyCustomSelectProps ) {
+	const {
+		__experimentalShowSelectedHint,
+		__next40pxDefaultSize = false,
+		options,
+		onChange,
+		size = 'default',
+		value,
+		...restProps
+	} = props;
+
+	// Forward props + store from v2 implementation
+	const store = Ariakit.useSelectStore( {
+		async setValue( nextValue ) {
+			if ( ! onChange ) return;
+
+			// Executes the logic in a microtask after the popup is closed.
+			// This is simply to ensure the isOpen state matches that in Downshift.
+			await Promise.resolve();
+			const state = store.getState();
+
+			const changeObject = {
+				highlightedIndex: state.renderedItems.findIndex(
+					( item ) => item.value === nextValue
+				),
+				inputValue: '',
+				isOpen: state.open,
+				selectedItem: {
+					name: nextValue as string,
+					key: nextValue as string,
+				},
+				type: '',
+			};
+			onChange( changeObject );
+		},
+	} );
+
+	const children = options.map(
+		( { name, key, __experimentalHint, ...rest } ) => {
+			const withHint = (
+				<Styled.WithHintWrapper>
+					<span>{ name }</span>
+					<Styled.ExperimentalHintItem className="components-custom-select-control__item-hint">
+						{ __experimentalHint }
+					</Styled.ExperimentalHintItem>
+				</Styled.WithHintWrapper>
+			);
+
+			return (
+				<CustomSelectItem
+					key={ key }
+					value={ name }
+					children={
+						__experimentalShowSelectedHint ? withHint : name
+					}
+					{ ...rest }
+				/>
+			);
+		}
+	);
+
+	const renderSelectedValueHint = () => {
+		const { value: currentValue } = store.getState();
+
+		const currentHint = options?.find(
+			( { name } ) => currentValue === name
+		);
+
+		return (
+			<>
+				{ currentValue }
+				<Styled.SelectedExperimentalHintItem className="components-custom-select-control__hint">
+					{ currentHint?.__experimentalHint }
+				</Styled.SelectedExperimentalHintItem>
+			</>
+		);
+	};
+
+	// translate legacy button sizing
+	const contextSystemValue = useMemo( () => {
+		let selectedSize;
+
+		if (
+			( __next40pxDefaultSize && size === 'default' ) ||
+			size === '__unstable-large'
+		) {
+			selectedSize = 'default';
+		} else if ( ! __next40pxDefaultSize && size === 'default' ) {
+			selectedSize = 'compact';
+		} else {
+			selectedSize = size;
+		}
+
+		return {
+			CustomSelectControlButton: { _overrides: { size: selectedSize } },
+		};
+	}, [ __next40pxDefaultSize, size ] );
+
+	const translatedProps = {
+		'aria-describedby': props.describedBy,
+		children,
+		renderSelectedValue: __experimentalShowSelectedHint
+			? renderSelectedValueHint
+			: undefined,
+		...restProps,
+	};
+
+	return (
+		<ContextSystemProvider value={ contextSystemValue }>
+			<_CustomSelect { ...translatedProps } store={ store } />
+		</ContextSystemProvider>
+	);
+}
+
+export default CustomSelect;