react-better-html 1.1.285 → 1.1.286

package/dist/index.mjs

@@ -7252,7 +7252,17 @@ var Table2 = memo23(TableComponent);
 var Table_default = Table2;
 
 // src/components/Tooltip.tsx
-import { memo as memo24, useCallback as useCallback16, useRef as useRef7, useState as useState12, useEffect as useEffect13, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo10 } from "react";
+import {
+  memo as memo24,
+  useCallback as useCallback16,
+  useRef as useRef7,
+  useState as useState12,
+  useEffect as useEffect13,
+  useLayoutEffect,
+  forwardRef as forwardRef16,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo10
+} from "react";
 import { useTheme as useTheme26 } from "react-better-core";
 import styled13, { css as css6 } from "styled-components";
 import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -7412,9 +7422,9 @@ var TooltipComponent = forwardRef16(function Tooltip({
   children
 }, ref) {
   const theme2 = useTheme26();
+  const wrapperRef = useRef7(null);
   const triggerHolderRef = useRef7(null);
   const contentRef = useRef7(null);
-  const tooltipContainerRef = useRef7(null);
   const closeTimerRef = useRef7(void 0);
   const [isOpen, setIsOpen] = useState12(false);
   const [isOpenLate, setIsOpenLate] = useState12(false);
@@ -7427,26 +7437,8 @@ var TooltipComponent = forwardRef16(function Tooltip({
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
     setIsOpen(true);
     setIsOpenLate(true);
-    setTimeout(() => {
-      if (!tooltipContainerRef.current) return;
-      if (!contentRef.current) return;
-      const clientRects = tooltipContainerRef.current.getBoundingClientRect();
-      if (clientRects) {
-        const { width, height, x, y } = clientRects;
-        const topOutside = y < 0;
-        const bottomOutside = y + height > window.innerHeight;
-        const leftOutside = x < 0;
-        const rightOutside = x + width > window.innerWidth;
-        if (topOutside) contentRef.current.style.transform = `translateY(${y * -1 + outsideScreenGap}px)`;
-        if (bottomOutside)
-          contentRef.current.style.transform = `translateY(${window.innerHeight - (y + height) - totalGap}px)`;
-        if (leftOutside) contentRef.current.style.transform = `translateX(${x * -1 + outsideScreenGap}px)`;
-        if (rightOutside)
-          contentRef.current.style.transform = `translateX(${window.innerWidth - (x + width) - totalGap}px)`;
-      }
-    }, 1);
     onOpen?.();
-  }, [disabled, onOpen, outsideScreenGap, totalGap]);
+  }, [disabled, onOpen]);
   const closeTooltip = useCallback16(() => {
     setIsOpen(false);
     closeTimerRef.current = setTimeout(() => setIsOpenLate(false), 300);
@@ -7477,6 +7469,29 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [trigger, isOpen, closeTooltip]
   );
+  const clampContentInsideViewport = useCallback16(() => {
+    if (!wrapperRef.current || !contentRef.current) return;
+    const wrapperRect = wrapperRef.current.getBoundingClientRect();
+    const contentWidth2 = contentRef.current.offsetWidth;
+    const contentHeight = contentRef.current.offsetHeight;
+    let expectedLeft;
+    let expectedTop;
+    if (position === "top" || position === "bottom") {
+      expectedTop = position === "top" ? wrapperRect.top - totalGap - contentHeight : wrapperRect.bottom + totalGap;
+      expectedLeft = align === "left" ? wrapperRect.left : align === "right" ? wrapperRect.right - contentWidth2 : wrapperRect.left + wrapperRect.width / 2 - contentWidth2 / 2;
+    } else {
+      expectedLeft = position === "left" ? wrapperRect.left - totalGap - contentWidth2 : wrapperRect.right + totalGap;
+      expectedTop = align === "top" ? wrapperRect.top : align === "bottom" ? wrapperRect.bottom - contentHeight : wrapperRect.top + wrapperRect.height / 2 - contentHeight / 2;
+    }
+    const getShift = (start, size, viewportSize) => {
+      if (start < outsideScreenGap) return outsideScreenGap - start;
+      if (start + size > viewportSize - outsideScreenGap) return viewportSize - outsideScreenGap - (start + size);
+      return 0;
+    };
+    const shiftX = getShift(expectedLeft, contentWidth2, window.innerWidth);
+    const shiftY = getShift(expectedTop, contentHeight, window.innerHeight);
+    contentRef.current.style.transform = shiftX || shiftY ? `translate(${shiftX}px, ${shiftY}px)` : "";
+  }, [position, align, totalGap, outsideScreenGap]);
   useEffect13(() => {
     if (trigger === "click") {
       document.addEventListener("mousedown", onClickOutside);
@@ -7489,6 +7504,9 @@ var TooltipComponent = forwardRef16(function Tooltip({
     if (!disabled) return;
     closeTooltip();
   }, [disabled]);
+  useLayoutEffect(() => {
+    if (isOpen) clampContentInsideViewport();
+  }, [isOpen, clampContentInsideViewport]);
   useImperativeHandle3(ref, () => {
     return {
       isOpen,
@@ -7505,6 +7523,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
       onClick: onClickHolder,
       onMouseEnter,
       onMouseLeave,
+      ref: wrapperRef,
       children: [
         /* @__PURE__ */ jsx25(
           Div_default,
@@ -7528,7 +7547,6 @@ var TooltipComponent = forwardRef16(function Tooltip({
             gap,
             isOpen,
             role: "tooltip",
-            ref: tooltipContainerRef,
             children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs21(Div_default, { position: "relative", ref: contentRef, children: [
               /* @__PURE__ */ jsx25(
                 Div_default.box,