@wordpress/dataviews 13.0.0 → 13.1.0

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

@@ -336,7 +336,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 } ) => (
@@ -421,7 +428,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 }

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/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 );
@@ -444,7 +444,7 @@ function ViewTable< Item >( {
 							className={ clsx(
 								`dataviews-view-table__col-${ column }`,
 								{
-									'dataviews-view-table__col-first-expand':
+									'dataviews-view-table__col-expand':
 										! hasPrimaryColumn &&
 										index === columns.length - 1,
 								}
@@ -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/dataform/stories/index.story.tsx

@@ -67,6 +67,21 @@ export const LayoutPanel = {
 			description: 'Chooses when the edit icon is visible.',
 			options: [ 'default', 'always', 'on-hover' ],
 		},
+		applyLabel: {
+			control: { type: 'text' },
+			description:
+				'Custom text for the modal apply button. Defaults to "Apply".',
+			if: { arg: 'openAs', eq: 'modal' },
+		},
+		cancelLabel: {
+			control: { type: 'text' },
+			description:
+				'Custom text for the modal cancel button. Defaults to "Cancel".',
+			if: { arg: 'openAs', eq: 'modal' },
+		},
+	},
+	args: {
+		openAs: 'default',
 	},
 };
 

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

@@ -275,7 +275,7 @@ const getPanelLayoutFromStoryArgs = ( {
 }: {
 	summary?: string[];
 	labelPosition?: 'default' | 'top' | 'side' | 'none';
-	openAs?: 'default' | 'dropdown' | 'modal';
+	openAs?: PanelLayout[ 'openAs' ];
 	editVisibility?: 'default' | EditVisibility;
 } ): Layout | undefined => {
 	const panelLayout: PanelLayout = {
@@ -286,7 +286,7 @@ const getPanelLayoutFromStoryArgs = ( {
 		panelLayout.labelPosition = labelPosition;
 	}
 
-	if ( openAs !== 'default' ) {
+	if ( openAs ) {
 		panelLayout.openAs = openAs;
 	}
 
@@ -303,13 +303,17 @@ const getPanelLayoutFromStoryArgs = ( {
 
 const LayoutPanelComponent = ( {
 	labelPosition,
-	openAs,
+	openAs: openAsArg,
 	editVisibility,
+	applyLabel,
+	cancelLabel,
 }: {
 	type: 'default' | 'regular' | 'panel' | 'card';
 	labelPosition: 'default' | 'top' | 'side' | 'none';
 	openAs: 'default' | 'dropdown' | 'modal';
 	editVisibility: 'default' | EditVisibility;
+	applyLabel?: string;
+	cancelLabel?: string;
 } ) => {
 	const [ post, setPost ] = useState< SamplePost >( {
 		title: 'Hello, World!',
@@ -335,6 +339,17 @@ const LayoutPanelComponent = ( {
 	} );
 
 	const form: Form = useMemo( () => {
+		let openAs: PanelLayout[ 'openAs' ];
+		if ( openAsArg === 'modal' && ( applyLabel || cancelLabel ) ) {
+			openAs = {
+				type: 'modal',
+				applyLabel: applyLabel || undefined,
+				cancelLabel: cancelLabel || undefined,
+			};
+		} else if ( openAsArg !== 'default' ) {
+			openAs = openAsArg;
+		}
+
 		return {
 			layout: getPanelLayoutFromStoryArgs( {
 				labelPosition,
@@ -392,7 +407,7 @@ const LayoutPanelComponent = ( {
 				},
 			],
 		};
-	}, [ labelPosition, openAs, editVisibility ] );
+	}, [ labelPosition, openAsArg, applyLabel, cancelLabel, editVisibility ] );
 
 	return (
 		<DataForm< SamplePost >

package/src/dataviews/index.tsx

@@ -195,9 +195,19 @@ function DataViews< Item >( {
 		}
 	}, [ hasPrimaryOrLockedFilters, isShowingFilter ] );
 
+	const {
+		data: displayData,
+		paginationInfo: displayPaginationInfo,
+		hasInitiallyLoaded,
+	} = useData( data, isLoading, paginationInfo );
+
 	// Attach scroll event listener for infinite scroll
 	useEffect( () => {
-		if ( ! view.infiniteScrollEnabled || ! containerRef.current ) {
+		if (
+			! hasInitiallyLoaded ||
+			! view.infiniteScrollEnabled ||
+			! containerRef.current
+		) {
 			return;
 		}
 
@@ -220,7 +230,11 @@ function DataViews< Item >( {
 			container.removeEventListener( 'scroll', handleScroll );
 			handleScroll.cancel(); // Cancel any pending throttled calls
 		};
-	}, [ infiniteScrollHandler, view.infiniteScrollEnabled ] );
+	}, [
+		hasInitiallyLoaded,
+		infiniteScrollHandler,
+		view.infiniteScrollEnabled,
+	] );
 
 	// Filter out DataViewsPicker layouts.
 	const defaultLayouts = useMemo(
@@ -237,12 +251,6 @@ function DataViews< Item >( {
 		[ defaultLayoutsProperty ]
 	);
 
-	const {
-		data: displayData,
-		paginationInfo: displayPaginationInfo,
-		hasInitiallyLoaded,
-	} = useData( data, isLoading, paginationInfo );
-
 	if ( ! defaultLayouts[ view.type ] ) {
 		return null;
 	}
@@ -280,7 +288,7 @@ function DataViews< Item >( {
 				onReset,
 			} }
 		>
-			<div className="dataviews-wrapper" ref={ containerRef }>
+			<div className="dataviews-wrapper">
 				{ children ?? (
 					<DefaultUI
 						header={ header }

package/src/dataviews/stories/empty.tsx

@@ -47,11 +47,9 @@ const CustomEmptyComponent = () => (
 
 const EmptyComponent = ( {
 	customEmpty,
-	containerHeight,
 	isLoading,
 }: {
 	customEmpty?: boolean;
-	containerHeight?: 'auto' | '50vh' | '100vh';
 	isLoading?: boolean;
 } ) => {
 	const [ view, setView ] = useState< View >( {
@@ -69,7 +67,7 @@ const EmptyComponent = ( {
 			style={ {
 				display: 'flex',
 				flexDirection: 'column',
-				height: containerHeight,
+				height: '100%',
 			} }
 		>
 			<DataViews

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

@@ -102,9 +102,9 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 							</Stack>
 						</CardBody>
 					</Card>
-					<DataViews.Layout className="free-composition-dataviews-layout" />
 				</Stack>
 			</div>
+			<DataViews.Layout className="free-composition-dataviews-layout" />
 		</>
 	);
 }
@@ -132,7 +132,7 @@ export const FreeCompositionComponent = () => {
 		type: LAYOUT_TABLE,
 		search: '',
 		page: 1,
-		perPage: 10,
+		perPage: 20,
 		layout: {
 			enableMoving: false,
 		},
@@ -152,38 +152,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

@@ -106,12 +106,6 @@ const InfiniteScroll = () => {
 
 	return (
 		<>
-			<style>{ `
-			.dataviews-wrapper {
-				height: 600px;
-				overflow: auto;
-			}
-		` }</style>
 			<Text
 				style={ {
 					marginBottom: '16px',

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;