@wordpress/dataviews 11.3.1-next.v.0 → 12.0.0

package/build-module/components/dataform-layouts/panel/modal.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-layouts/panel/modal.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useState, useMemo } from '@wordpress/element';\nimport { useFocusOnMount } from '@wordpress/compose';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tField,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tNormalizedField,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport SummaryButton from './summary-button';\nimport useFormValidity from '../../../hooks/use-form-validity';\nimport DataFormContext from '../../dataform-context';\n\nfunction ModalContent< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tfieldLabel,\n\tonClose,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tonChange: ( data: Partial< Item > ) => void;\n\tonClose: () => void;\n\tfieldLabel: string;\n} ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst [ changes, setChanges ] = useState< Partial< Item > >( {} );\n\tconst modalData = useMemo( () => {\n\t\treturn deepMerge( data, changes, {\n\t\t\tarrayMerge: ( target, source ) => source,\n\t\t} );\n\t}, [ data, changes ] );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: !! field.children\n\t\t\t\t? field.children\n\t\t\t\t: // If not explicit children return the field id itself.\n\t\t\t\t  [ { id: field.id, layout: DEFAULT_LAYOUT } ],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst fieldsAsFieldType: Field< Item >[] = fields.map( ( f ) => ( {\n\t\t...f,\n\t\tEdit: f.Edit === null ? undefined : f.Edit,\n\t\tisValid: {\n\t\t\trequired: f.isValid.required?.constraint,\n\t\t\telements: f.isValid.elements?.constraint,\n\t\t\tmin: f.isValid.min?.constraint,\n\t\t\tmax: f.isValid.max?.constraint,\n\t\t\tpattern: f.isValid.pattern?.constraint,\n\t\t\tminLength: f.isValid.minLength?.constraint,\n\t\t\tmaxLength: f.isValid.maxLength?.constraint,\n\t\t},\n\t} ) );\n\tconst { validity } = useFormValidity( modalData, fieldsAsFieldType, form );\n\n\tconst onApply = () => {\n\t\tonChange( changes );\n\t\tonClose();\n\t};\n\n\tconst handleOnChange = ( newValue: Partial< Item > ) => {\n\t\tsetChanges( ( prev ) =>\n\t\t\tdeepMerge( prev, newValue, {\n\t\t\t\tarrayMerge: ( target, source ) => source,\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstInputElement' );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"dataforms-layouts-panel__modal\"\n\t\t\tonRequestClose={ onClose }\n\t\t\tisFullScreen={ false }\n\t\t\ttitle={ fieldLabel }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t<div ref={ focusOnMountRef }>\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ modalData }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tvalidity={ validity }\n\t\t\t\t>\n\t\t\t\t\t{ ( FieldLayout, childField, childFieldValidity ) => (\n\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\tdata={ modalData }\n\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\t\t\thideLabelFromVision={ form.fields.length < 2 }\n\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</DataFormLayout>\n\t\t\t</div>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataforms-layouts-panel__modal-footer\"\n\t\t\t\tgap=\"sm\"\n\t\t\t>\n\t\t\t\t<Spacer style={ { flex: 1 } } />\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ onApply }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Modal>\n\t);\n}\n\nfunction PanelModal< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tlabelPosition,\n\tsummaryFields,\n\tfieldDefinition,\n\tonOpen,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tonChange: ( value: any ) => void;\n\tlabelPosition: 'side' | 'top' | 'none';\n\tsummaryFields: NormalizedField< Item >[];\n\tfieldDefinition: NormalizedField< Item >;\n\tonOpen?: () => void;\n} ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst fieldLabel = !! field.children ? field.label : fieldDefinition?.label;\n\n\treturn (\n\t\t<>\n\t\t\t<SummaryButton\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tdata={ data }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tfieldLabel={ fieldLabel }\n\t\t\t\tdisabled={ fieldDefinition.readOnly === true }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tif ( onOpen ) {\n\t\t\t\t\t\tonOpen();\n\t\t\t\t\t}\n\t\t\t\t\tsetIsOpen( true );\n\t\t\t\t} }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t/>\n\t\t\t{ isOpen && (\n\t\t\t\t<ModalContent\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tfieldLabel={ fieldLabel ?? '' }\n\t\t\t\t\tonClose={ () => setIsOpen( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PanelModal;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalSpacer as Spacer,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useContext, useMemo, useRef, useState } from '@wordpress/element';\nimport { useFocusOnMount, useMergeRefs } from '@wordpress/compose';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tField,\n\tNormalizedForm,\n\tNormalizedFormField,\n\tFieldLayoutProps,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport SummaryButton from './summary-button';\nimport useFormValidity from '../../../hooks/use-form-validity';\nimport useReportValidity from '../../../hooks/use-report-validity';\nimport DataFormContext from '../../dataform-context';\nimport useFieldFromFormField from './utils/use-field-from-form-field';\n\nfunction ModalContent< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tfieldLabel,\n\tonClose,\n\ttouched,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tonChange: ( data: Partial< Item > ) => void;\n\tonClose: () => void;\n\tfieldLabel: string;\n\ttouched: boolean;\n} ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst [ changes, setChanges ] = useState< Partial< Item > >( {} );\n\tconst modalData = useMemo( () => {\n\t\treturn deepMerge( data, changes, {\n\t\t\tarrayMerge: ( target, source ) => source,\n\t\t} );\n\t}, [ data, changes ] );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: !! field.children\n\t\t\t\t? field.children\n\t\t\t\t: // If not explicit children return the field id itself.\n\t\t\t\t  [ { id: field.id, layout: DEFAULT_LAYOUT } ],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst fieldsAsFieldType: Field< Item >[] = fields.map( ( f ) => ( {\n\t\t...f,\n\t\tEdit: f.Edit === null ? undefined : f.Edit,\n\t\tisValid: {\n\t\t\trequired: f.isValid.required?.constraint,\n\t\t\telements: f.isValid.elements?.constraint,\n\t\t\tmin: f.isValid.min?.constraint,\n\t\t\tmax: f.isValid.max?.constraint,\n\t\t\tpattern: f.isValid.pattern?.constraint,\n\t\t\tminLength: f.isValid.minLength?.constraint,\n\t\t\tmaxLength: f.isValid.maxLength?.constraint,\n\t\t},\n\t} ) );\n\tconst { validity } = useFormValidity( modalData, fieldsAsFieldType, form );\n\n\tconst onApply = () => {\n\t\tonChange( changes );\n\t\tonClose();\n\t};\n\n\tconst handleOnChange = ( newValue: Partial< Item > ) => {\n\t\tsetChanges( ( prev ) =>\n\t\t\tdeepMerge( prev, newValue, {\n\t\t\t\tarrayMerge: ( target, source ) => source,\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstInputElement' );\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst mergedRef = useMergeRefs( [ focusOnMountRef, contentRef ] );\n\n\t// When the modal is opened after being previously closed (touched),\n\t// trigger reportValidity to show field-level errors.\n\tuseReportValidity( contentRef, touched );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"dataforms-layouts-panel__modal\"\n\t\t\tonRequestClose={ onClose }\n\t\t\tisFullScreen={ false }\n\t\t\ttitle={ fieldLabel }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t<div ref={ mergedRef }>\n\t\t\t\t<DataFormLayout\n\t\t\t\t\tdata={ modalData }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\tvalidity={ validity }\n\t\t\t\t>\n\t\t\t\t\t{ (\n\t\t\t\t\t\tFieldLayout,\n\t\t\t\t\t\tchildField,\n\t\t\t\t\t\tchildFieldValidity,\n\t\t\t\t\t\tmarkWhenOptional\n\t\t\t\t\t) => (\n\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\tdata={ modalData }\n\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\tonChange={ handleOnChange }\n\t\t\t\t\t\t\thideLabelFromVision={ form.fields.length < 2 }\n\t\t\t\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</DataFormLayout>\n\t\t\t</div>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataforms-layouts-panel__modal-footer\"\n\t\t\t\tgap=\"md\"\n\t\t\t>\n\t\t\t\t<Spacer style={ { flex: 1 } } />\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ onApply }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Modal>\n\t);\n}\n\nfunction PanelModal< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst [ touched, setTouched ] = useState( false );\n\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst { fieldDefinition, fieldLabel, summaryFields } =\n\t\tuseFieldFromFormField( field );\n\tif ( ! fieldDefinition ) {\n\t\treturn null;\n\t}\n\n\tconst handleClose = () => {\n\t\tsetIsOpen( false );\n\t\tsetTouched( true );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SummaryButton\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tfieldLabel={ fieldLabel }\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tvalidity={ validity }\n\t\t\t\ttouched={ touched }\n\t\t\t\tdisabled={ fieldDefinition.readOnly === true }\n\t\t\t\tonClick={ () => setIsOpen( true ) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t/>\n\t\t\t{ isOpen && (\n\t\t\t\t<ModalContent\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tfieldLabel={ fieldLabel ?? '' }\n\t\t\t\t\tonClose={ handleClose }\n\t\t\t\t\ttouched={ touched }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PanelModal;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/dataform-layouts/panel/summary-button.mjs

@@ -1,74 +1,133 @@
 // packages/dataviews/src/components/dataform-layouts/panel/summary-button.tsx
-import { Button } from "@wordpress/components";
+import clsx from "clsx";
+import { Button, Icon, Tooltip } from "@wordpress/components";
 import { sprintf, _x } from "@wordpress/i18n";
-import { jsx } from "react/jsx-runtime";
+import { error as errorIcon, pencil } from "@wordpress/icons";
+import { useInstanceId } from "@wordpress/compose";
+import { useRef } from "@wordpress/element";
+import getLabelClassName from "./utils/get-label-classname.mjs";
+import getLabelContent from "./utils/get-label-content.mjs";
+import getFirstValidationError from "./utils/get-first-validation-error.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
 function SummaryButton({
-  summaryFields,
   data,
-  labelPosition,
+  field,
   fieldLabel,
+  summaryFields,
+  validity,
+  touched,
   disabled,
   onClick,
   "aria-expanded": ariaExpanded
 }) {
-  return /* @__PURE__ */ jsx(
-    Button,
+  const { labelPosition, editVisibility } = field.layout;
+  const errorMessage = getFirstValidationError(validity);
+  const showError = touched && !!errorMessage;
+  const labelClassName = getLabelClassName(labelPosition, showError);
+  const labelContent = getLabelContent(showError, errorMessage, fieldLabel);
+  const className = clsx(
+    "dataforms-layouts-panel__field-trigger",
+    `dataforms-layouts-panel__field-trigger--label-${labelPosition}`,
+    {
+      "is-disabled": disabled,
+      "dataforms-layouts-panel__field-trigger--edit-always": editVisibility === "always"
+    }
+  );
+  const controlId = useInstanceId(
+    SummaryButton,
+    "dataforms-layouts-panel__field-control"
+  );
+  const ariaLabel = showError ? sprintf(
+    // translators: %s: Field name.
+    _x("Edit %s (has errors)", "field"),
+    fieldLabel || ""
+  ) : sprintf(
+    // translators: %s: Field name.
+    _x("Edit %s", "field"),
+    fieldLabel || ""
+  );
+  const rowRef = useRef(null);
+  const handleRowClick = () => {
+    const selection = rowRef.current?.ownerDocument.defaultView?.getSelection();
+    if (selection && selection.toString().length > 0) {
+      return;
+    }
+    onClick();
+  };
+  const handleKeyDown = (event) => {
+    if (event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      className: "dataforms-layouts-panel__summary-button",
-      size: "compact",
-      variant: ["none", "top"].includes(labelPosition) ? "link" : "tertiary",
-      "aria-expanded": ariaExpanded,
-      "aria-label": sprintf(
-        // translators: %s: Field name.
-        _x("Edit %s", "field"),
-        fieldLabel || ""
-      ),
-      onClick,
-      disabled,
-      accessibleWhenDisabled: true,
-      style: summaryFields.length > 1 ? {
-        minHeight: "auto",
-        height: "auto",
-        alignItems: "flex-start"
-      } : void 0,
-      children: summaryFields.length > 1 ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            width: "100%",
-            gap: "2px"
-          },
-          children: summaryFields.map((summaryField) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: { width: "100%" },
-              children: /* @__PURE__ */ jsx(
-                summaryField.render,
-                {
-                  item: data,
-                  field: summaryField
-                }
-              )
-            },
-            summaryField.id
-          ))
-        }
-      ) : summaryFields.map((summaryField) => /* @__PURE__ */ jsx(
-        summaryField.render,
-        {
-          item: data,
-          field: summaryField
-        },
-        summaryField.id
-      ))
+      ref: rowRef,
+      className,
+      onClick: !disabled ? handleRowClick : void 0,
+      onKeyDown: !disabled ? handleKeyDown : void 0,
+      children: [
+        labelPosition !== "none" && /* @__PURE__ */ jsx("span", { className: labelClassName, children: labelContent }),
+        labelPosition === "none" && showError && /* @__PURE__ */ jsx(Tooltip, { text: errorMessage, placement: "top", children: /* @__PURE__ */ jsx("span", { className: "dataforms-layouts-panel__field-label-error-content", children: /* @__PURE__ */ jsx(Icon, { icon: errorIcon, size: 16 }) }) }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: `${controlId}`,
+            className: "dataforms-layouts-panel__field-control",
+            children: summaryFields.length > 1 ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "flex-start",
+                  width: "100%",
+                  gap: "2px"
+                },
+                children: summaryFields.map((summaryField) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: { width: "100%" },
+                    children: /* @__PURE__ */ jsx(
+                      summaryField.render,
+                      {
+                        item: data,
+                        field: summaryField
+                      }
+                    )
+                  },
+                  summaryField.id
+                ))
+              }
+            ) : summaryFields.map((summaryField) => /* @__PURE__ */ jsx(
+              summaryField.render,
+              {
+                item: data,
+                field: summaryField
+              },
+              summaryField.id
+            ))
+          }
+        ),
+        !disabled && /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "dataforms-layouts-panel__field-trigger-icon",
+            label: ariaLabel,
+            showTooltip: false,
+            icon: pencil,
+            size: "small",
+            "aria-expanded": ariaExpanded,
+            "aria-haspopup": "dialog",
+            "aria-describedby": `${controlId}`
+          }
+        )
+      ]
     }
   );
 }
-var summary_button_default = SummaryButton;
 export {
-  summary_button_default as default
+  SummaryButton as default
 };
 //# sourceMappingURL=summary-button.mjs.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-layouts/panel/summary-button.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { sprintf, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { NormalizedField } from '../../../types';\n\nfunction SummaryButton< Item >( {\n\tsummaryFields,\n\tdata,\n\tlabelPosition,\n\tfieldLabel,\n\tdisabled,\n\tonClick,\n\t'aria-expanded': ariaExpanded,\n}: {\n\tsummaryFields: NormalizedField< Item >[];\n\tdata: Item;\n\tlabelPosition: 'side' | 'top' | 'none';\n\tfieldLabel?: string;\n\tdisabled?: boolean;\n\tonClick: () => void;\n\t'aria-expanded'?: boolean;\n} ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName=\"dataforms-layouts-panel__summary-button\"\n\t\t\tsize=\"compact\"\n\t\t\tvariant={\n\t\t\t\t[ 'none', 'top' ].includes( labelPosition )\n\t\t\t\t\t? 'link'\n\t\t\t\t\t: 'tertiary'\n\t\t\t}\n\t\t\taria-expanded={ ariaExpanded }\n\t\t\taria-label={ sprintf(\n\t\t\t\t// translators: %s: Field name.\n\t\t\t\t_x( 'Edit %s', 'field' ),\n\t\t\t\tfieldLabel || ''\n\t\t\t) }\n\t\t\tonClick={ onClick }\n\t\t\tdisabled={ disabled }\n\t\t\taccessibleWhenDisabled\n\t\t\tstyle={\n\t\t\t\tsummaryFields.length > 1\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tminHeight: 'auto',\n\t\t\t\t\t\t\theight: 'auto',\n\t\t\t\t\t\t\talignItems: 'flex-start',\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t>\n\t\t\t{ summaryFields.length > 1 ? (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\talignItems: 'flex-start',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tgap: '2px',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ summaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) ) }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tsummaryFields.map( ( summaryField ) => (\n\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t</Button>\n\t);\n}\n\nexport default SummaryButton;\n"],
-  "mappings": ";AAGA,SAAS,cAAc;AACvB,SAAS,SAAS,UAAU;AAmErB;AA5DP,SAAS,cAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAClB,GAQI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,MAAK;AAAA,MACL,SACC,CAAE,QAAQ,KAAM,EAAE,SAAU,aAAc,IACvC,SACA;AAAA,MAEJ,iBAAgB;AAAA,MAChB,cAAa;AAAA;AAAA,QAEZ,GAAI,WAAW,OAAQ;AAAA,QACvB,cAAc;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,wBAAsB;AAAA,MACtB,OACC,cAAc,SAAS,IACpB;AAAA,QACA,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,YAAY;AAAA,MACZ,IACA;AAAA,MAGF,wBAAc,SAAS,IACxB;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,YACP,SAAS;AAAA,YACT,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,OAAO;AAAA,YACP,KAAK;AAAA,UACN;AAAA,UAEE,wBAAc,IAAK,CAAE,iBACtB;AAAA,YAAC;AAAA;AAAA,cAEA,OAAQ,EAAE,OAAO,OAAO;AAAA,cAExB;AAAA,gBAAC,aAAa;AAAA,gBAAb;AAAA,kBACA,MAAO;AAAA,kBACP,OAAQ;AAAA;AAAA,cACT;AAAA;AAAA,YANM,aAAa;AAAA,UAOpB,CACC;AAAA;AAAA,MACH,IAEA,cAAc,IAAK,CAAE,iBACpB;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UAEA,MAAO;AAAA,UACP,OAAQ;AAAA;AAAA,QAFF,aAAa;AAAA,MAGpB,CACC;AAAA;AAAA,EAEJ;AAEF;AAEA,IAAO,yBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Button, Icon, Tooltip } from '@wordpress/components';\nimport { sprintf, _x } from '@wordpress/i18n';\nimport { error as errorIcon, pencil } from '@wordpress/icons';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldValidity,\n\tNormalizedField,\n\tNormalizedFormField,\n\tNormalizedPanelLayout,\n} from '../../../types';\nimport getLabelClassName from './utils/get-label-classname';\nimport getLabelContent from './utils/get-label-content';\nimport getFirstValidationError from './utils/get-first-validation-error';\n\nexport default function SummaryButton< Item >( {\n\tdata,\n\tfield,\n\tfieldLabel,\n\tsummaryFields,\n\tvalidity,\n\ttouched,\n\tdisabled,\n\tonClick,\n\t'aria-expanded': ariaExpanded,\n}: {\n\tdata: Item;\n\tfield: NormalizedFormField;\n\tfieldLabel?: string;\n\tsummaryFields: NormalizedField< Item >[];\n\tvalidity?: FieldValidity;\n\ttouched: boolean;\n\tdisabled?: boolean;\n\tonClick: () => void;\n\t'aria-expanded'?: boolean;\n} ) {\n\tconst { labelPosition, editVisibility } =\n\t\tfield.layout as NormalizedPanelLayout;\n\tconst errorMessage = getFirstValidationError( validity );\n\tconst showError = touched && !! errorMessage;\n\tconst labelClassName = getLabelClassName( labelPosition, showError );\n\tconst labelContent = getLabelContent( showError, errorMessage, fieldLabel );\n\tconst className = clsx(\n\t\t'dataforms-layouts-panel__field-trigger',\n\t\t`dataforms-layouts-panel__field-trigger--label-${ labelPosition }`,\n\t\t{\n\t\t\t'is-disabled': disabled,\n\t\t\t'dataforms-layouts-panel__field-trigger--edit-always':\n\t\t\t\teditVisibility === 'always',\n\t\t}\n\t);\n\n\tconst controlId = useInstanceId(\n\t\tSummaryButton,\n\t\t'dataforms-layouts-panel__field-control'\n\t);\n\n\tconst ariaLabel = showError\n\t\t? sprintf(\n\t\t\t\t// translators: %s: Field name.\n\t\t\t\t_x( 'Edit %s (has errors)', 'field' ),\n\t\t\t\tfieldLabel || ''\n\t\t  )\n\t\t: sprintf(\n\t\t\t\t// translators: %s: Field name.\n\t\t\t\t_x( 'Edit %s', 'field' ),\n\t\t\t\tfieldLabel || ''\n\t\t  );\n\n\tconst rowRef = useRef< HTMLDivElement >( null );\n\n\tconst handleRowClick = () => {\n\t\tconst selection =\n\t\t\trowRef.current?.ownerDocument.defaultView?.getSelection();\n\t\tif ( selection && selection.toString().length > 0 ) {\n\t\t\treturn;\n\t\t}\n\t\tonClick();\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tif (\n\t\t\tevent.target === event.currentTarget &&\n\t\t\t( event.key === 'Enter' || event.key === ' ' )\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tonClick();\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tref={ rowRef }\n\t\t\tclassName={ className }\n\t\t\tonClick={ ! disabled ? handleRowClick : undefined }\n\t\t\tonKeyDown={ ! disabled ? handleKeyDown : undefined }\n\t\t>\n\t\t\t{ labelPosition !== 'none' && (\n\t\t\t\t<span className={ labelClassName }>{ labelContent }</span>\n\t\t\t) }\n\t\t\t{ labelPosition === 'none' && showError && (\n\t\t\t\t<Tooltip text={ errorMessage } placement=\"top\">\n\t\t\t\t\t<span className=\"dataforms-layouts-panel__field-label-error-content\">\n\t\t\t\t\t\t<Icon icon={ errorIcon } size={ 16 } />\n\t\t\t\t\t</span>\n\t\t\t\t</Tooltip>\n\t\t\t) }\n\t\t\t<span\n\t\t\t\tid={ `${ controlId }` }\n\t\t\t\tclassName=\"dataforms-layouts-panel__field-control\"\n\t\t\t>\n\t\t\t\t{ summaryFields.length > 1 ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\talignItems: 'flex-start',\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tgap: '2px',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ summaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<summaryField.render\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</span>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tsummaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) )\n\t\t\t\t) }\n\t\t\t</span>\n\t\t\t{ ! disabled && (\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"dataforms-layouts-panel__field-trigger-icon\"\n\t\t\t\t\tlabel={ ariaLabel }\n\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t\ticon={ pencil }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\taria-expanded={ ariaExpanded }\n\t\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\t\taria-describedby={ `${ controlId }` }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/dataform-layouts/panel/utils/get-first-validation-error.mjs

@@ -0,0 +1,38 @@
+// packages/dataviews/src/components/dataform-layouts/panel/utils/get-first-validation-error.ts
+function getFirstValidationError(validity) {
+  if (!validity) {
+    return void 0;
+  }
+  const validityRules = Object.keys(validity).filter(
+    (key) => key !== "children"
+  );
+  for (const key of validityRules) {
+    const rule = validity[key];
+    if (rule === void 0) {
+      continue;
+    }
+    if (rule.type === "invalid") {
+      if (rule.message) {
+        return rule.message;
+      }
+      if (key === "required") {
+        return "A required field is empty";
+      }
+      return "Unidentified validation error";
+    }
+  }
+  if (validity.children) {
+    for (const childValidity of Object.values(validity.children)) {
+      const childError = getFirstValidationError(childValidity);
+      if (childError) {
+        return childError;
+      }
+    }
+  }
+  return void 0;
+}
+var get_first_validation_error_default = getFirstValidationError;
+export {
+  get_first_validation_error_default as default
+};
+//# sourceMappingURL=get-first-validation-error.mjs.map

package/build-module/components/dataform-layouts/panel/utils/get-first-validation-error.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataform-layouts/panel/utils/get-first-validation-error.ts"],
+  "sourcesContent": ["import type { FieldValidity } from '../../../../types';\n\nfunction getFirstValidationError(\n\tvalidity: FieldValidity | undefined\n): string | undefined {\n\tif ( ! validity ) {\n\t\treturn undefined;\n\t}\n\n\tconst validityRules = Object.keys( validity ).filter(\n\t\t( key ) => key !== 'children'\n\t);\n\n\tfor ( const key of validityRules ) {\n\t\tconst rule = validity[ key as keyof Omit< FieldValidity, 'children' > ];\n\t\tif ( rule === undefined ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tif ( rule.type === 'invalid' ) {\n\t\t\tif ( rule.message ) {\n\t\t\t\treturn rule.message;\n\t\t\t}\n\n\t\t\t// Provide default message for required validation (message is optional)\n\t\t\tif ( key === 'required' ) {\n\t\t\t\treturn 'A required field is empty';\n\t\t\t}\n\n\t\t\treturn 'Unidentified validation error';\n\t\t}\n\t}\n\n\t// Check children recursively\n\tif ( validity.children ) {\n\t\tfor ( const childValidity of Object.values( validity.children ) ) {\n\t\t\tconst childError = getFirstValidationError( childValidity );\n\t\t\tif ( childError ) {\n\t\t\t\treturn childError;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn undefined;\n}\n\nexport default getFirstValidationError;\n"],
+  "mappings": ";AAEA,SAAS,wBACR,UACqB;AACrB,MAAK,CAAE,UAAW;AACjB,WAAO;AAAA,EACR;AAEA,QAAM,gBAAgB,OAAO,KAAM,QAAS,EAAE;AAAA,IAC7C,CAAE,QAAS,QAAQ;AAAA,EACpB;AAEA,aAAY,OAAO,eAAgB;AAClC,UAAM,OAAO,SAAU,GAA+C;AACtE,QAAK,SAAS,QAAY;AACzB;AAAA,IACD;AAEA,QAAK,KAAK,SAAS,WAAY;AAC9B,UAAK,KAAK,SAAU;AACnB,eAAO,KAAK;AAAA,MACb;AAGA,UAAK,QAAQ,YAAa;AACzB,eAAO;AAAA,MACR;AAEA,aAAO;AAAA,IACR;AAAA,EACD;AAGA,MAAK,SAAS,UAAW;AACxB,eAAY,iBAAiB,OAAO,OAAQ,SAAS,QAAS,GAAI;AACjE,YAAM,aAAa,wBAAyB,aAAc;AAC1D,UAAK,YAAa;AACjB,eAAO;AAAA,MACR;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AAEA,IAAO,qCAAQ;",
+  "names": []
+}

package/build-module/components/dataform-layouts/panel/utils/get-label-classname.mjs

@@ -0,0 +1,14 @@
+// packages/dataviews/src/components/dataform-layouts/panel/utils/get-label-classname.ts
+import clsx from "clsx";
+function getLabelClassName(labelPosition, showError) {
+  return clsx(
+    "dataforms-layouts-panel__field-label",
+    `dataforms-layouts-panel__field-label--label-position-${labelPosition}`,
+    { "has-error": showError }
+  );
+}
+var get_label_classname_default = getLabelClassName;
+export {
+  get_label_classname_default as default
+};
+//# sourceMappingURL=get-label-classname.mjs.map

package/build-module/components/dataform-layouts/panel/utils/get-label-classname.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataform-layouts/panel/utils/get-label-classname.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { LabelPosition } from '../../../../types';\n\nfunction getLabelClassName(\n\tlabelPosition: LabelPosition,\n\tshowError?: boolean\n) {\n\treturn clsx(\n\t\t'dataforms-layouts-panel__field-label',\n\t\t`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`,\n\t\t{ 'has-error': showError }\n\t);\n}\n\nexport default getLabelClassName;\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAGjB,SAAS,kBACR,eACA,WACC;AACD,SAAO;AAAA,IACN;AAAA,IACA,wDAAyD,aAAc;AAAA,IACvE,EAAE,aAAa,UAAU;AAAA,EAC1B;AACD;AAEA,IAAO,8BAAQ;",
+  "names": []
+}

package/build-module/components/dataform-layouts/panel/utils/get-label-content.mjs

@@ -0,0 +1,15 @@
+// packages/dataviews/src/components/dataform-layouts/panel/utils/get-label-content.tsx
+import { BaseControl, Icon, Tooltip } from "@wordpress/components";
+import { error as errorIcon } from "@wordpress/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getLabelContent(showError, errorMessage, fieldLabel) {
+  return showError ? /* @__PURE__ */ jsx(Tooltip, { text: errorMessage, placement: "top", children: /* @__PURE__ */ jsxs("span", { className: "dataforms-layouts-panel__field-label-error-content", children: [
+    /* @__PURE__ */ jsx(Icon, { icon: errorIcon, size: 16 }),
+    /* @__PURE__ */ jsx(BaseControl.VisualLabel, { children: fieldLabel })
+  ] }) }) : /* @__PURE__ */ jsx(BaseControl.VisualLabel, { children: fieldLabel });
+}
+var get_label_content_default = getLabelContent;
+export {
+  get_label_content_default as default
+};
+//# sourceMappingURL=get-label-content.mjs.map

package/build-module/components/dataform-layouts/panel/utils/get-label-content.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataform-layouts/panel/utils/get-label-content.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { BaseControl, Icon, Tooltip } from '@wordpress/components';\nimport { error as errorIcon } from '@wordpress/icons';\n\nfunction getLabelContent(\n\tshowError?: boolean,\n\terrorMessage?: string,\n\tfieldLabel?: string\n) {\n\treturn showError ? (\n\t\t<Tooltip text={ errorMessage } placement=\"top\">\n\t\t\t<span className=\"dataforms-layouts-panel__field-label-error-content\">\n\t\t\t\t<Icon icon={ errorIcon } size={ 16 } />\n\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t{ fieldLabel }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t</span>\n\t\t</Tooltip>\n\t) : (\n\t\t<BaseControl.VisualLabel>{ fieldLabel }</BaseControl.VisualLabel>\n\t);\n}\n\nexport default getLabelContent;\n"],
+  "mappings": ";AAGA,SAAS,aAAa,MAAM,eAAe;AAC3C,SAAS,SAAS,iBAAiB;AAShC,SACC,KADD;AAPH,SAAS,gBACR,WACA,cACA,YACC;AACD,SAAO,YACN,oBAAC,WAAQ,MAAO,cAAe,WAAU,OACxC,+BAAC,UAAK,WAAU,sDACf;AAAA,wBAAC,QAAK,MAAO,WAAY,MAAO,IAAK;AAAA,IACrC,oBAAC,YAAY,aAAZ,EACE,sBACH;AAAA,KACD,GACD,IAEA,oBAAC,YAAY,aAAZ,EAA0B,sBAAY;AAEzC;AAEA,IAAO,4BAAQ;",
+  "names": []
+}

package/build-module/components/dataform-layouts/panel/utils/use-field-from-form-field.mjs

@@ -0,0 +1,46 @@
+// packages/dataviews/src/components/dataform-layouts/panel/utils/use-field-from-form-field.ts
+import { useContext } from "@wordpress/element";
+import { getSummaryFields } from "../../get-summary-fields.mjs";
+import DataFormContext from "../../../dataform-context/index.mjs";
+var getFieldDefinition = (field, fields) => {
+  const fieldDefinition = fields.find((_field) => _field.id === field.id);
+  if (!fieldDefinition) {
+    return fields.find((_field) => {
+      if (!!field.children) {
+        const simpleChildren = field.children.filter(
+          (child) => !child.children
+        );
+        if (simpleChildren.length === 0) {
+          return false;
+        }
+        return _field.id === simpleChildren[0].id;
+      }
+      return _field.id === field.id;
+    });
+  }
+  return fieldDefinition;
+};
+function useFieldFromFormField(field) {
+  const { fields } = useContext(DataFormContext);
+  const layout = field.layout;
+  const summaryFields = getSummaryFields(layout.summary, fields);
+  const fieldDefinition = getFieldDefinition(field, fields);
+  const fieldLabel = !!field.children ? field.label : fieldDefinition?.label;
+  if (summaryFields.length === 0) {
+    return {
+      summaryFields: fieldDefinition ? [fieldDefinition] : [],
+      fieldDefinition,
+      fieldLabel
+    };
+  }
+  return {
+    summaryFields,
+    fieldDefinition,
+    fieldLabel
+  };
+}
+var use_field_from_form_field_default = useFieldFromFormField;
+export {
+  use_field_from_form_field_default as default
+};
+//# sourceMappingURL=use-field-from-form-field.mjs.map

package/build-module/components/dataform-layouts/panel/utils/use-field-from-form-field.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataform-layouts/panel/utils/use-field-from-form-field.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tNormalizedFormField,\n\tNormalizedField,\n\tNormalizedPanelLayout,\n} from '../../../../types';\nimport { getSummaryFields } from '../../get-summary-fields';\nimport DataFormContext from '../../../dataform-context';\n\nconst getFieldDefinition = < Item >(\n\tfield: NormalizedFormField,\n\tfields: NormalizedField< Item >[]\n) => {\n\tconst fieldDefinition = fields.find( ( _field ) => _field.id === field.id );\n\n\tif ( ! fieldDefinition ) {\n\t\treturn fields.find( ( _field ) => {\n\t\t\tif ( !! field.children ) {\n\t\t\t\tconst simpleChildren = field.children.filter(\n\t\t\t\t\t( child ) => ! child.children\n\t\t\t\t);\n\n\t\t\t\tif ( simpleChildren.length === 0 ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn _field.id === simpleChildren[ 0 ].id;\n\t\t\t}\n\n\t\t\treturn _field.id === field.id;\n\t\t} );\n\t}\n\n\treturn fieldDefinition;\n};\n\n/**\n * Determines the field definition and summary fields for a panel layout.\n *\n * Summary fields are determined with the following priority:\n * 1. Use layout.summary fields if they exist\n * 2. Fall back to the field definition that matches the form field's id\n * 3. If the form field id doesn't exist, pick the first child field\n * 4. If no field definition is found, return empty summary fields\n *\n * @param field The form field to get definition for\n * @return Object containing fieldDefinition, fieldLabel, and summaryFields\n */\nfunction useFieldFromFormField( field: NormalizedFormField ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedPanelLayout;\n\tconst summaryFields = getSummaryFields( layout.summary, fields );\n\tconst fieldDefinition = getFieldDefinition( field, fields );\n\tconst fieldLabel = !! field.children ? field.label : fieldDefinition?.label;\n\n\tif ( summaryFields.length === 0 ) {\n\t\treturn {\n\t\t\tsummaryFields: fieldDefinition ? [ fieldDefinition ] : [],\n\t\t\tfieldDefinition,\n\t\t\tfieldLabel,\n\t\t};\n\t}\n\n\treturn {\n\t\tsummaryFields,\n\t\tfieldDefinition,\n\t\tfieldLabel,\n\t};\n}\n\nexport default useFieldFromFormField;\n"],
+  "mappings": ";AAGA,SAAS,kBAAkB;AAU3B,SAAS,wBAAwB;AACjC,OAAO,qBAAqB;AAE5B,IAAM,qBAAqB,CAC1B,OACA,WACI;AACJ,QAAM,kBAAkB,OAAO,KAAM,CAAE,WAAY,OAAO,OAAO,MAAM,EAAG;AAE1E,MAAK,CAAE,iBAAkB;AACxB,WAAO,OAAO,KAAM,CAAE,WAAY;AACjC,UAAK,CAAC,CAAE,MAAM,UAAW;AACxB,cAAM,iBAAiB,MAAM,SAAS;AAAA,UACrC,CAAE,UAAW,CAAE,MAAM;AAAA,QACtB;AAEA,YAAK,eAAe,WAAW,GAAI;AAClC,iBAAO;AAAA,QACR;AAEA,eAAO,OAAO,OAAO,eAAgB,CAAE,EAAE;AAAA,MAC1C;AAEA,aAAO,OAAO,OAAO,MAAM;AAAA,IAC5B,CAAE;AAAA,EACH;AAEA,SAAO;AACR;AAcA,SAAS,sBAAuB,OAA6B;AAC5D,QAAM,EAAE,OAAO,IAAI,WAAY,eAAgB;AAC/C,QAAM,SAAS,MAAM;AACrB,QAAM,gBAAgB,iBAAkB,OAAO,SAAS,MAAO;AAC/D,QAAM,kBAAkB,mBAAoB,OAAO,MAAO;AAC1D,QAAM,aAAa,CAAC,CAAE,MAAM,WAAW,MAAM,QAAQ,iBAAiB;AAEtE,MAAK,cAAc,WAAW,GAAI;AACjC,WAAO;AAAA,MACN,eAAe,kBAAkB,CAAE,eAAgB,IAAI,CAAC;AAAA,MACxD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AAEA,IAAO,oCAAQ;",
+  "names": []
+}

package/build-module/components/dataform-layouts/regular/index.mjs

@@ -16,7 +16,7 @@ function Header({ title }) {
     {
       direction: "column",
       className: "dataforms-layouts-regular__header",
-      gap: "md",
+      gap: "lg",
       children: /* @__PURE__ */ jsx(Stack, { direction: "row", align: "center", children: /* @__PURE__ */ jsx(Heading, { level: 2, size: 13, children: title }) })
     }
   );
@@ -26,6 +26,7 @@ function FormRegularField({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const { fields } = useContext(DataFormContext);
@@ -64,7 +65,7 @@ function FormRegularField({
       {
         direction: "row",
         className: "dataforms-layouts-regular__field",
-        gap: "xs",
+        gap: "sm",
         children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -73,7 +74,7 @@ function FormRegularField({
                 "dataforms-layouts-regular__field-label",
                 `dataforms-layouts-regular__field-label--label-position-${labelPosition}`
               ),
-              children: fieldDefinition.label
+              children: /* @__PURE__ */ jsx(BaseControl.VisualLabel, { children: fieldDefinition.label })
             }
           ),
           /* @__PURE__ */ jsx("div", { className: "dataforms-layouts-regular__field-control", children: fieldDefinition.readOnly === true ? /* @__PURE__ */ jsx(
@@ -89,6 +90,7 @@ function FormRegularField({
               field: fieldDefinition,
               onChange,
               hideLabelFromVision: true,
+              markWhenOptional,
               validity
             },
             fieldDefinition.id
@@ -113,6 +115,7 @@ function FormRegularField({
       field: fieldDefinition,
       onChange,
       hideLabelFromVision: labelPosition === "none" ? true : hideLabelFromVision,
+      markWhenOptional,
       validity
     }
   ) });

package/build-module/components/dataform-layouts/regular/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-layouts/regular/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalHeading as Heading,\n\tBaseControl,\n} from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldLayoutProps,\n\tNormalizedForm,\n\tNormalizedRegularLayout,\n} from '../../../types';\nimport DataFormContext from '../../dataform-context';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\n\nfunction Header( { title }: { title: string } ) {\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tclassName=\"dataforms-layouts-regular__header\"\n\t\t\tgap=\"md\"\n\t\t>\n\t\t\t<Stack direction=\"row\" align=\"center\">\n\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Heading>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n\nexport default function FormRegularField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedRegularLayout;\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: !! field.children ? field.children : [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tif ( !! field.children ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ ! hideLabelFromVision && field.label && (\n\t\t\t\t\t<Header title={ field.label } />\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}\n\n\tconst labelPosition = layout.labelPosition;\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\tif ( labelPosition === 'side' ) {\n\t\treturn (\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataforms-layouts-regular__field\"\n\t\t\t\tgap=\"xs\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'dataforms-layouts-regular__field-label',\n\t\t\t\t\t\t`dataforms-layouts-regular__field-label--label-position-${ labelPosition }`\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t</div>\n\t\t\t\t<div className=\"dataforms-layouts-regular__field-control\">\n\t\t\t\t\t{ fieldDefinition.readOnly === true ? (\n\t\t\t\t\t\t<fieldDefinition.render\n\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\tfield={ fieldDefinition }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<fieldDefinition.Edit\n\t\t\t\t\t\t\tkey={ fieldDefinition.id }\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tfield={ fieldDefinition }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalidity={ validity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</Stack>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className=\"dataforms-layouts-regular__field\">\n\t\t\t{ fieldDefinition.readOnly === true ? (\n\t\t\t\t<>\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ ! hideLabelFromVision && labelPosition !== 'none' && (\n\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<fieldDefinition.render\n\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\tfield={ fieldDefinition }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<fieldDefinition.Edit\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ fieldDefinition }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\tlabelPosition === 'none' ? true : hideLabelFromVision\n\t\t\t\t\t}\n\t\t\t\t\tvalidity={ validity }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,YAAY,eAAe;AACpC;AAAA,EACC,yBAAyB;AAAA,EACzB;AAAA,OACM;AACP,SAAS,aAAa;AAUtB,OAAO,qBAAqB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAU3B,SA4BD,UA5BC,KA4BD,YA5BC;AARJ,SAAS,OAAQ,EAAE,MAAM,GAAuB;AAC/C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,KAAI;AAAA,MAEJ,8BAAC,SAAM,WAAU,OAAM,OAAM,UAC5B,8BAAC,WAAQ,OAAQ,GAAI,MAAO,IACzB,iBACH,GACD;AAAA;AAAA,EACD;AAEF;AAEe,SAAR,iBAA2C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,EAAE,OAAO,IAAI,WAAY,eAAgB;AAC/C,QAAM,SAAS,MAAM;AAErB,QAAM,OAAuB;AAAA,IAC5B,OAAQ;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,CAAC,CAAE,MAAM,WAAW,MAAM,WAAW,CAAC;AAAA,IAC/C;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAEA,MAAK,CAAC,CAAE,MAAM,UAAW;AACxB,WACC,iCACG;AAAA,OAAE,uBAAuB,MAAM,SAChC,oBAAC,UAAO,OAAQ,MAAM,OAAQ;AAAA,MAE/B;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAW,UAAU;AAAA;AAAA,MACtB;AAAA,OACD;AAAA,EAEF;AAEA,QAAM,gBAAgB,OAAO;AAC7B,QAAM,kBAAkB,OAAO;AAAA,IAC9B,CAAE,aAAc,SAAS,OAAO,MAAM;AAAA,EACvC;AAEA,MAAK,CAAE,mBAAmB,CAAE,gBAAgB,MAAO;AAClD,WAAO;AAAA,EACR;AAEA,MAAK,kBAAkB,QAAS;AAC/B,WACC;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,WAAU;AAAA,QACV,KAAI;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,WAAY;AAAA,gBACX;AAAA,gBACA,0DAA2D,aAAc;AAAA,cAC1E;AAAA,cAEE,0BAAgB;AAAA;AAAA,UACnB;AAAA,UACA,oBAAC,SAAI,WAAU,4CACZ,0BAAgB,aAAa,OAC9B;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACA,MAAO;AAAA,cACP,OAAQ;AAAA;AAAA,UACT,IAEA;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cAEA;AAAA,cACA,OAAQ;AAAA,cACR;AAAA,cACA,qBAAmB;AAAA,cACnB;AAAA;AAAA,YALM,gBAAgB;AAAA,UAMvB,GAEF;AAAA;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,SACC,oBAAC,SAAI,WAAU,oCACZ,0BAAgB,aAAa,OAC9B,gCACC,2CACG;AAAA,KAAE,uBAAuB,kBAAkB,UAC5C,oBAAC,YAAY,aAAZ,EACE,0BAAgB,OACnB;AAAA,IAED;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACA,MAAO;AAAA,QACP,OAAQ;AAAA;AAAA,IACT;AAAA,KACD,GACD,IAEA;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACA;AAAA,MACA,OAAQ;AAAA,MACR;AAAA,MACA,qBACC,kBAAkB,SAAS,OAAO;AAAA,MAEnC;AAAA;AAAA,EACD,GAEF;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalHeading as Heading,\n\tBaseControl,\n} from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldLayoutProps,\n\tNormalizedForm,\n\tNormalizedRegularLayout,\n} from '../../../types';\nimport DataFormContext from '../../dataform-context';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\n\nfunction Header( { title }: { title: string } ) {\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tclassName=\"dataforms-layouts-regular__header\"\n\t\t\tgap=\"lg\"\n\t\t>\n\t\t\t<Stack direction=\"row\" align=\"center\">\n\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Heading>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n\nexport default function FormRegularField< 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 NormalizedRegularLayout;\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT,\n\t\t\tfields: !! field.children ? field.children : [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tif ( !! field.children ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ ! hideLabelFromVision && field.label && (\n\t\t\t\t\t<Header title={ field.label } />\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}\n\n\tconst labelPosition = layout.labelPosition;\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\tif ( labelPosition === 'side' ) {\n\t\treturn (\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataforms-layouts-regular__field\"\n\t\t\t\tgap=\"sm\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'dataforms-layouts-regular__field-label',\n\t\t\t\t\t\t`dataforms-layouts-regular__field-label--label-position-${ labelPosition }`\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"dataforms-layouts-regular__field-control\">\n\t\t\t\t\t{ fieldDefinition.readOnly === true ? (\n\t\t\t\t\t\t<fieldDefinition.render\n\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\tfield={ fieldDefinition }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<fieldDefinition.Edit\n\t\t\t\t\t\t\tkey={ fieldDefinition.id }\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tfield={ fieldDefinition }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\t\t\t\tvalidity={ validity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</Stack>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className=\"dataforms-layouts-regular__field\">\n\t\t\t{ fieldDefinition.readOnly === true ? (\n\t\t\t\t<>\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ ! hideLabelFromVision && labelPosition !== 'none' && (\n\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<fieldDefinition.render\n\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\tfield={ fieldDefinition }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<fieldDefinition.Edit\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ fieldDefinition }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\tlabelPosition === 'none' ? true : hideLabelFromVision\n\t\t\t\t\t}\n\t\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\t\tvalidity={ validity }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,YAAY,eAAe;AACpC;AAAA,EACC,yBAAyB;AAAA,EACzB;AAAA,OACM;AACP,SAAS,aAAa;AAUtB,OAAO,qBAAqB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAU3B,SA6BD,UA7BC,KA6BD,YA7BC;AARJ,SAAS,OAAQ,EAAE,MAAM,GAAuB;AAC/C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,KAAI;AAAA,MAEJ,8BAAC,SAAM,WAAU,OAAM,OAAM,UAC5B,8BAAC,WAAQ,OAAQ,GAAI,MAAO,IACzB,iBACH,GACD;AAAA;AAAA,EACD;AAEF;AAEe,SAAR,iBAA2C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,EAAE,OAAO,IAAI,WAAY,eAAgB;AAC/C,QAAM,SAAS,MAAM;AAErB,QAAM,OAAuB;AAAA,IAC5B,OAAQ;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ,CAAC,CAAE,MAAM,WAAW,MAAM,WAAW,CAAC;AAAA,IAC/C;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAEA,MAAK,CAAC,CAAE,MAAM,UAAW;AACxB,WACC,iCACG;AAAA,OAAE,uBAAuB,MAAM,SAChC,oBAAC,UAAO,OAAQ,MAAM,OAAQ;AAAA,MAE/B;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAW,UAAU;AAAA;AAAA,MACtB;AAAA,OACD;AAAA,EAEF;AAEA,QAAM,gBAAgB,OAAO;AAC7B,QAAM,kBAAkB,OAAO;AAAA,IAC9B,CAAE,aAAc,SAAS,OAAO,MAAM;AAAA,EACvC;AAEA,MAAK,CAAE,mBAAmB,CAAE,gBAAgB,MAAO;AAClD,WAAO;AAAA,EACR;AAEA,MAAK,kBAAkB,QAAS;AAC/B,WACC;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,WAAU;AAAA,QACV,KAAI;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,WAAY;AAAA,gBACX;AAAA,gBACA,0DAA2D,aAAc;AAAA,cAC1E;AAAA,cAEA,8BAAC,YAAY,aAAZ,EACE,0BAAgB,OACnB;AAAA;AAAA,UACD;AAAA,UACA,oBAAC,SAAI,WAAU,4CACZ,0BAAgB,aAAa,OAC9B;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACA,MAAO;AAAA,cACP,OAAQ;AAAA;AAAA,UACT,IAEA;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cAEA;AAAA,cACA,OAAQ;AAAA,cACR;AAAA,cACA,qBAAmB;AAAA,cACnB;AAAA,cACA;AAAA;AAAA,YANM,gBAAgB;AAAA,UAOvB,GAEF;AAAA;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,SACC,oBAAC,SAAI,WAAU,oCACZ,0BAAgB,aAAa,OAC9B,gCACC,2CACG;AAAA,KAAE,uBAAuB,kBAAkB,UAC5C,oBAAC,YAAY,aAAZ,EACE,0BAAgB,OACnB;AAAA,IAED;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACA,MAAO;AAAA,QACP,OAAQ;AAAA;AAAA,IACT;AAAA,KACD,GACD,IAEA;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACA;AAAA,MACA,OAAQ;AAAA,MACR;AAAA,MACA,qBACC,kBAAkB,SAAS,OAAO;AAAA,MAEnC;AAAA,MACA;AAAA;AAAA,EACD,GAEF;AAEF;",
   "names": []
 }

package/build-module/components/dataform-layouts/row/index.mjs

@@ -11,7 +11,7 @@ function Header({ title }) {
     {
       direction: "column",
       className: "dataforms-layouts-row__header",
-      gap: "md",
+      gap: "lg",
       children: /* @__PURE__ */ jsx(Stack, { direction: "row", align: "center", children: /* @__PURE__ */ jsx(Heading, { level: 2, size: 13, children: title }) })
     }
   );
@@ -22,6 +22,7 @@ function FormRowField({
   field,
   onChange,
   hideLabelFromVision,
+  markWhenOptional,
   validity
 }) {
   const layout = field.layout;
@@ -32,7 +33,7 @@ function FormRowField({
     };
     return /* @__PURE__ */ jsxs("div", { className: "dataforms-layouts-row__field", children: [
       !hideLabelFromVision && field.label && /* @__PURE__ */ jsx(Header, { title: field.label }),
-      /* @__PURE__ */ jsx(Stack, { direction: "row", align: layout.alignment, gap: "md", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Stack, { direction: "row", align: layout.alignment, gap: "lg", children: /* @__PURE__ */ jsx(
         DataFormLayout,
         {
           data,
@@ -52,6 +53,7 @@ function FormRowField({
                   field: childField,
                   onChange,
                   hideLabelFromVision,
+                  markWhenOptional,
                   validity: childFieldValidity
                 }
               )
@@ -72,6 +74,7 @@ function FormRowField({
       data,
       field,
       onChange,
+      markWhenOptional,
       validity
     }
   ) }) });

package/build-module/components/dataform-layouts/row/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-layouts/row/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalHeading as Heading } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldLayoutProps,\n\tNormalizedForm,\n\tNormalizedLayout,\n\tNormalizedRowLayout,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport { getFormFieldLayout } from '..';\n\nfunction Header( { title }: { title: string } ) {\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tclassName=\"dataforms-layouts-row__header\"\n\t\t\tgap=\"md\"\n\t\t>\n\t\t\t<Stack direction=\"row\" align=\"center\">\n\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Heading>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n\nconst EMPTY_WRAPPER = ( { children }: { children: React.ReactNode } ) => (\n\t<>{ children }</>\n);\n\nexport default function FormRowField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst layout = field.layout as NormalizedRowLayout;\n\n\tif ( !! field.children ) {\n\t\tconst form: NormalizedForm = {\n\t\t\tlayout: DEFAULT_LAYOUT as NormalizedLayout,\n\t\t\tfields: field.children,\n\t\t};\n\n\t\treturn (\n\t\t\t<div className=\"dataforms-layouts-row__field\">\n\t\t\t\t{ ! hideLabelFromVision && field.label && (\n\t\t\t\t\t<Header title={ field.label } />\n\t\t\t\t) }\n\t\t\t\t<Stack direction=\"row\" align={ layout.alignment } gap=\"md\">\n\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t\t\tas={ EMPTY_WRAPPER }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( FieldLayout, childField, childFieldValidity ) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\t\tclassName=\"dataforms-layouts-row__field-control\"\n\t\t\t\t\t\t\t\tstyle={ layout.styles[ childField.id ] }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</DataFormLayout>\n\t\t\t\t</Stack>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst RegularLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! RegularLayout ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"dataforms-layouts-row__field-control\">\n\t\t\t\t<RegularLayout\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalidity={ validity }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,yBAAyB,eAAe;AACjD,SAAS,aAAa;AAWtB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAU/B,SASH,UATG,KA4BD,YA5BC;AARJ,SAAS,OAAQ,EAAE,MAAM,GAAuB;AAC/C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,KAAI;AAAA,MAEJ,8BAAC,SAAM,WAAU,OAAM,OAAM,UAC5B,8BAAC,WAAQ,OAAQ,GAAI,MAAO,IACzB,iBACH,GACD;AAAA;AAAA,EACD;AAEF;AAEA,IAAM,gBAAgB,CAAE,EAAE,SAAS,MAClC,gCAAI,UAAU;AAGA,SAAR,aAAuC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,SAAS,MAAM;AAErB,MAAK,CAAC,CAAE,MAAM,UAAW;AACxB,UAAM,OAAuB;AAAA,MAC5B,QAAQ;AAAA,MACR,QAAQ,MAAM;AAAA,IACf;AAEA,WACC,qBAAC,SAAI,WAAU,gCACZ;AAAA,OAAE,uBAAuB,MAAM,SAChC,oBAAC,UAAO,OAAQ,MAAM,OAAQ;AAAA,MAE/B,oBAAC,SAAM,WAAU,OAAM,OAAQ,OAAO,WAAY,KAAI,MACrD;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAW,UAAU;AAAA,UACrB,IAAK;AAAA,UAEH,WAAE,aAAa,YAAY,uBAC5B;AAAA,YAAC;AAAA;AAAA,cAEA,WAAU;AAAA,cACV,OAAQ,OAAO,OAAQ,WAAW,EAAG;AAAA,cAErC;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA,OAAQ;AAAA,kBACR;AAAA,kBACA;AAAA,kBACA,UAAW;AAAA;AAAA,cACZ;AAAA;AAAA,YAVM,WAAW;AAAA,UAWlB;AAAA;AAAA,MAEF,GACD;AAAA,OACD;AAAA,EAEF;AAEA,QAAM,gBAAgB,mBAAoB,SAAU,GAAG;AACvD,MAAK,CAAE,eAAgB;AACtB,WAAO;AAAA,EACR;AAEA,SACC,gCACC,8BAAC,SAAI,WAAU,wCACd;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD,GACD,GACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalHeading as Heading } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldLayoutProps,\n\tNormalizedForm,\n\tNormalizedLayout,\n\tNormalizedRowLayout,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport { getFormFieldLayout } from '..';\n\nfunction Header( { title }: { title: string } ) {\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tclassName=\"dataforms-layouts-row__header\"\n\t\t\tgap=\"lg\"\n\t\t>\n\t\t\t<Stack direction=\"row\" align=\"center\">\n\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Heading>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n\nconst EMPTY_WRAPPER = ( { children }: { children: React.ReactNode } ) => (\n\t<>{ children }</>\n);\n\nexport default function FormRowField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tmarkWhenOptional,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst layout = field.layout as NormalizedRowLayout;\n\n\tif ( !! field.children ) {\n\t\tconst form: NormalizedForm = {\n\t\t\tlayout: DEFAULT_LAYOUT as NormalizedLayout,\n\t\t\tfields: field.children,\n\t\t};\n\n\t\treturn (\n\t\t\t<div className=\"dataforms-layouts-row__field\">\n\t\t\t\t{ ! hideLabelFromVision && field.label && (\n\t\t\t\t\t<Header title={ field.label } />\n\t\t\t\t) }\n\t\t\t\t<Stack direction=\"row\" align={ layout.alignment } gap=\"lg\">\n\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t\t\tas={ EMPTY_WRAPPER }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( FieldLayout, childField, childFieldValidity ) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ childField.id }\n\t\t\t\t\t\t\t\tclassName=\"dataforms-layouts-row__field-control\"\n\t\t\t\t\t\t\t\tstyle={ layout.styles[ childField.id ] }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<FieldLayout\n\t\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\t\tfield={ childField }\n\t\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\t\t\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\t\t\t\t\t\tvalidity={ childFieldValidity }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</DataFormLayout>\n\t\t\t\t</Stack>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst RegularLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! RegularLayout ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"dataforms-layouts-row__field-control\">\n\t\t\t\t<RegularLayout\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tfield={ field }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\t\tvalidity={ validity }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,yBAAyB,eAAe;AACjD,SAAS,aAAa;AAWtB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAU/B,SASH,UATG,KA6BD,YA7BC;AARJ,SAAS,OAAQ,EAAE,MAAM,GAAuB;AAC/C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,KAAI;AAAA,MAEJ,8BAAC,SAAM,WAAU,OAAM,OAAM,UAC5B,8BAAC,WAAQ,OAAQ,GAAI,MAAO,IACzB,iBACH,GACD;AAAA;AAAA,EACD;AAEF;AAEA,IAAM,gBAAgB,CAAE,EAAE,SAAS,MAClC,gCAAI,UAAU;AAGA,SAAR,aAAuC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,SAAS,MAAM;AAErB,MAAK,CAAC,CAAE,MAAM,UAAW;AACxB,UAAM,OAAuB;AAAA,MAC5B,QAAQ;AAAA,MACR,QAAQ,MAAM;AAAA,IACf;AAEA,WACC,qBAAC,SAAI,WAAU,gCACZ;AAAA,OAAE,uBAAuB,MAAM,SAChC,oBAAC,UAAO,OAAQ,MAAM,OAAQ;AAAA,MAE/B,oBAAC,SAAM,WAAU,OAAM,OAAQ,OAAO,WAAY,KAAI,MACrD;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAW,UAAU;AAAA,UACrB,IAAK;AAAA,UAEH,WAAE,aAAa,YAAY,uBAC5B;AAAA,YAAC;AAAA;AAAA,cAEA,WAAU;AAAA,cACV,OAAQ,OAAO,OAAQ,WAAW,EAAG;AAAA,cAErC;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA,OAAQ;AAAA,kBACR;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,UAAW;AAAA;AAAA,cACZ;AAAA;AAAA,YAXM,WAAW;AAAA,UAYlB;AAAA;AAAA,MAEF,GACD;AAAA,OACD;AAAA,EAEF;AAEA,QAAM,gBAAgB,mBAAoB,SAAU,GAAG;AACvD,MAAK,CAAE,eAAgB;AACtB,WAAO;AAAA,EACR;AAEA,SACC,gCACC,8BAAC,SAAI,WAAU,wCACd;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD,GACD,GACD;AAEF;",
   "names": []
 }