@zohodesk/components 1.0.0-temp-239 → 1.0.0-temp-241

package/lib/Popup/Popup.js

@@ -234,7 +234,6 @@ var Popup = function Popup(Component) {
       _this.handleScrollAndBlockEvents = _this.handleScrollAndBlockEvents.bind(_assertThisInitialized(_this));
       _this.handleIframeEventListeners = _this.handleIframeEventListeners.bind(_assertThisInitialized(_this));
       _this.handleDropElementStyleUpdate = _this.handleDropElementStyleUpdate.bind(_assertThisInitialized(_this));
-      _this.waitForDropElement = _this.waitForDropElement.bind(_assertThisInitialized(_this));
       _this.positionRef = /*#__PURE__*/_react["default"].createRef();
       _this.rootElement = _Registry["default"].getRootElement();
       _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize);
@@ -483,68 +482,38 @@ var Popup = function Popup(Component) {
           bottom: bottom ? "".concat(bottom, "px") : ''
         });
       }
-    }, {
-      key: "waitForDropElement",
-      value: function waitForDropElement(callback) {
-        var _this4 = this;
-
-        var maxRetries = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
-        var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
-
-        if (this.dropElement) {
-          callback();
-          return;
-        }
-
-        if (maxRetries <= 0) {
-          console.warn('Popup: dropElement not available after maximum retries');
-          return;
-        }
-
-        setTimeout(function () {
-          _this4.waitForDropElement(callback, maxRetries - 1, Math.min(delay * 1.5, 1000));
-        }, delay);
-      }
     }, {
       key: "setContainerDynamicPositioning",
       value: function setContainerDynamicPositioning(betterPosition, needArrow) {
-        var _this5 = this;
-
         var dropElement = this.dropElement;
         var isMobile = this.state.isMobile;
 
-        if (!dropElement) {
-          // Wait for dropElement to be available (in case it's being loaded from a chunk)
-          this.waitForDropElement(function () {
-            var _ref4 = betterPosition || _Common.DUMMY_OBJECT,
-                view = _ref4.view,
-                viewsOffset = _ref4.viewsOffset;
-
-            var styleToApply = (0, _selectn["default"])("".concat(view), viewsOffset);
-
-            if (isMobile) {
-              _this5.handleDropElementStyleUpdate({
-                top: '',
-                left: '',
-                right: '',
-                bottom: ''
-              });
-            } else {
-              _this5.handleDropElementStyleUpdate(styleToApply);
+        var _ref4 = betterPosition || _Common.DUMMY_OBJECT,
+            view = _ref4.view,
+            viewsOffset = _ref4.viewsOffset;
 
-              if (_this5.positionRef.current !== view) {
-                dropElement.setAttribute('data-position', "".concat(view));
-                dropElement.setAttribute('data-box-direction', (0, _selectn["default"])("".concat(view, ".direction"), _DropBoxPositionMapping.positionMapping));
+        var styleToApply = (0, _selectn["default"])("".concat(view), viewsOffset);
 
-                if (needArrow) {
-                  dropElement.setAttribute('data-arrow-position', (0, _selectn["default"])("".concat(view, ".arrowPosition"), _DropBoxPositionMapping.positionMapping));
-                }
+        if (isMobile) {
+          this.handleDropElementStyleUpdate({
+            top: '',
+            left: '',
+            right: '',
+            bottom: ''
+          });
+        } else {
+          this.handleDropElementStyleUpdate(styleToApply);
 
-                _this5.positionRef.current = view;
-              }
+          if (this.positionRef.current !== view) {
+            dropElement.setAttribute('data-position', "".concat(view));
+            dropElement.setAttribute('data-box-direction', (0, _selectn["default"])("".concat(view, ".direction"), _DropBoxPositionMapping.positionMapping));
+
+            if (needArrow) {
+              dropElement.setAttribute('data-arrow-position', (0, _selectn["default"])("".concat(view, ".arrowPosition"), _DropBoxPositionMapping.positionMapping));
             }
-          });
-          return;
+
+            this.positionRef.current = view;
+          }
         }
       }
     }, {
@@ -567,7 +536,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "updateListeners",
       value: function updateListeners() {
-        var _this6 = this;
+        var _this4 = this;
 
         var add = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
         var eventList = arguments.length > 1 ? arguments[1] : undefined;
@@ -577,7 +546,7 @@ var Popup = function Popup(Component) {
           var name = _ref6.name,
               handlerName = _ref6.handlerName,
               options = _ref6.options;
-          var handler = _this6[handlerName];
+          var handler = _this4[handlerName];
 
           if (handler) {
             element[method](name, handler, options);
@@ -750,7 +719,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "togglePopup",
       value: function togglePopup(e, defaultPosition) {
-        var _this7 = this;
+        var _this5 = this;
 
         var group = this.getGroup();
         this.removeClose(e);
@@ -759,7 +728,7 @@ var Popup = function Popup(Component) {
         _Registry["default"].lastOpenedGroup = !isPopupOpen && _Registry["default"].lastOpenedGroup.indexOf(group) === -1 ? [group].concat(_toConsumableArray(_Registry["default"].lastOpenedGroup)) : _Registry["default"].lastOpenedGroup;
         isPopupOpen && _Registry["default"].lastOpenedGroup.splice(0, 1);
         groupPopups.forEach(function (popup) {
-          if (popup !== _this7 && popup.state.isPopupOpen) {
+          if (popup !== _this5 && popup.state.isPopupOpen) {
             popup.setState({
               isPopupOpen: false,
               isPopupReady: false
@@ -932,7 +901,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "handlePopupPosition",
       value: function handlePopupPosition() {
-        var _this8 = this;
+        var _this6 = this;
 
         var defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
         var isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
@@ -964,14 +933,14 @@ var Popup = function Popup(Component) {
         }
 
         var setPosition = function setPosition() {
-          _this8.cancelRaf('setPositionRafId');
-
-          _this8.setPositionRafId = requestAnimationFrame(function () {
-            var placeHolderElement = _this8.placeHolderElement,
-                dropElement = _this8.dropElement;
-            var _this8$state = _this8.state,
-                position = _this8$state.position,
-                isPopupReady = _this8$state.isPopupReady;
+          _this6.cancelRaf('setPositionRafId');
+
+          _this6.setPositionRafId = requestAnimationFrame(function () {
+            var placeHolderElement = _this6.placeHolderElement,
+                dropElement = _this6.dropElement;
+            var _this6$state = _this6.state,
+                position = _this6$state.position,
+                isPopupReady = _this6$state.isPopupReady;
             var scrollContainer = placeHolderElement ? placeHolderElement.closest('[data-scroll=true]') || document.body : document.body;
 
             var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
@@ -989,17 +958,21 @@ var Popup = function Popup(Component) {
 
             if (!isAbsolute) {
               if (!isPopupReady) {
-                _this8.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+                _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
               }
 
-              _this8.setContainerDynamicPositioning(betterPosition, needArrow);
+              if (!dropElement) {
+                return;
+              }
+
+              _this6.setContainerDynamicPositioning(betterPosition, needArrow);
             } else {
               if (position !== view || !isPopupReady) {
-                _this8.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+                _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
               }
             }
 
-            _this8.setPositionRafId = null;
+            _this6.setPositionRafId = null;
           });
         };
 
@@ -1016,7 +989,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleOpenPopupPositionChange",
       value: function handleOpenPopupPositionChange() {
-        var _this9 = this;
+        var _this7 = this;
 
         Object.keys(_Registry["default"].popups).forEach(function (groupName) {
           var groupPopups = _Registry["default"].popups[groupName] || [];
@@ -1033,14 +1006,14 @@ var Popup = function Popup(Component) {
               if (placeHolderElement && dropElement) {
                 var scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
 
-                _this9.cancelRaf('resizePositionRafId');
+                _this7.cancelRaf('resizePositionRafId');
 
-                _this9.resizePositionRafId = requestAnimationFrame(function () {
-                  var needArrow = _this9.getNeedArrow(popup);
+                _this7.resizePositionRafId = requestAnimationFrame(function () {
+                  var needArrow = _this7.getNeedArrow(popup);
 
-                  var isAbsolute = _this9.getIsAbsolutePopup(popup);
+                  var isAbsolute = _this7.getIsAbsolutePopup(popup);
 
-                  var customOrder = _this9.getCustomPositionOrder(popup);
+                  var customOrder = _this7.getCustomPositionOrder(popup);
 
                   var isMobile = (0, _isMobilePopover["default"])(true);
 
@@ -1107,7 +1080,7 @@ var Popup = function Popup(Component) {
                   // }
 
 
-                  _this9.resizePositionRafId = null;
+                  _this7.resizePositionRafId = null;
                 });
               }
             }

package/lib/Select/Select.js

@@ -169,6 +169,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     _this.handleExposePopupHandlers = _this.handleExposePopupHandlers.bind(_assertThisInitialized(_this));
     _this.handleGetAddNewOptionText = _this.handleGetAddNewOptionText.bind(_assertThisInitialized(_this));
     _this.getVirtualizerPublicMethods = _this.getVirtualizerPublicMethods.bind(_assertThisInitialized(_this));
+    _this.scrollToHighlightedIndex = _this.scrollToHighlightedIndex.bind(_assertThisInitialized(_this));
     _this.setSuggestionsVirtualizerContainerRefFunction = _this.setSuggestionsVirtualizerContainerRefFunction.bind(_assertThisInitialized(_this));
     _this.valueInputTypeString = '';
     _this.valueInputSearchString = '';
@@ -234,13 +235,42 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         selectedValueIndex: hoverIndex
       });
     }
+  }, {
+    key: "scrollToHighlightedIndex",
+    value: function scrollToHighlightedIndex() {
+      var suggestionContainer = this.suggestionContainer,
+          optionsOrder = this.optionsOrder;
+
+      if (!suggestionContainer) {
+        return;
+      }
+
+      var hoverIndex = this.state.hoverIndex;
+      var isVirtualizerEnabled = this.props.isVirtualizerEnabled;
+      var hoverId = (0, _Common.getIsEmptyValue)(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
+      var selSuggestion = this["suggestion_".concat(hoverId)];
+
+      if (selSuggestion) {
+        (0, _Common.scrollTo)(suggestionContainer, selSuggestion);
+      } else {
+        // Hack: Virtualizer not having options order properly all the time, so scrollToIndex method used here.
+        if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+          this.virtualizerMethods.scrollToIndex(hoverIndex, 'auto', {
+            speed: 0,
+            duration: 0,
+            onComplete: function onComplete() {
+              (0, _Common.scrollTo)(suggestionContainer, selSuggestion);
+            }
+          });
+        }
+      }
+    }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
+    value: function componentDidUpdate(prevProps) {
       var _this2 = this;
 
       var _this$state = this.state,
-          hoverIndex = _this$state.hoverIndex,
           searchStr = _this$state.searchStr,
           selectedValueIndex = _this$state.selectedValueIndex;
       var _this$props = this.props,
@@ -250,28 +280,15 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           needSearch = _this$props.needSearch,
           onSearch = _this$props.onSearch,
           isPopupOpen = _this$props.isPopupOpen,
-          isSearchClearOnClose = _this$props.isSearchClearOnClose,
-          isVirtualizerEnabled = _this$props.isVirtualizerEnabled;
+          isSearchClearOnClose = _this$props.isSearchClearOnClose;
 
-      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 (isPopupOpen) {
+        this.scrollToHighlightedIndex();
       }
 
       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
@@ -764,6 +781,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           getTargetRef = _this$props11.getTargetRef,
           getContainerRef = _this$props11.getContainerRef,
           removeClose = _this$props11.removeClose,
+          isAnimate = _this$props11.isAnimate,
           isPopupOpen = _this$props11.isPopupOpen,
           isPopupReady = _this$props11.isPopupReady,
           animationStyle = _this$props11.animationStyle,
@@ -953,7 +971,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           boxPosition: position || "".concat(defaultDropBoxPosition),
           getRef: getContainerRef,
           isActive: isPopupReady,
-          isAnimate: true,
+          isAnimate: isAnimate && !isVirtualizerEnabled // Note: Virtualizer gets element height at mount itself which causes issue with options height
+          ,
           isArrow: false,
           onClick: removeClose,
           needResponsive: needResponsive,

package/lib/Select/props/defaultProps.js

@@ -40,6 +40,7 @@ var Select_defaultProps = {
   boxSize: 'default',
   needListBorder: false,
   needCloseOnSelect: true,
+  isAnimate: true,
   isParentBased: true,
   isSearchClearOnClose: true,
   i18nKeys: {},

package/lib/Select/props/propTypes.js

@@ -44,6 +44,7 @@ var Select_propTypes = {
     noMoreText: _propTypes["default"].string,
     searchEmptyText: _propTypes["default"].string
   }),
+  isAnimate: _propTypes["default"].bool,
   isDefaultSelectValue: _propTypes["default"].bool,
   isDisabled: _propTypes["default"].bool,
   isNextOptions: _propTypes["default"].bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-239",
+  "version": "1.0.0-temp-241",
   "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 css:review",
+    "prepublishOnly": "node prePublish.js && npm run download_only",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -74,7 +74,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.2.0",
+    "@zohodesk-private/color-variable-preprocessor": "1.0.0-temp-13",
     "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",