diff --git a/src/components/structures/AutoHideScrollbar.tsx b/src/components/structures/AutoHideScrollbar.tsx index 2279223eef..9cd68b5c58 100644 --- a/src/components/structures/AutoHideScrollbar.tsx +++ b/src/components/structures/AutoHideScrollbar.tsx @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. */ import classNames from "classnames"; -import React, { type HTMLAttributes, type JSX, type ReactHTML, type ReactNode, type WheelEvent } from "react"; +import React, { type HTMLAttributes, type JSX, type ReactNode, type WheelEvent } from "react"; type DynamicHtmlElementProps = JSX.IntrinsicElements[T] extends HTMLAttributes ? DynamicElementProps : DynamicElementProps<"div">; @@ -27,7 +27,7 @@ export type IProps = Omit extends React.Component> { public static defaultProps = { - element: "div" as keyof ReactHTML, + element: "div" as keyof HTMLElementTagNameMap, }; public readonly containerRef = React.createRef(); diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx index 36992dd8a9..bdbd8b4a08 100644 --- a/src/components/structures/ContextMenu.tsx +++ b/src/components/structures/ContextMenu.tsx @@ -440,7 +440,7 @@ export default class ContextMenu extends React.PureComponent { className?: string; isLoading?: boolean; - children?: React.ReactNode | React.ReactNodeArray; } const MapFallback: React.FC = ({ className, isLoading, children, ...rest }) => { diff --git a/src/components/views/messages/EventTileBubble.tsx b/src/components/views/messages/EventTileBubble.tsx index a5ac292f3c..56fbc83b86 100644 --- a/src/components/views/messages/EventTileBubble.tsx +++ b/src/components/views/messages/EventTileBubble.tsx @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import React, { type JSX, forwardRef, type ReactNode, type ReactChild } from "react"; +import React, { type JSX, forwardRef, type ReactNode } from "react"; import classNames from "classnames"; interface IProps { @@ -14,7 +14,7 @@ interface IProps { title: string; timestamp?: JSX.Element; subtitle?: ReactNode; - children?: ReactChild; + children?: JSX.Element; } const EventTileBubble = forwardRef( diff --git a/src/components/views/room_settings/AliasSettings.tsx b/src/components/views/room_settings/AliasSettings.tsx index b4354a731c..5c9792a296 100644 --- a/src/components/views/room_settings/AliasSettings.tsx +++ b/src/components/views/room_settings/AliasSettings.tsx @@ -280,7 +280,7 @@ export default class AliasSettings extends React.Component { private onLocalAliasesToggled = (event: ChangeEvent): void => { // expanded - if (event.target.open) { + if (event.currentTarget.open) { // if local aliases haven't been preloaded yet at component mount if (!this.props.canSetCanonicalAlias && this.state.localAliases.length === 0) { this.loadLocalAliases(); diff --git a/src/components/views/rooms/RoomContextDetails.tsx b/src/components/views/rooms/RoomContextDetails.tsx index 477edfe410..d7094b0e72 100644 --- a/src/components/views/rooms/RoomContextDetails.tsx +++ b/src/components/views/rooms/RoomContextDetails.tsx @@ -7,16 +7,20 @@ Please see LICENSE files in the repository root for full details. */ import { type Room } from "matrix-js-sdk/src/matrix"; -import React, { type JSX, type HTMLAttributes, type ReactHTML } from "react"; +import React, { type JSX, type HTMLAttributes } from "react"; import { roomContextDetails } from "../../../utils/i18n-helpers"; -type Props = HTMLAttributes & { +type Props = HTMLAttributes & { component?: T; room: Room; }; -export function RoomContextDetails({ room, component, ...other }: Props): JSX.Element { +export function RoomContextDetails({ + room, + component, + ...other +}: Props): JSX.Element { const contextDetails = roomContextDetails(room); if (contextDetails) { return React.createElement( diff --git a/src/components/views/rooms/RoomKnocksBar.tsx b/src/components/views/rooms/RoomKnocksBar.tsx index ffddfecb4a..9b762f0b96 100644 --- a/src/components/views/rooms/RoomKnocksBar.tsx +++ b/src/components/views/rooms/RoomKnocksBar.tsx @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import { EventTimeline, JoinRule, type MatrixError, type Room, RoomStateEvent } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; -import React, { type ReactElement, type ReactNode, useCallback, useState, type VFC } from "react"; +import React, { type ReactElement, type ReactNode, useCallback, useState, type FC } from "react"; import { CloseIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import dis from "../../../dispatcher/dispatcher"; @@ -22,7 +22,7 @@ import AccessibleButton from "../elements/AccessibleButton"; import Heading from "../typography/Heading"; import { formatList } from "../../../utils/FormattingUtils"; -export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => { +export const RoomKnocksBar: FC<{ room: Room }> = ({ room }) => { const [disabled, setDisabled] = useState(false); const knockMembers = useTypedEventEmitterState( room, diff --git a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx index 2e4f30d0f4..c3ef87e8c7 100644 --- a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import { EventTimeline, type MatrixError, type Room, type RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; -import React, { useCallback, useState, type VFC } from "react"; +import React, { useCallback, useState, type FC } from "react"; import { CloseIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { formatRelativeTime } from "../../../../../DateUtils"; @@ -22,13 +22,13 @@ import SettingsFieldset from "../../SettingsFieldset"; import { SettingsSection } from "../../shared/SettingsSection"; import SettingsTab from "../SettingsTab"; -const Timestamp: VFC<{ roomMember: RoomMember }> = ({ roomMember }) => { +const Timestamp: FC<{ roomMember: RoomMember }> = ({ roomMember }) => { const timestamp = roomMember.events.member?.event.origin_server_ts; if (!timestamp) return null; return ; }; -const SeeMoreOrLess: VFC<{ roomMember: RoomMember }> = ({ roomMember }) => { +const SeeMoreOrLess: FC<{ roomMember: RoomMember }> = ({ roomMember }) => { const [seeMore, setSeeMore] = useState(false); const reason = roomMember.events.member?.getContent().reason; @@ -51,7 +51,7 @@ const SeeMoreOrLess: VFC<{ roomMember: RoomMember }> = ({ roomMember }) => { ); }; -const Knock: VFC<{ +const Knock: FC<{ canInvite: boolean; canKick: boolean; onApprove: (userId: string) => Promise; @@ -103,7 +103,7 @@ const Knock: VFC<{ ); }; -export const PeopleRoomSettingsTab: VFC<{ room: Room }> = ({ room }) => { +export const PeopleRoomSettingsTab: FC<{ room: Room }> = ({ room }) => { const client = room.client; const userId = client.getUserId() || ""; const canInvite = room.canInvite(userId); diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx index a7166fdb6b..11b889304a 100644 --- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx @@ -224,8 +224,14 @@ export default class PreferencesUserSettingsTab extends React.Component ); + private renderGroup(settingIds: BooleanSettingKey[], level = SettingLevel.ACCOUNT): JSX.Element { + return ( + <> + {settingIds.map((i) => ( + + ))} + + ); } private onKeyboardShortcutsClicked = (): void => {