refinedev · glebtv · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024
diff --git a/.changeset/mantine-7-inferencer.md b/.changeset/mantine-7-inferencer.md
@@ -0,0 +1,5 @@
+---
+"@refinedev/inferencer": minor
+---
+
+feat: Update to mantine 7
diff --git a/.changeset/mantine-7-live-previews.md b/.changeset/mantine-7-live-previews.md
@@ -0,0 +1,5 @@
+---
+"@refinedev/live-previews": minor
+---
+
+feat: Update to mantine 7
diff --git a/.changeset/mantine-7-mantine.md b/.changeset/mantine-7-mantine.md
@@ -0,0 +1,7 @@
+---
+"@refinedev/mantine": major
+---
+
+feat: Update to mantine 7
+
+Resolves #5178
diff --git a/.changeset/mantine-7-ui-tests.md b/.changeset/mantine-7-ui-tests.md
@@ -0,0 +1,5 @@
+---
+"@refinedev/ui-tests": minor
+---
+
+feat: Update to mantine 7
diff --git a/cypress/support/commands/mantine/index.ts b/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 });
   });
 };
diff --git a/cypress/support/e2e.ts b/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(

diff --git a/cypress/support/index.d.ts b/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>>;

diff --git a/documentation/docs/guides-concepts/authentication/auth-pages/mantine.tsx b/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.5.1",
+        "@mantine/hooks": "^7.5.1",
+        "@mantine/notifications": "^7.5.1",
       }}
       startRoute="/login"
       files={{

diff --git a/documentation/docs/guides-concepts/forms/server-side-validation-mantine.tsx b/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.5.1",
+        "@mantine/hooks": "^7.5.1",
+        "@mantine/form": "^7.5.1",
+        "@mantine/notifications": "^7.5.1",
         "react-router": "latest",
         "react-router-dom": "^6.8.1",
       }}

diff --git a/documentation/docs/guides-concepts/forms/use-select-mantine.tsx b/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.5.1",
+        "@mantine/notifications": "^7.5.1",
         "@emotion/react": "^11.8.2",
-        "@mantine/form": "^5.10.4",
+        "@mantine/form": "^7.5.1",
       }}
       startRoute="/"
       files={{

diff --git a/documentation/docs/guides-concepts/general-concepts/auth-pages/mantine.tsx b/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.5.1",
       }}
       startRoute="/login"
       files={{

diff --git a/documentation/docs/guides-concepts/general-concepts/layout/mantine.tsx b/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.5.1",
+        "@mantine/hooks": "^7.5.1",
+        "@mantine/notifications": "^7.5.1",
       }}
       startRoute="/my-products"
       files={{

diff --git a/documentation/docs/guides-concepts/notifications/notifications-mantine.tsx b/documentation/docs/guides-concepts/notifications/notifications-mantine.tsx
@@ -9,10 +9,10 @@ export default function NotificationMantine() {
       dependencies={{
         "@refinedev/core": "latest",
         "@refinedev/simple-rest": "latest",
-        "@mantine/notifications": "^5.10.4",
+        "@mantine/notifications": "^7.5.1",
         "@emotion/react": "^11.8.2",
-        "@mantine/core": "^5.10.4",
-        "@mantine/hooks": "^5.10.4",
+        "@mantine/core": "^7.5.1",
+        "@mantine/hooks": "^7.5.1",
         "@refinedev/mantine": "^2.28.21",
       }}
       startRoute="/"

diff --git a/documentation/docs/guides-concepts/tables/example/mantine.tsx b/documentation/docs/guides-concepts/tables/example/mantine.tsx
@@ -10,7 +10,7 @@ export default function BaseMantineTable() {
         "@refinedev/mantine": "latest",
         "@refinedev/react-table": "latest",
         "@tanstack/react-table": "latest",
-        "@mantine/core": "^5.10.4",
+        "@mantine/core": "^7.5.1",
         "@tabler/icons-react": "^3.1.0",
       }}
       startRoute="/"

diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/auth-page.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/auth-page.tsx
@@ -16,10 +16,10 @@ export default function AuthPage() {
         "@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.5.1",
+        "@mantine/hooks": "^7.5.1",
+        "@mantine/form": "^7.5.1",
+        "@mantine/notifications": "^7.5.1",
         "react-router": "latest",
         "react-router-dom": "^6.8.1",
       }}

diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/basic-views.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/basic-views.tsx
@@ -15,10 +15,10 @@ export default function BasicViews() {
         "@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.5.1",
+        "@mantine/hooks": "^7.5.1",
+        "@mantine/form": "^7.5.1",
+        "@mantine/notifications": "^7.5.1",
         "react-router": "latest",
         "react-router-dom": "^6.8.1",
       }}

diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/example.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/example.tsx
@@ -15,10 +15,10 @@ export default function Example() {
         "@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.5.1",
+        "@mantine/hooks": "^7.5.1",
+        "@mantine/form": "^7.5.1",
+        "@mantine/notifications": "^7.5.1",
         "react-router": "latest",
         "react-router-dom": "^6.8.1",
       }}

diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/layout-react-router-dom.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/layout-react-router-dom.tsx
@@ -17,10 +17,10 @@ export default function LayoutReactRouterDom() {
         "@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.5.1",
+        "@mantine/hooks": "^7.5.1",
+        "@mantine/form": "^7.5.1",
+        "@mantine/notifications": "^7.5.1",
         "react-router": "latest",
         "react-router-dom": "^6.8.1",
       }}

diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/layout-remix.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/layout-remix.tsx
@@ -14,10 +14,10 @@ export default function LayoutRemix() {
         "@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.5.1",
+        "@mantine/hooks": "^7.5.1",
+        "@mantine/form": "^7.5.1",
+        "@mantine/notifications": "^7.5.1",
         "@refinedev/remix-router": "latest",
       }}
       startRoute="/products"

diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/theming.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/theming.tsx
@@ -17,10 +17,10 @@ export default function Usage() {
         "@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.5.1",
+        "@mantine/hooks": "^7.5.1",
+        "@mantine/form": "^7.5.1",
+        "@mantine/notifications": "^7.5.1",
         "react-router": "latest",
         "react-router-dom": "^6.8.1",
       }}

diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/usage-next-js.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/usage-next-js.tsx
@@ -15,10 +15,10 @@ export default function UsageNextjs() {
         "@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.5.1",
+        "@mantine/hooks": "^7.5.1",
+        "@mantine/form": "^7.5.1",
+        "@mantine/notifications": "^7.5.1",
         "@refinedev/nextjs-router": "latest",
       }}
       // template="nextjs"

diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/usage-react-router-dom.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/usage-react-router-dom.tsx
@@ -15,10 +15,10 @@ export default function UsageReactRouterDom() {
         "@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.5.1",
+        "@mantine/hooks": "^7.5.1",
+        "@mantine/form": "^7.5.1",
+        "@mantine/notifications": "^7.5.1",
         "@refinedev/react-router-v6": "^4.5.4",
         "react-router": "latest",
         "react-router-dom": "^6.8.1",

diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/usage-remix.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/usage-remix.tsx
@@ -15,10 +15,10 @@ export default function UsageRemix() {
         "@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.5.1",
+        "@mantine/hooks": "^7.5.1",
+        "@mantine/form": "^7.5.1",
+        "@mantine/notifications": "^7.5.1",
         "@refinedev/remix-router": "latest",
       }}
       startRoute="/products"

diff --git a/examples/auth-mantine/cypress/e2e/all.cy.ts b/examples/auth-mantine/cypress/e2e/all.cy.ts
@@ -126,7 +126,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");
@@ -136,8 +136,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");
     });
   });
 });
diff --git a/examples/auth-mantine/package.json b/examples/auth-mantine/package.json
@@ -13,10 +13,10 @@
   },
   "dependencies": {
     "@emotion/react": "^11.8.2",
-    "@mantine/core": "^5.10.4",
-    "@mantine/form": "^5.10.4",
-    "@mantine/hooks": "^5.10.4",
-    "@mantine/notifications": "^5.10.4",
+    "@mantine/core": "^7.5.1",
+    "@mantine/form": "^7.5.1",
+    "@mantine/hooks": "^7.5.1",
+    "@mantine/notifications": "^7.5.1",
     "@refinedev/cli": "^2.16.27",
     "@refinedev/core": "^4.48.0",
     "@refinedev/mantine": "^2.29.5",