diff --git a/package.json b/package.json index 71d053d3a8..c25ee59d40 100644 --- a/package.json +++ b/package.json @@ -227,7 +227,7 @@ "stylelint-config-standard": "^36.0.0", "stylelint-scss": "^6.0.0", "ts-node": "^10.9.1", - "typescript": "5.4.5" + "typescript": "5.5.2" }, "peerDependencies": { "postcss": "^8.4.19", diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx index c49fd2e74c..2ffe621309 100644 --- a/src/components/views/audio_messages/PlayPauseButton.tsx +++ b/src/components/views/audio_messages/PlayPauseButton.tsx @@ -14,14 +14,14 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ComponentProps, ReactNode } from "react"; +import React, { ReactNode } from "react"; import classNames from "classnames"; import { _t } from "../../../languageHandler"; import { Playback, PlaybackState } from "../../../audio/Playback"; -import AccessibleButton from "../elements/AccessibleButton"; +import AccessibleButton, { ButtonProps } from "../elements/AccessibleButton"; -type Props = Omit, "title" | "onClick" | "disabled" | "element" | "ref"> & { +type Props = Omit, "title" | "onClick" | "disabled" | "element" | "ref"> & { // Playback instance to manipulate. Cannot change during the component lifecycle. playback: Playback; diff --git a/src/components/views/context_menus/KebabContextMenu.tsx b/src/components/views/context_menus/KebabContextMenu.tsx index 7a6b09668d..f963933bdb 100644 --- a/src/components/views/context_menus/KebabContextMenu.tsx +++ b/src/components/views/context_menus/KebabContextMenu.tsx @@ -18,7 +18,7 @@ import React from "react"; import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg"; import { ChevronFace, ContextMenuButton, MenuProps, useContextMenu } from "../../structures/ContextMenu"; -import AccessibleButton from "../elements/AccessibleButton"; +import { ButtonProps } from "../elements/AccessibleButton"; import IconizedContextMenu, { IconizedContextMenuOptionList } from "./IconizedContextMenu"; const contextMenuBelow = (elementRect: DOMRect): MenuProps => { @@ -29,10 +29,10 @@ const contextMenuBelow = (elementRect: DOMRect): MenuProps => { return { left, top, chevronFace }; }; -interface KebabContextMenuProps extends Partial> { +type KebabContextMenuProps = Partial> & { options: React.ReactNode[]; title: string; -} +}; export const KebabContextMenu: React.FC = ({ options, title, ...props }) => { const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); diff --git a/src/components/views/dialogs/spotlight/TooltipOption.tsx b/src/components/views/dialogs/spotlight/TooltipOption.tsx index 0deb4b1311..24c97d601f 100644 --- a/src/components/views/dialogs/spotlight/TooltipOption.tsx +++ b/src/components/views/dialogs/spotlight/TooltipOption.tsx @@ -15,18 +15,23 @@ limitations under the License. */ import classNames from "classnames"; -import React, { ComponentProps, ReactNode } from "react"; +import React, { ReactNode } from "react"; import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex"; -import AccessibleButton from "../../elements/AccessibleButton"; +import AccessibleButton, { ButtonProps } from "../../elements/AccessibleButton"; import { Ref } from "../../../../accessibility/roving/types"; -interface TooltipOptionProps extends ComponentProps { +type TooltipOptionProps = ButtonProps & { endAdornment?: ReactNode; inputRef?: Ref; -} +}; -export const TooltipOption: React.FC = ({ inputRef, className, ...props }) => { +export const TooltipOption = ({ + inputRef, + className, + element, + ...props +}: TooltipOptionProps): JSX.Element => { const [onFocus, isActive, ref] = useRovingTabIndex(inputRef); return ( = ({ inputRef, classNam tabIndex={-1} aria-selected={isActive} role="option" + element={element as keyof JSX.IntrinsicElements} /> ); }; diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx index 76b90506dc..c80f8a018d 100644 --- a/src/components/views/elements/AccessibleButton.tsx +++ b/src/components/views/elements/AccessibleButton.tsx @@ -113,6 +113,8 @@ type Props = DynamicHtmlElementProps & disableTooltip?: TooltipProps["disabled"]; }; +export type ButtonProps = Props; + /** * Type of the props passed to the element that is rendered by AccessibleButton. */ diff --git a/src/components/views/elements/LearnMore.tsx b/src/components/views/elements/LearnMore.tsx index efce35bfe3..c7c7a1925e 100644 --- a/src/components/views/elements/LearnMore.tsx +++ b/src/components/views/elements/LearnMore.tsx @@ -14,14 +14,14 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ComponentProps } from "react"; +import React from "react"; import { _t } from "../../../languageHandler"; import Modal from "../../../Modal"; import InfoDialog from "../dialogs/InfoDialog"; -import AccessibleButton from "./AccessibleButton"; +import AccessibleButton, { ButtonProps } from "./AccessibleButton"; -type Props = Omit, "kind" | "onClick" | "className"> & { +type Props = Omit, "element" | "kind" | "onClick" | "className"> & { title: string; description: string | React.ReactNode; }; diff --git a/src/components/views/rooms/CollapsibleButton.tsx b/src/components/views/rooms/CollapsibleButton.tsx index 157e7f7a1a..d2d5de5eaa 100644 --- a/src/components/views/rooms/CollapsibleButton.tsx +++ b/src/components/views/rooms/CollapsibleButton.tsx @@ -14,15 +14,15 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ComponentProps, useContext } from "react"; +import React, { useContext } from "react"; import classNames from "classnames"; -import AccessibleButton from "../elements/AccessibleButton"; +import AccessibleButton, { ButtonProps } from "../elements/AccessibleButton"; import { OverflowMenuContext } from "./MessageComposerButtons"; import { IconizedContextMenuOption } from "../context_menus/IconizedContextMenu"; import { Ref } from "../../../accessibility/roving/types"; -interface Props extends Omit, "element"> { +interface Props extends Omit, "element"> { inputRef?: Ref; title: string; iconClassName: string; diff --git a/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx b/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx index 055c3fe49e..4b7b5b9923 100644 --- a/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx +++ b/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx @@ -16,7 +16,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ComponentProps, createRef, useState, forwardRef } from "react"; +import React, { createRef, useState, forwardRef } from "react"; import classNames from "classnames"; import { MatrixCall } from "matrix-js-sdk/src/webrtc/call"; @@ -32,7 +32,7 @@ import { import { _t } from "../../../../languageHandler"; import DeviceContextMenu from "../../context_menus/DeviceContextMenu"; import { MediaDeviceKindEnum } from "../../../../MediaDeviceHandler"; -import AccessibleButton, { ButtonEvent } from "../../elements/AccessibleButton"; +import AccessibleButton, { ButtonEvent, ButtonProps as AccessibleButtonProps } from "../../elements/AccessibleButton"; // Height of the header duplicated from CSS because we need to subtract it from our max // height to get the max height of the video @@ -40,7 +40,7 @@ const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the butt const CONTROLS_HIDE_DELAY = 2000; -type ButtonProps = Omit, "title" | "element"> & { +type ButtonProps = Omit, "title" | "element"> & { state: boolean; onLabel?: string; offLabel?: string; diff --git a/src/settings/SettingsStore.ts b/src/settings/SettingsStore.ts index 2afe03424c..2a52021618 100644 --- a/src/settings/SettingsStore.ts +++ b/src/settings/SettingsStore.ts @@ -263,13 +263,19 @@ export default class SettingsStore { public static getDisplayName(settingName: string, atLevel = SettingLevel.DEFAULT): string | null { if (!SETTINGS[settingName] || !SETTINGS[settingName].displayName) return null; - let displayName = SETTINGS[settingName].displayName; - if (displayName instanceof Object) { - if (displayName[atLevel]) displayName = displayName[atLevel]; - else displayName = displayName["default"]; + const displayName = SETTINGS[settingName].displayName; + + if (typeof displayName === "string") { + return _t(displayName); + } + if (displayName?.[atLevel]) { + return _t(displayName[atLevel]); + } + if (displayName?.["default"]) { + return _t(displayName["default"]); } - return displayName ? _t(displayName) : null; + return null; } /** diff --git a/tsconfig.json b/tsconfig.json index 3d5f96e1c2..382874c24f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,7 +6,7 @@ "esModuleInterop": true, "module": "es2022", "moduleResolution": "node", - "target": "es2016", + "target": "es2018", "noUnusedLocals": true, "sourceMap": false, "outDir": "./lib", diff --git a/yarn.lock b/yarn.lock index 110fcad299..6dc99f4605 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9226,10 +9226,10 @@ typed-array-length@^1.0.6: is-typed-array "^1.1.13" possible-typed-array-names "^1.0.0" -typescript@5.4.5: - version "5.4.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611" - integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ== +typescript@5.5.2: + version "5.5.2" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.2.tgz#c26f023cb0054e657ce04f72583ea2d85f8d0507" + integrity sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew== ua-parser-js@^1.0.2: version "1.0.38"