@broberg/app-shell 0.20.1 → 0.22.0

package/dist/preact.cjs

@@ -546,6 +546,7 @@ function ItemActionsMenu(props) {
   const [pos, setPos] = hooks.useState(void 0);
   const view = stack[stack.length - 1];
   const closed = hooks.useRef(false);
+  const [kbd, setKbd] = hooks.useState(() => props.anchor.matches(":focus-visible"));
   const close = (refocus = true) => {
     if (closed.current) return;
     closed.current = true;
@@ -579,9 +580,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]);
   hooks.useLayoutEffect(() => {
@@ -618,6 +622,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();
@@ -660,7 +665,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,
@@ -672,28 +677,32 @@ function ItemActionsMenu(props) {
           /* @__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;
+        view.kind === "list" ? view.actions.map((a, i) => [
+          a.separator ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-rowmenu__sep", role: "separator" }, `${a.id}-sep`) : null,
+          /* @__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.value ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-rowmenu__value", "data-testid": `${pre}-action-${a.id}-value`, children: a.value }) : null,
+                a.submenu?.length ? /* @__PURE__ */ jsxRuntime.jsx(IconChevronRight, {}) : a.kbd ? /* @__PURE__ */ jsxRuntime.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__ */ 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(
+            a.id
+          )
+        ]) : /* @__PURE__ */ jsxRuntime.jsxs(
           "form",
           {
             class: "bas-rowmenu__form",