@elliemae/ds-form 1.60.0 → 2.0.0-alpha.12

package/cjs/ComboBox/v1/DSComboBox.js

@@ -2,147 +2,108 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _jsx = require('@babel/runtime/helpers/jsx');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
-var _createClass = require('@babel/runtime/helpers/createClass');
-var _inherits = require('@babel/runtime/helpers/inherits');
-var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
-var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.filter.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 React = require('react');
-var PropTypes = require('prop-types');
 var lodash = require('lodash');
 var Select = require('react-select');
 var reactPopper = require('react-popper');
 var reactMeasure = require('react-measure');
 var dsUtilities = require('@elliemae/ds-utilities');
-var ComboBox_v1_withSelectStringValueConverter = require('./withSelectStringValueConverter.js');
-var propTypes = require('../../prop-types-0d5610b3.js');
-var ComboBox_v1_components_Control = require('./components/Control.js');
-var ComboBox_v1_components_DropdownIndicator = require('./components/DropdownIndicator.js');
-var ComboBox_v1_components_SelectMenu = require('./components/SelectMenu.js');
-var ComboBox_v1_components_ClearIndicator = require('./components/ClearIndicator.js');
-var ComboBox_v1_components_MenuList = require('./components/MenuList.js');
-var ComboBox_v1_components_MultiValueLabel = require('./components/MultiValueLabel.js');
-var ComboBox_v1_components_MultiValueRemove = require('./components/MultiValueRemove.js');
-var ComboBox_v1_components_SingleValueLabel = require('./components/SingleValueLabel.js');
-var ComboBox_v1_components_calculateWidth = require('./components/calculateWidth.js');
-var ComboBox_v1_components_ValueContainer = require('./components/ValueContainer.js');
-require('@babel/runtime/helpers/typeof');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-button');
-require('@elliemae/ds-overlay');
-require('@elliemae/ds-menu');
-require('@elliemae/ds-popper');
-require('@babel/runtime/helpers/slicedToArray');
-require('react-window');
-require('memoize-one');
-require('./components/CustomOption.js');
-require('@elliemae/ds-truncated-tooltip-text');
-require('./components/CustomOptionMulti.js');
-require('../../Checkbox/DSCheckbox.js');
-require('react-desc');
-require('uid');
-require('@elliemae/ds-classnames');
-require('../../Checkbox/elements/CheckMark.js');
-require('styled-components');
-require('../../Checkbox/defaultProps.js');
-require('../../Checkbox/props.js');
-require('./components/MultiSelectHeader.js');
+var withSelectStringValueConverter = require('./withSelectStringValueConverter.js');
+var propTypes = require('@elliemae/ds-shared/prop-types');
+var Control = require('./components/Control.js');
+var DropdownIndicator = require('./components/DropdownIndicator.js');
+var SelectMenu = require('./components/SelectMenu.js');
+var ClearIndicator = require('./components/ClearIndicator.js');
+var MenuList = require('./components/MenuList.js');
+var MultiValueLabel = require('./components/MultiValueLabel.js');
+var MultiValueRemove = require('./components/MultiValueRemove.js');
+var SingleValueLabel = require('./components/SingleValueLabel.js');
+var calculateWidth = require('./components/calculateWidth.js');
+var ValueContainer = require('./components/ValueContainer.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
-var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
-var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
-var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
-var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 
-var _excluded = ["hideSelectedOptions", "autoFocus", "className", "hasError", "onFocus", "onBlur", "onChange", "filterOption", "onClickDropdownIndicator", "onInputKeyDown", "onInputChange", "isRtl", "isFocused", "isMulti", "showAllOption", "value", "options", "clearable", "searchable", "disabled", "placeholder", "valueProperty", "labelProperty", "menuIsOpen", "inlineMenu", "noOptionsMessage", "components", "measureRef", "contentRect", "readOnly", "expandMenuToContainer", "expandMenuOutsideContainer", "customMenuItemOptions", "returnValue", "variant", "containerProps", "zIndex"];
+var _span;
 
-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__default['default'](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; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+const _excluded = ["hideSelectedOptions", "autoFocus", "className", "hasError", "onFocus", "onBlur", "onChange", "filterOption", "onClickDropdownIndicator", "onInputKeyDown", "onInputChange", "isRtl", "isFocused", "isMulti", "showAllOption", "value", "options", "clearable", "searchable", "disabled", "placeholder", "valueProperty", "labelProperty", "menuIsOpen", "inlineMenu", "noOptionsMessage", "components", "measureRef", "contentRect", "readOnly", "expandMenuToContainer", "expandMenuOutsideContainer", "customMenuItemOptions", "returnValue", "variant", "containerProps", "zIndex"];
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+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; }
 
-var ThemeConstants = {
+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__default["default"](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 ThemeConstants = {
   prefix: 'em-ds'
 };
-var blockName = 'selectbox';
-var allOption = {
+const blockName = 'selectbox';
+const allOption = {
   value: 'SELECT_ALL_COMBOBOX',
   label: 'All'
 };
 
-var getValues = function getValues(option, isMulti, valueProperty) {
+const getValues = (option, isMulti, valueProperty) => {
   if (!option) return null;
-  return isMulti ? option.map(function (mOption) {
-    return mOption[valueProperty];
-  }) : option[valueProperty];
+  return isMulti ? option.map(mOption => mOption[valueProperty]) : option[valueProperty];
 };
 
-var DSComboBox = /*#__PURE__*/function (_React$Component) {
-  _inherits__default['default'](DSComboBox, _React$Component);
-
-  var _super = _createSuper(DSComboBox);
-
-  function DSComboBox(props) {
-    var _this;
-
-    _classCallCheck__default['default'](this, DSComboBox);
-
-    _this = _super.call(this, props);
-    _this.forceFocus = false;
-    _this.isHover = undefined;
-    _this.handleHover = lodash.debounce(function (value) {
-      if (_this.state.isHover === _this.isHover) return;
-      if (!_this.unmount) _this.setState({
+class DSComboBox extends React__default["default"].Component {
+  constructor(props) {
+    super(props);
+    this.forceFocus = false;
+    this.isHover = undefined;
+    this.handleHover = lodash.debounce(value => {
+      if (this.state.isHover === this.isHover) return;
+      if (!this.unmount) this.setState({
         isHover: value
       });
     }, 0);
-    _this.state = {
+    this.state = {
       focus: null,
       isHover: undefined
     };
 
-    _this.handleOutsideScroll = function () {
-      if (_this.isHover !== true && !_this.unmount) {
-        _this.isHover = false;
-
-        _this.handleHover(false);
+    this.handleOutsideScroll = () => {
+      if (this.isHover !== true && !this.unmount) {
+        this.isHover = false;
+        this.handleHover(false);
       }
     };
 
-    _this.handleHoverRef = function (value) {
-      _this.isHover = value;
-
-      _this.handleHover(value);
+    this.handleHoverRef = value => {
+      this.isHover = value;
+      this.handleHover(value);
     };
 
-    _this.onKeyDownClear = function (e) {
+    this.onKeyDownClear = e => {
       // if (e.key === 'ArrowRight') {
       //   this.arrow.focus()
       // } else if (e.key === 'ArrowLeft') {
       //   this.select.focus()
       // }
       if (e.keyCode === 32 || e.keyCode === 13) {
-        _this.select.focus();
+        this.select.focus();
       }
     };
 
-    _this.handleKeyDown = function (e) {
+    this.handleKeyDown = e => {
       // if (e.key === 'ArrowRight') e.preventDefault()
       // if (e.target.type === 'text' && e.key === 'ArrowRight') {
       //   if (this.clear && this.clear.focus) {
@@ -152,207 +113,149 @@ var DSComboBox = /*#__PURE__*/function (_React$Component) {
       //   }
       // }
       if (e.target.type === 'text' && e.key === 'Backspace') {
-        _this.select.focus();
+        this.select.focus();
       }
 
-      return function () {
-        var value = e.target.value;
+      return () => {
+        const {
+          value
+        } = e.target;
         if (!value && e.key === ' ') e.preventDefault();
-
-        _this.props.onKeyDown(e);
+        this.props.onKeyDown(e);
       };
     };
 
-    _this.clear = /*#__PURE__*/React__default['default'].createRef();
-    _this.arrow = /*#__PURE__*/React__default['default'].createRef();
-    _this.select = /*#__PURE__*/React__default['default'].createRef();
-    return _this;
+    this.clear = /*#__PURE__*/React__default["default"].createRef();
+    this.arrow = /*#__PURE__*/React__default["default"].createRef();
+    this.select = /*#__PURE__*/React__default["default"].createRef();
   }
 
-  _createClass__default['default'](DSComboBox, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var handleHoverRef = this.props.handleHoverRef;
-      if (handleHoverRef) handleHoverRef(this.handleHoverRef);
-      window.addEventListener('scroll', lodash.throttle(this.handleOutsideScroll, 300), true);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.unmount = true;
-      window.removeEventListener('scroll', lodash.throttle(this.handleOutsideScroll, 300), true);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+  componentDidMount() {
+    const {
+      handleHoverRef
+    } = this.props;
+    if (handleHoverRef) handleHoverRef(this.handleHoverRef);
+    window.addEventListener('scroll', lodash.throttle(this.handleOutsideScroll, 300), true);
+  }
+
+  componentWillUnmount() {
+    this.unmount = true;
+    window.removeEventListener('scroll', lodash.throttle(this.handleOutsideScroll, 300), true);
+  }
 
-      var _this$props = this.props,
-          _this$props$hideSelec = _this$props.hideSelectedOptions,
-          hideSelectedOptions = _this$props$hideSelec === void 0 ? false : _this$props$hideSelec,
-          _this$props$autoFocus = _this$props.autoFocus,
-          autoFocus = _this$props$autoFocus === void 0 ? false : _this$props$autoFocus,
-          _this$props$className = _this$props.className,
-          className = _this$props$className === void 0 ? '' : _this$props$className,
-          _this$props$hasError = _this$props.hasError,
-          hasError = _this$props$hasError === void 0 ? false : _this$props$hasError,
-          _this$props$onFocus = _this$props.onFocus,
-          onFocus = _this$props$onFocus === void 0 ? function () {
-        return null;
-      } : _this$props$onFocus,
-          _this$props$onBlur = _this$props.onBlur,
-          onBlur = _this$props$onBlur === void 0 ? function () {
-        return null;
-      } : _this$props$onBlur,
-          _this$props$onChange = _this$props.onChange,
-          onChange = _this$props$onChange === void 0 ? function () {
-        return null;
-      } : _this$props$onChange,
-          _this$props$filterOpt = _this$props.filterOption,
-          filterOption = _this$props$filterOpt === void 0 ? undefined : _this$props$filterOpt,
-          _this$props$onClickDr = _this$props.onClickDropdownIndicator,
-          onClickDropdownIndicator = _this$props$onClickDr === void 0 ? function () {
-        return null;
-      } : _this$props$onClickDr,
-          _this$props$onInputKe = _this$props.onInputKeyDown,
-          onInputKeyDown = _this$props$onInputKe === void 0 ? function () {
-        return null;
-      } : _this$props$onInputKe,
-          _this$props$onInputCh = _this$props.onInputChange,
-          onInputChange = _this$props$onInputCh === void 0 ? undefined : _this$props$onInputCh,
-          _this$props$isRtl = _this$props.isRtl,
-          isRtl = _this$props$isRtl === void 0 ? false : _this$props$isRtl,
-          _this$props$isFocused = _this$props.isFocused,
-          isFocused = _this$props$isFocused === void 0 ? undefined : _this$props$isFocused,
-          _this$props$isMulti = _this$props.isMulti,
-          isMulti = _this$props$isMulti === void 0 ? false : _this$props$isMulti,
-          _this$props$showAllOp = _this$props.showAllOption,
-          showAllOption = _this$props$showAllOp === void 0 ? false : _this$props$showAllOp,
-          _this$props$value = _this$props.value,
-          value = _this$props$value === void 0 ? null : _this$props$value,
-          _this$props$options = _this$props.options,
-          options = _this$props$options === void 0 ? [] : _this$props$options,
-          _this$props$clearable = _this$props.clearable,
-          clearable = _this$props$clearable === void 0 ? false : _this$props$clearable,
-          _this$props$searchabl = _this$props.searchable,
-          searchable = _this$props$searchabl === void 0 ? true : _this$props$searchabl,
-          _this$props$disabled = _this$props.disabled,
-          disabled = _this$props$disabled === void 0 ? false : _this$props$disabled,
-          _this$props$placehold = _this$props.placeholder,
-          placeholder = _this$props$placehold === void 0 ? '' : _this$props$placehold,
-          _this$props$valueProp = _this$props.valueProperty,
-          valueProperty = _this$props$valueProp === void 0 ? 'value' : _this$props$valueProp,
-          _this$props$labelProp = _this$props.labelProperty,
-          labelProperty = _this$props$labelProp === void 0 ? 'label' : _this$props$labelProp,
-          _this$props$menuIsOpe = _this$props.menuIsOpen,
-          menuIsOpen = _this$props$menuIsOpe === void 0 ? undefined : _this$props$menuIsOpe,
-          _this$props$inlineMen = _this$props.inlineMenu,
-          inlineMenu = _this$props$inlineMen === void 0 ? false : _this$props$inlineMen,
-          _this$props$noOptions = _this$props.noOptionsMessage,
-          _noOptionsMessage = _this$props$noOptions === void 0 ? function () {
-        return /*#__PURE__*/React__default['default'].createElement("span", null, "No options");
-      } : _this$props$noOptions,
-          _this$props$component = _this$props.components,
-          customComponents = _this$props$component === void 0 ? {} : _this$props$component,
-          measureRef = _this$props.measureRef,
-          contentRect = _this$props.contentRect,
-          _this$props$readOnly = _this$props.readOnly,
-          readOnly = _this$props$readOnly === void 0 ? false : _this$props$readOnly,
-          _this$props$expandMen = _this$props.expandMenuToContainer,
-          expandMenuToContainer = _this$props$expandMen === void 0 ? true : _this$props$expandMen,
-          _this$props$expandMen2 = _this$props.expandMenuOutsideContainer,
-          expandMenuOutsideContainer = _this$props$expandMen2 === void 0 ? false : _this$props$expandMen2,
-          _this$props$customMen = _this$props.customMenuItemOptions,
-          customMenuItemOptions = _this$props$customMen === void 0 ? {
+  render() {
+    const _this$props = this.props,
+          {
+      hideSelectedOptions = false,
+      autoFocus = false,
+      className = '',
+      hasError = false,
+      onFocus = () => null,
+      onBlur = () => null,
+      onChange = () => null,
+      // onKeyDown = () => null,
+      filterOption = undefined,
+      onClickDropdownIndicator = () => null,
+      onInputKeyDown = () => null,
+      onInputChange = undefined,
+      isRtl = false,
+      isFocused = undefined,
+      isMulti = false,
+      showAllOption = false,
+      value = null,
+      options = [],
+      clearable = false,
+      searchable = true,
+      disabled = false,
+      placeholder = '',
+      valueProperty = 'value',
+      labelProperty = 'label',
+      menuIsOpen = undefined,
+      inlineMenu = false,
+      noOptionsMessage = () => _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, "No options")),
+      components: customComponents = {},
+      measureRef,
+      contentRect,
+      readOnly = false,
+      expandMenuToContainer = true,
+      expandMenuOutsideContainer = false,
+      customMenuItemOptions = {
         useTruncatedText: false,
         itemSize: 35
-      } : _this$props$customMen,
-          _this$props$returnVal = _this$props.returnValue,
-          returnValue = _this$props$returnVal === void 0 ? true : _this$props$returnVal,
-          _this$props$variant = _this$props.variant,
-          variant = _this$props$variant === void 0 ? propTypes.COMBOBOX_VARIANT.DEFAULT : _this$props$variant,
-          _this$props$container = _this$props.containerProps,
-          containerProps = _this$props$container === void 0 ? {} : _this$props$container,
-          _this$props$zIndex = _this$props.zIndex,
-          zIndex = _this$props$zIndex === void 0 ? 11 : _this$props$zIndex,
-          restPropsToCustomizeSelect = _objectWithoutProperties__default['default'](_this$props, _excluded);
-
-      var focus = this.state.focus;
-      var internalOptions = options;
-      var internalValue = value;
-
-      if (showAllOption && isMulti) {
-        internalOptions = [allOption].concat(_toConsumableArray__default['default'](options));
-      }
+      },
+      returnValue = true,
+      variant = propTypes.COMBOBOX_VARIANT.DEFAULT,
+      containerProps = {},
+      zIndex = 11
+    } = _this$props,
+          restPropsToCustomizeSelect = _objectWithoutProperties__default["default"](_this$props, _excluded);
+
+    const {
+      focus
+    } = this.state;
+    let internalOptions = options;
+    let internalValue = value;
+
+    if (showAllOption && isMulti) {
+      internalOptions = [allOption, ...options];
+    }
 
-      if (this.allSelected && isMulti) {
-        internalValue = [allOption].concat(_toConsumableArray__default['default'](value));
-      }
+    if (this.allSelected && isMulti) {
+      internalValue = [allOption, ...value];
+    }
 
-      return /*#__PURE__*/React__default['default'].createElement(reactPopper.Manager, null, /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
-        ref: measureRef,
-        className: dsUtilities.cx("".concat(ThemeConstants.prefix, "-").concat(blockName, "-wrapper"), className, hasError && "".concat(ThemeConstants.prefix, "-").concat(blockName, "--").concat(propTypes.COMBOBOX_VARIANT.ERROR), "".concat(ThemeConstants.prefix, "-").concat(blockName, "--").concat(variant), "focus-".concat(focus), isMulti && 'combo-multi', expandMenuOutsideContainer && 'expanded-outside-container')
-      }, containerProps, {
-        onMouseEnter: function onMouseEnter() {
-          _this2.handleHoverRef(undefined);
-        }
-      }), /*#__PURE__*/React__default['default'].createElement(Select__default['default'], _extends__default['default']({
-        ref: function ref(_ref) {
-          _this2.select = _ref;
+    return /*#__PURE__*/_jsx__default["default"](reactPopper.Manager, {}, void 0, /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+      ref: measureRef,
+      className: dsUtilities.cx("".concat(ThemeConstants.prefix, "-").concat(blockName, "-wrapper"), className, hasError && "".concat(ThemeConstants.prefix, "-").concat(blockName, "--").concat(propTypes.COMBOBOX_VARIANT.ERROR), "".concat(ThemeConstants.prefix, "-").concat(blockName, "--").concat(variant), "focus-".concat(focus), isMulti && 'combo-multi', expandMenuOutsideContainer && 'expanded-outside-container')
+    }, containerProps), {}, {
+      onMouseEnter: () => {
+        this.handleHoverRef(undefined);
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(Select__default["default"], _objectSpread({
+        ref: ref => {
+          this.select = ref;
         },
         autoFocus: autoFocus,
         classNamePrefix: "".concat(ThemeConstants.prefix, "-").concat(blockName),
         components: _objectSpread({
-          Control: ComboBox_v1_components_Control,
-          Menu: !options || options.length === 0 ? ComboBox_v1_components_SelectMenu : function (props) {
-            return /*#__PURE__*/React__default['default'].createElement("div", {
-              className: "select-menu-combo ".concat(isMulti && 'select-menu-combo-multi'),
-              onMouseLeave: function onMouseLeave() {
-                _this2.isHover = undefined;
-
-                _this2.handleHover(undefined);
-              },
-              onMouseOverCapture: function onMouseOverCapture() {
-                _this2.isHover = true;
-
-                _this2.handleHover(true);
-              }
-            }, /*#__PURE__*/React__default['default'].createElement(ComboBox_v1_components_SelectMenu, props));
-          },
+          Control,
+          Menu: !options || options.length === 0 ? SelectMenu : props => /*#__PURE__*/_jsx__default["default"]("div", {
+            className: "select-menu-combo ".concat(isMulti && 'select-menu-combo-multi'),
+            onMouseLeave: () => {
+              this.isHover = undefined;
+              this.handleHover(undefined);
+            },
+            onMouseOverCapture: () => {
+              this.isHover = true;
+              this.handleHover(true);
+            }
+          }, void 0, /*#__PURE__*/jsxRuntime.jsx(SelectMenu, _objectSpread({}, props))),
           // Menu: SelectMenu,
-          DropdownIndicator: function DropdownIndicator() {
-            return /*#__PURE__*/React__default['default'].createElement(ComboBox_v1_components_DropdownIndicator, {
-              innerRef: function innerRef(ref) {
-                _this2.arrow = ref;
-              },
-              onClick: onClickDropdownIndicator,
-              onKeyDown: _this2.onKeyDownIndicator
-            });
-          },
-          ClearIndicator: function ClearIndicator(props) {
-            return /*#__PURE__*/React__default['default'].createElement(ComboBox_v1_components_ClearIndicator, _extends__default['default']({}, props, {
-              innerRef: function innerRef(ref) {
-                _this2.clear = ref;
-              },
-              onKeyDown: _this2.onKeyDownClear
-            }));
-          },
-          MultiValueLabel: ComboBox_v1_components_MultiValueLabel,
-          MultiValueRemove: ComboBox_v1_components_MultiValueRemove,
-          SingleValue: ComboBox_v1_components_SingleValueLabel,
-          MenuList: ComboBox_v1_components_MenuList,
-          ValueContainer: ComboBox_v1_components_ValueContainer.ValueContainer
+          DropdownIndicator: () => /*#__PURE__*/_jsx__default["default"](DropdownIndicator, {
+            innerRef: ref => {
+              this.arrow = ref;
+            },
+            onClick: onClickDropdownIndicator,
+            onKeyDown: this.onKeyDownIndicator
+          }),
+          ClearIndicator: props => /*#__PURE__*/jsxRuntime.jsx(ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
+            innerRef: ref => {
+              this.clear = ref;
+            },
+            onKeyDown: this.onKeyDownClear
+          })),
+          MultiValueLabel,
+          MultiValueRemove,
+          SingleValue: SingleValueLabel,
+          MenuList,
+          ValueContainer: ValueContainer.ValueContainer
         }, customComponents),
         customMenuItemOptions: customMenuItemOptions,
         expandMenuOutsideContainer: expandMenuOutsideContainer,
         expandMenuToContainer: expandMenuToContainer,
         filterOption: filterOption,
-        getOptionLabel: function getOptionLabel(option) {
-          return option[labelProperty];
-        },
-        getOptionValue: function getOptionValue(option) {
-          return option[valueProperty];
-        },
+        getOptionLabel: option => option[labelProperty],
+        getOptionValue: option => option[valueProperty],
         hideSelectedOptions: hideSelectedOptions,
         inlineMenu: inlineMenu,
         isClearable: clearable,
@@ -362,38 +265,32 @@ var DSComboBox = /*#__PURE__*/function (_React$Component) {
         isRtl: isRtl,
         isSearchable: readOnly ? false : searchable,
         menuIsOpen: menuIsOpen === undefined ? this.isHover : menuIsOpen,
-        noOptionsMessage: function noOptionsMessage() {
-          _noOptionsMessage.apply(void 0, arguments);
+        noOptionsMessage: function () {
+          noOptionsMessage(...arguments);
         },
         onBlur: onBlur,
-        onChange: returnValue ? function (option, action) {
-          _this2.allSelected = false;
-          _this2.isHover = undefined;
-
-          _this2.setState({
+        onChange: returnValue ? (option, action) => {
+          this.allSelected = false;
+          this.isHover = undefined;
+          this.setState({
             isHover: undefined
           });
 
-          if (showAllOption && isMulti && option.find(function (op) {
-            return op.value === 'SELECT_ALL_COMBOBOX';
-          })) {
-            _this2.allSelected = true;
+          if (showAllOption && isMulti && option.find(op => op.value === 'SELECT_ALL_COMBOBOX')) {
+            this.allSelected = true;
             return onChange(getValues(options, isMulti, valueProperty), action);
           }
 
           return onChange(getValues(option, isMulti, valueProperty), action);
-        } : function (option, action) {
-          _this2.allSelected = false;
-          _this2.isHover = undefined;
-
-          _this2.setState({
+        } : (option, action) => {
+          this.allSelected = false;
+          this.isHover = undefined;
+          this.setState({
             isHover: undefined
           });
 
-          if (showAllOption && isMulti && option.find(function (op) {
-            return op.value === 'SELECT_ALL_COMBOBOX';
-          })) {
-            _this2.allSelected = true;
+          if (showAllOption && isMulti && option.find(op => op.value === 'SELECT_ALL_COMBOBOX')) {
+            this.allSelected = true;
             return onChange(options, action);
           }
 
@@ -407,12 +304,10 @@ var DSComboBox = /*#__PURE__*/function (_React$Component) {
         placeholder: placeholder,
         selectMeasure: contentRect,
         styles: {
-          control: function control() {
-            return null;
-          },
-          menu: function menu() {
+          control: () => null,
+          menu: () => {
             if (expandMenuOutsideContainer) {
-              var width = ComboBox_v1_components_calculateWidth.calculateWidth(options);
+              const width = calculateWidth.calculateWidth(options);
               if (!width) return null;
               return {
                 width: "".concat(width, "px")
@@ -421,224 +316,35 @@ var DSComboBox = /*#__PURE__*/function (_React$Component) {
 
             return null;
           },
-          option: function option() {
-            return null;
-          },
-          dropdownIndicator: function dropdownIndicator() {
-            return null;
-          },
-          clearIndicator: function clearIndicator() {
-            return null;
-          },
-          placeholder: function placeholder() {
-            return null;
-          },
-          indicatorSeparator: function indicatorSeparator() {
-            return null;
-          },
-          multiValue: function multiValue(base) {
-            return _objectSpread(_objectSpread({}, base), {}, {
-              background: 'none',
-              minWidth: '3rem'
-            });
-          }
+          option: () => null,
+          dropdownIndicator: () => null,
+          clearIndicator: () => null,
+          placeholder: () => null,
+          indicatorSeparator: () => null,
+          multiValue: base => _objectSpread(_objectSpread({}, base), {}, {
+            background: 'none',
+            minWidth: '3rem'
+          })
         },
         value: internalValue,
         zIndex: zIndex
-      }, restPropsToCustomizeSelect))));
-    }
-  }]);
+      }, restPropsToCustomizeSelect))
+    })));
+  }
 
-  return DSComboBox;
-}(React__default['default'].Component);
+}
 
 DSComboBox.defaultProps = {
   showAllOption: false
 };
-DSComboBox.propTypes = {
-  containerProps: PropTypes__default['default'].shape({}),
-  handleHoverRef: PropTypes__default['default'].func,
-
-  /**
-   * Whether the combo box uses auto focus or not
-   */
-  autoFocus: PropTypes__default['default'].bool,
-  className: PropTypes__default['default'].string,
-
-  /**
-   * Whether the combo box has error or not
-   */
-  hasError: PropTypes__default['default'].bool,
-
-  /**
-   * Allows a function that is triggered once the combo box is focused
-   */
-  onFocus: PropTypes__default['default'].func,
-
-  /**
-   * Allows a function that is triggered once the combo box loses focus
-   */
-  onBlur: PropTypes__default['default'].func,
-
-  /**
-   * Allows a function that is triggered once the combo box changes
-   */
-  onChange: PropTypes__default['default'].func,
-
-  /**
-   * Allows a function that is triggered once a key is being pressed
-   */
-  onKeyDown: PropTypes__default['default'].func,
-
-  /**
-   * Allows a function that is triggered once the combo box input key down
-   */
-  onInputKeyDown: PropTypes__default['default'].func,
-
-  /**
-   * Allows a function that is triggered once the combo box input changes
-   */
-  onInputChange: PropTypes__default['default'].func,
-
-  /**
-   * Whether the combo box is rtl or not  //ASK
-   */
-  isRtl: PropTypes__default['default'].bool,
-
-  /**
-   * Whether the combo box is focused or not
-   */
-  isFocused: PropTypes__default['default'].bool,
-
-  /**
-   * Whether the combo box is multi or not
-   */
-  isMulti: PropTypes__default['default'].bool,
-  inputValue: PropTypes__default['default'].string,
-  showAllOption: PropTypes__default['default'].bool,
-  allOption: PropTypes__default['default'].shape({
-    label: PropTypes__default['default'].string,
-    value: PropTypes__default['default'].string
-  }),
-
-  /**
-   * Value that the combo box has as default
-   */
-  value: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].number, PropTypes__default['default'].object]),
-
-  /**
-   * Value that the combo box has as default
-   */
-  options: PropTypes__default['default'].array,
-
-  /**
-   * Whether the combo box is clearable or not
-   */
-  clearable: PropTypes__default['default'].bool,
-
-  /**
-   * Whether the combo box is searchable or not. Set to false makes the input non-editable
-   */
-  searchable: PropTypes__default['default'].bool,
-
-  /**
-   * Whether the combo box is disabled or not
-   */
-  disabled: PropTypes__default['default'].bool,
-
-  /**
-   * Placeholder for the combo box
-   */
-  placeholder: PropTypes__default['default'].string,
-
-  /**
-   * Displays a Loading Indicator in the menu
-   */
-  loading: PropTypes__default['default'].bool,
-  valueProperty: PropTypes__default['default'].string,
-  labelProperty: PropTypes__default['default'].string,
-
-  /**
-   * Whether the combo box menu is open or not
-   */
-  menuIsOpen: PropTypes__default['default'].bool,
-
-  /**
-   * Whether to show the combo box menu inline or not
-   */
-  inlineMenu: PropTypes__default['default'].bool,
-
-  /**
-   * Message to show once there aren't any options
-   */
-  noOptionsMessage: PropTypes__default['default'].func,
-
-  /**
-   * Components you can add to the combo box
-   */
-  measureRef: PropTypes__default['default'].func,
-
-  /**
-   * Whether the combo box is read only or not
-   */
-  readOnly: PropTypes__default['default'].bool,
-
-  /**
-   * Whether the combo box can be expanded the menu to container or not
-   */
-  expandMenuToContainer: PropTypes__default['default'].bool,
-
-  /**
-   * Allow have options larger than his container
-   */
-  expandMenuOutsideContainer: PropTypes__default['default'].bool,
-
-  /**
-   * Custom combo box menu item options
-   */
-  customMenuItemOptions: PropTypes__default['default'].object,
-
-  /**
-   * Whether the combo box is has value to return or not
-   */
-  returnValue: PropTypes__default['default'].bool,
-
-  /**
-    [
-      'variant-default',
-      'variant-focus-input',
-      'variant-focus-icon',
-      'variant-active-input',
-      'variant-active-icon',
-      'variant-disabled',
-      'variant-error',
-    ]
-   */
-  variant: PropTypes__default['default'].oneOf(propTypes.comboBoxVariants),
-  hideSelectedOptions: PropTypes__default['default'].bool,
-  maxOptions: PropTypes__default['default'].number,
-
-  /**
-   * Custom method to filter whether an option should be displayed in the menu
-   */
-  filterOption: PropTypes__default['default'].func,
-  onClickDropdownIndicator: PropTypes__default['default'].func,
-
-  /**
-   * Object with custom components for react-select
-   */
-  components: PropTypes__default['default'].object,
-  contentRect: PropTypes__default['default'].object,
-  zIndex: PropTypes__default['default'].number
-};
-var DSComboBox$1 = ComboBox_v1_withSelectStringValueConverter(reactMeasure.withContentRect('bounds')(DSComboBox));
+var DSComboBox$1 = withSelectStringValueConverter(reactMeasure.withContentRect('bounds')(DSComboBox));
 
 Object.defineProperty(exports, 'components', {
   enumerable: true,
-  get: function () {
-    return Select.components;
-  }
+  get: function () { return Select.components; }
+});
+Object.defineProperty(exports, 'COMBOBOX_VARIANT', {
+  enumerable: true,
+  get: function () { return propTypes.COMBOBOX_VARIANT; }
 });
-exports.COMBOBOX_VARIANT = propTypes.COMBOBOX_VARIANT;
-exports['default'] = DSComboBox$1;
-//# sourceMappingURL=DSComboBox.js.map
+exports["default"] = DSComboBox$1;