@elliemae/ds-controlled-form 2.4.2-rc.1 → 2.4.2-rc.3

package/esm/date-time-picker/parts/TimeInputs/useTimeInputs.js

@@ -1,6 +1,5 @@
 import { useContext, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
-import { homeEndArrowUpDownSemiKeys, homeEndArrowUpDownSpaceKeys, homeEndArrowUpDownKeys } from '../../utils/constants.js';
 import { prependStringWithPlaceHolders } from '../../utils/stringHelpers.js';
 
 /* eslint-disable complexity */
@@ -9,66 +8,55 @@ const useTimeInputs = () => {
     props: {
       disabled
     },
-    lastSegmentRef,
     hours,
     minutes,
     meridiem,
-    hideDate,
     withAnyRightController,
     withAnyPicker,
     withClearBtn,
     isWithDateInputs,
-    hourInputRef,
-    minutesInputRef,
-    meridiemInputRef,
-    yearInputRef,
-    clearButtonRef,
-    pickerButtonRef,
-    monthInputRef,
     autoFocusHourInput,
     handleChangeHours,
     handleChangeMinutes,
     handleChangeMeridiem,
-    setLatestInteractionRegion,
-    minutesInterval
+    minutesInterval,
+    trackFocusFirstSegment,
+    trackFocusLastSegment,
+    trackFocusHourInput,
+    trackFocusMinuteInput,
+    trackFocusMeridiemInput,
+    trackFocusClearBtn,
+    trackFocusPicker,
+    trackFocusYearInput
   } = useContext(ControlledDateTimePickerContext);
-  const setLatestInteractionRegionTimeInputs = useCallback(() => {
-    setLatestInteractionRegion('time-inputs');
-  }, [setLatestInteractionRegion]);
   const onHomeKeyDown = useCallback(() => {
-    var _monthInputRef$curren, _monthInputRef$curren2, _hourInputRef$current, _hourInputRef$current2;
-
-    if (!hideDate) monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren = monthInputRef.current) === null || _monthInputRef$curren === void 0 ? void 0 : (_monthInputRef$curren2 = _monthInputRef$curren.focus) === null || _monthInputRef$curren2 === void 0 ? void 0 : _monthInputRef$curren2.call(_monthInputRef$curren);else hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current = hourInputRef.current) === null || _hourInputRef$current === void 0 ? void 0 : (_hourInputRef$current2 = _hourInputRef$current.focus) === null || _hourInputRef$current2 === void 0 ? void 0 : _hourInputRef$current2.call(_hourInputRef$current);
-  }, [hideDate, monthInputRef, hourInputRef]);
+    trackFocusFirstSegment();
+  }, [trackFocusFirstSegment]);
   const onEndKeyDown = useCallback(() => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2, _clearButtonRef$curre, _clearButtonRef$curre2, _meridiemInputRef$cur, _meridiemInputRef$cur2;
-
-    if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr = pickerButtonRef.current) === null || _pickerButtonRef$curr === void 0 ? void 0 : (_pickerButtonRef$curr2 = _pickerButtonRef$curr.focus) === null || _pickerButtonRef$curr2 === void 0 ? void 0 : _pickerButtonRef$curr2.call(_pickerButtonRef$curr);else if (withClearBtn) clearButtonRef === null || clearButtonRef === void 0 ? void 0 : (_clearButtonRef$curre = clearButtonRef.current) === null || _clearButtonRef$curre === void 0 ? void 0 : (_clearButtonRef$curre2 = _clearButtonRef$curre.focus) === null || _clearButtonRef$curre2 === void 0 ? void 0 : _clearButtonRef$curre2.call(_clearButtonRef$curre);else meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);
-  }, [withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef, meridiemInputRef]);
+    trackFocusLastSegment();
+  }, [trackFocusLastSegment]);
   const onHoursFocus = useCallback(() => {
-    setLatestInteractionRegionTimeInputs();
-  }, [setLatestInteractionRegionTimeInputs]);
+    trackFocusHourInput();
+  }, [trackFocusHourInput]);
   const onHoursChange = useCallback(e => {
-    var _e$target, _minutesInputRef$curr, _minutesInputRef$curr2;
+    var _e$target;
 
     let newHours = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value; // converts hours 2~9 to 07~09
 
     if (Number.parseInt(newHours, 10) > 1) newHours = prependStringWithPlaceHolders(newHours, 2);
     handleChangeHours(newHours, e); // auto-advance functionality:
 
-    if (newHours.length === 2) minutesInputRef === null || minutesInputRef === void 0 ? void 0 : (_minutesInputRef$curr = minutesInputRef.current) === null || _minutesInputRef$curr === void 0 ? void 0 : (_minutesInputRef$curr2 = _minutesInputRef$curr.focus) === null || _minutesInputRef$curr2 === void 0 ? void 0 : _minutesInputRef$curr2.call(_minutesInputRef$curr);
-  }, [minutesInputRef, handleChangeHours]);
+    if (newHours.length === 2) trackFocusMinuteInput();
+  }, [handleChangeHours, trackFocusMinuteInput]);
   const onHoursKeyDown = useCallback(e => {
-    var _lastSegmentRef$curre, _lastSegmentRef$curre2;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
     const hoursStringConvertedToInteger = Number.parseInt(hours, 10);
-    if (homeEndArrowUpDownSemiKeys.includes(key)) e.preventDefault();
-    if (homeEndArrowUpDownSemiKeys.includes(key)) e.stopPropagation();
+    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();
 
@@ -81,24 +69,20 @@ const useTimeInputs = () => {
     }
 
     if (!Number.isNaN(hoursStringConvertedToInteger) && key === ':') {
-      var _minutesInputRef$curr3, _minutesInputRef$curr4;
-
       const newHours = prependStringWithPlaceHolders("".concat(hoursStringConvertedToInteger), 2);
       handleChangeHours(newHours, e); // auto-advance functionality:
 
-      if (newHours.length === 2) minutesInputRef === null || minutesInputRef === void 0 ? void 0 : (_minutesInputRef$curr3 = minutesInputRef.current) === null || _minutesInputRef$curr3 === void 0 ? void 0 : (_minutesInputRef$curr4 = _minutesInputRef$curr3.focus) === null || _minutesInputRef$curr4 === void 0 ? void 0 : _minutesInputRef$curr4.call(_minutesInputRef$curr3);
+      if (newHours.length === 2) trackFocusMinuteInput();
     } // regressive backspace functionality
 
 
     if (key === 'Backspace' && hours.length === 0 && isWithDateInputs) {
-      var _yearInputRef$current, _yearInputRef$current2;
-
-      yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+      trackFocusYearInput();
     } // focus last fragment on fill with now
 
 
-    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre = lastSegmentRef.current) === null || _lastSegmentRef$curre === void 0 ? void 0 : (_lastSegmentRef$curre2 = _lastSegmentRef$curre.focus) === null || _lastSegmentRef$curre2 === void 0 ? void 0 : _lastSegmentRef$curre2.call(_lastSegmentRef$curre);
-  }, [hours, onHomeKeyDown, onEndKeyDown, isWithDateInputs, lastSegmentRef, handleChangeHours, minutesInputRef, yearInputRef]);
+    if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
+  }, [hours, isWithDateInputs, trackFocusYearInput, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, trackFocusMinuteInput, handleChangeHours]);
   const onHoursBlur = useCallback(e => {
     var _e$target2;
 
@@ -110,30 +94,27 @@ const useTimeInputs = () => {
     });
   }, [handleChangeHours]);
   const onMinutesFocus = useCallback(() => {
-    setLatestInteractionRegionTimeInputs();
-  }, [setLatestInteractionRegionTimeInputs]);
+    trackFocusMinuteInput();
+  }, [trackFocusMinuteInput]);
   const onMinutesChange = useCallback(e => {
-    var _e$target3, _meridiemInputRef$cur3, _meridiemInputRef$cur4;
+    var _e$target3;
 
     let newMinutes = e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.value; // converts minutes 7~9 to 07~09
 
     if (Number.parseInt(newMinutes, 10) > 6) newMinutes = prependStringWithPlaceHolders(newMinutes, 2);
     handleChangeMinutes(newMinutes, e); // auto-advance functionality:
-    // if (newMinutes.length === 2) secondsInputRef?.current?.focus?.();
 
-    if (newMinutes.length === 2) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur3 = meridiemInputRef.current) === null || _meridiemInputRef$cur3 === void 0 ? void 0 : (_meridiemInputRef$cur4 = _meridiemInputRef$cur3.focus) === null || _meridiemInputRef$cur4 === void 0 ? void 0 : _meridiemInputRef$cur4.call(_meridiemInputRef$cur3);
-  }, [meridiemInputRef, handleChangeMinutes]);
+    if (newMinutes.length === 2) trackFocusMeridiemInput();
+  }, [handleChangeMinutes, trackFocusMeridiemInput]);
   const onMinutesKeyDown = useCallback(e => {
-    var _lastSegmentRef$curre3, _lastSegmentRef$curre4;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
     const minutesStringConvertedToInteger = Number.parseInt(minutes, 10);
-    if (homeEndArrowUpDownSpaceKeys.includes(key)) e.preventDefault();
-    if (homeEndArrowUpDownSpaceKeys.includes(key)) e.stopPropagation();
+    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();
 
@@ -146,25 +127,20 @@ const useTimeInputs = () => {
     }
 
     if (!Number.isNaN(minutesStringConvertedToInteger) && key === ' ') {
-      var _meridiemInputRef$cur5, _meridiemInputRef$cur6;
-
       const newMinutes = prependStringWithPlaceHolders("".concat(minutesStringConvertedToInteger), 2);
       handleChangeMinutes(newMinutes, e); // auto-advance functionality:
-      // if (newMinutes.length === 2) secondsInputRef?.current?.focus?.();
 
-      if (newMinutes.length === 2) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur5 = meridiemInputRef.current) === null || _meridiemInputRef$cur5 === void 0 ? void 0 : (_meridiemInputRef$cur6 = _meridiemInputRef$cur5.focus) === null || _meridiemInputRef$cur6 === void 0 ? void 0 : _meridiemInputRef$cur6.call(_meridiemInputRef$cur5);
+      if (newMinutes.length === 2) trackFocusMeridiemInput();
     } // regressive backspace functionality
 
 
     if (key === 'Backspace' && (minutes === null || minutes === void 0 ? void 0 : minutes.length) === 0) {
-      var _hourInputRef$current3, _hourInputRef$current4;
-
-      hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current3 = hourInputRef.current) === null || _hourInputRef$current3 === void 0 ? void 0 : (_hourInputRef$current4 = _hourInputRef$current3.focus) === null || _hourInputRef$current4 === void 0 ? void 0 : _hourInputRef$current4.call(_hourInputRef$current3);
+      trackFocusHourInput();
     } // focus last fragment on fill with now
 
 
-    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre3 = lastSegmentRef.current) === null || _lastSegmentRef$curre3 === void 0 ? void 0 : (_lastSegmentRef$curre4 = _lastSegmentRef$curre3.focus) === null || _lastSegmentRef$curre4 === void 0 ? void 0 : _lastSegmentRef$curre4.call(_lastSegmentRef$curre3);
-  }, [minutes, onHomeKeyDown, onEndKeyDown, lastSegmentRef, minutesInterval, handleChangeMinutes, meridiemInputRef, hourInputRef]);
+    if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
+  }, [minutes, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, minutesInterval, handleChangeMinutes, trackFocusMeridiemInput, trackFocusHourInput]);
   const onMinutesBlur = useCallback(e => {
     var _e$target4;
 
@@ -174,8 +150,8 @@ const useTimeInputs = () => {
     });
   }, [handleChangeMinutes]);
   const onMeridiemFocus = useCallback(() => {
-    setLatestInteractionRegionTimeInputs();
-  }, [setLatestInteractionRegionTimeInputs]);
+    trackFocusMeridiemInput();
+  }, [trackFocusMeridiemInput]);
   const onMeridiemChange = useCallback(e => {
     var _e$target5, _e$target5$value, _e$target5$value$toUp;
 
@@ -187,35 +163,29 @@ const useTimeInputs = () => {
     handleChangeMeridiem(newMeridiem, e); // auto-advance functionality:
 
     if (newMeridiem.length === 2 && withAnyRightController) {
-      var _clearButtonRef$curre3, _clearButtonRef$curre4, _pickerButtonRef$curr3, _pickerButtonRef$curr4;
-
-      if (withClearBtn) (_clearButtonRef$curre3 = clearButtonRef.current) === null || _clearButtonRef$curre3 === void 0 ? void 0 : (_clearButtonRef$curre4 = _clearButtonRef$curre3.focus) === null || _clearButtonRef$curre4 === void 0 ? void 0 : _clearButtonRef$curre4.call(_clearButtonRef$curre3);else if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3);
+      if (withClearBtn) trackFocusClearBtn();else if (withAnyPicker) trackFocusPicker();
     }
-  }, [meridiem, handleChangeMeridiem, withAnyRightController, withClearBtn, clearButtonRef, withAnyPicker, pickerButtonRef]);
+  }, [meridiem, handleChangeMeridiem, withAnyRightController, withClearBtn, trackFocusClearBtn, withAnyPicker, trackFocusPicker]);
   const onMeridiemKeyDown = useCallback(e => {
-    var _lastSegmentRef$curre5, _lastSegmentRef$curre6;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
-    if (homeEndArrowUpDownKeys.includes(key)) e.preventDefault();
-    if (homeEndArrowUpDownKeys.includes(key)) e.stopPropagation();
+    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' && meridiem !== 'AM') handleChangeMeridiem('AM', e);
     if (key === 'ArrowDown' && meridiem !== 'PM') handleChangeMeridiem('PM', e); // regressive backspace functionality
 
     if (key === 'Backspace') {
-      var _minutesInputRef$curr5, _minutesInputRef$curr6;
-
-      if ((meridiem === null || meridiem === void 0 ? void 0 : meridiem.length) === 2) handleChangeMeridiem('', e);else minutesInputRef === null || minutesInputRef === void 0 ? void 0 : (_minutesInputRef$curr5 = minutesInputRef.current) === null || _minutesInputRef$curr5 === void 0 ? void 0 : (_minutesInputRef$curr6 = _minutesInputRef$curr5.focus) === null || _minutesInputRef$curr6 === void 0 ? void 0 : _minutesInputRef$curr6.call(_minutesInputRef$curr5);
+      if ((meridiem === null || meridiem === void 0 ? void 0 : meridiem.length) === 2) handleChangeMeridiem('', e);else trackFocusMinuteInput();
     } // focus last fragment on fill with now
 
 
-    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre5 = lastSegmentRef.current) === null || _lastSegmentRef$curre5 === void 0 ? void 0 : (_lastSegmentRef$curre6 = _lastSegmentRef$curre5.focus) === null || _lastSegmentRef$curre6 === void 0 ? void 0 : _lastSegmentRef$curre6.call(_lastSegmentRef$curre5);
-  }, [onHomeKeyDown, onEndKeyDown, meridiem, handleChangeMeridiem, lastSegmentRef, minutesInputRef]);
+    if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
+  }, [onHomeKeyDown, onEndKeyDown, meridiem, handleChangeMeridiem, trackFocusLastSegment, trackFocusMinuteInput]);
   const onMeridiemBlur = useCallback(e => {
     var _e$target6, _e$target6$value, _e$target6$value$toUp;
 

package/esm/date-time-picker/utils/constants.js

@@ -33,14 +33,8 @@ const announcableCardinalDays = {
   30: 'thirtieth',
   31: 'thirty first'
 };
-const homeEndAllArrowKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-const homeEndKeys = ['Home', 'End'];
-const homeEndArrowUpDownDashSlashesKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', '-', '/', '\\'];
-const homeEndArrowUpDownSpaceKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', ' '];
-const homeEndArrowUpDownSemiKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', ':'];
-const homeEndArrowUpDownKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
 const defaultMetaInfo = {
   isAutomaticFillTrigger: false
 };
 
-export { announcableCardinalDays, defaultMetaInfo, homeEndAllArrowKeys, homeEndArrowUpDownDashSlashesKeys, homeEndArrowUpDownKeys, homeEndArrowUpDownSemiKeys, homeEndArrowUpDownSpaceKeys, homeEndKeys, monthNames, weekDays };
+export { announcableCardinalDays, defaultMetaInfo, monthNames, weekDays };

package/esm/date-time-picker/utils/hooks/useGetStartingFocusedDay.js

@@ -25,50 +25,52 @@ const useGetStartingFocusedDay = () => {
     onCalendarOpenFocusedDay
   } = useContext(ControlledDateTimePickerContext);
   const dayFromInputValues = useGetDayFromDateString();
+  const {
+    month: inputValuesSplitMonth,
+    day: inputValuesSplitDay,
+    year: inputValuesDaySplitYear
+  } = dayFromInputValues ? getDateValuesFromDate(dayFromInputValues) : {
+    month: null,
+    day: null,
+    year: null
+  };
+  const isInputFilledAndValid = inputValuesSplitMonth && inputValuesSplitDay && inputValuesDaySplitYear && isValidDayForTheMonth(inputValuesSplitMonth, inputValuesDaySplitYear, inputValuesSplitDay);
+  const isOnCalendarOpenFocusedDayEmpty = !onCalendarOpenFocusedDay;
+  const shouldFillWithOnCalendarOpenFocusedDay = !isInputFilledAndValid && !isOnCalendarOpenFocusedDayEmpty;
   return useMemo(() => {
-    const startingDay = _objectSpread({}, empty);
+    const startingDay = _objectSpread({}, empty); // if input was filled start focus is the filled value (if it's valid day for the month)
 
-    if (dayFromInputValues) {
-      const {
-        month: inputValuesSplitMonth,
-        day: inputValuesSplitDay,
-        year: inputValuesDaySplitYear
-      } = getDateValuesFromDate(dayFromInputValues);
-      const isInputFilledAndValid = inputValuesSplitMonth && inputValuesSplitDay && inputValuesDaySplitYear && isValidDayForTheMonth(inputValuesSplitMonth, inputValuesDaySplitYear, inputValuesSplitDay);
-      const isOnCalendarOpenFocusedDayEmpty = !onCalendarOpenFocusedDay;
-      const shouldFillWithOnCalendarOpenFocusedDay = !isInputFilledAndValid && !isOnCalendarOpenFocusedDayEmpty; // if input was filled start focus is the filled value (if it's valid day for the month)
 
-      if (isInputFilledAndValid) {
-        startingDay.startFocusedMonth = inputValuesSplitMonth;
-        startingDay.startFocusedDay = inputValuesSplitDay;
-        startingDay.startFocusedYear = inputValuesDaySplitYear;
-        startingDay.startFocusedDate = dayFromInputValues; // if input was not filled (or filled invalid) and there is no onCalendarOpenFocusedDay start focus is not a day
-      } else if (isOnCalendarOpenFocusedDayEmpty) {
-        // if input was not filled and there is onCalendarOpenFocusedDay start focus is onCalendarOpenFocusedDay day
-        return empty;
-      } else if (shouldFillWithOnCalendarOpenFocusedDay) {
-        const {
-          month: focusedDaySplitMonth,
-          day: focusedDaySplitDay,
-          year: focusedDaySplitYear
-        } = deconstructValuesFromDateString(onCalendarOpenFocusedDay);
-        const monthAsInt = convertToPositiveNumberIfPossible(focusedDaySplitMonth);
-        const dayAsInt = convertToPositiveNumberIfPossible(focusedDaySplitDay);
-        const yearAsInt = convertToPositiveNumberIfPossible(focusedDaySplitYear); // if this condition is false, return will be the same as return empty
-        // because startFocusedMonth/Day/Year/Date will be === null
-        // which is the expected result
+    if (isInputFilledAndValid) {
+      startingDay.startFocusedMonth = inputValuesSplitMonth;
+      startingDay.startFocusedDay = inputValuesSplitDay;
+      startingDay.startFocusedYear = inputValuesDaySplitYear;
+      startingDay.startFocusedDate = dayFromInputValues; // if input was not filled (or filled invalid) and there is no onCalendarOpenFocusedDay start focus is not a day
+    } else if (isOnCalendarOpenFocusedDayEmpty) {
+      // if input was not filled and there is onCalendarOpenFocusedDay start focus is onCalendarOpenFocusedDay day
+      return empty;
+    } else if (shouldFillWithOnCalendarOpenFocusedDay) {
+      const {
+        month: focusedDaySplitMonth,
+        day: focusedDaySplitDay,
+        year: focusedDaySplitYear
+      } = deconstructValuesFromDateString(onCalendarOpenFocusedDay);
+      const monthAsInt = convertToPositiveNumberIfPossible(focusedDaySplitMonth);
+      const dayAsInt = convertToPositiveNumberIfPossible(focusedDaySplitDay);
+      const yearAsInt = convertToPositiveNumberIfPossible(focusedDaySplitYear); // if this condition is false, return will be the same as return empty
+      // because startFocusedMonth/Day/Year/Date will be === null
+      // which is the expected result
 
-        if (monthAsInt !== -1 && dayAsInt !== -1 && yearAsInt !== -1 && isValidDayForTheMonth(monthAsInt - 1, yearAsInt, dayAsInt)) {
-          startingDay.startFocusedMonth = monthAsInt;
-          startingDay.startFocusedDay = dayAsInt;
-          startingDay.startFocusedYear = yearAsInt;
-          startingDay.startFocusedDate = new Date(yearAsInt, monthAsInt - 1, dayAsInt);
-        }
+      if (monthAsInt !== -1 && dayAsInt !== -1 && yearAsInt !== -1 && isValidDayForTheMonth(monthAsInt - 1, yearAsInt, dayAsInt)) {
+        startingDay.startFocusedMonth = monthAsInt;
+        startingDay.startFocusedDay = dayAsInt;
+        startingDay.startFocusedYear = yearAsInt;
+        startingDay.startFocusedDate = new Date(yearAsInt, monthAsInt - 1, dayAsInt);
       }
     }
 
     return startingDay;
-  }, [dayFromInputValues, onCalendarOpenFocusedDay]);
+  }, [dayFromInputValues, inputValuesDaySplitYear, inputValuesSplitDay, inputValuesSplitMonth, isInputFilledAndValid, isOnCalendarOpenFocusedDayEmpty, onCalendarOpenFocusedDay, shouldFillWithOnCalendarOpenFocusedDay]);
 };
 
 export { useGetStartingFocusedDay };

package/esm/toggle/ControlledToggle.js

@@ -1,11 +1,11 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { uid } from 'uid';
 import { describe } from 'react-desc';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-controlled-form",
-  "version": "2.4.2-rc.1",
+  "version": "2.4.2-rc.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Controllers",
   "module": "./esm/index.js",
@@ -511,6 +511,10 @@
       "import": "./esm/date-time-picker/config/useGetDestructuredValues.js",
       "require": "./cjs/date-time-picker/config/useGetDestructuredValues.js"
     },
+    "./date-time-picker/config/useFocusTracker": {
+      "import": "./esm/date-time-picker/config/useFocusTracker.js",
+      "require": "./cjs/date-time-picker/config/useFocusTracker.js"
+    },
     "./date-time-picker/config/useControlledDateTimePicker": {
       "import": "./esm/date-time-picker/config/useControlledDateTimePicker.js",
       "require": "./cjs/date-time-picker/config/useControlledDateTimePicker.js"
@@ -872,20 +876,20 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.4.2-rc.1",
-    "@elliemae/ds-circular-progress-indicator": "2.4.2-rc.1",
-    "@elliemae/ds-controlled-form": "2.4.2-rc.1",
-    "@elliemae/ds-form": "2.4.2-rc.1",
-    "@elliemae/ds-form-layout-blocks": "2.4.2-rc.1",
-    "@elliemae/ds-grid": "2.4.2-rc.1",
-    "@elliemae/ds-icon": "2.4.2-rc.1",
-    "@elliemae/ds-icons": "2.4.2-rc.1",
-    "@elliemae/ds-pills": "2.4.2-rc.1",
-    "@elliemae/ds-popperjs": "2.4.2-rc.1",
-    "@elliemae/ds-props-helpers": "2.4.2-rc.1",
-    "@elliemae/ds-system": "2.4.2-rc.1",
-    "@elliemae/ds-tooltip": "2.4.2-rc.1",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.1",
+    "@elliemae/ds-button": "2.4.2-rc.3",
+    "@elliemae/ds-circular-progress-indicator": "2.4.2-rc.3",
+    "@elliemae/ds-controlled-form": "2.4.2-rc.3",
+    "@elliemae/ds-form": "2.4.2-rc.3",
+    "@elliemae/ds-form-layout-blocks": "2.4.2-rc.3",
+    "@elliemae/ds-grid": "2.4.2-rc.3",
+    "@elliemae/ds-icon": "2.4.2-rc.3",
+    "@elliemae/ds-icons": "2.4.2-rc.3",
+    "@elliemae/ds-pills": "2.4.2-rc.3",
+    "@elliemae/ds-popperjs": "2.4.2-rc.3",
+    "@elliemae/ds-props-helpers": "2.4.2-rc.3",
+    "@elliemae/ds-system": "2.4.2-rc.3",
+    "@elliemae/ds-tooltip": "2.4.2-rc.3",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.3",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",

package/types/date-time-picker/config/useChangeHandlers.d.ts

@@ -2,6 +2,7 @@ import { useRelevantValueFromProps } from './useRelevantValueFromProps';
 import { useGetDestructuredValues } from './useGetDestructuredValues';
 import { useGetPropsBasedOnType } from './useGetPropsBasedOnType';
 import { useGetReferences } from './useGetReferences';
+import { useFocusTracker } from './useFocusTracker';
 import type { DSControlledDateTimePickerT } from '../propTypes';
 import type { DSControlledDateTimePickerInternalsT } from '../sharedTypes';
 interface Config {
@@ -9,8 +10,9 @@ interface Config {
     destructuredValues: ReturnType<typeof useGetDestructuredValues>;
     propsBasedOnType: ReturnType<typeof useGetPropsBasedOnType>;
     DOMRefs: ReturnType<typeof useGetReferences>;
+    focusTrackers: ReturnType<typeof useFocusTracker>;
 }
-export declare const useChangeHandlers: ({ relevantValues, destructuredValues, propsBasedOnType, DOMRefs }: Config) => {
+export declare const useChangeHandlers: ({ relevantValues, destructuredValues, propsBasedOnType, focusTrackers }: Config) => {
     handleChangeComposedDateTimeString: (newDateString: string, newTimeString: string, metaInfo: DSControlledDateTimePickerT.InternalInputsChangeMetaInfo) => void;
     handleChangeComposedDateString: (newDateString: string, metaInfo: Partial<DSControlledDateTimePickerT.InternalInputsChangeMetaInfo>) => void;
     handleChangeComposedTimeString: (newTimeString: string, metaInfo: Partial<DSControlledDateTimePickerT.InternalInputsChangeMetaInfo>) => void;

package/types/date-time-picker/config/useControlledDateTimePicker.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useFocusTracker } from './useFocusTracker';
 import { useGetFlags } from './useGetFlags';
 import { useGetReferences } from './useGetReferences';
 import { useRelevantValueFromProps } from './useRelevantValueFromProps';
@@ -7,12 +7,9 @@ import { useGetDestructuredValues } from './useGetDestructuredValues';
 import { useChangeHandlers } from './useChangeHandlers';
 import { useGlobalKeyHandlers } from './useGlobalKeyHandlers';
 import type { DSControlledDateTimePickerT } from '../propTypes';
-export declare type LatestInteractionRegion = 'calendar-days' | 'calendar-head' | 'timewheel' | 'date-inputs' | 'time-inputs' | 'clear-btn' | '';
-export declare type ControlledDateTimePickerContextT = ReturnType<typeof useGetFlags> & ReturnType<typeof useGetReferences> & ReturnType<typeof useGetPropsBasedOnType> & ReturnType<typeof useRelevantValueFromProps> & ReturnType<typeof useGetDestructuredValues> & ReturnType<typeof useChangeHandlers> & ReturnType<typeof useGlobalKeyHandlers> & {
+export declare type ControlledDateTimePickerContextT = ReturnType<typeof useGetFlags> & ReturnType<typeof useFocusTracker> & ReturnType<typeof useGetReferences> & ReturnType<typeof useGetPropsBasedOnType> & ReturnType<typeof useRelevantValueFromProps> & ReturnType<typeof useGetDestructuredValues> & ReturnType<typeof useChangeHandlers> & ReturnType<typeof useGlobalKeyHandlers> & {
     props: DSControlledDateTimePickerT.InternalProps;
     ariaCurrentValueForInputs: string;
     dataAttrs: Record<string, string>;
-    latestInteractionRegion: LatestInteractionRegion;
-    setLatestInteractionRegion: React.Dispatch<React.SetStateAction<LatestInteractionRegion>>;
 };
 export declare const useControlledDateTimePicker: (props: DSControlledDateTimePickerT.Props) => ControlledDateTimePickerContextT;

package/types/date-time-picker/config/useFocusTracker.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { useGetReferences } from './useGetReferences';
+import { useGetFlags } from './useGetFlags';
+declare type LatestInteractionRegion = 'calendar-days' | 'calendar-head' | 'timewheel' | 'date-inputs' | 'time-inputs' | 'clear-btn' | 'picker-icon' | '';
+declare type CurrFocusDescriber = 'first-segment' | 'month-input' | 'day-input' | 'year-input' | 'hour-input' | 'minute-input' | 'meridiem-input' | 'last-segment' | 'clear-btn' | 'date-picker-icon' | 'time-picker-icon' | 'datetime-picker-icon' | 'calendar-prev-month' | 'calendar-next-month' | 'calendar-prev-year' | 'calendar-next-year' | 'calendar-metafocused-day' | 'timewheel-curr-hour' | 'timewheel-curr-minute' | 'timewheel-curr-meridiem' | '';
+interface Config {
+    DOMRefs: ReturnType<typeof useGetReferences>;
+    flags: ReturnType<typeof useGetFlags>;
+}
+export declare const useFocusTracker: ({ DOMRefs, flags }: Config) => {
+    latestInteractionRegion: LatestInteractionRegion;
+    setLatestInteractionRegion: import("react").Dispatch<import("react").SetStateAction<LatestInteractionRegion>>;
+    currFocusDescriber: CurrFocusDescriber;
+    setCurrFocusDescriber: import("react").Dispatch<import("react").SetStateAction<CurrFocusDescriber>>;
+    trackFocusResetter: () => void;
+    trackFocusMonthInput: () => void;
+    trackFocusDayInput: () => void;
+    trackFocusYearInput: () => void;
+    trackFocusHourInput: () => void;
+    trackFocusMinuteInput: () => void;
+    trackFocusMeridiemInput: () => void;
+    trackFocusClearBtn: () => void;
+    trackFocusDatePickerIcon: () => void;
+    trackFocusTimePickerIcon: () => void;
+    trackFocusDatetimePickerIcon: () => void;
+    trackFocusCalendarPrevMonth: () => void;
+    trackFocusCalendarNextMonth: () => void;
+    trackFocusCalendarPrevYear: () => void;
+    trackFocusCalendarNextYear: () => void;
+    trackFocusCalendarMetafocusedDay: () => void;
+    trackFocusTimewheelCurrHour: () => void;
+    trackFocusTimewheelCurrMinute: () => void;
+    trackFocusTimewheelCurrMeridiem: () => void;
+    trackFocusPicker: () => void;
+    trackFocusFirstSegment: () => void;
+    trackFocusLastSegment: () => void;
+};
+export {};

package/types/date-time-picker/config/useGetPropsBasedOnType.d.ts

@@ -1,16 +1,16 @@
 import type { DSControlledDateTimePickerT } from '../propTypes';
 export declare const useGetPropsBasedOnType: (propsWithDefaults: DSControlledDateTimePickerT.InternalProps) => {
-    getIsDisabledDay: any;
-    getIsOutOfRangeDay: any;
-    getIsStartRangeDay: any;
-    getIsDayInRange: any;
-    getIsEndRangeDay: any;
+    getIsDisabledDay: BooleanGetter<string>;
+    getIsOutOfRangeDay: BooleanGetter<string>;
+    getIsStartRangeDay: BooleanGetter<string> | (() => void);
+    getIsDayInRange: BooleanGetter<string> | (() => void);
+    getIsEndRangeDay: BooleanGetter<string> | (() => void);
     appOnDateChange: DSControlledDateTimePickerT.OnDateChange;
     appOnMonthChange: DSControlledDateTimePickerT.OnInternalInputsChange;
     appOnDayChange: DSControlledDateTimePickerT.OnInternalInputsChange;
     appOnYearChange: DSControlledDateTimePickerT.OnInternalInputsChange;
     appDate: string;
-    getIsDisabledTime: any;
+    getIsDisabledTime: BooleanGetter<string>;
     appOnTimeChange: DSControlledDateTimePickerT.OnTimeChange;
     appOnHourChange: DSControlledDateTimePickerT.OnInternalInputsChange;
     appOnMinuteChange: DSControlledDateTimePickerT.OnInternalInputsChange;

package/types/date-time-picker/config/useGetReferences.d.ts

@@ -1,39 +1,33 @@
 /// <reference types="react" />
 import { useGetFlags } from './useGetFlags';
-export declare const useGetReferences: ({ isWithDateInputs, isWithTimeInputs, withAnyPicker, withClearBtn, }: ReturnType<typeof useGetFlags>) => {
-    monthInputRef: import("react").RefObject<HTMLInputElement>;
-    dayInputRef: import("react").RefObject<HTMLInputElement>;
-    yearInputRef: import("react").RefObject<HTMLInputElement>;
-    hourInputRef: import("react").RefObject<HTMLInputElement>;
-    minutesInputRef: import("react").RefObject<HTMLInputElement>;
-    meridiemInputRef: import("react").RefObject<HTMLInputElement>;
-    clearButtonRef: import("react").RefObject<HTMLButtonElement>;
-    pickerButtonRef: import("react").RefObject<HTMLButtonElement>;
-    prevYearBtnRef: import("react").RefObject<HTMLButtonElement>;
-    prevMonthBtnRef: import("react").RefObject<HTMLButtonElement>;
-    nextMonthBtnRef: import("react").RefObject<HTMLButtonElement>;
-    nextYearBtnRef: import("react").RefObject<HTMLButtonElement>;
-    calendarDaysWrapperRef: import("react").RefObject<HTMLDivElement>;
-    prevHourBtnRef: import("react").RefObject<HTMLButtonElement>;
-    currHourBtnRef: import("react").RefObject<HTMLButtonElement>;
-    nextHourBtnRef: import("react").RefObject<HTMLButtonElement>;
-    prevMinutesBtnRef: import("react").RefObject<HTMLButtonElement>;
-    currMinutesBtnRef: import("react").RefObject<HTMLButtonElement>;
-    nextMinutesBtnRef: import("react").RefObject<HTMLButtonElement>;
-    prevMeridiemBtnRef: import("react").RefObject<HTMLButtonElement>;
-    currMeridiemBtnRef: import("react").RefObject<HTMLButtonElement>;
-    nextMeridiemBtnRef: import("react").RefObject<HTMLButtonElement>;
-    firstSegmentRef: import("react").RefObject<HTMLInputElement | HTMLButtonElement>;
-    lastSegmentRef: import("react").RefObject<HTMLInputElement | HTMLButtonElement>;
-    firstFragmentRefUpdateDeps: {
-        isWithDateInputs: boolean;
-        isWithTimeInputs: boolean;
-        withAnyPicker: boolean;
-    };
-    lastFragmentRefUpdateDeps: {
-        withAnyPicker: boolean;
-        withClearBtn: boolean;
-        isWithTimeInputs: boolean;
-        isWithDateInputs: boolean;
-    };
+declare type FirstSegment = 'month-input' | 'hour-input' | 'date-picker-icon' | 'time-picker-icon' | 'datetime-picker-icon' | '';
+declare type LastSegment = 'year-input' | 'meridiem-input' | 'clear-btn' | 'date-picker-icon' | 'time-picker-icon' | 'datetime-picker-icon' | '';
+export declare const useGetReferences: ({ isWithDateInputs, isWithTimeInputs, isDateSelector, isTimeSelector, isDateTimeSelector, withAnyPicker, withClearBtn, }: ReturnType<typeof useGetFlags>) => {
+    monthInputRef: import("react").MutableRefObject<HTMLInputElement>;
+    dayInputRef: import("react").MutableRefObject<HTMLInputElement>;
+    yearInputRef: import("react").MutableRefObject<HTMLInputElement>;
+    hourInputRef: import("react").MutableRefObject<HTMLInputElement>;
+    minutesInputRef: import("react").MutableRefObject<HTMLInputElement>;
+    meridiemInputRef: import("react").MutableRefObject<HTMLInputElement>;
+    clearButtonRef: import("react").MutableRefObject<HTMLButtonElement>;
+    pickerButtonRef: import("react").MutableRefObject<HTMLButtonElement>;
+    prevYearBtnRef: import("react").MutableRefObject<HTMLButtonElement>;
+    prevMonthBtnRef: import("react").MutableRefObject<HTMLButtonElement>;
+    nextMonthBtnRef: import("react").MutableRefObject<HTMLButtonElement>;
+    nextYearBtnRef: import("react").MutableRefObject<HTMLButtonElement>;
+    calendarDaysWrapperRef: import("react").MutableRefObject<HTMLDivElement>;
+    prevHourBtnRef: import("react").MutableRefObject<HTMLButtonElement>;
+    currHourBtnRef: import("react").MutableRefObject<HTMLButtonElement>;
+    nextHourBtnRef: import("react").MutableRefObject<HTMLButtonElement>;
+    prevMinutesBtnRef: import("react").MutableRefObject<HTMLButtonElement>;
+    currMinutesBtnRef: import("react").MutableRefObject<HTMLButtonElement>;
+    nextMinutesBtnRef: import("react").MutableRefObject<HTMLButtonElement>;
+    prevMeridiemBtnRef: import("react").MutableRefObject<HTMLButtonElement>;
+    currMeridiemBtnRef: import("react").MutableRefObject<HTMLButtonElement>;
+    nextMeridiemBtnRef: import("react").MutableRefObject<HTMLButtonElement>;
+    firstSegmentRef: import("react").MutableRefObject<HTMLInputElement | HTMLButtonElement>;
+    lastSegmentRef: import("react").MutableRefObject<HTMLInputElement | HTMLButtonElement>;
+    firstSegment: FirstSegment;
+    lastSegment: LastSegment;
 };
+export {};

package/types/date-time-picker/config/useGlobalKeyHandlers.d.ts

@@ -2,14 +2,16 @@ import { useChangeHandlers } from './useChangeHandlers';
 import { useGetPropsBasedOnType } from './useGetPropsBasedOnType';
 import { useGetReferences } from './useGetReferences';
 import { useGetFlags } from './useGetFlags';
+import { useFocusTracker } from './useFocusTracker';
 import type { DSControlledDateTimePickerT } from '../propTypes';
 interface Config {
     propsBasedOnType: ReturnType<typeof useGetPropsBasedOnType>;
     changeHandlers: ReturnType<typeof useChangeHandlers>;
     DOMRefs: ReturnType<typeof useGetReferences>;
     flags: ReturnType<typeof useGetFlags>;
+    focusTrackers: ReturnType<typeof useFocusTracker>;
 }
-export declare const useGlobalKeyHandlers: ({ propsBasedOnType, changeHandlers, DOMRefs, flags }: Config) => {
+export declare const useGlobalKeyHandlers: ({ propsBasedOnType, changeHandlers, flags, focusTrackers }: Config) => {
     onFillWithCurrentDateKeys: (e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>, metaInfo?: Partial<DSControlledDateTimePickerT.InternalInputsChangeMetaInfo>) => void;
     onGlobalKeyDown: (e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => void;
 };