Update dependency typescript to v5.5.2 (#12688)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

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

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<ComponentProps<typeof AccessibleButton>, "title" | "onClick" | "disabled" | "element" | "ref"> & {
+type Props = Omit<ButtonProps<"div">, "title" | "onClick" | "disabled" | "element" | "ref"> & {
     // Playback instance to manipulate. Cannot change during the component lifecycle.
     playback: Playback;
 

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<React.ComponentProps<typeof AccessibleButton>> {
+type KebabContextMenuProps = Partial<ButtonProps<any>> & {
     options: React.ReactNode[];
     title: string;
-}
+};
 
 export const KebabContextMenu: React.FC<KebabContextMenuProps> = ({ options, title, ...props }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();

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<typeof AccessibleButton> {
+type TooltipOptionProps<T extends keyof JSX.IntrinsicElements> = ButtonProps<T> & {
     endAdornment?: ReactNode;
     inputRef?: Ref;
-}
+};
 
-export const TooltipOption: React.FC<TooltipOptionProps> = ({ inputRef, className, ...props }) => {
+export const TooltipOption = <T extends keyof JSX.IntrinsicElements>({
+    inputRef,
+    className,
+    element,
+    ...props
+}: TooltipOptionProps<T>): JSX.Element => {
     const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
     return (
         <AccessibleButton
@@ -37,6 +42,7 @@ export const TooltipOption: React.FC<TooltipOptionProps> = ({ inputRef, classNam
             tabIndex={-1}
             aria-selected={isActive}
             role="option"
+            element={element as keyof JSX.IntrinsicElements}
         />
     );
 };

src/components/views/elements/AccessibleButton.tsx

@@ -113,6 +113,8 @@ type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> &
     disableTooltip?: TooltipProps["disabled"];
 };
 
+export type ButtonProps<T extends keyof JSX.IntrinsicElements> = Props<T>;
+
 /**
  * Type of the props passed to the element that is rendered by AccessibleButton.
  */

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<ComponentProps<typeof AccessibleButton>, "kind" | "onClick" | "className"> & {
+type Props = Omit<ButtonProps<"div">, "element" | "kind" | "onClick" | "className"> & {
     title: string;
     description: string | React.ReactNode;
 };

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<ComponentProps<typeof AccessibleButton>, "element"> {
+interface Props extends Omit<ButtonProps<"div">, "element"> {
     inputRef?: Ref;
     title: string;
     iconClassName: string;

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<ComponentProps<typeof AccessibleButton>, "title" | "element"> & {
+type ButtonProps = Omit<AccessibleButtonProps<"div">, "title" | "element"> & {
     state: boolean;
     onLabel?: string;
     offLabel?: string;

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;
     }
 
     /**

tsconfig.json

@@ -6,7 +6,7 @@
         "esModuleInterop": true,
         "module": "es2022",
         "moduleResolution": "node",
-        "target": "es2016",
+        "target": "es2018",
         "noUnusedLocals": true,
         "sourceMap": false,
         "outDir": "./lib",

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"