@broberg/app-shell 0.2.3 → 0.3.1

package/dist/preact.cjs

@@ -25,6 +25,18 @@ function safeNavigate(target) {
     return null;
   }
 }
+function isExternal(href, origin = typeof location !== "undefined" ? location.origin : void 0) {
+  if (typeof href !== "string") return false;
+  const h = href.trim();
+  if (!origin) return /^(https?:)?\/\//i.test(h);
+  let u;
+  try {
+    u = new URL(h, origin);
+  } catch {
+    return false;
+  }
+  return (u.protocol === "http:" || u.protocol === "https:") && u.origin !== origin;
+}
 function activeNavLabel(groups, footer, currentPath) {
   let best;
   const visit = (it) => {
@@ -173,8 +185,9 @@ var TEXT = {
   da: {
     openMenu: "\xC5bn menu",
     closeMenu: "Luk menu",
-    couldNotMarkAll: "Kunne ikke markere alle som l\xE6st. Pr\xF8v igen.",
     home: "Forside",
+    language: "Sprog",
+    couldNotMarkAll: "Kunne ikke markere alle som l\xE6st. Pr\xF8v igen.",
     collapse: "Skjul sidemenu",
     expand: "Vis sidemenu",
     notifications: "Notifikationer",
@@ -200,8 +213,9 @@ var TEXT = {
   en: {
     openMenu: "Open menu",
     closeMenu: "Close menu",
-    couldNotMarkAll: "Could not mark all as read. Try again.",
     home: "Home",
+    language: "Language",
+    couldNotMarkAll: "Could not mark all as read. Try again.",
     collapse: "Hide sidebar",
     expand: "Show sidebar",
     notifications: "Notifications",
@@ -240,6 +254,9 @@ function useIsMobile() {
 }
 function NavLink(props) {
   const { href, onNavigate, onAfter, children, ...rest } = props;
+  if (isExternal(href)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { ...rest, href, target: "_blank", rel: "noopener noreferrer", onClick: () => onAfter?.(), children });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "a",
     {
@@ -415,7 +432,7 @@ function Sidebar(p) {
         "aria-label": "Navigation",
         children: [
           p.header || p.brandMark ? /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-sidebar__head", children: [
-            p.header ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sidebar__brand", children: p.homeHref ? /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: p.homeHref, onNavigate: p.onNavigate, onAfter: close, class: "bas-home", "data-testid": "sidebar-brand-home", children: p.header }) : p.header }) : null,
+            p.header ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sidebar__brand", children: p.homeHref ? /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: p.homeHref, onNavigate: p.onNavigate, onAfter: close, class: "bas-home", "data-testid": p.brandTestId ?? "sidebar-brand-home", children: p.header }) : p.header }) : null,
             p.brandMark ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sidebar__mark", "data-testid": "sidebar-brand-mark", children: p.homeHref ? /* @__PURE__ */ jsxRuntime.jsx(
               NavLink,
               {
@@ -532,7 +549,9 @@ function NotificationBell({ source, onNavigate, lang }) {
       await shell$1.refresh();
     }
     const target = safeNavigate(n.navigate);
-    if (target) {
+    if (target && isExternal(target)) {
+      if (typeof window !== "undefined") window.open(target, "_blank", "noopener,noreferrer");
+    } else if (target) {
       if (onNavigate) onNavigate(target);
       else if (typeof window !== "undefined") window.location.assign(target);
     }
@@ -608,7 +627,16 @@ function Avatar({ user, size = 28 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-avatar bas-avatar--initials", style, "data-testid": "avatar-initials", "aria-hidden": "true", children: initials(user.name, user.email) });
 }
 function Segmented(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-seg", "data-testid": props.testid, role: "group", children: props.options.map(([v, label]) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-pressed": props.value === v, "data-testid": `${props.testid}-${v}`, onClick: () => props.onChange(v), children: label }, v)) });
+  const onKeyDown = (e) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+    const buttons = [...e.currentTarget.querySelectorAll("button")];
+    const i = buttons.indexOf(document.activeElement);
+    if (i < 0) return;
+    e.preventDefault();
+    const next = (i + (e.key === "ArrowRight" ? 1 : -1) + buttons.length) % buttons.length;
+    buttons[next].focus();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-seg", "data-testid": props.testid, role: "group", "aria-label": props.label, onKeyDown, children: props.options.map(([v, label]) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-pressed": props.value === v, "data-testid": `${props.testid}-${v}`, onClick: () => props.onChange(v), children: label }, v)) });
 }
 function UserMenu(p) {
   const t = TEXT[p.lang];
@@ -677,7 +705,7 @@ function UserMenu(p) {
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sep" }),
-      p.accountHref ? /* @__PURE__ */ jsxRuntime.jsxs("a", { class: "bas-mi", href: p.accountHref, "data-testid": "user-menu-account", role: "menuitem", children: [
+      p.accountHref ? /* @__PURE__ */ jsxRuntime.jsxs(NavLink, { href: p.accountHref, onNavigate: p.onNavigate, onAfter: () => setOpen(false), class: "bas-mi", "data-testid": "user-menu-account", role: "menuitem", children: [
         /* @__PURE__ */ jsxRuntime.jsx(IconUser, {}),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.account })
       ] }) : null,
@@ -736,6 +764,22 @@ function UserMenu(p) {
           ] })
         ] })
       ] }) : null,
+      p.language ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        p.appearance === false ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sep" }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-prefs", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-pref", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.language }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Segmented,
+            {
+              testid: "user-menu-language",
+              label: t.language,
+              value: p.language.value,
+              options: p.language.options.map((o) => [o.id, o.label]),
+              onChange: p.language.onChange
+            }
+          )
+        ] }) })
+      ] }) : null,
       p.onSignOut ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sep" }),
         /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", class: "bas-mi is-danger", role: "menuitem", "data-testid": "topbar-sign-out", disabled: busy, onClick: () => void signOut(), children: [
@@ -785,6 +829,8 @@ function PageTabs(p) {
 function AppShell(p) {
   const prefix = p.storageKey ?? "broberg-app-shell";
   const mode = p.mobile ?? "drawer";
+  const layout = p.layout ?? "inset";
+  const inset = layout === "inset";
   const collapse = p.collapse ?? (mode === "rail" ? "icon" : "offcanvas");
   const [collapsed, setCollapsed] = hooks.useState(() => readFlag(`${prefix}.collapsed`, false));
   const [drawer, setDrawer] = hooks.useState(false);
@@ -800,8 +846,8 @@ function AppShell(p) {
   const expanded = drawerMode ? drawer : !collapsed;
   const triggerLabel = drawerMode ? drawer ? t.closeMenu : t.openMenu : collapsed ? t.expand : t.collapse;
   const heading = p.title ?? activeNavLabel(p.groups, p.footer, p.currentPath);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-root", "data-testid": "app-shell", "data-mobile": mode, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-root", "data-testid": "app-shell", "data-mobile": mode, "data-layout": layout, children: [
+    inset ? null : /* @__PURE__ */ jsxRuntime.jsx(
       TopBar,
       {
         brand: p.brand,
@@ -831,7 +877,8 @@ function AppShell(p) {
           mobileOpen: drawer,
           onClose: () => setDrawer(false),
           mobile: mode,
-          header: mode === "drawer" ? p.brand : void 0,
+          header: inset || mode === "drawer" ? p.brand : void 0,
+          brandTestId: inset ? "brand-home" : void 0,
           groupsKey: `${prefix}.groups`,
           itemsKey: `${prefix}.items`,
           lang: p.lang
@@ -855,6 +902,12 @@ function AppShell(p) {
           heading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-contenthead__sep", "data-testid": "content-header-separator", "aria-hidden": "true" }),
             /* @__PURE__ */ jsxRuntime.jsx("h1", { class: "bas-contenthead__title", "data-testid": "content-header-title", children: heading })
+          ] }) : null,
+          inset ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-spacer" }),
+            p.actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-contenthead__actions", children: p.actions }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(NotificationBell, { source: p.notifications, onNavigate: p.onNavigate, lang: p.lang }),
+            p.user ? /* @__PURE__ */ jsxRuntime.jsx(UserMenu, { user: p.user, ...p.userMenu, onNavigate: p.onNavigate, lang: p.lang }) : null
           ] }) : null
         ] }),
         p.children
@@ -878,6 +931,7 @@ exports.createFetchNotificationSource = createFetchNotificationSource;
 exports.createMemoryNotificationSource = createMemoryNotificationSource;
 exports.initials = initials;
 exports.isActivePath = isActivePath;
+exports.isExternal = isExternal;
 exports.readFlag = readFlag;
 exports.readSet = readSet;
 exports.relativeTime = relativeTime;