@broberg/app-shell 0.13.1 → 0.14.0

package/dist/preact.cjs

@@ -517,27 +517,50 @@ function RowActions(props) {
   const btn = hooks.useRef(null);
   const menu = hooks.useRef(null);
   const [stack, setStack] = hooks.useState([]);
-  const [hi, setHi] = hooks.useState(0);
+  const [hi, setHiState] = hooks.useState(0);
+  const hiRef = hooks.useRef(0);
+  const setHi = (n) => {
+    hiRef.current = n;
+    setHiState(n);
+  };
+  const [armed, setArmedState] = hooks.useState(null);
+  const armedRef = hooks.useRef(null);
+  const setArmed = (v) => {
+    armedRef.current = v;
+    setArmedState(v);
+  };
+  const items = hooks.useRef([]);
+  const onKeyDownRef = hooks.useRef(() => {
+  });
   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 close = (refocus = true) => {
-    setStack([]);
+    setStackNow([]);
+    setArmed(null);
     if (refocus) btn.current?.focus();
   };
   const show = (v) => {
-    setStack((s) => [...s, v]);
+    setStackNow([...stackRef.current, v]);
     setHi(0);
+    setArmed(null);
     if (v.kind === "input") setValue(v.action.input.value);
   };
   const back = () => {
-    setStack((s) => s.slice(0, -1));
+    setStackNow(stackRef.current.slice(0, -1));
     setHi(0);
+    setArmed(null);
   };
   const pick = (a) => {
     if (a.submenu?.length) return show({ kind: "list", actions: a.submenu, title: a.label });
     if (a.input) return show({ kind: "input", action: a });
+    if (a.confirm && armedRef.current !== a.id) return setArmed(a.id);
     close();
     props.onAction(a.id);
   };
@@ -554,50 +577,69 @@ function RowActions(props) {
     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;
     setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px`, width: `${w}px` });
-    if (view?.kind === "input") menu.current?.querySelector("input")?.focus();
-    else menu.current?.focus();
   }, [open, stack.length]);
-  hooks.useEffect(() => {
+  hooks.useLayoutEffect(() => {
+    if (!open || !pos) return;
+    if (view?.kind === "input") menu.current?.querySelector("input")?.focus();
+    else items.current[hiRef.current]?.focus();
+  }, [open, 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;
       close(false);
     };
+    const early = (e) => {
+      const n = e.target instanceof Node ? e.target : null;
+      if (n && menu.current?.contains(n)) return;
+      if (e.key === "Enter" || e.key === " " || e.key === "Spacebar" || e.key === "Tab") return;
+      onKeyDownRef.current(e);
+    };
+    document.addEventListener("keydown", early, true);
     document.addEventListener("mousedown", outside);
     window.addEventListener("scroll", outside, true);
     window.addEventListener("resize", outside);
     return () => {
+      document.removeEventListener("keydown", early, true);
       document.removeEventListener("mousedown", outside);
       window.removeEventListener("scroll", outside, true);
       window.removeEventListener("resize", outside);
     };
   }, [open]);
   const onKeyDown = (e) => {
-    if (!view) return;
+    const stack2 = stackRef.current;
+    const view2 = stack2[stack2.length - 1];
+    if (!view2) return;
     e.stopPropagation();
     if (e.key === "Escape") {
       e.preventDefault();
       return close();
     }
-    if (view.kind === "input") {
+    if (view2.kind === "input") {
       if (e.key === "Enter") {
         e.preventDefault();
-        save(view.action);
+        save(view2.action);
       }
       return;
     }
-    if ((e.key === "ArrowLeft" || e.key === "Backspace") && stack.length > 1) {
+    if ((e.key === "ArrowLeft" || e.key === "Backspace") && stack2.length > 1) {
       e.preventDefault();
       return back();
     }
-    const list = view.actions;
-    const { state, intent } = uiControlsCore.selectKeyReducer({ open: true, highlighted: hi }, e.key, list.length);
+    const list = view2.actions;
+    if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+      e.preventDefault();
+      const at = items.current.findIndex((b) => b === document.activeElement);
+      const idx = at >= 0 ? at : hiRef.current;
+      return list[idx] ? pick(list[idx]) : void 0;
+    }
+    const { state, intent } = uiControlsCore.selectKeyReducer({ open: true, highlighted: hiRef.current }, e.key, list.length);
     if (intent.type === "select") {
       e.preventDefault();
       return pick(list[intent.index]);
     }
-    if (state.highlighted !== hi) {
+    if (state.highlighted !== hiRef.current) {
       e.preventDefault();
       return setHi(state.highlighted);
     }
@@ -607,6 +649,7 @@ function RowActions(props) {
       pick(byKbd);
     }
   };
+  onKeyDownRef.current = onKeyDown;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -618,7 +661,7 @@ function RowActions(props) {
         "aria-label": `${t.moreFor} ${props.item.label}`,
         "aria-haspopup": "menu",
         "aria-expanded": open,
-        onClick: () => open ? close() : show({ kind: "list", actions: props.item.actions }),
+        onClick: () => stackRef.current.length ? close() : show({ kind: "list", actions: props.item.actions }),
         children: /* @__PURE__ */ jsxRuntime.jsx(IconMore, {})
       }
     ),
@@ -643,13 +686,18 @@ function RowActions(props) {
             {
               type: "button",
               role: "menuitem",
-              class: "bas-rowmenu__item" + (i === hi ? " is-active" : "") + (a.danger ? " is-danger" : ""),
+              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: a.label }),
+                /* @__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
               ]
             },