@zohodesk/components 1.0.0-temp-40 → 1.0.0-temp-41

package/lib/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css

@@ -1,34 +1,34 @@
 [data-mode='default'][data-theme='yellow'] {
-    --zdt_cta_primary_text: #b68c07;
-    --zdt_cta_primary_hover_text: #826800;
-    --zdt_cta_primary_bg: #e8b923;
-    --zdt_cta_primary_hover_bg: #b59100;
-    --zdt_cta_primary_border: #e8b923;
-    --zdt_cta_primary_hover_border: #b59100;
-    --zdt_cta_primary_box_shadow: rgb(232, 185, 35, 0.2);
-    --zdt_cta_primary_hover_box_shadow: rgb(181, 145, 0, 0.25);
-    --zdt_cta_primary_light_bg: #fdf8e9;
-    --zdt_cta_primary_light_hover_bg: #f8eabd;
-    --zdt_cta_primary_light_border: #f8eabd;
-    --zdt_cta_secondary_bg: #e8b923;
-    --zdt_cta_secondary_text: var(--dot_text_black);
-    --zdt_cta_secondary_border: rgba(255, 255, 255, 0.2);
-    --zdt_cta_secondary_light_border: #f6e3a7;
-    --zdt_cta_alpha_text: #b68c07;
-    --zdt_cta_alpha_hover_text: #826800;
-    --zdt_cta_alpha_border: #b68c07;
-    --zdt_cta_alpha_hover_border: #826800;
-    --zdt_cta_alpha_bg: #F8EABD;
-    --zdt_cta_beta_border: #b68c07;
-    --zdt_cta_grey_10_bg: #f8f8f6;
-    --zdt_cta_grey_10_border: #f8f8f6;
-    --zdt_cta_grey_15_bg: #edede3;
-    --zdt_cta_grey_15_border: #edede3;
-    --zdt_cta_grey_20_bg: #efefec;
-    --zdt_cta_grey_35_bg: #e0dbcc;
-    --zdt_cta_grey_35_text: #e0dbcc;
-    --zdt_cta_grey_35_border: #e0dbcc;
-    --zdt_cta_grey_40_bg: #ccc2a4;
-    --zdt_cta_grey_40_text: #ccc2a4;
-    --zdt_cta_grey_40_border: #ccc2a4;
+	--zdt_cta_primary_text: #b68c07;
+	--zdt_cta_primary_hover_text: #826800;
+	--zdt_cta_primary_bg: #e8b923;
+	--zdt_cta_primary_hover_bg: #b59100;
+	--zdt_cta_primary_border: #e8b923;
+	--zdt_cta_primary_hover_border: #b59100;
+	--zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
+	--zdt_cta_primary_hover_box_shadow: rgba(181, 145, 0, 0.25);
+	--zdt_cta_primary_light_bg: #fdf8e9;
+	--zdt_cta_primary_light_hover_bg: #f8eabd;
+	--zdt_cta_primary_light_border: #f8eabd;
+	--zdt_cta_secondary_bg: #e8b923;
+	--zdt_cta_secondary_text: var(--dot_text_black);
+	--zdt_cta_secondary_border: rgba(255, 255, 255, 0.2);
+	--zdt_cta_secondary_light_border: #f6e3a7;
+	--zdt_cta_alpha_text: #b68c07;
+	--zdt_cta_alpha_hover_text: #826800;
+	--zdt_cta_alpha_border: #b68c07;
+	--zdt_cta_alpha_hover_border: #826800;
+	--zdt_cta_alpha_bg: #f8eabd;
+	--zdt_cta_beta_border: #b68c07;
+	--zdt_cta_grey_10_bg: #f8f8f6;
+	--zdt_cta_grey_10_border: #f8f8f6;
+	--zdt_cta_grey_15_bg: #edede3;
+	--zdt_cta_grey_15_border: #edede3;
+	--zdt_cta_grey_20_bg: #efefec;
+	--zdt_cta_grey_35_bg: #e0dbcc;
+	--zdt_cta_grey_35_text: #e0dbcc;
+	--zdt_cta_grey_35_border: #e0dbcc;
+	--zdt_cta_grey_40_bg: #ccc2a4;
+	--zdt_cta_grey_40_text: #ccc2a4;
+	--zdt_cta_grey_40_border: #ccc2a4
 }

package/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css

@@ -1,48 +1,42 @@
 [data-mode='default'][data-theme='yellow'] {
-    /* stencil */
-    --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
-    --zdt_stencil_dark_gradient_bg: linear-gradient(
-        left,
-        rgba(255, 255, 255, 0.07) 0,
-        rgba(255, 255, 255, 0.03) 33.33%,
-        rgba(255, 255, 255, 0.03) 66.66%,
-        rgba(255, 255, 255, 0.07) 100%
-    );
-
-    /* dropbox */
-    --zdt_dropbox_dark_bg: #313323;
-
-    /* listitem */
-    --zdt_listitem_dark_bg: #313323;
-    --zdt_listitem_dark_text: #d0d0d4;
-    --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
-    --zdt_listitem_dark_active_bg: #494c34;
-    --zdt_listitem_dark_tickicon: #e8b923;
-
-    /* tag */
-    --zdt_tag_dark_text: #d0d0d4;
-    --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
-    --zdt_tag_dark_hover_text: #d0d0d4;
-    --zdt_tag_dark_hover_bg: #503348;
-    --zdt_tag_dark_close_bg: #864654;
-    --zdt_tag_dark_close_text: #de3535;
-
-    /* multiselect */
-    --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
-    --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
-    --zdt_multiselect_darkmsg_text: #d0d0d4;
-    --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
-
-    /* avatar */
-    --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
-    --zdt_avatar_white_text: var(--dot_text_white);
-
-    /* label */
-    --zdt_label_dark_text: #d0d0d4;
-
-    /* textbox */
-    --zdt_textbox_light_text: var(--dot_text_white);
-
-    /* dropdown */
-    --zdt_dropdown_darkheading_text: var(--dot_text_white);
+	/* stencil */
+	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(left, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	
+	/* dropbox */
+	--zdt_dropbox_dark_bg: #313323;
+	
+	/* listitem */
+	--zdt_listitem_dark_bg: #313323;
+	--zdt_listitem_dark_text: #d0d0d4;
+	--zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
+	--zdt_listitem_dark_active_bg: #494c34;
+	--zdt_listitem_dark_tickicon: #e8b923;
+	
+	/* tag */
+	--zdt_tag_dark_text: #d0d0d4;
+	--zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_tag_dark_hover_text: #d0d0d4;
+	--zdt_tag_dark_hover_bg: #503348;
+	--zdt_tag_dark_close_bg: #864654;
+	--zdt_tag_dark_close_text: #de3535;
+	
+	/* multiselect */
+	--zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
+	--zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+	--zdt_multiselect_darkmsg_text: #d0d0d4;
+	--zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
+	
+	/* avatar */
+	--zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+	--zdt_avatar_white_text: var(--dot_text_white);
+	
+	/* label */
+	--zdt_label_dark_text: #d0d0d4;
+	
+	/* textbox */
+	--zdt_textbox_light_text: var(--dot_text_white);
+	
+	/* dropdown */
+	--zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/lib/Card/Card.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.CardHeader = exports.CardFooter = exports.CardContent = void 0;
+exports.CardFooter = exports["default"] = exports.CardContent = exports.CardHeader = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 

package/lib/Card/index.js

@@ -11,22 +11,22 @@ Object.defineProperty(exports, "Card", {
     return _Card["default"];
   }
 });
-Object.defineProperty(exports, "CardContent", {
+Object.defineProperty(exports, "CardHeader", {
   enumerable: true,
   get: function get() {
-    return _Card.CardContent;
+    return _Card.CardHeader;
   }
 });
-Object.defineProperty(exports, "CardFooter", {
+Object.defineProperty(exports, "CardContent", {
   enumerable: true,
   get: function get() {
-    return _Card.CardFooter;
+    return _Card.CardContent;
   }
 });
-Object.defineProperty(exports, "CardHeader", {
+Object.defineProperty(exports, "CardFooter", {
   enumerable: true,
   get: function get() {
-    return _Card.CardHeader;
+    return _Card.CardFooter;
   }
 });
 

package/lib/DateTime/CalendarView.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Span = void 0;
+exports.Span = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/lib/DateTime/DateWidget.module.css

@@ -6,10 +6,6 @@
 .readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }
-.readOnly,
-.disabled {
-  composes: readonly from '../common/common.module.css';
-}
 .enabled {
   cursor: pointer;
 }

package/lib/DateTime/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.supportedPatterns = exports.patternSplitStr = exports.patternChangeStr = exports.monthNamesShortDefault = exports.monthNamesDefault = exports.i18nShortMonths = exports.i18nMonths = exports.flags = exports.defaultFormat = exports.dayNamesShortDefault = exports.dayNamesDefault = exports.ampmTextDefault = exports.INVALID_DATE = exports.INCONSTANT = void 0;
+exports.i18nMonths = exports.i18nShortMonths = exports.ampmTextDefault = exports.dayNamesShortDefault = exports.dayNamesDefault = exports.monthNamesShortDefault = exports.monthNamesDefault = exports.flags = exports.INVALID_DATE = exports.INCONSTANT = exports.patternSplitStr = exports.patternChangeStr = exports.supportedPatterns = exports.defaultFormat = void 0;
 var defaultFormat = 'dd-MM-yyyy';
 exports.defaultFormat = defaultFormat;
 var supportedPatterns = ['.', '/', '-', ' ']; // RESTRICTED PATTERNS - ['@']

package/lib/DateTime/dateFormatUtils/dateFormat.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDateDetails = getDateDetails;
 exports.getDateFormatDetails = getDateFormatDetails;
-exports.getDateFormatSelection = getDateFormatSelection;
 exports.getDateTimeString = getDateTimeString;
+exports.getDateDetails = getDateDetails;
 exports.getIsValidDate = getIsValidDate;
 exports.getSelectedDate = getSelectedDate;
+exports.getDateFormatSelection = getDateFormatSelection;
 
 var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
 

package/lib/DateTime/dateFormatUtils/index.js

@@ -3,25 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.addZero = addZero;
-exports.arrayIsNotEqual = arrayIsNotEqual;
-exports.convertTwoDigitToYear = convertTwoDigitToYear;
 exports.convertYearToTwoDigit = convertYearToTwoDigit;
-exports.getDayDetails = getDayDetails;
+exports.addZero = addZero;
 exports.getDayEnd = getDayEnd;
-exports.getHourDetails = getHourDetails;
-exports.getIsCurrentYear = getIsCurrentYear;
+exports.getIsNumberTyped = getIsNumberTyped;
 exports.getIsDeleteTyped = getIsDeleteTyped;
-exports.getIsEmptyHour = getIsEmptyHour;
-exports.getIsEmptyYear = getIsEmptyYear;
 exports.getIsNewValueType = getIsNewValueType;
-exports.getIsNoonValueTyped = getIsNoonValueTyped;
-exports.getIsNumberTyped = getIsNumberTyped;
-exports.getIsSupportedKey = getIsSupportedKey;
-exports.getMinuteDetails = getMinuteDetails;
+exports.getDayDetails = getDayDetails;
 exports.getMonthDetails = getMonthDetails;
-exports.getNoonDetails = getNoonDetails;
 exports.getYearDetails = getYearDetails;
+exports.convertTwoDigitToYear = convertTwoDigitToYear;
+exports.getHourDetails = getHourDetails;
+exports.getMinuteDetails = getMinuteDetails;
+exports.getIsNoonValueTyped = getIsNoonValueTyped;
+exports.getNoonDetails = getNoonDetails;
+exports.getIsSupportedKey = getIsSupportedKey;
+exports.arrayIsNotEqual = arrayIsNotEqual;
+exports.getIsEmptyHour = getIsEmptyHour;
+exports.getIsEmptyYear = getIsEmptyYear;
+exports.getIsCurrentYear = getIsCurrentYear;
 exports.removeYearPattern = removeYearPattern;
 
 var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));

package/lib/DateTime/objectUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.omit = exports.extract = exports.equals = exports.clone = void 0;
+exports.equals = exports.omit = exports.extract = exports.clone = void 0;
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 

package/lib/DropDown/DropDown.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.DropDownTarget = exports.DropDownItemContainer = exports.DropDownContainer = void 0;
+exports.DropDownItemContainer = exports.DropDownContainer = exports.DropDownTarget = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/lib/Layout/Box.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = Box;
 exports.getBoxProps = getBoxProps;
+exports["default"] = Box;
 
 var _react = _interopRequireDefault(require("react"));
 

package/lib/Layout/Container.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = Container;
 exports.getContainerProps = getContainerProps;
+exports["default"] = Container;
 
 var _react = _interopRequireDefault(require("react"));
 

package/lib/Layout/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Box", {
+Object.defineProperty(exports, "Container", {
   enumerable: true,
   get: function get() {
-    return _Box["default"];
+    return _Container["default"];
   }
 });
-Object.defineProperty(exports, "Container", {
+Object.defineProperty(exports, "Box", {
   enumerable: true,
   get: function get() {
-    return _Container["default"];
+    return _Box["default"];
   }
 });
 exports.Layout = void 0;

package/lib/Layout/utils.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ViewportSizeType = exports.ColumnSizeType = void 0;
-exports.createProps = createProps;
 exports.getClass = getClass;
+exports.createProps = createProps;
 exports.isInteger = isInteger;
 exports.setProps = setProps;
+exports.ViewportSizeType = exports.ColumnSizeType = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -945,7 +945,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           i18nKeys = _this$props8.i18nKeys,
           a11y = _this$props8.a11y,
           isSearchClearOnSelect = _this$props8.isSearchClearOnSelect,
-          palette = _this$props8.palette;
+          palette = _this$props8.palette,
+          needEffect = _this$props8.needEffect;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -973,7 +974,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : ''),
+        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : '',
         onClick: this.handleInputFocus
@@ -1150,7 +1151,8 @@ AdvancedGroupMultiSelect.defaultProps = {
   isPadding: false,
   i18nKeys: {},
   a11y: {},
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: _propTypes["default"].bool
 };
 AdvancedGroupMultiSelect.propTypes = {
   animationStyle: _propTypes["default"].string,
@@ -1200,7 +1202,8 @@ AdvancedGroupMultiSelect.propTypes = {
   variant: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
   isSearchClearOnSelect: _propTypes["default"].bool,
-  palette: _propTypes["default"].oneOf(['default', 'dark'])
+  palette: _propTypes["default"].oneOf(['default', 'dark']),
+  needEffect: true
 };
 
 if (false) {

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -411,7 +411,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           borderColor = _this$props5.borderColor,
           isBoxPaddingNeed = _this$props5.isBoxPaddingNeed,
           getFooter = _this$props5.getFooter,
-          customProps = _this$props5.customProps;
+          customProps = _this$props5.customProps,
+          needEffect = _this$props5.needEffect;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,
@@ -441,7 +442,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_AdvancedMultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _AdvancedMultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _AdvancedMultiSelectModule["default"].transparentContainer : ''),
+        className: "".concat(_AdvancedMultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _AdvancedMultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _AdvancedMultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _AdvancedMultiSelectModule["default"].effect : ''),
         "data-id": dataIdMultiSelectComp,
         "data-title": isDisabled ? title : '',
         onClick: this.handleInputFocus
@@ -588,6 +589,7 @@ AdvancedMultiSelectComponent.propTypes = {
   //For grouping multiSelect
   getPublicMethods: _propTypes["default"].func,
   optionType: _propTypes["default"].oneOf(['default', 'avatar', 'icon']),
+  needEffect: _propTypes["default"].bool,
   animationStyle: _propTypes["default"].string,
   defaultDropBoxPosition: _propTypes["default"].oneOf(['bottom', 'top', 'left', 'right']),
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
@@ -662,7 +664,8 @@ AdvancedMultiSelectComponent.defaultProps = {
   borderColor: 'default',
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
-  customProps: {}
+  customProps: {},
+  needEffect: true
 };
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 var AdvancedMultiSelect = (0, _Popup["default"])(AdvancedMultiSelectComponent);

package/lib/MultiSelect/AdvancedMultiSelect.module.css

@@ -1,8 +1,8 @@
 .wrapper {
   position: relative;
 }
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled, .readOnly {
+  cursor: not-allowed;
 }
 .container {
   max-height: var(--zd_size120);
@@ -16,28 +16,28 @@
 .borderColor_transparent {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
 }
-.borderColor_transparent:hover {
+.effect .borderColor_transparent:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
 }
-.borderColor_transparent.active {
+.effect .borderColor_transparent.active {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_active_border);
 }
 .borderColor_default {
   border-bottom-color: var(--zdt_advancedmultiselect_default_border);
 }
-.borderColor_default:hover {
+.effect .borderColor_default:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
 }
-.borderColor_default.active {
+.effect .borderColor_default.active {
   border-bottom-color: var(--zdt_advancedmultiselect_default_active_border);
 }
 .borderColor_dark {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_border);
 }
-.borderColor_dark:hover {
+.effect .borderColor_dark:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
 }
-.borderColor_dark.active {
+.effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
 [dir=ltr] .container.medium {

package/lib/MultiSelect/MultiSelect.js

@@ -936,7 +936,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props13.a11y,
           children = _this$props13.children,
           customChildrenClass = _this$props13.customChildrenClass,
-          getFooter = _this$props13.getFooter;
+          getFooter = _this$props13.getFooter,
+          needEffect = _this$props13.needEffect;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText,
@@ -962,7 +963,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var ariaErrorId = this.getNextAriaId();
       var isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : ''),
+        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : '',
         onClick: this.handleInputFocus
@@ -1169,7 +1170,8 @@ MultiSelectComponent.propTypes = {
   children: _propTypes["default"].node,
   customChildrenClass: _propTypes["default"].string,
   disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  getFooter: _propTypes["default"].func
+  getFooter: _propTypes["default"].func,
+  needEffect: _propTypes["default"].bool
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -1199,7 +1201,8 @@ MultiSelectComponent.defaultProps = {
   a11y: {},
   textBoxClass: '',
   palette: 'default',
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: true
 };
 
 if (false) {

package/lib/MultiSelect/MultiSelect.module.css

@@ -2,14 +2,9 @@
   position: relative;
 }
 
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled, .readOnly {
+  cursor: not-allowed;
 }
-
-.readOnly {
-  composes: readonly from '../common/common.module.css';
-}
-
 .container {
   max-height: var(--zd_size120);
   composes: oflowy from '../common/common.module.css';
@@ -22,28 +17,28 @@
 .borderColor_transparent {
   border-bottom-color: var(--zdt_multiselect_transparent_border);
 }
-.borderColor_transparent:hover {
+.effect .borderColor_transparent:hover {
   border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
 }
-.borderColor_transparent.active {
+.effect .borderColor_transparent.active {
   border-bottom-color: var(--zdt_multiselect_transparent_active_border);
 }
 .borderColor_default {
   border-bottom-color: var(--zdt_multiselect_default_border);
 }
-.borderColor_default:hover {
+.effect .borderColor_default:hover {
   border-bottom-color: var(--zdt_multiselect_default_hover_border);
 }
-.borderColor_default.active {
+.effect .borderColor_default.active {
   border-bottom-color: var(--zdt_multiselect_default_active_border);
 }
 .borderColor_dark {
   border-bottom-color: var(--zdt_multiselect_dark_border);
 }
-.borderColor_dark:hover {
+.effect .borderColor_dark:hover {
   border-bottom-color: var(--zdt_multiselect_dark_hover_border);
 }
-.borderColor_dark.active {
+.effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_multiselect_dark_active_border);
 }
 

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -140,7 +140,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           a11y = _this$props.a11y,
           children = _this$props.children,
           customChildrenClass = _this$props.customChildrenClass,
-          isBoxPaddingNeed = _this$props.isBoxPaddingNeed;
+          isBoxPaddingNeed = _this$props.isBoxPaddingNeed,
+          needEffect = _this$props.needEffect;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -165,7 +166,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
       var popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
       var isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: " ".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : ''),
+        className: " ".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : '',
         onClick: this.handleInputFocus
@@ -339,6 +340,7 @@ MultiSelectWithAvatarComponent.propTypes = {
   palette: _propTypes["default"].oneOf(['default', 'dark']),
   htmlId: _propTypes["default"].string,
   isBoxPaddingNeed: _propTypes["default"].bool,
+  needEffect: _propTypes["default"].bool,
 
   /**** Popup props ****/
   isPopupOpen: _propTypes["default"].bool,
@@ -388,7 +390,8 @@ MultiSelectWithAvatarComponent.defaultProps = {
   a11y: {},
   palette: 'default',
   isBoxPaddingNeed: true,
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: true
 };
 MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
 var MultiSelectWithAvatar = (0, _Popup["default"])(MultiSelectWithAvatarComponent);

package/lib/MultiSelect/SelectedOptions.js

@@ -76,13 +76,14 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
             isDisabled = option.isDisabled;
         var commonProps = {
           disabled: isDisabled,
-          onRemove: isDisabled ? null : onRemove,
+          onRemove: isDisabled || isReadOnly ? null : onRemove,
           text: value,
           palette: isDarkPalette,
           onSelectTag: isReadOnly ? null : onSelect,
           getRef: getRef,
           initial: value,
-          id: id
+          id: id,
+          isReadOnly: isReadOnly
         };
 
         if (optionType === 'avatar') {

package/lib/PopOver/PopOver.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.PopOverTarget = exports.PopOverContainer = void 0;
+exports.PopOverContainer = exports.PopOverTarget = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));