@l3mpire/ui 2.26.2 → 2.26.3

package/dist/index.d.mts

@@ -104,8 +104,7 @@ interface TruncatedTextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
     children: string;
     /**
      * Optional explicit tooltip body. Defaults to `children`. Useful when the
-     * displayed string is formatted (e.g. with separators) but the tooltip
-     * should show a different form.
+     * displayed string is formatted but the tooltip should show a different form.
      */
     tooltip?: React.ReactNode;
     /** Hover delay before the tooltip opens (ms). */

package/dist/index.d.ts

@@ -104,8 +104,7 @@ interface TruncatedTextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
     children: string;
     /**
      * Optional explicit tooltip body. Defaults to `children`. Useful when the
-     * displayed string is formatted (e.g. with separators) but the tooltip
-     * should show a different form.
+     * displayed string is formatted but the tooltip should show a different form.
      */
     tooltip?: React.ReactNode;
     /** Hover delay before the tooltip opens (ms). */

package/dist/index.js

@@ -1314,20 +1314,39 @@ var React7 = __toESM(require("react"));
 var TooltipPrimitive2 = __toESM(require("@radix-ui/react-tooltip"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var TruncatedText = React7.forwardRef(
-  ({ children, tooltip, delayDuration = 300, className, ...props }, ref) => {
-    const innerRef = React7.useRef(null);
-    React7.useImperativeHandle(ref, () => innerRef.current);
+  ({ children, tooltip, delayDuration = 300, className, ...props }, forwardedRef) => {
+    const [el, setEl] = React7.useState(null);
     const [isTruncated, setIsTruncated] = React7.useState(false);
-    React7.useEffect(() => {
-      const el = innerRef.current;
+    const setRef = React7.useCallback(
+      (node) => {
+        setEl(node);
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef]
+    );
+    React7.useLayoutEffect(() => {
       if (!el) return;
       const check = () => setIsTruncated(el.scrollWidth > el.clientWidth);
       check();
       const ro = new ResizeObserver(check);
       ro.observe(el);
       return () => ro.disconnect();
-    }, [children]);
-    const span = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { ref: innerRef, className: cn("truncate", className), ...props, children });
+    }, [el, children]);
+    const span = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "span",
+      {
+        ref: setRef,
+        className: cn(
+          "inline-block max-w-full min-w-0 align-bottom truncate",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
     if (!isTruncated) return span;
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipPrimitive2.Provider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(TooltipPrimitive2.Root, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipPrimitive2.Trigger, { asChild: true, children: span }),