ag-common 0.0.679 → 0.0.681

package/dist/ui/helpers/index.d.ts

@@ -14,6 +14,7 @@ export * from './useContextMenu';
 export * from './useElementAttribute';
 export * from './useGranularHook';
 export * from './useInterval';
+export * from './useIsInViewport';
 export * from './useLocalStorage';
 export * from './useLockBodyScroll';
 export * from './useOnClickOutside';

package/dist/ui/helpers/index.js

@@ -30,6 +30,7 @@ __exportStar(require("./useContextMenu"), exports);
 __exportStar(require("./useElementAttribute"), exports);
 __exportStar(require("./useGranularHook"), exports);
 __exportStar(require("./useInterval"), exports);
+__exportStar(require("./useIsInViewport"), exports);
 __exportStar(require("./useLocalStorage"), exports);
 __exportStar(require("./useLockBodyScroll"), exports);
 __exportStar(require("./useOnClickOutside"), exports);

package/dist/ui/helpers/useIsInViewport.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare function useIsInViewport(ref: RefObject<HTMLElement>): boolean;

package/dist/ui/helpers/useIsInViewport.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsInViewport = void 0;
+const react_1 = require("react");
+function useIsInViewport(ref) {
+    const [isInViewport, setIsInViewport] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const observer = new IntersectionObserver((entries) => {
+            setIsInViewport(entries[0].isIntersecting);
+        });
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [ref]);
+    return isInViewport;
+}
+exports.useIsInViewport = useIsInViewport;

package/dist/ui/helpers/useTooltip.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 interface IPos<T> {
     cursor: MouseEvent;
     data: T;
+    usePortal: boolean;
     parentWidth: number;
     parentHeight: number;
     x: number;

package/dist/ui/helpers/useTooltip.js

@@ -29,22 +29,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTooltip = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
 const Base = styled_1.default.div `
   position: absolute;
   z-index: 2;
 `;
+const globalId = 'ag-tooltip-portal';
 const Comp = ({ pos, children, }) => {
     const ref = (0, react_1.createRef)();
     const [size, setSize] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
-        var _a;
-        if ((_a = size === null || size === void 0 ? void 0 : size.p) !== null && _a !== void 0 ? _a : !ref.current) {
+        var _a, _b;
+        if (!ref.current) {
+            return;
+        }
+        const tooltipWidth = Math.max(ref.current.clientWidth, ref.current.scrollWidth);
+        const tooltipHeight = Math.max(ref.current.clientHeight, ref.current.scrollHeight);
+        if (tooltipHeight === ((_a = size === null || size === void 0 ? void 0 : size.p) === null || _a === void 0 ? void 0 : _a.tooltipHeight) ||
+            tooltipWidth === ((_b = size === null || size === void 0 ? void 0 : size.p) === null || _b === void 0 ? void 0 : _b.tooltipWidth) ||
+            tooltipHeight === 0 ||
+            tooltipWidth === 0) {
             return;
         }
         setSize({
             p: {
-                tooltipWidth: ref.current.clientWidth,
-                tooltipHeight: ref.current.clientHeight,
+                tooltipWidth,
+                tooltipHeight,
             },
         });
     }, [ref, size]);
@@ -58,36 +68,68 @@ const Comp = ({ pos, children, }) => {
     const gap = 5;
     if (size === null || size === void 0 ? void 0 : size.p) {
         left = pos.x + gap;
+        const newRight = pos.parentWidth - pos.x + gap;
         if (pos.x + gap + size.p.tooltipWidth > pos.parentWidth) {
             left = undefined;
-            right = pos.parentWidth - pos.x + gap;
+            right = newRight;
         }
         //
         top = pos.y + gap;
         if (top + size.p.tooltipHeight > pos.parentHeight) {
             top = undefined;
             bottom = pos.parentHeight - pos.y;
-            if (bottom + size.p.tooltipHeight > pos.parentHeight) {
-                bottom = pos.parentHeight - size.p.tooltipHeight;
-            }
+        }
+        if (right && right + size.p.tooltipWidth > pos.parentWidth) {
+            right = undefined;
+            left = 0;
+        }
+        if (bottom && bottom + size.p.tooltipHeight > pos.parentHeight) {
+            bottom = undefined;
+            top = 0;
         }
     }
-    return (react_1.default.createElement(Base, { ref: ref, style: Object.assign({ left,
+    const Content = (react_1.default.createElement(Base, { ref: ref, style: Object.assign(Object.assign({ left,
             right,
             top,
-            bottom }, (!(size === null || size === void 0 ? void 0 : size.p) && { zIndex: -1 })) }, children(pos.data)));
+            bottom, zIndex: 10 }, (pos.usePortal && { position: 'fixed' })), (!(size === null || size === void 0 ? void 0 : size.p) && { zIndex: -1 })) }, children(pos.data)));
+    if (pos.usePortal) {
+        return (0, react_dom_1.createPortal)(Content, document.querySelector(`#${globalId}`));
+    }
+    return Content;
 };
 const useTooltip = () => {
     const [pos, setPosRaw] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (document.querySelectorAll(`#${globalId}`).length > 0) {
+            return;
+        }
+        const d = document.createElement('div');
+        d.id = globalId;
+        document.body.appendChild(d);
+        return () => {
+            var _a;
+            (_a = document.querySelector(`#${globalId}`)) === null || _a === void 0 ? void 0 : _a.remove();
+        };
+    }, []);
     const setPos = (p) => {
-        var _a, _b;
         if (!p) {
             setPosRaw(undefined);
             return;
         }
-        const { top: parentTop, left: parentLeft, width: parentWidth, height: parentHeight, } = (_b = (_a = p.parent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { width: 0, height: 0 };
-        const x = p.element.pageX - (parentLeft !== null && parentLeft !== void 0 ? parentLeft : 0);
-        const y = p.element.pageY - (parentTop !== null && parentTop !== void 0 ? parentTop : 0);
+        let parentTop = 0;
+        let parentLeft = 0;
+        let parentWidth = document.body.clientWidth;
+        let parentHeight = document.body.clientHeight;
+        if (p.parent) {
+            ({
+                top: parentTop,
+                left: parentLeft,
+                width: parentWidth,
+                height: parentHeight,
+            } = p.parent.getBoundingClientRect());
+        }
+        const x = p.element.pageX - parentLeft;
+        const y = p.element.pageY - parentTop;
         const p2 = {
             cursor: p.element,
             data: p.data,
@@ -95,6 +137,7 @@ const useTooltip = () => {
             parentHeight,
             x,
             y,
+            usePortal: !p.parent,
         };
         setPosRaw(p2);
     };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.679",
+  "version": "0.0.681",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",