@elliemae/ds-controlled-form 2.4.2-rc.9 → 2.4.3-rc.1

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

@@ -5,7 +5,7 @@ import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import { useContext, useCallback } from 'react';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { getOptions, getSuggestedValueOnChange, findInCircularList, getLastValueSelected } from '../../utils/listHelper.js';
+import { getOptions, scrollIfNeeded, getSuggestedValueOnChange, findInCircularList, getLastValueSelected } from '../../utils/listHelper.js';
 import { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';
 
 const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) && !opt.disabled;
@@ -26,12 +26,12 @@ const useKeyboardNavigation = () => {
       withoutPortal
     },
     inputValue,
-    showPopover,
+    menuState,
     focusOptionIdx,
     listRef,
     selectAllCheckboxRef,
     toggleSelectionButtonRef,
-    setShowPopover,
+    setMenuState,
     setInputValue,
     scrollOptionIntoView,
     setFocusOptionIdx
@@ -44,17 +44,12 @@ const useKeyboardNavigation = () => {
     // =============================================================================
     // CUSTOM KEYS
     // =============================================================================
-    if (onKeyDown && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);
+    if (onKeyDown && currentItem?.type === 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) scrollIfNeeded(listRef.current);
       });
     } // =============================================================================
     // ESCAPE
@@ -69,13 +64,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) === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
+    if (e.key === 'Enter' && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
       onCreate(inputValue); // blank active item to force search last one
 
       setFocusOptionIdx('');
@@ -91,12 +86,12 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if (focusOptionIdx !== '' && (showPopover || inline) && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
+      if (focusOptionIdx !== '' && (menuState || inline) && currentItem?.type === MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
         if (onFilter) onFilter(allOptions, '');
         setInputValue('');
 
         if (!multiple) {
-          setShowPopover(false);
+          setMenuState(false, 'selectOption', e);
         }
 
         onChange(getSuggestedValueOnChange(currentItem, selectedValues), currentItem, e);
@@ -104,7 +99,7 @@ const useKeyboardNavigation = () => {
     }
 
     if (e.key === 'Enter' && e.altKey) {
-      setShowPopover(false);
+      setMenuState(false, 'selectOption', e);
     }
 
     if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {
@@ -118,7 +113,7 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if ((showPopover || inline) && selectableOptions.length) {
+      if ((menuState || inline) && selectableOptions.length) {
         const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);
 
         if (nextItemIndexIndex > -1) {
@@ -135,12 +130,12 @@ const useKeyboardNavigation = () => {
       const prevItemIndex = 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 = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);
           setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);
           setTimeout(() => {
@@ -163,22 +158,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/esm/combobox/parts/controls-input/useMaskedOnChange.js

@@ -9,31 +9,31 @@ const useMaskedOnChange = () => {
       onFilter,
       allOptions
     },
-    setShowPopover,
+    setMenuState,
     setInputValue,
     setShowSelectedOptions
   } = useContext(ComboBoxContext); // default onchange when no mask provided
 
   const handleOnChange = useCallback(e => {
     setShowSelectedOptions(false);
-    setShowPopover(true);
+    setMenuState(true, 'filter', e);
 
     if (onFilter) {
       onFilter(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 = useCallback((_, mask) => {
+  const handleOnChangeMask = useCallback((e, mask) => {
     setShowSelectedOptions(false);
-    setShowPopover(true);
+    setMenuState(true, 'filter', e);
     if (mask && onFilter) onFilter(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;
 };
 
 export { useMaskedOnChange };

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

@@ -12,14 +12,14 @@ const DropdownIndicator = () => {
     props: {
       disabled
     },
-    showPopover
+    menuState
   } = useContext(ComboBoxContext);
   return /*#__PURE__*/_jsx(StyledDropDownButton, {
     "data-testid": 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/esm/combobox/parts/header-list/HeaderList.js

@@ -51,7 +51,7 @@ const HeaderList = () => {
     size: BUTTON_SIZES.S,
     "data-testid": ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
     innerRef: toggleSelectionButtonRef
-  }, void 0, !showSelectedOptions ? "SHOW SELECTED [".concat(multiSelectedValues.length, "]") : 'SHOW ALL') : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx(StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))));
+  }, void 0, !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : 'SHOW ALL') : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx(StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))));
 };
 
 export { HeaderList };

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

@@ -1,12 +1,45 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const StyledHeaderListWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = styled(DSButtonV2)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-const StyledNoOptionsSelected = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n"])), props => props.theme.space.xxs);
-const StyledSelectAllCheckbox = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+/* eslint-disable max-len */
+const StyledHeaderListWrapper = 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;
+
+  & button {
+    font-size: 13px;
+  }
+`;
+const StyledButtonSelection = styled(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 = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const StyledNoOptionsSelected = styled.div`
+  padding: 0 ${props => props.theme.space.xxs};
+`;
+const StyledSelectAllCheckbox = styled.div`
+  display: flex;
+  align-items: center;
+`;
 
 export { StyledButtonSelection, StyledHeaderListWrapper, StyledNoOptionsSelected, StyledSelectAllCheckbox, StyledSelectedItems };

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

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
@@ -16,7 +15,7 @@ const useHeaderListHandlers = () => {
     },
     showSelectedOptions,
     setShowSelectedOptions,
-    setShowPopover
+    setMenuState
   } = useContext(ComboBoxContext);
   const multiSelectedValues = selectedValues;
   const selectableOptions = getSelectableOptions(filteredOptions);
@@ -25,7 +24,7 @@ const useHeaderListHandlers = () => {
       return true;
     }
 
-    if ((multiSelectedValues === null || multiSelectedValues === void 0 ? void 0 : multiSelectedValues.length) === 0) {
+    if (multiSelectedValues?.length === 0) {
       return false;
     }
 
@@ -55,27 +54,21 @@ const useHeaderListHandlers = () => {
 
   const handleKeyDown = 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 = 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 = 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]);
   useEffect(() => {

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

@@ -8,11 +8,14 @@ import { HeaderList } from '../header-list/HeaderList.js';
 import { useItemRenderer } from './useItemRenderer.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _HeaderList, _StyledNoResultsWrapp;
+var _HeaderList;
 const MenuList = () => {
+  var _StyledNoResultsWrapp;
+
   const {
     props: {
       menuMinWidth,
+      noOptionsMessage,
       menuMaxHeight,
       onCreate,
       inline,
@@ -53,15 +56,14 @@ const MenuList = () => {
         role: "listbox",
         "data-testid": 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(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]);
 };
 
 export { MenuList };

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

@@ -1,37 +1,58 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const StyledListWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: ", ";\n  width: ", ";\n  background-color: #ffffff;\n  max-height: ", ";\n  z-index: 100;\n"])), _ref => {
+const StyledListWrapper = 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 = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: 0;\n  background-color: #ffffff;\n"])));
-const StyledVirtualListWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  margin-top: ", ";\n  max-height: ", ";\n"])), _ref4 => {
+  return `${maxHeight}px`;
+}};
+  z-index: 100;
+`;
+const StyledList = styled.ul`
+  position: relative;
+  padding: 0;
+  background-color: #ffffff;
+  overflow-x: hidden;
+`;
+const StyledVirtualListWrapper = 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 = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-style: italic;\n"])));
-const StyledNoResultsWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 16px;\n"])));
+  return maxHeight ? `${maxHeight}px` : '300px';
+}};
+`;
+const StyledCreatableLabel = styled.span`
+  font-weight: bold;
+  font-style: italic;
+`;
+const StyledCreatableValue = styled.span`
+  word-break: break-all;
+`;
+const StyledNoResultsWrapper = styled.div`
+  padding: 16px;
+`;
 
-export { StyledCreatableLabel, StyledList, StyledListWrapper, StyledNoResultsWrapper, StyledVirtualListWrapper };
+export { StyledCreatableLabel, StyledCreatableValue, StyledList, StyledListWrapper, StyledNoResultsWrapper, StyledVirtualListWrapper };

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

@@ -11,10 +11,10 @@ import { useContext, useCallback, useMemo } from 'react';
 import { Grid } from '@elliemae/ds-grid';
 import { Section, Separator, SingleMenuItem, MultiMenuItem } from '@elliemae/ds-form';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { StyledCreatableLabel } from './styled.js';
+import { StyledCreatableLabel, StyledCreatableValue } from './styled.js';
 import { getSuggestedValueOnChange, isSelected } from '../../utils/listHelper.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
-import { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES } from '../../constants.js';
+import { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 var _StyledCreatableLabel;
@@ -32,7 +32,7 @@ const useItemRenderer = () => {
       onFilter,
       allOptions
     },
-    setShowPopover,
+    setMenuState,
     inputValue,
     focusOptionIdx,
     setInputValue,
@@ -40,20 +40,21 @@ const useItemRenderer = () => {
   } = useContext(ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
   const CBItem = multiple ? MultiMenuItem : SingleMenuItem;
+  const handleOnCreateClick = useCallback(() => {
+    if (inputValue && onCreate) {
+      onCreate(inputValue);
+      setInputValue('');
+      if (onFilter) onFilter(allOptions, inputValue);
+    }
+  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);
   const handleClick = useCallback((option, e) => {
-    if (option.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate && onFilter) {
-      if (inputValue) {
-        onCreate(inputValue);
-        setInputValue('');
-        onFilter(allOptions, inputValue);
-      }
-    } else if (option.type === MENU_OPTION_TYPES.OPTION) {
+    if (option.type === MENU_OPTION_TYPES.OPTION) {
       if (!option.disabled) {
         if (onFilter) onFilter(allOptions, inputValue);
         setInputValue('');
 
         if (!multiple) {
-          setShowPopover(false);
+          setMenuState(false, 'selectOption', e);
         }
 
         onChange(getSuggestedValueOnChange(option, selectedValues), option, e);
@@ -63,7 +64,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 = useCallback(e => {
     e.preventDefault();
@@ -81,9 +82,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
       };
 
@@ -106,8 +107,8 @@ const useItemRenderer = () => {
           onClick: e => handleClick(option, e),
           onMouseDown: handleOnMouseDown,
           isActive: option.dsId === focusOptionIdx,
-          isSelected: isSelected(selectedValues, option) //tabIndex={-1}
-
+          isSelected: isSelected(selectedValues, option),
+          tabIndex: -1
         }));
       }
 
@@ -121,14 +122,14 @@ const useItemRenderer = () => {
               label
             } = _ref;
             return /*#__PURE__*/_jsx(Grid, {
+              p: "8px",
               cols: ['min-content', 'auto'],
-              height: "16px",
               gutter: "xxs",
               alignItems: "center"
-            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx(StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx("span", {}, void 0, "\"".concat(label, "\"")));
+            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx(StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx(StyledCreatableValue, {}, void 0, `"${label}"`));
           },
           label: option.label,
-          onClick: e => handleClick(option, e)
+          onClick: handleOnCreateClick
         }));
       }
 

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

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

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

@@ -23,12 +23,10 @@ const RemovableSelectedValuePill = props => {
     type: disabled ? 'value' : 'removable',
     tabIndex: -1,
     onRemove: e => {
-      var _innerRef$current;
-
       // preventing the menu to be opened
       e.stopPropagation();
       onChange(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/esm/combobox/parts/multi-selected-values-container/useGroupPills.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
@@ -49,7 +48,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/esm/combobox/parts/styled.js

@@ -1,7 +1,10 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
 
-var _templateObject;
-const StyledA11ySelectedValues = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n"])));
+const StyledA11ySelectedValues = styled.span`
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+`;
 
 export { StyledA11ySelectedValues };

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

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

package/esm/combobox/sharedTypes.js

@@ -1,6 +1,6 @@
 import { MENU_OPTION_TYPES } from './constants.js';
 
-const isSeparator = el => (el === null || el === void 0 ? void 0 : el.type) === MENU_OPTION_TYPES.SEPARATOR;
-const isOption = el => (el === null || el === void 0 ? void 0 : el.type) === MENU_OPTION_TYPES.OPTION;
+const isSeparator = el => el?.type === MENU_OPTION_TYPES.SEPARATOR;
+const isOption = el => el?.type === MENU_OPTION_TYPES.OPTION;
 
 export { isOption, isSeparator };