@elliemae/ds-form 2.0.0-rc.6 → 2.0.0

package/cjs/InputGroup/AddonWrapper.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
 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');
@@ -14,8 +14,8 @@ var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -26,8 +26,7 @@ const InputAddon = dsClassnames.aggregatedClasses('span')(blockName, 'addon');
 class AddonWrapper extends React.Component {
   constructor() {
     super(...arguments);
-
-    _defineProperty__default["default"](this, "state", {});
+    this.state = {};
   }
 
   render() {
@@ -47,7 +46,6 @@ class AddonWrapper extends React.Component {
   }
 
 }
-
-_defineProperty__default["default"](AddonWrapper, "defaultProps", {});
+AddonWrapper.defaultProps = {};
 
 module.exports = AddonWrapper;

package/cjs/InputMask/DSInputMaskDeprecated.js

@@ -96,12 +96,10 @@ class DSInputMaskDeprecated extends React.Component {
 
     super(props);
     _this = this;
+    this.lastkey = null;
+    this.lastkeycode = null;
 
-    _defineProperty__default["default"](this, "lastkey", null);
-
-    _defineProperty__default["default"](this, "lastkeycode", null);
-
-    _defineProperty__default["default"](this, "conformValue", function (rawValueOrEvent, currentCaretPosition) {
+    this.conformValue = function (rawValueOrEvent, currentCaretPosition) {
       let {
         skipCaretPositioning = false,
         skipOnChangeCallback = false
@@ -213,9 +211,9 @@ class DSInputMaskDeprecated extends React.Component {
         if (!skipOnChangeCallback) onChange(event);
         if (!skipCaretPositioning) setTimeout(() => setCaretPosition(_this.inputref, caretPos));
       });
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleOnChange", e => {
+    this.handleOnChange = e => {
       var _e$target;
 
       const rawValue = (e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '';
@@ -224,9 +222,9 @@ class DSInputMaskDeprecated extends React.Component {
       } = e.target;
       const currentCaretPosition = selectionEnd;
       this.conformValue(rawValue, currentCaretPosition);
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleKeyDown", e => {
+    this.handleKeyDown = e => {
       e.stopPropagation();
       const {
         onKeyDown
@@ -234,9 +232,9 @@ class DSInputMaskDeprecated extends React.Component {
       this.lastkey = e.key;
       this.lastkeycode = e.keyCode;
       onKeyDown(e);
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleBlur", e => {
+    this.handleBlur = e => {
       const {
         onBlur
       } = this.props;
@@ -244,7 +242,7 @@ class DSInputMaskDeprecated extends React.Component {
         focus: false
       });
       onBlur(e);
-    });
+    };
 
     this.inputref = /*#__PURE__*/React__default["default"].createRef();
     this.state = {

package/cjs/SearchBox/NavSearchBox.js

@@ -133,7 +133,9 @@ const NavSearchBox = props => {
     totalResults,
     value,
     onBlur,
-    placeholder
+    placeholder,
+    autoFocus,
+    innerRef
   } = props;
 
   const handleChange = e => {
@@ -164,6 +166,8 @@ const NavSearchBox = props => {
     onKeyDown: handleKeyDown,
     placeholder: placeholder,
     value: value,
+    autoFocus: autoFocus,
+    innerRef: innerRef,
     rightComponent: /*#__PURE__*/_jsx__default["default"](ToolbarRightAddons, {
       showClear: !!value,
       onNext: onNext,

package/cjs/SearchBox/withSearchable.js

@@ -5,16 +5,16 @@ require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
 var dsUtilities = require('@elliemae/ds-utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const _excluded = ["containerProps"];
@@ -27,9 +27,7 @@ const withSearchable = WrappedComponent => {
   class Searchable extends React.Component {
     constructor(props) {
       super(props);
-
-      _defineProperty__default["default"](this, "debouncedSearch", dsUtilities.debounce(this.handleSearch, 200));
-
+      this.debouncedSearch = dsUtilities.debounce(this.handleSearch, 200);
       this.state = {
         value: props.value
       };

package/cjs/Toggle/DSToggleImpl.js

@@ -24,7 +24,7 @@ class DSToggleImpl extends React.Component {
   constructor(props) {
     super(props);
 
-    _defineProperty__default["default"](this, "onDragStart", clientX => {
+    this.onDragStart = clientX => {
       const {
         startPoint,
         checked,
@@ -44,9 +44,9 @@ class DSToggleImpl extends React.Component {
         drag
       }); // else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position
       else this.setDragOnChange(checked); // set initial position
-    });
+    };
 
-    _defineProperty__default["default"](this, "onDragStop", e => {
+    this.onDragStop = e => {
       const {
         checked
       } = this.state; // const { checked: checkedProp, } = this.props
@@ -56,25 +56,25 @@ class DSToggleImpl extends React.Component {
         this.setState(toggleHelper.cleanDrag); // } else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position
       } else this.setDragOnChange(checked); // set initial position
 
-    });
+    };
 
-    _defineProperty__default["default"](this, "onBlur", e => {
+    this.onBlur = e => {
       const {
         onBlur,
         id
       } = this.props;
       if (onBlur) onBlur(e, id);
-    });
+    };
 
-    _defineProperty__default["default"](this, "onFocus", e => {
+    this.onFocus = e => {
       const {
         onFocus,
         id
       } = this.props;
       if (onFocus) onFocus(e, id);
-    });
+    };
 
-    _defineProperty__default["default"](this, "onChange", e => {
+    this.onChange = e => {
       const {
         checked
       } = this.state;
@@ -97,26 +97,26 @@ class DSToggleImpl extends React.Component {
       onChange(e, id); // this.setDragOnChange(checkedProp != null ? checkedProp : newCheck) // set new position
 
       this.setDragOnChange(newCheck); // set new position
-    });
+    };
 
-    _defineProperty__default["default"](this, "onMouseEnter", () => {
+    this.onMouseEnter = () => {
       this.setState({
         inside: true
       });
-    });
+    };
 
-    _defineProperty__default["default"](this, "onMouseLeave", () => {
+    this.onMouseLeave = () => {
       this.setState({
         inside: false
       });
-    });
+    };
 
-    _defineProperty__default["default"](this, "onMouseMove", event => {
+    this.onMouseMove = event => {
       event.preventDefault();
       this.onDragStart(event.clientX);
-    });
+    };
 
-    _defineProperty__default["default"](this, "onMouseDown", event => {
+    this.onMouseDown = event => {
       this.onDragStart(event.clientX);
       this.setState({
         startPoint: event.clientX,
@@ -124,36 +124,36 @@ class DSToggleImpl extends React.Component {
       });
       window.addEventListener('mousemove', this.onMouseMove);
       window.addEventListener('mouseup', this.onMouseUp);
-    });
+    };
 
-    _defineProperty__default["default"](this, "onMouseUp", event => {
+    this.onMouseUp = event => {
       this.onDragStop(event);
       window.removeEventListener('mousemove', this.onMouseMove);
       window.removeEventListener('mouseup', this.onMouseUp);
-    });
+    };
 
-    _defineProperty__default["default"](this, "onTouchCancel", () => {
+    this.onTouchCancel = () => {
       this.setState({
         inside: false
       });
-    });
+    };
 
-    _defineProperty__default["default"](this, "onTouchEnd", event => {
+    this.onTouchEnd = event => {
       event.preventDefault();
       this.onDragStop(event);
-    });
+    };
 
-    _defineProperty__default["default"](this, "onTouchMove", event => {
+    this.onTouchMove = event => {
       this.onDragStart(event.touches[0].clientX);
-    });
+    };
 
-    _defineProperty__default["default"](this, "onTouchStart", event => {
+    this.onTouchStart = event => {
       this.onDragStart(event.touches[0].clientX);
       this.setState({
         startPoint: event.touches[0].clientX,
         isDragging: true
       });
-    });
+    };
 
     this.state = {
       checked: props.checked || false,

package/esm/ComboBox/v1/DSComboBox.js

@@ -2,9 +2,9 @@ import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
@@ -57,36 +57,32 @@ const getValues = (option, isMulti, valueProperty) => {
 class DSComboBox extends React.Component {
   constructor(props) {
     super(props);
-
-    _defineProperty(this, "forceFocus", false);
-
-    _defineProperty(this, "isHover", undefined);
-
-    _defineProperty(this, "handleHover", debounce(value => {
+    this.forceFocus = false;
+    this.isHover = undefined;
+    this.handleHover = debounce(value => {
       if (this.state.isHover === this.isHover) return;
       if (!this.unmount) this.setState({
         isHover: value
       });
-    }, 0));
-
-    _defineProperty(this, "state", {
+    }, 0);
+    this.state = {
       focus: null,
       isHover: undefined
-    });
+    };
 
-    _defineProperty(this, "handleOutsideScroll", () => {
+    this.handleOutsideScroll = () => {
       if (this.isHover !== true && !this.unmount) {
         this.isHover = false;
         this.handleHover(false);
       }
-    });
+    };
 
-    _defineProperty(this, "handleHoverRef", value => {
+    this.handleHoverRef = value => {
       this.isHover = value;
       this.handleHover(value);
-    });
+    };
 
-    _defineProperty(this, "onKeyDownClear", e => {
+    this.onKeyDownClear = e => {
       // if (e.key === 'ArrowRight') {
       //   this.arrow.focus()
       // } else if (e.key === 'ArrowLeft') {
@@ -95,9 +91,9 @@ class DSComboBox extends React.Component {
       if (e.keyCode === 32 || e.keyCode === 13) {
         this.select.focus();
       }
-    });
+    };
 
-    _defineProperty(this, "handleKeyDown", e => {
+    this.handleKeyDown = e => {
       // if (e.key === 'ArrowRight') e.preventDefault()
       // if (e.target.type === 'text' && e.key === 'ArrowRight') {
       //   if (this.clear && this.clear.focus) {
@@ -117,7 +113,7 @@ class DSComboBox extends React.Component {
         if (!value && e.key === ' ') e.preventDefault();
         this.props.onKeyDown(e);
       };
-    });
+    };
 
     this.clear = /*#__PURE__*/React.createRef();
     this.arrow = /*#__PURE__*/React.createRef();
@@ -328,9 +324,9 @@ class DSComboBox extends React.Component {
 
 }
 
-_defineProperty(DSComboBox, "defaultProps", {
+DSComboBox.defaultProps = {
   showAllOption: false
-});
+};
 var DSComboBox$1 = withSelectStringValueConverter(withContentRect('bounds')(DSComboBox));
 
 export { DSComboBox$1 as default };

package/esm/ComboBox/v1/withSelectStringValueConverter.js

@@ -44,8 +44,7 @@ const withSelectStringValueConverter = WrappedComponent => {
   return _temp = _class = class extends Component {
     constructor() {
       super(...arguments);
-
-      _defineProperty(this, "state", {});
+      this.state = {};
     }
 
     static getDerivedStateFromProps(nextProps, prevState) {
@@ -68,10 +67,10 @@ const withSelectStringValueConverter = WrappedComponent => {
       }));
     }
 
-  }, _defineProperty(_class, "defaultProps", {
+  }, _class.defaultProps = {
     valueProperty: 'value',
     labelProperty: 'label'
-  }), _temp;
+  }, _temp;
 };
 
 export { withSelectStringValueConverter as default };

package/esm/ComboBox/v3/ComboBoxCTX.js

@@ -1,8 +1,7 @@
 import { createContext, createRef } from 'react';
+import { noop } from 'lodash';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-
 const defaultProps = {
   placeholder: '',
   options: [],
@@ -12,9 +11,9 @@ const defaultProps = {
   autoFocus: false,
   startPlacementPreference: 'bottom-start',
   placementOrderPreference: ['bottom-start', 'bottom-end'],
-  onClearAll: undefined,
-  onSelectAll: undefined,
-  onCreate: undefined,
+  onClearAll: noop,
+  onSelectAll: noop,
+  onCreate: noop,
   withToggle: false,
   onChange: noop,
   onKeyDown: noop,
@@ -26,7 +25,7 @@ const defaultContext = {
   showPopover: false,
   setShowPopover: noop,
   scrollOptionIntoView: noop,
-  referenceElement: undefined,
+  referenceElement: null,
   hasFocus: false,
   setHasFocus: noop,
   pillGroupRef: /*#__PURE__*/createRef(),

package/esm/ComboBox/v3/config/useComboBox.js

@@ -16,16 +16,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const useComboBox = props => {
   const [showPopover, setShowPopover] = useState(false);
-  const [referenceElement, setReferenceElement] = useState();
+  const [referenceElement, setReferenceElement] = useState(null);
   const [showSelectedValue, setShowSelectedValue] = useState(false);
   const [showSelectedOptions, setShowSelectedOptions] = useState(false);
   const [hasFocus, setHasFocus] = useState(false);
   const [focusOptionIdx, setCurrentOption] = useState('');
-  const inputRef = useRef();
-  const listRef = useRef();
-  const wrapperListRef = useRef();
-  const selectedOptionsRef = useRef();
-  const controlsWrapperRef = useRef();
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const wrapperListRef = useRef(null);
+  const selectedOptionsRef = useRef(null);
+  const controlsWrapperRef = useRef(null);
   const pillGroupRef = useRef(null);
   const propsWithDefaults = useGetComboBoxWithDefaultsProps(props);
   const {

package/esm/ComboBox/v3/parts/container/Container.js

@@ -24,7 +24,7 @@ const Container = () => {
   } = useContext(ComboBoxContext);
   const handleCloseMenu = useCallback(() => {
     setShowPopover(false);
-    inputRef.current.blur();
+    if (inputRef.current) inputRef.current.blur();
   }, [inputRef, setShowPopover]);
   const handleMouseDown = useCallback(e => {
     e.preventDefault();

package/esm/ComboBox/v3/parts/controls-input/ControlsInput.js

@@ -17,9 +17,11 @@ const ControlsInput = () => {
     focusOptionIdx,
     inputRef
   } = useContext(ComboBoxContext);
-  const onInputKeyDown = useKeyboardNavigation();
   const {
-    span,
+    onInputKeyDown
+  } = useKeyboardNavigation();
+  const {
+    spanReference,
     width,
     spanReferenceText,
     showPlaceholder,
@@ -28,7 +30,7 @@ const ControlsInput = () => {
     handleOnFocus
   } = useControlsInput();
   return /*#__PURE__*/_jsx(StyledInputWrapper, {}, void 0, /*#__PURE__*/jsx(StyledInputWidthReference, {
-    ref: span,
+    ref: spanReference,
     children: spanReferenceText
   }), /*#__PURE__*/_jsx(StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
     value: showPlaceholder

package/esm/ComboBox/v3/parts/controls-input/useControlsInput.js

@@ -21,12 +21,12 @@ const useControlsInput = () => {
     setShowSelectedValue,
     setShowSelectedOptions
   } = useContext(ComboBoxContext);
-  const [width, setWidth] = useState();
-  const span = useRef(null);
+  const [width, setWidth] = useState(1);
+  const spanReference = useRef(null);
   useEffect(() => {
-    var _span$current;
+    var _spanReference$curren;
 
-    setWidth(((_span$current = span.current) === null || _span$current === void 0 ? void 0 : _span$current.offsetWidth) || 1);
+    setWidth(((_spanReference$curren = spanReference.current) === null || _spanReference$curren === void 0 ? void 0 : _spanReference$curren.offsetWidth) || 1);
   }, [(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value]);
   useEffect(() => {
     setShowSelectedValue(true);
@@ -35,9 +35,9 @@ const useControlsInput = () => {
 
   const handleOnChange = useCallback(e => {
     setShowSelectedOptions(false);
-    if (e.target.value) setShowSelectedValue(false);
+    if (e.currentTarget.value) setShowSelectedValue(false);
     setShowPopover(true);
-    onFilter(e.target.value);
+    onFilter(e.currentTarget.value);
   }, [onFilter, setShowPopover, setShowSelectedOptions, setShowSelectedValue]);
   const handleOnBlur = useCallback(() => {
     setHasFocus(false);
@@ -66,8 +66,8 @@ const useControlsInput = () => {
     showPlaceholder,
     spanReferenceText,
     width,
-    span
-  }), [handleOnFocus, handleOnBlur, handleOnChange, spanReferenceText, showPlaceholder, width, span]);
+    spanReference
+  }), [handleOnFocus, handleOnBlur, handleOnChange, spanReferenceText, showPlaceholder, width, spanReference]);
 };
 
 export { useControlsInput };

package/esm/ComboBox/v3/parts/header-list/HeaderList.js

@@ -24,6 +24,8 @@ const HeaderList = () => {
     showSelectedOptions,
     inputRef
   } = useContext(ComboBoxContext);
+  const isSelectAllSupplied = onSelectAll !== noop;
+  const isClearAllSupplied = onClearAll !== noop;
   const multiSelectedValues = selectedValues;
   const selectableOptions = getSelectableOptions(options);
   const {
@@ -38,7 +40,7 @@ const HeaderList = () => {
   return /*#__PURE__*/_jsx(StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleOnMouseDown
-  }, void 0, /*#__PURE__*/_jsx(StyledSelectedItems, {}, void 0, onSelectAll && /*#__PURE__*/_jsx(StyledButton, {
+  }, void 0, /*#__PURE__*/_jsx(StyledSelectedItems, {}, void 0, isSelectAllSupplied && /*#__PURE__*/_jsx(StyledButton, {
     disabled: (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) !== '' || selectableOptions.length === multiSelectedValues.length,
     "data-testid": ComboboxDataTestid.SELECT_ALL_BUTTON,
     buttonType: "text",
@@ -47,12 +49,12 @@ const HeaderList = () => {
     onMouseDown: handleOnMouseDown,
     onBlur: handleOnBlurSelectAll,
     onClick: handleClickOnSelectAll
-  }), onSelectAll && onClearAll && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
+  }), isSelectAllSupplied && isClearAllSupplied && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
     orientation: "vertical",
     position: "center",
     type: "group-level",
     margin: "none"
-  }))), onClearAll && /*#__PURE__*/_jsx(StyledButton, {
+  }))), isClearAllSupplied && /*#__PURE__*/_jsx(StyledButton, {
     disabled: multiSelectedValues.length === 0,
     tabIndex: 0,
     "data-testid": ComboboxDataTestid.CLEAR_ALL_BUTTON,

package/esm/ComboBox/v3/parts/menu-list/MenuList.js

@@ -1,5 +1,5 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext, useCallback } from 'react';
+import { useContext, useMemo, useCallback } from 'react';
 import { StyledListWrapper, StyledVirtualListWrapper, StyledList } from './styled.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
@@ -33,14 +33,14 @@ const MenuList = () => {
   } = useContext(ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
   const withHeader = !inline && multiple && options.length > 0;
-  const {
-    ItemRenderer
-  } = useItemRenderer();
+  const ItemRenderer = useItemRenderer();
   useMenuList();
   useOnElementResize(controlsWrapperRef);
-  const listWidth = menuMinWidth || "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth);
+  const listWidth = useMemo(() => menuMinWidth || "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth), [menuMinWidth, referenceElement]);
   const handleOnFocus = useCallback(() => {
-    inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.focus();
+    var _inputRef$current;
+
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }, [inputRef]);
   return /*#__PURE__*/jsxs(StyledListWrapper, {
     tabIndex: -1,
@@ -52,11 +52,10 @@ const MenuList = () => {
     role: "listbox",
     children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx(HeaderList, {}))), options.length > 0 ? /*#__PURE__*/jsx(StyledVirtualListWrapper, {
       tabIndex: -1,
+      inline: inline,
       maxHeight: menuMaxHeight,
       ref: listRef,
-      style: {
-        marginTop: withHeader && '28px'
-      },
+      withHeader: withHeader,
       children: /*#__PURE__*/_jsx(StyledList, {
         tabIndex: -1,
         "aria-expanded": showPopover,

package/esm/ComboBox/v3/parts/menu-list/styled.js

@@ -8,12 +8,16 @@ const StyledList = /*#__PURE__*/styled.ul.withConfig({
 })(["position:relative;padding:0;"]);
 const StyledVirtualListWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1uedyf-2"
-})(["overflow-y:auto;max-height:", ";"], _ref => {
+})(["overflow-y:auto;margin-top:", ";max-height:", ";"], _ref => {
   let {
-    maxHeight,
-    inline
+    withHeader
   } = _ref;
-  return inline ? '' : "".concat(!maxHeight ? '400' : maxHeight, "px");
+  return withHeader ? '28px' : '';
+}, _ref2 => {
+  let {
+    maxHeight
+  } = _ref2;
+  return !maxHeight ? '400px' : "".concat(maxHeight, "px");
 });
 
 export { StyledList, StyledListWrapper, StyledVirtualListWrapper };