@loomhq/lens 10.32.11 → 10.32.14

package/dist/components/popover/popover.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { flip, offset as floatingUiOffset, getScrollParents, shift, useFloating, } from '@floating-ui/react-dom';
-import React, { useEffect, useState } from 'react';
+import { autoUpdate, flip, offset as floatingUiOffset, limitShift, shift, useFloating, } from '@floating-ui/react-dom';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import styled from '@emotion/styled';
 import { unit } from '../../variables';
@@ -34,35 +34,35 @@ const Wrapper = styled.div `
   width: fit-content;
   // transform forces the popover to calculate the position from the trigger instead of the viewport
   transform: translate(0);
+  z-index: 1;
 `;
 const ContentWrapper = styled.div `
   ${props => props.zIndex && `z-index: ${props.zIndex}`};
 `;
 const Popover = (_a) => {
-    var { children, content, offset = 1, boundaryOffset = 1, isOpen, zIndex = 500, placement = 'topCenter', rootId, boundaryElement = 'body', transitionDuration = 0, transitionDelay = 0 } = _a, props = __rest(_a, ["children", "content", "offset", "boundaryOffset", "isOpen", "zIndex", "placement", "rootId", "boundaryElement", "transitionDuration", "transitionDelay"]);
+    var { children, content, offset = 0.5, boundaryOffset = 0.5, isOpen, zIndex = 500, placement = 'topCenter', rootId, boundaryElement = 'body', transitionDuration = 0, transitionDelay = 0 } = _a, props = __rest(_a, ["children", "content", "offset", "boundaryOffset", "isOpen", "zIndex", "placement", "rootId", "boundaryElement", "transitionDuration", "transitionDelay"]);
     const unitOffset = offset * unit;
     const unitBoundaryOffset = boundaryOffset * unit;
-    const [bodyElement, setBodyElement] = useState(null);
+    const isBrowser = typeof window !== 'undefined';
+    const rootNode = rootId && isBrowser ? document.getElementById(rootId) : undefined;
     const { stage, shouldMount } = useTransition(isOpen, transitionDuration + transitionDelay);
-    useEffect(() => {
-        setBodyElement(document === null || document === void 0 ? void 0 : document.querySelector('body'));
-    }, []);
     const getBoundaryElement = () => {
-        if (boundaryElement) {
-            if (boundaryElement === 'body') {
-                return bodyElement;
-            }
-            return boundaryElement;
+        if (boundaryElement === 'body' && isBrowser) {
+            return document.body;
         }
-        return 'clippingParents';
+        return boundaryElement;
     };
     const { x, y, reference, floating, strategy, update, refs } = useFloating({
         placement: placements[placement],
         middleware: [
-            flip({ fallbackPlacements: ['top', 'bottom'] }),
             shift({
                 padding: unitBoundaryOffset,
-                boundary: getBoundaryElement(),
+                boundary: boundaryElement ? getBoundaryElement() : undefined,
+                limiter: limitShift(),
+            }),
+            flip({
+                fallbackPlacements: ['top', 'bottom'],
+                fallbackStrategy: 'initialPlacement',
             }),
             floatingUiOffset(unitOffset),
         ],
@@ -72,27 +72,9 @@ const Popover = (_a) => {
         if (!refs.reference.current || !refs.floating.current) {
             return;
         }
-        const parents = [
-            ...getScrollParents(refs.reference.current),
-            ...getScrollParents(refs.floating.current),
-        ];
-        parents.forEach(parent => {
-            parent.addEventListener('scroll', update);
-            parent.addEventListener('resize', update);
-        });
-        return () => {
-            parents.forEach(parent => {
-                parent.removeEventListener('scroll', update);
-                parent.removeEventListener('resize', update);
-            });
-        };
-    }, [refs.reference, refs.floating, update, isOpen, shouldMount]);
-    const [rootNode, setRootNode] = useState(null);
-    useEffect(() => {
-        if (rootId) {
-            setRootNode(document === null || document === void 0 ? void 0 : document.getElementById(rootId));
-        }
-    }, [rootId]);
+        // Only call this when the floating element is rendered
+        return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }, [refs.reference, refs.floating, update, shouldMount]);
     const contentProps = {
         zIndex,
         ref: floating,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.32.11",
+  "version": "10.32.14",
   "scripts": {
     "dev": "next",
     "build:next": "next build",
@@ -22,7 +22,7 @@
     ]
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^0.4.3",
+    "@floating-ui/react-dom": "^0.6.0",
     "downshift": "^5.4.7",
     "lodash": "^4.17.21",
     "react-color": "^2.19.3",