@wordpress/dataviews 14.0.0 → 14.1.0

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

@@ -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/free-composition.tsx

@@ -162,8 +162,8 @@ export const FreeCompositionComponent = () => {
 			actions={ actions }
 			onChangeView={ setView }
 			defaultLayouts={ {
-				table: {},
-				grid: {},
+				table: true,
+				grid: true,
 			} }
 			empty={
 				<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,
 				} }
 			/>
 		</>

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

@@ -97,7 +97,7 @@ export const LayoutTableComponent = ( {
 				) }
 				isItemClickable={ () => hasClickableItems }
 				defaultLayouts={ {
-					[ LAYOUT_GRID ]: {},
+					[ LAYOUT_GRID ]: true,
 				} }
 				config={ { perPageSizes } }
 			/>

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

@@ -100,7 +100,7 @@ export const LayoutTableComponent = ( {
 				) }
 				isItemClickable={ () => hasClickableItems }
 				defaultLayouts={ {
-					[ LAYOUT_LIST ]: {},
+					[ LAYOUT_LIST ]: true,
 				} }
 				config={ { perPageSizes } }
 			/>

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

@@ -98,7 +98,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

@@ -59,10 +59,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/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