@elliemae/ds-controlled-form 2.4.0 → 2.4.1-rc.11

package/cjs/autocomplete/utils/listHelper.js

@@ -5,26 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 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');
-require('core-js/modules/esnext.async-iterator.some.js');
-require('core-js/modules/esnext.iterator.some.js');
 
 const getSelectableOptions = options => options ? options.filter(option => option.type === 'option' && !option.disabled) : [];
 const getOptions = options => options ? options.filter(option => option.type === 'option') : [];
 const isSelectedValueEmpty = value => Array.isArray(value) ? value.length === 0 : !value;
 const isSelectedValueMultiple = value => Array.isArray(value);
-const isSelected = (value, activeOption) => {
-  if (isSelectedValueMultiple(value)) {
-    const multiValue = value;
-    return multiValue.some(item => (item === null || item === void 0 ? void 0 : item.value) === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value));
-  }
-
-  if (typeof value === 'string') {
-    return false;
-  }
-
-  const singleValue = value;
-  return (singleValue === null || singleValue === void 0 ? void 0 : singleValue.value) === activeOption.value;
-};
 const findInCircularList = function (list, from, criteria) {
   let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
 
@@ -34,10 +19,17 @@ const findInCircularList = function (list, from, criteria) {
 
   return from; // return same item
 };
+const getFirstOption = options => {
+  for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type)) {
+    return options[i].dsId;
+  }
+
+  return '';
+};
 
 exports.findInCircularList = findInCircularList;
+exports.getFirstOption = getFirstOption;
 exports.getOptions = getOptions;
 exports.getSelectableOptions = getSelectableOptions;
-exports.isSelected = isSelected;
 exports.isSelectedValueEmpty = isSelectedValueEmpty;
 exports.isSelectedValueMultiple = isSelectedValueMultiple;

package/cjs/checkbox/ControlledCheckbox.js

@@ -40,6 +40,7 @@ const DSControlledCheckbox = props => {
     label,
     hasError,
     innerRef,
+    wrapLabel,
     tabIndex,
     ariaLabel: legacyAriaLabel,
     ariaControls: legacyAriaControls,
@@ -92,7 +93,7 @@ const DSControlledCheckbox = props => {
     readOnly: readOnly,
     checked: checked,
     "data-testid": "ds-checkbox-label"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+  }, void 0, wrapLabel ? label : /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
     value: label
   })));
 };

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

@@ -18,12 +18,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const defaultProps = {
+  wrapLabel: false,
   hasError: false,
   tabIndex: undefined,
   checked: false
 };
 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.'),
+  wrapLabel: dsPropsHelpers.PropTypes.bool.description('Whether to wrap or truncate label'),
   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.')
 });

package/cjs/combobox/ComboBox.js

@@ -27,4 +27,5 @@ const DSComboBoxWithSchema = dsPropsHelpers.describe(DSComboBox);
 DSComboBoxWithSchema.propTypes = reactDescPropTypes.ComboboxPropTypes;
 
 exports.DSComboBox = DSComboBox;
+exports.DSComboBoxV3 = DSComboBox;
 exports.DSComboBoxWithSchema = DSComboBoxWithSchema;

package/cjs/combobox/config/useComboBox.js

@@ -46,7 +46,7 @@ const useComboBox = props => {
   const {
     selectedValues
   } = propsWithDefaults; // ---------------------------------------------------------------------------
-  // Menu Options with/out selected filter and creatable functionality
+  // Options with creatable option + filtered by selected
   // ---------------------------------------------------------------------------
 
   const correctOptions = useCorrectOptions.useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions); // ===========================================================================
@@ -86,9 +86,15 @@ const useComboBox = props => {
 
     if (!hasFocus) setFocusOptionIdx(''); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showPopover, hasFocus, correctOptions, selectedValues, inputValue]);
+  React.useEffect(() => {
+    if (!showPopover) {
+      setFocusOptionIdx('');
+      setShowSelectedOptions(false);
+    }
+  }, [showPopover]);
   const ctx = React.useMemo(() => ({
     props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
-      options: correctOptions
+      filteredOptions: correctOptions
     }),
     virtualListHelpers,
     showPopover,

package/cjs/combobox/config/useCorrectOptions.js

@@ -2,69 +2,41 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-require('core-js/modules/esnext.async-iterator.find.js');
-require('core-js/modules/esnext.iterator.find.js');
 require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var uid = require('uid');
 var constants = require('../constants.js');
+var listHelper = require('../utils/listHelper.js');
 
 const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
   const {
-    options,
+    filteredOptions,
+    allOptions,
     selectedValues,
     onCreate
   } = propsWithDefaults;
-  const selectedValuesWithSections = React.useCallback(() => {
-    var _items2;
+  return React.useMemo(() => {
+    // if filteredOptions is not passed we copy allOptions into the prop as default
+    // this is useful when the user wants a combo with out filtering and only pass allOptions as its required
+    if (!filteredOptions) return [...allOptions]; // when show selected toggle is on we return the selected value only as filteredOptions prop
 
-    const multiSelectedValue = selectedValues;
-    const items = [];
-    options.forEach(option => {
-      const isSelectedValue = multiSelectedValue.find(item => item.dsId === option.dsId);
-
-      if (isSelectedValue) {
-        items.push(option);
-      }
-
-      if (option.type === constants.MENU_OPTION_TYPES.SECTION) {
-        var _items;
-
-        if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === constants.MENU_OPTION_TYPES.SECTION) {
-          items[items.length - 1] = option;
-        } else {
-          items.push(option);
-        }
-      }
-    });
-
-    if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === constants.MENU_OPTION_TYPES.SECTION) {
-      items.pop();
-    }
-
-    return items;
-  }, [options, selectedValues]);
-  const correctOptions = React.useMemo(() => {
     if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {
-      return selectedValuesWithSections();
-    }
+      return listHelper.selectedValuesWithSections(filteredOptions, selectedValues);
+    } // whether oncreate is passed we add as first option the creatable action based on input value string
+
 
-    if (onCreate && inputValue && options.findIndex(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
+    if (onCreate && inputValue && filteredOptions.findIndex(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
       const creatableUuid = uid.uid();
       const creatableItem = {
         dsId: "creatable-".concat(creatableUuid),
         label: inputValue,
         type: 'creatable'
       };
-      return [creatableItem, ...options];
+      return [creatableItem, ...filteredOptions];
     }
 
-    return options;
-  }, [options, onCreate, inputValue, selectedValuesWithSections, selectedValues, showSelectedOptions]);
-  return correctOptions;
+    return filteredOptions;
+  }, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);
 };
 
 exports.useCorrectOptions = useCorrectOptions;

package/cjs/combobox/index.js

@@ -7,4 +7,5 @@ var ComboBox = require('./ComboBox.js');
 
 
 exports.DSComboBox = ComboBox.DSComboBox;
+exports.DSComboBoxV3 = ComboBox.DSComboBox;
 exports.DSComboBoxWithSchema = ComboBox.DSComboBoxWithSchema;

package/cjs/combobox/parts/A11yFocusedOption.js

@@ -19,13 +19,13 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 const A11yFocusedOption = () => {
   const {
     props: {
-      options
+      filteredOptions
     },
     focusOptionIdx,
     showPopover
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
-  const selectabledOptions = listHelper.getSelectableOptions(options);
-  const focusOption = options.find(option => !sharedTypes.isSeparator(option) && option.dsId === focusOptionIdx);
+  const selectabledOptions = listHelper.getSelectableOptions(filteredOptions);
+  const focusOption = filteredOptions.find(option => !sharedTypes.isSeparator(option) && option.dsId === focusOptionIdx);
   const focusSelectableOptionIdx = selectabledOptions.findIndex(option => option.dsId === focusOptionIdx);
   return React.useMemo(() => {
     if (!sharedTypes.isSeparator(focusOption) && showPopover && focusOption) return /*#__PURE__*/_jsx__default["default"](styled.StyledA11ySelectedValues, {

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

@@ -34,6 +34,8 @@ const Controls = () => {
     selectedOptionsRef,
     setShowPopover,
     hasFocus,
+    focusOptionIdx,
+    scrollOptionIntoView,
     showPopover,
     controlsWrapperRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
@@ -51,8 +53,8 @@ const Controls = () => {
     }
 
     (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
-    setShowPopover(true);
-  }, [disabled, hasFocus, setShowPopover, showPopover, innerRef, inline]); // this callback prevent to toggle the menu when clicking or removing pills
+    setShowPopover(true); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, hasFocus, showPopover, inline, innerRef, setShowPopover, focusOptionIdx]); // this callback prevent to toggle the menu when clicking or removing pills
 
   const handleOnPillsClick = React.useCallback(e => {
     if (showPopover || disabled) {

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

@@ -20,6 +20,7 @@ const ControlsInput = () => {
   const {
     props: {
       autoFocus,
+      placeholder,
       disabled,
       innerRef,
       onFilter
@@ -48,6 +49,7 @@ const ControlsInput = () => {
   })), /*#__PURE__*/jsxRuntime.jsx(styled.StyledInput, {
     "data-testid": ComboboxDataTestids.ComboboxDataTestid.INPUT,
     autoFocus: autoFocus,
+    placeholder: placeholder,
     "aria-controls": "combo-listbox",
     "aria-activedescendant": focusOptionIdx,
     "aria-expanded": showPopover,

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

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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 => {
+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  &::placeholder {\n    color: transparent;\n  }\n"])), props => props.theme.colors.neutral[700], _ref => {
   let {
     withoutCaret
   } = _ref;

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

@@ -13,6 +13,7 @@ const useControlsInput = () => {
   const {
     props: {
       selectedValues,
+      allOptions,
       placeholder,
       onFilter
     },
@@ -27,19 +28,18 @@ const useControlsInput = () => {
   const showPlaceholder = !inputValue && listHelper.isSelectedValueEmpty(selectedValues) ? placeholder : null;
   const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
   React.useEffect(() => {
-    var _spanReference$curren, _spanReference$curren2;
+    var _spanReference$curren;
 
-    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);
+    setWidth((_spanReference$curren = spanReference.current) !== null && _spanReference$curren !== void 0 && _spanReference$curren.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
   }, [inputValue]); // if we se an input mask we configure inside here the proper mask
   // or a stardard combobox onchange event
 
   const handleOnChange = useMaskedOnChange.useMaskedOnChange();
   const handleOnBlur = React.useCallback(() => {
     setInputValue('');
-    if (onFilter) onFilter('');
-    setHasFocus(false);
-    setShowSelectedOptions(false);
-  }, [setInputValue, setShowSelectedOptions, onFilter, setHasFocus]);
+    if (onFilter) onFilter(allOptions, inputValue);
+    setHasFocus(false); // setShowSelectedOptions(false);
+  }, [setInputValue, onFilter, allOptions, inputValue, setHasFocus, setShowSelectedOptions]);
   const handleOnFocus = React.useCallback(() => {
     setHasFocus(true);
   }, [setHasFocus]);

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

@@ -17,6 +17,7 @@ const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) &
 const useKeyboardNavigation = () => {
   const {
     props: {
+      allOptions,
       onCancel,
       onKeyDown,
       onChange,
@@ -24,7 +25,7 @@ const useKeyboardNavigation = () => {
       onFilter,
       onSelectAll,
       inline,
-      options,
+      filteredOptions,
       selectedValues,
       withoutPortal
     },
@@ -39,9 +40,9 @@ const useKeyboardNavigation = () => {
     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 selectableOptions = listHelper.getOptions(filteredOptions);
+  const currentItemIndex = filteredOptions.findIndex(opt => opt.dsId === focusOptionIdx);
+  const currentItem = filteredOptions.find(item => item.dsId === focusOptionIdx);
   const onInputKeyDown = React.useCallback(e => {
     // =============================================================================
     // CUSTOM KEYS
@@ -59,7 +60,7 @@ const useKeyboardNavigation = () => {
       if (onCancel) onCancel();
 
       if (inputValue) {
-        if (onFilter) onFilter('');
+        if (onFilter) onFilter(allOptions, inputValue);
         setInputValue('');
       }
 
@@ -70,8 +71,10 @@ const useKeyboardNavigation = () => {
 
 
     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('');
+      onCreate(inputValue); //blank active item to force search last one
+
+      setFocusOptionIdx('');
+      if (onFilter) onFilter(allOptions, '');
       setInputValue('');
       return;
     } // =============================================================================
@@ -84,10 +87,10 @@ const useKeyboardNavigation = () => {
       e.stopPropagation();
 
       if (focusOptionIdx !== '' && (showPopover || inline) && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === constants.MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
-        if (onFilter) onFilter('');
+        if (onFilter) onFilter(allOptions, '');
         setInputValue('');
 
-        if (!multiple && !inline) {
+        if (!multiple) {
           setShowPopover(false);
         }
 
@@ -100,7 +103,7 @@ const useKeyboardNavigation = () => {
     }
 
     if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {
-      onSelectAll(options.filter(option => option.type === 'option' && !option.disabled), e);
+      onSelectAll(filteredOptions.filter(option => option.type === 'option' && !option.disabled), e);
     } // =============================================================================
     // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT
     // =============================================================================
@@ -111,9 +114,9 @@ const useKeyboardNavigation = () => {
       e.stopPropagation();
 
       if ((showPopover || inline) && selectableOptions.length) {
-        const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable);
-        setFocusOptionIdx(options[nextItemIndex].dsId);
-        scrollOptionIntoView(options[nextItemIndex].dsId);
+        const nextItemIndex = listHelper.findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);
+        setFocusOptionIdx(filteredOptions[nextItemIndex].dsId);
+        scrollOptionIntoView(filteredOptions[nextItemIndex].dsId);
       }
     }
 
@@ -121,17 +124,17 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
       if (!selectableOptions.length) return;
-      const prevItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+      const prevItemIndex = listHelper.findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable, -1);
 
       if (showPopover || inline) {
-        setFocusOptionIdx(options[prevItemIndex].dsId);
-        scrollOptionIntoView(options[prevItemIndex].dsId);
+        setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);
+        scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);
       } else {
         setShowPopover(true);
         setTimeout(() => {
-          const prevItem = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
-          setFocusOptionIdx(options[prevItem].dsId);
-          scrollOptionIntoView(options[prevItem].dsId);
+          const prevItem = listHelper.findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);
+          setFocusOptionIdx(filteredOptions[prevItem].dsId);
+          scrollOptionIntoView(filteredOptions[prevItem].dsId);
         });
       }
     } // =============================================================================
@@ -139,14 +142,14 @@ const useKeyboardNavigation = () => {
     // =============================================================================
 
 
-    if (e.key === 'Backspace' && inputValue.length <= 0 && !inline) {
+    if (e.key === 'Backspace' && e.currentTarget.value.length <= 0 && !inline) {
       const lastValue = listHelper.getLastValueSelected(selectedValues);
 
-      if (!inputValue && lastValue) {
+      if (!e.currentTarget.value && lastValue) {
         onChange(listHelper.getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
       }
 
-      if (onFilter) onFilter('');
+      if (onFilter) onFilter(allOptions, inputValue);
     }
 
     if (e.key === 'Tab' && !inline && !withoutPortal) {
@@ -158,12 +161,13 @@ const useKeyboardNavigation = () => {
         e.preventDefault();
         element.focus();
       }
-    } // waiting for validation from ux
-    // if (e.key === 'Tab' && multiple) {
-    // }
+    }
 
+    if (e.key === 'Tab' && !multiple && showPopover) {
+      setShowPopover(false);
+    }
   }, // 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]);
+  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
   return {
     onInputKeyDown
   };

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

@@ -4,12 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
+var listHelper = require('../../utils/listHelper.js');
 
 const useMaskedOnChange = () => {
   const {
     props: {
       useMask,
-      onFilter
+      onFilter,
+      allOptions
     },
     setShowPopover,
     setInputValue,
@@ -21,16 +23,16 @@ const useMaskedOnChange = () => {
     setShowPopover(true);
 
     if (onFilter) {
-      onFilter(e.currentTarget.value);
+      onFilter(listHelper.filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);
       setInputValue(e.currentTarget.value);
     }
-  }, [onFilter, setInputValue, setShowPopover, setShowSelectedOptions]); // onchange used when mask is provided
+  }, [allOptions, 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]);
+    if (mask && onFilter) onFilter(listHelper.filterOptions(mask, allOptions), mask);else if (!mask && onFilter) onFilter(allOptions, '');
+  }, [allOptions, onFilter, setShowPopover, setShowSelectedOptions]);
   const onChangeMask = useMask({
     valueSetter: setInputValue,
     onChange: handleOnChangeMask

package/cjs/combobox/parts/dropdown-indicator/DropdownIndicator.js

@@ -1,8 +1,10 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var ChevronSmallDown = require('@elliemae/ds-icons/ChevronSmallDown');
+var dsIcons = require('@elliemae/ds-icons');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
 var styled = require('./styled.js');
 var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
@@ -10,7 +12,6 @@ var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var ChevronSmallDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallDown);
 
 var _ChevronSmallDown;
 
@@ -31,7 +32,8 @@ const DropdownIndicator = () => {
     "aria-hidden": true,
     buttonType: "icon",
     tabIndex: -1
-  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](ChevronSmallDown__default["default"], {})));
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})));
 };
 
-module.exports = DropdownIndicator;
+exports.DropdownIndicator = DropdownIndicator;
+exports["default"] = DropdownIndicator;

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

@@ -14,7 +14,7 @@ const useHeaderListHandlers = () => {
   const {
     props: {
       selectedValues,
-      options,
+      filteredOptions,
       onSelectAll,
       innerRef
     },
@@ -23,7 +23,7 @@ const useHeaderListHandlers = () => {
     setShowPopover
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const multiSelectedValues = selectedValues;
-  const selectableOptions = listHelper.getSelectableOptions(options);
+  const selectableOptions = listHelper.getSelectableOptions(filteredOptions);
   const getCheckboxStatus = React.useMemo(() => {
     if (multiSelectedValues.length === selectableOptions.length) {
       return true;
@@ -44,13 +44,13 @@ const useHeaderListHandlers = () => {
   }, []);
   const handleSelectAllCheckboxChange = React.useCallback(e => {
     if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {
-      onSelectAll(options.filter(option => option.type === 'option' && !option.disabled), e);
+      onSelectAll(filteredOptions.filter(option => option.type === 'option' && !option.disabled), e);
       setCheckboxStatus(true);
     } else if (onSelectAll) {
       onSelectAll([], e);
       setCheckboxStatus(false);
     }
-  }, [checkboxStatus, onSelectAll, options]);
+  }, [checkboxStatus, onSelectAll, filteredOptions]);
   const handleToggleSelectedValuesFilter = React.useCallback(e => {
     e.preventDefault();
     setShowSelectedOptions(!showSelectedOptions);

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
 var styled = require('./styled.js');
 var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
@@ -23,18 +24,22 @@ const MenuList = () => {
       menuMaxHeight,
       onCreate,
       inline,
-      options,
+      filteredOptions,
       selectedValues
     },
-    referenceElement,
+    controlsWrapperRef,
     listRef,
     inputValue,
     wrapperListRef,
     virtualListHelpers
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
-  const multiple = Array.isArray(selectedValues);
-  const withHeader = !inline && multiple && options.length > 0 && inputValue === '';
+  const multiple = Array.isArray(selectedValues); // removing the header list if we are filtering or is inline cb or we have no options to show
+
+  const withHeader = !inline && multiple && filteredOptions.length > 0 && !inputValue;
   const ItemRenderer = useItemRenderer.useItemRenderer();
+  const {
+    width
+  } = dsUtilities.useOnElementResize(controlsWrapperRef);
   const preventLoseInputFocus = React.useCallback(e => {
     e.preventDefault();
   }, []);
@@ -42,8 +47,9 @@ const MenuList = () => {
     ref: wrapperListRef,
     inline: inline,
     onMouseDown: preventLoseInputFocus,
-    minWidth: menuMinWidth || "".concat((referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth) || '100%'),
-    children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx__default["default"](HeaderList.HeaderList, {}))), options.length > 0 || onCreate ? /*#__PURE__*/jsxRuntime.jsx(styled.StyledVirtualListWrapper, {
+    width: width,
+    minWidth: menuMinWidth,
+    children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx__default["default"](HeaderList.HeaderList, {}))), filteredOptions.length > 0 || onCreate ? /*#__PURE__*/jsxRuntime.jsx(styled.StyledVirtualListWrapper, {
       inline: inline,
       maxHeight: menuMaxHeight,
       ref: listRef,
@@ -60,7 +66,7 @@ const MenuList = () => {
     }) : _StyledNoResultsWrapp || (_StyledNoResultsWrapp = /*#__PURE__*/_jsx__default["default"](styled.StyledNoResultsWrapper, {
       "aria-live": "polite"
     }, void 0, "No matches found"))]
-  }), [wrapperListRef, inline, menuMinWidth, referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth, withHeader, options.length, menuMaxHeight, listRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize, ItemRenderer, onCreate, preventLoseInputFocus]);
+  }), [wrapperListRef, inline, preventLoseInputFocus, width, menuMinWidth, withHeader, filteredOptions.length, onCreate, menuMaxHeight, listRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize, ItemRenderer]);
 };
 
 exports.MenuList = MenuList;

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

@@ -10,17 +10,28 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const StyledListWrapper = dsSystem.styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  min-width: ", ";\n  background-color: #ffffff;\n"])), props => props.inline ? '100%' : "".concat(props.minWidth, "px"));
+const StyledListWrapper = dsSystem.styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  min-width: ", ";\n  width: ", ";\n  background-color: #ffffff;\n"])), _ref => {
+  let {
+    inline,
+    minWidth
+  } = _ref;
+  return inline ? '100%' : "".concat(minWidth, "px");
+}, _ref2 => {
+  let {
+    width
+  } = _ref2;
+  return "".concat(width, "px");
+});
 const StyledList = dsSystem.styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  position: relative;\n  padding: 0;\n"])));
-const StyledVirtualListWrapper = dsSystem.styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  overflow-y: auto;\n  margin-top: ", ";\n\n  max-height: ", ";\n"])), _ref => {
+const StyledVirtualListWrapper = dsSystem.styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  overflow-y: auto;\n  margin-top: ", ";\n\n  max-height: ", ";\n"])), _ref3 => {
   let {
     withHeader
-  } = _ref;
+  } = _ref3;
   return withHeader ? '28px' : '';
-}, _ref2 => {
+}, _ref4 => {
   let {
     maxHeight
-  } = _ref2;
+  } = _ref4;
   return !maxHeight ? '400px' : "".concat(maxHeight, "px");
 });
 const StyledCreatableLabel = dsSystem.styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  font-weight: bold;\n  font-style: italic;\n"])));