@luminati-io/uikit 3.2.6 → 3.2.8

package/dist/umd/uikit.development.js

@@ -36846,7 +36846,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   buildComponents: () => (/* binding */ buildComponents)
 /* harmony export */ });
 /* harmony import */ var _option__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./option */ "./src/input/checkbox_list/option.js");
-/* harmony import */ var _virtualized_list__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./virtualized_list */ "./src/input/checkbox_list/virtualized_list.js");
+/* harmony import */ var _util_virtualized_list__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../util/virtualized_list */ "./src/util/virtualized_list.js");
 // LICENSE_CODE ZON
 
 
@@ -36866,10 +36866,11 @@ var buildComponents = function buildComponents(props) {
     Option: _option__WEBPACK_IMPORTED_MODULE_0__.Option
   }, props.components);
   if (props.virtualized) {
-    components.MenuList = (0,_virtualized_list__WEBPACK_IMPORTED_MODULE_1__.VirtualizedListFactory)({
+    components.MenuList = (0,_util_virtualized_list__WEBPACK_IMPORTED_MODULE_1__.VirtualizedListFactory)({
       optionHeight: props.optionHeight,
       defaultValue: props.defaultValue,
-      formatOptionLabel: props.formatOptionLabel
+      formatOptionLabel: props.formatOptionLabel,
+      Option: components.Option
     });
   }
   return components;
@@ -37288,237 +37289,6 @@ var useStyles = function useStyles(_ref) {
 
 /***/ }),
 
-/***/ "./src/input/checkbox_list/virtualized_list.js":
-/*!*****************************************************!*\
-  !*** ./src/input/checkbox_list/virtualized_list.js ***!
-  \*****************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   VirtualizedListFactory: () => (/* binding */ VirtualizedListFactory)
-/* harmony export */ });
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_select__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react-select */ "./node_modules/react-select/dist/index-a301f526.esm.js");
-/* harmony import */ var react_virtualized__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-virtualized */ "react-virtualized");
-/* harmony import */ var react_virtualized__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_virtualized__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ "styled-components");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
-/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../theme */ "./src/theme.js");
-/* harmony import */ var _util_getters__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../util/getters */ "./src/util/getters.js");
-/* harmony import */ var _option__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./option */ "./src/input/checkbox_list/option.js");
-// LICENSE_CODE ZON
-
-
-/*jslint react:true*/
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-
-
-
-
-
-
-
-
-var VirtualizedListFactory = function VirtualizedListFactory(_ref) {
-  var _ref$optionHeight = _ref.optionHeight,
-    optionHeight = _ref$optionHeight === void 0 ? 40 : _ref$optionHeight,
-    defaultValue = _ref.defaultValue,
-    valueGetter = _ref.valueGetter,
-    formatOptionLabel = _ref.formatOptionLabel;
-  var Comp = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().memo(function (props) {
-    var selectedValue = props.getValue() ? props.getValue()[0] : undefined;
-    if (props.children && !props.children.length) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_select__WEBPACK_IMPORTED_MODULE_8__.c.NoOptionsMessage, props.children.props);
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ListVirtualized, _extends({}, props, {
-      optionHeight: optionHeight,
-      selectedValue: selectedValue,
-      defaultValue: defaultValue,
-      valueGetter: valueGetter,
-      formatOptionLabel: formatOptionLabel
-    }));
-  });
-  Comp.displayName = 'VirtualizedListComp';
-  return Comp;
-};
-var StyledList = styled_components__WEBPACK_IMPORTED_MODULE_3___default()(react_virtualized__WEBPACK_IMPORTED_MODULE_2__.List).withConfig({
-  displayName: "StyledList",
-  componentId: "sc-14zmt95-0"
-})(["", ""], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].scrollbars.thin);
-var ListVirtualizedComponent = function ListVirtualizedComponent(props) {
-  var listComponent;
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(undefined),
-    _useState2 = _slicedToArray(_useState, 2),
-    focusedItemIndex = _useState2[0],
-    setFocusedItemIndex = _useState2[1];
-  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(undefined),
-    _useState4 = _slicedToArray(_useState3, 2),
-    queueScrollToIdx = _useState4[0],
-    setQueueScrollToIdx = _useState4[1];
-  var maxHeight = props.maxHeight,
-    children = props.children,
-    optionHeight = props.optionHeight,
-    options = props.options,
-    selectedValue = props.selectedValue,
-    defaultValue = props.defaultValue,
-    valueGetter = props.valueGetter,
-    formatOptionLabel = props.formatOptionLabel;
-  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-    // only scroll to index when we have something in the queue of focused
-    // and not visible
-    if (listComponent && queueScrollToIdx !== undefined && focusedItemIndex !== undefined) {
-      listComponent.current.scrollToRow((0,_util_getters__WEBPACK_IMPORTED_MODULE_6__.getNextRowIndex)(focusedItemIndex, queueScrollToIdx, options));
-      setQueueScrollToIdx(undefined);
-    }
-  }, [listComponent, queueScrollToIdx, focusedItemIndex, options]);
-  var onOptionFocused = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_ref2) {
-    var index = _ref2.index,
-      isVisible = _ref2.isVisible;
-    // enqueue the changes to the task queue so we do not interrupt rendering
-    setTimeout(function () {
-      if (index !== undefined && focusedItemIndex !== index && isVisible) setFocusedItemIndex(index);else if (index !== undefined && !isVisible && !queueScrollToIdx) setQueueScrollToIdx(index);
-    }, 100);
-  }, [setFocusedItemIndex, focusedItemIndex, setQueueScrollToIdx, queueScrollToIdx]);
-  var height = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    return (0,_util_getters__WEBPACK_IMPORTED_MODULE_6__.getListHeight)({
-      maxHeight: maxHeight,
-      totalSize: children.length,
-      optionHeight: optionHeight
-    });
-  }, [maxHeight, children.length, optionHeight]);
-  var scrollToIndex = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    return (0,_util_getters__WEBPACK_IMPORTED_MODULE_6__.getScrollIndex)({
-      children: options,
-      selected: selectedValue || defaultValue,
-      valueGetter: valueGetter
-    });
-  }, [options, selectedValue, defaultValue, valueGetter]);
-  var rowRenderer = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    return VirtualizedListRowRenderer({
-      children: children,
-      onOptionFocused: onOptionFocused,
-      optionHeight: optionHeight,
-      formatOptionLabel: formatOptionLabel
-    });
-  }, [children, onOptionFocused, optionHeight, formatOptionLabel]);
-  var list = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    return [];
-  }, []);
-  var isRowLoaded = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_ref3) {
-    var index = _ref3.index;
-    return !!list[index];
-  }, [list]);
-  var loadMoreRows = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useDebouncedCallback)(function (_ref4) {
-    var startIndex = _ref4.startIndex,
-      stopIndex = _ref4.stopIndex;
-    for (var i = startIndex; i <= stopIndex; i++) list.push(children[i]);
-  }, 100);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_virtualized__WEBPACK_IMPORTED_MODULE_2__.AutoSizer, {
-    disableHeight: true
-  }, function (_ref5) {
-    var width = _ref5.width;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_virtualized__WEBPACK_IMPORTED_MODULE_2__.InfiniteLoader, {
-      isRowLoaded: isRowLoaded,
-      threshold: props.threshold,
-      loadMoreRows: loadMoreRows,
-      rowCount: props.children.length || 0,
-      minimumBatchSize: props.minimumBatchSize
-    }, function (_ref6) {
-      var onRowsRendered = _ref6.onRowsRendered,
-        registerChild = _ref6.registerChild;
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledList, {
-        ref: function ref(element) {
-          registerChild(element);
-          listComponent = {
-            current: element
-          };
-          return element;
-        },
-        onRowsRendered: onRowsRendered,
-        height: height,
-        scrollToIndex: scrollToIndex,
-        rowCount: props.children.length,
-        rowHeight: props.optionHeight,
-        rowRenderer: rowRenderer,
-        width: width
-      });
-    });
-  });
-};
-var ListVirtualized = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().memo(ListVirtualizedComponent);
-ListVirtualized.propTypes = {
-  maxHeight: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
-  // this prop is coming from react-select
-  children: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node).isRequired,
-  optionHeight: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
-  selectedValue: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
-  defaultValue: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
-  valueGetter: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  options: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().array).isRequired,
-  minimumBatchSize: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number)
-};
-ListVirtualized.defaultProps = {
-  valueGetter: function valueGetter(item) {
-    return item && item.value;
-  },
-  maxHeight: 200,
-  minimumBatchSize: 100
-};
-var VirtualizedListRowRenderer = function VirtualizedListRowRenderer(_ref7) {
-  var children = _ref7.children,
-    onOptionFocused = _ref7.onOptionFocused,
-    optionHeight = _ref7.optionHeight,
-    formatOptionLabel = _ref7.formatOptionLabel;
-  var Comp = function Comp(_ref8) {
-    var key = _ref8.key,
-      index = _ref8.index,
-      style = _ref8.style,
-      isVisible = _ref8.isVisible,
-      isScrolling = _ref8.isScrolling;
-    // reality is that we do not need to pass the list here.
-    // we can work straight with the children.
-    // since the actual behavior will be handled by the renderer
-    var thisProps = children[index].props;
-    var className = thisProps.cx({
-      'virtualized-item': true
-    });
-    if (thisProps.isFocused && !isScrolling) onOptionFocused({
-      data: thisProps.data,
-      index: index,
-      isVisible: isVisible,
-      isScrolling: isScrolling
-    });
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
-      className: className,
-      key: key,
-      style: style
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_option__WEBPACK_IMPORTED_MODULE_7__.Option, _extends({}, thisProps, {
-      key: key,
-      style: style,
-      isVisible: isVisible,
-      isScrolling: isScrolling,
-      optionHeight: optionHeight,
-      formatOptionLabel: formatOptionLabel,
-      tag: "div"
-    })));
-  };
-  Comp.displayName = 'VirtualizedListRowRendererComp';
-  return Comp;
-};
-
-/***/ }),
-
 /***/ "./src/input/compare_to.js":
 /*!*********************************!*\
   !*** ./src/input/compare_to.js ***!
@@ -37976,7 +37746,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _menu_list__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./menu_list */ "./src/input/dropdown/menu_list.js");
 /* harmony import */ var _option__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./option */ "./src/input/dropdown/option.js");
 /* harmony import */ var _value_container__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./value_container */ "./src/input/dropdown/value_container.js");
-/* harmony import */ var _virtualized_list__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./virtualized_list */ "./src/input/dropdown/virtualized_list.js");
+/* harmony import */ var _util_virtualized_list__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../util/virtualized_list */ "./src/util/virtualized_list.js");
 // LICENSE_CODE ZON
 
 
@@ -38006,10 +37776,11 @@ var buildComponents = function buildComponents(props) {
     Option: _option__WEBPACK_IMPORTED_MODULE_4__.Option
   }, props.components);
   if (props.virtualized) {
-    components.MenuList = (0,_virtualized_list__WEBPACK_IMPORTED_MODULE_6__.VirtualizedListFactory)({
+    components.MenuList = (0,_util_virtualized_list__WEBPACK_IMPORTED_MODULE_6__.VirtualizedListFactory)({
       optionHeight: props.optionHeight,
       defaultValue: props.defaultValue,
-      formatOptionLabel: props.formatOptionLabel
+      formatOptionLabel: props.formatOptionLabel,
+      Option: components.Option
     });
   }
   if (props.autosize === false && props.multiselect) components.ValueContainer = _value_container__WEBPACK_IMPORTED_MODULE_5__.ValueContainer;
@@ -38247,7 +38018,7 @@ Dropdown.propTypes = {
   disabled: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   required: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   invalid: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
-  label: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func)]),
+  label: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   labelIcon: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
   helperText: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node),
   size: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['sm', 'md', 'lg']),
@@ -38491,6 +38262,7 @@ var Option = function Option(props) {
     innerProps = props.innerProps;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledItem, _extends({
     ref: innerRef,
+    "data-option": true,
     type: "item",
     className: cx({
       option: true,
@@ -38500,6 +38272,7 @@ var Option = function Option(props) {
     }, className)
   }, lodash_omit__WEBPACK_IMPORTED_MODULE_0___default()(innerProps, 'onMouseMove', 'onMouseOver'), {
     text: children,
+    description: data.description,
     tooltip: data.tooltip,
     disabled: isDisabled,
     selected: isSelected,
@@ -38768,278 +38541,39 @@ var ValueContainerComponent = function ValueContainerComponent(props) {
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_select__WEBPACK_IMPORTED_MODULE_4__.c.ValueContainer, rest, visibleOpts, (recalculationRender || hiddenCount > 0) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(MoreOpt, {
     key: "more-badge",
     ref: moreOptRef,
-    inputProps: props,
-    count: hiddenCount
-  }), childsToRender));
-};
-var ValueContainer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)(ValueContainerComponent);
-var MoreOpt = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, ref) {
-  var count = props.count,
-    inputProps = props.inputProps;
-  var multiValueProps = (0,_util_getters__WEBPACK_IMPORTED_MODULE_3__.getStyleProps)(inputProps, 'multiValue', {
-    'multi-value': true,
-    'multi-value--more': true
-  });
-  var multiValueLabelProps = (0,_util_getters__WEBPACK_IMPORTED_MODULE_3__.getStyleProps)(inputProps, 'multiValueLabel', {
-    'multi-value__label': true
-  });
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Generic, _extends({
-    ref: ref
-  }, multiValueProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Generic, multiValueLabelProps, "+".concat(count), "\xA0"));
-});
-MoreOpt.displayName = 'MoreOpt';
-var OptsWrapper = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
-  displayName: "OptsWrapper",
-  componentId: "sc-1kh0w5j-0"
-})(["flex:1;"]);
-var Generic = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
-  displayName: "Generic",
-  componentId: "sc-1kh0w5j-1"
-})(["", ""], function (prop) {
-  return prop.$css;
-});
-var isValueChild = function isValueChild(child) {
-  var _child$type;
-  return ['MultiValue', 'SingleValue'].includes((child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) || '');
-};
-
-/***/ }),
-
-/***/ "./src/input/dropdown/virtualized_list.js":
-/*!************************************************!*\
-  !*** ./src/input/dropdown/virtualized_list.js ***!
-  \************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   VirtualizedListFactory: () => (/* binding */ VirtualizedListFactory)
-/* harmony export */ });
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_select__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react-select */ "./node_modules/react-select/dist/index-a301f526.esm.js");
-/* harmony import */ var react_virtualized__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-virtualized */ "react-virtualized");
-/* harmony import */ var react_virtualized__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_virtualized__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ "styled-components");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
-/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../theme */ "./src/theme.js");
-/* harmony import */ var _util_getters__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../util/getters */ "./src/util/getters.js");
-/* harmony import */ var _option__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./option */ "./src/input/dropdown/option.js");
-// LICENSE_CODE ZON
-
-
-/*jslint react:true*/
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-
-
-
-
-
-
-
-
-var VirtualizedListFactory = function VirtualizedListFactory(_ref) {
-  var _ref$optionHeight = _ref.optionHeight,
-    optionHeight = _ref$optionHeight === void 0 ? 40 : _ref$optionHeight,
-    defaultValue = _ref.defaultValue,
-    valueGetter = _ref.valueGetter,
-    formatOptionLabel = _ref.formatOptionLabel;
-  var Comp = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().memo(function (props) {
-    var selectedValue = props.getValue() ? props.getValue()[0] : undefined;
-    if (props.children && !props.children.length) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_select__WEBPACK_IMPORTED_MODULE_8__.c.NoOptionsMessage, props.children.props);
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ListVirtualized, _extends({}, props, {
-      optionHeight: optionHeight,
-      selectedValue: selectedValue,
-      defaultValue: defaultValue,
-      valueGetter: valueGetter,
-      formatOptionLabel: formatOptionLabel
-    }));
-  });
-  Comp.displayName = 'VirtualizedListComp';
-  return Comp;
-};
-var StyledList = styled_components__WEBPACK_IMPORTED_MODULE_3___default()(react_virtualized__WEBPACK_IMPORTED_MODULE_2__.List).withConfig({
-  displayName: "StyledList",
-  componentId: "sc-18emnrh-0"
-})(["", ""], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].scrollbars.thin);
-var ListVirtualizedComponent = function ListVirtualizedComponent(props) {
-  var listComponent;
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(undefined),
-    _useState2 = _slicedToArray(_useState, 2),
-    focusedItemIndex = _useState2[0],
-    setFocusedItemIndex = _useState2[1];
-  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(undefined),
-    _useState4 = _slicedToArray(_useState3, 2),
-    queueScrollToIdx = _useState4[0],
-    setQueueScrollToIdx = _useState4[1];
-  var maxHeight = props.maxHeight,
-    children = props.children,
-    optionHeight = props.optionHeight,
-    options = props.options,
-    selectedValue = props.selectedValue,
-    defaultValue = props.defaultValue,
-    valueGetter = props.valueGetter,
-    formatOptionLabel = props.formatOptionLabel;
-  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-    // only scroll to index when we have something in the queue of focused
-    // and not visible
-    if (listComponent && queueScrollToIdx !== undefined && focusedItemIndex !== undefined) {
-      listComponent.current.scrollToRow((0,_util_getters__WEBPACK_IMPORTED_MODULE_6__.getNextRowIndex)(focusedItemIndex, queueScrollToIdx, options));
-      setQueueScrollToIdx(undefined);
-    }
-  }, [listComponent, queueScrollToIdx, focusedItemIndex, options]);
-  var onOptionFocused = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_ref2) {
-    var index = _ref2.index,
-      isVisible = _ref2.isVisible;
-    // enqueue the changes to the task queue so we do not interrupt rendering
-    setTimeout(function () {
-      if (index !== undefined && focusedItemIndex !== index && isVisible) setFocusedItemIndex(index);else if (index !== undefined && !isVisible && !queueScrollToIdx) setQueueScrollToIdx(index);
-    }, 100);
-  }, [setFocusedItemIndex, focusedItemIndex, setQueueScrollToIdx, queueScrollToIdx]);
-  var height = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    return (0,_util_getters__WEBPACK_IMPORTED_MODULE_6__.getListHeight)({
-      maxHeight: maxHeight,
-      totalSize: children.length,
-      optionHeight: optionHeight
-    });
-  }, [maxHeight, children.length, optionHeight]);
-  var scrollToIndex = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    return (0,_util_getters__WEBPACK_IMPORTED_MODULE_6__.getScrollIndex)({
-      children: options,
-      selected: selectedValue || defaultValue,
-      valueGetter: valueGetter
-    });
-  }, [options, selectedValue, defaultValue, valueGetter]);
-  var rowRenderer = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    return VirtualizedListRowRenderer({
-      children: children,
-      onOptionFocused: onOptionFocused,
-      optionHeight: optionHeight,
-      formatOptionLabel: formatOptionLabel
-    });
-  }, [children, onOptionFocused, optionHeight, formatOptionLabel]);
-  var list = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    return [];
-  }, []);
-  var isRowLoaded = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_ref3) {
-    var index = _ref3.index;
-    return !!list[index];
-  }, [list]);
-  var loadMoreRows = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useDebouncedCallback)(function (_ref4) {
-    var startIndex = _ref4.startIndex,
-      stopIndex = _ref4.stopIndex;
-    for (var i = startIndex; i <= stopIndex; i++) list.push(children[i]);
-  }, 100);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_virtualized__WEBPACK_IMPORTED_MODULE_2__.AutoSizer, {
-    disableHeight: true
-  }, function (_ref5) {
-    var width = _ref5.width;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_virtualized__WEBPACK_IMPORTED_MODULE_2__.InfiniteLoader, {
-      isRowLoaded: isRowLoaded,
-      threshold: props.threshold,
-      loadMoreRows: loadMoreRows,
-      rowCount: props.children.length || 0,
-      minimumBatchSize: props.minimumBatchSize
-    }, function (_ref6) {
-      var onRowsRendered = _ref6.onRowsRendered,
-        registerChild = _ref6.registerChild;
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledList, {
-        ref: function ref(element) {
-          registerChild(element);
-          listComponent = {
-            current: element
-          };
-          return element;
-        },
-        onRowsRendered: onRowsRendered,
-        height: height,
-        scrollToIndex: scrollToIndex,
-        rowCount: props.children.length,
-        rowHeight: props.optionHeight,
-        rowRenderer: rowRenderer,
-        width: width
-      });
-    });
-  });
-};
-var ListVirtualized = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().memo(ListVirtualizedComponent);
-ListVirtualized.propTypes = {
-  maxHeight: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
-  // this prop is coming from react-select
-  children: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node).isRequired,
-  optionHeight: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
-  selectedValue: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
-  defaultValue: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
-  valueGetter: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-  options: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().array).isRequired,
-  minimumBatchSize: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number)
-};
-ListVirtualized.defaultProps = {
-  valueGetter: function valueGetter(item) {
-    return item && item.value;
-  },
-  maxHeight: 200,
-  minimumBatchSize: 100
-};
-var VirtualizedListRowRenderer = function VirtualizedListRowRenderer(_ref7) {
-  var children = _ref7.children,
-    onOptionFocused = _ref7.onOptionFocused,
-    optionHeight = _ref7.optionHeight,
-    formatOptionLabel = _ref7.formatOptionLabel;
-  var Comp = function Comp(_ref8) {
-    var key = _ref8.key,
-      index = _ref8.index,
-      style = _ref8.style,
-      isVisible = _ref8.isVisible,
-      isScrolling = _ref8.isScrolling;
-    // reality is that we do not need to pass the list here.
-    // we can work straight with the children.
-    // since the actual behavior will be handled by the renderer
-    var thisProps = children[index].props;
-    var className = thisProps.cx({
-      'virtualized-item': true
-    });
-    if (thisProps.isFocused && !isScrolling) onOptionFocused({
-      data: thisProps.data,
-      index: index,
-      isVisible: isVisible,
-      isScrolling: isScrolling
-    });
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
-      className: className,
-      key: key,
-      style: style
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_option__WEBPACK_IMPORTED_MODULE_7__.Option, {
-      key: key,
-      style: style,
-      data: thisProps.data,
-      isVisible: isVisible,
-      isScrolling: isScrolling,
-      optionHeight: optionHeight,
-      isDisabled: thisProps.isDisabled,
-      isFocused: thisProps.isFocused,
-      isSelected: thisProps.isSelected,
-      className: thisProps.className,
-      cx: thisProps.cx,
-      innerRef: thisProps.innerRef,
-      innerProps: thisProps.innerProps,
-      formatOptionLabel: formatOptionLabel,
-      tag: "div"
-    }, thisProps.children));
-  };
-  Comp.displayName = 'VirtualizedListRowRendererComp';
-  return Comp;
+    inputProps: props,
+    count: hiddenCount
+  }), childsToRender));
+};
+var ValueContainer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.memo)(ValueContainerComponent);
+var MoreOpt = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, ref) {
+  var count = props.count,
+    inputProps = props.inputProps;
+  var multiValueProps = (0,_util_getters__WEBPACK_IMPORTED_MODULE_3__.getStyleProps)(inputProps, 'multiValue', {
+    'multi-value': true,
+    'multi-value--more': true
+  });
+  var multiValueLabelProps = (0,_util_getters__WEBPACK_IMPORTED_MODULE_3__.getStyleProps)(inputProps, 'multiValueLabel', {
+    'multi-value__label': true
+  });
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Generic, _extends({
+    ref: ref
+  }, multiValueProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Generic, multiValueLabelProps, "+".concat(count), "\xA0"));
+});
+MoreOpt.displayName = 'MoreOpt';
+var OptsWrapper = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
+  displayName: "OptsWrapper",
+  componentId: "sc-1kh0w5j-0"
+})(["flex:1;"]);
+var Generic = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
+  displayName: "Generic",
+  componentId: "sc-1kh0w5j-1"
+})(["", ""], function (prop) {
+  return prop.$css;
+});
+var isValueChild = function isValueChild(child) {
+  var _child$type;
+  return ['MultiValue', 'SingleValue'].includes((child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) || '');
 };
 
 /***/ }),
@@ -45482,6 +45016,248 @@ var getStyleProps = function getStyleProps(props, name, classNamesState) {
 
 /***/ }),
 
+/***/ "./src/util/virtualized_list.js":
+/*!**************************************!*\
+  !*** ./src/util/virtualized_list.js ***!
+  \**************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   VirtualizedListFactory: () => (/* binding */ VirtualizedListFactory)
+/* harmony export */ });
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react_select__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react-select */ "./node_modules/react-select/dist/index-a301f526.esm.js");
+/* harmony import */ var react_virtualized__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-virtualized */ "react-virtualized");
+/* harmony import */ var react_virtualized__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_virtualized__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks */ "./src/hooks/index.js");
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
+/* harmony import */ var _getters__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./getters */ "./src/util/getters.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+
+
+
+
+
+
+
+var VirtualizedListFactory = function VirtualizedListFactory(_ref) {
+  var _ref$optionHeight = _ref.optionHeight,
+    optionHeight = _ref$optionHeight === void 0 ? 40 : _ref$optionHeight,
+    defaultValue = _ref.defaultValue,
+    valueGetter = _ref.valueGetter,
+    formatOptionLabel = _ref.formatOptionLabel,
+    Option = _ref.Option;
+  var Comp = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().memo(function (props) {
+    var selectedValue = props.getValue() ? props.getValue()[0] : undefined;
+    if (props.children && !props.children.length) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_select__WEBPACK_IMPORTED_MODULE_7__.c.NoOptionsMessage, props.children.props);
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(ListVirtualized, _extends({}, props, {
+      optionHeight: optionHeight,
+      selectedValue: selectedValue,
+      defaultValue: defaultValue,
+      valueGetter: valueGetter,
+      formatOptionLabel: formatOptionLabel,
+      Option: Option
+    }));
+  });
+  Comp.displayName = 'VirtualizedListComp';
+  return Comp;
+};
+var StyledList = styled_components__WEBPACK_IMPORTED_MODULE_3___default()(react_virtualized__WEBPACK_IMPORTED_MODULE_2__.List).withConfig({
+  displayName: "StyledList",
+  componentId: "sc-1142w0k-0"
+})(["", ""], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].scrollbars.thin);
+var ListVirtualizedComponent = function ListVirtualizedComponent(props) {
+  var listComponent;
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusedItemIndex = _useState2[0],
+    setFocusedItemIndex = _useState2[1];
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    queueScrollToIdx = _useState4[0],
+    setQueueScrollToIdx = _useState4[1];
+  var maxHeight = props.maxHeight,
+    children = props.children,
+    optionHeight = props.optionHeight,
+    options = props.options,
+    selectedValue = props.selectedValue,
+    defaultValue = props.defaultValue,
+    valueGetter = props.valueGetter,
+    formatOptionLabel = props.formatOptionLabel,
+    Option = props.Option;
+  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+    // only scroll to index when we have something in the queue of focused
+    // and not visible
+    if (listComponent && queueScrollToIdx !== undefined && focusedItemIndex !== undefined) {
+      listComponent.current.scrollToRow((0,_getters__WEBPACK_IMPORTED_MODULE_6__.getNextRowIndex)(focusedItemIndex, queueScrollToIdx, options));
+      setQueueScrollToIdx(undefined);
+    }
+  }, [listComponent, queueScrollToIdx, focusedItemIndex, options]);
+  var onOptionFocused = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_ref2) {
+    var index = _ref2.index,
+      isVisible = _ref2.isVisible;
+    // enqueue the changes to the task queue so we do not interrupt rendering
+    setTimeout(function () {
+      if (index !== undefined && focusedItemIndex !== index && isVisible) setFocusedItemIndex(index);else if (index !== undefined && !isVisible && !queueScrollToIdx) setQueueScrollToIdx(index);
+    }, 100);
+  }, [setFocusedItemIndex, focusedItemIndex, setQueueScrollToIdx, queueScrollToIdx]);
+  var height = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return (0,_getters__WEBPACK_IMPORTED_MODULE_6__.getListHeight)({
+      maxHeight: maxHeight,
+      totalSize: children.length,
+      optionHeight: optionHeight
+    });
+  }, [maxHeight, children.length, optionHeight]);
+  var scrollToIndex = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return (0,_getters__WEBPACK_IMPORTED_MODULE_6__.getScrollIndex)({
+      children: options,
+      selected: selectedValue || defaultValue,
+      valueGetter: valueGetter
+    });
+  }, [options, selectedValue, defaultValue, valueGetter]);
+  var rowRenderer = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return VirtualizedListRowRenderer({
+      children: children,
+      onOptionFocused: onOptionFocused,
+      optionHeight: optionHeight,
+      formatOptionLabel: formatOptionLabel,
+      Option: Option
+    });
+  }, [children, onOptionFocused, optionHeight, formatOptionLabel, Option]);
+  var list = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return [];
+  }, []);
+  var isRowLoaded = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (_ref3) {
+    var index = _ref3.index;
+    return !!list[index];
+  }, [list]);
+  var loadMoreRows = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useDebouncedCallback)(function (_ref4) {
+    var startIndex = _ref4.startIndex,
+      stopIndex = _ref4.stopIndex;
+    for (var i = startIndex; i <= stopIndex; i++) list.push(children[i]);
+  }, 100);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_virtualized__WEBPACK_IMPORTED_MODULE_2__.AutoSizer, {
+    disableHeight: true
+  }, function (_ref5) {
+    var width = _ref5.width;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(react_virtualized__WEBPACK_IMPORTED_MODULE_2__.InfiniteLoader, {
+      isRowLoaded: isRowLoaded,
+      threshold: props.threshold,
+      loadMoreRows: loadMoreRows,
+      rowCount: props.children.length || 0,
+      minimumBatchSize: props.minimumBatchSize
+    }, function (_ref6) {
+      var onRowsRendered = _ref6.onRowsRendered,
+        registerChild = _ref6.registerChild;
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(StyledList, {
+        ref: function ref(element) {
+          registerChild(element);
+          listComponent = {
+            current: element
+          };
+          return element;
+        },
+        onRowsRendered: onRowsRendered,
+        height: height,
+        scrollToIndex: scrollToIndex,
+        rowCount: props.children.length,
+        rowHeight: props.optionHeight,
+        rowRenderer: rowRenderer,
+        width: width
+      });
+    });
+  });
+};
+var ListVirtualized = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().memo(ListVirtualizedComponent);
+ListVirtualized.propTypes = {
+  maxHeight: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
+  // this prop is coming from react-select
+  children: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().node).isRequired,
+  optionHeight: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
+  selectedValue: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
+  defaultValue: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().object),
+  valueGetter: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
+  options: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().array).isRequired,
+  minimumBatchSize: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number)
+};
+ListVirtualized.defaultProps = {
+  valueGetter: function valueGetter(item) {
+    return item && item.value;
+  },
+  maxHeight: 200,
+  minimumBatchSize: 100
+};
+var VirtualizedListRowRenderer = function VirtualizedListRowRenderer(_ref7) {
+  var children = _ref7.children,
+    onOptionFocused = _ref7.onOptionFocused,
+    optionHeight = _ref7.optionHeight,
+    formatOptionLabel = _ref7.formatOptionLabel,
+    Option = _ref7.Option;
+  var Comp = function Comp(_ref8) {
+    var key = _ref8.key,
+      index = _ref8.index,
+      style = _ref8.style,
+      isVisible = _ref8.isVisible,
+      isScrolling = _ref8.isScrolling;
+    // reality is that we do not need to pass the list here.
+    // we can work straight with the children.
+    // since the actual behavior will be handled by the renderer
+    var thisProps = children[index].props;
+    var className = thisProps.cx({
+      'virtualized-item': true
+    });
+    if (thisProps.isFocused && !isScrolling) onOptionFocused({
+      data: thisProps.data,
+      index: index,
+      isVisible: isVisible,
+      isScrolling: isScrolling
+    });
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
+      className: className,
+      key: key,
+      style: style
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Option, {
+      key: key,
+      style: style,
+      data: thisProps.data,
+      isVisible: isVisible,
+      isScrolling: isScrolling,
+      optionHeight: optionHeight,
+      isDisabled: thisProps.isDisabled,
+      isFocused: thisProps.isFocused,
+      isSelected: thisProps.isSelected,
+      className: thisProps.className,
+      cx: thisProps.cx,
+      innerRef: thisProps.innerRef,
+      innerProps: thisProps.innerProps,
+      formatOptionLabel: formatOptionLabel,
+      tag: "div"
+    }, thisProps.children));
+  };
+  Comp.displayName = 'VirtualizedListRowRendererComp';
+  return Comp;
+};
+
+/***/ }),
+
 /***/ "./src/util/with_user_styles.js":
 /*!**************************************!*\
   !*** ./src/util/with_user_styles.js ***!