@wordpress/components 30.1.0 → 30.2.0

package/src/divider/stories/index.story.tsx

@@ -12,7 +12,7 @@ import { Flex } from '../../flex';
 
 const meta: Meta< typeof Divider > = {
 	component: Divider,
-	title: 'Components (Experimental)/Divider',
+	title: 'Components/Divider',
 	argTypes: {
 		margin: {
 			control: { type: 'text' },
@@ -32,6 +32,7 @@ const meta: Meta< typeof Divider > = {
 			},
 		},
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/elevation/stories/index.story.tsx

@@ -10,11 +10,12 @@ import { Elevation } from '..';
 
 const meta: Meta< typeof Elevation > = {
 	component: Elevation,
-	title: 'Components (Experimental)/Elevation',
+	title: 'Components/Elevation',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		borderRadius: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: {
 			expanded: true,

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

@@ -115,28 +115,36 @@ DropdownSelector.args = {
 };
 
 /**
- * The rendered output of each suggestion can be customized by passing a
- * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
- * and is subject to change.)
+ * The rendered content of each token can be customized by passing a
+ * render function to the `displayTransform` prop.
+ *
+ * Similarly, each suggestion can be customized by passing a
+ * render function to the `__experimentalRenderItem` prop. (This is still an
+ * experimental feature and is subject to change.)
  */
-export const WithCustomRenderItem: StoryFn< typeof FormTokenField > =
+export const WithCustomRenderedItems: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
-WithCustomRenderItem.args = {
+WithCustomRenderedItems.args = {
 	...Default.args,
+	displayTransform: ( token ) => `📍 ${ token }`,
 	__experimentalRenderItem: ( { item } ) => (
 		<div>{ `${ item } — a nice place to visit` }</div>
 	),
+	__experimentalExpandOnFocus: true,
 };
 
 /**
  * Only values for which the `__experimentalValidateInput` function returns
  * `true` will be tokenized. (This is still an experimental feature and is
  * subject to change.)
+ *
+ * In this example, the user can only add tokens that are already in the list.
  */
-export const WithValidatedInput: StoryFn< typeof FormTokenField > =
+export const ValidateNewTokens: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
-WithValidatedInput.args = {
+ValidateNewTokens.args = {
 	...Default.args,
 	__experimentalValidateInput: ( input: string ) =>
 		continents.includes( input ),
+	__experimentalExpandOnFocus: true,
 };

package/src/gradient-picker/stories/index.story.tsx

@@ -64,6 +64,18 @@ const GRADIENTS = [
 			'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
 		slug: 'cool-to-warm-spectrum',
 	},
+	{
+		name: 'HSL blue to purple',
+		gradient:
+			'linear-gradient(135deg,hsl(200, 100%, 50%) 0%,hsl(280, 100%, 60%) 100%)',
+		slug: 'hsl-blue-to-purple',
+	},
+	{
+		name: 'HSLA green to red',
+		gradient:
+			'linear-gradient(135deg,hsla(120, 100%, 40%, 0.85) 0%,hsla(0, 100%, 50%, 0.85) 100%)',
+		slug: 'hsla-green-to-red',
+	},
 ];
 
 const Template: StoryFn< typeof GradientPicker > = ( {
@@ -103,3 +115,39 @@ MultipleOrigins.args = {
 		{ name: 'Origin 2', gradients: GRADIENTS },
 	],
 };
+
+export const CSSVariables: StoryFn< typeof GradientPicker > = ( args ) => {
+	return (
+		<div
+			style={ {
+				'--red': '#f00',
+				'--yellow': '#ff0',
+				'--blue': '#00f',
+			} }
+		>
+			<Template { ...args } />
+		</div>
+	);
+};
+CSSVariables.args = {
+	...Default.args,
+	gradients: [
+		{
+			name: 'Red to Yellow',
+			gradient:
+				'linear-gradient(135deg,var(--red) 0%,var(--yellow) 100%)',
+			slug: 'red-to-yellow',
+		},
+		{
+			name: 'Yellow to Blue',
+			gradient:
+				'linear-gradient(135deg,var(--yellow) 0%,var(--blue) 100%)',
+			slug: 'yellow-to-blue',
+		},
+		{
+			name: 'Blue to Red',
+			gradient: 'linear-gradient(135deg,var(--blue) 0%,var(--red) 100%)',
+			slug: 'blue-to-red',
+		},
+	],
+};

package/src/grid/stories/index.story.tsx

@@ -11,7 +11,7 @@ import { Grid } from '..';
 
 const meta: Meta< typeof Grid > = {
 	component: Grid,
-	title: 'Components (Experimental)/Grid',
+	title: 'Components/Grid',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		align: { control: { type: 'text' } },
@@ -30,6 +30,7 @@ const meta: Meta< typeof Grid > = {
 		templateColumns: { control: { type: 'text' } },
 		templateRows: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: {
 			expanded: true,

package/src/h-stack/stories/e2e/index.story.tsx

@@ -11,7 +11,7 @@ import { HStack } from '../..';
 
 const meta: Meta< typeof HStack > = {
 	component: HStack,
-	title: 'Components (Experimental)/HStack',
+	title: 'Components/HStack',
 };
 export default meta;
 

package/src/h-stack/stories/index.story.tsx

@@ -42,8 +42,8 @@ const JUSTIFICATIONS = {
 
 const meta: Meta< typeof HStack > = {
 	component: HStack,
-	title: 'Components (Experimental)/Layout/HStack',
-	id: 'components-experimental-hstack',
+	title: 'Components/Layout/HStack',
+	id: 'components-hstack',
 	argTypes: {
 		as: {
 			control: false,
@@ -70,6 +70,7 @@ const meta: Meta< typeof HStack > = {
 			control: { type: 'text' },
 		},
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/heading/stories/index.story.tsx

@@ -10,8 +10,8 @@ import { Heading } from '..';
 
 const meta: Meta< typeof Heading > = {
 	component: Heading,
-	title: 'Components (Experimental)/Typography/Heading',
-	id: 'components-experimental-heading',
+	title: 'Components/Typography/Heading',
+	id: 'components-heading',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		color: { control: { type: 'color' } },
@@ -25,6 +25,7 @@ const meta: Meta< typeof Heading > = {
 		},
 		weight: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/input-control/stories/index.story.tsx

@@ -16,8 +16,8 @@ import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
 import Button from '../../button';
 
 const meta: Meta< typeof InputControl > = {
-	title: 'Components (Experimental)/Selection & Input/InputControl',
-	id: 'components-experimental-inputcontrol',
+	title: 'Components/Selection & Input/Common/InputControl',
+	id: 'components-inputcontrol',
 	component: InputControl,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
@@ -30,6 +30,7 @@ const meta: Meta< typeof InputControl > = {
 		type: { control: { type: 'text' } },
 		value: { control: { disable: true } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },

package/src/item-group/stories/index.story.tsx

@@ -15,11 +15,12 @@ const meta: Meta< typeof ItemGroup > = {
 	component: ItemGroup,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { Item },
-	title: 'Components (Experimental)/ItemGroup',
+	title: 'Components/ItemGroup',
 	argTypes: {
 		as: { control: false },
 		children: { control: false },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/menu/stories/index.story.tsx

@@ -24,7 +24,7 @@ import type { Props } from '../types';
 
 const meta: Meta< typeof Menu > = {
 	id: 'components-menu',
-	title: 'Components (Experimental)/Actions/Menu',
+	title: 'Components/Actions/Menu',
 	component: Menu,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

package/src/menu-item/index.tsx

@@ -67,6 +67,7 @@ function UnforwardedMenuItem(
 			role={ role }
 			icon={ iconPosition === 'left' ? icon : undefined }
 			className={ className }
+			accessibleWhenDisabled
 			{ ...buttonProps }
 		>
 			<span className="components-menu-item__item">{ children }</span>

package/src/number-control/stories/index.story.tsx

@@ -14,8 +14,8 @@ import { useState } from '@wordpress/element';
 import NumberControl from '..';
 
 const meta: Meta< typeof NumberControl > = {
-	title: 'Components (Experimental)/Selection & Input/NumberControl',
-	id: 'components-experimental-numbercontrol',
+	title: 'Components/Selection & Input/Common/NumberControl',
+	id: 'components-numbercontrol',
 	component: NumberControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
@@ -25,6 +25,7 @@ const meta: Meta< typeof NumberControl > = {
 		type: { control: { type: 'text' } },
 		value: { control: false },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/scrollable/stories/index.story.tsx

@@ -16,7 +16,7 @@ import { Scrollable } from '..';
 
 const meta: Meta< typeof Scrollable > = {
 	component: Scrollable,
-	title: 'Components (Experimental)/Scrollable',
+	title: 'Components/Scrollable',
 	argTypes: {
 		as: {
 			control: { type: 'text' },
@@ -25,6 +25,7 @@ const meta: Meta< typeof Scrollable > = {
 			control: false,
 		},
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: {
 			expanded: true,

package/src/spacer/stories/index.story.tsx

@@ -31,7 +31,7 @@ const controls = [
 
 const meta: Meta< typeof Spacer > = {
 	component: Spacer,
-	title: 'Components (Experimental)/Spacer',
+	title: 'Components/Spacer',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		children: {
@@ -39,6 +39,7 @@ const meta: Meta< typeof Spacer > = {
 		},
 		...controls,
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: {
 			expanded: true,

package/src/surface/stories/index.story.tsx

@@ -11,11 +11,12 @@ import { Text } from '../../text';
 
 const meta: Meta< typeof Surface > = {
 	component: Surface,
-	title: 'Components (Experimental)/Surface',
+	title: 'Components/Surface',
 	argTypes: {
 		children: { control: false },
 		as: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: {
 			expanded: true,

package/src/text/stories/index.story.tsx

@@ -10,8 +10,8 @@ import { Text } from '../component';
 
 const meta: Meta< typeof Text > = {
 	component: Text,
-	title: 'Components (Experimental)/Typography/Text',
-	id: 'components-experimental-text',
+	title: 'Components/Typography/Text',
+	id: 'components-text',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		color: { control: { type: 'color' } },
@@ -26,6 +26,7 @@ const meta: Meta< typeof Text > = {
 		},
 		weight: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },

package/src/toggle-group-control/stories/index.story.tsx

@@ -27,13 +27,14 @@ const meta: Meta< typeof ToggleGroupControl > = {
 	component: ToggleGroupControl,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
-	title: 'Components (Experimental)/Selection & Input/ToggleGroupControl',
-	id: 'components-experimental-togglegroupcontrol',
+	title: 'Components/Selection & Input/Common/ToggleGroupControl',
+	id: 'components-togglegroupcontrol',
 	argTypes: {
 		help: { control: { type: 'text' } },
 		onChange: { action: 'onChange' },
 		value: { control: false },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/tools-panel/stories/index.story.tsx

@@ -26,7 +26,7 @@ import UnitControl from '../../unit-control';
 import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 
 const meta: Meta< typeof ToolsPanel > = {
-	title: 'Components (Experimental)/ToolsPanel',
+	title: 'Components/ToolsPanel',
 	component: ToolsPanel,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { ToolsPanelItem },
@@ -36,6 +36,7 @@ const meta: Meta< typeof ToolsPanel > = {
 		panelId: { control: false },
 		resetAll: { action: 'resetAll' },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: {

package/src/tree-grid/stories/index.story.tsx

@@ -16,14 +16,15 @@ import { Button } from '../../button';
 import InputControl from '../../input-control';
 
 const meta: Meta< typeof TreeGrid > = {
-	title: 'Components (Experimental)/Navigation/TreeGrid',
-	id: 'components-experimental-treegrid',
+	title: 'Components/Navigation/TreeGrid',
+	id: 'components-treegrid',
 	component: TreeGrid,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { TreeGridRow, TreeGridCell },
 	argTypes: {
 		children: { control: false },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },

package/src/truncate/stories/index.story.tsx

@@ -10,12 +10,13 @@ import { Truncate } from '..';
 
 const meta: Meta< typeof Truncate > = {
 	component: Truncate,
-	title: 'Components (Experimental)/Typography/Truncate',
-	id: 'components-experimental-truncate',
+	title: 'Components/Typography/Truncate',
+	id: 'components-truncate',
 	argTypes: {
 		children: { control: { type: 'text' } },
 		as: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: {
 			expanded: true,

package/src/unit-control/stories/index.story.tsx

@@ -16,8 +16,8 @@ import { CSS_UNITS } from '../utils';
 
 const meta: Meta< typeof UnitControl > = {
 	component: UnitControl,
-	title: 'Components (Experimental)/Selection & Input/UnitControl',
-	id: 'components-experimental-unitcontrol',
+	title: 'Components/Selection & Input/Common/UnitControl',
+	id: 'components-unitcontrol',
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
 		__unstableStateReducer: { control: false },
@@ -26,6 +26,7 @@ const meta: Meta< typeof UnitControl > = {
 		prefix: { control: { type: 'text' } },
 		value: { control: false },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: {

package/src/utils/theme-variables.scss

@@ -29,3 +29,4 @@ $components-color-light-gray-placeholder: color-mix(in srgb, $components-color-b
 
 // Semantic aliases (prefer these over raw gray values when applicable).
 $components-color-border: #{ $components-color-gray-600 };
+$components-color-disabled: #{ $components-color-gray-600 };

package/src/v-stack/stories/e2e/index.story.tsx

@@ -11,7 +11,7 @@ import { VStack } from '../..';
 
 const meta: Meta< typeof VStack > = {
 	component: VStack,
-	title: 'Components (Experimental)/VStack',
+	title: 'Components/VStack',
 };
 export default meta;
 

package/src/v-stack/stories/index.story.tsx

@@ -25,8 +25,8 @@ const ALIGNMENTS = {
 
 const meta: Meta< typeof VStack > = {
 	component: VStack,
-	title: 'Components (Experimental)/Layout/VStack',
-	id: 'components-experimental-vstack',
+	title: 'Components/Layout/VStack',
+	id: 'components-vstack',
 	argTypes: {
 		alignment: {
 			control: { type: 'select' },
@@ -38,6 +38,7 @@ const meta: Meta< typeof VStack > = {
 		justify: { control: { type: 'text' } },
 		spacing: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

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

@@ -17,7 +17,8 @@ type Value = CheckboxControlProps[ 'checked' ];
 const UnforwardedValidatedCheckboxControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -37,9 +38,10 @@ const UnforwardedValidatedCheckboxControl = (
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			ref={ mergedRefs }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () =>
 				validityTargetRef.current?.querySelector< HTMLInputElement >(
 					'input[type="checkbox"]'

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

@@ -17,7 +17,8 @@ type Value = ComboboxControlProps[ 'value' ];
 const UnforwardedValidatedComboboxControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -50,9 +51,10 @@ const UnforwardedValidatedComboboxControl = (
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			ref={ mergedRefs }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () =>
 				validityTargetRef.current?.querySelector< HTMLInputElement >(
 					'input[role="combobox"]'

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

@@ -21,7 +21,8 @@ type Value = CustomSelectControlProps[ 'value' ];
 const UnforwardedValidatedCustomSelectControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -43,9 +44,10 @@ const UnforwardedValidatedCustomSelectControl = (
 			<ControlWithError
 				required={ required }
 				markWhenOptional={ markWhenOptional }
-				customValidator={ () => {
-					return customValidator?.( valueRef.current );
+				onValidate={ () => {
+					return onValidate?.( valueRef.current );
 				} }
+				customValidity={ customValidity }
 				getValidityTarget={ () => validityTargetRef.current }
 			>
 				<CustomSelectControl

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

@@ -17,7 +17,8 @@ type Value = InputControlProps[ 'value' ];
 const UnforwardedValidatedInputControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -36,9 +37,10 @@ const UnforwardedValidatedInputControl = (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<InputControl

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

@@ -17,7 +17,8 @@ type Value = NumberControlProps[ 'value' ];
 const UnforwardedValidatedNumberControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -36,9 +37,10 @@ const UnforwardedValidatedNumberControl = (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<NumberControl

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

@@ -17,7 +17,8 @@ type Value = RadioControlProps[ 'selected' ];
 const UnforwardedValidatedRadioControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -35,9 +36,10 @@ const UnforwardedValidatedRadioControl = (
 			markWhenOptional={ markWhenOptional }
 			// TODO: Upstream limitation - RadioControl does not accept a ref.
 			ref={ mergedRefs }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () =>
 				validityTargetRef.current?.querySelector< HTMLInputElement >(
 					'input[type="radio"]'

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

@@ -17,7 +17,8 @@ type Value = RangeControlProps[ 'value' ];
 const UnforwardedValidatedRangeControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -36,9 +37,10 @@ const UnforwardedValidatedRangeControl = (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<RangeControl

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

@@ -26,7 +26,8 @@ type Value = SelectControlProps[ 'value' ];
 const UnforwardedValidatedSelectControl = (
 	{
 		required,
-		customValidator,
+		onValidate,
+		customValidity,
 		onChange,
 		markWhenOptional,
 		...restProps
@@ -51,9 +52,10 @@ const UnforwardedValidatedSelectControl = (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			customValidator={ () => {
-				return customValidator?.( valueRef.current );
+			onValidate={ () => {
+				return onValidate?.( valueRef.current );
 			} }
+			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<SelectControl