react-core-ts 2.1.42 → 2.1.44

package/src/utilities/expandableTootltip.tsx

@@ -1,99 +1,65 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
+import { getPortalTooltipCoords } from './getPosition';
 
 const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
   const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
-  const dropRef = useRef(null);
+  const dropRef = useRef<HTMLSpanElement | null>(null);
   const menuButtonRef = useRef<HTMLDivElement>(null);
   const [visible, setVisible] = useState(false);
   const [tooltipStyle, setTooltipStyle] = useState({
     top: 0,
     left: 0,
-    width: 0,
+    arrowOffset: 50,
   });
-  const adjustDropdownPosition = (): string => {
-    if (menuButtonRef.current) {
-      const inputBoxRect = menuButtonRef.current?.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
 
-      const spaceAbove = inputBoxRect.top;
-      const spaceBelow = viewportHeight - inputBoxRect.bottom;
-      if (spaceAbove > spaceBelow) {
-        if (spaceAbove > 90 && spaceBelow < 120) {
-          return 'top-position';
-        } else {
-          return 'bottom-position';
-        }
-      } else {
-        const diff: number = spaceBelow - spaceAbove;
-        if (spaceAbove > 90 && spaceBelow > 90 && diff < 90) {
-          return 'top-position';
-        } else {
-          return 'bottom-position';
-        }
-      }
-    }
-  };
-
-  const handleMouseEnter = (e: React.MouseEvent) => {
-    if (menuButtonRef.current) {
-      const dropPosition = adjustDropdownPosition();
-      setDropdownPosition(dropPosition);
-      const rect = (e.target as HTMLElement).getBoundingClientRect();
-      let top = rect.bottom + window.scrollY;
-      let left = rect.left + window.scrollX;
-      const height = rect.height;
-      const width = dropRef?.current?.offsetWidth;
-      if (dropPosition === 'bottom-position') {
-        top = top + height / 2 - 5;
-      } else {
-        top = top - height * 2 + 15;
-      }
-
-      setTooltipStyle({
-        top: top,
-        left: left,
-        width: width,
-      });
-      setVisible(true);
-    }
+  const handleMouseEnter = () => {
+    setVisible(true);
   };
 
   const handleMouseLeave = () => {
     setVisible(false);
   };
 
-  useLayoutEffect(() => {
-    const updateTooltipPosition = () => {
-      if (dropRef.current && visible && tooltipStyle) {
-        const tooltipHeight = dropRef.current.offsetHeight;
-        const tooltipWidth = dropRef.current.offsetWidth;
-        const boxWidth = menuButtonRef.current.offsetWidth;
-        setTooltipStyle((prevStyle) => ({
-          ...prevStyle,
-          left:
-            prevStyle.left + boxWidth / 2 - tooltipWidth / 2 < 0
-              ? 20
-              : prevStyle.left + boxWidth / 2 - tooltipWidth / 2,
-          width: tooltipWidth,
-          top:
-            dropdownPosition === 'bottom-position'
-              ? prevStyle.top
-              : prevStyle.top - tooltipHeight,
-        }));
+  const updatePosition = useCallback(() => {
+    if (!menuButtonRef.current || !dropRef.current) return;
+
+    const coords = getPortalTooltipCoords(
+      menuButtonRef.current,
+      dropRef.current
+    );
+    setDropdownPosition(coords.placement);
+    setTooltipStyle((prev) => {
+      if (
+        prev.top === coords.top &&
+        prev.left === coords.left &&
+        prev.arrowOffset === coords.arrowOffset
+      ) {
+        return prev;
       }
-    };
+      return {
+        top: coords.top,
+        left: coords.left,
+        arrowOffset: coords.arrowOffset,
+      };
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!visible) return;
 
-    if (visible) {
-      updateTooltipPosition();
-    }
+    updatePosition();
+    const frame = window.requestAnimationFrame(updatePosition);
 
-    window.addEventListener('resize', updateTooltipPosition);
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
 
     return () => {
-      window.removeEventListener('resize', updateTooltipPosition);
+      window.cancelAnimationFrame(frame);
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
     };
-  }, [visible, dropdownPosition]);
+  }, [visible, updatePosition]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -122,19 +88,23 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
         tooltipStyle &&
         ReactDOM.createPortal(
           <span
-            ref={(node) => (dropRef.current = node)}
+            ref={(node) => {
+              dropRef.current = node;
+            }}
             className={`tooltiptext custom_tooltip_style_class  ${
               dropdownPosition == 'bottom-position' ? 'down' : 'up'
             }`}
-            style={{
-              top: tooltipStyle.top,
-              left: tooltipStyle.left,
-              opacity: 1,
-              width: tooltipStyle.width,
-              minWidth: '60px',
-              maxWidth: '200px',
-              visibility: 'visible',
-            }}
+            style={
+              {
+                top: tooltipStyle.top,
+                left: tooltipStyle.left,
+                opacity: 1,
+                minWidth: '60px',
+                maxWidth: '200px',
+                visibility: 'visible',
+                '--tooltip-arrow-left': `${tooltipStyle.arrowOffset}px`,
+              } as React.CSSProperties
+            }
           >
             <span className="tooltip-text-container">{title}</span>
           </span>,

package/src/utilities/getPosition.ts

@@ -59,3 +59,65 @@ export const applyToolTipPositionClass = (
     textFieldElement.classList.add(positionClass);
   }
 };
+
+export type PortalTooltipPlacement = 'top-position' | 'bottom-position';
+
+export type PortalTooltipCoords = {
+  top: number;
+  left: number;
+  arrowOffset: number;
+  placement: PortalTooltipPlacement;
+};
+
+const VIEWPORT_PAD = 8;
+const TOOLTIP_GAP = 8;
+const ARROW_HALF = 5;
+
+/** Center a portaled tooltip on its trigger and keep the arrow on the trigger. */
+export const getPortalTooltipCoords = (
+  anchorEl: HTMLElement,
+  tooltipEl: HTMLElement
+): PortalTooltipCoords => {
+  const anchor = anchorEl.getBoundingClientRect();
+  const tooltipWidth = Math.max(tooltipEl.offsetWidth, 60);
+  const tooltipHeight = tooltipEl.offsetHeight;
+
+  const spaceAbove = anchor.top;
+  const spaceBelow = window.innerHeight - anchor.bottom;
+
+  let placement: PortalTooltipPlacement = 'bottom-position';
+  if (spaceBelow >= tooltipHeight + 20) {
+    placement = 'bottom-position';
+  } else if (spaceAbove >= tooltipHeight + 20) {
+    placement = 'top-position';
+  } else {
+    placement = spaceBelow > spaceAbove ? 'bottom-position' : 'top-position';
+  }
+
+  const top =
+    placement === 'bottom-position'
+      ? anchor.bottom + TOOLTIP_GAP + window.scrollY
+      : anchor.top - tooltipHeight - TOOLTIP_GAP + window.scrollY;
+
+  const triggerCenterX = anchor.left + anchor.width / 2;
+  const minLeft = VIEWPORT_PAD;
+  const maxLeft = window.innerWidth - tooltipWidth - VIEWPORT_PAD;
+  let left =
+    maxLeft < minLeft
+      ? minLeft
+      : Math.min(Math.max(triggerCenterX - tooltipWidth / 2, minLeft), maxLeft);
+
+  const minArrow = ARROW_HALF + 6;
+  const maxArrow = Math.max(minArrow, tooltipWidth - ARROW_HALF - 6);
+  const arrowOffset = Math.min(
+    Math.max(triggerCenterX - left, minArrow),
+    maxArrow
+  );
+
+  return {
+    top,
+    left: left + window.scrollX,
+    arrowOffset,
+    placement,
+  };
+};

package/dist/injectStyles.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/injectStyles.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const stylesContent_1 = require("./generated/stylesContent");
-const STYLE_ID = 'react-core-ts-styles';
-(function injectReactCoreTsStyles() {
-    if (typeof document === 'undefined')
-        return;
-    if (document.getElementById(STYLE_ID))
-        return;
-    const style = document.createElement('style');
-    style.id = STYLE_ID;
-    style.setAttribute('data-react-core-ts', '');
-    style.textContent = stylesContent_1.STYLES;
-    document.head.appendChild(style);
-})();
-//# sourceMappingURL=injectStyles.js.map

package/dist/injectStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"injectStyles.js","sourceRoot":"","sources":["../src/injectStyles.ts"],"names":[],"mappings":";;AAAA,6DAAmD;AAEnD,MAAM,QAAQ,GAAG,sBAAsB,CAAC;AAExC,CAAC,SAAS,uBAAuB;IAC/B,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO;IAC5C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAE9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,YAAY,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;IAC7C,KAAK,CAAC,WAAW,GAAG,sBAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC,CAAC,EAAE,CAAC"}