@ai-matrx/canvas 0.8.1 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.8.2
+### Unreleased
+
+- The tab strip follows the tablist keyboard pattern: Left/Right (wrapping), Home and End move to and open the neighbouring tab. Only the active tab is in the Tab order, so a background tab was unreachable without a mouse.
+- Consumer action: none.
+
 ## 0.8.1
 
 Live check of 0.8.0 (1440px, canvas expanded, 5 tabs): a 1428px window strip drew 127px tabs — a `flex-basis` alone let the tab list size itself to the names.
@@ -231,3 +237,4 @@ One canvas for the web app and the desktop app: the package now owns the pane ch
 
 - Replace workspace Canvas imports with `@ai-matrx/canvas` at `latest`; remove source aliases and transpile overrides.
 - Import `@ai-matrx/canvas/styles.css` and optionally `@ai-matrx/canvas/tokens.css`; keep the existing host identity, store and theme ports.
+

package/dist/react.cjs

@@ -3324,24 +3324,49 @@ function TabStrip({
       "data-overflow": overflow ? "" : void 0,
       style: { ["--mxc-tab-min"]: `${CANVAS_TAB_MIN_WIDTH}px` },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: list, className: "mxc-tabs", role: "tablist", "aria-label": "Canvas tabs", "aria-multiselectable": joined ? true : void 0, children: entries.map(
-          (entry) => entry.type === "tab" ? tabView(entry.tab) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "div",
-            {
-              className: "mxc-tab-group",
-              "data-split": "",
-              role: "presentation",
-              style: { ["--mxc-group-n"]: entry.tabs.length },
-              children: entry.tabs.map(tabView)
-            },
-            `split:${entry.tabs.map((tab) => tab.itemId).join("|")}`
-          )
-        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
+          {
+            ref: list,
+            className: "mxc-tabs",
+            role: "tablist",
+            "aria-label": "Canvas tabs",
+            "aria-multiselectable": joined ? true : void 0,
+            onKeyDown: moveTabFocus,
+            children: entries.map(
+              (entry) => entry.type === "tab" ? tabView(entry.tab) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "div",
+                {
+                  className: "mxc-tab-group",
+                  "data-split": "",
+                  role: "presentation",
+                  style: { ["--mxc-group-n"]: entry.tabs.length },
+                  children: entry.tabs.map(tabView)
+                },
+                `split:${entry.tabs.map((tab) => tab.itemId).join("|")}`
+              )
+            )
+          }
+        ),
         overflow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabListMenu, { tabs, activeItemId }) : null
       ]
     }
   );
 }
+function moveTabFocus(event) {
+  const keys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+  if (!keys.includes(event.key) || event.altKey || event.ctrlKey || event.metaKey) return;
+  const tabs = [...event.currentTarget.querySelectorAll('[role="tab"]')];
+  const at = tabs.findIndex((tab) => tab === event.target || tab.contains(event.target));
+  if (at < 0 || tabs.length < 2) return;
+  event.preventDefault();
+  const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+  const step = event.key === "ArrowRight" !== rtl ? 1 : -1;
+  const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : (at + step + tabs.length) % tabs.length;
+  const target = tabs[next];
+  target?.focus();
+  target?.click();
+}
 function TabListMenu({ tabs, activeItemId }) {
   const canvas = useCanvas();
   const { ports, layer } = useCanvasInternals();