@elliemae/ds-controlled-form 2.4.2-rc.9 → 2.4.2

package/cjs/combobox/parts/A11yFocusedOption.js

@@ -19,22 +19,30 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 const A11yFocusedOption = () => {
   const {
     props: {
-      filteredOptions
+      filteredOptions,
+      selectedValues
     },
     focusOptionIdx,
-    showPopover
+    menuState
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const selectabledOptions = listHelper.getSelectableOptions(filteredOptions);
-  const focusOption = filteredOptions.find(option => !sharedTypes.isSeparator(option) && option.dsId === focusOptionIdx);
+  const focusOption = filteredOptions.find(option => option.dsId === focusOptionIdx);
+  const isFocusOptionSelected = focusOption?.type === 'option' && listHelper.isSelected(selectedValues, focusOption);
   const focusSelectableOptionIdx = selectabledOptions.findIndex(option => option.dsId === focusOptionIdx);
+  const navigationContext = 'Use up and down to choose options,press enter to choose focused option, press Escape to excuse dropdown menu';
   return React.useMemo(() => {
-    if (!sharedTypes.isSeparator(focusOption) && showPopover && focusOption) return /*#__PURE__*/_jsx__default["default"](styled.StyledA11ySelectedValues, {
+    if (!sharedTypes.isSeparator(focusOption) && menuState && focusOption && focusOption.type === 'option') return /*#__PURE__*/_jsx__default["default"](styled.StyledA11ySelectedValues, {
       "aria-live": "polite",
       "aria-atomic": "false",
       "aria-relevant": "additions text"
-    }, void 0, "option ".concat(focusOption === null || focusOption === void 0 ? void 0 : focusOption.label, " focused.").concat(focusSelectableOptionIdx + 1, " of ").concat(selectabledOptions.length, " "));
+    }, menuState, `option ${focusOption?.label} ${isFocusOptionSelected ? 'selected and ' : ''}focused .${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}. ${navigationContext} `);
+    if (focusOption?.type === 'creatable') return /*#__PURE__*/_jsx__default["default"](styled.StyledA11ySelectedValues, {
+      "aria-live": "assertive",
+      "aria-atomic": "false",
+      "aria-relevant": "additions text"
+    }, menuState, `Press enter to Add: ${focusOption?.label}. ${navigationContext}`);
     return null;
-  }, [showPopover, focusOption, focusSelectableOptionIdx, selectabledOptions]);
+  }, [focusOption, menuState, isFocusOptionSelected, focusSelectableOptionIdx, selectabledOptions.length]);
 };
 
 exports.A11yFocusedOption = A11yFocusedOption;

package/cjs/combobox/parts/A11ySelectedValues.js

@@ -25,12 +25,10 @@ const A11ySelectedValues = () => {
 
     if (Array.isArray(selectedValues)) {
       if (selectedValues.length > 0) {
-        msg = "Options selected: ".concat(selectedValues.map(item => item.label).join(', '));
+        msg = `Options selected: ${selectedValues.map(item => item.label).join(', ')}`;
       }
-
-      msg = 'No Options Selected';
     } else if (selectedValues) {
-      msg = "Option selected: ".concat(selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.label);
+      msg = `Option selected: ${selectedValues?.label}`;
     }
 
     return /*#__PURE__*/_jsx__default["default"](styled.StyledA11ySelectedValues, {

package/cjs/combobox/parts/DropdownIndicator.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var React = require('react');
 var dsSystem = require('@elliemae/ds-system');
 var DSButton = require('@elliemae/ds-button');
@@ -14,22 +13,31 @@ var ComboboxDataTestids = require('../ComboboxDataTestids.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 
-var _templateObject;
-const StyledDropDownButton = dsSystem.styled(DSButton.DSButtonV2)(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ", ";\n  }\n"])), _ref => {
+const StyledDropDownButton = dsSystem.styled(DSButton.DSButtonV2)`
+  &:focus::after {
+    border: none;
+  }
+  &:hover:not(:disabled) {
+    background-color: transparent;
+  }
+
+  & svg {
+    fill: ${_ref => {
   let {
     theme,
     disabled
   } = _ref;
   return disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'];
-});
+}};
+  }
+`;
 const DropdownIndicator = () => {
   const {
     props: {
       disabled
     },
-    showPopover
+    menuState
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const colorButton = React.useMemo(() => disabled ? ['neutral', 400] : ['brand-primary', 700], [disabled]);
   const handleOnClick = React.useCallback(e => {
@@ -41,7 +49,7 @@ const DropdownIndicator = () => {
     "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/container/Container.js

@@ -38,15 +38,13 @@ const Container = () => {
 
   const {
     props,
-    setShowPopover,
-    showPopover,
+    setMenuState,
+    menuState,
     setReferenceElement,
     referenceElement
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const {
     inline,
-    onMenuOpen,
-    onMenuClose,
     innerRef,
     startPlacementPreference,
     placementOrderPreference,
@@ -62,20 +60,19 @@ const Container = () => {
     e.preventDefault();
   }, []);
   const handleCloseMenu = React.useCallback(() => {
-    setShowPopover(false);
-    if (innerRef !== null && innerRef !== void 0 && innerRef.current) innerRef.current.blur();
-  }, [innerRef, setShowPopover]);
+    setMenuState(false, 'blur');
+    if (innerRef?.current) innerRef.current.blur();
+  }, [innerRef, setMenuState]);
   React.useEffect(() => {
-    const closeMenuOnWindowBlur = () => setShowPopover(false);
+    const closeMenuOnWindowBlur = () => {
+      setMenuState(false, 'blur');
+    };
 
     window.addEventListener('blur', closeMenuOnWindowBlur);
     return () => {
       window.removeEventListener('blur', closeMenuOnWindowBlur);
     };
-  }, [setShowPopover]);
-  React.useEffect(() => {
-    if (onMenuOpen && showPopover) onMenuOpen();else if (onMenuClose && !showPopover) onMenuClose();
-  }, [showPopover, onMenuOpen, onMenuClose]);
+  }, [setMenuState]);
   return React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx(styled.StyledContainer, _objectSpread(_objectSpread(_objectSpread({
     "data-testid": ComboboxDataTestids.ComboboxDataTestid.CONTAINER,
     ref: setReferenceElement
@@ -86,7 +83,7 @@ const Container = () => {
       children: [_Controls2 || (_Controls2 = /*#__PURE__*/_jsx__default["default"](Controls.Controls, {})), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
         customOffset: [0, 5],
         referenceElement: referenceElement,
-        showPopover: showPopover,
+        showPopover: menuState,
         closeContextMenu: handleCloseMenu,
         startPlacementPreference: startPlacementPreference,
         placementOrderPreference: placementOrderPreference,
@@ -99,7 +96,7 @@ const Container = () => {
         onMouseDown: handleMouseDown
       }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {})))))]
     })
-  })), [inline, setReferenceElement, globalsAttrs, referenceElement, showPopover, xStyledProps, handleCloseMenu, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex, handleMouseDown]);
+  })), [inline, setReferenceElement, globalsAttrs, referenceElement, menuState, xStyledProps, handleCloseMenu, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex, handleMouseDown]);
 };
 
 exports.Container = Container;

package/cjs/combobox/parts/container/styled.js

@@ -2,30 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var dsSystem = require('@elliemae/ds-system');
 var theming = require('../../theming.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-
-var _templateObject, _templateObject2;
 const StyledContainer = dsSystem.styled('div', {
   name: theming.DSComboBoxName,
   slot: theming.DSComboboxSlots.CONTAINER
-})(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  position: relative;\n  cursor: ", ";\n"])), _ref => {
+})`
+  position: relative;
+  cursor: ${_ref => {
   let {
     disabled
   } = _ref;
   return disabled ? 'not-allowed' : 'default';
-});
-const StyledPopperWrapper = dsSystem.styled('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  position: relative;\n  cursor: ", ";\n  overflow: auto;\n"])), _ref2 => {
+}};
+`;
+const StyledPopperWrapper = dsSystem.styled('div')`
+  position: relative;
+  cursor: ${_ref2 => {
   let {
     disabled
   } = _ref2;
   return disabled ? 'not-allowed' : 'default';
-});
+}};
+  overflow: auto;
+`;
 
 exports.StyledContainer = StyledContainer;
 exports.StyledPopperWrapper = StyledPopperWrapper;

package/cjs/combobox/parts/controls/Controls.js

@@ -8,6 +8,7 @@ var DropdownIndicator = require('../DropdownIndicator.js');
 var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
 var styled = require('./styled.js');
+var listHelper = require('../../utils/listHelper.js');
 var MultiSelectedValuesContainer = require('../multi-selected-values-container/MultiSelectedValuesContainer.js');
 var ControlsInput = require('../controls-input/ControlsInput.js');
 var useOnPillsNavigation = require('./useOnPillsNavigation.js');
@@ -20,7 +21,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var _A11ySelectedValues, _A11yFocusedOption, _MultiSelectedValuesC, _ControlsInput, _DropdownIndicator;
+var _A11ySelectedValues, _MultiSelectedValuesC, _A11yFocusedOption, _ControlsInput, _DropdownIndicator;
 const Controls = () => {
   const {
     props: {
@@ -32,50 +33,41 @@ const Controls = () => {
       innerRef
     },
     selectedOptionsRef,
-    setShowPopover,
+    setMenuState,
     setFocusOptionIdx,
     hasFocus,
     listRef,
     focusOptionIdx,
-    showPopover,
+    menuState,
     controlsWrapperRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const handleOnClick = React.useCallback(() => {
-    var _innerRef$current2;
-
     if (disabled) return;
 
-    if (hasFocus && showPopover && !inline) {
-      var _innerRef$current;
-
-      setShowPopover(false);
+    if (hasFocus && menuState && !inline) {
+      setMenuState(false);
       setFocusOptionIdx('');
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.blur();
+      innerRef.current?.blur();
       return;
     }
 
-    (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
-    setShowPopover(true);
+    innerRef.current?.focus();
+    setMenuState(true);
     window.requestAnimationFrame(() => {
-      if (listRef.current && window.scrollY < listRef.current.scrollHeight) {
-        window.scrollTo({
-          top: listRef.current.scrollHeight,
-          behavior: 'smooth'
-        });
-      }
+      window.requestAnimationFrame(() => {
+        if (listRef.current) listHelper.scrollIfNeeded(listRef.current);
+      });
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [disabled, listRef, hasFocus, showPopover, inline, innerRef, setShowPopover, focusOptionIdx]); // this callback prevent to toggle the menu when clicking or removing pills
+  }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]); // this callback prevent to toggle the menu when clicking or removing pills
 
   const handleOnPillsClick = React.useCallback(e => {
-    if (showPopover || disabled) {
+    if (menuState || disabled) {
       e.stopPropagation();
     } else {
-      var _innerRef$current3;
-
-      (_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.focus();
-      setShowPopover(true);
+      innerRef.current?.focus();
+      setMenuState(true);
     }
-  }, [showPopover, innerRef, disabled, setShowPopover]); // callback to prevent onBlur on the input when clicking in all the wrapper
+  }, [menuState, innerRef, disabled, setMenuState]); // callback to prevent onBlur on the input when clicking in all the wrapper
 
   const handleOnMouseDown = React.useCallback(e => {
     if (document.activeElement === innerRef.current || inline) {
@@ -100,12 +92,12 @@ const Controls = () => {
     children: [!inline && /*#__PURE__*/jsxRuntime.jsxs(styled.StyledSelection, {
       ref: selectedOptionsRef,
       onClick: handleOnPillsClick,
-      children: [_A11ySelectedValues || (_A11ySelectedValues = /*#__PURE__*/_jsx__default["default"](A11ySelectedValues.A11ySelectedValues, {})), _A11yFocusedOption || (_A11yFocusedOption = /*#__PURE__*/_jsx__default["default"](A11yFocusedOption.A11yFocusedOption, {})), Array.isArray(selectedValues) ? _MultiSelectedValuesC || (_MultiSelectedValuesC = /*#__PURE__*/_jsx__default["default"](MultiSelectedValuesContainer.MultiSelectedValuesContainer, {})) : /*#__PURE__*/_jsx__default["default"]("div", {
+      children: [_A11ySelectedValues || (_A11ySelectedValues = /*#__PURE__*/_jsx__default["default"](A11ySelectedValues.A11ySelectedValues, {})), Array.isArray(selectedValues) ? _MultiSelectedValuesC || (_MultiSelectedValuesC = /*#__PURE__*/_jsx__default["default"](MultiSelectedValuesContainer.MultiSelectedValuesContainer, {})) : /*#__PURE__*/_jsx__default["default"]("div", {
         "data-testid": ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES
       }, void 0, selectedValues && /*#__PURE__*/_jsx__default["default"](RemovableSelectedValuePill.RemovableSelectedValuePill, {
         pill: selectedValues
       }))]
-    }), _ControlsInput || (_ControlsInput = /*#__PURE__*/_jsx__default["default"](ControlsInput.ControlsInput, {})), !inline && /*#__PURE__*/_jsx__default["default"](styled.StyledHeaderActionsWrapper, {
+    }), _A11yFocusedOption || (_A11yFocusedOption = /*#__PURE__*/_jsx__default["default"](A11yFocusedOption.A11yFocusedOption, {})), _ControlsInput || (_ControlsInput = /*#__PURE__*/_jsx__default["default"](ControlsInput.ControlsInput, {})), !inline && /*#__PURE__*/_jsx__default["default"](styled.StyledHeaderActionsWrapper, {
       justifyContent: "center",
       cols: ['min-content', 'min-content']
     }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyleHeaderActionsSeparator, {

package/cjs/combobox/parts/controls/styled.js

@@ -2,66 +2,98 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var dsSystem = require('@elliemae/ds-system');
 var dsGrid = require('@elliemae/ds-grid');
 var theming = require('../../theming.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-const normalBorder = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), _ref => {
+const normalBorder = dsSystem.css`
+  border: 1px solid ${_ref => {
   let {
     hasError,
     theme
   } = _ref;
   return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
-});
-const focusBorder = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  outline: 2px solid ", ";\n  outline-offset: -2px;\n"])), _ref2 => {
+}};
+`;
+const focusBorder = dsSystem.css`
+  outline: 2px solid ${_ref2 => {
   let {
     theme
   } = _ref2;
   return theme.colors.brand[700];
-});
-const hoverBorder = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), _ref3 => {
+}};
+  outline-offset: -2px;
+`;
+const hoverBorder = dsSystem.css`
+  border: 1px solid ${_ref3 => {
   let {
     theme
   } = _ref3;
   return theme.colors.brand[700];
-});
+}};
+`;
 const StyledControlsWrapper = dsSystem.styled(dsGrid.Grid, {
   name: theming.DSComboBoxName,
   slot: theming.DSComboboxSlots.INPUT_WRAPPER
-})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  background: ", ";\n  position: relative;\n  border-radius: 2px;\n  min-width: ", ";\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  padding-left: 8px;\n  margin: ", ";\n  ", "\n  &:hover {\n    ", "\n  }\n  &:focus-within {\n    ", "\n  }\n"])), _ref4 => {
+})`
+  background: ${_ref4 => {
   let {
     disabled,
     theme
   } = _ref4;
   return disabled ? theme.colors.neutral['080'] : '#ffffff';
-}, _ref5 => {
+}};
+  position: relative;
+  border-radius: 2px;
+  min-width: ${_ref5 => {
   let {
     minWidth,
     inline
   } = _ref5;
-  return inline || !minWidth ? '' : "".concat(minWidth, "px");
-}, _ref6 => {
+  return inline || !minWidth ? '' : `${minWidth}px`;
+}};
+  align-items: center;
+  align-content: center;
+  height: 28px;
+  padding-left: 8px;
+  margin: ${_ref6 => {
   let {
     inline
   } = _ref6;
   return inline ? '10px 16px' : '';
-}, normalBorder, hoverBorder, focusBorder);
-const StyledSelection = dsSystem.styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  font-size: 13px;\n  margin-right: 3px;\n  display: flex;\n"])));
-const StyledHeaderActionsWrapper = dsSystem.styled(dsGrid.Grid)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n"])));
-const StyleDropdownIndicator = dsSystem.styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"]([""])));
-const StyleHeaderActionsSeparator = dsSystem.styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n  align-self: stretch;\n  margin: 4px 0px;\n  width: 1px;\n  background-color: ", ";\n"])), _ref7 => {
+}};
+  ${normalBorder}
+  &:hover {
+    ${hoverBorder}
+  }
+  &:focus-within {
+    ${focusBorder}
+  }
+`;
+const StyledSelection = dsSystem.styled.div`
+  font-size: 13px;
+  margin-right: 3px;
+  display: flex;
+`;
+const StyledHeaderActionsWrapper = dsSystem.styled(dsGrid.Grid)`
+  height: 100%;
+  .em-ds-button--text:focus::after {
+    border: none;
+  }
+`;
+const StyleDropdownIndicator = dsSystem.styled.div``;
+const StyleHeaderActionsSeparator = dsSystem.styled.span`
+  align-self: stretch;
+  margin: 4px 0px;
+  width: 1px;
+  background-color: ${_ref7 => {
   let {
     theme,
     disabled
   } = _ref7;
   return disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'];
-});
+}};
+`;
 
 exports.StyleDropdownIndicator = StyleDropdownIndicator;
 exports.StyleHeaderActionsSeparator = StyleHeaderActionsSeparator;

package/cjs/combobox/parts/controls/useOnPillsNavigation.js

@@ -13,7 +13,7 @@ const useOnPillsNavigation = () => {
     },
     inputValue,
     hasFocus,
-    setShowPopover,
+    setMenuState,
     selectedOptionsRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext); // todo: constant must be defined on pills component
 
@@ -21,33 +21,25 @@ const useOnPillsNavigation = () => {
   const onKeyDownPills = React.useCallback(e => {
     if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') && inputValue === '') {
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        var _innerRef$current;
-
-        (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
-        setShowPopover(true);
+        innerRef.current?.focus();
+        setMenuState(true, 'open', e);
         return;
       }
 
       if (e.key === 'ArrowLeft') {
-        var _selectedOptionsRef$c;
-
-        const removablePills = (_selectedOptionsRef$c = selectedOptionsRef.current) === null || _selectedOptionsRef$c === void 0 ? void 0 : _selectedOptionsRef$c.querySelectorAll(REMOVABLE_PILL_SELECTOR);
+        const removablePills = selectedOptionsRef.current?.querySelectorAll(REMOVABLE_PILL_SELECTOR);
 
         if (hasFocus && removablePills) {
-          var _removablePills;
-
-          (_removablePills = removablePills[removablePills.length - 1]) === null || _removablePills === void 0 ? void 0 : _removablePills.focus();
+          removablePills[removablePills.length - 1]?.focus();
         }
       }
 
       if (e.key === 'ArrowRight') {
-        var _innerRef$current2;
-
         e.preventDefault();
-        (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
+        innerRef.current?.focus();
       }
     }
-  }, [inputValue, hasFocus, innerRef, selectedOptionsRef, setShowPopover]);
+  }, [inputValue, innerRef, setMenuState, selectedOptionsRef, hasFocus]);
   return {
     onKeyDownPills
   };

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

@@ -27,7 +27,7 @@ const ControlsInput = () => {
     },
     focusOptionIdx,
     inputValue,
-    showPopover
+    menuState
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const {
     onInputKeyDown
@@ -52,7 +52,7 @@ const ControlsInput = () => {
     placeholder: placeholder,
     "aria-controls": "combo-listbox",
     "aria-activedescendant": focusOptionIdx,
-    "aria-expanded": showPopover,
+    "aria-expanded": menuState,
     "aria-haspopup": "listbox",
     "aria-describedby": "combobox-selected-items",
     role: "combobox",

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

@@ -2,27 +2,57 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var dsSystem = require('@elliemae/ds-system');
 var theming = require('../../theming.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 const StyledInput = dsSystem.styled('input', {
   name: theming.DSComboBoxName,
   slot: theming.DSComboboxSlots.INPUT
-})(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  font-size: 13px;\n  line-height: 13px;\n  border: none;\n  padding: 0;\n  outline: none;\n  color: ", ";\n  &:focus {\n    outline: none;\n  }\n  ", "\n  &::placeholder {\n    color: transparent;\n  }\n"])), props => props.theme.colors.neutral[700], _ref => {
+})`
+  font-size: 13px;
+  line-height: 13px;
+  border: none;
+  padding: 0;
+  outline: none;
+  color: ${props => props.theme.colors.neutral[700]};
+  &:focus {
+    outline: none;
+  }
+  ${_ref => {
   let {
     withoutCaret
   } = _ref;
   return withoutCaret && 'caret-color: transparent;';
-});
-const StyledInputPlaceHolder = dsSystem.styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  font-style: italic;\n  color: ", ";\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n  height: 28px;\n  font-size: 13px;\n  & span::after {\n    content: '';\n    padding: 1px;\n  }\n"])), props => props.theme.colors.neutral[500]);
-const StyledInputWidthReference = dsSystem.styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n"])));
-const StyledInputWrapper = dsSystem.styled('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  position: relative;\n  align-items: center;\n  display: flex;\n"])));
+}}
+  &::placeholder {
+    color: transparent;
+  }
+`;
+const StyledInputPlaceHolder = dsSystem.styled.div`
+  font-style: italic;
+  color: ${props => props.theme.colors.neutral[500]};
+  position: absolute;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  user-select: none;
+  height: 28px;
+  font-size: 13px;
+  & span::after {
+    content: '';
+    padding: 1px;
+  }
+`;
+const StyledInputWidthReference = dsSystem.styled.span`
+  visibility: hidden;
+  position: absolute;
+  top: -9999px;
+`;
+const StyledInputWrapper = dsSystem.styled('div')`
+  position: relative;
+  align-items: center;
+  display: flex;
+`;
 
 exports.StyledInput = StyledInput;
 exports.StyledInputPlaceHolder = StyledInputPlaceHolder;

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

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/es.string.replace.js');
 var React = require('react');
 var useMaskedOnChange = require('./useMaskedOnChange.js');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
@@ -19,6 +17,7 @@ const useControlsInput = () => {
     },
     setHasFocus,
     inputValue,
+    setMenuState,
     setInputValue
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const [width, setWidth] = React.useState(1); // use span reference to calculate the real width for the input
@@ -27,18 +26,16 @@ const useControlsInput = () => {
   const showPlaceholder = !inputValue && listHelper.isSelectedValueEmpty(selectedValues) ? placeholder : null;
   const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
   React.useEffect(() => {
-    var _spanReference$curren;
-
-    setWidth((_spanReference$curren = spanReference.current) !== null && _spanReference$curren !== void 0 && _spanReference$curren.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
+    setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
   }, [inputValue]); // if we se an input mask we configure inside here the proper mask
   // or a stardard combobox onchange event
 
   const handleOnChange = useMaskedOnChange.useMaskedOnChange();
   const handleOnBlur = React.useCallback(() => {
     setInputValue('');
-    if (onFilter) onFilter(allOptions, inputValue);
+    if (onFilter) onFilter(allOptions);
     setHasFocus(false);
-  }, [setInputValue, onFilter, allOptions, inputValue, setHasFocus]);
+  }, [setInputValue, onFilter, allOptions, setHasFocus]);
   const handleOnFocus = React.useCallback(() => {
     setHasFocus(true);
   }, [setHasFocus]);