laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
101 lines (100 loc) • 3.62 kB
JavaScript
"use client";
import { jsx as e, jsxs as v } from "react/jsx-runtime";
import { useState as h, useRef as b, useCallback as j, useEffect as N } from "react";
import { cn as c } from "../../lib/utils.js";
import { Icon as B } from "./icon.js";
import { Popover as L, PopoverTrigger as W, PopoverContent as K } from "./popover.js";
import { Typo as T } from "./typo.js";
function H({
children: o,
text: a,
title: w,
popoverContent: f,
className: k = "",
wrapperClassName: x = "",
popoverClassName: z = "",
showButton: O = !0,
emptyFallback: R = "-"
}) {
const [p, C] = h(!1), [l, m] = h(!1), [P, E] = h(""), i = b(null), s = b(null), d = o !== void 0, t = a || P || (typeof o == "string" ? o : ""), D = d || typeof a == "string" && a.trim().length > 0, r = d || !!a || !!f || p, u = j(() => {
if (i.current) {
const { scrollWidth: n, clientWidth: I } = i.current, g = i.current.textContent?.trim() ?? "";
E(
(y) => y === g ? y : g
), C(n > I);
}
}, []);
return N(() => {
u(), i.current && typeof ResizeObserver < "u" && (s.current = new ResizeObserver(u), s.current.observe(i.current));
const n = () => u();
return window.addEventListener("resize", n), () => {
s.current && (s.current.disconnect(), s.current = null), window.removeEventListener("resize", n);
};
}, [t, u]), N(() => {
!r && l && m(!1);
}, [r, l]), !D && !t ? /* @__PURE__ */ e("div", { className: c(x, "text-muted-foreground"), children: R }) : /* @__PURE__ */ v(L, { open: l, onOpenChange: m, children: [
/* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ v(
"button",
{
type: "button",
className: c(
"group flex max-w-60 min-w-0 items-center gap-2 text-left",
r && "cursor-pointer",
x
),
disabled: !r,
"aria-label": r && t ? `Click to view full content: ${t}` : t || void 0,
onKeyDown: (n) => {
(n.key === "Enter" || n.key === " ") && r && (n.preventDefault(), m(!l));
},
children: [
/* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1", children: /* @__PURE__ */ e(
"div",
{
ref: i,
className: c(
"truncate whitespace-nowrap",
r && "group-hover:underline",
k
),
title: p ? t : void 0,
children: d ? o : t
}
) }),
p && O && /* @__PURE__ */ e(
"span",
{
className: c(
"text-d-muted-foreground flex shrink-0 items-center opacity-50 transition-opacity group-hover:opacity-100"
),
"aria-hidden": "true",
children: /* @__PURE__ */ e(B, { name: "Eye", size: "sm" })
}
)
]
}
) }),
/* @__PURE__ */ v(
K,
{
side: "top",
align: "start",
className: c("w-96", z),
children: [
w && /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(T, { variant: "caption", className: "w-full font-bold", children: w }) }),
/* @__PURE__ */ e("div", { className: "w-full", children: f || (d && !t ? /* @__PURE__ */ e("div", { className: "w-full min-w-0", children: o }) : /* @__PURE__ */ e(
T,
{
variant: "caption",
className: "w-full break-words whitespace-pre-wrap",
children: t
}
)) })
]
}
)
] });
}
export {
H as TruncatedCell
};