@broberg/app-shell 0.21.0 → 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;
@@ -621,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();
@@ -663,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,
@@ -675,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",