@wordpress/dataviews 13.1.1-next.v.202603161435.0 → 14.1.0

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

@@ -6,7 +6,7 @@ import type { Meta } from '@storybook/react-vite';
 /**
  * WordPress dependencies
  */
-import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
+import { useState, useMemo, useEffect } from '@wordpress/element';
 import { Modal, Button } from '@wordpress/components';
 import { Stack } from '@wordpress/ui';
 
@@ -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';
@@ -70,32 +70,66 @@ const DataViewsPickerContent = ( {
 	actions: customActions,
 	selection: customSelection,
 }: PickerContentProps ) => {
-	const [ view, setView ] = useState< View >( {
-		fields: [],
-		titleField: 'title',
-		mediaField: 'image',
-		search: '',
-		page: 1,
-		perPage: 10,
-		filters: [],
-		type: LAYOUT_PICKER_GRID,
-		groupBy: isGrouped ? { field: 'type', direction: 'asc' } : undefined,
-		infiniteScrollEnabled,
+	const [ view, setView ] = useState< View >( () => {
+		const baseView: View = {
+			fields: [],
+			titleField: 'title',
+			mediaField: 'image',
+			search: '',
+			filters: [],
+			type: LAYOUT_PICKER_GRID,
+			groupBy: isGrouped
+				? { field: 'type', direction: 'asc' as const }
+				: undefined,
+			infiniteScrollEnabled,
+		};
+
+		if ( infiniteScrollEnabled ) {
+			return {
+				...baseView,
+				startPosition: 1,
+				perPage: 10,
+			};
+		}
+
+		return {
+			...baseView,
+			page: 1,
+			perPage: 10,
+		};
 	} );
-	const { data: shownData, paginationInfo: normalPaginationInfo } =
-		useMemo( () => {
-			return filterSortAndPaginate( data, view, fields );
-		}, [ view ] );
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ view ] );
 
 	useEffect( () => {
-		setView( ( prevView ) => ( {
-			...prevView,
-			groupBy:
-				isGrouped && ! infiniteScrollEnabled
-					? { field: 'type', direction: 'asc' }
-					: undefined,
-			infiniteScrollEnabled,
-		} ) );
+		setView( ( prevView ) => {
+			const baseUpdates = {
+				groupBy:
+					isGrouped && ! infiniteScrollEnabled
+						? { field: 'type', direction: 'asc' as const }
+						: undefined,
+				infiniteScrollEnabled,
+			};
+
+			if ( infiniteScrollEnabled ) {
+				return {
+					...prevView,
+					...baseUpdates,
+					startPosition: 1,
+					perPage: 15,
+					page: undefined,
+				} as View;
+			}
+
+			return {
+				...prevView,
+				...baseUpdates,
+				page: prevView.page ?? 1,
+				perPage: prevView.perPage ?? 10,
+				startPosition: undefined,
+			} as View;
+		} );
 	}, [ isGrouped, infiniteScrollEnabled ] );
 
 	const [ selection, setSelection ] = useState< string[] >(
@@ -129,24 +163,12 @@ const DataViewsPickerContent = ( {
 		},
 	];
 
-	const {
-		data: infiniteScrollData,
-		paginationInfo: infiniteScrollPaginationInfo,
-		isLoadingMore,
-	} = useInfiniteScroll( {
-		view,
-		setView,
-		data: shownData,
-		getItemId: ( item ) => item.id.toString(),
-		totalDataLength: data.length,
-	} );
-
 	return (
 		<>
 			{ infiniteScrollEnabled && (
 				<style>{ `
 					.dataviews-picker-wrapper {
-						height: 600px;
+						height: 750px;
 						overflow: auto;
 					}
 				` }</style>
@@ -158,22 +180,13 @@ const DataViewsPickerContent = ( {
 					setSelection( selectedIds );
 				} }
 				getItemId={ ( item ) => item.id.toString() }
-				paginationInfo={
-					infiniteScrollEnabled
-						? infiniteScrollPaginationInfo
-						: normalPaginationInfo
-				}
-				data={ infiniteScrollEnabled ? infiniteScrollData : shownData }
-				isLoading={ infiniteScrollEnabled ? isLoadingMore : undefined }
+				paginationInfo={ paginationInfo }
+				data={ shownData }
 				view={ view }
 				fields={ fields }
 				onChangeView={ setView }
 				config={ { perPageSizes } }
 				itemListLabel="Galactic Bodies"
-				defaultLayouts={ {
-					[ LAYOUT_PICKER_GRID ]: {},
-					[ LAYOUT_PICKER_TABLE ]: { perPage: 20 },
-				} }
 			/>
 		</>
 	);
@@ -296,87 +309,3 @@ export const WithModal = ( {
 
 WithModal.args = storyArgs;
 WithModal.argTypes = storyArgTypes;
-
-function useInfiniteScroll( {
-	view,
-	setView,
-	data: shownData,
-	getItemId,
-	totalDataLength,
-}: {
-	view: View;
-	setView: ( view: View ) => void;
-	data: SpaceObject[];
-	getItemId: ( item: SpaceObject ) => string;
-	totalDataLength: number;
-} ): {
-	data: SpaceObject[];
-	paginationInfo: {
-		totalItems: number;
-		totalPages: number;
-		infiniteScrollHandler?: ( () => void ) | undefined;
-	};
-	isLoadingMore: boolean;
-	hasMoreData: boolean;
-} {
-	// Custom pagination handler that simulates server-side pagination
-	const [ allLoadedRecords, setAllLoadedRecords ] = useState< SpaceObject[] >(
-		[]
-	);
-	const [ isLoadingMore, setIsLoadingMore ] = useState( false );
-
-	const totalItems = totalDataLength;
-	const totalPages = Math.ceil( totalItems / ( view.perPage || 10 ) );
-	const currentPage = view.page || 1;
-	const hasMoreData = currentPage < totalPages;
-
-	const infiniteScrollHandler = useCallback( () => {
-		if ( isLoadingMore || currentPage >= totalPages ) {
-			return;
-		}
-
-		setIsLoadingMore( true );
-
-		setView( {
-			...view,
-			page: currentPage + 1,
-		} );
-	}, [ isLoadingMore, currentPage, totalPages, view, setView ] );
-
-	// Initialize data on first load or when view changes significantly
-	useEffect( () => {
-		if ( currentPage === 1 || ! view.infiniteScrollEnabled ) {
-			// First page - replace all data
-			setAllLoadedRecords( shownData );
-		} else {
-			// Subsequent pages - append to existing data
-			setAllLoadedRecords( ( prev ) => {
-				const existingIds = new Set( prev.map( getItemId ) );
-				const newRecords = shownData.filter(
-					( record ) => ! existingIds.has( getItemId( record ) )
-				);
-				return [ ...prev, ...newRecords ];
-			} );
-		}
-		setIsLoadingMore( false );
-	}, [
-		view.search,
-		view.filters,
-		view.perPage,
-		currentPage,
-		view.infiniteScrollEnabled,
-	] );
-
-	const paginationInfo = {
-		totalItems,
-		totalPages,
-		infiniteScrollHandler,
-	};
-
-	return {
-		data: allLoadedRecords,
-		paginationInfo,
-		isLoadingMore,
-		hasMoreData,
-	};
-}

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