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>

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;