diff --git a/.changeset/mantine-7-inferencer.md b/.changeset/mantine-7-inferencer.md new file mode 100644 index 000000000000..ccf3031bf6ed --- /dev/null +++ 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 new file mode 100644 index 000000000000..c678bb4f39da --- /dev/null +++ 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 new file mode 100644 index 000000000000..06be6b6fc2bf --- /dev/null +++ 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 new file mode 100644 index 000000000000..e210742d7795 --- /dev/null +++ b/.changeset/mantine-7-ui-tests.md @@ -0,0 +1,5 @@ +--- +"@refinedev/ui-tests": minor +--- + +feat: Update to mantine 7 diff --git a/cypress/e2e/auth-mantine/all.cy.ts b/cypress/e2e/auth-mantine/all.cy.ts index ce797bf924a3..11374d892365 100644 --- a/cypress/e2e/auth-mantine/all.cy.ts +++ b/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"); }); }); }); diff --git a/cypress/e2e/form-mantine-mutation-mode/all.cy.ts b/cypress/e2e/form-mantine-mutation-mode/all.cy.ts index e5b1121c51e0..512b8aa62214 100644 --- a/cypress/e2e/form-mantine-mutation-mode/all.cy.ts +++ b/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) => { diff --git a/cypress/e2e/form-mantine-use-drawer-form/all.cy.ts b/cypress/e2e/form-mantine-use-drawer-form/all.cy.ts index 8abd5b9b6ae9..578ce9dbb9ce 100644 --- a/cypress/e2e/form-mantine-use-drawer-form/all.cy.ts +++ b/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) => { diff --git a/cypress/e2e/form-mantine-use-form/all.cy.ts b/cypress/e2e/form-mantine-use-form/all.cy.ts index c6b0000fd821..a6aaf06ebc9d 100644 --- a/cypress/e2e/form-mantine-use-form/all.cy.ts +++ b/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(); diff --git a/cypress/e2e/form-mantine-use-modal-form/all.cy.ts b/cypress/e2e/form-mantine-use-modal-form/all.cy.ts index 9b2c226c99ad..f8ad34b1cd2c 100644 --- a/cypress/e2e/form-mantine-use-modal-form/all.cy.ts +++ b/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) => { diff --git a/cypress/e2e/form-mantine-use-steps-form/all.cy.ts b/cypress/e2e/form-mantine-use-steps-form/all.cy.ts index 62a11e61d17e..e0ec68c20f6a 100644 --- a/cypress/e2e/form-mantine-use-steps-form/all.cy.ts +++ b/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(); diff --git a/cypress/e2e/inferencer-mantine/all.cy.ts b/cypress/e2e/inferencer-mantine/all.cy.ts index 0bdbc2015899..01347cbeff42 100644 --- a/cypress/e2e/inferencer-mantine/all.cy.ts +++ b/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"); diff --git a/cypress/e2e/table-mantine-basic/all.cy.ts b/cypress/e2e/table-mantine-basic/all.cy.ts index 220229633af7..0bc1f1faac6a 100644 --- a/cypress/e2e/table-mantine-basic/all.cy.ts +++ b/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"); diff --git a/cypress/support/commands/mantine/index.ts b/cypress/support/commands/mantine/index.ts index 18bd97c6e270..294e2afc68e3 100644 --- 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 index 2f64563bedc0..21c7e33f5aea 100644 --- 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 index 87773580e259..e27ce3d7b91b 100644 --- a/cypress/support/index.d.ts +++ b/cypress/support/index.d.ts @@ -101,6 +101,8 @@ declare namespace Cypress { params: IGetMantineFormItemErrorParams, ): Chainable>; getMantineLoadingOverlay(): Chainable>; + fillMantineStatus: (status?: string) => void; + clearMantineSelect: (field: string) => void; fillMantineForm: () => void; getMaterialUINotification(): Chainable>; diff --git a/documentation/docs/data/hooks/use-infinite-list/index.md b/documentation/docs/data/hooks/use-infinite-list/index.md index 0377d84891b7..182cd7c75c45 100644 --- a/documentation/docs/data/hooks/use-infinite-list/index.md +++ b/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. diff --git a/documentation/docs/data/hooks/use-list/index.md b/documentation/docs/data/hooks/use-list/index.md index a16e7a6c0b19..d097f9d7e12d 100644 --- a/documentation/docs/data/hooks/use-list/index.md +++ b/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. diff --git a/documentation/docs/guides-concepts/authentication/auth-pages/mantine.tsx b/documentation/docs/guides-concepts/authentication/auth-pages/mantine.tsx index 6da2f2bc36c5..3352e53d4234 100644 --- 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.12.2", + "@mantine/hooks": "^7.12.2", + "@mantine/notifications": "^7.12.2", }} 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 index 3ae4ff6ab08b..0f4e91da3c55 100644 --- 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.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", }} diff --git a/documentation/docs/guides-concepts/forms/use-select-mantine.tsx b/documentation/docs/guides-concepts/forms/use-select-mantine.tsx index cac77a80bd42..d00a31ad7746 100644 --- 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.12.2", + "@mantine/notifications": "^7.12.2", "@emotion/react": "^11.8.2", - "@mantine/form": "^5.10.4", + "@mantine/form": "^7.12.2", }} 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 index 228ea1acd892..1ba5f9cefa36 100644 --- 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.12.2", }} 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 index c06860c385cb..1d3cc8dc0aa8 100644 --- 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.12.2", + "@mantine/hooks": "^7.12.2", + "@mantine/notifications": "^7.12.2", }} startRoute="/my-products" files={{ diff --git a/documentation/docs/guides-concepts/notifications/notifications-mantine.tsx b/documentation/docs/guides-concepts/notifications/notifications-mantine.tsx index f92f448b637e..db0f0db63d36 100644 --- 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.12.2", "@emotion/react": "^11.8.2", - "@mantine/core": "^5.10.4", - "@mantine/hooks": "^5.10.4", + "@mantine/core": "^7.12.2", + "@mantine/hooks": "^7.12.2", "@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 index 1ead8a6f46c3..79283d3c764a 100644 --- 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.12.2", "@tabler/icons-react": "^3.1.0", }} startRoute="/" diff --git a/documentation/docs/packages/tanstack-table/examples/mantine.tsx b/documentation/docs/packages/tanstack-table/examples/mantine.tsx index c1a8a63a6bb7..1039390f5056 100644 --- a/documentation/docs/packages/tanstack-table/examples/mantine.tsx +++ b/documentation/docs/packages/tanstack-table/examples/mantine.tsx @@ -10,7 +10,7 @@ export default function BaseCoreTable() { "@refinedev/mantine": "latest", "@refinedev/react-table": "latest", "@tanstack/react-table": "latest", - "@mantine/core": "^5.10.4", + "@mantine/core": "^7.12.2", "@tabler/icons-react": "^3.1.0", }} startRoute="/" @@ -48,10 +48,7 @@ const API_URL = "https://api.fake-rest.refine.dev"; export default function App() { return ( - + diff --git a/documentation/docs/ui-integrations/mantine/components/auth-page/index.md b/documentation/docs/ui-integrations/mantine/components/auth-page/index.md index 68f5fa020581..ba9b9231c77e 100644 --- a/documentation/docs/ui-integrations/mantine/components/auth-page/index.md +++ b/documentation/docs/ui-integrations/mantine/components/auth-page/index.md @@ -152,11 +152,7 @@ import { DashboardPage } from "./pages/dashboard"; const App = () => { return ( - + { return ( - + { return ( - + { return ( - + { return ( - + { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/basic-views/edit/index.md b/documentation/docs/ui-integrations/mantine/components/basic-views/edit/index.md index d45b87f95064..dcea84bc0a50 100644 --- a/documentation/docs/ui-integrations/mantine/components/basic-views/edit/index.md +++ b/documentation/docs/ui-integrations/mantine/components/basic-views/edit/index.md @@ -14,11 +14,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/basic-views/list/index.md b/documentation/docs/ui-integrations/mantine/components/basic-views/list/index.md index a378d02bb2cb..8b56033d4df7 100644 --- a/documentation/docs/ui-integrations/mantine/components/basic-views/list/index.md +++ b/documentation/docs/ui-integrations/mantine/components/basic-views/list/index.md @@ -12,11 +12,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md b/documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md index 5375f1f89645..2abb58decf8c 100644 --- a/documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md +++ b/documentation/docs/ui-integrations/mantine/components/basic-views/show/index.md @@ -12,11 +12,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/clone-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/clone-button/index.md index 1ad754c45230..bf6d8f5c220e 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/clone-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/clone-button/index.md @@ -17,11 +17,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/create-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/create-button/index.md index 61a522b57d87..afac5fe44e70 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/create-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/create-button/index.md @@ -17,11 +17,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/delete-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/delete-button/index.md index 664b0cc0aa76..9865c5cbec60 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/delete-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/delete-button/index.md @@ -15,11 +15,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/edit-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/edit-button/index.md index fe42e1db48da..657b2b1371d3 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/edit-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/edit-button/index.md @@ -17,11 +17,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/export-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/export-button/index.md index aefdaefc7a65..41cb0da403b4 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/export-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/export-button/index.md @@ -17,11 +17,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/import-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/import-button/index.md index 09eeae5db938..0c1e98fbcdbe 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/import-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/import-button/index.md @@ -17,11 +17,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/list-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/list-button/index.md index f0071620da2d..ec7054d1556c 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/list-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/list-button/index.md @@ -17,11 +17,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/refresh-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/refresh-button/index.md index 56f30686f67f..706d80f77d8b 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/refresh-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/refresh-button/index.md @@ -17,11 +17,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/save-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/save-button/index.md index 642c278f43a6..e769ac80254c 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/save-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/save-button/index.md @@ -17,11 +17,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/buttons/show-button/index.md b/documentation/docs/ui-integrations/mantine/components/buttons/show-button/index.md index fcc3793a2801..b3393b80d655 100644 --- a/documentation/docs/ui-integrations/mantine/components/buttons/show-button/index.md +++ b/documentation/docs/ui-integrations/mantine/components/buttons/show-button/index.md @@ -17,11 +17,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/fields/boolean-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/boolean-field/index.md index 6144395b78db..caf27adb1eed 100644 --- a/documentation/docs/ui-integrations/mantine/components/fields/boolean-field/index.md +++ b/documentation/docs/ui-integrations/mantine/components/fields/boolean-field/index.md @@ -16,11 +16,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/fields/date-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/date-field/index.md index 0d515b78ad50..21666aa9f09b 100644 --- a/documentation/docs/ui-integrations/mantine/components/fields/date-field/index.md +++ b/documentation/docs/ui-integrations/mantine/components/fields/date-field/index.md @@ -16,11 +16,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/fields/email-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/email-field/index.md index b03a2b61765f..94653c1740fc 100644 --- a/documentation/docs/ui-integrations/mantine/components/fields/email-field/index.md +++ b/documentation/docs/ui-integrations/mantine/components/fields/email-field/index.md @@ -16,11 +16,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/fields/file-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/file-field/index.md index 4eafeb61eab2..0f73ffff0e00 100644 --- a/documentation/docs/ui-integrations/mantine/components/fields/file-field/index.md +++ b/documentation/docs/ui-integrations/mantine/components/fields/file-field/index.md @@ -16,11 +16,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/fields/markdown-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/markdown-field/index.md index 2c5dc1a990ba..ecf3455043a0 100644 --- a/documentation/docs/ui-integrations/mantine/components/fields/markdown-field/index.md +++ b/documentation/docs/ui-integrations/mantine/components/fields/markdown-field/index.md @@ -16,11 +16,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/fields/number-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/number-field/index.md index 4cc3820cef68..4806ea4d829c 100644 --- a/documentation/docs/ui-integrations/mantine/components/fields/number-field/index.md +++ b/documentation/docs/ui-integrations/mantine/components/fields/number-field/index.md @@ -16,11 +16,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/fields/tag-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/tag-field/index.md index 469b8b2c42b0..14346124a8dd 100644 --- a/documentation/docs/ui-integrations/mantine/components/fields/tag-field/index.md +++ b/documentation/docs/ui-integrations/mantine/components/fields/tag-field/index.md @@ -16,11 +16,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/fields/text-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/text-field/index.md index 96547506de5b..c090fda4aec0 100644 --- a/documentation/docs/ui-integrations/mantine/components/fields/text-field/index.md +++ b/documentation/docs/ui-integrations/mantine/components/fields/text-field/index.md @@ -16,11 +16,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/fields/url-field/index.md b/documentation/docs/ui-integrations/mantine/components/fields/url-field/index.md index 8b4a653d75fd..7509b69ed2ca 100644 --- a/documentation/docs/ui-integrations/mantine/components/fields/url-field/index.md +++ b/documentation/docs/ui-integrations/mantine/components/fields/url-field/index.md @@ -16,11 +16,7 @@ setRefineProps({ const Wrapper = ({ children }) => { return ( - + {children} diff --git a/documentation/docs/ui-integrations/mantine/components/inferencer/index.md b/documentation/docs/ui-integrations/mantine/components/inferencer/index.md index c4ec791ac03f..0dd729749b35 100644 --- a/documentation/docs/ui-integrations/mantine/components/inferencer/index.md +++ b/documentation/docs/ui-integrations/mantine/components/inferencer/index.md @@ -25,7 +25,7 @@ import { MantineInferencer } from "@refinedev/inferencer/mantine"; const App = () => { return ( - + { return ( - + { return ( - + { return ( - + { return ( - + { return ( - + { return ( - + { return ( - + { const App: React.FC = () => { return ( - + { diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/basic-views.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/basic-views.tsx index 11fc5861177d..3c92ed5eae30 100644 --- 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.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", }} @@ -80,8 +80,6 @@ const App: React.FC = () => { diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/example.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/example.tsx index 2ff9f4b04b3a..3dfb3b839d13 100644 --- 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.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", }} @@ -117,8 +117,6 @@ const App: React.FC = () => { diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/layout-next-js.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/layout-next-js.tsx index e320eb789ba2..a21d341221a4 100644 --- a/documentation/docs/ui-integrations/mantine/introduction/previews/layout-next-js.tsx +++ b/documentation/docs/ui-integrations/mantine/introduction/previews/layout-next-js.tsx @@ -52,8 +52,6 @@ function App({ Component, pageProps }: AppProps) { return ( 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 index 2ddd64900694..120c876a6195 100644 --- 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 @@ -9,18 +9,17 @@ export default function LayoutReactRouterDom() { // showFiles initialPercentage={35} dependencies={{ - "@refinedev/mantine": "^2.28.21", - "@refinedev/core": "^4.45.1", + "@refinedev/mantine": "^2.33.0", + "@refinedev/core": "^4.54.1", "@refinedev/react-router-v6": "^4.5.4", "@refinedev/simple-rest": "^4.5.4", "@refinedev/react-table": "^5.6.4", "@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", }} @@ -49,11 +48,10 @@ import { ErrorComponent, ThemedLayoutV2, RefineThemes, - useNotificationProvider, - AuthPage + useNotificationProvider } from "@refinedev/mantine"; -import { NotificationsProvider } from "@mantine/notifications"; -import { MantineProvider, Global } from "@mantine/core"; +import { Notifications } from "@mantine/notifications"; +import { MantineProvider } from "@mantine/core"; import { ProductList } from "./pages/products/list"; @@ -62,37 +60,34 @@ export default function App() { - - + + + + } - ]} - > - - - - - } - > - } /> - } /> - - - - + > + } /> + } /> + + + + ); diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/layout-remix.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/layout-remix.tsx index 202af11eaf2d..c39d0abb216c 100644 --- 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.12.2", + "@mantine/hooks": "^7.12.2", + "@mantine/form": "^7.12.2", + "@mantine/notifications": "^7.12.2", "@refinedev/remix-router": "latest", }} startRoute="/products" @@ -66,8 +66,6 @@ export default function App() { diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/theming.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/theming.tsx index 30b1672d8065..f3c15cc9ec8f 100644 --- 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.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", }} @@ -112,8 +112,6 @@ export const ThemeProvider = ({ children }) => ( // Available themes: Blue, Purple, Magenta, Red, Orange, Yellow, Green // Change the line below to change the theme theme={RefineThemes.Magenta} - withNormalizeCSS - withGlobalStyles > 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 index 7cdd7292887f..4cbd3a2987b8 100644 --- 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.12.2", + "@mantine/hooks": "^7.12.2", + "@mantine/form": "^7.12.2", + "@mantine/notifications": "^7.12.2", "@refinedev/nextjs-router": "latest", }} // template="nextjs" @@ -158,8 +158,6 @@ function App({ Component, pageProps }: ExtendedAppProps) { return ( 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 index 768ecaebd710..bc75bfabe704 100644 --- 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.12.2", + "@mantine/hooks": "^7.12.2", + "@mantine/form": "^7.12.2", + "@mantine/notifications": "^7.12.2", "@refinedev/react-router-v6": "^4.5.4", "react-router": "latest", "react-router-dom": "^6.8.1", @@ -118,8 +118,6 @@ const App: React.FC = () => { diff --git a/documentation/docs/ui-integrations/mantine/introduction/previews/usage-remix.tsx b/documentation/docs/ui-integrations/mantine/introduction/previews/usage-remix.tsx index fd5b12bac2db..374a56cc53b2 100644 --- 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.12.2", + "@mantine/hooks": "^7.12.2", + "@mantine/form": "^7.12.2", + "@mantine/notifications": "^7.12.2", "@refinedev/remix-router": "latest", }} startRoute="/products" @@ -121,8 +121,6 @@ export default function App() { diff --git a/documentation/docs/ui-integrations/mantine/theming/index.md b/documentation/docs/ui-integrations/mantine/theming/index.md index 11560d990ca7..5362a6ec60c3 100644 --- a/documentation/docs/ui-integrations/mantine/theming/index.md +++ b/documentation/docs/ui-integrations/mantine/theming/index.md @@ -203,8 +203,6 @@ const App = () => { @@ -302,8 +300,6 @@ const App = () => { }), }} // highlight-end - withNormalizeCSS - withGlobalStyles > @@ -436,8 +432,6 @@ const App = () => { ...RefineThemes.Blue, colorScheme: colorScheme, }} - withNormalizeCSS - withGlobalStyles > diff --git a/examples/auth-mantine/package.json b/examples/auth-mantine/package.json index 33c4bf13c293..d91ef52bfc41 100644 --- a/examples/auth-mantine/package.json +++ b/examples/auth-mantine/package.json @@ -11,10 +11,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.13.2", + "@mantine/form": "^7.13.2", + "@mantine/hooks": "^7.13.2", + "@mantine/notifications": "^7.13.2", "@refinedev/cli": "^2.16.39", "@refinedev/core": "^4.55.0", "@refinedev/mantine": "^2.33.0", diff --git a/examples/auth-mantine/src/App.tsx b/examples/auth-mantine/src/App.tsx index 9bfdc49fe158..8fe4955d29a2 100644 --- a/examples/auth-mantine/src/App.tsx +++ b/examples/auth-mantine/src/App.tsx @@ -1,3 +1,6 @@ +import "@mantine/core/styles.css"; +import "@mantine/notifications/styles.css"; + import { type AuthProvider, Authenticated, @@ -11,8 +14,8 @@ import { useNotificationProvider, RefineThemes, } from "@refinedev/mantine"; -import { NotificationsProvider } from "@mantine/notifications"; -import { MantineProvider, Global } from "@mantine/core"; +import { Notifications } from "@mantine/notifications"; +import { MantineProvider } from "@mantine/core"; import dataProvider from "@refinedev/simple-rest"; import routerProvider, { NavigateToResource, @@ -153,137 +156,127 @@ const App: React.FC = () => { return ( - - - - - - - } - > - - - - - } - > - } - /> + + + + } + > + + + + + } + > + } /> - - } /> - } /> - } /> - } /> - + + } /> + } /> + } /> + } /> + + }> + + + } + > }> - - + , + }, + { + name: "github", + label: "Sign in with GitHub", + icon: , + }, + ]} + /> } - > - , - }, - { - name: "github", - label: "Sign in with GitHub", - icon: , - }, - ]} - /> - } - /> - , - }, - { - name: "github", - label: "Sign in with GitHub", - icon: , - }, - ]} - /> - } - /> - } - /> - } - /> - - + /> - - - - + , + }, + { + name: "github", + label: "Sign in with GitHub", + icon: , + }, + ]} + /> } - > - } /> - - - - - - + /> + } + /> + } + /> + + + + + + + + } + > + } /> + + + + + + ); diff --git a/examples/auth-mantine/src/components/header/index.tsx b/examples/auth-mantine/src/components/header/index.tsx index 0d99d848ebdf..6ca9c1ea0192 100644 --- a/examples/auth-mantine/src/components/header/index.tsx +++ b/examples/auth-mantine/src/components/header/index.tsx @@ -2,7 +2,6 @@ import { ActionIcon, Avatar, Group, - Header as MantineHeader, Title, useMantineColorScheme, useMantineTheme, @@ -27,22 +26,10 @@ export const Header: React.FC = () => { const borderColor = dark ? theme.colors.dark[6] : theme.colors.gray[2]; return ( - + @@ -55,12 +42,12 @@ export const Header: React.FC = () => { {dark ? : } {(user?.name || user?.avatar) && ( - + {user?.name && {user?.name}} )} - + ); }; diff --git a/examples/auth-mantine/src/components/table/columnFilter.tsx b/examples/auth-mantine/src/components/table/columnFilter.tsx index 17c6939949f5..555d60ce99e7 100644 --- a/examples/auth-mantine/src/components/table/columnFilter.tsx +++ b/examples/auth-mantine/src/components/table/columnFilter.tsx @@ -55,7 +55,6 @@ export const ColumnFilter: React.FC = ({ column }) => { opened={!!state} position="bottom" withArrow - transition="scale-y" shadow="xl" onClose={close} width="256px" @@ -73,9 +72,9 @@ export const ColumnFilter: React.FC = ({ column }) => { {!!state && ( - + {renderFilterElement()} - + { @@ -53,12 +53,12 @@ export const PostCreate: React.FC = () => { {...getInputProps("category.id")} {...selectProps} /> - + Content {errors.content && ( - + {errors.content} )} diff --git a/examples/auth-mantine/src/pages/posts/edit.tsx b/examples/auth-mantine/src/pages/posts/edit.tsx index be76d29bae6c..d2337d2cd22c 100644 --- a/examples/auth-mantine/src/pages/posts/edit.tsx +++ b/examples/auth-mantine/src/pages/posts/edit.tsx @@ -1,5 +1,5 @@ -import { Edit, useForm, useSelect } from "@refinedev/mantine"; -import { Select, TextInput, Text } from "@mantine/core"; +import { Edit, useForm, useSelect, Select } from "@refinedev/mantine"; +import { TextInput, Text } from "@mantine/core"; import MDEditor from "@uiw/react-md-editor"; import type { ICategory } from "../../interfaces"; @@ -61,7 +61,7 @@ export const PostEdit: React.FC = () => { {...getInputProps("category.id")} {...selectProps} /> - + Content diff --git a/examples/auth-mantine/src/pages/posts/list.tsx b/examples/auth-mantine/src/pages/posts/list.tsx index 75cb952c1b2c..4b7f0e6e9fbc 100644 --- a/examples/auth-mantine/src/pages/posts/list.tsx +++ b/examples/auth-mantine/src/pages/posts/list.tsx @@ -91,7 +91,7 @@ export const PostList: React.FC = () => { enableSorting: false, cell: function render({ getValue }) { return ( - + @@ -145,14 +145,14 @@ export const PostList: React.FC = () => { return ( {!header.isPlaceholder && ( - + {flexRender( header.column.columnDef.header, header.getContext(), )} - + @@ -183,13 +183,9 @@ export const PostList: React.FC = () => { })} -
- + + + ); diff --git a/examples/base-mantine/package.json b/examples/base-mantine/package.json index 74aa7d81f282..afc6dd3c8d59 100644 --- a/examples/base-mantine/package.json +++ b/examples/base-mantine/package.json @@ -11,10 +11,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.13.2", + "@mantine/form": "^7.13.2", + "@mantine/hooks": "^7.13.2", + "@mantine/notifications": "^7.13.2", "@refinedev/cli": "^2.16.39", "@refinedev/core": "^4.55.0", "@refinedev/mantine": "^2.33.0", diff --git a/examples/base-mantine/src/App.tsx b/examples/base-mantine/src/App.tsx index 98f35692cdf2..1186308794d5 100644 --- a/examples/base-mantine/src/App.tsx +++ b/examples/base-mantine/src/App.tsx @@ -1,3 +1,6 @@ +import "@mantine/core/styles.css"; +import "@mantine/notifications/styles.css"; + import { GitHubBanner, Refine } from "@refinedev/core"; import { ThemedLayoutV2, @@ -5,8 +8,8 @@ import { useNotificationProvider, RefineThemes, } from "@refinedev/mantine"; -import { NotificationsProvider } from "@mantine/notifications"; -import { MantineProvider, Global } from "@mantine/core"; +import { Notifications } from "@mantine/notifications"; +import { MantineProvider } from "@mantine/core"; import dataProvider from "@refinedev/simple-rest"; import routerProvider, { NavigateToResource, @@ -20,62 +23,52 @@ import { PostCreate, PostEdit, PostList, PostShow } from "./pages"; const App: React.FC = () => { return ( - - - - - + - - - - - } - > - } - /> - - - } /> - } /> - } /> - } /> - + }, + ]} + options={{ + syncWithLocation: true, + warnWhenUnsavedChanges: true, + }} + > + + + + + } + > + } /> - } /> + + } /> + } /> + } /> + } /> - - - - - + + } /> + + + + + + ); diff --git a/examples/base-mantine/src/components/table/columnFilter.tsx b/examples/base-mantine/src/components/table/columnFilter.tsx index 17c6939949f5..555d60ce99e7 100644 --- a/examples/base-mantine/src/components/table/columnFilter.tsx +++ b/examples/base-mantine/src/components/table/columnFilter.tsx @@ -55,7 +55,6 @@ export const ColumnFilter: React.FC = ({ column }) => { opened={!!state} position="bottom" withArrow - transition="scale-y" shadow="xl" onClose={close} width="256px" @@ -73,9 +72,9 @@ export const ColumnFilter: React.FC = ({ column }) => { {!!state && ( - + {renderFilterElement()} - + { - const { saveButtonProps, getInputProps, errors } = useForm({ + const { saveButtonProps, getInputProps, errors } = useForm< + IPost, + HttpError, + IPostVariables + >({ initialValues: { title: "", status: "", @@ -27,7 +41,7 @@ export const PostCreate: React.FC = () => { resource: "categories", }); - const { selectProps: tagSelectProps } = useSelect({ + const { selectProps: tagSelectProps } = useMultiSelect({ resource: "tags", }); @@ -69,11 +83,8 @@ export const PostCreate: React.FC = () => { label="Tags" placeholder="Pick multiple" defaultValue={[]} - filter={(value, _selected, item) => { - return !!item.label?.toLowerCase().includes(value); - }} /> - + Content { {...getInputProps("content")} /> {errors.content && ( - + {errors.content} )} diff --git a/examples/base-mantine/src/pages/posts/edit.tsx b/examples/base-mantine/src/pages/posts/edit.tsx index 01b48a8f7050..c62a695c7ca1 100644 --- a/examples/base-mantine/src/pages/posts/edit.tsx +++ b/examples/base-mantine/src/pages/posts/edit.tsx @@ -1,5 +1,12 @@ -import { Edit, useForm, useSelect } from "@refinedev/mantine"; -import { Select, TextInput, Text, MultiSelect } from "@mantine/core"; +import { + Edit, + useForm, + useSelect, + Select, + useMultiSelect, + MultiSelect, +} from "@refinedev/mantine"; +import { TextInput, Text } from "@mantine/core"; import MDEditor from "@uiw/react-md-editor"; import type { ICategory, ITag } from "../../interfaces"; @@ -42,7 +49,7 @@ export const PostEdit: React.FC = () => { defaultValue: queryResult?.data?.data.category.id, }); - const { selectProps: tagSelectProps } = useSelect({ + const { selectProps: tagSelectProps } = useMultiSelect({ resource: "tags", defaultValue: defaultTags, }); @@ -85,11 +92,8 @@ export const PostEdit: React.FC = () => { label="Tags" placeholder="Pick multiple" defaultValue={defaultTags} - filter={(value, _selected, item) => { - return !!item.label?.toLowerCase().includes(value); - }} /> - + Content { () => [ { id: "id", - header: "ID", + header: "ID test", accessorKey: "id", }, { @@ -52,6 +52,7 @@ export const PostList: React.FC = () => { { label: "Draft", value: "draft" }, { label: "Rejected", value: "rejected" }, ]} + comboboxProps={{ withinPortal: false }} {...props} /> ); @@ -91,7 +92,7 @@ export const PostList: React.FC = () => { enableSorting: false, cell: function render({ getValue }) { return ( - + @@ -110,11 +111,19 @@ export const PostList: React.FC = () => { refineCore: { setCurrent, pageCount, + pageSize, current, tableQuery: { data: tableData }, }, } = useTable({ columns, + refineCoreProps: { + pagination: { + current: 3, + pageSize: 30, + mode: "server", + }, + }, }); const categoryIds = tableData?.data?.map((item) => item.category.id) ?? []; @@ -135,62 +144,66 @@ export const PostList: React.FC = () => { })); return ( - - + + - + {getHeaderGroups().map((headerGroup) => ( - + {headerGroup.headers.map((header) => { return ( - + ); })} - + ))} - - + + {getRowModel().rows.map((row) => { return ( - + {row.getVisibleCells().map((cell) => { return ( - + ); })} - + ); })} - +
+ {!header.isPlaceholder && ( - + {flexRender( header.column.columnDef.header, header.getContext(), )} - + )} -
+ {flexRender( cell.column.columnDef.cell, cell.getContext(), )} -
-
- - - + + + + + ); }; diff --git a/examples/blog-refine-mantine-strapi/package.json b/examples/blog-refine-mantine-strapi/package.json index b97a083919f0..3f3ef6f5015a 100644 --- a/examples/blog-refine-mantine-strapi/package.json +++ b/examples/blog-refine-mantine-strapi/package.json @@ -23,10 +23,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.13.2", + "@mantine/form": "^7.13.2", + "@mantine/hooks": "^7.13.2", + "@mantine/notifications": "^7.13.2", "@refinedev/cli": "^2.16.39", "@refinedev/core": "^4.55.0", "@refinedev/inferencer": "^4.7.0", diff --git a/examples/blog-refine-mantine-strapi/src/App.tsx b/examples/blog-refine-mantine-strapi/src/App.tsx index 49cde7261518..498385065014 100644 --- a/examples/blog-refine-mantine-strapi/src/App.tsx +++ b/examples/blog-refine-mantine-strapi/src/App.tsx @@ -1,3 +1,6 @@ +import "@mantine/core/styles.css"; +import "@mantine/notifications/styles.css"; + import { Refine, Authenticated, GitHubBanner } from "@refinedev/core"; import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar"; import { @@ -14,13 +17,9 @@ import routerBindings, { CatchAllNavigate, } from "@refinedev/react-router-v6"; import { BrowserRouter, Route, Routes, Outlet } from "react-router-dom"; -import { - MantineProvider, - Global, - ColorSchemeProvider, - type ColorScheme, -} from "@mantine/core"; -import { NotificationsProvider } from "@mantine/notifications"; +import { MantineProvider } from "@mantine/core"; +import { Notifications } from "@mantine/notifications"; + import { useLocalStorage } from "@mantine/hooks"; import { MantineListInferencer, @@ -36,15 +35,6 @@ import { API_URL } from "./constants"; import { PostList, PostCreate, PostEdit } from "./pages/posts"; function App() { - const [colorScheme, setColorScheme] = useLocalStorage({ - key: "mantine-color-scheme", - defaultValue: "light", - getInitialValueInEffect: true, - }); - - const toggleColorScheme = (value?: ColorScheme) => - setColorScheme(value || (colorScheme === "dark" ? "light" : "dark")); - const fieldTransformer = (field: InferField) => { if (["locale", "updatedAt", "publishedAt"].includes(field.key)) { return false; @@ -55,131 +45,119 @@ function App() { return ( - - - + - - - - - } - > -
}> - - - - } + + } > - } - /> +
} + Footer={GitHubBanner} + > + + + + } + > + } + /> - - } /> - } /> - } /> - + + } /> + } /> + } /> + - - - } - /> - - } + + - - } + } + /> + - - } + } + /> + - - - + } + /> }> - - + } - > - } /> - - - - - - - - - + /> + + + + }> + + + } + > + } /> + + + + + + + + ); diff --git a/examples/blog-refine-mantine-strapi/src/components/header/index.tsx b/examples/blog-refine-mantine-strapi/src/components/header/index.tsx index 9c00528c2aae..3d6990a8a941 100644 --- a/examples/blog-refine-mantine-strapi/src/components/header/index.tsx +++ b/examples/blog-refine-mantine-strapi/src/components/header/index.tsx @@ -3,8 +3,6 @@ import { Avatar, Flex, Group, - Header as MantineHeader, - type Sx, Title, useMantineColorScheme, useMantineTheme, @@ -35,30 +33,12 @@ export const Header: React.FC = ({ const borderColor = dark ? theme.colors.dark[6] : theme.colors.gray[2]; - let stickyStyles: Sx = {}; - if (sticky) { - stickyStyles = { - position: "sticky", - top: 0, - zIndex: 1, - }; - } - return ( - + @@ -73,13 +53,13 @@ export const Header: React.FC = ({ {dark ? : } {(user?.name || user?.avatar) && ( - + {user?.name && {user?.name}} )} - + ); }; diff --git a/examples/blog-refine-mantine-strapi/src/pages/posts/create.tsx b/examples/blog-refine-mantine-strapi/src/pages/posts/create.tsx index 829d2dd7fa42..2206a0737c92 100644 --- a/examples/blog-refine-mantine-strapi/src/pages/posts/create.tsx +++ b/examples/blog-refine-mantine-strapi/src/pages/posts/create.tsx @@ -1,5 +1,5 @@ -import { Create, useForm, useSelect } from "@refinedev/mantine"; -import { TextInput, Select } from "@mantine/core"; +import { Create, useForm, useSelect, Select } from "@refinedev/mantine"; +import { TextInput } from "@mantine/core"; import type { ICategory } from "../../interfaces"; diff --git a/examples/blog-refine-mantine-strapi/src/pages/posts/list.tsx b/examples/blog-refine-mantine-strapi/src/pages/posts/list.tsx index fec1c7346584..9e2c9b83f8a2 100644 --- a/examples/blog-refine-mantine-strapi/src/pages/posts/list.tsx +++ b/examples/blog-refine-mantine-strapi/src/pages/posts/list.tsx @@ -77,7 +77,7 @@ export const PostList: React.FC = () => { return ( - +
{getHeaderGroups().map((headerGroup) => ( @@ -114,13 +114,10 @@ export const PostList: React.FC = () => { })}
-
- + + + + ); }; diff --git a/examples/customization-theme-mantine/package.json b/examples/customization-theme-mantine/package.json index ea0cbf3cb175..29d217749f14 100644 --- a/examples/customization-theme-mantine/package.json +++ b/examples/customization-theme-mantine/package.json @@ -11,10 +11,11 @@ }, "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/code-highlight": "^7.13.2", + "@mantine/core": "^7.13.2", + "@mantine/form": "^7.13.2", + "@mantine/hooks": "^7.13.2", + "@mantine/notifications": "^7.13.2", "@refinedev/cli": "^2.16.39", "@refinedev/core": "^4.55.0", "@refinedev/mantine": "^2.33.0", @@ -32,6 +33,9 @@ "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "@vitejs/plugin-react": "^4.2.1", + "postcss": "^8.1.4", + "postcss-preset-mantine": "^1.13.0", + "postcss-simple-vars": "^7.0.1", "typescript": "^5.4.2", "vite": "^5.1.6" } diff --git a/examples/customization-theme-mantine/postcss.config.cjs b/examples/customization-theme-mantine/postcss.config.cjs new file mode 100644 index 000000000000..e817f567beaf --- /dev/null +++ b/examples/customization-theme-mantine/postcss.config.cjs @@ -0,0 +1,14 @@ +module.exports = { + plugins: { + "postcss-preset-mantine": {}, + "postcss-simple-vars": { + variables: { + "mantine-breakpoint-xs": "36em", + "mantine-breakpoint-sm": "48em", + "mantine-breakpoint-md": "62em", + "mantine-breakpoint-lg": "75em", + "mantine-breakpoint-xl": "88em", + }, + }, + }, +}; diff --git a/examples/customization-theme-mantine/src/App.tsx b/examples/customization-theme-mantine/src/App.tsx index e97bc62cf304..310e43058d0e 100644 --- a/examples/customization-theme-mantine/src/App.tsx +++ b/examples/customization-theme-mantine/src/App.tsx @@ -1,3 +1,6 @@ +import "@mantine/core/styles.css"; +import "@mantine/notifications/styles.css"; + import { GitHubBanner, Refine } from "@refinedev/core"; import { ThemedLayoutV2, @@ -5,10 +8,9 @@ import { useNotificationProvider, RefineThemes, } from "@refinedev/mantine"; -import { useLocalStorage } from "@mantine/hooks"; -import { ColorSchemeProvider } from "@mantine/styles"; -import { NotificationsProvider } from "@mantine/notifications"; -import { MantineProvider, type ColorScheme, Global } from "@mantine/core"; + +import { Notifications } from "@mantine/notifications"; +import { MantineProvider } from "@mantine/core"; import dataProvider from "@refinedev/simple-rest"; import routerProvider, { NavigateToResource, @@ -21,79 +23,52 @@ import { PostCreate, PostEdit, PostList, PostShow } from "./pages"; import { Header } from "./components"; const App: React.FC = () => { - const [colorScheme, setColorScheme] = useLocalStorage({ - key: "mantine-color-scheme", - defaultValue: "light", - getInitialValueInEffect: true, - }); - - const toggleColorScheme = (value?: ColorScheme) => - setColorScheme(value || (colorScheme === "dark" ? "light" : "dark")); - return ( - - - + - - - + + + + } > - - - - - } - > - } - /> + } /> - - } /> - } /> - } /> - } /> - + + } /> + } /> + } /> + } /> + - } /> - - - - - - - - + } /> + + + + + + + ); }; diff --git a/examples/customization-theme-mantine/src/components/header/ColorSchemeControl.module.css b/examples/customization-theme-mantine/src/components/header/ColorSchemeControl.module.css new file mode 100644 index 000000000000..ff537d1732c7 --- /dev/null +++ b/examples/customization-theme-mantine/src/components/header/ColorSchemeControl.module.css @@ -0,0 +1,55 @@ +.control { + width: rem(34px); + height: rem(34px); + border-radius: var(--mantine-radius-md); + border: rem(1px) solid; + display: flex; + align-items: center; + justify-content: center; + margin-left: auto; + + @mixin light { + border-color: var(--mantine-color-gray-3); + color: var(--mantine-color-gray-7); + background-color: var(--mantine-color-white); + + @mixin hover { + background-color: var(--mantine-color-gray-0); + } + } + + @mixin dark { + border-color: var(--mantine-color-dark-4); + color: var(--mantine-color-white); + background-color: var(--mantine-color-dark-6); + + @mixin hover { + background-color: var(--mantine-color-dark-5); + } + } +} + +.icon { + width: rem(22px); + height: rem(22px); +} + +.dark { + @mixin dark { + display: none; + } + + @mixin light { + display: block; + } +} + +.light { + @mixin light { + display: none; + } + + @mixin dark { + display: block; + } +} diff --git a/examples/customization-theme-mantine/src/components/header/ColorSchemeControl.tsx b/examples/customization-theme-mantine/src/components/header/ColorSchemeControl.tsx new file mode 100644 index 000000000000..4b6bc78d68fd --- /dev/null +++ b/examples/customization-theme-mantine/src/components/header/ColorSchemeControl.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import cx from "clsx"; +import { useMantineColorScheme, useComputedColorScheme } from "@mantine/core"; +import { IconSun, IconMoon } from "@tabler/icons-react"; +import { UnstyledButton, Tooltip, type BoxProps } from "@mantine/core"; +import classes from "./ColorSchemeControl.module.css"; + +export interface HeaderControlProps extends BoxProps { + tooltip: string; + children: React.ReactNode; +} + +export function ColorSchemeControl() { + const { setColorScheme } = useMantineColorScheme(); + const computedColorScheme = useComputedColorScheme("light", { + getInitialValueInEffect: true, + }); + const dark = computedColorScheme === "dark"; + + return ( + + setColorScheme(dark ? "light" : "dark")} + > + {dark ? ( + + ) : ( + + )} + + + ); +} diff --git a/examples/customization-theme-mantine/src/components/header/header.module.css b/examples/customization-theme-mantine/src/components/header/header.module.css new file mode 100644 index 000000000000..c3406ce87697 --- /dev/null +++ b/examples/customization-theme-mantine/src/components/header/header.module.css @@ -0,0 +1,18 @@ +.header { + background-color: var(--mantine-color-body); + height: 50px; + padding-left: var(--mantine-spacing-md); + padding-right: var(--mantine-spacing-md); + display: flex; + align-items: center; + justify-content: space-between; + vertical-align: middle; + + @mixin light { + border-bottom: rem(1px) solid var(--mantine-color-gray-2); + } + + @mixin dark { + border-bottom: rem(1px) solid var(--mantine-color-dark-8); + } +} diff --git a/examples/customization-theme-mantine/src/components/header/index.tsx b/examples/customization-theme-mantine/src/components/header/index.tsx index df890580cfd0..9e502b984a5f 100644 --- a/examples/customization-theme-mantine/src/components/header/index.tsx +++ b/examples/customization-theme-mantine/src/components/header/index.tsx @@ -1,37 +1,28 @@ -import { - ActionIcon, - Flex, - Header as MantineHeader, - useMantineColorScheme, -} from "@mantine/core"; -import { IconSun, IconMoonStars } from "@tabler/icons-react"; -import { HamburgerMenu } from "@refinedev/mantine"; +import { ActionIcon, Burger, Flex, Group } from "@mantine/core"; + +import { ColorSchemeControl } from "./ColorSchemeControl"; + +import { useThemedLayoutContext } from "@refinedev/mantine"; + +import classes from "./header.module.css"; export const Header: React.FC = () => { - const { colorScheme, toggleColorScheme } = useMantineColorScheme(); - const dark = colorScheme === "dark"; + const { mobileSiderOpen, setMobileSiderOpen } = useThemedLayoutContext(); return ( - - - - toggleColorScheme()} - title="Toggle color scheme" - > - {dark ? : } - - - + setMobileSiderOpen(!mobileSiderOpen)} + size="sm" + hiddenFrom="sm" + /> + + ); }; diff --git a/examples/customization-theme-mantine/src/components/layout/index.tsx b/examples/customization-theme-mantine/src/components/layout/index.tsx new file mode 100644 index 000000000000..dfe680726423 --- /dev/null +++ b/examples/customization-theme-mantine/src/components/layout/index.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import { AppShell } from "@mantine/core"; + +import { + type RefineThemedLayoutV2Props, + ThemedLayoutContextProvider, +} from "@refinedev/mantine"; + +import { + ThemedSiderV2 as DefaultSider, + ThemedHeaderV2 as DefaultHeader, +} from "@refinedev/mantine"; + +export const Layout: React.FC = ({ + Sider, + Header, + Title, + Footer, + OffLayoutArea, + initialSiderCollapsed, + children, +}) => { + const SiderToRender = Sider ?? DefaultSider; + const HeaderToRender = Header ?? DefaultHeader; + + return ( + + + + + + + + + + + + {children} + + {Footer &&