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

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

@@ -33,196 +33,34 @@ __export(panel_exports, {
   default: () => FormPanelField
 });
 module.exports = __toCommonJS(panel_exports);
-var import_clsx = __toESM(require("clsx"));
-var import_components = require("@wordpress/components");
-var import_element = require("@wordpress/element");
-var import_icons = require("@wordpress/icons");
-var import_ui = require("@wordpress/ui");
-var import_dataform_context = __toESM(require("../../dataform-context/index.cjs"));
-var import_dropdown = __toESM(require("./dropdown.cjs"));
 var import_modal = __toESM(require("./modal.cjs"));
-var import_get_summary_fields = require("../get-summary-fields.cjs");
+var import_dropdown = __toESM(require("./dropdown.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
-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 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;
-};
-var getFieldDefinitionAndSummaryFields = (layout, field, fields) => {
-  const summaryFields = (0, import_get_summary_fields.getSummaryFields)(layout.summary, fields);
-  const fieldDefinition = getFieldDefinition(field, fields);
-  if (summaryFields.length === 0) {
-    return {
-      summaryFields: fieldDefinition ? [fieldDefinition] : [],
-      fieldDefinition
-    };
-  }
-  return {
-    summaryFields,
-    fieldDefinition
-  };
-};
 function FormPanelField({
   data,
   field,
   onChange,
   validity
 }) {
-  const { fields } = (0, import_element.useContext)(import_dataform_context.default);
   const layout = field.layout;
-  const [popoverAnchor, setPopoverAnchor] = (0, import_element.useState)(
-    null
-  );
-  const [touched, setTouched] = (0, import_element.useState)(false);
-  const handleOpen = () => setTouched(true);
-  const { fieldDefinition, summaryFields } = getFieldDefinitionAndSummaryFields(layout, field, fields);
-  if (!fieldDefinition) {
-    return null;
+  if (layout.openAs === "modal") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_modal.default,
+      {
+        data,
+        field,
+        onChange,
+        validity
+      }
+    );
   }
-  const labelPosition = layout.labelPosition;
-  const errorMessage = getFirstValidationError(validity);
-  const showError = touched && !!errorMessage;
-  const labelClassName = (0, import_clsx.default)(
-    "dataforms-layouts-panel__field-label",
-    `dataforms-layouts-panel__field-label--label-position-${labelPosition}`,
-    { "has-error": showError }
-  );
-  const fieldLabel = !!field.children ? field.label : fieldDefinition?.label;
-  const labelContent = showError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: errorMessage, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_ui.Stack,
-    {
-      direction: "row",
-      gap: "xs",
-      className: "dataforms-layouts-panel__field-label-error-content",
-      justify: "flex-start",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { icon: import_icons.error, size: 16 }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fieldLabel })
-      ]
-    }
-  ) }) : fieldLabel;
-  const renderedControl = layout.openAs === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_modal.default,
-    {
-      data,
-      field,
-      onChange,
-      labelPosition,
-      summaryFields,
-      fieldDefinition,
-      onOpen: handleOpen
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_dropdown.default,
     {
       data,
       field,
       onChange,
-      validity,
-      labelPosition,
-      summaryFields,
-      fieldDefinition,
-      popoverAnchor,
-      onOpen: handleOpen
-    }
-  );
-  if (labelPosition === "top") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_ui.Stack,
-      {
-        direction: "column",
-        className: "dataforms-layouts-panel__field",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              className: labelClassName,
-              style: { paddingBottom: 0 },
-              children: labelContent
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-panel__field-control", children: renderedControl })
-        ]
-      }
-    );
-  }
-  if (labelPosition === "none") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_ui.Stack,
-      {
-        direction: "row",
-        gap: "xs",
-        className: "dataforms-layouts-panel__field dataforms-layouts-panel__field--label-position-none",
-        children: [
-          showError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: errorMessage, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Icon,
-            {
-              className: "dataforms-layouts-panel__field-label-error-content",
-              icon: import_icons.error,
-              size: 16
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-panel__field-control", children: renderedControl })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_ui.Stack,
-    {
-      direction: "row",
-      gap: "xs",
-      ref: setPopoverAnchor,
-      className: "dataforms-layouts-panel__field",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: labelClassName, children: labelContent }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-panel__field-control", children: renderedControl })
-      ]
+      validity
     }
   );
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataform-layouts/panel/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, Tooltip } from '@wordpress/components';\nimport { useState, useContext } from '@wordpress/element';\nimport { error as errorIcon } from '@wordpress/icons';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFieldLayoutProps,\n\tFieldValidity,\n\tNormalizedField,\n\tNormalizedFormField,\n\tNormalizedPanelLayout,\n} from '../../../types';\nimport DataFormContext from '../../dataform-context';\nimport PanelDropdown from './dropdown';\nimport PanelModal from './modal';\nimport { getSummaryFields } from '../get-summary-fields';\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\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 layout - The normalized panel layout configuration\n * @param field  - The form field to get definition for\n * @param fields - Array of normalized field definitions\n * @return Object containing fieldDefinition and summaryFields\n */\nconst getFieldDefinitionAndSummaryFields = < Item, >(\n\tlayout: NormalizedPanelLayout,\n\tfield: NormalizedFormField,\n\tfields: NormalizedField< Item >[]\n) => {\n\tconst summaryFields = getSummaryFields( layout.summary, fields );\n\tconst fieldDefinition = getFieldDefinition( field, fields );\n\n\tif ( summaryFields.length === 0 ) {\n\t\treturn {\n\t\t\tsummaryFields: fieldDefinition ? [ fieldDefinition ] : [],\n\t\t\tfieldDefinition,\n\t\t};\n\t}\n\n\treturn {\n\t\tsummaryFields,\n\t\tfieldDefinition,\n\t};\n};\n\nexport default function FormPanelField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedPanelLayout;\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\n\t// Track if the panel has been opened (touched) to only show errors after interaction.\n\tconst [ touched, setTouched ] = useState( false );\n\tconst handleOpen = () => setTouched( true );\n\n\tconst { fieldDefinition, summaryFields } =\n\t\tgetFieldDefinitionAndSummaryFields( layout, field, fields );\n\n\tif ( ! fieldDefinition ) {\n\t\treturn null;\n\t}\n\n\tconst labelPosition = layout.labelPosition;\n\tconst errorMessage = getFirstValidationError( validity );\n\tconst showError = touched && !! errorMessage;\n\tconst labelClassName = clsx(\n\t\t'dataforms-layouts-panel__field-label',\n\t\t`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`,\n\t\t{ 'has-error': showError }\n\t);\n\tconst fieldLabel = !! field.children ? field.label : fieldDefinition?.label;\n\n\tconst labelContent = showError ? (\n\t\t<Tooltip text={ errorMessage } placement=\"top\">\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tgap=\"xs\"\n\t\t\t\tclassName=\"dataforms-layouts-panel__field-label-error-content\"\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t>\n\t\t\t\t<Icon icon={ errorIcon } size={ 16 } />\n\t\t\t\t<>{ fieldLabel }</>\n\t\t\t</Stack>\n\t\t</Tooltip>\n\t) : (\n\t\tfieldLabel\n\t);\n\n\tconst renderedControl =\n\t\tlayout.openAs === 'modal' ? (\n\t\t\t<PanelModal\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t\tonOpen={ handleOpen }\n\t\t\t/>\n\t\t) : (\n\t\t\t<PanelDropdown\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalidity={ validity }\n\t\t\t\tlabelPosition={ labelPosition }\n\t\t\t\tsummaryFields={ summaryFields }\n\t\t\t\tfieldDefinition={ fieldDefinition }\n\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\tonOpen={ handleOpen }\n\t\t\t/>\n\t\t);\n\n\tif ( labelPosition === 'top' ) {\n\t\treturn (\n\t\t\t<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\tclassName=\"dataforms-layouts-panel__field\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ labelClassName }\n\t\t\t\t\tstyle={ { paddingBottom: 0 } }\n\t\t\t\t>\n\t\t\t\t\t{ labelContent }\n\t\t\t\t</div>\n\t\t\t\t<div className=\"dataforms-layouts-panel__field-control\">\n\t\t\t\t\t{ renderedControl }\n\t\t\t\t</div>\n\t\t\t</Stack>\n\t\t);\n\t}\n\n\tif ( labelPosition === 'none' ) {\n\t\treturn (\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tgap=\"xs\"\n\t\t\t\tclassName=\"dataforms-layouts-panel__field dataforms-layouts-panel__field--label-position-none\"\n\t\t\t>\n\t\t\t\t{ showError && (\n\t\t\t\t\t<Tooltip text={ errorMessage } placement=\"top\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"dataforms-layouts-panel__field-label-error-content\"\n\t\t\t\t\t\t\ticon={ errorIcon }\n\t\t\t\t\t\t\tsize={ 16 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) }\n\t\t\t\t<div className=\"dataforms-layouts-panel__field-control\">\n\t\t\t\t\t{ renderedControl }\n\t\t\t\t</div>\n\t\t\t</Stack>\n\t\t);\n\t}\n\n\t// Defaults to label position side.\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\tgap=\"xs\"\n\t\t\tref={ setPopoverAnchor }\n\t\t\tclassName=\"dataforms-layouts-panel__field\"\n\t\t>\n\t\t\t<div className={ labelClassName }>{ labelContent }</div>\n\t\t\t<div className=\"dataforms-layouts-panel__field-control\">\n\t\t\t\t{ renderedControl }\n\t\t\t</div>\n\t\t</Stack>\n\t);\n}\n"],
-  "mappings": "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",
-  "names": ["DataFormContext", "clsx", "errorIcon", "PanelModal", "PanelDropdown"]
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { FieldLayoutProps, NormalizedPanelLayout } from '../../../types';\nimport PanelModal from './modal';\nimport PanelDropdown from './dropdown';\n\nexport default function FormPanelField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst layout = field.layout as NormalizedPanelLayout;\n\n\tif ( layout.openAs === 'modal' ) {\n\t\treturn (\n\t\t\t<PanelModal\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalidity={ validity }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<PanelDropdown\n\t\t\tdata={ data }\n\t\t\tfield={ field }\n\t\t\tonChange={ onChange }\n\t\t\tvalidity={ validity }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAuB;AACvB,sBAA0B;AAYvB;AAVY,SAAR,eAAyC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,QAAM,SAAS,MAAM;AAErB,MAAK,OAAO,WAAW,SAAU;AAChC,WACC;AAAA,MAAC,aAAAA;AAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,SACC;AAAA,IAAC,gBAAAC;AAAA,IAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAEF;",
+  "names": ["PanelModal", "PanelDropdown"]
 }

package/build/components/dataform-layouts/panel/modal.cjs

@@ -43,14 +43,17 @@ var import_data_form_layout = require("../data-form-layout.cjs");
 var import_normalize_form = require("../normalize-form.cjs");
 var import_summary_button = __toESM(require("./summary-button.cjs"));
 var import_use_form_validity = __toESM(require("../../../hooks/use-form-validity.cjs"));
+var import_use_report_validity = __toESM(require("../../../hooks/use-report-validity.cjs"));
 var import_dataform_context = __toESM(require("../../dataform-context/index.cjs"));
+var import_use_field_from_form_field = __toESM(require("./utils/use-field-from-form-field.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 function ModalContent({
   data,
   field,
   onChange,
   fieldLabel,
-  onClose
+  onClose,
+  touched
 }) {
   const { fields } = (0, import_element.useContext)(import_dataform_context.default);
   const [changes, setChanges] = (0, import_element.useState)({});
@@ -95,6 +98,9 @@ function ModalContent({
     );
   };
   const focusOnMountRef = (0, import_compose.useFocusOnMount)("firstInputElement");
+  const contentRef = (0, import_element.useRef)(null);
+  const mergedRef = (0, import_compose.useMergeRefs)([focusOnMountRef, contentRef]);
+  (0, import_use_report_validity.default)(contentRef, touched);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_components.Modal,
     {
@@ -104,20 +110,21 @@ function ModalContent({
       title: fieldLabel,
       size: "medium",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: focusOnMountRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: mergedRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_data_form_layout.DataFormLayout,
           {
             data: modalData,
             form,
             onChange: handleOnChange,
             validity,
-            children: (FieldLayout, childField, childFieldValidity) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            children: (FieldLayout, childField, childFieldValidity, markWhenOptional) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               FieldLayout,
               {
                 data: modalData,
                 field: childField,
                 onChange: handleOnChange,
                 hideLabelFromVision: form.fields.length < 2,
+                markWhenOptional,
                 validity: childFieldValidity
               },
               childField.id
@@ -129,7 +136,7 @@ function ModalContent({
           {
             direction: "row",
             className: "dataforms-layouts-panel__modal-footer",
-            gap: "sm",
+            gap: "md",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { style: { flex: 1 } }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -161,28 +168,30 @@ function PanelModal({
   data,
   field,
   onChange,
-  labelPosition,
-  summaryFields,
-  fieldDefinition,
-  onOpen
+  validity
 }) {
+  const [touched, setTouched] = (0, import_element.useState)(false);
   const [isOpen, setIsOpen] = (0, import_element.useState)(false);
-  const fieldLabel = !!field.children ? field.label : fieldDefinition?.label;
+  const { fieldDefinition, fieldLabel, summaryFields } = (0, import_use_field_from_form_field.default)(field);
+  if (!fieldDefinition) {
+    return null;
+  }
+  const handleClose = () => {
+    setIsOpen(false);
+    setTouched(true);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_summary_button.default,
       {
-        summaryFields,
         data,
-        labelPosition,
+        field,
         fieldLabel,
+        summaryFields,
+        validity,
+        touched,
         disabled: fieldDefinition.readOnly === true,
-        onClick: () => {
-          if (onOpen) {
-            onOpen();
-          }
-          setIsOpen(true);
-        },
+        onClick: () => setIsOpen(true),
         "aria-expanded": isOpen
       }
     ),
@@ -193,7 +202,8 @@ function PanelModal({
         field,
         onChange,
         fieldLabel: fieldLabel ?? "",
-        onClose: () => setIsOpen(false)
+        onClose: handleClose,
+        touched
       }
     )
   ] });

package/build/components/dataform-layouts/panel/modal.cjs.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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",
-  "names": ["DataFormContext", "deepMerge", "useFormValidity", "Spacer", "SummaryButton"]
+  "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": ["DataFormContext", "deepMerge", "useFormValidity", "useReportValidity", "Spacer", "useFieldFromFormField", "SummaryButton"]
 }

package/build/components/dataform-layouts/panel/summary-button.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,81 +17,148 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // packages/dataviews/src/components/dataform-layouts/panel/summary-button.tsx
 var summary_button_exports = {};
 __export(summary_button_exports, {
-  default: () => summary_button_default
+  default: () => SummaryButton
 });
 module.exports = __toCommonJS(summary_button_exports);
+var import_clsx = __toESM(require("clsx"));
 var import_components = require("@wordpress/components");
 var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_compose = require("@wordpress/compose");
+var import_element = require("@wordpress/element");
+var import_get_label_classname = __toESM(require("./utils/get-label-classname.cjs"));
+var import_get_label_content = __toESM(require("./utils/get-label-content.cjs"));
+var import_get_first_validation_error = __toESM(require("./utils/get-first-validation-error.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 function SummaryButton({
-  summaryFields,
   data,
-  labelPosition,
+  field,
   fieldLabel,
+  summaryFields,
+  validity,
+  touched,
   disabled,
   onClick,
   "aria-expanded": ariaExpanded
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_components.Button,
+  const { labelPosition, editVisibility } = field.layout;
+  const errorMessage = (0, import_get_first_validation_error.default)(validity);
+  const showError = touched && !!errorMessage;
+  const labelClassName = (0, import_get_label_classname.default)(labelPosition, showError);
+  const labelContent = (0, import_get_label_content.default)(showError, errorMessage, fieldLabel);
+  const className = (0, import_clsx.default)(
+    "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 = (0, import_compose.useInstanceId)(
+    SummaryButton,
+    "dataforms-layouts-panel__field-control"
+  );
+  const ariaLabel = showError ? (0, import_i18n.sprintf)(
+    // translators: %s: Field name.
+    (0, import_i18n._x)("Edit %s (has errors)", "field"),
+    fieldLabel || ""
+  ) : (0, import_i18n.sprintf)(
+    // translators: %s: Field name.
+    (0, import_i18n._x)("Edit %s", "field"),
+    fieldLabel || ""
+  );
+  const rowRef = (0, import_element.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__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
     {
-      className: "dataforms-layouts-panel__summary-button",
-      size: "compact",
-      variant: ["none", "top"].includes(labelPosition) ? "link" : "tertiary",
-      "aria-expanded": ariaExpanded,
-      "aria-label": (0, import_i18n.sprintf)(
-        // translators: %s: Field name.
-        (0, import_i18n._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__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            width: "100%",
-            gap: "2px"
-          },
-          children: summaryFields.map((summaryField) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              style: { width: "100%" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                summaryField.render,
-                {
-                  item: data,
-                  field: summaryField
-                }
-              )
-            },
-            summaryField.id
-          ))
-        }
-      ) : summaryFields.map((summaryField) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: labelClassName, children: labelContent }),
+        labelPosition === "none" && showError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: errorMessage, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataforms-layouts-panel__field-label-error-content", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { icon: import_icons.error, size: 16 }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            id: `${controlId}`,
+            className: "dataforms-layouts-panel__field-control",
+            children: summaryFields.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "flex-start",
+                  width: "100%",
+                  gap: "2px"
+                },
+                children: summaryFields.map((summaryField) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    style: { width: "100%" },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      summaryField.render,
+                      {
+                        item: data,
+                        field: summaryField
+                      }
+                    )
+                  },
+                  summaryField.id
+                ))
+              }
+            ) : summaryFields.map((summaryField) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              summaryField.render,
+              {
+                item: data,
+                field: summaryField
+              },
+              summaryField.id
+            ))
+          }
+        ),
+        !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            className: "dataforms-layouts-panel__field-trigger-icon",
+            label: ariaLabel,
+            showTooltip: false,
+            icon: import_icons.pencil,
+            size: "small",
+            "aria-expanded": ariaExpanded,
+            "aria-haspopup": "dialog",
+            "aria-describedby": `${controlId}`
+          }
+        )
+      ]
     }
   );
 }
-var summary_button_default = SummaryButton;
 //# sourceMappingURL=summary-button.cjs.map