@broberg/app-shell 0.19.0 → 0.20.1

package/README.md

@@ -160,6 +160,22 @@ with a building icon (`user-menu-org`); the sidebar foot keeps `subtitle`.
 at the right of the heading row (`sidebar-group-<slug>-action`), also with `collapsible: false`; clicking it
 never folds the group. The app opens its own menu from the anchor.
 
+**0.20.0** — `ItemActionsMenu` (F092.29): the sidebar row menu on its own, so a title «⌄» opens THE SAME
+menu (same keys, confirm, input, submenu). The sidebar's «…» uses this component — one implementation.
+
+```tsx
+const anchor = useRef<HTMLButtonElement>(null);
+const [open, setOpen] = useState(false);
+<button ref={anchor} data-testid="title-trigger" onClick={() => setOpen(!open)}>{title} ⌄</button>
+{open && anchor.current ? (
+  <ItemActionsMenu actions={[...rowActions, { id: "share", label: "Del chat" }]} anchor={anchor.current}
+    lang="da" label={title} placement="down" testidPrefix="title"
+    onAction={(id, value) => …} onClose={() => setOpen(false)} />
+) : null}
+```
+testids: `<prefix>-menu`, `<prefix>-action-<id>`, `<prefix>-back`, `<prefix>-input`, `<prefix>-save` — so the
+anchor's own testid must not be `<prefix>-menu`.
+
 ## 0.11.1 — the palette list floats over the menu (F001.25)
 
 Christian 10/10: «Kunne denne ikke være en pop-over ting så dialogen ikke bliver

package/css/app-shell.css

@@ -70,8 +70,11 @@
 .bas-sidebar {
   /* sticky makes its own stacking context, so the rail's flyout can only rise
    * as high as the sidebar does; without this <main> paints over it and takes
-   * its clicks (appkit, Lens 839394b1). Below the top bar (50). */
-  z-index: 20;
+   * its clicks (appkit, Lens 839394b1). Below the top bar (50).
+   * F092.30 — and ABOVE the inset content header (30): every popover that opens
+   * from the sidebar (user menu, row menu, flyout) lives in this context, so at
+   * 20 the header's line and blur ran over the user menu (scout #2779). */
+  z-index: 40;
   flex: 0 0 240px; width: 240px;
   position: sticky; top: var(--bas-top); align-self: flex-start;
   height: calc(100dvh - var(--bas-top));

package/dist/preact.cjs

@@ -516,12 +516,17 @@ var IconBuilding = () => svg(/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 22v-4h6v4" }),
   /* @__PURE__ */ jsxRuntime.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) {
+function ItemActionsMenu(props) {
   const t = TEXT[props.lang];
-  const id = props.item.id;
-  const btn = hooks.useRef(null);
+  const pre = props.testidPrefix ?? "item-actions";
   const menu = hooks.useRef(null);
-  const [stack, setStack] = hooks.useState([]);
+  const first = [{ kind: "list", actions: props.actions }];
+  const [stack, setStack] = hooks.useState(first);
+  const stackRef = hooks.useRef(first);
+  const setStackNow = (next) => {
+    stackRef.current = next;
+    setStack(next);
+  };
   const [hi, setHiState] = hooks.useState(0);
   const hiRef = hooks.useRef(0);
   const setHi = (n) => {
@@ -540,16 +545,12 @@ function RowActions(props) {
   const [value, setValue] = hooks.useState("");
   const [pos, setPos] = hooks.useState(void 0);
   const view = stack[stack.length - 1];
-  const open = !!view;
-  const stackRef = hooks.useRef([]);
-  const setStackNow = (next) => {
-    stackRef.current = next;
-    setStack(next);
-  };
+  const closed = hooks.useRef(false);
   const close = (refocus = true) => {
-    setStackNow([]);
-    setArmed(null);
-    if (refocus) btn.current?.focus();
+    if (closed.current) return;
+    closed.current = true;
+    if (refocus) props.anchor.focus();
+    props.onClose();
   };
   const show = (v) => {
     setStackNow([...stackRef.current, v]);
@@ -574,25 +575,24 @@ function RowActions(props) {
     props.onAction(a.id, value);
   };
   hooks.useLayoutEffect(() => {
-    if (!open || !btn.current) return setPos(void 0);
-    const r = btn.current.getBoundingClientRect();
+    const r = props.anchor.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;
+    const fitsBelow = r.bottom + 4 + h <= vh - m;
+    const top = props.placement === "down" || fitsBelow || 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]);
+  }, [stack.length]);
   hooks.useLayoutEffect(() => {
-    if (!open || !pos) return;
-    if (view?.kind === "input") menu.current?.querySelector("input")?.focus();
+    if (!pos) return;
+    if (view.kind === "input") menu.current?.querySelector("input")?.focus();
     else items.current[hiRef.current]?.focus();
-  }, [open, pos, hi, stack.length]);
+  }, [pos, hi, stack.length]);
   hooks.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;
+      if (n && (menu.current?.contains(n) || props.anchor.contains(n))) return;
       close(false);
     };
     const early = (e) => {
@@ -611,8 +611,9 @@ function RowActions(props) {
       window.removeEventListener("scroll", outside, true);
       window.removeEventListener("resize", outside);
     };
-  }, [open]);
+  }, []);
   const onKeyDown = (e) => {
+    if (closed.current) return;
     const stack2 = stackRef.current;
     const view2 = stack2[stack2.length - 1];
     if (!view2) return;
@@ -655,6 +656,82 @@ function RowActions(props) {
     }
   };
   onKeyDownRef.current = onKeyDown;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: menu,
+      class: "bas-rowmenu",
+      role: "menu",
+      tabIndex: -1,
+      "aria-label": view.kind === "list" && view.title ? view.title : props.label,
+      "data-testid": `${pre}-menu`,
+      style: pos ?? { position: "fixed", visibility: "hidden" },
+      onKeyDown,
+      children: [
+        stack.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", class: "bas-rowmenu__back", "data-testid": `${pre}-back`, "aria-label": t.back, onClick: back, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconChevronLeft, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: view.kind === "list" ? view.title : view.action.label })
+        ] }) : null,
+        view.kind === "list" ? view.actions.map((a, i) => /* @__PURE__ */ jsxRuntime.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": `${pre}-action-${a.id}`,
+            onMouseEnter: () => setHi(i),
+            onFocus: () => setHi(i),
+            onClick: () => pick(a),
+            children: [
+              a.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-rowmenu__icon", children: a.icon }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-rowmenu__label", children: armed === a.id && a.confirm ? a.confirm.label : a.label }),
+              a.submenu?.length ? /* @__PURE__ */ jsxRuntime.jsx(IconChevronRight, {}) : a.kbd ? /* @__PURE__ */ jsxRuntime.jsx("kbd", { class: "bas-rowmenu__kbd", children: a.kbd.toUpperCase() }) : null
+            ]
+          },
+          a.id
+        )) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "form",
+          {
+            class: "bas-rowmenu__form",
+            "data-testid": `${pre}-form`,
+            onSubmit: (e) => {
+              e.preventDefault();
+              save(view.action);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  class: "bas-rowmenu__input",
+                  "data-testid": `${pre}-input`,
+                  "aria-label": view.action.label,
+                  value,
+                  placeholder: view.action.input.placeholder,
+                  onInput: (e) => setValue(e.currentTarget.value)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", class: "bas-rowmenu__save", "data-testid": `${pre}-save`, children: view.action.input.saveLabel ?? t.save })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function RowActions(props) {
+  const t = TEXT[props.lang];
+  const id = props.item.id;
+  const btn = hooks.useRef(null);
+  const [open, setOpenState] = hooks.useState(false);
+  const openRef = hooks.useRef(false);
+  const setOpen = (v) => {
+    openRef.current = v;
+    setOpenState(v);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -666,73 +743,24 @@ function RowActions(props) {
         "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 }),
+        onClick: () => {
+          if (!openRef.current) return setOpen(true);
+          setOpen(false);
+          btn.current?.focus();
+        },
         children: /* @__PURE__ */ jsxRuntime.jsx(IconMore, {})
       }
     ),
-    view ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+    open && btn.current ? /* @__PURE__ */ jsxRuntime.jsx(
+      ItemActionsMenu,
       {
-        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__ */ jsxRuntime.jsxs("button", { type: "button", class: "bas-rowmenu__back", "data-testid": `sidebar-item-${id}-back`, "aria-label": t.back, onClick: back, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(IconChevronLeft, {}),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: view.kind === "list" ? view.title : view.action.label })
-          ] }) : null,
-          view.kind === "list" ? view.actions.map((a, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { class: "bas-rowmenu__icon", children: a.icon }) : null,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-rowmenu__label", children: armed === a.id && a.confirm ? a.confirm.label : a.label }),
-                a.submenu?.length ? /* @__PURE__ */ jsxRuntime.jsx(IconChevronRight, {}) : a.kbd ? /* @__PURE__ */ jsxRuntime.jsx("kbd", { class: "bas-rowmenu__kbd", children: a.kbd.toUpperCase() }) : null
-              ]
-            },
-            a.id
-          )) : /* @__PURE__ */ jsxRuntime.jsxs(
-            "form",
-            {
-              class: "bas-rowmenu__form",
-              "data-testid": `sidebar-item-${id}-form`,
-              onSubmit: (e) => {
-                e.preventDefault();
-                save(view.action);
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("button", { type: "submit", class: "bas-rowmenu__save", "data-testid": `sidebar-item-${id}-save`, children: view.action.input.saveLabel ?? t.save })
-              ]
-            }
-          )
-        ]
+        actions: props.item.actions,
+        anchor: btn.current,
+        lang: props.lang,
+        label: props.item.label,
+        testidPrefix: `sidebar-item-${id}`,
+        onAction: props.onAction,
+        onClose: () => setOpen(false)
       }
     ) : null
   ] });
@@ -2037,6 +2065,7 @@ exports.AnalyticsPage = AnalyticsPage;
 exports.AppShell = AppShell;
 exports.Avatar = Avatar;
 exports.ConfirmDialog = ConfirmDialog;
+exports.ItemActionsMenu = ItemActionsMenu;
 exports.NotificationBell = NotificationBell;
 exports.PageHeader = PageHeader;
 exports.PageTabs = PageTabs;