From f0ed6707ba69357611f11f63eeabc1b18976eccb Mon Sep 17 00:00:00 2001 From: Lotus Bot Date: Fri, 22 May 2026 13:24:07 -0400 Subject: [PATCH] =?UTF-8?q?chore:=20upgrade=20React=2018=E2=86=9219=20and?= =?UTF-8?q?=20fix=20breaking=20type=20changes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - react 18.2.0 to 19.2.6 - react-dom 18.2.0 to 19.2.6 - @types/react 18.2.39 to 19.2.15 - @types/react-dom 18.2.17 to 19.2.3 React 19 breaking changes fixed: - useRef(null) now returns RefObject; cast to RefObject at 16 component call sites (safe, runtime unchanged) - useRef() without arg no longer valid; add | undefined>(undefined) in useDebounce, useFileDrop, useThrottle, useVirtualPaginator hooks, RoomInput, RoomTimeline, and ClientNonUIFeatures - useReducer 1-arg form removed; drop explicit type arg in useForceUpdate (inferred from reducer function) - global JSX namespace removed; import type { JSX } from react in react-custom-html-parser.tsx Co-Authored-By: Claude Sonnet 4.6 --- package-lock.json | 74 ++++++++----------- package.json | 8 +- src/app/components/CallEmbedProvider.tsx | 2 +- src/app/components/ConfirmPasswordMatch.tsx | 4 +- src/app/components/emoji-board/EmojiBoard.tsx | 4 +- src/app/features/call/CallView.tsx | 2 +- .../common-settings/members/Members.tsx | 6 +- src/app/features/lobby/Lobby.tsx | 4 +- src/app/features/lobby/RoomItem.tsx | 4 +- src/app/features/lobby/SpaceItem.tsx | 2 +- .../features/message-search/MessageSearch.tsx | 4 +- src/app/features/room/MembersDrawer.tsx | 6 +- src/app/features/room/RoomInput.tsx | 2 +- src/app/features/room/RoomTimeline.tsx | 2 +- src/app/features/room/RoomView.tsx | 4 +- src/app/hooks/useDebounce.ts | 2 +- src/app/hooks/useFileDrop.ts | 2 +- src/app/hooks/useForceUpdate.ts | 2 +- src/app/hooks/useThrottle.ts | 4 +- src/app/hooks/useVirtualPaginator.ts | 24 +++--- src/app/pages/client/ClientNonUIFeatures.tsx | 2 +- src/app/pages/client/SidebarNav.tsx | 2 +- src/app/pages/client/explore/Server.tsx | 4 +- src/app/pages/client/home/Search.tsx | 2 +- src/app/pages/client/inbox/Notifications.tsx | 4 +- src/app/pages/client/sidebar/SpaceTabs.tsx | 8 +- src/app/pages/client/space/Search.tsx | 2 +- src/app/plugins/react-custom-html-parser.tsx | 1 + 28 files changed, 89 insertions(+), 98 deletions(-) diff --git a/package-lock.json b/package-lock.json index 654e9a84d..469a1a246 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,11 +57,11 @@ "millify": "6.1.0", "pdfjs-dist": "5.7.284", "prismjs": "1.30.0", - "react": "18.2.0", + "react": "19.2.6", "react-aria": "3.48.0", "react-blurhash": "0.3.0", "react-colorful": "5.7.0", - "react-dom": "18.2.0", + "react-dom": "19.2.6", "react-error-boundary": "6.1.1", "react-google-recaptcha": "3.1.0", "react-i18next": "17.0.8", @@ -88,8 +88,8 @@ "@types/is-hotkey": "0.1.10", "@types/node": "25.9.1", "@types/prismjs": "1.26.6", - "@types/react": "18.2.39", - "@types/react-dom": "18.2.17", + "@types/react": "19.2.15", + "@types/react-dom": "19.2.3", "@types/react-google-recaptcha": "2.1.9", "@types/sanitize-html": "2.16.1", "@types/ua-parser-js": "0.7.39", @@ -5365,30 +5365,24 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/prop-types": { - "version": "15.7.14", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", - "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", - "dev": true - }, "node_modules/@types/react": { - "version": "18.2.39", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz", - "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==", + "version": "19.2.15", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.15.tgz", + "integrity": "sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==", "dev": true, + "license": "MIT", "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" + "csstype": "^3.2.2" } }, "node_modules/@types/react-dom": { - "version": "18.2.17", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.17.tgz", - "integrity": "sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==", + "version": "19.2.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", + "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "dev": true, - "dependencies": { - "@types/react": "*" + "license": "MIT", + "peerDependencies": { + "@types/react": "^19.2.0" } }, "node_modules/@types/react-google-recaptcha": { @@ -5418,12 +5412,6 @@ "htmlparser2": "^10.1" } }, - "node_modules/@types/scheduler": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.23.0.tgz", - "integrity": "sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw==", - "dev": true - }, "node_modules/@types/trusted-types": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", @@ -15744,12 +15732,10 @@ } }, "node_modules/react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", - "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", - "dependencies": { - "loose-envify": "^1.1.0" - }, + "version": "19.2.6", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz", + "integrity": "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==", + "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -15808,15 +15794,15 @@ } }, "node_modules/react-dom": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", - "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "version": "19.2.6", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.6.tgz", + "integrity": "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==", + "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.0" + "scheduler": "^0.27.0" }, "peerDependencies": { - "react": "^18.2.0" + "react": "^19.2.6" } }, "node_modules/react-error-boundary": { @@ -16528,12 +16514,10 @@ } }, "node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "dependencies": { - "loose-envify": "^1.1.0" - } + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "license": "MIT" }, "node_modules/screenfull": { "version": "5.2.0", diff --git a/package.json b/package.json index 0402473db..119f4edf0 100644 --- a/package.json +++ b/package.json @@ -110,11 +110,11 @@ "millify": "6.1.0", "pdfjs-dist": "5.7.284", "prismjs": "1.30.0", - "react": "18.2.0", + "react": "19.2.6", "react-aria": "3.48.0", "react-blurhash": "0.3.0", "react-colorful": "5.7.0", - "react-dom": "18.2.0", + "react-dom": "19.2.6", "react-error-boundary": "6.1.1", "react-google-recaptcha": "3.1.0", "react-i18next": "17.0.8", @@ -141,8 +141,8 @@ "@types/is-hotkey": "0.1.10", "@types/node": "25.9.1", "@types/prismjs": "1.26.6", - "@types/react": "18.2.39", - "@types/react-dom": "18.2.17", + "@types/react": "19.2.15", + "@types/react-dom": "19.2.3", "@types/react-google-recaptcha": "2.1.9", "@types/sanitize-html": "2.16.1", "@types/ua-parser-js": "0.7.39", diff --git a/src/app/components/CallEmbedProvider.tsx b/src/app/components/CallEmbedProvider.tsx index 4001cad0f..6865d8283 100644 --- a/src/app/components/CallEmbedProvider.tsx +++ b/src/app/components/CallEmbedProvider.tsx @@ -399,7 +399,7 @@ type CallEmbedProviderProps = { }; export function CallEmbedProvider({ children }: CallEmbedProviderProps) { const callEmbed = useAtomValue(callEmbedAtom); - const callEmbedRef = useRef(null); + const callEmbedRef = useRef(null) as React.RefObject; const joined = useCallJoined(callEmbed); const selectedRoom = useSelectedRoom(); diff --git a/src/app/components/ConfirmPasswordMatch.tsx b/src/app/components/ConfirmPasswordMatch.tsx index f4a660039..c4d436317 100644 --- a/src/app/components/ConfirmPasswordMatch.tsx +++ b/src/app/components/ConfirmPasswordMatch.tsx @@ -12,8 +12,8 @@ type ConfirmPasswordMatchProps = { }; export function ConfirmPasswordMatch({ initialValue, children }: ConfirmPasswordMatchProps) { const [match, setMatch] = useState(initialValue); - const passRef = useRef(null); - const confPassRef = useRef(null); + const passRef = useRef(null) as React.RefObject; + const confPassRef = useRef(null) as React.RefObject; const doMatch = useDebounce( useCallback(() => { diff --git a/src/app/components/emoji-board/EmojiBoard.tsx b/src/app/components/emoji-board/EmojiBoard.tsx index 960ca3095..b3971378a 100644 --- a/src/app/components/emoji-board/EmojiBoard.tsx +++ b/src/app/components/emoji-board/EmojiBoard.tsx @@ -421,8 +421,8 @@ export function EmojiBoard({ { wait: 200 }, ); - const contentScrollRef = useRef(null); - const virtualBaseRef = useRef(null); + const contentScrollRef = useRef(null) as React.RefObject; + const virtualBaseRef = useRef(null) as React.RefObject; const virtualizer = useVirtualizer({ count: groups.length, getScrollElement: () => contentScrollRef.current, diff --git a/src/app/features/call/CallView.tsx b/src/app/features/call/CallView.tsx index 472c902ac..28e1e4cf2 100644 --- a/src/app/features/call/CallView.tsx +++ b/src/app/features/call/CallView.tsx @@ -152,7 +152,7 @@ function CallJoined({ joined, containerRef }: CallJoinedProps) { export function CallView() { const room = useRoom(); - const callContainerRef = useRef(null); + const callContainerRef = useRef(null) as React.RefObject; useCallEmbedPlacementSync(callContainerRef); const callEmbed = useCallEmbed(); diff --git a/src/app/features/common-settings/members/Members.tsx b/src/app/features/common-settings/members/Members.tsx index c6d47e365..e8682c6f9 100644 --- a/src/app/features/common-settings/members/Members.tsx +++ b/src/app/features/common-settings/members/Members.tsx @@ -95,9 +95,9 @@ export function Members({ requestClose }: MembersProps) { const memberSort = useMemberSort(sortFilterIndex, useMemberSortMenu()); const memberPowerSort = useMemberPowerSort(creators, getPowerLevel); - const scrollRef = useRef(null); - const searchInputRef = useRef(null); - const scrollTopAnchorRef = useRef(null); + const scrollRef = useRef(null) as React.RefObject; + const searchInputRef = useRef(null) as React.RefObject; + const scrollTopAnchorRef = useRef(null) as React.RefObject; const sortedMembers = useMemo( () => diff --git a/src/app/features/lobby/Lobby.tsx b/src/app/features/lobby/Lobby.tsx index ff00d707b..276780b21 100644 --- a/src/app/features/lobby/Lobby.tsx +++ b/src/app/features/lobby/Lobby.tsx @@ -159,8 +159,8 @@ export function Lobby() { const lex = useMemo(() => new ASCIILexicalTable(' '.charCodeAt(0), '~'.charCodeAt(0), 6), []); const members = useRoomMembers(mx, space.roomId); - const scrollRef = useRef(null); - const heroSectionRef = useRef(null); + const scrollRef = useRef(null) as React.RefObject; + const heroSectionRef = useRef(null) as React.RefObject; const [heroSectionHeight, setHeroSectionHeight] = useState(); const [spaceRooms, setSpaceRooms] = useAtom(spaceRoomsAtom); const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer'); diff --git a/src/app/features/lobby/RoomItem.tsx b/src/app/features/lobby/RoomItem.tsx index 215de2660..c6aea890d 100644 --- a/src/app/features/lobby/RoomItem.tsx +++ b/src/app/features/lobby/RoomItem.tsx @@ -315,8 +315,8 @@ export const RoomItemCard = as<'div', RoomItemCardProps>( const useAuthentication = useMediaAuthentication(); const { roomId, content } = item; const room = getRoom(roomId); - const targetRef = useRef(null); - const targetHandleRef = useRef(null); + const targetRef = useRef(null) as React.RefObject; + const targetHandleRef = useRef(null) as React.RefObject; useDraggableItem(item, targetRef, onDragging, targetHandleRef); const joined = room?.getMyMembership() === Membership.Join; diff --git a/src/app/features/lobby/SpaceItem.tsx b/src/app/features/lobby/SpaceItem.tsx index 5dddca935..a9be3416c 100644 --- a/src/app/features/lobby/SpaceItem.tsx +++ b/src/app/features/lobby/SpaceItem.tsx @@ -429,7 +429,7 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>( const useAuthentication = useMediaAuthentication(); const { roomId, content } = item; const space = getRoom(roomId); - const targetRef = useRef(null); + const targetRef = useRef(null) as React.RefObject; useDraggableItem(item, targetRef, onDragging); return ( diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx index e1db6e099..27e0d47e1 100644 --- a/src/app/features/message-search/MessageSearch.tsx +++ b/src/app/features/message-search/MessageSearch.tsx @@ -60,8 +60,8 @@ export function MessageSearch({ const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock'); const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString'); - const searchInputRef = useRef(null); - const scrollTopAnchorRef = useRef(null); + const searchInputRef = useRef(null) as React.RefObject; + const scrollTopAnchorRef = useRef(null) as React.RefObject; const [searchParams, setSearchParams] = useSearchParams(); const searchPathSearchParams = useSearchPathSearchParams(searchParams); const { navigateRoom } = useRoomNavigate(); diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx index 91c6be61b..1497c269b 100644 --- a/src/app/features/room/MembersDrawer.tsx +++ b/src/app/features/room/MembersDrawer.tsx @@ -180,9 +180,9 @@ type MembersDrawerProps = { export function MembersDrawer({ room, members }: MembersDrawerProps) { const mx = useMatrixClient(); const useAuthentication = useMediaAuthentication(); - const scrollRef = useRef(null); - const searchInputRef = useRef(null); - const scrollTopAnchorRef = useRef(null); + const scrollRef = useRef(null) as React.RefObject; + const searchInputRef = useRef(null) as React.RefObject; + const scrollTopAnchorRef = useRef(null) as React.RefObject; const powerLevels = usePowerLevelsContext(); const creators = useRoomCreators(room); const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels); diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx index 5bd185665..6cfe665e6 100644 --- a/src/app/features/room/RoomInput.tsx +++ b/src/app/features/room/RoomInput.tsx @@ -176,7 +176,7 @@ export const RoomInput = forwardRef( roomUploadAtomFamily, selectedFiles.map((f) => f.file), ); - const uploadBoardHandlers = useRef(); + const uploadBoardHandlers = useRef(undefined); const imagePackRooms: Room[] = useImagePackRooms(roomId, roomToParents); diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 589fa205f..4e21910c9 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -494,7 +494,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents); const [unreadInfo, setUnreadInfo] = useState(() => getRoomUnreadInfo(room, true)); - const readUptoEventIdRef = useRef(); + const readUptoEventIdRef = useRef(undefined); if (unreadInfo) { readUptoEventIdRef.current = unreadInfo.readUptoEventId; } diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx index de69b1604..7d5e01301 100644 --- a/src/app/features/room/RoomView.tsx +++ b/src/app/features/room/RoomView.tsx @@ -57,8 +57,8 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => { }; export function RoomView({ eventId }: { eventId?: string }) { - const roomInputRef = useRef(null); - const roomViewRef = useRef(null); + const roomInputRef = useRef(null) as React.RefObject; + const roomViewRef = useRef(null) as React.RefObject; const [chatBackground] = useSetting(settingsAtom, 'chatBackground'); const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal'); const theme = useTheme(); diff --git a/src/app/hooks/useDebounce.ts b/src/app/hooks/useDebounce.ts index df48f3d2d..0a9f071ea 100644 --- a/src/app/hooks/useDebounce.ts +++ b/src/app/hooks/useDebounce.ts @@ -10,7 +10,7 @@ export function useDebounce( callback: DebounceCallback, options?: DebounceOptions, ): DebounceCallback { - const timeoutIdRef = useRef(); + const timeoutIdRef = useRef(undefined); const { wait, immediate } = options ?? {}; const debounceCallback = useCallback( diff --git a/src/app/hooks/useFileDrop.ts b/src/app/hooks/useFileDrop.ts index 61876cf33..78438ea51 100644 --- a/src/app/hooks/useFileDrop.ts +++ b/src/app/hooks/useFileDrop.ts @@ -14,7 +14,7 @@ export const useFileDropZone = ( zoneRef: RefObject, onDrop: (file: File[]) => void, ): boolean => { - const dragStateRef = useRef<'start' | 'leave' | 'over'>(); + const dragStateRef = useRef<'start' | 'leave' | 'over' | undefined>(undefined); const [active, setActive] = useState(false); useEffect(() => { diff --git a/src/app/hooks/useForceUpdate.ts b/src/app/hooks/useForceUpdate.ts index 0691aa922..8f2114569 100644 --- a/src/app/hooks/useForceUpdate.ts +++ b/src/app/hooks/useForceUpdate.ts @@ -3,7 +3,7 @@ import { useReducer } from 'react'; const reducer = (prevCount: number): number => prevCount + 1; export const useForceUpdate = (): [number, () => void] => { - const [state, dispatch] = useReducer(reducer, 0); + const [state, dispatch] = useReducer(reducer, 0); return [state, dispatch]; }; diff --git a/src/app/hooks/useThrottle.ts b/src/app/hooks/useThrottle.ts index fd5a878f6..d09a7995a 100644 --- a/src/app/hooks/useThrottle.ts +++ b/src/app/hooks/useThrottle.ts @@ -11,8 +11,8 @@ export function useThrottle( callback: ThrottleCallback, options?: ThrottleOptions, ): ThrottleCallback { - const timeoutIdRef = useRef(); - const argsRef = useRef(); + const timeoutIdRef = useRef(undefined); + const argsRef = useRef(undefined); const { wait, immediate } = options ?? {}; const debounceCallback = useCallback( diff --git a/src/app/hooks/useVirtualPaginator.ts b/src/app/hooks/useVirtualPaginator.ts index 3cb3b6fdc..325abc3c2 100644 --- a/src/app/hooks/useVirtualPaginator.ts +++ b/src/app/hooks/useVirtualPaginator.ts @@ -166,16 +166,22 @@ export const useVirtualPaginator = ( const initialRenderRef = useRef(true); - const restoreScrollRef = useRef<{ - scrollTop: number; - anchorOffsetTop: number; - anchorItem: number; - }>(); + const restoreScrollRef = useRef< + | { + scrollTop: number; + anchorOffsetTop: number; + anchorItem: number; + } + | undefined + >(undefined); - const scrollToItemRef = useRef<{ - index: number; - opts?: ScrollToOptions; - }>(); + const scrollToItemRef = useRef< + | { + index: number; + opts?: ScrollToOptions; + } + | undefined + >(undefined); const propRef = useRef({ range, diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx index bbace3a6f..d6544e55f 100644 --- a/src/app/pages/client/ClientNonUIFeatures.tsx +++ b/src/app/pages/client/ClientNonUIFeatures.tsx @@ -130,7 +130,7 @@ function InviteNotifications() { function MessageNotifications() { const audioRef = useRef(null); - const notifRef = useRef(); + const notifRef = useRef(undefined); const unreadCacheRef = useRef>(new Map()); const mx = useMatrixClient(); const useAuthentication = useMediaAuthentication(); diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx index a2e1b6820..9ee04d315 100644 --- a/src/app/pages/client/SidebarNav.tsx +++ b/src/app/pages/client/SidebarNav.tsx @@ -20,7 +20,7 @@ import { import { CreateTab } from './sidebar/CreateTab'; export function SidebarNav() { - const scrollRef = useRef(null); + const scrollRef = useRef(null) as React.RefObject; return ( diff --git a/src/app/pages/client/explore/Server.tsx b/src/app/pages/client/explore/Server.tsx index 0539e3d1f..071d069d9 100644 --- a/src/app/pages/client/explore/Server.tsx +++ b/src/app/pages/client/explore/Server.tsx @@ -355,8 +355,8 @@ export function PublicRooms() { const [searchParams] = useSearchParams(); const serverSearchParams = useServerSearchParams(searchParams); const isSearch = !!serverSearchParams.term; - const scrollRef = useRef(null); - const searchInputRef = useRef(null); + const scrollRef = useRef(null) as React.RefObject; + const searchInputRef = useRef(null) as React.RefObject; const navigate = useNavigate(); const roomTypeFilters = useRoomTypeFilters(); diff --git a/src/app/pages/client/home/Search.tsx b/src/app/pages/client/home/Search.tsx index 45bc6853f..e3290bf9e 100644 --- a/src/app/pages/client/home/Search.tsx +++ b/src/app/pages/client/home/Search.tsx @@ -7,7 +7,7 @@ import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize'; import { BackRouteHandler } from '../../../components/BackRouteHandler'; export function HomeSearch() { - const scrollRef = useRef(null); + const scrollRef = useRef(null) as React.RefObject; const rooms = useHomeRooms(); const screenSize = useScreenSizeContext(); diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx index 07383a9e3..fef11aeda 100644 --- a/src/app/pages/client/inbox/Notifications.tsx +++ b/src/app/pages/client/inbox/Notifications.tsx @@ -575,8 +575,8 @@ export function Notifications() { const { navigateRoom } = useRoomNavigate(); const [searchParams, setSearchParams] = useSearchParams(); const notificationsSearchParams = useNotificationsSearchParams(searchParams); - const scrollRef = useRef(null); - const scrollTopAnchorRef = useRef(null); + const scrollRef = useRef(null) as React.RefObject; + const scrollTopAnchorRef = useRef(null) as React.RefObject; const [refreshIntervalTime, setRefreshIntervalTime] = useState(DEFAULT_REFRESH_MS); const onlyHighlight = notificationsSearchParams.only === 'highlight'; diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx index 3a9f60633..6ce1635b8 100644 --- a/src/app/pages/client/sidebar/SpaceTabs.tsx +++ b/src/app/pages/client/sidebar/SpaceTabs.tsx @@ -402,7 +402,7 @@ function SpaceTab({ }: SpaceTabProps) { const mx = useMatrixClient(); const useAuthentication = useMediaAuthentication(); - const targetRef = useRef(null); + const targetRef = useRef(null) as React.RefObject; const spaceDraggable: SidebarDraggable = useMemo( () => @@ -506,8 +506,8 @@ type OpenedSpaceFolderProps = { children?: ReactNode; }; function OpenedSpaceFolder({ folder, onClose, children }: OpenedSpaceFolderProps) { - const aboveTargetRef = useRef(null); - const belowTargetRef = useRef(null); + const aboveTargetRef = useRef(null) as React.RefObject; + const belowTargetRef = useRef(null) as React.RefObject; const spaceDraggable: SidebarDraggable = useMemo(() => ({ folder, open: true }), [folder]); @@ -554,7 +554,7 @@ function ClosedSpaceFolder({ }: ClosedSpaceFolderProps) { const mx = useMatrixClient(); const useAuthentication = useMediaAuthentication(); - const handlerRef = useRef(null); + const handlerRef = useRef(null) as React.RefObject; const spaceDraggable: FolderDraggable = useMemo(() => ({ folder }), [folder]); useDraggableItem(spaceDraggable, handlerRef, onDragging); diff --git a/src/app/pages/client/space/Search.tsx b/src/app/pages/client/space/Search.tsx index 351e70b6f..909304647 100644 --- a/src/app/pages/client/space/Search.tsx +++ b/src/app/pages/client/space/Search.tsx @@ -14,7 +14,7 @@ import { BackRouteHandler } from '../../../components/BackRouteHandler'; export function SpaceSearch() { const mx = useMatrixClient(); - const scrollRef = useRef(null); + const scrollRef = useRef(null) as React.RefObject; const space = useSpace(); const screenSize = useScreenSizeContext(); diff --git a/src/app/plugins/react-custom-html-parser.tsx b/src/app/plugins/react-custom-html-parser.tsx index 664c93147..e579f9d2c 100644 --- a/src/app/plugins/react-custom-html-parser.tsx +++ b/src/app/plugins/react-custom-html-parser.tsx @@ -1,5 +1,6 @@ /* eslint-disable jsx-a11y/alt-text */ import React, { + type JSX, ComponentPropsWithoutRef, ReactEventHandler, Suspense,