@wordpress/dataviews 10.2.0 → 10.3.0

package/src/components/dataviews-view-config/properties-section.tsx

@@ -0,0 +1,201 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	BaseControl,
+	Icon,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+import { check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+import DataViewsContext from '../dataviews-context';
+
+function FieldItem( {
+	field,
+	isVisible,
+	onToggleVisibility,
+}: {
+	field: NormalizedField< any >;
+	isVisible: boolean;
+	onToggleVisibility?: () => void;
+} ) {
+	return (
+		<Item onClick={ field.enableHiding ? onToggleVisibility : undefined }>
+			<HStack expanded justify="flex-start" alignment="center">
+				<div style={ { height: 24, width: 24 } }>
+					{ isVisible && <Icon icon={ check } /> }
+				</div>
+				<span className="dataviews-view-config__label">
+					{ field.label }
+				</span>
+			</HStack>
+		</Item>
+	);
+}
+
+function isDefined< T >( item: T | undefined ): item is T {
+	return !! item;
+}
+
+export function PropertiesSection( {
+	showLabel = true,
+}: {
+	showLabel?: boolean;
+} ) {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
+
+	const togglableFields = [
+		view?.titleField,
+		view?.mediaField,
+		view?.descriptionField,
+	].filter( Boolean );
+
+	// Get all regular fields (non-locked) in their original order from fields prop
+	const regularFields = fields.filter(
+		( f ) =>
+			! togglableFields.includes( f.id ) &&
+			f.type !== 'media' &&
+			f.enableHiding !== false
+	);
+
+	if ( ! regularFields?.length ) {
+		return null;
+	}
+	const titleField = fields.find( ( f ) => f.id === view.titleField );
+	const previewField = fields.find( ( f ) => f.id === view.mediaField );
+	const descriptionField = fields.find(
+		( f ) => f.id === view.descriptionField
+	);
+
+	const lockedFields = [
+		{
+			field: titleField,
+			isVisibleFlag: 'showTitle',
+		},
+		{
+			field: previewField,
+			isVisibleFlag: 'showMedia',
+		},
+		{
+			field: descriptionField,
+			isVisibleFlag: 'showDescription',
+		},
+	].filter( ( { field } ) => isDefined( field ) );
+	const visibleFieldIds = view.fields ?? [];
+	const visibleRegularFieldsCount = regularFields.filter( ( f ) =>
+		visibleFieldIds.includes( f.id )
+	).length;
+
+	let visibleLockedFields = lockedFields.filter(
+		( { field, isVisibleFlag } ) =>
+			// @ts-expect-error
+			isDefined( field ) && ( view[ isVisibleFlag ] ?? true )
+	) as Array< {
+		field: NormalizedField< any >;
+		isVisibleFlag: string;
+	} >;
+
+	// If only one field (locked or regular) is visible, prevent it from being hidden
+	const totalVisibleFields =
+		visibleLockedFields.length + visibleRegularFieldsCount;
+	if ( totalVisibleFields === 1 ) {
+		if ( visibleLockedFields.length === 1 ) {
+			visibleLockedFields = visibleLockedFields.map( ( locked ) => ( {
+				...locked,
+				field: { ...locked.field, enableHiding: false },
+			} ) );
+		}
+	}
+
+	const hiddenLockedFields = lockedFields.filter(
+		( { field, isVisibleFlag } ) =>
+			// @ts-expect-error
+			isDefined( field ) && ! ( view[ isVisibleFlag ] ?? true )
+	) as Array< {
+		field: NormalizedField< any >;
+		isVisibleFlag: string;
+	} >;
+
+	return (
+		<VStack className="dataviews-field-control" spacing={ 0 }>
+			{ showLabel && (
+				<BaseControl.VisualLabel>
+					{ __( 'Properties' ) }
+				</BaseControl.VisualLabel>
+			) }
+			<VStack className="dataviews-view-config__properties" spacing={ 0 }>
+				<ItemGroup isBordered isSeparated size="medium">
+					{ visibleLockedFields.map( ( { field, isVisibleFlag } ) => {
+						return (
+							<FieldItem
+								key={ field.id }
+								field={ field }
+								isVisible
+								onToggleVisibility={ () => {
+									onChangeView( {
+										...view,
+										[ isVisibleFlag ]: false,
+									} );
+								} }
+							/>
+						);
+					} ) }
+
+					{ hiddenLockedFields.map( ( { field, isVisibleFlag } ) => {
+						return (
+							<FieldItem
+								key={ field.id }
+								field={ field }
+								isVisible={ false }
+								onToggleVisibility={ () => {
+									onChangeView( {
+										...view,
+										[ isVisibleFlag ]: true,
+									} );
+								} }
+							/>
+						);
+					} ) }
+
+					{ regularFields.map( ( field ) => {
+						// Check if this is the last visible field to prevent hiding
+						const isVisible = visibleFieldIds.includes( field.id );
+						const isLastVisible =
+							totalVisibleFields === 1 && isVisible;
+						const fieldToRender = isLastVisible
+							? { ...field, enableHiding: false }
+							: field;
+
+						return (
+							<FieldItem
+								key={ field.id }
+								field={ fieldToRender }
+								isVisible={ isVisible }
+								onToggleVisibility={ () => {
+									onChangeView( {
+										...view,
+										fields: isVisible
+											? visibleFieldIds.filter(
+													( fieldId ) =>
+														fieldId !== field.id
+											  )
+											: [ ...visibleFieldIds, field.id ],
+									} );
+								} }
+							/>
+						);
+					} ) }
+				</ItemGroup>
+			</VStack>
+		</VStack>
+	);
+}

package/src/components/dataviews-view-config/style.scss

@@ -58,44 +58,7 @@
 		}
 	}
 }
-.dataviews-field-control__field {
-	height: $grid-unit-40;
-}
-
-.dataviews-field-control__actions {
-	position: absolute;
-	top: -9999em;
-}
-.dataviews-field-control__actions.dataviews-field-control__actions {
-	gap: $grid-unit-05;
-}
-
-.dataviews-field-control__field:hover,
-.dataviews-field-control__field:focus-within,
-.dataviews-field-control__field.is-interacting {
-	.dataviews-field-control__actions {
-		position: unset;
-		top: unset;
-	}
-}
-
-.dataviews-field-control__icon {
-	display: flex;
-	width: $icon-size;
-}
-
-.dataviews-field-control__label-sub-label-container {
-	flex-grow: 1;
-}
-
-.dataviews-field-control__label {
-	display: block;
-}
 
-.dataviews-field-control__sub-label {
-	margin-top: $grid-unit-10;
-	margin-bottom: 0;
-	font-size: 11px;
-	font-style: normal;
-	color: $gray-700;
+.dataviews-view-config__label {
+	text-wrap: nowrap;
 }

package/src/constants.ts

@@ -186,3 +186,4 @@ export const LAYOUT_LIST = 'list';
 
 // Picker view layouts.
 export const LAYOUT_PICKER_GRID = 'pickerGrid';
+export const LAYOUT_PICKER_TABLE = 'pickerTable';

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

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	NormalizedForm,
+	NormalizedDetailsLayout,
+	FieldLayoutProps,
+} from '../../types';
+import DataFormContext from '../../components/dataform-context';
+import { DataFormLayout } from '../data-form-layout';
+import { DEFAULT_LAYOUT } from '../normalize-form';
+
+export default function FormDetailsField< Item >( {
+	data,
+	field,
+	onChange,
+}: FieldLayoutProps< Item > ) {
+	const { fields } = useContext( DataFormContext );
+
+	const form: NormalizedForm = useMemo(
+		() => ( {
+			layout: DEFAULT_LAYOUT,
+			fields: field.children ?? [],
+		} ),
+		[ field ]
+	);
+
+	if ( ! field.children ) {
+		return null;
+	}
+
+	// Find the summary field definition if specified
+	const summaryFieldId =
+		( field.layout as NormalizedDetailsLayout ).summary ?? '';
+	const summaryField = summaryFieldId
+		? fields.find( ( fieldDef ) => fieldDef.id === summaryFieldId )
+		: undefined;
+
+	// Render the summary content
+	let summaryContent;
+	if ( summaryField && summaryField.render ) {
+		// Use the field's render function to display the current value
+		summaryContent = (
+			<summaryField.render item={ data } field={ summaryField } />
+		);
+	} else {
+		// Fall back to the label
+		summaryContent = field.label || __( 'More details' );
+	}
+
+	return (
+		<details className="dataforms-layouts-details__details">
+			<summary className="dataforms-layouts-details__summary">
+				{ summaryContent }
+			</summary>
+			<div className="dataforms-layouts-details__content">
+				<DataFormLayout
+					data={ data }
+					form={ form }
+					onChange={ onChange }
+				/>
+			</div>
+		</details>
+	);
+}

package/src/dataform-layouts/details/style.scss

@@ -0,0 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
+.dataforms-layouts-details__content {
+	padding-top: $grid-unit-15;
+}

package/src/dataform-layouts/index.tsx

@@ -9,11 +9,12 @@ 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';
 import FormRowField from './row';
+import FormDetailsField from './details';
 
 const FORM_FIELD_LAYOUTS = [
 	{
@@ -51,13 +52,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>
@@ -65,6 +68,10 @@ const FORM_FIELD_LAYOUTS = [
 			</VStack>
 		),
 	},
+	{
+		type: 'details',
+		component: FormDetailsField,
+	},
 ];
 
 export function getFormFieldLayout( type: string ) {