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

package/build-module/dataform-controls/utils/validated-number.js

@@ -0,0 +1,166 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import deepMerge from "deepmerge";
+import {
+  Flex,
+  BaseControl,
+  __experimentalNumberControl as NumberControl,
+  privateApis
+} from "@wordpress/components";
+import { useCallback, useState } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { OPERATOR_BETWEEN } from "../../constants";
+import { unlock } from "../../lock-unlock";
+const { ValidatedNumberControl } = unlock(privateApis);
+function toNumberOrEmpty(value) {
+  if (value === "" || value === void 0) {
+    return "";
+  }
+  const number = Number(value);
+  return Number.isFinite(number) ? number : "";
+}
+function BetweenControls({
+  value,
+  onChange,
+  hideLabelFromVision,
+  step
+}) {
+  const [min = "", max = ""] = value;
+  const onChangeMin = useCallback(
+    (newValue) => onChange([toNumberOrEmpty(newValue), max]),
+    [onChange, max]
+  );
+  const onChangeMax = useCallback(
+    (newValue) => onChange([min, toNumberOrEmpty(newValue)]),
+    [onChange, min]
+  );
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      __nextHasNoMarginBottom: true,
+      help: __("The max. value must be greater than the min. value."),
+      children: /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: 4, children: [
+        /* @__PURE__ */ jsx(
+          NumberControl,
+          {
+            label: __("Min."),
+            value: min,
+            max: max ? Number(max) - step : void 0,
+            onChange: onChangeMin,
+            __next40pxDefaultSize: true,
+            hideLabelFromVision,
+            step
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NumberControl,
+          {
+            label: __("Max."),
+            value: max,
+            min: min ? Number(min) + step : void 0,
+            onChange: onChangeMax,
+            __next40pxDefaultSize: true,
+            hideLabelFromVision,
+            step
+          }
+        )
+      ] })
+    }
+  );
+}
+function ValidatedNumber({
+  data,
+  field,
+  onChange,
+  hideLabelFromVision,
+  operator,
+  decimals
+}) {
+  const step = Math.pow(10, Math.abs(decimals) * -1);
+  const { label, description, getValue, setValue } = field;
+  const value = getValue({ item: data }) ?? "";
+  const [customValidity, setCustomValidity] = useState(void 0);
+  const onChangeControl = useCallback(
+    (newValue) => {
+      onChange(
+        setValue({
+          item: data,
+          // Do not convert an empty string or undefined to a number,
+          // otherwise there's a mismatch between the UI control (empty)
+          // and the data relied by onChange (0).
+          value: ["", void 0].includes(newValue) ? void 0 : Number(newValue)
+        })
+      );
+    },
+    [data, onChange, setValue]
+  );
+  const onChangeBetweenControls = useCallback(
+    (newValue) => {
+      onChange(
+        setValue({
+          item: data,
+          value: newValue
+        })
+      );
+    },
+    [data, onChange, setValue]
+  );
+  const onValidateControl = useCallback(
+    (newValue) => {
+      const message = field.isValid?.custom?.(
+        deepMerge(
+          data,
+          setValue({
+            item: data,
+            value: [void 0, "", null].includes(newValue) ? void 0 : Number(newValue)
+          })
+        ),
+        field
+      );
+      if (message) {
+        setCustomValidity({
+          type: "invalid",
+          message
+        });
+        return;
+      }
+      setCustomValidity(void 0);
+    },
+    [data, field, setValue]
+  );
+  if (operator === OPERATOR_BETWEEN) {
+    let valueBetween = ["", ""];
+    if (Array.isArray(value) && value.length === 2 && value.every(
+      (element) => typeof element === "number" || element === ""
+    )) {
+      valueBetween = value;
+    }
+    return /* @__PURE__ */ jsx(
+      BetweenControls,
+      {
+        value: valueBetween,
+        onChange: onChangeBetweenControls,
+        hideLabelFromVision,
+        step
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ValidatedNumberControl,
+    {
+      required: !!field.isValid?.required,
+      onValidate: onValidateControl,
+      customValidity,
+      label,
+      help: description,
+      value,
+      onChange: onChangeControl,
+      __next40pxDefaultSize: true,
+      hideLabelFromVision,
+      step
+    }
+  );
+}
+export {
+  ValidatedNumber as default
+};
+//# sourceMappingURL=validated-number.js.map

package/build-module/dataform-controls/utils/validated-number.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/dataform-controls/utils/validated-number.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tBaseControl,\n\t__experimentalNumberControl as NumberControl,\n\tprivateApis,\n} from '@wordpress/components';\nimport { useCallback, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { OPERATOR_BETWEEN } from '../../constants';\nimport type { DataFormControlProps } from '../../types';\nimport { unlock } from '../../lock-unlock';\n\nconst { ValidatedNumberControl } = unlock( privateApis );\n\ntype NumberBetween = [ number | string, number | string ];\n\nfunction toNumberOrEmpty( value?: string ) {\n\tif ( value === '' || value === undefined ) {\n\t\treturn '';\n\t}\n\tconst number = Number( value );\n\treturn Number.isFinite( number ) ? number : '';\n}\n\nfunction BetweenControls( {\n\tvalue,\n\tonChange,\n\thideLabelFromVision,\n\tstep,\n}: {\n\tvalue: NumberBetween;\n\tonChange: ( [ min, max ]: NumberBetween ) => void;\n\thideLabelFromVision?: boolean;\n\tstep: number;\n} ) {\n\tconst [ min = '', max = '' ] = value;\n\n\tconst onChangeMin = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ toNumberOrEmpty( newValue ), max ] ),\n\t\t[ onChange, max ]\n\t);\n\n\tconst onChangeMax = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( [ min, toNumberOrEmpty( newValue ) ] ),\n\t\t[ onChange, min ]\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\thelp={ __( 'The max. value must be greater than the min. value.' ) }\n\t\t>\n\t\t\t<Flex direction=\"row\" gap={ 4 }>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Min.' ) }\n\t\t\t\t\tvalue={ min }\n\t\t\t\t\tmax={ max ? Number( max ) - step : undefined }\n\t\t\t\t\tonChange={ onChangeMin }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ __( 'Max.' ) }\n\t\t\t\t\tvalue={ max }\n\t\t\t\t\tmin={ min ? Number( min ) + step : undefined }\n\t\t\t\t\tonChange={ onChangeMax }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\tstep={ step }\n\t\t\t\t/>\n\t\t\t</Flex>\n\t\t</BaseControl>\n\t);\n}\n\nexport type DataFormValidatedNumberControlProps< Item > =\n\tDataFormControlProps< Item > & {\n\t\t/**\n\t\t * Number of decimals, acceps non-negative integer.\n\t\t */\n\t\tdecimals: number;\n\t};\n\nexport default function ValidatedNumber< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n\tdecimals,\n}: DataFormValidatedNumberControlProps< Item > ) {\n\tconst step = Math.pow( 10, Math.abs( decimals ) * -1 );\n\tconst { label, description, getValue, setValue } = field;\n\tconst value = getValue( { item: data } ) ?? '';\n\tconst [ customValidity, setCustomValidity ] =\n\t\tuseState<\n\t\t\tReact.ComponentProps<\n\t\t\t\ttypeof ValidatedNumberControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\t// Do not convert an empty string or undefined to a number,\n\t\t\t\t\t// otherwise there's a mismatch between the UI control (empty)\n\t\t\t\t\t// and the data relied by onChange (0).\n\t\t\t\t\tvalue: [ '', undefined ].includes( newValue )\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onChangeBetweenControls = useCallback(\n\t\t( newValue: NumberBetween ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: newValue,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onValidateControl = useCallback(\n\t\t( newValue: any ) => {\n\t\t\tconst message = field.isValid?.custom?.(\n\t\t\t\tdeepMerge(\n\t\t\t\t\tdata,\n\t\t\t\t\tsetValue( {\n\t\t\t\t\t\titem: data,\n\t\t\t\t\t\tvalue: [ undefined, '', null ].includes( newValue )\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: Number( newValue ),\n\t\t\t\t\t} ) as Partial< Item >\n\t\t\t\t),\n\t\t\t\tfield\n\t\t\t);\n\n\t\t\tif ( message ) {\n\t\t\t\tsetCustomValidity( {\n\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\tmessage,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetCustomValidity( undefined );\n\t\t},\n\t\t[ data, field, setValue ]\n\t);\n\n\tif ( operator === OPERATOR_BETWEEN ) {\n\t\tlet valueBetween: NumberBetween = [ '', '' ];\n\t\tif (\n\t\t\tArray.isArray( value ) &&\n\t\t\tvalue.length === 2 &&\n\t\t\tvalue.every(\n\t\t\t\t( element ) => typeof element === 'number' || element === ''\n\t\t\t)\n\t\t) {\n\t\t\tvalueBetween = value as NumberBetween;\n\t\t}\n\t\treturn (\n\t\t\t<BetweenControls\n\t\t\t\tvalue={ valueBetween }\n\t\t\t\tonChange={ onChangeBetweenControls }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tstep={ step }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ValidatedNumberControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tonValidate={ onValidateControl }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tlabel={ label }\n\t\t\thelp={ description }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeControl }\n\t\t\t__next40pxDefaultSize\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tstep={ step }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,180 @@
+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
+}) {
+  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
+          }
+        )
+      ] })
+    ] });
+  }
+  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
+      }
+    ) })
+  ] });
+}
+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}: 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/>\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/>\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,55 @@
+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,
+  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);
+    }
+    return /* @__PURE__ */ jsx(
+      FieldLayout,
+      {
+        data,
+        field: formField,
+        onChange
+      },
+      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 { Form, FormField, SimpleFormField } 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\tchildren,\n\tas,\n}: {\n\tdata: Item;\n\tform: Form;\n\tonChange: ( value: any ) => void;\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} ) => React.JSX.Element | null,\n\t\tfield: FormField\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( FieldLayout, formField );\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/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Wrapper>\n\t);\n}\n"],
+  "mappings": "AAgBC;AAbD,SAAS,wBAAwB,cAAc;AAC/C,SAAS,YAAY,eAAe;AAMpC,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;AACD,GAcI;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,SAAU,aAAa,SAAU;AAAA,IACzC;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA;AAAA,QACA,OAAQ;AAAA,QACR;AAAA;AAAA,MAHM,UAAU;AAAA,IAIjB;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": []
+}