@pibit.ai/cure-design-system 0.3.16 → 1.0.0

package/dist/patterns/table/TableWrapper.js

@@ -1,167 +1,736 @@
-import { jsx as t, jsxs as v, Fragment as E } from "react/jsx-runtime";
-import { forwardRef as H, useState as b, useRef as W, useEffect as M } from "react";
-import { createPortal as O } from "react-dom";
-import { computePosition as P, offset as S, autoPlacement as $, size as j, shift as z } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { TableCard as L, Table as m } from "./table.js";
-import { cx as k } from "../../utils/cn.js";
-const D = H(
-  function({
-    data: c,
-    columns: l,
-    renderRowCell: x,
-    onRowClick: a,
-    arialabel: n,
-    size: f = "sm",
-    allowDefaultRowClass: y = !1,
-    centeredHeaders: i = [],
-    rootClassName: h,
-    removeBorders: d,
-    headerClassName: r,
-    isRowExpandable: p,
-    renderExpandedContent: g
-  }, T) {
-    return /* @__PURE__ */ t(L.Root, { ref: T, className: h, size: f, children: /* @__PURE__ */ v(m, { "aria-label": n, size: f, children: [
-      /* @__PURE__ */ t(m.Header, { className: r, children: l.map((e, u) => /* @__PURE__ */ t(
-        m.Head,
-        {
-          sticky: e.sticky,
-          stickyOffset: e.stickyOffset,
-          id: e.key,
-          label: e.label,
-          isRowHeader: !0,
-          allowsSorting: e.allowsSorting,
-          headerCellClass: i.includes(e.key) ? "justify-center" : "",
-          style: {
-            maxWidth: e.maxWidth,
-            minWidth: e.maxWidth,
-            width: e.maxWidth
-          },
-          className: "overflow-hidden"
-        },
-        u
-      )) }),
-      /* @__PURE__ */ t(m.Body, { items: c, children: (e) => {
-        const u = p ? p(e) : !1, w = e.id || e.rule_id || String(e);
-        return /* @__PURE__ */ t(
-          m.Row,
+import { jsx as i, jsxs as k } from "react/jsx-runtime";
+import { forwardRef as Dt, useState as q, useMemo as h, useCallback as B, useRef as qt, useEffect as Bt, useLayoutEffect as Jt } from "react";
+import { ChevronRight as Vt } from "@untitledui/icons";
+import { cx as c } from "../../utils/cn.js";
+import { TableCard as Yt, Table as d } from "./table.js";
+import { TablePagination as Qt } from "./TablePagination.js";
+import { getEffectiveAlignment as ot, resolveColumnLabel as Xt, alignmentClass as Zt } from "./toolbar/tableToolbarHelpers.js";
+import { findGridCell as Kt, isWithinCellEditor as er, getGridNeighbor as tr, getGridTabNeighbor as rr, focusGridCell as nr, GridNavProvider as ir } from "./useGridKeyboardNavigation.js";
+import { BulkActionBar as sr } from "./toolbar/BulkActionBar.js";
+import { TableToolbar as ar } from "./toolbar/TableToolbar.js";
+import { Checkbox as rt } from "../../primitives/checkbox/checkbox.js";
+import { ColumnHeaderMenu as or } from "./toolbar/ColumnHeaderMenu.js";
+import { Button as lr } from "../../primitives/button/button.js";
+import { SummaryFooterRow as dr } from "./toolbar/SummaryFooter.js";
+import { RowActionsMenu as cr } from "./toolbar/RowActionsMenu.js";
+import { Icon as fr } from "../../primitives/icon/icon.js";
+import { ShimmerLine as hr } from "../../primitives/shimmer/shimmer.js";
+const ur = 5, wr = "__all__", nt = {
+  ArrowUp: "up",
+  ArrowDown: "down",
+  ArrowLeft: "left",
+  ArrowRight: "right"
+}, J = (t) => t.__rowId ?? t.id ?? t.rule_id ?? String(t);
+function it(t, a) {
+  return t === "all" ? new Set(a) : t ?? /* @__PURE__ */ new Set();
+}
+function yr(t, a, o) {
+  return t ? t === "all" ? o.includes(a) : t.has(a) : !1;
+}
+function pr(t, a) {
+  return t ? t === "all" ? a.length : t.size : 0;
+}
+function xr(t, a) {
+  return a.length === 0 ? !1 : t === "all" ? !0 : a.every((o) => (t == null ? void 0 : t.has(o)) ?? !1);
+}
+function gr(t, a) {
+  return t === "all" ? a.length > 0 : a.some((o) => (t == null ? void 0 : t.has(o)) ?? !1);
+}
+function br(t) {
+  if (t)
+    return (a) => {
+      t(a === "all" ? "all" : new Set([...a].map(String)));
+    };
+}
+function mr(t) {
+  var a;
+  return t != null && t.length ? t.length > 1 ? !0 : ((a = t[0]) == null ? void 0 : a.key) !== wr : !1;
+}
+function st(t, a, o) {
+  return o ? ot(o, a ?? /* @__PURE__ */ new Map()) : (a == null ? void 0 : a.get(t)) ?? "left";
+}
+const de = "120px", Pe = (t) => {
+  if (!t) return 0;
+  const a = t.match(/^(\d+(?:\.\d+)?)px$/);
+  return a ? Number(a[1]) : 0;
+}, G = (t) => !!(t.maxWidth && t.sticky === "right"), Nr = (t) => ({
+  maxWidth: t.maxWidth,
+  minWidth: t.maxWidth ?? t.minWidth ?? de,
+  width: t.maxWidth
+}), at = (t) => G(t) && t.maxWidth ? {
+  minWidth: t.maxWidth,
+  width: t.maxWidth,
+  maxWidth: t.maxWidth
+} : {
+  minWidth: t.minWidth ?? de
+}, Fr = Dt(function({
+  data: a,
+  columns: o,
+  renderRowCell: Te,
+  onRowClick: V,
+  arialabel: lt,
+  size: Oe = "sm",
+  allowDefaultRowClass: dt = !1,
+  centeredHeaders: ct = [],
+  rootClassName: ft,
+  removeBorders: Le,
+  headerClassName: ht,
+  isRowExpandable: ze,
+  renderExpandedContent: ut,
+  loading: P = !1,
+  loadingRowCount: Ge = ur,
+  renderHeaderCell: ce,
+  tableClassName: wt,
+  getRowClassName: fe,
+  selectionMode: A = "none",
+  selectedKeys: C,
+  onSelectionChange: y,
+  inlineSelection: he = !1,
+  toolbar: p,
+  showToolbar: yt,
+  toolbarTitle: Ae,
+  toolbarTrailing: $e,
+  disableExtendedTools: je,
+  pagination: x,
+  showBorders: Y,
+  emptyState: Fe,
+  editChrome: S,
+  showEditActions: pt = !1,
+  searchCollapsible: He,
+  isEditable: xt,
+  toolbarSlot: ue,
+  rowHeightClass: Me,
+  groupedData: O,
+  showSummaryFooter: gt,
+  summaryFooterProps: we,
+  bulkActionBar: Q,
+  renderBulkActionBar: X,
+  onBulkDuplicate: Z,
+  onBulkDelete: K,
+  bulkActionBusy: ee,
+  columnAlignments: L,
+  onColumnHeaderAction: te,
+  showColumnHeaderMenu: bt,
+  columnMenuCapabilities: mt,
+  renderGroupHeader: Ue,
+  columnMenuSchema: $,
+  columnSchema: j,
+  labelMeta: Nt,
+  renderColumnHeaderMenuExtraItems: kt,
+  fillWidth: w = !1,
+  rowActions: ye,
+  onCellActivate: pe
+}, F) {
+  const [re, Ct] = q(() => /* @__PURE__ */ new Set()), [vt, St] = q(null), [b, xe] = q(null), [z, Rt] = q(null), ne = A === "single" || A === "multiple", ge = !!ye, R = ne && !he, be = mr(O), Wt = h(() => $ != null && $.length ? new Map($.map((e) => [e.key, e])) : /* @__PURE__ */ new Map(), [$]), De = h(() => j != null && j.length ? new Map(j.map((e) => [e.value, e])) : /* @__PURE__ */ new Map(), [j]), ie = h(() => o.map((e) => e.key), [o]), It = B((e) => {
+    Ct((r) => {
+      const n = new Set(r);
+      return n.has(e) ? n.delete(e) : n.add(e), n;
+    });
+  }, []), se = h(() => P ? Array.from({ length: Ge }, (e, r) => ({ id: `loading-${r}` })) : a.map((e) => {
+    const r = e;
+    if (r.__rowId != null)
+      return r;
+    const n = J(r);
+    return r.id != null && String(r.id) === n ? r : { ...r, id: n };
+  }), [P, a, Ge]), g = h(() => P ? [] : be && O ? O.flatMap(
+    (e) => re.has(e.key) ? [] : e.rows.map((r) => J(r))
+  ) : se.map((e) => J(e)), [P, be, O, re, se]), me = h(
+    () => it(C, g),
+    [C, g]
+  ), Ne = pr(C, g), ke = Ne > 0, qe = ke && !!(Q ?? X ?? Z ?? K), H = h(() => {
+    if (!ke) return;
+    const e = a.filter(
+      (r) => me.has(J(r))
+    );
+    return {
+      selectedKeys: me,
+      selectedRows: e,
+      clearSelection: () => y == null ? void 0 : y(/* @__PURE__ */ new Set()),
+      busy: ee
+    };
+  }, [ke, me, a, y, ee]), Be = h(() => {
+    if (ue != null) return ue;
+    if (qe) {
+      if (Q != null) return Q;
+      if (X && H)
+        return X(H);
+      if (H && (Z || K))
+        return /* @__PURE__ */ i(
+          sr,
           {
-            onAction: () => a == null ? void 0 : a(e),
-            id: w,
-            isExpandable: u,
-            renderExpandedContent: u ? g : void 0,
-            columns: l,
-            className: k(
-              a && "cursor-pointer",
-              y ? "prose" : "",
-              d && "[&>td]:after:hidden"
-              // Remove row borders
-            ),
-            children: l.map((o, N) => /* @__PURE__ */ t(
-              m.Cell,
-              {
-                sticky: o.sticky,
-                stickyOffset: o.stickyOffset,
-                style: {
-                  maxWidth: o.maxWidth,
-                  minWidth: o.maxWidth,
-                  width: o.maxWidth
-                },
-                className: "overflow-x-hidden text-left",
-                children: N === 0 && u ? /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: x(o.key, e[o.key], e) }) : x(o.key, e[o.key], e)
-              },
-              o.key
-            ))
-          },
-          w
+            count: Ne,
+            onDuplicate: Z,
+            onDelete: K,
+            onClearSelection: H.clearSelection,
+            busy: ee
+          }
         );
-      } })
-    ] }) });
-  }
-), _ = ({
-  content: s,
-  className: c = "",
-  link: l = !1,
-  textClassName: x = ""
-}) => {
-  const [a, n] = b(!1), [f, y] = b({ top: -9999, left: -9999 }), i = W(null), h = W(null);
-  return M(() => {
-    !a || !i.current || !h.current || P(i.current, h.current, {
-      middleware: [
-        S(8),
-        $({
-          allowedPlacements: ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"]
-        }),
-        j({
-          padding: 8,
-          apply({ availableWidth: d, availableHeight: r, elements: p }) {
-            Object.assign(p.floating.style, {
-              maxWidth: `${Math.min(d, 512)}px`,
-              maxHeight: `${Math.min(r, window.innerHeight * 0.4)}px`
-            });
+    }
+    return p ? /* @__PURE__ */ i(
+      ar,
+      {
+        sort: p.sort,
+        filter: p.filter,
+        search: p.search,
+        rowHeight: p.rowHeight,
+        hideFields: p.hideFields,
+        align: p.align,
+        groupBy: p.groupBy,
+        summary: p.summary,
+        sortContent: p.sortContent,
+        filterContent: p.filterContent,
+        fallbackTitle: Ae,
+        trailing: $e,
+        searchCollapsible: He,
+        disableExtendedTools: je
+      }
+    ) : null;
+  }, [
+    ue,
+    qe,
+    Q,
+    X,
+    H,
+    Z,
+    K,
+    ee,
+    Ne,
+    p,
+    Ae,
+    $e,
+    He,
+    je
+  ]), Je = Be != null && yt !== !1, Ve = !!x && (x == null ? void 0 : x.showPagination) !== !1, Et = Je || Ve, Ye = !P && a.length === 0 && Fe != null, m = !!(pt && S), Ce = !!(S != null && S.showFooterRow), T = xt ?? (m || Ce || ge), _t = Ye && !(Ce && S), M = o.length + (R ? 1 : 0) + (m ? 1 : 0), Pt = !!(gt && we), u = Y ? "border-r border-secondary last:border-r-0" : void 0, I = h(() => {
+    if (!w) return null;
+    const e = o.reduce(
+      (s, f) => G(f) ? s + Pe(f.maxWidth) : s,
+      0
+    );
+    return { minTableWidth: o.filter((s) => !G(s)).reduce(
+      (s, f) => s + Pe(f.minWidth ?? de),
+      0
+    ) + e };
+  }, [o, w]), Tt = h(() => {
+    const e = /* @__PURE__ */ new Map();
+    return te && o.forEach((r) => {
+      e.set(r.key, (n) => te(r.key, n));
+    }), e;
+  }, [o, te]), W = qt(null), [U, Qe] = q(null), ve = B((e, r, n) => {
+    var f;
+    let s = n ?? null;
+    if (s == null) {
+      const N = (f = Kt(W.current, e, r)) == null ? void 0 : f.getAttribute("data-grid-source-index"), E = N != null && N !== "" ? Number(N) : NaN;
+      s = Number.isNaN(E) ? null : E;
+    }
+    xe({ rowId: e, columnKey: r, sourceIndex: s });
+  }, []), Ot = B(
+    (e) => {
+      var ae, oe, le;
+      const r = e.key in nt;
+      if (e.key !== "Enter" && e.key !== "Tab" && e.key !== "Escape" && !r || er(e.target)) return;
+      if (e.key === "Escape") {
+        if (!b) return;
+        e.preventDefault(), e.stopPropagation(), xe(null), (ae = W.current) != null && ae.contains(document.activeElement) && document.activeElement.blur();
+        return;
+      }
+      const n = (le = (oe = e.target).closest) == null ? void 0 : le.call(oe, "[data-grid-cell]"), s = n == null ? void 0 : n.getAttribute("data-grid-row-id"), f = n == null ? void 0 : n.getAttribute("data-grid-col-key"), N = n == null ? void 0 : n.getAttribute("data-grid-source-index"), E = N != null && N !== "" ? Number(N) : NaN, l = Number.isNaN(E) ? null : E, v = b ?? (s && f ? {
+        rowId: s,
+        columnKey: f,
+        sourceIndex: l
+      } : null);
+      if (!v) return;
+      if (e.key === "Enter") {
+        if (!pe) return;
+        e.preventDefault(), e.stopPropagation(), pe({
+          rowId: v.rowId,
+          columnKey: v.columnKey,
+          sourceIndex: v.sourceIndex
+        });
+        return;
+      }
+      const _ = r ? tr(
+        W.current,
+        g,
+        ie,
+        v.rowId,
+        v.columnKey,
+        nt[e.key]
+      ) : rr(
+        W.current,
+        g,
+        ie,
+        v.rowId,
+        v.columnKey,
+        !e.shiftKey
+      );
+      if (!_) {
+        r && (e.preventDefault(), e.stopPropagation());
+        return;
+      }
+      e.preventDefault(), e.stopPropagation(), ve(_.rowId, _.columnKey, _.sourceIndex), requestAnimationFrame(() => nr(W.current, _.rowId, _.columnKey));
+    },
+    [b, g, ie, pe, ve]
+  );
+  Bt(() => {
+    if (!T || !b) return;
+    const e = (r) => {
+      const n = W.current;
+      n && !n.contains(r.target) && xe(null);
+    };
+    return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
+  }, [T, b]);
+  const Xe = h(() => {
+    let e = 0;
+    return R && (e += 40), m && (e += 56), o.forEach((r) => {
+      G(r) && (e += Pe(r.maxWidth));
+    }), e;
+  }, [o, m, R]), Se = h(
+    () => o.filter((e) => !G(e)).length,
+    [o]
+  ), Re = h(() => {
+    if (!w || !I) return null;
+    const { minTableWidth: e } = I;
+    return U ? Math.max(U, e) : e;
+  }, [U, w, I]), We = !!(w && I && U && U < I.minTableWidth), Ie = h(() => !Re || Se === 0 ? null : Math.max(0, (Re - Xe) / Se), [Re, Xe, Se]);
+  Jt(() => {
+    if (!w) {
+      Qe(null);
+      return;
+    }
+    const e = W.current;
+    if (!e) return;
+    const r = () => {
+      const s = e.clientWidth;
+      s > 0 && Qe((f) => f === s ? f : s);
+    };
+    r();
+    const n = new ResizeObserver(r);
+    return n.observe(e), () => {
+      n.disconnect();
+    };
+  }, [o.length, a.length, w, P, m, R]);
+  const Ee = B(
+    (e) => w ? G(e) && e.maxWidth ? at(e) : Ie != null ? {
+      width: `${Ie}px`,
+      minWidth: e.minWidth ?? de
+    } : at(e) : Nr(e),
+    [w, Ie]
+  ), Lt = h(() => {
+    if (!(!w || !I))
+      return We ? {
+        width: `${I.minTableWidth}px`,
+        tableLayout: "fixed"
+      } : {
+        width: "100%",
+        tableLayout: "fixed"
+      };
+  }, [w, I, We]), zt = B(
+    (e) => {
+      W.current = e, typeof F == "function" ? F(e) : F && (F.current = e);
+    },
+    [F]
+  ), Gt = ne ? {
+    selectionMode: A,
+    selectedKeys: C === "all" ? "all" : C,
+    onSelectionChange: br(y)
+  } : {}, At = (e) => {
+    const r = e.__sourceIndex;
+    return typeof r == "number" ? r : 0;
+  }, _e = ne && xr(C, g), $t = ne && gr(C, g), jt = () => {
+    if (y) {
+      if (_e) {
+        y(/* @__PURE__ */ new Set());
+        return;
+      }
+      y("all");
+    }
+  }, Ft = (e, r) => {
+    if (!y) return;
+    if (A === "single") {
+      y(r ? /* @__PURE__ */ new Set([e]) : /* @__PURE__ */ new Set());
+      return;
+    }
+    const n = C === "all" ? new Set(g) : new Set(it(C, g));
+    r ? n.add(e) : n.delete(e), y(n);
+  }, Ht = (e) => {
+    const r = re.has(e.key);
+    return Ue ? /* @__PURE__ */ i(
+      d.Row,
+      {
+        id: `group-${e.key}`,
+        highlightSelectedRow: !1,
+        className: "bg-secondary_subtle hover:bg-secondary_subtle",
+        children: /* @__PURE__ */ i(d.Cell, { colSpan: M, className: c(u), children: Ue(e) })
+      },
+      `group-${e.key}`
+    ) : /* @__PURE__ */ i(
+      d.Row,
+      {
+        id: `group-${e.key}`,
+        highlightSelectedRow: !1,
+        className: "bg-secondary_subtle hover:bg-secondary_subtle",
+        children: /* @__PURE__ */ i(d.Cell, { colSpan: M, className: c("py-1.5", u), children: /* @__PURE__ */ k(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center gap-2 px-2 text-left text-xs font-medium text-secondary",
+            onClick: () => It(e.key),
+            "aria-expanded": !r,
+            children: [
+              /* @__PURE__ */ i(
+                Vt,
+                {
+                  className: c(
+                    "size-4 shrink-0 text-fg-quaternary transition-transform",
+                    !r && "rotate-90"
+                  )
+                }
+              ),
+              /* @__PURE__ */ i("span", { className: "truncate", children: e.label || "(Empty)" }),
+              /* @__PURE__ */ k("span", { className: "text-tertiary", children: [
+                "(",
+                e.rows.length,
+                ")"
+              ] })
+            ]
           }
-        }),
-        z({ padding: 8 })
-      ]
-    }).then(({ x: d, y: r }) => {
-      y({ top: r, left: d });
-    });
-  }, [a]), /* @__PURE__ */ v(E, { children: [
-    /* @__PURE__ */ t(
-      "span",
+        ) })
+      },
+      `group-${e.key}`
+    );
+  }, Ze = (e, r) => {
+    const n = ze ? ze(e) : !1, s = J(e), f = At(e), N = yr(C, s, g), E = vt === s;
+    return /* @__PURE__ */ k(
+      d.Row,
       {
-        ref: i,
-        className: k(
-          "whitespace-nowrap overflow-hidden text-ellipsis w-full block",
-          x,
-          c,
-          l ? "!text-[var(--color-brand-600)]" : ""
+        onAction: () => V == null ? void 0 : V(e),
+        id: s,
+        value: e,
+        columns: o,
+        expandedColSpan: M,
+        isExpandable: n,
+        highlightSelectedRow: !he,
+        renderExpandedContent: n ? ut : void 0,
+        className: c(
+          V && "cursor-pointer",
+          dt ? "prose" : "",
+          Le && "[&>td]:after:hidden",
+          ge && "group/rowactions",
+          E && "bg-utility-brand-25 hover:bg-utility-brand-25",
+          Me,
+          fe == null ? void 0 : fe(e)
         ),
-        onMouseEnter: () => {
-          !i.current || !(i.current.scrollWidth > i.current.clientWidth) || (y({ top: -9999, left: -9999 }), n(!0));
-        },
-        onMouseLeave: (d) => {
-          var r;
-          (r = h.current) != null && r.contains(d.relatedTarget) || setTimeout(() => {
-            var p, g;
-            !((p = h.current) != null && p.matches(":hover")) && !((g = i.current) != null && g.matches(":hover")) && n(!1);
-          }, 100);
-        },
-        children: l ? /* @__PURE__ */ t("a", { href: s, target: "_blank", children: s }) : s
-      }
-    ),
-    a && O(
-      /* @__PURE__ */ t(
-        "div",
-        {
-          ref: h,
-          className: "fixed px-3 py-2 text-xs font-semibold text-white bg-primary-solid rounded-lg shadow-lg z-[9999] max-w-lg max-h-[40vh] overflow-y-auto break-words whitespace-normal",
-          style: {
-            top: `${f.top}px`,
-            left: `${f.left}px`
-          },
-          onMouseLeave: (d) => {
-            var r;
-            (r = i.current) != null && r.contains(d.relatedTarget) || n(!1);
+        children: [
+          R && /* @__PURE__ */ i(
+            d.Cell,
+            {
+              className: c("relative w-10 text-center", u),
+              style: { minWidth: "40px", width: "40px" },
+              children: /* @__PURE__ */ i(
+                "div",
+                {
+                  className: "flex items-center justify-center",
+                  onClick: (l) => l.stopPropagation(),
+                  onKeyDown: (l) => l.stopPropagation(),
+                  children: /* @__PURE__ */ i(
+                    rt,
+                    {
+                      checked: N,
+                      onCheckedChange: (l) => Ft(s, l === !0),
+                      "aria-label": `Select row ${s}`,
+                      className: "items-center justify-center"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          o.map((l, v) => {
+            const _ = De.get(l.key), ae = st(l.key, L, _), oe = (z == null ? void 0 : z.rowId) === s && (z == null ? void 0 : z.columnKey) === l.key, le = T && !oe && (b == null ? void 0 : b.rowId) === s && (b == null ? void 0 : b.columnKey) === l.key;
+            return /* @__PURE__ */ i(
+              d.Cell,
+              {
+                sticky: l.sticky,
+                stickyOffset: l.stickyOffset,
+                style: Ee(l),
+                "data-grid-cell": "",
+                "data-grid-row-id": s,
+                "data-grid-col-key": l.key,
+                "data-grid-source-index": f,
+                className: c(
+                  "relative overflow-x-hidden",
+                  // Excel-style selected-cell highlight: an inset brand border on the
+                  // selected cell (state-driven). Inset so it sits at the cell edge
+                  // without shifting layout. `after:opacity-0` hides the row's bottom-
+                  // border pseudo-element so it doesn't overlap the ring's bottom edge.
+                  le && "z-1 outline-hidden ring-2 ring-inset ring-brand after:opacity-0",
+                  l.cellClassName,
+                  Zt(ae),
+                  u
+                ),
+                children: (() => {
+                  const tt = v === 0 && (n || ge) ? /* @__PURE__ */ k("div", { className: "flex items-center", children: [
+                    ye && /* @__PURE__ */ i(
+                      "div",
+                      {
+                        className: "flex items-center justify-center",
+                        onClick: (D) => D.stopPropagation(),
+                        onKeyDown: (D) => D.stopPropagation(),
+                        children: /* @__PURE__ */ i(
+                          cr,
+                          {
+                            config: ye,
+                            sourceRowIndex: f,
+                            item: e,
+                            triggerClassName: c(
+                              "transition-opacity group-hover/rowactions:opacity-100 focus-visible:opacity-100",
+                              E ? "opacity-100" : "opacity-0"
+                            ),
+                            onOpenChange: (D) => St(D ? s : null)
+                          }
+                        )
+                      }
+                    ),
+                    Te(l.key, e[l.key], e)
+                  ] }) : Te(l.key, e[l.key], e);
+                  return T ? /* @__PURE__ */ i("div", { "data-grid-focus": !0, tabIndex: -1, className: "outline-hidden", children: tt }) : tt;
+                })()
+              },
+              l.key
+            );
+          }),
+          m && S && /* @__PURE__ */ i(
+            d.Cell,
+            {
+              className: c("relative w-14 text-center", u),
+              style: { minWidth: "56px", width: "56px" },
+              children: /* @__PURE__ */ i(
+                "button",
+                {
+                  type: "button",
+                  title: "Delete row",
+                  "aria-label": "Delete row",
+                  className: "inline-flex items-center justify-center rounded p-1 text-fg-quaternary hover:bg-secondary_subtle hover:text-fg-secondary",
+                  onClick: (l) => {
+                    l.stopPropagation(), S.onDeleteRow(f);
+                  },
+                  children: /* @__PURE__ */ i(fr, { name: "Trash02", className: "size-3" })
+                }
+              )
+            }
+          )
+        ]
+      },
+      s
+    );
+  }, Mt = (e) => /* @__PURE__ */ k(
+    d.Row,
+    {
+      id: String(e.id),
+      isExpandable: !1,
+      className: c(Le && "[&>td]:after:hidden", Me),
+      children: [
+        R && /* @__PURE__ */ i(
+          d.Cell,
+          {
+            className: c("relative w-10", u),
+            style: { minWidth: "40px", width: "40px" }
+          }
+        ),
+        o.map((r) => /* @__PURE__ */ i(
+          d.Cell,
+          {
+            sticky: r.sticky,
+            stickyOffset: r.stickyOffset,
+            style: Ee(r),
+            className: c("overflow-x-hidden text-left", r.cellClassName, u),
+            children: /* @__PURE__ */ i(hr, { height: "14px", width: "75%", className: "rounded" })
           },
-          children: s
-        }
+          r.key
+        )),
+        m && /* @__PURE__ */ i(d.Cell, { className: c("w-14", u), style: { minWidth: "56px", width: "56px" } })
+      ]
+    },
+    String(e.id)
+  ), Ut = () => P ? se.map((e) => Mt(e)) : be && O ? O.flatMap((e) => {
+    const r = re.has(e.key);
+    return [
+      Ht(e),
+      ...r ? [] : e.rows.map((n) => Ze(n))
+    ];
+  }) : se.map((e) => Ze(e)), Ke = /* @__PURE__ */ i(
+    Yt.Root,
+    {
+      ref: zt,
+      onKeyDownCapture: T ? Ot : void 0,
+      className: c(
+        "w-full",
+        !w || We ? "overflow-x-auto" : "overflow-x-hidden",
+        Y && "border border-secondary rounded-xl",
+        ft
       ),
-      document.body
+      size: Oe,
+      children: /* @__PURE__ */ k(
+        d,
+        {
+          "aria-label": lt,
+          size: Oe,
+          isEditable: T,
+          inlineSelection: he,
+          className: c(w && "min-w-full", wt),
+          style: Lt,
+          ...Gt,
+          children: [
+            /* @__PURE__ */ k(
+              d.Header,
+              {
+                className: c(
+                  "sticky top-0",
+                  Y && "[&>tr>th:first-child]:rounded-bl-none [&>tr>th:last-child]:rounded-br-none z-1",
+                  ht
+                ),
+                children: [
+                  R && /* @__PURE__ */ i(
+                    d.Head,
+                    {
+                      label: "",
+                      allowsSorting: !1,
+                      isRowHeader: !1,
+                      style: { minWidth: "40px", width: "40px" },
+                      className: c(u),
+                      headerCellClass: "justify-center",
+                      children: A === "multiple" && y && /* @__PURE__ */ i("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ i(
+                        rt,
+                        {
+                          checked: _e ? !0 : $t && !_e ? "indeterminate" : !1,
+                          onCheckedChange: () => jt(),
+                          "aria-label": "Select all rows",
+                          className: "items-center justify-center"
+                        }
+                      ) })
+                    },
+                    "selection"
+                  ),
+                  o.map((e, r) => {
+                    const n = bt ? Wt.get(e.key) : void 0, s = De.get(e.key), f = st(e.key, L, s), N = ct.includes(e.key) || f === "center" ? "justify-center" : f === "right" ? "justify-end" : "";
+                    return /* @__PURE__ */ k(
+                      d.Head,
+                      {
+                        sticky: e.sticky,
+                        stickyOffset: e.stickyOffset,
+                        id: e.key,
+                        label: e.label,
+                        isRowHeader: r === 0 && !R,
+                        allowsSorting: e.allowsSorting,
+                        headerCellClass: `${e.headerCellClass} ${N}`,
+                        style: Ee(e),
+                        className: c("overflow-hidden", e.headClassName, u),
+                        children: [
+                          n && te && /* @__PURE__ */ i(
+                            or,
+                            {
+                              column: n,
+                              columnLabel: n.label ?? (s ? Xt(s, Nt) : e.label),
+                              currentAlignment: s ? ot(s, L ?? /* @__PURE__ */ new Map()) : (L == null ? void 0 : L.get(e.key)) ?? "left",
+                              capabilities: mt,
+                              onAction: Tt.get(e.key),
+                              renderExtraItems: kt
+                            }
+                          ),
+                          (ce == null ? void 0 : ce(e.key)) ?? null
+                        ]
+                      },
+                      e.key
+                    );
+                  }),
+                  m && /* @__PURE__ */ i(
+                    d.Head,
+                    {
+                      label: "",
+                      allowsSorting: !1,
+                      isRowHeader: !1,
+                      style: { minWidth: "56px", width: "56px" },
+                      className: c(u)
+                    },
+                    "actions"
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ k(d.Body, { children: [
+              !Ye && Ut(),
+              _t && /* @__PURE__ */ i(d.Row, { id: "empty-state", highlightSelectedRow: !1, children: /* @__PURE__ */ i(
+                d.Cell,
+                {
+                  colSpan: M,
+                  className: c(
+                    "text-left text-placeholder_subtle border-b border-secondary py-3",
+                    u
+                  ),
+                  children: Fe
+                }
+              ) }, "empty-state"),
+              Ce && S && /* @__PURE__ */ k(d.Row, { id: "add-row-footer", highlightSelectedRow: !1, children: [
+                /* @__PURE__ */ i(d.Cell, { colSpan: M - (m ? 1 : 0), className: c(u), children: /* @__PURE__ */ i(
+                  lr,
+                  {
+                    color: "tertiary",
+                    className: "bg-secondary text-primary",
+                    size: "xs",
+                    onClick: S.onAddRow,
+                    children: "+ Add Row"
+                  }
+                ) }),
+                m && /* @__PURE__ */ i(
+                  d.Cell,
+                  {
+                    className: c("w-14", u),
+                    style: { minWidth: "56px", width: "56px" }
+                  }
+                )
+              ] }, "add-row-footer"),
+              Pt && we && /* @__PURE__ */ i(
+                dr,
+                {
+                  ...we,
+                  hasActionsColumn: m,
+                  hasSelectionColumn: R,
+                  showBorders: !!Y
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  ), et = T ? /* @__PURE__ */ i(
+    ir,
+    {
+      rowIds: g,
+      columnKeys: ie,
+      containerRef: W,
+      onSelectCell: ve,
+      onEditingCellChange: Rt,
+      children: Ke
+    }
+  ) : Ke;
+  return Et ? /* @__PURE__ */ k("div", { className: "flex flex-col gap-3", children: [
+    Je && Be,
+    et,
+    Ve && x && /* @__PURE__ */ i(
+      Qt,
+      {
+        currentPage: x.currentPage,
+        pageSize: x.pageSize,
+        totalPages: x.totalPages,
+        totalItems: x.totalItems,
+        onPageChange: x.onPageChange,
+        onPageSizeChange: x.onPageSizeChange,
+        showPagination: x.showPagination
+      }
     )
-  ] });
-}, G = (s, c = "", l, x = "start", a, n, f) => s === "" || s === "-" ? /* @__PURE__ */ t("span", { className: `text-left ${c}`, children: s || n || "-" }) : /* @__PURE__ */ t(
-  _,
-  {
-    content: s,
-    className: c,
-    link: l,
-    tooltipPosition: x,
-    tooltipSide: a,
-    textClassName: f
-  }
-);
+  ] }) : et;
+});
 export {
-  _ as EllipsisContentWithTooltip,
-  D as TableWrapper,
-  G as createEllipsisContent
+  Fr as TableWrapper
 };