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

package/esm/combobox/config/useComboBox.js

@@ -38,7 +38,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(propsWithDefaults, inputValue, showSelectedOptions); // ===========================================================================
@@ -78,9 +78,15 @@ const useComboBox = props => {
 
     if (!hasFocus) setFocusOptionIdx(''); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showPopover, hasFocus, correctOptions, selectedValues, inputValue]);
+  useEffect(() => {
+    if (!showPopover) {
+      setFocusOptionIdx('');
+      setShowSelectedOptions(false);
+    }
+  }, [showPopover]);
   const ctx = useMemo(() => ({
     props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
-      options: correctOptions
+      filteredOptions: correctOptions
     }),
     virtualListHelpers,
     showPopover,

package/esm/combobox/config/useCorrectOptions.js

@@ -1,66 +1,38 @@
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import 'core-js/modules/esnext.async-iterator.find.js';
-import 'core-js/modules/esnext.iterator.find.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 import { uid } from 'uid';
 import { MENU_OPTION_TYPES } from '../constants.js';
+import { selectedValuesWithSections } from '../utils/listHelper.js';
 
 const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
   const {
-    options,
+    filteredOptions,
+    allOptions,
     selectedValues,
     onCreate
   } = propsWithDefaults;
-  const selectedValuesWithSections = useCallback(() => {
-    var _items2;
+  return 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 === MENU_OPTION_TYPES.SECTION) {
-        var _items;
-
-        if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === 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) === MENU_OPTION_TYPES.SECTION) {
-      items.pop();
-    }
-
-    return items;
-  }, [options, selectedValues]);
-  const correctOptions = useMemo(() => {
     if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {
-      return selectedValuesWithSections();
-    }
+      return 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 === MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
+    if (onCreate && inputValue && filteredOptions.findIndex(option => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
       const creatableUuid = 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]);
 };
 
 export { useCorrectOptions };

package/esm/combobox/index.js

@@ -1 +1 @@
-export { DSComboBox, DSComboBoxWithSchema } from './ComboBox.js';
+export { DSComboBox, DSComboBox as DSComboBoxV3, DSComboBoxWithSchema } from './ComboBox.js';

package/esm/combobox/parts/A11yFocusedOption.js

@@ -11,13 +11,13 @@ import { isSeparator } from '../sharedTypes.js';
 const A11yFocusedOption = () => {
   const {
     props: {
-      options
+      filteredOptions
     },
     focusOptionIdx,
     showPopover
   } = useContext(ComboBoxContext);
-  const selectabledOptions = getSelectableOptions(options);
-  const focusOption = options.find(option => !isSeparator(option) && option.dsId === focusOptionIdx);
+  const selectabledOptions = getSelectableOptions(filteredOptions);
+  const focusOption = filteredOptions.find(option => !isSeparator(option) && option.dsId === focusOptionIdx);
   const focusSelectableOptionIdx = selectabledOptions.findIndex(option => option.dsId === focusOptionIdx);
   return useMemo(() => {
     if (!isSeparator(focusOption) && showPopover && focusOption) return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {

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

@@ -26,6 +26,8 @@ const Controls = () => {
     selectedOptionsRef,
     setShowPopover,
     hasFocus,
+    focusOptionIdx,
+    scrollOptionIntoView,
     showPopover,
     controlsWrapperRef
   } = useContext(ComboBoxContext);
@@ -43,8 +45,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 = useCallback(e => {
     if (showPopover || disabled) {

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

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

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLit
 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 => {
+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  &::placeholder {\n    color: transparent;\n  }\n"])), props => props.theme.colors.neutral[700], _ref => {
   let {
     withoutCaret
   } = _ref;

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

@@ -9,6 +9,7 @@ const useControlsInput = () => {
   const {
     props: {
       selectedValues,
+      allOptions,
       placeholder,
       onFilter
     },
@@ -23,19 +24,18 @@ const useControlsInput = () => {
   const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;
   const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
   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();
   const handleOnBlur = 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 = useCallback(() => {
     setHasFocus(true);
   }, [setHasFocus]);

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

@@ -13,6 +13,7 @@ const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) &
 const useKeyboardNavigation = () => {
   const {
     props: {
+      allOptions,
       onCancel,
       onKeyDown,
       onChange,
@@ -20,7 +21,7 @@ const useKeyboardNavigation = () => {
       onFilter,
       onSelectAll,
       inline,
-      options,
+      filteredOptions,
       selectedValues,
       withoutPortal
     },
@@ -35,9 +36,9 @@ const useKeyboardNavigation = () => {
     setFocusOptionIdx
   } = 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 selectableOptions = getOptions(filteredOptions);
+  const currentItemIndex = filteredOptions.findIndex(opt => opt.dsId === focusOptionIdx);
+  const currentItem = filteredOptions.find(item => item.dsId === focusOptionIdx);
   const onInputKeyDown = useCallback(e => {
     // =============================================================================
     // CUSTOM KEYS
@@ -55,7 +56,7 @@ const useKeyboardNavigation = () => {
       if (onCancel) onCancel();
 
       if (inputValue) {
-        if (onFilter) onFilter('');
+        if (onFilter) onFilter(allOptions, inputValue);
         setInputValue('');
       }
 
@@ -66,8 +67,10 @@ const useKeyboardNavigation = () => {
 
 
     if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === 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;
     } // =============================================================================
@@ -80,10 +83,10 @@ const useKeyboardNavigation = () => {
       e.stopPropagation();
 
       if (focusOptionIdx !== '' && (showPopover || inline) && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
-        if (onFilter) onFilter('');
+        if (onFilter) onFilter(allOptions, '');
         setInputValue('');
 
-        if (!multiple && !inline) {
+        if (!multiple) {
           setShowPopover(false);
         }
 
@@ -96,7 +99,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
     // =============================================================================
@@ -107,9 +110,9 @@ const useKeyboardNavigation = () => {
       e.stopPropagation();
 
       if ((showPopover || inline) && selectableOptions.length) {
-        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
-        setFocusOptionIdx(options[nextItemIndex].dsId);
-        scrollOptionIntoView(options[nextItemIndex].dsId);
+        const nextItemIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);
+        setFocusOptionIdx(filteredOptions[nextItemIndex].dsId);
+        scrollOptionIntoView(filteredOptions[nextItemIndex].dsId);
       }
     }
 
@@ -117,17 +120,17 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
       if (!selectableOptions.length) return;
-      const prevItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+      const prevItemIndex = 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 = findInCircularList(options, 0, isOptionFocuseable, -1);
-          setFocusOptionIdx(options[prevItem].dsId);
-          scrollOptionIntoView(options[prevItem].dsId);
+          const prevItem = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);
+          setFocusOptionIdx(filteredOptions[prevItem].dsId);
+          scrollOptionIntoView(filteredOptions[prevItem].dsId);
         });
       }
     } // =============================================================================
@@ -135,14 +138,14 @@ const useKeyboardNavigation = () => {
     // =============================================================================
 
 
-    if (e.key === 'Backspace' && inputValue.length <= 0 && !inline) {
+    if (e.key === 'Backspace' && e.currentTarget.value.length <= 0 && !inline) {
       const lastValue = getLastValueSelected(selectedValues);
 
-      if (!inputValue && lastValue) {
+      if (!e.currentTarget.value && lastValue) {
         onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
       }
 
-      if (onFilter) onFilter('');
+      if (onFilter) onFilter(allOptions, inputValue);
     }
 
     if (e.key === 'Tab' && !inline && !withoutPortal) {
@@ -154,12 +157,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/esm/combobox/parts/controls-input/useMaskedOnChange.js

@@ -1,11 +1,13 @@
 import { useContext, useCallback } from 'react';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { filterOptions } from '../../utils/listHelper.js';
 
 const useMaskedOnChange = () => {
   const {
     props: {
       useMask,
-      onFilter
+      onFilter,
+      allOptions
     },
     setShowPopover,
     setInputValue,
@@ -17,16 +19,16 @@ const useMaskedOnChange = () => {
     setShowPopover(true);
 
     if (onFilter) {
-      onFilter(e.currentTarget.value);
+      onFilter(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 = useCallback((_, mask) => {
     setShowSelectedOptions(false);
     setShowPopover(true);
-    if (mask && onFilter) onFilter(mask);
-  }, [onFilter, setShowPopover, setShowSelectedOptions]);
+    if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);else if (!mask && onFilter) onFilter(allOptions, '');
+  }, [allOptions, onFilter, setShowPopover, setShowSelectedOptions]);
   const onChangeMask = useMask({
     valueSetter: setInputValue,
     onChange: handleOnChangeMask

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

@@ -1,6 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
-import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
+import { ChevronSmallDown } from '@elliemae/ds-icons';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
 import { StyledDropDownButton } from './styled.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
@@ -27,4 +27,4 @@ const DropdownIndicator = () => {
   }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})));
 };
 
-export { DropdownIndicator as default };
+export { DropdownIndicator, DropdownIndicator as default };

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

@@ -10,7 +10,7 @@ const useHeaderListHandlers = () => {
   const {
     props: {
       selectedValues,
-      options,
+      filteredOptions,
       onSelectAll,
       innerRef
     },
@@ -19,7 +19,7 @@ const useHeaderListHandlers = () => {
     setShowPopover
   } = useContext(ComboBoxContext);
   const multiSelectedValues = selectedValues;
-  const selectableOptions = getSelectableOptions(options);
+  const selectableOptions = getSelectableOptions(filteredOptions);
   const getCheckboxStatus = useMemo(() => {
     if (multiSelectedValues.length === selectableOptions.length) {
       return true;
@@ -40,13 +40,13 @@ const useHeaderListHandlers = () => {
   }, []);
   const handleSelectAllCheckboxChange = 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 = useCallback(e => {
     e.preventDefault();
     setShowSelectedOptions(!showSelectedOptions);

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

@@ -1,5 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useCallback, useMemo } from 'react';
+import { useOnElementResize } from '@elliemae/ds-utilities';
 import { StyledListWrapper, StyledVirtualListWrapper, StyledList, StyledNoResultsWrapper } from './styled.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
@@ -15,18 +16,22 @@ const MenuList = () => {
       menuMaxHeight,
       onCreate,
       inline,
-      options,
+      filteredOptions,
       selectedValues
     },
-    referenceElement,
+    controlsWrapperRef,
     listRef,
     inputValue,
     wrapperListRef,
     virtualListHelpers
   } = useContext(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();
+  const {
+    width
+  } = useOnElementResize(controlsWrapperRef);
   const preventLoseInputFocus = useCallback(e => {
     e.preventDefault();
   }, []);
@@ -34,8 +39,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(HeaderList, {}))), options.length > 0 || onCreate ? /*#__PURE__*/jsx(StyledVirtualListWrapper, {
+    width: width,
+    minWidth: menuMinWidth,
+    children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx(HeaderList, {}))), filteredOptions.length > 0 || onCreate ? /*#__PURE__*/jsx(StyledVirtualListWrapper, {
       inline: inline,
       maxHeight: menuMaxHeight,
       ref: listRef,
@@ -52,7 +58,7 @@ const MenuList = () => {
     }) : _StyledNoResultsWrapp || (_StyledNoResultsWrapp = /*#__PURE__*/_jsx(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]);
 };
 
 export { MenuList };

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

@@ -2,17 +2,28 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLit
 import { styled } from '@elliemae/ds-system';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const StyledListWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: ", ";\n  background-color: #ffffff;\n"])), props => props.inline ? '100%' : "".concat(props.minWidth, "px"));
+const StyledListWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: 0;\n"])));
-const StyledVirtualListWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  margin-top: ", ";\n\n  max-height: ", ";\n"])), _ref => {
+const StyledVirtualListWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-style: italic;\n"])));

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

@@ -25,12 +25,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const useItemRenderer = () => {
   const {
     props: {
-      options,
+      filteredOptions,
       onCreate,
       onChange,
       selectedValues,
       onFilter,
-      innerRef
+      allOptions
     },
     setShowPopover,
     inputValue,
@@ -45,11 +45,11 @@ const useItemRenderer = () => {
       if (inputValue) {
         onCreate(inputValue);
         setInputValue('');
-        onFilter('');
+        onFilter(allOptions, inputValue);
       }
     } else if (option.type === MENU_OPTION_TYPES.OPTION) {
       if (!option.disabled) {
-        if (onFilter) onFilter('');
+        if (onFilter) onFilter(allOptions, inputValue);
         setInputValue('');
 
         if (!multiple) {
@@ -63,7 +63,7 @@ const useItemRenderer = () => {
 
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, selectedValues, onChange, setShowPopover, multiple, innerRef]); // prevent blur from controls input
+  }, [onFilter, selectedValues, onChange, setShowPopover, multiple]); // prevent blur from controls input
 
   const handleOnMouseDown = useCallback(e => {
     e.preventDefault();
@@ -74,7 +74,7 @@ const useItemRenderer = () => {
     }
 
     return virtualListHelpers.virtualItems.map(vItem => {
-      const option = options[vItem.index];
+      const option = filteredOptions[vItem.index];
       const generalProps = {
         wrapperStyles: {
           position: 'absolute',
@@ -124,7 +124,7 @@ const useItemRenderer = () => {
               height: "16px",
               gutter: "xxs",
               alignItems: "center"
-            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx(StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx("span", {}, void 0, label));
+            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx(StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx("span", {}, void 0, "\"".concat(label, "\"")));
           },
           label: option.label,
           onClick: e => handleClick(option, e)
@@ -133,7 +133,7 @@ const useItemRenderer = () => {
 
       return /*#__PURE__*/jsx(Fragment, {});
     });
-  }, [options, focusOptionIdx, selectedValues, innerRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.virtualItems]);
+  }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);
 };
 
 export { useItemRenderer };

package/esm/combobox/parts/menu-list/useMenuListSetFocusOption.js

@@ -6,7 +6,7 @@ const useMenuListSetFocusOption = () => {
   const {
     props: {
       selectedValues,
-      options
+      filteredOptions
     },
     setFocusOptionIdx,
     hasFocus,
@@ -15,16 +15,16 @@ const useMenuListSetFocusOption = () => {
     scrollOptionIntoView
   } = useContext(ComboBoxContext);
   const getFirstOption = useCallback(() => {
-    for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {
-      setFocusOptionIdx(options[i].dsId);
+    for (let i = 0; i < filteredOptions.length; i += 1) if (!['section', 'separator'].includes(filteredOptions[i].type) && !filteredOptions[i].disabled) {
+      setFocusOptionIdx(filteredOptions[i].dsId);
       break;
     }
-  }, [options, setFocusOptionIdx]);
+  }, [filteredOptions, setFocusOptionIdx]);
   useEffect(() => {
     scrollOptionIntoView(focusOptionIdx); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [focusOptionIdx]);
   useEffect(() => {
-    if (options.length === 0) {
+    if (filteredOptions.length === 0) {
       setFocusOptionIdx('');
     }
 
@@ -41,7 +41,7 @@ const useMenuListSetFocusOption = () => {
     }
 
     if (hasFocus) getFirstOption();
-  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, options.length]);
+  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, filteredOptions.length]);
 };
 
 export { useMenuListSetFocusOption };

package/esm/combobox/react-desc-prop-types.js

@@ -12,7 +12,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function noop() {}
 const ComboboxPropTypes = _objectSpread(_objectSpread({}, globalAttributesPropTypes), {}, {
   placeholder: PropTypes.string.description("input's placeholder value").defaultValue(''),
-  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired.description('List of options').defaultValue([]),
+  allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired.description('List of original options').defaultValue([]),
+  filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description('List of filtered options to show in the menu based on the current internal input filter value').defaultValue([]),
   selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description('Array of option or single option selected'),
   disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),
   autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),