@broberg/app-shell 0.2.2 → 0.3.0

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) => {
@@ -174,6 +186,8 @@ var TEXT = {
     openMenu: "\xC5bn menu",
     closeMenu: "Luk menu",
     home: "Forside",
+    language: "Sprog",
+    couldNotMarkAll: "Kunne ikke markere alle som l\xE6st. Pr\xF8v igen.",
     collapse: "Skjul sidemenu",
     expand: "Vis sidemenu",
     notifications: "Notifikationer",
@@ -200,6 +214,8 @@ var TEXT = {
     openMenu: "Open menu",
     closeMenu: "Close menu",
     home: "Home",
+    language: "Language",
+    couldNotMarkAll: "Could not mark all as read. Try again.",
     collapse: "Hide sidebar",
     expand: "Show sidebar",
     notifications: "Notifications",
@@ -238,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",
     {
@@ -413,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,
               {
@@ -486,14 +505,42 @@ function NotificationBell({ source, onNavigate, lang }) {
       else void shell$1.refresh();
     });
   }, [shell$1, source]);
+  const bellRef = hooks.useRef(null);
+  const panelRef = hooks.useRef(null);
   hooks.useEffect(() => {
     if (!state.open) return;
     const onKey = (e) => {
-      if (e.key === "Escape" && shell$1.escape() === "close") e.preventDefault();
+      if (e.key === "Escape" && shell$1.escape() === "close") {
+        e.preventDefault();
+        bellRef.current?.focus();
+      }
+    };
+    const onDown = (e) => {
+      const t2 = e.target;
+      if (t2 && (panelRef.current?.contains(t2) || bellRef.current?.contains(t2))) return;
+      shell$1.close();
     };
     document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onDown);
+    };
   }, [state.open, shell$1]);
+  const [markAllFailed, setMarkAllFailed] = hooks.useState(false);
+  hooks.useEffect(() => {
+    if (!state.open) setMarkAllFailed(false);
+  }, [state.open]);
+  const onMarkAll = async () => {
+    setMarkAllFailed(false);
+    try {
+      await shell$1.markAllSeen();
+    } catch {
+      setMarkAllFailed(true);
+      return;
+    }
+    shell$1.close();
+  };
   const label = badgeLabel(state.count);
   const onRow = async (n) => {
     shell$1.close();
@@ -502,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);
     }
@@ -513,6 +562,7 @@ function NotificationBell({ source, onNavigate, lang }) {
       "button",
       {
         type: "button",
+        ref: bellRef,
         class: "bas-iconbtn",
         "data-testid": "topbar-notifications",
         "aria-label": t.notifications,
@@ -532,6 +582,7 @@ function NotificationBell({ source, onNavigate, lang }) {
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
+          ref: panelRef,
           class: "bas-panel " + (mobile ? "bas-panel--sheet" : "bas-panel--drop"),
           role: "dialog",
           "aria-label": shell$1.labels.panel,
@@ -539,8 +590,9 @@ function NotificationBell({ source, onNavigate, lang }) {
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-panel__head", children: [
               /* @__PURE__ */ jsxRuntime.jsx("h3", { children: t.notifications }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", class: "bas-link", "data-testid": "notifications-mark-all", onClick: () => void shell$1.markAllSeen(), disabled: !state.count, children: shell$1.labels.markAll })
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", class: "bas-link", "data-testid": "notifications-mark-all", onClick: () => void onMarkAll(), disabled: !state.count, children: shell$1.labels.markAll })
             ] }),
+            markAllFailed ? /* @__PURE__ */ jsxRuntime.jsx("p", { class: "bas-panel__note is-error", role: "alert", "data-testid": "notifications-mark-all-error", children: t.couldNotMarkAll }) : null,
             /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-panel__list", "data-testid": "notifications-list", children: error && state.rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { class: "bas-panel__note is-error", "data-testid": "notifications-error", children: t.couldNotLoad }) : state.rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { class: "bas-panel__note", "data-testid": "notifications-empty", children: shell$1.labels.empty }) : state.rows.map((n) => /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
@@ -575,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];
@@ -644,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,
@@ -703,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: [
@@ -752,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);
@@ -767,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,
@@ -798,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
@@ -822,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
@@ -845,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;