@wordpress/dataviews 14.0.0 → 14.1.1-next.v.202604091042.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "14.0.0",
+	"version": "14.1.1-next.v.202604091042.0+668146787",
 	"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.19.0",
-		"@wordpress/components": "^32.5.0",
-		"@wordpress/compose": "^7.43.0",
-		"@wordpress/data": "^10.43.0",
-		"@wordpress/date": "^5.43.0",
-		"@wordpress/deprecated": "^4.43.0",
-		"@wordpress/element": "^6.43.0",
-		"@wordpress/i18n": "^6.16.0",
-		"@wordpress/icons": "^12.1.0",
-		"@wordpress/keycodes": "^4.43.0",
-		"@wordpress/primitives": "^4.43.0",
-		"@wordpress/private-apis": "^1.43.0",
-		"@wordpress/ui": "^0.10.0",
-		"@wordpress/warning": "^3.43.0",
+		"@wordpress/base-styles": "^6.19.1-next.v.202604091042.0+668146787",
+		"@wordpress/components": "^32.5.2-next.v.202604091042.0+668146787",
+		"@wordpress/compose": "^7.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/data": "^10.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/date": "^5.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/deprecated": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/element": "^6.44.1-next.v.202604091042.0+668146787",
+		"@wordpress/i18n": "^6.17.1-next.v.202604091042.0+668146787",
+		"@wordpress/icons": "^12.1.1-next.v.202604091042.0+668146787",
+		"@wordpress/keycodes": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/primitives": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/private-apis": "^1.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/ui": "^0.11.1-next.v.202604091042.0+668146787",
+		"@wordpress/warning": "^3.43.1-next.v.202604091042.0+668146787",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -92,5 +92,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "2cea90674d11aa521ec3f71652fb3a6a4c383969"
+	"gitHead": "73606df74f1c38a084bfa5db97205259ef817593"
 }

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

@@ -299,6 +299,7 @@ function CalendarDateControl< Item >( {
 		isValid,
 		format: fieldFormat,
 	} = field;
+	const disabled = field.isDisabled( { item: data, field } );
 	const [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(
 		null
 	);
@@ -406,6 +407,8 @@ function CalendarDateControl< Item >( {
 									variant="tertiary"
 									isPressed={ isSelected }
 									size="small"
+									disabled={ disabled }
+									accessibleWhenDisabled
 									onClick={ () =>
 										handlePresetClick( preset )
 									}
@@ -419,8 +422,8 @@ function CalendarDateControl< Item >( {
 							variant="tertiary"
 							isPressed={ ! selectedPresetId }
 							size="small"
-							disabled={ !! selectedPresetId }
-							accessibleWhenDisabled={ false }
+							disabled={ !! selectedPresetId || disabled }
+							accessibleWhenDisabled
 						>
 							{ __( 'Custom' ) }
 						</Button>
@@ -436,6 +439,7 @@ function CalendarDateControl< Item >( {
 						value={ value }
 						onChange={ handleManualDateChange }
 						required={ !! field.isValid?.required }
+						disabled={ disabled }
 					/>
 
 					{ /* Calendar widget */ }
@@ -449,6 +453,7 @@ function CalendarDateControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezoneString || undefined }
 						weekStartsOn={ weekStartsOn }
+						disabled={ disabled }
 					/>
 				</Stack>
 			</BaseControl>
@@ -472,6 +477,7 @@ function CalendarDateRangeControl< Item >( {
 		setValue,
 		format: fieldFormat,
 	} = field;
+	const disabled = field.isDisabled( { item: data, field } );
 	let value: DateRange;
 	const fieldValue = getValue( { item: data } );
 	if (
@@ -626,6 +632,8 @@ function CalendarDateRangeControl< Item >( {
 									variant="tertiary"
 									isPressed={ isSelected }
 									size="small"
+									disabled={ disabled }
+									accessibleWhenDisabled
 									onClick={ () =>
 										handlePresetClick( preset )
 									}
@@ -639,8 +647,8 @@ function CalendarDateRangeControl< Item >( {
 							variant="tertiary"
 							isPressed={ ! selectedPresetId }
 							size="small"
-							accessibleWhenDisabled={ false }
-							disabled={ !! selectedPresetId }
+							accessibleWhenDisabled
+							disabled={ !! selectedPresetId || disabled }
 						>
 							{ __( 'Custom' ) }
 						</Button>
@@ -664,6 +672,7 @@ function CalendarDateRangeControl< Item >( {
 								handleManualDateChange( 'from', newValue )
 							}
 							required={ !! field.isValid?.required }
+							disabled={ disabled }
 						/>
 						<InputControl
 							__next40pxDefaultSize
@@ -676,6 +685,7 @@ function CalendarDateRangeControl< Item >( {
 								handleManualDateChange( 'to', newValue )
 							}
 							required={ !! field.isValid?.required }
+							disabled={ disabled }
 						/>
 					</Stack>
 
@@ -687,6 +697,7 @@ function CalendarDateRangeControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezone.string || undefined }
 						weekStartsOn={ weekStartsOn }
+						disabled={ disabled }
 					/>
 				</Stack>
 			</BaseControl>

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

@@ -41,6 +41,7 @@ function CalendarDateTimeControl< Item >( {
 }: 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;
 
@@ -179,6 +180,7 @@ function CalendarDateTimeControl< Item >( {
 					hideLabelFromVision
 					value={ formatDateTime( value ) }
 					onChange={ handleManualDateTimeChange }
+					disabled={ disabled }
 				/>
 				{ /* Calendar widget */ }
 				{ ! compact && (
@@ -194,6 +196,7 @@ function CalendarDateTimeControl< Item >( {
 						onMonthChange={ setCalendarMonth }
 						timeZone={ timezoneString || undefined }
 						weekStartsOn={ weekStartsOn }
+						disabled={ disabled }
 					/>
 				) }
 			</Stack>

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/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 }
 		/>
 	);
 }

package/src/components/dataviews-filters/input-widget.tsx

@@ -64,6 +64,10 @@ export default function InputWidget( {
 				...currentField,
 				// Deactivate validation for filters.
 				isValid: {} satisfies NormalizedRules< any >,
+				// Filter controls are always enabled.
+				isDisabled: () => false,
+				// Filter controls are always visible.
+				isVisible: () => true,
 				// Configure getValue/setValue as if Item was a plain object.
 				getValue: ( { item }: { item: any } ) =>
 					item[ currentField.id ],

package/src/components/dataviews-layouts/activity/style.scss

@@ -4,7 +4,7 @@
 
 .dataviews-view-activity {
 	margin: 0 0 auto;
-	padding: $grid-unit-10 $grid-unit-30;
+	padding: 0 $grid-unit-30;
 
 	.dataviews-view-activity__group-header {
 		font-size: $font-size-large;
@@ -104,7 +104,7 @@
 	.dataviews-view-activity__item {
 		&.is-compact {
 			.dataviews-view-activity__item-type {
-				width: $grid-unit-10;
+				width: $grid-unit-15;
 
 				&::before {
 					height: $grid-unit-15;

package/src/components/dataviews-pagination/index.tsx

@@ -72,6 +72,7 @@ export function DataViewsPagination() {
 						),
 						{
 							div: <div aria-hidden />,
+							// @ts-expect-error — Tag injected via sprintf argument, not visible in format string.
 							CurrentPage: (
 								<SelectControl
 									aria-label={ __( 'Current page' ) }

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

@@ -93,6 +93,13 @@ export const LayoutRegular = {
 			description: 'Chooses the label position.',
 			options: [ 'default', 'top', 'side', 'none' ],
 		},
+		disabled: {
+			control: { type: 'boolean' },
+			description: 'Disable all fields in the form.',
+		},
+	},
+	args: {
+		disabled: false,
 	},
 };
 

package/src/dataform/stories/layout-regular.tsx

@@ -312,8 +312,10 @@ const getLayoutFromStoryArgs = ( {
 
 const LayoutRegularComponent = ( {
 	labelPosition,
+	disabled = false,
 }: {
 	labelPosition: 'default' | 'top' | 'side' | 'none';
+	disabled?: boolean;
 } ) => {
 	const [ post, setPost ] = useState( {
 		title: 'Hello, World!',
@@ -332,6 +334,18 @@ const LayoutRegularComponent = ( {
 		description: 'This is a sample description.',
 	} );
 
+	// Make fields disabled when control is set to disabled.
+	const _fields: Field< SamplePost >[] = useMemo( () => {
+		if ( ! disabled ) {
+			return fields;
+		}
+
+		return fields.map( ( field ) => ( {
+			...field,
+			isDisabled: true,
+		} ) );
+	}, [ disabled ] );
+
 	const form: Form = useMemo(
 		() => ( {
 			layout: getLayoutFromStoryArgs( {
@@ -363,7 +377,7 @@ const LayoutRegularComponent = ( {
 	return (
 		<DataForm< SamplePost >
 			data={ post }
-			fields={ fields }
+			fields={ _fields }
 			form={ form }
 			onChange={ ( edits ) =>
 				setPost( ( prev ) => ( {

package/src/field-types/index.tsx

@@ -96,6 +96,10 @@ export default function normalizeFields< Item >(
 			getElements: field.getElements,
 			hasElements: hasElements( field ),
 			isVisible: field.isVisible,
+			isDisabled:
+				typeof field.isDisabled === 'function'
+					? field.isDisabled
+					: () => !! field.isDisabled,
 			enableHiding: field.enableHiding ?? true,
 			readOnly: field.readOnly ?? false,
 			// The type provides defaults for the following props