@wordpress/dataviews 9.1.1-next.f56bd8138.0 → 10.0.1-next.47f435fc9.0

package/src/dataform-controls/datetime.tsx

@@ -1,33 +1,30 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+import { format, isValid } from 'date-fns';
+
 /**
  * WordPress dependencies
  */
 import {
 	BaseControl,
 	privateApis as componentsPrivateApis,
-	__experimentalInputControl as InputControl,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getDate, getSettings } from '@wordpress/date';
 
-/**
- * External dependencies
- */
-import { format, isValid } from 'date-fns';
-
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
 import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';
-import RelativeDateControl, {
-	TIME_UNITS_OPTIONS,
-	type DateRelative,
-} from './relative-date-control';
+import RelativeDateControl from './utils/relative-date-control';
 import { unlock } from '../lock-unlock';
 
-const { DateCalendar } = unlock( componentsPrivateApis );
+const { DateCalendar, ValidatedInputControl } = unlock( componentsPrivateApis );
 
 const parseDateTime = ( dateTimeString?: string ): Date | null => {
 	if ( ! dateTimeString ) {
@@ -48,28 +45,76 @@ const formatDateTime = ( date?: Date | string ): string => {
 	return format( date, "yyyy-MM-dd'T'HH:mm" );
 };
 
-function CalendarDateTimeControl( {
-	id,
-	value,
+function CalendarDateTimeControl< Item >( {
+	data,
+	field,
 	onChange,
-	label,
-	description,
 	hideLabelFromVision,
-}: {
-	id: string;
-	value: string | undefined;
-	onChange: ( value: string | undefined ) => void;
-	label: string;
-	description?: string;
-	hideLabelFromVision?: boolean;
-} ) {
+}: DataFormControlProps< Item > ) {
+	const { id, label, description, setValue, getValue } = field;
+	const fieldValue = getValue( { item: data } );
+	const value = typeof fieldValue === 'string' ? fieldValue : undefined;
+
 	const [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {
 		const parsedDate = parseDateTime( value );
 		return parsedDate || new Date(); // Default to current month
 	} );
 
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedInputControl
+			>[ 'customValidity' ]
+		>( undefined );
+
+	const inputControlRef = useRef< HTMLInputElement >( null );
+	const validationTimeoutRef = useRef< ReturnType< typeof setTimeout > >();
+	const previousFocusRef = useRef< Element | null >( null );
+
+	const onChangeCallback = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( setValue( { item: data, value: newValue } ) ),
+		[ data, onChange, setValue ]
+	);
+
+	// Cleanup timeout on unmount
+	useEffect( () => {
+		return () => {
+			if ( validationTimeoutRef.current ) {
+				clearTimeout( validationTimeoutRef.current );
+			}
+		};
+	}, [] );
+
+	const onValidateControl = useCallback(
+		( newValue: any ) => {
+			const message = field.isValid?.custom?.(
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: newValue,
+					} ) as Partial< Item >
+				),
+				field
+			);
+
+			if ( message ) {
+				setCustomValidity( {
+					type: 'invalid',
+					message,
+				} );
+				return;
+			}
+
+			setCustomValidity( undefined );
+		},
+		[ data, field, setValue ]
+	);
+
 	const onSelectDate = useCallback(
 		( newDate: Date | undefined | null ) => {
+			let dateTimeValue: string | undefined;
 			if ( newDate ) {
 				// Preserve time if it exists in current value, otherwise use current time
 				let finalDateTime = newDate;
@@ -86,13 +131,43 @@ function CalendarDateTimeControl( {
 					}
 				}
 
-				const dateTimeValue = finalDateTime.toISOString();
-				onChange( dateTimeValue );
+				dateTimeValue = finalDateTime.toISOString();
+				onChangeCallback( dateTimeValue );
+				onValidateControl( dateTimeValue );
+
+				// Clear any existing timeout
+				if ( validationTimeoutRef.current ) {
+					clearTimeout( validationTimeoutRef.current );
+				}
 			} else {
-				onChange( undefined );
+				onChangeCallback( undefined );
+				onValidateControl( undefined );
 			}
+			// Save the currently focused element
+			previousFocusRef.current =
+				inputControlRef.current &&
+				inputControlRef.current.ownerDocument.activeElement;
+
+			// Trigger validation display by simulating focus, blur, and changes.
+			// Use a timeout to ensure it runs after the value update.
+			validationTimeoutRef.current = setTimeout( () => {
+				if ( inputControlRef.current ) {
+					inputControlRef.current.focus();
+					inputControlRef.current.blur();
+					onChangeCallback( dateTimeValue );
+					onValidateControl( dateTimeValue );
+
+					// Restore focus to the previously focused element
+					if (
+						previousFocusRef.current &&
+						previousFocusRef.current instanceof HTMLElement
+					) {
+						previousFocusRef.current.focus();
+					}
+				}
+			}, 0 );
 		},
-		[ onChange, value ]
+		[ onChangeCallback, value, onValidateControl ]
 	);
 
 	const handleManualDateTimeChange = useCallback(
@@ -100,7 +175,7 @@ function CalendarDateTimeControl( {
 			if ( newValue ) {
 				// Convert from datetime-local format to ISO string
 				const dateTime = new Date( newValue );
-				onChange( dateTime.toISOString() );
+				onChangeCallback( dateTime.toISOString() );
 
 				// Update calendar month to match
 				const parsedDate = parseDateTime( dateTime.toISOString() );
@@ -108,10 +183,10 @@ function CalendarDateTimeControl( {
 					setCalendarMonth( parsedDate );
 				}
 			} else {
-				onChange( undefined );
+				onChangeCallback( undefined );
 			}
 		},
-		[ onChange ]
+		[ onChangeCallback ]
 	);
 
 	const {
@@ -119,11 +194,16 @@ function CalendarDateTimeControl( {
 		l10n: { startOfWeek },
 	} = getSettings();
 
+	const displayLabel =
+		field.isValid?.required && ! hideLabelFromVision
+			? `${ label } (${ __( 'Required' ) })`
+			: label;
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom
 			id={ id }
-			label={ label }
+			label={ displayLabel }
 			help={ description }
 			hideLabelFromVision={ hideLabelFromVision }
 		>
@@ -141,8 +221,12 @@ function CalendarDateTimeControl( {
 					weekStartsOn={ startOfWeek }
 				/>
 				{ /* Manual datetime input */ }
-				<InputControl
+				<ValidatedInputControl
+					ref={ inputControlRef }
 					__next40pxDefaultSize
+					required={ !! field.isValid?.required }
+					onValidate={ onValidateControl }
+					customValidity={ customValidity }
 					type="datetime-local"
 					label={ __( 'Date time' ) }
 					hideLabelFromVision
@@ -167,42 +251,24 @@ export default function DateTime< Item >( {
 	hideLabelFromVision,
 	operator,
 }: DataFormControlProps< Item > ) {
-	const { id, label, description, getValue, setValue } = field;
-	const value = getValue( { item: data } );
-
-	const onChangeRelativeDateControl = useCallback(
-		( newValue: DateRelative ) =>
-			onChange( setValue( { item: data, value: newValue } ) ),
-		[ data, onChange, setValue ]
-	);
-
-	const onChangeCalendarDateTimeControl = useCallback(
-		( newValue: string | undefined ) =>
-			onChange( setValue( { item: data, value: newValue } ) ),
-		[ data, onChange, setValue ]
-	);
-
 	if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
 		return (
 			<RelativeDateControl
 				className="dataviews-controls__datetime"
-				id={ id }
-				value={ value && typeof value === 'object' ? value : {} }
-				onChange={ onChangeRelativeDateControl }
-				label={ label }
+				data={ data }
+				field={ field }
+				onChange={ onChange }
 				hideLabelFromVision={ hideLabelFromVision }
-				options={ TIME_UNITS_OPTIONS[ operator ] }
+				operator={ operator }
 			/>
 		);
 	}
 
 	return (
 		<CalendarDateTimeControl
-			id={ id }
-			value={ typeof value === 'string' ? value : undefined }
-			onChange={ onChangeCalendarDateTimeControl }
-			label={ label }
-			description={ description }
+			data={ data }
+			field={ field }
+			onChange={ onChange }
 			hideLabelFromVision={ hideLabelFromVision }
 		/>
 	);

package/src/dataform-controls/index.tsx

@@ -19,6 +19,7 @@ import email from './email';
 import telephone from './telephone';
 import url from './url';
 import integer from './integer';
+import number from './number';
 import radio from './radio';
 import select from './select';
 import text from './text';
@@ -43,6 +44,7 @@ const FORM_CONTROLS: FormControls = {
 	telephone,
 	url,
 	integer,
+	number,
 	password,
 	radio,
 	select,

package/src/dataform-controls/integer.tsx

@@ -1,185 +1,9 @@
-/**
- * External dependencies
- */
-import deepMerge from 'deepmerge';
-
-/**
- * WordPress dependencies
- */
-import {
-	Flex,
-	BaseControl,
-	__experimentalNumberControl as NumberControl,
-	privateApis,
-} from '@wordpress/components';
-import { useCallback, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import { OPERATOR_BETWEEN } from '../constants';
 import type { DataFormControlProps } from '../types';
-import { unlock } from '../lock-unlock';
-
-const { ValidatedNumberControl } = unlock( privateApis );
-
-type IntegerBetween = [ number | string, number | string ];
-
-function BetweenControls( {
-	value,
-	onChange,
-	hideLabelFromVision,
-}: {
-	value: IntegerBetween;
-	onChange: ( [ min, max ]: IntegerBetween ) => void;
-	hideLabelFromVision?: boolean;
-} ) {
-	const [ min = '', max = '' ] = value;
-
-	const onChangeMin = useCallback(
-		( newValue: string | undefined ) =>
-			onChange( [ Number( newValue ), max ] ),
-		[ onChange, max ]
-	);
-
-	const onChangeMax = useCallback(
-		( newValue: string | undefined ) =>
-			onChange( [ min, Number( newValue ) ] ),
-		[ onChange, min ]
-	);
-
-	return (
-		<BaseControl
-			__nextHasNoMarginBottom
-			help={ __( 'The max. value must be greater than the min. value.' ) }
-		>
-			<Flex direction="row" gap={ 4 }>
-				<NumberControl
-					label={ __( 'Min.' ) }
-					value={ min }
-					max={ max ? Number( max ) - 1 : undefined }
-					onChange={ onChangeMin }
-					__next40pxDefaultSize
-					hideLabelFromVision={ hideLabelFromVision }
-				/>
-				<NumberControl
-					label={ __( 'Max.' ) }
-					value={ max }
-					min={ min ? Number( min ) + 1 : undefined }
-					onChange={ onChangeMax }
-					__next40pxDefaultSize
-					hideLabelFromVision={ hideLabelFromVision }
-				/>
-			</Flex>
-		</BaseControl>
-	);
-}
-
-export default function Integer< Item >( {
-	data,
-	field,
-	onChange,
-	hideLabelFromVision,
-	operator,
-}: DataFormControlProps< Item > ) {
-	const { label, description, getValue, setValue } = field;
-	const value = getValue( { item: data } ) ?? '';
-	const [ customValidity, setCustomValidity ] =
-		useState<
-			React.ComponentProps<
-				typeof ValidatedNumberControl
-			>[ 'customValidity' ]
-		>( undefined );
-
-	const onChangeControl = useCallback(
-		( newValue: string | undefined ) => {
-			onChange(
-				setValue( {
-					item: data,
-					// Do not convert an empty string or undefined to a number,
-					// otherwise there's a mismatch between the UI control (empty)
-					// and the data relied by onChange (0).
-					value: [ '', undefined ].includes( newValue )
-						? undefined
-						: Number( newValue ),
-				} )
-			);
-		},
-		[ data, onChange, setValue ]
-	);
-
-	const onChangeBetweenControls = useCallback(
-		( newValue: IntegerBetween ) => {
-			onChange(
-				setValue( {
-					item: data,
-					value: newValue,
-				} )
-			);
-		},
-		[ data, onChange, setValue ]
-	);
-
-	const onValidateControl = useCallback(
-		( newValue: any ) => {
-			const message = field.isValid?.custom?.(
-				deepMerge(
-					data,
-					setValue( {
-						item: data,
-						value: [ undefined, '', null ].includes( newValue )
-							? undefined
-							: Number( newValue ),
-					} ) as Partial< Item >
-				),
-				field
-			);
-
-			if ( message ) {
-				setCustomValidity( {
-					type: 'invalid',
-					message,
-				} );
-				return;
-			}
-
-			setCustomValidity( undefined );
-		},
-		[ data, field, setValue ]
-	);
-
-	if ( operator === OPERATOR_BETWEEN ) {
-		let valueBetween: IntegerBetween = [ '', '' ];
-		if (
-			Array.isArray( value ) &&
-			value.length === 2 &&
-			value.every(
-				( element ) => typeof element === 'number' || element === ''
-			)
-		) {
-			valueBetween = value as IntegerBetween;
-		}
-		return (
-			<BetweenControls
-				value={ valueBetween }
-				onChange={ onChangeBetweenControls }
-				hideLabelFromVision={ hideLabelFromVision }
-			/>
-		);
-	}
+import ValidatedNumber from './utils/validated-number';
 
-	return (
-		<ValidatedNumberControl
-			required={ !! field.isValid?.required }
-			onValidate={ onValidateControl }
-			customValidity={ customValidity }
-			label={ label }
-			help={ description }
-			value={ value }
-			onChange={ onChangeControl }
-			__next40pxDefaultSize
-			hideLabelFromVision={ hideLabelFromVision }
-		/>
-	);
+export default function Number< Item >( props: DataFormControlProps< Item > ) {
+	return <ValidatedNumber { ...props } decimals={ 0 } />;
 }

package/src/dataform-controls/number.tsx

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+import ValidatedNumber from './utils/validated-number';
+
+export default function Number< Item >( props: DataFormControlProps< Item > ) {
+	// TODO: remove this hardcoded value when the decimal number is configurable
+	return <ValidatedNumber { ...props } decimals={ 2 } />;
+}

package/src/dataform-controls/select.tsx

@@ -8,7 +8,6 @@ import deepMerge from 'deepmerge';
  */
 import { privateApis } from '@wordpress/components';
 import { useCallback, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -67,25 +66,7 @@ export default function Select< Item >( {
 		[ data, field, setValue ]
 	);
 
-	const fieldElements = field?.elements ?? [];
-	const hasEmptyValue = fieldElements.some(
-		( { value: elementValue } ) => elementValue === ''
-	);
-
-	const elements =
-		hasEmptyValue || isMultiple
-			? fieldElements
-			: [
-					/*
-					 * Value can be undefined when:
-					 *
-					 * - the field is not required
-					 * - in bulk editing
-					 *
-					 */
-					{ label: __( 'Select item' ), value: '' },
-					...fieldElements,
-			  ];
+	const elements = field?.elements ?? [];
 
 	return (
 		<ValidatedSelectControl

package/src/dataform-controls/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/colors" as *;
+
 .dataviews-controls__datetime {
 	border: none;
 	padding: 0;

package/src/dataform-controls/{relative-date-control.tsx → utils/relative-date-control.tsx}

@@ -18,24 +18,17 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';
+import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../../constants';
+import type { DataFormControlProps } from '../../types';
 
-export type DateRelative = {
-	value?: string | number;
-	unit?: string;
-};
+type VALID_OPERATORS = 'inThePast' | 'over';
 
-interface RelativeDateControlProps {
-	id: string;
-	value: DateRelative;
-	onChange: ( args: DateRelative ) => void;
+interface TimeUnitOption {
+	value: string;
 	label: string;
-	hideLabelFromVision?: boolean;
-	options: { value: string; label: string }[];
-	className?: string;
 }
 
-export const TIME_UNITS_OPTIONS = {
+const TIME_UNITS_OPTIONS: Record< VALID_OPERATORS, TimeUnitOption[] > = {
 	[ OPERATOR_IN_THE_PAST ]: [
 		{ value: 'days', label: __( 'Days' ) },
 		{ value: 'weeks', label: __( 'Weeks' ) },
@@ -50,27 +43,46 @@ export const TIME_UNITS_OPTIONS = {
 	],
 };
 
-export default function RelativeDateControl( {
-	id,
-	value,
+export default function RelativeDateControl< Item >( {
+	className,
+	data,
+	field,
 	onChange,
-	label,
 	hideLabelFromVision,
-	options,
-	className,
-}: RelativeDateControlProps ) {
-	const { value: relValue = '', unit = options[ 0 ].value } = value;
+	operator,
+}: DataFormControlProps< Item > & {
+	className: string;
+} ) {
+	const options: TimeUnitOption[] =
+		TIME_UNITS_OPTIONS[
+			operator === OPERATOR_IN_THE_PAST ? 'inThePast' : 'over'
+		];
+
+	const { id, label, getValue, setValue } = field;
+	const fieldValue = getValue( { item: data } );
+	const { value: relValue = '', unit = options[ 0 ].value } =
+		fieldValue && typeof fieldValue === 'object' ? fieldValue : {};
 
 	const onChangeValue = useCallback(
 		( newValue: string | undefined ) =>
-			onChange( { value: Number( newValue ), unit } ),
-		[ onChange, unit ]
+			onChange(
+				setValue( {
+					item: data,
+					value: { value: Number( newValue ), unit },
+				} )
+			),
+		[ onChange, setValue, data, unit ]
 	);
 
 	const onChangeUnit = useCallback(
 		( newUnit: string | undefined ) =>
-			onChange( { value: relValue, unit: newUnit } ),
-		[ onChange, relValue ]
+			onChange(
+				setValue( {
+					item: data,
+					value: { value: relValue, unit: newUnit },
+				} )
+			),
+		[ onChange, setValue, data, relValue ]
 	);
 
 	return (