@wordpress/components 30.9.1-next.8b30e05b0.0 → 31.0.1-next.6deb34194.0

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

@@ -33,12 +33,6 @@ export const Default: StoryObj< typeof ValidatedRangeControl > = {
 			useState<
 				React.ComponentProps< typeof ValidatedRangeControl >[ 'value' ]
 			>();
-		const [ customValidity, setCustomValidity ] =
-			useState<
-				React.ComponentProps<
-					typeof ValidatedRangeControl
-				>[ 'customValidity' ]
-			>( undefined );
 
 		return (
 			<ValidatedRangeControl
@@ -48,17 +42,14 @@ export const Default: StoryObj< typeof ValidatedRangeControl > = {
 					setValue( newValue );
 					onChange?.( newValue );
 				} }
-				onValidate={ ( v ) => {
-					if ( v && v % 2 !== 0 ) {
-						setCustomValidity( {
-							type: 'invalid',
-							message: 'Choose an even number.',
-						} );
-					} else {
-						setCustomValidity( undefined );
-					}
-				} }
-				customValidity={ customValidity }
+				customValidity={
+					value && value % 2 !== 0
+						? {
+								type: 'invalid',
+								message: 'Choose an even number.',
+						  }
+						: undefined
+				}
 			/>
 		);
 	},

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

@@ -29,13 +29,7 @@ export default meta;
 
 export const Default: StoryObj< typeof ValidatedSelectControl > = {
 	render: function Template( { onChange, ...args } ) {
-		const [ value, setValue ] = useState( '' );
-		const [ customValidity, setCustomValidity ] =
-			useState<
-				React.ComponentProps<
-					typeof ValidatedSelectControl
-				>[ 'customValidity' ]
-			>( undefined );
+		const [ value, setValue ] = useState< string | undefined >( '' );
 
 		return (
 			<ValidatedSelectControl
@@ -45,17 +39,14 @@ export const Default: StoryObj< typeof ValidatedSelectControl > = {
 					setValue( newValue );
 					onChange?.( newValue );
 				} }
-				onValidate={ ( v ) => {
-					if ( v === '1' ) {
-						setCustomValidity( {
-							type: 'invalid',
-							message: 'Option 1 is not allowed.',
-						} );
-					} else {
-						setCustomValidity( undefined );
-					}
-				} }
-				customValidity={ customValidity }
+				customValidity={
+					value === '1'
+						? {
+								type: 'invalid',
+								message: 'Option 1 is not allowed.',
+						  }
+						: undefined
+				}
 			/>
 		);
 	},

package/src/validated-form-controls/components/stories/text-control.story.tsx

@@ -29,13 +29,10 @@ export default meta;
 
 export const Default: StoryObj< typeof ValidatedTextControl > = {
 	render: function Template( { onChange, ...args } ) {
-		const [ value, setValue ] = useState( '' );
-		const [ customValidity, setCustomValidity ] =
+		const [ value, setValue ] =
 			useState<
-				React.ComponentProps<
-					typeof ValidatedTextControl
-				>[ 'customValidity' ]
-			>( undefined );
+				React.ComponentProps< typeof ValidatedTextControl >[ 'value' ]
+			>( '' );
 
 		return (
 			<ValidatedTextControl
@@ -45,17 +42,14 @@ export const Default: StoryObj< typeof ValidatedTextControl > = {
 					setValue( newValue );
 					onChange?.( newValue );
 				} }
-				onValidate={ ( v ) => {
-					if ( v?.toString().toLowerCase() === 'error' ) {
-						setCustomValidity( {
-							type: 'invalid',
-							message: 'The word "error" is not allowed.',
-						} );
-					} else {
-						setCustomValidity( undefined );
-					}
-				} }
-				customValidity={ customValidity }
+				customValidity={
+					value === 'error'
+						? {
+								type: 'invalid',
+								message: 'The word "error" is not allowed.',
+						  }
+						: undefined
+				}
 			/>
 		);
 	},

package/src/validated-form-controls/components/stories/textarea-control.story.tsx

@@ -26,33 +26,29 @@ export default meta;
 
 export const Default: StoryObj< typeof ValidatedTextareaControl > = {
 	render: function Template( { onChange, ...args } ) {
-		const [ value, setValue ] = useState( '' );
-		const [ customValidity, setCustomValidity ] =
+		const [ value, setValue ] =
 			useState<
 				React.ComponentProps<
 					typeof ValidatedTextareaControl
-				>[ 'customValidity' ]
-			>( undefined );
+				>[ 'value' ]
+			>( '' );
 
 		return (
 			<ValidatedTextareaControl
 				{ ...args }
+				value={ value }
 				onChange={ ( newValue ) => {
 					setValue( newValue );
 					onChange?.( newValue );
 				} }
-				value={ value }
-				onValidate={ ( v ) => {
-					if ( v?.toLowerCase() === 'error' ) {
-						setCustomValidity( {
-							type: 'invalid',
-							message: 'The word "error" is not allowed.',
-						} );
-					} else {
-						setCustomValidity( undefined );
-					}
-				} }
-				customValidity={ customValidity }
+				customValidity={
+					value?.toLowerCase() === 'error'
+						? {
+								type: 'invalid',
+								message: 'The word "error" is not allowed.',
+						  }
+						: undefined
+				}
 			/>
 		);
 	},

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

@@ -30,32 +30,23 @@ export default meta;
 export const Default: StoryObj< typeof ValidatedToggleControl > = {
 	render: function Template( { onChange, ...args } ) {
 		const [ checked, setChecked ] = useState( false );
-		const [ customValidity, setCustomValidity ] =
-			useState<
-				React.ComponentProps<
-					typeof ValidatedToggleControl
-				>[ 'customValidity' ]
-			>( undefined );
 
 		return (
 			<ValidatedToggleControl
 				{ ...args }
 				checked={ checked }
-				onChange={ ( value ) => {
-					setChecked( value );
-					onChange?.( value );
+				onChange={ ( newValue ) => {
+					setChecked( newValue );
+					onChange?.( newValue );
 				} }
-				onValidate={ ( v ) => {
-					if ( v ) {
-						setCustomValidity( {
-							type: 'invalid',
-							message: 'This toggle may not be enabled.',
-						} );
-					} else {
-						setCustomValidity( undefined );
-					}
-				} }
-				customValidity={ customValidity }
+				customValidity={
+					checked
+						? {
+								type: 'invalid',
+								message: 'This toggle may not be enabled.',
+						  }
+						: undefined
+				}
 			/>
 		);
 	},

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

@@ -36,12 +36,6 @@ export const Default: StoryObj< typeof ValidatedToggleGroupControl > = {
 					typeof ValidatedToggleGroupControl
 				>[ 'value' ]
 			>( '1' );
-		const [ customValidity, setCustomValidity ] =
-			useState<
-				React.ComponentProps<
-					typeof ValidatedToggleGroupControl
-				>[ 'customValidity' ]
-			>( undefined );
 
 		return (
 			<ValidatedToggleGroupControl
@@ -51,17 +45,14 @@ export const Default: StoryObj< typeof ValidatedToggleGroupControl > = {
 					setValue( newValue );
 					onChange?.( newValue );
 				} }
-				onValidate={ ( v ) => {
-					if ( v === '2' ) {
-						setCustomValidity( {
-							type: 'invalid',
-							message: 'Option 2 is not allowed.',
-						} );
-					} else {
-						setCustomValidity( undefined );
-					}
-				} }
-				customValidity={ customValidity }
+				customValidity={
+					value === '2'
+						? {
+								type: 'invalid',
+								message: 'Option 2 is not allowed.',
+						  }
+						: undefined
+				}
 			/>
 		);
 	},

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

@@ -10,36 +10,27 @@ import { forwardRef, useRef } from '@wordpress/element';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import TextControl from '../../text-control';
-import type { TextControlProps } from '../../text-control/types';
-
-type Value = TextControlProps[ 'value' ];
 
 const UnforwardedValidatedTextControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof TextControl >,
 		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	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 }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
@@ -47,10 +38,6 @@ const UnforwardedValidatedTextControl = (
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				ref={ mergedRefs }
-				onChange={ ( value ) => {
-					valueRef.current = value;
-					onChange?.( value );
-				} }
 				{ ...restProps }
 			/>
 		</ControlWithError>

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

@@ -10,46 +10,33 @@ import { useMergeRefs } from '@wordpress/compose';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import TextareaControl from '../../textarea-control';
-import type { TextareaControlProps } from '../../textarea-control/types';
-
-type Value = TextareaControlProps[ 'value' ];
 
 const UnforwardedValidatedTextareaControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof TextareaControl >,
 		'__nextHasNoMarginBottom'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLTextAreaElement >
 ) => {
 	const validityTargetRef = useRef< HTMLTextAreaElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-	const valueRef = useRef< Value >( restProps.value );
 
 	return (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<TextareaControl
 				__nextHasNoMarginBottom
 				ref={ mergedRefs }
-				onChange={ ( value ) => {
-					valueRef.current = value;
-					onChange?.( value );
-				} }
 				{ ...restProps }
 			/>
 		</ControlWithError>

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

@@ -10,30 +10,24 @@ import { useMergeRefs } from '@wordpress/compose';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import ToggleControl from '../../toggle-control';
-import type { ToggleControlProps } from '../../toggle-control/types';
-
-type Value = ToggleControlProps[ 'checked' ];
 
 // TODO: Should we customize the default `missingValue` message? It says to "check this box".
 
 const UnforwardedValidatedToggleControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof ToggleControl >,
 		'__nextHasNoMarginBottom'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-	const valueRef = useRef< Value >( restProps.checked );
 
 	// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
 	// so we need to set it manually.
@@ -47,19 +41,12 @@ const UnforwardedValidatedToggleControl = (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<ToggleControl
 				__nextHasNoMarginBottom
 				ref={ mergedRefs }
-				onChange={ ( value ) => {
-					valueRef.current = value;
-					onChange?.( value );
-				} }
 				{ ...restProps }
 			/>
 		</ControlWithError>

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

@@ -9,27 +9,21 @@ import { forwardRef, useId, useRef } from '@wordpress/element';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import { ToggleGroupControl } from '../../toggle-group-control';
-import type { ToggleGroupControlProps } from '../../toggle-group-control/types';
-
-type Value = ToggleGroupControlProps[ 'value' ];
 
 const UnforwardedValidatedToggleGroupControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof ToggleGroupControl >,
 		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
-	const valueRef = useRef< Value >( restProps.value );
 
 	const nameAttr = useId();
 
@@ -38,9 +32,6 @@ const UnforwardedValidatedToggleGroupControl = (
 			<ControlWithError
 				required={ required }
 				markWhenOptional={ markWhenOptional }
-				onValidate={ () => {
-					return onValidate?.( valueRef.current );
-				} }
 				customValidity={ customValidity }
 				getValidityTarget={ () => validityTargetRef.current }
 			>
@@ -48,10 +39,6 @@ const UnforwardedValidatedToggleGroupControl = (
 					__nextHasNoMarginBottom
 					__next40pxDefaultSize
 					ref={ forwardedRef }
-					onChange={ ( value ) => {
-						valueRef.current = value;
-						onChange?.( value );
-					} }
 					{ ...restProps }
 				/>
 			</ControlWithError>

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

@@ -1,4 +1,4 @@
-export type ValidatedControlProps< V > = {
+export type ValidatedControlProps = {
 	/**
 	 * Whether the control is required.
 	 * @default false
@@ -9,14 +9,6 @@ export type ValidatedControlProps< V > = {
 	 * @default false
 	 */
 	markWhenOptional?: boolean;
-	/**
-	 * Optional callback to run when the input should be validated. Use this to set
-	 * a `customValidity` as necessary.
-	 *
-	 * Always prefer using standard HTML attributes like `required` and `min`/`max` over
-	 * custom validators when possible, as they are simpler and have localized error messages built in.
-	 */
-	onValidate?: ( currentValue: V ) => void;
 	/**
 	 * Show a custom message based on the validation status.
 	 *