@wireapp/react-ui-kit 9.14.1 → 9.15.0

package/lib/Form/Tooltip.d.ts

@@ -1,9 +1,7 @@
-import * as React from 'react';
-interface ToolTipProps<T = HTMLDivElement> extends React.HTMLProps<T> {
-    position?: 'top' | 'right' | 'left' | 'bottom';
-    body: React.ReactNode;
-    isOpen?: boolean;
+import { HTMLProps, ReactNode } from 'react';
+interface TooltipProps<T = HTMLDivElement> extends HTMLProps<T> {
+    body: ReactNode;
 }
-export declare const Tooltip: ({ children, ...props }: ToolTipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ children, ...props }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Tooltip.d.ts.map

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,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,UAAU,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACnE,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC/C,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAoGD,eAAO,MAAM,OAAO,2BAA0B,YAAY,qDAoBzD,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;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"}

package/lib/Form/Tooltip.js

@@ -13,107 +13,98 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
 const util_1 = require("../util");
+const paddingTop = 6;
 const tooltipStyle = theme => ({
-    position: 'relative',
-    width: 'fit-content',
-    '&:hover .tooltip-content, &:focus-within .tooltip-content,': {
-        visibility: 'visible',
-        opacity: 1,
-    },
+    position: 'absolute',
+    zIndex: '99999',
+    maxWidth: '300px',
+    filter: 'drop-shadow(1px 2px 6px rgba(0, 0, 0, 0.3))',
+    borderRadius: '4px',
     '.tooltip-content': {
-        textAlign: 'center',
-        visibility: 'hidden',
-        opacity: 0,
-        width: 'max-content',
-        height: 'max-content',
-        position: 'absolute',
-        boxSizing: 'border-box',
-        display: 'block',
-        margin: '0 auto',
-        padding: '4px 8px',
-        backgroundColor: theme.Tooltip.backgroundColor,
         color: theme.Tooltip.color,
-        borderRadius: 4,
-        fontSize: theme.fontSizes.small,
-        fontWeight: 500,
-        whiteSpace: 'nowrap',
-        transition: 'opacity ease-out 150ms, bottom ease-out 150ms',
-        boxShadow: '1px 2px 6px rgba(0, 0, 0, 0.3)',
+        backgroundColor: theme.Tooltip.backgroundColor,
+        fontSize: '12px',
+        lineHeight: '14px',
+        fontWeight: 400,
+        padding: `${paddingTop}px 8px`,
+        textAlign: 'center',
     },
-    '& .tooltip-content .tooltip-arrow': {
-        position: 'absolute',
+    '.tooltip-arrow': {
         width: 0,
         height: 0,
-    },
-    "&[data-position='top'] .tooltip-content": {
-        bottom: '100%',
-        marginBottom: 10,
-        left: '50%',
-        transform: 'translateX(-50%)',
-        '& .tooltip-arrow': {
-            filter: 'drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.1))',
-            borderLeft: '12px solid transparent',
-            borderRight: '12px solid transparent',
-            borderTop: `12px solid ${theme.Tooltip.backgroundColor}`,
-            top: '90%',
-            left: '50%',
-            transform: 'translateX(-50%)',
-        },
-    },
-    "&[data-position='right'] .tooltip-content": {
-        left: '100%',
-        marginLeft: '8px !important',
-        top: 0,
-        bottom: 0,
-        margin: 'auto 0',
-        '& .tooltip-arrow': {
-            filter: 'drop-shadow(-2px 0px 1px rgba(0, 0, 0, 0.1))',
-            borderTop: '8px solid transparent',
-            borderBottom: '8px solid transparent',
-            borderRight: `8px solid ${theme.Tooltip.backgroundColor}`,
-            top: '50%',
-            transform: 'translateY(-50%)',
-            left: -7,
-        },
-    },
-    "&[data-position='bottom'] .tooltip-content": {
-        top: '100%',
-        marginTop: 10,
-        left: '50%',
-        transform: 'translateX(-50%)',
-        '& .tooltip-arrow': {
-            filter: 'drop-shadow(0px -2px 1px rgba(0, 0, 0, 0.1))',
-            borderLeft: '12px solid transparent',
-            borderRight: '12px solid transparent',
-            borderBottom: `12px solid ${theme.Tooltip.backgroundColor}`,
-            bottom: '90%',
-            left: '50%',
-            transform: 'translateX(-50%)',
+        borderLeft: '6px solid transparent',
+        borderRight: '6px solid transparent',
+        position: 'absolute',
+        "&[data-position='top']": {
+            borderTop: `10px solid ${theme.Tooltip.backgroundColor}`,
+            bottom: '-6px',
         },
-    },
-    "&[data-position='left'] .tooltip-content": {
-        right: '100%',
-        marginRight: '8px !important',
-        top: 0,
-        bottom: 0,
-        margin: 'auto 0',
-        '& .tooltip-arrow': {
-            filter: 'drop-shadow(2px 0px 1px rgba(0, 0, 0, 0.1))',
-            borderTop: '8px solid transparent',
-            borderBottom: '8px solid transparent',
-            borderLeft: `8px solid ${theme.Tooltip.backgroundColor}`,
-            top: '50%',
-            transform: 'translateY(-50%)',
-            right: -7,
+        "&[data-position='bottom']": {
+            borderBottom: `10px solid ${theme.Tooltip.backgroundColor}`,
+            top: '-6px',
         },
     },
 });
-const filterTooltipProps = (props) => (0, util_1.filterProps)(props, ['position', 'body', 'isOpen']);
+const PortalComponent = ({ children, bounding }) => {
+    const bodyElement = document.querySelector('#wire-app');
+    const [isTouchingTop, setIsTouchingTop] = (0, react_1.useState)(false);
+    if (!bodyElement) {
+        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 filterTooltipProps = (props) => (0, util_1.filterProps)(props, ['body']);
 const Tooltip = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const boundingRectRef = (0, react_1.useRef)();
     const filteredProps = filterTooltipProps(props);
-    const { body, position = 'top', isOpen = true } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: (theme) => tooltipStyle(theme), "data-position": position }, filteredProps, { "data-testid": "tooltip-wrapper", children: [isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "tooltip-content", "data-testid": "tooltip-content", children: [body, (0, jsx_runtime_1.jsx)("div", { className: "tooltip-arrow" })] })), children] })));
+    const { body } = 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 })] })));
 };
 exports.Tooltip = Tooltip;

package/package.json

@@ -70,6 +70,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.14.1",
-  "gitHead": "fab0ea474634672e14aa2bd8a5026483e1b194da"
+  "version": "9.15.0",
+  "gitHead": "fe747cc950bfe5600b84d2164cb8f93a28c58a15"
 }