update to react 19 part II

src/components/AddButton/AddButton.props.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from 'react'
 import type { MenuProps } from '@mui/material'
 
 export interface MenuLineProps {
-  icon?: ReactElement
+  icon?: ReactElement<any>
   name?: string
   action: () => void
 }

src/components/Icons/BladeIcon/BladeIcon.tsx

@@ -24,6 +24,8 @@ import { BladeIconProps } from './BladeIcon.interface'
 import HomeAssistantLogo from '../HomeAssistant'
 import NovationLogo from '../Novation'
 
+import type { JSX } from "react";
+
 const getStyle = (card: boolean, scene: boolean, intro: boolean, list: boolean) => ({
   transform: card ? 'unset' : scene ? 'scale(1)' : intro ? 'scale(0.05)' : 'scale(0.012)',
   marginTop: '3px',

src/components/Integrations/QLC/DialogAddEventListener.tsx

@@ -58,7 +58,7 @@ function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
     qlc_payload: null
   })
   const [qlcData, setqlcData] = React.useState([])
-  const radioGroupRef = React.useRef(null)
+  // const radioGroupRef = React.useRef(null)
 
   const qlcInfo = useStore((state: any) => state.qlc?.qlcWidgets)
   const createQlcListener = useStore((state) => state.addQLCSongTrigger)
@@ -87,11 +87,6 @@ function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
     }
   }, [valueProp, open])
 
-  const handleEntering = () => {
-    if (radioGroupRef.current != null) {
-      /* empty */
-    }
-  }
 
   const handleCancel = () => {
     onClose()
@@ -304,20 +299,23 @@ function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
     { value: 255, label: '255' }
   ]
 
-  delete other.deviceList
+  delete (other as any).deviceList
 
   return (
     <Dialog
-      disableBackdropClick
+      onClose={(event, reason) => {
+        if (reason !== 'backdropClick') {
+          handleCancel();
+        }
+      }}
       disableEscapeKeyDown
       maxWidth="xs"
-      onEntering={handleEntering}
       aria-labelledby="confirmation-dialog-title"
       open={open}
       {...other}
     >
       <DialogTitle id="confirmation-dialog-title">
-        Event Listener Setup: {valueProp?.id}
+        Event Listener Setup: {valueProp}
       </DialogTitle>
       <DialogContent dividers>
         <DialogContentText>

src/components/Integrations/Spotify/SpotifyProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useEffect, useMemo, useState } from 'react'
+import { createContext, useEffect, useMemo, useState, type JSX } from 'react';
 
 import { SpotifyState } from '../../../store/ui/SpotifyState'
 import useStore from '../../../store/useStore'

src/components/NoYet.tsx

@@ -1,6 +1,8 @@
 import { Card, CardHeader } from '@mui/material'
 import { Info } from '@mui/icons-material'
 
+import type { JSX } from "react";
+
 interface NoYetProps {
   type?: string
 }

src/pages/Device/TroubleshootButton.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/indent */
-import { useState, forwardRef, useEffect } from 'react'
+import { useState, forwardRef, useEffect, type JSX } from 'react';
 import {
   Button,
   Dialog,
@@ -233,5 +233,5 @@ export default function TroubleshootButton({
         </div>
       </Dialog>
     </>
-  ) : null
+  ) : null;
 }

src/pages/Integrations/QLCplus/QLCScreen/QLCScreen.props.tsx

@@ -4,8 +4,8 @@ import { TransitionProps } from '@mui/material/transitions'
 import { MenuItem, Slide } from '@mui/material'
 
 export interface QLCScreenProps {
-  icon: React.ReactElement
-  startIcon: React.ReactElement
+  icon: React.ReactElement<any>
+  startIcon: React.ReactElement<any>
   label: string
   type: string
   className: string
@@ -31,16 +31,12 @@ export const QLCScreenDefaultProps = {
 }
 
 export const Transition = React.forwardRef(function Transition(
-  props: TransitionProps & { children?: React.ReactElement },
+  props: TransitionProps & { children?: React.ReactElement<any> } = { children: <div>loading</div> },
   ref: React.Ref<unknown>
 ) {
   return <Slide direction="up" ref={ref} {...(props as any)} />
 })
 
-Transition.defaultProps = {
-  children: <div>loading</div>
-}
-
 export const MuiMenuItem = React.forwardRef(
   (props: any, ref: React.Ref<unknown>) => {
     return <MenuItem ref={ref} {...props} />

src/pages/Integrations/Spotify/SpotifyScreen/SpotifyScreen.props.tsx

@@ -3,8 +3,8 @@ import { TransitionProps } from '@mui/material/transitions'
 import { MenuItem, Slide } from '@mui/material'
 
 export interface SpotifyScreenProps {
-  icon: React.ReactElement
-  startIcon?: React.ReactElement
+  icon: React.ReactElement<any>
+  startIcon?: React.ReactElement<any>
   label?: string
   type?: string
   className: string
@@ -17,7 +17,7 @@ export interface SpotifyScreenProps {
 }
 
 export const Transition = React.forwardRef(function Transition(
-  props: TransitionProps & { children?: React.ReactElement },
+  props: TransitionProps & { children?: React.ReactElement<any> },
   ref: React.Ref<unknown>
 ) {
   return <Slide direction="up" ref={ref} {...(props as any)} />

src/stories/Doc/Doc.tsx

@@ -36,7 +36,7 @@ const MuiMenuItem = React.forwardRef<HTMLLIElement, Props>((props, ref) => {
 })
 
 function FrameWrapper() {
-  const ref = React.useRef<any>()
+  const ref = React.useRef<any>(undefined)
   const [height, setHeight] = React.useState('0px')
   const onLoad = () => {
     setHeight(`${ref.current.contentWindow.document.body.scrollHeight}px`)