@wireapp/react-ui-kit 9.15.2 → 9.15.4

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;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"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Form/Tooltip.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAA0B,SAAS,EAAmB,MAAM,OAAO,CAAC;AAsHrF,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

@@ -34,36 +34,43 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const util_1 = require("../util");
-const paddingTop = 6;
+const paddingDistance = 8;
 const tooltipStyle = theme => ({
-    position: 'absolute',
+    position: 'fixed',
     zIndex: '99999',
     maxWidth: '300px',
     filter: 'drop-shadow(1px 2px 6px rgba(0, 0, 0, 0.3))',
     borderRadius: '4px',
+    "&[data-position='top']": {
+        paddingBottom: `${paddingDistance}px`,
+        '.tooltip-arrow': {
+            borderTop: `10px solid ${theme.Tooltip.backgroundColor}`,
+            bottom: 0,
+        },
+    },
+    "&[data-position='bottom']": {
+        paddingTop: `${paddingDistance}px`,
+        '.tooltip-arrow': {
+            borderBottom: `10px solid ${theme.Tooltip.backgroundColor}`,
+            top: 0,
+        },
+    },
     '.tooltip-content': {
         color: theme.Tooltip.color,
         backgroundColor: theme.Tooltip.backgroundColor,
+        borderRadius: '4px',
         fontSize: '12px',
         lineHeight: '14px',
         fontWeight: 400,
-        padding: `${paddingTop}px 8px`,
+        padding: `${paddingDistance}px 8px`,
         textAlign: 'center',
     },
     '.tooltip-arrow': {
         width: 0,
         height: 0,
-        borderLeft: '6px solid transparent',
-        borderRight: '6px solid transparent',
+        borderLeft: '8px solid transparent',
+        borderRight: '8px solid transparent',
         position: 'absolute',
-        "&[data-position='top']": {
-            borderTop: `10px solid ${theme.Tooltip.backgroundColor}`,
-            bottom: '-6px',
-        },
-        "&[data-position='bottom']": {
-            borderBottom: `10px solid ${theme.Tooltip.backgroundColor}`,
-            top: '-6px',
-        },
     },
 });
 const PortalComponent = ({ children, bounding, selector = '#wire-app' }) => {
@@ -76,15 +83,15 @@ const PortalComponent = ({ children, bounding, selector = '#wire-app' }) => {
         if (!bounding || !element) {
             return;
         }
-        const isTouchingTopEdge = bounding.y <= element.clientHeight + paddingTop * 2;
+        const isTouchingTopEdge = bounding.y <= element.clientHeight + paddingDistance * 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`;
+            element.style.top = `${bounding.y + bounding.height}px`;
         }
         else {
-            element.style.top = `${bounding.y - element.clientHeight - paddingTop}px`;
+            element.style.top = `${bounding.y - element.clientHeight}px`;
         }
     };
     const tooltipArrowRef = (element) => {
@@ -96,9 +103,9 @@ const PortalComponent = ({ children, bounding, selector = '#wire-app' }) => {
             return;
         }
         const parentElementRect = parentElement.getBoundingClientRect();
-        element.style.left = `${parentElementRect.width / 2 - paddingTop}px`;
+        element.style.left = `${parentElementRect.width / 2 - paddingDistance}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);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: tooltipRef, className: "tooltip", css: (theme) => tooltipStyle(theme), "data-position": isTouchingTop ? 'bottom' : 'top', children: [(0, jsx_runtime_1.jsx)("div", { ref: tooltipArrowRef, className: "tooltip-arrow" }), (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) => {
@@ -108,7 +115,7 @@ const Tooltip = (_a) => {
     const filteredProps = filterTooltipProps(props);
     const { body, selector = '#wire-app' } = props;
     const onElementEnter = (event) => {
-        const boundingRect = event.target.getBoundingClientRect();
+        const boundingRect = event.currentTarget.getBoundingClientRect();
         setIsHovered(true);
         boundingRectRef.current = boundingRect;
     };

package/package.json

@@ -49,10 +49,10 @@
     "webpack": "^5.74.0"
   },
   "peerDependencies": {
-    "@emotion/react": "11.10.4",
-    "@types/react": "^18.0.9",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "@emotion/react": "^11",
+    "@types/react": "^18",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -70,6 +70,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.15.2",
-  "gitHead": "197aef37aae4c99370b12f929c7a52aec8cfbef0"
+  "version": "9.15.4",
+  "gitHead": "6d6565a9ca1963c15568e9c557bcb8d95755fce7"
 }