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

package/dist/notification-center-Ci-OLWTO.js

@@ -0,0 +1,516 @@
+import { n as e, t } from "./icon-DjqSEQ-o.js";
+import { n, r } from "./i18n-DpW8lqJ1.js";
+import { n as i } from "./icon-button-CRB218_z.js";
+import { a, i as o, n as s, r as c } from "./tooltip-DrFiRlH8.js";
+import { i as l, t as ee } from "./skeleton-DyOwgYmF.js";
+import { a as u, r as d, t as te } from "./tabs-DjEpS9uq.js";
+import { keyedProps as ne } from "@slotted/core/selector-key";
+import { tabbables as re } from "@slotted/core/focus";
+import { createControllable as ie } from "@slotted/core/state";
+import { createContext as ae, useCallback as f, useContext as oe, useEffect as p, useId as se, useImperativeHandle as ce, useLayoutEffect as le, useMemo as m, useRef as h, useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { notificationCenterMessages as ue } from "@slotted/core/i18n";
+import { getLiveAnnouncer as de } from "@slotted/core/live-announcer";
+import { findScrollParent as fe } from "@slotted/core/sticky-header";
+import { feedFocusTarget as pe, formatTimestamp as me, setSizeOf as he } from "@slotted/core/timeline";
+//#region src/notification-center/notification-center-defaults.tsx
+var b = ae({
+	arrivals: "hold",
+	controls: "both",
+	growing: "none",
+	level: "2",
+	size: "md",
+	timeFormat: "relative"
+});
+function x() {
+	return oe(b);
+}
+function S({ children: e, ...t }) {
+	let n = x();
+	return /* @__PURE__ */ v(b.Provider, {
+		value: {
+			arrivals: t.arrivals ?? n.arrivals,
+			controls: t.controls ?? n.controls,
+			growing: t.growing ?? n.growing,
+			level: t.level ?? n.level,
+			size: t.size ?? n.size,
+			timeFormat: t.timeFormat ?? n.timeFormat,
+			timeZone: t.timeZone ?? n.timeZone
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/notification-center/notification-center.tsx
+function ge({ text: e, ...t }) {
+	return /* @__PURE__ */ y(a, {
+		openOn: "hover",
+		side: "bottom",
+		children: [/* @__PURE__ */ v(o, {
+			"aria-label": e,
+			...t
+		}), /* @__PURE__ */ v(c, { children: /* @__PURE__ */ v(s, { children: e }) })]
+	});
+}
+var C = {
+	accent: "circle-info",
+	secondary: "bell",
+	info: "circle-info",
+	success: "circle-check",
+	warning: "circle-alert",
+	danger: "circle-x"
+}, _e = 3;
+function ve(e) {
+	return e.replace(/[^\w-]/g, (e) => `-${e.charCodeAt(0).toString(16)}-`);
+}
+function w(e, t) {
+	let n = !1;
+	return {
+		reason: e,
+		source: t,
+		get cancelled() {
+			return n;
+		},
+		cancel() {
+			n = !0;
+		}
+	};
+}
+function T(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+function E(e) {
+	return e != null && e !== !1;
+}
+function ye(e, t) {
+	let n = [], r = /* @__PURE__ */ new Map();
+	for (let i of e) {
+		let e = t(i), a = r.get(e);
+		a === void 0 && (a = {
+			label: e,
+			items: []
+		}, r.set(e, a), n.push(a)), a.items.push(i);
+	}
+	return n;
+}
+function be({ context: n, item: r, position: i }) {
+	let a = r.tone ?? "accent", o = n.ids(r.key), s = me(r.time, {
+		format: n.timeFormat,
+		locale: n.locale,
+		now: n.now,
+		timeZone: n.timeZone
+	}), c = {
+		ids: o,
+		position: i,
+		time: s,
+		tone: a
+	}, l = E(r.description), ee = n.renderItem === void 0 ? /* @__PURE__ */ y(_, { children: [
+		r.href === void 0 ? /* @__PURE__ */ v("span", {
+			"data-part": "title",
+			"data-part-title": "",
+			id: o.title,
+			children: r.title
+		}) : /* @__PURE__ */ v("a", {
+			"data-part": "title",
+			"data-part-title": "",
+			href: r.href,
+			id: o.title,
+			onClick: (e) => {
+				let t = w(T(e), e);
+				n.onOpen?.(r.key, t), t.cancelled && e.preventDefault();
+			},
+			children: r.title
+		}),
+		l ? /* @__PURE__ */ v("p", {
+			"data-part": "description",
+			"data-part-description": "",
+			id: o.description,
+			children: r.description
+		}) : null,
+		/* @__PURE__ */ v("time", {
+			"data-part": "time",
+			"data-part-time": "",
+			dateTime: s.dateTime,
+			...s.title === null ? {} : { title: s.title },
+			children: s.text
+		}),
+		E(r.actions) ? /* @__PURE__ */ v("div", {
+			"data-part": "actions",
+			"data-part-actions": "",
+			children: r.actions
+		}) : null
+	] }) : n.renderItem(r, c), u = n.controls === "both" || n.controls === "read", d = n.controls === "both" || n.controls === "dismiss";
+	return /* @__PURE__ */ y("article", {
+		"aria-describedby": l ? o.description : void 0,
+		"aria-labelledby": o.title,
+		"aria-posinset": i,
+		"aria-setsize": n.setSize,
+		"data-key": r.key,
+		"data-part": "item",
+		"data-part-item": "",
+		...r.read ? { "data-read": "" } : {},
+		"data-tone": a,
+		tabIndex: 0,
+		children: [
+			E(r.visual) || r.tone !== void 0 ? /* @__PURE__ */ v("span", {
+				"data-part": "visual",
+				"data-part-visual": "",
+				"data-tone": r.tone,
+				children: E(r.visual) ? r.visual : /* @__PURE__ */ v(t, {
+					"data-tone-glyph": "",
+					children: /* @__PURE__ */ v(e, { name: C[a] })
+				})
+			}) : null,
+			/* @__PURE__ */ v("div", {
+				"data-part": "content",
+				"data-part-content": "",
+				children: ee
+			}),
+			u || d ? /* @__PURE__ */ y("div", {
+				"data-part": "controls",
+				"data-part-controls": "",
+				children: [u ? /* @__PURE__ */ v(ge, {
+					"data-part": "read-toggle",
+					"data-part-read-toggle": "",
+					onClick: (e) => n.onRead([r.key], !r.read, T(e), e),
+					text: r.read ? n.t("markUnread") : n.t("markRead"),
+					children: /* @__PURE__ */ v(t, { children: /* @__PURE__ */ v(e, { name: r.read ? "dot" : "check" }) })
+				}) : null, d ? /* @__PURE__ */ v(ge, {
+					"data-part": "dismiss",
+					"data-part-dismiss": "",
+					onClick: (e) => n.onRemove?.(r.key, w(T(e), e)),
+					text: n.t("dismiss"),
+					children: /* @__PURE__ */ v(t, { children: /* @__PURE__ */ v(e, { name: "x" }) })
+				}) : null]
+			}) : null
+		]
+	});
+}
+function xe({ actions: e, "aria-label": t, "aria-labelledby": a, arrivals: o, className: s, controls: c, count: ae, defaultView: oe, empty: me, footer: b, groupBy: S, growing: ge, items: C, level: xe, loading: D = !1, locale: Se, messages: Ce, now: we, onKeyDown: Te, onLoadMore: O, onOpen: Ee, onReadChange: De, onRemove: Oe, onReveal: ke, onUnreadChange: Ae, onViewChange: je, ref: Me, render: Ne, renderItem: Pe, size: Fe, style: Ie, timeFormat: Le, timeZone: Re, view: k, views: ze, ...Be }) {
+	let A = x(), j = `slotted-notification-center-${se()}`, M = `${j}-title`, Ve = `${j}-feed`, He = o ?? A.arrivals, Ue = c ?? A.controls, N = ge ?? A.growing, We = xe ?? A.level, Ge = n(), Ke = Se ?? Ge, qe = Fe ?? A.size, Je = Le ?? A.timeFormat, Ye = Re ?? A.timeZone, P = r(ue, Ce), [F, Xe] = g(null), I = h(null), L = h(null), R = h(null), Ze = () => [...I.current?.querySelectorAll("article[data-part=\"item\"]") ?? []], z = m(() => C.filter((e) => !e.read).length, [C]), B = m(() => ze ?? [{
+		label: P("all"),
+		value: "all"
+	}, {
+		count: z,
+		label: P("unreadView"),
+		value: "unread"
+	}], [
+		ze,
+		P,
+		z
+	]), [Qe, $e] = g(oe), V = k ?? Qe ?? B[0]?.value ?? "all", H = h({
+		currentView: V,
+		onViewChange: je,
+		view: k
+	});
+	H.current = {
+		currentView: V,
+		onViewChange: je,
+		view: k
+	};
+	let et = f((e, t, n) => {
+		if (e === H.current.currentView) return;
+		let r = !1, i = ie({
+			controlled: H.current.view,
+			initial: H.current.currentView,
+			onRequest: (e) => {
+				H.current.onViewChange?.(e.value, e), r = e.cancelled;
+			}
+		}).request(e, t, n);
+		r || i && $e(e);
+	}, []), [U, tt] = g(() => new Set(C.map((e) => e.key))), [W, G] = g([]), K = He === "hold", nt = f(() => {
+		let e = I.current;
+		if (e === null) return !1;
+		let t = e.ownerDocument.activeElement;
+		if (t !== null && e.contains(t)) return !0;
+		let n = fe(e);
+		return n !== null && n.scrollTop > 0;
+	}, []);
+	le(() => {
+		let e = new Set(C.map((e) => e.key)), t = [...e].filter((e) => !U.has(e) && !W.includes(e)), n = W.filter((t) => !e.has(t));
+		if (t.length !== 0 || n.length !== 0) {
+			if (K && t.length > 0 && nt()) {
+				G([...W.filter((t) => e.has(t)), ...t]);
+				return;
+			}
+			t.length > 0 && tt(/* @__PURE__ */ new Set([...U, ...t])), n.length > 0 && G(W.filter((t) => e.has(t)));
+		}
+	}, [
+		C,
+		U,
+		W,
+		K,
+		nt
+	]), p(() => {
+		W.length !== 0 && de().announce(P("fresh", { count: W.length }));
+	}, [W.length]);
+	let q = h(null), J = f((e, t) => {
+		if (W.length === 0) return;
+		let n = w(e, t);
+		ke?.(W.length, n), !n.cancelled && (e === "keyboard" && (q.current = W[0] ?? null), tt(/* @__PURE__ */ new Set([...U, ...W])), G([]));
+	}, [
+		W,
+		U,
+		ke
+	]);
+	p(() => {
+		let e = q.current;
+		e !== null && (q.current = null, I.current?.querySelector(`article[data-key="${CSS.escape(e)}"]`)?.focus());
+	});
+	let Y = h(null);
+	p(() => {
+		if (Y.current === z) return;
+		let e = Y.current === null;
+		Y.current = z, Ae?.(z), e || de().announce(P("unread", { count: z }));
+	}, [z]);
+	let X = f((e, t, n, r) => {
+		e.length !== 0 && De?.({
+			keys: e,
+			read: t
+		}, w(n, r));
+	}, [De]), Z = m(() => K ? C.filter((e) => U.has(e.key)) : C, [
+		C,
+		U,
+		K
+	]), Q = m(() => V === "unread" ? Z.filter((e) => !e.read) : Z, [Z, V]), rt = he({
+		count: ae,
+		growing: N,
+		loaded: Q.length
+	}), it = f(() => {
+		(L.current ?? Ze()[0])?.focus();
+	}, []), at = (e) => {
+		if (Te?.(e), e.defaultPrevented) return;
+		let t = I.current;
+		if (t === null || !t.contains(e.target)) return;
+		let n = Ze(), r = n.findIndex((t) => t.contains(e.target));
+		if (r === -1) return;
+		if (e.key === "Delete" && e.target === n[r] && !e.repeat) {
+			let t = n[r].dataset.key ?? "", i = w("keyboard", e);
+			if (Oe?.(t, i), i.cancelled) return;
+			e.preventDefault();
+			let a = n[r + 1] ?? n[r - 1];
+			a === void 0 ? (L.current ?? (F === null ? void 0 : re(F)[0]))?.focus() : a.focus();
+			return;
+		}
+		let i = pe({
+			count: n.length,
+			ctrlKey: e.ctrlKey,
+			from: r,
+			key: e.key,
+			metaKey: e.metaKey
+		});
+		if (i === null) return;
+		if (i === r && e.key === "PageUp" && L.current !== null) {
+			e.preventDefault(), L.current.focus();
+			return;
+		}
+		if (e.preventDefault(), typeof i == "number") {
+			n[i]?.focus();
+			return;
+		}
+		let a = re(t.ownerDocument.body), o = t.compareDocumentPosition.bind(t);
+		(i === "after" ? a.find((e) => o(e) & Node.DOCUMENT_POSITION_FOLLOWING && !t.contains(e)) : [...a].reverse().find((e) => o(e) & Node.DOCUMENT_POSITION_PRECEDING && !t.contains(e)))?.focus();
+	};
+	p(() => {
+		let e = R.current;
+		if (N !== "scroll" || e === null || D || typeof IntersectionObserver > "u") return;
+		let t = new IntersectionObserver((e) => {
+			e.some((e) => e.isIntersecting) && O?.(w("scroll", e));
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [
+		N,
+		D,
+		O
+	]), ce(Me, () => ({
+		get element() {
+			return F;
+		},
+		focus: it,
+		markAllRead: () => X(Z.filter((e) => !e.read).map((e) => e.key), !0, "programmatic", void 0),
+		reveal: () => J("programmatic", void 0)
+	}), [
+		F,
+		it,
+		X,
+		Z,
+		J
+	]);
+	let ot = {
+		controls: Ue,
+		ids: f((e) => ({
+			description: `${j}-${ve(e)}-d`,
+			title: `${j}-${ve(e)}-t`
+		}), [j]),
+		locale: Ke,
+		now: we,
+		onOpen: Ee,
+		onRead: X,
+		onRemove: Oe,
+		renderItem: Pe,
+		setSize: rt,
+		t: P,
+		timeFormat: Je,
+		timeZone: Ye
+	}, st = `h${We}`, ct = `h${Math.min(Number(We) + 1, 6)}`, $ = D && Q.length === 0, lt = (e) => /* @__PURE__ */ v("span", {
+		"data-part": "count",
+		"data-part-count": "",
+		children: e
+	}), ut = () => {
+		if ($) return Array.from({ length: _e }, (e, t) => /* @__PURE__ */ y("div", {
+			"aria-hidden": "true",
+			"data-part": "item",
+			"data-part-item": "",
+			children: [/* @__PURE__ */ v("span", {
+				"data-part": "visual",
+				"data-part-visual": "",
+				children: /* @__PURE__ */ v(l, {
+					shape: "circle",
+					size: "sm"
+				})
+			}), /* @__PURE__ */ v("div", {
+				"data-part": "content",
+				"data-part-content": "",
+				children: /* @__PURE__ */ v(ee, { lines: 2 })
+			})]
+		}, t));
+		if (S === void 0) return Q.map((e, t) => /* @__PURE__ */ v(be, {
+			context: ot,
+			item: e,
+			position: t + 1
+		}, e.key));
+		let e = 0;
+		return ye(Q, S).map((t, n) => /* @__PURE__ */ y("div", {
+			"data-part": "group",
+			"data-part-group": "",
+			children: [/* @__PURE__ */ v(ct, {
+				"data-part": "group-label",
+				"data-part-group-label": "",
+				children: t.label
+			}), t.items.map((t) => /* @__PURE__ */ v(be, {
+				context: ot,
+				item: t,
+				position: ++e
+			}, t.key))]
+		}, n));
+	}, dt = N === "none" ? null : D && !$ ? /* @__PURE__ */ v("div", {
+		"aria-live": "polite",
+		"data-part": "more",
+		"data-part-more": "",
+		ref: R,
+		children: P("loading")
+	}) : N === "button" ? /* @__PURE__ */ v("button", {
+		"data-part": "more",
+		"data-part-more": "",
+		onClick: (e) => O?.(w(T(e), e)),
+		ref: R,
+		type: "button",
+		children: P("loadMore")
+	}) : /* @__PURE__ */ v("div", {
+		"data-part": "more",
+		"data-part-more": "",
+		ref: R
+	}), ft = !$ && Q.length === 0, pt = ne({
+		...Be,
+		...t === void 0 ? { "aria-labelledby": a ?? M } : { "aria-label": t },
+		children: /* @__PURE__ */ y(_, { children: [
+			/* @__PURE__ */ y("div", {
+				"data-part": "header",
+				"data-part-header": "",
+				children: [
+					/* @__PURE__ */ y(st, {
+						"data-part": "title",
+						"data-part-title": "",
+						id: M,
+						children: [P("title"), z > 0 ? /* @__PURE__ */ y(_, { children: [" ", lt(z)] }) : null]
+					}),
+					/* @__PURE__ */ v("span", {
+						"data-part": "mark-all",
+						"data-part-mark-all": "",
+						children: /* @__PURE__ */ v(i, {
+							disabled: z === 0,
+							onClick: (e) => X(Z.filter((e) => !e.read).map((e) => e.key), !0, T(e), e),
+							size: "sm",
+							tone: "secondary",
+							variant: "ghost",
+							children: P("markAll")
+						})
+					}),
+					E(e) ? /* @__PURE__ */ v("div", {
+						"data-part": "actions",
+						"data-part-actions": "",
+						children: e
+					}) : null
+				]
+			}),
+			B.length > 1 ? /* @__PURE__ */ v("div", {
+				"data-part": "views",
+				"data-part-views": "",
+				children: /* @__PURE__ */ v(u, {
+					onValueChange: (e, t) => et(e, t.reason, t.source),
+					size: qe,
+					track: "none",
+					value: V,
+					children: /* @__PURE__ */ v(d, {
+						"aria-label": P("views"),
+						children: B.map((e) => /* @__PURE__ */ y(te, {
+							controls: Ve,
+							value: e.value,
+							children: [e.label, e.count === void 0 || e.count === 0 ? null : /* @__PURE__ */ y(_, { children: [" ", lt(e.count)] })]
+						}, e.value))
+					})
+				})
+			}) : null,
+			W.length > 0 ? /* @__PURE__ */ v("button", {
+				"data-part": "fresh",
+				"data-part-fresh": "",
+				onClick: (e) => J(T(e), e),
+				ref: L,
+				type: "button",
+				children: P("fresh", { count: W.length })
+			}) : null,
+			/* @__PURE__ */ v("div", {
+				"aria-busy": D ? !0 : void 0,
+				"aria-labelledby": M,
+				"data-part": "feed",
+				"data-part-feed": "",
+				id: Ve,
+				ref: I,
+				role: "feed",
+				children: ut()
+			}),
+			ft ? /* @__PURE__ */ v("div", {
+				"data-part": "empty",
+				"data-part-empty": "",
+				children: me ?? P(V === "unread" ? "caughtUp" : "empty")
+			}) : dt,
+			E(b) ? /* @__PURE__ */ v("div", {
+				"data-part": "footer",
+				"data-part-footer": "",
+				children: b
+			}) : null
+		] }),
+		className: s,
+		"data-arrivals": He,
+		"data-controls": Ue,
+		"data-growing": N,
+		"data-level": We,
+		...D ? { "data-loading": "" } : {},
+		"data-part": "root",
+		"data-size": qe,
+		"data-time-format": Je,
+		"data-ui": "notification-center",
+		"data-view": V,
+		onKeyDown: at,
+		style: Ie
+	});
+	return Ne === void 0 ? /* @__PURE__ */ v("section", {
+		...pt,
+		ref: Xe
+	}) : Ne({
+		...pt,
+		ref: Xe
+	});
+}
+//#endregion
+export { S as n, x as r, xe as t };

package/dist/notification-center.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./notification-center-C4pEHJ3h.js";
+import { n as e, r as t, t as n } from "./notification-center-Ci-OLWTO.js";
 export { n as NotificationCenter, e as NotificationCenterDefaultsProvider, t as useNotificationCenterDefaults };