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

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

@@ -0,0 +1,49 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { css, styled } from '@elliemae/ds-system';
+import { Grid } from '@elliemae/ds-grid';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+const normalBorder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), _ref => {
+  let {
+    hasError,
+    theme
+  } = _ref;
+  return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
+});
+const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 2px solid ", ";\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.brand[700];
+});
+const afterStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 2px;\n  pointer-events: none;\n  z-index: 7;\n"])));
+const StyledControlsWrapper = styled(Grid)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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  &::after {\n    ", "\n    ", "\n  }\n\n  &:focus-within {\n    &::after {\n      ", "\n      ", "\n    }\n  }\n"])), _ref3 => {
+  let {
+    disabled,
+    theme
+  } = _ref3;
+  return disabled ? theme.colors.neutral['080'] : '#ffffff';
+}, _ref4 => {
+  let {
+    minWidth,
+    inline
+  } = _ref4;
+  return inline || !minWidth ? '' : "".concat(minWidth, "px");
+}, _ref5 => {
+  let {
+    inline
+  } = _ref5;
+  return inline ? '10px 16px' : 'none';
+}, afterStyle, normalBorder, afterStyle, focusBorder);
+const StyledSelection = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 13px;\n  margin-right: 3px;\n  line-height: 13px;\n  display: flex;\n"])));
+const StyledHeaderActionsWrapper = styled(Grid)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n"])));
+const StyleDropdownIndicator = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+const StyleHeaderActionsSeparator = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  align-self: stretch;\n  margin: 4px 0px;\n  width: 1px;\n  background-color: ", ";\n"])), _ref6 => {
+  let {
+    theme,
+    disabled
+  } = _ref6;
+  return disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'];
+});
+
+export { StyleDropdownIndicator, StyleHeaderActionsSeparator, StyledControlsWrapper, StyledHeaderActionsWrapper, StyledSelection };

package/esm/{controlled-combobox → combobox}/parts/controls/useOnPillsNavigation.js

@@ -7,26 +7,29 @@ const useOnPillsNavigation = () => {
     props: {
       innerRef
     },
+    inputValue,
+    hasFocus,
     setShowPopover,
-    pillGroupRef
-  } = useContext(ComboBoxContext);
+    selectedOptionsRef
+  } = useContext(ComboBoxContext); // todo: constant must be defined on pills component
+
   const REMOVABLE_PILL_SELECTOR = '.ds-pill-wrapper-removable button';
   const onKeyDownPills = useCallback(e => {
-    var _innerRef$current;
-
-    if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') && ((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value) === '') {
+    if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') && inputValue === '') {
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        innerRef.current.focus();
+        var _innerRef$current;
+
+        (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
         setShowPopover(true);
         return;
       }
 
       if (e.key === 'ArrowLeft') {
-        var _pillGroupRef$current;
+        var _selectedOptionsRef$c;
 
-        const removablePills = (_pillGroupRef$current = pillGroupRef.current) === null || _pillGroupRef$current === void 0 ? void 0 : _pillGroupRef$current.querySelectorAll(REMOVABLE_PILL_SELECTOR);
+        const removablePills = (_selectedOptionsRef$c = selectedOptionsRef.current) === null || _selectedOptionsRef$c === void 0 ? void 0 : _selectedOptionsRef$c.querySelectorAll(REMOVABLE_PILL_SELECTOR);
 
-        if (document.activeElement === innerRef.current && removablePills) {
+        if (hasFocus && removablePills) {
           var _removablePills;
 
           (_removablePills = removablePills[removablePills.length - 1]) === null || _removablePills === void 0 ? void 0 : _removablePills.focus();
@@ -34,11 +37,13 @@ const useOnPillsNavigation = () => {
       }
 
       if (e.key === 'ArrowRight') {
+        var _innerRef$current2;
+
         e.preventDefault();
-        innerRef.current.focus();
+        (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
       }
     }
-  }, [innerRef, pillGroupRef, setShowPopover]);
+  }, [inputValue, hasFocus, innerRef, selectedOptionsRef, setShowPopover]);
   return {
     onKeyDownPills
   };

package/esm/{controlled-combobox → combobox}/parts/controls-input/ControlsInput.js

@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
 import { StyledInputWrapper, StyledInputWidthReference, StyledInputPlaceHolder, StyledInput } from './styled.js';
-import { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';
+import { useKeyboardNavigation } from './useKeyboardNavigation.js';
 import { useControlsInput } from './useControlsInput.js';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
 import { jsx } from 'react/jsx-runtime';
@@ -13,9 +13,11 @@ const ControlsInput = () => {
     props: {
       autoFocus,
       disabled,
-      innerRef
+      innerRef,
+      onFilter
     },
     focusOptionIdx,
+    inputValue,
     showPopover
   } = useContext(ComboBoxContext);
   const {
@@ -38,7 +40,6 @@ const ControlsInput = () => {
   })), /*#__PURE__*/jsx(StyledInput, {
     "data-testid": ComboboxDataTestid.INPUT,
     autoFocus: autoFocus,
-    id: "combo-input",
     "aria-controls": "combo-listbox",
     "aria-activedescendant": focusOptionIdx,
     "aria-expanded": showPopover,
@@ -50,11 +51,13 @@ const ControlsInput = () => {
       width
     },
     ref: innerRef,
+    value: inputValue,
     type: "text",
     onKeyDown: onInputKeyDown,
     onChange: handleOnChange,
     onBlur: handleOnBlur,
-    onFocus: handleOnFocus
+    onFocus: handleOnFocus,
+    withoutCaret: !onFilter
   }));
 };
 

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

@@ -0,0 +1,15 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { styled } from '@elliemae/ds-system';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+const StyledInput = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), props => props.theme.colors.neutral[700], _ref => {
+  let {
+    withoutCaret
+  } = _ref;
+  return withoutCaret && 'caret-color: transparent;';
+});
+const StyledInputPlaceHolder = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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  & span {\n    line-height: 13px;\n  }\n"])), props => props.theme.colors.neutral[500]);
+const StyledInputWidthReference = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n"])));
+const StyledInputWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  flex: 1;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n"])));
+
+export { StyledInput, StyledInputPlaceHolder, StyledInputWidthReference, StyledInputWrapper };

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

@@ -0,0 +1,55 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.string.replace.js';
+import { useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useMaskedOnChange } from './useMaskedOnChange.js';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { isSelectedValueEmpty } from '../../utils/listHelper.js';
+
+const useControlsInput = () => {
+  const {
+    props: {
+      selectedValues,
+      placeholder,
+      onFilter
+    },
+    setHasFocus,
+    setFocusOptionIdx,
+    inputValue,
+    setInputValue,
+    setShowSelectedOptions
+  } = useContext(ComboBoxContext);
+  const [width, setWidth] = useState(1); // use span reference to calculate the real width for the input
+
+  const spanReference = useRef(null);
+  const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;
+  const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
+  useEffect(() => {
+    var _spanReference$curren, _spanReference$curren2;
+
+    setWidth((_spanReference$curren = spanReference.current) !== null && _spanReference$curren !== void 0 && _spanReference$curren.offsetWidth ? ((_spanReference$curren2 = spanReference.current) === null || _spanReference$curren2 === void 0 ? void 0 : _spanReference$curren2.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();
+  const handleOnBlur = useCallback(() => {
+    setInputValue('');
+    if (onFilter) onFilter('');
+    setFocusOptionIdx('');
+    setHasFocus(false);
+    setShowSelectedOptions(false);
+  }, [setInputValue, setShowSelectedOptions, onFilter, setFocusOptionIdx, setHasFocus]);
+  const handleOnFocus = useCallback(() => {
+    setHasFocus(true);
+  }, [setHasFocus]);
+  return useMemo(() => ({
+    handleOnBlur,
+    handleOnChange,
+    handleOnFocus,
+    showPlaceholder,
+    spanReferenceText,
+    width,
+    spanReference
+  }), [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference]);
+};
+
+export { useControlsInput };

package/esm/{controlled-combobox/utils/hooks → combobox/parts/controls-input}/useKeyboardNavigation.js

@@ -3,7 +3,8 @@ import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.find.js';
 import { useContext, useCallback } from 'react';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { findInCircularList } from '../listHelper.js';
+import { getOptions, findInCircularList } from '../../utils/listHelper.js';
+import { INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';
 
 const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) && !opt.disabled;
 
@@ -19,45 +20,62 @@ const useKeyboardNavigation = () => {
       options,
       selectedValues,
       onFilter,
-      withoutPortal,
-      innerRef
+      withoutPortal
     },
     setShowPopover,
+    setInputValue,
+    inputValue,
     showPopover,
     focusOptionIdx,
-    setCurrentOption,
-    scrollOptionIntoView,
+    setFocusOptionIdx,
     selectAllCheckboxRef,
     toggleSelectionButtonRef
   } = useContext(ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
+  const selectableOptions = getOptions(options);
   const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
   const currentItem = options.find(item => item.dsId === focusOptionIdx);
   const selectOption = useCallback(() => {
-    if (multiple) {
-      if (innerRef.current) onFilter(innerRef.current.value);
-    } else {
-      onFilter('');
-      if (innerRef.current) innerRef.current.value = '';
-    }
-
     const selectedOption = options.find(item => item.dsId === focusOptionIdx);
-    onChange(selectedOption);
-    if (!selectedOption.disabled && !multiple) setShowPopover(false);
-  }, [multiple, options, focusOptionIdx, setShowPopover, onFilter, innerRef, onChange]);
+
+    if (!selectedOption.disabled) {
+      if (onFilter) onFilter('');
+      setInputValue('');
+      onChange(selectedOption);
+      if (!multiple) setShowPopover(false);
+    }
+  }, [multiple, options, setInputValue, focusOptionIdx, setShowPopover, onFilter, onChange]);
   const onInputKeyDown = useCallback(e => {
-    const targetElement = e.target; // =============================================================================
+    // =============================================================================
     // CUSTOM KEYS
     // =============================================================================
+    if (onKeyDown) onKeyDown(e, currentItem);
+
+    if (!['Escape', 'Tab', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+      setShowPopover(true);
+    } // =============================================================================
+    // ESCAPE
+    // =============================================================================
 
-    onKeyDown(e, currentItem); // =============================================================================
+
+    if (e.key === 'Escape') {
+      if (onCancel) onCancel();
+
+      if (inputValue) {
+        if (onFilter) onFilter('');
+        setInputValue('');
+      }
+
+      if (!inline) setShowPopover(false);
+    } // =============================================================================
     // ENTER KEY TO CREATE ELEMENTS
     // =============================================================================
 
-    if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === 'creatable') {
-      onCreate(targetElement.value);
-      onFilter('');
-      if (innerRef.current) innerRef.current.value = '';
+
+    if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
+      onCreate(inputValue);
+      if (onFilter) onFilter('');
+      setInputValue('');
       return;
     } // =============================================================================
     // Enter and space on selection
@@ -68,9 +86,7 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if (!showPopover && !inline) {
-        setShowPopover(true);
-      } else {
+      if (focusOptionIdx !== '' && showPopover) {
         selectOption();
       }
     }
@@ -80,9 +96,9 @@ const useKeyboardNavigation = () => {
     }
 
     if (e.key === 'a' && e.ctrlKey && multiple) {
-      onSelectAll();
+      if (onSelectAll) onSelectAll();
     } // =============================================================================
-    // ARROWS UP AND DOWN
+    // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT
     // =============================================================================
 
 
@@ -90,60 +106,40 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if (showPopover || inline) {
+      if ((showPopover || inline) && selectableOptions.length) {
         const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
-        setCurrentOption(options[nextItemIndex].dsId);
-        scrollOptionIntoView(options[nextItemIndex].dsId);
-      } else {
-        setShowPopover(true);
+        setFocusOptionIdx(options[nextItemIndex].dsId);
       }
     }
 
     if (e.key === 'ArrowUp') {
       e.preventDefault();
       e.stopPropagation();
+      if (!selectableOptions.length) return;
+      const prevItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
 
       if (showPopover || inline) {
-        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
-        setCurrentOption(options[nextItemIndex].dsId);
-        scrollOptionIntoView(options[nextItemIndex].dsId);
+        setFocusOptionIdx(options[prevItemIndex].dsId);
       } else {
         setShowPopover(true);
         setTimeout(() => {
           const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
-          setCurrentOption(options[nextItemIndex].dsId);
-          scrollOptionIntoView(options[nextItemIndex].dsId);
+          setFocusOptionIdx(options[nextItemIndex].dsId);
         });
       }
     } // =============================================================================
-    // ESCAPE
-    // =============================================================================
-
-
-    if (e.key === 'Escape') {
-      var _innerRef$current;
-
-      if (onCancel) onCancel();
-
-      if (innerRef.current && ((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value) !== '') {
-        onFilter('');
-        innerRef.current.value = '';
-      }
-
-      if (!inline) setShowPopover(false);
-    } // =============================================================================
     // BACKSPACE
     // =============================================================================
 
 
-    if (e.key === 'Backspace' && targetElement.value.length <= 0 && !inline) {
-      if (multiple && !targetElement.value) {
+    if (e.key === 'Backspace' && inputValue.length <= 0 && !inline) {
+      if (multiple && !inputValue) {
         if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
       } else {
         onChange(null);
       }
 
-      onFilter('');
+      if (onFilter) onFilter('');
     }
 
     if (e.key === 'Tab' && !inline && !withoutPortal) {
@@ -155,10 +151,11 @@ const useKeyboardNavigation = () => {
         e.preventDefault();
         element.focus();
       }
-    } // if (e.key === 'Tab' && multiple) {
+    } // waiting for validation from ux
+    // if (e.key === 'Tab' && multiple) {
     // }
 
-  }, [currentItemIndex, options, currentItem, innerRef, multiple, showPopover, selectedValues, inline, scrollOptionIntoView, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, selectOption, onCancel, selectAllCheckboxRef, toggleSelectionButtonRef, withoutPortal]);
+  }, [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectOption, onSelectAll, selectableOptions.length, options, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
   return {
     onInputKeyDown
   };

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

@@ -0,0 +1,37 @@
+import { useContext, useCallback } from 'react';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+
+const useMaskedOnChange = () => {
+  const {
+    props: {
+      useMask,
+      onFilter
+    },
+    setShowPopover,
+    setInputValue,
+    setShowSelectedOptions
+  } = useContext(ComboBoxContext); // default onchange when no mask provided
+
+  const handleOnChange = useCallback(e => {
+    setShowSelectedOptions(false);
+    setShowPopover(true);
+
+    if (onFilter) {
+      onFilter(e.currentTarget.value);
+      setInputValue(e.currentTarget.value);
+    }
+  }, [onFilter, setInputValue, setShowPopover, setShowSelectedOptions]); // onchange used when mask is provided
+
+  const handleOnChangeMask = useCallback((_, mask) => {
+    setShowSelectedOptions(false);
+    setShowPopover(true);
+    if (mask && onFilter) onFilter(mask);
+  }, [onFilter, setShowPopover, setShowSelectedOptions]);
+  const onChangeMask = useMask({
+    valueSetter: setInputValue,
+    onChange: handleOnChangeMask
+  });
+  return (onChangeMask === null || onChangeMask === void 0 ? void 0 : onChangeMask.onChange) || handleOnChange;
+};
+
+export { useMaskedOnChange };

package/esm/{controlled-combobox → combobox}/parts/dropdown-indicator/styled.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
 const StyledDropDownButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-14dzwqd-0"
+  componentId: "sc-178xelq-0"
 })(["&:focus::after{border:none;}& svg{fill:", ";}"], props => props.theme.colors.brand['700']);
 
 export { StyledDropDownButton };

package/esm/{controlled-combobox → combobox}/parts/header-list/HeaderList.js

@@ -2,68 +2,56 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import { useContext } from 'react';
-import { noop } from 'lodash';
-import { DSControlledCheckbox } from '@elliemae/ds-controlled-form';
+import { BUTTON_TYPES, BUTTON_SIZES } from '@elliemae/ds-button';
+import { DSControlledCheckbox } from '../../../checkbox/ControlledCheckbox.js';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
 import { StyledHeaderListWrapper, StyledSelectAllCheckbox, StyledSelectedItems, StyledButtonSelection, StyledNoOptionsSelected } from './styled.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
 import { useHeaderListHandlers } from './useHeaderListHandlers.js';
 
 var _StyledNoOptionsSelec;
-
 const HeaderList = () => {
   const {
     props: {
       onSelectAll,
       onClearAll,
-      selectedValues,
-      innerRef
+      selectedValues
     },
     showSelectedOptions,
     selectAllCheckboxRef,
     toggleSelectionButtonRef
   } = useContext(ComboBoxContext);
-  const isSelectAllSupplied = onSelectAll !== noop;
-  const isClearAllSupplied = onClearAll !== noop;
   const multiSelectedValues = selectedValues;
   const {
     handleKeyDown,
     handleOnMouseDown,
-    handleFilterSelectionBtnOnBlur,
-    handleToggle,
+    handleFilterSelectionBtnOnTab,
+    handleToggleSelectedValuesFilter,
+    handleCheckAllOnTab,
     checkboxStatus,
     handleSelectAllCheckboxChange
   } = useHeaderListHandlers();
   return /*#__PURE__*/_jsx(StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleOnMouseDown
-  }, void 0, /*#__PURE__*/_jsx(StyledSelectAllCheckbox, {}, void 0, isSelectAllSupplied && isClearAllSupplied && /*#__PURE__*/_jsx(DSControlledCheckbox, {
+  }, void 0, /*#__PURE__*/_jsx(StyledSelectAllCheckbox, {}, void 0, onSelectAll && onClearAll && /*#__PURE__*/_jsx(DSControlledCheckbox, {
     checked: checkboxStatus,
     "aria-controls": checkboxStatus === 'mixed' ? multiSelectedValues.map(item => item.dsId).join(' ') : '',
     name: "select-all-checkbox",
     "aria-label": "Select/Unselect All Items",
     id: "select-all-checkbox",
     onChange: handleSelectAllCheckboxChange,
-    "data-testid": ComboboxDataTestid.SELECT_ALL_CHECKBOX,
-    onBlur: () => {
-      if (multiSelectedValues.length === 0) {
-        setTimeout(() => {
-          var _innerRef$current;
-
-          return (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
-        });
-      }
-    },
+    "data-testid": ComboboxDataTestid.MULTISELECT.SELECT_ALL_CHECKBOX,
+    onKeyDown: handleCheckAllOnTab,
     innerRef: selectAllCheckboxRef
   })), /*#__PURE__*/_jsx(StyledSelectedItems, {}, void 0, multiSelectedValues.length > 0 ? /*#__PURE__*/_jsx(StyledButtonSelection, {
-    onBlur: handleFilterSelectionBtnOnBlur,
-    buttonType: "text",
-    onClick: handleToggle,
-    labelText: !showSelectedOptions ? "SHOW SELECTED [".concat(multiSelectedValues.length, "]") : 'SHOW ALL',
-    size: "s",
-    "data-testid": ComboboxDataTestid.SHOW_SELECTED_OPTIONS_TOGGLE,
+    onKeyDown: handleFilterSelectionBtnOnTab,
+    buttonType: BUTTON_TYPES.TEXT,
+    onClick: handleToggleSelectedValuesFilter,
+    size: BUTTON_SIZES.S,
+    "data-testid": ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
     innerRef: toggleSelectionButtonRef
-  }) : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx(StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))));
+  }, void 0, !showSelectedOptions ? "SHOW SELECTED [".concat(multiSelectedValues.length, "]") : 'SHOW ALL') : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx(StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))));
 };
 
 export { HeaderList };

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

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { styled } from '@elliemae/ds-system';
+import { DSButtonV2 } from '@elliemae/ds-button';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+const StyledHeaderListWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: fixed;\n  top: 0;\n  z-index: 10;\n  justify-content: space-between;\n  padding: 0px 12px 0px 16px;\n  width: 100%;\n  height: 28px;\n  background-color: #fff;\n  box-shadow: 0 4px 2px -4px ", ";\n  overflow-x: hidden;\n\n  & button {\n    font-size: 13px;\n  }\n"])), props => props.theme.colors.neutral[700]);
+const StyledButtonSelection = styled(DSButtonV2)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 0px;\n  padding: 0 ", ";\n  margin: 0;\n  align-items: center;\n  transition: unset;\n  &:hover:not([disabled]) {\n    background-color: transparent;\n    color: ", ";\n  }\n"])), props => props.theme.space.xxs, props => props.theme.colors.brand['700']);
+const StyledSelectedItems = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+const StyledNoOptionsSelected = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n"])), props => props.theme.space.xxs);
+const StyledSelectAllCheckbox = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+
+export { StyledButtonSelection, StyledHeaderListWrapper, StyledNoOptionsSelected, StyledSelectAllCheckbox, StyledSelectedItems };

package/esm/{controlled-combobox → combobox}/parts/header-list/useHeaderListHandlers.js

@@ -5,7 +5,6 @@ import { ComboBoxContext } from '../../ComboBoxCTX.js';
 const useHeaderListHandlers = () => {
   const {
     props: {
-      onFilter,
       selectedValues,
       options,
       onSelectAll,
@@ -30,44 +29,57 @@ const useHeaderListHandlers = () => {
     return 'mixed';
   }, [multiSelectedValues, selectableOptions]);
   const handleOnMouseDown = useCallback(e => {
-    e.preventDefault();
+    e.preventDefault(); // this prevent the input control to lose focus
   }, []);
   const handleSelectAllCheckboxChange = useCallback(() => {
-    if (!checkboxStatus || checkboxStatus === 'mixed') {
+    if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {
       onSelectAll();
-    } else {
+    } else if (onClearAll) {
       onClearAll();
     }
   }, [checkboxStatus, onSelectAll, onClearAll]);
-  const handleToggle = useCallback(() => {
-    if (innerRef.current) innerRef.current.value = '';
-    onFilter('');
+  const handleToggleSelectedValuesFilter = useCallback(e => {
+    e.preventDefault();
     setShowSelectedOptions(!showSelectedOptions);
-  }, [setShowSelectedOptions, innerRef, onFilter, showSelectedOptions]);
+  }, [setShowSelectedOptions, showSelectedOptions]); // when pressing escape on each header list button we close the menu
+
   const handleKeyDown = useCallback(e => {
     if (e.key === 'Escape') {
       setShowPopover(false);
     }
-  }, [setShowPopover]);
-  const handleFilterSelectionBtnOnBlur = useCallback(() => {
-    var _innerRef$current;
+  }, [setShowPopover]); // 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;
 
-    if (showSelectedOptions) setShowSelectedOptions(false);
-    (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
-  }, [setShowSelectedOptions, showSelectedOptions, innerRef]);
+      e.preventDefault();
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+    }
+  }, [innerRef]);
+  const handleCheckAllOnTab = useCallback(e => {
+    if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {
+      var _innerRef$current2;
+
+      e.preventDefault();
+      (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
+    }
+  }, [innerRef, multiSelectedValues]);
   useEffect(() => {
+    // toggle off selected values filter when removing all of them
     if (multiSelectedValues.length === 0) {
       setShowSelectedOptions(false);
     }
   }, [multiSelectedValues, setShowSelectedOptions]);
   return useMemo(() => ({
     handleKeyDown,
-    handleToggle,
-    handleFilterSelectionBtnOnBlur,
+    handleToggleSelectedValuesFilter,
+    handleFilterSelectionBtnOnTab,
     handleOnMouseDown,
+    handleCheckAllOnTab,
     handleSelectAllCheckboxChange,
     checkboxStatus
-  }), [handleKeyDown, handleFilterSelectionBtnOnBlur, handleToggle, handleOnMouseDown, checkboxStatus, handleSelectAllCheckboxChange]);
+  }), [handleKeyDown, handleFilterSelectionBtnOnTab, handleToggleSelectedValuesFilter, handleOnMouseDown, handleCheckAllOnTab, handleSelectAllCheckboxChange, checkboxStatus]);
 };
 
 export { useHeaderListHandlers };