feat: Upgrade Material IU to v6

.changeset/chilly-lobsters-juggle.md

@@ -0,0 +1,26 @@
+---
+"@refinedev/inferencer": major
+---
+
+feat: added support for Material UI v6 and X Data Grid v7
+
+```diff
+- "@mui/icons-material": "^5.8.3",
++ "@mui/icons-material": "^6.1.6",
+- "@mui/lab": "^5.0.0-alpha.85",
++ "@mui/lab": "^6.0.0-beta.14",
+- "@mui/material": "^5.14.2",
++ "@mui/material": "^6.1.7",
+
+- "@mui/x-data-grid": "^6.6.0",
++ "@mui/x-data-grid": "^7.22.2",
+```
+
+Here is the updated version alignment:
+
+| @refinedev/mui | @mui/x-data-grid | @mui/material | @mui/system | @mui/lab | @mui/icons-material | @refinedev/inferencer |
+| -------------- | ---------------- | ------------- | ----------- | -------- | ------------------- | --------------------- |
+| 5.x.x          | 6.x.x            | 5.x.x         | 5.x.x       | 5.x.x    | 5.x.x               | 4.x.x                 |
+| 6.x.x          | 7.x.x            | 6.x.x         | 6.x.x       | 6.x.x    | 6.x.x               | 5.x.x                 |
+
+Please refer to the [Migration Guide for Material UI v6 and X Data Grid v7](https://refine.dev/docs/ui-integrations/material-ui/migration-guide/material-ui-v5-to-v6) for more information.

.changeset/rare-actors-pull.md

@@ -0,0 +1,28 @@
+---
+"@refinedev/mui": major
+---
+
+feat: added support for Material UI v6 and X Data Grid v7 #6333
+
+```diff
+- "@mui/icons-material": "^5.8.3",
++ "@mui/icons-material": "^6.1.6",
+- "@mui/lab": "^5.0.0-alpha.85",
++ "@mui/lab": "^6.0.0-beta.14",
+- "@mui/material": "^5.14.2",
++ "@mui/material": "^6.1.7",
+
+- "@mui/x-data-grid": "^6.6.0",
++ "@mui/x-data-grid": "^7.22.2",
+```
+
+Here is the updated version alignment:
+
+| @refinedev/mui | @mui/x-data-grid | @mui/material | @mui/system | @mui/lab | @mui/icons-material | @refinedev/inferencer |
+| -------------- | ---------------- | ------------- | ----------- | -------- | ------------------- | --------------------- |
+| 5.x.x          | 6.x.x            | 5.x.x         | 5.x.x       | 5.x.x    | 5.x.x               | 4.x.x                 |
+| 6.x.x          | 7.x.x            | 6.x.x         | 6.x.x       | 6.x.x    | 6.x.x               | 5.x.x                 |
+
+Please refer to the [Migration Guide for Material UI v6 and X Data Grid v7](https://refine.dev/docs/ui-integrations/material-ui/migration-guide/material-ui-v5-to-v6) for more information.
+
+Resolves [#6333](https://github.com/refinedev/refine/issues/6333)

cypress/e2e/form-material-ui-use-drawer-form/all.cy.ts

@@ -88,14 +88,12 @@ describe("form-material-ui-use-drawer-form", () => {
       "modal-posts-create[open]=true",
     );
   });
-
   it("should create record", () => {
     cy.getCreateButton().click();
     isDrawerOpen();
 
     fillForm();
     submitForm();
-    cy.getSaveButton().should("be.disabled");
 
     cy.wait("@postPost").then((interception) => {
       const response = interception?.response;

cypress/e2e/table-material-ui-advanced/data-grid.cy.ts

@@ -9,33 +9,89 @@ describe("table-material-ui-advanced", () => {
   });
 
   it("should work with filter", () => {
+    // wait for loading
+    cy.wait("@getPosts");
     cy.getMaterialUILoadingCircular().should("not.exist");
 
+    // open the column menu of title
     cy.getMaterialUIColumnHeader(2).within(() =>
       cy.get(".MuiDataGrid-menuIcon > button").click({ force: true }),
     );
-
+    // click the filter menu item
     cy.get(".MuiDataGrid-menu > div > .MuiList-root").children().eq(3).click();
-
-    cy.intercept(
-      {
-        url: "/posts*",
-        query: {
-          title_like: "lorem",
-        },
-      },
-      {
-        fixture: "posts.json",
-      },
-    ).as("getFilteredPosts");
-
+    // type the filter value
     cy.get("[placeholder='Filter value']").type("lorem");
-
+    // url should contain the filter
     cy.url().should(
       "include",
       "filters[0][field]=title&filters[0][value]=lorem&filters[0][operator]=contains",
     );
+    // request should have filter
+    cy.wait("@getPosts").then((interception) => {
+      const request = interception.request;
+      const query = request.query;
+      expect(query.title_like).to.eq("lorem");
+    });
+
+    // simulate outside click to close the filter dialog
+    cy.get(".MuiCardHeader-content > .MuiTypography-root").click();
+
+    // open the column menu of status
+    cy.getMaterialUIColumnHeader(4).within(() =>
+      cy.get(".MuiDataGrid-menuIcon > button").click({ force: true }),
+    );
+    // click the filter menu item
+    cy.get(".MuiDataGrid-menu > div > .MuiList-root").children().eq(3).click();
+    // opening the filter dialog resets filters. we need to wait for again
+    cy.wait("@getPosts");
+    // open select menu
+    cy.get(".MuiFormLabel-root").contains("Value").siblings().first().click();
+    // select the filter value
+    cy.get(".MuiMenuItem-root[data-value='published']").click();
+    // url should contain the filter
+    cy.url().should(
+      "include",
+      "filters[0][field]=status&filters[0][value]=published&filters[0][operator]=eq",
+    );
+    // request should have filter
+    cy.wait("@getPosts").then((interception) => {
+      const request = interception.request;
+      const query = request.query;
+      expect(query.status).to.eq("published");
+    });
+  });
+
+  it("should work with sorters", () => {
+    // wait for loading
+    cy.wait("@getPosts");
+    cy.getMaterialUILoadingCircular().should("not.exist");
 
-    cy.wait("@getFilteredPosts");
+    // click the ID column header to sort ascending
+    cy.get(".MuiDataGrid-columnHeaderTitle").contains("ID").click();
+    cy.url().should("include", "sorters[0][field]=id&sorters[0][order]=asc");
+    cy.wait("@getPosts").then((interception) => {
+      const request = interception.request;
+      const query = request.query;
+      expect(query._sort).to.eq("id");
+      expect(query._order).to.eq("asc");
+    });
+    // click the ID column header to sort descending
+    cy.get(".MuiDataGrid-columnHeaderTitle").contains("ID").click();
+    cy.url().should("include", "sorters[0][field]=id&sorters[0][order]=desc");
+    cy.wait("@getPosts").then((interception) => {
+      const request = interception.request;
+      const query = request.query;
+      expect(query._sort).to.eq("id");
+      expect(query._order).to.eq("desc");
+    });
+    // click to remove
+    cy.get(".MuiDataGrid-columnHeaderTitle").contains("ID").click();
+    cy.url().should("not.include", "sorters[0][field]=id");
+    cy.wait("@getPosts").then((interception) => {
+      const request = interception.request;
+      const query = request.query;
+      expect(query._sort).to.be.undefined;
+      expect(query._order).to.be.undefined;
+    });
   });
 });

cypress/e2e/table-material-ui-data-grid-pro/all.cy.ts

@@ -3,101 +3,117 @@
 
 describe("table-material-ui-data-grid-pro", () => {
   beforeEach(() => {
+    cy.interceptGETPosts();
     cy.visit("/");
   });
 
   it("should work with sorter", () => {
+    cy.wait("@getPosts");
     cy.getMaterialUILoadingCircular().should("not.exist");
 
-    cy.intercept(
-      {
-        url: "/posts*",
-        query: {
-          _sort: "title",
-          _order: "desc",
-        },
-      },
-      {
-        fixture: "posts.json",
-      },
-    ).as("getDescPosts");
-
+    // sort by title
     cy.getMaterialUIColumnHeader(2).click();
+    // url should contain the sorter with asc
+    cy.url().should("include", "sorters[0][field]=title&sorters[0][order]=asc");
+    // request should have sorter
+    cy.wait("@getPosts").then((interception) => {
+      const request = interception.request;
+      const query = request.query;
+      expect(query._sort).to.eq("title");
+      expect(query._order).to.eq("asc");
+    });
 
-    cy.url().should(
-      "include",
-      "sorters[0][field]=title&sorters[0][order]=desc",
-    );
-
-    cy.wait("@getDescPosts");
-
-    cy.interceptGETPosts();
-
+    // click the title column header again to sort desc
     cy.getMaterialUIColumnHeader(2).click();
-
+    // url should contain the sorter with desc
     cy.url().should(
-      "not.include",
+      "include",
       "sorters[0][field]=title&sorters[0][order]=desc",
     );
-
     cy.wait("@getPosts").then((interception) => {
-      const { request } = interception;
-      const { _sort, _order } = request.query;
-
-      expect(_sort).to.undefined;
-      expect(_order).to.undefined;
+      const request = interception.request;
+      const query = request.query;
+      expect(query._sort).to.eq("title");
+      expect(query._order).to.eq("desc");
     });
 
-    cy.intercept(
-      {
-        url: "/posts*",
-        query: {
-          _sort: "title",
-          _order: "asc",
-        },
-      },
-      {
-        fixture: "posts.json",
-      },
-    ).as("getAscPosts");
-
+    // click again to remove the sorter
     cy.getMaterialUIColumnHeader(2).click();
-
-    cy.url().should("include", "sorters[0][field]=title&sorters[0][order]=asc");
-
-    cy.wait("@getAscPosts", { timeout: 120000 });
+    cy.url().should("not.include", "sorters[0][field]=title");
+    cy.wait("@getPosts").then((interception) => {
+      const request = interception.request;
+      const query = request.query;
+      expect(query._sort).to.be.undefined;
+      expect(query._order).to.be.undefined;
+    });
   });
 
-  it("should work with filter", () => {
+  it("should work with multiple filter", () => {
+    // wait for loading
+    cy.wait("@getPosts");
     cy.getMaterialUILoadingCircular().should("not.exist");
 
+    // open the column menu of title
     cy.getMaterialUIColumnHeader(2).within(() =>
       cy.get(".MuiDataGrid-menuIcon > button").click({ force: true }),
     );
-
-    cy.get(".MuiList-root").children().eq(7).click();
-
+    // click the filter menu item
     cy.contains("Filter").click();
+    // type the filter value
+    cy.get("[placeholder='Filter value']").type("lorem");
+    // url should contain the filter
+    cy.url().should(
+      "include",
+      "filters[0][field]=title&filters[0][value]=lorem&filters[0][operator]=contains",
+    );
+    // request should have filter
+    cy.wait("@getPosts").then((interception) => {
+      const request = interception.request;
+      const query = request.query;
+      expect(query.title_like).to.eq("lorem");
+    });
 
-    cy.intercept(
-      {
-        url: "/posts*",
-        query: {
-          title_like: "lorem",
-        },
-      },
-      {
-        fixture: "posts.json",
-      },
-    ).as("getFilteredPosts");
-
-    cy.get("[placeholder='Filter value']").eq(1).clear().type("lorem");
+    // simulate outside click to close the filter dialog
+    cy.get(".MuiCardHeader-content > .MuiTypography-root").click();
 
+    // open the column menu of status
+    cy.getMaterialUIColumnHeader(4).within(() =>
+      cy.get(".MuiDataGrid-menuIcon > button").click({ force: true }),
+    );
+    // click the filter menu item
+    cy.contains("Filter").click();
+    // open select menu
+    cy.get(".MuiFormLabel-root").last().siblings().first().click();
+    // select the filter value
+    cy.get(".MuiMenuItem-root[data-value='published']").click();
+    // url should contain the filter
     cy.url().should(
       "include",
-      "filters[1][field]=title&filters[1][value]=lorem&filters[1][operator]=contains",
+      "filters[1][field]=status&filters[1][value]=published&filters[1][operator]=eq",
     );
+    // request should have filter
+    cy.wait("@getPosts").then((interception) => {
+      const request = interception.request;
+      const query = request.query;
+      expect(query.title_like).to.eq("lorem");
+      expect(query.status).to.eq("published");
+    });
 
-    cy.wait("@getFilteredPosts");
+    // reload the page and check if the filters are still there
+    cy.reload();
+    cy.wait("@getPosts").then((interception) => {
+      const request = interception.request;
+      const query = request.query;
+      expect(query.title_like).to.eq("lorem");
+      expect(query.status).to.eq("published");
+    });
+    cy.url().should(
+      "include",
+      "filters[0][field]=title&filters[0][value]=lorem&filters[0][operator]=contains",
+    );
+    cy.url().should(
+      "include",
+      "filters[1][field]=status&filters[1][value]=published&filters[1][operator]=eq",
+    );
   });
 });