@broberg/app-shell 0.12.0 → 0.14.0

package/dist/preact.d.cts

@@ -20,6 +20,32 @@ interface NavItem<Icon = unknown> {
     marker?: "working";
     /** F092.20 — shows a pin icon after the label. */
     pinned?: boolean;
+    /** F092.21 — row actions: a «…» button opens a menu with these. */
+    actions?: NavAction[];
+}
+/**
+ * F092.21 — one row action. `submenu` switches the menu to a sub-list (with a
+ * back arrow); `input` switches it to a field + save (e.g. rename). A plain
+ * action, a submenu leaf and a saved input all call `onItemAction`.
+ */
+interface NavAction {
+    id: string;
+    label: string;
+    icon?: unknown;
+    /** A single letter that picks this action while the menu is open (e.g. "P"). */
+    kbd?: string;
+    /** Shown in the danger colour (delete). */
+    danger?: boolean;
+    submenu?: NavAction[];
+    input?: {
+        value: string;
+        placeholder?: string;
+        saveLabel?: string;
+    };
+    /** F092.22 — ask twice: the first pick shows `label` («Tryk igen for at slette») and keeps the menu open; the second runs it. */
+    confirm?: {
+        label: string;
+    };
 }
 interface NavSection<Icon = unknown> {
     /** A sub-heading inside one group, e.g. "I dag" / "I går". */
@@ -250,6 +276,8 @@ declare const TEXT: {
         readonly closeMenu: "Luk menu";
         readonly home: "Forside";
         readonly working: "Arbejder";
+        readonly moreFor: "Mere for";
+        readonly back: "Tilbage";
         readonly pinned: "Fastgjort";
         readonly language: "Sprog";
         readonly zoom: "Zoom";
@@ -323,6 +351,8 @@ declare const TEXT: {
         readonly closeMenu: "Close menu";
         readonly home: "Home";
         readonly working: "Working";
+        readonly moreFor: "More for";
+        readonly back: "Back";
         readonly pinned: "Pinned";
         readonly language: "Language";
         readonly zoom: "Zoom";
@@ -437,6 +467,8 @@ interface SidebarProps {
     lang: Lang;
     /** F092.15 — rendered at the very bottom of the sidebar (the user menu in "sidebar-footer"). */
     bottom?: ComponentChildren;
+    /** F092.21 — a row action was chosen (value: the saved text of an `input` action). */
+    onItemAction?: (navItemId: string, actionId: string, value?: string) => void;
 }
 declare function Sidebar(p: SidebarProps): JSX.Element;
 interface NotificationBellProps {
@@ -569,6 +601,8 @@ declare function PageTabs(p: {
     onNavigate?: Navigate;
 }): JSX.Element;
 interface AppShellProps {
+    /** F092.21 — passed to the sidebar: a row action was chosen. */
+    onItemAction?: SidebarProps["onItemAction"];
     brand?: ComponentChildren;
     actions?: ComponentChildren;
     groups: PreactNavGroup[];
@@ -706,4 +740,4 @@ interface ConfirmDialogProps {
 }
 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, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavGroup, type NavItem, type NavSection, 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, type UserMenuSection, 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 NavAction, type NavGroup, type NavItem, type NavSection, 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, type UserMenuSection, 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

@@ -20,6 +20,32 @@ interface NavItem<Icon = unknown> {
     marker?: "working";
     /** F092.20 — shows a pin icon after the label. */
     pinned?: boolean;
+    /** F092.21 — row actions: a «…» button opens a menu with these. */
+    actions?: NavAction[];
+}
+/**
+ * F092.21 — one row action. `submenu` switches the menu to a sub-list (with a
+ * back arrow); `input` switches it to a field + save (e.g. rename). A plain
+ * action, a submenu leaf and a saved input all call `onItemAction`.
+ */
+interface NavAction {
+    id: string;
+    label: string;
+    icon?: unknown;
+    /** A single letter that picks this action while the menu is open (e.g. "P"). */
+    kbd?: string;
+    /** Shown in the danger colour (delete). */
+    danger?: boolean;
+    submenu?: NavAction[];
+    input?: {
+        value: string;
+        placeholder?: string;
+        saveLabel?: string;
+    };
+    /** F092.22 — ask twice: the first pick shows `label` («Tryk igen for at slette») and keeps the menu open; the second runs it. */
+    confirm?: {
+        label: string;
+    };
 }
 interface NavSection<Icon = unknown> {
     /** A sub-heading inside one group, e.g. "I dag" / "I går". */
@@ -250,6 +276,8 @@ declare const TEXT: {
         readonly closeMenu: "Luk menu";
         readonly home: "Forside";
         readonly working: "Arbejder";
+        readonly moreFor: "Mere for";
+        readonly back: "Tilbage";
         readonly pinned: "Fastgjort";
         readonly language: "Sprog";
         readonly zoom: "Zoom";
@@ -323,6 +351,8 @@ declare const TEXT: {
         readonly closeMenu: "Close menu";
         readonly home: "Home";
         readonly working: "Working";
+        readonly moreFor: "More for";
+        readonly back: "Back";
         readonly pinned: "Pinned";
         readonly language: "Language";
         readonly zoom: "Zoom";
@@ -437,6 +467,8 @@ interface SidebarProps {
     lang: Lang;
     /** F092.15 — rendered at the very bottom of the sidebar (the user menu in "sidebar-footer"). */
     bottom?: ComponentChildren;
+    /** F092.21 — a row action was chosen (value: the saved text of an `input` action). */
+    onItemAction?: (navItemId: string, actionId: string, value?: string) => void;
 }
 declare function Sidebar(p: SidebarProps): JSX.Element;
 interface NotificationBellProps {
@@ -569,6 +601,8 @@ declare function PageTabs(p: {
     onNavigate?: Navigate;
 }): JSX.Element;
 interface AppShellProps {
+    /** F092.21 — passed to the sidebar: a row action was chosen. */
+    onItemAction?: SidebarProps["onItemAction"];
     brand?: ComponentChildren;
     actions?: ComponentChildren;
     groups: PreactNavGroup[];
@@ -706,4 +740,4 @@ interface ConfirmDialogProps {
 }
 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, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavGroup, type NavItem, type NavSection, 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, type UserMenuSection, 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 NavAction, type NavGroup, type NavItem, type NavSection, 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, type UserMenuSection, 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

@@ -305,6 +305,8 @@ var TEXT = {
     closeMenu: "Luk menu",
     home: "Forside",
     working: "Arbejder",
+    moreFor: "Mere for",
+    back: "Tilbage",
     pinned: "Fastgjort",
     language: "Sprog",
     zoom: "Zoom",
@@ -378,6 +380,8 @@ var TEXT = {
     closeMenu: "Close menu",
     home: "Home",
     working: "Working",
+    moreFor: "More for",
+    back: "Back",
     pinned: "Pinned",
     language: "Language",
     zoom: "Zoom",
@@ -505,6 +509,234 @@ var IconUser = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "4" }),
   /* @__PURE__ */ jsx("path", { d: "M4 21a8 8 0 0 1 16 0" })
 ] }), 14);
+function RowActions(props) {
+  const t = TEXT[props.lang];
+  const id = props.item.id;
+  const btn = useRef(null);
+  const menu = useRef(null);
+  const [stack, setStack] = useState([]);
+  const [hi, setHiState] = useState(0);
+  const hiRef = useRef(0);
+  const setHi = (n) => {
+    hiRef.current = n;
+    setHiState(n);
+  };
+  const [armed, setArmedState] = useState(null);
+  const armedRef = useRef(null);
+  const setArmed = (v) => {
+    armedRef.current = v;
+    setArmedState(v);
+  };
+  const items = useRef([]);
+  const onKeyDownRef = useRef(() => {
+  });
+  const [value, setValue] = useState("");
+  const [pos, setPos] = useState(void 0);
+  const view = stack[stack.length - 1];
+  const open = !!view;
+  const stackRef = useRef([]);
+  const setStackNow = (next) => {
+    stackRef.current = next;
+    setStack(next);
+  };
+  const close = (refocus = true) => {
+    setStackNow([]);
+    setArmed(null);
+    if (refocus) btn.current?.focus();
+  };
+  const show = (v) => {
+    setStackNow([...stackRef.current, v]);
+    setHi(0);
+    setArmed(null);
+    if (v.kind === "input") setValue(v.action.input.value);
+  };
+  const back = () => {
+    setStackNow(stackRef.current.slice(0, -1));
+    setHi(0);
+    setArmed(null);
+  };
+  const pick = (a) => {
+    if (a.submenu?.length) return show({ kind: "list", actions: a.submenu, title: a.label });
+    if (a.input) return show({ kind: "input", action: a });
+    if (a.confirm && armedRef.current !== a.id) return setArmed(a.id);
+    close();
+    props.onAction(a.id);
+  };
+  const save = (a) => {
+    close();
+    props.onAction(a.id, value);
+  };
+  useLayoutEffect(() => {
+    if (!open || !btn.current) return setPos(void 0);
+    const r = btn.current.getBoundingClientRect();
+    const vw = window.innerWidth, vh = window.innerHeight, m = 8;
+    const w = Math.min(240, vw - 2 * m);
+    const h = menu.current?.offsetHeight ?? 0;
+    const left = Math.max(m, Math.min(r.right - w, vw - w - m));
+    const top = r.bottom + 4 + h <= vh - m || r.top - 4 - h < m ? Math.min(r.bottom + 4, vh - m - h) : r.top - 4 - h;
+    setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px`, width: `${w}px` });
+  }, [open, stack.length]);
+  useLayoutEffect(() => {
+    if (!open || !pos) return;
+    if (view?.kind === "input") menu.current?.querySelector("input")?.focus();
+    else items.current[hiRef.current]?.focus();
+  }, [open, pos, hi, stack.length]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    const outside = (e) => {
+      const n = e.target instanceof Node ? e.target : null;
+      if (n && (menu.current?.contains(n) || btn.current?.contains(n))) return;
+      close(false);
+    };
+    const early = (e) => {
+      const n = e.target instanceof Node ? e.target : null;
+      if (n && menu.current?.contains(n)) return;
+      if (e.key === "Enter" || e.key === " " || e.key === "Spacebar" || e.key === "Tab") return;
+      onKeyDownRef.current(e);
+    };
+    document.addEventListener("keydown", early, true);
+    document.addEventListener("mousedown", outside);
+    window.addEventListener("scroll", outside, true);
+    window.addEventListener("resize", outside);
+    return () => {
+      document.removeEventListener("keydown", early, true);
+      document.removeEventListener("mousedown", outside);
+      window.removeEventListener("scroll", outside, true);
+      window.removeEventListener("resize", outside);
+    };
+  }, [open]);
+  const onKeyDown = (e) => {
+    const stack2 = stackRef.current;
+    const view2 = stack2[stack2.length - 1];
+    if (!view2) return;
+    e.stopPropagation();
+    if (e.key === "Escape") {
+      e.preventDefault();
+      return close();
+    }
+    if (view2.kind === "input") {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        save(view2.action);
+      }
+      return;
+    }
+    if ((e.key === "ArrowLeft" || e.key === "Backspace") && stack2.length > 1) {
+      e.preventDefault();
+      return back();
+    }
+    const list = view2.actions;
+    if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+      e.preventDefault();
+      const at = items.current.findIndex((b) => b === document.activeElement);
+      const idx = at >= 0 ? at : hiRef.current;
+      return list[idx] ? pick(list[idx]) : void 0;
+    }
+    const { state, intent } = selectKeyReducer({ open: true, highlighted: hiRef.current }, e.key, list.length);
+    if (intent.type === "select") {
+      e.preventDefault();
+      return pick(list[intent.index]);
+    }
+    if (state.highlighted !== hiRef.current) {
+      e.preventDefault();
+      return setHi(state.highlighted);
+    }
+    const byKbd = e.key.length === 1 ? list.find((a) => a.kbd?.toLowerCase() === e.key.toLowerCase()) : void 0;
+    if (byKbd) {
+      e.preventDefault();
+      pick(byKbd);
+    }
+  };
+  onKeyDownRef.current = onKeyDown;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: btn,
+        type: "button",
+        class: "bas-item__more" + (open ? " is-open" : ""),
+        "data-testid": `sidebar-item-${id}-more`,
+        "aria-label": `${t.moreFor} ${props.item.label}`,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: () => stackRef.current.length ? close() : show({ kind: "list", actions: props.item.actions }),
+        children: /* @__PURE__ */ jsx(IconMore, {})
+      }
+    ),
+    view ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: menu,
+        class: "bas-rowmenu",
+        role: "menu",
+        tabIndex: -1,
+        "aria-label": view.kind === "list" && view.title ? view.title : props.item.label,
+        "data-testid": `sidebar-item-${id}-menu`,
+        style: pos ?? { position: "fixed", visibility: "hidden" },
+        onKeyDown,
+        children: [
+          stack.length > 1 ? /* @__PURE__ */ jsxs("button", { type: "button", class: "bas-rowmenu__back", "data-testid": `sidebar-item-${id}-back`, "aria-label": t.back, onClick: back, children: [
+            /* @__PURE__ */ jsx(IconChevronLeft, {}),
+            /* @__PURE__ */ jsx("span", { children: view.kind === "list" ? view.title : view.action.label })
+          ] }) : null,
+          view.kind === "list" ? view.actions.map((a, i) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              ref: (el) => {
+                items.current[i] = el;
+              },
+              tabIndex: i === hi ? 0 : -1,
+              class: "bas-rowmenu__item" + (i === hi ? " is-active" : "") + (a.danger ? " is-danger" : "") + (armed === a.id ? " is-armed" : ""),
+              "data-testid": `sidebar-item-${id}-action-${a.id}`,
+              onMouseEnter: () => setHi(i),
+              onFocus: () => setHi(i),
+              onClick: () => pick(a),
+              children: [
+                a.icon ? /* @__PURE__ */ jsx("span", { class: "bas-rowmenu__icon", children: a.icon }) : null,
+                /* @__PURE__ */ jsx("span", { class: "bas-rowmenu__label", children: armed === a.id && a.confirm ? a.confirm.label : a.label }),
+                a.submenu?.length ? /* @__PURE__ */ jsx(IconChevronRight, {}) : a.kbd ? /* @__PURE__ */ jsx("kbd", { class: "bas-rowmenu__kbd", children: a.kbd.toUpperCase() }) : null
+              ]
+            },
+            a.id
+          )) : /* @__PURE__ */ jsxs(
+            "form",
+            {
+              class: "bas-rowmenu__form",
+              "data-testid": `sidebar-item-${id}-form`,
+              onSubmit: (e) => {
+                e.preventDefault();
+                save(view.action);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    class: "bas-rowmenu__input",
+                    "data-testid": `sidebar-item-${id}-input`,
+                    "aria-label": view.action.label,
+                    value,
+                    placeholder: view.action.input.placeholder,
+                    onInput: (e) => setValue(e.currentTarget.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx("button", { type: "submit", class: "bas-rowmenu__save", "data-testid": `sidebar-item-${id}-save`, children: view.action.input.saveLabel ?? t.save })
+              ]
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}
+var IconMore = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+  /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
+  /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" })
+] }), 16);
+var IconChevronLeft = () => svg(/* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }), 14);
+var IconChevronRight = () => svg(/* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }), 14);
 function Sidebar(p) {
   const key = p.groupsKey ?? "broberg-app-shell.groups";
   const itemsKey = p.itemsKey ?? "broberg-app-shell.items";
@@ -562,7 +794,7 @@ function Sidebar(p) {
   const leaf = (it, sub = false) => {
     const active = isActivePath(it.href, p.currentPath);
     const badge = badgeLabel(it.badge);
-    return /* @__PURE__ */ jsxs(
+    const link = /* @__PURE__ */ jsxs(
       NavLink,
       {
         href: it.href,
@@ -584,6 +816,11 @@ function Sidebar(p) {
       },
       it.id
     );
+    if (!it.actions?.length || railed) return link;
+    return /* @__PURE__ */ jsxs("div", { class: "bas-itemrow", children: [
+      link,
+      /* @__PURE__ */ jsx(RowActions, { item: it, lang: p.lang, onAction: (a, v) => v === void 0 ? p.onItemAction?.(it.id, a) : p.onItemAction?.(it.id, a, v) })
+    ] }, it.id);
   };
   const parent = (it) => {
     const children = it.children;
@@ -1255,6 +1492,7 @@ function AppShell(p) {
         {
           groups: p.groups,
           footer: p.footer,
+          onItemAction: p.onItemAction,
           currentPath: p.currentPath,
           onNavigate: p.onNavigate,
           collapsed,