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

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 >[] = [

package/src/dataviews/stories/free-composition.tsx

@@ -7,14 +7,15 @@ import {
 	createInterpolateElement,
 } from '@wordpress/element';
 import {
-	Card,
-	CardBody,
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 	Button,
 } from '@wordpress/components';
 import { __, _n } from '@wordpress/i18n';
-import { Stack } from '@wordpress/ui';
+// TODO: enable in the ESlint rule once we complete
+// https://github.com/WordPress/gutenberg/issues/76135.
+// eslint-disable-next-line @wordpress/use-recommended-components
+import { Card, Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -52,8 +53,8 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 						</Stack>
 					</Stack>
 					<DataViews.FiltersToggled />
-					<Card variant="secondary">
-						<CardBody>
+					<Card.Root>
+						<Card.Content>
 							<Stack direction="column" gap="sm">
 								<Text size={ 18 } as="p">
 									{ createInterpolateElement(
@@ -87,10 +88,10 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 									) }
 								</Text>
 							</Stack>
-						</CardBody>
-					</Card>
-					<Card style={ { width: '100%' } }>
-						<CardBody>
+						</Card.Content>
+					</Card.Root>
+					<Card.Root style={ { width: '100%' } }>
+						<Card.Content>
 							<Stack
 								direction="row"
 								justify="space-between"
@@ -100,8 +101,8 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 								<DataViews.BulkActionToolbar />
 								<DataViews.Pagination />
 							</Stack>
-						</CardBody>
-					</Card>
+						</Card.Content>
+					</Card.Root>
 				</Stack>
 			</div>
 			<DataViews.Layout className="free-composition-dataviews-layout" />

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

@@ -41,9 +41,15 @@ const meta = {
 		layout: 'fullscreen',
 	},
 	decorators: [
-		( Story, { args }: { args: any } ) => (
+		( Story, { args, parameters }: { args: any; parameters: any } ) => (
 			<div style={ { padding: '1rem' } }>
-				<div style={ { height: args.containerHeight, minHeight: 0 } }>
+				<div
+					style={ {
+						height:
+							parameters.containerHeight ?? args.containerHeight,
+						minHeight: 0,
+					} }
+				>
 					<Story containerHeight={ args.containerHeight } />
 				</div>
 			</div>
@@ -259,4 +265,15 @@ export const WithCard = {
 
 export const InfiniteScroll = {
 	render: InfiniteScrollComponent,
+	parameters: {
+		containerHeight: '600px',
+	},
+	argTypes: {
+		containerHeight: {
+			control: false,
+			table: {
+				disable: true,
+			},
+		},
+	},
 };

package/src/dataviews/stories/infinite-scroll.tsx

@@ -1,9 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
-import { __experimentalText as Text } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,14 +15,14 @@ import {
 } from '../../constants';
 import filterSortAndPaginate from '../../utils/filter-sort-and-paginate';
 import type { View } from '../../types';
-import { actions, data, fields, type SpaceObject } from './fixtures';
+import { actions, data, fields } from './fixtures';
 
 const InfiniteScroll = () => {
 	const [ view, setView ] = useState< View >( {
 		type: LAYOUT_GRID,
 		search: '',
-		page: 1,
-		perPage: 6, // Start with a small number to demonstrate pagination
+		startPosition: 1,
+		perPage: 15, // Start with a small number to demonstrate pagination
 		filters: [],
 		fields: [ 'satellites' ],
 		titleField: 'title',
@@ -32,103 +30,25 @@ const InfiniteScroll = () => {
 		mediaField: 'image',
 		infiniteScrollEnabled: true, // Enable infinite scroll by default
 	} );
-	const { data: shownData } = useMemo( () => {
+	const { data: shownData, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( data, view, fields );
 	}, [ view ] );
-
-	// Custom pagination handler that simulates server-side pagination
-	const [ allLoadedRecords, setAllLoadedRecords ] = useState< SpaceObject[] >(
-		[]
-	);
-	const [ isLoadingMore, setIsLoadingMore ] = useState( false );
-
-	const totalItems = data.length;
-	const totalPages = Math.ceil( totalItems / 6 ); // perPage is 6.
-	const currentPage = view.page || 1;
-	const hasMoreData = currentPage < totalPages;
-	const getItemId = ( item: {
-		id: any;
-		title?: string;
-		description?: string;
-		image?: string;
-		type?: string;
-		isPlanet?: boolean;
-		categories?: string[];
-		satellites?: number;
-		date?: string;
-		datetime?: string;
-		email?: string;
-	} ) => item.id.toString();
-
-	const infiniteScrollHandler = useCallback( () => {
-		if ( isLoadingMore || currentPage >= totalPages ) {
-			return;
-		}
-
-		setIsLoadingMore( true );
-
-		setView( {
-			...view,
-			page: currentPage + 1,
-		} );
-	}, [ isLoadingMore, currentPage, totalPages, view ] );
-
-	// 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 );
-	}, [
-		shownData,
-		view.search,
-		view.filters,
-		view.perPage,
-		currentPage,
-		view.infiniteScrollEnabled,
-	] );
-
-	const paginationInfo = {
-		totalItems,
-		totalPages,
-		infiniteScrollHandler,
-	};
-
 	return (
 		<>
-			<Text
-				style={ {
-					marginBottom: '16px',
-					padding: '8px',
-					background: '#f0f0f0',
-					borderRadius: '4px',
-					display: 'block',
-				} }
-			>
-				{ __( 'Infinite Scroll Demo' ) }: { allLoadedRecords.length } of{ ' ' }
-				{ totalItems } items loaded.
-				{ isLoadingMore && __( 'Loading more…' ) }
-				{ ! hasMoreData && __( 'All items loaded!' ) }
-			</Text>
+			<style>{ `
+			.dataviews-wrapper {
+				height: 750px;
+				overflow: auto;
+			}
+		` }</style>
 			<DataViews
 				getItemId={ ( item ) => item.id.toString() }
 				paginationInfo={ paginationInfo }
-				data={ allLoadedRecords }
+				data={ shownData }
 				view={ view }
 				fields={ fields }
 				onChangeView={ setView }
 				actions={ actions }
-				isLoading={ isLoadingMore }
 				defaultLayouts={ {
 					[ LAYOUT_TABLE ]: {},
 					[ LAYOUT_GRID ]: {},

package/src/dataviews/stories/with-card.tsx

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useState, useMemo } from '@wordpress/element';
-import { Card, CardHeader, CardBody } from '@wordpress/components';
+// TODO: enable in the ESlint rule once we complete
+// https://github.com/WordPress/gutenberg/issues/76135.
+// eslint-disable-next-line @wordpress/use-recommended-components
+import { Card } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -39,28 +42,32 @@ const WithCardComponent = ( {
 		return filterSortAndPaginate( data, view, fields );
 	}, [ view ] );
 	return (
-		<Card>
-			<CardHeader>Header</CardHeader>
-			<CardBody style={ { height: containerHeight, minHeight: 0 } }>
-				<DataViews
-					getItemId={ ( item ) => item.id.toString() }
-					paginationInfo={ paginationInfo }
-					data={ shownData }
-					view={ view }
-					fields={ fields }
-					onChangeView={ setView }
-					actions={ actions.filter(
-						( action ) => ! action.supportsBulk
-					) }
-					defaultLayouts={ {
-						[ LAYOUT_TABLE ]: {},
-						[ LAYOUT_GRID ]: {},
-						[ LAYOUT_LIST ]: {},
-						[ LAYOUT_ACTIVITY ]: {},
-					} }
-				/>
-			</CardBody>
-		</Card>
+		<Card.Root>
+			<Card.Header>
+				<Card.Title>Header</Card.Title>
+			</Card.Header>
+			<Card.Content style={ { height: containerHeight, minHeight: 0 } }>
+				<Card.FullBleed>
+					<DataViews
+						getItemId={ ( item ) => item.id.toString() }
+						paginationInfo={ paginationInfo }
+						data={ shownData }
+						view={ view }
+						fields={ fields }
+						onChangeView={ setView }
+						actions={ actions.filter(
+							( action ) => ! action.supportsBulk
+						) }
+						defaultLayouts={ {
+							[ LAYOUT_TABLE ]: {},
+							[ LAYOUT_GRID ]: {},
+							[ LAYOUT_LIST ]: {},
+							[ LAYOUT_ACTIVITY ]: {},
+						} }
+					/>
+				</Card.FullBleed>
+			</Card.Content>
+		</Card.Root>
 	);
 };
 

package/src/dataviews/style.scss

@@ -126,11 +126,9 @@
 	@include link-reset();
 }
 
-/**
- * When DataViews are placed within cards, apply a consistent top padding.
- */
-.components-card__body:has(> .dataviews-wrapper),
-.components-card__body:has(> .dataviews-picker-wrapper) {
-	padding: $grid-unit-10 0 0;
-	overflow: hidden; // Prevent cells with white backgrounds overflowing the card
+.dataviews__view-actions--infinite-scroll {
+	position: sticky;
+	top: 0;
+	z-index: 2; // Ensure it appears above dataview items when scrolling.
+	background-color: #fff;
 }

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';
 
 /**
@@ -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', () => {