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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "11.3.1-next.v.0+b8934fcf9",
+	"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.14.1-next.v.0+b8934fcf9",
-		"@wordpress/components": "^32.0.2-next.v.0+b8934fcf9",
-		"@wordpress/compose": "^7.38.1-next.v.0+b8934fcf9",
-		"@wordpress/data": "^10.38.1-next.v.0+b8934fcf9",
-		"@wordpress/date": "^5.38.1-next.v.0+b8934fcf9",
-		"@wordpress/deprecated": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/dom": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/element": "^6.38.1-next.v.0+b8934fcf9",
-		"@wordpress/i18n": "^6.11.1-next.v.0+b8934fcf9",
-		"@wordpress/icons": "^11.5.1-next.v.0+b8934fcf9",
-		"@wordpress/keycodes": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/primitives": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/private-apis": "^1.38.1-next.v.0+b8934fcf9",
-		"@wordpress/theme": "^0.5.1-next.v.0+b8934fcf9",
-		"@wordpress/ui": "^0.5.1-next.v.0+b8934fcf9",
-		"@wordpress/url": "^4.38.1-next.v.0+b8934fcf9",
-		"@wordpress/warning": "^3.38.1-next.v.0+b8934fcf9",
+		"@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",
@@ -78,8 +78,9 @@
 		"remove-accents": "^0.5.0"
 	},
 	"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"
@@ -94,5 +95,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "17529010285784fd2e735348a28391c79de87c88"
+	"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/combobox.tsx

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis, Spinner } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../../types';
+import useElements from '../../hooks/use-elements';
+import { unlock } from '../../lock-unlock';
+import getCustomValidity from './utils/get-custom-validity';
+
+const { ValidatedComboboxControl } = unlock( privateApis );
+
+export default function Combobox< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+	validity,
+}: DataFormControlProps< Item > ) {
+	const { label, description, placeholder, getValue, setValue, isValid } =
+		field;
+	const value = getValue( { item: data } ) ?? '';
+
+	const onChangeControl = useCallback(
+		( newValue: string | null ) =>
+			onChange( setValue( { item: data, value: newValue ?? '' } ) ),
+		[ data, onChange, setValue ]
+	);
+
+	const { elements, isLoading } = useElements( {
+		elements: field.elements,
+		getElements: field.getElements,
+	} );
+
+	if ( isLoading ) {
+		return <Spinner />;
+	}
+
+	return (
+		<ValidatedComboboxControl
+			required={ !! field.isValid?.required }
+			customValidity={ getCustomValidity( isValid, validity ) }
+			label={ label }
+			value={ value }
+			help={ description }
+			placeholder={ placeholder }
+			options={ elements }
+			onChange={ onChangeControl }
+			hideLabelFromVision={ hideLabelFromVision }
+			allowReset
+			expandOnFocus
+		/>
+	);
+}

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;
@@ -191,18 +191,53 @@ function ValidatedDateControl< Item >( {
 		setCustomValidity( undefined );
 	}, [ inputRefs ] );
 
+	// Sync React-level validation to native inputs.
 	useEffect( () => {
-		if ( isTouched ) {
-			const timeoutId = setTimeout( () => {
-				if ( validity ) {
-					setCustomValidity( getCustomValidity( isValid, validity ) );
-				} else {
-					validateRefs();
-				}
-			}, 0 );
-			return () => clearTimeout( timeoutId );
+		const refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];
+		const result = validity
+			? getCustomValidity( isValid, validity )
+			: undefined;
+		for ( const ref of refs ) {
+			const input = ref.current;
+			if ( input ) {
+				input.setCustomValidity(
+					result?.type === 'invalid' && result.message
+						? result.message
+						: ''
+				);
+			}
+		}
+	}, [ inputRefs, isValid, validity ] );
+
+	// Listen for 'invalid' events (e.g., from reportValidity() on card re-expand).
+	useEffect( () => {
+		const refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];
+		const handleInvalid = ( event: Event ) => {
+			event.preventDefault();
+			setIsTouched( true );
+		};
+		for ( const ref of refs ) {
+			ref.current?.addEventListener( 'invalid', handleInvalid );
+		}
+		return () => {
+			for ( const ref of refs ) {
+				ref.current?.removeEventListener( 'invalid', handleInvalid );
+			}
+		};
+	}, [ inputRefs, setIsTouched ] );
+
+	useEffect( () => {
+		if ( ! isTouched ) {
+			return;
+		}
+		const result = validity
+			? getCustomValidity( isValid, validity )
+			: undefined;
+		if ( result ) {
+			setCustomValidity( result );
+		} else {
+			validateRefs();
 		}
-		return undefined;
 	}, [ isTouched, isValid, validity, validateRefs ] );
 
 	const onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {
@@ -230,9 +265,6 @@ function ValidatedDateControl< Item >( {
 							'components-validated-control__indicator',
 							customValidity.type === 'invalid'
 								? 'is-invalid'
-								: undefined,
-							customValidity.type === 'valid'
-								? 'is-valid'
 								: undefined
 						) }
 					>
@@ -255,6 +287,7 @@ function CalendarDateControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const {
@@ -333,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
@@ -351,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"
 					>
@@ -423,6 +459,7 @@ function CalendarDateRangeControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { id, label, getValue, setValue, format: fieldFormat } = field;
@@ -541,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
@@ -559,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"
 					>
@@ -599,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"
 					>
@@ -649,6 +689,7 @@ export default function DateControl< Item >( {
 	field,
 	onChange,
 	hideLabelFromVision,
+	markWhenOptional,
 	operator,
 	validity,
 }: DataFormControlProps< Item > ) {
@@ -672,6 +713,7 @@ export default function DateControl< Item >( {
 				field={ field }
 				onChange={ onChange }
 				hideLabelFromVision={ hideLabelFromVision }
+				markWhenOptional={ markWhenOptional }
 				validity={ validity }
 			/>
 		);
@@ -683,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

@@ -8,8 +8,10 @@ import type { ComponentType } from 'react';
  */
 import type { DataFormControlProps, Field, EditConfig } from '../../types';
 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';
@@ -31,9 +33,11 @@ interface FormControls {
 }
 
 const FORM_CONTROLS: FormControls = {
+	adaptiveSelect,
 	array,
 	checkbox,
 	color,
+	combobox,
 	datetime,
 	date,
 	email,
@@ -87,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;