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

package/README.md

@@ -32,6 +32,10 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-229
+
+- MultiSelect, AdvancedMultiSelect => disabledOption Clear icon handled properly
+
 # 1.0.0-alpha-228
 
 - Button =>  danger, primary loader color issue solved

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -23,7 +23,7 @@ import style from './AdvancedMultiSelect.module.css';
 /**** Methods ****/
 
 import { getIsEmptyValue, getSearchString } from '../utils/Common.js';
-import { filterSelectedOptions } from '../utils/dropDownUtils';
+import { filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
 /* eslint-disable react/sort-prop-types */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -45,6 +45,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     this.state = Object.assign({}, oldState, {
       showedSelectedOptionsCount: !getIsEmptyValue(selectedOptionsLimit) && selectedOptionsLen > selectedOptionsLimit ? selectedOptionsLimit : selectedOptionsLen
     });
+    this.getIsShowClearIcon = makeGetIsShowClearIcon();
     this.handleFilterSuggestions = this.handleFilterSuggestions.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleSelectOption = this.handleSelectOption.bind(this);
@@ -191,7 +192,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       imageField,
       optionType,
       iconName,
-      iconSize
+      iconSize,
+      disabledOptions
     } = props;
     return this.formatSelectedOptions({
       options: selectedOptionDetails,
@@ -200,7 +202,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       imageField,
       optionType,
       iconName,
-      iconSize
+      iconSize,
+      disabledOptions
     });
   }
 
@@ -350,7 +353,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       isBoxPaddingNeed,
       getFooter,
       customProps,
-      needEffect
+      needEffect,
+      disabledOptions
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -382,6 +386,13 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     const moreCount = allselectedOptionIdsLen - showedSelectedOptionsCount;
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
+    let {
+      isShowClearIcon: isShowClear
+    } = this.getIsShowClearIcon({
+      selectedOptions,
+      disabledOptions
+    });
+    let isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": dataIdMultiSelectComp,
@@ -431,7 +442,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         ariaDescribedby: ariaErrorId
       },
       autoComplete: false
-    })), !isReadOnly && !isDisabled && selectedOptions.length > 1 ? /*#__PURE__*/React.createElement(Box, {
+    })), isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
       className: style.delete,
       dataId: dataIdClearIcon,
       "data-title": clearText,

package/es/MultiSelect/MultiSelect.js

@@ -23,7 +23,7 @@ import style from './MultiSelect.module.css';
 /**** Methods ****/
 
 import { debounce, scrollTo, bind, getIsEmptyValue, getSearchString } from '../utils/Common.js';
-import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions } from '../utils/dropDownUtils';
+import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
 /* eslint-disable react/forbid-component-props */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -35,7 +35,8 @@ export class MultiSelectComponent extends React.Component {
     this.getNextAriaId = getUniqueId(this);
     this.getFilterSuggestions = makeGetFilterSuggestions();
     this.formatOptions = makeFormatOptions();
-    this.getSelectedOptions = makeGetSelectedOptions(); //Use in AdvancedMultiSelect component
+    this.getSelectedOptions = makeGetSelectedOptions();
+    this.getIsShowClearIcon = makeGetIsShowClearIcon(); //Use in AdvancedMultiSelect component
 
     this.objectConcat = makeObjectConcat();
     this.formatSelectedOptions = makeFormatOptions();
@@ -871,7 +872,8 @@ export class MultiSelectComponent extends React.Component {
       children,
       customChildrenClass,
       getFooter,
-      needEffect
+      needEffect,
+      disabledOptions
     } = this.props;
     const {
       clearText = 'Clear all',
@@ -897,7 +899,13 @@ export class MultiSelectComponent extends React.Component {
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
-    const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
+    let {
+      isShowClearIcon: isShowClear
+    } = this.getIsShowClearIcon({
+      selectedOptions,
+      disabledOptions
+    });
+    const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,

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/MultiSelect/AdvancedMultiSelect.js

@@ -110,6 +110,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
     _this.state = Object.assign({}, oldState, {
       showedSelectedOptionsCount: !(0, _Common.getIsEmptyValue)(selectedOptionsLimit) && selectedOptionsLen > selectedOptionsLimit ? selectedOptionsLimit : selectedOptionsLen
     });
+    _this.getIsShowClearIcon = (0, _dropDownUtils.makeGetIsShowClearIcon)();
     _this.handleFilterSuggestions = _this.handleFilterSuggestions.bind(_assertThisInitialized(_this));
     _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
     _this.handleSelectOption = _this.handleSelectOption.bind(_assertThisInitialized(_this));
@@ -257,7 +258,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           imageField = props.imageField,
           optionType = props.optionType,
           iconName = props.iconName,
-          iconSize = props.iconSize;
+          iconSize = props.iconSize,
+          disabledOptions = props.disabledOptions;
       return this.formatSelectedOptions({
         options: selectedOptionDetails,
         valueField: valueField,
@@ -265,7 +267,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         imageField: imageField,
         optionType: optionType,
         iconName: iconName,
-        iconSize: iconSize
+        iconSize: iconSize,
+        disabledOptions: disabledOptions
       });
     }
   }, {
@@ -412,7 +415,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           isBoxPaddingNeed = _this$props5.isBoxPaddingNeed,
           getFooter = _this$props5.getFooter,
           customProps = _this$props5.customProps,
-          needEffect = _this$props5.needEffect;
+          needEffect = _this$props5.needEffect,
+          disabledOptions = _this$props5.disabledOptions;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,
@@ -441,6 +445,14 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       var moreCount = allselectedOptionIdsLen - showedSelectedOptionsCount;
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
+
+      var _this$getIsShowClearI = this.getIsShowClearIcon({
+        selectedOptions: selectedOptions,
+        disabledOptions: disabledOptions
+      }),
+          isShowClear = _this$getIsShowClearI.isShowClearIcon;
+
+      var isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
       return /*#__PURE__*/_react["default"].createElement("div", {
         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,
@@ -490,7 +502,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           ariaDescribedby: ariaErrorId
         },
         autoComplete: false
-      })), !isReadOnly && !isDisabled && selectedOptions.length > 1 ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      })), isShowClearIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _AdvancedMultiSelectModule["default"]["delete"],
         dataId: dataIdClearIcon,
         "data-title": clearText,

package/lib/MultiSelect/MultiSelect.js

@@ -106,7 +106,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     _this.getNextAriaId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
     _this.getFilterSuggestions = (0, _dropDownUtils.makeGetMultiSelectFilterSuggestions)();
     _this.formatOptions = (0, _dropDownUtils.makeFormatOptions)();
-    _this.getSelectedOptions = (0, _dropDownUtils.makeGetMultiSelectSelectedOptions)(); //Use in AdvancedMultiSelect component
+    _this.getSelectedOptions = (0, _dropDownUtils.makeGetMultiSelectSelectedOptions)();
+    _this.getIsShowClearIcon = (0, _dropDownUtils.makeGetIsShowClearIcon)(); //Use in AdvancedMultiSelect component
 
     _this.objectConcat = (0, _dropDownUtils.makeObjectConcat)();
     _this.formatSelectedOptions = (0, _dropDownUtils.makeFormatOptions)();
@@ -943,7 +944,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           children = _this$props13.children,
           customChildrenClass = _this$props13.customChildrenClass,
           getFooter = _this$props13.getFooter,
-          needEffect = _this$props13.needEffect;
+          needEffect = _this$props13.needEffect,
+          disabledOptions = _this$props13.disabledOptions;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText,
@@ -967,7 +969,14 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var suggestions = this.handleFilterSuggestions();
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
-      var isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
+
+      var _this$getIsShowClearI = this.getIsShowClearIcon({
+        selectedOptions: selectedOptions,
+        disabledOptions: disabledOptions
+      }),
+          isShowClear = _this$getIsShowClearI.isShowClearIcon;
+
+      var isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
       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 : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),

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-228",
+  "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"