@wordpress/dataviews 9.1.1-next.f56bd8138.0 → 10.0.1-next.47f435fc9.0

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

@@ -0,0 +1,79 @@
+const DEFAULT_LAYOUT = {
+  type: "regular",
+  labelPosition: "top"
+};
+const normalizeCardSummaryField = (sum) => {
+  if (typeof sum === "string") {
+    return [{ id: sum, visibility: "when-collapsed" }];
+  }
+  return sum.map((item) => {
+    if (typeof item === "string") {
+      return { id: item, visibility: "when-collapsed" };
+    }
+    return { id: item.id, visibility: item.visibility };
+  });
+};
+function normalizeLayout(layout) {
+  let normalizedLayout = DEFAULT_LAYOUT;
+  if (layout?.type === "regular") {
+    normalizedLayout = {
+      type: "regular",
+      labelPosition: layout?.labelPosition ?? "top"
+    };
+  } else if (layout?.type === "panel") {
+    const summary = layout.summary ?? [];
+    const normalizedSummary = Array.isArray(summary) ? summary : [summary];
+    normalizedLayout = {
+      type: "panel",
+      labelPosition: layout?.labelPosition ?? "side",
+      openAs: layout?.openAs ?? "dropdown",
+      summary: normalizedSummary
+    };
+  } else if (layout?.type === "card") {
+    if (layout.withHeader === false) {
+      normalizedLayout = {
+        type: "card",
+        withHeader: false,
+        isOpened: true,
+        summary: []
+      };
+    } else {
+      const summary = layout.summary ?? [];
+      normalizedLayout = {
+        type: "card",
+        withHeader: true,
+        isOpened: typeof layout.isOpened === "boolean" ? layout.isOpened : true,
+        summary: normalizeCardSummaryField(summary)
+      };
+    }
+  } else if (layout?.type === "row") {
+    normalizedLayout = {
+      type: "row",
+      alignment: layout?.alignment ?? "center",
+      styles: layout?.styles ?? {}
+    };
+  }
+  return normalizedLayout;
+}
+function normalizeFormFields(form) {
+  const formLayout = normalizeLayout(form?.layout);
+  return (form.fields ?? []).map((field) => {
+    if (typeof field === "string") {
+      return {
+        id: field,
+        layout: formLayout
+      };
+    }
+    const fieldLayout = field.layout ? normalizeLayout(field.layout) : formLayout;
+    return {
+      ...field,
+      layout: fieldLayout
+    };
+  });
+}
+export {
+  DEFAULT_LAYOUT,
+  normalizeFormFields as default,
+  normalizeLayout
+};
+//# sourceMappingURL=normalize-form-fields.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/dataform-layouts/normalize-form-fields.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type {\n\tForm,\n\tLayout,\n\tNormalizedLayout,\n\tNormalizedRegularLayout,\n\tNormalizedPanelLayout,\n\tNormalizedCardLayout,\n\tNormalizedRowLayout,\n\tNormalizedCardSummaryField,\n\tCardSummaryField,\n} from '../types';\n\ninterface NormalizedFormField {\n\tid: string;\n\tlayout: Layout;\n}\n\nexport const DEFAULT_LAYOUT: NormalizedLayout = {\n\ttype: 'regular',\n\tlabelPosition: 'top',\n};\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 */\nexport function 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} 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} 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}\n\n\treturn normalizedLayout;\n}\n\nexport default function normalizeFormFields(\n\tform: Form\n): NormalizedFormField[] {\n\tconst formLayout = normalizeLayout( form?.layout );\n\n\treturn ( form.fields ?? [] ).map( ( field ) => {\n\t\tif ( typeof field === 'string' ) {\n\t\t\treturn {\n\t\t\t\tid: field,\n\t\t\t\tlayout: formLayout,\n\t\t\t};\n\t\t}\n\n\t\tconst fieldLayout = field.layout\n\t\t\t? normalizeLayout( field.layout )\n\t\t\t: formLayout;\n\t\treturn {\n\t\t\t...field,\n\t\t\tlayout: fieldLayout,\n\t\t};\n\t} );\n}\n"],
+  "mappings": "AAoBO,MAAM,iBAAmC;AAAA,EAC/C,MAAM;AAAA,EACN,eAAe;AAChB;AAEA,MAAM,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;AAQO,SAAS,gBAAiB,QAAoC;AACpE,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,MACX;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,MAC7C;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;AAEA,SAAO;AACR;AAEe,SAAR,oBACN,MACwB;AACxB,QAAM,aAAa,gBAAiB,MAAM,MAAO;AAEjD,UAAS,KAAK,UAAU,CAAC,GAAI,IAAK,CAAE,UAAW;AAC9C,QAAK,OAAO,UAAU,UAAW;AAChC,aAAO;AAAA,QACN,IAAI;AAAA,QACJ,QAAQ;AAAA,MACT;AAAA,IACD;AAEA,UAAM,cAAc,MAAM,SACvB,gBAAiB,MAAM,MAAO,IAC9B;AACH,WAAO;AAAA,MACN,GAAG;AAAA,MACH,QAAQ;AAAA,IACT;AAAA,EACD,CAAE;AACH;",
+  "names": []
+}

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

@@ -0,0 +1,124 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  __experimentalVStack as VStack,
+  __experimentalHStack as HStack,
+  __experimentalHeading as Heading,
+  __experimentalSpacer as Spacer,
+  Dropdown,
+  Button
+} from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { useMemo } from "@wordpress/element";
+import { closeSmall } from "@wordpress/icons";
+import { DataFormLayout } from "../data-form-layout";
+import { isCombinedField } from "../is-combined-field";
+import { DEFAULT_LAYOUT } from "../normalize-form-fields";
+import SummaryButton from "./summary-button";
+function DropdownHeader({
+  title,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx(
+    VStack,
+    {
+      className: "dataforms-layouts-panel__dropdown-header",
+      spacing: 4,
+      children: /* @__PURE__ */ jsxs(HStack, { alignment: "center", children: [
+        title && /* @__PURE__ */ jsx(Heading, { level: 2, size: 13, children: title }),
+        /* @__PURE__ */ jsx(Spacer, {}),
+        onClose && /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: __("Close"),
+            icon: closeSmall,
+            onClick: onClose,
+            size: "small"
+          }
+        )
+      ] })
+    }
+  );
+}
+function PanelDropdown({
+  fieldDefinition,
+  summaryFields,
+  popoverAnchor,
+  labelPosition = "side",
+  data,
+  onChange,
+  field
+}) {
+  const fieldLabel = isCombinedField(field) ? field.label : fieldDefinition?.label;
+  const form = useMemo(
+    () => ({
+      layout: DEFAULT_LAYOUT,
+      fields: isCombinedField(field) ? field.children : (
+        // If not explicit children return the field id itself.
+        [{ id: field.id }]
+      )
+    }),
+    [field]
+  );
+  const popoverProps = 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]
+  );
+  return /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      contentClassName: "dataforms-layouts-panel__field-dropdown",
+      popoverProps,
+      focusOnMount: true,
+      toggleProps: {
+        size: "compact",
+        variant: "tertiary",
+        tooltipPosition: "middle left"
+      },
+      renderToggle: ({ isOpen, onToggle }) => /* @__PURE__ */ jsx(
+        SummaryButton,
+        {
+          summaryFields,
+          data,
+          labelPosition,
+          fieldLabel,
+          disabled: fieldDefinition.readOnly === true,
+          onClick: onToggle,
+          "aria-expanded": isOpen
+        }
+      ),
+      renderContent: ({ onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownHeader, { title: fieldLabel, onClose }),
+        /* @__PURE__ */ jsx(
+          DataFormLayout,
+          {
+            data,
+            form,
+            onChange,
+            children: (FieldLayout, nestedField) => /* @__PURE__ */ jsx(
+              FieldLayout,
+              {
+                data,
+                field: nestedField,
+                onChange,
+                hideLabelFromVision: (form?.fields ?? []).length < 2
+              },
+              nestedField.id
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+var dropdown_default = PanelDropdown;
+export {
+  dropdown_default as default
+};
+//# sourceMappingURL=dropdown.js.map

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

@@ -0,0 +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 { Form, FormField, NormalizedField } 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\tfieldDefinition,\n\tsummaryFields,\n\tpopoverAnchor,\n\tlabelPosition = 'side',\n\tdata,\n\tonChange,\n\tfield,\n}: {\n\tfieldDefinition: NormalizedField< Item >;\n\tsummaryFields: NormalizedField< Item >[];\n\tpopoverAnchor: HTMLElement | null;\n\tlabelPosition: 'side' | 'top' | 'none';\n\tdata: Item;\n\tonChange: ( value: any ) => void;\n\tfield: FormField;\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\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>\n\t\t\t\t\t\t{ ( FieldLayout, nestedField ) => (\n\t\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\t\tkey={ nestedField.id }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tfield={ nestedField }\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/>\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": "AAoCG,SAuFC,UArFC,KAFF;AAjCH;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;AACnB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAM3B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,OAAO,mBAAmB;AAE1B,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AACD,GAGI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MAEV,+BAAC,UAAO,WAAU,UACf;AAAA,iBACD,oBAAC,WAAQ,OAAQ,GAAI,MAAO,IACzB,iBACH;AAAA,QAED,oBAAC,UAAO;AAAA,QACN,WACD;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,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,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACD,GAQI;AACH,QAAM,aAAa,gBAAiB,KAAM,IACvC,MAAM,QACN,iBAAiB;AAEpB,QAAM,OAAa;AAAA,IAClB,OAAc;AAAA,MACb,QAAQ;AAAA,MACR,QAAQ,gBAAiB,KAAM,IAC5B,MAAM;AAAA;AAAA,QAEN,CAAE,EAAE,IAAI,MAAM,GAAG,CAAE;AAAA;AAAA,IACvB;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAGA,QAAM,eAAe;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;AAAA;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,iCACC;AAAA,4BAAC,kBAAe,OAAQ,YAAa,SAAoB;AAAA,QACzD;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEE,WAAE,aAAa,gBAChB;AAAA,cAAC;AAAA;AAAA,gBAEA;AAAA,gBACA,OAAQ;AAAA,gBACR;AAAA,gBACA,sBACG,MAAM,UAAU,CAAC,GAAI,SAAS;AAAA;AAAA,cAL3B,YAAY;AAAA,YAOnB;AAAA;AAAA,QAEF;AAAA,SACD;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,mBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import {
+  __experimentalVStack as VStack,
+  __experimentalHStack as HStack
+} from "@wordpress/components";
+import { useState, useContext } from "@wordpress/element";
+import DataFormContext from "../../components/dataform-context";
+import { isCombinedField } from "../is-combined-field";
+import { normalizeLayout } from "../normalize-form-fields";
+import PanelDropdown from "./dropdown";
+import PanelModal from "./modal";
+import { getSummaryFields } from "../get-summary-fields";
+const getFieldDefinition = (field, fields) => {
+  const fieldDefinition = fields.find((_field) => _field.id === field.id);
+  if (!fieldDefinition) {
+    return fields.find((_field) => {
+      if (isCombinedField(field)) {
+        const simpleChildren = field.children.filter(
+          (child) => typeof child === "string" || !isCombinedField(child)
+        );
+        if (simpleChildren.length === 0) {
+          return false;
+        }
+        const firstChildFieldId = typeof simpleChildren[0] === "string" ? simpleChildren[0] : simpleChildren[0].id;
+        return _field.id === firstChildFieldId;
+      }
+      return _field.id === field.id;
+    });
+  }
+  return fieldDefinition;
+};
+const getFieldDefinitionAndSummaryFields = (layout, field, fields) => {
+  const summaryFields = getSummaryFields(layout.summary, fields);
+  const fieldDefinition = getFieldDefinition(field, fields);
+  if (summaryFields.length === 0) {
+    return {
+      summaryFields: fieldDefinition ? [fieldDefinition] : [],
+      fieldDefinition
+    };
+  }
+  return {
+    summaryFields,
+    fieldDefinition
+  };
+};
+function FormPanelField({
+  data,
+  field,
+  onChange
+}) {
+  const { fields } = useContext(DataFormContext);
+  const layout = normalizeLayout({
+    ...field.layout,
+    type: "panel"
+  });
+  const [popoverAnchor, setPopoverAnchor] = useState(
+    null
+  );
+  const { fieldDefinition, summaryFields } = getFieldDefinitionAndSummaryFields(layout, field, fields);
+  if (!fieldDefinition) {
+    return null;
+  }
+  const labelPosition = layout.labelPosition;
+  const labelClassName = clsx(
+    "dataforms-layouts-panel__field-label",
+    `dataforms-layouts-panel__field-label--label-position-${labelPosition}`
+  );
+  const fieldLabel = isCombinedField(field) ? field.label : fieldDefinition?.label;
+  const renderedControl = layout.openAs === "modal" ? /* @__PURE__ */ jsx(
+    PanelModal,
+    {
+      field,
+      fieldDefinition,
+      summaryFields,
+      data,
+      onChange,
+      labelPosition
+    }
+  ) : /* @__PURE__ */ jsx(
+    PanelDropdown,
+    {
+      field,
+      popoverAnchor,
+      fieldDefinition,
+      summaryFields,
+      data,
+      onChange,
+      labelPosition
+    }
+  );
+  if (labelPosition === "top") {
+    return /* @__PURE__ */ jsxs(VStack, { className: "dataforms-layouts-panel__field", spacing: 0, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: labelClassName,
+          style: { paddingBottom: 0 },
+          children: fieldLabel
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-panel__field-control", children: renderedControl })
+    ] });
+  }
+  if (labelPosition === "none") {
+    return /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-panel__field", children: renderedControl });
+  }
+  return /* @__PURE__ */ jsxs(
+    HStack,
+    {
+      ref: setPopoverAnchor,
+      className: "dataforms-layouts-panel__field",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: labelClassName, children: fieldLabel }),
+        /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-panel__field-control", children: renderedControl })
+      ]
+    }
+  );
+}
+export {
+  FormPanelField as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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}: 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\tfield={ field }\n\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tdata={ data }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t/>\n\t\t) : (\n\t\t\t<PanelDropdown\n\t\t\t\tfield={ field }\n\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tdata={ data }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tlabelPosition={ labelPosition }\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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",
+  "names": []
+}

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

@@ -0,0 +1,141 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import deepMerge from "deepmerge";
+import {
+  __experimentalHStack as HStack,
+  __experimentalSpacer as Spacer,
+  Button,
+  Modal
+} from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { useState, useMemo } from "@wordpress/element";
+import { DataFormLayout } from "../data-form-layout";
+import { isCombinedField } from "../is-combined-field";
+import { DEFAULT_LAYOUT } from "../normalize-form-fields";
+import SummaryButton from "./summary-button";
+function ModalContent({
+  data,
+  form,
+  fieldLabel,
+  onChange,
+  onClose
+}) {
+  const [changes, setChanges] = useState({});
+  const modalData = useMemo(() => {
+    return deepMerge(data, changes);
+  }, [data, changes]);
+  const onApply = () => {
+    onChange(changes);
+    onClose();
+  };
+  const handleOnChange = (newValue) => {
+    setChanges((prev) => deepMerge(prev, newValue));
+  };
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      className: "dataforms-layouts-panel__modal",
+      onRequestClose: onClose,
+      isFullScreen: false,
+      title: fieldLabel,
+      size: "medium",
+      children: [
+        /* @__PURE__ */ jsx(
+          DataFormLayout,
+          {
+            data: modalData,
+            form,
+            onChange: handleOnChange,
+            children: (FieldLayout, nestedField) => /* @__PURE__ */ jsx(
+              FieldLayout,
+              {
+                data: modalData,
+                field: nestedField,
+                onChange: handleOnChange,
+                hideLabelFromVision: (form?.fields ?? []).length < 2
+              },
+              nestedField.id
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          HStack,
+          {
+            className: "dataforms-layouts-panel__modal-footer",
+            spacing: 3,
+            children: [
+              /* @__PURE__ */ jsx(Spacer, {}),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "tertiary",
+                  onClick: onClose,
+                  __next40pxDefaultSize: true,
+                  children: __("Cancel")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "primary",
+                  onClick: onApply,
+                  __next40pxDefaultSize: true,
+                  children: __("Apply")
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function PanelModal({
+  fieldDefinition,
+  summaryFields,
+  labelPosition,
+  data,
+  onChange,
+  field
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const fieldLabel = isCombinedField(field) ? field.label : fieldDefinition?.label;
+  const form = useMemo(
+    () => ({
+      layout: DEFAULT_LAYOUT,
+      fields: isCombinedField(field) ? field.children : (
+        // If not explicit children return the field id itself.
+        [{ id: field.id }]
+      )
+    }),
+    [field]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SummaryButton,
+      {
+        summaryFields,
+        data,
+        labelPosition,
+        fieldLabel,
+        disabled: fieldDefinition.readOnly === true,
+        onClick: () => setIsOpen(true),
+        "aria-expanded": isOpen
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(
+      ModalContent,
+      {
+        data,
+        form,
+        fieldLabel: fieldLabel ?? "",
+        onChange,
+        onClose: () => setIsOpen(false)
+      }
+    )
+  ] });
+}
+var modal_default = PanelModal;
+export {
+  modal_default as default
+};
+//# sourceMappingURL=modal.js.map

package/build-module/dataform-layouts/panel/modal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/dataform-layouts/panel/modal.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { Form, FormField, NormalizedField } 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 ModalContent< Item >( {\n\tdata,\n\tform,\n\tfieldLabel,\n\tonChange,\n\tonClose,\n}: {\n\tdata: Item;\n\tform: Form;\n\tfieldLabel: string;\n\tonChange: ( data: Partial< Item > ) => void;\n\tonClose: () => void;\n} ) {\n\tconst [ changes, setChanges ] = useState< Partial< Item > >( {} );\n\tconst modalData = useMemo( () => {\n\t\treturn deepMerge( data, changes );\n\t}, [ data, changes ] );\n\n\tconst onApply = () => {\n\t\tonChange( changes );\n\t\tonClose();\n\t};\n\n\tconst handleOnChange = ( newValue: Partial< Item > ) => {\n\t\tsetChanges( ( prev ) => deepMerge( prev, newValue ) );\n\t};\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"dataforms-layouts-panel__modal\"\n\t\t\tonRequestClose={ onClose }\n\t\t\tisFullScreen={ false }\n\t\t\ttitle={ fieldLabel }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t<DataFormLayout\n\t\t\t\tdata={ modalData }\n\t\t\t\tform={ form }\n\t\t\t\tonChange={ handleOnChange }\n\t\t\t>\n\t\t\t\t{ ( FieldLayout, nestedField ) => (\n\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\tkey={ nestedField.id }\n\t\t\t\t\t\tdata={ modalData }\n\t\t\t\t\t\tfield={ nestedField }\n\t\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\t( form?.fields ?? [] ).length < 2\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</DataFormLayout>\n\t\t\t<HStack\n\t\t\t\tclassName=\"dataforms-layouts-panel__modal-footer\"\n\t\t\t\tspacing={ 3 }\n\t\t\t>\n\t\t\t\t<Spacer />\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ onApply }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t</Button>\n\t\t\t</HStack>\n\t\t</Modal>\n\t);\n}\n\nfunction PanelModal< Item >( {\n\tfieldDefinition,\n\tsummaryFields,\n\tlabelPosition,\n\tdata,\n\tonChange,\n\tfield,\n}: {\n\tfieldDefinition: NormalizedField< Item >;\n\tsummaryFields: NormalizedField< Item >[];\n\tlabelPosition: 'side' | 'top' | 'none';\n\tdata: Item;\n\tonChange: ( value: any ) => void;\n\tfield: FormField;\n} ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\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\n\treturn (\n\t\t<>\n\t\t\t<SummaryButton\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tdata={ data }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tfieldLabel={ fieldLabel }\n\t\t\t\tdisabled={ fieldDefinition.readOnly === true }\n\t\t\t\tonClick={ () => setIsOpen( true ) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t/>\n\t\t\t{ isOpen && (\n\t\t\t\t<ModalContent\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tform={ form as Form }\n\t\t\t\t\tfieldLabel={ fieldLabel ?? '' }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonClose={ () => setIsOpen( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PanelModal;\n"],
+  "mappings": "AAmEK,SAoEH,UApEG,KAWF,YAXE;AAhEL,OAAO,eAAe;AAKtB;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;AACnB,SAAS,UAAU,eAAe;AAMlC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,OAAO,mBAAmB;AAE1B,SAAS,aAAsB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMI;AACH,QAAM,CAAE,SAAS,UAAW,IAAI,SAA6B,CAAC,CAAE;AAChE,QAAM,YAAY,QAAS,MAAM;AAChC,WAAO,UAAW,MAAM,OAAQ;AAAA,EACjC,GAAG,CAAE,MAAM,OAAQ,CAAE;AAErB,QAAM,UAAU,MAAM;AACrB,aAAU,OAAQ;AAClB,YAAQ;AAAA,EACT;AAEA,QAAM,iBAAiB,CAAE,aAA+B;AACvD,eAAY,CAAE,SAAU,UAAW,MAAM,QAAS,CAAE;AAAA,EACrD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,gBAAiB;AAAA,MACjB,cAAe;AAAA,MACf,OAAQ;AAAA,MACR,MAAK;AAAA,MAEL;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,MAAO;AAAA,YACP;AAAA,YACA,UAAW;AAAA,YAET,WAAE,aAAa,gBAChB;AAAA,cAAC;AAAA;AAAA,gBAEA,MAAO;AAAA,gBACP,OAAQ;AAAA,gBACR,UAAW;AAAA,gBACX,sBACG,MAAM,UAAU,CAAC,GAAI,SAAS;AAAA;AAAA,cAL3B,YAAY;AAAA,YAOnB;AAAA;AAAA,QAEF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAU;AAAA,YAEV;AAAA,kCAAC,UAAO;AAAA,cACR;AAAA,gBAAC;AAAA;AAAA,kBACA,SAAQ;AAAA,kBACR,SAAU;AAAA,kBACV,uBAAqB;AAAA,kBAEnB,aAAI,QAAS;AAAA;AAAA,cAChB;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,SAAQ;AAAA,kBACR,SAAU;AAAA,kBACV,uBAAqB;AAAA,kBAEnB,aAAI,OAAQ;AAAA;AAAA,cACf;AAAA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,WAAoB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAOI;AACH,QAAM,CAAE,QAAQ,SAAU,IAAI,SAAU,KAAM;AAE9C,QAAM,aAAa,gBAAiB,KAAM,IACvC,MAAM,QACN,iBAAiB;AAEpB,QAAM,OAAa;AAAA,IAClB,OAAc;AAAA,MACb,QAAQ;AAAA,MACR,QAAQ,gBAAiB,KAAM,IAC5B,MAAM;AAAA;AAAA,QAEN,CAAE,EAAE,IAAI,MAAM,GAAG,CAAE;AAAA;AAAA,IACvB;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAW,gBAAgB,aAAa;AAAA,QACxC,SAAU,MAAM,UAAW,IAAK;AAAA,QAChC,iBAAgB;AAAA;AAAA,IACjB;AAAA,IACE,UACD;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAa,cAAc;AAAA,QAC3B;AAAA,QACA,SAAU,MAAM,UAAW,KAAM;AAAA;AAAA,IAClC;AAAA,KAEF;AAEF;AAEA,IAAO,gBAAQ;",
+  "names": []
+}

package/build-module/dataform-layouts/panel/summary-button.js

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@wordpress/components";
+import { sprintf, _x } from "@wordpress/i18n";
+function SummaryButton({
+  summaryFields,
+  data,
+  labelPosition,
+  fieldLabel,
+  disabled,
+  onClick,
+  "aria-expanded": ariaExpanded
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: "dataforms-layouts-panel__summary-button",
+      size: "compact",
+      variant: ["none", "top"].includes(labelPosition) ? "link" : "tertiary",
+      "aria-expanded": ariaExpanded,
+      "aria-label": sprintf(
+        // translators: %s: Field name.
+        _x("Edit %s", "field"),
+        fieldLabel || ""
+      ),
+      onClick,
+      disabled,
+      accessibleWhenDisabled: true,
+      style: summaryFields.length > 1 ? {
+        minHeight: "auto",
+        height: "auto",
+        alignItems: "flex-start"
+      } : void 0,
+      children: summaryFields.length > 1 ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            width: "100%",
+            gap: "2px"
+          },
+          children: summaryFields.map((summaryField) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { width: "100%" },
+              children: /* @__PURE__ */ jsx(
+                summaryField.render,
+                {
+                  item: data,
+                  field: summaryField
+                }
+              )
+            },
+            summaryField.id
+          ))
+        }
+      ) : summaryFields.map((summaryField) => /* @__PURE__ */ jsx(
+        summaryField.render,
+        {
+          item: data,
+          field: summaryField
+        },
+        summaryField.id
+      ))
+    }
+  );
+}
+var summary_button_default = SummaryButton;
+export {
+  summary_button_default as default
+};
+//# sourceMappingURL=summary-button.js.map

package/build-module/dataform-layouts/panel/summary-button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/dataform-layouts/panel/summary-button.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { sprintf, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { NormalizedField } from '../../types';\n\nfunction SummaryButton< Item >( {\n\tsummaryFields,\n\tdata,\n\tlabelPosition,\n\tfieldLabel,\n\tdisabled,\n\tonClick,\n\t'aria-expanded': ariaExpanded,\n}: {\n\tsummaryFields: NormalizedField< Item >[];\n\tdata: Item;\n\tlabelPosition: 'side' | 'top' | 'none';\n\tfieldLabel?: string;\n\tdisabled?: boolean;\n\tonClick: () => void;\n\t'aria-expanded'?: boolean;\n} ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName=\"dataforms-layouts-panel__summary-button\"\n\t\t\tsize=\"compact\"\n\t\t\tvariant={\n\t\t\t\t[ 'none', 'top' ].includes( labelPosition )\n\t\t\t\t\t? 'link'\n\t\t\t\t\t: 'tertiary'\n\t\t\t}\n\t\t\taria-expanded={ ariaExpanded }\n\t\t\taria-label={ sprintf(\n\t\t\t\t// translators: %s: Field name.\n\t\t\t\t_x( 'Edit %s', 'field' ),\n\t\t\t\tfieldLabel || ''\n\t\t\t) }\n\t\t\tonClick={ onClick }\n\t\t\tdisabled={ disabled }\n\t\t\taccessibleWhenDisabled\n\t\t\tstyle={\n\t\t\t\tsummaryFields.length > 1\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tminHeight: 'auto',\n\t\t\t\t\t\t\theight: 'auto',\n\t\t\t\t\t\t\talignItems: 'flex-start',\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t>\n\t\t\t{ summaryFields.length > 1 ? (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\talignItems: 'flex-start',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tgap: '2px',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ summaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) ) }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tsummaryFields.map( ( summaryField ) => (\n\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t</Button>\n\t);\n}\n\nexport default SummaryButton;\n"],
+  "mappings": "AAuEO;AApEP,SAAS,cAAc;AACvB,SAAS,SAAS,UAAU;AAO5B,SAAS,cAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAClB,GAQI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,MAAK;AAAA,MACL,SACC,CAAE,QAAQ,KAAM,EAAE,SAAU,aAAc,IACvC,SACA;AAAA,MAEJ,iBAAgB;AAAA,MAChB,cAAa;AAAA;AAAA,QAEZ,GAAI,WAAW,OAAQ;AAAA,QACvB,cAAc;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,wBAAsB;AAAA,MACtB,OACC,cAAc,SAAS,IACpB;AAAA,QACA,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,YAAY;AAAA,MACZ,IACA;AAAA,MAGF,wBAAc,SAAS,IACxB;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,YACP,SAAS;AAAA,YACT,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,OAAO;AAAA,YACP,KAAK;AAAA,UACN;AAAA,UAEE,wBAAc,IAAK,CAAE,iBACtB;AAAA,YAAC;AAAA;AAAA,cAEA,OAAQ,EAAE,OAAO,OAAO;AAAA,cAExB;AAAA,gBAAC,aAAa;AAAA,gBAAb;AAAA,kBACA,MAAO;AAAA,kBACP,OAAQ;AAAA;AAAA,cACT;AAAA;AAAA,YANM,aAAa;AAAA,UAOpB,CACC;AAAA;AAAA,MACH,IAEA,cAAc,IAAK,CAAE,iBACpB;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UAEA,MAAO;AAAA,UACP,OAAQ;AAAA;AAAA,QAFF,aAAa;AAAA,MAGpB,CACC;AAAA;AAAA,EAEJ;AAEF;AAEA,IAAO,yBAAQ;",
+  "names": []
+}