@zohodesk/components 1.4.19 → 1.4.20

package/README.md

@@ -2,6 +2,11 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.20
+
+- **Popup**
+  - Exposed the `recomputePosition` method to handle repositioning and dropdown alignment after chunk download.
+
 # 1.4.19
 
 - Added rtl:as:property comment for linear-gradient usages to ensure support in PostCSS

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.setPosition = this.setPosition.bind(this);
       this.positionRef = /*#__PURE__*/React.createRef();
       this.rootElement = Registry.getRootElement();
       this.popupObserver = new ResizeObserver(this.handlePopupResize);
@@ -391,31 +392,34 @@ 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) {
+        const {
+          view,
+          viewsOffset
+        } = betterPosition || DUMMY_OBJECT;
+        const styleToApply = selectn(`${view}`, viewsOffset);
+
+        if (isMobile) {
+          this.handleDropElementStyleUpdate({
+            top: '',
+            left: '',
+            right: '',
+            bottom: ''
+          });
+        } else {
+          this.handleDropElementStyleUpdate(styleToApply);
 
-          if (needArrow) {
-            dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
-          }
+          if (this.positionRef.current !== view) {
+            dropElement.setAttribute('data-position', `${view}`);
+            dropElement.setAttribute('data-box-direction', selectn(`${view}.direction`, positionMapping));
 
-          this.positionRef.current = view;
+            if (needArrow) {
+              dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
+            }
+
+            this.positionRef.current = view;
+          }
         }
       }
     }
@@ -804,6 +808,51 @@ const Popup = function (Component) {
       });
     }
 
+    setPosition() {
+      this.cancelRaf('setPositionRafId');
+      const needArrow = this.getNeedArrow(this);
+      const isAbsolute = this.getIsAbsolutePopup(this);
+      const customOrder = this.getCustomPositionOrder(this);
+      this.setPositionRafId = requestAnimationFrame(() => {
+        const {
+          placeHolderElement,
+          dropElement,
+          defaultPosition
+        } = this;
+        const {
+          position,
+          isPopupReady
+        } = this.state;
+        const scrollContainer = placeHolderElement ? placeHolderElement.closest('[data-scroll=true]') || document.body : document.body;
+        const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
+          needArrow,
+          isAbsolute,
+          customOrder
+        });
+        const {
+          view,
+          views,
+          viewsOffset,
+          targetOffset,
+          popupOffset
+        } = betterPosition || DUMMY_OBJECT;
+
+        if (!isAbsolute) {
+          if (!isPopupReady) {
+            this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+          }
+
+          this.setContainerDynamicPositioning(betterPosition, needArrow);
+        } else {
+          if (position !== view || !isPopupReady) {
+            this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+          }
+        }
+
+        this.setPositionRafId = null;
+      });
+    }
+
     handlePopupPosition() {
       let defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
       let isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
@@ -815,9 +864,7 @@ const Popup = function (Component) {
         placeHolderElement,
         dropElement
       } = this;
-      const needArrow = this.getNeedArrow(this);
       const isAbsolute = this.getIsAbsolutePopup(this);
-      const customOrder = this.getCustomPositionOrder(this);
 
       if (direction === 'rtl') {
         defaultPosition = isAbsolute ? rtlAbsolutePositionMapping[defaultPosition] : rtlFixedPositionMapping[defaultPosition];
@@ -825,6 +872,8 @@ const Popup = function (Component) {
         defaultPosition = isAbsolute ? absolutePositionMapping[defaultPosition] : defaultPosition;
       }
 
+      this.defaultPosition = defaultPosition;
+
       if (!placeHolderElement && !dropElement) {
         const isMobile = isMobilePopover(true);
         this.setState({
@@ -835,59 +884,13 @@ const Popup = function (Component) {
         return;
       }
 
-      const setPosition = () => {
-        this.cancelRaf('setPositionRafId');
-        this.setPositionRafId = requestAnimationFrame(() => {
-          const {
-            placeHolderElement,
-            dropElement
-          } = this;
-          const {
-            position,
-            isPopupReady
-          } = this.state;
-          const scrollContainer = placeHolderElement ? placeHolderElement.closest('[data-scroll=true]') || document.body : document.body;
-          const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
-            needArrow,
-            isAbsolute,
-            customOrder
-          });
-          const {
-            view,
-            views,
-            viewsOffset,
-            targetOffset,
-            popupOffset
-          } = betterPosition || DUMMY_OBJECT;
-
-          if (!isAbsolute) {
-            if (!isPopupReady) {
-              this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
-            }
-
-            if (!dropElement) {
-              return;
-            }
-
-            this.setContainerDynamicPositioning(betterPosition, needArrow);
-          } else {
-            if (position !== view || !isPopupReady) {
-              this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
-            }
-          }
-
-          this.setPositionRafId = null;
-        });
-      };
-
       if (isUpdatePosition) {
-        setPosition();
+        this.setPosition();
       } else {
-        this.defaultPosition = defaultPosition;
         this.setState({
           isPopupOpen: true,
           isPopupReady: false
-        }, setPosition);
+        }, this.setPosition);
       }
     }
 
@@ -1032,6 +1035,7 @@ const Popup = function (Component) {
         openPopupOnly: this.openPopupOnly,
         closePopupOnly: this.closePopupOnly,
         togglePopup: this.togglePopup,
+        recomputePosition: this.setPosition,
         removeClose: this.removeClose,
         getTargetRef: this.getTargetRef,
         getContainerRef: this.getContainerRef

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.setPosition = _this.setPosition.bind(_assertThisInitialized(_this));
       _this.positionRef = /*#__PURE__*/_react["default"].createRef();
       _this.rootElement = _Registry["default"].getRootElement();
       _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize);
@@ -488,31 +489,33 @@ var Popup = function Popup(Component) {
         var dropElement = this.dropElement;
         var isMobile = this.state.isMobile;
 
-        var _ref4 = betterPosition || _Common.DUMMY_OBJECT,
-            view = _ref4.view,
-            viewsOffset = _ref4.viewsOffset;
+        if (dropElement) {
+          var _ref4 = betterPosition || _Common.DUMMY_OBJECT,
+              view = _ref4.view,
+              viewsOffset = _ref4.viewsOffset;
 
-        var styleToApply = (0, _selectn["default"])("".concat(view), viewsOffset);
+          var styleToApply = (0, _selectn["default"])("".concat(view), viewsOffset);
 
-        if (isMobile) {
-          this.handleDropElementStyleUpdate({
-            top: '',
-            left: '',
-            right: '',
-            bottom: ''
-          });
-        } else {
-          this.handleDropElementStyleUpdate(styleToApply);
+          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 (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));
+              }
 
-            this.positionRef.current = view;
+              this.positionRef.current = view;
+            }
           }
         }
       }
@@ -899,22 +902,64 @@ var Popup = function Popup(Component) {
         });
       }
     }, {
-      key: "handlePopupPosition",
-      value: function handlePopupPosition() {
+      key: "setPosition",
+      value: function setPosition() {
         var _this6 = this;
 
+        this.cancelRaf('setPositionRafId');
+        var needArrow = this.getNeedArrow(this);
+        var isAbsolute = this.getIsAbsolutePopup(this);
+        var customOrder = this.getCustomPositionOrder(this);
+        this.setPositionRafId = requestAnimationFrame(function () {
+          var placeHolderElement = _this6.placeHolderElement,
+              dropElement = _this6.dropElement,
+              defaultPosition = _this6.defaultPosition;
+          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, {
+            needArrow: needArrow,
+            isAbsolute: isAbsolute,
+            customOrder: customOrder
+          });
+
+          var _ref10 = betterPosition || _Common.DUMMY_OBJECT,
+              view = _ref10.view,
+              views = _ref10.views,
+              viewsOffset = _ref10.viewsOffset,
+              targetOffset = _ref10.targetOffset,
+              popupOffset = _ref10.popupOffset;
+
+          if (!isAbsolute) {
+            if (!isPopupReady) {
+              _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+            }
+
+            _this6.setContainerDynamicPositioning(betterPosition, needArrow);
+          } else {
+            if (position !== view || !isPopupReady) {
+              _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+            }
+          }
+
+          _this6.setPositionRafId = null;
+        });
+      }
+    }, {
+      key: "handlePopupPosition",
+      value: function handlePopupPosition() {
         var defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
         var isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
 
         // isUpdatePosition --->>> Window resize and dropBox resize and to update the position
-        var _ref10 = this.context || {},
-            direction = _ref10.direction;
+        var _ref11 = this.context || {},
+            direction = _ref11.direction;
 
         var placeHolderElement = this.placeHolderElement,
             dropElement = this.dropElement;
-        var needArrow = this.getNeedArrow(this);
         var isAbsolute = this.getIsAbsolutePopup(this);
-        var customOrder = this.getCustomPositionOrder(this);
 
         if (direction === 'rtl') {
           defaultPosition = isAbsolute ? _PositionMapping.rtlAbsolutePositionMapping[defaultPosition] : _PositionMapping.rtlFixedPositionMapping[defaultPosition];
@@ -922,6 +967,8 @@ var Popup = function Popup(Component) {
           defaultPosition = isAbsolute ? _PositionMapping.absolutePositionMapping[defaultPosition] : defaultPosition;
         }
 
+        this.defaultPosition = defaultPosition;
+
         if (!placeHolderElement && !dropElement) {
           var isMobile = (0, _isMobilePopover["default"])(true);
           this.setState({
@@ -932,58 +979,13 @@ var Popup = function Popup(Component) {
           return;
         }
 
-        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;
-            var scrollContainer = placeHolderElement ? placeHolderElement.closest('[data-scroll=true]') || document.body : document.body;
-
-            var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
-              needArrow: needArrow,
-              isAbsolute: isAbsolute,
-              customOrder: customOrder
-            });
-
-            var _ref11 = betterPosition || _Common.DUMMY_OBJECT,
-                view = _ref11.view,
-                views = _ref11.views,
-                viewsOffset = _ref11.viewsOffset,
-                targetOffset = _ref11.targetOffset,
-                popupOffset = _ref11.popupOffset;
-
-            if (!isAbsolute) {
-              if (!isPopupReady) {
-                _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
-              }
-
-              if (!dropElement) {
-                return;
-              }
-
-              _this6.setContainerDynamicPositioning(betterPosition, needArrow);
-            } else {
-              if (position !== view || !isPopupReady) {
-                _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
-              }
-            }
-
-            _this6.setPositionRafId = null;
-          });
-        };
-
         if (isUpdatePosition) {
-          setPosition();
+          this.setPosition();
         } else {
-          this.defaultPosition = defaultPosition;
           this.setState({
             isPopupOpen: true,
             isPopupReady: false
-          }, setPosition);
+          }, this.setPosition);
         }
       }
     }, {
@@ -1149,6 +1151,7 @@ var Popup = function Popup(Component) {
           openPopupOnly: this.openPopupOnly,
           closePopupOnly: this.closePopupOnly,
           togglePopup: this.togglePopup,
+          recomputePosition: this.setPosition,
           removeClose: this.removeClose,
           getTargetRef: this.getTargetRef,
           getContainerRef: this.getContainerRef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.4.19",
+  "version": "1.4.20",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -81,8 +81,8 @@
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.3",
-    "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.1.0",
+    "@zohodesk/hooks": "2.0.6",
+    "@zohodesk/icons": "1.1.1",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/svg": "1.2.2",
     "@zohodesk/utils": "1.3.15",
@@ -99,13 +99,13 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.1.0",
+    "@zohodesk/icons": "1.1.1",
     "@zohodesk/variables": "1.1.0",
     "@zohodesk/svg": "1.2.2",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/hooks": "2.0.5",
+    "@zohodesk/hooks": "2.0.6",
     "@zohodesk/utils": "1.3.15",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0",