@wordpress/components 26.0.1 → 27.0.0

package/src/color-picker/component.tsx

@@ -16,7 +16,11 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useContextSystem, contextConnect } from '../context';
+import {
+	useContextSystem,
+	contextConnect,
+	ContextSystemProvider,
+} from '../context';
 import {
 	ColorfulWrapper,
 	SelectControl,
@@ -39,6 +43,9 @@ const options = [
 	{ label: 'Hex', value: 'hex' as const },
 ];
 
+// `isBorderless` is still experimental and not a public prop for InputControl yet.
+const BORDERLESS_SELECT_CONTROL_CONTEXT = { InputBase: { isBorderless: true } };
+
 const UnconnectedColorPicker = (
 	props: ColorPickerProps,
 	forwardedRef: ForwardedRef< any >
@@ -107,16 +114,20 @@ const UnconnectedColorPicker = (
 			/>
 			<AuxiliaryColorArtefactWrapper>
 				<AuxiliaryColorArtefactHStackHeader justify="space-between">
-					<SelectControl
-						__nextHasNoMarginBottom
-						options={ options }
-						value={ colorType }
-						onChange={ ( nextColorType ) =>
-							setColorType( nextColorType as ColorType )
-						}
-						label={ __( 'Color format' ) }
-						hideLabelFromVision
-					/>
+					<ContextSystemProvider
+						value={ BORDERLESS_SELECT_CONTROL_CONTEXT }
+					>
+						<SelectControl
+							__nextHasNoMarginBottom
+							options={ options }
+							value={ colorType }
+							onChange={ ( nextColorType ) =>
+								setColorType( nextColorType as ColorType )
+							}
+							label={ __( 'Color format' ) }
+							hideLabelFromVision
+						/>
+					</ContextSystemProvider>
 					<ColorCopyButton
 						color={ safeColordColor }
 						colorType={ copyFormat || colorType }

package/src/color-picker/styles.ts

@@ -14,29 +14,15 @@ import { boxSizingReset } from '../utils';
 import Button from '../button';
 import { Flex } from '../flex';
 import { HStack } from '../h-stack';
-import {
-	BackdropUI,
-	Container as InputControlContainer,
-} from '../input-control/styles/input-control-styles';
 import CONFIG from '../utils/config-values';
 
 export const NumberControlWrapper = styled( NumberControl )`
-	${ InputControlContainer } {
-		width: ${ space( 24 ) };
-	}
+	width: ${ space( 24 ) };
 `;
 
 export const SelectControl = styled( InnerSelectControl )`
 	margin-left: ${ space( -2 ) };
 	width: 5em;
-	/*
-	 * Remove border, but preserve focus styles
-	 * TODO: this override should be removed,
-	 * see https://github.com/WordPress/gutenberg/pull/50609
-	 */
-	select:not( :focus ) ~ ${ BackdropUI }${ BackdropUI }${ BackdropUI } {
-		border-color: transparent;
-	}
 `;
 
 export const RangeControl = styled( InnerRangeControl )`

package/src/combobox-control/index.tsx

@@ -33,6 +33,7 @@ import { normalizeTextString } from '../utils/strings';
 import type { ComboboxControlOption, ComboboxControlProps } from './types';
 import type { TokenInputProps } from '../form-token-field/types';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 
 const noop = () => {};
 
@@ -186,51 +187,42 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		setIsExpanded( true );
 	};
 
-	const onKeyDown: React.KeyboardEventHandler< HTMLDivElement > = (
-		event
-	) => {
-		let preventDefault = false;
+	const onKeyDown: React.KeyboardEventHandler< HTMLDivElement > =
+		withIgnoreIMEEvents( ( event ) => {
+			let preventDefault = false;
 
-		if (
-			event.defaultPrevented ||
-			// Ignore keydowns from IMEs
-			event.nativeEvent.isComposing ||
-			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
-			// is `isComposing=false`, even though it's technically still part of the composition.
-			// These can only be detected by keyCode.
-			event.keyCode === 229
-		) {
-			return;
-		}
+			if ( event.defaultPrevented ) {
+				return;
+			}
 
-		switch ( event.code ) {
-			case 'Enter':
-				if ( selectedSuggestion ) {
-					onSuggestionSelected( selectedSuggestion );
+			switch ( event.code ) {
+				case 'Enter':
+					if ( selectedSuggestion ) {
+						onSuggestionSelected( selectedSuggestion );
+						preventDefault = true;
+					}
+					break;
+				case 'ArrowUp':
+					handleArrowNavigation( -1 );
 					preventDefault = true;
-				}
-				break;
-			case 'ArrowUp':
-				handleArrowNavigation( -1 );
-				preventDefault = true;
-				break;
-			case 'ArrowDown':
-				handleArrowNavigation( 1 );
-				preventDefault = true;
-				break;
-			case 'Escape':
-				setIsExpanded( false );
-				setSelectedSuggestion( null );
-				preventDefault = true;
-				break;
-			default:
-				break;
-		}
+					break;
+				case 'ArrowDown':
+					handleArrowNavigation( 1 );
+					preventDefault = true;
+					break;
+				case 'Escape':
+					setIsExpanded( false );
+					setSelectedSuggestion( null );
+					preventDefault = true;
+					break;
+				default:
+					break;
+			}
 
-		if ( preventDefault ) {
-			event.preventDefault();
-		}
-	};
+			if ( preventDefault ) {
+				event.preventDefault();
+			}
+		} );
 
 	const onBlur = () => {
 		setInputHasFocus( false );

package/src/composite/legacy/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { queryByAttribute, render, screen } from '@testing-library/react';
-import { press, waitFor } from '@ariakit/test';
+import { press, sleep, waitFor } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -178,10 +178,13 @@ describe.each( [
 		);
 		renderAndValidate( <Test /> );
 
+		await sleep();
 		await press.Tab();
 		expect( screen.getByText( 'Before' ) ).toHaveFocus();
+		await sleep();
 		await press.Tab();
 		expect( screen.getByText( 'Item 1' ) ).toHaveFocus();
+		await sleep();
 		await press.Tab();
 		expect( screen.getByText( 'After' ) ).toHaveFocus();
 		await press.ShiftTab();
@@ -210,6 +213,7 @@ describe.each( [
 
 		expect( item2 ).toBeDisabled();
 
+		await sleep();
 		await press.Tab();
 		expect( item1 ).toHaveFocus();
 		await press.ArrowDown();
@@ -239,6 +243,7 @@ describe.each( [
 		expect( item2 ).toBeEnabled();
 		expect( item2 ).toHaveAttribute( 'aria-disabled', 'true' );
 
+		await sleep();
 		await press.Tab();
 		expect( item1 ).toHaveFocus();
 		await press.ArrowDown();
@@ -274,8 +279,9 @@ describe.each( [
 		renderAndValidate( <Test /> );
 		const { item2 } = getOneDimensionalItems();
 
+		await sleep();
 		await press.Tab();
-		expect( item2 ).toHaveFocus();
+		await waitFor( () => expect( item2 ).toHaveFocus() );
 	} );
 } );
 
@@ -317,6 +323,7 @@ describe.each( [
 		test( 'All directions work with no orientation', async () => {
 			const { item1, item2, item3 } = useOneDimensionalTest();
 
+			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -354,6 +361,7 @@ describe.each( [
 				orientation: 'horizontal',
 			} );
 
+			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -383,6 +391,7 @@ describe.each( [
 				orientation: 'vertical',
 			} );
 
+			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press( next );
@@ -412,6 +421,7 @@ describe.each( [
 				loop: true,
 			} );
 
+			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -434,6 +444,7 @@ describe.each( [
 			const { itemA1, itemA2, itemA3, itemB1, itemB2, itemC1, itemC3 } =
 				useTwoDimensionalTest();
 
+			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowUp();
@@ -470,6 +481,7 @@ describe.each( [
 			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
 				useTwoDimensionalTest( { loop: true } );
 
+			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( next );
@@ -494,6 +506,7 @@ describe.each( [
 			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
 				useTwoDimensionalTest( { wrap: true } );
 
+			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( next );
@@ -526,6 +539,7 @@ describe.each( [
 				wrap: true,
 			} );
 
+			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( previous );
@@ -541,6 +555,7 @@ describe.each( [
 		test( 'Focus shifts if vertical neighbour unavailable when shift enabled', async () => {
 			const { itemA1, itemB1, itemB2, itemC1 } = useShiftTest( true );
 
+			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -562,6 +577,7 @@ describe.each( [
 		test( 'Focus does not shift if vertical neighbour unavailable when shift not enabled', async () => {
 			const { itemA1, itemB1, itemB2 } = useShiftTest( false );
 
+			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowDown();

package/src/custom-select-control/README.md

@@ -41,7 +41,6 @@ function MyCustomSelectControl() {
 	const [ , setFontSize ] = useState();
 	return (
 		<CustomSelectControl
-			__nextUnconstrainedWidth
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
@@ -53,7 +52,6 @@ function MyControlledCustomSelectControl() {
 	const [ fontSize, setFontSize ] = useState( options[ 0 ] );
 	return (
 		<CustomSelectControl
-			__nextUnconstrainedWidth
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
@@ -114,14 +112,6 @@ Can be used to externally control the value of the control, like in the `MyContr
 -   Type: `Object`
 -   Required: No
 
-#### __nextUnconstrainedWidth
-
-Start opting into the unconstrained width style that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`
-
 #### onMouseOver
 
 A handler for onMouseOver events.

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

@@ -11,7 +11,6 @@ import classnames from 'classnames';
 import { Icon, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useState } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -19,9 +18,9 @@ import deprecated from '@wordpress/deprecated';
 import { VisuallyHidden } from '../visually-hidden';
 import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
 import SelectControlChevronDown from '../select-control/chevron-down';
-import { InputBaseWithBackCompatMinWidth } from './styles';
 import { StyledLabel } from '../base-control/styles/base-control-styles';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import InputBase from '../input-control/input-base';
 
 const itemToString = ( item ) => item?.name;
 // This is needed so that in Windows, where
@@ -67,8 +66,6 @@ export default function CustomSelectControl( props ) {
 	const {
 		/** Start opting into the larger default height that will become the default size in a future version. */
 		__next40pxDefaultSize = false,
-		/** Start opting into the unconstrained width that will become the default in a future version. */
-		__nextUnconstrainedWidth = false,
 		className,
 		hideLabelFromVision,
 		label,
@@ -116,17 +113,6 @@ export default function CustomSelectControl( props ) {
 		onBlur?.( e );
 	}
 
-	if ( ! __nextUnconstrainedWidth ) {
-		deprecated(
-			'Constrained width styles for wp.components.CustomSelectControl',
-			{
-				since: '6.1',
-				version: '6.4',
-				hint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version',
-			}
-		);
-	}
-
 	function getDescribedBy() {
 		if ( describedBy ) {
 			return describedBy;
@@ -180,14 +166,9 @@ export default function CustomSelectControl( props ) {
 					{ label }
 				</StyledLabel>
 			) }
-			<InputBaseWithBackCompatMinWidth
+			<InputBase
 				__next40pxDefaultSize={ __next40pxDefaultSize }
-				__nextUnconstrainedWidth={ __nextUnconstrainedWidth }
 				isFocused={ isOpen || isFocused }
-				__unstableInputWidth={
-					__nextUnconstrainedWidth ? undefined : 'auto'
-				}
-				labelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }
 				size={ size }
 				suffix={ <SelectControlChevronDown /> }
 			>
@@ -215,7 +196,7 @@ export default function CustomSelectControl( props ) {
 							</span>
 						) }
 				</SelectControlSelect>
-			</InputBaseWithBackCompatMinWidth>
+			</InputBase>
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
 				{ isOpen &&

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

@@ -20,7 +20,6 @@ export default {
 
 export const Default = CustomSelectControl.bind( {} );
 Default.args = {
-	__nextUnconstrainedWidth: true,
 	label: 'Label',
 	options: [
 		{

package/src/custom-select-control/test/index.js

@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import CustomSelectControl from '..';
+import UncontrolledCustomSelectControl from '..';
 
 const customClass = 'amber-skies';
 
@@ -46,14 +46,14 @@ const props = {
 			},
 		},
 	],
-	__nextUnconstrainedWidth: true,
 };
 
-const ControlledCustomSelectControl = ( { options } ) => {
+const ControlledCustomSelectControl = ( { options, ...restProps } ) => {
 	const [ value, setValue ] = useState( options[ 0 ] );
 	return (
-		<CustomSelectControl
-			{ ...props }
+		<UncontrolledCustomSelectControl
+			{ ...restProps }
+			options={ options }
 			onChange={ ( { selectedItem } ) => setValue( selectedItem ) }
 			value={ options.find( ( option ) => option.key === value.key ) }
 		/>
@@ -61,7 +61,7 @@ const ControlledCustomSelectControl = ( { options } ) => {
 };
 
 describe.each( [
-	[ 'uncontrolled', CustomSelectControl ],
+	[ 'uncontrolled', UncontrolledCustomSelectControl ],
 	[ 'controlled', ControlledCustomSelectControl ],
 ] )( 'CustomSelectControl %s', ( ...modeAndComponent ) => {
 	const [ , Component ] = modeAndComponent;
@@ -99,7 +99,7 @@ describe.each( [
 	it( 'Should keep current selection if dropdown is closed without changing selection', async () => {
 		const user = userEvent.setup();
 
-		render( <CustomSelectControl { ...props } /> );
+		render( <Component { ...props } /> );
 
 		const currentSelectedItem = screen.getByRole( 'button', {
 			expanded: false,
@@ -128,7 +128,7 @@ describe.each( [
 	it( 'Should apply class only to options that have a className defined', async () => {
 		const user = userEvent.setup();
 
-		render( <CustomSelectControl { ...props } /> );
+		render( <Component { ...props } /> );
 
 		await user.click(
 			screen.getByRole( 'button', {
@@ -166,7 +166,7 @@ describe.each( [
 		const customStyles =
 			'background-color: rgb(127, 255, 212); rotate: 13deg;';
 
-		render( <CustomSelectControl { ...props } /> );
+		render( <Component { ...props } /> );
 
 		await user.click(
 			screen.getByRole( 'button', {
@@ -201,7 +201,7 @@ describe.each( [
 
 	it( 'does not show selected hint by default', () => {
 		render(
-			<CustomSelectControl
+			<Component
 				{ ...props }
 				label="Custom select"
 				options={ [
@@ -220,7 +220,7 @@ describe.each( [
 
 	it( 'shows selected hint when __experimentalShowSelectedHint is set', () => {
 		render(
-			<CustomSelectControl
+			<Component
 				{ ...props }
 				label="Custom select"
 				options={ [
@@ -249,7 +249,7 @@ describe.each( [
 					role="none"
 					onKeyDown={ onKeyDown }
 				>
-					<CustomSelectControl { ...props } />
+					<Component { ...props } />
 				</div>
 			);
 			const currentSelectedItem = screen.getByRole( 'button', {
@@ -268,7 +268,7 @@ describe.each( [
 		it( 'Should be able to change selection using keyboard', async () => {
 			const user = userEvent.setup();
 
-			render( <CustomSelectControl { ...props } /> );
+			render( <Component { ...props } /> );
 
 			const currentSelectedItem = screen.getByRole( 'button', {
 				expanded: false,
@@ -293,7 +293,7 @@ describe.each( [
 		it( 'Should be able to type characters to select matching options', async () => {
 			const user = userEvent.setup();
 
-			render( <CustomSelectControl { ...props } /> );
+			render( <Component { ...props } /> );
 
 			const currentSelectedItem = screen.getByRole( 'button', {
 				expanded: false,
@@ -315,7 +315,7 @@ describe.each( [
 		it( 'Can change selection with a focused input and closed dropdown if typed characters match an option', async () => {
 			const user = userEvent.setup();
 
-			render( <CustomSelectControl { ...props } /> );
+			render( <Component { ...props } /> );
 
 			const currentSelectedItem = screen.getByRole( 'button', {
 				expanded: false,
@@ -341,7 +341,7 @@ describe.each( [
 		it( 'Should have correct aria-selected value for selections', async () => {
 			const user = userEvent.setup();
 
-			render( <CustomSelectControl { ...props } /> );
+			render( <Component { ...props } /> );
 
 			const currentSelectedItem = screen.getByRole( 'button', {
 				expanded: false,
@@ -398,7 +398,7 @@ describe.each( [
 			const onBlurMock = jest.fn();
 
 			render(
-				<CustomSelectControl
+				<Component
 					{ ...props }
 					onFocus={ onFocusMock }
 					onBlur={ onBlurMock }

package/src/custom-select-control-v2/README.md

@@ -1,11 +1,93 @@
+# CustomSelect
+
 <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 customizable select control component.
 
+## Development guidelines
+
+### Usage
+
+#### Uncontrolled Mode
+
+CustomSelect can be used in an uncontrolled mode, where the component manages its own state. In this mode, the `defaultValue` prop can be used to set the initial selected value. If this prop is not set, the first value from the children will be selected by default.
+
+```jsx
+const UncontrolledCustomSelect = () => (
+	<CustomSelect label="Colors">
+		<CustomSelectItem value="Blue">
+			{ /* The `defaultValue` since it wasn't defined */ }
+			<span style={ { color: 'blue' } }>Blue</span>
+		</CustomSelectItem>
+		<CustomSelectItem value="Purple">
+			<span style={ { color: 'purple' } }>Purple</span>
+		</CustomSelectItem>
+		<CustomSelectItem value="Pink">
+			<span style={ { color: 'deeppink' } }>Pink</span>
+		</CustomSelectItem>
+	</CustomSelect>
+);
+```
+
+#### Controlled Mode
+
+CustomSelect can also be used in a controlled mode, where the parent component specifies the `value` and the `onChange` props to control selection.
+
+```jsx
+const ControlledCustomSelect = () => {
+	const [ value, setValue ] = useState< string | string[] >();
+
+    const renderControlledValue = ( renderValue: string | string[] ) => (
+		<>
+			{ /* Custom JSX to display `renderValue` item */ }
+		</>
+    );
+
+	return (
+		<CustomSelect
+			{ ...props }
+			onChange={ ( nextValue ) => {
+				setValue( nextValue );
+				props.onChange?.( nextValue );
+			} }
+			value={ value }
+		>
+			{ [ 'blue', 'purple', 'pink' ].map( ( option ) => (
+				<CustomSelectItem key={ option } value={ option }>
+					{ renderControlledValue( option ) }
+				</CustomSelectItem>
+			) ) }
+		</CustomSelect>
+	);
+};
+```
+
+#### Multiple Selection
+
+Multiple selection can be enabled by using an array for the `value` and
+`defaultValue` props. The argument of the `onChange` function will also change accordingly.
+
+```jsx
+const MultiSelectCustomSelect = () => (
+	<CustomSelect defaultValue={ [ 'blue', 'pink' ] } label="Colors">
+		{ [ 'blue', 'purple', 'pink' ].map( ( item ) => (
+			<CustomSelectItem key={ item } value={ item }>
+				{ item }
+			</CustomSelectItem>
+		) ) }
+	</CustomSelect>
+);
+```
+
+### Components and Sub-components
+
+CustomSelect is comprised of two individual components:
+
+-   `CustomSelect`: a wrapper component and context provider. It is responsible for managing the state of the `CustomSelectItem` children.
+-   `CustomSelectItem`: renders a single select item. The first `CustomSelectItem` child will be used as the `defaultValue` when `defaultValue` is undefined.
+
 #### Props
 
 The component accepts the following props:
@@ -16,37 +98,45 @@ The child elements. This should be composed of CustomSelect.Item components.
 
 -   Required: yes
 
-##### `defaultValue`: `string`
+##### `defaultValue`: `string | string[]`
 
 An optional default value for the control. If left `undefined`, the first non-disabled item will be used.
 
 -   Required: no
 
+##### `hideLabelFromVision`: `boolean`
+
+Used to visually hide the label. It will always be visible to screen readers.
+
+-   Required: no
+-   Default: `false`
+
 ##### `label`: `string`
 
 Label for the control.
 
 -   Required: yes
 
-##### `onChange`: `( newValue: string ) => void`
+##### `onChange`: `( newValue: string | string[] ) => void`
 
 A function that receives the new value of the input.
 
 -   Required: no
 
-##### `renderSelectedValue`: `( selectValue: string ) => React.ReactNode`
+##### `renderSelectedValue`: `( selectValue: string | string[] ) => React.ReactNode`
 
 Can be used to render select UI with custom styled values.
 
 -   Required: no
 
-##### `size`: `'default' | 'large'`
+##### `size`: `'default' | 'compact'`
 
 The size of the control.
 
 -   Required: no
+-   Default: `'default'`
 
-##### `value`: `string`
+##### `value`: `string | string[]`
 
 Can be used to externally control the value of the control.