chore: run react 19 codemods, bump mantine, fix type errors

Author: GermainBergeron

packages/mantine/package.json

@@ -55,14 +55,14 @@
         "monaco-editor": "0.52.0"
     },
     "devDependencies": {
-        "@mantine/carousel": "7.14.3",
-        "@mantine/code-highlight": "7.14.3",
-        "@mantine/core": "7.14.3",
-        "@mantine/dates": "7.14.3",
-        "@mantine/form": "7.14.3",
-        "@mantine/hooks": "7.14.3",
-        "@mantine/modals": "7.14.3",
-        "@mantine/notifications": "7.14.3",
+        "@mantine/carousel": "7.15.1",
+        "@mantine/code-highlight": "7.15.1",
+        "@mantine/core": "7.15.1",
+        "@mantine/dates": "7.15.1",
+        "@mantine/form": "7.15.1",
+        "@mantine/hooks": "7.15.1",
+        "@mantine/modals": "7.15.1",
+        "@mantine/notifications": "7.15.1",
         "@swc/cli": "0.5.2",
         "@swc/core": "1.9.3",
         "@testing-library/dom": "10.4.0",

packages/mantine/src/__tests__/Utils.tsx

@@ -4,7 +4,7 @@ import {FunctionComponent, PropsWithChildren, ReactElement} from 'react';
 
 import {Plasmantine} from '../theme';
 
-const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>): RenderResult => {
+const customRender = (ui: ReactElement<any>, options?: Omit<RenderOptions, 'queries'>): RenderResult => {
     const TestWrapper: FunctionComponent<PropsWithChildren> = ({children}) => (
         <Plasmantine withCssVariables={false}>{children}</Plasmantine>
     );

packages/mantine/src/components/button/ButtonWithDisabledTooltip.tsx

@@ -1,5 +1,5 @@
 import {Box, Tooltip, TooltipProps} from '@mantine/core';
-import {ReactNode, forwardRef} from 'react';
+import {FunctionComponent, ReactNode} from 'react';
 
 import {createPolymorphicComponent} from '../../utils';
 
@@ -23,18 +23,23 @@ export interface ButtonWithDisabledTooltipProps {
     fullWidth?: boolean;
 }
 
-const _ButtonWithDisabledTooltip = forwardRef<HTMLDivElement, ButtonWithDisabledTooltipProps>(
-    ({disabledTooltip, disabled, children, disabledTooltipProps, fullWidth, ...others}, ref) =>
-        disabledTooltip ? (
-            <Tooltip label={disabledTooltip} disabled={!disabled} {...disabledTooltipProps}>
-                <Box ref={ref} style={{'&:hover': {cursor: 'not-allowed'}, width: fullWidth && '100%'}} {...others}>
-                    {children}
-                </Box>
-            </Tooltip>
-        ) : (
-            <>{children}</>
-        ),
-);
+const _ButtonWithDisabledTooltip: FunctionComponent<ButtonWithDisabledTooltipProps> = ({
+    disabledTooltip,
+    disabled,
+    children,
+    disabledTooltipProps,
+    fullWidth,
+    ...others
+}) =>
+    disabledTooltip ? (
+        <Tooltip label={disabledTooltip} disabled={!disabled} {...disabledTooltipProps}>
+            <Box style={{'&:hover': {cursor: 'not-allowed'}, width: fullWidth && '100%'}} {...others}>
+                {children}
+            </Box>
+        </Tooltip>
+    ) : (
+        <>{children}</>
+    );
 
 export const ButtonWithDisabledTooltip = createPolymorphicComponent<'div', ButtonWithDisabledTooltipProps>(
     _ButtonWithDisabledTooltip,

packages/mantine/src/components/ellipsis-text/EllipsisText.tsx

@@ -52,7 +52,7 @@ export const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref)
     });
 
     const [showTooltip, setShowTooltip] = useState(false);
-    const textRef = useRef<HTMLDivElement>();
+    const textRef = useRef<HTMLDivElement>(null);
 
     const {className: rootClass, ...rootStyles} = getStyles('root');
     const {className: textClass, ...textStyles} = getStyles('text');

packages/mantine/src/components/header/Header.tsx

@@ -99,7 +99,7 @@ export const Header = factory<HeaderFactory>((_props, ref) => {
     });
     const stylesApiProps = {classNames, styles};
 
-    const convertedChildren = Children.toArray(children) as ReactElement[];
+    const convertedChildren = Children.toArray(children) as ReactElement<any>[];
     const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);
     const actions = convertedChildren.find((child) => child.type === HeaderActions);
     const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);

packages/mantine/src/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -37,7 +37,7 @@ export const InlineConfirm = ((_props) => {
     const {children} = useProps('InlineConfirm', defaultProps, _props);
     const [confirmingId, setConfirmingId] = useState<string | null>(null);
 
-    const convertedChildren = Children.toArray(children) as ReactElement[];
+    const convertedChildren = Children.toArray(children) as ReactElement<any>[];
     const prompt = convertedChildren.find(
         (child) => child.type !== InlineConfirmTarget && child.props?.inlineConfirmId === confirmingId,
     );

packages/mantine/src/components/inline-confirm/InlineConfirm.tsx

@@ -17,13 +17,13 @@ interface InlineConfirmPromptProps extends Omit<GroupProps, 'children'>, InlineC
      *
      * @default <Button color="red">Delete</Button>
      */
-    confirm?: ReactElement;
+    confirm?: ReactElement<{onClick?: () => void}>;
     /**
      * Cancel button element
      *
      * @default <Button variant="outline">Cancel</Button>
      */
-    cancel?: ReactElement;
+    cancel?: ReactElement<{onClick?: () => void}>;
     /**
      * Function called when the confirm button is clicked
      */

packages/mantine/src/components/inline-confirm/InlineConfirmPrompt.tsx

@@ -92,7 +92,7 @@ export const Prompt = factory<PromptFactory>((_props, ref) => {
     });
     const stylesApiProps = {classNames, styles};
 
-    const convertedChildren = Children.toArray(children) as ReactElement[];
+    const convertedChildren = Children.toArray(children) as ReactElement<any>[];
 
     const otherChildren = convertedChildren.filter((child) => child.type !== PromptFooter);
     const footer = convertedChildren.find((child) => child.type === PromptFooter);

packages/mantine/src/components/prompt/Prompt.tsx

@@ -125,7 +125,7 @@ export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElem
         unstyled,
     });
 
-    const convertedChildren = Children.toArray(children) as ReactElement[];
+    const convertedChildren = Children.toArray(children) as ReactElement<any>[];
     const header = convertedChildren.find((child) => child.type === TableHeader);
     const footer = convertedChildren.find((child) => child.type === TableFooter);
     const lastUpdated = convertedChildren.find((child) => child.type === TableLastUpdated);
@@ -213,7 +213,7 @@ export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElem
         }
     }, [data]);
 
-    const containerRef = useRef<HTMLDivElement>();
+    const containerRef = useRef<HTMLDivElement>(null);
     useClickOutside(
         () => {
             if (!store.multiRowSelectionEnabled && store.getSelectedRows().length > 0) {

packages/mantine/src/components/table/Table.tsx

@@ -13,7 +13,7 @@ export type TableLayoutProps<TData = unknown> = Pick<
     TableProps<TData>['layoutProps'];
 
 export interface TableLayout {
-    (props: {children: ReactNode}): ReactElement;
+    (props: {children: ReactNode}): ReactElement<any>;
     /**
      * Name of the layout.
      * Will be displayed in the layout control
@@ -28,12 +28,12 @@ export interface TableLayout {
      * Header portion of the table.
      * In the standard row layout that is where column headers would be displayed.
      */
-    Header: <TData>(props: TableLayoutProps<TData>) => ReactElement;
+    Header: <TData>(props: TableLayoutProps<TData>) => ReactElement<any>;
     /**
      * Body portion of the table.
      * In the standard row layout that is where the rows would be displayed.
      */
-    Body: <TData>(props: TableLayoutProps<TData>) => ReactElement;
+    Body: <TData>(props: TableLayoutProps<TData>) => ReactElement<any>;
 }
 
 export interface TableProps<TData> extends BoxProps, StylesApiProps<PlasmaTableFactory> {

packages/mantine/src/components/table/Table.types.ts

@@ -1,6 +1,6 @@
 import {createSafeContext, GetStylesApi} from '@mantine/core';
 import {Table} from '@tanstack/table-core';
-import {MutableRefObject, ReactElement} from 'react';
+import {MutableRefObject, ReactElement, type JSX} from 'react';
 import {type PlasmaTableFactory} from './Table';
 import {TableAction, TableLayout} from './Table.types';
 import {TableStore} from './use-table';
@@ -21,4 +21,4 @@ export interface TableProviderProps<T> {
 
 export const [TableProvider, useTableContext] = createSafeContext<TableContextValue>(
     'Table component was not found in the tree',
-) as [<TData>(props: TableProviderProps<TData>) => ReactElement, <TData>() => TableContextValue<TData>];
+) as [<TData>(props: TableProviderProps<TData>) => ReactElement<any>, <TData>() => TableContextValue<TData>];

packages/mantine/src/components/table/TableContext.tsx

@@ -19,7 +19,7 @@ type TableHeaderActionsFactory = Factory<{
 const defaultProps: Partial<TableHeaderActionsProps> = {};
 
 export const TableHeaderActions = factory<TableHeaderActionsFactory>(
-    (props: TableHeaderActionsProps, ref): ReactElement => {
+    (props: TableHeaderActionsProps, ref): ReactElement<any> => {
         const {store, getStyles, getRowActions} = useTableContext();
         const {style, className, classNames, styles, ...others} = useProps(
             'PlasmaTableHeaderActions',

packages/mantine/src/components/table/table-actions/TableHeaderActions.tsx

@@ -13,7 +13,7 @@ const getElementInnerHeight = (el: HTMLElement): number => {
  */
 export const useParentHeight = (): [number, MutableRefObject<HTMLDivElement>] => {
     const [height, setHeight] = useState(-1);
-    const ref = useRef<HTMLDivElement>();
+    const ref = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         if (ref.current) {

packages/mantine/src/hooks/useParentHeight.ts

@@ -19,13 +19,13 @@
         "@coveord/plasma-react-icons": "workspace:*",
         "@coveord/plasma-tokens": "workspace:*",
         "@faker-js/faker": "9.3.0",
-        "@mantine/code-highlight": "7.14.3",
-        "@mantine/core": "7.14.3",
-        "@mantine/dates": "7.14.3",
-        "@mantine/form": "7.14.3",
-        "@mantine/hooks": "7.14.3",
-        "@mantine/modals": "7.14.3",
-        "@mantine/notifications": "7.14.3",
+        "@mantine/code-highlight": "7.15.1",
+        "@mantine/core": "7.15.1",
+        "@mantine/dates": "7.15.1",
+        "@mantine/form": "7.15.1",
+        "@mantine/hooks": "7.15.1",
+        "@mantine/modals": "7.15.1",
+        "@mantine/notifications": "7.15.1",
         "@mantinex/dev-icons": "1.0.2",
         "@stencil/core": "4.22.3",
         "@swc/helpers": "0.5.15",