@reportportal/ui-kit 0.0.1-alpha.151 → 0.0.1-alpha.152

package/dist/table-2c659767.js

@@ -0,0 +1,936 @@
+import { jsx as h, jsxs as F, Fragment as _t } from "react/jsx-runtime";
+import { useMemo as ie, useState as $, useCallback as j, useEffect as G, useRef as S, forwardRef as gt } from "react";
+import { Resizable as wt } from "react-resizable";
+import { c as be } from "./bind-06a7ff84.js";
+import { c as vt, b as Me, a as We, S as yt } from "./resizeColumn-d4107941.js";
+import { C as He } from "./checkbox-ed6cc375.js";
+import { Tooltip as mt } from "./tooltip.js";
+import { createPortal as kt } from "react-dom";
+import { i as Et } from "./isEmpty-ccacb5ff.js";
+const Se = (t) => typeof t == "string", Lt = "_table_1jhbw_1", Tt = "_resizable_1jhbw_67", zt = "_selectable_1jhbw_84", Nt = "_expanded_1jhbw_80", jt = "_label_1jhbw_348", At = {
+  table: Lt,
+  "fixed-header": "_fixed-header_1jhbw_10",
+  "external-scroll-container": "_external-scroll-container_1jhbw_14",
+  "horizontally-scrollable-container": "_horizontally-scrollable-container_1jhbw_21",
+  "table-header": "_table-header_1jhbw_26",
+  "sticky-header": "_sticky-header_1jhbw_34",
+  "pinned-header": "_pinned-header_1jhbw_44",
+  "horizontally-scrollable": "_horizontally-scrollable_1jhbw_21",
+  resizable: Tt,
+  "resizable-column": "_resizable-column_1jhbw_67",
+  "table-row": "_table-row_1jhbw_75",
+  "expanded-cell": "_expanded-cell_1jhbw_80",
+  selectable: zt,
+  "row-content-wrapper": "_row-content-wrapper_1jhbw_88",
+  "pinned-column": "_pinned-column_1jhbw_96",
+  "has-scroll": "_has-scroll_1jhbw_96",
+  "table-row-content": "_table-row-content_1jhbw_99",
+  "expand-cell": "_expand-cell_1jhbw_116",
+  "left-border-accent": "_left-border-accent_1jhbw_119",
+  "size-small": "_size-small_1jhbw_129",
+  "size-large": "_size-large_1jhbw_140",
+  "table-body": "_table-body_1jhbw_152",
+  "scrollable-body": "_scrollable-body_1jhbw_158",
+  "table-header-cell": "_table-header-cell_1jhbw_222",
+  "table-cell": "_table-cell_1jhbw_223",
+  "action-menu-cell": "_action-menu-cell_1jhbw_229",
+  "checkbox-cell": "_checkbox-cell_1jhbw_257",
+  "expand-all-tooltip-wrapper": "_expand-all-tooltip-wrapper_1jhbw_300",
+  "expand-all-tooltip-content": "_expand-all-tooltip-content_1jhbw_309",
+  "expand-icon": "_expand-icon_1jhbw_318",
+  expanded: Nt,
+  "primary-cell": "_primary-cell_1jhbw_327",
+  label: jt,
+  "sortable-cell": "_sortable-cell_1jhbw_362",
+  "align-right": "_align-right_1jhbw_365",
+  "align-center": "_align-center_1jhbw_371"
+}, Fe = "asc", q = 32, Ce = 100, $t = 48, fe = 48, xt = (t) => t.toLowerCase() === Fe, Mt = (t) => t.map((i) => i.key), C = (t) => "primary" in t && t.primary === !0, Wt = (t) => {
+  var s;
+  return `size-${((s = t.rowConfigs) == null ? void 0 : s.size) ?? "default"}`;
+}, ue = (t) => Se(t) ? t : `${t}px`, Ht = (t, i, s, l, d) => {
+  let c = 0;
+  l && (c += q), d && (c += q);
+  for (let f = 0; f < t; f++) {
+    const w = i[f];
+    if (C(w)) {
+      const o = s.current.get(w.key) || Ce;
+      c += o;
+    } else {
+      const o = w, p = Se(o.width) ? parseInt(o.width, 10) || 0 : o.width;
+      c += p;
+    }
+  }
+  return c;
+}, re = (t, i, s, l, d, c, f) => {
+  const w = {};
+  if (!C(t)) {
+    const o = t;
+    w.textAlign = o.align;
+  }
+  if (i && s !== void 0) {
+    const o = Ht(
+      s,
+      l,
+      d,
+      c,
+      f
+    );
+    w.left = `${o}px`;
+  }
+  return w;
+}, Pe = (t, i, s, l, d, c = !1, f, w = !1) => {
+  const o = [];
+  s && o.push(`${q}px`), c && l && o.push(`${q}px`);
+  const p = (a) => {
+    if ((f == null ? void 0 : f[a.key]) !== void 0) {
+      o.push(`${f[a.key]}px`);
+      return;
+    }
+    if (C(a)) {
+      const b = a;
+      if (w && b.width) {
+        o.push(ue(b.width));
+        return;
+      }
+      const y = b.width ? ue(b.width) : `${Ce}px`;
+      o.push(`minmax(${y}, 1fr)`);
+    } else {
+      const y = ue(a.width);
+      o.push(y);
+    }
+  };
+  return t.forEach(p), i.forEach(p), d && o.push(`${$t}px`), o.join(" ");
+}, Pt = ({
+  primaryColumns: t,
+  fixedColumns: i,
+  pinnedColumnKeys: s
+}) => ie(() => {
+  const l = [], d = [];
+  return t.forEach((c) => {
+    const f = { ...c, primary: !0 };
+    s.includes(c.key) ? l.push(f) : d.push(f);
+  }), i.forEach((c) => {
+    s.includes(c.key) ? l.push(c) : d.push(c);
+  }), {
+    pinnedColumns: l,
+    scrollableColumns: d
+  };
+}, [t, i, s]), Bt = () => {
+  const [t, i] = $(null), [s, l] = $(null), d = j((o) => {
+    i(o);
+  }, []), c = j(() => {
+    i(null);
+  }, []), f = j((o) => {
+    l(o);
+  }, []), w = j(() => {
+    l(null);
+  }, []);
+  return {
+    hoveredColumn: t,
+    hoveredRow: s,
+    handleColumnMouseEnter: d,
+    handleColumnMouseLeave: c,
+    handleRowMouseEnter: f,
+    handleRowMouseLeave: w
+  };
+}, Gt = ({
+  primaryColumns: t,
+  fixedColumns: i,
+  expandedRowIds: s,
+  onToggleRowExpansion: l
+}) => {
+  const [d, c] = $(/* @__PURE__ */ new Set());
+  G(() => {
+    const o = [
+      ...t.map((a) => a.key),
+      ...i.map((a) => a.key)
+    ], p = /* @__PURE__ */ new Set();
+    s.forEach((a) => {
+      o.forEach((b) => {
+        p.add(`${a}-${b}`);
+      });
+    }), c((a) => {
+      if (a.size === p.size) {
+        let b = !0;
+        if (a.forEach((y) => {
+          p.has(y) || (b = !1);
+        }), b)
+          return a;
+      }
+      return p;
+    });
+  }, [s, t, i]);
+  const f = j(
+    (o) => {
+      const p = new Set(d), a = s.includes(o), b = [
+        ...t.map((y) => y.key),
+        ...i.map((y) => y.key)
+      ];
+      a ? b.forEach((y) => {
+        const L = `${o}-${y}`;
+        p.delete(L);
+      }) : b.forEach((y) => {
+        const L = `${o}-${y}`;
+        p.add(L);
+      }), c(p), l(o);
+    },
+    [d, s, t, i, l]
+  ), w = j(
+    (o, p) => {
+      const a = `${o}-${p}`;
+      return d.has(a);
+    },
+    [d]
+  );
+  return {
+    expandedCells: d,
+    handleToggleRowExpansion: f,
+    isCellExpanded: w
+  };
+}, St = () => {
+  const t = S(/* @__PURE__ */ new Map()), i = j(
+    (s) => (l) => {
+      if (!l)
+        return;
+      const d = l.getBoundingClientRect().width;
+      d > 0 && t.current.set(s, d);
+    },
+    []
+  );
+  return {
+    columnWidthsRef: t,
+    setCellRef: i
+  };
+}, Ft = ({
+  enabled: t = !1,
+  minWidth: i = 50,
+  maxWidth: s = 500,
+  columnWidthsRef: l,
+  onColumnResize: d
+}) => {
+  const [c, f] = $({}), w = j(() => {
+    if (!t || Object.keys(c).length > 0 || !l)
+      return;
+    const a = {};
+    l.current.forEach((b, y) => {
+      a[y] = b;
+    }), f(a);
+  }, [t, c, l]), o = j(
+    (a) => (b, { size: y }) => {
+      if (!t)
+        return;
+      const L = Math.min(s, Math.max(i, y.width));
+      f((v) => ({ ...v, [a]: L }));
+    },
+    [t, i, s]
+  ), p = j(
+    (a) => () => {
+      !t || !c[a] || d == null || d(a, c[a]);
+    },
+    [t, c, d]
+  );
+  return {
+    columnWidths: c,
+    handleResize: o,
+    handleResizeStop: p,
+    handleResizeStart: w
+  };
+}, Ct = (t, i, s, l, d, c, f, w) => ie(() => {
+  if (!t)
+    return {
+      visible: !1,
+      position: { top: 0, left: 0 },
+      size: { width: 0, height: 0 }
+    };
+  if (!(d + t.clientWidth < f))
+    return {
+      visible: !1,
+      position: { top: 0, left: 0 },
+      size: { width: 0, height: 0 }
+    };
+  const p = t.getBoundingClientRect(), a = (i == null ? void 0 : i.offsetHeight) || 0, b = s == null ? void 0 : s.getBoundingClientRect(), y = Math.min(
+    p.bottom,
+    (b == null ? void 0 : b.bottom) || Number.MAX_SAFE_INTEGER
+  );
+  let L;
+  l && s && b ? L = b.top - p.top + a : L = a;
+  const v = p.top + L, k = t.scrollWidth > t.clientWidth ? t.offsetHeight - t.clientHeight : 0, N = y - v - k, H = t.scrollHeight > t.clientHeight ? t.offsetWidth - t.clientWidth : 0, T = p.right - fe - H;
+  return {
+    visible: !0,
+    position: {
+      top: v,
+      left: T
+    },
+    size: {
+      width: fe,
+      height: N
+    }
+  };
+}, [
+  t,
+  i,
+  s,
+  l,
+  d,
+  c,
+  f,
+  w
+]), Ot = (t, i, s, l, d, c, f, w) => ie(() => {
+  if (!t)
+    return {
+      visible: !1,
+      position: { top: 0, left: 0 },
+      size: { width: 0, height: 0 }
+    };
+  if (!(i > 0))
+    return {
+      visible: !1,
+      position: { top: 0, left: 0 },
+      size: { width: 0, height: 0 }
+    };
+  const p = t.querySelector('[data-row-index="0"]');
+  if (!p)
+    return {
+      visible: !1,
+      position: { top: 0, left: 0 },
+      size: { width: 0, height: 0 }
+    };
+  const a = Array.from(p.querySelectorAll("[data-pinned-index]"));
+  if (a.length === 0)
+    return {
+      visible: !1,
+      position: { top: 0, left: 0 },
+      size: { width: 0, height: 0 }
+    };
+  const b = Math.max(
+    ...a.map(
+      (X) => parseInt(X.getAttribute("data-pinned-index") || "-1", 10)
+    )
+  );
+  if (b < 0)
+    return {
+      visible: !1,
+      position: { top: 0, left: 0 },
+      size: { width: 0, height: 0 }
+    };
+  const y = a.find(
+    (X) => parseInt(X.getAttribute("data-pinned-index") || "-1", 10) === b
+  );
+  if (!y)
+    return {
+      visible: !1,
+      position: { top: 0, left: 0 },
+      size: { width: 0, height: 0 }
+    };
+  const L = y.getBoundingClientRect(), v = t.getBoundingClientRect(), D = (s == null ? void 0 : s.offsetHeight) || 0, k = l == null ? void 0 : l.getBoundingClientRect(), N = L.right, U = Math.min(
+    v.bottom,
+    (k == null ? void 0 : k.bottom) || Number.MAX_SAFE_INTEGER
+  );
+  let H;
+  d && l && k ? H = k.top - v.top + D : H = D;
+  const T = v.top + H, Q = t.scrollWidth > t.clientWidth ? t.offsetHeight - t.clientHeight : 0, oe = U - T - Q;
+  return {
+    visible: !0,
+    position: {
+      top: T,
+      left: N
+    },
+    size: {
+      width: fe,
+      height: oe
+    }
+  };
+}, [
+  t,
+  i,
+  s,
+  l,
+  d,
+  c,
+  f,
+  w
+]), qt = {
+  "resize-handle": "_resize-handle_15uk3_1"
+}, Dt = be.bind(qt), Ut = gt(
+  (t, i) => /* @__PURE__ */ h("div", { ref: i, className: Dt("resize-handle"), ...t, children: /* @__PURE__ */ h(vt, {}) })
+), Xt = {
+  "gradient-overlay": "_gradient-overlay_hx7m8_1",
+  "direction-right": "_direction-right_hx7m8_5",
+  "direction-left": "_direction-left_hx7m8_13"
+}, Vt = be.bind(Xt), Be = ({
+  portalContainer: t,
+  visible: i,
+  position: s,
+  size: l,
+  direction: d,
+  className: c,
+  dataTestId: f
+}) => {
+  if (!i || !t)
+    return null;
+  const w = {
+    position: "fixed",
+    top: `${s.top}px`,
+    width: `${l.width}px`,
+    height: `${l.height}px`
+  };
+  return s.left !== void 0 && (w.left = `${s.left}px`), s.right !== void 0 && (w.right = `${s.right}px`), kt(
+    /* @__PURE__ */ h(
+      "div",
+      {
+        className: Vt("gradient-overlay", `direction-${d}`, c),
+        style: w,
+        "data-gradient-type": f
+      }
+    ),
+    t
+  );
+}, g = be.bind(At), Ge = ({ column: t }) => {
+  const i = S(null), [s, l] = $(!1);
+  return G(() => {
+    if (i.current) {
+      const d = i.current.offsetWidth, c = i.current.scrollWidth;
+      l(c > d);
+    }
+  }, [t.header]), /* @__PURE__ */ h("span", { ref: i, title: s ? t.header : void 0, children: t.header });
+}, sn = ({
+  data: t,
+  primaryColumn: i,
+  fixedColumns: s,
+  renderRowActions: l,
+  className: d = "",
+  rowClassName: c = "",
+  headerClassName: f = "",
+  bodyClassName: w = "",
+  selectable: o = !1,
+  selectedRowIds: p = [],
+  sortingDirection: a = Fe,
+  sortingColumn: b,
+  sortableColumns: y,
+  isHeaderFixed: L = !1,
+  isHorizontallyScrollable: v = !1,
+  pinnedColumnKeys: D = [],
+  isRowsExpandable: k = !1,
+  expandedRowIds: N = [],
+  isAllExpandedByDefault: U,
+  expandAllTooltip: H,
+  isResizable: T = !1,
+  minColumnWidth: J = 50,
+  maxColumnWidth: Q = 500,
+  isSelectAllCheckboxAlwaysVisible: oe = !1,
+  onChangeSorting: X = () => {
+  },
+  onToggleRowSelection: Oe = () => {
+  },
+  onToggleAllRowsSelection: qe = () => {
+  },
+  onToggleRowExpansion: De = () => {
+  },
+  onToggleAllRowsExpansion: Ue = () => {
+  },
+  onColumnResize: Xe = () => {
+  },
+  externalScrollContainerRef: _,
+  portalContainer: _e = typeof document < "u" ? document.body : null,
+  rightGradientClassName: Ve,
+  pinnedGradientClassName: Ie
+}) => {
+  const Z = ie(
+    () => Array.isArray(i) ? i : [i],
+    [i]
+  ), x = b ?? Z[0], K = y ?? Mt([...Z, ...s]), { pinnedColumns: P, scrollableColumns: R } = Pt({
+    primaryColumns: Z,
+    fixedColumns: s,
+    pinnedColumnKeys: D
+  }), {
+    hoveredColumn: ge,
+    hoveredRow: Ye,
+    handleColumnMouseEnter: we,
+    handleColumnMouseLeave: ve,
+    handleRowMouseEnter: Je,
+    handleRowMouseLeave: Qe
+  } = Bt(), { columnWidthsRef: V, setCellRef: ye } = St(), { handleToggleRowExpansion: Ze, isCellExpanded: me } = Gt({
+    primaryColumns: Z,
+    fixedColumns: s,
+    expandedRowIds: N,
+    onToggleRowExpansion: De
+  }), { columnWidths: ee, handleResize: Ke, handleResizeStop: Re, handleResizeStart: et } = Ft({
+    enabled: T,
+    minWidth: J,
+    maxWidth: Q,
+    columnWidthsRef: V,
+    onColumnResize: Xe
+  }), ke = (e, r) => /* @__PURE__ */ h(
+    wt,
+    {
+      width: ee[e.key] ?? (typeof e.width == "number" ? e.width : J),
+      height: 0,
+      axis: "x",
+      handle: /* @__PURE__ */ h(Ut, {}),
+      onResizeStart: et,
+      onResize: Ke(e.key),
+      onResizeStop: Re(e.key),
+      minConstraints: [J, 0],
+      maxConstraints: [Q, 0],
+      className: g("resizable-column"),
+      children: r
+    },
+    e.key
+  ), z = S(null), B = S(null), tt = S(null), [O, nt] = $(!1), te = j((e) => {
+    const r = B.current;
+    if (r && r.contains(e))
+      return;
+    const n = e.parentElement;
+    if (!n)
+      return;
+    const u = window.getComputedStyle(n), m = parseFloat(u.paddingTop) || 0, E = parseFloat(u.paddingBottom) || 0, M = e.offsetHeight + m + E;
+    e.style.setProperty("--expand-cell-top", `${m}px`), e.style.setProperty("--expand-cell-height", `${M}px`);
+  }, []), [Ee, le] = $(0), [Le, ce] = $(0), [Te, ae] = $(0), [ze, st] = $(0), ne = S(!1), de = S(/* @__PURE__ */ new Set()), I = S(null), he = Ct(
+    z.current,
+    B.current,
+    (_ == null ? void 0 : _.current) instanceof HTMLElement ? _.current : null,
+    O,
+    Ee,
+    Le,
+    Te,
+    ze
+  ), pe = Ot(
+    z.current,
+    Ee,
+    B.current,
+    (_ == null ? void 0 : _.current) instanceof HTMLElement ? _.current : null,
+    O,
+    Le,
+    Te,
+    ze
+  ), Ne = (e) => {
+    K.includes(e) && X({ key: e, direction: a });
+  }, rt = (e) => {
+    Oe(e);
+  }, it = () => {
+    qe();
+  }, ot = () => {
+    Ue();
+  }, je = (e) => K.includes(e) ? (x == null ? void 0 : x.key) === e ? xt(a) ? /* @__PURE__ */ h(We, {}) : /* @__PURE__ */ h(yt, {}) : /* @__PURE__ */ h(We, {}) : null, lt = t.every((e) => p.includes(e.id)), ct = t.some((e) => p.includes(e.id)), Ae = (p == null ? void 0 : p.length) > 0, at = !Et(t), dt = oe && at || Ae, ht = t.every((e) => N.includes(e.id)), pt = U !== void 0 ? U : ht, ut = Pe(
+    P,
+    R,
+    k,
+    o,
+    !!l,
+    !1,
+    T ? ee : void 0,
+    T
+  ), ft = Pe(
+    P,
+    R,
+    k,
+    o,
+    !!l,
+    !0,
+    T ? ee : void 0,
+    T
+  ), $e = /* @__PURE__ */ h("button", { onClick: ot, "aria-label": "Toggle all rows expansion", children: /* @__PURE__ */ h("span", { className: g("expand-icon", { expanded: pt }), children: /* @__PURE__ */ h(Me, {}) }) });
+  return G(() => {
+    if (!(_ != null && _.current) || !z.current || !B.current)
+      return;
+    const e = _.current, r = z.current, n = B.current, u = () => {
+      const E = r.getBoundingClientRect(), A = e.getBoundingClientRect(), M = n.offsetHeight, W = E.top - A.top, Y = E.bottom - A.top, xe = e.scrollTop > 0 && W <= 0 && Y > M;
+      if (nt(xe), xe) {
+        const se = E.left, bt = A.top;
+        n.classList.add(g("pinned-header")), v && (n.style.overflow = "hidden", n.style.overflowX = "hidden"), n.style.left = `${se}px`, n.style.top = `${bt}px`, n.style.width = `${E.width}px`;
+      } else {
+        const se = r.scrollLeft;
+        ne.current = !0, n.classList.remove(g("pinned-header")), v && (n.scrollLeft = 0), n.style.left = "", n.style.top = "", n.style.width = "", v && (n.style.overflow = "", n.style.overflowX = ""), v && se > 0 ? requestAnimationFrame(() => {
+          r.scrollLeft = se, setTimeout(() => {
+            ne.current = !1;
+          }, 0);
+        }) : ne.current = !1;
+      }
+    }, m = requestAnimationFrame(() => {
+      u();
+    });
+    return e.addEventListener("scroll", u), window.addEventListener("resize", u), () => {
+      cancelAnimationFrame(m), e.removeEventListener("scroll", u), window.removeEventListener("resize", u);
+    };
+  }, [_, v]), G(() => {
+    if (!(_ != null && _.current) || !z.current || !B.current || !O)
+      return;
+    const e = _.current, r = z.current, n = B.current, u = () => {
+      const W = r.getBoundingClientRect(), Y = e.getBoundingClientRect();
+      n.style.left = `${W.left}px`, n.style.top = `${Y.top}px`, n.style.width = `${W.width}px`;
+    }, m = (W) => {
+      ne.current || (W === n ? r.scrollLeft = n.scrollLeft : n.scrollLeft = r.scrollLeft, I.current && I.current());
+    }, E = () => {
+      m(r), u();
+    }, A = () => {
+      m(n);
+    }, M = () => {
+      u();
+    };
+    return r.addEventListener("scroll", E), v && n.addEventListener("scroll", A), e.addEventListener("scroll", M), window.addEventListener("resize", u), m(r), u(), () => {
+      r.removeEventListener("scroll", E), v && n.removeEventListener("scroll", A), e.removeEventListener("scroll", M), window.removeEventListener("resize", u);
+    };
+  }, [O, _, v]), G(() => {
+    if (!z.current || !v)
+      return;
+    const e = z.current, r = _ == null ? void 0 : _.current;
+    le(e.scrollLeft), ce((r == null ? void 0 : r.scrollTop) || e.scrollTop || 0), ae(e.scrollWidth);
+    const n = () => {
+      e && (le(e.scrollLeft), ce((r == null ? void 0 : r.scrollTop) || e.scrollTop || 0), ae(e.scrollWidth));
+    };
+    let u = null;
+    const m = () => {
+      u === null && (u = requestAnimationFrame(() => {
+        n(), u = null;
+      }));
+    }, E = () => {
+      m();
+    }, A = () => {
+      m();
+    };
+    e.addEventListener("scroll", E, { passive: !0 }), r && r.addEventListener("scroll", A, {
+      passive: !0
+    });
+    const M = () => {
+      n(), st((Y) => Y + 1);
+    };
+    window.addEventListener("resize", M), I.current = n, n();
+    const W = new ResizeObserver(() => {
+      n();
+    });
+    return e && W.observe(e), () => {
+      e.removeEventListener("scroll", E), r && r.removeEventListener("scroll", A), window.removeEventListener("resize", M), W.disconnect(), u !== null && (cancelAnimationFrame(u), u = null);
+    };
+  }, [v, _, O, N]), G(() => {
+    if (!z.current || !v)
+      return;
+    const e = z.current, r = _ == null ? void 0 : _.current;
+    requestAnimationFrame(() => {
+      e && (le(e.scrollLeft), ce((r == null ? void 0 : r.scrollTop) || e.scrollTop || 0), ae(e.scrollWidth), I.current && I.current());
+    });
+  }, [ee, v, _]), G(() => {
+    if (!z.current)
+      return;
+    const e = z.current, r = () => {
+      Array.from(e.querySelectorAll('[data-base-left="0"]')).forEach(te);
+    };
+    requestAnimationFrame(() => {
+      r();
+    });
+  }, [k, t, te]), G(() => {
+    if (!z.current)
+      return;
+    const e = z.current, r = new Set(N), n = de.current, u = /* @__PURE__ */ new Set();
+    if (N.forEach((m) => {
+      n.has(m) || u.add(m);
+    }), n.forEach((m) => {
+      r.has(m) || u.add(m);
+    }), u.size === 0) {
+      de.current = r;
+      return;
+    }
+    requestAnimationFrame(() => {
+      u.forEach((m) => {
+        const E = e.querySelector(
+          `[data-base-left="0"][data-row-id="${m}"]`
+        );
+        E && te(E);
+      });
+    }), de.current = r;
+  }, [k, N, te]), /* @__PURE__ */ F(
+    "div",
+    {
+      ref: z,
+      className: g(
+        "table",
+        {
+          "fixed-header": L,
+          "horizontally-scrollable-container": L && (v || T),
+          "external-scroll-container": L && !!_
+        },
+        d
+      ),
+      children: [
+        /* @__PURE__ */ F(
+          "div",
+          {
+            ref: B,
+            className: g(
+              "table-header",
+              {
+                "sticky-header": L && !O,
+                "horizontally-scrollable": v,
+                resizable: T
+              },
+              f
+            ),
+            style: { gridTemplateColumns: ft },
+            children: [
+              o && /* @__PURE__ */ h(
+                "div",
+                {
+                  className: g("table-header-cell", "checkbox-cell"),
+                  "data-base-left": k ? q : 0,
+                  children: dt && /* @__PURE__ */ h(
+                    He,
+                    {
+                      value: lt,
+                      partiallyChecked: ct,
+                      onChange: it,
+                      className: g("checkbox-cell")
+                    }
+                  )
+                }
+              ),
+              k && /* @__PURE__ */ h(
+                "div",
+                {
+                  className: g("table-header-cell", "expand-cell", "left-border-accent"),
+                  "data-base-left": "0",
+                  children: H ? /* @__PURE__ */ h(
+                    mt,
+                    {
+                      content: H,
+                      placement: "top",
+                      wrapperClassName: g("expand-all-tooltip-wrapper"),
+                      contentClassName: g("expand-all-tooltip-content"),
+                      children: $e
+                    }
+                  ) : $e
+                }
+              ),
+              P.map((e, r) => {
+                const n = /* @__PURE__ */ h(
+                  "button",
+                  {
+                    "data-column-key": e.key,
+                    "data-pinned-index": r,
+                    className: g("table-header-cell", "pinned-column", {
+                      [`align-${e.align}`]: "align" in e,
+                      "primary-cell": C(e),
+                      "sortable-cell": K.includes(e.key),
+                      resizable: T
+                    }),
+                    style: re(
+                      e,
+                      !0,
+                      r,
+                      P,
+                      V,
+                      k,
+                      o
+                    ),
+                    children: /* @__PURE__ */ F(
+                      "div",
+                      {
+                        className: g("label"),
+                        onClick: () => Ne(e.key),
+                        onMouseEnter: () => we(e.key),
+                        onMouseLeave: ve,
+                        children: [
+                          /* @__PURE__ */ h(Ge, { column: e }),
+                          (ge === e.key || (x == null ? void 0 : x.key) === e.key) && je(e.key)
+                        ]
+                      }
+                    )
+                  },
+                  e.key
+                );
+                return T ? ke(e, n) : n;
+              }),
+              R.map((e) => {
+                const r = /* @__PURE__ */ h(
+                  "button",
+                  {
+                    className: g("table-header-cell", {
+                      [`align-${e.align}`]: "align" in e,
+                      "primary-cell": C(e),
+                      "sortable-cell": K.includes(e.key),
+                      resizable: T
+                    }),
+                    style: re(
+                      e,
+                      !1,
+                      void 0,
+                      P,
+                      V,
+                      k,
+                      o
+                    ),
+                    children: /* @__PURE__ */ F(
+                      "div",
+                      {
+                        className: g("label"),
+                        onClick: () => Ne(e.key),
+                        onMouseEnter: () => we(e.key),
+                        onMouseLeave: ve,
+                        children: [
+                          /* @__PURE__ */ h(Ge, { column: e }),
+                          (ge === e.key || (x == null ? void 0 : x.key) === e.key) && je(e.key)
+                        ]
+                      }
+                    )
+                  },
+                  e.key
+                );
+                return T ? ke(e, r) : r;
+              }),
+              l && /* @__PURE__ */ h("div", { className: g("table-header-cell", "action-menu-cell") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ h(
+          "div",
+          {
+            ref: tt,
+            className: g(
+              "table-body",
+              {
+                "scrollable-body": L,
+                "horizontally-scrollable": v,
+                resizable: T
+              },
+              w
+            ),
+            children: t.map((e, r) => /* @__PURE__ */ F(
+              "div",
+              {
+                "data-row-index": r,
+                className: g("table-row", Wt(e), c, {
+                  selectable: o
+                }),
+                onMouseEnter: () => Je(r),
+                onMouseLeave: Qe,
+                children: [
+                  o && /* @__PURE__ */ h(
+                    "div",
+                    {
+                      className: g("table-cell", "checkbox-cell"),
+                      "data-base-left": k ? q : 0,
+                      children: (Ae || Ye === r) && /* @__PURE__ */ h(
+                        He,
+                        {
+                          value: p.includes(e.id),
+                          onChange: () => rt(e.id),
+                          className: g("checkbox-cell")
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ h("div", { className: g("row-content-wrapper"), children: /* @__PURE__ */ F("div", { className: g("table-row-content"), style: { gridTemplateColumns: ut }, children: [
+                    k && /* @__PURE__ */ h(
+                      "div",
+                      {
+                        className: g("table-cell", "expand-cell", "left-border-accent"),
+                        "data-base-left": "0",
+                        "data-row-id": e.id,
+                        children: /* @__PURE__ */ h(
+                          "button",
+                          {
+                            onClick: () => Ze(e.id),
+                            "aria-label": N.includes(e.id) ? "Collapse row" : "Expand row",
+                            "aria-expanded": N.includes(e.id),
+                            children: /* @__PURE__ */ h(
+                              "span",
+                              {
+                                className: g("expand-icon", {
+                                  expanded: N.includes(e.id)
+                                }),
+                                children: /* @__PURE__ */ h(Me, {})
+                              }
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    P.map((n, u) => {
+                      const m = me(e.id, n.key), E = C(n);
+                      return /* @__PURE__ */ h(
+                        "div",
+                        {
+                          "data-column-key": n.key,
+                          "data-pinned-index": u,
+                          ref: E ? ye(n.key) : void 0,
+                          className: g("table-cell", "pinned-column", {
+                            "primary-cell": E,
+                            "expanded-cell": m
+                          }),
+                          style: re(
+                            n,
+                            !0,
+                            u,
+                            P,
+                            V,
+                            k,
+                            o
+                          ),
+                          children: e[n.key].component || e[n.key].content || e[n.key]
+                        },
+                        n.key
+                      );
+                    }),
+                    R.map((n) => {
+                      const u = me(e.id, n.key), m = C(n);
+                      return /* @__PURE__ */ h(
+                        "div",
+                        {
+                          ref: m ? ye(n.key) : void 0,
+                          className: g("table-cell", {
+                            "primary-cell": m,
+                            "expanded-cell": u
+                          }),
+                          style: re(
+                            n,
+                            !1,
+                            void 0,
+                            P,
+                            V,
+                            k,
+                            o
+                          ),
+                          children: e[n.key].component || e[n.key].content || e[n.key]
+                        },
+                        n.key
+                      );
+                    }),
+                    l && /* @__PURE__ */ h("div", { className: g("table-cell", "action-menu-cell"), children: l(e.metaData) })
+                  ] }) })
+                ]
+              },
+              e.id
+            ))
+          }
+        ),
+        v && /* @__PURE__ */ F(_t, { children: [
+          /* @__PURE__ */ h(
+            Be,
+            {
+              portalContainer: _e,
+              visible: he.visible,
+              position: he.position,
+              size: he.size,
+              direction: "right",
+              className: Ve,
+              dataTestId: "right-gradient"
+            }
+          ),
+          /* @__PURE__ */ h(
+            Be,
+            {
+              portalContainer: _e,
+              visible: pe.visible,
+              position: pe.position,
+              size: pe.size,
+              direction: "left",
+              className: Ie,
+              dataTestId: "pinned-gradient"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  sn as T
+};