@stackone/malachite 2.21.0 → 2.23.0

package/dist/components/Table/Table.js

@@ -0,0 +1,1007 @@
+import { jsx as r, jsxs as C } from "react/jsx-runtime";
+import { useVirtualizer as pt } from "@tanstack/react-virtual";
+import xt, { useState as ne, useRef as j, useCallback as je, useId as bt, useEffect as le, useMemo as Ae, useLayoutEffect as Qe } from "react";
+import Ye from "../CustomIcons/CaretDownIcon.js";
+import vt from "../CustomIcons/CaretUpIcon.js";
+import gt from "../CustomIcons/InfoIcon.js";
+import mt from "../CustomIcons/WarningTriangleIcon.js";
+import yt from "../Tooltip.js";
+import $t from "../TruncatedTooltip.js";
+import { FOCUS_RING_INSET as Ue } from "../focusRing.js";
+import { isFromInteractiveDescendant as He, activateOnEnterOrSpace as St } from "../keyboardActivation.js";
+import { FOREGROUND_RESET as Te, SELECTED_ROW_ACCENT as Ve, SELECTED_TEXT_CONTEXT as Ze, SELECTED_ROW_FOREGROUND as Xe, SELECTED_ROW_BACKGROUND as pe } from "../selectedRow.js";
+import Pe from "./TablePagination.js";
+const kt = 160, wt = (e, l) => e.length === l.length && e.every((c, p) => c === l[p]), Ge = "\0", Nt = (e, l, c) => {
+  if (typeof e != "object" || e === null)
+    return `${Ge}i${c}`;
+  const p = l.ids.get(e);
+  if (p !== void 0)
+    return p;
+  const E = `${Ge}${l.next++}`;
+  return l.ids.set(e, E), E;
+}, Ct = (e, l, c) => typeof l == "function" ? e.map((p) => l(p)) : e.map((p, E) => {
+  const b = p[l];
+  return b == null ? Nt(p, c, E) : String(b);
+}), Et = (e) => {
+  if (typeof e == "number")
+    return e;
+  if (typeof e == "string") {
+    const l = e.trim().match(/^(\d+(?:\.\d+)?)px$/);
+    if (l)
+      return Number(l[1]);
+  }
+}, _t = (e) => e.reduce((l, c) => {
+  const p = Et(c.width);
+  return p !== void 0 ? l + p : typeof c.minWidth == "number" ? l + c.minWidth : l + kt;
+}, 0), Ke = (e) => typeof e == "string", ie = (e) => ({
+  small: "text-[length:var(--malachite-font-size-small)]",
+  medium: "text-[length:var(--malachite-font-size-medium)]",
+  large: "text-[length:var(--malachite-font-size-large)]"
+})[e], Je = {
+  borderBottom: "1px solid var(--malachite-card-border, #e8e8e8)"
+}, qe = (e, l) => {
+  e && l && l.scrollLeft !== e.scrollLeft && (l.scrollLeft = e.scrollLeft);
+}, Rt = 56, It = 44, Tt = 8, Dt = 10, te = 8, zt = "var(--malachite-radius-xl, 12px)", re = 4, Mt = "--malachite-ctx-table-surround", Ot = () => {
+  const e = zt, l = `var(${Mt}, var(--malachite-card-background, #ffffff))`;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        height: e,
+        pointerEvents: "none",
+        background: [
+          `radial-gradient(circle ${e} at ${e} ${e}, transparent calc(${e} - 0.5px), ${l} ${e}) top left / ${e} ${e} no-repeat`,
+          `radial-gradient(circle ${e} at 0 ${e}, transparent calc(${e} - 0.5px), ${l} ${e}) top right / ${e} ${e} no-repeat`
+        ].join(", ")
+      }
+    }
+  );
+}, Lt = ({
+  records: e,
+  startIndex: l,
+  scrollElement: c,
+  estimateRowHeight: p,
+  style: E,
+  renderRow: b,
+  registerHandle: g,
+  cardKey: k,
+  rovingIndex: m
+}) => {
+  const T = j(null), [D, z] = ne(0);
+  Qe(() => {
+    const y = T.current;
+    if (!y || !c)
+      return;
+    const M = () => {
+      const f = y.getBoundingClientRect().top - c.getBoundingClientRect().top + c.scrollTop;
+      z((U) => Math.abs(U - f) < 1 ? U : f);
+    };
+    if (M(), typeof ResizeObserver > "u")
+      return;
+    const K = new ResizeObserver(M);
+    let W = y;
+    for (; W && W !== c; ) {
+      let f = W.previousElementSibling;
+      for (; f; )
+        K.observe(f), f = f.previousElementSibling;
+      const U = W.parentElement;
+      if (U)
+        W = U;
+      else {
+        const Q = W.getRootNode();
+        W = Q instanceof ShadowRoot ? Q.host : null;
+      }
+    }
+    return () => K.disconnect();
+  }, [c, e.length, l]);
+  const w = pt({
+    count: e.length,
+    // State, not a ref: an ancestor's ref is not attached when this child's layout effects
+    // run, so a ref would leave the virtualizer without a scroll element.
+    getScrollElement: () => c,
+    estimateSize: () => p,
+    overscan: Tt,
+    scrollMargin: D
+  });
+  le(() => {
+    if (g)
+      return g(k, {
+        startIndex: l,
+        count: e.length,
+        scrollToIndex: (y) => w.scrollToIndex(y, { align: "center" })
+      }), () => g(k, null);
+  }, [g, k, l, e.length, w]);
+  const N = w.getVirtualItems(), X = w.getTotalSize(), A = m >= l && m < l + e.length && N.length > 0 ? Math.min(
+    Math.max(m, l + N[0].index),
+    l + N[N.length - 1].index
+  ) : m, B = N.length > 0 ? N[0].start - D : 0, F = N.length > 0 ? X - (N[N.length - 1].end - D) : 0;
+  return /* @__PURE__ */ C("div", { ref: T, className: "flex flex-col w-full", style: E, children: [
+    B > 0 && /* @__PURE__ */ r("div", { "aria-hidden": "true", style: { height: B, flexShrink: 0 } }),
+    N.map(
+      (y) => b(
+        e[y.index],
+        l + y.index,
+        y.index === e.length - 1,
+        y.index === 0,
+        { measureRef: w.measureElement, index: y.index },
+        A
+      )
+    ),
+    F > 0 && /* @__PURE__ */ r("div", { "aria-hidden": "true", style: { height: F, flexShrink: 0 } })
+  ] });
+}, Wt = (e, l) => {
+  const c = l ? Rt : 0;
+  return typeof e == "number" ? `${Math.max(0, e - c)}px` : `calc(${e} - ${c}px)`;
+}, ae = (e) => {
+  const l = e.width;
+  if (l == null)
+    return {};
+  const c = typeof l == "number" ? `${l}px` : l;
+  return { flexBasis: c, maxWidth: c };
+}, De = (e) => {
+  const l = e.width;
+  if (l == null)
+    return {};
+  const c = typeof l == "number" ? `${l}px` : l;
+  return { width: c, flexBasis: c };
+}, Bt = (e) => e === "asc" ? "ascending" : e === "desc" ? "descending" : "none", J = (e) => e === "center" ? "justify-center" : e === "right" ? "justify-end" : "justify-start", Ft = (e) => e === "center" ? "justify-center" : e === "right" ? "justify-end" : "justify-between", se = (e) => e === "center" ? "text-center" : e === "right" ? "text-right" : "text-left", et = (e) => e ? J(e) : "justify-end", xe = ({ info: e }) => /* @__PURE__ */ r(yt, { text: e, placement: "top", children: /* @__PURE__ */ r(
+  gt,
+  {
+    size: 13,
+    className: "shrink-0 text-[var(--malachite-text-secondary,#bbb)]"
+  }
+) }), tt = (e, l) => ({
+  type: "button",
+  onClick: l,
+  "aria-label": typeof e == "string" ? `Sort by ${e}` : "Sort column"
+}), jt = ({
+  column: e,
+  record: l,
+  index: c,
+  size: p,
+  paddingYClass: E,
+  bordered: b,
+  isFirstRow: g,
+  isLastRow: k,
+  isFirstColumn: m,
+  isLastColumn: T,
+  variantBackground: D,
+  showSelectedAccent: z,
+  isSelected: w
+}) => {
+  const N = l[e.dataIndex], X = e.render ? e.render(N, l, c) : N == null ? "" : String(N), q = e.ellipsis && Ke(N) ? N : void 0;
+  return /* @__PURE__ */ r(
+    "td",
+    {
+      className: `
+                table-cell px-4 ${E} ${ie(p)}
+                ${e.ellipsis ? "truncate overflow-hidden whitespace-nowrap" : ""}
+                ${b ? "table-cell-bordered" : ""}
+                ${b && g ? "table-cell-bordered-top" : ""}
+                ${b && m ? "table-cell-bordered-left" : ""}
+                ${b && T ? "table-cell-bordered-right" : ""}
+                ${b && m && g ? "rounded-tl-lg" : ""}
+                ${b && T && g ? "rounded-tr-lg" : ""}
+                ${b && m && k ? "rounded-bl-lg" : ""}
+                ${b && T && k ? "rounded-br-lg" : ""}
+                ${se(e.align)}
+            `,
+      style: {
+        width: e.width,
+        backgroundColor: D ?? // Mirror the row's background, or the tint composites over the wrong opaque
+        // base — they differ in dark mode.
+        (w ? b ? "var(--malachite-table-borderedRow-background, #fff)" : "var(--malachite-table-row-background, #fff)" : void 0),
+        // Its own layer, so the tint composites over the cell instead of replacing it.
+        backgroundImage: w ? `linear-gradient(${pe}, ${pe})` : void 0,
+        // Content pinning its own colour follows via the channel below.
+        color: w ? Xe : "var(--malachite-table-row-foreground)",
+        ...w ? Ze : {},
+        // Inset box-shadow, not `ring-*`: --tw-ring-* silently doesn't paint in a shadow root.
+        boxShadow: z ? `inset 2px 0 0 ${Ve}` : void 0,
+        borderBottom: b ? void 0 : k ? "none" : "1px solid var(--malachite-table-row-border)"
+      },
+      title: q,
+      children: X
+    }
+  );
+}, At = ({
+  column: e,
+  sortDirection: l,
+  onSort: c
+}) => {
+  const p = !!e.sorter, E = e.title === "" || e.title == null;
+  if (E && e.width !== void 0)
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        className: "h-full shrink-0",
+        style: De(e)
+      }
+    );
+  if (E)
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        className: "flex flex-[1_0_0] h-full min-w-0",
+        style: ae(e)
+      }
+    );
+  const g = typeof e.title == "string" ? /* @__PURE__ */ r("p", { className: "font-medium text-[13px] text-[#0a0a0a] tracking-[0.13px] whitespace-nowrap truncate", children: e.title }) : e.title, k = /* @__PURE__ */ r(
+    Ye,
+    {
+      size: 13,
+      className: `shrink-0 transition-transform ${l ? "text-[#0a0a0a]" : "text-[#bbb]"} ${l === "asc" ? "rotate-180" : ""}`
+    }
+  );
+  return p ? /* @__PURE__ */ r(
+    "div",
+    {
+      className: "flex flex-[1_0_0] min-w-0 overflow-hidden",
+      style: ae(e),
+      children: /* @__PURE__ */ C(
+        "button",
+        {
+          ...tt(e.title, c),
+          className: `flex flex-1 items-center ${Ft(e.align)} gap-1 min-w-0 px-4 py-3 cursor-pointer appearance-none bg-transparent border-0 ${se(e.align)}`,
+          children: [
+            /* @__PURE__ */ C("div", { className: "flex items-center gap-1 min-w-0", children: [
+              g,
+              e.info && /* @__PURE__ */ r(xe, { info: e.info })
+            ] }),
+            k
+          ]
+        }
+      )
+    }
+  ) : /* @__PURE__ */ r(
+    "div",
+    {
+      className: `flex flex-[1_0_0] items-center ${J(e.align)} min-w-0 overflow-hidden px-4 py-3`,
+      style: ae(e),
+      children: /* @__PURE__ */ C("div", { className: "flex items-center gap-1 min-w-0", children: [
+        g,
+        e.info && /* @__PURE__ */ r(xe, { info: e.info })
+      ] })
+    }
+  );
+}, Ut = ({
+  column: e,
+  record: l,
+  index: c,
+  size: p,
+  paddingYClass: E,
+  isSelected: b = !1
+}) => {
+  const g = l[e.dataIndex], k = e.render ? e.render(g, l, c) : g == null ? "" : String(g), T = (e.title === "" || e.title == null) && e.width !== void 0, D = Ke(g) && g.length > 0, z = b ? {
+    color: Xe,
+    ...Ze
+  } : {};
+  if (T)
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        className: `flex items-center ${et(e.align)} shrink-0 overflow-hidden px-4 ${E}`,
+        style: {
+          ...De(e),
+          ...z
+        },
+        children: k
+      }
+    );
+  const w = !e.render && D ? /* @__PURE__ */ r($t, { text: g, children: k }) : k;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: `flex flex-[1_0_0] items-center min-w-0 overflow-hidden px-4 ${E} ${ie(p)} ${J(e.align)}`,
+      style: {
+        ...ae(e),
+        ...z
+      },
+      children: w
+    }
+  );
+}, rr = ({
+  columns: e,
+  data: l,
+  loading: c = !1,
+  error: p = !1,
+  errorTitle: E = "Data unavailable",
+  errorSubTitle: b = "There was an issue retrieving the data. Please try again.",
+  emptyTitle: g = "No data",
+  emptySubTitle: k = "",
+  bordered: m = !1,
+  showHeader: T = !0,
+  rowKey: D = "key",
+  scrollHeight: z,
+  size: w = "small",
+  rowDensity: N = "default",
+  layout: X = "auto",
+  headerVariant: q = "inline",
+  rowClassName: A,
+  rowVariant: B,
+  onRow: F,
+  onClickRow: y,
+  selectedRowKey: M,
+  scrollSelectedIntoView: K = !0,
+  rowSelection: W,
+  pagination: f,
+  className: U = "",
+  style: Q,
+  stickyHeaderTop: be,
+  scrollX: Y = !1,
+  rowSection: ve,
+  renderSectionDivider: ge,
+  onVisibleOrderChange: me,
+  virtual: rt = !1,
+  virtualRowHeightEstimate: nt,
+  virtualScrollElement: oe = null
+}) => {
+  const ee = N === "compact" ? "py-1.5" : "py-3", [_, lt] = ne(null), ce = j(null), de = j(null), ye = j(null), $e = j(/* @__PURE__ */ new Map()), it = je(
+    (t, n) => {
+      n ? $e.current.set(t, n) : $e.current.delete(t);
+    },
+    []
+  ), G = bt(), [at, Se] = ne(0), H = rt && q === "detached", st = nt ?? It, [ot, ct] = ne(null), dt = je((t) => {
+    de.current = t, t && ct((n) => n === t ? n : t);
+  }, []), ke = H ? oe ?? ot : null, we = !(H && oe), P = q === "detached" && be !== void 0 && T && !z && (!H || !we), ze = M != null, [Ne, Me] = ne(0);
+  le(() => {
+    const t = ce.current;
+    if (!t || !P || !ze || typeof ResizeObserver > "u") {
+      Me(0);
+      return;
+    }
+    const n = new ResizeObserver((h) => {
+      var x, a;
+      const s = h[0], $ = ((a = (x = s == null ? void 0 : s.borderBoxSize) == null ? void 0 : x[0]) == null ? void 0 : a.blockSize) ?? (s == null ? void 0 : s.contentRect.height) ?? 0;
+      Me(
+        (o) => Math.abs(o - $) < 1 ? o : $
+      );
+    });
+    return n.observe(t), () => n.disconnect();
+  }, [P, ze]);
+  const ft = P ? (be ?? 0) + Ne : void 0, { sortedData: O, sectionDividers: Ce } = Ae(() => {
+    const t = (x) => {
+      if (!_) return x;
+      const a = e.find((d) => d.key === _.key);
+      if (!a) return x;
+      if (typeof a.sorter == "function") {
+        const d = [...x].sort(a.sorter);
+        return _.direction === "asc" ? d : d.reverse();
+      }
+      const o = a.dataIndex ?? _.key;
+      return [...x].sort((d, v) => {
+        const i = d[o], R = v[o];
+        return i < R ? _.direction === "asc" ? -1 : 1 : i > R ? _.direction === "asc" ? 1 : -1 : 0;
+      });
+    };
+    if (!ve)
+      return {
+        sortedData: t(l),
+        sectionDividers: /* @__PURE__ */ new Map()
+      };
+    const n = [], h = /* @__PURE__ */ new Map();
+    for (const x of l) {
+      const a = ve(x);
+      let o = h.get(a);
+      o === void 0 && (o = n.length, h.set(a, o), n.push({ key: a, records: [] })), n[o].records.push(x);
+    }
+    const s = [], $ = /* @__PURE__ */ new Map();
+    for (const x of n) {
+      const a = t(x.records);
+      $.set(s.length, { key: x.key, records: a }), s.push(...a);
+    }
+    return { sortedData: s, sectionDividers: $ };
+  }, [l, _, e, ve]), Oe = (t) => {
+    lt((n) => (n == null ? void 0 : n.key) === t ? n.direction === "asc" ? { key: t, direction: "desc" } : null : { key: t, direction: "asc" });
+  }, Ee = (t, n) => typeof D == "function" ? D(t) : String(t[D] ?? n), Le = typeof D == "function" ? null : D, We = j(void 0), fe = j(void 0);
+  le(() => {
+    if (!me)
+      return;
+    fe.current ?? (fe.current = { ids: /* @__PURE__ */ new WeakMap(), next: 0 });
+    const t = Ct(O, D, fe.current), n = We.current;
+    n && wt(n, t) || (We.current = t, me(O));
+  }, [O, Le, me]);
+  const V = Math.min(at, Math.max(0, O.length - 1)), L = Ae(() => {
+    if (M == null)
+      return -1;
+    const t = String(M);
+    return O.findIndex((n, h) => Ee(n, h) === t);
+  }, [M, O, Le]);
+  le(() => {
+    L >= 0 && Se(L);
+  }, [L]);
+  const _e = j(void 0);
+  le(() => {
+    if (M == null) {
+      _e.current = void 0;
+      return;
+    }
+    if (!K || L < 0)
+      return;
+    const t = _e.current;
+    if (t && t.key === M && t.index === L || c || p || H && !ke)
+      return;
+    const n = ye.current;
+    if (!n)
+      return;
+    const h = P && Ne === 0, s = (i) => n.querySelector(
+      `[data-table-id="${G}"][data-row-index="${i}"]`
+    ), $ = (i) => {
+      const R = de.current, I = oe, u = R == null ? void 0 : R.scrollLeft, Z = I == null ? void 0 : I.scrollLeft;
+      i.scrollIntoView({ block: "nearest", inline: "nearest" }), R && u !== void 0 && (R.scrollLeft = u), I && Z !== void 0 && (I.scrollLeft = Z), h || (_e.current = { key: M, index: L });
+    }, x = s(L);
+    if (x) {
+      $(x);
+      return;
+    }
+    if (!H)
+      return;
+    const a = [...$e.current.values()].find(
+      (i) => L >= i.startIndex && L < i.startIndex + i.count
+    );
+    if (!a)
+      return;
+    a.scrollToIndex(L - a.startIndex);
+    let o = 0, d = 0;
+    const v = () => {
+      const i = s(L);
+      if (i) {
+        $(i);
+        return;
+      }
+      ++d < Dt && (o = requestAnimationFrame(v));
+    };
+    return o = requestAnimationFrame(v), () => cancelAnimationFrame(o);
+  }, [
+    M,
+    L,
+    H,
+    ke,
+    oe,
+    P,
+    Ne,
+    c,
+    p,
+    G,
+    K
+  ]);
+  const Re = j(null), Be = (t, n) => {
+    Re.current = t, Se(Math.min(Math.max(0, n), O.length - 1));
+  };
+  Qe(() => {
+    const t = Re.current;
+    if (!t)
+      return;
+    Re.current = null;
+    const n = t.getRootNode(), s = ((a) => n.querySelector(
+      `[data-table-id="${G}"][data-row-index="${a}"]`
+    ))(V);
+    if (s) {
+      s.focus();
+      return;
+    }
+    const $ = n.querySelectorAll(
+      `[data-table-id="${G}"][data-row-index]`
+    ), x = V > 0 ? $[$.length - 1] : $[0];
+    x && (Se(Number(x.dataset.rowIndex)), x.focus());
+  }, [V, G]);
+  const Fe = (t, n) => (h) => {
+    const s = { ArrowDown: 1, ArrowUp: -1 }[h.key];
+    if (s !== void 0) {
+      h.preventDefault(), Be(h.currentTarget, t + s);
+      return;
+    }
+    if (!H && (h.key === "Home" || h.key === "End")) {
+      h.preventDefault(), Be(h.currentTarget, h.key === "Home" ? 0 : O.length - 1);
+      return;
+    }
+    n && St(h, n, "enter");
+  };
+  if (q === "detached") {
+    const t = Y ? _t(e) : 0, n = Y ? { minWidth: t } : {}, h = {
+      border: "1px solid var(--malachite-card-border, #e8e8e8)",
+      borderRadius: te,
+      overflow: "hidden",
+      flexShrink: 0,
+      ...n
+    }, s = (a, o, d = !1, v = !1, i, R = V) => {
+      const I = Ee(a, o), u = (F == null ? void 0 : F(a, o)) || {}, Z = B == null ? void 0 : B(a, o), he = o === L, ue = y || u.onClick ? () => {
+        var S;
+        y == null || y(a, o), (S = u.onClick) == null || S.call(u, a, o);
+      } : void 0, Ie = !!ue, ut = d ? {} : Je;
+      return /* @__PURE__ */ r(
+        "div",
+        {
+          ref: i == null ? void 0 : i.measureRef,
+          "data-index": i == null ? void 0 : i.index,
+          "data-table-id": G,
+          "data-row-index": o,
+          "aria-current": he ? "true" : void 0,
+          tabIndex: Ie ? o === R ? 0 : -1 : void 0,
+          onKeyDown: Ie ? Fe(o, ue) : void 0,
+          className: `
+                        group bg-[var(--malachite-table-row-background,#fff)] flex min-h-10 items-stretch relative w-full
+                        ${Ie ? `cursor-pointer hover:bg-[var(--malachite-table-row-hover-background,#fafafa)] ${Ue}` : ""}
+                        ${(A == null ? void 0 : A(a, o)) || ""}
+                    `,
+          style: {
+            ...ut,
+            ...n,
+            scrollMarginTop: ft,
+            // Echo the card's clip, or it cuts the accent bar's end into a stub.
+            ...v ? {
+              borderTopLeftRadius: te,
+              borderTopRightRadius: te
+            } : {},
+            ...d ? {
+              borderBottomLeftRadius: te,
+              borderBottomRightRadius: te
+            } : {},
+            // Set unconditionally it would beat `hover:bg-*` on every row.
+            ...he || Z ? {
+              backgroundColor: Z ? `var(--malachite-table-row-variant-${Z}-background)` : "var(--malachite-table-row-background, #fff)"
+            } : {},
+            ...he ? {
+              // backgroundImage: as a colour the tint would composite against
+              // the card behind the row.
+              backgroundImage: `linear-gradient(${pe}, ${pe})`,
+              // Inset box-shadow, not `ring-*` — see the classic cell.
+              boxShadow: `inset 2px 0 0 ${Ve}`
+            } : {}
+          },
+          onClick: ue ? (S) => {
+            He(S) || ue();
+          } : void 0,
+          onDoubleClick: u.onDoubleClick ? () => {
+            var S;
+            return (S = u.onDoubleClick) == null ? void 0 : S.call(u, a, o);
+          } : void 0,
+          onContextMenu: u.onContextMenu ? () => {
+            var S;
+            return (S = u.onContextMenu) == null ? void 0 : S.call(u, a, o);
+          } : void 0,
+          onMouseEnter: u.onMouseEnter ? () => {
+            var S;
+            return (S = u.onMouseEnter) == null ? void 0 : S.call(u, a, o);
+          } : void 0,
+          onMouseLeave: u.onMouseLeave ? () => {
+            var S;
+            return (S = u.onMouseLeave) == null ? void 0 : S.call(u, a, o);
+          } : void 0,
+          children: e.map((S) => /* @__PURE__ */ r(
+            Ut,
+            {
+              column: S,
+              record: a,
+              paddingYClass: ee,
+              index: o,
+              size: w,
+              isSelected: he
+            },
+            S.key
+          ))
+        },
+        I
+      );
+    }, $ = (a, o = !1) => /* @__PURE__ */ r(
+      "div",
+      {
+        className: "bg-white flex min-h-10 items-stretch w-full",
+        style: { ...o ? {} : Je, ...n },
+        children: e.map((d) => (d.title === "" || d.title == null) && d.width !== void 0 ? /* @__PURE__ */ r(
+          "div",
+          {
+            className: `flex items-center ${et(d.align)} shrink-0 overflow-clip px-4 ${ee}`,
+            style: De(d),
+            children: /* @__PURE__ */ r("div", { className: "h-3 bg-gray-200 rounded animate-pulse w-2/5" })
+          },
+          d.key
+        ) : /* @__PURE__ */ r(
+          "div",
+          {
+            className: `flex flex-[1_0_0] items-center ${J(d.align)} min-w-0 overflow-clip px-4 ${ee}`,
+            style: ae(d),
+            children: /* @__PURE__ */ r("div", { className: "h-3 bg-gray-200 rounded animate-pulse w-3/5" })
+          },
+          d.key
+        ))
+      },
+      `skeleton-${a}`
+    ), x = T ? /* @__PURE__ */ r("div", { className: "flex min-h-10 items-stretch w-full", style: n, children: e.map((a) => /* @__PURE__ */ r(
+      At,
+      {
+        column: a,
+        sortDirection: (_ == null ? void 0 : _.key) === a.key ? _.direction : null,
+        onSort: a.sorter ? () => Oe(a.key) : void 0
+      },
+      a.key
+    )) }) : null;
+    return /* @__PURE__ */ C(
+      "div",
+      {
+        ref: ye,
+        className: `w-full ${U}`,
+        style: { ...Te, ...Q },
+        children: [
+          /* @__PURE__ */ C(
+            "div",
+            {
+              className: `bg-[var(--malachite-table-background,#f7f7f7)] flex flex-col items-start ${P ? "" : "overflow-clip"} p-[4px] relative rounded-xl w-full`,
+              children: [
+                T && /* @__PURE__ */ C(
+                  "div",
+                  {
+                    ref: ce,
+                    onScroll: Y ? () => qe(ce.current, de.current) : void 0,
+                    style: {
+                      ...P ? {
+                        position: "sticky",
+                        top: be,
+                        zIndex: 8,
+                        backgroundColor: "var(--malachite-table-header-background, #f7f7f7)",
+                        marginInline: -re,
+                        width: `calc(100% + ${re * 2}px)`,
+                        paddingInline: re,
+                        // Vertically too, or the card's top frame sits above
+                        // the docked header and rows scroll through it.
+                        marginTop: -re,
+                        paddingTop: re
+                      } : { width: "100%" },
+                      ...Y ? { overflowX: "auto", scrollbarWidth: "none" } : {}
+                    },
+                    children: [
+                      P && /* @__PURE__ */ r(Ot, {}),
+                      x
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    ref: dt,
+                    onScroll: Y ? () => qe(de.current, ce.current) : void 0,
+                    className: `flex flex-col items-start ${Y ? "overflow-x-auto" : "overflow-x-clip"} ${we ? "overflow-y-auto" : "overflow-y-visible"} w-full`,
+                    style: {
+                      // Firefox + modern Chromium only; older Webkit keeps its default.
+                      scrollbarWidth: "thin",
+                      scrollbarColor: "var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent",
+                      // With an external virtual scroller the body is overflow-visible and
+                      // a bounded box would overlap content below it.
+                      ...z && we ? {
+                        maxHeight: Wt(
+                          z,
+                          !!f
+                        )
+                      } : {}
+                    },
+                    children: p ? /* @__PURE__ */ r("div", { className: "flex flex-col w-full", style: h, children: /* @__PURE__ */ C("div", { className: "flex flex-col items-center justify-center bg-white w-full py-12", children: [
+                      /* @__PURE__ */ r("div", { className: "text-[var(--malachite-text-secondary)] text-[14px] font-medium mb-1", children: E }),
+                      /* @__PURE__ */ r("div", { className: "text-[var(--malachite-text-secondary)] text-[13px]", children: b })
+                    ] }) }) : c ? /* @__PURE__ */ r("div", { className: "flex flex-col w-full", style: h, children: (() => {
+                      const a = f != null && f.pageSize ? Math.min(f.pageSize, 10) : 5;
+                      return Array.from({ length: a }).map(
+                        (o, d) => $(d, d === a - 1)
+                      );
+                    })() }) : O.length === 0 ? /* @__PURE__ */ r("div", { className: "flex flex-col w-full", style: h, children: /* @__PURE__ */ C("div", { className: "flex flex-col items-center justify-center bg-white w-full py-12", children: [
+                      /* @__PURE__ */ r("div", { className: "text-[var(--malachite-text-secondary)] text-[14px] font-medium", children: g }),
+                      k && /* @__PURE__ */ r("div", { className: "text-[var(--malachite-text-secondary)] text-[13px] mt-1", children: k })
+                    ] }) }) : (() => {
+                      const a = (d, v, i) => H ? /* @__PURE__ */ r(
+                        Lt,
+                        {
+                          cardKey: i,
+                          records: d,
+                          startIndex: v,
+                          scrollElement: ke,
+                          estimateRowHeight: st,
+                          style: h,
+                          renderRow: s,
+                          registerHandle: it,
+                          rovingIndex: V
+                        },
+                        `section-card-${i}`
+                      ) : /* @__PURE__ */ r(
+                        "div",
+                        {
+                          className: "flex flex-col w-full",
+                          style: h,
+                          children: d.map(
+                            (R, I) => s(
+                              R,
+                              v + I,
+                              I === d.length - 1,
+                              I === 0
+                            )
+                          )
+                        },
+                        `section-card-${i}`
+                      );
+                      if (Ce.size === 0)
+                        return a(O, 0, "all");
+                      const o = [...Ce.keys()].sort((d, v) => d - v);
+                      return o.map((d, v) => {
+                        const i = Ce.get(d);
+                        if (!i)
+                          return null;
+                        const R = v + 1 < o.length ? o[v + 1] : O.length, I = O.slice(d, R), u = ge == null ? void 0 : ge(
+                          i.key,
+                          i.records
+                        );
+                        return /* @__PURE__ */ C(xt.Fragment, { children: [
+                          u != null ? /* @__PURE__ */ r(
+                            "div",
+                            {
+                              className: "table-section-divider",
+                              style: n,
+                              children: u
+                            }
+                          ) : null,
+                          a(I, d, i.key)
+                        ] }, `section-${i.key}`);
+                      });
+                    })()
+                  }
+                )
+              ]
+            }
+          ),
+          f && !c && /* @__PURE__ */ r(
+            Pe,
+            {
+              current: f.current ?? 1,
+              pageSize: f.pageSize ?? 10,
+              total: f.total ?? 0,
+              showSizeChanger: f.showSizeChanger,
+              showQuickJumper: f.showQuickJumper,
+              showTotal: f.showTotal,
+              pageSizeOptions: f.pageSizeOptions,
+              onChange: f.onChange,
+              onShowSizeChange: f.onShowSizeChange
+            }
+          )
+        ]
+      }
+    );
+  }
+  const ht = (t) => {
+    const n = t.sorter, s = (_ == null ? void 0 : _.key) === t.key ? _ == null ? void 0 : _.direction : null, $ = /* @__PURE__ */ C("div", { className: `flex items-center gap-2 ${J(t.align)}`, children: [
+      /* @__PURE__ */ r("span", { children: t.title }),
+      t.info && /* @__PURE__ */ r(xe, { info: t.info }),
+      n && /* @__PURE__ */ C("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ r(
+          vt,
+          {
+            size: 12,
+            className: s === "asc" ? "text-blue-600" : "text-gray-400"
+          }
+        ),
+        /* @__PURE__ */ r(
+          Ye,
+          {
+            size: 12,
+            className: `-mt-1 ${s === "desc" ? "text-blue-600" : "text-gray-400"}`
+          }
+        )
+      ] })
+    ] });
+    return /* @__PURE__ */ r(
+      "th",
+      {
+        className: `
+                    table-header table-cell px-4 py-3 font-semibold border-0 first:rounded-tl-lg last:rounded-tr-lg
+                    ${ie(w)}
+                    ${se(t.align)}
+                `,
+        style: { width: t.width },
+        "aria-sort": n ? Bt(s) : void 0,
+        children: n ? /* @__PURE__ */ r(
+          "button",
+          {
+            ...tt(t.title, () => Oe(t.key)),
+            className: `flex w-full items-center ${J(t.align)} cursor-pointer hover:opacity-80 appearance-none bg-transparent border-0 p-0 font-semibold text-inherit ${se(t.align)}`,
+            children: $
+          }
+        ) : $
+      },
+      t.key
+    );
+  };
+  return p ? /* @__PURE__ */ r("div", { className: "w-full", style: { ...Te, ...Q }, children: /* @__PURE__ */ r(
+    "div",
+    {
+      className: "overflow-x-auto",
+      style: {
+        ...z ? { maxHeight: z } : {}
+      },
+      children: /* @__PURE__ */ C("table", { className: "w-full border-collapse rounded-lg overflow-hidden", children: [
+        T && /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: e.map((t) => /* @__PURE__ */ r(
+          "th",
+          {
+            className: `
+                                                    table-header table-cell px-4 py-3 font-semibold border-0 first:rounded-tl-lg last:rounded-tr-lg
+                                                    ${m ? "table-cell-bordered table-cell-bordered-top" : ""}
+                                                    ${m && t === e[0] ? "table-cell-bordered-left" : ""}
+                                                    ${m && t === e[e.length - 1] ? "table-cell-bordered-right" : ""}
+                                                    ${ie(w)}
+                                                    ${se(t.align)}
+                                                `,
+            style: { width: t.width },
+            children: /* @__PURE__ */ C(
+              "div",
+              {
+                className: `flex items-center gap-2 ${J(t.align)}`,
+                children: [
+                  /* @__PURE__ */ r("span", { children: t.title }),
+                  t.info && /* @__PURE__ */ r(xe, { info: t.info })
+                ]
+              }
+            )
+          },
+          t.key
+        )) }) }),
+        /* @__PURE__ */ r("tbody", { children: /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r(
+          "td",
+          {
+            colSpan: e.length + (W ? 1 : 0),
+            className: "px-4 py-12 text-center",
+            children: /* @__PURE__ */ C("div", { className: "flex flex-col items-center justify-center", children: [
+              /* @__PURE__ */ r("div", { className: "table-error-icon w-12 h-12 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ r(mt, { size: 24 }) }),
+              /* @__PURE__ */ r("div", { className: "table-error-title text-lg font-semibold mb-2", children: E }),
+              /* @__PURE__ */ r("div", { className: "table-error-subtitle text-sm", children: b })
+            ] })
+          }
+        ) }) })
+      ] })
+    }
+  ) }) : /* @__PURE__ */ C(
+    "div",
+    {
+      ref: ye,
+      className: `w-full ${U}`,
+      style: { ...Te, ...Q },
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: `overflow-hidden rounded-lg ${m ? "table-bordered-container" : "table-container-border"}`,
+            "data-bordered": m ? "true" : "false",
+            children: /* @__PURE__ */ r(
+              "div",
+              {
+                className: "overflow-x-auto",
+                style: {
+                  ...z ? { maxHeight: z } : {}
+                },
+                children: /* @__PURE__ */ C(
+                  "table",
+                  {
+                    className: `w-full ${X === "fixed" || e.some((t) => t.width) ? "table-fixed" : "table-auto"} ${m ? "border-separate table-bordered" : "border-collapse"} rounded-lg overflow-hidden`,
+                    style: { borderSpacing: "0" },
+                    children: [
+                      T && /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { children: e.map((t) => ht(t)) }) }),
+                      /* @__PURE__ */ r("tbody", { children: c ? Array.from({ length: 5 }).map((t, n) => /* @__PURE__ */ r(
+                        "tr",
+                        {
+                          className: `table-row ${m ? "table-row-bordered" : ""}`,
+                          children: e.map((h) => /* @__PURE__ */ r(
+                            "td",
+                            {
+                              className: `table-cell px-4 ${ee} text-left ${ie(w)}`,
+                              style: { width: h.width },
+                              children: /* @__PURE__ */ r("div", { className: "h-4 bg-gray-200 rounded animate-pulse" })
+                            },
+                            h.key
+                          ))
+                        },
+                        n
+                      )) : O.length === 0 ? /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r(
+                        "td",
+                        {
+                          colSpan: e.length + (W ? 1 : 0),
+                          className: "px-4 py-12 text-center",
+                          children: /* @__PURE__ */ C("div", { className: "flex flex-col items-center justify-center", children: [
+                            /* @__PURE__ */ r("div", { className: "text-[var(--malachite-text-secondary)] text-[14px] font-medium", children: g }),
+                            k && /* @__PURE__ */ r("div", { className: "text-[var(--malachite-text-secondary)] text-[13px] mt-1", children: k })
+                          ] })
+                        }
+                      ) }) : O.map((t, n) => {
+                        const h = Ee(t, n), s = (F == null ? void 0 : F(t, n)) || {}, $ = B == null ? void 0 : B(t, n), x = n === 0, a = n === l.length - 1, o = n === L, d = $ ? `var(--malachite-table-row-variant-${$}-background)` : void 0, v = y || s.onClick ? () => {
+                          var i;
+                          y == null || y(t, n), (i = s.onClick) == null || i.call(s, t, n);
+                        } : void 0;
+                        return (
+                          // Keeps `row` semantics: `role="button"` would strip the table
+                          // structure from screen readers.
+                          /* @__PURE__ */ r(
+                            "tr",
+                            {
+                              "data-table-id": G,
+                              "data-row-index": n,
+                              "aria-current": o ? "true" : void 0,
+                              tabIndex: v ? n === V ? 0 : -1 : void 0,
+                              onKeyDown: v ? Fe(n, v) : void 0,
+                              className: `
+                                                ${m ? "table-row-bordered" : `table-row ${o ? "" : "hover:opacity-80"}`}
+                                                ${(A == null ? void 0 : A(t, n)) || ""}
+                                                ${v ? `cursor-pointer ${Ue}` : ""}
+                                            `,
+                              onClick: v ? (i) => {
+                                He(i) || v();
+                              } : void 0,
+                              onDoubleClick: s.onDoubleClick ? () => {
+                                var i;
+                                return (i = s.onDoubleClick) == null ? void 0 : i.call(s, t, n);
+                              } : void 0,
+                              onContextMenu: s.onContextMenu ? () => {
+                                var i;
+                                return (i = s.onContextMenu) == null ? void 0 : i.call(s, t, n);
+                              } : void 0,
+                              onMouseEnter: s.onMouseEnter ? () => {
+                                var i;
+                                return (i = s.onMouseEnter) == null ? void 0 : i.call(s, t, n);
+                              } : void 0,
+                              onMouseLeave: s.onMouseLeave ? () => {
+                                var i;
+                                return (i = s.onMouseLeave) == null ? void 0 : i.call(s, t, n);
+                              } : void 0,
+                              children: e.map((i) => {
+                                const R = i === e[0], I = i === e[e.length - 1];
+                                return /* @__PURE__ */ r(
+                                  jt,
+                                  {
+                                    column: i,
+                                    record: t,
+                                    index: n,
+                                    size: w,
+                                    paddingYClass: ee,
+                                    bordered: m,
+                                    isFirstRow: x,
+                                    isLastRow: a,
+                                    isFirstColumn: R,
+                                    isLastColumn: I,
+                                    variantBackground: d,
+                                    isSelected: o,
+                                    showSelectedAccent: o && R
+                                  },
+                                  i.key
+                                );
+                              })
+                            },
+                            h
+                          )
+                        );
+                      }) })
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ),
+        f && !c && /* @__PURE__ */ r(
+          Pe,
+          {
+            current: f.current ?? 1,
+            pageSize: f.pageSize ?? 10,
+            total: f.total ?? 0,
+            showSizeChanger: f.showSizeChanger,
+            showQuickJumper: f.showQuickJumper,
+            showTotal: f.showTotal,
+            pageSizeOptions: f.pageSizeOptions,
+            onChange: f.onChange,
+            onShowSizeChange: f.onShowSizeChange
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  rr as default
+};
+//# sourceMappingURL=Table.js.map