@zohodesk/components 1.0.0-alpha-260 → 1.0.0-alpha-262

package/lib/ListItem/ListItemWithAvatar.js

@@ -12,7 +12,7 @@ var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
 var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 var _AvatarTeam = _interopRequireDefault(require("../AvatarTeam/AvatarTeam"));
-var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _icons = require("@zohodesk/icons");
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }
@@ -95,7 +95,8 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         avatarPalette = _this$props4.avatarPalette,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        needMultiLineText = _this$props4.needMultiLineText;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -155,13 +156,13 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         flexible: true,
         shrink: true,
         "data-title": isDisabled ? null : title,
-        className: _ListItemModule["default"].value
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
       })) : null);

package/lib/ListItem/ListItemWithCheckBox.js

@@ -85,7 +85,8 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         disableTitle = _this$props4.disableTitle,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        needMultiLineText = _this$props4.needMultiLineText;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -128,7 +129,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         shrink: true,
         "data-title": isDisabled ? null : title,
-        className: _ListItemModule["default"].value
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value));
     }
   }]);

package/lib/ListItem/ListItemWithIcon.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Layout = require("../Layout");
-var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _icons = require("@zohodesk/icons");
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
@@ -93,7 +93,8 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         disableTitle = _this$props4.disableTitle,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        needMultiLineText = _this$props4.needMultiLineText;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -127,7 +128,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         "aria-hidden": true,
         className: _ListItemModule["default"].iconBox,
         dataId: dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon")
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         iconClass: iconClass,
         name: iconName,
         size: iconSize
@@ -136,7 +137,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
       }) : null, value && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,
-        className: _ListItemModule["default"].value,
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
         "data-title": isDisabled ? null : title,
         dataId: "".concat(dataIdString, "_Text")
       }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -144,7 +145,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
       })) : null);

package/lib/ListItem/ListItemWithRadio.js

@@ -86,7 +86,8 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         disableTitle = _this$props4.disableTitle,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        needMultiLineText = _this$props4.needMultiLineText;
       var _customProps$ListItem = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$Containe = customProps.ContainerProps,
@@ -130,7 +131,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         shrink: true,
         "data-title": disableTitle ? null : title,
-        className: _ListItemModule["default"].value
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value));
     }
   }]);

package/lib/ListItem/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ListContainer", {
+  enumerable: true,
+  get: function get() {
+    return _ListContainer["default"];
+  }
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function get() {
+    return _ListItem["default"];
+  }
+});
+Object.defineProperty(exports, "ListItemWithAvatar", {
+  enumerable: true,
+  get: function get() {
+    return _ListItemWithAvatar["default"];
+  }
+});
+Object.defineProperty(exports, "ListItemWithCheckBox", {
+  enumerable: true,
+  get: function get() {
+    return _ListItemWithCheckBox["default"];
+  }
+});
+Object.defineProperty(exports, "ListItemWithIcon", {
+  enumerable: true,
+  get: function get() {
+    return _ListItemWithIcon["default"];
+  }
+});
+Object.defineProperty(exports, "ListItemWithRadio", {
+  enumerable: true,
+  get: function get() {
+    return _ListItemWithRadio["default"];
+  }
+});
+var _ListContainer = _interopRequireDefault(require("./ListContainer"));
+var _ListItem = _interopRequireDefault(require("./ListItem"));
+var _ListItemWithAvatar = _interopRequireDefault(require("./ListItemWithAvatar"));
+var _ListItemWithCheckBox = _interopRequireDefault(require("./ListItemWithCheckBox"));
+var _ListItemWithIcon = _interopRequireDefault(require("./ListItemWithIcon"));
+var _ListItemWithRadio = _interopRequireDefault(require("./ListItemWithRadio"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/ListItem/props/defaultProps.js

@@ -17,7 +17,8 @@ var ListContainerDefaultProps = {
   a11y: {},
   customClass: '',
   customProps: {},
-  dataSelectorId: 'listContainer'
+  dataSelectorId: 'listContainer',
+  needMultiLineText: false
 };
 exports.ListContainerDefaultProps = ListContainerDefaultProps;
 var ListItemDefaultProps = {
@@ -34,7 +35,8 @@ var ListItemDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItem'
+  dataSelectorId: 'listItem',
+  needMultiLineText: false
 };
 exports.ListItemDefaultProps = ListItemDefaultProps;
 var ListItemWithAvatarDefaultProps = {
@@ -52,7 +54,8 @@ var ListItemWithAvatarDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithAvatar'
+  dataSelectorId: 'listItemWithAvatar',
+  needMultiLineText: false
 };
 exports.ListItemWithAvatarDefaultProps = ListItemWithAvatarDefaultProps;
 var ListItemWithCheckBoxDefaultProps = {
@@ -66,7 +69,8 @@ var ListItemWithCheckBoxDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithCheckBox'
+  dataSelectorId: 'listItemWithCheckBox',
+  needMultiLineText: false
 };
 exports.ListItemWithCheckBoxDefaultProps = ListItemWithCheckBoxDefaultProps;
 var ListItemWithIconDefaultProps = {
@@ -83,7 +87,8 @@ var ListItemWithIconDefaultProps = {
   a11y: {},
   customClass: '',
   customProps: {},
-  dataSelectorId: 'listItemWithIcon'
+  dataSelectorId: 'listItemWithIcon',
+  needMultiLineText: false
 };
 exports.ListItemWithIconDefaultProps = ListItemWithIconDefaultProps;
 var ListItemWithRadioDefaultProps = {
@@ -98,6 +103,7 @@ var ListItemWithRadioDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithRadio'
+  dataSelectorId: 'listItemWithRadio',
+  needMultiLineText: false
 };
 exports.ListItemWithRadioDefaultProps = ListItemWithRadioDefaultProps;

package/lib/ListItem/props/propTypes.js

@@ -36,7 +36,8 @@ var ListContainer_Props = {
     ariaSelected: _propTypes["default"].bool
   }),
   customClass: _propTypes["default"].string,
-  customProps: _propTypes["default"].object
+  customProps: _propTypes["default"].object,
+  needMultiLineText: _propTypes["default"].bool
 };
 exports.ListContainer_Props = ListContainer_Props;
 var ListItem_Props = {
@@ -66,6 +67,7 @@ var ListItem_Props = {
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool
   }),
+  needMultiLineText: _propTypes["default"].bool,
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customTickIcon: _propTypes["default"].string
@@ -87,7 +89,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   customListItem: _propTypes["default"].string,
   customAvatar: _propTypes["default"].string,
   customAvatarTeam: _propTypes["default"].string
-})), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
+})), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
   ListItemProps: _propTypes["default"].object
 })), _ListItemWithAvatar_P);
 exports.ListItemWithAvatar_Props = ListItemWithAvatar_Props;
@@ -113,6 +115,7 @@ var ListItemWithCheckBox_Props = {
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool
   }),
+  needMultiLineText: _propTypes["default"].bool,
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customCheckBox: _propTypes["default"].string,
@@ -147,6 +150,7 @@ var ListItemWithIcon_Props = {
     ariaSelected: _propTypes["default"].bool,
     ariaHidden: _propTypes["default"].bool
   }),
+  needMultiLineText: _propTypes["default"].bool,
   customClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     ListItemProps: _propTypes["default"].object
@@ -175,6 +179,7 @@ var ListItemWithRadio_Props = {
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool
   }),
+  needMultiLineText: _propTypes["default"].bool,
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customRadio: _propTypes["default"].string,

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -21,7 +21,7 @@ var _Card = _interopRequireWildcard(require("../Card/Card"));
 var _IdProvider = require("../Provider/IdProvider");
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
 var _CustomResponsive = require("../Responsive/CustomResponsive");
-var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _icons = require("@zohodesk/icons");
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 var _Common = require("../utils/Common.js");
 var _dropDownUtils = require("../utils/dropDownUtils");
@@ -934,7 +934,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         onClick: this.handleDeselectAll,
         tagName: "button",
         "aria-label": clearLabel
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-delete",
         size: "15"
       }))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -17,7 +17,7 @@ var _Popup = _interopRequireDefault(require("../Popup/Popup"));
 var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
 var _Layout = require("../Layout");
 var _Card = _interopRequireWildcard(require("../Card/Card"));
-var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _icons = require("@zohodesk/icons");
 var _IdProvider = require("../Provider/IdProvider");
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
 var _CustomResponsive = require("../Responsive/CustomResponsive");
@@ -465,7 +465,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         onClick: this.handleDeselectAll,
         tagName: "button",
         "aria-label": clearLabel
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-delete",
         size: "15"
       }))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {

package/lib/MultiSelect/MultiSelect.js

@@ -21,7 +21,7 @@ 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 _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _icons = require("@zohodesk/icons");
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 var _Common = require("../utils/Common.js");
 var _dropDownUtils = require("../utils/dropDownUtils");
@@ -276,12 +276,14 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         searchStr = _this$state3$searchSt === void 0 ? '' : _this$state3$searchSt;
       var _this$props4 = this.props,
         selectedOptions = _this$props4.selectedOptions,
-        needLocalSearch = _this$props4.needLocalSearch;
+        needLocalSearch = _this$props4.needLocalSearch,
+        keepSelectedOptions = _this$props4.keepSelectedOptions;
       var _this$getFilterSugges = this.getFilterSuggestions({
           options: options,
           selectedOptions: selectedOptions,
           searchStr: (0, _Common.getSearchString)(searchStr),
-          needSearch: needLocalSearch
+          needSearch: needLocalSearch,
+          keepSelectedOptions: keepSelectedOptions
         }),
         suggestions = _this$getFilterSugges.suggestions,
         suggestionIds = _this$getFilterSugges.suggestionIds;
@@ -476,12 +478,21 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     value: function handleSelectOption(option, value, index, e) {
       var _this$props6 = this.props,
         selectedOptions = _this$props6.selectedOptions,
-        isSearchClearOnSelect = _this$props6.isSearchClearOnSelect;
+        isSearchClearOnSelect = _this$props6.isSearchClearOnSelect,
+        keepSelectedOptions = _this$props6.keepSelectedOptions;
       var searchStr = this.state.searchStr;
       if (searchStr.trim() != '' && isSearchClearOnSelect) {
         this.handleSearch('');
       }
-      this.handleChange([].concat(_toConsumableArray(selectedOptions), [option]), e);
+      if (keepSelectedOptions && selectedOptions.indexOf(option) != -1) {
+        var newSelectedOptions = selectedOptions.filter(function (id) {
+          return id != option;
+        });
+        this.handleChange(newSelectedOptions, e);
+      } else {
+        this.handleChange([].concat(_toConsumableArray(selectedOptions), [option]), e);
+      }
+
       // e && e.stopPropagation && this.handlePopupClose(e);
     }
   }, {
@@ -873,7 +884,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         highLightedSelectOptions = _this$state8.highLightedSelectOptions,
         options = _this$state8.options,
         isFetchingOptions = _this$state8.isFetchingOptions,
-        isActive = _this$state8.isActive;
+        isActive = _this$state8.isActive,
+        selectedOptionIds = _this$state8.selectedOptionIds;
       var suggestions = this.handleFilterSuggestions();
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
@@ -953,7 +965,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         onClick: this.handleDeselectAll,
         tagName: "button",
         "aria-label": clearLabel
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-delete",
         size: "15"
       })) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -1012,6 +1024,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           needBorder: false,
           dataId: "".concat(dataId, "_Options"),
           palette: palette,
+          selectedOptions: selectedOptionIds,
           a11y: {
             role: 'option'
           }

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -22,11 +22,12 @@ 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 _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
+var _icons = require("@zohodesk/icons");
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -121,7 +122,13 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         customChildrenClass = _this$props.customChildrenClass,
         isBoxPaddingNeed = _this$props.isBoxPaddingNeed,
         needEffect = _this$props.needEffect,
-        isLoading = _this$props.isLoading;
+        isLoading = _this$props.isLoading,
+        keepSelectedOptions = _this$props.keepSelectedOptions,
+        customProps = _this$props.customProps;
+      var _customProps$TextBoxP = customProps.TextBoxProps,
+        TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
+        _customProps$Suggesti = customProps.SuggestionsProps,
+        SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       var _i18nKeys = i18nKeys,
         _i18nKeys$clearText = _i18nKeys.clearText,
         clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -139,7 +146,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         highLightedSelectOptions = _this$state.highLightedSelectOptions,
         options = _this$state.options,
         isFetchingOptions = _this$state.isFetchingOptions,
-        isActive = _this$state.isActive;
+        isActive = _this$state.isActive,
+        selectedOptionIds = _this$state.selectedOptionIds;
       var suggestions = this.handleFilterSuggestions();
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
@@ -201,7 +209,10 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         customClass: {
           customTBoxWrap: _MultiSelectModule["default"].custmInputWrapper
         },
-        autoComplete: false
+        autoComplete: false,
+        customProps: {
+          TextBoxProps: TextBoxProps
+        }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         alignBox: "row",
@@ -216,7 +227,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         onClick: this.handleDeselectAll,
         tagName: "button",
         "aria-label": clearLabel
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-delete",
         size: "15"
       })) : null)))), popUpState ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
@@ -261,7 +272,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
           eleRef: _this2.suggestionContainerRef
-        }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+        }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+          needTick: keepSelectedOptions,
           suggestions: suggestions,
           getRef: _this2.suggestionItemRef,
           hoverOption: hoverOption,
@@ -270,10 +282,11 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           needBorder: false,
           dataId: "".concat(dataId, "_Options"),
           palette: palette,
+          selectedOptions: selectedOptionIds,
           a11y: {
             role: 'option'
           }
-        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           searchString: searchStr,

package/lib/MultiSelect/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AdvancedGroupMultiSelect", {
+  enumerable: true,
+  get: function get() {
+    return _AdvancedGroupMultiSelect["default"];
+  }
+});
+Object.defineProperty(exports, "AdvancedMultiSelect", {
+  enumerable: true,
+  get: function get() {
+    return _AdvancedMultiSelect["default"];
+  }
+});
+Object.defineProperty(exports, "MultiSelect", {
+  enumerable: true,
+  get: function get() {
+    return _MultiSelect["default"];
+  }
+});
+Object.defineProperty(exports, "MultiSelectWithAvatar", {
+  enumerable: true,
+  get: function get() {
+    return _MultiSelectWithAvatar["default"];
+  }
+});
+var _MultiSelect = _interopRequireDefault(require("./MultiSelect"));
+var _MultiSelectWithAvatar = _interopRequireDefault(require("./MultiSelectWithAvatar"));
+var _AdvancedMultiSelect = _interopRequireDefault(require("./AdvancedMultiSelect"));
+var _AdvancedGroupMultiSelect = _interopRequireDefault(require("./AdvancedGroupMultiSelect"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/MultiSelect/props/defaultProps.js

@@ -115,7 +115,8 @@ var MultiSelect_defaultProps = {
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
-  dataSelectorId: 'multiSelect'
+  dataSelectorId: 'multiSelect',
+  keepSelectedOptions: false
 };
 exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
 var MultiSelectHeader_defaultProps = {
@@ -149,7 +150,9 @@ var MultiSelectWithAvatar_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   isLoading: false,
-  dataSelectorId: 'multiSelectWithAvatar'
+  dataSelectorId: 'multiSelectWithAvatar',
+  keepSelectedOptions: false,
+  customProps: {}
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {

package/lib/MultiSelect/props/propTypes.js

@@ -249,7 +249,8 @@ var MultiSelect_propTypes = {
   needEffect: _propTypes["default"].bool,
   boxSize: _propTypes["default"].string,
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  keepSelectedOptions: _propTypes["default"].bool
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -306,6 +307,11 @@ var MultiSelectWithAvatar_propTypes = {
   htmlId: _propTypes["default"].string,
   isBoxPaddingNeed: _propTypes["default"].bool,
   needEffect: _propTypes["default"].bool,
+  keepSelectedOptions: _propTypes["default"].bool,
+  customProps: _propTypes["default"].shape({
+    SuggestionsProps: _propTypes["default"].object,
+    DropBoxProps: _propTypes["default"].object
+  }),
   /**** Popup props ****/
   isPopupOpen: _propTypes["default"].bool,
   isPopupReady: _propTypes["default"].bool,

package/lib/PopOver/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PopOver", {
+  enumerable: true,
+  get: function get() {
+    return _PopOver["default"];
+  }
+});
+Object.defineProperty(exports, "PopOverContainer", {
+  enumerable: true,
+  get: function get() {
+    return _PopOver.PopOverContainer;
+  }
+});
+Object.defineProperty(exports, "PopOverTarget", {
+  enumerable: true,
+  get: function get() {
+    return _PopOver.PopOverTarget;
+  }
+});
+var _PopOver = _interopRequireWildcard(require("./PopOver"));
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/Provider/IdProvider.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Provider = void 0;
 exports.getUniqueId = getUniqueId;
 exports.removeGlobalIdPrefix = removeGlobalIdPrefix;
 exports.setGlobalIdPrefix = setGlobalIdPrefix;
@@ -59,10 +58,11 @@ function getUniqueId(Component, prefix) {
     callback: callback
   });
 }
-var Provider = {
-  docs: {
-    componentGroup: 'Provider',
-    folderName: 'Functions'
-  }
-};
-exports.Provider = Provider;
+
+// let Provider = {
+//   docs: {
+//     componentGroup: 'Provider',
+//     folderName: 'Functions'
+//   }
+// };
+// export { Provider };