@wordpress/dataviews 10.0.1-next.ff1cebbba.0 → 10.1.0

package/build-wp/index.js

@@ -12946,12 +12946,11 @@ function ButtonTrigger({
   return /* @__PURE__ */ jsx37(
     button_default,
     {
-      label,
-      icon: action.icon,
       disabled: !!action.disabled,
       accessibleWhenDisabled: true,
       size: "compact",
-      onClick
+      onClick,
+      children: label
     }
   );
 }
@@ -12969,10 +12968,11 @@ function ActionModal({
   closeModal
 }) {
   const label = typeof action.label === "string" ? action.label : action.label(items);
+  const modalHeader = typeof action.modalHeader === "function" ? action.modalHeader(items) : action.modalHeader;
   return /* @__PURE__ */ jsx37(
     modal_default,
     {
-      title: action.modalHeader || label,
+      title: modalHeader || label,
       __experimentalHideHeader: !!action.hideModalHeader,
       onRequestClose: closeModal,
       focusOnMount: action.modalFocusOnMount ?? true,
@@ -13017,7 +13017,7 @@ function ItemActions({
       (action) => !action.isEligible || action.isEligible(item2)
     );
     const _primaryActions = _eligibleActions.filter(
-      (action) => action.isPrimary && !!action.icon
+      (action) => action.isPrimary
     );
     return {
       primaryActions: _primaryActions,
@@ -13038,7 +13038,7 @@ function ItemActions({
   return /* @__PURE__ */ jsxs(
     component_default9,
     {
-      spacing: 1,
+      spacing: 0,
       justify: "flex-end",
       className: "dataviews-item-actions",
       style: {
@@ -13244,12 +13244,10 @@ function ActionTrigger({
     {
       disabled: isBusy,
       accessibleWhenDisabled: true,
-      label,
-      icon: action.icon,
       size: "compact",
       onClick,
       isBusy,
-      tooltipPosition: "top"
+      children: label
     }
   );
 }
@@ -13396,7 +13394,7 @@ function FooterContent({
   }, [selection, data, getItemId, selectableItems]);
   const actionsToShow = useMemo(
     () => actions.filter((action) => {
-      return action.supportsBulk && action.icon && selectedItems.some(
+      return action.supportsBulk && selectedItems.some(
         (item2) => !action.isEligible || action.isEligible(item2)
       );
     }),
@@ -13486,7 +13484,7 @@ var _HeaderMenu = forwardRef(function HeaderMenu({
   isSortable = field.enableSorting !== false;
   const header = field.header;
   operators = !!field.filterBy && field.filterBy?.operators || [];
-  canAddFilter = !view.filters?.some((_filter) => fieldId === _filter.field) && !!(field.elements?.length || field.Edit) && field.filterBy !== false && !field.filterBy?.isPrimary;
+  canAddFilter = !view.filters?.some((_filter) => fieldId === _filter.field) && !!(field.hasElements || field.Edit) && field.filterBy !== false && !field.filterBy?.isPrimary;
   if (!isSortable && !canMove && !isHidable && !canAddFilter) {
     return header;
   }
@@ -14656,12 +14654,12 @@ function PrimaryActionGridCell({
       render: /* @__PURE__ */ jsx45(
         button_default,
         {
-          label,
           disabled: !!primaryAction.disabled,
           accessibleWhenDisabled: true,
-          icon: primaryAction.icon,
           size: "small",
-          onClick: () => setIsModalOpen(true)
+          onClick: () => setIsModalOpen(true),
+          variant: "link",
+          children: label
         }
       ),
       children: isModalOpen && /* @__PURE__ */ jsx45(
@@ -14680,14 +14678,14 @@ function PrimaryActionGridCell({
       render: /* @__PURE__ */ jsx45(
         button_default,
         {
-          label,
           disabled: !!primaryAction.disabled,
           accessibleWhenDisabled: true,
-          icon: primaryAction.icon,
           size: "small",
           onClick: () => {
             primaryAction.callback([item2], { registry });
-          }
+          },
+          variant: "link",
+          children: label
         }
       )
     }
@@ -14740,7 +14738,7 @@ function ListItem({
       (action) => !action.isEligible || action.isEligible(item2)
     );
     const _primaryActions = _eligibleActions.filter(
-      (action) => action.isPrimary && !!action.icon
+      (action) => action.isPrimary
     );
     return {
       primaryAction: _primaryActions[0],
@@ -15942,6 +15940,46 @@ var getCurrentValue = (filterDefinition, currentFilter) => {
   return EMPTY_ARRAY3;
 };
 
+// src/hooks/use-elements.ts
+var EMPTY_ARRAY4 = [];
+function useElements({
+  elements,
+  getElements
+}) {
+  const staticElements = Array.isArray(elements) && elements.length > 0 ? elements : EMPTY_ARRAY4;
+  const [records, setRecords] = useState(staticElements);
+  const [isLoading, setIsLoading] = useState(false);
+  useEffect(() => {
+    if (!getElements) {
+      setRecords(staticElements);
+      return;
+    }
+    let cancelled = false;
+    setIsLoading(true);
+    getElements().then((fetchedElements) => {
+      if (!cancelled) {
+        const dynamicElements = Array.isArray(fetchedElements) && fetchedElements.length > 0 ? fetchedElements : staticElements;
+        setRecords(dynamicElements);
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setRecords(staticElements);
+      }
+    }).finally(() => {
+      if (!cancelled) {
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [getElements, staticElements]);
+  return {
+    elements: records,
+    isLoading
+  };
+}
+
 // src/components/dataviews-filters/search-widget.tsx
 import { jsx as jsx51, jsxs as jsxs12 } from "react/jsx-runtime";
 function normalizeSearchInput(input = "") {
@@ -16217,8 +16255,18 @@ function ComboboxList2({ view, filter, onChangeView }) {
   );
 }
 function SearchWidget(props) {
-  const Widget = props.filter.elements.length > 10 ? ComboboxList2 : ListBox;
-  return /* @__PURE__ */ jsx51(Widget, { ...props });
+  const { elements, isLoading } = useElements({
+    elements: props.filter.elements,
+    getElements: props.filter.getElements
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx51("div", { className: "dataviews-filters__search-widget-no-elements", children: /* @__PURE__ */ jsx51(spinner_default, {}) });
+  }
+  if (elements.length === 0) {
+    return /* @__PURE__ */ jsx51("div", { className: "dataviews-filters__search-widget-no-elements", children: __28("No elements found") });
+  }
+  const Widget = elements.length > 10 ? ComboboxList2 : ListBox;
+  return /* @__PURE__ */ jsx51(Widget, { ...props, filter: { ...props.filter, elements } });
 }
 
 // src/components/dataviews-filters/input-widget.tsx
@@ -16672,8 +16720,12 @@ function Filter({
     (f) => f.field === filter.field
   );
   let activeElements = [];
-  if (filter.elements.length > 0) {
-    activeElements = filter.elements.filter((element) => {
+  const { elements } = useElements({
+    elements: filter.elements,
+    getElements: filter.getElements
+  });
+  if (elements.length > 0) {
+    activeElements = elements.filter((element) => {
       if (filter.singleSelection) {
         return element.value === filterInView?.value;
       }
@@ -16785,13 +16837,13 @@ function Filter({
       renderContent: () => {
         return /* @__PURE__ */ jsxs13(component_default14, { spacing: 0, justify: "flex-start", children: [
           /* @__PURE__ */ jsx53(OperatorSelector, { ...commonProps }),
-          commonProps.filter.elements.length > 0 ? /* @__PURE__ */ jsx53(
+          commonProps.filter.hasElements ? /* @__PURE__ */ jsx53(
             SearchWidget,
             {
               ...commonProps,
               filter: {
                 ...commonProps.filter,
-                elements: commonProps.filter.elements
+                elements
               }
             }
           ) : /* @__PURE__ */ jsx53(InputWidget, { ...commonProps, fields })
@@ -16909,7 +16961,7 @@ function useFilters(fields, view) {
   return useMemo(() => {
     const filters = [];
     fields.forEach((field) => {
-      if (field.filterBy === false || !field.elements?.length && !field.Edit) {
+      if (field.filterBy === false || !field.hasElements && !field.Edit) {
         return;
       }
       const operators = field.filterBy.operators;
@@ -16920,7 +16972,9 @@ function useFilters(fields, view) {
       filters.push({
         field: field.id,
         name: field.label,
-        elements: field.elements ?? [],
+        elements: field.elements,
+        getElements: field.getElements,
+        hasElements: field.hasElements,
         singleSelection: operators.some(
           (op) => SINGLE_SELECTION_OPERATORS.includes(op)
         ),
@@ -17162,13 +17216,13 @@ function DataViewsLayout({ className }) {
 
 // src/components/dataviews-footer/index.tsx
 import { jsx as jsx60, jsxs as jsxs16 } from "react/jsx-runtime";
-var EMPTY_ARRAY4 = [];
+var EMPTY_ARRAY5 = [];
 function DataViewsFooter() {
   const {
     view,
     paginationInfo: { totalItems = 0, totalPages },
     data,
-    actions = EMPTY_ARRAY4
+    actions = EMPTY_ARRAY5
   } = useContext(dataviews_context_default);
   const hasBulkActions = useSomeItemHasAPossibleBulkAction(actions, data) && [LAYOUT_TABLE, LAYOUT_GRID].includes(view.type);
   if (!totalItems || !totalPages || totalPages <= 1 && !hasBulkActions) {
@@ -17936,16 +17990,27 @@ var dataviews_view_config_default = DataViewsViewConfig;
 // src/field-types/email.tsx
 import { __ as __37 } from "@wordpress/i18n";
 
-// src/field-types/utils/render-from-elements.ts
-function renderFromElements({
+// src/field-types/utils/render-from-elements.tsx
+function RenderFromElements({
   item: item2,
   field
 }) {
+  const { elements, isLoading } = useElements({
+    elements: field.elements,
+    getElements: field.getElements
+  });
   const value = field.getValue({ item: item2 });
-  return field?.elements?.find((element) => element.value === value)?.label || field.getValue({ item: item2 });
+  if (isLoading) {
+    return value;
+  }
+  if (elements.length === 0) {
+    return value;
+  }
+  return elements?.find((element) => element.value === value)?.label || field.getValue({ item: item2 });
 }
 
 // src/field-types/email.tsx
+import { jsx as jsx64 } from "react/jsx-runtime";
 function sort(valueA, valueB, direction) {
   return direction === "asc" ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
 }
@@ -17964,7 +18029,7 @@ var email_default = {
   },
   Edit: "email",
   render: ({ item: item2, field }) => {
-    return field.elements ? renderFromElements({ item: item2, field }) : field.getValue({ item: item2 });
+    return field.hasElements ? /* @__PURE__ */ jsx64(RenderFromElements, { item: item2, field }) : field.getValue({ item: item2 });
   },
   enableSorting: true,
   filterBy: {
@@ -17986,6 +18051,7 @@ var email_default = {
 
 // src/field-types/integer.tsx
 import { __ as __38 } from "@wordpress/i18n";
+import { jsx as jsx65 } from "react/jsx-runtime";
 function sort2(a, b, direction) {
   return direction === "asc" ? a - b : b - a;
 }
@@ -18003,7 +18069,7 @@ var integer_default = {
   },
   Edit: "integer",
   render: ({ item: item2, field }) => {
-    return field.elements ? renderFromElements({ item: item2, field }) : field.getValue({ item: item2 });
+    return field.hasElements ? /* @__PURE__ */ jsx65(RenderFromElements, { item: item2, field }) : field.getValue({ item: item2 });
   },
   enableSorting: true,
   filterBy: {
@@ -18036,6 +18102,7 @@ var integer_default = {
 
 // src/field-types/number.tsx
 import { __ as __39 } from "@wordpress/i18n";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function sort3(a, b, direction) {
   return direction === "asc" ? a - b : b - a;
 }
@@ -18056,17 +18123,14 @@ var number_default = {
   },
   Edit: "number",
   render: ({ item: item2, field }) => {
+    if (field.hasElements) {
+      /* @__PURE__ */ jsx66(RenderFromElements, { item: item2, field });
+    }
     const value = field.getValue({ item: item2 });
-    if (!isEmpty(value) && field.elements) {
-      const numericValue = Number(value);
-      const match = field.elements.find(
-        (element) => Number.isFinite(Number(element.value)) && Number(element.value) === numericValue
-      );
-      if (match) {
-        return match.label;
-      }
+    if (![null, void 0].includes(value)) {
+      return Number(value).toFixed(2);
     }
-    return Number(value).toFixed(2);
+    return null;
   },
   enableSorting: true,
   filterBy: {
@@ -18098,6 +18162,7 @@ var number_default = {
 };
 
 // src/field-types/text.tsx
+import { jsx as jsx67 } from "react/jsx-runtime";
 function sort4(valueA, valueB, direction) {
   return direction === "asc" ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
 }
@@ -18109,7 +18174,7 @@ var text_default = {
   },
   Edit: "text",
   render: ({ item: item2, field }) => {
-    return field.elements ? renderFromElements({ item: item2, field }) : field.getValue({ item: item2 });
+    return field.hasElements ? /* @__PURE__ */ jsx67(RenderFromElements, { item: item2, field }) : field.getValue({ item: item2 });
   },
   enableSorting: true,
   filterBy: {
@@ -18131,6 +18196,7 @@ var text_default = {
 };
 
 // src/field-types/datetime.tsx
+import { jsx as jsx68 } from "react/jsx-runtime";
 function sort5(a, b, direction) {
   const timeA = new Date(a).getTime();
   const timeB = new Date(b).getTime();
@@ -18144,7 +18210,7 @@ var datetime_default = {
   },
   Edit: "datetime",
   render: ({ item: item2, field }) => {
-    return field.elements ? renderFromElements({ item: item2, field }) : field.getValue({ item: item2 });
+    return field.hasElements ? /* @__PURE__ */ jsx68(RenderFromElements, { item: item2, field }) : field.getValue({ item: item2 });
   },
   enableSorting: true,
   filterBy: {
@@ -18173,6 +18239,7 @@ var datetime_default = {
 
 // src/field-types/date.tsx
 import { dateI18n, getDate, getSettings } from "@wordpress/date";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var getFormattedDate = (dateToDisplay) => dateI18n(getSettings().formats.date, getDate(dateToDisplay));
 function sort6(a, b, direction) {
   const timeA = new Date(a).getTime();
@@ -18187,8 +18254,8 @@ var date_default = {
     custom: () => null
   },
   render: ({ item: item2, field }) => {
-    if (field.elements) {
-      return renderFromElements({ item: item2, field });
+    if (field.hasElements) {
+      return /* @__PURE__ */ jsx69(RenderFromElements, { item: item2, field });
     }
     const value = field.getValue({ item: item2 });
     if (!value) {
@@ -18225,6 +18292,7 @@ var date_default = {
 
 // src/field-types/boolean.tsx
 import { __ as __40 } from "@wordpress/i18n";
+import { jsx as jsx70 } from "react/jsx-runtime";
 function sort7(a, b, direction) {
   const boolA = Boolean(a);
   const boolB = Boolean(b);
@@ -18250,8 +18318,8 @@ var boolean_default = {
   },
   Edit: "checkbox",
   render: ({ item: item2, field }) => {
-    if (field.elements) {
-      return renderFromElements({ item: item2, field });
+    if (field.hasElements) {
+      return /* @__PURE__ */ jsx70(RenderFromElements, { item: item2, field });
     }
     if (field.getValue({ item: item2 }) === true) {
       return __40("True");
@@ -18332,6 +18400,7 @@ var arrayFieldType = {
 var array_default = arrayFieldType;
 
 // src/field-types/password.tsx
+import { jsx as jsx71 } from "react/jsx-runtime";
 function sort10(valueA, valueB, direction) {
   return 0;
 }
@@ -18343,13 +18412,14 @@ var password_default = {
   },
   Edit: "password",
   render: ({ item: item2, field }) => {
-    return field.elements ? renderFromElements({ item: item2, field }) : "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
+    return field.hasElements ? /* @__PURE__ */ jsx71(RenderFromElements, { item: item2, field }) : "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
   },
   enableSorting: false,
   filterBy: false
 };
 
 // src/field-types/telephone.tsx
+import { jsx as jsx72 } from "react/jsx-runtime";
 function sort11(valueA, valueB, direction) {
   return direction === "asc" ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
 }
@@ -18361,7 +18431,7 @@ var telephone_default = {
   },
   Edit: "telephone",
   render: ({ item: item2, field }) => {
-    return field.elements ? renderFromElements({ item: item2, field }) : field.getValue({ item: item2 });
+    return field.hasElements ? /* @__PURE__ */ jsx72(RenderFromElements, { item: item2, field }) : field.getValue({ item: item2 });
   },
   enableSorting: true,
   filterBy: {
@@ -18384,7 +18454,7 @@ var telephone_default = {
 // src/field-types/color.tsx
 import { colord as colord4 } from "colord";
 import { __ as __42 } from "@wordpress/i18n";
-import { jsx as jsx64, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs18 } from "react/jsx-runtime";
 function sort12(valueA, valueB, direction) {
   const colorA = colord4(valueA);
   const colorB = colord4(valueB);
@@ -18421,8 +18491,8 @@ var color_default = {
   },
   Edit: "color",
   render: ({ item: item2, field }) => {
-    if (field.elements) {
-      return renderFromElements({ item: item2, field });
+    if (field.hasElements) {
+      return /* @__PURE__ */ jsx73(RenderFromElements, { item: item2, field });
     }
     const value = field.getValue({ item: item2 });
     if (!value || !colord4(value).isValid()) {
@@ -18433,7 +18503,7 @@ var color_default = {
       {
         style: { display: "flex", alignItems: "center", gap: "8px" },
         children: [
-          /* @__PURE__ */ jsx64(
+          /* @__PURE__ */ jsx73(
             "div",
             {
               style: {
@@ -18446,7 +18516,7 @@ var color_default = {
               }
             }
           ),
-          /* @__PURE__ */ jsx64("span", { children: value })
+          /* @__PURE__ */ jsx73("span", { children: value })
         ]
       }
     );
@@ -18459,6 +18529,7 @@ var color_default = {
 };
 
 // src/field-types/url.tsx
+import { jsx as jsx74 } from "react/jsx-runtime";
 function sort13(valueA, valueB, direction) {
   return direction === "asc" ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
 }
@@ -18470,7 +18541,7 @@ var url_default = {
   },
   Edit: "url",
   render: ({ item: item2, field }) => {
-    return field.elements ? renderFromElements({ item: item2, field }) : field.getValue({ item: item2 });
+    return field.hasElements ? /* @__PURE__ */ jsx74(RenderFromElements, { item: item2, field }) : field.getValue({ item: item2 });
   },
   enableSorting: true,
   filterBy: {
@@ -18491,6 +18562,7 @@ var url_default = {
 };
 
 // src/field-types/index.tsx
+import { jsx as jsx75 } from "react/jsx-runtime";
 function getFieldTypeDefinition(type) {
   if ("email" === type) {
     return email_default;
@@ -18544,7 +18616,7 @@ function getFieldTypeDefinition(type) {
     },
     Edit: null,
     render: ({ item: item2, field }) => {
-      return field.elements ? renderFromElements({ item: item2, field }) : field.getValue({ item: item2 });
+      return field.hasElements ? /* @__PURE__ */ jsx75(RenderFromElements, { item: item2, field }) : field.getValue({ item: item2 });
     },
     enableSorting: true,
     filterBy: {
@@ -18554,52 +18626,40 @@ function getFieldTypeDefinition(type) {
   };
 }
 
+// src/dataform-controls/utils/get-custom-validity.ts
+function getCustomValidity(isValid, validity) {
+  let customValidity;
+  if (isValid?.required && validity?.required) {
+    customValidity = validity?.required?.message ? validity.required : void 0;
+  } else if (isValid?.elements && validity?.elements) {
+    customValidity = validity.elements;
+  } else if (validity?.custom) {
+    customValidity = validity.custom;
+  }
+  return customValidity;
+}
+
 // src/dataform-controls/checkbox.tsx
-import deepMerge from "deepmerge";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var { ValidatedCheckboxControl: ValidatedCheckboxControl2 } = unlock3(privateApis);
 function Checkbox({
   field,
   onChange,
   data,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const { getValue, setValue, label, description } = field;
-  const [customValidity, setCustomValidity] = useState(void 0);
+  const { getValue, setValue, label, description, isValid } = field;
   const onChangeControl = useCallback(() => {
     onChange(
       setValue({ item: data, value: !getValue({ item: data }) })
     );
   }, [data, getValue, onChange, setValue]);
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx76(
     ValidatedCheckboxControl2,
     {
       required: !!field.isValid?.required,
-      onValidate: onValidateControl,
-      customValidity,
+      customValidity: getCustomValidity(isValid, validity),
       hidden: hideLabelFromVision,
       label,
       help: description,
@@ -18610,15 +18670,14 @@ function Checkbox({
 }
 
 // src/dataform-controls/datetime.tsx
-import deepMerge2 from "deepmerge";
-import { format, isValid } from "date-fns";
+import { format, isValid as isValidDate } from "date-fns";
 import { __ as __44 } from "@wordpress/i18n";
 import { getDate as getDate2, getSettings as getSettings2 } from "@wordpress/date";
 
 // src/dataform-controls/utils/relative-date-control.tsx
 import clsx37 from "clsx";
 import { __ as __43 } from "@wordpress/i18n";
-import { jsx as jsx66, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs19 } from "react/jsx-runtime";
 var TIME_UNITS_OPTIONS = {
   [OPERATOR_IN_THE_PAST]: [
     { value: "days", label: __43("Days") },
@@ -18663,7 +18722,7 @@ function RelativeDateControl({
     ),
     [onChange, setValue, data, relValue]
   );
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx77(
     base_control_default,
     {
       id,
@@ -18672,7 +18731,7 @@ function RelativeDateControl({
       label,
       hideLabelFromVision,
       children: /* @__PURE__ */ jsxs19(component_default9, { spacing: 2.5, children: [
-        /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx77(
           number_control_default,
           {
             __next40pxDefaultSize: true,
@@ -18684,7 +18743,7 @@ function RelativeDateControl({
             onChange: onChangeValue
           }
         ),
-        /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx77(
           select_control_default,
           {
             className: "dataviews-controls__relative-date-unit",
@@ -18703,14 +18762,14 @@ function RelativeDateControl({
 }
 
 // src/dataform-controls/datetime.tsx
-import { jsx as jsx67, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs20 } from "react/jsx-runtime";
 var { DateCalendar: DateCalendar2, ValidatedInputControl: ValidatedInputControl2 } = unlock3(privateApis);
 var parseDateTime = (dateTimeString) => {
   if (!dateTimeString) {
     return null;
   }
   const parsed = getDate2(dateTimeString);
-  return parsed && isValid(parsed) ? parsed : null;
+  return parsed && isValidDate(parsed) ? parsed : null;
 };
 var formatDateTime = (date) => {
   if (!date) {
@@ -18725,16 +18784,16 @@ function CalendarDateTimeControl({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const { id, label, description, setValue, getValue } = field;
+  const { id, label, description, setValue, getValue, isValid } = field;
   const fieldValue = getValue({ item: data });
   const value = typeof fieldValue === "string" ? fieldValue : void 0;
   const [calendarMonth, setCalendarMonth] = useState(() => {
     const parsedDate = parseDateTime(value);
     return parsedDate || /* @__PURE__ */ new Date();
   });
-  const [customValidity, setCustomValidity] = useState(void 0);
   const inputControlRef = useRef(null);
   const validationTimeoutRef = useRef();
   const previousFocusRef = useRef(null);
@@ -18749,29 +18808,6 @@ function CalendarDateTimeControl({
       }
     };
   }, []);
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge2(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
   const onSelectDate = useCallback(
     (newDate) => {
       let dateTimeValue;
@@ -18789,13 +18825,11 @@ function CalendarDateTimeControl({
         }
         dateTimeValue = finalDateTime.toISOString();
         onChangeCallback(dateTimeValue);
-        onValidateControl(dateTimeValue);
         if (validationTimeoutRef.current) {
           clearTimeout(validationTimeoutRef.current);
         }
       } else {
         onChangeCallback(void 0);
-        onValidateControl(void 0);
       }
       previousFocusRef.current = inputControlRef.current && inputControlRef.current.ownerDocument.activeElement;
       validationTimeoutRef.current = setTimeout(() => {
@@ -18803,14 +18837,13 @@ function CalendarDateTimeControl({
           inputControlRef.current.focus();
           inputControlRef.current.blur();
           onChangeCallback(dateTimeValue);
-          onValidateControl(dateTimeValue);
           if (previousFocusRef.current && previousFocusRef.current instanceof HTMLElement) {
             previousFocusRef.current.focus();
           }
         }
       }, 0);
     },
-    [onChangeCallback, value, onValidateControl]
+    [onChangeCallback, value]
   );
   const handleManualDateTimeChange = useCallback(
     (newValue) => {
@@ -18831,8 +18864,8 @@ function CalendarDateTimeControl({
     timezone: { string: timezoneString },
     l10n: { startOfWeek }
   } = getSettings2();
-  const displayLabel = field.isValid?.required && !hideLabelFromVision ? `${label} (${__44("Required")})` : label;
-  return /* @__PURE__ */ jsx67(
+  const displayLabel = isValid?.required && !hideLabelFromVision ? `${label} (${__44("Required")})` : label;
+  return /* @__PURE__ */ jsx78(
     base_control_default,
     {
       __nextHasNoMarginBottom: true,
@@ -18841,7 +18874,7 @@ function CalendarDateTimeControl({
       help: description,
       hideLabelFromVision,
       children: /* @__PURE__ */ jsxs20(component_default14, { spacing: 4, children: [
-        /* @__PURE__ */ jsx67(
+        /* @__PURE__ */ jsx78(
           DateCalendar2,
           {
             style: { width: "100%" },
@@ -18853,14 +18886,13 @@ function CalendarDateTimeControl({
             weekStartsOn: startOfWeek
           }
         ),
-        /* @__PURE__ */ jsx67(
+        /* @__PURE__ */ jsx78(
           ValidatedInputControl2,
           {
             ref: inputControlRef,
             __next40pxDefaultSize: true,
-            required: !!field.isValid?.required,
-            onValidate: onValidateControl,
-            customValidity,
+            required: !!isValid?.required,
+            customValidity: getCustomValidity(isValid, validity),
             type: "datetime-local",
             label: __44("Date time"),
             hideLabelFromVision: true,
@@ -18879,10 +18911,11 @@ function DateTime({
   field,
   onChange,
   hideLabelFromVision,
-  operator
+  operator,
+  validity
 }) {
   if (operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER) {
-    return /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsx78(
       RelativeDateControl,
       {
         className: "dataviews-controls__datetime",
@@ -18894,32 +18927,32 @@ function DateTime({
       }
     );
   }
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx78(
     CalendarDateTimeControl,
     {
       data,
       field,
       onChange,
-      hideLabelFromVision
+      hideLabelFromVision,
+      validity
     }
   );
 }
 
 // src/dataform-controls/date.tsx
-import { __ as __45 } from "@wordpress/i18n";
-import { getDate as getDate3, getSettings as getSettings3 } from "@wordpress/date";
 import clsx38 from "clsx";
 import {
   format as format2,
-  isValid as isValid2,
+  isValid as isValidDate2,
   subMonths,
   subDays,
   subYears,
   startOfMonth,
   startOfYear
 } from "date-fns";
-import deepMerge3 from "deepmerge";
-import { jsx as jsx68, jsxs as jsxs21 } from "react/jsx-runtime";
+import { __ as __45 } from "@wordpress/i18n";
+import { getDate as getDate3, getSettings as getSettings3 } from "@wordpress/date";
+import { jsx as jsx79, jsxs as jsxs21 } from "react/jsx-runtime";
 var { DateCalendar: DateCalendar3, DateRangeCalendar: DateRangeCalendar2 } = unlock3(privateApis);
 var DATE_PRESETS = [
   {
@@ -18999,7 +19032,7 @@ var parseDate = (dateString) => {
     return null;
   }
   const parsed = getDate3(dateString);
-  return parsed && isValid2(parsed) ? parsed : null;
+  return parsed && isValidDate2(parsed) ? parsed : null;
 };
 var formatDate = (date) => {
   if (!date) {
@@ -19008,61 +19041,42 @@ var formatDate = (date) => {
   return typeof date === "string" ? date : format2(date, "yyyy-MM-dd");
 };
 function ValidatedDateControl({
-  value,
   field,
-  data,
-  setValue,
+  validity,
   inputRefs,
   isTouched,
   setIsTouched,
   children
 }) {
+  const { isValid } = field;
   const [customValidity, setCustomValidity] = useState(void 0);
-  const onValidate = useCallback(
-    (newValue) => {
-      if (newValue) {
-        const customMessage = field.isValid?.custom?.(
-          deepMerge3(
-            data,
-            setValue({
-              item: data,
-              value: newValue
-            })
-          ),
-          field
-        );
-        if (customMessage) {
-          setCustomValidity({
-            type: "invalid",
-            message: customMessage
-          });
-          return;
-        }
-      }
-      const refs = Array.isArray(inputRefs) ? inputRefs : [inputRefs];
-      for (const ref of refs) {
-        const input = ref.current;
-        if (input && !input.validity.valid) {
-          setCustomValidity({
-            type: "invalid",
-            message: input.validationMessage
-          });
-          return;
-        }
+  const validateRefs = useCallback(() => {
+    const refs = Array.isArray(inputRefs) ? inputRefs : [inputRefs];
+    for (const ref of refs) {
+      const input = ref.current;
+      if (input && !input.validity.valid) {
+        setCustomValidity({
+          type: "invalid",
+          message: input.validationMessage
+        });
+        return;
       }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue, inputRefs]
-  );
+    }
+    setCustomValidity(void 0);
+  }, [inputRefs]);
   useEffect(() => {
     if (isTouched) {
       const timeoutId = setTimeout(() => {
-        onValidate(value);
+        if (validity) {
+          setCustomValidity(getCustomValidity(isValid, validity));
+        } else {
+          validateRefs();
+        }
       }, 0);
       return () => clearTimeout(timeoutId);
     }
     return void 0;
-  }, [isTouched, value, onValidate]);
+  }, [isTouched, isValid, validity, validateRefs]);
   const onBlur = (event) => {
     if (isTouched) {
       return;
@@ -19073,15 +19087,16 @@ function ValidatedDateControl({
   };
   return /* @__PURE__ */ jsxs21("div", { onBlur, children: [
     children,
-    /* @__PURE__ */ jsx68("div", { "aria-live": "polite", children: customValidity && /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsx79("div", { "aria-live": "polite", children: customValidity && /* @__PURE__ */ jsxs21(
       "p",
       {
         className: clsx38(
           "components-validated-control__indicator",
-          "is-invalid"
+          customValidity.type === "invalid" ? "is-invalid" : void 0,
+          customValidity.type === "valid" ? "is-valid" : void 0
         ),
         children: [
-          /* @__PURE__ */ jsx68(
+          /* @__PURE__ */ jsx79(
             icon_default2,
             {
               className: "components-validated-control__indicator-icon",
@@ -19100,9 +19115,10 @@ function CalendarDateControl({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const { id, label, setValue, getValue } = field;
+  const { id, label, setValue, getValue, isValid } = field;
   const [selectedPresetId, setSelectedPresetId] = useState(
     null
   );
@@ -19156,18 +19172,16 @@ function CalendarDateControl({
     timezone: { string: timezoneString },
     l10n: { startOfWeek }
   } = getSettings3();
-  const displayLabel = field.isValid?.required ? `${label} (${__45("Required")})` : label;
-  return /* @__PURE__ */ jsx68(
+  const displayLabel = isValid?.required ? `${label} (${__45("Required")})` : label;
+  return /* @__PURE__ */ jsx79(
     ValidatedDateControl,
     {
-      value,
       field,
-      data,
-      setValue,
+      validity,
       inputRefs: validityTargetRef,
       isTouched,
       setIsTouched,
-      children: /* @__PURE__ */ jsx68(
+      children: /* @__PURE__ */ jsx79(
         base_control_default,
         {
           __nextHasNoMarginBottom: true,
@@ -19179,7 +19193,7 @@ function CalendarDateControl({
             /* @__PURE__ */ jsxs21(component_default9, { spacing: 2, wrap: true, justify: "flex-start", children: [
               DATE_PRESETS.map((preset) => {
                 const isSelected = selectedPresetId === preset.id;
-                return /* @__PURE__ */ jsx68(
+                return /* @__PURE__ */ jsx79(
                   button_default,
                   {
                     className: "dataviews-controls__date-preset",
@@ -19192,7 +19206,7 @@ function CalendarDateControl({
                   preset.id
                 );
               }),
-              /* @__PURE__ */ jsx68(
+              /* @__PURE__ */ jsx79(
                 button_default,
                 {
                   className: "dataviews-controls__date-preset",
@@ -19205,7 +19219,7 @@ function CalendarDateControl({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx68(
+            /* @__PURE__ */ jsx79(
               input_control_default,
               {
                 __next40pxDefaultSize: true,
@@ -19218,7 +19232,7 @@ function CalendarDateControl({
                 required: !!field.isValid?.required
               }
             ),
-            /* @__PURE__ */ jsx68(
+            /* @__PURE__ */ jsx79(
               DateCalendar3,
               {
                 style: { width: "100%" },
@@ -19240,7 +19254,8 @@ function CalendarDateRangeControl({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
   const { id, label, getValue, setValue } = field;
   let value;
@@ -19331,17 +19346,15 @@ function CalendarDateRangeControl({
   );
   const { timezone, l10n } = getSettings3();
   const displayLabel = field.isValid?.required ? `${label} (${__45("Required")})` : label;
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx79(
     ValidatedDateControl,
     {
-      value,
       field,
-      data,
-      setValue,
+      validity,
       inputRefs: [fromInputRef, toInputRef],
       isTouched,
       setIsTouched,
-      children: /* @__PURE__ */ jsx68(
+      children: /* @__PURE__ */ jsx79(
         base_control_default,
         {
           __nextHasNoMarginBottom: true,
@@ -19353,7 +19366,7 @@ function CalendarDateRangeControl({
             /* @__PURE__ */ jsxs21(component_default9, { spacing: 2, wrap: true, justify: "flex-start", children: [
               DATE_RANGE_PRESETS.map((preset) => {
                 const isSelected = selectedPresetId === preset.id;
-                return /* @__PURE__ */ jsx68(
+                return /* @__PURE__ */ jsx79(
                   button_default,
                   {
                     className: "dataviews-controls__date-preset",
@@ -19366,7 +19379,7 @@ function CalendarDateRangeControl({
                   preset.id
                 );
               }),
-              /* @__PURE__ */ jsx68(
+              /* @__PURE__ */ jsx79(
                 button_default,
                 {
                   className: "dataviews-controls__date-preset",
@@ -19380,7 +19393,7 @@ function CalendarDateRangeControl({
               )
             ] }),
             /* @__PURE__ */ jsxs21(component_default9, { spacing: 2, children: [
-              /* @__PURE__ */ jsx68(
+              /* @__PURE__ */ jsx79(
                 input_control_default,
                 {
                   __next40pxDefaultSize: true,
@@ -19393,7 +19406,7 @@ function CalendarDateRangeControl({
                   required: !!field.isValid?.required
                 }
               ),
-              /* @__PURE__ */ jsx68(
+              /* @__PURE__ */ jsx79(
                 input_control_default,
                 {
                   __next40pxDefaultSize: true,
@@ -19407,7 +19420,7 @@ function CalendarDateRangeControl({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx68(
+            /* @__PURE__ */ jsx79(
               DateRangeCalendar2,
               {
                 style: { width: "100%" },
@@ -19430,10 +19443,11 @@ function DateControl({
   field,
   onChange,
   hideLabelFromVision,
-  operator
+  operator,
+  validity
 }) {
   if (operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER) {
-    return /* @__PURE__ */ jsx68(
+    return /* @__PURE__ */ jsx79(
       RelativeDateControl,
       {
         className: "dataviews-controls__date",
@@ -19446,30 +19460,31 @@ function DateControl({
     );
   }
   if (operator === OPERATOR_BETWEEN) {
-    return /* @__PURE__ */ jsx68(
+    return /* @__PURE__ */ jsx79(
       CalendarDateRangeControl,
       {
         data,
         field,
         onChange,
-        hideLabelFromVision
+        hideLabelFromVision,
+        validity
       }
     );
   }
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx79(
     CalendarDateControl,
     {
       data,
       field,
       onChange,
-      hideLabelFromVision
+      hideLabelFromVision,
+      validity
     }
   );
 }
 
 // src/dataform-controls/utils/validated-input.tsx
-import deepMerge4 from "deepmerge";
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var { ValidatedInputControl: ValidatedInputControl3 } = unlock3(privateApis);
 function ValidatedText({
   data,
@@ -19478,11 +19493,11 @@ function ValidatedText({
   hideLabelFromVision,
   type,
   prefix,
-  suffix
+  suffix,
+  validity
 }) {
-  const { label, placeholder, description, getValue, setValue, isValid: isValid3 } = field;
+  const { label, placeholder, description, getValue, setValue, isValid } = field;
   const value = getValue({ item: data });
-  const [customValidity, setCustomValidity] = useState(void 0);
   const onChangeControl = useCallback(
     (newValue) => onChange(
       setValue({
@@ -19492,35 +19507,11 @@ function ValidatedText({
     ),
     [data, setValue, onChange]
   );
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = isValid3?.custom?.(
-        deepMerge4(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, isValid3, setValue]
-  );
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx80(
     ValidatedInputControl3,
     {
-      required: !!isValid3?.required,
-      onValidate: onValidateControl,
-      customValidity,
+      required: !!isValid?.required,
+      customValidity: getCustomValidity(isValid, validity),
       label,
       placeholder,
       value: value ?? "",
@@ -19536,14 +19527,15 @@ function ValidatedText({
 }
 
 // src/dataform-controls/email.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 function Email({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx81(
     ValidatedText,
     {
       ...{
@@ -19551,22 +19543,24 @@ function Email({
         field,
         onChange,
         hideLabelFromVision,
+        validity,
         type: "email",
-        prefix: /* @__PURE__ */ jsx70(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx70(icon_default2, { icon: at_symbol_default }) })
+        prefix: /* @__PURE__ */ jsx81(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx81(icon_default2, { icon: at_symbol_default }) })
       }
     }
   );
 }
 
 // src/dataform-controls/telephone.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 function Telephone({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx82(
     ValidatedText,
     {
       ...{
@@ -19574,22 +19568,24 @@ function Telephone({
         field,
         onChange,
         hideLabelFromVision,
+        validity,
         type: "tel",
-        prefix: /* @__PURE__ */ jsx71(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx71(icon_default2, { icon: mobile_default }) })
+        prefix: /* @__PURE__ */ jsx82(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx82(icon_default2, { icon: mobile_default }) })
       }
     }
   );
 }
 
 // src/dataform-controls/url.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 function Url({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx83(
     ValidatedText,
     {
       ...{
@@ -19597,17 +19593,17 @@ function Url({
         field,
         onChange,
         hideLabelFromVision,
+        validity,
         type: "url",
-        prefix: /* @__PURE__ */ jsx72(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx72(icon_default2, { icon: link_default }) })
+        prefix: /* @__PURE__ */ jsx83(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx83(icon_default2, { icon: link_default }) })
       }
     }
   );
 }
 
 // src/dataform-controls/utils/validated-number.tsx
-import deepMerge5 from "deepmerge";
 import { __ as __46 } from "@wordpress/i18n";
-import { jsx as jsx73, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs22 } from "react/jsx-runtime";
 var { ValidatedNumberControl: ValidatedNumberControl2 } = unlock3(privateApis);
 function toNumberOrEmpty(value) {
   if (value === "" || value === void 0) {
@@ -19631,13 +19627,13 @@ function BetweenControls({
     (newValue) => onChange([min, toNumberOrEmpty(newValue)]),
     [onChange, min]
   );
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx84(
     base_control_default,
     {
       __nextHasNoMarginBottom: true,
       help: __46("The max. value must be greater than the min. value."),
       children: /* @__PURE__ */ jsxs22(component_default3, { direction: "row", gap: 4, children: [
-        /* @__PURE__ */ jsx73(
+        /* @__PURE__ */ jsx84(
           number_control_default,
           {
             label: __46("Min."),
@@ -19649,7 +19645,7 @@ function BetweenControls({
             step
           }
         ),
-        /* @__PURE__ */ jsx73(
+        /* @__PURE__ */ jsx84(
           number_control_default,
           {
             label: __46("Max."),
@@ -19671,12 +19667,12 @@ function ValidatedNumber({
   onChange,
   hideLabelFromVision,
   operator,
-  decimals
+  decimals,
+  validity
 }) {
   const step = Math.pow(10, Math.abs(decimals) * -1);
-  const { label, description, getValue, setValue } = field;
+  const { label, description, getValue, setValue, isValid } = field;
   const value = getValue({ item: data }) ?? "";
-  const [customValidity, setCustomValidity] = useState(void 0);
   const onChangeControl = useCallback(
     (newValue) => {
       onChange(
@@ -19702,29 +19698,6 @@ function ValidatedNumber({
     },
     [data, onChange, setValue]
   );
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge5(
-          data,
-          setValue({
-            item: data,
-            value: [void 0, "", null].includes(newValue) ? void 0 : Number(newValue)
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
   if (operator === OPERATOR_BETWEEN) {
     let valueBetween = ["", ""];
     if (Array.isArray(value) && value.length === 2 && value.every(
@@ -19732,7 +19705,7 @@ function ValidatedNumber({
     )) {
       valueBetween = value;
     }
-    return /* @__PURE__ */ jsx73(
+    return /* @__PURE__ */ jsx84(
       BetweenControls,
       {
         value: valueBetween,
@@ -19742,12 +19715,11 @@ function ValidatedNumber({
       }
     );
   }
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx84(
     ValidatedNumberControl2,
     {
-      required: !!field.isValid?.required,
-      onValidate: onValidateControl,
-      customValidity,
+      required: !!isValid?.required,
+      customValidity: getCustomValidity(isValid, validity),
       label,
       help: description,
       value,
@@ -19760,124 +19732,84 @@ function ValidatedNumber({
 }
 
 // src/dataform-controls/integer.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 function Number2(props) {
-  return /* @__PURE__ */ jsx74(ValidatedNumber, { ...props, decimals: 0 });
+  return /* @__PURE__ */ jsx85(ValidatedNumber, { ...props, decimals: 0 });
 }
 
 // src/dataform-controls/number.tsx
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
 function Number3(props) {
-  return /* @__PURE__ */ jsx75(ValidatedNumber, { ...props, decimals: 2 });
+  return /* @__PURE__ */ jsx86(ValidatedNumber, { ...props, decimals: 2 });
 }
 
 // src/dataform-controls/radio.tsx
-import deepMerge6 from "deepmerge";
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var { ValidatedRadioControl: ValidatedRadioControl2 } = unlock3(privateApis);
 function Radio2({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const { label, description, elements, getValue, setValue } = field;
+  const { label, description, getValue, setValue, isValid } = field;
+  const { elements, isLoading } = useElements({
+    elements: field.elements,
+    getElements: field.getElements
+  });
   const value = getValue({ item: data });
-  const [customValidity, setCustomValidity] = useState(void 0);
   const onChangeControl = useCallback(
     (newValue) => onChange(setValue({ item: data, value: newValue })),
     [data, onChange, setValue]
   );
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge6(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
-  if (elements) {
-    return /* @__PURE__ */ jsx76(
-      ValidatedRadioControl2,
-      {
-        required: !!field.isValid?.required,
-        onValidate: onValidateControl,
-        customValidity,
-        label,
-        help: description,
-        onChange: onChangeControl,
-        options: elements,
-        selected: value,
-        hideLabelFromVision
-      }
-    );
+  if (isLoading) {
+    return /* @__PURE__ */ jsx87(spinner_default, {});
   }
-  return null;
+  return /* @__PURE__ */ jsx87(
+    ValidatedRadioControl2,
+    {
+      required: !!field.isValid?.required,
+      customValidity: getCustomValidity(isValid, validity),
+      label,
+      help: description,
+      onChange: onChangeControl,
+      options: elements,
+      selected: value,
+      hideLabelFromVision
+    }
+  );
 }
 
 // src/dataform-controls/select.tsx
-import deepMerge7 from "deepmerge";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 var { ValidatedSelectControl: ValidatedSelectControl2 } = unlock3(privateApis);
 function Select2({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const { type, label, description, getValue, setValue } = field;
-  const [customValidity, setCustomValidity] = useState(void 0);
+  const { type, label, description, getValue, setValue, isValid } = field;
   const isMultiple = type === "array";
   const value = getValue({ item: data }) ?? (isMultiple ? [] : "");
   const onChangeControl = useCallback(
     (newValue) => onChange(setValue({ item: data, value: newValue })),
     [data, onChange, setValue]
   );
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge7(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
-  const elements = field?.elements ?? [];
-  return /* @__PURE__ */ jsx77(
+  const { elements, isLoading } = useElements({
+    elements: field.elements,
+    getElements: field.getElements
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx88(spinner_default, {});
+  }
+  return /* @__PURE__ */ jsx88(
     ValidatedSelectControl2,
     {
       required: !!field.isValid?.required,
-      onValidate: onValidateControl,
-      customValidity,
+      customValidity: getCustomValidity(isValid, validity),
       label,
       value,
       help: description,
@@ -19892,16 +19824,17 @@ function Select2({
 }
 
 // src/dataform-controls/text.tsx
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 function Text3({
   data,
   field,
   onChange,
   hideLabelFromVision,
-  config
+  config,
+  validity
 }) {
   const { prefix, suffix } = config || {};
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx89(
     ValidatedText,
     {
       ...{
@@ -19909,6 +19842,7 @@ function Text3({
         field,
         onChange,
         hideLabelFromVision,
+        validity,
         prefix: prefix ? createElement(prefix) : void 0,
         suffix: suffix ? createElement(suffix) : void 0
       }
@@ -19917,51 +19851,26 @@ function Text3({
 }
 
 // src/dataform-controls/toggle.tsx
-import deepMerge8 from "deepmerge";
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var { ValidatedToggleControl: ValidatedToggleControl2 } = unlock3(privateApis);
 function Toggle({
   field,
   onChange,
   data,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const { label, description, getValue, setValue } = field;
-  const [customValidity, setCustomValidity] = useState(void 0);
+  const { label, description, getValue, setValue, isValid } = field;
   const onChangeControl = useCallback(() => {
     onChange(
       setValue({ item: data, value: !getValue({ item: data }) })
     );
   }, [onChange, setValue, data, getValue]);
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge8(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx90(
     ValidatedToggleControl2,
     {
-      required: !!field.isValid.required,
-      onValidate: onValidateControl,
-      customValidity,
+      required: !!isValid.required,
+      customValidity: getCustomValidity(isValid, validity),
       hidden: hideLabelFromVision,
       __nextHasNoMarginBottom: true,
       label,
@@ -19973,53 +19882,28 @@ function Toggle({
 }
 
 // src/dataform-controls/textarea.tsx
-import deepMerge9 from "deepmerge";
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var { ValidatedTextareaControl: ValidatedTextareaControl2 } = unlock3(privateApis);
 function Textarea({
   data,
   field,
   onChange,
   hideLabelFromVision,
-  config
+  config,
+  validity
 }) {
   const { rows = 4 } = config || {};
-  const { label, placeholder, description, setValue } = field;
+  const { label, placeholder, description, setValue, isValid } = field;
   const value = field.getValue({ item: data });
-  const [customValidity, setCustomValidity] = useState(void 0);
   const onChangeControl = useCallback(
     (newValue) => onChange(setValue({ item: data, value: newValue })),
     [data, onChange, setValue]
   );
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge9(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx91(
     ValidatedTextareaControl2,
     {
-      required: !!field.isValid?.required,
-      onValidate: onValidateControl,
-      customValidity,
+      required: !!isValid?.required,
+      customValidity: getCustomValidity(isValid, validity),
       label,
       placeholder,
       value: value ?? "",
@@ -20034,91 +19918,73 @@ function Textarea({
 }
 
 // src/dataform-controls/toggle-group.tsx
-import deepMerge10 from "deepmerge";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var { ValidatedToggleGroupControl: ValidatedToggleGroupControl2 } = unlock3(privateApis);
 function ToggleGroup({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const { getValue, setValue } = field;
-  const [customValidity, setCustomValidity] = useState(void 0);
+  const { getValue, setValue, isValid } = field;
   const value = getValue({ item: data });
   const onChangeControl = useCallback(
     (newValue) => onChange(setValue({ item: data, value: newValue })),
     [data, onChange, setValue]
   );
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge10(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
-  if (field.elements) {
-    const selectedOption = field.elements.find(
-      (el) => el.value === value
-    );
-    return /* @__PURE__ */ jsx81(
-      ValidatedToggleGroupControl2,
-      {
-        required: !!field.isValid?.required,
-        onValidate: onValidateControl,
-        customValidity,
-        __next40pxDefaultSize: true,
-        __nextHasNoMarginBottom: true,
-        isBlock: true,
-        label: field.label,
-        help: selectedOption?.description || field.description,
-        onChange: onChangeControl,
-        value,
-        hideLabelFromVision,
-        children: field.elements.map((el) => /* @__PURE__ */ jsx81(
-          component_default12,
-          {
-            label: el.label,
-            value: el.value
-          },
-          el.value
-        ))
-      }
-    );
+  const { elements, isLoading } = useElements({
+    elements: field.elements,
+    getElements: field.getElements
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx92(spinner_default, {});
   }
-  return null;
+  if (elements.length === 0) {
+    return null;
+  }
+  const selectedOption = elements.find((el) => el.value === value);
+  return /* @__PURE__ */ jsx92(
+    ValidatedToggleGroupControl2,
+    {
+      required: !!field.isValid?.required,
+      customValidity: getCustomValidity(isValid, validity),
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      isBlock: true,
+      label: field.label,
+      help: selectedOption?.description || field.description,
+      onChange: onChangeControl,
+      value,
+      hideLabelFromVision,
+      children: elements.map((el) => /* @__PURE__ */ jsx92(
+        component_default12,
+        {
+          label: el.label,
+          value: el.value
+        },
+        el.value
+      ))
+    }
+  );
 }
 
 // src/dataform-controls/array.tsx
-import deepMerge11 from "deepmerge";
-import { _n as _n4, sprintf as sprintf15 } from "@wordpress/i18n";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var { ValidatedFormTokenField: ValidatedFormTokenField2 } = unlock3(privateApis);
 function ArrayControl({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const { label, placeholder, elements, getValue, setValue } = field;
+  const { label, placeholder, getValue, setValue, isValid } = field;
   const value = getValue({ item: data });
-  const [customValidity, setCustomValidity] = useState(void 0);
+  const { elements, isLoading } = useElements({
+    elements: field.elements,
+    getElements: field.getElements
+  });
   const arrayValueAsElements = useMemo(
     () => Array.isArray(value) ? value.map((token) => {
       const element = elements?.find(
@@ -20128,59 +19994,6 @@ function ArrayControl({
     }) : [],
     [value, elements]
   );
-  const validateTokens = useCallback(
-    (tokens) => {
-      const tokenValues = tokens.map((token) => {
-        if (typeof token === "object" && "value" in token) {
-          return token.value;
-        }
-        return token;
-      });
-      if (field.isValid?.elements && elements) {
-        const invalidTokens = tokenValues.filter((tokenValue) => {
-          return !elements.some(
-            (element) => element.value === tokenValue
-          );
-        });
-        if (invalidTokens.length > 0) {
-          setCustomValidity({
-            type: "invalid",
-            message: sprintf15(
-              /* translators: %s: list of invalid tokens */
-              _n4(
-                "Please select from the available options: %s is invalid.",
-                "Please select from the available options: %s are invalid.",
-                invalidTokens.length
-              ),
-              invalidTokens.join(", ")
-            )
-          });
-          return;
-        }
-      }
-      if (field.isValid?.custom) {
-        const result = field.isValid?.custom?.(
-          deepMerge11(
-            data,
-            setValue({
-              item: data,
-              value: tokenValues
-            })
-          ),
-          field
-        );
-        if (result) {
-          setCustomValidity({
-            type: "invalid",
-            message: result
-          });
-          return;
-        }
-      }
-      setCustomValidity(void 0);
-    },
-    [elements, data, field, setValue]
-  );
   const onChangeControl = useCallback(
     (tokens) => {
       const valueTokens = tokens.map((token) => {
@@ -20193,12 +20006,14 @@ function ArrayControl({
     },
     [onChange, setValue, data]
   );
-  return /* @__PURE__ */ jsx82(
+  if (isLoading) {
+    return /* @__PURE__ */ jsx93(spinner_default, {});
+  }
+  return /* @__PURE__ */ jsx93(
     ValidatedFormTokenField2,
     {
-      required: !!field.isValid?.required,
-      onValidate: validateTokens,
-      customValidity,
+      required: !!isValid?.required,
+      customValidity: getCustomValidity(isValid, validity),
       label: hideLabelFromVision ? void 0 : label,
       value: arrayValueAsElements,
       onChange: onChangeControl,
@@ -20231,9 +20046,9 @@ function ArrayControl({
           const element = elements.find(
             (el) => el.value === item2
           );
-          return /* @__PURE__ */ jsx82("span", { children: element?.label || item2 });
+          return /* @__PURE__ */ jsx93("span", { children: element?.label || item2 });
         }
-        return /* @__PURE__ */ jsx82("span", { children: item2 });
+        return /* @__PURE__ */ jsx93("span", { children: item2 });
       }
     }
   );
@@ -20241,18 +20056,17 @@ function ArrayControl({
 
 // src/dataform-controls/color.tsx
 import { colord as colord5 } from "colord";
-import deepMerge12 from "deepmerge";
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var { ValidatedInputControl: ValidatedInputControl4, Picker: Picker2 } = unlock3(privateApis);
 var ColorPicker = ({
   color,
   onColorChange
 }) => {
   const validColor = color && colord5(color).isValid() ? color : "#ffffff";
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx94(
     dropdown_default,
     {
-      renderToggle: ({ onToggle, isOpen }) => /* @__PURE__ */ jsx83(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx83(
+      renderToggle: ({ onToggle, isOpen }) => /* @__PURE__ */ jsx94(input_prefix_wrapper_default, { variant: "icon", children: /* @__PURE__ */ jsx94(
         "button",
         {
           type: "button",
@@ -20275,7 +20089,7 @@ var ColorPicker = ({
           "aria-label": "Open color picker"
         }
       ) }),
-      renderContent: () => /* @__PURE__ */ jsx83("div", { style: { padding: "16px" }, children: /* @__PURE__ */ jsx83(
+      renderContent: () => /* @__PURE__ */ jsx94("div", { style: { padding: "16px" }, children: /* @__PURE__ */ jsx94(
         Picker2,
         {
           color: colord5(validColor),
@@ -20290,11 +20104,11 @@ function Color({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const { label, placeholder, description, setValue } = field;
+  const { label, placeholder, description, setValue, isValid } = field;
   const value = field.getValue({ item: data }) || "";
-  const [customValidity, setCustomValidity] = useState(void 0);
   const handleColorChange = useCallback(
     (colorObject) => {
       onChange(setValue({ item: data, value: colorObject.toHex() }));
@@ -20307,35 +20121,11 @@ function Color({
     },
     [data, onChange, setValue]
   );
-  const onValidateControl = useCallback(
-    (newValue) => {
-      const message = field.isValid?.custom?.(
-        deepMerge12(
-          data,
-          setValue({
-            item: data,
-            value: newValue
-          })
-        ),
-        field
-      );
-      if (message) {
-        setCustomValidity({
-          type: "invalid",
-          message
-        });
-        return;
-      }
-      setCustomValidity(void 0);
-    },
-    [data, field, setValue]
-  );
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx94(
     ValidatedInputControl4,
     {
       required: !!field.isValid?.required,
-      onValidate: onValidateControl,
-      customValidity,
+      customValidity: getCustomValidity(isValid, validity),
       label,
       placeholder,
       value,
@@ -20343,7 +20133,7 @@ function Color({
       onChange: handleInputChange,
       hideLabelFromVision,
       type: "text",
-      prefix: /* @__PURE__ */ jsx83(
+      prefix: /* @__PURE__ */ jsx94(
         ColorPicker,
         {
           color: value,
@@ -20356,18 +20146,19 @@ function Color({
 
 // src/dataform-controls/password.tsx
 import { __ as __47 } from "@wordpress/i18n";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
 function Password({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
   const [isVisible2, setIsVisible] = useState(false);
   const toggleVisibility = useCallback(() => {
     setIsVisible((prev) => !prev);
   }, []);
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx95(
     ValidatedText,
     {
       ...{
@@ -20375,8 +20166,9 @@ function Password({
         field,
         onChange,
         hideLabelFromVision,
+        validity,
         type: isVisible2 ? "text" : "password",
-        suffix: /* @__PURE__ */ jsx84(
+        suffix: /* @__PURE__ */ jsx95(
           button_default,
           {
             icon: isVisible2 ? unseen_default : seen_default,
@@ -20391,8 +20183,13 @@ function Password({
   );
 }
 
+// src/utils/has-elements.ts
+function hasElements(field) {
+  return Array.isArray(field.elements) && field.elements.length > 0 || typeof field.getElements === "function";
+}
+
 // src/dataform-controls/index.tsx
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var FORM_CONTROLS = {
   array: ArrayControl,
   checkbox: Checkbox,
@@ -20419,7 +20216,7 @@ function createConfiguredControl(config) {
   const { control, ...controlConfig } = config;
   const BaseControlType = getControlByType(control);
   return function ConfiguredControl(props) {
-    return /* @__PURE__ */ jsx85(BaseControlType, { ...props, config: controlConfig });
+    return /* @__PURE__ */ jsx96(BaseControlType, { ...props, config: controlConfig });
   };
 }
 function getControl(field, fieldTypeDefinition) {
@@ -20432,7 +20229,7 @@ function getControl(field, fieldTypeDefinition) {
   if (isEditConfig(field.Edit)) {
     return createConfiguredControl(field.Edit);
   }
-  if (field.elements && field.type !== "array") {
+  if (hasElements(field) && field.type !== "array") {
     return getControlByType("select");
   }
   if (typeof fieldTypeDefinition.Edit === "string") {
@@ -20490,7 +20287,7 @@ function getFilterBy(field, fieldTypeDefinition) {
     operators = operators.filter(
       (operator) => validOperators.includes(operator)
     );
-    if (field.elements && operators.includes(OPERATOR_BETWEEN)) {
+    if (hasElements(field) && operators.includes(OPERATOR_BETWEEN)) {
       operators = operators.filter(
         (operator) => operator !== OPERATOR_BETWEEN
       );
@@ -20520,7 +20317,7 @@ function getFilterBy(field, fieldTypeDefinition) {
     return false;
   }
   let defaultOperators = fieldTypeDefinition.filterBy.defaultOperators;
-  if (field.elements && defaultOperators.includes(OPERATOR_BETWEEN)) {
+  if (hasElements(field) && defaultOperators.includes(OPERATOR_BETWEEN)) {
     defaultOperators = defaultOperators.filter(
       (operator) => operator !== OPERATOR_BETWEEN
     );
@@ -20543,7 +20340,7 @@ function normalizeFields(fields) {
         direction
       );
     };
-    const isValid3 = {
+    const isValid = {
       ...fieldTypeDefinition.isValid,
       ...field.isValid
     };
@@ -20563,8 +20360,9 @@ function normalizeFields(fields) {
       setValue,
       render: render3,
       sort: sort14,
-      isValid: isValid3,
+      isValid,
       Edit,
+      hasElements: hasElements(field),
       enableHiding: field.enableHiding ?? true,
       enableSorting: field.enableSorting ?? fieldTypeDefinition.enableSorting ?? true,
       filterBy,
@@ -20574,10 +20372,10 @@ function normalizeFields(fields) {
 }
 
 // src/components/dataviews/index.tsx
-import { Fragment as Fragment10, jsx as jsx86, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx97, jsxs as jsxs23 } from "react/jsx-runtime";
 var defaultGetItemId = (item2) => item2.id;
 var defaultIsItemClickable = () => true;
-var EMPTY_ARRAY5 = [];
+var EMPTY_ARRAY6 = [];
 var dataViewsLayouts = VIEW_LAYOUTS.filter(
   (viewLayout) => !viewLayout.isPicker
 );
@@ -20602,8 +20400,8 @@ function DefaultUI({
               expanded: false,
               className: "dataviews__search",
               children: [
-                search && /* @__PURE__ */ jsx86(dataviews_search_default, { label: searchLabel }),
-                /* @__PURE__ */ jsx86(toggle_default, {})
+                search && /* @__PURE__ */ jsx97(dataviews_search_default, { label: searchLabel }),
+                /* @__PURE__ */ jsx97(toggle_default, {})
               ]
             }
           ),
@@ -20614,7 +20412,7 @@ function DefaultUI({
               expanded: false,
               style: { flexShrink: 0 },
               children: [
-                /* @__PURE__ */ jsx86(dataviews_view_config_default, {}),
+                /* @__PURE__ */ jsx97(dataviews_view_config_default, {}),
                 header
               ]
             }
@@ -20622,9 +20420,9 @@ function DefaultUI({
         ]
       }
     ),
-    /* @__PURE__ */ jsx86(filters_toggled_default, { className: "dataviews-filters__container" }),
-    /* @__PURE__ */ jsx86(DataViewsLayout, {}),
-    /* @__PURE__ */ jsx86(DataViewsFooter, {})
+    /* @__PURE__ */ jsx97(filters_toggled_default, { className: "dataviews-filters__container" }),
+    /* @__PURE__ */ jsx97(DataViewsLayout, {}),
+    /* @__PURE__ */ jsx97(DataViewsFooter, {})
   ] });
 }
 function DataViews({
@@ -20633,7 +20431,7 @@ function DataViews({
   fields,
   search = true,
   searchLabel = void 0,
-  actions = EMPTY_ARRAY5,
+  actions = EMPTY_ARRAY6,
   data,
   getItemId = defaultGetItemId,
   getItemLevel,
@@ -20730,7 +20528,7 @@ function DataViews({
   if (!defaultLayouts[view.type]) {
     return null;
   }
-  return /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx97(
     dataviews_context_default.Provider,
     {
       value: {
@@ -20761,7 +20559,7 @@ function DataViews({
         empty,
         hasInfiniteScrollHandler: !!infiniteScrollHandler
       },
-      children: /* @__PURE__ */ jsx86("div", { className: "dataviews-wrapper", ref: containerRef, children: children ?? /* @__PURE__ */ jsx86(
+      children: /* @__PURE__ */ jsx97("div", { className: "dataviews-wrapper", ref: containerRef, children: children ?? /* @__PURE__ */ jsx97(
         DefaultUI,
         {
           header,
@@ -20786,13 +20584,13 @@ DataViewsSubComponents.Footer = DataViewsFooter;
 var dataviews_default = DataViewsSubComponents;
 
 // src/components/dataviews-picker/index.tsx
-import { Fragment as Fragment11, jsx as jsx87, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx98, jsxs as jsxs24 } from "react/jsx-runtime";
 var isItemClickable = () => false;
 var dataViewsPickerLayouts = VIEW_LAYOUTS.filter(
   (viewLayout) => viewLayout.isPicker
 );
 var defaultGetItemId2 = (item2) => item2.id;
-var EMPTY_ARRAY6 = [];
+var EMPTY_ARRAY7 = [];
 function DefaultUI2({
   search = true,
   searchLabel = void 0
@@ -20813,26 +20611,26 @@ function DefaultUI2({
               expanded: false,
               className: "dataviews__search",
               children: [
-                search && /* @__PURE__ */ jsx87(dataviews_search_default, { label: searchLabel }),
-                /* @__PURE__ */ jsx87(toggle_default, {})
+                search && /* @__PURE__ */ jsx98(dataviews_search_default, { label: searchLabel }),
+                /* @__PURE__ */ jsx98(toggle_default, {})
               ]
             }
           ),
-          /* @__PURE__ */ jsx87(
+          /* @__PURE__ */ jsx98(
             component_default9,
             {
               spacing: 1,
               expanded: false,
               style: { flexShrink: 0 },
-              children: /* @__PURE__ */ jsx87(dataviews_view_config_default, {})
+              children: /* @__PURE__ */ jsx98(dataviews_view_config_default, {})
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx87(filters_toggled_default, { className: "dataviews-filters__container" }),
-    /* @__PURE__ */ jsx87(DataViewsLayout, {}),
-    /* @__PURE__ */ jsx87(DataViewsPickerFooter, {})
+    /* @__PURE__ */ jsx98(filters_toggled_default, { className: "dataviews-filters__container" }),
+    /* @__PURE__ */ jsx98(DataViewsLayout, {}),
+    /* @__PURE__ */ jsx98(DataViewsPickerFooter, {})
   ] });
 }
 function DataViewsPicker({
@@ -20841,7 +20639,7 @@ function DataViewsPicker({
   fields,
   search = true,
   searchLabel = void 0,
-  actions = EMPTY_ARRAY6,
+  actions = EMPTY_ARRAY7,
   data,
   getItemId = defaultGetItemId2,
   isLoading = false,
@@ -20923,7 +20721,7 @@ function DataViewsPicker({
   if (!defaultLayouts[view.type]) {
     return null;
   }
-  return /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx98(
     dataviews_context_default.Provider,
     {
       value: {
@@ -20952,7 +20750,7 @@ function DataViewsPicker({
         empty,
         hasInfiniteScrollHandler: !!infiniteScrollHandler
       },
-      children: /* @__PURE__ */ jsx87("div", { className: "dataviews-picker-wrapper", ref: containerRef, children: children ?? /* @__PURE__ */ jsx87(DefaultUI2, { search, searchLabel }) })
+      children: /* @__PURE__ */ jsx98("div", { className: "dataviews-picker-wrapper", ref: containerRef, children: children ?? /* @__PURE__ */ jsx98(DefaultUI2, { search, searchLabel }) })
     }
   );
 }
@@ -20969,7 +20767,7 @@ DataViewsPickerSubComponents.ViewConfig = DataviewsViewConfigDropdown;
 var dataviews_picker_default = DataViewsPickerSubComponents;
 
 // src/components/dataform-context/index.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
 var DataFormContext = createContext({
   fields: []
 });
@@ -20978,7 +20776,7 @@ function DataFormProvider({
   fields,
   children
 }) {
-  return /* @__PURE__ */ jsx88(DataFormContext.Provider, { value: { fields }, children });
+  return /* @__PURE__ */ jsx99(DataFormContext.Provider, { value: { fields }, children });
 }
 var dataform_context_default = DataFormContext;
 
@@ -21066,18 +20864,19 @@ function normalizeFormFields(form) {
 }
 
 // src/dataform-layouts/regular/index.tsx
-import { Fragment as Fragment12, jsx as jsx89, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx100, jsxs as jsxs25 } from "react/jsx-runtime";
 function Header2({ title }) {
-  return /* @__PURE__ */ jsx89(component_default14, { className: "dataforms-layouts-regular__header", spacing: 4, children: /* @__PURE__ */ jsxs25(component_default9, { alignment: "center", children: [
-    /* @__PURE__ */ jsx89(component_default15, { level: 2, size: 13, children: title }),
-    /* @__PURE__ */ jsx89(component_default6, {})
+  return /* @__PURE__ */ jsx100(component_default14, { className: "dataforms-layouts-regular__header", spacing: 4, children: /* @__PURE__ */ jsxs25(component_default9, { alignment: "center", children: [
+    /* @__PURE__ */ jsx100(component_default15, { level: 2, size: 13, children: title }),
+    /* @__PURE__ */ jsx100(component_default6, {})
   ] }) });
 }
 function FormRegularField({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
   const { fields } = useContext(dataform_context_default);
   const form = useMemo(
@@ -21089,13 +20888,14 @@ function FormRegularField({
   );
   if (isCombinedField(field)) {
     return /* @__PURE__ */ jsxs25(Fragment12, { children: [
-      !hideLabelFromVision && field.label && /* @__PURE__ */ jsx89(Header2, { title: field.label }),
-      /* @__PURE__ */ jsx89(
+      !hideLabelFromVision && field.label && /* @__PURE__ */ jsx100(Header2, { title: field.label }),
+      /* @__PURE__ */ jsx100(
         DataFormLayout,
         {
           data,
           form,
-          onChange
+          onChange,
+          validity: validity?.children
         }
       )
     ] });
@@ -21113,7 +20913,7 @@ function FormRegularField({
   }
   if (labelPosition === "side") {
     return /* @__PURE__ */ jsxs25(component_default9, { className: "dataforms-layouts-regular__field", children: [
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx100(
         "div",
         {
           className: clsx39(
@@ -21123,40 +20923,42 @@ function FormRegularField({
           children: fieldDefinition.label
         }
       ),
-      /* @__PURE__ */ jsx89("div", { className: "dataforms-layouts-regular__field-control", children: fieldDefinition.readOnly === true ? /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx100("div", { className: "dataforms-layouts-regular__field-control", children: fieldDefinition.readOnly === true ? /* @__PURE__ */ jsx100(
         fieldDefinition.render,
         {
           item: data,
           field: fieldDefinition
         }
-      ) : /* @__PURE__ */ jsx89(
+      ) : /* @__PURE__ */ jsx100(
         fieldDefinition.Edit,
         {
           data,
           field: fieldDefinition,
           onChange,
-          hideLabelFromVision: true
+          hideLabelFromVision: true,
+          validity
         },
         fieldDefinition.id
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsx89("div", { className: "dataforms-layouts-regular__field", children: fieldDefinition.readOnly === true ? /* @__PURE__ */ jsx89(Fragment12, { children: /* @__PURE__ */ jsxs25(Fragment12, { children: [
-    !hideLabelFromVision && labelPosition !== "none" && /* @__PURE__ */ jsx89(base_control_default.VisualLabel, { children: fieldDefinition.label }),
-    /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx100("div", { className: "dataforms-layouts-regular__field", children: fieldDefinition.readOnly === true ? /* @__PURE__ */ jsx100(Fragment12, { children: /* @__PURE__ */ jsxs25(Fragment12, { children: [
+    !hideLabelFromVision && labelPosition !== "none" && /* @__PURE__ */ jsx100(base_control_default.VisualLabel, { children: fieldDefinition.label }),
+    /* @__PURE__ */ jsx100(
       fieldDefinition.render,
       {
         item: data,
         field: fieldDefinition
       }
     )
-  ] }) }) : /* @__PURE__ */ jsx89(
+  ] }) }) : /* @__PURE__ */ jsx100(
     fieldDefinition.Edit,
     {
       data,
       field: fieldDefinition,
       onChange,
-      hideLabelFromVision: labelPosition === "none" ? true : hideLabelFromVision
+      hideLabelFromVision: labelPosition === "none" ? true : hideLabelFromVision,
+      validity
     }
   ) });
 }
@@ -21168,8 +20970,8 @@ import clsx40 from "clsx";
 import { __ as __48 } from "@wordpress/i18n";
 
 // src/dataform-layouts/panel/summary-button.tsx
-import { sprintf as sprintf16, _x as _x5 } from "@wordpress/i18n";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { sprintf as sprintf15, _x as _x5 } from "@wordpress/i18n";
+import { jsx as jsx101 } from "react/jsx-runtime";
 function SummaryButton({
   summaryFields,
   data,
@@ -21179,14 +20981,14 @@ function SummaryButton({
   onClick,
   "aria-expanded": ariaExpanded
 }) {
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx101(
     button_default,
     {
       className: "dataforms-layouts-panel__summary-button",
       size: "compact",
       variant: ["none", "top"].includes(labelPosition) ? "link" : "tertiary",
       "aria-expanded": ariaExpanded,
-      "aria-label": sprintf16(
+      "aria-label": sprintf15(
         // translators: %s: Field name.
         _x5("Edit %s", "field"),
         fieldLabel || ""
@@ -21199,7 +21001,7 @@ function SummaryButton({
         height: "auto",
         alignItems: "flex-start"
       } : void 0,
-      children: summaryFields.length > 1 ? /* @__PURE__ */ jsx90(
+      children: summaryFields.length > 1 ? /* @__PURE__ */ jsx101(
         "div",
         {
           style: {
@@ -21209,11 +21011,11 @@ function SummaryButton({
             width: "100%",
             gap: "2px"
           },
-          children: summaryFields.map((summaryField) => /* @__PURE__ */ jsx90(
+          children: summaryFields.map((summaryField) => /* @__PURE__ */ jsx101(
             "div",
             {
               style: { width: "100%" },
-              children: /* @__PURE__ */ jsx90(
+              children: /* @__PURE__ */ jsx101(
                 summaryField.render,
                 {
                   item: data,
@@ -21224,7 +21026,7 @@ function SummaryButton({
             summaryField.id
           ))
         }
-      ) : summaryFields.map((summaryField) => /* @__PURE__ */ jsx90(
+      ) : summaryFields.map((summaryField) => /* @__PURE__ */ jsx101(
         summaryField.render,
         {
           item: data,
@@ -21238,20 +21040,20 @@ function SummaryButton({
 var summary_button_default = SummaryButton;
 
 // src/dataform-layouts/panel/dropdown.tsx
-import { Fragment as Fragment13, jsx as jsx91, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx102, jsxs as jsxs26 } from "react/jsx-runtime";
 function DropdownHeader({
   title,
   onClose
 }) {
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx102(
     component_default14,
     {
       className: "dataforms-layouts-panel__dropdown-header",
       spacing: 4,
       children: /* @__PURE__ */ jsxs26(component_default9, { alignment: "center", children: [
-        title && /* @__PURE__ */ jsx91(component_default15, { level: 2, size: 13, children: title }),
-        /* @__PURE__ */ jsx91(component_default6, {}),
-        onClose && /* @__PURE__ */ jsx91(
+        title && /* @__PURE__ */ jsx102(component_default15, { level: 2, size: 13, children: title }),
+        /* @__PURE__ */ jsx102(component_default6, {}),
+        onClose && /* @__PURE__ */ jsx102(
           button_default,
           {
             label: __48("Close"),
@@ -21265,13 +21067,14 @@ function DropdownHeader({
   );
 }
 function PanelDropdown({
-  fieldDefinition,
-  summaryFields,
-  popoverAnchor,
-  labelPosition = "side",
   data,
+  field,
   onChange,
-  field
+  validity,
+  labelPosition = "side",
+  summaryFields,
+  fieldDefinition,
+  popoverAnchor
 }) {
   const fieldLabel = isCombinedField(field) ? field.label : fieldDefinition?.label;
   const form = useMemo(
@@ -21284,6 +21087,15 @@ function PanelDropdown({
     }),
     [field]
   );
+  const formValidity = useMemo(() => {
+    if (validity === void 0) {
+      return void 0;
+    }
+    if (isCombinedField(field)) {
+      return validity?.children;
+    }
+    return { [field.id]: validity };
+  }, [validity, field]);
   const popoverProps = useMemo(
     () => ({
       // Anchor the popover to the middle of the entire row so that it doesn't
@@ -21295,7 +21107,7 @@ function PanelDropdown({
     }),
     [popoverAnchor]
   );
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx102(
     dropdown_default,
     {
       contentClassName: "dataforms-layouts-panel__field-dropdown",
@@ -21306,7 +21118,7 @@ function PanelDropdown({
         variant: "tertiary",
         tooltipPosition: "middle left"
       },
-      renderToggle: ({ isOpen, onToggle }) => /* @__PURE__ */ jsx91(
+      renderToggle: ({ isOpen, onToggle }) => /* @__PURE__ */ jsx102(
         summary_button_default,
         {
           summaryFields,
@@ -21319,22 +21131,24 @@ function PanelDropdown({
         }
       ),
       renderContent: ({ onClose }) => /* @__PURE__ */ jsxs26(Fragment13, { children: [
-        /* @__PURE__ */ jsx91(DropdownHeader, { title: fieldLabel, onClose }),
-        /* @__PURE__ */ jsx91(
+        /* @__PURE__ */ jsx102(DropdownHeader, { title: fieldLabel, onClose }),
+        /* @__PURE__ */ jsx102(
           DataFormLayout,
           {
             data,
             form,
             onChange,
-            children: (FieldLayout, nestedField) => /* @__PURE__ */ jsx91(
+            validity: formValidity,
+            children: (FieldLayout, childField, childFieldValidity) => /* @__PURE__ */ jsx102(
               FieldLayout,
               {
                 data,
-                field: nestedField,
+                field: childField,
                 onChange,
-                hideLabelFromVision: (form?.fields ?? []).length < 2
+                hideLabelFromVision: (form?.fields ?? []).length < 2,
+                validity: childFieldValidity
               },
-              nestedField.id
+              childField.id
             )
           }
         )
@@ -21345,26 +21159,430 @@ function PanelDropdown({
 var dropdown_default2 = PanelDropdown;
 
 // src/dataform-layouts/panel/modal.tsx
-import deepMerge13 from "deepmerge";
+import deepMerge2 from "deepmerge";
+import { __ as __50 } from "@wordpress/i18n";
+
+// src/hooks/use-form-validity.ts
+import deepMerge from "deepmerge";
 import { __ as __49 } from "@wordpress/i18n";
-import { Fragment as Fragment14, jsx as jsx92, jsxs as jsxs27 } from "react/jsx-runtime";
+var isEmptyNullOrUndefined = (value) => [void 0, "", null].includes(value);
+var isArrayOrElementsEmptyNullOrUndefined = (value) => {
+  return !Array.isArray(value) || value.length === 0 || value.every((element) => isEmptyNullOrUndefined(element));
+};
+function isInvalidForRequired(fieldType, value) {
+  if (fieldType === void 0 && isEmptyNullOrUndefined(value) || fieldType === "text" && isEmptyNullOrUndefined(value) || fieldType === "email" && isEmptyNullOrUndefined(value) || fieldType === "url" && isEmptyNullOrUndefined(value) || fieldType === "telephone" && isEmptyNullOrUndefined(value) || fieldType === "password" && isEmptyNullOrUndefined(value) || fieldType === "integer" && isEmptyNullOrUndefined(value) || fieldType === "number" && isEmptyNullOrUndefined(value) || fieldType === "array" && isArrayOrElementsEmptyNullOrUndefined(value) || fieldType === "boolean" && value !== true) {
+    return true;
+  }
+  return false;
+}
+function isFormValid(formValidity) {
+  if (!formValidity) {
+    return true;
+  }
+  return Object.values(formValidity).every((fieldValidation) => {
+    return Object.entries(fieldValidation).every(
+      ([key, validation]) => {
+        if (key === "children" && validation && typeof validation === "object") {
+          return isFormValid(validation);
+        }
+        return validation.type === "valid";
+      }
+    );
+  });
+}
+function updateFieldValidity(setFormValidity, parentFieldId, fieldId, newValidity) {
+  if (parentFieldId) {
+    setFormValidity((prev) => ({
+      ...prev,
+      [parentFieldId]: {
+        ...prev?.[parentFieldId],
+        children: {
+          ...prev?.[parentFieldId]?.children,
+          [fieldId]: {
+            ...newValidity
+          }
+        }
+      }
+    }));
+  } else {
+    setFormValidity((prev) => ({
+      ...prev,
+      [fieldId]: {
+        ...newValidity
+      }
+    }));
+  }
+}
+function getFieldsToValidate(fields, form) {
+  const formFields = normalizeFormFields(form);
+  if (formFields.length === 0) {
+    return { fields: [], fieldToParent: /* @__PURE__ */ new Map() };
+  }
+  const fieldToParent = /* @__PURE__ */ new Map();
+  const fieldIdsToValidate = [];
+  formFields.forEach((formField) => {
+    if (!!formField.children) {
+      formField.children.forEach((child) => {
+        const childId = typeof child === "string" ? child : child.id;
+        fieldIdsToValidate.push(childId);
+        fieldToParent.set(childId, formField.id);
+      });
+    } else {
+      fieldIdsToValidate.push(formField.id);
+    }
+  });
+  return {
+    fields: normalizeFields(
+      fields.filter(
+        (field) => fieldIdsToValidate.includes(field.id)
+      )
+    ),
+    fieldToParent
+  };
+}
+function useFormValidity(item2, fields, form) {
+  const [formValidity, setFormValidity] = useState();
+  const previousValidatedValuesRef = useRef({});
+  const customValidationCounterRef = useRef({});
+  const elementsValidationCounterRef = useRef(
+    {}
+  );
+  const validate = useCallback(() => {
+    const { fields: fieldsToValidate, fieldToParent } = getFieldsToValidate(
+      fields,
+      form
+    );
+    if (fieldsToValidate.length === 0) {
+      setFormValidity(void 0);
+      return;
+    }
+    fieldsToValidate.forEach((field) => {
+      const value = field.getValue({ item: item2 });
+      if (previousValidatedValuesRef.current.hasOwnProperty(field.id) && value === previousValidatedValuesRef.current[field.id]) {
+        return;
+      }
+      previousValidatedValuesRef.current[field.id] = value;
+      const parentFieldId = fieldToParent.get(field.id);
+      if (field.isValid.required && isInvalidForRequired(field.type, value)) {
+        updateFieldValidity(setFormValidity, parentFieldId, field.id, {
+          required: { type: "invalid" }
+        });
+        return;
+      }
+      if (field.isValid.elements && field.hasElements && !field.getElements && Array.isArray(field.elements)) {
+        const validValues = field.elements.map((el) => el.value);
+        if (field.type !== "array" && !validValues.includes(value)) {
+          updateFieldValidity(
+            setFormValidity,
+            parentFieldId,
+            field.id,
+            {
+              elements: {
+                type: "invalid",
+                message: "Value must be one of the elements."
+              }
+            }
+          );
+          return;
+        }
+        if (field.type === "array" && !Array.isArray(value)) {
+          updateFieldValidity(
+            setFormValidity,
+            parentFieldId,
+            field.id,
+            {
+              elements: {
+                type: "invalid",
+                message: "Value must be an array."
+              }
+            }
+          );
+          return;
+        }
+        if (field.type === "array" && value.some((v) => !validValues.includes(v))) {
+          updateFieldValidity(
+            setFormValidity,
+            parentFieldId,
+            field.id,
+            {
+              elements: {
+                type: "invalid",
+                message: "Value must be one of the elements."
+              }
+            }
+          );
+          return;
+        }
+      }
+      if (field.isValid.elements && field.hasElements && typeof field.getElements === "function") {
+        const currentToken = (elementsValidationCounterRef.current[field.id] || 0) + 1;
+        elementsValidationCounterRef.current[field.id] = currentToken;
+        updateFieldValidity(setFormValidity, parentFieldId, field.id, {
+          elements: {
+            type: "validating",
+            message: "Validating..."
+          }
+        });
+        field.getElements().then((result) => {
+          if (elementsValidationCounterRef.current[field.id] !== currentToken) {
+            return;
+          }
+          if (!Array.isArray(result)) {
+            updateFieldValidity(
+              setFormValidity,
+              parentFieldId,
+              field.id,
+              {
+                elements: {
+                  type: "invalid",
+                  message: "Could not validate elements."
+                }
+              }
+            );
+            return;
+          }
+          const validValues = result.map((el) => el.value);
+          if (field.type !== "array" && !validValues.includes(value)) {
+            updateFieldValidity(
+              setFormValidity,
+              parentFieldId,
+              field.id,
+              {
+                elements: {
+                  type: "invalid",
+                  message: "Value must be one of the elements."
+                }
+              }
+            );
+            return;
+          }
+          if (field.type === "array" && !Array.isArray(value)) {
+            updateFieldValidity(
+              setFormValidity,
+              parentFieldId,
+              field.id,
+              {
+                elements: {
+                  type: "invalid",
+                  message: "Value must be an array."
+                }
+              }
+            );
+            return;
+          }
+          if (field.type === "array" && value.some(
+            (v) => !validValues.includes(v)
+          )) {
+            updateFieldValidity(
+              setFormValidity,
+              parentFieldId,
+              field.id,
+              {
+                elements: {
+                  type: "invalid",
+                  message: "Value must be one of the elements."
+                }
+              }
+            );
+          }
+        }).catch((error) => {
+          if (elementsValidationCounterRef.current[field.id] !== currentToken) {
+            return;
+          }
+          updateFieldValidity(
+            setFormValidity,
+            parentFieldId,
+            field.id,
+            {
+              elements: {
+                type: "invalid",
+                message: error.message
+              }
+            }
+          );
+        });
+      }
+      let customError;
+      try {
+        customError = field.isValid?.custom?.(
+          deepMerge(
+            item2,
+            field.setValue({
+              item: item2,
+              value
+            })
+          ),
+          field
+        );
+      } catch (error) {
+        let errorMessage;
+        if (error instanceof Error) {
+          errorMessage = error.message;
+        } else {
+          errorMessage = String(error) || __49("Unknown error when running custom validation.");
+        }
+        updateFieldValidity(setFormValidity, parentFieldId, field.id, {
+          custom: {
+            type: "invalid",
+            message: errorMessage
+          }
+        });
+      }
+      if (typeof customError === "string") {
+        updateFieldValidity(setFormValidity, parentFieldId, field.id, {
+          custom: {
+            type: "invalid",
+            message: customError
+          }
+        });
+        return;
+      }
+      if (customError instanceof Promise) {
+        const currentToken = (customValidationCounterRef.current[field.id] || 0) + 1;
+        customValidationCounterRef.current[field.id] = currentToken;
+        updateFieldValidity(setFormValidity, parentFieldId, field.id, {
+          custom: {
+            type: "validating",
+            message: "Validating..."
+          }
+        });
+        customError.then((result) => {
+          if (customValidationCounterRef.current[field.id] !== currentToken) {
+            return;
+          }
+          if (result === null) {
+            updateFieldValidity(
+              setFormValidity,
+              parentFieldId,
+              field.id,
+              {
+                custom: {
+                  type: "valid",
+                  message: "Valid"
+                }
+              }
+            );
+            return;
+          }
+          if (typeof result === "string") {
+            updateFieldValidity(
+              setFormValidity,
+              parentFieldId,
+              field.id,
+              {
+                custom: {
+                  type: "invalid",
+                  message: result
+                }
+              }
+            );
+          }
+        }).catch((error) => {
+          if (customValidationCounterRef.current[field.id] !== currentToken) {
+            return;
+          }
+          updateFieldValidity(
+            setFormValidity,
+            parentFieldId,
+            field.id,
+            {
+              custom: {
+                type: "invalid",
+                message: error.message
+              }
+            }
+          );
+        });
+        return;
+      }
+      setFormValidity((prev) => {
+        if (!prev) {
+          return prev;
+        }
+        if (parentFieldId) {
+          const parentField = prev[parentFieldId];
+          if (!parentField?.children) {
+            return prev;
+          }
+          const { [field.id]: removed2, ...restChildren } = parentField.children;
+          if (Object.keys(restChildren).length === 0) {
+            const { children, ...restParent } = parentField;
+            if (Object.keys(restParent).length === 0) {
+              const {
+                [parentFieldId]: removedParent,
+                ...restFields
+              } = prev;
+              return Object.keys(restFields).length === 0 ? void 0 : restFields;
+            }
+            return {
+              ...prev,
+              [parentFieldId]: restParent
+            };
+          }
+          return {
+            ...prev,
+            [parentFieldId]: {
+              ...parentField,
+              children: restChildren
+            }
+          };
+        }
+        if (!prev[field.id]) {
+          return prev;
+        }
+        const { [field.id]: removed, ...rest } = prev;
+        if (Object.keys(rest).length === 0) {
+          return void 0;
+        }
+        return rest;
+      });
+    });
+  }, [item2, fields, form]);
+  useEffect(() => {
+    validate();
+  }, [validate]);
+  return {
+    validity: formValidity,
+    isValid: isFormValid(formValidity)
+  };
+}
+var use_form_validity_default = useFormValidity;
+
+// src/dataform-layouts/panel/modal.tsx
+import { Fragment as Fragment14, jsx as jsx103, jsxs as jsxs27 } from "react/jsx-runtime";
 function ModalContent({
   data,
-  form,
-  fieldLabel,
+  field,
   onChange,
+  fieldLabel,
   onClose
 }) {
+  const { fields } = useContext(dataform_context_default);
   const [changes, setChanges] = useState({});
   const modalData = useMemo(() => {
-    return deepMerge13(data, changes);
+    return deepMerge2(data, changes);
   }, [data, changes]);
+  const form = useMemo(
+    () => ({
+      layout: DEFAULT_LAYOUT,
+      fields: isCombinedField(field) ? field.children : (
+        // If not explicit children return the field id itself.
+        [{ id: field.id }]
+      )
+    }),
+    [field]
+  );
+  const { validity } = use_form_validity_default(
+    modalData,
+    fields,
+    form
+  );
   const onApply = () => {
     onChange(changes);
     onClose();
   };
   const handleOnChange = (newValue) => {
-    setChanges((prev) => deepMerge13(prev, newValue));
+    setChanges((prev) => deepMerge2(prev, newValue));
   };
   return /* @__PURE__ */ jsxs27(
     modal_default,
@@ -21375,21 +21593,23 @@ function ModalContent({
       title: fieldLabel,
       size: "medium",
       children: [
-        /* @__PURE__ */ jsx92(
+        /* @__PURE__ */ jsx103(
           DataFormLayout,
           {
             data: modalData,
             form,
             onChange: handleOnChange,
-            children: (FieldLayout, nestedField) => /* @__PURE__ */ jsx92(
+            validity,
+            children: (FieldLayout, childField, childFieldValidity) => /* @__PURE__ */ jsx103(
               FieldLayout,
               {
                 data: modalData,
-                field: nestedField,
+                field: childField,
                 onChange: handleOnChange,
-                hideLabelFromVision: (form?.fields ?? []).length < 2
+                hideLabelFromVision: (form?.fields ?? []).length < 2,
+                validity: childFieldValidity
               },
-              nestedField.id
+              childField.id
             )
           }
         ),
@@ -21399,23 +21619,23 @@ function ModalContent({
             className: "dataforms-layouts-panel__modal-footer",
             spacing: 3,
             children: [
-              /* @__PURE__ */ jsx92(component_default6, {}),
-              /* @__PURE__ */ jsx92(
+              /* @__PURE__ */ jsx103(component_default6, {}),
+              /* @__PURE__ */ jsx103(
                 button_default,
                 {
                   variant: "tertiary",
                   onClick: onClose,
                   __next40pxDefaultSize: true,
-                  children: __49("Cancel")
+                  children: __50("Cancel")
                 }
               ),
-              /* @__PURE__ */ jsx92(
+              /* @__PURE__ */ jsx103(
                 button_default,
                 {
                   variant: "primary",
                   onClick: onApply,
                   __next40pxDefaultSize: true,
-                  children: __49("Apply")
+                  children: __50("Apply")
                 }
               )
             ]
@@ -21426,27 +21646,17 @@ function ModalContent({
   );
 }
 function PanelModal({
-  fieldDefinition,
-  summaryFields,
-  labelPosition,
   data,
+  field,
   onChange,
-  field
+  labelPosition,
+  summaryFields,
+  fieldDefinition
 }) {
   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__ */ jsxs27(Fragment14, { children: [
-    /* @__PURE__ */ jsx92(
+    /* @__PURE__ */ jsx103(
       summary_button_default,
       {
         summaryFields,
@@ -21458,13 +21668,13 @@ function PanelModal({
         "aria-expanded": isOpen
       }
     ),
-    isOpen && /* @__PURE__ */ jsx92(
+    isOpen && /* @__PURE__ */ jsx103(
       ModalContent,
       {
         data,
-        form,
-        fieldLabel: fieldLabel ?? "",
+        field,
         onChange,
+        fieldLabel: fieldLabel ?? "",
         onClose: () => setIsOpen(false)
       }
     )
@@ -21492,7 +21702,7 @@ var getSummaryFields = (summaryField, fields) => {
 };
 
 // src/dataform-layouts/panel/index.tsx
-import { jsx as jsx93, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs28 } from "react/jsx-runtime";
 var getFieldDefinition = (field, fields) => {
   const fieldDefinition = fields.find((_field) => _field.id === field.id);
   if (!fieldDefinition) {
@@ -21529,7 +21739,8 @@ var getFieldDefinitionAndSummaryFields = (layout, field, fields) => {
 function FormPanelField({
   data,
   field,
-  onChange
+  onChange,
+  validity
 }) {
   const { fields } = useContext(dataform_context_default);
   const layout = normalizeLayout({
@@ -21549,31 +21760,32 @@ function FormPanelField({
     `dataforms-layouts-panel__field-label--label-position-${labelPosition}`
   );
   const fieldLabel = isCombinedField(field) ? field.label : fieldDefinition?.label;
-  const renderedControl = layout.openAs === "modal" ? /* @__PURE__ */ jsx93(
+  const renderedControl = layout.openAs === "modal" ? /* @__PURE__ */ jsx104(
     modal_default2,
     {
-      field,
-      fieldDefinition,
-      summaryFields,
       data,
+      field,
       onChange,
-      labelPosition
+      labelPosition,
+      summaryFields,
+      fieldDefinition
     }
-  ) : /* @__PURE__ */ jsx93(
+  ) : /* @__PURE__ */ jsx104(
     dropdown_default2,
     {
-      field,
-      popoverAnchor,
-      fieldDefinition,
-      summaryFields,
       data,
+      field,
       onChange,
-      labelPosition
+      validity,
+      labelPosition,
+      summaryFields,
+      fieldDefinition,
+      popoverAnchor
     }
   );
   if (labelPosition === "top") {
     return /* @__PURE__ */ jsxs28(component_default14, { className: "dataforms-layouts-panel__field", spacing: 0, children: [
-      /* @__PURE__ */ jsx93(
+      /* @__PURE__ */ jsx104(
         "div",
         {
           className: labelClassName,
@@ -21581,11 +21793,11 @@ function FormPanelField({
           children: fieldLabel
         }
       ),
-      /* @__PURE__ */ jsx93("div", { className: "dataforms-layouts-panel__field-control", children: renderedControl })
+      /* @__PURE__ */ jsx104("div", { className: "dataforms-layouts-panel__field-control", children: renderedControl })
     ] });
   }
   if (labelPosition === "none") {
-    return /* @__PURE__ */ jsx93("div", { className: "dataforms-layouts-panel__field", children: renderedControl });
+    return /* @__PURE__ */ jsx104("div", { className: "dataforms-layouts-panel__field", children: renderedControl });
   }
   return /* @__PURE__ */ jsxs28(
     component_default9,
@@ -21593,15 +21805,15 @@ function FormPanelField({
       ref: setPopoverAnchor,
       className: "dataforms-layouts-panel__field",
       children: [
-        /* @__PURE__ */ jsx93("div", { className: labelClassName, children: fieldLabel }),
-        /* @__PURE__ */ jsx93("div", { className: "dataforms-layouts-panel__field-control", children: renderedControl })
+        /* @__PURE__ */ jsx104("div", { className: labelClassName, children: fieldLabel }),
+        /* @__PURE__ */ jsx104("div", { className: "dataforms-layouts-panel__field-control", children: renderedControl })
       ]
     }
   );
 }
 
 // src/dataform-layouts/card/index.tsx
-import { jsx as jsx94, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs29 } from "react/jsx-runtime";
 function useCollapsibleCard(initialIsOpen = true) {
   const [isOpen, setIsOpen] = useState(initialIsOpen);
   const toggle = useCallback(() => {
@@ -21621,7 +21833,7 @@ function useCollapsibleCard(initialIsOpen = true) {
           ...props.style
         },
         children: [
-          /* @__PURE__ */ jsx94(
+          /* @__PURE__ */ jsx105(
             "div",
             {
               style: {
@@ -21633,7 +21845,7 @@ function useCollapsibleCard(initialIsOpen = true) {
               children
             }
           ),
-          /* @__PURE__ */ jsx94(
+          /* @__PURE__ */ jsx105(
             button_default,
             {
               __next40pxDefaultSize: true,
@@ -21679,7 +21891,8 @@ function FormCardField({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
   const { fields } = useContext(dataform_context_default);
   const layout = normalizeLayout({
@@ -21704,9 +21917,9 @@ function FormCardField({
     const withHeader2 = !!field.label && layout.withHeader;
     return /* @__PURE__ */ jsxs29(component_default18, { className: "dataforms-layouts-card__field", children: [
       withHeader2 && /* @__PURE__ */ jsxs29(CollapsibleCardHeader, { className: "dataforms-layouts-card__field-header", children: [
-        /* @__PURE__ */ jsx94("span", { className: "dataforms-layouts-card__field-header-label", children: field.label }),
-        visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ jsx94("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map(
-          (summaryField) => /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx105("span", { className: "dataforms-layouts-card__field-header-label", children: field.label }),
+        visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ jsx105("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map(
+          (summaryField) => /* @__PURE__ */ jsx105(
             summaryField.render,
             {
               item: data,
@@ -21719,13 +21932,14 @@ function FormCardField({
       (isOpen || !withHeader2) && // If it doesn't have a header, keep it open.
       // Otherwise, the card will not be visible.
       /* @__PURE__ */ jsxs29(component_default20, { className: "dataforms-layouts-card__field-control", children: [
-        field.description && /* @__PURE__ */ jsx94("div", { className: "dataforms-layouts-card__field-description", children: field.description }),
-        /* @__PURE__ */ jsx94(
+        field.description && /* @__PURE__ */ jsx105("div", { className: "dataforms-layouts-card__field-description", children: field.description }),
+        /* @__PURE__ */ jsx105(
           DataFormLayout,
           {
             data,
             form,
-            onChange
+            onChange,
+            validity: validity?.children
           }
         )
       ] })
@@ -21744,8 +21958,8 @@ function FormCardField({
   const withHeader = !!fieldDefinition.label && layout.withHeader;
   return /* @__PURE__ */ jsxs29(component_default18, { className: "dataforms-layouts-card__field", children: [
     withHeader && /* @__PURE__ */ jsxs29(CollapsibleCardHeader, { className: "dataforms-layouts-card__field-header", children: [
-      /* @__PURE__ */ jsx94("span", { className: "dataforms-layouts-card__field-header-label", children: fieldDefinition.label }),
-      visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ jsx94("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map((summaryField) => /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx105("span", { className: "dataforms-layouts-card__field-header-label", children: fieldDefinition.label }),
+      visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ jsx105("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map((summaryField) => /* @__PURE__ */ jsx105(
         summaryField.render,
         {
           item: data,
@@ -21756,32 +21970,34 @@ function FormCardField({
     ] }),
     (isOpen || !withHeader) && // If it doesn't have a header, keep it open.
     // Otherwise, the card will not be visible.
-    /* @__PURE__ */ jsx94(component_default20, { className: "dataforms-layouts-card__field-control", children: /* @__PURE__ */ jsx94(
+    /* @__PURE__ */ jsx105(component_default20, { className: "dataforms-layouts-card__field-control", children: /* @__PURE__ */ jsx105(
       RegularLayout,
       {
         data,
         field,
         onChange,
-        hideLabelFromVision: hideLabelFromVision || withHeader
+        hideLabelFromVision: hideLabelFromVision || withHeader,
+        validity
       }
     ) })
   ] });
 }
 
 // src/dataform-layouts/row/index.tsx
-import { Fragment as Fragment15, jsx as jsx95, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx106, jsxs as jsxs30 } from "react/jsx-runtime";
 function Header3({ title }) {
-  return /* @__PURE__ */ jsx95(component_default14, { className: "dataforms-layouts-row__header", spacing: 4, children: /* @__PURE__ */ jsxs30(component_default9, { alignment: "center", children: [
-    /* @__PURE__ */ jsx95(component_default15, { level: 2, size: 13, children: title }),
-    /* @__PURE__ */ jsx95(component_default6, {})
+  return /* @__PURE__ */ jsx106(component_default14, { className: "dataforms-layouts-row__header", spacing: 4, children: /* @__PURE__ */ jsxs30(component_default9, { alignment: "center", children: [
+    /* @__PURE__ */ jsx106(component_default15, { level: 2, size: 13, children: title }),
+    /* @__PURE__ */ jsx106(component_default6, {})
   ] }) });
 }
-var EMPTY_WRAPPER = ({ children }) => /* @__PURE__ */ jsx95(Fragment15, { children });
+var EMPTY_WRAPPER = ({ children }) => /* @__PURE__ */ jsx106(Fragment15, { children });
 function FormRowField({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
   const { fields } = useContext(dataform_context_default);
   const layout = normalizeLayout({
@@ -21798,30 +22014,32 @@ function FormRowField({
       })
     };
     return /* @__PURE__ */ jsxs30("div", { className: "dataforms-layouts-row__field", children: [
-      !hideLabelFromVision && field.label && /* @__PURE__ */ jsx95(Header3, { title: field.label }),
-      /* @__PURE__ */ jsx95(component_default9, { alignment: layout.alignment, spacing: 4, children: /* @__PURE__ */ jsx95(
+      !hideLabelFromVision && field.label && /* @__PURE__ */ jsx106(Header3, { title: field.label }),
+      /* @__PURE__ */ jsx106(component_default9, { alignment: layout.alignment, spacing: 4, children: /* @__PURE__ */ jsx106(
         DataFormLayout,
         {
           data,
           form,
           onChange,
+          validity: validity?.children,
           as: EMPTY_WRAPPER,
-          children: (FieldLayout, nestedField) => /* @__PURE__ */ jsx95(
+          children: (FieldLayout, childField, childFieldValidity) => /* @__PURE__ */ jsx106(
             "div",
             {
               className: "dataforms-layouts-row__field-control",
-              style: layout.styles[nestedField.id],
-              children: /* @__PURE__ */ jsx95(
+              style: layout.styles[childField.id],
+              children: /* @__PURE__ */ jsx106(
                 FieldLayout,
                 {
                   data,
-                  field: nestedField,
+                  field: childField,
                   onChange,
-                  hideLabelFromVision
+                  hideLabelFromVision,
+                  validity: childFieldValidity
                 }
               )
             },
-            nestedField.id
+            childField.id
           )
         }
       ) })
@@ -21835,18 +22053,19 @@ function FormRowField({
   if (!RegularLayout) {
     return null;
   }
-  return /* @__PURE__ */ jsx95(Fragment15, { children: /* @__PURE__ */ jsx95("div", { className: "dataforms-layouts-row__field-control", children: /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx106(Fragment15, { children: /* @__PURE__ */ jsx106("div", { className: "dataforms-layouts-row__field-control", children: /* @__PURE__ */ jsx106(
     RegularLayout,
     {
       data,
       field: fieldDefinition,
-      onChange
+      onChange,
+      validity
     }
   ) }) });
 }
 
 // src/dataform-layouts/index.tsx
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
 var FORM_FIELD_LAYOUTS = [
   {
     type: "regular",
@@ -21854,7 +22073,7 @@ var FORM_FIELD_LAYOUTS = [
     wrapper: ({
       children,
       layout
-    }) => /* @__PURE__ */ jsx96(
+    }) => /* @__PURE__ */ jsx107(
       component_default14,
       {
         className: "dataforms-layouts__wrapper",
@@ -21866,7 +22085,7 @@ var FORM_FIELD_LAYOUTS = [
   {
     type: "panel",
     component: FormPanelField,
-    wrapper: ({ children }) => /* @__PURE__ */ jsx96(component_default14, { className: "dataforms-layouts__wrapper", spacing: 2, children })
+    wrapper: ({ children }) => /* @__PURE__ */ jsx107(component_default14, { className: "dataforms-layouts__wrapper", spacing: 2, children })
   },
   {
     type: "card",
@@ -21874,7 +22093,7 @@ var FORM_FIELD_LAYOUTS = [
     wrapper: ({
       children,
       layout
-    }) => /* @__PURE__ */ jsx96(
+    }) => /* @__PURE__ */ jsx107(
       component_default14,
       {
         className: "dataforms-layouts__wrapper",
@@ -21889,7 +22108,7 @@ var FORM_FIELD_LAYOUTS = [
     wrapper: ({
       children,
       layout
-    }) => /* @__PURE__ */ jsx96(component_default14, { className: "dataforms-layouts__wrapper", spacing: 4, children: /* @__PURE__ */ jsx96("div", { className: "dataforms-layouts-row__field", children: /* @__PURE__ */ jsx96(
+    }) => /* @__PURE__ */ jsx107(component_default14, { className: "dataforms-layouts__wrapper", spacing: 4, children: /* @__PURE__ */ jsx107("div", { className: "dataforms-layouts-row__field", children: /* @__PURE__ */ jsx107(
       component_default9,
       {
         spacing: 4,
@@ -21904,12 +22123,13 @@ function getFormFieldLayout(type) {
 }
 
 // src/dataform-layouts/data-form-layout.tsx
-import { jsx as jsx97 } from "react/jsx-runtime";
-var DEFAULT_WRAPPER = ({ children }) => /* @__PURE__ */ jsx97(component_default14, { className: "dataforms-layouts__wrapper", spacing: 4, children });
+import { jsx as jsx108 } from "react/jsx-runtime";
+var DEFAULT_WRAPPER = ({ children }) => /* @__PURE__ */ jsx108(component_default14, { className: "dataforms-layouts__wrapper", spacing: 4, children });
 function DataFormLayout({
   data,
   form,
   onChange,
+  validity,
   children,
   as
 }) {
@@ -21926,7 +22146,7 @@ function DataFormLayout({
   );
   const normalizedFormLayout = normalizeLayout(form.layout);
   const Wrapper4 = as ?? getFormFieldLayout(normalizedFormLayout.type)?.wrapper ?? DEFAULT_WRAPPER;
-  return /* @__PURE__ */ jsx97(Wrapper4, { layout: normalizedFormLayout, children: normalizedFormFields.map((formField) => {
+  return /* @__PURE__ */ jsx108(Wrapper4, { layout: normalizedFormLayout, children: normalizedFormFields.map((formField) => {
     const FieldLayout = getFormFieldLayout(formField.layout.type)?.component;
     if (!FieldLayout) {
       return null;
@@ -21936,14 +22156,19 @@ function DataFormLayout({
       return null;
     }
     if (children) {
-      return children(FieldLayout, formField);
+      return children(
+        FieldLayout,
+        formField,
+        validity?.[formField.id]
+      );
     }
-    return /* @__PURE__ */ jsx97(
+    return /* @__PURE__ */ jsx108(
       FieldLayout,
       {
         data,
         field: formField,
-        onChange
+        onChange,
+        validity: validity?.[formField.id]
       },
       formField.id
     );
@@ -21951,12 +22176,13 @@ function DataFormLayout({
 }
 
 // src/components/dataform/index.tsx
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx109 } from "react/jsx-runtime";
 function DataForm({
   data,
   form,
   fields,
-  onChange
+  onChange,
+  validity
 }) {
   const normalizedFields = useMemo(
     () => normalizeFields(fields),
@@ -21965,7 +22191,15 @@ function DataForm({
   if (!form.fields) {
     return null;
   }
-  return /* @__PURE__ */ jsx98(DataFormProvider, { fields: normalizedFields, children: /* @__PURE__ */ jsx98(DataFormLayout, { data, form, onChange }) });
+  return /* @__PURE__ */ jsx109(DataFormProvider, { fields: normalizedFields, children: /* @__PURE__ */ jsx109(
+    DataFormLayout,
+    {
+      data,
+      form,
+      onChange,
+      validity
+    }
+  ) });
 }
 
 // src/utils/filter-sort-and-paginate.ts
@@ -21975,7 +22209,7 @@ import { getDate as getDate4 } from "@wordpress/date";
 function normalizeSearchInput2(input = "") {
   return removeAccents3(input.trim().toLowerCase());
 }
-var EMPTY_ARRAY7 = [];
+var EMPTY_ARRAY8 = [];
 function getRelativeDate(value, unit) {
   switch (unit) {
     case "days":
@@ -21993,7 +22227,7 @@ function getRelativeDate(value, unit) {
 function filterSortAndPaginate(data, view, fields) {
   if (!data) {
     return {
-      data: EMPTY_ARRAY7,
+      data: EMPTY_ARRAY8,
       paginationInfo: { totalItems: 0, totalPages: 0 }
     };
   }
@@ -22218,53 +22452,11 @@ function filterSortAndPaginate(data, view, fields) {
     }
   };
 }
-
-// src/utils/is-item-valid.ts
-function isItemValid(item2, fields, form) {
-  const _fields = normalizeFields(
-    fields.filter(({ id }) => !!form.fields?.includes(id))
-  );
-  const isEmptyNullOrUndefined = (value) => [void 0, "", null].includes(value);
-  const isArrayOrElementsEmptyNullOrUndefined = (value) => {
-    return !Array.isArray(value) || value.length === 0 || value.every((element) => isEmptyNullOrUndefined(element));
-  };
-  return _fields.every((field) => {
-    const value = field.getValue({ item: item2 });
-    if (field.isValid.required) {
-      if (field.type === "text" && isEmptyNullOrUndefined(value) || field.type === "email" && isEmptyNullOrUndefined(value) || field.type === "url" && isEmptyNullOrUndefined(value) || field.type === "telephone" && isEmptyNullOrUndefined(value) || field.type === "password" && isEmptyNullOrUndefined(value) || field.type === "integer" && isEmptyNullOrUndefined(value) || field.type === "number" && isEmptyNullOrUndefined(value) || field.type === "array" && isArrayOrElementsEmptyNullOrUndefined(value) || field.type === void 0 && isEmptyNullOrUndefined(value)) {
-        return false;
-      }
-      if (field.type === "boolean" && value !== true) {
-        return false;
-      }
-    }
-    if (field.isValid.elements) {
-      if (field.elements) {
-        const validValues = field.elements.map(
-          (element) => element.value
-        );
-        if (field.type === "array") {
-          if (Array.isArray(value)) {
-            return value.every(
-              (arrayItem) => validValues.includes(arrayItem)
-            );
-          }
-          return false;
-        }
-        return validValues.includes(value);
-      }
-    }
-    if (typeof field.isValid.custom === "function" && field.isValid.custom(item2, field) !== null) {
-      return false;
-    }
-    return true;
-  });
-}
 export {
   DataForm,
   dataviews_default as DataViews,
   dataviews_picker_default as DataViewsPicker,
   VIEW_LAYOUTS,
   filterSortAndPaginate,
-  isItemValid
+  use_form_validity_default as useFormValidity
 };