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/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/guides-concepts/authentication/auth-pages/mantine.tsx b/documentation/docs/guides-concepts/authentication/auth-pages/mantine.tsx index 6da2f2bc36c5..36d6d34703eb 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.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 index 3ae4ff6ab08b..2999472a5af8 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.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 index 5c444f655123..2f5ce0d5e2e1 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.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 index 228ea1acd892..e39b6485224c 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.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 index dd943ad9e658..128884ef69e0 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.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 index f92f448b637e..660bf5053b42 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.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 index 1ead8a6f46c3..38b349652d72 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.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 index a745c37a54eb..7f853f360871 100644 --- 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 index d8a8669e7c82..1466166d35a5 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.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 index 5290bd78f5c8..6fedb49fb832 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.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 index 8ff5401eb493..7c498dbbc191 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 @@ -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 index 2086c221a802..47f22875228a 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.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 index 9397f12016b0..463d24a85b84 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.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 index ca5284bd26a2..465ae3e35b87 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.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 index f5082d72ef5a..6a424ece6620 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.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 index 2e1a9055c8ae..064437c2342d 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.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 index f36f90ad4fcb..40da7eeb92c0 100644 --- 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 index 6d9b1ad7988a..970970b4f141 100644 --- 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", diff --git a/examples/auth-mantine/src/App.tsx b/examples/auth-mantine/src/App.tsx index 632973db0ee6..5927d839f468 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 { 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 86cad3cb69c0..ba20cc68bcc6 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 7c545b16ef09..4cf1b5ce2ff2 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 { 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 98ccc47eff7f..6782044e6947 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 f01953d4f516..fb9d4d648be7 100644 --- a/examples/base-mantine/package.json +++ b/examples/base-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", 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 86cad3cb69c0..ba20cc68bcc6 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()} - + { resource: "categories", }); - const { selectProps: tagSelectProps } = useSelect({ + const { selectProps: tagSelectProps } = useMultiSelect({ resource: "tags", }); @@ -69,11 +76,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 a72946bb7f61..0183c444b9cd 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 { 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 { 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,10 @@ export const PostList: React.FC = () => { })} -
- + + + + ); diff --git a/examples/blog-refine-mantine-strapi/package.json b/examples/blog-refine-mantine-strapi/package.json index 5ffa8103e5a4..07049c3d936e 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.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/inferencer": "^4.5.21", diff --git a/examples/blog-refine-mantine-strapi/src/App.tsx b/examples/blog-refine-mantine-strapi/src/App.tsx index 191de1180bf8..794c4da3ff35 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, - 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 5b4fe1d39e16..dccdfc507307 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, - 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 4a3e83b7579b..2541556a0abc 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 { 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 9fd8b6df1a4c..d388a598755b 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/blog-win95/package.json b/examples/blog-win95/package.json index 5e0f58683467..9083f1e8b8ac 100644 --- a/examples/blog-win95/package.json +++ b/examples/blog-win95/package.json @@ -36,7 +36,7 @@ "react-hook-form": "^7.30.0", "react-router-dom": "^6.8.1", "react95": "^4.0.0", - "styled-components": "^5.3.3" + "styled-components": "^6.0.5" }, "devDependencies": { "@types/node": "^18.16.2", diff --git a/examples/customization-theme-mantine/package.json b/examples/customization-theme-mantine/package.json index 6e8555114eaa..dde237d427a0 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.5.1", + "@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", @@ -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 3b44e58e21d7..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, 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..a7854829f79f --- /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, 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..3eb40f51fbc7 --- /dev/null +++ b/examples/customization-theme-mantine/src/components/layout/index.tsx @@ -0,0 +1,58 @@ +import React from "react"; +import { AppShell } from "@mantine/core"; +import { useDisclosure } from "@mantine/hooks"; + +import { + 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 &&