@ai-matrx/canvas 0.8.0 → 0.8.2

package/dist/react.js

@@ -3249,8 +3249,9 @@ function TabStrip({
     if (!el || !activeItemId) return;
     const tab = [...el.querySelectorAll("[data-mxc-tab]")].find((node) => node.dataset.mxcTab === activeItemId);
     if (!tab) return;
+    const target = tab.closest(".mxc-tab-group") ?? tab;
     const box = el.getBoundingClientRect();
-    const rect = tab.getBoundingClientRect();
+    const rect = target.getBoundingClientRect();
     if (rect.left < box.left) el.scrollLeft -= box.left - rect.left;
     else if (rect.right > box.right) el.scrollLeft += rect.right - box.right;
   }, [activeItemId, width, tabs.length]);
@@ -3277,24 +3278,49 @@ function TabStrip({
       "data-overflow": overflow ? "" : void 0,
       style: { ["--mxc-tab-min"]: `${CANVAS_TAB_MIN_WIDTH}px` },
       children: [
-        /* @__PURE__ */ jsx7("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__ */ jsx7(
-            "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__ */ jsx7(
+          "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__ */ jsx7(
+                "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__ */ jsx7(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();