@elliemae/ds-form-date-time-picker 3.4.3-rc.1 → 3.4.3

package/dist/esm/parts/DateInputs/useDateInputs.js

@@ -25,6 +25,7 @@ const useDateInputs = () => {
     withAnyPicker,
     withAnyRightController,
     autoFocusMonthInput,
+    innerRefMonthInput,
     trackFocusResetter,
     trackFocusFirstSegment,
     trackFocusLastSegment,
@@ -41,280 +42,318 @@ const useDateInputs = () => {
   const onEndKeyDown = useCallback(() => {
     trackFocusLastSegment();
   }, [trackFocusLastSegment]);
-  const handleChangeMonth = useCallback((newMonth, e, metaInfo = defaultMetaInfo) => {
-    const newDateString = getFormattedDateString({
-      month: newMonth,
-      day,
-      year
-    });
-    const finalMetaInfo = {
-      ...metaInfo,
-      ...getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay),
-      newDateString
-    };
-    appOnMonthChange(newMonth, e, finalMetaInfo);
-    handleChangeComposedDateString(newDateString, finalMetaInfo);
-  }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
+  const handleChangeMonth = useCallback(
+    (newMonth, e, metaInfo = defaultMetaInfo) => {
+      const newDateString = getFormattedDateString({
+        month: newMonth,
+        day,
+        year
+      });
+      const finalMetaInfo = {
+        ...metaInfo,
+        ...getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay),
+        newDateString
+      };
+      appOnMonthChange(newMonth, e, finalMetaInfo);
+      handleChangeComposedDateString(newDateString, finalMetaInfo);
+    },
+    [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]
+  );
   const onMonthFocus = useCallback(() => {
     trackFocusMonthInput();
   }, [trackFocusMonthInput]);
-  const onMonthChange = useCallback((e) => {
-    let newMonth = e?.target?.value;
-    if (Number.parseInt(newMonth, 10) > 1)
-      newMonth = prependStringWithPlaceHolders(newMonth, 2);
-    handleChangeMonth(newMonth, e);
-    if (newMonth.length === 2)
-      trackFocusDayInput();
-  }, [handleChangeMonth, trackFocusDayInput]);
-  const onMonthKeyDown = useCallback((e) => {
-    const { key, ctrlKey, metaKey } = e;
-    const monthStringConvertedToInteger = Number.parseInt(month, 10);
-    if (["Home", "End", "ArrowUp", "ArrowDown", "-", "/", "\\"].includes(key))
-      e.preventDefault();
-    if (["Home", "End", "ArrowUp", "ArrowDown", "-", "/", "\\"].includes(key))
-      e.stopPropagation();
-    if (key === "Home")
-      onHomeKeyDown();
-    if (key === "End")
-      onEndKeyDown();
-    if (key === "ArrowUp" || key === "ArrowDown") {
-      const monthInteger = Number.isNaN(monthStringConvertedToInteger) ? 0 : monthStringConvertedToInteger;
-      let newMonth;
-      if (key === "ArrowUp")
-        newMonth = monthInteger + 1 <= 12 ? monthInteger + 1 : monthInteger;
-      else
-        newMonth = monthInteger - 1 > 0 ? monthInteger - 1 : 1;
-      newMonth = prependStringWithPlaceHolders(`${newMonth}`, 2);
-      handleChangeMonth(newMonth, e);
-    }
-    if (!Number.isNaN(monthStringConvertedToInteger) && (key === "-" || key === "/" || key === "\\")) {
-      const newMonth = prependStringWithPlaceHolders(`${monthStringConvertedToInteger}`, 2);
+  const onMonthChange = useCallback(
+    (e) => {
+      let newMonth = e?.target?.value;
+      if (Number.parseInt(newMonth, 10) > 1)
+        newMonth = prependStringWithPlaceHolders(newMonth, 2);
       handleChangeMonth(newMonth, e);
       if (newMonth.length === 2)
         trackFocusDayInput();
-    }
-    if ((ctrlKey || metaKey) && key === ";")
-      trackFocusLastSegment();
-  }, [month, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, trackFocusDayInput, handleChangeMonth]);
-  const onMonthBlur = useCallback((e) => {
-    const newMonth = e?.target?.value;
-    if (newMonth === "0")
-      handleChangeMonth("01", e, { isAutomaticFillTrigger: true });
-    else if (newMonth.length > 0 && newMonth.length < 2)
-      handleChangeMonth(prependStringWithPlaceHolders(newMonth, 2), e, {
-        isAutomaticFillTrigger: true
+    },
+    [handleChangeMonth, trackFocusDayInput]
+  );
+  const onMonthKeyDown = useCallback(
+    (e) => {
+      const { key, ctrlKey, metaKey } = e;
+      const monthStringConvertedToInteger = Number.parseInt(month, 10);
+      if (["Home", "End", "ArrowUp", "ArrowDown", "-", "/", "\\"].includes(key))
+        e.preventDefault();
+      if (["Home", "End", "ArrowUp", "ArrowDown", "-", "/", "\\"].includes(key))
+        e.stopPropagation();
+      if (key === "Home")
+        onHomeKeyDown();
+      if (key === "End")
+        onEndKeyDown();
+      if (key === "ArrowUp" || key === "ArrowDown") {
+        const monthInteger = Number.isNaN(monthStringConvertedToInteger) ? 0 : monthStringConvertedToInteger;
+        let newMonth;
+        if (key === "ArrowUp")
+          newMonth = monthInteger + 1 <= 12 ? monthInteger + 1 : monthInteger;
+        else
+          newMonth = monthInteger - 1 > 0 ? monthInteger - 1 : 1;
+        newMonth = prependStringWithPlaceHolders(`${newMonth}`, 2);
+        handleChangeMonth(newMonth, e);
+      }
+      if (!Number.isNaN(monthStringConvertedToInteger) && (key === "-" || key === "/" || key === "\\")) {
+        const newMonth = prependStringWithPlaceHolders(`${monthStringConvertedToInteger}`, 2);
+        handleChangeMonth(newMonth, e);
+        if (newMonth.length === 2)
+          trackFocusDayInput();
+      }
+      if ((ctrlKey || metaKey) && key === ";")
+        trackFocusLastSegment();
+    },
+    [month, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, trackFocusDayInput, handleChangeMonth]
+  );
+  const onMonthBlur = useCallback(
+    (e) => {
+      const newMonth = e?.target?.value;
+      if (newMonth === "0")
+        handleChangeMonth("01", e, { isAutomaticFillTrigger: true });
+      else if (newMonth.length > 0 && newMonth.length < 2)
+        handleChangeMonth(prependStringWithPlaceHolders(newMonth, 2), e, {
+          isAutomaticFillTrigger: true
+        });
+    },
+    [handleChangeMonth]
+  );
+  const handleChangeDay = useCallback(
+    (newDay, e, metaInfo = defaultMetaInfo) => {
+      const newDateString = getFormattedDateString({
+        month,
+        day: newDay,
+        year
       });
-  }, [handleChangeMonth]);
-  const handleChangeDay = useCallback((newDay, e, metaInfo = defaultMetaInfo) => {
-    const newDateString = getFormattedDateString({
-      month,
-      day: newDay,
-      year
-    });
-    const finalMetaInfo = {
-      ...metaInfo,
-      ...getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay),
-      newDateString
-    };
-    appOnDayChange(newDay, e, finalMetaInfo);
-    handleChangeComposedDateString(newDateString, finalMetaInfo);
-  }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
+      const finalMetaInfo = {
+        ...metaInfo,
+        ...getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay),
+        newDateString
+      };
+      appOnDayChange(newDay, e, finalMetaInfo);
+      handleChangeComposedDateString(newDateString, finalMetaInfo);
+    },
+    [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]
+  );
   const onDayFocus = useCallback(() => {
     trackFocusDayInput();
   }, [trackFocusDayInput]);
-  const onDayChange = useCallback((e) => {
-    let newDay = e?.target?.value;
-    if (Number.parseInt(newDay, 10) > 3)
-      newDay = prependStringWithPlaceHolders(newDay, 2);
-    handleChangeDay(newDay, e);
-    if (newDay.length === 2)
-      trackFocusYearInput();
-  }, [handleChangeDay, trackFocusYearInput]);
-  const onDayKeyDown = useCallback((e) => {
-    const { key, ctrlKey, metaKey } = e;
-    const dayStringConvertedToInteger = Number.parseInt(day, 10);
-    if (["Home", "End", "ArrowUp", "ArrowDown", "-", "/", "\\"].includes(key))
-      e.preventDefault();
-    if (["Home", "End", "ArrowUp", "ArrowDown", "-", "/", "\\"].includes(key))
-      e.stopPropagation();
-    if (key === "Home")
-      onHomeKeyDown();
-    if (key === "End")
-      onEndKeyDown();
-    if (key === "ArrowUp" || key === "ArrowDown") {
-      const dayInteger = Number.isNaN(dayStringConvertedToInteger) ? 0 : dayStringConvertedToInteger;
-      let newDay;
-      if (key === "ArrowUp")
-        newDay = dayInteger + 1 <= 31 ? dayInteger + 1 : dayInteger;
-      else
-        newDay = dayInteger - 1 > 0 ? dayInteger - 1 : 1;
-      newDay = prependStringWithPlaceHolders(`${newDay}`, 2);
-      handleChangeDay(newDay, e);
-    }
-    if (!Number.isNaN(dayStringConvertedToInteger) && (key === "-" || key === "/" || key === "\\")) {
-      const newDay = prependStringWithPlaceHolders(`${dayStringConvertedToInteger}`, 2);
+  const onDayChange = useCallback(
+    (e) => {
+      let newDay = e?.target?.value;
+      if (Number.parseInt(newDay, 10) > 3)
+        newDay = prependStringWithPlaceHolders(newDay, 2);
       handleChangeDay(newDay, e);
       if (newDay.length === 2)
         trackFocusYearInput();
-    }
-    if (key === "Backspace" && day?.length === 0) {
-      trackFocusMonthInput();
-    }
-    if ((ctrlKey || metaKey) && key === ";")
-      trackFocusLastSegment();
-  }, [
-    day,
-    onHomeKeyDown,
-    onEndKeyDown,
-    trackFocusLastSegment,
-    handleChangeDay,
-    trackFocusYearInput,
-    trackFocusMonthInput
-  ]);
-  const onDayBlur = useCallback((e) => {
-    const newDay = e?.target?.value;
-    if (newDay === "0")
-      handleChangeDay("01", e, { isAutomaticFillTrigger: true });
-    else if (newDay.length > 0 && newDay.length < 2)
-      handleChangeDay(prependStringWithPlaceHolders(newDay, 2), e, {
-        isAutomaticFillTrigger: true
-      });
-  }, [handleChangeDay]);
-  const handleChangeYear = useCallback((newYear, e, metaInfo = defaultMetaInfo) => {
-    const newDateString = getFormattedDateString({
-      month,
+    },
+    [handleChangeDay, trackFocusYearInput]
+  );
+  const onDayKeyDown = useCallback(
+    (e) => {
+      const { key, ctrlKey, metaKey } = e;
+      const dayStringConvertedToInteger = Number.parseInt(day, 10);
+      if (["Home", "End", "ArrowUp", "ArrowDown", "-", "/", "\\"].includes(key))
+        e.preventDefault();
+      if (["Home", "End", "ArrowUp", "ArrowDown", "-", "/", "\\"].includes(key))
+        e.stopPropagation();
+      if (key === "Home")
+        onHomeKeyDown();
+      if (key === "End")
+        onEndKeyDown();
+      if (key === "ArrowUp" || key === "ArrowDown") {
+        const dayInteger = Number.isNaN(dayStringConvertedToInteger) ? 0 : dayStringConvertedToInteger;
+        let newDay;
+        if (key === "ArrowUp")
+          newDay = dayInteger + 1 <= 31 ? dayInteger + 1 : dayInteger;
+        else
+          newDay = dayInteger - 1 > 0 ? dayInteger - 1 : 1;
+        newDay = prependStringWithPlaceHolders(`${newDay}`, 2);
+        handleChangeDay(newDay, e);
+      }
+      if (!Number.isNaN(dayStringConvertedToInteger) && (key === "-" || key === "/" || key === "\\")) {
+        const newDay = prependStringWithPlaceHolders(`${dayStringConvertedToInteger}`, 2);
+        handleChangeDay(newDay, e);
+        if (newDay.length === 2)
+          trackFocusYearInput();
+      }
+      if (key === "Backspace" && day?.length === 0) {
+        trackFocusMonthInput();
+      }
+      if ((ctrlKey || metaKey) && key === ";")
+        trackFocusLastSegment();
+    },
+    [
       day,
-      year: newYear
-    });
-    const finalMetaInfo = {
-      ...metaInfo,
-      ...getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay),
-      newDateString
-    };
-    appOnYearChange(newYear, e, finalMetaInfo);
-    handleChangeComposedDateString(newDateString, finalMetaInfo);
-  }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
+      onHomeKeyDown,
+      onEndKeyDown,
+      trackFocusLastSegment,
+      handleChangeDay,
+      trackFocusYearInput,
+      trackFocusMonthInput
+    ]
+  );
+  const onDayBlur = useCallback(
+    (e) => {
+      const newDay = e?.target?.value;
+      if (newDay === "0")
+        handleChangeDay("01", e, { isAutomaticFillTrigger: true });
+      else if (newDay.length > 0 && newDay.length < 2)
+        handleChangeDay(prependStringWithPlaceHolders(newDay, 2), e, {
+          isAutomaticFillTrigger: true
+        });
+    },
+    [handleChangeDay]
+  );
+  const handleChangeYear = useCallback(
+    (newYear, e, metaInfo = defaultMetaInfo) => {
+      const newDateString = getFormattedDateString({
+        month,
+        day,
+        year: newYear
+      });
+      const finalMetaInfo = {
+        ...metaInfo,
+        ...getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay),
+        newDateString
+      };
+      appOnYearChange(newYear, e, finalMetaInfo);
+      handleChangeComposedDateString(newDateString, finalMetaInfo);
+    },
+    [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]
+  );
   const onYearFocus = useCallback(() => {
     trackFocusYearInput();
   }, [trackFocusYearInput]);
-  const onYearChange = useCallback((e) => {
-    const newYear = e?.target?.value;
-    handleChangeYear(newYear, e);
-    if (newYear.length === 4) {
+  const onYearChange = useCallback(
+    (e) => {
+      const newYear = e?.target?.value;
+      handleChangeYear(newYear, e);
+      if (newYear.length === 4) {
+        if (!hideTime)
+          trackFocusHourInput();
+        else if (withAnyRightController) {
+          if (withClearBtn)
+            trackFocusClearBtn();
+          else if (withAnyPicker)
+            trackFocusPicker();
+        }
+      }
+    },
+    [
+      handleChangeYear,
+      hideTime,
+      trackFocusHourInput,
+      withAnyRightController,
+      withClearBtn,
+      trackFocusClearBtn,
+      withAnyPicker,
+      trackFocusPicker
+    ]
+  );
+  const onYearKeyDown = useCallback(
+    (e) => {
+      const { key, ctrlKey, metaKey } = e;
+      const yearStringConvertedToInteger = Number.parseInt(year, 10);
+      const yearInteger = Number.isNaN(yearStringConvertedToInteger) ? 0 : yearStringConvertedToInteger;
+      let newYear = yearInteger !== 0 ? fillStringWithPlaceHolders(`${yearInteger}`, 4, "0") : "";
+      if (key === "ArrowUp" || key === "ArrowDown") {
+        let newYearInteger;
+        if (key === "ArrowUp")
+          newYearInteger = yearInteger + 1 <= 9999 ? yearInteger + 1 : yearInteger;
+        else
+          newYearInteger = yearInteger - 1 > 0 ? yearInteger - 1 : 1;
+        newYear = prependStringWithPlaceHolders(`${newYearInteger}`, 4);
+      }
+      const isAutomaticFillTrigger = newYear !== year && ["Tab", " "].includes(key);
+      const metainfo = { isAutomaticFillTrigger };
+      if (key === "ArrowUp" || key === "ArrowDown" || isAutomaticFillTrigger) {
+        handleChangeYear(newYear, e, metainfo);
+      }
+      let trackNextFocus = trackFocusResetter;
       if (!hideTime)
-        trackFocusHourInput();
-      else if (withAnyRightController) {
-        if (withClearBtn)
-          trackFocusClearBtn();
-        else if (withAnyPicker)
-          trackFocusPicker();
+        trackNextFocus = trackFocusHourInput;
+      else if (withClearBtn)
+        trackNextFocus = trackFocusClearBtn;
+      else if (withAnyPicker)
+        trackNextFocus = trackFocusPicker;
+      if (["Home", "End", "ArrowUp", "ArrowDown", " "].includes(key))
+        e.preventDefault();
+      if (["Home", "End", "ArrowUp", "ArrowDown", " "].includes(key))
+        e.stopPropagation();
+      if (key === "Home")
+        onHomeKeyDown();
+      if (key === "End")
+        onEndKeyDown();
+      if (key === " ") {
+        trackNextFocus();
       }
-    }
-  }, [
-    handleChangeYear,
-    hideTime,
-    trackFocusHourInput,
-    withAnyRightController,
-    withClearBtn,
-    trackFocusClearBtn,
-    withAnyPicker,
-    trackFocusPicker
-  ]);
-  const onYearKeyDown = useCallback((e) => {
-    const { key, ctrlKey, metaKey } = e;
-    const yearStringConvertedToInteger = Number.parseInt(year, 10);
-    const yearInteger = Number.isNaN(yearStringConvertedToInteger) ? 0 : yearStringConvertedToInteger;
-    let newYear = yearInteger !== 0 ? fillStringWithPlaceHolders(`${yearInteger}`, 4, "0") : "";
-    if (key === "ArrowUp" || key === "ArrowDown") {
-      let newYearInteger;
-      if (key === "ArrowUp")
-        newYearInteger = yearInteger + 1 <= 9999 ? yearInteger + 1 : yearInteger;
-      else
-        newYearInteger = yearInteger - 1 > 0 ? yearInteger - 1 : 1;
-      newYear = prependStringWithPlaceHolders(`${newYearInteger}`, 4);
-    }
-    const isAutomaticFillTrigger = newYear !== year && ["Tab", " "].includes(key);
-    const metainfo = { isAutomaticFillTrigger };
-    if (key === "ArrowUp" || key === "ArrowDown" || isAutomaticFillTrigger) {
-      handleChangeYear(newYear, e, metainfo);
-    }
-    let trackNextFocus = trackFocusResetter;
-    if (!hideTime)
-      trackNextFocus = trackFocusHourInput;
-    else if (withClearBtn)
-      trackNextFocus = trackFocusClearBtn;
-    else if (withAnyPicker)
-      trackNextFocus = trackFocusPicker;
-    if (["Home", "End", "ArrowUp", "ArrowDown", " "].includes(key))
-      e.preventDefault();
-    if (["Home", "End", "ArrowUp", "ArrowDown", " "].includes(key))
-      e.stopPropagation();
-    if (key === "Home")
-      onHomeKeyDown();
-    if (key === "End")
-      onEndKeyDown();
-    if (key === " ") {
-      trackNextFocus();
-    }
-    if (key === "Backspace" && year?.length === 0) {
-      trackFocusDayInput();
-    }
-    if ((ctrlKey || metaKey) && key === ";")
-      trackFocusLastSegment();
-  }, [
-    year,
-    trackFocusResetter,
-    hideTime,
-    trackFocusHourInput,
-    withClearBtn,
-    trackFocusClearBtn,
-    withAnyPicker,
-    trackFocusPicker,
-    onHomeKeyDown,
-    onEndKeyDown,
-    trackFocusLastSegment,
-    trackFocusDayInput,
-    handleChangeYear
-  ]);
+      if (key === "Backspace" && year?.length === 0) {
+        trackFocusDayInput();
+      }
+      if ((ctrlKey || metaKey) && key === ";")
+        trackFocusLastSegment();
+    },
+    [
+      year,
+      trackFocusResetter,
+      hideTime,
+      trackFocusHourInput,
+      withClearBtn,
+      trackFocusClearBtn,
+      withAnyPicker,
+      trackFocusPicker,
+      onHomeKeyDown,
+      onEndKeyDown,
+      trackFocusLastSegment,
+      trackFocusDayInput,
+      handleChangeYear
+    ]
+  );
   const onYearBlur = useCallback(() => {
   }, []);
-  return useMemo(() => ({
-    month,
-    day,
-    year,
-    autoFocusMonthInput,
-    disabled,
-    onMonthFocus,
-    onMonthChange,
-    onDayFocus,
-    onDayChange,
-    onYearFocus,
-    onYearChange,
-    onMonthBlur,
-    onDayBlur,
-    onYearBlur,
-    onMonthKeyDown,
-    onDayKeyDown,
-    onYearKeyDown
-  }), [
-    month,
-    day,
-    year,
-    autoFocusMonthInput,
-    disabled,
-    onMonthFocus,
-    onMonthChange,
-    onDayFocus,
-    onDayChange,
-    onYearFocus,
-    onYearChange,
-    onMonthBlur,
-    onDayBlur,
-    onYearBlur,
-    onMonthKeyDown,
-    onDayKeyDown,
-    onYearKeyDown
-  ]);
+  return useMemo(
+    () => ({
+      month,
+      day,
+      year,
+      autoFocusMonthInput,
+      innerRefMonthInput,
+      disabled,
+      onMonthFocus,
+      onMonthChange,
+      onDayFocus,
+      onDayChange,
+      onYearFocus,
+      onYearChange,
+      onMonthBlur,
+      onDayBlur,
+      onYearBlur,
+      onMonthKeyDown,
+      onDayKeyDown,
+      onYearKeyDown
+    }),
+    [
+      month,
+      day,
+      year,
+      autoFocusMonthInput,
+      innerRefMonthInput,
+      disabled,
+      onMonthFocus,
+      onMonthChange,
+      onDayFocus,
+      onDayChange,
+      onYearFocus,
+      onYearChange,
+      onMonthBlur,
+      onDayBlur,
+      onYearBlur,
+      onMonthKeyDown,
+      onDayKeyDown,
+      onYearKeyDown
+    ]
+  );
 };
 export {
   useDateInputs