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

package/cjs/combobox/parts/controls-input/useKeyboardNavigation.js

@@ -30,12 +30,12 @@ const useKeyboardNavigation = () => {
       withoutPortal
     },
     inputValue,
-    showPopover,
+    menuState,
     focusOptionIdx,
     listRef,
     selectAllCheckboxRef,
     toggleSelectionButtonRef,
-    setShowPopover,
+    setMenuState,
     setInputValue,
     scrollOptionIntoView,
     setFocusOptionIdx
@@ -50,15 +50,10 @@ const useKeyboardNavigation = () => {
     // =============================================================================
     if (onKeyDown && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === constants.MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);
 
-    if (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) {
-      setShowPopover(true);
+    if ((['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) && !menuState) {
+      setMenuState(true);
       window.requestAnimationFrame(() => {
-        if (listRef.current && window.scrollY < listRef.current.offsetHeight) {
-          window.scrollTo({
-            top: listRef.current.offsetHeight,
-            behavior: 'smooth'
-          });
-        }
+        if (listRef.current) listHelper.scrollIfNeeded(listRef.current);
       });
     } // =============================================================================
     // ESCAPE
@@ -73,7 +68,7 @@ const useKeyboardNavigation = () => {
         setInputValue('');
       }
 
-      if (!inline) setShowPopover(false);
+      if (!inline) setMenuState(false, 'close', e);
     } // =============================================================================
     // ENTER KEY TO CREATE ELEMENTS
     // =============================================================================
@@ -95,12 +90,12 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if (focusOptionIdx !== '' && (showPopover || inline) && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === constants.MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
+      if (focusOptionIdx !== '' && (menuState || inline) && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === constants.MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
         if (onFilter) onFilter(allOptions, '');
         setInputValue('');
 
         if (!multiple) {
-          setShowPopover(false);
+          setMenuState(false, 'selectOption', e);
         }
 
         onChange(listHelper.getSuggestedValueOnChange(currentItem, selectedValues), currentItem, e);
@@ -108,7 +103,7 @@ const useKeyboardNavigation = () => {
     }
 
     if (e.key === 'Enter' && e.altKey) {
-      setShowPopover(false);
+      setMenuState(false, 'selectOption', e);
     }
 
     if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {
@@ -122,7 +117,7 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if ((showPopover || inline) && selectableOptions.length) {
+      if ((menuState || inline) && selectableOptions.length) {
         const nextItemIndexIndex = listHelper.findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);
 
         if (nextItemIndexIndex > -1) {
@@ -139,12 +134,12 @@ const useKeyboardNavigation = () => {
       const prevItemIndex = listHelper.findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable, -1);
 
       if (prevItemIndex > -1) {
-        if (showPopover || inline) {
+        if (menuState || inline) {
           setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);
           scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);
         } else {
           // open menu and search last item to focused
-          setShowPopover(true);
+          setMenuState(true, 'open', e);
           const lastItemIndex = listHelper.findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);
           setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);
           setTimeout(() => {
@@ -167,7 +162,7 @@ const useKeyboardNavigation = () => {
       if (onFilter) onFilter(allOptions, inputValue);
     }
 
-    if (e.key === 'Tab' && !inline && !withoutPortal) {
+    if (e.key === 'Tab' && !inline && menuState) {
       var _selectAllCheckboxRef;
 
       const element = (_selectAllCheckboxRef = selectAllCheckboxRef.current) !== null && _selectAllCheckboxRef !== void 0 ? _selectAllCheckboxRef : toggleSelectionButtonRef.current;
@@ -175,14 +170,12 @@ const useKeyboardNavigation = () => {
       if (element) {
         e.preventDefault();
         element.focus();
+      } else {
+        setMenuState(false, 'blur', e);
       }
     }
-
-    if (e.key === 'Tab' && !multiple && showPopover) {
-      setShowPopover(false);
-    }
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, listRef, focusOptionIdx, showPopover, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
+  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setMenuState, onCancel, onFilter, setInputValue, listRef, focusOptionIdx, menuState, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
   return {
     onInputKeyDown
   };

package/cjs/combobox/parts/controls-input/useMaskedOnChange.js

@@ -13,26 +13,26 @@ const useMaskedOnChange = () => {
       onFilter,
       allOptions
     },
-    setShowPopover,
+    setMenuState,
     setInputValue,
     setShowSelectedOptions
   } = React.useContext(ComboBoxCTX.ComboBoxContext); // default onchange when no mask provided
 
   const handleOnChange = React.useCallback(e => {
     setShowSelectedOptions(false);
-    setShowPopover(true);
+    setMenuState(true, 'filter', e);
 
     if (onFilter) {
       onFilter(listHelper.filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);
       setInputValue(e.currentTarget.value);
     }
-  }, [allOptions, onFilter, setInputValue, setShowPopover, setShowSelectedOptions]); // onchange used when mask is provided
+  }, [allOptions, onFilter, setInputValue, setMenuState, setShowSelectedOptions]); // onchange used when mask is provided
 
-  const handleOnChangeMask = React.useCallback((_, mask) => {
+  const handleOnChangeMask = React.useCallback((e, mask) => {
     setShowSelectedOptions(false);
-    setShowPopover(true);
+    setMenuState(true, 'filter', e);
     if (mask && onFilter) onFilter(listHelper.filterOptions(mask, allOptions), mask);else if (!mask && onFilter) onFilter(allOptions, '');
-  }, [allOptions, onFilter, setShowPopover, setShowSelectedOptions]);
+  }, [allOptions, onFilter, setMenuState, setShowSelectedOptions]);
   const onChangeMask = useMask({
     valueSetter: setInputValue,
     onChange: handleOnChangeMask

package/cjs/combobox/parts/dropdown-indicator/DropdownIndicator.js

@@ -20,14 +20,14 @@ const DropdownIndicator = () => {
     props: {
       disabled
     },
-    showPopover
+    menuState
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   return /*#__PURE__*/_jsx__default["default"](styled.StyledDropDownButton, {
     "data-testid": ComboboxDataTestids.ComboboxDataTestid.DROPDOWN,
     "aria-controls": "combo-listbox",
     "aria-labelledby": "combo-label",
     disabled: disabled,
-    "aria-expanded": showPopover,
+    "aria-expanded": menuState,
     "aria-haspopup": "listbox",
     "aria-hidden": true,
     buttonType: "icon",

package/cjs/combobox/parts/header-list/useHeaderListHandlers.js

@@ -20,7 +20,7 @@ const useHeaderListHandlers = () => {
     },
     showSelectedOptions,
     setShowSelectedOptions,
-    setShowPopover
+    setMenuState
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const multiSelectedValues = selectedValues;
   const selectableOptions = listHelper.getSelectableOptions(filteredOptions);
@@ -61,10 +61,10 @@ const useHeaderListHandlers = () => {
     if (e.key === 'Escape') {
       var _innerRef$current;
 
-      setShowPopover(false);
+      setMenuState(false, 'close', e);
       (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
     }
-  }, [setShowPopover, innerRef]); // when hitting tab on selected values button filter we target the input again
+  }, [setMenuState, innerRef]); // when hitting tab on selected values button filter we target the input again
 
   const handleFilterSelectionBtnOnTab = React.useCallback(e => {
     if (e.key === 'Tab' && !e.shiftKey) {

package/cjs/combobox/parts/menu-list/MenuList.js

@@ -16,11 +16,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var _HeaderList, _StyledNoResultsWrapp;
+var _HeaderList;
 const MenuList = () => {
+  var _StyledNoResultsWrapp;
+
   const {
     props: {
       menuMinWidth,
+      noOptionsMessage,
       menuMaxHeight,
       onCreate,
       inline,
@@ -66,10 +69,9 @@ const MenuList = () => {
         }
       }, void 0, ItemRenderer)
     }) : _StyledNoResultsWrapp || (_StyledNoResultsWrapp = /*#__PURE__*/_jsx__default["default"](styled.StyledNoResultsWrapper, {
-      role: "alert",
-      "aria-live": "polite"
-    }, void 0, "No matches found"))]
-  }, width), [wrapperListRef, inline, preventLoseInputFocus, menuMinWidth, withHeader, filteredOptions.length, onCreate, menuMaxHeight, listRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize, ItemRenderer, width]);
+      role: "alert"
+    }, void 0, noOptionsMessage))]
+  }, width), [wrapperListRef, inline, preventLoseInputFocus, width, menuMinWidth, withHeader, filteredOptions.length, onCreate, menuMaxHeight, listRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize, ItemRenderer, noOptionsMessage]);
 };
 
 exports.MenuList = MenuList;

package/cjs/combobox/parts/menu-list/styled.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 const StyledListWrapper = dsSystem.styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  min-width: ", ";\n  width: ", ";\n  background-color: #ffffff;\n  max-height: ", ";\n  z-index: 100;\n"])), _ref => {
   let {
     inline,
@@ -27,7 +27,7 @@ const StyledListWrapper = dsSystem.styled.div(_templateObject || (_templateObjec
   } = _ref3;
   return "".concat(maxHeight, "px");
 });
-const StyledList = dsSystem.styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  position: relative;\n  padding: 0;\n  background-color: #ffffff;\n"])));
+const StyledList = dsSystem.styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  position: relative;\n  padding: 0;\n  background-color: #ffffff;\n  overflow-x: hidden;\n"])));
 const StyledVirtualListWrapper = dsSystem.styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  overflow-y: auto;\n  margin-top: ", ";\n  max-height: ", ";\n"])), _ref4 => {
   let {
     withHeader
@@ -40,9 +40,11 @@ const StyledVirtualListWrapper = dsSystem.styled.div(_templateObject3 || (_templ
   return maxHeight ? "".concat(maxHeight, "px") : '300px';
 });
 const StyledCreatableLabel = dsSystem.styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  font-weight: bold;\n  font-style: italic;\n"])));
-const StyledNoResultsWrapper = dsSystem.styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  padding: 16px;\n"])));
+const StyledCreatableValue = dsSystem.styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  word-break: break-all;\n"])));
+const StyledNoResultsWrapper = dsSystem.styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  padding: 16px;\n"])));
 
 exports.StyledCreatableLabel = StyledCreatableLabel;
+exports.StyledCreatableValue = StyledCreatableValue;
 exports.StyledList = StyledList;
 exports.StyledListWrapper = StyledListWrapper;
 exports.StyledNoResultsWrapper = StyledNoResultsWrapper;

package/cjs/combobox/parts/menu-list/useItemRenderer.js

@@ -41,7 +41,7 @@ const useItemRenderer = () => {
       onFilter,
       allOptions
     },
-    setShowPopover,
+    setMenuState,
     inputValue,
     focusOptionIdx,
     setInputValue,
@@ -49,20 +49,21 @@ const useItemRenderer = () => {
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
   const CBItem = multiple ? dsForm.MultiMenuItem : dsForm.SingleMenuItem;
+  const handleOnCreateClick = React.useCallback(() => {
+    if (inputValue && onCreate) {
+      onCreate(inputValue);
+      setInputValue('');
+      if (onFilter) onFilter(allOptions, inputValue);
+    }
+  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);
   const handleClick = React.useCallback((option, e) => {
-    if (option.type === constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate && onFilter) {
-      if (inputValue) {
-        onCreate(inputValue);
-        setInputValue('');
-        onFilter(allOptions, inputValue);
-      }
-    } else if (option.type === constants.MENU_OPTION_TYPES.OPTION) {
+    if (option.type === constants.MENU_OPTION_TYPES.OPTION) {
       if (!option.disabled) {
         if (onFilter) onFilter(allOptions, inputValue);
         setInputValue('');
 
         if (!multiple) {
-          setShowPopover(false);
+          setMenuState(false, 'selectOption', e);
         }
 
         onChange(listHelper.getSuggestedValueOnChange(option, selectedValues), option, e);
@@ -72,7 +73,7 @@ const useItemRenderer = () => {
 
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, selectedValues, onChange, setShowPopover, multiple]); // prevent blur from controls input
+  }, [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple]); // prevent blur from controls input
 
   const handleOnMouseDown = React.useCallback(e => {
     e.preventDefault();
@@ -115,8 +116,8 @@ const useItemRenderer = () => {
           onClick: e => handleClick(option, e),
           onMouseDown: handleOnMouseDown,
           isActive: option.dsId === focusOptionIdx,
-          isSelected: listHelper.isSelected(selectedValues, option) //tabIndex={-1}
-
+          isSelected: listHelper.isSelected(selectedValues, option),
+          tabIndex: -1
         }));
       }
 
@@ -130,14 +131,14 @@ const useItemRenderer = () => {
               label
             } = _ref;
             return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+              p: "8px",
               cols: ['min-content', 'auto'],
-              height: "16px",
               gutter: "xxs",
               alignItems: "center"
-            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx__default["default"](styled.StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, "\"".concat(label, "\"")));
+            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx__default["default"](styled.StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx__default["default"](styled.StyledCreatableValue, {}, void 0, "\"".concat(label, "\"")));
           },
           label: option.label,
-          onClick: e => handleClick(option, e)
+          onClick: handleOnCreateClick
         }));
       }
 

package/cjs/combobox/react-desc-prop-types.js

@@ -26,12 +26,13 @@ const ComboboxPropTypes = _objectSpread(_objectSpread({}, dsPropsHelpers.globalA
   disabled: dsPropsHelpers.PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),
   autoFocus: dsPropsHelpers.PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
   hasError: dsPropsHelpers.PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
+  noOptionsMessage: dsPropsHelpers.PropTypes.string.description('Custome message to be display when no matches found after filtering').defaultValue('No Matches Found'),
+  closeMenuOnScroll: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.func, dsPropsHelpers.PropTypes.bool]).description('If true, close the select menu when the user scrolls the document/body.').defaultValue(false),
   onChange: dsPropsHelpers.PropTypes.func.isRequired.description('function triggered when an option is selected it will send the options selected').defaultValue('() => {}'),
   onFilter: dsPropsHelpers.PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),
   onCreate: dsPropsHelpers.PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
   onCancel: dsPropsHelpers.PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),
-  onMenuOpen: dsPropsHelpers.PropTypes.func.description('function triggered when user open the menu list').defaultValue('() => {}'),
-  onMenuClose: dsPropsHelpers.PropTypes.func.description('function triggered when user close the menu list').defaultValue('() => {}'),
+  onMenuChange: dsPropsHelpers.PropTypes.func.description('function triggered when user open or close the menu list').defaultValue('() => {}'),
   inputMinWidth: dsPropsHelpers.PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
   menuMinWidth: dsPropsHelpers.PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
   menuMaxHeight: dsPropsHelpers.PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),

package/cjs/combobox/utils/listHelper.js

@@ -102,6 +102,15 @@ const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
   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 +123,5 @@ exports.getSuggestedValueOnChange = getSuggestedValueOnChange;
 exports.isSelected = isSelected;
 exports.isSelectedValueEmpty = isSelectedValueEmpty;
 exports.isSelectedValueMultiple = isSelectedValueMultiple;
+exports.scrollIfNeeded = scrollIfNeeded;
 exports.selectedValuesWithSections = selectedValuesWithSections;

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] : {};
@@ -91,7 +91,7 @@ const useChangeHandlers = _ref => {
     setTimeString(newTimeString);
     const newDateTimeString = "".concat(newDateString, " ").concat(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
@@ -108,7 +108,7 @@ const useChangeHandlers = _ref => {
     setTempDateString(newDateString);
     const newDateTimeString = "".concat(newDateString, " ").concat(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
@@ -124,7 +124,7 @@ const useChangeHandlers = _ref => {
     setTimeString(newTimeString);
     const newDateTimeString = "".concat(tempDateString, " ").concat(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
@@ -64,13 +69,12 @@ const useControlledDateTimePicker = props => {
     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 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 });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+
+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;