react-better-html 1.1.285 → 1.1.287

package/dist/index.mjs

@@ -7252,74 +7252,49 @@ 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 { createPortal as createPortal2 } from "react-dom";
 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";
-var tooltipContainerStyle = (props) => ({
+var isStartAlign = (align) => align === "left" || align === "top";
+var tooltipClosedTransform = (props) => ({
   top: css6`
-      bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
-      ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"}
+      transform: translateY(${props.theme.styles.gap}px);
    `,
   bottom: css6`
-      top: calc(100% + ${props.gap}px + ${props.arrowSize}px);
-      ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"};
+      transform: translateY(-${props.theme.styles.gap}px);
    `,
   left: css6`
-      ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
-      right: calc(100% + ${props.gap}px + ${props.arrowSize}px);
+      transform: translateX(${props.theme.styles.gap}px);
    `,
   right: css6`
-      ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
-      left: calc(100% + ${props.gap}px + ${props.arrowSize}px);
+      transform: translateX(-${props.theme.styles.gap}px);
    `
 });
-var tooltipPositionStyle = (props) => ({
-  top: {
-    opened: css6`
-         transform: translateX(${props.align === "center" ? "-50%" : "0"});
-      `,
-    closed: css6`
-         transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(${props.theme.styles.gap}px);
-      `
-  },
-  bottom: {
-    opened: css6`
-         transform: translateX(${props.align === "center" ? "-50%" : "0"});
-      `,
-    closed: css6`
-         transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(-${props.theme.styles.gap}px);
-      `
-  },
-  left: {
-    opened: css6`
-         transform: translateY(${props.align === "center" ? "-50%" : "0"});
-      `,
-    closed: css6`
-         transform: translateX(${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
-      `
-  },
-  right: {
-    opened: css6`
-         transform: translateY(${props.align === "center" ? "-50%" : "0"});
-      `,
-    closed: css6`
-         transform: translateX(-${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
-      `
-  }
-});
 var TooltipContainer = styled13.div.withConfig({
-  shouldForwardProp: (prop) => !["theme", "position", "align", "pointerEvents", "withArrow", "arrowSize", "isOpen", "gap"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "position", "pointerEvents", "isOpen"].includes(prop)
 })`
-   position: absolute;
+   position: fixed;
+   top: 0;
+   left: 0;
    opacity: ${(props) => props.isOpen ? 1 : 0};
    pointer-events: ${(props) => props.isOpen ? props.pointerEvents : "none"};
    transition: ${(props) => props.theme.styles.transition};
+   transition-property: opacity, transform;
    z-index: 1000;
 
-   ${(props) => tooltipContainerStyle(props)[props.position]}
-
-   ${(props) => props.isOpen ? tooltipPositionStyle(props)[props.position].opened : tooltipPositionStyle(props)[props.position].closed}
+   ${(props) => props.isOpen ? "transform: none;" : tooltipClosedTransform(props)[props.position]}
 `;
 var arrowStyle = (props, borderWidth) => ({
   top: {
@@ -7412,6 +7387,7 @@ 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);
@@ -7422,31 +7398,15 @@ var TooltipComponent = forwardRef16(function Tooltip({
   const gap = theme2.styles.gap / 2;
   const outsideScreenGap = theme2.styles.gap / 2;
   const totalGap = arrowSize + gap;
+  const arrowSideSpace = theme2.styles.borderRadius;
+  const arrowAnchorOffset = withArrow ? arrowSideSpace + arrowSize : 0;
   const openTooltip = useCallback16(() => {
     if (disabled) return;
     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 +7437,36 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [trigger, isOpen, closeTooltip]
   );
+  const updateContainerPosition = useCallback16(() => {
+    if (!wrapperRef.current || !contentRef.current || !tooltipContainerRef.current) return;
+    const wrapperRect = wrapperRef.current.getBoundingClientRect();
+    const contentWidth2 = contentRef.current.offsetWidth;
+    const contentHeight = contentRef.current.offsetHeight;
+    const getCrossAxisStart = (wrapperStart, wrapperSize, contentSize) => {
+      const wrapperCenter = wrapperStart + wrapperSize / 2;
+      if (align === "center") return wrapperCenter - contentSize / 2;
+      if (isStartAlign(align)) return arrowAnchorOffset ? wrapperCenter - arrowAnchorOffset : wrapperStart;
+      return arrowAnchorOffset ? wrapperCenter + arrowAnchorOffset - contentSize : wrapperStart + wrapperSize - contentSize;
+    };
+    let expectedLeft;
+    let expectedTop;
+    if (position === "top" || position === "bottom") {
+      expectedTop = position === "top" ? wrapperRect.top - totalGap - contentHeight : wrapperRect.bottom + totalGap;
+      expectedLeft = getCrossAxisStart(wrapperRect.left, wrapperRect.width, contentWidth2);
+    } else {
+      expectedLeft = position === "left" ? wrapperRect.left - totalGap - contentWidth2 : wrapperRect.right + totalGap;
+      expectedTop = getCrossAxisStart(wrapperRect.top, wrapperRect.height, contentHeight);
+    }
+    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);
+    tooltipContainerRef.current.style.left = `${expectedLeft + shiftX}px`;
+    tooltipContainerRef.current.style.top = `${expectedTop + shiftY}px`;
+  }, [position, align, totalGap, outsideScreenGap, arrowAnchorOffset]);
   useEffect13(() => {
     if (trigger === "click") {
       document.addEventListener("mousedown", onClickOutside);
@@ -7489,6 +7479,16 @@ var TooltipComponent = forwardRef16(function Tooltip({
     if (!disabled) return;
     closeTooltip();
   }, [disabled]);
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    updateContainerPosition();
+    window.addEventListener("scroll", updateContainerPosition, true);
+    window.addEventListener("resize", updateContainerPosition);
+    return () => {
+      window.removeEventListener("scroll", updateContainerPosition, true);
+      window.removeEventListener("resize", updateContainerPosition);
+    };
+  }, [isOpen, updateContainerPosition]);
   useImperativeHandle3(ref, () => {
     return {
       isOpen,
@@ -7505,6 +7505,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
       onClick: onClickHolder,
       onMouseEnter,
       onMouseLeave,
+      ref: wrapperRef,
       children: [
         /* @__PURE__ */ jsx25(
           Div_default,
@@ -7516,61 +7517,60 @@ var TooltipComponent = forwardRef16(function Tooltip({
             children
           }
         ),
-        /* @__PURE__ */ jsx25(
-          TooltipContainer,
-          {
-            theme: theme2,
-            position,
-            align,
-            pointerEvents: contentPointerEvents,
-            withArrow,
-            arrowSize,
-            gap,
-            isOpen,
-            role: "tooltip",
-            ref: tooltipContainerRef,
-            children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs21(Div_default, { position: "relative", ref: contentRef, children: [
-              /* @__PURE__ */ jsx25(
-                Div_default.box,
-                {
-                  position: "relative",
-                  width: contentWidth,
-                  minWidth: contentMinWidth,
-                  backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
-                  boxShadow: "0px 10px 20px #00000020",
-                  paddingBlock: contentPaddingBlock ?? (isSmall ? theme2.styles.gap / 2 : theme2.styles.gap),
-                  paddingInline: contentPaddingInline ?? (asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space),
-                  overflow: asContextMenu ? "hidden" : void 0,
-                  children: content
-                }
-              ),
-              /* @__PURE__ */ jsx25(
-                Div_default,
-                {
-                  position: "absolute",
-                  width: position === "left" || position === "right" ? totalGap : "100%",
-                  height: position === "top" || position === "bottom" ? totalGap : "100%",
-                  top: position === "top" ? "100%" : position === "bottom" ? void 0 : 0,
-                  bottom: position === "bottom" ? "100%" : position === "top" ? void 0 : 0,
-                  left: position === "left" ? "100%" : position === "right" ? void 0 : 0,
-                  right: position === "right" ? "100%" : position === "left" ? void 0 : 0,
-                  borderTopLeftRadius: 999,
-                  borderTopRightRadius: 999
-                }
-              ),
-              withArrow && /* @__PURE__ */ jsx25(
-                Arrow,
-                {
-                  position,
-                  align,
-                  sideSpace: theme2.styles.borderRadius,
-                  size: arrowSize,
-                  color: backgroundColor ?? theme2.colors.backgroundContent,
-                  isOpen
-                }
-              )
-            ] })
-          }
+        createPortal2(
+          /* @__PURE__ */ jsx25(
+            TooltipContainer,
+            {
+              theme: theme2,
+              position,
+              pointerEvents: contentPointerEvents,
+              isOpen,
+              role: "tooltip",
+              ref: tooltipContainerRef,
+              children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs21(Div_default, { position: "relative", ref: contentRef, children: [
+                /* @__PURE__ */ jsx25(
+                  Div_default.box,
+                  {
+                    position: "relative",
+                    width: contentWidth,
+                    minWidth: contentMinWidth,
+                    backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
+                    boxShadow: "0px 10px 20px #00000020",
+                    paddingBlock: contentPaddingBlock ?? (isSmall ? theme2.styles.gap / 2 : theme2.styles.gap),
+                    paddingInline: contentPaddingInline ?? (asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space),
+                    overflow: asContextMenu ? "hidden" : void 0,
+                    children: content
+                  }
+                ),
+                /* @__PURE__ */ jsx25(
+                  Div_default,
+                  {
+                    position: "absolute",
+                    width: position === "left" || position === "right" ? totalGap : "100%",
+                    height: position === "top" || position === "bottom" ? totalGap : "100%",
+                    top: position === "top" ? "100%" : position === "bottom" ? void 0 : 0,
+                    bottom: position === "bottom" ? "100%" : position === "top" ? void 0 : 0,
+                    left: position === "left" ? "100%" : position === "right" ? void 0 : 0,
+                    right: position === "right" ? "100%" : position === "left" ? void 0 : 0,
+                    borderTopLeftRadius: 999,
+                    borderTopRightRadius: 999
+                  }
+                ),
+                withArrow && /* @__PURE__ */ jsx25(
+                  Arrow,
+                  {
+                    position,
+                    align,
+                    sideSpace: arrowSideSpace,
+                    size: arrowSize,
+                    color: backgroundColor ?? theme2.colors.backgroundContent,
+                    isOpen
+                  }
+                )
+              ] })
+            }
+          ),
+          document.body
         )
       ]
     }