@broberg/app-shell 0.21.0 → 0.22.1

package/dist/preact.d.cts

@@ -49,6 +49,10 @@ interface NavAction {
     confirm?: {
         label: string;
     };
+    /** F092.32 — a dimmed value right-aligned before the chevron («Type …… All ›»). */
+    value?: string;
+    /** F092.32 — a divider line before this item, to separate groups. */
+    separator?: boolean;
 }
 interface NavSection<Icon = unknown> {
     /** A sub-heading inside one group, e.g. "I dag" / "I går". */

package/dist/preact.d.ts

@@ -49,6 +49,10 @@ interface NavAction {
     confirm?: {
         label: string;
     };
+    /** F092.32 — a dimmed value right-aligned before the chevron («Type …… All ›»). */
+    value?: string;
+    /** F092.32 — a divider line before this item, to separate groups. */
+    separator?: boolean;
 }
 interface NavSection<Icon = unknown> {
     /** A sub-heading inside one group, e.g. "I dag" / "I går". */

package/dist/preact.js

@@ -544,6 +544,7 @@ function ItemActionsMenu(props) {
   const [pos, setPos] = useState(void 0);
   const view = stack[stack.length - 1];
   const closed = useRef(false);
+  const [kbd, setKbd] = useState(() => props.anchor.matches(":focus-visible"));
   const close = (refocus = true) => {
     if (closed.current) return;
     closed.current = true;
@@ -575,7 +576,7 @@ function ItemActionsMenu(props) {
   useLayoutEffect(() => {
     const r = props.anchor.getBoundingClientRect();
     const vw = window.innerWidth, vh = window.innerHeight, m = 8;
-    const w = Math.min(240, vw - 2 * m);
+    const w = Math.min(Math.max(240, menu.current?.offsetWidth ?? 0), vw - 2 * m);
     const h = menu.current?.offsetHeight ?? 0;
     const start = props.placement === "up-start";
     const left = Math.max(m, Math.min(start ? r.left : r.right - w, vw - w - m));
@@ -583,7 +584,7 @@ function ItemActionsMenu(props) {
     const fitsAbove = r.top - 4 - h >= m;
     const below = start ? !fitsAbove : props.placement === "down" || fitsBelow || !fitsAbove;
     const top = below ? 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` });
+    setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px` });
   }, [stack.length]);
   useLayoutEffect(() => {
     if (!pos) return;
@@ -619,6 +620,7 @@ function ItemActionsMenu(props) {
     const view2 = stack2[stack2.length - 1];
     if (!view2) return;
     e.stopPropagation();
+    setKbd(true);
     if (e.key === "Escape") {
       e.preventDefault();
       return close();
@@ -661,40 +663,44 @@ function ItemActionsMenu(props) {
     "div",
     {
       ref: menu,
-      class: "bas-rowmenu",
+      class: "bas-rowmenu" + (kbd ? " is-kbd" : ""),
       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" },
+      style: pos ?? { position: "fixed", left: "0px", top: "0px", visibility: "hidden" },
       onKeyDown,
       children: [
         stack.length > 1 ? /* @__PURE__ */ jsxs("button", { type: "button", class: "bas-rowmenu__back", "data-testid": `${pre}-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;
+        view.kind === "list" ? view.actions.map((a, i) => [
+          a.separator ? /* @__PURE__ */ jsx("div", { class: "bas-rowmenu__sep", role: "separator" }, `${a.id}-sep`) : null,
+          /* @__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": `${pre}-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.value ? /* @__PURE__ */ jsx("span", { class: "bas-rowmenu__value", "data-testid": `${pre}-action-${a.id}-value`, children: a.value }) : null,
+                a.submenu?.length ? /* @__PURE__ */ jsx(IconChevronRight, {}) : a.kbd ? /* @__PURE__ */ jsx("kbd", { class: "bas-rowmenu__kbd", children: a.kbd.toUpperCase() }) : null
+              ]
             },
-            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__ */ 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(
+            a.id
+          )
+        ]) : /* @__PURE__ */ jsxs(
           "form",
           {
             class: "bas-rowmenu__form",