@loomhq/lens 10.29.3 → 10.31.1

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export { default as Switch } from "./switch/switch";
 export { default as Logo } from "./logo/logo";
 export { default as Radio } from "./radio/radio";
 export { default as Pill } from "./pill/pill";
+export { default as Popover } from "./popover/popover";
 export { default as Illustration } from "./illustration/illustration";
 export { default as Arrange } from "./arrange/arrange";
 export { default as ColorPicker } from "./color-picker/color-picker";

package/dist/components/index.js

@@ -34,6 +34,7 @@ export { ListRow } from './list/list';
 export { default as Tabs } from './tabs/tabs';
 export { Tab } from './tabs/tabs';
 export { default as Pill } from './pill/pill';
+export { default as Popover } from './popover/popover';
 export { default as Illustration } from './illustration/illustration';
 export { default as Arrange } from './arrange/arrange';
 export { default as Split } from './split/split';

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

@@ -0,0 +1,15 @@
+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 type PopoverProps = {
+    children?: React.ReactNode;
+    content?: React.ReactNode;
+    offset?: number;
+    boundaryOffset?: number;
+    zIndex?: number | string;
+    isOpen?: boolean;
+    placement?: PlacementProps;
+    rootId?: string;
+    boundaryElement?: 'body' | Element;
+};
+export default Popover;

package/dist/components/popover/popover.js

@@ -0,0 +1,127 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { flip, offset as floatingUiOffset, getScrollParents, shift, useFloating, } from '@floating-ui/react-dom';
+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',
+    topRight: 'top-end',
+    bottomLeft: 'bottom-start',
+    bottomCenter: 'bottom',
+    bottomRight: 'bottom-end',
+    leftTop: 'left-start',
+    leftCenter: 'left',
+    leftBottom: 'left-end',
+    rightTop: 'right-start',
+    rightCenter: 'right',
+    rightBottom: 'right-end',
+};
+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"]);
+    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: getBoundaryElement(),
+            }),
+            floatingUiOffset(unitOffset),
+        ],
+        strategy: rootId ? 'fixed' : 'absolute',
+    });
+    useEffect(() => {
+        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]);
+    const [rootNode, setRootNode] = useState(null);
+    useEffect(() => {
+        if (rootId) {
+            setRootNode(document === null || document === void 0 ? void 0 : document.getElementById(rootId));
+        }
+    }, [rootId]);
+    const contentProps = {
+        zIndex,
+        ref: floating,
+        style: {
+            position: strategy,
+            top: y !== null && y !== void 0 ? y : '',
+            left: x !== null && x !== void 0 ? x : '',
+        },
+    };
+    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))))));
+};
+export default Popover;

package/dist/hooks/index.d.ts

@@ -1 +1,2 @@
 export { default as useMedia } from "./use-media.js";
+export { default as useOnClickOutside } from "./use-on-click-outside.js";

package/dist/hooks/index.js

@@ -1 +1,2 @@
 export { default as useMedia } from './use-media.js';
+export { default as useOnClickOutside } from './use-on-click-outside.js';

package/dist/hooks/use-on-click-outside.d.ts

@@ -0,0 +1 @@
+export default function useOnClickOutside(ref: any, handler: any): void;

package/dist/hooks/use-on-click-outside.js

@@ -0,0 +1,17 @@
+import React from 'react';
+export default function useOnClickOutside(ref, handler) {
+    React.useEffect(() => {
+        const listener = event => {
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
+}

package/package.json

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