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

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)",
   },