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

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,7 +144,7 @@ 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 : ''),
+        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 : ''
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true

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/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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-226",
+  "version": "1.0.0-alpha-229",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -48,9 +48,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.0-beta.92",
-    "@zohodesk/variables": "1.0.0-beta.29",
-    "@zohodesk/svg": "1.0.0-beta.41",
+    "@zohodesk/icons": "^1.0.0-beta.92",
+    "@zohodesk/variables": "^1.0.0-beta.29",
+    "@zohodesk/svg": "^1.0.0-beta.41",
     "@zohodesk/virtualizer": "^1.0.3",
     "velocity-react": "^1.4.1",
     "react-sortable-hoc": "^0.8.3"