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

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,13 +323,17 @@ 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,
+          searchFields = props.searchFields,
+          secondaryField = props.secondaryField;
       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,
         textField: textField,
+        secondaryField: secondaryField,
+        searchFields: searchFields,
         listItemProps: listItemProps,
         allowValueFallback: allowValueFallback
       });
@@ -474,6 +492,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     value: function handleFilterSuggestions() {
       var _this$props5 = this.props,
           needLocalSearch = _this$props5.needLocalSearch,
+          searchFields = _this$props5.searchFields,
           _this$props5$excludeO = _this$props5.excludeOptions,
           excludeOptions = _this$props5$excludeO === void 0 ? dummyArray : _this$props5$excludeO;
       var _this$state3 = this.state,
@@ -491,6 +510,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         options: options,
         selectedOptions: excludeOptions,
         searchStr: searchStr,
+        searchFields: searchFields,
         needSearch: needLocalSearch
       }),
           suggestions = _this$getFilterSugges.suggestions,
@@ -574,6 +594,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 +742,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 +809,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 +1008,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/SelectWithAvatar.js

@@ -51,6 +51,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -99,12 +101,14 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           valueField = props.valueField,
           textField = props.textField,
           imageField = props.imageField,
+          secondaryField = props.secondaryField,
           allowValueFallback = props.allowValueFallback;
       return this.formatOptions({
         options: options,
         valueField: valueField,
         textField: textField,
         imageField: imageField,
+        secondaryField: secondaryField,
         optionType: 'avatar',
         allowValueFallback: allowValueFallback
       });
@@ -215,6 +219,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           dataSelectorId = _this$props.dataSelectorId,
+          customProps = _this$props.customProps,
           getTargetRef = _this$props.getTargetRef;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
@@ -236,6 +241,9 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
 
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
+      var TextBoxProps = customProps.TextBoxProps,
+          DropdownSearchTextBoxProps = customProps.DropdownSearchTextBoxProps,
+          SuggestionsProps = customProps.SuggestionsProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -267,7 +275,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         flexible: true,
         className: _MultiSelectModule["default"].textBox,
         dataId: "".concat(dataId, "_textBox")
-      }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], _extends({
         a11y: {
           ariaActivedescendant: selectedId,
           role: 'combobox',
@@ -296,7 +304,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         borderColor: borderColor,
         htmlId: htmlId,
         autoComplete: false
-      }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+      }, TextBoxProps)))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
       }, function (_ref4) {
@@ -327,7 +335,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           onScroll: _this2.handleScroll
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
           className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
-        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
           inputRef: _this2.searchInputRef,
           maxLength: maxLength,
           onChange: _this2.handleSearch,
@@ -343,7 +351,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             ariaDescribedby: ariaErrorId
           },
           autoComplete: false
-        }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+        }, DropdownSearchTextBoxProps)))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
           eleRef: _this2.suggestionContainerRef
@@ -354,7 +362,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           a11y: {
             role: 'heading'
           }
-        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
           dataId: "".concat(dataId, "_Options"),
           activeId: selectedId,
           suggestions: suggestions,
@@ -371,7 +379,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             ariaParentRole: 'listbox',
             role: 'option'
           }
-        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           searchString: searchStr,

package/lib/Select/SelectWithIcon.js

@@ -401,6 +401,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           targetOffset = _this$props7.targetOffset,
           isRestrictScroll = _this$props7.isRestrictScroll,
           valueKey = _this$props7.valueKey,
+          secondaryValueKey = _this$props7.secondaryValueKey,
           idKey = _this$props7.idKey,
           needListBorder = _this$props7.needListBorder,
           needTick = _this$props7.needTick,
@@ -440,7 +441,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           _customProps$Dropdown = customProps.DropdownSearchTextBoxProps,
           DropdownSearchTextBoxProps = _customProps$Dropdown === void 0 ? {} : _customProps$Dropdown,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
-          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
+          ListItemProps = customProps.ListItemProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
         "data-title": isDisabled ? title : null,
@@ -573,9 +575,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           var iconName = options.iconName,
               iconSize = options.iconSize,
               iconColor = options.iconColor;
-          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
             key: options[idKey],
             value: options[valueKey],
+            secondaryValue: options[secondaryValueKey],
             size: "medium",
             onClick: _this5.handleChange,
             id: options[idKey],
@@ -597,7 +600,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
               ariaSelected: selectedId === options[idKey],
               ariaLabel: options[valueKey]
             }
-          });
+          }, ListItemProps));
         })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

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,
@@ -111,6 +112,7 @@ var SelectWithAvatar_defaultProps = {
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   i18nKeys: {},
+  customProps: {},
   needEffect: true,
   isLoading: 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,
@@ -79,6 +80,8 @@ var Select_propTypes = {
   searchBoxSize: _propTypes["default"].string,
   searchDebounceTime: _propTypes["default"].number,
   searchEmptyMessage: _propTypes["default"].string,
+  searchFields: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  secondaryField: _propTypes["default"].string,
   selectedValue: _propTypes["default"].oneOfType([_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]), _propTypes["default"].shape({
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
@@ -137,6 +140,7 @@ var GroupSelect_propTypes = {
   searchBoxPlaceHolder: _propTypes["default"].string,
   needSearch: _propTypes["default"].bool,
   searchEmptyMessage: _propTypes["default"].string,
+  secondaryField: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   isDisabled: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
@@ -302,6 +306,7 @@ var SelectWithIcon_propTypes = {
   removeClose: _propTypes["default"].func,
   searchBoxPlaceHolder: _propTypes["default"].string,
   searchEmptyMessage: _propTypes["default"].string,
+  secondaryValueKey: _propTypes["default"].string,
   selectedId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   selectedValue: _propTypes["default"].string,
   size: _propTypes["default"].oneOf(['small', 'medium']),
@@ -326,6 +331,7 @@ var SelectWithIcon_propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
     DropdownSearchTextBoxProps: _propTypes["default"].object,
+    SuggestionsProps: _propTypes["default"].object,
     TextBoxIconProps: _propTypes["default"].object
   })
 };

package/lib/utils/Common.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DUMMY_OBJECT = void 0;
+exports.DUMMY_OBJECT = exports.DUMMY_ARRAY = void 0;
 exports.bind = bind;
 exports.bytesToSize = bytesToSize;
 exports.cancelBubblingEffect = cancelBubblingEffect;
@@ -516,4 +516,6 @@ function isTextSelected() {
 }
 
 var DUMMY_OBJECT = {};
-exports.DUMMY_OBJECT = DUMMY_OBJECT;
+exports.DUMMY_OBJECT = DUMMY_OBJECT;
+var DUMMY_ARRAY = [];
+exports.DUMMY_ARRAY = DUMMY_ARRAY;

package/lib/utils/dropDownUtils.js

@@ -152,8 +152,14 @@ var getListItemProps = function getListItemProps(props) {
   return props.listItemProps || '';
 };
 
+var getlistItemCustomProps = function getlistItemCustomProps(props) {
+  return props.listItemCustomProps || dummyObj;
+};
+
+var defaultSearchFields = ['value'];
+
 var getSearchFields = function getSearchFields(props) {
-  return props.searchFields || ['value'];
+  return props.searchFields || defaultSearchFields;
 }; // const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj) => {
 //   const matchedFields = searchFields.filter(element => {
 //     return getSearchString(obj[element]).indexOf(searchStr) !== -1
@@ -263,7 +269,7 @@ var extractOptionIdFromJson = function extractOptionIdFromJson(id, localData) {
 exports.extractOptionIdFromJson = extractOptionIdFromJson;
 
 var makeFormatOptions = function makeFormatOptions() {
-  return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getAllowValueFallback, getSearchFields, getSecondaryField], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback, searchFields, secondaryField) {
+  return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getlistItemCustomProps, getAllowValueFallback, getSearchFields, getSecondaryField], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, listItemCustomProps, allowValueFallback, searchFields, secondaryField) {
     var revampOptions = [];
     var remvampOptionIds = [];
     var normalizedAllOptions = {};
@@ -278,7 +284,8 @@ var makeFormatOptions = function makeFormatOptions() {
             impOptionType = option.optionType,
             impIconName = option.iconName,
             impIconSize = option.iconSize,
-            listStyle = option.listItemProps;
+            listStyle = option.listItemProps,
+            listStyleCustomProps = option.listItemCustomProps;
         var id = _typeof(option) === 'object' ? option[impValueField || valueField] : option;
         var value = _typeof(option) === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
         var secondaryValue = _typeof(option) === 'object' ? option[impSecondaryField || secondaryField] : '';
@@ -323,6 +330,10 @@ var makeFormatOptions = function makeFormatOptions() {
             optionDetails.listItemProps = listStyle || listItemProps;
           }
 
+          if (listStyleCustomProps || listItemCustomProps) {
+            optionDetails.listItemCustomProps = listStyleCustomProps || listItemCustomProps;
+          }
+
           normalizedFormatOptions[id] = optionDetails;
           normalizedAllOptions[id] = _objectSpread(_objectSpread({}, option), {}, {
             groupId: prefixText
@@ -478,7 +489,8 @@ var makeGetGroupSelectOptions = function makeGetGroupSelectOptions() {
           groupId = group.id,
           name = group.name,
           valueField = group.valueField,
-          textField = group.textField;
+          textField = group.textField,
+          secondaryField = group.secondaryField;
 
       if (!(0, _Common.getIsEmptyValue)(groupId) && groupIds.indexOf(groupId) === -1) {
         groupIds.push(groupId);
@@ -488,6 +500,7 @@ var makeGetGroupSelectOptions = function makeGetGroupSelectOptions() {
           options: options,
           valueField: valueField,
           textField: textField,
+          secondaryField: secondaryField,
           prefixText: groupId,
           allowValueFallback: allowValueFallback
         }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-233",
+  "version": "1.0.0-temp-234",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -39,7 +39,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node prePublish.js npm run download",
+    "prepublishOnly": "node prePublish.js && npm run css:review",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -73,7 +73,7 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
-    "@zohodesk-private/color-variable-preprocessor": "1.0.0-temp-12",
+    "@zohodesk-private/color-variable-preprocessor": "1.2.0",
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
@@ -86,7 +86,7 @@
     "@zohodesk/svg": "1.2.2",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.1.0",
-    "@zohodesk/virtualizer": "1.0.3",
+    "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
     "@zohodesk/react-cli": "1.1.27"
@@ -101,7 +101,7 @@
     "@zohodesk/icons": "1.1.0",
     "@zohodesk/variables": "1.1.0",
     "@zohodesk/svg": "1.2.2",
-    "@zohodesk/virtualizer": "1.0.3",
+    "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.5",
@@ -110,4 +110,4 @@
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/dotkit": "1.0.3"
   }
-}
+}