[typescript] Cherry pick React 19 type PRs to v5.x (#44577)

docs/data/base/components/select/select.md

@@ -60,7 +60,7 @@ const CustomSelect = React.forwardRef(function CustomSelect<TValue>(
   return <Select {...props} ref={ref} />;
 }) as <TValue>(
   props: SelectProps<TValue> & React.RefAttributes<HTMLUListElement>,
-) => JSX.Element;
+) => React.JSX.Element;
 ```
 
 For the sake of brevity, the rest of the demos throughout this doc will not use `forwardRef`.

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

@@ -7,7 +7,7 @@ import Box from '@mui/joy/Box';
 function DebounceInput(props) {
   const { handleDebounce, debounceTimeout, ...rest } = props;
 
-  const timerRef = React.useRef();
+  const timerRef = React.useRef(undefined);
 
   const handleChange = (event) => {
     clearTimeout(timerRef.current);

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

@@ -11,7 +11,9 @@ 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>(
+    undefined,
+  );
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     clearTimeout(timerRef.current);

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

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

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

@@ -10,9 +10,9 @@ 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<ReturnType<typeof setInterval> | undefined>(undefined);
   const countdown = () => {
-    timer.current = window.setInterval(() => {
+    timer.current = setInterval(() => {
       setLeft((prev) => (prev === undefined ? prev : Math.max(0, prev - 100)));
     }, 100);
   };

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

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

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<any>;
+  children: React.ReactElement<{ elevation?: number }>;
 }
 
 function ElevationScroll(props: Props) {

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

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

docs/data/material/components/autocomplete/Virtualize.tsx

@@ -58,9 +58,13 @@ const ListboxComponent = React.forwardRef<
   React.HTMLAttributes<HTMLElement>
 >(function ListboxComponent(props, ref) {
   const { children, ...other } = props;
-  const itemData: React.ReactElement<any>[] = [];
-  (children as React.ReactElement<any>[]).forEach(
-    (item: React.ReactElement<any> & { children?: React.ReactElement<any>[] }) => {
+  const itemData: React.ReactElement<unknown>[] = [];
+  (children as React.ReactElement<unknown>[]).forEach(
+    (
+      item: React.ReactElement<unknown> & {
+        children?: React.ReactElement<unknown>[];
+      },
+    ) => {
       itemData.push(item);
       itemData.push(...(item.children || []));
     },
@@ -73,7 +77,7 @@ const ListboxComponent = React.forwardRef<
   const itemCount = itemData.length;
   const itemSize = smUp ? 36 : 48;
 
-  const getChildSize = (child: React.ReactElement<any>) => {
+  const getChildSize = (child: React.ReactElement<unknown>) => {
     if (child.hasOwnProperty('group')) {
       return 48;
     }

docs/data/material/components/dialogs/FullScreenDialog.tsx

@@ -15,7 +15,7 @@ import { TransitionProps } from '@mui/material/transitions';
 
 const Transition = React.forwardRef(function Transition(
   props: TransitionProps & {
-    children: React.ReactElement<any>;
+    children: React.ReactElement<unknown>;
   },
   ref: React.Ref<unknown>,
 ) {

docs/data/material/components/lists/InteractiveList.tsx

@@ -16,7 +16,7 @@ import Typography from '@mui/material/Typography';
 import FolderIcon from '@mui/icons-material/Folder';
 import DeleteIcon from '@mui/icons-material/Delete';
 
-function generate(element: React.ReactElement<any>) {
+function generate(element: React.ReactElement<unknown>) {
   return [0, 1, 2].map((value) =>
     React.cloneElement(element, {
       key: value,

docs/data/material/components/popper/SpringPopper.tsx

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

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

@@ -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();
+  const timer = React.useRef(undefined);
 
   const buttonSx = {
     ...(success && {

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>(undefined);
 
   const buttonSx = {
     ...(success && {

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

@@ -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();
+  const timerRef = React.useRef(undefined);
 
   React.useEffect(
     () => () => {

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

@@ -8,7 +8,9 @@ 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>(
+    undefined,
+  );
 
   React.useEffect(
     () => () => {

docs/data/material/components/rating/RadioGroupRating.tsx

@@ -15,7 +15,7 @@ const StyledRating = styled(Rating)(({ theme }) => ({
 
 const customIcons: {
   [index: string]: {
-    icon: React.ReactElement<any>;
+    icon: React.ReactElement<unknown>;
     label: string;
   };
 } = {

docs/data/material/components/steppers/CustomizedSteppers.tsx

@@ -122,7 +122,7 @@ const ColorlibStepIconRoot = styled('div')<{
 function ColorlibStepIcon(props: StepIconProps) {
   const { active, completed, className } = props;
 
-  const icons: { [index: string]: React.ReactElement<any> } = {
+  const icons: { [index: string]: React.ReactElement<unknown> } = {
     1: <SettingsIcon />,
     2: <GroupAddIcon />,
     3: <VideoLabelIcon />,

docs/data/material/integrations/routing/ListRouter.tsx

@@ -34,7 +34,7 @@ function Router(props: { children?: React.ReactNode }) {
 }
 
 interface ListItemLinkProps {
-  icon?: React.ReactElement<any>;
+  icon?: React.ReactElement<unknown>;
   primary: string;
   to: string;
 }

docs/pages/base-ui/api/use-autocomplete.json

@@ -147,8 +147,8 @@
     },
     "unstable_isActiveElementInListbox": {
       "type": {
-        "name": "(listbox: React.RefObject<HTMLElement>) => boolean",
-        "description": "(listbox: React.RefObject<HTMLElement>) => boolean"
+        "name": "(listbox: React.RefObject<HTMLElement | null>) => boolean",
+        "description": "(listbox: React.RefObject<HTMLElement | null>) => boolean"
       }
     },
     "value": {

docs/src/components/about/HowToSupport.tsx

@@ -21,7 +21,7 @@ function Widget({
 }: {
   children: React.ReactNode;
   title: string;
-  icon: React.ReactElement<any>;
+  icon: React.ReactElement<unknown>;
 }) {
   return (
     <Paper

docs/src/components/header/HeaderNavBar.tsx

@@ -75,7 +75,7 @@ const PRODUCT_IDS = [
 ];
 
 type ProductSubMenuProps = {
-  icon: React.ReactElement<any>;
+  icon: React.ReactElement<unknown>;
   name: React.ReactNode;
   description: React.ReactNode;
   chip?: React.ReactNode;

docs/src/components/home/MaterialDesignComponents.tsx

@@ -125,7 +125,7 @@ function Demo({
 }: {
   name: string;
   theme: Theme | undefined;
-  children: React.ReactElement<any>;
+  children: React.ReactElement<unknown>;
   control?: { prop: string; values: Array<string>; defaultValue?: string };
 }) {
   const [propValue, setPropValue] = React.useState(

docs/src/components/home/UserFeedbacks.tsx

@@ -95,7 +95,7 @@ function Feedback({
     avatarSrcSet: string;
     name: string;
     role: string;
-    company?: React.ReactElement<any>;
+    company?: React.ReactElement<unknown>;
   };
 }) {
   return (

docs/src/components/pricing/PricingTable.tsx

@@ -424,7 +424,7 @@ function RowHead({
   children,
   startIcon,
   ...props
-}: BoxProps & { startIcon?: React.ReactElement<any> }) {
+}: BoxProps & { startIcon?: React.ReactElement<unknown> }) {
   return (
     <Box
       {...props}

docs/src/components/productX/XRoadmap.tsx

@@ -41,7 +41,7 @@ function RoadmapStatusDot({ color }: RoadmapStatusDotProps) {
 }
 
 export default function XRoadmap() {
-  function renderList(content: React.ReactElement<any>, nested?: boolean) {
+  function renderList(content: React.ReactElement<unknown>, nested?: boolean) {
     return (
       <Box
         sx={{

docs/src/components/showcase/ViewToggleButton.tsx

@@ -11,7 +11,7 @@ const views = ['quilt', 'module', 'agenda', 'week', 'sidebar'] as const;
 
 type View = (typeof views)[number];
 
-const viewIcons: Record<View, React.ReactElement<any>> = {
+const viewIcons: Record<View, React.ReactElement<unknown>> = {
   quilt: <ViewQuiltRounded />,
   module: <ViewModuleRounded />,
   agenda: <ViewAgendaRounded />,

docs/src/components/typography/SectionHeadline.tsx

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

docs/src/layouts/HeroContainer.tsx

@@ -8,9 +8,9 @@ import { alpha } from '@mui/material/styles';
 interface HeroContainerProps {
   disableMobileHidden?: boolean;
   disableTabExclusion?: boolean;
-  left: React.ReactElement<any>;
+  left: React.ReactElement<unknown>;
   linearGradient?: boolean;
-  right: React.ReactElement<any>;
+  right: React.ReactElement<unknown>;
   rightSx?: BoxProps['sx'];
 }
 

docs/src/modules/components/JoyThemeBuilder.tsx

@@ -983,7 +983,11 @@ function filterGlobalVariantTokens(palette: Partial<PaletteVariant>, variant: Va
   return tokens;
 }
 
-type StateReducer<T> = (state: T, action: Partial<T>) => T;
+type ReducerState = {
+  hover: boolean;
+  active: boolean;
+  disabled: boolean;
+};
 
 function GlobalVariantForm({
   color,
@@ -1001,13 +1005,14 @@ 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: ReducerState, action: Partial<ReducerState>) => ({ ...prevState, ...action }),
+    {
+      hover: false,
+      active: false,
+      disabled: false,
+    },
+  );
   const themeDefaultValue = filterGlobalVariantTokens(themeDefaultValueProp, selectedVariant);
   const value = filterGlobalVariantTokens(valueProp, selectedVariant);
   const mergedValue = { ...themeDefaultValue, ...value };

docs/src/modules/components/JoyUsageDemo.tsx

@@ -165,7 +165,7 @@ interface JoyUsageDemoProps<ComponentProps> {
    * A function to override the code block result.
    */
   getCodeBlock?: (code: string, props: ComponentProps) => string;
-  renderDemo: (props: ComponentProps) => React.ReactElement<any>;
+  renderDemo: (props: ComponentProps) => React.ReactElement<unknown>;
 }
 
 export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({

docs/src/modules/components/JoyVariablesDemo.tsx

@@ -33,7 +33,7 @@ function formatSx(sx: { [k: string]: string | number }) {
 interface SlotVariablesProps {
   slot: string;
   data: Array<DataItem>;
-  renderField: (item: DataItem) => React.ReactElement<any>;
+  renderField: (item: DataItem) => React.ReactElement<unknown>;
   defaultOpen?: boolean;
 }
 
@@ -88,7 +88,7 @@ export default function JoyVariablesDemo(props: {
   componentName: string;
   childrenAccepted?: boolean;
   data: Array<DataItem | [string, Array<DataItem>, { defaultOpen?: boolean } | undefined]>;
-  renderDemo: (sx: { [k: string]: string | number }) => React.ReactElement<any>;
+  renderDemo: (sx: { [k: string]: string | number }) => React.ReactElement<unknown>;
   renderCode?: (formattedSx: string) => string;
 }) {
   const { componentName, data = [], childrenAccepted = false, renderCode } = props;

docs/types/docs.d.ts

@@ -23,7 +23,7 @@ declare module 'docs/src/modules/components/HighlightedCode' {
     component?: React.ElementType;
     sx?: object;
   }
-  export default function HighlightedCode(props: Props): React.ReactElement<any>;
+  export default function HighlightedCode(props: Props): React.ReactElement<unknown>;
 }
 
 declare module 'react-imask';

packages/mui-base/src/Button/Button.tsx

@@ -46,7 +46,7 @@ const Button = React.forwardRef(function Button<RootComponentType extends React.
     ...other
   } = props;
 
-  const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>();
+  const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement | null>(null);
 
   let rootElementName = rootElementNameProp;
 

packages/mui-base/src/Tab/Tab.tsx

@@ -45,7 +45,7 @@ const Tab = React.forwardRef(function Tab<RootComponentType extends React.Elemen
     ...other
   } = props;
 
-  const tabRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>();
+  const tabRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement | null>(null);
   const handleRef = useForkRef(tabRef, forwardedRef);
 
   const { active, highlighted, selected, getRootProps } = useTab({

packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts

@@ -49,7 +49,7 @@ export interface UseAutocompleteProps<
    * Temporary for Joy UI because the parent listbox is the document object
    * TODO v6: Normalize the logic and remove this param.
    */
-  unstable_isActiveElementInListbox?: (listbox: React.RefObject<HTMLElement>) => boolean;
+  unstable_isActiveElementInListbox?: (listbox: React.RefObject<HTMLElement | null>) => boolean;
   /**
    * If `true`, the portion of the selected suggestion that the user hasn't typed,
    * known as the completion string, appears inline after the input cursor in the textbox.

packages/mui-base/src/useButton/useButton.ts

@@ -34,7 +34,7 @@ export function useButton(parameters: UseButtonParameters = {}): UseButtonReturn
     type,
     rootElementName: rootElementNameProp,
   } = parameters;
-  const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>();
+  const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement | null>(null);
 
   const [active, setActive] = React.useState<boolean>(false);