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

package/cjs/autocomplete/parts/A11yFocusedOption.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+var React = require('react');
+var dsSystem = require('@elliemae/ds-system');
+var AutocompleteCTX = require('../AutocompleteCTX.js');
+var listHelper = require('../utils/listHelper.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 isSeparator = el => (el === null || el === void 0 ? void 0 : el.type) === 'separator';
+const StyledA11ySelectedValues = dsSystem.styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n"])));
+const A11yFocusedOption = () => {
+  const {
+    props: {
+      options
+    },
+    focusOptionIdx,
+    showPopover
+  } = React.useContext(AutocompleteCTX.AutocompleteContext);
+  return React.useMemo(() => {
+    const selectabledOptions = listHelper.getSelectableOptions(options);
+    const focusOption = options.find(option => !isSeparator(option) && option.dsId === focusOptionIdx);
+    const focusSelectableOptionIdx = selectabledOptions.findIndex(option => option.dsId === focusOptionIdx);
+    return /*#__PURE__*/_jsx__default["default"](StyledA11ySelectedValues, {
+      "aria-live": "polite"
+    }, void 0, !isSeparator(focusOption) && showPopover && focusOption && "option ".concat(focusOption.label, " focused.").concat(focusSelectableOptionIdx + 1, " of ").concat(selectabledOptions.length, "\n           "));
+  }, [options, showPopover, focusOptionIdx]);
+};
+
+exports.A11yFocusedOption = A11yFocusedOption;
+exports.StyledA11ySelectedValues = StyledA11ySelectedValues;
+exports.isSeparator = isSeparator;

package/cjs/autocomplete/parts/container/Container.js

@@ -13,6 +13,7 @@ var styled = require('./styled.js');
 var MenuList = require('../menu-list/MenuList.js');
 var useKeyboardNavigation = require('./useKeyboardNavigation.js');
 var AutocompleteDataTestids = require('../../AutocompleteDataTestids.js');
+var A11yFocusedOption = require('../A11yFocusedOption.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -20,10 +21,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _StyledPopperWrapper;
+var _A11yFocusedOption, _StyledPopperWrapper;
 const Container = () => {
   const {
     props: {
+      id,
       startPlacementPreference,
       children,
       filter,
@@ -32,6 +34,7 @@ const Container = () => {
     showPopover,
     setReferenceElement,
     setShowPopover,
+    focusOptionIdx,
     referenceElement
   } = React.useContext(AutocompleteCTX.AutocompleteContext);
   React.useEffect(() => {
@@ -47,32 +50,41 @@ const Container = () => {
   const handleCloseMenu = React.useCallback(() => {
     setShowPopover(false);
   }, [setShowPopover]);
-  const input = React__default["default"].Children.only(children);
   const {
     onInputKeyDown
   } = useKeyboardNavigation.useKeyboardNavigation();
-  return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledContainerWithPopper, {
-    ref: setReferenceElement,
-    role: "combobox",
-    "aria-autocomplete": "list",
-    "aria-controls": "autocomplete-listbox",
-    "aria-expanded": showPopover,
-    onKeyDown: onInputKeyDown,
-    "data-testid": AutocompleteDataTestids.AutocompleteDataTestid.CONTAINER,
-    children: [input, filter && /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
-      customOffset: [0, 5],
-      closeContextMenu: handleCloseMenu,
-      referenceElement: referenceElement,
-      showPopover: showPopover,
-      startPlacementPreference: startPlacementPreference,
-      placementOrderPreference: placementOrderPreference,
-      withoutPortal: true,
-      withoutArrow: true,
-      withoutAnimation: true,
-      zIndex: 10
-    }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx__default["default"](styled.StyledPopperWrapper, {
-      tabIndex: -1
-    }, void 0, /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {}))))]
+  const input = React__default["default"].Children.only(children);
+  const childrenWithProps = /*#__PURE__*/React__default["default"].isValidElement(input) ? /*#__PURE__*/React__default["default"].cloneElement(input, {
+    'aria-activedescendant': focusOptionIdx
+  }) : input;
+  const idList = React.useMemo(() => "".concat(id ? "".concat(id, "-") : '', "listbox"), [id]);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [_A11yFocusedOption || (_A11yFocusedOption = /*#__PURE__*/_jsx__default["default"](A11yFocusedOption.A11yFocusedOption, {})), /*#__PURE__*/jsxRuntime.jsxs(styled.StyledContainer, {
+      id: id,
+      ref: setReferenceElement,
+      role: "combobox",
+      "aria-autocomplete": "list",
+      "aria-controls": "autocomplete-listbox",
+      "aria-expanded": showPopover,
+      "aria-haspopup": "listbox",
+      "aria-owns": idList,
+      onKeyDown: onInputKeyDown,
+      "data-testid": AutocompleteDataTestids.AutocompleteDataTestid.CONTAINER,
+      children: [childrenWithProps, filter && /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
+        customOffset: [0, 5],
+        closeContextMenu: handleCloseMenu,
+        referenceElement: referenceElement,
+        showPopover: showPopover,
+        startPlacementPreference: startPlacementPreference,
+        placementOrderPreference: placementOrderPreference,
+        withoutPortal: true,
+        withoutArrow: true,
+        withoutAnimation: true,
+        zIndex: 10
+      }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx__default["default"](styled.StyledPopperWrapper, {
+        tabIndex: -1
+      }, void 0, /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {}))))]
+    })]
   });
 };
 

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

@@ -8,12 +8,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledContainerWithPopper = /*#__PURE__*/styled__default["default"].div.withConfig({
+const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-xupfk9-0"
 })(["width:100%;height:28px;position:relative;"]);
 const StyledPopperWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-xupfk9-1"
 })(["background:#fff;overflow:auto;position:relative;"]);
 
-exports.StyledContainerWithPopper = StyledContainerWithPopper;
+exports.StyledContainer = StyledContainer;
 exports.StyledPopperWrapper = StyledPopperWrapper;

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

@@ -17,7 +17,8 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 const MenuList = () => {
   const {
     props: {
-      options
+      options,
+      id
     },
     referenceElement,
     inputRef,
@@ -33,11 +34,12 @@ const MenuList = () => {
 
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }, [inputRef]);
+  const idList = React.useMemo(() => "".concat(id ? "".concat(id, "-") : '', "listbox"), [id]);
   return /*#__PURE__*/_jsx__default["default"](styled.StyledListWrapper, {
     tabIndex: -1,
     onMouseDown: e => e.preventDefault(),
     minWidth: referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth,
-    id: "autocomplete-listbox",
+    id: idList,
     role: "listbox"
   }, void 0, options.length > 0 && /*#__PURE__*/jsxRuntime.jsx(styled.StyledVirtualListWrapper, {
     tabIndex: -1,

package/cjs/autocomplete/parts/styled.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/autocomplete/utils/listHelper.js

@@ -13,7 +13,7 @@ const isSelectedValueMultiple = value => Array.isArray(value);
 const findInCircularList = function (list, from, criteria) {
   let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
 
-  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
+  for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
     if (criteria(list[i])) return i;
   }
 

package/cjs/checkbox/ControlledCheckbox.js

@@ -108,7 +108,7 @@ const DSControlledCheckbox = props => {
       checked: checked,
       "data-testid": "ds-checkbox-label",
       wrapLabel: wrapLabel
-    }, void 0, wrapLabel ? label : /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+    }, void 0, wrapLabel ? /*#__PURE__*/_jsx__default["default"](styles.StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
       value: label
     }))]
   }));

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

@@ -26,7 +26,8 @@ const defaultProps = {
 const propTypes = _objectSpread(_objectSpread({}, dsPropsHelpers.globalAttributesPropTypes), {}, {
   label: dsPropsHelpers.PropTypes.string.description('Checkbox Label property. This label is also going to be used as an aria-label for screen readers.'),
   hasError: dsPropsHelpers.PropTypes.bool.description('Whether the checkbox has error or not.'),
-  innerRef: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.func, dsPropsHelpers.PropTypes.object]).description('Checkbox input ref.')
+  innerRef: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.func, dsPropsHelpers.PropTypes.object]).description('Checkbox input ref.'),
+  wrapLabel: dsPropsHelpers.PropTypes.bool.description('Whether to wrap or truncate the label')
 });
 
 exports.defaultProps = defaultProps;

package/cjs/checkbox/styles.js

@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 const StyledContainer = dsSystem.styled('div', {
   name: theming.DSCheckboxName,
   slot: theming.DSCheckboxSlots.CONTAINER
@@ -101,7 +101,7 @@ const StyledLabel = dsSystem.styled('label', {
     wrapLabel,
     theme
   } = _ref11;
-  return wrapLabel ? 'padding: 8px' : "padding-left: ".concat(theme.space.xxs);
+  return wrapLabel ? 'padding: 8px 0px 8px 8px;' : "padding-left: ".concat(theme.space.xxs);
 }, _ref12 => {
   let {
     theme,
@@ -111,9 +111,11 @@ const StyledLabel = dsSystem.styled('label', {
   } = _ref12;
   return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
 });
+const StyledWrapLabel = dsSystem.styled('span')(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"]([""])));
 
 exports.StyledCheckBox = StyledCheckBox;
 exports.StyledContainer = StyledContainer;
 exports.StyledInput = StyledInput;
 exports.StyledInputMixed = StyledInputMixed;
 exports.StyledLabel = StyledLabel;
+exports.StyledWrapLabel = StyledWrapLabel;

package/cjs/combobox/ComboBoxCTX.js

@@ -16,12 +16,14 @@ const defaultProps = {
   useMask: noop,
   innerRef: /*#__PURE__*/React.createRef(),
   startPlacementPreference: 'bottom-start',
-  placementOrderPreference: ['bottom-start', 'bottom-end'] // override in useCombobox to avoid ref duplications when more than one cb is used
+  placementOrderPreference: ['bottom-start', 'bottom-end'],
+  noOptionsMessage: 'No Matches Found',
+  filteredOptions: [] // override in useCombobox to avoid ref duplications when more than one cb is used
 
 };
 const defaultContext = {
   props: defaultProps,
-  showPopover: false,
+  menuState: false,
   hasFocus: false,
   referenceElement: null,
   inputValue: '',
@@ -40,7 +42,8 @@ const defaultContext = {
   setInputValue: noop,
   setReferenceElement: noop,
   setFocusOptionIdx: noop,
-  setShowSelectedOptions: noop
+  setShowSelectedOptions: noop,
+  setMenuState: noop
 };
 /** Context for cross component communication */
 

package/cjs/combobox/config/useComboBox.js

@@ -44,8 +44,18 @@ const useComboBox = props => {
   const toggleSelectionButtonRef = React.useRef(null);
   const pillGroupRef = React.useRef(null);
   const {
-    selectedValues
-  } = propsWithDefaults; // ---------------------------------------------------------------------------
+    selectedValues,
+    isMenuOpen,
+    onMenuChange
+  } = propsWithDefaults;
+  const menuState = React.useMemo(() => {
+    if (isMenuOpen !== undefined) return isMenuOpen;
+    return showPopover;
+  }, [showPopover, isMenuOpen]);
+  const setMenuState = React.useCallback((newState, reason, e) => {
+    if (onMenuChange !== undefined) onMenuChange(newState, reason, e);
+    setShowPopover(newState);
+  }, [onMenuChange]); // ---------------------------------------------------------------------------
   // Options with creatable option + filtered by selected
   // ---------------------------------------------------------------------------
 
@@ -99,7 +109,7 @@ const useComboBox = props => {
       filteredOptions: correctOptions
     }),
     virtualListHelpers,
-    showPopover,
+    menuState,
     referenceElement,
     listRef,
     focusOptionIdx,
@@ -108,6 +118,7 @@ const useComboBox = props => {
     selectAllCheckboxRef,
     inputValue,
     setInputValue,
+    setMenuState,
     hasFocus,
     toggleSelectionButtonRef,
     pillGroupRef,
@@ -119,7 +130,7 @@ const useComboBox = props => {
     scrollOptionIntoView,
     setReferenceElement,
     setShowPopover
-  }), [scrollOptionIntoView, correctOptions, hasFocus, propsWithDefaults, virtualListHelpers, inputValue, focusOptionIdx, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, listRef]);
+  }), [scrollOptionIntoView, setMenuState, correctOptions, hasFocus, propsWithDefaults, virtualListHelpers, inputValue, focusOptionIdx, wrapperListRef, showSelectedOptions, menuState, pillGroupRef, referenceElement, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, listRef]);
   return ctx;
 };
 

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 === null || focusOption === void 0 ? void 0 : 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 ".concat(focusOption === null || focusOption === void 0 ? void 0 : focusOption.label, " ").concat(isFocusOptionSelected ? 'selected and ' : '', "focused .").concat(focusSelectableOptionIdx + 1, " of ").concat(selectabledOptions.length, ". ").concat(navigationContext, " "));
+    if ((focusOption === null || focusOption === void 0 ? void 0 : 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: ".concat(focusOption === null || focusOption === void 0 ? void 0 : focusOption.label, ". ").concat(navigationContext));
     return null;
-  }, [showPopover, focusOption, focusSelectableOptionIdx, selectabledOptions]);
+  }, [focusOption, menuState, isFocusOptionSelected, focusSelectableOptionIdx, selectabledOptions.length]);
 };
 
 exports.A11yFocusedOption = A11yFocusedOption;

package/cjs/combobox/parts/A11ySelectedValues.js

@@ -27,8 +27,6 @@ const A11ySelectedValues = () => {
       if (selectedValues.length > 0) {
         msg = "Options selected: ".concat(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);
     }

package/cjs/combobox/parts/DropdownIndicator.js

@@ -29,7 +29,7 @@ const DropdownIndicator = () => {
     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 +41,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);
+    setMenuState(false, 'blur');
     if (innerRef !== null && innerRef !== void 0 && innerRef.current) innerRef.current.blur();
-  }, [innerRef, setShowPopover]);
+  }, [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/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,12 +33,12 @@ const Controls = () => {
       innerRef
     },
     selectedOptionsRef,
-    setShowPopover,
+    setMenuState,
     setFocusOptionIdx,
     hasFocus,
     listRef,
     focusOptionIdx,
-    showPopover,
+    menuState,
     controlsWrapperRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const handleOnClick = React.useCallback(() => {
@@ -45,37 +46,34 @@ const Controls = () => {
 
     if (disabled) return;
 
-    if (hasFocus && showPopover && !inline) {
+    if (hasFocus && menuState && !inline) {
       var _innerRef$current;
 
-      setShowPopover(false);
+      setMenuState(false);
       setFocusOptionIdx('');
       (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.blur();
       return;
     }
 
     (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
-    setShowPopover(true);
+    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);
+      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 +98,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/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
 
@@ -24,7 +24,7 @@ const useOnPillsNavigation = () => {
         var _innerRef$current;
 
         (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
-        setShowPopover(true);
+        setMenuState(true, 'open', e);
         return;
       }
 
@@ -47,7 +47,7 @@ const useOnPillsNavigation = () => {
         (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.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/useControlsInput.js

@@ -19,6 +19,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
@@ -36,9 +37,9 @@ const useControlsInput = () => {
   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]);