@gearbox-protocol/permissionless-ui 1.22.0-next.98 → 1.22.0

package/dist/esm/components/tab-control/tab-control.js

@@ -1,57 +1,58 @@
-import { jsx as f, jsxs as T, Fragment as S } from "react/jsx-runtime";
-import { useRef as h, useState as g, useCallback as m, useMemo as v, useEffect as w } from "react";
-import { useLocation as U, useNavigate as C } from "react-router-dom";
+import { jsx as f, jsxs as N, Fragment as S } from "react/jsx-runtime";
+import { useRef as b, useState as g, useCallback as p, useMemo as v, useEffect as w } from "react";
+import { useNavigationAdapter as T } from "../navigation-context/navigation-context.js";
 import "@gearbox-protocol/sdk";
-import { cn as b } from "../../utils/cn.js";
+import { cn as m } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-function $(r) {
-  if (!r) return null;
-  const { width: t = 0, height: o = 0 } = r?.getBoundingClientRect() || {}, s = r?.offsetTop || 0, i = r?.offsetLeft || 0;
-  return { width: t, height: o, left: i, top: s };
+import "../../utils/z-index.js";
+function U(t) {
+  if (!t) return null;
+  const { width: n = 0, height: i = 0 } = t?.getBoundingClientRect() || {}, s = t?.offsetTop || 0, o = t?.offsetLeft || 0;
+  return { width: n, height: i, left: o, top: s };
 }
-function k(r, t, o) {
-  const s = h(null), [i, c] = g(null), a = h(null), l = m((e) => {
-    c(e), a.current = e;
+function $(t, n, i) {
+  const s = b(null), [o, u] = g(null), d = b(null), l = p((r) => {
+    u(r), d.current = r;
   }, []);
   return w(() => {
-    const e = o.current[r], n = () => {
-      const u = $(e), p = u?.height !== a.current?.height, x = u?.width !== a.current?.width, y = u?.left !== a.current?.left, N = u?.top !== a.current?.top;
-      (p || x || y || N) && l(u);
+    const r = i.current[t], e = () => {
+      const c = U(r), h = c?.height !== d.current?.height, x = c?.width !== d.current?.width, C = c?.left !== d.current?.left, y = c?.top !== d.current?.top;
+      (h || x || C || y) && l(c);
     };
-    s.current = n, n();
-    const d = e ? new ResizeObserver(n) : null;
-    return e && d?.observe(e), () => {
-      e && d?.unobserve(e);
+    s.current = e, e();
+    const a = r ? new ResizeObserver(e) : null;
+    return r && a?.observe(r), () => {
+      r && a?.unobserve(r);
     };
-  }, [r, o, l]), w(() => {
-    const e = t ? new ResizeObserver(() => {
+  }, [t, i, l]), w(() => {
+    const r = n ? new ResizeObserver(() => {
       s.current?.();
     }) : null;
-    return t && e?.observe(t), () => {
-      t && e?.unobserve(t);
+    return n && r?.observe(n), () => {
+      n && r?.unobserve(n);
     };
-  }, [t]), i;
+  }, [n]), o;
 }
-function B({
-  tabs: r,
-  state: t,
-  variant: o = "auto",
+function A({
+  tabs: t,
+  state: n,
+  variant: i = "auto",
   showBorder: s = !0,
-  tabItemWrapPadding: i
+  tabItemWrapPadding: o
 }) {
-  const c = h(null), a = h({}), l = k(
-    t.id,
-    c.current,
-    a
-  ), e = (n, d) => () => t.handleTabChange(n, d);
-  return /* @__PURE__ */ f("div", { className: "relative w-full flex flex-col flex-wrap", children: /* @__PURE__ */ T(
+  const u = b(null), d = b({}), l = $(
+    n.id,
+    u.current,
+    d
+  ), r = (e, a) => () => n.handleTabChange(e, a);
+  return /* @__PURE__ */ f("div", { className: "relative w-full flex flex-col flex-wrap", children: /* @__PURE__ */ N(
     "div",
     {
-      ref: c,
-      className: b(
+      ref: u,
+      className: m(
         "relative bottom-[-1px] w-full max-w-full grow-0 shrink-0 basis-full flex items-stretch overflow-x-auto overflow-y-hidden",
-        "navbar-scrollbar",
+        "scrollbar-hidden",
         s && "border-b border-border"
       ),
       children: [
@@ -65,116 +66,116 @@ function B({
             }
           }
         ),
-        r.map((n, d, u) => {
-          const p = d === u.length - 1;
+        t.map((e, a, c) => {
+          const h = a === c.length - 1;
           return /* @__PURE__ */ f(
             "button",
             {
               ref: (x) => {
-                a.current[n.id] = x;
+                d.current[e.id] = x;
               },
               type: "button",
-              onClick: n.disabled ? void 0 : e(n.id, d),
-              disabled: n.disabled,
-              className: b(
+              onClick: e.disabled ? void 0 : r(e.id, a),
+              disabled: e.disabled,
+              className: m(
                 "flex items-center bg-transparent border-none shrink-0 text-foreground",
-                i ? "" : "p-0 pb-3.5",
-                o === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !p && "mr-10 max-[500px]:mr-8",
-                n.disabled && "cursor-not-allowed",
-                !n.disabled && "cursor-pointer",
-                !n.disabled && "hover:text-foreground hover:[&>*]:text-foreground"
+                o ? "" : "p-0 pb-3.5",
+                i === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !h && "mr-10 max-[500px]:mr-8",
+                e.disabled && "cursor-not-allowed",
+                !e.disabled && "cursor-pointer",
+                !e.disabled && "hover:text-foreground hover:[&>*]:text-foreground"
               ),
-              style: i ? { padding: i } : void 0,
-              children: n.item
+              style: o ? { padding: o } : void 0,
+              children: e.item
             },
-            `tab-item-${n.id}`
+            `tab-item-${e.id}`
           );
         })
       ]
     }
   ) });
 }
-function F({
-  icon: r,
-  label: t,
-  selected: o,
+function B({
+  icon: t,
+  label: n,
+  selected: i,
   textSize: s = "default",
-  amount: i
+  amount: o
 }) {
-  return /* @__PURE__ */ T(S, { children: [
-    r && /* @__PURE__ */ f(
+  return /* @__PURE__ */ N(S, { children: [
+    t && /* @__PURE__ */ f(
       "div",
       {
-        className: b(
+        className: m(
           "mr-3",
-          o ? "text-foreground" : "text-secondary-foreground"
+          i ? "text-foreground" : "text-secondary-foreground"
         ),
-        children: r
+        children: t
       }
     ),
     /* @__PURE__ */ f(
       "div",
       {
-        className: b(
+        className: m(
           "m-0 p-0 whitespace-nowrap",
           s === "default" && "text-sm leading-[17px] font-normal",
           s === "unset" && "text-[unset] leading-[unset] font-[unset]",
-          o ? "text-foreground" : "text-secondary-foreground"
+          i ? "text-foreground" : "text-secondary-foreground"
         ),
-        children: t
+        children: n
       }
     ),
-    !!i && /* @__PURE__ */ f("div", { className: "ml-1.5", children: /* @__PURE__ */ f("div", { className: "py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]", children: i }) })
+    !!o && /* @__PURE__ */ f("div", { className: "ml-1.5", children: /* @__PURE__ */ f("div", { className: "py-0.5 px-[9px] text-[11px] leading-[150%] font-normal bg-gray-50 rounded-[19px]", children: o }) })
   ] });
 }
-function I(r, t = 0) {
-  const [o, s] = g(r), [i, c] = g(t), a = m((l, e) => {
-    s(l), c(e);
+function F(t, n = 0) {
+  const [i, s] = g(t), [o, u] = g(n), d = p((l, r) => {
+    s(l), u(r);
   }, []);
-  return { id: o, index: i, handleTabChange: a };
+  return { id: i, index: o, handleTabChange: d };
 }
-function M(r) {
-  const { hash: t } = U(), o = C(), s = v(
-    () => r.reduce(
-      (e, n, d) => (e[n.id] = { id: n.id, index: d }, e),
+function I(t) {
+  const { useLocation: n, useNavigate: i } = T(), { hash: s } = n(), o = i(), u = v(
+    () => t.reduce(
+      (a, c, h) => (a[c.id] = { id: c.id, index: h }, a),
       {}
     ),
-    [r]
-  ), i = v(() => t.slice(1).toLowerCase(), [t]), { id: c, index: a } = s[i] || {}, l = m(
-    (e) => {
-      o(`#${e}`);
+    [t]
+  ), d = v(() => s.slice(1).toLowerCase(), [s]), { id: l, index: r } = u[d] || {}, e = p(
+    (a) => {
+      o(`#${a}`);
     },
     [o]
   );
   return {
-    id: c,
-    index: a,
-    handleTabChange: l
+    id: l,
+    index: r,
+    handleTabChange: e
   };
 }
-function A({
-  defaultTabs: r,
-  pathRoot: t,
-  selectedSection: o
+function M({
+  defaultTabs: t,
+  pathRoot: n,
+  selectedSection: i
 }) {
-  const s = C(), i = v(
-    () => r.reduce(
-      (e, n, d) => (e[n.id] = { id: n.id, index: d }, e),
+  const { useNavigate: s } = T(), o = s(), u = v(
+    () => t.reduce(
+      (e, a, c) => (e[a.id] = { id: a.id, index: c }, e),
       {}
     ),
-    [r]
-  ), c = m(
+    [t]
+  ), d = p(
     (e) => {
-      s(`${t}/${e}`);
+      o(`${n}/${e}`);
     },
-    [s, t]
-  ), { id: a, index: l } = i[o] || {};
-  return { id: a, index: l, handleTabChange: c };
+    [o, n]
+  ), { id: l, index: r } = u[i] || {};
+  return { id: l, index: r, handleTabChange: d };
 }
 export {
-  B as TabControl,
-  F as TabItem,
-  M as useHashTabs,
-  A as useSectionTab,
-  I as useTabControl
+  A as TabControl,
+  B as TabItem,
+  I as useHashTabs,
+  M as useSectionTab,
+  F as useTabControl
 };

package/dist/esm/components/table/edit-button.js

@@ -11,8 +11,9 @@ import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 import "../buttons/tab-button/tab-button.js";
-function W({
+function k({
   onClick: m,
   customButton: p,
   children: e,
@@ -42,5 +43,5 @@ function W({
   ) });
 }
 export {
-  W as EditButton
+  k as EditButton
 };

package/dist/esm/components/table/editable-grid-table.js

@@ -14,13 +14,14 @@ import "clsx";
 import "tailwind-merge";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 import { TabButton as u } from "../buttons/tab-button/tab-button.js";
 import { SignInRequired as b } from "../auth/signin-required.js";
 import "viem/siwe";
 import { TokenIcon as v } from "../token-icon/token-icon.js";
 import { GridTableCell as h, GridTable as N } from "./grid-table.js";
 import { UpdatedValue as C } from "./updated-value.js";
-function J({
+function K({
   assetAddress: o,
   symbol: i,
   iconSymbol: s,
@@ -50,7 +51,7 @@ function J({
     ] })
   ] }) });
 }
-function K({
+function M({
   oldValue: o,
   newValue: i,
   onEdit: s,
@@ -82,7 +83,7 @@ function K({
     }
   ) }) });
 }
-function M({
+function O({
   title: o,
   onNew: i,
   newButtonText: s = "New",
@@ -114,7 +115,7 @@ function M({
   ] });
 }
 export {
-  J as GridTableCellAsset,
-  K as GridTableCellUpdatable,
-  M as GridTableEditable
+  K as GridTableCellAsset,
+  M as GridTableCellUpdatable,
+  O as GridTableEditable
 };

package/dist/esm/components/table/editable-table.js

@@ -13,13 +13,14 @@ import "clsx";
 import "tailwind-merge";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 import { TabButton as f } from "../buttons/tab-button/tab-button.js";
 import { SignInRequired as x } from "../auth/signin-required.js";
 import "viem/siwe";
 import { TokenIcon as b } from "../token-icon/token-icon.js";
 import { TableCell as u, Table as g } from "./table.js";
 import { UpdatedValue as v } from "./updated-value.js";
-function G({
+function H({
   assetAddress: n,
   symbol: t,
   iconSymbol: s,
@@ -39,15 +40,15 @@ function G({
     ] })
   ] }) });
 }
-function H({
+function J({
   oldValue: n,
   newValue: t,
   onEdit: s,
   isEditable: l = !0,
   className: i,
   align: d = "right",
-  customButton: o,
-  postfix: a,
+  customButton: a,
+  postfix: o,
   disabled: c,
   nowrap: r
 }) {
@@ -63,45 +64,45 @@ function H({
       newValue: t,
       onEdit: s,
       isEditable: l,
-      customButton: o,
-      postfix: a,
+      customButton: a,
+      postfix: o,
       disabled: c,
       nowrap: r
     }
   ) }) });
 }
-function J({
+function K({
   title: n,
   onNew: t,
   newButtonText: s = "New",
   buttonLoadingText: l = "Adding...",
   isLoading: i,
   actions: d,
-  children: o,
-  disabled: a = !1,
+  children: a,
+  disabled: o = !1,
   skipSignIn: c = !0
 }) {
   return /* @__PURE__ */ m("div", { className: "space-y-4", children: [
     /* @__PURE__ */ m("div", { className: "flex justify-between items-center", children: [
       /* @__PURE__ */ e("h2", { className: "text-2xl font-bold", children: n }),
       /* @__PURE__ */ e(x, { skipSignIn: c, variant: "pink", size: "sm", children: /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
-        t && /* @__PURE__ */ e(f, { onClick: t, disabled: i || a, children: i ? l : s }),
+        t && /* @__PURE__ */ e(f, { onClick: t, disabled: i || o, children: i ? l : s }),
         d?.map((r, p) => /* @__PURE__ */ e(
           f,
           {
             onClick: r.onClick,
-            disabled: r.isLoading || a,
+            disabled: r.isLoading || o,
             children: r.isLoading ? r.loadingText || "Loading..." : r.text
           },
           p
         ))
       ] }) })
     ] }),
-    /* @__PURE__ */ e(g, { children: o })
+    /* @__PURE__ */ e(g, { children: a })
   ] });
 }
 export {
-  G as TableCellAsset,
-  H as TableCellUpdatable,
-  J as TableEditable
+  H as TableCellAsset,
+  J as TableCellUpdatable,
+  K as TableEditable
 };

package/dist/esm/components/table/grid-loading-line.js

@@ -1,11 +1,12 @@
 import { jsx as r } from "react/jsx-runtime";
-import { Skeleton as p } from "../skeleton/skeleton.js";
+import { Skeleton as l } from "../skeleton/skeleton.js";
 import "react";
 import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-function y({
+import "../../utils/z-index.js";
+function u({
   height: e = "70px",
   columns: i = 6,
   cellClassName: o,
@@ -19,7 +20,7 @@ function y({
       className: t("contents", n),
       style: { minHeight: e },
       ...d,
-      children: Array.from({ length: i }, (s, l) => /* @__PURE__ */ r(
+      children: Array.from({ length: i }, (s, p) => /* @__PURE__ */ r(
         "div",
         {
           className: t(
@@ -28,13 +29,13 @@ function y({
             o || "p-4"
           ),
           style: { minHeight: e },
-          children: /* @__PURE__ */ r(p, { width: "full", height: "md" })
+          children: /* @__PURE__ */ r(l, { width: "full", height: "md" })
         },
-        `${l}-${i}`
+        `${p}-${i}`
       ))
     }
   );
 }
 export {
-  y as GridLoadingLine
+  u as GridLoadingLine
 };