@wordpress/dataviews 10.1.5 → 10.3.0

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

@@ -26,19 +26,19 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/dataviews/src/dataform-layouts/data-form-layout.tsx
 var data_form_layout_exports = {};
 __export(data_form_layout_exports, {
   DataFormLayout: () => DataFormLayout
 });
 module.exports = __toCommonJS(data_form_layout_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_components = require("@wordpress/components");
 var import_element = require("@wordpress/element");
 var import_index = require("./index");
 var import_dataform_context = __toESM(require("../components/dataform-context"));
-var import_is_combined_field = require("./is-combined-field");
-var import_normalize_form_fields = __toESM(require("./normalize-form-fields"));
-const DEFAULT_WRAPPER = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalVStack, { className: "dataforms-layouts__wrapper", spacing: 4, children });
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_WRAPPER = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalVStack, { className: "dataforms-layouts__wrapper", spacing: 4, children });
 function DataFormLayout({
   data,
   form,
@@ -49,23 +49,17 @@ function DataFormLayout({
 }) {
   const { fields: fieldDefinitions } = (0, import_element.useContext)(import_dataform_context.default);
   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 = (0, import_element.useMemo)(
-    () => (0, import_normalize_form_fields.default)(form),
-    [form]
-  );
-  const normalizedFormLayout = (0, import_normalize_form_fields.normalizeLayout)(form.layout);
-  const Wrapper = as ?? (0, import_index.getFormFieldLayout)(normalizedFormLayout.type)?.wrapper ?? DEFAULT_WRAPPER;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wrapper, { layout: normalizedFormLayout, children: normalizedFormFields.map((formField) => {
+  const Wrapper = as ?? (0, import_index.getFormFieldLayout)(form.layout.type)?.wrapper ?? DEFAULT_WRAPPER;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wrapper, { layout: form.layout, children: form.fields.map((formField) => {
     const FieldLayout = (0, import_index.getFormFieldLayout)(formField.layout.type)?.component;
     if (!FieldLayout) {
       return null;
     }
-    const fieldDefinition = !(0, import_is_combined_field.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/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBC;AAnBD,wBAA+C;AAC/C,qBAAoC;AAYpC,mBAAmC;AACnC,8BAA4B;AAC5B,+BAAgC;AAChC,mCAAqD;AAErD,MAAM,kBAAkB,CAAE,EAAE,SAAS,MACpC,4CAAC,kBAAAA,sBAAA,EAAO,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,QAAI,2BAAY,wBAAAC,OAAgB;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,2BAAuB;AAAA,IAC5B,UAAM,6BAAAC,SAAqB,IAAK;AAAA,IAChC,CAAE,IAAK;AAAA,EACR;AAEA,QAAM,2BAAuB,8CAAiB,KAAK,MAAO;AAC1D,QAAM,UACL,UACA,iCAAoB,qBAAqB,IAAK,GAAG,WACjD;AAED,SACC,4CAAC,WAAQ,QAAS,sBACf,+BAAqB,IAAK,CAAE,cAAe;AAC5C,UAAM,kBAAc,iCAAoB,UAAU,OAAO,IAAK,GAC3D;AAEH,QAAK,CAAE,aAAc;AACpB,aAAO;AAAA,IACR;AAEA,UAAM,kBAAkB,KAAE,0CAAiB,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;",
-  "names": ["VStack", "DataFormContext", "normalizeFormFields"]
+  "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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA+C;AAC/C,qBAA2B;AAW3B,mBAAmC;AACnC,8BAA4B;AAG3B;AADD,IAAM,kBAAkB,CAAE,EAAE,SAAS,MACpC,4CAAC,kBAAAA,sBAAA,EAAO,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,QAAI,2BAAY,wBAAAC,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;",
+  "names": ["VStack", "DataFormContext"]
 }

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

@@ -0,0 +1,78 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/dataviews/src/dataform-layouts/details/index.tsx
+var details_exports = {};
+__export(details_exports, {
+  default: () => FormDetailsField
+});
+module.exports = __toCommonJS(details_exports);
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_dataform_context = __toESM(require("../../components/dataform-context"));
+var import_data_form_layout = require("../data-form-layout");
+var import_normalize_form = require("../normalize-form");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FormDetailsField({
+  data,
+  field,
+  onChange
+}) {
+  const { fields } = (0, import_element.useContext)(import_dataform_context.default);
+  const form = (0, import_element.useMemo)(
+    () => ({
+      layout: import_normalize_form.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__ */ (0, import_jsx_runtime.jsx)(summaryField.render, { item: data, field: summaryField });
+  } 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
+      }
+    ) })
+  ] });
+}
+//# sourceMappingURL=index.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]
+}

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

@@ -16,6 +16,8 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/dataviews/src/dataform-layouts/get-summary-fields.ts
 var get_summary_fields_exports = {};
 __export(get_summary_fields_exports, {
   getSummaryFields: () => getSummaryFields
@@ -29,7 +31,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/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;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/dataform-layouts/index.js

@@ -26,18 +26,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/dataviews/src/dataform-layouts/index.tsx
 var dataform_layouts_exports = {};
 __export(dataform_layouts_exports, {
   getFormFieldLayout: () => getFormFieldLayout
 });
 module.exports = __toCommonJS(dataform_layouts_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_components = require("@wordpress/components");
 var import_regular = __toESM(require("./regular"));
 var import_panel = __toESM(require("./panel"));
 var import_card = __toESM(require("./card"));
 var import_row = __toESM(require("./row"));
-const FORM_FIELD_LAYOUTS = [
+var import_details = __toESM(require("./details"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var FORM_FIELD_LAYOUTS = [
   {
     type: "regular",
     component: import_regular.default,
@@ -67,6 +70,10 @@ const FORM_FIELD_LAYOUTS = [
         children
       }
     ) }) })
+  },
+  {
+    type: "details",
+    component: import_details.default
   }
 ];
 function getFormFieldLayout(type) {

package/build/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBG;AAnBH,wBAGO;AAMP,qBAA6B;AAC7B,mBAA2B;AAC3B,kBAA0B;AAC1B,iBAAyB;AAEzB,MAAM,qBAAqB;AAAA,EAC1B;AAAA,IACC,MAAM;AAAA,IACN,WAAW,eAAAA;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,4CAAC,kBAAAC,sBAAA,EAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW,aAAAC;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,4CAAC,kBAAAD,sBAAA,EAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW,YAAAE;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,4CAAC,kBAAAF,sBAAA,EAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW,WAAAG;AAAA,IACX,SAAS,CAAE;AAAA,MACV;AAAA,MACA;AAAA,IACD,MAIC,4CAAC,kBAAAH,sBAAA,EAAO,WAAU,8BAA6B,SAAU,GACxD,sDAAC,SAAI,WAAU,gCACd;AAAA,MAAC,kBAAAI;AAAA,MAAA;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;",
-  "names": ["FormRegularField", "VStack", "FormPanelField", "FormCardField", "FormRowField", "HStack"]
+  "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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAGO;AAMP,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,4CAAC,kBAAAC,sBAAA,EAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW,aAAAC;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,4CAAC,kBAAAD,sBAAA,EAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW,YAAAE;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,4CAAC,kBAAAF,sBAAA,EAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW,WAAAG;AAAA,IACX,SAAS,CAAE;AAAA,MACV;AAAA,MACA;AAAA,IACD,MAIC,4CAAC,kBAAAH,sBAAA,EAAO,WAAU,8BAA6B,SAAU,GACxD,sDAAC,SAAI,WAAU,gCACd;AAAA,MAAC,kBAAAI;AAAA,MAAA;AAAA,QACA,SAAU;AAAA,QACV,WACG,OAAgC;AAAA,QAGjC;AAAA;AAAA,IACH,GACD,GACD;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", "VStack", "FormPanelField", "FormCardField", "FormRowField", "HStack", "FormDetailsField"]
 }

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

@@ -16,18 +16,19 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var normalize_form_fields_exports = {};
-__export(normalize_form_fields_exports, {
+
+// packages/dataviews/src/dataform-layouts/normalize-form.ts
+var normalize_form_exports = {};
+__export(normalize_form_exports, {
   DEFAULT_LAYOUT: () => DEFAULT_LAYOUT,
-  default: () => normalizeFormFields,
-  normalizeLayout: () => normalizeLayout
+  default: () => normalize_form_default
 });
-module.exports = __toCommonJS(normalize_form_fields_exports);
-const DEFAULT_LAYOUT = {
+module.exports = __toCommonJS(normalize_form_exports);
+var DEFAULT_LAYOUT = {
   type: "regular",
   labelPosition: "top"
 };
-const normalizeCardSummaryField = (sum) => {
+var normalizeCardSummaryField = (sum) => {
   if (typeof sum === "string") {
     return [{ id: sum, visibility: "when-collapsed" }];
   }
@@ -60,7 +61,8 @@ function normalizeLayout(layout) {
         type: "card",
         withHeader: false,
         isOpened: true,
-        summary: []
+        summary: [],
+        isCollapsible: false
       };
     } else {
       const summary = layout.summary ?? [];
@@ -68,7 +70,8 @@ function normalizeLayout(layout) {
         type: "card",
         withHeader: true,
         isOpened: typeof layout.isOpened === "boolean" ? layout.isOpened : true,
-        summary: normalizeCardSummaryField(summary)
+        summary: normalizeCardSummaryField(summary),
+        isCollapsible: layout.isCollapsible === void 0 ? true : layout.isCollapsible
       };
     }
   } else if (layout?.type === "row") {
@@ -77,28 +80,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;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  DEFAULT_LAYOUT,
-  normalizeLayout
+  DEFAULT_LAYOUT
 });
-//# sourceMappingURL=normalize-form-fields.js.map
+//# sourceMappingURL=normalize-form.js.map

package/build/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": "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",
+  "names": []
+}

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

@@ -26,20 +26,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/dataviews/src/dataform-layouts/panel/dropdown.tsx
 var dropdown_exports = {};
 __export(dropdown_exports, {
   default: () => dropdown_default
 });
 module.exports = __toCommonJS(dropdown_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_components = require("@wordpress/components");
 var import_i18n = require("@wordpress/i18n");
 var import_element = require("@wordpress/element");
 var import_icons = require("@wordpress/icons");
 var import_data_form_layout = require("../data-form-layout");
-var import_is_combined_field = require("../is-combined-field");
-var import_normalize_form_fields = require("../normalize-form-fields");
+var import_normalize_form = require("../normalize-form");
 var import_summary_button = __toESM(require("./summary-button"));
+var import_jsx_runtime = require("react/jsx-runtime");
 function DropdownHeader({
   title,
   onClose
@@ -75,13 +76,13 @@ function PanelDropdown({
   fieldDefinition,
   popoverAnchor
 }) {
-  const fieldLabel = (0, import_is_combined_field.isCombinedField)(field) ? field.label : fieldDefinition?.label;
+  const fieldLabel = !!field.children ? field.label : fieldDefinition?.label;
   const form = (0, import_element.useMemo)(
     () => ({
-      layout: import_normalize_form_fields.DEFAULT_LAYOUT,
-      fields: (0, import_is_combined_field.isCombinedField)(field) ? field.children : (
+      layout: import_normalize_form.DEFAULT_LAYOUT,
+      fields: !!field.children ? field.children : (
         // If not explicit children return the field id itself.
-        [{ id: field.id }]
+        [{ id: field.id, layout: import_normalize_form.DEFAULT_LAYOUT }]
       )
     }),
     [field]
@@ -90,7 +91,7 @@ function PanelDropdown({
     if (validity === void 0) {
       return void 0;
     }
-    if ((0, import_is_combined_field.isCombinedField)(field)) {
+    if (!!field.children) {
       return validity?.children;
     }
     return { [field.id]: validity };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/dataform-layouts/panel/dropdown.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\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';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldValidity,\n\tForm,\n\tFormField,\n\tFormValidity,\n\tNormalizedField,\n} from '../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { isCombinedField } from '../is-combined-field';\nimport { DEFAULT_LAYOUT } from '../normalize-form-fields';\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<VStack\n\t\t\tclassName=\"dataforms-layouts-panel__dropdown-header\"\n\t\t\tspacing={ 4 }\n\t\t>\n\t\t\t<HStack alignment=\"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 />\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</HStack>\n\t\t</VStack>\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}: {\n\tdata: Item;\n\tfield: FormField;\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} ) {\n\tconst fieldLabel = isCombinedField( field )\n\t\t? field.label\n\t\t: fieldDefinition?.label;\n\n\tconst form: Form = useMemo(\n\t\t(): Form => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: isCombinedField( field )\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 } ],\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 ( isCombinedField( field ) ) {\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\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"dataforms-layouts-panel__field-dropdown\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tfocusOnMount\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={ onToggle }\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<DataFormLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalidity={ formValidity }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( FieldLayout, childField, childFieldValidity ) => (\n\t\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\t\t\t( form?.fields ?? [] ).length < 2\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</DataFormLayout>\n\t\t\t\t</>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default PanelDropdown;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CG;AAvCH,wBAOO;AACP,kBAAmB;AACnB,qBAAwB;AACxB,mBAA2B;AAY3B,8BAA+B;AAC/B,+BAAgC;AAChC,mCAA+B;AAC/B,4BAA0B;AAE1B,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AACD,GAGI;AACH,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MAEV,uDAAC,kBAAAC,sBAAA,EAAO,WAAU,UACf;AAAA,iBACD,4CAAC,kBAAAC,uBAAA,EAAQ,OAAQ,GAAI,MAAO,IACzB,iBACH;AAAA,QAED,4CAAC,kBAAAC,sBAAA,EAAO;AAAA,QACN,WACD;AAAA,UAAC;AAAA;AAAA,YACA,WAAQ,gBAAI,OAAQ;AAAA,YACpB,MAAO;AAAA,YACP,SAAU;AAAA,YACV,MAAK;AAAA;AAAA,QACN;AAAA,SAEF;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,cAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACD,GASI;AACH,QAAM,iBAAa,0CAAiB,KAAM,IACvC,MAAM,QACN,iBAAiB;AAEpB,QAAM,WAAa;AAAA,IAClB,OAAc;AAAA,MACb,QAAQ;AAAA,MACR,YAAQ,0CAAiB,KAAM,IAC5B,MAAM;AAAA;AAAA,QAEN,CAAE,EAAE,IAAI,MAAM,GAAG,CAAE;AAAA;AAAA,IACvB;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AACA,QAAM,mBAAe,wBAAS,MAAoB;AACjD,QAAK,aAAa,QAAY;AAC7B,aAAO;AAAA,IACR;AAEA,YAAK,0CAAiB,KAAM,GAAI;AAC/B,aAAO,UAAU;AAAA,IAClB;AAEA,WAAO,EAAE,CAAE,MAAM,EAAG,GAAG,SAAS;AAAA,EACjC,GAAG,CAAE,UAAU,KAAM,CAAE;AAGvB,QAAM,mBAAe;AAAA,IACpB,OAAQ;AAAA;AAAA;AAAA,MAGP,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,IACR;AAAA,IACA,CAAE,aAAc;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,kBAAiB;AAAA,MACjB;AAAA,MACA,cAAY;AAAA,MACZ,aAAc;AAAA,QACb,MAAM;AAAA,QACN,SAAS;AAAA,QACT,iBAAiB;AAAA,MAClB;AAAA,MACA,cAAe,CAAE,EAAE,QAAQ,SAAS,MACnC;AAAA,QAAC,sBAAAC;AAAA,QAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAW,gBAAgB,aAAa;AAAA,UACxC,SAAU;AAAA,UACV,iBAAgB;AAAA;AAAA,MACjB;AAAA,MAED,eAAgB,CAAE,EAAE,QAAQ,MAC3B,4EACC;AAAA,oDAAC,kBAAe,OAAQ,YAAa,SAAoB;AAAA,QACzD;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAW;AAAA,YAET,WAAE,aAAa,YAAY,uBAC5B;AAAA,cAAC;AAAA;AAAA,gBAEA;AAAA,gBACA,OAAQ;AAAA,gBACR;AAAA,gBACA,sBACG,MAAM,UAAU,CAAC,GAAI,SAAS;AAAA,gBAEjC,UAAW;AAAA;AAAA,cAPL,WAAW;AAAA,YAQlB;AAAA;AAAA,QAEF;AAAA,SACD;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,mBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\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';\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<VStack\n\t\t\tclassName=\"dataforms-layouts-panel__dropdown-header\"\n\t\t\tspacing={ 4 }\n\t\t>\n\t\t\t<HStack alignment=\"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 />\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</HStack>\n\t\t</VStack>\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}: {\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} ) {\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\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"dataforms-layouts-panel__field-dropdown\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tfocusOnMount\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={ onToggle }\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<DataFormLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalidity={ formValidity }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( FieldLayout, childField, childFieldValidity ) => (\n\t\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\t\t\t( form?.fields ?? [] ).length < 2\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</DataFormLayout>\n\t\t\t\t</>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default PanelDropdown;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAOO;AACP,kBAAmB;AACnB,qBAAwB;AACxB,mBAA2B;AAY3B,8BAA+B;AAC/B,4BAA+B;AAC/B,4BAA0B;AAcvB;AAZH,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AACD,GAGI;AACH,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MAEV,uDAAC,kBAAAC,sBAAA,EAAO,WAAU,UACf;AAAA,iBACD,4CAAC,kBAAAC,uBAAA,EAAQ,OAAQ,GAAI,MAAO,IACzB,iBACH;AAAA,QAED,4CAAC,kBAAAC,sBAAA,EAAO;AAAA,QACN,WACD;AAAA,UAAC;AAAA;AAAA,YACA,WAAQ,gBAAI,OAAQ;AAAA,YACpB,MAAO;AAAA,YACP,SAAU;AAAA,YACV,MAAK;AAAA;AAAA,QACN;AAAA,SAEF;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,cAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACD,GASI;AACH,QAAM,aAAa,CAAC,CAAE,MAAM,WAAW,MAAM,QAAQ,iBAAiB;AAEtE,QAAM,WAAuB;AAAA,IAC5B,OAAQ;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,CAAC,CAAE,MAAM,WACd,MAAM;AAAA;AAAA,QAEN,CAAE,EAAE,IAAI,MAAM,IAAI,QAAQ,qCAAe,CAAE;AAAA;AAAA,IAC/C;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AACA,QAAM,mBAAe,wBAAS,MAAoB;AACjD,QAAK,aAAa,QAAY;AAC7B,aAAO;AAAA,IACR;AAEA,QAAK,CAAC,CAAE,MAAM,UAAW;AACxB,aAAO,UAAU;AAAA,IAClB;AAEA,WAAO,EAAE,CAAE,MAAM,EAAG,GAAG,SAAS;AAAA,EACjC,GAAG,CAAE,UAAU,KAAM,CAAE;AAGvB,QAAM,mBAAe;AAAA,IACpB,OAAQ;AAAA;AAAA;AAAA,MAGP,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,IACR;AAAA,IACA,CAAE,aAAc;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,kBAAiB;AAAA,MACjB;AAAA,MACA,cAAY;AAAA,MACZ,aAAc;AAAA,QACb,MAAM;AAAA,QACN,SAAS;AAAA,QACT,iBAAiB;AAAA,MAClB;AAAA,MACA,cAAe,CAAE,EAAE,QAAQ,SAAS,MACnC;AAAA,QAAC,sBAAAC;AAAA,QAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAW,gBAAgB,aAAa;AAAA,UACxC,SAAU;AAAA,UACV,iBAAgB;AAAA;AAAA,MACjB;AAAA,MAED,eAAgB,CAAE,EAAE,QAAQ,MAC3B,4EACC;AAAA,oDAAC,kBAAe,OAAQ,YAAa,SAAoB;AAAA,QACzD;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAW;AAAA,YAET,WAAE,aAAa,YAAY,uBAC5B;AAAA,cAAC;AAAA;AAAA,gBAEA;AAAA,gBACA,OAAQ;AAAA,gBACR;AAAA,gBACA,sBACG,MAAM,UAAU,CAAC,GAAI,SAAS;AAAA,gBAEjC,UAAW;AAAA;AAAA,cAPL,WAAW;AAAA,YAQlB;AAAA;AAAA,QAEF;AAAA,SACD;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,mBAAQ;",
   "names": ["VStack", "HStack", "Heading", "Spacer", "SummaryButton"]
 }

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

@@ -26,41 +26,40 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/dataviews/src/dataform-layouts/panel/index.tsx
 var panel_exports = {};
 __export(panel_exports, {
   default: () => FormPanelField
 });
 module.exports = __toCommonJS(panel_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_components = require("@wordpress/components");
 var import_element = require("@wordpress/element");
 var import_dataform_context = __toESM(require("../../components/dataform-context"));
-var import_is_combined_field = require("../is-combined-field");
-var import_normalize_form_fields = require("../normalize-form-fields");
 var import_dropdown = __toESM(require("./dropdown"));
 var import_modal = __toESM(require("./modal"));
 var import_get_summary_fields = require("../get-summary-fields");
-const getFieldDefinition = (field, fields) => {
+var import_jsx_runtime = require("react/jsx-runtime");
+var getFieldDefinition = (field, fields) => {
   const fieldDefinition = fields.find((_field) => _field.id === field.id);
   if (!fieldDefinition) {
     return fields.find((_field) => {
-      if ((0, import_is_combined_field.isCombinedField)(field)) {
+      if (!!field.children) {
         const simpleChildren = field.children.filter(
-          (child) => typeof child === "string" || !(0, import_is_combined_field.isCombinedField)(child)
+          (child) => !child.children
         );
         if (simpleChildren.length === 0) {
           return false;
         }
-        const firstChildFieldId = typeof simpleChildren[0] === "string" ? simpleChildren[0] : simpleChildren[0].id;
-        return _field.id === firstChildFieldId;
+        return _field.id === simpleChildren[0].id;
       }
       return _field.id === field.id;
     });
   }
   return fieldDefinition;
 };
-const getFieldDefinitionAndSummaryFields = (layout, field, fields) => {
+var getFieldDefinitionAndSummaryFields = (layout, field, fields) => {
   const summaryFields = (0, import_get_summary_fields.getSummaryFields)(layout.summary, fields);
   const fieldDefinition = getFieldDefinition(field, fields);
   if (summaryFields.length === 0) {
@@ -81,10 +80,7 @@ function FormPanelField({
   validity
 }) {
   const { fields } = (0, import_element.useContext)(import_dataform_context.default);
-  const layout = (0, import_normalize_form_fields.normalizeLayout)({
-    ...field.layout,
-    type: "panel"
-  });
+  const layout = field.layout;
   const [popoverAnchor, setPopoverAnchor] = (0, import_element.useState)(
     null
   );
@@ -97,7 +93,7 @@ function FormPanelField({
     "dataforms-layouts-panel__field-label",
     `dataforms-layouts-panel__field-label--label-position-${labelPosition}`
   );
-  const fieldLabel = (0, import_is_combined_field.isCombinedField)(field) ? field.label : fieldDefinition?.label;
+  const fieldLabel = !!field.children ? field.label : fieldDefinition?.label;
   const renderedControl = layout.openAs === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_modal.default,
     {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/dataform-layouts/panel/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useState, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldLayoutProps,\n\tFormField,\n\tNormalizedField,\n\tNormalizedPanelLayout,\n\tPanelLayout,\n\tSimpleFormField,\n} from '../../types';\nimport DataFormContext from '../../components/dataform-context';\nimport { isCombinedField } from '../is-combined-field';\nimport { normalizeLayout } from '../normalize-form-fields';\nimport PanelDropdown from './dropdown';\nimport PanelModal from './modal';\nimport { getSummaryFields } from '../get-summary-fields';\n\nconst getFieldDefinition = < Item, >(\n\tfield: FormField,\n\tfields: NormalizedField< Item >[]\n) => {\n\tconst fieldDefinition = fields.find( ( _field ) => _field.id === field.id );\n\n\tif ( ! fieldDefinition ) {\n\t\treturn fields.find( ( _field ) => {\n\t\t\tif ( isCombinedField( field ) ) {\n\t\t\t\tconst simpleChildren = field.children.filter(\n\t\t\t\t\t( child ): child is string | SimpleFormField =>\n\t\t\t\t\t\ttypeof child === 'string' || ! isCombinedField( child )\n\t\t\t\t);\n\n\t\t\t\tif ( simpleChildren.length === 0 ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tconst firstChildFieldId =\n\t\t\t\t\ttypeof simpleChildren[ 0 ] === 'string'\n\t\t\t\t\t\t? simpleChildren[ 0 ]\n\t\t\t\t\t\t: simpleChildren[ 0 ].id;\n\n\t\t\t\treturn _field.id === firstChildFieldId;\n\t\t\t}\n\n\t\t\treturn _field.id === field.id;\n\t\t} );\n\t}\n\treturn fieldDefinition;\n};\n\n/**\n * Determines the field definition and summary fields for a panel layout.\n *\n * Summary fields are determined with the following priority:\n * 1. Use layout.summary fields if they exist\n * 2. Fall back to the field definition that matches the form field's id\n * 3. If the form field id doesn't exist, pick the first child field\n * 4. If no field definition is found, return empty summary fields\n *\n * @param layout - The normalized panel layout configuration\n * @param field  - The form field to get definition for\n * @param fields - Array of normalized field definitions\n * @return Object containing fieldDefinition and summaryFields\n */\nconst getFieldDefinitionAndSummaryFields = < Item, >(\n\tlayout: NormalizedPanelLayout,\n\tfield: FormField,\n\tfields: NormalizedField< Item >[]\n) => {\n\tconst summaryFields = getSummaryFields( layout.summary, fields );\n\tconst fieldDefinition = getFieldDefinition( field, fields );\n\n\tif ( summaryFields.length === 0 ) {\n\t\treturn {\n\t\t\tsummaryFields: fieldDefinition ? [ fieldDefinition ] : [],\n\t\t\tfieldDefinition,\n\t\t};\n\t}\n\n\treturn {\n\t\tsummaryFields,\n\t\tfieldDefinition,\n\t};\n};\n\nexport default function FormPanelField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\n\tconst layout: NormalizedPanelLayout = normalizeLayout( {\n\t\t...field.layout,\n\t\ttype: 'panel',\n\t} as PanelLayout ) as NormalizedPanelLayout;\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\n\tconst { fieldDefinition, summaryFields } =\n\t\tgetFieldDefinitionAndSummaryFields( layout, field, fields );\n\n\tif ( ! fieldDefinition ) {\n\t\treturn null;\n\t}\n\n\tconst labelPosition = layout.labelPosition;\n\tconst labelClassName = clsx(\n\t\t'dataforms-layouts-panel__field-label',\n\t\t`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`\n\t);\n\tconst fieldLabel = isCombinedField( field )\n\t\t? field.label\n\t\t: fieldDefinition?.label;\n\n\tconst renderedControl =\n\t\tlayout.openAs === 'modal' ? (\n\t\t\t<PanelModal\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t/>\n\t\t) : (\n\t\t\t<PanelDropdown\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalidity={ validity }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t/>\n\t\t);\n\n\tif ( labelPosition === 'top' ) {\n\t\treturn (\n\t\t\t<VStack className=\"dataforms-layouts-panel__field\" spacing={ 0 }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ labelClassName }\n\t\t\t\t\tstyle={ { paddingBottom: 0 } }\n\t\t\t\t>\n\t\t\t\t\t{ fieldLabel }\n\t\t\t\t</div>\n\t\t\t\t<div className=\"dataforms-layouts-panel__field-control\">\n\t\t\t\t\t{ renderedControl }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t);\n\t}\n\n\tif ( labelPosition === 'none' ) {\n\t\treturn (\n\t\t\t<div className=\"dataforms-layouts-panel__field\">\n\t\t\t\t{ renderedControl }\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Defaults to label position side.\n\treturn (\n\t\t<HStack\n\t\t\tref={ setPopoverAnchor }\n\t\t\tclassName=\"dataforms-layouts-panel__field\"\n\t\t>\n\t\t\t<div className={ labelClassName }>{ fieldLabel }</div>\n\t\t\t<div className=\"dataforms-layouts-panel__field-control\">\n\t\t\t\t{ renderedControl }\n\t\t\t</div>\n\t\t</HStack>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useState, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldLayoutProps,\n\tNormalizedField,\n\tNormalizedFormField,\n\tNormalizedPanelLayout,\n} from '../../types';\nimport DataFormContext from '../../components/dataform-context';\nimport PanelDropdown from './dropdown';\nimport PanelModal from './modal';\nimport { getSummaryFields } from '../get-summary-fields';\n\nconst getFieldDefinition = < Item, >(\n\tfield: NormalizedFormField,\n\tfields: NormalizedField< Item >[]\n) => {\n\tconst fieldDefinition = fields.find( ( _field ) => _field.id === field.id );\n\n\tif ( ! fieldDefinition ) {\n\t\treturn fields.find( ( _field ) => {\n\t\t\tif ( !! field.children ) {\n\t\t\t\tconst simpleChildren = field.children.filter(\n\t\t\t\t\t( child ) => ! child.children\n\t\t\t\t);\n\n\t\t\t\tif ( simpleChildren.length === 0 ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn _field.id === simpleChildren[ 0 ].id;\n\t\t\t}\n\n\t\t\treturn _field.id === field.id;\n\t\t} );\n\t}\n\n\treturn fieldDefinition;\n};\n\n/**\n * Determines the field definition and summary fields for a panel layout.\n *\n * Summary fields are determined with the following priority:\n * 1. Use layout.summary fields if they exist\n * 2. Fall back to the field definition that matches the form field's id\n * 3. If the form field id doesn't exist, pick the first child field\n * 4. If no field definition is found, return empty summary fields\n *\n * @param layout - The normalized panel layout configuration\n * @param field  - The form field to get definition for\n * @param fields - Array of normalized field definitions\n * @return Object containing fieldDefinition and summaryFields\n */\nconst getFieldDefinitionAndSummaryFields = < Item, >(\n\tlayout: NormalizedPanelLayout,\n\tfield: NormalizedFormField,\n\tfields: NormalizedField< Item >[]\n) => {\n\tconst summaryFields = getSummaryFields( layout.summary, fields );\n\tconst fieldDefinition = getFieldDefinition( field, fields );\n\n\tif ( summaryFields.length === 0 ) {\n\t\treturn {\n\t\t\tsummaryFields: fieldDefinition ? [ fieldDefinition ] : [],\n\t\t\tfieldDefinition,\n\t\t};\n\t}\n\n\treturn {\n\t\tsummaryFields,\n\t\tfieldDefinition,\n\t};\n};\n\nexport default function FormPanelField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedPanelLayout;\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\n\tconst { fieldDefinition, summaryFields } =\n\t\tgetFieldDefinitionAndSummaryFields( layout, field, fields );\n\n\tif ( ! fieldDefinition ) {\n\t\treturn null;\n\t}\n\n\tconst labelPosition = layout.labelPosition;\n\tconst labelClassName = clsx(\n\t\t'dataforms-layouts-panel__field-label',\n\t\t`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`\n\t);\n\tconst fieldLabel = !! field.children ? field.label : fieldDefinition?.label;\n\n\tconst renderedControl =\n\t\tlayout.openAs === 'modal' ? (\n\t\t\t<PanelModal\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t/>\n\t\t) : (\n\t\t\t<PanelDropdown\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalidity={ validity }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t/>\n\t\t);\n\n\tif ( labelPosition === 'top' ) {\n\t\treturn (\n\t\t\t<VStack className=\"dataforms-layouts-panel__field\" spacing={ 0 }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ labelClassName }\n\t\t\t\t\tstyle={ { paddingBottom: 0 } }\n\t\t\t\t>\n\t\t\t\t\t{ fieldLabel }\n\t\t\t\t</div>\n\t\t\t\t<div className=\"dataforms-layouts-panel__field-control\">\n\t\t\t\t\t{ renderedControl }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t);\n\t}\n\n\tif ( labelPosition === 'none' ) {\n\t\treturn (\n\t\t\t<div className=\"dataforms-layouts-panel__field\">\n\t\t\t\t{ renderedControl }\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Defaults to label position side.\n\treturn (\n\t\t<HStack\n\t\t\tref={ setPopoverAnchor }\n\t\t\tclassName=\"dataforms-layouts-panel__field\"\n\t\t>\n\t\t\t<div className={ labelClassName }>{ fieldLabel }</div>\n\t\t\t<div className=\"dataforms-layouts-panel__field-control\">\n\t\t\t\t{ renderedControl }\n\t\t\t</div>\n\t\t</HStack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAGO;AACP,qBAAqC;AAWrC,8BAA4B;AAC5B,sBAA0B;AAC1B,mBAAuB;AACvB,gCAAiC;AA+F9B;AA7FH,IAAM,qBAAqB,CAC1B,OACA,WACI;AACJ,QAAM,kBAAkB,OAAO,KAAM,CAAE,WAAY,OAAO,OAAO,MAAM,EAAG;AAE1E,MAAK,CAAE,iBAAkB;AACxB,WAAO,OAAO,KAAM,CAAE,WAAY;AACjC,UAAK,CAAC,CAAE,MAAM,UAAW;AACxB,cAAM,iBAAiB,MAAM,SAAS;AAAA,UACrC,CAAE,UAAW,CAAE,MAAM;AAAA,QACtB;AAEA,YAAK,eAAe,WAAW,GAAI;AAClC,iBAAO;AAAA,QACR;AAEA,eAAO,OAAO,OAAO,eAAgB,CAAE,EAAE;AAAA,MAC1C;AAEA,aAAO,OAAO,OAAO,MAAM;AAAA,IAC5B,CAAE;AAAA,EACH;AAEA,SAAO;AACR;AAgBA,IAAM,qCAAqC,CAC1C,QACA,OACA,WACI;AACJ,QAAM,oBAAgB,4CAAkB,OAAO,SAAS,MAAO;AAC/D,QAAM,kBAAkB,mBAAoB,OAAO,MAAO;AAE1D,MAAK,cAAc,WAAW,GAAI;AACjC,WAAO;AAAA,MACN,eAAe,kBAAkB,CAAE,eAAgB,IAAI,CAAC;AAAA,MACxD;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;AAEe,SAAR,eAAyC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,EAAE,OAAO,QAAI,2BAAY,wBAAAA,OAAgB;AAC/C,QAAM,SAAS,MAAM;AAIrB,QAAM,CAAE,eAAe,gBAAiB,QAAI;AAAA,IAC3C;AAAA,EACD;AAEA,QAAM,EAAE,iBAAiB,cAAc,IACtC,mCAAoC,QAAQ,OAAO,MAAO;AAE3D,MAAK,CAAE,iBAAkB;AACxB,WAAO;AAAA,EACR;AAEA,QAAM,gBAAgB,OAAO;AAC7B,QAAM,qBAAiB,YAAAC;AAAA,IACtB;AAAA,IACA,wDAAyD,aAAc;AAAA,EACxE;AACA,QAAM,aAAa,CAAC,CAAE,MAAM,WAAW,MAAM,QAAQ,iBAAiB;AAEtE,QAAM,kBACL,OAAO,WAAW,UACjB;AAAA,IAAC,aAAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD,IAEA;AAAA,IAAC,gBAAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAGF,MAAK,kBAAkB,OAAQ;AAC9B,WACC,6CAAC,kBAAAC,sBAAA,EAAO,WAAU,kCAAiC,SAAU,GAC5D;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,WAAY;AAAA,UACZ,OAAQ,EAAE,eAAe,EAAE;AAAA,UAEzB;AAAA;AAAA,MACH;AAAA,MACA,4CAAC,SAAI,WAAU,0CACZ,2BACH;AAAA,OACD;AAAA,EAEF;AAEA,MAAK,kBAAkB,QAAS;AAC/B,WACC,4CAAC,SAAI,WAAU,kCACZ,2BACH;AAAA,EAEF;AAGA,SACC;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,KAAM;AAAA,MACN,WAAU;AAAA,MAEV;AAAA,oDAAC,SAAI,WAAY,gBAAmB,sBAAY;AAAA,QAChD,4CAAC,SAAI,WAAU,0CACZ,2BACH;AAAA;AAAA;AAAA,EACD;AAEF;",
   "names": ["DataFormContext", "clsx", "PanelModal", "PanelDropdown", "VStack", "HStack"]
 }