@broberg/app-shell 0.12.0 → 0.13.1

package/dist/preact.d.cts

@@ -20,6 +20,28 @@ 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;
+    };
 }
 interface NavSection<Icon = unknown> {
     /** A sub-heading inside one group, e.g. "I dag" / "I går". */
@@ -250,6 +272,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 +347,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 +463,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 +597,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 +736,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,28 @@ 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;
+    };
 }
 interface NavSection<Icon = unknown> {
     /** A sub-heading inside one group, e.g. "I dag" / "I går". */
@@ -250,6 +272,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 +347,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 +463,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 +597,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 +736,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,186 @@ 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, setHi] = useState(0);
+  const [value, setValue] = useState("");
+  const [pos, setPos] = useState(void 0);
+  const view = stack[stack.length - 1];
+  const open = !!view;
+  const close = (refocus = true) => {
+    setStack([]);
+    if (refocus) btn.current?.focus();
+  };
+  const show = (v) => {
+    setStack((s) => [...s, v]);
+    setHi(0);
+    if (v.kind === "input") setValue(v.action.input.value);
+  };
+  const back = () => {
+    setStack((s) => s.slice(0, -1));
+    setHi(0);
+  };
+  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 });
+    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` });
+    if (view?.kind === "input") menu.current?.querySelector("input")?.focus();
+    else menu.current?.focus();
+  }, [open, stack.length]);
+  useEffect(() => {
+    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);
+    };
+    document.addEventListener("mousedown", outside);
+    window.addEventListener("scroll", outside, true);
+    window.addEventListener("resize", outside);
+    return () => {
+      document.removeEventListener("mousedown", outside);
+      window.removeEventListener("scroll", outside, true);
+      window.removeEventListener("resize", outside);
+    };
+  }, [open]);
+  const onKeyDown = (e) => {
+    if (!view) return;
+    e.stopPropagation();
+    if (e.key === "Escape") {
+      e.preventDefault();
+      return close();
+    }
+    if (view.kind === "input") {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        save(view.action);
+      }
+      return;
+    }
+    if ((e.key === "ArrowLeft" || e.key === "Backspace") && stack.length > 1) {
+      e.preventDefault();
+      return back();
+    }
+    const list = view.actions;
+    const { state, intent } = selectKeyReducer({ open: true, highlighted: hi }, e.key, list.length);
+    if (intent.type === "select") {
+      e.preventDefault();
+      return pick(list[intent.index]);
+    }
+    if (state.highlighted !== hi) {
+      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);
+    }
+  };
+  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: () => open ? 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",
+              class: "bas-rowmenu__item" + (i === hi ? " is-active" : "") + (a.danger ? " is-danger" : ""),
+              "data-testid": `sidebar-item-${id}-action-${a.id}`,
+              onMouseEnter: () => 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: 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 +746,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 +768,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 +1444,7 @@ function AppShell(p) {
         {
           groups: p.groups,
           footer: p.footer,
+          onItemAction: p.onItemAction,
           currentPath: p.currentPath,
           onNavigate: p.onNavigate,
           collapsed,