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

package/dist/side-navigation-MNMSkj9b.js

@@ -0,0 +1,747 @@
+import { n as e, t } from "./icon-DjqSEQ-o.js";
+import { r as n } from "./i18n-DpW8lqJ1.js";
+import { i as r } from "./app-shell-BlkqQrOx.js";
+import { a as i, i as a, n as o, r as s } from "./tooltip-DrFiRlH8.js";
+import { i as c } from "./skeleton-DyOwgYmF.js";
+import { definedProps as l, keyedProps as u, withSelectorKey as d } from "@slotted/core/selector-key";
+import { nextOpenValues as f, sameOpenValues as p } from "@slotted/core/disclosure";
+import { createControllable as m } from "@slotted/core/state";
+import { createContext as h, useCallback as g, useContext as _, useEffect as v, useId as y, useImperativeHandle as ee, useLayoutEffect as b, useMemo as te, useRef as x, useState as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { createPresence as E } from "@slotted/core/presence";
+import { createPortalRoot as ne } from "@slotted/core/portal";
+import { createDismissableLayer as D } from "@slotted/core/dismissable-layer";
+import { createPositioner as re } from "@slotted/core/positioner";
+import { createPortal as O } from "react-dom";
+import { sideNavigationMessages as ie } from "@slotted/core/i18n";
+import { createWidthGate as k } from "@slotted/core/measure";
+import { truncateMiddle as A } from "@slotted/core/text";
+//#region src/side-navigation/side-navigation-defaults.tsx
+var j = {
+	autoExpand: !0,
+	compactAt: 96,
+	guides: !0,
+	landmark: !0,
+	mode: "auto",
+	multiple: !0,
+	size: "md",
+	truncate: "end"
+}, M = h(j);
+function N() {
+	return _(M);
+}
+function P({ children: e, ...t }) {
+	let n = N(), r = te(() => ({
+		autoExpand: t.autoExpand ?? n.autoExpand,
+		compactAt: t.compactAt ?? n.compactAt,
+		guides: t.guides ?? n.guides,
+		landmark: t.landmark ?? n.landmark,
+		mode: t.mode ?? n.mode,
+		multiple: t.multiple ?? n.multiple,
+		size: t.size ?? n.size,
+		truncate: t.truncate ?? n.truncate
+	}), [
+		t.autoExpand,
+		t.compactAt,
+		t.guides,
+		t.landmark,
+		t.mode,
+		t.multiple,
+		t.size,
+		t.truncate,
+		n
+	]);
+	return /* @__PURE__ */ w(M.Provider, {
+		value: r,
+		children: e
+	});
+}
+//#endregion
+//#region src/side-navigation/side-navigation.tsx
+var F = "[data-part=\"link\"], [data-part=\"trigger\"]", ae = h(void 0);
+function I() {
+	let e = _(ae);
+	if (e === void 0) throw Error("Every side-navigation part must be rendered inside SideNavigation.");
+	return e;
+}
+function oe(e, t) {
+	for (let n = e.closest("[data-part=\"group\"]"); n !== null && t.contains(n); n = n.parentElement?.closest("[data-part=\"group\"]") ?? null) if (!n.parentElement?.hasAttribute("data-expanded")) return !1;
+	return !0;
+}
+function L({ autoExpand: e, children: t, className: i, compactAt: a, defaultExpanded: o, defaultFlyout: s, defaultValue: c, expanded: l, flyout: d, guides: h, landmark: _, messages: y, mode: b, multiple: C, onExpandedChange: T, onFlyoutChange: E, onKeyDown: ne, onValueChange: D, ref: re, render: O, size: A, style: j, truncate: M, value: P, ...I }) {
+	let L = N(), R = r(), z = e ?? L.autoExpand, B = a ?? L.compactAt, V = h ?? L.guides, se = _ ?? (R === void 0 && L.landmark), ce = n(ie, y), H = b ?? L.mode, U = C ?? L.multiple, W = A ?? L.size, G = M ?? L.truncate, [le, ue] = S(c ?? null), [de, fe] = S(o ?? []), [pe, me] = S(s ?? null), K = P === void 0 ? le : P, q = l === void 0 ? de : l, J = d === void 0 ? pe : d, [Y, he] = S(null), [ge, _e] = S(!1), [ve, ye] = S(0), [X, be] = S(null), Z = H === "compact" || H === "auto" && ge, xe = x(/* @__PURE__ */ new Map()), Se = g((e, t) => (xe.current.set(e, t), () => {
+		xe.current.delete(e);
+	}), []), Q = x({
+		currentExpanded: q,
+		currentFlyout: J,
+		currentValue: K,
+		expanded: l,
+		flyout: d,
+		value: P
+	});
+	Q.current = {
+		currentExpanded: q,
+		currentFlyout: J,
+		currentValue: K,
+		expanded: l,
+		flyout: d,
+		value: P
+	};
+	let Ce = g((e, t, n) => {
+		m({
+			controlled: Q.current.expanded,
+			equals: p,
+			initial: Q.current.currentExpanded,
+			onRequest: (e) => T?.(e.value, e)
+		}).request(e, t, n) && fe(e);
+	}, [T]), $ = g((e, t, n, r) => {
+		let i = Q.current.currentExpanded;
+		i.includes(e) !== t && Ce(f(i, e, { multiple: U }), n, r);
+	}, [Ce, U]), we = g((e, t, n) => {
+		m({
+			controlled: Q.current.flyout,
+			initial: Q.current.currentFlyout,
+			onRequest: (e) => E?.(e.value, e)
+		}).request(e, t, n) && me(e);
+	}, [E]), Te = g((e, t, n) => {
+		m({
+			controlled: Q.current.value,
+			initial: Q.current.currentValue,
+			onRequest: (e) => D?.(e.value, e)
+		}).request(e, t, n) && ue(e);
+	}, [D]);
+	v(() => {
+		if (Y === null || H !== "auto") return;
+		let e = k(Y, {
+			at: B,
+			onChange: _e
+		});
+		return _e(e.narrow()), () => e.destroy();
+	}, [
+		B,
+		H,
+		Y
+	]), v(() => {
+		if (Y === null || typeof ResizeObserver > "u") return;
+		let e = new ResizeObserver(() => ye((e) => e + 1));
+		e.observe(Y);
+		let t = Y.ownerDocument.fonts, n = !0;
+		return t !== void 0 && t.ready.then(() => {
+			n && ye((e) => e + 1);
+		}), () => {
+			n = !1, e.disconnect();
+		};
+	}, [Y]), v(() => {
+		!Z && Q.current.currentFlyout !== null && we(null, "resize");
+	}, [Z, we]), v(() => {
+		if (!z || K === null) return;
+		let e = [];
+		for (let t = xe.current.get(K) ?? null; t !== null; t = xe.current.get(t) ?? null) Q.current.currentExpanded.includes(t) || e.push(t);
+		if (e.length === 0) return;
+		let t = U ? [...Q.current.currentExpanded, ...e] : [e[e.length - 1]];
+		Ce(t, "select");
+	}, [
+		K,
+		Ce,
+		z,
+		U
+	]);
+	let Ee = g(() => {
+		if (Y === null) return [];
+		let e = [...Y.querySelectorAll(F)].filter((e) => oe(e, Y));
+		if (X === null || J === null) return e;
+		let t = [...X.querySelectorAll(F)], n = e.findIndex((e) => e.closest("[data-part=\"item\"]")?.getAttribute("data-value") === J);
+		return n === -1 ? [...e, ...t] : [
+			...e.slice(0, n + 1),
+			...t,
+			...e.slice(n + 1)
+		];
+	}, [
+		J,
+		X,
+		Y
+	]), De = (e) => {
+		if (ne?.(e), e.defaultPrevented) return;
+		let t = e.target;
+		if (!t.matches("[data-part=\"link\"], [data-part=\"trigger\"]")) return;
+		if (e.key === "Escape") {
+			if (X?.contains(t)) return;
+			let n = t.closest("[data-part=\"group\"]"), r = n?.parentElement, i = r?.getAttribute("data-value");
+			if (!n || !r || !i || !r.hasAttribute("data-expanded")) return;
+			e.preventDefault(), $(i, !1, "escape", e.nativeEvent), r.querySelector(":scope > [data-part=\"trigger\"]")?.focus();
+			return;
+		}
+		let n = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 0;
+		if (n === 0 && e.key !== "Home" && e.key !== "End") return;
+		let r = Ee();
+		if (r.length === 0) return;
+		e.preventDefault();
+		let i = r.indexOf(t);
+		r[e.key === "Home" ? 0 : e.key === "End" ? r.length - 1 : Math.min(r.length - 1, Math.max(0, i + n))]?.focus();
+	};
+	ee(re, () => ({
+		focus: () => Ee()[0]?.focus(),
+		expand: (e) => $(e, !0, "programmatic"),
+		collapse: (e) => $(e, !1, "programmatic"),
+		root: Y
+	}), [
+		Y,
+		Ee,
+		$
+	]);
+	let Oe = te(() => ({
+		autoExpand: z,
+		compact: Z,
+		expanded: q,
+		flyout: J,
+		flyoutNode: X,
+		guides: V,
+		isExpanded: (e) => q.includes(e),
+		measureTick: ve,
+		mode: H,
+		multiple: U,
+		registerItem: Se,
+		select: Te,
+		setFlyout: we,
+		setFlyoutNode: be,
+		size: W,
+		toggleExpanded: $,
+		truncate: G,
+		value: K
+	}), [
+		Z,
+		q,
+		J,
+		K,
+		X,
+		ve,
+		Se,
+		z,
+		V,
+		H,
+		U,
+		W,
+		G,
+		Te,
+		we,
+		$
+	]), { "aria-label": ke, ...Ae } = I, je = u({
+		...Ae,
+		...se ? { "aria-label": ke ?? ce("navigation") } : {},
+		children: t,
+		className: i,
+		...Z ? { "data-compact": "" } : {},
+		...V ? { "data-guides": "" } : {},
+		"data-mode": H,
+		"data-part": "root",
+		"data-size": W,
+		"data-truncate": G,
+		"data-ui": "side-navigation",
+		onKeyDown: De,
+		style: j
+	}), Me = se ? "nav" : "div";
+	return /* @__PURE__ */ w(ae.Provider, {
+		value: Oe,
+		children: O === void 0 ? /* @__PURE__ */ w(Me, {
+			...je,
+			ref: he
+		}) : O(je)
+	});
+}
+//#endregion
+//#region src/side-navigation/side-navigation-parts.tsx
+function R(e, ...t) {
+	for (let n of t) typeof n == "function" ? n(e) : n != null && (n.current = e);
+}
+function z(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+var B = h(void 0);
+function V() {
+	let e = _(B);
+	if (e === void 0) throw Error("SideNavigationLink, SideNavigationTrigger, SideNavigationGroup and the parts of a row must be rendered inside SideNavigationItem.");
+	return e;
+}
+function se() {
+	return _(B);
+}
+function ce({ children: e, ref: t, render: n, ...r }) {
+	let i = u({
+		...r,
+		children: e,
+		"data-part": "section"
+	});
+	return n === void 0 ? /* @__PURE__ */ w("div", {
+		...i,
+		ref: t
+	}) : n(i);
+}
+function H({ children: e, ref: t, render: n, ...r }) {
+	let i = u({
+		...r,
+		children: e,
+		"data-part": "section-label"
+	});
+	return n === void 0 ? /* @__PURE__ */ w("div", {
+		...i,
+		ref: t
+	}) : n(i);
+}
+function U({ children: e, ref: t, render: n, ...r }) {
+	let i = u({
+		...r,
+		children: e,
+		"data-part": "list"
+	});
+	return n === void 0 ? /* @__PURE__ */ w("ul", {
+		...i,
+		ref: t
+	}) : n(i);
+}
+function W({ children: e, className: t, disabled: n, ref: r, render: i, style: a, value: o, ...s }) {
+	let c = I(), l = se(), d = y(), [f, p] = S(!1), [m, h] = S(!1), [_, ee] = S(!1), [b, x] = S(""), [C, T] = S(""), [E, ne] = S(null), [D, re] = S([]), O = c.isExpanded(o), ie = c.compact && c.flyout === o, k = f && c.value === o, A = D.length > 0, j = n === !0 || l?.disabled === !0, { registerItem: M } = c;
+	v(() => M(o, l?.value ?? null), [
+		l?.value,
+		M,
+		o
+	]);
+	let N = g((e, t) => {
+		re((n) => t === n.includes(e) ? n : t ? [...n, e] : n.filter((t) => t !== e));
+	}, []), P = l?.reportCurrent;
+	v(() => {
+		if (P !== void 0) return P(o, k || A), () => P(o, !1);
+	}, [
+		k,
+		A,
+		P,
+		o
+	]);
+	let F = te(() => ({
+		clipped: _,
+		current: k,
+		descriptionText: C,
+		disabled: j,
+		expanded: O,
+		flyoutOpen: ie,
+		hasGroup: m,
+		hasLink: f,
+		holdsCurrent: A,
+		ids: {
+			groupId: `${d}group`,
+			labelId: `${d}label`,
+			triggerId: `${d}trigger`
+		},
+		labelText: b,
+		reportCurrent: N,
+		setClipped: ee,
+		setDescriptionText: T,
+		setHasGroup: h,
+		setHasLink: p,
+		setLabelText: x,
+		setTriggerNode: ne,
+		triggerNode: E,
+		value: o
+	}), [
+		d,
+		_,
+		k,
+		C,
+		O,
+		ie,
+		m,
+		f,
+		A,
+		b,
+		N,
+		j,
+		E,
+		o
+	]), ae = k || A && (!O || c.compact), oe = u({
+		...s,
+		children: e,
+		className: t,
+		...ae ? { "data-current": "" } : {},
+		...j ? { "data-disabled": "" } : {},
+		...O ? { "data-expanded": "" } : {},
+		...ie ? { "data-open": "" } : {},
+		"data-part": "item",
+		"data-value": o,
+		style: a
+	});
+	return /* @__PURE__ */ w(B.Provider, {
+		value: F,
+		children: i === void 0 ? /* @__PURE__ */ w("li", {
+			...oe,
+			ref: r
+		}) : i(oe)
+	});
+}
+function G({ children: e, enabled: t }) {
+	let n = V();
+	return /* @__PURE__ */ T(i, {
+		describes: "description",
+		disabled: !t,
+		openOn: "hover",
+		side: "inline-end",
+		children: [e, /* @__PURE__ */ w(s, { children: /* @__PURE__ */ T(o, { children: [n.labelText, n.descriptionText.length > 0 ? /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w("br", {}), n.descriptionText] }) : null] }) })]
+	});
+}
+function le({ children: e, className: t, current: n, href: r, onClick: i, ref: o, render: s, style: c, ...d }) {
+	let f = I(), p = V();
+	v(() => (p.setHasLink(!0), () => p.setHasLink(!1)), [p.setHasLink]);
+	let m = r !== void 0 || s !== void 0, h = n ?? (m && f.value === p.value), g = f.truncate === "middle" && p.clipped && p.labelText.length > 0, _ = (e) => {
+		if (i?.(e), p.disabled) {
+			e.preventDefault();
+			return;
+		}
+		if (e.defaultPrevented) return;
+		let t = z(e);
+		m && f.select(p.value, t, e.nativeEvent), f.flyout !== null && f.compact && f.setFlyout(null, "select", e.nativeEvent);
+	}, y = u({
+		...d,
+		...h ? { "aria-current": "page" } : {},
+		...p.disabled ? { "aria-disabled": "true" } : {},
+		...g ? { "aria-label": p.labelText } : {},
+		children: e,
+		className: t,
+		...h ? { "data-current": "" } : {},
+		"data-part": "link",
+		...r === void 0 ? {} : { href: r },
+		onClick: _,
+		style: c
+	});
+	return /* @__PURE__ */ w(G, {
+		enabled: f.compact || p.clipped,
+		children: /* @__PURE__ */ w(a, {
+			...y,
+			render: (e) => {
+				let t = (t) => {
+					e.ref?.(t), R(t, o);
+				}, n = {
+					...e,
+					ref: t
+				};
+				return s === void 0 ? r === void 0 ? /* @__PURE__ */ w("button", {
+					...n,
+					type: "button"
+				}) : /* @__PURE__ */ w("a", { ...n }) : s(l(n));
+			}
+		})
+	});
+}
+function ue({ children: n, className: r, onClick: i, ref: o, render: s, style: c, ...l }) {
+	let d = I(), f = V(), p = f.hasLink, m = (e) => {
+		if (i?.(e), e.defaultPrevented) return;
+		let t = z(e);
+		if (d.compact && !p) {
+			d.setFlyout(f.flyoutOpen ? null : f.value, t, e.nativeEvent);
+			return;
+		}
+		d.toggleExpanded(f.value, !f.expanded, t, e.nativeEvent);
+	}, h = u({
+		...l,
+		"aria-controls": f.ids.groupId,
+		"aria-expanded": f.flyoutOpen || f.expanded,
+		...p ? { "aria-labelledby": f.ids.labelId } : {},
+		children: /* @__PURE__ */ T(C, { children: [n, /* @__PURE__ */ w("span", {
+			"aria-hidden": "true",
+			"data-part": "indicator",
+			"data-part-indicator": "",
+			children: /* @__PURE__ */ w(t, {
+				directional: !0,
+				children: /* @__PURE__ */ w(e, { name: "chevron-right" })
+			})
+		})] }),
+		className: r,
+		"data-part": "trigger",
+		disabled: f.disabled,
+		id: f.ids.triggerId,
+		onClick: m,
+		style: c,
+		type: "button"
+	}), _ = g((e) => {
+		f.setTriggerNode(e), R(e, o);
+	}, [f.setTriggerNode, o]);
+	return /* @__PURE__ */ w(G, {
+		enabled: !p && (d.compact || f.clipped),
+		children: /* @__PURE__ */ w(a, {
+			...h,
+			render: (e) => {
+				let t = (t) => {
+					e.ref?.(t), _(t);
+				}, n = {
+					...e,
+					ref: t
+				};
+				return s === void 0 ? /* @__PURE__ */ w("button", { ...n }) : s(n);
+			}
+		})
+	});
+}
+function de({ children: e, ref: t, render: n, ...r }) {
+	let i = u({
+		...r,
+		"aria-hidden": !0,
+		children: e,
+		"data-part": "icon"
+	});
+	return n === void 0 ? /* @__PURE__ */ w("span", {
+		...i,
+		ref: t
+	}) : n(i);
+}
+function fe({ children: e, ref: t, render: n, ...r }) {
+	let i = I(), a = V(), [o, s] = S(null), [c, l] = S(null), d = typeof e == "string" ? e : null;
+	b(() => {
+		if (o === null) return;
+		let e = d ?? o.textContent ?? "";
+		a.setLabelText(e);
+	}, [
+		a.setLabelText,
+		o,
+		d
+	]), b(() => {
+		if (o !== null) {
+			if (i.truncate === "none" || i.compact) {
+				l(null), a.setClipped(i.compact);
+				return;
+			}
+			if (i.truncate === "middle" && d !== null) {
+				let e = getComputedStyle(o), t = o.ownerDocument.createElement("canvas").getContext("2d"), n = o.clientWidth;
+				if (t === null || n === 0) return;
+				t.font = `${e.fontStyle} ${e.fontWeight} ${e.fontSize} ${e.fontFamily}`;
+				let r = A(d, (e) => t.measureText(e).width <= n);
+				l(r === d ? null : r), a.setClipped(r !== d);
+				return;
+			}
+			l(null), a.setClipped(o.scrollWidth > o.clientWidth + 1);
+		}
+	}, [
+		a.setClipped,
+		i.compact,
+		i.measureTick,
+		i.truncate,
+		o,
+		d
+	]);
+	let f = u({
+		...r,
+		children: c ?? e,
+		"data-part": "label",
+		id: a.ids.labelId
+	});
+	return n === void 0 ? /* @__PURE__ */ w("span", {
+		...f,
+		ref: (e) => {
+			s(e), R(e, t);
+		}
+	}) : n(f);
+}
+function pe({ children: e, ref: t, render: n, ...r }) {
+	let i = V(), [a, o] = S(null);
+	b(() => {
+		a !== null && i.setDescriptionText(a.textContent ?? "");
+	}, [
+		e,
+		i.setDescriptionText,
+		a
+	]);
+	let s = u({
+		...r,
+		children: e,
+		"data-part": "description"
+	});
+	return n === void 0 ? /* @__PURE__ */ w("span", {
+		...s,
+		ref: (e) => {
+			o(e), R(e, t);
+		}
+	}) : n(s);
+}
+function me({ children: e, ref: t, render: n, ...r }) {
+	let i = u({
+		...r,
+		children: e,
+		"data-part": "count"
+	});
+	return n === void 0 ? /* @__PURE__ */ w("span", {
+		...i,
+		ref: t
+	}) : n(i);
+}
+function K({ children: e, ref: t, render: n, ...r }) {
+	let i = u({
+		...r,
+		children: e,
+		"data-part": "end"
+	});
+	return n === void 0 ? /* @__PURE__ */ w("span", {
+		...i,
+		ref: t
+	}) : n(i);
+}
+function q({ children: e, ref: t, render: n, ...r }) {
+	let i = u({
+		...r,
+		children: e,
+		"data-part": "actions"
+	});
+	return n === void 0 ? /* @__PURE__ */ w("div", {
+		...i,
+		ref: t
+	}) : n(i);
+}
+function J({ ref: e, render: t, ...n }) {
+	let r = u({
+		...n,
+		"data-part": "divider",
+		role: "separator"
+	});
+	return t === void 0 ? /* @__PURE__ */ w("li", {
+		...r,
+		ref: e
+	}) : t(r);
+}
+function Y({ labelSize: e = "60%", ref: t, ...n }) {
+	return /* @__PURE__ */ T("li", {
+		...d(n, "part", "skeleton"),
+		"aria-hidden": "true",
+		ref: t,
+		children: [/* @__PURE__ */ w("span", {
+			"data-part": "icon",
+			"data-part-icon": "",
+			children: /* @__PURE__ */ w(c, {
+				shape: "square",
+				size: "xs"
+			})
+		}), /* @__PURE__ */ w("span", {
+			"data-part": "label",
+			"data-part-label": "",
+			children: /* @__PURE__ */ w(c, {
+				inlineSize: e,
+				shape: "text"
+			})
+		})]
+	});
+}
+function he({ children: e, onExited: t, open: n }) {
+	let r = I(), i = V(), [a, o] = S(null), [s, c] = S(null), [l, u] = S("unmounted"), f = x(null), p = x({
+		navigation: r,
+		onExited: t,
+		open: n
+	});
+	p.current = {
+		navigation: r,
+		onExited: t,
+		open: n
+	}, v(() => {
+		let e = E({
+			present: n,
+			onStatusChange: u
+		});
+		return f.current = e, u(e.status), () => {
+			e.destroy(), f.current = null;
+		};
+	}, []), v(() => {
+		f.current?.sync(n);
+	}, [n]), v(() => {
+		f.current?.setNode(a);
+	}, [a]);
+	let m = x(!1);
+	v(() => {
+		l === "unmounted" ? m.current && p.current.onExited() : m.current = !0;
+	}, [l]);
+	let h = i.triggerNode;
+	b(() => {
+		let e = ne({ origin: h });
+		return c(e.container), () => e.release();
+	}, [h]);
+	let _ = x(null), y = g((e, t) => {
+		e.update().then(() => {
+			_.current === e && p.current.open && t.setAttribute("data-open", "");
+		});
+	}, []);
+	b(() => {
+		if (a === null || h === null) return;
+		let e = re(h, a, {
+			align: "start",
+			flip: !0,
+			shift: !0,
+			side: "inline-end",
+			sideOffset: 0,
+			strategy: "fixed"
+		});
+		return _.current = e, p.current.open && y(e, a), () => {
+			e.destroy(), _.current = null, a.removeAttribute("data-open");
+		};
+	}, [
+		h,
+		a,
+		y
+	]), b(() => {
+		let e = _.current;
+		e !== null && a !== null && (n ? y(e, a) : a.removeAttribute("data-open"));
+	}, [
+		a,
+		n,
+		y
+	]), v(() => {
+		if (a === null || !n) return;
+		let e = D(a, {
+			escape: !0,
+			focusOutside: !1,
+			modal: !1,
+			outsidePress: !0,
+			scrollLock: !1,
+			...h ? { branches: [h] } : {},
+			onDismiss: (e) => {
+				let t = e.reason === "escape" ? "escape" : "outsidePress";
+				p.current.navigation.setFlyout(null, t, e.source), t === "escape" && h?.focus();
+			}
+		});
+		return () => e.destroy();
+	}, [
+		h,
+		a,
+		n
+	]), v(() => (p.current.navigation.setFlyoutNode(n ? a : null), () => p.current.navigation.setFlyoutNode(null)), [a, n]);
+	let ee = (e) => {
+		let t = e.relatedTarget;
+		t !== null && a !== null && (a.contains(t) || h?.contains(t) || r.setFlyout(null, "blur", e.nativeEvent));
+	};
+	return s === null ? null : O(/* @__PURE__ */ w("div", {
+		...d(r.guides ? { "data-guides": "" } : {}, "part", "flyout"),
+		"data-size": r.size,
+		"data-truncate": r.truncate,
+		"data-ui": "side-navigation",
+		"data-ui-side-navigation": "",
+		onBlur: ee,
+		ref: o,
+		children: e
+	}), s);
+}
+function ge({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = V(), [s, c] = S(!1);
+	v(() => (o.setHasGroup(!0), () => o.setHasGroup(!1)), [o.setHasGroup]), v(() => {
+		o.flyoutOpen && c(!0);
+	}, [o.flyoutOpen]);
+	let l = u({
+		...a,
+		"aria-labelledby": o.ids.labelId,
+		children: e,
+		className: t,
+		"data-part": "group",
+		id: o.ids.groupId,
+		style: i
+	}), d = r === void 0 ? /* @__PURE__ */ w("ul", {
+		...l,
+		ref: n
+	}) : r(l);
+	return s ? /* @__PURE__ */ w(he, {
+		onExited: () => c(!1),
+		open: o.flyoutOpen,
+		children: d
+	}) : d;
+}
+//#endregion
+export { N as S, F as _, K as a, j as b, W as c, U as d, ce as f, V as g, ue as h, J as i, fe as l, Y as m, me as n, ge as o, H as p, pe as r, de as s, q as t, le as u, L as v, P as x, I as y };