@wordpress/components 29.13.1-next.719a03cbe.0 → 30.1.0

package/src/text-control/style.scss

@@ -18,7 +18,12 @@
 	margin: 0;
 	background: $components-color-background;
 	color: $components-color-foreground;
-	@include input-control( $components-color-accent);
+	@include input-control( $components-color-accent );
+	border-color: $components-color-border;
+
+	&::placeholder {
+		color: $components-color-dark-gray-placeholder;
+	}
 
 	&.is-next-40px-default-size {
 		height: $grid-unit-50;

package/src/textarea-control/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -32,6 +37,8 @@ function UnforwardedTextareaControl(
 	const onChangeValue = ( event: React.ChangeEvent< HTMLTextAreaElement > ) =>
 		onChange( event.target.value );
 
+	const classes = clsx( 'components-textarea-control', className );
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
@@ -40,7 +47,7 @@ function UnforwardedTextareaControl(
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }
 			help={ help }
-			className={ className }
+			className={ classes }
 		>
 			<StyledTextarea
 				className="components-textarea-control__input"

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/utils/theme-variables.scss

@@ -24,5 +24,8 @@ $components-color-gray-600: var(--wp-components-color-gray-600, $gray-600);
 $components-color-gray-700: var(--wp-components-color-gray-700, $gray-700);
 $components-color-gray-800: var(--wp-components-color-gray-800, $gray-800);
 
+$components-color-dark-gray-placeholder: color-mix(in srgb, $components-color-foreground, transparent 38%);
+$components-color-light-gray-placeholder: color-mix(in srgb, $components-color-background, transparent 35%);
+
 // Semantic aliases (prefer these over raw gray values when applicable).
 $components-color-border: #{ $components-color-gray-600 };

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
+);

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

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import NumberControl from '../../number-control';
+import type { ValidatedControlProps } from './types';
+import type { NumberControlProps } from '../../number-control/types';
+
+type Value = NumberControlProps[ 'value' ];
+
+const UnforwardedValidatedNumberControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof NumberControl >,
+		'__next40pxDefaultSize'
+	> &
+		ValidatedControlProps< 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 }
+		>
+			<NumberControl
+				__next40pxDefaultSize
+				ref={ mergedRefs }
+				// TODO: Upstream limitation - When form is submitted when value is undefined, it will
+				// automatically set a clamped value (as defined by `min` attribute, so 0 by default).
+				onChange={ ( value, ...args ) => {
+					valueRef.current = value;
+					onChange?.( value, ...args );
+				} }
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedNumberControl = forwardRef(
+	UnforwardedValidatedNumberControl
+);

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

@@ -0,0 +1,60 @@
+/**
+ * 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 RadioControl from '../../radio-control';
+import type { RadioControlProps } from '../../radio-control/types';
+
+type Value = RadioControlProps[ 'selected' ];
+
+const UnforwardedValidatedRadioControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: React.ComponentProps< typeof RadioControl > &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
+) => {
+	const validityTargetRef = useRef< HTMLDivElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.selected );
+
+	return (
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			// TODO: Upstream limitation - RadioControl does not accept a ref.
+			ref={ mergedRefs }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () =>
+				validityTargetRef.current?.querySelector< HTMLInputElement >(
+					'input[type="radio"]'
+				)
+			}
+		>
+			<RadioControl
+				onChange={ ( value ) => {
+					valueRef.current = value;
+					onChange?.( value );
+				} }
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedRadioControl = forwardRef(
+	UnforwardedValidatedRadioControl
+);

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

@@ -0,0 +1,60 @@
+/**
+ * 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 RangeControl from '../../range-control';
+import type { RangeControlProps } from '../../range-control/types';
+
+type Value = RangeControlProps[ 'value' ];
+
+const UnforwardedValidatedRangeControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof RangeControl >,
+		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+	> &
+		ValidatedControlProps< 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 }
+		>
+			<RangeControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				ref={ mergedRefs }
+				onChange={ ( value ) => {
+					valueRef.current = value;
+					onChange?.( value );
+				} }
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedRangeControl = forwardRef(
+	UnforwardedValidatedRangeControl
+);

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

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import SelectControl from '../../select-control';
+import type { ValidatedControlProps } from './types';
+import type { SelectControlProps as _SelectControlProps } from '../../select-control/types';
+
+// Only support single value selection
+type SelectControlProps = Omit<
+	_SelectControlProps,
+	'multiple' | 'onChange' | 'value'
+> & {
+	onChange?: ( value: string ) => void;
+	value?: string;
+};
+
+type Value = SelectControlProps[ 'value' ];
+
+const UnforwardedValidatedSelectControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof SelectControl >,
+		| '__next40pxDefaultSize'
+		| '__nextHasNoMarginBottom'
+		| 'multiple'
+		| 'onChange'
+		| 'value'
+	> & {
+		value?: string;
+		onChange: ( value: string ) => void;
+	} & ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLSelectElement >
+) => {
+	const validityTargetRef = useRef< HTMLSelectElement >( 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 }
+		>
+			<SelectControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				ref={ mergedRefs }
+				onChange={ ( value ) => {
+					valueRef.current = value;
+					onChange?.( value );
+				} }
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedSelectControl = forwardRef(
+	UnforwardedValidatedSelectControl
+);