@webority/ui-react 0.34.0 → 0.35.0

package/dist/components/AppShell.js

@@ -0,0 +1,709 @@
+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, sub: i = !1 }) {
+	let a = Array.isArray(e.children) && e.children.length > 0, o = a && e.children.some((e) => e.active), [c, l] = d(o);
+	s(() => {
+		o && !c && l(!0);
+	}, [o, c]);
+	let u = typeof e.label == "string" ? e.label : void 0, h = !i && e.icon && /* @__PURE__ */ p("span", {
+		className: "app-nav-icon",
+		children: typeof e.icon == "string" ? /* @__PURE__ */ p(n, {
+			name: e.icon,
+			size: 22
+		}) : e.icon
+	}), g = e.badge != null && /* @__PURE__ */ p("span", {
+		className: `app-nav-badge${e.badgeTone ? ` tone-${e.badgeTone}` : ""}`,
+		children: e.badge
+	});
+	if (a) return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("button", {
+		type: "button",
+		className: `app-nav-item has-children${o ? " active" : ""}`,
+		"aria-expanded": c,
+		"data-label": u,
+		onClick: () => l((e) => !e),
+		children: [
+			h,
+			/* @__PURE__ */ p("span", {
+				className: "app-nav-text",
+				children: e.label
+			}),
+			g,
+			/* @__PURE__ */ p("span", {
+				className: "app-nav-caret",
+				children: /* @__PURE__ */ p(n, {
+					name: "chevron-right",
+					size: 16
+				})
+			})
+		]
+	}), /* @__PURE__ */ p("div", {
+		className: `app-nav-sub${c ? " expanded" : ""}`,
+		inert: !c,
+		"aria-hidden": !c || 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,
+				sub: !0
+			}, e.key ?? e.href))
+		})
+	})] });
+	let _ = `app-nav-item${i ? " app-nav-subitem" : ""}${e.active ? " active" : ""}`, v = /* @__PURE__ */ m(f, { children: [
+		h,
+		/* @__PURE__ */ p("span", {
+			className: "app-nav-text",
+			children: e.label
+		}),
+		g,
+		e.trailingIcon && /* @__PURE__ */ p("span", {
+			className: "app-nav-trailing",
+			children: typeof e.trailingIcon == "string" ? /* @__PURE__ */ p(n, {
+				name: e.trailingIcon,
+				size: 16
+			}) : e.trailingIcon
+		})
+	] }), y = e.active ? "page" : void 0;
+	return t ? /* @__PURE__ */ p(t, {
+		className: _,
+		to: e.href,
+		"aria-current": y,
+		"data-label": u,
+		onClick: r,
+		children: v
+	}) : /* @__PURE__ */ p("a", {
+		className: _,
+		href: e.href,
+		"aria-current": y,
+		"data-label": u,
+		onClick: r,
+		children: v
+	});
+}
+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 };