@zohodesk/components 1.4.8 → 1.4.9

package/lib/MultiSelect/MultiSelect.js

@@ -15,6 +15,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _defaultProps2 = require("./MobileHeader/props/defaultProps");
 
+var _constants = require("./constants");
+
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
 
 var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
@@ -316,11 +318,13 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleGetSelectedOptions",
     value: function handleGetSelectedOptions(selectedOptions, normalizedFormatOptions, props) {
-      var allowValueFallback = props.allowValueFallback;
+      var allowValueFallback = props.allowValueFallback,
+          limit = props.limit;
       return this.getSelectedOptions({
         selectedOptions: selectedOptions,
         normalizedFormatOptions: normalizedFormatOptions,
-        allowValueFallback: allowValueFallback
+        allowValueFallback: allowValueFallback,
+        limit: limit
       });
     }
   }, {
@@ -393,7 +397,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           getNextOptions = _this$props5.getNextOptions,
           isPopupOpen = _this$props5.isPopupOpen,
           isPopupOpenOnEnter = _this$props5.isPopupOpenOnEnter,
-          onKeyDown = _this$props5.onKeyDown;
+          onKeyDown = _this$props5.onKeyDown,
+          limit = _this$props5.limit;
+      var allowKeyboardActions = !limit || limit && selectedOptions.length < limit;
       var highLightedSelectOptionsLen = highLightedSelectOptions.length;
 
       if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27 || keyCode === 9)) {
@@ -413,7 +419,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
 
       var suggestionsLen = suggestions.length;
 
-      if (suggestionsLen && isPopupOpen && keyCode === 38) {
+      if (suggestionsLen && isPopupOpen && keyCode === 38 && allowKeyboardActions) {
         //up arrow
 
         /*if (hoverOption === 0) { //disable first to last option higlight
@@ -424,7 +430,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
             hoverOption: hoverOption - 1
           });
         }
-      } else if (suggestionsLen && isPopupOpen && keyCode === 40) {
+      } else if (suggestionsLen && isPopupOpen && keyCode === 40 && allowKeyboardActions) {
         //down arrow
 
         /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
@@ -441,8 +447,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
             hoverOption: hoverOption + 1
           });
         }
-      } else if (keyCode === 13) {
-        //enter key
+      } else if (keyCode === 13 && allowKeyboardActions) {
+        //enter ke
         var selectedOption = suggestions[hoverOption] || {};
         var id = selectedOption.id;
         isPopupOpen && !(0, _Common.getIsEmptyValue)(id) && this.handleSelectOption(id, e);
@@ -809,12 +815,14 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           togglePopup = _this$props10.togglePopup,
           propSelectedOptions = _this$props10.selectedOptions,
           _this$props10$disable = _this$props10.disabledOptions,
-          disabledOptions = _this$props10$disable === void 0 ? dummyArray : _this$props10$disable;
+          disabledOptions = _this$props10$disable === void 0 ? dummyArray : _this$props10$disable,
+          limit = _this$props10.limit;
 
       var _filterSelectedOption = (0, _dropDownUtils.filterSelectedOptions)({
         selectedOptions: selectedOptions,
         propSelectedOptions: propSelectedOptions,
-        disabledOptions: disabledOptions
+        disabledOptions: disabledOptions,
+        limit: limit
       }),
           newSelectedOptions = _filterSelectedOption.newSelectedOptions;
 
@@ -973,9 +981,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           highLightedSelectOptions = _this$state8.highLightedSelectOptions,
           searchStr = _this$state8.searchStr;
       var _i18nKeys$clearText = i18nKeys.clearText,
-          clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
+          clearText = _i18nKeys$clearText === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _i18nKeys$clearText;
       var _a11y$clearLabel = a11y.clearLabel,
-          clearLabel = _a11y$clearLabel === void 0 ? 'Clear all' : _a11y$clearLabel,
+          clearLabel = _a11y$clearLabel === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearLabel : _a11y$clearLabel,
           ariaLabelledby = a11y.ariaLabelledby;
 
       var _this$getIsShowClearI = this.getIsShowClearIcon({
@@ -1110,7 +1118,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           boxSize = _this$props15.boxSize,
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
-          needSelectAll = _this$props15.needSelectAll;
+          needSelectAll = _this$props15.needSelectAll,
+          limit = _this$props15.limit;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,
@@ -1120,7 +1129,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           selectedOptionIds = _this$state9.selectedOptionIds;
       var _i18nKeys = i18nKeys,
           _i18nKeys$searchText = _i18nKeys.searchText,
-          searchText = _i18nKeys$searchText === void 0 ? 'Searching...' : _i18nKeys$searchText;
+          searchText = _i18nKeys$searchText === void 0 ? _constants.MULTISELECT_I18N_KEYS.searchText : _i18nKeys$searchText,
+          _i18nKeys$limitReache = _i18nKeys.limitReachedMessage,
+          limitReachedMessage = _i18nKeys$limitReache === void 0 ? _constants.MULTISELECT_I18N_KEYS.limitReachedMessage : _i18nKeys$limitReache;
       var suggestions = this.handleFilterSuggestions();
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
@@ -1173,7 +1184,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         onClick: this.handlePopupClose
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"].effect
-      }, this.getSelectionUI(true))) : null, needSelectAll ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+      }, this.getSelectionUI(true))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
         suggestions: suggestions,
@@ -1199,7 +1210,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
-        }
+        },
+        limit: limit,
+        limitReachedMessage: limitReachedMessage
       }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -15,6 +15,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _defaultProps2 = require("./MobileHeader/props/defaultProps");
 
+var _constants = require("./constants");
+
 var _MultiSelect = require("./MultiSelect");
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
@@ -151,9 +153,13 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           keepSelectedOptions = _this$props.keepSelectedOptions,
-          customProps = _this$props.customProps;
+          customProps = _this$props.customProps,
+          limit = _this$props.limit;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+      var _i18nKeys = i18nKeys,
+          _i18nKeys$limitReache = _i18nKeys.limitReachedMessage,
+          limitReachedMessage = _i18nKeys$limitReache === void 0 ? _constants.MULTISELECT_I18N_KEYS.limitReachedMessage : _i18nKeys$limitReache;
       i18nKeys = Object.assign({}, _defaultProps2.defaultProps.i18nKeys, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
@@ -213,7 +219,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         onClick: this.handlePopupClose
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"].effect
-      }, this.getSelectionUI(true)))) : null, needSelectAll ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+      }, this.getSelectionUI(true)))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
         suggestions: suggestions,
@@ -238,7 +244,9 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
-        }
+        },
+        limit: limit,
+        limitReachedMessage: limitReachedMessage
       }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,

package/lib/MultiSelect/SelectedOptions.js

@@ -67,9 +67,11 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
           onSelect = _this$props.onSelect,
           size = _this$props.size,
           palette = _this$props.palette,
-          dataId = _this$props.dataId;
+          dataId = _this$props.dataId,
+          limit = _this$props.limit;
       var isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, selectedOptions.map(function (option) {
+      var selectedData = limit && limit > 0 ? selectedOptions.slice(0, limit) : selectedOptions;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, selectedData.map(function (option) {
         var id = option.id,
             value = option.value,
             photoURL = option.photoURL,

package/lib/MultiSelect/Suggestions.js

@@ -84,9 +84,12 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           palette = _this$props.palette,
           htmlId = _this$props.htmlId,
           a11y = _this$props.a11y,
-          needMultiLineText = _this$props.needMultiLineText;
+          needMultiLineText = _this$props.needMultiLineText,
+          limit = _this$props.limit,
+          limitReachedMessage = _this$props.limitReachedMessage;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
+      var selectedOptionsLength = selectedOptions.length;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         role: ariaParentRole,
@@ -110,6 +113,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             listItemCustomProps = _suggestion$listItemC === void 0 ? {} : _suggestion$listItemC;
         var isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
         var isHighlight = hoverOption === index || id === hoverId ? true : false;
+        var isLimitReached = selectedOptionsLength >= limit && !isActive;
         var list_a11y = Object.assign({}, a11y, {
           ariaSelected: isActive,
           ariaLabel: value,
@@ -117,7 +121,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
         });
 
         var commonProps = _objectSpread({
-          isDisabled: isDisabled,
+          isDisabled: isDisabled ? isDisabled : isLimitReached,
           needMultiLineText: needMultiLineText
         }, listItemCustomProps);
 
@@ -127,6 +131,10 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           };
         }
 
+        if (isLimitReached) {
+          commonProps.disableTitle = limitReachedMessage;
+        }
+
         if (optionType === 'avatar') {
           return /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], _extends({}, commonProps, {
             autoHover: false,

package/lib/MultiSelect/__tests__/MultiSelect.spec.js

@@ -8,6 +8,8 @@ var _MultiSelect = _interopRequireDefault(require("../MultiSelect"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var testData = ['text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'];
+var testSelectedData = ['text1', 'text2', 'text3'];
 describe('MultiSelect', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], null)),
@@ -15,4 +17,27 @@ describe('MultiSelect', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with limit feature', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], {
+      valueField: "id",
+      textField: "text",
+      options: testData,
+      selectedOptions: testSelectedData,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      i18nKeys: {
+        clearText: 'Clear Selected Items',
+        loadingText: 'Fetching...',
+        emptyText: 'No Options .',
+        noMoreText: 'No More Options .',
+        searchEmptyText: 'No Matches Found .'
+      },
+      needResponsive: true,
+      limit: 3
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/MultiSelect/__tests__/Suggestions.spec.js

@@ -8,6 +8,53 @@ var _Suggestions = _interopRequireDefault(require("../Suggestions"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var sampleData = [{
+  "id": 2,
+  "value": "text2",
+  "optionType": "default",
+  "listItemProps": {
+    "style": {
+      "color": "red"
+    }
+  }
+}, {
+  "id": 3,
+  "value": "text3",
+  "optionType": "default",
+  "listItemProps": {
+    "style": {
+      "color": "blue"
+    }
+  }
+}, {
+  "id": 4,
+  "value": "text4",
+  "optionType": "default"
+}, {
+  "id": 5,
+  "value": "text5",
+  "optionType": "default"
+}, {
+  "id": 6,
+  "value": "text6",
+  "optionType": "default"
+}, {
+  "id": 7,
+  "value": "text7",
+  "optionType": "default"
+}, {
+  "id": 8,
+  "value": "text8",
+  "optionType": "default"
+}, {
+  "id": 9,
+  "value": "text9",
+  "optionType": "default"
+}, {
+  "id": 10,
+  "value": "text10",
+  "optionType": "default"
+}];
 describe('Suggestions', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
@@ -17,4 +64,15 @@ describe('Suggestions', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with limit props', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      selectedOptions: [1, 2, 3, 4],
+      suggestions: sampleData,
+      limit: 3,
+      limitReachedMessage: "Limit Reached"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap

@@ -84,3 +84,256 @@ exports[`MultiSelect rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`MultiSelect rendering with limit feature 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper     effect"
+    data-id="multiSelect"
+    data-selector-id="multiSelect"
+    data-test-id="multiSelect"
+  >
+    <div
+      class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="tag medium shrinkOff"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="5"
+          class="container effect    medium lgRadius danger  pointer "
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="text1"
+          tabindex="0"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="5"
+          >
+            text1
+          </div>
+          <button
+            aria-label="Delete"
+            class="buttonReset close 
+            lgRadiusClose 
+             closedanger"
+            data-id="tag_RemoveTag"
+            data-test-id="tag_RemoveTag"
+            type="button"
+            value="text"
+          >
+            <div
+              class="flex cover coldir both"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <i
+                aria-hidden="true"
+                class="zd_font_icons basic icon-close2 fbold   "
+                data-id="fontIcon"
+                data-selector-id="fontIcon"
+                data-test-id="fontIcon"
+                style="--zd-iconfont-size: var(--zd_font_size8);"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+      <div
+        class="tag medium shrinkOff"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="6"
+          class="container effect    medium lgRadius danger  pointer "
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="text2"
+          tabindex="0"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="6"
+          >
+            text2
+          </div>
+          <button
+            aria-label="Delete"
+            class="buttonReset close 
+            lgRadiusClose 
+             closedanger"
+            data-id="tag_RemoveTag"
+            data-test-id="tag_RemoveTag"
+            type="button"
+            value="text"
+          >
+            <div
+              class="flex cover coldir both"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <i
+                aria-hidden="true"
+                class="zd_font_icons basic icon-close2 fbold   "
+                data-id="fontIcon"
+                data-selector-id="fontIcon"
+                data-test-id="fontIcon"
+                style="--zd-iconfont-size: var(--zd_font_size8);"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+      <div
+        class="tag medium shrinkOff"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="7"
+          class="container effect    medium lgRadius danger  pointer "
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="text3"
+          tabindex="0"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="7"
+          >
+            text3
+          </div>
+          <button
+            aria-label="Delete"
+            class="buttonReset close 
+            lgRadiusClose 
+             closedanger"
+            data-id="tag_RemoveTag"
+            data-test-id="tag_RemoveTag"
+            type="button"
+            value="text"
+          >
+            <div
+              class="flex cover coldir both"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <i
+                aria-hidden="true"
+                class="zd_font_icons basic icon-close2 fbold   "
+                data-id="fontIcon"
+                data-selector-id="fontIcon"
+                data-test-id="fontIcon"
+                style="--zd-iconfont-size: var(--zd_font_size8);"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class=" custmSpan custmSpanMedium clearIconSpace
+          "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-required="true"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="multiSelect_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelect_textBox"
+              maxlength="250"
+              placeholder=""
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="icon  shrinkOff"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                <div
+                  class="rightPlaceholder inflex rowdir vCenter"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                >
+                  <button
+                    class="delete defaultDelete shrinkOff"
+                    data-id="multiSelect_clearIcon"
+                    data-selector-id="box"
+                    data-test-id="multiSelect_clearIcon"
+                    data-title="Clear Selected Items"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="zd_font_icons basic icon-delete    rtl "
+                      data-id="fontIcon"
+                      data-selector-id="fontIcon"
+                      data-test-id="fontIcon"
+                      style="--zd-iconfont-size: var(--zd_font_size15);"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;