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

package/README.md

@@ -21,7 +21,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 # 1.4.12
 
 - `TextBox`
-  - The event is passed as the 4th argument to both handleBlur and handleFocus  
+  - The event is passed as the 4th argument to both onBlur and onFocus  
 - `Common Css`
   - added ltr class for change direction to ltr in rtl mode.
 

package/es/Popup/Popup.js

@@ -159,6 +159,7 @@ const Popup = function (Component) {
       this.handleScrollAndBlockEvents = this.handleScrollAndBlockEvents.bind(this);
       this.handleIframeEventListeners = this.handleIframeEventListeners.bind(this);
       this.handleDropElementStyleUpdate = this.handleDropElementStyleUpdate.bind(this);
+      this.waitForDropElement = this.waitForDropElement.bind(this);
       this.positionRef = /*#__PURE__*/React.createRef();
       this.rootElement = Registry.getRootElement();
       this.popupObserver = new ResizeObserver(this.handlePopupResize);
@@ -384,6 +385,25 @@ const Popup = function (Component) {
       });
     }
 
+    waitForDropElement(callback) {
+      let maxRetries = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+      let 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(() => {
+        this.waitForDropElement(callback, maxRetries - 1, Math.min(delay * 1.5, 1000));
+      }, delay);
+    }
+
     setContainerDynamicPositioning(betterPosition, needArrow) {
       const {
         dropElement
@@ -391,32 +411,39 @@ const Popup = function (Component) {
       const {
         isMobile
       } = this.state;
-      const {
-        view,
-        viewsOffset
-      } = betterPosition || DUMMY_OBJECT;
-      const styleToApply = selectn(`${view}`, viewsOffset);
-
-      if (isMobile) {
-        this.handleDropElementStyleUpdate({
-          top: '',
-          left: '',
-          right: '',
-          bottom: ''
-        });
-      } else {
-        this.handleDropElementStyleUpdate(styleToApply);
 
-        if (this.positionRef.current !== view) {
-          dropElement.setAttribute('data-position', `${view}`);
-          dropElement.setAttribute('data-box-direction', selectn(`${view}.direction`, positionMapping));
+      if (!dropElement) {
+        // Wait for dropElement to be available (in case it's being loaded from a chunk)
+        this.waitForDropElement(() => {
+          const {
+            view,
+            viewsOffset
+          } = betterPosition || DUMMY_OBJECT;
+          const styleToApply = selectn(`${view}`, viewsOffset);
+
+          if (isMobile) {
+            this.handleDropElementStyleUpdate({
+              top: '',
+              left: '',
+              right: '',
+              bottom: ''
+            });
+          } else {
+            this.handleDropElementStyleUpdate(styleToApply);
+
+            if (this.positionRef.current !== view) {
+              dropElement.setAttribute('data-position', `${view}`);
+              dropElement.setAttribute('data-box-direction', selectn(`${view}.direction`, positionMapping));
 
-          if (needArrow) {
-            dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
-          }
+              if (needArrow) {
+                dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
+              }
 
-          this.positionRef.current = view;
-        }
+              this.positionRef.current = view;
+            }
+          }
+        });
+        return;
       }
     }
 
@@ -865,10 +892,6 @@ const Popup = function (Component) {
               this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
             }
 
-            if (!dropElement) {
-              return;
-            }
-
             this.setContainerDynamicPositioning(betterPosition, needArrow);
           } else {
             if (position !== view || !isPopupReady) {

package/lib/Popup/Popup.js

@@ -234,6 +234,7 @@ 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);
@@ -482,38 +483,68 @@ 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;
 
-        var _ref4 = betterPosition || _Common.DUMMY_OBJECT,
-            view = _ref4.view,
-            viewsOffset = _ref4.viewsOffset;
+        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 styleToApply = (0, _selectn["default"])("".concat(view), 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));
 
-        if (isMobile) {
-          this.handleDropElementStyleUpdate({
-            top: '',
-            left: '',
-            right: '',
-            bottom: ''
-          });
-        } else {
-          this.handleDropElementStyleUpdate(styleToApply);
-
-          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));
+                }
 
-            if (needArrow) {
-              dropElement.setAttribute('data-arrow-position', (0, _selectn["default"])("".concat(view, ".arrowPosition"), _DropBoxPositionMapping.positionMapping));
+                _this5.positionRef.current = view;
+              }
             }
-
-            this.positionRef.current = view;
-          }
+          });
+          return;
         }
       }
     }, {
@@ -536,7 +567,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "updateListeners",
       value: function updateListeners() {
-        var _this4 = this;
+        var _this6 = this;
 
         var add = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
         var eventList = arguments.length > 1 ? arguments[1] : undefined;
@@ -546,7 +577,7 @@ var Popup = function Popup(Component) {
           var name = _ref6.name,
               handlerName = _ref6.handlerName,
               options = _ref6.options;
-          var handler = _this4[handlerName];
+          var handler = _this6[handlerName];
 
           if (handler) {
             element[method](name, handler, options);
@@ -719,7 +750,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "togglePopup",
       value: function togglePopup(e, defaultPosition) {
-        var _this5 = this;
+        var _this7 = this;
 
         var group = this.getGroup();
         this.removeClose(e);
@@ -728,7 +759,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 !== _this5 && popup.state.isPopupOpen) {
+          if (popup !== _this7 && popup.state.isPopupOpen) {
             popup.setState({
               isPopupOpen: false,
               isPopupReady: false
@@ -901,7 +932,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "handlePopupPosition",
       value: function handlePopupPosition() {
-        var _this6 = this;
+        var _this8 = this;
 
         var defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
         var isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
@@ -933,14 +964,14 @@ var Popup = function Popup(Component) {
         }
 
         var setPosition = function setPosition() {
-          _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;
+          _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;
             var scrollContainer = placeHolderElement ? placeHolderElement.closest('[data-scroll=true]') || document.body : document.body;
 
             var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
@@ -958,21 +989,17 @@ var Popup = function Popup(Component) {
 
             if (!isAbsolute) {
               if (!isPopupReady) {
-                _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+                _this8.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
               }
 
-              if (!dropElement) {
-                return;
-              }
-
-              _this6.setContainerDynamicPositioning(betterPosition, needArrow);
+              _this8.setContainerDynamicPositioning(betterPosition, needArrow);
             } else {
               if (position !== view || !isPopupReady) {
-                _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+                _this8.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
               }
             }
 
-            _this6.setPositionRafId = null;
+            _this8.setPositionRafId = null;
           });
         };
 
@@ -989,7 +1016,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleOpenPopupPositionChange",
       value: function handleOpenPopupPositionChange() {
-        var _this7 = this;
+        var _this9 = this;
 
         Object.keys(_Registry["default"].popups).forEach(function (groupName) {
           var groupPopups = _Registry["default"].popups[groupName] || [];
@@ -1006,14 +1033,14 @@ var Popup = function Popup(Component) {
               if (placeHolderElement && dropElement) {
                 var scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
 
-                _this7.cancelRaf('resizePositionRafId');
+                _this9.cancelRaf('resizePositionRafId');
 
-                _this7.resizePositionRafId = requestAnimationFrame(function () {
-                  var needArrow = _this7.getNeedArrow(popup);
+                _this9.resizePositionRafId = requestAnimationFrame(function () {
+                  var needArrow = _this9.getNeedArrow(popup);
 
-                  var isAbsolute = _this7.getIsAbsolutePopup(popup);
+                  var isAbsolute = _this9.getIsAbsolutePopup(popup);
 
-                  var customOrder = _this7.getCustomPositionOrder(popup);
+                  var customOrder = _this9.getCustomPositionOrder(popup);
 
                   var isMobile = (0, _isMobilePopover["default"])(true);
 
@@ -1080,7 +1107,7 @@ var Popup = function Popup(Component) {
                   // }
 
 
-                  _this7.resizePositionRafId = null;
+                  _this9.resizePositionRafId = null;
                 });
               }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-238",
+  "version": "1.0.0-temp-239",
   "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_only",
+    "prepublishOnly": "node prePublish.js && npm run css:review",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",