@servicetitan/anvil2 1.27.2 → 1.28.0

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

@@ -3,19 +3,21 @@ 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-DQXw5qvG-BH4P-Woc.js';
-import { T as TextField } from './TextField-D53XNiCi-C6_A5VRq.js';
-import { d as Popover } from './Popover-QKZtjN4_-CETYlWwq.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 { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
+import { s as supportsPopover } from './supportsPopover-8aJR37cf-8aJR37cf.js';
+import { e as PopoverLegacy, d as Popover } from './Popover-C1B3UJXp-B5obSIvA.js';
+import { u as useMergeRefs } from './floating-ui.react-4AwURJA3.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 = " — ";
-const DateField$1 = forwardRef(
+const RANGE_DIVIDER$1 = " — ";
+const DateFieldLegacy = forwardRef(
   ({
-    // DateField
+    // DateFieldLegacy
     openCalendar,
     onFocus,
     onBlur,
@@ -85,6 +87,539 @@ const DateField$1 = forwardRef(
         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,
+      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 [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;
@@ -457,7 +992,9 @@ const DateField$1 = forwardRef(
       }
     };
     const [popoverRef, setPopoverRef] = useState();
-    const combinedRef = useMergeRefs([popoverRef, inputRef]);
+    const combinedRef = useMergeRefs$1([popoverRef, inputRef]);
+    if (!supportsPopover())
+      return /* @__PURE__ */ jsx(DateFieldLegacy, { ...props, ref });
     return /* @__PURE__ */ jsxs(
       Popover,
       {
@@ -467,7 +1004,7 @@ const DateField$1 = forwardRef(
         disableTriggerFocus: true,
         disableFocusLock,
         children: [
-          /* @__PURE__ */ jsx(Popover.Trigger, { children: ({ ref: iRef, ...props }) => {
+          /* @__PURE__ */ jsx(Popover.Trigger, { children: ({ ref: iRef, ...props2 }) => {
             setPopoverRef(iRef);
             return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
               InputMask,
@@ -480,7 +1017,7 @@ const DateField$1 = forwardRef(
                   onFocus: handleInputFocus
                 },
                 value: internalValue?.value || "",
-                ...props,
+                ...props2,
                 ref: combinedRef,
                 children: /* @__PURE__ */ jsx(
                   TextField,
@@ -562,4 +1099,4 @@ const DateField = forwardRef(
 );
 
 export { DateField as D };
-//# sourceMappingURL=DateField-DocC46Mw.js.map
+//# sourceMappingURL=DateField-5mNXaJ7q.js.map