[core] Cherry pick #42346 to v5

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

@@ -1,6 +1,8 @@
+import * as React from 'react';
+
 export const bounceAnim: string;
 export const Button: React.ComponentType<
-  JSX.IntrinsicElements['button'] & {
+  React.JSX.IntrinsicElements['button'] & {
     isRed?: boolean;
     sx?: unknown;
   }

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

@@ -37,7 +37,7 @@ export default function SpringModal() {
 
 const Backdrop = React.forwardRef<
   HTMLDivElement,
-  { children: React.ReactElement; open: boolean }
+  { children: React.ReactElement<any>; open: boolean }
 >((props, ref) => {
   const { open, ...other } = props;
   return <Fade ref={ref} in={open} {...other} />;
@@ -61,7 +61,7 @@ const StyledBackdrop = styled(Backdrop)`
 `;
 
 interface FadeProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   in?: boolean;
   onClick?: any;
   onEnter?: (node: HTMLElement, isAppearing: boolean) => void;

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

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

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

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

@@ -23,7 +23,7 @@ const Select = React.forwardRef(function Select<
   return <BaseSelect {...props} ref={ref} slots={slots} />;
 }) as <TValue extends {}, Multiple extends boolean>(
   props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
-) => JSX.Element;
+) => React.JSX.Element;
 
 export default function UnstyledSelectBasic() {
   return (

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

@@ -47,7 +47,7 @@ const Select = React.forwardRef(function CustomSelect<
   return <BaseSelect {...props} ref={ref} slots={slots} />;
 }) as <TValue extends {}, Multiple extends boolean>(
   props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
-) => JSX.Element;
+) => React.JSX.Element;
 
 const blue = {
   100: '#DAECFF',

docs/data/base/components/slider/DiscreteSlider.tsx

@@ -21,7 +21,7 @@ export default function DiscreteSlider() {
 }
 
 interface SliderValueLabelProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
 }
 
 function SliderValueLabel({ children }: SliderValueLabelProps) {

docs/data/base/components/slider/LabeledValuesSlider.tsx

@@ -11,7 +11,7 @@ export default function LabeledValuesSlider() {
 }
 
 interface SliderValueLabelProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
 }
 
 function SliderValueLabel({ children }: SliderValueLabelProps) {

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

@@ -54,7 +54,7 @@ const Select = React.forwardRef(function Select<
   return <BaseSelect {...props} ref={ref} slots={slots} />;
 }) as <TValue extends {}, Multiple extends boolean>(
   props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
-) => JSX.Element;
+) => React.JSX.Element;
 
 const SelectButton = React.forwardRef(function SelectButton<
   TValue extends {},

docs/data/joy/components/alert/AlertVariousStates.tsx

@@ -14,7 +14,7 @@ export default function AlertVariousStates() {
   const items: {
     title: string;
     color: ColorPaletteProp;
-    icon: React.ReactElement;
+    icon: React.ReactElement<any>;
   }[] = [
     { title: 'Success', color: 'success', icon: <CheckCircleIcon /> },
     { title: 'Warning', color: 'warning', icon: <WarningIcon /> },

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

@@ -12,7 +12,7 @@ const StyledDiv = styled('div')({
 });
 
 type WrapperProps = {
-  children: JSX.Element;
+  children: React.JSX.Element;
   hint: string;
 };
 

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

@@ -66,7 +66,7 @@ const ListboxComponent = React.forwardRef<
   const { children, anchorEl, open, modifiers, ...other } = props;
   const itemData: Array<any> = [];
   (
-    children as [Array<{ children: Array<React.ReactElement> | undefined }>]
+    children as [Array<{ children: Array<React.ReactElement<any>> | undefined }>]
   )[0].forEach((item) => {
     if (item) {
       itemData.push(item);

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

@@ -56,7 +56,7 @@ const StyledLabel = styled('label')(({ theme }) => ({
 
 const InnerInput = React.forwardRef<
   HTMLInputElement,
-  JSX.IntrinsicElements['input']
+  React.JSX.IntrinsicElements['input']
 >(function InnerInput(props, ref) {
   const id = React.useId();
   return (

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

@@ -13,7 +13,7 @@ import { Theme } from '@mui/joy';
 type MenuBarButtonProps = Pick<DropdownProps, 'children' | 'open'> & {
   onOpen: DropdownProps['onOpenChange'];
   onKeyDown: React.KeyboardEventHandler;
-  menu: JSX.Element;
+  menu: React.JSX.Element;
   onMouseEnter: React.MouseEventHandler;
 };
 

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

@@ -48,7 +48,7 @@ const StyledLabel = styled('label')(({ theme }) => ({
 
 const InnerTextarea = React.forwardRef<
   HTMLTextAreaElement,
-  JSX.IntrinsicElements['textarea']
+  React.JSX.IntrinsicElements['textarea']
 >(function InnerTextarea(props, ref) {
   const id = React.useId();
   return (

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/joy/getting-started/templates/profile-dashboard/components/DropZone.tsx

@@ -7,7 +7,9 @@ import AspectRatio from '@mui/joy/AspectRatio';
 
 import FileUploadRoundedIcon from '@mui/icons-material/FileUploadRounded';
 
-export default function DropZone(props: CardProps & { icon?: React.ReactElement }) {
+export default function DropZone(
+  props: CardProps & { icon?: React.ReactElement<any> },
+) {
   const { icon, sx, ...other } = props;
   return (
     <Card

docs/data/joy/getting-started/templates/profile-dashboard/components/FileUpload.tsx

@@ -13,7 +13,7 @@ import RemoveCircleOutlineRoundedIcon from '@mui/icons-material/RemoveCircleOutl
 
 export default function FileUpload(
   props: CardProps & {
-    icon?: React.ReactElement;
+    icon?: React.ReactElement<any>;
     fileName: string;
     fileSize: string;
     progress: number;

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

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

@@ -58,9 +58,9 @@ const ListboxComponent = React.forwardRef<
   React.HTMLAttributes<HTMLElement>
 >(function ListboxComponent(props, ref) {
   const { children, ...other } = props;
-  const itemData: React.ReactElement[] = [];
-  (children as React.ReactElement[]).forEach(
-    (item: React.ReactElement & { children?: React.ReactElement[] }) => {
+  const itemData: React.ReactElement<any>[] = [];
+  (children as React.ReactElement<any>[]).forEach(
+    (item: React.ReactElement<any> & { children?: React.ReactElement<any>[] }) => {
       itemData.push(item);
       itemData.push(...(item.children || []));
     },
@@ -73,7 +73,7 @@ const ListboxComponent = React.forwardRef<
   const itemCount = itemData.length;
   const itemSize = smUp ? 36 : 48;
 
-  const getChildSize = (child: React.ReactElement) => {
+  const getChildSize = (child: React.ReactElement<any>) => {
     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;
+    children: React.ReactElement<any>;
   },
   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) {
+function generate(element: React.ReactElement<any>) {
   return [0, 1, 2].map((value) =>
     React.cloneElement(element, {
       key: value,

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/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;
+  children?: React.ReactElement<any>;
   in?: boolean;
   onEnter?: () => void;
   onExited?: () => void;

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

@@ -15,7 +15,7 @@ const StyledRating = styled(Rating)(({ theme }) => ({
 
 const customIcons: {
   [index: string]: {
-    icon: React.ReactElement;
+    icon: React.ReactElement<any>;
     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 } = {
+  const icons: { [index: string]: React.ReactElement<any> } = {
     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;
+  icon?: React.ReactElement<any>;
   primary: string;
   to: string;
 }

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

@@ -2,8 +2,8 @@
   "parameters": {
     "children": {
       "type": {
-        "name": "React.ReactElement | undefined | null",
-        "description": "React.ReactElement | undefined | null"
+        "name": "React.ReactElement<any> | undefined | null",
+        "description": "React.ReactElement<any> | undefined | null"
       },
       "required": true
     },

docs/src/components/about/HowToSupport.tsx

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

docs/src/components/action/StylingInfo.tsx

@@ -12,7 +12,7 @@ export default function StylingInfo({
   appeared,
   stylingContent,
   ...props
-}: { appeared: boolean; stylingContent?: React.ReactElement } & BoxProps) {
+}: { appeared: boolean; stylingContent?: React.ReactElement<any> } & BoxProps) {
   const [hidden, setHidden] = React.useState(false);
   const defaultContent = (
     <React.Fragment>

docs/src/components/header/HeaderNavBar.tsx

@@ -75,12 +75,12 @@ const PRODUCT_IDS = [
 ];
 
 type ProductSubMenuProps = {
-  icon: React.ReactElement;
+  icon: React.ReactElement<any>;
   name: React.ReactNode;
   description: React.ReactNode;
   chip?: React.ReactNode;
   href: string;
-} & Omit<JSX.IntrinsicElements['a'], 'ref'>;
+} & Omit<React.JSX.IntrinsicElements['a'], 'ref'>;
 
 const ProductSubMenu = React.forwardRef<HTMLAnchorElement, ProductSubMenuProps>(
   function ProductSubMenu({ icon, name, description, chip, href, ...props }, ref) {

docs/src/components/home/MaterialDesignComponents.tsx

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

docs/src/components/home/StoreTemplatesBanner.tsx

@@ -100,7 +100,7 @@ const StoreTemplateLink = React.forwardRef<
 
 const StoreTemplateImage = React.forwardRef<
   HTMLImageElement,
-  { brand: TemplateBrand } & Omit<JSX.IntrinsicElements['img'], 'ref'>
+  { brand: TemplateBrand } & Omit<React.JSX.IntrinsicElements['img'], 'ref'>
 >(function StoreTemplateImage({ brand, ...props }, ref) {
   return (
     <Image

docs/src/components/home/UserFeedbacks.tsx

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

docs/src/components/icon/IconImage.tsx

@@ -40,7 +40,7 @@ export type IconImageProps = {
   mode?: '' | 'light' | 'dark';
   sx?: SxProps<Theme>;
   width?: number;
-} & Omit<JSX.IntrinsicElements['img'], 'ref'>;
+} & Omit<React.JSX.IntrinsicElements['img'], 'ref'>;
 
 const Img = styled('img')({ display: 'inline-block', verticalAlign: 'bottom' });