@elliemae/ds-controlled-form 2.3.2-next.0 → 2.4.0-next.0

package/cjs/autocomplete/parts/controls/useKeyboardNavigation.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 AutocompleteCTX = require('../../AutocompleteCTX.js');
+var listHelper = require('../../utils/listHelper.js');
+
+const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
+
+const useKeyboardNavigation = () => {
+  const {
+    props: {
+      onValueChange,
+      options
+    },
+    setShowPopover,
+    showPopover,
+    focusOptionIdx,
+    setCurrentOption,
+    scrollOptionIntoView
+  } = React.useContext(AutocompleteCTX.AutocompleteContext);
+  const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
+  const currentItem = options.find(item => item.type === 'option' && item.dsId === focusOptionIdx);
+  const selectOption = React.useCallback(e => {
+    if (onValueChange) onValueChange(currentItem.label, e);
+    setShowPopover(false);
+  }, [currentItem, setShowPopover, onValueChange]);
+  const onInputKeyDown = React.useCallback(e => {
+    const targetElement = e.target;
+
+    if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) {
+      setShowPopover(true);
+    } // =============================================================================
+    // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER
+    // =============================================================================
+
+
+    if (e.keyCode === 32 && targetElement.value === '' || e.key === 'Enter') {
+      if (showPopover) {
+        e.preventDefault();
+        selectOption(e);
+      }
+    } // =============================================================================
+    // ARROWS UP AND DOWN
+    // =============================================================================
+
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+
+      if (showPopover) {
+        const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+      }
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+
+      if (showPopover) {
+        const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+        setTimeout(() => {
+          const nextItemIndex = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
+          setCurrentOption(options[nextItemIndex].dsId);
+          scrollOptionIntoView(options[nextItemIndex].dsId);
+        });
+      }
+    } // =============================================================================
+    // ESCAPE
+    // =============================================================================
+
+
+    if (e.key === 'Escape') {
+      setShowPopover(false);
+    }
+  }, [scrollOptionIntoView, currentItemIndex, options, showPopover, setCurrentOption, setShowPopover, selectOption]);
+  return {
+    onInputKeyDown
+  };
+};
+
+exports.useKeyboardNavigation = useKeyboardNavigation;

package/cjs/autocomplete/parts/controls/useMaskedOnChange.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var AutocompleteCTX = require('../../AutocompleteCTX.js');
+
+const useMaskedOnChange = () => {
+  const {
+    props: {
+      useMask,
+      onChange
+    },
+    setShowPopover
+  } = React.useContext(AutocompleteCTX.AutocompleteContext); // default onchange when no mask provided
+
+  const handleOnChange = React.useCallback(e => {
+    setShowPopover(true);
+    onChange(e.target.value);
+  }, [onChange, setShowPopover]);
+  const onChangeMask = useMask({
+    valueSetter: setInputValue,
+    onChange: handleOnChange
+  });
+  return (onChangeMask === null || onChangeMask === void 0 ? void 0 : onChangeMask.onChange) || handleOnChange;
+};
+
+exports.useMaskedOnChange = useMaskedOnChange;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+function noop() {}
+const propTypes = {
+  placeholder: dsPropsHelpers.PropTypes.string.description('input s placeholder value').defaultValue(''),
+  options: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.array, dsPropsHelpers.PropTypes.object]).description('List of options').defaultValue([]),
+  value: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.string]).description('Array of option or single option selected'),
+  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'),
+  onChange: dsPropsHelpers.PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue('')
+};
+
+exports.noop = noop;
+exports.propTypes = propTypes;

package/cjs/autocomplete/sharedTypes.js

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

package/cjs/combobox/config/useComboBox.js

@@ -15,6 +15,7 @@ var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var ComboBoxCTX = require('../ComboBoxCTX.js');
 var reactDescPropTypes = require('../react-desc-prop-types.js');
 var useCorrectOptions = require('./useCorrectOptions.js');
+var listHelper = require('../utils/listHelper.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,15 +36,17 @@ const useComboBox = props => {
   const [showSelectedOptions, setShowSelectedOptions] = React.useState(false);
   const [inputValue, setInputValue] = React.useState('');
   const [hasFocus, setHasFocus] = React.useState(false);
-  const [focusOptionIdx, setFocusOptionIdx] = React.useState('');
   const listRef = React.useRef(null);
   const wrapperListRef = React.useRef(null);
   const selectedOptionsRef = React.useRef(null);
   const controlsWrapperRef = React.useRef(null);
   const selectAllCheckboxRef = React.useRef(null);
   const toggleSelectionButtonRef = React.useRef(null);
-  const pillGroupRef = React.useRef(null); // ---------------------------------------------------------------------------
-  // Menu Options with/out selected filter
+  const pillGroupRef = React.useRef(null);
+  const {
+    selectedValues
+  } = propsWithDefaults; // ---------------------------------------------------------------------------
+  // Menu Options with/out selected filter and creatable functionality
   // ---------------------------------------------------------------------------
 
   const correctOptions = useCorrectOptions.useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions); // ===========================================================================
@@ -59,9 +62,30 @@ const useComboBox = props => {
   // Scroll into view function
   // ===========================================================================
 
-  const scrollOptionIntoView = React.useCallback(dsId => {
-    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId));
-  }, [correctOptions, virtualListHelpers]);
+  const scrollOptionIntoView = React.useCallback(function (dsId) {
+    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      align: 'center'
+    };
+    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId), // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    opts);
+  }, [correctOptions, virtualListHelpers]); // ===========================================================================
+  // Init focused option when opening the menu list
+  // ===========================================================================
+
+  const [focusOptionIdx, setFocusOptionIdx] = React.useState('');
+  React.useEffect(() => {
+    // we are updating the focus option only when we have focus on the input and
+    // we are in the selected option view or we are typing to force first option always
+    if (hasFocus && (focusOptionIdx === '' || inputValue !== '' || showSelectedOptions)) {
+      const focusedValue = listHelper.getFirstOption(correctOptions, selectedValues, inputValue);
+      setFocusOptionIdx(focusedValue);
+      scrollOptionIntoView(focusedValue, {
+        align: 'center'
+      });
+    }
+
+    if (!hasFocus) setFocusOptionIdx(''); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showPopover, hasFocus, correctOptions, selectedValues, inputValue]);
   const ctx = React.useMemo(() => ({
     props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
       options: correctOptions

package/cjs/combobox/config/useCorrectOptions.js

@@ -53,7 +53,7 @@ const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) =
     }
 
     if (onCreate && inputValue && options.findIndex(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
-      const creatableUuid = uid.uid(6);
+      const creatableUuid = uid.uid();
       const creatableItem = {
         dsId: "creatable-".concat(creatableUuid),
         label: inputValue,

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

@@ -56,7 +56,7 @@ const Container = () => {
   const StyledContainer = inline ? styled.StyledContainerInline : styled.StyledContainerWithPopper;
   const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(props); // Removing possible collisionable props
 
-  const rest = _objectWithoutProperties__default["default"](globalAttributes, _excluded);
+  const globalsAttrs = _objectWithoutProperties__default["default"](globalAttributes, _excluded);
 
   const handleMouseDown = React.useCallback(e => {
     e.preventDefault();
@@ -76,38 +76,30 @@ const Container = () => {
   React.useEffect(() => {
     if (onMenuOpen && showPopover) onMenuOpen();else if (onMenuClose && !showPopover) onMenuClose();
   }, [showPopover, onMenuOpen, onMenuClose]);
-  return React.useMemo(() => {
-    if (inline) {
-      return /*#__PURE__*/jsxRuntime.jsxs(StyledContainer, _objectSpread(_objectSpread({
-        ref: setReferenceElement
-      }, rest), {}, {
-        children: [_Controls || (_Controls = /*#__PURE__*/_jsx__default["default"](Controls.Controls, {})), _MenuList || (_MenuList = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {}))]
-      }));
-    }
-
-    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: /*#__PURE__*/jsxRuntime.jsxs(StyledContainer, _objectSpread(_objectSpread({
-        "data-testid": ComboboxDataTestids.ComboboxDataTestid.CONTAINER,
-        ref: setReferenceElement
-      }, rest), {}, {
-        children: [_Controls2 || (_Controls2 = /*#__PURE__*/_jsx__default["default"](Controls.Controls, {})), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
-          customOffset: [0, 5],
-          referenceElement: referenceElement,
-          showPopover: showPopover,
-          closeContextMenu: handleCloseMenu,
-          startPlacementPreference: startPlacementPreference,
-          placementOrderPreference: placementOrderPreference,
-          withoutPortal: withoutPortal,
-          withoutArrow: true,
-          withoutAnimation: true,
-          zIndex: zIndex
-        }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx__default["default"](styled.StyledPopperWrapper, {
-          tabIndex: -1,
-          onMouseDown: handleMouseDown
-        }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {})))))]
-      }))
-    });
-  }, [inline, showPopover, StyledContainer, placementOrderPreference, referenceElement, rest, startPlacementPreference, withoutPortal, zIndex, handleCloseMenu, handleMouseDown, setReferenceElement]);
+  return React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx(StyledContainer, _objectSpread(_objectSpread({
+    "data-testid": ComboboxDataTestids.ComboboxDataTestid.CONTAINER,
+    ref: setReferenceElement
+  }, globalsAttrs), {}, {
+    children: inline ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [_Controls || (_Controls = /*#__PURE__*/_jsx__default["default"](Controls.Controls, {})), _MenuList || (_MenuList = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {}))]
+    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [_Controls2 || (_Controls2 = /*#__PURE__*/_jsx__default["default"](Controls.Controls, {})), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
+        customOffset: [0, 5],
+        referenceElement: referenceElement,
+        showPopover: showPopover,
+        closeContextMenu: handleCloseMenu,
+        startPlacementPreference: startPlacementPreference,
+        placementOrderPreference: placementOrderPreference,
+        withoutPortal: withoutPortal,
+        withoutArrow: true,
+        withoutAnimation: true,
+        zIndex: zIndex
+      }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx__default["default"](styled.StyledPopperWrapper, {
+        tabIndex: -1,
+        onMouseDown: handleMouseDown
+      }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {})))))]
+    })
+  })), [inline, StyledContainer, setReferenceElement, globalsAttrs, referenceElement, showPopover, handleCloseMenu, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex, handleMouseDown]);
 };
 
 exports.Container = Container;

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var dsPills = require('@elliemae/ds-pills');
 var DropdownIndicator = require('../DropdownIndicator.js');
 var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
@@ -14,6 +13,7 @@ var ControlsInput = require('../controls-input/ControlsInput.js');
 var useOnPillsNavigation = require('./useOnPillsNavigation.js');
 var A11yFocusedOption = require('../A11yFocusedOption.js');
 var A11ySelectedValues = require('../A11ySelectedValues.js');
+var RemovableSelectedValuePill = require('../multi-selected-values-container/RemovableSelectedValuePill.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,7 +25,6 @@ const Controls = () => {
   const {
     props: {
       inline,
-      onChange,
       disabled,
       inputMinWidth,
       hasError,
@@ -91,20 +90,9 @@ const Controls = () => {
       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", {
         "data-testid": ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES
-      }, void 0, selectedValues && /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
-        size: "s",
-        labelTruncated: true,
-        tabIndex: -1,
-        disabled: disabled,
-        label: selectedValues.label,
-        type: disabled ? 'value' : 'removable',
-        onRemove: () => {
-          var _innerRef$current4;
-
-          onChange(null);
-          (_innerRef$current4 = innerRef.current) === null || _innerRef$current4 === void 0 ? void 0 : _innerRef$current4.focus();
-        }
-      }, selectedValues.value))]
+      }, 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, {
       justifyContent: "center",
       cols: ['auto', 'auto']

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

@@ -17,7 +17,6 @@ const useControlsInput = () => {
       onFilter
     },
     setHasFocus,
-    setFocusOptionIdx,
     inputValue,
     setInputValue,
     setShowSelectedOptions
@@ -38,10 +37,9 @@ const useControlsInput = () => {
   const handleOnBlur = React.useCallback(() => {
     setInputValue('');
     if (onFilter) onFilter('');
-    setFocusOptionIdx('');
     setHasFocus(false);
     setShowSelectedOptions(false);
-  }, [setInputValue, setShowSelectedOptions, onFilter, setFocusOptionIdx, setHasFocus]);
+  }, [setInputValue, setShowSelectedOptions, onFilter, setHasFocus]);
   const handleOnFocus = React.useCallback(() => {
     setHasFocus(true);
   }, [setHasFocus]);

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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 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');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
 var React = require('react');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
 var listHelper = require('../../utils/listHelper.js');
@@ -15,47 +17,38 @@ const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) &
 const useKeyboardNavigation = () => {
   const {
     props: {
-      inline,
-      onSelectAll,
       onCancel,
       onKeyDown,
       onChange,
       onCreate,
+      onFilter,
+      onSelectAll,
+      inline,
       options,
       selectedValues,
-      onFilter,
       withoutPortal
     },
-    setShowPopover,
-    setInputValue,
     inputValue,
     showPopover,
     focusOptionIdx,
-    setFocusOptionIdx,
     selectAllCheckboxRef,
-    toggleSelectionButtonRef
+    toggleSelectionButtonRef,
+    setShowPopover,
+    setInputValue,
+    scrollOptionIntoView,
+    setFocusOptionIdx
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
   const selectableOptions = listHelper.getOptions(options);
   const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
   const currentItem = options.find(item => item.dsId === focusOptionIdx);
-  const selectOption = React.useCallback(() => {
-    const selectedOption = options.find(item => item.dsId === focusOptionIdx);
-
-    if (!selectedOption.disabled) {
-      if (onFilter) onFilter('');
-      setInputValue('');
-      onChange(selectedOption);
-      if (!multiple) setShowPopover(false);
-    }
-  }, [multiple, options, setInputValue, focusOptionIdx, setShowPopover, onFilter, onChange]);
   const onInputKeyDown = React.useCallback(e => {
     // =============================================================================
     // CUSTOM KEYS
     // =============================================================================
-    if (onKeyDown) onKeyDown(e, currentItem);
+    if (onKeyDown && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === constants.MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);
 
-    if (!['Escape', 'Tab', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+    if (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) {
       setShowPopover(true);
     } // =============================================================================
     // ESCAPE
@@ -90,8 +83,17 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if (focusOptionIdx !== '' && showPopover) {
-        selectOption();
+      if (focusOptionIdx !== '' && showPopover && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === constants.MENU_OPTION_TYPES.OPTION) {
+        if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === 'option' && !currentItem.disabled) {
+          if (onFilter) onFilter('');
+          setInputValue('');
+
+          if (!multiple) {
+            setShowPopover(false);
+          }
+
+          onChange(listHelper.getSuggestedValueOnChange(currentItem, selectedValues), currentItem, e);
+        }
       }
     }
 
@@ -99,8 +101,8 @@ const useKeyboardNavigation = () => {
       setShowPopover(false);
     }
 
-    if (e.key === 'a' && e.ctrlKey && multiple) {
-      if (onSelectAll) onSelectAll();
+    if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {
+      onSelectAll(options.filter(option => option.type === 'option' && !option.disabled), e);
     } // =============================================================================
     // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT
     // =============================================================================
@@ -113,6 +115,7 @@ const useKeyboardNavigation = () => {
       if ((showPopover || inline) && selectableOptions.length) {
         const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable);
         setFocusOptionIdx(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
       }
     }
 
@@ -124,11 +127,13 @@ const useKeyboardNavigation = () => {
 
       if (showPopover || inline) {
         setFocusOptionIdx(options[prevItemIndex].dsId);
+        scrollOptionIntoView(options[prevItemIndex].dsId);
       } else {
         setShowPopover(true);
         setTimeout(() => {
-          const nextItemIndex = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
-          setFocusOptionIdx(options[nextItemIndex].dsId);
+          const prevItem = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
+          setFocusOptionIdx(options[prevItem].dsId);
+          scrollOptionIntoView(options[prevItem].dsId);
         });
       }
     } // =============================================================================
@@ -137,10 +142,10 @@ const useKeyboardNavigation = () => {
 
 
     if (e.key === 'Backspace' && inputValue.length <= 0 && !inline) {
-      if (multiple && !inputValue) {
-        if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
-      } else {
-        onChange(null);
+      const lastValue = listHelper.getLastValueSelected(selectedValues);
+
+      if (!inputValue && lastValue) {
+        onChange(listHelper.getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
       }
 
       if (onFilter) onFilter('');
@@ -159,7 +164,8 @@ const useKeyboardNavigation = () => {
     // if (e.key === 'Tab' && multiple) {
     // }
 
-  }, [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectOption, onSelectAll, selectableOptions.length, options, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectableOptions.length, options, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
   return {
     onInputKeyDown
   };

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

@@ -21,9 +21,8 @@ var _StyledNoOptionsSelec;
 const HeaderList = () => {
   const {
     props: {
-      onSelectAll,
-      onClearAll,
-      selectedValues
+      selectedValues,
+      onSelectAll
     },
     showSelectedOptions,
     selectAllCheckboxRef,
@@ -42,7 +41,7 @@ const HeaderList = () => {
   return /*#__PURE__*/_jsx__default["default"](styled.StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleOnMouseDown
-  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledSelectAllCheckbox, {}, void 0, onSelectAll && onClearAll && /*#__PURE__*/_jsx__default["default"](ControlledCheckbox.DSControlledCheckbox, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledSelectAllCheckbox, {}, void 0, onSelectAll && /*#__PURE__*/_jsx__default["default"](ControlledCheckbox.DSControlledCheckbox, {
     checked: checkboxStatus,
     "aria-controls": checkboxStatus === 'mixed' ? multiSelectedValues.map(item => item.dsId).join(' ') : '',
     name: "select-all-checkbox",

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

@@ -2,6 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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');
 var React = require('react');
 var listHelper = require('../../utils/listHelper.js');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
@@ -12,7 +16,6 @@ const useHeaderListHandlers = () => {
       selectedValues,
       options,
       onSelectAll,
-      onClearAll,
       innerRef
     },
     showSelectedOptions,
@@ -21,8 +24,8 @@ const useHeaderListHandlers = () => {
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const multiSelectedValues = selectedValues;
   const selectableOptions = listHelper.getSelectableOptions(options);
-  const checkboxStatus = React.useMemo(() => {
-    if ((selectableOptions === null || selectableOptions === void 0 ? void 0 : selectableOptions.length) === (multiSelectedValues === null || multiSelectedValues === void 0 ? void 0 : multiSelectedValues.length)) {
+  const getCheckboxStatus = React.useMemo(() => {
+    if (multiSelectedValues.length === selectableOptions.length) {
       return true;
     }
 
@@ -31,17 +34,23 @@ const useHeaderListHandlers = () => {
     }
 
     return 'mixed';
-  }, [multiSelectedValues, selectableOptions]);
+  }, [multiSelectedValues.length, selectableOptions.length]);
+  const [checkboxStatus, setCheckboxStatus] = React.useState(false);
+  React.useEffect(() => {
+    setCheckboxStatus(getCheckboxStatus);
+  }, [getCheckboxStatus, multiSelectedValues]);
   const handleOnMouseDown = React.useCallback(e => {
     e.preventDefault(); // this prevent the input control to lose focus
   }, []);
-  const handleSelectAllCheckboxChange = React.useCallback(() => {
+  const handleSelectAllCheckboxChange = React.useCallback(e => {
     if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {
-      onSelectAll();
-    } else if (onClearAll) {
-      onClearAll();
+      onSelectAll(options.filter(option => option.type === 'option' && !option.disabled), e);
+      setCheckboxStatus(true);
+    } else if (onSelectAll) {
+      onSelectAll([], e);
+      setCheckboxStatus(false);
     }
-  }, [checkboxStatus, onSelectAll, onClearAll]);
+  }, [checkboxStatus, onSelectAll, options]);
   const handleToggleSelectedValuesFilter = React.useCallback(e => {
     e.preventDefault();
     setShowSelectedOptions(!showSelectedOptions);

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

@@ -9,7 +9,6 @@ var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
 var HeaderList = require('../header-list/HeaderList.js');
 var useItemRenderer = require('./useItemRenderer.js');
-var useMenuListSetFocusOption = require('./useMenuListSetFocusOption.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -36,7 +35,6 @@ const MenuList = () => {
   const multiple = Array.isArray(selectedValues);
   const withHeader = !inline && multiple && options.length > 0 && inputValue === '';
   const ItemRenderer = useItemRenderer.useItemRenderer();
-  useMenuListSetFocusOption.useMenuListSetFocusOption();
   const preventLoseInputFocus = React.useCallback(e => {
     e.preventDefault();
   }, []);

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

@@ -56,28 +56,23 @@ const useItemRenderer = () => {
         setInputValue('');
         onFilter('');
       }
+    } else if (option.type === constants.MENU_OPTION_TYPES.OPTION) {
+      if (!option.disabled) {
+        if (onFilter) onFilter('');
+        setInputValue('');
 
-      return;
-    }
-
-    if (!option.disabled) {
-      var _innerRef$current;
+        if (!multiple) {
+          setShowPopover(false);
+        }
 
-      if (!multiple) {
-        setShowPopover(false);
+        onChange(listHelper.getSuggestedValueOnChange(option, selectedValues), option, e);
       }
-
-      if (onFilter) onFilter('');
-      setInputValue('');
-      onChange(option); // if we are focus in the header list we go back to the input
-
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
     } // prevent for loosing focus on input control
 
 
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, onChange, setShowPopover, multiple, innerRef]); // prevent blur from controls input
+  }, [onFilter, selectedValues, onChange, setShowPopover, multiple, innerRef]); // prevent blur from controls input
 
   const handleOnMouseDown = React.useCallback(e => {
     e.preventDefault();