@zohodesk/components 1.0.0-temp-80 → 1.0.0-temp-81

package/lib/Select/Select.module.css

@@ -1,106 +1,109 @@
-.input {
-  cursor: pointer;
-}
-.small {
-  max-height: var(--zd_size200);
-}
-.medium {
-  max-height: var(--zd_size350);
-}
-.large {
-  max-height: var(--zd_size400);
-}
-.emptyState {
-  font-size: var(--zd_font_size14);
-  color: var(--zdt_select_emptystate_text);
-  composes: semibold from '../common/common.module.css';
-}
-.box_small .emptyState {
-  padding: var(--zd_size12) var(--zd_size6);
-}
-.box_medium .emptyState {
-  padding: var(--zd_size12) var(--zd_size15);
-}
-.hide {
-  composes: vishidden from '../common/common.module.css';
-}
-.container {
-  position: relative;
-}
-.arrowIcon {
-  height: var(--zd_size8);
-  line-height: var(--zd_size8);
-}
-.small.search {
-  padding: 0 var(--zd_size5);
-}
-.medium.search {
-  padding: var(--zd_size3) var(--zd_size20) 0;
-}
-.title {
-  margin-bottom: var(--zd_size6);
-}
-.groupTitle {
-  margin: var(--zd_size6) 0;
-}
-.listItemContainer {
-  padding: var(--zd_size10) 0;
-}
-.responsivelistItemContainer {
-  padding: var(--zd_size10) 0 0;
-}
-.readonly {
-  --textboxicon_icon_cursor: not-allowed;
-}
-.transparentContainer .arrowIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-.transparentContainer:hover .arrowIcon {
-  opacity: 1;
-  visibility: visible;
-}
-.disable {
-  color: var(--zdt_select_disable_text);
-}
-
-.leftIcon {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: var(--zd_size30);
-}
-
-[dir=ltr] .leftIcon {
-  left: 0;
-}
-
-[dir=rtl] .leftIcon {
-  right: 0;
-}
-[dir=ltr] .iconSelect {
-  padding-left: var(--zd_size30);
-}
-[dir=rtl] .iconSelect {
-  padding-right: var(--zd_size30);
-}
-
-.dropBoxList {
-  padding: var(--zd_size10) 0;
-}
-.responsivedropBoxList{
-  padding: var(--zd_size10) 0 0 0;
-}
-.rotate {
-  transform: rotateX(180deg);
-}
-.iconOnHoverStyle .arrowIcon,
-.iconOnHoverReadonly .arrowIcon,
-.iconOnHoverReadonly:hover .arrowIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-.iconOnHoverStyle:hover .arrowIcon {
-  opacity: 1;
-  visibility: visible;
-}
+.input {
+  cursor: pointer;
+}
+.small {
+  max-height: var(--zd_size200);
+}
+.medium {
+  max-height: var(--zd_size350);
+}
+.large {
+  max-height: var(--zd_size400);
+}
+.emptyState {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_select_emptystate_text);
+  composes: semibold from '../common/common.module.css';
+}
+.box_small .emptyState {
+  padding: var(--zd_size12) var(--zd_size6);
+}
+.box_medium .emptyState {
+  padding: var(--zd_size12) var(--zd_size15);
+}
+.hide {
+  composes: vishidden from '../common/common.module.css';
+}
+.container {
+  position: relative;
+}
+.arrowIcon {
+  height: var(--zd_size8);
+  line-height: var(--zd_size8);
+}
+.small.search {
+  padding: 0 var(--zd_size5);
+}
+.medium.search {
+  padding: var(--zd_size3) var(--zd_size20) 0;
+}
+.title {
+  margin-bottom: var(--zd_size6);
+}
+.groupTitle {
+  margin: var(--zd_size6) 0;
+}
+.listItemContainer {
+  padding: var(--zd_size10) 0;
+}
+.responsivelistItemContainer {
+  padding: var(--zd_size10) 0 0;
+}
+.readonly {
+  --textboxicon_icon_cursor: not-allowed;
+}
+.transparentContainer .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+.transparentContainer:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+.disable {
+  color: var(--zdt_select_disable_text);
+}
+
+.leftIcon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--zd_size30);
+}
+
+[dir=ltr] .leftIcon {
+  left: 0;
+}
+
+[dir=rtl] .leftIcon {
+  right: 0;
+}
+[dir=ltr] .iconSelect {
+  padding-left: var(--zd_size30);
+}
+[dir=rtl] .iconSelect {
+  padding-right: var(--zd_size30);
+}
+
+.dropBoxList {
+  padding: var(--zd_size10) 0;
+}
+.responsivedropBoxList{
+  padding: var(--zd_size10) 0 0 0;
+}
+.rotate {
+  transform: rotateX(180deg);
+}
+.iconOnHoverStyle .arrowIcon,
+.iconOnHoverReadonly .arrowIcon,
+.iconOnHoverReadonly:hover .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+.iconOnHoverStyle:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+.loader {
+  padding: var(--zd_size10);
+}

package/lib/Select/SelectWithAvatar.js

@@ -21,6 +21,7 @@ var _DropDownHeading = _interopRequireDefault(require("../DropDown/DropDownHeadi
 var _IdProvider = require("../Provider/IdProvider");
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
 var _CustomResponsive = require("../Responsive/CustomResponsive");
+var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 var _MultiSelectModule = _interopRequireDefault(require("../MultiSelect/MultiSelect.module.css"));
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -160,7 +161,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         groupName = _this$props.groupName,
         i18nKeys = _this$props.i18nKeys,
         htmlId = _this$props.htmlId,
-        needEffect = _this$props.needEffect;
+        needEffect = _this$props.needEffect,
+        isLoading = _this$props.isLoading;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -252,7 +254,10 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           isPadding: false,
           isResponsivePadding: true,
           alignBox: "row"
-        }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          align: "both",
+          className: _MultiSelectModule["default"].loader
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
           onScroll: _this2.handleScroll
@@ -309,7 +314,10 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           dataId: dataId,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
-        })))));
+        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          isCover: false,
+          align: "both"
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))))));
       }) : null);
     }
   }]);
@@ -328,5 +336,5 @@ if (false) {
   // eslint-disable-next-line react/forbid-foreign-prop-types
   SelectWithAvatar.propTypes = SelectWithAvatarComponent.propTypes;
 }
-var _default = (0, _Popup["default"])(SelectWithAvatar);
+var _default = SelectWithAvatar;
 exports["default"] = _default;

package/lib/Select/SelectWithIcon.js

@@ -18,6 +18,7 @@ var _Layout = require("../Layout");
 var _IdProvider = require("../Provider/IdProvider");
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
 var _CustomResponsive = require("../Responsive/CustomResponsive");
+var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 var _Common = require("../utils/Common.js");
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -43,8 +44,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
     _this.state = {
       searchValue: '',
       selectedIndex: 0,
-      options: props.options
+      options: props.options,
+      isFetchingOptions: false
     };
+    _this._isMounted = false;
     _this.onSearchClear = _this.onSearchClear.bind(_assertThisInitialized(_this));
     _this.onSearch = _this.onSearch.bind(_assertThisInitialized(_this));
     _this.togglePopup = _this.togglePopup.bind(_assertThisInitialized(_this));
@@ -57,9 +60,21 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
     _this.inputRef = _this.inputRef.bind(_assertThisInitialized(_this));
     _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
     _this.getNextAriaId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
+    _this.handleGetNextOptions = _this.handleGetNextOptions.bind(_assertThisInitialized(_this));
+    _this.handleFetchOptions = _this.handleFetchOptions.bind(_assertThisInitialized(_this));
     return _this;
   }
   _createClass(SelectWithIcon, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this._isMounted = true;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this._isMounted = false;
+    }
+  }, {
     key: "inputRef",
     value: function inputRef(el) {
       this.input = el;
@@ -98,8 +113,6 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
         selectedIndex = _this$state.selectedIndex,
         options = _this$state.options;
       var _this$props = this.props,
-        isNextOptions = _this$props.isNextOptions,
-        getNextOptions = _this$props.getNextOptions,
         idKey = _this$props.idKey,
         valueKey = _this$props.valueKey,
         isPopupOpen = _this$props.isPopupOpen,
@@ -126,7 +139,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
               });
             } else {
               if (selectedIndex === options.length - 3) {
-                isNextOptions && getNextOptions && getNextOptions();
+                this.handleGetNextOptions();
               }
               this.setState({
                 selectedIndex: selectedIndex + 1
@@ -235,11 +248,55 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleScroll",
     value: function handleScroll(e) {
+      var ele = e.target;
+      var isScrollReachedBottom = (0, _Common.findScrollEnd)(ele);
+      isScrollReachedBottom && this.handleGetNextOptions();
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (nextProps.options.length != this.props.options.length) {
+        this.setState({
+          options: nextProps.options
+        });
+      }
+    }
+  }, {
+    key: "handleGetNextOptions",
+    value: function handleGetNextOptions() {
       var _this$props6 = this.props,
         isNextOptions = _this$props6.isNextOptions,
         getNextOptions = _this$props6.getNextOptions;
-      if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
-        isNextOptions && getNextOptions && getNextOptions(e);
+      var searchValue = this.state.searchValue;
+      isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchValue);
+    }
+  }, {
+    key: "handleFetchOptions",
+    value: function handleFetchOptions(APICall) {
+      var _this4 = this;
+      var searchValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      var _this$state$isFetchin = this.state.isFetchingOptions,
+        isFetchingOptions = _this$state$isFetchin === void 0 ? false : _this$state$isFetchin;
+      var _isMounted = this._isMounted;
+      if (!isFetchingOptions && APICall) {
+        this.setState({
+          isFetchingOptions: true
+        });
+        try {
+          return APICall(searchValue).then(function () {
+            _isMounted && _this4.setState({
+              isFetchingOptions: false
+            });
+          }, function () {
+            _isMounted && _this4.setState({
+              isFetchingOptions: false
+            });
+          });
+        } catch (e) {
+          _isMounted && this.setState({
+            isFetchingOptions: false
+          });
+        }
       }
     }
   }, {
@@ -255,7 +312,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
       var _this$props7 = this.props,
         animationStyle = _this$props7.animationStyle,
         removeClose = _this$props7.removeClose,
@@ -290,13 +347,13 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
         boxSize = _this$props7.boxSize,
         dropBoxSize = _this$props7.dropBoxSize,
         emptyMessage = _this$props7.emptyMessage,
-        isFetchingOptions = _this$props7.isFetchingOptions,
         needIcon = _this$props7.needIcon,
         iconName = _this$props7.iconName,
         iconSize = _this$props7.iconSize,
         iconClass = _this$props7.iconClass,
         i18nKeys = _this$props7.i18nKeys,
-        htmlId = _this$props7.htmlId;
+        htmlId = _this$props7.htmlId,
+        isLoading = _this$props7.isLoading;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -304,7 +361,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
       var _this$state3 = this.state,
         searchValue = _this$state3.searchValue,
         selectedIndex = _this$state3.selectedIndex,
-        options = _this$state3.options;
+        options = _this$state3.options,
+        isFetchingOptions = _this$state3.isFetchingOptions;
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -384,10 +442,13 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           isPadding: false,
           isResponsivePadding: true,
           alignBox: "row"
-        }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          align: "both",
+          className: _SelectModule["default"].loader
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-          onScroll: _this4.handleScroll,
+          onScroll: _this5.handleScroll,
           htmlId: setAriaId,
           a11y: {
             role: 'listbox'
@@ -395,13 +456,13 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
           className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
         }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
-          onClear: _this4.onSearchClear,
-          onChange: _this4.onSearch,
+          onClear: _this5.onSearchClear,
+          onChange: _this5.onSearch,
           placeHolder: searchBoxPlaceHolder,
           value: searchValue,
           maxLength: maxLength,
-          onKeyDown: _this4.handleKeyDown,
-          inputRef: _this4.searchInputRef,
+          onKeyDown: _this5.handleKeyDown,
+          inputRef: _this5.searchInputRef,
           size: searchBoxSize,
           dataId: "".concat(dataId, "_search"),
           a11y: {
@@ -411,7 +472,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           customClass: "".concat(tabletMode ? _SelectModule["default"].responsivedropBoxList : _SelectModule["default"].dropBoxList, " ").concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : ''),
           shrink: true,
-          eleRef: _this4.scrollContentRef
+          eleRef: _this5.scrollContentRef
         }, options.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (options, i) {
           var iconName = options.iconName,
             iconSize = options.iconSize,
@@ -420,7 +481,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
             key: options[idKey],
             value: options[valueKey],
             size: "medium",
-            onClick: _this4.handleChange,
+            onClick: _this5.handleChange,
             id: options[idKey],
             index: i,
             title: options[valueKey],
@@ -432,9 +493,9 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
             active: selectedId === options[idKey],
             needBorder: needListBorder,
             needTick: needTick,
-            onMouseEnter: _this4.handleMouseEnter,
+            onMouseEnter: _this5.handleMouseEnter,
             highlight: selectedIndex === i,
-            getRef: _this4.itemRef,
+            getRef: _this5.itemRef,
             a11y: {
               role: 'option',
               ariaSelected: selectedId === options[idKey]
@@ -448,7 +509,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           dataId: dataId,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
-        })))));
+        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          isCover: false,
+          align: "both"
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))))));
       }) : null);
     }
   }]);

package/lib/Select/props/defaultProps.js

@@ -38,7 +38,8 @@ var Select_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   iconOnHover: false,
-  customProps: {}
+  customProps: {},
+  isLoading: false
 };
 exports.Select_defaultProps = Select_defaultProps;
 var GroupSelect_defaultProps = {
@@ -70,7 +71,8 @@ var GroupSelect_defaultProps = {
   needLocalSearch: true,
   isSearchClearOnClose: true,
   i18nKeys: {},
-  iconOnHover: false
+  iconOnHover: false,
+  isLoading: false
 };
 exports.GroupSelect_defaultProps = GroupSelect_defaultProps;
 var SelectWithAvatar_defaultProps = {
@@ -93,7 +95,8 @@ var SelectWithAvatar_defaultProps = {
   borderColor: 'default',
   isSearchClearOnClose: true,
   i18nKeys: {},
-  needEffect: true
+  needEffect: true,
+  isLoading: false
 };
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
@@ -105,5 +108,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

@@ -90,7 +90,8 @@ var Select_propTypes = {
     DropdownSearchTextBoxProps: _propTypes["default"].object,
     listItemProps: _propTypes["default"].object,
     SuggestionsProps: _propTypes["default"].object
-  })
+  }),
+  isLoading: _propTypes["default"].bool
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {
@@ -167,7 +168,8 @@ var GroupSelect_propTypes = {
     emptyText: _propTypes["default"].string,
     noMoreText: _propTypes["default"].string,
     searchEmptyText: _propTypes["default"].string
-  })
+  }),
+  isLoading: _propTypes["default"].bool
 };
 exports.GroupSelect_propTypes = GroupSelect_propTypes;
 var SelectWithAvatar_propTypes = {
@@ -225,7 +227,8 @@ var SelectWithAvatar_propTypes = {
   togglePopup: _propTypes["default"].func,
   valueField: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
-  needEffect: _propTypes["default"].bool
+  needEffect: _propTypes["default"].bool,
+  isLoading: _propTypes["default"].bool
 };
 exports.SelectWithAvatar_propTypes = SelectWithAvatar_propTypes;
 var SelectWithIcon_propTypes = {
@@ -271,6 +274,7 @@ var SelectWithIcon_propTypes = {
   textBoxVariant: _propTypes["default"].oneOf(['primary', 'secondary', 'default']),
   togglePopup: _propTypes["default"].func,
   valueKey: _propTypes["default"].string,
-  htmlId: _propTypes["default"].string
+  htmlId: _propTypes["default"].string,
+  isLoading: _propTypes["default"].bool
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;