Merge tag 'v3.33.0' into sc

* Convert the "Cryptography" settings panel to an HTML table to assist screen reader users. ([\matrix-org#6968](matrix-org#6968)). Contributed by [andybalaam](https://github.com/andybalaam).
* Swap order of private space creation and tweak copy ([\matrix-org#6967](matrix-org#6967)). Fixes element-hq/element-web#18768 and element-hq/element-web#18768.
* Add spacing to Room settings - Notifications subsection ([\matrix-org#6962](matrix-org#6962)). Contributed by [CicadaCinema](https://github.com/CicadaCinema).
* Use HTML tables for some tabular user interface areas, to assist with screen reader use ([\matrix-org#6955](matrix-org#6955)). Contributed by [andybalaam](https://github.com/andybalaam).
* Fix space invite edge cases ([\matrix-org#6884](matrix-org#6884)). Fixes element-hq/element-web#19010 element-hq/element-web#17345 and element-hq/element-web#19010.
* Allow options to cascade kicks/bans throughout spaces ([\matrix-org#6829](matrix-org#6829)). Fixes element-hq/element-web#18969 and element-hq/element-web#18969.
* Make public space alias field mandatory again ([\matrix-org#6921](matrix-org#6921)). Fixes element-hq/element-web#19003 and element-hq/element-web#19003.
* Add progress bar to restricted room upgrade dialog ([\matrix-org#6919](matrix-org#6919)). Fixes element-hq/element-web#19146 and element-hq/element-web#19146.
* Add customisation point for visibility of invites and room creation ([\matrix-org#6922](matrix-org#6922)). Fixes element-hq/element-web#19331 and element-hq/element-web#19331.
* Inhibit `Unable to get validated threepid` error during UIA ([\matrix-org#6928](matrix-org#6928)). Fixes element-hq/element-web#18883 and element-hq/element-web#18883.
* Tweak room list skeleton UI height and behaviour ([\matrix-org#6926](matrix-org#6926)). Fixes element-hq/element-web#18231 element-hq/element-web#16581 and element-hq/element-web#18231.
* If public room creation fails, retry without publishing it ([\matrix-org#6872](matrix-org#6872)). Fixes element-hq/element-web#19194 and element-hq/element-web#19194. Contributed by [AndrewFerr](https://github.com/AndrewFerr).
* Iterate invite your teammates to Space view ([\matrix-org#6925](matrix-org#6925)). Fixes element-hq/element-web#18772 and element-hq/element-web#18772.
* Make placeholder more grey when no input ([\matrix-org#6840](matrix-org#6840)). Fixes element-hq/element-web#17243 and element-hq/element-web#17243. Contributed by [wlach](https://github.com/wlach).
* Respect tombstones in locally known rooms for Space children ([\matrix-org#6906](matrix-org#6906)). Fixes element-hq/element-web#19246 element-hq/element-web#19256 and element-hq/element-web#19246.
* Improve emoji shortcodes generated from annotations ([\matrix-org#6907](matrix-org#6907)). Fixes element-hq/element-web#19304 and element-hq/element-web#19304.
* Hide kick & ban options in UserInfo when looking at own profile ([\matrix-org#6911](matrix-org#6911)). Fixes element-hq/element-web#19066 and element-hq/element-web#19066.
* Add progress bar to Community to Space migration tool ([\matrix-org#6887](matrix-org#6887)). Fixes element-hq/element-web#19216 and element-hq/element-web#19216.
* Fix leave space cancel button exploding ([\matrix-org#6966](matrix-org#6966)).
* Fix edge case behaviour of the space join spinner for guests ([\matrix-org#6972](matrix-org#6972)). Fixes element-hq/element-web#19359 and element-hq/element-web#19359.
* Convert emoticon to emoji at the end of a line on send even if the cursor isn't there ([\matrix-org#6965](matrix-org#6965)). Contributed by [SimonBrandner](https://github.com/SimonBrandner).
* Fix text overflows button on Home page ([\matrix-org#6898](matrix-org#6898)). Fixes element-hq/element-web#19180 and element-hq/element-web#19180. Contributed by [oliver-pham](https://github.com/oliver-pham).
* Space Room View should react to join rule changes down /sync ([\matrix-org#6945](matrix-org#6945)). Fixes element-hq/element-web#19390 and element-hq/element-web#19390.
* Hide leave section button if user isn't in the room e.g peeking ([\matrix-org#6920](matrix-org#6920)). Fixes element-hq/element-web#17410 and element-hq/element-web#17410.
* Fix bug where room list would get stuck showing no rooms ([\matrix-org#6939](matrix-org#6939)). Fixes element-hq/element-web#19373 and element-hq/element-web#19373.
* Update room settings dialog title when room name changes ([\matrix-org#6916](matrix-org#6916)). Fixes element-hq/element-web#17480 and element-hq/element-web#17480. Contributed by [psrpinto](https://github.com/psrpinto).
* Fix editing losing emote-ness and rainbow-ness of messages ([\matrix-org#6931](matrix-org#6931)). Fixes element-hq/element-web#19350 and element-hq/element-web#19350.
* Remove semicolon from notifications panel ([\matrix-org#6930](matrix-org#6930)). Contributed by [robintown](https://github.com/robintown).
* Prevent profile image in left panel's backdrop from being selected ([\matrix-org#6924](matrix-org#6924)). Contributed by [rom4nik](https://github.com/rom4nik).
* Validate that the phone number verification field is filled before allowing user to submit ([\matrix-org#6918](matrix-org#6918)). Fixes element-hq/element-web#19316 and element-hq/element-web#19316. Contributed by [VFermat](https://github.com/VFermat).
* Updated how save button becomes disabled in room settings to listen for all fields instead of the most recent ([\matrix-org#6917](matrix-org#6917)). Contributed by [LoganArnett](https://github.com/LoganArnett).
* Use FocusLock around ContextMenus to simplify focus management ([\matrix-org#6311](matrix-org#6311)). Fixes element-hq/element-web#19259 and element-hq/element-web#19259.
* Fix space hierarchy pagination ([\matrix-org#6908](matrix-org#6908)). Fixes element-hq/element-web#19276 and element-hq/element-web#19276.
* Fix spaces keyboard shortcuts not working for last space ([\matrix-org#6909](matrix-org#6909)). Fixes element-hq/element-web#19255 and element-hq/element-web#19255.
* Use fallback avatar only for DMs with 2 people. ([\matrix-org#6895](matrix-org#6895)). Fixes element-hq/element-web#18747 and element-hq/element-web#18747. Contributed by [andybalaam](https://github.com/andybalaam).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.32.1",
+  "version": "3.33.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -76,14 +76,14 @@
     "focus-visible": "^5.2.0",
     "gfm.css": "^1.1.2",
     "glob-to-regexp": "^0.4.1",
-    "highlight.js": "^10.5.0",
+    "highlight.js": "^11.3.1",
     "html-entities": "^1.4.0",
     "is-ip": "^3.1.0",
     "jszip": "^3.7.0",
     "katex": "^0.12.0",
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
-    "matrix-js-sdk": "14.0.1",
+    "matrix-js-sdk": "15.0.0",
     "matrix-widget-api": "^0.1.0-beta.16",
     "minimist": "^1.2.5",
     "opus-recorder": "^8.0.3",
@@ -134,6 +134,7 @@
     "@types/counterpart": "^0.18.1",
     "@types/css-font-loading-module": "^0.0.6",
     "@types/diff-match-patch": "^1.0.32",
+    "@types/enzyme": "^3.10.9",
     "@types/file-saver": "^2.0.3",
     "@types/flux": "^3.1.9",
     "@types/jest": "^26.0.20",
@@ -158,6 +159,7 @@
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",
     "enzyme": "^3.11.0",
+    "enzyme-to-json": "^3.6.2",
     "eslint": "7.18.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#2306b3d4da4eba908b256014b979f1d3d43d2945",
@@ -186,6 +188,9 @@
     "@types/react": "17.0.14"
   },
   "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
     "testEnvironment": "./__test-utils__/environment.js",
     "testMatch": [
       "<rootDir>/test/**/*-test.[jt]s?(x)"

res/css/_components.scss

@@ -39,6 +39,7 @@
 @import "./structures/_ViewSource.scss";
 @import "./structures/auth/_CompleteSecurity.scss";
 @import "./structures/auth/_Login.scss";
+@import "./structures/auth/_SetupEncryptionBody.scss";
 @import "./views/audio_messages/_AudioPlayer.scss";
 @import "./views/audio_messages/_PlayPauseButton.scss";
 @import "./views/audio_messages/_PlaybackContainer.scss";
@@ -73,6 +74,7 @@
 @import "./views/dialogs/_ChangelogDialog.scss";
 @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
 @import "./views/dialogs/_CommunityPrototypeInviteDialog.scss";
+@import "./views/dialogs/_ConfirmSpaceUserActionDialog.scss";
 @import "./views/dialogs/_ConfirmUserActionDialog.scss";
 @import "./views/dialogs/_CreateCommunityPrototypeDialog.scss";
 @import "./views/dialogs/_CreateGroupDialog.scss";
@@ -146,7 +148,7 @@
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";
 @import "./views/elements/_QRCode.scss";
-@import "./views/elements/_ReplyThread.scss";
+@import "./views/elements/_ReplyChain.scss";
 @import "./views/elements/_ResizeHandle.scss";
 @import "./views/elements/_RichText.scss";
 @import "./views/elements/_RoleButton.scss";
@@ -201,6 +203,7 @@
 @import "./views/right_panel/_UserInfo.scss";
 @import "./views/right_panel/_VerificationPanel.scss";
 @import "./views/right_panel/_WidgetCard.scss";
+@import "./views/right_panel/_ThreadPanel.scss";
 @import "./views/room_settings/_AliasSettings.scss";
 @import "./views/rooms/_AppsDrawer.scss";
 @import "./views/rooms/_Autocomplete.scss";
@@ -241,6 +244,7 @@
 @import "./views/rooms/_WhoIsTypingTile.scss";
 @import "./views/settings/_AvatarSetting.scss";
 @import "./views/settings/_CrossSigningPanel.scss";
+@import "./views/settings/_CryptographyPanel.scss";
 @import "./views/settings/_DevicesPanel.scss";
 @import "./views/settings/_E2eAdvancedPanel.scss";
 @import "./views/settings/_EmailAddresses.scss";
@@ -269,6 +273,7 @@
 @import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
 @import "./views/spaces/_SpaceBasicSettings.scss";
+@import "./views/spaces/_SpaceChildrenPicker.scss";
 @import "./views/spaces/_SpaceCreateMenu.scss";
 @import "./views/spaces/_SpacePublicShare.scss";
 @import "./views/terms/_InlineTermsAgreement.scss";

res/css/structures/_BackdropPanel.scss

@@ -34,4 +34,5 @@ limitations under the License.
     z-index: 0;
     pointer-events: none;
     overflow: hidden;
+    user-select: none;
 }

res/css/structures/_GroupFilterPanel.scss

@@ -51,7 +51,7 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
     height: 0px;
     width: 90%;
     border: none;
-    border-bottom: 1px solid $groupFilterPanel-divider-color;
+    border-bottom: 1px solid $tertiary-content;
 }
 
 .mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {

res/css/structures/_HomePage.scss

@@ -56,14 +56,15 @@ limitations under the License.
     }
 
     .mx_HomePage_default_buttons {
+        display: flex;
         margin: 60px auto 0;
         width: fit-content;
 
         .mx_AccessibleButton {
             padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin
 
             width: 160px;
-            height: 132px;
+            min-height: 132px;
             margin: 20px;
             position: relative;
             display: inline-block;

res/css/structures/_LeftPanelWidget.scss

@@ -24,7 +24,7 @@ limitations under the License.
         align-items: center;
 
         height: 24px;
-        color: $roomlist-header-color;
+        color: $tertiary-content;
         margin-top: 4px;
 
         .mx_LeftPanelWidget_stickable {
@@ -62,7 +62,7 @@ limitations under the License.
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background-color: $roomlist-header-color;
+                    background-color: $tertiary-content;
                     mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
                 }
 

res/css/structures/_RightPanel.scss

@@ -79,6 +79,10 @@ limitations under the License.
     }
 }
 
+.mx_RightPanel_threadsButton::before {
+    mask-image: url('$(res)/img/element-icons/room/thread.svg');
+}
+
 .mx_RightPanel_notifsButton::before {
     mask-image: url('$(res)/img/element-icons/notifications.svg');
     mask-position: center;

res/css/structures/_SpacePanel.scss

@@ -19,7 +19,7 @@ $nestedHeight: 24px;
 $gutterSize: 16px;
 $activeBorderTransparentGap: 1px;
 
-$activeBackgroundColor: $roomtile-selected-bg-color;
+$activeBackgroundColor: $panel-actions;
 $activeBorderColor: $secondary-content;
 
 .mx_SpacePanel {
@@ -49,7 +49,7 @@ $activeBorderColor: $secondary-content;
         mask-repeat: no-repeat;
         margin-left: $gutterSize;
         margin-bottom: 12px;
-        background-color: $roomlist-header-color;
+        background-color: $tertiary-content;
         mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
 
         &.expanded {
@@ -171,7 +171,7 @@ $activeBorderColor: $secondary-content;
             mask-position: center;
             mask-size: 20px;
             mask-repeat: no-repeat;
-            background-color: $roomlist-header-color;
+            background-color: $tertiary-content;
             mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
         }
 

res/css/structures/_SpaceRoomView.scss

@@ -422,7 +422,7 @@ $SpaceRoomViewInnerWidth: 428px;
     .mx_SpaceRoomView_inviteTeammates {
         // XXX remove this when spaces leaves Beta
         .mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
-            padding: 58px 16px 16px;
+            padding: 16px;
             position: relative;
             border-radius: 8px;
             background-color: $header-panel-bg-color;
@@ -465,8 +465,13 @@ $SpaceRoomViewInnerWidth: 428px;
                 }
             }
 
-            .mx_SpaceRoomView_inviteTeammates_inviteDialogButton::before {
-                mask-image: url('$(res)/img/element-icons/room/invite.svg');
+            .mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
+                color: $accent-color;
+
+                &::before {
+                    mask-image: url('$(res)/img/element-icons/room/invite.svg');
+                    background-color: $accent-color;
+                }
             }
         }
     }

res/css/structures/auth/_CompleteSecurity.scss

@@ -33,12 +33,25 @@ limitations under the License.
     margin: 0 auto;
 }
 
+.mx_CompleteSecurity_skip {
+    mask: url('$(res)/img/feather-customised/cancel.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: cover;
+    width: 18px;
+    height: 18px;
+    background-color: $dialog-close-fg-color;
+    cursor: pointer;
+    position: absolute;
+    right: 24px;
+}
+
 .mx_CompleteSecurity_body {
     font-size: $font-15px;
 }
 
 .mx_CompleteSecurity_waiting {
-    color: $notice-secondary-color;
+    color: $tertiary-content;
 }
 
 .mx_CompleteSecurity_actionRow {

res/css/structures/auth/_SetupEncryptionBody.scss

@@ -0,0 +1,24 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SetupEncryptionBody_reset {
+    color: $light-fg-color;
+    margin-top: $font-14px;
+
+    a.mx_SetupEncryptionBody_reset_link:is(:link, :hover, :visited) {
+        color: $warning-color;
+    }
+}

res/css/views/audio_messages/_PlayPauseButton.scss

@@ -21,12 +21,12 @@ limitations under the License.
     min-width: 32px; // for when the button is used in a flexbox
     min-height: 32px; // for when the button is used in a flexbox
     border-radius: 32px;
-    background-color: $voice-playback-button-bg-color;
+    background-color: $system;
 
     &::before {
         content: '';
         position: absolute; // sizing varies by icon
-        background-color: $voice-playback-button-fg-color;
+        background-color: $secondary-content;
         mask-repeat: no-repeat;
         mask-size: contain;
     }

res/css/views/audio_messages/_PlaybackContainer.scss

@@ -31,7 +31,7 @@ limitations under the License.
 
     .mx_Waveform {
         .mx_Waveform_bar {
-            background-color: $voice-record-waveform-incomplete-fg-color;
+            background-color: $quaternary-content;
             height: 100%;
             /* Variable set by a JS component */
             transform: scaleY(max(0.05, var(--barHeight)));

res/css/views/auth/_AuthBody.scss

@@ -58,10 +58,6 @@ limitations under the License.
         background-color: $authpage-body-bg-color;
     }
 
-    .mx_Field label {
-        color: $authpage-primary-color;
-    }
-
     .mx_Field_labelAlwaysTopLeft label,
     .mx_Field select + label /* Always show a select's label on top to not collide with the value */,
     .mx_Field input:focus + label,

res/css/views/beta/_BetaCard.scss

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_BetaCard {
     margin-bottom: 20px;
     padding: 24px;
-    background-color: $settings-profile-placeholder-bg-color;
+    background-color: $system;
     border-radius: 8px;
     box-sizing: border-box;
 

res/css/views/context_menus/_MessageContextMenu.scss

@@ -81,4 +81,8 @@ limitations under the License.
     .mx_MessageContextMenu_iconUnpin::before {
         mask-image: url('$(res)/img/element-icons/room/pin.svg');
     }
+
+    .mx_MessageContextMenu_iconViewInRoom::before {
+        mask-image: url('$(res)/img/element-icons/view-in-room.svg');
+    }
 }

res/css/views/dialogs/_AddExistingToSpaceDialog.scss

@@ -75,7 +75,7 @@ limitations under the License.
                 @mixin ProgressBarBorderRadius 8px;
             }
 
-            .mx_AddExistingToSpace_progressText {
+            .mx_AddExistingToSpaceDialog_progressText {
                 margin-top: 8px;
                 font-size: $font-15px;
                 line-height: $font-24px;

res/css/views/dialogs/_ConfirmSpaceUserActionDialog.scss

@@ -0,0 +1,66 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ConfirmSpaceUserActionDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+        padding: 24px 32px;
+    }
+}
+
+.mx_ConfirmSpaceUserActionDialog {
+    width: 440px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    height: 520px;
+
+    .mx_Dialog_content {
+        margin: 12px 0;
+        flex-grow: 1;
+        overflow-y: auto;
+    }
+
+    .mx_ConfirmUserActionDialog_reasonField {
+        margin-bottom: 12px;
+    }
+
+    .mx_ConfirmSpaceUserActionDialog_warning {
+        position: relative;
+        border-radius: 8px;
+        padding: 12px 8px 12px 42px;
+        background-color: $header-panel-bg-color;
+
+        font-size: $font-12px;
+        line-height: $font-15px;
+        color: $secondary-content;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: calc(50% - 8px); // vertical centering
+            height: 16px;
+            width: 16px;
+            background-color: $secondary-content;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
+            mask-position: center;
+        }
+    }
+}