[refactor] Replace global JSX with React.JSX

The global JSX namespace has been removed in react 19. See https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript
mantinedev · Nov 27, 2024 · 9ab47ed · 9ab47ed
1 parent c83f5b0
commit 9ab47ed
Show file tree

Hide file tree

Showing 14 changed files with 15 additions and 15 deletions.
diff --git a/packages/@mantine-tests/core/src/shared/it-throws-context-error.tsx b/packages/@mantine-tests/core/src/shared/it-throws-context-error.tsx
@@ -3,7 +3,7 @@ import { render } from '../render';
 
 interface Options<Props = any> {
   component: React.ComponentType<Props>;
-  props: Props & JSX.IntrinsicAttributes;
+  props: Props & React.JSX.IntrinsicAttributes;
   error: string;
 }
 

diff --git a/packages/@mantine/core/src/components/FileInput/FileInput.tsx b/packages/@mantine/core/src/components/FileInput/FileInput.tsx
@@ -201,6 +201,6 @@ type FileInputComponent = (<Multiple extends boolean = false>(
   props: FileInputProps<Multiple> & {
     ref?: React.ForwardedRef<HTMLButtonElement>;
   }
-) => JSX.Element) & { extend: typeof _FileInput.extend };
+) => React.JSX.Element) & { extend: typeof _FileInput.extend };
 
 export const FileInput: FileInputComponent = _FileInput as any;
diff --git a/packages/@mantine/core/src/components/Transition/Transition.tsx b/packages/@mantine/core/src/components/Transition/Transition.tsx
@@ -22,7 +22,7 @@ export interface TransitionProps {
   mounted: boolean;
 
   /** Render function with transition styles argument */
-  children: (styles: React.CSSProperties) => JSX.Element;
+  children: (styles: React.CSSProperties) => React.JSX.Element;
 
   /** Called when exit transition ends */
   onExited?: () => void;

diff --git a/packages/@mantine/core/src/core/factory/create-polymorphic-component.ts b/packages/@mantine/core/src/core/factory/create-polymorphic-component.ts
@@ -1,9 +1,9 @@
 type ExtendedProps<Props = {}, OverrideProps = {}> = OverrideProps &
   Omit<Props, keyof OverrideProps>;
 
-type ElementType = keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>;
+type ElementType = keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<any>;
 
-type PropsOf<C extends ElementType> = JSX.LibraryManagedAttributes<
+type PropsOf<C extends ElementType> = React.JSX.LibraryManagedAttributes<
   C,
   React.ComponentPropsWithoutRef<C>
 >;

diff --git a/packages/@mantine/dates/src/components/DatePicker/DatePicker.tsx b/packages/@mantine/dates/src/components/DatePicker/DatePicker.tsx
@@ -59,7 +59,7 @@ const defaultProps: Partial<DatePickerProps> = {
 
 type DatePickerComponent = (<Type extends DatePickerType = 'default'>(
   props: DatePickerProps<Type> & { ref?: React.ForwardedRef<HTMLDivElement> }
-) => JSX.Element) & { displayName?: string } & MantineComponentStaticProperties<DatePickerFactory>;
+) => React.JSX.Element) & { displayName?: string } & MantineComponentStaticProperties<DatePickerFactory>;
 
 export const DatePicker: DatePickerComponent = factory<DatePickerFactory>((_props, ref) => {
   const props = useProps('DatePicker', defaultProps, _props);

diff --git a/packages/@mantine/dates/src/components/DatePickerInput/DatePickerInput.tsx b/packages/@mantine/dates/src/components/DatePickerInput/DatePickerInput.tsx
@@ -45,7 +45,7 @@ const defaultProps: Partial<DatePickerInputProps> = {
 
 type DatePickerInputComponent = (<Type extends DatePickerType = 'default'>(
   props: DatePickerInputProps<Type> & { ref?: React.ForwardedRef<HTMLButtonElement> }
-) => JSX.Element) & {
+) => React.JSX.Element) & {
   displayName?: string;
 } & MantineComponentStaticProperties<DatePickerInputFactory>;
 

diff --git a/packages/@mantine/dates/src/components/MonthPicker/MonthPicker.tsx b/packages/@mantine/dates/src/components/MonthPicker/MonthPicker.tsx
@@ -61,7 +61,7 @@ const defaultProps: Partial<MonthPickerProps> = {
 
 type MonthPickerComponent = (<Type extends DatePickerType = 'default'>(
   props: MonthPickerProps<Type> & { ref?: React.ForwardedRef<HTMLDivElement> }
-) => JSX.Element) & { displayName?: string } & MantineComponentStaticProperties<MonthPickerFactory>;
+) => React.JSX.Element) & { displayName?: string } & MantineComponentStaticProperties<MonthPickerFactory>;
 
 export const MonthPicker: MonthPickerComponent = factory<MonthPickerFactory>((_props, ref) => {
   const props = useProps('MonthPicker', defaultProps, _props);

diff --git a/packages/@mantine/dates/src/components/MonthPickerInput/MonthPickerInput.tsx b/packages/@mantine/dates/src/components/MonthPickerInput/MonthPickerInput.tsx
@@ -48,7 +48,7 @@ const defaultProps: Partial<MonthPickerInputProps> = {
 
 type MonthPickerInputComponent = (<Type extends DatePickerType = 'default'>(
   props: MonthPickerInputProps<Type> & { ref?: React.ForwardedRef<HTMLButtonElement> }
-) => JSX.Element) & {
+) => React.JSX.Element) & {
   displayName?: string;
 } & MantineComponentStaticProperties<MonthPickerInputFactory>;
 

diff --git a/packages/@mantine/dates/src/components/YearPicker/YearPicker.tsx b/packages/@mantine/dates/src/components/YearPicker/YearPicker.tsx
@@ -44,7 +44,7 @@ const defaultProps: Partial<YearPickerProps> = {
 
 type YearPickerComponent = (<Type extends DatePickerType = 'default'>(
   props: YearPickerProps<Type> & { ref?: React.ForwardedRef<HTMLDivElement> }
-) => JSX.Element) & { displayName?: string } & MantineComponentStaticProperties<YearPickerFactory>;
+) => React.JSX.Element) & { displayName?: string } & MantineComponentStaticProperties<YearPickerFactory>;
 
 export const YearPicker: YearPickerComponent = factory<YearPickerFactory>((_props, ref) => {
   const props = useProps('YearPicker', defaultProps, _props);

diff --git a/packages/@mantine/dates/src/components/YearPickerInput/YearPickerInput.tsx b/packages/@mantine/dates/src/components/YearPickerInput/YearPickerInput.tsx
@@ -45,7 +45,7 @@ const defaultProps: Partial<YearPickerInputProps> = {
 
 type YearPickerInputComponent = (<Type extends DatePickerType = 'default'>(
   props: YearPickerInputProps<Type> & { ref?: React.ForwardedRef<HTMLButtonElement> }
-) => JSX.Element) & {
+) => React.JSX.Element) & {
   displayName?: string;
 } & MantineComponentStaticProperties<YearPickerInputFactory>;
 

diff --git a/packages/@mantine/dropzone/src/DropzoneStatus.tsx b/packages/@mantine/dropzone/src/DropzoneStatus.tsx
@@ -17,7 +17,7 @@ function createDropzoneStatus(status: keyof DropzoneContextValue) {
     const _children = isElement(children) ? children : <span>{children}</span>;
 
     if (ctx[status]) {
-      return cloneElement(_children as JSX.Element, others);
+      return cloneElement(_children as React.JSX.Element, others);
     }
 
     return null;

diff --git a/packages/@mantine/form/src/Form/Form.tsx b/packages/@mantine/form/src/Form/Form.tsx
@@ -9,7 +9,7 @@ export interface FormProps<Form extends UseFormReturnType<any>>
 
 export type FormComponent = (<Form extends UseFormReturnType<any>>(
   props: FormProps<Form>
-) => JSX.Element | React.ReactNode) & { displayName?: string };
+) => React.JSX.Element | React.ReactNode) & { displayName?: string };
 
 export const Form: FormComponent = forwardRef(
   <Form extends UseFormReturnType<any>>(

diff --git a/packages/@mantinex/demo/src/ConfiguratorDemo/ConfiguratorDemo.tsx b/packages/@mantinex/demo/src/ConfiguratorDemo/ConfiguratorDemo.tsx
@@ -95,7 +95,7 @@ export function ConfiguratorDemo({
         dimmed={dimmed}
         striped={striped}
       >
-        {cloneElement(children as JSX.Element, state)}
+        {cloneElement(children as React.JSX.Element, state)}
       </DemoColumns>
       <DemoCode code={getCodeArray({ code, controls, state })} />
     </DemoRoot>

diff --git a/packages/@mantinex/demo/src/StylesApiDemo/StylesApiDemo.tsx b/packages/@mantinex/demo/src/StylesApiDemo/StylesApiDemo.tsx
@@ -60,7 +60,7 @@ export function StylesApiDemo({
           title="Component Styles API"
           description="Hover over selectors to highlight corresponding elements"
         >
-          {cloneElement(children as JSX.Element, {
+          {cloneElement(children as React.JSX.Element, {
             classNames: selectors.reduce<Record<string, string>>((acc, item) => {
               acc[item] = item;
               return acc;