@loomhq/lens 10.30.0 → 10.31.2

package/dist/components/popover/popover.d.ts

@@ -10,6 +10,6 @@ declare type PopoverProps = {
     isOpen?: boolean;
     placement?: PlacementProps;
     rootId?: string;
-    boundaryElement: 'clippingParents' | Element;
+    boundaryElement?: 'body' | Element;
 };
 export default Popover;

package/dist/components/popover/popover.js

@@ -14,6 +14,8 @@ import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import styled from '@emotion/styled';
 import { unit } from '../../variables';
+import { CSSTransitionGroup } from 'react-transition-group';
+const duration = 200;
 const placements = {
     topLeft: 'top-start',
     topCenter: 'top',
@@ -30,21 +32,52 @@ const placements = {
 };
 const Wrapper = styled.div `
   position: relative;
+
+  .Popover-enter {
+    opacity: 0.01;
+  }
+
+  .Popover-enter.Popover-enter-active {
+    opacity: 1;
+    transition: opacity ${duration}ms;
+  }
+
+  .Popover-leave {
+    opacity: 1;
+  }
+
+  .Popover-leave.Popover-leave-active {
+    opacity: 0.01;
+    transition: opacity ${duration}ms;
+  }
 `;
 const ContentWrapper = styled.div `
   ${props => props.zIndex && `z-index: ${props.zIndex}`};
 `;
 const Popover = (_a) => {
-    var { children, content, offset = 1, boundaryOffset = 1, isOpen, zIndex = 1100, placement = 'topCenter', rootId, boundaryElement = 'clippingParents' } = _a, props = __rest(_a, ["children", "content", "offset", "boundaryOffset", "isOpen", "zIndex", "placement", "rootId", "boundaryElement"]);
+    var { children, content, offset = 1, boundaryOffset = 1, isOpen, zIndex = 1100, placement = 'topCenter', rootId, boundaryElement = 'body' } = _a, props = __rest(_a, ["children", "content", "offset", "boundaryOffset", "isOpen", "zIndex", "placement", "rootId", "boundaryElement"]);
     const unitOffset = offset * unit;
     const unitBoundaryOffset = boundaryOffset * unit;
+    const [bodyElement, setBodyElement] = useState(null);
+    useEffect(() => {
+        setBodyElement(document === null || document === void 0 ? void 0 : document.querySelector('body'));
+    }, []);
+    const getBoundaryElement = () => {
+        if (boundaryElement) {
+            if (boundaryElement === 'body') {
+                return bodyElement;
+            }
+            return boundaryElement;
+        }
+        return 'clippingParents';
+    };
     const { x, y, reference, floating, strategy, update, refs } = useFloating({
         placement: placements[placement],
         middleware: [
             flip({ fallbackPlacements: ['top', 'bottom'] }),
             shift({
                 padding: unitBoundaryOffset,
-                boundary: boundaryElement,
+                boundary: getBoundaryElement(),
             }),
             floatingUiOffset(unitOffset),
         ],
@@ -72,7 +105,7 @@ const Popover = (_a) => {
     const [rootNode, setRootNode] = useState(null);
     useEffect(() => {
         if (rootId) {
-            setRootNode(document.getElementById(rootId));
+            setRootNode(document === null || document === void 0 ? void 0 : document.getElementById(rootId));
         }
     }, [rootId]);
     const contentProps = {
@@ -84,11 +117,11 @@ const Popover = (_a) => {
             left: x !== null && x !== void 0 ? x : '',
         },
     };
-    return (React.createElement(Wrapper, null,
-        React.createElement("div", Object.assign({ ref: reference }, props), children),
-        isOpen && (React.createElement(React.Fragment, null,
+    return (React.createElement(Wrapper, Object.assign({ ref: reference }, props),
+        children,
+        React.createElement(CSSTransitionGroup, { transitionName: "Popover", transitionEnterTimeout: duration, transitionLeaveTimeout: duration }, isOpen && (React.createElement(React.Fragment, null,
             !rootNode && (React.createElement(ContentWrapper, Object.assign({}, contentProps), content)),
             rootNode &&
-                ReactDOM.createPortal(React.createElement(ContentWrapper, Object.assign({}, contentProps), content), rootNode)))));
+                ReactDOM.createPortal(React.createElement(ContentWrapper, Object.assign({}, contentProps), content), rootNode))))));
 };
 export default Popover;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.30.0",
+  "version": "10.31.2",
   "scripts": {
     "dev": "next",
     "build:next": "next build",