chore: upgrade React 18→19 and fix breaking type changes
- 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<T>(null) now returns RefObject<T | null>; cast to
RefObject<T> at 16 component call sites (safe, runtime unchanged)
- useRef<T>() without arg no longer valid; add | undefined>(undefined)
in useDebounce, useFileDrop, useThrottle, useVirtualPaginator hooks,
RoomInput, RoomTimeline, and ClientNonUIFeatures
- useReducer<typeof reducer> 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 <noreply@anthropic.com>
This commit is contained in:
Generated
+29
-45
@@ -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",
|
||||
|
||||
+4
-4
@@ -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",
|
||||
|
||||
@@ -399,7 +399,7 @@ type CallEmbedProviderProps = {
|
||||
};
|
||||
export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
|
||||
const callEmbed = useAtomValue(callEmbedAtom);
|
||||
const callEmbedRef = useRef<HTMLDivElement>(null);
|
||||
const callEmbedRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const joined = useCallJoined(callEmbed);
|
||||
|
||||
const selectedRoom = useSelectedRoom();
|
||||
|
||||
@@ -12,8 +12,8 @@ type ConfirmPasswordMatchProps = {
|
||||
};
|
||||
export function ConfirmPasswordMatch({ initialValue, children }: ConfirmPasswordMatchProps) {
|
||||
const [match, setMatch] = useState(initialValue);
|
||||
const passRef = useRef<HTMLInputElement>(null);
|
||||
const confPassRef = useRef<HTMLInputElement>(null);
|
||||
const passRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
|
||||
const confPassRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
|
||||
|
||||
const doMatch = useDebounce(
|
||||
useCallback(() => {
|
||||
|
||||
@@ -421,8 +421,8 @@ export function EmojiBoard({
|
||||
{ wait: 200 },
|
||||
);
|
||||
|
||||
const contentScrollRef = useRef<HTMLDivElement>(null);
|
||||
const virtualBaseRef = useRef<HTMLDivElement>(null);
|
||||
const contentScrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const virtualBaseRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const virtualizer = useVirtualizer({
|
||||
count: groups.length,
|
||||
getScrollElement: () => contentScrollRef.current,
|
||||
|
||||
@@ -152,7 +152,7 @@ function CallJoined({ joined, containerRef }: CallJoinedProps) {
|
||||
|
||||
export function CallView() {
|
||||
const room = useRoom();
|
||||
const callContainerRef = useRef<HTMLDivElement>(null);
|
||||
const callContainerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
useCallEmbedPlacementSync(callContainerRef);
|
||||
|
||||
const callEmbed = useCallEmbed();
|
||||
|
||||
@@ -95,9 +95,9 @@ export function Members({ requestClose }: MembersProps) {
|
||||
const memberSort = useMemberSort(sortFilterIndex, useMemberSortMenu());
|
||||
const memberPowerSort = useMemberPowerSort(creators, getPowerLevel);
|
||||
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const searchInputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
|
||||
const scrollTopAnchorRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
|
||||
const sortedMembers = useMemo(
|
||||
() =>
|
||||
|
||||
@@ -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<HTMLDivElement>(null);
|
||||
const heroSectionRef = useRef<HTMLDivElement>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const heroSectionRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const [heroSectionHeight, setHeroSectionHeight] = useState<number>();
|
||||
const [spaceRooms, setSpaceRooms] = useAtom(spaceRoomsAtom);
|
||||
const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
|
||||
|
||||
@@ -315,8 +315,8 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const { roomId, content } = item;
|
||||
const room = getRoom(roomId);
|
||||
const targetRef = useRef<HTMLDivElement>(null);
|
||||
const targetHandleRef = useRef<HTMLDivElement>(null);
|
||||
const targetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const targetHandleRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
useDraggableItem(item, targetRef, onDragging, targetHandleRef);
|
||||
|
||||
const joined = room?.getMyMembership() === Membership.Join;
|
||||
|
||||
@@ -429,7 +429,7 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const { roomId, content } = item;
|
||||
const space = getRoom(roomId);
|
||||
const targetRef = useRef<HTMLDivElement>(null);
|
||||
const targetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
useDraggableItem(item, targetRef, onDragging);
|
||||
|
||||
return (
|
||||
|
||||
@@ -60,8 +60,8 @@ export function MessageSearch({
|
||||
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
|
||||
const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
|
||||
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
|
||||
const searchInputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
|
||||
const scrollTopAnchorRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const searchPathSearchParams = useSearchPathSearchParams(searchParams);
|
||||
const { navigateRoom } = useRoomNavigate();
|
||||
|
||||
@@ -180,9 +180,9 @@ type MembersDrawerProps = {
|
||||
export function MembersDrawer({ room, members }: MembersDrawerProps) {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const searchInputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
|
||||
const scrollTopAnchorRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const powerLevels = usePowerLevelsContext();
|
||||
const creators = useRoomCreators(room);
|
||||
const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
|
||||
|
||||
@@ -176,7 +176,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
roomUploadAtomFamily,
|
||||
selectedFiles.map((f) => f.file),
|
||||
);
|
||||
const uploadBoardHandlers = useRef<UploadBoardImperativeHandlers>();
|
||||
const uploadBoardHandlers = useRef<UploadBoardImperativeHandlers | undefined>(undefined);
|
||||
|
||||
const imagePackRooms: Room[] = useImagePackRooms(roomId, roomToParents);
|
||||
|
||||
|
||||
@@ -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<string>();
|
||||
const readUptoEventIdRef = useRef<string | undefined>(undefined);
|
||||
if (unreadInfo) {
|
||||
readUptoEventIdRef.current = unreadInfo.readUptoEventId;
|
||||
}
|
||||
|
||||
@@ -57,8 +57,8 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
|
||||
};
|
||||
|
||||
export function RoomView({ eventId }: { eventId?: string }) {
|
||||
const roomInputRef = useRef<HTMLDivElement>(null);
|
||||
const roomViewRef = useRef<HTMLDivElement>(null);
|
||||
const roomInputRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const roomViewRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const [chatBackground] = useSetting(settingsAtom, 'chatBackground');
|
||||
const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
|
||||
const theme = useTheme();
|
||||
|
||||
@@ -10,7 +10,7 @@ export function useDebounce<T extends unknown[]>(
|
||||
callback: DebounceCallback<T>,
|
||||
options?: DebounceOptions,
|
||||
): DebounceCallback<T> {
|
||||
const timeoutIdRef = useRef<number>();
|
||||
const timeoutIdRef = useRef<number | undefined>(undefined);
|
||||
const { wait, immediate } = options ?? {};
|
||||
|
||||
const debounceCallback = useCallback(
|
||||
|
||||
@@ -14,7 +14,7 @@ export const useFileDropZone = (
|
||||
zoneRef: RefObject<HTMLElement>,
|
||||
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(() => {
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useReducer } from 'react';
|
||||
const reducer = (prevCount: number): number => prevCount + 1;
|
||||
|
||||
export const useForceUpdate = (): [number, () => void] => {
|
||||
const [state, dispatch] = useReducer<typeof reducer>(reducer, 0);
|
||||
const [state, dispatch] = useReducer(reducer, 0);
|
||||
|
||||
return [state, dispatch];
|
||||
};
|
||||
|
||||
@@ -11,8 +11,8 @@ export function useThrottle<T extends unknown[]>(
|
||||
callback: ThrottleCallback<T>,
|
||||
options?: ThrottleOptions,
|
||||
): ThrottleCallback<T> {
|
||||
const timeoutIdRef = useRef<number>();
|
||||
const argsRef = useRef<T>();
|
||||
const timeoutIdRef = useRef<number | undefined>(undefined);
|
||||
const argsRef = useRef<T | undefined>(undefined);
|
||||
const { wait, immediate } = options ?? {};
|
||||
|
||||
const debounceCallback = useCallback(
|
||||
|
||||
@@ -166,16 +166,22 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
|
||||
|
||||
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,
|
||||
|
||||
@@ -130,7 +130,7 @@ function InviteNotifications() {
|
||||
|
||||
function MessageNotifications() {
|
||||
const audioRef = useRef<HTMLAudioElement>(null);
|
||||
const notifRef = useRef<Notification>();
|
||||
const notifRef = useRef<Notification | undefined>(undefined);
|
||||
const unreadCacheRef = useRef<Map<string, UnreadInfo>>(new Map());
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
|
||||
@@ -20,7 +20,7 @@ import {
|
||||
import { CreateTab } from './sidebar/CreateTab';
|
||||
|
||||
export function SidebarNav() {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
|
||||
return (
|
||||
<Sidebar>
|
||||
|
||||
@@ -355,8 +355,8 @@ export function PublicRooms() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const serverSearchParams = useServerSearchParams(searchParams);
|
||||
const isSearch = !!serverSearchParams.term;
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const searchInputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
|
||||
const navigate = useNavigate();
|
||||
const roomTypeFilters = useRoomTypeFilters();
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
|
||||
import { BackRouteHandler } from '../../../components/BackRouteHandler';
|
||||
|
||||
export function HomeSearch() {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const rooms = useHomeRooms();
|
||||
const screenSize = useScreenSizeContext();
|
||||
|
||||
|
||||
@@ -575,8 +575,8 @@ export function Notifications() {
|
||||
const { navigateRoom } = useRoomNavigate();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const notificationsSearchParams = useNotificationsSearchParams(searchParams);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const scrollTopAnchorRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const [refreshIntervalTime, setRefreshIntervalTime] = useState(DEFAULT_REFRESH_MS);
|
||||
|
||||
const onlyHighlight = notificationsSearchParams.only === 'highlight';
|
||||
|
||||
@@ -402,7 +402,7 @@ function SpaceTab({
|
||||
}: SpaceTabProps) {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const targetRef = useRef<HTMLDivElement>(null);
|
||||
const targetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
|
||||
const spaceDraggable: SidebarDraggable = useMemo(
|
||||
() =>
|
||||
@@ -506,8 +506,8 @@ type OpenedSpaceFolderProps = {
|
||||
children?: ReactNode;
|
||||
};
|
||||
function OpenedSpaceFolder({ folder, onClose, children }: OpenedSpaceFolderProps) {
|
||||
const aboveTargetRef = useRef<HTMLDivElement>(null);
|
||||
const belowTargetRef = useRef<HTMLDivElement>(null);
|
||||
const aboveTargetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const belowTargetRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
|
||||
const spaceDraggable: SidebarDraggable = useMemo(() => ({ folder, open: true }), [folder]);
|
||||
|
||||
@@ -554,7 +554,7 @@ function ClosedSpaceFolder({
|
||||
}: ClosedSpaceFolderProps) {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const handlerRef = useRef<HTMLDivElement>(null);
|
||||
const handlerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
|
||||
const spaceDraggable: FolderDraggable = useMemo(() => ({ folder }), [folder]);
|
||||
useDraggableItem(spaceDraggable, handlerRef, onDragging);
|
||||
|
||||
@@ -14,7 +14,7 @@ import { BackRouteHandler } from '../../../components/BackRouteHandler';
|
||||
|
||||
export function SpaceSearch() {
|
||||
const mx = useMatrixClient();
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
const space = useSpace();
|
||||
const screenSize = useScreenSizeContext();
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* eslint-disable jsx-a11y/alt-text */
|
||||
import React, {
|
||||
type JSX,
|
||||
ComponentPropsWithoutRef,
|
||||
ReactEventHandler,
|
||||
Suspense,
|
||||
|
||||
Reference in New Issue
Block a user