@servicetitan/anvil2 1.41.0 → 1.42.1

package/dist/{DateFieldYearless-CJP3H_Dg-BV5wGJp1.js → DateFieldYearless-DU0z2fEA-ByR2ixI5.js}

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback, useRef, useLayoutEffect, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
-import { D as DateTime, f as Calendar } from './Calendar-CNrdcd3f-BAKv-Gz3.js';
-import { T as TextField } from './TextField-D_fqJf85-Bcd6rWv4.js';
+import { T as TextField } from './TextField-CRTh0gL_-D2CjcYXX.js';
 import { u as useMergeRefs$1 } from './floating-ui.react-BFNinq1w.js';
+import { D as DateTime, f as Calendar } from './Calendar-DD5kmVd3-CBGTR11R.js';
 import { I as Icon } from './Icon-B6HmlQiR-BxQkO3X5.js';
 import { u as usePopoverCloseDelayWorkaround, S as SvgEvent } from './usePopoverCloseDelayWorkaround-BhhG-xEB-hfJZaXHC.js';
-import { d as Popover } from './Popover-DvLcjLjG-Yu5STx-v.js';
-import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
+import { d as Popover } from './Popover-CU2cGVD8-FWJOuFRj.js';
 import { u as useOptionallyControlledState } from './useOptionallyControlledState-DAv5LXXh-DAv5LXXh.js';
-import { s as supportsPopover, u as useKeyboardFocusables } from './ProgressBar-BezETeA3-CeeedJ_w.js';
+import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
+import { s as supportsPopover, u as useKeyboardFocusables } from './ProgressBar-BRvB-bD4-DppwBrFg.js';
 
 function getContentEditableSelection(element) {
     const { anchorOffset = 0, focusOffset = 0 } = element.ownerDocument.getSelection() || {};
@@ -1911,8 +1911,12 @@ const MaskedDateInput = forwardRef(
         mode,
         removePlaceholder
       );
+      const isValueDifferent = isInputValid !== currentParsedData.isInputValid || // The input has changed validity
+      isInputEmpty !== currentParsedData.isInputEmpty || // The input has changed emptiness
+      date === null !== (lastValidDate === null) || // The input has changed from empty to non-empty or vice versa
+      date !== null && lastValidDate !== null && !date.equals(lastValidDate);
+      if (!isValueDifferent) return;
       onChange?.({
-        event,
         date: date ?? lastValidDate ?? null,
         isInputValid,
         isInputEmpty
@@ -1984,6 +1988,206 @@ function orderSegmentsByMode(day, month, year, mode) {
   }
 }
 
+function containsRelatedTarget(event) {
+  if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
+    return event.currentTarget.contains(event.relatedTarget);
+  }
+  return false;
+}
+function useFocusWithin({
+  onBlur,
+  onFocus
+} = {}) {
+  const [focused, setFocused] = useState(false);
+  const focusedRef = useRef(false);
+  const elementRef = useRef(null);
+  const _setFocused = useCallback((value) => {
+    setFocused(value);
+    focusedRef.current = value;
+  }, []);
+  const handleFocusIn = useCallback(
+    (event) => {
+      if (!focusedRef.current) {
+        _setFocused(true);
+        onFocus?.(event);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onFocus]
+  );
+  const handleFocusOut = useCallback(
+    (event) => {
+      if (focusedRef.current && !containsRelatedTarget(event)) {
+        _setFocused(false);
+        onBlur?.(event);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onBlur]
+  );
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+    element.addEventListener("focusin", handleFocusIn);
+    element.addEventListener("focusout", handleFocusOut);
+    return () => {
+      element.removeEventListener("focusin", handleFocusIn);
+      element.removeEventListener("focusout", handleFocusOut);
+    };
+  }, [handleFocusIn, handleFocusOut]);
+  return { ref: elementRef, focused };
+}
+
+function convertStringToDate(v) {
+  if (v === void 0 || v === null) {
+    return v;
+  }
+  const date = DateTime.fromISO(v, { setZone: true, zone: "utc" }).startOf(
+    "day"
+  );
+  if (date.isValid) {
+    return date;
+  }
+  return null;
+}
+function validateDate({
+  date,
+  constraints
+}) {
+  const { required, unavailable, minDate, maxDate } = constraints;
+  if (!date) {
+    return required ? false : true;
+  }
+  if (unavailable?.dates?.some((d) => d.equals(date))) {
+    return false;
+  }
+  if (unavailable?.daysOfWeek?.includes(date.weekday)) {
+    return false;
+  }
+  if (minDate && date < minDate) {
+    return false;
+  }
+  if (maxDate && date > maxDate) {
+    return false;
+  }
+  return true;
+}
+function validateYearlessDate({
+  value,
+  constraints
+}) {
+  const { required, unavailable, minDate, maxDate } = constraints;
+  if (!value || !value?.day && !value?.month) {
+    return required ? false : true;
+  }
+  if (value.day === null || value.month === null) {
+    return false;
+  }
+  if (unavailable?.dates?.some(
+    (d) => d.day === value.day && d.month === value.month
+  )) {
+    return false;
+  }
+  const minDateMonth = minDate?.month ?? 1;
+  const minDateDay = minDate?.day ?? 1;
+  const maxDateMonth = maxDate?.month ?? 12;
+  const maxDateDay = maxDate?.day ?? 31;
+  if (value.month < minDateMonth || // Earlier month
+  value.month === minDateMonth && value.day < minDateDay) {
+    return false;
+  }
+  if (value.month > maxDateMonth || // Later month
+  value.month === maxDateMonth && value.day > maxDateDay) {
+    return false;
+  }
+  return true;
+}
+
+function useDateFieldSingleConversion({
+  value,
+  defaultValue,
+  minDate,
+  maxDate,
+  unavailable,
+  onChange
+}) {
+  const normalizedValue = useMemo(() => convertStringToDate(value), [value]);
+  const normalizedDefaultValue = useMemo(
+    () => convertStringToDate(defaultValue),
+    [defaultValue]
+  );
+  const normalizedMinDate = useMemo(
+    () => convertStringToDate(minDate),
+    [minDate]
+  );
+  const normalizedMaxDate = useMemo(
+    () => convertStringToDate(maxDate),
+    [maxDate]
+  );
+  const normalizedUnavailableDates = useMemo(
+    () => unavailable?.dates?.map((d) => convertStringToDate(d)).filter((d) => d !== null && d !== void 0),
+    [unavailable?.dates]
+  );
+  const handleChange = useCallback(
+    (change) => {
+      onChange?.({
+        ...change,
+        date: change.date?.toISODate() ?? null
+      });
+    },
+    [onChange]
+  );
+  return {
+    value: normalizedValue,
+    defaultValue: normalizedDefaultValue,
+    minDate: normalizedMinDate,
+    maxDate: normalizedMaxDate,
+    unavailable: {
+      dates: normalizedUnavailableDates,
+      daysOfWeek: unavailable?.daysOfWeek
+    },
+    onChange: handleChange
+  };
+}
+
+function DateFieldSingleCalendar({
+  onKeyDown,
+  value,
+  onSelection,
+  minDate,
+  maxDate,
+  unavailable,
+  ...rest
+}) {
+  const handleCalendarSelection = (data) => {
+    if (data.value) {
+      const date = DateTime.fromISO(data.value, { zone: "utc" });
+      onSelection(date);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Calendar,
+    {
+      ...rest,
+      range: false,
+      onKeyDown,
+      defaultFocusedDate: value?.toISODate() || DateTime.now().toISODate(),
+      value: value?.toISODate() || void 0,
+      onSelection: handleCalendarSelection,
+      defaultTimeZone: "UTC",
+      minDate: minDate?.toISODate() ?? void 0,
+      maxDate: maxDate?.toISODate() ?? void 0,
+      unavailable: unavailable ? {
+        dates: unavailable.dates?.map((d) => d.toISODate() ?? ""),
+        daysOfWeek: unavailable.daysOfWeek
+      } : void 0,
+      _disableAutofocus: true
+    }
+  );
+}
+
 const useDateFieldOrchestration = ({
   inputRef,
   calendarDefaultOpen,
@@ -2070,360 +2274,185 @@ const useDateFieldOrchestration = ({
   };
 };
 
-function convertStringToDate(v) {
-  if (v === void 0 || v === null) {
-    return v;
-  }
-  const date = DateTime.fromISO(v, { setZone: true, zone: "utc" }).startOf(
-    "day"
-  );
-  if (date.isValid) {
-    return date;
-  }
-  return null;
-}
-function validateDate({
-  date,
-  constraints
-}) {
-  const { required, unavailable, minDate, maxDate } = constraints;
-  if (!date) {
-    return required ? false : true;
-  }
-  if (unavailable?.dates?.some((d) => d.equals(date))) {
-    return false;
-  }
-  if (unavailable?.daysOfWeek?.includes(date.weekday)) {
-    return false;
-  }
-  if (minDate && date < minDate) {
-    return false;
-  }
-  if (maxDate && date > maxDate) {
-    return false;
-  }
-  return true;
-}
-function validateYearlessDate({
-  value,
-  constraints
+function useDateFieldSingleState({
+  valueProp,
+  defaultValueProp,
+  inputRef,
+  onChange
 }) {
-  const { required, unavailable, minDate, maxDate } = constraints;
-  if (!value || !value?.day && !value?.month) {
-    return required ? false : true;
-  }
-  if (value.day === null || value.month === null) {
-    return false;
-  }
-  if (unavailable?.dates?.some(
-    (d) => d.day === value.day && d.month === value.month
-  )) {
-    return false;
-  }
-  const minDateMonth = minDate?.month ?? 1;
-  const minDateDay = minDate?.day ?? 1;
-  const maxDateMonth = maxDate?.month ?? 12;
-  const maxDateDay = maxDate?.day ?? 31;
-  if (value.month < minDateMonth || // Earlier month
-  value.month === minDateMonth && value.day < minDateDay) {
-    return false;
-  }
-  if (value.month > maxDateMonth || // Later month
-  value.month === maxDateMonth && value.day > maxDateDay) {
-    return false;
-  }
-  return true;
+  const [value, setValue] = useOptionallyControlledState({
+    controlledValue: valueProp,
+    defaultValue: defaultValueProp
+  });
+  const setSharedValue = (date) => {
+    inputRef.current?.setDate(date);
+    setValue(date);
+  };
+  const handleInputChange = (change) => {
+    const date = change.isInputEmpty ? null : change.date?.startOf("day") ?? null;
+    onChange?.({
+      date,
+      isInputValid: change.isInputValid,
+      isInputEmpty: change.isInputEmpty
+    });
+    if (change.isInputValid) {
+      setSharedValue(change.isInputEmpty ? null : change.date);
+    }
+    if (change.isInputEmpty) {
+      setSharedValue(null);
+      return;
+    }
+    if (change.date) {
+      setSharedValue(change.date);
+    }
+  };
+  const handleCalendarSelection = (date) => {
+    setSharedValue(date);
+    onChange?.({
+      date,
+      isInputValid: true,
+      isInputEmpty: false
+    });
+  };
+  return {
+    value,
+    setValue: setSharedValue,
+    handleInputChange,
+    handleCalendarSelection
+  };
 }
 
-const NormalizedDateFieldSingle = forwardRef(
-  ({
-    value: valueProp,
-    mode = "mm/dd/yyyy",
-    defaultValue: defaultValueProp,
-    onChange,
-    disableCalendar = false,
-    unavailable,
+const DateFieldSingle = ({
+  onFocus,
+  onBlur,
+  disableCalendar,
+  required,
+  mode,
+  value: valueProp,
+  defaultValue: defaultValueProp,
+  minDate: minDateProp,
+  maxDate: maxDateProp,
+  unavailable: unavailableProp,
+  onChange: onChangeProp,
+  ...rest
+}) => {
+  const inputRef = useRef(null);
+  const {
+    value: normalizedValue,
+    defaultValue: normalizedDefaultValue,
     minDate,
     maxDate,
-    onFocus,
-    onBlur,
-    required = false,
-    ...rest
-  }, ref) => {
-    const inputRef = useRef(null);
-    const [popoverTriggerRef, setPopoverTriggerRef] = useState();
-    const popoverContentRef = useRef(null);
-    const combinedRef = useMergeRefs([popoverTriggerRef, inputRef, ref]);
-    const {
-      calendarOpen,
-      setCalendarOpen,
-      handleCalendarKeyDown,
-      handleInputKeyDown
-    } = useDateFieldOrchestration({
-      inputRef,
-      calendarDefaultOpen: false,
-      popoverContentRef,
-      disableCalendar
-    });
-    const [lastValidDate, setLastValidDate] = useOptionallyControlledState({
-      controlledValue: valueProp,
-      defaultValue: defaultValueProp
-    });
-    const popoverSupported = usePopoverSupport();
-    const shouldShowCalendar = usePopoverCloseDelayWorkaround(calendarOpen);
-    const currentValidity = useMemo(
-      () => validateDate({
-        date: lastValidDate,
+    unavailable,
+    onChange
+  } = useDateFieldSingleConversion({
+    value: valueProp,
+    defaultValue: defaultValueProp,
+    onChange: onChangeProp,
+    minDate: minDateProp,
+    maxDate: maxDateProp,
+    unavailable: unavailableProp
+  });
+  const handleChange = (change) => {
+    onChange?.({
+      ...change,
+      isDateValid: validateDate({
+        date: change.date,
         constraints: {
           required,
           unavailable,
           minDate: minDate ?? void 0,
           maxDate: maxDate ?? void 0
         }
-      }),
-      [lastValidDate, required, unavailable, minDate, maxDate]
-    );
-    const handleInputChange = (change) => {
-      const date = change.isInputEmpty ? null : change.date?.startOf("day") ?? null;
-      onChange?.({
-        date: date?.toISODate() ?? null,
-        isInputValid: change.isInputValid,
-        isInputEmpty: change.isInputEmpty,
-        isDateValid: validateDate({
-          date,
-          constraints: {
-            required,
-            unavailable,
-            minDate: minDate ?? void 0,
-            maxDate: maxDate ?? void 0
-          }
-        })
-      });
-      if (change.isInputValid) {
-        setLastValidDate(change.isInputEmpty ? null : change.date);
-      }
-      if (change.isInputEmpty) {
-        setLastValidDate(null);
-        return;
-      }
-      if (change.date) {
-        setLastValidDate(change.date);
-      }
-    };
-    const handleCalendarSelection = (data) => {
-      if (data.value) {
-        const date = DateTime.fromISO(data.value, { zone: "utc" });
-        setLastValidDate(date);
-        inputRef.current?.setDate(date);
-        onChange?.({
-          date: date.toISODate(),
-          isInputValid: true,
-          isInputEmpty: false,
-          isDateValid: validateDate({
-            date,
-            constraints: {
-              required,
-              unavailable,
-              minDate: minDate ?? void 0,
-              maxDate: maxDate ?? void 0
-            }
-          })
-        });
-      }
-    };
-    const justTheField = /* @__PURE__ */ jsx(
-      MaskedDateInput,
-      {
-        mode,
-        ref: combinedRef,
-        ...rest,
-        onChange: handleInputChange,
-        onKeyDown: handleInputKeyDown,
-        onClick: () => setCalendarOpen(true),
-        lastValidDate,
+      })
+    });
+  };
+  const { value, handleInputChange, handleCalendarSelection } = useDateFieldSingleState({
+    valueProp: normalizedValue,
+    defaultValueProp: normalizedDefaultValue,
+    inputRef,
+    onChange: handleChange
+  });
+  const { ref: wrapperRef } = useFocusWithin({
+    onBlur,
+    onFocus
+  });
+  const [popoverTriggerRef, setPopoverTriggerRef] = useState();
+  const popoverContentRef = useRef(null);
+  const combinedRef = useMergeRefs([popoverTriggerRef, inputRef]);
+  const {
+    calendarOpen,
+    setCalendarOpen,
+    handleCalendarKeyDown,
+    handleInputKeyDown
+  } = useDateFieldOrchestration({
+    inputRef,
+    calendarDefaultOpen: false,
+    popoverContentRef,
+    disableCalendar
+  });
+  const popoverSupported = usePopoverSupport();
+  const shouldShowCalendar = usePopoverCloseDelayWorkaround(calendarOpen);
+  const currentValidity = useMemo(
+    () => validateDate({
+      date: value,
+      constraints: {
         required,
-        autoComplete: "off",
-        "data-date-valid": currentValidity
-      }
-    );
-    if (disableCalendar) {
-      return justTheField;
-    }
-    if (!popoverSupported) {
-      return justTheField;
-    }
-    return /* @__PURE__ */ jsxs(
-      Popover,
-      {
-        open: calendarOpen,
-        modal: true,
-        placement: "bottom-start",
-        disableFlipFallback: true,
-        disableTriggerFocus: true,
-        onClose: () => setCalendarOpen(false),
-        disableAutoUpdate: true,
-        onClickOutside: () => setCalendarOpen(false),
-        children: [
-          /* @__PURE__ */ jsx(Popover.Trigger, { children: ({ ref: iRef }) => {
-            setPopoverTriggerRef(iRef);
-            return justTheField;
-          } }),
-          /* @__PURE__ */ jsx(Popover.Content, { ref: popoverContentRef, "data-testid": "calendar-popover", children: shouldShowCalendar && /* @__PURE__ */ jsx(
-            Calendar,
-            {
-              range: false,
-              onKeyDown: handleCalendarKeyDown,
-              defaultFocusedDate: lastValidDate?.toISODate() || DateTime.now().toISODate(),
-              value: lastValidDate?.toISODate() || void 0,
-              onSelection: handleCalendarSelection,
-              defaultTimeZone: "UTC",
-              minDate: minDate?.toISODate() ?? void 0,
-              maxDate: maxDate?.toISODate() ?? void 0,
-              unavailable: unavailable ? {
-                dates: unavailable.dates?.map((d) => d.toISODate() ?? ""),
-                daysOfWeek: unavailable.daysOfWeek
-              } : void 0,
-              _disableAutofocus: true
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-NormalizedDateFieldSingle.displayName = "NormalizedDateFieldSingle";
-
-function containsRelatedTarget(event) {
-  if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
-    return event.currentTarget.contains(event.relatedTarget);
-  }
-  return false;
-}
-function useFocusWithin({
-  onBlur,
-  onFocus
-} = {}) {
-  const [focused, setFocused] = useState(false);
-  const focusedRef = useRef(false);
-  const elementRef = useRef(null);
-  const _setFocused = useCallback((value) => {
-    setFocused(value);
-    focusedRef.current = value;
-  }, []);
-  const handleFocusIn = useCallback(
-    (event) => {
-      if (!focusedRef.current) {
-        _setFocused(true);
-        onFocus?.(event);
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onFocus]
-  );
-  const handleFocusOut = useCallback(
-    (event) => {
-      if (focusedRef.current && !containsRelatedTarget(event)) {
-        _setFocused(false);
-        onBlur?.(event);
+        unavailable,
+        minDate: minDate ?? void 0,
+        maxDate: maxDate ?? void 0
       }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onBlur]
+    }),
+    [value, required, unavailable, minDate, maxDate]
   );
-  useEffect(() => {
-    const element = elementRef.current;
-    if (!element) {
-      return;
+  const justTheField = /* @__PURE__ */ jsx(
+    MaskedDateInput,
+    {
+      ...rest,
+      mode,
+      ref: combinedRef,
+      onChange: handleInputChange,
+      onKeyDown: handleInputKeyDown,
+      onClick: () => setCalendarOpen(true),
+      lastValidDate: value,
+      required,
+      autoComplete: "off",
+      "data-date-valid": currentValidity
     }
-    element.addEventListener("focusin", handleFocusIn);
-    element.addEventListener("focusout", handleFocusOut);
-    return () => {
-      element.removeEventListener("focusin", handleFocusIn);
-      element.removeEventListener("focusout", handleFocusOut);
-    };
-  }, [handleFocusIn, handleFocusOut]);
-  return { ref: elementRef, focused };
-}
-
-const useConditionalChange = ({
-  changeHandler,
-  compareFn
-}) => {
-  const lastChangeRef = useRef(null);
-  const onChange = useCallback(
-    (change) => {
-      if (!!lastChangeRef.current && !compareFn(lastChangeRef.current, change)) {
-        return;
-      }
-      changeHandler?.(change);
-      lastChangeRef.current = change;
-    },
-    [changeHandler, compareFn]
-  );
-  return onChange;
-};
-
-const DateFieldSingle = ({
-  value,
-  defaultValue,
-  minDate,
-  maxDate,
-  unavailable,
-  onChange,
-  onFocus,
-  onBlur,
-  ...rest
-}) => {
-  const handleBlur = useCallback(
-    (event) => {
-      onBlur?.(event);
-    },
-    [onBlur]
-  );
-  const handleFocus = useCallback(
-    (event) => {
-      onFocus?.(event);
-    },
-    [onFocus]
-  );
-  const { ref: wrapperRef } = useFocusWithin({
-    onBlur: handleBlur,
-    onFocus: handleFocus
-  });
-  const normalizedValue = useMemo(() => convertStringToDate(value), [value]);
-  const normalizedDefaultValue = useMemo(
-    () => convertStringToDate(defaultValue),
-    [defaultValue]
   );
-  const normalizedMinDate = useMemo(
-    () => convertStringToDate(minDate),
-    [minDate]
-  );
-  const normalizedMaxDate = useMemo(
-    () => convertStringToDate(maxDate),
-    [maxDate]
-  );
-  const normalizedUnavailableDates = useMemo(
-    () => unavailable?.dates?.map((d) => convertStringToDate(d)).filter((d) => d !== null && d !== void 0),
-    [unavailable?.dates]
-  );
-  const handleChange = useConditionalChange({
-    changeHandler: onChange,
-    compareFn: (a, b) => a.isInputValid !== b.isInputValid || a.isInputEmpty !== b.isInputEmpty || a.isDateValid !== b.isDateValid || a.date !== b.date
-  });
-  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, children: /* @__PURE__ */ jsx(
-    NormalizedDateFieldSingle,
+  if (disableCalendar) {
+    return justTheField;
+  }
+  if (!popoverSupported) {
+    return justTheField;
+  }
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, children: /* @__PURE__ */ jsxs(
+    Popover,
     {
-      ...rest,
-      onChange: handleChange,
-      value: normalizedValue,
-      defaultValue: normalizedDefaultValue,
-      minDate: normalizedMinDate,
-      maxDate: normalizedMaxDate,
-      unavailable: unavailable ? {
-        dates: normalizedUnavailableDates,
-        daysOfWeek: unavailable?.daysOfWeek
-      } : void 0
+      open: calendarOpen,
+      modal: true,
+      placement: "bottom-start",
+      disableFlipFallback: true,
+      disableTriggerFocus: true,
+      onClose: () => setCalendarOpen(false),
+      disableAutoUpdate: true,
+      onClickOutside: () => setCalendarOpen(false),
+      children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { children: ({ ref: iRef }) => {
+          setPopoverTriggerRef(iRef);
+          return justTheField;
+        } }),
+        /* @__PURE__ */ jsx(Popover.Content, { ref: popoverContentRef, "data-testid": "calendar-popover", children: shouldShowCalendar && /* @__PURE__ */ jsx(
+          DateFieldSingleCalendar,
+          {
+            onKeyDown: handleCalendarKeyDown,
+            value,
+            onSelection: handleCalendarSelection,
+            minDate,
+            maxDate,
+            unavailable
+          }
+        ) })
+      ]
     }
   ) });
 };
@@ -2513,6 +2542,9 @@ const MaskedDateRangeInput = forwardRef(
       previousStartDate,
       previousEndDate
     ]);
+    const currentParsedData = useMemo(() => {
+      return parseRangeInputValue(inputValue, mode, removePlaceholder);
+    }, [inputValue, mode, removePlaceholder]);
     const handleChange = (event) => {
       setInputValue(event.target.value);
       const {
@@ -2522,17 +2554,20 @@ const MaskedDateRangeInput = forwardRef(
         isInputEmpty,
         isHalfEmpty
       } = parseRangeInputValue(event.target.value, mode, removePlaceholder);
+      const isValueDifferent = isInputValid !== currentParsedData.isInputValid || // The input has changed validity
+      isInputEmpty !== currentParsedData.isInputEmpty || // The input has changed emptiness
+      parsedStartDate === null !== (startDate === null) || // The start date has changed from empty to non-empty or vice versa
+      parsedEndDate === null !== (endDate === null) || // The end date has changed from empty to non-empty or vice versa
+      parsedStartDate !== null && startDate !== null && !parsedStartDate.equals(startDate) || // The start date has changed
+      parsedEndDate !== null && endDate !== null && !parsedEndDate.equals(endDate);
+      if (!isValueDifferent) return;
       onChange?.({
-        event,
         startDate: isInputEmpty ? null : parsedStartDate ?? startDate ?? null,
         endDate: isInputEmpty || isHalfEmpty ? null : parsedEndDate ?? endDate ?? null,
         isInputValid,
         isInputEmpty
       });
     };
-    const currentParsedData = useMemo(() => {
-      return parseRangeInputValue(inputValue, mode, removePlaceholder);
-    }, [inputValue, mode, removePlaceholder]);
     useImperativeHandle(ref, () => {
       const input = inputRef.current;
       if (!input) return null;
@@ -2623,202 +2658,311 @@ function swapMode$1(inputString, previousMode, mode) {
   return inputString;
 }
 
-const NormalizedDateFieldRange = forwardRef(
-  ({
+const useDateFieldRangeConversion = (props) => {
+  const { value, defaultValue, minDate, maxDate, unavailable, onChange } = props;
+  const normalizedValue = useMemo(() => {
+    if (value === null || value === void 0) return value;
+    return {
+      startDate: convertStringToDate(value.startDate) ?? null,
+      endDate: convertStringToDate(value.endDate) ?? null
+    };
+  }, [value]);
+  const normalizedDefaultValue = useMemo(() => {
+    if (defaultValue === null || defaultValue === void 0)
+      return defaultValue;
+    return {
+      startDate: convertStringToDate(defaultValue.startDate) ?? null,
+      endDate: convertStringToDate(defaultValue.endDate) ?? null
+    };
+  }, [defaultValue]);
+  const normalizedMinDate = useMemo(
+    () => convertStringToDate(minDate),
+    [minDate]
+  );
+  const normalizedMaxDate = useMemo(
+    () => convertStringToDate(maxDate),
+    [maxDate]
+  );
+  const normalizedUnavailableDates = useMemo(() => {
+    return unavailable?.dates?.map((date) => convertStringToDate(date)).filter((date) => date !== null && date !== void 0);
+  }, [unavailable?.dates]);
+  const handleChange = useCallback(
+    (change) => {
+      onChange?.({
+        ...change,
+        startDate: change.startDate?.toISODate() ?? null,
+        endDate: change.endDate?.toISODate() ?? null
+      });
+    },
+    [onChange]
+  );
+  return {
+    value: normalizedValue,
+    defaultValue: normalizedDefaultValue,
+    minDate: normalizedMinDate,
+    maxDate: normalizedMaxDate,
+    unavailable: {
+      dates: normalizedUnavailableDates,
+      daysOfWeek: unavailable?.daysOfWeek
+    },
+    onChange: handleChange
+  };
+};
+
+function useDateFieldRangeState({
+  valueProp,
+  defaultValueProp,
+  inputRef,
+  onChange
+}) {
+  const [startDate, setStartDate] = useOptionallyControlledState({
+    controlledValue: valueProp !== void 0 ? valueProp?.startDate : void 0,
+    defaultValue: defaultValueProp !== void 0 ? defaultValueProp?.startDate : void 0
+  });
+  const [endDate, setEndDate] = useOptionallyControlledState({
+    controlledValue: valueProp !== void 0 ? valueProp?.endDate : void 0,
+    defaultValue: defaultValueProp !== void 0 ? defaultValueProp?.endDate : void 0
+  });
+  const setSharedValue = (value) => {
+    inputRef.current?.setDateRange(value.startDate, value.endDate);
+    setStartDate(value.startDate);
+    setEndDate(value.endDate);
+  };
+  const handleInputChange = (change) => {
+    const range = change.isInputEmpty ? null : {
+      startDate: change.startDate?.startOf("day") ?? null,
+      endDate: change.endDate?.startOf("day") ?? null
+    };
+    setStartDate(range?.startDate ?? null);
+    setEndDate(range?.endDate ?? null);
+    onChange?.({
+      startDate: range?.startDate ?? null,
+      endDate: range?.endDate ?? null,
+      isInputValid: change.isInputValid,
+      isInputEmpty: change.isInputEmpty
+    });
+  };
+  const handleCalendarSelection = ({
+    startDate: startDate2,
+    endDate: endDate2
+  }) => {
+    setSharedValue({ startDate: startDate2, endDate: endDate2 });
+    onChange?.({
+      startDate: startDate2,
+      endDate: endDate2,
+      isInputValid: true,
+      isInputEmpty: false
+    });
+  };
+  return {
+    startDate,
+    endDate,
+    setStartDate,
+    setEndDate,
+    handleInputChange,
+    handleCalendarSelection
+  };
+}
+
+const DateFieldRangeCalendar = ({
+  startDate,
+  endDate,
+  onKeyDown,
+  onSelection,
+  minDate,
+  maxDate,
+  unavailable
+}) => {
+  const previousStartDate = usePrevious(startDate);
+  const previousEndDate = usePrevious(endDate);
+  const handleCalendarSelection = (data) => {
+    if (!data.value) return;
+    const calStartDate = data.value.start ? DateTime.fromISO(data.value.start, { zone: "utc" }) : null;
+    const calEndDate = data.value.end ? DateTime.fromISO(data.value.end, { zone: "utc" }) : null;
+    onSelection({
+      startDate: calStartDate,
+      endDate: calEndDate
+    });
+  };
+  const defaultFocusedDate = useMemo(() => {
+    if (!startDate && !endDate) return DateTime.now().toISODate();
+    if (!startDate) return endDate?.toISODate();
+    if (!endDate) return startDate?.toISODate();
+    if (endDate && !previousEndDate?.equals(endDate)) {
+      return endDate.toISODate();
+    } else if (startDate && !previousStartDate?.equals(startDate)) {
+      return startDate.toISODate();
+    }
+    if (endDate) return endDate.toISODate();
+    if (startDate) return startDate.toISODate();
+    return DateTime.now().toISODate();
+  }, [previousStartDate, previousEndDate, startDate, endDate]);
+  return /* @__PURE__ */ jsx(
+    Calendar,
+    {
+      range: true,
+      onKeyDown,
+      defaultFocusedDate,
+      value: {
+        start: startDate?.toISODate() || void 0,
+        end: endDate?.toISODate() || void 0
+      },
+      onSelection: handleCalendarSelection,
+      defaultTimeZone: "UTC",
+      minDate: minDate?.toISODate() ?? void 0,
+      maxDate: maxDate?.toISODate() ?? void 0,
+      unavailable: unavailable ? {
+        dates: unavailable.dates?.map((d) => d.toISODate() ?? ""),
+        daysOfWeek: unavailable.daysOfWeek
+      } : void 0,
+      _disableAutofocus: true
+    },
+    `${startDate?.toISODate()}-${endDate?.toISODate()}`
+  );
+};
+
+const DateFieldRange = ({
+  onFocus,
+  onBlur,
+  disableCalendar,
+  required,
+  mode,
+  value: valueProp,
+  defaultValue: defaultValueProp,
+  minDate: minDateProp,
+  maxDate: maxDateProp,
+  unavailable: unavailableProp,
+  onChange: onChangeProp,
+  ...rest
+}) => {
+  const { ref: wrapperRef } = useFocusWithin({
+    onBlur,
+    onFocus
+  });
+  const { value, defaultValue, minDate, maxDate, unavailable, onChange } = useDateFieldRangeConversion({
     value: valueProp,
-    mode = "mm/dd/yyyy",
     defaultValue: defaultValueProp,
-    onChange,
-    disableCalendar = false,
-    unavailable,
-    minDate,
-    maxDate,
-    required = false,
-    onFocus,
-    onBlur,
-    ...rest
-  }, ref) => {
-    const inputRef = useRef(null);
-    const [popoverTriggerRef, setPopoverTriggerRef] = useState();
-    const popoverContentRef = useRef(null);
-    const combinedRef = useMergeRefs([popoverTriggerRef, inputRef, ref]);
-    const [startDate, setStartDate] = useOptionallyControlledState({
-      controlledValue: valueProp !== void 0 ? valueProp?.startDate : void 0,
-      defaultValue: defaultValueProp !== void 0 ? defaultValueProp?.startDate : void 0
-    });
-    const [endDate, setEndDate] = useOptionallyControlledState(
-      {
-        controlledValue: valueProp !== void 0 ? valueProp?.endDate : void 0,
-        defaultValue: defaultValueProp !== void 0 ? defaultValueProp?.endDate : void 0
-      }
-    );
-    const previousStartDate = usePrevious(startDate);
-    const previousEndDate = usePrevious(endDate);
-    const popoverSupported = usePopoverSupport();
-    const {
-      calendarOpen,
-      setCalendarOpen,
-      handleCalendarKeyDown,
-      handleInputKeyDown
-    } = useDateFieldOrchestration({
-      inputRef,
-      calendarDefaultOpen: false,
-      popoverContentRef,
-      disableCalendar
+    minDate: minDateProp,
+    maxDate: maxDateProp,
+    unavailable: unavailableProp,
+    onChange: onChangeProp
+  });
+  const inputRef = useRef(null);
+  const [popoverTriggerRef, setPopoverTriggerRef] = useState();
+  const popoverContentRef = useRef(null);
+  const combinedRef = useMergeRefs([popoverTriggerRef, inputRef]);
+  const popoverSupported = usePopoverSupport();
+  const handleChange = (change) => {
+    const sharedConstraints = {
+      unavailable,
+      minDate: minDate ?? void 0,
+      maxDate: maxDate ?? void 0
+    };
+    onChange?.({
+      startDate: change.startDate?.startOf("day") ?? null,
+      endDate: change.endDate?.startOf("day") ?? null,
+      isInputValid: change.isInputValid,
+      isInputEmpty: change.isInputEmpty,
+      isDateRangeValid: validateDateRange({
+        required,
+        startDate: change.startDate?.startOf("day") ?? null,
+        endDate: change.endDate?.startOf("day") ?? null,
+        startDateConstraints: sharedConstraints,
+        endDateConstraints: sharedConstraints
+      })
     });
-    const shouldShowCalendar = usePopoverCloseDelayWorkaround(calendarOpen);
-    const isDateRangeValid = useMemo(() => {
-      return validateDate({
-        date: startDate ?? null,
-        constraints: {
-          required,
-          unavailable,
-          minDate: minDate ?? void 0,
-          maxDate: maxDate ?? void 0
-        }
-      }) && validateDate({
-        date: endDate ?? null,
-        constraints: {
-          required,
-          unavailable,
-          minDate: minDate ?? void 0,
-          maxDate: maxDate ?? void 0
-        }
-      }) && (!startDate || !endDate || startDate <= endDate);
-    }, [required, unavailable, minDate, maxDate, startDate, endDate]);
-    const defaultFocusedDate = useMemo(() => {
-      if (!startDate && !endDate) return DateTime.now().toISODate();
-      if (!startDate) return endDate?.toISODate();
-      if (!endDate) return startDate?.toISODate();
-      if (endDate && !previousEndDate?.equals(endDate)) {
-        return endDate.toISODate();
-      } else if (startDate && !previousStartDate?.equals(startDate)) {
-        return startDate.toISODate();
-      }
-      if (endDate) return endDate.toISODate();
-      if (startDate) return startDate.toISODate();
-      return DateTime.now().toISODate();
-    }, [previousStartDate, previousEndDate, startDate, endDate]);
-    const handleInputChange = (change) => {
-      const sharedConstraints = {
+  };
+  const { startDate, endDate, handleInputChange, handleCalendarSelection } = useDateFieldRangeState({
+    valueProp: value,
+    defaultValueProp: defaultValue,
+    inputRef,
+    onChange: handleChange
+  });
+  const {
+    calendarOpen,
+    setCalendarOpen,
+    handleCalendarKeyDown,
+    handleInputKeyDown
+  } = useDateFieldOrchestration({
+    inputRef,
+    calendarDefaultOpen: false,
+    popoverContentRef,
+    disableCalendar
+  });
+  const shouldShowCalendar = usePopoverCloseDelayWorkaround(calendarOpen);
+  const currentValidity = useMemo(() => {
+    return validateDateRange({
+      required,
+      startDate,
+      endDate,
+      startDateConstraints: {
+        unavailable,
+        minDate: minDate ?? void 0,
+        maxDate: maxDate ?? void 0
+      },
+      endDateConstraints: {
         unavailable,
         minDate: minDate ?? void 0,
         maxDate: maxDate ?? void 0
-      };
-      const range = change.isInputEmpty ? null : {
-        startDate: change.startDate?.startOf("day") ?? null,
-        endDate: change.endDate?.startOf("day") ?? null
-      };
-      setStartDate(range?.startDate ?? null);
-      setEndDate(range?.endDate ?? null);
-      onChange?.({
-        startDate: range?.startDate?.toISODate() ?? null,
-        endDate: range?.endDate?.toISODate() ?? null,
-        isInputValid: change.isInputValid,
-        isInputEmpty: change.isInputEmpty,
-        isDateRangeValid: validateDateRange({
-          required,
-          startDate: range?.startDate ?? null,
-          endDate: range?.endDate ?? null,
-          startDateConstraints: sharedConstraints,
-          endDateConstraints: sharedConstraints
-        })
-      });
-    };
-    const handleCalendarSelection = (data) => {
-      if (data.value) {
-        const calStartDate = data.value.start ? DateTime.fromISO(data.value.start, { zone: "utc" }) : null;
-        const calEndDate = data.value.end ? DateTime.fromISO(data.value.end, { zone: "utc" }) : null;
-        setStartDate(calStartDate);
-        setEndDate(calEndDate);
-        inputRef.current?.setDateRange(calStartDate, calEndDate);
-        const sharedConstraints = {
-          unavailable,
-          minDate: minDate ?? void 0,
-          maxDate: maxDate ?? void 0
-        };
-        onChange?.({
-          startDate: calStartDate?.toISODate() ?? null,
-          endDate: calEndDate?.toISODate() ?? null,
-          isInputValid: !!calStartDate && !!calEndDate,
-          isInputEmpty: !calStartDate && !calEndDate,
-          isDateRangeValid: validateDateRange({
-            required,
-            startDate: calStartDate,
-            endDate: calEndDate,
-            startDateConstraints: sharedConstraints,
-            endDateConstraints: sharedConstraints
-          })
-        });
-      }
-    };
-    const justTheField = /* @__PURE__ */ jsx(
-      MaskedDateRangeInput,
-      {
-        mode,
-        ref: combinedRef,
-        ...rest,
-        onChange: handleInputChange,
-        disableHint: rest.disableHint,
-        onKeyDown: handleInputKeyDown,
-        onClick: () => setCalendarOpen(true),
-        required,
-        autoComplete: "off",
-        "data-date-range-valid": isDateRangeValid,
-        startDate: startDate ?? null,
-        endDate: endDate ?? null
       }
-    );
-    if (disableCalendar) {
-      return justTheField;
-    }
-    if (!popoverSupported) {
-      return justTheField;
+    });
+  }, [required, startDate, endDate, minDate, maxDate, unavailable]);
+  const justTheField = /* @__PURE__ */ jsx(
+    MaskedDateRangeInput,
+    {
+      ...rest,
+      mode,
+      ref: combinedRef,
+      startDate: startDate ?? null,
+      endDate: endDate ?? null,
+      onChange: handleInputChange,
+      disableHint: rest.disableHint,
+      onKeyDown: handleInputKeyDown,
+      onClick: () => setCalendarOpen(true),
+      required,
+      autoComplete: "off",
+      "data-date-range-valid": currentValidity
     }
-    return /* @__PURE__ */ jsxs(
-      Popover,
-      {
-        open: calendarOpen,
-        modal: true,
-        placement: "bottom-start",
-        disableFlipFallback: true,
-        disableTriggerFocus: true,
-        onClose: () => setCalendarOpen(false),
-        disableAutoUpdate: true,
-        onOutsidePress: () => setCalendarOpen(false),
-        children: [
-          /* @__PURE__ */ jsx(Popover.Trigger, { children: ({ ref: iRef }) => {
-            setPopoverTriggerRef(iRef);
-            return justTheField;
-          } }),
-          /* @__PURE__ */ jsx(Popover.Content, { ref: popoverContentRef, "data-testid": "calendar-popover", children: shouldShowCalendar && /* @__PURE__ */ jsx(
-            Calendar,
-            {
-              range: true,
-              onKeyDown: handleCalendarKeyDown,
-              defaultFocusedDate,
-              value: {
-                start: startDate?.toISODate() || void 0,
-                end: endDate?.toISODate() || void 0
-              },
-              onSelection: handleCalendarSelection,
-              defaultTimeZone: "UTC",
-              minDate: minDate?.toISODate() ?? void 0,
-              maxDate: maxDate?.toISODate() ?? void 0,
-              unavailable: unavailable ? {
-                dates: unavailable.dates?.map((d) => d.toISODate() ?? ""),
-                daysOfWeek: unavailable.daysOfWeek
-              } : void 0,
-              _disableAutofocus: true
-            },
-            `${startDate?.toISODate()}-${endDate?.toISODate()}`
-          ) })
-        ]
-      }
-    );
+  );
+  if (disableCalendar) {
+    return justTheField;
   }
-);
-NormalizedDateFieldRange.displayName = "NormalizedDateFieldRange";
+  if (!popoverSupported) {
+    return justTheField;
+  }
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, children: /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open: calendarOpen,
+      modal: true,
+      placement: "bottom-start",
+      disableFlipFallback: true,
+      disableTriggerFocus: true,
+      onClose: () => setCalendarOpen(false),
+      disableAutoUpdate: true,
+      onOutsidePress: () => setCalendarOpen(false),
+      children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { children: ({ ref: iRef }) => {
+          setPopoverTriggerRef(iRef);
+          return justTheField;
+        } }),
+        /* @__PURE__ */ jsx(Popover.Content, { ref: popoverContentRef, "data-testid": "calendar-popover", children: shouldShowCalendar && /* @__PURE__ */ jsx(
+          DateFieldRangeCalendar,
+          {
+            startDate,
+            endDate,
+            onKeyDown: handleCalendarKeyDown,
+            onSelection: handleCalendarSelection,
+            minDate,
+            maxDate,
+            unavailable
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+DateFieldRange.displayName = "DateFieldRange";
 function validateDateRange({
   required,
   startDate,
@@ -2836,81 +2980,6 @@ function validateDateRange({
   }) && (!startDate || !endDate || startDate <= endDate);
 }
 
-const DateFieldRange = ({
-  value,
-  defaultValue,
-  minDate,
-  maxDate,
-  unavailable,
-  onChange,
-  onFocus,
-  onBlur,
-  ...rest
-}) => {
-  const handleBlur = useCallback(
-    (event) => {
-      onBlur?.(event);
-    },
-    [onBlur]
-  );
-  const handleFocus = useCallback(
-    (event) => {
-      onFocus?.(event);
-    },
-    [onFocus]
-  );
-  const { ref: wrapperRef } = useFocusWithin({
-    onBlur: handleBlur,
-    onFocus: handleFocus
-  });
-  const normalizedValue = useMemo(
-    () => value !== void 0 ? {
-      startDate: convertStringToDate(value?.startDate ?? null) ?? null,
-      endDate: convertStringToDate(value?.endDate ?? null) ?? null
-    } : void 0,
-    [value]
-  );
-  const normalizedDefaultValue = useMemo(
-    () => defaultValue !== void 0 ? {
-      startDate: convertStringToDate(defaultValue?.startDate ?? null) ?? null,
-      endDate: convertStringToDate(defaultValue?.endDate ?? null) ?? null
-    } : void 0,
-    [defaultValue]
-  );
-  const normalizedMinDate = useMemo(
-    () => convertStringToDate(minDate),
-    [minDate]
-  );
-  const normalizedMaxDate = useMemo(
-    () => convertStringToDate(maxDate),
-    [maxDate]
-  );
-  const normalizedUnavailableDates = useMemo(
-    () => unavailable?.dates?.map((d) => convertStringToDate(d)).filter((d) => d !== null && d !== void 0),
-    [unavailable?.dates]
-  );
-  const handleChange = useConditionalChange({
-    changeHandler: onChange,
-    compareFn: (a, b) => a.isInputValid !== b.isInputValid || a.isInputEmpty !== b.isInputEmpty || a.isDateRangeValid !== b.isDateRangeValid || a.startDate !== b.startDate || a.endDate !== b.endDate
-  });
-  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, children: /* @__PURE__ */ jsx(
-    NormalizedDateFieldRange,
-    {
-      ...rest,
-      value: normalizedValue,
-      defaultValue: normalizedDefaultValue,
-      minDate: normalizedMinDate,
-      maxDate: normalizedMaxDate,
-      unavailable: unavailable ? {
-        dates: normalizedUnavailableDates,
-        daysOfWeek: unavailable?.daysOfWeek
-      } : void 0,
-      onChange: handleChange
-    }
-  ) });
-};
-DateFieldRange.displayName = "DateFieldRange";
-
 const yearlessDatePlaceholderMask = ({
   mode,
   separator = "/",
@@ -3060,6 +3129,24 @@ function stringifyYearlessDate(day, month, mode) {
   return `${mm}/${dd}`;
 }
 
+const useConditionalChange = ({
+  changeHandler,
+  compareFn
+}) => {
+  const lastChangeRef = useRef(null);
+  const onChange = useCallback(
+    (change) => {
+      if (!!lastChangeRef.current && !compareFn(lastChangeRef.current, change)) {
+        return;
+      }
+      changeHandler?.(change);
+      lastChangeRef.current = change;
+    },
+    [changeHandler, compareFn]
+  );
+  return onChange;
+};
+
 const DateFieldYearless = ({
   value: valueProp,
   defaultValue: defaultValueProp,
@@ -3122,4 +3209,4 @@ const DateFieldYearless = ({
 DateFieldYearless.displayName = "DateFieldYearless";
 
 export { DateFieldRange as D, DateFieldSingle as a, DateFieldYearless as b };
-//# sourceMappingURL=DateFieldYearless-CJP3H_Dg-BV5wGJp1.js.map
+//# sourceMappingURL=DateFieldYearless-DU0z2fEA-ByR2ixI5.js.map