feat(Mantine): support mantine 7

.changeset/mantine-7-inferencer.md

@@ -0,0 +1,5 @@
+---
+"@refinedev/inferencer": minor
+---
+
+feat: Update to mantine 7

.changeset/mantine-7-live-previews.md

@@ -0,0 +1,5 @@
+---
+"@refinedev/live-previews": minor
+---
+
+feat: Update to mantine 7

.changeset/mantine-7-mantine.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/mantine": major
+---
+
+feat: Update to mantine 7
+
+Resolves #5178

.changeset/mantine-7-ui-tests.md

@@ -0,0 +1,5 @@
+---
+"@refinedev/ui-tests": minor
+---
+
+feat: Update to mantine 7

cypress/e2e/auth-mantine/all.cy.ts

@@ -124,7 +124,7 @@ describe("auth-mantine", () => {
   describe("logout", () => {
     it("should logout", () => {
       login();
-      cy.get("button")
+      cy.get("a")
         .contains(/logout/i)
         .click();
       cy.location("pathname").should("eq", "/login");
@@ -134,8 +134,9 @@ describe("auth-mantine", () => {
   describe("get identity", () => {
     it("should render getIdentity response on header", () => {
       login();
-      cy.get(".mantine-Text-root").contains(/jane doe/i);
-      cy.get(".mantine-Avatar-image").should("have.attr", "src");
+
+      cy.get("header .mantine-Title-root").contains(/jane doe/i);
+      cy.get("header .mantine-Avatar-image").should("have.attr", "src");
     });
   });
 });

cypress/e2e/form-mantine-mutation-mode/all.cy.ts

@@ -12,8 +12,8 @@ describe("form-mantine-mutation-mode", () => {
   const fillForm = () => {
     cy.get("#title").clear().type(mockPost.title);
     cy.get("#content textarea").clear({ force: true }).type(mockPost.content);
-    cy.get("#status").click().get("#status-1").click();
-    cy.get("#categoryId").clear().get("#categoryId-1").click();
+    cy.fillMantineStatus("Draft");
+    cy.get("#categoryId").click().type("{downArrow}{enter}", { force: true });
   };
 
   const assertSuccessResponse = (response: any) => {

cypress/e2e/form-mantine-use-drawer-form/all.cy.ts

@@ -10,14 +10,14 @@ describe("form-mantine-use-drawer-form", () => {
   };
 
   const isDrawerVisible = () => {
-    return cy.get(".mantine-Drawer-drawer").should("be.visible");
+    return cy.get(".mantine-Drawer-overlay").should("be.visible");
   };
 
   const fillForm = () => {
     cy.get("#title").clear().type(mockPost.title);
     cy.get("#content textarea").clear({ force: true }).type(mockPost.content);
-    cy.get("#status").click().get("#status-1").click();
-    cy.get("#categoryId").clear().get("#categoryId-1").click();
+    cy.fillMantineStatus("Draft");
+    cy.get("#categoryId").click().type("{downArrow}{enter}", { force: true });
   };
 
   const assertSuccessResponse = (response: any) => {

cypress/e2e/form-mantine-use-form/all.cy.ts

@@ -61,7 +61,9 @@ describe("form-mantine-use-form", () => {
 
     cy.get("#content textarea").clear();
     cy.get("#title").clear();
-    cy.get("#categoryId").clear();
+
+    //cy.get("#categoryId").clear();
+    cy.clearMantineSelect("#categoryId");
 
     submitForm();
 

cypress/e2e/form-mantine-use-modal-form/all.cy.ts

@@ -10,14 +10,14 @@ describe("form-mantine-use-modal-form", () => {
   };
 
   const isModalVisible = () => {
-    return cy.get(".mantine-Modal-modal").should("be.visible");
+    return cy.get(".mantine-Modal-inner").should("be.visible");
   };
 
   const fillForm = () => {
     cy.get("#title").clear().type(mockPost.title);
     cy.get("#content textarea").clear({ force: true }).type(mockPost.content);
-    cy.get("#status").click().get("#status-1").click();
-    cy.get("#categoryId").clear().get("#categoryId-1").click();
+    cy.fillMantineStatus("Draft");
+    cy.get("#categoryId").click().type("{downArrow}{enter}", { force: true });
   };
 
   const assertSuccessResponse = (response: any) => {

cypress/e2e/form-mantine-use-steps-form/all.cy.ts

@@ -14,7 +14,7 @@ describe("form-mantine-use-steps-form", () => {
     cy.get("#title").clear().type(mockPost.title);
     cy.get("#slug").clear().type(mockPost.slug);
     getNextStepButton().click();
-    cy.get("#status").click().get("#status-1").click();
+    cy.fillMantineStatus(mockPost.status);
     getNextStepButton().click();
     cy.get("#content textarea").clear().type(mockPost.content, { delay: 0 });
   };
@@ -116,7 +116,7 @@ describe("form-mantine-use-steps-form", () => {
     // go to second step
     getNextStepButton().click();
     // fill second step
-    cy.get("#status").click().get("#status-1").click();
+    cy.fillMantineStatus(mockPost.status);
 
     // go to third step
     getNextStepButton().click();

cypress/e2e/inferencer-mantine/all.cy.ts

@@ -126,7 +126,9 @@ describe("inferencer-mantine", () => {
       cy.get("input").eq(3).type("status");
       cy.get("input").eq(4).type(todayString);
       cy.get(".mantine-Select-input").click();
-      cy.get(".mantine-Select-item").eq(0).click();
+      cy.get(".mantine-Popover-dropdown:visible .mantine-Select-option")
+        .eq(0)
+        .click();
 
       cy.getSaveButton().click();
 
@@ -138,7 +140,7 @@ describe("inferencer-mantine", () => {
         expect(body.content).to.equal(mockPost.content);
         expect(body.status).to.equal("status");
         expect(body.createdAt).to.equal(todayString);
-        expect(body.category.id).to.equal(1);
+        expect(body.category.id).to.equal("1");
 
         cy.getMantineNotification().should("contain", "Success");
         cy.location("pathname").should("eq", "/blog-posts");
@@ -183,7 +185,9 @@ describe("inferencer-mantine", () => {
       cy.get("input").eq(4).clear().type("status");
       cy.get("input").eq(5).clear().type(todayString);
       cy.get(".mantine-Select-input").clear();
-      cy.get(".mantine-Select-item").eq(1).click();
+      cy.get(".mantine-Popover-dropdown:visible .mantine-Select-option")
+        .eq(1)
+        .click();
 
       cy.getSaveButton().click();
 
@@ -195,7 +199,7 @@ describe("inferencer-mantine", () => {
         expect(body.content).to.equal(mockPost.content);
         expect(body.status).to.equal("status");
         expect(body.createdAt).to.equal(todayString);
-        expect(body.category.id).to.equal(2);
+        expect(body.category.id).to.equal("2");
 
         cy.getMantineNotification().should("contain", "Success");
         cy.location("pathname").should("eq", "/blog-posts");
@@ -237,7 +241,9 @@ describe("inferencer-mantine", () => {
     // find initial  theme from localStorage
     cy.getAllLocalStorage().then((ls) => {
       const initialTheme =
-        ls[Cypress.config("baseUrl")!]["mantine-color-scheme"]?.toString();
+        ls[Cypress.config("baseUrl")!][
+          "mantine-color-scheme-value"
+        ]?.toString();
 
       console.log(initialTheme);
 
@@ -255,12 +261,12 @@ describe("inferencer-mantine", () => {
         if (initialTheme === "dark") {
           expect(cy.get(".tabler-icon-moon-stars").should("exist"));
           expect(
-            ls[Cypress.config("baseUrl")!]["mantine-color-scheme"],
+            ls[Cypress.config("baseUrl")!]["mantine-color-scheme-value"],
           ).to.contains("light");
         } else {
           expect(cy.get(".tabler-icon-sun").should("exist"));
           expect(
-            ls[Cypress.config("baseUrl")!]["mantine-color-scheme"],
+            ls[Cypress.config("baseUrl")!]["mantine-color-scheme-value"],
           ).to.contains("dark");
         }
       });
@@ -285,7 +291,7 @@ describe("inferencer-mantine", () => {
     cy.wait("@getCategories");
     cy.getMantineLoadingOverlay().should("not.exist");
 
-    cy.get(".mantine-Pagination-item").contains("2").click();
+    cy.get(".mantine-Pagination-control").contains("2").click();
     cy.url().should("include", "current=2");
     cy.getMantineLoadingOverlay().should("not.exist");
     cy.wait("@getBlogPosts").then((interception) => {
@@ -296,7 +302,7 @@ describe("inferencer-mantine", () => {
       expect(_end).to.equal("20");
     });
 
-    cy.get(".mantine-Pagination-item").contains("1").click();
+    cy.get(".mantine-Pagination-control").contains("1").click();
 
     cy.url().should("include", "current=1");
 

cypress/e2e/table-mantine-basic/all.cy.ts

@@ -93,7 +93,7 @@ describe("table-mantine-basic", () => {
   });
 
   it("should work with pagination", () => {
-    cy.get(".mantine-Pagination-item").contains("2").click();
+    cy.get(".mantine-Pagination-control").contains("2").click();
 
     cy.url().should("include", "current=2");
 
@@ -105,7 +105,7 @@ describe("table-mantine-basic", () => {
       expect(_end).to.equal("20");
     });
 
-    cy.get(".mantine-Pagination-item").contains("1").click();
+    cy.get(".mantine-Pagination-control").contains("1").click();
 
     cy.url().should("include", "current=1");
 
@@ -121,7 +121,7 @@ describe("table-mantine-basic", () => {
   it("should set current `1` when filter changed", () => {
     cy.wait("@getPosts");
 
-    cy.get(".mantine-Pagination-item").contains("2").click();
+    cy.get(".mantine-Pagination-control").contains("2").click();
 
     cy.get(".tabler-icon-filter").eq(1).click();
     cy.get("#title").type("lorem");

cypress/support/commands/mantine/index.ts

@@ -16,13 +16,52 @@ export const getMantineLoadingOverlay = () => {
   return cy.get(".mantine-LoadingOverlay-root");
 };
 
+export const clearMantineSelect = (field: string) => {
+  cy.get(field).each(($elm) => {
+    cy.wrap($elm)
+      .invoke("val")
+      .then((text) => {
+        if (text) {
+          cy.get(field).click();
+          cy.get(".mantine-Popover-dropdown:visible .mantine-Select-option")
+            .contains(text as string)
+            .click();
+        }
+      });
+  });
+};
+
+export const fillMantineStatus = (status = "Published") => {
+  // Select option if it's not selected
+  cy.get("#status").each(($elm) => {
+    cy.wrap($elm)
+      .invoke("val")
+      .then((text) => {
+        if (status) {
+          if (text === status) {
+          } else {
+            cy.get("#status").click();
+            cy.get(".mantine-Popover-dropdown:visible .mantine-Select-option")
+              .contains(status)
+              .click();
+          }
+        } else {
+          cy.get("#status").click();
+          cy.get(".mantine-Popover-dropdown:visible .mantine-Select-option")
+            .first()
+            .click();
+        }
+      });
+  });
+};
+
 export const fillMantineForm = () => {
   cy.fixture("mock-post").then((mockPost) => {
     cy.get("#title").clear().type(mockPost.title);
     cy.get("#content textarea").clear({ force: true }).type(mockPost.content, {
       delay: 32,
     });
-    cy.get("#status").click().get("#status-0").click();
-    cy.get("#categoryId").clear().get("#categoryId-1").click();
+    cy.fillMantineStatus();
+    cy.get("#categoryId").click().type("{downArrow}{enter}", { force: true });
   });
 };

cypress/support/e2e.ts

@@ -29,6 +29,8 @@ import {
   getMantineLoadingOverlay,
   getMantineNotification,
   getMantinePopoverDeleteButton,
+  fillMantineStatus,
+  clearMantineSelect,
 } from "./commands/mantine";
 import {
   getCreateButton,
@@ -112,6 +114,8 @@ Cypress.Commands.add(
 );
 Cypress.Commands.add("getMaterialUIColumnHeader", getMaterialUIColumnHeader);
 
+Cypress.Commands.add("clearMantineSelect", clearMantineSelect);
+Cypress.Commands.add("fillMantineStatus", fillMantineStatus);
 Cypress.Commands.add("fillMantineForm", fillMantineForm);
 Cypress.Commands.add("getMantineNotification", getMantineNotification);
 Cypress.Commands.add(

cypress/support/index.d.ts

@@ -101,6 +101,8 @@ declare namespace Cypress {
       params: IGetMantineFormItemErrorParams,
     ): Chainable<JQuery<HTMLElement>>;
     getMantineLoadingOverlay(): Chainable<JQuery<HTMLElement>>;
+    fillMantineStatus: (status?: string) => void;
+    clearMantineSelect: (field: string) => void;
     fillMantineForm: () => void;
 
     getMaterialUINotification(): Chainable<JQuery<HTMLElement>>;

documentation/docs/data/hooks/use-infinite-list/index.md

@@ -30,6 +30,7 @@ Dynamically changing the `pagination` properties will trigger a new request. The
 ### Retrieving the Total Row Count
 
 When the `getList` method is called via `useInfiniteList`, it should ideally return the total count of rows (`rowCount`). The way this count is obtained depends on the data provider in use:
+
 - **REST Providers:** Commonly obtain the total count from the `x-total-count` header.
 - **GraphQL Providers:** Often source the count from specific data fields like `pageInfo.total`.
 - **Other Providers:** Follow their own practices for obtaining the total count.

documentation/docs/data/hooks/use-list/index.md

@@ -32,6 +32,7 @@ Dynamically changing the `pagination` properties will trigger a new request.
 ### Retrieving the Total Row Count
 
 When the `useList` hook calls the `getList` method, it expects the response to include the total number of rows (`rowCount`). The way this count is retrieved can vary based on the data provider:
+
 - **REST Providers:** Frequently use the `x-total-count` header to determine the total count.
 - **GraphQL Providers:** Typically return the count in specific data fields, such as `pageInfo.total`.
 - **Other Providers:** Follow their own conventions for obtaining the total count.

documentation/docs/guides-concepts/authentication/auth-pages/mantine.tsx

@@ -16,9 +16,9 @@ export function MantineAuth() {
         "react-router": "latest",
         "@tabler/icons-react": "^3.1.0",
         "@emotion/react": "^11.8.2",
-        "@mantine/core": "^5.10.4",
-        "@mantine/hooks": "^5.10.4",
-        "@mantine/notifications": "^5.10.4",
+        "@mantine/core": "^7.12.2",
+        "@mantine/hooks": "^7.12.2",
+        "@mantine/notifications": "^7.12.2",
       }}
       startRoute="/login"
       files={{

documentation/docs/guides-concepts/forms/server-side-validation-mantine.tsx

@@ -15,10 +15,10 @@ export default function ServerSideValidationMantine() {
         "@tanstack/react-table": "^8.2.6",
         "@tabler/icons-react": "^3.1.0",
         "@emotion/react": "^11.8.2",
-        "@mantine/core": "^5.10.4",
-        "@mantine/hooks": "^5.10.4",
-        "@mantine/form": "^5.10.4",
-        "@mantine/notifications": "^5.10.4",
+        "@mantine/core": "^7.12.2",
+        "@mantine/hooks": "^7.12.2",
+        "@mantine/form": "^7.12.2",
+        "@mantine/notifications": "^7.12.2",
         "react-router": "latest",
         "react-router-dom": "^6.8.1",
       }}

documentation/docs/guides-concepts/forms/use-select-mantine.tsx

@@ -10,10 +10,10 @@ export default function UseSelectMantine() {
         "@refinedev/simple-rest": "latest",
         "@refinedev/react-hook-form": "latest",
         "@refinedev/mantine": "^2.28.21",
-        "@mantine/core": "^5.10.4",
-        "@mantine/notifications": "^5.10.4",
+        "@mantine/core": "^7.12.2",
+        "@mantine/notifications": "^7.12.2",
         "@emotion/react": "^11.8.2",
-        "@mantine/form": "^5.10.4",
+        "@mantine/form": "^7.12.2",
       }}
       startRoute="/"
       files={{

documentation/docs/guides-concepts/general-concepts/auth-pages/mantine.tsx

@@ -14,7 +14,7 @@ export function MantineAuth() {
         "@refinedev/react-table": "latest",
         "react-router-dom": "latest",
         "react-router": "latest",
-        "@mantine/core": "^5.10.4",
+        "@mantine/core": "^7.12.2",
       }}
       startRoute="/login"
       files={{

documentation/docs/guides-concepts/general-concepts/layout/mantine.tsx

@@ -17,9 +17,9 @@ export function MantineLayout() {
         "react-router": "latest",
         "@tabler/icons-react": "^3.1.0",
         "@emotion/react": "^11.8.2",
-        "@mantine/core": "^5.10.4",
-        "@mantine/hooks": "^5.10.4",
-        "@mantine/notifications": "^5.10.4",
+        "@mantine/core": "^7.12.2",
+        "@mantine/hooks": "^7.12.2",
+        "@mantine/notifications": "^7.12.2",
       }}
       startRoute="/my-products"
       files={{