@zohodesk/components 1.4.10-exp.1 → 1.4.11

package/lib/MultiSelect/MultiSelect.js

@@ -162,6 +162,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     _this.handleSearchOptions = (0, _Common.debounce)(_this.handleSearchOptions.bind(_assertThisInitialized(_this)), searchDebounceTime);
     _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
     _this.handleScrollFuncCall = (0, _Common.debounce)(_this.handleScrollFuncCall.bind(_assertThisInitialized(_this)), 500);
+    _this.getVirtualizerPublicMethods = _this.getVirtualizerPublicMethods.bind(_assertThisInitialized(_this));
+    _this.setSuggestionsVirtualizerContainerRefFunction = _this.setSuggestionsVirtualizerContainerRefFunction.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -227,9 +229,6 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var suggestionContainer = this.suggestionContainer,
-          selectedOptionContainer = this.selectedOptionContainer,
-          suggestionsOrder = this.suggestionsOrder;
       var _this$state = this.state,
           hoverOption = _this$state.hoverOption,
           highLightedSelectOptions = _this$state.highLightedSelectOptions,
@@ -240,7 +239,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isPopupOpen = _this$props2.isPopupOpen,
           onDropBoxClose = _this$props2.onDropBoxClose,
           onDropBoxOpen = _this$props2.onDropBoxOpen,
-          isSearchClearOnClose = _this$props2.isSearchClearOnClose; //handle dropbox open & close
+          isSearchClearOnClose = _this$props2.isSearchClearOnClose,
+          isVirtualizerEnabled = _this$props2.isVirtualizerEnabled; //handle dropbox open & close
 
       if (prevProps.isPopupOpen !== isPopupOpen) {
         isPopupOpen && onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
@@ -255,12 +255,21 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       } //scrollTo handling
 
 
-      var hoverId = suggestionsOrder[hoverOption] || '';
-      var selectedSuggestion = this["suggestion_".concat(hoverId)];
-      var lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
-      var selectedOption = this["selectedOption_".concat(lastHighLightedSelectOption)];
-      isPopupOpen && (0, _Common.scrollTo)(suggestionContainer, selectedSuggestion);
-      selectedOptions.length && selectedOption && (0, _Common.scrollTo)(selectedOptionContainer, selectedOption); //When suggestions length less than 5, getNextOptions function call
+      if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+        var position = prevState.hoverOption > hoverOption ? 'top' : 'bottom';
+        this.virtualizerMethods.getElementVisiblePercentage(hoverOption) < 50 && this.virtualizerMethods.scrollToIndex(hoverOption, position);
+      } else {
+        var suggestionContainer = this.suggestionContainer,
+            selectedOptionContainer = this.selectedOptionContainer,
+            suggestionsOrder = this.suggestionsOrder;
+        var hoverId = suggestionsOrder[hoverOption] || '';
+        var selectedSuggestion = this["suggestion_".concat(hoverId)];
+        var lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
+        var selectedOption = this["selectedOption_".concat(lastHighLightedSelectOption)];
+        isPopupOpen && (0, _Common.scrollTo)(suggestionContainer, selectedSuggestion);
+        selectedOptions.length && selectedOption && (0, _Common.scrollTo)(selectedOptionContainer, selectedOption);
+      } //When suggestions length less than 5, getNextOptions function call
+
 
       var _this$props3 = this.props,
           isNextOptions = _this$props3.isNextOptions,
@@ -880,6 +889,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     key: "suggestionContainerRef",
     value: function suggestionContainerRef(el) {
       this.suggestionContainer = el;
+      typeof this.setSuggestionsVirtualizerRef === 'function' && this.setSuggestionsVirtualizerRef(el);
     }
   }, {
     key: "suggestionItemRef",
@@ -942,6 +952,17 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         openPopupOnly: openPopupOnly
       });
     }
+  }, {
+    key: "getVirtualizerPublicMethods",
+    value: function getVirtualizerPublicMethods(methods) {
+      this.virtualizerMethods = methods;
+    }
+  }, {
+    key: "setSuggestionsVirtualizerContainerRefFunction",
+    value: function setSuggestionsVirtualizerContainerRefFunction(refFunc) {
+      this.setSuggestionsVirtualizerRef = refFunc;
+      this.suggestionContainer && refFunc(this.suggestionContainer);
+    }
   }, {
     key: "getSelectionUI",
     value: function getSelectionUI() {
@@ -1119,6 +1140,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
+          isVirtualizerEnabled = _this$props15.isVirtualizerEnabled,
           limit = _this$props15.limit;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
@@ -1199,7 +1221,11 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"][palette]
       }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+        key: searchStr.trim(),
         suggestions: suggestions,
+        isVirtualizerEnabled: isVirtualizerEnabled,
+        getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
+        setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
         onClick: this.handleSelectOption,

package/lib/MultiSelect/MultiSelect.module.css

@@ -196,7 +196,7 @@
 .more {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
-  font-weight: var(--zd-fw-normal);
+  font-family: inherit;
   cursor: pointer;
   margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);

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,118 +99,69 @@ 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,
+          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,
           limit = _this$props.limit,
           limitReachedMessage = _this$props.limitReachedMessage;
-      var ariaParentRole = a11y.ariaParentRole,
-          ariaMultiselectable = a11y.ariaMultiselectable;
+      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;
-      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 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;
+      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);
         }
+      }
 
-        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
-          }));
-        }
-
-        return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({}, commonProps, {
+      if (optionType === 'avatar') {
+        return /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], _extends({}, commonProps, {
           autoHover: false,
-          getRef: getRef,
+          getRef: getListItemRef,
           highlight: isHighlight,
           id: id,
-          key: "".concat(id, "listItem"),
+          imgSrc: photoURL,
+          key: "".concat(id, "avatarListItem"),
+          name: value,
           onClick: onClick,
           onMouseEnter: onMouseEnter,
           value: value,
@@ -194,9 +170,103 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           needBorder: needBorder,
           active: isActive,
           size: listItemSize,
+          avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          secondaryValue: secondaryValue
         }));
+      } else if (optionType === 'icon') {
+        return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({}, commonProps, {
+          autoHover: false,
+          getRef: getListItemRef,
+          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
+        }));
+      }
+
+      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/props/defaultProps.js

@@ -97,6 +97,7 @@ var MultiSelect_defaultProps = {
   autoComplete: (0, _Config.getLibraryConfig)('autoComplete'),
   dataId: 'multiSelect',
   dropBoxSize: 'small',
+  isVirtualizerEnabled: false,
   isAnimate: true,
   isDisabled: false,
   isPopupOpenOnEnter: false,
@@ -182,6 +183,7 @@ var SelectedOptions_defaultProps = {
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
   a11y: {},
+  isVirtualizerEnabled: false,
   needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -50,6 +50,7 @@ var MultiSelect_propTypes = {
   disableAction: _propTypes["default"].bool,
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   emptyMessage: _propTypes["default"].string.isRequired,
+  isVirtualizerEnabled: _propTypes["default"].bool,
   getContainerRef: _propTypes["default"].func,
   getNextOptions: _propTypes["default"].func,
   getPublicMethods: _propTypes["default"].func,
@@ -192,6 +193,9 @@ var Suggestions_propTypes = {
   avatarPalette: _propTypes["default"].string,
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  isVirtualizerEnabled: _propTypes["default"].bool,
+  setVirtualizerContainerRefFunction: _propTypes["default"].func,
+  getVirtualizerPublicMethods: _propTypes["default"].func,
   getRef: _propTypes["default"].func,
   hoverId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   hoverOption: _propTypes["default"].number,

package/lib/Select/Select.js

@@ -168,6 +168,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     _this.handleAddNewOption = _this.handleAddNewOption.bind(_assertThisInitialized(_this));
     _this.handleExposePopupHandlers = _this.handleExposePopupHandlers.bind(_assertThisInitialized(_this));
     _this.handleGetAddNewOptionText = _this.handleGetAddNewOptionText.bind(_assertThisInitialized(_this));
+    _this.getVirtualizerPublicMethods = _this.getVirtualizerPublicMethods.bind(_assertThisInitialized(_this));
+    _this.setSuggestionsVirtualizerContainerRefFunction = _this.setSuggestionsVirtualizerContainerRefFunction.bind(_assertThisInitialized(_this));
     _this.valueInputTypeString = '';
     _this.valueInputSearchString = '';
     _this.autoSelectSuggestions = [];
@@ -234,11 +236,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
+    value: function componentDidUpdate(prevProps, prevState) {
       var _this2 = this;
 
-      var suggestionContainer = this.suggestionContainer,
-          optionsOrder = this.optionsOrder;
       var _this$state = this.state,
           hoverIndex = _this$state.hoverIndex,
           searchStr = _this$state.searchStr,
@@ -250,14 +250,28 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           needSearch = _this$props.needSearch,
           onSearch = _this$props.onSearch,
           isPopupOpen = _this$props.isPopupOpen,
-          isSearchClearOnClose = _this$props.isSearchClearOnClose;
-      var hoverId = (0, _Common.getIsEmptyValue)(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
-      var selSuggestion = this["suggestion_".concat(hoverId)];
-      isPopupOpen && (0, _Common.scrollTo)(suggestionContainer, selSuggestion);
+          isSearchClearOnClose = _this$props.isSearchClearOnClose,
+          isVirtualizerEnabled = _this$props.isVirtualizerEnabled;
+
+      if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+        var position = prevState.hoverIndex > hoverIndex ? 'top' : 'bottom';
+        this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex, position);
+      } else {
+        var suggestionContainer = this.suggestionContainer,
+            optionsOrder = this.optionsOrder;
+        var hoverId = (0, _Common.getIsEmptyValue)(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
+        var selSuggestion = this["suggestion_".concat(hoverId)];
+        isPopupOpen && (0, _Common.scrollTo)(suggestionContainer, selSuggestion);
+      }
 
       if (prevProps.isPopupOpen !== isPopupOpen) {
         if (isPopupOpen) {
           onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
+
+          if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+            this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex);
+          }
+
           setTimeout(function () {
             _this2.searchInput && _this2.searchInput.focus({
               preventScroll: true
@@ -309,9 +323,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           textField = props.textField,
           allowValueFallback = props.allowValueFallback,
           _props$customProps = props.customProps,
-          customProps = _props$customProps === void 0 ? {} : _props$customProps;
+          customProps = _props$customProps === void 0 ? _dropDownUtils.dummyObj : _props$customProps;
       var _customProps$listItem = customProps.listItemProps,
-          listItemProps = _customProps$listItem === void 0 ? {} : _customProps$listItem;
+          listItemProps = _customProps$listItem === void 0 ? _dropDownUtils.dummyObj : _customProps$listItem;
       return this.formatOptions({
         options: options,
         valueField: valueField,
@@ -574,6 +588,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     key: "suggestionContainerRef",
     value: function suggestionContainerRef(el) {
       this.suggestionContainer = el;
+      typeof this.setSuggestionsVirtualizerRef === 'function' && this.setSuggestionsVirtualizerRef(el);
     }
   }, {
     key: "suggestionItemRef",
@@ -721,6 +736,17 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         onAddNewOption: this.handleAddNewOption
       });
     }
+  }, {
+    key: "getVirtualizerPublicMethods",
+    value: function getVirtualizerPublicMethods(methods) {
+      this.virtualizerMethods = methods;
+    }
+  }, {
+    key: "setSuggestionsVirtualizerContainerRefFunction",
+    value: function setSuggestionsVirtualizerContainerRefFunction(refFunc) {
+      this.setSuggestionsVirtualizerRef = refFunc;
+      this.suggestionContainer && refFunc(this.suggestionContainer);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -777,6 +803,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           targetOffset = _this$props11.targetOffset,
           isRestrictScroll = _this$props11.isRestrictScroll,
           dropBoxPortalId = _this$props11.dropBoxPortalId,
+          isVirtualizerEnabled = _this$props11.isVirtualizerEnabled,
           renderCustomToggleIndicator = _this$props11.renderCustomToggleIndicator,
           renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent;
       var _i18nKeys = i18nKeys,
@@ -975,7 +1002,11 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
           eleRef: _this7.suggestionContainerRef
         }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+          key: searchStr.trim(),
           activeId: selectedId,
+          isVirtualizerEnabled: isVirtualizerEnabled,
+          getVirtualizerPublicMethods: _this7.getVirtualizerPublicMethods,
+          setVirtualizerContainerRefFunction: _this7.setSuggestionsVirtualizerContainerRefFunction,
           suggestions: suggestions,
           getRef: _this7.suggestionItemRef,
           hoverOption: hoverIndex,

package/lib/Select/props/defaultProps.js

@@ -18,6 +18,7 @@ var Select_defaultProps = {
   dataId: 'selectComponent',
   dataSelectorId: 'select',
   dropBoxSize: 'small',
+  isVirtualizerEnabled: false,
   isDefaultSelectValue: true,
   isDisabled: false,
   isPopupOpenOnEnter: false,

package/lib/Select/props/propTypes.js

@@ -28,6 +28,7 @@ var Select_propTypes = {
   defaultDropBoxPosition: _propTypes["default"].string,
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   emptyMessage: _propTypes["default"].string,
+  isVirtualizerEnabled: _propTypes["default"].bool,
   excludeOptions: _propTypes["default"].array,
   getChildren: _propTypes["default"].func,
   getContainerRef: _propTypes["default"].func,

package/lib/Tab/Tabs.module.css

@@ -145,7 +145,7 @@
 }
 
 .emptyStateTitle {
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
   word-wrap: break-word;
   font-size: var(--zd_font_size16) ;
   max-width: var(--zd_size430) ;

package/lib/TextBox/TextBox.module.css

@@ -9,7 +9,7 @@
   --textbox_width: 100%;
   --textbox_height: var(--zd_size35);
   --textbox_border_radius: none;
-  --textbox_font_weight: var(--zd-fw-normal);
+  --textbox_font_family: var(--zd_regular);
   /*  Variable:Ignore  */
   --textbox_letter_spacing: 0.1px;
   --textbox_padding: 0;
@@ -166,18 +166,18 @@
 .primary,
 .secondary,
 .light {
-  font-weight: var(--textbox_font_weight);
+  font-family: var(--textbox_font_family);
 }
 
 .primary {
   --textbox_text_color: var(--zdt_textbox_default_text);
-  --textbox_font_weight: var(--zd-fw-semibold);
+  --textbox_font_family: var(--zd_semibold);
   composes: ftsmooth from '../common/common.module.css';
 }
 
 .secondary {
   --textbox_text_color: var(--zdt_textbox_secondary_text);
-  --textbox_font_weight: var(--zd-fw-light);
+  --textbox_font_family: var(--zd_light);
 }
 
 .light {