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

package/cjs/date-time-picker/parts/DateInputs/useDateInputs.js

@@ -35,34 +35,27 @@ const useDateInputs = () => {
     day,
     year,
     hideTime,
-    monthInputRef,
-    dayInputRef,
-    yearInputRef,
-    hourInputRef,
-    meridiemInputRef,
-    clearButtonRef,
-    pickerButtonRef,
     handleChangeComposedDateString,
-    setLatestInteractionRegion,
     withClearBtn,
     withAnyPicker,
     withAnyRightController,
     autoFocusMonthInput,
-    lastSegmentRef
+    trackFocusResetter,
+    trackFocusFirstSegment,
+    trackFocusLastSegment,
+    trackFocusDayInput,
+    trackFocusMonthInput,
+    trackFocusYearInput,
+    trackFocusHourInput,
+    trackFocusClearBtn,
+    trackFocusPicker
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const onHomeKeyDown = React.useCallback(() => {
-    var _monthInputRef$curren, _monthInputRef$curren2;
-
-    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);
-  }, [monthInputRef]);
+    trackFocusFirstSegment();
+  }, [trackFocusFirstSegment]);
   const onEndKeyDown = React.useCallback(() => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2, _clearButtonRef$curre, _clearButtonRef$curre2, _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
-
-    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 if (!hideTime) 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);else 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);
-  }, [withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef, hideTime, meridiemInputRef, yearInputRef]);
-  const setLatestInteractionRegionDateInputs = React.useCallback(() => {
-    setLatestInteractionRegion('date-inputs');
-  }, [setLatestInteractionRegion]);
+    trackFocusLastSegment();
+  }, [trackFocusLastSegment]);
   const handleChangeMonth = React.useCallback(function (newMonth, e) {
     let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
     const newDateString = stringHelpers.getFormattedDateString({
@@ -79,29 +72,25 @@ const useDateInputs = () => {
     handleChangeComposedDateString(newDateString, finalMetaInfo);
   }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
   const onMonthFocus = React.useCallback(() => {
-    setLatestInteractionRegionDateInputs();
-  }, [setLatestInteractionRegionDateInputs]);
+    trackFocusMonthInput();
+  }, [trackFocusMonthInput]);
   const onMonthChange = React.useCallback(e => {
-    var _e$target, _dayInputRef$current, _dayInputRef$current$;
-
-    let newMonth = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value; // converts months 2~9 to 02~09
+    let newMonth = e?.target?.value; // converts months 2~9 to 02~09
 
     if (Number.parseInt(newMonth, 10) > 1) newMonth = stringHelpers.prependStringWithPlaceHolders(newMonth, 2);
     handleChangeMonth(newMonth, e); // auto-advance functionality:
 
-    if (newMonth.length === 2) dayInputRef === null || dayInputRef === void 0 ? void 0 : (_dayInputRef$current = dayInputRef.current) === null || _dayInputRef$current === void 0 ? void 0 : (_dayInputRef$current$ = _dayInputRef$current.focus) === null || _dayInputRef$current$ === void 0 ? void 0 : _dayInputRef$current$.call(_dayInputRef$current);
-  }, [dayInputRef, handleChangeMonth]);
+    if (newMonth.length === 2) trackFocusDayInput();
+  }, [handleChangeMonth, trackFocusDayInput]);
   const onMonthKeyDown = React.useCallback(e => {
-    var _lastSegmentRef$curre, _lastSegmentRef$curre2;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
     const monthStringConvertedToInteger = Number.parseInt(month, 10);
-    if (constants.homeEndArrowUpDownDashSlashesKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndArrowUpDownDashSlashesKeys.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();
 
@@ -109,26 +98,22 @@ const useDateInputs = () => {
       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 = stringHelpers.prependStringWithPlaceHolders("".concat(newMonth), 2);
+      newMonth = stringHelpers.prependStringWithPlaceHolders(`${newMonth}`, 2);
       handleChangeMonth(newMonth, e);
     }
 
     if (!Number.isNaN(monthStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
-      var _dayInputRef$current2, _dayInputRef$current3;
-
-      const newMonth = stringHelpers.prependStringWithPlaceHolders("".concat(monthStringConvertedToInteger), 2);
+      const newMonth = stringHelpers.prependStringWithPlaceHolders(`${monthStringConvertedToInteger}`, 2);
       handleChangeMonth(newMonth, e); // auto-advance functionality:
 
-      if (newMonth.length === 2) dayInputRef === null || dayInputRef === void 0 ? void 0 : (_dayInputRef$current2 = dayInputRef.current) === null || _dayInputRef$current2 === void 0 ? void 0 : (_dayInputRef$current3 = _dayInputRef$current2.focus) === null || _dayInputRef$current3 === void 0 ? void 0 : _dayInputRef$current3.call(_dayInputRef$current2);
+      if (newMonth.length === 2) trackFocusDayInput();
     } // 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);
-  }, [month, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeMonth, dayInputRef]);
+    if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
+  }, [month, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, trackFocusDayInput, handleChangeMonth]);
   const onMonthBlur = React.useCallback(e => {
-    var _e$target2;
-
-    const newMonth = e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value;
+    const newMonth = e?.target?.value;
     if (newMonth === '0') handleChangeMonth('01', e, {
       isAutomaticFillTrigger: true
     });else if (newMonth.length > 0 && newMonth.length < 2) handleChangeMonth(stringHelpers.prependStringWithPlaceHolders(newMonth, 2), e, {
@@ -151,29 +136,25 @@ const useDateInputs = () => {
     handleChangeComposedDateString(newDateString, finalMetaInfo);
   }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
   const onDayFocus = React.useCallback(() => {
-    setLatestInteractionRegionDateInputs();
-  }, [setLatestInteractionRegionDateInputs]);
+    trackFocusDayInput();
+  }, [trackFocusDayInput]);
   const onDayChange = React.useCallback(e => {
-    var _e$target3, _yearInputRef$current3, _yearInputRef$current4;
-
-    let newDay = e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.value; // converts days 4~9 to 04~09
+    let newDay = e?.target?.value; // converts days 4~9 to 04~09
 
     if (Number.parseInt(newDay, 10) > 3) newDay = stringHelpers.prependStringWithPlaceHolders(newDay, 2);
     handleChangeDay(newDay, e); // auto-advance functionality:
 
-    if (newDay.length === 2) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current3 = yearInputRef.current) === null || _yearInputRef$current3 === void 0 ? void 0 : (_yearInputRef$current4 = _yearInputRef$current3.focus) === null || _yearInputRef$current4 === void 0 ? void 0 : _yearInputRef$current4.call(_yearInputRef$current3);
-  }, [handleChangeDay, yearInputRef]);
+    if (newDay.length === 2) trackFocusYearInput();
+  }, [handleChangeDay, trackFocusYearInput]);
   const onDayKeyDown = React.useCallback(e => {
-    var _lastSegmentRef$curre3, _lastSegmentRef$curre4;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
     const dayStringConvertedToInteger = Number.parseInt(day, 10);
-    if (constants.homeEndArrowUpDownDashSlashesKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndArrowUpDownDashSlashesKeys.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();
 
@@ -181,33 +162,27 @@ const useDateInputs = () => {
       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 = stringHelpers.prependStringWithPlaceHolders("".concat(newDay), 2);
+      newDay = stringHelpers.prependStringWithPlaceHolders(`${newDay}`, 2);
       handleChangeDay(newDay, e);
     }
 
     if (!Number.isNaN(dayStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
-      var _yearInputRef$current5, _yearInputRef$current6;
-
-      const newDay = stringHelpers.prependStringWithPlaceHolders("".concat(dayStringConvertedToInteger), 2);
+      const newDay = stringHelpers.prependStringWithPlaceHolders(`${dayStringConvertedToInteger}`, 2);
       handleChangeDay(newDay, e); // auto-advance functionality:
 
-      if (newDay.length === 2) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current5 = yearInputRef.current) === null || _yearInputRef$current5 === void 0 ? void 0 : (_yearInputRef$current6 = _yearInputRef$current5.focus) === null || _yearInputRef$current6 === void 0 ? void 0 : _yearInputRef$current6.call(_yearInputRef$current5);
+      if (newDay.length === 2) trackFocusYearInput();
     } // regressive backspace functionality
 
 
-    if (key === 'Backspace' && (day === null || day === void 0 ? void 0 : day.length) === 0) {
-      var _monthInputRef$curren3, _monthInputRef$curren4;
-
-      monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren3 = monthInputRef.current) === null || _monthInputRef$curren3 === void 0 ? void 0 : (_monthInputRef$curren4 = _monthInputRef$curren3.focus) === null || _monthInputRef$curren4 === void 0 ? void 0 : _monthInputRef$curren4.call(_monthInputRef$curren3);
+    if (key === 'Backspace' && day?.length === 0) {
+      trackFocusMonthInput();
     } // 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);
-  }, [day, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeDay, yearInputRef, monthInputRef]);
+    if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
+  }, [day, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, handleChangeDay, trackFocusYearInput, trackFocusMonthInput]);
   const onDayBlur = React.useCallback(e => {
-    var _e$target4;
-
-    const newDay = e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.value;
+    const newDay = e?.target?.value;
     if (newDay === '0') handleChangeDay('01', e, {
       isAutomaticFillTrigger: true
     });else if (newDay.length > 0 && newDay.length < 2) handleChangeDay(stringHelpers.prependStringWithPlaceHolders(newDay, 2), e, {
@@ -230,79 +205,75 @@ const useDateInputs = () => {
     handleChangeComposedDateString(newDateString, finalMetaInfo);
   }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
   const onYearFocus = React.useCallback(() => {
-    setLatestInteractionRegionDateInputs();
-  }, [setLatestInteractionRegionDateInputs]);
+    trackFocusYearInput();
+  }, [trackFocusYearInput]);
   const onYearChange = React.useCallback(e => {
-    var _e$target5;
-
-    const newYear = e === null || e === void 0 ? void 0 : (_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : _e$target5.value;
+    const newYear = e?.target?.value;
     handleChangeYear(newYear, e); // auto-advance functionality:
 
     if (newYear.length === 4) {
-      var _hourInputRef$current, _hourInputRef$current2;
-
-      if (!hideTime) 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);else if (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); // pending approval from Seda, check which one should be focused first...
+      if (!hideTime) trackFocusHourInput();else if (withAnyRightController) {
+        if (withClearBtn) trackFocusClearBtn();else if (withAnyPicker) trackFocusPicker(); // pending approval from Seda, check which one should be focused first...
       }
     }
-  }, [handleChangeYear, hideTime, hourInputRef, withAnyRightController, withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef]);
+  }, [handleChangeYear, hideTime, trackFocusHourInput, withAnyRightController, withClearBtn, trackFocusClearBtn, withAnyPicker, trackFocusPicker]);
   const onYearKeyDown = React.useCallback(e => {
-    var _lastSegmentRef$curre5, _lastSegmentRef$curre6;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
+    /* ****** New year value calculator logic ********* */
+
     const yearStringConvertedToInteger = Number.parseInt(year, 10);
-    if (constants.homeEndArrowUpDownSpaceKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndArrowUpDownSpaceKeys.includes(key)) e.stopPropagation();
-    if (key === 'Home') onHomeKeyDown();
-    if (key === 'End') onEndKeyDown();
+    const yearInteger = Number.isNaN(yearStringConvertedToInteger) ? 0 : yearStringConvertedToInteger;
+    let newYear = yearInteger !== 0 ? stringHelpers.fillStringWithPlaceHolders(`${yearInteger}`, 4, '0') : '';
 
     if (key === 'ArrowUp' || key === 'ArrowDown') {
-      const yearInteger = Number.isNaN(yearStringConvertedToInteger) ? 0 : yearStringConvertedToInteger;
-      let newYear;
-      if (key === 'ArrowUp') newYear = yearInteger + 1 <= 9999 ? yearInteger + 1 : yearInteger;else newYear = yearInteger - 1 > 0 ? yearInteger - 1 : 1;
-      newYear = stringHelpers.prependStringWithPlaceHolders("".concat(newYear), 4);
-      handleChangeYear(newYear, e);
+      let newYearInteger;
+      if (key === 'ArrowUp') newYearInteger = yearInteger + 1 <= 9999 ? yearInteger + 1 : yearInteger;else newYearInteger = yearInteger - 1 > 0 ? yearInteger - 1 : 1;
+      newYear = stringHelpers.prependStringWithPlaceHolders(`${newYearInteger}`, 4);
     }
 
-    if (!Number.isNaN(yearStringConvertedToInteger) && key === ' ') {
-      const newYear = stringHelpers.prependStringWithPlaceHolders("".concat(yearStringConvertedToInteger), 4);
-      handleChangeYear(newYear, e); // auto-advance functionality:
+    const isAutomaticFillTrigger = newYear !== year && ['Tab', ' '].includes(key);
+    const metainfo = {
+      isAutomaticFillTrigger
+    };
+    /* ************* new year apply logic ************* */
+    // tab/spacebar applies auto-fill
+    // arrows up/down applies increment/decrement
 
-      if (newYear.length === 4) {
-        var _hourInputRef$current3, _hourInputRef$current4;
+    if (key === 'ArrowUp' || key === 'ArrowDown' || isAutomaticFillTrigger) {
+      handleChangeYear(newYear, e, metainfo);
+    }
+    /* ************* focus tracking logic ************* */
 
-        if (!hideTime) 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);else if (withAnyRightController) {
-          var _clearButtonRef$curre5, _clearButtonRef$curre6, _pickerButtonRef$curr5, _pickerButtonRef$curr6;
 
-          if (withClearBtn) (_clearButtonRef$curre5 = clearButtonRef.current) === null || _clearButtonRef$curre5 === void 0 ? void 0 : (_clearButtonRef$curre6 = _clearButtonRef$curre5.focus) === null || _clearButtonRef$curre6 === void 0 ? void 0 : _clearButtonRef$curre6.call(_clearButtonRef$curre5);else if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr5 = pickerButtonRef.current) === null || _pickerButtonRef$curr5 === void 0 ? void 0 : (_pickerButtonRef$curr6 = _pickerButtonRef$curr5.focus) === null || _pickerButtonRef$curr6 === void 0 ? void 0 : _pickerButtonRef$curr6.call(_pickerButtonRef$curr5); // pending approval from Seda, check which one should be focused first...
-        }
-      }
-    } // regressive backspace functionality
+    let trackNextFocus = trackFocusResetter; // if nothing after, we reset internal focus tracker to avoid re-render unexpected focus shift
 
+    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();
+    /* ************** auto-advance logic ************** */
 
-    if (key === 'Backspace' && (year === null || year === void 0 ? void 0 : year.length) === 0) {
-      var _dayInputRef$current4, _dayInputRef$current5;
+    if (key === ' ') {
+      // auto-advance functionality:
+      trackNextFocus();
+    }
+    /* ********** regressive backspace logic ********** */
 
-      dayInputRef === null || dayInputRef === void 0 ? void 0 : (_dayInputRef$current4 = dayInputRef.current) === null || _dayInputRef$current4 === void 0 ? void 0 : (_dayInputRef$current5 = _dayInputRef$current4.focus) === null || _dayInputRef$current5 === void 0 ? void 0 : _dayInputRef$current5.call(_dayInputRef$current4);
-    } // focus last fragment on fill with now
 
+    if (key === 'Backspace' && year?.length === 0) {
+      trackFocusDayInput();
+    } // 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);
-  }, [year, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeYear, hideTime, hourInputRef, withAnyRightController, withClearBtn, clearButtonRef, withAnyPicker, pickerButtonRef, dayInputRef]);
-  const onYearBlur = React.useCallback(e => {
-    var _e$target6;
 
-    const newYear = e === null || e === void 0 ? void 0 : (_e$target6 = e.target) === null || _e$target6 === void 0 ? void 0 : _e$target6.value;
-    if (newYear.length > 0 && newYear.length < 4) handleChangeYear(stringHelpers.fillStringWithPlaceHolders(newYear, 4, '0'), e, {
-      isAutomaticFillTrigger: true
-    });
-  }, [handleChangeYear]);
+    if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
+  }, [year, trackFocusResetter, hideTime, trackFocusHourInput, withClearBtn, trackFocusClearBtn, withAnyPicker, trackFocusPicker, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, trackFocusDayInput, handleChangeYear]);
+  const onYearBlur = React.useCallback(() => {// this was used before, now that we have a wrapping onBlur resetting the focus tracker, this is unused;
+  }, []);
   return React.useMemo(() => ({
     month,
     day,

package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarDaysList.js

@@ -28,7 +28,7 @@ const CalendarDaysList = /*#__PURE__*/React__default["default"].memo(_ref => {
     children: [invisibleFirstDay ? /*#__PURE__*/_jsx__default["default"](Day.Day, {
       metaDay: invisibleFirstDay,
       isInvisible: true
-    }, "ds-calendar-".concat(invisibleFirstDay.day.toString())) : null, daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysListWrapper, {
+    }, `ds-calendar-${invisibleFirstDay.day.toString()}`) : null, daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysListWrapper, {
       role: "row",
       "aria-rowindex": i + 1,
       cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
@@ -37,13 +37,13 @@ const CalendarDaysList = /*#__PURE__*/React__default["default"].memo(_ref => {
       px: "2px",
       justifyContent: "space-between",
       alignItems: "center"
-    }, "ds-calendar-week-".concat(week[0].day.toString(), "-").concat(week[6].day.toString()), week.map((metaDay, z) => /*#__PURE__*/_jsx__default["default"](Day.Day, {
+    }, `ds-calendar-week-${week[0].day.toString()}-${week[6].day.toString()}`, week.map((metaDay, z) => /*#__PURE__*/_jsx__default["default"](Day.Day, {
       metaDay: metaDay,
       colIndex: z + 1
-    }, "ds-calendar-".concat(metaDay.day.toString()))))), invisibleLastDay ? /*#__PURE__*/_jsx__default["default"](Day.Day, {
+    }, `ds-calendar-${metaDay.day.toString()}`)))), invisibleLastDay ? /*#__PURE__*/_jsx__default["default"](Day.Day, {
       metaDay: invisibleLastDay,
       isInvisible: true
-    }, "ds-calendar-".concat(invisibleLastDay.day.toString())) : null]
+    }, `ds-calendar-${invisibleLastDay.day.toString()}`) : null]
   });
 });
 

package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarHead.js

@@ -23,8 +23,8 @@ const useGetFormattedCurrentDate = () => {
     currentMonth,
     currentYear
   } = React.useContext(CalendarContext.CalendarContext);
-  const monthString = currentMonth >= 0 && currentMonth <= 11 ? "".concat(dateHelpers.getMonthNameByMonthNumber(currentMonth), " ") : '';
-  return React.useMemo(() => "".concat(monthString).concat(currentYear), [monthString, currentYear]);
+  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${dateHelpers.getMonthNameByMonthNumber(currentMonth)} ` : '';
+  return React.useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);
 };
 
 const CalendarHead = () => {
@@ -49,14 +49,32 @@ const CalendarHead = () => {
     prevYearBtnRef,
     prevMonthBtnRef,
     nextMonthBtnRef,
-    nextYearBtnRef
+    nextYearBtnRef,
+    latestInteractionRegion,
+    currFocusDescriber
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const handlePrevYearRef = React.useCallback(ButtonDomNode => {
+    prevYearBtnRef.current = ButtonDomNode;
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year') ButtonDomNode?.focus?.();
+  }, [currFocusDescriber, latestInteractionRegion, prevYearBtnRef]);
+  const handlePrevMonthRef = React.useCallback(ButtonDomNode => {
+    prevMonthBtnRef.current = ButtonDomNode;
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month') ButtonDomNode?.focus?.();
+  }, [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef]);
+  const handleNextMonthRef = React.useCallback(ButtonDomNode => {
+    nextMonthBtnRef.current = ButtonDomNode;
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month') ButtonDomNode?.focus?.();
+  }, [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef]);
+  const handleNextYearRef = React.useCallback(ButtonDomNode => {
+    nextYearBtnRef.current = ButtonDomNode;
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year') ButtonDomNode?.focus?.();
+  }, [currFocusDescriber, latestInteractionRegion, nextYearBtnRef]);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeader, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
     "aria-label": "previous year",
     buttonType: "raw",
     size: DSButton.BUTTON_SIZES.M,
     onClick: handlePrevYear,
-    innerRef: prevYearBtnRef,
+    innerRef: handlePrevYearRef,
     onKeyDown: handlePrevYearKeyDown,
     onFocus: onPrevYearFocus,
     tabIndex: isControllerOnly ? -1 : 1,
@@ -71,7 +89,7 @@ const CalendarHead = () => {
     buttonType: "raw",
     size: DSButton.BUTTON_SIZES.M,
     onClick: handlePrevMonth,
-    innerRef: prevMonthBtnRef,
+    innerRef: handlePrevMonthRef,
     onKeyDown: handlePrevMonthKeyDown,
     onFocus: onPrevMonthFocus,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH // this is a tabstop for when the calendar is open
@@ -83,7 +101,7 @@ const CalendarHead = () => {
     buttonType: "raw",
     size: DSButton.BUTTON_SIZES.M,
     onClick: handleNextMonth,
-    innerRef: nextMonthBtnRef,
+    innerRef: handleNextMonthRef,
     onKeyDown: handleNextMonthKeyDown,
     onFocus: onNextMonthFocus,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH
@@ -94,7 +112,7 @@ const CalendarHead = () => {
     buttonType: "raw",
     size: DSButton.BUTTON_SIZES.M,
     onClick: handleNextYear,
-    innerRef: nextYearBtnRef,
+    innerRef: handleNextYearRef,
     onKeyDown: handleNextYearKeyDown,
     onFocus: onNextYearFocus,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR

package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js

@@ -32,7 +32,7 @@ const CalendarIconTrigger = () => {
     ariaCurrentValueForInputs
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Styleds.StyledIconTriggerButton, {
-    "aria-label": "date picker context menu trigger, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `date picker context menu trigger, ${ariaCurrentValueForInputs}`,
     buttonType: "icon",
     size: DSButton.BUTTON_SIZES.M,
     innerRef: handleSetTriggerRef,

package/cjs/date-time-picker/parts/Pickers/Calendar/Day.js

@@ -58,17 +58,16 @@ const Day = _ref => {
     appOnDayChange,
     appOnYearChange,
     latestInteractionRegion,
-    setLatestInteractionRegion,
-    isWithTimeWheelToo
+    isWithTimeWheelToo,
+    trackFocusCalendarMetafocusedDay
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const {
     focusedDay,
     handleDayOnKeyDown,
     handleFocusMetaDayByDay,
-    closeCalendar,
-    tryToFocusCurrentlyDataIsFocusedDay
+    closeCalendar
   } = React.useContext(CalendarContext.CalendarContext);
-  const isFocusedMetaDay = focusedDay !== null && focusedDay !== void 0 && focusedDay.day ? dateHelpers.compareTwoDatesDayEquality(metaDay === null || metaDay === void 0 ? void 0 : metaDay.day, focusedDay === null || focusedDay === void 0 ? void 0 : focusedDay.day) : false;
+  const isFocusedMetaDay = focusedDay?.day ? dateHelpers.compareTwoDatesDayEquality(metaDay?.day, focusedDay?.day) : false;
   const isSelected = React.useMemo(() => {
     const selectedDate = dateHelpers.getDayFromDateString(dateStringFromProps);
     return selectedDate ? dateHelpers.isSameDateMoment(day, selectedDate) : false;
@@ -81,7 +80,6 @@ const Day = _ref => {
   const isDayInRange = !isStartRangeDay && !isEndRangeDay && getIsDayInRange(metaDay.dayAsString);
   const handleOnDayClick = React.useCallback(e => {
     handleFocusMetaDayByDay(day);
-    tryToFocusCurrentlyDataIsFocusedDay();
 
     if (!isDisabled && !isOutOfRange) {
       const newDateString = dateHelpers.getDateStringFromDay(day);
@@ -95,18 +93,24 @@ const Day = _ref => {
         day: dayNumber,
         year
       } = dateHelpers.getDateValuesFromDate(day);
-      appOnMonthChange("".concat(month + 1), e, metaInfo);
-      if (dayNumber) appOnDayChange("".concat(dayNumber), e, metaInfo);
-      appOnYearChange("".concat(year), e, metaInfo);
+      appOnMonthChange(`${month + 1}`, e, metaInfo);
+      if (dayNumber) appOnDayChange(`${dayNumber}`, e, metaInfo);
+      appOnYearChange(`${year}`, e, metaInfo);
       handleChangeComposedDateString(newDateString, metaInfo);
-      setLatestInteractionRegion('calendar-days');
+      trackFocusCalendarMetafocusedDay();
       if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();
     }
-  }, [isDisabled, isOutOfRange, day, appOnMonthChange, appOnDayChange, appOnYearChange, handleChangeComposedDateString, handleFocusMetaDayByDay, tryToFocusCurrentlyDataIsFocusedDay, setLatestInteractionRegion, isWithTimeWheelToo, preventCloseOnSelection, closeCalendar]);
+  }, [handleFocusMetaDayByDay, day, isDisabled, isOutOfRange, appOnMonthChange, appOnDayChange, appOnYearChange, handleChangeComposedDateString, trackFocusCalendarMetafocusedDay, isWithTimeWheelToo, preventCloseOnSelection, closeCalendar]);
+  const handleInnerRef = React.useCallback(ButtonDomNode => {
+    window.requestAnimationFrame(() => {
+      dayBtnRef.current = ButtonDomNode;
+      if (isFocused) ButtonDomNode?.focus?.();
+    });
+  }, [dayBtnRef, isFocused]);
   const handleOnDayFocus = React.useCallback(() => {
-    setLatestInteractionRegion('calendar-days');
-  }, [setLatestInteractionRegion]);
-  const dayClassModifiers = React.useMemo(() => "dayWrapper ".concat(isSelected ? 'selectedDay ' : '').concat(isDisabled ? 'disabledDay ' : '').concat(isOutOfRange ? 'outOfRangeDay ' : '').concat(isFocused ? 'focusedDay ' : '').concat(isStartRangeDay ? 'startRangeDay ' : '').concat(isDayInRange ? 'inRangeDay ' : '').concat(isEndRangeDay ? 'endRangeDay ' : '').concat(isCurrMonthDay ? '' : 'notCurrentMonth'), [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay]);
+    trackFocusCalendarMetafocusedDay('calendar-days');
+  }, [trackFocusCalendarMetafocusedDay]);
+  const dayClassModifiers = React.useMemo(() => `dayWrapper ${isSelected ? 'selectedDay ' : ''}${isDisabled ? 'disabledDay ' : ''}${isOutOfRange ? 'outOfRangeDay ' : ''}${isFocused ? 'focusedDay ' : ''}${isStartRangeDay ? 'startRangeDay ' : ''}${isDayInRange ? 'inRangeDay ' : ''}${isEndRangeDay ? 'endRangeDay ' : ''}${isCurrMonthDay ? '' : 'notCurrentMonth'}`, [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay]);
   let dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.DAY;
   if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;
   if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;
@@ -122,7 +126,7 @@ const Day = _ref => {
     'aria-colindex': colIndex
   }), {}, {
     children: /*#__PURE__*/_jsx__default["default"](Styleds.StyledDayBtn, {
-      "aria-label": "".concat(stringHelpers.getAriaDayFromDateString(dayAsString), ", ").concat(constants.weekDays[metaDay.day.getDay()]),
+      "aria-label": `${stringHelpers.getAriaDayFromDateString(dayAsString)}, ${constants.weekDays[metaDay.day.getDay()]}`,
       "aria-disabled": isOutOfRange || isDisabled,
       "aria-hidden": !!isInvisible,
       buttonType: "raw",
@@ -133,11 +137,11 @@ const Day = _ref => {
       onKeyDown: e => {
         handleDayOnKeyDown(e, metaDay);
       },
-      innerRef: dayBtnRef,
+      innerRef: handleInnerRef,
       tabIndex: isSelected ? 0 : -1,
       "data-isfocused": isFocused,
       "data-testid": dataTestid
-    }, void 0, "".concat(day.getDate()))
+    }, void 0, `${day.getDate()}`)
   }));
 };
 

package/cjs/date-time-picker/parts/Pickers/Calendar/Styleds.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
 var dsGrid = require('@elliemae/ds-grid');
@@ -10,46 +9,76 @@ var DSButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const diagonalLine = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ", ";\n  }\n"])), _ref => {
+/* eslint-disable max-lines */
+const diagonalLine = dsSystem.css`
+  &:before {
+    position: absolute;
+    content: '';
+    top: 48%;
+    left: -2px;
+    height: 1px;
+    width: calc(100% + 4px);
+    transform: rotate(45deg);
+    background-color: ${_ref => {
   let {
     theme
   } = _ref;
   return theme.colors.neutral[500];
-});
-const focusBorder = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n"])));
+}};
+  }
+`;
+const focusBorder = dsSystem.css`
+  &:after {
+    position: absolute;
+    content: '';
+    top: -4px;
+    left: -4px;
+    width: calc(100% + 8px);
+    height: calc(100% + 8px);
+    border-radius: 50%;
+  }
+`;
 const backgroundDateRange = {
-  inRange: dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n    background-color: ", ";\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref2 => {
+  inRange: dsSystem.css`
+    background-color: ${_ref2 => {
     let {
       theme
     } = _ref2;
     return theme.colors.brand[200];
-  }, _ref3 => {
+  }};
+    box-shadow: 4px 0 0 0 ${_ref3 => {
     let {
       theme
     } = _ref3;
     return theme.colors.brand[200];
-  }),
-  startRange: dsSystem.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n    background-color: ", ";\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref4 => {
+  }};
+  `,
+  startRange: dsSystem.css`
+    background-color: ${_ref4 => {
     let {
       theme
     } = _ref4;
     return theme.colors.brand[200];
-  }, _ref5 => {
+  }};
+    border-radius: 50% 0 0 50%;
+    box-shadow: 4px 0 0 0 ${_ref5 => {
     let {
       theme
     } = _ref5;
     return theme.colors.brand[200];
-  }),
-  endRange: dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n    background-color: ", ";\n    border-radius: 0 50% 50% 0;\n  "])), _ref6 => {
+  }};
+  `,
+  endRange: dsSystem.css`
+    background-color: ${_ref6 => {
     let {
       theme
     } = _ref6;
     return theme.colors.brand[200];
-  })
+  }};
+    border-radius: 0 50% 50% 0;
+  `
 };
 const StyledIconTriggerButton = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV2).withConfig({
   componentId: "sc-1vlmm1g-0"
@@ -139,7 +168,7 @@ const StyledWeekDaysListWrapper = /*#__PURE__*/styled__default["default"](dsGrid
     isHeader,
     theme
   } = _ref19;
-  return isHeader ? "background: ".concat(theme.colors.neutral['050']) : '';
+  return isHeader ? `background: ${theme.colors.neutral['050']}` : '';
 }, _ref20 => {
   let {
     isHeader