Use new compound tooltip

package.json

@@ -76,7 +76,7 @@
         "@sentry/browser": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.2.0",
-        "@vector-im/compound-web": "^3.3.1",
+        "@vector-im/compound-web": "^4.0.1",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

playwright/e2e/crypto/crypto.spec.ts

@@ -392,7 +392,7 @@ test.describe("Cryptography", function () {
             await bobSecondDevice.sendMessage(testRoomId, "test encrypted from unverified");
             await expect(lastTile).toContainText("test encrypted from unverified");
             await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
-            await lastTileE2eIcon.focus();
+            await lastTileE2eIcon.hover();
             await expect(page.getByRole("tooltip")).toContainText("Encrypted by a device not verified by its owner.");
 
             /* Should show a grey padlock for a message from an unknown device */
@@ -431,7 +431,7 @@ test.describe("Cryptography", function () {
             } else {
                 await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_normal/);
             }
-            await lastE2eIcon.focus();
+            await lastE2eIcon.hover();
             await expect(page.getByRole("tooltip")).toContainText("Encrypted by an unknown or deleted device.");
         });
 

src/Modal.tsx

@@ -20,7 +20,7 @@ import ReactDOM from "react-dom";
 import classNames from "classnames";
 import { defer, sleep } from "matrix-js-sdk/src/utils";
 import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
-import { Glass, TooltipProvider } from "@vector-im/compound-web";
+import { Glass } from "@vector-im/compound-web";
 
 import dis from "./dispatcher/dispatcher";
 import AsyncWrapper from "./AsyncWrapper";
@@ -374,18 +374,16 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
             const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);
 
             const staticDialog = (
-                <TooltipProvider>
-                    <div className={classes}>
-                        <Glass className="mx_Dialog_border">
-                            <div className="mx_Dialog">{this.staticModal.elem}</div>
-                        </Glass>
-                        <div
-                            data-testid="dialog-background"
-                            className="mx_Dialog_background mx_Dialog_staticBackground"
-                            onClick={this.onBackgroundClick}
-                        />
-                    </div>
-                </TooltipProvider>
+                <div className={classes}>
+                    <Glass className="mx_Dialog_border">
+                        <div className="mx_Dialog">{this.staticModal.elem}</div>
+                    </Glass>
+                    <div
+                        data-testid="dialog-background"
+                        className="mx_Dialog_background mx_Dialog_staticBackground"
+                        onClick={this.onBackgroundClick}
+                    />
+                </div>
             );
 
             ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
@@ -401,18 +399,16 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
             });
 
             const dialog = (
-                <TooltipProvider>
-                    <div className={classes}>
-                        <Glass className="mx_Dialog_border">
-                            <div className="mx_Dialog">{modal.elem}</div>
-                        </Glass>
-                        <div
-                            data-testid="dialog-background"
-                            className="mx_Dialog_background"
-                            onClick={this.onBackgroundClick}
-                        />
-                    </div>
-                </TooltipProvider>
+                <div className={classes}>
+                    <Glass className="mx_Dialog_border">
+                        <div className="mx_Dialog">{modal.elem}</div>
+                    </Glass>
+                    <div
+                        data-testid="dialog-background"
+                        className="mx_Dialog_background"
+                        onClick={this.onBackgroundClick}
+                    />
+                </div>
             );
 
             setImmediate(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()));

src/components/structures/ContextMenu.tsx

@@ -20,7 +20,6 @@ import React, { CSSProperties, RefObject, SyntheticEvent, useRef, useState } fro
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 import FocusLock from "react-focus-lock";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { Writeable } from "../../@types/common";
 import UIStore from "../../stores/UIStore";
@@ -630,17 +629,15 @@ export function createMenu(
     };
 
     const menu = (
-        <TooltipProvider>
-            <ContextMenu
-                {...props}
-                mountAsChild={true}
-                hasBackground={false}
-                onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
-                windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
-            >
-                <ElementClass {...props} onFinished={onFinished} />
-            </ContextMenu>
-        </TooltipProvider>
+        <ContextMenu
+            {...props}
+            mountAsChild={true}
+            hasBackground={false}
+            onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
+            windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
+        >
+            <ElementClass {...props} onFinished={onFinished} />
+        </ContextMenu>
     );
 
     ReactDOM.render(menu, getOrCreateContainer());

src/components/structures/MatrixChat.tsx

@@ -34,7 +34,6 @@ import { throttle } from "lodash";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 import { DecryptionError } from "matrix-js-sdk/src/crypto/algorithms";
 import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 // what-input helps improve keyboard accessibility
 import "what-input";
@@ -2138,9 +2137,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
         return (
             <ErrorBoundary>
-                <SDKContext.Provider value={this.stores}>
-                    <TooltipProvider>{view}</TooltipProvider>
-                </SDKContext.Provider>
+                <SDKContext.Provider value={this.stores}>{view}</SDKContext.Provider>
             </ErrorBoundary>
         );
     }

src/components/structures/auth/forgot-password/CheckEmail.tsx

@@ -66,7 +66,7 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
             <input onClick={onSubmitForm} type="button" className="mx_Login_submit" value={_t("action|next")} />
             <div className="mx_AuthBody_did-not-receive">
                 <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
-                <Tooltip label={_t("auth|check_email_resend_tooltip")} side="top" open={tooltipVisible}>
+                <Tooltip label={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
                     <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
                         <RetryIcon className="mx_Icon mx_Icon_16" />
                         {_t("action|resend")}

src/components/structures/auth/forgot-password/VerifyEmailModal.tsx

@@ -65,7 +65,7 @@ export const VerifyEmailModal: React.FC<Props> = ({
 
             <div className="mx_AuthBody_did-not-receive">
                 <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
-                <Tooltip label={_t("auth|check_email_resend_tooltip")} side="top" open={tooltipVisible}>
+                <Tooltip label={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
                     <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
                         <RetryIcon className="mx_Icon mx_Icon_16" />
                         {_t("action|resend")}

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -218,7 +218,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
                     viewAvatarOnClick={this.props.viewAvatarOnClick}
                 />
                 {icon && (
-                    <Tooltip label={tooltipText(this.state.icon)!} side="bottom">
+                    <Tooltip label={tooltipText(this.state.icon)!} placement="bottom">
                         {icon}
                     </Tooltip>
                 )}

src/components/views/elements/InfoTooltip.tsx

@@ -43,7 +43,7 @@ export default class InfoTooltip extends React.PureComponent<TooltipProps> {
 
         // Tooltip are forced on the right for a more natural feel to them on info icons
         return (
-            <Tooltip label={tooltip || title} side="right">
+            <Tooltip label={tooltip || title} placement="right">
                 <div className={classNames("mx_InfoTooltip", className)} tabIndex={this.props.tabIndex ?? 0}>
                     <span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
                     {children}

src/components/views/elements/PersistedElement.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React, { MutableRefObject, ReactNode } from "react";
 import ReactDOM from "react-dom";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import dis from "../../../dispatcher/dispatcher";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -177,11 +176,9 @@ export default class PersistedElement extends React.Component<IProps> {
     private renderApp(): void {
         const content = (
             <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
-                <TooltipProvider>
-                    <div ref={this.collectChild} style={this.props.style}>
-                        {this.props.children}
-                    </div>
-                </TooltipProvider>
+                <div ref={this.collectChild} style={this.props.style}>
+                    {this.props.children}
+                </div>
             </MatrixClientContext.Provider>
         );
 

src/components/views/elements/Pill.tsx

@@ -151,7 +151,7 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
                 <Tooltip
                     label={resourceId ?? ""}
                     open={resourceId ? undefined : false}
-                    side="right"
+                    placement="right"
                     isTriggerInteractive={isAnchor}
                 >
                     {isAnchor ? (

src/components/views/elements/TextWithTooltip.tsx

@@ -33,7 +33,7 @@ export default class TextWithTooltip extends React.Component<IProps> {
         const { className, children, tooltip, tooltipProps } = this.props;
 
         return (
-            <Tooltip label={tooltip} side="right">
+            <Tooltip label={tooltip} placement="right">
                 <span className={className} tabIndex={tooltipProps?.tabIndex ?? 0}>
                     {children}
                 </span>

src/components/views/messages/MStickerBody.tsx

@@ -69,8 +69,7 @@ export default class MStickerBody extends MImageBody {
         if (!content?.body || !content.info?.w) return null;
 
         return {
-            align: "center",
-            side: "right",
+            placement: "right",
             label: content.body,
         };
     }

src/components/views/messages/TextualBody.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React, { createRef, SyntheticEvent, MouseEvent } from "react";
 import ReactDOM from "react-dom";
 import { MsgType } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import * as HtmlUtils from "../../../HtmlUtils";
 import { formatDate } from "../../../DateUtils";
@@ -349,11 +348,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
 
                 const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
                 node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
-                const spoiler = (
-                    <TooltipProvider>
-                        <Spoiler reason={reason} contentHtml={node.outerHTML} />
-                    </TooltipProvider>
-                );
+                const spoiler = <Spoiler reason={reason} contentHtml={node.outerHTML} />;
 
                 ReactDOM.render(spoiler, spoilerContainer);
                 node.parentNode?.replaceChild(spoilerContainer, node);

src/components/views/polls/pollHistory/PollListItem.tsx

@@ -36,7 +36,7 @@ export const PollListItem: React.FC<Props> = ({ event, onClick }) => {
     const formattedDate = formatLocalDateShort(event.getTs());
     return (
         <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem" onClick={onClick}>
-            <Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
+            <Tooltip label={_t("right_panel|poll|view_poll")} placement="top" isTriggerInteractive={false}>
                 <div className="mx_PollListItem_content">
                     <span>{formattedDate}</span>
                     <PollIcon className="mx_PollListItem_icon" />

src/components/views/polls/pollHistory/PollListItemEnded.tsx

@@ -99,7 +99,7 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>
 
     return (
         <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded" onClick={onClick}>
-            <Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
+            <Tooltip label={_t("right_panel|poll|view_poll")} placement="top" isTriggerInteractive={false}>
                 <div className="mx_PollListItemEnded_content">
                     <div className="mx_PollListItemEnded_title">
                         <PollIcon className="mx_PollListItemEnded_icon" />

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -405,7 +405,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
                 align="center"
                 justify="space-between"
             >
-                <Tooltip label={_t("action|search")} side="right">
+                <Tooltip label={_t("action|search")} placement="right">
                     <button
                         className="mx_RoomSummaryCard_searchBtn"
                         data-testid="summary-search"

src/components/views/rooms/E2EIcon.tsx

@@ -48,7 +48,7 @@ interface Props {
     size?: number;
     onClick?: () => void;
     hideTooltip?: boolean;
-    tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+    tooltipPlacement?: ComponentProps<typeof Tooltip>["placement"];
     bordered?: boolean;
 }
 
@@ -69,7 +69,7 @@ const E2EIcon: React.FC<XOR<UserProps, RoomProps>> = ({
     size,
     onClick,
     hideTooltip,
-    tooltipSide,
+    tooltipPlacement,
     bordered,
 }) => {
     const classes = classNames(
@@ -109,7 +109,7 @@ const E2EIcon: React.FC<XOR<UserProps, RoomProps>> = ({
     }
 
     return (
-        <Tooltip label={label} side={tooltipSide} isTriggerInteractive={!!onClick}>
+        <Tooltip label={label} placement={tooltipPlacement} isTriggerInteractive={!!onClick}>
             {content}
         </Tooltip>
     );

src/components/views/rooms/EventTile.tsx

@@ -1546,7 +1546,7 @@ function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
     return (
         <div className="mx_EventTile_msgOption">
             <div className="mx_ReadReceiptGroup">
-                <Tooltip label={label} side="top" align="end">
+                <Tooltip label={label} placement="top-end">
                     <div className="mx_ReadReceiptGroup_button">
                         <span className="mx_ReadReceiptGroup_container">
                             <span className={receiptClasses}>{nonCssBadge}</span>

src/components/views/rooms/LegacyRoomHeader.tsx

@@ -784,7 +784,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
         const icon = this.props.viewingCall ? (
             <div className="mx_LegacyRoomHeader_icon mx_LegacyRoomHeader_icon_video" />
         ) : this.props.e2eStatus ? (
-            <E2EIcon className="mx_LegacyRoomHeader_icon" status={this.props.e2eStatus} tooltipSide="bottom" />
+            <E2EIcon className="mx_LegacyRoomHeader_icon" status={this.props.e2eStatus} tooltipPlacement="bottom" />
         ) : // If we're expecting an E2EE status to come in, but it hasn't
         // yet been loaded, insert a blank div to reserve space
         this.client.isRoomEncrypted(this.props.room.roomId) && this.client.isCryptoEnabled() ? (

src/components/views/rooms/NotificationBadge.tsx

@@ -121,7 +121,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
 
         if (showUnsentTooltip && notification.level === NotificationLevel.Unsent) {
             return (
-                <Tooltip label={_t("notifications|message_didnt_send")} side="right">
+                <Tooltip label={_t("notifications|message_didnt_send")} placement="right">
                     {badge}
                 </Tooltip>
             );

src/components/views/rooms/RoomHeader.tsx

@@ -252,7 +252,7 @@ export default function RoomHeader({
                             <span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
 
                             {!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
-                                <Tooltip label={_t("common|public_room")} side="right">
+                                <Tooltip label={_t("common|public_room")} placement="right">
                                     <PublicIcon
                                         width="16px"
                                         height="16px"
@@ -263,7 +263,7 @@ export default function RoomHeader({
                             )}
 
                             {isDirectMessage && e2eStatus === E2EStatus.Verified && (
-                                <Tooltip label={_t("common|verified")} side="right">
+                                <Tooltip label={_t("common|verified")} placement="right">
                                     <VerifiedIcon
                                         width="16px"
                                         height="16px"
@@ -274,7 +274,7 @@ export default function RoomHeader({
                             )}
 
                             {isDirectMessage && e2eStatus === E2EStatus.Warning && (
-                                <Tooltip label={_t("room|header_untrusted_label")} side="right">
+                                <Tooltip label={_t("room|header_untrusted_label")} placement="right">
                                     <ErrorIcon
                                         width="16px"
                                         height="16px"

src/components/views/settings/devices/FilteredDeviceListHeader.tsx

@@ -40,7 +40,7 @@ const FilteredDeviceListHeader: React.FC<Props> = ({
     return (
         <div className="mx_FilteredDeviceListHeader" {...rest}>
             {!isSelectDisabled && (
-                <Tooltip label={checkboxLabel} side="top" isTriggerInteractive={false}>
+                <Tooltip label={checkboxLabel} placement="top" isTriggerInteractive={false}>
                     <StyledCheckbox
                         kind={CheckboxStyle.Solid}
                         checked={isAllSelected}

src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx

@@ -45,7 +45,7 @@ export const ThreadsActivityCentreButton = forwardRef<HTMLButtonElement, Threads
         const openTooltip = displayLabel ? false : undefined;
 
         return (
-            <Tooltip label={_t("common|threads")} side="right" open={openTooltip}>
+            <Tooltip label={_t("common|threads")} placement="right" open={openTooltip}>
                 <IconButton
                     aria-label={_t("common|threads")}
                     className={classNames("mx_ThreadsActivityCentreButton", { expanded: displayLabel })}