@servicetitan/anvil2 1.27.2 → 1.29.0

package/dist/DateField-4jR9NvbC.js

@@ -0,0 +1,1109 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+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-B8N8PP1W-DlUKpMR4.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 { s as supportsPopover } from './supportsPopover-8aJR37cf-8aJR37cf.js';
+import { T as TextField } from './TextField-B8LHWOoC-DSV9zY-z.js';
+import { e as PopoverLegacy, d as Popover } from './Popover-tu_N1aS6-CSLR1Xzc.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" }));
+
+const RANGE_DIVIDER$1 = " — ";
+const DateFieldLegacy = forwardRef(
+  ({
+    // DateFieldLegacy
+    openCalendar,
+    onFocus,
+    onBlur,
+    onChange,
+    format = "MM/dd/yyyy",
+    disableHint,
+    // Calendar
+    minDate,
+    maxDate,
+    unavailableDates,
+    unavailable,
+    startDay,
+    defaultValue,
+    value: inputValue,
+    // Shared
+    locale = Intl.DateTimeFormat().resolvedOptions().locale,
+    defaultTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
+    range,
+    // Input
+    required,
+    ...inputProps
+  }, ref) => {
+    const [open, setOpen] = useState(openCalendar || false);
+    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 hint = useMemo(
+      () => disableHint ? undefined : `format: ${format.replace(/M/g, "m")}`,
+      [format, disableHint]
+    );
+    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 (range) {
+        let start;
+        let end;
+        if (typeof inputValue === "string") {
+          const parts = inputValue.split(RANGE_DIVIDER$1);
+          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, {
+          zone: defaultTimeZone
+        }).startOf("day");
+        const newData = {
+          start: {
+            value: 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: 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: `${start || formatMask}${RANGE_DIVIDER$1}${end || formatMask}`
+        };
+        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$1 + maskPart;
+      } else {
+        return maskPart;
+      }
+    }, [format, range]);
+    useEffect(() => {
+      if (typeof inputValue === "string") return;
+      if (defaultValue) {
+        if (range) {
+          const defValStart = defaultValue.start;
+          const defValEnd = defaultValue.end;
+          const initValStart = defValStart + (formatMask + RANGE_DIVIDER$1 + formatMask).slice(
+            defValStart?.length
+          );
+          const initValEnd = defValEnd + (formatMask + RANGE_DIVIDER$1 + formatMask).slice(defValEnd?.length);
+          const newValue = initValStart + RANGE_DIVIDER$1 + initValEnd;
+          const inputDateStart = DateTime.fromFormat(
+            defValStart || "",
+            format,
+            {
+              zone: defaultTimeZone
+            }
+          ).startOf("day");
+          const inputDateEnd = DateTime.fromFormat(defValEnd || "", 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 = {
+            start: {
+              value: initValStart,
+              date: toDateString(inputDateStart),
+              isValid: isValidStart
+            },
+            end: {
+              value: initValEnd,
+              date: toDateString(inputDateEnd),
+              isValid: isValidEnd
+            },
+            value: newValue
+          };
+          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,
+            minDate,
+            maxDate,
+            new Set(unavailableDates || unavailable?.dates),
+            {
+              dates: new Set(unavailable?.dates),
+              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();
+        }
+      }
+    };
+    const handleInputKeyDown = (ev) => {
+      switch (ev.key) {
+        case "Tab":
+          setOpen(false);
+          break;
+        case "ArrowDown":
+          if (!open) {
+            setOpen(true);
+            setTimeout(focusToCalendar, 100);
+          } else {
+            focusToCalendar();
+          }
+      }
+    };
+    const handleInputChange = (ev) => {
+      if (range) {
+        const parts = ev.target.value.split(RANGE_DIVIDER$1);
+        if (parts.length !== 2) return;
+        const startDate = DateTime.fromFormat(parts[0], format, {
+          zone: defaultTimeZone
+        }).startOf("day");
+        const endDate = DateTime.fromFormat(parts[1], format, {
+          zone: defaultTimeZone
+        }).startOf("day");
+        const returnValue = {
+          start: {
+            value: parts[0],
+            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: parts[1],
+            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: ev.target.value
+        };
+        if (!inputValue) {
+          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 handleCalendarSelection = (data) => {
+      if (range) {
+        const calSelectData = data;
+        const startVal = DateTime.fromISO(calSelectData?.value?.start || "", {
+          zone: defaultTimeZone
+        });
+        const endVal = DateTime.fromISO(calSelectData?.value?.end || "", {
+          zone: defaultTimeZone
+        });
+        let newValue = "";
+        const newInternalValue = { value: "" };
+        if (startVal.isValid) {
+          newInternalValue.start = {
+            value: startVal.toFormat(format),
+            date: calSelectData?.value?.start,
+            isValid: true
+          };
+          newValue += startVal.toFormat(format);
+        } else {
+          newValue += formatMask;
+        }
+        newValue += RANGE_DIVIDER$1;
+        if (endVal.isValid) {
+          newInternalValue.end = {
+            value: endVal.toFormat(format),
+            date: calSelectData?.value?.end,
+            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
+          )
+        };
+        if (typeof inputValue !== "string") {
+          setInternalValue(newInternalValue);
+        }
+        const event = {
+          target: {
+            value: newValue
+          }
+        };
+        onChange?.(event, newInternalValue);
+      }
+    };
+    const handleInputFocus = (ev) => {
+      if (!open) {
+        setOpen(true);
+        onFocus?.(ev);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      PopoverLegacy,
+      {
+        open: openCalendar || open,
+        modal: true,
+        placement: "bottom-start",
+        disableTriggerFocus: true,
+        disableFocusLock,
+        children: [
+          /* @__PURE__ */ jsx(PopoverLegacy.Trigger, { children: ({ ref: popoverRef, ...props }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            InputMask,
+            {
+              mask,
+              inputProps: {
+                onKeyDown: handleInputKeyDown,
+                onBlur: handleInputBlur,
+                onChange: handleInputChange,
+                onFocus: handleInputFocus
+              },
+              value: internalValue?.value || "",
+              ...props,
+              ref: useMergeRefs([popoverRef, inputRef]),
+              children: /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  hint,
+                  ref,
+                  prefix: /* @__PURE__ */ jsx(Icon, { svg: SvgEvent, ref: iconRef }),
+                  ...inputProps,
+                  required
+                }
+              )
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(PopoverLegacy.Content, { ref: floatRef, children: !range ? /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              ref: calRef,
+              onKeyDown: handleCalendarKeyDown,
+              defaultFocusedDate: internalValue?.date,
+              value: internalValue?.date || undefined,
+              locale,
+              onBlur: handleCalendarBlur,
+              onSelection: handleCalendarSelection,
+              onFocus: handleCalendarFocus,
+              minDate,
+              maxDate,
+              unavailableDates,
+              unavailable,
+              defaultTimeZone,
+              startDay
+            }
+          ) : /* @__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,
+              onSelection: handleCalendarSelection,
+              onFocus: handleCalendarFocus,
+              minDate,
+              maxDate,
+              unavailableDates,
+              unavailable,
+              defaultTimeZone,
+              startDay,
+              range: true
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+DateFieldLegacy.displayName = "DateFieldLegacy";
+
+const RANGE_DIVIDER = " – ";
+const DateField$1 = forwardRef(
+  (props, ref) => {
+    const {
+      // DateField
+      openCalendar,
+      onFocus,
+      onBlur,
+      onChange,
+      onClick,
+      format = "MM/dd/yyyy",
+      disableHint,
+      // Calendar
+      minDate,
+      maxDate,
+      unavailableDates,
+      unavailable,
+      startDay,
+      defaultValue,
+      value: inputValue,
+      // Shared
+      locale = Intl.DateTimeFormat().resolvedOptions().locale,
+      defaultTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
+      range,
+      // Input
+      required,
+      ...inputProps
+    } = props;
+    const [open, _setOpen] = useState(openCalendar || false);
+    const setOpen = (val) => {
+      if (open && !val) {
+        inputRef.current?.focus();
+      }
+      _setOpen(val);
+    };
+    const [internalValue, setInternalValue] = useState();
+    const inputRef = useRef(null);
+    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 (!defaultValue) return;
+      if (range) {
+        const startDate = DateTime.fromFormat(
+          defaultValue.start ?? "",
+          format,
+          {
+            zone: defaultTimeZone
+          }
+        ).startOf("day");
+        const endDate = DateTime.fromFormat(defaultValue.end ?? "", format, {
+          zone: defaultTimeZone
+        }).startOf("day");
+        const newValue2 = {
+          start: {
+            value: defaultValue.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: defaultValue.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: defaultValue.start + RANGE_DIVIDER + defaultValue.end
+        };
+        setInternalValue(newValue2);
+        return;
+      }
+      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 startDate = DateTime.fromFormat(
+            inputValue.start ?? "",
+            format,
+            {
+              zone: defaultTimeZone
+            }
+          ).startOf("day");
+          const endDate = DateTime.fromFormat(inputValue.end ?? "", format, {
+            zone: defaultTimeZone
+          }).startOf("day");
+          const returnValue = {
+            start: {
+              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: 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: inputValue.start + RANGE_DIVIDER + inputValue.end
+          };
+          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),
+            {
+              dates: new Set(unavailable?.dates),
+              daysOfWeek: new Set(unavailable?.daysOfWeek)
+            },
+            defaultTimeZone
+          )
+        };
+      }
+      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, 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);
+        if (parts.length !== 2) return;
+        const startDate = DateTime.fromFormat(parts[0], format, {
+          zone: defaultTimeZone
+        }).startOf("day");
+        const endDate = DateTime.fromFormat(parts[1], format, {
+          zone: defaultTimeZone
+        }).startOf("day");
+        const returnValue = {
+          start: {
+            value: parts[0],
+            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: parts[1],
+            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: ev.target.value
+        };
+        setInternalValue(returnValue);
+        onChange?.(ev, returnValue);
+        return;
+      }
+      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 startDate = data.value?.start ?? "";
+        const endDate = data.value?.end ?? "";
+        const startVal = DateTime.fromISO(startDate, {
+          zone: defaultTimeZone
+        });
+        const startValue = startVal.toFormat(format);
+        const endVal = DateTime.fromISO(endDate, {
+          zone: defaultTimeZone
+        });
+        const endValue = endVal.toFormat(format);
+        const newDateRange = {
+          start: {
+            value: startValue,
+            date: startDate,
+            isValid: true
+          },
+          end: {
+            value: endValue,
+            date: endDate,
+            isValid: true
+          },
+          value: startValue + RANGE_DIVIDER + endValue
+        };
+        setInternalValue(newDateRange);
+        const event2 = {
+          target: {
+            value: startValue + RANGE_DIVIDER + endValue
+          }
+        };
+        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 focusToCalendar = () => {
+      if (popperRef.current) {
+        const currentFocusable = popperRef.current.querySelectorAll('[tabindex = "0"]')[0];
+        if (currentFocusable) {
+          currentFocusable.focus();
+        }
+      }
+    };
+    const handleClickOutside = () => {
+      setOpen(false);
+    };
+    const currentValue = getCurrentValue();
+    if (!supportsPopover())
+      return /* @__PURE__ */ jsx(DateFieldLegacy, { ...props, ref });
+    return /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open: openCalendar ?? open,
+        modal: true,
+        placement: "bottom-start",
+        disableTriggerFocus: true,
+        onOutsidePress: handleClickOutside,
+        children: [
+          /* @__PURE__ */ jsx(Popover.Trigger, { children: ({ ref: iRef, ...props2 }) => {
+            setPopoverRef(iRef);
+            return range ? /* @__PURE__ */ jsx(
+              InputMask,
+              {
+                mask: "99/99/9999" + RANGE_DIVIDER + "99/99/9999",
+                ref: combinedRef,
+                onChange: handleInputChange,
+                value: currentValue?.value,
+                inputProps: {
+                  onFocus: handleInputFocus,
+                  prefix: /* @__PURE__ */ jsx(Icon, { svg: SvgEvent }),
+                  onBlur: handleInputBlur,
+                  onKeyDown: handleInputKeyDown,
+                  onClick: handleInputClick,
+                  hint,
+                  ...inputProps
+                },
+                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,
+                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
+                    }
+                  },
+                  {
+                    match: {
+                      matchPattern: new RegExp(/^(\d)\//),
+                      startPosition: 3,
+                      endPosition: 5
+                    },
+                    apply: {
+                      applyPattern: "0$1",
+                      caretOffset: 2
+                    }
+                  }
+                ]
+              }
+            );
+          } }),
+          /* @__PURE__ */ jsx(Popover.Content, { ref: popperRef, "data-calendar-popover": true, children: range ? /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              range: true,
+              onKeyDown: handleCalendarKeyDown,
+              defaultFocusedDate: internalValue?.start?.date,
+              value: {
+                start: currentValue?.start?.date || undefined,
+                end: currentValue?.end?.date || undefined
+              },
+              onSelection: handleCalendarSelection,
+              minDate,
+              maxDate,
+              unavailableDates,
+              unavailable,
+              defaultTimeZone,
+              startDay
+            }
+          ) : /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              onKeyDown: handleCalendarKeyDown,
+              defaultFocusedDate: internalValue?.date,
+              value: currentValue?.date || undefined,
+              onSelection: handleCalendarSelection,
+              minDate,
+              maxDate,
+              unavailableDates,
+              unavailable,
+              defaultTimeZone,
+              startDay
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+DateField$1.displayName = "DateField";
+
+const DateField = forwardRef(
+  (props, ref) => {
+    const data = {
+      label: childrenToString(props.label),
+      labelProps: props.labelProps,
+      description: childrenToString(props.description),
+      size: props.size,
+      type: props.type
+    };
+    const trackingId = useTrackingId({
+      name: "DateField",
+      data,
+      hasOverride: !!props["data-tracking-id"]
+    });
+    return /* @__PURE__ */ jsx(DateField$1, { ref, "data-tracking-id": trackingId, ...props });
+  }
+);
+
+export { DateField as D };
+//# sourceMappingURL=DateField-4jR9NvbC.js.map