@broberg/app-shell 0.13.1 → 0.15.0

package/dist/preact.d.cts

@@ -16,8 +16,11 @@ interface NavItem<Icon = unknown> {
      * it is on the current path.
      */
     children?: NavItem<Icon>[];
-    /** F092.20 — a status marker before the label; "working" = a run in progress. */
-    marker?: "working";
+    /**
+     * F092.20 — a status marker before the label; "working" = a run in progress.
+     * F092.23 — "idle" = the same ring in grey (finished), so every row lines up.
+     */
+    marker?: "working" | "idle";
     /** F092.20 — shows a pin icon after the label. */
     pinned?: boolean;
     /** F092.21 — row actions: a «…» button opens a menu with these. */
@@ -42,6 +45,10 @@ interface NavAction {
         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". */
@@ -55,6 +62,12 @@ interface NavGroup<Icon = unknown> {
     variant?: "default" | "plain";
     /** F092.20 — sub-headed lists inside this group, shown after `items`. */
     sections?: NavSection<Icon>[];
+    /**
+     * F092.23 — no heading row: the items show directly, always open (it cannot be
+     * folded, so a stored fold for this label is ignored). `label` stays required —
+     * it is the group's key and its accessible name.
+     */
+    hideLabel?: boolean;
 }
 /**
  * Is this item the current page? Exact match for "/", otherwise the path is the

package/dist/preact.d.ts

@@ -16,8 +16,11 @@ interface NavItem<Icon = unknown> {
      * it is on the current path.
      */
     children?: NavItem<Icon>[];
-    /** F092.20 — a status marker before the label; "working" = a run in progress. */
-    marker?: "working";
+    /**
+     * F092.20 — a status marker before the label; "working" = a run in progress.
+     * F092.23 — "idle" = the same ring in grey (finished), so every row lines up.
+     */
+    marker?: "working" | "idle";
     /** F092.20 — shows a pin icon after the label. */
     pinned?: boolean;
     /** F092.21 — row actions: a «…» button opens a menu with these. */
@@ -42,6 +45,10 @@ interface NavAction {
         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". */
@@ -55,6 +62,12 @@ interface NavGroup<Icon = unknown> {
     variant?: "default" | "plain";
     /** F092.20 — sub-headed lists inside this group, shown after `items`. */
     sections?: NavSection<Icon>[];
+    /**
+     * F092.23 — no heading row: the items show directly, always open (it cannot be
+     * folded, so a stored fold for this label is ignored). `label` stays required —
+     * it is the group's key and its accessible name.
+     */
+    hideLabel?: boolean;
 }
 /**
  * Is this item the current page? Exact match for "/", otherwise the path is the

package/dist/preact.js

@@ -515,27 +515,50 @@ function RowActions(props) {
   const btn = useRef(null);
   const menu = useRef(null);
   const [stack, setStack] = useState([]);
-  const [hi, setHi] = useState(0);
+  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) => {
-    setStack([]);
+    setStackNow([]);
+    setArmed(null);
     if (refocus) btn.current?.focus();
   };
   const show = (v) => {
-    setStack((s) => [...s, v]);
+    setStackNow([...stackRef.current, v]);
     setHi(0);
+    setArmed(null);
     if (v.kind === "input") setValue(v.action.input.value);
   };
   const back = () => {
-    setStack((s) => s.slice(0, -1));
+    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);
   };
@@ -552,50 +575,69 @@ function RowActions(props) {
     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(() => {
+  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) => {
-    if (!view) return;
+    const stack2 = stackRef.current;
+    const view2 = stack2[stack2.length - 1];
+    if (!view2) return;
     e.stopPropagation();
     if (e.key === "Escape") {
       e.preventDefault();
       return close();
     }
-    if (view.kind === "input") {
+    if (view2.kind === "input") {
       if (e.key === "Enter") {
         e.preventDefault();
-        save(view.action);
+        save(view2.action);
       }
       return;
     }
-    if ((e.key === "ArrowLeft" || e.key === "Backspace") && stack.length > 1) {
+    if ((e.key === "ArrowLeft" || e.key === "Backspace") && stack2.length > 1) {
       e.preventDefault();
       return back();
     }
-    const list = view.actions;
-    const { state, intent } = selectKeyReducer({ open: true, highlighted: hi }, e.key, list.length);
+    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 !== hi) {
+    if (state.highlighted !== hiRef.current) {
       e.preventDefault();
       return setHi(state.highlighted);
     }
@@ -605,6 +647,7 @@ function RowActions(props) {
       pick(byKbd);
     }
   };
+  onKeyDownRef.current = onKeyDown;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -616,7 +659,7 @@ function RowActions(props) {
         "aria-label": `${t.moreFor} ${props.item.label}`,
         "aria-haspopup": "menu",
         "aria-expanded": open,
-        onClick: () => open ? close() : show({ kind: "list", actions: props.item.actions }),
+        onClick: () => stackRef.current.length ? close() : show({ kind: "list", actions: props.item.actions }),
         children: /* @__PURE__ */ jsx(IconMore, {})
       }
     ),
@@ -641,13 +684,18 @@ function RowActions(props) {
             {
               type: "button",
               role: "menuitem",
-              class: "bas-rowmenu__item" + (i === hi ? " is-active" : "") + (a.danger ? " is-danger" : ""),
+              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: a.label }),
+                /* @__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
               ]
             },
@@ -760,7 +808,7 @@ function Sidebar(p) {
         children: [
           active && !sub ? /* @__PURE__ */ jsx("span", { class: "bas-item__bar" }) : null,
           it.icon ? /* @__PURE__ */ jsx("span", { class: "bas-item__icon", children: it.icon }) : null,
-          it.marker === "working" ? /* @__PURE__ */ jsx("span", { class: "bas-item__marker", "data-testid": `sidebar-item-${it.id}-marker`, role: "img", "aria-label": TEXT[p.lang].working }) : null,
+          it.marker === "working" ? /* @__PURE__ */ jsx("span", { class: "bas-item__marker", "data-testid": `sidebar-item-${it.id}-marker`, role: "img", "aria-label": TEXT[p.lang].working }) : it.marker === "idle" ? /* @__PURE__ */ jsx("span", { class: "bas-item__marker bas-item__marker--idle", "data-testid": `sidebar-item-${it.id}-marker`, "aria-hidden": "true" }) : null,
           /* @__PURE__ */ jsx("span", { class: "bas-item__label", children: it.label }),
           it.pinned ? /* @__PURE__ */ jsx("span", { class: "bas-item__pin", "data-testid": `sidebar-item-${it.id}-pinned`, role: "img", "aria-label": TEXT[p.lang].pinned, children: /* @__PURE__ */ jsx(IconPin, {}) }) : null,
           badge ? /* @__PURE__ */ jsx("span", { class: "bas-item__count", "data-testid": `sidebar-badge-${it.id}`, children: badge }) : null
@@ -851,19 +899,29 @@ function Sidebar(p) {
             ) : p.brandMark }) : null
           ] }) : null,
           /* @__PURE__ */ jsx("nav", { class: "bas-sidebar__nav", children: p.groups.map((g) => {
-            const open = railed || !folded.has(g.label);
+            const open = railed || g.hideLabel || !folded.has(g.label);
             const slug = g.label.toLowerCase().replace(/[^a-z0-9]+/g, "-");
-            return /* @__PURE__ */ jsxs("div", { class: "bas-group" + (g.variant === "plain" ? " bas-group--plain" : ""), children: [
-              /* @__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 })
-              ] }),
-              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 }),
-                sec.items.map(item)
-              ] }, sec.label)) : null
-            ] }, g.label);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                class: "bas-group" + (g.variant === "plain" ? " bas-group--plain" : ""),
+                role: g.hideLabel ? "group" : void 0,
+                "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 })
+                  ] }),
+                  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 }),
+                    sec.items.map(item)
+                  ] }, sec.label)) : null
+                ]
+              },
+              g.label
+            );
           }) }),
           p.footer?.length ? /* @__PURE__ */ jsx("div", { class: "bas-sidebar__foot", children: p.footer.map(item) }) : null,
           p.bottom ? /* @__PURE__ */ jsx("div", { class: "bas-sidebar__user", "data-testid": "sidebar-user", children: p.bottom }) : null