@wordpress/dataviews 11.3.1-next.v.0 → 12.0.0

package/build/components/dataform-layouts/data-form-layout.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-layouts/data-form-layout.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\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 '../dataform-context';\n\nconst DEFAULT_WRAPPER = ( { children }: { children: React.ReactNode } ) => (\n\t<Stack direction=\"column\" className=\"dataforms-layouts__wrapper\" gap=\"md\">\n\t\t{ children }\n\t</Stack>\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA2B;AAC3B,gBAAsB;AAWtB,mBAAmC;AACnC,8BAA4B;AAG3B;AADD,IAAM,kBAAkB,CAAE,EAAE,SAAS,MACpC,4CAAC,mBAAM,WAAU,UAAS,WAAU,8BAA6B,KAAI,MAClE,UACH;AAGM,SAAS,eAAwB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAiBI;AACH,QAAM,EAAE,QAAQ,iBAAiB,QAAI,2BAAY,wBAAAA,OAAgB;AAEjE,WAAS,mBAAoB,OAA6B;AACzD,WAAO,iBAAiB;AAAA,MACvB,CAAE,oBAAqB,gBAAgB,OAAO,MAAM;AAAA,IACrD;AAAA,EACD;AAEA,QAAM,UACL,UACA,iCAAoB,KAAK,OAAO,IAAK,GAAG,WACxC;AAED,SACC,4CAAC,WAAQ,QAAS,KAAK,QACpB,eAAK,OAAO,IAAK,CAAE,cAAe;AACnC,UAAM,kBAAc,iCAAoB,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;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext, useMemo } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\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 '../dataform-context';\n\nconst DEFAULT_WRAPPER = ( { children }: { children: React.ReactNode } ) => (\n\t<Stack direction=\"column\" className=\"dataforms-layouts__wrapper\" gap=\"lg\">\n\t\t{ children }\n\t</Stack>\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\tmarkWhenOptional?: boolean;\n\t\t\tvalidity?: FieldValidity;\n\t\t} ) => React.JSX.Element | null,\n\t\tchildField: NormalizedFormField,\n\t\tchildFieldValidity?: FieldValidity,\n\t\tmarkWhenOptional?: boolean\n\t) => React.JSX.Element;\n\tas?: React.ComponentType< { children: React.ReactNode } >;\n} ) {\n\tconst { fields: fieldDefinitions } = useContext( DataFormContext );\n\n\t// Auto-compute: mark the minority of fields\n\t// When counts are equal, mark required fields\n\tconst markWhenOptional = useMemo( () => {\n\t\tconst requiredCount = fieldDefinitions.filter(\n\t\t\t( f ) => !! f.isValid?.required\n\t\t).length;\n\t\tconst optionalCount = fieldDefinitions.length - requiredCount;\n\t\treturn requiredCount > optionalCount;\n\t}, [ fieldDefinitions ] );\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\tmarkWhenOptional\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\tmarkWhenOptional={ markWhenOptional }\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAoC;AACpC,gBAAsB;AAWtB,mBAAmC;AACnC,8BAA4B;AAG3B;AADD,IAAM,kBAAkB,CAAE,EAAE,SAAS,MACpC,4CAAC,mBAAM,WAAU,UAAS,WAAU,8BAA6B,KAAI,MAClE,UACH;AAGM,SAAS,eAAwB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAmBI;AACH,QAAM,EAAE,QAAQ,iBAAiB,QAAI,2BAAY,wBAAAA,OAAgB;AAIjE,QAAM,uBAAmB,wBAAS,MAAM;AACvC,UAAM,gBAAgB,iBAAiB;AAAA,MACtC,CAAE,MAAO,CAAC,CAAE,EAAE,SAAS;AAAA,IACxB,EAAE;AACF,UAAM,gBAAgB,iBAAiB,SAAS;AAChD,WAAO,gBAAgB;AAAA,EACxB,GAAG,CAAE,gBAAiB,CAAE;AAExB,WAAS,mBAAoB,OAA6B;AACzD,WAAO,iBAAiB;AAAA,MACvB,CAAE,oBAAqB,gBAAgB,OAAO,MAAM;AAAA,IACrD;AAAA,EACD;AAEA,QAAM,UACL,UACA,iCAAoB,KAAK,OAAO,IAAK,GAAG,WACxC;AAED,SACC,4CAAC,WAAQ,QAAS,KAAK,QACpB,eAAK,OAAO,IAAK,CAAE,cAAe;AACnC,UAAM,kBAAc,iCAAoB,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,QACzB;AAAA,MACD;AAAA,IACD;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA;AAAA,QACA,OAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,UAAW,WAAY,UAAU,EAAG;AAAA;AAAA,MAL9B,UAAU;AAAA,IAMjB;AAAA,EAEF,CAAE,GACH;AAEF;",
   "names": ["DataFormContext"]
 }

package/build/components/dataform-layouts/details/index.cjs

@@ -35,16 +35,24 @@ __export(details_exports, {
 module.exports = __toCommonJS(details_exports);
 var import_element = require("@wordpress/element");
 var import_i18n = require("@wordpress/i18n");
+var import_ui = require("@wordpress/ui");
 var import_dataform_context = __toESM(require("../../dataform-context/index.cjs"));
 var import_data_form_layout = require("../data-form-layout.cjs");
 var import_normalize_form = require("../normalize-form.cjs");
+var import_use_report_validity = __toESM(require("../../../hooks/use-report-validity.cjs"));
+var import_validation_badge = __toESM(require("../validation-badge.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 function FormDetailsField({
   data,
   field,
-  onChange
+  onChange,
+  validity
 }) {
   const { fields } = (0, import_element.useContext)(import_dataform_context.default);
+  const detailsRef = (0, import_element.useRef)(null);
+  const contentRef = (0, import_element.useRef)(null);
+  const [touched, setTouched] = (0, import_element.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_element.useState)(false);
   const form = (0, import_element.useMemo)(
     () => ({
       layout: import_normalize_form.DEFAULT_LAYOUT,
@@ -52,6 +60,27 @@ function FormDetailsField({
     }),
     [field]
   );
+  (0, import_element.useEffect)(() => {
+    const details = detailsRef.current;
+    if (!details) {
+      return;
+    }
+    const handleToggle = () => {
+      const nowOpen = details.open;
+      if (!nowOpen) {
+        setTouched(true);
+      }
+      setIsOpen(nowOpen);
+    };
+    details.addEventListener("toggle", handleToggle);
+    return () => {
+      details.removeEventListener("toggle", handleToggle);
+    };
+  }, []);
+  (0, import_use_report_validity.default)(contentRef, isOpen && touched);
+  const handleBlur = (0, import_element.useCallback)(() => {
+    setTouched(true);
+  }, []);
   if (!field.children) {
     return null;
   }
@@ -63,16 +92,44 @@ function FormDetailsField({
   } else {
     summaryContent = field.label || (0, import_i18n.__)("More details");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { className: "dataforms-layouts-details__details", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { className: "dataforms-layouts-details__summary", children: summaryContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-details__content", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_data_form_layout.DataFormLayout,
-      {
-        data,
-        form,
-        onChange
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "details",
+    {
+      ref: detailsRef,
+      className: "dataforms-layouts-details__details",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { className: "dataforms-layouts-details__summary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_ui.Stack,
+          {
+            direction: "row",
+            align: "center",
+            gap: "md",
+            className: "dataforms-layouts-details__summary-content",
+            children: [
+              summaryContent,
+              touched && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_validation_badge.default, { validity })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref: contentRef,
+            className: "dataforms-layouts-details__content",
+            onBlur: handleBlur,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_data_form_layout.DataFormLayout,
+              {
+                data,
+                form,
+                onChange,
+                validity: validity?.children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 }
 //# sourceMappingURL=index.cjs.map

package/build/components/dataform-layouts/details/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/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 '../../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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAoC;AACpC,kBAAmB;AAUnB,8BAA4B;AAC5B,8BAA+B;AAC/B,4BAA+B;AAiC5B;AA/BY,SAAR,iBAA2C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,EAAE,OAAO,QAAI,2BAAY,wBAAAA,OAAgB;AAE/C,QAAM,WAAuB;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,4CAAC,aAAa,QAAb,EAAoB,MAAO,MAAO,OAAQ,cAAe;AAAA,EAE5D,OAAO;AAEN,qBAAiB,MAAM,aAAS,gBAAI,cAAe;AAAA,EACpD;AAEA,SACC,6CAAC,aAAQ,WAAU,sCAClB;AAAA,gDAAC,aAAQ,WAAU,sCAChB,0BACH;AAAA,IACA,4CAAC,SAAI,WAAU,sCACd;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
-  "names": ["DataFormContext"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tNormalizedForm,\n\tNormalizedDetailsLayout,\n\tFieldLayoutProps,\n} from '../../../types';\nimport DataFormContext from '../../dataform-context';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport useReportValidity from '../../../hooks/use-report-validity';\nimport ValidationBadge from '../validation-badge';\n\nexport default function FormDetailsField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst detailsRef = useRef< HTMLDetailsElement >( null );\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst [ touched, setTouched ] = useState( false );\n\tconst [ isOpen, setIsOpen ] = useState( false );\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\t// Track the open/close state of the native details element.\n\tuseEffect( () => {\n\t\tconst details = detailsRef.current;\n\t\tif ( ! details ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleToggle = () => {\n\t\t\tconst nowOpen = details.open;\n\t\t\t// Mark as touched when collapsing (going from open to closed).\n\t\t\tif ( ! nowOpen ) {\n\t\t\t\tsetTouched( true );\n\t\t\t}\n\t\t\tsetIsOpen( nowOpen );\n\t\t};\n\n\t\tdetails.addEventListener( 'toggle', handleToggle );\n\t\treturn () => {\n\t\t\tdetails.removeEventListener( 'toggle', handleToggle );\n\t\t};\n\t}, [] );\n\n\t// When expanded after being touched, trigger reportValidity to show\n\t// field-level errors.\n\tuseReportValidity( contentRef, isOpen && touched );\n\n\t// Mark as touched when any field inside is blurred.\n\tconst handleBlur = useCallback( () => {\n\t\tsetTouched( true );\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\n\t\t\tref={ detailsRef }\n\t\t\tclassName=\"dataforms-layouts-details__details\"\n\t\t>\n\t\t\t<summary className=\"dataforms-layouts-details__summary\">\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap=\"md\"\n\t\t\t\t\tclassName=\"dataforms-layouts-details__summary-content\"\n\t\t\t\t>\n\t\t\t\t\t{ summaryContent }\n\t\t\t\t\t{ touched && <ValidationBadge validity={ validity } /> }\n\t\t\t\t</Stack>\n\t\t\t</summary>\n\t\t\t<div\n\t\t\t\tref={ contentRef }\n\t\t\t\tclassName=\"dataforms-layouts-details__content\"\n\t\t\t\tonBlur={ handleBlur }\n\t\t\t>\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\tvalidity={ validity?.children }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</details>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAOO;AACP,kBAAmB;AACnB,gBAAsB;AAUtB,8BAA4B;AAC5B,8BAA+B;AAC/B,4BAA+B;AAC/B,iCAA8B;AAC9B,8BAA4B;AAqEzB;AAnEY,SAAR,iBAA2C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,EAAE,OAAO,QAAI,2BAAY,wBAAAA,OAAgB;AAC/C,QAAM,iBAAa,uBAA8B,IAAK;AACtD,QAAM,iBAAa,uBAA0B,IAAK;AAClD,QAAM,CAAE,SAAS,UAAW,QAAI,yBAAU,KAAM;AAChD,QAAM,CAAE,QAAQ,SAAU,QAAI,yBAAU,KAAM;AAE9C,QAAM,WAAuB;AAAA,IAC5B,OAAQ;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,MAAM,YAAY,CAAC;AAAA,IAC5B;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAGA,gCAAW,MAAM;AAChB,UAAM,UAAU,WAAW;AAC3B,QAAK,CAAE,SAAU;AAChB;AAAA,IACD;AAEA,UAAM,eAAe,MAAM;AAC1B,YAAM,UAAU,QAAQ;AAExB,UAAK,CAAE,SAAU;AAChB,mBAAY,IAAK;AAAA,MAClB;AACA,gBAAW,OAAQ;AAAA,IACpB;AAEA,YAAQ,iBAAkB,UAAU,YAAa;AACjD,WAAO,MAAM;AACZ,cAAQ,oBAAqB,UAAU,YAAa;AAAA,IACrD;AAAA,EACD,GAAG,CAAC,CAAE;AAIN,iCAAAC,SAAmB,YAAY,UAAU,OAAQ;AAGjD,QAAM,iBAAa,4BAAa,MAAM;AACrC,eAAY,IAAK;AAAA,EAClB,GAAG,CAAC,CAAE;AAEN,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,4CAAC,aAAa,QAAb,EAAoB,MAAO,MAAO,OAAQ,cAAe;AAAA,EAE5D,OAAO;AAEN,qBAAiB,MAAM,aAAS,gBAAI,cAAe;AAAA,EACpD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,WAAU;AAAA,MAEV;AAAA,oDAAC,aAAQ,WAAU,sCAClB;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,WAAU;AAAA,YAER;AAAA;AAAA,cACA,WAAW,4CAAC,wBAAAC,SAAA,EAAgB,UAAsB;AAAA;AAAA;AAAA,QACrD,GACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,KAAM;AAAA,YACN,WAAU;AAAA,YACV,QAAS;AAAA,YAET;AAAA,cAAC;AAAA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,UAAW,UAAU;AAAA;AAAA,YACtB;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "names": ["DataFormContext", "useReportValidity", "ValidationBadge"]
 }

package/build/components/dataform-layouts/index.cjs

@@ -49,7 +49,7 @@ var FORM_FIELD_LAYOUTS = [
       {
         direction: "column",
         className: "dataforms-layouts__wrapper",
-        gap: "md",
+        gap: "lg",
         children
       }
     )
@@ -62,7 +62,7 @@ var FORM_FIELD_LAYOUTS = [
       {
         direction: "column",
         className: "dataforms-layouts__wrapper",
-        gap: "xs",
+        gap: "md",
         children
       }
     )
@@ -75,7 +75,7 @@ var FORM_FIELD_LAYOUTS = [
       {
         direction: "column",
         className: "dataforms-layouts__wrapper",
-        gap: "lg",
+        gap: "xl",
         children
       }
     )
@@ -91,12 +91,12 @@ var FORM_FIELD_LAYOUTS = [
       {
         direction: "column",
         className: "dataforms-layouts__wrapper",
-        gap: "md",
+        gap: "lg",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-row__field", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_ui.Stack,
           {
             direction: "row",
-            gap: "md",
+            gap: "lg",
             align: layout.alignment,
             children
           }

package/build/components/dataform-layouts/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataform-layouts/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Stack } from '@wordpress/ui';\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<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\tclassName=\"dataforms-layouts__wrapper\"\n\t\t\t\tgap=\"md\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Stack>\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<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\tclassName=\"dataforms-layouts__wrapper\"\n\t\t\t\tgap=\"xs\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Stack>\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<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\tclassName=\"dataforms-layouts__wrapper\"\n\t\t\t\tgap=\"lg\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Stack>\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<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\tclassName=\"dataforms-layouts__wrapper\"\n\t\t\t\tgap=\"md\"\n\t\t\t>\n\t\t\t\t<div className=\"dataforms-layouts-row__field\">\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"md\"\n\t\t\t\t\t\talign={ ( layout as NormalizedRowLayout ).alignment }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</Stack>\n\t\t\t\t</div>\n\t\t\t</Stack>\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"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Stack } from '@wordpress/ui';\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<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\tclassName=\"dataforms-layouts__wrapper\"\n\t\t\t\tgap=\"lg\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Stack>\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<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\tclassName=\"dataforms-layouts__wrapper\"\n\t\t\t\tgap=\"md\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Stack>\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<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\tclassName=\"dataforms-layouts__wrapper\"\n\t\t\t\tgap=\"xl\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Stack>\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<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\tclassName=\"dataforms-layouts__wrapper\"\n\t\t\t\tgap=\"lg\"\n\t\t\t>\n\t\t\t\t<div className=\"dataforms-layouts-row__field\">\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"lg\"\n\t\t\t\t\t\talign={ ( layout as NormalizedRowLayout ).alignment }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</Stack>\n\t\t\t\t</div>\n\t\t\t</Stack>\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAAsB;AAMtB,qBAA6B;AAC7B,mBAA2B;AAC3B,kBAA0B;AAC1B,iBAAyB;AACzB,qBAA6B;AAO1B;AALH,IAAM,qBAAqB;AAAA,EAC1B;AAAA,IACC,MAAM;AAAA,IACN,WAAW,eAAAA;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,WAAU;AAAA,QACV,KAAI;AAAA,QAEF;AAAA;AAAA,IACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW,aAAAC;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,WAAU;AAAA,QACV,KAAI;AAAA,QAEF;AAAA;AAAA,IACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW,YAAAC;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,WAAU;AAAA,QACV,KAAI;AAAA,QAEF;AAAA;AAAA,IACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW,WAAAC;AAAA,IACX,SAAS,CAAE;AAAA,MACV;AAAA,MACA;AAAA,IACD,MAIC;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,WAAU;AAAA,QACV,KAAI;AAAA,QAEJ,sDAAC,SAAI,WAAU,gCACd;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,KAAI;AAAA,YACJ,OAAU,OAAgC;AAAA,YAExC;AAAA;AAAA,QACH,GACD;AAAA;AAAA,IACD;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW,eAAAC;AAAA,EACZ;AACD;AAEO,SAAS,mBAAoB,MAAe;AAClD,SAAO,mBAAmB,KAAM,CAAE,WAAY,OAAO,SAAS,IAAK;AACpE;",
   "names": ["FormRegularField", "FormPanelField", "FormCardField", "FormRowField", "FormDetailsField"]
 }

package/build/components/dataform-layouts/normalize-form.cjs

@@ -53,7 +53,8 @@ function normalizeLayout(layout) {
       type: "panel",
       labelPosition: layout?.labelPosition ?? "side",
       openAs: layout?.openAs ?? "dropdown",
-      summary: normalizedSummary
+      summary: normalizedSummary,
+      editVisibility: layout?.editVisibility ?? "on-hover"
     };
   } else if (layout?.type === "card") {
     if (layout.withHeader === false) {

package/build/components/dataform-layouts/normalize-form.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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;",
+  "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\teditVisibility: layout?.editVisibility ?? 'on-hover',\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": "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",
   "names": []
 }

package/build/components/dataform-layouts/panel/dropdown.cjs

@@ -42,6 +42,8 @@ var import_ui = require("@wordpress/ui");
 var import_data_form_layout = require("../data-form-layout.cjs");
 var import_normalize_form = require("../normalize-form.cjs");
 var import_summary_button = __toESM(require("./summary-button.cjs"));
+var import_use_report_validity = __toESM(require("../../../hooks/use-report-validity.cjs"));
+var import_use_field_from_form_field = __toESM(require("./utils/use-field-from-form-field.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 function DropdownHeader({
   title,
@@ -52,8 +54,8 @@ function DropdownHeader({
     {
       direction: "column",
       className: "dataforms-layouts-panel__dropdown-header",
-      gap: "md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "row", gap: "xs", align: "center", children: [
+      gap: "lg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "row", gap: "sm", align: "center", children: [
         title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { level: 2, size: 13, children: title }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { style: { flex: 1 } }),
         onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -69,18 +71,38 @@ function DropdownHeader({
     }
   );
 }
+function DropdownContentWithValidation({
+  touched,
+  children
+}) {
+  const ref = (0, import_element.useRef)(null);
+  (0, import_use_report_validity.default)(ref, touched);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, children });
+}
 function PanelDropdown({
   data,
   field,
   onChange,
-  validity,
-  labelPosition = "side",
-  summaryFields,
-  fieldDefinition,
-  popoverAnchor,
-  onOpen
+  validity
 }) {
-  const fieldLabel = !!field.children ? field.label : fieldDefinition?.label;
+  const [touched, setTouched] = (0, import_element.useState)(false);
+  const [popoverAnchor, setPopoverAnchor] = (0, import_element.useState)(
+    null
+  );
+  const popoverProps = (0, import_element.useMemo)(
+    () => ({
+      // Anchor the popover to the middle of the entire row so that it doesn't
+      // move around when the label changes.
+      anchor: popoverAnchor,
+      placement: "left-start",
+      offset: 36,
+      shift: true
+    }),
+    [popoverAnchor]
+  );
+  const [dialogRef, dialogProps] = (0, import_compose.__experimentalUseDialog)({
+    focusOnMount: "firstInputElement"
+  });
   const form = (0, import_element.useMemo)(
     () => ({
       layout: import_normalize_form.DEFAULT_LAYOUT,
@@ -100,69 +122,72 @@ function PanelDropdown({
     }
     return { [field.id]: validity };
   }, [validity, field]);
-  const popoverProps = (0, import_element.useMemo)(
-    () => ({
-      // Anchor the popover to the middle of the entire row so that it doesn't
-      // move around when the label changes.
-      anchor: popoverAnchor,
-      placement: "left-start",
-      offset: 36,
-      shift: true
-    }),
-    [popoverAnchor]
-  );
-  const focusOnMountRef = (0, import_compose.useFocusOnMount)("firstInputElement");
+  const { fieldDefinition, fieldLabel, summaryFields } = (0, import_use_field_from_form_field.default)(field);
+  if (!fieldDefinition) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_components.Dropdown,
+    "div",
     {
-      contentClassName: "dataforms-layouts-panel__field-dropdown",
-      popoverProps,
-      focusOnMount: false,
-      toggleProps: {
-        size: "compact",
-        variant: "tertiary",
-        tooltipPosition: "middle left"
-      },
-      renderToggle: ({ isOpen, onToggle }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_summary_button.default,
+      ref: setPopoverAnchor,
+      className: "dataforms-layouts-panel__field-dropdown-anchor",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Dropdown,
         {
-          summaryFields,
-          data,
-          labelPosition,
-          fieldLabel,
-          disabled: fieldDefinition.readOnly === true,
-          onClick: () => {
-            if (!isOpen && onOpen) {
-              onOpen();
+          contentClassName: "dataforms-layouts-panel__field-dropdown",
+          popoverProps,
+          focusOnMount: false,
+          onToggle: (willOpen) => {
+            if (!willOpen) {
+              setTouched(true);
             }
-            onToggle();
           },
-          "aria-expanded": isOpen
-        }
-      ),
-      renderContent: ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownHeader, { title: fieldLabel, onClose }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: focusOnMountRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_data_form_layout.DataFormLayout,
-          {
-            data,
-            form,
-            onChange,
-            validity: formValidity,
-            children: (FieldLayout, childField, childFieldValidity) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              FieldLayout,
+          renderToggle: ({ isOpen, onToggle }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_summary_button.default,
+            {
+              data,
+              field,
+              fieldLabel,
+              summaryFields,
+              validity,
+              touched,
+              disabled: fieldDefinition.readOnly === true,
+              onClick: onToggle,
+              "aria-expanded": isOpen
+            }
+          ),
+          renderContent: ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownContentWithValidation, { touched, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: dialogRef, ...dialogProps, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              DropdownHeader,
+              {
+                title: fieldLabel,
+                onClose
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_data_form_layout.DataFormLayout,
               {
                 data,
-                field: childField,
+                form,
                 onChange,
-                hideLabelFromVision: (form?.fields ?? []).length < 2,
-                validity: childFieldValidity
-              },
-              childField.id
+                validity: formValidity,
+                children: (FieldLayout, childField, childFieldValidity, markWhenOptional) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  FieldLayout,
+                  {
+                    data,
+                    field: childField,
+                    onChange,
+                    hideLabelFromVision: (form?.fields ?? []).length < 2,
+                    markWhenOptional,
+                    validity: childFieldValidity
+                  },
+                  childField.id
+                )
+              }
             )
-          }
-        ) })
-      ] })
+          ] }) })
+        }
+      )
     }
   );
 }

package/build/components/dataform-layouts/panel/dropdown.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-layouts/panel/dropdown.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalSpacer as Spacer,\n\tDropdown,\n\tButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport { closeSmall } from '@wordpress/icons';\nimport { useFocusOnMount } from '@wordpress/compose';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldValidity,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tFormValidity,\n\tNormalizedField,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport SummaryButton from './summary-button';\n\nfunction DropdownHeader( {\n\ttitle,\n\tonClose,\n}: {\n\ttitle?: string;\n\tonClose: () => void;\n} ) {\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tclassName=\"dataforms-layouts-panel__dropdown-header\"\n\t\t\tgap=\"md\"\n\t\t>\n\t\t\t<Stack direction=\"row\" gap=\"xs\" align=\"center\">\n\t\t\t\t{ title && (\n\t\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</Heading>\n\t\t\t\t) }\n\t\t\t\t<Spacer style={ { flex: 1 } } />\n\t\t\t\t{ onClose && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n\nfunction PanelDropdown< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n\tlabelPosition = 'side',\n\tsummaryFields,\n\tfieldDefinition,\n\tpopoverAnchor,\n\tonOpen,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tonChange: ( value: any ) => void;\n\tvalidity?: FieldValidity;\n\tlabelPosition: 'side' | 'top' | 'none';\n\tsummaryFields: NormalizedField< Item >[];\n\tfieldDefinition: NormalizedField< Item >;\n\tpopoverAnchor: HTMLElement | null;\n\tonOpen?: () => void;\n} ) {\n\tconst fieldLabel = !! field.children ? field.label : fieldDefinition?.label;\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: !! field.children\n\t\t\t\t? field.children\n\t\t\t\t: // If not explicit children return the field id itself.\n\t\t\t\t  [ { id: field.id, layout: DEFAULT_LAYOUT } ],\n\t\t} ),\n\t\t[ field ]\n\t);\n\tconst formValidity = useMemo( (): FormValidity => {\n\t\tif ( validity === undefined ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tif ( !! field.children ) {\n\t\t\treturn validity?.children;\n\t\t}\n\n\t\treturn { [ field.id ]: validity };\n\t}, [ validity, field ] );\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t// Anchor the popover to the middle of the entire row so that it doesn't\n\t\t\t// move around when the label changes.\n\t\t\tanchor: popoverAnchor,\n\t\t\tplacement: 'left-start',\n\t\t\toffset: 36,\n\t\t\tshift: true,\n\t\t} ),\n\t\t[ popoverAnchor ]\n\t);\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstInputElement' );\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"dataforms-layouts-panel__field-dropdown\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tfocusOnMount={ false }\n\t\t\ttoggleProps={ {\n\t\t\t\tsize: 'compact',\n\t\t\t\tvariant: 'tertiary',\n\t\t\t\ttooltipPosition: 'middle left',\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<SummaryButton\n\t\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\t\tfieldLabel={ fieldLabel }\n\t\t\t\t\tdisabled={ fieldDefinition.readOnly === true }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( ! isOpen && onOpen ) {\n\t\t\t\t\t\t\tonOpen();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t<>\n\t\t\t\t\t<DropdownHeader title={ fieldLabel } onClose={ onClose } />\n\t\t\t\t\t<div ref={ focusOnMountRef }>\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={ formValidity }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ (\n\t\t\t\t\t\t\t\tFieldLayout,\n\t\t\t\t\t\t\t\tchildField,\n\t\t\t\t\t\t\t\tchildFieldValidity\n\t\t\t\t\t\t\t) => (\n\t\t\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\t\t\t\t( form?.fields ?? [] ).length < 2\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</DataFormLayout>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default PanelDropdown;\n"],
-  "mappings": "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",
-  "names": ["Heading", "Spacer", "SummaryButton"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalSpacer as Spacer,\n\tDropdown,\n\tButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useRef, useState } from '@wordpress/element';\nimport { closeSmall } from '@wordpress/icons';\nimport { __experimentalUseDialog as useDialog } from '@wordpress/compose';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldLayoutProps,\n\tNormalizedForm,\n\tFormValidity,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport SummaryButton from './summary-button';\nimport useReportValidity from '../../../hooks/use-report-validity';\nimport useFieldFromFormField from './utils/use-field-from-form-field';\n\nfunction DropdownHeader( {\n\ttitle,\n\tonClose,\n}: {\n\ttitle?: string;\n\tonClose: () => void;\n} ) {\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tclassName=\"dataforms-layouts-panel__dropdown-header\"\n\t\t\tgap=\"lg\"\n\t\t>\n\t\t\t<Stack direction=\"row\" gap=\"sm\" align=\"center\">\n\t\t\t\t{ title && (\n\t\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</Heading>\n\t\t\t\t) }\n\t\t\t\t<Spacer style={ { flex: 1 } } />\n\t\t\t\t{ onClose && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n\nfunction DropdownContentWithValidation( {\n\ttouched,\n\tchildren,\n}: {\n\ttouched: boolean;\n\tchildren: React.ReactNode;\n} ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\tuseReportValidity( ref, touched );\n\treturn <div ref={ ref }>{ children }</div>;\n}\n\nfunction PanelDropdown< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst [ touched, setTouched ] = useState( false );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t// Anchor the popover to the middle of the entire row so that it doesn't\n\t\t\t// move around when the label changes.\n\t\t\tanchor: popoverAnchor,\n\t\t\tplacement: 'left-start',\n\t\t\toffset: 36,\n\t\t\tshift: true,\n\t\t} ),\n\t\t[ popoverAnchor ]\n\t);\n\tconst [ dialogRef, dialogProps ] = useDialog( {\n\t\tfocusOnMount: 'firstInputElement',\n\t} );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: !! field.children\n\t\t\t\t? field.children\n\t\t\t\t: // If not explicit children return the field id itself.\n\t\t\t\t  [ { id: field.id, layout: DEFAULT_LAYOUT } ],\n\t\t} ),\n\t\t[ field ]\n\t);\n\tconst formValidity = useMemo( (): FormValidity => {\n\t\tif ( validity === undefined ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tif ( !! field.children ) {\n\t\t\treturn validity?.children;\n\t\t}\n\n\t\treturn { [ field.id ]: validity };\n\t}, [ validity, field ] );\n\n\tconst { fieldDefinition, fieldLabel, summaryFields } =\n\t\tuseFieldFromFormField( field );\n\tif ( ! fieldDefinition ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={ setPopoverAnchor }\n\t\t\tclassName=\"dataforms-layouts-panel__field-dropdown-anchor\"\n\t\t>\n\t\t\t<Dropdown\n\t\t\t\tcontentClassName=\"dataforms-layouts-panel__field-dropdown\"\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\tfocusOnMount={ false }\n\t\t\t\tonToggle={ ( willOpen ) => {\n\t\t\t\t\tif ( ! willOpen ) {\n\t\t\t\t\t\tsetTouched( true );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t<SummaryButton\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tfieldLabel={ fieldLabel }\n\t\t\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\t\t\tvalidity={ validity }\n\t\t\t\t\t\ttouched={ touched }\n\t\t\t\t\t\tdisabled={ fieldDefinition.readOnly === true }\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t<DropdownContentWithValidation touched={ touched }>\n\t\t\t\t\t\t<div ref={ dialogRef } { ...dialogProps }>\n\t\t\t\t\t\t\t<DropdownHeader\n\t\t\t\t\t\t\t\ttitle={ fieldLabel }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\tvalidity={ formValidity }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ (\n\t\t\t\t\t\t\t\t\tFieldLayout,\n\t\t\t\t\t\t\t\t\tchildField,\n\t\t\t\t\t\t\t\t\tchildFieldValidity,\n\t\t\t\t\t\t\t\t\tmarkWhenOptional\n\t\t\t\t\t\t\t\t) => (\n\t\t\t\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\t\t\t\t\t( form?.fields ?? [] ).length < 2\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</DataFormLayout>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</DropdownContentWithValidation>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default PanelDropdown;\n"],
+  "mappings": "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",
+  "names": ["Heading", "Spacer", "useReportValidity", "useDialog", "useFieldFromFormField", "SummaryButton"]
 }