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

package/dist/notification-center-C4pEHJ3h.js

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