@smwb/ui-react 2.8.0 → 2.10.0

package/dist/components/navigation/tabs/tabs.js

@@ -1,189 +1,413 @@
-import { jsxs as y, jsx as i } from "react/jsx-runtime";
+import { jsxs as M, jsx as f, Fragment as Xt } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/tabs/tabs.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                   */
-import n from "react";
-import E from "clsx";
-import { debounce as H } from "../../../utils/debounce.js";
-import { useEventCallback as p } from "../../../hooks/useEventCallback.js";
-import { animate as J } from "../../../utils/animate.js";
-import { Icon as M } from "../../base/icon/icon.js";
-const z = {
+import l from "react";
+import mt from "clsx";
+import { debounce as Yt } from "../../../utils/debounce.js";
+import { useEventCallback as A } from "../../../hooks/useEventCallback.js";
+import { animate as Zt } from "../../../utils/animate.js";
+import { Icon as G } from "../../base/icon/icon.js";
+import { useRovingTabIndex as te } from "../../../hooks/useRovingTabIndex.js";
+import { useSafeLayoutEffect as ee } from "../../../hooks/useSafeLayoutEffect.js";
+import { matchesKeyboardShortcut as J } from "../../../utils/keyboardShortcut.js";
+import { getHiddenIndexes as re } from "./tabs.utils.js";
+import { TabsContext as ne } from "./tabsContext.js";
+import { Menu as oe } from "../menu/menu.js";
+import { MenuItem as se } from "../menu/menuItem.js";
+const bt = {
   root: {},
   content: {}
-}, K = 0.8, ot = n.forwardRef(function(x, k) {
+}, le = 0.8, ce = (a) => a.button !== 0 || a.ctrlKey || a.metaKey || a.shiftKey || a.altKey, gt = (a) => l.Children.toArray(a).some(
+  (_) => l.isValidElement(_) && _.type === l.Fragment ? gt(_.props.children) : !0
+), T = (a) => !!(a != null && a.props.disabled) || (a == null ? void 0 : a.props["aria-disabled"]) === !0 || (a == null ? void 0 : a.props["aria-disabled"]) === "true", Ce = l.forwardRef(function(_, pt) {
   const {
-    className: B,
-    children: I,
-    onChange: W,
-    value: v,
-    indicatorContent: _ = !1,
-    scrollable: m = !1,
-    scrollButtons: A = !1,
-    dense: O = !1,
-    scrollBackAriaLabel: T = "Scroll tabs back",
-    scrollForwardAriaLabel: V = "Scroll tabs forward",
-    "aria-label": D,
-    ...P
-  } = x, [j, q] = n.useState(!1), [a, L] = n.useState(z), [f, F] = n.useState({ start: !1, end: !1 }), l = n.useRef(null), b = n.useRef(null), S = 40, g = () => {
-    const t = l.current;
+    className: ht,
+    children: wt,
+    onChange: z,
+    value: d,
+    indicatorContent: Q = !1,
+    scrollable: C = !1,
+    scrollButtons: yt = !1,
+    onReorder: w,
+    overflowMenu: U = !1,
+    overflowMenuAriaLabel: It = "More tabs",
+    dense: Lt = !1,
+    orientation: X = "horizontal",
+    panels: Y,
+    id: x,
+    scrollBackAriaLabel: St = "Scroll tabs back",
+    scrollForwardAriaLabel: _t = "Scroll tabs forward",
+    "aria-label": Ct,
+    ...vt
+  } = _, [Rt, Dt] = l.useState(!1), [b, Z] = l.useState(bt), [y, Et] = l.useState({ start: !1, end: !1 }), [tt, Mt] = l.useState([]), [et, W] = l.useState(!1), [Tt, xt] = l.useState(null), Nt = l.useId(), N = x != null ? x : Nt, [v, O] = l.useState(null), i = l.useRef(null), u = l.useRef(null), g = l.useRef(null), R = l.useRef(null), V = l.useRef(null), D = l.useRef(null), K = 40, rt = () => {
+    const t = i.current;
     let e;
     if (t) {
-      const o = t.getBoundingClientRect();
+      const n = t.getBoundingClientRect();
       e = {
         clientWidth: t.clientWidth,
         scrollLeft: t.scrollLeft,
         scrollTop: t.scrollTop,
         scrollWidth: t.scrollWidth,
-        top: o.top,
-        bottom: o.bottom,
-        left: o.left,
-        right: o.right
+        top: n.top,
+        bottom: n.bottom,
+        left: n.left,
+        right: n.right
       };
     }
-    let r = null, s = null;
-    if (b.current || console.error("tabListRef.current is undefined"), t && b.current) {
-      const o = b.current.children;
-      if (o.length > 0) {
-        const c = o[v];
-        if (r = c ? c.getBoundingClientRect() : null, _) {
-          const d = c ? c.querySelector(".smwb-tab__content") : null;
-          s = d ? d.getBoundingClientRect() : null;
+    let r = null, o = null;
+    if (u.current || console.error("tabListRef.current is undefined"), t && u.current) {
+      const n = u.current.children;
+      if (n.length > 0) {
+        const s = n[d];
+        if (r = s ? s.getBoundingClientRect() : null, Q) {
+          const c = s ? s.querySelector(".smwb-tab__content") : null;
+          o = c ? c.getBoundingClientRect() : null;
         }
       }
     }
-    return { tabsMeta: e, tabMeta: r, tabContentMeta: s };
-  }, w = p(() => {
-    const { tabsMeta: t, tabMeta: e, tabContentMeta: r } = g();
-    let s = 0;
-    e && t && (s = 1 * (e.left - t.left + t.scrollLeft));
-    const o = {
+    return { tabsMeta: e, tabMeta: r, tabContentMeta: o };
+  }, F = A(() => {
+    const { tabsMeta: t, tabMeta: e, tabContentMeta: r } = rt();
+    let o = 0;
+    e && t && (o = 1 * (e.left - t.left + t.scrollLeft));
+    const n = {
       root: {
-        left: s,
+        left: o,
         width: e ? e.width : 0
       }
     };
-    if (_ && r && (o.content = {
+    if (Q && r && (n.content = {
       width: r.width
-    }), isNaN(a.root.left) || isNaN(a.root.width))
-      L(o);
+    }), isNaN(b.root.left) || isNaN(b.root.width))
+      Z(n);
     else {
-      const c = Math.abs(a.root.left - o.root.left), d = Math.abs(a.root.width - o.root.width);
-      (c >= 1 || d >= 1) && L(o);
+      const s = Math.abs(b.root.left - n.root.left), c = Math.abs(b.root.width - n.root.width);
+      (s >= 1 || c >= 1) && Z(n);
     }
-  }), h = (t, { animation: e = !0 } = {}) => {
-    l.current && (e ? J(l.current, "scrollLeft", t, {
+  }), E = (t, { animation: e = !0 } = {}) => {
+    i.current && (e ? Zt(i.current, "scrollLeft", t, {
       duration: 300
-    }) : l.current.scrollLeft = t);
-  }, u = p(() => {
-    const t = l.current, e = t ? t.scrollWidth - t.clientWidth : 0, r = t && m ? { start: t.scrollLeft > 1, end: t.scrollLeft < e - 1 } : { start: !1, end: !1 };
-    F((s) => s.start === r.start && s.end === r.end ? s : r);
-  }), R = (t) => {
-    const e = l.current;
-    e && h(e.scrollLeft + t * e.clientWidth * K);
-  }, C = p((t) => {
-    const { tabsMeta: e, tabMeta: r } = g();
+    }) : i.current.scrollLeft = t);
+  }, I = A(() => {
+    var n, s;
+    const t = i.current, e = t ? t.scrollWidth - t.clientWidth : 0, r = t && C ? { start: t.scrollLeft > 1, end: t.scrollLeft < e - 1 } : { start: !1, end: !1 };
+    Et((c) => c.start === r.start && c.end === r.end ? c : r);
+    const o = t && C && U ? re(
+      Array.from((s = (n = u.current) == null ? void 0 : n.children) != null ? s : []).map((c) => {
+        const h = c;
+        return { offsetLeft: h.offsetLeft, offsetWidth: h.offsetWidth };
+      }),
+      t.scrollLeft,
+      t.clientWidth
+    ) : [];
+    Mt(
+      (c) => c.length === o.length && c.every((h, S) => h === o[S]) ? c : o
+    );
+  }), nt = (t) => {
+    const e = i.current;
+    e && E(e.scrollLeft + t * e.clientWidth * le);
+  }, Ot = A((t, e = !0) => {
+    const r = i.current, o = r && u.current ? u.current.children[t] : null;
+    if (!r || !o)
+      return;
+    const n = r.getBoundingClientRect(), s = o.getBoundingClientRect();
+    s.left < n.left ? E(r.scrollLeft + (s.left - n.left) - K, { animation: e }) : s.right > n.right && E(r.scrollLeft + (s.right - n.right) + K, { animation: e });
+  }), ot = A((t) => {
+    const { tabsMeta: e, tabMeta: r } = rt();
     if (!(!r || !e)) {
       if (r.left < e.left) {
-        const s = e.scrollLeft + (r.left - e.left);
-        h(s - S, { animation: t });
+        const o = e.scrollLeft + (r.left - e.left);
+        E(o - K, { animation: t });
       } else if (r.right > e.right) {
-        const s = e.scrollLeft + (r.right - e.right);
-        h(s + S, { animation: t });
+        const o = e.scrollLeft + (r.right - e.right);
+        E(o + K, { animation: t });
       }
     }
   });
-  n.useEffect(() => {
-    q(!0);
-  }, []), n.useEffect(() => {
-    w();
-  }), n.useEffect(() => {
-    var o, c;
-    const t = H(() => {
-      l.current && (w(), u());
+  l.useEffect(() => {
+    Dt(!0);
+  }, []), l.useEffect(() => {
+    F(), I();
+  }), l.useEffect(() => {
+    var n, s;
+    const t = Yt(() => {
+      i.current && (F(), I());
     }, 166);
-    if (!l.current || !l.current.ownerDocument.defaultView) {
+    if (!i.current || !i.current.ownerDocument.defaultView) {
       console.error("tabsRef.current.ownerDocument.defaultView is undefined");
       return;
     }
-    const e = l.current.ownerDocument.defaultView;
+    const e = i.current.ownerDocument.defaultView;
     e.addEventListener("resize", t);
-    const r = l.current;
-    r.addEventListener("scroll", u, { passive: !0 });
-    let s;
-    return typeof ResizeObserver != "undefined" && (s = new ResizeObserver(t), s.observe(r), Array.from((c = (o = b.current) == null ? void 0 : o.children) != null ? c : []).forEach((d) => {
-      s.observe(d);
-    })), u(), () => {
-      t.cancel(), e.removeEventListener("resize", t), r.removeEventListener("scroll", u), s && s.disconnect();
+    const r = i.current;
+    r.addEventListener("scroll", I, { passive: !0 });
+    let o;
+    return typeof ResizeObserver != "undefined" && (o = new ResizeObserver(t), o.observe(r), Array.from((s = (n = u.current) == null ? void 0 : n.children) != null ? s : []).forEach((c) => {
+      o.observe(c);
+    })), I(), () => {
+      t.cancel(), e.removeEventListener("resize", t), r.removeEventListener("scroll", I), o && o.disconnect();
     };
-  }, [w, u]), n.useEffect(() => {
-    C(z !== a);
-  }, [C, a]);
-  const G = n.Children.toArray(I).filter((t) => n.isValidElement(t)).map(
-    (t, e) => n.cloneElement(t, {
-      isActive: v === e,
-      // The tab's own onClick runs first, then the tab list picks the tab.
-      onClick: (r) => {
-        var s, o;
-        (o = (s = t.props).onClick) == null || o.call(s, r), W(r, e);
-      }
-    })
-  ), N = m && A && (f.start || f.end);
-  return /* @__PURE__ */ y(
-    "div",
-    {
-      className: E(
-        "smwb-tabs",
-        {
-          "smwb-tabs--dense": O,
-          "smwb-tabs--overflow-start": f.start,
-          "smwb-tabs--overflow-end": f.end
+  }, [F, I]), l.useEffect(() => {
+    ot(bt !== b);
+  }, [ot, b]);
+  const m = l.Children.toArray(wt).filter(
+    (t) => l.isValidElement(t)
+  ), Kt = gt(Y), P = m.map((t, e) => {
+    var r;
+    return (r = t.props.id) != null ? r : `${N}-tab-${e}`;
+  }), kt = P.join(`
+`), st = (t) => `${N}-panel-${t}`, lt = d >= 0 && d < m.length ? d : 0, ct = m.findIndex((t) => !T(t)), Bt = T(m[lt]) && ct >= 0 ? ct : lt, at = v != null ? v : Bt, At = m.map(
+    (t, e) => {
+      var r;
+      return l.cloneElement(t, {
+        isActive: d === e,
+        tabStop: at === e,
+        // The caller's own id and aria-controls win over the linked ones.
+        id: P[e],
+        "aria-controls": (r = t.props["aria-controls"]) != null ? r : Kt ? st(e) : void 0,
+        // The tab's own onClose runs after the row notes which tab is closing.
+        onClose: (o, n) => {
+          it(e, o, n);
         },
-        B
-      ),
-      role: "tabpanel",
-      ref: k,
-      ...P,
-      children: [
-        N && /* @__PURE__ */ i(
-          "button",
-          {
-            type: "button",
-            className: "smwb-tabs__scroll-button smwb-tabs__scroll-button--start",
-            "aria-label": T,
-            disabled: !f.start,
-            onClick: () => R(-1),
-            children: /* @__PURE__ */ i(M, { name: "chevron_left", size: 20 })
-          }
-        ),
-        /* @__PURE__ */ y(
-          "div",
+        // Only a row that can be reordered makes its items draggable, and a disabled tab never. `Tab`
+        // puts it on the item: the wrapper when the tab has a close button or actions, the tab itself
+        // when it has neither, so the drag surface is the same element as in Solid.
+        draggable: w !== void 0 && !T(t) ? !0 : void 0,
+        // The tab's own onClick runs first, then the tab list picks the tab.
+        onClick: (o) => {
+          var n, s;
+          (s = (n = t.props).onClick) == null || s.call(n, o), !(t.props.href !== void 0 && ce(o)) && z(o, e);
+        }
+      });
+    }
+  ), p = () => {
+    var t, e;
+    return Array.from((e = (t = u.current) == null ? void 0 : t.querySelectorAll('[role="tab"]')) != null ? e : []);
+  }, k = (t) => {
+    var e;
+    return (e = t.closest(".smwb-tab-item")) != null ? e : t;
+  }, L = (t) => t ? p().findIndex((e) => k(e).contains(t)) : -1, B = (t) => !t || t.getAttribute("aria-disabled") === "true" || t.disabled === !0, zt = (t, e) => {
+    const r = p()[t], o = r == null ? void 0 : r.ownerDocument.activeElement, n = e === "actions" || !!(o && r && k(r).contains(o));
+    g.current = r && n ? { item: k(r), index: t } : null;
+  }, it = (t, e, r) => {
+    var o, n, s;
+    zt(t, r), (s = (o = m[t]) == null ? void 0 : (n = o.props).onClose) == null || s.call(n, e, r);
+  }, $ = (t) => t instanceof Element ? k(t) : null, ft = () => {
+    var t, e;
+    (t = V.current) == null || t.classList.remove("smwb-tab-item--dragging"), (e = D.current) == null || e.classList.remove("smwb-tab-item--drop-target"), V.current = null, D.current = null;
+  }, Wt = (t) => {
+    if (!w)
+      return;
+    const e = $(t.target);
+    if (!e)
+      return;
+    const r = L(e);
+    r < 0 || B(p()[r]) || (R.current = r, V.current = e, e.classList.add("smwb-tab-item--dragging"), t.dataTransfer && (t.dataTransfer.setData("text/plain", String(r)), t.dataTransfer.effectAllowed = "move"));
+  }, Vt = (t) => {
+    var r;
+    if (!w || R.current === null)
+      return;
+    const e = $(t.target);
+    e && (t.preventDefault(), e !== D.current && ((r = D.current) == null || r.classList.remove("smwb-tab-item--drop-target"), D.current = e, e.classList.add("smwb-tab-item--drop-target")));
+  }, Ft = (t) => {
+    const e = R.current;
+    if (R.current = null, e === null)
+      return;
+    const r = L($(t.target));
+    ft(), t.preventDefault(), r >= 0 && r !== e && (w == null || w(e, r), e === d && z(t, r));
+  }, Pt = () => {
+    R.current = null, ft();
+  }, $t = te({
+    count: m.length,
+    activeIndex: at,
+    orientation: X,
+    onMove: (t) => {
+      var e;
+      return (e = p()[t]) == null ? void 0 : e.focus();
+    },
+    isDisabled: (t) => B(p()[t])
+  }), ut = (t, e) => {
+    const r = p(), o = L(t);
+    if (!(o < 0 || r.length === 0))
+      for (let n = 1; n <= r.length; n += 1) {
+        const s = r[(o + e * n + r.length) % r.length];
+        if (s && !B(s)) {
+          s.focus(), s.click();
+          return;
+        }
+      }
+  }, jt = (t) => {
+    if ((t.ctrlKey || t.metaKey) && !t.altKey && !t.defaultPrevented) {
+      const e = L(t.target);
+      if (e < 0)
+        return;
+      if (J(t, ["Mod", "W"])) {
+        const r = m[e];
+        r != null && r.props.closable && !T(r) && (t.preventDefault(), it(e, t, "key"));
+        return;
+      }
+      if (J(t, ["Mod", "Shift", "["])) {
+        t.preventDefault(), ut(t.target, -1);
+        return;
+      }
+      if (J(t, ["Mod", "Shift", "]"])) {
+        t.preventDefault(), ut(t.target, 1);
+        return;
+      }
+    }
+    t.defaultPrevented || t.ctrlKey || t.metaKey || t.altKey || t.shiftKey || t.target.closest('[role="tab"]') && $t(t);
+  };
+  ee(() => {
+    var n, s, c, h;
+    const t = (n = u.current) == null ? void 0 : n.ownerDocument, e = g.current;
+    if (t && e && !e.item.isConnected && (g.current = null, !t.activeElement || t.activeElement === t.body)) {
+      const S = p(), Ut = Math.min(e.index, S.length - 1), j = [...S.keys()].filter((H) => !B(S[H])), q = (s = j.find((H) => H >= Ut)) != null ? s : j[j.length - 1];
+      if (q !== void 0) {
+        (c = S[q]) == null || c.focus(), O(q);
+        return;
+      }
+    }
+    if (v === null)
+      return;
+    const r = L((h = t == null ? void 0 : t.activeElement) != null ? h : null), o = r >= 0 ? r : null;
+    o !== v && O(o);
+  });
+  const qt = (t) => {
+    const e = L(t.target);
+    e >= 0 && O(e), g.current && !g.current.item.contains(t.target) && (g.current = null);
+  }, Ht = (t) => {
+    t.currentTarget.contains(t.relatedTarget) || (O(null), g.current = null);
+  }, Gt = l.useMemo(
+    () => ({ value: d, tabId: (t) => {
+      var e;
+      return (e = P[t]) != null ? e : `${N}-tab-${t}`;
+    }, panelId: st }),
+    // tabIds is rebuilt each render and panelId only reads baseId: tabIdsKey stands for them.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [d, N, kt]
+  ), dt = C && yt && (y.start || y.end), Jt = C && U && tt.length > 0, Qt = (t, e) => {
+    W(!1), z(t, e), Ot(e);
+  };
+  return /* @__PURE__ */ M(ne.Provider, { value: Gt, children: [
+    /* @__PURE__ */ M(
+      "div",
+      {
+        id: x,
+        className: mt(
+          "smwb-tabs",
           {
-            className: E("smwb-tabs__scroller", {
-              "smwb-tabs__scroller--scrollable": m
-            }),
-            ref: l,
-            children: [
-              /* @__PURE__ */ i("div", { className: "smwb-tabs__scroll-area", ref: b, role: "tablist", "aria-label": D, children: G }),
-              j && /* @__PURE__ */ i("span", { className: "smwb-tabs__indicator", style: a.root, children: /* @__PURE__ */ i("span", { className: "smwb-tabs__indicator-content", style: a.content }) })
-            ]
-          }
+            "smwb-tabs--dense": Lt,
+            "smwb-tabs--overflow-start": y.start,
+            "smwb-tabs--overflow-end": y.end
+          },
+          ht
         ),
-        N && /* @__PURE__ */ i(
-          "button",
-          {
-            type: "button",
-            className: "smwb-tabs__scroll-button smwb-tabs__scroll-button--end",
-            "aria-label": V,
-            disabled: !f.end,
-            onClick: () => R(1),
-            children: /* @__PURE__ */ i(M, { name: "chevron_right", size: 20 })
-          }
-        )
-      ]
-    }
-  );
+        ref: pt,
+        ...vt,
+        children: [
+          dt && /* @__PURE__ */ f(
+            "button",
+            {
+              type: "button",
+              className: "smwb-tabs__scroll-button smwb-tabs__scroll-button--start",
+              "aria-label": St,
+              disabled: !y.start,
+              tabIndex: -1,
+              onClick: () => nt(-1),
+              children: /* @__PURE__ */ f(G, { name: "chevron_left", size: 20 })
+            }
+          ),
+          /* @__PURE__ */ M(
+            "div",
+            {
+              className: mt("smwb-tabs__scroller", {
+                "smwb-tabs__scroller--scrollable": C
+              }),
+              ref: i,
+              children: [
+                /* @__PURE__ */ f(
+                  "div",
+                  {
+                    className: "smwb-tabs__scroll-area",
+                    ref: u,
+                    role: "tablist",
+                    "aria-label": Ct,
+                    "aria-orientation": X,
+                    onKeyDown: jt,
+                    onFocus: qt,
+                    onBlur: Ht,
+                    onDragStart: Wt,
+                    onDragOver: Vt,
+                    onDrop: Ft,
+                    onDragEnd: Pt,
+                    children: At
+                  }
+                ),
+                Rt && /* @__PURE__ */ f("span", { className: "smwb-tabs__indicator", style: b.root, children: /* @__PURE__ */ f("span", { className: "smwb-tabs__indicator-content", style: b.content }) })
+              ]
+            }
+          ),
+          dt && /* @__PURE__ */ f(
+            "button",
+            {
+              type: "button",
+              className: "smwb-tabs__scroll-button smwb-tabs__scroll-button--end",
+              "aria-label": _t,
+              disabled: !y.end,
+              tabIndex: -1,
+              onClick: () => nt(1),
+              children: /* @__PURE__ */ f(G, { name: "chevron_right", size: 20 })
+            }
+          ),
+          Jt && /* @__PURE__ */ M(Xt, { children: [
+            /* @__PURE__ */ f(
+              "button",
+              {
+                type: "button",
+                className: "smwb-tabs__overflow-trigger",
+                "aria-haspopup": "menu",
+                "aria-expanded": et,
+                "aria-label": It,
+                tabIndex: -1,
+                ref: xt,
+                onClick: () => W((t) => !t),
+                children: /* @__PURE__ */ f(G, { name: "more_horiz", size: 20 })
+              }
+            ),
+            /* @__PURE__ */ f(
+              oe,
+              {
+                anchorElement: Tt,
+                isOpen: et,
+                onClose: () => W(!1),
+                placement: "bottom-end",
+                children: tt.map((t) => {
+                  const e = m[t];
+                  return /* @__PURE__ */ M(
+                    se,
+                    {
+                      disabled: T(e),
+                      "aria-current": t === d ? "true" : void 0,
+                      onClick: (r) => Qt(r, t),
+                      children: [
+                        (e == null ? void 0 : e.props.icon) && /* @__PURE__ */ f("span", { className: "smwb-tab__icon", "aria-hidden": "true", children: e.props.icon }),
+                        (e == null ? void 0 : e.props.label) && /* @__PURE__ */ f("span", { className: "smwb-tab__text-label", children: e.props.label })
+                      ]
+                    },
+                    t
+                  );
+                })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    Y
+  ] });
 });
 export {
-  ot as Tabs
+  Ce as Tabs
 };
 //# sourceMappingURL=tabs.js.map