@gearbox-protocol/ui-kit 4.2.1 → 4.4.0

package/dist/esm/components/base/tabber/tabber.js

@@ -1,136 +1,126 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { createContext as O, useContext as E, useMemo as f, Children as B, useRef as g, useEffect as q, isValidElement as z } from "react";
-import { SectionHeading as D } from "../section-heading/section-heading.js";
-import { Stack as u } from "../stack/stack.js";
-import { useTitleText as N } from "../text/use-title-text.js";
-import { TabControl as F } from "../../tab-control/tab-control.js";
-import { TabItem as M } from "../../tab-control/tab-item.js";
-import { TabberTest as S } from "./constants.js";
-import { useDetailScrollSpy as P } from "./use-detail-scroll-spy.js";
-const R = O({});
-function j({
-  id: r,
-  title: o,
-  heading: s = o,
-  actions: c,
-  children: m,
-  hideHeading: a = !1
+import { jsx as o, jsxs as u } from "react/jsx-runtime";
+import { createContext as y, useContext as R, useMemo as b, Children as j, useRef as h, useEffect as I, isValidElement as H } from "react";
+import { SectionHeading as O } from "../section-heading/section-heading.js";
+import { Stack as x } from "../stack/stack.js";
+import { useTitleText as w } from "../text/use-title-text.js";
+import { TabControl as A } from "../../tab-control/tab-control.js";
+import { TabItem as B } from "../../tab-control/tab-item.js";
+import { TabberTest as T } from "./constants.js";
+import { useDetailScrollSpy as E } from "./use-detail-scroll-spy.js";
+const v = y({});
+function k({
+  id: e,
+  title: r,
+  heading: c = r,
+  actions: a,
+  children: l,
+  hideHeading: s = !1
 }) {
-  const l = E(R), i = N(), n = !a;
-  return /* @__PURE__ */ e(
+  const n = R(v), d = w(), i = !s;
+  return /* @__PURE__ */ o(
     "section",
     {
-      ref: l[r],
+      ref: n[e],
       className: "scroll-mt-28",
-      "data-scroll-section": r,
-      "data-testid": S.section,
-      children: /* @__PURE__ */ p(u, { gap: "md", children: [
-        n || c ? /* @__PURE__ */ p("div", { className: "flex items-center justify-between gap-3", children: [
-          n ? /* @__PURE__ */ e(D, { children: i(s) }) : /* @__PURE__ */ e("span", {}),
-          c
+      "data-scroll-section": e,
+      "data-testid": T.section,
+      children: /* @__PURE__ */ u(x, { gap: "md", children: [
+        i || a ? /* @__PURE__ */ u("div", { className: "flex items-center justify-between gap-3", children: [
+          i ? /* @__PURE__ */ o(O, { children: d(c) }) : /* @__PURE__ */ o("span", {}),
+          a
         ] }) : null,
-        m
+        l
       ] })
     }
   );
 }
-j.displayName = "TabberSection";
-function T(r) {
-  return z(r) && r.type === j;
+k.displayName = "TabberSection";
+function q(e) {
+  return H(e) && e.type === k;
 }
-function V({
-  item: r,
-  ...o
+function z({
+  item: e,
+  ...r
 }) {
-  return /* @__PURE__ */ p("div", { className: "flex items-stretch overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:h-0 [scrollbar-width:none]", children: [
-    /* @__PURE__ */ e("div", { className: "min-w-0 basis-0 grow pb-px", children: /* @__PURE__ */ e(F, { ...o, showBorder: !0 }) }),
-    r && /* @__PURE__ */ e("div", { className: "w-auto shrink-0 grow-0 basis-auto", children: r })
+  return /* @__PURE__ */ u("div", { className: "flex items-stretch overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:h-0 [scrollbar-width:none]", children: [
+    /* @__PURE__ */ o("div", { className: "min-w-0 basis-0 grow pb-px", children: /* @__PURE__ */ o(A, { ...r, showBorder: !0 }) }),
+    e && /* @__PURE__ */ o("div", { className: "w-auto shrink-0 grow-0 basis-auto", children: e })
   ] });
 }
-function $({
-  children: r,
-  observeKey: o,
-  initialSection: s,
-  testId: c,
-  mobileManagePane: m
+function U({
+  children: e,
+  observeKey: r,
+  initialSection: c,
+  testId: a
 }) {
-  const a = f(
-    () => B.toArray(r).filter(T),
-    [r]
-  ), l = f(
-    () => a.filter((t) => t.props.beforeBar !== !0),
-    [a]
-  ), i = l.map((t) => t.props.id).join("|"), n = f(
-    () => i === "" ? [] : i.split("|"),
-    [i]
-  ), w = g({}), d = f(() => {
+  const l = b(
+    () => j.toArray(e).filter(q),
+    [e]
+  ), s = l.map((t) => t.props.id).join("|"), n = b(
+    () => s === "" ? [] : s.split("|"),
+    [s]
+  ), d = h({}), i = b(() => {
     const t = {
-      ...w.current
+      ...d.current
     };
-    for (const y of n)
-      t[y] === void 0 && (t[y] = { current: null });
-    return w.current = t, t;
-  }, [n]), A = N(), { activeSection: b, scrollToSection: h } = P(
-    d,
+    for (const S of n)
+      t[S] === void 0 && (t[S] = { current: null });
+    return d.current = t, t;
+  }, [n]), C = w(), { activeSection: m, scrollToSection: f } = E(
+    i,
     n,
-    o
-  ), x = g(!1), v = g(o);
-  q(() => {
-    if (o !== v.current && (v.current = o, x.current = !1), x.current || !o) return;
-    const t = s ?? n[0];
-    x.current = !0, !(t === void 0 || t === n[0]) && d[t] !== void 0 && requestAnimationFrame(() => {
-      h(t);
+    r
+  ), p = h(!1), g = h(r);
+  I(() => {
+    if (r !== g.current && (g.current = r, p.current = !1), p.current || !r) return;
+    const t = c ?? n[0];
+    p.current = !0, !(t === void 0 || t === n[0]) && i[t] !== void 0 && requestAnimationFrame(() => {
+      f(t);
     });
-  }, [o, s, h, n, d]);
-  const I = l.map((t) => ({
+  }, [r, c, f, n, i]);
+  const N = l.map((t) => ({
     id: t.props.id,
-    item: /* @__PURE__ */ e(
-      M,
+    item: /* @__PURE__ */ o(
+      B,
       {
-        selected: b === t.props.id,
-        label: A(t.props.title)
+        selected: m === t.props.id,
+        label: C(t.props.title)
       }
     )
-  })), C = B.toArray(r), k = C.filter(
-    (t) => T(t) && t.props.beforeBar === !0
-  ), H = C.filter(
-    (t) => !(T(t) && t.props.beforeBar === !0)
-  );
-  return /* @__PURE__ */ e(u, { gap: "lg", "data-testid": c ?? S.root, children: /* @__PURE__ */ p(R.Provider, { value: d, children: [
-    k.length > 0 ? /* @__PURE__ */ e(u, { gap: "xl", children: k }) : null,
-    m,
-    /* @__PURE__ */ e(W, { testId: S.bar, children: /* @__PURE__ */ e(
-      V,
+  }));
+  return /* @__PURE__ */ o(x, { gap: "lg", "data-testid": a ?? T.root, children: /* @__PURE__ */ u(v.Provider, { value: i, children: [
+    /* @__PURE__ */ o(D, { testId: T.bar, children: /* @__PURE__ */ o(
+      z,
       {
         state: {
-          id: b,
-          index: n.indexOf(b),
+          id: m,
+          index: n.indexOf(m),
           handleTabChange: (t) => {
-            h(t);
+            f(t);
           }
         },
-        tabs: I,
+        tabs: N,
         item: null
       }
     ) }),
-    /* @__PURE__ */ e(u, { gap: "xl", children: H })
+    /* @__PURE__ */ o(x, { gap: "xl", children: e })
   ] }) });
 }
-function W({
-  children: r,
-  testId: o
+function D({
+  children: e,
+  testId: r
 }) {
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ o(
     "div",
     {
       className: "sticky top-0 z-20 -mx-1 px-1 pt-3 sm:pt-4 bg-background/75 backdrop-blur-md backdrop-saturate-150",
-      "data-testid": o,
-      children: r
+      "data-testid": r,
+      children: e
     }
   );
 }
 export {
-  $ as Tabber,
-  j as TabberSection,
-  S as TabberTest
+  U as Tabber,
+  k as TabberSection,
+  T as TabberTest
 };