@zohodesk/components 1.0.0-temp-139 → 1.0.0-temp-140

package/README.md

@@ -34,13 +34,19 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-262
 
-- **Listitem, ListitemwithAvatar, ListitemwithCheckbox, ListitemwithIcon, ListitemwithRadio**  - Added New Prop `needMultiLineText`
+- **ListItem, ListItemWithAvatar, ListItemWithCheckbox, ListItemWithIcon, ListItemWithRadio**  - Added New Prop `needMultiLineText`
+
+- **MultiSelect, MultiSelectWithAvatar** - `keepSelectedOptions` prop added. When this prop is true, it won't remove selected items from the dropdown instead it highlights each selected item with tick mark.
+
+- **MultiSelectWithAvatar** - `customProps` support.
 
 # 1.0.0-alpha-261
 
 - **Tab,Tabs** - Removed offsection property from css.
-- compileClassNames , mergeStyle utils added
-- index  export object fixed
+
+- compileClassNames , mergeStyle utils added.
+
+- index  export object fixed.
 
 # 1.0.0-alpha-260
 

package/es/ListItem/ListItem.module.css

@@ -48,15 +48,15 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7)
     var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
+    /*rtl: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3)*/;
 }
 [dir=rtl] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
 .medium {
-  --listitem_padding: var(--zd_size9) var(--zd_size20);
+  --listitem_padding: var(--zd_size7) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
 .large {
@@ -74,9 +74,11 @@
 .children {
   composes: dotted from '../common/common.module.css';
 }
+.value, .multiLineValue {
+  line-height: var(--zd_size20);
+}
 .multiLineValue{
   word-break: break-word;
-  line-height: var(--zd_size18);
   composes: clamp from '../common/common.module.css'
 }
 .iconBox {
@@ -183,20 +185,20 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7)
     var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
+    /*rtl: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39)*/;
 }
 [dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7)
     var(--zd_size20)
-    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
+    /*rtl: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39)*/;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)

package/es/MultiSelect/MultiSelect.js

@@ -249,7 +249,8 @@ export class MultiSelectComponent extends React.Component {
     } = this.state;
     const {
       selectedOptions,
-      needLocalSearch
+      needLocalSearch,
+      keepSelectedOptions
     } = this.props;
     const {
       suggestions,
@@ -258,7 +259,8 @@ export class MultiSelectComponent extends React.Component {
       options,
       selectedOptions,
       searchStr: getSearchString(searchStr),
-      needSearch: needLocalSearch
+      needSearch: needLocalSearch,
+      keepSelectedOptions
     });
     this.suggestionsOrder = suggestionIds;
     return suggestions;
@@ -450,7 +452,8 @@ export class MultiSelectComponent extends React.Component {
   handleSelectOption(option, value, index, e) {
     const {
       selectedOptions,
-      isSearchClearOnSelect
+      isSearchClearOnSelect,
+      keepSelectedOptions
     } = this.props;
     const {
       searchStr
@@ -458,7 +461,15 @@ export class MultiSelectComponent extends React.Component {
     if (searchStr.trim() != '' && isSearchClearOnSelect) {
       this.handleSearch('');
     }
-    this.handleChange([...selectedOptions, option], e);
+    if (keepSelectedOptions && selectedOptions.indexOf(option) != -1) {
+      let newSelectedOptions = selectedOptions.filter(id => {
+        return id != option;
+      });
+      this.handleChange(newSelectedOptions, e);
+    } else {
+      this.handleChange([...selectedOptions, option], e);
+    }
+
     // e && e.stopPropagation && this.handlePopupClose(e);
   }
 
@@ -841,7 +852,8 @@ export class MultiSelectComponent extends React.Component {
       highLightedSelectOptions,
       options,
       isFetchingOptions,
-      isActive
+      isActive,
+      selectedOptionIds
     } = this.state;
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
@@ -985,6 +997,7 @@ export class MultiSelectComponent extends React.Component {
         needBorder: false,
         dataId: `${dataId}_Options`,
         palette: palette,
+        selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
         }

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -1,3 +1,4 @@
+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); }
 /**** Libraries ****/
 import React from 'react';
 import { MultiSelectWithAvatar_propTypes } from './props/propTypes';
@@ -99,8 +100,14 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       customChildrenClass,
       isBoxPaddingNeed,
       needEffect,
-      isLoading
+      isLoading,
+      keepSelectedOptions,
+      customProps
     } = this.props;
+    let {
+      TextBoxProps = {},
+      SuggestionsProps = {}
+    } = customProps;
     const {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -119,7 +126,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       highLightedSelectOptions,
       options,
       isFetchingOptions,
-      isActive
+      isActive,
+      selectedOptionIds
     } = this.state;
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
@@ -183,7 +191,10 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       customClass: {
         customTBoxWrap: style.custmInputWrapper
       },
-      autoComplete: false
+      autoComplete: false,
+      customProps: {
+        TextBoxProps: TextBoxProps
+      }
     }, /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       alignBox: "row",
@@ -245,7 +256,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+        needTick: keepSelectedOptions,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -254,10 +266,11 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         needBorder: false,
         dataId: `${dataId}_Options`,
         palette: palette,
+        selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
         }
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
+      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/es/MultiSelect/props/defaultProps.js

@@ -106,7 +106,8 @@ export const MultiSelect_defaultProps = {
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
-  dataSelectorId: 'multiSelect'
+  dataSelectorId: 'multiSelect',
+  keepSelectedOptions: false
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -138,7 +139,9 @@ export const MultiSelectWithAvatar_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   isLoading: false,
-  dataSelectorId: 'multiSelectWithAvatar'
+  dataSelectorId: 'multiSelectWithAvatar',
+  keepSelectedOptions: false,
+  customProps: {}
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium'

package/es/MultiSelect/props/propTypes.js

@@ -239,7 +239,8 @@ export const MultiSelect_propTypes = {
   needEffect: PropTypes.bool,
   boxSize: PropTypes.string,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  keepSelectedOptions: PropTypes.bool
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -294,6 +295,11 @@ export const MultiSelectWithAvatar_propTypes = {
   htmlId: PropTypes.string,
   isBoxPaddingNeed: PropTypes.bool,
   needEffect: PropTypes.bool,
+  keepSelectedOptions: PropTypes.bool,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object,
+    DropBoxProps: PropTypes.object
+  }),
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,
   isPopupReady: PropTypes.bool,

package/es/utils/dropDownUtils.js

@@ -21,9 +21,10 @@ const getSelectedValue = props => getIsEmptyValue(props.selectedValue) ? '' : pr
 const getSelectedFormatOptions = props => props.selectedFormatOptions || dummyObj;
 export const getPrefixText = props => props.prefixText || '';
 const getIsStartWithSearch = props => props.isStartsWithSearch;
+const getKeepSelectedOptions = props => props.keepSelectedOptions;
 const getDisabledOptions = props => props.disabledOptions || dummyArray;
 const getListItemProps = props => props.listItemProps || '';
-export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch) => {
+export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions) => {
   const suggestions = [];
   const suggestionIds = [];
   options.forEach(option => {
@@ -34,7 +35,7 @@ export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOpti
     const valueString = getSearchString(value);
     const searchString = getSearchString(searchStr);
     const isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : valueString.indexOf(searchString) !== -1 : true;
-    if (selectedOptions.indexOf(id) === -1 && isMatch) {
+    if (selectedOptions.indexOf(id) === -1 && isMatch || keepSelectedOptions) {
       suggestions.push(option);
       suggestionIds.push(id);
     }

package/lib/ListItem/ListItem.module.css

@@ -48,15 +48,15 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7)
     var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
+    /*rtl: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3)*/;
 }
 [dir=rtl] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
 .medium {
-  --listitem_padding: var(--zd_size9) var(--zd_size20);
+  --listitem_padding: var(--zd_size7) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
 .large {
@@ -74,9 +74,11 @@
 .children {
   composes: dotted from '../common/common.module.css';
 }
+.value, .multiLineValue {
+  line-height: var(--zd_size20);
+}
 .multiLineValue{
   word-break: break-word;
-  line-height: var(--zd_size18);
   composes: clamp from '../common/common.module.css'
 }
 .iconBox {
@@ -183,20 +185,20 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7)
     var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
+    /*rtl: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39)*/;
 }
 [dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7)
     var(--zd_size20)
-    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
+    /*rtl: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39)*/;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)

package/lib/MultiSelect/MultiSelect.js

@@ -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();
@@ -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

@@ -27,6 +27,7 @@ var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.cs
 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",
@@ -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/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/utils/dropDownUtils.js

@@ -86,6 +86,9 @@ exports.getPrefixText = getPrefixText;
 var getIsStartWithSearch = function getIsStartWithSearch(props) {
   return props.isStartsWithSearch;
 };
+var getKeepSelectedOptions = function getKeepSelectedOptions(props) {
+  return props.keepSelectedOptions;
+};
 var getDisabledOptions = function getDisabledOptions(props) {
   return props.disabledOptions || dummyArray;
 };
@@ -93,7 +96,7 @@ var getListItemProps = function getListItemProps(props) {
   return props.listItemProps || '';
 };
 var makeGetMultiSelectFilterSuggestions = function makeGetMultiSelectFilterSuggestions() {
-  return (0, _reselect.createSelector)([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch], function (options, selectedOptions, searchStr, needSearch, isStartsWithSearch) {
+  return (0, _reselect.createSelector)([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions], function (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions) {
     var suggestions = [];
     var suggestionIds = [];
     options.forEach(function (option) {
@@ -103,7 +106,7 @@ var makeGetMultiSelectFilterSuggestions = function makeGetMultiSelectFilterSugge
       var valueString = (0, _Common.getSearchString)(value);
       var searchString = (0, _Common.getSearchString)(searchStr);
       var isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : valueString.indexOf(searchString) !== -1 : true;
-      if (selectedOptions.indexOf(id) === -1 && isMatch) {
+      if (selectedOptions.indexOf(id) === -1 && isMatch || keepSelectedOptions) {
         suggestions.push(option);
         suggestionIds.push(id);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-139",
+  "version": "1.0.0-temp-140",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -100,4 +100,4 @@
       "cssUniqueness": "false"
     }
   }
-}
+}