@elliemae/ds-controlled-form 2.4.2-rc.12 → 2.4.2-rc.15

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

@@ -2,66 +2,98 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var dsSystem = require('@elliemae/ds-system');
 var dsGrid = require('@elliemae/ds-grid');
 var theming = require('../../theming.js');
 
-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, _templateObject6, _templateObject7, _templateObject8;
-const normalBorder = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), _ref => {
+const normalBorder = dsSystem.css`
+  border: 1px solid ${_ref => {
   let {
     hasError,
     theme
   } = _ref;
   return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
-});
-const focusBorder = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  outline: 2px solid ", ";\n  outline-offset: -2px;\n"])), _ref2 => {
+}};
+`;
+const focusBorder = dsSystem.css`
+  outline: 2px solid ${_ref2 => {
   let {
     theme
   } = _ref2;
   return theme.colors.brand[700];
-});
-const hoverBorder = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), _ref3 => {
+}};
+  outline-offset: -2px;
+`;
+const hoverBorder = dsSystem.css`
+  border: 1px solid ${_ref3 => {
   let {
     theme
   } = _ref3;
   return theme.colors.brand[700];
-});
+}};
+`;
 const StyledControlsWrapper = dsSystem.styled(dsGrid.Grid, {
   name: theming.DSComboBoxName,
   slot: theming.DSComboboxSlots.INPUT_WRAPPER
-})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  background: ", ";\n  position: relative;\n  border-radius: 2px;\n  min-width: ", ";\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  padding-left: 8px;\n  margin: ", ";\n  ", "\n  &:hover {\n    ", "\n  }\n  &:focus-within {\n    ", "\n  }\n"])), _ref4 => {
+})`
+  background: ${_ref4 => {
   let {
     disabled,
     theme
   } = _ref4;
   return disabled ? theme.colors.neutral['080'] : '#ffffff';
-}, _ref5 => {
+}};
+  position: relative;
+  border-radius: 2px;
+  min-width: ${_ref5 => {
   let {
     minWidth,
     inline
   } = _ref5;
-  return inline || !minWidth ? '' : "".concat(minWidth, "px");
-}, _ref6 => {
+  return inline || !minWidth ? '' : `${minWidth}px`;
+}};
+  align-items: center;
+  align-content: center;
+  height: 28px;
+  padding-left: 8px;
+  margin: ${_ref6 => {
   let {
     inline
   } = _ref6;
   return inline ? '10px 16px' : '';
-}, normalBorder, hoverBorder, focusBorder);
-const StyledSelection = dsSystem.styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  font-size: 13px;\n  margin-right: 3px;\n  display: flex;\n"])));
-const StyledHeaderActionsWrapper = dsSystem.styled(dsGrid.Grid)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n"])));
-const StyleDropdownIndicator = dsSystem.styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"]([""])));
-const StyleHeaderActionsSeparator = dsSystem.styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n  align-self: stretch;\n  margin: 4px 0px;\n  width: 1px;\n  background-color: ", ";\n"])), _ref7 => {
+}};
+  ${normalBorder}
+  &:hover {
+    ${hoverBorder}
+  }
+  &:focus-within {
+    ${focusBorder}
+  }
+`;
+const StyledSelection = dsSystem.styled.div`
+  font-size: 13px;
+  margin-right: 3px;
+  display: flex;
+`;
+const StyledHeaderActionsWrapper = dsSystem.styled(dsGrid.Grid)`
+  height: 100%;
+  .em-ds-button--text:focus::after {
+    border: none;
+  }
+`;
+const StyleDropdownIndicator = dsSystem.styled.div``;
+const StyleHeaderActionsSeparator = dsSystem.styled.span`
+  align-self: stretch;
+  margin: 4px 0px;
+  width: 1px;
+  background-color: ${_ref7 => {
   let {
     theme,
     disabled
   } = _ref7;
   return disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'];
-});
+}};
+`;
 
 exports.StyleDropdownIndicator = StyleDropdownIndicator;
 exports.StyleHeaderActionsSeparator = StyleHeaderActionsSeparator;

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

@@ -21,30 +21,22 @@ const useOnPillsNavigation = () => {
   const onKeyDownPills = React.useCallback(e => {
     if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') && inputValue === '') {
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        var _innerRef$current;
-
-        (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+        innerRef.current?.focus();
         setMenuState(true, 'open', e);
         return;
       }
 
       if (e.key === 'ArrowLeft') {
-        var _selectedOptionsRef$c;
-
-        const removablePills = (_selectedOptionsRef$c = selectedOptionsRef.current) === null || _selectedOptionsRef$c === void 0 ? void 0 : _selectedOptionsRef$c.querySelectorAll(REMOVABLE_PILL_SELECTOR);
+        const removablePills = selectedOptionsRef.current?.querySelectorAll(REMOVABLE_PILL_SELECTOR);
 
         if (hasFocus && removablePills) {
-          var _removablePills;
-
-          (_removablePills = removablePills[removablePills.length - 1]) === null || _removablePills === void 0 ? void 0 : _removablePills.focus();
+          removablePills[removablePills.length - 1]?.focus();
         }
       }
 
       if (e.key === 'ArrowRight') {
-        var _innerRef$current2;
-
         e.preventDefault();
-        (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
+        innerRef.current?.focus();
       }
     }
   }, [inputValue, innerRef, setMenuState, selectedOptionsRef, hasFocus]);

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

@@ -2,27 +2,57 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var dsSystem = require('@elliemae/ds-system');
 var theming = require('../../theming.js');
 
-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;
 const StyledInput = dsSystem.styled('input', {
   name: theming.DSComboBoxName,
   slot: theming.DSComboboxSlots.INPUT
-})(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  font-size: 13px;\n  line-height: 13px;\n  border: none;\n  padding: 0;\n  outline: none;\n  color: ", ";\n  &:focus {\n    outline: none;\n  }\n  ", "\n  &::placeholder {\n    color: transparent;\n  }\n"])), props => props.theme.colors.neutral[700], _ref => {
+})`
+  font-size: 13px;
+  line-height: 13px;
+  border: none;
+  padding: 0;
+  outline: none;
+  color: ${props => props.theme.colors.neutral[700]};
+  &:focus {
+    outline: none;
+  }
+  ${_ref => {
   let {
     withoutCaret
   } = _ref;
   return withoutCaret && 'caret-color: transparent;';
-});
-const StyledInputPlaceHolder = dsSystem.styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  font-style: italic;\n  color: ", ";\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n  height: 28px;\n  font-size: 13px;\n  & span::after {\n    content: '';\n    padding: 1px;\n  }\n"])), props => props.theme.colors.neutral[500]);
-const StyledInputWidthReference = dsSystem.styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n"])));
-const StyledInputWrapper = dsSystem.styled('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  position: relative;\n  align-items: center;\n  display: flex;\n"])));
+}}
+  &::placeholder {
+    color: transparent;
+  }
+`;
+const StyledInputPlaceHolder = dsSystem.styled.div`
+  font-style: italic;
+  color: ${props => props.theme.colors.neutral[500]};
+  position: absolute;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  user-select: none;
+  height: 28px;
+  font-size: 13px;
+  & span::after {
+    content: '';
+    padding: 1px;
+  }
+`;
+const StyledInputWidthReference = dsSystem.styled.span`
+  visibility: hidden;
+  position: absolute;
+  top: -9999px;
+`;
+const StyledInputWrapper = dsSystem.styled('div')`
+  position: relative;
+  align-items: center;
+  display: flex;
+`;
 
 exports.StyledInput = StyledInput;
 exports.StyledInputPlaceHolder = StyledInputPlaceHolder;

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

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/es.string.replace.js');
 var React = require('react');
 var useMaskedOnChange = require('./useMaskedOnChange.js');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
@@ -28,9 +26,7 @@ const useControlsInput = () => {
   const showPlaceholder = !inputValue && listHelper.isSelectedValueEmpty(selectedValues) ? placeholder : null;
   const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
   React.useEffect(() => {
-    var _spanReference$curren;
-
-    setWidth((_spanReference$curren = spanReference.current) !== null && _spanReference$curren !== void 0 && _spanReference$curren.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
+    setWidth(spanReference.current?.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
 

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

@@ -48,7 +48,7 @@ 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) && !menuState) {
       setMenuState(true);
@@ -74,7 +74,7 @@ const useKeyboardNavigation = () => {
     // =============================================================================
 
 
-    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('');
@@ -90,7 +90,7 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if (focusOptionIdx !== '' && (menuState || 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('');
 
@@ -163,9 +163,7 @@ const useKeyboardNavigation = () => {
     }
 
     if (e.key === 'Tab' && !inline && menuState) {
-      var _selectAllCheckboxRef;
-
-      const element = (_selectAllCheckboxRef = selectAllCheckboxRef.current) !== null && _selectAllCheckboxRef !== void 0 ? _selectAllCheckboxRef : toggleSelectionButtonRef.current;
+      const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;
 
       if (element) {
         e.preventDefault();

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

@@ -37,7 +37,7 @@ const useMaskedOnChange = () => {
     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/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');
@@ -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;
-
       setMenuState(false, 'close', e);
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+      innerRef.current?.focus();
     }
   }, [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

@@ -64,14 +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"
     }, void 0, noOptionsMessage))]
-  }, width), [wrapperListRef, inline, preventLoseInputFocus, width, menuMinWidth, withHeader, filteredOptions.length, onCreate, menuMaxHeight, listRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize, ItemRenderer, 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,46 +2,62 @@
 
 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, _templateObject6;
-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  overflow-x: hidden;\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 StyledCreatableValue = dsSystem.styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  word-break: break-all;\n"])));
-const StyledNoResultsWrapper = dsSystem.styled.div(_templateObject6 || (_templateObject6 = _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;

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

@@ -91,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
       };
 
@@ -135,7 +135,7 @@ const useItemRenderer = () => {
               cols: ['min-content', 'auto'],
               gutter: "xxs",
               alignItems: "center"
-            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx__default["default"](styled.StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx__default["default"](styled.StyledCreatableValue, {}, 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: 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/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;