@webority/ui-react 0.37.0 → 0.39.0

package/dist/components/AppShell.js

@@ -1,712 +1 @@
-import e from "./warnInvalidValue.js";
-import t from "./warnUnknownProps.js";
-import n from "./AppIcon.js";
-import r from "./AppAvatar.js";
-import { navMatchScore as i } from "../lib/navMatch.js";
-import { readShellCollapsed as a, writeShellCollapsed as o } from "../lib/shellCookie.js";
-import { useEffect as s, useId as c, useMemo as l, useRef as u, useState as d } from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/components/AppShell.jsx
-var h = 99, g = 4, _ = 5, v = ["prefix", "exact"], y = (e) => e > h ? `${h}+` : String(e);
-function b({ groups: e = [], brand: r, sidebarStart: i, sidebarStartCompact: c, sidebarFooter: u, topbarStart: f, topbarEnd: h, footer: g, children: _, collapsed: v, onCollapsedChange: y, noSidebar: b = !1, navLabel: T = "Main navigation", linkComponent: O, currentPath: A, rememberCollapsed: j = !1, collapsedCookie: M = "wui-shell-collapsed", tabBarLabel: N = "Quick navigation", moreLabel: P = "More", userMenu: F, notifications: I, search: L, className: R = "", ...z }) {
-	t("AppShell", z);
-	let [B, V] = d(() => j && v === void 0 && typeof document < "u" ? a(M) ?? !1 : !1), [H, U] = d(!1), [W, G] = d(!1), K = v ?? B, q = () => {
-		let e = !K;
-		v === void 0 && V(e), j && o(e, M), y?.(e);
-	}, J = l(() => x(e, A), [e, A]), Y = b ? null : S(J);
-	return s(() => {
-		let e = () => G(window.scrollY > 4);
-		return e(), window.addEventListener("scroll", e, { passive: !0 }), () => window.removeEventListener("scroll", e);
-	}, []), s(() => {
-		if (!H) return;
-		let e = (e) => {
-			e.key === "Escape" && U(!1);
-		};
-		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [H]), /* @__PURE__ */ m("div", {
-		className: [
-			"app-shell",
-			K ? "collapsed" : "",
-			b ? "no-sidebar" : "",
-			H ? "mobile-open" : "",
-			R
-		].filter(Boolean).join(" "),
-		...z,
-		children: [
-			/* @__PURE__ */ m("aside", {
-				className: "app-sidebar",
-				children: [
-					r && /* @__PURE__ */ p("div", {
-						className: "app-sidebar-brand",
-						children: r
-					}),
-					i && /* @__PURE__ */ p("div", {
-						className: "app-sidebar-start",
-						children: i
-					}),
-					c && /* @__PURE__ */ p("div", {
-						className: "app-sidebar-start-compact",
-						children: c
-					}),
-					/* @__PURE__ */ p("nav", {
-						className: "app-sidebar-scroll",
-						"aria-label": T,
-						children: J.map((e, t) => /* @__PURE__ */ m("div", {
-							className: "app-nav-group",
-							children: [
-								e.label && /* @__PURE__ */ p("div", {
-									className: "app-nav-group-label",
-									children: e.label
-								}),
-								e.items.map((e) => /* @__PURE__ */ p(w, {
-									item: e,
-									linkComponent: O,
-									onNavigate: () => U(!1)
-								}, e.key ?? e.href ?? e.label)),
-								e.after && /* @__PURE__ */ p("div", {
-									className: "wui-nav-group-after",
-									children: e.after
-								})
-							]
-						}, e.label ?? `group-${t}`))
-					}),
-					u && /* @__PURE__ */ p("div", {
-						className: "app-sidebar-foot",
-						children: u
-					}),
-					!b && /* @__PURE__ */ p("button", {
-						type: "button",
-						className: "app-sidebar-toggle",
-						onClick: q,
-						"aria-label": K ? "Expand navigation" : "Collapse navigation",
-						"aria-expanded": !K,
-						children: /* @__PURE__ */ p(n, {
-							name: "chevrons-left",
-							size: 20
-						})
-					})
-				]
-			}),
-			/* @__PURE__ */ m("div", {
-				className: "app-main",
-				children: [
-					/* @__PURE__ */ m("header", {
-						className: `app-topbar${W ? " scrolled" : ""}`,
-						children: [/* @__PURE__ */ m("div", {
-							className: "app-topbar-start",
-							children: [
-								/* @__PURE__ */ p("button", {
-									type: "button",
-									className: "app-topbar-menu",
-									onClick: () => U(!0),
-									"aria-label": "Open navigation",
-									"aria-expanded": H,
-									children: /* @__PURE__ */ p(n, {
-										name: "menu",
-										size: 18
-									})
-								}),
-								f,
-								L && /* @__PURE__ */ p(k, { config: L })
-							]
-						}), /* @__PURE__ */ m("div", {
-							className: "app-topbar-end",
-							children: [
-								h,
-								I && /* @__PURE__ */ p(D, { config: I }),
-								F && /* @__PURE__ */ p(E, {
-									config: F,
-									linkComponent: O
-								})
-							]
-						})]
-					}),
-					/* @__PURE__ */ p("main", {
-						className: "app-content",
-						children: _
-					}),
-					g && /* @__PURE__ */ p("footer", {
-						className: "app-footer",
-						children: g
-					})
-				]
-			}),
-			Y && /* @__PURE__ */ m("nav", {
-				className: "wui-tabbar",
-				"aria-label": N,
-				children: [Y.tabs.map((e) => /* @__PURE__ */ p(C, {
-					tab: e,
-					linkComponent: O
-				}, e.key ?? e.href)), Y.hasMore && /* @__PURE__ */ m("button", {
-					type: "button",
-					className: `wui-tabbar-item${Y.moreActive ? " active" : ""}`,
-					onClick: () => U(!0),
-					children: [/* @__PURE__ */ p("span", {
-						className: "wui-tabbar-icon",
-						children: /* @__PURE__ */ p(n, {
-							name: "more",
-							size: 24
-						})
-					}), /* @__PURE__ */ p("span", {
-						className: "wui-tabbar-label",
-						children: P
-					})]
-				})]
-			}),
-			/* @__PURE__ */ p("button", {
-				type: "button",
-				className: "app-scrim",
-				onClick: () => U(!1),
-				"aria-label": "Close navigation",
-				tabIndex: H ? 0 : -1
-			})
-		]
-	});
-}
-function x(t, n) {
-	let r = (e) => (e ?? []).map((e) => Array.isArray(e.children) ? {
-		...e,
-		children: r(e.children)
-	} : { ...e }).filter((e) => (e.children?.length ?? 0) > 0 || !!e.href), a = t.map((e) => ({
-		...e,
-		items: r(e.items)
-	})).filter((e) => e.items.length > 0), o = [], s = (e) => {
-		for (let t of e) o.push(t), t.children && s(t.children);
-	};
-	for (let e of a) s(e.items);
-	for (let t of o) e("AppShell", "match", t.match, v);
-	let c = null;
-	if (n != null && !o.some((e) => e.active === !0)) {
-		let e = -1;
-		for (let t of o) {
-			if (t.active != null || t.children?.length) continue;
-			let r = i(n, t.href, {
-				exact: t.match === "exact",
-				also: t.matchAlso
-			});
-			r > e && (e = r, c = t);
-		}
-	}
-	for (let e of o) e.active = e.active ?? e === c;
-	return a;
-}
-function S(e) {
-	let t = [], n = (e) => {
-		for (let r of e) r.children?.length ? n(r.children) : t.push(r);
-	};
-	for (let t of e) n(t.items);
-	let r = t.filter((e) => e.tab);
-	if (r.length === 0) return null;
-	let i = r.length < t.length, a = i ? g : _;
-	if (r.length > a) throw Error(`<AppShell>: ${r.length} items carry tab: true, but the phone tab bar holds ${a} (${i ? "4 plus More, because other items exist" : "5 when every item is a tab"}). Flag fewer items.`);
-	return {
-		tabs: r,
-		hasMore: i,
-		moreActive: t.some((e) => !e.tab && e.active)
-	};
-}
-function C({ tab: e, linkComponent: t }) {
-	let r = `wui-tabbar-item${e.active ? " active" : ""}`, i = /* @__PURE__ */ m(f, { children: [
-		e.icon && /* @__PURE__ */ p("span", {
-			className: "wui-tabbar-icon",
-			children: typeof e.icon == "string" ? /* @__PURE__ */ p(n, {
-				name: e.icon,
-				size: 24
-			}) : e.icon
-		}),
-		/* @__PURE__ */ p("span", {
-			className: "wui-tabbar-label",
-			children: e.tabLabel ?? e.label
-		}),
-		e.badge != null && /* @__PURE__ */ p("span", {
-			className: `wui-tabbar-badge${e.badgeTone ? ` tone-${e.badgeTone}` : ""}`,
-			children: e.badge
-		})
-	] }), a = e.active ? "page" : void 0;
-	return t ? /* @__PURE__ */ p(t, {
-		className: r,
-		to: e.href,
-		"aria-current": a,
-		children: i
-	}) : /* @__PURE__ */ p("a", {
-		className: r,
-		href: e.href,
-		"aria-current": a,
-		children: i
-	});
-}
-function w({ item: e, linkComponent: t, onNavigate: r, depth: i = 0 }) {
-	let a = i > 0, o = i > 1 ? { "--wui-nav-depth": i } : void 0, c = Array.isArray(e.children) && e.children.length > 0, l = c && e.children.some((e) => e.active), [u, h] = d(l);
-	s(() => {
-		l && !u && h(!0);
-	}, [l, u]);
-	let g = typeof e.label == "string" ? e.label : void 0, _ = !a && e.icon && /* @__PURE__ */ p("span", {
-		className: "app-nav-icon",
-		children: typeof e.icon == "string" ? /* @__PURE__ */ p(n, {
-			name: e.icon,
-			size: 22
-		}) : e.icon
-	}), v = e.badge != null && /* @__PURE__ */ p("span", {
-		className: `app-nav-badge${e.badgeTone ? ` tone-${e.badgeTone}` : ""}`,
-		children: e.badge
-	});
-	if (c) return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("button", {
-		type: "button",
-		className: `app-nav-item${a ? " app-nav-subitem" : ""} has-children${l ? " active" : ""}`,
-		style: o,
-		"aria-expanded": u,
-		"data-label": g,
-		onClick: () => h((e) => !e),
-		children: [
-			_,
-			/* @__PURE__ */ p("span", {
-				className: "app-nav-text",
-				children: e.label
-			}),
-			v,
-			/* @__PURE__ */ p("span", {
-				className: "app-nav-caret",
-				children: /* @__PURE__ */ p(n, {
-					name: "chevron-right",
-					size: 16
-				})
-			})
-		]
-	}), /* @__PURE__ */ p("div", {
-		className: `app-nav-sub${u ? " expanded" : ""}`,
-		inert: !u,
-		"aria-hidden": !u || void 0,
-		children: /* @__PURE__ */ p("div", {
-			className: "app-nav-sub-inner",
-			children: e.children.map((e) => /* @__PURE__ */ p(w, {
-				item: e,
-				linkComponent: t,
-				onNavigate: r,
-				depth: i + 1
-			}, e.key ?? e.href))
-		})
-	})] });
-	let y = `app-nav-item${a ? " app-nav-subitem" : ""}${e.active ? " active" : ""}`, b = /* @__PURE__ */ m(f, { children: [
-		_,
-		/* @__PURE__ */ p("span", {
-			className: "app-nav-text",
-			children: e.label
-		}),
-		v,
-		e.trailingIcon && /* @__PURE__ */ p("span", {
-			className: "app-nav-trailing",
-			children: typeof e.trailingIcon == "string" ? /* @__PURE__ */ p(n, {
-				name: e.trailingIcon,
-				size: 16
-			}) : e.trailingIcon
-		})
-	] }), x = e.active ? "page" : void 0;
-	return t ? /* @__PURE__ */ p(t, {
-		className: y,
-		style: o,
-		to: e.href,
-		"aria-current": x,
-		"data-label": g,
-		onClick: r,
-		children: b
-	}) : /* @__PURE__ */ p("a", {
-		className: y,
-		style: o,
-		href: e.href,
-		"aria-current": x,
-		"data-label": g,
-		onClick: r,
-		children: b
-	});
-}
-function T() {
-	let [e, t] = d(!1), n = u(null);
-	return s(() => {
-		if (!e) return;
-		let r = (e) => {
-			n.current?.contains(e.target) || t(!1);
-		}, i = (e) => {
-			e.key === "Escape" && (t(!1), n.current?.querySelector("button")?.focus());
-		};
-		return document.addEventListener("mousedown", r), document.addEventListener("keydown", i), () => {
-			document.removeEventListener("mousedown", r), document.removeEventListener("keydown", i);
-		};
-	}, [e]), {
-		open: e,
-		setOpen: t,
-		ref: n
-	};
-}
-function E({ config: e, linkComponent: t }) {
-	let i = c(), { open: a, setOpen: o, ref: s } = T(), { name: l, role: u, photo: d, profileHref: h, profileLabel: g = "My profile", onLogout: _, logoutAction: v, logoutLabel: y = "Sign out", items: b = [] } = e;
-	if (!l) throw Error("<AppShell> userMenu.name is required; the trigger and the avatar are named from it.");
-	let x = () => o(!1), S = (e, n, r, i) => t ? /* @__PURE__ */ p(t, {
-		className: "dropdown-item",
-		to: e,
-		onClick: i,
-		children: n
-	}, r) : /* @__PURE__ */ p("a", {
-		className: "dropdown-item",
-		href: e,
-		onClick: i,
-		children: n
-	}, r), C = /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(n, {
-		name: "log-out",
-		size: 18
-	}), y] });
-	return /* @__PURE__ */ m("div", {
-		className: "dropdown wui-usermenu",
-		ref: s,
-		children: [/* @__PURE__ */ m("button", {
-			type: "button",
-			id: i,
-			className: "wui-usermenu-trigger",
-			"aria-expanded": a,
-			"aria-label": `Account menu for ${l}`,
-			onClick: () => o((e) => !e),
-			children: [
-				/* @__PURE__ */ p(r, {
-					name: l,
-					src: d,
-					tone: "auto"
-				}),
-				/* @__PURE__ */ m("span", {
-					className: "wui-usermenu-text",
-					children: [/* @__PURE__ */ p("span", {
-						className: "wui-usermenu-name",
-						children: l
-					}), u && /* @__PURE__ */ p("span", {
-						className: "wui-usermenu-role",
-						children: u
-					})]
-				}),
-				/* @__PURE__ */ p(n, {
-					name: "chevron-down",
-					size: 14,
-					className: "wui-usermenu-caret"
-				})
-			]
-		}), /* @__PURE__ */ m("div", {
-			className: `dropdown-menu dropdown-menu-end wui-usermenu-menu${a ? " show" : ""}`,
-			"aria-labelledby": i,
-			"data-bs-popper": a ? "static" : void 0,
-			children: [
-				/* @__PURE__ */ m("div", {
-					className: "wui-usermenu-head",
-					children: [/* @__PURE__ */ p(r, {
-						name: l,
-						src: d,
-						size: "lg",
-						tone: "auto"
-					}), /* @__PURE__ */ m("div", {
-						className: "wui-usermenu-who",
-						children: [/* @__PURE__ */ p("div", {
-							className: "wui-usermenu-name",
-							children: l
-						}), u && /* @__PURE__ */ p("div", {
-							className: "wui-usermenu-role",
-							children: u
-						})]
-					})]
-				}),
-				h && S(h, /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(n, {
-					name: "user",
-					size: 18
-				}), g] }), void 0, x),
-				b.map((e) => {
-					if (e.divider) return /* @__PURE__ */ p("hr", { className: "dropdown-divider" }, e.key);
-					let t = /* @__PURE__ */ m(f, { children: [e.icon && /* @__PURE__ */ p(n, {
-						name: e.icon,
-						size: 18
-					}), e.label] }), r = () => {
-						e.onClick?.(), x();
-					};
-					return e.href ? S(e.href, t, e.key, r) : /* @__PURE__ */ p("button", {
-						type: "button",
-						className: "dropdown-item",
-						onClick: r,
-						children: t
-					}, e.key);
-				}),
-				v ? /* @__PURE__ */ p("form", {
-					method: "post",
-					action: v,
-					className: "wui-usermenu-logout",
-					children: /* @__PURE__ */ p("button", {
-						type: "submit",
-						className: "dropdown-item danger",
-						children: C
-					})
-				}) : _ && /* @__PURE__ */ p("button", {
-					type: "button",
-					className: "dropdown-item danger",
-					onClick: () => {
-						x(), _();
-					},
-					children: C
-				})
-			]
-		})]
-	});
-}
-function D({ config: e }) {
-	let t = c(), { open: r, setOpen: i, ref: a } = T(), { unread: o = 0, items: l, loading: h = !1, onOpen: g, onMarkAllRead: _, viewAllHref: v, label: b = "Notifications", emptyText: x = "You are all caught up." } = e, [S, C] = d(""), w = u(o);
-	s(() => {
-		w.current !== o && (w.current = o, C(o === 0 ? "No unread notifications" : `${y(o)} unread notifications`));
-	}, [o]);
-	let E = null;
-	return l?.length ? E = /* @__PURE__ */ p("div", {
-		className: "wui-bell-items",
-		children: l.map((e, t) => {
-			let r = `wui-bell-item${e.read ? " wui-bell-item-read" : ""}`, i = /* @__PURE__ */ m(f, { children: [
-				/* @__PURE__ */ p("span", {
-					className: "wui-bell-dot",
-					"aria-hidden": "true"
-				}),
-				e.icon && /* @__PURE__ */ p("span", {
-					className: "wui-bell-icon",
-					children: /* @__PURE__ */ p(n, {
-						name: e.icon,
-						size: 18
-					})
-				}),
-				/* @__PURE__ */ m("span", {
-					className: "wui-bell-body",
-					children: [
-						!e.read && /* @__PURE__ */ p("span", {
-							className: "visually-hidden",
-							children: "Unread: "
-						}),
-						/* @__PURE__ */ p("span", {
-							className: "wui-bell-item-title",
-							children: e.title
-						}),
-						e.time && /* @__PURE__ */ p("span", {
-							className: "wui-bell-when",
-							children: e.time
-						})
-					]
-				})
-			] });
-			return e.href ? /* @__PURE__ */ p("a", {
-				className: r,
-				href: e.href,
-				"data-id": e.id,
-				children: i
-			}, e.id ?? t) : /* @__PURE__ */ p("div", {
-				className: r,
-				"data-id": e.id,
-				children: i
-			}, e.id ?? t);
-		})
-	}) : h ? E = /* @__PURE__ */ p("div", {
-		className: "wui-bell-state",
-		children: "Loading…"
-	}) : l && (E = /* @__PURE__ */ p("div", {
-		className: "wui-bell-state",
-		children: x
-	})), /* @__PURE__ */ m("div", {
-		className: "dropdown wui-bell",
-		ref: a,
-		children: [
-			/* @__PURE__ */ m("button", {
-				type: "button",
-				id: t,
-				className: "topbar-icon-btn wui-bell-trigger",
-				"aria-expanded": r,
-				"aria-label": o === 0 ? b : `${b}, ${y(o)} unread`,
-				onClick: () => {
-					let e = !r;
-					i(e), e && g?.();
-				},
-				children: [/* @__PURE__ */ p(n, {
-					name: "notification",
-					size: 20
-				}), /* @__PURE__ */ p("span", {
-					className: "wui-bell-count",
-					"aria-hidden": "true",
-					hidden: o === 0,
-					children: y(o)
-				})]
-			}),
-			/* @__PURE__ */ p("span", {
-				className: "visually-hidden",
-				"aria-live": "polite",
-				children: S
-			}),
-			/* @__PURE__ */ m("div", {
-				className: `dropdown-menu dropdown-menu-end wui-bell-menu${r ? " show" : ""}`,
-				"aria-labelledby": t,
-				"data-bs-popper": r ? "static" : void 0,
-				children: [
-					/* @__PURE__ */ m("div", {
-						className: "wui-bell-head",
-						children: [/* @__PURE__ */ p("span", {
-							className: "wui-bell-title",
-							children: b
-						}), _ && /* @__PURE__ */ p("button", {
-							type: "button",
-							className: "wui-bell-markall",
-							onClick: _,
-							children: "Mark all read"
-						})]
-					}),
-					/* @__PURE__ */ p("div", {
-						className: "wui-bell-list",
-						"aria-busy": h || void 0,
-						children: E
-					}),
-					v && /* @__PURE__ */ p("a", {
-						className: "wui-bell-foot",
-						href: v,
-						children: "View all"
-					})
-				]
-			})
-		]
-	});
-}
-var O = (e) => !!e && (e.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));
-function k({ config: e }) {
-	let t = c(), { value: r = "", onChange: i, results: a = null, loading: o = !1, onSelect: f, onSubmit: h, placeholder: g = "Search" } = e, [_, v] = d(!1), [y, b] = d(!1), [x, S] = d({
-		results: null,
-		index: -1
-	}), C = x.results === a ? x.index : -1, w = (e) => S({
-		results: a,
-		index: e
-	}), T = u(null), E = u(null), D = u([]), k = l(() => (a ?? []).flatMap((e) => e.hits ?? []), [a]), A = a != null && !y, j = k.length;
-	s(() => {
-		let e = (e) => {
-			e.key !== "/" || e.ctrlKey || e.metaKey || e.altKey || O(e.target) || (e.preventDefault(), v(!0), E.current?.focus());
-		}, t = (e) => {
-			T.current?.contains(e.target) || (b(!0), v(!1));
-		};
-		return document.addEventListener("keydown", e), document.addEventListener("pointerdown", t), () => {
-			document.removeEventListener("keydown", e), document.removeEventListener("pointerdown", t);
-		};
-	}, []);
-	let M = (e) => {
-		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-			if (!A || j === 0) return;
-			e.preventDefault(), w((C + (e.key === "ArrowDown" ? 1 : -1) + j) % j);
-		} else e.key === "Enter" ? A && C >= 0 && D.current[C] ? (e.preventDefault(), D.current[C].click()) : h && r.trim() !== "" && (e.preventDefault(), h(r.trim())) : e.key === "Escape" && (A ? (e.preventDefault(), b(!0)) : _ && (e.preventDefault(), v(!1)));
-	}, N = -1;
-	return D.current = [], /* @__PURE__ */ m("div", {
-		className: `wui-topsearch${_ ? " is-open" : ""}${o ? " is-loading" : ""}`,
-		ref: T,
-		children: [
-			/* @__PURE__ */ p("button", {
-				type: "button",
-				className: "topbar-icon-btn wui-topsearch-open",
-				"aria-label": g,
-				"aria-expanded": _,
-				"aria-controls": `${t}-panel`,
-				onClick: () => {
-					let e = !_;
-					v(e), e && E.current?.focus();
-				},
-				children: /* @__PURE__ */ p(n, {
-					name: "search",
-					size: 20
-				})
-			}),
-			/* @__PURE__ */ m("div", {
-				className: "wui-topsearch-panel",
-				id: `${t}-panel`,
-				children: [/* @__PURE__ */ m("div", {
-					className: "search-wrap",
-					children: [/* @__PURE__ */ p(n, {
-						name: "search",
-						size: 18,
-						className: "search-icon"
-					}), /* @__PURE__ */ p("input", {
-						ref: E,
-						type: "search",
-						className: "form-control input search-input",
-						id: `${t}-input`,
-						placeholder: g,
-						"aria-label": g,
-						role: "combobox",
-						"aria-autocomplete": "list",
-						"aria-expanded": A,
-						"aria-controls": `${t}-list`,
-						"aria-activedescendant": A && C >= 0 ? `${t}-opt-${C}` : void 0,
-						autoComplete: "off",
-						value: r,
-						onChange: (e) => {
-							b(!1), i?.(e.target.value);
-						},
-						onKeyDown: M
-					})]
-				}), /* @__PURE__ */ p("div", {
-					className: "wui-topsearch-results",
-					id: `${t}-list`,
-					role: "listbox",
-					"aria-label": "Search results",
-					hidden: !A,
-					children: A && /* @__PURE__ */ m("div", {
-						className: "wui-topsearch-groups",
-						role: "presentation",
-						children: [j === 0 && /* @__PURE__ */ m("div", {
-							className: "wui-topsearch-empty",
-							role: "option",
-							"aria-disabled": "true",
-							"aria-selected": "false",
-							children: [
-								"No results for “",
-								r,
-								"”"
-							]
-						}), a.filter((e) => e.hits?.length).map((e, r) => /* @__PURE__ */ m("div", {
-							className: "wui-topsearch-group",
-							role: "group",
-							"aria-label": e.label ?? "",
-							children: [e.label && /* @__PURE__ */ p("div", {
-								className: "wui-topsearch-group-label",
-								role: "presentation",
-								children: e.label
-							}), e.hits.map((e) => {
-								N += 1;
-								let r = N;
-								return /* @__PURE__ */ m("a", {
-									className: `wui-topsearch-hit${r === C ? " is-active" : ""}`,
-									role: "option",
-									"aria-selected": r === C,
-									id: `${t}-opt-${r}`,
-									href: e.href,
-									ref: (e) => {
-										D.current[r] = e;
-									},
-									onClick: (t) => f?.(e, t),
-									children: [e.icon && /* @__PURE__ */ p("span", {
-										className: "wui-topsearch-hit-icon",
-										children: /* @__PURE__ */ p(n, {
-											name: e.icon,
-											size: 18
-										})
-									}), /* @__PURE__ */ m("span", {
-										className: "wui-topsearch-hit-text",
-										children: [/* @__PURE__ */ p("span", {
-											className: "wui-topsearch-hit-title",
-											children: e.title
-										}), e.subtitle && /* @__PURE__ */ p("span", {
-											className: "wui-topsearch-hit-sub",
-											children: e.subtitle
-										})]
-									})]
-								}, `${e.href}-${r}`);
-							})]
-						}, e.label ?? r))]
-					})
-				})]
-			}),
-			/* @__PURE__ */ p("span", {
-				className: "visually-hidden",
-				"aria-live": "polite",
-				children: A ? j === 0 ? "No results" : `${j} ${j === 1 ? "result" : "results"}` : ""
-			})
-		]
-	});
-}
-//#endregion
-export { b as default };
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import r from"./AppAvatar.js";import{navMatchScore as i}from"../lib/navMatch.js";import{readShellCollapsed as a,writeShellCollapsed as o}from"../lib/shellCookie.js";import{initScrollEdges as s}from"@webority/ui-elements/helpers";import{useEffect as c,useId as l,useMemo as u,useRef as d,useState as f}from"react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";var g=99,_=4,v=5,y=[`prefix`,`exact`],b=e=>e>g?`${g}+`:String(e);function x({groups:e=[],brand:r,sidebarStart:i,sidebarStartCompact:l,sidebarFooter:d,topbarStart:p,topbarEnd:g,footer:_,children:v,collapsed:y,onCollapsedChange:b,noSidebar:x=!1,navLabel:E=`Main navigation`,linkComponent:k,currentPath:j,rememberCollapsed:M=!1,collapsedCookie:N=`wui-shell-collapsed`,tabBarLabel:P=`Quick navigation`,moreLabel:F=`More`,userMenu:I,notifications:L,search:R,className:z=``,...B}){t(`AppShell`,B);let[V,H]=f(()=>M&&y===void 0&&typeof document<`u`?a(N)??!1:!1),[U,W]=f(!1),[G,K]=f(!1),q=y??V,J=()=>{let e=!q;y===void 0&&H(e),M&&o(e,N),b?.(e)},Y=u(()=>S(e,j),[e,j]),X=x?null:C(Y);return c(()=>{let e=()=>K(window.scrollY>4);return e(),window.addEventListener(`scroll`,e,{passive:!0}),()=>window.removeEventListener(`scroll`,e)},[]),c(()=>{s()},[]),c(()=>{if(!U)return;let e=e=>{e.key===`Escape`&&W(!1)};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[U]),h(`div`,{className:[`app-shell`,q?`collapsed`:``,x?`no-sidebar`:``,U?`mobile-open`:``,z].filter(Boolean).join(` `),...B,children:[h(`aside`,{className:`app-sidebar`,children:[r&&m(`div`,{className:`app-sidebar-brand`,children:r}),i&&m(`div`,{className:`app-sidebar-start`,children:i}),l&&m(`div`,{className:`app-sidebar-start-compact`,children:l}),m(`nav`,{className:`app-sidebar-scroll`,"aria-label":E,children:Y.map((e,t)=>h(`div`,{className:`app-nav-group`,children:[e.label&&m(`div`,{className:`app-nav-group-label`,children:e.label}),e.items.map(e=>m(T,{item:e,linkComponent:k,onNavigate:()=>W(!1)},e.key??e.href??e.label)),e.after&&m(`div`,{className:`wui-nav-group-after`,children:e.after})]},e.label??`group-${t}`))}),d&&m(`div`,{className:`app-sidebar-foot`,children:d}),!x&&m(`button`,{type:`button`,className:`app-sidebar-toggle`,onClick:J,"aria-label":q?`Expand navigation`:`Collapse navigation`,"aria-expanded":!q,children:m(n,{name:`chevrons-left`,size:20})})]}),h(`div`,{className:`app-main`,children:[h(`header`,{className:`app-topbar${G?` scrolled`:``}`,children:[h(`div`,{className:`app-topbar-start`,children:[m(`button`,{type:`button`,className:`app-topbar-menu`,onClick:()=>W(!0),"aria-label":`Open navigation`,"aria-expanded":U,children:m(n,{name:`menu`,size:18})}),p,R&&m(A,{config:R})]}),h(`div`,{className:`app-topbar-end`,children:[g,L&&m(O,{config:L}),I&&m(D,{config:I,linkComponent:k})]})]}),m(`main`,{className:`app-content`,children:v}),_&&m(`footer`,{className:`app-footer`,children:_})]}),X&&h(`nav`,{className:`wui-tabbar`,"aria-label":P,children:[X.tabs.map(e=>m(w,{tab:e,linkComponent:k},e.key??e.href)),X.hasMore&&h(`button`,{type:`button`,className:`wui-tabbar-item${X.moreActive?` active`:``}`,onClick:()=>W(!0),children:[m(`span`,{className:`wui-tabbar-icon`,children:m(n,{name:`more`,size:24})}),m(`span`,{className:`wui-tabbar-label`,children:F})]})]}),m(`button`,{type:`button`,className:`app-scrim`,onClick:()=>W(!1),"aria-label":`Close navigation`,tabIndex:U?0:-1})]})}function S(t,n){let r=e=>(e??[]).map(e=>Array.isArray(e.children)?{...e,children:r(e.children)}:{...e}).filter(e=>(e.children?.length??0)>0||!!e.href),a=t.map(e=>({...e,items:r(e.items)})).filter(e=>e.items.length>0),o=[],s=e=>{for(let t of e)o.push(t),t.children&&s(t.children)};for(let e of a)s(e.items);for(let t of o)e(`AppShell`,`match`,t.match,y);let c=null;if(n!=null&&!o.some(e=>e.active===!0)){let e=-1;for(let t of o){if(t.active!=null||t.children?.length)continue;let r=i(n,t.href,{exact:t.match===`exact`,also:t.matchAlso});r>e&&(e=r,c=t)}}for(let e of o)e.active=e.active??e===c;return a}function C(e){let t=[],n=e=>{for(let r of e)r.children?.length?n(r.children):t.push(r)};for(let t of e)n(t.items);let r=t.filter(e=>e.tab);if(r.length===0)return null;let i=r.length<t.length,a=i?_:v;if(r.length>a)throw Error(`<AppShell>: ${r.length} items carry tab: true, but the phone tab bar holds ${a} (${i?`4 plus More, because other items exist`:`5 when every item is a tab`}). Flag fewer items.`);return{tabs:r,hasMore:i,moreActive:t.some(e=>!e.tab&&e.active)}}function w({tab:e,linkComponent:t}){let r=`wui-tabbar-item${e.active?` active`:``}`,i=h(p,{children:[e.icon&&m(`span`,{className:`wui-tabbar-icon`,children:typeof e.icon==`string`?m(n,{name:e.icon,size:24}):e.icon}),m(`span`,{className:`wui-tabbar-label`,children:e.tabLabel??e.label}),e.badge!=null&&m(`span`,{className:`wui-tabbar-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,children:e.badge})]}),a=e.active?`page`:void 0;return t?m(t,{className:r,to:e.href,"aria-current":a,children:i}):m(`a`,{className:r,href:e.href,"aria-current":a,children:i})}function T({item:e,linkComponent:t,onNavigate:r,depth:i=0}){let a=i>0,o=i>1?{"--wui-nav-depth":i}:void 0,s=Array.isArray(e.children)&&e.children.length>0,l=s&&e.children.some(e=>e.active),[u,d]=f(l);c(()=>{l&&!u&&d(!0)},[l,u]);let g=typeof e.label==`string`?e.label:void 0,_=!a&&e.icon&&m(`span`,{className:`app-nav-icon`,children:typeof e.icon==`string`?m(n,{name:e.icon,size:22}):e.icon}),v=e.badge!=null&&m(`span`,{className:`app-nav-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,children:e.badge});if(s)return h(p,{children:[h(`button`,{type:`button`,className:`app-nav-item${a?` app-nav-subitem`:``} has-children${l?` active`:``}`,style:o,"aria-expanded":u,"data-label":g,onClick:()=>d(e=>!e),children:[_,m(`span`,{className:`app-nav-text`,children:e.label}),v,m(`span`,{className:`app-nav-caret`,children:m(n,{name:`chevron-right`,size:16})})]}),m(`div`,{className:`app-nav-sub${u?` expanded`:``}`,inert:!u,"aria-hidden":!u||void 0,children:m(`div`,{className:`app-nav-sub-inner`,children:e.children.map(e=>m(T,{item:e,linkComponent:t,onNavigate:r,depth:i+1},e.key??e.href))})})]});let y=`app-nav-item${a?` app-nav-subitem`:``}${e.active?` active`:``}`,b=h(p,{children:[_,m(`span`,{className:`app-nav-text`,children:e.label}),v,e.trailingIcon&&m(`span`,{className:`app-nav-trailing`,children:typeof e.trailingIcon==`string`?m(n,{name:e.trailingIcon,size:16}):e.trailingIcon})]}),x=e.active?`page`:void 0;return t?m(t,{className:y,style:o,to:e.href,"aria-current":x,"data-label":g,onClick:r,children:b}):m(`a`,{className:y,style:o,href:e.href,"aria-current":x,"data-label":g,onClick:r,children:b})}function E(){let[e,t]=f(!1),n=d(null);return c(()=>{if(!e)return;let r=e=>{n.current?.contains(e.target)||t(!1)},i=e=>{e.key===`Escape`&&(t(!1),n.current?.querySelector(`button`)?.focus())};return document.addEventListener(`mousedown`,r),document.addEventListener(`keydown`,i),()=>{document.removeEventListener(`mousedown`,r),document.removeEventListener(`keydown`,i)}},[e]),{open:e,setOpen:t,ref:n}}function D({config:e,linkComponent:t}){let i=l(),{open:a,setOpen:o,ref:s}=E(),{name:c,role:u,photo:d,profileHref:f,profileLabel:g=`My profile`,onLogout:_,logoutAction:v,logoutLabel:y=`Sign out`,items:b=[]}=e;if(!c)throw Error(`<AppShell> userMenu.name is required; the trigger and the avatar are named from it.`);let x=()=>o(!1),S=(e,n,r,i)=>t?m(t,{className:`dropdown-item`,to:e,onClick:i,children:n},r):m(`a`,{className:`dropdown-item`,href:e,onClick:i,children:n},r),C=h(p,{children:[m(n,{name:`log-out`,size:18}),y]});return h(`div`,{className:`dropdown wui-usermenu`,ref:s,children:[h(`button`,{type:`button`,id:i,className:`wui-usermenu-trigger`,"aria-expanded":a,"aria-label":`Account menu for ${c}`,onClick:()=>o(e=>!e),children:[m(r,{name:c,src:d,tone:`auto`}),h(`span`,{className:`wui-usermenu-text`,children:[m(`span`,{className:`wui-usermenu-name`,children:c}),u&&m(`span`,{className:`wui-usermenu-role`,children:u})]}),m(n,{name:`chevron-down`,size:14,className:`wui-usermenu-caret`})]}),h(`div`,{className:`dropdown-menu dropdown-menu-end wui-usermenu-menu${a?` show`:``}`,"aria-labelledby":i,"data-bs-popper":a?`static`:void 0,children:[h(`div`,{className:`wui-usermenu-head`,children:[m(r,{name:c,src:d,size:`lg`,tone:`auto`}),h(`div`,{className:`wui-usermenu-who`,children:[m(`div`,{className:`wui-usermenu-name`,children:c}),u&&m(`div`,{className:`wui-usermenu-role`,children:u})]})]}),f&&S(f,h(p,{children:[m(n,{name:`user`,size:18}),g]}),void 0,x),b.map(e=>{if(e.divider)return m(`hr`,{className:`dropdown-divider`},e.key);let t=h(p,{children:[e.icon&&m(n,{name:e.icon,size:18}),e.label]}),r=()=>{e.onClick?.(),x()};return e.href?S(e.href,t,e.key,r):m(`button`,{type:`button`,className:`dropdown-item`,onClick:r,children:t},e.key)}),v?m(`form`,{method:`post`,action:v,className:`wui-usermenu-logout`,children:m(`button`,{type:`submit`,className:`dropdown-item danger`,children:C})}):_&&m(`button`,{type:`button`,className:`dropdown-item danger`,onClick:()=>{x(),_()},children:C})]})]})}function O({config:e}){let t=l(),{open:r,setOpen:i,ref:a}=E(),{unread:o=0,items:s,loading:u=!1,onOpen:g,onMarkAllRead:_,viewAllHref:v,label:y=`Notifications`,emptyText:x=`You are all caught up.`}=e,[S,C]=f(``),w=d(o);c(()=>{w.current!==o&&(w.current=o,C(o===0?`No unread notifications`:`${b(o)} unread notifications`))},[o]);let T=null;return s?.length?T=m(`div`,{className:`wui-bell-items`,children:s.map((e,t)=>{let r=`wui-bell-item${e.read?` wui-bell-item-read`:``}`,i=h(p,{children:[m(`span`,{className:`wui-bell-dot`,"aria-hidden":`true`}),e.icon&&m(`span`,{className:`wui-bell-icon`,children:m(n,{name:e.icon,size:18})}),h(`span`,{className:`wui-bell-body`,children:[!e.read&&m(`span`,{className:`visually-hidden`,children:`Unread: `}),m(`span`,{className:`wui-bell-item-title`,children:e.title}),e.time&&m(`span`,{className:`wui-bell-when`,children:e.time})]})]});return e.href?m(`a`,{className:r,href:e.href,"data-id":e.id,children:i},e.id??t):m(`div`,{className:r,"data-id":e.id,children:i},e.id??t)})}):u?T=m(`div`,{className:`wui-bell-state`,children:`Loading…`}):s&&(T=m(`div`,{className:`wui-bell-state`,children:x})),h(`div`,{className:`dropdown wui-bell`,ref:a,children:[h(`button`,{type:`button`,id:t,className:`topbar-icon-btn wui-bell-trigger`,"aria-expanded":r,"aria-label":o===0?y:`${y}, ${b(o)} unread`,onClick:()=>{let e=!r;i(e),e&&g?.()},children:[m(n,{name:`notification`,size:20}),m(`span`,{className:`wui-bell-count`,"aria-hidden":`true`,hidden:o===0,children:b(o)})]}),m(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:S}),h(`div`,{className:`dropdown-menu dropdown-menu-end wui-bell-menu${r?` show`:``}`,"aria-labelledby":t,"data-bs-popper":r?`static`:void 0,children:[h(`div`,{className:`wui-bell-head`,children:[m(`span`,{className:`wui-bell-title`,children:y}),_&&m(`button`,{type:`button`,className:`wui-bell-markall`,onClick:_,children:`Mark all read`})]}),m(`div`,{className:`wui-bell-list`,"aria-busy":u||void 0,children:T}),v&&m(`a`,{className:`wui-bell-foot`,href:v,children:`View all`})]})]})}var k=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));function A({config:e}){let t=l(),{value:r=``,onChange:i,results:a=null,loading:o=!1,onSelect:s,onSubmit:p,placeholder:g=`Search`}=e,[_,v]=f(!1),[y,b]=f(!1),[x,S]=f({results:null,index:-1}),C=x.results===a?x.index:-1,w=e=>S({results:a,index:e}),T=d(null),E=d(null),D=d([]),O=u(()=>(a??[]).flatMap(e=>e.hits??[]),[a]),A=a!=null&&!y,j=O.length;c(()=>{let e=e=>{e.key!==`/`||e.ctrlKey||e.metaKey||e.altKey||k(e.target)||(e.preventDefault(),v(!0),E.current?.focus())},t=e=>{T.current?.contains(e.target)||(b(!0),v(!1))};return document.addEventListener(`keydown`,e),document.addEventListener(`pointerdown`,t),()=>{document.removeEventListener(`keydown`,e),document.removeEventListener(`pointerdown`,t)}},[]);let M=e=>{if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(!A||j===0)return;e.preventDefault(),w((C+(e.key===`ArrowDown`?1:-1)+j)%j)}else e.key===`Enter`?A&&C>=0&&D.current[C]?(e.preventDefault(),D.current[C].click()):p&&r.trim()!==``&&(e.preventDefault(),p(r.trim())):e.key===`Escape`&&(A?(e.preventDefault(),b(!0)):_&&(e.preventDefault(),v(!1)))},N=-1;return D.current=[],h(`div`,{className:`wui-topsearch${_?` is-open`:``}${o?` is-loading`:``}`,ref:T,children:[m(`button`,{type:`button`,className:`topbar-icon-btn wui-topsearch-open`,"aria-label":g,"aria-expanded":_,"aria-controls":`${t}-panel`,onClick:()=>{let e=!_;v(e),e&&E.current?.focus()},children:m(n,{name:`search`,size:20})}),h(`div`,{className:`wui-topsearch-panel`,id:`${t}-panel`,children:[h(`div`,{className:`search-wrap`,children:[m(n,{name:`search`,size:18,className:`search-icon`}),m(`input`,{ref:E,type:`search`,className:`form-control input search-input`,id:`${t}-input`,placeholder:g,"aria-label":g,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":A,"aria-controls":`${t}-list`,"aria-activedescendant":A&&C>=0?`${t}-opt-${C}`:void 0,autoComplete:`off`,value:r,onChange:e=>{b(!1),i?.(e.target.value)},onKeyDown:M})]}),m(`div`,{className:`wui-topsearch-results`,id:`${t}-list`,role:`listbox`,"aria-label":`Search results`,hidden:!A,children:A&&h(`div`,{className:`wui-topsearch-groups`,role:`presentation`,children:[j===0&&h(`div`,{className:`wui-topsearch-empty`,role:`option`,"aria-disabled":`true`,"aria-selected":`false`,children:[`No results for “`,r,`”`]}),a.filter(e=>e.hits?.length).map((e,r)=>h(`div`,{className:`wui-topsearch-group`,role:`group`,"aria-label":e.label??``,children:[e.label&&m(`div`,{className:`wui-topsearch-group-label`,role:`presentation`,children:e.label}),e.hits.map(e=>{N+=1;let r=N;return h(`a`,{className:`wui-topsearch-hit${r===C?` is-active`:``}`,role:`option`,"aria-selected":r===C,id:`${t}-opt-${r}`,href:e.href,ref:e=>{D.current[r]=e},onClick:t=>s?.(e,t),children:[e.icon&&m(`span`,{className:`wui-topsearch-hit-icon`,children:m(n,{name:e.icon,size:18})}),h(`span`,{className:`wui-topsearch-hit-text`,children:[m(`span`,{className:`wui-topsearch-hit-title`,children:e.title}),e.subtitle&&m(`span`,{className:`wui-topsearch-hit-sub`,children:e.subtitle})]})]},`${e.href}-${r}`)})]},e.label??r))]})})]}),m(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:A?j===0?`No results`:`${j} ${j===1?`result`:`results`}`:``})]})}export{x as default};