Update dependency @vector-im/compound-web to v0.9.4 (#11891)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <[email protected]>

Author: renovate[bot]

package.json

@@ -76,7 +76,7 @@
         "@sentry/browser": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^0.1.0",
-        "@vector-im/compound-web": "0.8.1",
+        "@vector-im/compound-web": "0.9.4",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

src/PosthogTrackers.ts

@@ -91,7 +91,7 @@ export default class PosthogTrackers {
         this.trackPage();
     }
 
-    public static trackInteraction(name: InteractionName, ev?: SyntheticEvent, index?: number): void {
+    public static trackInteraction(name: InteractionName, ev?: SyntheticEvent | Event, index?: number): void {
         let interactionType: InteractionEvent["interactionType"];
         if (ev?.type === "click") {
             interactionType = "Pointer";

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -39,7 +39,7 @@ import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
 import BaseCard, { Group } from "./BaseCard";
 import { _t } from "../../../languageHandler";
 import RoomAvatar from "../avatars/RoomAvatar";
-import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
+import AccessibleButton from "../elements/AccessibleButton";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 import Modal from "../../../Modal";
@@ -268,7 +268,7 @@ const onRoomPinsClick = (): void => {
     RightPanelStore.instance.pushCard({ phase: RightPanelPhases.PinnedMessages }, true);
 };
 
-const onRoomSettingsClick = (ev: ButtonEvent): void => {
+const onRoomSettingsClick = (ev: Event): void => {
     defaultDispatcher.dispatch({ action: "open_room_settings" });
     PosthogTrackers.trackInteraction("WebRightPanelRoomInfoSettingsButton", ev);
 };
@@ -303,7 +303,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
         });
     };
 
-    const onRoomMembersClick = (ev: ButtonEvent): void => {
+    const onRoomMembersClick = (ev: Event): void => {
         RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true);
         PosthogTrackers.trackInteraction("WebRightPanelRoomInfoPeopleButton", ev);
     };
@@ -433,50 +433,52 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
                 label={_t("room|context_menu|favourite")}
                 checked={isFavorite}
                 onChange={() => tagRoom(room, DefaultTagID.Favourite)}
+                // XXX: https://github.com/element-hq/compound/issues/288
+                onSelect={() => {}}
             />
             <MenuItem
                 Icon={UserAddIcon}
                 label={_t("action|invite")}
                 disabled={!canInviteTo(room)}
-                onClick={() => inviteToRoom(room)}
+                onSelect={() => inviteToRoom(room)}
             />
-            <MenuItem Icon={LinkIcon} label={_t("action|copy_link")} onClick={onShareRoomClick} />
-            <MenuItem Icon={SettingsIcon} label={_t("common|settings")} onClick={onRoomSettingsClick} />
+            <MenuItem Icon={LinkIcon} label={_t("action|copy_link")} onSelect={onShareRoomClick} />
+            <MenuItem Icon={SettingsIcon} label={_t("common|settings")} onSelect={onRoomSettingsClick} />
 
             <Separator />
             <MenuItem
                 // this icon matches the legacy implementation
                 // and is a short term solution until legacy room header is removed
                 Icon={UserProfileSolidIcon}
                 label={_t("common|people")}
-                onClick={onRoomMembersClick}
+                onSelect={onRoomMembersClick}
             />
             {!isVideoRoom && (
                 <>
-                    <MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onClick={onRoomFilesClick} />
+                    <MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} />
                     <MenuItem
                         Icon={PollsIcon}
                         label={_t("right_panel|polls_button")}
-                        onClick={onRoomPollHistoryClick}
+                        onSelect={onRoomPollHistoryClick}
                     />
                     {pinningEnabled && (
                         <MenuItem
                             Icon={PinIcon}
                             label={_t("right_panel|pinned_messages_button")}
-                            onClick={onRoomPinsClick}
+                            onSelect={onRoomPinsClick}
                         >
                             <Text as="span" size="sm">
                                 {pinCount}
                             </Text>
                         </MenuItem>
                     )}
-                    <MenuItem Icon={ExportArchiveIcon} label={_t("export_chat|title")} onClick={onRoomExportClick} />
+                    <MenuItem Icon={ExportArchiveIcon} label={_t("export_chat|title")} onSelect={onRoomExportClick} />
                 </>
             )}
 
             <Separator />
 
-            <MenuItem Icon={LeaveIcon} kind="critical" label={_t("action|leave_room")} onClick={onLeaveRoomClick} />
+            <MenuItem Icon={LeaveIcon} kind="critical" label={_t("action|leave_room")} onSelect={onLeaveRoomClick} />
 
             {SettingsStore.getValue(UIFeature.Widgets) &&
                 !isVideoRoom &&

src/utils/exportUtils/exportCSS.ts

@@ -33,7 +33,7 @@ function mutateCssText(css: string): string {
 }
 
 function isLightTheme(sheet: CSSStyleSheet): boolean {
-    return (<HTMLStyleElement>sheet.ownerNode).dataset.mxTheme?.toLowerCase() === "light";
+    return (<HTMLStyleElement>sheet.ownerNode)?.dataset.mxTheme?.toLowerCase() === "light";
 }
 
 async function getRulesFromCssFile(path: string): Promise<CSSStyleSheet> {

test/components/views/right_panel/RoomSummaryCard-test.tsx

@@ -34,6 +34,10 @@ import { PollHistoryDialog } from "../../../../src/components/views/dialogs/Poll
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 import { _t } from "../../../../src/languageHandler";
 import SettingsStore from "../../../../src/settings/SettingsStore";
+import { tagRoom } from "../../../../src/utils/room/tagRoom";
+import { DefaultTagID } from "../../../../src/stores/room-list/models";
+
+jest.mock("../../../../src/utils/room/tagRoom");
 
 describe("<RoomSummaryCard />", () => {
     const userId = "@alice:domain.org";
@@ -63,6 +67,9 @@ describe("<RoomSummaryCard />", () => {
             isRoomEncrypted: jest.fn(),
             getOrCreateFilter: jest.fn().mockResolvedValue({ filterId: 1 }),
             getRoom: jest.fn(),
+            isGuest: jest.fn().mockReturnValue(false),
+            deleteRoomTag: jest.fn().mockResolvedValue({}),
+            setRoomTag: jest.fn().mockResolvedValue({}),
         });
         room = new Room(roomId, mockClient, userId);
         const roomCreateEvent = new MatrixEvent({
@@ -76,6 +83,7 @@ describe("<RoomSummaryCard />", () => {
             state_key: "",
         });
         room.currentState.setStateEvents([roomCreateEvent]);
+        room.updateMyMembership("join");
 
         jest.spyOn(Modal, "createDialog");
         jest.spyOn(RightPanelStore.instance, "pushCard");
@@ -133,6 +141,22 @@ describe("<RoomSummaryCard />", () => {
         expect(Modal.createDialog).toHaveBeenCalledWith(ShareDialog, { target: room });
     });
 
+    it("opens invite dialog on button click", () => {
+        const { getByText } = getComponent();
+
+        fireEvent.click(getByText(_t("action|invite")));
+
+        expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({ action: "view_invite", roomId: room.roomId });
+    });
+
+    it("fires favourite dispatch on button click", () => {
+        const { getByText } = getComponent();
+
+        fireEvent.click(getByText(_t("room|context_menu|favourite")));
+
+        expect(tagRoom).toHaveBeenCalledWith(room, DefaultTagID.Favourite);
+    });
+
     it("opens room settings on button click", () => {
         const { getByText } = getComponent();