From a2243e99844360e05a04b3e995dab2543df8f60c Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 10 Jan 2024 14:35:05 +0000
Subject: [PATCH 1/3] Update dependency @vector-im/compound-web to v2

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index c09cdc3e..7c2509ac 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "@types/lodash": "^4.14.199",
     "@use-gesture/react": "^10.2.11",
     "@vector-im/compound-design-tokens": "^0.1.0",
-    "@vector-im/compound-web": "^1.0.0",
+    "@vector-im/compound-web": "^2.0.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "buffer": "^6.0.3",
diff --git a/yarn.lock b/yarn.lock
index 5125d0e8..1ecaa02a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3816,10 +3816,10 @@
   dependencies:
     svg2vectordrawable "^2.9.1"
 
-"@vector-im/compound-web@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-1.0.0.tgz#cee4a1c1d7df50951ebb1c167bfab26311b68d5d"
-  integrity sha512-TwohQjgQilndkg+PTfRH8s98onHOj9MdmrLEObozN3oLZ0Awx0LsyQf/+tcm2ZwpCotWuP9DEzuRXOQgSU4OLg==
+"@vector-im/compound-web@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-2.0.0.tgz#9ffc621f32be11acabe74bb3ff59cc4d8bc845ac"
+  integrity sha512-vEhGayoBSq4WLf86VmFoX9h0KIxaAjlG+kmcJLWitsqnPEDOG0XPhScYqzEshFqdJFLWX6gBOnXYLeq065t57w==
   dependencies:
     "@radix-ui/react-context-menu" "^2.1.5"
     "@radix-ui/react-dropdown-menu" "^2.0.6"

From d3825648f20cea99cf6efcd836a43de830cb8e8a Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Wed, 10 Jan 2024 09:41:43 -0500
Subject: [PATCH 2/3] Add mandatory TooltipProvider

---
 src/App.tsx | 61 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4d6fa6a6..f3482252 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,6 +24,7 @@ import {
 import * as Sentry from "@sentry/react";
 import { OverlayProvider } from "@react-aria/overlays";
 import { History } from "history";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import { HomePage } from "./home/HomePage";
 import { LoginPage } from "./auth/LoginPage";
@@ -77,35 +78,37 @@ export const App: FC<AppProps> = ({ history }) => {
     // @ts-ignore
     <Router history={history}>
       <BackgroundProvider>
-        {loaded ? (
-          <Suspense fallback={null}>
-            <ClientProvider>
-              <MediaDevicesProvider>
-                <Sentry.ErrorBoundary fallback={errorPage}>
-                  <OverlayProvider>
-                    <DisconnectedBanner />
-                    <Switch>
-                      <SentryRoute exact path="/">
-                        <HomePage />
-                      </SentryRoute>
-                      <SentryRoute exact path="/login">
-                        <LoginPage />
-                      </SentryRoute>
-                      <SentryRoute exact path="/register">
-                        <RegisterPage />
-                      </SentryRoute>
-                      <SentryRoute path="*">
-                        <RoomPage />
-                      </SentryRoute>
-                    </Switch>
-                  </OverlayProvider>
-                </Sentry.ErrorBoundary>
-              </MediaDevicesProvider>
-            </ClientProvider>
-          </Suspense>
-        ) : (
-          <LoadingView />
-        )}
+        <TooltipProvider>
+          {loaded ? (
+            <Suspense fallback={null}>
+              <ClientProvider>
+                <MediaDevicesProvider>
+                  <Sentry.ErrorBoundary fallback={errorPage}>
+                    <OverlayProvider>
+                      <DisconnectedBanner />
+                      <Switch>
+                        <SentryRoute exact path="/">
+                          <HomePage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/login">
+                          <LoginPage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/register">
+                          <RegisterPage />
+                        </SentryRoute>
+                        <SentryRoute path="*">
+                          <RoomPage />
+                        </SentryRoute>
+                      </Switch>
+                    </OverlayProvider>
+                  </Sentry.ErrorBoundary>
+                </MediaDevicesProvider>
+              </ClientProvider>
+            </Suspense>
+          ) : (
+            <LoadingView />
+          )}
+        </TooltipProvider>
       </BackgroundProvider>
     </Router>
   );

From d4780b2d63d48bfc677e63e0545fcbe93137ec24 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Wed, 10 Jan 2024 10:46:13 -0500
Subject: [PATCH 3/3] Use the new isTriggerInteractive tooltip prop

---
 src/room/EncryptionLock.module.css  |  1 +
 src/room/EncryptionLock.tsx         |  8 +-------
 src/video-grid/VideoTile.module.css |  7 +++++--
 src/video-grid/VideoTile.tsx        | 14 ++++++--------
 4 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/room/EncryptionLock.module.css b/src/room/EncryptionLock.module.css
index 7329c2b4..abdff443 100644
--- a/src/room/EncryptionLock.module.css
+++ b/src/room/EncryptionLock.module.css
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .lock {
+  display: block;
   padding: var(--cpd-space-1x);
   border-radius: var(--cpd-radius-pill-effect);
 }
diff --git a/src/room/EncryptionLock.tsx b/src/room/EncryptionLock.tsx
index df0bc53c..f7fcda31 100644
--- a/src/room/EncryptionLock.tsx
+++ b/src/room/EncryptionLock.tsx
@@ -32,19 +32,13 @@ export const EncryptionLock: FC<Props> = ({ encrypted }) => {
   const label = encrypted ? t("common.encrypted") : t("common.unencrypted");
 
   return (
-    <Tooltip label={label} side="right">
+    <Tooltip label={label} side="right" isTriggerInteractive={false}>
       <Icon
         width={16}
         height={16}
         className={styles.lock}
         data-encrypted={encrypted}
         aria-label={label}
-        // Make the icon focusable so that the tooltip can be opened
-        // with keyboard navigation
-        // TODO: Replace this with the solution from
-        // https://github.com/vector-im/compound-web/pull/130 once it
-        // lands
-        tabIndex={0}
       />
     </Tooltip>
   );
diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index cded2404..9e30c6e1 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -158,7 +158,8 @@ unconditionally select the container so we can use cqmin units */
   max-inline-size: 100%;
 }
 
-.nameTag > svg {
+.nameTag > svg,
+.nameTag > span {
   flex-shrink: 0;
 }
 
@@ -170,14 +171,16 @@ unconditionally select the container so we can use cqmin units */
   color: var(--cpd-color-icon-primary);
 }
 
-.nameTag span {
+.nameTag > .name {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   padding-inline: var(--cpd-space-2x);
+  flex-shrink: 1;
 }
 
 .errorIcon {
+  display: block;
   color: var(--cpd-color-icon-critical-primary);
 }
 
diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index 1214e2d8..3ba16315 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -148,22 +148,20 @@ const Tile = forwardRef<HTMLDivElement, TileProps>(
         <div className={styles.fg}>
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}
-            <Text as="span" size="sm" weight="medium">
+            <Text as="span" size="sm" weight="medium" className={styles.name}>
               {nameTag}
             </Text>
             {unencryptedWarning && (
-              <Tooltip label={t("common.unencrypted")} side="bottom">
+              <Tooltip
+                label={t("common.unencrypted")}
+                side="bottom"
+                isTriggerInteractive={false}
+              >
                 <ErrorIcon
                   width={20}
                   height={20}
                   aria-label={t("common.unencrypted")}
                   className={styles.errorIcon}
-                  // Make the icon focusable so that the tooltip can be opened
-                  // with keyboard navigation
-                  // TODO: Replace this with the solution from
-                  // https://github.com/vector-im/compound-web/pull/130 once it
-                  // lands
-                  tabIndex={0}
                 />
               </Tooltip>
             )}