@stellar-expert/ui-framework 1.13.3 → 1.13.4

package/controls/tooltip.js

@@ -1,4 +1,4 @@
-import React, {useState, useRef, useCallback, useMemo} from 'react'
+import React, {useState, useRef} from 'react'
 import cn from 'classnames'
 import './tooltip.scss'
 
@@ -53,13 +53,11 @@ function calculateTooltipPosition(target, node, desiredPlace, offset) {
         }
     }
 
-    const {top: parentTop, left: parentLeft} = target.getBoundingClientRect()
-
     return {
         place,
         position: {
-            top: (getTipOffsetTop(place) - parentTop) | 0,
-            left: (getTipOffsetLeft(place) - parentLeft) | 0
+            top: getTipOffsetTop(place) + window.scrollY | 0,
+            left: getTipOffsetLeft(place) + window.scrollX | 0
         }
     }
 }
@@ -97,28 +95,28 @@ function getMouseOffset(element) {
  * @param {Number} tipHeight
  *  */
 function getDefaultPosition(targetWidth, targetHeight, tipWidth, tipHeight) {
-    const notchSize = 6
+    const notchSize = 4
     return {
         top: {
             l: -tipWidth / 2,
             r: tipWidth / 2,
-            t: -targetHeight / 2 - tipHeight - notchSize,
+            t: -targetHeight / 2 - tipHeight + notchSize,
             b: -targetHeight / 2
         },
         bottom: {
             l: -tipWidth / 2,
             r: tipWidth / 2,
-            t: targetHeight / 2 + notchSize,
+            t: targetHeight / 2 - notchSize,
             b: targetHeight / 2 + tipHeight
         },
         left: {
-            l: -tipWidth - targetWidth / 2,
+            l: -tipWidth - targetWidth / 2 + notchSize,
             r: -targetWidth / 2 + notchSize,
             t: -tipHeight / 2,
             b: tipHeight / 2
         },
         right: {
-            l: targetWidth / 2 + notchSize,
+            l: targetWidth / 2 - notchSize / 2,
             r: tipWidth + targetWidth / 2,
             t: -tipHeight / 2,
             b: tipHeight / 2
@@ -180,6 +178,7 @@ export const Tooltip = React.memo(function Tooltip({
             return
         const {currentTarget} = e
         setRendered(true)
+        content.current.showPopover()
         setTimeout(() => {
             if (visible)
                 return
@@ -193,6 +192,7 @@ export const Tooltip = React.memo(function Tooltip({
     function onMouseLeave(e) {
         if (!visible)
             return
+        content.current.hidePopover()
         setVisible(false)
         setRendered(false)
     }
@@ -215,8 +215,8 @@ export const Tooltip = React.memo(function Tooltip({
         containerStyle.maxWidth = maxWidth
     }
 
-    return React.cloneElement(trigger, triggerProps, <div className="tooltip-wrapper" style={containerStyle}>
-        <div ref={content} className={cn('tooltip', place, {visible})}>
+    return React.cloneElement(trigger, triggerProps, <div ref={content} className="tooltip-wrapper" style={containerStyle} popover="auto">
+        <div className={cn('tooltip', place, {visible})}>
             <div className="tooltip-content">{rendered ? children : null}</div>
         </div>
     </div>)

package/controls/tooltip.scss

@@ -5,11 +5,20 @@ $tooltip-notch-shadow-color: var(--color-border-shadow);
 .tooltip-wrapper {
   width: 40rem;
   max-width: Min(40rem, 60vw);
+  margin: 0;
+  padding: .8rem;
   position: absolute;
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.15s ease 0.4s, visibility 0.15s ease 0.4s;
   z-index: 10;
+  background: transparent;
+  border: none;
+
+  &:popover-open {
+    visibility: visible;
+    opacity: 1;
+  }
 }
 
 .tooltip {
@@ -24,6 +33,7 @@ $tooltip-notch-shadow-color: var(--color-border-shadow);
   padding: 1rem 1.4rem;
   letter-spacing: normal;
   word-break: normal;
+  visibility: hidden;
 
   &:before {
     content: "";
@@ -37,29 +47,29 @@ $tooltip-notch-shadow-color: var(--color-border-shadow);
 
   &.top:before {
     left: 50%;
-    bottom: -.25em;
+    bottom: -.2em;
     box-shadow: 1px 1px 0 $tooltip-notch-shadow-color;
-    margin-left: -0.4rem;
+    margin-left: -0.26rem;
   }
 
   &.bottom:before {
     left: 50%;
-    top: -.25em;
+    top: -.2em;
     box-shadow: -1px -1px 0 $tooltip-notch-shadow-color;
-    margin-left: -0.4rem;
+    margin-left: -0.26rem;
   }
 
   &.left:before {
-    right: -.25em;
+    right: -.2em;
     top: 50%;
-    margin-top: -0.4em;
+    margin-top: -0.26em;
     box-shadow: 1px -1px 0 $tooltip-notch-shadow-color;
   }
 
   &.right:before {
-    left: -.25em;
+    left: -.2em;
     top: 50%;
-    margin-top: -0.4em;
+    margin-top: -0.26em;
     box-shadow: -1px 1px 0 $tooltip-notch-shadow-color;
   }
 
@@ -101,9 +111,5 @@ $tooltip-notch-shadow-color: var(--color-border-shadow);
     &:before {
       opacity: 1;
     }
-
-    & > .tooltip-wrapper {
-      opacity: 1;
-    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.13.3",
+  "version": "1.13.4",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",