@elliemae/ds-controlled-form 2.4.2-rc.3 → 2.4.3-rc.0

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

@@ -30,12 +30,12 @@ const useKeyboardNavigation = () => {
       withoutPortal
     },
     inputValue,
-    showPopover,
+    menuState,
     focusOptionIdx,
     listRef,
     selectAllCheckboxRef,
     toggleSelectionButtonRef,
-    setShowPopover,
+    setMenuState,
     setInputValue,
     scrollOptionIntoView,
     setFocusOptionIdx
@@ -48,17 +48,12 @@ const useKeyboardNavigation = () => {
     // =============================================================================
     // CUSTOM KEYS
     // =============================================================================
-    if (onKeyDown && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === constants.MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);
+    if (onKeyDown && 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);
+    if ((['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) && !menuState) {
+      setMenuState(true);
       window.requestAnimationFrame(() => {
-        if (listRef.current && window.scrollY < listRef.current.offsetHeight) {
-          window.scrollTo({
-            top: listRef.current.offsetHeight,
-            behavior: 'smooth'
-          });
-        }
+        if (listRef.current) listHelper.scrollIfNeeded(listRef.current);
       });
     } // =============================================================================
     // ESCAPE
@@ -73,13 +68,13 @@ const useKeyboardNavigation = () => {
         setInputValue('');
       }
 
-      if (!inline) setShowPopover(false);
+      if (!inline) setMenuState(false, 'close', e);
     } // =============================================================================
     // 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) {
+    if (e.key === 'Enter' && currentItem?.type === constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
       onCreate(inputValue); // blank active item to force search last one
 
       setFocusOptionIdx('');
@@ -95,12 +90,12 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if (focusOptionIdx !== '' && (showPopover || inline) && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === constants.MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
+      if (focusOptionIdx !== '' && (menuState || inline) && currentItem?.type === constants.MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
         if (onFilter) onFilter(allOptions, '');
         setInputValue('');
 
         if (!multiple) {
-          setShowPopover(false);
+          setMenuState(false, 'selectOption', e);
         }
 
         onChange(listHelper.getSuggestedValueOnChange(currentItem, selectedValues), currentItem, e);
@@ -108,7 +103,7 @@ const useKeyboardNavigation = () => {
     }
 
     if (e.key === 'Enter' && e.altKey) {
-      setShowPopover(false);
+      setMenuState(false, 'selectOption', e);
     }
 
     if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {
@@ -122,7 +117,7 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if ((showPopover || inline) && selectableOptions.length) {
+      if ((menuState || inline) && selectableOptions.length) {
         const nextItemIndexIndex = listHelper.findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);
 
         if (nextItemIndexIndex > -1) {
@@ -139,12 +134,12 @@ const useKeyboardNavigation = () => {
       const prevItemIndex = listHelper.findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable, -1);
 
       if (prevItemIndex > -1) {
-        if (showPopover || inline) {
+        if (menuState || inline) {
           setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);
           scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);
         } else {
           // open menu and search last item to focused
-          setShowPopover(true);
+          setMenuState(true, 'open', e);
           const lastItemIndex = listHelper.findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);
           setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);
           setTimeout(() => {
@@ -167,22 +162,18 @@ const useKeyboardNavigation = () => {
       if (onFilter) onFilter(allOptions, inputValue);
     }
 
-    if (e.key === 'Tab' && !inline && !withoutPortal) {
-      var _selectAllCheckboxRef;
-
-      const element = (_selectAllCheckboxRef = selectAllCheckboxRef.current) !== null && _selectAllCheckboxRef !== void 0 ? _selectAllCheckboxRef : toggleSelectionButtonRef.current;
+    if (e.key === 'Tab' && !inline && menuState) {
+      const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;
 
       if (element) {
         e.preventDefault();
         element.focus();
+      } else {
+        setMenuState(false, 'blur', e);
       }
     }
-
-    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, listRef, focusOptionIdx, showPopover, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
+  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setMenuState, onCancel, onFilter, setInputValue, listRef, focusOptionIdx, menuState, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
   return {
     onInputKeyDown
   };

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

@@ -13,31 +13,31 @@ const useMaskedOnChange = () => {
       onFilter,
       allOptions
     },
-    setShowPopover,
+    setMenuState,
     setInputValue,
     setShowSelectedOptions
   } = React.useContext(ComboBoxCTX.ComboBoxContext); // default onchange when no mask provided
 
   const handleOnChange = React.useCallback(e => {
     setShowSelectedOptions(false);
-    setShowPopover(true);
+    setMenuState(true, 'filter', e);
 
     if (onFilter) {
       onFilter(listHelper.filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);
       setInputValue(e.currentTarget.value);
     }
-  }, [allOptions, onFilter, setInputValue, setShowPopover, setShowSelectedOptions]); // onchange used when mask is provided
+  }, [allOptions, onFilter, setInputValue, setMenuState, setShowSelectedOptions]); // onchange used when mask is provided
 
-  const handleOnChangeMask = React.useCallback((_, mask) => {
+  const handleOnChangeMask = React.useCallback((e, mask) => {
     setShowSelectedOptions(false);
-    setShowPopover(true);
+    setMenuState(true, 'filter', e);
     if (mask && onFilter) onFilter(listHelper.filterOptions(mask, allOptions), mask);else if (!mask && onFilter) onFilter(allOptions, '');
-  }, [allOptions, onFilter, setShowPopover, setShowSelectedOptions]);
+  }, [allOptions, onFilter, setMenuState, setShowSelectedOptions]);
   const onChangeMask = useMask({
     valueSetter: setInputValue,
     onChange: handleOnChangeMask
   });
-  return (onChangeMask === null || onChangeMask === void 0 ? void 0 : onChangeMask.onChange) || handleOnChange;
+  return onChangeMask?.onChange || handleOnChange;
 };
 
 exports.useMaskedOnChange = useMaskedOnChange;

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

@@ -20,14 +20,14 @@ const DropdownIndicator = () => {
     props: {
       disabled
     },
-    showPopover
+    menuState
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   return /*#__PURE__*/_jsx__default["default"](styled.StyledDropDownButton, {
     "data-testid": ComboboxDataTestids.ComboboxDataTestid.DROPDOWN,
     "aria-controls": "combo-listbox",
     "aria-labelledby": "combo-label",
     disabled: disabled,
-    "aria-expanded": showPopover,
+    "aria-expanded": menuState,
     "aria-haspopup": "listbox",
     "aria-hidden": true,
     buttonType: "icon",

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

@@ -59,7 +59,7 @@ const HeaderList = () => {
     size: DSButton.BUTTON_SIZES.S,
     "data-testid": ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
     innerRef: toggleSelectionButtonRef
-  }, void 0, !showSelectedOptions ? "SHOW SELECTED [".concat(multiSelectedValues.length, "]") : 'SHOW ALL') : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx__default["default"](styled.StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))));
+  }, void 0, !showSelectedOptions ? `SHOW SELECTED [${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

@@ -2,20 +2,49 @@
 
 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 }; }
+/* eslint-disable max-len */
+const StyledHeaderListWrapper = dsSystem.styled.div`
+  display: flex;
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  justify-content: space-between;
+  padding: 0px 12px 0px 16px;
+  width: 100%;
+  height: 28px;
+  background-color: #fff;
+  box-shadow: 0 4px 2px -4px ${props => props.theme.colors.neutral[700]};
+  overflow-x: hidden;
 
-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"])));
+  & button {
+    font-size: 13px;
+  }
+`;
+const StyledButtonSelection = dsSystem.styled(DSButton.DSButtonV2)`
+  border-radius: 0px;
+  padding: 0 ${props => props.theme.space.xxs};
+  margin: 0;
+  align-items: center;
+  transition: unset;
+  &:hover:not([disabled]) {
+    background-color: transparent;
+    color: ${props => props.theme.colors.brand['700']};
+  }
+`;
+const StyledSelectedItems = dsSystem.styled.div`
+  display: flex;
+  align-items: center;
+`;
+const StyledNoOptionsSelected = dsSystem.styled.div`
+  padding: 0 ${props => props.theme.space.xxs};
+`;
+const StyledSelectAllCheckbox = dsSystem.styled.div`
+  display: flex;
+  align-items: center;
+`;
 
 exports.StyledButtonSelection = StyledButtonSelection;
 exports.StyledHeaderListWrapper = StyledHeaderListWrapper;

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

@@ -2,7 +2,6 @@
 
 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');
@@ -20,7 +19,7 @@ const useHeaderListHandlers = () => {
     },
     showSelectedOptions,
     setShowSelectedOptions,
-    setShowPopover
+    setMenuState
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const multiSelectedValues = selectedValues;
   const selectableOptions = listHelper.getSelectableOptions(filteredOptions);
@@ -29,7 +28,7 @@ const useHeaderListHandlers = () => {
       return true;
     }
 
-    if ((multiSelectedValues === null || multiSelectedValues === void 0 ? void 0 : multiSelectedValues.length) === 0) {
+    if (multiSelectedValues?.length === 0) {
       return false;
     }
 
@@ -59,27 +58,21 @@ const useHeaderListHandlers = () => {
 
   const handleKeyDown = React.useCallback(e => {
     if (e.key === 'Escape') {
-      var _innerRef$current;
-
-      setShowPopover(false);
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+      setMenuState(false, 'close', e);
+      innerRef.current?.focus();
     }
-  }, [setShowPopover, innerRef]); // when hitting tab on selected values button filter we target the input again
+  }, [setMenuState, innerRef]); // 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$current2;
-
       e.preventDefault();
-      (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
+      innerRef.current?.focus();
     }
   }, [innerRef]);
   const handleCheckAllOnTab = React.useCallback(e => {
     if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {
-      var _innerRef$current3;
-
       e.preventDefault();
-      (_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.focus();
+      innerRef.current?.focus();
     }
   }, [innerRef, multiSelectedValues]);
   React.useEffect(() => {

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

@@ -16,11 +16,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var _HeaderList, _StyledNoResultsWrapp;
+var _HeaderList;
 const MenuList = () => {
+  var _StyledNoResultsWrapp;
+
   const {
     props: {
       menuMinWidth,
+      noOptionsMessage,
       menuMaxHeight,
       onCreate,
       inline,
@@ -61,15 +64,14 @@ const MenuList = () => {
         role: "listbox",
         "data-testid": ComboboxDataTestids.ComboboxDataTestid.LIST,
         style: {
-          height: virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize,
+          height: virtualListHelpers?.totalSize,
           margin: inline ? '0px' : '8px 0px'
         }
       }, void 0, ItemRenderer)
     }) : _StyledNoResultsWrapp || (_StyledNoResultsWrapp = /*#__PURE__*/_jsx__default["default"](styled.StyledNoResultsWrapper, {
-      role: "alert",
-      "aria-live": "polite"
-    }, void 0, "No matches found"))]
-  }, width), [wrapperListRef, inline, preventLoseInputFocus, menuMinWidth, withHeader, filteredOptions.length, onCreate, menuMaxHeight, listRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize, ItemRenderer, width]);
+      role: "alert"
+    }, void 0, noOptionsMessage))]
+  }, width), [wrapperListRef, inline, preventLoseInputFocus, width, menuMinWidth, withHeader, filteredOptions.length, onCreate, menuMaxHeight, listRef, virtualListHelpers?.totalSize, ItemRenderer, noOptionsMessage]);
 };
 
 exports.MenuList = MenuList;

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

@@ -2,47 +2,65 @@
 
 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  width: ", ";\n  background-color: #ffffff;\n  max-height: ", ";\n  z-index: 100;\n"])), _ref => {
+const StyledListWrapper = dsSystem.styled.div`
+  min-width: ${_ref => {
   let {
     inline,
     minWidth
   } = _ref;
-  return inline ? '100%' : "".concat(minWidth, "px");
-}, _ref2 => {
+  return inline ? '100%' : `${minWidth}px`;
+}};
+  width: ${_ref2 => {
   let {
     width
   } = _ref2;
-  return "".concat(width, "px");
-}, _ref3 => {
+  return `${width}px`;
+}};
+  background-color: #ffffff;
+  max-height: ${_ref3 => {
   let {
     maxHeight
   } = _ref3;
-  return "".concat(maxHeight, "px");
-});
-const StyledList = dsSystem.styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  position: relative;\n  padding: 0;\n  background-color: #ffffff;\n"])));
-const StyledVirtualListWrapper = dsSystem.styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  overflow-y: auto;\n  margin-top: ", ";\n  max-height: ", ";\n"])), _ref4 => {
+  return `${maxHeight}px`;
+}};
+  z-index: 100;
+`;
+const StyledList = dsSystem.styled.ul`
+  position: relative;
+  padding: 0;
+  background-color: #ffffff;
+  overflow-x: hidden;
+`;
+const StyledVirtualListWrapper = dsSystem.styled.div`
+  overflow-y: auto;
+  margin-top: ${_ref4 => {
   let {
     withHeader
   } = _ref4;
   return withHeader ? '28px' : '';
-}, _ref5 => {
+}};
+  max-height: ${_ref5 => {
   let {
     maxHeight
   } = _ref5;
-  return maxHeight ? "".concat(maxHeight, "px") : '300px';
-});
-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"])));
+  return maxHeight ? `${maxHeight}px` : '300px';
+}};
+`;
+const StyledCreatableLabel = dsSystem.styled.span`
+  font-weight: bold;
+  font-style: italic;
+`;
+const StyledCreatableValue = dsSystem.styled.span`
+  word-break: break-all;
+`;
+const StyledNoResultsWrapper = dsSystem.styled.div`
+  padding: 16px;
+`;
 
 exports.StyledCreatableLabel = StyledCreatableLabel;
+exports.StyledCreatableValue = StyledCreatableValue;
 exports.StyledList = StyledList;
 exports.StyledListWrapper = StyledListWrapper;
 exports.StyledNoResultsWrapper = StyledNoResultsWrapper;

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

@@ -41,7 +41,7 @@ const useItemRenderer = () => {
       onFilter,
       allOptions
     },
-    setShowPopover,
+    setMenuState,
     inputValue,
     focusOptionIdx,
     setInputValue,
@@ -49,20 +49,21 @@ const useItemRenderer = () => {
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
   const CBItem = multiple ? dsForm.MultiMenuItem : dsForm.SingleMenuItem;
+  const handleOnCreateClick = React.useCallback(() => {
+    if (inputValue && onCreate) {
+      onCreate(inputValue);
+      setInputValue('');
+      if (onFilter) onFilter(allOptions, inputValue);
+    }
+  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);
   const handleClick = React.useCallback((option, e) => {
-    if (option.type === constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate && onFilter) {
-      if (inputValue) {
-        onCreate(inputValue);
-        setInputValue('');
-        onFilter(allOptions, inputValue);
-      }
-    } else if (option.type === constants.MENU_OPTION_TYPES.OPTION) {
+    if (option.type === constants.MENU_OPTION_TYPES.OPTION) {
       if (!option.disabled) {
         if (onFilter) onFilter(allOptions, inputValue);
         setInputValue('');
 
         if (!multiple) {
-          setShowPopover(false);
+          setMenuState(false, 'selectOption', e);
         }
 
         onChange(listHelper.getSuggestedValueOnChange(option, selectedValues), option, e);
@@ -72,7 +73,7 @@ const useItemRenderer = () => {
 
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, selectedValues, onChange, setShowPopover, multiple]); // prevent blur from controls input
+  }, [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple]); // prevent blur from controls input
 
   const handleOnMouseDown = React.useCallback(e => {
     e.preventDefault();
@@ -90,9 +91,9 @@ const useItemRenderer = () => {
           top: 0,
           left: 0,
           width: '100%',
-          transform: "translateY(".concat(vItem.start, "px)")
+          transform: `translateY(${vItem.start}px)`
         },
-        key: "".concat(option.dsId),
+        key: `${option.dsId}`,
         innerRef: vItem.measureRef
       };
 
@@ -115,8 +116,8 @@ const useItemRenderer = () => {
           onClick: e => handleClick(option, e),
           onMouseDown: handleOnMouseDown,
           isActive: option.dsId === focusOptionIdx,
-          isSelected: listHelper.isSelected(selectedValues, option) //tabIndex={-1}
-
+          isSelected: listHelper.isSelected(selectedValues, option),
+          tabIndex: -1
         }));
       }
 
@@ -130,14 +131,14 @@ const useItemRenderer = () => {
               label
             } = _ref;
             return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+              p: "8px",
               cols: ['min-content', 'auto'],
-              height: "16px",
               gutter: "xxs",
               alignItems: "center"
-            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx__default["default"](styled.StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, "\"".concat(label, "\"")));
+            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx__default["default"](styled.StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx__default["default"](styled.StyledCreatableValue, {}, void 0, `"${label}"`));
           },
           label: option.label,
-          onClick: e => handleClick(option, e)
+          onClick: handleOnCreateClick
         }));
       }
 

package/cjs/combobox/parts/multi-selected-values-container/MultiSelectedValuesContainer.js

@@ -39,7 +39,7 @@ const MultiSelectedValuesContainer = () => {
   }, pill.dsId)), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
     size: "s",
     labelTruncated: false,
-    label: "+".concat(multiSelectedValue.length - correctPillsToShow),
+    label: `+${multiSelectedValue.length - correctPillsToShow}`,
     type: "value",
     disabled: disabled
   }, "grouped"))), [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled]);

package/cjs/combobox/parts/multi-selected-values-container/RemovableSelectedValuePill.js

@@ -31,12 +31,10 @@ const RemovableSelectedValuePill = props => {
     type: disabled ? 'value' : 'removable',
     tabIndex: -1,
     onRemove: e => {
-      var _innerRef$current;
-
       // preventing the menu to be opened
       e.stopPropagation();
       onChange(listHelper.getSuggestedValueOnChange(pill, selectedValues), pill, e);
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+      innerRef.current?.focus();
     }
   }, pill.value);
 };

package/cjs/combobox/parts/multi-selected-values-container/useGroupPills.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
@@ -53,7 +52,7 @@ const useGroupPills = () => {
       let currentWidth = 0;
       const referenceWidth = selectedOptionsRef.current.offsetWidth;
       const pills = [...pillGroupRef.current.querySelectorAll(disabled ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
-      const pillsWidth = pills.map(pill => pill === null || pill === void 0 ? void 0 : pill.offsetWidth);
+      const pillsWidth = pills.map(pill => pill?.offsetWidth);
       pillsWidth.forEach((pillWidth, idx) => {
         currentWidth += pillWidth;
 

package/cjs/combobox/parts/styled.js

@@ -2,14 +2,13 @@
 
 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;
-const StyledA11ySelectedValues = dsSystem.styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n"])));
+const StyledA11ySelectedValues = dsSystem.styled.span`
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+`;
 
 exports.StyledA11ySelectedValues = StyledA11ySelectedValues;

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

@@ -26,12 +26,13 @@ const ComboboxPropTypes = _objectSpread(_objectSpread({}, dsPropsHelpers.globalA
   disabled: dsPropsHelpers.PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),
   autoFocus: dsPropsHelpers.PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
   hasError: dsPropsHelpers.PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
+  noOptionsMessage: dsPropsHelpers.PropTypes.string.description('Custome message to be display when no matches found after filtering').defaultValue('No Matches Found'),
+  closeMenuOnScroll: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.func, dsPropsHelpers.PropTypes.bool]).description('If true, close the select menu when the user scrolls the document/body.').defaultValue(false),
   onChange: dsPropsHelpers.PropTypes.func.isRequired.description('function triggered when an option is selected it will send the options selected').defaultValue('() => {}'),
   onFilter: dsPropsHelpers.PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),
   onCreate: dsPropsHelpers.PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
   onCancel: dsPropsHelpers.PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),
-  onMenuOpen: dsPropsHelpers.PropTypes.func.description('function triggered when user open the menu list').defaultValue('() => {}'),
-  onMenuClose: dsPropsHelpers.PropTypes.func.description('function triggered when user close the menu list').defaultValue('() => {}'),
+  onMenuChange: dsPropsHelpers.PropTypes.func.description('function triggered when user open or close the menu list').defaultValue('() => {}'),
   inputMinWidth: dsPropsHelpers.PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
   menuMinWidth: dsPropsHelpers.PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
   menuMaxHeight: dsPropsHelpers.PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),

package/cjs/combobox/sharedTypes.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var constants = require('./constants.js');
 
-const isSeparator = el => (el === null || el === void 0 ? void 0 : el.type) === constants.MENU_OPTION_TYPES.SEPARATOR;
-const isOption = el => (el === null || el === void 0 ? void 0 : el.type) === constants.MENU_OPTION_TYPES.OPTION;
+const isSeparator = el => el?.type === constants.MENU_OPTION_TYPES.SEPARATOR;
+const isOption = el => el?.type === constants.MENU_OPTION_TYPES.OPTION;
 
 exports.isOption = isOption;
 exports.isSeparator = isSeparator;