@wordpress/dataviews 13.1.1-next.v.202603102151.0 → 14.0.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,39 +226,21 @@ function DataViews< Item >( {
 		hasPrimaryOrLockedFilters
 	);
 
+	const { intersectionObserver } = useInfiniteScroll( {
+		view,
+		onChangeView,
+		isLoading,
+		paginationInfo,
+		containerRef,
+		setVisibleEntries,
+	} );
+
 	useEffect( () => {
 		if ( hasPrimaryOrLockedFilters && ! isShowingFilter ) {
 			setIsShowingFilter( true );
 		}
 	}, [ hasPrimaryOrLockedFilters, isShowingFilter ] );
 
-	// Attach scroll event listener for infinite scroll
-	useEffect( () => {
-		if ( ! 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
-		};
-	}, [ infiniteScrollHandler, view.infiniteScrollEnabled ] );
-
 	// Filter out DataViewsPicker layouts.
 	const defaultLayouts = useMemo(
 		() =>
@@ -237,12 +256,6 @@ function DataViews< Item >( {
 		[ defaultLayoutsProperty ]
 	);
 
-	const {
-		data: displayData,
-		paginationInfo: displayPaginationInfo,
-		hasInitiallyLoaded,
-	} = useData( data, isLoading, paginationInfo );
-
 	if ( ! defaultLayouts[ view.type ] ) {
 		return null;
 	}
@@ -276,11 +289,11 @@ function DataViews< Item >( {
 				config,
 				empty,
 				hasInitiallyLoaded,
-				hasInfiniteScrollHandler: !! infiniteScrollHandler,
 				onReset,
+				intersectionObserver,
 			} }
 		>
-			<div className="dataviews-wrapper" ref={ containerRef }>
+			<div className="dataviews-wrapper">
 				{ children ?? (
 					<DefaultUI
 						header={ header }

package/src/dataviews/stories/empty.tsx

@@ -47,11 +47,9 @@ const CustomEmptyComponent = () => (
 
 const EmptyComponent = ( {
 	customEmpty,
-	containerHeight,
 	isLoading,
 }: {
 	customEmpty?: boolean;
-	containerHeight?: 'auto' | '50vh' | '100vh';
 	isLoading?: boolean;
 } ) => {
 	const [ view, setView ] = useState< View >( {
@@ -69,7 +67,7 @@ const EmptyComponent = ( {
 			style={ {
 				display: 'flex',
 				flexDirection: 'column',
-				height: containerHeight,
+				height: '100%',
 			} }
 		>
 			<DataViews

package/src/dataviews/stories/fixtures.tsx

@@ -333,6 +333,294 @@ export const data: SpaceObject[] = [
 		email: 'thessalonikopolymnianebuchodonossarinacharybdis@example.com',
 		author: 'interstellar_nomadic_planetary_body_tracking_specialist',
 	},
+	{
+		id: 20,
+		name: {
+			title: 'Titan',
+			description: 'Largest moon of Saturn',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/f/fe/Titan_in_true_color_by_Kevin_M._Gill.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2022-02-15',
+		datetime: '2022-02-15T08:30:00Z',
+		email: 'titan@example.com',
+		author: 'saturn_system_researcher',
+	},
+	{
+		id: 21,
+		name: {
+			title: 'Enceladus',
+			description: 'Icy moon of Saturn with geysers',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/PIA17202_-_Approaching_Enceladus.jpg/960px-PIA17202_-_Approaching_Enceladus.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2023-03-20',
+		datetime: '2023-03-20T11:45:00Z',
+		email: 'enceladus@example.com',
+		author: 'cryovolcanism_observer',
+	},
+	{
+		id: 22,
+		name: {
+			title: 'Mimas',
+			description: 'Death Star moon of Saturn',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Mimas_Cassini.jpg/960px-Mimas_Cassini.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2021-07-12',
+		datetime: '2021-07-12T15:20:00Z',
+		email: 'mimas@example.com',
+		author: 'impact_crater_analyst',
+	},
+	{
+		id: 23,
+		name: {
+			title: 'Charon',
+			description: 'Largest moon of Pluto',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/2/2e/Charon_in_True_Color_-_High-Res.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Pluto', 'Moon' ],
+		satellites: 0,
+		date: '2020-09-25',
+		datetime: '2020-09-25T13:15:00Z',
+		email: 'charon@example.com',
+		author: 'pluto_system_mapper',
+	},
+	{
+		id: 24,
+		name: {
+			title: 'Phobos',
+			description: 'Larger moon of Mars',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Phobos_colour_2008.jpg/960px-Phobos_colour_2008.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Mars', 'Moon' ],
+		satellites: 0,
+		date: '2019-06-14',
+		datetime: '2019-06-14T07:45:00Z',
+		email: 'phobos@example.com',
+		author: 'martian_surface_cartographer',
+	},
+	{
+		id: 25,
+		name: {
+			title: 'Deimos',
+			description: 'Smaller moon of Mars',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/8/86/NASA-Deimos-MarsMoon-20090221.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Mars', 'Moon' ],
+		satellites: 0,
+		date: '2018-11-30',
+		datetime: '2018-11-30T16:00:00Z',
+		email: 'deimos@example.com',
+		author: 'small_moon_surveyor',
+	},
+	{
+		id: 26,
+		name: {
+			title: 'Rhea',
+			description: 'Second largest moon of Saturn',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/PIA07763_Rhea_full_globe5.jpg/2560px-PIA07763_Rhea_full_globe5.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2022-08-19',
+		datetime: '2022-08-19T10:30:00Z',
+		email: 'rhea@example.com',
+		author: 'saturn_geology_specialist',
+	},
+	{
+		id: 27,
+		name: {
+			title: 'Iapetus',
+			description: 'Two-toned moon of Saturn',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Iapetus_trailing_natural_color.jpg/2560px-Iapetus_trailing_natural_color.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2023-01-22',
+		datetime: '2023-01-22T14:20:00Z',
+		email: 'iapetus@example.com',
+		author: 'two_tone_surface_expert',
+	},
+	{
+		id: 28,
+		name: {
+			title: 'Dione',
+			description: 'Icy moon of Saturn',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/d/d0/Dione_in_natural_light_%28cropped%29.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2021-04-17',
+		datetime: '2021-04-17T12:00:00Z',
+		email: 'dione@example.com',
+		author: 'icy_surface_geochemist',
+	},
+	{
+		id: 29,
+		name: {
+			title: 'Tethys',
+			description: 'Mid-sized moon of Saturn',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Tethys_-_Rev_15_%2837267740632%29.png/960px-Tethys_-_Rev_15_%2837267740632%29.png',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Saturn', 'Moon' ],
+		satellites: 0,
+		date: '2020-12-05',
+		datetime: '2020-12-05T09:40:00Z',
+		email: 'tethys@example.com',
+		author: 'middle_satellite_researcher',
+	},
+	{
+		id: 30,
+		name: {
+			title: 'Miranda',
+			description: 'Unusual moon of Uranus',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Miranda_mosaic_in_color_-_Voyager_2.png/960px-Miranda_mosaic_in_color_-_Voyager_2.png',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Uranus', 'Moon' ],
+		satellites: 0,
+		date: '2024-02-28',
+		datetime: '2024-02-28T11:15:00Z',
+		email: 'miranda@example.com',
+		author: 'uranian_moon_geologist',
+	},
+	{
+		id: 31,
+		name: {
+			title: 'Ariel',
+			description: 'Brightest moon of Uranus',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Ariel_in_monochrome.jpg/960px-Ariel_in_monochrome.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Uranus', 'Moon' ],
+		satellites: 0,
+		date: '2023-09-10',
+		datetime: '2023-09-10T08:25:00Z',
+		email: 'ariel@example.com',
+		author: 'planetary_reflectance_specialist',
+	},
+	{
+		id: 32,
+		name: {
+			title: 'Umbriel',
+			description: 'Dark moon of Uranus',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/PIA00040_Umbrielx2.47.jpg/560px-PIA00040_Umbrielx2.47.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Uranus', 'Moon' ],
+		satellites: 0,
+		date: '2022-05-03',
+		datetime: '2022-05-03T15:50:00Z',
+		email: 'umbriel@example.com',
+		author: 'dark_surface_researcher',
+	},
+	{
+		id: 33,
+		name: {
+			title: 'Titania',
+			description: 'Largest moon of Uranus',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Titania_-_Jan_24_1986_%2822689891350%29.jpg/560px-Titania_-_Jan_24_1986_%2822689891350%29.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Uranus', 'Moon' ],
+		satellites: 0,
+		date: '2021-10-18',
+		datetime: '2021-10-18T13:35:00Z',
+		email: 'titania@example.com',
+		author: 'uranian_system_surveyor',
+	},
+	{
+		id: 34,
+		name: {
+			title: 'Oberon',
+			description: 'Outermost major moon of Uranus',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/6/6d/Oberon_in_true_color_by_Kevin_M._Gill.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Uranus', 'Moon' ],
+		satellites: 0,
+		date: '2020-07-22',
+		datetime: '2020-07-22T10:05:00Z',
+		email: 'oberon@example.com',
+		author: 'outer_uranian_orbitalist',
+	},
+	{
+		id: 35,
+		name: {
+			title: 'Ceres',
+			description: 'Largest object in the asteroid belt',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Ceres_-_RC3_-_Haulani_Crater_%2822381131691%29_%28cropped%29.jpg/560px-Ceres_-_RC3_-_Haulani_Crater_%2822381131691%29_%28cropped%29.jpg',
+		type: 'Dwarf planet',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Dwarf planet', 'Asteroid belt' ],
+		satellites: 0,
+		date: '2024-08-14',
+		datetime: '2024-08-14T16:40:00Z',
+		email: 'ceres@example.com',
+		author: 'asteroid_belt_specialist',
+	},
+	{
+		id: 36,
+		name: {
+			title: 'Makemake',
+			description: 'Reddish dwarf planet',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Makemake_and_its_moon.jpg/560px-Makemake_and_its_moon.jpg',
+		type: 'Dwarf planet',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Dwarf planet', 'Trans-Neptunian' ],
+		satellites: 1,
+		date: '2022-03-29',
+		datetime: '2022-03-29T12:55:00Z',
+		email: 'makemake@example.com',
+		author: 'trans_neptunian_researcher',
+	},
+	{
+		id: 37,
+		name: {
+			title: 'Haumea',
+			description: 'Elongated dwarf planet',
+		},
+		image: 'https://upload.wikimedia.org/wikipedia/commons/2/2b/Haumea_Hubble.png',
+		type: 'Dwarf planet',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Dwarf planet', 'Trans-Neptunian' ],
+		satellites: 2,
+		date: '2021-11-11',
+		datetime: '2021-11-11T09:10:00Z',
+		email: 'haumea@example.com',
+		author: 'dwarf_planet_dynamics_specialist',
+	},
 ];
 
 export const actions: Action< SpaceObject >[] = [