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

package/build/dataform-controls/date.js

@@ -1,327 +1,552 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DateControl;
-var _components = require("@wordpress/components");
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _date = require("@wordpress/date");
-var _dateFns = require("date-fns");
-var _relativeDateControl = _interopRequireWildcard(require("./relative-date-control"));
-var _constants = require("../constants");
-var _lockUnlock = require("../lock-unlock");
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * WordPress dependencies
- */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  DateCalendar,
-  DateRangeCalendar
-} = (0, _lockUnlock.unlock)(_components.privateApis);
-const DATE_PRESETS = [{
-  id: 'today',
-  label: (0, _i18n.__)('Today'),
-  getValue: () => (0, _date.getDate)(null)
-}, {
-  id: 'yesterday',
-  label: (0, _i18n.__)('Yesterday'),
-  getValue: () => {
-    const today = (0, _date.getDate)(null);
-    return (0, _dateFns.subDays)(today, 1);
-  }
-}, {
-  id: 'past-week',
-  label: (0, _i18n.__)('Past week'),
-  getValue: () => {
-    const today = (0, _date.getDate)(null);
-    return (0, _dateFns.subDays)(today, 7);
-  }
-}, {
-  id: 'past-month',
-  label: (0, _i18n.__)('Past month'),
-  getValue: () => {
-    const today = (0, _date.getDate)(null);
-    return (0, _dateFns.subMonths)(today, 1);
-  }
-}];
-const DATE_RANGE_PRESETS = [{
-  id: 'last-7-days',
-  label: (0, _i18n.__)('Last 7 days'),
-  getValue: () => {
-    const today = (0, _date.getDate)(null);
-    return [(0, _dateFns.subDays)(today, 7), today];
-  }
-}, {
-  id: 'last-30-days',
-  label: (0, _i18n.__)('Last 30 days'),
-  getValue: () => {
-    const today = (0, _date.getDate)(null);
-    return [(0, _dateFns.subDays)(today, 30), today];
-  }
-}, {
-  id: 'month-to-date',
-  label: (0, _i18n.__)('Month to date'),
-  getValue: () => {
-    const today = (0, _date.getDate)(null);
-    return [(0, _dateFns.startOfMonth)(today), today];
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-}, {
-  id: 'last-year',
-  label: (0, _i18n.__)('Last year'),
-  getValue: () => {
-    const today = (0, _date.getDate)(null);
-    return [(0, _dateFns.subYears)(today, 1), today];
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var date_exports = {};
+__export(date_exports, {
+  default: () => DateControl
+});
+module.exports = __toCommonJS(date_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_date = require("@wordpress/date");
+var import_icons = require("@wordpress/icons");
+var import_clsx = __toESM(require("clsx"));
+var import_date_fns = require("date-fns");
+var import_deepmerge = __toESM(require("deepmerge"));
+var import_relative_date_control = __toESM(require("./utils/relative-date-control"));
+var import_constants = require("../constants");
+var import_lock_unlock = require("../lock-unlock");
+const { DateCalendar, DateRangeCalendar } = (0, import_lock_unlock.unlock)(import_components.privateApis);
+const DATE_PRESETS = [
+  {
+    id: "today",
+    label: (0, import_i18n.__)("Today"),
+    getValue: () => (0, import_date.getDate)(null)
+  },
+  {
+    id: "yesterday",
+    label: (0, import_i18n.__)("Yesterday"),
+    getValue: () => {
+      const today = (0, import_date.getDate)(null);
+      return (0, import_date_fns.subDays)(today, 1);
+    }
+  },
+  {
+    id: "past-week",
+    label: (0, import_i18n.__)("Past week"),
+    getValue: () => {
+      const today = (0, import_date.getDate)(null);
+      return (0, import_date_fns.subDays)(today, 7);
+    }
+  },
+  {
+    id: "past-month",
+    label: (0, import_i18n.__)("Past month"),
+    getValue: () => {
+      const today = (0, import_date.getDate)(null);
+      return (0, import_date_fns.subMonths)(today, 1);
+    }
   }
-}, {
-  id: 'year-to-date',
-  label: (0, _i18n.__)('Year to date'),
-  getValue: () => {
-    const today = (0, _date.getDate)(null);
-    return [(0, _dateFns.startOfYear)(today), today];
+];
+const DATE_RANGE_PRESETS = [
+  {
+    id: "last-7-days",
+    label: (0, import_i18n.__)("Last 7 days"),
+    getValue: () => {
+      const today = (0, import_date.getDate)(null);
+      return [(0, import_date_fns.subDays)(today, 7), today];
+    }
+  },
+  {
+    id: "last-30-days",
+    label: (0, import_i18n.__)("Last 30 days"),
+    getValue: () => {
+      const today = (0, import_date.getDate)(null);
+      return [(0, import_date_fns.subDays)(today, 30), today];
+    }
+  },
+  {
+    id: "month-to-date",
+    label: (0, import_i18n.__)("Month to date"),
+    getValue: () => {
+      const today = (0, import_date.getDate)(null);
+      return [(0, import_date_fns.startOfMonth)(today), today];
+    }
+  },
+  {
+    id: "last-year",
+    label: (0, import_i18n.__)("Last year"),
+    getValue: () => {
+      const today = (0, import_date.getDate)(null);
+      return [(0, import_date_fns.subYears)(today, 1), today];
+    }
+  },
+  {
+    id: "year-to-date",
+    label: (0, import_i18n.__)("Year to date"),
+    getValue: () => {
+      const today = (0, import_date.getDate)(null);
+      return [(0, import_date_fns.startOfYear)(today), today];
+    }
   }
-}];
-const parseDate = dateString => {
+];
+const parseDate = (dateString) => {
   if (!dateString) {
     return null;
   }
-  const parsed = (0, _date.getDate)(dateString);
-  return parsed && (0, _dateFns.isValid)(parsed) ? parsed : null;
+  const parsed = (0, import_date.getDate)(dateString);
+  return parsed && (0, import_date_fns.isValid)(parsed) ? parsed : null;
 };
-const formatDate = date => {
+const formatDate = (date) => {
   if (!date) {
-    return '';
+    return "";
   }
-  return typeof date === 'string' ? date : (0, _dateFns.format)(date, 'yyyy-MM-dd');
+  return typeof date === "string" ? date : (0, import_date_fns.format)(date, "yyyy-MM-dd");
 };
-function CalendarDateControl({
-  id,
+function ValidatedDateControl({
   value,
+  field,
+  data,
+  setValue,
+  inputRefs,
+  isTouched,
+  setIsTouched,
+  children
+}) {
+  const [customValidity, setCustomValidity] = (0, import_element.useState)(void 0);
+  const onValidate = (0, import_element.useCallback)(
+    (newValue) => {
+      if (newValue) {
+        const customMessage = field.isValid?.custom?.(
+          (0, import_deepmerge.default)(
+            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;
+        }
+      }
+      setCustomValidity(void 0);
+    },
+    [data, field, setValue, inputRefs]
+  );
+  (0, import_element.useEffect)(() => {
+    if (isTouched) {
+      const timeoutId = setTimeout(() => {
+        onValidate(value);
+      }, 0);
+      return () => clearTimeout(timeoutId);
+    }
+    return void 0;
+  }, [isTouched, value, onValidate]);
+  const onBlur = (event) => {
+    if (isTouched) {
+      return;
+    }
+    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
+      setIsTouched(true);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { onBlur, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-live": "polite", children: customValidity && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "p",
+      {
+        className: (0, import_clsx.default)(
+          "components-validated-control__indicator",
+          "is-invalid"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.Icon,
+            {
+              className: "components-validated-control__indicator-icon",
+              icon: import_icons.error,
+              size: 16,
+              fill: "currentColor"
+            }
+          ),
+          customValidity.message
+        ]
+      }
+    ) })
+  ] });
+}
+function CalendarDateControl({
+  data,
+  field,
   onChange,
-  label,
-  hideLabelFromVision,
-  className
+  hideLabelFromVision
 }) {
-  const [selectedPresetId, setSelectedPresetId] = (0, _element.useState)(null);
-  const [calendarMonth, setCalendarMonth] = (0, _element.useState)(() => {
+  const { id, label, setValue, getValue } = field;
+  const [selectedPresetId, setSelectedPresetId] = (0, import_element.useState)(
+    null
+  );
+  const fieldValue = getValue({ item: data });
+  const value = typeof fieldValue === "string" ? fieldValue : void 0;
+  const [calendarMonth, setCalendarMonth] = (0, import_element.useState)(() => {
     const parsedDate = parseDate(value);
-    return parsedDate || new Date(); // Default to current month
+    return parsedDate || /* @__PURE__ */ new Date();
   });
-  const onSelectDate = (0, _element.useCallback)(newDate => {
-    const dateValue = newDate ? (0, _dateFns.format)(newDate, 'yyyy-MM-dd') : undefined;
-    onChange(dateValue);
-    setSelectedPresetId(null);
-  }, [onChange]);
-  const handlePresetClick = (0, _element.useCallback)(preset => {
-    const presetDate = preset.getValue();
-    const dateValue = formatDate(presetDate);
-    setCalendarMonth(presetDate);
-    onChange(dateValue);
-    setSelectedPresetId(preset.id);
-  }, [onChange]);
-  const handleManualDateChange = (0, _element.useCallback)(newValue => {
-    onChange(newValue);
-    if (newValue) {
-      const parsedDate = parseDate(newValue);
-      if (parsedDate) {
-        setCalendarMonth(parsedDate);
+  const [isTouched, setIsTouched] = (0, import_element.useState)(false);
+  const validityTargetRef = (0, import_element.useRef)(null);
+  const onChangeCallback = (0, import_element.useCallback)(
+    (newValue) => onChange(setValue({ item: data, value: newValue })),
+    [data, onChange, setValue]
+  );
+  const onSelectDate = (0, import_element.useCallback)(
+    (newDate) => {
+      const dateValue = newDate ? (0, import_date_fns.format)(newDate, "yyyy-MM-dd") : void 0;
+      onChangeCallback(dateValue);
+      setSelectedPresetId(null);
+      setIsTouched(true);
+    },
+    [onChangeCallback]
+  );
+  const handlePresetClick = (0, import_element.useCallback)(
+    (preset) => {
+      const presetDate = preset.getValue();
+      const dateValue = formatDate(presetDate);
+      setCalendarMonth(presetDate);
+      onChangeCallback(dateValue);
+      setSelectedPresetId(preset.id);
+      setIsTouched(true);
+    },
+    [onChangeCallback]
+  );
+  const handleManualDateChange = (0, import_element.useCallback)(
+    (newValue) => {
+      onChangeCallback(newValue);
+      if (newValue) {
+        const parsedDate = parseDate(newValue);
+        if (parsedDate) {
+          setCalendarMonth(parsedDate);
+        }
       }
-    }
-    setSelectedPresetId(null);
-  }, [onChange]);
-  const {
-    timezone: {
-      string: timezoneString
+      setSelectedPresetId(null);
+      setIsTouched(true);
     },
-    l10n: {
-      startOfWeek
+    [onChangeCallback]
+  );
+  const {
+    timezone: { string: timezoneString },
+    l10n: { startOfWeek }
+  } = (0, import_date.getSettings)();
+  const displayLabel = field.isValid?.required ? `${label} (${(0, import_i18n.__)("Required")})` : label;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ValidatedDateControl,
+    {
+      value,
+      field,
+      data,
+      setValue,
+      inputRefs: validityTargetRef,
+      isTouched,
+      setIsTouched,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.BaseControl,
+        {
+          __nextHasNoMarginBottom: true,
+          id,
+          className: "dataviews-controls__date",
+          label: displayLabel,
+          hideLabelFromVision,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: 2, wrap: true, justify: "flex-start", children: [
+              DATE_PRESETS.map((preset) => {
+                const isSelected = selectedPresetId === preset.id;
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.Button,
+                  {
+                    className: "dataviews-controls__date-preset",
+                    variant: "tertiary",
+                    isPressed: isSelected,
+                    size: "small",
+                    onClick: () => handlePresetClick(preset),
+                    children: preset.label
+                  },
+                  preset.id
+                );
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  className: "dataviews-controls__date-preset",
+                  variant: "tertiary",
+                  isPressed: !selectedPresetId,
+                  size: "small",
+                  disabled: !!selectedPresetId,
+                  accessibleWhenDisabled: false,
+                  children: (0, import_i18n.__)("Custom")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalInputControl,
+              {
+                __next40pxDefaultSize: true,
+                ref: validityTargetRef,
+                type: "date",
+                label: (0, import_i18n.__)("Date"),
+                hideLabelFromVision: true,
+                value,
+                onChange: handleManualDateChange,
+                required: !!field.isValid?.required
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              DateCalendar,
+              {
+                style: { width: "100%" },
+                selected: value ? parseDate(value) || void 0 : void 0,
+                onSelect: onSelectDate,
+                month: calendarMonth,
+                onMonthChange: setCalendarMonth,
+                timeZone: timezoneString || void 0,
+                weekStartsOn: startOfWeek
+              }
+            )
+          ] })
+        }
+      )
     }
-  } = (0, _date.getSettings)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl, {
-    __nextHasNoMarginBottom: true,
-    id: id,
-    className: className,
-    label: label,
-    hideLabelFromVision: hideLabelFromVision,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-      spacing: 4,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-        spacing: 2,
-        wrap: true,
-        justify: "flex-start",
-        children: [DATE_PRESETS.map(preset => {
-          const isSelected = selectedPresetId === preset.id;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-            className: "dataviews-controls__date-preset",
-            variant: "tertiary",
-            isPressed: isSelected,
-            size: "small",
-            onClick: () => handlePresetClick(preset),
-            children: preset.label
-          }, preset.id);
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          className: "dataviews-controls__date-preset",
-          variant: "tertiary",
-          isPressed: !selectedPresetId,
-          size: "small",
-          disabled: !!selectedPresetId,
-          accessibleWhenDisabled: false,
-          children: (0, _i18n.__)('Custom')
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
-        __next40pxDefaultSize: true,
-        type: "date",
-        label: (0, _i18n.__)('Date'),
-        hideLabelFromVision: true,
-        value: value,
-        onChange: handleManualDateChange
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateCalendar, {
-        style: {
-          width: '100%'
-        },
-        selected: value ? parseDate(value) || undefined : undefined,
-        onSelect: onSelectDate,
-        month: calendarMonth,
-        onMonthChange: setCalendarMonth,
-        timeZone: timezoneString || undefined,
-        weekStartsOn: startOfWeek
-      })]
-    })
-  });
+  );
 }
 function CalendarDateRangeControl({
-  id,
-  value,
+  data,
+  field,
   onChange,
-  label,
-  hideLabelFromVision,
-  className
+  hideLabelFromVision
 }) {
-  const [selectedPresetId, setSelectedPresetId] = (0, _element.useState)(null);
-  const selectedRange = (0, _element.useMemo)(() => {
+  const { id, label, getValue, setValue } = field;
+  let value;
+  const fieldValue = getValue({ item: data });
+  if (Array.isArray(fieldValue) && fieldValue.length === 2 && fieldValue.every((date) => typeof date === "string")) {
+    value = fieldValue;
+  }
+  const onChangeCallback = (0, import_element.useCallback)(
+    (newValue) => {
+      onChange(
+        setValue({
+          item: data,
+          value: newValue
+        })
+      );
+    },
+    [data, onChange, setValue]
+  );
+  const [selectedPresetId, setSelectedPresetId] = (0, import_element.useState)(
+    null
+  );
+  const selectedRange = (0, import_element.useMemo)(() => {
     if (!value) {
-      return {
-        from: undefined,
-        to: undefined
-      };
+      return { from: void 0, to: void 0 };
     }
     const [from, to] = value;
     return {
-      from: parseDate(from) || undefined,
-      to: parseDate(to) || undefined
+      from: parseDate(from) || void 0,
+      to: parseDate(to) || void 0
     };
   }, [value]);
-  const [calendarMonth, setCalendarMonth] = (0, _element.useState)(() => {
-    return selectedRange.from || new Date();
+  const [calendarMonth, setCalendarMonth] = (0, import_element.useState)(() => {
+    return selectedRange.from || /* @__PURE__ */ new Date();
   });
-  const updateDateRange = (0, _element.useCallback)((fromDate, toDate) => {
-    if (fromDate && toDate) {
-      onChange([formatDate(fromDate), formatDate(toDate)]);
-    } else if (!fromDate && !toDate) {
-      onChange(undefined);
-    }
-    // Do nothing if only one date is set - wait for both
-  }, [onChange]);
-  const onSelectCalendarRange = (0, _element.useCallback)(newRange => {
-    updateDateRange(newRange?.from, newRange?.to);
-    setSelectedPresetId(null);
-  }, [updateDateRange]);
-  const handlePresetClick = (0, _element.useCallback)(preset => {
-    const [startDate, endDate] = preset.getValue();
-    setCalendarMonth(startDate);
-    updateDateRange(startDate, endDate);
-    setSelectedPresetId(preset.id);
-  }, [updateDateRange]);
-  const handleManualDateChange = (0, _element.useCallback)((fromOrTo, newValue) => {
-    const [currentFrom, currentTo] = value || [undefined, undefined];
-    const updatedFrom = fromOrTo === 'from' ? newValue : currentFrom;
-    const updatedTo = fromOrTo === 'to' ? newValue : currentTo;
-    updateDateRange(updatedFrom, updatedTo);
-    if (newValue) {
-      const parsedDate = parseDate(newValue);
-      if (parsedDate) {
-        setCalendarMonth(parsedDate);
+  const [isTouched, setIsTouched] = (0, import_element.useState)(false);
+  const fromInputRef = (0, import_element.useRef)(null);
+  const toInputRef = (0, import_element.useRef)(null);
+  const updateDateRange = (0, import_element.useCallback)(
+    (fromDate, toDate) => {
+      if (fromDate && toDate) {
+        onChangeCallback([
+          formatDate(fromDate),
+          formatDate(toDate)
+        ]);
+      } else if (!fromDate && !toDate) {
+        onChangeCallback(void 0);
+      }
+    },
+    [onChangeCallback]
+  );
+  const onSelectCalendarRange = (0, import_element.useCallback)(
+    (newRange) => {
+      updateDateRange(newRange?.from, newRange?.to);
+      setSelectedPresetId(null);
+      setIsTouched(true);
+    },
+    [updateDateRange]
+  );
+  const handlePresetClick = (0, import_element.useCallback)(
+    (preset) => {
+      const [startDate, endDate] = preset.getValue();
+      setCalendarMonth(startDate);
+      updateDateRange(startDate, endDate);
+      setSelectedPresetId(preset.id);
+      setIsTouched(true);
+    },
+    [updateDateRange]
+  );
+  const handleManualDateChange = (0, import_element.useCallback)(
+    (fromOrTo, newValue) => {
+      const [currentFrom, currentTo] = value || [
+        void 0,
+        void 0
+      ];
+      const updatedFrom = fromOrTo === "from" ? newValue : currentFrom;
+      const updatedTo = fromOrTo === "to" ? newValue : currentTo;
+      updateDateRange(updatedFrom, updatedTo);
+      if (newValue) {
+        const parsedDate = parseDate(newValue);
+        if (parsedDate) {
+          setCalendarMonth(parsedDate);
+        }
       }
+      setSelectedPresetId(null);
+      setIsTouched(true);
+    },
+    [value, updateDateRange]
+  );
+  const { timezone, l10n } = (0, import_date.getSettings)();
+  const displayLabel = field.isValid?.required ? `${label} (${(0, import_i18n.__)("Required")})` : label;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ValidatedDateControl,
+    {
+      value,
+      field,
+      data,
+      setValue,
+      inputRefs: [fromInputRef, toInputRef],
+      isTouched,
+      setIsTouched,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.BaseControl,
+        {
+          __nextHasNoMarginBottom: true,
+          id,
+          className: "dataviews-controls__date",
+          label: displayLabel,
+          hideLabelFromVision,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: 2, wrap: true, justify: "flex-start", children: [
+              DATE_RANGE_PRESETS.map((preset) => {
+                const isSelected = selectedPresetId === preset.id;
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.Button,
+                  {
+                    className: "dataviews-controls__date-preset",
+                    variant: "tertiary",
+                    isPressed: isSelected,
+                    size: "small",
+                    onClick: () => handlePresetClick(preset),
+                    children: preset.label
+                  },
+                  preset.id
+                );
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  className: "dataviews-controls__date-preset",
+                  variant: "tertiary",
+                  isPressed: !selectedPresetId,
+                  size: "small",
+                  accessibleWhenDisabled: false,
+                  disabled: !!selectedPresetId,
+                  children: (0, import_i18n.__)("Custom")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.__experimentalInputControl,
+                {
+                  __next40pxDefaultSize: true,
+                  ref: fromInputRef,
+                  type: "date",
+                  label: (0, import_i18n.__)("From"),
+                  hideLabelFromVision: true,
+                  value: value?.[0],
+                  onChange: (newValue) => handleManualDateChange("from", newValue),
+                  required: !!field.isValid?.required
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.__experimentalInputControl,
+                {
+                  __next40pxDefaultSize: true,
+                  ref: toInputRef,
+                  type: "date",
+                  label: (0, import_i18n.__)("To"),
+                  hideLabelFromVision: true,
+                  value: value?.[1],
+                  onChange: (newValue) => handleManualDateChange("to", newValue),
+                  required: !!field.isValid?.required
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              DateRangeCalendar,
+              {
+                style: { width: "100%" },
+                selected: selectedRange,
+                onSelect: onSelectCalendarRange,
+                month: calendarMonth,
+                onMonthChange: setCalendarMonth,
+                timeZone: timezone.string || void 0,
+                weekStartsOn: l10n.startOfWeek
+              }
+            )
+          ] })
+        }
+      )
     }
-    setSelectedPresetId(null);
-  }, [value, updateDateRange]);
-  const {
-    timezone,
-    l10n
-  } = (0, _date.getSettings)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl, {
-    __nextHasNoMarginBottom: true,
-    id: id,
-    className: className,
-    label: label,
-    hideLabelFromVision: hideLabelFromVision,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-      spacing: 4,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-        spacing: 2,
-        wrap: true,
-        justify: "flex-start",
-        children: [DATE_RANGE_PRESETS.map(preset => {
-          const isSelected = selectedPresetId === preset.id;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-            className: "dataviews-controls__date-preset",
-            variant: "tertiary",
-            isPressed: isSelected,
-            size: "small",
-            onClick: () => handlePresetClick(preset),
-            children: preset.label
-          }, preset.id);
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          className: "dataviews-controls__date-preset",
-          variant: "tertiary",
-          isPressed: !selectedPresetId,
-          size: "small",
-          accessibleWhenDisabled: false,
-          disabled: !!selectedPresetId,
-          children: (0, _i18n.__)('Custom')
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-        spacing: 2,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
-          __next40pxDefaultSize: true,
-          type: "date",
-          label: (0, _i18n.__)('From'),
-          hideLabelFromVision: true,
-          value: value?.[0],
-          onChange: newValue => handleManualDateChange('from', newValue)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
-          __next40pxDefaultSize: true,
-          type: "date",
-          label: (0, _i18n.__)('To'),
-          hideLabelFromVision: true,
-          value: value?.[1],
-          onChange: newValue => handleManualDateChange('to', newValue)
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeCalendar, {
-        style: {
-          width: '100%'
-        },
-        selected: selectedRange,
-        onSelect: onSelectCalendarRange,
-        month: calendarMonth,
-        onMonthChange: setCalendarMonth,
-        timeZone: timezone.string || undefined,
-        weekStartsOn: l10n.startOfWeek
-      })]
-    })
-  });
+  );
 }
 function DateControl({
   data,
@@ -330,64 +555,38 @@ function DateControl({
   hideLabelFromVision,
   operator
 }) {
-  const {
-    id,
-    label,
-    getValue,
-    setValue
-  } = field;
-  const value = getValue({
-    item: data
-  });
-  const onChangeRelativeDateControl = (0, _element.useCallback)(newValue => {
-    onChange(setValue({
-      item: data,
-      value: newValue
-    }));
-  }, [data, onChange, setValue]);
-  const onChangeCalendarDateRangeControl = (0, _element.useCallback)(newValue => {
-    onChange(setValue({
-      item: data,
-      value: newValue
-    }));
-  }, [data, onChange, setValue]);
-  const onChangeCalendarDateControl = (0, _element.useCallback)(newValue => onChange(setValue({
-    item: data,
-    value: newValue
-  })), [data, onChange, setValue]);
-  if (operator === _constants.OPERATOR_IN_THE_PAST || operator === _constants.OPERATOR_OVER) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_relativeDateControl.default, {
-      className: "dataviews-controls__date",
-      id: id,
-      value: value && typeof value === 'object' ? value : {},
-      onChange: onChangeRelativeDateControl,
-      label: label,
-      hideLabelFromVision: hideLabelFromVision,
-      options: _relativeDateControl.TIME_UNITS_OPTIONS[operator]
-    });
+  if (operator === import_constants.OPERATOR_IN_THE_PAST || operator === import_constants.OPERATOR_OVER) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_relative_date_control.default,
+      {
+        className: "dataviews-controls__date",
+        data,
+        field,
+        onChange,
+        hideLabelFromVision,
+        operator
+      }
+    );
   }
-  if (operator === _constants.OPERATOR_BETWEEN) {
-    let dateRangeValue;
-    if (Array.isArray(value) && value.length === 2 && value.every(date => typeof date === 'string')) {
-      // Ensure the value is expected format
-      dateRangeValue = value;
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarDateRangeControl, {
-      className: "dataviews-controls__date",
-      id: id,
-      value: dateRangeValue,
-      onChange: onChangeCalendarDateRangeControl,
-      label: label,
-      hideLabelFromVision: hideLabelFromVision
-    });
+  if (operator === import_constants.OPERATOR_BETWEEN) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CalendarDateRangeControl,
+      {
+        data,
+        field,
+        onChange,
+        hideLabelFromVision
+      }
+    );
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarDateControl, {
-    className: "dataviews-controls__date",
-    id: id,
-    value: typeof value === 'string' ? value : undefined,
-    onChange: onChangeCalendarDateControl,
-    label: label,
-    hideLabelFromVision: hideLabelFromVision
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    CalendarDateControl,
+    {
+      data,
+      field,
+      onChange,
+      hideLabelFromVision
+    }
+  );
 }
-//# sourceMappingURL=date.js.map
+//# sourceMappingURL=date.js.map