@sustaina/shared-ui 1.29.0 → 1.29.1

package/dist/index.mjs

@@ -9784,27 +9784,51 @@ var CropperModal = ({
     }
   );
 };
-var Truncated = ({ children, className, ellipsis = true, as = "p", style }) => {
+var Truncated = ({
+  children,
+  className,
+  ellipsis = true,
+  as = "p",
+  style,
+  tooltipProps,
+  tooltipContentProps
+}) => {
   const elementRef = useRef(null);
   const [open, setOpen] = useState(false);
   const [isTruncated, setIsTruncated] = useState(false);
   const Comp = as;
   const normalizedChildren = typeof children === "string" ? children.replace(/>/g, ">\u200B") : children;
+  const lineClampLines = typeof ellipsis === "number" ? ellipsis : typeof ellipsis === "object" ? ellipsis?.lineClamp ?? 3 : null;
   useEffect(() => {
     const el = elementRef.current;
     if (!el) return;
-    const checkTruncate = debounce(() => {
-      const overflowX = el.scrollWidth > el.clientWidth;
-      const overflowY = el.scrollHeight > el.clientHeight;
-      setIsTruncated(overflowX || overflowY);
-    }, 300);
-    const resizeObserver = new ResizeObserver(checkTruncate);
+    const measure = () => {
+      if (!ellipsis) {
+        setIsTruncated(false);
+        return;
+      }
+      const rect = el.getBoundingClientRect();
+      const width = el.clientWidth || el.offsetWidth || rect.width;
+      const height = el.clientHeight || el.offsetHeight || rect.height;
+      if (!width || !height) {
+        setIsTruncated(false);
+        return;
+      }
+      const epsilon = 1;
+      const overflowWidth = el.scrollWidth - width > epsilon;
+      const overflowHeight = el.scrollHeight - height > epsilon;
+      setIsTruncated(overflowWidth || overflowHeight);
+    };
+    const resizeObserver = new ResizeObserver(() => requestAnimationFrame(measure));
     resizeObserver.observe(el);
+    const mutationObserver = new MutationObserver(() => measure());
+    mutationObserver.observe(el, { childList: true, subtree: true, characterData: true });
+    requestAnimationFrame(measure);
     return () => {
       resizeObserver.disconnect();
+      mutationObserver.disconnect();
     };
-  }, []);
-  const lineClampLines = typeof ellipsis === "number" ? ellipsis : typeof ellipsis === "object" ? ellipsis.lineClamp ?? 3 : null;
+  }, [children, ellipsis, lineClampLines]);
   const truncationClass = useMemo(() => {
     if (!ellipsis) return "";
     if (typeof ellipsis === "number") return `line-clamp-${ellipsis}`;
@@ -9823,14 +9847,20 @@ var Truncated = ({ children, className, ellipsis = true, as = "p", style }) => {
   }, [lineClampLines, style]);
   const baseContent = /* @__PURE__ */ jsx(Comp, { ref: elementRef, className: cn(truncationClass, className), style: clampedStyle, children: normalizedChildren });
   let tooltipContent = normalizedChildren;
-  let tooltipSide = "top";
   if (typeof ellipsis === "object") {
     tooltipContent = ellipsis?.content ?? normalizedChildren;
-    tooltipSide = ellipsis?.side ?? "top";
   }
+  const {
+    className: tooltipContentClassName,
+    arrowClassName: tooltipArrowClassName,
+    side: tooltipContentSide,
+    ...tooltipContentRest
+  } = tooltipContentProps ?? {};
+  const tooltipSide = (typeof ellipsis === "object" ? ellipsis?.side : void 0) ?? tooltipContentSide ?? "top";
   return /* @__PURE__ */ jsxs(
     Tooltip2,
     {
+      ...tooltipProps,
       open,
       onOpenChange: (open2) => {
         setOpen(isTruncated && open2);
@@ -9841,8 +9871,12 @@ var Truncated = ({ children, className, ellipsis = true, as = "p", style }) => {
           TooltipContent2,
           {
             side: tooltipSide,
-            className: cn("text-white bg-[#8B8B8B] max-w-md wrap-break-word shadow-lg"),
-            arrowClassName: "bg-[#8B8B8B] fill-[#8B8B8B]",
+            className: cn(
+              "text-white bg-[#8B8B8B] max-w-xs sm:max-w-md wrap-break-word shadow-lg",
+              tooltipContentClassName
+            ),
+            arrowClassName: cn("bg-[#8B8B8B] fill-[#8B8B8B]", tooltipArrowClassName),
+            ...tooltipContentRest,
             children: tooltipContent
           }
         )