chore: migrate to Mantine 9 and React 19 (#2293)

apps/client/package.json

@@ -20,13 +20,13 @@
     "@casl/react": "5.0.1",
     "@docmost/editor-ext": "workspace:*",
     "@excalidraw/excalidraw": "0.18.0-3a5ef40",
-    "@mantine/core": "8.3.18",
+    "@mantine/core": "9.3.2",
-    "@mantine/dates": "8.3.18",
+    "@mantine/dates": "9.3.2",
-    "@mantine/form": "8.3.18",
+    "@mantine/form": "9.3.2",
-    "@mantine/hooks": "8.3.18",
+    "@mantine/hooks": "9.3.2",
-    "@mantine/modals": "8.3.18",
+    "@mantine/modals": "9.3.2",
-    "@mantine/notifications": "8.3.18",
+    "@mantine/notifications": "9.3.2",
-    "@mantine/spotlight": "8.3.18",
+    "@mantine/spotlight": "9.3.2",
     "@slidoapp/emoji-mart": "5.8.7",
     "@slidoapp/emoji-mart-data": "1.2.4",
     "@slidoapp/emoji-mart-react": "1.1.5",
@@ -51,9 +51,9 @@
     "mermaid": "11.15.0",
     "mitt": "3.0.1",
     "posthog-js": "1.372.2",
-    "react": "18.3.1",
+    "react": "19.2.7",
     "react-clear-modal": "^2.0.18",
-    "react-dom": "^18.3.1",
+    "react-dom": "19.2.7",
     "react-drawio": "1.0.7",
     "react-error-boundary": "6.1.1",
     "react-helmet-async": "3.0.0",
@@ -73,8 +73,8 @@
     "@types/js-cookie": "3.0.6",
     "@types/katex": "0.16.8",
     "@types/node": "22.19.1",
-    "@types/react": "18.3.12",
+    "@types/react": "19.2.17",
-    "@types/react-dom": "18.3.1",
+    "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "6.0.1",
     "eslint": "9.28.0",
     "eslint-plugin-react": "7.37.5",

apps/client/src/ee/ai/components/editor/ai-menu/ai-menu.tsx

@@ -1,7 +1,14 @@
 import { Editor } from "@tiptap/react";
 import { ActionIcon, TextInput } from "@mantine/core";
 import { useDebouncedCallback, useMediaQuery } from "@mantine/hooks";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type JSX,
+} from "react";
 import { createPortal } from "react-dom";
 import { useAtom } from "jotai";
 import { IconArrowUp } from "@tabler/icons-react";

apps/client/src/ee/audit/components/audit-logs-table.tsx

@@ -301,7 +301,7 @@ export default function AuditLogsTable({
                   {expandable && (
                     <Table.Tr className={classes.detailRow}>
                       <Table.Td colSpan={4} p={0}>
-                        <Collapse in={isExpanded}>
+                        <Collapse expanded={isExpanded}>
                           <Box
                             px="md"
                             py="sm"

apps/client/src/ee/billing/components/billing-plans.tsx

@@ -103,7 +103,7 @@ export default function BillingPlans() {
               label="Team size"
               description="Select the number of users"
               value={selectedTierValue}
-              onChange={setSelectedTierValue}
+              onChange={(value) => setSelectedTierValue(value)}
               data={selectData}
               w={250}
               size="md"

apps/client/src/ee/mfa/components/mfa-setup-modal.tsx

@@ -193,7 +193,7 @@ export function MfaSetupModal({
                     </Group>
                   </UnstyledButton>
 
-                  <Collapse in={manualEntryOpen}>
+                  <Collapse expanded={manualEntryOpen}>
                     <Alert
                       icon={<IconAlertCircle size={20} />}
                       color="gray"

apps/client/src/features/editor/components/columns/columns-menu.tsx

@@ -69,7 +69,7 @@ export function ColumnsMenu({ editor }: EditorMenuProps) {
   const { t } = useTranslation();
   const [isCountOpen, setIsCountOpen] = useState(false);
   const [copied, setCopied] = useState(false);
-  const copyTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const copyTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const nodesWithMenus = [
     "callout",

apps/client/src/features/editor/components/subpages/subpages-menu.tsx

@@ -1,7 +1,7 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { posToDOMRect, findParentNode } from "@tiptap/react";
 import { Node as PMNode } from "@tiptap/pm/model";
-import React, { useCallback } from "react";
+import React, { useCallback, type JSX } from "react";
 import { ActionIcon, Tooltip } from "@mantine/core";
 import { IconTrash } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";

apps/client/src/features/editor/components/table/table-cell-menu.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, type JSX } from "react";
 import {
   EditorMenuProps,
   ShouldShowProps,

apps/client/src/features/editor/components/table/table-menu.tsx

@@ -1,6 +1,6 @@
 import { posToDOMRect, findParentNode } from "@tiptap/react";
 import { Node as PMNode } from "@tiptap/pm/model";
-import React, { useCallback } from "react";
+import React, { useCallback, type JSX } from "react";
 import {
   EditorMenuProps,
   ShouldShowProps,

apps/client/src/features/share/components/share-shell.tsx

@@ -64,7 +64,7 @@ export default function ShareShell({
   const [fullWidth, setFullWidth] = useAtom(sharedPageFullWidthAtom);
   const [sidebarWidth, setSidebarWidth] = useAtom(sidebarWidthAtom);
   const [isResizing, setIsResizing] = useState(false);
-  const sidebarRef = useRef<HTMLElement | null>(null);
+  const sidebarRef = useRef<HTMLDivElement>(null);
 
   const startResizing = useCallback((e: React.MouseEvent) => {
     e.preventDefault();

apps/client/src/features/workspace/components/members/components/workspace-invite-form.tsx

@@ -80,7 +80,7 @@ export function WorkspaceInviteForm({ onClose }: Props) {
           defaultValue={UserRole.MEMBER}
           allowDeselect={false}
           checkIconPosition="right"
-          onChange={setRole}
+          onChange={(value) => setRole(value)}
         />
 
         <MultiGroupSelect

apps/client/src/theme.ts

@@ -3,6 +3,7 @@ import {
   CSSVariablesResolver,
   MantineColorsTuple,
   Tabs,
+  v8CssVariablesResolver,
 } from "@mantine/core";
 
 const blue: MantineColorsTuple = [
@@ -68,9 +69,11 @@ export const theme = createTheme({
 
 export const mantineCssResolver: CSSVariablesResolver = (theme) => ({
   variables: {
+    ...v8CssVariablesResolver(theme).variables,
     "--input-error-size": theme.fontSizes.sm,
   },
   light: {
+    ...v8CssVariablesResolver(theme).light,
     "--mantine-color-dimmed": "#4b5563",
     "--mantine-color-dark-light-color": "#4e5359",
     "--mantine-color-dark-light-hover": "var(--mantine-color-gray-light-hover)",
@@ -105,6 +108,7 @@ export const mantineCssResolver: CSSVariablesResolver = (theme) => ({
     "--mantine-color-green-light-color": "#1B5E20",
   },
   dark: {
+    ...v8CssVariablesResolver(theme).dark,
     "--mantine-color-dark-light-color": "var(--mantine-color-gray-4)",
     "--mantine-color-dark-light-hover": "var(--mantine-color-default-hover)",
   },

apps/server/package.json

@@ -106,7 +106,7 @@
     "pino-pretty": "^13.1.3",
     "postgres": "^3.4.8",
     "postmark": "^4.0.7",
-    "react": "^18.3.1",
+    "react": "19.2.7",
     "react-email": "6.0.8",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.2",