MUI: Compat with React 19 types

apps/local-ui-lib/index.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 export const bounceAnim: string;
 export const Button: React.ComponentType<
   JSX.IntrinsicElements['button'] & {

docs/data/base/components/modal/UseModal.tsx

@@ -39,7 +39,7 @@ export default function UseModal() {
 }
 
 interface ModalProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   closeAfterTransition?: boolean;
   container?: Element | (() => Element | null) | null;
   disableAutoFocus?: boolean;

docs/data/base/components/popper/PlacementPopper.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Popper, PopperPlacementType } from '@mui/base/Popper';
 
+import type { JSX } from "react";
+
 function Radio({ value, ...props }: JSX.IntrinsicElements['input']) {
   return (
     <span>

docs/data/base/components/popup/Placement.tsx

@@ -5,6 +5,8 @@ import {
 } from '@mui/base/Unstable_Popup';
 import { styled, css, Theme } from '@mui/system';
 
+import type { JSX } from "react";
+
 function Radio({ value, ...props }: JSX.IntrinsicElements['input']) {
   return (
     <span>

docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx

@@ -9,6 +9,8 @@ import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { styled } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
+import type { JSX } from "react";
+
 const Select = React.forwardRef(function Select<
   TValue extends {},
   Multiple extends boolean,

docs/data/base/components/select/UnstyledSelectForm.tsx

@@ -9,6 +9,8 @@ import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { styled } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
+import type { JSX } from "react";
+
 export default function UnstyledSelectForm() {
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();

docs/data/base/components/transitions/ReactTransitionGroup.tsx

@@ -115,7 +115,7 @@ function PopupWithTrigger(props: PopupProps) {
   );
 }
 
-function MaterialUITransitionAdapter(props: { children: React.ReactElement }) {
+function MaterialUITransitionAdapter(props: { children: React.ReactElement<any> }) {
   const { requestedEnter, onExited } = useTransitionStateManager();
   const { children } = props;
 

docs/data/base/getting-started/accessibility/KeyboardNavigation.tsx

@@ -13,6 +13,8 @@ import { MenuItem as BaseMenuItem, menuItemClasses } from '@mui/base/MenuItem';
 import { styled, alpha } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
+import type { JSX } from "react";
+
 export default function KeyboardNavigation() {
   return (
     <Container>

docs/data/joy/components/autocomplete/AutocompleteHint.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import Autocomplete from '@mui/joy/Autocomplete';
 import { Typography, styled } from '@mui/joy';
 
+import type { JSX } from "react";
+
 const StyledDiv = styled('div')({
   flex: 1, // stretch to fill the root slot
   minWidth: 0, // won't push end decorator out of the autocomplete

docs/data/joy/components/input/DebouncedInput.tsx

@@ -11,7 +11,7 @@ type DebounceProps = {
 function DebounceInput(props: InputProps & DebounceProps) {
   const { handleDebounce, debounceTimeout, ...rest } = props;
 
-  const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     clearTimeout(timerRef.current);

docs/data/joy/components/input/FloatingLabelInput.tsx

@@ -3,6 +3,8 @@ import { styled } from '@mui/joy/styles';
 import Input from '@mui/joy/Input';
 import CheckCircleOutlined from '@mui/icons-material/CheckCircleOutlined';
 
+import type { JSX } from "react";
+
 const StyledInput = styled('input')({
   border: 'none', // remove the native input border
   minWidth: 0, // remove the native input width

docs/data/joy/components/menu/MenuIconSideNavExample.tsx

@@ -15,7 +15,7 @@ import MenuButton from '@mui/joy/MenuButton';
 // https://popper.js.org/docs/v2/modifiers/offset/
 interface MenuButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
-  menu: React.ReactElement;
+  menu: React.ReactElement<any>;
   open: boolean;
   onOpen: (
     event?:

docs/data/joy/components/menu/MenuToolbarExample.tsx

@@ -10,6 +10,8 @@ import Dropdown, { DropdownProps } from '@mui/joy/Dropdown';
 import MenuButton from '@mui/joy/MenuButton';
 import { Theme } from '@mui/joy';
 
+import type { JSX } from "react";
+
 type MenuBarButtonProps = Pick<DropdownProps, 'children' | 'open'> & {
   onOpen: DropdownProps['onOpenChange'];
   onKeyDown: React.KeyboardEventHandler;

docs/data/joy/components/snackbar/SnackbarHideDuration.tsx

@@ -10,7 +10,7 @@ export default function SnackbarHideDuration() {
   const [open, setOpen] = React.useState(false);
   const [duration, setDuration] = React.useState<undefined | number>();
   const [left, setLeft] = React.useState<undefined | number>();
-  const timer = React.useRef<undefined | number>();
+  const timer = React.useRef<undefined | number>(undefined);
   const countdown = () => {
     timer.current = window.setInterval(() => {
       setLeft((prev) => (prev === undefined ? prev : Math.max(0, prev - 100)));

docs/data/joy/components/textarea/FloatingLabelTextarea.tsx

@@ -3,6 +3,8 @@ import { TextareaAutosize } from '@mui/base/TextareaAutosize';
 import { styled } from '@mui/joy/styles';
 import Textarea from '@mui/joy/Textarea';
 
+import type { JSX } from "react";
+
 const StyledTextarea = styled(TextareaAutosize)({
   resize: 'none',
   border: 'none', // remove the native textarea border

docs/data/joy/getting-started/templates/files/components/Menu.tsx

@@ -4,7 +4,7 @@ import MenuItem from '@mui/joy/MenuItem';
 import { ListActionTypes } from '@mui/base/useList';
 
 export default function Menu(props: {
-  control: React.ReactElement;
+  control: React.ReactElement<any>;
   id: string;
   menus: Array<{ label: string } & { [k: string]: any }>;
 }) {

docs/data/material/components/app-bar/ElevateAppBar.tsx

@@ -13,7 +13,7 @@ interface Props {
    * You won't need it on your project.
    */
   window?: () => Window;
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
 }
 
 function ElevationScroll(props: Props) {

docs/data/material/components/modal/SpringModal.tsx

@@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography';
 import { useSpring, animated } from '@react-spring/web';
 
 interface FadeProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   in?: boolean;
   onClick?: any;
   onEnter?: (node: HTMLElement, isAppearing: boolean) => void;

docs/data/material/components/progress/CircularIntegration.tsx

@@ -10,7 +10,7 @@ import SaveIcon from '@mui/icons-material/Save';
 export default function CircularIntegration() {
   const [loading, setLoading] = React.useState(false);
   const [success, setSuccess] = React.useState(false);
-  const timer = React.useRef<ReturnType<typeof setTimeout>>();
+  const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const buttonSx = {
     ...(success && {

docs/data/material/components/progress/DelayingAppearance.tsx

@@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography';
 export default function DelayingAppearance() {
   const [loading, setLoading] = React.useState(false);
   const [query, setQuery] = React.useState('idle');
-  const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   React.useEffect(
     () => () => {

docs/src/components/header/HeaderNavBar.tsx

@@ -14,6 +14,8 @@ import ROUTES from 'docs/src/route';
 import { Link } from '@mui/docs/Link';
 import MuiProductSelector from 'docs/src/modules/components/MuiProductSelector';
 
+import type { JSX } from "react";
+
 const Navigation = styled('nav')(({ theme }) => [
   {
     '& > div': {

docs/src/components/home/StoreTemplatesBanner.tsx

@@ -6,6 +6,8 @@ import LaunchRounded from '@mui/icons-material/LaunchRounded';
 import Slide from 'docs/src/components/animation/Slide';
 import FadeDelay from 'docs/src/components/animation/FadeDelay';
 
+import type { JSX } from "react";
+
 const ratio = 900 / 494;
 
 // 'transparent' is interpreted as transparent black in Safari

docs/src/components/icon/IconImage.tsx

@@ -3,6 +3,8 @@ import { useTheme, styled, Theme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { SxProps } from '@mui/system';
 
+import type { JSX } from "react";
+
 export type IconImageProps = {
   name:
     | 'product-core'

docs/src/components/markdown/MarkdownElement.tsx

@@ -6,6 +6,8 @@ import {
   styled,
 } from '@mui/material/styles';
 
+import type { JSX } from "react";
+
 const Root = styled('div')(({ theme }) => ({
   ...theme.typography.caption,
   color: (theme.vars || theme).palette.text.primary,

docs/src/components/productBaseUI/components/BaseInputDemo.tsx

@@ -5,6 +5,8 @@ import Box from '@mui/material/Box';
 import { Input } from '@mui/base/Input';
 import { styled, GlobalStyles } from '@mui/system';
 
+import type { JSX } from "react";
+
 const fieldStyles = `
   --TextInput-height: 64px;
   --TextInput-paddingTop: 2rem;

docs/src/components/typography/SectionHeadline.tsx

@@ -11,7 +11,7 @@ interface SectionHeadlineProps {
    */
   inverted?: boolean;
   overline?: React.ReactNode;
-  title: string | React.ReactElement;
+  title: string | React.ReactElement<any>;
 }
 
 export default function SectionHeadline(props: SectionHeadlineProps) {

docs/src/modules/components/JoyThemeBuilder.tsx

@@ -983,7 +983,7 @@ function filterGlobalVariantTokens(palette: Partial<PaletteVariant>, variant: Va
   return tokens;
 }
 
-type StateReducer<T> = (state: T, action: Partial<T>) => T;
+type State = { hover: boolean; active: boolean; disabled: boolean };
 
 function GlobalVariantForm({
   color,
@@ -1001,13 +1001,17 @@ function GlobalVariantForm({
   onRemove: (token: string) => void;
 }) {
   const [selectedVariant, setSelectedVariant] = React.useState<VariantProp>('solid');
-  const [states, setStates] = React.useReducer<
-    StateReducer<{ hover: boolean; active: boolean; disabled: boolean }>
-  >((prevState, action) => ({ ...prevState, ...action }), {
-    hover: false,
-    active: false,
-    disabled: false,
-  });
+  const [states, setStates] = React.useReducer(
+    (prevState, action: Partial<State>) => ({
+      ...prevState,
+      ...action,
+    }),
+    {
+      hover: false,
+      active: false,
+      disabled: false,
+    },
+  );
   const themeDefaultValue = filterGlobalVariantTokens(themeDefaultValueProp, selectedVariant);
   const value = filterGlobalVariantTokens(valueProp, selectedVariant);
   const mergedValue = { ...themeDefaultValue, ...value };
@@ -1273,7 +1277,7 @@ function getAvailableTokens(colorSchemes: any, colorMode: 'light' | 'dark') {
   return tokens;
 }
 
-function TemplatesDialog({ children, data }: { children: React.ReactElement; data: any }) {
+function TemplatesDialog({ children, data }: { children: React.ReactElement<any>; data: any }) {
   const [open, setOpen] = React.useState(false);
   const { map: templateMap } = sourceJoyTemplates();
   const renderItem = (name: string, item: TemplateData) => {

docs/src/modules/utils/useClipboardCopy.ts

@@ -3,7 +3,7 @@ import clipboardCopy from 'clipboard-copy';
 
 export default function useClipboardCopy() {
   const [isCopied, setIsCopied] = React.useState(false);
-  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
   const mounted = React.useRef(false);
 
   React.useEffect(() => {

docs/src/pages/premium-themes/onepirate/modules/withRoot.tsx

@@ -3,6 +3,8 @@ import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from './theme';
 
+import type { JSX } from "react";
+
 export default function withRoot<P extends JSX.IntrinsicAttributes>(
   Component: React.ComponentType<P>,
 ) {

docs/types/docs.d.ts

@@ -1,29 +1,31 @@
 declare module 'docs/src/modules/components/HighlightedCode' {
-  import * as React from 'react';
-  import { StyledComponentProps } from '@mui/material/styles';
+ import * as React from 'react';
+ import { StyledComponentProps } from '@mui/material/styles';
 
-  type ClassKey = 'root';
-  export interface Props extends StyledComponentProps<ClassKey> {
-    className?: string;
-    /**
-     * plain string
-     */
-    code: string;
-    copyButtonHidden?: boolean;
-    copyButtonProps?: JSX.IntrinsicElements['button'];
-    /**
-     * short identifier of the code language
-     * see @mui/internal-markdown/prism for possible languages
-     */
-    language: string;
-    /**
-     * The component used for the root node.
-     * @default MarkdownElement
-     */
-    component?: React.ElementType;
-    sx?: object;
-  }
-  export default function HighlightedCode(props: Props): React.ReactElement;
+ import type { JSX } from "react";
+
+ type ClassKey = 'root';
+ export interface Props extends StyledComponentProps<ClassKey> {
+   className?: string;
+   /**
+    * plain string
+    */
+   code: string;
+   copyButtonHidden?: boolean;
+   copyButtonProps?: JSX.IntrinsicElements['button'];
+   /**
+    * short identifier of the code language
+    * see @mui/internal-markdown/prism for possible languages
+    */
+   language: string;
+   /**
+    * The component used for the root node.
+    * @default MarkdownElement
+    */
+   component?: React.ElementType;
+   sx?: object;
+ }
+ export default function HighlightedCode(props: Props): React.ReactElement;
 }
 
 declare module 'react-imask';

package.json

@@ -213,8 +213,9 @@
     "@definitelytyped/typescript-versions": "^0.1.1",
     "@definitelytyped/utils": "^0.1.5",
     "@types/node": "^18.19.22",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "18.2.19",
+    "@types/react": "npm:@eps1lon/react-19-types",
+    "@types/react-dom": "npm:@eps1lon/react-dom-19-types",
+    "@types/react-is": "npm:@eps1lon/react-is-19-types",
     "cross-fetch": "^4.0.0"
   },
   "nyc": {

packages-internal/scripts/typescript-to-proptypes/test/boolean-values/optional/input.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 type Props = {
   foo?: boolean;
   bar?: true;

packages-internal/scripts/typescript-to-proptypes/test/boolean-values/required/input.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 type Props = {
   foo: boolean;
   bar: true;

packages-internal/scripts/typescript-to-proptypes/test/code-order/input.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import type { JSX } from "react";
+
 export interface Props {
   value: unknown;
 }

packages-internal/scripts/typescript-to-proptypes/test/default-value/input.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 interface Props {
   /**
    * The type of the button relevant to its `<form>`.

packages-internal/scripts/typescript-to-proptypes/test/generator/html-elements/input.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 export function Foo(props: {
   element: Element;
   optional?: Element;

packages-internal/scripts/typescript-to-proptypes/test/generic/input.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 type Type = 'one' | 'two' | 'three'
 
 interface ParentProps<T extends Type> {

packages-internal/scripts/typescript-to-proptypes/test/getThemeProps/input.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
 
+import type { JSX } from "react";
+
 export default function Modal(props: React.HTMLAttributes<HTMLDivElement>): JSX.Element;