@wordpress/components 19.14.0 → 19.17.0

package/src/color-picker/use-deprecated-props.ts

@@ -16,7 +16,7 @@ import memoize from 'memize';
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -73,16 +73,14 @@ function isLegacyProps( props: any ): props is LegacyProps {
 	);
 }
 
-function getColorFromLegacyProps( props: LegacyProps ): string | undefined {
-	if ( typeof props?.color === 'undefined' ) {
-		return undefined;
-	}
-	if ( typeof props.color === 'string' ) {
-		return props.color;
-	}
-	if ( props.color.hex ) {
-		return props.color.hex;
-	}
+function getColorFromLegacyProps(
+	color: LegacyProps[ 'color' ]
+): string | undefined {
+	if ( color === undefined ) return;
+
+	if ( typeof color === 'string' ) return color;
+
+	if ( color.hex ) return color.hex;
 
 	return undefined;
 }
@@ -109,41 +107,24 @@ const transformColorStringToLegacyColor = memoize(
 export function useDeprecatedProps(
 	props: LegacyProps | ColorPickerProps
 ): ColorPickerProps {
-	const onChange = useCallback(
+	const { onChangeComplete } = props as LegacyProps;
+	const legacyChangeHandler = useCallback(
 		( color: string ) => {
-			if ( isLegacyProps( props ) ) {
-				return props.onChangeComplete(
-					transformColorStringToLegacyColor( color )
-				);
-			}
-
-			return props.onChange?.( color );
+			onChangeComplete( transformColorStringToLegacyColor( color ) );
 		},
-		[
-			( props as LegacyProps ).onChangeComplete,
-			( props as ColorPickerProps ).onChange,
-		]
+		[ onChangeComplete ]
 	);
-
-	const color = useMemo( () => {
-		return isLegacyProps( props )
-			? getColorFromLegacyProps( props )
-			: props.color;
-	}, [ props.color ] );
-
-	const enableAlpha = useMemo( () => {
-		return isLegacyProps( props )
-			? ! props.disableAlpha
-			: props.enableAlpha;
-	}, [
-		( props as LegacyProps ).disableAlpha,
-		( props as ColorPickerProps ).enableAlpha,
-	] );
-
+	if ( isLegacyProps( props ) ) {
+		return {
+			color: getColorFromLegacyProps( props.color ),
+			enableAlpha: ! props.disableAlpha,
+			onChange: legacyChangeHandler,
+		};
+	}
 	return {
-		...( isLegacyProps( props ) ? {} : props ),
-		onChange,
-		color,
-		enableAlpha,
+		...props,
+		color: props.color as ColorPickerProps[ 'color' ],
+		enableAlpha: ( props as ColorPickerProps ).enableAlpha,
+		onChange: ( props as ColorPickerProps ).onChange,
 	};
 }

package/src/combobox-control/README.md

@@ -116,6 +116,13 @@ The current value of the input.
 -   Type: `mixed`
 -   Required: Yes
 
+#### __experimentalRenderItem
+
+Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).
+
+-   Type: `Function` - `( args: { item: object } ) => ReactNode`
+-   Required: No
+
 ## Related components
 
 -   Like this component, but without a search input, the `CustomSelectControl` component.

package/src/combobox-control/index.js

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { deburr } from 'lodash';
+import removeAccents from 'remove-accents';
+
 /**
  * WordPress dependencies
  */
@@ -15,19 +16,20 @@ import {
 	useEffect,
 } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
-import { ENTER, UP, DOWN, ESCAPE } from '@wordpress/keycodes';
 import { speak } from '@wordpress/a11y';
 import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
+import { InputWrapperFlex } from './styles';
 import TokenInput from '../form-token-field/token-input';
 import SuggestionsList from '../form-token-field/suggestions-list';
 import BaseControl from '../base-control';
 import Button from '../button';
-import { Flex, FlexBlock, FlexItem } from '../flex';
+import { FlexBlock, FlexItem } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
+import { useControlledValue } from '../utils/hooks';
 
 const noop = () => {};
 
@@ -44,10 +46,11 @@ const DetectOutside = withFocusOutside(
 );
 
 function ComboboxControl( {
-	value,
+	__next36pxDefaultSize,
+	value: valueProp,
 	label,
 	options,
-	onChange,
+	onChange: onChangeProp,
 	onFilterValueChange = noop,
 	hideLabelFromVision,
 	help,
@@ -56,10 +59,19 @@ function ComboboxControl( {
 	messages = {
 		selected: __( 'Item selected.' ),
 	},
+	__experimentalRenderItem,
 } ) {
+	const [ value, setValue ] = useControlledValue( {
+		value: valueProp,
+		onChange: onChangeProp,
+	} );
+
 	const currentOption = options.find( ( option ) => option.value === value );
 	const currentLabel = currentOption?.label ?? '';
-	const instanceId = useInstanceId( ComboboxControl );
+	// Use a custom prefix when generating the `instanceId` to avoid having
+	// duplicate input IDs when rendering this component and `FormTokenField`
+	// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).
+	const instanceId = useInstanceId( ComboboxControl, 'combobox-control' );
 	const [ selectedSuggestion, setSelectedSuggestion ] = useState(
 		currentOption || null
 	);
@@ -71,9 +83,9 @@ function ComboboxControl( {
 	const matchingSuggestions = useMemo( () => {
 		const startsWithMatch = [];
 		const containsMatch = [];
-		const match = deburr( inputValue.toLocaleLowerCase() );
+		const match = removeAccents( inputValue.toLocaleLowerCase() );
 		options.forEach( ( option ) => {
-			const index = deburr( option.label )
+			const index = removeAccents( option.label )
 				.toLocaleLowerCase()
 				.indexOf( match );
 			if ( index === 0 ) {
@@ -87,7 +99,7 @@ function ComboboxControl( {
 	}, [ inputValue, options, value ] );
 
 	const onSuggestionSelected = ( newSelectedSuggestion ) => {
-		onChange( newSelectedSuggestion.value );
+		setValue( newSelectedSuggestion.value );
 		speak( messages.selected, 'assertive' );
 		setSelectedSuggestion( newSelectedSuggestion );
 		setInputValue( '' );
@@ -113,22 +125,22 @@ function ComboboxControl( {
 			return;
 		}
 
-		switch ( event.keyCode ) {
-			case ENTER:
+		switch ( event.code ) {
+			case 'Enter':
 				if ( selectedSuggestion ) {
 					onSuggestionSelected( selectedSuggestion );
 					preventDefault = true;
 				}
 				break;
-			case UP:
+			case 'ArrowUp':
 				handleArrowNavigation( -1 );
 				preventDefault = true;
 				break;
-			case DOWN:
+			case 'ArrowDown':
 				handleArrowNavigation( 1 );
 				preventDefault = true;
 				break;
-			case ESCAPE:
+			case 'Escape':
 				setIsExpanded( false );
 				setSelectedSuggestion( null );
 				preventDefault = true;
@@ -167,7 +179,7 @@ function ComboboxControl( {
 	};
 
 	const handleOnReset = () => {
-		onChange( null );
+		setValue( null );
 		inputContainer.current.focus();
 	};
 
@@ -225,7 +237,9 @@ function ComboboxControl( {
 					tabIndex="-1"
 					onKeyDown={ onKeyDown }
 				>
-					<Flex>
+					<InputWrapperFlex
+						__next36pxDefaultSize={ __next36pxDefaultSize }
+					>
 						<FlexBlock>
 							<TokenInput
 								className="components-combobox-control__input"
@@ -257,7 +271,7 @@ function ComboboxControl( {
 								/>
 							</FlexItem>
 						) }
-					</Flex>
+					</InputWrapperFlex>
 					{ isExpanded && (
 						<SuggestionsList
 							instanceId={ instanceId }
@@ -272,6 +286,9 @@ function ComboboxControl( {
 							onHover={ setSelectedSuggestion }
 							onSelect={ onSuggestionSelected }
 							scrollIntoView
+							__experimentalRenderItem={
+								__experimentalRenderItem
+							}
 						/>
 					) }
 				</div>

package/src/combobox-control/stories/index.js

@@ -266,23 +266,68 @@ const mapCountryOption = ( country ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-function CountryCodeComboboxControl( { allowReset } ) {
+function Template( args ) {
 	const [ value, setValue ] = useState( null );
 
 	return (
 		<>
 			<ComboboxControl
+				{ ...args }
 				value={ value }
 				onChange={ setValue }
-				label="Select a country"
-				options={ countryOptions }
-				allowReset={ allowReset }
 			/>
 			<p>Value: { value }</p>
 		</>
 	);
 }
-export const _default = CountryCodeComboboxControl.bind( {} );
-_default.args = {
+export const Default = Template.bind( {} );
+Default.args = {
+	__next36pxDefaultSize: false,
 	allowReset: false,
+	label: 'Select a country',
+	options: countryOptions,
+};
+
+const authorOptions = [
+	{
+		value: 'parsley',
+		label: 'Parsley Montana',
+		age: 48,
+		country: 'Germany',
+	},
+	{
+		value: 'cabbage',
+		label: 'Cabbage New York',
+		age: 44,
+		country: 'France',
+	},
+	{
+		value: 'jake',
+		label: 'Jake Weary',
+		age: 41,
+		country: 'United Kingdom',
+	},
+];
+
+/**
+ * The rendered output of each suggestion can be customized by passing a
+ * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
+ * and is subject to change.)
+ */
+export const WithCustomRenderItem = Template.bind( {} );
+WithCustomRenderItem.args = {
+	...Default.args,
+	label: 'Select an author',
+	options: authorOptions,
+	__experimentalRenderItem: ( { item } ) => {
+		const { label, age, country } = item;
+		return (
+			<div>
+				<div style={ { marginBottom: '0.2rem' } }>{ label }</div>
+				<small>
+					Age: { age }, Country: { country }
+				</small>
+			</div>
+		);
+	},
 };

package/src/combobox-control/style.scss

@@ -32,7 +32,7 @@ input.components-combobox-control__input[type="text"] {
 	align-items: flex-start;
 	width: 100%;
 	margin: 0 0 $grid-unit-10 0;
-	padding: $grid-unit-05;
+	padding: 0;
 
 	&:focus-within {
 		@include input-style__focus();

package/src/combobox-control/styles.ts

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { Flex } from '../flex';
+import { space } from '../ui/utils/space';
+
+const deprecatedDefaultSize = ( { __next36pxDefaultSize } ) =>
+	! __next36pxDefaultSize &&
+	css`
+		height: 28px; // 30px - 2px vertical borders on parent container
+		padding-left: ${ space( 1 ) };
+		padding-right: ${ space( 1 ) };
+	`;
+
+export const InputWrapperFlex = styled( Flex )`
+	height: 34px; // 36px - 2px vertical borders on parent container
+	padding-left: ${ space( 2 ) };
+	padding-right: ${ space( 2 ) };
+
+	${ deprecatedDefaultSize }
+`;

package/src/confirm-dialog/README.md

@@ -17,7 +17,7 @@ The dialog is confirmed by clicking the _confirm_ button or by pressing the `Ent
 Allows the component to be used standalone, just by declaring it as part of another React's component render method:
 
 -   It will be automatically open (displayed) upon mounting;
--   It will be automatically closed when when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);
+-   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);
 -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.
 
 Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:

package/src/custom-gradient-picker/style.scss

@@ -106,15 +106,3 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		}
 	}
 }
-
-// All these styles should be made generic and changed on the inputs for all components.
-.components-custom-gradient-picker {
-	.components-input-control__label {
-		line-height: 1;
-	}
-	label {
-		text-transform: uppercase;
-		font-size: 11px;
-		font-weight: 500;
-	}
-}

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

@@ -9,12 +9,15 @@ import classnames from 'classnames';
  */
 import { Icon, check, chevronDown } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { Button, VisuallyHidden } from '../';
+import { VisuallyHidden } from '../';
+import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
+import InputBase from '../input-control/input-base';
+import { StyledLabel } from '../base-control/styles/base-control-styles';
 
 const itemToString = ( item ) => item?.name;
 // This is needed so that in Windows, where
@@ -58,12 +61,16 @@ const stateReducer = (
 export default function CustomSelectControl( {
 	/** Start opting into the larger default height that will become the default size in a future version. */
 	__next36pxDefaultSize = false,
+	/** Start opting into the unconstrained width that will become the default in a future version. */
+	__nextUnconstrainedWidth = false,
 	className,
 	hideLabelFromVision,
 	label,
 	describedBy,
 	options: items,
 	onChange: onSelectedItemChange,
+	/** @type {import('../select-control/types').SelectControlProps.size} */
+	size = 'default',
 	value: _selectedItem,
 } ) {
 	const {
@@ -85,6 +92,8 @@ export default function CustomSelectControl( {
 		stateReducer,
 	} );
 
+	const [ isFocused, setIsFocused ] = useState( false );
+
 	function getDescribedBy() {
 		if ( describedBy ) {
 			return describedBy;
@@ -130,39 +139,49 @@ export default function CustomSelectControl( {
 				</VisuallyHidden>
 			) : (
 				/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
-				<label
+				<StyledLabel
 					{ ...getLabelProps( {
 						className: 'components-custom-select-control__label',
 					} ) }
 				>
 					{ label }
-				</label>
+				</StyledLabel>
 			) }
-			<Button
-				{ ...getToggleButtonProps( {
-					// This is needed because some speech recognition software don't support `aria-labelledby`.
-					'aria-label': label,
-					'aria-labelledby': undefined,
-					className: classnames(
-						'components-custom-select-control__button',
-						{ 'is-next-36px-default-size': __next36pxDefaultSize }
-					),
-					isSmall: ! __next36pxDefaultSize,
-					describedBy: getDescribedBy(),
-				} ) }
+			<InputBase
+				isFocused={ isOpen || isFocused }
+				__unstableInputWidth={
+					__nextUnconstrainedWidth ? undefined : 'auto'
+				}
+				labelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }
 			>
-				{ itemToString( selectedItem ) }
-				<Icon
-					icon={ chevronDown }
-					className={ classnames(
-						'components-custom-select-control__button-icon',
-						{
-							'is-next-36px-default-size': __next36pxDefaultSize,
-						}
-					) }
-					size={ 18 }
-				/>
-			</Button>
+				<SelectControlSelect
+					as="button"
+					onFocus={ () => setIsFocused( true ) }
+					onBlur={ () => setIsFocused( false ) }
+					selectSize={ size }
+					__next36pxDefaultSize={ __next36pxDefaultSize }
+					{ ...getToggleButtonProps( {
+						// This is needed because some speech recognition software don't support `aria-labelledby`.
+						'aria-label': label,
+						'aria-labelledby': undefined,
+						className: classnames(
+							'components-custom-select-control__button',
+							{
+								'is-next-unconstrained-width':
+									__nextUnconstrainedWidth,
+							}
+						),
+						describedBy: getDescribedBy(),
+					} ) }
+				>
+					{ itemToString( selectedItem ) }
+					<Icon
+						icon={ chevronDown }
+						className="components-custom-select-control__button-icon"
+						size={ 18 }
+					/>
+				</SelectControlSelect>
+			</InputBase>
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
 				{ isOpen &&

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

@@ -7,8 +7,13 @@ export default {
 	title: 'Components/CustomSelectControl',
 	component: CustomSelectControl,
 	argTypes: {
-		__next36pxDefaultSize: {
-			control: { type: 'boolean' },
+		__next36pxDefaultSize: { control: { type: 'boolean' } },
+		__nextUnconstrainedWidth: { control: { type: 'boolean' } },
+		size: {
+			control: {
+				type: 'radio',
+				options: [ 'small', 'default', '__unstable-large' ],
+			},
 		},
 	},
 };

package/src/custom-select-control/style.scss

@@ -1,52 +1,23 @@
 .components-custom-select-control {
 	position: relative;
-}
-
-.components-custom-select-control__label {
-	display: block;
-	margin-bottom: $grid-unit-10;
+	font-size: $default-font-size;
 }
 
 .components-custom-select-control__button {
-	border: 1px solid $gray-700;
-	border-radius: $radius-block-ui;
-	min-width: 130px;
 	position: relative;
 	text-align: left;
+	outline: 0; // focus ring is handled elsewhere
 
-	&:not(.is-next-36px-default-size) {
-		min-height: 30px;
-	}
-
-	// For all button sizes allow sufficient space for the
-	// dropdown "arrow" icon to display.
-	&.components-custom-select-control__button {
-		// TODO: Some of these can be removed after some internal inconsistencies are addressed, such as the chevron
-		// (https://github.com/WordPress/gutenberg/issues/39400) and Button padding (https://github.com/WordPress/gutenberg/issues/39431)
-		padding-left: $grid-unit-20;
-		padding-right: $icon-size + $grid-unit-10;
-
-		&:not(.is-next-36px-default-size) {
-			padding-left: $grid-unit-10;
-			padding-right: $icon-size;
-		}
-	}
-
-	&:focus:not(:disabled) {
-		border-color: var(--wp-admin-theme-color);
-		box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color);
+	&:not(.is-next-unconstrained-width) {
+		min-width: 130px;
 	}
 
 	.components-custom-select-control__button-icon {
 		height: 100%;
 		padding: 0;
 		position: absolute;
-		right: $grid-unit-10;
+		right: $grid-unit-05;
 		top: 0;
-
-		&:not(.is-next-36px-default-size) {
-			right: $grid-unit-05;
-		}
 	}
 }
 

package/src/date-time/time/index.tsx

@@ -12,6 +12,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import BaseControl from '../../base-control';
 import Button from '../../button';
 import ButtonGroup from '../../button-group';
 import TimeZone from './timezone';
@@ -19,7 +20,6 @@ import type { TimePickerProps } from '../types';
 import {
 	Wrapper,
 	Fieldset,
-	Legend,
 	HoursInput,
 	TimeSeparator,
 	MinutesInput,
@@ -220,11 +220,12 @@ export function TimePicker( {
 			className="components-datetime__time" // Unused, for backwards compatibility.
 		>
 			<Fieldset>
-				<Legend
+				<BaseControl.VisualLabel
+					as="legend"
 					className="components-datetime__time-legend" // Unused, for backwards compatibility.
 				>
 					{ __( 'Time' ) }
-				</Legend>
+				</BaseControl.VisualLabel>
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
@@ -309,11 +310,12 @@ export function TimePicker( {
 				</HStack>
 			</Fieldset>
 			<Fieldset>
-				<Legend
+				<BaseControl.VisualLabel
+					as="legend"
 					className="components-datetime__time-legend" // Unused, for backwards compatibility.
 				>
 					{ __( 'Date' ) }
-				</Legend>
+				</BaseControl.VisualLabel>
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>

package/src/date-time/time/styles.ts

@@ -17,7 +17,9 @@ import NumberControl from '../../number-control';
 import SelectControl from '../../select-control';
 import { Select } from '../../select-control/styles/select-control-styles';
 
-export const Wrapper = styled.div``;
+export const Wrapper = styled.div`
+	font-size: ${ CONFIG.fontSize };
+`;
 
 export const Fieldset = styled.fieldset`
 	border: 0;
@@ -29,11 +31,6 @@ export const Fieldset = styled.fieldset`
 	}
 `;
 
-export const Legend = styled.legend`
-	margin-bottom: ${ space( 2 ) };
-	padding: 0;
-`;
-
 export const TimeWrapper = styled.div`
 	direction: ltr;
 	display: flex;