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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "13.0.0",
+	"version": "13.1.1-next.v.202603102151.0+59e17f9ec",
 	"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.17.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/components": "^32.4.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/compose": "^7.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/data": "^10.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/date": "^5.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/deprecated": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/element": "^6.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/i18n": "^6.14.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/icons": "^12.0.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/keycodes": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/primitives": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/private-apis": "^1.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/ui": "^0.9.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/warning": "^3.41.1-next.v.202603102151.0+59e17f9ec",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -92,5 +92,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "8bfc179b9aed74c0a6dd6e8edf7a49e40e4f87cc"
+	"gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
 }

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-layouts/table/index.tsx

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

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/types/dataform.ts

@@ -23,17 +23,30 @@ export type NormalizedRegularLayout = {
 
 export type EditVisibility = 'always' | 'on-hover';
 
+type PanelOpenAsDropdown = {
+	type: 'dropdown';
+};
+export type PanelOpenAsModal = {
+	type: 'modal';
+	applyLabel: string;
+	cancelLabel: string;
+};
+
 export type PanelLayout = {
 	type: 'panel';
 	labelPosition?: LabelPosition;
-	openAs?: 'dropdown' | 'modal';
+	openAs?:
+		| 'dropdown'
+		| 'modal'
+		| { type: 'dropdown' }
+		| { type: 'modal'; applyLabel?: string; cancelLabel?: string };
 	summary?: PanelSummaryField;
 	editVisibility?: EditVisibility;
 };
 export type NormalizedPanelLayout = {
 	type: 'panel';
 	labelPosition: LabelPosition;
-	openAs: 'dropdown' | 'modal';
+	openAs: PanelOpenAsDropdown | PanelOpenAsModal;
 	summary: NormalizedPanelSummaryField;
 	editVisibility: EditVisibility;
 };