@loomhq/lens 10.32.4 → 10.32.7

package/dist/components/backdrop/backdrop.js

@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { CSSTransitionGroup } from 'react-transition-group';
 import React from 'react';
 import { getColorValue } from '../../utilities';
 import styled from '@emotion/styled';
+import { useTransition } from 'transition-hook';
 const duration = 300;
 const BackdropWrapper = styled.div `
   position: fixed;
@@ -22,28 +22,17 @@ const BackdropWrapper = styled.div `
   height: 100vh;
   background: ${props => getColorValue(props.backgroundColor)};
   z-index: ${props => props.zIndex};
-
-  &.Backdrop-enter {
-    opacity: 0.01;
-  }
-  &.Backdrop-enter.Backdrop-enter-active {
-    opacity: 1;
-    transition: opacity ${duration}ms;
-  }
-  &.Backdrop-leave {
-    opacity: 1;
-  }
-  &.Backdrop-leave.Backdrop-leave-active {
-    opacity: 0.01;
-    transition: opacity ${duration}ms;
-  }
 `;
 const ChildrenWrapper = styled.div `
   height: 100%;
 `;
 const Backdrop = (_a) => {
     var { children, isOpen, zIndex = 1000, backgroundColor = 'backdrop' } = _a, props = __rest(_a, ["children", "isOpen", "zIndex", "backgroundColor"]);
-    return (React.createElement(CSSTransitionGroup, { transitionName: "Backdrop", transitionEnterTimeout: duration, transitionLeaveTimeout: duration }, isOpen && (React.createElement(BackdropWrapper, Object.assign({ backgroundColor: backgroundColor, zIndex: zIndex }, props),
+    const { stage, shouldMount } = useTransition(isOpen, duration);
+    return (React.createElement(React.Fragment, null, shouldMount && (React.createElement(BackdropWrapper, Object.assign({ backgroundColor: backgroundColor, zIndex: zIndex, style: {
+            transition: `opacity ${duration}ms`,
+            opacity: stage === 'enter' ? 1 : 0,
+        } }, props),
         React.createElement(ChildrenWrapper, null, children)))));
 };
 export default Backdrop;

package/dist/components/modal/modal.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getRadius, getShadow, getSize, getColorValue } from '../../utilities';
+import { getColorValue, getRadius, getShadow, getSize } from '../../utilities';
 import Backdrop from '../backdrop/backdrop';
 import Container from '../container/container';
 import IconButton from '../icon-button/icon-button';

package/dist/components/popover/popover.js

@@ -31,16 +31,20 @@ const placements = {
 };
 const Wrapper = styled.div `
   position: relative;
+  width: fit-content;
+  z-index: 1;
+  // transform forces the popover to calculate the position from the trigger instead of the viewport
+  transform: translate(0);
 `;
 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 = 'body', transitionDuration = 0, transitionDelay = 0 } = _a, props = __rest(_a, ["children", "content", "offset", "boundaryOffset", "isOpen", "zIndex", "placement", "rootId", "boundaryElement", "transitionDuration", "transitionDelay"]);
+    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"]);
     const unitOffset = offset * unit;
     const unitBoundaryOffset = boundaryOffset * unit;
     const [bodyElement, setBodyElement] = useState(null);
-    const { stage } = useTransition(isOpen, transitionDuration);
+    const { stage, shouldMount } = useTransition(isOpen, transitionDuration + transitionDelay);
     useEffect(() => {
         setBodyElement(document === null || document === void 0 ? void 0 : document.querySelector('body'));
     }, []);
@@ -83,7 +87,7 @@ const Popover = (_a) => {
                 parent.removeEventListener('resize', update);
             });
         };
-    }, [refs.reference, refs.floating, update, isOpen]);
+    }, [refs.reference, refs.floating, update, isOpen, shouldMount]);
     const [rootNode, setRootNode] = useState(null);
     useEffect(() => {
         if (rootId) {
@@ -103,7 +107,7 @@ const Popover = (_a) => {
     };
     return (React.createElement(Wrapper, Object.assign({ ref: reference }, props),
         children,
-        isOpen && (React.createElement(React.Fragment, null,
+        shouldMount && (React.createElement(React.Fragment, null,
             !rootNode && (React.createElement(ContentWrapper, Object.assign({}, contentProps), content)),
             rootNode &&
                 ReactDOM.createPortal(React.createElement(ContentWrapper, Object.assign({}, contentProps), content), rootNode)))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.32.4",
+  "version": "10.32.7",
   "scripts": {
     "dev": "next",
     "build:next": "next build",
@@ -27,7 +27,6 @@
     "lodash": "^4.17.21",
     "react-color": "^2.19.3",
     "react-laag": "^2.0.3",
-    "react-transition-group": "^1.2.0",
     "resize-observer-polyfill": "^1.5.1",
     "transition-hook": "^1.5.1"
   },