@servicetitan/anvil2 1.40.2 → 1.41.0

package/dist/{DateFieldRange-DtppOifM-DZvtSHar.js → DateFieldYearless-CJP3H_Dg-BV5wGJp1.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-KVYGk3wS-CEptqxjI.js';
-import { T as TextField } from './TextField-BIeCvDD--C7yp05g5.js';
+import { D as DateTime, f as Calendar } from './Calendar-CNrdcd3f-BAKv-Gz3.js';
+import { T as TextField } from './TextField-D_fqJf85-Bcd6rWv4.js';
 import { u as useMergeRefs$1 } from './floating-ui.react-BFNinq1w.js';
 import { I as Icon } from './Icon-B6HmlQiR-BxQkO3X5.js';
-import { S as SvgEvent } from './event-BEJFimi3.js';
-import { d as Popover } from './Popover-jcmNuir0-DjlCqU1z.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 { u as useOptionallyControlledState } from './useOptionallyControlledState-DAv5LXXh-DAv5LXXh.js';
-import { s as supportsPopover, u as useKeyboardFocusables } from './ProgressBar-CzXzPpIX-Clg1J71o.js';
+import { s as supportsPopover, u as useKeyboardFocusables } from './ProgressBar-BezETeA3-CeeedJ_w.js';
 
 function getContentEditableSelection(element) {
     const { anchorOffset = 0, focusOffset = 0 } = element.ownerDocument.getSelection() || {};
@@ -1887,7 +1887,7 @@ const MaskedDateInput = forwardRef(
     useEffect(() => {
       if (mode !== previousMode) {
         setInputValue(
-          (oldInputValue) => swapMode$1(oldInputValue, previousMode ?? mode, mode)
+          (oldInputValue) => swapMode$2(oldInputValue, previousMode ?? mode, mode)
         );
       }
     }, [mode, previousMode]);
@@ -1902,11 +1902,11 @@ const MaskedDateInput = forwardRef(
       }
     }, [lastValidDate, mode, placeholder]);
     const currentParsedData = useMemo(() => {
-      return parseInputValue(inputValue, mode, removePlaceholder);
+      return parseInputValue$1(inputValue, mode, removePlaceholder);
     }, [inputValue, mode, removePlaceholder]);
     const handleChange = (event) => {
       setInputValue(event.target.value);
-      const { date, isInputValid, isInputEmpty } = parseInputValue(
+      const { date, isInputValid, isInputEmpty } = parseInputValue$1(
         event.target.value,
         mode,
         removePlaceholder
@@ -1941,13 +1941,13 @@ const MaskedDateInput = forwardRef(
         value: inputValue,
         onChange: handleChange,
         prefix: /* @__PURE__ */ jsx(Icon, { svg: SvgEvent }),
-        hint: disableHint ? void 0 : `format: ${mode}`
+        hint: disableHint ? void 0 : `Format: ${mode}`
       }
     );
   }
 );
 MaskedDateInput.displayName = "MaskedDateInput";
-function parseInputValue(value, mode, removePlaceholder) {
+function parseInputValue$1(value, mode, removePlaceholder) {
   const valueMinusPlaceholder = removePlaceholder(value);
   const jsDate = maskitoParseDate(valueMinusPlaceholder, { mode });
   const luxonDate = jsDate ? DateTime.fromJSDate(jsDate, { zone: "utc" }) : null;
@@ -1957,11 +1957,11 @@ function parseInputValue(value, mode, removePlaceholder) {
     isInputEmpty: valueMinusPlaceholder === ""
   };
 }
-function swapMode$1(inputString, previousMode, mode) {
-  const { day, month, year } = divideSegments(inputString, previousMode);
+function swapMode$2(inputString, previousMode, mode) {
+  const { day, month, year } = divideSegments$1(inputString, previousMode);
   return orderSegmentsByMode(day, month, year, mode);
 }
-function divideSegments(value, mode) {
+function divideSegments$1(value, mode) {
   const [segment1, segment2, segment3] = value.split("/");
   if (mode === "dd/mm/yyyy") {
     return { day: segment1, month: segment2, year: segment3 };
@@ -2104,6 +2104,36 @@ function validateDate({
   }
   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;
+}
 
 const NormalizedDateFieldSingle = forwardRef(
   ({
@@ -2115,6 +2145,8 @@ const NormalizedDateFieldSingle = forwardRef(
     unavailable,
     minDate,
     maxDate,
+    onFocus,
+    onBlur,
     required = false,
     ...rest
   }, ref) => {
@@ -2138,6 +2170,7 @@ const NormalizedDateFieldSingle = forwardRef(
       defaultValue: defaultValueProp
     });
     const popoverSupported = usePopoverSupport();
+    const shouldShowCalendar = usePopoverCloseDelayWorkaround(calendarOpen);
     const currentValidity = useMemo(
       () => validateDate({
         date: lastValidDate,
@@ -2225,16 +2258,17 @@ const NormalizedDateFieldSingle = forwardRef(
         open: calendarOpen,
         modal: true,
         placement: "bottom-start",
+        disableFlipFallback: true,
         disableTriggerFocus: true,
         onClose: () => setCalendarOpen(false),
         disableAutoUpdate: true,
-        onOutsidePress: () => setCalendarOpen(false),
+        onClickOutside: () => setCalendarOpen(false),
         children: [
           /* @__PURE__ */ jsx(Popover.Trigger, { children: ({ ref: iRef }) => {
             setPopoverTriggerRef(iRef);
             return justTheField;
           } }),
-          /* @__PURE__ */ jsx(Popover.Content, { ref: popoverContentRef, "data-calendar-popover": true, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Popover.Content, { ref: popoverContentRef, "data-testid": "calendar-popover", children: shouldShowCalendar && /* @__PURE__ */ jsx(
             Calendar,
             {
               range: false,
@@ -2259,14 +2293,103 @@ const NormalizedDateFieldSingle = forwardRef(
 );
 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);
+      }
+    },
+    // 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 };
+}
+
+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),
@@ -2284,10 +2407,15 @@ const DateFieldSingle = ({
     () => unavailable?.dates?.map((d) => convertStringToDate(d)).filter((d) => d !== null && d !== void 0),
     [unavailable?.dates]
   );
-  return /* @__PURE__ */ jsx(
+  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,
     {
       ...rest,
+      onChange: handleChange,
       value: normalizedValue,
       defaultValue: normalizedDefaultValue,
       minDate: normalizedMinDate,
@@ -2297,7 +2425,7 @@ const DateFieldSingle = ({
         daysOfWeek: unavailable?.daysOfWeek
       } : void 0
     }
-  );
+  ) });
 };
 DateFieldSingle.displayName = "DateFieldSingle";
 
@@ -2360,7 +2488,7 @@ const MaskedDateRangeInput = forwardRef(
     useEffect(() => {
       if (mode !== previousMode) {
         setInputValue(
-          (previousInputValue) => swapMode(previousInputValue, previousMode ?? mode, mode)
+          (previousInputValue) => swapMode$1(previousInputValue, previousMode ?? mode, mode)
         );
       }
     }, [mode, fullPlaceholder, previousMode]);
@@ -2432,7 +2560,7 @@ const MaskedDateRangeInput = forwardRef(
         value: inputValue,
         onChange: handleChange,
         prefix: /* @__PURE__ */ jsx(Icon, { svg: SvgEvent }),
-        hint: disableHint ? void 0 : `format: ${mode}`
+        hint: disableHint ? void 0 : `Format: ${mode}`
       }
     );
   }
@@ -2455,7 +2583,7 @@ function parseRangeInputValue(value, mode, removePlaceholder) {
     isHalfEmpty: endDate === void 0
   };
 }
-function swapMode(inputString, previousMode, mode) {
+function swapMode$1(inputString, previousMode, mode) {
   const halves = inputString.split(RANGE_SEPARATOR);
   const segments = halves.map((half) => half.split("/"));
   let startDay, startMonth, startYear, endDay, endMonth, endYear;
@@ -2506,6 +2634,8 @@ const NormalizedDateFieldRange = forwardRef(
     minDate,
     maxDate,
     required = false,
+    onFocus,
+    onBlur,
     ...rest
   }, ref) => {
     const inputRef = useRef(null);
@@ -2531,11 +2661,12 @@ const NormalizedDateFieldRange = forwardRef(
       handleCalendarKeyDown,
       handleInputKeyDown
     } = useDateFieldOrchestration({
-      inputRef: { current: null },
+      inputRef,
       calendarDefaultOpen: false,
       popoverContentRef,
       disableCalendar
     });
+    const shouldShowCalendar = usePopoverCloseDelayWorkaround(calendarOpen);
     const isDateRangeValid = useMemo(() => {
       return validateDate({
         date: startDate ?? null,
@@ -2650,6 +2781,7 @@ const NormalizedDateFieldRange = forwardRef(
         open: calendarOpen,
         modal: true,
         placement: "bottom-start",
+        disableFlipFallback: true,
         disableTriggerFocus: true,
         onClose: () => setCalendarOpen(false),
         disableAutoUpdate: true,
@@ -2659,7 +2791,7 @@ const NormalizedDateFieldRange = forwardRef(
             setPopoverTriggerRef(iRef);
             return justTheField;
           } }),
-          /* @__PURE__ */ jsx(Popover.Content, { ref: popoverContentRef, "data-calendar-popover": true, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Popover.Content, { ref: popoverContentRef, "data-testid": "calendar-popover", children: shouldShowCalendar && /* @__PURE__ */ jsx(
             Calendar,
             {
               range: true,
@@ -2710,8 +2842,27 @@ const DateFieldRange = ({
   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,
@@ -2738,7 +2889,11 @@ const DateFieldRange = ({
     () => unavailable?.dates?.map((d) => convertStringToDate(d)).filter((d) => d !== null && d !== void 0),
     [unavailable?.dates]
   );
-  return /* @__PURE__ */ jsx(
+  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,
@@ -2749,11 +2904,222 @@ const DateFieldRange = ({
       unavailable: unavailable ? {
         dates: normalizedUnavailableDates,
         daysOfWeek: unavailable?.daysOfWeek
-      } : void 0
+      } : void 0,
+      onChange: handleChange
     }
-  );
+  ) });
 };
 DateFieldRange.displayName = "DateFieldRange";
 
-export { DateFieldRange as D, DateFieldSingle as a };
-//# sourceMappingURL=DateFieldRange-DtppOifM-DZvtSHar.js.map
+const yearlessDatePlaceholderMask = ({
+  mode,
+  separator = "/",
+  placeholder
+}) => {
+  const dateOptions = maskitoDateOptionsGenerator({
+    mode,
+    separator
+  });
+  const { plugins, removePlaceholder, ...placeholderOptions } = maskitoWithPlaceholder(placeholder);
+  const datePlaceholderMask = {
+    ...dateOptions,
+    plugins: plugins.concat(dateOptions.plugins || []),
+    preprocessors: [
+      ...placeholderOptions.preprocessors,
+      ...dateOptions.preprocessors,
+      makeZeroShortcutPreprocessor(mode, separator)
+    ],
+    postprocessors: [
+      ...dateOptions.postprocessors,
+      ...placeholderOptions.postprocessors
+    ]
+  };
+  return { options: datePlaceholderMask, removePlaceholder };
+};
+
+const MaskedYearlessDateInput = forwardRef(({ onChange, mode = "mm/dd", value, disableHint = false, ...props }, ref) => {
+  const placeholder = "__/__";
+  const [inputValue, setInputValue] = useState(placeholder);
+  const { options, removePlaceholder } = yearlessDatePlaceholderMask({
+    mode,
+    placeholder
+  });
+  const maskedInputRef = useMaskito({ options });
+  const inputRef = useRef(null);
+  const combinedRef = useMergeRefs$1([maskedInputRef, inputRef, ref]);
+  const previousValue = usePrevious(value);
+  const previousMode = usePrevious(mode);
+  useEffect(() => {
+    if (mode !== previousMode) {
+      setInputValue(
+        (oldInputValue) => swapMode(oldInputValue, previousMode ?? mode, mode)
+      );
+    }
+  }, [mode, previousMode]);
+  useEffect(() => {
+    if (previousValue?.day !== value?.day || previousValue?.month !== value?.month) {
+      if (value?.day && value?.month) {
+        setInputValue(stringifyYearlessDate(value.day, value.month, mode));
+      } else if (previousValue !== null && previousValue !== void 0 && (value === null || value?.day === null && value?.month === null)) {
+        setInputValue(placeholder);
+      } else {
+        return;
+      }
+    }
+  }, [value, mode, previousValue]);
+  const currentParsedData = useMemo(() => {
+    return parseInputValue(inputValue, mode, removePlaceholder);
+  }, [inputValue, mode, removePlaceholder]);
+  const handleChange = (event) => {
+    setInputValue(event.target.value);
+    const {
+      value: v,
+      isInputValid,
+      isInputEmpty
+    } = parseInputValue(event.target.value, mode, removePlaceholder);
+    onChange?.({
+      event,
+      value: v ?? currentParsedData.value ?? null,
+      isInputValid,
+      isInputEmpty
+    });
+  };
+  useImperativeHandle(ref, () => {
+    const input = inputRef.current;
+    if (!input) return null;
+    return Object.assign(input, {
+      setValue: (value2) => {
+        if (!value2) {
+          setInputValue(placeholder);
+          return;
+        }
+        setInputValue(
+          stringifyYearlessDate(value2.day ?? 1, value2.month ?? 1, mode)
+        );
+      }
+    });
+  }, [mode, placeholder]);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ref: combinedRef,
+      "data-month-value": value?.month,
+      "data-day-value": value?.day,
+      "data-input-valid": currentParsedData.isInputValid,
+      "data-input-empty": currentParsedData.isInputEmpty,
+      ...props,
+      showCounter: false,
+      value: inputValue,
+      onChange: handleChange,
+      hint: disableHint ? void 0 : `Format: ${mode}`
+    }
+  );
+});
+MaskedYearlessDateInput.displayName = "MaskedYearlessDateInput";
+function parseInputValue(value, mode, removePlaceholder) {
+  const valueMinusPlaceholder = removePlaceholder(value);
+  const [segment1, segment2] = valueMinusPlaceholder.split("/");
+  const incompleteFirstSegment = segment1?.length !== 2;
+  const incompleteSecondSegment = segment2?.length !== 2;
+  if (mode === "dd/mm") {
+    return {
+      value: {
+        day: incompleteFirstSegment ? null : parseInt(segment1),
+        month: incompleteSecondSegment ? null : parseInt(segment2)
+      },
+      isInputValid: !incompleteFirstSegment && !incompleteSecondSegment,
+      isInputEmpty: valueMinusPlaceholder === ""
+    };
+  }
+  return {
+    value: {
+      day: incompleteSecondSegment ? null : parseInt(segment2),
+      month: incompleteFirstSegment ? null : parseInt(segment1)
+    },
+    isInputValid: !incompleteFirstSegment && !incompleteSecondSegment,
+    isInputEmpty: valueMinusPlaceholder === ""
+  };
+}
+function swapMode(inputString, previousMode, mode) {
+  const { day, month } = divideSegments(inputString, previousMode);
+  return stringifyYearlessDate(day, month, mode);
+}
+function divideSegments(value, mode) {
+  const [segment1, segment2] = value.split("/");
+  if (mode === "dd/mm") {
+    return { day: segment1, month: segment2 };
+  }
+  return { day: segment2, month: segment1 };
+}
+function stringifyYearlessDate(day, month, mode) {
+  const dd = day.toString().padStart(2, "0");
+  const mm = month.toString().padStart(2, "0");
+  if (mode === "dd/mm") {
+    return `${dd}/${mm}`;
+  }
+  return `${mm}/${dd}`;
+}
+
+const DateFieldYearless = ({
+  value: valueProp,
+  defaultValue: defaultValueProp,
+  onChange,
+  minDate,
+  maxDate,
+  unavailable,
+  required,
+  ...restProps
+}) => {
+  const [value, setValue] = useOptionallyControlledState({
+    controlledValue: valueProp,
+    defaultValue: defaultValueProp
+  });
+  const currentValidity = useMemo(
+    () => validateYearlessDate({
+      value: value ?? null,
+      constraints: {
+        required,
+        unavailable,
+        minDate,
+        maxDate
+      }
+    }),
+    [value, required, unavailable, minDate, maxDate]
+  );
+  const conditionalChange = useConditionalChange({
+    changeHandler: onChange,
+    compareFn: (a, b) => a.isInputValid !== b.isInputValid || a.isInputEmpty !== b.isInputEmpty || a.isValid !== b.isValid || a.value?.day !== b.value?.day || a.value?.month !== b.value?.month
+  });
+  const handleInputChange = (change) => {
+    const { event, value: value2, ...restChange } = change;
+    setValue(value2);
+    return conditionalChange({
+      ...restChange,
+      value: value2,
+      isValid: validateYearlessDate({
+        value: value2,
+        constraints: {
+          required,
+          unavailable,
+          minDate,
+          maxDate
+        }
+      })
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    MaskedYearlessDateInput,
+    {
+      required,
+      ...restProps,
+      autoComplete: "off",
+      onChange: handleInputChange,
+      value,
+      "data-valid": currentValidity
+    }
+  );
+};
+DateFieldYearless.displayName = "DateFieldYearless";
+
+export { DateFieldRange as D, DateFieldSingle as a, DateFieldYearless as b };
+//# sourceMappingURL=DateFieldYearless-CJP3H_Dg-BV5wGJp1.js.map