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

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

app/javascript/mastodon/components/account_header/fields.tsx

@@ -220,7 +220,7 @@ const FieldHTML: FC<FieldHTMLProps> = ({
 };
 
 function useColumnWrap() {
-  const listRef = useRef<HTMLDListElement | null>(null);
+  const listRef = useRef<HTMLDListElement>(null);
 
   const handleRecalculate = useCallback(() => {
     const listEle = listRef.current;
@@ -330,7 +330,7 @@ function useFieldOverflow() {
   const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);
   const [isValueOverflowing, setIsValueOverflowing] = useState(false);
 
-  const wrapperRef = useRef<HTMLElement | null>(null);
+  const wrapperRef = useRef<HTMLElement>(null);
 
   const handleRecalculate = useCallback(() => {
     const wrapperEle = wrapperRef.current;

app/javascript/mastodon/components/account_header/name.tsx

@@ -111,7 +111,7 @@ const AccountNameHelp: FC<{
       <Overlay
         show={open}
         rootClose
-        target={triggerRef}
+        target={triggerRef as React.RefObject<HTMLButtonElement>}
         onHide={handleClick}
         offset={[5, 5]}
       >

app/javascript/mastodon/components/account_header/subscription_form.tsx

@@ -90,7 +90,7 @@ export const AccountSubscriptionForm: React.FC<{ accountId: string }> = ({
     [],
   );
 
-  const handleSubmit = useCallback<React.FormEventHandler>(
+  const handleSubmit = useCallback<React.SubmitEventHandler>(
     (e) => {
       e.preventDefault();
 

app/javascript/mastodon/components/alt_text_badge/index.tsx

@@ -64,7 +64,7 @@ export const AltTextBadge: React.FC<{
         rootClose
         onHide={handleClose}
         show={open}
-        target={buttonRef}
+        target={buttonRef as React.RefObject<HTMLButtonElement>}
         placement='top-end'
         flip
         offset={offset}

app/javascript/mastodon/components/carousel/index.tsx

@@ -106,7 +106,7 @@ export const Carousel = <
     [items.length, onChangeSlide],
   );
 
-  const observerRef = useRef<ResizeObserver | null>(null);
+  const observerRef = useRef<ResizeObserver>(null);
   observerRef.current ??= new ResizeObserver(() => {
     handleSlideChange(0);
   });
@@ -235,7 +235,7 @@ const CarouselSlideWrapper = <SlideProps extends CarouselSlideProps>({
       className={className}
       role='group'
       aria-roledescription='slide'
-      inert={active ? undefined : ''}
+      inert={active}
       data-index={index}
     >
       {children}

app/javascript/mastodon/components/dropdown/index.tsx

@@ -109,7 +109,7 @@ export const Dropdown: FC<
         placement='bottom-start'
         onHide={handleClose}
         flip
-        target={buttonRef}
+        target={buttonRef as React.RefObject<HTMLButtonElement>}
         popperConfig={{
           strategy: 'fixed',
           modifiers: [matchWidth],

app/javascript/mastodon/components/dropdown_menu.tsx

@@ -352,7 +352,7 @@ export const Dropdown = <Item extends object | null = MenuItem>({
   );
   const [currentId] = useState(id++);
   const open = currentId === openDropdownId;
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const menuId = useId();
   const prefetchAccountId = status
     ? status.getIn(['account', 'id'])
@@ -518,7 +518,7 @@ export const Dropdown = <Item extends object | null = MenuItem>({
         offset={offset}
         placement={placement}
         flip
-        target={buttonRef}
+        target={buttonRef as React.RefObject<HTMLButtonElement>}
         popperConfig={popperConfig}
       >
         {({ props, arrowProps, placement }) => (

app/javascript/mastodon/components/form_fields/checkbox_field.tsx

@@ -30,7 +30,7 @@ CheckboxField.displayName = 'CheckboxField';
 
 export const Checkbox = forwardRef<HTMLInputElement, Props>(
   ({ className, size, indeterminate, ...otherProps }, ref) => {
-    const inputRef = useRef<HTMLInputElement | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
 
     const handleRef = useCallback(
       (element: HTMLInputElement | null) => {

app/javascript/mastodon/components/form_fields/combobox_field.tsx

@@ -236,7 +236,7 @@ const ComboboxWithRef = <Item extends ComboboxItem, GroupKey extends string>(
 ) => {
   const intl = useIntl();
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement | null>();
+  const inputRef = useRef<HTMLInputElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
 
   // This ref tracks whether the menu was just closed following a
@@ -558,7 +558,7 @@ const ComboboxWithRef = <Item extends ComboboxItem, GroupKey extends string>(
         onHide={closeMenu}
         ref={popoverRef}
         target={inputRef as React.RefObject<HTMLInputElement>}
-        container={wrapperRef}
+        container={wrapperRef as React.RefObject<HTMLDivElement>}
         popperConfig={{
           modifiers: [matchWidth],
         }}

app/javascript/mastodon/components/form_fields/copy_link_field.tsx

@@ -26,7 +26,7 @@ export const CopyLinkField = forwardRef<HTMLInputElement, CopyLinkFieldProps>(
     ref,
   ) => {
     const intl = useIntl();
-    const inputRef = useRef<HTMLInputElement | null>();
+    const inputRef = useRef<HTMLInputElement>(null);
     const handleFocus = useCallback(() => {
       inputRef.current?.select();
     }, []);

app/javascript/mastodon/components/form_fields/emoji_text_field.tsx

@@ -120,7 +120,7 @@ const EmojiFieldWrapper: FC<
     children: (
       inputProps: InputProps & { onChange: ChangeEventHandler },
     ) => ReactNode;
-    inputRef: RefObject<HTMLTextAreaElement | HTMLInputElement>;
+    inputRef: RefObject<HTMLTextAreaElement | HTMLInputElement | null>;
   }
 > = ({
   value,

app/javascript/mastodon/components/hotkeys/index.tsx

@@ -184,7 +184,7 @@ export type HandlerMap = Partial<Record<HotkeyName, HandlerFunction>>;
 export function useHotkeys<T extends HTMLElement>(handlers: HandlerMap) {
   const ref = useRef<T>(null);
   const bufferedKeys = useRef<string[]>([]);
-  const sequenceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const sequenceTimer = useRef<ReturnType<typeof setTimeout>>(null);
 
   /**
    * Store the latest handlers object in a ref so we don't need to

app/javascript/mastodon/components/hover_card_controller.tsx

@@ -27,7 +27,7 @@ export const HoverCardController: React.FC = () => {
   const [open, setOpen] = useState(false);
   const [accountId, setAccountId] = useState<string | undefined>();
   const [anchor, setAnchor] = useState<HTMLElement | null>(null);
-  const cardRef = useRef<HTMLDivElement | null>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
   const [setLeaveTimeout, cancelLeaveTimeout] = useTimeout();
   const [setEnterTimeout, cancelEnterTimeout, delayEnterTimeout] = useTimeout();
   const [setScrollTimeout] = useTimeout();

app/javascript/mastodon/components/learn_more_link.tsx

@@ -9,7 +9,7 @@ export const LearnMoreLink: React.FC<{ children: React.ReactNode }> = ({
 }) => {
   const accessibilityId = useId();
   const [open, setOpen] = useState(false);
-  const triggerRef = useRef(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
 
   const handleClick = useCallback(() => {
     setOpen(!open);
@@ -37,7 +37,7 @@ export const LearnMoreLink: React.FC<{ children: React.ReactNode }> = ({
         onHide={handleClick}
         offset={[5, 5]}
         placement='bottom-end'
-        target={triggerRef}
+        target={triggerRef as React.RefObject<HTMLButtonElement>}
       >
         {({ props }) => (
           <div

app/javascript/mastodon/components/navigation_focus_target/index.tsx

@@ -20,8 +20,9 @@ export type FocusTarget =
   | boolean
   | (typeof FOCUS_TARGET)[keyof typeof FOCUS_TARGET];
 
-const FocusTargetContext =
-  createContext<React.MutableRefObject<FocusTarget> | null>(null);
+const FocusTargetContext = createContext<React.RefObject<FocusTarget> | null>(
+  null,
+);
 
 /**
  * `FocusTargetProvider` keeps track of whether focus should be

app/javascript/mastodon/components/status_action_bar/remove_quote_hint.tsx

@@ -65,8 +65,8 @@ export const RemoveQuoteHint: React.FC<{
           flip
           offset={[12, 10]}
           placement='bottom-end'
-          target={anchorRef}
-          container={anchorRef}
+          target={anchorRef as React.RefObject<HTMLDivElement>}
+          container={anchorRef as React.RefObject<HTMLDivElement>}
         >
           {({ props, placement }) => (
             <div