@undp/design-system-react
Version:
React based design system for UNDP
876 lines (875 loc) • 27.1 kB
JavaScript
import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./createLucideIcon-JAvQ_M0R.js";
import { Button as n } from "./Button.js";
import * as r from "react";
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
var s = t("arrow-down", [["path", {
d: "M12 5v14",
key: "s699le"
}], ["path", {
d: "m19 12-7 7-7-7",
key: "1idqje"
}]]);
//#endregion
//#region node_modules/@shadcn/react/dist/message-scroller/index.js
function c({ defaultTagName: e, props: t, render: n, state: i = {}, stateAttributesMapping: a }) {
let o = l(u(i, a), t);
if (!n) return r.createElement(e, o);
if (typeof n == "function") return n(o, i);
if (!r.isValidElement(n)) return null;
let s = n.props, c = {
...l(o, s),
ref: p(o.ref, s.ref)
};
return r.cloneElement(n, c);
}
function l(...e) {
let t = {};
for (let n of e) {
if (!n) continue;
let e = n;
for (let n of Object.keys(e)) {
let r = e[n];
if (r === void 0) continue;
let i = t[n];
n === "className" ? t[n] = [i, r].filter(Boolean).join(" ") : n === "style" ? t[n] = {
...i,
...r
} : n === "ref" ? t[n] = p(i, r) : f(n) && typeof i == "function" && typeof r == "function" ? t[n] = d(r, i) : t[n] = r;
}
}
return t;
}
function u(e, t) {
let n = {};
for (let r of Object.keys(e)) {
let i = e[r], a = t?.[r]?.(i);
if (a) {
Object.assign(n, a);
continue;
}
if (r === "slot") {
n["data-slot"] = i;
continue;
}
let o = `data-${String(r).replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`)}`;
typeof i == "boolean" ? n[o] = i ? "" : void 0 : i != null && (n[o] = String(i));
}
return n;
}
function d(e, t) {
return function(n) {
e(n), n.defaultPrevented || t(n);
};
}
function f(e) {
return /^on[A-Z]/.test(e);
}
function p(...e) {
let t = e.filter(Boolean);
if (t.length !== 0) return (e) => {
for (let n of t) typeof n == "function" ? n(e) : n && (n.current = e);
};
}
var m = 8, h = 64, g = 0, _ = .5, v = 180, y = /* @__PURE__ */ new Set([
"ArrowDown",
"ArrowUp",
"End",
"Home",
"PageDown",
"PageUp",
" "
]), b = {
start: !1,
end: !1
}, x = {
currentAnchorId: null,
visibleMessageIds: []
};
function S({ content: e, scrollEdgeThreshold: t, spacer: n, viewport: r }) {
if (!r || !e) return b;
let i = N({
content: e,
spacer: n,
viewport: r
});
return {
start: r.scrollTop > t,
end: i - r.scrollTop - r.clientHeight > t
};
}
function C({ content: e, scrollMargin: t, scrollPreviousItemPeek: n, spacer: r, viewport: i, visibleMessageIds: a }) {
if (!e || !i) return x;
let o = i.getBoundingClientRect(), s = o.top + t + n, c = typeof IntersectionObserver > "u", l = [], u = null;
for (let t of w(e, r)) {
let e = t.dataset.messageId;
if (!e) continue;
let n = t.dataset.scrollAnchor === "true", r = n || c ? t.getBoundingClientRect() : null;
(c && r ? r.bottom > s && r.top < o.bottom : a.has(e)) && l.push(e), n && r && r.top <= s + _ && (u = e);
}
return l.length === 0 && u === null ? x : {
currentAnchorId: u,
visibleMessageIds: l
};
}
function w(e, t) {
return Array.from(e.children).filter((e) => e instanceof HTMLElement && e !== t);
}
function T(e, t) {
for (let n = t; n < e.length; n++) {
let t = e[n];
if (t?.dataset.scrollAnchor === "true") return t;
}
return null;
}
function E(e, t) {
for (let n of e) if (n.dataset.scrollAnchor === "true" && !t.has(n)) return n;
return null;
}
function ee(e, t) {
let n = 0;
for (let r = t; r < e.length; r++) if (e[r]?.dataset.scrollAnchor === "true" && (n += 1, n > 1)) return !0;
return !1;
}
function D(e) {
for (let t = e.length - 1; t >= 0; t--) {
let n = e[t];
if (n?.dataset.scrollAnchor === "true") return n;
}
return null;
}
function O({ content: e, spacer: t, viewport: n }) {
let r = n.getBoundingClientRect();
for (let n of w(e, t)) {
if (!n.dataset.messageId) continue;
let e = n.getBoundingClientRect();
if (e.bottom > r.top && e.top < r.bottom) return n;
}
return null;
}
function k({ align: e, element: t, scrollMargin: n, spacer: r, viewport: i }) {
let a = A(t, i), o = t.getBoundingClientRect().height, s = ne(r);
if (e === "center") {
let e = Math.max(0, i.clientHeight - s.start - s.end);
return a - s.start - (e - o) / 2 - n;
}
if (e === "end") return a - i.clientHeight + o + s.end + n;
if (e === "nearest") {
let e = a + o, t = i.scrollTop + s.start, r = i.scrollTop + i.clientHeight - s.end;
return a >= t && e <= r ? i.scrollTop : a < t ? a - s.start - n : e - i.clientHeight + s.end + n;
}
return a - s.start - n;
}
function A(e, t) {
let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
return n.top - r.top + t.scrollTop;
}
function j(e, t) {
return e.getBoundingClientRect().top - t.getBoundingClientRect().top;
}
function M({ content: e, scrollTop: t, spacer: n, viewport: r }) {
let i = N({
content: e,
spacer: n,
viewport: r
});
return t + r.clientHeight - i;
}
function N({ content: e, spacer: t, viewport: n }) {
let r = w(e, t), i = P(e), a = n.getBoundingClientRect(), o = n.scrollTop, s = i.start + i.end;
for (let e of r) {
let t = e.getBoundingClientRect();
s = Math.max(s, t.bottom - a.top + o + i.end);
}
return s;
}
function te(e) {
return Math.max(0, e.scrollHeight - e.clientHeight);
}
function P(e) {
let t = window.getComputedStyle(e);
return {
end: F(t.paddingBlockEnd || t.paddingBottom),
start: F(t.paddingBlockStart || t.paddingTop)
};
}
function ne(e) {
let t = e?.parentElement;
return t ? P(t) : {
end: 0,
start: 0
};
}
function re(e) {
if (!e) return 0;
let t = window.getComputedStyle(e);
return F(t.rowGap === "normal" ? t.gap : t.rowGap);
}
function F(e) {
if (!e) return 0;
let t = Number.parseFloat(e);
return Number.isFinite(t) ? t : 0;
}
function ie({ refs: e, commitScrollState: t, scheduleStateCommit: n, scheduleVisibilitySync: i }) {
let { streamingTurnRef: a, autoScrollRef: o, autoscrollingRef: s, autoscrollingTimeoutRef: c, contentRef: l, defaultScrollPositionAppliedRef: u, itemCountRef: d, messageElementsRef: f, modeRef: p, pendingScrollToMessageRef: m, prependRestoreRef: h, scrollMarginRef: g, scrollPreviousItemPeekRef: y, spacerGapRef: b, spacerHeightRef: x, spacerRef: S, viewportRef: C } = e, w = r.useCallback((e) => {
c.current !== null && (window.clearTimeout(c.current), c.current = null), s.current !== e && (s.current = e, t()), e && (c.current = window.setTimeout(() => {
c.current = null, s.current = !1, t();
}, v));
}, [t]), T = r.useCallback((e) => {
let t = S.current;
if (!t) return;
let n = Math.max(0, Math.ceil(e));
x.current !== n && (x.current = n, t.hidden = n === 0, t.style.height = `${n}px`, t.style.marginTop = n > 0 ? `${-b.current}px` : "");
}, []), E = r.useCallback((e, { behavior: r = "auto", autoscrolling: i = !1 } = {}) => {
let a = C.current;
if (!a) return;
let o = Math.max(0, e);
if (Math.abs(a.scrollTop - o) <= _) {
a.scrollTop = o, t();
return;
}
i && w(!0), a.scrollTo({
top: o,
behavior: r
}), n();
}, [
t,
n,
w
]), ee = r.useCallback(({ behavior: e = "auto" } = {}) => C.current ? (T(0), a.current = null, p.current = "free-scrolling", E(0, { behavior: e }), i(), !0) : !1, [
i,
E,
T
]), D = r.useCallback(({ behavior: e = "auto" } = {}) => {
let t = C.current;
return t ? (T(0), a.current = null, p.current = o.current ? "following-bottom" : "free-scrolling", E(te(t), {
autoscrolling: !0,
behavior: e
}), i(), !0) : !1;
}, [
i,
E,
T
]), O = r.useCallback((e, { align: t = "start", behavior: n = "auto", scrollMargin: r = g.current } = {}, { keepPreviousPeek: o = !1 } = {}) => {
let s = l.current, c = C.current;
if (!s || !c || !s.contains(e)) return !1;
let u = k({
align: t,
element: e,
scrollMargin: o ? r + y.current : r,
spacer: S.current,
viewport: c
}), d = M({
content: s,
scrollTop: u,
spacer: S.current,
viewport: c
});
return T(d), h.current = {
element: e,
viewportTop: j(e, c)
}, p.current = o ? "anchored-to-message" : "settling-jump", a.current = o ? e : null, E(u, { behavior: n }), i(), !0;
}, [
i,
E,
T
]), A = r.useCallback(() => {
let e = a.current;
return !e || !e.isConnected || p.current !== "anchored-to-message" ? !1 : O(e, { align: "start" }, { keepPreviousPeek: !0 });
}, [O]), N = r.useCallback((e, t) => {
let n = f.current.get(e);
return n ? (u.current = !0, O(n, t) ? (m.current = null, !0) : (m.current = {
messageId: e,
options: t
}, !0)) : d.current === 0 ? (m.current = {
messageId: e,
options: t
}, u.current = !0, !0) : !1;
}, [O]);
return {
flushPendingScrollToMessage: r.useCallback(() => {
let e = m.current;
if (!e) return !1;
let t = f.current.get(e.messageId);
return !t || !O(t, e.options) ? !1 : (m.current = null, u.current = !0, !0);
}, [O]),
reanchorToAnchoredMessage: A,
scrollToElement: O,
scrollToEnd: D,
scrollToMessage: N,
scrollToStart: ee
};
}
function ae(e, t) {
let n = e, r = /* @__PURE__ */ new Set();
return {
getSnapshot: () => n,
hasListeners: () => r.size > 0,
setSnapshot: (e) => {
t(n, e) || (n = e, r.forEach((e) => e()));
},
subscribe: (e, t, n) => {
let i = r.size === 0;
return r.add(e), i && t?.(), () => {
r.delete(e), r.size === 0 && n?.();
};
}
};
}
function oe(e, t) {
return ae(e, t);
}
function se() {
return ae(x, le);
}
function ce(e, t) {
return e.start === t.start && e.end === t.end;
}
function le(e, t) {
return e.currentAnchorId !== t.currentAnchorId || e.visibleMessageIds.length !== t.visibleMessageIds.length ? !1 : e.visibleMessageIds.every((e, n) => e === t.visibleMessageIds[n]);
}
function ue({ autoScroll: e, scrollEdgeThreshold: t, scrollMargin: n, scrollPreviousItemPeek: i }) {
let a = r.useRef(e), o = r.useRef(!1), s = r.useRef(null), c = r.useRef(!1), l = r.useRef(t), u = r.useRef(0), d = r.useRef(null), f = r.useRef(0), p = r.useRef(e ? "following-bottom" : "free-scrolling"), m = r.useRef(/* @__PURE__ */ new Map()), h = r.useRef(null), g = r.useRef(null), _ = r.useRef(null), v = r.useRef(i), y = r.useRef(!0), x = r.useRef(null), S = r.useRef(n), C = r.useRef(null), w = r.useRef(0), T = r.useRef(0), E = r.useRef(null), ee = r.useRef(null), D = r.useRef(null), O = r.useRef(null), k = r.useRef(null), A = r.useRef(null), j = r.useRef(null), M = r.useRef(null), N = r.useRef(/* @__PURE__ */ new Set()), te = r.useRef(/* @__PURE__ */ new WeakSet());
return D.current === null && (D.current = oe(b, ce)), M.current === null && (M.current = se()), a.current = e, l.current = t, S.current = n, v.current = i, {
autoScrollRef: a,
autoscrollingRef: o,
autoscrollingTimeoutRef: O,
streamingTurnRef: _,
contentRef: s,
defaultScrollPositionAppliedRef: c,
firstItemRef: d,
itemCountRef: u,
lastScrollTopRef: f,
messageElementsRef: m,
modeRef: p,
pendingScrollFrameRef: C,
pendingScrollToMessageRef: h,
prependRestoreRef: g,
preserveScrollOnPrependRef: y,
rootRef: x,
scrollEdgeThresholdRef: l,
scrollMarginRef: S,
scrollPreviousItemPeekRef: v,
spacerGapRef: w,
spacerHeightRef: T,
spacerRef: E,
stateFrameRef: ee,
stateStore: D.current,
viewportRef: k,
visibilityFrameRef: A,
visibilityObserverRef: j,
visibilityStore: M.current,
visibleMessageIdsRef: N,
handledScrollAnchorsRef: te
};
}
function de(e, t) {
return r.useCallback((n) => {
e.current = n, n && t();
}, [e, t]);
}
function I({ autoScroll: e = !1, defaultScrollPosition: t = "end", scrollEdgeThreshold: n = m, scrollPreviousItemPeek: i = h, scrollMargin: a = g }) {
let o = ue({
autoScroll: e,
scrollEdgeThreshold: n,
scrollMargin: a,
scrollPreviousItemPeek: i
}), { streamingTurnRef: s, autoScrollRef: c, autoscrollingRef: l, autoscrollingTimeoutRef: u, contentRef: d, defaultScrollPositionAppliedRef: f, firstItemRef: p, itemCountRef: v, lastScrollTopRef: y, messageElementsRef: b, modeRef: k, pendingScrollFrameRef: M, pendingScrollToMessageRef: te, prependRestoreRef: P, preserveScrollOnPrependRef: ne, rootRef: F, scrollEdgeThresholdRef: ae, scrollMarginRef: oe, scrollPreviousItemPeekRef: se, spacerGapRef: ce, spacerHeightRef: le, spacerRef: I, stateFrameRef: L, stateStore: R, viewportRef: z, visibilityFrameRef: B, visibilityObserverRef: V, visibilityStore: H, visibleMessageIdsRef: U, handledScrollAnchorsRef: W } = o, fe = r.useRef(t);
fe.current !== t && (fe.current = t, f.current = !1);
let G = r.useCallback((e) => {
let t = F.current, n = z.current, r = [e.start && "start", e.end && "end"].filter(Boolean).join(" "), i = l.current;
for (let e of [t, n]) e && (r ? e.setAttribute("data-scrollable", r) : e.removeAttribute("data-scrollable"), e.toggleAttribute("data-autoscrolling", i));
}, []), pe = r.useCallback((e) => {
let t = z.current?.scrollTop ?? 0, n = t < y.current - _;
y.current = t, c.current && !e.end && k.current !== "settling-jump" && k.current !== "anchored-to-message" ? k.current = "following-bottom" : k.current === "following-bottom" && e.end && n && !l.current && (k.current = "free-scrolling");
}, []), K = r.useCallback(() => {
let e = S({
content: d.current,
scrollEdgeThreshold: ae.current,
spacer: I.current,
viewport: z.current
});
pe(e);
let t = k.current === "following-bottom" ? {
...e,
end: !1
} : e;
G(t), R.setSnapshot(t);
}, [
pe,
R,
G
]), q = r.useCallback(() => {
L.current === null && (L.current = window.requestAnimationFrame(() => {
L.current = null, K();
}));
}, [K]), J = r.useCallback(() => {
H.hasListeners() && B.current === null && (B.current = window.requestAnimationFrame(() => {
B.current = null, H.hasListeners() && H.setSnapshot(C({
content: d.current,
scrollMargin: oe.current,
scrollPreviousItemPeek: se.current,
spacer: I.current,
viewport: z.current,
visibleMessageIds: U.current
}));
}));
}, [H]), { flushPendingScrollToMessage: Y, reanchorToAnchoredMessage: me, scrollToElement: X, scrollToEnd: Z, scrollToMessage: he, scrollToStart: Q } = ie({
refs: o,
commitScrollState: K,
scheduleStateCommit: q,
scheduleVisibilitySync: J
}), ge = r.useCallback(() => {
let e = P.current, t = z.current;
if (!e || !t || !e.element.isConnected) return !1;
let n = j(e.element, t) - e.viewportTop;
return Math.abs(n) <= _ ? !1 : (t.scrollTop += n, e.viewportTop = j(e.element, t), q(), J(), !0);
}, [q, J]), $ = r.useCallback(() => {
let e = d.current, t = z.current;
if (!e || !t) {
P.current = null;
return;
}
let n = O({
content: e,
spacer: I.current,
viewport: t
});
P.current = n ? {
element: n,
viewportTop: j(n, t)
} : null;
}, []), _e = r.useCallback(() => {
M.current === null && (M.current = window.requestAnimationFrame(() => {
M.current = null, Y() && $();
}));
}, [$, Y]), ve = r.useCallback(() => {
if (!t || f.current || v.current === 0) return !1;
let e = !1;
if (t === "last-anchor") {
let t = d.current, n = z.current, r = t && n ? D(w(t, I.current)) : null;
if (!t || !n || !r) e = Z({ behavior: "auto" });
else {
let i = A(r, n);
e = N({
content: t,
spacer: I.current,
viewport: n
}) - i <= n.clientHeight ? Z({ behavior: "auto" }) : X(r, { align: "start" }, { keepPreviousPeek: !0 });
}
} else e = t === "end" ? Z({ behavior: "auto" }) : Q({ behavior: "auto" });
return e ? (f.current = !0, !0) : !1;
}, [
t,
X,
Z,
Q
]), ye = r.useCallback(() => {
let e = d.current;
if (!e) return;
let t = w(e, I.current), n = v.current, r = p.current;
v.current = t.length, p.current = t[0] ?? null, (() => {
if (Y()) return;
if (n === 0) {
if (ve() || t.length > 0 && c.current && Z({ behavior: "auto" })) return;
K(), J();
return;
}
let e = r ? t.indexOf(r) : -1;
if (ne.current && e > 0) {
ge();
return;
}
if (t.length > n) {
let e = T(t, n);
if (e) {
if (c.current && k.current === "following-bottom" && ee(t, n)) {
Z({ behavior: "auto" });
return;
}
X(e, { align: "start" }, { keepPreviousPeek: !0 }), W.current.add(e);
return;
}
}
if (t.length === n) {
let e = E(t, W.current);
if (e) {
X(e, { align: "start" }, { keepPreviousPeek: !0 }), W.current.add(e);
return;
}
}
k.current === "following-bottom" && c.current ? Z({ behavior: "auto" }) : (K(), J());
})(), $();
}, [
ve,
$,
K,
Y,
ge,
J,
X,
Z
]), be = r.useCallback(() => {
if (k.current === "following-bottom" && c.current) {
Z({ behavior: "auto" });
return;
}
let e = le.current;
if (me()) {
c.current && e > 0 && le.current === 0 && Z({ behavior: "auto" });
return;
}
q(), J();
}, [
me,
q,
J,
Z
]), xe = r.useCallback(() => {
let e = z.current;
if (!(!e || !H.hasListeners())) {
if (typeof IntersectionObserver > "u") {
J();
return;
}
V.current ||= new IntersectionObserver((e) => {
for (let t of e) {
let e = t.target.dataset.messageId;
e && (t.isIntersecting ? U.current.add(e) : U.current.delete(e));
}
J();
}, {
root: e,
rootMargin: `${-(oe.current + se.current)}px 0px 0px 0px`,
threshold: [
0,
.01,
.5,
1
]
}), b.current.forEach((e) => {
V.current?.observe(e);
}), J();
}
}, [J, H]), Se = r.useCallback(() => {
B.current !== null && (window.cancelAnimationFrame(B.current), B.current = null), V.current?.disconnect(), V.current = null, U.current.clear(), H.setSnapshot(x);
}, [H]), Ce = r.useCallback((e, t, n) => {
if (t) {
b.current.set(e, t), V.current?.observe(t), J(), te.current?.messageId === e && _e();
return;
}
n && b.current.get(e) === n && (b.current.delete(e), U.current.delete(e), V.current?.unobserve(n), J());
}, [_e, J]), we = r.useCallback(() => {
(k.current === "following-bottom" || k.current === "anchored-to-message" || k.current === "settling-jump") && (s.current = null, k.current = "free-scrolling");
}, []), Te = r.useCallback(() => G(R.getSnapshot()), [R, G]), Ee = de(F, Te), De = de(z, Te), Oe = r.useCallback((e) => {
d.current = e;
}, []), ke = r.useCallback((e) => {
I.current = e, ce.current = re(e?.parentElement ?? null);
}, []), Ae = r.useCallback(() => {
K(), J(), $();
}, [
$,
K,
J
]), je = r.useMemo(() => ({
handleContentChange: ye,
handleResize: be,
observeVisibility: xe,
preserveScrollOnPrependRef: ne,
scrollToEnd: Z,
scrollToMessage: he,
scrollToStart: Q,
setContentElement: Oe,
setRootElement: Ee,
setSpacerElement: ke,
setViewportElement: De,
stateStore: R,
syncAfterScroll: Ae,
unobserveVisibility: Se,
userScrollIntent: we,
viewportRef: z,
visibilityStore: H
}), [
ye,
be,
xe,
Z,
he,
Q,
Oe,
Ee,
ke,
De,
R,
Ae,
Se,
we,
H
]);
return r.useLayoutEffect(() => {
ve();
}, [ve]), r.useEffect(() => () => {
L.current !== null && (window.cancelAnimationFrame(L.current), L.current = null), B.current !== null && (window.cancelAnimationFrame(B.current), B.current = null), u.current !== null && (window.clearTimeout(u.current), u.current = null), M.current !== null && (window.cancelAnimationFrame(M.current), M.current = null), V.current?.disconnect(), V.current = null;
}, []), r.useLayoutEffect(() => {
if (e && k.current === "following-bottom" && v.current > 0) {
Z({ behavior: "auto" });
return;
}
K();
}, [
e,
K,
Z
]), {
context: je,
registerMessage: Ce
};
}
function L(e) {
let t = r.useRef(e);
return t.current = e, t;
}
var R = r.createContext(null), z = r.createContext(null);
function B() {
let e = r.useContext(R);
if (!e) throw Error("useMessageScroller must be used within a MessageScroller.");
return e;
}
function V() {
let e = r.useContext(z);
if (!e) throw Error("MessageScrollerItem must be used within a MessageScroller.");
return e;
}
function H() {
let { scrollToEnd: e, scrollToMessage: t, scrollToStart: n } = B();
return r.useMemo(() => ({
scrollToEnd: e,
scrollToMessage: t,
scrollToStart: n
}), [
e,
t,
n
]);
}
function U() {
let { stateStore: e } = B();
return r.useSyncExternalStore(e.subscribe, e.getSnapshot, e.getSnapshot);
}
function W() {
let { observeVisibility: e, unobserveVisibility: t, visibilityStore: n } = B(), i = r.useCallback((r) => n.subscribe(r, e, t), [
e,
t,
n
]);
return r.useSyncExternalStore(i, n.getSnapshot, n.getSnapshot);
}
function fe({ autoScroll: e = !1, children: t, defaultScrollPosition: n = "end", scrollEdgeThreshold: r, scrollPreviousItemPeek: i, scrollMargin: o }) {
let { context: s, registerMessage: c } = I({
autoScroll: e,
defaultScrollPosition: n,
scrollEdgeThreshold: r,
scrollPreviousItemPeek: i,
scrollMargin: o
});
return a(R.Provider, {
value: s,
children: a(z.Provider, {
value: c,
children: t
})
});
}
function G({ children: e, ...t }) {
let { setRootElement: n } = B();
return a("div", {
ref: n,
...t,
children: e
});
}
function pe({ "aria-label": e, children: t, onKeyDown: n, onScroll: i, onTouchMove: o, onWheel: s, preserveScrollOnPrepend: c = !0, ref: l, role: u, tabIndex: d, ...f }) {
let { handleResize: m, preserveScrollOnPrependRef: h, setViewportElement: g, syncAfterScroll: _, userScrollIntent: v, viewportRef: b } = B();
h.current = c;
let x = r.useCallback((e) => {
g(e), p(l)?.(e);
}, [l, g]);
function S(e) {
_(), i?.(e);
}
function C(e) {
v(), s?.(e);
}
function w(e) {
v(), o?.(e);
}
function T(e) {
y.has(e.key) && v(), n?.(e);
}
return r.useEffect(() => {
let e = b.current;
if (!e || typeof ResizeObserver > "u") return;
let t = 0, n = new ResizeObserver(() => {
window.cancelAnimationFrame(t), t = window.requestAnimationFrame(m);
});
return n.observe(e), () => {
window.cancelAnimationFrame(t), n.disconnect();
};
}, [m, b]), a("div", {
ref: x,
role: u ?? "region",
"aria-label": e ?? "Messages",
tabIndex: d ?? 0,
onKeyDown: T,
onScroll: S,
onTouchMove: w,
onWheel: C,
...f,
children: t
});
}
function K({ "aria-relevant": e, children: t, ref: n, role: i, spacerClassName: s, ...c }) {
let { handleContentChange: l, handleResize: u, setContentElement: d, setSpacerElement: f } = B(), m = r.useRef(null), h = r.useCallback((e) => {
m.current = e, d(e), p(n)?.(e);
}, [n, d]);
return r.useLayoutEffect(() => {
let e = m.current;
if (!e || (l(), typeof MutationObserver > "u")) return;
let t = new MutationObserver(() => {
l();
});
return t.observe(e, { childList: !0 }), () => t.disconnect();
}, [l]), r.useEffect(() => {
let e = m.current;
if (!e || typeof ResizeObserver > "u") return;
let t = 0, n = new ResizeObserver(() => {
window.cancelAnimationFrame(t), t = window.requestAnimationFrame(u);
});
return n.observe(e), () => {
window.cancelAnimationFrame(t), n.disconnect();
};
}, [u]), o("div", {
ref: h,
role: i ?? "log",
"aria-relevant": e ?? "additions",
...c,
children: [t, a("div", {
ref: f,
"aria-hidden": "true",
"data-message-scroller-spacer": "",
hidden: !0,
className: s
})]
});
}
function q({ messageId: e, ref: t, scrollAnchor: n = !1, ...i }) {
let o = V(), s = r.useRef(null);
return a("div", {
ref: r.useCallback((n) => {
let r = s.current;
s.current = n, e && o(e, n, r), p(t)?.(n);
}, [
e,
t,
o
]),
"data-message-id": e,
"data-scroll-anchor": n ? "true" : "false",
...i
});
}
function J({ behavior: e = "smooth", children: t, direction: n = "end", onClick: i, render: a, tabIndex: s, type: u = "button", ...d }) {
let { scrollToEnd: f, scrollToStart: p, stateStore: m } = B(), h = L(i), g = r.useCallback((e) => m.subscribe(e), [m]), _ = r.useCallback(() => {
let e = m.getSnapshot();
return n === "start" ? e.start : e.end;
}, [n, m]), v = r.useSyncExternalStore(g, _, _), y = r.useCallback((t) => {
v && (h.current?.(t), t.defaultPrevented || (t.currentTarget.blur(), n === "start" ? p({ behavior: e }) : f({ behavior: e })));
}, [
e,
n,
v,
h,
f,
p
]);
return c({
defaultTagName: "button",
props: l({
type: u,
inert: !v,
tabIndex: v ? s : -1,
children: t ?? o("span", { children: ["Scroll to ", n] }),
onClick: y
}, d),
render: a,
state: {
active: v,
direction: n
},
stateAttributesMapping: { active: (e) => ({ "data-active": e ? "true" : "false" }) }
});
}
var Y = {
Provider: fe,
Root: G,
Viewport: pe,
Content: K,
Item: q,
Button: J
};
//#endregion
//#region src/components/ui/message-scroller.tsx
function me(e) {
return /* @__PURE__ */ a(Y.Provider, { ...e });
}
function X({ className: t, ...n }) {
return /* @__PURE__ */ a(Y.Root, {
"data-slot": "message-scroller",
className: e("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", t),
...n
});
}
function Z({ className: t, ...n }) {
return /* @__PURE__ */ a(Y.Viewport, {
"data-slot": "message-scroller-viewport",
className: e("scroll-fade-b scrollbar-thin scrollbar-gutter-stable data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain contain-content", t),
...n
});
}
function he({ className: t, ...n }) {
return /* @__PURE__ */ a(Y.Content, {
"data-slot": "message-scroller-content",
className: e("flex h-max min-h-full flex-col gap-6", t),
...n
});
}
function Q({ className: t, scrollAnchor: n = !1, ...r }) {
return /* @__PURE__ */ a(Y.Item, {
"data-slot": "message-scroller-item",
scrollAnchor: n,
className: e("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", t),
...r
});
}
function ge({ direction: t = "end", className: r, children: c, render: l, variant: u = "primary", size: d = "xs", ...f }) {
return /* @__PURE__ */ a(Y.Button, {
"data-slot": "message-scroller-button",
"data-direction": t,
"data-variant": u,
"data-size": d,
direction: t,
className: e("absolute inset-s-1/2 -translate-x-1/2 border-border bg-surface text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-surface-hover data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:data-[active=false]:-translate-y-full data-[active=false]:pointer-events-none data-[direction=start]:top-4 data-[direction=end]:bottom-4 data-[active=true]:translate-y-0 data-[active=false]:scale-95 data-[active=true]:scale-100 data-[active=false]:opacity-0 data-[active=true]:opacity-100 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180", r),
render: l ?? /* @__PURE__ */ a(n, {
variant: u,
size: d
}),
...f,
children: c ?? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(s, {}), /* @__PURE__ */ a("span", {
className: "sr-only",
children: t === "end" ? "Scroll to end" : "Scroll to start"
})] })
});
}
//#endregion
export { me as a, W as c, Q as i, H as l, ge as n, Z as o, he as r, U as s, X as t };
//# sourceMappingURL=message-scroller-DGX7HgZO.js.map