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

package/src/field-types/stories/index.story.tsx

@@ -66,12 +66,17 @@ const meta = {
 				'Add 10 more elements to push over the threshold and trigger Combobox rendering',
 			if: { arg: 'Edit', eq: 'adaptiveSelect' },
 		},
+		disabled: {
+			control: { type: 'boolean' },
+			description: 'Whether the field controls are disabled.',
+		},
 	},
 	args: {
 		type: 'regular',
 		Edit: 'default',
 		asyncElements: false,
 		manyElements: false,
+		disabled: false,
 	},
 };
 export default meta;
@@ -590,6 +595,7 @@ interface FieldTypeStoryProps {
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 }
 
 const FieldTypeStory = ( {
@@ -598,17 +604,27 @@ const FieldTypeStory = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: FieldTypeStoryProps ) => {
 	const storyFields = useMemo( () => {
 		let fieldsToProcess = _fields;
 
-		if ( Edit !== 'default' ) {
-			fieldsToProcess = _fields.map( ( field: Field< DataType > ) => ( {
+		if ( disabled ) {
+			fieldsToProcess = fieldsToProcess.map( ( field ) => ( {
 				...field,
-				Edit,
+				isDisabled: true,
 			} ) );
 		}
 
+		if ( Edit !== 'default' ) {
+			fieldsToProcess = fieldsToProcess.map(
+				( field: Field< DataType > ) => ( {
+					...field,
+					Edit,
+				} )
+			);
+		}
+
 		// Expand elements when adaptiveSelect is selected and manyElements is toggled
 		if ( Edit === 'adaptiveSelect' && manyElements ) {
 			fieldsToProcess = fieldsToProcess.map( ( field ) => {
@@ -648,7 +664,7 @@ const FieldTypeStory = ( {
 		}
 
 		return fieldsToProcess;
-	}, [ _fields, Edit, asyncElements, manyElements ] );
+	}, [ _fields, Edit, asyncElements, manyElements, disabled ] );
 	const form = useMemo(
 		() => ( {
 			layout: { type },
@@ -756,11 +772,13 @@ export const AllComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	return (
 		<FieldTypeStory
@@ -769,6 +787,7 @@ export const AllComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -779,11 +798,13 @@ export const TextComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const textFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'text' ),
@@ -797,6 +818,7 @@ export const TextComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -808,12 +830,14 @@ export const IntegerComponent = ( {
 	asyncElements,
 	manyElements,
 	formatSeparatorThousand,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
 	formatSeparatorThousand?: string;
+	disabled: boolean;
 } ) => {
 	const integerFields = useMemo(
 		() =>
@@ -840,6 +864,7 @@ export const IntegerComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -863,6 +888,7 @@ export const NumberComponent = ( {
 	formatSeparatorThousand,
 	formatSeparatorDecimal,
 	formatDecimals,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
@@ -871,6 +897,7 @@ export const NumberComponent = ( {
 	formatSeparatorThousand?: string;
 	formatSeparatorDecimal?: string;
 	formatDecimals?: number;
+	disabled: boolean;
 } ) => {
 	const numberFields = useMemo(
 		() =>
@@ -913,6 +940,7 @@ export const NumberComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -945,11 +973,13 @@ export const BooleanComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const booleanFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'boolean' ),
@@ -963,6 +993,7 @@ export const BooleanComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -975,6 +1006,7 @@ export const DateTimeComponent = ( {
 	manyElements,
 	formatDatetime,
 	formatWeekStartsOn,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
@@ -982,6 +1014,7 @@ export const DateTimeComponent = ( {
 	manyElements: boolean;
 	formatDatetime?: string;
 	formatWeekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+	disabled: boolean;
 } ) => {
 	const datetimeFields = useMemo(
 		() =>
@@ -1006,7 +1039,7 @@ export const DateTimeComponent = ( {
 					}
 					return field;
 				} ),
-		[ fields, formatDatetime, formatWeekStartsOn ]
+		[ formatDatetime, formatWeekStartsOn ]
 	);
 
 	return (
@@ -1016,6 +1049,7 @@ export const DateTimeComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1054,6 +1088,7 @@ export const DateComponent = ( {
 	manyElements,
 	formatDate,
 	formatWeekStartsOn,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
@@ -1061,6 +1096,7 @@ export const DateComponent = ( {
 	manyElements: boolean;
 	formatDate?: string;
 	formatWeekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+	disabled: boolean;
 } ) => {
 	const dateFields = useMemo(
 		() =>
@@ -1095,6 +1131,7 @@ export const DateComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1131,11 +1168,13 @@ export const EmailComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const emailFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'email' ),
@@ -1149,6 +1188,7 @@ export const EmailComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1159,11 +1199,13 @@ export const TelephoneComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const telephoneFields = fields.filter( ( field ) =>
 		field.id.startsWith( 'telephone' )
@@ -1176,6 +1218,7 @@ export const TelephoneComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1186,11 +1229,13 @@ export const UrlComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const urlFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'url' ),
@@ -1204,6 +1249,7 @@ export const UrlComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1214,11 +1260,13 @@ export const ColorComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const colorFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'color' ),
@@ -1232,6 +1280,7 @@ export const ColorComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1242,11 +1291,13 @@ export const MediaComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const mediaFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'media' ),
@@ -1260,6 +1311,7 @@ export const MediaComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1270,11 +1322,13 @@ export const ArrayComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const arrayTextFields = useMemo(
 		() => fields.filter( ( field ) => field.type === 'array' ),
@@ -1288,6 +1342,7 @@ export const ArrayComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1298,11 +1353,13 @@ export const PasswordComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const passwordFields = fields.filter( ( field ) =>
 		field.id.startsWith( 'password' )
@@ -1315,6 +1372,7 @@ export const PasswordComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };
@@ -1325,11 +1383,13 @@ export const NoTypeComponent = ( {
 	Edit,
 	asyncElements,
 	manyElements,
+	disabled,
 }: {
 	type: PanelTypes;
 	Edit: ControlTypes;
 	asyncElements: boolean;
 	manyElements: boolean;
+	disabled: boolean;
 } ) => {
 	const noTypeFields = useMemo(
 		() => fields.filter( ( field ) => field.type === undefined ),
@@ -1343,6 +1403,7 @@ export const NoTypeComponent = ( {
 			Edit={ Edit }
 			asyncElements={ asyncElements }
 			manyElements={ manyElements }
+			disabled={ disabled }
 		/>
 	);
 };

package/src/types/field-api.ts

@@ -244,6 +244,18 @@ export type Field< Item > = {
 	 */
 	isVisible?: ( item: Item ) => boolean;
 
+	/**
+	 * Whether a field should be disabled.
+	 * Can be a boolean or a callback receiving the current item and field.
+	 * Defaults to false.
+	 */
+	isDisabled?:
+		| boolean
+		| ( ( args: {
+				item: Item;
+				field: NormalizedField< Item >;
+		  } ) => boolean );
+
 	/**
 	 * Whether the field is sortable.
 	 */
@@ -380,6 +392,10 @@ export type NormalizedField< Item > = Omit<
 	filterBy: Required< FilterByConfig > | false;
 	filter: FilterOperatorMap< Item >;
 	readOnly: boolean;
+	isDisabled: ( args: {
+		item: Item;
+		field: NormalizedField< Item >;
+	} ) => boolean;
 	format:
 		| {}
 		| Required< FormatDate >