@pibit.ai/cure-design-system 0.3.43 → 0.3.45

package/dist/patterns/table-component/TableComponent.js

@@ -0,0 +1,809 @@
+import { jsx as i, jsxs as p, Fragment as rn } from "react/jsx-runtime";
+import { forwardRef as on, useMemo as y, useState as ne, useEffect as sn, useCallback as F, useRef as re, useLayoutEffect as ln, Fragment as an } from "react";
+import { functionalUpdate as Je, useTable as dn } from "@tanstack/react-table";
+import { ArrowDown as cn, ChevronSelectorVertical as un, ChevronRight as Ue } from "@untitledui/icons";
+import { Checkbox as $e } from "../../primitives/checkbox/checkbox.js";
+import { ShimmerLine as mn } from "../../primitives/shimmer/shimmer.js";
+import { cn as d } from "../../utils/cn.js";
+import { selectionFromSingleCell as fn, getCellRangeVisualState as pn, cellRangeEdgeBoxShadow as hn } from "../table/cellRangeSelection.js";
+import { useCellRangeSelection as bn } from "./useCellRangeSelection.js";
+import { useRowReorderDrag as gn } from "./useRowReorderDrag.js";
+import { GridNavProvider as xn } from "../table/useGridKeyboardNavigation.js";
+import { ROW_DRAG_SOURCE_STYLE as yn, ROW_SOURCE_INDEX_ATTR as wn, ROW_REORDER_ATTR as Cn, FloatingRowPreview as vn, DropIndicatorLine as Sn } from "../table/rowReorderDrag.js";
+import { buildTableComponentColumns as In } from "./buildTableColumns.js";
+import { HEADER_PADDING_CLASS as Nn, ROW_HEIGHT_CLASS as He, CELL_PADDING_CLASS as qe } from "./rowMetrics.js";
+import { tableComponentFeatures as En } from "./tableFeatures.js";
+import { TableZoomControl as _n } from "../table/TableZoomControl.js";
+import { normalizeZoomConfig as Ln, DEFAULT_TABLE_ZOOM as Rn, DEFAULT_TABLE_ZOOM_MIN as Tn, clamp as Wn, parsePxValue as Ee, DEFAULT_ZOOMABLE_COLUMN_MIN_WIDTH as Be, supportsCssZoom as Dn, computeFillBaseWidth as kn, computeEffectiveTableWidth as On, computeFlexColumnWidth as An, computeNeedsHorizontalScroll as Fn, DEFAULT_COLUMN_MAX_WIDTH as Pn } from "../table/tableZoomLayout.js";
+const Zn = 5, Mn = Dn(), Vn = (o) => o === "center" ? "text-center" : o === "right" ? "text-right" : "text-left", Ge = (o) => o === "center" ? "justify-center" : o === "right" ? "justify-end" : "justify-start", te = (o, l) => {
+  const c = o.__sourceIndex;
+  return typeof c == "number" ? c : Number.isFinite(l) ? l : null;
+}, Xe = (o) => o instanceof HTMLElement && !!o.closest(
+  'button,a,input,textarea,select,[contenteditable]:not([contenteditable="false"]),[role="button"],[role="menuitem"]'
+), A = (o, l, c) => {
+  const [T, W] = ne(l), h = o ?? T, S = re(h), b = re(c);
+  S.current = h, b.current = c;
+  const ie = F(
+    (w) => {
+      var C;
+      const E = Je(w, S.current);
+      S.current = E, o === void 0 && W(E), (C = b.current) == null || C.call(b, E);
+    },
+    [o]
+  );
+  return [h, ie];
+}, jn = (o, l) => {
+  if (!o) return;
+  const c = o.sticky ? {
+    position: "sticky",
+    [o.sticky]: o.stickyOffset ?? 0,
+    zIndex: l ? 30 : 20,
+    backgroundColor: l ? "var(--color-bg-secondary-subtle)" : "var(--color-bg-primary)",
+    boxShadow: l || !o.sticky ? void 0 : o.sticky === "right" ? "inset 2px 0 0 0 var(--color-border-tertiary)" : "inset -2px 0 0 0 var(--color-border-tertiary)"
+  } : {};
+  return {
+    width: o.width,
+    minWidth: o.minWidth ?? o.width ?? `${oe}px`,
+    maxWidth: o.maxWidth ?? Pn,
+    ...c
+  };
+}, oe = 120, Ne = (o) => !!(o.maxWidth && o.sticky === "right"), Kn = (o, l = oe) => Ee(o.minWidth) || l, Ye = (o, l, c, T) => {
+  if (l === "multiple") return o;
+  if (o === !0) return T ? { [T]: !0 } : {};
+  const W = c && c !== !0 ? new Set(
+    Object.keys(c).filter((b) => c[b])
+  ) : /* @__PURE__ */ new Set(), h = Object.keys(o).filter((b) => o[b]), S = h.find((b) => !W.has(b)) ?? h[0];
+  return S ? { [S]: !0 } : {};
+};
+function Un({
+  data: o,
+  columns: l,
+  getRowId: c,
+  ariaLabel: T,
+  headerGroups: W,
+  size: h = "xs",
+  loading: S = !1,
+  loadingRowCount: b = Zn,
+  emptyState: ie = "No data found",
+  showBorders: w = !1,
+  removeRowBorders: E = !1,
+  fillWidth: C = !1,
+  zoom: m,
+  zoomDisabled: Qe = !1,
+  className: _e,
+  rootClassName: ze,
+  tableClassName: et,
+  headerClassName: tt,
+  getRowClassName: se,
+  onRowClick: le,
+  onRowHover: U,
+  toolbar: nt,
+  renderToolbar: ae,
+  pagination: Le,
+  summaryRow: rt,
+  rowGroups: P,
+  renderGroupHeader: de,
+  collapsedGroupIds: ot,
+  defaultCollapsedGroupIds: it = [],
+  onCollapsedGroupIdsChange: st,
+  enableSorting: Re = !1,
+  sorting: lt,
+  defaultSorting: at = [],
+  onSortingChange: dt,
+  columnVisibility: ct,
+  defaultColumnVisibility: ut = {},
+  onColumnVisibilityChange: mt,
+  columnOrder: ft,
+  defaultColumnOrder: pt = [],
+  onColumnOrderChange: ht,
+  selectionMode: $ = "none",
+  rowSelection: bt,
+  defaultRowSelection: gt = {},
+  onRowSelectionChange: xt,
+  expanded: yt,
+  defaultExpanded: wt = {},
+  onExpandedChange: Ct,
+  expansionMode: ce = "multiple",
+  getRowCanExpand: ue,
+  renderExpandedContent: H,
+  onCellClick: me,
+  onCellDoubleClick: fe,
+  onCellActivate: D,
+  cellSelection: q,
+  onCellSelectionChange: Z,
+  onCopyCells: vt,
+  onPasteCells: St,
+  onClearCells: It,
+  onReorderRows: Te,
+  enableRowReorder: Nt,
+  activateOnSingleClick: Et
+}, B) {
+  var je;
+  const u = y(
+    () => m ? Ln(m) : null,
+    [m == null ? void 0 : m.defaultZoom, m == null ? void 0 : m.minZoom, m == null ? void 0 : m.maxZoom, m == null ? void 0 : m.step]
+  ), [pe, We] = ne(
+    () => (u == null ? void 0 : u.defaultZoom) ?? Rn
+  ), I = u !== null && Mn, M = I ? pe / 100 : 1, _t = (u == null ? void 0 : u.minZoom) ?? Tn;
+  sn(() => {
+    u && We(
+      (e) => Wn(e, u.minZoom, u.maxZoom)
+    );
+  }, [u]);
+  const [Lt, Rt] = A(
+    lt,
+    at,
+    dt
+  ), [Tt, Wt] = A(
+    ct,
+    ut,
+    mt
+  ), [Dt, kt] = A(
+    ft,
+    pt,
+    ht
+  ), [Ot, At] = A(
+    bt,
+    gt,
+    xt
+  ), [Ft, De] = A(
+    yt,
+    wt,
+    Ct
+  ), he = o.length > 0 ? c(o[0], 0) : void 0, Pt = Ye(
+    Ft,
+    ce,
+    void 0,
+    he
+  ), Zt = F(
+    (e) => {
+      De(
+        (t) => Ye(
+          Je(e, t),
+          ce,
+          t,
+          he
+        )
+      );
+    },
+    [ce, he, De]
+  ), [ke, Oe] = A(
+    ot,
+    it,
+    st
+  ), be = y(
+    () => new Set(ke),
+    [ke]
+  ), Mt = F(
+    (e) => Oe(
+      (t) => t.includes(e) ? t.filter((r) => r !== e) : [...t, e]
+    ),
+    [Oe]
+  ), V = re(null), [j, Ae] = ne(null);
+  ln(() => {
+    if (!C) {
+      Ae(null);
+      return;
+    }
+    const e = V.current;
+    if (!e || typeof ResizeObserver > "u") return;
+    const t = () => {
+      const n = e.clientWidth;
+      n > 0 && Ae(
+        (s) => s === n ? s : n
+      );
+    };
+    t();
+    const r = new ResizeObserver(t);
+    return r.observe(e), () => r.disconnect();
+  }, [C, l.length, o.length, S]);
+  const g = y(() => {
+    if (!C) return null;
+    const e = l.reduce(
+      (n, s) => Ne(s) ? n + Ee(s.maxWidth) : n,
+      0
+    ), t = l.filter((n) => !Ne(n));
+    return { minTableWidth: t.reduce(
+      (n, s) => n + Kn(
+        s,
+        I ? Ee(Be) : oe
+      ),
+      0
+    ) + e, fixedTotal: e, flexibleCount: t.length };
+  }, [C, l, I]), ge = y(
+    () => g ? kn(j, g.minTableWidth) : null,
+    [j, g]
+  ), xe = Fn(
+    ge,
+    j,
+    M
+  ), G = y(
+    () => On(ge, j, M),
+    [ge, j, M]
+  ), Fe = y(() => !g || g.flexibleCount === 0 ? null : An(
+    G,
+    g.fixedTotal,
+    g.flexibleCount
+  ), [g, G]), X = (e, t) => {
+    const r = jn(e, t);
+    return !C || !e ? r : Ne(e) ? {
+      ...r,
+      width: e.maxWidth,
+      minWidth: e.maxWidth,
+      maxWidth: e.maxWidth
+    } : Fe == null ? r : {
+      ...r,
+      width: `${Fe}px`,
+      minWidth: e.minWidth ?? (I ? Be : `${oe}px`)
+    };
+  }, ye = y(
+    () => new Map(l.map((e) => [e.id, e])),
+    [l]
+  ), Vt = y(
+    () => In(l, W),
+    [l, W]
+  ), N = dn({
+    features: En,
+    data: o,
+    columns: Vt,
+    getRowId: c,
+    enableSorting: Re,
+    enableCellSpanning: !0,
+    enableRowSelection: $ !== "none",
+    enableMultiRowSelection: $ === "multiple",
+    getRowCanExpand: ue && H ? (e) => ue(e.original) : () => !1,
+    state: {
+      sorting: Lt,
+      columnVisibility: Tt,
+      columnOrder: Dt,
+      rowSelection: Ot,
+      expanded: Pt
+    },
+    onSortingChange: Rt,
+    onColumnVisibilityChange: Wt,
+    onColumnOrderChange: kt,
+    onRowSelectionChange: At,
+    onExpandedChange: Zt
+  }), Y = $ !== "none", jt = !!(ue && H), Kt = Y ? 1 : 0, Ut = N.getVisibleLeafColumns().length, J = Math.max(
+    Ut + Kt,
+    1
+  ), $t = Math.max(N.getHeaderGroups().length, 1), L = N.getRowModel().rows, we = I && u ? /* @__PURE__ */ i(
+    _n,
+    {
+      value: pe,
+      defaultValue: u.defaultZoom,
+      minValue: _t,
+      maxValue: u.maxZoom,
+      step: u.step,
+      onChange: We,
+      isDisabled: Qe
+    }
+  ) : null, Pe = ae ? ae({ zoomControl: we, zoomPercent: pe }) : nt, Ze = !ae && we ? /* @__PURE__ */ i("div", { className: "flex justify-end", children: we }) : null, Ht = !!(Pe || Ze || Le), qt = y(() => {
+    const e = I ? { zoom: M } : void 0;
+    return !C || !g ? I ? { ...e, width: "max-content", minWidth: "100%" } : void 0 : I ? {
+      ...e,
+      tableLayout: "fixed",
+      width: `${G ?? g.minTableWidth}px`
+    } : {
+      tableLayout: "fixed",
+      width: xe ? `${g.minTableWidth}px` : "100%"
+    };
+  }, [
+    G,
+    C,
+    g,
+    xe,
+    I,
+    M
+  ]), Bt = re(
+    null
+  ), [k, Gt] = ne(null), Xt = !!D, Yt = F(
+    (e, t, r) => {
+      if (Bt.current = { rowId: e, columnKey: t }, !Z) return;
+      const n = q;
+      n != null && n.anchor.rowId === e && n.anchor.columnKey === t && n.focus.rowId === e && n.focus.columnKey === t || Z(
+        fn({
+          rowId: e,
+          columnKey: t,
+          sourceIndex: r ?? null
+        })
+      );
+    },
+    [Z, q]
+  ), Jt = F(
+    (e) => {
+      Gt((t) => t === e || t && e && t.rowId === e.rowId && t.columnKey === e.columnKey ? t : e);
+    },
+    []
+  ), Q = !!Te && Nt !== !1, f = gn({
+    enabled: Q,
+    onReorderRows: Te,
+    containerRef: V
+  }), Qt = F(
+    (e, t, r) => {
+      var n;
+      return {
+        row: e.original,
+        rowId: e.id,
+        columnId: t,
+        value: r,
+        rowIndex: e.index,
+        sourceIndex: te(e.original, e.index),
+        isRowDragging: ((n = f.session) == null ? void 0 : n.active) === !0 && f.session.rowId === e.id,
+        startRowDrag: Q ? (s) => f.startDrag(
+          s,
+          e.id,
+          te(e.original, e.index) ?? e.index,
+          e.original
+        ) : void 0
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [Q, f.startDrag, f.session]
+  ), Ce = L.map((e) => e.id).join("\0"), ve = y(
+    () => Ce ? Ce.split("\0") : [],
+    [Ce]
+  ), Se = N.getVisibleLeafColumns().map((e) => e.id).join("\0"), Ie = y(
+    () => Se ? Se.split("\0") : [],
+    [Se]
+  ), O = typeof Z == "function", z = bn({
+    enabled: O,
+    selection: q,
+    onSelectionChange: Z,
+    onCopyCells: vt,
+    onPasteCells: St,
+    onClearCells: It,
+    onActivateCell: D ? (e) => {
+      const t = L.find((r) => r.id === e.rowId);
+      t && D({
+        row: t.original,
+        rowId: e.rowId,
+        columnId: e.columnKey,
+        value: void 0,
+        rowIndex: t.index,
+        sourceIndex: e.sourceIndex ?? te(t.original, t.index)
+      });
+    } : void 0,
+    activateOnSingleClick: Et,
+    containerRef: V,
+    rowIds: ve,
+    columnKeys: Ie
+  }), zt = y(() => {
+    if (!(P != null && P.length)) return L.map((n) => ({ kind: "row", row: n }));
+    const e = new Map(L.map((n) => [n.id, n])), t = /* @__PURE__ */ new Set(), r = [];
+    for (const n of P) {
+      const s = n.rowIds.map((x) => e.get(x)).filter((x) => x !== void 0);
+      s.length !== 0 && (r.push({
+        kind: "group",
+        group: { id: n.id, label: n.label, rowCount: s.length }
+      }), s.forEach((x) => t.add(x.id)), !be.has(n.id) && s.forEach((x) => r.push({ kind: "row", row: x })));
+    }
+    for (const n of L)
+      t.has(n.id) || r.push({ kind: "row", row: n });
+    return r;
+  }, [P, L, be]), en = (e) => {
+    const t = be.has(e.id), r = () => Mt(e.id);
+    return /* @__PURE__ */ i("tr", { className: "bg-secondary_subtle", children: /* @__PURE__ */ i(
+      "td",
+      {
+        colSpan: J,
+        className: d(
+          !de && "py-1.5",
+          w && "border-r border-secondary last:border-r-0"
+        ),
+        children: de ? de({
+          id: e.id,
+          label: e.label,
+          rowCount: e.rowCount,
+          isCollapsed: t,
+          toggle: r
+        }) : /* @__PURE__ */ p(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center gap-2 px-2 text-left text-xs font-medium text-secondary",
+            onClick: r,
+            "aria-expanded": !t,
+            children: [
+              /* @__PURE__ */ i(
+                Ue,
+                {
+                  className: d(
+                    "size-4 shrink-0 text-fg-quaternary transition-transform",
+                    !t && "rotate-90"
+                  )
+                }
+              ),
+              /* @__PURE__ */ i("span", { className: "truncate", children: e.label || "(Empty)" }),
+              /* @__PURE__ */ p("span", { className: "text-tertiary", children: [
+                "(",
+                e.rowCount,
+                ")"
+              ] })
+            ]
+          }
+        )
+      }
+    ) }, `group-${e.id}`);
+  }, Me = /* @__PURE__ */ p(
+    "div",
+    {
+      ref: (e) => {
+        V.current = e, typeof B == "function" ? B(e) : B && (B.current = e);
+      },
+      onPointerDownCapture: O ? z.onPointerDownCapture : void 0,
+      onKeyDownCapture: O ? z.onKeyDownCapture : void 0,
+      onClickCapture: O ? z.onClickCapture : void 0,
+      onDoubleClickCapture: O ? z.onDoubleClickCapture : void 0,
+      className: d(
+        "w-full rounded-lg bg-primary",
+        I || !C || xe ? "overflow-x-auto" : "overflow-x-hidden",
+        w && "rounded-xl border border-secondary",
+        ze
+      ),
+      children: [
+        /* @__PURE__ */ p(
+          "table",
+          {
+            "aria-label": T,
+            className: d(
+              "w-full border-separate border-spacing-0 overflow-x-hidden",
+              et
+            ),
+            style: qt,
+            children: [
+              /* @__PURE__ */ i(
+                "thead",
+                {
+                  className: d(
+                    "sticky top-0 z-30 rounded-t-lg bg-secondary_subtle [&>tr>th]:h-9 [&>tr>th:first-child]:rounded-tl-lg [&>tr>th:last-child]:rounded-tr-lg",
+                    w && "[&>tr>th]:border-b [&>tr>th]:border-secondary [&>tr>th:first-child]:rounded-bl-none [&>tr>th:last-child]:rounded-br-none",
+                    tt
+                  ),
+                  children: N.getHeaderGroups().map((e, t) => /* @__PURE__ */ p("tr", { children: [
+                    Y && t === 0 ? /* @__PURE__ */ i(
+                      "th",
+                      {
+                        rowSpan: $t,
+                        className: d(
+                          "relative w-10 min-w-10 p-0 align-middle",
+                          w && "border-r border-secondary"
+                        ),
+                        children: $ === "multiple" ? /* @__PURE__ */ i(
+                          "div",
+                          {
+                            className: "flex items-center justify-center",
+                            onClick: (r) => r.stopPropagation(),
+                            children: /* @__PURE__ */ i(
+                              $e,
+                              {
+                                checked: N.getIsAllRowsSelected() ? !0 : N.getIsSomeRowsSelected() ? "indeterminate" : !1,
+                                onCheckedChange: (r) => N.toggleAllRowsSelected(r === !0),
+                                "aria-label": "Select all rows",
+                                className: "items-center justify-center"
+                              }
+                            )
+                          }
+                        ) : null
+                      }
+                    ) : null,
+                    e.headers.map((r) => {
+                      if (r.rowSpan === 0) return null;
+                      const n = ye.get(r.column.id), s = r.column.getIsSorted(), x = Re && !r.isPlaceholder && r.column.getCanSort(), a = n != null && n.renderHeader ? n.renderHeader({
+                        columnId: n.id,
+                        label: n.header
+                      }) : r.isPlaceholder ? null : N.FlexRender({ header: r });
+                      return /* @__PURE__ */ i(
+                        "th",
+                        {
+                          colSpan: r.colSpan,
+                          rowSpan: r.rowSpan,
+                          scope: r.colSpan > 1 ? "colgroup" : "col",
+                          "aria-sort": s === "asc" ? "ascending" : s === "desc" ? "descending" : void 0,
+                          style: X(n, !0),
+                          className: d(
+                            "relative overflow-hidden p-0 outline-hidden focus-within:z-1 focus-within:ring-2 focus-within:ring-focus-ring focus-within:ring-inset",
+                            Nn[h],
+                            w && "border-r border-secondary last:border-r-0",
+                            n == null ? void 0 : n.headerClassName
+                          ),
+                          children: x ? /* @__PURE__ */ p(
+                            "button",
+                            {
+                              type: "button",
+                              className: d(
+                                "flex w-full items-center gap-1 overflow-hidden rounded outline-none",
+                                Ge(n == null ? void 0 : n.align)
+                              ),
+                              onClick: r.column.getToggleSortingHandler(),
+                              "aria-label": `Sort by ${String((n == null ? void 0 : n.header) ?? r.column.id)}`,
+                              children: [
+                                /* @__PURE__ */ i("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium text-secondary", children: a }),
+                                s ? /* @__PURE__ */ i(
+                                  cn,
+                                  {
+                                    className: d(
+                                      "size-3 shrink-0 stroke-[3px] text-fg-quaternary",
+                                      s === "asc" && "rotate-180"
+                                    )
+                                  }
+                                ) : /* @__PURE__ */ i(
+                                  un,
+                                  {
+                                    size: 12,
+                                    strokeWidth: 3,
+                                    className: "shrink-0 text-fg-quaternary"
+                                  }
+                                )
+                              ]
+                            }
+                          ) : /* @__PURE__ */ i(
+                            "div",
+                            {
+                              className: d(
+                                "flex items-center gap-1 overflow-hidden",
+                                Ge(n == null ? void 0 : n.align)
+                              ),
+                              children: /* @__PURE__ */ i("div", { className: "flex items-center overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium text-secondary", children: a })
+                            }
+                          )
+                        },
+                        r.id
+                      );
+                    })
+                  ] }, e.id))
+                }
+              ),
+              /* @__PURE__ */ p("tbody", { children: [
+                S ? Array.from({ length: b }, (e, t) => /* @__PURE__ */ p(
+                  "tr",
+                  {
+                    className: He[h],
+                    "aria-hidden": "true",
+                    children: [
+                      Y ? /* @__PURE__ */ i(
+                        "td",
+                        {
+                          className: d(
+                            "w-10 min-w-10",
+                            w && "border-r border-secondary",
+                            !E && "border-b border-tertiary"
+                          )
+                        }
+                      ) : null,
+                      N.getVisibleLeafColumns().map((r) => {
+                        const n = ye.get(r.id);
+                        return /* @__PURE__ */ i(
+                          "td",
+                          {
+                            style: X(n, !1),
+                            className: d(
+                              "relative overflow-hidden text-secondary",
+                              qe[h],
+                              w && "border-r border-secondary last:border-r-0",
+                              !E && "border-b border-tertiary",
+                              n == null ? void 0 : n.cellClassName
+                            ),
+                            children: /* @__PURE__ */ i(
+                              mn,
+                              {
+                                height: "14px",
+                                width: "75%",
+                                className: "rounded"
+                              }
+                            )
+                          },
+                          r.id
+                        );
+                      })
+                    ]
+                  },
+                  `loading-${t}`
+                )) : L.length === 0 ? /* @__PURE__ */ i("tr", { children: /* @__PURE__ */ i(
+                  "td",
+                  {
+                    colSpan: J,
+                    className: "border-b border-secondary px-3 py-3 text-left text-xs text-placeholder_subtle",
+                    children: ie
+                  }
+                ) }) : zt.map((e) => {
+                  var x;
+                  if (e.kind === "group")
+                    return en(e.group);
+                  const t = e.row, r = jt && t.getCanExpand(), n = r && t.getIsExpanded(), s = t.getVisibleCells();
+                  return /* @__PURE__ */ p(an, { children: [
+                    /* @__PURE__ */ p(
+                      "tr",
+                      {
+                        ...Q ? {
+                          [Cn]: t.id,
+                          [wn]: String(
+                            te(t.original, t.index) ?? t.index
+                          )
+                        } : {},
+                        style: (x = f.session) != null && x.active && f.session.rowId === t.id ? yn : void 0,
+                        className: d(
+                          // `focus-visible`, not `focus-within`: the ring marks the row itself being keyboard-focused.
+                          // `focus-within` also fires for anything inside it, so an open cell
+                          // editor outlined the entire row.
+                          "relative outline-focus-ring transition-colors hover:bg-secondary_subtle focus-visible:outline-2 focus-visible:-outline-offset-2",
+                          He[h],
+                          t.getIsSelected() && "bg-secondary",
+                          le && "cursor-pointer",
+                          se == null ? void 0 : se(t.original)
+                        ),
+                        onClick: (a) => {
+                          !le || Xe(a.target) || le(t.original);
+                        },
+                        onMouseEnter: U ? () => U(t.original, !0) : void 0,
+                        onMouseLeave: U ? () => U(t.original, !1) : void 0,
+                        children: [
+                          Y ? /* @__PURE__ */ i(
+                            "td",
+                            {
+                              className: d(
+                                "relative w-10 min-w-10 p-0 text-center",
+                                w && "border-r border-secondary",
+                                // Matches the data cells, so the row separator
+                                // runs the full width of the table.
+                                !E && !n && "border-b border-tertiary"
+                              ),
+                              children: /* @__PURE__ */ i(
+                                "div",
+                                {
+                                  className: "flex items-center justify-center",
+                                  onClick: (a) => a.stopPropagation(),
+                                  onKeyDown: (a) => a.stopPropagation(),
+                                  children: /* @__PURE__ */ i(
+                                    $e,
+                                    {
+                                      checked: t.getIsSelected(),
+                                      onCheckedChange: (a) => t.toggleSelected(a === !0),
+                                      "aria-label": `Select row ${t.id}`,
+                                      className: "items-center justify-center"
+                                    }
+                                  )
+                                }
+                              )
+                            }
+                          ) : null,
+                          s.map((a, Ke) => {
+                            if (a.getIsCovered()) return null;
+                            const v = ye.get(a.column.id);
+                            if (!v) return null;
+                            const K = Qt(
+                              t,
+                              v.id,
+                              a.getValue()
+                            ), tn = v.renderCell ? v.renderCell(K) : String(a.getValue() ?? ""), _ = O ? pn(
+                              q,
+                              t.id,
+                              v.id,
+                              ve,
+                              Ie
+                            ) : null, ee = !!(_ != null && _.inRange), nn = (k == null ? void 0 : k.rowId) === t.id && (k == null ? void 0 : k.columnKey) === v.id;
+                            return /* @__PURE__ */ i(
+                              "td",
+                              {
+                                colSpan: a.getColSpan(),
+                                rowSpan: a.getRowSpan(),
+                                style: ee && _ ? {
+                                  ...X(v, !1),
+                                  boxShadow: hn(
+                                    _.edges
+                                  )
+                                } : X(v, !1),
+                                "data-table-component-cell": "",
+                                "data-grid-cell": "",
+                                "data-grid-row-id": t.id,
+                                "data-grid-col-key": v.id,
+                                "data-grid-source-index": K.sourceIndex ?? void 0,
+                                tabIndex: D ? 0 : void 0,
+                                className: d(
+                                  // `overflow-hidden`, never `overflow-x-hidden`: when `overflow-x` is not
+                                  // `visible` the browser computes `overflow-y` to `auto`, turning
+                                  // every cell into its own scroll container that swallows the
+                                  // wheel before the table can scroll.
+                                  "relative text-secondary outline-focus-ring focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2",
+                                  // The cell holding an open editor must not clip it: a wrapped
+                                  // multi-line value has to be visible, and the row only grows
+                                  // around content the cell is allowed to show.
+                                  nn ? "z-1 overflow-visible" : "overflow-hidden",
+                                  qe[h],
+                                  Vn(v.align),
+                                  w && "border-r border-secondary last:border-r-0",
+                                  !E && !n && !ee && "border-b border-tertiary",
+                                  ee && "z-1 outline-hidden",
+                                  ee && !(_ != null && _.isAnchor) && "bg-utility-brand-25",
+                                  v.cellClassName
+                                ),
+                                onClick: (R) => {
+                                  me == null || me(K), Ke === 0 && r && Xe(R.target) && R.stopPropagation();
+                                },
+                                onDoubleClick: () => fe == null ? void 0 : fe(K),
+                                onKeyDown: (R) => {
+                                  R.key !== "Enter" || !D || (R.preventDefault(), D(K));
+                                },
+                                children: /* @__PURE__ */ p("div", { className: "flex min-w-0 items-center gap-2", children: [
+                                  Ke === 0 && r ? /* @__PURE__ */ i(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      className: d(
+                                        "-ml-1 flex shrink-0 cursor-pointer items-center justify-center rounded p-1 transition-transform duration-200 ease-in-out hover:bg-secondary_subtle",
+                                        n && "rotate-90"
+                                      ),
+                                      "aria-label": n ? "Collapse row" : "Expand row",
+                                      "aria-expanded": n,
+                                      "aria-controls": `${t.id}-detail`,
+                                      onClick: (R) => {
+                                        R.stopPropagation(), t.toggleExpanded();
+                                      },
+                                      children: /* @__PURE__ */ i(Ue, { className: "size-4 text-fg-quaternary" })
+                                    }
+                                  ) : null,
+                                  /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: tn })
+                                ] })
+                              },
+                              a.id
+                            );
+                          })
+                        ]
+                      }
+                    ),
+                    n && H ? /* @__PURE__ */ i(
+                      "tr",
+                      {
+                        id: `${t.id}-detail`,
+                        className: "relative bg-secondary_subtle",
+                        children: /* @__PURE__ */ i("td", { colSpan: J, className: "p-0", children: H({
+                          row: t.original,
+                          rowId: t.id,
+                          colSpan: J,
+                          collapse: () => t.toggleExpanded(!1)
+                        }) })
+                      }
+                    ) : null
+                  ] }, t.id);
+                }),
+                !S && rt
+              ] })
+            ]
+          }
+        ),
+        ((je = f.session) == null ? void 0 : je.active) && /* @__PURE__ */ p(rn, { children: [
+          /* @__PURE__ */ i(vn, { session: f.session }),
+          f.session.dropLineY !== null && /* @__PURE__ */ i(
+            Sn,
+            {
+              y: f.session.dropLineY,
+              left: f.session.dropLineLeft,
+              width: f.session.dropLineWidth
+            }
+          )
+        ] })
+      ]
+    }
+  ), Ve = Ht ? /* @__PURE__ */ p("div", { className: d("flex flex-col gap-3", _e), children: [
+    Pe,
+    Ze,
+    Me,
+    Le
+  ] }) : /* @__PURE__ */ i("div", { className: _e, children: Me });
+  return Xt ? /* @__PURE__ */ i(
+    xn,
+    {
+      rowIds: ve,
+      columnKeys: Ie,
+      containerRef: V,
+      onSelectCell: Yt,
+      onEditingCellChange: Jt,
+      children: Ve
+    }
+  ) : Ve;
+}
+const lr = on(Un);
+export {
+  lr as TableComponent,
+  lr as default
+};