@ledgerhq/lumen-ui-react 0.1.52 → 0.1.54

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

@@ -0,0 +1,521 @@
+import { jsx as l, jsxs as v } from "react/jsx-runtime";
+import { createSafeContext as h, cn as s } from "../../../../libs/utils-shared/dist/index.js";
+import { cva as c } from "class-variance-authority";
+import { useThrottledScrollBottom as N } from "./utils/useThrottledScrollBottom.js";
+import { Spot as w } from "../Spot/Spot.js";
+import { Information as y } 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 j } from "../../symbols/icons/ChevronDescending.js";
+import { ChevronAscending as I } from "../../symbols/icons/ChevronAscending.js";
+import { InteractiveIcon as A } from "../InteractiveIcon/InteractiveIcon.js";
+const [V, u] = h("Table"), k = c(
+  "relative scrollbar-none w-full max-w-full border-collapse overflow-x-auto rounded-lg",
+  {
+    variants: {
+      appearance: {
+        "no-background": "bg-canvas",
+        plain: "bg-surface"
+      }
+    }
+  }
+), W = ({
+  children: n,
+  appearance: e = "no-background",
+  className: t,
+  onScrollBottom: a,
+  loading: r,
+  ref: o,
+  ...i
+}) => {
+  const d = N({
+    onScrollBottom: a,
+    loading: r
+  });
+  return /* @__PURE__ */ l(V, { value: { appearance: e, loading: r }, children: /* @__PURE__ */ l(
+    "div",
+    {
+      ...i,
+      ref: o,
+      className: k({ appearance: e, className: t }),
+      onScroll: d,
+      children: n
+    }
+  ) });
+}, X = ({ children: n, className: e, ref: t, ...a }) => /* @__PURE__ */ l(
+  "table",
+  {
+    ...a,
+    className: s("w-full max-w-full table-fixed", e),
+    ref: t,
+    children: n
+  }
+), Y = ({
+  children: n,
+  className: e,
+  ref: t,
+  ...a
+}) => /* @__PURE__ */ l("colgroup", { ref: t, className: e, ...a, children: n }), q = c("", {
+  variants: {
+    hideBelow: {
+      xs: "hidden xs:table-column",
+      sm: "hidden sm:table-column",
+      md: "hidden md:table-column",
+      lg: "hidden lg:table-column",
+      xl: "hidden xl:table-column"
+    }
+  }
+}), Z = ({
+  className: n,
+  hideBelow: e,
+  ref: t,
+  ...a
+}) => /* @__PURE__ */ l(
+  "col",
+  {
+    ref: t,
+    className: q({ hideBelow: e, className: n }),
+    ...a
+  }
+), _ = ({
+  children: n,
+  className: e,
+  ref: t,
+  ...a
+}) => /* @__PURE__ */ l("thead", { ref: t, className: e, ...a, children: n }), $ = ({
+  children: n,
+  className: e,
+  ref: t,
+  ...a
+}) => /* @__PURE__ */ l("tbody", { ref: t, className: e, ...a, children: n }), ee = ({
+  children: n,
+  className: e,
+  clickable: t = !1,
+  onClick: a,
+  ref: r,
+  ...o
+}) => /* @__PURE__ */ l(
+  "tr",
+  {
+    ref: r,
+    onClick: a,
+    role: t ? "button" : void 0,
+    className: s(
+      t && "cursor-pointer outline-none select-none hover:bg-base-transparent-hover active:bg-base-transparent-pressed",
+      e
+    ),
+    ...o,
+    children: n
+  }
+), H = c("", {
+  variants: {
+    appearance: {
+      "no-background": "bg-canvas",
+      plain: "bg-surface"
+    },
+    stickyHeader: {
+      true: "sticky top-0 z-table-header",
+      false: ""
+    }
+  }
+}), te = ({
+  children: n,
+  className: e,
+  stickyHeader: t = !0,
+  ref: a,
+  ...r
+}) => {
+  const { appearance: o } = u({
+    consumerName: "TableHeaderRow",
+    contextRequired: !0
+  });
+  return /* @__PURE__ */ l(
+    "tr",
+    {
+      ref: a,
+      className: H({ appearance: o, stickyHeader: t, className: e }),
+      ...r,
+      children: n
+    }
+  );
+}, ne = ({
+  children: n,
+  className: e,
+  colSpan: t = 1,
+  ref: a,
+  ...r
+}) => {
+  const { appearance: o } = u({
+    consumerName: "TableGroupHeaderRow",
+    contextRequired: !0
+  });
+  return /* @__PURE__ */ l("tr", { ref: a, className: s("h-40", e), ...r, children: /* @__PURE__ */ l("td", { colSpan: t, children: /* @__PURE__ */ l(
+    "div",
+    {
+      className: s(
+        "flex h-32 w-full items-center bg-muted px-12 body-3 text-base",
+        o === "no-background" && "rounded-sm"
+      ),
+      children: n
+    }
+  ) }) });
+}, p = {
+  root: c(
+    "h-64 truncate p-12 body-3 text-base first:rounded-l-md last:rounded-r-md",
+    {
+      variants: {
+        hideBelow: {
+          xs: "hidden xs:table-cell",
+          sm: "hidden sm:table-cell",
+          md: "hidden md:table-cell",
+          lg: "hidden lg:table-cell",
+          xl: "hidden xl:table-cell"
+        }
+      }
+    }
+  ),
+  inner: c("flex flex-1", {
+    variants: {
+      align: {
+        start: "justify-start text-start",
+        end: "justify-end text-end"
+      }
+    }
+  })
+}, ae = ({
+  children: n,
+  className: e,
+  hideBelow: t,
+  align: a = "start",
+  ref: r,
+  ...o
+}) => /* @__PURE__ */ l(
+  "td",
+  {
+    ref: r,
+    className: p.root({ hideBelow: t, className: e }),
+    ...o,
+    children: /* @__PURE__ */ l("div", { className: p.inner({ align: a }), children: n })
+  }
+), [S, m] = h("TableCellItem", { align: "start" }), L = c("flex min-w-0 items-center gap-12", {
+  variants: {
+    align: {
+      start: "text-start",
+      end: "text-end"
+    }
+  }
+}), le = ({
+  className: n,
+  align: e = "start",
+  children: t,
+  ref: a,
+  ...r
+}) => /* @__PURE__ */ l(S, { value: { align: e }, children: /* @__PURE__ */ l(
+  "div",
+  {
+    ref: a,
+    className: L({ align: e, className: n }),
+    ...r,
+    children: t
+  }
+) }), re = ({
+  className: n,
+  children: e,
+  ref: t,
+  ...a
+}) => {
+  const { align: r } = m({
+    consumerName: "TableCellContent",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: t,
+      className: s(
+        "flex min-w-0 flex-col gap-4",
+        r === "end" && "items-end text-end",
+        n
+      ),
+      ...a,
+      children: e
+    }
+  );
+}, oe = ({
+  className: n,
+  children: e,
+  ref: t,
+  ...a
+}) => {
+  const { align: r } = m({
+    consumerName: "TableCellContentTitle",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: t,
+      className: s(
+        "shrink-0 body-2 text-base",
+        r === "end" && "text-end",
+        n
+      ),
+      ...a,
+      children: e
+    }
+  );
+}, se = ({
+  className: n,
+  children: e,
+  ref: t,
+  ...a
+}) => {
+  const { align: r } = m({
+    consumerName: "TableCellContentDescription",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: t,
+      className: s(
+        "truncate body-3 text-muted",
+        r === "end" && "text-end",
+        n
+      ),
+      ...a,
+      children: e
+    }
+  );
+}, ce = ({
+  className: n,
+  children: e,
+  ref: t,
+  ...a
+}) => {
+  const { align: r } = m({
+    consumerName: "TableCellContentRow",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: t,
+      className: s(
+        "flex min-w-0 items-center gap-8",
+        r === "end" && "justify-end",
+        n
+      ),
+      ...a,
+      children: e
+    }
+  );
+}, f = {
+  root: c("group h-40 truncate p-12 body-3 text-base", {
+    variants: {
+      hideBelow: {
+        xs: "hidden xs:table-cell",
+        sm: "hidden sm:table-cell",
+        md: "hidden md:table-cell",
+        lg: "hidden lg:table-cell",
+        xl: "hidden xl:table-cell"
+      }
+    }
+  }),
+  content: c("flex min-w-0 items-center gap-4 truncate", {
+    variants: {
+      align: {
+        start: "justify-start text-start",
+        end: "justify-end text-end"
+      }
+    }
+  }),
+  trailingContent: c(
+    "flex items-center justify-center opacity-0 group-hover:opacity-100"
+  )
+}, ie = ({
+  children: n,
+  className: e,
+  scope: t = "col",
+  hideBelow: a,
+  align: r = "start",
+  trailingContent: o,
+  ref: i,
+  ...d
+}) => /* @__PURE__ */ l(
+  "th",
+  {
+    ref: i,
+    scope: t,
+    className: f.root({ hideBelow: a, className: e }),
+    ...d,
+    children: /* @__PURE__ */ l("div", { className: "min-w-0", children: /* @__PURE__ */ v("div", { className: f.content({ align: r }), children: [
+      /* @__PURE__ */ l("span", { className: s("truncate", r === "end" && "order-1"), children: n }),
+      /* @__PURE__ */ l("div", { className: "flex items-center justify-center opacity-0 group-hover:opacity-100", children: o })
+    ] }) })
+  }
+), de = ({
+  children: n,
+  className: e,
+  ref: t,
+  ...a
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    ref: t,
+    className: s("flex items-center gap-8 py-12", e),
+    ...a,
+    children: n
+  }
+), me = ({
+  children: n,
+  className: e,
+  ref: t,
+  ...a
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    ref: t,
+    className: s("flex items-center gap-8", e),
+    ...a,
+    children: n
+  }
+), ue = ({
+  children: n,
+  className: e,
+  ref: t,
+  ...a
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    ref: t,
+    className: s("ml-auto flex items-center gap-8", e),
+    ...a,
+    children: n
+  }
+), be = ({
+  className: n,
+  ref: e,
+  ...t
+}) => {
+  const { loading: a } = u({
+    consumerName: "TableLoadingRow",
+    contextRequired: !0
+  });
+  return a ? /* @__PURE__ */ l(
+    "div",
+    {
+      ...t,
+      ref: e,
+      className: s(
+        "flex h-80 w-full items-center justify-center p-12",
+        n
+      ),
+      children: /* @__PURE__ */ l(w, { appearance: "loader", size: 48 })
+    }
+  ) : null;
+}, pe = ({
+  className: n,
+  ref: e,
+  ...t
+}) => /* @__PURE__ */ l(
+  A,
+  {
+    ...t,
+    iconType: "filled",
+    icon: y,
+    size: 20,
+    className: n,
+    ref: e
+  }
+), z = {
+  asc: I,
+  desc: j,
+  idle: B
+}, x = {
+  root: c(
+    [
+      "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"
+    ],
+    {
+      variants: {
+        align: {
+          end: "flex-row-reverse",
+          start: ""
+        }
+      }
+    }
+  ),
+  icon: c("", {
+    variants: {
+      active: {
+        true: "opacity-100",
+        false: "opacity-0 group-hover:opacity-100"
+      }
+    }
+  })
+}, fe = ({
+  children: n,
+  sortDirection: e,
+  align: t = "start",
+  onToggleSort: a,
+  className: r,
+  onClick: o,
+  ref: i,
+  ...d
+}) => {
+  const { t: b } = R(), g = z[e || "idle"], T = {
+    asc: b("components.table.ascAriaLabel"),
+    desc: b("components.table.descAriaLabel")
+  };
+  return /* @__PURE__ */ v(
+    "button",
+    {
+      ...d,
+      ref: i,
+      type: "button",
+      className: x.root({ align: t, className: r }),
+      "aria-label": e ? T[e] : void 0,
+      onClick: (C) => {
+        o?.(C), a?.(e === "asc" ? "desc" : "asc");
+      },
+      children: [
+        /* @__PURE__ */ l("span", { className: "min-w-0 truncate", children: n }),
+        /* @__PURE__ */ l(
+          g,
+          {
+            size: 20,
+            className: x.icon({
+              active: !!e
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  X as Table,
+  de as TableActionBar,
+  me as TableActionBarLeading,
+  ue as TableActionBarTrailing,
+  $ as TableBody,
+  ae as TableCell,
+  re as TableCellContent,
+  se as TableCellContentDescription,
+  ce as TableCellContentRow,
+  oe as TableCellContentTitle,
+  le as TableCellItem,
+  Z as TableCol,
+  Y as TableColGroup,
+  ne as TableGroupHeaderRow,
+  _ as TableHeader,
+  ie as TableHeaderCell,
+  te as TableHeaderRow,
+  pe as TableInfoIcon,
+  be as TableLoadingRow,
+  W as TableRoot,
+  ee as TableRow,
+  fe as TableSortButton
+};

package/dist/lib/Components/core/Table/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Table/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,oCAAoC,IAAI,CAAC"}

package/dist/lib/Components/core/Table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}