Upgrade @types/react to 19 and run codemod (attempt 2) (#8918)

* update dependencies

* rm `import type React from 'react'`

* run codemods

* patch discord types

* update types/react-dom

* Update yarn.lock

src/components/Button.tsx

@@ -71,8 +71,8 @@ export type ButtonState = {
 export type ButtonContext = VariantProps & ButtonState
 
 type NonTextElements =
-  | React.ReactElement
-  | Iterable<React.ReactElement | null | undefined | boolean>
+  | React.ReactElement<any>
+  | Iterable<React.ReactElement<any> | null | undefined | boolean>
 
 export type ButtonProps = Pick<
   PressableProps,

src/components/ContextMenu/index.tsx

@@ -119,7 +119,8 @@ export function Root({children}: {children: React.ReactNode}) {
   const hoverablesSV = useSharedValue<
     Record<string, {id: string; rect: Measurement}>
   >({})
-  const syncHoverablesThrottleRef = useRef<ReturnType<typeof setTimeout>>()
+  const syncHoverablesThrottleRef =
+    useRef<ReturnType<typeof setTimeout>>(undefined)
   const [hoveredMenuItem, setHoveredMenuItem] = useState<string | null>(null)
 
   const onHoverableTouchUp = useCallback((id: string) => {

src/components/ContextMenu/types.ts

@@ -5,7 +5,6 @@ import {
   type ViewStyle,
 } from 'react-native'
 import {type SharedValue} from 'react-native-reanimated'
-import type React from 'react'
 
 import type * as Dialog from '#/components/Dialog'
 import {

src/components/Dialog/types.ts

@@ -5,7 +5,6 @@ import {
   type StyleProp,
   type ViewStyle,
 } from 'react-native'
-import type React from 'react'
 
 import {type ViewStyleProp} from '#/alf'
 import {type BottomSheetViewProps} from '../../../modules/bottom-sheet'
@@ -34,7 +33,7 @@ export type DialogControlRefProps = {
  */
 export type DialogControlProps = DialogControlRefProps & {
   id: string
-  ref: React.RefObject<DialogControlRefProps>
+  ref: React.RefObject<DialogControlRefProps | null>
   isOpen?: boolean
 }
 

src/components/Lists.tsx

@@ -2,7 +2,6 @@ import {memo} from 'react'
 import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {cleanError} from '#/lib/strings/errors'
 import {CenteredView} from '#/view/com/util/Views'

src/components/Portal.tsx

@@ -10,7 +10,7 @@ import {
   useState,
 } from 'react'
 
-type Component = React.ReactElement
+type Component = React.ReactElement<any>
 
 type ContextType = {
   outlet: Component | null

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerWeb.tsx

@@ -139,7 +139,7 @@ function useHLS({
   playlist: string
   setHasSubtitleTrack: (v: boolean) => void
   setError: (v: Error | null) => void
-  videoRef: React.RefObject<HTMLVideoElement>
+  videoRef: React.RefObject<HTMLVideoElement | null>
   setHlsLoading: (v: boolean) => void
 }) {
   const [Hls, setHls] = useState<typeof HlsTypes.default | undefined>(

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoFallback.tsx

@@ -1,7 +1,6 @@
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/ControlButton.tsx

@@ -1,5 +1,4 @@
 import {type SvgProps} from 'react-native-svg'
-import type React from 'react'
 
 import {PressableWithHover} from '#/view/com/util/PressableWithHover'
 import {atoms as a, useTheme, web} from '#/alf'

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/Scrubber.tsx

@@ -2,7 +2,6 @@ import {useCallback, useEffect, useRef, useState} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {isFirefox, isTouchDevice} from '#/lib/browser'
 import {clamp} from '#/lib/numbers'

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VideoControls.tsx

@@ -46,14 +46,14 @@ export function Controls({
   hlsLoading,
   hasSubtitleTrack,
 }: {
-  videoRef: React.RefObject<HTMLVideoElement>
-  hlsRef: React.RefObject<Hls | undefined>
+  videoRef: React.RefObject<HTMLVideoElement | null>
+  hlsRef: React.RefObject<Hls | undefined | null>
   active: boolean
   setActive: () => void
   focused: boolean
   setFocused: (focused: boolean) => void
   onScreen: boolean
-  fullscreenRef: React.RefObject<HTMLDivElement>
+  fullscreenRef: React.RefObject<HTMLDivElement | null>
   hlsLoading: boolean
   hasSubtitleTrack: boolean
 }) {
@@ -232,7 +232,7 @@ export function Controls({
   }, [onSeek, videoRef])
 
   const [showCursor, setShowCursor] = useState(true)
-  const cursorTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
+  const cursorTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined)
   const onPointerMoveEmptySpace = useCallback(() => {
     setShowCursor(true)
     if (cursorTimeoutRef.current) {
@@ -264,7 +264,7 @@ export function Controls({
     [hovered],
   )
 
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>()
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined)
 
   const onHoverWithTimeout = useCallback(() => {
     onHover()

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VolumeControl.tsx

@@ -3,7 +3,6 @@ import {View} from 'react-native'
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {isSafari, isTouchDevice} from '#/lib/browser'
 import {atoms as a} from '#/alf'

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/utils.tsx

@@ -4,7 +4,7 @@ import {isSafari} from '#/lib/browser'
 import {logger} from '#/logger'
 import {useVideoVolumeState} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
 
-export function useVideoElement(ref: RefObject<HTMLVideoElement>) {
+export function useVideoElement(ref: RefObject<HTMLVideoElement | null>) {
   const [playing, setPlaying] = useState(false)
   const [muted, setMuted] = useState(true)
   const [currentTime, setCurrentTime] = useState(0)

src/components/Post/Embed/VideoEmbed/index.web.tsx

@@ -10,7 +10,6 @@ import {View} from 'react-native'
 import {type AppBskyEmbedVideo} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {isFirefox} from '#/lib/browser'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
@@ -38,7 +37,7 @@ export function VideoEmbed({
     useActiveVideoWeb()
   const [onScreen, setOnScreen] = useState(false)
   const [isFullscreen] = useFullscreen()
-  const lastKnownTime = useRef<number | undefined>()
+  const lastKnownTime = useRef<number | undefined>(undefined)
 
   useEffect(() => {
     if (!ref.current) return

src/components/PostControls/PostMenu/index.tsx

@@ -8,7 +8,6 @@ import {
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {type Shadow} from '#/state/cache/post-shadow'
 import {EventStopper} from '#/view/com/util/EventStopper'

src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx

@@ -3,7 +3,6 @@ import {AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
-import type React from 'react'
 
 import {makeProfileLink} from '#/lib/routes/links'
 import {type NavigationProp} from '#/lib/routes/types'

src/components/PostControls/ShareMenu/index.tsx

@@ -9,7 +9,6 @@ import {
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {makeProfileLink} from '#/lib/routes/links'
 import {shareUrl} from '#/lib/sharing'

src/components/ProfileHoverCard/types.ts

@@ -1,5 +1,3 @@
-import type React from 'react'
-
 import {type ViewStyleProp} from '#/alf'
 
 export type ProfileHoverCardProps = ViewStyleProp & {

src/components/ProgressGuide/FollowDialog.tsx

@@ -293,8 +293,8 @@ let Header = ({
   interestsDisplayNames,
 }: {
   guide: Follow10ProgressGuide
-  inputRef: React.RefObject<TextInput>
-  listRef: React.RefObject<ListMethods>
+  inputRef: React.RefObject<TextInput | null>
+  listRef: React.RefObject<ListMethods | null>
   onSelectTab: (v: string) => void
   searchText: string
   setHeaderHeight: (v: number) => void
@@ -565,7 +565,7 @@ function SearchInput({
 }: {
   onChangeText: (text: string) => void
   onEscape: () => void
-  inputRef: React.RefObject<TextInput>
+  inputRef: React.RefObject<TextInput | null>
   defaultValue: string
 }) {
   const t = useTheme()

src/components/ProgressGuide/Toast.tsx

@@ -14,7 +14,7 @@ import {useLingui} from '@lingui/react'
 import {isWeb} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {Portal} from '#/components/Portal'
-import {AnimatedCheck, AnimatedCheckRef} from '../anim/AnimatedCheck'
+import {AnimatedCheck, type AnimatedCheckRef} from '../anim/AnimatedCheck'
 import {Text} from '../Typography'
 
 export interface ProgressGuideToastRef {
@@ -39,7 +39,7 @@ export const ProgressGuideToast = React.forwardRef<
   const translateY = useSharedValue(0)
   const opacity = useSharedValue(0)
   const animatedCheckRef = React.useRef<AnimatedCheckRef | null>(null)
-  const timeoutRef = React.useRef<NodeJS.Timeout | undefined>()
+  const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined)
   const winDim = useWindowDimensions()
 
   /**

src/components/Select/types.ts

@@ -160,7 +160,7 @@ export type ContentProps<T> = {
     item: T,
     index: number,
     selectedValue?: string | null,
-  ) => React.ReactElement
+  ) => React.ReactElement<any>
   /*
    * Extracts the value from an item. Defaults to `item => item.value`
    */

src/components/dialogs/GifSelect.tsx

@@ -37,7 +37,7 @@ export function GifSelectDialog({
   onClose,
   onSelectGif: onSelectGifProp,
 }: {
-  controlRef: React.RefObject<{open: () => void}>
+  controlRef: React.RefObject<{open: () => void} | null>
   onClose?: () => void
   onSelectGif: (gif: Gif) => void
 }) {

src/components/dialogs/SearchablePeopleList.tsx

@@ -484,7 +484,7 @@ function SearchInput({
   value: string
   onChangeText: (text: string) => void
   onEscape: () => void
-  inputRef: React.RefObject<TextInput>
+  inputRef: React.RefObject<TextInput | null>
 }) {
   const t = useTheme()
   const {_} = useLingui()

src/components/dms/ActionsWrapper.web.tsx

@@ -3,7 +3,6 @@ import {Pressable, View} from 'react-native'
 import {type ChatBskyConvoDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {useConvoActive} from '#/state/messages/convo'
 import {useSession} from '#/state/session'

src/components/forms/InputGroup.tsx

@@ -23,9 +23,12 @@ export function InputGroup(props: React.PropsWithChildren<{}>) {
             {React.cloneElement(child, {
               // @ts-ignore
               style: [
+                // @ts-ignore
                 ...(Array.isArray(child.props?.style)
-                  ? child.props.style
-                  : [child.props.style || {}]),
+                  ? // @ts-ignore
+                    child.props.style
+                  : // @ts-ignore
+                    [child.props.style || {}]),
                 {
                   borderTopLeftRadius: i > 0 ? 0 : undefined,
                   borderTopRightRadius: i > 0 ? 0 : undefined,

src/components/forms/TextField.tsx

@@ -28,7 +28,7 @@ import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Text} from '#/components/Typography'
 
 const Context = createContext<{
-  inputRef: React.RefObject<TextInput> | null
+  inputRef: React.RefObject<TextInput | null> | null
   isInvalid: boolean
   hovered: boolean
   onHoverIn: () => void
@@ -152,7 +152,7 @@ export type InputProps = Omit<TextInputProps, 'value' | 'onChangeText'> & {
   value?: string
   onChangeText?: (value: string) => void
   isInvalid?: boolean
-  inputRef?: React.RefObject<TextInput> | React.ForwardedRef<TextInput>
+  inputRef?: React.RefObject<TextInput | null> | React.ForwardedRef<TextInput>
 }
 
 export function createInput(Component: typeof TextInput) {

src/components/forms/ToggleButton.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
-import {AccessibilityProps, TextStyle, View, ViewStyle} from 'react-native'
+import {
+  type AccessibilityProps,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native'
 
 import {atoms as a, native, useTheme} from '#/alf'
 import * as Toggle from '#/components/forms/Toggle'
@@ -7,7 +12,7 @@ import {Text} from '#/components/Typography'
 
 type ItemProps = Omit<Toggle.ItemProps, 'style' | 'role' | 'children'> &
   AccessibilityProps & {
-    children: React.ReactElement
+    children: React.ReactElement<any>
     testID?: string
   }
 

src/components/hooks/useFullscreen.ts

@@ -14,7 +14,7 @@ function fullscreenSubscribe(onChange: () => void) {
   return () => document.removeEventListener('fullscreenchange', onChange)
 }
 
-export function useFullscreen(ref?: React.RefObject<HTMLElement>) {
+export function useFullscreen(ref?: React.RefObject<HTMLElement | null>) {
   if (!isWeb) throw new Error("'useFullscreen' is a web-only hook")
   const isFullscreen = useSyncExternalStore(fullscreenSubscribe, () =>
     Boolean(document.fullscreenElement),

src/components/moderation/LabelPreference.tsx

@@ -5,7 +5,6 @@ import {
 } from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
 import {useLabelBehaviorDescription} from '#/lib/moderation/useLabelBehaviorDescription'