@slotted/react 0.1.0-beta.0 → 0.1.0-beta.10

package/dist/message-scroller-niUJ8RoL.js

@@ -0,0 +1,216 @@
+import { n as e, t } from "./icon-DjqSEQ-o.js";
+import { r as n } from "./i18n-DpW8lqJ1.js";
+import { keyedProps as r, withSelectorKey as i } from "@slotted/core/selector-key";
+import { createContext as a, useCallback as o, useContext as s, useEffect as c, useImperativeHandle as l, useRef as u, useState as d, useSyncExternalStore as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { messageScrollerMessages as g } from "@slotted/core/i18n";
+import { getLiveAnnouncer as _ } from "@slotted/core/live-announcer";
+import { createMessageScroller as v } from "@slotted/core/message-scroller";
+//#region src/message-scroller/message-scroller-defaults.tsx
+var y = a({
+	follow: !1,
+	defaultPosition: "last-anchor",
+	peek: 64,
+	scrollMargin: 0
+});
+function b() {
+	return s(y);
+}
+function x({ children: e, ...t }) {
+	let n = b();
+	return /* @__PURE__ */ m(y.Provider, {
+		value: {
+			follow: t.follow ?? n.follow,
+			defaultPosition: t.defaultPosition ?? n.defaultPosition,
+			peek: t.peek ?? n.peek,
+			scrollMargin: t.scrollMargin ?? n.scrollMargin
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/message-scroller/message-scroller.tsx
+var S = a(null);
+function C() {
+	let e = s(S);
+	if (e === null) throw Error("A MessageScroller part is rendered outside a MessageScroller.");
+	return e;
+}
+function w(e, t) {
+	typeof e == "function" ? e(t) : e != null && (e.current = t);
+}
+function T({ busy: e = !1, children: t, defaultPosition: i, edgeThreshold: a, follow: o, messages: s, onAnchorChange: p, onReachStart: h, onScrollableChange: y, peek: x, preserveOnPrepend: C, ref: w, render: T, scrollMargin: E, ...D }) {
+	let O = b(), k = n(g, s), A = i ?? O.defaultPosition, j = u({
+		onAnchorChange: p,
+		onReachStart: h,
+		onScrollableChange: y
+	});
+	j.current = {
+		onAnchorChange: p,
+		onReachStart: h,
+		onScrollableChange: y
+	};
+	let [M] = d(() => v({
+		defaultPosition: A,
+		onAnchorChange: (e, t) => j.current.onAnchorChange?.(e, t),
+		onReachStart: (e) => j.current.onReachStart?.(e),
+		onScrollableChange: (e) => j.current.onScrollableChange?.(e)
+	}));
+	c(() => {
+		M.update({
+			edgeThreshold: a,
+			follow: o ?? O.follow,
+			peek: x ?? O.peek,
+			preserveOnPrepend: C,
+			scrollMargin: E ?? O.scrollMargin
+		});
+	}, [
+		O.follow,
+		O.peek,
+		O.scrollMargin,
+		a,
+		M,
+		o,
+		x,
+		C,
+		E
+	]);
+	let [N, P] = d(null), [F, I] = d(null), [L, R] = d(null);
+	c(() => {
+		if (F !== null && L !== null) return M.connect({
+			content: L,
+			root: N,
+			viewport: F
+		});
+	}, [
+		L,
+		M,
+		N,
+		F
+	]);
+	let z = f(M.subscribe, M.getState, M.getState), B = u(e);
+	c(() => {
+		B.current !== e && (B.current = e, _().announce(k(e ? "busy" : "idle")));
+	}, [e, k]), l(w, () => ({
+		focus: () => F?.focus(),
+		get root() {
+			return N;
+		},
+		scrollToEnd: (e) => M.scrollToEnd(e),
+		scrollToMessage: (e, t) => M.scrollToMessage(e, t),
+		scrollToStart: (e) => M.scrollToStart(e)
+	}), [
+		M,
+		N,
+		F
+	]);
+	let V = {
+		busy: e,
+		defaultPosition: A,
+		registerContent: R,
+		registerViewport: I,
+		scrollToEnd: M.scrollToEnd,
+		scrollToMessage: M.scrollToMessage,
+		scrollToStart: M.scrollToStart,
+		state: z,
+		t: k
+	}, H = r({
+		...D,
+		children: t,
+		"data-part": "root",
+		"data-ui": "message-scroller",
+		ref: P
+	});
+	return /* @__PURE__ */ m(S.Provider, {
+		value: V,
+		children: T === void 0 ? /* @__PURE__ */ m("div", { ...H }) : T(H)
+	});
+}
+function E({ ref: e, render: t, ...n }) {
+	let i = C(), { registerViewport: a } = i, s = o((t) => {
+		a(t), w(e, t);
+	}, [e, a]), c = r({
+		"aria-label": i.t("label"),
+		role: "region",
+		tabIndex: 0,
+		...n,
+		"data-part": "viewport",
+		...i.defaultPosition === "start" ? {} : { "data-pending": "" },
+		ref: s
+	});
+	return t === void 0 ? /* @__PURE__ */ m("div", { ...c }) : t(c);
+}
+function D({ ref: e, render: t, ...n }) {
+	let i = C(), { registerContent: a } = i, s = o((t) => {
+		a(t), w(e, t);
+	}, [e, a]), c = r({
+		"aria-relevant": "additions",
+		role: "log",
+		...i.busy ? { "aria-busy": !0 } : {},
+		...n,
+		"data-part": "content",
+		ref: s
+	});
+	return t === void 0 ? /* @__PURE__ */ m("div", { ...c }) : t(c);
+}
+function O({ anchor: e, messageId: t, render: n, ...i }) {
+	let a = r({
+		...i,
+		...e ? { "data-anchor": "true" } : {},
+		...t === void 0 ? {} : { "data-message-id": t },
+		"data-part": "item"
+	});
+	return n === void 0 ? /* @__PURE__ */ m("div", { ...a }) : n(a);
+}
+function k({ children: e, render: t, sticky: n, ...i }) {
+	let a = r({
+		...i,
+		children: /* @__PURE__ */ m("span", { children: e }),
+		"data-part": "separator",
+		...n ? { "data-sticky": "" } : {}
+	});
+	return t === void 0 ? /* @__PURE__ */ m("div", { ...a }) : t(a);
+}
+function A({ children: e, render: t, ...n }) {
+	let { t: i } = C(), a = r({
+		...n,
+		children: /* @__PURE__ */ m("span", { children: e ?? i("unread") }),
+		"data-part": "unread"
+	});
+	return t === void 0 ? /* @__PURE__ */ m("div", { ...a }) : t(a);
+}
+function j({ children: e, render: t, ...n }) {
+	let { t: i } = C(), a = r({
+		role: "status",
+		...n,
+		children: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("span", {
+			"aria-hidden": "true",
+			"data-ui": "spinner",
+			"data-ui-spinner": ""
+		}), /* @__PURE__ */ m("span", { children: e ?? i("loader") })] }),
+		"data-part": "loader"
+	});
+	return t === void 0 ? /* @__PURE__ */ m("div", { ...a }) : t(a);
+}
+function M({ "aria-label": n, behavior: r = "smooth", children: a, direction: o = "end", onClick: s, ...c }) {
+	let l = C(), { state: u, t: d } = l, f = o === "end" ? u.scrollable.end : u.scrollable.start, g = o === "end" ? u.newCount : 0, _ = g > 0 ? d("jumpCount", { count: g }) : null, v = o === "start" ? d("jumpToStart") : g > 0 ? d("jumpToEndCount", { count: g }) : d("jumpToEnd");
+	return /* @__PURE__ */ m("button", {
+		"aria-label": n ?? v,
+		type: "button",
+		...i(c, "part", "jump"),
+		"data-active": String(f),
+		"data-direction": o,
+		inert: !f,
+		onClick: (e) => {
+			s?.(e), !e.defaultPrevented && (o === "end" ? l.scrollToEnd({ behavior: r }) : l.scrollToStart({ behavior: r }));
+		},
+		tabIndex: f ? 0 : -1,
+		children: a ?? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(t, { children: /* @__PURE__ */ m(e, { name: "arrow-left" }) }), _ === null ? null : /* @__PURE__ */ m("span", {
+			"data-part": "jump-count",
+			"data-part-jump-count": "",
+			children: _
+		})] })
+	});
+}
+//#endregion
+export { j as a, E as c, b as d, M as i, C as l, D as n, k as o, O as r, A as s, T as t, x as u };

package/dist/message-scroller.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "./message-scroller-UZjFpflz.js";
+import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "./message-scroller-niUJ8RoL.js";
 export { l as MessageScroller, a as MessageScrollerContent, u as MessageScrollerDefaultsProvider, s as MessageScrollerItem, r as MessageScrollerJump, e as MessageScrollerLoader, o as MessageScrollerSeparator, c as MessageScrollerUnread, t as MessageScrollerViewport, i as useMessageScroller, n as useMessageScrollerDefaults };

package/dist/message.js

@@ -1,2 +1,2 @@
-import { C as e, D as t, E as n, S as r, T as i, _ as a, a as o, b as s, c, d as l, f as u, g as d, h as f, i as p, l as m, m as h, n as g, o as _, p as v, r as y, s as b, t as x, u as S, v as C, w, x as T, y as E } from "./message-Cp0rLCyW.js";
+import { C as e, D as t, E as n, S as r, T as i, _ as a, a as o, b as s, c, d as l, f as u, g as d, h as f, i as p, l as m, m as h, n as g, o as _, p as v, r as y, s as b, t as x, u as S, v as C, w, x as T, y as E } from "./message-Dtck9RJy.js";
 export { x as Bubble, g as BubbleCaret, y as BubbleContent, p as BubbleMeta, o as BubbleQuote, _ as BubbleReaction, b as BubbleReactions, c as BubbleRetry, m as BubbleStream, S as BubbleTyping, e as Message, l as MessageActions, u as MessageActivity, v as MessageActivityStep, h as MessageAuthor, f as MessageAvatar, d as MessageBody, n as MessageDefaultsProvider, a as MessageFooter, w as MessageGroup, C as MessageHeader, E as MessageReceipt, s as MessageTime, T as MessageVersions, r as useBubble, i as useMessage, t as useMessageDefaults };