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

package/src/components/dataviews-layouts/grid/style.scss

@@ -57,6 +57,10 @@
 			}
 		}
 	}
+}
+
+.dataviews-view-grid,
+.dataviews-view-grid-infinite-scroll {
 
 	.dataviews-view-grid__card {
 		height: 100%;

package/src/components/dataviews-layouts/picker-grid/index.tsx

@@ -16,7 +16,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
-import { useContext } from '@wordpress/element';
+import { useContext, useRef } from '@wordpress/element';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -35,6 +35,11 @@ import type { SetSelection } from '../../../types/private';
 import { GridItems } from '../utils/grid-items';
 const { Badge } = unlock( componentsPrivateApis );
 import getDataByGroup from '../utils/get-data-by-group';
+import { useGridColumns } from '../grid/preview-size-picker';
+import {
+	useIntersectionObserver,
+	usePlaceholdersNeeded,
+} from '../utils/use-infinite-scroll';
 
 interface GridItemProps< Item > {
 	view: ViewPickerGridType;
@@ -73,7 +78,16 @@ function GridItem< Item >( {
 }: GridItemProps< Item > ) {
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const id = getItemId( item );
+	const elementRef = useRef< HTMLElement | null >( null );
+
 	const isSelected = selection.includes( id );
+
+	const setElementRef = ( element: HTMLElement | null ) => {
+		elementRef.current = element;
+	};
+
+	useIntersectionObserver( elementRef, posinset );
+
 	const renderedMediaField = mediaField?.render ? (
 		<mediaField.render
 			item={ item }
@@ -88,6 +102,7 @@ function GridItem< Item >( {
 
 	return (
 		<Composite.Item
+			ref={ setElementRef }
 			aria-label={
 				titleField
 					? titleField.getValue( { item } ) || __( '(no title)' )
@@ -105,6 +120,7 @@ function GridItem< Item >( {
 			} ) }
 			aria-selected={ isSelected }
 			onClick={ () => {
+				// Toggle in/out of selection array
 				if ( isSelected ) {
 					onChangeSelection(
 						selection.filter( ( itemId ) => id !== itemId )
@@ -318,12 +334,21 @@ function ViewPickerGrid< Item >( {
 		: null;
 	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
 
-	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
+	const isInfiniteScroll =
+		( view.infiniteScrollEnabled && ! dataByGroup ) ?? false;
 
 	const currentPage = view?.page ?? 1;
 	const perPage = view?.perPage ?? 0;
 	const setSize = isInfiniteScroll ? paginationInfo?.totalItems : undefined;
 
+	// Calculate placeholders needed for infinite scroll
+	const gridColumns = useGridColumns();
+	const placeholdersNeeded = usePlaceholdersNeeded(
+		data,
+		isInfiniteScroll,
+		gridColumns
+	);
+
 	return (
 		<>
 			{
@@ -378,10 +403,12 @@ function ViewPickerGrid< Item >( {
 										}
 									>
 										{ groupItems.map( ( item ) => {
+											// Use position from item if available (infinite scroll), otherwise calculate.
 											const posInSet =
+												( item as any ).position ??
 												( currentPage - 1 ) * perPage +
-												data.indexOf( item ) +
-												1;
+													data.indexOf( item ) +
+													1;
 											return (
 												<GridItem
 													key={ getItemId( item ) }
@@ -451,17 +478,28 @@ function ViewPickerGrid< Item >( {
 						aria-multiselectable={ isMultiselect }
 						aria-label={ itemListLabel }
 					>
-						{ data.map( ( item, index ) => {
-							let posinset = isInfiniteScroll
-								? index + 1
-								: undefined;
-
-							if ( ! isInfiniteScroll ) {
-								// When infinite scroll isn't active, take pagination into account
-								// when calculating the posinset.
-								posinset =
-									( currentPage - 1 ) * perPage + index + 1;
-							}
+						{ /* Render placeholders for unloaded items in first row */ }
+						{ Array.from( { length: placeholdersNeeded } ).map(
+							( _, index ) => (
+								<Composite.Item
+									key={ `placeholder-${ index }` }
+									render={ ( { children, ...props } ) => (
+										<Stack
+											direction="column"
+											children={ children }
+											{ ...props }
+										/>
+									) }
+									role="option"
+									aria-hidden
+									tabIndex={ -1 }
+									className="dataviews-view-picker-grid__card dataviews-view-picker-grid__placeholder"
+								/>
+							)
+						) }
+						{ data.map( ( item ) => {
+							// Use position from item for accessibility in infinite scroll mode.
+							const posinset = ( item as any ).position;
 
 							return (
 								<GridItem

package/src/components/dataviews-layouts/picker-table/index.tsx

@@ -33,6 +33,7 @@ import type { SetSelection } from '../../../types/private';
 import ColumnHeaderMenu from '../table/column-header-menu';
 import ColumnPrimary from '../table/column-primary';
 import getDataByGroup from '../utils/get-data-by-group';
+import { useIntersectionObserver } from '../utils/use-infinite-scroll';
 
 interface TableColumnFieldProps< Item > {
 	fields: NormalizedField< Item >[];
@@ -95,8 +96,17 @@ function TableRow< Item >( {
 	posinset,
 }: TableRowProps< Item > ) {
 	const { paginationInfo } = useContext( DataViewsContext );
+
 	const isSelected = selection.includes( id );
+
 	const [ isHovered, setIsHovered ] = useState( false );
+	const elementRef = useRef< HTMLElement | null >( null );
+
+	const setElementRef = ( element: HTMLElement | null ) => {
+		elementRef.current = element;
+	};
+
+	useIntersectionObserver( elementRef, posinset );
 	const {
 		showTitle = true,
 		showMedia = true,
@@ -119,6 +129,7 @@ function TableRow< Item >( {
 	return (
 		<Composite.Item
 			key={ id }
+			ref={ setElementRef }
 			render={ ( { children, ...props } ) => (
 				<tr
 					className={ clsx( 'dataviews-view-table__row', {
@@ -136,6 +147,7 @@ function TableRow< Item >( {
 			aria-posinset={ posinset }
 			role={ infiniteScrollEnabled ? 'article' : 'option' }
 			onClick={ () => {
+				// Toggle in/out of selection array
 				if ( isSelected ) {
 					onChangeSelection(
 						selection.filter( ( itemId ) => id !== itemId )
@@ -236,6 +248,12 @@ function ViewPickerTable< Item >( {
 		}
 	} );
 
+	const groupField = view.groupBy?.field
+		? fields.find( ( f ) => f.id === view.groupBy?.field )
+		: null;
+	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
+	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
+
 	const tableNoticeId = useId();
 
 	if ( nextHeaderMenuToFocus ) {
@@ -264,10 +282,6 @@ function ViewPickerTable< Item >( {
 		( field ) => field.id === view.descriptionField
 	);
 
-	const groupField = view.groupBy?.field
-		? fields.find( ( f ) => f.id === view.groupBy?.field )
-		: null;
-	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const hasPrimaryColumn =
 		( titleField && showTitle ) ||
@@ -285,7 +299,6 @@ function ViewPickerTable< Item >( {
 				headerMenuRefs.current.delete( column );
 			}
 		};
-	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
 
 	return (
 		<>
@@ -319,6 +332,7 @@ function ViewPickerTable< Item >( {
 									data={ data }
 									actions={ actions }
 									getItemId={ getItemId }
+									disableSelectAll={ isInfiniteScroll }
 								/>
 							) }
 						</th>
@@ -441,23 +455,29 @@ function ViewPickerTable< Item >( {
 						orientation="vertical"
 					>
 						{ hasData &&
-							data.map( ( item, index ) => (
-								<TableRow
-									key={ getItemId( item ) }
-									item={ item }
-									fields={ fields }
-									id={ getItemId( item ) || index.toString() }
-									view={ view }
-									titleField={ titleField }
-									mediaField={ mediaField }
-									descriptionField={ descriptionField }
-									selection={ selection }
-									getItemId={ getItemId }
-									onChangeSelection={ onChangeSelection }
-									multiselect={ isMultiselect }
-									posinset={ index + 1 }
-								/>
-							) ) }
+							data.map( ( item, index ) => {
+								const itemId = getItemId( item );
+								// Use position from item for accessibility in infinite scroll mode.
+								const posinset = ( item as any ).position;
+
+								return (
+									<TableRow
+										key={ itemId }
+										item={ item }
+										fields={ fields }
+										id={ itemId || index.toString() }
+										view={ view }
+										titleField={ titleField }
+										mediaField={ mediaField }
+										descriptionField={ descriptionField }
+										selection={ selection }
+										getItemId={ getItemId }
+										onChangeSelection={ onChangeSelection }
+										multiselect={ isMultiselect }
+										posinset={ posinset }
+									/>
+								);
+							} ) }
 					</Composite>
 				) }
 			</table>

package/src/components/dataviews-layouts/utils/use-infinite-scroll.ts

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../../dataviews-context';
+
+/**
+ * Hook to set up an IntersectionObserver for infinite scroll items.
+ * Observes the element and triggers the callback when the item becomes visible.
+ *
+ * @param elementRef - Ref to the DOM element to observe.
+ * @param posinset   - The position of the item in the set (1-based index).
+ */
+export function useIntersectionObserver(
+	elementRef: React.RefObject< HTMLElement | null >,
+	posinset: number | undefined
+) {
+	const { intersectionObserver } = useContext( DataViewsContext );
+
+	useEffect( () => {
+		const element = elementRef.current;
+		if ( ! element || posinset === undefined || ! intersectionObserver ) {
+			return;
+		}
+
+		intersectionObserver.observe( element );
+
+		return () => {
+			intersectionObserver.unobserve( element );
+		};
+	}, [ elementRef, intersectionObserver, posinset ] );
+}
+
+/**
+ * Hook to calculate the number of placeholder items needed for the first row
+ * in an infinite scroll grid layout.
+ *
+ * When items are loaded starting from a position other than 1, placeholders
+ * are needed to maintain proper grid alignment.
+ *
+ * @param data             - The array of data items.
+ * @param isInfiniteScroll - Whether infinite scroll is enabled.
+ * @param gridColumns      - The number of columns in the grid.
+ * @return The number of placeholder items needed.
+ */
+export function usePlaceholdersNeeded< Item >(
+	data: Item[],
+	isInfiniteScroll: boolean,
+	gridColumns: number
+): number {
+	const hasData = !! data?.length;
+	const firstItemPosition =
+		hasData && isInfiniteScroll
+			? ( data[ 0 ] as { position?: number } ).position
+			: undefined;
+
+	return firstItemPosition && gridColumns
+		? ( firstItemPosition - 1 ) % gridColumns
+		: 0;
+}

package/src/components/dataviews-picker-footer/index.tsx

@@ -32,15 +32,32 @@ function BulkSelectionCheckbox< Item >( {
 	onChangeSelection,
 	data,
 	getItemId,
+	disableSelectAll = false,
 }: {
 	selection: string[];
 	selectedItems: Item[];
 	onChangeSelection: SetSelection;
 	data: Item[];
 	getItemId: ( item: Item ) => string;
+	disableSelectAll?: boolean;
 } ) {
+	const hasSelection = selection.length > 0;
 	const areAllSelected = selectedItems.length === data.length;
 
+	if ( disableSelectAll ) {
+		return (
+			<CheckboxControl
+				className="dataviews-view-table-selection-checkbox"
+				checked={ hasSelection }
+				disabled={ ! hasSelection }
+				onChange={ () => {
+					onChangeSelection( [] );
+				} }
+				aria-label={ __( 'Deselect all' ) }
+			/>
+		);
+	}
+
 	return (
 		<CheckboxControl
 			className="dataviews-view-table-selection-checkbox"
@@ -136,6 +153,7 @@ export function DataViewsPickerFooter() {
 		getItemId,
 		actions = EMPTY_ARRAY,
 		paginationInfo,
+		view,
 	} = useContext( DataViewsContext );
 
 	const isMultiselect = useIsMultiselectPicker( actions );
@@ -143,7 +161,8 @@ export function DataViewsPickerFooter() {
 	const message = getFooterMessage(
 		selection.length,
 		data.length,
-		paginationInfo.totalItems
+		paginationInfo.totalItems,
+		!! view.infiniteScrollEnabled
 	);
 
 	const selectedItems = useMemo(
@@ -173,6 +192,7 @@ export function DataViewsPickerFooter() {
 						onChangeSelection={ onChangeSelection }
 						data={ data }
 						getItemId={ getItemId }
+						disableSelectAll={ !! view.infiniteScrollEnabled }
 					/>
 				) }
 				<span className="dataviews-bulk-actions-footer__item-count">

package/src/components/dataviews-search/index.tsx

@@ -35,7 +35,8 @@ const DataViewsSearch = memo( function Search( { label }: SearchProps ) {
 		if ( debouncedSearch !== viewRef.current?.search ) {
 			onChangeViewRef.current( {
 				...viewRef.current,
-				page: 1,
+				page: view.page ? 1 : undefined,
+				startPosition: view.startPosition ? 1 : undefined,
 				search: debouncedSearch,
 			} );
 		}

package/src/components/dataviews-selection-checkbox/index.tsx

@@ -30,7 +30,8 @@ export default function DataViewsSelectionCheckbox< Item >( {
 	...extraProps
 }: DataViewsSelectionCheckboxProps< Item > ) {
 	const id = getItemId( item );
-	const checked = ! disabled && selection.includes( id );
+	const isInSelectionArray = selection.includes( id );
+	const checked = ! disabled && isInSelectionArray;
 
 	// Fallback label to ensure accessibility
 	const selectionLabel =
@@ -47,8 +48,9 @@ export default function DataViewsSelectionCheckbox< Item >( {
 					return;
 				}
 
+				// Toggle in/out of selection array
 				onChangeSelection(
-					selection.includes( id )
+					isInSelectionArray
 						? selection.filter( ( itemId ) => id !== itemId )
 						: [ ...selection, id ]
 				);

package/src/components/dataviews-view-config/index.tsx

@@ -31,7 +31,6 @@ import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
 import { VIEW_LAYOUTS } from '../dataviews-layouts';
 import type { View } from '../../types';
 import DataViewsContext from '../dataviews-context';
-import InfiniteScrollToggle from './infinite-scroll-toggle';
 import { PropertiesSection } from './properties-section';
 import { unlock } from '../../lock-unlock';
 
@@ -346,7 +345,6 @@ export function DataviewsViewConfigDropdown() {
 							{ !! activeLayout?.viewConfigOptions && (
 								<activeLayout.viewConfigOptions />
 							) }
-							<InfiniteScrollToggle />
 							<ItemsPerPageControl />
 							<PropertiesSection />
 						</Stack>

package/src/components/dataviews-view-config/infinite-scroll-toggle.tsx

@@ -15,11 +15,6 @@ export default function InfiniteScrollToggle() {
 	const { view, onChangeView } = context;
 	const infiniteScrollEnabled = view.infiniteScrollEnabled ?? false;
 
-	// Only render the toggle if an infinite scroll handler is available
-	if ( ! context.hasInfiniteScrollHandler ) {
-		return null;
-	}
-
 	return (
 		<ToggleControl
 			label={ __( 'Enable infinite scroll' ) }

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,7 +56,6 @@ type DataViewsProps< Item > = {
 	paginationInfo: {
 		totalItems: number;
 		totalPages: number;
-		infiniteScrollHandler?: () => void;
 	};
 	defaultLayouts: SupportedLayouts;
 	selection?: string[];
@@ -90,13 +97,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
@@ -144,7 +156,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 +191,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 +203,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,53 +226,21 @@ 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.
 	const defaultLayouts = useMemo(
 		() =>
@@ -284,8 +289,8 @@ function DataViews< Item >( {
 				config,
 				empty,
 				hasInitiallyLoaded,
-				hasInfiniteScrollHandler: !! infiniteScrollHandler,
 				onReset,
+				intersectionObserver,
 			} }
 		>
 			<div className="dataviews-wrapper">