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

package/esm/date-time-picker/parts/ControlledDateTimePickerContent.js

@@ -31,13 +31,13 @@ const ControlledDateTimePickerContent = () => {
     hideTime,
     hideTimePicker,
     hideDateTimePicker,
-    setLatestInteractionRegion,
     withAnyPicker,
     withAnyRightController,
     shouldPreserveClearableSpace,
     isControllerOnly,
     dataAttrs,
-    onGlobalKeyDown
+    onGlobalKeyDown,
+    trackFocusResetter
   } = React.useContext(ControlledDateTimePickerContext);
   const styledsAttrs = {
     justPicker: hideDate && hideTime,
@@ -45,9 +45,6 @@ const ControlledDateTimePickerContent = () => {
     hasError,
     isControllerOnly
   };
-  const resetLatestInteraction = React.useCallback(() => {
-    setLatestInteractionRegion('');
-  }, [setLatestInteractionRegion]);
   const mainCols = [];
   if (!hideDate) mainCols.push('auto');
   if (!hideTime) mainCols.push('auto');
@@ -60,9 +57,9 @@ const ControlledDateTimePickerContent = () => {
       cols: mainCols,
       gutter: "xxs",
       pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : undefined,
-      onBlur: resetLatestInteraction,
       onKeyDown: onGlobalKeyDown,
-      disabled: disabled
+      disabled: disabled,
+      onBlur: trackFocusResetter
     }, styledsAttrs), dataAttrs), {}, {
       children: [hideDate ? null : _DateInputs || (_DateInputs = /*#__PURE__*/_jsx(DateInputs, {})), hideTime ? null : _TimeInputs || (_TimeInputs = /*#__PURE__*/_jsx(TimeInputs, {})), withAnyRightController ? /*#__PURE__*/_jsx(Grid, {
         cols: rightControlCols

package/esm/date-time-picker/parts/DateInputs/DDInput.js

@@ -21,12 +21,11 @@ const DDInput = /*#__PURE__*/React.memo(_ref => {
     disabled,
     contextRef,
     placeholder,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    isFocused
   } = _ref;
   const validateOnChange = useCallback(e => {
-    var _e$target;
-
-    if (isInvalidDay(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidDay(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -39,9 +38,12 @@ const DDInput = /*#__PURE__*/React.memo(_ref => {
     onFocus: onFocus,
     onKeyDown: onKeyDown,
     value: value,
-    ref: contextRef,
+    ref: DomElem => {
+      contextRef.current = DomElem;
+      if (isFocused) DomElem?.focus?.();
+    },
     placeholder: placeholder,
-    "aria-label": "day input field, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `day input field, ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
     disabled: disabled,
     "aria-disabled": disabled

package/esm/date-time-picker/parts/DateInputs/DateInputs.js

@@ -35,7 +35,9 @@ const DateInputs = () => {
     monthInputRef,
     dayInputRef,
     yearInputRef,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    latestInteractionRegion,
+    currFocusDescriber
   } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(Grid, {
     cols: [fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.largeInputWidth]
@@ -49,7 +51,8 @@ const DateInputs = () => {
     autoFocusMonthInput: autoFocusMonthInput,
     placeholder: "MM",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    disabled: disabled
+    disabled: disabled,
+    isFocused: latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'month-input'
   })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
     alignItems: "center"
   }, void 0, "/")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(DDInput, {
@@ -61,7 +64,8 @@ const DateInputs = () => {
     contextRef: dayInputRef,
     placeholder: "DD",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    disabled: disabled
+    disabled: disabled,
+    isFocused: latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'day-input'
   })), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_jsx(StyledSeparator, {
     alignItems: "center"
   }, void 0, "/")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(YYYYInput, {
@@ -73,7 +77,8 @@ const DateInputs = () => {
     contextRef: yearInputRef,
     placeholder: "YYYY",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    disabled: disabled
+    disabled: disabled,
+    isFocused: latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'year-input'
   })));
 };
 

package/esm/date-time-picker/parts/DateInputs/MMInput.js

@@ -22,12 +22,11 @@ const MMInput = /*#__PURE__*/React.memo(_ref => {
     placeholder,
     contextRef,
     autoFocusMonthInput,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    isFocused
   } = _ref;
   const validateOnChange = useCallback(e => {
-    var _e$target;
-
-    if (isInvalidMonth(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidMonth(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -41,9 +40,12 @@ const MMInput = /*#__PURE__*/React.memo(_ref => {
     onFocus: onFocus,
     onKeyDown: onKeyDown,
     value: value,
-    ref: contextRef,
+    ref: DomElem => {
+      contextRef.current = DomElem;
+      if (isFocused) DomElem?.focus?.();
+    },
     placeholder: placeholder,
-    "aria-label": "month input field, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `month input field, ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
     disabled: disabled,
     "aria-disabled": disabled

package/esm/date-time-picker/parts/DateInputs/YYYYInput.js

@@ -21,12 +21,11 @@ const YYYYInput = /*#__PURE__*/React.memo(_ref => {
     disabled,
     placeholder,
     contextRef,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    isFocused
   } = _ref;
   const validateOnChange = useCallback(e => {
-    var _e$target;
-
-    if (isInvalidYear(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidYear(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -39,9 +38,12 @@ const YYYYInput = /*#__PURE__*/React.memo(_ref => {
     onFocus: onFocus,
     onKeyDown: onKeyDown,
     value: value,
-    ref: contextRef,
+    ref: DomElem => {
+      contextRef.current = DomElem;
+      if (isFocused) DomElem?.focus?.();
+    },
     placeholder: placeholder,
-    "aria-label": "year input field, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `year input field, ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR,
     disabled: disabled,
     "aria-disabled": disabled

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

@@ -8,7 +8,7 @@ import { useContext, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
 import { getFormattedDateString, prependStringWithPlaceHolders, fillStringWithPlaceHolders } from '../../utils/stringHelpers.js';
 import { getValidationDateStringMetaInfo } from '../../utils/dateHelpers.js';
-import { homeEndArrowUpDownDashSlashesKeys, homeEndArrowUpDownSpaceKeys, defaultMetaInfo } from '../../utils/constants.js';
+import { defaultMetaInfo } from '../../utils/constants.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -27,34 +27,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
   } = useContext(ControlledDateTimePickerContext);
   const onHomeKeyDown = 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 = 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 = useCallback(() => {
-    setLatestInteractionRegion('date-inputs');
-  }, [setLatestInteractionRegion]);
+    trackFocusLastSegment();
+  }, [trackFocusLastSegment]);
   const handleChangeMonth = useCallback(function (newMonth, e) {
     let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
     const newDateString = getFormattedDateString({
@@ -71,29 +64,25 @@ const useDateInputs = () => {
     handleChangeComposedDateString(newDateString, finalMetaInfo);
   }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
   const onMonthFocus = useCallback(() => {
-    setLatestInteractionRegionDateInputs();
-  }, [setLatestInteractionRegionDateInputs]);
+    trackFocusMonthInput();
+  }, [trackFocusMonthInput]);
   const onMonthChange = 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 = 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 = useCallback(e => {
-    var _lastSegmentRef$curre, _lastSegmentRef$curre2;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
     const monthStringConvertedToInteger = Number.parseInt(month, 10);
-    if (homeEndArrowUpDownDashSlashesKeys.includes(key)) e.preventDefault();
-    if (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();
 
@@ -101,26 +90,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 = prependStringWithPlaceHolders("".concat(newMonth), 2);
+      newMonth = prependStringWithPlaceHolders(`${newMonth}`, 2);
       handleChangeMonth(newMonth, e);
     }
 
     if (!Number.isNaN(monthStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
-      var _dayInputRef$current2, _dayInputRef$current3;
-
-      const newMonth = prependStringWithPlaceHolders("".concat(monthStringConvertedToInteger), 2);
+      const newMonth = 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 = 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(prependStringWithPlaceHolders(newMonth, 2), e, {
@@ -143,29 +128,25 @@ const useDateInputs = () => {
     handleChangeComposedDateString(newDateString, finalMetaInfo);
   }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
   const onDayFocus = useCallback(() => {
-    setLatestInteractionRegionDateInputs();
-  }, [setLatestInteractionRegionDateInputs]);
+    trackFocusDayInput();
+  }, [trackFocusDayInput]);
   const onDayChange = 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 = 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 = useCallback(e => {
-    var _lastSegmentRef$curre3, _lastSegmentRef$curre4;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
     const dayStringConvertedToInteger = Number.parseInt(day, 10);
-    if (homeEndArrowUpDownDashSlashesKeys.includes(key)) e.preventDefault();
-    if (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();
 
@@ -173,33 +154,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 = prependStringWithPlaceHolders("".concat(newDay), 2);
+      newDay = prependStringWithPlaceHolders(`${newDay}`, 2);
       handleChangeDay(newDay, e);
     }
 
     if (!Number.isNaN(dayStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
-      var _yearInputRef$current5, _yearInputRef$current6;
-
-      const newDay = prependStringWithPlaceHolders("".concat(dayStringConvertedToInteger), 2);
+      const newDay = 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 = 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(prependStringWithPlaceHolders(newDay, 2), e, {
@@ -222,79 +197,75 @@ const useDateInputs = () => {
     handleChangeComposedDateString(newDateString, finalMetaInfo);
   }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
   const onYearFocus = useCallback(() => {
-    setLatestInteractionRegionDateInputs();
-  }, [setLatestInteractionRegionDateInputs]);
+    trackFocusYearInput();
+  }, [trackFocusYearInput]);
   const onYearChange = 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 = useCallback(e => {
-    var _lastSegmentRef$curre5, _lastSegmentRef$curre6;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
+    /* ****** New year value calculator logic ********* */
+
     const yearStringConvertedToInteger = Number.parseInt(year, 10);
-    if (homeEndArrowUpDownSpaceKeys.includes(key)) e.preventDefault();
-    if (homeEndArrowUpDownSpaceKeys.includes(key)) e.stopPropagation();
-    if (key === 'Home') onHomeKeyDown();
-    if (key === 'End') onEndKeyDown();
+    const yearInteger = Number.isNaN(yearStringConvertedToInteger) ? 0 : yearStringConvertedToInteger;
+    let newYear = yearInteger !== 0 ? 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 = 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 = prependStringWithPlaceHolders(`${newYearInteger}`, 4);
     }
 
-    if (!Number.isNaN(yearStringConvertedToInteger) && key === ' ') {
-      const newYear = 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 = 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(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 = useCallback(() => {// this was used before, now that we have a wrapping onBlur resetting the focus tracker, this is unused;
+  }, []);
   return useMemo(() => ({
     month,
     day,

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

@@ -19,7 +19,7 @@ const CalendarDaysList = /*#__PURE__*/React.memo(_ref => {
     children: [invisibleFirstDay ? /*#__PURE__*/_jsx(Day, {
       metaDay: invisibleFirstDay,
       isInvisible: true
-    }, "ds-calendar-".concat(invisibleFirstDay.day.toString())) : null, daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx(StyledWeekDaysListWrapper, {
+    }, `ds-calendar-${invisibleFirstDay.day.toString()}`) : null, daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx(StyledWeekDaysListWrapper, {
       role: "row",
       "aria-rowindex": i + 1,
       cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
@@ -28,13 +28,13 @@ const CalendarDaysList = /*#__PURE__*/React.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(Day, {
+    }, `ds-calendar-week-${week[0].day.toString()}-${week[6].day.toString()}`, week.map((metaDay, z) => /*#__PURE__*/_jsx(Day, {
       metaDay: metaDay,
       colIndex: z + 1
-    }, "ds-calendar-".concat(metaDay.day.toString()))))), invisibleLastDay ? /*#__PURE__*/_jsx(Day, {
+    }, `ds-calendar-${metaDay.day.toString()}`)))), invisibleLastDay ? /*#__PURE__*/_jsx(Day, {
       metaDay: invisibleLastDay,
       isInvisible: true
-    }, "ds-calendar-".concat(invisibleLastDay.day.toString())) : null]
+    }, `ds-calendar-${invisibleLastDay.day.toString()}`) : null]
   });
 });
 

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

@@ -1,5 +1,5 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useMemo, useContext } from 'react';
+import { useMemo, useContext, useCallback } from 'react';
 import { BUTTON_SIZES } from '@elliemae/ds-button';
 import { ChevronDoubleLeft, ChevronLeft, ChevronRight, ChevronDoubleRight } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
@@ -15,8 +15,8 @@ const useGetFormattedCurrentDate = () => {
     currentMonth,
     currentYear
   } = useContext(CalendarContext);
-  const monthString = currentMonth >= 0 && currentMonth <= 11 ? "".concat(getMonthNameByMonthNumber(currentMonth), " ") : '';
-  return useMemo(() => "".concat(monthString).concat(currentYear), [monthString, currentYear]);
+  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';
+  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);
 };
 
 const CalendarHead = () => {
@@ -41,14 +41,32 @@ const CalendarHead = () => {
     prevYearBtnRef,
     prevMonthBtnRef,
     nextMonthBtnRef,
-    nextYearBtnRef
+    nextYearBtnRef,
+    latestInteractionRegion,
+    currFocusDescriber
   } = useContext(ControlledDateTimePickerContext);
+  const handlePrevYearRef = useCallback(ButtonDomNode => {
+    prevYearBtnRef.current = ButtonDomNode;
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year') ButtonDomNode?.focus?.();
+  }, [currFocusDescriber, latestInteractionRegion, prevYearBtnRef]);
+  const handlePrevMonthRef = useCallback(ButtonDomNode => {
+    prevMonthBtnRef.current = ButtonDomNode;
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month') ButtonDomNode?.focus?.();
+  }, [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef]);
+  const handleNextMonthRef = useCallback(ButtonDomNode => {
+    nextMonthBtnRef.current = ButtonDomNode;
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month') ButtonDomNode?.focus?.();
+  }, [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef]);
+  const handleNextYearRef = useCallback(ButtonDomNode => {
+    nextYearBtnRef.current = ButtonDomNode;
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year') ButtonDomNode?.focus?.();
+  }, [currFocusDescriber, latestInteractionRegion, nextYearBtnRef]);
   return /*#__PURE__*/_jsx(StyledHeader, {}, void 0, /*#__PURE__*/_jsx(StyledHeaderButton, {
     "aria-label": "previous year",
     buttonType: "raw",
     size: BUTTON_SIZES.M,
     onClick: handlePrevYear,
-    innerRef: prevYearBtnRef,
+    innerRef: handlePrevYearRef,
     onKeyDown: handlePrevYearKeyDown,
     onFocus: onPrevYearFocus,
     tabIndex: isControllerOnly ? -1 : 1,
@@ -63,7 +81,7 @@ const CalendarHead = () => {
     buttonType: "raw",
     size: BUTTON_SIZES.M,
     onClick: handlePrevMonth,
-    innerRef: prevMonthBtnRef,
+    innerRef: handlePrevMonthRef,
     onKeyDown: handlePrevMonthKeyDown,
     onFocus: onPrevMonthFocus,
     "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH // this is a tabstop for when the calendar is open
@@ -75,7 +93,7 @@ const CalendarHead = () => {
     buttonType: "raw",
     size: BUTTON_SIZES.M,
     onClick: handleNextMonth,
-    innerRef: nextMonthBtnRef,
+    innerRef: handleNextMonthRef,
     onKeyDown: handleNextMonthKeyDown,
     onFocus: onNextMonthFocus,
     "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH
@@ -86,7 +104,7 @@ const CalendarHead = () => {
     buttonType: "raw",
     size: BUTTON_SIZES.M,
     onClick: handleNextYear,
-    innerRef: nextYearBtnRef,
+    innerRef: handleNextYearRef,
     onKeyDown: handleNextYearKeyDown,
     onFocus: onNextYearFocus,
     "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR

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

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