@broberg/app-shell 0.7.1 → 0.9.0

package/dist/preact.d.cts

@@ -609,12 +609,36 @@ interface TenantSwitcherProps {
      * why; the switcher never pretends a switch happened.
      */
     onSwitch: (slug: string) => Promise<void> | void;
+    /**
+     * The role in the user's own words («Medarbejder», «Administrator»). Roles
+     * are the app's vocabulary, so the switcher cannot translate them. Without
+     * it no role is shown — a raw «member» in a Danish UI is worse than nothing.
+     */
+    roleLabel?: (role: string) => string;
 }
 /**
  * The user's own organisations, the active one marked, and a switch. Only the
  * memberships the backend returns are listed — never a typed or guessed slug.
  * With one organisation it is a plain label, not a menu.
  */
-declare function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }: TenantSwitcherProps): JSX.Element;
+declare function TenantSwitcher({ lang, activeSlug, adapter, onSwitch, roleLabel }: TenantSwitcherProps): JSX.Element;
+interface ConfirmDialogProps {
+    open: boolean;
+    title: ComponentChildren;
+    body?: ComponentChildren;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Red confirm button, for an action that cannot be undone. */
+    destructive?: boolean;
+    /** The confirm action is running: buttons disabled, the window cannot be dismissed. */
+    busy?: boolean;
+    /** Shown inside the window; the window stays open so the user can retry or cancel. */
+    error?: ComponentChildren;
+    onConfirm: () => void;
+    onCancel: () => void;
+    /** Prefix for every data-testid. Default "confirm-dialog". */
+    testId?: string;
+}
+declare function ConfirmDialog(p: ConfirmDialogProps): JSX.Element | null;
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.d.ts

@@ -609,12 +609,36 @@ interface TenantSwitcherProps {
      * why; the switcher never pretends a switch happened.
      */
     onSwitch: (slug: string) => Promise<void> | void;
+    /**
+     * The role in the user's own words («Medarbejder», «Administrator»). Roles
+     * are the app's vocabulary, so the switcher cannot translate them. Without
+     * it no role is shown — a raw «member» in a Danish UI is worse than nothing.
+     */
+    roleLabel?: (role: string) => string;
 }
 /**
  * The user's own organisations, the active one marked, and a switch. Only the
  * memberships the backend returns are listed — never a typed or guessed slug.
  * With one organisation it is a plain label, not a menu.
  */
-declare function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }: TenantSwitcherProps): JSX.Element;
+declare function TenantSwitcher({ lang, activeSlug, adapter, onSwitch, roleLabel }: TenantSwitcherProps): JSX.Element;
+interface ConfirmDialogProps {
+    open: boolean;
+    title: ComponentChildren;
+    body?: ComponentChildren;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Red confirm button, for an action that cannot be undone. */
+    destructive?: boolean;
+    /** The confirm action is running: buttons disabled, the window cannot be dismissed. */
+    busy?: boolean;
+    /** Shown inside the window; the window stays open so the user can retry or cancel. */
+    error?: ComponentChildren;
+    onConfirm: () => void;
+    onCancel: () => void;
+    /** Prefix for every data-testid. Default "confirm-dialog". */
+    testId?: string;
+}
+declare function ConfirmDialog(p: ConfirmDialogProps): JSX.Element | null;
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useMemo } from 'preact/hooks';
+import { useState, useEffect, useRef, useMemo, useLayoutEffect } from 'preact/hooks';
 import { createBellShell } from '@broberg/notifications/shell';
 import { getPreference, getPalette, getSurfaces, getBackdrop, onThemeChange, onPaletteChange, onSurfacesChange, onBackdropChange, setPreference, setPalette, PALETTES, PALETTE_LABELS, setSurfaces, setBackdrop } from '@broberg/theme';
 import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
@@ -1350,7 +1350,8 @@ function AnalyticsSeries({ data, t, locale, num }) {
     ] })
   ] });
 }
-function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
+var EDGE = 16;
+function TenantSwitcher({ lang, activeSlug, adapter, onSwitch, roleLabel }) {
   const t = TEXT[lang];
   const api = useMemo(() => adapter ?? createFetchTenantAdapter(), [adapter]);
   const [rows, setRows] = useState(null);
@@ -1359,6 +1360,18 @@ function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
   const [busy, setBusy] = useState(null);
   const [switchFailed, setSwitchFailed] = useState(false);
   const root = useRef(null);
+  const menu = useRef(null);
+  useLayoutEffect(() => {
+    const el = menu.current;
+    if (!open || !el) return;
+    el.style.transform = "";
+    const r = el.getBoundingClientRect();
+    const vw = document.documentElement.clientWidth || window.innerWidth;
+    let dx = 0;
+    if (r.right > vw - EDGE) dx = vw - EDGE - r.right;
+    if (r.left + dx < EDGE) dx = EDGE - r.left;
+    if (dx !== 0) el.style.transform = `translateX(${Math.round(dx)}px)`;
+  }, [open, rows, loadFailed, switchFailed]);
   const load = () => {
     setLoadFailed(false);
     api.load().then(setRows, () => setLoadFailed(true));
@@ -1409,7 +1422,7 @@ function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
         children: /* @__PURE__ */ jsx("span", { class: "bas-tenant__label", "data-testid": "tenant-switcher-label", children: label })
       }
     ),
-    open ? /* @__PURE__ */ jsxs("div", { class: "bas-menu bas-tenant__menu", role: "menu", "data-testid": "tenant-switcher-menu", children: [
+    open ? /* @__PURE__ */ jsxs("div", { class: "bas-menu bas-tenant__menu", ref: menu, role: "menu", "data-testid": "tenant-switcher-menu", children: [
       loadFailed ? /* @__PURE__ */ jsxs("div", { class: "bas-tenant__note", role: "alert", "data-testid": "tenant-switcher-load-error", children: [
         /* @__PURE__ */ jsx("span", { children: t.tenantLoadFailed }),
         /* @__PURE__ */ jsx("button", { type: "button", class: "bas-mi", onClick: load, "data-testid": "tenant-switcher-retry", children: t.tenantRetry })
@@ -1430,7 +1443,7 @@ function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
             "data-testid": `tenant-switcher-item-${r.tenant.slug}`,
             children: [
               /* @__PURE__ */ jsx("span", { class: "bas-tenant__name", children: r.tenant.name }),
-              /* @__PURE__ */ jsx("span", { class: "bas-tenant__role", children: suspended ? t.tenantSuspended : isActive ? t.tenantActive : r.role })
+              suspended || isActive || roleLabel ? /* @__PURE__ */ jsx("span", { class: "bas-tenant__role", "data-testid": `tenant-switcher-role-${r.tenant.slug}`, children: suspended ? t.tenantSuspended : isActive ? t.tenantActive : roleLabel(r.role) }) : null
             ]
           },
           r.tenant.id
@@ -1439,7 +1452,98 @@ function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
     ] }) : null
   ] });
 }
+var confirmDialogSeq = 0;
+function ConfirmDialog(p) {
+  const t = p.testId ?? "confirm-dialog";
+  const panel = useRef(null);
+  const cancelBtn = useRef(null);
+  const ids = useMemo(() => {
+    const n = ++confirmDialogSeq;
+    return { title: `bas-confirm-title-${n}`, body: `bas-confirm-body-${n}` };
+  }, []);
+  const live = useRef(p);
+  live.current = p;
+  useEffect(() => {
+    if (!p.open) return;
+    const before = document.activeElement;
+    cancelBtn.current?.focus();
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (!live.current.busy) live.current.onCancel();
+        return;
+      }
+      if (e.key !== "Tab" || !panel.current) return;
+      const focusable = [...panel.current.querySelectorAll("button:not([disabled])")];
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !panel.current.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !panel.current.contains(active))) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      if (before && typeof before.focus === "function" && document.contains(before)) before.focus();
+    };
+  }, [p.open]);
+  if (!p.open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: "bas-confirm-backdrop",
+      "data-testid": `${t}-backdrop`,
+      onMouseDown: (e) => {
+        if (e.target === e.currentTarget && !p.busy) p.onCancel();
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panel,
+          class: "bas-confirm",
+          role: "alertdialog",
+          "aria-modal": "true",
+          "aria-labelledby": ids.title,
+          "aria-describedby": p.body ? ids.body : void 0,
+          "aria-busy": p.busy ? "true" : void 0,
+          "data-testid": t,
+          children: [
+            /* @__PURE__ */ jsx("h2", { class: "bas-confirm__title", id: ids.title, "data-testid": `${t}-title`, children: p.title }),
+            p.body ? /* @__PURE__ */ jsx("div", { class: "bas-confirm__body", id: ids.body, "data-testid": `${t}-body`, children: p.body }) : null,
+            p.error ? /* @__PURE__ */ jsx("div", { class: "bas-confirm__error", role: "alert", "data-testid": `${t}-error`, children: p.error }) : null,
+            /* @__PURE__ */ jsxs("div", { class: "bas-confirm__actions", children: [
+              /* @__PURE__ */ jsx("button", { ref: cancelBtn, type: "button", class: "bas-confirm__btn", disabled: p.busy, "data-testid": `${t}-cancel`, onClick: () => p.onCancel(), children: p.cancelLabel ?? "Annuller" }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  class: `bas-confirm__btn is-primary${p.destructive ? " is-danger" : ""}${p.busy ? " is-busy" : ""}`,
+                  disabled: p.busy,
+                  "data-testid": `${t}-confirm`,
+                  onClick: () => p.onConfirm(),
+                  children: [
+                    p.busy ? /* @__PURE__ */ jsx("span", { class: "bas-confirm__spinner", "aria-hidden": "true" }) : null,
+                    p.confirmLabel ?? "Bekr\xE6ft"
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, AccountError, AccountPage, AnalyticsError, AnalyticsPage, AppShell, Avatar, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TenantLoadError, TenantSwitcher, TopBar, UserMenu, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, AccountError, AccountPage, AnalyticsError, AnalyticsPage, AppShell, Avatar, ConfirmDialog, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TenantLoadError, TenantSwitcher, TopBar, UserMenu, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
 //# sourceMappingURL=preact.js.map
 //# sourceMappingURL=preact.js.map