@wordpress/dataviews 12.0.1-next.v.202602091733.0 → 12.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "12.0.1-next.v.202602091733.0+daa0b19c4",
+	"version": "12.0.1",
 	"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",
@@ -52,24 +52,24 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@ariakit/react": "^0.4.15",
-		"@wordpress/base-styles": "^6.15.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/components": "^32.2.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/compose": "^7.39.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/data": "^10.39.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/date": "^5.39.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/deprecated": "^4.39.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/dom": "^4.39.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/element": "^6.39.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/i18n": "^6.12.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/icons": "^11.6.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/keycodes": "^4.39.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/primitives": "^4.39.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/private-apis": "^1.39.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/theme": "^0.7.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/ui": "^0.7.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/url": "^4.39.1-next.v.202602091733.0+daa0b19c4",
-		"@wordpress/warning": "^3.39.1-next.v.202602091733.0+daa0b19c4",
+		"@ariakit/react": "^0.4.21",
+		"@wordpress/base-styles": "^6.16.1",
+		"@wordpress/components": "^32.2.1",
+		"@wordpress/compose": "^7.40.1",
+		"@wordpress/data": "^10.40.1",
+		"@wordpress/date": "^5.40.1",
+		"@wordpress/deprecated": "^4.40.1",
+		"@wordpress/dom": "^4.40.1",
+		"@wordpress/element": "^6.40.1",
+		"@wordpress/i18n": "^6.13.1",
+		"@wordpress/icons": "^11.7.1",
+		"@wordpress/keycodes": "^4.40.1",
+		"@wordpress/primitives": "^4.40.1",
+		"@wordpress/private-apis": "^1.40.1",
+		"@wordpress/theme": "^0.7.1",
+		"@wordpress/ui": "^0.7.1",
+		"@wordpress/url": "^4.40.1",
+		"@wordpress/warning": "^3.40.1",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -80,7 +80,7 @@
 	"devDependencies": {
 		"@storybook/addon-docs": "^10.1.11",
 		"@storybook/react-vite": "^10.1.11",
-		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
 		"esbuild": "^0.27.2",
 		"storybook": "^10.1.11"
@@ -95,5 +95,5 @@
 	"scripts": {
 		"build:wp": "node build.cjs"
 	},
-	"gitHead": "74f59922b25e30904319373dda91bf8e81f3544e"
+	"gitHead": "adb6623c9f32490cfc73c7ac7f122578c1f10c65"
 }

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

@@ -7,11 +7,16 @@ import { colord } from 'colord';
  * WordPress dependencies
  */
 import {
+	Button,
+	ColorIndicator,
+	ColorPicker,
 	Dropdown,
 	privateApis,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -20,51 +25,37 @@ import type { DataFormControlProps } from '../../types';
 import { unlock } from '../../lock-unlock';
 import getCustomValidity from './utils/get-custom-validity';
 
-const { ValidatedInputControl, Picker } = unlock( privateApis );
+const { ValidatedInputControl } = unlock( privateApis );
 
-const ColorPicker = ( {
+const ColorPickerDropdown = ( {
 	color,
 	onColorChange,
 }: {
 	color: string;
-	onColorChange: ( colorObject: any ) => void;
+	onColorChange: ( newColor: string ) => void;
 } ) => {
 	const validColor = color && colord( color ).isValid() ? color : '#ffffff';
 
 	return (
 		<Dropdown
-			renderToggle={ ( { onToggle, isOpen } ) => (
-				<InputControlPrefixWrapper variant="icon">
-					<button
-						type="button"
-						onClick={ onToggle }
-						style={ {
-							width: '24px',
-							height: '24px',
-							borderRadius: '50%',
-							backgroundColor: validColor,
-							border: '1px solid #ddd',
-							cursor: 'pointer',
-							outline: isOpen ? '2px solid #007cba' : 'none',
-							outlineOffset: '2px',
-							display: 'flex',
-							alignItems: 'center',
-							justifyContent: 'center',
-							padding: 0,
-							margin: 0,
-						} }
-						aria-label="Open color picker"
-					/>
-				</InputControlPrefixWrapper>
+			className="dataviews-controls__color-picker-dropdown"
+			popoverProps={ { resize: false } }
+			renderToggle={ ( { onToggle } ) => (
+				<Button
+					onClick={ onToggle }
+					aria-label={ __( 'Open color picker' ) }
+					size="small"
+					icon={ () => <ColorIndicator colorValue={ validColor } /> }
+				/>
 			) }
 			renderContent={ () => (
-				<div style={ { padding: '16px' } }>
-					<Picker
-						color={ colord( validColor ) }
+				<DropdownContentWrapper paddingSize="none">
+					<ColorPicker
+						color={ validColor }
 						onChange={ onColorChange }
 						enableAlpha
 					/>
-				</div>
+				</DropdownContentWrapper>
 			) }
 		/>
 	);
@@ -82,8 +73,8 @@ export default function Color< Item >( {
 	const value = field.getValue( { item: data } ) || '';
 
 	const handleColorChange = useCallback(
-		( colorObject: any ) => {
-			onChange( setValue( { item: data, value: colorObject.toHex() } ) );
+		( newColor: string ) => {
+			onChange( setValue( { item: data, value: newColor } ) );
 		},
 		[ data, onChange, setValue ]
 	);
@@ -108,10 +99,12 @@ export default function Color< Item >( {
 			hideLabelFromVision={ hideLabelFromVision }
 			type="text"
 			prefix={
-				<ColorPicker
-					color={ value }
-					onColorChange={ handleColorChange }
-				/>
+				<InputControlPrefixWrapper variant="control">
+					<ColorPickerDropdown
+						color={ value }
+						onColorChange={ handleColorChange }
+					/>
+				</InputControlPrefixWrapper>
 			}
 		/>
 	);

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

@@ -161,8 +161,8 @@ function ValidatedDateControl< Item >( {
 	field: NormalizedField< Item >;
 	validity?: FieldValidity;
 	inputRefs:
-		| React.RefObject< HTMLInputElement >
-		| React.RefObject< HTMLInputElement >[];
+		| React.RefObject< HTMLInputElement | null >
+		| React.RefObject< HTMLInputElement | null >[];
 	isTouched: boolean;
 	setIsTouched: ( touched: boolean ) => void;
 	children: React.ReactNode;

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 >( {
@@ -56,7 +48,8 @@ function CalendarDateTimeControl< Item >( {
 	} );
 
 	const inputControlRef = useRef< HTMLInputElement >( null );
-	const validationTimeoutRef = useRef< ReturnType< typeof setTimeout > >();
+	const validationTimeoutRef =
+		useRef< ReturnType< typeof setTimeout > >( undefined );
 	const previousFocusRef = useRef< Element | null >( null );
 
 	const onChangeCallback = useCallback(
@@ -78,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 );
 
@@ -132,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
@@ -196,13 +187,7 @@ function CalendarDateTimeControl< Item >( {
 					type="datetime-local"
 					label={ __( 'Date time' ) }
 					hideLabelFromVision
-					value={
-						value
-							? formatDateTime(
-									parseDateTime( value ) || undefined
-							  )
-							: ''
-					}
+					value={ formatDateTime( value ) }
 					onChange={ handleManualDateTimeChange }
 				/>
 			</Stack>

package/src/components/dataform-controls/style.scss

@@ -23,6 +23,10 @@
 	min-width: 0;
 }
 
+.dataviews-controls__color-picker-dropdown {
+	display: flex;
+}
+
 .dataviews-controls__date-preset {
 	border: 1px solid #ddd;
 

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

@@ -7,6 +7,7 @@ import {
 	CardBody,
 	CardHeader as OriginalCardHeader,
 } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import {
 	useCallback,
 	useContext,
@@ -15,6 +16,7 @@ import {
 	useRef,
 	useState,
 } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { chevronDown, chevronUp } from '@wordpress/icons';
 
 /**
@@ -35,98 +37,6 @@ import { getSummaryFields } from '../get-summary-fields';
 import useReportValidity from '../../../hooks/use-report-validity';
 import ValidationBadge from '../validation-badge';
 
-const NonCollapsibleCardHeader = ( {
-	children,
-	...props
-}: {
-	children: React.ReactNode;
-} ) => (
-	<OriginalCardHeader isBorderless { ...props }>
-		<div
-			style={ {
-				height: '40px', // This is to match the chevron's __next40pxDefaultSize
-				width: '100%',
-				display: 'flex',
-				justifyContent: 'space-between',
-				alignItems: 'center',
-			} }
-		>
-			{ children }
-		</div>
-	</OriginalCardHeader>
-);
-
-export function useCardHeader( layout: NormalizedCardLayout ) {
-	const { isOpened, isCollapsible } = layout;
-	const [ isOpen, setIsOpen ] = useState( isOpened );
-	const [ touched, setTouched ] = useState( false );
-
-	// Sync internal state when the isOpened prop changes.
-	// This is unlikely to happen in production, but it helps with storybook controls.
-	useEffect( () => {
-		setIsOpen( isOpened );
-	}, [ isOpened ] );
-
-	const toggle = useCallback( () => {
-		// Mark as touched when collapsing (going from open to closed)
-		if ( isOpen ) {
-			setTouched( true );
-		}
-		setIsOpen( ( prev ) => ! prev );
-	}, [ isOpen ] );
-
-	const CollapsibleCardHeader = useCallback(
-		( {
-			children,
-			...props
-		}: {
-			children: React.ReactNode;
-			[ key: string ]: any;
-		} ) => (
-			<OriginalCardHeader
-				{ ...props }
-				onClick={ toggle }
-				style={ {
-					cursor: 'pointer',
-					...props.style,
-				} }
-				isBorderless
-			>
-				<div
-					style={ {
-						width: '100%',
-						display: 'flex',
-						justifyContent: 'space-between',
-						alignItems: 'center',
-					} }
-				>
-					{ children }
-				</div>
-				<Button
-					__next40pxDefaultSize
-					variant="tertiary"
-					icon={ isOpen ? chevronUp : chevronDown }
-					aria-expanded={ isOpen }
-					aria-label={ isOpen ? 'Collapse' : 'Expand' }
-				/>
-			</OriginalCardHeader>
-		),
-		[ toggle, isOpen ]
-	);
-
-	const effectiveIsOpen = isCollapsible ? isOpen : true;
-	const CardHeaderComponent = isCollapsible
-		? CollapsibleCardHeader
-		: NonCollapsibleCardHeader;
-
-	return {
-		isOpen: effectiveIsOpen,
-		CardHeader: CardHeaderComponent,
-		touched,
-		setTouched,
-	};
-}
-
 function isSummaryFieldVisible< Item >(
 	summaryField: NormalizedField< Item >,
 	summaryConfig: NormalizedCardLayout[ 'summary' ],
@@ -189,6 +99,10 @@ export default function FormCardField< Item >( {
 	const { fields } = useContext( DataFormContext );
 	const layout = field.layout as NormalizedCardLayout;
 	const cardBodyRef = useRef< HTMLDivElement >( null );
+	const bodyId = useInstanceId(
+		FormCardField,
+		'dataforms-layouts-card-card-body'
+	);
 
 	const form: NormalizedForm = useMemo(
 		() => ( {
@@ -198,7 +112,27 @@ export default function FormCardField< Item >( {
 		[ field ]
 	);
 
-	const { isOpen, CardHeader, touched, setTouched } = useCardHeader( layout );
+	const { isOpened, isCollapsible } = layout;
+	const [ internalIsOpen, setIsOpen ] = useState( isOpened );
+	const [ touched, setTouched ] = useState( false );
+
+	// Sync internal state when the isOpened prop changes.
+	// This is unlikely to happen in production, but it helps with storybook controls.
+	useEffect( () => {
+		setIsOpen( isOpened );
+	}, [ isOpened ] );
+
+	const toggle = useCallback( () => {
+		setIsOpen( ( prev ) => {
+			// Mark as touched when collapsing (going from open to closed)
+			if ( prev ) {
+				setTouched( true );
+			}
+			return ! prev;
+		} );
+	}, [] );
+
+	const isOpen = isCollapsible ? internalIsOpen : true;
 
 	// Mark the card as touched when any field inside it is blurred.
 	// This aligns with how validated controls show errors on blur.
@@ -228,24 +162,86 @@ export default function FormCardField< Item >( {
 		inlineEnd: 'medium' as const,
 	};
 
-	if ( !! field.children ) {
-		const withHeader = !! field.label && layout.withHeader;
+	let label = field.label;
+	let withHeader: boolean;
+	let bodyContent: React.ReactNode;
+
+	if ( field.children ) {
+		withHeader = !! label && layout.withHeader;
+		bodyContent = (
+			<>
+				{ field.description && (
+					<div className="dataforms-layouts-card__field-description">
+						{ field.description }
+					</div>
+				) }
+				<DataFormLayout
+					data={ data }
+					form={ form }
+					onChange={ onChange }
+					validity={ validity?.children }
+				/>
+			</>
+		);
+	} else {
+		const fieldDefinition = fields.find(
+			( fieldDef ) => fieldDef.id === field.id
+		);
 
-		const sizeCardBody = {
-			blockStart: withHeader
-				? ( 'none' as const )
-				: ( 'medium' as const ),
-			blockEnd: 'medium' as const,
-			inlineStart: 'medium' as const,
-			inlineEnd: 'medium' as const,
-		};
+		if ( ! fieldDefinition || ! fieldDefinition.Edit ) {
+			return null;
+		}
 
-		return (
-			<Card className="dataforms-layouts-card__field" size={ sizeCard }>
-				{ withHeader && (
-					<CardHeader className="dataforms-layouts-card__field-header">
+		const SingleFieldLayout = getFormFieldLayout( 'regular' )?.component;
+		if ( ! SingleFieldLayout ) {
+			return null;
+		}
+
+		label = fieldDefinition.label;
+		withHeader = !! label && layout.withHeader;
+		bodyContent = (
+			<SingleFieldLayout
+				data={ data }
+				field={ field }
+				onChange={ onChange }
+				hideLabelFromVision={ hideLabelFromVision || withHeader }
+				markWhenOptional={ markWhenOptional }
+				validity={ validity }
+			/>
+		);
+	}
+
+	const sizeCardBody = {
+		blockStart: withHeader ? ( 'none' as const ) : ( 'medium' as const ),
+		blockEnd: 'medium' as const,
+		inlineStart: 'medium' as const,
+		inlineEnd: 'medium' as const,
+	};
+
+	return (
+		<Card className="dataforms-layouts-card__field" size={ sizeCard }>
+			{ withHeader && (
+				<OriginalCardHeader
+					className="dataforms-layouts-card__field-header"
+					onClick={ isCollapsible ? toggle : undefined }
+					style={ {
+						cursor: isCollapsible ? 'pointer' : undefined,
+					} }
+					isBorderless
+				>
+					<div
+						style={ {
+							// Match the expand/collapse button's height to avoid layout
+							// differences when that button is not displayed.
+							height: isCollapsible ? undefined : '40px',
+							width: '100%',
+							display: 'flex',
+							justifyContent: 'space-between',
+							alignItems: 'center',
+						} }
+					>
 						<span className="dataforms-layouts-card__field-header-label">
-							{ field.label }
+							{ label }
 						</span>
 						{ validationBadge }
 						{ visibleSummaryFields.length > 0 &&
@@ -262,95 +258,32 @@ export default function FormCardField< Item >( {
 									) }
 								</div>
 							) }
-					</CardHeader>
-				) }
-				{ ( isOpen || ! withHeader ) && (
-					// If it doesn't have a header, keep it open.
-					// Otherwise, the card will not be visible.
-					<CardBody
-						size={ sizeCardBody }
-						className="dataforms-layouts-card__field-control"
-						ref={ cardBodyRef }
-						onBlur={ handleBlur }
-					>
-						{ field.description && (
-							<div className="dataforms-layouts-card__field-description">
-								{ field.description }
-							</div>
-						) }
-						<DataFormLayout
-							data={ data }
-							form={ form }
-							onChange={ onChange }
-							validity={ validity?.children }
+					</div>
+					{ isCollapsible && (
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							icon={ isOpen ? chevronUp : chevronDown }
+							aria-expanded={ isOpen }
+							aria-controls={ bodyId }
+							aria-label={
+								isOpen ? __( 'Collapse' ) : __( 'Expand' )
+							}
 						/>
-					</CardBody>
-				) }
-			</Card>
-		);
-	}
-
-	const fieldDefinition = fields.find(
-		( fieldDef ) => fieldDef.id === field.id
-	);
-
-	if ( ! fieldDefinition || ! fieldDefinition.Edit ) {
-		return null;
-	}
-
-	const RegularLayout = getFormFieldLayout( 'regular' )?.component;
-	if ( ! RegularLayout ) {
-		return null;
-	}
-	const withHeader = !! fieldDefinition.label && layout.withHeader;
-
-	const sizeCardBody = {
-		blockStart: withHeader ? ( 'none' as const ) : ( 'medium' as const ),
-		blockEnd: 'medium' as const,
-		inlineStart: 'medium' as const,
-		inlineEnd: 'medium' as const,
-	};
-
-	return (
-		<Card className="dataforms-layouts-card__field" size={ sizeCard }>
-			{ withHeader && (
-				<CardHeader className="dataforms-layouts-card__field-header">
-					<span className="dataforms-layouts-card__field-header-label">
-						{ fieldDefinition.label }
-					</span>
-					{ validationBadge }
-					{ visibleSummaryFields.length > 0 && layout.withHeader && (
-						<div className="dataforms-layouts-card__field-summary">
-							{ visibleSummaryFields.map( ( summaryField ) => (
-								<summaryField.render
-									key={ summaryField.id }
-									item={ data }
-									field={ summaryField }
-								/>
-							) ) }
-						</div>
 					) }
-				</CardHeader>
+				</OriginalCardHeader>
 			) }
 			{ ( isOpen || ! withHeader ) && (
 				// If it doesn't have a header, keep it open.
 				// Otherwise, the card will not be visible.
 				<CardBody
+					id={ bodyId }
 					size={ sizeCardBody }
 					className="dataforms-layouts-card__field-control"
 					ref={ cardBodyRef }
 					onBlur={ handleBlur }
 				>
-					<RegularLayout
-						data={ data }
-						field={ field }
-						onChange={ onChange }
-						hideLabelFromVision={
-							hideLabelFromVision || withHeader
-						}
-						markWhenOptional={ markWhenOptional }
-						validity={ validity }
-					/>
+					{ bodyContent }
 				</CardBody>
 			) }
 		</Card>

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

@@ -34,7 +34,7 @@ const FORM_FIELD_LAYOUTS = [
 			<Stack
 				direction="column"
 				className="dataforms-layouts__wrapper"
-				gap="sm"
+				gap="md"
 			>
 				{ children }
 			</Stack>

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

@@ -60,6 +60,7 @@ function normalizeLayout( layout?: Layout ): NormalizedLayout {
 			labelPosition: layout?.labelPosition ?? 'side',
 			openAs: layout?.openAs ?? 'dropdown',
 			summary: normalizedSummary,
+			editVisibility: layout?.editVisibility ?? 'on-hover',
 		} satisfies NormalizedPanelLayout;
 	} else if ( layout?.type === 'card' ) {
 		if ( layout.withHeader === false ) {