@zohodesk/components 1.4.8 → 1.4.10-exp-0

package/lib/MultiSelect/props/propTypes.js

@@ -50,17 +50,20 @@ var MultiSelect_propTypes = {
   disableAction: _propTypes["default"].bool,
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   emptyMessage: _propTypes["default"].string.isRequired,
+  isVirtualizerEnabled: _propTypes["default"].bool,
   getContainerRef: _propTypes["default"].func,
   getNextOptions: _propTypes["default"].func,
   getPublicMethods: _propTypes["default"].func,
   getRef: _propTypes["default"].func,
   getTargetRef: _propTypes["default"].func,
   i18nKeys: _propTypes["default"].shape({
+    searchText: _propTypes["default"].string,
     clearText: _propTypes["default"].string,
     loadingText: _propTypes["default"].string,
     emptyText: _propTypes["default"].string,
     noMoreText: _propTypes["default"].string,
-    searchEmptyText: _propTypes["default"].string
+    searchEmptyText: _propTypes["default"].string,
+    limitReachedMessage: _propTypes["default"].string
   }),
   a11y: _propTypes["default"].shape({
     clearLabel: _propTypes["default"].string
@@ -135,7 +138,8 @@ var MultiSelect_propTypes = {
   isFocus: _propTypes["default"].bool,
   allowValueFallback: _propTypes["default"].bool,
   renderCustomClearComponent: _propTypes["default"].func,
-  renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
+  renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
+  limit: _propTypes["default"].number
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -176,7 +180,8 @@ var SelectedOptions_propTypes = {
   })),
   size: _propTypes["default"].oneOf(['medium', 'xmedium']),
   palette: _propTypes["default"].string,
-  dataId: _propTypes["default"].string
+  dataId: _propTypes["default"].string,
+  limit: _propTypes["default"].number
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
 var Suggestions_propTypes = {
@@ -188,6 +193,8 @@ var Suggestions_propTypes = {
   avatarPalette: _propTypes["default"].string,
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  isVirtualizerEnabled: _propTypes["default"].bool,
+  setVirtualizerContainerRefFunction: _propTypes["default"].func,
   getRef: _propTypes["default"].func,
   hoverId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   hoverOption: _propTypes["default"].number,
@@ -207,7 +214,9 @@ var Suggestions_propTypes = {
     logo: _propTypes["default"].string,
     optionType: _propTypes["default"].string,
     listItemProps: _propTypes["default"].object
-  }))
+  })),
+  limit: _propTypes["default"].number,
+  limitReachedMessage: _propTypes["default"].string
 };
 exports.Suggestions_propTypes = Suggestions_propTypes;
 var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
@@ -226,7 +235,8 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
     loadingText: _propTypes["default"].string,
     emptyText: _propTypes["default"].string,
     noMoreText: _propTypes["default"].string,
-    searchEmptyText: _propTypes["default"].string
+    searchEmptyText: _propTypes["default"].string,
+    limitReachedMessage: _propTypes["default"].string
   }),
   a11y: _propTypes["default"].shape({
     clearLabel: _propTypes["default"].string
@@ -278,7 +288,7 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {
@@ -293,70 +303,22 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
   selectedOptions: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])).isRequired,
   selectedOptionsLimit: _propTypes["default"].number,
   getSelectedOptionDetails: _propTypes["default"].func,
-  emptyMessage: _propTypes["default"].string.isRequired,
-  isDisabled: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  needLocalSearch: _propTypes["default"].bool,
-  needSelectAll: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func.isRequired,
-  searchEmptyMessage: _propTypes["default"].string,
-  placeHolder: _propTypes["default"].string,
-  selectAllText: _propTypes["default"].string,
-  textField: _propTypes["default"].string,
-  valueField: _propTypes["default"].string,
   imageField: _propTypes["default"].string,
   iconName: _propTypes["default"].string,
   prefixText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   //For grouping multiSelect
   optionType: _propTypes["default"].oneOf(['default', 'avatar', 'icon']),
-  needEffect: _propTypes["default"].bool,
   secondaryField: _propTypes["default"].string,
-  animationStyle: _propTypes["default"].string,
-  defaultDropBoxPosition: _propTypes["default"].oneOf(['bottom', 'top', 'left', 'right']),
-  dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
-  isAnimate: _propTypes["default"].bool,
-  size: _propTypes["default"].oneOf(['medium', 'xmedium']),
-  textBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'xmedium']),
-  title: _propTypes["default"].string,
-  variant: _propTypes["default"].string,
   dataIdClearIcon: _propTypes["default"].string,
   dataIdLoading: _propTypes["default"].string,
   dataIdMultiSelectComp: _propTypes["default"].string,
   dataIdSelectAllEle: _propTypes["default"].string,
-
-  /**** Popup Props ****/
-  isPopupOpen: _propTypes["default"].bool,
-  isPopupReady: _propTypes["default"].bool,
-  togglePopup: _propTypes["default"].func,
-  getContainerRef: _propTypes["default"].func,
-  position: _propTypes["default"].string,
-  removeClose: _propTypes["default"].func,
   listItemSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
-  needBorder: _propTypes["default"].bool,
-  htmlId: _propTypes["default"].string,
-  i18nKeys: _propTypes["default"].shape({
-    clearText: _propTypes["default"].string,
-    loadingText: _propTypes["default"].string,
-    emptyText: _propTypes["default"].string,
-    noMoreText: _propTypes["default"].string,
-    searchEmptyText: _propTypes["default"].string
-  }),
-  a11y: _propTypes["default"].shape({
-    clearLabel: _propTypes["default"].string
-  }),
-  borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'dark']),
-  isBoxPaddingNeed: _propTypes["default"].bool,
-  isSearchClearOnSelect: _propTypes["default"].bool,
-  disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  getFooter: _propTypes["default"].func,
   customProps: _propTypes["default"].shape({
     SuggestionsProps: _propTypes["default"].object,
     DropBoxProps: _propTypes["default"].object
   }),
-  isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string,
-  customClass: _propTypes["default"].object,
-  isFocus: _propTypes["default"].bool
+  customClass: _propTypes["default"].object
 });
 
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;

package/lib/Select/Select.js

@@ -168,6 +168,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     _this.handleAddNewOption = _this.handleAddNewOption.bind(_assertThisInitialized(_this));
     _this.handleExposePopupHandlers = _this.handleExposePopupHandlers.bind(_assertThisInitialized(_this));
     _this.handleGetAddNewOptionText = _this.handleGetAddNewOptionText.bind(_assertThisInitialized(_this));
+    _this.setSuggestionsVirtualizerContainerRefFunction = _this.setSuggestionsVirtualizerContainerRefFunction.bind(_assertThisInitialized(_this));
     _this.valueInputTypeString = '';
     _this.valueInputSearchString = '';
     _this.autoSelectSuggestions = [];
@@ -309,9 +310,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           textField = props.textField,
           allowValueFallback = props.allowValueFallback,
           _props$customProps = props.customProps,
-          customProps = _props$customProps === void 0 ? {} : _props$customProps;
+          customProps = _props$customProps === void 0 ? _dropDownUtils.dummyObj : _props$customProps;
       var _customProps$listItem = customProps.listItemProps,
-          listItemProps = _customProps$listItem === void 0 ? {} : _customProps$listItem;
+          listItemProps = _customProps$listItem === void 0 ? _dropDownUtils.dummyObj : _customProps$listItem;
       return this.formatOptions({
         options: options,
         valueField: valueField,
@@ -574,6 +575,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     key: "suggestionContainerRef",
     value: function suggestionContainerRef(el) {
       this.suggestionContainer = el;
+      typeof this.setSuggestionsVirtualizerRef === 'function' && this.setSuggestionsVirtualizerRef(el);
     }
   }, {
     key: "suggestionItemRef",
@@ -721,6 +723,12 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         onAddNewOption: this.handleAddNewOption
       });
     }
+  }, {
+    key: "setSuggestionsVirtualizerContainerRefFunction",
+    value: function setSuggestionsVirtualizerContainerRefFunction(refFunc) {
+      this.setSuggestionsVirtualizerRef = refFunc;
+      this.suggestionContainer && refFunc(this.suggestionContainer);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -777,6 +785,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           targetOffset = _this$props11.targetOffset,
           isRestrictScroll = _this$props11.isRestrictScroll,
           dropBoxPortalId = _this$props11.dropBoxPortalId,
+          isVirtualizerEnabled = _this$props11.isVirtualizerEnabled,
           renderCustomToggleIndicator = _this$props11.renderCustomToggleIndicator,
           renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent;
       var _i18nKeys = i18nKeys,
@@ -976,6 +985,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           eleRef: _this7.suggestionContainerRef
         }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
           activeId: selectedId,
+          isVirtualizerEnabled: isVirtualizerEnabled,
+          setVirtualizerContainerRefFunction: _this7.setSuggestionsVirtualizerContainerRefFunction,
           suggestions: suggestions,
           getRef: _this7.suggestionItemRef,
           hoverOption: hoverIndex,

package/lib/Select/SelectWithIcon.js

@@ -261,7 +261,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
 
       if (options.length) {
         datas = options.filter(function (obj) {
-          return obj[valueKey].toLowerCase().includes(searchValue.toLowerCase());
+          return obj[valueKey].toLowerCase().includes(searchValue.toLowerCase().trim());
         });
       }