@wordpress/dataviews 12.0.1-next.v.202602091733.0 → 12.0.1

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

@@ -30,12 +30,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/dataviews/src/components/dataform-layouts/card/index.tsx
 var card_exports = {};
 __export(card_exports, {
-  default: () => FormCardField,
-  useCardHeader: () => useCardHeader
+  default: () => FormCardField
 });
 module.exports = __toCommonJS(card_exports);
 var import_components = require("@wordpress/components");
+var import_compose = require("@wordpress/compose");
 var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
 var import_icons = require("@wordpress/icons");
 var import__ = require("../index.cjs");
 var import_dataform_context = __toESM(require("../../dataform-context/index.cjs"));
@@ -45,87 +46,6 @@ var import_get_summary_fields = require("../get-summary-fields.cjs");
 var import_use_report_validity = __toESM(require("../../../hooks/use-report-validity.cjs"));
 var import_validation_badge = __toESM(require("../validation-badge.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var NonCollapsibleCardHeader = ({
-  children,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.CardHeader, { isBorderless: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "div",
-  {
-    style: {
-      height: "40px",
-      // This is to match the chevron's __next40pxDefaultSize
-      width: "100%",
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center"
-    },
-    children
-  }
-) });
-function useCardHeader(layout) {
-  const { isOpened, isCollapsible } = layout;
-  const [isOpen, setIsOpen] = (0, import_element.useState)(isOpened);
-  const [touched, setTouched] = (0, import_element.useState)(false);
-  (0, import_element.useEffect)(() => {
-    setIsOpen(isOpened);
-  }, [isOpened]);
-  const toggle = (0, import_element.useCallback)(() => {
-    if (isOpen) {
-      setTouched(true);
-    }
-    setIsOpen((prev) => !prev);
-  }, [isOpen]);
-  const CollapsibleCardHeader = (0, import_element.useCallback)(
-    ({
-      children,
-      ...props
-    }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_components.CardHeader,
-      {
-        ...props,
-        onClick: toggle,
-        style: {
-          cursor: "pointer",
-          ...props.style
-        },
-        isBorderless: true,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              style: {
-                width: "100%",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center"
-              },
-              children
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Button,
-            {
-              __next40pxDefaultSize: true,
-              variant: "tertiary",
-              icon: isOpen ? import_icons.chevronUp : import_icons.chevronDown,
-              "aria-expanded": isOpen,
-              "aria-label": isOpen ? "Collapse" : "Expand"
-            }
-          )
-        ]
-      }
-    ),
-    [toggle, isOpen]
-  );
-  const effectiveIsOpen = isCollapsible ? isOpen : true;
-  const CardHeaderComponent = isCollapsible ? CollapsibleCardHeader : NonCollapsibleCardHeader;
-  return {
-    isOpen: effectiveIsOpen,
-    CardHeader: CardHeaderComponent,
-    touched,
-    setTouched
-  };
-}
 function isSummaryFieldVisible(summaryField, summaryConfig, isOpen) {
   if (!summaryConfig || Array.isArray(summaryConfig) && summaryConfig.length === 0) {
     return false;
@@ -162,6 +82,10 @@ function FormCardField({
   const { fields } = (0, import_element.useContext)(import_dataform_context.default);
   const layout = field.layout;
   const cardBodyRef = (0, import_element.useRef)(null);
+  const bodyId = (0, import_compose.useInstanceId)(
+    FormCardField,
+    "dataforms-layouts-card-card-body"
+  );
   const form = (0, import_element.useMemo)(
     () => ({
       layout: import_normalize_form.DEFAULT_LAYOUT,
@@ -169,7 +93,21 @@ function FormCardField({
     }),
     [field]
   );
-  const { isOpen, CardHeader, touched, setTouched } = useCardHeader(layout);
+  const { isOpened, isCollapsible } = layout;
+  const [internalIsOpen, setIsOpen] = (0, import_element.useState)(isOpened);
+  const [touched, setTouched] = (0, import_element.useState)(false);
+  (0, import_element.useEffect)(() => {
+    setIsOpen(isOpened);
+  }, [isOpened]);
+  const toggle = (0, import_element.useCallback)(() => {
+    setIsOpen((prev) => {
+      if (prev) {
+        setTouched(true);
+      }
+      return !prev;
+    });
+  }, []);
+  const isOpen = isCollapsible ? internalIsOpen : true;
   const handleBlur = (0, import_element.useCallback)(() => {
     setTouched(true);
   }, [setTouched]);
@@ -185,65 +123,48 @@ function FormCardField({
     inlineStart: "medium",
     inlineEnd: "medium"
   };
-  if (!!field.children) {
-    const withHeader2 = !!field.label && layout.withHeader;
-    const sizeCardBody2 = {
-      blockStart: withHeader2 ? "none" : "medium",
-      blockEnd: "medium",
-      inlineStart: "medium",
-      inlineEnd: "medium"
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Card, { className: "dataforms-layouts-card__field", size: sizeCard, children: [
-      withHeader2 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, { className: "dataforms-layouts-card__field-header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataforms-layouts-card__field-header-label", children: field.label }),
-        validationBadge,
-        visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map(
-          (summaryField) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
-        import_components.CardBody,
+  let label = field.label;
+  let withHeader;
+  let bodyContent;
+  if (field.children) {
+    withHeader = !!label && layout.withHeader;
+    bodyContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      field.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-description", children: field.description }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_data_form_layout.DataFormLayout,
         {
-          size: sizeCardBody2,
-          className: "dataforms-layouts-card__field-control",
-          ref: cardBodyRef,
-          onBlur: handleBlur,
-          children: [
-            field.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-description", children: field.description }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_data_form_layout.DataFormLayout,
-              {
-                data,
-                form,
-                onChange,
-                validity: validity?.children
-              }
-            )
-          ]
+          data,
+          form,
+          onChange,
+          validity: validity?.children
         }
       )
     ] });
+  } else {
+    const fieldDefinition = fields.find(
+      (fieldDef) => fieldDef.id === field.id
+    );
+    if (!fieldDefinition || !fieldDefinition.Edit) {
+      return null;
+    }
+    const SingleFieldLayout = (0, import__.getFormFieldLayout)("regular")?.component;
+    if (!SingleFieldLayout) {
+      return null;
+    }
+    label = fieldDefinition.label;
+    withHeader = !!label && layout.withHeader;
+    bodyContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SingleFieldLayout,
+      {
+        data,
+        field,
+        onChange,
+        hideLabelFromVision: hideLabelFromVision || withHeader,
+        markWhenOptional,
+        validity
+      }
+    );
   }
-  const fieldDefinition = fields.find(
-    (fieldDef) => fieldDef.id === field.id
-  );
-  if (!fieldDefinition || !fieldDefinition.Edit) {
-    return null;
-  }
-  const RegularLayout = (0, import__.getFormFieldLayout)("regular")?.component;
-  if (!RegularLayout) {
-    return null;
-  }
-  const withHeader = !!fieldDefinition.label && layout.withHeader;
   const sizeCardBody = {
     blockStart: withHeader ? "none" : "medium",
     blockEnd: "medium",
@@ -251,44 +172,71 @@ function FormCardField({
     inlineEnd: "medium"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Card, { className: "dataforms-layouts-card__field", size: sizeCard, children: [
-    withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, { className: "dataforms-layouts-card__field-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataforms-layouts-card__field-header-label", children: fieldDefinition.label }),
-      validationBadge,
-      visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map((summaryField) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        summaryField.render,
-        {
-          item: data,
-          field: summaryField
+    withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_components.CardHeader,
+      {
+        className: "dataforms-layouts-card__field-header",
+        onClick: isCollapsible ? toggle : void 0,
+        style: {
+          cursor: isCollapsible ? "pointer" : void 0
         },
-        summaryField.id
-      )) })
-    ] }),
+        isBorderless: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                // Match the expand/collapse button's height to avoid layout
+                // differences when that button is not displayed.
+                height: isCollapsible ? void 0 : "40px",
+                width: "100%",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataforms-layouts-card__field-header-label", children: label }),
+                validationBadge,
+                visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map(
+                  (summaryField) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    summaryField.render,
+                    {
+                      item: data,
+                      field: summaryField
+                    },
+                    summaryField.id
+                  )
+                ) })
+              ]
+            }
+          ),
+          isCollapsible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.Button,
+            {
+              __next40pxDefaultSize: true,
+              variant: "tertiary",
+              icon: isOpen ? import_icons.chevronUp : import_icons.chevronDown,
+              "aria-expanded": isOpen,
+              "aria-controls": bodyId,
+              "aria-label": isOpen ? (0, import_i18n.__)("Collapse") : (0, import_i18n.__)("Expand")
+            }
+          )
+        ]
+      }
+    ),
     (isOpen || !withHeader) && // If it doesn't have a header, keep it open.
     // Otherwise, the card will not be visible.
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_components.CardBody,
       {
+        id: bodyId,
         size: sizeCardBody,
         className: "dataforms-layouts-card__field-control",
         ref: cardBodyRef,
         onBlur: handleBlur,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          RegularLayout,
-          {
-            data,
-            field,
-            onChange,
-            hideLabelFromVision: hideLabelFromVision || withHeader,
-            markWhenOptional,
-            validity
-          }
-        )
+        children: bodyContent
       }
     )
   ] });
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useCardHeader
-});
 //# sourceMappingURL=index.cjs.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-layouts/card/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\tCardHeader as OriginalCardHeader,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { chevronDown, chevronUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getFormFieldLayout } from '..';\nimport DataFormContext from '../../dataform-context';\nimport type {\n\tFieldLayoutProps,\n\tNormalizedCardLayout,\n\tNormalizedField,\n\tNormalizedForm,\n\tNormalizedLayout,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport { getSummaryFields } from '../get-summary-fields';\nimport useReportValidity from '../../../hooks/use-report-validity';\nimport ValidationBadge from '../validation-badge';\n\nconst NonCollapsibleCardHeader = ( {\n\tchildren,\n\t...props\n}: {\n\tchildren: React.ReactNode;\n} ) => (\n\t<OriginalCardHeader isBorderless { ...props }>\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\theight: '40px', // This is to match the chevron's __next40pxDefaultSize\n\t\t\t\twidth: '100%',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\talignItems: 'center',\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t</OriginalCardHeader>\n);\n\nexport function useCardHeader( layout: NormalizedCardLayout ) {\n\tconst { isOpened, isCollapsible } = layout;\n\tconst [ isOpen, setIsOpen ] = useState( isOpened );\n\tconst [ touched, setTouched ] = useState( false );\n\n\t// Sync internal state when the isOpened prop changes.\n\t// This is unlikely to happen in production, but it helps with storybook controls.\n\tuseEffect( () => {\n\t\tsetIsOpen( isOpened );\n\t}, [ isOpened ] );\n\n\tconst toggle = useCallback( () => {\n\t\t// Mark as touched when collapsing (going from open to closed)\n\t\tif ( isOpen ) {\n\t\t\tsetTouched( true );\n\t\t}\n\t\tsetIsOpen( ( prev ) => ! prev );\n\t}, [ isOpen ] );\n\n\tconst CollapsibleCardHeader = useCallback(\n\t\t( {\n\t\t\tchildren,\n\t\t\t...props\n\t\t}: {\n\t\t\tchildren: React.ReactNode;\n\t\t\t[ key: string ]: any;\n\t\t} ) => (\n\t\t\t<OriginalCardHeader\n\t\t\t\t{ ...props }\n\t\t\t\tonClick={ toggle }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t...props.style,\n\t\t\t\t} }\n\t\t\t\tisBorderless\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\ticon={ isOpen ? chevronUp : chevronDown }\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-label={ isOpen ? 'Collapse' : 'Expand' }\n\t\t\t\t/>\n\t\t\t</OriginalCardHeader>\n\t\t),\n\t\t[ toggle, isOpen ]\n\t);\n\n\tconst effectiveIsOpen = isCollapsible ? isOpen : true;\n\tconst CardHeaderComponent = isCollapsible\n\t\t? CollapsibleCardHeader\n\t\t: NonCollapsibleCardHeader;\n\n\treturn {\n\t\tisOpen: effectiveIsOpen,\n\t\tCardHeader: CardHeaderComponent,\n\t\ttouched,\n\t\tsetTouched,\n\t};\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\tmarkWhenOptional,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedCardLayout;\n\tconst cardBodyRef = useRef< HTMLDivElement >( null );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT as NormalizedLayout,\n\t\t\tfields: field.children ?? [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { isOpen, CardHeader, touched, setTouched } = useCardHeader( layout );\n\n\t// Mark the card as touched when any field inside it is blurred.\n\t// This aligns with how validated controls show errors on blur.\n\tconst handleBlur = useCallback( () => {\n\t\tsetTouched( true );\n\t}, [ setTouched ] );\n\n\t// When the card is expanded after being touched (collapsed with errors),\n\t// trigger reportValidity to show field-level errors.\n\tuseReportValidity( cardBodyRef, isOpen && touched );\n\n\tconst summaryFields = getSummaryFields< Item >( layout.summary, fields );\n\n\tconst visibleSummaryFields = summaryFields.filter( ( summaryField ) =>\n\t\tisSummaryFieldVisible( summaryField, layout.summary, isOpen )\n\t);\n\n\tconst validationBadge =\n\t\ttouched && layout.isCollapsible ? (\n\t\t\t<ValidationBadge validity={ validity } />\n\t\t) : null;\n\n\tconst sizeCard = {\n\t\tblockStart: 'medium' as const,\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\tif ( !! field.children ) {\n\t\tconst withHeader = !! field.label && layout.withHeader;\n\n\t\tconst sizeCardBody = {\n\t\t\tblockStart: withHeader\n\t\t\t\t? ( 'none' as const )\n\t\t\t\t: ( 'medium' as const ),\n\t\t\tblockEnd: 'medium' as const,\n\t\t\tinlineStart: 'medium' as const,\n\t\t\tinlineEnd: 'medium' as const,\n\t\t};\n\n\t\treturn (\n\t\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t\t{ withHeader && (\n\t\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{ validationBadge }\n\t\t\t\t\t\t{ visibleSummaryFields.length > 0 &&\n\t\t\t\t\t\t\tlayout.withHeader && (\n\t\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t\t\t{ visibleSummaryFields.map(\n\t\t\t\t\t\t\t\t\t\t( summaryField ) => (\n\t\t\t\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</CardHeader>\n\t\t\t\t) }\n\t\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t\t<CardBody\n\t\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t\t\tref={ cardBodyRef }\n\t\t\t\t\t\tonBlur={ handleBlur }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ field.description && (\n\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-description\">\n\t\t\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CardBody>\n\t\t\t\t) }\n\t\t\t</Card>\n\t\t);\n\t}\n\n\tconst fieldDefinition = fields.find(\n\t\t( fieldDef ) => fieldDef.id === field.id\n\t);\n\n\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\treturn null;\n\t}\n\n\tconst RegularLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! RegularLayout ) {\n\t\treturn null;\n\t}\n\tconst withHeader = !! fieldDefinition.label && layout.withHeader;\n\n\tconst sizeCardBody = {\n\t\tblockStart: withHeader ? ( 'none' as const ) : ( 'medium' as const ),\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\treturn (\n\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t{ withHeader && (\n\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t\t</span>\n\t\t\t\t\t{ validationBadge }\n\t\t\t\t\t{ visibleSummaryFields.length > 0 && layout.withHeader && (\n\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t{ visibleSummaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</CardHeader>\n\t\t\t) }\n\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t<CardBody\n\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t\tref={ cardBodyRef }\n\t\t\t\t\tonBlur={ handleBlur }\n\t\t\t\t>\n\t\t\t\t\t<RegularLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\thideLabelFromVision || withHeader\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmarkWhenOptional={ markWhenOptional }\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": ["OriginalCardHeader", "DataFormContext", "useReportValidity", "ValidationBadge", "withHeader", "sizeCardBody"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\tCardHeader as OriginalCardHeader,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { chevronDown, chevronUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getFormFieldLayout } from '..';\nimport DataFormContext from '../../dataform-context';\nimport type {\n\tFieldLayoutProps,\n\tNormalizedCardLayout,\n\tNormalizedField,\n\tNormalizedForm,\n\tNormalizedLayout,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport { getSummaryFields } from '../get-summary-fields';\nimport useReportValidity from '../../../hooks/use-report-validity';\nimport ValidationBadge from '../validation-badge';\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\tmarkWhenOptional,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedCardLayout;\n\tconst cardBodyRef = useRef< HTMLDivElement >( null );\n\tconst bodyId = useInstanceId(\n\t\tFormCardField,\n\t\t'dataforms-layouts-card-card-body'\n\t);\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT as NormalizedLayout,\n\t\t\tfields: field.children ?? [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { isOpened, isCollapsible } = layout;\n\tconst [ internalIsOpen, setIsOpen ] = useState( isOpened );\n\tconst [ touched, setTouched ] = useState( false );\n\n\t// Sync internal state when the isOpened prop changes.\n\t// This is unlikely to happen in production, but it helps with storybook controls.\n\tuseEffect( () => {\n\t\tsetIsOpen( isOpened );\n\t}, [ isOpened ] );\n\n\tconst toggle = useCallback( () => {\n\t\tsetIsOpen( ( prev ) => {\n\t\t\t// Mark as touched when collapsing (going from open to closed)\n\t\t\tif ( prev ) {\n\t\t\t\tsetTouched( true );\n\t\t\t}\n\t\t\treturn ! prev;\n\t\t} );\n\t}, [] );\n\n\tconst isOpen = isCollapsible ? internalIsOpen : true;\n\n\t// Mark the card as touched when any field inside it is blurred.\n\t// This aligns with how validated controls show errors on blur.\n\tconst handleBlur = useCallback( () => {\n\t\tsetTouched( true );\n\t}, [ setTouched ] );\n\n\t// When the card is expanded after being touched (collapsed with errors),\n\t// trigger reportValidity to show field-level errors.\n\tuseReportValidity( cardBodyRef, isOpen && touched );\n\n\tconst summaryFields = getSummaryFields< Item >( layout.summary, fields );\n\n\tconst visibleSummaryFields = summaryFields.filter( ( summaryField ) =>\n\t\tisSummaryFieldVisible( summaryField, layout.summary, isOpen )\n\t);\n\n\tconst validationBadge =\n\t\ttouched && layout.isCollapsible ? (\n\t\t\t<ValidationBadge validity={ validity } />\n\t\t) : null;\n\n\tconst sizeCard = {\n\t\tblockStart: 'medium' as const,\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\tlet label = field.label;\n\tlet withHeader: boolean;\n\tlet bodyContent: React.ReactNode;\n\n\tif ( field.children ) {\n\t\twithHeader = !! label && layout.withHeader;\n\t\tbodyContent = (\n\t\t\t<>\n\t\t\t\t{ field.description && (\n\t\t\t\t\t<div className=\"dataforms-layouts-card__field-description\">\n\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t} else {\n\t\tconst fieldDefinition = fields.find(\n\t\t\t( fieldDef ) => fieldDef.id === field.id\n\t\t);\n\n\t\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst SingleFieldLayout = getFormFieldLayout( 'regular' )?.component;\n\t\tif ( ! SingleFieldLayout ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tlabel = fieldDefinition.label;\n\t\twithHeader = !! label && layout.withHeader;\n\t\tbodyContent = (\n\t\t\t<SingleFieldLayout\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision || withHeader }\n\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\tvalidity={ validity }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst sizeCardBody = {\n\t\tblockStart: withHeader ? ( 'none' as const ) : ( 'medium' as const ),\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\treturn (\n\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t{ withHeader && (\n\t\t\t\t<OriginalCardHeader\n\t\t\t\t\tclassName=\"dataforms-layouts-card__field-header\"\n\t\t\t\t\tonClick={ isCollapsible ? toggle : undefined }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tcursor: isCollapsible ? 'pointer' : undefined,\n\t\t\t\t\t} }\n\t\t\t\t\tisBorderless\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t// Match the expand/collapse button's height to avoid layout\n\t\t\t\t\t\t\t// differences when that button is not displayed.\n\t\t\t\t\t\t\theight: isCollapsible ? undefined : '40px',\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{ validationBadge }\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</div>\n\t\t\t\t\t{ isCollapsible && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\ticon={ isOpen ? chevronUp : chevronDown }\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-controls={ bodyId }\n\t\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\t\tisOpen ? __( 'Collapse' ) : __( 'Expand' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</OriginalCardHeader>\n\t\t\t) }\n\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t<CardBody\n\t\t\t\t\tid={ bodyId }\n\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t\tref={ cardBodyRef }\n\t\t\t\t\tonBlur={ handleBlur }\n\t\t\t\t>\n\t\t\t\t\t{ bodyContent }\n\t\t\t\t</CardBody>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["DataFormContext", "useReportValidity", "ValidationBadge", "OriginalCardHeader"]
 }

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

@@ -62,7 +62,7 @@ var FORM_FIELD_LAYOUTS = [
       {
         direction: "column",
         className: "dataforms-layouts__wrapper",
-        gap: "sm",
+        gap: "md",
         children
       }
     )

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

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

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

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

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

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