@wordpress/dataviews 10.2.0 → 10.3.0

package/build-module/dataform-layouts/card/index.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+// packages/dataviews/src/dataform-layouts/card/index.tsx
 import {
   Button,
   Card,
@@ -10,13 +10,13 @@ import { chevronDown, chevronUp } from "@wordpress/icons";
 import { getFormFieldLayout } from "..";
 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";
 import { getSummaryFields } from "../get-summary-fields";
-const NonCollapsibleCardHeader = ({
+import { jsx, jsxs } from "react/jsx-runtime";
+var NonCollapsibleCardHeader = ({
   children,
   ...props
-}) => /* @__PURE__ */ jsx(OriginalCardHeader, { ...props, children: /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx(OriginalCardHeader, { isBorderless: true, ...props, children: /* @__PURE__ */ jsx(
   "div",
   {
     style: {
@@ -49,6 +49,7 @@ function useCardHeader(layout) {
           cursor: "pointer",
           ...props.style
         },
+        isBorderless: true,
         children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -114,14 +115,11 @@ function FormCardField({
   validity
 }) {
   const { fields } = useContext(DataFormContext);
-  const layout = normalizeLayout({
-    ...field.layout,
-    type: "card"
-  });
+  const layout = field.layout;
   const form = useMemo(
     () => ({
       layout: DEFAULT_LAYOUT,
-      fields: isCombinedField(field) ? field.children : []
+      fields: field.children ?? []
     }),
     [field]
   );
@@ -130,9 +128,21 @@ function FormCardField({
   const visibleSummaryFields = summaryFields.filter(
     (summaryField) => isSummaryFieldVisible(summaryField, layout.summary, isOpen)
   );
-  if (isCombinedField(field)) {
+  const sizeCard = {
+    blockStart: "medium",
+    blockEnd: "medium",
+    inlineStart: "medium",
+    inlineEnd: "medium"
+  };
+  if (!!field.children) {
     const withHeader2 = !!field.label && layout.withHeader;
-    return /* @__PURE__ */ jsxs(Card, { className: "dataforms-layouts-card__field", children: [
+    const sizeCardBody2 = {
+      blockStart: withHeader2 ? "none" : "medium",
+      blockEnd: "medium",
+      inlineStart: "medium",
+      inlineEnd: "medium"
+    };
+    return /* @__PURE__ */ jsxs(Card, { className: "dataforms-layouts-card__field", size: sizeCard, children: [
       withHeader2 && /* @__PURE__ */ jsxs(CardHeader, { className: "dataforms-layouts-card__field-header", children: [
         /* @__PURE__ */ jsx("span", { className: "dataforms-layouts-card__field-header-label", children: field.label }),
         visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map(
@@ -148,18 +158,25 @@ function FormCardField({
       ] }),
       (isOpen || !withHeader2) && // If it doesn't have a header, keep it open.
       // Otherwise, the card will not be visible.
-      /* @__PURE__ */ jsxs(CardBody, { className: "dataforms-layouts-card__field-control", children: [
-        field.description && /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-card__field-description", children: field.description }),
-        /* @__PURE__ */ jsx(
-          DataFormLayout,
-          {
-            data,
-            form,
-            onChange,
-            validity: validity?.children
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsxs(
+        CardBody,
+        {
+          size: sizeCardBody2,
+          className: "dataforms-layouts-card__field-control",
+          children: [
+            field.description && /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-card__field-description", children: field.description }),
+            /* @__PURE__ */ jsx(
+              DataFormLayout,
+              {
+                data,
+                form,
+                onChange,
+                validity: validity?.children
+              }
+            )
+          ]
+        }
+      )
     ] });
   }
   const fieldDefinition = fields.find(
@@ -173,7 +190,13 @@ function FormCardField({
     return null;
   }
   const withHeader = !!fieldDefinition.label && layout.withHeader;
-  return /* @__PURE__ */ jsxs(Card, { className: "dataforms-layouts-card__field", children: [
+  const sizeCardBody = {
+    blockStart: withHeader ? "none" : "medium",
+    blockEnd: "medium",
+    inlineStart: "medium",
+    inlineEnd: "medium"
+  };
+  return /* @__PURE__ */ jsxs(Card, { className: "dataforms-layouts-card__field", size: sizeCard, children: [
     withHeader && /* @__PURE__ */ jsxs(CardHeader, { className: "dataforms-layouts-card__field-header", children: [
       /* @__PURE__ */ jsx("span", { className: "dataforms-layouts-card__field-header-label", children: fieldDefinition.label }),
       visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map((summaryField) => /* @__PURE__ */ jsx(
@@ -187,16 +210,23 @@ function FormCardField({
     ] }),
     (isOpen || !withHeader) && // If it doesn't have a header, keep it open.
     // Otherwise, the card will not be visible.
-    /* @__PURE__ */ jsx(CardBody, { className: "dataforms-layouts-card__field-control", children: /* @__PURE__ */ jsx(
-      RegularLayout,
+    /* @__PURE__ */ jsx(
+      CardBody,
       {
-        data,
-        field,
-        onChange,
-        hideLabelFromVision: hideLabelFromVision || withHeader,
-        validity
+        size: sizeCardBody,
+        className: "dataforms-layouts-card__field-control",
+        children: /* @__PURE__ */ jsx(
+          RegularLayout,
+          {
+            data,
+            field,
+            onChange,
+            hideLabelFromVision: hideLabelFromVision || withHeader,
+            validity
+          }
+        )
       }
-    ) })
+    )
   ] });
 }
 export {

package/build-module/dataform-layouts/card/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/dataform-layouts/card/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\tCardHeader as OriginalCardHeader,\n} from '@wordpress/components';\nimport { useCallback, useContext, useMemo, useState } from '@wordpress/element';\nimport { chevronDown, chevronUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getFormFieldLayout } from '..';\nimport DataFormContext from '../../components/dataform-context';\nimport type {\n\tNormalizedCardLayout,\n\tCardLayout,\n\tFieldLayoutProps,\n\tForm,\n\tLayout,\n\tNormalizedField,\n} from '../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { isCombinedField } from '../is-combined-field';\nimport { DEFAULT_LAYOUT, normalizeLayout } from '../normalize-form-fields';\nimport { getSummaryFields } from '../get-summary-fields';\n\nconst NonCollapsibleCardHeader = ( {\n\tchildren,\n\t...props\n}: {\n\tchildren: React.ReactNode;\n} ) => (\n\t<OriginalCardHeader { ...props }>\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\theight: '40px', // This is to match the chevron's __next40pxDefaultSize\n\t\t\t\twidth: '100%',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\talignItems: 'center',\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t</OriginalCardHeader>\n);\n\nexport function useCardHeader( layout: NormalizedCardLayout ) {\n\tconst { isOpened, isCollapsible } = layout;\n\tconst [ isOpen, setIsOpen ] = useState( isOpened );\n\n\tconst toggle = useCallback( () => {\n\t\tsetIsOpen( ( prev ) => ! prev );\n\t}, [] );\n\n\tconst CollapsibleCardHeader = useCallback(\n\t\t( {\n\t\t\tchildren,\n\t\t\t...props\n\t\t}: {\n\t\t\tchildren: React.ReactNode;\n\t\t\t[ key: string ]: any;\n\t\t} ) => (\n\t\t\t<OriginalCardHeader\n\t\t\t\t{ ...props }\n\t\t\t\tonClick={ toggle }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t...props.style,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\ticon={ isOpen ? chevronUp : chevronDown }\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-label={ isOpen ? 'Collapse' : 'Expand' }\n\t\t\t\t/>\n\t\t\t</OriginalCardHeader>\n\t\t),\n\t\t[ toggle, isOpen ]\n\t);\n\n\tconst effectiveIsOpen = isCollapsible ? isOpen : true;\n\tconst CardHeaderComponent = isCollapsible\n\t\t? CollapsibleCardHeader\n\t\t: NonCollapsibleCardHeader;\n\n\treturn { isOpen: effectiveIsOpen, CardHeader: CardHeaderComponent };\n}\n\nfunction isSummaryFieldVisible< Item >(\n\tsummaryField: NormalizedField< Item >,\n\tsummaryConfig: NormalizedCardLayout[ 'summary' ],\n\tisOpen: boolean\n) {\n\t// If no summary config, dont't show any fields\n\tif (\n\t\t! summaryConfig ||\n\t\t( Array.isArray( summaryConfig ) && summaryConfig.length === 0 )\n\t) {\n\t\treturn false;\n\t}\n\n\t// Convert to array for consistent handling\n\tconst summaryConfigArray = Array.isArray( summaryConfig )\n\t\t? summaryConfig\n\t\t: [ summaryConfig ];\n\n\t// Find the config for this specific field\n\tconst fieldConfig = summaryConfigArray.find( ( config ) => {\n\t\tif ( typeof config === 'string' ) {\n\t\t\treturn config === summaryField.id;\n\t\t}\n\t\tif ( typeof config === 'object' && 'id' in config ) {\n\t\t\treturn config.id === summaryField.id;\n\t\t}\n\t\treturn false;\n\t} );\n\n\t// If field is not in summary config, don't show it\n\tif ( ! fieldConfig ) {\n\t\treturn false;\n\t}\n\n\t// If it's a string, always show it\n\tif ( typeof fieldConfig === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// If it has visibility rules, respect them\n\tif ( typeof fieldConfig === 'object' && 'visibility' in fieldConfig ) {\n\t\treturn (\n\t\t\tfieldConfig.visibility === 'always' ||\n\t\t\t( fieldConfig.visibility === 'when-collapsed' && ! isOpen )\n\t\t);\n\t}\n\n\t// Default to always show\n\treturn true;\n}\n\nexport default function FormCardField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\n\tconst layout: NormalizedCardLayout = normalizeLayout( {\n\t\t...field.layout,\n\t\ttype: 'card',\n\t} as CardLayout ) as NormalizedCardLayout;\n\n\tconst form: Form = useMemo(\n\t\t(): Form => ( {\n\t\t\tlayout: DEFAULT_LAYOUT as Layout,\n\t\t\tfields: isCombinedField( field ) ? field.children : [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { isOpen, CardHeader } = useCardHeader( layout );\n\n\tconst summaryFields = getSummaryFields< Item >( layout.summary, fields );\n\n\tconst visibleSummaryFields = summaryFields.filter( ( summaryField ) =>\n\t\tisSummaryFieldVisible( summaryField, layout.summary, isOpen )\n\t);\n\n\tif ( isCombinedField( field ) ) {\n\t\tconst withHeader = !! field.label && layout.withHeader;\n\n\t\treturn (\n\t\t\t<Card className=\"dataforms-layouts-card__field\">\n\t\t\t\t{ withHeader && (\n\t\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{ visibleSummaryFields.length > 0 &&\n\t\t\t\t\t\t\tlayout.withHeader && (\n\t\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t\t\t{ visibleSummaryFields.map(\n\t\t\t\t\t\t\t\t\t\t( summaryField ) => (\n\t\t\t\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</CardHeader>\n\t\t\t\t) }\n\t\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t\t<CardBody className=\"dataforms-layouts-card__field-control\">\n\t\t\t\t\t\t{ field.description && (\n\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-description\">\n\t\t\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CardBody>\n\t\t\t\t) }\n\t\t\t</Card>\n\t\t);\n\t}\n\n\tconst fieldDefinition = fields.find(\n\t\t( fieldDef ) => fieldDef.id === field.id\n\t);\n\n\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\treturn null;\n\t}\n\n\tconst RegularLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! RegularLayout ) {\n\t\treturn null;\n\t}\n\tconst withHeader = !! fieldDefinition.label && layout.withHeader;\n\n\treturn (\n\t\t<Card className=\"dataforms-layouts-card__field\">\n\t\t\t{ withHeader && (\n\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t\t</span>\n\t\t\t\t\t{ visibleSummaryFields.length > 0 && layout.withHeader && (\n\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t{ visibleSummaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</CardHeader>\n\t\t\t) }\n\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t<CardBody className=\"dataforms-layouts-card__field-control\">\n\t\t\t\t\t<RegularLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\thideLabelFromVision || withHeader\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalidity={ validity }\n\t\t\t\t\t/>\n\t\t\t\t</CardBody>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n"],
-  "mappings": "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",
-  "names": ["withHeader"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\tCardHeader as OriginalCardHeader,\n} from '@wordpress/components';\nimport { useCallback, useContext, useMemo, useState } from '@wordpress/element';\nimport { chevronDown, chevronUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getFormFieldLayout } from '..';\nimport DataFormContext from '../../components/dataform-context';\nimport type {\n\tFieldLayoutProps,\n\tNormalizedCardLayout,\n\tNormalizedField,\n\tNormalizedForm,\n\tNormalizedLayout,\n} from '../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport { getSummaryFields } from '../get-summary-fields';\n\nconst NonCollapsibleCardHeader = ( {\n\tchildren,\n\t...props\n}: {\n\tchildren: React.ReactNode;\n} ) => (\n\t<OriginalCardHeader isBorderless { ...props }>\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\theight: '40px', // This is to match the chevron's __next40pxDefaultSize\n\t\t\t\twidth: '100%',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\talignItems: 'center',\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t</OriginalCardHeader>\n);\n\nexport function useCardHeader( layout: NormalizedCardLayout ) {\n\tconst { isOpened, isCollapsible } = layout;\n\tconst [ isOpen, setIsOpen ] = useState( isOpened );\n\n\tconst toggle = useCallback( () => {\n\t\tsetIsOpen( ( prev ) => ! prev );\n\t}, [] );\n\n\tconst CollapsibleCardHeader = useCallback(\n\t\t( {\n\t\t\tchildren,\n\t\t\t...props\n\t\t}: {\n\t\t\tchildren: React.ReactNode;\n\t\t\t[ key: string ]: any;\n\t\t} ) => (\n\t\t\t<OriginalCardHeader\n\t\t\t\t{ ...props }\n\t\t\t\tonClick={ toggle }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t...props.style,\n\t\t\t\t} }\n\t\t\t\tisBorderless\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\ticon={ isOpen ? chevronUp : chevronDown }\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-label={ isOpen ? 'Collapse' : 'Expand' }\n\t\t\t\t/>\n\t\t\t</OriginalCardHeader>\n\t\t),\n\t\t[ toggle, isOpen ]\n\t);\n\n\tconst effectiveIsOpen = isCollapsible ? isOpen : true;\n\tconst CardHeaderComponent = isCollapsible\n\t\t? CollapsibleCardHeader\n\t\t: NonCollapsibleCardHeader;\n\n\treturn { isOpen: effectiveIsOpen, CardHeader: CardHeaderComponent };\n}\n\nfunction isSummaryFieldVisible< Item >(\n\tsummaryField: NormalizedField< Item >,\n\tsummaryConfig: NormalizedCardLayout[ 'summary' ],\n\tisOpen: boolean\n) {\n\t// If no summary config, dont't show any fields\n\tif (\n\t\t! summaryConfig ||\n\t\t( Array.isArray( summaryConfig ) && summaryConfig.length === 0 )\n\t) {\n\t\treturn false;\n\t}\n\n\t// Convert to array for consistent handling\n\tconst summaryConfigArray = Array.isArray( summaryConfig )\n\t\t? summaryConfig\n\t\t: [ summaryConfig ];\n\n\t// Find the config for this specific field\n\tconst fieldConfig = summaryConfigArray.find( ( config ) => {\n\t\tif ( typeof config === 'string' ) {\n\t\t\treturn config === summaryField.id;\n\t\t}\n\t\tif ( typeof config === 'object' && 'id' in config ) {\n\t\t\treturn config.id === summaryField.id;\n\t\t}\n\t\treturn false;\n\t} );\n\n\t// If field is not in summary config, don't show it\n\tif ( ! fieldConfig ) {\n\t\treturn false;\n\t}\n\n\t// If it's a string, always show it\n\tif ( typeof fieldConfig === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// If it has visibility rules, respect them\n\tif ( typeof fieldConfig === 'object' && 'visibility' in fieldConfig ) {\n\t\treturn (\n\t\t\tfieldConfig.visibility === 'always' ||\n\t\t\t( fieldConfig.visibility === 'when-collapsed' && ! isOpen )\n\t\t);\n\t}\n\n\t// Default to always show\n\treturn true;\n}\n\nexport default function FormCardField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedCardLayout;\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT as NormalizedLayout,\n\t\t\tfields: field.children ?? [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { isOpen, CardHeader } = useCardHeader( layout );\n\n\tconst summaryFields = getSummaryFields< Item >( layout.summary, fields );\n\n\tconst visibleSummaryFields = summaryFields.filter( ( summaryField ) =>\n\t\tisSummaryFieldVisible( summaryField, layout.summary, isOpen )\n\t);\n\n\tconst sizeCard = {\n\t\tblockStart: 'medium' as const,\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\tif ( !! field.children ) {\n\t\tconst withHeader = !! field.label && layout.withHeader;\n\n\t\tconst sizeCardBody = {\n\t\t\tblockStart: withHeader\n\t\t\t\t? ( 'none' as const )\n\t\t\t\t: ( 'medium' as const ),\n\t\t\tblockEnd: 'medium' as const,\n\t\t\tinlineStart: 'medium' as const,\n\t\t\tinlineEnd: 'medium' as const,\n\t\t};\n\n\t\treturn (\n\t\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t\t{ withHeader && (\n\t\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{ visibleSummaryFields.length > 0 &&\n\t\t\t\t\t\t\tlayout.withHeader && (\n\t\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t\t\t{ visibleSummaryFields.map(\n\t\t\t\t\t\t\t\t\t\t( summaryField ) => (\n\t\t\t\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</CardHeader>\n\t\t\t\t) }\n\t\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t\t<CardBody\n\t\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ field.description && (\n\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-description\">\n\t\t\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CardBody>\n\t\t\t\t) }\n\t\t\t</Card>\n\t\t);\n\t}\n\n\tconst fieldDefinition = fields.find(\n\t\t( fieldDef ) => fieldDef.id === field.id\n\t);\n\n\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\treturn null;\n\t}\n\n\tconst RegularLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! RegularLayout ) {\n\t\treturn null;\n\t}\n\tconst withHeader = !! fieldDefinition.label && layout.withHeader;\n\n\tconst sizeCardBody = {\n\t\tblockStart: withHeader ? ( 'none' as const ) : ( 'medium' as const ),\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\treturn (\n\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t{ withHeader && (\n\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t\t</span>\n\t\t\t\t\t{ visibleSummaryFields.length > 0 && layout.withHeader && (\n\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t{ visibleSummaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</CardHeader>\n\t\t\t) }\n\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t<CardBody\n\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t>\n\t\t\t\t\t<RegularLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\thideLabelFromVision || withHeader\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalidity={ validity }\n\t\t\t\t\t/>\n\t\t\t\t</CardBody>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["withHeader", "sizeCardBody"]
 }

package/build-module/dataform-layouts/data-form-layout.js

@@ -1,11 +1,10 @@
-import { jsx } from "react/jsx-runtime";
+// packages/dataviews/src/dataform-layouts/data-form-layout.tsx
 import { __experimentalVStack as VStack } from "@wordpress/components";
-import { useContext, useMemo } from "@wordpress/element";
+import { useContext } from "@wordpress/element";
 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 }) => /* @__PURE__ */ jsx(VStack, { className: "dataforms-layouts__wrapper", spacing: 4, children });
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_WRAPPER = ({ children }) => /* @__PURE__ */ jsx(VStack, { className: "dataforms-layouts__wrapper", spacing: 4, children });
 function DataFormLayout({
   data,
   form,
@@ -16,23 +15,17 @@ function DataFormLayout({
 }) {
   const { fields: fieldDefinitions } = useContext(DataFormContext);
   function getFieldDefinition(field) {
-    const fieldId = typeof field === "string" ? field : field.id;
     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 ?? DEFAULT_WRAPPER;
-  return /* @__PURE__ */ jsx(Wrapper, { layout: normalizedFormLayout, children: normalizedFormFields.map((formField) => {
+  const Wrapper = as ?? getFormFieldLayout(form.layout.type)?.wrapper ?? DEFAULT_WRAPPER;
+  return /* @__PURE__ */ jsx(Wrapper, { layout: form.layout, children: form.fields.map((formField) => {
     const FieldLayout = getFormFieldLayout(formField.layout.type)?.component;
     if (!FieldLayout) {
       return null;
     }
-    const fieldDefinition = !isCombinedField(formField) ? getFieldDefinition(formField) : void 0;
+    const fieldDefinition = !formField.children ? getFieldDefinition(formField) : void 0;
     if (fieldDefinition && fieldDefinition.isVisible && !fieldDefinition.isVisible(data)) {
       return null;
     }

package/build-module/dataform-layouts/data-form-layout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-layouts/data-form-layout.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldValidity,\n\tForm,\n\tFormField,\n\tFormValidity,\n\tSimpleFormField,\n} from '../types';\nimport { getFormFieldLayout } from './index';\nimport DataFormContext from '../components/dataform-context';\nimport { isCombinedField } from './is-combined-field';\nimport normalizeFormFields, { normalizeLayout } from './normalize-form-fields';\n\nconst DEFAULT_WRAPPER = ( { children }: { children: React.ReactNode } ) => (\n\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 4 }>\n\t\t{ children }\n\t</VStack>\n);\n\nexport function DataFormLayout< Item >( {\n\tdata,\n\tform,\n\tonChange,\n\tvalidity,\n\tchildren,\n\tas,\n}: {\n\tdata: Item;\n\tform: Form;\n\tonChange: ( value: any ) => void;\n\tvalidity?: FormValidity;\n\tchildren?: (\n\t\tFieldLayout: ( props: {\n\t\t\tdata: Item;\n\t\t\tfield: FormField;\n\t\t\tonChange: ( value: any ) => void;\n\t\t\thideLabelFromVision?: boolean;\n\t\t\tvalidity?: FieldValidity;\n\t\t} ) => React.JSX.Element | null,\n\t\tchildField: FormField,\n\t\tchildFieldValidity?: FieldValidity\n\t) => React.JSX.Element;\n\tas?: React.ComponentType< { children: React.ReactNode } >;\n} ) {\n\tconst { fields: fieldDefinitions } = useContext( DataFormContext );\n\n\tfunction getFieldDefinition( field: SimpleFormField | string ) {\n\t\tconst fieldId = typeof field === 'string' ? field : field.id;\n\n\t\treturn fieldDefinitions.find(\n\t\t\t( fieldDefinition ) => fieldDefinition.id === fieldId\n\t\t);\n\t}\n\n\tconst normalizedFormFields = useMemo(\n\t\t() => normalizeFormFields( form ),\n\t\t[ form ]\n\t);\n\n\tconst normalizedFormLayout = normalizeLayout( form.layout );\n\tconst Wrapper =\n\t\tas ??\n\t\tgetFormFieldLayout( normalizedFormLayout.type )?.wrapper ??\n\t\tDEFAULT_WRAPPER;\n\n\treturn (\n\t\t<Wrapper layout={ normalizedFormLayout }>\n\t\t\t{ normalizedFormFields.map( ( formField ) => {\n\t\t\t\tconst FieldLayout = getFormFieldLayout( formField.layout.type )\n\t\t\t\t\t?.component;\n\n\t\t\t\tif ( ! FieldLayout ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst fieldDefinition = ! isCombinedField( formField )\n\t\t\t\t\t? getFieldDefinition( formField )\n\t\t\t\t\t: undefined;\n\n\t\t\t\tif (\n\t\t\t\t\tfieldDefinition &&\n\t\t\t\t\tfieldDefinition.isVisible &&\n\t\t\t\t\t! fieldDefinition.isVisible( data )\n\t\t\t\t) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tif ( children ) {\n\t\t\t\t\treturn children(\n\t\t\t\t\t\tFieldLayout,\n\t\t\t\t\t\tformField,\n\t\t\t\t\t\tvalidity?.[ formField.id ]\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\tkey={ formField.id }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ formField }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalidity={ validity?.[ formField.id ] }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Wrapper>\n\t);\n}\n"],
-  "mappings": "AAsBC;AAnBD,SAAS,wBAAwB,cAAc;AAC/C,SAAS,YAAY,eAAe;AAYpC,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAC5B,SAAS,uBAAuB;AAChC,OAAO,uBAAuB,uBAAuB;AAErD,MAAM,kBAAkB,CAAE,EAAE,SAAS,MACpC,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAGM,SAAS,eAAwB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAiBI;AACH,QAAM,EAAE,QAAQ,iBAAiB,IAAI,WAAY,eAAgB;AAEjE,WAAS,mBAAoB,OAAkC;AAC9D,UAAM,UAAU,OAAO,UAAU,WAAW,QAAQ,MAAM;AAE1D,WAAO,iBAAiB;AAAA,MACvB,CAAE,oBAAqB,gBAAgB,OAAO;AAAA,IAC/C;AAAA,EACD;AAEA,QAAM,uBAAuB;AAAA,IAC5B,MAAM,oBAAqB,IAAK;AAAA,IAChC,CAAE,IAAK;AAAA,EACR;AAEA,QAAM,uBAAuB,gBAAiB,KAAK,MAAO;AAC1D,QAAM,UACL,MACA,mBAAoB,qBAAqB,IAAK,GAAG,WACjD;AAED,SACC,oBAAC,WAAQ,QAAS,sBACf,+BAAqB,IAAK,CAAE,cAAe;AAC5C,UAAM,cAAc,mBAAoB,UAAU,OAAO,IAAK,GAC3D;AAEH,QAAK,CAAE,aAAc;AACpB,aAAO;AAAA,IACR;AAEA,UAAM,kBAAkB,CAAE,gBAAiB,SAAU,IAClD,mBAAoB,SAAU,IAC9B;AAEH,QACC,mBACA,gBAAgB,aAChB,CAAE,gBAAgB,UAAW,IAAK,GACjC;AACD,aAAO;AAAA,IACR;AAEA,QAAK,UAAW;AACf,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,WAAY,UAAU,EAAG;AAAA,MAC1B;AAAA,IACD;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA;AAAA,QACA,OAAQ;AAAA,QACR;AAAA,QACA,UAAW,WAAY,UAAU,EAAG;AAAA;AAAA,MAJ9B,UAAU;AAAA,IAKjB;AAAA,EAEF,CAAE,GACH;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldValidity,\n\tFormValidity,\n\tNormalizedForm,\n\tNormalizedFormField,\n} from '../types';\nimport { getFormFieldLayout } from './index';\nimport DataFormContext from '../components/dataform-context';\n\nconst DEFAULT_WRAPPER = ( { children }: { children: React.ReactNode } ) => (\n\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 4 }>\n\t\t{ children }\n\t</VStack>\n);\n\nexport function DataFormLayout< Item >( {\n\tdata,\n\tform,\n\tonChange,\n\tvalidity,\n\tchildren,\n\tas,\n}: {\n\tdata: Item;\n\tform: NormalizedForm;\n\tonChange: ( value: any ) => void;\n\tvalidity?: FormValidity;\n\tchildren?: (\n\t\tFieldLayout: ( props: {\n\t\t\tdata: Item;\n\t\t\tfield: NormalizedFormField;\n\t\t\tonChange: ( value: any ) => void;\n\t\t\thideLabelFromVision?: boolean;\n\t\t\tvalidity?: FieldValidity;\n\t\t} ) => React.JSX.Element | null,\n\t\tchildField: NormalizedFormField,\n\t\tchildFieldValidity?: FieldValidity\n\t) => React.JSX.Element;\n\tas?: React.ComponentType< { children: React.ReactNode } >;\n} ) {\n\tconst { fields: fieldDefinitions } = useContext( DataFormContext );\n\n\tfunction getFieldDefinition( field: NormalizedFormField ) {\n\t\treturn fieldDefinitions.find(\n\t\t\t( fieldDefinition ) => fieldDefinition.id === field.id\n\t\t);\n\t}\n\n\tconst Wrapper =\n\t\tas ??\n\t\tgetFormFieldLayout( form.layout.type )?.wrapper ??\n\t\tDEFAULT_WRAPPER;\n\n\treturn (\n\t\t<Wrapper layout={ form.layout }>\n\t\t\t{ form.fields.map( ( formField ) => {\n\t\t\t\tconst FieldLayout = getFormFieldLayout( formField.layout.type )\n\t\t\t\t\t?.component;\n\n\t\t\t\tif ( ! FieldLayout ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst fieldDefinition = ! formField.children\n\t\t\t\t\t? getFieldDefinition( formField )\n\t\t\t\t\t: undefined;\n\n\t\t\t\tif (\n\t\t\t\t\tfieldDefinition &&\n\t\t\t\t\tfieldDefinition.isVisible &&\n\t\t\t\t\t! fieldDefinition.isVisible( data )\n\t\t\t\t) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tif ( children ) {\n\t\t\t\t\treturn children(\n\t\t\t\t\t\tFieldLayout,\n\t\t\t\t\t\tformField,\n\t\t\t\t\t\tvalidity?.[ formField.id ]\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\tkey={ formField.id }\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ formField }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalidity={ validity?.[ formField.id ] }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Wrapper>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,wBAAwB,cAAc;AAC/C,SAAS,kBAAkB;AAW3B,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAG3B;AADD,IAAM,kBAAkB,CAAE,EAAE,SAAS,MACpC,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAGM,SAAS,eAAwB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAiBI;AACH,QAAM,EAAE,QAAQ,iBAAiB,IAAI,WAAY,eAAgB;AAEjE,WAAS,mBAAoB,OAA6B;AACzD,WAAO,iBAAiB;AAAA,MACvB,CAAE,oBAAqB,gBAAgB,OAAO,MAAM;AAAA,IACrD;AAAA,EACD;AAEA,QAAM,UACL,MACA,mBAAoB,KAAK,OAAO,IAAK,GAAG,WACxC;AAED,SACC,oBAAC,WAAQ,QAAS,KAAK,QACpB,eAAK,OAAO,IAAK,CAAE,cAAe;AACnC,UAAM,cAAc,mBAAoB,UAAU,OAAO,IAAK,GAC3D;AAEH,QAAK,CAAE,aAAc;AACpB,aAAO;AAAA,IACR;AAEA,UAAM,kBAAkB,CAAE,UAAU,WACjC,mBAAoB,SAAU,IAC9B;AAEH,QACC,mBACA,gBAAgB,aAChB,CAAE,gBAAgB,UAAW,IAAK,GACjC;AACD,aAAO;AAAA,IACR;AAEA,QAAK,UAAW;AACf,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,WAAY,UAAU,EAAG;AAAA,MAC1B;AAAA,IACD;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA;AAAA,QACA,OAAQ;AAAA,QACR;AAAA,QACA,UAAW,WAAY,UAAU,EAAG;AAAA;AAAA,MAJ9B,UAAU;AAAA,IAKjB;AAAA,EAEF,CAAE,GACH;AAEF;",
   "names": []
 }

package/build-module/dataform-layouts/details/index.js

@@ -0,0 +1,47 @@
+// packages/dataviews/src/dataform-layouts/details/index.tsx
+import { useContext, useMemo } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import DataFormContext from "../../components/dataform-context";
+import { DataFormLayout } from "../data-form-layout";
+import { DEFAULT_LAYOUT } from "../normalize-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FormDetailsField({
+  data,
+  field,
+  onChange
+}) {
+  const { fields } = useContext(DataFormContext);
+  const form = useMemo(
+    () => ({
+      layout: DEFAULT_LAYOUT,
+      fields: field.children ?? []
+    }),
+    [field]
+  );
+  if (!field.children) {
+    return null;
+  }
+  const summaryFieldId = field.layout.summary ?? "";
+  const summaryField = summaryFieldId ? fields.find((fieldDef) => fieldDef.id === summaryFieldId) : void 0;
+  let summaryContent;
+  if (summaryField && summaryField.render) {
+    summaryContent = /* @__PURE__ */ jsx(summaryField.render, { item: data, field: summaryField });
+  } else {
+    summaryContent = field.label || __("More details");
+  }
+  return /* @__PURE__ */ jsxs("details", { className: "dataforms-layouts-details__details", children: [
+    /* @__PURE__ */ jsx("summary", { className: "dataforms-layouts-details__summary", children: summaryContent }),
+    /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-details__content", children: /* @__PURE__ */ jsx(
+      DataFormLayout,
+      {
+        data,
+        form,
+        onChange
+      }
+    ) })
+  ] });
+}
+export {
+  FormDetailsField as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/dataform-layouts/details/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/dataform-layouts/details/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tNormalizedForm,\n\tNormalizedDetailsLayout,\n\tFieldLayoutProps,\n} from '../../types';\nimport DataFormContext from '../../components/dataform-context';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\n\nexport default function FormDetailsField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: field.children ?? [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tif ( ! field.children ) {\n\t\treturn null;\n\t}\n\n\t// Find the summary field definition if specified\n\tconst summaryFieldId =\n\t\t( field.layout as NormalizedDetailsLayout ).summary ?? '';\n\tconst summaryField = summaryFieldId\n\t\t? fields.find( ( fieldDef ) => fieldDef.id === summaryFieldId )\n\t\t: undefined;\n\n\t// Render the summary content\n\tlet summaryContent;\n\tif ( summaryField && summaryField.render ) {\n\t\t// Use the field's render function to display the current value\n\t\tsummaryContent = (\n\t\t\t<summaryField.render item={ data } field={ summaryField } />\n\t\t);\n\t} else {\n\t\t// Fall back to the label\n\t\tsummaryContent = field.label || __( 'More details' );\n\t}\n\n\treturn (\n\t\t<details className=\"dataforms-layouts-details__details\">\n\t\t\t<summary className=\"dataforms-layouts-details__summary\">\n\t\t\t\t{ summaryContent }\n\t\t\t</summary>\n\t\t\t<div className=\"dataforms-layouts-details__content\">\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</details>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,YAAY,eAAe;AACpC,SAAS,UAAU;AAUnB,OAAO,qBAAqB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAiC5B,cAQD,YARC;AA/BY,SAAR,iBAA2C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,EAAE,OAAO,IAAI,WAAY,eAAgB;AAE/C,QAAM,OAAuB;AAAA,IAC5B,OAAQ;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,MAAM,YAAY,CAAC;AAAA,IAC5B;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAEA,MAAK,CAAE,MAAM,UAAW;AACvB,WAAO;AAAA,EACR;AAGA,QAAM,iBACH,MAAM,OAAoC,WAAW;AACxD,QAAM,eAAe,iBAClB,OAAO,KAAM,CAAE,aAAc,SAAS,OAAO,cAAe,IAC5D;AAGH,MAAI;AACJ,MAAK,gBAAgB,aAAa,QAAS;AAE1C,qBACC,oBAAC,aAAa,QAAb,EAAoB,MAAO,MAAO,OAAQ,cAAe;AAAA,EAE5D,OAAO;AAEN,qBAAiB,MAAM,SAAS,GAAI,cAAe;AAAA,EACpD;AAEA,SACC,qBAAC,aAAQ,WAAU,sCAClB;AAAA,wBAAC,aAAQ,WAAU,sCAChB,0BACH;AAAA,IACA,oBAAC,SAAI,WAAU,sCACd;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
+  "names": []
+}

package/build-module/dataform-layouts/get-summary-fields.js

@@ -1,3 +1,4 @@
+// packages/dataviews/src/dataform-layouts/get-summary-fields.ts
 function extractSummaryIds(summary) {
   if (Array.isArray(summary)) {
     return summary.map(
@@ -6,7 +7,7 @@ function extractSummaryIds(summary) {
   }
   return [];
 }
-const getSummaryFields = (summaryField, fields) => {
+var getSummaryFields = (summaryField, fields) => {
   if (Array.isArray(summaryField) && summaryField.length > 0) {
     const summaryIds = extractSummaryIds(summaryField);
     return summaryIds.map(

package/build-module/dataform-layouts/get-summary-fields.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/dataform-layouts/get-summary-fields.ts"],
   "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { NormalizedField, NormalizedSummaryField } from '../types';\n\n/**\n * Extracts field IDs from various summary field formats.\n *\n * @param summary The summary field configuration.\n * @return Array of field IDs.\n */\nfunction extractSummaryIds( summary: NormalizedSummaryField ): string[] {\n\tif ( Array.isArray( summary ) ) {\n\t\treturn summary.map( ( item ) =>\n\t\t\ttypeof item === 'string' ? item : item.id\n\t\t);\n\t}\n\n\treturn [];\n}\n\n/**\n * Returns the summary fields for a given field.\n * @param summaryField - The summary field configuration.\n * @param fields       - The fields to get the summary fields from.\n * @return The summary fields.\n */\nexport const getSummaryFields = < Item >(\n\tsummaryField: NormalizedSummaryField,\n\tfields: NormalizedField< Item >[]\n): NormalizedField< Item >[] => {\n\tif ( Array.isArray( summaryField ) && summaryField.length > 0 ) {\n\t\tconst summaryIds = extractSummaryIds( summaryField );\n\t\treturn summaryIds\n\t\t\t.map( ( summaryId ) =>\n\t\t\t\tfields.find( ( _field ) => _field.id === summaryId )\n\t\t\t)\n\t\t\t.filter( ( _field ) => _field !== undefined );\n\t}\n\n\treturn [];\n};\n"],
-  "mappings": "AAWA,SAAS,kBAAmB,SAA4C;AACvE,MAAK,MAAM,QAAS,OAAQ,GAAI;AAC/B,WAAO,QAAQ;AAAA,MAAK,CAAE,SACrB,OAAO,SAAS,WAAW,OAAO,KAAK;AAAA,IACxC;AAAA,EACD;AAEA,SAAO,CAAC;AACT;AAQO,MAAM,mBAAmB,CAC/B,cACA,WAC+B;AAC/B,MAAK,MAAM,QAAS,YAAa,KAAK,aAAa,SAAS,GAAI;AAC/D,UAAM,aAAa,kBAAmB,YAAa;AACnD,WAAO,WACL;AAAA,MAAK,CAAE,cACP,OAAO,KAAM,CAAE,WAAY,OAAO,OAAO,SAAU;AAAA,IACpD,EACC,OAAQ,CAAE,WAAY,WAAW,MAAU;AAAA,EAC9C;AAEA,SAAO,CAAC;AACT;",
+  "mappings": ";AAWA,SAAS,kBAAmB,SAA4C;AACvE,MAAK,MAAM,QAAS,OAAQ,GAAI;AAC/B,WAAO,QAAQ;AAAA,MAAK,CAAE,SACrB,OAAO,SAAS,WAAW,OAAO,KAAK;AAAA,IACxC;AAAA,EACD;AAEA,SAAO,CAAC;AACT;AAQO,IAAM,mBAAmB,CAC/B,cACA,WAC+B;AAC/B,MAAK,MAAM,QAAS,YAAa,KAAK,aAAa,SAAS,GAAI;AAC/D,UAAM,aAAa,kBAAmB,YAAa;AACnD,WAAO,WACL;AAAA,MAAK,CAAE,cACP,OAAO,KAAM,CAAE,WAAY,OAAO,OAAO,SAAU;AAAA,IACpD,EACC,OAAQ,CAAE,WAAY,WAAW,MAAU;AAAA,EAC9C;AAEA,SAAO,CAAC;AACT;",
   "names": []
 }

package/build-module/dataform-layouts/index.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+// packages/dataviews/src/dataform-layouts/index.tsx
 import {
   __experimentalVStack as VStack,
   __experimentalHStack as HStack
@@ -7,7 +7,9 @@ import FormRegularField from "./regular";
 import FormPanelField from "./panel";
 import FormCardField from "./card";
 import FormRowField from "./row";
-const FORM_FIELD_LAYOUTS = [
+import FormDetailsField from "./details";
+import { jsx } from "react/jsx-runtime";
+var FORM_FIELD_LAYOUTS = [
   {
     type: "regular",
     component: FormRegularField,
@@ -37,6 +39,10 @@ const FORM_FIELD_LAYOUTS = [
         children
       }
     ) }) })
+  },
+  {
+    type: "details",
+    component: FormDetailsField
   }
 ];
 function getFormFieldLayout(type) {

package/build-module/dataform-layouts/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dataform-layouts/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type { Layout, RowLayout } from '../types';\nimport FormRegularField from './regular';\nimport FormPanelField from './panel';\nimport FormCardField from './card';\nimport FormRowField from './row';\n\nconst FORM_FIELD_LAYOUTS = [\n\t{\n\t\ttype: 'regular',\n\t\tcomponent: FormRegularField,\n\t\twrapper: ( { children }: { children: React.ReactNode } ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 4 }>\n\t\t\t\t{ children }\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'panel',\n\t\tcomponent: FormPanelField,\n\t\twrapper: ( { children }: { children: React.ReactNode } ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 2 }>\n\t\t\t\t{ children }\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'card',\n\t\tcomponent: FormCardField,\n\t\twrapper: ( { children }: { children: React.ReactNode } ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 6 }>\n\t\t\t\t{ children }\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'row',\n\t\tcomponent: FormRowField,\n\t\twrapper: ( {\n\t\t\tchildren,\n\t\t\tlayout,\n\t\t}: {\n\t\t\tchildren: React.ReactNode;\n\t\t\tlayout: Layout;\n\t\t} ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 4 }>\n\t\t\t\t<div className=\"dataforms-layouts-row__field\">\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\t\talignment={ ( layout as RowLayout ).alignment }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</HStack>\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t),\n\t},\n];\n\nexport function getFormFieldLayout( type: string ) {\n\treturn FORM_FIELD_LAYOUTS.find( ( layout ) => layout.type === type );\n}\n"],
-  "mappings": "AAsBG;AAnBH;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AAMP,OAAO,sBAAsB;AAC7B,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO,kBAAkB;AAEzB,MAAM,qBAAqB;AAAA,EAC1B;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE;AAAA,MACV;AAAA,MACA;AAAA,IACD,MAIC,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACxD,8BAAC,SAAI,WAAU,gCACd;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WAAc,OAAsB;AAAA,QAElC;AAAA;AAAA,IACH,GACD,GACD;AAAA,EAEF;AACD;AAEO,SAAS,mBAAoB,MAAe;AAClD,SAAO,mBAAmB,KAAM,CAAE,WAAY,OAAO,SAAS,IAAK;AACpE;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type { NormalizedLayout, NormalizedRowLayout } from '../types';\nimport FormRegularField from './regular';\nimport FormPanelField from './panel';\nimport FormCardField from './card';\nimport FormRowField from './row';\nimport FormDetailsField from './details';\n\nconst FORM_FIELD_LAYOUTS = [\n\t{\n\t\ttype: 'regular',\n\t\tcomponent: FormRegularField,\n\t\twrapper: ( { children }: { children: React.ReactNode } ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 4 }>\n\t\t\t\t{ children }\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'panel',\n\t\tcomponent: FormPanelField,\n\t\twrapper: ( { children }: { children: React.ReactNode } ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 2 }>\n\t\t\t\t{ children }\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'card',\n\t\tcomponent: FormCardField,\n\t\twrapper: ( { children }: { children: React.ReactNode } ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 6 }>\n\t\t\t\t{ children }\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'row',\n\t\tcomponent: FormRowField,\n\t\twrapper: ( {\n\t\t\tchildren,\n\t\t\tlayout,\n\t\t}: {\n\t\t\tchildren: React.ReactNode;\n\t\t\tlayout: NormalizedLayout;\n\t\t} ) => (\n\t\t\t<VStack className=\"dataforms-layouts__wrapper\" spacing={ 4 }>\n\t\t\t\t<div className=\"dataforms-layouts-row__field\">\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\t\talignment={\n\t\t\t\t\t\t\t( layout as NormalizedRowLayout ).alignment\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</HStack>\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t),\n\t},\n\t{\n\t\ttype: 'details',\n\t\tcomponent: FormDetailsField,\n\t},\n];\n\nexport function getFormFieldLayout( type: string ) {\n\treturn FORM_FIELD_LAYOUTS.find( ( layout ) => layout.type === type );\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AAMP,OAAO,sBAAsB;AAC7B,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO,kBAAkB;AACzB,OAAO,sBAAsB;AAO1B;AALH,IAAM,qBAAqB;AAAA,EAC1B;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE;AAAA,MACV;AAAA,MACA;AAAA,IACD,MAIC,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACxD,8BAAC,SAAI,WAAU,gCACd;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WACG,OAAgC;AAAA,QAGjC;AAAA;AAAA,IACH,GACD,GACD;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,EACZ;AACD;AAEO,SAAS,mBAAoB,MAAe;AAClD,SAAO,mBAAmB,KAAM,CAAE,WAAY,OAAO,SAAS,IAAK;AACpE;",
   "names": []
 }

package/build-module/dataform-layouts/{normalize-form-fields.js → normalize-form.js}

@@ -1,8 +1,9 @@
-const DEFAULT_LAYOUT = {
+// packages/dataviews/src/dataform-layouts/normalize-form.ts
+var DEFAULT_LAYOUT = {
   type: "regular",
   labelPosition: "top"
 };
-const normalizeCardSummaryField = (sum) => {
+var normalizeCardSummaryField = (sum) => {
   if (typeof sum === "string") {
     return [{ id: sum, visibility: "when-collapsed" }];
   }
@@ -54,28 +55,49 @@ function normalizeLayout(layout) {
       alignment: layout?.alignment ?? "center",
       styles: layout?.styles ?? {}
     };
+  } else if (layout?.type === "details") {
+    normalizedLayout = {
+      type: "details",
+      summary: layout?.summary ?? ""
+    };
   }
   return normalizedLayout;
 }
-function normalizeFormFields(form) {
-  const formLayout = normalizeLayout(form?.layout);
-  return (form.fields ?? []).map((field) => {
-    if (typeof field === "string") {
+function normalizeForm(form) {
+  const normalizedFormLayout = normalizeLayout(form?.layout);
+  const normalizedFields = (form.fields ?? []).map(
+    (field) => {
+      if (typeof field === "string") {
+        return {
+          id: field,
+          layout: normalizedFormLayout
+        };
+      }
+      const fieldLayout = field.layout ? normalizeLayout(field.layout) : normalizedFormLayout;
       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
+        }
       };
     }
-    const fieldLayout = field.layout ? normalizeLayout(field.layout) : formLayout;
-    return {
-      ...field,
-      layout: fieldLayout
-    };
-  });
+  );
+  return {
+    layout: normalizedFormLayout,
+    fields: normalizedFields
+  };
 }
+var normalize_form_default = normalizeForm;
 export {
   DEFAULT_LAYOUT,
-  normalizeFormFields as default,
-  normalizeLayout
+  normalize_form_default as default
 };
-//# sourceMappingURL=normalize-form-fields.js.map
+//# sourceMappingURL=normalize-form.js.map

package/build-module/dataform-layouts/normalize-form.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/dataform-layouts/normalize-form.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type {\n\tForm,\n\tLayout,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tNormalizedLayout,\n\tNormalizedRegularLayout,\n\tNormalizedPanelLayout,\n\tNormalizedCardLayout,\n\tNormalizedRowLayout,\n\tNormalizedDetailsLayout,\n\tNormalizedCardSummaryField,\n\tCardSummaryField,\n} from '../types';\n\nexport const DEFAULT_LAYOUT: NormalizedLayout = {\n\ttype: 'regular',\n\tlabelPosition: 'top',\n} as NormalizedRegularLayout;\n\nconst normalizeCardSummaryField = (\n\tsum: CardSummaryField\n): NormalizedCardSummaryField => {\n\tif ( typeof sum === 'string' ) {\n\t\treturn [ { id: sum, visibility: 'when-collapsed' } ];\n\t}\n\treturn sum.map( ( item ) => {\n\t\tif ( typeof item === 'string' ) {\n\t\t\treturn { id: item, visibility: 'when-collapsed' };\n\t\t}\n\t\treturn { id: item.id, visibility: item.visibility };\n\t} );\n};\n\n/**\n * Normalizes a layout configuration based on its type.\n *\n * @param layout The layout object to normalize.\n * @return The normalized layout object.\n */\nfunction normalizeLayout( layout?: Layout ): NormalizedLayout {\n\tlet normalizedLayout = DEFAULT_LAYOUT;\n\n\tif ( layout?.type === 'regular' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'regular',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'top',\n\t\t} satisfies NormalizedRegularLayout;\n\t} else if ( layout?.type === 'panel' ) {\n\t\tconst summary = layout.summary ?? [];\n\t\tconst normalizedSummary = Array.isArray( summary )\n\t\t\t? summary\n\t\t\t: [ summary ];\n\n\t\tnormalizedLayout = {\n\t\t\ttype: 'panel',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'side',\n\t\t\topenAs: layout?.openAs ?? 'dropdown',\n\t\t\tsummary: normalizedSummary,\n\t\t} satisfies NormalizedPanelLayout;\n\t} else if ( layout?.type === 'card' ) {\n\t\tif ( layout.withHeader === false ) {\n\t\t\t// Don't let isOpened be false if withHeader is false.\n\t\t\t// Otherwise, the card will not be visible.\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: false,\n\t\t\t\tisOpened: true,\n\t\t\t\tsummary: [],\n\t\t\t\tisCollapsible: false,\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t} else {\n\t\t\tconst summary = layout.summary ?? [];\n\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: true,\n\t\t\t\tisOpened:\n\t\t\t\t\ttypeof layout.isOpened === 'boolean'\n\t\t\t\t\t\t? layout.isOpened\n\t\t\t\t\t\t: true,\n\t\t\t\tsummary: normalizeCardSummaryField( summary ),\n\t\t\t\tisCollapsible:\n\t\t\t\t\tlayout.isCollapsible === undefined\n\t\t\t\t\t\t? true\n\t\t\t\t\t\t: layout.isCollapsible,\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t}\n\t} else if ( layout?.type === 'row' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'row',\n\t\t\talignment: layout?.alignment ?? 'center',\n\t\t\tstyles: layout?.styles ?? {},\n\t\t} satisfies NormalizedRowLayout;\n\t} else if ( layout?.type === 'details' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'details',\n\t\t\tsummary: layout?.summary ?? '',\n\t\t} satisfies NormalizedDetailsLayout;\n\t}\n\n\treturn normalizedLayout;\n}\n\nfunction normalizeForm( form: Form ): NormalizedForm {\n\tconst normalizedFormLayout = normalizeLayout( form?.layout );\n\n\tconst normalizedFields: NormalizedFormField[] = ( form.fields ?? [] ).map(\n\t\t( field ) => {\n\t\t\tif ( typeof field === 'string' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: field,\n\t\t\t\t\tlayout: normalizedFormLayout,\n\t\t\t\t} satisfies NormalizedFormField;\n\t\t\t}\n\n\t\t\tconst fieldLayout = field.layout\n\t\t\t\t? normalizeLayout( field.layout )\n\t\t\t\t: normalizedFormLayout;\n\n\t\t\treturn {\n\t\t\t\tid: field.id,\n\t\t\t\tlayout: fieldLayout,\n\t\t\t\t...( !! field.label && { label: field.label } ),\n\t\t\t\t...( !! field.description && {\n\t\t\t\t\tdescription: field.description,\n\t\t\t\t} ),\n\t\t\t\t...( 'children' in field &&\n\t\t\t\t\tArray.isArray( field.children ) && {\n\t\t\t\t\t\tchildren: normalizeForm( {\n\t\t\t\t\t\t\tfields: field.children,\n\t\t\t\t\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\t\t\t\t} ).fields,\n\t\t\t\t\t} ),\n\t\t\t} satisfies NormalizedFormField;\n\t\t}\n\t);\n\n\treturn {\n\t\tlayout: normalizedFormLayout,\n\t\tfields: normalizedFields,\n\t};\n}\n\nexport default normalizeForm;\n"],
+  "mappings": ";AAkBO,IAAM,iBAAmC;AAAA,EAC/C,MAAM;AAAA,EACN,eAAe;AAChB;AAEA,IAAM,4BAA4B,CACjC,QACgC;AAChC,MAAK,OAAO,QAAQ,UAAW;AAC9B,WAAO,CAAE,EAAE,IAAI,KAAK,YAAY,iBAAiB,CAAE;AAAA,EACpD;AACA,SAAO,IAAI,IAAK,CAAE,SAAU;AAC3B,QAAK,OAAO,SAAS,UAAW;AAC/B,aAAO,EAAE,IAAI,MAAM,YAAY,iBAAiB;AAAA,IACjD;AACA,WAAO,EAAE,IAAI,KAAK,IAAI,YAAY,KAAK,WAAW;AAAA,EACnD,CAAE;AACH;AAQA,SAAS,gBAAiB,QAAoC;AAC7D,MAAI,mBAAmB;AAEvB,MAAK,QAAQ,SAAS,WAAY;AACjC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,IACzC;AAAA,EACD,WAAY,QAAQ,SAAS,SAAU;AACtC,UAAM,UAAU,OAAO,WAAW,CAAC;AACnC,UAAM,oBAAoB,MAAM,QAAS,OAAQ,IAC9C,UACA,CAAE,OAAQ;AAEb,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,MACxC,QAAQ,QAAQ,UAAU;AAAA,MAC1B,SAAS;AAAA,IACV;AAAA,EACD,WAAY,QAAQ,SAAS,QAAS;AACrC,QAAK,OAAO,eAAe,OAAQ;AAGlC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,SAAS,CAAC;AAAA,QACV,eAAe;AAAA,MAChB;AAAA,IACD,OAAO;AACN,YAAM,UAAU,OAAO,WAAW,CAAC;AAEnC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UACC,OAAO,OAAO,aAAa,YACxB,OAAO,WACP;AAAA,QACJ,SAAS,0BAA2B,OAAQ;AAAA,QAC5C,eACC,OAAO,kBAAkB,SACtB,OACA,OAAO;AAAA,MACZ;AAAA,IACD;AAAA,EACD,WAAY,QAAQ,SAAS,OAAQ;AACpC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,WAAW,QAAQ,aAAa;AAAA,MAChC,QAAQ,QAAQ,UAAU,CAAC;AAAA,IAC5B;AAAA,EACD,WAAY,QAAQ,SAAS,WAAY;AACxC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS,QAAQ,WAAW;AAAA,IAC7B;AAAA,EACD;AAEA,SAAO;AACR;AAEA,SAAS,cAAe,MAA6B;AACpD,QAAM,uBAAuB,gBAAiB,MAAM,MAAO;AAE3D,QAAM,oBAA4C,KAAK,UAAU,CAAC,GAAI;AAAA,IACrE,CAAE,UAAW;AACZ,UAAK,OAAO,UAAU,UAAW;AAChC,eAAO;AAAA,UACN,IAAI;AAAA,UACJ,QAAQ;AAAA,QACT;AAAA,MACD;AAEA,YAAM,cAAc,MAAM,SACvB,gBAAiB,MAAM,MAAO,IAC9B;AAEH,aAAO;AAAA,QACN,IAAI,MAAM;AAAA,QACV,QAAQ;AAAA,QACR,GAAK,CAAC,CAAE,MAAM,SAAS,EAAE,OAAO,MAAM,MAAM;AAAA,QAC5C,GAAK,CAAC,CAAE,MAAM,eAAe;AAAA,UAC5B,aAAa,MAAM;AAAA,QACpB;AAAA,QACA,GAAK,cAAc,SAClB,MAAM,QAAS,MAAM,QAAS,KAAK;AAAA,UAClC,UAAU,cAAe;AAAA,YACxB,QAAQ,MAAM;AAAA,YACd,QAAQ;AAAA,UACT,CAAE,EAAE;AAAA,QACL;AAAA,MACF;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,EACT;AACD;AAEA,IAAO,yBAAQ;",
+  "names": []
+}

package/build-module/dataform-layouts/panel/dropdown.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// packages/dataviews/src/dataform-layouts/panel/dropdown.tsx
 import {
   __experimentalVStack as VStack,
   __experimentalHStack as HStack,
@@ -11,9 +11,9 @@ import { __ } from "@wordpress/i18n";
 import { useMemo } from "@wordpress/element";
 import { closeSmall } from "@wordpress/icons";
 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function DropdownHeader({
   title,
   onClose
@@ -49,13 +49,13 @@ function PanelDropdown({
   fieldDefinition,
   popoverAnchor
 }) {
-  const fieldLabel = isCombinedField(field) ? field.label : fieldDefinition?.label;
+  const fieldLabel = !!field.children ? field.label : fieldDefinition?.label;
   const form = useMemo(
     () => ({
       layout: DEFAULT_LAYOUT,
-      fields: isCombinedField(field) ? field.children : (
+      fields: !!field.children ? field.children : (
         // If not explicit children return the field id itself.
-        [{ id: field.id }]
+        [{ id: field.id, layout: DEFAULT_LAYOUT }]
       )
     }),
     [field]
@@ -64,7 +64,7 @@ function PanelDropdown({
     if (validity === void 0) {
       return void 0;
     }
-    if (isCombinedField(field)) {
+    if (!!field.children) {
       return validity?.children;
     }
     return { [field.id]: validity };