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

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

@@ -9,7 +9,7 @@
 	padding: 0 $grid-unit-30 $grid-unit-30;
 	display: flex;
 	flex-direction: column;
-	gap: $grid-unit-40;
+	gap: $grid-unit-30;
 	container-type: inline-size;
 	margin-bottom: auto;
 
@@ -17,9 +17,25 @@
 		transition: padding ease-out 0.1s;
 	}
 
+	&.has-compact-density {
+		gap: $grid-unit-20;
+
+		.dataviews-view-grid__row {
+			gap: $grid-unit-20;
+		}
+	}
+
+	&.has-comfortable-density {
+		gap: $grid-unit-40;
+
+		.dataviews-view-grid__row {
+			gap: $grid-unit-40;
+		}
+	}
+
 	.dataviews-view-grid__row {
 		display: grid;
-		gap: $grid-unit-40;
+		gap: $grid-unit-30;
 
 		.dataviews-view-grid__row__gridcell {
 			border-radius: $radius-medium;
@@ -41,6 +57,10 @@
 			}
 		}
 	}
+}
+
+.dataviews-view-grid,
+.dataviews-view-grid-infinite-scroll {
 
 	.dataviews-view-grid__card {
 		height: 100%;

package/src/components/dataviews-layouts/index.ts

@@ -27,8 +27,8 @@ import {
 	LAYOUT_PICKER_GRID,
 	LAYOUT_PICKER_TABLE,
 } from '../../constants';
-import PreviewSizePicker from './utils/preview-size-picker';
 import DensityPicker from './utils/density-picker';
+import GridConfigOptions from './utils/grid-config-options';
 
 export const VIEW_LAYOUTS = [
 	{
@@ -43,7 +43,7 @@ export const VIEW_LAYOUTS = [
 		label: __( 'Grid' ),
 		component: ViewGrid,
 		icon: category,
-		viewConfigOptions: PreviewSizePicker,
+		viewConfigOptions: GridConfigOptions,
 	},
 	{
 		type: LAYOUT_LIST,
@@ -64,7 +64,7 @@ export const VIEW_LAYOUTS = [
 		label: __( 'Grid' ),
 		component: ViewPickerGrid,
 		icon: category,
-		viewConfigOptions: PreviewSizePicker,
+		viewConfigOptions: GridConfigOptions,
 		isPicker: true,
 	},
 	{

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,16 @@ function GridItem< Item >( {
 }: GridItemProps< Item > ) {
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const id = getItemId( item );
+	const elementRef = useRef< HTMLElement | null >( null );
+
 	const isSelected = selection.includes( id );
+
+	const setElementRef = ( element: HTMLElement | null ) => {
+		elementRef.current = element;
+	};
+
+	useIntersectionObserver( elementRef, posinset );
+
 	const renderedMediaField = mediaField?.render ? (
 		<mediaField.render
 			item={ item }
@@ -88,6 +102,7 @@ function GridItem< Item >( {
 
 	return (
 		<Composite.Item
+			ref={ setElementRef }
 			aria-label={
 				titleField
 					? titleField.getValue( { item } ) || __( '(no title)' )
@@ -105,6 +120,7 @@ function GridItem< Item >( {
 			} ) }
 			aria-selected={ isSelected }
 			onClick={ () => {
+				// Toggle in/out of selection array
 				if ( isSelected ) {
 					onChangeSelection(
 						selection.filter( ( itemId ) => id !== itemId )
@@ -318,12 +334,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 (
 		<>
 			{
@@ -336,7 +361,14 @@ function ViewPickerGrid< Item >( {
 						aria-multiselectable={ isMultiselect }
 						className={ clsx(
 							'dataviews-view-picker-grid',
-							className
+							className,
+							{
+								[ `has-${ view.layout?.density }-density` ]:
+									view.layout?.density &&
+									[ 'compact', 'comfortable' ].includes(
+										view.layout.density
+									),
+							}
 						) }
 						aria-label={ itemListLabel }
 						render={ ( { children, ...props } ) => (
@@ -371,10 +403,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 ) }
@@ -421,7 +455,15 @@ function ViewPickerGrid< Item >( {
 							<GridItems
 								className={ clsx(
 									'dataviews-view-picker-grid',
-									className
+									className,
+									{
+										[ `has-${ view.layout?.density }-density` ]:
+											view.layout?.density &&
+											[
+												'compact',
+												'comfortable',
+											].includes( view.layout.density ),
+									}
 								) }
 								previewSize={ usedPreviewSize }
 								aria-busy={ isLoading }
@@ -436,17 +478,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

@@ -5,6 +5,16 @@
 @use "../utils/grid-items.scss" as *;
 
 .dataviews-view-picker-grid {
+	// When grouped, the density class is on the parent Composite,
+	// and the gap is on child .dataviews-view-grid-items elements.
+	&.has-compact-density .dataviews-view-grid-items {
+		gap: $grid-unit-20;
+	}
+
+	&.has-comfortable-density .dataviews-view-grid-items {
+		gap: $grid-unit-40;
+	}
+
 	.dataviews-view-picker-grid__card {
 		height: 100%;
 		justify-content: flex-start;

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,17 @@ function TableRow< Item >( {
 	posinset,
 }: TableRowProps< Item > ) {
 	const { paginationInfo } = useContext( DataViewsContext );
+
 	const isSelected = selection.includes( id );
+
 	const [ isHovered, setIsHovered ] = useState( false );
+	const elementRef = useRef< HTMLElement | null >( null );
+
+	const setElementRef = ( element: HTMLElement | null ) => {
+		elementRef.current = element;
+	};
+
+	useIntersectionObserver( elementRef, posinset );
 	const {
 		showTitle = true,
 		showMedia = true,
@@ -119,6 +129,7 @@ function TableRow< Item >( {
 	return (
 		<Composite.Item
 			key={ id }
+			ref={ setElementRef }
 			render={ ( { children, ...props } ) => (
 				<tr
 					className={ clsx( 'dataviews-view-table__row', {
@@ -136,6 +147,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 )
@@ -236,6 +248,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 +282,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 +299,6 @@ function ViewPickerTable< Item >( {
 				headerMenuRefs.current.delete( column );
 			}
 		};
-	const isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;
 
 	return (
 		<>
@@ -319,6 +332,7 @@ function ViewPickerTable< Item >( {
 									data={ data }
 									actions={ actions }
 									getItemId={ getItemId }
+									disableSelectAll={ isInfiniteScroll }
 								/>
 							) }
 						</th>
@@ -441,23 +455,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/table/index.tsx

@@ -39,7 +39,7 @@ import type {
 import type { SetSelection } from '../../../types/private';
 import ColumnHeaderMenu from './column-header-menu';
 import ColumnPrimary from './column-primary';
-import { useIsHorizontalScrollEnd } from './use-is-horizontal-scroll-end';
+import { useScrollState } from './use-scroll-state';
 import getDataByGroup from '../utils/get-data-by-group';
 import { PropertiesSection } from '../../dataviews-view-config/properties-section';
 import { useDelayedLoading } from '../../../hooks/use-delayed-loading';
@@ -323,9 +323,9 @@ function ViewTable< Item >( {
 
 	const tableNoticeId = useId();
 
-	const isHorizontalScrollEnd = useIsHorizontalScrollEnd( {
+	const { isHorizontalScrollEnd, isVerticallyScrolled } = useScrollState( {
 		scrollContainerRef: containerRef,
-		enabled: !! actions?.length,
+		enabledHorizontal: !! actions?.length,
 	} );
 
 	const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );
@@ -464,7 +464,13 @@ function ViewTable< Item >( {
 						<PropertiesSection showLabel={ false } />
 					</Popover>
 				) }
-				<thead onContextMenu={ handleHeaderContextMenu }>
+				<thead
+					className={ clsx( {
+						'dataviews-view-table__thead--stuck':
+							isVerticallyScrolled,
+					} ) }
+					onContextMenu={ handleHeaderContextMenu }
+				>
 					<tr className="dataviews-view-table__row">
 						{ hasBulkActions && (
 							<th

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

@@ -134,6 +134,19 @@
 		z-index: z-index(".dataviews-view-table thead");
 		background-color: inherit;
 
+		&.dataviews-view-table__thead--stuck {
+			&::after {
+				display: block;
+				content: "";
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				height: 1px;
+				background-color: $gray-100;
+			}
+		}
+
 		tr {
 			border: 0;
 		}

package/src/components/dataviews-layouts/table/use-scroll-state.ts

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import type { MutableRefObject } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useEffect, useState } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
+
+const isScrolledToEnd = ( element: Element ) => {
+	if ( isRTL() ) {
+		const scrollLeft = Math.abs( element.scrollLeft );
+		return scrollLeft <= 1;
+	}
+
+	return element.scrollLeft + element.clientWidth >= element.scrollWidth - 1;
+};
+
+/**
+ * A hook to track the scroll state of a container element.
+ *
+ * Returns whether the container has been scrolled vertically (for sticky header styling)
+ * and whether it has reached the horizontal scroll end (for sticky actions column styling).
+ *
+ * The current way receives "refs" as arguments, but it lacks a mechanism to detect when a ref has changed.
+ * As a result, when the "ref" is updated and attached to a new div, the computation should trigger again.
+ * However, this isn't possible in the current setup because the hook is unaware that the ref has changed.
+ *
+ * See https://github.com/Automattic/wp-calypso/pull/103005#discussion_r2077567912.
+ *
+ * @param {Object}                                  params                           The parameters for the hook.
+ * @param {MutableRefObject<HTMLDivElement | null>} params.scrollContainerRef        The ref to the scroll container element.
+ * @param {boolean}                                 [params.enabledHorizontal=false] Whether to track horizontal scroll end.
+ * @return {{ isHorizontalScrollEnd: boolean, isVerticallyScrolled: boolean }} The scroll state.
+ */
+export function useScrollState( {
+	scrollContainerRef,
+	enabledHorizontal = false,
+}: {
+	scrollContainerRef: React.MutableRefObject< HTMLDivElement | null >;
+	enabledHorizontal?: boolean;
+} ): { isHorizontalScrollEnd: boolean; isVerticallyScrolled: boolean } {
+	const [ isHorizontalScrollEnd, setIsHorizontalScrollEnd ] =
+		useState( false );
+	const [ isVerticallyScrolled, setIsVerticallyScrolled ] = useState( false );
+
+	const handleScroll = useCallback( () => {
+		const scrollContainer = scrollContainerRef.current;
+		if ( ! scrollContainer ) {
+			return;
+		}
+
+		if ( enabledHorizontal ) {
+			setIsHorizontalScrollEnd( isScrolledToEnd( scrollContainer ) );
+		}
+
+		setIsVerticallyScrolled( scrollContainer.scrollTop > 0 );
+	}, [ scrollContainerRef, enabledHorizontal ] );
+	useEffect( () => {
+		if ( typeof window === 'undefined' || ! scrollContainerRef.current ) {
+			return () => {};
+		}
+
+		const scrollContainer = scrollContainerRef.current;
+
+		handleScroll();
+		scrollContainer.addEventListener( 'scroll', handleScroll );
+		window.addEventListener( 'resize', handleScroll );
+
+		return () => {
+			scrollContainer.removeEventListener( 'scroll', handleScroll );
+			window.removeEventListener( 'resize', handleScroll );
+		};
+	}, [ scrollContainerRef, enabledHorizontal, handleScroll ] );
+
+	return { isHorizontalScrollEnd, isVerticallyScrolled };
+}

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

@@ -12,11 +12,21 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import DataViewsContext from '../../dataviews-context';
-import type { ViewTable, ViewList, Density } from '../../../types';
+import type {
+	ViewTable,
+	ViewList,
+	ViewGrid,
+	ViewPickerGrid,
+	Density,
+} from '../../../types';
 
 export default function DensityPicker() {
 	const context = useContext( DataViewsContext );
-	const view = context.view as ViewTable | ViewList;
+	const view = context.view as
+		| ViewTable
+		| ViewList
+		| ViewGrid
+		| ViewPickerGrid;
 	return (
 		<ToggleGroupControl
 			size="__unstable-large"

package/src/components/dataviews-layouts/utils/grid-config-options.tsx

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import DensityPicker from './density-picker';
+import PreviewSizePicker from './preview-size-picker';
+
+export default function GridConfigOptions() {
+	return (
+		<>
+			<DensityPicker />
+			<PreviewSizePicker />
+		</>
+	);
+}

package/src/components/dataviews-layouts/utils/grid-items.scss

@@ -3,7 +3,7 @@
 .dataviews-view-grid-items {
 	margin-bottom: auto;
 	display: grid;
-	gap: $grid-unit-40;
+	gap: $grid-unit-30;
 	grid-template-rows: max-content;
 	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
 	padding: 0 $grid-unit-30 $grid-unit-30;
@@ -12,4 +12,12 @@
 	@media not (prefers-reduced-motion) {
 		transition: padding ease-out 0.1s;
 	}
+
+	&.has-compact-density {
+		gap: $grid-unit-20;
+	}
+
+	&.has-comfortable-density {
+		gap: $grid-unit-40;
+	}
 }

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;
+}