@wordpress/dataviews 13.0.0 → 13.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "13.0.0",
+	"version": "13.1.0",
 	"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",
@@ -53,20 +53,20 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.21",
-		"@wordpress/base-styles": "^6.17.0",
-		"@wordpress/components": "^32.3.0",
-		"@wordpress/compose": "^7.41.0",
-		"@wordpress/data": "^10.41.0",
-		"@wordpress/date": "^5.41.0",
-		"@wordpress/deprecated": "^4.41.0",
-		"@wordpress/element": "^6.41.0",
-		"@wordpress/i18n": "^6.14.0",
-		"@wordpress/icons": "^11.8.0",
-		"@wordpress/keycodes": "^4.41.0",
-		"@wordpress/primitives": "^4.41.0",
-		"@wordpress/private-apis": "^1.41.0",
-		"@wordpress/ui": "^0.8.0",
-		"@wordpress/warning": "^3.41.0",
+		"@wordpress/base-styles": "^6.18.0",
+		"@wordpress/components": "^32.4.0",
+		"@wordpress/compose": "^7.42.0",
+		"@wordpress/data": "^10.42.0",
+		"@wordpress/date": "^5.42.0",
+		"@wordpress/deprecated": "^4.42.0",
+		"@wordpress/element": "^6.42.0",
+		"@wordpress/i18n": "^6.15.0",
+		"@wordpress/icons": "^12.0.0",
+		"@wordpress/keycodes": "^4.42.0",
+		"@wordpress/primitives": "^4.42.0",
+		"@wordpress/private-apis": "^1.42.0",
+		"@wordpress/ui": "^0.9.0",
+		"@wordpress/warning": "^3.42.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -75,12 +75,12 @@
 		"remove-accents": "^0.5.0"
 	},
 	"devDependencies": {
-		"@storybook/addon-docs": "^10.1.11",
-		"@storybook/react-vite": "^10.1.11",
+		"@storybook/addon-docs": "^10.2.8",
+		"@storybook/react-vite": "^10.2.8",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
 		"esbuild": "^0.27.2",
-		"storybook": "^10.1.11"
+		"storybook": "^10.2.8"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -92,5 +92,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "8bfc179b9aed74c0a6dd6e8edf7a49e40e4f87cc"
+	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
 }

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

@@ -293,6 +293,7 @@ function CalendarDateControl< Item >( {
 	const {
 		id,
 		label,
+		description,
 		setValue,
 		getValue,
 		isValid,
@@ -385,6 +386,7 @@ function CalendarDateControl< Item >( {
 				id={ id }
 				className="dataviews-controls__date"
 				label={ displayLabel }
+				help={ description }
 				hideLabelFromVision={ hideLabelFromVision }
 			>
 				<Stack direction="column" gap="lg">
@@ -462,7 +464,14 @@ function CalendarDateRangeControl< Item >( {
 	markWhenOptional,
 	validity,
 }: DataFormControlProps< Item > ) {
-	const { id, label, getValue, setValue, format: fieldFormat } = field;
+	const {
+		id,
+		label,
+		description,
+		getValue,
+		setValue,
+		format: fieldFormat,
+	} = field;
 	let value: DateRange;
 	const fieldValue = getValue( { item: data } );
 	if (
@@ -597,6 +606,7 @@ function CalendarDateRangeControl< Item >( {
 				id={ id }
 				className="dataviews-controls__date"
 				label={ displayLabel }
+				help={ description }
 				hideLabelFromVision={ hideLabelFromVision }
 			>
 				<Stack direction="column" gap="lg">

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { format } from 'date-fns';
-
 /**
  * WordPress dependencies
  */
@@ -12,7 +7,7 @@ import {
 } from '@wordpress/components';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { getSettings } from '@wordpress/date';
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { Stack } from '@wordpress/ui';
 
 /**
@@ -27,15 +22,12 @@ import { unlock } from '../../lock-unlock';
 
 const { DateCalendar, ValidatedInputControl } = unlock( componentsPrivateApis );
 
-const formatDateTime = ( date?: Date | string ): string => {
-	if ( ! date ) {
+const formatDateTime = ( value?: string ): string => {
+	if ( ! value ) {
 		return '';
 	}
-	if ( typeof date === 'string' ) {
-		return date;
-	}
-	// Format as datetime-local input expects: YYYY-MM-DDTHH:mm
-	return format( date, "yyyy-MM-dd'T'HH:mm" );
+	// Format in WordPress timezone for datetime-local input: YYYY-MM-DDTHH:mm
+	return dateI18n( 'Y-m-d\\TH:i', getDate( value ) );
 };
 
 function CalendarDateTimeControl< Item >( {
@@ -79,21 +71,19 @@ function CalendarDateTimeControl< Item >( {
 		( newDate: Date | undefined | null ) => {
 			let dateTimeValue: string | undefined;
 			if ( newDate ) {
-				// Preserve time if it exists in current value, otherwise use current time
-				let finalDateTime = newDate;
+				// Extract the date part in WP timezone from the calendar selection
+				const wpDate = dateI18n( 'Y-m-d', newDate );
 
+				// Preserve time if it exists in current value, otherwise use current time
+				let wpTime: string;
 				if ( value ) {
-					const currentDateTime = parseDateTime( value );
-					if ( currentDateTime ) {
-						// Preserve the time part
-						finalDateTime = new Date( newDate );
-						finalDateTime.setHours( currentDateTime.getHours() );
-						finalDateTime.setMinutes(
-							currentDateTime.getMinutes()
-						);
-					}
+					wpTime = dateI18n( 'H:i', getDate( value ) );
+				} else {
+					wpTime = dateI18n( 'H:i', newDate );
 				}
 
+				// Combine date and time in WP timezone and convert to ISO
+				const finalDateTime = getDate( `${ wpDate }T${ wpTime }` );
 				dateTimeValue = finalDateTime.toISOString();
 				onChangeCallback( dateTimeValue );
 
@@ -133,8 +123,8 @@ function CalendarDateTimeControl< Item >( {
 	const handleManualDateTimeChange = useCallback(
 		( newValue?: string ) => {
 			if ( newValue ) {
-				// Convert from datetime-local format to ISO string
-				const dateTime = new Date( newValue );
+				// Interpret the datetime-local value in WordPress timezone
+				const dateTime = getDate( newValue );
 				onChangeCallback( dateTime.toISOString() );
 
 				// Update calendar month to match
@@ -176,6 +166,18 @@ function CalendarDateTimeControl< Item >( {
 			hideLabelFromVision={ hideLabelFromVision }
 		>
 			<Stack direction="column" gap="lg">
+				{ /* Manual datetime input */ }
+				<ValidatedInputControl
+					ref={ inputControlRef }
+					__next40pxDefaultSize
+					required={ !! isValid?.required }
+					customValidity={ getCustomValidity( isValid, validity ) }
+					type="datetime-local"
+					label={ __( 'Date time' ) }
+					hideLabelFromVision
+					value={ formatDateTime( value ) }
+					onChange={ handleManualDateTimeChange }
+				/>
 				{ /* Calendar widget */ }
 				<DateCalendar
 					style={ { width: '100%' } }
@@ -188,24 +190,6 @@ function CalendarDateTimeControl< Item >( {
 					timeZone={ timezoneString || undefined }
 					weekStartsOn={ weekStartsOn }
 				/>
-				{ /* Manual datetime input */ }
-				<ValidatedInputControl
-					ref={ inputControlRef }
-					__next40pxDefaultSize
-					required={ !! isValid?.required }
-					customValidity={ getCustomValidity( isValid, validity ) }
-					type="datetime-local"
-					label={ __( 'Date time' ) }
-					hideLabelFromVision
-					value={
-						value
-							? formatDateTime(
-									parseDateTime( value ) || undefined
-							  )
-							: ''
-					}
-					onChange={ handleManualDateTimeChange }
-				/>
 			</Stack>
 		</BaseControl>
 	);

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

@@ -58,7 +58,7 @@ export default function RelativeDateControl< Item >( {
 			operator === OPERATOR_IN_THE_PAST ? 'inThePast' : 'over'
 		];
 
-	const { id, label, getValue, setValue } = field;
+	const { id, label, description, getValue, setValue } = field;
 	const fieldValue = getValue( { item: data } );
 	const { value: relValue = '', unit = options[ 0 ].value } =
 		fieldValue && typeof fieldValue === 'object' ? fieldValue : {};
@@ -91,6 +91,7 @@ export default function RelativeDateControl< Item >( {
 			className={ clsx( className, 'dataviews-controls__relative-date' ) }
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
+			help={ description }
 		>
 			<Stack direction="row" gap="sm">
 				<NumberControl

package/src/components/dataform-layouts/normalize-form.ts

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -55,10 +60,28 @@ function normalizeLayout( layout?: Layout ): NormalizedLayout {
 			? summary
 			: [ summary ];
 
+		const openAs = layout?.openAs;
+		let normalizedOpenAs: NormalizedPanelLayout[ 'openAs' ];
+		if ( typeof openAs === 'object' && openAs.type === 'modal' ) {
+			normalizedOpenAs = {
+				type: 'modal',
+				applyLabel: openAs.applyLabel?.trim() || __( 'Apply' ),
+				cancelLabel: openAs.cancelLabel?.trim() || __( 'Cancel' ),
+			};
+		} else if ( openAs === 'modal' ) {
+			normalizedOpenAs = {
+				type: 'modal',
+				applyLabel: __( 'Apply' ),
+				cancelLabel: __( 'Cancel' ),
+			};
+		} else {
+			normalizedOpenAs = { type: 'dropdown' };
+		}
+
 		normalizedLayout = {
 			type: 'panel',
 			labelPosition: layout?.labelPosition ?? 'side',
-			openAs: layout?.openAs ?? 'dropdown',
+			openAs: normalizedOpenAs,
 			summary: normalizedSummary,
 			editVisibility: layout?.editVisibility ?? 'on-hover',
 		} satisfies NormalizedPanelLayout;

package/src/components/dataform-layouts/panel/index.tsx

@@ -13,7 +13,7 @@ export default function FormPanelField< Item >( {
 }: FieldLayoutProps< Item > ) {
 	const layout = field.layout as NormalizedPanelLayout;
 
-	if ( layout.openAs === 'modal' ) {
+	if ( layout.openAs.type === 'modal' ) {
 		return (
 			<PanelModal
 				data={ data }

package/src/components/dataform-layouts/panel/modal.tsx

@@ -11,7 +11,7 @@ import {
 	Button,
 	Modal,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+
 import { useContext, useMemo, useRef, useState } from '@wordpress/element';
 import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
 import { Stack } from '@wordpress/ui';
@@ -23,6 +23,8 @@ import type {
 	Field,
 	NormalizedForm,
 	NormalizedFormField,
+	NormalizedPanelLayout,
+	PanelOpenAsModal,
 	FieldLayoutProps,
 } from '../../../types';
 import { DataFormLayout } from '../data-form-layout';
@@ -48,6 +50,8 @@ function ModalContent< Item >( {
 	fieldLabel: string;
 	touched: boolean;
 } ) {
+	const { openAs } = field.layout as NormalizedPanelLayout;
+	const { applyLabel, cancelLabel } = openAs as PanelOpenAsModal;
 	const { fields } = useContext( DataFormContext );
 	const [ changes, setChanges ] = useState< Partial< Item > >( {} );
 	const modalData = useMemo( () => {
@@ -147,14 +151,14 @@ function ModalContent< Item >( {
 					onClick={ onClose }
 					__next40pxDefaultSize
 				>
-					{ __( 'Cancel' ) }
+					{ cancelLabel }
 				</Button>
 				<Button
 					variant="primary"
 					onClick={ onApply }
 					__next40pxDefaultSize
 				>
-					{ __( 'Apply' ) }
+					{ applyLabel }
 				</Button>
 			</Stack>
 		</Modal>

package/src/components/dataform-layouts/panel/style.scss

@@ -152,7 +152,7 @@
 }
 
 .dataforms-layouts-panel__field-dropdown .components-popover__content {
-	min-width: 320px;
+	min-width: 256px;
 	padding: $grid-unit-20;
 }
 

package/src/components/dataform-layouts/test/normalize-form.ts

@@ -137,7 +137,7 @@ describe( 'normalizeFormFields', () => {
 				layout: {
 					labelPosition: 'side',
 					type: 'panel',
-					openAs: 'dropdown',
+					openAs: { type: 'dropdown' },
 					summary: [],
 					editVisibility: 'on-hover',
 				},
@@ -147,7 +147,7 @@ describe( 'normalizeFormFields', () => {
 						layout: {
 							type: 'panel',
 							labelPosition: 'side',
-							openAs: 'dropdown',
+							openAs: { type: 'dropdown' },
 							summary: [],
 							editVisibility: 'on-hover',
 						},
@@ -166,7 +166,7 @@ describe( 'normalizeFormFields', () => {
 				layout: {
 					labelPosition: 'top',
 					type: 'panel',
-					openAs: 'dropdown',
+					openAs: { type: 'dropdown' },
 					summary: [],
 					editVisibility: 'on-hover',
 				},
@@ -176,7 +176,7 @@ describe( 'normalizeFormFields', () => {
 						layout: {
 							type: 'panel',
 							labelPosition: 'top',
-							openAs: 'dropdown',
+							openAs: { type: 'dropdown' },
 							summary: [],
 							editVisibility: 'on-hover',
 						},
@@ -185,6 +185,99 @@ describe( 'normalizeFormFields', () => {
 			} );
 		} );
 
+		it( 'panel: openAs string "modal" normalizes to object with defaults', () => {
+			const form: Form = {
+				layout: { type: 'panel', openAs: 'modal' },
+				fields: [ 'field1' ],
+			};
+			const result = normalizeForm( form );
+			expect( result.layout ).toEqual( {
+				type: 'panel',
+				labelPosition: 'side',
+				openAs: {
+					type: 'modal',
+					applyLabel: 'Apply',
+					cancelLabel: 'Cancel',
+				},
+				summary: [],
+				editVisibility: 'on-hover',
+			} );
+		} );
+
+		it( 'panel: openAs object preserves labels', () => {
+			const form: Form = {
+				layout: {
+					type: 'panel',
+					openAs: {
+						type: 'modal',
+						applyLabel: 'Save',
+						cancelLabel: 'Dismiss',
+					},
+				},
+				fields: [ 'field1' ],
+			};
+			const result = normalizeForm( form );
+			expect( result.layout ).toEqual( {
+				type: 'panel',
+				labelPosition: 'side',
+				openAs: {
+					type: 'modal',
+					applyLabel: 'Save',
+					cancelLabel: 'Dismiss',
+				},
+				summary: [],
+				editVisibility: 'on-hover',
+			} );
+		} );
+
+		it( 'panel: openAs object without labels gets defaults', () => {
+			const form: Form = {
+				layout: {
+					type: 'panel',
+					openAs: { type: 'modal' },
+				},
+				fields: [ 'field1' ],
+			};
+			const result = normalizeForm( form );
+			expect( result.layout ).toEqual( {
+				type: 'panel',
+				labelPosition: 'side',
+				openAs: {
+					type: 'modal',
+					applyLabel: 'Apply',
+					cancelLabel: 'Cancel',
+				},
+				summary: [],
+				editVisibility: 'on-hover',
+			} );
+		} );
+
+		it( 'panel: openAs object trims whitespace and falls back to defaults', () => {
+			const form: Form = {
+				layout: {
+					type: 'panel',
+					openAs: {
+						type: 'modal',
+						applyLabel: '  ',
+						cancelLabel: '',
+					},
+				},
+				fields: [ 'field1' ],
+			};
+			const result = normalizeForm( form );
+			expect( result.layout ).toEqual( {
+				type: 'panel',
+				labelPosition: 'side',
+				openAs: {
+					type: 'modal',
+					applyLabel: 'Apply',
+					cancelLabel: 'Cancel',
+				},
+				summary: [],
+				editVisibility: 'on-hover',
+			} );
+		} );
+
 		it( 'card: with default layout options', () => {
 			const form: Form = {
 				layout: { type: 'card' },
@@ -360,7 +453,7 @@ describe( 'normalizeFormFields', () => {
 						layout: {
 							type: 'panel',
 							labelPosition: 'side',
-							openAs: 'dropdown',
+							openAs: { type: 'dropdown' },
 							summary: [],
 							editVisibility: 'on-hover',
 						},

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

@@ -7,6 +7,7 @@ import type { ComponentType } from 'react';
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
+import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -14,6 +15,7 @@ import { __ } from '@wordpress/i18n';
  */
 import DataViewsContext from '../dataviews-context';
 import { VIEW_LAYOUTS } from '../dataviews-layouts';
+import { useDelayedLoading } from '../../hooks/use-delayed-loading';
 import type { ViewBaseProps } from '../../types';
 
 type DataViewsLayoutProps = {
@@ -38,11 +40,29 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 		isItemClickable,
 		renderItemLink,
 		defaultLayouts,
+		containerRef,
 		empty = <p>{ __( 'No results' ) }</p>,
 	} = useContext( DataViewsContext );
 
+	const isDelayedInitialLoading = useDelayedLoading( ! hasInitiallyLoaded, {
+		delay: 200,
+	} );
+	// Until the initial data load completes, show a spinner (or nothing if fast).
+	// After that, render the layout component which preserves previous data
+	// while loading subsequent requests.
 	if ( ! hasInitiallyLoaded ) {
-		return null;
+		// If the initial data load is fast, don't show the loading state at all.
+		if ( ! isDelayedInitialLoading ) {
+			return null;
+		}
+		// If the initial data load takes more than 200ms, show the loading state.
+		return (
+			<div className="dataviews-loading">
+				<p>
+					<Spinner />
+				</p>
+			</div>
+		);
 	}
 
 	const ViewComponent = VIEW_LAYOUTS.find(
@@ -50,23 +70,25 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 	)?.component as ComponentType< ViewBaseProps< any > >;
 
 	return (
-		<ViewComponent
-			className={ className }
-			actions={ actions }
-			data={ data }
-			fields={ fields }
-			getItemId={ getItemId }
-			getItemLevel={ getItemLevel }
-			isLoading={ isLoading }
-			onChangeView={ onChangeView }
-			onChangeSelection={ onChangeSelection }
-			selection={ selection }
-			setOpenedFilter={ setOpenedFilter }
-			onClickItem={ onClickItem }
-			renderItemLink={ renderItemLink }
-			isItemClickable={ isItemClickable }
-			view={ view }
-			empty={ empty }
-		/>
+		<div className="dataviews-layout__container" ref={ containerRef }>
+			<ViewComponent
+				className={ className }
+				actions={ actions }
+				data={ data }
+				fields={ fields }
+				getItemId={ getItemId }
+				getItemLevel={ getItemLevel }
+				isLoading={ isLoading }
+				onChangeView={ onChangeView }
+				onChangeSelection={ onChangeSelection }
+				selection={ selection }
+				setOpenedFilter={ setOpenedFilter }
+				onClickItem={ onClickItem }
+				renderItemLink={ renderItemLink }
+				isItemClickable={ isItemClickable }
+				view={ view }
+				empty={ empty }
+			/>
+		</div>
 	);
 }

package/src/components/dataviews-layout/style.scss

@@ -0,0 +1,8 @@
+.dataviews-layout__container {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+	display: flex;
+	flex-direction: column;
+	background-color: inherit;
+}

package/src/components/dataviews-layouts/grid/composite-grid.tsx

@@ -372,7 +372,13 @@ export default function CompositeGrid< Item >( {
 	return (
 		<Composite
 			role={ isInfiniteScroll ? 'feed' : 'grid' }
-			className={ clsx( 'dataviews-view-grid', className ) }
+			className={ clsx( 'dataviews-view-grid', className, {
+				[ `has-${ view.layout?.density }-density` ]:
+					view.layout?.density &&
+					[ 'compact', 'comfortable' ].includes(
+						view.layout.density
+					),
+			} ) }
 			focusWrap
 			aria-busy={ isLoading }
 			aria-rowcount={ isInfiniteScroll ? undefined : totalRows }

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;

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,
 	},
 	{