@canvas-components/react-list-table 0.3.23 → 0.3.24

package/dist/index.js

@@ -3799,6 +3799,14 @@ function ReactTableDangerConfirmView(props) {
 }
 function ReactTableTooltipView(props) {
   const { request } = props;
+  const tooltipRef = useRef(null);
+  useLayoutEffect(() => {
+    const tooltip = tooltipRef.current;
+    if (!tooltip || !request || typeof window === "undefined") return;
+    const width = tooltip.getBoundingClientRect().width;
+    const viewportWidth = window.innerWidth;
+    tooltip.style.left = `${Math.max(8, Math.min(request.x - width / 2, viewportWidth - width - 8))}px`;
+  }, [request]);
   if (!request) {
     return null;
   }
@@ -3812,8 +3820,7 @@ function ReactTableTooltipView(props) {
     position: "fixed",
     left: request.x,
     top: request.y,
-    transform: "translate(-50%, 0)",
-    maxWidth,
+    maxWidth: request.variant === "resize" ? "calc(100vw - 16px)" : `min(${maxWidth}px, calc(100vw - 16px))`,
     padding: `${paddingBlock}px ${paddingInline}px`,
     borderRadius,
     background: request.variant === "error" ? "#ffffff" : "rgba(17, 24, 39, 0.92)",
@@ -3824,10 +3831,12 @@ function ReactTableTooltipView(props) {
     border: request.variant === "error" ? "1px solid rgba(255, 77, 79, 0.2)" : "none",
     pointerEvents: "none",
     zIndex: 1200,
-    whiteSpace: "pre-wrap",
-    wordBreak: "break-word"
+    whiteSpace: request.variant === "resize" ? "nowrap" : "pre-wrap",
+    wordBreak: "break-word",
+    overflow: "hidden",
+    textOverflow: request.variant === "resize" ? "ellipsis" : void 0
   };
-  return /* @__PURE__ */ jsx("div", { style, children: request.content });
+  return /* @__PURE__ */ jsx("div", { ref: tooltipRef, style, children: request.content });
 }
 function ToolbarIcon(props) {
   const { path, ...svgProps } = props;