@servicetitan/anvil2 1.28.0 → 1.30.0

package/dist/{DateField-5mNXaJ7q.js → DateField-Be6t2RVY.js}

@@ -3,13 +3,14 @@ import * as React from 'react';
 import { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
 import { useTrackingId } from './useTrackingId.js';
 import { c as childrenToString } from './childrenToString-Bz9MqbHb-Bz9MqbHb.js';
-import { I as InputMask } from './InputMask-CQzrMoEy-CLNvXsm7.js';
-import { T as TextField } from './TextField-Lwe9XAou-tH8gcQTq.js';
-import { D as DateTime, t as toDateString, i as isValidDate, C as Calendar } from './Calendar-9iYMS0Iw-D_XWYjOE.js';
-import { I as Icon } from './Icon-DbHA5GV1-DwO2aGkj.js';
+import { I as InputMask } from './InputMask-Dl8W0R4F-CFgFWCfT.js';
+import { D as DateTime, t as toDateString, i as isValidDate, C as Calendar } from './Calendar-CP8UPUg1-yIJxH8G4.js';
+import { I as Icon } from './Icon-CBPJUFc8-vsWbtf2w.js';
 import { s as supportsPopover } from './supportsPopover-8aJR37cf-8aJR37cf.js';
-import { e as PopoverLegacy, d as Popover } from './Popover-C1B3UJXp-B5obSIvA.js';
+import { T as TextField } from './TextField-D5PH3ElU-CBDiTprI.js';
+import { e as PopoverLegacy, d as Popover } from './Popover-BtFSJ9la-B2Bq0bTL.js';
 import { u as useMergeRefs } from './floating-ui.react-4AwURJA3.js';
+import { u as useKeyboardFocusables } from './useKeyboardFocusables-CwVMAe5C-DtjYOAmt.js';
 import { u as useMergeRefs$1 } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
 
 const SvgEvent = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M16 13h-3c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1zm0-10v1H8V3c0-.55-.45-1-1-1s-1 .45-1 1v1H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-1V3c0-.55-.45-1-1-1s-1 .45-1 1zm2 17H6c-.55 0-1-.45-1-1V9h14v10c0 .55-.45 1-1 1z" }));
@@ -540,7 +541,7 @@ const DateFieldLegacy = forwardRef(
 );
 DateFieldLegacy.displayName = "DateFieldLegacy";
 
-const RANGE_DIVIDER = " — ";
+const RANGE_DIVIDER = " – ";
 const DateField$1 = forwardRef(
   (props, ref) => {
     const {
@@ -549,6 +550,7 @@ const DateField$1 = forwardRef(
       onFocus,
       onBlur,
       onChange,
+      onClick,
       format = "MM/dd/yyyy",
       disableHint,
       // Calendar
@@ -575,72 +577,40 @@ const DateField$1 = forwardRef(
       _setOpen(val);
     };
     const [internalValue, setInternalValue] = useState();
-    const [disableFocusLock, setDisableFocusLock] = useState(true);
     const inputRef = useRef(null);
-    const calRef = useRef(null);
-    const iconRef = useRef(null);
-    const docRef = useRef(null);
-    const floatRef = useRef(null);
-    const isClickOutside = useRef(false);
-    const formatMask = format.replace(/[^/]/g, "_");
+    const popperRef = useRef(null);
+    const documentRef = useRef(document.body);
     const hint = useMemo(
       () => disableHint ? undefined : `format: ${format.replace(/M/g, "m")}`,
       [format, disableHint]
     );
+    const { focusables } = useKeyboardFocusables(documentRef, {
+      observeChange: true
+    });
+    const { focusables: popoverFocusables } = useKeyboardFocusables(popperRef, {
+      observeChange: true
+    });
+    const pageFocusables = focusables?.filter(
+      (item) => !popoverFocusables?.includes(item)
+    );
+    const [popoverRef, setPopoverRef] = useState();
+    const combinedRef = useMergeRefs$1([popoverRef, inputRef]);
     useEffect(() => {
-      if (!docRef.current) {
-        if (document != null) {
-          docRef.current = document;
-          return;
-        }
-        const doc = inputRef.current?.closest("body")?.ownerDocument;
-        doc && (docRef.current = doc);
-        if (docRef.current == null && inputRef.current?.parentNode != null) {
-          let node = inputRef.current?.parentNode;
-          while (node.parentNode != null) {
-            node = node.parentNode;
-          }
-          docRef.current = node;
-        }
-      }
-      const clickOutHandler = (ev) => {
-        const realTarget = ev.composedPath()[0];
-        if (!floatRef.current?.contains(realTarget) && !iconRef.current?.contains(realTarget) && inputRef.current !== realTarget) {
-          setOpen(false);
-          setDisableFocusLock(true);
-          onBlur?.(ev);
-        }
-      };
-      if (open) {
-        docRef.current?.addEventListener("click", clickOutHandler);
-      } else {
-        docRef.current?.removeEventListener("click", clickOutHandler);
-      }
-      return () => {
-        docRef.current?.removeEventListener("click", clickOutHandler);
-      };
-    }, [open, onBlur]);
-    useEffect(() => {
+      if (!defaultValue) return;
       if (range) {
-        let start;
-        let end;
-        if (typeof inputValue === "string") {
-          const parts = inputValue.split(RANGE_DIVIDER);
-          start = parts[0];
-          end = parts[1];
-        } else {
-          start = inputValue?.start ?? "";
-          end = inputValue?.end ?? "";
-        }
-        const startDate = DateTime.fromFormat(start ?? "", format, {
-          zone: defaultTimeZone
-        }).startOf("day");
-        const endDate = DateTime.fromFormat(end ?? "", format, {
+        const startDate = DateTime.fromFormat(
+          defaultValue.start ?? "",
+          format,
+          {
+            zone: defaultTimeZone
+          }
+        ).startOf("day");
+        const endDate = DateTime.fromFormat(defaultValue.end ?? "", format, {
           zone: defaultTimeZone
         }).startOf("day");
-        const newData = {
+        const newValue2 = {
           start: {
-            value: start,
+            value: defaultValue.start ?? "",
             date: toDateString(startDate),
             isValid: startDate.isValid && isValidDate(
               startDate,
@@ -655,7 +625,7 @@ const DateField$1 = forwardRef(
             )
           },
           end: {
-            value: end,
+            value: defaultValue.end ?? "",
             date: toDateString(endDate),
             isValid: startDate.isValid && isValidDate(
               endDate,
@@ -669,105 +639,87 @@ const DateField$1 = forwardRef(
               defaultTimeZone
             )
           },
-          value: `${start || formatMask}${RANGE_DIVIDER}${end || formatMask}`
+          value: defaultValue.start + RANGE_DIVIDER + defaultValue.end
         };
-        setInternalValue(newData);
-      } else {
-        if (typeof inputValue !== "string") return;
-        const inputDate = DateTime.fromFormat(inputValue, format, {
-          zone: defaultTimeZone
-        }).startOf("day");
-        const newData = {
-          value: inputValue,
-          date: toDateString(inputDate),
-          isValid: inputDate.isValid && isValidDate(
-            inputDate,
-            minDate,
-            maxDate,
-            new Set(unavailableDates || unavailable?.dates),
-            {
-              dates: new Set(unavailable?.dates),
-              daysOfWeek: new Set(unavailable?.daysOfWeek)
-            },
-            defaultTimeZone
-          )
-        };
-        setInternalValue(newData);
-      }
-    }, [inputValue]);
-    const mask = useMemo(() => {
-      const maskPart = format.replace(/[Mdy]/g, "9");
-      if (range) {
-        return maskPart + RANGE_DIVIDER + maskPart;
-      } else {
-        return maskPart;
+        setInternalValue(newValue2);
+        return;
       }
-    }, [format, range]);
-    useEffect(() => {
-      if (typeof inputValue === "string") return;
-      if (defaultValue) {
+      const date = DateTime.fromFormat(defaultValue, format, {
+        zone: defaultTimeZone
+      }).startOf("day");
+      const newValue = {
+        value: defaultValue,
+        date: toDateString(date),
+        isValid: date.isValid && isValidDate(
+          date,
+          minDate,
+          maxDate,
+          new Set(unavailableDates || unavailable?.dates),
+          {
+            dates: new Set(unavailable?.dates),
+            daysOfWeek: new Set(unavailable?.daysOfWeek)
+          },
+          defaultTimeZone
+        )
+      };
+      setInternalValue(newValue);
+    }, []);
+    const getCurrentValue = () => {
+      if (inputValue !== undefined) {
         if (range) {
-          const defValStart = defaultValue.start;
-          const defValEnd = defaultValue.end;
-          const initValStart = defValStart + (formatMask + RANGE_DIVIDER + formatMask).slice(
-            defValStart?.length
-          );
-          const initValEnd = defValEnd + (formatMask + RANGE_DIVIDER + formatMask).slice(defValEnd?.length);
-          const newValue = initValStart + RANGE_DIVIDER + initValEnd;
-          const inputDateStart = DateTime.fromFormat(
-            defValStart || "",
+          const startDate = DateTime.fromFormat(
+            inputValue.start ?? "",
             format,
             {
               zone: defaultTimeZone
             }
           ).startOf("day");
-          const inputDateEnd = DateTime.fromFormat(defValEnd || "", format, {
+          const endDate = DateTime.fromFormat(inputValue.end ?? "", format, {
             zone: defaultTimeZone
           }).startOf("day");
-          const isValidStart = inputDateStart.isValid && isValidDate(
-            inputDateStart,
-            minDate,
-            maxDate,
-            new Set(unavailableDates || unavailable?.dates),
-            {
-              dates: new Set(unavailable?.dates),
-              daysOfWeek: new Set(unavailable?.daysOfWeek)
-            },
-            defaultTimeZone
-          );
-          const isValidEnd = inputDateEnd.isValid && isValidDate(
-            inputDateEnd,
-            minDate,
-            maxDate,
-            new Set(unavailableDates || unavailable?.dates),
-            {
-              dates: new Set(unavailable?.dates),
-              daysOfWeek: new Set(unavailable?.daysOfWeek)
-            },
-            defaultTimeZone
-          );
-          const initCalendarValue = {
+          const returnValue = {
             start: {
-              value: initValStart,
-              date: toDateString(inputDateStart),
-              isValid: isValidStart
+              value: inputValue.start ?? "",
+              date: toDateString(startDate),
+              isValid: startDate.isValid && isValidDate(
+                startDate,
+                minDate,
+                maxDate,
+                new Set(unavailableDates || unavailable?.dates),
+                {
+                  dates: new Set(unavailable?.dates),
+                  daysOfWeek: new Set(unavailable?.daysOfWeek)
+                },
+                defaultTimeZone
+              )
             },
             end: {
-              value: initValEnd,
-              date: toDateString(inputDateEnd),
-              isValid: isValidEnd
+              value: inputValue.end ?? "",
+              date: toDateString(endDate),
+              isValid: startDate.isValid && isValidDate(
+                endDate,
+                minDate,
+                maxDate,
+                new Set(unavailableDates || unavailable?.dates),
+                {
+                  dates: new Set(unavailable?.dates),
+                  daysOfWeek: new Set(unavailable?.daysOfWeek)
+                },
+                defaultTimeZone
+              )
             },
-            value: newValue
+            value: inputValue.start + RANGE_DIVIDER + inputValue.end
           };
-          setInternalValue(initCalendarValue);
-        } else {
-          const defVal = defaultValue;
-          const initVal = defVal + formatMask.slice(defVal.length);
-          const inputDate = DateTime.fromFormat(defVal, format, {
-            zone: defaultTimeZone
-          }).startOf("day");
-          const isValid = inputDate.isValid && isValidDate(
-            inputDate,
+          return returnValue;
+        }
+        const date = DateTime.fromFormat(inputValue, format, {
+          zone: defaultTimeZone
+        }).startOf("day");
+        return {
+          value: inputValue,
+          date: toDateString(date),
+          isValid: date.isValid && isValidDate(
+            date,
             minDate,
             maxDate,
             new Set(unavailableDates || unavailable?.dates),
@@ -776,38 +728,73 @@ const DateField$1 = forwardRef(
               daysOfWeek: new Set(unavailable?.daysOfWeek)
             },
             defaultTimeZone
-          );
-          const initCalendarValue = {
-            value: initVal,
-            date: toDateString(inputDate),
-            isValid
-          };
-          setInternalValue(initCalendarValue);
-        }
+          )
+        };
       }
-    }, []);
-    const focusToCalendar = () => {
-      if (calRef.current) {
-        const currentFocusable = calRef.current.querySelectorAll('[tabindex = "0"]')[0];
-        if (currentFocusable) {
-          currentFocusable.focus();
-        }
+      return internalValue;
+    };
+    const handleInputFocus = (ev) => {
+      onFocus?.(ev);
+    };
+    const handleInputBlur = (ev) => {
+      if (!popperRef.current?.contains(ev.relatedTarget)) {
+        setOpen(false);
+        onBlur?.(ev);
       }
     };
     const handleInputKeyDown = (ev) => {
+      let currentFocusIndex = 0;
       switch (ev.key) {
+        case "Escape":
+          setOpen(false);
+          break;
         case "Tab":
+          if (!open || !pageFocusables?.length) {
+            break;
+          }
+          ev.preventDefault();
+          currentFocusIndex = pageFocusables.indexOf(inputRef.current) || 0;
           setOpen(false);
+          if (ev.shiftKey) {
+            if (currentFocusIndex === 0) {
+              requestAnimationFrame(
+                () => pageFocusables[pageFocusables.length - 1].focus()
+              );
+            } else {
+              requestAnimationFrame(
+                () => pageFocusables[currentFocusIndex - 1].focus()
+              );
+            }
+            break;
+          }
+          if (pageFocusables.length > currentFocusIndex + 1) {
+            requestAnimationFrame(
+              () => pageFocusables[currentFocusIndex + 1].focus()
+            );
+          } else {
+            requestAnimationFrame(() => pageFocusables[0].focus());
+          }
           break;
         case "ArrowDown":
           if (!open) {
             setOpen(true);
-            setTimeout(focusToCalendar, 100);
+            setTimeout(focusToCalendar, 200);
           } else {
             focusToCalendar();
           }
       }
     };
+    const handleCalendarKeyDown = (ev) => {
+      switch (ev.key) {
+        case "Escape":
+          setOpen(false);
+          inputRef.current?.focus();
+      }
+    };
+    const handleInputClick = (ev) => {
+      setOpen(true);
+      onClick?.(ev);
+    };
     const handleInputChange = (ev) => {
       if (range) {
         const parts = ev.target.value.split(RANGE_DIVIDER);
@@ -851,198 +838,226 @@ const DateField$1 = forwardRef(
           },
           value: ev.target.value
         };
-        if (!inputValue) {
-          setInternalValue(returnValue);
-        }
+        setInternalValue(returnValue);
         onChange?.(ev, returnValue);
-      } else {
-        if (ev.target.value === internalValue?.date) return;
-        const inputDate = DateTime.fromFormat(ev.target.value, format, {
-          zone: defaultTimeZone
-        }).startOf("day");
-        const returnValue = {
-          value: ev.target.value,
-          date: toDateString(inputDate),
-          isValid: inputDate.isValid && isValidDate(
-            inputDate,
-            minDate,
-            maxDate,
-            new Set(unavailableDates || unavailable?.dates),
-            {
-              dates: new Set(unavailable?.dates),
-              daysOfWeek: new Set(unavailable?.daysOfWeek)
-            },
-            defaultTimeZone
-          )
-        };
-        if (!inputValue) {
-          setInternalValue(returnValue);
-        }
-        onChange?.(ev, returnValue);
-      }
-    };
-    const handleInputBlur = (ev) => {
-      if (isClickOutside.current) {
-        isClickOutside.current = false;
         return;
       }
-      if (!calRef.current?.contains(ev.relatedTarget)) {
-        setOpen(false);
-        onBlur?.(ev);
-      }
-    };
-    const handleCalendarKeyDown = (ev) => {
-      switch (ev.key) {
-        case "Escape":
-          setDisableFocusLock(true);
-          inputRef.current?.focus();
-          break;
-      }
-    };
-    const handleCalendarBlur = (ev) => {
-      if (!(inputRef.current === ev.currentTarget || calRef.current === ev.currentTarget)) {
-        setOpen(false);
-        onBlur?.(ev);
-      }
-      if (!(calRef.current === ev.currentTarget)) {
-        setDisableFocusLock(true);
-      }
-    };
-    const handleCalendarFocus = (ev) => {
-      disableFocusLock && setDisableFocusLock(false);
+      const date = DateTime.fromFormat(ev.target.value, format, {
+        zone: defaultTimeZone
+      }).startOf("day");
+      const newDate = {
+        value: ev.target.value,
+        date: toDateString(date),
+        isValid: date.isValid && isValidDate(
+          date,
+          minDate,
+          maxDate,
+          new Set(unavailableDates || unavailable?.dates),
+          {
+            dates: new Set(unavailable?.dates),
+            daysOfWeek: new Set(unavailable?.daysOfWeek)
+          },
+          defaultTimeZone
+        )
+      };
+      setInternalValue(newDate);
+      onChange?.(ev, newDate);
     };
     const handleCalendarSelection = (data) => {
       if (range) {
-        const calSelectData = data;
-        const startVal = DateTime.fromISO(calSelectData?.value?.start || "", {
+        const startDate = data.value?.start ?? "";
+        const endDate = data.value?.end ?? "";
+        const startVal = DateTime.fromISO(startDate, {
           zone: defaultTimeZone
         });
-        const endVal = DateTime.fromISO(calSelectData?.value?.end || "", {
+        const startValue = startVal.toFormat(format);
+        const endVal = DateTime.fromISO(endDate, {
           zone: defaultTimeZone
         });
-        let newValue = "";
-        const newInternalValue = { value: "" };
-        if (startVal.isValid) {
-          newInternalValue.start = {
-            value: startVal.toFormat(format),
-            date: calSelectData?.value?.start,
+        const endValue = endVal.toFormat(format);
+        const newDateRange = {
+          start: {
+            value: startValue,
+            date: startDate,
             isValid: true
-          };
-          newValue += startVal.toFormat(format);
-        } else {
-          newValue += formatMask;
-        }
-        newValue += RANGE_DIVIDER;
-        if (endVal.isValid) {
-          newInternalValue.end = {
-            value: endVal.toFormat(format),
-            date: calSelectData?.value?.end,
+          },
+          end: {
+            value: endValue,
+            date: endDate,
             isValid: true
-          };
-          newValue += endVal.toFormat(format);
-        } else {
-          newValue += formatMask;
-        }
-        if (typeof inputValue !== "string") {
-          setInternalValue(newInternalValue);
-        }
-        newInternalValue.value = newValue;
-        const event = {
-          target: {
-            value: newValue
-          }
-        };
-        onChange?.(event, newInternalValue);
-      } else {
-        const calSelectData = data;
-        const val = DateTime.fromISO(calSelectData.value || "", {
-          zone: defaultTimeZone
-        });
-        const newValue = val.toFormat(format);
-        const newInternalValue = {
-          value: newValue,
-          date: calSelectData.value,
-          isValid: val.isValid && isValidDate(
-            val,
-            minDate,
-            maxDate,
-            new Set(unavailableDates || unavailable?.dates),
-            {
-              dates: new Set(unavailable?.dates),
-              daysOfWeek: new Set(unavailable?.daysOfWeek)
-            },
-            defaultTimeZone
-          )
+          },
+          value: startValue + RANGE_DIVIDER + endValue
         };
-        if (typeof inputValue !== "string") {
-          setInternalValue(newInternalValue);
-        }
-        const event = {
+        setInternalValue(newDateRange);
+        const event2 = {
           target: {
-            value: newValue
+            value: startValue + RANGE_DIVIDER + endValue
           }
         };
-        onChange?.(event, newInternalValue);
+        handleInputChange(event2);
+        return;
       }
+      const date = data.value;
+      const val = DateTime.fromISO(date || "", {
+        zone: defaultTimeZone
+      });
+      const value = val.toFormat(format);
+      const newDate = {
+        value,
+        date,
+        isValid: true
+      };
+      setInternalValue(newDate);
+      const event = {
+        target: {
+          value
+        }
+      };
+      handleInputChange(event);
     };
-    const handleInputFocus = (ev) => {
-      if (!open) {
-        setOpen(true);
-        onFocus?.(ev);
+    const focusToCalendar = () => {
+      if (popperRef.current) {
+        const currentFocusable = popperRef.current.querySelectorAll('[tabindex = "0"]')[0];
+        if (currentFocusable) {
+          currentFocusable.focus();
+        }
       }
     };
-    const [popoverRef, setPopoverRef] = useState();
-    const combinedRef = useMergeRefs$1([popoverRef, inputRef]);
+    const handleClickOutside = () => {
+      setOpen(false);
+    };
+    const currentValue = getCurrentValue();
     if (!supportsPopover())
       return /* @__PURE__ */ jsx(DateFieldLegacy, { ...props, ref });
     return /* @__PURE__ */ jsxs(
       Popover,
       {
-        open: openCalendar || open,
+        open: openCalendar ?? open,
         modal: true,
         placement: "bottom-start",
         disableTriggerFocus: true,
-        disableFocusLock,
+        onOutsidePress: handleClickOutside,
         children: [
           /* @__PURE__ */ jsx(Popover.Trigger, { children: ({ ref: iRef, ...props2 }) => {
             setPopoverRef(iRef);
-            return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            return range ? /* @__PURE__ */ jsx(
               InputMask,
               {
-                mask,
+                mask: "99/99/9999" + RANGE_DIVIDER + "99/99/9999",
+                ref: combinedRef,
+                onChange: handleInputChange,
+                value: currentValue?.value,
                 inputProps: {
-                  onKeyDown: handleInputKeyDown,
+                  onFocus: handleInputFocus,
+                  prefix: /* @__PURE__ */ jsx(Icon, { svg: SvgEvent }),
                   onBlur: handleInputBlur,
-                  onChange: handleInputChange,
-                  onFocus: handleInputFocus
+                  onKeyDown: handleInputKeyDown,
+                  onClick: handleInputClick,
+                  hint,
+                  ...inputProps
                 },
-                value: internalValue?.value || "",
-                ...props2,
+                customMaskHandler: [
+                  {
+                    match: {
+                      matchPattern: new RegExp(/^(\d)\//),
+                      startPosition: 0,
+                      endPosition: 2
+                    },
+                    apply: {
+                      applyPattern: "0$1",
+                      caretOffset: 2
+                    }
+                  },
+                  {
+                    match: {
+                      matchPattern: new RegExp(/^(\d)\//),
+                      startPosition: 3,
+                      endPosition: 5
+                    },
+                    apply: {
+                      applyPattern: "0$1",
+                      caretOffset: 2
+                    }
+                  },
+                  {
+                    match: {
+                      matchPattern: new RegExp(/^(\d)\//),
+                      startPosition: 13,
+                      endPosition: 15
+                    },
+                    apply: {
+                      applyPattern: "0$1",
+                      caretOffset: 2
+                    }
+                  },
+                  {
+                    match: {
+                      matchPattern: new RegExp(/^(\d)\//),
+                      startPosition: 16,
+                      endPosition: 18
+                    },
+                    apply: {
+                      applyPattern: "0$1",
+                      caretOffset: 2
+                    }
+                  }
+                ]
+              }
+            ) : /* @__PURE__ */ jsx(
+              InputMask,
+              {
+                mask: "99/99/9999",
                 ref: combinedRef,
-                children: /* @__PURE__ */ jsx(
-                  TextField,
+                onChange: handleInputChange,
+                value: currentValue?.value,
+                inputProps: {
+                  onFocus: handleInputFocus,
+                  prefix: /* @__PURE__ */ jsx(Icon, { svg: SvgEvent }),
+                  onBlur: handleInputBlur,
+                  onKeyDown: handleInputKeyDown,
+                  onClick: handleInputClick,
+                  hint,
+                  autoComplete: "off",
+                  ...inputProps
+                },
+                customMaskHandler: [
+                  {
+                    match: {
+                      matchPattern: new RegExp(/^(\d)\//),
+                      startPosition: 0,
+                      endPosition: 2
+                    },
+                    apply: {
+                      applyPattern: "0$1",
+                      caretOffset: 2
+                    }
+                  },
                   {
-                    hint,
-                    ref,
-                    prefix: /* @__PURE__ */ jsx(Icon, { svg: SvgEvent, ref: iconRef }),
-                    ...inputProps,
-                    required
+                    match: {
+                      matchPattern: new RegExp(/^(\d)\//),
+                      startPosition: 3,
+                      endPosition: 5
+                    },
+                    apply: {
+                      applyPattern: "0$1",
+                      caretOffset: 2
+                    }
                   }
-                )
+                ]
               }
-            ) });
+            );
           } }),
-          /* @__PURE__ */ jsx(Popover.Content, { ref: floatRef, children: !range ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Popover.Content, { ref: popperRef, "data-calendar-popover": true, children: range ? /* @__PURE__ */ jsx(
             Calendar,
             {
-              ref: calRef,
+              range: true,
               onKeyDown: handleCalendarKeyDown,
-              defaultFocusedDate: internalValue?.date,
-              value: internalValue?.date || undefined,
-              locale,
-              onBlur: handleCalendarBlur,
+              defaultFocusedDate: internalValue?.start?.date,
+              value: {
+                start: currentValue?.start?.date || undefined,
+                end: currentValue?.end?.date || undefined
+              },
               onSelection: handleCalendarSelection,
-              onFocus: handleCalendarFocus,
               minDate,
               maxDate,
               unavailableDates,
@@ -1053,24 +1068,16 @@ const DateField$1 = forwardRef(
           ) : /* @__PURE__ */ jsx(
             Calendar,
             {
-              ref: calRef,
               onKeyDown: handleCalendarKeyDown,
-              defaultFocusedDate: internalValue?.start?.date,
-              value: internalValue ? {
-                start: internalValue?.start?.date || undefined,
-                end: internalValue?.end?.date || undefined
-              } : undefined,
-              locale,
-              onBlur: handleCalendarBlur,
+              defaultFocusedDate: internalValue?.date,
+              value: currentValue?.date || undefined,
               onSelection: handleCalendarSelection,
-              onFocus: handleCalendarFocus,
               minDate,
               maxDate,
               unavailableDates,
               unavailable,
               defaultTimeZone,
-              startDay,
-              range: true
+              startDay
             }
           ) })
         ]
@@ -1099,4 +1106,4 @@ const DateField = forwardRef(
 );
 
 export { DateField as D };
-//# sourceMappingURL=DateField-5mNXaJ7q.js.map
+//# sourceMappingURL=DateField-Be6t2RVY.js.map