@wordpress/dataviews 9.1.1-next.233ccab9b.0 → 10.0.0

package/build-module/dataform-controls/date.js

@@ -1,384 +1,571 @@
-/**
- * WordPress dependencies
- */
-import { BaseControl, Button, privateApis as componentsPrivateApis, __experimentalInputControl as InputControl, __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
-import { useCallback, useMemo, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { getDate, getSettings } from '@wordpress/date';
-
-/**
- * External dependencies
- */
-import { format, isValid, subMonths, subDays, subYears, startOfMonth, startOfYear } from 'date-fns';
-
-/**
- * Internal dependencies
- */
-import RelativeDateControl, { TIME_UNITS_OPTIONS } from './relative-date-control';
-import { OPERATOR_IN_THE_PAST, OPERATOR_OVER, OPERATOR_BETWEEN } from '../constants';
-import { unlock } from '../lock-unlock';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  DateCalendar,
-  DateRangeCalendar
-} = unlock(componentsPrivateApis);
-const DATE_PRESETS = [{
-  id: 'today',
-  label: __('Today'),
-  getValue: () => getDate(null)
-}, {
-  id: 'yesterday',
-  label: __('Yesterday'),
-  getValue: () => {
-    const today = getDate(null);
-    return subDays(today, 1);
-  }
-}, {
-  id: 'past-week',
-  label: __('Past week'),
-  getValue: () => {
-    const today = getDate(null);
-    return subDays(today, 7);
-  }
-}, {
-  id: 'past-month',
-  label: __('Past month'),
-  getValue: () => {
-    const today = getDate(null);
-    return subMonths(today, 1);
-  }
-}];
-const DATE_RANGE_PRESETS = [{
-  id: 'last-7-days',
-  label: __('Last 7 days'),
-  getValue: () => {
-    const today = getDate(null);
-    return [subDays(today, 7), today];
-  }
-}, {
-  id: 'last-30-days',
-  label: __('Last 30 days'),
-  getValue: () => {
-    const today = getDate(null);
-    return [subDays(today, 30), today];
-  }
-}, {
-  id: 'month-to-date',
-  label: __('Month to date'),
-  getValue: () => {
-    const today = getDate(null);
-    return [startOfMonth(today), today];
-  }
-}, {
-  id: 'last-year',
-  label: __('Last year'),
-  getValue: () => {
-    const today = getDate(null);
-    return [subYears(today, 1), today];
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import {
+  format,
+  isValid as isValidDate,
+  subMonths,
+  subDays,
+  subYears,
+  startOfMonth,
+  startOfYear
+} from "date-fns";
+import {
+  BaseControl,
+  Button,
+  Icon,
+  privateApis as componentsPrivateApis,
+  __experimentalInputControl as InputControl,
+  __experimentalHStack as HStack,
+  __experimentalVStack as VStack
+} from "@wordpress/components";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { getDate, getSettings } from "@wordpress/date";
+import { error as errorIcon } from "@wordpress/icons";
+import RelativeDateControl from "./utils/relative-date-control";
+import {
+  OPERATOR_IN_THE_PAST,
+  OPERATOR_OVER,
+  OPERATOR_BETWEEN
+} from "../constants";
+import { unlock } from "../lock-unlock";
+import getCustomValidity from "./utils/get-custom-validity";
+const { DateCalendar, DateRangeCalendar } = unlock(componentsPrivateApis);
+const DATE_PRESETS = [
+  {
+    id: "today",
+    label: __("Today"),
+    getValue: () => getDate(null)
+  },
+  {
+    id: "yesterday",
+    label: __("Yesterday"),
+    getValue: () => {
+      const today = getDate(null);
+      return subDays(today, 1);
+    }
+  },
+  {
+    id: "past-week",
+    label: __("Past week"),
+    getValue: () => {
+      const today = getDate(null);
+      return subDays(today, 7);
+    }
+  },
+  {
+    id: "past-month",
+    label: __("Past month"),
+    getValue: () => {
+      const today = getDate(null);
+      return subMonths(today, 1);
+    }
   }
-}, {
-  id: 'year-to-date',
-  label: __('Year to date'),
-  getValue: () => {
-    const today = getDate(null);
-    return [startOfYear(today), today];
+];
+const DATE_RANGE_PRESETS = [
+  {
+    id: "last-7-days",
+    label: __("Last 7 days"),
+    getValue: () => {
+      const today = getDate(null);
+      return [subDays(today, 7), today];
+    }
+  },
+  {
+    id: "last-30-days",
+    label: __("Last 30 days"),
+    getValue: () => {
+      const today = getDate(null);
+      return [subDays(today, 30), today];
+    }
+  },
+  {
+    id: "month-to-date",
+    label: __("Month to date"),
+    getValue: () => {
+      const today = getDate(null);
+      return [startOfMonth(today), today];
+    }
+  },
+  {
+    id: "last-year",
+    label: __("Last year"),
+    getValue: () => {
+      const today = getDate(null);
+      return [subYears(today, 1), today];
+    }
+  },
+  {
+    id: "year-to-date",
+    label: __("Year to date"),
+    getValue: () => {
+      const today = getDate(null);
+      return [startOfYear(today), today];
+    }
   }
-}];
-const parseDate = dateString => {
+];
+const parseDate = (dateString) => {
   if (!dateString) {
     return null;
   }
   const parsed = getDate(dateString);
-  return parsed && isValid(parsed) ? parsed : null;
+  return parsed && isValidDate(parsed) ? parsed : null;
 };
-const formatDate = date => {
+const formatDate = (date) => {
   if (!date) {
-    return '';
+    return "";
   }
-  return typeof date === 'string' ? date : format(date, 'yyyy-MM-dd');
+  return typeof date === "string" ? date : format(date, "yyyy-MM-dd");
 };
+function ValidatedDateControl({
+  field,
+  validity,
+  inputRefs,
+  isTouched,
+  setIsTouched,
+  children
+}) {
+  const { isValid } = field;
+  const [customValidity, setCustomValidity] = useState(void 0);
+  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);
+  }, [inputRefs]);
+  useEffect(() => {
+    if (isTouched) {
+      const timeoutId = setTimeout(() => {
+        if (validity) {
+          setCustomValidity(getCustomValidity(isValid, validity));
+        } else {
+          validateRefs();
+        }
+      }, 0);
+      return () => clearTimeout(timeoutId);
+    }
+    return void 0;
+  }, [isTouched, isValid, validity, validateRefs]);
+  const onBlur = (event) => {
+    if (isTouched) {
+      return;
+    }
+    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
+      setIsTouched(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { onBlur, children: [
+    children,
+    /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: customValidity && /* @__PURE__ */ jsxs(
+      "p",
+      {
+        className: clsx(
+          "components-validated-control__indicator",
+          customValidity.type === "invalid" ? "is-invalid" : void 0,
+          customValidity.type === "valid" ? "is-valid" : void 0
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              className: "components-validated-control__indicator-icon",
+              icon: errorIcon,
+              size: 16,
+              fill: "currentColor"
+            }
+          ),
+          customValidity.message
+        ]
+      }
+    ) })
+  ] });
+}
 function CalendarDateControl({
-  id,
-  value,
+  data,
+  field,
   onChange,
-  label,
   hideLabelFromVision,
-  className
+  validity
 }) {
-  const [selectedPresetId, setSelectedPresetId] = useState(null);
+  const { id, label, setValue, getValue, isValid } = field;
+  const [selectedPresetId, setSelectedPresetId] = useState(
+    null
+  );
+  const fieldValue = getValue({ item: data });
+  const value = typeof fieldValue === "string" ? fieldValue : void 0;
   const [calendarMonth, setCalendarMonth] = useState(() => {
     const parsedDate = parseDate(value);
-    return parsedDate || new Date(); // Default to current month
+    return parsedDate || /* @__PURE__ */ new Date();
   });
-  const onSelectDate = useCallback(newDate => {
-    const dateValue = newDate ? format(newDate, 'yyyy-MM-dd') : undefined;
-    onChange(dateValue);
-    setSelectedPresetId(null);
-  }, [onChange]);
-  const handlePresetClick = useCallback(preset => {
-    const presetDate = preset.getValue();
-    const dateValue = formatDate(presetDate);
-    setCalendarMonth(presetDate);
-    onChange(dateValue);
-    setSelectedPresetId(preset.id);
-  }, [onChange]);
-  const handleManualDateChange = useCallback(newValue => {
-    onChange(newValue);
-    if (newValue) {
-      const parsedDate = parseDate(newValue);
-      if (parsedDate) {
-        setCalendarMonth(parsedDate);
+  const [isTouched, setIsTouched] = useState(false);
+  const validityTargetRef = useRef(null);
+  const onChangeCallback = useCallback(
+    (newValue) => onChange(setValue({ item: data, value: newValue })),
+    [data, onChange, setValue]
+  );
+  const onSelectDate = useCallback(
+    (newDate) => {
+      const dateValue = newDate ? format(newDate, "yyyy-MM-dd") : void 0;
+      onChangeCallback(dateValue);
+      setSelectedPresetId(null);
+      setIsTouched(true);
+    },
+    [onChangeCallback]
+  );
+  const handlePresetClick = useCallback(
+    (preset) => {
+      const presetDate = preset.getValue();
+      const dateValue = formatDate(presetDate);
+      setCalendarMonth(presetDate);
+      onChangeCallback(dateValue);
+      setSelectedPresetId(preset.id);
+      setIsTouched(true);
+    },
+    [onChangeCallback]
+  );
+  const handleManualDateChange = 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 }
   } = getSettings();
-  return /*#__PURE__*/_jsx(BaseControl, {
-    __nextHasNoMarginBottom: true,
-    id: id,
-    className: className,
-    label: label,
-    hideLabelFromVision: hideLabelFromVision,
-    children: /*#__PURE__*/_jsxs(VStack, {
-      spacing: 4,
-      children: [/*#__PURE__*/_jsxs(HStack, {
-        spacing: 2,
-        wrap: true,
-        justify: "flex-start",
-        children: [DATE_PRESETS.map(preset => {
-          const isSelected = selectedPresetId === preset.id;
-          return /*#__PURE__*/_jsx(Button, {
-            className: "dataviews-controls__date-preset",
-            variant: "tertiary",
-            isPressed: isSelected,
-            size: "small",
-            onClick: () => handlePresetClick(preset),
-            children: preset.label
-          }, preset.id);
-        }), /*#__PURE__*/_jsx(Button, {
-          className: "dataviews-controls__date-preset",
-          variant: "tertiary",
-          isPressed: !selectedPresetId,
-          size: "small",
-          disabled: !!selectedPresetId,
-          accessibleWhenDisabled: false,
-          children: __('Custom')
-        })]
-      }), /*#__PURE__*/_jsx(InputControl, {
-        __next40pxDefaultSize: true,
-        type: "date",
-        label: __('Date'),
-        hideLabelFromVision: true,
-        value: value,
-        onChange: handleManualDateChange
-      }), /*#__PURE__*/_jsx(DateCalendar, {
-        style: {
-          width: '100%'
-        },
-        selected: value ? parseDate(value) || undefined : undefined,
-        onSelect: onSelectDate,
-        month: calendarMonth,
-        onMonthChange: setCalendarMonth,
-        timeZone: timezoneString || undefined,
-        weekStartsOn: startOfWeek
-      })]
-    })
-  });
+  const displayLabel = isValid?.required ? `${label} (${__("Required")})` : label;
+  return /* @__PURE__ */ jsx(
+    ValidatedDateControl,
+    {
+      field,
+      validity,
+      inputRefs: validityTargetRef,
+      isTouched,
+      setIsTouched,
+      children: /* @__PURE__ */ jsx(
+        BaseControl,
+        {
+          __nextHasNoMarginBottom: true,
+          id,
+          className: "dataviews-controls__date",
+          label: displayLabel,
+          hideLabelFromVision,
+          children: /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
+            /* @__PURE__ */ jsxs(HStack, { spacing: 2, wrap: true, justify: "flex-start", children: [
+              DATE_PRESETS.map((preset) => {
+                const isSelected = selectedPresetId === preset.id;
+                return /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: "dataviews-controls__date-preset",
+                    variant: "tertiary",
+                    isPressed: isSelected,
+                    size: "small",
+                    onClick: () => handlePresetClick(preset),
+                    children: preset.label
+                  },
+                  preset.id
+                );
+              }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: "dataviews-controls__date-preset",
+                  variant: "tertiary",
+                  isPressed: !selectedPresetId,
+                  size: "small",
+                  disabled: !!selectedPresetId,
+                  accessibleWhenDisabled: false,
+                  children: __("Custom")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              InputControl,
+              {
+                __next40pxDefaultSize: true,
+                ref: validityTargetRef,
+                type: "date",
+                label: __("Date"),
+                hideLabelFromVision: true,
+                value,
+                onChange: handleManualDateChange,
+                required: !!field.isValid?.required
+              }
+            ),
+            /* @__PURE__ */ 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
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
 }
 function CalendarDateRangeControl({
-  id,
-  value,
+  data,
+  field,
   onChange,
-  label,
   hideLabelFromVision,
-  className
+  validity
 }) {
-  const [selectedPresetId, setSelectedPresetId] = useState(null);
+  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 = useCallback(
+    (newValue) => {
+      onChange(
+        setValue({
+          item: data,
+          value: newValue
+        })
+      );
+    },
+    [data, onChange, setValue]
+  );
+  const [selectedPresetId, setSelectedPresetId] = useState(
+    null
+  );
   const selectedRange = 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] = useState(() => {
-    return selectedRange.from || new Date();
+    return selectedRange.from || /* @__PURE__ */ new Date();
   });
-  const updateDateRange = 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 = useCallback(newRange => {
-    updateDateRange(newRange?.from, newRange?.to);
-    setSelectedPresetId(null);
-  }, [updateDateRange]);
-  const handlePresetClick = useCallback(preset => {
-    const [startDate, endDate] = preset.getValue();
-    setCalendarMonth(startDate);
-    updateDateRange(startDate, endDate);
-    setSelectedPresetId(preset.id);
-  }, [updateDateRange]);
-  const handleManualDateChange = 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] = useState(false);
+  const fromInputRef = useRef(null);
+  const toInputRef = useRef(null);
+  const updateDateRange = useCallback(
+    (fromDate, toDate) => {
+      if (fromDate && toDate) {
+        onChangeCallback([
+          formatDate(fromDate),
+          formatDate(toDate)
+        ]);
+      } else if (!fromDate && !toDate) {
+        onChangeCallback(void 0);
       }
+    },
+    [onChangeCallback]
+  );
+  const onSelectCalendarRange = useCallback(
+    (newRange) => {
+      updateDateRange(newRange?.from, newRange?.to);
+      setSelectedPresetId(null);
+      setIsTouched(true);
+    },
+    [updateDateRange]
+  );
+  const handlePresetClick = useCallback(
+    (preset) => {
+      const [startDate, endDate] = preset.getValue();
+      setCalendarMonth(startDate);
+      updateDateRange(startDate, endDate);
+      setSelectedPresetId(preset.id);
+      setIsTouched(true);
+    },
+    [updateDateRange]
+  );
+  const handleManualDateChange = 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 } = getSettings();
+  const displayLabel = field.isValid?.required ? `${label} (${__("Required")})` : label;
+  return /* @__PURE__ */ jsx(
+    ValidatedDateControl,
+    {
+      field,
+      validity,
+      inputRefs: [fromInputRef, toInputRef],
+      isTouched,
+      setIsTouched,
+      children: /* @__PURE__ */ jsx(
+        BaseControl,
+        {
+          __nextHasNoMarginBottom: true,
+          id,
+          className: "dataviews-controls__date",
+          label: displayLabel,
+          hideLabelFromVision,
+          children: /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
+            /* @__PURE__ */ jsxs(HStack, { spacing: 2, wrap: true, justify: "flex-start", children: [
+              DATE_RANGE_PRESETS.map((preset) => {
+                const isSelected = selectedPresetId === preset.id;
+                return /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: "dataviews-controls__date-preset",
+                    variant: "tertiary",
+                    isPressed: isSelected,
+                    size: "small",
+                    onClick: () => handlePresetClick(preset),
+                    children: preset.label
+                  },
+                  preset.id
+                );
+              }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: "dataviews-controls__date-preset",
+                  variant: "tertiary",
+                  isPressed: !selectedPresetId,
+                  size: "small",
+                  accessibleWhenDisabled: false,
+                  disabled: !!selectedPresetId,
+                  children: __("Custom")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(HStack, { spacing: 2, children: [
+              /* @__PURE__ */ jsx(
+                InputControl,
+                {
+                  __next40pxDefaultSize: true,
+                  ref: fromInputRef,
+                  type: "date",
+                  label: __("From"),
+                  hideLabelFromVision: true,
+                  value: value?.[0],
+                  onChange: (newValue) => handleManualDateChange("from", newValue),
+                  required: !!field.isValid?.required
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                InputControl,
+                {
+                  __next40pxDefaultSize: true,
+                  ref: toInputRef,
+                  type: "date",
+                  label: __("To"),
+                  hideLabelFromVision: true,
+                  value: value?.[1],
+                  onChange: (newValue) => handleManualDateChange("to", newValue),
+                  required: !!field.isValid?.required
+                }
+              )
+            ] }),
+            /* @__PURE__ */ 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
-  } = getSettings();
-  return /*#__PURE__*/_jsx(BaseControl, {
-    __nextHasNoMarginBottom: true,
-    id: id,
-    className: className,
-    label: label,
-    hideLabelFromVision: hideLabelFromVision,
-    children: /*#__PURE__*/_jsxs(VStack, {
-      spacing: 4,
-      children: [/*#__PURE__*/_jsxs(HStack, {
-        spacing: 2,
-        wrap: true,
-        justify: "flex-start",
-        children: [DATE_RANGE_PRESETS.map(preset => {
-          const isSelected = selectedPresetId === preset.id;
-          return /*#__PURE__*/_jsx(Button, {
-            className: "dataviews-controls__date-preset",
-            variant: "tertiary",
-            isPressed: isSelected,
-            size: "small",
-            onClick: () => handlePresetClick(preset),
-            children: preset.label
-          }, preset.id);
-        }), /*#__PURE__*/_jsx(Button, {
-          className: "dataviews-controls__date-preset",
-          variant: "tertiary",
-          isPressed: !selectedPresetId,
-          size: "small",
-          accessibleWhenDisabled: false,
-          disabled: !!selectedPresetId,
-          children: __('Custom')
-        })]
-      }), /*#__PURE__*/_jsxs(HStack, {
-        spacing: 2,
-        children: [/*#__PURE__*/_jsx(InputControl, {
-          __next40pxDefaultSize: true,
-          type: "date",
-          label: __('From'),
-          hideLabelFromVision: true,
-          value: value?.[0],
-          onChange: newValue => handleManualDateChange('from', newValue)
-        }), /*#__PURE__*/_jsx(InputControl, {
-          __next40pxDefaultSize: true,
-          type: "date",
-          label: __('To'),
-          hideLabelFromVision: true,
-          value: value?.[1],
-          onChange: newValue => handleManualDateChange('to', newValue)
-        })]
-      }), /*#__PURE__*/_jsx(DateRangeCalendar, {
-        style: {
-          width: '100%'
-        },
-        selected: selectedRange,
-        onSelect: onSelectCalendarRange,
-        month: calendarMonth,
-        onMonthChange: setCalendarMonth,
-        timeZone: timezone.string || undefined,
-        weekStartsOn: l10n.startOfWeek
-      })]
-    })
-  });
+  );
 }
-export default function DateControl({
+function DateControl({
   data,
   field,
   onChange,
   hideLabelFromVision,
-  operator
+  operator,
+  validity
 }) {
-  const {
-    id,
-    label,
-    getValue,
-    setValue
-  } = field;
-  const value = getValue({
-    item: data
-  });
-  const onChangeRelativeDateControl = useCallback(newValue => {
-    onChange(setValue({
-      item: data,
-      value: newValue
-    }));
-  }, [data, onChange, setValue]);
-  const onChangeCalendarDateRangeControl = useCallback(newValue => {
-    onChange(setValue({
-      item: data,
-      value: newValue
-    }));
-  }, [data, onChange, setValue]);
-  const onChangeCalendarDateControl = useCallback(newValue => onChange(setValue({
-    item: data,
-    value: newValue
-  })), [data, onChange, setValue]);
   if (operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER) {
-    return /*#__PURE__*/_jsx(RelativeDateControl, {
-      className: "dataviews-controls__date",
-      id: id,
-      value: value && typeof value === 'object' ? value : {},
-      onChange: onChangeRelativeDateControl,
-      label: label,
-      hideLabelFromVision: hideLabelFromVision,
-      options: TIME_UNITS_OPTIONS[operator]
-    });
+    return /* @__PURE__ */ jsx(
+      RelativeDateControl,
+      {
+        className: "dataviews-controls__date",
+        data,
+        field,
+        onChange,
+        hideLabelFromVision,
+        operator
+      }
+    );
   }
   if (operator === 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__*/_jsx(CalendarDateRangeControl, {
-      className: "dataviews-controls__date",
-      id: id,
-      value: dateRangeValue,
-      onChange: onChangeCalendarDateRangeControl,
-      label: label,
-      hideLabelFromVision: hideLabelFromVision
-    });
+    return /* @__PURE__ */ jsx(
+      CalendarDateRangeControl,
+      {
+        data,
+        field,
+        onChange,
+        hideLabelFromVision,
+        validity
+      }
+    );
   }
-  return /*#__PURE__*/_jsx(CalendarDateControl, {
-    className: "dataviews-controls__date",
-    id: id,
-    value: typeof value === 'string' ? value : undefined,
-    onChange: onChangeCalendarDateControl,
-    label: label,
-    hideLabelFromVision: hideLabelFromVision
-  });
+  return /* @__PURE__ */ jsx(
+    CalendarDateControl,
+    {
+      data,
+      field,
+      onChange,
+      hideLabelFromVision,
+      validity
+    }
+  );
 }
-//# sourceMappingURL=date.js.map
+export {
+  DateControl as default
+};
+//# sourceMappingURL=date.js.map