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

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

@@ -9,26 +9,26 @@ const useMaskedOnChange = () => {
       onFilter,
       allOptions
     },
-    setShowPopover,
+    setMenuState,
     setInputValue,
     setShowSelectedOptions
   } = useContext(ComboBoxContext); // default onchange when no mask provided
 
   const handleOnChange = useCallback(e => {
     setShowSelectedOptions(false);
-    setShowPopover(true);
+    setMenuState(true, 'filter', e);
 
     if (onFilter) {
       onFilter(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 = useCallback((_, mask) => {
+  const handleOnChangeMask = useCallback((e, mask) => {
     setShowSelectedOptions(false);
-    setShowPopover(true);
+    setMenuState(true, 'filter', e);
     if (mask && onFilter) onFilter(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/esm/combobox/parts/dropdown-indicator/DropdownIndicator.js

@@ -12,14 +12,14 @@ const DropdownIndicator = () => {
     props: {
       disabled
     },
-    showPopover
+    menuState
   } = useContext(ComboBoxContext);
   return /*#__PURE__*/_jsx(StyledDropDownButton, {
     "data-testid": 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/esm/combobox/parts/header-list/HeaderList.js

@@ -14,6 +14,7 @@ const HeaderList = () => {
   const {
     props: {
       selectedValues,
+      filteredOptions,
       onSelectAll
     },
     showSelectedOptions,
@@ -32,15 +33,15 @@ const HeaderList = () => {
   } = useHeaderListHandlers();
   return /*#__PURE__*/_jsx(StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
-    onMouseDown: handleOnMouseDown
+    onMouseDown: handleOnMouseDown,
+    "data-testid": ComboboxDataTestid.MULTISELECT.HEADER_LIST
   }, void 0, /*#__PURE__*/_jsx(StyledSelectAllCheckbox, {}, void 0, onSelectAll && /*#__PURE__*/_jsx(DSControlledCheckbox, {
     checked: checkboxStatus,
-    "aria-controls": checkboxStatus === 'mixed' ? multiSelectedValues.map(item => item.dsId).join(' ') : '',
+    "aria-controls": filteredOptions.map(item => item.dsId).join(' '),
     name: "select-all-checkbox",
     "aria-label": "Select/Unselect All Items",
     id: "select-all-checkbox",
     onChange: handleSelectAllCheckboxChange,
-    "data-testid": ComboboxDataTestid.MULTISELECT.SELECT_ALL_CHECKBOX,
     onKeyDown: handleCheckAllOnTab,
     innerRef: selectAllCheckboxRef
   })), /*#__PURE__*/_jsx(StyledSelectedItems, {}, void 0, multiSelectedValues.length > 0 ? /*#__PURE__*/_jsx(StyledButtonSelection, {

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

@@ -16,7 +16,7 @@ const useHeaderListHandlers = () => {
     },
     showSelectedOptions,
     setShowSelectedOptions,
-    setShowPopover
+    setMenuState
   } = useContext(ComboBoxContext);
   const multiSelectedValues = selectedValues;
   const selectableOptions = getSelectableOptions(filteredOptions);
@@ -51,27 +51,31 @@ const useHeaderListHandlers = () => {
     e.preventDefault();
     setShowSelectedOptions(!showSelectedOptions);
   }, [setShowSelectedOptions, showSelectedOptions]); // when pressing escape on each header list button we close the menu
+  // and set focus on input
 
   const handleKeyDown = useCallback(e => {
     if (e.key === 'Escape') {
-      setShowPopover(false);
+      var _innerRef$current;
+
+      setMenuState(false, 'close', e);
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
     }
-  }, [setShowPopover]); // 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 = useCallback(e => {
     if (e.key === 'Tab' && !e.shiftKey) {
-      var _innerRef$current;
+      var _innerRef$current2;
 
       e.preventDefault();
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+      (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
     }
   }, [innerRef]);
   const handleCheckAllOnTab = useCallback(e => {
     if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {
-      var _innerRef$current2;
+      var _innerRef$current3;
 
       e.preventDefault();
-      (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
+      (_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.focus();
     }
   }, [innerRef, multiSelectedValues]);
   useEffect(() => {

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

@@ -8,11 +8,14 @@ import { HeaderList } from '../header-list/HeaderList.js';
 import { useItemRenderer } from './useItemRenderer.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _HeaderList, _StyledNoResultsWrapp;
+var _HeaderList;
 const MenuList = () => {
+  var _StyledNoResultsWrapp;
+
   const {
     props: {
       menuMinWidth,
+      noOptionsMessage,
       menuMaxHeight,
       onCreate,
       inline,
@@ -40,7 +43,9 @@ const MenuList = () => {
     inline: inline,
     onMouseDown: preventLoseInputFocus,
     width: width,
-    minWidth: menuMinWidth,
+    minWidth: menuMinWidth // we use width as key to force react virtual re-render on window resize
+    // and update the item height accordly
+    ,
     children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx(HeaderList, {}))), filteredOptions.length > 0 || onCreate ? /*#__PURE__*/jsx(StyledVirtualListWrapper, {
       inline: inline,
       maxHeight: menuMaxHeight,
@@ -56,9 +61,9 @@ const MenuList = () => {
         }
       }, void 0, ItemRenderer)
     }) : _StyledNoResultsWrapp || (_StyledNoResultsWrapp = /*#__PURE__*/_jsx(StyledNoResultsWrapper, {
-      "aria-live": "polite"
-    }, void 0, "No matches found"))]
-  }), [wrapperListRef, inline, preventLoseInputFocus, width, menuMinWidth, withHeader, filteredOptions.length, onCreate, menuMaxHeight, listRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize, ItemRenderer]);
+      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]);
 };
 
 export { MenuList };

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

@@ -1,8 +1,8 @@
 import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const StyledListWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: ", ";\n  width: ", ";\n  background-color: #ffffff;\n"])), _ref => {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+const StyledListWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: ", ";\n  width: ", ";\n  background-color: #ffffff;\n  max-height: ", ";\n  z-index: 100;\n"])), _ref => {
   let {
     inline,
     minWidth
@@ -13,20 +13,26 @@ const StyledListWrapper = styled.div(_templateObject || (_templateObject = _tagg
     width
   } = _ref2;
   return "".concat(width, "px");
+}, _ref3 => {
+  let {
+    maxHeight
+  } = _ref3;
+  return "".concat(maxHeight, "px");
 });
-const StyledList = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: 0;\n"])));
-const StyledVirtualListWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  margin-top: ", ";\n\n  max-height: ", ";\n"])), _ref3 => {
+const StyledList = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: 0;\n  background-color: #ffffff;\n  overflow-x: hidden;\n"])));
+const StyledVirtualListWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  margin-top: ", ";\n  max-height: ", ";\n"])), _ref4 => {
   let {
     withHeader
-  } = _ref3;
+  } = _ref4;
   return withHeader ? '28px' : '';
-}, _ref4 => {
+}, _ref5 => {
   let {
     maxHeight
-  } = _ref4;
-  return !maxHeight ? '400px' : "".concat(maxHeight, "px");
+  } = _ref5;
+  return maxHeight ? "".concat(maxHeight, "px") : '300px';
 });
 const StyledCreatableLabel = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-style: italic;\n"])));
-const StyledNoResultsWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 16px;\n"])));
+const StyledCreatableValue = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  word-break: break-all;\n"])));
+const StyledNoResultsWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding: 16px;\n"])));
 
-export { StyledCreatableLabel, StyledList, StyledListWrapper, StyledNoResultsWrapper, StyledVirtualListWrapper };
+export { StyledCreatableLabel, StyledCreatableValue, StyledList, StyledListWrapper, StyledNoResultsWrapper, StyledVirtualListWrapper };

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

@@ -11,10 +11,10 @@ import { useContext, useCallback, useMemo } from 'react';
 import { Grid } from '@elliemae/ds-grid';
 import { Section, Separator, SingleMenuItem, MultiMenuItem } from '@elliemae/ds-form';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { StyledCreatableLabel } from './styled.js';
+import { StyledCreatableLabel, StyledCreatableValue } from './styled.js';
 import { getSuggestedValueOnChange, isSelected } from '../../utils/listHelper.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
-import { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES } from '../../constants.js';
+import { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 var _StyledCreatableLabel;
@@ -32,7 +32,7 @@ const useItemRenderer = () => {
       onFilter,
       allOptions
     },
-    setShowPopover,
+    setMenuState,
     inputValue,
     focusOptionIdx,
     setInputValue,
@@ -40,20 +40,21 @@ const useItemRenderer = () => {
   } = useContext(ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
   const CBItem = multiple ? MultiMenuItem : SingleMenuItem;
+  const handleOnCreateClick = useCallback(() => {
+    if (inputValue && onCreate) {
+      onCreate(inputValue);
+      setInputValue('');
+      if (onFilter) onFilter(allOptions, inputValue);
+    }
+  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);
   const handleClick = useCallback((option, e) => {
-    if (option.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate && onFilter) {
-      if (inputValue) {
-        onCreate(inputValue);
-        setInputValue('');
-        onFilter(allOptions, inputValue);
-      }
-    } else if (option.type === MENU_OPTION_TYPES.OPTION) {
+    if (option.type === MENU_OPTION_TYPES.OPTION) {
       if (!option.disabled) {
         if (onFilter) onFilter(allOptions, inputValue);
         setInputValue('');
 
         if (!multiple) {
-          setShowPopover(false);
+          setMenuState(false, 'selectOption', e);
         }
 
         onChange(getSuggestedValueOnChange(option, selectedValues), option, e);
@@ -63,7 +64,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 = useCallback(e => {
     e.preventDefault();
@@ -78,9 +79,10 @@ const useItemRenderer = () => {
       const generalProps = {
         wrapperStyles: {
           position: 'absolute',
-          top: vItem.start,
+          top: 0,
           left: 0,
-          width: '100%'
+          width: '100%',
+          transform: "translateY(".concat(vItem.start, "px)")
         },
         key: "".concat(option.dsId),
         innerRef: vItem.measureRef
@@ -120,14 +122,14 @@ const useItemRenderer = () => {
               label
             } = _ref;
             return /*#__PURE__*/_jsx(Grid, {
+              p: "8px",
               cols: ['min-content', 'auto'],
-              height: "16px",
               gutter: "xxs",
               alignItems: "center"
-            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx(StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx("span", {}, void 0, "\"".concat(label, "\"")));
+            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx(StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx(StyledCreatableValue, {}, void 0, "\"".concat(label, "\"")));
           },
           label: option.label,
-          onClick: e => handleClick(option, e)
+          onClick: handleOnCreateClick
         }));
       }
 

package/esm/combobox/parts/multi-selected-values-container/MultiSelectedValuesContainer.js

@@ -21,7 +21,7 @@ const MultiSelectedValuesContainer = () => {
   const correctPillsToShow = useGroupPills();
   return useMemo(() => /*#__PURE__*/_jsx("div", {
     style: {
-      width: 'max-content'
+      width: multiSelectedValue.length > 0 ? 'max-content' : '0px'
     },
     "data-testid": ComboboxDataTestid.SELECTED_VALUES
   }, void 0, /*#__PURE__*/_jsx(DSPillGroupV2, {

package/esm/combobox/parts/multi-selected-values-container/RemovableSelectedValuePill.js

@@ -25,6 +25,8 @@ const RemovableSelectedValuePill = props => {
     onRemove: e => {
       var _innerRef$current;
 
+      // preventing the menu to be opened
+      e.stopPropagation();
       onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);
       (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
     }

package/esm/combobox/parts/multi-selected-values-container/useGroupPills.js

@@ -25,8 +25,11 @@ const useGroupPills = () => {
     controlsWrapperRef,
     pillGroupRef
   } = useContext(ComboBoxContext);
-  const multiSelectedValues = selectedValues;
-  const [pillsToShow, setPillsToShow] = useState(multiSelectedValues.length);
+  const multiSelectedValues = selectedValues; // 30 represent 30 pills maximum to calculate the grouped pill. this fix the load time issue
+  // when combobox is receiving a huge amount of options.
+
+  const selectedValuesLength = Math.min(30, multiSelectedValues.length);
+  const [pillsToShow, setPillsToShow] = useState(selectedValuesLength);
   const {
     width
   } = useOnElementResize(controlsWrapperRef);
@@ -34,28 +37,28 @@ const useGroupPills = () => {
     width: widthInput
   } = useOnElementResize(innerRef || null);
   useEffect(() => {
-    if (multiSelectedValues.length !== pillsToShow) {
-      setPillsToShow(multiSelectedValues.length);
+    if (selectedValuesLength !== pillsToShow) {
+      setPillsToShow(selectedValuesLength);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [multiSelectedValues.length, width, widthInput]);
+  }, [selectedValuesLength, width, widthInput]);
   useLayoutEffect(() => {
-    if (selectedOptionsRef.current) {
+    if (selectedOptionsRef.current && pillGroupRef.current) {
       if (pillGroupRef.current) pillGroupRef.current.style.width = 'max-content';
       let lastPillFit = -1;
       let currentWidth = 0;
       const referenceWidth = selectedOptionsRef.current.offsetWidth;
-      const pills = [...selectedOptionsRef.current.querySelectorAll(disabled ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
+      const pills = [...pillGroupRef.current.querySelectorAll(disabled ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
       const pillsWidth = pills.map(pill => pill === null || pill === void 0 ? void 0 : pill.offsetWidth);
       pillsWidth.forEach((pillWidth, idx) => {
         currentWidth += pillWidth;
 
-        if (currentWidth + getGroupedPillWidth(multiSelectedValues.length - idx - 1) <= referenceWidth) {
+        if (currentWidth + getGroupedPillWidth(selectedValuesLength - idx - 1) <= referenceWidth) {
           lastPillFit = idx;
         }
       });
 
-      if (!(multiSelectedValues.length > 0 && pillsToShow !== multiSelectedValues.length)) {
+      if (!(selectedValuesLength > 0 && pillsToShow !== selectedValuesLength)) {
         const nextPillsToShow = lastPillFit + 1;
 
         if (nextPillsToShow !== pillsToShow) {
@@ -65,7 +68,7 @@ const useGroupPills = () => {
 
       if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';
     }
-  }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput, disabled]);
+  }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput, disabled, selectedValuesLength]);
   return pillsToShow || 1;
 };
 

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

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

package/esm/combobox/theming.js

@@ -0,0 +1,8 @@
+const DSComboBoxName = 'ds-combobox';
+const DSComboboxSlots = {
+  CONTAINER: 'root',
+  INPUT_WRAPPER: 'input-wrapper',
+  INPUT: 'input'
+};
+
+export { DSComboBoxName, DSComboboxSlots };

package/esm/combobox/utils/listHelper.js

@@ -47,7 +47,8 @@ const getFirstOption = (options, selectedValues, inputValue) => {
 
   for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {
     return options[i].dsId;
-  }
+  } // list of disabled item results return ''
+
 
   return '';
 };
@@ -97,5 +98,14 @@ const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
   return items;
 };
 const getFilteredOptionsSelected = (filteredOption, selectedValues) => filteredOption.filter(option => option.type === 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);
+};
 
-export { filterOptions, findInCircularList, getFilteredOptionsSelected, getFirstOption, getLastValueSelected, getOptions, getSelectableOptions, getSuggestedValueOnChange, isSelected, isSelectedValueEmpty, isSelectedValueMultiple, selectedValuesWithSections };
+export { filterOptions, findInCircularList, getFilteredOptionsSelected, getFirstOption, getLastValueSelected, getOptions, getSelectableOptions, getSuggestedValueOnChange, isSelected, isSelectedValueEmpty, isSelectedValueMultiple, scrollIfNeeded, selectedValuesWithSections };

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

@@ -18,7 +18,7 @@ const useChangeHandlers = _ref => {
     relevantValues,
     destructuredValues,
     propsBasedOnType,
-    DOMRefs
+    focusTrackers
   } = _ref;
   const {
     tempDateString,
@@ -52,8 +52,8 @@ const useChangeHandlers = _ref => {
     meridiem
   } = destructuredValues;
   const {
-    firstSegmentRef
-  } = DOMRefs;
+    trackFocusFirstSegment
+  } = focusTrackers;
   const getDateMetaInfo = useCallback(function () {
     let newDateString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     let metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -83,7 +83,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
@@ -100,7 +100,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
@@ -116,7 +116,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
@@ -233,12 +233,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 useMemo(() => ({
     handleChangeComposedDateTimeString,
     handleChangeComposedDateString,

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

@@ -4,10 +4,10 @@ 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 React, { useState } from 'react';
+import React from 'react';
 import { getDataProps } from '@elliemae/ds-props-helpers';
 import { useGetDatePickerWithDefaultsProps } from './useGetPropsWithDefault.js';
+import { useFocusTracker } from './useFocusTracker.js';
 import { useGetFlags } from './useGetFlags.js';
 import { useGetReferences } from './useGetReferences.js';
 import { useRelevantValueFromProps } from './useRelevantValueFromProps.js';
@@ -27,6 +27,10 @@ const useControlledDateTimePicker = props => {
   const flags = useGetFlags(propsWithDefaults);
   const DOMRefs = useGetReferences(flags); // refs are used for "auto-advance" feature
 
+  const focusTrackers = useFocusTracker({
+    DOMRefs,
+    flags
+  });
   const relevantValues = useRelevantValueFromProps(propsWithDefaults);
   const propsBasedOnType = useGetPropsBasedOnType(propsWithDefaults);
   const destructuredValues = useGetDestructuredValues(_objectSpread(_objectSpread({}, propsBasedOnType), flags));
@@ -34,17 +38,18 @@ const useControlledDateTimePicker = props => {
     relevantValues,
     destructuredValues,
     propsBasedOnType,
-    DOMRefs
+    DOMRefs,
+    focusTrackers
   });
   const globalKeyHandlers = useGlobalKeyHandlers({
     changeHandlers,
     propsBasedOnType,
     DOMRefs,
-    flags
+    flags,
+    focusTrackers
   }); // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
 
   const dataAttrs = getDataProps(propsWithDefaults);
-  const [latestInteractionRegion, setLatestInteractionRegion] = useState('');
   const {
     announcedDateValues,
     announcedTimeValues
@@ -55,13 +60,12 @@ const useControlledDateTimePicker = props => {
     isWithTimeInputs
   } = flags;
   const ariaCurrentValueForInputs = "current values: ".concat(isWithDateInputs ? "".concat(announcedDateValues) : '').concat(isDateTimeSelector ? ', ' : '').concat(isWithTimeInputs ? "".concat(announcedTimeValues) : '');
-  const ctx = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  const ctx = React.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;
 };