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

package/src/dataviews/stories/layout-activity.tsx

@@ -15,7 +15,7 @@ import {
 	pin,
 	link,
 } from '@wordpress/icons';
-import { Button, __experimentalText as Text } from '@wordpress/components';
+import { Button, __experimentalText as WCText } from '@wordpress/components';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -555,7 +555,7 @@ export const orderEventActions: Action< OrderEvent >[] = [
 			};
 			return (
 				<Stack direction="column" gap="xl">
-					<Text>{ label }</Text>
+					<WCText>{ label }</WCText>
 					<Stack direction="row" gap="sm" justify="right">
 						<Button
 							__next40pxDefaultSize
@@ -640,13 +640,11 @@ const LayoutActivityComponent = ( {
 
 	return (
 		<div
-			style={
-				{
-					height: '100%',
-					maxWidth: fullWidth ? undefined : '400px',
-					'--wp-dataviews-color-background': backgroundColor,
-				} as React.CSSProperties
-			}
+			style={ {
+				height: '100%',
+				maxWidth: fullWidth ? undefined : '400px',
+				'--wp-dataviews-color-background': backgroundColor,
+			} }
 		>
 			<DataViews
 				getItemId={ ( item ) => item.id.toString() }

package/src/dataviews/stories/layout-custom.tsx

@@ -130,7 +130,7 @@ export const LayoutCustomComponent = ( {
 			view={ view }
 			fields={ fields }
 			onChangeView={ setView }
-			defaultLayouts={ { table: {} } }
+			defaultLayouts={ { table: true } }
 		>
 			<div style={ { padding: '2px', height: containerHeight } }>
 				<DataViews.Search />

package/src/dataviews/stories/layout-grid.tsx

@@ -61,12 +61,10 @@ export const LayoutTableComponent = ( {
 	}, [ view ] );
 	return (
 		<div
-			style={
-				{
-					height: '100%',
-					'--wp-dataviews-color-background': backgroundColor,
-				} as React.CSSProperties
-			}
+			style={ {
+				height: '100%',
+				'--wp-dataviews-color-background': backgroundColor,
+			} }
 		>
 			<DataViews
 				getItemId={ ( item ) => item.id.toString() }
@@ -97,7 +95,7 @@ export const LayoutTableComponent = ( {
 				) }
 				isItemClickable={ () => hasClickableItems }
 				defaultLayouts={ {
-					[ LAYOUT_GRID ]: {},
+					[ LAYOUT_GRID ]: true,
 				} }
 				config={ { perPageSizes } }
 			/>

package/src/dataviews/stories/layout-list.tsx

@@ -63,13 +63,11 @@ export const LayoutTableComponent = ( {
 	}, [ view ] );
 	return (
 		<div
-			style={
-				{
-					height: '100%',
-					maxWidth: fullWidth ? undefined : '400px',
-					'--wp-dataviews-color-background': backgroundColor,
-				} as React.CSSProperties
-			}
+			style={ {
+				height: '100%',
+				maxWidth: fullWidth ? undefined : '400px',
+				'--wp-dataviews-color-background': backgroundColor,
+			} }
 		>
 			<DataViews
 				getItemId={ ( item ) => item.id.toString() }
@@ -100,7 +98,7 @@ export const LayoutTableComponent = ( {
 				) }
 				isItemClickable={ () => hasClickableItems }
 				defaultLayouts={ {
-					[ LAYOUT_LIST ]: {},
+					[ LAYOUT_LIST ]: true,
 				} }
 				config={ { perPageSizes } }
 			/>

package/src/dataviews/stories/layout-table.tsx

@@ -62,12 +62,10 @@ export const LayoutTableComponent = ( {
 	}, [ view ] );
 	return (
 		<div
-			style={
-				{
-					height: '100%',
-					'--wp-dataviews-color-background': backgroundColor,
-				} as React.CSSProperties
-			}
+			style={ {
+				height: '100%',
+				'--wp-dataviews-color-background': backgroundColor,
+			} }
 		>
 			<DataViews
 				getItemId={ ( item ) => item.id.toString() }
@@ -98,7 +96,7 @@ export const LayoutTableComponent = ( {
 				) }
 				isItemClickable={ () => hasClickableItems }
 				defaultLayouts={ {
-					[ LAYOUT_TABLE ]: {},
+					[ LAYOUT_TABLE ]: true,
 				} }
 				config={ { perPageSizes } }
 			/>

package/src/dataviews/stories/minimal-ui.tsx

@@ -54,7 +54,7 @@ const MinimalUIComponent = ( {
 			view={ view }
 			fields={ _fields }
 			onChangeView={ setView }
-			defaultLayouts={ { [ layout ]: {} } }
+			defaultLayouts={ { [ layout ]: true } }
 		>
 			<DataViews.Layout />
 			<DataViews.Footer />

package/src/dataviews/stories/with-card.tsx

@@ -2,9 +2,6 @@
  * WordPress dependencies
  */
 import { useState, useMemo } from '@wordpress/element';
-// 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 } from '@wordpress/ui';
 
 /**
@@ -59,10 +56,10 @@ const WithCardComponent = ( {
 							( action ) => ! action.supportsBulk
 						) }
 						defaultLayouts={ {
-							[ LAYOUT_TABLE ]: {},
-							[ LAYOUT_GRID ]: {},
-							[ LAYOUT_LIST ]: {},
-							[ LAYOUT_ACTIVITY ]: {},
+							[ LAYOUT_TABLE ]: true,
+							[ LAYOUT_GRID ]: true,
+							[ LAYOUT_LIST ]: true,
+							[ LAYOUT_ACTIVITY ]: true,
 						} }
 					/>
 				</Card.FullBleed>

package/src/dataviews/style.scss

@@ -118,7 +118,7 @@
 }
 
 .dataviews-title-field--clickable {
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	color: $gray-800;
 	&:hover {
 		color: var(--wp-admin-theme-color);

package/src/dataviews/test/dataviews.tsx

@@ -19,7 +19,7 @@ import {
 	LAYOUT_LIST,
 	LAYOUT_TABLE,
 } from '../../constants';
-import type { Action, View } from '../../types';
+import type { Action, SupportedLayouts, View } from '../../types';
 import filterSortAndPaginate from '../../utils/filter-sort-and-paginate';
 
 type Data = {
@@ -38,11 +38,11 @@ const DEFAULT_VIEW = {
 	filters: [],
 };
 
-const defaultLayouts = {
-	[ LAYOUT_TABLE ]: {},
-	[ LAYOUT_GRID ]: {},
-	[ LAYOUT_LIST ]: {},
-	[ LAYOUT_ACTIVITY ]: {},
+const defaultLayouts: SupportedLayouts = {
+	[ LAYOUT_TABLE ]: true,
+	[ LAYOUT_GRID ]: true,
+	[ LAYOUT_LIST ]: true,
+	[ LAYOUT_ACTIVITY ]: true,
 };
 
 const fields = [
@@ -737,4 +737,71 @@ describe( 'DataViews component', () => {
 			).toEqual( 3 );
 		} );
 	} );
+	describe( 'Default layouts', () => {
+		/**
+		 * A minimal wrapper that intentionally omits the `defaultLayouts` prop so
+		 * DataViews falls back to its internal DEFAULT_LAYOUTS constant
+		 * ({ table: true, grid: true, list: true }).
+		 */
+		function DataViewWrapperWithoutDefaultLayouts() {
+			const [ view, setView ] = useState< View >( {
+				...DEFAULT_VIEW,
+				fields: [ 'title', 'order', 'author' ],
+			} );
+
+			const { data: shownData, paginationInfo } = useMemo( () => {
+				return filterSortAndPaginate( data, view, fields );
+			}, [ view ] );
+
+			return (
+				<DataViews
+					getItemId={ ( item: Data ) => item.id.toString() }
+					paginationInfo={ paginationInfo }
+					data={ shownData }
+					view={ view }
+					fields={ fields }
+					onChangeView={ setView }
+					// No `defaultLayouts` prop — falls back to DEFAULT_LAYOUTS
+				/>
+			);
+		}
+
+		it( 'renders Table, Grid, and List layout options when defaultLayouts is not provided', async () => {
+			render( <DataViewWrapperWithoutDefaultLayouts /> );
+
+			const user = userEvent.setup();
+
+			// All three default layouts are available, so the Layout switcher
+			// button (rendered by ViewTypeMenu) must be present.
+			const layoutButton = screen.getByRole( 'button', {
+				name: 'Layout',
+			} );
+			expect( layoutButton ).toBeInTheDocument();
+
+			// Open the layout menu.
+			await user.click( layoutButton );
+
+			// Table, Grid, and List options must all appear.
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Table' } )
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Grid' } )
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'List' } )
+			).toBeInTheDocument();
+
+			// Table is the default active layout.
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Table' } )
+			).toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Grid' } )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'List' } )
+			).not.toBeChecked();
+		} );
+	} );
 } );

package/src/dataviews-picker/index.tsx

@@ -62,7 +62,7 @@ type DataViewsPickerProps< Item > = {
 		totalItems: number;
 		totalPages: number;
 	};
-	defaultLayouts: SupportedLayouts;
+	defaultLayouts?: SupportedLayouts;
 	selection: string[];
 	onChangeSelection: ( items: string[] ) => void;
 	children?: ReactNode;
@@ -71,12 +71,17 @@ type DataViewsPickerProps< Item > = {
 	};
 	itemListLabel?: string;
 	empty?: ReactNode;
+	onReset?: ( () => void ) | false;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
 
 const defaultGetItemId = ( item: ItemWithId ) => item.id;
 const EMPTY_ARRAY: any[] = [];
+const DEFAULT_PICKER_LAYOUTS: SupportedLayouts = {
+	pickerGrid: true,
+	pickerTable: true,
+};
 
 type DefaultUIProps = Pick<
 	DataViewsPickerProps< any >,
@@ -132,13 +137,14 @@ function DataViewsPicker< Item >( {
 	getItemId = defaultGetItemId,
 	isLoading = false,
 	paginationInfo,
-	defaultLayouts: defaultLayoutsProperty,
+	defaultLayouts: defaultLayoutsProperty = DEFAULT_PICKER_LAYOUTS,
 	selection,
 	onChangeSelection,
 	children,
 	config = { perPageSizes: [ 10, 20, 50, 100 ] },
 	itemListLabel,
 	empty,
+	onReset,
 }: DataViewsPickerProps< Item > ) {
 	// useData ensures data loading is correct whether infinite scroll is enabled or pagination is used.
 	const { data: displayData, setVisibleEntries } = useData( {
@@ -198,17 +204,20 @@ function DataViewsPicker< Item >( {
 		}
 	}, [ hasPrimaryOrLockedFilters, isShowingFilter ] );
 
-	// Filter out DataViewsPicker layouts.
+	// Filter out non-picker layouts and normalize `true` to `{}`.
 	const defaultLayouts = useMemo(
 		() =>
 			Object.fromEntries(
-				Object.entries( defaultLayoutsProperty ).filter(
-					( [ layoutType ] ) => {
+				Object.entries( defaultLayoutsProperty )
+					.filter( ( [ layoutType ] ) => {
 						return dataViewsPickerLayouts.some(
 							( viewLayout ) => viewLayout.type === layoutType
 						);
-					}
-				)
+					} )
+					.map( ( [ key, value ] ) => [
+						key,
+						value === true ? {} : value,
+					] )
 			),
 		[ defaultLayoutsProperty ]
 	);
@@ -243,6 +252,7 @@ function DataViewsPicker< Item >( {
 				config,
 				itemListLabel,
 				empty,
+				onReset,
 				hasInitiallyLoaded: true,
 				intersectionObserver,
 			} }

package/src/dataviews-picker/stories/index.story.tsx

@@ -14,7 +14,7 @@ import { Stack } from '@wordpress/ui';
  * Internal dependencies
  */
 import DataViewsPicker from '../index';
-import { LAYOUT_PICKER_GRID, LAYOUT_PICKER_TABLE } from '../../constants';
+import { LAYOUT_PICKER_GRID } from '../../constants';
 import filterSortAndPaginate from '../../utils/filter-sort-and-paginate';
 import type { ActionButton, View } from '../../types';
 import { data, fields, type SpaceObject } from './fixtures';
@@ -187,10 +187,6 @@ const DataViewsPickerContent = ( {
 				onChangeView={ setView }
 				config={ { perPageSizes } }
 				itemListLabel="Galactic Bodies"
-				defaultLayouts={ {
-					[ LAYOUT_PICKER_GRID ]: {},
-					[ LAYOUT_PICKER_TABLE ]: {},
-				} }
 			/>
 		</>
 	);

package/src/dataviews-picker/test/dataviews-picker.tsx

@@ -14,7 +14,12 @@ import { useMemo, useState } from '@wordpress/element';
  */
 import DataViewsPicker from '../index';
 import { LAYOUT_PICKER_GRID } from '../../constants';
-import type { ActionButton, View, ViewPickerGrid } from '../../types';
+import type {
+	ActionButton,
+	SupportedLayouts,
+	View,
+	ViewPickerGrid,
+} from '../../types';
 import filterSortAndPaginate from '../../utils/filter-sort-and-paginate';
 
 type Data = {
@@ -107,7 +112,7 @@ function Picker( {
 		paginationInfo,
 		data: shownData,
 		view,
-		defaultLayouts: { [ LAYOUT_PICKER_GRID ]: {} },
+		defaultLayouts: { [ LAYOUT_PICKER_GRID ]: true } as SupportedLayouts,
 		fields: [],
 		onChangeView: setView,
 		multiselect,
@@ -475,4 +480,76 @@ describe( 'DataViews Picker', () => {
 			} );
 		} );
 	} );
+
+	describe( 'Default layouts', () => {
+		/**
+		 * A minimal Picker that intentionally omits the `defaultLayouts` prop so
+		 * that DataViewsPicker falls back to its internal DEFAULT_PICKER_LAYOUTS
+		 * constant ({ pickerGrid: true, pickerTable: true }).
+		 */
+		function PickerWithoutDefaultLayouts() {
+			const [ view, setView ] = useState< View >( {
+				type: LAYOUT_PICKER_GRID,
+				fields: [],
+				titleField: 'title',
+				mediaField: 'image',
+				search: '',
+				page: 1,
+				perPage: 10,
+				filters: [],
+			} satisfies ViewPickerGrid );
+
+			const [ selection, setSelection ] = useState< string[] >( [] );
+
+			const { data: shownData, paginationInfo } = useMemo( () => {
+				return filterSortAndPaginate( data, view, [] );
+			}, [ view ] );
+
+			return (
+				<DataViewsPicker
+					getItemId={ ( item: Data ) => item.id.toString() }
+					paginationInfo={ paginationInfo }
+					data={ shownData }
+					view={ view }
+					fields={ [] }
+					onChangeView={ setView }
+					selection={ selection }
+					onChangeSelection={ setSelection }
+					// No `defaultLayouts` prop falls back to DEFAULT_PICKER_LAYOUTS
+				/>
+			);
+		}
+
+		it( 'renders both picker layout options when defaultLayouts is not provided', async () => {
+			render( <PickerWithoutDefaultLayouts /> );
+
+			const user = userEvent.setup();
+
+			// Both picker layouts are available, so the Layout switcher button
+			// (rendered by ViewTypeMenu) must be present.
+			const layoutButton = screen.getByRole( 'button', {
+				name: 'Layout',
+			} );
+			expect( layoutButton ).toBeInTheDocument();
+
+			// Open the layout menu.
+			await user.click( layoutButton );
+
+			// Both "Grid" and "Table" picker layout options must appear in the menu.
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Grid' } )
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Table' } )
+			).toBeInTheDocument();
+
+			// The grid layout is active by default.
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Grid' } )
+			).toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Table' } )
+			).not.toBeChecked();
+		} );
+	} );
 } );

package/src/field-types/date.tsx

@@ -21,6 +21,7 @@ import {
 	OPERATOR_BETWEEN,
 } from '../constants';
 import isValidRequired from './utils/is-valid-required';
+import { isValidMaxDate, isValidMinDate } from './utils/is-valid-date-boundary';
 import render from './utils/render-default';
 
 const format = {
@@ -91,5 +92,7 @@ export default {
 	validate: {
 		required: isValidRequired,
 		elements: isValidElements,
+		min: isValidMinDate,
+		max: isValidMaxDate,
 	},
 } satisfies FieldType< any >;

package/src/field-types/datetime.tsx

@@ -20,6 +20,7 @@ import {
 	OPERATOR_OVER,
 } from '../constants';
 import isValidRequired from './utils/is-valid-required';
+import { isValidMaxDate, isValidMinDate } from './utils/is-valid-date-boundary';
 import render from './utils/render-default';
 
 const format = {
@@ -88,5 +89,7 @@ export default {
 	validate: {
 		required: isValidRequired,
 		elements: isValidElements,
+		min: isValidMinDate,
+		max: isValidMaxDate,
 	},
 } satisfies FieldType< any >;

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

@@ -715,7 +715,7 @@ const FieldTypeStory = ( {
 						},
 					] }
 					defaultLayouts={ {
-						table: {},
+						table: true,
 					} }
 					selection={ selectedIds.map( ( id ) => id.toString() ) }
 					onChangeSelection={ ( newSelection ) =>

package/src/field-types/test/normalize-fields.ts

@@ -339,6 +339,50 @@ describe( 'normalizeFields: default getValue', () => {
 		} );
 	} );
 
+	describe( 'validation normalization', () => {
+		it( 'ignores string min/max rules on numeric fields', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'price',
+					type: 'number',
+					isValid: {
+						min: '1',
+						max: '10',
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].isValid.min ).toBeUndefined();
+			expect( normalizedFields[ 0 ].isValid.max ).toBeUndefined();
+		} );
+
+		it( 'ignores numeric min/max rules on date-like fields', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'publishDate',
+					type: 'date',
+					isValid: {
+						min: 1,
+						max: 10,
+					},
+				},
+				{
+					id: 'publishedAt',
+					type: 'datetime',
+					isValid: {
+						min: 1,
+						max: 10,
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			expect( normalizedFields[ 0 ].isValid.min ).toBeUndefined();
+			expect( normalizedFields[ 0 ].isValid.max ).toBeUndefined();
+			expect( normalizedFields[ 1 ].isValid.min ).toBeUndefined();
+			expect( normalizedFields[ 1 ].isValid.max ).toBeUndefined();
+		} );
+	} );
+
 	describe( 'format normalization', () => {
 		it( 'applies default format when not provided for date fields', () => {
 			const fields: Field< {} >[] = [