@wordpress/dataviews 9.1.1-next.233ccab9b.0 → 10.0.0

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

@@ -0,0 +1,183 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Card, CardBody, CardHeader } from "@wordpress/components";
+import { useCallback, useContext, useMemo, useState } from "@wordpress/element";
+import { chevronDown, chevronUp } from "@wordpress/icons";
+import { getFormFieldLayout } from "..";
+import DataFormContext from "../../components/dataform-context";
+import { DataFormLayout } from "../data-form-layout";
+import { isCombinedField } from "../is-combined-field";
+import { DEFAULT_LAYOUT, normalizeLayout } from "../normalize-form-fields";
+import { getSummaryFields } from "../get-summary-fields";
+function useCollapsibleCard(initialIsOpen = true) {
+  const [isOpen, setIsOpen] = useState(initialIsOpen);
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+  const CollapsibleCardHeader = useCallback(
+    ({
+      children,
+      ...props
+    }) => /* @__PURE__ */ jsxs(
+      CardHeader,
+      {
+        ...props,
+        onClick: toggle,
+        style: {
+          cursor: "pointer",
+          ...props.style
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "100%",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              __next40pxDefaultSize: true,
+              variant: "tertiary",
+              icon: isOpen ? chevronUp : chevronDown,
+              "aria-expanded": isOpen,
+              "aria-label": isOpen ? "Collapse" : "Expand"
+            }
+          )
+        ]
+      }
+    ),
+    [toggle, isOpen]
+  );
+  return { isOpen, CollapsibleCardHeader };
+}
+function isSummaryFieldVisible(summaryField, summaryConfig, isOpen) {
+  if (!summaryConfig || Array.isArray(summaryConfig) && summaryConfig.length === 0) {
+    return false;
+  }
+  const summaryConfigArray = Array.isArray(summaryConfig) ? summaryConfig : [summaryConfig];
+  const fieldConfig = summaryConfigArray.find((config) => {
+    if (typeof config === "string") {
+      return config === summaryField.id;
+    }
+    if (typeof config === "object" && "id" in config) {
+      return config.id === summaryField.id;
+    }
+    return false;
+  });
+  if (!fieldConfig) {
+    return false;
+  }
+  if (typeof fieldConfig === "string") {
+    return true;
+  }
+  if (typeof fieldConfig === "object" && "visibility" in fieldConfig) {
+    return fieldConfig.visibility === "always" || fieldConfig.visibility === "when-collapsed" && !isOpen;
+  }
+  return true;
+}
+function FormCardField({
+  data,
+  field,
+  onChange,
+  hideLabelFromVision,
+  validity
+}) {
+  const { fields } = useContext(DataFormContext);
+  const layout = normalizeLayout({
+    ...field.layout,
+    type: "card"
+  });
+  const form = useMemo(
+    () => ({
+      layout: DEFAULT_LAYOUT,
+      fields: isCombinedField(field) ? field.children : []
+    }),
+    [field]
+  );
+  const { isOpen, CollapsibleCardHeader } = useCollapsibleCard(
+    layout.isOpened
+  );
+  const summaryFields = getSummaryFields(layout.summary, fields);
+  const visibleSummaryFields = summaryFields.filter(
+    (summaryField) => isSummaryFieldVisible(summaryField, layout.summary, isOpen)
+  );
+  if (isCombinedField(field)) {
+    const withHeader2 = !!field.label && layout.withHeader;
+    return /* @__PURE__ */ jsxs(Card, { className: "dataforms-layouts-card__field", children: [
+      withHeader2 && /* @__PURE__ */ jsxs(CollapsibleCardHeader, { className: "dataforms-layouts-card__field-header", children: [
+        /* @__PURE__ */ jsx("span", { className: "dataforms-layouts-card__field-header-label", children: field.label }),
+        visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map(
+          (summaryField) => /* @__PURE__ */ jsx(
+            summaryField.render,
+            {
+              item: data,
+              field: summaryField
+            },
+            summaryField.id
+          )
+        ) })
+      ] }),
+      (isOpen || !withHeader2) && // If it doesn't have a header, keep it open.
+      // Otherwise, the card will not be visible.
+      /* @__PURE__ */ jsxs(CardBody, { className: "dataforms-layouts-card__field-control", children: [
+        field.description && /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-card__field-description", children: field.description }),
+        /* @__PURE__ */ jsx(
+          DataFormLayout,
+          {
+            data,
+            form,
+            onChange,
+            validity: validity?.children
+          }
+        )
+      ] })
+    ] });
+  }
+  const fieldDefinition = fields.find(
+    (fieldDef) => fieldDef.id === field.id
+  );
+  if (!fieldDefinition || !fieldDefinition.Edit) {
+    return null;
+  }
+  const RegularLayout = getFormFieldLayout("regular")?.component;
+  if (!RegularLayout) {
+    return null;
+  }
+  const withHeader = !!fieldDefinition.label && layout.withHeader;
+  return /* @__PURE__ */ jsxs(Card, { className: "dataforms-layouts-card__field", children: [
+    withHeader && /* @__PURE__ */ jsxs(CollapsibleCardHeader, { className: "dataforms-layouts-card__field-header", children: [
+      /* @__PURE__ */ jsx("span", { className: "dataforms-layouts-card__field-header-label", children: fieldDefinition.label }),
+      visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map((summaryField) => /* @__PURE__ */ jsx(
+        summaryField.render,
+        {
+          item: data,
+          field: summaryField
+        },
+        summaryField.id
+      )) })
+    ] }),
+    (isOpen || !withHeader) && // If it doesn't have a header, keep it open.
+    // Otherwise, the card will not be visible.
+    /* @__PURE__ */ jsx(CardBody, { className: "dataforms-layouts-card__field-control", children: /* @__PURE__ */ jsx(
+      RegularLayout,
+      {
+        data,
+        field,
+        onChange,
+        hideLabelFromVision: hideLabelFromVision || withHeader,
+        validity
+      }
+    ) })
+  ] });
+}
+export {
+  FormCardField as default,
+  useCollapsibleCard
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { __experimentalVStack as VStack } from "@wordpress/components";
+import { useContext, useMemo } from "@wordpress/element";
+import { getFormFieldLayout } from "./index";
+import DataFormContext from "../components/dataform-context";
+import { isCombinedField } from "./is-combined-field";
+import normalizeFormFields, { normalizeLayout } from "./normalize-form-fields";
+const DEFAULT_WRAPPER = ({ children }) => /* @__PURE__ */ jsx(VStack, { className: "dataforms-layouts__wrapper", spacing: 4, children });
+function DataFormLayout({
+  data,
+  form,
+  onChange,
+  validity,
+  children,
+  as
+}) {
+  const { fields: fieldDefinitions } = useContext(DataFormContext);
+  function getFieldDefinition(field) {
+    const fieldId = typeof field === "string" ? field : field.id;
+    return fieldDefinitions.find(
+      (fieldDefinition) => fieldDefinition.id === fieldId
+    );
+  }
+  const normalizedFormFields = useMemo(
+    () => normalizeFormFields(form),
+    [form]
+  );
+  const normalizedFormLayout = normalizeLayout(form.layout);
+  const Wrapper = as ?? getFormFieldLayout(normalizedFormLayout.type)?.wrapper ?? DEFAULT_WRAPPER;
+  return /* @__PURE__ */ jsx(Wrapper, { layout: normalizedFormLayout, children: normalizedFormFields.map((formField) => {
+    const FieldLayout = getFormFieldLayout(formField.layout.type)?.component;
+    if (!FieldLayout) {
+      return null;
+    }
+    const fieldDefinition = !isCombinedField(formField) ? getFieldDefinition(formField) : void 0;
+    if (fieldDefinition && fieldDefinition.isVisible && !fieldDefinition.isVisible(data)) {
+      return null;
+    }
+    if (children) {
+      return children(
+        FieldLayout,
+        formField,
+        validity?.[formField.id]
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      FieldLayout,
+      {
+        data,
+        field: formField,
+        onChange,
+        validity: validity?.[formField.id]
+      },
+      formField.id
+    );
+  }) });
+}
+export {
+  DataFormLayout
+};
+//# sourceMappingURL=data-form-layout.js.map

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

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

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

@@ -0,0 +1,21 @@
+function extractSummaryIds(summary) {
+  if (Array.isArray(summary)) {
+    return summary.map(
+      (item) => typeof item === "string" ? item : item.id
+    );
+  }
+  return [];
+}
+const getSummaryFields = (summaryField, fields) => {
+  if (Array.isArray(summaryField) && summaryField.length > 0) {
+    const summaryIds = extractSummaryIds(summaryField);
+    return summaryIds.map(
+      (summaryId) => fields.find((_field) => _field.id === summaryId)
+    ).filter((_field) => _field !== void 0);
+  }
+  return [];
+};
+export {
+  getSummaryFields
+};
+//# sourceMappingURL=get-summary-fields.js.map

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

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

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

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  __experimentalVStack as VStack,
+  __experimentalHStack as HStack
+} from "@wordpress/components";
+import FormRegularField from "./regular";
+import FormPanelField from "./panel";
+import FormCardField from "./card";
+import FormRowField from "./row";
+const FORM_FIELD_LAYOUTS = [
+  {
+    type: "regular",
+    component: FormRegularField,
+    wrapper: ({
+      children,
+      layout
+    }) => /* @__PURE__ */ jsx(
+      VStack,
+      {
+        className: "dataforms-layouts__wrapper",
+        spacing: layout?.spacing ?? 4,
+        children
+      }
+    )
+  },
+  {
+    type: "panel",
+    component: FormPanelField,
+    wrapper: ({ children }) => /* @__PURE__ */ jsx(VStack, { className: "dataforms-layouts__wrapper", spacing: 2, children })
+  },
+  {
+    type: "card",
+    component: FormCardField,
+    wrapper: ({
+      children,
+      layout
+    }) => /* @__PURE__ */ jsx(
+      VStack,
+      {
+        className: "dataforms-layouts__wrapper",
+        spacing: layout?.spacing ?? 6,
+        children
+      }
+    )
+  },
+  {
+    type: "row",
+    component: FormRowField,
+    wrapper: ({
+      children,
+      layout
+    }) => /* @__PURE__ */ jsx(VStack, { className: "dataforms-layouts__wrapper", spacing: 4, children: /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-row__field", children: /* @__PURE__ */ jsx(
+      HStack,
+      {
+        spacing: 4,
+        alignment: layout.alignment,
+        children
+      }
+    ) }) })
+  }
+];
+function getFormFieldLayout(type) {
+  return FORM_FIELD_LAYOUTS.find((layout) => layout.type === type);
+}
+export {
+  getFormFieldLayout
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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: ( {\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\n\t\t\t\tclassName=\"dataforms-layouts__wrapper\"\n\t\t\t\tspacing={ ( layout as any )?.spacing ?? 4 }\n\t\t\t>\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: ( {\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\n\t\t\t\tclassName=\"dataforms-layouts__wrapper\"\n\t\t\t\tspacing={ ( layout as any )?.spacing ?? 6 }\n\t\t\t>\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": "AA4BG;AAzBH;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AAMP,OAAO,sBAAsB;AAC7B,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO,kBAAkB;AAEzB,MAAM,qBAAqB;AAAA,EAC1B;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE;AAAA,MACV;AAAA,MACA;AAAA,IACD,MAIC;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,SAAY,QAAiB,WAAW;AAAA,QAEtC;AAAA;AAAA,IACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE,EAAE,SAAS,MACrB,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACtD,UACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE;AAAA,MACV;AAAA,MACA;AAAA,IACD,MAIC;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,SAAY,QAAiB,WAAW;AAAA,QAEtC;AAAA;AAAA,IACH;AAAA,EAEF;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS,CAAE;AAAA,MACV;AAAA,MACA;AAAA,IACD,MAIC,oBAAC,UAAO,WAAU,8BAA6B,SAAU,GACxD,8BAAC,SAAI,WAAU,gCACd;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WAAc,OAAsB;AAAA,QAElC;AAAA;AAAA,IACH,GACD,GACD;AAAA,EAEF;AACD;AAEO,SAAS,mBAAoB,MAAe;AAClD,SAAO,mBAAmB,KAAM,CAAE,WAAY,OAAO,SAAS,IAAK;AACpE;",
+  "names": []
+}

package/build-module/dataform-layouts/is-combined-field.js

@@ -0,0 +1,7 @@
+function isCombinedField(field) {
+  return field.children !== void 0;
+}
+export {
+  isCombinedField
+};
+//# sourceMappingURL=is-combined-field.js.map

package/build-module/dataform-layouts/is-combined-field.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/dataform-layouts/is-combined-field.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { FormField, CombinedFormField } from '../types';\n\nexport function isCombinedField(\n\tfield: FormField\n): field is CombinedFormField {\n\treturn ( field as CombinedFormField ).children !== undefined;\n}\n"],
+  "mappings": "AAKO,SAAS,gBACf,OAC6B;AAC7B,SAAS,MAA6B,aAAa;AACpD;",
+  "names": []
+}

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,136 @@
+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({
+  data,
+  field,
+  onChange,
+  validity,
+  labelPosition = "side",
+  summaryFields,
+  fieldDefinition,
+  popoverAnchor
+}) {
+  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 formValidity = useMemo(() => {
+    if (validity === void 0) {
+      return void 0;
+    }
+    if (isCombinedField(field)) {
+      return validity?.children;
+    }
+    return { [field.id]: validity };
+  }, [validity, 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,
+            validity: formValidity,
+            children: (FieldLayout, childField, childFieldValidity) => /* @__PURE__ */ jsx(
+              FieldLayout,
+              {
+                data,
+                field: childField,
+                onChange,
+                hideLabelFromVision: (form?.fields ?? []).length < 2,
+                validity: childFieldValidity
+              },
+              childField.id
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+var dropdown_default = PanelDropdown;
+export {
+  dropdown_default as default
+};
+//# sourceMappingURL=dropdown.js.map