@wordpress/dataviews 17.1.0 → 17.1.2-next.v.202607070741.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "17.1.0",
+	"version": "17.1.2-next.v.202607070741.0+a51d59513",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -51,21 +51,21 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@ariakit/react": "^0.4.29",
-		"@wordpress/base-styles": "^10.2.0",
-		"@wordpress/components": "^36.1.0",
-		"@wordpress/compose": "^8.3.0",
-		"@wordpress/data": "^10.50.0",
-		"@wordpress/date": "^5.50.0",
-		"@wordpress/deprecated": "^4.50.0",
-		"@wordpress/element": "^8.2.0",
-		"@wordpress/i18n": "^6.23.0",
-		"@wordpress/icons": "^15.1.0",
-		"@wordpress/keycodes": "^4.50.0",
-		"@wordpress/primitives": "^4.50.0",
-		"@wordpress/private-apis": "^1.50.0",
-		"@wordpress/ui": "^0.17.0",
-		"@wordpress/warning": "^3.50.0",
+		"@ariakit/react": "^0.4.32",
+		"@wordpress/base-styles": "^10.3.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/components": "^37.0.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/compose": "^8.3.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/data": "^10.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/date": "^5.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/deprecated": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/element": "^8.2.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/i18n": "^6.23.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/icons": "^15.1.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/keycodes": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/primitives": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/private-apis": "^1.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/ui": "^0.18.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/warning": "^3.50.1-next.v.202607070741.0+a51d59513",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
 		"date-fns": "^4.1.0",
@@ -100,5 +100,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "fee6e24e8e63d36f6bbcf487c193461e9bd79753"
+	"gitHead": "f637726e370c8b23695ed9af82adbe171ad235d8"
 }

package/src/components/dataform-controls/select.tsx

@@ -53,7 +53,6 @@ export default function Select< Item >( {
 			help={ description }
 			options={ elements }
 			onChange={ onChangeControl }
-			__next40pxDefaultSize
 			hideLabelFromVision={ hideLabelFromVision }
 			multiple={ isMultiple }
 			disabled={ disabled }

package/src/components/dataform-controls/toggle-group.tsx

@@ -55,7 +55,6 @@ export default function ToggleGroup< Item >( {
 			required={ !! field.isValid?.required }
 			markWhenOptional={ markWhenOptional }
 			customValidity={ getCustomValidity( isValid, validity ) }
-			__next40pxDefaultSize
 			isBlock
 			label={ field.label }
 			help={ selectedOption?.description || field.description }

package/src/components/dataform-controls/utils/relative-date-control.tsx

@@ -107,7 +107,6 @@ export default function RelativeDateControl< Item >( {
 				/>
 				<SelectControl
 					className="dataviews-controls__relative-date-unit"
-					__next40pxDefaultSize
 					label={ __( 'Unit' ) }
 					value={ unit }
 					options={ options }

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

@@ -13,7 +13,9 @@ import { Stack } from '@wordpress/ui';
  * Internal dependencies
  */
 import DataViewsContext from '../dataviews-context';
-import DataViewsPagination from '../dataviews-pagination';
+import DataViewsPagination, {
+	hasPaginationControls,
+} from '../dataviews-pagination';
 import {
 	BulkActionsFooter,
 	useSomeItemHasAPossibleBulkAction,
@@ -41,34 +43,33 @@ export default function DataViewsFooter() {
 		useSomeItemHasAPossibleBulkAction( actions, data ) &&
 		[ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type );
 
-	if (
-		! isRefreshing &&
-		( ! totalItems ||
-			! totalPages ||
-			( totalPages <= 1 && ! hasBulkActions ) )
-	) {
+	const hasPagination = hasPaginationControls( view, {
+		totalItems,
+		totalPages,
+	} );
+
+	if ( ! totalItems || ( ! hasBulkActions && ! hasPagination ) ) {
 		return null;
 	}
+
 	return (
-		( !! totalItems || isRefreshing ) && (
-			<div
-				className="dataviews-footer"
-				// @ts-ignore
-				inert={ isRefreshing ? 'true' : undefined }
+		<div
+			className="dataviews-footer"
+			// @ts-ignore
+			inert={ isRefreshing ? 'true' : undefined }
+		>
+			<Stack
+				direction="row"
+				justify="end"
+				align="center"
+				className={ clsx( 'dataviews-footer__content', {
+					'is-refreshing': isDelayedRefreshing,
+				} ) }
+				gap="sm"
 			>
-				<Stack
-					direction="row"
-					justify="end"
-					align="center"
-					className={ clsx( 'dataviews-footer__content', {
-						'is-refreshing': isDelayedRefreshing,
-					} ) }
-					gap="sm"
-				>
-					{ hasBulkActions && <BulkActionsFooter /> }
-					<DataViewsPagination />
-				</Stack>
-			</div>
-		)
+				{ hasBulkActions && <BulkActionsFooter /> }
+				<DataViewsPagination />
+			</Stack>
+		</div>
 	);
 }

package/src/components/dataviews-layouts/grid/preview-size-picker.tsx

@@ -84,7 +84,6 @@ export default function PreviewSizePicker() {
 
 	return (
 		<RangeControl
-			__next40pxDefaultSize
 			showTooltip={ false }
 			label={ __( 'Preview size' ) }
 			value={ previewSizeToUse }

package/src/components/dataviews-layouts/list/index.tsx

@@ -394,6 +394,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	} = props;
 	const baseId = useInstanceId( ViewList, 'view-list' );
 	const isDelayedLoading = useDelayedLoading( !! isLoading );
+	const { paginationInfo } = useContext( DataViewsContext );
 
 	const selectedItem = data?.findLast( ( item ) =>
 		selection.includes( getItemId( item ) )
@@ -535,6 +536,11 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	const dataByGroup =
 		hasData && groupField ? getDataByGroup( data, groupField ) : null;
 	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
+	// Whether the server has more rows beyond the current window.
+	const hasMoreItems =
+		isInfiniteScroll &&
+		( view.startPosition ?? 1 ) + ( view.perPage ?? 0 ) <
+			paginationInfo.totalItems;
 	if ( ! hasData ) {
 		return (
 			<div
@@ -663,8 +669,14 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 					);
 				} ) }
 			</Composite>
-			{ isInfiniteScroll && isLoading && (
-				<p className="dataviews-loading-more">
+			{ ( hasMoreItems || ( isInfiniteScroll && isLoading ) ) && (
+				// Keep the spinner's height reserved while loading more so the
+				// scroll position doesn't bounce. Hidden, and silent to a11y,
+				// while idle.
+				<p
+					className="dataviews-loading-more"
+					aria-hidden={ ! isLoading }
+				>
 					<Spinner />
 				</p>
 			) }

package/src/components/dataviews-layouts/utils/density-picker.tsx

@@ -29,7 +29,6 @@ export default function DensityPicker() {
 		| ViewPickerGrid;
 	return (
 		<ToggleGroupControl
-			size="__unstable-large"
 			label={ __( 'Density' ) }
 			value={ view.layout?.density || 'balanced' }
 			onChange={ ( value ) => {

package/src/components/dataviews-layouts/utils/preview-size-picker.tsx

@@ -63,7 +63,6 @@ export default function PreviewSizePicker() {
 
 	return (
 		<RangeControl
-			__next40pxDefaultSize
 			showTooltip={ false }
 			label={ __( 'Preview size' ) }
 			value={ previewSizeToUse }

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

@@ -11,18 +11,28 @@ import { Stack } from '@wordpress/ui';
  * Internal dependencies
  */
 import DataViewsContext from '../dataviews-context';
+import type { View } from '../../types';
+
+export function hasPaginationControls(
+	view: View,
+	paginationInfo: { totalItems: number; totalPages: number }
+): boolean {
+	return (
+		! view.infiniteScrollEnabled &&
+		paginationInfo.totalItems > 0 &&
+		paginationInfo.totalPages > 1
+	);
+}
 
 export function DataViewsPagination() {
-	const {
-		view,
-		onChangeView,
-		paginationInfo: { totalItems = 0, totalPages },
-	} = useContext( DataViewsContext );
+	const { view, onChangeView, paginationInfo } =
+		useContext( DataViewsContext );
 
-	if ( ! totalItems || ! totalPages || view.infiniteScrollEnabled ) {
+	if ( ! hasPaginationControls( view, paginationInfo ) ) {
 		return null;
 	}
 
+	const { totalPages } = paginationInfo;
 	const currentPage = view.page ?? 1;
 	const pageSelectOptions = Array.from( Array( totalPages ) ).map(
 		( _, i ) => {
@@ -44,84 +54,78 @@ export function DataViewsPagination() {
 	);
 
 	return (
-		!! totalItems &&
-		totalPages !== 1 && (
+		<Stack
+			direction="row"
+			className="dataviews-pagination"
+			justify="end"
+			align="center"
+			gap="xl"
+		>
 			<Stack
 				direction="row"
-				className="dataviews-pagination"
-				justify="end"
+				justify="flex-start"
 				align="center"
-				gap="xl"
+				gap="xs"
+				className="dataviews-pagination__page-select"
 			>
-				<Stack
-					direction="row"
-					justify="flex-start"
-					align="center"
-					gap="xs"
-					className="dataviews-pagination__page-select"
-				>
-					{ createInterpolateElement(
-						sprintf(
-							// translators: 1: Current page number, 2: Total number of pages.
-							_x(
-								'<div>Page</div>%1$s<div>of %2$d</div>',
-								'paging'
-							),
-							'<CurrentPage />',
-							totalPages
+				{ createInterpolateElement(
+					sprintf(
+						// translators: 1: Current page number, 2: Total number of pages.
+						_x( '<div>Page</div>%1$s<div>of %2$d</div>', 'paging' ),
+						'<CurrentPage />',
+						totalPages
+					),
+					{
+						div: <div aria-hidden />,
+						// @ts-expect-error — Tag injected via sprintf argument, not visible in format string.
+						CurrentPage: (
+							<SelectControl
+								aria-label={ __( 'Current page' ) }
+								value={ currentPage.toString() }
+								options={ pageSelectOptions }
+								onChange={ ( newValue ) => {
+									onChangeView( {
+										...view,
+										page: +newValue,
+									} );
+								} }
+								size="small"
+								variant="minimal"
+							/>
 						),
-						{
-							div: <div aria-hidden />,
-							// @ts-expect-error — Tag injected via sprintf argument, not visible in format string.
-							CurrentPage: (
-								<SelectControl
-									aria-label={ __( 'Current page' ) }
-									value={ currentPage.toString() }
-									options={ pageSelectOptions }
-									onChange={ ( newValue ) => {
-										onChangeView( {
-											...view,
-											page: +newValue,
-										} );
-									} }
-									size="small"
-									variant="minimal"
-								/>
-							),
-						}
-					) }
-				</Stack>
-				<Stack direction="row" gap="xs" align="center">
-					<Button
-						onClick={ () =>
-							onChangeView( {
-								...view,
-								page: currentPage - 1,
-							} )
-						}
-						disabled={ currentPage === 1 }
-						accessibleWhenDisabled
-						label={ __( 'Previous page' ) }
-						icon={ isRTL() ? next : previous }
-						showTooltip
-						size="compact"
-						tooltipPosition="top"
-					/>
-					<Button
-						onClick={ () =>
-							onChangeView( { ...view, page: currentPage + 1 } )
-						}
-						disabled={ currentPage >= totalPages }
-						accessibleWhenDisabled
-						label={ __( 'Next page' ) }
-						icon={ isRTL() ? previous : next }
-						showTooltip
-						size="compact"
-						tooltipPosition="top"
-					/>
-				</Stack>
+					}
+				) }
+			</Stack>
+			<Stack direction="row" gap="xs" align="center">
+				<Button
+					onClick={ () =>
+						onChangeView( {
+							...view,
+							page: currentPage - 1,
+						} )
+					}
+					disabled={ currentPage === 1 }
+					accessibleWhenDisabled
+					label={ __( 'Previous page' ) }
+					icon={ isRTL() ? next : previous }
+					showTooltip
+					size="compact"
+					tooltipPosition="top"
+				/>
+				<Button
+					onClick={ () =>
+						onChangeView( { ...view, page: currentPage + 1 } )
+					}
+					disabled={ currentPage >= totalPages }
+					accessibleWhenDisabled
+					label={ __( 'Next page' ) }
+					icon={ isRTL() ? previous : next }
+					showTooltip
+					size="compact"
+					tooltipPosition="top"
+				/>
 			</Stack>
-		)
+		</Stack>
 	);
 }
 

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

@@ -125,7 +125,6 @@ function SortFieldControl() {
 
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			label={ __( 'Sort by' ) }
 			value={ view.sort?.field }
 			options={ orderOptions }
@@ -160,7 +159,6 @@ function SortDirectionControl() {
 	return (
 		<ToggleGroupControl
 			className="dataviews-view-config__sort-direction"
-			__next40pxDefaultSize
 			isBlock
 			label={ __( 'Order' ) }
 			value={ value }
@@ -214,7 +212,6 @@ function ItemsPerPageControl() {
 
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			isBlock
 			label={ __( 'Items per page' ) }
 			value={ view.perPage || 10 }

package/src/components/dataviews-view-config/style.scss

@@ -1,6 +1,5 @@
 .dataviews-view-config {
 	width: 320px;
-	/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
 	container-type: inline-size;
 	font-size: var(--wpds-typography-font-size-md);
 	line-height: var(--wpds-typography-line-height-sm);

package/src/dataform/index.tsx

@@ -12,6 +12,11 @@ import { DataFormProvider } from '../components/dataform-context';
 import { DataFormLayout } from '../components/dataform-layouts/data-form-layout';
 import normalizeForm from '../components/dataform-layouts/normalize-form';
 
+/**
+ * `DataForm` renders an auto-generated form for viewing and editing the fields
+ * of a data item, driven by a fields and form layout configuration. Use it to
+ * edit items of a dataset, often alongside `DataViews`.
+ */
 export default function DataForm< Item >( {
 	data,
 	form,

package/src/dataviews/index.tsx

@@ -310,6 +310,11 @@ function DataViews< Item >( {
 	);
 }
 
+/**
+ * `DataViews` renders a dataset using configurable layouts (table, grid, list)
+ * with built-in search, filtering, sorting, pagination, and actions. Use it to
+ * display and manage a collection of records.
+ */
 // Populate the DataViews sub components
 const DataViewsSubComponents = DataViews as typeof DataViews & {
 	BulkActionToolbar: typeof BulkActionsFooter;

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

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViews from '../index';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../constants';
+import filterSortAndPaginate from '../../utils/filter-sort-and-paginate';
+import type { View } from '../../types';
+import { actions, data as fixtureData, fields } from './fixtures';
+
+// The fixtures only contain ~50 rows; repeat them (with unique ids) so there
+// are enough rows to page through several times.
+const data = Array.from( { length: 8 }, ( _, batch ) =>
+	fixtureData.map( ( item ) => ( {
+		...item,
+		id: item.id + batch * 1000,
+		name: {
+			...item.name,
+			title: `${ item.name.title } #${ batch + 1 }`,
+		},
+	} ) )
+).flat();
+
+const PAGE = 20;
+// Simulated per-page network latency.
+const LOAD_DELAY_MS = 800;
+
+/**
+ * A realistic network-backed infinite-scroll consumer: the hook advances
+ * `view.startPosition`, and the consumer fetches that window asynchronously
+ * (toggling `isLoading`) while reporting the true server total.
+ */
+const AsyncInfiniteScroll = () => {
+	const [ view, setView ] = useState< View >( {
+		type: LAYOUT_LIST,
+		search: '',
+		startPosition: 1,
+		perPage: PAGE,
+		filters: [],
+		fields: [ 'satellites' ],
+		titleField: 'title',
+		descriptionField: 'description',
+		mediaField: 'image',
+		infiniteScrollEnabled: true,
+	} );
+
+	// The "server": how many rows have been delivered so far, and whether a
+	// request for the current window is in flight.
+	const [ loadedCount, setLoadedCount ] = useState( PAGE );
+	const [ isLoading, setIsLoading ] = useState( false );
+
+	const startPosition = view.startPosition ?? 1;
+	const perPage = view.perPage ?? PAGE;
+	// Rows required to fill the window the hook is currently asking for.
+	const needed = Math.min( startPosition - 1 + perPage, data.length );
+
+	useEffect( () => {
+		if ( needed <= loadedCount ) {
+			return undefined;
+		}
+		setIsLoading( true );
+		const timer = setTimeout( () => {
+			setLoadedCount( needed );
+			setIsLoading( false );
+		}, LOAD_DELAY_MS );
+		return () => clearTimeout( timer );
+	}, [ needed, loadedCount ] );
+
+	const loadedData = useMemo(
+		() => data.slice( 0, loadedCount ),
+		[ loadedCount ]
+	);
+	const { data: shownData, paginationInfo } = useMemo(
+		() => filterSortAndPaginate( loadedData, view, fields ),
+		[ loadedData, view ]
+	);
+	// Report the true server total (not just what's loaded) so infinite scroll
+	// keeps requesting until the dataset is exhausted.
+	const serverPaginationInfo = useMemo(
+		() => ( { ...paginationInfo, totalItems: data.length } ),
+		[ paginationInfo ]
+	);
+
+	return (
+		<div style={ { height: '100%' } }>
+			<style>{ `
+			.dataviews-wrapper {
+				height: 100%;
+				overflow: auto;
+			}
+		` }</style>
+			<DataViews
+				getItemId={ ( item ) => item.id.toString() }
+				paginationInfo={ serverPaginationInfo }
+				data={ shownData }
+				view={ view }
+				fields={ fields }
+				onChangeView={ setView }
+				isLoading={ isLoading }
+				actions={ actions }
+				defaultLayouts={ {
+					[ LAYOUT_TABLE ]: true,
+					[ LAYOUT_GRID ]: true,
+					[ LAYOUT_LIST ]: true,
+				} }
+			/>
+		</div>
+	);
+};
+
+export default AsyncInfiniteScroll;

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

@@ -13,6 +13,7 @@ import LayoutGridComponent from './layout-grid';
 import LayoutListComponent from './layout-list';
 import LayoutCustomComponent from './layout-custom';
 import InfiniteScrollComponent from './infinite-scroll';
+import AsyncInfiniteScrollComponent from './async-infinite-scroll';
 import WithCardComponent from './with-card';
 import FreeCompositionComponent from './free-composition';
 import MinimalUIComponent from './minimal-ui';
@@ -24,6 +25,11 @@ const meta = {
 	tags: [ 'manifest' ],
 	title: 'DataViews/DataViews',
 	component: DataViews,
+	// Temporary: Due to an upstream bug, render the root explicitly so the
+	// components manifest extractor can resolve props from the JSX.
+	//
+	// See: https://github.com/storybookjs/storybook/issues/34877
+	render: ( args ) => <DataViews { ...args } />,
 	args: {
 		containerHeight: 'auto',
 	},
@@ -278,3 +284,24 @@ export const InfiniteScroll = {
 		},
 	},
 };
+
+/**
+ * Infinite scroll where pages load asynchronously (with `isLoading`), like a
+ * real network-backed consumer that fetches one window at a time. Reproduces
+ * the scroll-position jump that the synchronous story does not.
+ */
+export const AsyncInfiniteScroll = {
+	render: AsyncInfiniteScrollComponent,
+	parameters: {
+		// Fill the viewport so the list bottom is the window bottom.
+		containerHeight: 'calc(100vh - 2rem)',
+	},
+	argTypes: {
+		containerHeight: {
+			control: false,
+			table: {
+				disable: true,
+			},
+		},
+	},
+};

package/src/dataviews/style.scss

@@ -17,7 +17,6 @@
 	min-height: 0;
 	box-sizing: border-box;
 	scroll-padding-bottom: 64px;
-	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
 	container: dataviews-wrapper / inline-size;
 	display: flex;
 	flex-direction: column;
@@ -70,6 +69,11 @@
 
 .dataviews-loading-more {
 	text-align: center;
+
+	// Hidden but keeps its box so the reserved height stays constant.
+	&[aria-hidden="true"] {
+		visibility: hidden;
+	}
 }
 
 @container (max-width: 430px) {

package/src/dataviews-picker/index.tsx

@@ -269,6 +269,11 @@ function DataViewsPicker< Item >( {
 	);
 }
 
+/**
+ * `DataViewsPicker` renders a dataset allowing users to select one or multiple
+ * items. It shares the layouts, search, and filtering of `DataViews` but is
+ * geared toward choosing items rather than managing them.
+ */
 // Populate the DataViews sub components
 const DataViewsPickerSubComponents =
 	DataViewsPicker as typeof DataViewsPicker & {