Merge pull request #12416 from matrix-org/florianduros/tooltip-update

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.2",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

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}>
-                    <div className={classes}>
+                    <Glass className="mx_Dialog_border">
-                        <Glass className="mx_Dialog_border">
+                        <div className="mx_Dialog">{this.staticModal.elem}</div>
-                            <div className="mx_Dialog">{this.staticModal.elem}</div>
+                    </Glass>
-                        </Glass>
+                    <div
-                        <div
+                        data-testid="dialog-background"
-                            data-testid="dialog-background"
+                        className="mx_Dialog_background mx_Dialog_staticBackground"
-                            className="mx_Dialog_background mx_Dialog_staticBackground"
+                        onClick={this.onBackgroundClick}
-                            onClick={this.onBackgroundClick}
+                    />
-                        />
+                </div>
-                    </div>
-                </TooltipProvider>
             );
 
             ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
@@ -401,18 +399,16 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
             });
 
             const dialog = (
-                <TooltipProvider>
+                <div className={classes}>
-                    <div className={classes}>
+                    <Glass className="mx_Dialog_border">
-                        <Glass className="mx_Dialog_border">
+                        <div className="mx_Dialog">{modal.elem}</div>
-                            <div className="mx_Dialog">{modal.elem}</div>
+                    </Glass>
-                        </Glass>
+                    <div
-                        <div
+                        data-testid="dialog-background"
-                            data-testid="dialog-background"
+                        className="mx_Dialog_background"
-                            className="mx_Dialog_background"
+                        onClick={this.onBackgroundClick}
-                            onClick={this.onBackgroundClick}
+                    />
-                        />
+                </div>
-                    </div>
-                </TooltipProvider>
             );
 
             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
-            <ContextMenu
+            {...props}
-                {...props}
+            mountAsChild={true}
-                mountAsChild={true}
+            hasBackground={false}
-                hasBackground={false}
+            onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
-                onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
+            windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
-                windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
+        >
-            >
+            <ElementClass {...props} onFinished={onFinished} />
-                <ElementClass {...props} onFinished={onFinished} />
+        </ContextMenu>
-            </ContextMenu>
-        </TooltipProvider>
     );
 
     ReactDOM.render(menu, getOrCreateContainer());

src/components/structures/MatrixChat.tsx

@@ -33,7 +33,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { throttle } from "lodash";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 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";
@@ -2137,9 +2136,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
         return (
             <ErrorBoundary>
-                <SDKContext.Provider value={this.stores}>
+                <SDKContext.Provider value={this.stores}>{view}</SDKContext.Provider>
-                    <TooltipProvider>{view}</TooltipProvider>
-                </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}>
-                    <div ref={this.collectChild} style={this.props.style}>
+                    {this.props.children}
-                        {this.props.children}
+                </div>
-                    </div>
-                </TooltipProvider>
             </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",
+            placement: "right",
-            side: "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 = (
+                const spoiler = <Spoiler reason={reason} contentHtml={node.outerHTML} />;
-                    <TooltipProvider>
-                        <Spoiler reason={reason} contentHtml={node.outerHTML} />
-                    </TooltipProvider>
-                );
 
                 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 })}

src/toasts/IncomingCallToast.tsx

@@ -20,7 +20,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { MatrixRTCSessionManagerEvents } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSessionManager";
 // eslint-disable-next-line no-restricted-imports
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
-import { Button, Tooltip, TooltipProvider } from "@vector-im/compound-web";
+import { Button, Tooltip } from "@vector-im/compound-web";
 import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
 
 import { _t } from "../languageHandler";
@@ -168,7 +168,7 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
     );
 
     return (
-        <TooltipProvider>
+        <>
             <div>
                 <RoomAvatar room={room ?? undefined} size="24px" />
             </div>
@@ -200,6 +200,6 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
                 onClick={onCloseClick}
                 title={_t("action|close")}
             />
-        </TooltipProvider>
+        </>
     );
 }

src/utils/exportUtils/HtmlExport.tsx

@@ -20,7 +20,6 @@ import { Room, MatrixEvent, EventType, MsgType } from "matrix-js-sdk/src/matrix"
 import { renderToStaticMarkup } from "react-dom/server";
 import { logger } from "matrix-js-sdk/src/logger";
 import escapeHtml from "escape-html";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import Exporter from "./Exporter";
 import { mediaFromMxc } from "../../customisations/Media";
@@ -284,27 +283,25 @@ export default class HTMLExporter extends Exporter {
         return (
             <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
                 <MatrixClientContext.Provider value={this.room.client}>
-                    <TooltipProvider>
+                    <EventTile
-                        <EventTile
+                        mxEvent={mxEv}
-                            mxEvent={mxEv}
+                        continuation={continuation}
-                            continuation={continuation}
+                        isRedacted={mxEv.isRedacted()}
-                            isRedacted={mxEv.isRedacted()}
+                        replacingEventId={mxEv.replacingEventId()}
-                            replacingEventId={mxEv.replacingEventId()}
+                        forExport={true}
-                            forExport={true}
+                        alwaysShowTimestamps={true}
-                            alwaysShowTimestamps={true}
+                        showUrlPreview={false}
-                            showUrlPreview={false}
+                        checkUnmounting={() => false}
-                            checkUnmounting={() => false}
+                        isTwelveHour={false}
-                            isTwelveHour={false}
+                        last={false}
-                            last={false}
+                        lastInSection={false}
-                            lastInSection={false}
+                        permalinkCreator={this.permalinkCreator}
-                            permalinkCreator={this.permalinkCreator}
+                        lastSuccessful={false}
-                            lastSuccessful={false}
+                        isSelectedEvent={false}
-                            isSelectedEvent={false}
+                        showReactions={false}
-                            showReactions={false}
+                        layout={Layout.Group}
-                            layout={Layout.Group}
+                        showReadReceipts={false}
-                            showReadReceipts={false}
+                    />
-                        />
-                    </TooltipProvider>
                 </MatrixClientContext.Provider>
             </div>
         );

src/utils/pillify.tsx

@@ -18,7 +18,6 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 import { MatrixClient, MatrixEvent, RuleId } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import SettingsStore from "../settings/SettingsStore";
 import { Pill, pillRoomNotifLen, pillRoomNotifPos, PillType } from "../components/views/elements/Pill";
@@ -84,9 +83,7 @@ export function pillifyLinks(
                 const pillContainer = document.createElement("span");
 
                 const pill = (
-                    <TooltipProvider>
+                    <Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
-                        <Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
-                    </TooltipProvider>
                 );
 
                 ReactDOM.render(pill, pillContainer);
@@ -141,14 +138,12 @@ export function pillifyLinks(
 
                         const pillContainer = document.createElement("span");
                         const pill = (
-                            <TooltipProvider>
+                            <Pill
-                                <Pill
+                                type={PillType.AtRoomMention}
-                                    type={PillType.AtRoomMention}
+                                inMessage={true}
-                                    inMessage={true}
+                                room={room}
-                                    room={room}
+                                shouldShowPillAvatar={shouldShowPillAvatar}
-                                    shouldShowPillAvatar={shouldShowPillAvatar}
+                            />
-                                />
-                            </TooltipProvider>
                         );
 
                         ReactDOM.render(pill, pillContainer);

src/utils/tooltipify.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 import ReactDOM from "react-dom";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import PlatformPeg from "../PlatformPeg";
 import LinkWithTooltip from "../components/views/elements/LinkWithTooltip";
@@ -61,11 +60,9 @@ export function tooltipifyLinks(rootNodes: ArrayLike<Element>, ignoredNodes: Ele
             // wrapping the link with the LinkWithTooltip component, keeping the same children. Ideally we'd do this
             // without the superfluous span but this is not something React trivially supports at this time.
             const tooltip = (
-                <TooltipProvider>
+                <LinkWithTooltip tooltip={href}>
-                    <LinkWithTooltip tooltip={href}>
+                    <span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
-                        <span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
+                </LinkWithTooltip>
-                    </LinkWithTooltip>
-                </TooltipProvider>
             );
 
             ReactDOM.render(tooltip, node);

test/components/structures/MessagePanel-test.tsx

@@ -20,7 +20,6 @@ import { EventEmitter } from "events";
 import { MatrixEvent, Room, RoomMember, Thread, ReceiptType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { render } from "@testing-library/react";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import MessagePanel, { shouldFormContinuation } from "../../../src/components/structures/MessagePanel";
 import SettingsStore from "../../../src/settings/SettingsStore";
@@ -99,9 +98,7 @@ describe("MessagePanel", function () {
     const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) => (
         <MatrixClientContext.Provider value={client}>
             <RoomContext.Provider value={{ ...defaultRoomContext, ...roomContext }}>
-                <TooltipProvider>
+                <MessagePanel {...defaultProps} {...props} />
-                    <MessagePanel {...defaultProps} {...props} />
-                </TooltipProvider>
             </RoomContext.Provider>
         </MatrixClientContext.Provider>
     );

test/components/structures/RightPanel-test.tsx

@@ -19,7 +19,6 @@ import { render, screen, waitFor } from "@testing-library/react";
 import { jest } from "@jest/globals";
 import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import _RightPanel from "../../../src/components/structures/RightPanel";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
@@ -123,7 +122,6 @@ describe("RightPanel", () => {
                 resizeNotifier={resizeNotifier}
                 permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
             />,
-            { wrapper: TooltipProvider },
         );
         // Wait for RPS room 1 updates to fire
         const rpsUpdated = waitForRpsUpdate();

test/components/structures/RoomView-test.tsx

@@ -33,7 +33,6 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { MEGOLM_ALGORITHM } from "matrix-js-sdk/src/crypto/olmlib";
 import { fireEvent, render, screen, RenderResult, waitForElementToBeRemoved, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import {
     stubClient,
@@ -145,7 +144,6 @@ describe("RoomView", () => {
                     wrappedRef={ref as any}
                 />
             </SDKContext.Provider>,
-            { wrapper: TooltipProvider },
         );
         await flushPromises();
         return roomView;
@@ -183,7 +181,6 @@ describe("RoomView", () => {
                     onRegistered={jest.fn()}
                 />
             </SDKContext.Provider>,
-            { wrapper: TooltipProvider },
         );
         await flushPromises();
         return roomView;

test/components/structures/SpaceHierarchy-test.tsx

@@ -20,7 +20,6 @@ import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "@
 import { HierarchyRoom, JoinRule, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
 import { mkStubRoom, stubClient } from "../../test-utils";
@@ -287,9 +286,7 @@ describe("SpaceHierarchy", () => {
         };
         const getComponent = (props = {}): React.ReactElement => (
             <MatrixClientContext.Provider value={client}>
-                <TooltipProvider>
+                <SpaceHierarchy {...defaultProps} {...props} />
-                    <SpaceHierarchy {...defaultProps} {...props} />
-                </TooltipProvider>
             </MatrixClientContext.Provider>
         );
 

test/components/structures/ThreadPanel-test.tsx

@@ -25,7 +25,6 @@ import {
     FeatureSupport,
     Thread,
 } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import ThreadPanel, { ThreadFilterType, ThreadPanelHeader } from "../../../src/components/structures/ThreadPanel";
 import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
@@ -51,7 +50,6 @@ describe("ThreadPanel", () => {
                     filterOption={ThreadFilterType.All}
                     setFilterOption={() => undefined}
                 />,
-                { wrapper: TooltipProvider },
             );
             expect(asFragment()).toMatchSnapshot();
         });
@@ -63,7 +61,6 @@ describe("ThreadPanel", () => {
                     filterOption={ThreadFilterType.My}
                     setFilterOption={() => undefined}
                 />,
-                { wrapper: TooltipProvider },
             );
             expect(asFragment()).toMatchSnapshot();
         });
@@ -75,7 +72,6 @@ describe("ThreadPanel", () => {
                     filterOption={ThreadFilterType.All}
                     setFilterOption={() => undefined}
                 />,
-                { wrapper: TooltipProvider },
             );
             expect(asFragment()).toMatchSnapshot();
         });
@@ -87,7 +83,6 @@ describe("ThreadPanel", () => {
                     filterOption={ThreadFilterType.All}
                     setFilterOption={() => undefined}
                 />,
-                { wrapper: TooltipProvider },
             );
             const found = container.querySelector(".mx_ThreadPanel_dropdown");
             expect(found).toBeTruthy();
@@ -103,7 +98,6 @@ describe("ThreadPanel", () => {
                     filterOption={ThreadFilterType.All}
                     setFilterOption={() => undefined}
                 />,
-                { wrapper: TooltipProvider },
             );
             fireEvent.click(container.querySelector(".mx_ThreadPanel_dropdown")!);
             const found = screen.queryAllByRole("menuitemradio");
@@ -126,13 +120,11 @@ describe("ThreadPanel", () => {
             const { container } = render(
                 <RoomContext.Provider value={roomContextObject}>
                     <MatrixClientContext.Provider value={mockClient}>
-                        <TooltipProvider>
+                        <ThreadPanelHeader
-                            <ThreadPanelHeader
+                            empty={false}
-                                empty={false}
+                            filterOption={ThreadFilterType.All}
-                                filterOption={ThreadFilterType.All}
+                            setFilterOption={() => undefined}
-                                setFilterOption={() => undefined}
+                        />
-                            />
-                        </TooltipProvider>
                     </MatrixClientContext.Provider>
                 </RoomContext.Provider>,
             );
@@ -146,13 +138,11 @@ describe("ThreadPanel", () => {
             const mockClient = createTestClient();
             const { container } = render(
                 <MatrixClientContext.Provider value={mockClient}>
-                    <TooltipProvider>
+                    <ThreadPanelHeader
-                        <ThreadPanelHeader
+                        empty={false}
-                            empty={false}
+                        filterOption={ThreadFilterType.All}
-                            filterOption={ThreadFilterType.All}
+                        setFilterOption={() => undefined}
-                            setFilterOption={() => undefined}
+                    />
-                        />
-                    </TooltipProvider>
                 </MatrixClientContext.Provider>,
             );
             fireEvent.click(getByRole(container, "button", { name: "Mark all as read" }));
@@ -308,7 +298,7 @@ describe("ThreadPanel", () => {
             myThreads!.addLiveEvent(ownThread.rootEvent);
 
             let events: EventData[] = [];
-            const renderResult = render(<TestThreadPanel />, { wrapper: TooltipProvider });
+            const renderResult = render(<TestThreadPanel />);
             await waitFor(() => expect(renderResult.container.querySelector(".mx_AutoHideScrollbar")).toBeFalsy());
             await waitFor(() => {
                 events = findEvents(renderResult.container);
@@ -354,7 +344,7 @@ describe("ThreadPanel", () => {
             allThreads!.addLiveEvent(otherThread.rootEvent);
 
             let events: EventData[] = [];
-            const renderResult = render(<TestThreadPanel />, { wrapper: TooltipProvider });
+            const renderResult = render(<TestThreadPanel />);
             await waitFor(() => expect(renderResult.container.querySelector(".mx_AutoHideScrollbar")).toBeFalsy());
             await waitFor(() => {
                 events = findEvents(renderResult.container);

test/components/structures/TimelinePanel-test.tsx

@@ -39,7 +39,6 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import React, { createRef } from "react";
 import { Mocked, mocked } from "jest-mock";
 import { forEachRight } from "lodash";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import TimelinePanel from "../../../src/components/structures/TimelinePanel";
 import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
@@ -212,7 +211,6 @@ describe("TimelinePanel", () => {
                     manageReadReceipts={true}
                     ref={ref}
                 />,
-                { wrapper: TooltipProvider },
             );
             await flushPromises();
             timelinePanel = ref.current!;
@@ -392,7 +390,7 @@ describe("TimelinePanel", () => {
             onEventScrolledIntoView: jest.fn(),
         };
 
-        const { rerender } = render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });
+        const { rerender } = render(<TimelinePanel {...props} />);
         expect(props.onEventScrolledIntoView).toHaveBeenCalledWith(undefined);
         props.eventId = events[1].getId();
         rerender(<TimelinePanel {...props} />);
@@ -409,9 +407,7 @@ describe("TimelinePanel", () => {
         setupPagination(client, timeline, eventsPage1, null);
 
         await withScrollPanelMountSpy(async (mountSpy) => {
-            const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />, {
+            const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />, {});
-                wrapper: TooltipProvider,
-            });
 
             await waitFor(() => expectEvents(container, [events[1]]));
 
@@ -428,7 +424,7 @@ describe("TimelinePanel", () => {
         const [, room, events] = setupTestData();
 
         await withScrollPanelMountSpy(async (mountSpy) => {
-            const { container } = render(<TimelinePanel {...getProps(room, events)} />, { wrapper: TooltipProvider });
+            const { container } = render(<TimelinePanel {...getProps(room, events)} />);
 
             await waitFor(() => expectEvents(container, [events[0], events[1]]));
 
@@ -455,7 +451,7 @@ describe("TimelinePanel", () => {
 
             const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
 
-            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });
+            render(<TimelinePanel {...props} />);
 
             const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
             const data = { timeline: otherTimeline, liveEvent: true };
@@ -471,7 +467,7 @@ describe("TimelinePanel", () => {
 
             const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
 
-            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });
+            render(<TimelinePanel {...props} />);
 
             const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
             const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false };
@@ -487,7 +483,7 @@ describe("TimelinePanel", () => {
 
             const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
 
-            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });
+            render(<TimelinePanel {...props} />);
 
             const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
             const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false };
@@ -504,7 +500,7 @@ describe("TimelinePanel", () => {
 
             const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
 
-            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });
+            render(<TimelinePanel {...props} />);
 
             const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
             const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: true };
@@ -527,7 +523,7 @@ describe("TimelinePanel", () => {
 
             const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();
 
-            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });
+            render(<TimelinePanel {...props} />);
 
             await flushPromises();
 
@@ -568,7 +564,6 @@ describe("TimelinePanel", () => {
                     overlayTimelineSet={overlayTimelineSet}
                     overlayTimelineSetFilter={isCallEvent}
                 />,
-                { wrapper: TooltipProvider },
             );
             await waitFor(() =>
                 expectEvents(container, [
@@ -608,7 +603,6 @@ describe("TimelinePanel", () => {
 
             const { container } = render(
                 <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
-                { wrapper: TooltipProvider },
             );
 
             await waitFor(() =>
@@ -640,7 +634,6 @@ describe("TimelinePanel", () => {
 
             const { container } = render(
                 <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
-                { wrapper: TooltipProvider },
             );
 
             await waitFor(() =>
@@ -672,7 +665,6 @@ describe("TimelinePanel", () => {
 
             const { container } = render(
                 <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
-                { wrapper: TooltipProvider },
             );
 
             await waitFor(() =>
@@ -707,7 +699,6 @@ describe("TimelinePanel", () => {
                         timelineSet={timelineSet}
                         overlayTimelineSet={overlayTimelineSet}
                     />,
-                    { wrapper: TooltipProvider },
                 );
 
                 await waitFor(() => expectEvents(container, [overlayEvents[0], events[0]]));
@@ -781,7 +772,6 @@ describe("TimelinePanel", () => {
             await withScrollPanelMountSpy(async (mountSpy) => {
                 const { container } = render(
                     <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
-                    { wrapper: TooltipProvider },
                 );
 
                 await waitFor(() =>
@@ -894,7 +884,6 @@ describe("TimelinePanel", () => {
                 <MatrixClientContext.Provider value={client}>
                     <TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />
                 </MatrixClientContext.Provider>,
-                { wrapper: TooltipProvider },
             );
             await dom.findByText("RootEvent");
             await dom.findByText("ReplyEvent1");
@@ -948,7 +937,6 @@ describe("TimelinePanel", () => {
                 <MatrixClientContext.Provider value={client}>
                     <TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />
                 </MatrixClientContext.Provider>,
-                { wrapper: TooltipProvider },
             );
             await dom.findByText("RootEvent");
             await dom.findByText("ReplyEvent1");
@@ -1017,7 +1005,6 @@ describe("TimelinePanel", () => {
             <MatrixClientContext.Provider value={client}>
                 <TimelinePanel timelineSet={timelineSet} manageReadReceipts={true} sendReadReceiptOnLoad={true} />
             </MatrixClientContext.Provider>,
-            { wrapper: TooltipProvider },
         );
 
         await waitFor(() => expect(screen.queryByRole("progressbar")).toBeNull());

test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap

@@ -391,7 +391,6 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             Join
           </div>
           <span
-            class=""
             data-state="closed"
             tabindex="0"
           >

test/components/structures/auth/ForgotPassword-test.tsx

@@ -19,7 +19,6 @@ import { mocked } from "jest-mock";
 import { act, render, RenderResult, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MatrixClient, createClient } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import ForgotPassword from "../../../../src/components/structures/auth/ForgotPassword";
 import { ValidatedServerConfig } from "../../../../src/utils/ValidatedServerConfig";
@@ -103,7 +102,6 @@ describe("<ForgotPassword>", () => {
         beforeEach(() => {
             renderResult = render(
                 <ForgotPassword serverConfig={serverConfig} onComplete={onComplete} onLoginClick={onLoginClick} />,
-                { wrapper: TooltipProvider },
             );
         });
 

test/components/views/avatars/DecoratedRoomAvatar-test.tsx

@@ -19,7 +19,6 @@ import { mocked } from "jest-mock";
 import { JoinRule, MatrixClient, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
 import React from "react";
 import userEvent from "@testing-library/user-event";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { stubClient } from "../../../test-utils";
@@ -39,9 +38,7 @@ describe("DecoratedRoomAvatar", () => {
     let room: Room;
 
     function renderComponent() {
-        return render(<DecoratedRoomAvatar room={room} size="32px" />, {
+        return render(<DecoratedRoomAvatar room={room} size="32px" />);
-            wrapper: TooltipProvider,
-        });
     }
 
     beforeEach(() => {

test/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap

@@ -16,9 +16,9 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
       r
     </span>
     <div
-      aria-describedby="radix-0"
+      aria-describedby="floating-ui-2"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_globe"
-      data-state="delayed-open"
+      data-state="open"
       tabindex="0"
     />
   </div>
@@ -41,9 +41,9 @@ exports[`DecoratedRoomAvatar shows the presence indicator in a DM room that also
       r
     </span>
     <div
-      aria-describedby="radix-1"
+      aria-describedby="floating-ui-8"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_online"
-      data-state="delayed-open"
+      data-state="open"
       tabindex="0"
     />
   </div>

test/components/views/beacon/BeaconListItem-test.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 import { act, fireEvent, render } from "@testing-library/react";
 import { Beacon, RoomMember, MatrixEvent, LocationAssetType } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import BeaconListItem from "../../../../src/components/views/beacon/BeaconListItem";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
@@ -76,7 +75,6 @@ describe("<BeaconListItem />", () => {
             <MatrixClientContext.Provider value={mockClient}>
                 <BeaconListItem {...defaultProps} {...props} />
             </MatrixClientContext.Provider>,
-            { wrapper: TooltipProvider },
         );
 
     const setupRoomWithBeacons = (beaconInfoEvents: MatrixEvent[], locationEvents?: MatrixEvent[]): Beacon[] => {

test/components/views/beacon/BeaconViewDialog-test.tsx

@@ -19,7 +19,6 @@ import { act, fireEvent, render, RenderResult } from "@testing-library/react";
 import { MatrixClient, MatrixEvent, Room, RoomMember, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix";
 import * as maplibregl from "maplibre-gl";
 import { mocked } from "jest-mock";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import BeaconViewDialog from "../../../../src/components/views/beacon/BeaconViewDialog";
 import {
@@ -80,8 +79,7 @@ describe("<BeaconViewDialog />", () => {
         matrixClient: mockClient as MatrixClient,
     };
 
-    const getComponent = (props = {}): RenderResult =>
+    const getComponent = (props = {}): RenderResult => render(<BeaconViewDialog {...defaultProps} {...props} />);
-        render(<BeaconViewDialog {...defaultProps} {...props} />, { wrapper: TooltipProvider });
 
     const openSidebar = (getByTestId: RenderResult["getByTestId"]) => {
         fireEvent.click(getByTestId("beacon-view-dialog-open-sidebar"));

test/components/views/beacon/DialogSidebar-test.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React, { ComponentProps } from "react";
 import { act, fireEvent, render } from "@testing-library/react";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import DialogSidebar from "../../../../src/components/views/beacon/DialogSidebar";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
@@ -53,9 +52,7 @@ describe("<DialogSidebar />", () => {
 
     const getComponent = (props = {}) => (
         <MatrixClientContext.Provider value={client}>
-            <TooltipProvider>
+            <DialogSidebar {...defaultProps} {...props} />
-                <DialogSidebar {...defaultProps} {...props} />
-            </TooltipProvider>
         </MatrixClientContext.Provider>
     );
 

test/components/views/beacon/ShareLatestLocation-test.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 import { fireEvent, render } from "@testing-library/react";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import ShareLatestLocation from "../../../../src/components/views/beacon/ShareLatestLocation";
 import { copyPlaintext } from "../../../../src/utils/strings";
@@ -33,8 +32,7 @@ describe("<ShareLatestLocation />", () => {
             timestamp: 123,
         },
     };
-    const getComponent = (props = {}) =>
+    const getComponent = (props = {}) => render(<ShareLatestLocation {...defaultProps} {...props} />);
-        render(<ShareLatestLocation {...defaultProps} {...props} />, { wrapper: TooltipProvider });
 
     beforeEach(() => {
         jest.clearAllMocks();

test/components/views/dialogs/ServerPickerDialog-test.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import fetchMock from "fetch-mock-jest";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import ServerPickerDialog from "../../../../src/components/views/dialogs/ServerPickerDialog";
 import SdkConfig from "../../../../src/SdkConfig";
@@ -56,7 +55,7 @@ describe("<ServerPickerDialog />", () => {
             onFinished: any;
             serverConfig: ValidatedServerConfig;
         }> = {},
-    ) => render(<ServerPickerDialog {...defaultProps} {...props} />, { wrapper: TooltipProvider });
+    ) => render(<ServerPickerDialog {...defaultProps} {...props} />);
 
     beforeEach(() => {
         SdkConfig.add({

test/components/views/dialogs/ShareDialog-test.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 import { EventTimeline, MatrixEvent, Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import { render, RenderOptions } from "@testing-library/react";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import SettingsStore from "../../../../src/settings/SettingsStore";
@@ -31,11 +30,7 @@ jest.mock("../../../../src/utils/ShieldUtils");
 function getWrapper(): RenderOptions {
     return {
         wrapper: ({ children }) => (
-            <TooltipProvider>
+            <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>{children}</MatrixClientContext.Provider>
-                <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
-                    {children}
-                </MatrixClientContext.Provider>
-            </TooltipProvider>
         ),
     };
 }

test/components/views/elements/FacePile-test.tsx

@@ -14,7 +14,6 @@ limitations under the License.
 
 import { render } from "@testing-library/react";
 import React from "react";
-import { TooltipProvider } from "@vector-im/compound-web";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 
 import FacePile from "../../../../src/components/views/elements/FacePile";
@@ -26,7 +25,6 @@ describe("<FacePile />", () => {
 
         const { asFragment } = render(
             <FacePile members={[member]} size="36px" overflow={false} tooltipLabel="tooltip" />,
-            { wrapper: TooltipProvider },
         );
 
         expect(asFragment()).toMatchSnapshot();

test/components/views/elements/InfoTooltip-test.tsx

@@ -17,15 +17,12 @@ limitations under the License.
 import React from "react";
 import userEvent from "@testing-library/user-event";
 import { render, waitFor } from "@testing-library/react";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import InfoTooltip from "../../../../src/components/views/elements/InfoTooltip";
 
 describe("InfoTooltip", () => {
     it("should show tooltip on hover", async () => {
-        const { getByText, asFragment } = render(<InfoTooltip tooltip="Tooltip text">Trigger text</InfoTooltip>, {
+        const { getByText, asFragment } = render(<InfoTooltip tooltip="Tooltip text">Trigger text</InfoTooltip>);
-            wrapper: TooltipProvider,
-        });
 
         const trigger = getByText("Trigger text");
         expect(trigger).toBeVisible();

test/components/views/elements/Pill-test.tsx

@@ -19,7 +19,6 @@ import { act, render, RenderResult, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mocked, Mocked } from "jest-mock";
 import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import dis from "../../../../src/dispatcher/dispatcher";
 import { Pill, PillProps, PillType } from "../../../../src/components/views/elements/Pill";
@@ -65,7 +64,6 @@ describe("<Pill>", () => {
             <div onClick={pillParentClickHandler}>
                 <Pill {...withDefault} />
             </div>,
-            { wrapper: TooltipProvider },
         );
     };
 

test/components/views/elements/RoomFacePile-test.tsx

@@ -14,7 +14,6 @@ limitations under the License.
 
 import { render } from "@testing-library/react";
 import React from "react";
-import { TooltipProvider } from "@vector-im/compound-web";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 
 import { mkRoom, mkRoomMember, stubClient, withClientContextRenderOptions } from "../../../test-utils";
@@ -33,9 +32,7 @@ describe("<RoomFacePile />", () => {
         ]);
 
         const { asFragment } = render(
-            <TooltipProvider>
+            <RoomFacePile onlyKnownUsers={false} room={room} />,
-                <RoomFacePile onlyKnownUsers={false} room={room} />
-            </TooltipProvider>,
             withClientContextRenderOptions(MatrixClientPeg.get()!),
         );
 

test/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap

@@ -3,9 +3,9 @@
 exports[`InfoTooltip should show tooltip on hover 1`] = `
 <DocumentFragment>
   <div
-    aria-describedby="radix-0"
+    aria-describedby="floating-ui-2"
     class="mx_InfoTooltip"
-    data-state="delayed-open"
+    data-state="open"
     tabindex="0"
   >
     <span

test/components/views/messages/CallEvent-test.tsx

@@ -19,7 +19,6 @@ import { render, screen, act, cleanup, fireEvent, waitFor } from "@testing-libra
 import { mocked, Mocked } from "jest-mock";
 import { Room, RoomStateEvent, MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/matrix";
 import { ClientWidgetApi, Widget } from "matrix-widget-api";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import type { RoomMember } from "matrix-js-sdk/src/matrix";
 import {
@@ -103,7 +102,7 @@ describe("CallEvent", () => {
     });
 
     const renderEvent = () => {
-        render(<CallEvent mxEvent={call.event} />, { wrapper: TooltipProvider });
+        render(<CallEvent mxEvent={call.event} />);
     };
 
     it("shows a message and duration if the call was ended", () => {

test/components/views/messages/MStickerBody-test.tsx

@@ -19,7 +19,6 @@ import { render, screen } from "@testing-library/react";
 import { EventType, getHttpUriForMxc, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import fetchMock from "fetch-mock-jest";
 import userEvent from "@testing-library/user-event";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 import {
@@ -86,7 +85,7 @@ describe("<MStickerBody/>", () => {
     it("should show a tooltip on hover", async () => {
         fetchMock.getOnce(url, { status: 200 });
 
-        render(<MStickerBody {...props} mxEvent={mediaEvent} />, { wrapper: TooltipProvider });
+        render(<MStickerBody {...props} mxEvent={mediaEvent} />);
 
         expect(screen.queryByRole("tooltip")).toBeNull();
         await userEvent.hover(screen.getByRole("img"));

test/components/views/messages/MessageTimestamp-test.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import MessageTimestamp from "../../../../src/components/views/messages/MessageTimestamp";
 
@@ -31,7 +30,7 @@ describe("MessageTimestamp", () => {
     const DAY_MS = HOUR_MS * 24;
 
     it("should render HH:MM", () => {
-        const { asFragment } = render(<MessageTimestamp ts={nowDate.getTime()} />, { wrapper: TooltipProvider });
+        const { asFragment } = render(<MessageTimestamp ts={nowDate.getTime()} />);
         expect(asFragment()).toMatchInlineSnapshot(`
             <DocumentFragment>
               <span
@@ -47,7 +46,7 @@ describe("MessageTimestamp", () => {
     });
 
     it("should show full date & time on hover", async () => {
-        const { container } = render(<MessageTimestamp ts={nowDate.getTime()} />, { wrapper: TooltipProvider });
+        const { container } = render(<MessageTimestamp ts={nowDate.getTime()} />);
         await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
         expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(`"Fri, Dec 17, 2021, 08:09:00"`);
     });
@@ -55,7 +54,6 @@ describe("MessageTimestamp", () => {
     it("should show sent & received time on hover if passed", async () => {
         const { container } = render(
             <MessageTimestamp ts={nowDate.getTime()} receivedTs={nowDate.getTime() + DAY_MS} />,
-            { wrapper: TooltipProvider },
         );
         await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
         expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(

test/components/views/polls/pollHistory/PollHistory-test.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 import { act, fireEvent, render } from "@testing-library/react";
 import { Filter, EventTimeline, Room, MatrixEvent, M_POLL_START } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { PollHistory } from "../../../../../src/components/views/polls/pollHistory/PollHistory";
 import {
@@ -68,9 +67,7 @@ describe("<PollHistory />", () => {
     const getComponent = () =>
         render(<PollHistory {...defaultProps} />, {
             wrapper: ({ children }) => (
-                <MatrixClientContext.Provider value={mockClient}>
+                <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
-                    <TooltipProvider>{children}</TooltipProvider>
-                </MatrixClientContext.Provider>
             ),
         });
 

test/components/views/polls/pollHistory/PollListItem-test.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 import { fireEvent, render } from "@testing-library/react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { PollListItem } from "../../../../../src/components/views/polls/pollHistory/PollListItem";
 import { makePollStartEvent, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../../../../test-utils";
@@ -26,8 +25,7 @@ describe("<PollListItem />", () => {
     const event = makePollStartEvent("Question?", "@me:domain.org");
     event.getContent().origin;
     const defaultProps = { event, onClick: jest.fn() };
-    const getComponent = (props = {}) =>
+    const getComponent = (props = {}) => render(<PollListItem {...defaultProps} {...props} />);
-        render(<PollListItem {...defaultProps} {...props} />, { wrapper: TooltipProvider });
 
     beforeAll(() => {
         // mock default locale to en-GB and set timezone

test/components/views/polls/pollHistory/PollListItemEnded-test.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 import { render } from "@testing-library/react";
 import { MatrixEvent, Poll, Room, M_TEXT } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { PollListItemEnded } from "../../../../../src/components/views/polls/pollHistory/PollListItemEnded";
 import {
@@ -61,7 +60,7 @@ describe("<PollListItemEnded />", () => {
     const pollEndEvent = makePollEndEvent(pollId, roomId, userId, timestamp + 60000);
 
     const getComponent = (props: { event: MatrixEvent; poll: Poll }) =>
-        render(<PollListItemEnded {...props} onClick={jest.fn()} />, { wrapper: TooltipProvider });
+        render(<PollListItemEnded {...props} onClick={jest.fn()} />);
 
     beforeAll(() => {
         // mock default locale to en-GB and set timezone

test/components/views/right_panel/RoomSummaryCard-test.tsx

@@ -19,7 +19,6 @@ import { render, fireEvent, screen } from "@testing-library/react";
 import { EventType, MatrixEvent, Room, MatrixClient, JoinRule } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { mocked, MockedObject } from "jest-mock";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import RoomSummaryCard from "../../../../src/components/views/right_panel/RoomSummaryCard";
@@ -57,9 +56,7 @@ describe("<RoomSummaryCard />", () => {
 
         return render(<RoomSummaryCard {...defaultProps} {...props} />, {
             wrapper: ({ children }) => (
-                <MatrixClientContext.Provider value={mockClient}>
+                <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
-                    <TooltipProvider>{children}</TooltipProvider>
-                </MatrixClientContext.Provider>
             ),
         });
     };

test/components/views/right_panel/UserInfo-test.tsx

@@ -38,7 +38,6 @@ import {
     VerificationPhase as Phase,
     VerificationRequestEvent,
 } from "matrix-js-sdk/src/crypto-api";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import UserInfo, {
     BanToggleButton,
@@ -206,11 +205,7 @@ describe("<UserInfo />", () => {
 
     const renderComponent = (props = {}) => {
         const Wrapper = (wrapperProps = {}) => {
-            return (
+            return <MatrixClientContext.Provider value={mockClient} {...wrapperProps} />;
-                <TooltipProvider>
-                    <MatrixClientContext.Provider value={mockClient} {...wrapperProps} />
-                </TooltipProvider>
-            );
         };
 
         return render(<UserInfo {...defaultProps} {...props} />, {
@@ -631,11 +626,7 @@ describe("<UserInfoHeader />", () => {
 
     const renderComponent = (props = {}) => {
         const Wrapper = (wrapperProps = {}) => {
-            return (
+            return <MatrixClientContext.Provider value={mockClient} {...wrapperProps} />;
-                <TooltipProvider>
-                    <MatrixClientContext.Provider value={mockClient} {...wrapperProps} />
-                </TooltipProvider>
-            );
         };
 
         return render(<UserInfoHeader {...defaultProps} {...props} />, {

test/components/views/rooms/EventTile-test.tsx

@@ -29,7 +29,6 @@ import {
     TweakName,
 } from "matrix-js-sdk/src/matrix";
 import { EventEncryptionInfo, EventShieldColour, EventShieldReason } from "matrix-js-sdk/src/crypto-api";
-import { TooltipProvider } from "@vector-im/compound-web";
 import { mkEncryptedMatrixEvent } from "matrix-js-sdk/src/testing";
 
 import EventTile, { EventTileProps } from "../../../../src/components/views/rooms/EventTile";
@@ -59,13 +58,11 @@ describe("EventTile", () => {
         return (
             <MatrixClientContext.Provider value={client}>
                 <RoomContext.Provider value={props.roomContext}>
-                    <TooltipProvider>
+                    <EventTile
-                        <EventTile
+                        mxEvent={mxEvent}
-                            mxEvent={mxEvent}
+                        replacingEventId={mxEvent.replacingEventId()}
-                            replacingEventId={mxEvent.replacingEventId()}
+                        {...(props.eventTilePropertyOverrides ?? {})}
-                            {...(props.eventTilePropertyOverrides ?? {})}
+                    />
-                        />
-                    </TooltipProvider>
                 </RoomContext.Provider>
             </MatrixClientContext.Provider>
         );

test/components/views/rooms/LegacyRoomHeader-test.tsx

@@ -32,7 +32,6 @@ import { ClientWidgetApi, Widget } from "matrix-widget-api";
 import EventEmitter from "events";
 import { setupJestCanvasMock } from "jest-canvas-mock";
 import { ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
-import { TooltipProvider } from "@vector-im/compound-web";
 // eslint-disable-next-line no-restricted-imports
 import { MatrixRTCSessionManagerEvents } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSessionManager";
 // eslint-disable-next-line no-restricted-imports
@@ -226,7 +225,6 @@ describe("LegacyRoomHeader", () => {
                     {...props}
                 />
             </RoomContext.Provider>,
-            { wrapper: TooltipProvider },
         );
     };
 
@@ -870,7 +868,6 @@ function mountHeader(room: Room, propsOverride = {}, roomContext?: Partial<IRoom
         <RoomContext.Provider value={{ ...roomContext, room } as IRoomState}>
             <RoomHeader {...props} />
         </RoomContext.Provider>,
-        { wrapper: TooltipProvider },
     );
 }
 

test/components/views/rooms/MemberList-test.tsx

@@ -21,7 +21,6 @@ import { Room, MatrixClient, RoomState, RoomMember, User, MatrixEvent } from "ma
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { compare } from "matrix-js-sdk/src/utils";
 import { mocked, MockedObject } from "jest-mock";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import * as TestUtils from "../../../test-utils";
@@ -231,7 +230,6 @@ describe("MemberList", () => {
                     ref={gatherWrappedRef}
                 />
             </SDKContext.Provider>,
-            { wrapper: TooltipProvider },
         );
     }
 
@@ -383,7 +381,6 @@ describe("MemberList", () => {
                             roomId={room.roomId}
                         />
                     </SDKContext.Provider>,
-                    { wrapper: TooltipProvider },
                 );
             };
 

test/components/views/rooms/MemberTile-test.tsx

@@ -21,7 +21,6 @@ import { MatrixClient, RoomMember, Device } from "matrix-js-sdk/src/matrix";
 import { UserVerificationStatus, DeviceVerificationStatus } from "matrix-js-sdk/src/crypto-api";
 import { mocked } from "jest-mock";
 import userEvent from "@testing-library/user-event";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import * as TestUtils from "../../../test-utils";
 import MemberTile from "../../../../src/components/views/rooms/MemberTile";
@@ -37,7 +36,7 @@ describe("MemberTile", () => {
     });
 
     it("should not display an E2EIcon when the e2E status = normal", () => {
-        const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider });
+        const { container } = render(<MemberTile member={member} />);
 
         expect(container).toMatchSnapshot();
     });
@@ -48,7 +47,7 @@ describe("MemberTile", () => {
             wasCrossSigningVerified: jest.fn().mockReturnValue(true),
         } as unknown as UserVerificationStatus);
 
-        const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider });
+        const { container } = render(<MemberTile member={member} />);
 
         expect(container).toMatchSnapshot();
         await waitFor(async () => {
@@ -72,7 +71,7 @@ describe("MemberTile", () => {
             crossSigningVerified: true,
         } as DeviceVerificationStatus);
 
-        const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider });
+        const { container } = render(<MemberTile member={member} />);
 
         expect(container).toMatchSnapshot();
         await waitFor(async () => {

test/components/views/rooms/MessageComposer-test.tsx

@@ -18,7 +18,6 @@ import * as React from "react";
 import { EventType, MatrixEvent, Room, RoomMember, THREAD_RELATION_TYPE } from "matrix-js-sdk/src/matrix";
 import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import {
     clearAllModals,
@@ -514,7 +513,6 @@ function wrapAndRender(
                     <MessageComposer {...defaultProps} {...props} />
                 </RoomContext.Provider>
             </MatrixClientContext.Provider>,
-            { wrapper: TooltipProvider },
         ),
         roomContext,
     };

test/components/views/rooms/RoomHeader-test.tsx

@@ -40,7 +40,6 @@ import {
     waitFor,
 } from "@testing-library/react";
 import { ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { filterConsole, mkEvent, stubClient } from "../../../test-utils";
 import RoomHeader from "../../../../src/components/views/rooms/RoomHeader";
@@ -67,11 +66,7 @@ jest.mock("../../../../src/utils/ShieldUtils");
 function getWrapper(): RenderOptions {
     return {
         wrapper: ({ children }) => (
-            <TooltipProvider>
+            <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>{children}</MatrixClientContext.Provider>
-                <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
-                    {children}
-                </MatrixClientContext.Provider>
-            </TooltipProvider>
         ),
     };
 }

test/components/views/rooms/RoomHeader/CallGuestLinkButton-test.tsx

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React from "react";
-import { TooltipProvider } from "@vector-im/compound-web";
 import { fireEvent, getByLabelText, getByText, render, screen, waitFor } from "@testing-library/react";
 import { EventTimeline, JoinRule, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
@@ -75,11 +74,7 @@ describe("<CallGuestLinkButton />", () => {
 
     const getComponent = (room: Room) =>
         render(<CallGuestLinkButton room={room} />, {
-            wrapper: ({ children }) => (
+            wrapper: ({ children }) => <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider>,
-                <SDKContext.Provider value={sdkContext}>
-                    <TooltipProvider>{children}</TooltipProvider>
-                </SDKContext.Provider>
-            ),
         });
 
     const oldGet = SdkConfig.get;
@@ -225,11 +220,7 @@ describe("<CallGuestLinkButton />", () => {
 
         const getComponent = (room: Room, canInvite: boolean = true) =>
             render(<JoinRuleDialog room={room} canInvite={canInvite} onFinished={onFinished} />, {
-                wrapper: ({ children }) => (
+                wrapper: ({ children }) => <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider>,
-                    <SDKContext.Provider value={sdkContext}>
-                        <TooltipProvider>{children}</TooltipProvider>
-                    </SDKContext.Provider>
-                ),
             });
 
         beforeEach(() => {

test/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx

@@ -18,7 +18,6 @@ import React from "react";
 import { MockedObject } from "jest-mock";
 import { Room } from "matrix-js-sdk/src/matrix";
 import { fireEvent, render, screen } from "@testing-library/react";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { VideoRoomChatButton } from "../../../../../src/components/views/rooms/RoomHeader/VideoRoomChatButton";
 import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
@@ -57,11 +56,7 @@ describe("<VideoRoomChatButton />", () => {
 
     const getComponent = (room: Room) =>
         render(<VideoRoomChatButton room={room} />, {
-            wrapper: ({ children }) => (
+            wrapper: ({ children }) => <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider>,
-                <SDKContext.Provider value={sdkContext}>
-                    <TooltipProvider>{children}</TooltipProvider>
-                </SDKContext.Provider>
-            ),
         });
 
     beforeEach(() => {

test/components/views/rooms/RoomList-test.tsx

@@ -20,7 +20,6 @@ import { cleanup, queryByRole, render, screen, within } from "@testing-library/r
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
 import { Room } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import RoomList from "../../../../src/components/views/rooms/RoomList";
 import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
@@ -56,18 +55,16 @@ describe("RoomList", () => {
 
     function getComponent(props: Partial<ComponentProps<typeof RoomList>> = {}): JSX.Element {
         return (
-            <TooltipProvider>
+            <RoomList
-                <RoomList
+                onKeyDown={jest.fn()}
-                    onKeyDown={jest.fn()}
+                onFocus={jest.fn()}
-                    onFocus={jest.fn()}
+                onBlur={jest.fn()}
-                    onBlur={jest.fn()}
+                onResize={jest.fn()}
-                    onResize={jest.fn()}
+                resizeNotifier={new ResizeNotifier()}
-                    resizeNotifier={new ResizeNotifier()}
+                isMinimized={false}
-                    isMinimized={false}
+                activeSpace={MetaSpace.Home}
-                    activeSpace={MetaSpace.Home}
+                {...props}
-                    {...props}
+            />
-                />
-            </TooltipProvider>
         );
     }
 

test/components/views/settings/devices/FilteredDeviceList-test.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React, { ComponentProps } from "react";
 import { act, fireEvent, render } from "@testing-library/react";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { FilteredDeviceList } from "../../../../../src/components/views/settings/devices/FilteredDeviceList";
 import { DeviceSecurityVariation } from "../../../../../src/components/views/settings/devices/types";
@@ -82,11 +81,7 @@ describe("<FilteredDeviceList />", () => {
         supportsMSC3881: true,
     };
 
-    const getComponent = (props = {}) => (
+    const getComponent = (props = {}) => <FilteredDeviceList {...defaultProps} {...props} />;
-        <TooltipProvider>
-            <FilteredDeviceList {...defaultProps} {...props} />
-        </TooltipProvider>
-    );
 
     afterAll(() => {
         jest.spyOn(global.Date, "now").mockRestore();

test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import { fireEvent, render } from "@testing-library/react";
 import React from "react";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import FilteredDeviceListHeader from "../../../../../src/components/views/settings/devices/FilteredDeviceListHeader";
 
@@ -28,11 +27,7 @@ describe("<FilteredDeviceListHeader />", () => {
         children: <div>test</div>,
         ["data-testid"]: "test123",
     };
-    const getComponent = (props = {}) => (
+    const getComponent = (props = {}) => <FilteredDeviceListHeader {...defaultProps} {...props} />;
-        <TooltipProvider>
-            <FilteredDeviceListHeader {...defaultProps} {...props} />
-        </TooltipProvider>
-    );
 
     it("renders correctly when no devices are selected", () => {
         const { container } = render(getComponent());

test/components/views/settings/tabs/user/SessionManagerTab-test.tsx

@@ -36,7 +36,6 @@ import {
     MatrixClient,
 } from "matrix-js-sdk/src/matrix";
 import { mocked, MockedObject } from "jest-mock";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import {
     clearAllModals,
@@ -129,11 +128,9 @@ describe("<SessionManagerTab />", () => {
 
     const defaultProps = {};
     const getComponent = (props = {}): React.ReactElement => (
-        <TooltipProvider>
+        <SDKContext.Provider value={sdkContext}>
-            <SDKContext.Provider value={sdkContext}>
+            <SessionManagerTab {...defaultProps} {...props} />
-                <SessionManagerTab {...defaultProps} {...props} />
+        </SDKContext.Provider>
-            </SDKContext.Provider>
-        </TooltipProvider>
     );
 
     const toggleDeviceDetails = (

test/components/views/spaces/ThreadsActivityCentre-test.tsx

@@ -20,7 +20,6 @@ import React, { ComponentProps } from "react";
 import { getByText, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { NotificationCountType, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import { ThreadsActivityCentre } from "../../../../src/components/views/spaces/threads-activity-centre";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@@ -49,7 +48,6 @@ describe("ThreadsActivityCentre", () => {
             <MatrixClientContext.Provider value={cli}>
                 <ThreadsActivityCentre {...props} />
             </MatrixClientContext.Provider>,
-            { wrapper: TooltipProvider },
         );
     };
 
@@ -251,7 +249,6 @@ describe("ThreadsActivityCentre", () => {
                     <ThreadsActivityCentre />
                 </MatrixClientContext.Provider>
             </div>,
-            { wrapper: TooltipProvider },
         );
         await userEvent.click(getTACButton());
 

test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] = `
 <div
-  aria-labelledby="radix-21"
+  aria-labelledby="radix-14"
   aria-orientation="vertical"
   class="_menu_1x5h1_17"
   data-align="end"
@@ -11,7 +11,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
   data-side="right"
   data-state="open"
   dir="ltr"
-  id="radix-22"
+  id="radix-15"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
@@ -127,7 +127,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
 
 exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 <div
-  aria-labelledby="radix-29"
+  aria-labelledby="radix-20"
   aria-orientation="vertical"
   class="_menu_1x5h1_17"
   data-align="end"
@@ -136,7 +136,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
   data-side="right"
   data-state="open"
   dir="ltr"
-  id="radix-30"
+  id="radix-21"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
@@ -161,7 +161,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 
 exports[`ThreadsActivityCentre should order the room with the same notification level by most recent 1`] = `
 <div
-  aria-labelledby="radix-32"
+  aria-labelledby="radix-22"
   aria-orientation="vertical"
   class="_menu_1x5h1_17"
   data-align="end"
@@ -170,7 +170,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
   data-side="right"
   data-state="open"
   dir="ltr"
-  id="radix-33"
+  id="radix-23"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
@@ -341,12 +341,12 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
       class="mx_ThreadsActivityCentre_container"
     >
       <button
-        aria-controls="floating-ui-3"
+        aria-controls="floating-ui-6"
         aria-expanded="true"
         aria-haspopup="dialog"
         aria-label="Threads"
         class="_icon-button_16nk7_17 mx_ThreadsActivityCentreButton"
-        data-state="open"
+        data-state="closed"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -368,7 +368,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
         tabindex="0"
       />
       <span
-        aria-owns="undefined"
+        aria-owns="floating-ui-12"
         style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
       />
       <span
@@ -382,7 +382,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
   </div>
   <div
     data-floating-ui-portal=""
-    id="undefined"
+    id="floating-ui-12"
   >
     <span
       data-floating-ui-focus-guard=""
@@ -393,10 +393,10 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
       tabindex="0"
     />
     <div
-      aria-describedby="floating-ui-2"
+      aria-describedby="floating-ui-5"
-      aria-labelledby="floating-ui-1"
+      aria-labelledby="floating-ui-4"
       class="_content_1oa1y_17"
-      id="floating-ui-3"
+      id="floating-ui-6"
       role="dialog"
       style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
       tabindex="-1"
@@ -414,7 +414,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
           stroke="none"
         />
         <clippath
-          id="floating-ui-5"
+          id="floating-ui-13"
         >
           <rect
             height="20"
@@ -426,13 +426,13 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
       </svg>
       <h3
         class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 _header_1oa1y_46"
-        id="floating-ui-1"
+        id="floating-ui-4"
       >
         Threads Activity Centre
       </h3>
       <span
         class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _description_1oa1y_52"
-        id="floating-ui-2"
+        id="floating-ui-5"
       >
         Threads notifications have moved, find them here from now on.
       </span>

test/components/views/voip/CallView-test.tsx

@@ -20,7 +20,6 @@ import { render, screen, act, fireEvent, waitFor, cleanup } from "@testing-libra
 import { mocked, Mocked } from "jest-mock";
 import { MatrixClient, PendingEventOrdering, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { Widget } from "matrix-widget-api";
-import { TooltipProvider } from "@vector-im/compound-web";
 
 import type { RoomMember } from "matrix-js-sdk/src/matrix";
 import type { ClientWidgetApi } from "matrix-widget-api";
@@ -74,9 +73,7 @@ describe("CallView", () => {
     });
 
     const renderView = async (skipLobby = false): Promise<void> => {
-        render(<CallView room={room} resizing={false} waitForCall={false} skipLobby={skipLobby} />, {
+        render(<CallView room={room} resizing={false} waitForCall={false} skipLobby={skipLobby} />);
-            wrapper: TooltipProvider,
-        });
         await act(() => Promise.resolve()); // Let effects settle
     };
 

yarn.lock

@@ -3060,10 +3060,10 @@
   dependencies:
     svg2vectordrawable "^2.9.1"
 
-"@vector-im/compound-web@^3.3.1":
+"@vector-im/compound-web@^4.0.2":
-  version "3.3.1"
+  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-3.3.1.tgz#f5d69255fa62472626e0ed71b7176b09f21cbcaf"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.0.2.tgz#cd89ca076b9b0528718e45110a4c8126e7556c63"
-  integrity sha512-V9CQfaMyKdsWxC1D4Wz08Xh0ge3SnaOBf5SSIp1+uwoJTPyfEFHKgqbZl536SHBvVBc9M9IYg+3+lPB8xkFRFA==
+  integrity sha512-MBqmSbtcWC6KJjuTWPZ6FYc83YrUJ9dOageUdbayjhVGZ/de/a+nl/vPIAX+5ic2QWUN7nn9hujfzQF69mbIeg==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@floating-ui/react-dom" "^2.0.8"
@@ -8652,7 +8652,16 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8746,7 +8755,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9539,7 +9555,7 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -9557,6 +9573,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"