@wordpress/dataviews 10.2.0 → 10.3.1-next.2f1c7c01b.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "10.2.0",
+	"version": "10.3.1-next.2f1c7c01b.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",
@@ -44,19 +44,19 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
-		"@wordpress/base-styles": "^6.10.0",
-		"@wordpress/components": "^30.7.0",
-		"@wordpress/compose": "^7.34.0",
-		"@wordpress/data": "^10.34.0",
-		"@wordpress/date": "^5.34.0",
-		"@wordpress/element": "^6.34.0",
-		"@wordpress/i18n": "^6.7.0",
-		"@wordpress/icons": "^11.1.0",
-		"@wordpress/keycodes": "^4.34.0",
-		"@wordpress/primitives": "^4.34.0",
-		"@wordpress/private-apis": "^1.34.0",
-		"@wordpress/url": "^4.34.0",
-		"@wordpress/warning": "^3.34.0",
+		"@wordpress/base-styles": "^6.10.1-next.2f1c7c01b.0",
+		"@wordpress/components": "^30.7.2-next.2f1c7c01b.0",
+		"@wordpress/compose": "^7.34.1-next.2f1c7c01b.0",
+		"@wordpress/data": "^10.34.1-next.2f1c7c01b.0",
+		"@wordpress/date": "^5.34.1-next.2f1c7c01b.0",
+		"@wordpress/element": "^6.34.1-next.2f1c7c01b.0",
+		"@wordpress/i18n": "^6.7.1-next.2f1c7c01b.0",
+		"@wordpress/icons": "^11.1.1-next.2f1c7c01b.0",
+		"@wordpress/keycodes": "^4.34.1-next.2f1c7c01b.0",
+		"@wordpress/primitives": "^4.34.1-next.2f1c7c01b.0",
+		"@wordpress/private-apis": "^1.34.1-next.2f1c7c01b.0",
+		"@wordpress/url": "^4.34.1-next.2f1c7c01b.0",
+		"@wordpress/warning": "^3.34.1-next.2f1c7c01b.0",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^4.1.0",
@@ -74,5 +74,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "ceebff807958d2e8fc755b5a20473939c78b4d1d"
+	"gitHead": "c6ddcdf455bc02567a2c9e03de6862a2061b85e8"
 }

package/src/components/dataform/index.tsx

@@ -10,6 +10,7 @@ import type { DataFormProps } from '../../types';
 import { DataFormProvider } from '../dataform-context';
 import normalizeFields from '../../utils/normalize-fields';
 import { DataFormLayout } from '../../dataform-layouts/data-form-layout';
+import normalizeForm from '../../dataform-layouts/normalize-form';
 
 export default function DataForm< Item >( {
 	data,
@@ -18,6 +19,7 @@ export default function DataForm< Item >( {
 	onChange,
 	validity,
 }: DataFormProps< Item > ) {
+	const normalizedForm = useMemo( () => normalizeForm( form ), [ form ] );
 	const normalizedFields = useMemo(
 		() => normalizeFields( fields ),
 		[ fields ]
@@ -31,7 +33,7 @@ export default function DataForm< Item >( {
 		<DataFormProvider fields={ normalizedFields }>
 			<DataFormLayout
 				data={ data }
-				form={ form }
+				form={ normalizedForm }
 				onChange={ onChange }
 				validity={ validity }
 			/>

package/src/components/dataviews-filters/filter.tsx

@@ -62,6 +62,7 @@ import type {
 	View,
 } from '../../types';
 import useElements from '../../hooks/use-elements';
+import parseDateTime from '../../field-types/utils/parse-date-time';
 
 interface FilterTextProps {
 	activeElements: Option[];
@@ -494,10 +495,24 @@ export default function Filter( {
 			return filterInView?.value?.includes( element.value );
 		} );
 	} else if ( filterInView?.value !== undefined ) {
+		const field = fields.find( ( f ) => f.id === filter.field );
+		let label = filterInView.value;
+
+		if ( field?.type === 'datetime' && typeof label === 'string' ) {
+			try {
+				const dateValue = parseDateTime( label );
+				if ( dateValue !== null ) {
+					label = dateValue.toLocaleString();
+				}
+			} catch ( e ) {
+				label = filterInView.value;
+			}
+		}
+
 		activeElements = [
 			{
 				value: filterInView.value,
-				label: filterInView.value,
+				label,
 			},
 		];
 	}

package/src/components/dataviews-item-actions/index.tsx

@@ -132,22 +132,45 @@ export function ActionsMenuGroup< Item >( {
 	registry,
 	setActiveModalAction,
 }: ActionsMenuGroupProps< Item > ) {
+	const { primaryActions, regularActions } = useMemo( () => {
+		return actions.reduce(
+			( acc, action ) => {
+				( action.isPrimary
+					? acc.primaryActions
+					: acc.regularActions
+				).push( action );
+				return acc;
+			},
+			{
+				primaryActions: [] as Action< Item >[],
+				regularActions: [] as Action< Item >[],
+			}
+		);
+	}, [ actions ] );
+
+	const renderActionGroup = ( actionList: Action< Item >[] ) =>
+		actionList.map( ( action ) => (
+			<MenuItemTrigger
+				key={ action.id }
+				action={ action }
+				onClick={ () => {
+					if ( 'RenderModal' in action ) {
+						setActiveModalAction( action );
+						return;
+					}
+					action.callback( [ item ], { registry } );
+				} }
+				items={ [ item ] }
+			/>
+		) );
+
 	return (
 		<Menu.Group>
-			{ actions.map( ( action ) => (
-				<MenuItemTrigger
-					key={ action.id }
-					action={ action }
-					onClick={ () => {
-						if ( 'RenderModal' in action ) {
-							setActiveModalAction( action );
-							return;
-						}
-						action.callback( [ item ], { registry } );
-					} }
-					items={ [ item ] }
-				/>
-			) ) }
+			{ renderActionGroup( primaryActions ) }
+			{ primaryActions.length > 0 && regularActions.length > 0 && (
+				<Menu.Separator />
+			) }
+			{ renderActionGroup( regularActions ) }
 		</Menu.Group>
 	);
 }

package/src/dataform-controls/datetime.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { format, isValid as isValidDate } from 'date-fns';
+import { format } from 'date-fns';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import {
 } from '@wordpress/components';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { getDate, getSettings } from '@wordpress/date';
+import { getSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -22,18 +22,11 @@ import type { DataFormControlProps } from '../types';
 import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';
 import RelativeDateControl from './utils/relative-date-control';
 import getCustomValidity from './utils/get-custom-validity';
+import parseDateTime from '../field-types/utils/parse-date-time';
 import { unlock } from '../lock-unlock';
 
 const { DateCalendar, ValidatedInputControl } = unlock( componentsPrivateApis );
 
-const parseDateTime = ( dateTimeString?: string ): Date | null => {
-	if ( ! dateTimeString ) {
-		return null;
-	}
-	const parsed = getDate( dateTimeString );
-	return parsed && isValidDate( parsed ) ? parsed : null;
-};
-
 const formatDateTime = ( date?: Date | string ): string => {
 	if ( ! date ) {
 		return '';

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

@@ -16,16 +16,14 @@ import { chevronDown, chevronUp } from '@wordpress/icons';
 import { getFormFieldLayout } from '..';
 import DataFormContext from '../../components/dataform-context';
 import type {
-	NormalizedCardLayout,
-	CardLayout,
 	FieldLayoutProps,
-	Form,
-	Layout,
+	NormalizedCardLayout,
 	NormalizedField,
+	NormalizedForm,
+	NormalizedLayout,
 } from '../../types';
 import { DataFormLayout } from '../data-form-layout';
-import { isCombinedField } from '../is-combined-field';
-import { DEFAULT_LAYOUT, normalizeLayout } from '../normalize-form-fields';
+import { DEFAULT_LAYOUT } from '../normalize-form';
 import { getSummaryFields } from '../get-summary-fields';
 
 const NonCollapsibleCardHeader = ( {
@@ -34,7 +32,7 @@ const NonCollapsibleCardHeader = ( {
 }: {
 	children: React.ReactNode;
 } ) => (
-	<OriginalCardHeader { ...props }>
+	<OriginalCardHeader isBorderless { ...props }>
 		<div
 			style={ {
 				height: '40px', // This is to match the chevron's __next40pxDefaultSize
@@ -72,6 +70,7 @@ export function useCardHeader( layout: NormalizedCardLayout ) {
 					cursor: 'pointer',
 					...props.style,
 				} }
+				isBorderless
 			>
 				<div
 					style={ {
@@ -162,16 +161,12 @@ export default function FormCardField< Item >( {
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
+	const layout = field.layout as NormalizedCardLayout;
 
-	const layout: NormalizedCardLayout = normalizeLayout( {
-		...field.layout,
-		type: 'card',
-	} as CardLayout ) as NormalizedCardLayout;
-
-	const form: Form = useMemo(
-		(): Form => ( {
-			layout: DEFAULT_LAYOUT as Layout,
-			fields: isCombinedField( field ) ? field.children : [],
+	const form: NormalizedForm = useMemo(
+		() => ( {
+			layout: DEFAULT_LAYOUT as NormalizedLayout,
+			fields: field.children ?? [],
 		} ),
 		[ field ]
 	);
@@ -184,11 +179,27 @@ export default function FormCardField< Item >( {
 		isSummaryFieldVisible( summaryField, layout.summary, isOpen )
 	);
 
-	if ( isCombinedField( field ) ) {
+	const sizeCard = {
+		blockStart: 'medium' as const,
+		blockEnd: 'medium' as const,
+		inlineStart: 'medium' as const,
+		inlineEnd: 'medium' as const,
+	};
+
+	if ( !! field.children ) {
 		const withHeader = !! field.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">
+			<Card className="dataforms-layouts-card__field" size={ sizeCard }>
 				{ withHeader && (
 					<CardHeader className="dataforms-layouts-card__field-header">
 						<span className="dataforms-layouts-card__field-header-label">
@@ -213,7 +224,10 @@ export default function FormCardField< Item >( {
 				{ ( isOpen || ! withHeader ) && (
 					// If it doesn't have a header, keep it open.
 					// Otherwise, the card will not be visible.
-					<CardBody className="dataforms-layouts-card__field-control">
+					<CardBody
+						size={ sizeCardBody }
+						className="dataforms-layouts-card__field-control"
+					>
 						{ field.description && (
 							<div className="dataforms-layouts-card__field-description">
 								{ field.description }
@@ -245,8 +259,15 @@ export default function FormCardField< Item >( {
 	}
 	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">
+		<Card className="dataforms-layouts-card__field" size={ sizeCard }>
 			{ withHeader && (
 				<CardHeader className="dataforms-layouts-card__field-header">
 					<span className="dataforms-layouts-card__field-header-label">
@@ -268,7 +289,10 @@ export default function FormCardField< Item >( {
 			{ ( isOpen || ! withHeader ) && (
 				// If it doesn't have a header, keep it open.
 				// Otherwise, the card will not be visible.
-				<CardBody className="dataforms-layouts-card__field-control">
+				<CardBody
+					size={ sizeCardBody }
+					className="dataforms-layouts-card__field-control"
+				>
 					<RegularLayout
 						data={ data }
 						field={ field }

package/src/dataform-layouts/data-form-layout.tsx

@@ -2,22 +2,19 @@
  * WordPress dependencies
  */
 import { __experimentalVStack as VStack } from '@wordpress/components';
-import { useContext, useMemo } from '@wordpress/element';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type {
 	FieldValidity,
-	Form,
-	FormField,
 	FormValidity,
-	SimpleFormField,
+	NormalizedForm,
+	NormalizedFormField,
 } from '../types';
 import { getFormFieldLayout } from './index';
 import DataFormContext from '../components/dataform-context';
-import { isCombinedField } from './is-combined-field';
-import normalizeFormFields, { normalizeLayout } from './normalize-form-fields';
 
 const DEFAULT_WRAPPER = ( { children }: { children: React.ReactNode } ) => (
 	<VStack className="dataforms-layouts__wrapper" spacing={ 4 }>
@@ -34,46 +31,38 @@ export function DataFormLayout< Item >( {
 	as,
 }: {
 	data: Item;
-	form: Form;
+	form: NormalizedForm;
 	onChange: ( value: any ) => void;
 	validity?: FormValidity;
 	children?: (
 		FieldLayout: ( props: {
 			data: Item;
-			field: FormField;
+			field: NormalizedFormField;
 			onChange: ( value: any ) => void;
 			hideLabelFromVision?: boolean;
 			validity?: FieldValidity;
 		} ) => React.JSX.Element | null,
-		childField: FormField,
+		childField: NormalizedFormField,
 		childFieldValidity?: FieldValidity
 	) => React.JSX.Element;
 	as?: React.ComponentType< { children: React.ReactNode } >;
 } ) {
 	const { fields: fieldDefinitions } = useContext( DataFormContext );
 
-	function getFieldDefinition( field: SimpleFormField | string ) {
-		const fieldId = typeof field === 'string' ? field : field.id;
-
+	function getFieldDefinition( field: NormalizedFormField ) {
 		return fieldDefinitions.find(
-			( fieldDefinition ) => fieldDefinition.id === fieldId
+			( fieldDefinition ) => fieldDefinition.id === field.id
 		);
 	}
 
-	const normalizedFormFields = useMemo(
-		() => normalizeFormFields( form ),
-		[ form ]
-	);
-
-	const normalizedFormLayout = normalizeLayout( form.layout );
 	const Wrapper =
 		as ??
-		getFormFieldLayout( normalizedFormLayout.type )?.wrapper ??
+		getFormFieldLayout( form.layout.type )?.wrapper ??
 		DEFAULT_WRAPPER;
 
 	return (
-		<Wrapper layout={ normalizedFormLayout }>
-			{ normalizedFormFields.map( ( formField ) => {
+		<Wrapper layout={ form.layout }>
+			{ form.fields.map( ( formField ) => {
 				const FieldLayout = getFormFieldLayout( formField.layout.type )
 					?.component;
 
@@ -81,7 +70,7 @@ export function DataFormLayout< Item >( {
 					return null;
 				}
 
-				const fieldDefinition = ! isCombinedField( formField )
+				const fieldDefinition = ! formField.children
 					? getFieldDefinition( formField )
 					: undefined;
 

package/src/dataform-layouts/index.tsx

@@ -9,7 +9,7 @@ import {
 /**
  * Internal dependencies
  */
-import type { Layout, RowLayout } from '../types';
+import type { NormalizedLayout, NormalizedRowLayout } from '../types';
 import FormRegularField from './regular';
 import FormPanelField from './panel';
 import FormCardField from './card';
@@ -51,13 +51,15 @@ const FORM_FIELD_LAYOUTS = [
 			layout,
 		}: {
 			children: React.ReactNode;
-			layout: Layout;
+			layout: NormalizedLayout;
 		} ) => (
 			<VStack className="dataforms-layouts__wrapper" spacing={ 4 }>
 				<div className="dataforms-layouts-row__field">
 					<HStack
 						spacing={ 4 }
-						alignment={ ( layout as RowLayout ).alignment }
+						alignment={
+							( layout as NormalizedRowLayout ).alignment
+						}
 					>
 						{ children }
 					</HStack>

package/src/dataform-layouts/{normalize-form-fields.ts → normalize-form.ts}

@@ -4,6 +4,8 @@
 import type {
 	Form,
 	Layout,
+	NormalizedForm,
+	NormalizedFormField,
 	NormalizedLayout,
 	NormalizedRegularLayout,
 	NormalizedPanelLayout,
@@ -13,11 +15,6 @@ import type {
 	CardSummaryField,
 } from '../types';
 
-interface NormalizedFormField {
-	id: string;
-	layout: Layout;
-}
-
 export const DEFAULT_LAYOUT: NormalizedLayout = {
 	type: 'regular',
 	labelPosition: 'top',
@@ -43,7 +40,7 @@ const normalizeCardSummaryField = (
  * @param layout The layout object to normalize.
  * @return The normalized layout object.
  */
-export function normalizeLayout( layout?: Layout ): NormalizedLayout {
+function normalizeLayout( layout?: Layout ): NormalizedLayout {
 	let normalizedLayout = DEFAULT_LAYOUT;
 
 	if ( layout?.type === 'regular' ) {
@@ -102,25 +99,44 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout {
 	return normalizedLayout;
 }
 
-export default function normalizeFormFields(
-	form: Form
-): NormalizedFormField[] {
-	const formLayout = normalizeLayout( form?.layout );
+function normalizeForm( form: Form ): NormalizedForm {
+	const normalizedFormLayout = normalizeLayout( form?.layout );
+
+	const normalizedFields: NormalizedFormField[] = ( form.fields ?? [] ).map(
+		( field ) => {
+			if ( typeof field === 'string' ) {
+				return {
+					id: field,
+					layout: normalizedFormLayout,
+				} satisfies NormalizedFormField;
+			}
+
+			const fieldLayout = field.layout
+				? normalizeLayout( field.layout )
+				: normalizedFormLayout;
 
-	return ( form.fields ?? [] ).map( ( field ) => {
-		if ( typeof field === 'string' ) {
 			return {
-				id: field,
-				layout: formLayout,
-			};
+				id: field.id,
+				layout: fieldLayout,
+				...( !! field.label && { label: field.label } ),
+				...( !! field.description && {
+					description: field.description,
+				} ),
+				...( 'children' in field &&
+					Array.isArray( field.children ) && {
+						children: normalizeForm( {
+							fields: field.children,
+							layout: DEFAULT_LAYOUT,
+						} ).fields,
+					} ),
+			} satisfies NormalizedFormField;
 		}
+	);
 
-		const fieldLayout = field.layout
-			? normalizeLayout( field.layout )
-			: formLayout;
-		return {
-			...field,
-			layout: fieldLayout,
-		};
-	} );
+	return {
+		layout: normalizedFormLayout,
+		fields: normalizedFields,
+	};
 }
+
+export default normalizeForm;

package/src/dataform-layouts/panel/dropdown.tsx

@@ -18,14 +18,13 @@ import { closeSmall } from '@wordpress/icons';
  */
 import type {
 	FieldValidity,
-	Form,
-	FormField,
+	NormalizedForm,
+	NormalizedFormField,
 	FormValidity,
 	NormalizedField,
 } from '../../types';
 import { DataFormLayout } from '../data-form-layout';
-import { isCombinedField } from '../is-combined-field';
-import { DEFAULT_LAYOUT } from '../normalize-form-fields';
+import { DEFAULT_LAYOUT } from '../normalize-form';
 import SummaryButton from './summary-button';
 
 function DropdownHeader( {
@@ -71,7 +70,7 @@ function PanelDropdown< Item >( {
 	popoverAnchor,
 }: {
 	data: Item;
-	field: FormField;
+	field: NormalizedFormField;
 	onChange: ( value: any ) => void;
 	validity?: FieldValidity;
 	labelPosition: 'side' | 'top' | 'none';
@@ -79,17 +78,15 @@ function PanelDropdown< Item >( {
 	fieldDefinition: NormalizedField< Item >;
 	popoverAnchor: HTMLElement | null;
 } ) {
-	const fieldLabel = isCombinedField( field )
-		? field.label
-		: fieldDefinition?.label;
+	const fieldLabel = !! field.children ? field.label : fieldDefinition?.label;
 
-	const form: Form = useMemo(
-		(): Form => ( {
+	const form: NormalizedForm = useMemo(
+		() => ( {
 			layout: DEFAULT_LAYOUT,
-			fields: isCombinedField( field )
+			fields: !! field.children
 				? field.children
 				: // If not explicit children return the field id itself.
-				  [ { id: field.id } ],
+				  [ { id: field.id, layout: DEFAULT_LAYOUT } ],
 		} ),
 		[ field ]
 	);
@@ -98,7 +95,7 @@ function PanelDropdown< Item >( {
 			return undefined;
 		}
 
-		if ( isCombinedField( field ) ) {
+		if ( !! field.children ) {
 			return validity?.children;
 		}