@ledgerhq/lumen-ui-react 0.0.83 → 0.0.85

package/dist/lib/Components/Table/Table.js

@@ -1,16 +1,15 @@
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { createSafeContext as T, cn as c } from "../../../libs/utils-shared/dist/index.js";
-import { cva as i } from "class-variance-authority";
-import { forwardRef as s } from "react";
-import { useThrottledScrollBottom as g } from "./utils/useThrottledScrollBottom.js";
-import { Spot as w } from "../Spot/Spot.js";
-import { Information as R } from "../../Symbols/Icons/Information.js";
-import { useCommonTranslation as B } from "../../../i18n/useCommonTranslation.js";
-import { ChevronUpDown as C } from "../../Symbols/Icons/ChevronUpDown.js";
-import { ChevronDescending as j } from "../../Symbols/Icons/ChevronDescending.js";
-import { ChevronAscending as H } from "../../Symbols/Icons/ChevronAscending.js";
-import { InteractiveIcon as A } from "../InteractiveIcon/InteractiveIcon.js";
-const [I, b] = T("Table"), L = i(
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
+import { createSafeContext as N, cn as c } from "../../../libs/utils-shared/dist/index.js";
+import { cva as o } from "class-variance-authority";
+import { useThrottledScrollBottom as T } from "./utils/useThrottledScrollBottom.js";
+import { Spot as g } from "../Spot/Spot.js";
+import { Information as w } from "../../Symbols/Icons/Information.js";
+import { useCommonTranslation as R } from "../../../i18n/useCommonTranslation.js";
+import { ChevronUpDown as B } from "../../Symbols/Icons/ChevronUpDown.js";
+import { ChevronDescending as C } from "../../Symbols/Icons/ChevronDescending.js";
+import { ChevronAscending as j } from "../../Symbols/Icons/ChevronAscending.js";
+import { InteractiveIcon as H } from "../InteractiveIcon/InteractiveIcon.js";
+const [A, u] = N("Table"), I = o(
   "relative scrollbar-none w-full max-w-full border-collapse overflow-x-auto rounded-lg",
   {
     variants: {
@@ -20,109 +19,130 @@ const [I, b] = T("Table"), L = i(
       }
     }
   }
-), V = s(
-  ({
-    children: t,
-    appearance: e = "no-background",
-    className: a,
-    onScrollBottom: r,
-    loading: n,
-    ...o
-  }, d) => {
-    const m = g({
-      onScrollBottom: r,
-      loading: n
-    });
-    return /* @__PURE__ */ l(I, { value: { appearance: e, loading: n }, children: /* @__PURE__ */ l(
-      "div",
-      {
-        ...o,
-        ref: d,
-        className: L({ appearance: e, className: a }),
-        onScroll: m,
-        children: t
-      }
-    ) });
-  }
-);
-V.displayName = "TableRoot";
-const S = s(
-  ({ children: t, className: e, ...a }, r) => /* @__PURE__ */ l(
-    "table",
+), L = ({
+  children: t,
+  appearance: e = "no-background",
+  className: a,
+  onScrollBottom: l,
+  loading: r,
+  ref: s,
+  ...i
+}) => {
+  const d = T({
+    onScrollBottom: l,
+    loading: r
+  });
+  return /* @__PURE__ */ n(A, { value: { appearance: e, loading: r }, children: /* @__PURE__ */ n(
+    "div",
     {
-      ...a,
-      className: c("w-full max-w-full table-fixed", e),
-      ref: r,
+      ...i,
+      ref: s,
+      className: I({ appearance: e, className: a }),
+      onScroll: d,
       children: t
     }
-  )
-);
-S.displayName = "Table";
-const q = s(({ children: t, className: e, ...a }, r) => /* @__PURE__ */ l("thead", { ref: r, className: e, ...a, children: t }));
-q.displayName = "TableHeader";
-const z = s(
-  ({ children: t, className: e, ...a }, r) => /* @__PURE__ */ l("tbody", { ref: r, className: e, ...a, children: t })
+  ) });
+};
+L.displayName = "TableRoot";
+const V = ({ children: t, className: e, ref: a, ...l }) => /* @__PURE__ */ n(
+  "table",
+  {
+    ...l,
+    className: c("w-full max-w-full table-fixed", e),
+    ref: a,
+    children: t
+  }
 );
-z.displayName = "TableBody";
-const G = s(
-  ({ children: t, className: e, clickable: a = !1, onClick: r, ...n }, o) => /* @__PURE__ */ l(
-    "tr",
-    {
-      ref: o,
-      onClick: r,
-      role: a ? "button" : void 0,
-      className: c(
-        a && "cursor-pointer outline-none select-none hover:bg-base-transparent-hover active:bg-base-transparent-pressed",
-        e
-      ),
-      ...n,
-      children: t
-    }
-  )
+V.displayName = "Table";
+const S = ({
+  children: t,
+  className: e,
+  ref: a,
+  ...l
+}) => /* @__PURE__ */ n("thead", { ref: a, className: e, ...l, children: t });
+S.displayName = "TableHeader";
+const q = ({
+  children: t,
+  className: e,
+  ref: a,
+  ...l
+}) => /* @__PURE__ */ n("tbody", { ref: a, className: e, ...l, children: t });
+q.displayName = "TableBody";
+const z = ({
+  children: t,
+  className: e,
+  clickable: a = !1,
+  onClick: l,
+  ref: r,
+  ...s
+}) => /* @__PURE__ */ n(
+  "tr",
+  {
+    ref: r,
+    onClick: l,
+    role: a ? "button" : void 0,
+    className: c(
+      a && "cursor-pointer outline-none select-none hover:bg-base-transparent-hover active:bg-base-transparent-pressed",
+      e
+    ),
+    ...s,
+    children: t
+  }
 );
-G.displayName = "TableRow";
-const M = i("sticky top-0", {
+z.displayName = "TableRow";
+const G = o("sticky top-0", {
   variants: {
     appearance: {
       "no-background": "bg-canvas",
       plain: "bg-surface"
     }
   }
-}), k = s(({ children: t, className: e, ...a }, r) => {
-  const { appearance: n } = b({
+}), M = ({
+  children: t,
+  className: e,
+  ref: a,
+  ...l
+}) => {
+  const { appearance: r } = u({
     consumerName: "TableHeaderRow",
     contextRequired: !0
   });
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ n(
     "tr",
     {
-      ref: r,
-      className: M({ appearance: n, className: e }),
-      ...a,
+      ref: a,
+      className: G({ appearance: r, className: e }),
+      ...l,
       children: t
     }
   );
-});
-k.displayName = "TableHeaderRow";
-const J = s(({ children: t, className: e, colSpan: a = 1, ...r }, n) => {
-  const { appearance: o } = b({
+};
+M.displayName = "TableHeaderRow";
+const k = ({
+  children: t,
+  className: e,
+  colSpan: a = 1,
+  ref: l,
+  ...r
+}) => {
+  const { appearance: s } = u({
     consumerName: "TableGroupHeaderRow",
     contextRequired: !0
   });
-  return /* @__PURE__ */ l("tr", { ref: n, className: c("h-40", e), ...r, children: /* @__PURE__ */ l("td", { colSpan: a, children: /* @__PURE__ */ l(
+  return /* @__PURE__ */ n("tr", { ref: l, className: c("h-40", e), ...r, children: /* @__PURE__ */ n("td", { colSpan: a, children: /* @__PURE__ */ n(
     "div",
     {
       className: c(
         "flex h-32 w-full items-center bg-muted px-12 body-3 text-base",
-        o === "no-background" && "rounded-sm"
+        s === "no-background" && "rounded-sm"
       ),
       children: t
     }
   ) }) });
-});
-J.displayName = "TableGroupHeaderRow";
-const f = {
-  root: i(
+};
+k.displayName = "TableGroupHeaderRow";
+const p = {
+  root: o(
     "h-64 truncate p-12 body-3 text-base first:rounded-l-md last:rounded-r-md",
     {
       variants: {
@@ -136,7 +156,7 @@ const f = {
       }
     }
   ),
-  inner: i("flex flex-1 justify-end", {
+  inner: o("flex flex-1 justify-end", {
     variants: {
       align: {
         start: "text-start justify-start",
@@ -144,52 +164,56 @@ const f = {
       }
     }
   })
-}, K = s(
-  ({ children: t, className: e, hideBelow: a, align: r = "start", ...n }, o) => /* @__PURE__ */ l(
-    "td",
-    {
-      ref: o,
-      className: f.root({ hideBelow: a, className: e }),
-      ...n,
-      children: /* @__PURE__ */ l("div", { className: f.inner({ align: r }), children: t })
-    }
-  )
+}, J = ({
+  children: t,
+  className: e,
+  hideBelow: a,
+  align: l = "start",
+  ref: r,
+  ...s
+}) => /* @__PURE__ */ n(
+  "td",
+  {
+    ref: r,
+    className: p.root({ hideBelow: a, className: e }),
+    ...s,
+    children: /* @__PURE__ */ n("div", { className: p.inner({ align: l }), children: t })
+  }
 );
-K.displayName = "TableCell";
-const P = i("flex items-center gap-12 truncate", {
+J.displayName = "TableCell";
+const K = o("flex items-center gap-12 truncate", {
   variants: {
     align: {
       start: "text-start",
       end: "text-end"
     }
   }
-}), U = s(
-  ({
-    className: t,
-    align: e = "start",
-    leadingContent: a,
-    title: r,
-    description: n,
-    ...o
-  }, d) => /* @__PURE__ */ u(
-    "div",
-    {
-      ref: d,
-      className: P({ align: e, className: t }),
-      ...o,
-      children: [
-        /* @__PURE__ */ l("div", { children: a }),
-        /* @__PURE__ */ u("div", { className: "flex flex-col gap-4 truncate", children: [
-          /* @__PURE__ */ l("div", { className: "truncate body-2 text-base", children: r }),
-          /* @__PURE__ */ l("div", { className: "truncate body-3 text-muted", children: n })
-        ] })
-      ]
-    }
-  )
+}), P = ({
+  className: t,
+  align: e = "start",
+  leadingContent: a,
+  title: l,
+  description: r,
+  ref: s,
+  ...i
+}) => /* @__PURE__ */ m(
+  "div",
+  {
+    ref: s,
+    className: K({ align: e, className: t }),
+    ...i,
+    children: [
+      /* @__PURE__ */ n("div", { children: a }),
+      /* @__PURE__ */ m("div", { className: "flex flex-col gap-4 truncate", children: [
+        /* @__PURE__ */ n("div", { className: "truncate body-2 text-base", children: l }),
+        /* @__PURE__ */ n("div", { className: "truncate body-3 text-muted", children: r })
+      ] })
+    ]
+  }
 );
-U.displayName = "TableCellContent";
-const v = {
-  root: i("group h-40 truncate p-12 body-3 text-base", {
+P.displayName = "TableCellContent";
+const f = {
+  root: o("group h-40 truncate p-12 body-3 text-base", {
     variants: {
       hideBelow: {
         xs: "hidden xs:table-cell",
@@ -200,7 +224,7 @@ const v = {
       }
     }
   }),
-  content: i("flex min-w-0 items-center gap-4 truncate", {
+  content: o("flex min-w-0 items-center gap-4 truncate", {
     variants: {
       align: {
         start: "text-start justify-start",
@@ -208,107 +232,123 @@ const v = {
       }
     }
   }),
-  trailingContent: i(
+  trailingContent: o(
     "flex items-center justify-center opacity-0 group-hover:opacity-100"
   )
-}, E = s(
-  ({
-    children: t,
-    className: e,
-    scope: a = "col",
-    hideBelow: r,
-    align: n = "start",
-    trailingContent: o,
-    ...d
-  }, m) => /* @__PURE__ */ l(
-    "th",
-    {
-      ref: m,
-      scope: a,
-      className: v.root({ hideBelow: r, className: e }),
-      ...d,
-      children: /* @__PURE__ */ l("div", { className: "min-w-0", children: /* @__PURE__ */ u("div", { className: v.content({ align: n }), children: [
-        /* @__PURE__ */ l("span", { className: c("truncate", n === "end" && "order-1"), children: t }),
-        /* @__PURE__ */ l("div", { className: "flex items-center justify-center opacity-0 group-hover:opacity-100", children: o })
-      ] }) })
-    }
-  )
+}, U = ({
+  children: t,
+  className: e,
+  scope: a = "col",
+  hideBelow: l,
+  align: r = "start",
+  trailingContent: s,
+  ref: i,
+  ...d
+}) => /* @__PURE__ */ n(
+  "th",
+  {
+    ref: i,
+    scope: a,
+    className: f.root({ hideBelow: l, className: e }),
+    ...d,
+    children: /* @__PURE__ */ n("div", { className: "min-w-0", children: /* @__PURE__ */ m("div", { className: f.content({ align: r }), children: [
+      /* @__PURE__ */ n("span", { className: c("truncate", r === "end" && "order-1"), children: t }),
+      /* @__PURE__ */ n("div", { className: "flex items-center justify-center opacity-0 group-hover:opacity-100", children: s })
+    ] }) })
+  }
 );
-E.displayName = "TableHeaderCell";
-const F = s(
-  ({ children: t, className: e, ...a }, r) => /* @__PURE__ */ l(
-    "div",
-    {
-      ref: r,
-      className: c("flex items-center gap-8 py-12", e),
-      ...a,
-      children: t
-    }
-  )
+U.displayName = "TableHeaderCell";
+const E = ({
+  children: t,
+  className: e,
+  ref: a,
+  ...l
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: a,
+    className: c("flex items-center gap-8 py-12", e),
+    ...l,
+    children: t
+  }
 );
-F.displayName = "TableActionBar";
-const O = s(({ children: t, className: e, ...a }, r) => /* @__PURE__ */ l(
+E.displayName = "TableActionBar";
+const F = ({
+  children: t,
+  className: e,
+  ref: a,
+  ...l
+}) => /* @__PURE__ */ n(
   "div",
   {
-    ref: r,
+    ref: a,
     className: c("flex items-center gap-8", e),
-    ...a,
+    ...l,
     children: t
   }
-));
-O.displayName = "TableActionBarLeading";
-const Q = s(({ children: t, className: e, ...a }, r) => /* @__PURE__ */ l(
+);
+F.displayName = "TableActionBarLeading";
+const O = ({
+  children: t,
+  className: e,
+  ref: a,
+  ...l
+}) => /* @__PURE__ */ n(
   "div",
   {
-    ref: r,
+    ref: a,
     className: c("ml-auto flex items-center gap-8", e),
-    ...a,
+    ...l,
     children: t
   }
-));
-Q.displayName = "TableActionBarTrailing";
-const W = s(
-  ({ className: t, ...e }, a) => {
-    const { loading: r } = b({
-      consumerName: "TableLoadingRow",
-      contextRequired: !0
-    });
-    return r ? /* @__PURE__ */ l(
-      "div",
-      {
-        ...e,
-        ref: a,
-        className: c(
-          "flex h-80 w-full items-center justify-center p-12",
-          t
-        ),
-        children: /* @__PURE__ */ l(w, { appearance: "loader", size: 48 })
-      }
-    ) : null;
-  }
 );
-W.displayName = "TableLoadingRow";
-const X = s(
-  ({ className: t, ...e }, a) => /* @__PURE__ */ l(
-    A,
+O.displayName = "TableActionBarTrailing";
+const Q = ({
+  className: t,
+  ref: e,
+  ...a
+}) => {
+  const { loading: l } = u({
+    consumerName: "TableLoadingRow",
+    contextRequired: !0
+  });
+  return l ? /* @__PURE__ */ n(
+    "div",
     {
-      ...e,
-      iconType: "filled",
-      className: t,
-      ref: a,
-      children: /* @__PURE__ */ l(R, { size: 20 })
+      ...a,
+      ref: e,
+      className: c(
+        "flex h-80 w-full items-center justify-center p-12",
+        t
+      ),
+      children: /* @__PURE__ */ n(g, { appearance: "loader", size: 48 })
     }
-  )
+  ) : null;
+};
+Q.displayName = "TableLoadingRow";
+const W = ({
+  className: t,
+  ref: e,
+  ...a
+}) => /* @__PURE__ */ n(
+  H,
+  {
+    ...a,
+    iconType: "filled",
+    className: t,
+    ref: e,
+    children: /* @__PURE__ */ n(w, { size: 20 })
+  }
 );
-X.displayName = "TableInfoIcon";
-const Y = {
-  asc: H,
-  desc: j,
-  idle: C
-}, x = {
-  root: i(
+W.displayName = "TableInfoIcon";
+const X = {
+  asc: j,
+  desc: C,
+  idle: B
+}, v = {
+  root: o(
     [
-      "group flex min-w-0 cursor-pointer items-center gap-4",
+      "flex min-w-0 cursor-pointer items-center gap-4",
       "rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
     ],
     {
@@ -320,7 +360,7 @@ const Y = {
       }
     }
   ),
-  icon: i("", {
+  icon: o("", {
     variants: {
       active: {
         true: "opacity-100",
@@ -328,63 +368,62 @@ const Y = {
       }
     }
   })
-}, Z = s(
-  ({
-    children: t,
-    sortDirection: e,
-    align: a = "start",
-    onToggleSort: r,
-    className: n,
-    onClick: o,
-    ...d
-  }, m) => {
-    const { t: p } = B(), h = Y[e || "idle"], y = {
-      asc: p("table.ascAriaLabel"),
-      desc: p("table.descAriaLabel")
-    };
-    return /* @__PURE__ */ u(
-      "button",
-      {
-        ...d,
-        ref: m,
-        type: "button",
-        className: x.root({ align: a, className: n }),
-        "aria-label": e ? y[e] : void 0,
-        onClick: (N) => {
-          o == null || o(N), r == null || r(e === "asc" ? "desc" : "asc");
-        },
-        children: [
-          /* @__PURE__ */ l("span", { className: "min-w-0 truncate", children: t }),
-          /* @__PURE__ */ l(
-            h,
-            {
-              size: 20,
-              className: x.icon({
-                active: !!e
-              })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Z.displayName = "TableSortButton";
+}, Y = ({
+  children: t,
+  sortDirection: e,
+  align: a = "start",
+  onToggleSort: l,
+  className: r,
+  onClick: s,
+  ref: i,
+  ...d
+}) => {
+  const { t: b } = R(), x = X[e || "idle"], h = {
+    asc: b("table.ascAriaLabel"),
+    desc: b("table.descAriaLabel")
+  };
+  return /* @__PURE__ */ m(
+    "button",
+    {
+      ...d,
+      ref: i,
+      type: "button",
+      className: v.root({ align: a, className: r }),
+      "aria-label": e ? h[e] : void 0,
+      onClick: (y) => {
+        s == null || s(y), l == null || l(e === "asc" ? "desc" : "asc");
+      },
+      children: [
+        /* @__PURE__ */ n("span", { className: "min-w-0 truncate", children: t }),
+        /* @__PURE__ */ n(
+          x,
+          {
+            size: 20,
+            className: v.icon({
+              active: !!e
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+Y.displayName = "TableSortButton";
 export {
-  S as Table,
-  F as TableActionBar,
-  O as TableActionBarLeading,
-  Q as TableActionBarTrailing,
-  z as TableBody,
-  K as TableCell,
-  U as TableCellContent,
-  J as TableGroupHeaderRow,
-  q as TableHeader,
-  E as TableHeaderCell,
-  k as TableHeaderRow,
-  X as TableInfoIcon,
-  W as TableLoadingRow,
-  V as TableRoot,
-  G as TableRow,
-  Z as TableSortButton
+  V as Table,
+  E as TableActionBar,
+  F as TableActionBarLeading,
+  O as TableActionBarTrailing,
+  q as TableBody,
+  J as TableCell,
+  P as TableCellContent,
+  k as TableGroupHeaderRow,
+  S as TableHeader,
+  U as TableHeaderCell,
+  M as TableHeaderRow,
+  W as TableInfoIcon,
+  Q as TableLoadingRow,
+  L as TableRoot,
+  z as TableRow,
+  Y as TableSortButton
 };