react-gridix 0.1.0 → 0.1.1

package/dist/react-gridix.js

@@ -1,99 +1,9 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import { forwardRef as je, useId as Me, useRef as Q, useEffect as be, useState as M, useMemo as $e, createElement as ie } from "react";
-import { createPortal as lt } from "react-dom";
-const ut = je(function({ variant: s = "primary", size: c = "md", loading: h = !1, disabled: v, className: b, children: _, ...m }, E) {
-  const x = ["rk-btn", `rk-btn--${s}`, `rk-btn--${c}`, b].filter(Boolean).join(" ");
-  return /* @__PURE__ */ p("button", { ref: E, className: x, disabled: v || h, "aria-busy": h || void 0, ...m, children: [
-    h && /* @__PURE__ */ o("span", { className: "rk-spinner", "aria-hidden": "true" }),
-    _
-  ] });
-}), ft = je(function({ label: s, error: c, hint: h, id: v, className: b, ..._ }, m) {
-  const E = Me(), x = v ?? E, I = c || h ? `${x}-desc` : void 0;
-  return /* @__PURE__ */ p("div", { className: ["rk-field", b].filter(Boolean).join(" "), children: [
-    s && /* @__PURE__ */ o("label", { className: "rk-label", htmlFor: x, children: s }),
-    /* @__PURE__ */ o(
-      "input",
-      {
-        ref: m,
-        id: x,
-        className: `rk-input${c ? " rk-input--error" : ""}`,
-        "aria-invalid": c ? !0 : void 0,
-        "aria-describedby": I,
-        ..._
-      }
-    ),
-    (c || h) && /* @__PURE__ */ o("span", { id: I, className: c ? "rk-error-text" : "rk-hint", children: c ?? h })
-  ] });
-});
-function ht({ title: l, footer: s, className: c, children: h, ...v }) {
-  return /* @__PURE__ */ p("div", { className: ["rk-card", c].filter(Boolean).join(" "), ...v, children: [
-    l && /* @__PURE__ */ o("div", { className: "rk-card__header", children: l }),
-    /* @__PURE__ */ o("div", { className: "rk-card__body", children: h }),
-    s && /* @__PURE__ */ o("div", { className: "rk-card__footer", children: s })
-  ] });
-}
-function kt({ tone: l = "neutral", className: s, children: c, ...h }) {
-  return /* @__PURE__ */ o("span", { className: ["rk-badge", `rk-badge--${l}`, s].filter(Boolean).join(" "), ...h, children: c });
-}
-function bt({ tone: l = "info", title: s, onClose: c, className: h, children: v, ...b }) {
-  return /* @__PURE__ */ p(
-    "div",
-    {
-      role: l === "danger" || l === "warning" ? "alert" : "status",
-      className: ["rk-alert", `rk-alert--${l}`, h].filter(Boolean).join(" "),
-      ...b,
-      children: [
-        /* @__PURE__ */ p("div", { className: "rk-alert__content", children: [
-          s && /* @__PURE__ */ o("strong", { className: "rk-alert__title", children: s }),
-          /* @__PURE__ */ o("div", { children: v })
-        ] }),
-        c && /* @__PURE__ */ o("button", { type: "button", className: "rk-alert__close", "aria-label": "Dismiss", onClick: c, children: "×" })
-      ]
-    }
-  );
-}
-function gt({ open: l, onClose: s, title: c, footer: h, children: v }) {
-  const b = Me(), _ = Q(null);
-  return be(() => {
-    var I;
-    if (!l) return;
-    const m = document.activeElement;
-    (I = _.current) == null || I.focus();
-    const E = (P) => {
-      P.key === "Escape" && s();
-    };
-    document.addEventListener("keydown", E);
-    const x = document.body.style.overflow;
-    return document.body.style.overflow = "hidden", () => {
-      var P;
-      document.removeEventListener("keydown", E), document.body.style.overflow = x, (P = m == null ? void 0 : m.focus) == null || P.call(m);
-    };
-  }, [l, s]), !l || typeof document > "u" ? null : lt(
-    /* @__PURE__ */ o("div", { className: "rk-overlay", onMouseDown: (m) => m.target === m.currentTarget && s(), children: /* @__PURE__ */ p(
-      "div",
-      {
-        ref: _,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": c ? b : void 0,
-        tabIndex: -1,
-        className: "rk-modal",
-        children: [
-          c && /* @__PURE__ */ p("div", { className: "rk-modal__header", children: [
-            /* @__PURE__ */ o("h2", { id: b, className: "rk-modal__title", children: c }),
-            /* @__PURE__ */ o("button", { type: "button", className: "rk-alert__close", "aria-label": "Close", onClick: s, children: "×" })
-          ] }),
-          /* @__PURE__ */ o("div", { className: "rk-modal__body", children: v }),
-          h && /* @__PURE__ */ o("div", { className: "rk-modal__footer", children: h })
-        ]
-      }
-    ) }),
-    document.body
-  );
-}
-const J = (...l) => l.filter(Boolean).join(" ");
-function it() {
-  return /* @__PURE__ */ o("svg", { viewBox: "0 0 16 16", width: "100%", height: "100%", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ o(
+import { jsxs as $, jsx as d, Fragment as gt } from "react/jsx-runtime";
+import { useState as V, useRef as W, useCallback as kt, useEffect as ae, createElement as se, useLayoutEffect as bt, useMemo as qe } from "react";
+import { createPortal as _t } from "react-dom";
+const le = (...o) => o.filter(Boolean).join(" ");
+function mt() {
+  return /* @__PURE__ */ d("svg", { viewBox: "0 0 16 16", width: "100%", height: "100%", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ d(
     "path",
     {
       d: "M3.5 8.5l3 3 6-7",
@@ -105,510 +15,654 @@ function it() {
     }
   ) });
 }
-function ot() {
-  return /* @__PURE__ */ o("svg", { viewBox: "0 0 16 16", width: "100%", height: "100%", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ o("path", { d: "M4 8h8", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" }) });
+function vt() {
+  return /* @__PURE__ */ d("svg", { viewBox: "0 0 16 16", width: "100%", height: "100%", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ d("path", { d: "M4 8h8", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" }) });
 }
-function Ke({
-  checked: l,
+function Ge({
+  checked: o,
   onChange: s,
   indeterminate: c = !1,
   variant: h = "native",
-  disabled: v = !1,
+  disabled: I = !1,
   label: b,
-  "aria-label": _,
-  id: m,
-  name: E,
-  indicator: x,
-  className: I,
-  style: P,
-  classNames: j = {},
-  styles: y = {}
+  "aria-label": m,
+  id: O,
+  name: H,
+  indicator: B,
+  className: G,
+  style: w,
+  classNames: k = {},
+  styles: E = {}
 }) {
-  const B = c ? "indeterminate" : l ? "checked" : "unchecked";
-  return /* @__PURE__ */ p(
+  const F = c ? "indeterminate" : o ? "checked" : "unchecked";
+  return /* @__PURE__ */ $(
     "label",
     {
-      className: J(
+      className: le(
         "rk-checkbox",
         `rk-checkbox--${h}`,
-        B === "checked" && "rk-checkbox--checked",
+        F === "checked" && "rk-checkbox--checked",
         c && "rk-checkbox--indeterminate",
-        v && "rk-checkbox--disabled",
-        j.root,
-        I
+        I && "rk-checkbox--disabled",
+        k.root,
+        G
       ),
-      style: { ...y.root, ...P },
-      "data-state": B,
+      style: { ...E.root, ...w },
+      "data-state": F,
       children: [
-        h === "native" ? /* @__PURE__ */ o(
+        h === "native" ? /* @__PURE__ */ d(
           "input",
           {
             type: "checkbox",
-            id: m,
-            name: E,
-            ref: (F) => {
-              F && (F.indeterminate = c);
+            id: O,
+            name: H,
+            ref: (y) => {
+              y && (y.indeterminate = c);
             },
-            className: J("rk-checkbox__control", j.control),
-            style: y.control,
-            checked: l,
-            disabled: v,
-            "aria-label": _,
-            "data-state": B,
-            onChange: (F) => s(F.target.checked)
+            className: le("rk-checkbox__control", k.control),
+            style: E.control,
+            checked: o,
+            disabled: I,
+            "aria-label": m,
+            "data-state": F,
+            onChange: (y) => s(y.target.checked)
           }
-        ) : /* @__PURE__ */ o(
+        ) : /* @__PURE__ */ d(
           "button",
           {
             type: "button",
             role: "checkbox",
-            id: m,
-            className: J("rk-checkbox__control", j.control),
-            style: y.control,
-            "aria-checked": c ? "mixed" : l,
-            "aria-label": _,
-            disabled: v,
-            "data-state": B,
-            onClick: () => s(!l),
-            children: /* @__PURE__ */ o(
+            id: O,
+            className: le("rk-checkbox__control", k.control),
+            style: E.control,
+            "aria-checked": c ? "mixed" : o,
+            "aria-label": m,
+            disabled: I,
+            "data-state": F,
+            onClick: () => s(!o),
+            children: /* @__PURE__ */ d(
               "span",
               {
-                className: J(
+                className: le(
                   "rk-checkbox__indicator",
-                  x !== void 0 && !c && "rk-checkbox__indicator--custom",
-                  j.indicator
+                  B !== void 0 && !c && "rk-checkbox__indicator--custom",
+                  k.indicator
                 ),
-                style: y.indicator,
-                "data-state": B,
+                style: E.indicator,
+                "data-state": F,
                 "aria-hidden": "true",
-                children: c ? h === "tick" ? /* @__PURE__ */ o(ot, {}) : null : x !== void 0 ? x : h === "tick" ? /* @__PURE__ */ o(it, {}) : null
+                children: c ? h === "tick" ? /* @__PURE__ */ d(vt, {}) : null : B !== void 0 ? B : h === "tick" ? /* @__PURE__ */ d(mt, {}) : null
               }
             )
           }
         ),
-        b != null && /* @__PURE__ */ o("span", { className: J("rk-checkbox__label", j.label), style: y.label, children: b })
+        b != null && b !== !1 && b !== "" && /* @__PURE__ */ d("span", { className: le("rk-checkbox__label", k.label), style: E.label, children: b })
       ]
     }
   );
 }
-const $ = (...l) => l.filter(Boolean).join(" "), Pe = (l, s) => `${typeof l}:${l}\0${s}`;
-function ke(l, s) {
-  const c = s[l.field];
-  return l.valueFormatter ? l.valueFormatter(c, s) : l.type === "boolean" && typeof c == "boolean" ? c ? "Yes" : "No" : c == null ? "" : c instanceof Date ? c.toLocaleDateString() : String(c);
+const Ne = (...o) => o.filter(Boolean).join(" "), yt = typeof window < "u" ? bt : ae;
+function xt({
+  column: o,
+  label: s,
+  value: c,
+  onChange: h,
+  theme: I,
+  indicatorClassName: b,
+  indicatorStyle: m,
+  popupClassName: O,
+  popupStyle: H,
+  inputClassName: B,
+  inputStyle: G
+}) {
+  const [w, k] = V(!1), [E, F] = V({ top: 0, left: 0 }), y = W(null), R = W(null), q = c.trim() !== "", L = kt(() => {
+    var j;
+    const g = y.current;
+    if (!g) return;
+    const K = g.getBoundingClientRect(), A = ((j = R.current) == null ? void 0 : j.offsetWidth) ?? 260, T = Math.max(8, Math.min(K.left, window.innerWidth - A - 8));
+    F({ top: K.bottom + 6, left: T });
+  }, []);
+  yt(() => {
+    w && L();
+  }, [w, L]), ae(() => {
+    if (!w) return;
+    const g = (A) => {
+      var j, de;
+      const T = A.target;
+      (j = R.current) != null && j.contains(T) || (de = y.current) != null && de.contains(T) || k(!1);
+    }, K = (A) => {
+      var T;
+      A.key === "Escape" && (k(!1), (T = y.current) == null || T.focus());
+    };
+    return document.addEventListener("mousedown", g), document.addEventListener("keydown", K), window.addEventListener("resize", L), window.addEventListener("scroll", L, !0), () => {
+      document.removeEventListener("mousedown", g), document.removeEventListener("keydown", K), window.removeEventListener("resize", L), window.removeEventListener("scroll", L, !0);
+    };
+  }, [w, L]);
+  const _e = () => {
+    var g;
+    k(!1), (g = y.current) == null || g.focus();
+  };
+  return /* @__PURE__ */ $(gt, { children: [
+    /* @__PURE__ */ d(
+      "button",
+      {
+        ref: y,
+        type: "button",
+        className: Ne(
+          "rk-grid__filter-btn",
+          q && "rk-grid__filter-btn--active",
+          w && "rk-grid__filter-btn--open",
+          b
+        ),
+        style: m,
+        "aria-label": `Filter ${s}`,
+        "aria-haspopup": "dialog",
+        "aria-expanded": w,
+        "data-active": q || void 0,
+        onClick: (g) => {
+          g.stopPropagation(), w || L(), k((K) => !K);
+        },
+        children: o.filterIndicator ? se(o.filterIndicator, { column: o, active: q, open: w }) : /* @__PURE__ */ d("span", { className: "rk-grid__filter-dot", "aria-hidden": "true" })
+      }
+    ),
+    w && typeof document < "u" && _t(
+      /* @__PURE__ */ $(
+        "div",
+        {
+          ref: R,
+          role: "dialog",
+          "aria-label": `Filter ${s}`,
+          "data-rk-theme": I || void 0,
+          className: Ne("rk-grid-popup", O),
+          style: { position: "fixed", top: E.top, left: E.left, ...H },
+          children: [
+            o.filterRenderer ? se(o.filterRenderer, { column: o, value: c, onChange: h }) : /* @__PURE__ */ d(
+              "input",
+              {
+                autoFocus: !0,
+                type: "text",
+                className: Ne("rk-grid__filter-input", B),
+                style: G,
+                value: c,
+                placeholder: o.filterPlaceholder ?? `Filter ${s}…`,
+                "aria-label": `Filter text for ${s}`,
+                onChange: (g) => h(g.target.value),
+                onKeyDown: (g) => {
+                  g.key === "Enter" && _e();
+                }
+              }
+            ),
+            q && /* @__PURE__ */ d("button", { type: "button", className: "rk-grid__filter-clear", onClick: () => h(""), children: "Clear" })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+const Se = /* @__PURE__ */ new Set(["__proto__", "prototype", "constructor"]), Ye = (o, s) => Object.prototype.hasOwnProperty.call(o, s);
+function z(o, s) {
+  if (o === null || typeof o != "object") return;
+  if (Ye(o, s)) return o[s];
+  let c = o;
+  for (const h of s.split(".")) {
+    if (c == null || typeof c != "object" || Se.has(h)) return;
+    c = c[h];
+  }
+  return c;
 }
-function at(l, s) {
-  return typeof l == "number" && typeof s == "number" ? l - s : l instanceof Date && s instanceof Date ? l.getTime() - s.getTime() : typeof l == "boolean" && typeof s == "boolean" ? Number(l) - Number(s) : String(l).localeCompare(String(s), void 0, { numeric: !0, sensitivity: "base" });
+function Je(o, s, c) {
+  if (Array.isArray(o)) {
+    const h = [...o];
+    return h[s] = c, h;
+  }
+  return { ...o, [s]: c };
 }
-function mt({
-  columns: l,
+function De(o, s, c) {
+  const h = o ?? {};
+  if (Ye(h, s) || !s.includes("."))
+    return Se.has(s) ? o : Je(h, s, c);
+  const [I, ...b] = s.split(".");
+  if (Se.has(I)) return o;
+  const m = h[I];
+  return Je(h, I, De(m !== null && typeof m == "object" ? m : {}, b.join("."), c));
+}
+const D = (...o) => o.filter(Boolean).join(" "), Ue = (o, s) => `${typeof o}:${o}\0${s}`, Ie = (o) => o.headerName ?? (o.type === "boolean" ? "" : o.field), be = (o) => Ie(o) || o.field;
+function Ce(o, s) {
+  const c = z(s, o.field);
+  return o.valueFormatter ? o.valueFormatter(c, s) : o.type === "boolean" && typeof c == "boolean" ? c ? "Yes" : "No" : c == null ? "" : c instanceof Date ? c.toLocaleDateString() : String(c);
+}
+function wt(o, s) {
+  return typeof o == "number" && typeof s == "number" ? o - s : o instanceof Date && s instanceof Date ? o.getTime() - s.getTime() : typeof o == "boolean" && typeof s == "boolean" ? Number(o) - Number(s) : String(o).localeCompare(String(s), void 0, { numeric: !0, sensitivity: "base" });
+}
+function St({
+  columns: o,
   rows: s,
   getRowId: c,
   editable: h = !1,
-  enterMovesDown: v = !0,
+  enterMovesDown: I = !0,
   onCellEdit: b,
-  onRowsChange: _,
-  sortable: m = !0,
-  defaultSort: E = null,
-  onSortChange: x,
-  searchable: I = !0,
-  searchPlaceholder: P = "Search…",
-  columnFilters: j = !0,
-  pagination: y = !0,
-  paginationPosition: B = "bottom",
+  onRowsChange: m,
+  sortable: O = !0,
+  defaultSort: H = null,
+  onSortChange: B,
+  searchable: G = !0,
+  searchPlaceholder: w = "Search…",
+  pagination: k = !0,
+  paginationPosition: E = "bottom",
   pageSize: F = 10,
-  pageSizeOptions: oe = [5, 10, 25, 50],
-  onRowClick: ae,
-  toolbar: ge,
-  emptyMessage: Fe = "No rows to show",
-  striped: Le = !1,
-  checkboxVariant: Ve = "native",
-  maxHeight: me,
-  className: Re,
-  style: Ae,
-  classNames: S = {},
-  styles: D = {},
-  rowClassName: de,
-  rowStyle: se
+  pageSizeOptions: y = [5, 10, 25, 50],
+  onRowClick: R,
+  toolbar: q,
+  emptyMessage: L = "No rows to show",
+  striped: _e = !1,
+  stripeColors: g,
+  checkboxVariant: K = "native",
+  animateRows: A = !0,
+  theme: T,
+  maxHeight: j,
+  className: de,
+  style: He,
+  classNames: N = {},
+  styles: x = {},
+  rowClassName: me,
+  rowStyle: ve
 }) {
-  const g = (e, t) => ({
-    className: $(t, S[e]),
-    style: D[e]
-  }), [pe, _e] = M(s), A = Q(s);
-  be(() => {
-    A.current = s, _e(s);
+  const _ = (e, t) => ({
+    className: D(t, N[e]),
+    style: x[e]
+  }), [Pe, $e] = V(s), Q = W(s);
+  ae(() => {
+    Q.current = s, $e(s);
   }, [s]);
-  const ve = (e) => {
-    A.current = e, _e(e);
-  }, [U, ze] = M(""), [z, xe] = M({}), [w, We] = M(E), [qe, W] = M(0), [T, Ge] = M(F), [q, G] = M(null), L = Q(0), X = Q(null), ce = Q(/* @__PURE__ */ new Map()), ye = $e(
-    () => pe.map((e, t) => ({ row: e, index: t, id: c ? c(e, t) : t })),
-    [pe, c]
-  ), O = $e(() => {
-    const e = U.trim().toLowerCase(), t = Object.entries(z).filter(([, n]) => n.trim() !== "");
-    let r = ye.filter(({ row: n }) => e && !l.some((d) => ke(d, n).toLowerCase().includes(e)) ? !1 : t.every(([i, d]) => {
-      const f = l.find((a) => a.field === i);
-      return f ? ke(f, n).toLowerCase().includes(d.trim().toLowerCase()) : !0;
+  const Le = (e) => {
+    Q.current = e, $e(e);
+  }, [X, Qe] = V(""), [Z, Xe] = V({}), [v, Ze] = V(H), [et, ee] = V(0), [P, tt] = V(F), [te, re] = V(null), J = W(0), ce = W(null), ye = W(/* @__PURE__ */ new Map()), Te = qe(
+    () => Pe.map((e, t) => ({ row: e, index: t, id: c ? c(e, t) : t })),
+    [Pe, c]
+  ), ne = qe(() => {
+    const e = X.trim().toLowerCase(), t = Object.entries(Z).filter(
+      ([n, i]) => i.trim() !== "" && o.some((l) => l.field === n && l.filterable)
+    );
+    let r = Te.filter(({ row: n }) => e && !o.some((l) => Ce(l, n).toLowerCase().includes(e)) ? !1 : t.every(([i, l]) => {
+      const f = o.find((a) => a.field === i);
+      return f ? Ce(f, n).toLowerCase().includes(l.trim().toLowerCase()) : !0;
     }));
-    if (w) {
-      const n = l.find((i) => i.field === w.field);
+    if (v) {
+      const n = o.find((i) => i.field === v.field);
       if (n) {
-        const i = w.direction === "asc" ? 1 : -1;
-        r = [...r].sort((d, f) => {
-          const a = d.row[n.field], u = f.row[n.field], k = a == null || a === "", N = u == null || u === "";
-          return k || N ? k === N ? 0 : k ? 1 : -1 : (n.comparator ? n.comparator(a, u, d.row, f.row) : at(a, u)) * i;
+        const i = v.direction === "asc" ? 1 : -1;
+        r = [...r].sort((l, f) => {
+          const a = z(l.row, n.field), u = z(f.row, n.field), p = a == null || a === "", C = u == null || u === "";
+          return p || C ? p === C ? 0 : p ? 1 : -1 : (n.comparator ? n.comparator(a, u, l.row, f.row) : wt(a, u)) * i;
         });
       }
     }
     return r;
-  }, [ye, l, U, z, w]);
-  be(() => W(0), [U, z, w, T]);
-  const V = O.length, Y = y ? Math.max(1, Math.ceil(V / T)) : 1, C = Math.min(qe, Y - 1), K = y ? O.slice(C * T, C * T + T) : O, Oe = V === 0 ? 0 : y ? C * T + 1 : 1, Ye = y ? Math.min(V, (C + 1) * T) : V, Ne = (e) => e.sortable ?? m, we = (e) => e.filterable ?? j, Z = (e, t, r) => ({
-    value: t[e.field],
-    formattedValue: ke(e, t),
+  }, [Te, o, X, Z, v]);
+  ae(() => ee(0), [X, Z, v, P]);
+  const Be = W(null), U = ne.length, oe = k ? Math.max(1, Math.ceil(U / P)) : 1, S = Math.min(et, oe - 1), M = k ? ne.slice(S * P, S * P + P) : ne, rt = U === 0 ? 0 : k ? S * P + 1 : 1, nt = k ? Math.min(U, (S + 1) * P) : U, Fe = (e) => e.sortable ?? O, Ke = `${S}|${P}|${v ? `${v.field}:${v.direction}` : ""}|${X}|${JSON.stringify(Z)}`, Me = W(!0);
+  ae(() => {
+    if (Me.current) {
+      Me.current = !1;
+      return;
+    }
+    const e = Be.current;
+    e && typeof e.scrollTo == "function" && e.scrollTop > 0 && e.scrollTo({ top: 0, behavior: "smooth" });
+  }, [Ke]);
+  const ue = (e, t, r) => ({
+    value: z(t, e.field),
+    formattedValue: Ce(e, t),
     row: t,
     rowIndex: r,
     field: e.field,
     column: e
-  }), ue = (e, t) => {
+  }), xe = (e, t) => {
     const r = e.editable ?? h;
     return typeof r == "function" ? r(t) : !!r;
-  }, ee = (e, t) => ue(e, t) && !(e.type === "boolean" && !e.cellEditor), He = (e, t) => {
-    const r = Z(e, t.row, t.index), n = ue(e, r);
+  }, fe = (e, t) => xe(e, t) && !(e.type === "boolean" && !e.cellEditor), ot = (e, t) => {
+    const r = ue(e, t.row, t.index), n = xe(e, r);
     return {
       ...r,
       editable: n,
-      updateValue: (i) => n && Ce(t, e, { value: i })
+      updateValue: (i) => n && Ae(t, e, { value: i })
     };
-  }, De = (e) => {
-    if (!Ne(e)) return;
+  }, Ve = (e) => {
+    if (!Fe(e)) return;
     let t;
-    !w || w.field !== e.field ? t = { field: e.field, direction: "asc" } : w.direction === "asc" ? t = { field: e.field, direction: "desc" } : t = null, We(t), x == null || x(t);
-  }, te = (e, t) => {
+    !v || v.field !== e.field ? t = { field: e.field, direction: "asc" } : v.direction === "asc" ? t = { field: e.field, direction: "desc" } : t = null, Ze(t), B == null || B(t);
+  }, pe = (e, t) => {
     var r;
-    return (r = ce.current.get(Pe(e, t))) == null ? void 0 : r.focus();
-  }, R = () => {
-    L.current += 1, G(null);
-  }, re = (e, t, r = {}) => {
-    if (!ee(t, Z(t, e.row, e.index))) return !1;
-    const n = e.row[t.field], i = t.cellEditor ? n : r.text ?? (n == null ? "" : String(n));
-    return X.current = i, L.current += 1, G({
+    return (r = ye.current.get(Ue(e, t))) == null ? void 0 : r.focus();
+  }, Y = () => {
+    J.current += 1, re(null);
+  }, he = (e, t, r = {}) => {
+    if (!fe(t, ue(t, e.row, e.index))) return !1;
+    const n = z(e.row, t.field), i = t.cellEditor ? n : r.text ?? (n == null ? "" : String(n));
+    return ce.current = i, J.current += 1, re({
       id: e.id,
       field: t.field,
       draft: i,
-      session: L.current,
+      session: J.current,
       select: r.select ?? "end",
       invalid: !1
     }), !0;
-  }, Ce = (e, t, r) => {
-    const n = A.current[e.index] ?? e.row, i = n[t.field];
-    let d;
+  }, Ae = (e, t, r) => {
+    const n = Q.current[e.index] ?? e.row, i = z(n, t.field);
+    let l;
     if ("value" in r)
-      d = r.value;
+      l = r.value;
     else if (t.valueParser)
-      d = t.valueParser(r.text, n);
+      l = t.valueParser(r.text, n);
     else if (t.type === "number")
-      if (r.text.trim() === "") d = null;
+      if (r.text.trim() === "") l = null;
       else {
         const u = Number(r.text);
         if (!Number.isFinite(u)) return !1;
-        d = u;
+        l = u;
       }
     else
-      d = r.text;
-    if (Object.is(d, i)) return !0;
-    if (t.validate && !t.validate(d, n)) return !1;
-    const f = { ...n, [t.field]: d }, a = A.current.map((u, k) => k === e.index ? f : u);
-    return ve(a), b == null || b({ rowId: e.id, rowIndex: e.index, field: t.field, oldValue: i, newValue: d, row: f }), _ == null || _(a), !0;
-  }, Ee = (e, t, r) => {
-    const n = K.findIndex((k) => k.id === e.id), i = l.findIndex((k) => k.field === t);
+      l = r.text;
+    if (Object.is(l, i)) return !0;
+    if (t.validate && !t.validate(l, n)) return !1;
+    const f = De(n, t.field, l), a = Q.current.map((u, p) => p === e.index ? f : u);
+    return Le(a), b == null || b({ rowId: e.id, rowIndex: e.index, field: t.field, oldValue: i, newValue: l, row: f }), m == null || m(a), !0;
+  }, je = (e, t, r) => {
+    const n = M.findIndex((p) => p.id === e.id), i = o.findIndex((p) => p.field === t);
     if (n < 0 || i < 0) return null;
-    const d = (k, N) => ee(N, Z(N, k.row, k.index));
+    const l = (p, C) => fe(C, ue(C, p.row, p.index));
     if (r === "down" || r === "up") {
-      const k = r === "down" ? 1 : -1;
-      for (let N = n + k; N >= 0 && N < K.length; N += k)
-        if (d(K[N], l[i])) return { entry: K[N], col: l[i] };
+      const p = r === "down" ? 1 : -1;
+      for (let C = n + p; C >= 0 && C < M.length; C += p)
+        if (l(M[C], o[i])) return { entry: M[C], col: o[i] };
       return null;
     }
     const f = r === "right" ? 1 : -1;
     let a = n, u = i + f;
-    for (; a >= 0 && a < K.length; ) {
-      for (; u >= 0 && u < l.length; ) {
-        if (d(K[a], l[u])) return { entry: K[a], col: l[u] };
+    for (; a >= 0 && a < M.length; ) {
+      for (; u >= 0 && u < o.length; ) {
+        if (l(M[a], o[u])) return { entry: M[a], col: o[u] };
         u += f;
       }
-      a += f, u = f > 0 ? 0 : l.length - 1;
+      a += f, u = f > 0 ? 0 : o.length - 1;
     }
     return null;
-  }, H = (e, t, r, n = {}) => {
-    const { move: i = "none", focus: d = !0 } = n;
-    if (!Ce(e, t, r))
-      return G((a) => a && { ...a, invalid: !0 }), !1;
-    const f = i === "none" ? null : Ee(e, t.field, i);
-    return f ? re(f.entry, f.col, { select: "all" }) : (R(), d && te(e.id, t.field)), !0;
-  }, Je = (e, t, r) => {
+  }, ie = (e, t, r, n = {}) => {
+    const { move: i = "none", focus: l = !0 } = n;
+    if (!Ae(e, t, r))
+      return re((a) => a && { ...a, invalid: !0 }), !1;
+    const f = i === "none" ? null : je(e, t.field, i);
+    return f ? he(f.entry, f.col, { select: "all" }) : (Y(), l && pe(e.id, t.field)), !0;
+  }, it = (e, t, r) => {
     if (e.nativeEvent.isComposing) return;
     const n = e.currentTarget.value;
     if (e.key === "Enter") {
       e.preventDefault();
-      const i = v ? e.shiftKey ? "up" : "down" : "none";
-      H(t, r, { text: n }, { move: i });
+      const i = I ? e.shiftKey ? "up" : "down" : "none";
+      ie(t, r, { text: n }, { move: i });
     } else if (e.key === "Escape")
-      e.preventDefault(), R(), te(t.id, r.field);
+      e.preventDefault(), Y(), pe(t.id, r.field);
     else if (e.key === "Tab") {
       const i = e.shiftKey ? "left" : "right";
-      Ee(t, r.field, i) && (e.preventDefault(), H(t, r, { text: n }, { move: i }));
+      je(t, r.field, i) && (e.preventDefault(), ie(t, r, { text: n }, { move: i }));
     }
-  }, Qe = (e, t, r, n) => {
-    e.target !== e.currentTarget || !ee(r, n) || (e.key === "Enter" || e.key === "F2" ? (e.preventDefault(), re(t, r)) : !r.cellEditor && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), re(t, r, { text: e.key })));
-  }, Ue = (e, t, r) => t.cellEditor ? /* @__PURE__ */ o(
+  }, lt = (e, t, r, n) => {
+    e.target !== e.currentTarget || !fe(r, n) || (e.key === "Enter" || e.key === "F2" ? (e.preventDefault(), he(t, r)) : !r.cellEditor && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), he(t, r, { text: e.key })));
+  }, at = (e, t, r) => t.cellEditor ? /* @__PURE__ */ d(
     "div",
     {
       className: "rk-grid__custom-editor",
       onBlur: (n) => {
-        n.currentTarget.contains(n.relatedTarget) || r.session === L.current && (H(e, t, { value: X.current }, { focus: !1 }) || R());
+        n.currentTarget.contains(n.relatedTarget) || r.session === J.current && (ie(e, t, { value: ce.current }, { focus: !1 }) || Y());
       },
       onKeyDown: (n) => {
-        n.key === "Escape" && (n.preventDefault(), n.stopPropagation(), R(), te(e.id, t.field));
+        n.key === "Escape" && (n.preventDefault(), n.stopPropagation(), Y(), pe(e.id, t.field));
       },
-      children: ie(t.cellEditor, {
+      children: se(t.cellEditor, {
         value: r.draft,
         row: e.row,
         rowIndex: e.index,
         field: t.field,
         column: t,
         onChange: (n) => {
-          X.current = n, G((i) => i && i.session === r.session ? { ...i, draft: n, invalid: !1 } : i);
+          ce.current = n, re((i) => i && i.session === r.session ? { ...i, draft: n, invalid: !1 } : i);
         },
         onCommit: (n, i = "none") => {
-          r.session === L.current && H(e, t, { value: n === void 0 ? X.current : n }, { move: i });
+          r.session === J.current && ie(e, t, { value: n === void 0 ? ce.current : n }, { move: i });
         },
         onCancel: () => {
-          R(), te(e.id, t.field);
+          Y(), pe(e.id, t.field);
         }
       })
     }
-  ) : /* @__PURE__ */ o(
+  ) : /* @__PURE__ */ d(
     "input",
     {
       autoFocus: !0,
-      className: $("rk-grid__editor", r.invalid && "rk-grid__editor--invalid", S.editor),
-      style: { textAlign: t.align, ...D.editor },
+      className: D("rk-grid__editor", r.invalid && "rk-grid__editor--invalid", N.editor),
+      style: { textAlign: t.align, ...x.editor },
       value: r.draft === null || r.draft === void 0 ? "" : String(r.draft),
       inputMode: t.type === "number" ? "decimal" : void 0,
-      "aria-label": `Edit ${t.headerName ?? t.field}`,
+      "aria-label": `Edit ${be(t)}`,
       "aria-invalid": r.invalid || void 0,
       onChange: (n) => {
         const i = n.target.value;
-        G((d) => d && { ...d, draft: i, invalid: !1 });
+        re((l) => l && { ...l, draft: i, invalid: !1 });
       },
       onFocus: (n) => {
         const i = n.currentTarget;
         r.select === "all" ? i.select() : i.setSelectionRange(i.value.length, i.value.length);
       },
       onBlur: (n) => {
-        r.session === L.current && (H(e, t, { text: n.currentTarget.value }, { focus: !1 }) || R());
+        r.session === J.current && (ie(e, t, { text: n.currentTarget.value }, { focus: !1 }) || Y());
       },
-      onKeyDown: (n) => Je(n, e, t)
+      onKeyDown: (n) => it(n, e, t)
     }
-  ), Ie = (e) => {
-    var r, n, i, d, f, a, u, k;
+  ), ze = (e) => {
+    var r, n, i, l, f, a, u, p;
     const t = e.checkbox ?? {};
     return {
-      variant: t.variant ?? Ve,
+      variant: t.variant ?? K,
       indicator: t.indicator,
       className: t.className,
       style: t.style,
       classNames: {
-        root: $(S.checkbox, (r = t.classNames) == null ? void 0 : r.root),
-        control: $(S.checkboxControl, (n = t.classNames) == null ? void 0 : n.control),
-        indicator: $(S.checkboxIndicator, (i = t.classNames) == null ? void 0 : i.indicator),
-        label: (d = t.classNames) == null ? void 0 : d.label
+        root: D(N.checkbox, (r = t.classNames) == null ? void 0 : r.root),
+        control: D(N.checkboxControl, (n = t.classNames) == null ? void 0 : n.control),
+        indicator: D(N.checkboxIndicator, (i = t.classNames) == null ? void 0 : i.indicator),
+        label: (l = t.classNames) == null ? void 0 : l.label
       },
       styles: {
-        root: { ...D.checkbox, ...(f = t.styles) == null ? void 0 : f.root },
-        control: { ...D.checkboxControl, ...(a = t.styles) == null ? void 0 : a.control },
-        indicator: { ...D.checkboxIndicator, ...(u = t.styles) == null ? void 0 : u.indicator },
-        label: (k = t.styles) == null ? void 0 : k.label
+        root: { ...x.checkbox, ...(f = t.styles) == null ? void 0 : f.root },
+        control: { ...x.checkboxControl, ...(a = t.styles) == null ? void 0 : a.control },
+        indicator: { ...x.checkboxIndicator, ...(u = t.styles) == null ? void 0 : u.indicator },
+        label: (p = t.styles) == null ? void 0 : p.label
       }
     };
-  }, ne = (e) => e.stopPropagation(), Xe = (e, t) => /* @__PURE__ */ o("span", { className: "rk-grid__checkbox-cell", onClick: ne, onDoubleClick: ne, children: /* @__PURE__ */ o(
-    Ke,
+  }, ge = (e) => e.stopPropagation(), st = (e, t) => /* @__PURE__ */ d("span", { className: "rk-grid__checkbox-cell", onClick: ge, onDoubleClick: ge, children: /* @__PURE__ */ d(
+    Ge,
     {
-      ...Ie(e),
+      ...ze(e),
       checked: !!t.value,
       disabled: !t.editable,
-      "aria-label": `Toggle ${e.headerName ?? e.field}`,
+      "aria-label": `Toggle ${be(e)}`,
       onChange: (r) => t.updateValue(r)
     }
-  ) }), Be = (e) => O.filter((t) => ue(e, Z(e, t.row, t.index))), Ze = (e, t) => {
-    const r = new Map(Be(e).map((d) => [d.index, d])), n = [], i = A.current.map((d, f) => {
+  ) }), We = (e) => ne.filter((t) => xe(e, ue(e, t.row, t.index))), dt = (e, t) => {
+    const r = new Map(We(e).map((l) => [l.index, l])), n = [], i = Q.current.map((l, f) => {
       const a = r.get(f);
-      if (!a) return d;
-      const u = d[e.field];
-      if (!!u === t || e.validate && !e.validate(t, d)) return d;
-      const k = { ...d, [e.field]: t };
-      return n.push({ rowId: a.id, rowIndex: f, field: e.field, oldValue: u, newValue: t, row: k }), k;
+      if (!a) return l;
+      const u = z(l, e.field);
+      if (!!u === t || e.validate && !e.validate(t, l)) return l;
+      const p = De(l, e.field, t);
+      return n.push({ rowId: a.id, rowIndex: f, field: e.field, oldValue: u, newValue: t, row: p }), p;
     });
-    n.length !== 0 && (ve(i), n.forEach((d) => b == null ? void 0 : b(d)), _ == null || _(i));
-  }, et = (e) => {
-    const t = Be(e), r = t.length > 0 ? t : O, n = r.filter((d) => !!d.row[e.field]).length, i = r.length > 0 && n === r.length;
-    return /* @__PURE__ */ o("span", { className: "rk-grid__header-checkbox", onClick: ne, onDoubleClick: ne, children: /* @__PURE__ */ o(
-      Ke,
+    n.length !== 0 && (Le(i), n.forEach((l) => b == null ? void 0 : b(l)), m == null || m(i));
+  }, ct = (e) => {
+    const t = We(e), r = t.length > 0 ? t : ne, n = r.filter((l) => !!z(l.row, e.field)).length, i = r.length > 0 && n === r.length;
+    return /* @__PURE__ */ d("span", { className: "rk-grid__header-checkbox", onClick: ge, onDoubleClick: ge, children: /* @__PURE__ */ d(
+      Ge,
       {
-        ...Ie(e),
+        ...ze(e),
         checked: i,
         indeterminate: n > 0 && !i,
         disabled: t.length === 0,
-        label: e.headerName ?? e.field,
-        onChange: (d) => Ze(e, d)
+        label: Ie(e) || void 0,
+        "aria-label": `Select all ${be(e)}`,
+        onChange: (l) => dt(e, l)
       }
     ) });
-  }, tt = y && (B === "top" || B === "both"), rt = !y || B === "bottom" || B === "both", Se = (e) => /* @__PURE__ */ p(
+  }, ut = _e || !!g, ft = g ? { "--rk-stripe-a": g[0], "--rk-stripe-b": g[1] } : void 0, pt = k && (E === "top" || E === "both"), ht = !k || E === "bottom" || E === "both", Oe = (e) => /* @__PURE__ */ $(
     "div",
     {
-      className: $("rk-grid__footer", e === "top" && "rk-grid__footer--top", S.footer),
-      style: D.footer,
+      className: D("rk-grid__footer", e === "top" && "rk-grid__footer--top", N.footer),
+      style: x.footer,
       "data-position": e,
       children: [
-        /* @__PURE__ */ o("span", { ...g("rowCount", "rk-grid__count"), children: V === 0 ? "0 rows" : `${Oe}–${Ye} of ${V}` }),
-        y && /* @__PURE__ */ p("div", { ...g("pagination", "rk-grid__pagination"), children: [
-          /* @__PURE__ */ p("label", { className: "rk-grid__page-size-label", children: [
+        /* @__PURE__ */ d("span", { ..._("rowCount", "rk-grid__count"), children: U === 0 ? "0 rows" : `${rt}–${nt} of ${U}` }),
+        k && /* @__PURE__ */ $("div", { ..._("pagination", "rk-grid__pagination"), children: [
+          /* @__PURE__ */ $("label", { className: "rk-grid__page-size-label", children: [
             "Rows per page",
-            /* @__PURE__ */ o(
+            /* @__PURE__ */ d(
               "select",
               {
-                value: T,
-                onChange: (t) => Ge(Number(t.target.value)),
-                ...g("pageSize", "rk-grid__page-size"),
-                children: (oe.includes(T) ? oe : [...oe, T].sort((t, r) => t - r)).map(
-                  (t) => /* @__PURE__ */ o("option", { value: t, children: t }, t)
+                value: P,
+                onChange: (t) => tt(Number(t.target.value)),
+                ..._("pageSize", "rk-grid__page-size"),
+                children: (y.includes(P) ? y : [...y, P].sort((t, r) => t - r)).map(
+                  (t) => /* @__PURE__ */ d("option", { value: t, children: t }, t)
                 )
               }
             )
           ] }),
-          /* @__PURE__ */ o("button", { type: "button", "aria-label": "First page", disabled: C === 0, onClick: () => W(0), ...g("pageButton", "rk-grid__page-btn"), children: "«" }),
-          /* @__PURE__ */ o("button", { type: "button", "aria-label": "Previous page", disabled: C === 0, onClick: () => W(C - 1), ...g("pageButton", "rk-grid__page-btn"), children: "‹" }),
-          /* @__PURE__ */ p("span", { ...g("pageInfo", "rk-grid__page-info"), children: [
+          /* @__PURE__ */ d("button", { type: "button", "aria-label": "First page", disabled: S === 0, onClick: () => ee(0), ..._("pageButton", "rk-grid__page-btn"), children: "«" }),
+          /* @__PURE__ */ d("button", { type: "button", "aria-label": "Previous page", disabled: S === 0, onClick: () => ee(S - 1), ..._("pageButton", "rk-grid__page-btn"), children: "‹" }),
+          /* @__PURE__ */ $("span", { ..._("pageInfo", "rk-grid__page-info"), children: [
             "Page ",
-            C + 1,
+            S + 1,
             " of ",
-            Y
+            oe
           ] }),
-          /* @__PURE__ */ o("button", { type: "button", "aria-label": "Next page", disabled: C >= Y - 1, onClick: () => W(C + 1), ...g("pageButton", "rk-grid__page-btn"), children: "›" }),
-          /* @__PURE__ */ o("button", { type: "button", "aria-label": "Last page", disabled: C >= Y - 1, onClick: () => W(Y - 1), ...g("pageButton", "rk-grid__page-btn"), children: "»" })
+          /* @__PURE__ */ d("button", { type: "button", "aria-label": "Next page", disabled: S >= oe - 1, onClick: () => ee(S + 1), ..._("pageButton", "rk-grid__page-btn"), children: "›" }),
+          /* @__PURE__ */ d("button", { type: "button", "aria-label": "Last page", disabled: S >= oe - 1, onClick: () => ee(oe - 1), ..._("pageButton", "rk-grid__page-btn"), children: "»" })
         ] })
       ]
     }
-  ), nt = l.some(we);
-  return /* @__PURE__ */ p("div", { className: $("rk-grid", S.root, Re), style: { ...D.root, ...Ae }, children: [
-    (I || ge) && /* @__PURE__ */ p("div", { ...g("toolbar", "rk-grid__toolbar"), children: [
-      I ? /* @__PURE__ */ o(
-        "input",
-        {
-          type: "search",
-          value: U,
-          onChange: (e) => ze(e.target.value),
-          placeholder: P,
-          "aria-label": "Search all columns",
-          ...g("search", "rk-grid__search")
-        }
-      ) : /* @__PURE__ */ o("span", {}),
-      ge
-    ] }),
-    tt && Se("top"),
-    /* @__PURE__ */ o("div", { ...g("scroll", "rk-grid__scroll"), style: { ...D.scroll, ...me !== void 0 ? { maxHeight: me } : null }, children: /* @__PURE__ */ p("table", { ...g("table", "rk-grid__table"), role: "grid", children: [
-      /* @__PURE__ */ p("thead", { ...g("thead", "rk-grid__thead"), children: [
-        /* @__PURE__ */ o("tr", { ...g("headerRow", "rk-grid__tr"), children: l.map((e) => {
-          const t = (w == null ? void 0 : w.field) === e.field ? w.direction : null, r = Ne(e);
-          return /* @__PURE__ */ o(
-            "th",
+  );
+  return /* @__PURE__ */ $(
+    "div",
+    {
+      className: D("rk-grid", N.root, de),
+      style: { ...ft, ...x.root, ...He },
+      "data-rk-theme": T || void 0,
+      children: [
+        (G || q) && /* @__PURE__ */ $("div", { ..._("toolbar", "rk-grid__toolbar"), children: [
+          G ? /* @__PURE__ */ d(
+            "input",
             {
-              scope: "col",
-              "aria-sort": t ? t === "asc" ? "ascending" : "descending" : r ? "none" : void 0,
-              tabIndex: r ? 0 : void 0,
-              onClick: () => De(e),
-              onKeyDown: (n) => {
-                r && n.target === n.currentTarget && (n.key === "Enter" || n.key === " ") && (n.preventDefault(), De(e));
-              },
-              className: $("rk-grid__th", r && "rk-grid__th--sortable", S.headerCell, e.headerClassName),
-              style: { width: e.width, minWidth: e.minWidth, textAlign: e.align, ...D.headerCell, ...e.headerStyle },
-              children: /* @__PURE__ */ p("span", { className: "rk-grid__th-content", children: [
-                e.headerRenderer ? ie(e.headerRenderer, { column: e, sortDirection: t }) : e.headerCheckbox && e.type === "boolean" ? et(e) : e.headerName ?? e.field,
-                r && /* @__PURE__ */ o("span", { className: "rk-grid__sort", "aria-hidden": "true", children: t === "asc" ? "▲" : t === "desc" ? "▼" : "↕" })
-              ] })
-            },
-            e.field
-          );
-        }) }),
-        nt && /* @__PURE__ */ o("tr", { ...g("filterRow", "rk-grid__tr"), children: l.map((e) => /* @__PURE__ */ o("th", { ...g("filterCell", "rk-grid__filter-cell"), children: we(e) && (e.filterRenderer ? ie(e.filterRenderer, {
-          column: e,
-          value: z[e.field] ?? "",
-          onChange: (t) => xe((r) => ({ ...r, [e.field]: t }))
-        }) : /* @__PURE__ */ o(
-          "input",
-          {
-            value: z[e.field] ?? "",
-            onChange: (t) => xe((r) => ({ ...r, [e.field]: t.target.value })),
-            placeholder: "Filter",
-            "aria-label": `Filter ${e.headerName ?? e.field}`,
-            ...g("filterInput", "rk-grid__filter-input")
-          }
-        )) }, e.field)) })
-      ] }),
-      /* @__PURE__ */ o("tbody", { ...g("tbody", "rk-grid__tbody"), children: K.length === 0 ? /* @__PURE__ */ o("tr", { children: /* @__PURE__ */ o("td", { colSpan: l.length, ...g("empty", "rk-grid__empty"), children: Fe }) }) : K.map((e, t) => {
-        const { row: r, id: n, index: i } = e, d = typeof de == "function" ? de(r, i) : de, f = typeof se == "function" ? se(r, i) : se;
-        return /* @__PURE__ */ o(
-          "tr",
-          {
-            onClick: ae ? () => ae(r, i) : void 0,
-            className: $(
-              "rk-grid__tr",
-              "rk-grid__row",
-              Le && t % 2 === 1 && "rk-grid__row--striped",
-              ae && "rk-grid__row--clickable",
-              S.row,
-              d
-            ),
-            style: { ...D.row, ...f },
-            children: l.map((a) => {
-              const u = He(a, e), k = typeof a.cellClassName == "function" ? a.cellClassName(u) : a.cellClassName, N = typeof a.cellStyle == "function" ? a.cellStyle(u) : a.cellStyle, fe = q !== null && q.id === n && q.field === a.field, he = ee(a, u);
-              return /* @__PURE__ */ o(
-                "td",
-                {
-                  ref: (le) => {
-                    const Te = Pe(n, a.field);
-                    le ? ce.current.set(Te, le) : ce.current.delete(Te);
-                  },
-                  tabIndex: he ? 0 : void 0,
-                  onDoubleClick: he ? () => re(e, a) : void 0,
-                  onKeyDown: (le) => Qe(le, e, a, u),
-                  className: $(
-                    "rk-grid__td",
-                    he && "rk-grid__td--editable",
-                    fe && "rk-grid__td--editing",
-                    S.cell,
-                    k
-                  ),
-                  style: { textAlign: a.align, ...D.cell, ...N },
-                  children: fe && q ? Ue(e, a, q) : a.cellRenderer ? ie(a.cellRenderer, u) : a.type === "boolean" && !a.cellEditor ? Xe(a, u) : u.formattedValue
+              type: "search",
+              value: X,
+              onChange: (e) => Qe(e.target.value),
+              placeholder: w,
+              "aria-label": "Search all columns",
+              ..._("search", "rk-grid__search")
+            }
+          ) : /* @__PURE__ */ d("span", {}),
+          q
+        ] }),
+        pt && Oe("top"),
+        /* @__PURE__ */ d("div", { ref: Be, ..._("scroll", "rk-grid__scroll"), style: { ...x.scroll, ...j !== void 0 ? { maxHeight: j } : null }, children: /* @__PURE__ */ $("table", { ..._("table", "rk-grid__table"), role: "grid", children: [
+          /* @__PURE__ */ d("thead", { ..._("thead", "rk-grid__thead"), children: /* @__PURE__ */ d("tr", { ..._("headerRow", "rk-grid__tr"), children: o.map((e) => {
+            const t = (v == null ? void 0 : v.field) === e.field ? v.direction : null, r = Fe(e);
+            return /* @__PURE__ */ d(
+              "th",
+              {
+                scope: "col",
+                "aria-sort": t ? t === "asc" ? "ascending" : "descending" : r ? "none" : void 0,
+                tabIndex: r ? 0 : void 0,
+                onClick: () => Ve(e),
+                onKeyDown: (n) => {
+                  r && n.target === n.currentTarget && (n.key === "Enter" || n.key === " ") && (n.preventDefault(), Ve(e));
                 },
-                a.field
-              );
-            })
-          },
-          n
-        );
-      }) })
-    ] }) }),
-    rt && Se("bottom")
-  ] });
+                className: D("rk-grid__th", r && "rk-grid__th--sortable", N.headerCell, e.className, e.headerClassName),
+                style: { width: e.width, minWidth: e.minWidth, textAlign: e.align, ...x.headerCell, ...e.style, ...e.headerStyle },
+                children: /* @__PURE__ */ $("span", { className: "rk-grid__th-content", children: [
+                  e.headerRenderer ? se(e.headerRenderer, { column: e, sortDirection: t }) : e.headerCheckbox && e.type === "boolean" ? ct(e) : Ie(e),
+                  e.filterable && /* @__PURE__ */ d(
+                    xt,
+                    {
+                      column: e,
+                      label: be(e),
+                      value: Z[e.field] ?? "",
+                      onChange: (n) => Xe((i) => ({ ...i, [e.field]: n })),
+                      theme: T,
+                      indicatorClassName: D(N.filterIndicator, e.filterIndicatorClassName),
+                      indicatorStyle: { ...x.filterIndicator, ...e.filterIndicatorStyle },
+                      popupClassName: D(N.filterPopup, e.filterPopupClassName),
+                      popupStyle: { ...x.filterPopup, ...e.filterPopupStyle },
+                      inputClassName: N.filterInput,
+                      inputStyle: x.filterInput
+                    }
+                  ),
+                  r && /* @__PURE__ */ d("span", { className: "rk-grid__sort", "aria-hidden": "true", children: t === "asc" ? "▲" : t === "desc" ? "▼" : "↕" })
+                ] })
+              },
+              e.field
+            );
+          }) }) }),
+          /* @__PURE__ */ d("tbody", { ..._("tbody", "rk-grid__tbody"), children: M.length === 0 ? /* @__PURE__ */ d("tr", { children: /* @__PURE__ */ d("td", { colSpan: o.length, ..._("empty", "rk-grid__empty"), children: L }) }) : M.map((e, t) => {
+            const { row: r, id: n, index: i } = e, l = typeof me == "function" ? me(r, i) : me, f = typeof ve == "function" ? ve(r, i) : ve;
+            return /* @__PURE__ */ d(
+              "tr",
+              {
+                onClick: R ? () => R(r, i) : void 0,
+                className: D(
+                  "rk-grid__tr",
+                  "rk-grid__row",
+                  ut && (t % 2 === 0 ? "rk-grid__row--stripe-a" : "rk-grid__row--stripe-b"),
+                  A && "rk-grid__row--enter",
+                  R && "rk-grid__row--clickable",
+                  N.row,
+                  l
+                ),
+                style: { ...A ? { "--rk-i": Math.min(t, 24) } : null, ...x.row, ...f },
+                children: o.map((a) => {
+                  const u = ot(a, e), p = typeof a.cellClassName == "function" ? a.cellClassName(u) : a.cellClassName, C = typeof a.cellStyle == "function" ? a.cellStyle(u) : a.cellStyle, we = te !== null && te.id === n && te.field === a.field, Ee = fe(a, u);
+                  return /* @__PURE__ */ d(
+                    "td",
+                    {
+                      ref: (ke) => {
+                        const Re = Ue(n, a.field);
+                        ke ? ye.current.set(Re, ke) : ye.current.delete(Re);
+                      },
+                      tabIndex: Ee ? 0 : void 0,
+                      onDoubleClick: Ee ? () => he(e, a) : void 0,
+                      onKeyDown: (ke) => lt(ke, e, a, u),
+                      className: D(
+                        "rk-grid__td",
+                        Ee && "rk-grid__td--editable",
+                        we && "rk-grid__td--editing",
+                        N.cell,
+                        a.className,
+                        p
+                      ),
+                      style: { textAlign: a.align, ...x.cell, ...a.style, ...C },
+                      children: we && te ? at(e, a, te) : a.cellRenderer ? se(a.cellRenderer, u) : a.type === "boolean" && !a.cellEditor ? st(a, u) : u.formattedValue
+                    },
+                    a.field
+                  );
+                })
+              },
+              n
+            );
+          }) }, Ke)
+        ] }) }),
+        ht && Oe("bottom")
+      ]
+    }
+  );
 }
 export {
-  bt as Alert,
-  kt as Badge,
-  ut as Button,
-  ht as Card,
-  Ke as Checkbox,
-  mt as DataGrid,
-  ft as Input,
-  gt as Modal
+  Ge as Checkbox,
+  St as DataGrid
 };