@broberg/app-shell 0.17.0 → 0.19.0

package/dist/preact.d.cts

@@ -68,6 +68,23 @@ interface NavGroup<Icon = unknown> {
      * it is the group's key and its accessible name.
      */
     hideLabel?: boolean;
+    /**
+     * F092.26 — false: the heading is plain text (no fold button, no chevron) and the
+     * group is always open, even with a stored fold for this label. Default true.
+     */
+    collapsible?: boolean;
+    /**
+     * F092.28 — a small icon button at the right of the heading row (e.g. «Filtrér og
+     * sortér»). The app opens its own menu from `onClick(anchor)`. Clicking it never
+     * folds the group. Not shown with `hideLabel` (there is no heading row).
+     */
+    action?: {
+        icon: Icon;
+        label: string;
+        expanded?: boolean;
+        onClick: (anchor: HTMLElement) => void;
+        testid?: string;
+    };
 }
 /**
  * Is this item the current page? Exact match for "/", otherwise the path is the
@@ -495,6 +512,8 @@ interface ShellUser {
     picture?: string;
     /** F092.15 — a line under the name, e.g. «Administrator · Enhed Nord». */
     subtitle?: string;
+    /** F092.27 — the organisation, e.g. «broberg.ai». Shown ONLY in the menu's top, with a building icon. */
+    org?: string;
 }
 interface UserMenuItem {
     id: string;

package/dist/preact.d.ts

@@ -68,6 +68,23 @@ interface NavGroup<Icon = unknown> {
      * it is the group's key and its accessible name.
      */
     hideLabel?: boolean;
+    /**
+     * F092.26 — false: the heading is plain text (no fold button, no chevron) and the
+     * group is always open, even with a stored fold for this label. Default true.
+     */
+    collapsible?: boolean;
+    /**
+     * F092.28 — a small icon button at the right of the heading row (e.g. «Filtrér og
+     * sortér»). The app opens its own menu from `onClick(anchor)`. Clicking it never
+     * folds the group. Not shown with `hideLabel` (there is no heading row).
+     */
+    action?: {
+        icon: Icon;
+        label: string;
+        expanded?: boolean;
+        onClick: (anchor: HTMLElement) => void;
+        testid?: string;
+    };
 }
 /**
  * Is this item the current page? Exact match for "/", otherwise the path is the
@@ -495,6 +512,8 @@ interface ShellUser {
     picture?: string;
     /** F092.15 — a line under the name, e.g. «Administrator · Enhed Nord». */
     subtitle?: string;
+    /** F092.27 — the organisation, e.g. «broberg.ai». Shown ONLY in the menu's top, with a building icon. */
+    org?: string;
 }
 interface UserMenuItem {
     id: string;

package/dist/preact.js

@@ -509,6 +509,11 @@ 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);
+var IconBuilding = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("rect", { width: "16", height: "20", x: "4", y: "2", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 22v-4h6v4" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01" })
+] }), 15);
 function RowActions(props) {
   const t = TEXT[props.lang];
   const id = props.item.id;
@@ -899,7 +904,8 @@ function Sidebar(p) {
             ) : p.brandMark }) : null
           ] }) : null,
           /* @__PURE__ */ jsx("nav", { class: "bas-sidebar__nav", children: p.groups.map((g) => {
-            const open = railed || g.hideLabel || !folded.has(g.label);
+            const fixed = g.hideLabel || g.collapsible === false;
+            const open = railed || fixed || !folded.has(g.label);
             const slug = g.label.toLowerCase().replace(/[^a-z0-9]+/g, "-");
             return /* @__PURE__ */ jsxs(
               "div",
@@ -909,10 +915,32 @@ function Sidebar(p) {
                 "aria-label": g.hideLabel ? g.label : void 0,
                 "data-testid": g.hideLabel ? `sidebar-group-${slug}-unlabelled` : void 0,
                 children: [
-                  g.hideLabel ? null : /* @__PURE__ */ jsxs("button", { type: "button", class: "bas-group__label", "data-testid": `sidebar-group-${slug}`, "aria-expanded": open, onClick: () => toggleGroup(g.label), children: [
-                    /* @__PURE__ */ jsx(IconChevron, { open }),
-                    /* @__PURE__ */ jsx("span", { children: g.label })
-                  ] }),
+                  (() => {
+                    if (g.hideLabel) return null;
+                    const heading = g.collapsible === false ? /* @__PURE__ */ jsx("div", { class: "bas-group__label bas-group__label--static", "data-testid": `sidebar-group-${slug}`, children: /* @__PURE__ */ jsx("span", { children: g.label }) }) : /* @__PURE__ */ jsxs("button", { type: "button", class: "bas-group__label", "data-testid": `sidebar-group-${slug}`, "aria-expanded": open, onClick: () => toggleGroup(g.label), children: [
+                      /* @__PURE__ */ jsx(IconChevron, { open }),
+                      /* @__PURE__ */ jsx("span", { children: g.label })
+                    ] });
+                    if (!g.action) return heading;
+                    const a = g.action;
+                    return /* @__PURE__ */ jsxs("div", { class: "bas-group__head", children: [
+                      heading,
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          class: "bas-group__action",
+                          "data-testid": a.testid ?? `sidebar-group-${slug}-action`,
+                          "aria-label": a.label,
+                          title: a.label,
+                          "aria-haspopup": "menu",
+                          "aria-expanded": a.expanded ?? false,
+                          onClick: (e) => a.onClick(e.currentTarget),
+                          children: a.icon
+                        }
+                      )
+                    ] });
+                  })(),
                   open ? g.items.map(item) : null,
                   open ? g.sections?.map((sec) => /* @__PURE__ */ jsxs("div", { class: "bas-section", "data-testid": `sidebar-section-${slug}-${sec.label.toLowerCase().replace(/[^a-z0-9æøå]+/g, "-")}`, children: [
                     /* @__PURE__ */ jsx("div", { class: "bas-section__label", children: sec.label }),
@@ -1272,7 +1300,11 @@ function UserMenu(p) {
         /* @__PURE__ */ jsxs("div", { class: "bas-menu__whotext", children: [
           p.user.name ? /* @__PURE__ */ jsx("div", { class: "bas-menu__name", children: p.user.name }) : null,
           p.user.subtitle ? /* @__PURE__ */ jsx("div", { class: "bas-menu__sub", children: p.user.subtitle }) : null,
-          p.user.email ? /* @__PURE__ */ jsx("div", { class: "bas-menu__email", children: p.user.email }) : null
+          p.user.email ? /* @__PURE__ */ jsx("div", { class: "bas-menu__email", children: p.user.email }) : null,
+          p.user.org ? /* @__PURE__ */ jsxs("div", { class: "bas-menu__org", "data-testid": "user-menu-org", children: [
+            /* @__PURE__ */ jsx(IconBuilding, {}),
+            /* @__PURE__ */ jsx("span", { children: p.user.org })
+          ] }) : null
         ] })
       ] }),
       /* @__PURE__ */ jsx("div", { class: "bas-sep" }),