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

package/cjs/combobox/utils/listHelper.js

@@ -9,7 +9,6 @@ require('core-js/modules/esnext.async-iterator.some.js');
 require('core-js/modules/esnext.iterator.some.js');
 require('core-js/modules/esnext.async-iterator.find.js');
 require('core-js/modules/esnext.iterator.find.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
 var constants = require('../constants.js');
@@ -21,11 +20,11 @@ const isSelectedValueMultiple = value => Array.isArray(value);
 const isSelected = (value, activeOption) => {
   if (isSelectedValueMultiple(value)) {
     const multiValue = value;
-    return multiValue.some(item => (item === null || item === void 0 ? void 0 : item.value) === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value));
+    return multiValue.some(item => item?.value === activeOption?.value);
   }
 
   const singleValue = value;
-  return (singleValue === null || singleValue === void 0 ? void 0 : singleValue.value) === activeOption.value;
+  return singleValue?.value === activeOption.value;
 };
 const findInCircularList = function (list, from, criteria) {
   let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
@@ -75,8 +74,6 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
 };
 const filterOptions = (inputValue, options) => options.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
 const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
-  var _items2;
-
   const items = [];
   if (optionsToParse) optionsToParse.forEach(option => {
     // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);
@@ -85,9 +82,7 @@ const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
     }
 
     if (option.type === constants.MENU_OPTION_TYPES.SECTION) {
-      var _items;
-
-      if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === constants.MENU_OPTION_TYPES.SECTION) {
+      if (items[items.length - 1]?.type === constants.MENU_OPTION_TYPES.SECTION) {
         items[items.length - 1] = option;
       } else {
         items.push(option);
@@ -95,13 +90,22 @@ const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
     }
   });
 
-  if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === constants.MENU_OPTION_TYPES.SECTION) {
+  if (items[items.length - 1]?.type === constants.MENU_OPTION_TYPES.SECTION) {
     items.pop();
   }
 
   return items;
 };
 const getFilteredOptionsSelected = (filteredOption, selectedValues) => filteredOption.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));
+const scrollIfNeeded = function (elem) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    behavior: 'smooth',
+    block: 'end',
+    inline: 'nearest'
+  };
+  const bounding = elem.getBoundingClientRect();
+  if (!(bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth))) elem.scrollIntoView(options);
+};
 
 exports.filterOptions = filterOptions;
 exports.findInCircularList = findInCircularList;
@@ -114,4 +118,5 @@ exports.getSuggestedValueOnChange = getSuggestedValueOnChange;
 exports.isSelected = isSelected;
 exports.isSelectedValueEmpty = isSelectedValueEmpty;
 exports.isSelectedValueMultiple = isSelectedValueMultiple;
+exports.scrollIfNeeded = scrollIfNeeded;
 exports.selectedValuesWithSections = selectedValuesWithSections;

package/cjs/date-range-picker/config/useRangePickerLogic.js

@@ -2,18 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 require('../../date-time-picker/ControlledDateTimePicker.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/es.string.replace.js');
 var dateHelpers = require('../../date-time-picker/utils/dateHelpers.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -54,7 +52,7 @@ const useRangePickerLogic = _ref => {
     const dateToString = calendarChangeIsFrom ? toDate : changedDay;
     const dateTo = dateHelpers.getDayFromDateString(dateToString); // we force the "from" to ALWAYS be before the "to" date
 
-    const isToBeforeFrom = (dateTo === null || dateTo === void 0 ? void 0 : dateTo.getTime()) < (dateFrom === null || dateFrom === void 0 ? void 0 : dateFrom.getTime());
+    const isToBeforeFrom = dateTo?.getTime() < dateFrom?.getTime();
     const newDateFromString = isToBeforeFrom ? dateToString : dateFromString;
     const forcingFromDatePick = isToBeforeFrom ? !calendarChangeIsFrom : false;
     const newDateToString = isToBeforeFrom ? dateFromString : dateToString;
@@ -129,19 +127,17 @@ const useRangePickerLogic = _ref => {
   }, [getChangedDayStringValues, onFromDateChange, onToDateChange]);
   const getIsStartRangeDay = React.useCallback(dayString => dayString === fromDate, [fromDate]);
   const getIsDayInRange = React.useCallback(dayString => {
-    var _getDayFromDateString;
-
     const dayFrom = dateHelpers.getDayFromDateString(fromDate);
     const dayTo = dateHelpers.getDayFromDateString(toDate);
     if (!dayFrom || !dayTo || !dayString) return false;
-    const newDayTime = (_getDayFromDateString = dateHelpers.getDayFromDateString(dayString)) === null || _getDayFromDateString === void 0 ? void 0 : _getDayFromDateString.getTime();
+    const newDayTime = dateHelpers.getDayFromDateString(dayString)?.getTime();
     return newDayTime <= dayTo.getTime() && newDayTime >= dayFrom.getTime();
   }, [fromDate, toDate]);
   const getIsEndRangeDay = React.useCallback(dayString => dayString === toDate, [toDate]);
   const getIsToBeforeFrom = React.useCallback((fromString, toString) => {
     const dateFrom = dateHelpers.getDayFromDateString(fromString);
     const dateTo = dateHelpers.getDayFromDateString(toString);
-    return (dateTo === null || dateTo === void 0 ? void 0 : dateTo.getTime()) < (dateFrom === null || dateFrom === void 0 ? void 0 : dateFrom.getTime());
+    return dateTo?.getTime() < dateFrom?.getTime();
   }, []);
   const handleFromDateChange = React.useCallback((newVal, metaInfo) => {
     const isIncorrectOrder = getIsToBeforeFrom(newVal, toDate);

package/cjs/date-range-picker/parts/ControlledDateRangeCalendar.js

@@ -8,8 +8,6 @@ var ControlledDateTimePicker = require('../../date-time-picker/ControlledDateTim
 var ControlledDateTimePickerTypes = require('../../date-time-picker/ControlledDateTimePickerTypes.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/es.string.replace.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');

package/cjs/date-range-picker/parts/ControlledDateRangeFromDate.js

@@ -9,8 +9,6 @@ var ControlledDateTimePicker = require('../../date-time-picker/ControlledDateTim
 var ControlledDateTimePickerTypes = require('../../date-time-picker/ControlledDateTimePickerTypes.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/es.string.replace.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');

package/cjs/date-range-picker/parts/ControlledDateRangeToDate.js

@@ -9,8 +9,6 @@ var ControlledDateTimePicker = require('../../date-time-picker/ControlledDateTim
 var ControlledDateTimePickerTypes = require('../../date-time-picker/ControlledDateTimePickerTypes.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/es.string.replace.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');

package/cjs/date-time-picker/config/useChangeHandlers.js

@@ -26,7 +26,7 @@ const useChangeHandlers = _ref => {
     relevantValues,
     destructuredValues,
     propsBasedOnType,
-    DOMRefs
+    focusTrackers
   } = _ref;
   const {
     tempDateString,
@@ -60,8 +60,8 @@ const useChangeHandlers = _ref => {
     meridiem
   } = destructuredValues;
   const {
-    firstSegmentRef
-  } = DOMRefs;
+    trackFocusFirstSegment
+  } = focusTrackers;
   const getDateMetaInfo = React.useCallback(function () {
     let newDateString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     let metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -89,9 +89,9 @@ const useChangeHandlers = _ref => {
     appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTimeString(newTimeString);
-    const newDateTimeString = "".concat(newDateString, " ").concat(newTimeString);
+    const newDateTimeString = `${newDateString} ${newTimeString}`;
 
-    const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
+    const newMetaInfo = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaInfo), getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
       newDateString,
       newTimeString,
       newDateTimeString
@@ -106,9 +106,9 @@ const useChangeHandlers = _ref => {
     appOnDateChange(appDateString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTempDateString(newDateString);
-    const newDateTimeString = "".concat(newDateString, " ").concat(tempTimeString);
+    const newDateTimeString = `${newDateString} ${tempTimeString}`;
 
-    const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(tempTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
+    const newMetaInfo = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaInfo), getTimeMetaInfo(tempTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
       newDateString,
       newTimeString: tempTimeString,
       newDateTimeString
@@ -122,9 +122,9 @@ const useChangeHandlers = _ref => {
     appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTimeString(newTimeString);
-    const newDateTimeString = "".concat(tempDateString, " ").concat(newTimeString);
+    const newDateTimeString = `${tempDateString} ${newTimeString}`;
 
-    const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(tempDateString, metaInfo)), {}, {
+    const newMetaInfo = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaInfo), getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(tempDateString, metaInfo)), {}, {
       newDateTimeString,
       newDateString: tempDateString,
       newTimeString
@@ -241,12 +241,8 @@ const useChangeHandlers = _ref => {
     if (isDateTime) handleChangeComposedDateTimeString('__/__/____', '__:__ __', metaInfo);
     if (isDate) handleChangeComposedDateString('__/__/____', metaInfo);
     if (isTime) handleChangeComposedTimeString('__:__ __', metaInfo);
-    setTimeout(() => {
-      var _firstSegmentRef$curr;
-
-      (_firstSegmentRef$curr = firstSegmentRef.current) === null || _firstSegmentRef$curr === void 0 ? void 0 : _firstSegmentRef$curr.focus();
-    });
-  }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, firstSegmentRef, handleChangeComposedDateString, handleChangeComposedDateTimeString, handleChangeComposedTimeString, isDate, isDateTime, isTime]);
+    trackFocusFirstSegment();
+  }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, handleChangeComposedDateString, handleChangeComposedDateTimeString, handleChangeComposedTimeString, isDate, isDateTime, isTime, trackFocusFirstSegment]);
   return React.useMemo(() => ({
     handleChangeComposedDateTimeString,
     handleChangeComposedDateString,

package/cjs/date-time-picker/config/useControlledDateTimePicker.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var useGetPropsWithDefault = require('./useGetPropsWithDefault.js');
+var useFocusTracker = require('./useFocusTracker.js');
 var useGetFlags = require('./useGetFlags.js');
 var useGetReferences = require('./useGetReferences.js');
 var useRelevantValueFromProps = require('./useRelevantValueFromProps.js');
@@ -36,6 +36,10 @@ const useControlledDateTimePicker = props => {
   const flags = useGetFlags.useGetFlags(propsWithDefaults);
   const DOMRefs = useGetReferences.useGetReferences(flags); // refs are used for "auto-advance" feature
 
+  const focusTrackers = useFocusTracker.useFocusTracker({
+    DOMRefs,
+    flags
+  });
   const relevantValues = useRelevantValueFromProps.useRelevantValueFromProps(propsWithDefaults);
   const propsBasedOnType = useGetPropsBasedOnType.useGetPropsBasedOnType(propsWithDefaults);
   const destructuredValues = useGetDestructuredValues.useGetDestructuredValues(_objectSpread(_objectSpread({}, propsBasedOnType), flags));
@@ -43,17 +47,18 @@ const useControlledDateTimePicker = props => {
     relevantValues,
     destructuredValues,
     propsBasedOnType,
-    DOMRefs
+    DOMRefs,
+    focusTrackers
   });
   const globalKeyHandlers = useGlobalKeyHandlers.useGlobalKeyHandlers({
     changeHandlers,
     propsBasedOnType,
     DOMRefs,
-    flags
+    flags,
+    focusTrackers
   }); // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
 
   const dataAttrs = dsPropsHelpers.getDataProps(propsWithDefaults);
-  const [latestInteractionRegion, setLatestInteractionRegion] = React.useState('');
   const {
     announcedDateValues,
     announcedTimeValues
@@ -63,14 +68,13 @@ const useControlledDateTimePicker = props => {
     isDateTimeSelector,
     isWithTimeInputs
   } = flags;
-  const ariaCurrentValueForInputs = "current values: ".concat(isWithDateInputs ? "".concat(announcedDateValues) : '').concat(isDateTimeSelector ? ', ' : '').concat(isWithTimeInputs ? "".concat(announcedTimeValues) : '');
-  const ctx = React__default["default"].useMemo(() => _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  const ariaCurrentValueForInputs = `current values: ${isWithDateInputs ? `${announcedDateValues}` : ''}${isDateTimeSelector ? ', ' : ''}${isWithTimeInputs ? `${announcedTimeValues}` : ''}`;
+  const ctx = React__default["default"].useMemo(() => _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
     props: propsWithDefaults,
-    latestInteractionRegion,
-    setLatestInteractionRegion,
     ariaCurrentValueForInputs,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     dataAttrs
-  }, flags), DOMRefs), relevantValues), propsBasedOnType), destructuredValues), changeHandlers), globalKeyHandlers), [propsWithDefaults, latestInteractionRegion, ariaCurrentValueForInputs, dataAttrs, flags, DOMRefs, relevantValues, propsBasedOnType, destructuredValues, changeHandlers, globalKeyHandlers]);
+  }, focusTrackers), flags), DOMRefs), relevantValues), propsBasedOnType), destructuredValues), changeHandlers), globalKeyHandlers), [propsWithDefaults, ariaCurrentValueForInputs, dataAttrs, focusTrackers, flags, DOMRefs, relevantValues, propsBasedOnType, destructuredValues, changeHandlers, globalKeyHandlers]);
   return ctx;
 };
 

package/cjs/date-time-picker/config/useFocusTracker.js

@@ -0,0 +1,136 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/* eslint-disable max-lines */
+const useFocusTracker = _ref => {
+  let {
+    DOMRefs,
+    flags
+  } = _ref;
+  const [latestInteractionRegion, setLatestInteractionRegion] = React.useState('');
+  const [currFocusDescriber, setCurrFocusDescriber] = React.useState('');
+  const {
+    firstSegment,
+    lastSegment
+  } = DOMRefs;
+  const {
+    isDateSelector,
+    isTimeSelector
+  } = flags;
+  const trackFocusPicker = React.useCallback(() => {
+    let picker = 'datetime-picker-icon';
+    if (isDateSelector) picker = 'date-picker-icon';
+    if (isTimeSelector) picker = 'time-picker-icon';
+    if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');
+    if (picker !== currFocusDescriber) setCurrFocusDescriber(picker);
+  }, [currFocusDescriber, isDateSelector, isTimeSelector, latestInteractionRegion]);
+  const trackFocusFirstSegment = React.useCallback(() => {
+    let region = 'date-inputs';
+    if (firstSegment === 'hour-input') region = 'time-inputs';
+    if (firstSegment === 'date-picker-icon') region = 'picker-icon';
+    if (firstSegment === 'time-picker-icon') region = 'picker-icon';
+    if (firstSegment === 'datetime-picker-icon') region = 'picker-icon';
+    if (region !== latestInteractionRegion) setLatestInteractionRegion(region);
+    if (firstSegment !== currFocusDescriber) setCurrFocusDescriber(firstSegment);
+  }, [currFocusDescriber, firstSegment, latestInteractionRegion]);
+  const trackFocusLastSegment = React.useCallback(() => {
+    let region = 'date-inputs';
+    if (lastSegment === 'meridiem-input') region = 'time-inputs';
+    if (lastSegment === 'clear-btn') region = 'clear-btn';
+    if (lastSegment === 'date-picker-icon') region = 'picker-icon';
+    if (lastSegment === 'time-picker-icon') region = 'picker-icon';
+    if (lastSegment === 'datetime-picker-icon') region = 'picker-icon';
+    if (region !== latestInteractionRegion) setLatestInteractionRegion(region);
+    if (lastSegment !== currFocusDescriber) setCurrFocusDescriber(lastSegment);
+  }, [currFocusDescriber, lastSegment, latestInteractionRegion]);
+  return React.useMemo(() => ({
+    latestInteractionRegion,
+    setLatestInteractionRegion,
+    currFocusDescriber,
+    setCurrFocusDescriber,
+    trackFocusResetter: () => {
+      if (latestInteractionRegion !== '') setLatestInteractionRegion('');
+      if (currFocusDescriber !== '') setCurrFocusDescriber('');
+    },
+    trackFocusMonthInput: () => {
+      if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');
+      if (currFocusDescriber !== 'month-input') setCurrFocusDescriber('month-input');
+    },
+    trackFocusDayInput: () => {
+      if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');
+      if (currFocusDescriber !== 'day-input') setCurrFocusDescriber('day-input');
+    },
+    trackFocusYearInput: () => {
+      if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');
+      if (currFocusDescriber !== 'year-input') setCurrFocusDescriber('year-input');
+    },
+    trackFocusHourInput: () => {
+      if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');
+      if (currFocusDescriber !== 'hour-input') setCurrFocusDescriber('hour-input');
+    },
+    trackFocusMinuteInput: () => {
+      if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');
+      if (currFocusDescriber !== 'minute-input') setCurrFocusDescriber('minute-input');
+    },
+    trackFocusMeridiemInput: () => {
+      if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');
+      if (currFocusDescriber !== 'meridiem-input') setCurrFocusDescriber('meridiem-input');
+    },
+    trackFocusClearBtn: () => {
+      if (latestInteractionRegion !== 'clear-btn') setLatestInteractionRegion('clear-btn');
+      if (currFocusDescriber !== 'clear-btn') setCurrFocusDescriber('clear-btn');
+    },
+    trackFocusDatePickerIcon: () => {
+      if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');
+      if (currFocusDescriber !== 'date-picker-icon') setCurrFocusDescriber('date-picker-icon');
+    },
+    trackFocusTimePickerIcon: () => {
+      if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');
+      if (currFocusDescriber !== 'time-picker-icon') setCurrFocusDescriber('time-picker-icon');
+    },
+    trackFocusDatetimePickerIcon: () => {
+      if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');
+      if (currFocusDescriber !== 'datetime-picker-icon') setCurrFocusDescriber('datetime-picker-icon');
+    },
+    trackFocusCalendarPrevMonth: () => {
+      if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');
+      if (currFocusDescriber !== 'calendar-prev-month') setCurrFocusDescriber('calendar-prev-month');
+    },
+    trackFocusCalendarNextMonth: () => {
+      if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');
+      if (currFocusDescriber !== 'calendar-next-month') setCurrFocusDescriber('calendar-next-month');
+    },
+    trackFocusCalendarPrevYear: () => {
+      if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');
+      if (currFocusDescriber !== 'calendar-prev-year') setCurrFocusDescriber('calendar-prev-year');
+    },
+    trackFocusCalendarNextYear: () => {
+      if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');
+      if (currFocusDescriber !== 'calendar-next-year') setCurrFocusDescriber('calendar-next-year');
+    },
+    trackFocusCalendarMetafocusedDay: () => {
+      if (latestInteractionRegion !== 'calendar-days') setLatestInteractionRegion('calendar-days');
+      if (currFocusDescriber !== 'calendar-metafocused-day') setCurrFocusDescriber('calendar-metafocused-day');
+    },
+    trackFocusTimewheelCurrHour: () => {
+      if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');
+      if (currFocusDescriber !== 'timewheel-curr-hour') setCurrFocusDescriber('timewheel-curr-hour');
+    },
+    trackFocusTimewheelCurrMinute: () => {
+      if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');
+      if (currFocusDescriber !== 'timewheel-curr-minute') setCurrFocusDescriber('timewheel-curr-minute');
+    },
+    trackFocusTimewheelCurrMeridiem: () => {
+      if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');
+      if (currFocusDescriber !== 'timewheel-curr-meridiem') setCurrFocusDescriber('timewheel-curr-meridiem');
+    },
+    trackFocusPicker,
+    trackFocusFirstSegment,
+    trackFocusLastSegment
+  }), [currFocusDescriber, latestInteractionRegion, trackFocusPicker, trackFocusFirstSegment, trackFocusLastSegment]);
+};
+
+exports.useFocusTracker = useFocusTracker;

package/cjs/date-time-picker/config/useGetDestructuredValues.js

@@ -42,8 +42,8 @@ const useGetDestructuredDateValues = _ref => {
   const yearNum = numberHelpers.convertToPositiveNumberIfPossible(year);
   const announcedMonth = monthNum !== -1 ? constants.monthNames[monthNum - 1] : 'empty month';
   const announcedDay = dayNum !== -1 ? constants.announcableCardinalDays[dayNum] : 'empty day';
-  const announcedYear = yearNum !== -1 ? stringHelpers.fillStringWithPlaceHolders("".concat(yearNum), 4, '0') : 'empty year';
-  const announcedDateValues = "".concat(announcedMonth, ", ").concat(announcedDay, ", ").concat(announcedYear);
+  const announcedYear = yearNum !== -1 ? stringHelpers.fillStringWithPlaceHolders(`${yearNum}`, 4, '0') : 'empty year';
+  const announcedDateValues = `${announcedMonth}, ${announcedDay}, ${announcedYear}`;
   return React.useMemo(() => ({
     month,
     day,
@@ -77,12 +77,12 @@ const useGetDestructuredTimeValues = _ref2 => {
   const hoursNum = numberHelpers.convertToPositiveNumberIfPossible(hours);
   const minutesNum = numberHelpers.convertToPositiveNumberIfPossible(minutes); // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
 
-  const announcedHours = hoursNum !== -1 ? "".concat(hoursNum) : 'empty hours'; // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
+  const announcedHours = hoursNum !== -1 ? `${hoursNum}` : 'empty hours'; // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
 
-  const announcedMinutes = minutesNum !== -1 ? "".concat(minutesNum) : 'empty minutes';
+  const announcedMinutes = minutesNum !== -1 ? `${minutesNum}` : 'empty minutes';
   const announcedMeridiem = // eslint-disable-next-line no-nested-ternary
-  meridiem === 'PM' ? "post meridiem" : meridiem === 'AM' ? 'ante meridiem' : 'empty meriediem';
-  const announcedTimeValues = "".concat(announcedHours, ", ").concat(announcedMinutes, ", ").concat(announcedMeridiem);
+  meridiem === 'PM' ? `post meridiem` : meridiem === 'AM' ? 'ante meridiem' : 'empty meriediem';
+  const announcedTimeValues = `${announcedHours}, ${announcedMinutes}, ${announcedMeridiem}`;
   return React.useMemo(() => ({
     hours,
     minutes,

package/cjs/date-time-picker/config/useGetPropsBasedOnType.js

@@ -27,7 +27,7 @@ const useGetPropsBasedOnType = propsWithDefaults => {
   const appOnMonthChange = (isDateTime || isDate) && propsWithDefaults.onMonthChange ? propsWithDefaults.onMonthChange : noop;
   const appOnDayChange = (isDateTime || isDate) && propsWithDefaults.onDayChange ? propsWithDefaults.onDayChange : noop;
   const appOnYearChange = (isDateTime || isDate) && propsWithDefaults.onYearChange ? propsWithDefaults.onYearChange : noop;
-  const emptyPickerStartingMonthDefault = "".concat(new Date().getMonth() + 1, "/__/").concat(new Date().getFullYear());
+  const emptyPickerStartingMonthDefault = `${new Date().getMonth() + 1}/__/${new Date().getFullYear()}`;
   const emptyPickerStartingMonth = (isDateTime || isDate) && propsWithDefaults.emptyPickerStartingMonth ? propsWithDefaults.emptyPickerStartingMonth : emptyPickerStartingMonthDefault;
   const onCalendarOpenFocusedDay = (isDateTime || isDate) && propsWithDefaults.onCalendarOpenFocusedDay ? propsWithDefaults.onCalendarOpenFocusedDay : undefined;
   /* -------------------------- -------------- --------------------------*/

package/cjs/date-time-picker/config/useGetReferences.js

@@ -9,10 +9,16 @@ const useGetReferences = _ref => {
   let {
     isWithDateInputs,
     isWithTimeInputs,
+    isDateSelector,
+    isTimeSelector,
+    isDateTimeSelector,
     withAnyPicker,
     withClearBtn
   } = _ref;
-  // refs are used for "auto-advance" feature
+  // those 2 states are needed for focus tracking
+  const [firstSegment, setFirstSegment] = React.useState('');
+  const [lastSegment, setLastSegment] = React.useState(''); // refs are used for "auto-advance" feature
+
   const monthInputRef = React.useRef(null);
   const dayInputRef = React.useRef(null);
   const yearInputRef = React.useRef(null);
@@ -36,22 +42,38 @@ const useGetReferences = _ref => {
   const currMeridiemBtnRef = React.useRef(null);
   const nextMeridiemBtnRef = React.useRef(null);
   let firstSegmentRef = React.useRef(null);
-  if (isWithDateInputs) firstSegmentRef = monthInputRef;else if (isWithTimeInputs) firstSegmentRef = hourInputRef;else if (withAnyPicker) firstSegmentRef = pickerButtonRef; // we need some non-ref to force refresh of the hooks dependencies when using firstSegmentRef
 
-  const firstFragmentRefUpdateDeps = React.useMemo(() => ({
-    isWithDateInputs,
-    isWithTimeInputs,
-    withAnyPicker
-  }), [isWithDateInputs, isWithTimeInputs, withAnyPicker]);
+  if (isWithDateInputs) {
+    firstSegmentRef = monthInputRef;
+    if (firstSegment !== 'month-input') setFirstSegment('month-input');
+  } else if (isWithTimeInputs) {
+    firstSegmentRef = hourInputRef;
+    if (firstSegment !== 'hour-input') setFirstSegment('hour-input');
+  } else if (withAnyPicker) {
+    firstSegmentRef = pickerButtonRef;
+    if (isDateSelector && firstSegment !== 'date-picker-icon') setFirstSegment('date-picker-icon');
+    if (isTimeSelector && firstSegment !== 'time-picker-icon') setFirstSegment('time-picker-icon');
+    if (isDateTimeSelector && firstSegment !== 'datetime-picker-icon') setFirstSegment('datetime-picker-icon');
+  }
+
   let lastSegmentRef = React.useRef(null);
-  if (withAnyPicker) lastSegmentRef = pickerButtonRef;else if (withClearBtn) lastSegmentRef = clearButtonRef;else if (isWithTimeInputs) lastSegmentRef = meridiemInputRef;else if (isWithDateInputs) lastSegmentRef = yearInputRef; // we need some non-ref to force refresh of the hooks dependencies when using lastSegmentRef
 
-  const lastFragmentRefUpdateDeps = React.useMemo(() => ({
-    withAnyPicker,
-    withClearBtn,
-    isWithTimeInputs,
-    isWithDateInputs
-  }), [isWithDateInputs, isWithTimeInputs, withAnyPicker, withClearBtn]);
+  if (withAnyPicker) {
+    lastSegmentRef = pickerButtonRef;
+    if (isDateSelector && lastSegment !== 'date-picker-icon') setLastSegment('date-picker-icon');
+    if (isTimeSelector && lastSegment !== 'time-picker-icon') setLastSegment('time-picker-icon');
+    if (isDateTimeSelector && lastSegment !== 'datetime-picker-icon') setLastSegment('datetime-picker-icon');
+  } else if (withClearBtn) {
+    lastSegmentRef = clearButtonRef;
+    if (lastSegment !== 'clear-btn') setLastSegment('clear-btn');
+  } else if (isWithTimeInputs) {
+    lastSegmentRef = meridiemInputRef;
+    if (lastSegment !== 'meridiem-input') setLastSegment('meridiem-input');
+  } else if (isWithDateInputs) {
+    lastSegmentRef = yearInputRef;
+    if (lastSegment !== 'year-input') setLastSegment('year-input');
+  }
+
   return React.useMemo(() => ({
     monthInputRef,
     dayInputRef,
@@ -77,10 +99,9 @@ const useGetReferences = _ref => {
     nextMeridiemBtnRef,
     firstSegmentRef,
     lastSegmentRef,
-    firstFragmentRefUpdateDeps,
-    lastFragmentRefUpdateDeps
-  }), [firstFragmentRefUpdateDeps, lastFragmentRefUpdateDeps] // if we remove this last/first segment won't work
-  );
+    firstSegment,
+    lastSegment
+  }), [firstSegment, lastSegment]);
 };
 
 exports.useGetReferences = useGetReferences;

package/cjs/date-time-picker/config/useGlobalKeyHandlers.js

@@ -24,8 +24,8 @@ const useGlobalKeyHandlers = _ref => {
   let {
     propsBasedOnType,
     changeHandlers,
-    DOMRefs,
-    flags
+    flags,
+    focusTrackers
   } = _ref;
   const {
     getIsOutOfRangeDay,
@@ -42,13 +42,13 @@ const useGlobalKeyHandlers = _ref => {
     handleChangeComposedDateTimeString,
     handleClearAll
   } = changeHandlers;
-  const {
-    lastSegmentRef,
-    clearButtonRef
-  } = DOMRefs;
   const {
     shouldPreserveClearableSpace
   } = flags;
+  const {
+    trackFocusClearBtn,
+    trackFocusLastSegment
+  } = focusTrackers;
   const onFillWithCurrentDateKeys = React.useCallback(function (e) {
     let metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       isAutomaticFillTrigger: true
@@ -78,12 +78,8 @@ const useGlobalKeyHandlers = _ref => {
     appOnMinuteChange(minutes, e, metaInfo);
     appOnMeridiemChange(meridiem, e, metaInfo);
     handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);
-    setTimeout(() => {
-      var _clearButtonRef$curre, _lastSegmentRef$curre;
-
-      if (shouldPreserveClearableSpace) (_clearButtonRef$curre = clearButtonRef.current) === null || _clearButtonRef$curre === void 0 ? void 0 : _clearButtonRef$curre.focus();else (_lastSegmentRef$curre = lastSegmentRef.current) === null || _lastSegmentRef$curre === void 0 ? void 0 : _lastSegmentRef$curre.focus();
-    });
-  }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, clearButtonRef, getIsDisabledDay, getIsDisabledTime, getIsOutOfRangeDay, handleChangeComposedDateTimeString, lastSegmentRef, shouldPreserveClearableSpace]);
+    if (shouldPreserveClearableSpace) trackFocusClearBtn();else trackFocusLastSegment();
+  }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, getIsDisabledDay, getIsDisabledTime, getIsOutOfRangeDay, handleChangeComposedDateTimeString, shouldPreserveClearableSpace, trackFocusClearBtn, trackFocusLastSegment]);
   const onGlobalKeyDown = React.useCallback(e => {
     const {
       key,

package/cjs/date-time-picker/config/useRelevantValueFromProps.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var typeGuards = require('../utils/typeGuards.js');
 var stringHelpers = require('../utils/stringHelpers.js');
 
+/* eslint-disable complexity */
 const useRelevantValueFromProps = props => {
   const dateStringFromProps = React.useMemo(() => {
     if (typeGuards.getIsDateTime(props)) return props.dateTime !== '' ? stringHelpers.dateTimeToDate(props.dateTime) : '__/__/____';