@elliemae/ds-controlled-form 2.3.3-rc.0 → 2.4.0-rc.2

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

@@ -7,7 +7,7 @@ var React = require('react');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
 var styled = require('./styled.js');
-var useKeyboardNavigation = require('../../utils/hooks/useKeyboardNavigation.js');
+var useKeyboardNavigation = require('./useKeyboardNavigation.js');
 var useControlsInput = require('./useControlsInput.js');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -21,9 +21,11 @@ const ControlsInput = () => {
     props: {
       autoFocus,
       disabled,
-      innerRef
+      innerRef,
+      onFilter
     },
     focusOptionIdx,
+    inputValue,
     showPopover
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const {
@@ -46,7 +48,6 @@ const ControlsInput = () => {
   })), /*#__PURE__*/jsxRuntime.jsx(styled.StyledInput, {
     "data-testid": ComboboxDataTestids.ComboboxDataTestid.INPUT,
     autoFocus: autoFocus,
-    id: "combo-input",
     "aria-controls": "combo-listbox",
     "aria-activedescendant": focusOptionIdx,
     "aria-expanded": showPopover,
@@ -58,11 +59,13 @@ const ControlsInput = () => {
       width
     },
     ref: innerRef,
+    value: inputValue,
     type: "text",
     onKeyDown: onInputKeyDown,
     onChange: handleOnChange,
     onBlur: handleOnBlur,
-    onFocus: handleOnFocus
+    onFocus: handleOnFocus,
+    withoutCaret: !onFilter
   }));
 };
 

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

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var dsSystem = require('@elliemae/ds-system');
+
+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(_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"])), props => props.theme.colors.neutral[700], _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  & span {\n    line-height: 13px;\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  flex: 1;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n"])));
+
+exports.StyledInput = StyledInput;
+exports.StyledInputPlaceHolder = StyledInputPlaceHolder;
+exports.StyledInputWidthReference = StyledInputWidthReference;
+exports.StyledInputWrapper = StyledInputWrapper;

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

@@ -0,0 +1,57 @@
+'use strict';
+
+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');
+var listHelper = require('../../utils/listHelper.js');
+
+const useControlsInput = () => {
+  const {
+    props: {
+      selectedValues,
+      placeholder,
+      onFilter
+    },
+    setHasFocus,
+    inputValue,
+    setInputValue,
+    setShowSelectedOptions
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  const [width, setWidth] = React.useState(1); // use span reference to calculate the real width for the input
+
+  const spanReference = React.useRef(null);
+  const showPlaceholder = !inputValue && listHelper.isSelectedValueEmpty(selectedValues) ? placeholder : null;
+  const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
+  React.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.useMaskedOnChange();
+  const handleOnBlur = React.useCallback(() => {
+    setInputValue('');
+    if (onFilter) onFilter('');
+    setHasFocus(false);
+    setShowSelectedOptions(false);
+  }, [setInputValue, setShowSelectedOptions, onFilter, setHasFocus]);
+  const handleOnFocus = React.useCallback(() => {
+    setHasFocus(true);
+  }, [setHasFocus]);
+  return React.useMemo(() => ({
+    handleOnBlur,
+    handleOnChange,
+    handleOnFocus,
+    showPlaceholder,
+    spanReferenceText,
+    width,
+    spanReference
+  }), [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference]);
+};
+
+exports.useControlsInput = useControlsInput;

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

@@ -5,63 +5,74 @@ 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('../listHelper.js');
+var listHelper = require('../../utils/listHelper.js');
+var constants = require('../../constants.js');
 
 const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) && !opt.disabled;
 
 const useKeyboardNavigation = () => {
   const {
     props: {
-      inline,
-      onSelectAll,
       onCancel,
       onKeyDown,
       onChange,
       onCreate,
+      onFilter,
+      onSelectAll,
+      inline,
       options,
       selectedValues,
-      onFilter,
-      withoutPortal,
-      innerRef
+      withoutPortal
     },
-    setShowPopover,
+    inputValue,
     showPopover,
     focusOptionIdx,
-    setCurrentOption,
-    scrollOptionIntoView,
     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(() => {
-    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]);
   const onInputKeyDown = React.useCallback(e => {
-    const targetElement = e.target; // =============================================================================
+    // =============================================================================
     // CUSTOM KEYS
     // =============================================================================
+    if (onKeyDown && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === constants.MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);
+
+    if (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) {
+      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) === constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
+      onCreate(inputValue);
+      if (onFilter) onFilter('');
+      setInputValue('');
       return;
     } // =============================================================================
     // Enter and space on selection
@@ -72,10 +83,15 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if (!showPopover && !inline) {
-        setShowPopover(true);
-      } else {
-        selectOption();
+      if (focusOptionIdx !== '' && (showPopover || inline) && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === constants.MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
+        if (onFilter) onFilter('');
+        setInputValue('');
+
+        if (!multiple && !inline) {
+          setShowPopover(false);
+        }
+
+        onChange(listHelper.getSuggestedValueOnChange(currentItem, selectedValues), currentItem, e);
       }
     }
 
@@ -83,10 +99,10 @@ const useKeyboardNavigation = () => {
       setShowPopover(false);
     }
 
-    if (e.key === 'a' && e.ctrlKey && multiple) {
-      onSelectAll();
+    if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {
+      onSelectAll(options.filter(option => option.type === 'option' && !option.disabled), e);
     } // =============================================================================
-    // ARROWS UP AND DOWN
+    // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT
     // =============================================================================
 
 
@@ -94,60 +110,43 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if (showPopover || inline) {
+      if ((showPopover || inline) && selectableOptions.length) {
         const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable);
-        setCurrentOption(options[nextItemIndex].dsId);
+        setFocusOptionIdx(options[nextItemIndex].dsId);
         scrollOptionIntoView(options[nextItemIndex].dsId);
-      } else {
-        setShowPopover(true);
       }
     }
 
     if (e.key === 'ArrowUp') {
       e.preventDefault();
       e.stopPropagation();
+      if (!selectableOptions.length) return;
+      const prevItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
 
       if (showPopover || inline) {
-        const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
-        setCurrentOption(options[nextItemIndex].dsId);
-        scrollOptionIntoView(options[nextItemIndex].dsId);
+        setFocusOptionIdx(options[prevItemIndex].dsId);
+        scrollOptionIntoView(options[prevItemIndex].dsId);
       } else {
         setShowPopover(true);
         setTimeout(() => {
-          const nextItemIndex = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
-          setCurrentOption(options[nextItemIndex].dsId);
-          scrollOptionIntoView(options[nextItemIndex].dsId);
+          const prevItem = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
+          setFocusOptionIdx(options[prevItem].dsId);
+          scrollOptionIntoView(options[prevItem].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 (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
-      } else {
-        onChange(null);
+    if (e.key === 'Backspace' && inputValue.length <= 0 && !inline) {
+      const lastValue = listHelper.getLastValueSelected(selectedValues);
+
+      if (!inputValue && lastValue) {
+        onChange(listHelper.getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
       }
 
-      onFilter('');
+      if (onFilter) onFilter('');
     }
 
     if (e.key === 'Tab' && !inline && !withoutPortal) {
@@ -159,10 +158,12 @@ 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]);
+  }, // 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/controls-input/useMaskedOnChange.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ComboBoxCTX = require('../../ComboBoxCTX.js');
+
+const useMaskedOnChange = () => {
+  const {
+    props: {
+      useMask,
+      onFilter
+    },
+    setShowPopover,
+    setInputValue,
+    setShowSelectedOptions
+  } = React.useContext(ComboBoxCTX.ComboBoxContext); // default onchange when no mask provided
+
+  const handleOnChange = React.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 = React.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;
+};
+
+exports.useMaskedOnChange = useMaskedOnChange;

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

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledDropDownButton = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV2).withConfig({
-  componentId: "sc-14dzwqd-0"
+  componentId: "sc-178xelq-0"
 })(["&:focus::after{border:none;}& svg{fill:", ";}"], props => props.theme.colors.brand['700']);
 
 exports.StyledDropDownButton = StyledDropDownButton;

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

@@ -6,8 +6,8 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
-var lodash = require('lodash');
-var dsControlledForm = require('@elliemae/ds-controlled-form');
+var DSButton = require('@elliemae/ds-button');
+var ControlledCheckbox = require('../../../checkbox/ControlledCheckbox.js');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
 var styled = require('./styled.js');
 var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
@@ -18,60 +18,47 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 var _StyledNoOptionsSelec;
-
 const HeaderList = () => {
   const {
     props: {
-      onSelectAll,
-      onClearAll,
       selectedValues,
-      innerRef
+      onSelectAll
     },
     showSelectedOptions,
     selectAllCheckboxRef,
     toggleSelectionButtonRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
-  const isSelectAllSupplied = onSelectAll !== lodash.noop;
-  const isClearAllSupplied = onClearAll !== lodash.noop;
   const multiSelectedValues = selectedValues;
   const {
     handleKeyDown,
     handleOnMouseDown,
-    handleFilterSelectionBtnOnBlur,
-    handleToggle,
+    handleFilterSelectionBtnOnTab,
+    handleToggleSelectedValuesFilter,
+    handleCheckAllOnTab,
     checkboxStatus,
     handleSelectAllCheckboxChange
   } = useHeaderListHandlers.useHeaderListHandlers();
   return /*#__PURE__*/_jsx__default["default"](styled.StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleOnMouseDown
-  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledSelectAllCheckbox, {}, void 0, isSelectAllSupplied && isClearAllSupplied && /*#__PURE__*/_jsx__default["default"](dsControlledForm.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",
     "aria-label": "Select/Unselect All Items",
     id: "select-all-checkbox",
     onChange: handleSelectAllCheckboxChange,
-    "data-testid": ComboboxDataTestids.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": ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.SELECT_ALL_CHECKBOX,
+    onKeyDown: handleCheckAllOnTab,
     innerRef: selectAllCheckboxRef
   })), /*#__PURE__*/_jsx__default["default"](styled.StyledSelectedItems, {}, void 0, multiSelectedValues.length > 0 ? /*#__PURE__*/_jsx__default["default"](styled.StyledButtonSelection, {
-    onBlur: handleFilterSelectionBtnOnBlur,
-    buttonType: "text",
-    onClick: handleToggle,
-    labelText: !showSelectedOptions ? "SHOW SELECTED [".concat(multiSelectedValues.length, "]") : 'SHOW ALL',
-    size: "s",
-    "data-testid": ComboboxDataTestids.ComboboxDataTestid.SHOW_SELECTED_OPTIONS_TOGGLE,
+    onKeyDown: handleFilterSelectionBtnOnTab,
+    buttonType: DSButton.BUTTON_TYPES.TEXT,
+    onClick: handleToggleSelectedValuesFilter,
+    size: DSButton.BUTTON_SIZES.S,
+    "data-testid": ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
     innerRef: toggleSelectionButtonRef
-  }) : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx__default["default"](styled.StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))));
+  }, void 0, !showSelectedOptions ? "SHOW SELECTED [".concat(multiSelectedValues.length, "]") : 'SHOW ALL') : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx__default["default"](styled.StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))));
 };
 
 exports.HeaderList = HeaderList;

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

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var dsSystem = require('@elliemae/ds-system');
+var DSButton = require('@elliemae/ds-button');
+
+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;
+const StyledHeaderListWrapper = dsSystem.styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\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 = dsSystem.styled(DSButton.DSButtonV2)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\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 = dsSystem.styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  align-items: center;\n"])));
+const StyledNoOptionsSelected = dsSystem.styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  padding: 0 ", ";\n"])), props => props.theme.space.xxs);
+const StyledSelectAllCheckbox = dsSystem.styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  align-items: center;\n"])));
+
+exports.StyledButtonSelection = StyledButtonSelection;
+exports.StyledHeaderListWrapper = StyledHeaderListWrapper;
+exports.StyledNoOptionsSelected = StyledNoOptionsSelected;
+exports.StyledSelectAllCheckbox = StyledSelectAllCheckbox;
+exports.StyledSelectedItems = StyledSelectedItems;

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

@@ -0,0 +1,98 @@
+'use strict';
+
+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');
+
+const useHeaderListHandlers = () => {
+  const {
+    props: {
+      selectedValues,
+      options,
+      onSelectAll,
+      innerRef
+    },
+    showSelectedOptions,
+    setShowSelectedOptions,
+    setShowPopover
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  const multiSelectedValues = selectedValues;
+  const selectableOptions = listHelper.getSelectableOptions(options);
+  const getCheckboxStatus = React.useMemo(() => {
+    if (multiSelectedValues.length === selectableOptions.length) {
+      return true;
+    }
+
+    if ((multiSelectedValues === null || multiSelectedValues === void 0 ? void 0 : multiSelectedValues.length) === 0) {
+      return false;
+    }
+
+    return 'mixed';
+  }, [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(e => {
+    if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {
+      onSelectAll(options.filter(option => option.type === 'option' && !option.disabled), e);
+      setCheckboxStatus(true);
+    } else if (onSelectAll) {
+      onSelectAll([], e);
+      setCheckboxStatus(false);
+    }
+  }, [checkboxStatus, onSelectAll, options]);
+  const handleToggleSelectedValuesFilter = React.useCallback(e => {
+    e.preventDefault();
+    setShowSelectedOptions(!showSelectedOptions);
+  }, [setShowSelectedOptions, showSelectedOptions]); // when pressing escape on each header list button we close the menu
+
+  const handleKeyDown = React.useCallback(e => {
+    if (e.key === 'Escape') {
+      setShowPopover(false);
+    }
+  }, [setShowPopover]); // when hitting tab on selected values button filter we target the input again
+
+  const handleFilterSelectionBtnOnTab = React.useCallback(e => {
+    if (e.key === 'Tab' && !e.shiftKey) {
+      var _innerRef$current;
+
+      e.preventDefault();
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+    }
+  }, [innerRef]);
+  const handleCheckAllOnTab = React.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]);
+  React.useEffect(() => {
+    // toggle off selected values filter when removing all of them
+    if (multiSelectedValues.length === 0) {
+      setShowSelectedOptions(false);
+    }
+  }, [multiSelectedValues, setShowSelectedOptions]);
+  return React.useMemo(() => ({
+    handleKeyDown,
+    handleToggleSelectedValuesFilter,
+    handleFilterSelectionBtnOnTab,
+    handleOnMouseDown,
+    handleCheckAllOnTab,
+    handleSelectAllCheckboxChange,
+    checkboxStatus
+  }), [handleKeyDown, handleFilterSelectionBtnOnTab, handleToggleSelectedValuesFilter, handleOnMouseDown, handleCheckAllOnTab, handleSelectAllCheckboxChange, checkboxStatus]);
+};
+
+exports.useHeaderListHandlers = useHeaderListHandlers;