@gearbox-protocol/ui-kit 3.8.1 → 3.9.0

package/dist/esm/components/composites/pool-table/pool-table.js

@@ -1,76 +1,78 @@
-import { jsx as l, Fragment as G, jsxs as C } from "react/jsx-runtime";
-import * as b from "react";
-import { HeadCell as D } from "../../head-cell/head-cell.js";
-import { HelpTip as $ } from "../../help-tip/help-tip.js";
-import { GridLoadingLine as A } from "../../table/grid-loading-line.js";
-import { GridTable as E, GridTableHeader as F, GridTableBody as X, GridTableRow as k, GridTableHead as q, GridTableCell as P } from "../../table/grid-table.js";
-import { TableLoaderGuard as J } from "../../table/table-loader-guard.js";
-import { TableLineSm as K, TableCellSm as Q } from "../../table/table-sm.js";
+import { jsx as t, Fragment as I, jsxs as N } from "react/jsx-runtime";
+import * as C from "react";
+import { HeadCell as q } from "../../head-cell/head-cell.js";
+import { HelpTip as R } from "../../help-tip/help-tip.js";
+import { GridLoadingLine as J } from "../../table/grid-loading-line.js";
+import { GridTable as K, GridTableHeader as Q, GridTableBody as U, GridTableRow as O, GridTableHead as V, GridTableCell as j } from "../../table/grid-table.js";
+import { TableLoaderGuard as W } from "../../table/table-loader-guard.js";
+import { TableLineSm as Y, TableCellSm as Z } from "../../table/table-sm.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "@gearbox-protocol/sdk";
-import { useIsMobile as U, useIsMedium as V } from "../../../hooks/use-media-query.js";
-import { cn as T } from "../../../utils/cn.js";
-function j({
+import { useIsMobile as _, useIsMedium as w } from "../../../hooks/use-media-query.js";
+import { poolTableTestIds as k } from "../../../test-ids/pool-table.js";
+import { cn as L } from "../../../utils/cn.js";
+function H({
   last: e,
-  className: n,
+  className: l,
   ...d
 }) {
-  return /* @__PURE__ */ l(
-    k,
+  return /* @__PURE__ */ t(
+    O,
     {
-      className: T(e && "*:after:hidden", n),
+      className: L(e && "*:after:hidden", l),
       ...d
     }
   );
 }
-function W({
+function ee({
   columns: e,
-  sort: n,
+  sort: l,
   isMedium: d
 }) {
-  return /* @__PURE__ */ l(k, { noHover: !0, height: "35px", children: e.map((i) => {
+  return /* @__PURE__ */ t(O, { noHover: !0, height: "35px", children: e.map((i) => {
     if (i.hideOnMedium && d) return null;
-    const s = i.sort, a = s && n ? {
-      direction: n.state?.field === s.field ? n.state.sort : null,
-      onSort: () => n.set(s.field, s.defaultDirection ?? "desc")
+    const s = i.sort, a = s && l ? {
+      direction: l.state?.field === s.field ? l.state.sort : null,
+      onSort: () => l.set(s.field, s.defaultDirection ?? "desc")
     } : void 0, p = typeof i.header == "function" ? i.header(a) : i.header;
-    return /* @__PURE__ */ l(
-      q,
+    return /* @__PURE__ */ t(
+      V,
       {
         justify: i.align === "right" ? "end" : i.align === "center" ? "center" : "start",
         size: "sm",
         gapBefore: i.gapBefore,
-        className: T(i.className, i.headerClassName),
-        children: a ? /* @__PURE__ */ C(G, { children: [
-          /* @__PURE__ */ l(
-            D,
+        className: L(i.className, i.headerClassName),
+        children: a ? /* @__PURE__ */ N(I, { children: [
+          /* @__PURE__ */ t(
+            q,
             {
               title: p,
               sortDirection: a.direction ?? void 0,
               onSort: a.onSort
             }
           ),
-          i.headerTip && /* @__PURE__ */ l($, { className: "ml-1.5", children: i.headerTip })
-        ] }) : /* @__PURE__ */ C(G, { children: [
+          i.headerTip && /* @__PURE__ */ t(R, { className: "ml-1.5", children: i.headerTip })
+        ] }) : /* @__PURE__ */ N(I, { children: [
           p,
-          i.headerTip && /* @__PURE__ */ l($, { className: "ml-1.5", children: i.headerTip })
+          i.headerTip && /* @__PURE__ */ t(R, { className: "ml-1.5", children: i.headerTip })
         ] })
       },
       i.id
     );
   }) });
 }
-function Y({
+function ie({
   row: e,
-  columns: n,
+  columns: l,
   last: d,
   rowHeight: i,
   isSmall: s,
   isMedium: a,
   mobileColumnsXs: p,
-  mobileColumnsMd: h
+  mobileColumnsMd: c,
+  rowTestId: u
 }) {
-  const f = b.useMemo(
+  const f = C.useMemo(
     () => ({
       pool: e.pool,
       tokensList: e.tokensList,
@@ -82,99 +84,113 @@ function Y({
       isMobile: s
     }),
     [e, s]
-  ), N = a ? n.filter((r) => !r.hideOnMedium) : n;
+  ), M = a ? l.filter((n) => !n.hideOnMedium) : l;
   if (s) {
-    const r = n.filter((t) => !t.hideOnMobile), [c, ...M] = r, u = (t) => t.mobileCell ? t.mobileCell(f) : t.cell(f);
-    return /* @__PURE__ */ l(j, { last: d, href: e.href, children: /* @__PURE__ */ l(P, { span: "full", size: "sm", className: "px-3 py-0!", children: /* @__PURE__ */ l(
-      K,
+    const n = l.filter((r) => !r.hideOnMobile), [g, ...x] = n, T = (r) => r.mobileCell ? r.mobileCell(f) : r.cell(f);
+    return /* @__PURE__ */ t(H, { last: d, href: e.href, "data-testid": u, children: /* @__PURE__ */ t(j, { span: "full", size: "sm", className: "px-3 py-0!", children: /* @__PURE__ */ t(
+      Y,
       {
-        title: c ? u(c) : void 0,
+        title: g ? T(g) : void 0,
         columnsXs: p,
-        columnsMd: h,
+        columnsMd: c,
         className: "w-full",
-        children: M.map((t) => /* @__PURE__ */ l(Q, { title: t.mobileTitle, children: u(t) }, t.id))
+        children: x.map((r) => /* @__PURE__ */ t(Z, { title: r.mobileTitle, children: T(r) }, r.id))
       }
     ) }) });
   }
-  return /* @__PURE__ */ l(j, { last: d, href: e.href, height: `${i}px`, children: N.map((r) => /* @__PURE__ */ l(
-    P,
+  return /* @__PURE__ */ t(
+    H,
     {
-      textAlign: r.align ?? "left",
-      size: "sm",
-      gapBefore: r.gapBefore,
-      className: r.className,
-      children: r.cell(f)
-    },
-    r.id
-  )) });
+      last: d,
+      href: e.href,
+      height: `${i}px`,
+      "data-testid": u,
+      children: M.map((n) => /* @__PURE__ */ t(
+        j,
+        {
+          textAlign: n.align ?? "left",
+          size: "sm",
+          gapBefore: n.gapBefore,
+          className: n.className,
+          children: n.cell(f)
+        },
+        n.id
+      ))
+    }
+  );
 }
-function oe({
+function fe({
   columns: e,
-  rows: n,
+  rows: l,
   loading: d = !1,
   partialLoading: i = !1,
   error: s,
   emptyContent: a,
   skeletonRows: p = 5,
-  rowHeight: h = 75,
-  size: f = "lg",
-  mobileColumnsXs: N = 3,
-  mobileColumnsMd: r = 3,
-  className: c,
-  wrapperClassName: M,
-  sort: u
+  rowHeight: c = 75,
+  size: u = "lg",
+  mobileColumnsXs: f = 3,
+  mobileColumnsMd: M = 3,
+  className: n,
+  wrapperClassName: g,
+  sort: x,
+  rowTestId: T,
+  loaderTestId: r
 }) {
-  const t = U(), g = V(), m = b.useMemo(
-    () => g ? e.filter((o) => !o.hideOnMedium) : e,
-    [e, g]
-  ), I = b.useMemo(() => t ? "1fr" : m.map((o) => o.width ?? "1fr").join(" "), [t, m]), v = b.useMemo(() => {
-    const o = m.map((H, O) => {
-      const L = H.gapBefore;
-      if (!L || L === "none") return null;
-      const z = L === "md" ? "pl-10" : "pl-5";
-      return `[&:nth-child(${O + 1})]:${z}`;
-    }).filter(Boolean).join(" "), y = m[m.length - 1]?.className?.includes("pr-4") ? "last:pr-4" : "";
-    return T("px-1 py-2 first:pl-4", y, o);
-  }, [m]), x = d || !n, R = !x && n && n.length === 0, B = i && !x;
-  return s ? null : R && a ? /* @__PURE__ */ l(G, { children: a }) : /* @__PURE__ */ C(
-    E,
+  const z = T ?? k.poolLine, B = r ?? k.poolLineLoading, h = _(), b = w(), m = C.useMemo(
+    () => b ? e.filter((o) => !o.hideOnMedium) : e,
+    [e, b]
+  ), D = C.useMemo(() => h ? "1fr" : m.map((o) => o.width ?? "1fr").join(" "), [h, m]), S = C.useMemo(() => {
+    const o = m.map((E, F) => {
+      const G = E.gapBefore;
+      if (!G || G === "none") return null;
+      const X = G === "md" ? "pl-10" : "pl-5";
+      return `[&:nth-child(${F + 1})]:${X}`;
+    }).filter(Boolean).join(" "), v = m[m.length - 1]?.className?.includes("pr-4") ? "last:pr-4" : "";
+    return L("px-1 py-2 first:pl-4", v, o);
+  }, [m]), y = d || !l, A = !y && l && l.length === 0, $ = i && !y;
+  return s ? null : A && a ? /* @__PURE__ */ t(I, { children: a }) : /* @__PURE__ */ N(
+    K,
     {
-      cols: I,
+      cols: D,
       gap: 0,
-      size: f,
-      wrapperClassName: T("overflow-visible", M),
-      className: c,
+      size: u,
+      wrapperClassName: L("overflow-visible", g),
+      className: n,
       children: [
-        !t && /* @__PURE__ */ l(F, { children: /* @__PURE__ */ l(W, { columns: e, sort: u, isMedium: g }) }),
-        /* @__PURE__ */ l(
-          J,
+        !h && /* @__PURE__ */ t(Q, { children: /* @__PURE__ */ t(ee, { columns: e, sort: x, isMedium: b }) }),
+        /* @__PURE__ */ t(
+          W,
           {
-            showGuard: x,
+            showGuard: y,
             rows: p,
-            columns: t ? 1 : m.length,
-            height: `${h}px`,
-            cellClassName: t ? "px-1 py-2 first:pl-4 last:pr-4" : v,
-            children: /* @__PURE__ */ C(X, { children: [
-              n?.map((o, S, y) => /* @__PURE__ */ l(
-                Y,
+            columns: h ? 1 : m.length,
+            height: `${c}px`,
+            "data-testid": B,
+            cellClassName: h ? "px-1 py-2 first:pl-4 last:pr-4" : S,
+            children: /* @__PURE__ */ N(U, { children: [
+              l?.map((o, P, v) => /* @__PURE__ */ t(
+                ie,
                 {
                   row: o,
                   columns: e,
-                  last: S === y.length - 1 && !B,
-                  rowHeight: h,
-                  isSmall: t,
-                  isMedium: g,
-                  mobileColumnsXs: N,
-                  mobileColumnsMd: r
+                  last: P === v.length - 1 && !$,
+                  rowHeight: c,
+                  isSmall: h,
+                  isMedium: b,
+                  mobileColumnsXs: f,
+                  mobileColumnsMd: M,
+                  rowTestId: z
                 },
                 `${o.chainId}-${o.pool.address}`
               )),
-              B && /* @__PURE__ */ l(
-                A,
+              $ && /* @__PURE__ */ t(
+                J,
                 {
-                  height: `${h}px`,
+                  height: `${c}px`,
                   columns: m.length,
-                  cellClassName: v,
+                  cellClassName: S,
+                  "data-testid": B,
                   last: !0
                 }
               )
@@ -186,5 +202,5 @@ function oe({
   );
 }
 export {
-  oe as PoolTable
+  fe as PoolTable
 };