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

package/src/components/dataviews-layouts/grid/style.scss

@@ -57,6 +57,10 @@
 			}
 		}
 	}
+}
+
+.dataviews-view-grid,
+.dataviews-view-grid-infinite-scroll {
 
 	.dataviews-view-grid__card {
 		height: 100%;
@@ -246,7 +250,7 @@
 }
 
 .dataviews-view-grid__media--clickable {
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 }
 
 .dataviews-view-grid__group-header {

package/src/components/dataviews-layouts/list/style.scss

@@ -115,7 +115,7 @@ div.dataviews-view-list {
 		border: none;
 		background: none;
 		padding: 0;
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 
 		&:focus-visible {
 			outline: none;

package/src/components/dataviews-layouts/picker-grid/index.tsx

@@ -16,7 +16,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
-import { useContext } from '@wordpress/element';
+import { useContext, useRef } from '@wordpress/element';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -35,6 +35,11 @@ import type { SetSelection } from '../../../types/private';
 import { GridItems } from '../utils/grid-items';
 const { Badge } = unlock( componentsPrivateApis );
 import getDataByGroup from '../utils/get-data-by-group';
+import { useGridColumns } from '../grid/preview-size-picker';
+import {
+	useIntersectionObserver,
+	usePlaceholdersNeeded,
+} from '../utils/use-infinite-scroll';
 
 interface GridItemProps< Item > {
 	view: ViewPickerGridType;
@@ -73,7 +78,12 @@ function GridItem< Item >( {
 }: GridItemProps< Item > ) {
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const id = getItemId( item );
+	const elementRef = useRef< HTMLButtonElement >( null );
+
 	const isSelected = selection.includes( id );
+
+	useIntersectionObserver( elementRef, posinset );
+
 	const renderedMediaField = mediaField?.render ? (
 		<mediaField.render
 			item={ item }
@@ -88,6 +98,7 @@ function GridItem< Item >( {
 
 	return (
 		<Composite.Item
+			ref={ elementRef }
 			aria-label={
 				titleField
 					? titleField.getValue( { item } ) || __( '(no title)' )
@@ -105,6 +116,7 @@ function GridItem< Item >( {
 			} ) }
 			aria-selected={ isSelected }
 			onClick={ () => {
+				// Toggle in/out of selection array
 				if ( isSelected ) {
 					onChangeSelection(
 						selection.filter( ( itemId ) => id !== itemId )
@@ -318,12 +330,21 @@ function ViewPickerGrid< Item >( {
 		: null;
 	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
 
-	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
+	const isInfiniteScroll =
+		( view.infiniteScrollEnabled && ! dataByGroup ) ?? false;
 
 	const currentPage = view?.page ?? 1;
 	const perPage = view?.perPage ?? 0;
 	const setSize = isInfiniteScroll ? paginationInfo?.totalItems : undefined;
 
+	// Calculate placeholders needed for infinite scroll
+	const gridColumns = useGridColumns();
+	const placeholdersNeeded = usePlaceholdersNeeded(
+		data,
+		isInfiniteScroll,
+		gridColumns
+	);
+
 	return (
 		<>
 			{
@@ -378,10 +399,12 @@ function ViewPickerGrid< Item >( {
 										}
 									>
 										{ groupItems.map( ( item ) => {
+											// Use position from item if available (infinite scroll), otherwise calculate.
 											const posInSet =
+												( item as any ).position ??
 												( currentPage - 1 ) * perPage +
-												data.indexOf( item ) +
-												1;
+													data.indexOf( item ) +
+													1;
 											return (
 												<GridItem
 													key={ getItemId( item ) }
@@ -451,17 +474,28 @@ function ViewPickerGrid< Item >( {
 						aria-multiselectable={ isMultiselect }
 						aria-label={ itemListLabel }
 					>
-						{ data.map( ( item, index ) => {
-							let posinset = isInfiniteScroll
-								? index + 1
-								: undefined;
-
-							if ( ! isInfiniteScroll ) {
-								// When infinite scroll isn't active, take pagination into account
-								// when calculating the posinset.
-								posinset =
-									( currentPage - 1 ) * perPage + index + 1;
-							}
+						{ /* Render placeholders for unloaded items in first row */ }
+						{ Array.from( { length: placeholdersNeeded } ).map(
+							( _, index ) => (
+								<Composite.Item
+									key={ `placeholder-${ index }` }
+									render={ ( { children, ...props } ) => (
+										<Stack
+											direction="column"
+											children={ children }
+											{ ...props }
+										/>
+									) }
+									role="option"
+									aria-hidden
+									tabIndex={ -1 }
+									className="dataviews-view-picker-grid__card dataviews-view-picker-grid__placeholder"
+								/>
+							)
+						) }
+						{ data.map( ( item ) => {
+							// Use position from item for accessibility in infinite scroll mode.
+							const posinset = ( item as any ).position;
 
 							return (
 								<GridItem

package/src/components/dataviews-layouts/picker-grid/style.scss

@@ -174,7 +174,7 @@
 }
 
 .dataviews-view-picker-grid__media--clickable {
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 }
 
 .dataviews-view-picker-grid-group__header {

package/src/components/dataviews-layouts/picker-table/index.tsx

@@ -33,6 +33,7 @@ import type { SetSelection } from '../../../types/private';
 import ColumnHeaderMenu from '../table/column-header-menu';
 import ColumnPrimary from '../table/column-primary';
 import getDataByGroup from '../utils/get-data-by-group';
+import { useIntersectionObserver } from '../utils/use-infinite-scroll';
 
 interface TableColumnFieldProps< Item > {
 	fields: NormalizedField< Item >[];
@@ -95,8 +96,13 @@ function TableRow< Item >( {
 	posinset,
 }: TableRowProps< Item > ) {
 	const { paginationInfo } = useContext( DataViewsContext );
+
 	const isSelected = selection.includes( id );
+
 	const [ isHovered, setIsHovered ] = useState( false );
+	const elementRef = useRef< HTMLButtonElement >( null );
+
+	useIntersectionObserver( elementRef, posinset );
 	const {
 		showTitle = true,
 		showMedia = true,
@@ -119,6 +125,7 @@ function TableRow< Item >( {
 	return (
 		<Composite.Item
 			key={ id }
+			ref={ elementRef }
 			render={ ( { children, ...props } ) => (
 				<tr
 					className={ clsx( 'dataviews-view-table__row', {
@@ -136,6 +143,7 @@ function TableRow< Item >( {
 			aria-posinset={ posinset }
 			role={ infiniteScrollEnabled ? 'article' : 'option' }
 			onClick={ () => {
+				// Toggle in/out of selection array
 				if ( isSelected ) {
 					onChangeSelection(
 						selection.filter( ( itemId ) => id !== itemId )
@@ -150,6 +158,7 @@ function TableRow< Item >( {
 		>
 			<td
 				className="dataviews-view-table__checkbox-column"
+				// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
 				role="presentation"
 			>
 				<div className="dataviews-view-table__cell-content-wrapper">
@@ -167,7 +176,10 @@ function TableRow< Item >( {
 			</td>
 
 			{ hasPrimaryColumn && (
-				<td role="presentation">
+				<td
+					// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+					role="presentation"
+				>
 					<ColumnPrimary
 						item={ item }
 						titleField={ showTitle ? titleField : undefined }
@@ -192,6 +204,7 @@ function TableRow< Item >( {
 							maxWidth,
 							minWidth,
 						} }
+						// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
 						role="presentation"
 					>
 						<TableColumnField
@@ -236,6 +249,12 @@ function ViewPickerTable< Item >( {
 		}
 	} );
 
+	const groupField = view.groupBy?.field
+		? fields.find( ( f ) => f.id === view.groupBy?.field )
+		: null;
+	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
+	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
+
 	const tableNoticeId = useId();
 
 	if ( nextHeaderMenuToFocus ) {
@@ -264,10 +283,6 @@ function ViewPickerTable< Item >( {
 		( field ) => field.id === view.descriptionField
 	);
 
-	const groupField = view.groupBy?.field
-		? fields.find( ( f ) => f.id === view.groupBy?.field )
-		: null;
-	const dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const hasPrimaryColumn =
 		( titleField && showTitle ) ||
@@ -285,7 +300,6 @@ function ViewPickerTable< Item >( {
 				headerMenuRefs.current.delete( column );
 			}
 		};
-	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
 
 	return (
 		<>
@@ -319,6 +333,7 @@ function ViewPickerTable< Item >( {
 									data={ data }
 									actions={ actions }
 									getItemId={ getItemId }
+									disableSelectAll={ isInfiniteScroll }
 								/>
 							) }
 						</th>
@@ -400,6 +415,7 @@ function ViewPickerTable< Item >( {
 											1
 										}
 										className="dataviews-view-table__group-header-cell"
+										// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
 										role="presentation"
 									>
 										{ view.groupBy?.showLabel === false
@@ -441,23 +457,29 @@ function ViewPickerTable< Item >( {
 						orientation="vertical"
 					>
 						{ hasData &&
-							data.map( ( item, index ) => (
-								<TableRow
-									key={ getItemId( item ) }
-									item={ item }
-									fields={ fields }
-									id={ getItemId( item ) || index.toString() }
-									view={ view }
-									titleField={ titleField }
-									mediaField={ mediaField }
-									descriptionField={ descriptionField }
-									selection={ selection }
-									getItemId={ getItemId }
-									onChangeSelection={ onChangeSelection }
-									multiselect={ isMultiselect }
-									posinset={ index + 1 }
-								/>
-							) ) }
+							data.map( ( item, index ) => {
+								const itemId = getItemId( item );
+								// Use position from item for accessibility in infinite scroll mode.
+								const posinset = ( item as any ).position;
+
+								return (
+									<TableRow
+										key={ itemId }
+										item={ item }
+										fields={ fields }
+										id={ itemId || index.toString() }
+										view={ view }
+										titleField={ titleField }
+										mediaField={ mediaField }
+										descriptionField={ descriptionField }
+										selection={ selection }
+										getItemId={ getItemId }
+										onChangeSelection={ onChangeSelection }
+										multiselect={ isMultiselect }
+										posinset={ posinset }
+									/>
+								);
+							} ) }
 					</Composite>
 				) }
 			</table>

package/src/components/dataviews-layouts/picker-table/style.scss

@@ -36,7 +36,7 @@
 
 	// When used in picker context, ensure row selection works as expected
 	.dataviews-view-table__row {
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 
 		&.is-selected {
 			// Ensure selected rows are visually distinct

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

@@ -267,7 +267,6 @@ function TableRow< Item >( {
 				// itself (to toggle row selection) without erroneously
 				// intercepting click events from ItemActions.
 
-				/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 				<td
 					className={ clsx( 'dataviews-view-table__actions-column', {
 						'dataviews-view-table__actions-column--sticky': true,
@@ -278,7 +277,6 @@ function TableRow< Item >( {
 				>
 					<ItemActions item={ item } actions={ actions } />
 				</td>
-				/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 			) }
 		</tr>
 	);

package/src/components/dataviews-layouts/utils/use-infinite-scroll.ts

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../../dataviews-context';
+
+/**
+ * Hook to set up an IntersectionObserver for infinite scroll items.
+ * Observes the element and triggers the callback when the item becomes visible.
+ *
+ * @param elementRef - Ref to the DOM element to observe.
+ * @param posinset   - The position of the item in the set (1-based index).
+ */
+export function useIntersectionObserver(
+	elementRef: React.RefObject< HTMLElement | null >,
+	posinset: number | undefined
+) {
+	const { intersectionObserver } = useContext( DataViewsContext );
+
+	useEffect( () => {
+		const element = elementRef.current;
+		if ( ! element || posinset === undefined || ! intersectionObserver ) {
+			return;
+		}
+
+		intersectionObserver.observe( element );
+
+		return () => {
+			intersectionObserver.unobserve( element );
+		};
+	}, [ elementRef, intersectionObserver, posinset ] );
+}
+
+/**
+ * Hook to calculate the number of placeholder items needed for the first row
+ * in an infinite scroll grid layout.
+ *
+ * When items are loaded starting from a position other than 1, placeholders
+ * are needed to maintain proper grid alignment.
+ *
+ * @param data             - The array of data items.
+ * @param isInfiniteScroll - Whether infinite scroll is enabled.
+ * @param gridColumns      - The number of columns in the grid.
+ * @return The number of placeholder items needed.
+ */
+export function usePlaceholdersNeeded< Item >(
+	data: Item[],
+	isInfiniteScroll: boolean,
+	gridColumns: number
+): number {
+	const hasData = !! data?.length;
+	const firstItemPosition =
+		hasData && isInfiniteScroll
+			? ( data[ 0 ] as { position?: number } ).position
+			: undefined;
+
+	return firstItemPosition && gridColumns
+		? ( firstItemPosition - 1 ) % gridColumns
+		: 0;
+}

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

@@ -72,6 +72,7 @@ export function DataViewsPagination() {
 						),
 						{
 							div: <div aria-hidden />,
+							// @ts-expect-error — Tag injected via sprintf argument, not visible in format string.
 							CurrentPage: (
 								<SelectControl
 									aria-label={ __( 'Current page' ) }

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/dataform/stories/content.story.tsx

@@ -297,7 +297,7 @@ export const HighLevelHelpText: Story = {
 				fields: [
 					{
 						id: 'accountForm',
-						label: 'Account Information',
+						label: 'Account information',
 						description:
 							'We collect this information to create your account and provide personalized services. Your data will be kept secure and used only for account management and service improvements.',
 						children: [ 'name', 'email', 'phone' ],

package/src/dataform/stories/data-adapter.tsx

@@ -54,17 +54,17 @@ const DataAdapterComponent = () => {
 		// for nested data based on the field id.
 		{
 			id: 'user.profile.name',
-			label: 'User Name',
+			label: 'User name',
 			type: 'text',
 		},
 		{
 			id: 'user.profile.email',
-			label: 'User Email',
+			label: 'User email',
 			type: 'email',
 		},
 		{
 			id: 'user.profile.tags',
-			label: 'User Tags',
+			label: 'User tags',
 			type: 'array',
 			placeholder: 'Enter comma-separated tags',
 			description:
@@ -101,13 +101,13 @@ const DataAdapterComponent = () => {
 		// Example of deriving data by leveraging setValue method.
 		{
 			id: 'revenue.total',
-			label: 'Total Revenue',
+			label: 'Total revenue',
 			type: 'integer',
 			readOnly: true,
 		},
 		{
 			id: 'revenue.pricePerUnit',
-			label: 'Price Per Unit',
+			label: 'Price per unit',
 			type: 'integer',
 			setValue: ( { item, value } ) => ( {
 				revenue: {
@@ -174,7 +174,7 @@ const DataAdapterComponent = () => {
 					fields: [
 						{
 							id: 'userProfile',
-							label: 'User Profile',
+							label: 'User profile',
 							children: [
 								'user.profile.name',
 								'user.profile.email',

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

@@ -93,6 +93,13 @@ export const LayoutRegular = {
 			description: 'Chooses the label position.',
 			options: [ 'default', 'top', 'side', 'none' ],
 		},
+		disabled: {
+			control: { type: 'boolean' },
+			description: 'Disable all fields in the form.',
+		},
+	},
+	args: {
+		disabled: false,
 	},
 };
 

package/src/dataform/stories/layout-card.tsx

@@ -44,7 +44,7 @@ const LayoutCardComponent = ( {
 	const customerFields: Field< Customer >[] = [
 		{
 			id: 'name',
-			label: 'Customer Name',
+			label: 'Customer name',
 			type: 'text',
 		},
 		{
@@ -70,17 +70,17 @@ const LayoutCardComponent = ( {
 		},
 		{
 			id: 'shippingAddress',
-			label: 'Shipping Address',
+			label: 'Shipping address',
 			type: 'text',
 		},
 		{
 			id: 'billingAddress',
-			label: 'Billing Address',
+			label: 'Billing address',
 			type: 'text',
 		},
 		{
 			id: 'displayPayments',
-			label: 'Display Payments?',
+			label: 'Display payments?',
 			type: 'boolean',
 		},
 		{
@@ -112,7 +112,7 @@ const LayoutCardComponent = ( {
 		},
 		{
 			id: 'dueDate',
-			label: 'Due Date',
+			label: 'Due date',
 			type: 'text',
 			render: ( { item } ) => {
 				return <Badge>Due on: { item.dueDate }</Badge>;