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

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

package/src/dataviews/index.tsx

@@ -2,12 +2,19 @@
  * External dependencies
  */
 import type { ReactNode, ComponentProps, ReactElement } from 'react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
-import { useResizeObserver, throttle } from '@wordpress/compose';
+import {
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -32,6 +39,7 @@ import DataViewsViewConfig, {
 } from '../components/dataviews-view-config';
 import normalizeFields from '../field-types';
 import useData from '../hooks/use-data';
+import { useInfiniteScroll } from '../hooks/use-infinite-scroll';
 import type { Action, Field, View, SupportedLayouts } from '../types';
 import type { SelectionOrUpdater } from '../types/private';
 type ItemWithId = { id: string };
@@ -48,9 +56,8 @@ type DataViewsProps< Item > = {
 	paginationInfo: {
 		totalItems: number;
 		totalPages: number;
-		infiniteScrollHandler?: () => void;
 	};
-	defaultLayouts: SupportedLayouts;
+	defaultLayouts?: SupportedLayouts;
 	selection?: string[];
 	onChangeSelection?: ( items: string[] ) => void;
 	onClickItem?: ( item: Item ) => void;
@@ -75,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
@@ -90,13 +98,18 @@ function DefaultUI( {
 	search = true,
 	searchLabel = undefined,
 }: DefaultUIProps ) {
+	const { view } = useContext( DataViewsContext );
+	const isInfiniteScroll = view.infiniteScrollEnabled;
 	return (
 		<>
 			<Stack
 				direction="row"
 				align="top"
 				justify="space-between"
-				className="dataviews__view-actions"
+				className={ clsx( 'dataviews__view-actions', {
+					'dataviews__view-actions--infinite-scroll':
+						isInfiniteScroll,
+				} ) }
 				gap="xs"
 			>
 				<Stack
@@ -132,7 +145,7 @@ function DataViews< Item >( {
 	getItemLevel,
 	isLoading = false,
 	paginationInfo,
-	defaultLayouts: defaultLayoutsProperty,
+	defaultLayouts: defaultLayoutsProperty = DEFAULT_LAYOUTS,
 	selection: selectionProperty,
 	onChangeSelection,
 	onClickItem,
@@ -144,7 +157,31 @@ function DataViews< Item >( {
 	empty,
 	onReset,
 }: DataViewsProps< Item > ) {
-	const { infiniteScrollHandler } = paginationInfo;
+	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
+	const isUncontrolled =
+		selectionProperty === undefined || onChangeSelection === undefined;
+	const selection = isUncontrolled ? selectionState : selectionProperty;
+
+	// useData handles both infinite scroll and standard pagination paths,
+	// preserving previous data while loading and tracking initial load state.
+	const {
+		data: displayData,
+		paginationInfo: displayPaginationInfo,
+		hasInitiallyLoaded,
+		setVisibleEntries,
+	} = useData( {
+		view,
+		data: data as any,
+		getItemId: getItemId as any,
+		isLoading,
+		selection,
+		paginationInfo,
+	} ) as {
+		data: ( Item & { position?: number } )[];
+		paginationInfo: { totalItems: number; totalPages: number };
+		hasInitiallyLoaded: boolean;
+		setVisibleEntries?: React.Dispatch< React.SetStateAction< number[] > >;
+	};
 	const containerRef = useRef< HTMLDivElement >( null );
 	const [ containerWidth, setContainerWidth ] = useState( 0 );
 	const resizeObserverRef = useResizeObserver(
@@ -155,10 +192,6 @@ function DataViews< Item >( {
 		},
 		{ box: 'border-box' }
 	);
-	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
-	const isUncontrolled =
-		selectionProperty === undefined || onChangeSelection === undefined;
-	const selection = isUncontrolled ? selectionState : selectionProperty;
 	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
 	function setSelectionWithChange( value: SelectionOrUpdater ) {
 		const newValue =
@@ -171,11 +204,16 @@ function DataViews< Item >( {
 		}
 	}
 	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
+	// When infinite scroll is enabled, don't filter selection by current data
+	// because items may be scrolled out of view but still selected.
 	const _selection = useMemo( () => {
+		if ( view.infiniteScrollEnabled ) {
+			return selection;
+		}
 		return selection.filter( ( id ) =>
 			data.some( ( item ) => getItemId( item ) === id )
 		);
-	}, [ selection, data, getItemId ] );
+	}, [ selection, data, getItemId, view.infiniteScrollEnabled ] );
 
 	const filters = useFilters( _fields, view );
 	const hasPrimaryOrLockedFilters = useMemo(
@@ -189,64 +227,35 @@ function DataViews< Item >( {
 		hasPrimaryOrLockedFilters
 	);
 
+	const { intersectionObserver } = useInfiniteScroll( {
+		view,
+		onChangeView,
+		isLoading,
+		paginationInfo,
+		containerRef,
+		setVisibleEntries,
+	} );
+
 	useEffect( () => {
 		if ( hasPrimaryOrLockedFilters && ! isShowingFilter ) {
 			setIsShowingFilter( true );
 		}
 	}, [ hasPrimaryOrLockedFilters, isShowingFilter ] );
 
-	const {
-		data: displayData,
-		paginationInfo: displayPaginationInfo,
-		hasInitiallyLoaded,
-	} = useData( data, isLoading, paginationInfo );
-
-	// Attach scroll event listener for infinite scroll
-	useEffect( () => {
-		if (
-			! hasInitiallyLoaded ||
-			! view.infiniteScrollEnabled ||
-			! containerRef.current
-		) {
-			return;
-		}
-
-		const handleScroll = throttle( ( event: unknown ) => {
-			const target = ( event as Event ).target as HTMLElement;
-			const scrollTop = target.scrollTop;
-			const scrollHeight = target.scrollHeight;
-			const clientHeight = target.clientHeight;
-
-			// Check if user has scrolled near the bottom
-			if ( scrollTop + clientHeight >= scrollHeight - 100 ) {
-				infiniteScrollHandler?.();
-			}
-		}, 100 ); // Throttle to 100ms
-
-		const container = containerRef.current;
-		container.addEventListener( 'scroll', handleScroll );
-
-		return () => {
-			container.removeEventListener( 'scroll', handleScroll );
-			handleScroll.cancel(); // Cancel any pending throttled calls
-		};
-	}, [
-		hasInitiallyLoaded,
-		infiniteScrollHandler,
-		view.infiniteScrollEnabled,
-	] );
-
-	// 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 ]
 	);
@@ -284,8 +293,8 @@ function DataViews< Item >( {
 				config,
 				empty,
 				hasInitiallyLoaded,
-				hasInfiniteScrollHandler: !! infiniteScrollHandler,
 				onReset,
+				intersectionObserver,
 			} }
 		>
 			<div className="dataviews-wrapper">

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 }