@wordpress/components 30.3.0 → 30.3.2-next.6f42e1382.0

package/build-types/validated-form-controls/control-with-error.d.ts

@@ -28,6 +28,11 @@ export declare const ControlWithError: import("react").ForwardRefExoticComponent
     getValidityTarget: () => ValidityTarget | null | undefined;
     /**
      * The control component to apply validation to.
+     *
+     * As `children` will be cloned with additional props,
+     * the component at the root of `children` should accept
+     * `label`, `onChange`, and `required` props, and process them
+     * appropriately.
      */
     children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/build-types/validated-form-controls/control-with-error.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-with-error.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/control-with-error.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAyBhE;;;;;;;GAOG;AACH,KAAK,cAAc,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AAoMvB,eAAO,MAAM,gBAAgB;IAzL3B;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,OAAO;IAC1B;;OAEG;iBACU,MAAM,IAAI;qBACN,qBAAqB,CAAE,OAAO,CAAE,CAAE,gBAAgB,CAAE;IACrE;;OAEG;uBACgB,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS;IAC1D;;OAEG;;kDAsKoE,CAAC"}
+{"version":3,"file":"control-with-error.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/control-with-error.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAyBhE;;;;;;;GAOG;AACH,KAAK,cAAc,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AAyMvB,eAAO,MAAM,gBAAgB;IA9L3B;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,OAAO;IAC1B;;OAEG;iBACU,MAAM,IAAI;qBACN,qBAAqB,CAAE,OAAO,CAAE,CAAE,gBAAgB,CAAE;IACrE;;OAEG;uBACgB,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS;IAC1D;;;;;;;OAOG;;kDAsKoE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "30.3.0",
+	"version": "30.3.2-next.6f42e1382.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,23 +44,23 @@
 		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.30.0",
-		"@wordpress/compose": "^7.30.0",
-		"@wordpress/date": "^5.30.0",
-		"@wordpress/deprecated": "^4.30.0",
-		"@wordpress/dom": "^4.30.0",
-		"@wordpress/element": "^6.30.0",
-		"@wordpress/escape-html": "^3.30.0",
-		"@wordpress/hooks": "^4.30.0",
-		"@wordpress/html-entities": "^4.30.0",
-		"@wordpress/i18n": "^6.3.0",
-		"@wordpress/icons": "^10.30.0",
-		"@wordpress/is-shallow-equal": "^5.30.0",
-		"@wordpress/keycodes": "^4.30.0",
-		"@wordpress/primitives": "^4.30.0",
-		"@wordpress/private-apis": "^1.30.0",
-		"@wordpress/rich-text": "^7.30.0",
-		"@wordpress/warning": "^3.30.0",
+		"@wordpress/a11y": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/compose": "^7.30.1-next.6f42e1382.0",
+		"@wordpress/date": "^5.30.1-next.6f42e1382.0",
+		"@wordpress/deprecated": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/dom": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/element": "^6.30.1-next.6f42e1382.0",
+		"@wordpress/escape-html": "^3.30.1-next.6f42e1382.0",
+		"@wordpress/hooks": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/html-entities": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/i18n": "^6.3.1-next.6f42e1382.0",
+		"@wordpress/icons": "^10.30.1-next.6f42e1382.0",
+		"@wordpress/is-shallow-equal": "^5.30.1-next.6f42e1382.0",
+		"@wordpress/keycodes": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/primitives": "^4.30.1-next.6f42e1382.0",
+		"@wordpress/private-apis": "^1.30.1-next.6f42e1382.0",
+		"@wordpress/rich-text": "^7.30.1-next.6f42e1382.0",
+		"@wordpress/warning": "^3.30.1-next.6f42e1382.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c66cb089eed19d4f4956962fa7b4c81abe6dd513"
+	"gitHead": "8806899f598577a3c90a55d9aa79fbc372fe1e75"
 }

package/src/modal/style.scss

@@ -31,11 +31,19 @@
 	overflow: hidden;
 	// Have the content element fill the vertical space yet not overflow.
 	display: flex;
+	color: $gray-900;
 	// Animate the modal frame/contents appearing on the page.
 	animation-name: components-modal__appear-animation;
 	animation-fill-mode: forwards;
 	animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
 
+	// Ensure all headings use the proper editor text color, overriding wp-admin common.css
+	h1,
+	h2,
+	h3 {
+		color: $gray-900;
+	}
+
 	@media not (prefers-reduced-motion) {
 		animation-duration: var(--modal-frame-animation-duration);
 	}

package/src/private-apis.ts

@@ -13,10 +13,14 @@ import Badge from './badge';
 
 import { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
 import {
+	ValidatedCheckboxControl,
+	ValidatedInputControl,
 	ValidatedNumberControl,
 	ValidatedTextControl,
+	ValidatedTextareaControl,
 	ValidatedToggleControl,
 } from './validated-form-controls';
+import { Picker } from './color-picker/picker';
 
 export const privateApis = {};
 lock( privateApis, {
@@ -32,7 +36,11 @@ lock( privateApis, {
 	DateCalendar,
 	DateRangeCalendar,
 	TZDate,
+	Picker,
+	ValidatedInputControl,
+	ValidatedCheckboxControl,
 	ValidatedNumberControl,
 	ValidatedTextControl,
+	ValidatedTextareaControl,
 	ValidatedToggleControl,
 } );

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/control-with-error.tsx

@@ -81,6 +81,11 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 		getValidityTarget: () => ValidityTarget | null | undefined;
 		/**
 		 * The control component to apply validation to.
+		 *
+		 * As `children` will be cloned with additional props,
+		 * the component at the root of `children` should accept
+		 * `label`, `onChange`, and `required` props, and process them
+		 * appropriately.
 		 */
 		children: C;
 	},

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

@@ -2,14 +2,14 @@
 	// For components based on InputBase
 	&:has(:is(input, select):user-invalid)
 	.components-input-control__backdrop {
-		--wp-components-color-accent: $alert-red;
+		--wp-components-color-accent: #{$alert-red};
 		border-color: $alert-red;
 	}
 
 	// For TextControl, TextareaControl
 	:is(textarea, input[type="text"]):user-invalid {
-		--wp-admin-theme-color: $alert-red;
-		--wp-components-color-accent: $alert-red;
+		--wp-admin-theme-color: #{$alert-red};
+		--wp-components-color-accent: #{$alert-red};
 		border-color: $alert-red;
 	}
 
@@ -26,13 +26,19 @@
 
 	// For CustomSelectControl
 	&:has(select:user-invalid) .components-input-control__backdrop {
-		--wp-components-color-accent: $alert-red;
+		--wp-components-color-accent: #{$alert-red};
 		border-color: $alert-red;
 	}
 
 	// For ToggleGroupControl
 	&:has(input[type="radio"]:invalid) {
-		--wp-components-color-accent: $alert-red;
+		--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;
 	}
 }