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

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,11 +101,11 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 								<DataViews.BulkActionToolbar />
 								<DataViews.Pagination />
 							</Stack>
-						</CardBody>
-					</Card>
-					<DataViews.Layout className="free-composition-dataviews-layout" />
+						</Card.Content>
+					</Card.Root>
 				</Stack>
 			</div>
+			<DataViews.Layout className="free-composition-dataviews-layout" />
 		</>
 	);
 }
@@ -132,7 +133,7 @@ export const FreeCompositionComponent = () => {
 		type: LAYOUT_TABLE,
 		search: '',
 		page: 1,
-		perPage: 10,
+		perPage: 20,
 		layout: {
 			enableMoving: false,
 		},
@@ -152,38 +153,36 @@ export const FreeCompositionComponent = () => {
 	);
 
 	return (
-		<div className="free-composition">
-			<DataViews
-				getItemId={ ( item ) => item.id.toString() }
-				paginationInfo={ paginationInfo }
-				data={ processedData }
-				view={ view }
-				fields={ fields }
-				actions={ actions }
-				onChangeView={ setView }
-				defaultLayouts={ {
-					table: {},
-					grid: {},
-				} }
-				empty={
-					<Stack
-						direction="column"
-						gap="sm"
-						justify="space-around"
-						align="center"
-						className="free-composition-dataviews-empty"
-					>
-						<Text size={ 18 } as="p">
-							No planets
-						</Text>
-						<Text variant="muted">{ `Try a different search because “${ view.search }” returned no results.` }</Text>
-						<Button variant="secondary">Create new planet</Button>
-					</Stack>
-				}
-			>
-				<PlanetOverview planets={ planets } />
-			</DataViews>
-		</div>
+		<DataViews
+			getItemId={ ( item ) => item.id.toString() }
+			paginationInfo={ paginationInfo }
+			data={ processedData }
+			view={ view }
+			fields={ fields }
+			actions={ actions }
+			onChangeView={ setView }
+			defaultLayouts={ {
+				table: {},
+				grid: {},
+			} }
+			empty={
+				<Stack
+					direction="column"
+					gap="sm"
+					justify="space-around"
+					align="center"
+					className="free-composition-dataviews-empty"
+				>
+					<Text size={ 18 } as="p">
+						No planets
+					</Text>
+					<Text variant="muted">{ `Try a different search because “${ view.search }” returned no results.` }</Text>
+					<Button variant="secondary">Create new planet</Button>
+				</Stack>
+			}
+		>
+			<PlanetOverview planets={ planets } />
+		</DataViews>
 	);
 };
 

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

@@ -23,6 +23,16 @@ import './style.css';
 const meta = {
 	title: 'DataViews/DataViews',
 	component: DataViews,
+	args: {
+		containerHeight: 'auto',
+	},
+	argTypes: {
+		containerHeight: {
+			control: 'select',
+			options: [ 'auto', '600px', '80vh' ],
+			description: 'Height of the container',
+		},
+	},
 	// Use fullscreen layout and a wrapper div with padding to resolve conflicts
 	// between Ariakit's Dialog (usePreventBodyScroll) and Storybook's body padding
 	// (sb-main-padding class). This ensures consistent layout in DataViews stories
@@ -31,9 +41,17 @@ const meta = {
 		layout: 'fullscreen',
 	},
 	decorators: [
-		( Story ) => (
+		( Story, { args, parameters }: { args: any; parameters: any } ) => (
 			<div style={ { padding: '1rem' } }>
-				<Story />
+				<div
+					style={ {
+						height:
+							parameters.containerHeight ?? args.containerHeight,
+						minHeight: 0,
+					} }
+				>
+					<Story containerHeight={ args.containerHeight } />
+				</div>
 			</div>
 		),
 	],
@@ -212,7 +230,6 @@ export const Empty = {
 	render: EmptyComponent,
 	args: {
 		customEmpty: false,
-		containerHeight: '50vh',
 		isLoading: false,
 	},
 	argTypes: {
@@ -220,11 +237,6 @@ export const Empty = {
 			control: 'boolean',
 			description: 'Use custom empty state with planet illustration',
 		},
-		containerHeight: {
-			control: 'select',
-			options: [ 'auto', '50vh', '100vh' ],
-			description: 'Height of the container',
-		},
 		isLoading: {
 			control: 'boolean',
 			description: 'Show loading state',
@@ -253,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,109 +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 (
 		<>
 			<style>{ `
 			.dataviews-wrapper {
-				height: 600px;
+				height: 750px;
 				overflow: auto;
 			}
 		` }</style>
-			<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>
 			<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/layout-activity.tsx

@@ -642,6 +642,7 @@ const LayoutActivityComponent = ( {
 		<div
 			style={
 				{
+					height: '100%',
 					maxWidth: fullWidth ? undefined : '400px',
 					'--wp-dataviews-color-background': backgroundColor,
 				} as React.CSSProperties

package/src/dataviews/stories/layout-custom.tsx

@@ -104,7 +104,11 @@ function PosterGrid( { items }: { items: typeof data } ) {
  * - Render a completely custom layout (poster grid) instead of `<DataViews.Layout />`
  * - Still leverage DataViews sub-components for search and pagination
  */
-export const LayoutCustomComponent = () => {
+export const LayoutCustomComponent = ( {
+	containerHeight,
+}: {
+	containerHeight: string;
+} ) => {
 	const [ view, setView ] = useState< View >( {
 		type: LAYOUT_TABLE,
 		search: '',
@@ -128,11 +132,11 @@ export const LayoutCustomComponent = () => {
 			onChangeView={ setView }
 			defaultLayouts={ { table: {} } }
 		>
-			<div style={ { padding: '2px' } }>
+			<div style={ { padding: '2px', height: containerHeight } }>
 				<DataViews.Search />
 				<PosterGrid items={ processedData } />
-				<DataViews.Pagination />
 			</div>
+			<DataViews.Pagination />
 		</DataViews>
 	);
 };

package/src/dataviews/stories/layout-grid.tsx

@@ -63,6 +63,7 @@ export const LayoutTableComponent = ( {
 		<div
 			style={
 				{
+					height: '100%',
 					'--wp-dataviews-color-background': backgroundColor,
 				} as React.CSSProperties
 			}

package/src/dataviews/stories/layout-list.tsx

@@ -65,6 +65,7 @@ export const LayoutTableComponent = ( {
 		<div
 			style={
 				{
+					height: '100%',
 					maxWidth: fullWidth ? undefined : '400px',
 					'--wp-dataviews-color-background': backgroundColor,
 				} as React.CSSProperties

package/src/dataviews/stories/layout-table.tsx

@@ -64,6 +64,7 @@ export const LayoutTableComponent = ( {
 		<div
 			style={
 				{
+					height: '100%',
 					'--wp-dataviews-color-background': backgroundColor,
 				} as React.CSSProperties
 			}

package/src/dataviews/stories/style.css

@@ -3,11 +3,6 @@
 	text-wrap: pretty;
 }
 
-.free-composition {
-	height: 600px;
-	overflow: auto;
-}
-
 .free-composition-heading,
 .free-composition-header {
 	padding: 16px 48px;

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
@@ -18,7 +21,11 @@ import filterSortAndPaginate from '../../utils/filter-sort-and-paginate';
 import type { View } from '../../types';
 import { actions, data, fields } from './fixtures';
 
-const WithCardComponent = () => {
+const WithCardComponent = ( {
+	containerHeight,
+}: {
+	containerHeight: string;
+} ) => {
 	const [ view, setView ] = useState< View >( {
 		type: LAYOUT_TABLE,
 		search: '',
@@ -35,28 +42,32 @@ const WithCardComponent = () => {
 		return filterSortAndPaginate( data, view, fields );
 	}, [ view ] );
 	return (
-		<Card>
-			<CardHeader>Header</CardHeader>
-			<CardBody>
-				<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

@@ -15,7 +15,6 @@
 .dataviews-wrapper,
 .dataviews-picker-wrapper {
 	height: 100%;
-	overflow: auto;
 	box-sizing: border-box;
 	scroll-padding-bottom: $grid-unit-80;
 	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
@@ -127,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 { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -240,6 +240,59 @@ describe( 'DataViews component', () => {
 		expect( screen.getByText( 'TEST TITLE' ) ).toBeInTheDocument();
 	} );
 
+	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={ {
+					type: LAYOUT_GRID,
+					infiniteScrollEnabled: true,
+					perPage: 1,
+				} }
+				onChangeView={ onChangeView }
+			/>
+		);
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const layoutContainer = container.querySelector(
+			'.dataviews-layout__container'
+		) as HTMLDivElement;
+
+		Object.defineProperties( layoutContainer, {
+			scrollTop: {
+				configurable: true,
+				value: 500,
+			},
+			scrollHeight: {
+				configurable: true,
+				value: 1000,
+			},
+			clientHeight: {
+				configurable: true,
+				value: 500,
+			},
+		} );
+
+		fireEvent.scroll( layoutContainer );
+
+		await waitFor( () => {
+			expect( onChangeView ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					infiniteScrollEnabled: true,
+					startPosition: 2,
+				} )
+			);
+		} );
+	} );
+
 	describe( 'in table view', () => {
 		it( 'should display columns for each field', () => {
 			render( <DataViewWrapper /> );