[core] Update @types/react and @types/react-dom to 19

apps/help.mantine.dev/package.json

@@ -37,8 +37,8 @@
     "@mdx-js/loader": "^3.0.0",
     "@types/mdx": "2.0.10",
     "@types/node": "^22.9.1",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "typescript": "5.6.3"
   }
 }

apps/mantine.dev/package.json

@@ -58,7 +58,7 @@
     "@tiptap/react": "^2.9.1",
     "@tiptap/starter-kit": "^2.9.1",
     "@types/node": "^22.9.1",
-    "@types/react": "18.3.12",
+    "@types/react": "19.0.1",
     "chroma-js": "^3.1.2",
     "dayjs": "^1.11.13",
     "embla-carousel": "^7.1.0",

apps/mantine.dev/src/app-shell-examples/examples/index.ts

@@ -21,7 +21,7 @@ import ResponsiveSizesCode from './ResponsiveSizes/code.json';
 import { ResponsiveSizes } from './ResponsiveSizes/ResponsiveSizes';
 
 interface AppShellExampleComponent {
-  component: () => JSX.Element;
+  component: () => React.JSX.Element;
   code: {
     fileName: string;
     language: ShikiLanguage;

apps/mantine.dev/src/combobox-examples/examples/AsyncAutocomplete/AsyncAutocomplete.tsx

@@ -59,7 +59,7 @@ export function AsyncAutocomplete() {
   const [data, setData] = useState<string[] | null>(null);
   const [value, setValue] = useState('');
   const [empty, setEmpty] = useState(false);
-  const abortController = useRef<AbortController>();
+  const abortController = useRef<AbortController | undefined>(null);
 
   const fetchOptions = (query: string) => {
     abortController.current?.abort();

apps/mantine.dev/src/combobox-examples/examples/index.ts

@@ -87,7 +87,7 @@ import TransferListCode from './TransferList/code.json';
 import { TransferList } from './TransferList/TransferList';
 
 interface ComboboxExampleComponent {
-  component: () => JSX.Element;
+  component: () => React.JSX.Element;
   code: {
     fileName: string;
     language: ShikiLanguage;

apps/mantine.dev/src/components/HomePage/DemoTabs/DemoTabs.tsx

@@ -17,7 +17,7 @@ interface DemoTabsProps {
 
 export function DemoTabs({ data, title }: DemoTabsProps) {
   const [shouldAnimate, setShouldAnimate] = useState(false);
-  const animationTimeout = useRef<number>();
+  const animationTimeout = useRef<number>(-1);
   const [active, setActive] = useState(0);
   const theme = useMantineTheme();
   const controlSize = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`) ? 60 : 80;

apps/mantine.dev/src/pages/styles/emotion.mdx

@@ -281,7 +281,7 @@ import { CacheProvider } from '@emotion/react';
 export function RootStyleRegistry({
   children,
 }: {
-  children: JSX.Element;
+  children: React.ReactNode;
 }) {
   const [{ cache, flush }] = useState(() => {
     const cache = createCache({ key: 'my' });

package.json

@@ -138,8 +138,8 @@
     "@types/jest-axe": "^3.5.9",
     "@types/lodash": "^4.17.13",
     "@types/node": "^22.9.1",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "@types/react-transition-group": "^4.4.11",
     "@types/resize-observer-browser": "^0.1.11",
     "@types/rimraf": "^4.0.5",
@@ -201,6 +201,8 @@
   },
   "resolutions": {
     "prosemirror-model": "1.18.1",
-    "@babel/core": "7.26.0"
+    "@babel/core": "7.26.0",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1"
   }
 }

packages/@mantine/core/src/components/AppShell/use-resizing/use-resizing.tsx

@@ -8,8 +8,8 @@ interface UseResizingInput {
 
 export function useResizing({ transitionDuration, disabled }: UseResizingInput) {
   const [resizing, setResizing] = useState(true);
-  const resizingTimeout = useRef<number>();
-  const disabledTimeout = useRef<number>();
+  const resizingTimeout = useRef<number>(-1);
+  const disabledTimeout = useRef<number>(-1);
 
   useWindowEvent('resize', () => {
     setResizing(true);

packages/@mantine/core/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -82,7 +82,7 @@ export const Breadcrumbs = factory<BreadcrumbsFactory>((_props, ref) => {
   const items = Children.toArray(children).reduce<React.ReactNode[]>((acc, child, index, array) => {
     const item = isElement(child) ? (
       cloneElement(child, {
-        ...getStyles('breadcrumb', { className: child.props?.className }),
+        ...getStyles('breadcrumb', { className: (child.props as any)?.className }),
         key: index,
       })
     ) : (

packages/@mantine/core/src/components/Card/Card.tsx

@@ -82,7 +82,7 @@ export const Card = polymorphicFactory<CardFactory>((_props, ref) => {
       return cloneElement(child, {
         'data-first-section': index === 0 || undefined,
         'data-last-section': index === _children.length - 1 || undefined,
-      });
+      } as any);
     }
 
     return child;

packages/@mantine/core/src/components/Collapse/use-collapse.ts

@@ -12,7 +12,7 @@ function getAutoHeightDuration(height: number | string) {
 }
 
 export function getElementHeight(
-  el: React.RefObject<HTMLElement> | { current?: { scrollHeight: number } }
+  el: React.RefObject<HTMLElement | null> | { current?: { scrollHeight: number } }
 ) {
   return el?.current ? el.current.scrollHeight : 'auto';
 }

packages/@mantine/core/src/components/ColorPicker/ColorPicker.tsx

@@ -174,7 +174,7 @@ export const ColorPicker = factory<ColorPickerFactory>((_props, ref) => {
   });
 
   const formatRef = useRef(format);
-  const valueRef = useRef<string>();
+  const valueRef = useRef<string>('');
   const scrubTimeoutRef = useRef<number>(-1);
   const isScrubbingRef = useRef(false);
   const withAlpha = format === 'hexa' || format === 'rgba' || format === 'hsla';

packages/@mantine/core/src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx

@@ -69,7 +69,7 @@ export const ComboboxEventsTarget = factory<ComboboxEventsTargetFactory>((props,
     withAriaAttributes,
     withKeyboardNavigation,
     withExpandedAttribute,
-    onKeyDown: children.props.onKeyDown,
+    onKeyDown: (children.props as any).onKeyDown,
     autoComplete,
   });
 

packages/@mantine/core/src/components/Combobox/ComboboxTarget/ComboboxTarget.tsx

@@ -71,7 +71,7 @@ export const ComboboxTarget = factory<ComboboxTargetFactory>((props, ref) => {
     withAriaAttributes,
     withKeyboardNavigation,
     withExpandedAttribute,
-    onKeyDown: children.props.onKeyDown,
+    onKeyDown: (children.props as any).onKeyDown,
     autoComplete,
   });
 

packages/@mantine/core/src/components/FileButton/FileButton.tsx

@@ -58,7 +58,7 @@ export const FileButton: FileButtonComponent = forwardRef<HTMLInputElement, File
       ...others
     } = useProps('FileButton', defaultProps, props);
 
-    const inputRef = useRef<HTMLInputElement>();
+    const inputRef = useRef<HTMLInputElement>(null);
 
     const onClick = () => {
       !disabled && inputRef.current?.click();

packages/@mantine/core/src/components/FloatingIndicator/FloatingIndicator.tsx

@@ -88,7 +88,7 @@ export const FloatingIndicator = factory<FloatingIndicatorFactory>((_props, ref)
   const { initialized, hidden } = useFloatingIndicator({
     target,
     parent,
-    ref: innerRef,
+    ref: innerRef as any,
     displayAfterTransitionEnd,
   });
   const mergedRef = useMergedRef(ref, innerRef);

packages/@mantine/core/src/components/FloatingIndicator/use-floating-indicator.ts

@@ -33,7 +33,7 @@ export function useFloatingIndicator({
   ref,
   displayAfterTransitionEnd,
 }: UseFloatingIndicatorInput) {
-  const transitionTimeout = useRef<number>();
+  const transitionTimeout = useRef<number>(-1);
   const [initialized, setInitialized] = useState(false);
 
   const [hidden, setHidden] = useState(
@@ -75,8 +75,8 @@ export function useFloatingIndicator({
     }, 30);
   };
 
-  const targetResizeObserver = useRef<ResizeObserver>();
-  const parentResizeObserver = useRef<ResizeObserver>();
+  const targetResizeObserver = useRef<ResizeObserver>(null);
+  const parentResizeObserver = useRef<ResizeObserver>(null);
 
   useEffect(() => {
     updatePosition();

packages/@mantine/core/src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx

@@ -26,8 +26,8 @@ export const HoverCardTarget = forwardRef<HTMLElement, HoverCardTargetProps>((pr
   }
 
   const ctx = useHoverCardContext();
-  const onMouseEnter = createEventHandler(children.props.onMouseEnter, ctx.openDropdown);
-  const onMouseLeave = createEventHandler(children.props.onMouseLeave, ctx.closeDropdown);
+  const onMouseEnter = createEventHandler((children.props as any).onMouseEnter, ctx.openDropdown);
+  const onMouseLeave = createEventHandler((children.props as any).onMouseLeave, ctx.closeDropdown);
 
   const eventListeners = { onMouseEnter, onMouseLeave };
 

packages/@mantine/core/src/components/Menu/MenuItem/MenuItem.tsx

@@ -68,7 +68,7 @@ export const MenuItem = polymorphicFactory<MenuItemFactory>((props, ref) => {
   const ctx = useMenuContext();
   const theme = useMantineTheme();
   const { dir } = useDirection();
-  const itemRef = useRef<HTMLButtonElement>();
+  const itemRef = useRef<HTMLButtonElement>(null);
   const itemIndex = ctx.getItemIndex(itemRef.current!);
   const _others: any = others;
 

packages/@mantine/core/src/components/Menu/MenuTarget/MenuTarget.tsx

@@ -25,8 +25,9 @@ export const MenuTarget = forwardRef<HTMLElement, MenuTargetProps>((props, ref)
   }
 
   const ctx = useMenuContext();
+  const _childrenProps = children.props as any;
 
-  const onClick = createEventHandler(children.props.onClick, () => {
+  const onClick = createEventHandler(_childrenProps.onClick, () => {
     if (ctx.trigger === 'click') {
       ctx.toggleDropdown();
     } else if (ctx.trigger === 'click-hover') {
@@ -38,11 +39,11 @@ export const MenuTarget = forwardRef<HTMLElement, MenuTargetProps>((props, ref)
   });
 
   const onMouseEnter = createEventHandler(
-    children.props.onMouseEnter,
+    _childrenProps.onMouseEnter,
     () => (ctx.trigger === 'hover' || ctx.trigger === 'click-hover') && ctx.openDropdown()
   );
 
-  const onMouseLeave = createEventHandler(children.props.onMouseLeave, () => {
+  const onMouseLeave = createEventHandler(_childrenProps.onMouseLeave, () => {
     if (ctx.trigger === 'hover') {
       ctx.closeDropdown();
     } else if (ctx.trigger === 'click-hover' && !ctx.openedViaClick) {
@@ -57,7 +58,7 @@ export const MenuTarget = forwardRef<HTMLElement, MenuTargetProps>((props, ref)
         onMouseEnter,
         onMouseLeave,
         'data-expanded': ctx.opened ? true : undefined,
-      })}
+      } as any)}
     </Popover.Target>
   );
 });

packages/@mantine/core/src/components/ModalBase/use-lock-scroll.ts

@@ -8,7 +8,7 @@ interface UseScrollLock {
 
 export function useLockScroll({ opened, transitionDuration }: UseScrollLock) {
   const [shouldLockScroll, setShouldLockScroll] = useState(opened);
-  const timeout = useRef<number>();
+  const timeout = useRef<number>(-1);
   const reduceMotion = useReducedMotion();
   const _transitionDuration = reduceMotion ? 0 : transitionDuration;
 

packages/@mantine/core/src/components/NumberInput/NumberInput.tsx

@@ -9,6 +9,7 @@ import {
   factory,
   Factory,
   getSize,
+  noop,
   StylesApiProps,
   useProps,
   useResolvedStylesApi,
@@ -291,7 +292,7 @@ export const NumberInput = factory<NumberInputFactory>((_props, ref) => {
     }
   };
 
-  const incrementRef = useRef<() => void>();
+  const incrementRef = useRef<() => void>(noop);
   incrementRef.current = () => {
     if (!canIncrement(_value)) {
       return;
@@ -322,7 +323,7 @@ export const NumberInput = factory<NumberInputFactory>((_props, ref) => {
     setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);
   };
 
-  const decrementRef = useRef<() => void>();
+  const decrementRef = useRef<() => void>(noop);
   decrementRef.current = () => {
     if (!canIncrement(_value)) {
       return;

packages/@mantine/core/src/components/PillsInput/PillsInput.context.ts

@@ -2,7 +2,7 @@ import { createOptionalContext, MantineSize } from '../../core';
 import { InputVariant } from '../Input';
 
 export interface PillsInputContextValue {
-  fieldRef: React.MutableRefObject<HTMLInputElement | undefined>;
+  fieldRef: React.RefObject<HTMLInputElement | null>;
   size: MantineSize | (string & {});
   disabled: boolean | undefined;
   hasError: boolean | undefined;

packages/@mantine/core/src/components/PillsInput/PillsInput.tsx

@@ -40,7 +40,7 @@ export const PillsInput = factory<PillsInputFactory>((_props, ref) => {
     ...others
   } = props;
 
-  const fieldRef = useRef<HTMLInputElement>();
+  const fieldRef = useRef<HTMLInputElement>(null);
 
   return (
     <PillsInputProvider value={{ fieldRef, size: size!, disabled, hasError: !!error, variant }}>

packages/@mantine/core/src/components/Popover/Popover.context.ts

@@ -17,7 +17,7 @@ interface PopoverContext {
   y: number;
   arrowX: number | undefined;
   arrowY: number | undefined;
-  arrowRef: React.RefObject<HTMLDivElement>;
+  arrowRef: React.RefObject<HTMLDivElement | null>;
   opened: boolean;
   transitionProps?: TransitionOverride;
   reference: (node: HTMLElement) => void;

packages/@mantine/core/src/components/Popover/PopoverTarget/PopoverTarget.tsx

@@ -56,7 +56,11 @@ export const PopoverTarget = factory<PopoverTargetFactory>((props, ref) => {
     ...forwardedProps,
     ...accessibleProps,
     ...ctx.targetProps,
-    className: cx(ctx.targetProps.className, forwardedProps.className, children.props.className),
+    className: cx(
+      ctx.targetProps.className,
+      forwardedProps.className,
+      (children.props as any).className
+    ),
     [refProp!]: targetRef,
     ...(!ctx.controlled ? { onClick: ctx.onToggle } : null),
   });

packages/@mantine/core/src/components/Popover/use-popover.ts

@@ -32,7 +32,7 @@ interface UsePopoverOptions {
   onOpen?: () => void;
   width: PopoverWidth;
   middlewares: PopoverMiddlewares | undefined;
-  arrowRef: React.RefObject<HTMLDivElement>;
+  arrowRef: React.RefObject<HTMLDivElement | null>;
   arrowOffset: number;
   strategy?: FloatingStrategy;
 }

packages/@mantine/core/src/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useEffect, useRef } from 'react';
 import { useDebouncedCallback, useMergedRef } from '@mantine/hooks';
+import { noop } from '../../../core';
 import { useScrollAreaContext } from '../ScrollArea.context';
 import { useScrollbarContext } from '../ScrollAreaScrollbar/Scrollbar.context';
 import { addUnlinkedScrollListener, composeEventHandlers } from '../utils';
@@ -12,7 +13,7 @@ export const Thumb = forwardRef<HTMLDivElement, ThumbProps>((props, forwardedRef
   const scrollbarContext = useScrollbarContext();
   const { onThumbPositionChange } = scrollbarContext;
   const composedRef = useMergedRef(forwardedRef, (node) => scrollbarContext.onThumbChange(node));
-  const removeUnlinkedScrollListenerRef = useRef<() => void>();
+  const removeUnlinkedScrollListenerRef = useRef<(() => void) | undefined>(noop);
   const debounceScrollEnd = useDebouncedCallback(() => {
     if (removeUnlinkedScrollListenerRef.current) {
       removeUnlinkedScrollListenerRef.current();

packages/@mantine/core/src/components/Slider/Slider/Slider.tsx

@@ -207,8 +207,8 @@ export const Slider = factory<SliderFactory>((_props, ref) => {
   });
 
   const valueRef = useRef(_value);
-  const root = useRef<HTMLDivElement>();
-  const thumb = useRef<HTMLDivElement>();
+  const root = useRef<HTMLDivElement>(null);
+  const thumb = useRef<HTMLDivElement>(null);
   const position = getPosition({ value: _value, min: min!, max: max! });
   const scaledValue = scale!(_value);
   const _label = typeof label === 'function' ? label(scaledValue) : label;