@lumx/react 3.11.0 → 3.11.1-alpha.1

package/index.js

@@ -4520,7 +4520,6 @@ function usePopoverStyle(_ref5) {
     fitWithinViewportHeight,
     boundaryRef,
     anchorRef,
-    children,
     placement,
     style,
     zIndex
@@ -4576,9 +4575,34 @@ function usePopoverStyle(_ref5) {
     placement,
     modifiers
   });
+
+  // Auto update popover
   useEffect(() => {
-    update === null || update === void 0 ? void 0 : update();
-  }, [children, update]);
+    const {
+      current: anchorElement
+    } = anchorRef;
+    if (!update || !popperElement || !anchorElement || !(WINDOW !== null && WINDOW !== void 0 && WINDOW.ResizeObserver)) {
+      return undefined;
+    }
+
+    // Only update once per frame
+    let frame;
+    function limitedUpdate() {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        update === null || update === void 0 ? void 0 : update();
+        frame = undefined;
+      });
+    }
+
+    // On anchor or popover resize
+    const resizeObserver = new ResizeObserver(limitedUpdate);
+    resizeObserver.observe(anchorElement);
+    resizeObserver.observe(popperElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [anchorRef, popperElement, update]);
   const position = (_state$placement = state === null || state === void 0 ? void 0 : state.placement) !== null && _state$placement !== void 0 ? _state$placement : placement;
   const popoverStyle = useMemo(() => {
     const newStyles = _objectSpread2(_objectSpread2(_objectSpread2({}, style), styles.popper), {}, {
@@ -4587,6 +4611,9 @@ function usePopoverStyle(_ref5) {
     if (fitWithinViewportHeight && !newStyles.maxHeight) {
       newStyles.maxHeight = (WINDOW === null || WINDOW === void 0 ? void 0 : WINDOW.innerHeight) || (DOCUMENT === null || DOCUMENT === void 0 ? void 0 : DOCUMENT.documentElement.clientHeight);
     }
+
+    // Do not show the popover while it's not properly placed
+    if (!newStyles.transform) newStyles.visibility = 'hidden';
     return newStyles;
   }, [style, styles.popper, zIndex, fitWithinViewportHeight]);
   return {
@@ -4680,7 +4707,6 @@ const _InnerPopover = forwardRef((props, ref) => {
     fitWithinViewportHeight,
     boundaryRef,
     anchorRef,
-    children,
     placement,
     style,
     zIndex