@zohodesk/components 1.4.8 → 1.4.9

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

@@ -18,3 +18,346 @@ exports[`Suggestions rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Suggestions rendering with limit props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="shrinkOff"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="text2"
+        aria-selected="true"
+        class="list medium  default activedefault    activewithBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text2"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="text2"
+        data-title="text2"
+        role="option"
+        style="color: red;"
+        tabindex="0"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text3"
+        aria-selected="true"
+        class="list medium  default activedefault    activewithBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text3"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="text3"
+        data-title="text3"
+        role="option"
+        style="color: blue;"
+        tabindex="0"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text3
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text4"
+        aria-selected="true"
+        class="list medium  default activedefault    activewithBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text4"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="text4"
+        data-title="text4"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text4
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text5"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text5"
+        data-selector-id="listItem"
+        data-test-id="text5"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text5
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text6"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text6"
+        data-selector-id="listItem"
+        data-test-id="text6"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text6
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text7"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text7"
+        data-selector-id="listItem"
+        data-test-id="text7"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text7
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text8"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text8"
+        data-selector-id="listItem"
+        data-test-id="text8"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text8
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text9"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text9"
+        data-selector-id="listItem"
+        data-test-id="text9"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text9
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text10"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text10"
+        data-selector-id="listItem"
+        data-test-id="text10"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text10
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/MultiSelect/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MULTISELECT_I18N_KEYS = void 0;
+var MULTISELECT_I18N_KEYS = {
+  limitReachedMessage: 'Limit reached',
+  searchText: 'Searching...',
+  clearText: 'Clear all',
+  loadingText: 'Loading'
+};
+exports.MULTISELECT_I18N_KEYS = MULTISELECT_I18N_KEYS;

package/lib/MultiSelect/props/propTypes.js

@@ -56,11 +56,13 @@ var MultiSelect_propTypes = {
   getRef: _propTypes["default"].func,
   getTargetRef: _propTypes["default"].func,
   i18nKeys: _propTypes["default"].shape({
+    searchText: _propTypes["default"].string,
     clearText: _propTypes["default"].string,
     loadingText: _propTypes["default"].string,
     emptyText: _propTypes["default"].string,
     noMoreText: _propTypes["default"].string,
-    searchEmptyText: _propTypes["default"].string
+    searchEmptyText: _propTypes["default"].string,
+    limitReachedMessage: _propTypes["default"].string
   }),
   a11y: _propTypes["default"].shape({
     clearLabel: _propTypes["default"].string
@@ -135,7 +137,8 @@ var MultiSelect_propTypes = {
   isFocus: _propTypes["default"].bool,
   allowValueFallback: _propTypes["default"].bool,
   renderCustomClearComponent: _propTypes["default"].func,
-  renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
+  renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
+  limit: _propTypes["default"].number
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -176,7 +179,8 @@ var SelectedOptions_propTypes = {
   })),
   size: _propTypes["default"].oneOf(['medium', 'xmedium']),
   palette: _propTypes["default"].string,
-  dataId: _propTypes["default"].string
+  dataId: _propTypes["default"].string,
+  limit: _propTypes["default"].number
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
 var Suggestions_propTypes = {
@@ -207,7 +211,9 @@ var Suggestions_propTypes = {
     logo: _propTypes["default"].string,
     optionType: _propTypes["default"].string,
     listItemProps: _propTypes["default"].object
-  }))
+  })),
+  limit: _propTypes["default"].number,
+  limitReachedMessage: _propTypes["default"].string
 };
 exports.Suggestions_propTypes = Suggestions_propTypes;
 var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
@@ -226,7 +232,8 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
     loadingText: _propTypes["default"].string,
     emptyText: _propTypes["default"].string,
     noMoreText: _propTypes["default"].string,
-    searchEmptyText: _propTypes["default"].string
+    searchEmptyText: _propTypes["default"].string,
+    limitReachedMessage: _propTypes["default"].string
   }),
   a11y: _propTypes["default"].shape({
     clearLabel: _propTypes["default"].string
@@ -278,7 +285,7 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {
@@ -293,70 +300,22 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
   selectedOptions: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])).isRequired,
   selectedOptionsLimit: _propTypes["default"].number,
   getSelectedOptionDetails: _propTypes["default"].func,
-  emptyMessage: _propTypes["default"].string.isRequired,
-  isDisabled: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  needLocalSearch: _propTypes["default"].bool,
-  needSelectAll: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func.isRequired,
-  searchEmptyMessage: _propTypes["default"].string,
-  placeHolder: _propTypes["default"].string,
-  selectAllText: _propTypes["default"].string,
-  textField: _propTypes["default"].string,
-  valueField: _propTypes["default"].string,
   imageField: _propTypes["default"].string,
   iconName: _propTypes["default"].string,
   prefixText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   //For grouping multiSelect
   optionType: _propTypes["default"].oneOf(['default', 'avatar', 'icon']),
-  needEffect: _propTypes["default"].bool,
   secondaryField: _propTypes["default"].string,
-  animationStyle: _propTypes["default"].string,
-  defaultDropBoxPosition: _propTypes["default"].oneOf(['bottom', 'top', 'left', 'right']),
-  dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
-  isAnimate: _propTypes["default"].bool,
-  size: _propTypes["default"].oneOf(['medium', 'xmedium']),
-  textBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'xmedium']),
-  title: _propTypes["default"].string,
-  variant: _propTypes["default"].string,
   dataIdClearIcon: _propTypes["default"].string,
   dataIdLoading: _propTypes["default"].string,
   dataIdMultiSelectComp: _propTypes["default"].string,
   dataIdSelectAllEle: _propTypes["default"].string,
-
-  /**** Popup Props ****/
-  isPopupOpen: _propTypes["default"].bool,
-  isPopupReady: _propTypes["default"].bool,
-  togglePopup: _propTypes["default"].func,
-  getContainerRef: _propTypes["default"].func,
-  position: _propTypes["default"].string,
-  removeClose: _propTypes["default"].func,
   listItemSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
-  needBorder: _propTypes["default"].bool,
-  htmlId: _propTypes["default"].string,
-  i18nKeys: _propTypes["default"].shape({
-    clearText: _propTypes["default"].string,
-    loadingText: _propTypes["default"].string,
-    emptyText: _propTypes["default"].string,
-    noMoreText: _propTypes["default"].string,
-    searchEmptyText: _propTypes["default"].string
-  }),
-  a11y: _propTypes["default"].shape({
-    clearLabel: _propTypes["default"].string
-  }),
-  borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'dark']),
-  isBoxPaddingNeed: _propTypes["default"].bool,
-  isSearchClearOnSelect: _propTypes["default"].bool,
-  disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  getFooter: _propTypes["default"].func,
   customProps: _propTypes["default"].shape({
     SuggestionsProps: _propTypes["default"].object,
     DropBoxProps: _propTypes["default"].object
   }),
-  isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string,
-  customClass: _propTypes["default"].object,
-  isFocus: _propTypes["default"].bool
+  customClass: _propTypes["default"].object
 });
 
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;

package/lib/utils/dropDownUtils.js

@@ -52,6 +52,10 @@ var getOptionsOrder = function getOptionsOrder(props) {
   return props.optionsOrder || dummyArray;
 };
 
+var getLimit = function getLimit(props) {
+  return props.limit || 0;
+};
+
 var getSelectedOptionsSel = function getSelectedOptionsSel(props) {
   return props.selectedOptions || dummyArray;
 };
@@ -339,7 +343,7 @@ var makeFormatOptions = function makeFormatOptions() {
 exports.makeFormatOptions = makeFormatOptions;
 
 var makeGetMultiSelectSelectedOptions = function makeGetMultiSelectSelectedOptions() {
-  return (0, _reselect.createSelector)([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback], function (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback) {
+  return (0, _reselect.createSelector)([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback, getLimit], function (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback, limit) {
     var output = [];
     var revampSelectedOptions = [];
     var normalizedSelectedOptions = {};
@@ -367,6 +371,12 @@ var makeGetMultiSelectSelectedOptions = function makeGetMultiSelectSelectedOptio
       }
     }
 
+    if (limit && limit > 0) {
+      output = output.slice(0, limit);
+      revampSelectedOptions = revampSelectedOptions.slice(0, limit);
+      normalizedSelectedOptions = Object.fromEntries(Object.entries(normalizedSelectedOptions).slice(0, limit));
+    }
+
     return {
       formatSelectedOptions: output,
       normalizedSelectedOptions: normalizedSelectedOptions,
@@ -593,7 +603,8 @@ var filterSelectedOptions = function filterSelectedOptions() {
       _ref4$propSelectedOpt = _ref4.propSelectedOptions,
       propSelectedOptions = _ref4$propSelectedOpt === void 0 ? dummyArray : _ref4$propSelectedOpt,
       _ref4$disabledOptions = _ref4.disabledOptions,
-      disabledOptions = _ref4$disabledOptions === void 0 ? dummyArray : _ref4$disabledOptions;
+      disabledOptions = _ref4$disabledOptions === void 0 ? dummyArray : _ref4$disabledOptions,
+      limit = _ref4.limit;
 
   // eslint-disable-next-line no-param-reassign
   selectedOptions = selectedOptions || dummyArray; // eslint-disable-next-line no-param-reassign
@@ -617,8 +628,18 @@ var filterSelectedOptions = function filterSelectedOptions() {
 
     return true;
   });
+  var totalSelectedOptions = [].concat(_toConsumableArray(oldValidSelectedOptions), _toConsumableArray(newlyAddedOptions));
+
+  if (limit && limit > 0) {
+    if (totalSelectedOptions.length > limit) {
+      return {
+        newSelectedOptions: totalSelectedOptions.slice(0, limit)
+      };
+    }
+  }
+
   return {
-    newSelectedOptions: [].concat(_toConsumableArray(oldValidSelectedOptions), _toConsumableArray(newlyAddedOptions))
+    newSelectedOptions: totalSelectedOptions
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -77,18 +77,19 @@
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
-    "@zohodesk/a11y": "2.3.6",
+    "@zohodesk/a11y": "2.3.7",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/icons": "1.1.0",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/svg": "1.2.1",
+    "@zohodesk/svg": "1.2.2",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.1.0",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",
-    "velocity-react": "1.4.3"
+    "velocity-react": "1.4.3",
+    "@zohodesk/react-cli": "1.1.27"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -99,13 +100,13 @@
   "peerDependencies": {
     "@zohodesk/icons": "1.1.0",
     "@zohodesk/variables": "1.1.0",
-    "@zohodesk/svg": "1.2.1",
+    "@zohodesk/svg": "1.2.2",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/utils": "1.3.14",
-    "@zohodesk/a11y": "2.3.6",
+    "@zohodesk/a11y": "2.3.7",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/dotkit": "1.0.3"
   }