Remove dependency resolution override for React 19 types (#39569)

Co-authored-by: ChaosExAnima <ChaosExAnima@users.noreply.github.com>

app/javascript/mastodon/features/account_timeline/components/featured_tags.tsx

@@ -56,7 +56,7 @@ export const FeaturedTags: FC<{ accountId: string }> = ({ accountId }) => {
           <Tag
             name={name}
             key={id}
-            inert={hiddenIndex > 0 && index >= hiddenIndex ? '' : undefined}
+            inert={hiddenIndex > 0 && index >= hiddenIndex}
             onClick={onClick}
             active={currentTag === name}
             data-name={name}

app/javascript/mastodon/features/account_timeline/components/filters.tsx

@@ -99,11 +99,11 @@ const FilterDropdown: FC = () => {
       </button>
       <Overlay
         show={open}
-        target={buttonRef}
+        target={buttonRef as React.RefObject<HTMLButtonElement>}
         placement='bottom-start'
         rootClose
         onHide={handleHide}
-        container={containerRef}
+        container={containerRef as React.RefObject<HTMLDivElement>}
       >
         {({ props }) => (
           <div

app/javascript/mastodon/features/alt_text_modal/components/info_button.tsx

@@ -46,7 +46,7 @@ export const InfoButton: React.FC = () => {
         placement='top'
         onHide={handleClick}
         offset={[5, 5]}
-        target={triggerRef}
+        target={triggerRef as React.RefObject<HTMLButtonElement>}
       >
         {({ props }) => (
           <div // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions

app/javascript/mastodon/features/alt_text_modal/index.tsx

@@ -103,7 +103,7 @@ const Preview: React.FC<{
   position: FocalPoint;
   onPositionChange: (arg0: FocalPoint) => void;
 }> = ({ mediaId, position, onPositionChange }) => {
-  const nodeRef = useRef<HTMLImageElement | HTMLVideoElement | null>(null);
+  const nodeRef = useRef<HTMLImageElement | HTMLVideoElement>(null);
 
   const [dragging, setDragging] = useState<'started' | 'moving' | null>(null);
 

app/javascript/mastodon/features/audio/index.tsx

@@ -114,10 +114,10 @@ export const Audio: React.FC<{
   const [revealed, setRevealed] = useState(false);
 
   const playerRef = useRef<HTMLDivElement>(null);
-  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const audioRef = useRef<HTMLAudioElement>(null);
   const seekRef = useRef<HTMLDivElement>(null);
   const volumeRef = useRef<HTMLDivElement>(null);
-  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>();
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
 
   const { audioContextRef, sourceRef, gainNodeRef, playAudio, pauseAudio } =
     useAudioContext({ audioElementRef: audioRef });

app/javascript/mastodon/features/collections/detail/index.tsx

@@ -170,7 +170,7 @@ const SensitiveContentNote: React.FC<{ onReveal: () => void }> = ({
 const CollectionHeader: React.FC<{
   collection: ApiCollectionJSON;
   withDescription: boolean;
-  headingRef: React.RefObject<HTMLHeadingElement>;
+  headingRef: React.RefObject<HTMLHeadingElement | null>;
 }> = ({ collection, withDescription, headingRef }) => {
   const intl = useIntl();
   const { name, description, tag, account_id, items } = collection;

app/javascript/mastodon/features/collections/editor/accounts.tsx

@@ -1,3 +1,4 @@
+import type React from 'react';
 import { useCallback, useId, useMemo, useState } from 'react';
 
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -339,8 +340,8 @@ export const CollectionAccounts: React.FC<{
     [addAccountItem, instantAddAccountItem, isEditMode, resetAccounts],
   );
 
-  const handleSubmit = useCallback(
-    (e: React.FormEvent) => {
+  const handleSubmit: React.SubmitEventHandler = useCallback(
+    (e) => {
       e.preventDefault();
 
       if (!id) {

app/javascript/mastodon/features/collections/editor/details.tsx

@@ -1,3 +1,4 @@
+import type React from 'react';
 import { useCallback, useMemo } from 'react';
 
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -108,8 +109,8 @@ export const CollectionDetails: React.FC = () => {
   const accountId = useCurrentAccountId();
   const { acct: currentUserName } = useAccount(accountId) ?? {};
 
-  const handleSubmit = useCallback(
-    (e: React.FormEvent) => {
+  const handleSubmit: React.SubmitEventHandler = useCallback(
+    (e) => {
       e.preventDefault();
 
       if (id) {

app/javascript/mastodon/features/compose/components/language_dropdown.tsx

@@ -328,8 +328,8 @@ export const LanguageDropdown: React.FC = () => {
   const [open, setOpen] = useState(false);
   const [placement, setPlacement] = useState<Placement | undefined>('bottom');
   const [guess, setGuess] = useState('');
-  const activeElementRef = useRef<HTMLElement | null>(null);
-  const targetRef = useRef(null);
+  const activeElementRef = useRef<HTMLElement>(null);
+  const targetRef = useRef<HTMLButtonElement>(null);
 
   const intl = useIntl();
 
@@ -421,7 +421,7 @@ export const LanguageDropdown: React.FC = () => {
         offset={[5, 5]}
         placement={placement}
         flip
-        target={targetRef}
+        target={targetRef as React.RefObject<HTMLButtonElement>}
         popperConfig={{ strategy: 'fixed', onFirstUpdate: handleOverlayEnter }}
       >
         {({ props, placement }) => (

app/javascript/mastodon/features/compose/components/privacy_dropdown.tsx

@@ -70,8 +70,8 @@ const PrivacyDropdown: React.FC<PrivacyDropdownProps> = ({
   disabled,
 }) => {
   const intl = useIntl();
-  const overlayTargetRef = useRef<HTMLDivElement | null>(null);
-  const previousFocusTargetRef = useRef<HTMLElement | null>(null);
+  const overlayTargetRef = useRef<HTMLDivElement>(null);
+  const previousFocusTargetRef = useRef<HTMLElement>(null);
   const [isOpen, setIsOpen] = useState(false);
 
   const handleClose = useCallback(() => {
@@ -171,7 +171,7 @@ const PrivacyDropdown: React.FC<PrivacyDropdownProps> = ({
         offset={[5, 5]}
         placement='bottom'
         flip
-        target={overlayTargetRef}
+        target={overlayTargetRef as React.RefObject<HTMLDivElement>}
         container={container}
         popperConfig={{ strategy: 'fixed' }}
       >

app/javascript/mastodon/features/emoji/emoji_picker.tsx

@@ -51,15 +51,16 @@ export const Emoji: FC<EmojiProps> = ({
   const { mode } = useEmojiAppState();
   return (
     <EmojiRaw
-      // eslint-disable-next-line @typescript-eslint/no-deprecated -- In React props are frozen, but the library we use is old so doesn't respect that.
-      {...(EmojiRaw.defaultProps ?? {})}
+      backgroundImageFn={backgroundImageFn}
       data={EmojiData}
+      native={mode === EMOJI_MODE_NATIVE}
       set={set}
-      sheetSize={sheetSize}
       sheetColumns={sheetColumns}
       sheetRows={sheetRows}
-      backgroundImageFn={backgroundImageFn}
-      native={mode === EMOJI_MODE_NATIVE}
+      sheetSize={sheetSize}
+      skin={1}
+      tooltip={false}
+      {...{ useButton: true }}
       {...props}
     />
   );

app/javascript/mastodon/features/interaction_modal/index.tsx

@@ -153,7 +153,7 @@ const LoginForm: React.FC<{
 
   const inputRef = useRef<HTMLInputElement>(null);
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  const searchRequestRef = useRef<AbortController | null>(null);
+  const searchRequestRef = useRef<AbortController>(null);
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent<LoginFormMessage>) => {

app/javascript/mastodon/features/navigation_panel/index.tsx

@@ -429,7 +429,7 @@ export const CollapsibleNavigationPanel: React.FC = () => {
   const dispatch = useAppDispatch();
   const openable = useBreakpoint('openable');
   const location = useLocation();
-  const overlayRef = useRef<HTMLDivElement | null>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     dispatch(closeNavigation());
@@ -515,7 +515,7 @@ export const CollapsibleNavigationPanel: React.FC = () => {
     },
   );
 
-  const previouslyFocusedElementRef = useRef<HTMLElement | null>();
+  const previouslyFocusedElementRef = useRef<HTMLElement>(null);
 
   useEffect(() => {
     if (open) {

app/javascript/mastodon/features/notifications/components/select_with_label.tsx

@@ -86,7 +86,7 @@ const Dropdown: React.FC<DropdownProps> = ({
         offset={[5, 5]}
         placement={placement}
         flip
-        target={containerRef}
+        target={containerRef as React.RefObject<HTMLDivElement>}
         popperConfig={{ strategy: 'fixed', onFirstUpdate: handleOverlayEnter }}
       >
         {({ props, placement }) => (

app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx

@@ -26,7 +26,7 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   statusId,
 }) => {
   const history = useHistory();
-  const clickCoordinatesRef = useRef<[number, number] | null>();
+  const clickCoordinatesRef = useRef<[number, number]>(null);
   const dispatch = useAppDispatch();
 
   const status = useAppSelector((state) => state.statuses.get(statusId));

app/javascript/mastodon/features/notifications_v2/components/notification_severed_relationships.tsx

@@ -11,5 +11,6 @@ export const NotificationSeveredRelationships: React.FC<{
     followersCount={event.followers_count}
     followingCount={event.following_count}
     unread={unread}
+    hidden={false}
   />
 );

app/javascript/mastodon/features/onboarding/follows.tsx

@@ -61,7 +61,7 @@ export const Follows: React.FC<{
     setIsSearching(false);
   }, [setMode, setIsSearching]);
 
-  const searchRequestRef = useRef<AbortController | null>(null);
+  const searchRequestRef = useRef<AbortController>(null);
 
   const handleSearch = useDebouncedCallback(
     (value: string) => {

app/javascript/mastodon/features/status/components/detailed_status.tsx

@@ -80,7 +80,7 @@ export const DetailedStatus: React.FC<{
   const properStatus = status?.get('reblog') ?? status;
   const [height, setHeight] = useState(0);
   const [showDespiteFilter, setShowDespiteFilter] = useState(false);
-  const nodeRef = useRef<HTMLDivElement>();
+  const nodeRef = useRef<HTMLDivElement>(null);
 
   const { signedIn } = useIdentity();
 

app/javascript/mastodon/features/ui/components/columns_area.tsx

@@ -3,6 +3,7 @@ import {
   cloneElement,
   createContext,
   forwardRef,
+  isValidElement,
   useCallback,
   useContext,
 } from 'react';
@@ -179,7 +180,9 @@ export const ColumnsArea = forwardRef<
 
       <ColumnIndexContext.Provider value={columns.size}>
         {Children.map(children, (child) =>
-          cloneElement(child, { multiColumn: true }),
+          isValidElement<{ multiColumn?: boolean }>(child)
+            ? cloneElement(child, { multiColumn: true })
+            : child,
         )}
       </ColumnIndexContext.Provider>
     </main>

app/javascript/mastodon/features/ui/components/embed_modal.tsx

@@ -18,7 +18,7 @@ const EmbedModal: React.FC<{
   onClose: () => void;
 }> = ({ id, onClose }) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  const intervalRef = useRef<ReturnType<typeof setInterval>>();
+  const intervalRef = useRef<ReturnType<typeof setInterval>>(null);
   const [oembed, setOembed] = useState<OEmbedResponse | null>(null);
   const dispatch = useAppDispatch();
 

app/javascript/mastodon/features/ui/components/zoomable_image.tsx

@@ -120,8 +120,8 @@ export const ZoomableImage: React.FC<ZoomableImageProps> = ({
 
   const containerRef = useRef<HTMLDivElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
-  const doubleClickTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>();
-  const zoomMatrixRef = useRef<ZoomMatrix | null>(null);
+  const doubleClickTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
+  const zoomMatrixRef = useRef<ZoomMatrix>(null);
 
   const [style, api] = useSpring(() => ({
     x: 0,

app/javascript/mastodon/features/video/index.tsx

@@ -225,11 +225,11 @@ export const Video: React.FC<{
   const [hotkeyEvents, setHotkeyEvents] = useState<HotkeyEvent[]>([]);
 
   const playerRef = useRef<HTMLDivElement>(null);
-  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
   const seekRef = useRef<HTMLDivElement>(null);
   const volumeRef = useRef<HTMLDivElement>(null);
-  const doubleClickTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>();
-  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>();
+  const doubleClickTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
 
   const [style, api] = useSpring(() => ({
     progress: '0%',