From 1f65aa80effd386ac870207f19d7068801d656d3 Mon Sep 17 00:00:00 2001
From: Alican Erdurmaz <alicanerdurmaz@gmail.com>
Date: Fri, 15 Nov 2024 10:31:49 +0300
Subject: [PATCH] feat: update @mui/x-data-grid to 7

---
 ...-admin-panel-with-materialui-and-strapi.md |   2 +-
 .../blog/2022-08-23-mui-usedatagrid.md        |  11 +-
 .../blog/2022-12-23-dynamic-hook-form.md      |   2 +-
 .../docs/getting-started/example/sandpack.tsx |   8 +-
 .../authentication/auth-pages/mui.tsx         |   2 +-
 .../forms/server-side-validation-mui.tsx      |   2 +-
 .../general-concepts/auth-pages/mui.tsx       |   2 +-
 .../general-concepts/layout/mui.tsx           |   5 +-
 .../components/basic-views/create/index.md    |   4 +-
 .../components/basic-views/edit/index.md      |   5 +-
 .../components/basic-views/list/index.md      |   4 +-
 .../components/basic-views/show/index.md      |   5 +-
 .../components/buttons/clone-button/index.md  |   3 +-
 .../components/buttons/create-button/index.md |   2 +-
 .../components/buttons/delete-button/index.md |   3 +-
 .../components/buttons/edit-button/index.md   |   3 +-
 .../components/buttons/export-button/index.md |   2 +-
 .../components/buttons/import-button/index.md |   2 +-
 .../components/buttons/show-button/index.md   |   3 +-
 .../components/fields/boolean-field/index.md  |   3 +-
 .../components/fields/date-field/index.md     |   3 +-
 .../components/fields/email-field/index.md    |   3 +-
 .../components/fields/file-field/index.md     |   3 +-
 .../components/fields/number-field/index.md   |   3 +-
 .../components/fields/tag-field/index.md      |   3 +-
 .../components/fields/text-field/index.md     |   3 +-
 .../components/fields/url-field/index.md      |   3 +-
 ...-use-data-grid-basic-usage-live-preview.md |   2 +-
 ...l-use-data-grid-relational-live-preview.md |  13 +-
 .../material-ui/hooks/use-data-grid/index.md  |  14 +-
 .../material-ui/introduction/index.md         |   5 +-
 .../introduction/previews/auth-page.tsx       |   4 +-
 .../introduction/previews/basic-views.tsx     |   5 +-
 .../introduction/previews/example.tsx         |   5 +-
 .../introduction/previews/layout-next-js.tsx  |   4 +-
 .../previews/layout-react-router-dom.tsx      |   4 +-
 .../introduction/previews/layout-remix.tsx    |   4 +-
 .../introduction/previews/theming.tsx         |   5 +-
 .../introduction/previews/usage-next-js.tsx   |   5 +-
 .../previews/usage-react-router-dom.tsx       |   5 +-
 .../introduction/previews/usage-remix.tsx     |   5 +-
 .../material-ui/migration-guide/index.md      |   2 +-
 .../material-ui/theming/index.md              |   5 +-
 .../material-ui/react-router/index.md         |   8 +-
 .../material-ui/react-router/sandpack.tsx     |   6 +-
 .../material-ui/react-router/sandpack.tsx     |   2 +-
 .../material-ui/react-router/index.md         |  10 +-
 .../material-ui/react-router/sandpack.tsx     |  10 +-
 examples/auth-material-ui/package.json        |   2 +-
 .../auth-material-ui/src/pages/posts/list.tsx |  12 +-
 examples/base-material-ui/package.json        |   2 +-
 .../base-material-ui/src/pages/posts/list.tsx |  12 +-
 .../blog-material-ui-datagrid/package.json    |   2 +-
 .../src/pages/employees.tsx                   |   5 +-
 examples/blog-material-ui/package.json        |   2 +-
 .../blog-material-ui/src/pages/posts/list.tsx |   5 +-
 .../blog-react-hook-dynamic-form/package.json |   2 +-
 .../src/pages/userList.tsx                    |   3 +-
 examples/blog-refine-mui/package.json         |   2 +-
 .../src/components/recent-sales/index.tsx     |   9 +-
 .../src/pages/categories/list.tsx             |   3 +-
 .../src/pages/products/list.tsx               |   8 +-
 .../blog-refine-react-hook-form/package.json  |   2 +-
 .../package.json                              |   2 +-
 .../src/pages/posts/list.tsx                  |   4 +-
 .../package.json                              |   2 +-
 .../src/pages/posts/list.tsx                  |   4 +-
 examples/finefoods-material-ui/package.json   |   2 +-
 .../courier/table-reviews/index.tsx           |  19 +-
 .../dashboard/recentOrders/index.tsx          |   4 +
 .../src/components/order/products/index.tsx   |   5 +-
 .../components/product/list-table/index.tsx   |   8 +-
 .../components/store/courier-table/index.tsx  |   6 +-
 .../src/components/store/table/index.tsx      |  22 +-
 .../src/pages/categories/list.tsx             |  12 +-
 .../src/pages/couriers/list.tsx               |  18 +-
 .../src/pages/customers/list.tsx              |  23 +-
 .../src/pages/customers/show.tsx              |  16 +-
 .../src/pages/orders/list.tsx                 |  38 +-
 .../src/pages/products/list.tsx               |   5 +-
 .../package.json                              |   2 +-
 .../src/pages/posts/list.tsx                  |   5 +-
 .../package.json                              |   2 +-
 .../src/pages/posts/list.tsx                  |   4 +-
 .../form-material-ui-use-form/package.json    |   2 +-
 .../src/pages/posts/list.tsx                  |   4 +-
 .../package.json                              |   2 +-
 .../src/pages/posts/list.tsx                  |   4 +-
 .../package.json                              |   2 +-
 .../src/pages/posts/list.tsx                  |   4 +-
 .../import-export-material-ui/package.json    |   2 +-
 .../src/pages/list.tsx                        |   3 +-
 examples/inferencer-material-ui/package.json  |   2 +-
 examples/mern-dashboard-client/package.json   |   2 +-
 examples/refine-hr-ce/package.json            |   2 +-
 .../package.json                              |   2 +-
 .../src/pages/posts/list.tsx                  |   2 +
 .../table-material-ui-advanced/package.json   |   2 +-
 .../src/pages/dataGrid/index.tsx              |   8 +-
 .../package.json                              |   2 +-
 .../src/pages/posts/list.tsx                  |   4 +-
 .../package.json                              |   4 +-
 .../src/pages/posts/list.tsx                  |   8 +-
 .../package.json                              |   2 +-
 .../src/pages/posts/list.tsx                  |   3 +-
 .../package.json                              |   2 +-
 .../src/pages/posts/list.tsx                  |  13 +-
 .../package.json                              |   2 +-
 .../src/pages/posts/list.tsx                  |   8 +-
 .../package.json                              |   2 +-
 .../src/pages/posts/list.tsx                  |   8 +-
 examples/template-material-ui/package.json    |   2 +-
 examples/theme-material-ui-demo/package.json  |   2 +-
 .../src/pages/posts/list.tsx                  |   4 +-
 examples/tutorial-material-ui/package.json    |   2 +-
 .../src/pages/blog-posts/list.tsx             |   8 +-
 .../upload-material-ui-base64/package.json    |   2 +-
 .../src/pages/posts/list.tsx                  |   4 +-
 .../upload-material-ui-multipart/package.json |   2 +-
 .../src/pages/posts/list.tsx                  |   4 +-
 examples/with-material-ui-vite/package.json   |   2 +-
 .../src/pages/blog-posts/list.tsx             |   8 +-
 .../src/pages/categories/list.tsx             |   3 +-
 examples/with-remix-material-ui/package.json  |   2 +-
 packages/chakra-ui/README.md                  |   2 +
 packages/codemod/test/list.tsx                |   2 +-
 packages/core/README.md                       |   4 +-
 packages/inferencer/package.json              |   2 +-
 .../inferencer/src/inferencers/mui/list.tsx   |  16 +-
 packages/live-previews/package.json           |   2 +-
 packages/mantine/README.md                    |   2 +
 packages/mui/README.md                        |   4 +-
 packages/mui/package.json                     |   4 +-
 packages/mui/src/hooks/useDataGrid/index.ts   |  22 +-
 pnpm-lock.yaml                                | 409 ++++++++----------
 135 files changed, 548 insertions(+), 558 deletions(-)

diff --git a/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md b/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md
index 67d40664660e..e002e3703774 100644
--- a/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md
+++ b/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md
@@ -190,7 +190,7 @@ export const PostList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/blog/2022-08-23-mui-usedatagrid.md b/documentation/blog/2022-08-23-mui-usedatagrid.md
index 1e6d69838e71..ed70ca5e100b 100644
--- a/documentation/blog/2022-08-23-mui-usedatagrid.md
+++ b/documentation/blog/2022-08-23-mui-usedatagrid.md
@@ -214,8 +214,7 @@ const EmployeeList: React.FC = () => {
         headerName: "Full Name",
         minWidth: 150,
         flex: 1,
-        valueGetter: (params) =>
-          `${params.row.first_name || ""} ${params.row.last_name || ""}`,
+        valueGetter: (_, row) => `${first_name || ""} ${last_name || ""}`,
       },
       {
         field: "email",
@@ -482,8 +481,8 @@ const EmployeeList: React.FC = () => {
         headerName: "Full Name",
         minWidth: 150,
         flex: 1,
-        valueGetter: (params) =>
-          `${params.row.first_name || ""} ${params.row.last_name || ""}`,
+        valueGetter: (_, row) =>
+          `${row.first_name || ""} ${row.last_name || ""}`,
       },
       {
         field: "email",
@@ -653,8 +652,8 @@ const EmployeeList: React.FC = () => {
         headerName: "Full Name",
         minWidth: 150,
         flex: 1,
-        valueGetter: (params) =>
-          `${params.row.first_name || ""} ${params.row.last_name || ""}`,
+        valueGetter: (_, row) =>
+          `${row.first_name || ""} ${row.last_name || ""}`,
       },
       {
         field: "email",
diff --git a/documentation/blog/2022-12-23-dynamic-hook-form.md b/documentation/blog/2022-12-23-dynamic-hook-form.md
index 9eb7e92a6035..b0a5eb4152fa 100644
--- a/documentation/blog/2022-12-23-dynamic-hook-form.md
+++ b/documentation/blog/2022-12-23-dynamic-hook-form.md
@@ -231,7 +231,7 @@ Finally, declare the `<DataGrid>` component within the `List` component and add
 
 return (
 <List>
-<DataGrid {...dataGridProps} columns={columns} autoHeight />
+<DataGrid {...dataGridProps} columns={columns} />
 </List>
 );
 ```
diff --git a/documentation/docs/getting-started/example/sandpack.tsx b/documentation/docs/getting-started/example/sandpack.tsx
index 5b3865bf6451..e87c3766fd3e 100644
--- a/documentation/docs/getting-started/example/sandpack.tsx
+++ b/documentation/docs/getting-started/example/sandpack.tsx
@@ -873,6 +873,7 @@ export const ProductList = () => {
           const value = row?.category;
           return value;
         },
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryLoading ? (
             <>{translate("loading")}</>
@@ -888,6 +889,7 @@ export const ProductList = () => {
         headerName: translate("products.fields.price"),
         minWidth: 100,
         maxWidth: 150,
+        display: "flex",
         renderCell: ({ value }) => {
           return (
             <NumberField
@@ -902,6 +904,7 @@ export const ProductList = () => {
         field: "actions",
         headerName: translate("table.actions"),
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -921,7 +924,7 @@ export const ProductList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
@@ -1171,6 +1174,7 @@ export const CategoryList: React.FC = () => {
         field: "actions",
         headerName: translate("table.actions"),
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -1190,7 +1194,7 @@ export const CategoryList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/guides-concepts/authentication/auth-pages/mui.tsx b/documentation/docs/guides-concepts/authentication/auth-pages/mui.tsx
index 39daea53ee46..b457b674efe4 100644
--- a/documentation/docs/guides-concepts/authentication/auth-pages/mui.tsx
+++ b/documentation/docs/guides-concepts/authentication/auth-pages/mui.tsx
@@ -19,7 +19,7 @@ export function MaterialUIAuth() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
       }}
       startRoute="/login"
       files={{
diff --git a/documentation/docs/guides-concepts/forms/server-side-validation-mui.tsx b/documentation/docs/guides-concepts/forms/server-side-validation-mui.tsx
index 9bebe06af8de..69b79c45b8e7 100644
--- a/documentation/docs/guides-concepts/forms/server-side-validation-mui.tsx
+++ b/documentation/docs/guides-concepts/forms/server-side-validation-mui.tsx
@@ -17,7 +17,7 @@ export default function ServerSideValidationMui() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
         "react-router-dom": "latest",
         "react-router": "latest",
         "react-hook-form": "^7.43.5",
diff --git a/documentation/docs/guides-concepts/general-concepts/auth-pages/mui.tsx b/documentation/docs/guides-concepts/general-concepts/auth-pages/mui.tsx
index 39daea53ee46..b457b674efe4 100644
--- a/documentation/docs/guides-concepts/general-concepts/auth-pages/mui.tsx
+++ b/documentation/docs/guides-concepts/general-concepts/auth-pages/mui.tsx
@@ -19,7 +19,7 @@ export function MaterialUIAuth() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
       }}
       startRoute="/login"
       files={{
diff --git a/documentation/docs/guides-concepts/general-concepts/layout/mui.tsx b/documentation/docs/guides-concepts/general-concepts/layout/mui.tsx
index 38e0c10b515b..d84c9ea19ea8 100644
--- a/documentation/docs/guides-concepts/general-concepts/layout/mui.tsx
+++ b/documentation/docs/guides-concepts/general-concepts/layout/mui.tsx
@@ -20,7 +20,7 @@ export function MaterialUILayout() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
       }}
       startRoute="/my-products"
       files={{
@@ -133,6 +133,7 @@ export const ProductList = () => {
         field: "actions",
         headerName: "Actions",
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -150,7 +151,7 @@ export const ProductList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/basic-views/create/index.md b/documentation/docs/ui-integrations/material-ui/components/basic-views/create/index.md
index 0fc3ac07dec4..bab26cdc174c 100644
--- a/documentation/docs/ui-integrations/material-ui/components/basic-views/create/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/basic-views/create/index.md
@@ -864,6 +864,7 @@ const SampleList = () => {
           return value;
         },
         minWidth: 300,
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryIsLoading ? (
             <>Loading...</>
@@ -876,6 +877,7 @@ const SampleList = () => {
         field: "createdAt",
         headerName: "Created At",
         minWidth: 250,
+        display: "flex",
         renderCell: function render({ value }) {
           return <RefineMui.DateField value={value} />;
         },
@@ -886,7 +888,7 @@ const SampleList = () => {
 
   return (
     <RefineMui.List>
-      <MuiXDataGrid.DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <MuiXDataGrid.DataGrid {...dataGridProps} columns={columns} />
     </RefineMui.List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md b/documentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md
index df0ffbf0704e..65e6b74745ff 100644
--- a/documentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md
@@ -1383,6 +1383,7 @@ const SampleList = () => {
           return value;
         },
         minWidth: 300,
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryIsLoading ? (
             <>Loading...</>
@@ -1395,6 +1396,7 @@ const SampleList = () => {
         field: "createdAt",
         headerName: "Created At",
         minWidth: 250,
+        display: "flex",
         renderCell: function render({ value }) {
           return <RefineMui.DateField value={value} />;
         },
@@ -1402,6 +1404,7 @@ const SampleList = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -1419,7 +1422,7 @@ const SampleList = () => {
 
   return (
     <RefineMui.List>
-      <MuiXDataGrid.DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <MuiXDataGrid.DataGrid {...dataGridProps} columns={columns} />
     </RefineMui.List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md b/documentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md
index 20a8491c5850..66852db1fa22 100644
--- a/documentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md
@@ -47,6 +47,7 @@ const SampleList = () => {
           return value;
         },
         minWidth: 300,
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryIsLoading ? (
             <>Loading...</>
@@ -59,6 +60,7 @@ const SampleList = () => {
         field: "createdAt",
         headerName: "Created At",
         minWidth: 250,
+        display: "flex",
         renderCell: function render({ value }) {
           return <DateField value={value} />;
         },
@@ -69,7 +71,7 @@ const SampleList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md b/documentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md
index 48761ecb83fa..30cbc10d32be 100644
--- a/documentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md
@@ -998,6 +998,7 @@ const SampleList = () => {
           return value;
         },
         minWidth: 300,
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryIsLoading ? (
             <>Loading...</>
@@ -1010,6 +1011,7 @@ const SampleList = () => {
         field: "createdAt",
         headerName: "Created At",
         minWidth: 250,
+        display: "flex",
         renderCell: function render({ value }) {
           return <RefineMui.DateField value={value} />;
         },
@@ -1017,6 +1019,7 @@ const SampleList = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -1034,7 +1037,7 @@ const SampleList = () => {
 
   return (
     <RefineMui.List>
-      <MuiXDataGrid.DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <MuiXDataGrid.DataGrid {...dataGridProps} columns={columns} />
     </RefineMui.List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md
index 29e9bd747844..cd06101f2eff 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md
@@ -31,6 +31,7 @@ const columns: GridColDef[] = [
   {
     field: "actions",
     headerName: "Actions",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-next-line
       return <CloneButton size="small" recordItemId={row.id} />;
@@ -46,7 +47,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/create-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/create-button/index.md
index e96aa161a0b3..812db2a03364 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/create-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/create-button/index.md
@@ -35,7 +35,7 @@ const PostsList: React.FC = () => {
   return (
     // highlight-next-line
     <List headerButtons={<CreateButton />}>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md
index c7af99f7b22d..0277d338eafc 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md
@@ -33,6 +33,7 @@ const columns: GridColDef[] = [
   {
     field: "actions",
     headerName: "Actions",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-next-line
       return <DeleteButton size="small" recordItemId={row.id} />;
@@ -48,7 +49,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md
index 63e34ed4a1d2..95a98b9e3c21 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md
@@ -29,6 +29,7 @@ const columns: GridColDef[] = [
   {
     field: "actions",
     headerName: "Actions",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-next-line
       return <EditButton size="small" recordItemId={row.id} />;
@@ -44,7 +45,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/export-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/export-button/index.md
index 75b57f74afe4..304aa438d1b1 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/export-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/export-button/index.md
@@ -46,7 +46,7 @@ const PostsList: React.FC = () => {
       }
       // highlight-end
     >
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/import-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/import-button/index.md
index 4c59d9852e37..209f2f553134 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/import-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/import-button/index.md
@@ -46,7 +46,7 @@ const PostsList: React.FC = () => {
       }
       // highlight-end
     >
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/buttons/show-button/index.md b/documentation/docs/ui-integrations/material-ui/components/buttons/show-button/index.md
index 995882132b51..be34033efa42 100644
--- a/documentation/docs/ui-integrations/material-ui/components/buttons/show-button/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/buttons/show-button/index.md
@@ -29,6 +29,7 @@ const columns: GridColDef[] = [
   {
     field: "actions",
     headerName: "Actions",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-next-line
       return <ShowButton size="small" recordItemId={row.id} />;
@@ -44,7 +45,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/boolean-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/boolean-field/index.md
index e33d124e3175..aa95b9dd8534 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/boolean-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/boolean-field/index.md
@@ -32,6 +32,7 @@ const columns: GridColDef[] = [
   {
     field: "status",
     headerName: "Published",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-start
       return (
@@ -57,7 +58,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/date-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/date-field/index.md
index 6ae5d4cbbc8f..eeadefbc6a13 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/date-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/date-field/index.md
@@ -31,6 +31,7 @@ const columns: GridColDef[] = [
   {
     field: "createdAt",
     headerName: "Created At",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-start
       return <DateField format="LLL" value={row.createdAt} />;
@@ -46,7 +47,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/email-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/email-field/index.md
index d74fd53cbdc9..5d53fad52c62 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/email-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/email-field/index.md
@@ -32,6 +32,7 @@ const columns: GridColDef[] = [
   {
     field: "email",
     headerName: "Email Address",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-start
       return <EmailField value={row.email} />;
@@ -47,7 +48,7 @@ const UsersList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/file-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/file-field/index.md
index e0dc7a3d303b..f4b24c20549c 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/file-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/file-field/index.md
@@ -31,6 +31,7 @@ const columns: GridColDef[] = [
   {
     field: "image",
     headerName: "Image",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-start
       return (
@@ -48,7 +49,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/number-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/number-field/index.md
index 830900f744eb..9061d9fbc83f 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/number-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/number-field/index.md
@@ -35,6 +35,7 @@ const columns: GridColDef[] = [
   {
     field: "hit",
     headerName: "Hit",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-start
       return (
@@ -57,7 +58,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/tag-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/tag-field/index.md
index 3fa50d98ab1a..f3e950c3a282 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/tag-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/tag-field/index.md
@@ -31,6 +31,7 @@ const columns: GridColDef[] = [
   {
     field: "status",
     headerName: "Status",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-start
       return <TagField value={row.status} />;
@@ -46,7 +47,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/text-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/text-field/index.md
index d611ff15f9f6..61a1bed922c2 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/text-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/text-field/index.md
@@ -30,6 +30,7 @@ const columns: GridColDef[] = [
   {
     field: "title",
     headerName: "Title",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-start
       return <TextField value={row.title} />;
@@ -45,7 +46,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/components/fields/url-field/index.md b/documentation/docs/ui-integrations/material-ui/components/fields/url-field/index.md
index 1e0f2717409f..0d1fd9c2221a 100644
--- a/documentation/docs/ui-integrations/material-ui/components/fields/url-field/index.md
+++ b/documentation/docs/ui-integrations/material-ui/components/fields/url-field/index.md
@@ -31,6 +31,7 @@ const columns: GridColDef[] = [
   {
     field: "image",
     headerName: "Image URL",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-start
       return <UrlField value={row.image[0].url} />;
@@ -46,7 +47,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/hooks/use-data-grid/_partial-use-data-grid-basic-usage-live-preview.md b/documentation/docs/ui-integrations/material-ui/hooks/use-data-grid/_partial-use-data-grid-basic-usage-live-preview.md
index 52d631206558..f82262656f30 100644
--- a/documentation/docs/ui-integrations/material-ui/hooks/use-data-grid/_partial-use-data-grid-basic-usage-live-preview.md
+++ b/documentation/docs/ui-integrations/material-ui/hooks/use-data-grid/_partial-use-data-grid-basic-usage-live-preview.md
@@ -36,7 +36,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/hooks/use-data-grid/_partial-use-data-grid-relational-live-preview.md b/documentation/docs/ui-integrations/material-ui/hooks/use-data-grid/_partial-use-data-grid-relational-live-preview.md
index c2499fafb241..b40689dc5a9c 100644
--- a/documentation/docs/ui-integrations/material-ui/hooks/use-data-grid/_partial-use-data-grid-relational-live-preview.md
+++ b/documentation/docs/ui-integrations/material-ui/hooks/use-data-grid/_partial-use-data-grid-relational-live-preview.md
@@ -4,13 +4,9 @@ setInitialRoutes(["/posts"]);
 // visible-block-start
 import React from "react";
 // highlight-next-line
-import { Option, useSelect } from "@refinedev/core";
+import { useSelect } from "@refinedev/core";
 import { useDataGrid, List } from "@refinedev/mui";
-import {
-  DataGrid,
-  GridColDef,
-  GridValueFormatterParams,
-} from "@mui/x-data-grid";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
 
 import { ICategory, IPost } from "interfaces";
 
@@ -69,9 +65,7 @@ const PostsList: React.FC = () => {
         minWidth: 250,
         flex: 0.5,
         valueOptions: options,
-        valueFormatter: (params: GridValueFormatterParams<Option>) => {
-          return params.value;
-        },
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -101,7 +95,6 @@ const PostsList: React.FC = () => {
       <DataGrid
         {...dataGridProps}
         columns={columns}
-        autoHeight
         rowsPerPageOptions={[10, 20, 30, 50, 100]}
       />
     </List>
diff --git a/documentation/docs/ui-integrations/material-ui/hooks/use-data-grid/index.md b/documentation/docs/ui-integrations/material-ui/hooks/use-data-grid/index.md
index 5818754c9a10..25f041b58bbc 100644
--- a/documentation/docs/ui-integrations/material-ui/hooks/use-data-grid/index.md
+++ b/documentation/docs/ui-integrations/material-ui/hooks/use-data-grid/index.md
@@ -56,7 +56,6 @@ export const PostsList: React.FC = () => {
         paginationModel={paginationModel}
         onPaginationModelChange={onPaginationModelChange}
         //highlight-end
-        autoHeight
       />
     </List>
   );
@@ -88,7 +87,6 @@ export const PostsList: React.FC = () => {
         sortModel={sortModel}
         onSortModelChange={onSortModelChange}
         //highlight-end
-        autoHeight
       />
     </List>
   );
@@ -130,7 +128,7 @@ export const PostsList: React.FC = () => {
         <Button onClick={() => handleSorting("asc")}>Asc</Button>
         <Button onClick={() => handleSorting("desc")}>Desc</Button>
       </ButtonGroup>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
@@ -141,7 +139,7 @@ Mui X community version only sorts the rows according to one criterion at a time
 However, multiple sorting can be done server-side without specifying the `sortModel`.
 
 ```tsx
-return <DataGrid {...dataGridProps} sortModel={undefined} autoHeight />;
+return <DataGrid {...dataGridProps} sortModel={undefined} />;
 ```
 
 When `sortModel` is not passed, it supports more than one criteria at a time, but cannot show which fields are sorted in `<DataGrid>` headers.
@@ -171,7 +169,6 @@ export const PostsList: React.FC = () => {
         filterModel={filterModel}
         onFilterModelChange={onFilterModelChange}
         //highlight-end
-        autoHeight
       />
     </List>
   );
@@ -216,7 +213,7 @@ export const PostsList: React.FC = () => {
         label="Filter by Draft Status"
         control={<Checkbox onChange={handleFilter} />}
       />
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
@@ -227,7 +224,7 @@ Mui X community version only filters the rows according to one criterion at a ti
 However, multiple filtering can be done server-side without specifying the `filterModel`.
 
 ```tsx
-return <DataGrid {...dataGridProps} filterModel={undefined} autoHeight />;
+return <DataGrid {...dataGridProps} filterModel={undefined} />;
 ```
 
 When `filterModel` is not passed, it supports more than one criteria at a time, but cannot show which fields are filtered in `<DataGrid>` headers.
@@ -759,7 +756,6 @@ When the user sorts a column, this function is called with the new sort model.
 <DataGrid
   {...dataGridProps}
   columns={columns}
-  autoHeight
   onSortModelChange={(model, details) => {
     dataGridProps.onSortModelChange(model, details);
     // do something else
@@ -785,7 +781,6 @@ When the user filters a column, this function is called with the new filter mode
 <DataGrid
   {...dataGridProps}
   columns={columns}
-  autoHeight
   onFilterModelChange={(model) => {
     dataGridProps.onFilterModelChange(model);
     // do something else
@@ -803,7 +798,6 @@ The `onStateChange` callback is used internally by the `useDataGrid` hook. If yo
 <DataGrid
   {...dataGridProps}
   columns={columns}
-  autoHeight
   onStateChange={(state) => {
     dataGridProps.onStateChange(state);
     // do something else
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/index.md b/documentation/docs/ui-integrations/material-ui/introduction/index.md
index 43559d0a2944..354be549848a 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/index.md
+++ b/documentation/docs/ui-integrations/material-ui/introduction/index.md
@@ -64,7 +64,7 @@ export const ProductList: FC = () => {
   return (
     <List>
       {/* highlight-next-line */}
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
@@ -232,6 +232,7 @@ const columns: GridColDef[] = [
   {
     field: "actions",
     headerName: "Actions",
+    display: "flex",
     renderCell: function render({ row }) {
         return (
           {/* highlight-next-line */}
@@ -246,7 +247,7 @@ export const ProductList: FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns}  />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/auth-page.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/auth-page.tsx
index b0514dde1852..c4290420afe0 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/auth-page.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/auth-page.tsx
@@ -18,7 +18,7 @@ export default function AuthPage() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
         "react-router-dom": "latest",
         "react-router": "latest",
         "react-hook-form": "^7.43.5",
@@ -179,7 +179,7 @@ export const ProductList = () => {
 
   return (
     <List>
-        <DataGrid {...dataGridProps} columns={columns} autoHeight />
+        <DataGrid {...dataGridProps} columns={columns}  />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/basic-views.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/basic-views.tsx
index 4f1f6cd2a996..b122dd139ff0 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/basic-views.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/basic-views.tsx
@@ -17,7 +17,7 @@ export default function BasicViews() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
         "react-router-dom": "latest",
         "react-router": "latest",
         "react-hook-form": "^7.43.5",
@@ -154,6 +154,7 @@ export const ProductList = () => {
         {
           field: "actions",
           headerName: "Actions",
+          display: "flex",
           renderCell: function render({ row }) {
               return (
                   <div>
@@ -172,7 +173,7 @@ export const ProductList = () => {
 
   return (
     <List>
-        <DataGrid {...dataGridProps} columns={columns} autoHeight />
+        <DataGrid {...dataGridProps} columns={columns}  />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/example.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/example.tsx
index 7ab9816cbc51..2db23d5f5d0d 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/example.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/example.tsx
@@ -17,7 +17,7 @@ export default function Example() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
         "react-router-dom": "latest",
         "react-router": "latest",
         "react-hook-form": "^7.43.5",
@@ -214,6 +214,7 @@ export const ProductList = () => {
         {
           field: "actions",
           headerName: "Actions",
+          display: "flex",
           renderCell: function render({ row }) {
               return (
                   <div>
@@ -232,7 +233,7 @@ export const ProductList = () => {
 
   return (
     <List>
-        <DataGrid {...dataGridProps} columns={columns} autoHeight />
+        <DataGrid {...dataGridProps} columns={columns}  />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-next-js.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-next-js.tsx
index ef0326a2bbbd..9ad716d50d18 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-next-js.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-next-js.tsx
@@ -17,7 +17,7 @@ export default function LayoutNextjs() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
         "@refinedev/nextjs-router": "latest",
       }}
       // template="nextjs"
@@ -104,7 +104,7 @@ export default function ProductList() {
 
   return (
     <List>
-        <DataGrid {...dataGridProps} columns={columns} autoHeight />
+        <DataGrid {...dataGridProps} columns={columns}  />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-react-router-dom.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-react-router-dom.tsx
index 5ea4b3f08e24..a41b4f200b7a 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-react-router-dom.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-react-router-dom.tsx
@@ -19,7 +19,7 @@ export default function LayoutReactRouterDom() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
         "react-router-dom": "latest",
         "react-router": "latest",
         "react-hook-form": "^7.43.5",
@@ -126,7 +126,7 @@ export const ProductList = () => {
 
   return (
     <List>
-        <DataGrid {...dataGridProps} columns={columns} autoHeight />
+        <DataGrid {...dataGridProps} columns={columns}  />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-remix.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-remix.tsx
index 2de22fd1fa28..0870488b377c 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-remix.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/layout-remix.tsx
@@ -17,7 +17,7 @@ export default function LayoutRemix() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
         "@refinedev/remix-router": "latest",
       }}
       startRoute="/products"
@@ -138,7 +138,7 @@ export default function ProductList() {
 
   return (
     <List>
-        <DataGrid {...dataGridProps} columns={columns} autoHeight />
+        <DataGrid {...dataGridProps} columns={columns}  />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/theming.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/theming.tsx
index 06751d113738..f33cbc655537 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/theming.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/theming.tsx
@@ -19,7 +19,7 @@ export default function Usage() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
         "react-router-dom": "latest",
         "react-router": "latest",
         "react-hook-form": "^7.43.5",
@@ -236,6 +236,7 @@ export const ProductList = () => {
         {
           field: "actions",
           headerName: "Actions",
+          display: "flex",
           renderCell: function render({ row }) {
               return (
                   <div>
@@ -254,7 +255,7 @@ export const ProductList = () => {
 
   return (
     <List>
-        <DataGrid {...dataGridProps} columns={columns} autoHeight />
+        <DataGrid {...dataGridProps} columns={columns}  />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-next-js.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-next-js.tsx
index 3db295f809ea..70f3de868326 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-next-js.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-next-js.tsx
@@ -17,7 +17,7 @@ export default function UsageNextjs() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
         "react-hook-form": "^7.43.5",
         "@refinedev/nextjs-router": "latest",
       }}
@@ -212,6 +212,7 @@ export default function ProductList() {
         {
           field: "actions",
           headerName: "Actions",
+          display: "flex",
           renderCell: function render({ row }) {
               return (
                   <div>
@@ -230,7 +231,7 @@ export default function ProductList() {
 
   return (
     <List>
-        <DataGrid {...dataGridProps} columns={columns} autoHeight />
+        <DataGrid {...dataGridProps} columns={columns}  />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-react-router-dom.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-react-router-dom.tsx
index d837f6643dd3..1783f9f52f0d 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-react-router-dom.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-react-router-dom.tsx
@@ -17,7 +17,7 @@ export default function UsageReactRouterDom() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
         "react-hook-form": "^7.43.5",
         "react-router-dom": "latest",
         "@refinedev/react-router-v6": "latest",
@@ -215,6 +215,7 @@ export const ProductList = () => {
         {
           field: "actions",
           headerName: "Actions",
+          display: "flex",
           renderCell: function render({ row }) {
               return (
                   <div>
@@ -233,7 +234,7 @@ export const ProductList = () => {
 
   return (
     <List>
-        <DataGrid {...dataGridProps} columns={columns} autoHeight />
+        <DataGrid {...dataGridProps} columns={columns}  />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-remix.tsx b/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-remix.tsx
index 8a8c85f526ae..89cb8429952b 100644
--- a/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-remix.tsx
+++ b/documentation/docs/ui-integrations/material-ui/introduction/previews/usage-remix.tsx
@@ -17,7 +17,7 @@ export default function UsageRemix() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
         "react-hook-form": "^7.43.5",
         "@refinedev/remix-router": "latest",
       }}
@@ -244,6 +244,7 @@ export default function ProductList() {
         {
           field: "actions",
           headerName: "Actions",
+          display: "flex",
           renderCell: function render({ row }) {
               return (
                   <div>
@@ -262,7 +263,7 @@ export default function ProductList() {
 
   return (
     <List>
-        <DataGrid {...dataGridProps} columns={columns} autoHeight />
+        <DataGrid {...dataGridProps} columns={columns}  />
     </List>
   );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/migration-guide/index.md b/documentation/docs/ui-integrations/material-ui/migration-guide/index.md
index 16ecd71e4c8c..e908e4288b4e 100644
--- a/documentation/docs/ui-integrations/material-ui/migration-guide/index.md
+++ b/documentation/docs/ui-integrations/material-ui/migration-guide/index.md
@@ -77,7 +77,7 @@ export const PostList: React.FC = () => {
 
     return (
         <List>
-            <DataGrid {...dataGridProps} columns={columns} autoHeight />
+            <DataGrid {...dataGridProps} columns={columns}  />
         </List>
     );
 };
diff --git a/documentation/docs/ui-integrations/material-ui/theming/index.md b/documentation/docs/ui-integrations/material-ui/theming/index.md
index d52d40f16b2d..04e2718a4c53 100644
--- a/documentation/docs/ui-integrations/material-ui/theming/index.md
+++ b/documentation/docs/ui-integrations/material-ui/theming/index.md
@@ -1057,6 +1057,7 @@ const SampleList = () => {
           return value;
         },
         minWidth: 300,
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryIsLoading ? (
             <>Loading...</>
@@ -1069,6 +1070,7 @@ const SampleList = () => {
         field: "createdAt",
         headerName: "Created At",
         minWidth: 250,
+        display: "flex",
         renderCell: function render({ value }) {
           return <DateField value={value} />;
         },
@@ -1076,6 +1078,7 @@ const SampleList = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -1094,7 +1097,7 @@ const SampleList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/documentation/tutorial/ui-libraries/crud-components/material-ui/react-router/index.md b/documentation/tutorial/ui-libraries/crud-components/material-ui/react-router/index.md
index e968b10397ad..25e4b51b1d83 100644
--- a/documentation/tutorial/ui-libraries/crud-components/material-ui/react-router/index.md
+++ b/documentation/tutorial/ui-libraries/crud-components/material-ui/react-router/index.md
@@ -28,11 +28,7 @@ import { useSelect } from "@refinedev/core";
 // highlight-next-line
 import { List, useDataGrid, EditButton, ShowButton } from "@refinedev/mui";
 
-import {
-  DataGrid,
-  GridColDef,
-  GridValueFormatterParams,
-} from "@mui/x-data-grid";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
 
 export const ListProducts = () => {
   const { dataGridProps } = useDataGrid<IProduct>({
@@ -58,7 +54,7 @@ export const ListProducts = () => {
   return (
     // highlight-next-line
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
       {/* highlight-next-line */}
     </List>
   );
diff --git a/documentation/tutorial/ui-libraries/crud-components/material-ui/react-router/sandpack.tsx b/documentation/tutorial/ui-libraries/crud-components/material-ui/react-router/sandpack.tsx
index e4dcdd2df75d..9be80e2ef1d3 100644
--- a/documentation/tutorial/ui-libraries/crud-components/material-ui/react-router/sandpack.tsx
+++ b/documentation/tutorial/ui-libraries/crud-components/material-ui/react-router/sandpack.tsx
@@ -31,7 +31,6 @@ import { List, useDataGrid, EditButton, ShowButton } from "@refinedev/mui";
 import {
   DataGrid,
   GridColDef,
-  GridValueFormatterParams,
 } from "@mui/x-data-grid";
 
 export const ListProducts = () => {
@@ -69,7 +68,7 @@ export const ListProducts = () => {
         flex: 0.5,
         type: "singleSelect",
         valueOptions: categories,
-        valueFormatter: (params) => params?.value,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -95,6 +94,7 @@ export const ListProducts = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <div>
@@ -110,7 +110,7 @@ export const ListProducts = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns}  />
     </List>
   );
 };
diff --git a/documentation/tutorial/ui-libraries/intro/material-ui/react-router/sandpack.tsx b/documentation/tutorial/ui-libraries/intro/material-ui/react-router/sandpack.tsx
index ca0d9dee397d..9fef1de5085e 100644
--- a/documentation/tutorial/ui-libraries/intro/material-ui/react-router/sandpack.tsx
+++ b/documentation/tutorial/ui-libraries/intro/material-ui/react-router/sandpack.tsx
@@ -238,7 +238,7 @@ export const dependencies = {
   "@emotion/styled": "11.11.5",
   "@mui/lab": "^6.0.0-beta.14",
   "@mui/material": "^6.1.6",
-  "@mui/x-data-grid": "6.19.11",
+  "@mui/x-data-grid": "^7.22.2",
   "@refinedev/mui": "5.0.0",
   "@refinedev/react-hook-form": "latest",
   "react-hook-form": "latest",
diff --git a/documentation/tutorial/ui-libraries/refactoring/material-ui/react-router/index.md b/documentation/tutorial/ui-libraries/refactoring/material-ui/react-router/index.md
index 0a97ce78fe73..a7b0276cbfdc 100644
--- a/documentation/tutorial/ui-libraries/refactoring/material-ui/react-router/index.md
+++ b/documentation/tutorial/ui-libraries/refactoring/material-ui/react-router/index.md
@@ -62,6 +62,7 @@ export const ListProducts = () => {
         headerName: "Category",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) return "Loading...";
 
@@ -85,6 +86,7 @@ export const ListProducts = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <div>
@@ -103,7 +105,7 @@ export const ListProducts = () => {
     <div>
       <h1>Products</h1>
       {/* highlight-next-line */}
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </div>
   );
 };
@@ -195,8 +197,7 @@ export const ListProducts = () => {
         // We're defining the column type as `singleSelect` and providing the options to the `valueOptions` prop.
         type: "singleSelect",
         valueOptions: categories,
-        // Since now the options are in an object format, we need to provide the `valueFormatter` prop to pick the value of the option.
-        valueFormatter: (params) => params.value,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -223,6 +224,7 @@ export const ListProducts = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <div>
@@ -239,7 +241,7 @@ export const ListProducts = () => {
   return (
     <div>
       <h1>Products</h1>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </div>
   );
 };
diff --git a/documentation/tutorial/ui-libraries/refactoring/material-ui/react-router/sandpack.tsx b/documentation/tutorial/ui-libraries/refactoring/material-ui/react-router/sandpack.tsx
index fa4c460fe1fb..b2e678dd566f 100644
--- a/documentation/tutorial/ui-libraries/refactoring/material-ui/react-router/sandpack.tsx
+++ b/documentation/tutorial/ui-libraries/refactoring/material-ui/react-router/sandpack.tsx
@@ -60,6 +60,7 @@ export const ListProducts = () => {
         headerName: "Category",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -85,6 +86,7 @@ export const ListProducts = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <div>
@@ -101,7 +103,7 @@ export const ListProducts = () => {
   return (
     <div>
       <h1>Products</h1>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns}  />
     </div>
   );
 };
@@ -128,7 +130,6 @@ import { useDataGrid, EditButton, ShowButton } from "@refinedev/mui";
 import {
   DataGrid,
   GridColDef,
-  GridValueFormatterParams,
 } from "@mui/x-data-grid";
 
 export const ListProducts = () => {
@@ -166,7 +167,7 @@ export const ListProducts = () => {
         flex: 0.5,
         type: "singleSelect",
         valueOptions: categories,
-        valueFormatter: (params) => params?.value,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -192,6 +193,7 @@ export const ListProducts = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <div>
@@ -208,7 +210,7 @@ export const ListProducts = () => {
   return (
     <div>
       <h1>Products</h1>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns}  />
     </div>
   );
 };
diff --git a/examples/auth-material-ui/package.json b/examples/auth-material-ui/package.json
index 1163bf59abca..a783ccd4f4a3 100644
--- a/examples/auth-material-ui/package.json
+++ b/examples/auth-material-ui/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/auth-material-ui/src/pages/posts/list.tsx b/examples/auth-material-ui/src/pages/posts/list.tsx
index 019ac589494f..89c5610bf279 100644
--- a/examples/auth-material-ui/src/pages/posts/list.tsx
+++ b/examples/auth-material-ui/src/pages/posts/list.tsx
@@ -35,6 +35,7 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -50,6 +51,7 @@ export const PostList: React.FC = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return <EditButton hideText recordItemId={row.id} />;
         },
@@ -63,7 +65,15 @@ export const PostList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          maxHeight: "calc(100vh - 320px)",
+        }}
+      >
+        <DataGrid {...dataGridProps} columns={columns} />
+      </div>
     </List>
   );
 };
diff --git a/examples/base-material-ui/package.json b/examples/base-material-ui/package.json
index 0f689dbba342..5fabfe6f9785 100644
--- a/examples/base-material-ui/package.json
+++ b/examples/base-material-ui/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/devtools": "^1.2.9",
diff --git a/examples/base-material-ui/src/pages/posts/list.tsx b/examples/base-material-ui/src/pages/posts/list.tsx
index 8da7958905e0..0633e3524cd6 100644
--- a/examples/base-material-ui/src/pages/posts/list.tsx
+++ b/examples/base-material-ui/src/pages/posts/list.tsx
@@ -35,6 +35,7 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -50,6 +51,7 @@ export const PostList: React.FC = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <div>
@@ -68,7 +70,15 @@ export const PostList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          maxHeight: "calc(100vh - 320px)",
+        }}
+      >
+        <DataGrid {...dataGridProps} columns={columns} />
+      </div>
     </List>
   );
 };
diff --git a/examples/blog-material-ui-datagrid/package.json b/examples/blog-material-ui-datagrid/package.json
index f356405d6615..860080e89142 100644
--- a/examples/blog-material-ui-datagrid/package.json
+++ b/examples/blog-material-ui-datagrid/package.json
@@ -27,7 +27,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/inferencer": "^4.7.1",
diff --git a/examples/blog-material-ui-datagrid/src/pages/employees.tsx b/examples/blog-material-ui-datagrid/src/pages/employees.tsx
index d46cac83ffbd..10e0c993f861 100644
--- a/examples/blog-material-ui-datagrid/src/pages/employees.tsx
+++ b/examples/blog-material-ui-datagrid/src/pages/employees.tsx
@@ -15,8 +15,8 @@ const EmployeeList: React.FC = () => {
         headerName: "Full Name",
         minWidth: 150,
         flex: 1,
-        valueGetter: (params) =>
-          `${params.row.first_name || ""} ${params.row.last_name || ""}`,
+        valueGetter: (_, row) =>
+          `${row.first_name || ""} ${row.last_name || ""}`,
       },
       {
         field: "email",
@@ -65,7 +65,6 @@ const EmployeeList: React.FC = () => {
         {...dataGridProps}
         columns={columns}
         slots={{ toolbar: GridToolbar }}
-        autoHeight
       />
     </List>
   );
diff --git a/examples/blog-material-ui/package.json b/examples/blog-material-ui/package.json
index a3eae00ae5c9..6fc5948e825d 100644
--- a/examples/blog-material-ui/package.json
+++ b/examples/blog-material-ui/package.json
@@ -29,7 +29,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/blog-material-ui/src/pages/posts/list.tsx b/examples/blog-material-ui/src/pages/posts/list.tsx
index 91238051e678..84d999bebcb8 100644
--- a/examples/blog-material-ui/src/pages/posts/list.tsx
+++ b/examples/blog-material-ui/src/pages/posts/list.tsx
@@ -27,6 +27,7 @@ export const PostList: React.FC = () => {
         headerName: "Category",
         minWidth: 250,
         flex: 1,
+        display: "flex",
         renderCell: function render({ row }) {
           return row.category?.title;
         },
@@ -36,6 +37,7 @@ export const PostList: React.FC = () => {
         field: "createdAt",
         headerName: "CreatedAt",
         minWidth: 220,
+        display: "flex",
         renderCell: function render({ row }) {
           return <DateField format="LLL" value={row.createdAt} />;
         },
@@ -48,6 +50,7 @@ export const PostList: React.FC = () => {
         align: "center",
         flex: 1,
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <Stack direction="row" spacing={1}>
@@ -63,7 +66,7 @@ export const PostList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/blog-react-hook-dynamic-form/package.json b/examples/blog-react-hook-dynamic-form/package.json
index 3dafc4217ead..c99bf6f7bd60 100644
--- a/examples/blog-react-hook-dynamic-form/package.json
+++ b/examples/blog-react-hook-dynamic-form/package.json
@@ -28,7 +28,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/blog-react-hook-dynamic-form/src/pages/userList.tsx b/examples/blog-react-hook-dynamic-form/src/pages/userList.tsx
index c7c42ace7e61..a75732ad7bf0 100644
--- a/examples/blog-react-hook-dynamic-form/src/pages/userList.tsx
+++ b/examples/blog-react-hook-dynamic-form/src/pages/userList.tsx
@@ -41,6 +41,7 @@ function UserList() {
         align: "center",
         flex: 1,
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }: { row: any }) {
           return (
             <Stack direction="row" spacing={1}>
@@ -56,7 +57,7 @@ function UserList() {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 }
diff --git a/examples/blog-refine-mui/package.json b/examples/blog-refine-mui/package.json
index 778df0d081da..0294e5eb7344 100644
--- a/examples/blog-refine-mui/package.json
+++ b/examples/blog-refine-mui/package.json
@@ -27,7 +27,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/devtools": "^1.2.9",
diff --git a/examples/blog-refine-mui/src/components/recent-sales/index.tsx b/examples/blog-refine-mui/src/components/recent-sales/index.tsx
index 0ff8a2f19f02..ec3af6803d25 100644
--- a/examples/blog-refine-mui/src/components/recent-sales/index.tsx
+++ b/examples/blog-refine-mui/src/components/recent-sales/index.tsx
@@ -66,6 +66,7 @@ export function RecentSales() {
         field: "user.fullName",
         headerName: "Ordered By",
         width: 200,
+        display: "flex",
         renderCell: ({ row }) => <>{row["user"]["fullName"]}</>,
       },
       {
@@ -73,18 +74,20 @@ export function RecentSales() {
         headerName: "Amount",
         type: "singleSelect",
         width: 150,
-        valueFormatter: ({ value }) => currencyFormatter.format(value),
+        valueFormatter: (value) => currencyFormatter.format(value),
       },
       {
         field: "user.gender",
         headerName: "Gender",
         width: 120,
+        display: "flex",
         renderCell: ({ row }) => <>{row["user"]["gender"]}</>,
       },
       {
         field: "user.gsm",
         headerName: "Tel",
         width: 170,
+        display: "flex",
         renderCell: ({ row }) => <>{row["user"]["gsm"]}</>,
       },
       {
@@ -99,6 +102,7 @@ export function RecentSales() {
           "Pending",
           "Delivered",
         ],
+        display: "flex",
         renderCell: ({ row }) => (
           <Chip
             label={row["status"]["text"]}
@@ -112,12 +116,14 @@ export function RecentSales() {
         headerName: "Address",
         width: 350,
         headerAlign: "left",
+        display: "flex",
         renderCell: ({ row }) => <>{row["adress"]["text"]}</>,
       },
       {
         field: "createdAt",
         headerName: "Created At",
         width: 200,
+        display: "flex",
         renderCell: ({ row }) => <>{formatDate(row["createdAt"])}</>,
       },
     ],
@@ -170,7 +176,6 @@ export function RecentSales() {
         {...dataGridProps}
         columns={columns as any}
         sx={{ pl: 3 }}
-        autoHeight
         pageSizeOptions={[5, 10, 25, 50]}
       />
     </Card>
diff --git a/examples/blog-refine-mui/src/pages/categories/list.tsx b/examples/blog-refine-mui/src/pages/categories/list.tsx
index 351922fe1a0f..c3723b43811f 100644
--- a/examples/blog-refine-mui/src/pages/categories/list.tsx
+++ b/examples/blog-refine-mui/src/pages/categories/list.tsx
@@ -30,6 +30,7 @@ export const CategoryList = () => {
         field: "actions",
         headerName: translate("table.actions"),
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -49,7 +50,7 @@ export const CategoryList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/blog-refine-mui/src/pages/products/list.tsx b/examples/blog-refine-mui/src/pages/products/list.tsx
index 4af60185c6de..dc6c18713dbd 100644
--- a/examples/blog-refine-mui/src/pages/products/list.tsx
+++ b/examples/blog-refine-mui/src/pages/products/list.tsx
@@ -45,6 +45,7 @@ export const ProductList = () => {
         field: "price",
         flex: 0.5,
         headerName: translate("Price"),
+        display: "flex",
         renderCell: function render({ value }) {
           return formatCurrency.format(value);
         },
@@ -53,11 +54,12 @@ export const ProductList = () => {
         field: "category",
         flex: 0.5,
         headerName: translate("Category"),
-        valueGetter: ({ row }) => {
+        valueGetter: (_, row) => {
           const value = row?.category?.id;
 
           return value;
         },
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryIsLoading ? (
             <>Loading...</>
@@ -71,6 +73,7 @@ export const ProductList = () => {
         flex: 1,
         headerName: translate("Description"),
         minWidth: 500,
+        display: "flex",
         renderCell: function render({ value }) {
           return <MarkdownField value={`${(value ?? "").slice(0, 80)}...`} />;
         },
@@ -79,6 +82,7 @@ export const ProductList = () => {
         field: "actions",
         headerName: translate("table.actions"),
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -98,7 +102,7 @@ export const ProductList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/blog-refine-react-hook-form/package.json b/examples/blog-refine-react-hook-form/package.json
index ae9025a91d3d..1eef87eb1fd4 100644
--- a/examples/blog-refine-react-hook-form/package.json
+++ b/examples/blog-refine-react-hook-form/package.json
@@ -28,7 +28,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/customization-theme-material-ui/package.json b/examples/customization-theme-material-ui/package.json
index 82a154b2c64d..8f7f88f1ad75 100644
--- a/examples/customization-theme-material-ui/package.json
+++ b/examples/customization-theme-material-ui/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/customization-theme-material-ui/src/pages/posts/list.tsx b/examples/customization-theme-material-ui/src/pages/posts/list.tsx
index 019ac589494f..12e7adbd9c60 100644
--- a/examples/customization-theme-material-ui/src/pages/posts/list.tsx
+++ b/examples/customization-theme-material-ui/src/pages/posts/list.tsx
@@ -35,6 +35,7 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -50,6 +51,7 @@ export const PostList: React.FC = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return <EditButton hideText recordItemId={row.id} />;
         },
@@ -63,7 +65,7 @@ export const PostList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/field-material-ui-use-autocomplete/package.json b/examples/field-material-ui-use-autocomplete/package.json
index e8b1cb0c5280..a1fb3c083302 100644
--- a/examples/field-material-ui-use-autocomplete/package.json
+++ b/examples/field-material-ui-use-autocomplete/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/field-material-ui-use-autocomplete/src/pages/posts/list.tsx b/examples/field-material-ui-use-autocomplete/src/pages/posts/list.tsx
index b5c245b677c8..b9ba71d22b53 100644
--- a/examples/field-material-ui-use-autocomplete/src/pages/posts/list.tsx
+++ b/examples/field-material-ui-use-autocomplete/src/pages/posts/list.tsx
@@ -34,6 +34,7 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -49,6 +50,7 @@ export const PostList: React.FC = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return <EditButton hideText recordItemId={row.id} />;
         },
@@ -62,7 +64,7 @@ export const PostList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/finefoods-material-ui/package.json b/examples/finefoods-material-ui/package.json
index 408dcfaa5c95..883dcc371d0e 100644
--- a/examples/finefoods-material-ui/package.json
+++ b/examples/finefoods-material-ui/package.json
@@ -28,7 +28,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/kbar": "1.3.12",
diff --git a/examples/finefoods-material-ui/src/components/courier/table-reviews/index.tsx b/examples/finefoods-material-ui/src/components/courier/table-reviews/index.tsx
index 4a8db76cbd6e..d991af7952f7 100644
--- a/examples/finefoods-material-ui/src/components/courier/table-reviews/index.tsx
+++ b/examples/finefoods-material-ui/src/components/courier/table-reviews/index.tsx
@@ -1,7 +1,6 @@
 import { useMemo } from "react";
 import { useTranslate } from "@refinedev/core";
 import { useDataGrid } from "@refinedev/mui";
-import Paper from "@mui/material/Paper";
 import { DataGrid, type GridColDef } from "@mui/x-data-grid";
 import Rating from "@mui/material/Rating";
 import Chip from "@mui/material/Chip";
@@ -48,6 +47,7 @@ export const CourierTableReviews = (props: Props) => {
         headerName: t("reviews.fields.rating"),
         width: 172,
         filterable: false,
+        display: "flex",
         renderCell: function render({ row }: { row: IReview }) {
           return (
             <Rating
@@ -64,6 +64,7 @@ export const CourierTableReviews = (props: Props) => {
         headerName: t("orders.fields.orderNumber"),
         filterable: false,
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }: { row: IReview }) {
           return (
             <Chip
@@ -79,16 +80,10 @@ export const CourierTableReviews = (props: Props) => {
   );
 
   return (
-    <Paper>
-      <DataGrid
-        {...dataGridProps}
-        columns={columns}
-        pageSizeOptions={[10, 20, 50]}
-        sx={{
-          border: "none",
-        }}
-        autoHeight
-      />
-    </Paper>
+    <DataGrid
+      {...dataGridProps}
+      columns={columns}
+      pageSizeOptions={[10, 20, 50]}
+    />
   );
 };
diff --git a/examples/finefoods-material-ui/src/components/dashboard/recentOrders/index.tsx b/examples/finefoods-material-ui/src/components/dashboard/recentOrders/index.tsx
index 0a39443da80f..7b2d994a3bb3 100644
--- a/examples/finefoods-material-ui/src/components/dashboard/recentOrders/index.tsx
+++ b/examples/finefoods-material-ui/src/components/dashboard/recentOrders/index.tsx
@@ -58,6 +58,7 @@ export const RecentOrders: React.FC = () => {
     () => [
       {
         field: "orderNumber",
+        display: "flex",
         renderCell: function render({ row }) {
           return <Typography>#{row.orderNumber}</Typography>;
         },
@@ -66,6 +67,7 @@ export const RecentOrders: React.FC = () => {
       {
         field: "user",
         width: 220,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <Stack spacing="4px">
@@ -92,6 +94,7 @@ export const RecentOrders: React.FC = () => {
       {
         field: "products",
         flex: 1,
+        display: "flex",
         renderCell: function render({ row }) {
           const products = getUniqueListWithCount({
             list: row.products,
@@ -119,6 +122,7 @@ export const RecentOrders: React.FC = () => {
         field: "amount",
         align: "right",
         width: 80,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <NumberField
diff --git a/examples/finefoods-material-ui/src/components/order/products/index.tsx b/examples/finefoods-material-ui/src/components/order/products/index.tsx
index 18fd102aedf1..c8f03421327a 100644
--- a/examples/finefoods-material-ui/src/components/order/products/index.tsx
+++ b/examples/finefoods-material-ui/src/components/order/products/index.tsx
@@ -27,6 +27,7 @@ export const OrderProducts = ({ order }: Props) => {
       {
         field: "avatar",
         headerName: t("products.fields.images.label"),
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <Avatar
@@ -65,6 +66,7 @@ export const OrderProducts = ({ order }: Props) => {
         sortable: false,
         align: "right",
         headerAlign: "right",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <NumberField
@@ -83,6 +85,7 @@ export const OrderProducts = ({ order }: Props) => {
         sortable: false,
         align: "right",
         headerAlign: "right",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <NumberField
@@ -102,9 +105,7 @@ export const OrderProducts = ({ order }: Props) => {
   return (
     <DataGrid
       rows={uniqueProducts}
-      sx={{}}
       columns={columns}
-      autoHeight
       slots={{
         footer: () => {
           return (
diff --git a/examples/finefoods-material-ui/src/components/product/list-table/index.tsx b/examples/finefoods-material-ui/src/components/product/list-table/index.tsx
index 81b18980db92..62722f0fa487 100644
--- a/examples/finefoods-material-ui/src/components/product/list-table/index.tsx
+++ b/examples/finefoods-material-ui/src/components/product/list-table/index.tsx
@@ -27,6 +27,7 @@ export const ProductListTable = (props: Props) => {
         headerName: "ID #",
         description: "ID #",
         width: 52,
+        display: "flex",
         renderCell: function render({ row }) {
           return <Typography>#{row.id}</Typography>;
         },
@@ -34,6 +35,7 @@ export const ProductListTable = (props: Props) => {
       {
         field: "avatar",
         headerName: t("products.fields.images.label"),
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <Avatar
@@ -72,6 +74,7 @@ export const ProductListTable = (props: Props) => {
         sortable: false,
         align: "right",
         headerAlign: "right",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <NumberField
@@ -90,6 +93,7 @@ export const ProductListTable = (props: Props) => {
         minWidth: 160,
         sortable: false,
         filterable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           const category = props.categories.find(
             (category) => category.id === row.category.id,
@@ -102,6 +106,7 @@ export const ProductListTable = (props: Props) => {
         field: "isActive",
         headerName: t("products.fields.isActive.label"),
         minWidth: 136,
+        display: "flex",
         renderCell: function render({ row }) {
           return <ProductStatus value={row.isActive} />;
         },
@@ -112,6 +117,7 @@ export const ProductListTable = (props: Props) => {
         width: 80,
         align: "center",
         headerAlign: "center",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <IconButton
@@ -143,9 +149,7 @@ export const ProductListTable = (props: Props) => {
   return (
     <DataGrid
       {...props.dataGridProps}
-      sx={{}}
       columns={columns}
-      autoHeight
       pageSizeOptions={[12, 24, 48, 96]}
     />
   );
diff --git a/examples/finefoods-material-ui/src/components/store/courier-table/index.tsx b/examples/finefoods-material-ui/src/components/store/courier-table/index.tsx
index 71e1b06cddf7..35b88ff71eba 100644
--- a/examples/finefoods-material-ui/src/components/store/courier-table/index.tsx
+++ b/examples/finefoods-material-ui/src/components/store/courier-table/index.tsx
@@ -40,6 +40,7 @@ export const StoreCourierTable = (props: Props) => {
       {
         field: "name",
         headerName: t("couriers.couriers"),
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <Stack alignItems="center" direction="row" spacing={2}>
@@ -63,6 +64,7 @@ export const StoreCourierTable = (props: Props) => {
         field: "rating",
         headerName: t("couriers.fields.rating.label"),
         width: 172,
+        display: "flex",
         renderCell: function render({ row }) {
           return <CourierRating courier={row} />;
         },
@@ -71,6 +73,7 @@ export const StoreCourierTable = (props: Props) => {
         field: "status",
         headerName: t("couriers.fields.status.label"),
         width: 140,
+        display: "flex",
         renderCell: function render({ row }) {
           return <CourierStatus value={row.status} />;
         },
@@ -83,9 +86,8 @@ export const StoreCourierTable = (props: Props) => {
     <DataGrid
       {...dataGridProps}
       columns={columns}
-      autoHeight
       pageSizeOptions={[10, 20, 50, 100]}
-      density="comfortable"
+      initialState={{ density: "comfortable" }}
       sx={{
         "& .MuiDataGrid-cell:hover": {
           cursor: "pointer",
diff --git a/examples/finefoods-material-ui/src/components/store/table/index.tsx b/examples/finefoods-material-ui/src/components/store/table/index.tsx
index 87aa5932f95f..0582c07e88ff 100644
--- a/examples/finefoods-material-ui/src/components/store/table/index.tsx
+++ b/examples/finefoods-material-ui/src/components/store/table/index.tsx
@@ -7,7 +7,6 @@ import {
   TextFieldComponent,
   useDataGrid,
 } from "@refinedev/mui";
-import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 import { IconButton } from "@mui/material";
 import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
@@ -28,6 +27,7 @@ export const StoreTable = () => {
         field: "id",
         headerName: "ID #",
         width: 72,
+        display: "flex",
         renderCell: function render({ row }) {
           return <Typography>#{row.id}</Typography>;
         },
@@ -43,6 +43,7 @@ export const StoreTable = () => {
         headerName: t("stores.fields.address"),
         flex: 2,
         width: 356,
+        display: "flex",
         renderCell: function render({ row }) {
           return <TextFieldComponent value={row.address?.text} />;
         },
@@ -61,6 +62,7 @@ export const StoreTable = () => {
         field: "isActive",
         headerName: t("stores.fields.isActive.label"),
         width: 110,
+        display: "flex",
         renderCell: function render({ row }) {
           return <StoreStatus value={row.isActive} />;
         },
@@ -71,6 +73,7 @@ export const StoreTable = () => {
         type: "actions",
         align: "center",
         headerAlign: "center",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <IconButton
@@ -89,15 +92,12 @@ export const StoreTable = () => {
   );
 
   return (
-    <Paper>
-      <DataGrid
-        {...dataGridProps}
-        disableColumnSelector
-        sx={{}}
-        columns={columns}
-        autoHeight
-        pageSizeOptions={[10, 20, 50, 100]}
-      />
-    </Paper>
+    <DataGrid
+      {...dataGridProps}
+      disableColumnSelector
+      columns={columns}
+      pageSizeOptions={[10, 20, 50, 100]}
+      autosizeOnMount
+    />
   );
 };
diff --git a/examples/finefoods-material-ui/src/pages/categories/list.tsx b/examples/finefoods-material-ui/src/pages/categories/list.tsx
index 1ff73abf7adb..a7e6e508c1ad 100644
--- a/examples/finefoods-material-ui/src/pages/categories/list.tsx
+++ b/examples/finefoods-material-ui/src/pages/categories/list.tsx
@@ -44,6 +44,7 @@ export const CategoryList = () => {
         field: "product",
         headerName: t("categories.fields.products"),
         flex: 1,
+        display: "flex",
         renderCell: function render({ row }) {
           const categoryProducts = products.filter(
             (product) => product.category.id === row.id,
@@ -90,6 +91,7 @@ export const CategoryList = () => {
         field: "isActive",
         headerName: t("categories.fields.isActive.label"),
         width: 116,
+        display: "flex",
         renderCell: function render({ row }) {
           return <CategoryStatus value={row.isActive} />;
         },
@@ -100,15 +102,7 @@ export const CategoryList = () => {
 
   return (
     <RefineListView>
-      <Paper>
-        <DataGrid
-          {...dataGridProps}
-          sx={{}}
-          columns={columns}
-          autoHeight
-          hideFooter
-        />
-      </Paper>
+      <DataGrid {...dataGridProps} columns={columns} hideFooter />
     </RefineListView>
   );
 };
diff --git a/examples/finefoods-material-ui/src/pages/couriers/list.tsx b/examples/finefoods-material-ui/src/pages/couriers/list.tsx
index c953df0b6793..44a5bd1c64ca 100644
--- a/examples/finefoods-material-ui/src/pages/couriers/list.tsx
+++ b/examples/finefoods-material-ui/src/pages/couriers/list.tsx
@@ -3,7 +3,6 @@ import { useGo, useNavigation, useTranslate } from "@refinedev/core";
 import { CreateButton, EditButton, useDataGrid } from "@refinedev/mui";
 import { useLocation } from "react-router-dom";
 import { DataGrid, type GridColDef } from "@mui/x-data-grid";
-import Paper from "@mui/material/Paper";
 import Avatar from "@mui/material/Avatar";
 import Typography from "@mui/material/Typography";
 import { CourierRating, CourierStatus, RefineListView } from "../../components";
@@ -27,6 +26,7 @@ export const CourierList = ({ children }: PropsWithChildren) => {
         field: "id",
         headerName: "ID #",
         width: 64,
+        display: "flex",
         renderCell: function render({ row }) {
           return <Typography>#{row.id}</Typography>;
         },
@@ -35,6 +35,7 @@ export const CourierList = ({ children }: PropsWithChildren) => {
         field: "avatar",
         headerName: t("couriers.fields.avatar.label"),
         width: 64,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <Avatar
@@ -65,6 +66,7 @@ export const CourierList = ({ children }: PropsWithChildren) => {
         minWidth: 156,
         flex: 1,
         headerName: t("couriers.fields.store.label"),
+        display: "flex",
         renderCell: function render({ row }) {
           return <Typography>{row.store?.title}</Typography>;
         },
@@ -131,15 +133,11 @@ export const CourierList = ({ children }: PropsWithChildren) => {
           </CreateButton>,
         ]}
       >
-        <Paper>
-          <DataGrid
-            {...dataGridProps}
-            columns={columns}
-            sx={{}}
-            autoHeight
-            pageSizeOptions={[10, 20, 50, 100]}
-          />
-        </Paper>
+        <DataGrid
+          {...dataGridProps}
+          columns={columns}
+          pageSizeOptions={[10, 20, 50, 100]}
+        />
       </RefineListView>
       {children}
     </>
diff --git a/examples/finefoods-material-ui/src/pages/customers/list.tsx b/examples/finefoods-material-ui/src/pages/customers/list.tsx
index 7677fe547939..73d80e1c9b74 100644
--- a/examples/finefoods-material-ui/src/pages/customers/list.tsx
+++ b/examples/finefoods-material-ui/src/pages/customers/list.tsx
@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren, useMemo } from "react";
+import { type PropsWithChildren, useMemo } from "react";
 import {
   type HttpError,
   useExport,
@@ -13,7 +13,6 @@ import Avatar from "@mui/material/Avatar";
 import Typography from "@mui/material/Typography";
 import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
 import IconButton from "@mui/material/IconButton";
-import Paper from "@mui/material/Paper";
 import type { IUser, IUserFilterVariables } from "../../interfaces";
 import { CustomTooltip, RefineListView } from "../../components";
 import { CustomerStatus } from "../../components/customer";
@@ -39,6 +38,7 @@ export const CustomerList = ({ children }: PropsWithChildren) => {
         headerName: "ID #",
         description: "ID #",
         width: 52,
+        display: "flex",
         renderCell: function render({ row }) {
           return <Typography>#{row.id}</Typography>;
         },
@@ -46,6 +46,7 @@ export const CustomerList = ({ children }: PropsWithChildren) => {
       {
         field: "avatar",
         headerName: t("users.fields.avatar.label"),
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <Avatar
@@ -78,6 +79,7 @@ export const CustomerList = ({ children }: PropsWithChildren) => {
         headerName: t("users.addresses.address"),
         minWidth: 284,
         flex: 1,
+        display: "flex",
         renderCell: function render({ row }) {
           const text = row.addresses[0].text;
 
@@ -103,6 +105,7 @@ export const CustomerList = ({ children }: PropsWithChildren) => {
         field: "createdAt",
         width: 220,
         headerName: t("users.fields.createdAt"),
+        display: "flex",
         renderCell: function render({ row }) {
           return <DateField value={row.createdAt} format="LL / hh:mm a" />;
         },
@@ -111,6 +114,7 @@ export const CustomerList = ({ children }: PropsWithChildren) => {
         field: "isActive",
         headerName: t("users.fields.isActive.label"),
         width: 120,
+        display: "flex",
         renderCell: function render({ row }) {
           return <CustomerStatus value={row.isActive} />;
         },
@@ -121,6 +125,7 @@ export const CustomerList = ({ children }: PropsWithChildren) => {
         width: 80,
         align: "center",
         headerAlign: "center",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <IconButton
@@ -179,15 +184,11 @@ export const CustomerList = ({ children }: PropsWithChildren) => {
           />
         }
       >
-        <Paper>
-          <DataGrid
-            {...dataGridProps}
-            sx={{}}
-            columns={columns}
-            autoHeight
-            pageSizeOptions={[10, 20, 50, 100]}
-          />
-        </Paper>
+        <DataGrid
+          {...dataGridProps}
+          columns={columns}
+          pageSizeOptions={[10, 20, 50, 100]}
+        />
       </RefineListView>
       {children}
     </>
diff --git a/examples/finefoods-material-ui/src/pages/customers/show.tsx b/examples/finefoods-material-ui/src/pages/customers/show.tsx
index 2ebcc0612ecf..aad0709262c3 100644
--- a/examples/finefoods-material-ui/src/pages/customers/show.tsx
+++ b/examples/finefoods-material-ui/src/pages/customers/show.tsx
@@ -74,6 +74,7 @@ export const CustomerShow = () => {
         field: "orderNumber",
         headerName: t("orders.fields.orderNumber"),
         width: 88,
+        display: "flex",
         renderCell: function render({ row }) {
           return <Typography>#{row.id}</Typography>;
         },
@@ -82,6 +83,7 @@ export const CustomerShow = () => {
         field: "status.text",
         headerName: t("orders.fields.status"),
         width: 124,
+        display: "flex",
         renderCell: function render({ row }) {
           return <OrderStatus status={row.status.text} />;
         },
@@ -91,6 +93,7 @@ export const CustomerShow = () => {
         headerName: t("orders.fields.products"),
         width: 184,
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           return <OrderTableColumnProducts order={row} />;
         },
@@ -100,6 +103,7 @@ export const CustomerShow = () => {
         align: "right",
         headerAlign: "right",
         headerName: t("orders.fields.amount"),
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <NumberField
@@ -118,7 +122,7 @@ export const CustomerShow = () => {
         field: "store",
         headerName: t("orders.fields.store"),
         width: 150,
-        valueGetter: ({ row }) => row.store.title,
+        valueGetter: (_, row) => row.store.title,
         sortable: false,
       },
     ],
@@ -244,15 +248,7 @@ export const CustomerShow = () => {
           </Stack>
         </Paper>
 
-        <Paper>
-          <DataGrid
-            {...dataGridProps}
-            columns={columns}
-            sx={{}}
-            autoHeight
-            hideFooterPagination
-          />
-        </Paper>
+        <DataGrid {...dataGridProps} columns={columns} hideFooter />
       </Stack>
     </Drawer>
   );
diff --git a/examples/finefoods-material-ui/src/pages/orders/list.tsx b/examples/finefoods-material-ui/src/pages/orders/list.tsx
index 27f921e92c50..ee12f71b8855 100644
--- a/examples/finefoods-material-ui/src/pages/orders/list.tsx
+++ b/examples/finefoods-material-ui/src/pages/orders/list.tsx
@@ -20,7 +20,6 @@ import {
 import Typography from "@mui/material/Typography";
 import CheckOutlinedIcon from "@mui/icons-material/CheckOutlined";
 import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
-import Paper from "@mui/material/Paper";
 import { OrderStatus, OrderTableColumnProducts } from "../../components/order";
 import type { IOrder, IOrderFilterVariables } from "../../interfaces";
 import { RefineListView } from "../../components";
@@ -43,6 +42,7 @@ export const OrderList = () => {
         field: "orderNumber",
         headerName: t("orders.fields.order"),
         description: t("orders.fields.order"),
+        display: "flex",
         renderCell: function render({ row }) {
           return <Typography>#{row.orderNumber}</Typography>;
         },
@@ -51,6 +51,7 @@ export const OrderList = () => {
         field: "status.text",
         headerName: t("orders.fields.status"),
         width: 124,
+        display: "flex",
         renderCell: function render({ row }) {
           return <OrderStatus status={row.status.text} />;
         },
@@ -60,6 +61,7 @@ export const OrderList = () => {
         headerName: t("orders.fields.products"),
         width: 184,
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           return <OrderTableColumnProducts order={row} />;
         },
@@ -70,6 +72,7 @@ export const OrderList = () => {
         headerAlign: "center",
         align: "right",
         width: 120,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <NumberField
@@ -86,14 +89,14 @@ export const OrderList = () => {
         field: "store",
         headerName: t("orders.fields.store"),
         width: 154,
-        valueGetter: ({ row }) => row.store.title,
+        valueGetter: (_, row) => row.store.title,
         sortable: false,
       },
       {
         field: "user.fullName",
         headerName: t("orders.fields.customer"),
         width: 154,
-        valueGetter: ({ row }) => row.user.fullName,
+        valueGetter: (_, row) => row.user.fullName,
         sortable: false,
       },
 
@@ -101,6 +104,7 @@ export const OrderList = () => {
         field: "createdAt",
         headerName: t("orders.fields.createdAt"),
         width: 200,
+        display: "flex",
         renderCell: function render({ row }) {
           return <DateField value={row.createdAt} format="LL / hh:mm a" />;
         },
@@ -186,21 +190,19 @@ export const OrderList = () => {
         />
       }
     >
-      <Paper>
-        <DataGrid
-          {...dataGridProps}
-          columns={columns}
-          onRowClick={({ id }) => {
-            show("orders", id);
-          }}
-          pageSizeOptions={[10, 20, 50, 100]}
-          sx={{
-            "& .MuiDataGrid-row": {
-              cursor: "pointer",
-            },
-          }}
-        />
-      </Paper>
+      <DataGrid
+        {...dataGridProps}
+        columns={columns}
+        onRowClick={({ id }) => {
+          show("orders", id);
+        }}
+        pageSizeOptions={[10, 20, 50, 100]}
+        sx={{
+          "& .MuiDataGrid-row": {
+            cursor: "pointer",
+          },
+        }}
+      />
     </RefineListView>
   );
 };
diff --git a/examples/finefoods-material-ui/src/pages/products/list.tsx b/examples/finefoods-material-ui/src/pages/products/list.tsx
index 19f18d7e260b..5c2d63e1fcc3 100644
--- a/examples/finefoods-material-ui/src/pages/products/list.tsx
+++ b/examples/finefoods-material-ui/src/pages/products/list.tsx
@@ -6,7 +6,6 @@ import BorderAllOutlinedIcon from "@mui/icons-material/BorderAllOutlined";
 import { useLocation } from "react-router-dom";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import ToggleButton from "@mui/material/ToggleButton";
-import Paper from "@mui/material/Paper";
 import {
   ProductListTable,
   ProductListCard,
@@ -95,9 +94,7 @@ export const ProductList = ({ children }: PropsWithChildren) => {
         ]}
       >
         {view === "table" && (
-          <Paper>
-            <ProductListTable {...dataGrid} categories={categories} />
-          </Paper>
+          <ProductListTable {...dataGrid} categories={categories} />
         )}
         {view === "card" && (
           <ProductListCard {...dataGrid} categories={categories} />
diff --git a/examples/form-material-ui-mutation-mode/package.json b/examples/form-material-ui-mutation-mode/package.json
index df16325f8e71..64f53b457759 100644
--- a/examples/form-material-ui-mutation-mode/package.json
+++ b/examples/form-material-ui-mutation-mode/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/form-material-ui-mutation-mode/src/pages/posts/list.tsx b/examples/form-material-ui-mutation-mode/src/pages/posts/list.tsx
index 019ac589494f..d8752b091b29 100644
--- a/examples/form-material-ui-mutation-mode/src/pages/posts/list.tsx
+++ b/examples/form-material-ui-mutation-mode/src/pages/posts/list.tsx
@@ -35,6 +35,8 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
+
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -50,6 +52,7 @@ export const PostList: React.FC = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return <EditButton hideText recordItemId={row.id} />;
         },
@@ -63,7 +66,7 @@ export const PostList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/form-material-ui-use-drawer-form/package.json b/examples/form-material-ui-use-drawer-form/package.json
index 4218457776e9..19ee1a200826 100644
--- a/examples/form-material-ui-use-drawer-form/package.json
+++ b/examples/form-material-ui-use-drawer-form/package.json
@@ -27,7 +27,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/form-material-ui-use-drawer-form/src/pages/posts/list.tsx b/examples/form-material-ui-use-drawer-form/src/pages/posts/list.tsx
index 33a620cef346..732bc78e32fc 100644
--- a/examples/form-material-ui-use-drawer-form/src/pages/posts/list.tsx
+++ b/examples/form-material-ui-use-drawer-form/src/pages/posts/list.tsx
@@ -54,6 +54,7 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -69,6 +70,7 @@ export const PostList: React.FC = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return <EditButton hideText onClick={() => showEditDrawer(row.id)} />;
         },
@@ -83,7 +85,7 @@ export const PostList: React.FC = () => {
   return (
     <>
       <List createButtonProps={{ onClick: () => showCreateDrawer() }}>
-        <DataGrid {...dataGridProps} columns={columns} autoHeight />
+        <DataGrid {...dataGridProps} columns={columns} />
       </List>
       <CreatePostDrawer {...createDrawerFormProps} />
       <EditPostDrawer {...editDrawerFormProps} />
diff --git a/examples/form-material-ui-use-form/package.json b/examples/form-material-ui-use-form/package.json
index 93dae06ba036..b1413af03ce3 100644
--- a/examples/form-material-ui-use-form/package.json
+++ b/examples/form-material-ui-use-form/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/form-material-ui-use-form/src/pages/posts/list.tsx b/examples/form-material-ui-use-form/src/pages/posts/list.tsx
index 8da7958905e0..4444f5549ad7 100644
--- a/examples/form-material-ui-use-form/src/pages/posts/list.tsx
+++ b/examples/form-material-ui-use-form/src/pages/posts/list.tsx
@@ -35,6 +35,7 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -50,6 +51,7 @@ export const PostList: React.FC = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <div>
@@ -68,7 +70,7 @@ export const PostList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/form-material-ui-use-modal-form/package.json b/examples/form-material-ui-use-modal-form/package.json
index 6c2054fb6a63..732a0c3b7460 100644
--- a/examples/form-material-ui-use-modal-form/package.json
+++ b/examples/form-material-ui-use-modal-form/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/form-material-ui-use-modal-form/src/pages/posts/list.tsx b/examples/form-material-ui-use-modal-form/src/pages/posts/list.tsx
index ea988273affb..3e3e28badfa1 100644
--- a/examples/form-material-ui-use-modal-form/src/pages/posts/list.tsx
+++ b/examples/form-material-ui-use-modal-form/src/pages/posts/list.tsx
@@ -52,6 +52,7 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -67,6 +68,7 @@ export const PostList: React.FC = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return <EditButton hideText onClick={() => showEditModal(row.id)} />;
         },
@@ -81,7 +83,7 @@ export const PostList: React.FC = () => {
   return (
     <>
       <List createButtonProps={{ onClick: () => showCreateModal() }}>
-        <DataGrid {...dataGridProps} columns={columns} autoHeight />
+        <DataGrid {...dataGridProps} columns={columns} />
       </List>
       <CreatePostModal {...createModalFormProps} />
       <EditPostModal {...editModalFormProps} />
diff --git a/examples/form-material-ui-use-steps-form/package.json b/examples/form-material-ui-use-steps-form/package.json
index 03b84a13f1d1..ff4467ce63c3 100644
--- a/examples/form-material-ui-use-steps-form/package.json
+++ b/examples/form-material-ui-use-steps-form/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/form-material-ui-use-steps-form/src/pages/posts/list.tsx b/examples/form-material-ui-use-steps-form/src/pages/posts/list.tsx
index 61daf9f35add..0a6b0eddb2b9 100644
--- a/examples/form-material-ui-use-steps-form/src/pages/posts/list.tsx
+++ b/examples/form-material-ui-use-steps-form/src/pages/posts/list.tsx
@@ -37,6 +37,7 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoadingCategories) {
             return "Loading...";
@@ -52,6 +53,7 @@ export const PostList: React.FC = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return <EditButton hideText recordItemId={row.id} />;
         },
@@ -65,7 +67,7 @@ export const PostList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/import-export-material-ui/package.json b/examples/import-export-material-ui/package.json
index 6f844114c4c8..a5d1ef3390da 100644
--- a/examples/import-export-material-ui/package.json
+++ b/examples/import-export-material-ui/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/import-export-material-ui/src/pages/list.tsx b/examples/import-export-material-ui/src/pages/list.tsx
index adc3d07a3d14..20cfb09984f2 100644
--- a/examples/import-export-material-ui/src/pages/list.tsx
+++ b/examples/import-export-material-ui/src/pages/list.tsx
@@ -58,12 +58,13 @@ export const ImportList: React.FC = () => {
       {
         field: "category",
         headerName: "Category",
-        valueGetter: ({ row }) => {
+        valueGetter: (_, row) => {
           const value = row?.category?.id;
 
           return value;
         },
         minWidth: 300,
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryIsLoading ? (
             <>Loading...</>
diff --git a/examples/inferencer-material-ui/package.json b/examples/inferencer-material-ui/package.json
index a9d81007e044..b286dd5cb4ab 100644
--- a/examples/inferencer-material-ui/package.json
+++ b/examples/inferencer-material-ui/package.json
@@ -27,7 +27,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/inferencer": "^4.7.1",
diff --git a/examples/mern-dashboard-client/package.json b/examples/mern-dashboard-client/package.json
index 8ed69af683dc..831eccaf7001 100644
--- a/examples/mern-dashboard-client/package.json
+++ b/examples/mern-dashboard-client/package.json
@@ -28,7 +28,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/inferencer": "^4.7.1",
diff --git a/examples/refine-hr-ce/package.json b/examples/refine-hr-ce/package.json
index 7541744d063d..e51a640550d7 100644
--- a/examples/refine-hr-ce/package.json
+++ b/examples/refine-hr-ce/package.json
@@ -27,7 +27,7 @@
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
     "@mui/utils": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@mui/x-date-pickers": "^7.12.0",
     "@mui/x-date-pickers-pro": "^7.12.1",
     "@refinedev/cli": "^2.16.39",
diff --git a/examples/server-side-form-validation-material-ui/package.json b/examples/server-side-form-validation-material-ui/package.json
index 0db9fd2ce1c7..5450f67b5770 100644
--- a/examples/server-side-form-validation-material-ui/package.json
+++ b/examples/server-side-form-validation-material-ui/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/server-side-form-validation-material-ui/src/pages/posts/list.tsx b/examples/server-side-form-validation-material-ui/src/pages/posts/list.tsx
index 8da7958905e0..502e4af8d8af 100644
--- a/examples/server-side-form-validation-material-ui/src/pages/posts/list.tsx
+++ b/examples/server-side-form-validation-material-ui/src/pages/posts/list.tsx
@@ -35,6 +35,7 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -50,6 +51,7 @@ export const PostList: React.FC = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <div>
diff --git a/examples/table-material-ui-advanced/package.json b/examples/table-material-ui-advanced/package.json
index e38d07f226a6..cb6079e5bb15 100644
--- a/examples/table-material-ui-advanced/package.json
+++ b/examples/table-material-ui-advanced/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/table-material-ui-advanced/src/pages/dataGrid/index.tsx b/examples/table-material-ui-advanced/src/pages/dataGrid/index.tsx
index 303589c929a5..55776f0502e8 100644
--- a/examples/table-material-ui-advanced/src/pages/dataGrid/index.tsx
+++ b/examples/table-material-ui-advanced/src/pages/dataGrid/index.tsx
@@ -1,4 +1,4 @@
-import { type Option, useSelect } from "@refinedev/core";
+import { type BaseOption, useSelect } from "@refinedev/core";
 import { List, useDataGrid } from "@refinedev/mui";
 import React from "react";
 
@@ -7,7 +7,6 @@ import {
   GridActionsCellItem,
   type GridColDef,
   GridToolbar,
-  type GridValueFormatterParams,
 } from "@mui/x-data-grid";
 
 import type { ICategory, IPost } from "../../interfaces";
@@ -37,9 +36,7 @@ export const BasicDataGrid: React.FC = () => {
         flex: 1,
         type: "singleSelect",
         valueOptions: options,
-        valueFormatter: (params: GridValueFormatterParams<Option>) => {
-          return params.value;
-        },
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -83,7 +80,6 @@ export const BasicDataGrid: React.FC = () => {
         slots={{
           toolbar: GridToolbar,
         }}
-        autoHeight
       />
     </List>
   );
diff --git a/examples/table-material-ui-cursor-pagination/package.json b/examples/table-material-ui-cursor-pagination/package.json
index eee8551e4ed6..a764d4247ecd 100644
--- a/examples/table-material-ui-cursor-pagination/package.json
+++ b/examples/table-material-ui-cursor-pagination/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/table-material-ui-cursor-pagination/src/pages/posts/list.tsx b/examples/table-material-ui-cursor-pagination/src/pages/posts/list.tsx
index 1e5c58f65714..7e0a255326c3 100644
--- a/examples/table-material-ui-cursor-pagination/src/pages/posts/list.tsx
+++ b/examples/table-material-ui-cursor-pagination/src/pages/posts/list.tsx
@@ -34,6 +34,7 @@ export const PostList: React.FC = () => {
       flex: 1,
       filterable: false,
       sortable: false,
+      display: "flex",
       renderCell: ({ row }) => {
         return row.commit.message;
       },
@@ -45,6 +46,7 @@ export const PostList: React.FC = () => {
       flex: 1,
       filterable: false,
       sortable: false,
+      display: "flex",
       renderCell: ({ row }) => {
         return row.commit.author.name;
       },
@@ -56,6 +58,7 @@ export const PostList: React.FC = () => {
       flex: 1,
       filterable: false,
       sortable: false,
+      display: "flex",
       renderCell: ({ row }) => {
         return row.commit.author.date;
       },
@@ -76,7 +79,6 @@ export const PostList: React.FC = () => {
           dataGridProps.onPaginationModelChange?.(model, details);
         }}
         columns={columns}
-        autoHeight
       />
     </List>
   );
diff --git a/examples/table-material-ui-data-grid-pro/package.json b/examples/table-material-ui-data-grid-pro/package.json
index 8f1441b70229..9b610015728a 100644
--- a/examples/table-material-ui-data-grid-pro/package.json
+++ b/examples/table-material-ui-data-grid-pro/package.json
@@ -26,8 +26,8 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
-    "@mui/x-data-grid-pro": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
+    "@mui/x-data-grid-pro": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/table-material-ui-data-grid-pro/src/pages/posts/list.tsx b/examples/table-material-ui-data-grid-pro/src/pages/posts/list.tsx
index 023c1112140c..40d491debbbb 100644
--- a/examples/table-material-ui-data-grid-pro/src/pages/posts/list.tsx
+++ b/examples/table-material-ui-data-grid-pro/src/pages/posts/list.tsx
@@ -1,6 +1,5 @@
-import type { GridValueFormatterParams } from "@mui/x-data-grid";
 import { DataGridPro, type GridColDef } from "@mui/x-data-grid-pro";
-import { type Option, useSelect } from "@refinedev/core";
+import { type BaseOption, useSelect } from "@refinedev/core";
 import { List, useDataGrid } from "@refinedev/mui";
 import React from "react";
 
@@ -63,9 +62,7 @@ export const PostList: React.FC = () => {
         minWidth: 250,
         flex: 0.5,
         valueOptions: options,
-        valueFormatter: (params: GridValueFormatterParams<Option>) => {
-          return params.value;
-        },
+        display: "flex",
         renderCell: function render({ row }: any) {
           if (isLoading) {
             return "Loading...";
@@ -95,7 +92,6 @@ export const PostList: React.FC = () => {
       <DataGridPro
         {...dataGridProps}
         columns={columns}
-        autoHeight
         pageSizeOptions={[10, 20, 30, 50, 100]}
       />
     </List>
diff --git a/examples/table-material-ui-table-filter/package.json b/examples/table-material-ui-table-filter/package.json
index 232e133845cd..d4b6751cd242 100644
--- a/examples/table-material-ui-table-filter/package.json
+++ b/examples/table-material-ui-table-filter/package.json
@@ -27,7 +27,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/table-material-ui-table-filter/src/pages/posts/list.tsx b/examples/table-material-ui-table-filter/src/pages/posts/list.tsx
index 36c0a8bef036..4f6b5f634cd9 100644
--- a/examples/table-material-ui-table-filter/src/pages/posts/list.tsx
+++ b/examples/table-material-ui-table-filter/src/pages/posts/list.tsx
@@ -85,6 +85,7 @@ export const PostList: React.FC = () => {
       {
         field: "status",
         headerName: "Status",
+        display: "flex",
         renderCell: function render({ row }) {
           let color: ComponentProps<typeof TagField>["color"];
           switch (row.status) {
@@ -114,6 +115,7 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -261,7 +263,6 @@ export const PostList: React.FC = () => {
             columns={columns}
             disableColumnFilter={true}
             filterModel={undefined}
-            autoHeight
             pageSizeOptions={[10, 20, 50, 100]}
           />
         </List>
diff --git a/examples/table-material-ui-use-data-grid/package.json b/examples/table-material-ui-use-data-grid/package.json
index a94123cdb2a7..ffb49604b4e5 100644
--- a/examples/table-material-ui-use-data-grid/package.json
+++ b/examples/table-material-ui-use-data-grid/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/table-material-ui-use-data-grid/src/pages/posts/list.tsx b/examples/table-material-ui-use-data-grid/src/pages/posts/list.tsx
index bde50a7be03a..1f7f1a6761fa 100644
--- a/examples/table-material-ui-use-data-grid/src/pages/posts/list.tsx
+++ b/examples/table-material-ui-use-data-grid/src/pages/posts/list.tsx
@@ -1,12 +1,8 @@
-import { type Option, useSelect } from "@refinedev/core";
+import { type BaseOption, useSelect } from "@refinedev/core";
 import { List, useDataGrid } from "@refinedev/mui";
 import React from "react";
 
-import {
-  DataGrid,
-  type GridColDef,
-  type GridValueFormatterParams,
-} from "@mui/x-data-grid";
+import { DataGrid, type GridColDef } from "@mui/x-data-grid";
 
 import type { ICategory, IPost } from "../../interfaces";
 
@@ -62,9 +58,7 @@ export const PostList: React.FC = () => {
         minWidth: 250,
         flex: 0.5,
         valueOptions: options,
-        valueFormatter: (params: GridValueFormatterParams<Option>) => {
-          return params.value;
-        },
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -93,7 +87,6 @@ export const PostList: React.FC = () => {
       <DataGrid
         {...dataGridProps}
         columns={columns}
-        autoHeight
         pageSizeOptions={[10, 20, 30, 50, 100]}
       />
     </List>
diff --git a/examples/table-material-ui-use-delete-many/package.json b/examples/table-material-ui-use-delete-many/package.json
index bab3b4642092..f594e80dbce0 100644
--- a/examples/table-material-ui-use-delete-many/package.json
+++ b/examples/table-material-ui-use-delete-many/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/table-material-ui-use-delete-many/src/pages/posts/list.tsx b/examples/table-material-ui-use-delete-many/src/pages/posts/list.tsx
index 4d76acfeda3e..73a90457404f 100644
--- a/examples/table-material-ui-use-delete-many/src/pages/posts/list.tsx
+++ b/examples/table-material-ui-use-delete-many/src/pages/posts/list.tsx
@@ -1,4 +1,4 @@
-import { type Option, useDeleteMany, useSelect } from "@refinedev/core";
+import { type BaseOption, useDeleteMany, useSelect } from "@refinedev/core";
 import { List, useDataGrid } from "@refinedev/mui";
 import React from "react";
 
@@ -7,7 +7,6 @@ import {
   DataGrid,
   type GridColDef,
   type GridRowSelectionModel,
-  type GridValueFormatterParams,
 } from "@mui/x-data-grid";
 
 import type { ICategory, IPost } from "../../interfaces";
@@ -63,9 +62,7 @@ export const PostList: React.FC = () => {
         minWidth: 250,
         flex: 0.5,
         valueOptions: options,
-        valueFormatter: (params: GridValueFormatterParams<Option>) => {
-          return params.value;
-        },
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -108,7 +105,6 @@ export const PostList: React.FC = () => {
       <DataGrid
         {...dataGridProps}
         columns={columns}
-        autoHeight
         checkboxSelection
         onRowSelectionModelChange={(newSelectionModel) => {
           setSelectedRowKeys(newSelectionModel);
diff --git a/examples/table-material-ui-use-update-many/package.json b/examples/table-material-ui-use-update-many/package.json
index 3b890206e0d4..9c74ed80c0b3 100644
--- a/examples/table-material-ui-use-update-many/package.json
+++ b/examples/table-material-ui-use-update-many/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/table-material-ui-use-update-many/src/pages/posts/list.tsx b/examples/table-material-ui-use-update-many/src/pages/posts/list.tsx
index a860b1966afb..4228d24b914c 100644
--- a/examples/table-material-ui-use-update-many/src/pages/posts/list.tsx
+++ b/examples/table-material-ui-use-update-many/src/pages/posts/list.tsx
@@ -1,11 +1,10 @@
-import { type Option, useSelect, useUpdateMany } from "@refinedev/core";
+import { type BaseOption, useSelect, useUpdateMany } from "@refinedev/core";
 import { List, useDataGrid } from "@refinedev/mui";
 import React from "react";
 
 import Button from "@mui/material/Button";
 import {
   DataGrid,
-  type GridValueFormatterParams,
   type GridColDef,
   type GridRowSelectionModel,
 } from "@mui/x-data-grid";
@@ -64,9 +63,7 @@ export const PostList: React.FC = () => {
         minWidth: 250,
         flex: 0.5,
         valueOptions: options,
-        valueFormatter: (params: GridValueFormatterParams<Option>) => {
-          return params.value;
-        },
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -108,7 +105,6 @@ export const PostList: React.FC = () => {
       <DataGrid
         {...dataGridProps}
         columns={columns}
-        autoHeight
         checkboxSelection
         onRowSelectionModelChange={(newSelectionModel) => {
           setSelectedRowKeys(newSelectionModel);
diff --git a/examples/template-material-ui/package.json b/examples/template-material-ui/package.json
index 5be2a5be5b8d..19ca1bfd0eab 100644
--- a/examples/template-material-ui/package.json
+++ b/examples/template-material-ui/package.json
@@ -27,7 +27,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/theme-material-ui-demo/package.json b/examples/theme-material-ui-demo/package.json
index 16f528952a10..9c25a8f0ca78 100644
--- a/examples/theme-material-ui-demo/package.json
+++ b/examples/theme-material-ui-demo/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/theme-material-ui-demo/src/pages/posts/list.tsx b/examples/theme-material-ui-demo/src/pages/posts/list.tsx
index 019ac589494f..12e7adbd9c60 100644
--- a/examples/theme-material-ui-demo/src/pages/posts/list.tsx
+++ b/examples/theme-material-ui-demo/src/pages/posts/list.tsx
@@ -35,6 +35,7 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -50,6 +51,7 @@ export const PostList: React.FC = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return <EditButton hideText recordItemId={row.id} />;
         },
@@ -63,7 +65,7 @@ export const PostList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/tutorial-material-ui/package.json b/examples/tutorial-material-ui/package.json
index 2ae800770cb8..6132da84b640 100644
--- a/examples/tutorial-material-ui/package.json
+++ b/examples/tutorial-material-ui/package.json
@@ -27,7 +27,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/inferencer": "^4.7.1",
diff --git a/examples/tutorial-material-ui/src/pages/blog-posts/list.tsx b/examples/tutorial-material-ui/src/pages/blog-posts/list.tsx
index 85d4d2b59ab2..e7aaeba1611f 100644
--- a/examples/tutorial-material-ui/src/pages/blog-posts/list.tsx
+++ b/examples/tutorial-material-ui/src/pages/blog-posts/list.tsx
@@ -40,6 +40,7 @@ export const BlogPostList = () => {
         field: "content",
         headerName: "Content",
         minWidth: 250,
+        display: "flex",
         renderCell: function render({ value }) {
           return <MarkdownField value={`${(value ?? "").slice(0, 80)}...`} />;
         },
@@ -47,12 +48,13 @@ export const BlogPostList = () => {
       {
         field: "category",
         headerName: "Category",
-        valueGetter: ({ row }) => {
+        valueGetter: (_, row) => {
           const value = row?.category?.id;
 
           return value;
         },
         minWidth: 300,
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryIsLoading ? (
             <>Loading...</>
@@ -70,6 +72,7 @@ export const BlogPostList = () => {
         field: "createdAt",
         headerName: "Created At",
         minWidth: 250,
+        display: "flex",
         renderCell: function render({ value }) {
           return <DateField value={value} />;
         },
@@ -77,6 +80,7 @@ export const BlogPostList = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -98,7 +102,7 @@ export const BlogPostList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/upload-material-ui-base64/package.json b/examples/upload-material-ui-base64/package.json
index 82a40b82f73c..d65334682d7e 100644
--- a/examples/upload-material-ui-base64/package.json
+++ b/examples/upload-material-ui-base64/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/upload-material-ui-base64/src/pages/posts/list.tsx b/examples/upload-material-ui-base64/src/pages/posts/list.tsx
index d10800ccb6c1..c868f099789e 100644
--- a/examples/upload-material-ui-base64/src/pages/posts/list.tsx
+++ b/examples/upload-material-ui-base64/src/pages/posts/list.tsx
@@ -35,6 +35,7 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -50,6 +51,7 @@ export const PostList: React.FC = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return <EditButton hideText recordItemId={row.id} />;
         },
@@ -63,7 +65,7 @@ export const PostList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/upload-material-ui-multipart/package.json b/examples/upload-material-ui-multipart/package.json
index 107cf4682633..c273b337bbdf 100644
--- a/examples/upload-material-ui-multipart/package.json
+++ b/examples/upload-material-ui-multipart/package.json
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/mui": "^5.22.0",
diff --git a/examples/upload-material-ui-multipart/src/pages/posts/list.tsx b/examples/upload-material-ui-multipart/src/pages/posts/list.tsx
index d10800ccb6c1..c868f099789e 100644
--- a/examples/upload-material-ui-multipart/src/pages/posts/list.tsx
+++ b/examples/upload-material-ui-multipart/src/pages/posts/list.tsx
@@ -35,6 +35,7 @@ export const PostList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
+        display: "flex",
         renderCell: function render({ row }) {
           if (isLoading) {
             return "Loading...";
@@ -50,6 +51,7 @@ export const PostList: React.FC = () => {
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return <EditButton hideText recordItemId={row.id} />;
         },
@@ -63,7 +65,7 @@ export const PostList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/with-material-ui-vite/package.json b/examples/with-material-ui-vite/package.json
index 8155ce5ada79..95283ffbfd10 100644
--- a/examples/with-material-ui-vite/package.json
+++ b/examples/with-material-ui-vite/package.json
@@ -27,7 +27,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/devtools": "^1.2.9",
diff --git a/examples/with-material-ui-vite/src/pages/blog-posts/list.tsx b/examples/with-material-ui-vite/src/pages/blog-posts/list.tsx
index d1f39be21783..e2fcef6441ef 100644
--- a/examples/with-material-ui-vite/src/pages/blog-posts/list.tsx
+++ b/examples/with-material-ui-vite/src/pages/blog-posts/list.tsx
@@ -46,6 +46,7 @@ export const BlogPostList = () => {
         flex: 1,
         headerName: "content",
         minWidth: 250,
+        display: "flex",
         renderCell: function render({ value }) {
           if (!value) return "-";
           return <MarkdownField value={`${value?.slice(0, 80)}...` || ""} />;
@@ -56,10 +57,11 @@ export const BlogPostList = () => {
         flex: 1,
         headerName: "Category",
         minWidth: 300,
-        valueGetter: ({ row }) => {
+        valueGetter: (_, row) => {
           const value = row?.category;
           return value;
         },
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryIsLoading ? (
             <>Loading...</>
@@ -79,6 +81,7 @@ export const BlogPostList = () => {
         flex: 1,
         headerName: "Created at",
         minWidth: 250,
+        display: "flex",
         renderCell: function render({ value }) {
           return <DateField value={value} />;
         },
@@ -87,6 +90,7 @@ export const BlogPostList = () => {
         field: "actions",
         headerName: "Actions",
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -106,7 +110,7 @@ export const BlogPostList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/with-material-ui-vite/src/pages/categories/list.tsx b/examples/with-material-ui-vite/src/pages/categories/list.tsx
index 8b53548b5e08..e74090268efd 100644
--- a/examples/with-material-ui-vite/src/pages/categories/list.tsx
+++ b/examples/with-material-ui-vite/src/pages/categories/list.tsx
@@ -29,6 +29,7 @@ export const CategoryList = () => {
         field: "actions",
         headerName: "Actions",
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -48,7 +49,7 @@ export const CategoryList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/examples/with-remix-material-ui/package.json b/examples/with-remix-material-ui/package.json
index 8856460b82ae..4ca09a7fe9be 100644
--- a/examples/with-remix-material-ui/package.json
+++ b/examples/with-remix-material-ui/package.json
@@ -16,7 +16,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.56.0",
     "@refinedev/inferencer": "^4.7.1",
diff --git a/packages/chakra-ui/README.md b/packages/chakra-ui/README.md
index 99f9f395429b..3c0f8f17658f 100644
--- a/packages/chakra-ui/README.md
+++ b/packages/chakra-ui/README.md
@@ -137,6 +137,7 @@ export const ProductList = () => {
         field: "category",
         flex: 1,
         headerName: "Category",
+        display: "flex",
         renderCell: ({ value }) =>
           isLoading
             ? "Loading..."
@@ -146,6 +147,7 @@ export const ProductList = () => {
         field: "createdAt",
         flex: 1,
         headerName: "Created at",
+        display: "flex",
         renderCell: ({ value }) => <DateField value={value} />,
       },
     ],
diff --git a/packages/codemod/test/list.tsx b/packages/codemod/test/list.tsx
index e35955734bdd..70637f1becb2 100644
--- a/packages/codemod/test/list.tsx
+++ b/packages/codemod/test/list.tsx
@@ -28,7 +28,7 @@ export const PostsList: React.FC = () => {
         align: "left",
         minWidth: 250,
         flex: 0.5,
-        valueGetter: ({ row }) => {
+        valueGetter: (_, row) => {
           const { data } = useOne<ICategory>({
             resource: "categories",
             id: row.category.id,
diff --git a/packages/core/README.md b/packages/core/README.md
index 74b58eeb801b..1060fff0b302 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -138,6 +138,7 @@ export const ProductList = () => {
         field: "category",
         flex: 1,
         headerName: "Category",
+        display: "flex",
         renderCell: ({ value }) =>
           isLoading
             ? "Loading..."
@@ -147,6 +148,7 @@ export const ProductList = () => {
         field: "createdAt",
         flex: 1,
         headerName: "Created at",
+        display: "flex",
         renderCell: ({ value }) => <DateField value={value} />,
       },
     ],
@@ -155,7 +157,7 @@ export const ProductList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/packages/inferencer/package.json b/packages/inferencer/package.json
index 2289dc5dadc6..33bbfcfffa25 100644
--- a/packages/inferencer/package.json
+++ b/packages/inferencer/package.json
@@ -166,7 +166,7 @@
     "@mantine/notifications": "^5.10.4",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/antd": "^5.0.0",
     "@refinedev/chakra-ui": "^2.0.0",
     "@refinedev/core": "^4.54.0",
diff --git a/packages/inferencer/src/inferencers/mui/list.tsx b/packages/inferencer/src/inferencers/mui/list.tsx
index 1b4de0c28d48..139e9343893a 100644
--- a/packages/inferencer/src/inferencers/mui/list.tsx
+++ b/packages/inferencer/src/inferencers/mui/list.tsx
@@ -150,7 +150,7 @@ export const renderer = ({
 
       const valueGetterProperty =
         field.accessor && !field.multiple && !Array.isArray(field.accessor)
-          ? `valueGetter: ({ row }) => {
+          ? `valueGetter: (_, row) => {
             const value = ${accessor("row", field.key, field.accessor, false)};
 
             return value;
@@ -285,7 +285,7 @@ export const renderer = ({
 
       const valueGetterProperty =
         field.accessor && !field.multiple && !Array.isArray(field.accessor)
-          ? `valueGetter: ({ row }) => {
+          ? `valueGetter: (_, row) => {
             const value = ${accessor("row", field.key, field.accessor, false)};
 
             return value;
@@ -350,7 +350,7 @@ export const renderer = ({
 
       const valueGetterProperty =
         field.accessor && !field.multiple && !Array.isArray(field.accessor)
-          ? `valueGetter: ({ row }) => {
+          ? `valueGetter: (_, row) => {
             const value = ${accessor("row", field.key, field.accessor, false)};
 
             return value;
@@ -417,7 +417,7 @@ export const renderer = ({
 
       const valueGetterProperty =
         field.accessor && !field.multiple && !Array.isArray(field.accessor)
-          ? `valueGetter: ({ row }) => {
+          ? `valueGetter: (_, row) => {
             const value = ${accessor("row", field.key, field.accessor, false)};
 
             return value;
@@ -484,7 +484,7 @@ export const renderer = ({
 
       const valueGetterProperty =
         field.accessor && !field.multiple && !Array.isArray(field.accessor)
-          ? `valueGetter: ({ row }) => {
+          ? `valueGetter: (_, row)=> {
             const value = ${accessor("row", field.key, field.accessor, false)};
 
             return value;
@@ -549,7 +549,7 @@ export const renderer = ({
 
       const valueGetterProperty =
         field.accessor && !field.multiple && !Array.isArray(field.accessor)
-          ? `valueGetter: ({ row }) => {
+          ? `valueGetter: (_, row) => {
             const value = ${accessor("row", field.key, field.accessor, false)};
 
             return value;
@@ -604,7 +604,7 @@ export const renderer = ({
 
       const valueGetterProperty =
         field.accessor && !field.multiple && !Array.isArray(field.accessor)
-          ? `valueGetter: ({ row }) => {
+          ? `valueGetter: (_, row) => {
             const value = ${accessor("row", field.key, field.accessor, false)};
 
             return value;
@@ -658,7 +658,7 @@ export const renderer = ({
 
       const valueGetterProperty =
         field.accessor && !field.multiple && !Array.isArray(field.accessor)
-          ? `valueGetter: ({ row }) => {
+          ? `valueGetter: (_, row) => {
             const value = ${accessor("row", field.key, field.accessor, false)};
 
             return value;
diff --git a/packages/live-previews/package.json b/packages/live-previews/package.json
index c02b09fe7102..f56a565d227f 100644
--- a/packages/live-previews/package.json
+++ b/packages/live-previews/package.json
@@ -25,7 +25,7 @@
     "@mui/icons-material": "^6.1.6",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@react-keycloak/web": "^3.4.0",
     "@refinedev/airtable": "^4.4.5",
     "@refinedev/antd": "^5.43.0",
diff --git a/packages/mantine/README.md b/packages/mantine/README.md
index d3b407273cda..b99960de72df 100644
--- a/packages/mantine/README.md
+++ b/packages/mantine/README.md
@@ -135,6 +135,7 @@ export const ProductList = () => {
         field: "category",
         flex: 1,
         headerName: "Category",
+        display: "flex",
         renderCell: ({ value }) =>
           isLoading
             ? "Loading..."
@@ -144,6 +145,7 @@ export const ProductList = () => {
         field: "createdAt",
         flex: 1,
         headerName: "Created at",
+        display: "flex",
         renderCell: ({ value }) => <DateField value={value} />,
       },
     ],
diff --git a/packages/mui/README.md b/packages/mui/README.md
index 16d721f2375f..82f40bd50756 100644
--- a/packages/mui/README.md
+++ b/packages/mui/README.md
@@ -135,6 +135,7 @@ export const ProductList = () => {
         field: "category",
         flex: 1,
         headerName: "Category",
+        display: "flex",
         renderCell: ({ value }) =>
           isLoading
             ? "Loading..."
@@ -144,6 +145,7 @@ export const ProductList = () => {
         field: "createdAt",
         flex: 1,
         headerName: "Created at",
+        display: "flex",
         renderCell: ({ value }) => <DateField value={value} />,
       },
     ],
@@ -152,7 +154,7 @@ export const ProductList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
diff --git a/packages/mui/package.json b/packages/mui/package.json
index 313aa8d04614..c66dd2638f5a 100644
--- a/packages/mui/package.json
+++ b/packages/mui/package.json
@@ -37,7 +37,7 @@
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
     "@mui/system": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/react-hook-form": "^4.9.1",
     "@refinedev/ui-types": "^1.22.9",
     "dayjs": "^1.10.7",
@@ -80,7 +80,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
-    "@mui/x-data-grid": "^6.6.0",
+    "@mui/x-data-grid": "^7.22.2",
     "@refinedev/core": "^4.46.1",
     "@refinedev/react-hook-form": "^4.0.0",
     "dayjs": "^1.10.7",
diff --git a/packages/mui/src/hooks/useDataGrid/index.ts b/packages/mui/src/hooks/useDataGrid/index.ts
index 1b37a5686f40..f48f2067c8f1 100644
--- a/packages/mui/src/hooks/useDataGrid/index.ts
+++ b/packages/mui/src/hooks/useDataGrid/index.ts
@@ -21,8 +21,6 @@ import type {
   GridSortModel,
 } from "@mui/x-data-grid";
 
-import { darken, useTheme } from "@mui/material/styles";
-
 import differenceWith from "lodash/differenceWith";
 import isEqual from "lodash/isEqual";
 
@@ -48,10 +46,10 @@ type DataGridPropsType = Required<
     | "onSortModelChange"
     | "filterMode"
     | "onFilterModelChange"
-    | "sx"
     | "disableRowSelectionOnClick"
     | "onStateChange"
     | "paginationMode"
+    | "filterDebounceMs"
   >
 > &
   Pick<
@@ -162,7 +160,6 @@ export function useDataGrid<
   TSearchVariables,
   TData
 > = {}): UseDataGridReturnType<TData, TError, TSearchVariables> {
-  const theme = useTheme();
   const liveMode = useLiveMode(liveModeFromProp);
 
   const [columnsTypes, setColumnsType] = useState<Record<string, string>>();
@@ -352,23 +349,8 @@ export function useDataGrid<
           setColumnsType(newColumnsTypes);
         }
       },
-      sx: {
-        border: "none",
-        "& .MuiDataGrid-columnHeaders": {
-          background: darken(theme.palette.background.paper, 0.05),
-          borderBottom: `1px solid ${darken(
-            theme.palette.background.paper,
-            0.1,
-          )}`,
-        },
-        "& .MuiDataGrid-cell": {
-          borderBottom: `1px solid ${darken(
-            theme.palette.background.paper,
-            0.05,
-          )}`,
-        },
-      },
       processRowUpdate: editable ? processRowUpdate : undefined,
+      filterDebounceMs: 300,
     },
     current,
     setCurrent,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 892d59a65dbb..458e2f917a9e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -934,8 +934,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -1288,8 +1288,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -1693,8 +1693,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -1778,8 +1778,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -2088,8 +2088,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -2896,8 +2896,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -3202,8 +3202,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -4422,8 +4422,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -5399,8 +5399,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -5660,8 +5660,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -6733,8 +6733,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -6803,8 +6803,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -6870,8 +6870,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -6937,8 +6937,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -7004,8 +7004,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -7553,8 +7553,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -8060,8 +8060,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -8447,8 +8447,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -8791,8 +8791,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@types/react@18.3.0)(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-date-pickers':
         specifier: ^7.12.0
         version: 7.19.0(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(date-fns@2.30.0)(dayjs@1.11.10)(luxon@3.4.4)(moment@2.30.1)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
@@ -9187,8 +9187,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -9298,10 +9298,10 @@ importers:
         version: 2.0.1(react-dom@18.3.0(react@18.3.0))(react-hook-form@7.51.3(react@18.3.0))(react@18.3.0)
       '@medusajs/medusa':
         specifier: ^1.3.5
-        version: 1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)
+        version: 1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)
       '@medusajs/medusa-js':
         specifier: 1.3.3
-        version: 1.3.3(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)
+        version: 1.3.3(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.0.1
         version: 2.0.6(@types/react-dom@18.3.0)(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
@@ -9352,7 +9352,7 @@ importers:
         version: 4.17.21
       medusa-react:
         specifier: ^0.3.5
-        version: 0.3.6(@medusajs/medusa@1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12))(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)(react-query@3.39.3(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(react@18.3.0)
+        version: 0.3.6(@medusajs/medusa@1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12))(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)(react-query@3.39.3(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(react@18.3.0)
       next:
         specifier: ^14.1.0
         version: 14.2.3(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(sass@1.75.0)
@@ -10068,8 +10068,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -10144,8 +10144,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -10205,11 +10205,11 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid-pro':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -10275,8 +10275,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -10342,8 +10342,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -10406,8 +10406,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -10470,8 +10470,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -10936,8 +10936,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -11195,8 +11195,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -11572,8 +11572,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -12026,8 +12026,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -12093,8 +12093,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -12496,8 +12496,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -13096,8 +13096,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/cli':
         specifier: ^2.16.39
         version: link:../../packages/cli
@@ -13302,7 +13302,7 @@ importers:
     devDependencies:
       '@esbuild-plugins/node-resolve':
         specifier: ^0.1.4
-        version: 0.1.4(esbuild@0.17.19)
+        version: 0.1.4(esbuild@0.20.2)
       '@refinedev/core':
         specifier: ^4.52.0
         version: link:../core
@@ -13320,7 +13320,7 @@ importers:
         version: 13.5.4
       ts-jest:
         specifier: ^29.1.2
-        version: 29.1.2(@babel/core@7.24.4)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.4))(esbuild@0.17.19)(jest@29.7.0(@types/node@20.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.4.5)))(typescript@5.4.5)
+        version: 29.1.2(@babel/core@7.24.4)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.4))(esbuild@0.20.2)(jest@29.7.0(@types/node@20.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.4.5)))(typescript@5.4.5)
       tslib:
         specifier: ^2.6.2
         version: 2.6.2
@@ -13348,7 +13348,7 @@ importers:
     devDependencies:
       '@esbuild-plugins/node-resolve':
         specifier: ^0.1.4
-        version: 0.1.4(esbuild@0.20.2)
+        version: 0.1.4(esbuild@0.17.19)
       '@refinedev/core':
         specifier: 4.56.0
         version: link:../core
@@ -13366,7 +13366,7 @@ importers:
         version: 13.5.4
       ts-jest:
         specifier: ^29.1.2
-        version: 29.1.2(@babel/core@7.24.4)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.4))(esbuild@0.20.2)(jest@29.7.0(@types/node@20.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.4.5)))(typescript@5.4.5)
+        version: 29.1.2(@babel/core@7.24.4)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.4))(esbuild@0.17.19)(jest@29.7.0(@types/node@20.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.4.5)))(typescript@5.4.5)
       tslib:
         specifier: ^2.6.2
         version: 2.6.2
@@ -14687,8 +14687,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/core':
         specifier: ^4.56.0
         version: link:../core
@@ -14929,8 +14929,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@react-keycloak/web':
         specifier: ^3.4.0
         version: 3.4.0(keycloak-js@25.0.1)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)(typescript@5.4.5)
@@ -15280,8 +15280,8 @@ importers:
         specifier: ^6.1.6
         version: 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0)
       '@mui/x-data-grid':
-        specifier: ^6.6.0
-        version: 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+        specifier: ^7.22.2
+        version: 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@refinedev/react-hook-form':
         specifier: ^4.9.1
         version: link:../react-hook-form
@@ -19901,16 +19901,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/utils@5.15.14':
-    resolution: {integrity: sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@mui/utils@5.16.6':
     resolution: {integrity: sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==}
     engines: {node: '>=12.0.0'}
@@ -19931,23 +19921,37 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/x-data-grid-pro@6.19.11':
-    resolution: {integrity: sha512-Kttf9+J8qZ4hINfA+Aj/P0WL/KSItsDZW4sVIjF5Eb+lra3VGwvTNAsvT28OCcvg+dIzk4MVksGXklA7871GqA==}
+  '@mui/x-data-grid-pro@7.22.2':
+    resolution: {integrity: sha512-i6GlRDzP0ySqKUxuPo3rw3L8AZkXUvU3xuoHd+Cpi5OJoQWyrOG2IkTjj3weyemFkUcaJZU5r8hDBD5WjEyguQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@mui/material': ^5.4.1
-      '@mui/system': ^5.4.1
+      '@emotion/react': ^11.9.0
+      '@emotion/styled': ^11.8.1
+      '@mui/material': ^5.15.14 || ^6.0.0
+      '@mui/system': ^5.15.14 || ^6.0.0
       react: ^17.0.0 || ^18.0.0
       react-dom: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
 
-  '@mui/x-data-grid@6.19.11':
-    resolution: {integrity: sha512-QsUp2cPkjUm8vyTR5gYWuCFqxspljOzElbCm412wzvMTJSKaB0kz7CEecFhxjlsMjQ8B7kY8oDF3LXjjucFcPQ==}
+  '@mui/x-data-grid@7.22.2':
+    resolution: {integrity: sha512-yfy2s5A6tbajQZiEdsba49T4FYb9F0WPrzbbG30dl1+sIiX4ZRX7ma44UIDGPZrsZv8xkkE+p8qeJxZ7OaMteA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@mui/material': ^5.4.1
-      '@mui/system': ^5.4.1
+      '@emotion/react': ^11.9.0
+      '@emotion/styled': ^11.8.1
+      '@mui/material': ^5.15.14 || ^6.0.0
+      '@mui/system': ^5.15.14 || ^6.0.0
       react: ^17.0.0 || ^18.0.0
       react-dom: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
 
   '@mui/x-date-pickers-pro@7.19.0':
     resolution: {integrity: sha512-stwb7QnUxIyjlyPIP2FRb1Bx20ldodA8wld8FNJxbFZlEVB6NgY1Dcf3Wm0blrECglIY4xlJ4Xl8QNsNU1d0fA==}
@@ -20029,10 +20033,9 @@ packages:
     peerDependencies:
       react: ^17.0.0 || ^18.0.0
 
-  '@mui/x-license-pro@6.10.2':
-    resolution: {integrity: sha512-Baw3shilU+eHgU+QYKNPFUKvfS5rSyNJ98pQx02E0gKA22hWp/XAt88K1qUfUMPlkPpvg/uci6gviQSSLZkuKw==}
+  '@mui/x-internals@7.21.0':
+    resolution: {integrity: sha512-94YNyZ0BhK5Z+Tkr90RKf47IVCW8R/1MvdUhh6MCQg6sZa74jsX+x+gEZ4kzuCqOsuyTyxikeQ8vVuCIQiP7UQ==}
     engines: {node: '>=14.0.0'}
-    deprecated: In MUI X v7 the name of this package changed to @mui/x-license to reflect the existence of the premium plan.
     peerDependencies:
       react: ^17.0.0 || ^18.0.0
 
@@ -20042,6 +20045,12 @@ packages:
     peerDependencies:
       react: ^17.0.0 || ^18.0.0
 
+  '@mui/x-license@7.21.0':
+    resolution: {integrity: sha512-w48L2XQxlSdvld4E5s6pjZ5HPjtqERNun21FQtQJlodLB0JUt8pigseyC8N3X40j+Mw0Atg7UKNhf6OK/MbQ1A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0
+
   '@nestjsx/crud-request@5.0.0-alpha.3':
     resolution: {integrity: sha512-EFeGgh/sSHhD3px9aj4hyjvOqBepMcRFAi5lrYuSUDmnj/eQOa4dg4orehU8gKrSAmgKNe9r0dx0kel7Zgivzg==}
 
@@ -32864,8 +32873,8 @@ packages:
   requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
-  reselect@4.1.8:
-    resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==}
+  reselect@5.1.1:
+    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
 
   resize-observer-polyfill@1.5.1:
     resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
@@ -41065,13 +41074,13 @@ snapshots:
       - supports-color
       - tedious
 
-  '@medusajs/link-modules@0.2.10(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/node@18.19.31)(pg@8.11.5)':
+  '@medusajs/link-modules@0.2.10(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/node@18.19.31)(pg@8.11.5)':
     dependencies:
       '@medusajs/modules-sdk': 1.12.10(@types/node@18.19.31)
       '@medusajs/types': 1.11.15
       '@medusajs/utils': 1.11.8(@types/node@18.19.31)(pg@8.11.5)
-      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7)
-      '@mikro-orm/postgresql': 5.9.7(@mikro-orm/core@5.9.7)(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))
+      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7)
+      '@mikro-orm/postgresql': 5.9.7(@mikro-orm/core@5.9.7)(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))
       awilix: 8.0.1
     transitivePeerDependencies:
       - '@mikro-orm/better-sqlite'
@@ -41144,9 +41153,9 @@ snapshots:
       - supports-color
       - tedious
 
-  '@medusajs/medusa-js@1.3.3(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)':
+  '@medusajs/medusa-js@1.3.3(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)':
     dependencies:
-      '@medusajs/medusa': 1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)
+      '@medusajs/medusa': 1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)
       axios: 0.24.0
       form-data: 4.0.0
       qs: 6.12.1
@@ -41178,10 +41187,10 @@ snapshots:
       - tedious
       - typeorm
 
-  '@medusajs/medusa@1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)':
+  '@medusajs/medusa@1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)':
     dependencies:
       '@medusajs/core-flows': 0.0.8(@types/node@18.19.31)(pg@8.11.5)
-      '@medusajs/link-modules': 0.2.10(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/node@18.19.31)(pg@8.11.5)
+      '@medusajs/link-modules': 0.2.10(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/node@18.19.31)(pg@8.11.5)
       '@medusajs/medusa-cli': 1.3.22(@types/node@18.19.31)
       '@medusajs/modules-sdk': 1.12.10(@types/node@18.19.31)
       '@medusajs/orchestration': 0.5.6(@types/node@18.19.31)(pg@8.11.5)
@@ -41213,7 +41222,7 @@ snapshots:
       medusa-core-utils: 1.2.1
       medusa-interfaces: 1.3.9
       medusa-telemetry: 0.0.17
-      medusa-test-utils: 1.1.43(@medusajs/medusa@1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12))(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(axios@0.24.0)(express@4.21.0)(get-port@5.1.1)(pg-god@1.0.12)(pg@8.11.5)
+      medusa-test-utils: 1.1.43(@medusajs/medusa@1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12))(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(axios@0.24.0)(express@4.21.0)(get-port@5.1.1)(pg-god@1.0.12)(pg@8.11.5)
       morgan: 1.10.0
       multer: 1.4.5-lts.1
       node-schedule: 2.1.1
@@ -41320,9 +41329,9 @@ snapshots:
   '@medusajs/utils@1.11.8(@types/node@18.19.31)(pg@8.11.5)':
     dependencies:
       '@medusajs/types': 1.11.15
-      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7)
+      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7)
       '@mikro-orm/migrations': 5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5)
-      '@mikro-orm/postgresql': 5.9.7(@mikro-orm/core@5.9.7)(@mikro-orm/migrations@5.9.7)
+      '@mikro-orm/postgresql': 5.9.7(@mikro-orm/core@5.9.7)(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))
       awilix: 8.0.1
       bignumber.js: 9.1.2
       knex: 2.4.2(pg@8.11.5)
@@ -41374,7 +41383,7 @@ snapshots:
       - supports-color
       - tedious
 
-  '@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7)':
+  '@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7)':
     dependencies:
       acorn-loose: 8.3.0
       acorn-walk: 8.2.0
@@ -41384,67 +41393,26 @@ snapshots:
       mikro-orm: 5.9.7
       reflect-metadata: 0.1.13
     optionalDependencies:
-      '@mikro-orm/migrations': 5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5)
-      '@mikro-orm/postgresql': 5.9.7(@mikro-orm/core@5.9.7)(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))
-
-  '@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7)':
-    dependencies:
-      acorn-loose: 8.3.0
-      acorn-walk: 8.2.0
-      dotenv: 16.3.1
-      fs-extra: 11.1.1
-      globby: 11.1.0
-      mikro-orm: 5.9.7
-      reflect-metadata: 0.1.13
-    optionalDependencies:
-      '@mikro-orm/migrations': 5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5)
-      '@mikro-orm/postgresql': 5.9.7(@mikro-orm/core@5.9.7)(@mikro-orm/migrations@5.9.7)
-
-  '@mikro-orm/knex@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(pg@8.11.3)':
-    dependencies:
-      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7)
-      fs-extra: 11.1.1
-      knex: 2.5.1(pg@8.11.3)
-      sqlstring: 2.3.3
-    optionalDependencies:
-      '@mikro-orm/migrations': 5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5)
-      pg: 8.11.3
-    transitivePeerDependencies:
-      - pg-native
-      - supports-color
-      - tedious
+      '@mikro-orm/migrations': 5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5)
+      '@mikro-orm/postgresql': 5.9.7(@mikro-orm/core@5.9.7)(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))
 
-  '@mikro-orm/knex@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(pg@8.11.3)':
+  '@mikro-orm/knex@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(pg@8.11.3)':
     dependencies:
-      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7)
+      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7)
       fs-extra: 11.1.1
       knex: 2.5.1(pg@8.11.3)
       sqlstring: 2.3.3
     optionalDependencies:
-      '@mikro-orm/migrations': 5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5)
+      '@mikro-orm/migrations': 5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5)
       pg: 8.11.3
     transitivePeerDependencies:
       - pg-native
       - supports-color
       - tedious
 
-  '@mikro-orm/knex@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(pg@8.11.5)':
-    dependencies:
-      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7)
-      fs-extra: 11.1.1
-      knex: 2.5.1(pg@8.11.5)
-      sqlstring: 2.3.3
-    optionalDependencies:
-      '@mikro-orm/migrations': 5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5)
-      pg: 8.11.5
-    transitivePeerDependencies:
-      - pg-native
-      - supports-color
-      - tedious
-
   '@mikro-orm/knex@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(pg@8.11.5)':
     dependencies:
-      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7)
+      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7)
       fs-extra: 11.1.1
       knex: 2.5.1(pg@8.11.5)
       sqlstring: 2.3.3
@@ -41456,29 +41424,9 @@ snapshots:
       - supports-color
       - tedious
 
-  '@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5)':
-    dependencies:
-      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7)
-      '@mikro-orm/knex': 5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(pg@8.11.5)
-      fs-extra: 11.1.1
-      knex: 2.5.1(pg@8.11.5)
-      umzug: 3.3.1(@types/node@18.19.31)
-    transitivePeerDependencies:
-      - '@mikro-orm/entity-generator'
-      - '@types/node'
-      - better-sqlite3
-      - mssql
-      - mysql
-      - mysql2
-      - pg
-      - pg-native
-      - sqlite3
-      - supports-color
-      - tedious
-
   '@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5)':
     dependencies:
-      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7)
+      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7)
       '@mikro-orm/knex': 5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(pg@8.11.5)
       fs-extra: 11.1.1
       knex: 2.5.1(pg@8.11.5)
@@ -41496,30 +41444,13 @@ snapshots:
       - supports-color
       - tedious
 
-  '@mikro-orm/postgresql@5.9.7(@mikro-orm/core@5.9.7)(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))':
-    dependencies:
-      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7)
-      '@mikro-orm/knex': 5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(pg@8.11.3)
-      pg: 8.11.3
-    optionalDependencies:
-      '@mikro-orm/migrations': 5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5)
-    transitivePeerDependencies:
-      - better-sqlite3
-      - mssql
-      - mysql
-      - mysql2
-      - pg-native
-      - sqlite3
-      - supports-color
-      - tedious
-
-  '@mikro-orm/postgresql@5.9.7(@mikro-orm/core@5.9.7)(@mikro-orm/migrations@5.9.7)':
+  '@mikro-orm/postgresql@5.9.7(@mikro-orm/core@5.9.7)(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))':
     dependencies:
-      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7)
-      '@mikro-orm/knex': 5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(pg@8.11.3)
+      '@mikro-orm/core': 5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7)
+      '@mikro-orm/knex': 5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(pg@8.11.3)
       pg: 8.11.3
     optionalDependencies:
-      '@mikro-orm/migrations': 5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5)
+      '@mikro-orm/migrations': 5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5)
     transitivePeerDependencies:
       - better-sqlite3
       - mssql
@@ -41701,16 +41632,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.0
 
-  '@mui/utils@5.15.14(@types/react@18.3.0)(react@18.3.0)':
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@types/prop-types': 15.7.12
-      prop-types: 15.8.1
-      react: 18.3.0
-      react-is: 18.3.0
-    optionalDependencies:
-      '@types/react': 18.3.0
-
   '@mui/utils@5.16.6(@types/react@18.3.0)(react@18.3.0)':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -41735,34 +41656,42 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.0
 
-  '@mui/x-data-grid-pro@6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
+  '@mui/x-data-grid-pro@7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
       '@mui/material': 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/system': 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0)
-      '@mui/utils': 5.16.6(@types/react@18.3.0)(react@18.3.0)
-      '@mui/x-data-grid': 6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
-      '@mui/x-license-pro': 6.10.2(@types/react@18.3.0)(react@18.3.0)
+      '@mui/utils': 6.1.6(@types/react@18.3.0)(react@18.3.0)
+      '@mui/x-data-grid': 7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
+      '@mui/x-internals': 7.21.0(@types/react@18.3.0)(react@18.3.0)
+      '@mui/x-license': 7.21.0(@types/react@18.3.0)(react@18.3.0)
       '@types/format-util': 1.0.4
       clsx: 2.1.1
       prop-types: 15.8.1
       react: 18.3.0
       react-dom: 18.3.0(react@18.3.0)
-      reselect: 4.1.8
+      reselect: 5.1.1
+    optionalDependencies:
+      '@emotion/react': 11.11.4(@types/react@18.3.0)(react@18.3.0)
+      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0)
     transitivePeerDependencies:
       - '@types/react'
 
-  '@mui/x-data-grid@6.19.11(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
+  '@mui/x-data-grid@7.22.2(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@mui/material@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(@mui/system@6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
       '@mui/material': 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react-dom@18.3.0(react@18.3.0))(react@18.3.0)
       '@mui/system': 6.1.6(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0)
-      '@mui/utils': 5.15.14(@types/react@18.3.0)(react@18.3.0)
+      '@mui/utils': 6.1.6(@types/react@18.3.0)(react@18.3.0)
+      '@mui/x-internals': 7.21.0(@types/react@18.3.0)(react@18.3.0)
       clsx: 2.1.1
       prop-types: 15.8.1
       react: 18.3.0
       react-dom: 18.3.0(react@18.3.0)
-      reselect: 4.1.8
+      reselect: 5.1.1
+    optionalDependencies:
+      '@emotion/react': 11.11.4(@types/react@18.3.0)(react@18.3.0)
+      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.0)(react@18.3.0))(@types/react@18.3.0)(react@18.3.0)
     transitivePeerDependencies:
       - '@types/react'
 
@@ -41821,10 +41750,10 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@mui/x-license-pro@6.10.2(@types/react@18.3.0)(react@18.3.0)':
+  '@mui/x-internals@7.21.0(@types/react@18.3.0)(react@18.3.0)':
     dependencies:
       '@babel/runtime': 7.26.0
-      '@mui/utils': 5.16.6(@types/react@18.3.0)(react@18.3.0)
+      '@mui/utils': 6.1.6(@types/react@18.3.0)(react@18.3.0)
       react: 18.3.0
     transitivePeerDependencies:
       - '@types/react'
@@ -41837,6 +41766,14 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
+  '@mui/x-license@7.21.0(@types/react@18.3.0)(react@18.3.0)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/utils': 6.1.6(@types/react@18.3.0)(react@18.3.0)
+      react: 18.3.0
+    transitivePeerDependencies:
+      - '@types/react'
+
   '@nestjsx/crud-request@5.0.0-alpha.3':
     dependencies:
       '@nestjsx/util': 5.0.0-alpha.3
@@ -54843,10 +54780,10 @@ snapshots:
 
   medusa-interfaces@1.3.9: {}
 
-  medusa-react@0.3.6(@medusajs/medusa@1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12))(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)(react-query@3.39.3(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(react@18.3.0):
+  medusa-react@0.3.6(@medusajs/medusa@1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12))(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)(react-query@3.39.3(react-dom@18.3.0(react@18.3.0))(react@18.3.0))(react@18.3.0):
     dependencies:
-      '@medusajs/medusa': 1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)
-      '@medusajs/medusa-js': 1.3.3(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)
+      '@medusajs/medusa': 1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)
+      '@medusajs/medusa-js': 1.3.3(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)
       lodash: 4.17.21
       lodash-es: 4.17.21
       react: 18.3.0
@@ -54893,16 +54830,16 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  medusa-test-utils@1.1.43(@medusajs/medusa@1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12))(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(axios@0.24.0)(express@4.21.0)(get-port@5.1.1)(pg-god@1.0.12)(pg@8.11.5):
+  medusa-test-utils@1.1.43(@medusajs/medusa@1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12))(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(axios@0.24.0)(express@4.21.0)(get-port@5.1.1)(pg-god@1.0.12)(pg@8.11.5):
     dependencies:
       '@medusajs/modules-sdk': 1.12.10(@types/node@18.19.31)
       '@medusajs/utils': 1.11.8(@types/node@18.19.31)(pg@8.11.5)
-      '@mikro-orm/migrations': 5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5)
-      '@mikro-orm/postgresql': 5.9.7(@mikro-orm/core@5.9.7)(@mikro-orm/migrations@5.9.7)
+      '@mikro-orm/migrations': 5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5)
+      '@mikro-orm/postgresql': 5.9.7(@mikro-orm/core@5.9.7)(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))
       medusa-core-utils: 1.2.1
       randomatic: 3.1.1
     optionalDependencies:
-      '@medusajs/medusa': 1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)
+      '@medusajs/medusa': 1.20.4(@mikro-orm/core@5.9.7(@mikro-orm/migrations@5.9.7)(@mikro-orm/postgresql@5.9.7))(@mikro-orm/migrations@5.9.7(@mikro-orm/core@5.9.7)(@types/node@18.19.31)(pg@8.11.5))(@types/ioredis-mock@8.2.5)(@types/node@18.19.31)(axios@0.24.0)(get-port@5.1.1)(medusa-interfaces@1.3.9)(pg-god@1.0.12)
       axios: 0.24.0
       express: 4.21.0
       get-port: 5.1.1
@@ -59502,7 +59439,7 @@ snapshots:
 
   requires-port@1.0.0: {}
 
-  reselect@4.1.8: {}
+  reselect@5.1.1: {}
 
   resize-observer-polyfill@1.5.1: {}