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

package/src/dataviews/test/dataviews.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -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 = [
@@ -240,8 +240,17 @@ describe( 'DataViews component', () => {
 		expect( screen.getByText( 'TEST TITLE' ) ).toBeInTheDocument();
 	} );
 
-	it( 'should trigger infinite scroll when the layout container scrolls', () => {
-		const infiniteScrollHandler = jest.fn();
+	it( 'should trigger infinite scroll when the layout container scrolls', async () => {
+		const onChangeView = jest.fn();
+
+		if ( typeof global.IntersectionObserver === 'undefined' ) {
+			( global as any ).IntersectionObserver = jest.fn( () => ( {
+				observe: jest.fn(),
+				unobserve: jest.fn(),
+				disconnect: jest.fn(),
+			} ) );
+		}
+
 		const { container } = render(
 			<DataViewWrapper
 				view={ {
@@ -249,11 +258,7 @@ describe( 'DataViews component', () => {
 					infiniteScrollEnabled: true,
 					perPage: 1,
 				} }
-				paginationInfo={ {
-					totalItems: data.length,
-					totalPages: data.length,
-					infiniteScrollHandler,
-				} }
+				onChangeView={ onChangeView }
 			/>
 		);
 		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -278,7 +283,14 @@ describe( 'DataViews component', () => {
 
 		fireEvent.scroll( layoutContainer );
 
-		expect( infiniteScrollHandler ).toHaveBeenCalledTimes( 1 );
+		await waitFor( () => {
+			expect( onChangeView ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					infiniteScrollEnabled: true,
+					startPosition: 2,
+				} )
+			);
+		} );
 	} );
 
 	describe( 'in table view', () => {
@@ -725,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

@@ -2,12 +2,19 @@
  * External dependencies
  */
 import type { ReactNode } 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';
 
 /**
@@ -30,6 +37,8 @@ import DataViewsViewConfig, {
 	ViewTypeMenu,
 } 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 { ActionButton, Field, View, SupportedLayouts } from '../types';
 import type { SelectionOrUpdater } from '../types/private';
 type ItemWithId = { id: string };
@@ -52,9 +61,8 @@ type DataViewsPickerProps< Item > = {
 	paginationInfo: {
 		totalItems: number;
 		totalPages: number;
-		infiniteScrollHandler?: () => void;
 	};
-	defaultLayouts: SupportedLayouts;
+	defaultLayouts?: SupportedLayouts;
 	selection: string[];
 	onChangeSelection: ( items: string[] ) => void;
 	children?: ReactNode;
@@ -63,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 >,
@@ -79,13 +92,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
@@ -119,15 +137,26 @@ 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 > ) {
-	const { infiniteScrollHandler } = paginationInfo;
+	// useData ensures data loading is correct whether infinite scroll is enabled or pagination is used.
+	const { data: displayData, setVisibleEntries } = useData( {
+		view,
+		data: data as any,
+		getItemId: getItemId as any,
+		selection,
+		paginationInfo,
+	} ) as {
+		data: ( Item & { position?: number } )[];
+		setVisibleEntries?: React.Dispatch< React.SetStateAction< number[] > >;
+	};
 	const containerRef = useRef< HTMLDivElement >( null );
 	const [ containerWidth, setContainerWidth ] = useState( 0 );
 	const resizeObserverRef = useResizeObserver(
@@ -148,6 +177,7 @@ function DataViewsPicker< Item >( {
 	}
 	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
 	const filters = useFilters( _fields, view );
+
 	const hasPrimaryOrLockedFilters = useMemo(
 		() =>
 			( filters || [] ).some(
@@ -159,50 +189,35 @@ function DataViewsPicker< 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.
+	// 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 ]
 	);
@@ -218,7 +233,7 @@ function DataViewsPicker< Item >( {
 				onChangeView,
 				fields: _fields,
 				actions,
-				data,
+				data: displayData,
 				isLoading,
 				paginationInfo,
 				isItemClickable,
@@ -237,8 +252,9 @@ function DataViewsPicker< Item >( {
 				config,
 				itemListLabel,
 				empty,
+				onReset,
 				hasInitiallyLoaded: true,
-				hasInfiniteScrollHandler: !! infiniteScrollHandler,
+				intersectionObserver,
 			} }
 		>
 			<div className="dataviews-picker-wrapper">

package/src/dataviews-picker/stories/fixtures.tsx

@@ -312,6 +312,276 @@ export const data: SpaceObject[] = [
 		datetime: '2020-03-01T10:15:20Z',
 		email: 'thessalonikopolymnianebuchodonossarinacharybdis@example.com',
 	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
+	{
+		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',
+	},
 ];
 
 export const fields: Field< SpaceObject >[] = [