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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "10.1.2",
+	"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.9.1",
-		"@wordpress/components": "^30.6.1",
-		"@wordpress/compose": "^7.33.1",
-		"@wordpress/data": "^10.33.1",
-		"@wordpress/date": "^5.33.1",
-		"@wordpress/element": "^6.33.1",
-		"@wordpress/i18n": "^6.6.1",
-		"@wordpress/icons": "^11.0.1",
-		"@wordpress/keycodes": "^4.33.1",
-		"@wordpress/primitives": "^4.33.1",
-		"@wordpress/private-apis": "^1.33.1",
-		"@wordpress/url": "^4.33.1",
-		"@wordpress/warning": "^3.33.1",
+		"@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": "45005cc254bab59182927e35a68cd22f6320634d"
+	"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/style.scss

@@ -61,7 +61,7 @@
 
 .dataviews-title-field {
 	font-size: $default-font-size;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	color: $gray-800;
 	text-overflow: ellipsis;
 	white-space: nowrap;

package/src/components/dataviews-bulk-actions/style.scss

@@ -4,7 +4,7 @@
 
 .dataviews-bulk-actions-footer__item-count {
 	color: $gray-900;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	font-size: 11px;
 	text-transform: uppercase;
 }

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-filters/style.scss

@@ -119,7 +119,7 @@
 		}
 
 		.dataviews-filters-__summary-filter-text-name {
-			font-weight: 500;
+			font-weight: $font-weight-medium;
 		}
 	}
 

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/components/dataviews-pagination/style.scss

@@ -3,13 +3,13 @@
 
 .dataviews-pagination__page-select {
 	font-size: 11px;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	text-transform: uppercase;
 
 	@include break-small() {
 		.components-select-control__input {
 			font-size: 11px !important;
-			font-weight: 500;
+			font-weight: $font-weight-medium;
 		}
 	}
 }

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-controls/password.tsx

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import {
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+	Button,
+} from '@wordpress/components';
 import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { seen, unseen } from '@wordpress/icons';
@@ -34,17 +37,18 @@ export default function Password< Item >( {
 				validity,
 				type: isVisible ? 'text' : 'password',
 				suffix: (
-					<Button
-						icon={ isVisible ? unseen : seen }
-						onClick={ toggleVisibility }
-						size="small"
-						variant="tertiary"
-						aria-label={
-							isVisible
-								? __( 'Hide password' )
-								: __( 'Show password' )
-						}
-					/>
+					<InputControlSuffixWrapper variant="control">
+						<Button
+							icon={ isVisible ? unseen : seen }
+							onClick={ toggleVisibility }
+							size="small"
+							label={
+								isVisible
+									? __( 'Hide password' )
+									: __( 'Show password' )
+							}
+						/>
+					</InputControlSuffixWrapper>
 				),
 			} }
 		/>

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

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { Button, Card, CardBody, CardHeader } from '@wordpress/components';
+import {
+	Button,
+	Card,
+	CardBody,
+	CardHeader as OriginalCardHeader,
+} from '@wordpress/components';
 import { useCallback, useContext, useMemo, useState } from '@wordpress/element';
 import { chevronDown, chevronUp } from '@wordpress/icons';
 
@@ -11,20 +16,40 @@ 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';
 
-export function useCollapsibleCard( initialIsOpen: boolean = true ) {
-	const [ isOpen, setIsOpen ] = useState( initialIsOpen );
+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 toggle = useCallback( () => {
 		setIsOpen( ( prev ) => ! prev );
@@ -38,13 +63,14 @@ export function useCollapsibleCard( initialIsOpen: boolean = true ) {
 			children: React.ReactNode;
 			[ key: string ]: any;
 		} ) => (
-			<CardHeader
+			<OriginalCardHeader
 				{ ...props }
 				onClick={ toggle }
 				style={ {
 					cursor: 'pointer',
 					...props.style,
 				} }
+				isBorderless
 			>
 				<div
 					style={ {
@@ -63,12 +89,17 @@ export function useCollapsibleCard( initialIsOpen: boolean = true ) {
 					aria-expanded={ isOpen }
 					aria-label={ isOpen ? 'Collapse' : 'Expand' }
 				/>
-			</CardHeader>
+			</OriginalCardHeader>
 		),
 		[ toggle, isOpen ]
 	);
 
-	return { isOpen, CollapsibleCardHeader };
+	const effectiveIsOpen = isCollapsible ? isOpen : true;
+	const CardHeaderComponent = isCollapsible
+		? CollapsibleCardHeader
+		: NonCollapsibleCardHeader;
+
+	return { isOpen: effectiveIsOpen, CardHeader: CardHeaderComponent };
 }
 
 function isSummaryFieldVisible< Item >(
@@ -130,23 +161,17 @@ 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 ]
 	);
 
-	const { isOpen, CollapsibleCardHeader } = useCollapsibleCard(
-		layout.isOpened
-	);
+	const { isOpen, CardHeader } = useCardHeader( layout );
 
 	const summaryFields = getSummaryFields< Item >( layout.summary, fields );
 
@@ -154,12 +179,29 @@ 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 && (
-					<CollapsibleCardHeader className="dataforms-layouts-card__field-header">
+					<CardHeader className="dataforms-layouts-card__field-header">
 						<span className="dataforms-layouts-card__field-header-label">
 							{ field.label }
 						</span>
@@ -177,12 +219,15 @@ export default function FormCardField< Item >( {
 									) }
 								</div>
 							) }
-					</CollapsibleCardHeader>
+					</CardHeader>
 				) }
 				{ ( 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 }
@@ -213,10 +258,18 @@ export default function FormCardField< Item >( {
 		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">
+		<Card className="dataforms-layouts-card__field" size={ sizeCard }>
 			{ withHeader && (
-				<CollapsibleCardHeader className="dataforms-layouts-card__field-header">
+				<CardHeader className="dataforms-layouts-card__field-header">
 					<span className="dataforms-layouts-card__field-header-label">
 						{ fieldDefinition.label }
 					</span>
@@ -231,12 +284,15 @@ export default function FormCardField< Item >( {
 							) ) }
 						</div>
 					) }
-				</CollapsibleCardHeader>
+				</CardHeader>
 			) }
 			{ ( 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>