@wordpress/components 30.3.2-next.836ecdcae.0 → 30.3.2-next.a730c9c8c.0

package/src/validated-form-controls/components/form-token-field.tsx

@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import { FormTokenField } from '../../form-token-field';
+import type { FormTokenFieldProps } from '../../form-token-field/types';
+
+type Value = FormTokenFieldProps[ 'value' ];
+
+const UnforwardedValidatedFormTokenField = (
+	{
+		required,
+		onValidate,
+		customValidity,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof FormTokenField >,
+		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+	> &
+		ValidatedControlProps< FormTokenFieldProps[ 'value' ] >,
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
+) => {
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+	const valueRef = useRef< Value >( restProps.value );
+
+	return (
+		<div
+			className="components-validated-control__wrapper-with-error-delegate"
+			ref={ forwardedRef }
+		>
+			<ControlWithError
+				required={ required }
+				markWhenOptional={ markWhenOptional }
+				onValidate={ () => {
+					return onValidate?.( valueRef.current );
+				} }
+				customValidity={ customValidity }
+				getValidityTarget={ () => validityTargetRef.current }
+			>
+				<FormTokenField
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					{ ...restProps }
+					onChange={ ( value, ...args ) => {
+						valueRef.current = value;
+						onChange?.( value, ...args );
+					} }
+				/>
+			</ControlWithError>
+			<input
+				className="components-validated-control__error-delegate"
+				type="text"
+				ref={ validityTargetRef }
+				required={ required }
+				value={
+					valueRef.current && valueRef.current.length > 0
+						? 'hasvalue'
+						: ''
+				}
+				tabIndex={ -1 }
+				onChange={ () => {} }
+				onFocus={ ( e ) => {
+					e.target.previousElementSibling
+						?.querySelector< HTMLInputElement >(
+							'input[type="text"]'
+						)
+						?.focus();
+				} }
+			/>
+		</div>
+	);
+};
+
+export const ValidatedFormTokenField = forwardRef(
+	UnforwardedValidatedFormTokenField
+);

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

@@ -1,6 +1,7 @@
 export * from './checkbox-control';
 export * from './combobox-control';
 export * from './custom-select-control';
+export * from './form-token-field';
 export * from './input-control';
 export * from './number-control';
 export * from './radio-control';

package/src/validated-form-controls/components/stories/form-token-field.story.tsx

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ValidatedFormTokenField } from '../form-token-field';
+import { formDecorator } from './story-utils';
+import type { TokenItem } from '../../../form-token-field/types';
+
+const meta: Meta< typeof ValidatedFormTokenField > = {
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedFormTokenField',
+	id: 'components-validatedformtokenfield',
+	component: ValidatedFormTokenField,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: {
+		onChange: { control: false },
+		value: { control: false },
+		customValidity: { control: false },
+	},
+};
+export default meta;
+
+/**
+ * This demonstrates how array validation would work with the ValidatedFormTokenField component.
+ */
+export const Default: StoryObj< typeof ValidatedFormTokenField > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState< ( string | TokenItem )[] >( [] );
+		const [ customValidity, setCustomValidity ] =
+			useState<
+				React.ComponentProps<
+					typeof ValidatedFormTokenField
+				>[ 'customValidity' ]
+			>( undefined );
+
+		return (
+			<ValidatedFormTokenField
+				{ ...args }
+				value={ value }
+				onChange={ ( newValue, ...rest ) => {
+					setValue( newValue );
+					onChange?.( newValue, ...rest );
+				} }
+				onValidate={ ( v ) => {
+					if (
+						v?.some( ( token ) => {
+							const tokenValue =
+								typeof token === 'string' ? token : token.value;
+							return tokenValue.toLowerCase() === 'error';
+						} )
+					) {
+						setCustomValidity( {
+							type: 'invalid',
+							message: 'The tag "error" is not allowed.',
+						} );
+						return;
+					}
+
+					setCustomValidity( undefined );
+				} }
+				customValidity={ customValidity }
+			/>
+		);
+	},
+};
+
+Default.args = {
+	required: true,
+	label: 'Tags',
+	placeholder: 'Add tags...',
+	suggestions: [ 'Posts', 'Pages', 'Media', 'Error' ],
+	__experimentalExpandOnFocus: true,
+};

package/src/validated-form-controls/components/toggle-group-control.tsx

@@ -48,8 +48,6 @@ const UnforwardedValidatedToggleGroupControl = (
 					__nextHasNoMarginBottom
 					__next40pxDefaultSize
 					ref={ forwardedRef }
-					// TODO: Upstream limitation - In uncontrolled mode, starting from an undefined value then
-					// setting a value has a visual bug.
 					onChange={ ( value ) => {
 						valueRef.current = value;
 						onChange?.( value );
@@ -62,7 +60,7 @@ const UnforwardedValidatedToggleGroupControl = (
 				type="radio"
 				ref={ validityTargetRef }
 				required={ required }
-				checked={ restProps.value !== null }
+				checked={ restProps.value !== undefined }
 				tabIndex={ -1 }
 				// A name attribute is needed for the `required` behavior to work.
 				name={ nameAttr }

package/src/validated-form-controls/style.scss

@@ -34,6 +34,12 @@
 	&:has(input[type="radio"]:invalid) {
 		--wp-components-color-accent: #{$alert-red};
 	}
+
+	// For FormTokenField
+	&:has(input:user-invalid) .components-form-token-field__input-container:not(:has([aria-expanded="true"])) {
+		--wp-components-color-accent: #{$alert-red};
+		border-color: $alert-red;
+	}
 }
 
 .components-validated-control__error-delegate {