@wordpress/components 29.12.0 → 30.0.0

package/src/custom-gradient-picker/gradient-bar/control-points.tsx

@@ -58,7 +58,7 @@ function ControlPointButton( {
 				aria-label={ sprintf(
 					// translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).
 					__(
-						'Gradient control point at position %1$s%% with color code %2$s.'
+						'Gradient control point at position %1$d%% with color code %2$s.'
 					),
 					position,
 					color

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

@@ -7,7 +7,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { createContext, useCallback, useMemo } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -43,8 +43,11 @@ function defaultRenderSelectedValue(
 	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 );
+			: sprintf(
+					// translators: %d: number of items selected (it will always be 2 or more items)
+					_n( '%d item selected', '%d items selected', value.length ),
+					value.length
+			  );
 	}
 
 	return value;

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

@@ -344,7 +344,7 @@ function getDayLabel( date: Date, isSelected: boolean, numEvents: number ) {
 		);
 	} else if ( isSelected ) {
 		return sprintf(
-			// translators: %s: The calendar date.
+			// translators: 1: The calendar date.
 			__( '%1$s. Selected' ),
 			localizedDate
 		);

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -193,13 +193,13 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 
 <div>
   <div
-    class="components-base-control emotion-0 emotion-1"
+    class="components-base-control components-select-control block-editor-dimension-control emotion-0 emotion-1"
   >
     <div
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
+        class="components-flex components-input-base emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
@@ -475,13 +475,13 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 
 <div>
   <div
-    class="components-base-control emotion-0 emotion-1"
+    class="components-base-control components-select-control block-editor-dimension-control emotion-0 emotion-1"
   >
     <div
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
+        class="components-flex components-input-base emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
@@ -767,13 +767,13 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 
 <div>
   <div
-    class="components-base-control emotion-0 emotion-1"
+    class="components-base-control components-select-control block-editor-dimension-control emotion-0 emotion-1"
   >
     <div
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
+        class="components-flex components-input-base emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
@@ -1071,13 +1071,13 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 
 <div>
   <div
-    class="components-base-control emotion-0 emotion-1"
+    class="components-base-control components-select-control block-editor-dimension-control emotion-0 emotion-1"
   >
     <div
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
+        class="components-flex components-input-base emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >

package/src/form-token-field/index.tsx

@@ -241,6 +241,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			case 'Escape':
 				preventDefault = handleEscapeKey( event );
 				break;
+			case 'Tab':
+				preventDefault = handleTabKey( event );
+				break;
 			default:
 				break;
 		}
@@ -372,17 +375,25 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		return true; // PreventDefault.
 	}
 
-	function handleEscapeKey( event: KeyboardEvent ) {
+	function collapseSuggestionsList( event: KeyboardEvent ) {
 		if ( event.target instanceof HTMLInputElement ) {
 			setIncompleteTokenValue( event.target.value );
 			setIsExpanded( false );
 			setSelectedSuggestionIndex( -1 );
 			setSelectedSuggestionScroll( false );
 		}
+	}
 
+	function handleEscapeKey( event: KeyboardEvent ) {
+		collapseSuggestionsList( event );
 		return true; // PreventDefault.
 	}
 
+	function handleTabKey( event: KeyboardEvent ) {
+		collapseSuggestionsList( event );
+		return false; // Do not prevent the default behavior.
+	}
+
 	function handleCommaKey() {
 		if ( inputHasValidValue() ) {
 			addNewToken( incompleteTokenValue );

package/src/form-token-field/token.tsx

@@ -47,7 +47,7 @@ export default function Token( {
 	const transformedValue = displayTransform( value );
 	const termPositionAndCount = sprintf(
 		/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */
-		__( '%1$s (%2$s of %3$s)' ),
+		__( '%1$s (%2$d of %3$d)' ),
 		transformedValue,
 		termPosition,
 		termsCount

package/src/icon/index.tsx

@@ -107,6 +107,8 @@ function Icon( {
 		return cloneElement( icon, {
 			// @ts-ignore Just forwarding the size prop along
 			size,
+			width: size,
+			height: size,
 			...additionalProps,
 		} );
 	}

package/src/mobile/bottom-sheet/cell.native.js

@@ -304,13 +304,13 @@ class BottomSheetCell extends Component {
 			}
 			return ! help
 				? sprintf(
-						/* translators: accessibility text. Inline textinput title and value.%1: Cell title, %2: cell value. */
+						/* translators: accessibility text. Inline textinput title and value. %1: Cell title, %2: cell value. */
 						_x( '%1$s, %2$s', 'inline textinput cell' ),
 						label,
 						value
 				  ) // Separating by ',' is necessary to make a pause on urls (non-capitalized text)
 				: sprintf(
-						/* translators: accessibility text. Inline textinput title, value and help text.%1: Cell title, %2: cell value, , %3: cell help. */
+						/* translators: accessibility text. Inline textinput title, value and help text. %1: Cell title, %2: cell value, , %3: cell help. */
 						_x( '%1$s, %2$s, %3$s', 'inline textinput cell' ),
 						label,
 						value,

package/src/mobile/link-picker/index.native.js

@@ -135,7 +135,7 @@ export const LinkPicker = ( {
 					<BottomSheet.LinkSuggestionItemCell
 						accessible
 						accessibilityLabel={ sprintf(
-							/* translators: Copy URL from the clipboard, https://sample.url */
+							/* translators: %s: Copy URL from the clipboard, https://sample.url */
 							__( 'Copy URL from the clipboard, %s' ),
 							clipboardUrl
 						) }

package/src/navigation/menu/menu-title-search.tsx

@@ -77,7 +77,7 @@ function MenuTitleSearch( {
 	const placeholder = sprintf(
 		/* translators: placeholder for menu search box. %s: menu title */
 		__( 'Search %s' ),
-		title?.toLowerCase()
+		title?.toLowerCase() || ''
 	).trim();
 
 	return (

package/src/palette-edit/index.tsx

@@ -122,8 +122,8 @@ export function getNameAndSlugForPosition(
 
 	return {
 		name: sprintf(
-			/* translators: %s: is an id for a custom color */
-			__( 'Color %s' ),
+			/* translators: %d: is an id for a custom color */
+			__( 'Color %d' ),
 			position
 		),
 		slug: `${ slugPrefix }color-${ position }`,
@@ -223,7 +223,7 @@ function Option< T extends PaletteElement >( {
 					aria-label={ sprintf(
 						// translators: %s is a color or gradient name, e.g. "Red".
 						__( 'Edit: %s' ),
-						element.name.trim().length ? element.name : value
+						element.name.trim().length ? element.name : value || ''
 					) }
 					style={ { padding: 0 } }
 				>
@@ -267,7 +267,7 @@ function Option< T extends PaletteElement >( {
 								__( 'Remove color: %s' ),
 								element.name.trim().length
 									? element.name
-									: value
+									: value || ''
 							) }
 							onClick={ onRemove }
 						/>

package/src/private-apis.ts

@@ -11,6 +11,8 @@ import { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';
 import { lock } from './lock-unlock';
 import Badge from './badge';
 
+import { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
+
 export const privateApis = {};
 lock( privateApis, {
 	__experimentalPopoverLegacyPositionToPlacement,
@@ -22,4 +24,7 @@ lock( privateApis, {
 	withIgnoreIMEEvents,
 	Badge,
 	normalizeTextString,
+	DateCalendar,
+	DateRangeCalendar,
+	TZDate,
 } );

package/src/select-control/index.tsx

@@ -107,11 +107,11 @@ function UnforwardedSelectControl< V extends string >(
 		<BaseControl
 			help={ help }
 			id={ id }
+			className={ classes }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			__associatedWPComponentName="SelectControl"
 		>
 			<StyledInputBase
-				className={ classes }
 				disabled={ disabled }
 				hideLabelFromVision={ hideLabelFromVision }
 				id={ id }

package/src/select-control/style.scss

@@ -2,9 +2,3 @@
 	outline: 0;
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
 }
-
-@media (max-width: #{ ($break-medium) }) {
-	.components-base-control .components-base-control__field .components-select-control__input {
-		font-size: 16px;
-	}
-}

package/src/style.scss

@@ -1,7 +1,7 @@
 // Include the default WP Components color variables.
 // TODO: Remove this once all admin-scheme variables are accounted for in the wp-components fallback values.
 :root {
-	@include admin-scheme(#3858e9);
+	@include admin-scheme( #3858e9 );
 }
 
 // Variables
@@ -13,6 +13,7 @@
 @import "./badge/styles.scss";
 @import "./button-group/style.scss";
 @import "./button/style.scss";
+@import "./calendar/style.scss";
 @import "./checkbox-control/style.scss";
 @import "./circular-option-picker/style.scss";
 @import "./palette-edit/style.scss";
@@ -20,7 +21,6 @@
 @import "./combobox-control/style.scss";
 @import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
-@import "./dimension-control/style.scss";
 @import "./draggable/style.scss";
 @import "./drop-zone/style.scss";
 @import "./dropdown/style.scss";
@@ -55,3 +55,4 @@
 @import "./toolbar/toolbar-button/style.scss";
 @import "./toolbar/toolbar-group/style.scss";
 @import "./tooltip/style.scss";
+@import "./validated-form-controls/style.scss";

package/src/toggle-group-control/toggle-group-control/as-button-group.tsx

@@ -48,7 +48,9 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 	const { value, defaultValue } =
 		useComputeControlledOrUncontrolledValue( valueProp );
 
-	const [ selectedValue, setSelectedValue ] = useControlledValue( {
+	const [ selectedValue, setSelectedValue ] = useControlledValue<
+		typeof value
+	>( {
 		defaultValue,
 		value,
 		onChange,

package/src/utils/hooks/use-controlled-value.ts

@@ -1,12 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 type Props< T > = {
 	defaultValue?: T;
 	value?: T;
-	onChange?: ( value: T ) => void;
+	onChange?: ( value: T, ...args: any[] ) => void;
 };
 
 /**
@@ -28,17 +28,25 @@ export function useControlledValue< T >( {
 	const [ state, setState ] = useState( initialValue );
 	const value = hasValue ? valueProp : state;
 
-	let setValue: ( nextValue: T ) => void;
+	const uncontrolledSetValue = useCallback(
+		( nextValue: T, ...args: any[] ) => {
+			setState( nextValue );
+			onChange?.( nextValue, ...args );
+		},
+		[ onChange ]
+	);
+
+	let setValue: typeof onChange;
 	if ( hasValue && typeof onChange === 'function' ) {
+		// Controlled mode.
 		setValue = onChange;
 	} else if ( ! hasValue && typeof onChange === 'function' ) {
-		setValue = ( nextValue ) => {
-			onChange( nextValue );
-			setState( nextValue );
-		};
+		// Uncontrolled mode, plus forwarding to the onChange prop.
+		setValue = uncontrolledSetValue;
 	} else {
+		// Uncontrolled mode, only update internal state.
 		setValue = setState;
 	}
 
-	return [ value, setValue as typeof setState ] as const;
+	return [ value, setValue ] as const;
 }

package/src/validated-form-controls/components/checkbox-control.tsx

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import CheckboxControl from '../../checkbox-control';
+import type { CheckboxControlProps } from '../../checkbox-control/types';
+
+type Value = CheckboxControlProps[ 'checked' ];
+
+const UnforwardedValidatedCheckboxControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof CheckboxControl >,
+		'__nextHasNoMarginBottom'
+	> &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLInputElement >
+) => {
+	const validityTargetRef = useRef< HTMLDivElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.checked );
+
+	return (
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			ref={ mergedRefs }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () =>
+				validityTargetRef.current?.querySelector< HTMLInputElement >(
+					'input[type="checkbox"]'
+				)
+			}
+		>
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				onChange={ ( value ) => {
+					valueRef.current = value;
+					onChange?.( value );
+				} }
+				// TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedCheckboxControl = forwardRef(
+	UnforwardedValidatedCheckboxControl
+);

package/src/validated-form-controls/components/combobox-control.tsx

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef, useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import ComboboxControl from '../../combobox-control';
+import type { ComboboxControlProps } from '../../combobox-control/types';
+
+type Value = ComboboxControlProps[ 'value' ];
+
+const UnforwardedValidatedComboboxControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof ComboboxControl >,
+		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+	> &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLInputElement >
+) => {
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.value );
+
+	// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
+	// so we need to set it manually.
+	useEffect( () => {
+		const input =
+			validityTargetRef.current?.querySelector< HTMLInputElement >(
+				'input[role="combobox"]'
+			);
+		if ( input ) {
+			input.required = required ?? false;
+		}
+	}, [ required ] );
+
+	return (
+		// TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			ref={ mergedRefs }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () =>
+				validityTargetRef.current?.querySelector< HTMLInputElement >(
+					'input[role="combobox"]'
+				)
+			}
+		>
+			<ComboboxControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				{ ...restProps }
+				onChange={ ( value ) => {
+					valueRef.current = value;
+					onChange?.( value );
+				} }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedComboboxControl = forwardRef(
+	UnforwardedValidatedComboboxControl
+);

package/src/validated-form-controls/components/custom-select-control.tsx

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import CustomSelectControl from '../../custom-select-control';
+import type {
+	CustomSelectOption,
+	CustomSelectProps,
+} from '../../custom-select-control/types';
+
+type CustomSelectControlProps = CustomSelectProps< CustomSelectOption >;
+
+type Value = CustomSelectControlProps[ 'value' ];
+
+const UnforwardedValidatedCustomSelectControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof CustomSelectControl >,
+		'__next40pxDefaultSize'
+	> &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
+) => {
+	const validityTargetRef = useRef< HTMLSelectElement >( null );
+	const valueRef = useRef< Value >( restProps.value );
+
+	return (
+		<div
+			className="components-validated-control__wrapper-with-error-delegate"
+			ref={ forwardedRef }
+		>
+			<ControlWithError
+				required={ required }
+				markWhenOptional={ markWhenOptional }
+				customValidator={ () => {
+					return customValidator?.( valueRef.current );
+				} }
+				getValidityTarget={ () => validityTargetRef.current }
+			>
+				<CustomSelectControl
+					// TODO: Upstream limitation - Required isn't passed down correctly,
+					// so it needs to be set on a delegate element.
+					__next40pxDefaultSize
+					onChange={ ( value ) => {
+						valueRef.current = value.selectedItem;
+						onChange?.( value );
+					} }
+					{ ...restProps }
+				/>
+			</ControlWithError>
+			<select
+				className="components-validated-control__error-delegate"
+				ref={ validityTargetRef }
+				required={ required }
+				tabIndex={ -1 }
+				value={ restProps.value?.key ? 'hasvalue' : '' }
+				onChange={ () => {} }
+				onFocus={ ( e ) => {
+					e.target.previousElementSibling
+						?.querySelector< HTMLButtonElement >(
+							'[role="combobox"]'
+						)
+						?.focus();
+				} }
+			>
+				<option value="">No selection</option>
+				<option value="hasvalue">Has selection</option>
+			</select>
+		</div>
+	);
+};
+
+export const ValidatedCustomSelectControl = forwardRef(
+	UnforwardedValidatedCustomSelectControl
+);

package/src/validated-form-controls/components/index.ts

@@ -0,0 +1,12 @@
+export * from './checkbox-control';
+export * from './combobox-control';
+export * from './custom-select-control';
+export * from './input-control';
+export * from './number-control';
+export * from './radio-control';
+export * from './range-control';
+export * from './select-control';
+export * from './text-control';
+export * from './textarea-control';
+export * from './toggle-control';
+export * from './toggle-group-control';

package/src/validated-form-controls/components/input-control.tsx

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import InputControl from '../../input-control';
+import type { InputControlProps } from '../../input-control/types';
+
+type Value = InputControlProps[ 'value' ];
+
+const UnforwardedValidatedInputControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof InputControl >,
+		'__next40pxDefaultSize'
+	> &
+		ValidatedControlProps< InputControlProps[ 'value' ] >,
+	forwardedRef: React.ForwardedRef< HTMLInputElement >
+) => {
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.value );
+
+	return (
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () => validityTargetRef.current }
+		>
+			<InputControl
+				__next40pxDefaultSize
+				ref={ mergedRefs }
+				onChange={ ( value, ...args ) => {
+					valueRef.current = value;
+					onChange?.( value, ...args );
+				} }
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedInputControl = forwardRef(
+	UnforwardedValidatedInputControl
+);