@elliemae/ds-form 2.0.0-rc.1 → 2.0.0-rc.10

package/cjs/MenuItem/components/SubmenuItem/index.js

@@ -39,7 +39,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 const SubmenuItem = props$1 => {
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, SubmenuItemWithSchema.toTypescript());
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.itemProps);
   const {
     dsId,
     label,

package/cjs/MenuItem/components/styled.js

@@ -2,32 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
 var styledSystem = require('styled-system');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
+var _templateObject, _templateObject2;
+
 const borderOutside = function (color) {
   let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  return styled.css([":after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:", "px solid ", ";pointer-events:none;z-index:7;}"], width, color);
+  return dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  :after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: ", "px solid ", ";\n    pointer-events: none;\n    z-index: 7;\n  }\n"])), width, color);
 };
 
+const disabledOption = () => dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n"])));
+
 const activeBorderCss = props => borderOutside(props.theme.colors.brand[500]);
 
 const focusBorderCss = props => borderOutside(props.theme.colors.brand[700], 2);
 
 const StyledGlobalMenuItemWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
   componentId: "sc-jyoobd-0"
-})(["cursor:pointer;height:32px;padding-left:16px;padding-right:40px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], styledSystem.position, styledSystem.layout, styledSystem.space, props => {
+})(["cursor:pointer;height:32px;padding-left:16px;padding-right:16px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], styledSystem.position, styledSystem.layout, props => {
+  if (props.disabled) return disabledOption();
   if (props.isFocus) return focusBorderCss(props);
   if (props.isActive) return activeBorderCss(props);
   return '';
-}, props => props.isActive ? props.theme.colors.brand[200] : 'white', props => props.theme.colors.brand[200]);
+}, props => props.isActive ? props.theme.colors.brand[200] : 'white', props => !props.disabled && props.theme.colors.brand[200]);
 const StyledMenuItemWrapper = /*#__PURE__*/styled__default["default"](StyledGlobalMenuItemWrapper).withConfig({
   componentId: "sc-jyoobd-1"
-})(["background-color:", " !important;", ";"], props => props.isSelected ? props.theme.colors.brand[200] : 'white', props => props.isSelected && !props.isFocus ? activeBorderCss(props) : '');
+})(["background-color:", " !important;cursor:", ";", ";"], props => props.isSelected ? props.theme.colors.brand[200] : 'white', props => props.disabled && 'not-allowed', props => props.isSelected && !props.isFocus ? activeBorderCss(props) : '');
 const StyledSubmenuItemWrapper = /*#__PURE__*/styled__default["default"](StyledGlobalMenuItemWrapper).withConfig({
   componentId: "sc-jyoobd-2"
 })(["", ";padding-right:0;"], props => props.isSelected || props.isActive ? activeBorderCss(props) : '');

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/ComboBox.js

@@ -10,9 +10,8 @@ import { defaultProps, ComboBoxContext } from './ComboBoxCTX.js';
 var _Container;
 
 const DSComboBox = props => {
-  // if we detect wrong props configuration we throw meaningful errors
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, DSComboBoxWithSchema.toTypescript());
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
   const ctx = useComboBox(props);
   return /*#__PURE__*/_jsx(ComboBoxContext.Provider, {
     value: ctx

package/esm/ComboBox/v3/ComboBoxCTX.js

@@ -1,39 +1,46 @@
 import { createContext, createRef } from 'react';
+import { noop } from 'lodash';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-
 const defaultProps = {
   placeholder: '',
   options: [],
   selectedValues: null,
-  onChange: noop,
-  onClear: noop,
   hasError: false,
   inline: false,
   autoFocus: false,
-  onClearAll: undefined,
-  onSelectAll: undefined,
-  onCreate: undefined,
-  onFilter: noop
+  startPlacementPreference: 'bottom-start',
+  placementOrderPreference: ['bottom-start', 'bottom-end'],
+  onClearAll: noop,
+  onSelectAll: noop,
+  onCreate: noop,
+  withToggle: false,
+  onChange: noop,
+  onKeyDown: noop,
+  onFilter: noop,
+  onMenuOpen: noop
 };
 const defaultContext = {
   props: defaultProps,
   showPopover: false,
   setShowPopover: noop,
   scrollOptionIntoView: noop,
-  referenceElement: undefined,
+  referenceElement: null,
   hasFocus: false,
   setHasFocus: noop,
+  pillGroupRef: /*#__PURE__*/createRef(),
   setReferenceElement: noop,
   inputRef: /*#__PURE__*/createRef(),
   listRef: /*#__PURE__*/createRef(),
+  wrapperListRef: /*#__PURE__*/createRef(),
   controlsWrapperRef: /*#__PURE__*/createRef(),
   selectedOptionsRef: /*#__PURE__*/createRef(),
   showSelectedValue: false,
   setShowSelectedValue: noop,
   focusOptionIdx: '',
-  setCurrentOption: noop
+  setCurrentOption: noop,
+  showSelectedOptions: false,
+  setShowSelectedOptions: noop
 };
 /** Context for cross component communication */
 

package/esm/ComboBox/v3/ComboboxDataTestids.js

@@ -5,7 +5,9 @@ const ComboboxDataTestid = {
   SELECT_ALL_BUTTON: 'combobox-all-btn',
   CLEAR_ALL_BUTTON: 'combobox-clear-btn',
   DROPDOWN: 'combobox-dropdown-btn',
-  OPTION: 'combobox-option'
+  OPTION: 'combobox-option',
+  SHOW_ALL_BUTTON: 'combobox-show-all-btn',
+  SHOW_SELECTED_OPTIONS_BUTTON: 'combobox-selected-options-btn'
 };
 
 export { ComboboxDataTestid };

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

@@ -1,41 +1,75 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { useState, useRef, useCallback, useMemo } from 'react';
 import { useVirtual } from 'react-virtual';
 import { useGetComboBoxWithDefaultsProps } from './useGetPropsWithDefault.js';
 
-const useComboBox = props => {
-  var _inputRef$current;
+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; }
 
+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 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 {
-    options
+    options,
+    selectedValues
   } = propsWithDefaults; // ---------------------------------------------------------------------------
-  // Focusing first option when dropdown opens or input changes
+  // Menu Options with/out selected filter
   // ---------------------------------------------------------------------------
 
-  useEffect(() => {
-    if (showPopover) {
-      for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type)) {
-        setCurrentOption(options[i].dsId);
-        break;
+  const selectedValuesWithSections = useCallback(() => {
+    var _items2;
+
+    const multiSelectedValue = selectedValues;
+    const items = [];
+    options.forEach(option => {
+      const isSelectedValue = multiSelectedValue.find(item => item.dsId === option.dsId);
+
+      if (isSelectedValue) {
+        items.push(option);
       }
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [showPopover, (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value]); // ===========================================================================
+      if (option.type === 'section') {
+        var _items;
+
+        if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === 'section') {
+          items[items.length - 1] = option;
+        } else {
+          items.push(option);
+        }
+      }
+    });
+
+    if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === 'section') {
+      items.pop();
+    }
+
+    return items;
+  }, [options, selectedValues]);
+  const correctOptions = useMemo(() => showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0 ? selectedValuesWithSections() : options, [options, selectedValuesWithSections, selectedValues, showSelectedOptions]); // ===========================================================================
   // Virtualization setup
   // ===========================================================================
 
   const virtualListHelpers = useVirtual({
-    size: propsWithDefaults.options.length,
+    size: correctOptions.length,
     parentRef: listRef,
     overscan: 15,
     paddingStart: 0
@@ -47,10 +81,12 @@ const useComboBox = props => {
     let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       align: 'center'
     };
-    virtualListHelpers.scrollToIndex(propsWithDefaults.options.findIndex(opt => opt.dsId === dsId), opts);
-  }, [propsWithDefaults.options, virtualListHelpers]);
+    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId), opts);
+  }, [correctOptions, virtualListHelpers]);
   const ctx = useMemo(() => ({
-    props: propsWithDefaults,
+    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
+      options: correctOptions
+    }),
     virtualListHelpers,
     showPopover,
     referenceElement,
@@ -61,13 +97,17 @@ const useComboBox = props => {
     selectedOptionsRef,
     controlsWrapperRef,
     hasFocus,
+    pillGroupRef,
+    showSelectedOptions,
+    wrapperListRef,
+    setShowSelectedOptions,
     setHasFocus,
     setCurrentOption,
     scrollOptionIntoView,
     setShowSelectedValue,
     setReferenceElement,
     setShowPopover
-  }), [scrollOptionIntoView, propsWithDefaults, virtualListHelpers, focusOptionIdx, showSelectedValue, showPopover, referenceElement, inputRef, selectedOptionsRef, controlsWrapperRef, hasFocus, listRef]);
+  }), [scrollOptionIntoView, correctOptions, propsWithDefaults, virtualListHelpers, focusOptionIdx, showSelectedValue, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, inputRef, selectedOptionsRef, controlsWrapperRef, hasFocus, listRef]);
   return ctx;
 };
 

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

@@ -5,14 +5,16 @@ import { ComboBoxContext } from '../../ComboBoxCTX.js';
 import { StyledPopperWrapper, StyledContainerInline, StyledContainerWithPopper } from './styled.js';
 import { Controls } from '../controls/Controls.js';
 import { MenuList } from '../menu-list/MenuList.js';
-import { jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment } from 'react/jsx-runtime';
 
 var _Controls, _MenuList, _MenuList2;
 
 const Container = () => {
   const {
     props: {
-      inline
+      inline,
+      startPlacementPreference,
+      placementOrderPreference
     },
     showPopover,
     inputRef,
@@ -22,28 +24,36 @@ 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();
   }, []);
+  const handleOnClickContainer = useCallback(() => {
+    setShowPopover(!showPopover);
+  }, [setShowPopover, showPopover]);
   const StyledContainer = inline ? StyledContainerInline : StyledContainerWithPopper;
-  return /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/jsxs(StyledContainer, {
-    ref: setReferenceElement,
-    children: [_Controls || (_Controls = /*#__PURE__*/_jsx(Controls, {})), inline ? _MenuList || (_MenuList = /*#__PURE__*/_jsx(MenuList, {})) : null]
-  }), !inline ? /*#__PURE__*/_jsx(DSPopperJS, {
-    customOffset: [0, 5],
-    closeContextMenu: handleCloseMenu,
-    referenceElement: referenceElement,
-    showPopover: showPopover,
-    withoutPortal: true,
-    withoutArrow: true,
-    withoutAnimation: true,
-    zIndex: 10
-  }, void 0, /*#__PURE__*/_jsx(StyledPopperWrapper, {
-    tabIndex: -1,
-    onMouseDown: handleMouseDown
-  }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx(MenuList, {})))) : null);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(StyledContainer, {
+      ref: setReferenceElement,
+      onClick: handleOnClickContainer,
+      children: [_Controls || (_Controls = /*#__PURE__*/_jsx(Controls, {})), inline ? _MenuList || (_MenuList = /*#__PURE__*/_jsx(MenuList, {})) : null]
+    }), !inline ? /*#__PURE__*/_jsx(DSPopperJS, {
+      customOffset: [0, 5],
+      closeContextMenu: handleCloseMenu,
+      referenceElement: referenceElement,
+      showPopover: showPopover,
+      startPlacementPreference: startPlacementPreference,
+      placementOrderPreference: placementOrderPreference,
+      withoutPortal: true,
+      withoutArrow: true,
+      withoutAnimation: true,
+      zIndex: 10
+    }, void 0, /*#__PURE__*/_jsx(StyledPopperWrapper, {
+      tabIndex: -1,
+      onMouseDown: handleMouseDown
+    }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx(MenuList, {})))) : null]
+  });
 };
 
 export { Container };

package/esm/ComboBox/v3/parts/controls/Controls.js

@@ -15,6 +15,7 @@ const Controls = () => {
   const {
     props: {
       inline,
+      inputMinWidth,
       hasError,
       selectedValues
     },
@@ -41,10 +42,11 @@ const Controls = () => {
     }
   };
 
-  const cols = !inline ? ['minmax(0px,max-content)', 'minmax(0px, auto)', '29px'] : ['minmax(0px, auto)'];
+  const cols = !inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)'];
   return /*#__PURE__*/jsxs(StyledControlsWrapper, {
     ref: controlsWrapperRef,
     cols: cols,
+    minWidth: inputMinWidth,
     hasError: hasError,
     hasFocus: hasFocus,
     inline: inline,