@zohodesk/components 1.0.0-temp-48 → 1.0.0-temp-51

package/lib/Responsive/sizeObservers.js

@@ -62,7 +62,14 @@ function rangeCheck(minValue, maxValue, screenValue) {
   return minValue <= screenValue && maxValue >= screenValue;
 }
 
-var isTouchDevice = 'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
+function isTouchDeviceFunc() {
+  // return window.matchMedia("(pointer: coarse)").matches
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+} // export const isTouchDevice =
+//   'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
+
+
+var isTouchDevice = isTouchDeviceFunc();
 exports.isTouchDevice = isTouchDevice;
 
 function isBreackPointMatched(object, screen) {

package/lib/Ribbon/Ribbon.js

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

package/lib/RippleEffect/RippleEffect.js

@@ -22,8 +22,9 @@ function RippleEffect(props) {
       palette = props.palette,
       hoverType = props.hoverType,
       isNeedEffect = props.isNeedEffect,
-      needBorder = props.needBorder;
-  var className = isNeedEffect ? "".concat(_RippleEffectModule["default"].effect, " ").concat(_RippleEffectModule["default"][palette], " ").concat(needBorder ? _RippleEffectModule["default"].border : '', " ").concat(_RippleEffectModule["default"]["".concat(hoverType, "Hover")] ? _RippleEffectModule["default"]["".concat(hoverType, "Hover")] : '', " ").concat(isActive && !isDisabled ? _RippleEffectModule["default"].active : '', " ").concat(isDisabled ? '' : _RippleEffectModule["default"].hoverEffect, " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisabled') : '') : '';
+      needBorder = props.needBorder,
+      isCopyTextEnabled = props.isCopyTextEnabled;
+  var className = isNeedEffect ? "".concat(_RippleEffectModule["default"].effect, " ").concat(_RippleEffectModule["default"][palette], " ").concat(needBorder ? _RippleEffectModule["default"].border : '', " ").concat(_RippleEffectModule["default"]["".concat(hoverType, "Hover")] ? _RippleEffectModule["default"]["".concat(hoverType, "Hover")] : '', " ").concat(isActive && !isDisabled ? _RippleEffectModule["default"].active : '', " ").concat(isDisabled ? '' : _RippleEffectModule["default"].hoverEffect, " ").concat(isCopyTextEnabled ? _RippleEffectModule["default"].notAllowed : isDisabled ? (0, _CssProvider["default"])('isDisabled') : '') : '';
 
   var child = _react["default"].Children.only(children);
 
@@ -38,7 +39,8 @@ RippleEffect.defaultProps = {
   isNeedEffect: true,
   needBorder: true,
   hoverType: 'default',
-  palette: 'default'
+  palette: 'default',
+  isCopyTextEnabled: false
 };
 RippleEffect.propTypes = {
   children: _propTypes["default"].node,
@@ -47,7 +49,8 @@ RippleEffect.propTypes = {
   isDisabled: _propTypes["default"].bool,
   isNeedEffect: _propTypes["default"].bool,
   needBorder: _propTypes["default"].bool,
-  palette: _propTypes["default"].oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger'])
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  isCopyTextEnabled: _propTypes["default"].bool
 };
 
 if (false) {

package/lib/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/lib/Select/GroupSelect.js

@@ -669,7 +669,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/lib/Select/Select.js

@@ -386,6 +386,20 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         this.valueInput && this.valueInput.focus({
           preventScroll: true
         }); //this.handlePopupClose(e);
+      } else if (keyCode === 9) {
+        var _option = options[hoverIndex];
+
+        var _ref2 = _option || {},
+            _id = _ref2.id;
+
+        if (isPopupOpen && !(0, _Common.getIsEmptyValue)(_id)) {
+          onChange && onChange(_id, optionsNormalize[_id]);
+          needCloseOnSelect && this.handlePopupClose(e);
+        }
+
+        if (!isPopupOpen && isPopupOpenOnEnter) {
+          this.togglePopup(e);
+        }
       }
     }
   }, {
@@ -611,8 +625,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       var changeValue = function changeValue() {
         var optionDetails = _this6.autoSelectSuggestions[_this6.autoSelectIndex];
 
-        var _ref2 = optionDetails || {},
-            id = _ref2.id;
+        var _ref3 = optionDetails || {},
+            id = _ref3.id;
 
         if (!(0, _Common.getIsEmptyValue)(id)) {
           _this6.handleChange(id);
@@ -764,7 +778,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(isParentBased || isReadOnly || isDisabled ? _SelectModule["default"].container : '', " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/lib/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/lib/Select/SelectWithAvatar.js

@@ -187,7 +187,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           tagSize = _this$props.tagSize,
           groupName = _this$props.groupName,
           i18nKeys = _this$props.i18nKeys,
-          htmlId = _this$props.htmlId;
+          htmlId = _this$props.htmlId,
+          needEffect = _this$props.needEffect;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -209,9 +210,9 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(className ? className : ''),
+        className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
@@ -389,7 +390,8 @@ SelectWithAvatarComponent.propTypes = {
   title: _propTypes["default"].string,
   togglePopup: _propTypes["default"].func,
   valueField: _propTypes["default"].string,
-  htmlId: _propTypes["default"].string
+  htmlId: _propTypes["default"].string,
+  needEffect: _propTypes["default"].bool
 };
 SelectWithAvatarComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -410,7 +412,8 @@ SelectWithAvatarComponent.defaultProps = {
   dataId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
-  i18nKeys: {}
+  i18nKeys: {},
+  needEffect: true
 };
 SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
 var SelectWithAvatar = (0, _Popup["default"])(SelectWithAvatarComponent);

package/lib/Select/SelectWithIcon.js

@@ -352,7 +352,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
       var ariaErrorId = this.getNextAriaId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/lib/Stencils/Stencils.js

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

package/lib/Stencils/Stencils.module.css

@@ -14,28 +14,18 @@
   background-size: 800px 1px;
 }
 [dir=ltr] .stencil {
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-ltr ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-ltr ;
+  animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-ltr ;
-  -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stencil {
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-rtl ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-rtl ;
+  animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-rtl ;
-  -webkit-animation-timing-function: linear;
 }
 @keyframes placeHolderShimmer-ltr {
   0% {

package/lib/Tab/Tabs.js

@@ -326,12 +326,13 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       var _this$props5 = this.props,
           children = _this$props5.children,
           maxTabsCount = _this$props5.maxTabsCount,
-          minTabsCount = _this$props5.minTabsCount;
+          minTabsCount = _this$props5.minTabsCount,
+          isResponsive = _this$props5.isResponsive;
       var mainTabs = [],
           moreTabs = [],
           otherTabs = [];
 
-      if (totalDimension) {
+      if (totalDimension && isResponsive) {
         var _this$props6 = this.props,
             childType = _this$props6.childType,
             selectedTab = _this$props6.selectedTab;
@@ -377,6 +378,16 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           mainTabs = newTabs; */
           this.setMaxDim(totalDimension);
         }
+      } else if (!isResponsive) {
+        var _childType = this.props.childType;
+
+        _react["default"].Children.forEach(children, function (child) {
+          if (child && child.type === _childType && child.props.id) {
+            mainTabs.push(child);
+          } else {
+            otherTabs.push(child);
+          }
+        });
       } else {
         moreTabs = children;
       }

package/lib/Tag/Tag.js

@@ -132,7 +132,9 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
           tooltip = _this$props4.tooltip,
           avatarPalette = _this$props4.avatarPalette,
           customClass = _this$props4.customClass,
-          a11y = _this$props4.a11y;
+          a11y = _this$props4.a11y,
+          needEffect = _this$props4.needEffect,
+          isReadOnly = _this$props4.isReadOnly;
       var _customClass$customTa = customClass.customTag,
           customTag = _customClass$customTa === void 0 ? '' : _customClass$customTa,
           _customClass$customTa2 = customClass.customTagClose,
@@ -147,7 +149,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
           clearLabel = _a11y$clearLabel === void 0 ? 'Delete' : _a11y$clearLabel;
       var isDarkPalette = palette === 'dark';
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TagModule["default"].container, " ").concat(active ? "".concat(_TagModule["default"].selected, " ").concat(_TagModule["default"]["active".concat(palette)]) : '', " ").concat(onRemove ? active ? "".concat(_TagModule["default"]["active".concat(size, "Effect")]) : '' : '', "  ").concat(_TagModule["default"][size], " ").concat(rounded ? _TagModule["default"].lgRadius : _TagModule["default"].smRadius, " ").concat(_TagModule["default"][palette], " ").concat(disabled ? _TagModule["default"].disabled : '', " ").concat(onSelectTag ? _TagModule["default"].pointer : '', " ").concat(customTag),
+        className: "".concat(_TagModule["default"].container, " ").concat(needEffect && !isReadOnly ? _TagModule["default"].effect : _TagModule["default"].readonly, " ").concat(active ? "".concat(_TagModule["default"].selected, " ").concat(_TagModule["default"]["active".concat(palette)]) : '', " ").concat(onRemove ? active ? "".concat(_TagModule["default"]["active".concat(size, "Effect")]) : '' : '', "  ").concat(_TagModule["default"][size], " ").concat(rounded ? _TagModule["default"].lgRadius : _TagModule["default"].smRadius, " ").concat(_TagModule["default"][palette], " ").concat(disabled ? _TagModule["default"].disabled : '', " ").concat(onSelectTag ? _TagModule["default"].pointer : '', " ").concat(customTag),
         "data-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
         onClick: this.handleSelect,
         ref: this.getRef,
@@ -204,7 +206,9 @@ Tag.defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
-  a11y: {}
+  a11y: {},
+  needEffect: true,
+  isReadOnly: false
 };
 Tag.propTypes = {
   active: _propTypes.PropTypes.bool,
@@ -235,7 +239,9 @@ Tag.propTypes = {
   }),
   a11y: _propTypes.PropTypes.shape({
     clearLabel: _propTypes.PropTypes.string
-  })
+  }),
+  needEffect: _propTypes.PropTypes.bool,
+  isReadOnly: _propTypes.PropTypes.bool
 };
 
 if (false) {

package/lib/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/lib/TextBoxIcon/TextBoxIcon.js

@@ -144,8 +144,8 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,
-        className: "".concat(_TextBoxIconModule["default"].container, " ").concat(isDisabled ? _TextBoxIconModule["default"].disabled : isReadOnly ? needEffect ? _TextBoxIconModule["default"].effect : '' : _TextBoxIconModule["default"].effect, " ").concat(isActive || isFocus ? _TextBoxIconModule["default"].effectFocused : '', " ").concat(customTBoxWrap, " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverStyle : ''),
-        "data-title": isDisabled ? title : ''
+        className: "".concat(_TextBoxIconModule["default"].container, " ").concat(isDisabled ? _TextBoxIconModule["default"].disabled : isReadOnly ? needEffect ? _TextBoxIconModule["default"].effect : _TextBoxIconModule["default"].readonly : _TextBoxIconModule["default"].effect, " ").concat(isActive || isFocus ? _TextBoxIconModule["default"].effectFocused : '', " ").concat(customTBoxWrap, " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverStyle : ''),
+        "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], _extends({}, this.props, {

package/lib/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/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -63,9 +63,11 @@ var VelocityAnimation = /*#__PURE__*/function (_React$Component) {
           isCustomized = _this$props.isCustomized,
           needUIPack = _this$props.needUIPack,
           isFlex = _this$props.isFlex;
-      var _this$context = this.context,
-          direction = _this$context.direction,
-          isReducedMotion = _this$context.isReducedMotion;
+
+      var _ref = this.context || {},
+          direction = _ref.direction,
+          isReducedMotion = _ref.isReducedMotion;
+
       var enterAnimationObj = {
         fade: 'transition.fadeIn',
         slideDown: 'slideDown',

package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -80,9 +80,11 @@ var VelocityAnimationGroup = /*#__PURE__*/function (_React$Component) {
           isCustomized = _this$props.isCustomized,
           name = _this$props.name,
           needUIPack = _this$props.needUIPack;
-      var _this$context = this.context,
-          direction = _this$context.direction,
-          isReducedMotion = _this$context.isReducedMotion;
+
+      var _ref = this.context || {},
+          direction = _ref.direction,
+          isReducedMotion = _ref.isReducedMotion;
+
       var childProps = clearProps(this.props);
       var enterAnimationObj = {
         fade: 'transition.fadeIn',

package/lib/common/docStyle.module.css

@@ -94,18 +94,18 @@
 }
 
 .blue {
-  color: var(--zd_text_prime);
+  color: var(--zd_prime);
 }
 
 .dark {
   composes: p10;
-  background-color: var(--dot_bg_black);
+  background-color: var(--dot_black);
 }
 
 .table {
   composes: p10;
   composes: cboth;
-  border: 1px solid var(--zd_border_smoke84);
+  border: 1px solid var(--zd_smoke84);
   border-radius: 3px;
 }
 
@@ -119,7 +119,7 @@
 
 .tableheading {
   composes: blue;
-  background: var(--zd_bg_smoke1);
+  background:var(--zd_smoke1);
 }
 
 .palette {
@@ -130,13 +130,13 @@
   width: 200px;
   composes: tcenter;
   font-weight: bold;
-  border: 1px solid var(--zd_border_smoke83);
+  border: 1px solid var(--zd_smoke83);
   border-radius: 3px;
 }
 
 .palette .palettecard {
   height: 80px;
-  border: 1px solid var(--zd_border_smoke83);
+  border: 1px solid var(--zd_smoke83);
 }
 
 .palette span {
@@ -149,7 +149,7 @@
   composes: tcenter;
   composes: p10;
   composes: m10;
-  border: 1px solid var(--zd_border_smoke83);
+  border: 1px solid var(--zd_smoke83);
   border-radius: 3px;
 }
 
@@ -161,7 +161,7 @@
 .cover {
   composes: p10;
   composes: m10;
-  border: 1px solid var(--zd_border_smoke1);
+  border: 1px solid var(--zd_smoke1);
   border-radius: 5px;
 }
 
@@ -759,4 +759,4 @@
   --textarea_text_color: hsl(var(--hue), 100%, 80%);
   --textarea_padding: 2px 10px;
   background-color: hsl(var(--hue), 100%, 97%);
-}
+}

package/lib/utils/dropDownUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.optionIdGrouping = exports.makeObjectConcat = exports.makeGetSelectedValueText = exports.makeGetOptionIdChange = exports.makeGetMultiSelectSelectedOptions = exports.makeGetMultiSelectFilterSuggestions = exports.makeGetGroupSelectOptions = exports.makeGetGroupSelectFilterSuggestions = exports.makeFormatOptions = exports.getValueField = exports.getTextField = exports.getPrefixText = exports.getOptions = exports.getOptionType = exports.getImageField = exports.getIconSize = exports.getIconName = exports.filterSelectedOptions = exports.extractOptionId = exports.dummyObj = exports.dummyArray = void 0;
+exports.optionIdGrouping = exports.makeObjectConcat = exports.makeGetSelectedValueText = exports.makeGetOptionIdChange = exports.makeGetMultiSelectSelectedOptions = exports.makeGetMultiSelectFilterSuggestions = exports.makeGetIsShowClearIcon = exports.makeGetGroupSelectOptions = exports.makeGetGroupSelectFilterSuggestions = exports.makeFormatOptions = exports.getValueField = exports.getTextField = exports.getPrefixText = exports.getOptions = exports.getOptionType = exports.getImageField = exports.getIconSize = exports.getIconName = exports.filterSelectedOptions = exports.extractOptionId = exports.dummyObj = exports.dummyArray = void 0;
 
 var _reselect = require("reselect");
 
@@ -562,4 +562,47 @@ var filterSelectedOptions = function filterSelectedOptions() {
   };
 };
 
-exports.filterSelectedOptions = filterSelectedOptions;
+exports.filterSelectedOptions = filterSelectedOptions;
+
+var makeGetIsShowClearIcon = function makeGetIsShowClearIcon() {
+  return (0, _reselect.createSelector)([getSelectedOptionsSel, getDisabledOptions], function (selectedOptions, disabledOptions) {
+    var countForShowClear = 2;
+    var enabledOptionsLength = 0;
+    var isShowClearIcon = selectedOptions.length >= countForShowClear;
+
+    if (disabledOptions.length) {
+      var isHaveEnabledOptions = false;
+      var isAllDisabled = disabledOptions.length === selectedOptions.length;
+
+      if (!isAllDisabled) {
+        isHaveEnabledOptions = selectedOptions.some(function (option) {
+          var _ref5 = option || {},
+              _ref5$isDisabled = _ref5.isDisabled,
+              isDisabled = _ref5$isDisabled === void 0 ? false : _ref5$isDisabled;
+
+          if (!isDisabled) {
+            enabledOptionsLength += 1;
+
+            if (enabledOptionsLength === countForShowClear) {
+              return true;
+            }
+
+            return false;
+          }
+
+          return false;
+        });
+      }
+
+      return {
+        isShowClearIcon: isAllDisabled ? !isAllDisabled : isHaveEnabledOptions
+      };
+    }
+
+    return {
+      isShowClearIcon: isShowClearIcon
+    };
+  });
+};
+
+exports.makeGetIsShowClearIcon = makeGetIsShowClearIcon;