Leahnaya/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2026-08-26 15:45:08 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: ChaosExAnima <ChaosExAnima@users.noreply.github.com>
This commit is contained in:
diondiondion
2026-06-25 09:54:30 +02:00
committed by GitHub
parent f440615b01
commit f2e10fd5db
52 changed files with 112 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/components/account_header/fields.tsx
View File

@@ -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;

2
app/javascript/mastodon/components/account_header/name.tsx
View File

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

2
app/javascript/mastodon/components/account_header/subscription_form.tsx
View File

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

2
app/javascript/mastodon/components/alt_text_badge/index.tsx
View File

@@ -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}

4
app/javascript/mastodon/components/carousel/index.tsx
View File

@@ -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}

2
app/javascript/mastodon/components/dropdown/index.tsx
View File

@@ -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],

4
app/javascript/mastodon/components/dropdown_menu.tsx
View File

@@ -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 }) => (

2
app/javascript/mastodon/components/form_fields/checkbox_field.tsx
View File

@@ -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) => {

4
app/javascript/mastodon/components/form_fields/combobox_field.tsx
View File

@@ -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],
}}

2
app/javascript/mastodon/components/form_fields/copy_link_field.tsx
View File

@@ -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();
}, []);

2
app/javascript/mastodon/components/form_fields/emoji_text_field.tsx
View File

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

2
app/javascript/mastodon/components/hotkeys/index.tsx
View File

@@ -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

2
app/javascript/mastodon/components/hover_card_controller.tsx
View File

@@ -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();

4
app/javascript/mastodon/components/learn_more_link.tsx
View File

@@ -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

5
app/javascript/mastodon/components/navigation_focus_target/index.tsx
View File

@@ -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

4
app/javascript/mastodon/components/status_action_bar/remove_quote_hint.tsx
View File

@@ -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

11
app/javascript/mastodon/containers/scroll_container/index.tsx
View File

@@ -1,4 +1,5 @@
import React, {
isValidElement,
useContext,
useEffect,
useImperativeHandle,
@@ -34,14 +35,14 @@ export const ScrollContainer: React.FC<ScrollContainerProps> = ({
}) => {
const scrollBehaviorContext = useContext(ScrollBehaviorContext);
const containerRef = useRef<HTMLElement>();
const containerRef = useRef<HTMLElement>(null);
/**
* If a childRef is passed, sync it with the containerRef. This
* is necessary because in this component's return statement,
* we're overwriting the immediate child component's ref prop.
*/
useImperativeHandle(childRef, () => containerRef.current, []);
useImperativeHandle(childRef, () => containerRef.current ?? undefined, []);
/**
* Register/unregister scrollable element with ScrollBehavior
@@ -71,6 +72,10 @@ export const ScrollContainer: React.FC<ScrollContainerProps> = ({
}, []);
return React.Children.only(
React.cloneElement(children, { ref: containerRef }),
isValidElement<{
ref: React.RefObject<HTMLElement | null>;
}>(children)
? React.cloneElement(children, { ref: containerRef })
: children,
);
};

2
app/javascript/mastodon/features/account_timeline/components/featured_tags.tsx
View File

@@ -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}

4
app/javascript/mastodon/features/account_timeline/components/filters.tsx
View File

@@ -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

2
app/javascript/mastodon/features/alt_text_modal/components/info_button.tsx
View File

@@ -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

2
app/javascript/mastodon/features/alt_text_modal/index.tsx
View File

@@ -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);

4
app/javascript/mastodon/features/audio/index.tsx
View File

@@ -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 });

2
app/javascript/mastodon/features/collections/detail/index.tsx
View File

@@ -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;

5
app/javascript/mastodon/features/collections/editor/accounts.tsx
View File

@@ -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) {

5
app/javascript/mastodon/features/collections/editor/details.tsx
View File

@@ -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) {

6
app/javascript/mastodon/features/compose/components/language_dropdown.tsx
View File

@@ -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 }) => (

6
app/javascript/mastodon/features/compose/components/privacy_dropdown.tsx
View File

@@ -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' }}
>

11
app/javascript/mastodon/features/emoji/emoji_picker.tsx
View File

@@ -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}
/>
);

2
app/javascript/mastodon/features/interaction_modal/index.tsx
View File

@@ -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>) => {

4
app/javascript/mastodon/features/navigation_panel/index.tsx
View File

@@ -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) {

2
app/javascript/mastodon/features/notifications/components/select_with_label.tsx
View File

@@ -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 }) => (

2
app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx
View File

@@ -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));

1
app/javascript/mastodon/features/notifications_v2/components/notification_severed_relationships.tsx
View File

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

2
app/javascript/mastodon/features/onboarding/follows.tsx
View File

@@ -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) => {

2
app/javascript/mastodon/features/status/components/detailed_status.tsx
View File

@@ -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();

5
app/javascript/mastodon/features/ui/components/columns_area.tsx
View File

@@ -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>

2
app/javascript/mastodon/features/ui/components/embed_modal.tsx
View File

@@ -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();

4
app/javascript/mastodon/features/ui/components/zoomable_image.tsx
View File

@@ -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,

6
app/javascript/mastodon/features/video/index.tsx
View File

@@ -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%',

8
app/javascript/mastodon/hooks/useAudioContext.ts
View File

@@ -1,7 +1,7 @@
import { useCallback, useEffect, useRef } from 'react';
interface AudioContextOptions {
audioElementRef: React.MutableRefObject<HTMLAudioElement | null>;
audioElementRef: React.RefObject<HTMLAudioElement | null>;
}
/**
@@ -13,9 +13,9 @@ interface AudioContextOptions {
*/
export const useAudioContext = ({ audioElementRef }: AudioContextOptions) => {
const audioContextRef = useRef<AudioContext>();
const sourceRef = useRef<MediaElementAudioSourceNode>();
const gainNodeRef = useRef<GainNode>();
const audioContextRef = useRef<AudioContext>(null);
const sourceRef = useRef<MediaElementAudioSourceNode>(null);
const gainNodeRef = useRef<GainNode>(null);
useEffect(() => {
if (!audioElementRef.current || typeof AudioContext === 'undefined') {

6
app/javascript/mastodon/hooks/useAudioVisualizer.ts
View File

@@ -11,8 +11,8 @@ const normalizeFrequencies = (arr: Float32Array): number[] => {
};
interface AudioVisualiserOptions {
audioContextRef: React.MutableRefObject<AudioContext | undefined>;
sourceRef: React.MutableRefObject<MediaElementAudioSourceNode | undefined>;
audioContextRef: React.RefObject<AudioContext | null>;
sourceRef: React.RefObject<MediaElementAudioSourceNode | null>;
numBands: number;
}
@@ -21,7 +21,7 @@ export const useAudioVisualizer = ({
sourceRef,
numBands,
}: AudioVisualiserOptions) => {
const analyzerRef = useRef<AnalyserNode>();
const analyzerRef = useRef<AnalyserNode>(null);
const [frequencyBands, setFrequencyBands] = useState<number[]>(
new Array(numBands).fill(0),

4
app/javascript/mastodon/hooks/useObserver.ts
View File

@@ -1,7 +1,7 @@
import { useEffect, useRef } from 'react';
export function useResizeObserver(callback: ResizeObserverCallback) {
const observerRef = useRef<ResizeObserver | null>(null);
const observerRef = useRef<ResizeObserver>(null);
observerRef.current ??= new ResizeObserver(callback);
useEffect(() => {
@@ -15,7 +15,7 @@ export function useResizeObserver(callback: ResizeObserverCallback) {
}
export function useMutationObserver(callback: MutationCallback) {
const observerRef = useRef<MutationObserver | null>(null);
const observerRef = useRef<MutationObserver>(null);
observerRef.current ??= new MutationObserver(callback);
useEffect(() => {

4
app/javascript/mastodon/hooks/useOnClickOutside.ts
View File

@@ -2,10 +2,10 @@
* Handle clicks that occur outside of the element(s) provided in the first parameter
*/
import type { MutableRefObject } from 'react';
import type { RefObject } from 'react';
import { useEffect } from 'react';
type ElementRef = MutableRefObject<HTMLElement | null>;
type ElementRef = RefObject<HTMLElement | null>;
export function useOnClickOutside(
excludedElementRef: ElementRef | ElementRef[] | null,

16
app/javascript/mastodon/hooks/useOverflow.ts
View File

@@ -1,4 +1,4 @@
import type { MutableRefObject, RefCallback } from 'react';
import type { RefObject, RefCallback } from 'react';
import { useState, useRef, useCallback, useEffect } from 'react';
import { useMutationObserver, useResizeObserver } from './useObserver';
@@ -20,7 +20,7 @@ export function useOverflowButton({
const [maxWidth, setMaxWidth] = useState<number | 'none'>('none');
// This is the item container element.
const listRef = useRef<HTMLElement | null>(null);
const listRef = useRef<HTMLElement>(null);
// The main recalculation function.
const handleRecalculate = useCallback(() => {
@@ -102,7 +102,7 @@ export function useOverflowScroll({
const [canScrollLeft, setCanScrollLeft] = useState(false);
const [canScrollRight, setCanScrollRight] = useState(false);
const bodyRef = useRef<HTMLElement | null>(null);
const bodyRef = useRef<HTMLElement>(null);
// Recalculate scrollable state
const handleRecalculate = useCallback(() => {
@@ -176,13 +176,11 @@ export function useOverflowObservers({
onWrapperRef,
}: {
onRecalculate: () => void;
onListRef?: RefCallback<HTMLElement> | MutableRefObject<HTMLElement | null>;
onWrapperRef?:
| RefCallback<HTMLElement>
| MutableRefObject<HTMLElement | null>;
onListRef?: RefCallback<HTMLElement> | RefObject<HTMLElement | null>;
onWrapperRef?: RefCallback<HTMLElement> | RefObject<HTMLElement | null>;
}) {
// This is the item container element.
const listRef = useRef<HTMLElement | null>(null);
const listRef = useRef<HTMLElement>(null);
const resizeObserver = useResizeObserver(onRecalculate);
@@ -213,7 +211,7 @@ export function useOverflowObservers({
}, [handleChildrenChange, mutationObserver, resizeObserver]);
// Watch the wrapper for size changes, and recalculate when it resizes.
const wrapperRef = useRef<HTMLElement | null>(null);
const wrapperRef = useRef<HTMLElement>(null);
const wrapperRefCallback = useCallback(
(node: HTMLElement | null) => {
if (node) {

2
app/javascript/mastodon/hooks/useSearchAccounts.ts
View File

@@ -30,7 +30,7 @@ export function useSearchAccounts({
'idle' | 'loading' | 'error'
>('idle');
const searchRequestRef = useRef<AbortController | null>(null);
const searchRequestRef = useRef<AbortController>(null);
const searchAccounts = useDebouncedCallback(
async (value: string) => {

2
app/javascript/mastodon/hooks/useSearchTags.ts
View File

@@ -44,7 +44,7 @@ export function useSearchTags({
'idle' | 'loading' | 'error'
>('idle');
const searchRequestRef = useRef<AbortController | null>(null);
const searchRequestRef = useRef<AbortController>(null);
const searchTags = useDebouncedCallback(
(value: string) => {

2
app/javascript/mastodon/hooks/useSelectableClick.ts
View File

@@ -6,7 +6,7 @@ export const useSelectableClick = (
onClick: React.MouseEventHandler,
maxDelta = 5,
) => {
const clickPositionRef = useRef<Position | null>(null);
const clickPositionRef = useRef<Position>(null);
const handleMouseDown = useCallback((e: React.MouseEvent) => {
clickPositionRef.current = [e.clientX, e.clientY];

8
app/javascript/mastodon/hooks/useTimeout.ts
View File

@@ -1,8 +1,8 @@
import { useRef, useCallback, useEffect } from 'react';
export const useTimeout = () => {
const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
const callbackRef = useRef<() => void>();
const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
const callbackRef = useRef<() => void>(null);
const set = useCallback((callback: () => void, delay: number) => {
if (timeoutRef.current) {
@@ -28,8 +28,8 @@ export const useTimeout = () => {
const cancel = useCallback(() => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
timeoutRef.current = undefined;
callbackRef.current = undefined;
timeoutRef.current = null;
callbackRef.current = null;
}
}, []);

4
app/javascript/mastodon/utils/html.ts
View File

@@ -20,7 +20,7 @@ interface AllowedTag {
}
type AllowedTagsType = {
[Tag in keyof React.ReactHTML]?: AllowedTag;
[Tag in keyof React.JSX.IntrinsicElements]?: AllowedTag;
};
const globalAttributes: Record<string, boolean | string> = htmlConfig.global;
@@ -70,7 +70,7 @@ export function htmlStringToComponents<Arg extends Record<string, unknown>>(
const wrapper = document.createElement('template');
wrapper.innerHTML = htmlString;
const rootChildren: React.ReactNode[] = [];
const rootChildren: Awaited<React.ReactNode>[] = [];
const queue: QueueItem[] = [
{ node: wrapper.content, parent: rootChildren, depth: 0 },
];

6
app/javascript/types/dom.d.ts vendored
View File

@@ -1,6 +0,0 @@
declare namespace React {
interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
// Add inert attribute support, which is only in React 19.2. See: https://github.com/facebook/react/pull/24730
inert?: '';
}
}

2
package.json
View File

@@ -185,8 +185,6 @@
"vitest": "^4.1.7"
},
"resolutions": {
"@types/react": "^18.2.7",
"@types/react-dom": "^18.2.4",
"kind-of": "^6.0.3"
},
"peerDependenciesMeta": {

19
yarn.lock
View File

@@ -4820,12 +4820,12 @@ __metadata:
languageName: node
linkType: hard
"@types/react-dom@npm:^18.2.4":
version: 18.3.7
resolution: "@types/react-dom@npm:18.3.7"
"@types/react-dom@npm:^19.2.0":
version: 19.2.3
resolution: "@types/react-dom@npm:19.2.3"
peerDependencies:
"@types/react": ^18.0.0
checksum: 10c0/8bd309e2c3d1604a28a736a24f96cbadf6c05d5288cfef8883b74f4054c961b6b3a5e997fd5686e492be903c8f3380dba5ec017eff3906b1256529cd2d39603e
"@types/react": ^19.2.0
checksum: 10c0/b486ebe0f4e2fb35e2e108df1d8fc0927ca5d6002d5771e8a739de11239fe62d0e207c50886185253c99eb9dedfeeb956ea7429e5ba17f6693c7acb4c02f8cd1
languageName: node
linkType: hard
@@ -4878,13 +4878,12 @@ __metadata:
languageName: node
linkType: hard
"@types/react@npm:^18.2.7":
version: 18.3.28
resolution: "@types/react@npm:18.3.28"
"@types/react@npm:*, @types/react@npm:>=16.9.11, @types/react@npm:^19.2.0":
version: 19.2.17
resolution: "@types/react@npm:19.2.17"
dependencies:
"@types/prop-types": "npm:*"
csstype: "npm:^3.2.2"
checksum: 10c0/683e19cd12b5c691215529af2e32b5ffbaccae3bf0ba93bfafa0e460e8dfee18423afed568be2b8eadf4b837c3749dd296a4f64e2d79f68fa66962c05f5af661
checksum: 10c0/bc2c4af96b3e480604424de70d5ebda90c5f4b485df471858c0bc2d7d70364b606ec3c4d8579f94f01aa0c6c0591f56bcf14cba5689f5eea4b74250ccdc3a232
languageName: node
linkType: hard