@wireapp/react-ui-kit 9.15.0 → 9.15.2

package/lib/Form/Tooltip.d.ts

@@ -1,6 +1,7 @@
 import { HTMLProps, ReactNode } from 'react';
 interface TooltipProps<T = HTMLDivElement> extends HTMLProps<T> {
     body: ReactNode;
+    selector?: string;
 }
 export declare const Tooltip: ({ children, ...props }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/lib/Form/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Form/Tooltip.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAA0B,SAAS,EAAmB,MAAM,OAAO,CAAC;AAgGrF,UAAU,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC7D,IAAI,EAAE,SAAS,CAAC;CACjB;AAID,eAAO,MAAM,OAAO,2BAA0B,YAAY,qDA6BzD,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Form/Tooltip.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAA0B,SAAS,EAAmB,MAAM,OAAO,CAAC;AAsGrF,UAAU,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC7D,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,OAAO,2BAA0B,YAAY,qDAiCzD,CAAC"}

package/lib/Form/Tooltip.js

@@ -66,31 +66,39 @@ const tooltipStyle = theme => ({
         },
     },
 });
-const PortalComponent = ({ children, bounding }) => {
-    const bodyElement = document.querySelector('#wire-app');
+const PortalComponent = ({ children, bounding, selector = '#wire-app' }) => {
     const [isTouchingTop, setIsTouchingTop] = (0, react_1.useState)(false);
-    if (!bodyElement) {
+    const targetElement = document.querySelector(selector);
+    if (!targetElement) {
         return null;
     }
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: element => {
-            if (!bounding) {
-                return;
-            }
-            const isTouchingTopEdge = bounding.y <= element.clientHeight + paddingTop * 2;
-            setIsTouchingTop(isTouchingTopEdge);
-            const elementWidth = (element.scrollWidth - bounding.width) / 2;
-            element.style.left = `${bounding.x - elementWidth}px`;
-            if (isTouchingTopEdge) {
-                element.style.top = `${bounding.y + bounding.height + paddingTop}px`;
-            }
-            else {
-                element.style.top = `${bounding.y - element.clientHeight - paddingTop}px`;
-            }
-        }, className: "tooltip", css: (theme) => tooltipStyle(theme), children: [(0, jsx_runtime_1.jsx)("div", { ref: element => {
-                    const { parentElement } = element;
-                    const parentElementRect = parentElement.getBoundingClientRect();
-                    element.style.left = `${parentElementRect.width / 2 - paddingTop}px`;
-                }, className: "tooltip-arrow", "data-position": isTouchingTop ? 'bottom' : 'top' }), (0, jsx_runtime_1.jsx)("div", { className: "tooltip-content", "data-testid": "tooltip-content", children: children })] }), bodyElement);
+    const tooltipRef = (element) => {
+        if (!bounding || !element) {
+            return;
+        }
+        const isTouchingTopEdge = bounding.y <= element.clientHeight + paddingTop * 2;
+        setIsTouchingTop(isTouchingTopEdge);
+        const elementWidth = (element.scrollWidth - bounding.width) / 2;
+        element.style.left = `${bounding.x - elementWidth}px`;
+        if (isTouchingTopEdge) {
+            element.style.top = `${bounding.y + bounding.height + paddingTop}px`;
+        }
+        else {
+            element.style.top = `${bounding.y - element.clientHeight - paddingTop}px`;
+        }
+    };
+    const tooltipArrowRef = (element) => {
+        if (!element) {
+            return;
+        }
+        const { parentElement } = element;
+        if (!parentElement) {
+            return;
+        }
+        const parentElementRect = parentElement.getBoundingClientRect();
+        element.style.left = `${parentElementRect.width / 2 - paddingTop}px`;
+    };
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: tooltipRef, className: "tooltip", css: (theme) => tooltipStyle(theme), children: [(0, jsx_runtime_1.jsx)("div", { ref: tooltipArrowRef, className: "tooltip-arrow", "data-position": isTouchingTop ? 'bottom' : 'top' }), (0, jsx_runtime_1.jsx)("div", { className: "tooltip-content", "data-testid": "tooltip-content", children: children })] }), targetElement);
 };
 const filterTooltipProps = (props) => (0, util_1.filterProps)(props, ['body']);
 const Tooltip = (_a) => {
@@ -98,13 +106,13 @@ const Tooltip = (_a) => {
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const boundingRectRef = (0, react_1.useRef)();
     const filteredProps = filterTooltipProps(props);
-    const { body } = props;
+    const { body, selector = '#wire-app' } = props;
     const onElementEnter = (event) => {
         const boundingRect = event.target.getBoundingClientRect();
         setIsHovered(true);
         boundingRectRef.current = boundingRect;
     };
     const onElementLeave = () => setIsHovered(false);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "presentation" }, filteredProps, { "data-testid": "tooltip-wrapper", onMouseEnter: onElementEnter, onMouseLeave: onElementLeave, onFocus: onElementEnter, onBlur: onElementLeave }, props, { children: [children, isHovered && (0, jsx_runtime_1.jsx)(PortalComponent, { bounding: boundingRectRef.current, children: body })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "presentation" }, filteredProps, { "data-testid": "tooltip-wrapper", onMouseEnter: onElementEnter, onMouseLeave: onElementLeave, onFocus: onElementEnter, onBlur: onElementLeave }, props, { children: [children, isHovered && ((0, jsx_runtime_1.jsx)(PortalComponent, { bounding: boundingRectRef.current, selector: selector, children: body }))] })));
 };
 exports.Tooltip = Tooltip;

package/package.json

@@ -26,7 +26,7 @@
     "@hot-loader/react-dom": "17.0.2",
     "@swc/core": "^1.3.10",
     "@swc/jest": "^0.2.23",
-    "@testing-library/jest-dom": "6.4.1",
+    "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "^29.2.0",
@@ -70,6 +70,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.15.0",
-  "gitHead": "fe747cc950bfe5600b84d2164cb8f93a28c58a15"
+  "version": "9.15.2",
+  "gitHead": "197aef37aae4c99370b12f929c7a52aec8cfbef0"
 }