@wordpress/dataviews 7.0.1-next.0f6f9d12c.0 → 7.0.1-next.f34ab90e9.0

package/build-wp/index.js

@@ -5315,7 +5315,7 @@ function addContainer(ariaLive = "polite") {
   const container = document.createElement("div");
   container.id = `a11y-speak-${ariaLive}`;
   container.className = "a11y-speak-region";
-  container.setAttribute("style", "position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;");
+  container.setAttribute("style", "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;");
   container.setAttribute("aria-live", ariaLive);
   container.setAttribute("aria-relevant", "additions text");
   container.setAttribute("aria-atomic", "true");
@@ -5335,8 +5335,8 @@ function addIntroText() {
   introText.id = "a11y-speak-intro-text";
   introText.className = "a11y-speak-intro-text";
   introText.textContent = __3("Notifications");
-  introText.setAttribute("style", "position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;");
-  introText.setAttribute("hidden", "hidden");
+  introText.setAttribute("style", "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;");
+  introText.setAttribute("hidden", "");
   const {
     body
   } = document;
@@ -12515,15 +12515,41 @@ var DateRangeCalendar = ({
 
 // ../components/build-module/validated-form-controls/control-with-error.js
 import { __ as __15 } from "@wordpress/i18n";
-import { Fragment as _Fragment11, jsxs as _jsxs32, jsx as _jsx134 } from "react/jsx-runtime";
+
+// ../components/build-module/validated-form-controls/validity-indicator.js
+import clsx28 from "clsx";
+import { jsx as _jsx134, jsxs as _jsxs32 } from "react/jsx-runtime";
+function ValidityIndicator({
+  type,
+  message
+}) {
+  const ICON = {
+    valid: published_default,
+    invalid: error_default
+  };
+  return /* @__PURE__ */ _jsxs32("p", {
+    className: clsx28("components-validated-control__indicator", `is-${type}`),
+    children: [type === "validating" ? /* @__PURE__ */ _jsx134(spinner_default, {
+      className: "components-validated-control__indicator-spinner"
+    }) : /* @__PURE__ */ _jsx134(icon_default2, {
+      className: "components-validated-control__indicator-icon",
+      icon: ICON[type],
+      size: 16,
+      fill: "currentColor"
+    }), message]
+  });
+}
+
+// ../components/build-module/validated-form-controls/control-with-error.js
+import { Fragment as _Fragment11, jsxs as _jsxs33, jsx as _jsx135 } from "react/jsx-runtime";
 function appendRequiredIndicator(label, required, markWhenOptional) {
   if (required && !markWhenOptional) {
-    return /* @__PURE__ */ _jsxs32(_Fragment11, {
+    return /* @__PURE__ */ _jsxs33(_Fragment11, {
       children: [label, " ", `(${__15("Required")})`]
     });
   }
   if (!required && markWhenOptional) {
-    return /* @__PURE__ */ _jsxs32(_Fragment11, {
+    return /* @__PURE__ */ _jsxs33(_Fragment11, {
       children: [label, " ", `(${__15("Optional")})`]
     });
   }
@@ -12532,11 +12558,13 @@ function appendRequiredIndicator(label, required, markWhenOptional) {
 function UnforwardedControlWithError({
   required,
   markWhenOptional,
-  customValidator,
+  onValidate,
+  customValidity,
   getValidityTarget,
   children
 }, forwardedRef) {
   const [errorMessage, setErrorMessage] = useState();
+  const [statusMessage, setStatusMessage] = useState();
   const [isTouched, setIsTouched] = useState(false);
   useEffect(() => {
     const validityTarget = getValidityTarget();
@@ -12546,12 +12574,45 @@ function UnforwardedControlWithError({
       validityTarget?.removeEventListener("invalid", showValidationMessage);
     };
   });
-  const validate = () => {
-    const message = customValidator?.();
+  useEffect(() => {
+    if (!isTouched) {
+      return;
+    }
     const validityTarget = getValidityTarget();
-    validityTarget?.setCustomValidity(message !== null && message !== void 0 ? message : "");
-    setErrorMessage(validityTarget?.validationMessage);
-  };
+    if (!customValidity?.type) {
+      validityTarget?.setCustomValidity("");
+      setErrorMessage(validityTarget?.validationMessage);
+      setStatusMessage(void 0);
+      return;
+    }
+    switch (customValidity.type) {
+      case "validating": {
+        const timer = setTimeout(() => {
+          setStatusMessage({
+            type: "validating",
+            message: customValidity.message
+          });
+        }, 1e3);
+        return () => clearTimeout(timer);
+      }
+      case "valid": {
+        validityTarget?.setCustomValidity("");
+        setErrorMessage(validityTarget?.validationMessage);
+        setStatusMessage({
+          type: "valid",
+          message: customValidity.message
+        });
+        return;
+      }
+      case "invalid": {
+        var _customValidity$messa;
+        validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : "");
+        setErrorMessage(validityTarget?.validationMessage);
+        setStatusMessage(void 0);
+        return void 0;
+      }
+    }
+  }, [isTouched, customValidity?.type, customValidity?.message, getValidityTarget]);
   const onBlur = (event) => {
     if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
       setIsTouched(true);
@@ -12562,24 +12623,24 @@ function UnforwardedControlWithError({
         }
         return;
       }
-      validate();
+      onValidate?.();
     }
   };
   const onChange = (...args) => {
     children.props.onChange?.(...args);
     if (isTouched || errorMessage) {
-      validate();
+      onValidate?.();
     }
   };
   const onKeyDown = (event) => {
     if (event.key === "Enter") {
-      validate();
+      onValidate?.();
     }
   };
   return (
     // Disable reason: Just listening to a bubbled event, not for interaction.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ _jsxs32("div", {
+    /* @__PURE__ */ _jsxs33("div", {
       className: "components-validated-control",
       ref: forwardedRef,
       onBlur,
@@ -12588,17 +12649,15 @@ function UnforwardedControlWithError({
         label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
         onChange,
         required
-      }), /* @__PURE__ */ _jsx134("div", {
+      }), /* @__PURE__ */ _jsxs33("div", {
         "aria-live": "polite",
-        children: errorMessage && /* @__PURE__ */ _jsxs32("p", {
-          className: "components-validated-control__error",
-          children: [/* @__PURE__ */ _jsx134(icon_default2, {
-            className: "components-validated-control__error-icon",
-            icon: error_default,
-            size: 16,
-            fill: "currentColor"
-          }), errorMessage]
-        })
+        children: [errorMessage && /* @__PURE__ */ _jsx135(ValidityIndicator, {
+          type: "invalid",
+          message: errorMessage
+        }), !errorMessage && statusMessage && /* @__PURE__ */ _jsx135(ValidityIndicator, {
+          type: statusMessage.type,
+          message: statusMessage.message
+        })]
       })]
     })
   );
@@ -12606,10 +12665,11 @@ function UnforwardedControlWithError({
 var ControlWithError = forwardRef(UnforwardedControlWithError);
 
 // ../components/build-module/validated-form-controls/components/number-control.js
-import { jsx as _jsx135 } from "react/jsx-runtime";
+import { jsx as _jsx136 } from "react/jsx-runtime";
 var UnforwardedValidatedNumberControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -12617,14 +12677,15 @@ var UnforwardedValidatedNumberControl = ({
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
   const valueRef = useRef(restProps.value);
-  return /* @__PURE__ */ _jsx135(ControlWithError, {
+  return /* @__PURE__ */ _jsx136(ControlWithError, {
     required,
     markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity,
     getValidityTarget: () => validityTargetRef.current,
-    children: /* @__PURE__ */ _jsx135(number_control_default, {
+    children: /* @__PURE__ */ _jsx136(number_control_default, {
       __next40pxDefaultSize: true,
       ref: mergedRefs,
       onChange: (value, ...args) => {
@@ -12638,10 +12699,11 @@ var UnforwardedValidatedNumberControl = ({
 var ValidatedNumberControl = forwardRef(UnforwardedValidatedNumberControl);
 
 // ../components/build-module/validated-form-controls/components/text-control.js
-import { jsx as _jsx136 } from "react/jsx-runtime";
+import { jsx as _jsx137 } from "react/jsx-runtime";
 var UnforwardedValidatedTextControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -12649,14 +12711,15 @@ var UnforwardedValidatedTextControl = ({
   const validityTargetRef = useRef(null);
   const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);
   const valueRef = useRef(restProps.value);
-  return /* @__PURE__ */ _jsx136(ControlWithError, {
+  return /* @__PURE__ */ _jsx137(ControlWithError, {
     required,
     markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity,
     getValidityTarget: () => validityTargetRef.current,
-    children: /* @__PURE__ */ _jsx136(text_control_default, {
+    children: /* @__PURE__ */ _jsx137(text_control_default, {
       __next40pxDefaultSize: true,
       __nextHasNoMarginBottom: true,
       ref: mergedRefs,
@@ -12671,10 +12734,11 @@ var UnforwardedValidatedTextControl = ({
 var ValidatedTextControl = forwardRef(UnforwardedValidatedTextControl);
 
 // ../components/build-module/validated-form-controls/components/toggle-control.js
-import { jsx as _jsx137 } from "react/jsx-runtime";
+import { jsx as _jsx138 } from "react/jsx-runtime";
 var UnforwardedValidatedToggleControl = ({
   required,
-  customValidator,
+  onValidate,
+  customValidity,
   onChange,
   markWhenOptional,
   ...restProps
@@ -12687,14 +12751,15 @@ var UnforwardedValidatedToggleControl = ({
       validityTargetRef.current.required = required !== null && required !== void 0 ? required : false;
     }
   }, [required]);
-  return /* @__PURE__ */ _jsx137(ControlWithError, {
+  return /* @__PURE__ */ _jsx138(ControlWithError, {
     required,
     markWhenOptional,
-    customValidator: () => {
-      return customValidator?.(valueRef.current);
+    onValidate: () => {
+      return onValidate?.(valueRef.current);
     },
+    customValidity,
     getValidityTarget: () => validityTargetRef.current,
-    children: /* @__PURE__ */ _jsx137(toggle_control_default, {
+    children: /* @__PURE__ */ _jsx138(toggle_control_default, {
       __nextHasNoMarginBottom: true,
       ref: mergedRefs,
       onChange: (value) => {
@@ -12937,13 +13002,13 @@ var dataviews_context_default = DataViewsContext;
 import { __ as __21, _x } from "@wordpress/i18n";
 
 // src/components/dataviews-filters/filter.tsx
-import clsx29 from "clsx";
+import clsx30 from "clsx";
 import { __ as __18, sprintf as sprintf5 } from "@wordpress/i18n";
 
 // src/components/dataviews-filters/search-widget.tsx
 import * as Ariakit21 from "@ariakit/react";
 import removeAccents2 from "remove-accents";
-import clsx28 from "clsx";
+import clsx29 from "clsx";
 import { __ as __17, sprintf as sprintf4 } from "@wordpress/i18n";
 
 // src/components/dataviews-filters/utils.ts
@@ -12982,7 +13047,7 @@ var MultiSelectionOption = ({ selected }) => {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: clsx28(
+      className: clsx29(
         "dataviews-filters__search-widget-listitem-multi-selection",
         { "is-selected": selected }
       ),
@@ -12994,7 +13059,7 @@ var SingleSelectionOption = ({ selected }) => {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: clsx28(
+      className: clsx29(
         "dataviews-filters__search-widget-listitem-single-selection",
         { "is-selected": selected }
       )
@@ -13714,7 +13779,7 @@ function Filter({
             children: /* @__PURE__ */ jsx3(
               "div",
               {
-                className: clsx29(
+                className: clsx30(
                   "dataviews-filters__summary-chip",
                   {
                     "has-reset": canResetOrRemove,
@@ -13759,7 +13824,7 @@ function Filter({
             children: /* @__PURE__ */ jsx3(
               "button",
               {
-                className: clsx29(
+                className: clsx30(
                   "dataviews-filters__summary-chip-remove",
                   { "has-values": hasValues }
                 ),
@@ -14109,7 +14174,7 @@ import { __ as __33 } from "@wordpress/i18n";
 import { __ as __32, isRTL as isRTL9 } from "@wordpress/i18n";
 
 // src/dataviews-layouts/table/index.tsx
-import clsx30 from "clsx";
+import clsx31 from "clsx";
 import { __ as __27, sprintf as sprintf8 } from "@wordpress/i18n";
 
 // src/components/dataviews-selection-checkbox/index.tsx
@@ -14250,16 +14315,6 @@ function ItemActions({
       }
     );
   }
-  if (primaryActions.length === eligibleActions.length) {
-    return /* @__PURE__ */ jsx8(
-      PrimaryActions,
-      {
-        item: item2,
-        actions: primaryActions,
-        registry
-      }
-    );
-  }
   return /* @__PURE__ */ jsxs5(
     component_default9,
     {
@@ -14279,7 +14334,7 @@ function ItemActions({
             registry
           }
         ),
-        /* @__PURE__ */ jsx8(
+        primaryActions.length < eligibleActions.length && /* @__PURE__ */ jsx8(
           CompactItemActions,
           {
             item: item2,
@@ -15044,7 +15099,7 @@ function TableColumnField({
   if (!field) {
     return null;
   }
-  const className = clsx30("dataviews-view-table__cell-content-wrapper", {
+  const className = clsx31("dataviews-view-table__cell-content-wrapper", {
     "dataviews-view-table__cell-align-end": align === "end",
     "dataviews-view-table__cell-align-center": align === "center"
   });
@@ -15092,7 +15147,7 @@ function TableRow({
   return /* @__PURE__ */ jsxs9(
     "tr",
     {
-      className: clsx30("dataviews-view-table__row", {
+      className: clsx31("dataviews-view-table__row", {
         "is-selected": hasPossibleBulkAction && isSelected,
         "is-hovered": isHovered,
         "has-bulk-actions": hasPossibleBulkAction
@@ -15182,7 +15237,7 @@ function TableRow({
         /* @__PURE__ */ jsx13(
           "td",
           {
-            className: clsx30("dataviews-view-table__actions-column", {
+            className: clsx31("dataviews-view-table__actions-column", {
               "dataviews-view-table__actions-column--sticky": true,
               "dataviews-view-table__actions-column--stuck": isActionsColumnSticky
             }),
@@ -15271,7 +15326,7 @@ function ViewTable({
     /* @__PURE__ */ jsxs9(
       "table",
       {
-        className: clsx30("dataviews-view-table", className, {
+        className: clsx31("dataviews-view-table", className, {
           [`has-${view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes(
             view.layout.density
           )
@@ -15347,7 +15402,7 @@ function ViewTable({
             !!actions?.length && /* @__PURE__ */ jsx13(
               "th",
               {
-                className: clsx30(
+                className: clsx31(
                   "dataviews-view-table__actions-column",
                   {
                     "dataviews-view-table__actions-column--sticky": true,
@@ -15427,7 +15482,7 @@ function ViewTable({
     /* @__PURE__ */ jsxs9(
       "div",
       {
-        className: clsx30({
+        className: clsx31({
           "dataviews-loading": isLoading,
           "dataviews-no-results": !hasData && !isLoading
         }),
@@ -15443,7 +15498,7 @@ function ViewTable({
 var table_default = ViewTable;
 
 // src/dataviews-layouts/grid/index.tsx
-import clsx31 from "clsx";
+import clsx32 from "clsx";
 import { __ as __28, sprintf as sprintf9 } from "@wordpress/i18n";
 import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var { Badge: Badge2 } = unlock3(privateApis);
@@ -15506,7 +15561,7 @@ function GridItem({
     component_default14,
     {
       spacing: 0,
-      className: clsx31("dataviews-view-grid__card", {
+      className: clsx32("dataviews-view-grid__card", {
         "is-selected": hasBulkAction && isSelected
       }),
       onClickCapture: (event) => {
@@ -15714,7 +15769,7 @@ function ViewGrid({
           /* @__PURE__ */ jsx14(
             "div",
             {
-              className: clsx31(
+              className: clsx32(
                 "dataviews-view-grid",
                 className
               ),
@@ -15757,7 +15812,7 @@ function ViewGrid({
       hasData && !dataByGroup && /* @__PURE__ */ jsx14(
         "div",
         {
-          className: clsx31("dataviews-view-grid", className),
+          className: clsx32("dataviews-view-grid", className),
           style: {
             gridTemplateColumns: usedPreviewSize && `repeat(auto-fill, minmax(${usedPreviewSize}px, 1fr))`
           },
@@ -15797,7 +15852,7 @@ function ViewGrid({
       !hasData && /* @__PURE__ */ jsx14(
         "div",
         {
-          className: clsx31({
+          className: clsx32({
             "dataviews-loading": isLoading,
             "dataviews-no-results": !isLoading
           }),
@@ -15811,7 +15866,7 @@ function ViewGrid({
 var grid_default = ViewGrid;
 
 // src/dataviews-layouts/list/index.tsx
-import clsx32 from "clsx";
+import clsx33 from "clsx";
 import { __ as __29 } from "@wordpress/i18n";
 import { useRegistry as useRegistry3 } from "@wordpress/data";
 import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -16017,7 +16072,7 @@ function ListItem({
         )
       ),
       role: infiniteScrollEnabled ? "article" : "row",
-      className: clsx32({
+      className: clsx33({
         "is-selected": isSelected,
         "is-hovered": isHovered
       }),
@@ -16205,7 +16260,7 @@ function ViewList(props) {
     return /* @__PURE__ */ jsx15(
       "div",
       {
-        className: clsx32({
+        className: clsx33({
           "dataviews-loading": isLoading,
           "dataviews-no-results": !hasData && !isLoading
         }),
@@ -16219,7 +16274,7 @@ function ViewList(props) {
       {
         id: baseId,
         render: /* @__PURE__ */ jsx15("div", {}),
-        className: clsx32("dataviews-view-list", className),
+        className: clsx33("dataviews-view-list", className),
         role: view.infiniteScrollEnabled ? "feed" : "grid",
         activeId: activeCompositeId,
         setActiveId: setActiveCompositeId,
@@ -16629,7 +16684,7 @@ var DataViewsSearch = memo(function Search({ label }) {
 var dataviews_search_default = DataViewsSearch;
 
 // src/components/dataviews-view-config/index.tsx
-import clsx33 from "clsx";
+import clsx34 from "clsx";
 import { __ as __37, _x as _x4, sprintf as sprintf11 } from "@wordpress/i18n";
 
 // src/components/dataviews-view-config/infinite-scroll-toggle.tsx
@@ -16927,7 +16982,7 @@ function FieldItem({
     component_default9,
     {
       expanded: true,
-      className: clsx33(
+      className: clsx34(
         "dataviews-field-control__field",
         `dataviews-field-control__field-${field.id}`,
         // The actions are hidden when the mouse is not hovering the item, or focus
@@ -17791,7 +17846,7 @@ function Checkbox({
 }
 
 // src/dataform-controls/relative-date-control.tsx
-import clsx34 from "clsx";
+import clsx35 from "clsx";
 import { __ as __47 } from "@wordpress/i18n";
 import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var TIME_UNITS_OPTIONS = {
@@ -17835,7 +17890,7 @@ function RelativeDateControl({
     {
       id,
       __nextHasNoMarginBottom: true,
-      className: clsx34(className, "dataviews-controls__relative-date"),
+      className: clsx35(className, "dataviews-controls__relative-date"),
       label,
       hideLabelFromVision,
       children: /* @__PURE__ */ jsxs16(component_default9, { spacing: 2.5, children: [
@@ -18340,6 +18395,7 @@ function Email({
 }) {
   const { id, label, placeholder, description } = field;
   const value = field.getValue({ item: data });
+  const [customValidity, setCustomValidity] = useState(void 0);
   const onChangeControl = useCallback(
     (newValue) => onChange({
       [id]: newValue
@@ -18350,18 +18406,24 @@ function Email({
     ValidatedTextControl2,
     {
       required: !!field.isValid?.required,
-      customValidator: (newValue) => {
-        if (field.isValid?.custom) {
-          return field.isValid.custom(
-            {
-              ...data,
-              [id]: newValue
-            },
-            field
-          );
+      onValidate: (newValue) => {
+        const message = field.isValid?.custom?.(
+          {
+            ...data,
+            [id]: newValue
+          },
+          field
+        );
+        if (message) {
+          setCustomValidity({
+            type: "invalid",
+            message
+          });
+          return;
         }
-        return null;
+        setCustomValidity(void 0);
       },
+      customValidity,
       type: "email",
       label,
       placeholder,
@@ -18439,6 +18501,7 @@ function Integer({
 }) {
   const { id, label, description } = field;
   const value = field.getValue({ item: data }) ?? "";
+  const [customValidity, setCustomValidity] = useState(void 0);
   const onChangeControl = useCallback(
     (newValue) => {
       onChange({
@@ -18465,18 +18528,24 @@ function Integer({
     ValidatedNumberControl2,
     {
       required: !!field.isValid?.required,
-      customValidator: (newValue) => {
-        if (field.isValid?.custom) {
-          return field.isValid.custom(
-            {
-              ...data,
-              [id]: [void 0, "", null].includes(newValue) ? void 0 : Number(newValue)
-            },
-            field
-          );
+      onValidate: (newValue) => {
+        const message = field.isValid?.custom?.(
+          {
+            ...data,
+            [id]: [void 0, "", null].includes(newValue) ? void 0 : Number(newValue)
+          },
+          field
+        );
+        if (message) {
+          setCustomValidity({
+            type: "invalid",
+            message
+          });
+          return;
         }
-        return null;
+        setCustomValidity(void 0);
       },
+      customValidity,
       label,
       help: description,
       value,
@@ -18578,6 +18647,7 @@ function Text3({
 }) {
   const { id, label, placeholder, description } = field;
   const value = field.getValue({ item: data });
+  const [customValidity, setCustomValidity] = useState(void 0);
   const onChangeControl = useCallback(
     (newValue) => onChange({
       [id]: newValue
@@ -18588,18 +18658,24 @@ function Text3({
     ValidatedTextControl3,
     {
       required: !!field.isValid?.required,
-      customValidator: (newValue) => {
-        if (field.isValid?.custom) {
-          return field.isValid.custom(
-            {
-              ...data,
-              [id]: newValue
-            },
-            field
-          );
+      onValidate: (newValue) => {
+        const message = field.isValid?.custom?.(
+          {
+            ...data,
+            [id]: newValue
+          },
+          field
+        );
+        if (message) {
+          setCustomValidity({
+            type: "invalid",
+            message
+          });
+          return;
         }
-        return null;
+        setCustomValidity(void 0);
       },
+      customValidity,
       label,
       placeholder,
       value: value ?? "",
@@ -18667,22 +18743,29 @@ function Boolean2({
   hideLabelFromVision
 }) {
   const { id, getValue, label } = field;
+  const [customValidity, setCustomValidity] = useState(void 0);
   return /* @__PURE__ */ jsx34(
     ValidatedToggleControl2,
     {
       required: !!field.isValid.required,
-      customValidator: (newValue) => {
-        if (field.isValid?.custom) {
-          return field.isValid.custom(
-            {
-              ...data,
-              [id]: newValue
-            },
-            field
-          );
+      onValidate: (newValue) => {
+        const message = field.isValid?.custom?.(
+          {
+            ...data,
+            [id]: newValue
+          },
+          field
+        );
+        if (message) {
+          setCustomValidity({
+            type: "invalid",
+            message
+          });
+          return;
         }
-        return null;
+        setCustomValidity(void 0);
       },
+      customValidity,
       hidden: hideLabelFromVision,
       __nextHasNoMarginBottom: true,
       label,
@@ -19109,7 +19192,7 @@ function DataFormProvider({
 var dataform_context_default = DataFormContext;
 
 // src/dataforms-layouts/regular/index.tsx
-import clsx35 from "clsx";
+import clsx36 from "clsx";
 
 // src/dataforms-layouts/is-combined-field.ts
 function isCombinedField(field) {
@@ -19131,7 +19214,8 @@ function normalizeLayout(layout) {
   } else if (layout?.type === "panel") {
     normalizedLayout = {
       type: "panel",
-      labelPosition: layout?.labelPosition ?? "side"
+      labelPosition: layout?.labelPosition ?? "side",
+      openAs: layout?.openAs ?? "dropdown"
     };
   } else if (layout?.type === "card") {
     if (layout.withHeader === false) {
@@ -19218,7 +19302,7 @@ function FormRegularField({
       /* @__PURE__ */ jsx38(
         "div",
         {
-          className: clsx35(
+          className: clsx36(
             "dataforms-layouts-regular__field-label",
             `dataforms-layouts-regular__field-label--label-position-${labelPosition}`
           ),
@@ -19264,7 +19348,9 @@ function FormRegularField({
 }
 
 // src/dataforms-layouts/panel/index.tsx
-import clsx36 from "clsx";
+import clsx37 from "clsx";
+
+// src/dataforms-layouts/panel/dropdown.tsx
 import { sprintf as sprintf12, __ as __51, _x as _x5 } from "@wordpress/i18n";
 import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 function DropdownHeader({
@@ -19381,6 +19467,146 @@ function PanelDropdown({
     }
   );
 }
+var dropdown_default2 = PanelDropdown;
+
+// src/dataforms-layouts/panel/modal.tsx
+import { __ as __52, sprintf as sprintf13, _x as _x6 } from "@wordpress/i18n";
+import { Fragment as Fragment12, jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+function ModalContent({
+  data,
+  form,
+  fieldLabel,
+  onChange,
+  onClose
+}) {
+  const [changes, setChanges] = useState({});
+  const onApply = () => {
+    onChange(changes);
+    onClose();
+  };
+  const handleOnChange = (value) => {
+    setChanges((prev) => ({ ...prev, ...value }));
+  };
+  const displayData = { ...data, ...changes };
+  return /* @__PURE__ */ jsxs23(
+    modal_default,
+    {
+      className: "dataforms-layouts-panel__modal",
+      onRequestClose: onClose,
+      isFullScreen: false,
+      title: fieldLabel,
+      size: "medium",
+      children: [
+        /* @__PURE__ */ jsx40(
+          DataFormLayout,
+          {
+            data: displayData,
+            form,
+            onChange: handleOnChange,
+            children: (FieldLayout, nestedField) => /* @__PURE__ */ jsx40(
+              FieldLayout,
+              {
+                data: displayData,
+                field: nestedField,
+                onChange: handleOnChange,
+                hideLabelFromVision: (form?.fields ?? []).length < 2
+              },
+              nestedField.id
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs23(
+          component_default9,
+          {
+            className: "dataforms-layouts-panel__modal-footer",
+            spacing: 3,
+            children: [
+              /* @__PURE__ */ jsx40(component_default6, {}),
+              /* @__PURE__ */ jsx40(
+                button_default,
+                {
+                  variant: "tertiary",
+                  onClick: onClose,
+                  __next40pxDefaultSize: true,
+                  children: __52("Cancel")
+                }
+              ),
+              /* @__PURE__ */ jsx40(
+                button_default,
+                {
+                  variant: "primary",
+                  onClick: onApply,
+                  __next40pxDefaultSize: true,
+                  children: __52("Apply")
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function PanelModal({
+  fieldDefinition,
+  labelPosition,
+  data,
+  onChange,
+  field
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const fieldLabel = isCombinedField(field) ? field.label : fieldDefinition?.label;
+  const form = useMemo(
+    () => ({
+      layout: DEFAULT_LAYOUT,
+      fields: isCombinedField(field) ? field.children : (
+        // If not explicit children return the field id itself.
+        [{ id: field.id }]
+      )
+    }),
+    [field]
+  );
+  return /* @__PURE__ */ jsxs23(Fragment12, { children: [
+    /* @__PURE__ */ jsx40(
+      button_default,
+      {
+        className: "dataforms-layouts-modal__field-control",
+        size: "compact",
+        variant: ["none", "top"].includes(labelPosition) ? "link" : "tertiary",
+        "aria-expanded": isOpen,
+        "aria-label": sprintf13(
+          // translators: %s: Field name.
+          _x6("Edit %s", "field"),
+          fieldLabel || ""
+        ),
+        onClick: () => setIsOpen(true),
+        disabled: fieldDefinition.readOnly === true,
+        accessibleWhenDisabled: true,
+        children: /* @__PURE__ */ jsx40(
+          fieldDefinition.render,
+          {
+            item: data,
+            field: fieldDefinition
+          }
+        )
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx40(
+      ModalContent,
+      {
+        data,
+        form,
+        fieldLabel: fieldLabel ?? "",
+        onChange,
+        onClose: () => setIsOpen(false)
+      }
+    )
+  ] });
+}
+var modal_default2 = PanelModal;
+
+// src/dataforms-layouts/panel/index.tsx
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 function FormPanelField({
   data,
   field,
@@ -19411,14 +19637,34 @@ function FormPanelField({
     type: "panel"
   });
   const labelPosition = layout.labelPosition;
-  const labelClassName = clsx36(
+  const labelClassName = clsx37(
     "dataforms-layouts-panel__field-label",
     `dataforms-layouts-panel__field-label--label-position-${labelPosition}`
   );
   const fieldLabel = isCombinedField(field) ? field.label : fieldDefinition?.label;
+  const renderedControl = layout.openAs === "modal" ? /* @__PURE__ */ jsx41(
+    modal_default2,
+    {
+      field,
+      fieldDefinition,
+      data,
+      onChange,
+      labelPosition
+    }
+  ) : /* @__PURE__ */ jsx41(
+    dropdown_default2,
+    {
+      field,
+      popoverAnchor,
+      fieldDefinition,
+      data,
+      onChange,
+      labelPosition
+    }
+  );
   if (labelPosition === "top") {
-    return /* @__PURE__ */ jsxs22(component_default14, { className: "dataforms-layouts-panel__field", spacing: 0, children: [
-      /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsxs24(component_default14, { className: "dataforms-layouts-panel__field", spacing: 0, children: [
+      /* @__PURE__ */ jsx41(
         "div",
         {
           className: labelClassName,
@@ -19426,57 +19672,27 @@ function FormPanelField({
           children: fieldLabel
         }
       ),
-      /* @__PURE__ */ jsx39("div", { className: "dataforms-layouts-panel__field-control", children: /* @__PURE__ */ jsx39(
-        PanelDropdown,
-        {
-          field,
-          popoverAnchor,
-          fieldDefinition,
-          data,
-          onChange,
-          labelPosition
-        }
-      ) })
+      /* @__PURE__ */ jsx41("div", { className: "dataforms-layouts-panel__field-control", children: renderedControl })
     ] });
   }
   if (labelPosition === "none") {
-    return /* @__PURE__ */ jsx39("div", { className: "dataforms-layouts-panel__field", children: /* @__PURE__ */ jsx39(
-      PanelDropdown,
-      {
-        field,
-        popoverAnchor,
-        fieldDefinition,
-        data,
-        onChange,
-        labelPosition
-      }
-    ) });
+    return /* @__PURE__ */ jsx41("div", { className: "dataforms-layouts-panel__field", children: renderedControl });
   }
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs24(
     component_default9,
     {
       ref: setPopoverAnchor,
       className: "dataforms-layouts-panel__field",
       children: [
-        /* @__PURE__ */ jsx39("div", { className: labelClassName, children: fieldLabel }),
-        /* @__PURE__ */ jsx39("div", { className: "dataforms-layouts-panel__field-control", children: /* @__PURE__ */ jsx39(
-          PanelDropdown,
-          {
-            field,
-            popoverAnchor,
-            fieldDefinition,
-            data,
-            onChange,
-            labelPosition
-          }
-        ) })
+        /* @__PURE__ */ jsx41("div", { className: labelClassName, children: fieldLabel }),
+        /* @__PURE__ */ jsx41("div", { className: "dataforms-layouts-panel__field-control", children: renderedControl })
       ]
     }
   );
 }
 
 // src/dataforms-layouts/card/index.tsx
-import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 function useCollapsibleCard(initialIsOpen = true) {
   const [isOpen, setIsOpen] = useState(initialIsOpen);
   const toggle = useCallback(() => {
@@ -19486,7 +19702,7 @@ function useCollapsibleCard(initialIsOpen = true) {
     ({
       children,
       ...props
-    }) => /* @__PURE__ */ jsxs23(
+    }) => /* @__PURE__ */ jsxs25(
       component_default21,
       {
         ...props,
@@ -19496,7 +19712,7 @@ function useCollapsibleCard(initialIsOpen = true) {
           ...props.style
         },
         children: [
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx42(
             "div",
             {
               style: {
@@ -19508,7 +19724,7 @@ function useCollapsibleCard(initialIsOpen = true) {
               children
             }
           ),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx42(
             button_default,
             {
               __next40pxDefaultSize: true,
@@ -19548,11 +19764,11 @@ function FormCardField({
   );
   if (isCombinedField(field)) {
     const withHeader2 = !!field.label && layout.withHeader;
-    return /* @__PURE__ */ jsxs23(component_default18, { className: "dataforms-layouts-card__field", children: [
-      withHeader2 && /* @__PURE__ */ jsx40(CollapsibleCardHeader, { className: "dataforms-layouts-card__field-label", children: field.label }),
+    return /* @__PURE__ */ jsxs25(component_default18, { className: "dataforms-layouts-card__field", children: [
+      withHeader2 && /* @__PURE__ */ jsx42(CollapsibleCardHeader, { className: "dataforms-layouts-card__field-label", children: field.label }),
       (isOpen || !withHeader2) && // If it doesn't have a header, keep it open.
       // Otherwise, the card will not be visible.
-      /* @__PURE__ */ jsx40(component_default20, { className: "dataforms-layouts-card__field-control", children: /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx42(component_default20, { className: "dataforms-layouts-card__field-control", children: /* @__PURE__ */ jsx42(
         DataFormLayout,
         {
           data,
@@ -19573,11 +19789,11 @@ function FormCardField({
     return null;
   }
   const withHeader = !!fieldDefinition.label && layout.withHeader;
-  return /* @__PURE__ */ jsxs23(component_default18, { className: "dataforms-layouts-card__field", children: [
-    withHeader && /* @__PURE__ */ jsx40(CollapsibleCardHeader, { className: "dataforms-layouts-card__field-label", children: fieldDefinition.label }),
+  return /* @__PURE__ */ jsxs25(component_default18, { className: "dataforms-layouts-card__field", children: [
+    withHeader && /* @__PURE__ */ jsx42(CollapsibleCardHeader, { className: "dataforms-layouts-card__field-label", children: fieldDefinition.label }),
     (isOpen || !withHeader) && // If it doesn't have a header, keep it open.
     // Otherwise, the card will not be visible.
-    /* @__PURE__ */ jsx40(component_default20, { className: "dataforms-layouts-card__field-control", children: /* @__PURE__ */ jsx40(
+    /* @__PURE__ */ jsx42(component_default20, { className: "dataforms-layouts-card__field-control", children: /* @__PURE__ */ jsx42(
       RegularLayout,
       {
         data,
@@ -19609,7 +19825,7 @@ function getFormFieldLayout(type) {
 }
 
 // src/dataforms-layouts/data-form-layout.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function DataFormLayout({
   data,
   form,
@@ -19627,7 +19843,7 @@ function DataFormLayout({
     () => normalizeFormFields(form),
     [form]
   );
-  return /* @__PURE__ */ jsx41(component_default14, { spacing: form.layout?.type === "panel" ? 2 : 4, children: normalizedFormFields.map((formField) => {
+  return /* @__PURE__ */ jsx43(component_default14, { spacing: form.layout?.type === "panel" ? 2 : 4, children: normalizedFormFields.map((formField) => {
     const FieldLayout = getFormFieldLayout(formField.layout.type)?.component;
     if (!FieldLayout) {
       return null;
@@ -19639,7 +19855,7 @@ function DataFormLayout({
     if (children) {
       return children(FieldLayout, formField);
     }
-    return /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx43(
       FieldLayout,
       {
         data,
@@ -19652,7 +19868,7 @@ function DataFormLayout({
 }
 
 // src/components/dataform/index.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function DataForm({
   data,
   form,
@@ -19666,7 +19882,7 @@ function DataForm({
   if (!form.fields) {
     return null;
   }
-  return /* @__PURE__ */ jsx42(DataFormProvider, { fields: normalizedFields, children: /* @__PURE__ */ jsx42(DataFormLayout, { data, form, onChange }) });
+  return /* @__PURE__ */ jsx44(DataFormProvider, { fields: normalizedFields, children: /* @__PURE__ */ jsx44(DataFormLayout, { data, form, onChange }) });
 }
 
 // src/filter-and-sort-data-view.ts