Merge pull request #2874 from element-hq/renovate/major-react-monorepo

Update react monorepo to v19 (major)

src/__snapshots__/Modal.test.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`the content is rendered when the modal is open 1`] = `
 <div
-  aria-labelledby="radix-:r4:"
+  aria-labelledby="radix-«r4»"
   class="overlay animate modal dialog _glass_sepwu_8"
   data-state="open"
-  id="radix-:r3:"
+  id="radix-«r3»"
   role="dialog"
   style="pointer-events: auto;"
   tabindex="-1"
@@ -18,7 +18,7 @@ exports[`the content is rendered when the modal is open 1`] = `
     >
       <h2
         class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
-        id="radix-:r4:"
+        id="radix-«r4»"
       >
         My modal
       </h2>
@@ -36,7 +36,7 @@ exports[`the content is rendered when the modal is open 1`] = `
 
 exports[`the modal renders as a drawer in mobile viewports 1`] = `
 <div
-  aria-labelledby="radix-:ra:"
+  aria-labelledby="radix-«ra»"
   class="overlay modal drawer"
   data-state="open"
   data-vaul-animate="true"
@@ -45,7 +45,7 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
   data-vaul-drawer=""
   data-vaul-drawer-direction="bottom"
   data-vaul-snap-points="false"
-  id="radix-:r9:"
+  id="radix-«r9»"
   role="dialog"
   style="pointer-events: auto;"
   tabindex="-1"
@@ -60,7 +60,7 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
         class="handle"
       />
       <h2
-        id="radix-:ra:"
+        id="radix-«ra»"
         style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
       >
         My modal

src/__snapshots__/Toast.test.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`Toast > renders 1`] = `
 <button
-  aria-labelledby="radix-:r4:"
+  aria-labelledby="radix-«r4»"
   class="overlay animate toast"
   data-state="open"
-  id="radix-:r3:"
+  id="radix-«r3»"
   role="dialog"
   style="pointer-events: auto;"
   tabindex="-1"
@@ -13,7 +13,7 @@ exports[`Toast > renders 1`] = `
 >
   <h3
     class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36"
-    id="radix-:r4:"
+    id="radix-«r4»"
   >
     Hello world!
   </h3>

src/button/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Can close reaction dialog 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby=":rb5:"
+    aria-labelledby="«rb5»"
     class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
@@ -43,7 +43,7 @@ exports[`Can fully expand emoji picker 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby=":r7m:"
+    aria-labelledby="«r7m»"
     class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
@@ -74,7 +74,7 @@ exports[`Can lower hand 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="true"
-    aria-labelledby=":r36:"
+    aria-labelledby="«r36»"
     class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="secondary"
     data-size="lg"
@@ -108,7 +108,7 @@ exports[`Can open menu 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby=":r0:"
+    aria-labelledby="«r0»"
     class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
@@ -139,7 +139,7 @@ exports[`Can raise hand 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="true"
-    aria-labelledby=":r1j:"
+    aria-labelledby="«r1j»"
     class="_button_vczzf_8 raisedButton _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"

src/livekit/TrackProcessorContext.tsx

@@ -10,7 +10,14 @@ import {
   supportsBackgroundProcessors,
   type BackgroundOptions,
 } from "@livekit/track-processors";
-import { createContext, type FC, useContext, useEffect, useMemo } from "react";
+import {
+  createContext,
+  type FC,
+  type JSX,
+  useContext,
+  useEffect,
+  useMemo,
+} from "react";
 import { type LocalVideoTrack } from "livekit-client";
 
 import {

src/room/InviteModal.tsx

@@ -19,7 +19,7 @@ import {
   LinkIcon,
   CheckIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
-import useClipboard from "react-use-clipboard";
+import copy from "copy-to-clipboard";
 
 import { Modal } from "../Modal";
 import { getAbsoluteRoomUrl } from "../utils/matrix";
@@ -42,18 +42,17 @@ export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
     () => getAbsoluteRoomUrl(room.roomId, e2eeSystem, room.name),
     [e2eeSystem, room.name, room.roomId],
   );
-  const [, setCopied] = useClipboard(url);
   const [toastOpen, setToastOpen] = useState(false);
   const onToastDismiss = useCallback(() => setToastOpen(false), [setToastOpen]);
 
   const onButtonClick = useCallback(
     (e: MouseEvent) => {
       e.stopPropagation();
-      setCopied();
+      copy(url);
       onDismiss();
       setToastOpen(true);
     },
-    [setCopied, onDismiss],
+    [url, onDismiss],
   );
 
   return (

src/room/__snapshots__/InCallView.test.tsx.snap

@@ -46,7 +46,7 @@ exports[`InCallView > rendering > renders 1`] = `
       >
         <button
           aria-disabled="false"
-          aria-labelledby=":r0:"
+          aria-labelledby="«r0»"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
@@ -69,7 +69,7 @@ exports[`InCallView > rendering > renders 1`] = `
         </button>
         <button
           aria-disabled="false"
-          aria-labelledby=":r5:"
+          aria-labelledby="«r5»"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
@@ -91,7 +91,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-labelledby=":ra:"
+          aria-labelledby="«ra»"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="secondary"
           data-size="lg"
@@ -112,7 +112,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-labelledby=":rf:"
+          aria-labelledby="«rf»"
           class="_button_vczzf_8 endCall _has-icon_vczzf_57 _icon-only_vczzf_50 _destructive_vczzf_107"
           data-kind="primary"
           data-size="lg"
@@ -138,7 +138,7 @@ exports[`InCallView > rendering > renders 1`] = `
         class="toggle layout"
       >
         <input
-          aria-labelledby=":rk:"
+          aria-labelledby="«rk»"
           name="layout"
           type="radio"
           value="spotlight"
@@ -156,7 +156,7 @@ exports[`InCallView > rendering > renders 1`] = `
           />
         </svg>
         <input
-          aria-labelledby=":rp:"
+          aria-labelledby="«rp»"
           checked=""
           name="layout"
           type="radio"