@wireapp/react-ui-kit - npm Package Compare versions

Comparing version 9.14.1 to 9.15.0

lib/Form/Tooltip.d.ts

@@ -1,9 +0,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

lib/Form/Tooltip.js

@@ -16,105 +16,96 @@ "use strict";
 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': {
+        color: theme.Tooltip.color,
+        backgroundColor: theme.Tooltip.backgroundColor,
+        fontSize: '12px',
+        lineHeight: '14px',
+        fontWeight: 400,
+        padding: `${paddingTop}px 8px`,
         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)',
     },
-    '& .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%)',
+        borderLeft: '6px solid transparent',
+        borderRight: '6px solid transparent',
+        position: 'absolute',
+        "&[data-position='top']": {
+            borderTop: `10px solid ${theme.Tooltip.backgroundColor}`,
+            bottom: '-6px',
         },
-    },
-    "&[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']": {
+            borderBottom: `10px solid ${theme.Tooltip.backgroundColor}`,
+            top: '-6px',
         },
     },
-    "&[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%)',
-        },
-    },
-    "&[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,
-        },
-    },
 });
-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.json

@@ -73,4 +73,4 @@ {
   },
-  "version": "9.14.1",
-  "gitHead": "fab0ea474634672e14aa2bd8a5026483e1b194da"
+  "version": "9.15.0",
+  "gitHead": "fe747cc950bfe5600b84d2164cb8f93a28c58a15"
 }

No alert changes

Improved metrics

Total package byte prevSize

704793

increased by0.04%

Worsened metrics

Lines of code

9966

decreased by-0.11%

No dependency changes