@zohodesk/components 1.0.0-temp-230.1 → 1.0.0-temp-234

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

@@ -68,12 +68,10 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
           size = _this$props.size,
           palette = _this$props.palette,
           dataId = _this$props.dataId,
-          renderCustomSelectedValue = _this$props.renderCustomSelectedValue,
-          isPopupOpen = _this$props.isPopupOpen,
-          isPopupReady = _this$props.isPopupReady,
-          isInputDisabled = _this$props.isDisabled;
+          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,
@@ -113,25 +111,6 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
             iconName: icon,
             iconSize: iconSize
           })));
-        } else if (optionType === 'custom') {
-          return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-            key: "".concat(id, "customTag"),
-            dataId: dataId
-          }, typeof renderCustomSelectedValue == 'function' ? renderCustomSelectedValue({
-            onRemove: isDisabled || isReadOnly ? null : onRemove,
-            palette: isDarkPalette,
-            onSelectTag: isReadOnly ? null : onSelect,
-            getRef: getRef,
-            isReadOnly: isReadOnly,
-            isPopupReady: isPopupReady,
-            isPopupOpen: isPopupOpen,
-            isDisabled: isInputDisabled,
-            size: size,
-            highLightedSelectOptions: highLightedSelectOptions,
-            isActive: highLightedSelectOptions.indexOf(id) >= 0,
-            option: option
-          }) : renderCustomSelectedValue);
         }
 
         return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/MultiSelect/Suggestions.js

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
+var _virtualizer = require("@zohodesk/virtualizer");
+
 var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
 
 var _ListItemWithAvatar = _interopRequireDefault(require("../ListItem/ListItemWithAvatar"));
@@ -21,8 +23,14 @@ var _ListItemWithIcon = _interopRequireDefault(require("../ListItem/ListItemWith
 
 var _Layout = require("../Layout");
 
+var _Common = require("../utils/Common");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -51,22 +59,39 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+function SuggestionsVirtualizerContainer(_ref) {
+  var eleRef = _ref.eleRef,
+      children = _ref.children,
+      setVirtualizerContainerRefFunction = _ref.setVirtualizerContainerRefFunction;
+  (0, _react.useMemo)(function () {
+    typeof setVirtualizerContainerRefFunction === 'function' && setVirtualizerContainerRefFunction(eleRef);
+  }, [eleRef, setVirtualizerContainerRefFunction]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
+}
+
 var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Suggestions, _React$PureComponent);
 
   var _super = _createSuper(Suggestions);
 
-  function Suggestions() {
+  function Suggestions(props) {
+    var _this;
+
     _classCallCheck(this, Suggestions);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.renderSuggestionList = _this.renderSuggestionList.bind(_assertThisInitialized(_this));
+    _this.renderVirtualizerSuggestionListItem = _this.renderVirtualizerSuggestionListItem.bind(_assertThisInitialized(_this));
+    return _this;
   }
 
   _createClass(Suggestions, [{
-    key: "render",
-    value: function render() {
+    key: "renderSuggestionList",
+    value: function renderSuggestionList(_ref2) {
+      var suggestion = _ref2.suggestion,
+          index = _ref2.index,
+          ref = _ref2.ref;
       var _this$props = this.props,
-          suggestions = _this$props.suggestions,
           getRef = _this$props.getRef,
           hoverOption = _this$props.hoverOption,
           onClick = _this$props.onClick,
@@ -74,123 +99,174 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           needTick = _this$props.needTick,
           needBorder = _this$props.needBorder,
           _this$props$selectedO = _this$props.selectedOptions,
-          selectedOptions = _this$props$selectedO === void 0 ? [] : _this$props$selectedO,
-          renderBeforeChildren = _this$props.renderBeforeChildren,
+          selectedOptions = _this$props$selectedO === void 0 ? _Common.DUMMY_ARRAY : _this$props$selectedO,
           activeId = _this$props.activeId,
           hoverId = _this$props.hoverId,
-          dataId = _this$props.dataId,
           listItemSize = _this$props.listItemSize,
-          className = _this$props.className,
           avatarPalette = _this$props.avatarPalette,
           palette = _this$props.palette,
-          htmlId = _this$props.htmlId,
           a11y = _this$props.a11y,
-          needMultiLineText = _this$props.needMultiLineText;
-      var ariaParentRole = a11y.ariaParentRole,
-          ariaMultiselectable = a11y.ariaMultiselectable;
-      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        isCover: false,
-        role: ariaParentRole,
-        id: htmlId,
-        tabindex: "0",
-        "aria-multiselectable": ariaMultiselectable
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        dataId: "".concat(dataId),
-        className: className ? className : ''
-      }, suggestions.map(function (suggestion, index) {
-        var id = suggestion.id,
-            value = suggestion.value,
-            secondaryValue = suggestion.secondaryValue,
-            photoURL = suggestion.photoURL,
-            icon = suggestion.icon,
-            optionType = suggestion.optionType,
-            iconSize = suggestion.iconSize,
-            isDisabled = suggestion.isDisabled,
-            listItemProps = suggestion.listItemProps,
-            _suggestion$listItemC = suggestion.listItemCustomProps,
-            listItemCustomProps = _suggestion$listItemC === void 0 ? {} : _suggestion$listItemC;
-        var isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
-        var isHighlight = hoverOption === index || id === hoverId ? true : false;
-        var list_a11y = Object.assign({}, a11y, {
-          ariaSelected: isActive,
-          ariaLabel: value,
-          'data-a11y-list-active': isHighlight
-        });
-
-        var commonProps = _objectSpread({
-          isDisabled: isDisabled,
-          needMultiLineText: needMultiLineText
-        }, listItemCustomProps);
-
-        if (listItemProps) {
-          commonProps.customProps = {
-            ListItemProps: _objectSpread({}, listItemProps)
-          };
-        }
-
-        if (optionType === 'avatar') {
-          return /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], _extends({}, commonProps, {
-            autoHover: false,
-            getRef: getRef,
-            highlight: isHighlight,
-            id: id,
-            imgSrc: photoURL,
-            key: "".concat(id, "avatarListItem"),
-            name: value,
-            onClick: onClick,
-            onMouseEnter: onMouseEnter,
-            value: value,
-            title: value,
-            needTick: needTick,
-            needBorder: needBorder,
-            active: isActive,
-            size: listItemSize,
-            avatarPalette: avatarPalette,
-            palette: palette,
-            a11y: list_a11y,
-            secondaryValue: secondaryValue
-          }));
-        } else if (optionType === 'icon') {
-          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({}, commonProps, {
-            autoHover: false,
-            getRef: getRef,
-            highlight: isHighlight,
-            id: id,
-            key: "".concat(id, "iconListItem"),
-            onClick: onClick,
-            onMouseEnter: onMouseEnter,
-            value: value,
-            title: value,
-            iconName: icon,
-            needTick: needTick,
-            needBorder: needBorder,
-            active: isActive,
-            iconSize: iconSize,
-            size: listItemSize,
-            palette: palette,
-            a11y: list_a11y,
-            secondaryValue: secondaryValue
-          }));
+          needMultiLineText = _this$props.needMultiLineText,
+          limit = _this$props.limit,
+          limitReachedMessage = _this$props.limitReachedMessage;
+      var id = suggestion.id,
+          value = suggestion.value,
+          secondaryValue = suggestion.secondaryValue,
+          photoURL = suggestion.photoURL,
+          icon = suggestion.icon,
+          optionType = suggestion.optionType,
+          iconSize = suggestion.iconSize,
+          isDisabled = suggestion.isDisabled,
+          listItemProps = suggestion.listItemProps,
+          _suggestion$listItemC = suggestion.listItemCustomProps,
+          listItemCustomProps = _suggestion$listItemC === void 0 ? _Common.DUMMY_OBJECT : _suggestion$listItemC;
+      var isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
+      var isHighlight = hoverOption === index || id === hoverId ? true : false;
+      var selectedOptionsLength = selectedOptions.length;
+      var isLimitReached = selectedOptionsLength >= limit && !isActive;
+      var list_a11y = Object.assign({}, a11y, {
+        ariaSelected: isActive,
+        ariaLabel: value,
+        'data-a11y-list-active': isHighlight
+      });
+
+      var commonProps = _objectSpread({
+        isDisabled: isDisabled ? isDisabled : isLimitReached,
+        needMultiLineText: needMultiLineText
+      }, listItemCustomProps);
+
+      if (listItemProps) {
+        commonProps.customProps = {
+          ListItemProps: _objectSpread({}, listItemProps)
+        };
+      }
+
+      if (isLimitReached) {
+        commonProps.disableTitle = limitReachedMessage;
+      }
+
+      function getListItemRef(ele, index, id) {
+        ref && ref(ele);
+
+        if (typeof getRef === 'function') {
+          getRef(ele, index, id);
         }
+      }
 
-        return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({}, commonProps, {
+      if (optionType === 'avatar') {
+        return /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], _extends({}, commonProps, {
+          autoHover: false,
+          getRef: getListItemRef,
+          highlight: isHighlight,
+          id: id,
+          imgSrc: photoURL,
+          key: "".concat(id, "avatarListItem"),
+          name: value,
+          onClick: onClick,
+          onMouseEnter: onMouseEnter,
+          value: value,
+          title: value,
+          needTick: needTick,
+          needBorder: needBorder,
+          active: isActive,
+          size: listItemSize,
+          avatarPalette: avatarPalette,
+          palette: palette,
+          a11y: list_a11y,
+          secondaryValue: secondaryValue
+        }));
+      } else if (optionType === 'icon') {
+        return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({}, commonProps, {
           autoHover: false,
-          getRef: getRef,
+          getRef: getListItemRef,
           highlight: isHighlight,
           id: id,
-          key: "".concat(id, "listItem"),
+          key: "".concat(id, "iconListItem"),
           onClick: onClick,
           onMouseEnter: onMouseEnter,
           value: value,
           title: value,
+          iconName: icon,
           needTick: needTick,
           needBorder: needBorder,
           active: isActive,
+          iconSize: iconSize,
           size: listItemSize,
           palette: palette,
           a11y: list_a11y,
-          renderBeforeChildren: renderBeforeChildren ? typeof renderBeforeChildren === 'function' ? renderBeforeChildren(suggestion) : renderBeforeChildren : null
+          secondaryValue: secondaryValue
         }));
+      }
+
+      return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({}, commonProps, {
+        autoHover: false,
+        getRef: getListItemRef,
+        highlight: isHighlight,
+        id: id,
+        key: "".concat(id, "listItem"),
+        onClick: onClick,
+        onMouseEnter: onMouseEnter,
+        value: value,
+        title: value,
+        needTick: needTick,
+        needBorder: needBorder,
+        active: isActive,
+        size: listItemSize,
+        palette: palette,
+        a11y: list_a11y
+      }));
+    }
+  }, {
+    key: "renderVirtualizerSuggestionListItem",
+    value: function renderVirtualizerSuggestionListItem(_ref3) {
+      var index = _ref3.index,
+          ref = _ref3.ref;
+      var suggestions = this.props.suggestions;
+      var suggestion = suggestions[index];
+      return this.renderSuggestionList({
+        suggestion: suggestion,
+        index: index,
+        ref: ref
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          suggestions = _this$props2.suggestions,
+          dataId = _this$props2.dataId,
+          className = _this$props2.className,
+          isVirtualizerEnabled = _this$props2.isVirtualizerEnabled,
+          htmlId = _this$props2.htmlId,
+          a11y = _this$props2.a11y,
+          getVirtualizerPublicMethods = _this$props2.getVirtualizerPublicMethods,
+          setVirtualizerContainerRefFunction = _this$props2.setVirtualizerContainerRefFunction;
+      var ariaParentRole = a11y.ariaParentRole,
+          ariaMultiselectable = a11y.ariaMultiselectable;
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        isCover: false,
+        role: ariaParentRole,
+        id: htmlId,
+        tabindex: "0",
+        "aria-multiselectable": ariaMultiselectable
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        dataId: "".concat(dataId),
+        className: className ? className : ''
+      }, isVirtualizerEnabled ? /*#__PURE__*/_react["default"].createElement(_virtualizer.Virtualizer, {
+        containerType: SuggestionsVirtualizerContainer,
+        elementRenderer: this.renderVirtualizerSuggestionListItem,
+        getExposedPublicMethods: getVirtualizerPublicMethods,
+        elementsCount: suggestions.length,
+        isElementsFixedHeight: false,
+        dataId: "".concat(dataId, "_virtualizer"),
+        setVirtualizerContainerRefFunction: setVirtualizerContainerRefFunction
+      }) : suggestions.map(function (suggestion, index) {
+        return _this2.renderSuggestionList({
+          suggestion: suggestion,
+          index: index
+        });
       })));
     }
   }]);

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

@@ -8,35 +8,8 @@ var _MultiSelect = _interopRequireDefault(require("../MultiSelect"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var options = [{
-  id: 1,
-  text: 'custom 1',
-  optionType: 'custom'
-}, {
-  id: 2,
-  text: 'custom 2',
-  optionType: 'custom'
-}, {
-  id: 3,
-  text: 'custom 3',
-  optionType: 'custom'
-}, {
-  id: 4,
-  text: 'custom 4',
-  optionType: 'custom'
-}, {
-  id: 5,
-  text: 'custom 5',
-  optionType: 'custom'
-}, {
-  id: 6,
-  text: 'custom 6',
-  optionType: 'custom'
-}, {
-  id: 7,
-  text: 'custom 7',
-  optionType: 'custom'
-}];
+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)),
@@ -44,12 +17,24 @@ describe('MultiSelect', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should render with renderCustomSelectedValue', function () {
+  test('rendering with limit feature', function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], {
-      options: options,
-      renderCustomSelectedValue: function renderCustomSelectedValue() {
-        return /*#__PURE__*/_react["default"].createElement("span", null, "MultiSelect Custom Value");
-      }
+      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;
 

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

@@ -32,19 +32,4 @@ describe('SelectedOptions', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should render with renderCustomSelectedValue', function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
-      highLightedSelectOptions: [],
-      selectedOptions: [{
-        value: 'SelectedObject1',
-        optionType: 'custom'
-      }],
-      renderCustomSelectedValue: function renderCustomSelectedValue() {
-        return /*#__PURE__*/_react["default"].createElement("span", null, " SelectedOptions Custom Value");
-      }
-    })),
-        asFragment = _render3.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,15 +64,12 @@ describe('Suggestions', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should render with renderBeforeChildren', function () {
+  test('rendering with limit props', function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
-      suggestions: [{
-        value: 'Suggestions Option 1',
-        id: '1'
-      }],
-      renderBeforeChildren: function renderBeforeChildren() {
-        return /*#__PURE__*/_react["default"].createElement("span", null, "Suggestions Before Children");
-      }
+      selectedOptions: [1, 2, 3, 4],
+      suggestions: sampleData,
+      limit: 3,
+      limitReachedMessage: "Limit Reached"
     })),
         asFragment = _render2.asFragment;
 

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

@@ -25,10 +25,10 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
-          data-id="multiSelect_textBox"
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
           data-selector-id="textBoxIcon"
-          data-test-id="multiSelect_textBox"
+          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"

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

@@ -25,10 +25,10 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
-          data-id="textBoxIcon"
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
           data-selector-id="textBoxIcon"
-          data-test-id="textBoxIcon"
+          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"
@@ -98,10 +98,10 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
               "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
-          data-id="textBoxIcon"
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
           data-selector-id="textBoxIcon"
-          data-test-id="textBoxIcon"
+          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"
@@ -346,10 +346,10 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
               "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
-          data-id="textBoxIcon"
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
           data-selector-id="textBoxIcon"
-          data-test-id="textBoxIcon"
+          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"