Update to React 18 (#24763)

* Upgrade target to es2021 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Upgrade target to es2021 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Upgrade to es2022 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Upgrade to es2022 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix babel config Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix babel config Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix React contexts Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix types Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix React state Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update to React 18 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update to React 18 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Install @testing-library/dom Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update lockfile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Yarn lock update * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-10-21 14:50:06 +01:00 · 2024-10-21 14:50:06 +01:00 · d8800ef987
commit d8800ef987
parent 772019711d
81 changed files with 1056 additions and 1403 deletions
--- a/test/unit-tests/components/views/rooms/RoomHeader/snapshots/VideoRoomChatButton-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomHeader/snapshots/VideoRoomChatButton-test.tsx.snap
@ -3,7 +3,7 @@
 exports[`<VideoRoomChatButton /> renders button with an unread marker when room is unread 1`] = `
 <button
  aria-label="Chat"
-  aria-labelledby="floating-ui-6"
+  aria-labelledby=":r6:"
  class="_icon-button_bh2qc_17"
  data-indicator="default"
  role="button"
--- a/test/unit-tests/components/views/rooms/snapshots/PinnedEventTile-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/snapshots/PinnedEventTile-test.tsx.snap
@ -25,7 +25,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
        class="mx_PinnedEventTile_top"
      >
        <span
-          aria-labelledby="floating-ui-1"
+          aria-labelledby=":r0:"
          class="mx_PinnedEventTile_sender mx_Username_color2"
        >
          @alice:server.org
@ -37,7 +37,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
          aria-label="Open menu"
          class="_icon-button_bh2qc_17"
          data-state="closed"
-          id="radix-0"
+          id="radix-:r5:"
          role="button"
          style="--cpd-icon-button-size: 24px;"
          tabindex="0"
@ -101,7 +101,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
        class="mx_PinnedEventTile_top"
      >
        <span
-          aria-labelledby="floating-ui-6"
+          aria-labelledby=":r8:"
          class="mx_PinnedEventTile_sender mx_Username_color2"
        >
          @alice:server.org
@ -113,7 +113,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
          aria-label="Open menu"
          class="_icon-button_bh2qc_17"
          data-state="closed"
-          id="radix-2"
+          id="radix-:rd:"
          role="button"
          style="--cpd-icon-button-size: 24px;"
          tabindex="0"
@ -181,7 +181,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
 exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
 <div
  aria-label="Open menu"
-  aria-labelledby="radix-8"
+  aria-labelledby="radix-:r10:"
  aria-orientation="vertical"
  class="_menu_1x5h1_17"
  data-align="start"
@ -190,7 +190,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
  data-side="right"
  data-state="open"
  dir="ltr"
-  id="radix-9"
+  id="radix-:r11:"
  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"
@ -372,7 +372,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
 exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`] = `
 <div
  aria-label="Open menu"
-  aria-labelledby="radix-4"
+  aria-labelledby="radix-:rl:"
  aria-orientation="vertical"
  class="_menu_1x5h1_17"
  data-align="start"
@ -381,7 +381,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
  data-side="right"
  data-state="open"
  dir="ltr"
-  id="radix-5"
+  id="radix-:rm:"
  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"
--- a/test/unit-tests/components/views/rooms/snapshots/ReadReceiptGroup-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/snapshots/ReadReceiptGroup-test.tsx.snap
@ -3,7 +3,8 @@
 exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
 <div
  class="_tooltip_1pslb_17"
-  id="floating-ui-6"
+  data-floating-ui-focusable=""
+  id=":r6:"
  role="tooltip"
  style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
  tabindex="-1"
@ -21,7 +22,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
      stroke="none"
    />
    <clippath
-      id="floating-ui-9"
+      id=":r9:"
    >
      <rect
        height="10"
@ -32,13 +33,13 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
    </clippath>
  </svg>
  <span
-    id="floating-ui-4"
+    id=":r4:"
  >
    Alice
  </span>
  <span
    class="_caption_1pslb_37 cpd-theme-dark"
-    id="floating-ui-5"
+    id=":r5:"
  >
    @alice:example.org
  </span>
--- a/test/unit-tests/components/views/rooms/snapshots/RoomHeader-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/snapshots/RoomHeader-test.tsx.snap
@ -47,7 +47,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
    >
      <button
-        aria-labelledby="floating-ui-1180"
+        aria-labelledby=":r154:"
        class="_icon-button_bh2qc_17"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@ -73,7 +73,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
      <button
        aria-disabled="true"
        aria-label="There's no one here to call"
-        aria-labelledby="floating-ui-1185"
+        aria-labelledby=":r159:"
        class="_icon-button_bh2qc_17"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@ -98,7 +98,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
      </button>
      <button
        aria-label="Room info"
-        aria-labelledby="floating-ui-1190"
+        aria-labelledby=":r15e:"
        class="_icon-button_bh2qc_17"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@ -123,7 +123,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
      </button>
      <button
        aria-label="Threads"
-        aria-labelledby="floating-ui-1195"
+        aria-labelledby=":r15j:"
        class="_icon-button_bh2qc_17"
        role="button"
        style="--cpd-icon-button-size: 32px;"
--- a/test/unit-tests/components/views/rooms/snapshots/ThirdPartyMemberInfo-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/snapshots/ThirdPartyMemberInfo-test.tsx.snap
@ -19,7 +19,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
        </p>
      </div>
      <button
-        aria-labelledby="floating-ui-1"
+        aria-labelledby=":r0:"
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
@ -93,7 +93,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
        </p>
      </div>
      <button
-        aria-labelledby="floating-ui-6"
+        aria-labelledby=":r6:"
        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
        data-testid="base-card-close-button"
        role="button"
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.tsx
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.tsx
@ -6,8 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-import { renderHook } from "@testing-library/react-hooks";
-import { act } from "jest-matrix-react";
+import { renderHook, act } from "jest-matrix-react";

 import { usePlainTextListeners } from "../../../../../../../src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners";