Update dependency @vector-im/compound-web to v2 (#12133)

* Update dependency @vector-im/compound-web to v2 * Update Tooltip props Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Include TooltipProvider in MatrixChat Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix pillify & tooltipify Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests to use TooltipProvider where necessary Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tooltips in Modals, ContextMenus, PersistedElements, Spoiler, HtmlExport Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tooltips in HTMLExport Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Don't pass mountAsChild to DOM Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * prettier Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Stabilise test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2024-01-11 19:56:36 +00:00 · 2024-01-11 19:56:36 +00:00 · 56d8ef3640
commit 56d8ef3640
parent 54b71140b8
51 changed files with 293 additions and 221 deletions
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@ -20,6 +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 { TooltipProvider } from "@vector-im/compound-web";

 import dis from "./dispatcher/dispatcher";
 import AsyncWrapper from "./AsyncWrapper";
@ -373,14 +374,16 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
            const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);

            const staticDialog = (
-                <div className={classes}>
-                    <div className="mx_Dialog">{this.staticModal.elem}</div>
-                    <div
-                        data-testid="dialog-background"
-                        className="mx_Dialog_background mx_Dialog_staticBackground"
-                        onClick={this.onBackgroundClick}
-                    />
-                </div>
+                <TooltipProvider>
+                    <div className={classes}>
+                        <div className="mx_Dialog">{this.staticModal.elem}</div>
+                        <div
+                            data-testid="dialog-background"
+                            className="mx_Dialog_background mx_Dialog_staticBackground"
+                            onClick={this.onBackgroundClick}
+                        />
+                    </div>
+                </TooltipProvider>
            );

            ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
@ -396,14 +399,16 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
            });

            const dialog = (
-                <div className={classes}>
-                    <div className="mx_Dialog">{modal.elem}</div>
-                    <div
-                        data-testid="dialog-background"
-                        className="mx_Dialog_background"
-                        onClick={this.onBackgroundClick}
-                    />
-                </div>
+                <TooltipProvider>
+                    <div className={classes}>
+                        <div className="mx_Dialog">{modal.elem}</div>
+                        <div
+                            data-testid="dialog-background"
+                            className="mx_Dialog_background"
+                            onClick={this.onBackgroundClick}
+                        />
+                    </div>
+                </TooltipProvider>
            );

            setImmediate(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()));
--- a/src/components/structures/ContextMenu.tsx
+++ b/src/components/structures/ContextMenu.tsx
@ -20,6 +20,7 @@ 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";
@ -266,6 +267,7 @@ export default class ContextMenu extends React.PureComponent<React.PropsWithChil
            wrapperClassName,
            chevronFace: propsChevronFace,
            chevronOffset: propsChevronOffset,
+            mountAsChild,
            ...props
        } = this.props;

@ -628,15 +630,17 @@ export function createMenu(
    };

    const menu = (
-        <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>
+        </TooltipProvider>
    );

    ReactDOM.render(menu, getOrCreateContainer());
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@ -34,6 +34,7 @@ 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";
@ -2189,7 +2190,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {

        return (
            <ErrorBoundary>
-                <SDKContext.Provider value={this.stores}>{view}</SDKContext.Provider>
+                <SDKContext.Provider value={this.stores}>
+                    <TooltipProvider>{view}</TooltipProvider>
+                </SDKContext.Provider>
            </ErrorBoundary>
        );
    }
--- a/src/components/views/elements/FacePile.tsx
+++ b/src/components/views/elements/FacePile.tsx
@ -46,7 +46,7 @@ const FacePile: FC<IProps> = ({
        tooltipLabel
            ? (m) => <MemberAvatar key={m.userId} member={m} size={size} hideTitle />
            : (m) => (
-                  <Tooltip key={m.userId} label={m.name} shortcut={tooltipShortcut}>
+                  <Tooltip key={m.userId} label={m.name} caption={tooltipShortcut}>
                      <MemberAvatar
                          member={m}
                          size={size}
@ -72,7 +72,7 @@ const FacePile: FC<IProps> = ({
    );

    return tooltipLabel ? (
-        <Tooltip label={tooltipLabel} shortcut={tooltipShortcut}>
+        <Tooltip label={tooltipLabel} caption={tooltipShortcut}>
            {content}
        </Tooltip>
    ) : (
--- a/src/components/views/elements/PersistedElement.tsx
+++ b/src/components/views/elements/PersistedElement.tsx
@ -17,6 +17,7 @@ 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";
@ -176,9 +177,11 @@ export default class PersistedElement extends React.Component<IProps> {
    private renderApp(): void {
        const content = (
            <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
-                <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>
+                </TooltipProvider>
            </MatrixClientContext.Provider>
        );

--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@ -18,6 +18,7 @@ import React, { createRef, SyntheticEvent, MouseEvent } from "react";
 import ReactDOM from "react-dom";
 import highlight from "highlight.js";
 import { MsgType } from "matrix-js-sdk/src/matrix";
+import { TooltipProvider } from "@vector-im/compound-web";

 import * as HtmlUtils from "../../../HtmlUtils";
 import { formatDate } from "../../../DateUtils";
@ -347,7 +348,11 @@ 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 = <Spoiler reason={reason} contentHtml={node.outerHTML} />;
+                const spoiler = (
+                    <TooltipProvider>
+                        <Spoiler reason={reason} contentHtml={node.outerHTML} />
+                    </TooltipProvider>
+                );

                ReactDOM.render(spoiler, spoilerContainer);
                node.parentNode?.replaceChild(spoilerContainer, node);
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@ -20,6 +20,7 @@ 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";
@ -283,25 +284,27 @@ export default class HTMLExporter extends Exporter {
        return (
            <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
                <MatrixClientContext.Provider value={this.room.client}>
-                    <EventTile
-                        mxEvent={mxEv}
-                        continuation={continuation}
-                        isRedacted={mxEv.isRedacted()}
-                        replacingEventId={mxEv.replacingEventId()}
-                        forExport={true}
-                        alwaysShowTimestamps={true}
-                        showUrlPreview={false}
-                        checkUnmounting={() => false}
-                        isTwelveHour={false}
-                        last={false}
-                        lastInSection={false}
-                        permalinkCreator={this.permalinkCreator}
-                        lastSuccessful={false}
-                        isSelectedEvent={false}
-                        showReactions={false}
-                        layout={Layout.Group}
-                        showReadReceipts={false}
-                    />
+                    <TooltipProvider>
+                        <EventTile
+                            mxEvent={mxEv}
+                            continuation={continuation}
+                            isRedacted={mxEv.isRedacted()}
+                            replacingEventId={mxEv.replacingEventId()}
+                            forExport={true}
+                            alwaysShowTimestamps={true}
+                            showUrlPreview={false}
+                            checkUnmounting={() => false}
+                            isTwelveHour={false}
+                            last={false}
+                            lastInSection={false}
+                            permalinkCreator={this.permalinkCreator}
+                            lastSuccessful={false}
+                            isSelectedEvent={false}
+                            showReactions={false}
+                            layout={Layout.Group}
+                            showReadReceipts={false}
+                        />
+                    </TooltipProvider>
                </MatrixClientContext.Provider>
            </div>
        );
--- a/src/utils/pillify.tsx
+++ b/src/utils/pillify.tsx
@ -18,6 +18,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 import { MatrixEvent, MatrixClient } from "matrix-js-sdk/src/matrix";
+import { TooltipProvider } from "@vector-im/compound-web";

 import SettingsStore from "../settings/SettingsStore";
 import { Pill, PillType, pillRoomNotifLen, pillRoomNotifPos } from "../components/views/elements/Pill";
@ -83,7 +84,9 @@ export function pillifyLinks(
                const pillContainer = document.createElement("span");

                const pill = (
-                    <Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
+                    <TooltipProvider>
+                        <Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
+                    </TooltipProvider>
                );

                ReactDOM.render(pill, pillContainer);
@ -136,12 +139,14 @@ export function pillifyLinks(

                        const pillContainer = document.createElement("span");
                        const pill = (
-                            <Pill
-                                type={PillType.AtRoomMention}
-                                inMessage={true}
-                                room={room}
-                                shouldShowPillAvatar={shouldShowPillAvatar}
-                            />
+                            <TooltipProvider>
+                                <Pill
+                                    type={PillType.AtRoomMention}
+                                    inMessage={true}
+                                    room={room}
+                                    shouldShowPillAvatar={shouldShowPillAvatar}
+                                />
+                            </TooltipProvider>
                        );

                        ReactDOM.render(pill, pillContainer);
--- a/src/utils/tooltipify.tsx
+++ b/src/utils/tooltipify.tsx
@ -16,6 +16,7 @@ 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";
@ -60,9 +61,11 @@ 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 = (
-                <LinkWithTooltip tooltip={href}>
-                    <span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
-                </LinkWithTooltip>
+                <TooltipProvider>
+                    <LinkWithTooltip tooltip={href}>
+                        <span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
+                    </LinkWithTooltip>
+                </TooltipProvider>
            );

            ReactDOM.render(tooltip, node);