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

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

@@ -0,0 +1,168 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+var React = require('react');
+var ComboBoxCTX = require('../../ComboBoxCTX.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,
+      options,
+      selectedValues,
+      onFilter,
+      withoutPortal
+    },
+    setShowPopover,
+    setInputValue,
+    inputValue,
+    showPopover,
+    focusOptionIdx,
+    setFocusOptionIdx,
+    selectAllCheckboxRef,
+    toggleSelectionButtonRef
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  const multiple = Array.isArray(selectedValues);
+  const selectableOptions = listHelper.getOptions(options);
+  const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
+  const currentItem = options.find(item => item.dsId === focusOptionIdx);
+  const selectOption = React.useCallback(() => {
+    const selectedOption = options.find(item => item.dsId === focusOptionIdx);
+
+    if (!selectedOption.disabled) {
+      if (onFilter) onFilter('');
+      setInputValue('');
+      onChange(selectedOption);
+      if (!multiple) setShowPopover(false);
+    }
+  }, [multiple, options, setInputValue, focusOptionIdx, setShowPopover, onFilter, onChange]);
+  const onInputKeyDown = React.useCallback(e => {
+    // =============================================================================
+    // CUSTOM KEYS
+    // =============================================================================
+    if (onKeyDown) onKeyDown(e, currentItem);
+
+    if (!['Escape', 'Tab', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+      setShowPopover(true);
+    } // =============================================================================
+    // ESCAPE
+    // =============================================================================
+
+
+    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) === constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
+      onCreate(inputValue);
+      if (onFilter) onFilter('');
+      setInputValue('');
+      return;
+    } // =============================================================================
+    // Enter and space on selection
+    // =============================================================================
+
+
+    if (e.key === 'Enter' || e.keyCode === 32 && e.altKey) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (focusOptionIdx !== '' && showPopover) {
+        selectOption();
+      }
+    }
+
+    if (e.key === 'Enter' && e.altKey) {
+      setShowPopover(false);
+    }
+
+    if (e.key === 'a' && e.ctrlKey && multiple) {
+      if (onSelectAll) onSelectAll();
+    } // =============================================================================
+    // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT
+    // =============================================================================
+
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if ((showPopover || inline) && selectableOptions.length) {
+        const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable);
+        setFocusOptionIdx(options[nextItemIndex].dsId);
+      }
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!selectableOptions.length) return;
+      const prevItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+
+      if (showPopover || inline) {
+        setFocusOptionIdx(options[prevItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+        setTimeout(() => {
+          const nextItemIndex = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
+          setFocusOptionIdx(options[nextItemIndex].dsId);
+        });
+      }
+    } // =============================================================================
+    // BACKSPACE
+    // =============================================================================
+
+
+    if (e.key === 'Backspace' && inputValue.length <= 0 && !inline) {
+      if (multiple && !inputValue) {
+        if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
+      } else {
+        onChange(null);
+      }
+
+      if (onFilter) onFilter('');
+    }
+
+    if (e.key === 'Tab' && !inline && !withoutPortal) {
+      var _selectAllCheckboxRef;
+
+      const element = (_selectAllCheckboxRef = selectAllCheckboxRef.current) !== null && _selectAllCheckboxRef !== void 0 ? _selectAllCheckboxRef : toggleSelectionButtonRef.current;
+
+      if (element) {
+        e.preventDefault();
+        element.focus();
+      }
+    } // waiting for validation from ux
+    // if (e.key === 'Tab' && multiple) {
+    // }
+
+  }, [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectOption, onSelectAll, selectableOptions.length, options, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
+  return {
+    onInputKeyDown
+  };
+};
+
+exports.useKeyboardNavigation = useKeyboardNavigation;

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,48 @@ 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
+      selectedValues
     },
     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 && onClearAll && /*#__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/{controlled-combobox → combobox}/parts/header-list/useHeaderListHandlers.js

@@ -9,7 +9,6 @@ var ComboBoxCTX = require('../../ComboBoxCTX.js');
 const useHeaderListHandlers = () => {
   const {
     props: {
-      onFilter,
       selectedValues,
       options,
       onSelectAll,
@@ -34,44 +33,57 @@ const useHeaderListHandlers = () => {
     return 'mixed';
   }, [multiSelectedValues, selectableOptions]);
   const handleOnMouseDown = React.useCallback(e => {
-    e.preventDefault();
+    e.preventDefault(); // this prevent the input control to lose focus
   }, []);
   const handleSelectAllCheckboxChange = React.useCallback(() => {
-    if (!checkboxStatus || checkboxStatus === 'mixed') {
+    if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {
       onSelectAll();
-    } else {
+    } else if (onClearAll) {
       onClearAll();
     }
   }, [checkboxStatus, onSelectAll, onClearAll]);
-  const handleToggle = React.useCallback(() => {
-    if (innerRef.current) innerRef.current.value = '';
-    onFilter('');
+  const handleToggleSelectedValuesFilter = React.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 = React.useCallback(e => {
     if (e.key === 'Escape') {
       setShowPopover(false);
     }
-  }, [setShowPopover]);
-  const handleFilterSelectionBtnOnBlur = React.useCallback(() => {
-    var _innerRef$current;
+  }, [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;
 
-    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 = 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,
-    handleToggle,
-    handleFilterSelectionBtnOnBlur,
+    handleToggleSelectedValuesFilter,
+    handleFilterSelectionBtnOnTab,
     handleOnMouseDown,
+    handleCheckAllOnTab,
     handleSelectAllCheckboxChange,
     checkboxStatus
-  }), [handleKeyDown, handleFilterSelectionBtnOnBlur, handleToggle, handleOnMouseDown, checkboxStatus, handleSelectAllCheckboxChange]);
+  }), [handleKeyDown, handleFilterSelectionBtnOnTab, handleToggleSelectedValuesFilter, handleOnMouseDown, handleCheckAllOnTab, handleSelectAllCheckboxChange, checkboxStatus]);
 };
 
 exports.useHeaderListHandlers = useHeaderListHandlers;

package/cjs/{controlled-combobox → combobox}/parts/menu-list/MenuList.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var lodash = require('lodash');
 var styled = require('./styled.js');
 var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
 var HeaderList = require('../header-list/HeaderList.js');
-var useOnElementResize = require('../../utils/hooks/useOnElementResize.js');
 var useItemRenderer = require('./useItemRenderer.js');
-var useMenuList = require('./useMenuList.js');
+var useMenuListSetFocusOption = require('./useMenuListSetFocusOption.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -19,10 +17,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 var _HeaderList, _StyledNoResultsWrapp;
-
 const MenuList = () => {
-  var _innerRef$current;
-
   const {
     props: {
       menuMinWidth,
@@ -30,31 +25,27 @@ const MenuList = () => {
       onCreate,
       inline,
       options,
-      selectedValues,
-      innerRef
+      selectedValues
     },
     referenceElement,
     listRef,
+    inputValue,
     wrapperListRef,
-    controlsWrapperRef,
     virtualListHelpers
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
-  const isOnCreatedSupplied = onCreate !== lodash.noop;
   const multiple = Array.isArray(selectedValues);
-  const withHeader = !inline && multiple && options.length > 0 && ((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value) === '';
+  const withHeader = !inline && multiple && options.length > 0 && inputValue === '';
   const ItemRenderer = useItemRenderer.useItemRenderer();
-  useMenuList.useMenuList();
-  const {
-    width
-  } = useOnElementResize.useOnElementResize(controlsWrapperRef);
-  const listWidth = React.useMemo(() => menuMinWidth || "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth), // eslint-disable-next-line react-hooks/exhaustive-deps
-  [menuMinWidth, referenceElement, width]);
-  const list = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(styled.StyledListWrapper, {
+  useMenuListSetFocusOption.useMenuListSetFocusOption();
+  const preventLoseInputFocus = React.useCallback(e => {
+    e.preventDefault();
+  }, []);
+  return React.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(styled.StyledListWrapper, {
     ref: wrapperListRef,
     inline: inline,
-    onMouseDown: e => e.preventDefault(),
-    minWidth: listWidth,
-    children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx__default["default"](HeaderList.HeaderList, {}))), options.length > 0 || isOnCreatedSupplied ? /*#__PURE__*/jsxRuntime.jsx(styled.StyledVirtualListWrapper, {
+    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, {
       inline: inline,
       maxHeight: menuMaxHeight,
       ref: listRef,
@@ -69,12 +60,9 @@ const MenuList = () => {
         }
       }, void 0, ItemRenderer)
     }) : _StyledNoResultsWrapp || (_StyledNoResultsWrapp = /*#__PURE__*/_jsx__default["default"](styled.StyledNoResultsWrapper, {
-      id: "id-no-results"
+      "aria-live": "polite"
     }, void 0, "No matches found"))]
-  }), [ItemRenderer, inline, isOnCreatedSupplied, listRef, listWidth, menuMaxHeight, options.length, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize, withHeader, wrapperListRef]);
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: list
-  });
+  }), [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]);
 };
 
 exports.MenuList = MenuList;

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

@@ -0,0 +1,33 @@
+'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, _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 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 => {
+  let {
+    withHeader
+  } = _ref;
+  return withHeader ? '28px' : '';
+}, _ref2 => {
+  let {
+    maxHeight
+  } = _ref2;
+  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"])));
+const StyledNoResultsWrapper = dsSystem.styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  padding: 16px;\n"])));
+
+exports.StyledCreatableLabel = StyledCreatableLabel;
+exports.StyledList = StyledList;
+exports.StyledListWrapper = StyledListWrapper;
+exports.StyledNoResultsWrapper = StyledNoResultsWrapper;
+exports.StyledVirtualListWrapper = StyledVirtualListWrapper;