@wordpress/dataviews 10.1.5 → 10.3.0

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 ) {

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

@@ -4,20 +4,18 @@
 import type {
 	Form,
 	Layout,
+	NormalizedForm,
+	NormalizedFormField,
 	NormalizedLayout,
 	NormalizedRegularLayout,
 	NormalizedPanelLayout,
 	NormalizedCardLayout,
 	NormalizedRowLayout,
+	NormalizedDetailsLayout,
 	NormalizedCardSummaryField,
 	CardSummaryField,
 } from '../types';
 
-interface NormalizedFormField {
-	id: string;
-	layout: Layout;
-}
-
 export const DEFAULT_LAYOUT: NormalizedLayout = {
 	type: 'regular',
 	labelPosition: 'top',
@@ -43,7 +41,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' ) {
@@ -72,6 +70,7 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout {
 				withHeader: false,
 				isOpened: true,
 				summary: [],
+				isCollapsible: false,
 			} satisfies NormalizedCardLayout;
 		} else {
 			const summary = layout.summary ?? [];
@@ -84,6 +83,10 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout {
 						? layout.isOpened
 						: true,
 				summary: normalizeCardSummaryField( summary ),
+				isCollapsible:
+					layout.isCollapsible === undefined
+						? true
+						: layout.isCollapsible,
 			} satisfies NormalizedCardLayout;
 		}
 	} else if ( layout?.type === 'row' ) {
@@ -92,30 +95,54 @@ export function normalizeLayout( layout?: Layout ): NormalizedLayout {
 			alignment: layout?.alignment ?? 'center',
 			styles: layout?.styles ?? {},
 		} satisfies NormalizedRowLayout;
+	} else if ( layout?.type === 'details' ) {
+		normalizedLayout = {
+			type: 'details',
+			summary: layout?.summary ?? '',
+		} satisfies NormalizedDetailsLayout;
 	}
 
 	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;
 		}
 

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

@@ -17,48 +17,39 @@ import { useState, useContext } from '@wordpress/element';
  */
 import type {
 	FieldLayoutProps,
-	FormField,
 	NormalizedField,
+	NormalizedFormField,
 	NormalizedPanelLayout,
-	PanelLayout,
-	SimpleFormField,
 } from '../../types';
 import DataFormContext from '../../components/dataform-context';
-import { isCombinedField } from '../is-combined-field';
-import { normalizeLayout } from '../normalize-form-fields';
 import PanelDropdown from './dropdown';
 import PanelModal from './modal';
 import { getSummaryFields } from '../get-summary-fields';
 
 const getFieldDefinition = < Item, >(
-	field: FormField,
+	field: NormalizedFormField,
 	fields: NormalizedField< Item >[]
 ) => {
 	const fieldDefinition = fields.find( ( _field ) => _field.id === field.id );
 
 	if ( ! fieldDefinition ) {
 		return fields.find( ( _field ) => {
-			if ( isCombinedField( field ) ) {
+			if ( !! field.children ) {
 				const simpleChildren = field.children.filter(
-					( child ): child is string | SimpleFormField =>
-						typeof child === 'string' || ! isCombinedField( child )
+					( child ) => ! child.children
 				);
 
 				if ( simpleChildren.length === 0 ) {
 					return false;
 				}
 
-				const firstChildFieldId =
-					typeof simpleChildren[ 0 ] === 'string'
-						? simpleChildren[ 0 ]
-						: simpleChildren[ 0 ].id;
-
-				return _field.id === firstChildFieldId;
+				return _field.id === simpleChildren[ 0 ].id;
 			}
 
 			return _field.id === field.id;
 		} );
 	}
+
 	return fieldDefinition;
 };
 
@@ -78,7 +69,7 @@ const getFieldDefinition = < Item, >(
  */
 const getFieldDefinitionAndSummaryFields = < Item, >(
 	layout: NormalizedPanelLayout,
-	field: FormField,
+	field: NormalizedFormField,
 	fields: NormalizedField< Item >[]
 ) => {
 	const summaryFields = getSummaryFields( layout.summary, fields );
@@ -104,11 +95,7 @@ export default function FormPanelField< Item >( {
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
-
-	const layout: NormalizedPanelLayout = normalizeLayout( {
-		...field.layout,
-		type: 'panel',
-	} as PanelLayout ) as NormalizedPanelLayout;
+	const layout = field.layout as NormalizedPanelLayout;
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -128,9 +115,7 @@ export default function FormPanelField< Item >( {
 		'dataforms-layouts-panel__field-label',
 		`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`
 	);
-	const fieldLabel = isCombinedField( field )
-		? field.label
-		: fieldDefinition?.label;
+	const fieldLabel = !! field.children ? field.label : fieldDefinition?.label;
 
 	const renderedControl =
 		layout.openAs === 'modal' ? (

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

@@ -18,10 +18,14 @@ import { useContext, useState, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { Field, Form, FormField, NormalizedField } from '../../types';
+import type {
+	Field,
+	NormalizedForm,
+	NormalizedFormField,
+	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';
 import useFormValidity from '../../hooks/use-form-validity';
 import DataFormContext from '../../components/dataform-context';
@@ -34,7 +38,7 @@ function ModalContent< Item >( {
 	onClose,
 }: {
 	data: Item;
-	field: FormField;
+	field: NormalizedFormField;
 	onChange: ( data: Partial< Item > ) => void;
 	onClose: () => void;
 	fieldLabel: string;
@@ -45,13 +49,13 @@ function ModalContent< Item >( {
 		return deepMerge( data, changes );
 	}, [ data, changes ] );
 
-	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 ]
 	);
@@ -91,9 +95,7 @@ function ModalContent< Item >( {
 						data={ modalData }
 						field={ childField }
 						onChange={ handleOnChange }
-						hideLabelFromVision={
-							( form?.fields ?? [] ).length < 2
-						}
+						hideLabelFromVision={ form.fields.length < 2 }
 						validity={ childFieldValidity }
 					/>
 				) }
@@ -131,7 +133,7 @@ function PanelModal< Item >( {
 	fieldDefinition,
 }: {
 	data: Item;
-	field: FormField;
+	field: NormalizedFormField;
 	onChange: ( value: any ) => void;
 	labelPosition: 'side' | 'top' | 'none';
 	summaryFields: NormalizedField< Item >[];
@@ -139,9 +141,7 @@ function PanelModal< Item >( {
 } ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 
-	const fieldLabel = isCombinedField( field )
-		? field.label
-		: fieldDefinition?.label;
+	const fieldLabel = !! field.children ? field.label : fieldDefinition?.label;
 
 	return (
 		<>

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

@@ -19,14 +19,13 @@ import {
  * Internal dependencies
  */
 import type {
-	Form,
 	FieldLayoutProps,
+	NormalizedForm,
 	NormalizedRegularLayout,
 } from '../../types';
 import DataFormContext from '../../components/dataform-context';
 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';
 
 function Header( { title }: { title: string } ) {
 	return (
@@ -49,16 +48,17 @@ export default function FormRegularField< Item >( {
 	validity,
 }: FieldLayoutProps< Item > ) {
 	const { fields } = useContext( DataFormContext );
+	const layout = field.layout as NormalizedRegularLayout;
 
-	const form: Form = useMemo(
-		(): Form => ( {
+	const form: NormalizedForm = useMemo(
+		() => ( {
 			layout: DEFAULT_LAYOUT,
-			fields: isCombinedField( field ) ? field.children : [],
+			fields: !! field.children ? field.children : [],
 		} ),
 		[ field ]
 	);
 
-	if ( isCombinedField( field ) ) {
+	if ( !! field.children ) {
 		return (
 			<>
 				{ ! hideLabelFromVision && field.label && (
@@ -74,11 +74,6 @@ export default function FormRegularField< Item >( {
 		);
 	}
 
-	const layout: NormalizedRegularLayout = normalizeLayout( {
-		...field.layout,
-		type: 'regular',
-	} ) as NormalizedRegularLayout;
-
 	const labelPosition = layout.labelPosition;
 	const fieldDefinition = fields.find(
 		( fieldDef ) => fieldDef.id === field.id

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

@@ -7,16 +7,18 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import type { FieldLayoutProps, Form, NormalizedRowLayout } from '../../types';
-import DataFormContext from '../../components/dataform-context';
+import type {
+	FieldLayoutProps,
+	NormalizedForm,
+	NormalizedLayout,
+	NormalizedRowLayout,
+} from '../../types';
 import { DataFormLayout } from '../data-form-layout';
-import { isCombinedField } from '../is-combined-field';
-import { normalizeLayout } from '../normalize-form-fields';
+import { DEFAULT_LAYOUT } from '../normalize-form';
 import { getFormFieldLayout } from '..';
 
 function Header( { title }: { title: string } ) {
@@ -43,21 +45,12 @@ export default function FormRowField< Item >( {
 	hideLabelFromVision,
 	validity,
 }: FieldLayoutProps< Item > ) {
-	const { fields } = useContext( DataFormContext );
+	const layout = field.layout as NormalizedRowLayout;
 
-	const layout = normalizeLayout( {
-		...field.layout,
-		type: 'row',
-	} ) as NormalizedRowLayout;
-
-	if ( isCombinedField( field ) ) {
-		const form: Form = {
-			fields: field.children.map( ( child ) => {
-				if ( typeof child === 'string' ) {
-					return { id: child };
-				}
-				return child;
-			} ),
+	if ( !! field.children ) {
+		const form: NormalizedForm = {
+			layout: DEFAULT_LAYOUT as NormalizedLayout,
+			fields: field.children,
 		};
 
 		return (
@@ -94,12 +87,6 @@ export default function FormRowField< Item >( {
 		);
 	}
 
-	const fieldDefinition = fields.find( ( f ) => f.id === field.id );
-
-	if ( ! fieldDefinition || ! fieldDefinition.Edit ) {
-		return null;
-	}
-
 	const RegularLayout = getFormFieldLayout( 'regular' )?.component;
 	if ( ! RegularLayout ) {
 		return null;
@@ -110,7 +97,7 @@ export default function FormRowField< Item >( {
 			<div className="dataforms-layouts-row__field-control">
 				<RegularLayout
 					data={ data }
-					field={ fieldDefinition }
+					field={ field }
 					onChange={ onChange }
 					validity={ validity }
 				/>

package/src/dataviews-layouts/index.ts

@@ -16,11 +16,13 @@ import ViewTable from './table';
 import ViewGrid from './grid';
 import ViewList from './list';
 import ViewPickerGrid from './picker-grid';
+import ViewPickerTable from './picker-table';
 import {
 	LAYOUT_GRID,
 	LAYOUT_LIST,
 	LAYOUT_TABLE,
 	LAYOUT_PICKER_GRID,
+	LAYOUT_PICKER_TABLE,
 } from '../constants';
 import PreviewSizePicker from './utils/preview-size-picker';
 import DensityPicker from './table/density-picker';
@@ -54,4 +56,12 @@ export const VIEW_LAYOUTS = [
 		viewConfigOptions: PreviewSizePicker,
 		isPicker: true,
 	},
+	{
+		type: LAYOUT_PICKER_TABLE,
+		label: __( 'Table' ),
+		component: ViewPickerTable,
+		icon: blockTable,
+		viewConfigOptions: DensityPicker,
+		isPicker: true,
+	},
 ];