@wordpress/dataviews 13.1.1-next.v.202603161435.0 → 14.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "13.1.1-next.v.202603161435.0+ab4981c4f",
+	"version": "14.1.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",
@@ -53,20 +53,20 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.21",
-		"@wordpress/base-styles": "^6.17.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/components": "^32.4.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/compose": "^7.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/data": "^10.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/date": "^5.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/deprecated": "^4.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/element": "^6.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/i18n": "^6.14.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/icons": "^12.0.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/keycodes": "^4.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/primitives": "^4.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/private-apis": "^1.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/ui": "^0.9.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/warning": "^3.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/base-styles": "^6.20.0",
+		"@wordpress/components": "^32.6.0",
+		"@wordpress/compose": "^7.44.0",
+		"@wordpress/data": "^10.44.0",
+		"@wordpress/date": "^5.44.0",
+		"@wordpress/deprecated": "^4.44.0",
+		"@wordpress/element": "^6.44.0",
+		"@wordpress/i18n": "^6.17.0",
+		"@wordpress/icons": "^12.2.0",
+		"@wordpress/keycodes": "^4.44.0",
+		"@wordpress/primitives": "^4.44.0",
+		"@wordpress/private-apis": "^1.44.0",
+		"@wordpress/ui": "^0.11.0",
+		"@wordpress/warning": "^3.44.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -75,12 +75,12 @@
 		"remove-accents": "^0.5.0"
 	},
 	"devDependencies": {
-		"@storybook/addon-docs": "^10.1.11",
-		"@storybook/react-vite": "^10.1.11",
+		"@storybook/addon-docs": "^10.2.8",
+		"@storybook/react-vite": "^10.2.8",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
 		"esbuild": "^0.27.2",
-		"storybook": "^10.1.11"
+		"storybook": "^10.2.8"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -92,5 +92,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "748f4e4564fcc0e6ae90200d90bb993a3cef5828"
+	"gitHead": "b862d8c84121a47bbeff882f6c87e61681ce2e0d"
 }

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

@@ -24,6 +24,7 @@ export default function ArrayControl< Item >( {
 }: DataFormControlProps< Item > ) {
 	const { label, placeholder, getValue, setValue, isValid } = field;
 	const value = getValue( { item: data } );
+	const disabled = field.isDisabled( { item: data, field } );
 
 	const { elements, isLoading } = useElements( {
 		elements: field.elements,
@@ -73,6 +74,7 @@ export default function ArrayControl< Item >( {
 			onChange={ onChangeControl }
 			placeholder={ placeholder }
 			suggestions={ elements?.map( ( element ) => element.value ) }
+			disabled={ disabled }
 			__experimentalValidateInput={ ( token: string ) => {
 				// If elements validation is required, check if token is valid
 				if ( field.isValid?.elements && elements ) {

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

@@ -22,6 +22,7 @@ export default function Checkbox< Item >( {
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { getValue, setValue, label, description, isValid } = field;
+	const disabled = field.isDisabled( { item: data, field } );
 
 	const onChangeControl = useCallback( () => {
 		onChange(
@@ -39,6 +40,7 @@ export default function Checkbox< Item >( {
 			help={ description }
 			checked={ getValue( { item: data } ) }
 			onChange={ onChangeControl }
+			disabled={ disabled }
 		/>
 	);
 }

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

@@ -30,9 +30,11 @@ const { ValidatedInputControl } = unlock( privateApis );
 const ColorPickerDropdown = ( {
 	color,
 	onColorChange,
+	disabled,
 }: {
 	color: string;
 	onColorChange: ( newColor: string ) => void;
+	disabled?: boolean;
 } ) => {
 	const validColor = color && colord( color ).isValid() ? color : '#ffffff';
 
@@ -45,6 +47,8 @@ const ColorPickerDropdown = ( {
 					onClick={ onToggle }
 					aria-label={ __( 'Open color picker' ) }
 					size="small"
+					disabled={ disabled }
+					accessibleWhenDisabled
 					icon={ () => <ColorIndicator colorValue={ validColor } /> }
 				/>
 			) }
@@ -70,6 +74,7 @@ export default function Color< Item >( {
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, placeholder, description, setValue, isValid } = field;
+	const disabled = field.isDisabled( { item: data, field } );
 	const value = field.getValue( { item: data } ) || '';
 
 	const handleColorChange = useCallback(
@@ -98,11 +103,13 @@ export default function Color< Item >( {
 			onChange={ handleInputChange }
 			hideLabelFromVision={ hideLabelFromVision }
 			type="text"
+			disabled={ disabled }
 			prefix={
 				<InputControlPrefixWrapper variant="control">
 					<ColorPickerDropdown
 						color={ value }
 						onColorChange={ handleColorChange }
+						disabled={ disabled }
 					/>
 				</InputControlPrefixWrapper>
 			}

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

@@ -38,6 +38,7 @@ import { Stack } from '@wordpress/ui';
  * Internal dependencies
  */
 import RelativeDateControl from './utils/relative-date-control';
+import useDisabledDateMatchers from './utils/use-disabled-date-matchers';
 import {
 	OPERATOR_IN_THE_PAST,
 	OPERATOR_OVER,
@@ -299,6 +300,7 @@ function CalendarDateControl< Item >( {
 		isValid,
 		format: fieldFormat,
 	} = field;
+	const disabled = field.isDisabled( { item: data, field } );
 	const [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(
 		null
 	);
@@ -317,6 +319,9 @@ function CalendarDateControl< Item >( {
 	const [ isTouched, setIsTouched ] = useState( false );
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 
+	const { minConstraint, maxConstraint, disabledMatchers } =
+		useDisabledDateMatchers( isValid, parseDate );
+
 	const onChangeCallback = useCallback(
 		( newValue: string | undefined ) =>
 			onChange( setValue( { item: data, value: newValue } ) ),
@@ -406,6 +411,8 @@ function CalendarDateControl< Item >( {
 									variant="tertiary"
 									isPressed={ isSelected }
 									size="small"
+									disabled={ disabled }
+									accessibleWhenDisabled
 									onClick={ () =>
 										handlePresetClick( preset )
 									}
@@ -419,8 +426,8 @@ function CalendarDateControl< Item >( {
 							variant="tertiary"
 							isPressed={ ! selectedPresetId }
 							size="small"
-							disabled={ !! selectedPresetId }
-							accessibleWhenDisabled={ false }
+							disabled={ !! selectedPresetId || disabled }
+							accessibleWhenDisabled
 						>
 							{ __( 'Custom' ) }
 						</Button>
@@ -436,6 +443,9 @@ function CalendarDateControl< Item >( {
 						value={ value }
 						onChange={ handleManualDateChange }
 						required={ !! field.isValid?.required }
+						disabled={ disabled }
+						min={ minConstraint }
+						max={ maxConstraint }
 					/>
 
 					{ /* Calendar widget */ }
@@ -449,6 +459,8 @@ function CalendarDateControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezoneString || undefined }
 						weekStartsOn={ weekStartsOn }
+						disabled={ disabled || disabledMatchers }
+						disableNavigation={ disabled }
 					/>
 				</Stack>
 			</BaseControl>
@@ -470,8 +482,10 @@ function CalendarDateRangeControl< Item >( {
 		description,
 		getValue,
 		setValue,
+		isValid,
 		format: fieldFormat,
 	} = field;
+	const disabled = field.isDisabled( { item: data, field } );
 	let value: DateRange;
 	const fieldValue = getValue( { item: data } );
 	if (
@@ -486,6 +500,9 @@ function CalendarDateRangeControl< Item >( {
 		( fieldFormat as FormatDate ).weekStartsOn ??
 		getSettings().l10n.startOfWeek;
 
+	const { minConstraint, maxConstraint, disabledMatchers } =
+		useDisabledDateMatchers( isValid, parseDate );
+
 	const onChangeCallback = useCallback(
 		( newValue: DateRange ) => {
 			onChange(
@@ -626,6 +643,8 @@ function CalendarDateRangeControl< Item >( {
 									variant="tertiary"
 									isPressed={ isSelected }
 									size="small"
+									disabled={ disabled }
+									accessibleWhenDisabled
 									onClick={ () =>
 										handlePresetClick( preset )
 									}
@@ -639,8 +658,8 @@ function CalendarDateRangeControl< Item >( {
 							variant="tertiary"
 							isPressed={ ! selectedPresetId }
 							size="small"
-							accessibleWhenDisabled={ false }
-							disabled={ !! selectedPresetId }
+							accessibleWhenDisabled
+							disabled={ !! selectedPresetId || disabled }
 						>
 							{ __( 'Custom' ) }
 						</Button>
@@ -664,6 +683,9 @@ function CalendarDateRangeControl< Item >( {
 								handleManualDateChange( 'from', newValue )
 							}
 							required={ !! field.isValid?.required }
+							disabled={ disabled }
+							min={ minConstraint }
+							max={ maxConstraint }
 						/>
 						<InputControl
 							__next40pxDefaultSize
@@ -676,6 +698,9 @@ function CalendarDateRangeControl< Item >( {
 								handleManualDateChange( 'to', newValue )
 							}
 							required={ !! field.isValid?.required }
+							disabled={ disabled }
+							min={ minConstraint }
+							max={ maxConstraint }
 						/>
 					</Stack>
 
@@ -687,6 +712,7 @@ function CalendarDateRangeControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezone.string || undefined }
 						weekStartsOn={ weekStartsOn }
+						disabled={ disabled || disabledMatchers }
 					/>
 				</Stack>
 			</BaseControl>

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

@@ -16,6 +16,7 @@ import { Stack } from '@wordpress/ui';
 import type { DataFormControlProps, FormatDatetime } from '../../types';
 import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../../constants';
 import RelativeDateControl from './utils/relative-date-control';
+import useDisabledDateMatchers from './utils/use-disabled-date-matchers';
 import getCustomValidity from './utils/get-custom-validity';
 import parseDateTime from '../../field-types/utils/parse-date-time';
 import { unlock } from '../../lock-unlock';
@@ -37,8 +38,11 @@ function CalendarDateTimeControl< Item >( {
 	hideLabelFromVision,
 	markWhenOptional,
 	validity,
+	config,
 }: DataFormControlProps< Item > ) {
+	const { compact } = config || {};
 	const { id, label, description, setValue, getValue, isValid } = field;
+	const disabled = field.isDisabled( { item: data, field } );
 	const fieldValue = getValue( { item: data } );
 	const value = typeof fieldValue === 'string' ? fieldValue : undefined;
 
@@ -52,6 +56,9 @@ function CalendarDateTimeControl< Item >( {
 		useRef< ReturnType< typeof setTimeout > >( undefined );
 	const previousFocusRef = useRef< Element | null >( null );
 
+	const { minConstraint, maxConstraint, disabledMatchers } =
+		useDisabledDateMatchers( isValid, parseDateTime );
+
 	const onChangeCallback = useCallback(
 		( newValue: string | undefined ) =>
 			onChange( setValue( { item: data, value: newValue } ) ),
@@ -177,19 +184,35 @@ function CalendarDateTimeControl< Item >( {
 					hideLabelFromVision
 					value={ formatDateTime( value ) }
 					onChange={ handleManualDateTimeChange }
-				/>
-				{ /* Calendar widget */ }
-				<DateCalendar
-					style={ { width: '100%' } }
-					selected={
-						value ? parseDateTime( value ) || undefined : undefined
+					disabled={ disabled }
+					min={
+						minConstraint
+							? formatDateTime( minConstraint )
+							: undefined
+					}
+					max={
+						maxConstraint
+							? formatDateTime( maxConstraint )
+							: undefined
 					}
-					onSelect={ onSelectDate }
-					month={ calendarMonth }
-					onMonthChange={ setCalendarMonth }
-					timeZone={ timezoneString || undefined }
-					weekStartsOn={ weekStartsOn }
 				/>
+				{ /* Calendar widget */ }
+				{ ! compact && (
+					<DateCalendar
+						style={ { width: '100%' } }
+						selected={
+							value
+								? parseDateTime( value ) || undefined
+								: undefined
+						}
+						onSelect={ onSelectDate }
+						month={ calendarMonth }
+						onMonthChange={ setCalendarMonth }
+						timeZone={ timezoneString || undefined }
+						weekStartsOn={ weekStartsOn }
+						disabled={ disabled || disabledMatchers }
+					/>
+				) }
 			</Stack>
 		</BaseControl>
 	);
@@ -203,6 +226,7 @@ export default function DateTime< Item >( {
 	markWhenOptional,
 	operator,
 	validity,
+	config,
 }: DataFormControlProps< Item > ) {
 	if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
 		return (
@@ -225,6 +249,7 @@ export default function DateTime< Item >( {
 			hideLabelFromVision={ hideLabelFromVision }
 			markWhenOptional={ markWhenOptional }
 			validity={ validity }
+			config={ config }
 		/>
 	);
 }

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

@@ -23,6 +23,7 @@ export default function Password< Item >( {
 	validity,
 }: DataFormControlProps< Item > ) {
 	const [ isVisible, setIsVisible ] = useState( false );
+	const disabled = field.isDisabled( { item: data, field } );
 
 	const toggleVisibility = useCallback( () => {
 		setIsVisible( ( prev ) => ! prev );
@@ -49,6 +50,8 @@ export default function Password< Item >( {
 									? __( 'Hide password' )
 									: __( 'Show password' )
 							}
+							disabled={ disabled }
+							accessibleWhenDisabled
 						/>
 					</InputControlSuffixWrapper>
 				),

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

@@ -23,6 +23,7 @@ export default function Radio< Item >( {
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, description, getValue, setValue, isValid } = field;
+	const disabled = field.isDisabled( { item: data, field } );
 	const { elements, isLoading } = useElements( {
 		elements: field.elements,
 		getElements: field.getElements,
@@ -50,6 +51,7 @@ export default function Radio< Item >( {
 			options={ elements }
 			selected={ value }
 			hideLabelFromVision={ hideLabelFromVision }
+			disabled={ disabled }
 		/>
 	);
 }

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

@@ -23,6 +23,7 @@ export default function Select< Item >( {
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { type, label, description, getValue, setValue, isValid } = field;
+	const disabled = field.isDisabled( { item: data, field } );
 
 	const isMultiple = type === 'array';
 	const value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );
@@ -55,6 +56,7 @@ export default function Select< Item >( {
 			__next40pxDefaultSize
 			hideLabelFromVision={ hideLabelFromVision }
 			multiple={ isMultiple }
+			disabled={ disabled }
 		/>
 	);
 }

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

@@ -23,6 +23,7 @@ export default function Textarea< Item >( {
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { rows = 4 } = config || {};
+	const disabled = field.isDisabled( { item: data, field } );
 	const { label, placeholder, description, setValue, isValid } = field;
 	const value = field.getValue( { item: data } );
 
@@ -43,6 +44,7 @@ export default function Textarea< Item >( {
 			help={ description }
 			onChange={ onChangeControl }
 			rows={ rows }
+			disabled={ disabled }
 			minLength={
 				isValid.minLength ? isValid.minLength.constraint : undefined
 			}

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

@@ -27,6 +27,7 @@ export default function ToggleGroup< Item >( {
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { getValue, setValue, isValid } = field;
+	const disabled = field.isDisabled( { item: data, field } );
 	const value = getValue( { item: data } );
 
 	const onChangeControl = useCallback(
@@ -67,6 +68,7 @@ export default function ToggleGroup< Item >( {
 					key={ el.value }
 					label={ el.label }
 					value={ el.value }
+					disabled={ disabled }
 				/>
 			) ) }
 		</ValidatedToggleGroupControl>

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

@@ -22,6 +22,7 @@ export default function Toggle< Item >( {
 	validity,
 }: DataFormControlProps< Item > ) {
 	const { label, description, getValue, setValue, isValid } = field;
+	const disabled = field.isDisabled( { item: data, field } );
 
 	const onChangeControl = useCallback( () => {
 		onChange(
@@ -39,6 +40,7 @@ export default function Toggle< Item >( {
 			help={ description }
 			checked={ getValue( { item: data } ) }
 			onChange={ onChangeControl }
+			disabled={ disabled }
 		/>
 	);
 }

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

@@ -59,6 +59,7 @@ export default function RelativeDateControl< Item >( {
 		];
 
 	const { id, label, description, getValue, setValue } = field;
+	const disabled = field.isDisabled( { item: data, field } );
 	const fieldValue = getValue( { item: data } );
 	const { value: relValue = '', unit = options[ 0 ].value } =
 		fieldValue && typeof fieldValue === 'object' ? fieldValue : {};
@@ -102,6 +103,7 @@ export default function RelativeDateControl< Item >( {
 					step={ 1 }
 					value={ relValue }
 					onChange={ onChangeValue }
+					disabled={ disabled }
 				/>
 				<SelectControl
 					className="dataviews-controls__relative-date-unit"
@@ -111,6 +113,7 @@ export default function RelativeDateControl< Item >( {
 					options={ options }
 					onChange={ onChangeUnit }
 					hideLabelFromVision
+					disabled={ disabled }
 				/>
 			</Stack>
 		</BaseControl>

package/src/components/dataform-controls/utils/use-disabled-date-matchers.ts

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedRules } from '../../../types';
+
+type DateMatcher = { before: Date } | { after: Date };
+
+export default function useDisabledDateMatchers< Item >(
+	isValid: NormalizedRules< Item >,
+	parseDateFn: ( dateString?: string ) => Date | null
+): {
+	minConstraint: string | undefined;
+	maxConstraint: string | undefined;
+	disabledMatchers: DateMatcher[] | undefined;
+} {
+	const minConstraint =
+		typeof isValid.min?.constraint === 'string'
+			? isValid.min.constraint
+			: undefined;
+	const maxConstraint =
+		typeof isValid.max?.constraint === 'string'
+			? isValid.max.constraint
+			: undefined;
+
+	const disabledMatchers = useMemo( () => {
+		const matchers: DateMatcher[] = [];
+		if ( minConstraint ) {
+			const minDate = parseDateFn( minConstraint );
+			if ( minDate ) {
+				matchers.push( { before: minDate } );
+			}
+		}
+		if ( maxConstraint ) {
+			const maxDate = parseDateFn( maxConstraint );
+			if ( maxDate ) {
+				matchers.push( { after: maxDate } );
+			}
+		}
+		return matchers.length > 0 ? matchers : undefined;
+	}, [ minConstraint, maxConstraint, parseDateFn ] );
+
+	return { minConstraint, maxConstraint, disabledMatchers };
+}

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

@@ -43,6 +43,7 @@ export default function ValidatedText< Item >( {
 	const { label, placeholder, description, getValue, setValue, isValid } =
 		field;
 	const value = getValue( { item: data } );
+	const disabled = field.isDisabled( { item: data, field } );
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
@@ -69,6 +70,7 @@ export default function ValidatedText< Item >( {
 			type={ type }
 			prefix={ prefix }
 			suffix={ suffix }
+			disabled={ disabled }
 			pattern={ isValid.pattern ? isValid.pattern.constraint : undefined }
 			minLength={
 				isValid.minLength ? isValid.minLength.constraint : undefined

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

@@ -96,6 +96,7 @@ export default function ValidatedNumber< Item >( {
 	const step = Math.pow( 10, Math.abs( decimals ) * -1 );
 	const { label, description, getValue, setValue, isValid } = field;
 	const value = getValue( { item: data } ) ?? '';
+	const disabled = field.isDisabled( { item: data, field } );
 
 	const onChangeControl = useCallback(
 		( newValue: string | undefined ) => {
@@ -161,6 +162,7 @@ export default function ValidatedNumber< Item >( {
 			step={ step }
 			min={ isValid.min ? isValid.min.constraint : undefined }
 			max={ isValid.max ? isValid.max.constraint : undefined }
+			disabled={ disabled }
 		/>
 	);
 }