@zohodesk/components 1.0.0-alpha-226 → 1.0.0-alpha-229

package/es/Popup/Popup.js

@@ -422,7 +422,7 @@ const Popup = function (Component) {
       // isResizeHandling --->>> Window resize and dropBox resize
       const {
         direction
-      } = this.context;
+      } = this.context || {};
       const {
         placeHolderElement,
         dropElement

package/es/Radio/Radio.js

@@ -3,7 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Label from '../Label/Label';
 import { Container, Box } from '../Layout';
-import CssProvider from '../Provider/CssProvider';
 import style from './Radio.module.css';
 export default class Radio extends React.Component {
   constructor(props) {
@@ -45,7 +44,7 @@ export default class Radio extends React.Component {
       customRadio = '',
       customLabel = ''
     } = customClass;
-    let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
+    let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer;
     let toolTip = disabled ? disabledTitle : title ? title : null;
     let {
       ariaHidden,

package/es/Radio/Radio.module.css

@@ -18,8 +18,8 @@
 .pointer {
   cursor: pointer;
 }
-.readonly {
-  cursor: default;
+.readonly, .disabled {
+  cursor: not-allowed;
 }
 .radio {
   composes: offSelection from '../common/common.module.css';

package/es/Ribbon/Ribbon.js

@@ -38,14 +38,14 @@ Ribbon.propTypes = {
   text: PropTypes.string,
   type: PropTypes.oneOf(['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag']),
   customClass: PropTypes.string
-};
-Ribbon.propTypesDescription = {
-  text: ' ',
-  type: ' ',
-  children: ' ',
-  palette: ' ',
-  size: ' '
-};
+}; // Ribbon.propTypesDescription = {
+//   text: ' ',
+//   type: ' ',
+//   children: ' ',
+//   palette: ' ',
+//   size: ' '
+// };
+
 Ribbon.defaultProps = {
   palette: 'default',
   size: 'large',

package/es/RippleEffect/RippleEffect.js

@@ -10,9 +10,10 @@ export default function RippleEffect(props) {
     palette,
     hoverType,
     isNeedEffect,
-    needBorder
+    needBorder,
+    isCopyTextEnabled
   } = props;
-  let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isDisabled ? CssProvider('isDisabled') : ''}` : '';
+  let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isCopyTextEnabled ? style.notAllowed : isDisabled ? CssProvider('isDisabled') : ''}` : '';
   let child = React.Children.only(children);
   return /*#__PURE__*/React.cloneElement(child, {
     className: `${child.props.className || ''} ${className}`
@@ -24,7 +25,8 @@ RippleEffect.defaultProps = {
   isNeedEffect: true,
   needBorder: true,
   hoverType: 'default',
-  palette: 'default'
+  palette: 'default',
+  isCopyTextEnabled: false
 };
 RippleEffect.propTypes = {
   children: PropTypes.node,
@@ -33,7 +35,8 @@ RippleEffect.propTypes = {
   isDisabled: PropTypes.bool,
   isNeedEffect: PropTypes.bool,
   needBorder: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger'])
+  palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  isCopyTextEnabled: PropTypes.bool
 };
 
 if (false) {

package/es/RippleEffect/RippleEffect.module.css

@@ -65,3 +65,6 @@
 .hoverEffect:hover.primaryDark.bgHover, .hoverEffect:focus.primaryDark.bgHover {
   background-color: var(--zdt_rippleeffect_primary_dark_bg);
 }
+.notAllowed {
+  cursor: not-allowed;
+}

package/es/Select/Select.module.css

@@ -47,7 +47,7 @@
   padding: var(--zd_size10) 0;
 }
 .readonly {
-  composes: readonly from '../common/common.module.css';
+  --textboxicon_icon_cursor: not-allowed;
 }
 .transparentContainer .arrowIcon {
   opacity: 0;

package/es/Select/SelectWithAvatar.js

@@ -141,7 +141,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       tagSize,
       groupName,
       i18nKeys,
-      htmlId
+      htmlId,
+      needEffect
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -164,7 +165,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${className ? className : ''}`,
+      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : ''
     }, /*#__PURE__*/React.createElement(Container, {
@@ -342,7 +343,8 @@ SelectWithAvatarComponent.propTypes = {
   title: PropTypes.string,
   togglePopup: PropTypes.func,
   valueField: PropTypes.string,
-  htmlId: PropTypes.string
+  htmlId: PropTypes.string,
+  needEffect: PropTypes.bool
 };
 SelectWithAvatarComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -363,7 +365,8 @@ SelectWithAvatarComponent.defaultProps = {
   dataId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
-  i18nKeys: {}
+  i18nKeys: {},
+  needEffect: true
 };
 SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
 let SelectWithAvatar = Popup(SelectWithAvatarComponent);

package/es/Stencils/Stencils.js

@@ -30,12 +30,11 @@ Stencils.defaultProps = {
   shape: 'rect',
   size: 'medium',
   customClass: ''
-};
-Stencils.propTypesDescription = {
-  shape: ' ',
-  size: ' ',
-  palette: ' '
-};
+}; // Stencils.propTypesDescription = {
+//   shape: ' ',
+//   size: ' ',
+//   palette: ' '
+// };
 
 if (false) {
   Stencils.docs = {

package/es/Tag/Tag.js

@@ -78,7 +78,9 @@ export default class Tag extends PureComponent {
       tooltip,
       avatarPalette,
       customClass,
-      a11y
+      a11y,
+      needEffect,
+      isReadOnly
     } = this.props;
     let {
       customTag = '',
@@ -93,7 +95,7 @@ export default class Tag extends PureComponent {
     } = a11y;
     let isDarkPalette = palette === 'dark';
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
+      className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
       "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       onClick: this.handleSelect,
       ref: this.getRef,
@@ -148,7 +150,9 @@ Tag.defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
-  a11y: {}
+  a11y: {},
+  needEffect: true,
+  isReadOnly: false
 };
 Tag.propTypes = {
   active: PropTypes.bool,
@@ -179,7 +183,9 @@ Tag.propTypes = {
   }),
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
-  })
+  }),
+  needEffect: PropTypes.bool,
+  isReadOnly: PropTypes.bool
 };
 
 if (false) {

package/es/Tag/Tag.module.css

@@ -50,9 +50,12 @@
 }
 .disabled {
   pointer-events: none;
-  --tag_cursor: not-allowed;
   --tag_text_color: var(--zdt_tag_disabled_text);
 }
+.readonly,
+.disabled {
+  --tag_cursor: not-allowed;
+}
 .pointer {
   --tag_cursor: pointer;
 }
@@ -158,11 +161,11 @@
 .danger {
   --tag_bg_color: var(--zdt_tag_default_danger_bg);
 }
-.default:hover {
+.effect.default:hover {
   --tag_bg_color: var(--zdt_tag_default_hover_bg);
 }
 .activedefault,
-.activedefault:hover {
+.effect.activedefault:hover {
   --tag_bg_color: var(--zdt_tag_active_default_bg);
 }
 .activeprimaryClose,
@@ -170,11 +173,11 @@
   --tag_closeicon_bg_color: var(--zdt_tag_primary_bg);
 }
 
-.danger:hover {
+.effect.danger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
 .activedanger,
-.activedanger:hover {
+.effect.activedanger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
 .activedangerClose,
@@ -187,7 +190,7 @@
   --tag_text_color: var(--zdt_tag_secondary_text);
 }
 .activesecondary,
-.secondary:hover {
+.effect.secondary:hover {
   --tag_bg_color: var(--zdt_tag_secondary_hover_bg);
 }
 
@@ -196,12 +199,12 @@
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_pure_border);
 }
-.pureDotted:hover {
+.effect.pureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_hover_bg);
   --tag_border_color: var(--zdt_tag_pure_hover_border);
 }
 .activepureDotted,
-.activepureDotted:hover {
+.effect.activepureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_bg);
 }
 
@@ -210,10 +213,10 @@
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_primary_border);
 }
-.primaryDotted:hover,
+.effect.primaryDotted:hover,
 .activeprimaryDotted,
 .primary,
-.primary:hover {
+.effect.primary:hover {
   --tag_bg_color: var(--zdt_tag_active_default_bg);
 }
 
@@ -228,7 +231,7 @@
   --tag_bg_color: var(--zdt_tag_dark_bg);
   --tag_text_color: var(--zdt_tag_dark_text);
 }
-.dark:hover {
+.effect.dark:hover {
   --tag_bg_color: var(--zdt_tag_dark_hover_bg);
   --tag_text_color: var(--zdt_tag_dark_hover_text);
 }

package/es/TextBoxIcon/TextBoxIcon.js

@@ -100,7 +100,7 @@ export default class TextBoxIcon extends React.Component {
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : '' : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : style.readonly : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-title": isDisabled ? title : ''
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -12,8 +12,11 @@
   composes: varClass;
   position: relative;
 }
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled,.readonly {
+  --textboxicon_icon_cursor: not-allowed;
+}
+.disabled, .readonly {
+  cursor: not-allowed;
 }
 .icon {
   composes: offSelection from '../common/common.module.css';

package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -23,7 +23,7 @@ export default class VelocityAnimation extends React.Component {
     let {
       direction,
       isReducedMotion
-    } = this.context;
+    } = this.context || {};
     let enterAnimationObj = {
       fade: 'transition.fadeIn',
       slideDown: 'slideDown',

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -41,7 +41,7 @@ export default class VelocityAnimationGroup extends React.Component {
     let {
       direction,
       isReducedMotion
-    } = this.context;
+    } = this.context || {};
     let childProps = clearProps(this.props);
     let enterAnimationObj = {
       fade: 'transition.fadeIn',

package/es/utils/dropDownUtils.js

@@ -406,4 +406,42 @@ export const filterSelectedOptions = function () {
   return {
     newSelectedOptions: [...oldValidSelectedOptions, ...newlyAddedOptions]
   };
-};
+};
+export const makeGetIsShowClearIcon = () => createSelector([getSelectedOptionsSel, getDisabledOptions], (selectedOptions, disabledOptions) => {
+  let countForShowClear = 2;
+  let enabledOptionsLength = 0;
+  let isShowClearIcon = selectedOptions.length >= countForShowClear;
+
+  if (disabledOptions.length) {
+    let isHaveEnabledOptions = false;
+    let isAllDisabled = disabledOptions.length === selectedOptions.length;
+
+    if (!isAllDisabled) {
+      isHaveEnabledOptions = selectedOptions.some(option => {
+        let {
+          isDisabled = false
+        } = option || {};
+
+        if (!isDisabled) {
+          enabledOptionsLength += 1;
+
+          if (enabledOptionsLength === countForShowClear) {
+            return true;
+          }
+
+          return false;
+        }
+
+        return false;
+      });
+    }
+
+    return {
+      isShowClearIcon: isAllDisabled ? !isAllDisabled : isHaveEnabledOptions
+    };
+  }
+
+  return {
+    isShowClearIcon
+  };
+});

package/lib/Animation/Animation.js

@@ -188,14 +188,13 @@ Animation.defaultProps = {
   isActive: false,
   name: 'fadeIn',
   unmountOnExit: true
-};
-Animation.propTypesDescription = {
-  name: ' ',
-  children: ' ',
-  enterDuration: ' ',
-  exitDuration: ' ',
-  isActive: ' '
-};
+}; // Animation.propTypesDescription = {
+//   name: ' ',
+//   children: ' ',
+//   enterDuration: ' ',
+//   exitDuration: ' ',
+//   isActive: ' '
+// };
 
 if (false) {
   Animation.docs = {

package/lib/Avatar/Avatar.js

@@ -259,16 +259,16 @@ Avatar.propTypes = {
   customProps: _propTypes["default"].shape({
     AvatarProps: _propTypes["default"].object
   })
-};
-Avatar.propTypesDescription = {
-  name: ' ',
-  size: ' ',
-  src: ' ',
-  palette: ' ',
-  onClick: ' ',
-  shape: ' ',
-  title: ' '
-};
+}; // Avatar.propTypesDescription = {
+//   name: ' ',
+//   size: ' ',
+//   src: ' ',
+//   palette: ' ',
+//   onClick: ' ',
+//   shape: ' ',
+//   title: ' '
+// };
+
 Avatar.invalidImageURLs = [];
 Avatar.validImageURLs = [];
 

package/lib/Button/Button.js

@@ -81,7 +81,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
           customStatusSize = _customClass$customSt2 === void 0 ? '' : _customClass$customSt2;
       var paletteLower = palette.toLowerCase();
       var statusLower = status.toLowerCase();
-      var classList = needAppearance ? "".concat(_ButtonModule["default"][paletteLower], " ").concat(rounded ? _ButtonModule["default"].rounded : '', " ").concat(!children ? _ButtonModule["default"][size.toLowerCase()] : "".concat(_ButtonModule["default"]["".concat(size, "Btn")], " \n             ").concat(rounded ? _ButtonModule["default"]["".concat(size, "Btn").concat(paletteLower)] : '')) : "".concat(_ButtonModule["default"]["default"]);
+      var classList = needAppearance ? "".concat(_ButtonModule["default"][paletteLower], " ").concat(rounded ? _ButtonModule["default"].rounded : '', " ").concat(!children ? _ButtonModule["default"][size.toLowerCase()] : "".concat(_ButtonModule["default"]["".concat(size, "Btn")], " \n             ").concat(rounded ? _ButtonModule["default"]["".concat(size, "Btn").concat(paletteLower)] : ''), " ").concat(statusLower !== 'none' ? _ButtonModule["default"].loader : '') : "".concat(_ButtonModule["default"]["default"]);
       return /*#__PURE__*/_react["default"].createElement("button", {
         className: "".concat(customButton, " ").concat(classList, " ").concat(isBold ? _ButtonModule["default"].bold : '', "  "),
         "data-id": disabled ? "".concat(dataId, "_disabled") : dataId,
@@ -90,12 +90,12 @@ var Button = /*#__PURE__*/function (_React$Component) {
         "data-title": title,
         type: "button",
         ref: getRef
-      }, children ? children : text, status !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
+      }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
         className: _ButtonModule["default"].overlay
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(customStatusSize, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loading, " ").concat(_ButtonModule["default"]["".concat(size, "loading")]) : _ButtonModule["default"].success)
+        className: "".concat(customStatusSize, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loading, " ").concat(_ButtonModule["default"]["".concat(size, "loading")] ? _ButtonModule["default"]["".concat(size, "loading")] : '') : _ButtonModule["default"].success)
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(customStatus, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loadingelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "element")]) : "".concat(_ButtonModule["default"].successelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "success")]))
+        className: "".concat(customStatus, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loadingelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "element")] ? _ButtonModule["default"]["".concat(paletteLower, "element")] : '') : "".concat(_ButtonModule["default"].successelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "success")] ? _ButtonModule["default"]["".concat(paletteLower, "success")] : ''))
       }))));
     }
   }]);
@@ -138,18 +138,17 @@ Button.propTypes = {
     customStatus: _propTypes["default"].string,
     customStatusSize: _propTypes["default"].string
   })
-};
-Button.propTypesDescription = {
-  onClick: ' ',
-  text: ' ',
-  palette: ' ',
-  disabled: ' ',
-  size: ' ',
-  rounded: ' ',
-  status: ' ',
-  isBold: ' ',
-  children: ' '
-};
+}; // Button.propTypesDescription = {
+//   onClick: ' ',
+//   text: ' ',
+//   palette: ' ',
+//   disabled: ' ',
+//   size: ' ',
+//   rounded: ' ',
+//   status: ' ',
+//   isBold: ' ',
+//   children: ' '
+// };
 
 if (false) {
   Button.docs = {

package/lib/Button/Button.module.css

@@ -362,17 +362,20 @@
 
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .primarysuccess {
   --button_success_border_color: var(--zdt_button_default_border);
 }
+
 .primaryfilled .successelement {
   --button_success_border_color: var(--zdt_button_tick_primary_border);
 }
@@ -456,7 +459,6 @@
   top: calc(var(--zd_size2) * -1);
   width: var(--zd_size6);
   transform: scaleX(-1) rotate(135deg);
-  -ms-transform: scaleX(-1) rotate(135deg);
   -moz-transform: scaleX(-1) rotate(135deg);
   -webkit-transform: scaleX(-1) rotate(135deg);
   transform-origin: center;
@@ -515,4 +517,6 @@
     height: var(--zd_size15);
     width: var(--zd_size6);
   }
-}
+}
+
+.loader{color:var(--dot_mirror)}

package/lib/Card/Card.js

@@ -358,11 +358,10 @@ Card.defaultProps = {
   scrollAt: '10',
   a11y: {},
   isPercentageScroll: false
-};
-Card.propTypesDescription = {
-  children: ' ',
-  isScrollAttribute: ' '
-};
+}; // Card.propTypesDescription = {
+//   children: ' ',
+//   isScrollAttribute: ' '
+// };
 
 if (false) {
   Card.docs = {

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/DropBox/DropBox.js

@@ -118,7 +118,9 @@ var DropBoxElement = /*#__PURE__*/function (_React$Component) {
           targetOffset = _this$props2.targetOffset,
           zIndexStyle = _this$props2.zIndexStyle,
           customStyle = _this$props2.customStyle;
-      var isReducedMotion = this.context.isReducedMotion;
+
+      var _ref = this.context || {},
+          isReducedMotion = _ref.isReducedMotion;
 
       if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
         isAbsolutePositioningNeeded = true;
@@ -278,7 +280,9 @@ var DropBox = /*#__PURE__*/function (_React$Component2) {
       var zIndexStyle = isActive && needAutoZindex ? {
         zIndex: this.getNextIndex()
       } : {};
-      var direction = this.context.direction;
+
+      var _ref2 = this.context || {},
+          direction = _ref2.direction;
 
       var dropBoxEle = /*#__PURE__*/_react["default"].createElement(DropBoxElement, _extends({
         isModel: isModel,

package/lib/ListItem/ListContainer.js

@@ -87,7 +87,7 @@ ListContainer.defaultProps = {
   target: 'blank',
   needBorder: true,
   a11y: {},
-  customClass: {},
+  customClass: '',
   customProps: {}
 };
 var _default = ListContainer;
@@ -115,13 +115,8 @@ ListContainer.propTypes = {
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool
   }),
-  customClass: _propTypes["default"].shape({
-    customListItem: _propTypes["default"].string,
-    customTickIcon: _propTypes["default"].string
-  }),
-  customProps: _propTypes["default"].shape({
-    ListItemProps: _propTypes["default"].object
-  })
+  customClass: _propTypes["default"].string,
+  customProps: _propTypes["default"].object
 };
 
 if (false) {

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) {