@wordpress/dataviews 14.0.0 → 14.1.0

package/src/components/dataviews-layouts/picker-grid/index.tsx

@@ -78,14 +78,10 @@ function GridItem< Item >( {
 }: GridItemProps< Item > ) {
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const id = getItemId( item );
-	const elementRef = useRef< HTMLElement | null >( null );
+	const elementRef = useRef< HTMLButtonElement >( null );
 
 	const isSelected = selection.includes( id );
 
-	const setElementRef = ( element: HTMLElement | null ) => {
-		elementRef.current = element;
-	};
-
 	useIntersectionObserver( elementRef, posinset );
 
 	const renderedMediaField = mediaField?.render ? (
@@ -102,7 +98,7 @@ function GridItem< Item >( {
 
 	return (
 		<Composite.Item
-			ref={ setElementRef }
+			ref={ elementRef }
 			aria-label={
 				titleField
 					? titleField.getValue( { item } ) || __( '(no title)' )

package/src/components/dataviews-layouts/picker-grid/style.scss

@@ -174,7 +174,7 @@
 }
 
 .dataviews-view-picker-grid__media--clickable {
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 }
 
 .dataviews-view-picker-grid-group__header {

package/src/components/dataviews-layouts/picker-table/index.tsx

@@ -100,11 +100,7 @@ function TableRow< Item >( {
 	const isSelected = selection.includes( id );
 
 	const [ isHovered, setIsHovered ] = useState( false );
-	const elementRef = useRef< HTMLElement | null >( null );
-
-	const setElementRef = ( element: HTMLElement | null ) => {
-		elementRef.current = element;
-	};
+	const elementRef = useRef< HTMLButtonElement >( null );
 
 	useIntersectionObserver( elementRef, posinset );
 	const {
@@ -129,7 +125,7 @@ function TableRow< Item >( {
 	return (
 		<Composite.Item
 			key={ id }
-			ref={ setElementRef }
+			ref={ elementRef }
 			render={ ( { children, ...props } ) => (
 				<tr
 					className={ clsx( 'dataviews-view-table__row', {
@@ -162,6 +158,7 @@ function TableRow< Item >( {
 		>
 			<td
 				className="dataviews-view-table__checkbox-column"
+				// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
 				role="presentation"
 			>
 				<div className="dataviews-view-table__cell-content-wrapper">
@@ -179,7 +176,10 @@ function TableRow< Item >( {
 			</td>
 
 			{ hasPrimaryColumn && (
-				<td role="presentation">
+				<td
+					// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+					role="presentation"
+				>
 					<ColumnPrimary
 						item={ item }
 						titleField={ showTitle ? titleField : undefined }
@@ -204,6 +204,7 @@ function TableRow< Item >( {
 							maxWidth,
 							minWidth,
 						} }
+						// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
 						role="presentation"
 					>
 						<TableColumnField
@@ -414,6 +415,7 @@ function ViewPickerTable< Item >( {
 											1
 										}
 										className="dataviews-view-table__group-header-cell"
+										// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
 										role="presentation"
 									>
 										{ view.groupBy?.showLabel === false

package/src/components/dataviews-layouts/picker-table/style.scss

@@ -36,7 +36,7 @@
 
 	// When used in picker context, ensure row selection works as expected
 	.dataviews-view-table__row {
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 
 		&.is-selected {
 			// Ensure selected rows are visually distinct

package/src/components/dataviews-layouts/table/index.tsx

@@ -267,7 +267,6 @@ function TableRow< Item >( {
 				// itself (to toggle row selection) without erroneously
 				// intercepting click events from ItemActions.
 
-				/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 				<td
 					className={ clsx( 'dataviews-view-table__actions-column', {
 						'dataviews-view-table__actions-column--sticky': true,
@@ -278,7 +277,6 @@ function TableRow< Item >( {
 				>
 					<ItemActions item={ item } actions={ actions } />
 				</td>
-				/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 			) }
 		</tr>
 	);

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/content.story.tsx

@@ -297,7 +297,7 @@ export const HighLevelHelpText: Story = {
 				fields: [
 					{
 						id: 'accountForm',
-						label: 'Account Information',
+						label: 'Account information',
 						description:
 							'We collect this information to create your account and provide personalized services. Your data will be kept secure and used only for account management and service improvements.',
 						children: [ 'name', 'email', 'phone' ],

package/src/dataform/stories/data-adapter.tsx

@@ -54,17 +54,17 @@ const DataAdapterComponent = () => {
 		// for nested data based on the field id.
 		{
 			id: 'user.profile.name',
-			label: 'User Name',
+			label: 'User name',
 			type: 'text',
 		},
 		{
 			id: 'user.profile.email',
-			label: 'User Email',
+			label: 'User email',
 			type: 'email',
 		},
 		{
 			id: 'user.profile.tags',
-			label: 'User Tags',
+			label: 'User tags',
 			type: 'array',
 			placeholder: 'Enter comma-separated tags',
 			description:
@@ -101,13 +101,13 @@ const DataAdapterComponent = () => {
 		// Example of deriving data by leveraging setValue method.
 		{
 			id: 'revenue.total',
-			label: 'Total Revenue',
+			label: 'Total revenue',
 			type: 'integer',
 			readOnly: true,
 		},
 		{
 			id: 'revenue.pricePerUnit',
-			label: 'Price Per Unit',
+			label: 'Price per unit',
 			type: 'integer',
 			setValue: ( { item, value } ) => ( {
 				revenue: {
@@ -174,7 +174,7 @@ const DataAdapterComponent = () => {
 					fields: [
 						{
 							id: 'userProfile',
-							label: 'User Profile',
+							label: 'User profile',
 							children: [
 								'user.profile.name',
 								'user.profile.email',

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-card.tsx

@@ -44,7 +44,7 @@ const LayoutCardComponent = ( {
 	const customerFields: Field< Customer >[] = [
 		{
 			id: 'name',
-			label: 'Customer Name',
+			label: 'Customer name',
 			type: 'text',
 		},
 		{
@@ -70,17 +70,17 @@ const LayoutCardComponent = ( {
 		},
 		{
 			id: 'shippingAddress',
-			label: 'Shipping Address',
+			label: 'Shipping address',
 			type: 'text',
 		},
 		{
 			id: 'billingAddress',
-			label: 'Billing Address',
+			label: 'Billing address',
 			type: 'text',
 		},
 		{
 			id: 'displayPayments',
-			label: 'Display Payments?',
+			label: 'Display payments?',
 			type: 'boolean',
 		},
 		{
@@ -112,7 +112,7 @@ const LayoutCardComponent = ( {
 		},
 		{
 			id: 'dueDate',
-			label: 'Due Date',
+			label: 'Due date',
 			type: 'text',
 			render: ( { item } ) => {
 				return <Badge>Due on: { item.dueDate }</Badge>;

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

@@ -123,7 +123,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'filesize',
-		label: 'File Size',
+		label: 'File size',
 		type: 'integer',
 		readOnly: true,
 	},
@@ -170,7 +170,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'longDescription',
-		label: 'Long Description',
+		label: 'Long description',
 		type: 'text',
 		Edit: {
 			control: 'textarea',
@@ -179,7 +179,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'comment_status',
-		label: 'Comment Status',
+		label: 'Comment status',
 		type: 'text',
 		Edit: 'radio',
 		elements: [
@@ -189,7 +189,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'ping_status',
-		label: 'Allow Pings/Trackbacks',
+		label: 'Allow pings/trackbacks',
 		type: 'boolean',
 	},
 	{
@@ -223,7 +223,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'flight_status',
-		label: 'Flight Status',
+		label: 'Flight status',
 		type: 'text',
 		Edit: 'radio',
 		elements: [

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

@@ -133,7 +133,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'filesize',
-		label: 'File Size',
+		label: 'File size',
 		type: 'integer',
 		readOnly: true,
 	},
@@ -180,7 +180,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'longDescription',
-		label: 'Long Description',
+		label: 'Long description',
 		type: 'text',
 		Edit: {
 			control: 'textarea',
@@ -189,7 +189,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'comment_status',
-		label: 'Comment Status',
+		label: 'Comment status',
 		type: 'text',
 		Edit: 'radio',
 		elements: [
@@ -199,7 +199,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'ping_status',
-		label: 'Allow Pings/Trackbacks',
+		label: 'Allow pings/trackbacks',
 		type: 'boolean',
 	},
 	{
@@ -233,7 +233,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'flight_status',
-		label: 'Flight Status',
+		label: 'Flight status',
 		type: 'text',
 		Edit: 'radio',
 		elements: [
@@ -360,7 +360,7 @@ const LayoutPanelComponent = ( {
 				'title',
 				{
 					id: 'status',
-					label: 'Status & Visibility',
+					label: 'Status & visibility',
 					children: [ 'status', 'password' ],
 				},
 				'order',
@@ -375,12 +375,12 @@ const LayoutPanelComponent = ( {
 				},
 				{
 					id: 'address1',
-					label: 'Combined Address',
+					label: 'Combined address',
 					children: [ 'address1', 'address2', 'city' ],
 				},
 				{
 					id: 'flight_info',
-					label: 'Flight Information',
+					label: 'Flight information',
 					children: [
 						'origin',
 						'destination',
@@ -396,7 +396,7 @@ const LayoutPanelComponent = ( {
 				},
 				{
 					id: 'passenger_details',
-					label: 'Passenger Details',
+					label: 'Passenger details',
 					children: [ 'author', 'seat' ],
 					layout: getPanelLayoutFromStoryArgs( {
 						summary: [ 'author', 'seat' ],

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

@@ -55,11 +55,16 @@ const fields: Field< SamplePost >[] = [
 	{
 		id: 'date',
 		label: 'Date',
+		type: 'date',
+	},
+	{
+		id: 'datetime',
+		label: 'DateTime',
 		type: 'datetime',
 	},
 	{
 		id: 'birthdate',
-		label: 'Date as options',
+		label: 'DateTime as options',
 		type: 'datetime',
 		elements: [
 			{ value: '', label: 'Select a date' },
@@ -126,11 +131,11 @@ const fields: Field< SamplePost >[] = [
 		id: 'can_comment',
 		label: 'Allow people to leave a comment',
 		type: 'boolean',
-		Edit: 'checkbox',
+		Edit: 'toggle',
 	},
 	{
 		id: 'filesize',
-		label: 'File Size',
+		label: 'File size',
 		type: 'integer',
 		readOnly: true,
 	},
@@ -177,7 +182,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'longDescription',
-		label: 'Long Description',
+		label: 'Long description',
 		type: 'text',
 		Edit: {
 			control: 'textarea',
@@ -186,7 +191,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'comment_status',
-		label: 'Comment Status',
+		label: 'Comment status',
 		type: 'text',
 		Edit: 'radio',
 		elements: [
@@ -196,7 +201,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'ping_status',
-		label: 'Allow Pings/Trackbacks',
+		label: 'Allow pings/trackbacks',
 		type: 'boolean',
 	},
 	{
@@ -230,7 +235,7 @@ const fields: Field< SamplePost >[] = [
 	},
 	{
 		id: 'flight_status',
-		label: 'Flight Status',
+		label: 'Flight status',
 		type: 'text',
 		Edit: 'radio',
 		elements: [
@@ -312,8 +317,10 @@ const getLayoutFromStoryArgs = ( {
 
 const LayoutRegularComponent = ( {
 	labelPosition,
+	disabled = false,
 }: {
 	labelPosition: 'default' | 'top' | 'side' | 'none';
+	disabled?: boolean;
 } ) => {
 	const [ post, setPost ] = useState( {
 		title: 'Hello, World!',
@@ -322,7 +329,8 @@ const LayoutRegularComponent = ( {
 		status: 'draft',
 		reviewer: 'fulano',
 		email: 'hello@wordpress.org',
-		date: '2021-01-01T12:00:00',
+		date: '2021-01-01',
+		datetime: '2021-01-01T12:00:00',
 		birthdate: '1950-02-23T12:00:00',
 		sticky: false,
 		can_comment: false,
@@ -332,6 +340,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( {
@@ -342,14 +362,15 @@ const LayoutRegularComponent = ( {
 				'title',
 				'order',
 				'sticky',
+				'can_comment',
 				'author',
 				'status',
 				'reviewer',
 				'email',
 				'password',
 				'date',
+				'datetime',
 				'birthdate',
-				'can_comment',
 				'filesize',
 				'dimensions',
 				'tags',
@@ -363,7 +384,7 @@ const LayoutRegularComponent = ( {
 	return (
 		<DataForm< SamplePost >
 			data={ post }
-			fields={ fields }
+			fields={ _fields }
 			form={ form }
 			onChange={ ( edits ) =>
 				setPost( ( prev ) => ( {

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

@@ -42,7 +42,7 @@ const LayoutRowComponent = ( {
 	const customerFields: Field< Customer >[] = [
 		{
 			id: 'name',
-			label: 'Customer Name',
+			label: 'Customer name',
 			type: 'text',
 		},
 		{
@@ -57,37 +57,37 @@ const LayoutRowComponent = ( {
 		},
 		{
 			id: 'shippingAddress',
-			label: 'Shipping Address',
+			label: 'Shipping address',
 			type: 'text',
 		},
 		{
 			id: 'shippingCity',
-			label: 'Shipping City',
+			label: 'Shipping city',
 			type: 'text',
 		},
 		{
 			id: 'shippingPostalCode',
-			label: 'Shipping Postal Code',
+			label: 'Shipping postal code',
 			type: 'text',
 		},
 		{
 			id: 'shippingCountry',
-			label: 'Shipping Country',
+			label: 'Shipping country',
 			type: 'text',
 		},
 		{
 			id: 'billingAddress',
-			label: 'Billing Address',
+			label: 'Billing address',
 			type: 'text',
 		},
 		{
 			id: 'billingCity',
-			label: 'Billing City',
+			label: 'Billing city',
 			type: 'text',
 		},
 		{
 			id: 'billingPostalCode',
-			label: 'Billing Postal Code',
+			label: 'Billing postal code',
 			type: 'text',
 		},
 		{
@@ -102,7 +102,7 @@ const LayoutRowComponent = ( {
 		},
 		{
 			id: 'hasDiscount',
-			label: 'Has Discount?',
+			label: 'Has discount?',
 			type: 'boolean',
 		},
 		{

package/src/dataform/stories/validation.tsx

@@ -739,7 +739,7 @@ const ValidationComponent = ( {
 			},
 			{
 				id: 'customEdit',
-				label: 'Custom Control',
+				label: 'Custom control',
 				Edit: CustomEditControl,
 				isValid: {
 					required,
@@ -783,7 +783,7 @@ const ValidationComponent = ( {
 			{
 				id: 'toggleGroup',
 				type: 'text',
-				label: 'Toggle Group',
+				label: 'Toggle group',
 				Edit: 'toggleGroup',
 				elements:
 					elements === 'async'
@@ -849,31 +849,46 @@ const ValidationComponent = ( {
 				id: 'date',
 				type: 'date',
 				label: 'Date',
+				description: minMax
+					? 'Must be between Apr 1 and Apr 20, 2026'
+					: undefined,
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customDateRule ),
+					min: minMax ? '2026-04-01' : undefined,
+					max: minMax ? '2026-04-20' : undefined,
 				},
 			},
 			{
 				id: 'dateRange',
 				type: 'date',
-				label: 'Date Range',
+				label: 'Date range',
 				Edit: DateRangeEdit,
+				description: minMax
+					? 'Must be between Apr 1 and Apr 20, 2026'
+					: undefined,
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customDateRangeRule ),
+					min: minMax ? '2026-04-01' : undefined,
+					max: minMax ? '2026-04-20' : undefined,
 				},
 			},
 			{
 				id: 'datetime',
 				type: 'datetime',
-				label: 'Date Time',
+				label: 'Date time',
+				description: minMax
+					? 'Must be between Apr 1 and Apr 20, 2026'
+					: undefined,
 				isValid: {
 					required,
 					elements: elements !== 'none' ? true : false,
 					custom: maybeCustomRule( customDateTimeRule ),
+					min: minMax ? '2026-04-01T00:00:00.000Z' : undefined,
+					max: minMax ? '2026-04-20T23:59:59.000Z' : undefined,
 				},
 			},
 		];
@@ -947,34 +962,34 @@ const ValidationComponent = ( {
 		const groupedFields = [
 			{
 				id: 'textFields',
-				label: 'Text Fields',
+				label: 'Text fields',
 				children: [ 'text', 'textarea', 'password', 'customEdit' ],
 			},
 			{
 				id: 'numberFields',
-				label: 'Number Fields',
+				label: 'Number fields',
 				children: [ 'integer', 'number' ],
 			},
 			{
 				id: 'contactFields',
-				label: 'Contact Fields',
+				label: 'Contact fields',
 				children: [ 'email', 'telephone', 'url' ],
 			},
 			{
 				id: 'selectFields',
-				label: 'Selection Fields',
+				label: 'Selection fields',
 				children: [ 'select', 'combobox', 'textWithRadio' ],
 			},
 			{
 				id: 'booleanFields',
-				label: 'Boolean Fields',
+				label: 'Boolean fields',
 				children: [ 'boolean', 'toggle', 'toggleGroup' ],
 			},
 			{ id: 'color' },
 			{ id: 'array' },
 			{
 				id: 'dateFields',
-				label: 'Date Fields',
+				label: 'Date fields',
 				children: [ 'date', 'dateRange', 'datetime' ],
 			},
 		];