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

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,27 @@ 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$;
+    var _e$target;
 
     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
 
     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();
 
@@ -106,17 +97,15 @@ const useDateInputs = () => {
     }
 
     if (!Number.isNaN(monthStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
-      var _dayInputRef$current2, _dayInputRef$current3;
-
       const newMonth = prependStringWithPlaceHolders("".concat(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;
 
@@ -143,29 +132,27 @@ 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;
+    var _e$target3;
 
     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
 
     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();
 
@@ -178,24 +165,20 @@ const useDateInputs = () => {
     }
 
     if (!Number.isNaN(dayStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
-      var _yearInputRef$current5, _yearInputRef$current6;
-
       const newDay = prependStringWithPlaceHolders("".concat(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);
+      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;
 
@@ -222,8 +205,8 @@ 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;
 
@@ -231,70 +214,68 @@ const useDateInputs = () => {
     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("".concat(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("".concat(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 === null || year === void 0 ? void 0 : 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/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';
@@ -41,14 +41,40 @@ const CalendarHead = () => {
     prevYearBtnRef,
     prevMonthBtnRef,
     nextMonthBtnRef,
-    nextYearBtnRef
+    nextYearBtnRef,
+    latestInteractionRegion,
+    currFocusDescriber
   } = useContext(ControlledDateTimePickerContext);
+  const handlePrevYearRef = useCallback(ButtonDomNode => {
+    var _ButtonDomNode$focus;
+
+    prevYearBtnRef.current = ButtonDomNode;
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus = ButtonDomNode.focus) === null || _ButtonDomNode$focus === void 0 ? void 0 : _ButtonDomNode$focus.call(ButtonDomNode);
+  }, [currFocusDescriber, latestInteractionRegion, prevYearBtnRef]);
+  const handlePrevMonthRef = useCallback(ButtonDomNode => {
+    var _ButtonDomNode$focus2;
+
+    prevMonthBtnRef.current = ButtonDomNode;
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus2 = ButtonDomNode.focus) === null || _ButtonDomNode$focus2 === void 0 ? void 0 : _ButtonDomNode$focus2.call(ButtonDomNode);
+  }, [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef]);
+  const handleNextMonthRef = useCallback(ButtonDomNode => {
+    var _ButtonDomNode$focus3;
+
+    nextMonthBtnRef.current = ButtonDomNode;
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus3 = ButtonDomNode.focus) === null || _ButtonDomNode$focus3 === void 0 ? void 0 : _ButtonDomNode$focus3.call(ButtonDomNode);
+  }, [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef]);
+  const handleNextYearRef = useCallback(ButtonDomNode => {
+    var _ButtonDomNode$focus4;
+
+    nextYearBtnRef.current = ButtonDomNode;
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus4 = ButtonDomNode.focus) === null || _ButtonDomNode$focus4 === void 0 ? void 0 : _ButtonDomNode$focus4.call(ButtonDomNode);
+  }, [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 +89,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 +101,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 +112,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/Day.js

@@ -49,15 +49,14 @@ const Day = _ref => {
     appOnDayChange,
     appOnYearChange,
     latestInteractionRegion,
-    setLatestInteractionRegion,
-    isWithTimeWheelToo
+    isWithTimeWheelToo,
+    trackFocusCalendarMetafocusedDay
   } = useContext(ControlledDateTimePickerContext);
   const {
     focusedDay,
     handleDayOnKeyDown,
     handleFocusMetaDayByDay,
-    closeCalendar,
-    tryToFocusCurrentlyDataIsFocusedDay
+    closeCalendar
   } = useContext(CalendarContext);
   const isFocusedMetaDay = focusedDay !== null && focusedDay !== void 0 && focusedDay.day ? compareTwoDatesDayEquality(metaDay === null || metaDay === void 0 ? void 0 : metaDay.day, focusedDay === null || focusedDay === void 0 ? void 0 : focusedDay.day) : false;
   const isSelected = useMemo(() => {
@@ -72,7 +71,6 @@ const Day = _ref => {
   const isDayInRange = !isStartRangeDay && !isEndRangeDay && getIsDayInRange(metaDay.dayAsString);
   const handleOnDayClick = useCallback(e => {
     handleFocusMetaDayByDay(day);
-    tryToFocusCurrentlyDataIsFocusedDay();
 
     if (!isDisabled && !isOutOfRange) {
       const newDateString = getDateStringFromDay(day);
@@ -90,13 +88,21 @@ const Day = _ref => {
       if (dayNumber) appOnDayChange("".concat(dayNumber), e, metaInfo);
       appOnYearChange("".concat(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 = useCallback(ButtonDomNode => {
+    window.requestAnimationFrame(() => {
+      var _ButtonDomNode$focus;
+
+      dayBtnRef.current = ButtonDomNode;
+      if (isFocused) ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus = ButtonDomNode.focus) === null || _ButtonDomNode$focus === void 0 ? void 0 : _ButtonDomNode$focus.call(ButtonDomNode);
+    });
+  }, [dayBtnRef, isFocused]);
   const handleOnDayFocus = useCallback(() => {
-    setLatestInteractionRegion('calendar-days');
-  }, [setLatestInteractionRegion]);
+    trackFocusCalendarMetafocusedDay('calendar-days');
+  }, [trackFocusCalendarMetafocusedDay]);
   const dayClassModifiers = 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]);
   let dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.DAY;
   if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;
@@ -124,7 +130,7 @@ const Day = _ref => {
       onKeyDown: e => {
         handleDayOnKeyDown(e, metaDay);
       },
-      innerRef: dayBtnRef,
+      innerRef: handleInnerRef,
       tabIndex: isSelected ? 0 : -1,
       "data-isfocused": isFocused,
       "data-testid": dataTestid

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

@@ -1,10 +1,10 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+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 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic.js';
@@ -17,24 +17,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useConfigCalendarCTX = () => {
   const {
-    setLatestInteractionRegion
+    trackFocusCalendarPrevYear,
+    trackFocusCalendarNextYear,
+    trackFocusCalendarPrevMonth,
+    trackFocusCalendarNextMonth
   } = useContext(ControlledDateTimePickerContext);
   const [showCalendar, setShowCalendar] = useState(false);
-  const setLatestInteractionRegionCalendarHead = useCallback(() => {
-    setLatestInteractionRegion('calendar-head');
-  }, [setLatestInteractionRegion]);
   const onPrevYearFocus = useCallback(() => {
-    setLatestInteractionRegionCalendarHead();
-  }, [setLatestInteractionRegionCalendarHead]);
+    trackFocusCalendarPrevYear();
+  }, [trackFocusCalendarPrevYear]);
   const onPrevMonthFocus = useCallback(() => {
-    setLatestInteractionRegionCalendarHead();
-  }, [setLatestInteractionRegionCalendarHead]);
+    trackFocusCalendarPrevMonth();
+  }, [trackFocusCalendarPrevMonth]);
   const onNextMonthFocus = useCallback(() => {
-    setLatestInteractionRegionCalendarHead();
-  }, [setLatestInteractionRegionCalendarHead]);
+    trackFocusCalendarNextMonth();
+  }, [trackFocusCalendarNextMonth]);
   const onNextYearFocus = useCallback(() => {
-    setLatestInteractionRegionCalendarHead();
-  }, [setLatestInteractionRegionCalendarHead]);
+    trackFocusCalendarNextYear();
+  }, [trackFocusCalendarNextYear]);
   const currentDisplayedMonthLogic = useCurrentDisplayedMonthYearLogic();
   const focusLogic = useFocusLogic({
     currentDisplayedMonthLogic,

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

@@ -2,32 +2,14 @@ import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.find.js';
-import { useContext, useState, useMemo, useCallback, useLayoutEffect } from 'react';
-import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
+import { useState, useMemo, useCallback } from 'react';
 import { compareTwoDatesDayEquality } from '../../../utils/dateHelpers.js';
 import { useGetStartingFocusedDay } from '../../../utils/hooks/useGetStartingFocusedDay.js';
 
-// eslint-disable-next-line max-params
-const loopWhileWaiting = function (cb) {
-  let shortcircuit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => false;
-  let timePerTry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
-  let maxTries = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 5;
-  let ab = maxTries;
-  const inter = setInterval(() => {
-    cb();
-    if (shortcircuit() || ab === 0) clearInterval(inter);
-    ab -= 1;
-  }, timePerTry);
-};
-
 const useFocusLogic = _ref => {
   let {
-    currentDisplayedMonthLogic,
-    showCalendar
+    currentDisplayedMonthLogic
   } = _ref;
-  const {
-    calendarDaysWrapperRef
-  } = useContext(ControlledDateTimePickerContext);
   const {
     daysArray
   } = currentDisplayedMonthLogic;
@@ -59,23 +41,6 @@ const useFocusLogic = _ref => {
     });
     return newFocusedDay;
   }, [daysArray, startFocusedDate, metadayToFocus]);
-  const tryToFocusCurrentlyDataIsFocusedDay = useCallback(function () {
-    let wrapperDOM = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (calendarDaysWrapperRef === null || calendarDaysWrapperRef === void 0 ? void 0 : calendarDaysWrapperRef.current) || document;
-    let shortcircuit = false;
-    loopWhileWaiting(() => {
-      const domElem = wrapperDOM === null || wrapperDOM === void 0 ? void 0 : wrapperDOM.querySelector('[data-isfocused="true"]');
-
-      if (domElem) {
-        var _domElem$focus;
-
-        domElem === null || domElem === void 0 ? void 0 : (_domElem$focus = domElem.focus) === null || _domElem$focus === void 0 ? void 0 : _domElem$focus.call(domElem);
-        shortcircuit = true;
-      }
-    }, () => shortcircuit);
-  }, [calendarDaysWrapperRef]);
-  useLayoutEffect(() => {
-    if (showCalendar) tryToFocusCurrentlyDataIsFocusedDay(calendarDaysWrapperRef === null || calendarDaysWrapperRef === void 0 ? void 0 : calendarDaysWrapperRef.current);
-  }, [calendarDaysWrapperRef, focusedDay, showCalendar, tryToFocusCurrentlyDataIsFocusedDay]);
   const handleFocusMetaDay = useCallback(metaDayToFocus => {
     // if focusedDay is inside current daysArray we set Focused day
     const newFocusedMetaDay = daysArray.find(_ref5 => {
@@ -101,11 +66,10 @@ const useFocusLogic = _ref => {
   }, []);
   return useMemo(() => ({
     focusedDay,
-    tryToFocusCurrentlyDataIsFocusedDay,
     resetFocusedDayToStartDate,
     handleFocusMetaDay,
     handleFocusMetaDayByDay
-  }), [focusedDay, tryToFocusCurrentlyDataIsFocusedDay, resetFocusedDayToStartDate, handleFocusMetaDay, handleFocusMetaDayByDay]);
+  }), [focusedDay, resetFocusedDayToStartDate, handleFocusMetaDay, handleFocusMetaDayByDay]);
 };
 
 export { useFocusLogic };