@wordpress/dataviews 11.4.1-next.v.0 → 12.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "11.4.1-next.v.0+5aba098fc",
+	"version": "12.0.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -52,24 +52,24 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@ariakit/react": "^0.4.15",
-		"@wordpress/base-styles": "^6.15.1-next.v.0+5aba098fc",
-		"@wordpress/components": "^32.1.1-next.v.0+5aba098fc",
-		"@wordpress/compose": "^7.39.1-next.v.0+5aba098fc",
-		"@wordpress/data": "^10.39.1-next.v.0+5aba098fc",
-		"@wordpress/date": "^5.39.1-next.v.0+5aba098fc",
-		"@wordpress/deprecated": "^4.39.1-next.v.0+5aba098fc",
-		"@wordpress/dom": "^4.39.1-next.v.0+5aba098fc",
-		"@wordpress/element": "^6.39.1-next.v.0+5aba098fc",
-		"@wordpress/i18n": "^6.12.1-next.v.0+5aba098fc",
-		"@wordpress/icons": "^11.6.1-next.v.0+5aba098fc",
-		"@wordpress/keycodes": "^4.39.1-next.v.0+5aba098fc",
-		"@wordpress/primitives": "^4.39.1-next.v.0+5aba098fc",
-		"@wordpress/private-apis": "^1.39.1-next.v.0+5aba098fc",
-		"@wordpress/theme": "^0.6.1-next.v.0+5aba098fc",
-		"@wordpress/ui": "^0.6.1-next.v.0+5aba098fc",
-		"@wordpress/url": "^4.39.1-next.v.0+5aba098fc",
-		"@wordpress/warning": "^3.39.1-next.v.0+5aba098fc",
+		"@ariakit/react": "^0.4.21",
+		"@wordpress/base-styles": "^6.16.0",
+		"@wordpress/components": "^32.2.0",
+		"@wordpress/compose": "^7.40.0",
+		"@wordpress/data": "^10.40.0",
+		"@wordpress/date": "^5.40.0",
+		"@wordpress/deprecated": "^4.40.0",
+		"@wordpress/dom": "^4.40.0",
+		"@wordpress/element": "^6.40.0",
+		"@wordpress/i18n": "^6.13.0",
+		"@wordpress/icons": "^11.7.0",
+		"@wordpress/keycodes": "^4.40.0",
+		"@wordpress/primitives": "^4.40.0",
+		"@wordpress/private-apis": "^1.40.0",
+		"@wordpress/theme": "^0.7.0",
+		"@wordpress/ui": "^0.7.0",
+		"@wordpress/url": "^4.40.0",
+		"@wordpress/warning": "^3.40.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -80,7 +80,7 @@
 	"devDependencies": {
 		"@storybook/addon-docs": "^10.1.11",
 		"@storybook/react-vite": "^10.1.11",
-		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
 		"esbuild": "^0.27.2",
 		"storybook": "^10.1.11"
@@ -95,5 +95,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "d730f9e00f5462d1b9d2660632850f5f43ccff44"
+	"gitHead": "376124aa10dbc2cc0c81c964ec00b99fcfee5382"
 }

package/src/components/dataform-controls/adaptive-select.tsx

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../../types';
+import useElements from '../../hooks/use-elements';
+import Combobox from './combobox';
+import Select from './select';
+
+const ELEMENTS_THRESHOLD = 10;
+
+export default function AdaptiveSelect< Item >(
+	props: DataFormControlProps< Item >
+) {
+	const { field } = props;
+	const { elements } = useElements( {
+		elements: field.elements,
+		getElements: field.getElements,
+	} );
+	if ( elements.length >= ELEMENTS_THRESHOLD ) {
+		return <Combobox { ...props } />;
+	}
+	return <Select { ...props } />;
+}

package/src/components/dataform-controls/array.tsx

@@ -19,6 +19,7 @@ export default function ArrayControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, placeholder, getValue, setValue, isValid } = field;
@@ -65,6 +66,7 @@ export default function ArrayControl< Item >( {
 	return (
 		<ValidatedFormTokenField
 			required={ !! isValid?.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ hideLabelFromVision ? undefined : label }
 			value={ arrayValueAsElements }

package/src/components/dataform-controls/checkbox.tsx

@@ -18,6 +18,7 @@ export default function Checkbox< Item >( {
 	onChange,
 	data,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { getValue, setValue, label, description, isValid } = field;
@@ -31,6 +32,7 @@ export default function Checkbox< Item >( {
 	return (
 		<ValidatedCheckboxControl
 			required={ !! field.isValid?.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			hidden={ hideLabelFromVision }
 			label={ label }

package/src/components/dataform-controls/color.tsx

@@ -7,11 +7,16 @@ import { colord } from 'colord';
  * WordPress dependencies
  */
 import {
+	Button,
+	ColorIndicator,
+	ColorPicker,
 	Dropdown,
 	privateApis,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -20,51 +25,37 @@ import type { DataFormControlProps } from '../../types';
 import { unlock } from '../../lock-unlock';
 import getCustomValidity from './utils/get-custom-validity';
 
-const { ValidatedInputControl, Picker } = unlock( privateApis );
+const { ValidatedInputControl } = unlock( privateApis );
 
-const ColorPicker = ( {
+const ColorPickerDropdown = ( {
 	color,
 	onColorChange,
 }: {
 	color: string;
-	onColorChange: ( colorObject: any ) => void;
+	onColorChange: ( newColor: string ) => void;
 } ) => {
 	const validColor = color && colord( color ).isValid() ? color : '#ffffff';
 
 	return (
 		<Dropdown
-			renderToggle={ ( { onToggle, isOpen } ) => (
-				<InputControlPrefixWrapper variant="icon">
-					<button
-						type="button"
-						onClick={ onToggle }
-						style={ {
-							width: '24px',
-							height: '24px',
-							borderRadius: '50%',
-							backgroundColor: validColor,
-							border: '1px solid #ddd',
-							cursor: 'pointer',
-							outline: isOpen ? '2px solid #007cba' : 'none',
-							outlineOffset: '2px',
-							display: 'flex',
-							alignItems: 'center',
-							justifyContent: 'center',
-							padding: 0,
-							margin: 0,
-						} }
-						aria-label="Open color picker"
-					/>
-				</InputControlPrefixWrapper>
+			className="dataviews-controls__color-picker-dropdown"
+			popoverProps={ { resize: false } }
+			renderToggle={ ( { onToggle } ) => (
+				<Button
+					onClick={ onToggle }
+					aria-label={ __( 'Open color picker' ) }
+					size="small"
+					icon={ () => <ColorIndicator colorValue={ validColor } /> }
+				/>
 			) }
 			renderContent={ () => (
-				<div style={ { padding: '16px' } }>
-					<Picker
-						color={ colord( validColor ) }
+				<DropdownContentWrapper paddingSize="none">
+					<ColorPicker
+						color={ validColor }
 						onChange={ onColorChange }
 						enableAlpha
 					/>
-				</div>
+				</DropdownContentWrapper>
 			) }
 		/>
 	);
@@ -75,14 +66,15 @@ export default function Color< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, placeholder, description, setValue, isValid } = field;
 	const value = field.getValue( { item: data } ) || '';
 
 	const handleColorChange = useCallback(
-		( colorObject: any ) => {
-			onChange( setValue( { item: data, value: colorObject.toHex() } ) );
+		( newColor: string ) => {
+			onChange( setValue( { item: data, value: newColor } ) );
 		},
 		[ data, onChange, setValue ]
 	);
@@ -97,6 +89,7 @@ export default function Color< Item >( {
 	return (
 		<ValidatedInputControl
 			required={ !! field.isValid?.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			placeholder={ placeholder }
@@ -106,10 +99,12 @@ export default function Color< Item >( {
 			hideLabelFromVision={ hideLabelFromVision }
 			type="text"
 			prefix={
-				<ColorPicker
-					color={ value }
-					onColorChange={ handleColorChange }
-				/>
+				<InputControlPrefixWrapper variant="control">
+					<ColorPickerDropdown
+						color={ value }
+						onColorChange={ handleColorChange }
+					/>
+				</InputControlPrefixWrapper>
 			}
 		/>
 	);

package/src/components/dataform-controls/date.tsx

@@ -161,8 +161,8 @@ function ValidatedDateControl< Item >( {
 	field: NormalizedField< Item >;
 	validity?: FieldValidity;
 	inputRefs:
-		| React.RefObject< HTMLInputElement >
-		| React.RefObject< HTMLInputElement >[];
+		| React.RefObject< HTMLInputElement | null >
+		| React.RefObject< HTMLInputElement | null >[];
 	isTouched: boolean;
 	setIsTouched: ( touched: boolean ) => void;
 	children: React.ReactNode;
@@ -265,9 +265,6 @@ function ValidatedDateControl< Item >( {
 							'components-validated-control__indicator',
 							customValidity.type === 'invalid'
 								? 'is-invalid'
-								: undefined,
-							customValidity.type === 'valid'
-								? 'is-valid'
 								: undefined
 						) }
 					>
@@ -290,6 +287,7 @@ function CalendarDateControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const {
@@ -368,9 +366,12 @@ function CalendarDateControl< Item >( {
 		timezone: { string: timezoneString },
 	} = getSettings();
 
-	const displayLabel = isValid?.required
-		? `${ label } (${ __( 'Required' ) })`
-		: label;
+	let displayLabel = label;
+	if ( isValid?.required && ! markWhenOptional ) {
+		displayLabel = `${ label } (${ __( 'Required' ) })`;
+	} else if ( ! isValid?.required && markWhenOptional ) {
+		displayLabel = `${ label } (${ __( 'Optional' ) })`;
+	}
 
 	return (
 		<ValidatedDateControl
@@ -386,11 +387,11 @@ function CalendarDateControl< Item >( {
 				label={ displayLabel }
 				hideLabelFromVision={ hideLabelFromVision }
 			>
-				<Stack direction="column" gap="md">
+				<Stack direction="column" gap="lg">
 					{ /* Preset buttons */ }
 					<Stack
 						direction="row"
-						gap="xs"
+						gap="sm"
 						wrap="wrap"
 						justify="flex-start"
 					>
@@ -458,6 +459,7 @@ function CalendarDateRangeControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { id, label, getValue, setValue, format: fieldFormat } = field;
@@ -576,9 +578,12 @@ function CalendarDateRangeControl< Item >( {
 
 	const { timezone } = getSettings();
 
-	const displayLabel = field.isValid?.required
-		? `${ label } (${ __( 'Required' ) })`
-		: label;
+	let displayLabel = label;
+	if ( field.isValid?.required && ! markWhenOptional ) {
+		displayLabel = `${ label } (${ __( 'Required' ) })`;
+	} else if ( ! field.isValid?.required && markWhenOptional ) {
+		displayLabel = `${ label } (${ __( 'Optional' ) })`;
+	}
 
 	return (
 		<ValidatedDateControl
@@ -594,11 +599,11 @@ function CalendarDateRangeControl< Item >( {
 				label={ displayLabel }
 				hideLabelFromVision={ hideLabelFromVision }
 			>
-				<Stack direction="column" gap="md">
+				<Stack direction="column" gap="lg">
 					{ /* Preset buttons */ }
 					<Stack
 						direction="row"
-						gap="xs"
+						gap="sm"
 						wrap="wrap"
 						justify="flex-start"
 					>
@@ -634,7 +639,7 @@ function CalendarDateRangeControl< Item >( {
 					{ /* Manual date range inputs */ }
 					<Stack
 						direction="row"
-						gap="xs"
+						gap="sm"
 						justify="space-between"
 						className="dataviews-controls__date-range-inputs"
 					>
@@ -684,6 +689,7 @@ export default function DateControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	operator,
 	validity,
 }: DataFormControlProps< Item > ) {
@@ -707,6 +713,7 @@ export default function DateControl< Item >( {
 				field={ field }
 				onChange={ onChange }
 				hideLabelFromVision={ hideLabelFromVision }
+				markWhenOptional={ markWhenOptional }
 				validity={ validity }
 			/>
 		);
@@ -718,6 +725,7 @@ export default function DateControl< Item >( {
 			field={ field }
 			onChange={ onChange }
 			hideLabelFromVision={ hideLabelFromVision }
+			markWhenOptional={ markWhenOptional }
 			validity={ validity }
 		/>
 	);

package/src/components/dataform-controls/datetime.tsx

@@ -43,6 +43,7 @@ function CalendarDateTimeControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { id, label, description, setValue, getValue, isValid } = field;
@@ -55,7 +56,8 @@ function CalendarDateTimeControl< Item >( {
 	} );
 
 	const inputControlRef = useRef< HTMLInputElement >( null );
-	const validationTimeoutRef = useRef< ReturnType< typeof setTimeout > >();
+	const validationTimeoutRef =
+		useRef< ReturnType< typeof setTimeout > >( undefined );
 	const previousFocusRef = useRef< Element | null >( null );
 
 	const onChangeCallback = useCallback(
@@ -155,10 +157,16 @@ function CalendarDateTimeControl< Item >( {
 		timezone: { string: timezoneString },
 	} = getSettings();
 
-	const displayLabel =
-		isValid?.required && ! hideLabelFromVision
-			? `${ label } (${ __( 'Required' ) })`
-			: label;
+	let displayLabel = label;
+	if ( isValid?.required && ! markWhenOptional && ! hideLabelFromVision ) {
+		displayLabel = `${ label } (${ __( 'Required' ) })`;
+	} else if (
+		! isValid?.required &&
+		markWhenOptional &&
+		! hideLabelFromVision
+	) {
+		displayLabel = `${ label } (${ __( 'Optional' ) })`;
+	}
 
 	return (
 		<BaseControl
@@ -167,7 +175,7 @@ function CalendarDateTimeControl< Item >( {
 			help={ description }
 			hideLabelFromVision={ hideLabelFromVision }
 		>
-			<Stack direction="column" gap="md">
+			<Stack direction="column" gap="lg">
 				{ /* Calendar widget */ }
 				<DateCalendar
 					style={ { width: '100%' } }
@@ -208,6 +216,7 @@ export default function DateTime< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	operator,
 	validity,
 }: DataFormControlProps< Item > ) {
@@ -230,6 +239,7 @@ export default function DateTime< Item >( {
 			field={ field }
 			onChange={ onChange }
 			hideLabelFromVision={ hideLabelFromVision }
+			markWhenOptional={ markWhenOptional }
 			validity={ validity }
 		/>
 	);

package/src/components/dataform-controls/email.tsx

@@ -18,6 +18,7 @@ export default function Email< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	return (
@@ -27,6 +28,7 @@ export default function Email< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				markWhenOptional,
 				validity,
 				type: 'email',
 				prefix: (

package/src/components/dataform-controls/index.tsx

@@ -11,6 +11,7 @@ import checkbox from './checkbox';
 import combobox from './combobox';
 import datetime from './datetime';
 import date from './date';
+import adaptiveSelect from './adaptive-select';
 import email from './email';
 import telephone from './telephone';
 import url from './url';
@@ -32,6 +33,7 @@ interface FormControls {
 }
 
 const FORM_CONTROLS: FormControls = {
+	adaptiveSelect,
 	array,
 	checkbox,
 	color,
@@ -89,7 +91,7 @@ export function getControl< Item >(
 	}
 
 	if ( hasElements( field ) && field.type !== 'array' ) {
-		return getControlByType( 'select' );
+		return getControlByType( 'adaptiveSelect' );
 	}
 
 	if ( fallback === null ) {

package/src/components/dataform-controls/password.tsx

@@ -19,6 +19,7 @@ export default function Password< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const [ isVisible, setIsVisible ] = useState( false );
@@ -34,6 +35,7 @@ export default function Password< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				markWhenOptional,
 				validity,
 				type: isVisible ? 'text' : 'password',
 				suffix: (

package/src/components/dataform-controls/radio.tsx

@@ -19,6 +19,7 @@ export default function Radio< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, description, getValue, setValue, isValid } = field;
@@ -41,6 +42,7 @@ export default function Radio< Item >( {
 	return (
 		<ValidatedRadioControl
 			required={ !! field.isValid?.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			help={ description }

package/src/components/dataform-controls/select.tsx

@@ -19,6 +19,7 @@ export default function Select< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { type, label, description, getValue, setValue, isValid } = field;
@@ -44,6 +45,7 @@ export default function Select< Item >( {
 	return (
 		<ValidatedSelectControl
 			required={ !! field.isValid?.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			value={ value }

package/src/components/dataform-controls/style.scss

@@ -23,6 +23,10 @@
 	min-width: 0;
 }
 
+.dataviews-controls__color-picker-dropdown {
+	display: flex;
+}
+
 .dataviews-controls__date-preset {
 	border: 1px solid #ddd;
 

package/src/components/dataform-controls/telephone.tsx

@@ -18,6 +18,7 @@ export default function Telephone< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	return (
@@ -27,6 +28,7 @@ export default function Telephone< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				markWhenOptional,
 				validity,
 				type: 'tel',
 				prefix: (

package/src/components/dataform-controls/text.tsx

@@ -14,6 +14,7 @@ export default function Text< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	config,
 	validity,
 }: DataFormControlProps< Item > ) {
@@ -26,6 +27,7 @@ export default function Text< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				markWhenOptional,
 				validity,
 				prefix: prefix ? createElement( prefix ) : undefined,
 				suffix: suffix ? createElement( suffix ) : undefined,

package/src/components/dataform-controls/textarea.tsx

@@ -18,6 +18,7 @@ export default function Textarea< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	config,
 	validity,
 }: DataFormControlProps< Item > ) {
@@ -34,6 +35,7 @@ export default function Textarea< Item >( {
 	return (
 		<ValidatedTextareaControl
 			required={ !! isValid.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			placeholder={ placeholder }

package/src/components/dataform-controls/toggle-group.tsx

@@ -23,6 +23,7 @@ export default function ToggleGroup< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { getValue, setValue, isValid } = field;
@@ -51,6 +52,7 @@ export default function ToggleGroup< Item >( {
 	return (
 		<ValidatedToggleGroupControl
 			required={ !! field.isValid?.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			__next40pxDefaultSize
 			isBlock

package/src/components/dataform-controls/toggle.tsx

@@ -18,6 +18,7 @@ export default function Toggle< Item >( {
 	onChange,
 	data,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, description, getValue, setValue, isValid } = field;
@@ -31,6 +32,7 @@ export default function Toggle< Item >( {
 	return (
 		<ValidatedToggleControl
 			required={ !! isValid.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			hidden={ hideLabelFromVision }
 			label={ label }

package/src/components/dataform-controls/url.tsx

@@ -18,6 +18,7 @@ export default function Url< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	return (
@@ -27,6 +28,7 @@ export default function Url< Item >( {
 				field,
 				onChange,
 				hideLabelFromVision,
+				markWhenOptional,
 				validity,
 				type: 'url',
 				prefix: (

package/src/components/dataform-controls/utils/relative-date-control.tsx

@@ -92,7 +92,7 @@ export default function RelativeDateControl< Item >( {
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 		>
-			<Stack direction="row" gap="xs">
+			<Stack direction="row" gap="sm">
 				<NumberControl
 					__next40pxDefaultSize
 					className="dataviews-controls__relative-date-number"

package/src/components/dataform-controls/utils/validated-input.tsx

@@ -34,6 +34,7 @@ export default function ValidatedText< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	type,
 	prefix,
 	suffix,
@@ -57,6 +58,7 @@ export default function ValidatedText< Item >( {
 	return (
 		<ValidatedInputControl
 			required={ !! isValid.required }
+			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
 			label={ label }
 			placeholder={ placeholder }