@opencorestack/opengridx 0.1.5 → 0.1.6

package/dist/opengridx.es.js

@@ -1,6 +1,6 @@
 import xe, { useState as Z, useRef as ne, useCallback as O, useEffect as te, useMemo as ce, useReducer as Cr, useLayoutEffect as kr } from "react";
 import Lt from "react-dom";
-var kn = { exports: {} }, ln = {};
+var Sn = { exports: {} }, ln = {};
 var yo;
 function Sr() {
   if (yo) return ln;
@@ -109,7 +109,7 @@ function jr() {
       return Error("react-stack-top-frame");
     }
     function d(v) {
-      if (q.call(v, "key")) {
+      if (Y.call(v, "key")) {
         var D = Object.getOwnPropertyDescriptor(v, "key").get;
         if (D && D.isReactWarning) return !1;
       }
@@ -117,7 +117,7 @@ function jr() {
     }
     function s(v, D) {
       function H() {
-        Y || (Y = !0, console.error(
+        X || (X = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           D
         ));
@@ -133,7 +133,7 @@ function jr() {
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), v = this.props.ref, v !== void 0 ? v : null;
     }
-    function g(v, D, H, W, F, X) {
+    function g(v, D, H, W, F, q) {
       var K = H.ref;
       return v = {
         $$typeof: w,
@@ -163,10 +163,10 @@ function jr() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: X
+        value: q
       }), Object.freeze && (Object.freeze(v.props), Object.freeze(v)), v;
     }
-    function h(v, D, H, W, F, X) {
+    function h(v, D, H, W, F, q) {
       var K = D.children;
       if (K !== void 0)
         if (W)
@@ -179,7 +179,7 @@ function jr() {
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
         else x(K);
-      if (q.call(D, "key")) {
+      if (Y.call(D, "key")) {
         K = n(v);
         var M = Object.keys(D).filter(function(le) {
           return le !== "key";
@@ -211,7 +211,7 @@ React keys must be passed directly to JSX without using spread:
         H,
         i(),
         F,
-        X
+        q
       );
     }
     function x(v) {
@@ -220,7 +220,7 @@ React keys must be passed directly to JSX without using spread:
     function c(v) {
       return typeof v == "object" && v !== null && v.$$typeof === w;
     }
-    var f = xe, w = /* @__PURE__ */ Symbol.for("react.transitional.element"), m = /* @__PURE__ */ Symbol.for("react.portal"), N = /* @__PURE__ */ Symbol.for("react.fragment"), I = /* @__PURE__ */ Symbol.for("react.strict_mode"), j = /* @__PURE__ */ Symbol.for("react.profiler"), C = /* @__PURE__ */ Symbol.for("react.consumer"), _ = /* @__PURE__ */ Symbol.for("react.context"), b = /* @__PURE__ */ Symbol.for("react.forward_ref"), y = /* @__PURE__ */ Symbol.for("react.suspense"), E = /* @__PURE__ */ Symbol.for("react.suspense_list"), k = /* @__PURE__ */ Symbol.for("react.memo"), p = /* @__PURE__ */ Symbol.for("react.lazy"), S = /* @__PURE__ */ Symbol.for("react.activity"), L = /* @__PURE__ */ Symbol.for("react.client.reference"), B = f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, q = Object.prototype.hasOwnProperty, A = Array.isArray, U = console.createTask ? console.createTask : function() {
+    var f = xe, w = /* @__PURE__ */ Symbol.for("react.transitional.element"), m = /* @__PURE__ */ Symbol.for("react.portal"), N = /* @__PURE__ */ Symbol.for("react.fragment"), I = /* @__PURE__ */ Symbol.for("react.strict_mode"), j = /* @__PURE__ */ Symbol.for("react.profiler"), C = /* @__PURE__ */ Symbol.for("react.consumer"), _ = /* @__PURE__ */ Symbol.for("react.context"), b = /* @__PURE__ */ Symbol.for("react.forward_ref"), y = /* @__PURE__ */ Symbol.for("react.suspense"), E = /* @__PURE__ */ Symbol.for("react.suspense_list"), k = /* @__PURE__ */ Symbol.for("react.memo"), p = /* @__PURE__ */ Symbol.for("react.lazy"), S = /* @__PURE__ */ Symbol.for("react.activity"), L = /* @__PURE__ */ Symbol.for("react.client.reference"), B = f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, A = Array.isArray, U = console.createTask ? console.createTask : function() {
       return null;
     };
     f = {
@@ -228,7 +228,7 @@ React keys must be passed directly to JSX without using spread:
         return v();
       }
     };
-    var Y, G = {}, oe = f.react_stack_bottom_frame.bind(
+    var X, G = {}, oe = f.react_stack_bottom_frame.bind(
       f,
       l
     )(), Q = U(r(l)), ve = {};
@@ -257,7 +257,7 @@ React keys must be passed directly to JSX without using spread:
 }
 var ko;
 function Rr() {
-  return ko || (ko = 1, process.env.NODE_ENV === "production" ? kn.exports = Sr() : kn.exports = jr()), kn.exports;
+  return ko || (ko = 1, process.env.NODE_ENV === "production" ? Sn.exports = Sr() : Sn.exports = jr()), Sn.exports;
 }
 var t = Rr();
 function Er({
@@ -304,7 +304,7 @@ function Er({
     }
   );
 }
-const En = ({
+const Nn = ({
   indeterminate: n = !1,
   label: o,
   className: e = "",
@@ -376,13 +376,13 @@ function Nr(n) {
     }
   );
 }
-function Nn(n, o) {
+function In(n, o) {
   return o ? o.left?.includes(n) ? "left" : o.right?.includes(n) ? "right" : null : null;
 }
 function Ir(n, o) {
   const e = [], r = [], i = [];
   return o ? (n.forEach((l) => {
-    const d = Nn(l.field, o);
+    const d = In(l.field, o);
     d === "left" ? e.push(l) : d === "right" ? i.push(l) : r.push(l);
   }), o.left && e.sort((l, d) => {
     const s = o.left.indexOf(l.field), u = o.left.indexOf(d.field);
@@ -499,8 +499,8 @@ function Br({ colDef: n, sortModel: o, onSort: e, onHide: r, onPin: i, pinnedCol
     function y(E) {
       E.key === "Escape" && s();
     }
-    return document.addEventListener("mousedown", b), document.addEventListener("keydown", y), () => {
-      document.removeEventListener("mousedown", b), document.removeEventListener("keydown", y);
+    return document.addEventListener("mousedown", b), document.addEventListener("keydown", y), window.addEventListener("scroll", s, !0), window.addEventListener("resize", s), () => {
+      document.removeEventListener("mousedown", b), document.removeEventListener("keydown", y), window.removeEventListener("scroll", s, !0), window.removeEventListener("resize", s);
     };
   }, [u, s]);
   const c = (b) => {
@@ -512,7 +512,7 @@ function Br({ colDef: n, sortModel: o, onSort: e, onHide: r, onPin: i, pinnedCol
   }, m = o?.find((b) => b.field === n.field)?.sort, N = m == null, I = l?.left?.includes(n.field) ?? !1, j = l?.right?.includes(n.field) ?? !1, C = !I && !j, _ = n.headerName || n.field;
   return Lt.createPortal(
     /* @__PURE__ */ t.jsxs("div", { ref: g, className: "ogx-column-menu", style: h, role: "menu", "aria-label": `Column options for ${_}`, children: [
-      e && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      e && n.sortable !== !1 && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
         /* @__PURE__ */ t.jsxs(
           "button",
           {
@@ -618,7 +618,7 @@ function Br({ colDef: n, sortModel: o, onSort: e, onHide: r, onPin: i, pinnedCol
         "Manage columns"
       ] })
     ] }),
-    document.body
+    u?.closest(".ogx-theme-provider") || document.body
   );
 }
 function $r() {
@@ -704,14 +704,14 @@ function Vr(n) {
     onHideColumn: S,
     onPinColumn: L,
     onManageColumns: B
-  } = n, q = xe.useRef({}), [A, U] = xe.useState(null), Y = (M) => (ue) => {
+  } = n, Y = xe.useRef({}), [A, U] = xe.useState(null), X = (M) => (ue) => {
     ue.stopPropagation(), U({ colDef: M, anchorEl: ue.currentTarget });
   }, G = () => {
     U(null);
   };
   xe.useLayoutEffect(() => {
     if (k?.id === "HEADER") {
-      const M = q.current[k.field];
+      const M = Y.current[k.field];
       M && M.focus();
     }
   }, [k]);
@@ -810,7 +810,7 @@ function Vr(n) {
               left: w ? (N ? 48 : 0) + (f && m ? 48 : 0) : void 0
             },
             children: /* @__PURE__ */ t.jsx(
-              En,
+              Nn,
               {
                 id: "ogx-select-all",
                 name: "ogx-select-all",
@@ -821,7 +821,7 @@ function Vr(n) {
                 tabIndex: k?.id === "HEADER" && k.field === "__checkbox_col__" ? 0 : -1,
                 onMouseDown: (M) => M.preventDefault(),
                 inputRef: (M) => {
-                  q.current.__checkbox_col__ = M;
+                  Y.current.__checkbox_col__ = M;
                 }
               }
             )
@@ -837,7 +837,7 @@ function Vr(n) {
               },
               M.field
             );
-          const le = M.sortable !== !1, _e = g.some((He) => He.field === M.field), ot = M.resizable !== !1, z = Nn(M.field, c), Pe = z !== null, Me = j === M.field, ft = C === M.field, Ue = [
+          const le = M.sortable !== !1, _e = g.some((He) => He.field === M.field), ot = M.resizable !== !1, z = In(M.field, c), Pe = z !== null, Me = j === M.field, pt = C === M.field, Ue = [
             "ogx__header-cell",
             `ogx__header-cell--align-${M.headerAlign || M.align || "left"}`,
             le && "ogx__header-cell--sortable",
@@ -845,11 +845,11 @@ function Vr(n) {
             Pe && "ogx__header-cell--pinned",
             Pe && `ogx__header-cell--pinned-${z}`,
             Me && "ogx__header-cell--dragging",
-            ft && "ogx__header-cell--drag-over",
+            pt && "ogx__header-cell--drag-over",
             k?.id === "HEADER" && k.field === M.field && "ogx__header-cell--focused",
             M.headerClassName
-          ].filter(Boolean).join(" "), ht = x[M.field] ?? M.width ?? 100, pt = {
-            width: ht,
+          ].filter(Boolean).join(" "), rt = x[M.field] ?? M.width ?? 100, it = {
+            width: rt,
             minWidth: M.minWidth,
             maxWidth: M.maxWidth,
             flexGrow: M.flex ?? 0,
@@ -862,7 +862,7 @@ function Vr(n) {
           };
           if (Pe && z) {
             const He = ve[M.field];
-            z === "left" ? pt.left = He : pt.right = He;
+            z === "left" ? it.left = He : it.right = He;
           }
           const Qt = M.renderHeader ? M.renderHeader({ field: M.field, colDef: M, colIndex: ue }) : M.headerName || M.field, Tt = (He) => {
             if (He.target.closest(".ogx-column-resize-handle")) {
@@ -875,7 +875,7 @@ function Vr(n) {
             "div",
             {
               className: Ue,
-              style: pt,
+              style: it,
               onClick: Tt,
               role: "columnheader",
               draggable: !!_,
@@ -888,7 +888,7 @@ function Vr(n) {
               "data-field": M.field,
               tabIndex: -1,
               ref: (He) => {
-                q.current[M.field] = He;
+                Y.current[M.field] = He;
               },
               children: [
                 /* @__PURE__ */ t.jsxs("div", { className: "ogx__header-cell-content", children: [
@@ -902,7 +902,7 @@ function Vr(n) {
                     "button",
                     {
                       className: "ogx__menu-icon-btn",
-                      onClick: Y(M),
+                      onClick: X(M),
                       "aria-label": `Open column menu for ${M.headerName || M.field}`,
                       "aria-haspopup": "menu",
                       tabIndex: -1,
@@ -914,7 +914,7 @@ function Vr(n) {
                   Nr,
                   {
                     field: M.field,
-                    currentWidth: ht,
+                    currentWidth: rt,
                     onResize: h,
                     minWidth: M.minWidth,
                     maxWidth: M.maxWidth
@@ -1153,19 +1153,19 @@ function Qr(n) {
     colDef: d,
     rowIndex: s,
     colIndex: u
-  }) : L, [i, l, d, s, u, L, I, p, C, r, _]), q = c != null, A = xe.useMemo(() => d.cellClassName ? typeof d.cellClassName == "function" ? d.cellClassName({ value: i, row: l, field: d.field, colDef: d, rowIndex: s, colIndex: u }) || "" : d.cellClassName : "", [d, i, l, s, u]), U = [
+  }) : L, [i, l, d, s, u, L, I, p, C, r, _]), Y = c != null, A = xe.useMemo(() => d.cellClassName ? typeof d.cellClassName == "function" ? d.cellClassName({ value: i, row: l, field: d.field, colDef: d, rowIndex: s, colIndex: u }) || "" : d.cellClassName : "", [d, i, l, s, u]), U = [
     "ogx__cell",
     `ogx__cell--align-${d.align || "left"}`,
     g && "ogx__cell--selected",
     w && "ogx__cell--focused",
     w && m && "ogx__cell--focus-visible",
     d.type && `ogx__cell--type-${d.type}`,
-    q && "ogx__cell--pinned",
-    q && `ogx__cell--pinned-${c}`,
+    Y && "ogx__cell--pinned",
+    Y && `ogx__cell--pinned-${c}`,
     I && "ogx__cell--editing",
     y && y > 1 && "ogx__cell--spanned",
     A
-  ].filter(Boolean).join(" "), Y = b?.cellProps?.colSpan || 1, G = y || 1, oe = b?.cellProps?.width ?? x ?? d.width ?? 100, Q = {
+  ].filter(Boolean).join(" "), X = b?.cellProps?.colSpan || 1, G = y || 1, oe = b?.cellProps?.width ?? x ?? d.width ?? 100, Q = {
     width: "var(--width)",
     "--width": typeof oe == "number" ? `${oe}px` : oe,
     flexGrow: d.flex ?? 0,
@@ -1174,11 +1174,11 @@ function Qr(n) {
     boxSizing: "border-box",
     minWidth: d.minWidth,
     maxWidth: d.maxWidth,
-    position: q ? "sticky" : void 0,
-    zIndex: d.zIndex ?? (q ? 3 : void 0),
+    position: Y ? "sticky" : void 0,
+    zIndex: d.zIndex ?? (Y ? 3 : void 0),
     padding: I ? 0 : void 0
   };
-  G > 1 && (Q.height = `calc(var(--height) * ${G} - var(--border-width, 1px))`, Q.zIndex = 10, q && (Q.zIndex = 40)), q && f !== void 0 && (c === "left" ? Q.left = f : Q.right = f);
+  G > 1 && (Q.height = `calc(var(--height) * ${G} - var(--border-width, 1px))`, Q.zIndex = 10, Y && (Q.zIndex = 40)), Y && f !== void 0 && (c === "left" ? Q.left = f : Q.right = f);
   const ve = xe.useRef(null);
   return xe.useLayoutEffect(() => {
     w && ve.current && ve.current.focus({ preventScroll: !0 });
@@ -1196,7 +1196,7 @@ function Qr(n) {
       tabIndex: -1,
       "data-field": d.field,
       "data-colindex": u,
-      ...Y > 1 ? { "aria-colspan": Y } : {},
+      ...X > 1 ? { "aria-colspan": X } : {},
       ...G > 1 ? { "aria-rowspan": G } : {},
       children: /* @__PURE__ */ t.jsx("div", { className: "ogx__cell-content", children: B })
     }
@@ -1296,7 +1296,7 @@ function ti(n) {
   };
   return /* @__PURE__ */ t.jsx("div", { className: "ogx__detail-panel", style: i, children: /* @__PURE__ */ t.jsx("div", { className: "ogx__detail-panel-content", children: o }) });
 }
-function Sn(n) {
+function jn(n) {
   const {
     row: o,
     columns: e,
@@ -1326,10 +1326,10 @@ function Sn(n) {
     editingCell: S,
     onEditStart: L,
     onEditStop: B,
-    onEditCellValueChange: q,
+    onEditCellValueChange: Y,
     focusedCellField: A,
     isFocusVisible: U,
-    colspanMap: Y,
+    colspanMap: X,
     rowSpanningCaches: G,
     rowHeight: oe = 52
   } = n, Q = xe.useRef(null), ve = xe.useRef(null);
@@ -1364,18 +1364,18 @@ function Sn(n) {
     c,
     j,
     C
-  ), [e, g, h, l, I, c, j, C]), F = Qn(o.id, x), X = F === "top", K = F === "bottom", M = o._hasChildren === !0, ue = xe.useCallback((z, Pe) => {
+  ), [e, g, h, l, I, c, j, C]), F = Qn(o.id, x), q = F === "top", K = F === "bottom", M = o._hasChildren === !0, ue = xe.useCallback((z, Pe) => {
     M || L?.({ id: o.id, field: z, value: Pe });
   }, [M, o.id, L]), le = xe.useCallback((z, Pe) => {
-    q?.({ id: o.id, field: z, value: Pe });
-  }, [q, o.id]), _e = xe.useCallback((z) => {
+    Y?.({ id: o.id, field: z, value: Pe });
+  }, [Y, o.id]), _e = xe.useCallback((z) => {
     B?.({ cancel: z });
   }, [B]), ot = [
     "ogx__row",
     i && "ogx__row--selected",
     r % 2 === 0 && "ogx__row--even",
     r % 2 === 1 && "ogx__row--odd",
-    X && "ogx__row--pinned-top",
+    q && "ogx__row--pinned-top",
     K && "ogx__row--pinned-bottom",
     k && "ogx__row--dragging",
     p && "ogx__row--drag-over",
@@ -1475,7 +1475,7 @@ function Sn(n) {
                 });
               },
               children: /* @__PURE__ */ t.jsx(
-                En,
+                Nn,
                 {
                   id: `ogx-select-row-${o.id}`,
                   name: `ogx-select-row-${o.id}`,
@@ -1499,7 +1499,7 @@ function Sn(n) {
                 },
                 z.field
               );
-            const Me = z.valueGetter ? z.valueGetter({ row: o, field: z.field, value: o[z.field] }) : o[z.field], ft = g[z.field] ?? z.width, Ue = Nn(z.field, h), ht = Ue ? W[z.field] : void 0, pt = S?.id === o.id && S?.field === z.field, Qt = pt ? S?.value : Me, Tt = Y?.get(o.id)?.[z.field], Et = G?.spannedCells[o.id]?.[z.field], Ot = G?.hiddenCells[o.id]?.[z.field] || !1;
+            const Me = z.valueGetter ? z.valueGetter({ row: o, field: z.field, value: o[z.field] }) : o[z.field], pt = g[z.field] ?? z.width, Ue = In(z.field, h), rt = Ue ? W[z.field] : void 0, it = S?.id === o.id && S?.field === z.field, Qt = it ? S?.value : Me, Tt = X?.get(o.id)?.[z.field], Et = G?.spannedCells[o.id]?.[z.field], Ot = G?.hiddenCells[o.id]?.[z.field] || !1;
             return /* @__PURE__ */ t.jsx(
               Zr,
               {
@@ -1510,13 +1510,13 @@ function Sn(n) {
                 colIndex: Pe,
                 isSelected: i,
                 onCellClick: s,
-                width: ft,
+                width: pt,
                 pinnedPosition: Ue,
-                pinnedOffset: ht,
+                pinnedOffset: rt,
                 isFocused: A === z.field,
                 isFocusVisible: U,
                 isEditable: z.editable,
-                isEditing: pt,
+                isEditing: it,
                 onCellEditStart: ue,
                 onEditStop: _e,
                 onCellValueChange: le,
@@ -1612,7 +1612,7 @@ const ni = ({
       })
     ]
   }
-), jn = ({
+), Rn = ({
   variant: n = "text",
   size: o = "medium",
   color: e = "default",
@@ -1683,7 +1683,7 @@ function So(n) {
     ] }),
     /* @__PURE__ */ t.jsxs("div", { className: "ogx-pagination__actions", children: [
       s && /* @__PURE__ */ t.jsx(
-        jn,
+        Rn,
         {
           variant: "text",
           size: "small",
@@ -1695,7 +1695,7 @@ function So(n) {
         }
       ),
       /* @__PURE__ */ t.jsx(
-        jn,
+        Rn,
         {
           variant: "text",
           size: "small",
@@ -1713,7 +1713,7 @@ function So(n) {
         g
       ] }),
       /* @__PURE__ */ t.jsx(
-        jn,
+        Rn,
         {
           variant: "text",
           size: "small",
@@ -1725,7 +1725,7 @@ function So(n) {
         }
       ),
       u && /* @__PURE__ */ t.jsx(
-        jn,
+        Rn,
         {
           variant: "text",
           size: "small",
@@ -2232,9 +2232,9 @@ function hi(n) {
       }
       const B = (A) => {
         if (A.length <= 1) return;
-        const U = A.slice(0, -1), Y = k(U);
-        let G = E.get(Y);
-        if (G === void 0 && (G = `auto-group-${Y}`, !_.has(G))) {
+        const U = A.slice(0, -1), X = k(U);
+        let G = E.get(X);
+        if (G === void 0 && (G = `auto-group-${X}`, !_.has(G))) {
           const oe = U[U.length - 1];
           _.set(G, {
             id: G,
@@ -2244,7 +2244,7 @@ function hi(n) {
             isExpanded: !1,
             children: [],
             label: oe
-          }), E.set(Y, G);
+          }), E.set(X, G);
           const Q = {
             id: G,
             name: oe,
@@ -2253,20 +2253,20 @@ function hi(n) {
           y.push(Q), U.length === 1 && b.push(G), B(U);
         }
         return G;
-      }, q = B(L);
-      if (q !== void 0) {
-        const A = _.get(q), U = _.get(S);
-        A && U && (U.parentId = q, A.children = A.children || [], A.children.includes(S) || A.children.push(S));
+      }, Y = B(L);
+      if (Y !== void 0) {
+        const A = _.get(Y), U = _.get(S);
+        A && U && (U.parentId = Y, A.children = A.children || [], A.children.includes(S) || A.children.push(S));
       }
     }), y.forEach((p) => {
       const S = p.id, L = _.get(S);
       if (!L) return;
-      const q = S.replace("auto-group-", "").split("/");
-      if (q.length > 1) {
-        const A = q.slice(0, -1), U = k(A), Y = E.get(U);
-        if (Y && _.has(Y)) {
-          L.parentId = Y;
-          const G = _.get(Y);
+      const Y = S.replace("auto-group-", "").split("/");
+      if (Y.length > 1) {
+        const A = Y.slice(0, -1), U = k(A), X = E.get(U);
+        if (X && _.has(X)) {
+          L.parentId = X;
+          const G = _.get(X);
           G && (G.children = G.children || [], G.children.includes(S) || G.children.push(S));
         }
       }
@@ -2296,36 +2296,36 @@ function hi(n) {
     o.forEach((B) => _.set(e(B), B)), x.forEach((B) => _.set(B.id, B));
     const b = (B) => Zn(B, d), y = /* @__PURE__ */ new Map(), E = (B) => {
       if (y.has(B)) return y.get(B);
-      const q = _.get(B);
-      if (!q) return !1;
-      if (b(q))
+      const Y = _.get(B);
+      if (!Y) return !1;
+      if (b(Y))
         return y.set(B, !0), !0;
       const U = g.get(B);
       return U && U.children && U.children.some((G) => E(G)) ? (y.set(B, !0), !0) : (y.set(B, !1), !1);
-    }, k = (B, q) => {
+    }, k = (B, Y) => {
       if (!s || s.length === 0) return 0;
-      const A = _.get(B), U = _.get(q);
+      const A = _.get(B), U = _.get(Y);
       if (!A || !U) return 0;
-      for (const Y of s) {
-        const G = A[Y.field], oe = U[Y.field], Q = eo(G, oe, Y.sort);
+      for (const X of s) {
+        const G = A[X.field], oe = U[X.field], Q = eo(G, oe, X.sort);
         if (Q !== 0) return Q;
       }
       return 0;
     }, p = [], S = /* @__PURE__ */ new Set(), L = (B) => {
-      const q = B.filter((A) => E(A));
-      q.sort(k), q.forEach((A) => {
+      const Y = B.filter((A) => E(A));
+      Y.sort(k), Y.forEach((A) => {
         if (S.has(A)) return;
-        const U = _.get(A), Y = g.get(A);
-        if (U && Y) {
+        const U = _.get(A), X = g.get(A);
+        if (U && X) {
           S.add(A);
           const G = {
             ...U,
-            _treeDepth: Y.depth,
+            _treeDepth: X.depth,
             _isExpanded: f.has(A),
-            _hasChildren: Y.children && Y.children.length > 0 || Y.serverChildrenCount && Y.serverChildrenCount > 0,
-            _descendantCount: Y.children ? Y.children.length : 0
+            _hasChildren: X.children && X.children.length > 0 || X.serverChildrenCount && X.serverChildrenCount > 0,
+            _descendantCount: X.children ? X.children.length : 0
           };
-          p.push(G), f.has(A) && Y.children && Y.children.length > 0 && L(Y.children);
+          p.push(G), f.has(A) && X.children && X.children.length > 0 && L(X.children);
         }
       });
     };
@@ -2379,26 +2379,26 @@ function xi(n) {
         });
       const L = r[p], B = /* @__PURE__ */ new Map();
       k.forEach((A) => {
-        const U = A[L], Y = String(U);
-        B.has(Y) || B.set(Y, []), B.get(Y).push(A);
+        const U = A[L], X = String(U);
+        B.has(X) || B.set(X, []), B.get(X).push(A);
       });
-      const q = [];
+      const Y = [];
       return B.forEach((A, U) => {
         const G = A[0][L], oe = b(L, U, S);
-        q.push(oe);
+        Y.push(oe);
         const Q = {};
         i && Object.entries(i).forEach(([W, F]) => {
-          const X = A.map((K) => K[W]);
+          const q = A.map((K) => K[W]);
           if (F === "sum")
-            Q[W] = X.reduce((K, M) => (Number(K) || 0) + (Number(M) || 0), 0);
+            Q[W] = q.reduce((K, M) => (Number(K) || 0) + (Number(M) || 0), 0);
           else if (F === "min")
-            Q[W] = Math.min(...X.map((K) => Number(K) || 0));
+            Q[W] = Math.min(...q.map((K) => Number(K) || 0));
           else if (F === "max")
-            Q[W] = Math.max(...X.map((K) => Number(K) || 0));
+            Q[W] = Math.max(...q.map((K) => Number(K) || 0));
           else if (F === "avg") {
-            const K = X.reduce((M, ue) => (Number(M) || 0) + (Number(ue) || 0), 0);
-            Q[W] = X.length ? K / X.length : 0;
-          } else F === "count" && (Q[W] = X.length);
+            const K = q.reduce((M, ue) => (Number(M) || 0) + (Number(ue) || 0), 0);
+            Q[W] = q.length ? K / q.length : 0;
+          } else F === "count" && (Q[W] = q.length);
         });
         const ve = {
           [L]: G,
@@ -2423,7 +2423,7 @@ function xi(n) {
         j.get(oe).children = D;
         const H = A.length;
         j.get(oe).descendantCount = H;
-      }), q;
+      }), Y;
     }, E = y(o, 0, null);
     return _.push(...E), { treeNodes: j, rootIds: _, groupingRows: C };
   }, [o, r, i, e, u]);
@@ -2461,20 +2461,20 @@ function xi(n) {
     }, y = (k) => {
       let p = k;
       d && (p = k.filter(b)), s && s.length > 0 && p.sort((S, L) => {
-        const B = f.get(S) || _.get(S), q = f.get(L) || _.get(L);
-        if (!B || !q) return 0;
+        const B = f.get(S) || _.get(S), Y = f.get(L) || _.get(L);
+        if (!B || !Y) return 0;
         for (const A of s) {
-          const U = B[A.field], Y = q[A.field], G = eo(U, Y, A.sort);
+          const U = B[A.field], X = Y[A.field], G = eo(U, X, A.sort);
           if (G !== 0) return G;
         }
         return 0;
       }), p.forEach((S) => {
         if (C.has(S)) return;
-        const L = x.get(S), B = L?.children && L.children.length > 0, q = B ? f.get(S) : _.get(S);
-        if (q && L) {
+        const L = x.get(S), B = L?.children && L.children.length > 0, Y = B ? f.get(S) : _.get(S);
+        if (Y && L) {
           C.add(S);
           const A = {
-            ...q,
+            ...Y,
             _treeDepth: L.depth,
             _isExpanded: g.has(S),
             _hasChildren: B,
@@ -3157,7 +3157,7 @@ function Po(n) {
                 style: { display: "flex", alignItems: "center", gap: "var(--ogx-spacing-md)", flex: 1, cursor: E ? "pointer" : "not-allowed" },
                 children: [
                   /* @__PURE__ */ t.jsx(
-                    En,
+                    Nn,
                     {
                       checked: y,
                       onChange: (S) => r(b.field, S.target.checked),
@@ -3176,7 +3176,7 @@ function Po(n) {
     /* @__PURE__ */ t.jsxs("div", { className: "ogx-column-visibility-panel__footer", children: [
       /* @__PURE__ */ t.jsxs("label", { className: "ogx-column-visibility-panel__item", children: [
         /* @__PURE__ */ t.jsx(
-          En,
+          Nn,
           {
             checked: f,
             onChange: m
@@ -3225,10 +3225,10 @@ function tl(n) {
     onDetailPanelExpandedRowIdsChange: S,
     pinCheckboxColumn: L = !0,
     pinExpandColumn: B = !0,
-    disableColumnReorder: q = !1,
+    disableColumnReorder: Y = !1,
     columnOrder: A,
     onColumnOrderChange: U,
-    height: Y,
+    height: X,
     rowReordering: G = !1,
     onRowOrderChange: oe,
     loading: Q = !1,
@@ -3238,7 +3238,7 @@ function tl(n) {
     rowGroupingModel: H,
     aggregationModel: W,
     onAggregationModelChange: F,
-    getAggregationPosition: X,
+    getAggregationPosition: q,
     isCellEditable: K,
     processRowUpdate: M,
     onProcessRowUpdateError: ue,
@@ -3248,10 +3248,10 @@ function tl(n) {
     paginationMode: z = "client",
     rowCount: Pe,
     slots: Me,
-    slotProps: ft,
+    slotProps: pt,
     pivotMode: Ue = !1,
-    pivotModel: ht,
-    onPivotModelChange: pt,
+    pivotModel: rt,
+    onPivotModelChange: it,
     className: Qt = "",
     style: Tt,
     onRowsScrollEnd: Et,
@@ -3264,34 +3264,34 @@ function tl(n) {
     listView: an = !1,
     listViewColumn: ro,
     columnGroupingModel: Nt,
-    noRowsLabel: In = "No Data",
-    apiRef: Pn
+    noRowsLabel: Pn = "No Data",
+    apiRef: Mn
   } = n, Oo = ce(() => ({ items: [] }), []), Xe = c || Oo, [Wo, Fo] = Z(
     () => yt?.sorting?.sortModel ?? []
-  ), Mn = w !== void 0, rt = Mn ? w : Wo, Ao = ce(() => [], []), Ln = H || Ao, Tn = W !== void 0, io = ce(() => Me?.toolbar, [Me?.toolbar]), [zo, Bo] = Z(
+  ), Ln = w !== void 0, lt = Ln ? w : Wo, Ao = ce(() => [], []), Tn = H || Ao, On = W !== void 0, io = ce(() => Me?.toolbar, [Me?.toolbar]), [zo, Bo] = Z(
     () => W ?? {}
-  ), it = Tn ? W : zo, $o = O((a) => {
-    Tn || Bo(a), F?.(a);
-  }, [Tn, F]), [Do, Ho] = Z(
+  ), st = On ? W : zo, $o = O((a) => {
+    On || Bo(a), F?.(a);
+  }, [On, F]), [Do, Ho] = Z(
     () => yt?.columns?.columnVisibilityModel ?? {}
-  ), On = no !== void 0, Ze = On ? no : Do, Zt = O((a) => {
-    On || Ho(a), oo?.(a);
-  }, [On, oo]), [Go, Vo] = Z(
+  ), Wn = no !== void 0, Ze = Wn ? no : Do, Zt = O((a) => {
+    Wn || Ho(a), oo?.(a);
+  }, [Wn, oo]), [Go, Vo] = Z(
     () => yt?.columns?.pinnedColumns ?? {}
-  ), Wn = _ !== void 0, lt = Wn ? _ : Go, Fn = O((a) => {
-    Wn || Vo(a), b?.(a);
-  }, [Wn, b]), Uo = ce(() => ({ rowFields: [], columnFields: [], valueFields: [] }), []), [Ko, Yo] = Z(ht ?? Uo), lo = ht ?? Ko, Xo = O((a) => {
-    Yo(a), pt?.(a);
-  }, [pt]), dn = Ci(o, e, lo, Ue), An = Ue && dn.isValid ? dn.pivotRows : o, st = Ue && dn.isValid ? dn.pivotColumns : e, [qo, so] = Z(null);
+  ), Fn = _ !== void 0, at = Fn ? _ : Go, An = O((a) => {
+    Fn || Vo(a), b?.(a);
+  }, [Fn, b]), Uo = ce(() => ({ rowFields: [], columnFields: [], valueFields: [] }), []), [Ko, Yo] = Z(rt ?? Uo), lo = rt ?? Ko, Xo = O((a) => {
+    Yo(a), it?.(a);
+  }, [it]), dn = Ci(o, e, lo, Ue), zn = Ue && dn.isValid ? dn.pivotRows : o, dt = Ue && dn.isValid ? dn.pivotColumns : e, [qo, so] = Z(null);
   te(() => {
     so(null);
-  }, [it]);
+  }, [st]);
   const [Jo, Qo] = Z(
     () => yt?.pagination?.paginationModel ?? I
-  ), zn = n.paginationModel !== void 0, me = zn ? I : Jo, cn = O((a) => {
-    zn || Qo(a), j?.(a);
-  }, [zn, j]), [Zo, ao] = Z([]), en = u !== void 0, co = en ? u : Zo, Le = ce(() => new Set(co), [co]), un = g, It = ne(null), er = ne(null), gn = ne(null), tr = O((a) => a.id, []), fn = r || tr, [et, Wt] = Z(null), Ft = O((a) => {
-    Yn.current?.classList.toggle("ogx--kb", a);
+  ), Bn = n.paginationModel !== void 0, me = Bn ? I : Jo, cn = O((a) => {
+    Bn || Qo(a), j?.(a);
+  }, [Bn, j]), [Zo, ao] = Z([]), en = u !== void 0, co = en ? u : Zo, Le = ce(() => new Set(co), [co]), un = g, It = ne(null), er = ne(null), gn = ne(null), tr = O((a) => a.id, []), fn = r || tr, [et, Wt] = Z(null), Ft = O((a) => {
+    _n.current?.classList.toggle("ogx--kb", a);
   }, []), uo = ne(le);
   uo.current = le;
   const go = ne(null), fo = ne(null), nr = O((a) => {
@@ -3299,9 +3299,9 @@ function tl(n) {
       const R = fo.current?.getNodePath(a.id) || [a.groupingKey];
       go.current?.(a.id, R);
     }
-  }, [ve]), at = ii({
-    rows: An,
-    columns: st,
+  }, [ve]), ct = ii({
+    rows: zn,
+    columns: dt,
     rowHeight: i,
     headerHeight: l,
     rowCount: Pe,
@@ -3310,72 +3310,72 @@ function tl(n) {
   }), {
     state: ge,
     apiRef: At,
-    setRows: Bn,
+    setRows: $n,
     setColumns: ho,
     setScroll: po,
     setDimensions: xo,
     setDataSourceLoading: or,
     setDataSourceError: rr,
     setRowCount: ir
-  } = at;
+  } = ct;
   te(() => {
-    Pn && (Pn.current = At.current);
-  }, [Pn, At]);
+    Mn && (Mn.current = At.current);
+  }, [Mn, At]);
   const { copySelectedRows: mo } = ji({
     selectedRowIds: Le,
-    columns: st,
+    columns: dt,
     getVisibleRows: () => At.current.getVisibleRows(),
     getRowId: fn
   });
   te(() => {
     At.current.copySelectedRows = mo, At.current.getSelectedRows = () => Array.from(Le);
   }, [mo, Le, At]);
-  const lr = ge.dataSource.loading, tn = Q || lr, nn = ce(() => ge.rows.allRows.map((a) => ge.rows.idRowsLookup.get(a)), [ge.rows]), $n = hi({
+  const lr = ge.dataSource.loading, tn = Q || lr, nn = ce(() => ge.rows.allRows.map((a) => ge.rows.idRowsLookup.get(a)), [ge.rows]), Dn = hi({
     rows: nn,
     getRowId: fn,
     getTreeDataPath: v,
     treeData: ve,
     defaultGroupingExpansionDepth: D,
     filterModel: Xe,
-    sortModel: rt,
+    sortModel: lt,
     onRowExpansionChange: nr
   });
   te(() => {
-    fo.current = $n;
-  }, [$n]);
+    fo.current = Dn;
+  }, [Dn]);
   const sr = xi({
     rows: nn,
     getRowId: fn,
-    rowGroupingModel: Ln,
-    aggregationModel: it,
+    rowGroupingModel: Tn,
+    aggregationModel: st,
     defaultGroupingExpansionDepth: D,
     filterModel: Xe,
-    sortModel: rt,
-    getAggregationPosition: X
+    sortModel: lt,
+    getAggregationPosition: q
   }), Ge = mi({
     rows: nn,
     getRowId: fn,
     processRowUpdate: M,
     onProcessRowUpdateError: ue,
     onRowChange: (a) => {
-      const { dispatch: R } = at, $ = Array.from(at.state.rows.idRowsLookup.values()).map(
+      const { dispatch: R } = ct, $ = Array.from(ct.state.rows.idRowsLookup.values()).map(
         (ee) => ee.id === a.id ? a : ee
       );
       R({ type: "SET_ROWS", payload: $ });
     }
-  }), Dn = ve, zt = !!(Ln && Ln.length > 0), hn = Dn || zt, Ve = Dn ? $n : zt ? sr : null, Te = N && !zt, pn = O((a) => {
+  }), Hn = ve, zt = !!(Tn && Tn.length > 0), hn = Hn || zt, Ve = Hn ? Dn : zt ? sr : null, Te = N && !zt, pn = O((a) => {
     const { row: R, id: P } = a;
     if (hn && R._hasChildren) {
       Ve?.toggleExpansion(P);
       return;
     }
     h?.(a);
-  }, [hn, Ve, h]), Re = ce(() => hn ? st.map((a, R) => R === 0 ? {
+  }, [hn, Ve, h]), Re = ce(() => hn ? dt.map((a, R) => R === 0 ? {
     ...a,
     renderCell: (P) => {
       const { _treeDepth: $, _hasChildren: ee, _isExpanded: se, _groupingField: he, _groupingValue: ze, _descendantCount: Be } = P.row, be = ($ || 0) * 24;
       let de = a.renderCell ? a.renderCell(P) : P.value;
-      return Dn && ee && P.row._isGroupRow && (de = /* @__PURE__ */ t.jsxs("div", { className: "ogx__group-cell-content", children: [
+      return Hn && ee && P.row._isGroupRow && (de = /* @__PURE__ */ t.jsxs("div", { className: "ogx__group-cell-content", children: [
         P.value,
         Be !== void 0 && Be > 0 ? ` (${Be})` : ""
       ] })), zt && ee && he && (de = /* @__PURE__ */ t.jsxs("div", { className: "ogx__group-cell-content", children: [
@@ -3436,50 +3436,50 @@ function tl(n) {
       const { _hasChildren: $, _groupingField: ee } = P.row;
       return zt && $ ? a.field === ee ? null : P.value !== void 0 && P.value !== null ? a.renderCell ? a.renderCell(P) : P.value : null : a.renderCell ? a.renderCell(P) : P.value;
     }
-  }) : st, [st, hn, zt, Ve]), Hn = vi({
+  }) : dt, [dt, hn, zt, Ve]), Gn = vi({
     dataSource: le,
-    sortModel: rt,
+    sortModel: lt,
     filterModel: Xe,
     paginationModel: me,
     paginationMode: z,
     sortingMode: _e,
     filterMode: ot,
-    aggregationModel: it,
-    setRows: Bn,
+    aggregationModel: st,
+    setRows: $n,
     setRowCount: ir,
     setDataSourceLoading: or,
     setDataSourceError: rr,
     onAggregationResults: so
   });
   te(() => {
-    Hn.fetchChildren && (go.current = Hn.fetchChildren);
-  }, [Hn.fetchChildren]);
+    Gn.fetchChildren && (go.current = Gn.fetchChildren);
+  }, [Gn.fetchChildren]);
   const [qe, ar] = Z(
     () => yt?.columns?.columnWidths ?? {}
   ), [dr, xn] = Z(
-    () => yt?.columns?.columnOrder ?? st.map((a) => a.field)
+    () => yt?.columns?.columnOrder ?? dt.map((a) => a.field)
   ), Ct = A || dr;
   te(() => {
-    le || Bn(An);
-  }, [An, Bn, le]), te(() => {
-    ho(st);
-  }, [st, ho]), te(() => {
-    Ue && xn(st.map((a) => a.field));
-  }, [Ue, st]);
+    le || $n(zn);
+  }, [zn, $n, le]), te(() => {
+    ho(dt);
+  }, [dt, ho]), te(() => {
+    Ue && xn(dt.map((a) => a.field));
+  }, [Ue, dt]);
   const Bt = ce(() => {
-    if (q) return Re;
+    if (Y) return Re;
     const a = new Map(Ct.map((R, P) => [R, P]));
     return [...Re].sort((R, P) => {
       const $ = a.get(R.field) ?? Re.indexOf(R), ee = a.get(P.field) ?? Re.indexOf(P);
       return $ - ee;
     });
-  }, [Re, Ct, q]), wo = ce(() => Bt.filter((a) => Ze[a.field] !== !1), [Bt, Ze]), $t = li({
+  }, [Re, Ct, Y]), wo = ce(() => Bt.filter((a) => Ze[a.field] !== !1), [Bt, Ze]), $t = li({
     columns: Bt,
     onColumnOrderChange: O((a) => {
       const { oldIndex: R, targetIndex: P } = a, $ = [...Ct], [ee] = $.splice(R, 1);
       $.splice(P, 0, ee), A || xn($), U?.(a);
     }, [Ct, A, U]),
-    disableColumnReorder: q
+    disableColumnReorder: Y
   }), [cr, ur] = Z(/* @__PURE__ */ new Set()), kt = p ?? cr, tt = !!E, on = O((a) => {
     const R = new Set(kt);
     R.has(a) ? R.delete(a) : R.add(a), p === void 0 && ur(R), S?.(R);
@@ -3488,39 +3488,39 @@ function tl(n) {
     return G && a.push({ field: "__reorder_col__" }), tt && a.push({ field: "__expand_col__" }), s && a.push({ field: "__checkbox_col__" }), [...a, ...Bt];
   }, [Bt, s, tt, G]), gr = O((a, R) => {
     ar((P) => ({ ...P, [a]: R }));
-  }, []), Gn = ne(He);
-  Gn.current = He, te(() => {
-    if (!Gn.current) return;
+  }, []), Vn = ne(He);
+  Vn.current = He, te(() => {
+    if (!Vn.current) return;
     const a = {
-      sorting: { sortModel: rt },
+      sorting: { sortModel: lt },
       filter: { filterModel: Xe },
       pagination: { paginationModel: me },
       columns: {
         columnWidths: qe,
         columnOrder: Ct,
         columnVisibilityModel: Ze,
-        pinnedColumns: lt
+        pinnedColumns: at
       }
     };
-    Gn.current(a);
+    Vn.current(a);
   }, [
-    rt,
+    lt,
     Xe,
     me,
     qe,
     Ct,
     Ze,
-    lt
+    at
   ]);
-  const mn = ce(() => nn, [nn]), Ke = ce(() => Ve ? Ve.getVisibleRows() || [] : ot === "server" && le ? mn : ui(mn, Xe), [mn, Xe, Ve, ot, le]), { top: Je, center: Dt, bottom: dt } = ce(() => Ve ? { top: [], center: Ke, bottom: [] } : Pr(Ke, y), [Ke, y, Ve]), Oe = ce(() => Ve || _e === "server" && le ? Dt : fi(Dt, rt), [Dt, rt, Ve, _e, le]), xt = ce(() => {
+  const mn = ce(() => nn, [nn]), Ke = ce(() => Ve ? Ve.getVisibleRows() || [] : ot === "server" && le ? mn : ui(mn, Xe), [mn, Xe, Ve, ot, le]), { top: Je, center: Dt, bottom: ut } = ce(() => Ve ? { top: [], center: Ke, bottom: [] } : Pr(Ke, y), [Ke, y, Ve]), Oe = ce(() => Ve || _e === "server" && le ? Dt : fi(Dt, lt), [Dt, lt, Ve, _e, le]), xt = ce(() => {
     if (!Te || z === "server" && le)
       return Oe;
     const a = me.page * me.pageSize, R = a + me.pageSize;
     return Oe.slice(a, R);
   }, [Oe, Te, me.page, me.pageSize, z, le]);
   te(() => {
-    at.apiRef.current.getVisibleRows = () => Oe, at.apiRef.current.getVisibleColumns = () => Re;
-  }, [Oe, Re, at.apiRef]);
+    ct.apiRef.current.getVisibleRows = () => Oe, ct.apiRef.current.getVisibleColumns = () => Re;
+  }, [Oe, Re, ct.apiRef]);
   const Ht = si({
     rows: Te ? xt : Oe,
     getRowId: (a) => a.id,
@@ -3529,7 +3529,7 @@ function tl(n) {
   }), Ee = ce(() => {
     if (Ve)
       return Dt;
-    const a = Te ? xt : Oe, R = [...Je, ...a, ...dt];
+    const a = Te ? xt : Oe, R = [...Je, ...a, ...ut];
     if (z === "infinite" && ge.dataSource.loading && R.length > 0) {
       const P = Math.min(me.pageSize, 20), $ = Array.from({ length: P }, (ee, se) => ({
         id: `__skeleton_${se}__`,
@@ -3542,7 +3542,7 @@ function tl(n) {
     Je,
     xt,
     Oe,
-    dt,
+    ut,
     Te,
     Ve,
     Dt,
@@ -3553,19 +3553,19 @@ function tl(n) {
     Ee,
     Ce,
     qe
-  ), { aggregationResult: Vn } = _i({
+  ), { aggregationResult: Un } = _i({
     rows: Ke,
-    aggregationModel: it,
+    aggregationModel: st,
     isServerSide: !!(le && (z === "server" || _e === "server")),
     dataSource: le,
     filterModel: Xe,
-    sortModel: rt,
+    sortModel: lt,
     serverAggregationResults: qo
-  }), wn = Object.keys(it).length > 0;
+  }), wn = Object.keys(st).length > 0;
   te(() => {
-    at.apiRef.current.getAggregationResult = () => wn ? Vn : null, at.apiRef.current.getAggregationModel = () => wn ? it : null;
-  }, [Vn, it, wn, at.apiRef]);
-  const Un = ce(() => {
+    ct.apiRef.current.getAggregationResult = () => wn ? Un : null, ct.apiRef.current.getAggregationModel = () => wn ? st : null;
+  }, [Un, st, wn, ct.apiRef]);
+  const Kn = ce(() => {
     const a = i, R = Te ? xt : Oe, P = R.map((T, J) => {
       let re = a;
       if (kt.has(T.id)) {
@@ -3573,9 +3573,9 @@ function tl(n) {
         re += typeof Ie == "number" ? Ie : parseInt(String(Ie), 10) || 200;
       }
       return re;
-    }), $ = P.reduce((T, J, re) => (T.push((T[re - 1] || 0) + J), T), []), se = (z === "infinite" && ge.dataSource.loading && R.length > 0 ? Math.min(me.pageSize, 20) : 0) * a, he = ($[$.length - 1] || 0) + se, ze = Je.length * a, Be = dt.length * a, ae = [], be = [], de = [], V = [];
+    }), $ = P.reduce((T, J, re) => (T.push((T[re - 1] || 0) + J), T), []), se = (z === "infinite" && ge.dataSource.loading && R.length > 0 ? Math.min(me.pageSize, 20) : 0) * a, he = ($[$.length - 1] || 0) + se, ze = Je.length * a, Be = ut.length * a, ae = [], be = [], de = [], V = [];
     wo.forEach((T) => {
-      const J = Nn(T.field, lt);
+      const J = In(T.field, at);
       J === "left" ? ae.push(T) : J === "right" ? be.push(T) : de.push(T);
     });
     const we = ge.dimensions.viewportWidth || 1e3, je = (s ? 48 : 0) + (tt ? 48 : 0) + (G ? 48 : 0), ye = (T) => qe[T.field] ?? T.width, We = (T) => {
@@ -3605,7 +3605,7 @@ function tl(n) {
     }, 0), mt = Math.max(
       we - je - Fe - pe,
       fe
-    ), ct = [], $e = [], Ne = [];
+    ), gt = [], $e = [], Ne = [];
     let De = 0;
     de.forEach((T) => {
       const J = Object.prototype.hasOwnProperty.call(qe, T.field), re = We(ye(T));
@@ -3613,14 +3613,14 @@ function tl(n) {
         Ne.push({ col: T, flex: T.flex }), De += T.flex;
         return;
       }
-      re.type === "fixed" ? ct.push({ col: T, width: re.value }) : re.type === "percentage" ? $e.push({ col: T, percentage: re.value }) : (Ne.push({ col: T, flex: 1 }), De += 1);
+      re.type === "fixed" ? gt.push({ col: T, width: re.value }) : re.type === "percentage" ? $e.push({ col: T, percentage: re.value }) : (Ne.push({ col: T, flex: 1 }), De += 1);
     });
-    const Ye = ct.reduce((T, { width: J }) => T + J, 0);
+    const Ye = gt.reduce((T, { width: J }) => T + J, 0);
     let Ae = Math.max(0, mt - Ye);
-    const ut = /* @__PURE__ */ new Map();
+    const ft = /* @__PURE__ */ new Map();
     $e.forEach(({ col: T, percentage: J }) => {
       const re = J / 100 * Ae;
-      ut.set(T.field, re), Ae -= re;
+      ft.set(T.field, re), Ae -= re;
     }), Ae = Math.max(0, Ae);
     const St = /* @__PURE__ */ new Map(), wt = Ne.map((T) => ({
       ...T,
@@ -3636,7 +3636,7 @@ function tl(n) {
         T++;
         const re = wt.filter((ie) => !ie.frozen);
         if (re.length === 0) break;
-        const Ie = re.reduce((ie, gt) => ie + gt.flex, 0), bt = wt.reduce((ie, gt) => gt.frozen ? ie + gt.computedWidth : ie, 0), Xn = Math.max(0, Ae - bt);
+        const Ie = re.reduce((ie, ht) => ie + ht.flex, 0), bt = wt.reduce((ie, ht) => ht.frozen ? ie + ht.computedWidth : ie, 0), Xn = Math.max(0, Ae - bt);
         if (Ie <= 0) {
           re.forEach((ie) => {
             ie.computedWidth = ie.minWidth, ie.frozen = !0;
@@ -3644,29 +3644,29 @@ function tl(n) {
           break;
         }
         const yr = Xn / Ie;
-        let _n = 0;
-        const yn = [], Cn = [];
+        let yn = 0;
+        const Cn = [], kn = [];
         if (re.forEach((ie) => {
-          const gt = yr * ie.flex;
-          if (gt < ie.minWidth) {
-            const qn = ie.minWidth - gt;
-            _n += qn, yn.push(ie);
-          } else if (gt > ie.maxWidth) {
-            const qn = ie.maxWidth - gt;
-            _n += qn, Cn.push(ie);
+          const ht = yr * ie.flex;
+          if (ht < ie.minWidth) {
+            const qn = ie.minWidth - ht;
+            yn += qn, Cn.push(ie);
+          } else if (ht > ie.maxWidth) {
+            const qn = ie.maxWidth - ht;
+            yn += qn, kn.push(ie);
           } else
-            ie.computedWidth = gt;
-        }), yn.length === 0 && Cn.length === 0) {
+            ie.computedWidth = ht;
+        }), Cn.length === 0 && kn.length === 0) {
           re.forEach((ie) => ie.frozen = !0);
           break;
         }
-        _n > 0 ? yn.forEach((ie) => {
+        yn > 0 ? Cn.forEach((ie) => {
           ie.computedWidth = ie.minWidth, ie.frozen = !0;
-        }) : _n < 0 ? Cn.forEach((ie) => {
+        }) : yn < 0 ? kn.forEach((ie) => {
           ie.computedWidth = ie.maxWidth, ie.frozen = !0;
-        }) : (yn.forEach((ie) => {
+        }) : (Cn.forEach((ie) => {
           ie.computedWidth = ie.minWidth, ie.frozen = !0;
-        }), Cn.forEach((ie) => {
+        }), kn.forEach((ie) => {
           ie.computedWidth = ie.maxWidth, ie.frozen = !0;
         }));
       }
@@ -3677,11 +3677,11 @@ function tl(n) {
       if (St.has(T.field))
         J = St.get(T.field);
       else {
-        const re = ct.find((bt) => bt.col.field === T.field), Ie = $e.find((bt) => bt.col.field === T.field);
+        const re = gt.find((bt) => bt.col.field === T.field), Ie = $e.find((bt) => bt.col.field === T.field);
         if (re)
           J = re.width;
         else if (Ie) {
-          const bt = ut.get(T.field) || 0;
+          const bt = ft.get(T.field) || 0;
           J = Math.max(T.minWidth ?? 50, bt || 100);
         } else
           J = 100;
@@ -3727,7 +3727,7 @@ function tl(n) {
       unpinnedTotalWidth: nt,
       systemColumnsWidth: je,
       pinnedTopRowsLength: Je.length,
-      pinnedBottomRowsLength: dt.length,
+      pinnedBottomRowsLength: ut.length,
       unpinnedRowsLength: R.length
     };
   }, [
@@ -3738,13 +3738,13 @@ function tl(n) {
     kt,
     k,
     Je.length,
-    dt.length,
+    ut.length,
     kt,
     k,
     Je.length,
-    dt.length,
+    ut.length,
     wo,
-    lt,
+    at,
     qe,
     ge.dimensions.viewportWidth,
     s,
@@ -3773,7 +3773,7 @@ function tl(n) {
       unpinnedRowsHeight: V,
       rowHeights: we,
       unpinnedRowsLength: je
-    } = Un, ye = ge.virtualization.scrollLeft, We = ge.virtualization.scrollTop, Fe = ge.dimensions.viewportWidth || 1e3, pe = d ? be + V + de + 50 : ge.dimensions.viewportHeight || 600, fe = 6, mt = Math.max(0, ye - se), ct = ye + Fe - se;
+    } = Kn, ye = ge.virtualization.scrollLeft, We = ge.virtualization.scrollTop, Fe = ge.dimensions.viewportWidth || 1e3, pe = d ? be + V + de + 50 : ge.dimensions.viewportHeight || 600, fe = 6, mt = Math.max(0, ye - se), gt = ye + Fe - se;
     let $e = 0, Ne = R.length - 1, De = 0, Ye = a.length - 1;
     for (; De <= Ye; ) {
       const ke = De + Ye >>> 1;
@@ -3781,17 +3781,17 @@ function tl(n) {
     }
     $e = Math.max(0, De - fe);
     for (let ke = $e; ke < a.length; ke++) {
-      if ((ke === 0 ? 0 : a[ke - 1]) > ct) {
+      if ((ke === 0 ? 0 : a[ke - 1]) > gt) {
         Ne = Math.min(R.length - 1, ke + fe);
         break;
       }
       Ne = Math.min(R.length - 1, ke + fe);
     }
-    const Ae = $e > 0 ? a[$e - 1] : 0, ut = ze - a[Ne], St = [
+    const Ae = $e > 0 ? a[$e - 1] : 0, ft = ze - a[Ne], St = [
       ...P,
       ...Ae > 0 ? [{ field: "__spacer_left__", width: Ae, isSpacer: !0 }] : [],
       ...R.slice($e, Ne + 1),
-      ...ut > 0 ? [{ field: "__spacer_right__", width: ut, isSpacer: !0 }] : [],
+      ...ft > 0 ? [{ field: "__spacer_right__", width: ft, isSpacer: !0 }] : [],
       ...$
     ], rn = Fe > 0 && ee > Fe ? 16 : 0, Ut = be + V + de + rn + 2, vt = 5;
     let Qe = 0, Pt = je - 1, Kt = 0, jt = 0, nt = ae.length - 1;
@@ -3831,7 +3831,7 @@ function tl(n) {
       }
     };
   }, [
-    Un,
+    Kn,
     ge.virtualization.scrollTop,
     ge.virtualization.scrollLeft,
     ge.dimensions.viewportHeight,
@@ -3870,8 +3870,8 @@ function tl(n) {
     a && (R = mn.map((P) => P.id)), en || ao(R), un?.(R);
   }, [o, en, un]), vo = O((a, R) => {
     const P = R ? [{ field: a, sort: R }] : [];
-    Mn || Fo(P), m?.(P);
-  }, [Mn, m]), Kn = O((a) => {
+    Ln || Fo(P), m?.(P);
+  }, [Ln, m]), Yn = O((a) => {
     Ft(!1), Wt({ id: a.row.id, field: a.field }), gn.current?.focus({ preventScroll: !0 }), x?.(a);
   }, [x, Ft]), bo = ne(Ge.editingCell);
   te(() => {
@@ -3879,7 +3879,7 @@ function tl(n) {
     a && !R && gn.current?.focus({ preventScroll: !0 }), bo.current = Ge.editingCell;
   }, [Ge.editingCell]);
   const _o = ce(() => {
-    const { firstRowIndex: a, lastRowIndex: R } = Se.renderContext, P = Je.length, $ = Je.map((de, V) => ({ row: de, rowIndex: V })), ee = dt.map((de, V) => ({
+    const { firstRowIndex: a, lastRowIndex: R } = Se.renderContext, P = Je.length, $ = Je.map((de, V) => ({ row: de, rowIndex: V })), ee = ut.map((de, V) => ({
       row: de,
       rowIndex: P + (Te ? xt.length : Oe.length) + V
     })), se = Math.max(0, a - P), he = Math.min(
@@ -3893,7 +3893,7 @@ function tl(n) {
   }, [
     Se.renderContext,
     Je,
-    dt,
+    ut,
     xt,
     Oe,
     Te,
@@ -3941,7 +3941,7 @@ function tl(n) {
       a.preventDefault();
       const V = Ce.find((we) => we.field === P);
       if (V && V.sortable !== !1) {
-        const we = rt.find((ye) => ye.field === P);
+        const we = lt.find((ye) => ye.field === P);
         let je = "asc";
         we && (we.sort === "asc" ? je = "desc" : je = null), vo(P, je);
       }
@@ -3960,16 +3960,16 @@ function tl(n) {
       return We && ye !== 0 && (ye > 0 && fe >= Ce.length ? (fe = 0, pe++) : ye < 0 && fe < 0 && (fe = Ce.length - 1, pe--)), !We && (fe < 0 || fe >= Ce.length) || pe < (Fe ? -1 : 0) || pe >= Ee.length ? null : { r: pe, c: fe };
     }, Be = (V, we, je, ye, We, Fe = !1) => {
       let pe = V, fe = we, mt = 0;
-      const ct = Ee.length * Ce.length + Ce.length;
-      for (; mt < ct; ) {
+      const gt = Ee.length * Ce.length + Ce.length;
+      for (; mt < gt; ) {
         if (mt++, pe += je, fe += ye, ye !== 0)
           ye > 0 ? fe >= Ce.length && (fe = 0, pe++) : fe < 0 && (fe = Ce.length - 1, pe--);
         else if (fe < 0 || fe >= Ce.length) return null;
         if (pe < -1 || pe >= Ee.length) return null;
         if (pe === -1) {
           if (!Fe) continue;
-          const Ae = Ce[fe], ut = Ae.sortable !== !1;
-          if (["__checkbox_col__"].includes(Ae.field) || ut) return { r: pe, c: fe };
+          const Ae = Ce[fe], ft = Ae.sortable !== !1;
+          if (["__checkbox_col__"].includes(Ae.field) || ft) return { r: pe, c: fe };
           continue;
         }
         const $e = Ee[pe], Ne = Ce[fe], De = ["__checkbox_col__", "__expand_col__", "__reorder_col__"].includes(Ne.field);
@@ -4027,19 +4027,19 @@ function tl(n) {
         Wt({ id: we.id, field: V.field });
       }
       if (It.current) {
-        const { cumulativeHeights: we, pinnedTopHeight: je } = Se, { clientHeight: ye, clientWidth: We, scrollTop: Fe, scrollLeft: pe } = It.current, fe = ae === 0 ? 0 : we[ae - 1], mt = we[ae], ct = je, $e = Fe + ct, Ne = Fe + ye;
+        const { cumulativeHeights: we, pinnedTopHeight: je } = Se, { clientHeight: ye, clientWidth: We, scrollTop: Fe, scrollLeft: pe } = It.current, fe = ae === 0 ? 0 : we[ae - 1], mt = we[ae], gt = je, $e = Fe + gt, Ne = Fe + ye;
         let De = Fe;
-        if (fe < $e ? De = Math.max(0, fe - ct) : mt > Ne && (De = mt - ye), De !== Fe && (It.current.scrollTop = De), Se.columnMetrics) {
-          const { leftPinnedWidth: Ye, rightPinnedWidth: Ae, unpinnedAccWidths: ut, unpinnedCols: St, totalSpecialsWidth: wt, pinnedSpecialsWidth: rn } = Se.columnMetrics, Ut = V.field, vt = St.findIndex((Qe) => Qe.field === Ut);
+        if (fe < $e ? De = Math.max(0, fe - gt) : mt > Ne && (De = mt - ye), De !== Fe && (It.current.scrollTop = De), Se.columnMetrics) {
+          const { leftPinnedWidth: Ye, rightPinnedWidth: Ae, unpinnedAccWidths: ft, unpinnedCols: St, totalSpecialsWidth: wt, pinnedSpecialsWidth: rn } = Se.columnMetrics, Ut = V.field, vt = St.findIndex((Qe) => Qe.field === Ut);
           if (vt !== -1) {
-            const Qe = wt + Ye + (vt > 0 ? ut[vt - 1] : 0), Pt = wt + Ye + ut[vt], Kt = pe + rn + Ye, jt = pe + We - Ae;
+            const Qe = wt + Ye + (vt > 0 ? ft[vt - 1] : 0), Pt = wt + Ye + ft[vt], Kt = pe + rn + Ye, jt = pe + We - Ae;
             let nt = pe;
             Qe < Kt ? nt = Math.max(0, Qe - rn - Ye) : Pt > jt && (nt = Pt - We + Ae), nt !== pe && (It.current.scrollLeft = nt);
           }
         }
       }
     }
-  }, [et, Ee, Ce, Ge, Se, Le, Vt, on]), br = xe.useMemo(() => Re.some((a) => !!a.rowSpan), [Re]), [vn, bn] = xe.useState(!1), Yn = xe.useRef(null);
+  }, [et, Ee, Ce, Ge, Se, Le, Vt, on]), br = xe.useMemo(() => Re.some((a) => !!a.rowSpan), [Re]), [vn, bn] = xe.useState(!1), _n = xe.useRef(null);
   return te(() => {
     if (!vn || Me?.toolbar) return;
     function a(R) {
@@ -4050,11 +4050,11 @@ function tl(n) {
   }, [vn, Me?.toolbar]), /* @__PURE__ */ t.jsxs(
     "div",
     {
-      ref: Yn,
+      ref: _n,
       className: `ogx ${Qt} ${d ? "ogx--auto-height" : ""} ${br ? "ogx--row-spanning" : ""} ${an ? "ogx--list-view" : ""}`,
       style: {
         ...Tt,
-        height: Y ?? Tt?.height,
+        height: X ?? Tt?.height,
         "--ogx-row-height": `${i}px`,
         "--ogx-header-height": `${l}px`
       },
@@ -4062,11 +4062,11 @@ function tl(n) {
       children: [
         io && (() => {
           const a = {
-            apiRef: at.apiRef,
+            apiRef: ct.apiRef,
             columns: Re,
-            aggregationModel: it,
+            aggregationModel: st,
             onAggregationModelChange: $o,
-            ...Ue ? {
+            ...Ue || rt || it ? {
               pivotModel: lo,
               onPivotModelChange: Xo
             } : {},
@@ -4074,7 +4074,7 @@ function tl(n) {
             onFilterModelChange: f,
             columnVisibilityModel: Ze,
             onColumnVisibilityModelChange: Zt,
-            onColumnReorder: (R, P) => {
+            onColumnReorder: Y ? void 0 : (R, P) => {
               const $ = [...Ct], ee = $.indexOf(R), se = $.indexOf(P);
               if (ee === -1 || se === -1) return;
               const he = [...$];
@@ -4084,7 +4084,7 @@ function tl(n) {
             },
             forceColumnsOpen: vn,
             onColumnsPanelClose: () => bn(!1),
-            ...ft?.toolbar
+            ...pt?.toolbar
           };
           return /* @__PURE__ */ t.jsx(io, { ...a });
         })(),
@@ -4094,7 +4094,7 @@ function tl(n) {
             {
               id: "ogx-standalone-col-panel",
               style: (() => {
-                const a = Yn.current?.getBoundingClientRect();
+                const a = _n.current?.getBoundingClientRect();
                 return {
                   position: "fixed",
                   top: a ? a.top + 8 : 16,
@@ -4153,7 +4153,7 @@ function tl(n) {
                         R.hideable !== !1 && (a[R.field] = !1);
                       }), Zt(a);
                     },
-                    onColumnReorder: (a, R) => {
+                    onColumnReorder: Y ? void 0 : (a, R) => {
                       const P = [...Ct], $ = P.indexOf(a), ee = P.indexOf(R);
                       if ($ === -1 || ee === -1) return;
                       const se = [...P];
@@ -4164,7 +4164,7 @@ function tl(n) {
               ]
             }
           ),
-          document.body
+          _n.current?.closest(".ogx-theme-provider") || document.body
         ),
         an && ro && /* @__PURE__ */ t.jsxs(
           "div",
@@ -4186,7 +4186,7 @@ function tl(n) {
                   /* @__PURE__ */ t.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
                   /* @__PURE__ */ t.jsx("path", { d: "M3 9h18M9 21V9" })
                 ] }),
-                In
+                Pn
               ] }) : Ee.map((a, R) => /* @__PURE__ */ t.jsx(
                 Er,
                 {
@@ -4209,7 +4209,7 @@ function tl(n) {
                   pageSizeOptions: C,
                   onPageChange: ($) => cn({ ...me, page: $ }),
                   onPageSizeChange: ($) => cn({ ...me, pageSize: $, page: 0 }),
-                  ...ft?.pagination
+                  ...pt?.pagination
                 };
                 return /* @__PURE__ */ t.jsx(a, { ...P });
               })()
@@ -4259,11 +4259,11 @@ function tl(n) {
                       allSelected: pr,
                       someSelected: xr,
                       onSelectAll: hr,
-                      sortModel: rt,
+                      sortModel: lt,
                       onSort: vo,
                       onColumnResize: gr,
                       columnWidths: qe,
-                      pinnedColumns: lt,
+                      pinnedColumns: at,
                       focusedCell: et,
                       onHeaderClick: (a) => {
                         Wt({ id: "HEADER", field: a }), Ft(!1), gn.current?.focus({ preventScroll: !0 });
@@ -4278,7 +4278,7 @@ function tl(n) {
                       hasDetailPanel: tt,
                       pinCheckboxColumn: L,
                       pinExpandColumn: B,
-                      aggregationModel: it,
+                      aggregationModel: st,
                       onHideColumn: (a) => {
                         Zt({
                           ...Ze,
@@ -4287,8 +4287,8 @@ function tl(n) {
                       },
                       onManageColumns: () => bn(!0),
                       onPinColumn: (a, R) => {
-                        const P = [...lt?.left ?? []], $ = [...lt?.right ?? []], ee = P.filter((he) => he !== a), se = $.filter((he) => he !== a);
-                        Fn(R === "left" ? { left: [...ee, a], right: se } : R === "right" ? { left: ee, right: [...se, a] } : { left: ee, right: se });
+                        const P = [...at?.left ?? []], $ = [...at?.right ?? []], ee = P.filter((he) => he !== a), se = $.filter((he) => he !== a);
+                        An(R === "left" ? { left: [...ee, a], right: se } : R === "right" ? { left: ee, right: [...se, a] } : { left: ee, right: se });
                       }
                     }
                   ),
@@ -4297,10 +4297,10 @@ function tl(n) {
                       /* @__PURE__ */ t.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
                       /* @__PURE__ */ t.jsx("path", { d: "M3 9h18M9 21V9" })
                     ] }),
-                    /* @__PURE__ */ t.jsx("span", { children: In })
+                    /* @__PURE__ */ t.jsx("span", { children: Pn })
                   ] }),
                   Je.length > 0 && /* @__PURE__ */ t.jsx("div", { className: "ogx__pinned-rows ogx__pinned-rows--top", role: "rowgroup", children: Je.map((a, R) => /* @__PURE__ */ t.jsx(
-                    Sn,
+                    jn,
                     {
                       row: a,
                       columns: Se.virtualColumns,
@@ -4308,10 +4308,10 @@ function tl(n) {
                       isSelected: Le.has(a.id),
                       checkboxSelection: s,
                       onRowClick: pn,
-                      onCellClick: Kn,
+                      onCellClick: Yn,
                       onSelectionChange: Vt,
                       columnWidths: qe,
-                      pinnedColumns: lt,
+                      pinnedColumns: at,
                       pinnedRows: y,
                       hasDetailPanel: tt,
                       isDetailPanelExpanded: kt.has(a.id),
@@ -4367,7 +4367,7 @@ function tl(n) {
                             })() : _o.filter(({ row: a }) => !Qn(a.id, y)).filter(
                               (a, R, P) => R === P.findIndex(($) => $.row.id === a.row.id)
                             ).map(({ row: a, rowIndex: R }) => /* @__PURE__ */ t.jsx(
-                              Sn,
+                              jn,
                               {
                                 row: a,
                                 columns: Se.virtualColumns,
@@ -4375,10 +4375,10 @@ function tl(n) {
                                 isSelected: Le.has(a.id),
                                 checkboxSelection: s,
                                 onRowClick: pn,
-                                onCellClick: Kn,
+                                onCellClick: Yn,
                                 onSelectionChange: Vt,
                                 columnWidths: qe,
-                                pinnedColumns: lt,
+                                pinnedColumns: at,
                                 pinnedRows: y,
                                 hasDetailPanel: tt,
                                 isDetailPanelExpanded: kt.has(a.id),
@@ -4406,9 +4406,9 @@ function tl(n) {
                               `${a.id}-${Se.totalWidth}`
                             )),
                             z === "infinite" && ge.dataSource.loading && Oe.length > 0 && (() => {
-                              const a = Math.min(me.pageSize, 20), R = Un.unpinnedRowsLength;
+                              const a = Math.min(me.pageSize, 20), R = Kn.unpinnedRowsLength;
                               return /* @__PURE__ */ t.jsx("div", { className: "ogx__skeleton-group", children: Array.from({ length: a }).map((P, $) => /* @__PURE__ */ t.jsx(
-                                Sn,
+                                jn,
                                 {
                                   row: { id: `__skeleton_${$}__`, _isSkeleton: !0 },
                                   columns: Se.virtualColumns,
@@ -4423,8 +4423,8 @@ function tl(n) {
                       )
                     }
                   ),
-                  dt.length > 0 && /* @__PURE__ */ t.jsx("div", { className: "ogx__pinned-rows ogx__pinned-rows--bottom", role: "rowgroup", children: dt.map((a, R) => /* @__PURE__ */ t.jsx(
-                    Sn,
+                  ut.length > 0 && /* @__PURE__ */ t.jsx("div", { className: "ogx__pinned-rows ogx__pinned-rows--bottom", role: "rowgroup", children: ut.map((a, R) => /* @__PURE__ */ t.jsx(
+                    jn,
                     {
                       row: a,
                       columns: Se.virtualColumns,
@@ -4432,10 +4432,10 @@ function tl(n) {
                       isSelected: Le.has(a.id),
                       checkboxSelection: s,
                       onRowClick: pn,
-                      onCellClick: Kn,
+                      onCellClick: Yn,
                       onSelectionChange: Vt,
                       columnWidths: qe,
-                      pinnedColumns: lt,
+                      pinnedColumns: at,
                       pinnedRows: y,
                       hasDetailPanel: tt,
                       isDetailPanelExpanded: kt.has(a.id),
@@ -4466,7 +4466,7 @@ function tl(n) {
                         tt && /* @__PURE__ */ t.jsx("div", { style: { width: 48, flexShrink: 0 } }),
                         G && /* @__PURE__ */ t.jsx("div", { style: { width: 48, flexShrink: 0 } }),
                         Bt.map((a) => {
-                          const R = it[a.field], P = Vn[a.field], $ = qe[a.field] ?? (typeof a.width == "number" ? a.width : 120);
+                          const R = st[a.field], P = Un[a.field], $ = qe[a.field] ?? (typeof a.width == "number" ? a.width : 120);
                           return /* @__PURE__ */ t.jsx(
                             "div",
                             {
@@ -4502,14 +4502,14 @@ function tl(n) {
             pageSizeOptions: C,
             onPageChange: (P) => cn({ ...me, page: P }),
             onPageSizeChange: (P) => cn({ ...me, pageSize: P, page: 0 }),
-            ...ft?.pagination
+            ...pt?.pagination
           };
           return /* @__PURE__ */ t.jsx(a, { ...R });
         })(),
         /* @__PURE__ */ t.jsxs("div", { className: "ogx-aria-live-status", role: "status", "aria-live": "polite", children: [
           tn ? "Loading data..." : "",
           ge.dataSource.error ? `Error: ${ge.dataSource.error.message || "Unknown error"}` : "",
-          !Q && !ge.dataSource.error && (Ke.length === 0 ? In : Xe && ((Xe.quickFilterValues?.length || 0) > 0 || (Xe.items?.length || 0) > 0) ? `${Ke.length} ${Ke.length === 1 ? "row" : "rows"} found` : "")
+          !Q && !ge.dataSource.error && (Ke.length === 0 ? Pn : Xe && ((Xe.quickFilterValues?.length || 0) > 0 || (Xe.items?.length || 0) > 0) ? `${Ke.length} ${Ke.length === 1 ? "row" : "rows"} found` : "")
         ] }),
         ge.dataSource.error && /* @__PURE__ */ t.jsxs("div", { className: "ogx-error-overlay", "aria-live": "assertive", role: "alert", children: [
           /* @__PURE__ */ t.jsxs("svg", { width: "56", height: "56", viewBox: "0 0 24 24", fill: "none", stroke: "var(--ogx-color-error)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
@@ -4827,7 +4827,7 @@ function Li({ anchorRef: n, columns: o, model: e, onChange: r, onClose: i }) {
       ]
     }
   );
-  return Lt.createPortal(k, document.body);
+  return Lt.createPortal(k, n.current?.closest(".ogx-theme-provider") || document.body);
 }
 function Ti() {
   return /* @__PURE__ */ t.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
@@ -4894,7 +4894,7 @@ function Wi({ value: n = "", onChange: o, placeholder: e = "Search...", debounce
     }
   );
 }
-function Rn({
+function En({
   title: n,
   children: o,
   placement: e = "top",
@@ -5065,7 +5065,7 @@ function zi({
       ]
     }
   );
-  return Lt.createPortal(x, document.body);
+  return Lt.createPortal(x, n.current?.closest(".ogx-theme-provider") || document.body);
 }
 function Bi({
   anchorRef: n,
@@ -5118,7 +5118,7 @@ function Bi({
       )
     }
   );
-  return Lt.createPortal(c, document.body);
+  return Lt.createPortal(c, n.current?.closest(".ogx-theme-provider") || document.body);
 }
 function $i({
   anchorRef: n,
@@ -5190,7 +5190,7 @@ function $i({
       ]
     }
   );
-  return Lt.createPortal(x, document.body);
+  return Lt.createPortal(x, n.current?.closest(".ogx-theme-provider") || document.body);
 }
 const Di = { rowFields: [], columnFields: [], valueFields: [] };
 function ol({
@@ -5214,33 +5214,33 @@ function ol({
   te(() => {
     h && (_(!0), N(!1), j(!1), y(!1));
   }, [h]);
-  const E = ne(null), k = ne(null), p = ne(null), S = ne(null), L = r ?? Di, B = L.rowFields.length > 0 || L.columnFields.length > 0 || L.valueFields.length > 0, q = n.filter(
+  const E = ne(null), k = ne(null), p = ne(null), S = ne(null), L = r ?? Di, B = L.rowFields.length > 0 || L.columnFields.length > 0 || L.valueFields.length > 0, Y = n.filter(
     (W) => W.aggregable !== !1 && (W.type === "number" || W.aggregable === !0)
   ), A = Object.keys(o).filter(
     (W) => o[W] && o[W] !== "none"
   ).length, U = O(
     (W, F) => {
       if (!e) return;
-      const X = { ...o };
-      F === "none" ? delete X[W] : X[W] = F, e(X);
+      const q = { ...o };
+      F === "none" ? delete q[W] : q[W] = F, e(q);
     },
     [o, e]
-  ), Y = O(() => {
+  ), X = O(() => {
     e?.({});
   }, [e]), G = O((W) => {
     if (!d) return;
-    const X = {
+    const q = {
       ...l || {},
       quickFilterValues: W ? [W] : [],
       items: l?.items || []
     };
-    d(X);
+    d(q);
   }, [l, d]), oe = l?.quickFilterValues?.[0] || "", Q = l?.items?.length || 0, ve = new Set(
     n.filter((W) => s[W.field] !== !1).map((W) => W.field)
   ), v = O((W, F) => {
     if (!u) return;
-    const X = { ...s, [W]: F };
-    u(X);
+    const q = { ...s, [W]: F };
+    u(q);
   }, [s, u]), D = O(() => {
     if (!u) return;
     const W = { ...s };
@@ -5267,7 +5267,7 @@ function ol({
         }
       ) }),
       u && /* @__PURE__ */ t.jsxs("div", { className: "ogx-toolbar__dropdown-wrapper", style: { marginRight: 4 }, children: [
-        /* @__PURE__ */ t.jsx(Rn, { title: "Columns", children: /* @__PURE__ */ t.jsx(
+        /* @__PURE__ */ t.jsx(En, { title: "Columns", children: /* @__PURE__ */ t.jsx(
           "button",
           {
             ref: p,
@@ -5296,7 +5296,7 @@ function ol({
         )
       ] }),
       d && /* @__PURE__ */ t.jsxs("div", { className: "ogx-toolbar__dropdown-wrapper", style: { marginRight: 4 }, children: [
-        /* @__PURE__ */ t.jsx(Rn, { title: "Filters", children: /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx(En, { title: "Filters", children: /* @__PURE__ */ t.jsxs(
           "button",
           {
             ref: S,
@@ -5323,7 +5323,7 @@ function ol({
         )
       ] }),
       i && /* @__PURE__ */ t.jsxs("div", { className: "ogx-toolbar__dropdown-wrapper", style: { marginRight: 4 }, children: [
-        /* @__PURE__ */ t.jsx(Rn, { title: "Pivot", children: /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx(En, { title: "Pivot", children: /* @__PURE__ */ t.jsxs(
           "button",
           {
             ref: k,
@@ -5355,7 +5355,7 @@ function ol({
         )
       ] }),
       /* @__PURE__ */ t.jsxs("div", { className: "ogx-toolbar__dropdown-wrapper", style: { marginRight: 4 }, children: [
-        /* @__PURE__ */ t.jsx(Rn, { title: "Summaries", children: /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ t.jsx(En, { title: "Summaries", children: /* @__PURE__ */ t.jsxs(
           "button",
           {
             ref: E,
@@ -5378,9 +5378,9 @@ function ol({
           {
             anchorRef: E,
             aggregationModel: o,
-            aggregableColumns: q,
+            aggregableColumns: Y,
             onFunctionChange: U,
-            onClearAll: Y,
+            onClearAll: X,
             onClose: () => N(!1),
             activeCount: A
           }
@@ -5707,9 +5707,9 @@ async function cl(n, o, e = {}) {
       }), m.forEach((H) => {
         const W = x[H.field], F = h[H.field];
         if (W == null || F == null) return;
-        let X = F;
-        H.valueFormatter ? X = H.valueFormatter({ value: F, row: {}, field: H.field }) : X = Mt(F, W);
-        const K = v.addRow([H.headerName ?? H.field, W.toUpperCase(), X]);
+        let q = F;
+        H.valueFormatter ? q = H.valueFormatter({ value: F, row: {}, field: H.field }) : q = Mt(F, W);
+        const K = v.addRow([H.headerName ?? H.field, W.toUpperCase(), q]);
         K.getCell(3).alignment = { horizontal: "right" }, K.getCell(3).font = { bold: !0, size: g };
       }), v.getColumn(1).width = 20, v.getColumn(2).width = 12, v.getColumn(3).width = 18;
       continue;
@@ -5718,10 +5718,10 @@ async function cl(n, o, e = {}) {
       name: S = "Data",
       rows: L = "all",
       includeHeaders: B = !0,
-      includeSummary: q = !1,
+      includeSummary: Y = !1,
       autoFilter: A = !0,
       frozenHeader: U = !0,
-      alternateRowColor: Y = "#f8fafc"
+      alternateRowColor: X = "#f8fafc"
     } = p, G = L === "selected" ? I : N, oe = m.filter((v) => l[v.field]?.embedImage);
     if (oe.length > 0) {
       const v = [], D = /* @__PURE__ */ new Set();
@@ -5732,8 +5732,8 @@ async function cl(n, o, e = {}) {
         });
       }), v.length > 0) {
         const H = await Ki(v);
-        for (const [W, { buffer: F, extension: X }] of H) {
-          const K = w.addImage({ buffer: F, extension: X });
+        for (const [W, { buffer: F, extension: q }] of H) {
+          const K = w.addImage({ buffer: F, extension: q });
           C.set(W, K);
         }
       }
@@ -5762,32 +5762,32 @@ async function cl(n, o, e = {}) {
     if (G.forEach((v, D) => {
       const H = m.map((F) => {
         if (l[F.field]?.embedImage) return "";
-        let X = v[F.field];
-        return F.valueGetter && (X = F.valueGetter({ row: v, field: F.field, value: X })), Hi(F, X) === "string" && F.valueFormatter && X != null && (X = F.valueFormatter({ value: X, row: v, field: F.field })), X;
+        let q = v[F.field];
+        return F.valueGetter && (q = F.valueGetter({ row: v, field: F.field, value: q })), Hi(F, q) === "string" && F.valueFormatter && q != null && (q = F.valueFormatter({ value: q, row: v, field: F.field })), q;
       }), W = Q.addRow(H);
-      if (W.font = { size: g }, Y && D % 2 === 1 && W.eachCell((F) => {
-        F.fill = { type: "pattern", pattern: "solid", fgColor: { argb: Rt(Y) } };
-      }), W.eachCell((F, X) => {
-        const K = m[X - 1];
+      if (W.font = { size: g }, X && D % 2 === 1 && W.eachCell((F) => {
+        F.fill = { type: "pattern", pattern: "solid", fgColor: { argb: Rt(X) } };
+      }), W.eachCell((F, q) => {
+        const K = m[q - 1];
         K && (F.alignment = {
           horizontal: l[K.field]?.alignment ?? (K.type === "number" ? "right" : "left"),
           vertical: "middle"
         }, F.border = { bottom: { style: "thin", color: { argb: "FFf1f5f9" } } });
       }), oe.length > 0) {
-        const F = oe.reduce((M, ue) => Math.max(M, l[ue.field]?.imageHeight ?? 40), 0), X = Math.ceil(F / 1.333), K = X * 1.333;
-        W.height = X, oe.forEach((M) => {
+        const F = oe.reduce((M, ue) => Math.max(M, l[ue.field]?.imageHeight ?? 40), 0), q = Math.ceil(F / 1.333), K = q * 1.333;
+        W.height = q, oe.forEach((M) => {
           const ue = m.indexOf(M), le = v[M.field], _e = typeof le == "string" ? C.get(le) : void 0;
           if (_e === void 0) {
             W.getCell(ue + 1).value = typeof le == "string" ? le : "";
             return;
           }
-          const ot = l[M.field], z = ot?.imageWidth ?? 40, Pe = ot?.imageHeight ?? 40, ft = (Q.getColumn(ue + 1).width ?? 8) * 7 + 5, Ue = Math.max(0, ft - z) / 2, ht = Math.max(0, K - Pe) / 2;
+          const ot = l[M.field], z = ot?.imageWidth ?? 40, Pe = ot?.imageHeight ?? 40, pt = (Q.getColumn(ue + 1).width ?? 8) * 7 + 5, Ue = Math.max(0, pt - z) / 2, rt = Math.max(0, K - Pe) / 2;
           Q.addImage(_e, {
             tl: {
               col: ue,
               row: ve,
               nativeColOff: Math.floor(Ue * 9525),
-              nativeRowOff: Math.floor(ht * 9525)
+              nativeRowOff: Math.floor(rt * 9525)
             },
             ext: { width: z, height: Pe },
             editAs: "oneCell"
@@ -5796,17 +5796,17 @@ async function cl(n, o, e = {}) {
       } else
         W.height = 16;
       ve++;
-    }), q && h && x) {
+    }), Y && h && x) {
       const v = m.map((F) => {
-        const X = x[F.field];
-        return X ? X.toUpperCase() : "";
+        const q = x[F.field];
+        return q ? q.toUpperCase() : "";
       }), D = Q.addRow(v);
       D.height = 16, D.font = { size: g - 1, italic: !0, color: { argb: "FF94a3b8" } }, D.eachCell((F) => {
         F.alignment = { horizontal: "right", vertical: "middle" }, F.border = { top: { style: "thin", color: { argb: "FFcbd5e1" } } };
       });
       const H = m.map((F) => {
-        const X = x[F.field], K = h[F.field];
-        return X == null || K == null ? "" : F.valueFormatter ? F.valueFormatter({ value: K, row: {}, field: F.field }) : Mt(K, X);
+        const q = x[F.field], K = h[F.field];
+        return q == null || K == null ? "" : F.valueFormatter ? F.valueFormatter({ value: K, row: {}, field: F.field }) : Mt(K, q);
       }), W = Q.addRow(H);
       W.height = 18, W.font = { bold: !0, size: g, color: { argb: Rt(s) } }, W.eachCell((F) => {
         F.fill = { type: "pattern", pattern: "solid", fgColor: { argb: Rt(d) } }, F.alignment = { horizontal: "right", vertical: "middle" }, F.border = Yi();
@@ -5963,7 +5963,7 @@ function ul({
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: e,
+      className: `ogx-theme-provider ${e || ""}`.trim(),
       style: { ...r, ...i },
       children: o
     }
@@ -6150,17 +6150,17 @@ function ml(n) {
   return { initialState: d, onStateChange: h, clearState: x };
 }
 export {
-  jn as Button,
+  Rn as Button,
   Zr as Cell,
-  En as Checkbox,
+  Nn as Checkbox,
   tl as DataGrid,
   ul as DataGridThemeProvider,
   Pi as FilterPanel,
   ol as GridToolbar,
-  Rn as GridTooltip,
+  En as GridTooltip,
   Vr as Header,
   il as Input,
-  Sn as Row,
+  jn as Row,
   nl as Skeleton,
   pl as amberTheme,
   xl as compactTheme,