@broberg/app-shell 0.20.1 → 0.22.0

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". */
@@ -471,8 +475,12 @@ interface ItemActionsMenuProps {
     lang: Lang;
     /** The menu's accessible name, e.g. the conversation's title. */
     label: string;
-    /** "auto" (default): below the anchor if it fits, else above. "down": always below. */
-    placement?: "auto" | "down";
+    /**
+     * "auto" (default): right-aligned to the anchor, below it if it fits, else above.
+     * "down": right-aligned, always below. "up-start" (F092.31): ABOVE the anchor and
+     * left-aligned to its left edge (e.g. a «+» in a composer); below if there is no room above.
+     */
+    placement?: "auto" | "down" | "up-start";
     /** testids: `<prefix>-menu`, `<prefix>-action-<id>`, `<prefix>-back`, `<prefix>-input`, `<prefix>-save`. Default "item-actions". */
     testidPrefix?: string;
 }

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". */
@@ -471,8 +475,12 @@ interface ItemActionsMenuProps {
     lang: Lang;
     /** The menu's accessible name, e.g. the conversation's title. */
     label: string;
-    /** "auto" (default): below the anchor if it fits, else above. "down": always below. */
-    placement?: "auto" | "down";
+    /**
+     * "auto" (default): right-aligned to the anchor, below it if it fits, else above.
+     * "down": right-aligned, always below. "up-start" (F092.31): ABOVE the anchor and
+     * left-aligned to its left edge (e.g. a «+» in a composer); below if there is no room above.
+     */
+    placement?: "auto" | "down" | "up-start";
     /** testids: `<prefix>-menu`, `<prefix>-action-<id>`, `<prefix>-back`, `<prefix>-input`, `<prefix>-save`. Default "item-actions". */
     testidPrefix?: string;
 }

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;
@@ -577,9 +578,12 @@ function ItemActionsMenu(props) {
     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 start = props.placement === "up-start";
+    const left = Math.max(m, Math.min(start ? r.left : r.right - w, vw - w - m));
     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;
+    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` });
   }, [stack.length]);
   useLayoutEffect(() => {
@@ -616,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();
@@ -658,7 +663,7 @@ 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,
@@ -670,28 +675,32 @@ function ItemActionsMenu(props) {
           /* @__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",