@loomhq/lens 10.32.12 → 10.33.0

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';
@@ -43,31 +43,27 @@ const Popover = (_a) => {
     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: [
+            shift({
+                padding: unitBoundaryOffset,
+                boundary: boundaryElement ? getBoundaryElement() : undefined,
+                limiter: limitShift(),
+            }),
             flip({
                 fallbackPlacements: ['top', 'bottom'],
                 fallbackStrategy: 'initialPlacement',
             }),
-            shift({
-                padding: unitBoundaryOffset,
-                boundary: getBoundaryElement(),
-            }),
             floatingUiOffset(unitOffset),
         ],
         strategy: 'fixed',
@@ -76,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/dist/css-variables/index.js

@@ -99,11 +99,13 @@ export const getThemeStylesString = (customRootElement = ':root') => {
     const rootElement = customRootElement || ':root';
     return `
     ${rootElement},
-    .theme-light {
+    .theme-light,
+    [data-lensTheme="light"] {
       ${assignLightThemeColors().join('')}
     }
 
-    .theme-dark {
+    .theme-dark,
+    [data-lensTheme="dark"] {
       ${assignDarkThemeColors().join('')}
     }
   `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.32.12",
+  "version": "10.33.0",
   "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",