@loomhq/lens 10.31.2 → 10.32.2

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

@@ -1,6 +1,6 @@
 import React from 'react';
 declare type PlacementProps = 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'leftTop' | 'leftCenter' | 'leftBottom' | 'rightTop' | 'rightCenter' | 'rightBottom';
-declare const Popover: ({ children, content, offset, boundaryOffset, isOpen, zIndex, placement, rootId, boundaryElement, ...props }: PopoverProps) => JSX.Element;
+declare const Popover: ({ children, content, offset, boundaryOffset, isOpen, zIndex, placement, rootId, boundaryElement, transitionDuration, transitionDelay, ...props }: PopoverProps) => JSX.Element;
 declare type PopoverProps = {
     children?: React.ReactNode;
     content?: React.ReactNode;
@@ -11,5 +11,7 @@ declare type PopoverProps = {
     placement?: PlacementProps;
     rootId?: string;
     boundaryElement?: 'body' | Element;
+    transitionDuration?: number;
+    transitionDelay?: number;
 };
 export default Popover;

package/dist/components/popover/popover.js

@@ -14,7 +14,7 @@ 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';
+import { useTransition } from 'transition-hook';
 const duration = 200;
 const placements = {
     topLeft: 'top-start',
@@ -32,33 +32,16 @@ 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 = 'body' } = _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', 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, shouldMount } = useTransition(isOpen, transitionDuration);
     useEffect(() => {
         setBodyElement(document === null || document === void 0 ? void 0 : document.querySelector('body'));
     }, []);
@@ -115,13 +98,15 @@ const Popover = (_a) => {
             position: strategy,
             top: y !== null && y !== void 0 ? y : '',
             left: x !== null && x !== void 0 ? x : '',
+            transition: `opacity ${transitionDuration}ms ${transitionDelay}ms`,
+            opacity: stage === 'enter' ? 1 : 0,
         },
     };
     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,
+        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))))));
+                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.31.2",
+  "version": "10.32.2",
   "scripts": {
     "dev": "next",
     "build:next": "next build",
@@ -28,14 +28,15 @@
     "react-color": "^2.19.3",
     "react-laag": "^2.0.3",
     "react-transition-group": "^1.2.0",
-    "resize-observer-polyfill": "^1.5.1"
+    "resize-observer-polyfill": "^1.5.1",
+    "transition-hook": "^1.5.1"
   },
   "peerDependencies": {
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
     "@types/react": "^17.0.3",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -46,9 +47,9 @@
     "@babel/register": "^7.8.3",
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
-    "@mdx-js/loader": "^1.5.5",
-    "@mdx-js/react": "^1.5.5",
-    "@next/mdx": "^10.1.3",
+    "@mdx-js/loader": "^2.0.0",
+    "@mdx-js/react": "^2.0.0",
+    "@next/mdx": "^12.1.0",
     "@types/react": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
@@ -67,14 +68,13 @@
     "husky": "^4.2.1",
     "lint-staged": "^10.0.6",
     "mousetrap": "^1.6.5",
-    "next": "^10.1.3",
-    "next-images": "^1.3.0",
+    "next": "12",
     "prettier": "^1.19.1",
     "prism-react-renderer": "^1.0.2",
-    "react": "^16.12.0",
+    "react": "^17.0.2",
     "react-docgen": "^5.4.0",
-    "react-dom": "^16.12.0",
-    "react-live": "^2.2.2",
+    "react-dom": "^17.0.2",
+    "react-live": "^2.4.1",
     "react-typeform-embed": "^0.2.1",
     "semantic-release": "^17.0.1",
     "tinycolor2": "^1.4.1",