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

package/esm/ComboBox/v1/DSComboBox.js

@@ -1,14 +1,17 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
+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 _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
-import _createClass from '@babel/runtime/helpers/esm/createClass';
-import _inherits from '@babel/runtime/helpers/esm/inherits';
-import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
+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';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
 import React from 'react';
-import PropTypes from 'prop-types';
 import { debounce, throttle } from 'lodash';
 import Select from 'react-select';
 export { components } from 'react-select';
@@ -16,8 +19,8 @@ import { Manager } from 'react-popper';
 import { withContentRect } from 'react-measure';
 import { cx } from '@elliemae/ds-utilities';
 import withSelectStringValueConverter from './withSelectStringValueConverter.js';
-import { a as COMBOBOX_VARIANT, c as comboBoxVariants } from '../../prop-types-45aa1e9c.js';
-export { a as COMBOBOX_VARIANT } from '../../prop-types-45aa1e9c.js';
+import { COMBOBOX_VARIANT } from '@elliemae/ds-shared/prop-types';
+export { COMBOBOX_VARIANT } from '@elliemae/ds-shared/prop-types';
 import Control from './components/Control.js';
 import DropdownIndicator from './components/DropdownIndicator.js';
 import SelectMenu from './components/SelectMenu.js';
@@ -28,104 +31,69 @@ import MultiValueRemove from './components/MultiValueRemove.js';
 import SingleValueLabel from './components/SingleValueLabel.js';
 import { calculateWidth } from './components/calculateWidth.js';
 import { ValueContainer } from './components/ValueContainer.js';
-import '@babel/runtime/helpers/esm/typeof';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-button';
-import '@elliemae/ds-overlay';
-import '@elliemae/ds-menu';
-import '@elliemae/ds-popper';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react-window';
-import 'memoize-one';
-import './components/CustomOption.js';
-import '@elliemae/ds-truncated-tooltip-text';
-import './components/CustomOptionMulti.js';
-import '../../Checkbox/DSCheckbox.js';
-import 'react-desc';
-import 'uid';
-import '@elliemae/ds-classnames';
-import '../../Checkbox/elements/CheckMark.js';
-import 'styled-components';
-import '../../Checkbox/defaultProps.js';
-import '../../Checkbox/props.js';
-import './components/MultiSelectHeader.js';
+import { jsx } from 'react/jsx-runtime';
 
-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;
+
+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 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; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-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; } }
-
-var ThemeConstants = {
+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(DSComboBox, _React$Component);
-
-  var _super = _createSuper(DSComboBox);
-
-  function DSComboBox(props) {
-    var _this;
-
-    _classCallCheck(this, DSComboBox);
-
-    _this = _super.call(this, props);
-    _this.forceFocus = false;
-    _this.isHover = undefined;
-    _this.handleHover = debounce(function (value) {
-      if (_this.state.isHover === _this.isHover) return;
-      if (!_this.unmount) _this.setState({
+class DSComboBox extends React.Component {
+  constructor(props) {
+    super(props);
+    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);
-    _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) {
@@ -135,207 +103,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.createRef();
-    _this.arrow = /*#__PURE__*/React.createRef();
-    _this.select = /*#__PURE__*/React.createRef();
-    return _this;
+    this.clear = /*#__PURE__*/React.createRef();
+    this.arrow = /*#__PURE__*/React.createRef();
+    this.select = /*#__PURE__*/React.createRef();
   }
 
-  _createClass(DSComboBox, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var handleHoverRef = this.props.handleHoverRef;
-      if (handleHoverRef) handleHoverRef(this.handleHoverRef);
-      window.addEventListener('scroll', throttle(this.handleOutsideScroll, 300), true);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.unmount = true;
-      window.removeEventListener('scroll', 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', 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.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 ? {
+  componentWillUnmount() {
+    this.unmount = true;
+    window.removeEventListener('scroll', throttle(this.handleOutsideScroll, 300), true);
+  }
+
+  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("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 ? 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,
+      },
+      returnValue = true,
+      variant = COMBOBOX_VARIANT.DEFAULT,
+      containerProps = {},
+      zIndex = 11
+    } = _this$props,
           restPropsToCustomizeSelect = _objectWithoutProperties(_this$props, _excluded);
 
-      var focus = this.state.focus;
-      var internalOptions = options;
-      var internalValue = value;
+    const {
+      focus
+    } = this.state;
+    let internalOptions = options;
+    let internalValue = value;
 
-      if (showAllOption && isMulti) {
-        internalOptions = [allOption].concat(_toConsumableArray(options));
-      }
+    if (showAllOption && isMulti) {
+      internalOptions = [allOption, ...options];
+    }
 
-      if (this.allSelected && isMulti) {
-        internalValue = [allOption].concat(_toConsumableArray(value));
-      }
+    if (this.allSelected && isMulti) {
+      internalValue = [allOption, ...value];
+    }
 
-      return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement("div", _extends({
-        ref: measureRef,
-        className: cx("".concat(ThemeConstants.prefix, "-").concat(blockName, "-wrapper"), className, hasError && "".concat(ThemeConstants.prefix, "-").concat(blockName, "--").concat(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.createElement(Select, _extends({
-        ref: function ref(_ref) {
-          _this2.select = _ref;
+    return /*#__PURE__*/_jsx(Manager, {}, void 0, /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+      ref: measureRef,
+      className: cx("".concat(ThemeConstants.prefix, "-").concat(blockName, "-wrapper"), className, hasError && "".concat(ThemeConstants.prefix, "-").concat(blockName, "--").concat(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__*/jsx(Select, _objectSpread({
+        ref: ref => {
+          this.select = ref;
         },
         autoFocus: autoFocus,
         classNamePrefix: "".concat(ThemeConstants.prefix, "-").concat(blockName),
         components: _objectSpread({
-          Control: Control,
-          Menu: !options || options.length === 0 ? SelectMenu : function (props) {
-            return /*#__PURE__*/React.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.createElement(SelectMenu, props));
-          },
+          Control,
+          Menu: !options || options.length === 0 ? SelectMenu : props => /*#__PURE__*/_jsx("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__*/jsx(SelectMenu, _objectSpread({}, props))),
           // Menu: SelectMenu,
-          DropdownIndicator: function DropdownIndicator$1() {
-            return /*#__PURE__*/React.createElement(DropdownIndicator, {
-              innerRef: function innerRef(ref) {
-                _this2.arrow = ref;
-              },
-              onClick: onClickDropdownIndicator,
-              onKeyDown: _this2.onKeyDownIndicator
-            });
-          },
-          ClearIndicator: function ClearIndicator$1(props) {
-            return /*#__PURE__*/React.createElement(ClearIndicator, _extends({}, props, {
-              innerRef: function innerRef(ref) {
-                _this2.clear = ref;
-              },
-              onKeyDown: _this2.onKeyDownClear
-            }));
-          },
-          MultiValueLabel: MultiValueLabel,
-          MultiValueRemove: MultiValueRemove,
+          DropdownIndicator: () => /*#__PURE__*/_jsx(DropdownIndicator, {
+            innerRef: ref => {
+              this.arrow = ref;
+            },
+            onClick: onClickDropdownIndicator,
+            onKeyDown: this.onKeyDownIndicator
+          }),
+          ClearIndicator: props => /*#__PURE__*/jsx(ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
+            innerRef: ref => {
+              this.clear = ref;
+            },
+            onKeyDown: this.onKeyDownClear
+          })),
+          MultiValueLabel,
+          MultiValueRemove,
           SingleValue: SingleValueLabel,
-          MenuList: MenuList,
-          ValueContainer: ValueContainer
+          MenuList,
+          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,
@@ -345,38 +255,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);
           }
 
@@ -390,12 +294,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 = calculateWidth(options);
+              const width = calculateWidth(options);
               if (!width) return null;
               return {
                 width: "".concat(width, "px")
@@ -404,217 +306,27 @@ 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.Component);
+}
 
 DSComboBox.defaultProps = {
   showAllOption: false
 };
-DSComboBox.propTypes = {
-  containerProps: PropTypes.shape({}),
-  handleHoverRef: PropTypes.func,
-
-  /**
-   * Whether the combo box uses auto focus or not
-   */
-  autoFocus: PropTypes.bool,
-  className: PropTypes.string,
-
-  /**
-   * Whether the combo box has error or not
-   */
-  hasError: PropTypes.bool,
-
-  /**
-   * Allows a function that is triggered once the combo box is focused
-   */
-  onFocus: PropTypes.func,
-
-  /**
-   * Allows a function that is triggered once the combo box loses focus
-   */
-  onBlur: PropTypes.func,
-
-  /**
-   * Allows a function that is triggered once the combo box changes
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * Allows a function that is triggered once a key is being pressed
-   */
-  onKeyDown: PropTypes.func,
-
-  /**
-   * Allows a function that is triggered once the combo box input key down
-   */
-  onInputKeyDown: PropTypes.func,
-
-  /**
-   * Allows a function that is triggered once the combo box input changes
-   */
-  onInputChange: PropTypes.func,
-
-  /**
-   * Whether the combo box is rtl or not  //ASK
-   */
-  isRtl: PropTypes.bool,
-
-  /**
-   * Whether the combo box is focused or not
-   */
-  isFocused: PropTypes.bool,
-
-  /**
-   * Whether the combo box is multi or not
-   */
-  isMulti: PropTypes.bool,
-  inputValue: PropTypes.string,
-  showAllOption: PropTypes.bool,
-  allOption: PropTypes.shape({
-    label: PropTypes.string,
-    value: PropTypes.string
-  }),
-
-  /**
-   * Value that the combo box has as default
-   */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
-
-  /**
-   * Value that the combo box has as default
-   */
-  options: PropTypes.array,
-
-  /**
-   * Whether the combo box is clearable or not
-   */
-  clearable: PropTypes.bool,
-
-  /**
-   * Whether the combo box is searchable or not. Set to false makes the input non-editable
-   */
-  searchable: PropTypes.bool,
-
-  /**
-   * Whether the combo box is disabled or not
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Placeholder for the combo box
-   */
-  placeholder: PropTypes.string,
-
-  /**
-   * Displays a Loading Indicator in the menu
-   */
-  loading: PropTypes.bool,
-  valueProperty: PropTypes.string,
-  labelProperty: PropTypes.string,
-
-  /**
-   * Whether the combo box menu is open or not
-   */
-  menuIsOpen: PropTypes.bool,
-
-  /**
-   * Whether to show the combo box menu inline or not
-   */
-  inlineMenu: PropTypes.bool,
-
-  /**
-   * Message to show once there aren't any options
-   */
-  noOptionsMessage: PropTypes.func,
-
-  /**
-   * Components you can add to the combo box
-   */
-  measureRef: PropTypes.func,
-
-  /**
-   * Whether the combo box is read only or not
-   */
-  readOnly: PropTypes.bool,
-
-  /**
-   * Whether the combo box can be expanded the menu to container or not
-   */
-  expandMenuToContainer: PropTypes.bool,
-
-  /**
-   * Allow have options larger than his container
-   */
-  expandMenuOutsideContainer: PropTypes.bool,
-
-  /**
-   * Custom combo box menu item options
-   */
-  customMenuItemOptions: PropTypes.object,
-
-  /**
-   * Whether the combo box is has value to return or not
-   */
-  returnValue: PropTypes.bool,
-
-  /**
-    [
-      'variant-default',
-      'variant-focus-input',
-      'variant-focus-icon',
-      'variant-active-input',
-      'variant-active-icon',
-      'variant-disabled',
-      'variant-error',
-    ]
-   */
-  variant: PropTypes.oneOf(comboBoxVariants),
-  hideSelectedOptions: PropTypes.bool,
-  maxOptions: PropTypes.number,
-
-  /**
-   * Custom method to filter whether an option should be displayed in the menu
-   */
-  filterOption: PropTypes.func,
-  onClickDropdownIndicator: PropTypes.func,
-
-  /**
-   * Object with custom components for react-select
-   */
-  components: PropTypes.object,
-  contentRect: PropTypes.object,
-  zIndex: PropTypes.number
-};
 var DSComboBox$1 = withSelectStringValueConverter(withContentRect('bounds')(DSComboBox));
 
 export { DSComboBox$1 as default };
-//# sourceMappingURL=DSComboBox.js.map