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

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

@@ -11,7 +11,7 @@ import DataForm from '../index';
 import type { Field, Form } from '../../types';
 import { unlock } from '../../lock-unlock';
 
-const { Badge } = unlock( privateApis );
+const { Badge: WCBadge } = unlock( privateApis );
 
 const LayoutCardComponent = ( {
 	withHeader,
@@ -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,10 +112,10 @@ const LayoutCardComponent = ( {
 		},
 		{
 			id: 'dueDate',
-			label: 'Due Date',
+			label: 'Due date',
 			type: 'text',
 			render: ( { item } ) => {
-				return <Badge>Due on: { item.dueDate }</Badge>;
+				return <WCBadge>Due on: { item.dueDate }</WCBadge>;
 			},
 		},
 		{
@@ -123,7 +123,7 @@ const LayoutCardComponent = ( {
 			type: 'text',
 			readOnly: true,
 			render: ( { item } ) => {
-				return <Badge>{ item.plan }</Badge>;
+				return <WCBadge>{ item.plan }</WCBadge>;
 			},
 		},
 	];

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: [
@@ -324,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,
@@ -356,14 +362,15 @@ const LayoutRegularComponent = ( {
 				'title',
 				'order',
 				'sticky',
+				'can_comment',
 				'author',
 				'status',
 				'reviewer',
 				'email',
 				'password',
 				'date',
+				'datetime',
 				'birthdate',
-				'can_comment',
 				'filesize',
 				'dimensions',
 				'tags',

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' ],
 			},
 		];

package/src/dataviews/index.tsx

@@ -57,7 +57,7 @@ type DataViewsProps< Item > = {
 		totalItems: number;
 		totalPages: number;
 	};
-	defaultLayouts: SupportedLayouts;
+	defaultLayouts?: SupportedLayouts;
 	selection?: string[];
 	onChangeSelection?: ( items: string[] ) => void;
 	onClickItem?: ( item: Item ) => void;
@@ -82,6 +82,7 @@ type DataViewsProps< Item > = {
 const defaultGetItemId = ( item: ItemWithId ) => item.id;
 const defaultIsItemClickable = () => true;
 const EMPTY_ARRAY: any[] = [];
+const DEFAULT_LAYOUTS: SupportedLayouts = { table: {}, grid: {}, list: {} };
 
 const dataViewsLayouts = VIEW_LAYOUTS.filter(
 	( viewLayout ) => ! viewLayout.isPicker
@@ -144,7 +145,7 @@ function DataViews< Item >( {
 	getItemLevel,
 	isLoading = false,
 	paginationInfo,
-	defaultLayouts: defaultLayoutsProperty,
+	defaultLayouts: defaultLayoutsProperty = DEFAULT_LAYOUTS,
 	selection: selectionProperty,
 	onChangeSelection,
 	onClickItem,
@@ -241,17 +242,20 @@ function DataViews< Item >( {
 		}
 	}, [ hasPrimaryOrLockedFilters, isShowingFilter ] );
 
-	// Filter out DataViewsPicker layouts.
+	// Filter out DataViewsPicker layouts and normalize `true` to `{}`.
 	const defaultLayouts = useMemo(
 		() =>
 			Object.fromEntries(
-				Object.entries( defaultLayoutsProperty ).filter(
-					( [ layoutType ] ) => {
+				Object.entries( defaultLayoutsProperty )
+					.filter( ( [ layoutType ] ) => {
 						return dataViewsLayouts.some(
 							( viewLayout ) => viewLayout.type === layoutType
 						);
-					}
-				)
+					} )
+					.map( ( [ key, value ] ) => [
+						key,
+						value === true ? {} : value,
+					] )
 			),
 		[ defaultLayoutsProperty ]
 	);

package/src/dataviews/stories/empty.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { __experimentalText as Text } from '@wordpress/components';
+import { __experimentalText as WCText } from '@wordpress/components';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -41,7 +41,7 @@ const PlanetIllustration = () => (
 const CustomEmptyComponent = () => (
 	<Stack direction="column" align="center" justify="center" gap="md">
 		<PlanetIllustration />
-		<Text>No celestial bodies found</Text>
+		<WCText>No celestial bodies found</WCText>
 	</Stack>
 );
 
@@ -79,10 +79,10 @@ const EmptyComponent = ( {
 				onChangeView={ setView }
 				actions={ actions }
 				defaultLayouts={ {
-					[ LAYOUT_TABLE ]: {},
-					[ LAYOUT_GRID ]: {},
-					[ LAYOUT_LIST ]: {},
-					[ LAYOUT_ACTIVITY ]: {},
+					[ LAYOUT_TABLE ]: true,
+					[ LAYOUT_GRID ]: true,
+					[ LAYOUT_LIST ]: true,
+					[ LAYOUT_ACTIVITY ]: true,
 				} }
 				isLoading={ isLoading }
 				empty={ customEmpty ? <CustomEmptyComponent /> : undefined }

package/src/dataviews/stories/fixtures.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { trash, image, Icon, category } from '@wordpress/icons';
-import { Button, __experimentalText as Text } from '@wordpress/components';
+import { Button, __experimentalText as WCText } from '@wordpress/components';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -642,7 +642,7 @@ export const actions: Action< SpaceObject >[] = [
 					: `Are you sure you want to delete "${ items[ 0 ].name.title }"?`;
 			return (
 				<Stack direction="column" gap="xl">
-					<Text>{ label }</Text>
+					<WCText>{ label }</WCText>
 					<Stack direction="row" gap="sm" justify="right">
 						<Button
 							__next40pxDefaultSize

package/src/dataviews/stories/free-composition.tsx

@@ -8,13 +8,10 @@ import {
 } from '@wordpress/element';
 import {
 	__experimentalHeading as Heading,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	Button,
 } from '@wordpress/components';
 import { __, _n } from '@wordpress/i18n';
-// TODO: enable in the ESlint rule once we complete
-// https://github.com/WordPress/gutenberg/issues/76135.
-// eslint-disable-next-line @wordpress/use-recommended-components
 import { Card, Stack } from '@wordpress/ui';
 
 /**
@@ -56,7 +53,7 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 					<Card.Root>
 						<Card.Content>
 							<Stack direction="column" gap="sm">
-								<Text size={ 18 } as="p">
+								<WCText size={ 18 } as="p">
 									{ createInterpolateElement(
 										_n(
 											'<PlanetsNumber /> planet',
@@ -71,9 +68,9 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 											),
 										}
 									) }
-								</Text>
+								</WCText>
 
-								<Text size={ 18 } as="p">
+								<WCText size={ 18 } as="p">
 									{ createInterpolateElement(
 										_n(
 											'<SatellitesNumber /> moon',
@@ -86,7 +83,7 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 											),
 										}
 									) }
-								</Text>
+								</WCText>
 							</Stack>
 						</Card.Content>
 					</Card.Root>
@@ -162,8 +159,8 @@ export const FreeCompositionComponent = () => {
 			actions={ actions }
 			onChangeView={ setView }
 			defaultLayouts={ {
-				table: {},
-				grid: {},
+				table: true,
+				grid: true,
 			} }
 			empty={
 				<Stack
@@ -173,10 +170,10 @@ export const FreeCompositionComponent = () => {
 					align="center"
 					className="free-composition-dataviews-empty"
 				>
-					<Text size={ 18 } as="p">
+					<WCText size={ 18 } as="p">
 						No planets
-					</Text>
-					<Text variant="muted">{ `Try a different search because “${ view.search }” returned no results.` }</Text>
+					</WCText>
+					<WCText variant="muted">{ `Try a different search because “${ view.search }” returned no results.` }</WCText>
 					<Button variant="secondary">Create new planet</Button>
 				</Stack>
 			}

package/src/dataviews/stories/infinite-scroll.tsx

@@ -50,10 +50,10 @@ const InfiniteScroll = () => {
 				onChangeView={ setView }
 				actions={ actions }
 				defaultLayouts={ {
-					[ LAYOUT_TABLE ]: {},
-					[ LAYOUT_GRID ]: {},
-					[ LAYOUT_LIST ]: {},
-					[ LAYOUT_ACTIVITY ]: {},
+					[ LAYOUT_TABLE ]: true,
+					[ LAYOUT_GRID ]: true,
+					[ LAYOUT_LIST ]: true,
+					[ LAYOUT_ACTIVITY ]: true,
 				} }
 			/>
 		</>