@smwb/ui-react 2.8.0 → 2.9.0

package/dist/headless/components/layout/tabGroups/tabGroups.js

@@ -0,0 +1,781 @@
+import { jsxs as B, jsx as g, Fragment as ie } from "react/jsx-runtime";
+import u from "react";
+import J from "clsx";
+import { Icon as sr } from "../../base/icon/icon.js";
+import { useControllableState as ir } from "../../../hooks/useControllableState.js";
+import { useEventCallback as _ } from "../../../hooks/useEventCallback.js";
+import { useForkRef as ur } from "../../../hooks/useForkRef.js";
+import { useId as ar } from "../../../hooks/useId.js";
+import { useSafeLayoutEffect as vt } from "../../../hooks/useSafeLayoutEffect.js";
+import { matchesKeyboardShortcut as L } from "../../../utils/keyboardShortcut.js";
+import { throttle as cr } from "../../../utils/throttle.js";
+import { TAB_GROUPS_LABELS as lr, getGroups as Et, computeTabGroupsGrid as dr, groupHeaderArea as fr, groupBodyArea as pr, gridTemplateRows as mr, gridTemplateColumns as gr, findGroupOfTab as $, resizeSplit as br, setActiveGroup as hr, describeTabGroupsChange as wr, moveTab as ue, moveTabInDirection as yr, selectTab as Rr, removeTab as vr, adjacentGroup as Ar, dropZoneAt as Sr, separatorArea as Er, createTabGroupsLayout as Tr } from "./tabGroupsLayout.js";
+import { ownerRootOf as ae, deepActiveElement as tt, containsDeep as ce, tabMove as Dr, frameExitTarget as _r, ownGroupIdOf as le, lastStopOf as Mr, focusFromEnd as kr } from "./tabGroupsFocus.js";
+import { Tabs as xr } from "../../navigation/tabs/tabs.js";
+import { Menu as Cr } from "../../navigation/menu/menu.js";
+import { MenuItem as $r } from "../../navigation/menu/menuItem.js";
+import { Tab as Pr } from "../../navigation/tabs/tab/tab.js";
+const Or = '[role^="menuitem"]:not([aria-disabled="true"])', Fr = Tr(), Gr = [
+  "Alt+Shift+ArrowLeft",
+  "Alt+Shift+ArrowRight",
+  "Alt+Shift+ArrowUp",
+  "Alt+Shift+ArrowDown",
+  "Control+Shift+ArrowLeft",
+  "Meta+Shift+ArrowLeft",
+  "Control+Shift+ArrowRight",
+  "Meta+Shift+ArrowRight"
+].join(" ");
+function At(c) {
+  let a = c != null ? c : null;
+  for (; a; ) {
+    const f = a.getAttribute("data-group-id");
+    if (f !== null) return f;
+    a = a.parentElement;
+  }
+  return null;
+}
+function de(c) {
+  var a;
+  return (a = c.closest(".smwb-tab-item")) != null ? a : c;
+}
+function fe(c) {
+  var f;
+  const a = c.closest(".smwb-tab-item");
+  return (f = a == null ? void 0 : a.querySelector('[role="tab"][data-tab-id]')) != null ? f : c.closest('[role="tab"][data-tab-id]');
+}
+function me(c, a) {
+  if (c.type !== "group") {
+    if (c.id === a) return c;
+    for (const f of c.children) {
+      const p = me(f, a);
+      if (p) return p;
+    }
+  }
+}
+function ge(c) {
+  return c.type === "group" ? [c.id] : c.children.flatMap(ge);
+}
+function pe(c) {
+  const a = [0];
+  return c.forEach((f, p) => {
+    var m;
+    a[p + 1] = ((m = a[p]) != null ? m : 0) + f;
+  }), a;
+}
+function Lr(c, a) {
+  var m, b;
+  const f = (m = c.sizes[a]) != null ? m : 0, p = f + ((b = c.sizes[a + 1]) != null ? b : 0);
+  return p > 0 ? Math.round(f / p * 100) : 0;
+}
+function et(c, a) {
+  return Et(c).some((f) => f.id === a);
+}
+function zr(c) {
+  const a = [], f = (p) => {
+    if (p.type === "group") {
+      a.push(`h:${p.id}`, `p:${p.id}`);
+      return;
+    }
+    p.children.forEach((m, b) => {
+      f(m), b < p.children.length - 1 && a.push(`s:${p.id}:${b}`);
+    });
+  };
+  return f(c), a;
+}
+function St(c, a, f, p) {
+  const m = $(c, f), b = $(a, f);
+  if (!m || !b) return null;
+  const z = !et(a, m.id);
+  return p !== void 0 && !et(c, b.id) ? { type: "split", tab: f, from: m.id, to: b.id, edge: p, sourceClosed: z } : { type: "move", tab: f, from: m.id, to: b.id, index: b.tabs.indexOf(f), sourceClosed: z };
+}
+const rn = u.forwardRef(function(a, f) {
+  var ne, oe, se;
+  const {
+    layout: p,
+    defaultLayout: m,
+    onLayoutChange: b,
+    getTab: z,
+    renderPanel: be,
+    onTabClose: rt,
+    empty: he,
+    minGroupSize: Tt = 120,
+    keyboardStep: Dt = 5,
+    groupActions: we = !0,
+    dense: ye = !1,
+    labels: _t,
+    id: Re,
+    className: ve,
+    style: Ae,
+    "data-testid": Se = "tab-groups",
+    // Wrapped so that the caller's handler still runs, first.
+    onFocus: nt,
+    onKeyDown: ot,
+    onDragStart: st,
+    onDragOver: it,
+    onDrop: ut,
+    onDragEnd: at,
+    ...Ee
+  } = a, A = ar(Re), Mt = (t) => `${A}-header-${encodeURIComponent(t)}`, kt = (t) => `${A}-panel-${encodeURIComponent(t)}`, xt = (t, e) => `${A}-separator-${encodeURIComponent(t)}-${e}`, y = u.useRef(null), Te = ur(f, y), [R, De] = ir({
+    value: p,
+    defaultValue: m != null ? m : Fr
+  }), h = u.useRef(R);
+  h.current = R;
+  const P = u.useRef(R);
+  P.current = R;
+  const ct = u.useRef(p !== void 0);
+  ct.current = p !== void 0;
+  const lt = u.useRef(!1), S = u.useMemo(() => ({ ...lr, ..._t }), [_t]), [_e, Me] = u.useState(""), q = u.useRef(null), dt = u.useRef(/* @__PURE__ */ new WeakMap()), Ct = u.useRef(0), H = u.useRef(!1), W = u.useRef(null), N = u.useRef(null), ft = u.useRef(!1), M = u.useRef(null), D = u.useRef(null), Y = u.useRef(null), [ke, $t] = u.useState(!1), [j, K] = u.useState(null), U = u.useRef(null), [O, Pt] = u.useState(null), [Ot, V] = u.useState(null), [pt, xe] = u.useState(null), [Ft, Ce] = u.useState(0), w = u.useMemo(() => Et(R), [R]), E = u.useMemo(() => dr(R), [R]), mt = u.useMemo(() => new Map(w.map((t) => [t.id, t])), [w]), F = u.useMemo(() => new Map(E.groups.map((t) => [t.id, t])), [E]), $e = u.useMemo(
+    () => new Map(E.separators.map((t) => [`${t.split}:${t.index}`, t])),
+    [E]
+  ), Gt = u.useMemo(() => pe(E.columns), [E]), Lt = u.useMemo(() => pe(E.rows), [E]), zt = u.useRef(null), G = (ne = zt.current) != null ? ne : /* @__PURE__ */ new Set(), gt = /* @__PURE__ */ new Set();
+  w.forEach((t) => t.tabs.forEach((e) => gt.add(e))), Array.from(G).forEach((t) => {
+    gt.has(t) || G.delete(t);
+  }), w.forEach((t) => {
+    t.active !== null && G.add(t.active);
+  }), zt.current = G;
+  const Nt = u.useRef([]), X = Nt.current.filter((t) => gt.has(t)), Kt = new Set(X);
+  w.forEach(
+    (t) => t.tabs.forEach((e) => {
+      Kt.has(e) || (Kt.add(e), X.push(e));
+    })
+  ), Nt.current = X;
+  const Ut = /* @__PURE__ */ new Map();
+  w.forEach((t) => t.tabs.forEach((e) => Ut.set(e, t)));
+  const Pe = _((t) => {
+    const e = z(t);
+    return e ? e.title !== void 0 ? e.title : typeof e.label == "string" ? e.label : t : t;
+  }), k = _((t, e) => {
+    if (t === h.current) return !1;
+    h.current = t, Ct.current += 1, dt.current.set(t, Ct.current), De(t), b == null || b(t, e);
+    const r = wr(e, t, Pe, S);
+    return r && Me((n) => n === r ? `${r} ` : r), ct.current && !lt.current && (lt.current = !0, queueMicrotask(Oe)), !0;
+  }), Oe = _(() => {
+    lt.current = !1, !(!ct.current || h.current === P.current) && (h.current = P.current);
+  }), Q = (t, e, r) => {
+    var s;
+    const n = $(e, t);
+    if (!n) return;
+    const o = (s = y.current) == null ? void 0 : s.ownerDocument;
+    q.current = {
+      tab: t,
+      group: n.id,
+      index: n.tabs.indexOf(t),
+      ...r === void 0 ? {} : { gone: r },
+      after: e,
+      base: P.current,
+      from: o ? tt(o) : null
+    };
+  }, x = _((t, e, r = !0) => {
+    const n = h.current, o = ue(n, t, e), s = St(n, o, t, e.edge);
+    !s || !k(o, s) || r && Q(t, o);
+  }), Fe = _((t, e) => {
+    const r = h.current, n = yr(r, t, e);
+    if (n === r) return !1;
+    const o = St(r, n, t, e);
+    return !o || !k(n, o) ? !1 : (Q(t, n), !0);
+  }), Z = _((t, e) => {
+    const r = h.current, n = $(r, t);
+    if (!n) return !1;
+    const o = n.tabs.indexOf(t) + e;
+    if (o < 0 || o >= n.tabs.length) return !1;
+    const s = ue(r, t, { group: n.id, index: o }), i = St(r, s, t, void 0);
+    return !i || !k(s, i) ? !1 : (Q(t, s), !0);
+  }), Ge = _((t) => {
+    const e = h.current, r = $(e, t);
+    r && k(Rr(e, t), { type: "select", tab: t, group: r.id });
+  }), bt = _(
+    (t, e, r, n, o) => {
+      const s = o != null ? o : h.current, i = br(s, t, e, r, n);
+      if (i === s) return;
+      const l = me(i.root, t);
+      k(i, { type: "resize", split: t, sizes: l ? [...l.sizes] : [] });
+    }
+  ), Le = _(
+    (t, e, r) => {
+      const n = h.current, o = $(n, t);
+      if (!o || (rt == null ? void 0 : rt(t, e, r)) === !1) return;
+      const s = vr(n, t);
+      if (s === n) return;
+      const i = !et(s, o.id), l = y.current, d = l ? tt(l.ownerDocument) : null, T = r === "actions" || l !== null && le(l, d) === o.id;
+      if (!k(s, { type: "close", tab: t, group: o.id, groupClosed: i }) || !i || !T) return;
+      const v = Ar(n, o.id), C = v ? Et(s).find((yt) => yt.id === v) : void 0;
+      C != null && C.active && Q(C.active, s, o.id);
+    }
+  ), ze = (t) => {
+    nt == null || nt(t);
+    const e = y.current;
+    if (!e) return;
+    const r = t.target, n = N.current;
+    if (N.current = ae(r) === e ? r : null, (n == null ? void 0 : n.localName) === "iframe" && n !== r && !ft.current) {
+      const s = _r(e, n, r);
+      if (s !== null && s === W.current) {
+        H.current = !0, s !== r && s.focus({ preventScroll: !0 });
+        return;
+      }
+      if (s !== null) {
+        s.focus();
+        return;
+      }
+    }
+    if (r === W.current) {
+      Ke();
+      return;
+    }
+    const o = le(e, r);
+    !o || o === h.current.activeGroup || k(hr(h.current, o), { type: "activate", group: o });
+  }, Ne = (t) => {
+    if (ot == null || ot(t), t.defaultPrevented || t.key !== "Tab" || t.altKey || t.ctrlKey || t.metaKey || t.nativeEvent.isComposing) return;
+    const e = y.current, r = e ? tt(e.ownerDocument) : null;
+    if (!e || !r || !ce(e, r)) return;
+    const n = Dr(e, r, t.shiftKey ? -1 : 1);
+    n && (n.element === W.current && (H.current = !0), N.current = null, n.prevent ? (t.preventDefault(), n.element.focus()) : n.element.focus({ preventScroll: !0 }));
+  };
+  u.useEffect(() => {
+    const t = y.current, e = t == null ? void 0 : t.ownerDocument.defaultView;
+    if (!t || !e) return;
+    let r;
+    const n = () => {
+      ft.current = !0, e.clearTimeout(r), r = e.setTimeout(() => {
+        ft.current = !1;
+      }, 0);
+    }, o = (i) => {
+      i.relatedTarget instanceof Node && !t.contains(i.relatedTarget) && (N.current = null);
+    }, s = () => {
+      const i = t.ownerDocument.activeElement;
+      i instanceof e.HTMLIFrameElement && ae(i) === t && (N.current = i);
+    };
+    return t.addEventListener("pointerdown", n, !0), t.addEventListener("focusout", o), e.addEventListener("blur", s), () => {
+      e.clearTimeout(r), t.removeEventListener("pointerdown", n, !0), t.removeEventListener("focusout", o), e.removeEventListener("blur", s);
+    };
+  }, []);
+  const Ke = () => {
+    const t = y.current;
+    if (H.current || !t) return;
+    const e = Mr(t);
+    e && kr(e);
+  }, It = (t, e) => {
+    if (e === t.base) return !0;
+    const r = dt.current.get(e), n = dt.current.get(t.after);
+    return r !== void 0 && n !== void 0 && r < n;
+  }, Bt = () => {
+    const t = q.current, e = y.current, r = P.current;
+    if (!t || !e || It(t, r)) return;
+    const n = $(r, t.tab);
+    if ((n == null ? void 0 : n.id) !== t.group || n.tabs.indexOf(t.tab) !== t.index || t.gone !== void 0 && et(r, t.gone)) return;
+    const o = Array.from(
+      e.querySelectorAll(':scope > .smwb-tab-groups__header [role="tab"][data-tab-id]')
+    ).find((l) => l.getAttribute("data-tab-id") === t.tab);
+    if (!o || At(o) !== t.group) return;
+    const s = e.ownerDocument, i = tt(s);
+    i !== o && (i !== null && i !== s.body && i !== t.from && !ce(e, i) || o.focus());
+  };
+  vt(() => {
+    Bt();
+  }), u.useEffect(() => {
+    Bt();
+    const t = q.current;
+    t && !It(t, P.current) && (q.current = null);
+  }), vt(() => {
+    var e, r, n;
+    if (Ft === 0) return;
+    const t = pt;
+    for (const o of (r = (e = t == null ? void 0 : t.getAttribute("aria-controls")) == null ? void 0 : e.split(/\s+/)) != null ? r : []) {
+      const s = o ? (n = t == null ? void 0 : t.ownerDocument.getElementById(o)) == null ? void 0 : n.querySelector(Or) : null;
+      if (s) {
+        s.focus({ preventScroll: !0 });
+        return;
+      }
+    }
+  }, [Ft, pt]), vt(() => {
+    if (!O) return;
+    const t = document.body, e = t.style.cursor;
+    return t.style.cursor = O.orientation === "vertical" ? "col-resize" : "row-resize", () => {
+      t.style.cursor = e;
+    };
+  }, [O]);
+  const qt = u.useCallback(
+    (t, e) => {
+      const r = e === "x" ? Gt : Lt;
+      let n = 1 / 0, o = -1 / 0;
+      return ge(t).forEach((s) => {
+        var T, v;
+        const i = F.get(s);
+        if (!i) return;
+        const [l, d] = e === "x" ? i.column : i.row;
+        n = Math.min(n, (T = r[l]) != null ? T : 0), o = Math.max(o, (v = r[d]) != null ? v : 100);
+      }), Number.isFinite(n) && o > n ? o - n : 100;
+    },
+    [Gt, Lt, F]
+  ), Ht = u.useCallback(
+    (t, e) => {
+      var s, i;
+      const r = (s = y.current) == null ? void 0 : s.getBoundingClientRect(), o = ((i = e === "x" ? r == null ? void 0 : r.width : r == null ? void 0 : r.height) != null ? i : 0) * qt(t, e) / 100;
+      return { extentPx: o, minPercent: o > 0 ? Tt / o * 100 : 0 };
+    },
+    [Tt, qt]
+  ), Ue = u.useCallback(
+    (t) => {
+      const e = F.get(t);
+      return e ? { gridArea: fr(e) } : void 0;
+    },
+    [F]
+  ), Wt = u.useCallback(
+    (t) => {
+      const e = F.get(t);
+      return e ? { gridArea: pr(e) } : void 0;
+    },
+    [F]
+  ), ht = u.useMemo(
+    () => cr((t) => {
+      const e = U.current;
+      !e || !(e.extentPx > 0) || bt(e.split, e.index, (t - e.start) / e.extentPx * 100, e.minPercent, e.layout);
+    }, 1e3 / 60),
+    [bt]
+  );
+  u.useEffect(
+    () => () => {
+      D.current && D.current.view.cancelAnimationFrame(D.current.id), ht.cancel();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const Ie = (t, e, r, n) => {
+    if (t.pointerType === "mouse" && t.button !== 0) return;
+    const o = e.direction === "row" ? "vertical" : "horizontal", s = o === "vertical" ? "x" : "y", { extentPx: i, minPercent: l } = Ht(e, s);
+    U.current = {
+      split: e.id,
+      index: r,
+      axis: s,
+      pointerId: t.pointerId,
+      start: s === "x" ? t.clientX : t.clientY,
+      extentPx: i,
+      minPercent: l,
+      layout: h.current
+    }, Pt({ key: n, orientation: o });
+    const d = t.currentTarget;
+    if (typeof d.setPointerCapture == "function")
+      try {
+        d.setPointerCapture(t.pointerId);
+      } catch {
+      }
+  }, Be = (t) => {
+    const e = U.current;
+    !e || e.pointerId !== t.pointerId || ht(e.axis === "x" ? t.clientX : t.clientY);
+  }, Yt = (t) => {
+    var e;
+    ((e = U.current) == null ? void 0 : e.pointerId) === t.pointerId && (U.current = null, ht.cancel(), Pt(null));
+  }, qe = (t, e, r) => {
+    if (t.defaultPrevented) return;
+    const n = e.direction === "row";
+    let o;
+    if (t.key === (n ? "ArrowLeft" : "ArrowUp")) o = -Dt;
+    else if (t.key === (n ? "ArrowRight" : "ArrowDown")) o = Dt;
+    else if (t.key === "Home") o = -1 / 0;
+    else if (t.key === "End") o = 1 / 0;
+    else return;
+    t.preventDefault();
+    const { minPercent: s } = Ht(e, n ? "x" : "y");
+    bt(e.id, r, o, s);
+  }, jt = (t) => {
+    var i, l, d;
+    const e = y.current, r = t.target;
+    if (!e || !r || r.closest(".smwb-tab-groups") !== e) return null;
+    const n = r.closest(".smwb-tab-groups__header");
+    if (n) {
+      const T = n.getAttribute("data-group-id");
+      if (!T) return null;
+      const v = fe(r), C = (i = v == null ? void 0 : v.getAttribute("data-tab-id")) != null ? i : null, yt = (d = (l = mt.get(T)) == null ? void 0 : l.tabs) != null ? d : [], Rt = C === null ? -1 : yt.indexOf(C);
+      return {
+        kind: "row",
+        group: T,
+        index: Rt >= 0 ? Rt : null,
+        item: Rt >= 0 && v ? de(v) : null
+      };
+    }
+    const o = r.closest(".smwb-tab-groups__drop-target");
+    if (!o) return null;
+    const s = o.getAttribute("data-group-id");
+    return s ? { kind: "body", group: s, element: o } : null;
+  }, Vt = (t, e) => {
+    const r = t.getBoundingClientRect();
+    return Sr(e.clientX - r.left, e.clientY - r.top, r.width, r.height);
+  }, Xt = (t, e, r) => {
+    var n, o;
+    return t !== e ? !0 : r === "center" ? !1 : ((o = (n = mt.get(e)) == null ? void 0 : n.tabs.length) != null ? o : 0) >= 2;
+  }, I = (t) => {
+    var e;
+    Y.current !== t && ((e = Y.current) == null || e.classList.remove("smwb-tab-item--drop-target"), Y.current = t, t == null || t.classList.add("smwb-tab-item--drop-target"));
+  }, wt = () => {
+    var r, n;
+    const t = M.current, e = Array.from(
+      (n = (r = y.current) == null ? void 0 : r.querySelectorAll(":scope > .smwb-tab-groups__header")) != null ? n : []
+    ).find((o) => o.getAttribute("data-group-id") === (t == null ? void 0 : t.group));
+    e == null || e.querySelectorAll(".smwb-tab-item--drop-target").forEach((o) => {
+      o !== Y.current && o.classList.remove("smwb-tab-item--drop-target");
+    });
+  }, Qt = () => {
+    M.current = null, D.current && (D.current.view.cancelAnimationFrame(D.current.id), D.current = null), I(null), $t(!1), K(null);
+  }, He = (t) => {
+    st == null || st(t);
+    const e = y.current, r = t.target;
+    if (!e || !r || r.closest(".smwb-tab-groups") !== e) return;
+    const n = fe(r), o = n == null ? void 0 : n.getAttribute("data-tab-id");
+    if (!n || !o || n.getAttribute("aria-disabled") === "true") return;
+    const s = At(n);
+    if (!s) return;
+    const i = e.ownerDocument, l = i.activeElement;
+    M.current = {
+      tab: o,
+      group: s,
+      hadFocus: !!(l && l !== i.body && de(n).contains(l))
+    };
+    const d = i.defaultView;
+    if (!d) return;
+    const T = d.requestAnimationFrame(() => {
+      D.current = null, $t(!0);
+    });
+    D.current = { view: d, id: T };
+  }, We = (t) => {
+    var n;
+    if (it == null || it(t), !M.current) return;
+    const e = jt(t);
+    if (!e) {
+      I(null), wt(), K(null);
+      return;
+    }
+    if (e.kind === "row") {
+      if (e.group === M.current.group) {
+        I(null), (n = e.item) == null || n.classList.add("smwb-tab-item--drop-target");
+        return;
+      }
+      wt(), t.preventDefault(), t.dataTransfer && (t.dataTransfer.dropEffect = "move"), K(null), I(e.item);
+      return;
+    }
+    I(null), wt();
+    const r = Vt(e.element, t);
+    if (!Xt(M.current.group, e.group, r)) {
+      K(null);
+      return;
+    }
+    t.preventDefault(), t.dataTransfer && (t.dataTransfer.dropEffect = "move"), K(
+      (o) => o && o.group === e.group && o.zone === r ? o : { group: e.group, zone: r }
+    );
+  }, Ye = (t) => {
+    ut == null || ut(t);
+    const e = M.current;
+    if (!e) return;
+    const r = t.defaultPrevented ? null : jt(t), n = r && r.kind === "body" ? Vt(r.element, t) : null;
+    if (Qt(), !!r) {
+      if (r.kind === "row") {
+        if (r.group === e.group) return;
+        x(
+          e.tab,
+          r.index === null ? { group: r.group } : { group: r.group, index: r.index },
+          e.hadFocus
+        );
+        return;
+      }
+      !n || !Xt(e.group, r.group, n) || x(e.tab, n === "center" ? { group: r.group } : { group: r.group, edge: n }, e.hadFocus);
+    }
+  }, je = (t) => {
+    at == null || at(t), Qt();
+  }, Ve = (t, e, r) => {
+    if (e.type === "drop") return;
+    const n = t.tabs[r];
+    n !== void 0 && Ge(n);
+  }, Xe = (t, e, r) => {
+    var o, s;
+    const n = t.tabs[e];
+    n !== void 0 && x(n, { group: t.id, index: r }, (s = (o = M.current) == null ? void 0 : o.hadFocus) != null ? s : !1);
+  }, Qe = (t) => (e) => {
+    if (e.defaultPrevented || e.repeat || e.nativeEvent.isComposing) return;
+    const r = e.target, n = r == null ? void 0 : r.closest('[role="tab"]');
+    if (!n || At(n) !== t.id || n.getAttribute("aria-disabled") === "true") return;
+    const o = n.getAttribute("data-tab-id");
+    if (!o) return;
+    const s = L(e, ["Alt", "Shift", "ArrowLeft"]) ? "left" : L(e, ["Alt", "Shift", "ArrowRight"]) ? "right" : L(e, ["Alt", "Shift", "ArrowUp"]) ? "top" : L(e, ["Alt", "Shift", "ArrowDown"]) ? "bottom" : void 0;
+    if (s !== void 0) {
+      Fe(o, s) && e.preventDefault();
+      return;
+    }
+    if (L(e, ["Mod", "Shift", "ArrowLeft"])) {
+      Z(o, -1) && e.preventDefault();
+      return;
+    }
+    L(e, ["Mod", "Shift", "ArrowRight"]) && Z(o, 1) && e.preventDefault();
+  }, Zt = (t, e, r) => {
+    xe(e), V(t), r && Ce((n) => n + 1);
+  }, Ze = (t, e) => {
+    if (Ot === t) {
+      V(null);
+      return;
+    }
+    Zt(t, e.currentTarget, e.detail === 0);
+  }, Je = (t, e) => {
+    e.defaultPrevented || e.repeat || e.key !== "ArrowDown" || (e.preventDefault(), Zt(t, e.currentTarget, !0));
+  }, tr = (t, e) => {
+    const r = t.active, n = t.tabs.length, o = r ? t.tabs.indexOf(r) : -1, s = w[e - 1], i = w[e + 1], l = (d) => () => {
+      r && d(r);
+    };
+    return [
+      {
+        key: "split-right",
+        label: S.splitRight,
+        // A split moves the group's selected tab out of it, so it takes two tabs to leave one behind.
+        disabled: !r || n < 2,
+        run: l((d) => x(d, { group: t.id, edge: "right" }))
+      },
+      {
+        key: "split-down",
+        label: S.splitDown,
+        disabled: !r || n < 2,
+        run: l((d) => x(d, { group: t.id, edge: "bottom" }))
+      },
+      {
+        key: "previous-group",
+        label: S.moveToPreviousGroup,
+        disabled: !r || !s,
+        run: l((d) => {
+          s && x(d, { group: s.id });
+        })
+      },
+      {
+        key: "next-group",
+        label: S.moveToNextGroup,
+        disabled: !r || !i,
+        run: l((d) => {
+          i && x(d, { group: i.id });
+        })
+      },
+      {
+        key: "move-left",
+        label: S.moveLeft,
+        disabled: !r || o <= 0,
+        run: l((d) => Z(d, -1))
+      },
+      {
+        key: "move-right",
+        label: S.moveRight,
+        disabled: !r || o < 0 || o >= n - 1,
+        run: l((d) => Z(d, 1))
+      }
+    ];
+  }, er = (t) => {
+    var o, s;
+    const e = z(t), r = (e == null ? void 0 : e.disabled) === !0, n = encodeURIComponent(t);
+    return /* @__PURE__ */ g(
+      Pr,
+      {
+        id: `${A}-tab-${n}`,
+        "aria-controls": `${A}-panel-${n}`,
+        "aria-keyshortcuts": r ? void 0 : Gr,
+        "data-tab-id": t,
+        label: (o = e == null ? void 0 : e.label) != null ? o : t,
+        icon: e == null ? void 0 : e.icon,
+        closable: (s = e == null ? void 0 : e.closable) != null ? s : !0,
+        closeLabel: e == null ? void 0 : e.closeLabel,
+        actions: e == null ? void 0 : e.actions,
+        disabled: e == null ? void 0 : e.disabled,
+        onClose: (i, l) => Le(t, i, l)
+      },
+      t
+    );
+  }, rr = (t, e) => {
+    const r = `${A}-menu-${encodeURIComponent(t.id)}`, n = Ot === t.id, o = t.active ? Math.max(0, t.tabs.indexOf(t.active)) : 0;
+    return /* @__PURE__ */ B(
+      "div",
+      {
+        id: Mt(t.id),
+        className: J("smwb-tab-groups__header", {
+          "smwb-tab-groups__header--active": R.activeGroup === t.id
+        }),
+        "data-group-id": t.id,
+        style: Ue(t.id),
+        onKeyDown: Qe(t),
+        children: [
+          /* @__PURE__ */ g(
+            xr,
+            {
+              className: "smwb-tab-groups__tabs",
+              value: o,
+              onChange: (s, i) => Ve(t, s, i),
+              onReorder: (s, i) => Xe(t, s, i),
+              dense: ye,
+              scrollable: !0,
+              overflowMenu: !0,
+              "aria-label": S.group(e + 1, w.length),
+              children: t.tabs.map(er)
+            }
+          ),
+          we && /* @__PURE__ */ B(ie, { children: [
+            /* @__PURE__ */ g(
+              "button",
+              {
+                type: "button",
+                className: "smwb-tab-groups__actions-trigger",
+                "aria-label": S.groupActions,
+                "aria-haspopup": "menu",
+                "aria-expanded": n,
+                "aria-controls": n ? r : void 0,
+                onClick: (s) => Ze(t.id, s),
+                onKeyDown: (s) => Je(t.id, s),
+                children: /* @__PURE__ */ g(sr, { name: "more_vert", size: 20 })
+              }
+            ),
+            /* @__PURE__ */ g(
+              Cr,
+              {
+                id: r,
+                anchorElement: pt,
+                isOpen: n,
+                onClose: () => V(null),
+                placement: "bottom-end",
+                children: tr(t, e).map((s) => /* @__PURE__ */ g(
+                  $r,
+                  {
+                    disabled: s.disabled,
+                    onClick: () => {
+                      V(null), s.run();
+                    },
+                    children: s.label
+                  },
+                  s.key
+                ))
+              }
+            )
+          ] })
+        ]
+      },
+      `h:${t.id}`
+    );
+  }, nr = (t) => {
+    const e = Ut.get(t);
+    if (!e) return null;
+    const r = encodeURIComponent(t);
+    return /* @__PURE__ */ B(
+      "div",
+      {
+        id: kt(t),
+        className: "smwb-tab-panel smwb-tab-groups__panel",
+        role: "tabpanel",
+        "aria-labelledby": `${A}-tab-${r}`,
+        tabIndex: 0,
+        hidden: e.active !== t,
+        "data-tab-id": t,
+        "data-group-id": e.id,
+        style: Wt(e.id),
+        children: [
+          G.has(t) ? be(t) : null,
+          G.has(t) ? /* @__PURE__ */ g("span", { className: "smwb-tab-groups__panel-end", tabIndex: -1, "aria-hidden": "true" }) : null
+        ]
+      },
+      `p:${t}`
+    );
+  }, or = (t, e) => {
+    var s;
+    const r = `s:${t.id}:${e}`, n = $e.get(`${t.id}:${e}`), o = (s = n == null ? void 0 : n.orientation) != null ? s : t.direction === "row" ? "vertical" : "horizontal";
+    return /* @__PURE__ */ g(
+      "div",
+      {
+        id: xt(t.id, e),
+        className: J("smwb-tab-groups__separator", `smwb-tab-groups__separator--${o}`, {
+          "smwb-tab-groups__separator--dragging": (O == null ? void 0 : O.key) === r
+        }),
+        role: "separator",
+        tabIndex: 0,
+        "aria-orientation": o,
+        "aria-valuenow": Lr(t, e),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": S.resize,
+        "data-split-id": t.id,
+        "data-index": e,
+        style: n ? { gridArea: Er(n) } : void 0,
+        onKeyDown: (i) => qe(i, t, e),
+        onPointerDown: (i) => Ie(i, t, e, r),
+        onPointerMove: Be,
+        onPointerUp: Yt,
+        onPointerCancel: Yt
+      },
+      r
+    );
+  }, Jt = [], te = (t) => {
+    t.type !== "group" && t.children.forEach((e, r) => {
+      te(e), r < t.children.length - 1 && Jt.push(or(t, r));
+    });
+  }, ee = w.length === 1 && ((se = (oe = w[0]) == null ? void 0 : oe.tabs.length) != null ? se : 0) === 0;
+  let re;
+  return ee || (te(R.root), re = [
+    ...zr(R.root).flatMap((t) => {
+      var r, n;
+      if (t.startsWith("h:")) return [Mt(t.slice(2))];
+      if (t.startsWith("p:")) return ((n = (r = mt.get(t.slice(2))) == null ? void 0 : r.tabs) != null ? n : []).map(kt);
+      const e = t.lastIndexOf(":");
+      return [xt(t.slice(2, e), Number(t.slice(e + 1)))];
+    }),
+    `${A}-status`
+  ].join(" ")), /* @__PURE__ */ B(
+    "div",
+    {
+      ...Ee,
+      id: A,
+      ref: Te,
+      className: J("smwb-tab-groups", { "smwb-tab-groups--split": w.length > 1 }, ve),
+      "data-testid": Se,
+      style: { ...Ae, gridTemplateColumns: gr(E), gridTemplateRows: mr(E) },
+      "aria-owns": re,
+      onFocus: ze,
+      onKeyDown: Ne,
+      onDragStart: He,
+      onDragOver: We,
+      onDrop: Ye,
+      onDragEnd: je,
+      children: [
+        ee ? /* @__PURE__ */ g("div", { className: "smwb-tab-groups__empty", children: he }) : /* @__PURE__ */ B(ie, { children: [
+          /* @__PURE__ */ g(u.Fragment, { children: w.map(rr) }, "headers"),
+          /* @__PURE__ */ g(u.Fragment, { children: Jt }, "separators"),
+          /* @__PURE__ */ g(u.Fragment, { children: X.map(nr) }, "panels"),
+          /* @__PURE__ */ g(u.Fragment, { children: ke && w.map((t) => {
+            const e = (j == null ? void 0 : j.group) === t.id ? j.zone : void 0;
+            return /* @__PURE__ */ g(
+              "div",
+              {
+                className: J("smwb-tab-groups__drop-target", e && `smwb-tab-groups__drop-target--${e}`),
+                "data-group-id": t.id,
+                "aria-hidden": "true",
+                style: Wt(t.id)
+              },
+              `d:${t.id}`
+            );
+          }) }, "drop-targets"),
+          /* @__PURE__ */ g(
+            "span",
+            {
+              ref: W,
+              className: "smwb-tab-groups__focus-guard",
+              tabIndex: 0,
+              onBlur: () => {
+                H.current = !1;
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ g(
+          "div",
+          {
+            id: `${A}-status`,
+            className: "smwb-tab-groups__status",
+            role: "status",
+            "aria-atomic": "true",
+            "data-testid": "tab-groups-status",
+            children: _e
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  rn as TabGroups
+};
+//# sourceMappingURL=tabGroups.js.map