@slotted/react 0.1.0-beta.8 → 0.1.0-beta.9

package/dist/time-range-picker.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./time-range-picker-Fdb70Zj_.js";
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./time-range-picker-IKd3NKiC.js";
 export { n as TIME_RANGE_PICKER_MAX_OPTIONS, e as TIME_RANGE_PICKER_STEP, s as TimeRangePicker, i as TimeRangePickerDefaultsProvider, r as TimeRangePickerPreset, a as isSameTimeRange, o as timeRangePickerLengthLabel, t as useTimeRangePickerDefaults };

package/dist/timeline-DHzS0QcQ.js

@@ -0,0 +1,446 @@
+import { n as e, t } from "./icon-DMdotKfc.js";
+import { n, r } from "./i18n-DpW8lqJ1.js";
+/* empty css                 */
+/* empty css                         */
+import { keyedProps as i, selectorKeyProps as a, withSelectorKey as o } from "@slotted/core/selector-key";
+import { tabbables as s } from "@slotted/core/focus";
+import { createControllable as c } from "@slotted/core/state";
+import { Children as l, createContext as u, isValidElement as d, useContext as f, useEffect as p, useId as m, useLayoutEffect as h, useRef as g, useState as _ } from "react";
+import { Fragment as ee, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { timelineMessages as b } from "@slotted/core/i18n";
+import { getLiveAnnouncer as x } from "@slotted/core/live-announcer";
+import { connectorOf as S, feedFocusTarget as C, formatTimestamp as w, isComplete as T, revealFocusIndex as E, setSizeOf as D, sideOf as O } from "@slotted/core/timeline";
+//#region src/timeline/timeline-defaults.tsx
+var k = u({});
+function A() {
+	return f(k);
+}
+function j({ children: e, ...t }) {
+	let n = A();
+	return /* @__PURE__ */ v(k.Provider, {
+		value: {
+			growing: t.growing ?? n.growing,
+			level: t.level ?? n.level,
+			mode: t.mode ?? n.mode,
+			now: t.now ?? n.now,
+			order: t.order ?? n.order,
+			orientation: t.orientation ?? n.orientation,
+			placement: t.placement ?? n.placement,
+			size: t.size ?? n.size,
+			timeFormat: t.timeFormat ?? n.timeFormat,
+			timeZone: t.timeZone ?? n.timeZone,
+			tone: t.tone ?? n.tone,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/timeline/timeline-context.ts
+var M = u(void 0), N = u({
+	currentIndex: -1,
+	loaded: 0
+}), P = u(void 0);
+function F() {
+	let e = f(M);
+	if (e === void 0) throw Error("Timeline parts must be rendered inside a Timeline.");
+	return e;
+}
+function te() {
+	return f(N);
+}
+function I() {
+	return f(P);
+}
+//#endregion
+//#region src/timeline/timeline-parts.tsx
+var L = u(0);
+function R(e) {
+	return l.toArray(e).filter((e) => d(e));
+}
+function z(e) {
+	let t = 0, n = -1;
+	for (let r of R(e)) if (r.type === H) r.props.current === !0 && n === -1 && (n = t), t += 1;
+	else if (r.type === V) {
+		let e = z(r.props.children);
+		e.currentIndex !== -1 && n === -1 && (n = t + e.currentIndex), t += e.count;
+	}
+	return {
+		count: t,
+		currentIndex: n
+	};
+}
+function B(e, t) {
+	let n = R(e), r = n.reduce((e, t, n) => t.type === H ? n : e, -1), i = z(e), a = t, o = n.map((e, t) => {
+		if (e.type === H) {
+			let n = a;
+			return a += 1, /* @__PURE__ */ v(P.Provider, {
+				value: {
+					index: n,
+					last: t === r
+				},
+				children: e
+			}, e.key ?? n);
+		}
+		if (e.type === V) {
+			let n = a;
+			return a += z(e.props.children).count, /* @__PURE__ */ v(L.Provider, {
+				value: n,
+				children: e
+			}, e.key ?? t);
+		}
+		return e;
+	});
+	return {
+		count: i.count,
+		currentIndex: i.currentIndex === -1 ? -1 : t + i.currentIndex,
+		nodes: o
+	};
+}
+function V({ children: n, collapsible: r = !1, defaultOpen: a, label: o, level: s, onOpenChange: l, open: u, ref: d, render: p, ...m }) {
+	let h = F(), g = f(L), [b, x] = _(a ?? !0), S = r ? u ?? b : !0, C = `${h.ids.list}-group-${g}`, w = `h${s ?? h.level}`, T = B(n, g), E = (e, t, n) => {
+		c({
+			controlled: u,
+			initial: S,
+			onRequest: (e) => l?.(e.value, e)
+		}).request(e, t, n) && x(e);
+	}, D = /* @__PURE__ */ v(w, {
+		"data-part": "group-label",
+		"data-part-group-label": "",
+		children: r ? /* @__PURE__ */ y("button", {
+			"aria-controls": C,
+			"aria-expanded": S,
+			"data-part": "group-trigger",
+			"data-part-group-trigger": "",
+			onClick: (e) => E(!S, e.detail === 0 ? "keyboard" : "pointer", e),
+			type: "button",
+			children: [
+				/* @__PURE__ */ v("span", {
+					"aria-hidden": "true",
+					"data-part": "group-indicator",
+					"data-part-group-indicator": "",
+					children: /* @__PURE__ */ v(t, { children: /* @__PURE__ */ v(e, { name: "chevron-down" }) })
+				}),
+				o,
+				/* @__PURE__ */ v("span", {
+					"data-ui": "visually-hidden",
+					"data-ui-visually-hidden": "",
+					children: S ? h.t("collapse") : h.t("expand")
+				})
+			]
+		}) : o
+	}), O = h.mode === "feed", k = v(O ? "div" : "ol", {
+		"data-part": "group-list",
+		"data-part-group-list": "",
+		hidden: !S,
+		id: C,
+		children: T.nodes
+	}), A = i({
+		...m,
+		children: /* @__PURE__ */ y(ee, { children: [D, k] }),
+		"data-open": S ? "" : void 0,
+		"data-part": "group"
+	});
+	return p === void 0 ? v(O ? "div" : "li", {
+		...A,
+		ref: d
+	}) : p({
+		...A,
+		ref: d
+	});
+}
+function H({ actions: n, actor: r, children: a, complete: o, connector: s, current: c = !1, description: l, loading: u = !1, marker: d, opposite: f, ref: m, render: h, side: g, time: _, timeLabel: b, title: x, tone: C, variant: w, ...E }) {
+	let k = F(), A = te(), j = I(), M = j?.index ?? 0, N = j?.last ?? !0, P = k.mode === "feed", L = T({
+		autoComplete: k.autoComplete,
+		complete: o,
+		currentIndex: A.currentIndex,
+		index: M,
+		order: k.order
+	}), R = S({
+		autoComplete: k.autoComplete,
+		connector: s,
+		currentIndex: A.currentIndex,
+		index: M,
+		order: k.order
+	}), z = k.placement === "alternate" || g !== void 0 ? O(k.placement, M, g) : void 0, B = (e) => k.ids.item(M, e), V = [
+		x === void 0 ? null : B("title"),
+		r === void 0 ? null : B("actor"),
+		_ === void 0 ? null : B("time")
+	].filter((e) => e !== null);
+	p(() => {}, [P, V.length]);
+	let H = L && !c ? /* @__PURE__ */ v(t, {
+		"data-check": "",
+		children: /* @__PURE__ */ v(e, { name: "check" })
+	}) : null, W = /* @__PURE__ */ y("div", {
+		"data-part": "content",
+		"data-part-content": "",
+		children: [
+			x === void 0 ? null : /* @__PURE__ */ y("div", {
+				"data-part": "title",
+				"data-part-title": "",
+				id: B("title"),
+				children: [x, c ? /* @__PURE__ */ v("span", {
+					"data-ui": "visually-hidden",
+					"data-ui-visually-hidden": "",
+					children: k.t("current")
+				}) : null]
+			}),
+			_ === void 0 ? null : /* @__PURE__ */ v(U, {
+				id: B("time"),
+				value: _,
+				children: b
+			}),
+			r === void 0 ? null : /* @__PURE__ */ v("div", {
+				"data-part": "actor",
+				"data-part-actor": "",
+				id: B("actor"),
+				children: r
+			}),
+			l === void 0 ? null : /* @__PURE__ */ v("div", {
+				"data-part": "description",
+				"data-part-description": "",
+				id: B("description"),
+				children: l
+			}),
+			a,
+			n === void 0 ? null : /* @__PURE__ */ v("div", {
+				"data-part": "actions",
+				"data-part-actions": "",
+				children: n
+			})
+		]
+	}), G = i({
+		...E,
+		...c ? { "aria-current": !0 } : {},
+		...P ? {
+			"aria-describedby": l === void 0 ? void 0 : B("description"),
+			"aria-labelledby": V.length === 0 ? void 0 : V.join(" "),
+			"aria-posinset": M + 1,
+			"aria-setsize": D({
+				count: k.count,
+				growing: k.growing,
+				loaded: A.loaded
+			}),
+			role: "article",
+			tabIndex: E.tabIndex ?? 0
+		} : {},
+		...u ? { "aria-busy": !0 } : {},
+		children: /* @__PURE__ */ y(ee, { children: [
+			f === void 0 ? null : /* @__PURE__ */ v("div", {
+				"data-part": "opposite",
+				"data-part-opposite": "",
+				children: f
+			}),
+			/* @__PURE__ */ y("div", {
+				"data-part": "rail",
+				"data-part-rail": "",
+				children: [/* @__PURE__ */ v("span", {
+					"data-part": "marker",
+					"data-part-marker": "",
+					children: u ? /* @__PURE__ */ v("span", {
+						"aria-hidden": "true",
+						"data-part": "root",
+						"data-part-root": "",
+						"data-ui": "spinner",
+						"data-ui-spinner": ""
+					}) : d ?? H
+				}), N ? null : /* @__PURE__ */ v("span", {
+					"aria-hidden": "true",
+					"data-part": "connector",
+					"data-part-connector": ""
+				})]
+			}),
+			W
+		] }),
+		"data-complete": L && !c ? "" : void 0,
+		"data-connector": R === "solid" ? void 0 : R,
+		"data-current": c ? "" : void 0,
+		"data-loading": u ? "" : void 0,
+		"data-part": "item",
+		"data-side": z,
+		"data-tone": C ?? k.tone,
+		"data-variant": w ?? k.variant
+	});
+	return h === void 0 ? v(P ? "article" : "li", {
+		...G,
+		ref: m
+	}) : h({
+		...G,
+		ref: m
+	});
+}
+function U({ children: e, format: t, locale: r, now: i, ref: a, timeZone: s, value: c, ...l }) {
+	let u = f(M), d = n(), p = w(c, {
+		format: t ?? u?.timeFormat,
+		locale: r ?? u?.locale ?? d,
+		now: i ?? u?.now,
+		timeZone: s ?? u?.timeZone
+	});
+	return /* @__PURE__ */ v("time", {
+		...p.title === null ? {} : { title: p.title },
+		...o(l, "part", "time"),
+		dateTime: p.dateTime,
+		ref: a,
+		children: e ?? p.text
+	});
+}
+//#endregion
+//#region src/timeline/timeline.tsx
+function W({ autoComplete: e = !1, children: t, count: o, empty: c, freshCount: l = 0, growing: u, label: d, labelledBy: f, level: ee, loading: S = !1, locale: w, messages: T, mode: D, now: O, onKeyDown: k, onLoadMore: j, onReveal: P, order: F, orientation: te, placement: I, reflow: L = !0, render: R, size: z, timeFormat: V, timeZone: H, tone: U, variant: W, ...G }) {
+	let K = A(), ne = n(), q = r(b, T), J = `slotted-timeline-${m()}`, Y = g(null), X = g(null), re = g(null), [ie, ae] = _(l);
+	l > 0 && l !== ie && ae(l);
+	let oe = g(l), se = D ?? K.mode ?? "list", Z = u ?? K.growing ?? "none", ce = se === "feed", Q = B(t, 0), le = () => [...Y.current?.querySelectorAll("[data-part=\"item\"]") ?? []].filter((e) => e.closest("[data-part=\"group-list\"][hidden]") === null), $ = {
+		autoComplete: e,
+		count: o,
+		focusItem: (e) => {
+			le()[e]?.focus();
+		},
+		growing: Z,
+		ids: {
+			item: (e, t) => `${J}-${e}-${t}`,
+			list: J
+		},
+		level: ee ?? K.level ?? 3,
+		loading: S,
+		locale: w ?? ne,
+		mode: se,
+		now: O ?? K.now,
+		order: F ?? K.order ?? "oldest-first",
+		orientation: te ?? K.orientation ?? "vertical",
+		placement: I ?? K.placement ?? "end",
+		size: z ?? K.size ?? "md",
+		t: q,
+		timeFormat: V ?? K.timeFormat ?? "absolute",
+		timeZone: H ?? K.timeZone,
+		tone: U ?? K.tone ?? "secondary",
+		variant: W ?? K.variant ?? "subtle"
+	}, ue = (e) => {
+		if (k?.(e), e.defaultPrevented || !ce) return;
+		let t = le(), n = t.findIndex((t) => t.contains(e.target)), r = C({
+			count: t.length,
+			ctrlKey: e.ctrlKey,
+			from: n,
+			key: e.key,
+			metaKey: e.metaKey
+		});
+		if (r === null) return;
+		if (e.preventDefault(), typeof r == "number") {
+			t[r]?.focus();
+			return;
+		}
+		let i = Y.current;
+		if (i === null) return;
+		let a = s(i.ownerDocument.body), o = i.compareDocumentPosition.bind(i);
+		(r === "after" ? a.find((e) => o(e) & Node.DOCUMENT_POSITION_FOLLOWING && !i.contains(e)) : [...a].reverse().find((e) => o(e) & Node.DOCUMENT_POSITION_PRECEDING && !i.contains(e)))?.focus();
+	};
+	p(() => {
+		l <= 0 || x().announce(q("freshItems", { count: l }));
+	}, [l]), h(() => {
+		let e = oe.current;
+		oe.current = l;
+		let t = re.current;
+		if (l > 0 || e <= 0 || t === null || !t.contains(t.ownerDocument.activeElement)) return;
+		let n = le(), r = E({
+			loaded: n.length,
+			revealed: e,
+			order: $.order
+		}), i = r === null ? void 0 : n[r];
+		i !== void 0 && (i.hasAttribute("tabindex") ? i : s(i)[0])?.focus();
+	}, [l]), p(() => {
+		let e = X.current;
+		if (Z !== "scroll" || e === null || S || typeof IntersectionObserver > "u") return;
+		let t = new IntersectionObserver((e) => {
+			e.some((e) => e.isIntersecting) && j?.("scroll");
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [
+		Z,
+		S,
+		j
+	]);
+	let de = {
+		"aria-label": f === void 0 ? d : void 0,
+		"aria-labelledby": f,
+		"data-part": "list",
+		...a("part", "list"),
+		id: J,
+		onKeyDown: ue
+	}, fe = ce ? /* @__PURE__ */ v("div", {
+		...de,
+		"aria-busy": S ? !0 : void 0,
+		ref: Y,
+		role: "feed",
+		children: Q.nodes
+	}) : /* @__PURE__ */ v("ol", {
+		...de,
+		ref: Y,
+		children: Q.nodes
+	}), pe = Z === "none" ? null : S ? /* @__PURE__ */ y("div", {
+		"aria-live": "polite",
+		"data-part": "more",
+		"data-part-more": "",
+		ref: X,
+		children: [/* @__PURE__ */ v("span", {
+			"aria-hidden": "true",
+			"data-part": "root",
+			"data-part-root": "",
+			"data-ui": "spinner",
+			"data-ui-spinner": ""
+		}), q("loading")]
+	}) : Z === "button" ? /* @__PURE__ */ v("button", {
+		"data-part": "more",
+		"data-part-more": "",
+		onClick: (e) => j?.(e.detail === 0 ? "keyboard" : "pointer", e),
+		ref: X,
+		type: "button",
+		children: q("loadMore")
+	}) : /* @__PURE__ */ v("div", {
+		"data-part": "more",
+		"data-part-more": "",
+		ref: X
+	}), me = i({
+		...G,
+		children: /* @__PURE__ */ v(M.Provider, {
+			value: $,
+			children: /* @__PURE__ */ y(N.Provider, {
+				value: {
+					currentIndex: Q.currentIndex,
+					loaded: Q.count
+				},
+				children: [
+					ie > 0 ? /* @__PURE__ */ v("button", {
+						"data-part": "fresh",
+						"data-part-fresh": "",
+						hidden: l <= 0,
+						onClick: (e) => P?.(e.detail === 0 ? "keyboard" : "pointer", e),
+						ref: re,
+						type: "button",
+						children: q("freshItems", { count: ie })
+					}) : null,
+					fe,
+					pe,
+					Q.count === 0 && !S ? /* @__PURE__ */ v("div", {
+						"data-part": "empty",
+						"data-part-empty": "",
+						children: c ?? q("empty")
+					}) : null
+				]
+			})
+		}),
+		"data-growing": $.growing,
+		"data-loading": S ? "" : void 0,
+		"data-mode": $.mode,
+		"data-order": $.order,
+		"data-orientation": $.orientation,
+		"data-part": "root",
+		"data-placement": $.placement,
+		"data-reflow": L ? void 0 : "false",
+		"data-size": $.size,
+		"data-tone": $.tone,
+		"data-ui": "timeline",
+		"data-variant": $.variant
+	});
+	return R === void 0 ? /* @__PURE__ */ v("div", { ...me }) : R(me);
+}
+//#endregion
+export { F as a, j as c, U as i, A as l, V as n, I as o, H as r, te as s, W as t };

package/dist/timeline.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./timeline-DH_02ysz.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./timeline-DHzS0QcQ.js";
 export { c as Timeline, t as TimelineDefaultsProvider, i as TimelineGroup, o as TimelineItem, n as TimelineTime, e as useTimeline, r as useTimelineDefaults, a as useTimelineItem, s as useTimelineList };