PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Room header UI updates (#11507)

Browse source 
* Fix performance issues with useRoomMembers

With the current implementation it would create a new function, with leading: true, rendering the whole throttling useless

* Add public room indicator

* Format room members count better

* Add public room test

* Add search to room summary card

* Update settings UI

* Update snapshot

* Remove default title attribute
This commit is contained in:
Germain 2023-09-01 10:45:50 +01:00 committed by GitHub
parent 30d997e21c
commit d551469543
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 176 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
res/css/_common.pcss
View file

@ -134,6 +134,14 @@ code {
color: $muted-fg-color; color: $muted-fg-color;
} }
.text-primary {
color: $primary-content;
}
.text-secondary {
color: $secondary-content;
}
.mx_Verified { .mx_Verified {
color: $e2e-verified-color; color: $e2e-verified-color;
} }

4
res/css/views/right_panel/_RoomSummaryCard.pcss
View file

@ -268,3 +268,7 @@ limitations under the License.
.mx_RoomSummaryCard_icon_poll::before { .mx_RoomSummaryCard_icon_poll::before {
mask-image: url("$(res)/img/element-icons/room/composer/poll.svg"); mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
} }
.mx_RoomSummaryCard_icon_search::before {
mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
}

6
res/css/views/rooms/_RoomHeader.pcss
View file

@ -26,6 +26,12 @@ limitations under the License.
flex: 1; flex: 1;
} }
.mx_RoomHeader_heading {
display: flex;
gap: var(--cpd-space-1x);
align-items: center;
}
.mx_RoomHeader_topic { .mx_RoomHeader_topic {
height: 0; height: 0;
opacity: 0; opacity: 0;

2
src/components/structures/RightPanel.tsx
View file

@ -57,6 +57,7 @@ interface RoomlessProps extends BaseProps {
interface RoomProps extends BaseProps { interface RoomProps extends BaseProps {
room: Room; room: Room;
permalinkCreator: RoomPermalinkCreator; permalinkCreator: RoomPermalinkCreator;
onSearchClick?: () => void;
} }
type Props = XOR<RoomlessProps, RoomProps>; type Props = XOR<RoomlessProps, RoomProps>;
@ -293,6 +294,7 @@ export default class RightPanel extends React.Component<Props, IState> {
onClose={this.onClose} onClose={this.onClose}
// whenever RightPanel is passed a room it is passed a permalinkcreator // whenever RightPanel is passed a room it is passed a permalinkcreator
permalinkCreator={this.props.permalinkCreator!} permalinkCreator={this.props.permalinkCreator!}
onSearchClick={this.props.onSearchClick}
/> />
); );
} }

1
src/components/structures/RoomView.tsx
View file

@ -2443,6 +2443,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
resizeNotifier={this.props.resizeNotifier} resizeNotifier={this.props.resizeNotifier}
permalinkCreator={this.permalinkCreator} permalinkCreator={this.permalinkCreator}
e2eStatus={this.state.e2eStatus} e2eStatus={this.state.e2eStatus}
onSearchClick={this.onSearchClick}
/> />
) : undefined; ) : undefined;

2
src/components/views/avatars/BaseAvatar.tsx
View file

@ -99,7 +99,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
const { const {
name, name,
idName, idName,
title = "", title,
url, url,
urls, urls,
size = "40px", size = "40px",

11
src/components/views/right_panel/RoomSummaryCard.tsx
View file

@ -58,6 +58,7 @@ interface IProps {
room: Room; room: Room;
permalinkCreator: RoomPermalinkCreator; permalinkCreator: RoomPermalinkCreator;
onClose(): void; onClose(): void;
onSearchClick?: () => void;
} }
interface IAppsSectionProps { interface IAppsSectionProps {
@ -272,7 +273,7 @@ const onRoomSettingsClick = (ev: ButtonEvent): void => {
PosthogTrackers.trackInteraction("WebRightPanelRoomInfoSettingsButton", ev); PosthogTrackers.trackInteraction("WebRightPanelRoomInfoSettingsButton", ev);
}; };
const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose }) => { const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, onSearchClick }) => {
const cli = useContext(MatrixClientContext); const cli = useContext(MatrixClientContext);
const onShareRoomClick = (): void => { const onShareRoomClick = (): void => {
@ -342,6 +343,14 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose })
{_t("common|people")} {_t("common|people")}
<span className="mx_BaseCard_Button_sublabel">{memberCount}</span> <span className="mx_BaseCard_Button_sublabel">{memberCount}</span>
</Button> </Button>
<Button
className="mx_RoomSummaryCard_icon_search"
onClick={() => {
onSearchClick?.();
}}
>
{_t("Search")}
</Button>
{!isVideoRoom && ( {!isVideoRoom && (
<Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}> <Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
{_t("Files")} {_t("Files")}

30
src/components/views/rooms/RoomHeader.tsx
View file

@ -22,18 +22,18 @@ import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/thr
import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg"; import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg";
import { Icon as VerifiedIcon } from "@vector-im/compound-design-tokens/icons/verified.svg"; import { Icon as VerifiedIcon } from "@vector-im/compound-design-tokens/icons/verified.svg";
import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg"; import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
import { CallType } from "matrix-js-sdk/src/webrtc/call"; import { CallType } from "matrix-js-sdk/src/webrtc/call";
import { EventType, type Room } from "matrix-js-sdk/src/matrix"; import { EventType, JoinRule, type Room } from "matrix-js-sdk/src/matrix";
import { useRoomName } from "../../../hooks/useRoomName"; import { useRoomName } from "../../../hooks/useRoomName";
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases"; import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import { useTopic } from "../../../hooks/room/useTopic"; import { useTopic } from "../../../hooks/room/useTopic";
import { useAccountData } from "../../../hooks/useAccountData"; import { useAccountData } from "../../../hooks/useAccountData";
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext"; import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
import { useRoomMemberCount, useRoomMembers } from "../../../hooks/useRoomMembers"; import { useRoomMemberCount, useRoomMembers } from "../../../hooks/useRoomMembers";
import { _t, getCurrentLanguage } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import { Flex } from "../../utils/Flex"; import { Flex } from "../../utils/Flex";
import { Box } from "../../utils/Box"; import { Box } from "../../utils/Box";
import { useRoomCallStatus } from "../../../hooks/room/useRoomCallStatus"; import { useRoomCallStatus } from "../../../hooks/room/useRoomCallStatus";
@ -46,6 +46,9 @@ import { placeCall } from "../../../utils/room/placeCall";
import { useEncryptionStatus } from "../../../hooks/useEncryptionStatus"; import { useEncryptionStatus } from "../../../hooks/useEncryptionStatus";
import { E2EStatus } from "../../../utils/ShieldUtils"; import { E2EStatus } from "../../../utils/ShieldUtils";
import FacePile from "../elements/FacePile"; import FacePile from "../elements/FacePile";
import { useRoomState } from "../../../hooks/useRoomState";
import RoomAvatar from "../avatars/RoomAvatar";
import { formatCount } from "../../../utils/FormattingUtils";
/** /**
* A helper to transform a notification color to the what the Compound Icon Button * A helper to transform a notification color to the what the Compound Icon Button
@ -76,9 +79,10 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
const roomName = useRoomName(room); const roomName = useRoomName(room);
const roomTopic = useTopic(room); const roomTopic = useTopic(room);
const roomState = useRoomState(room);
const members = useRoomMembers(room); const members = useRoomMembers(room, 2500);
const memberCount = useRoomMemberCount(room); const memberCount = useRoomMemberCount(room, { throttleWait: 2500 });
const { voiceCallDisabledReason, voiceCallType, videoCallDisabledReason, videoCallType } = useRoomCallStatus(room); const { voiceCallDisabledReason, voiceCallType, videoCallDisabledReason, videoCallType } = useRoomCallStatus(room);
@ -116,7 +120,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
showOrHidePanel(RightPanelPhases.RoomSummary); showOrHidePanel(RightPanelPhases.RoomSummary);
}} }}
> >
<DecoratedRoomAvatar room={room} size="40px" displayBadge={false} /> <RoomAvatar room={room} size="40px" />
<Box flex="1" className="mx_RoomHeader_info"> <Box flex="1" className="mx_RoomHeader_info">
<BodyText <BodyText
as="div" as="div"
@ -126,9 +130,21 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
title={roomName} title={roomName}
role="heading" role="heading"
aria-level={1} aria-level={1}
className="mx_RoomHeader_heading"
> >
{roomName} {roomName}
{!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
<Tooltip label={_t("Public room")}>
<PublicIcon
width="16px"
height="16px"
className="text-secondary"
aria-label={_t("Public room")}
/>
</Tooltip>
)}
{isDirectMessage && e2eStatus === E2EStatus.Verified && ( {isDirectMessage && e2eStatus === E2EStatus.Verified && (
<Tooltip label={_t("common|verified")}> <Tooltip label={_t("common|verified")}>
<VerifiedIcon <VerifiedIcon
@ -214,7 +230,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
size="20px" size="20px"
overflow={false} overflow={false}
> >
{memberCount.toLocaleString(getCurrentLanguage())} {formatCount(memberCount)}
</FacePile> </FacePile>
</BodyText> </BodyText>
)} )}

31
src/hooks/useRoomMembers.ts
View file

@ -23,17 +23,20 @@ import { useTypedEventEmitter } from "./useEventEmitter";
// Hook to simplify watching Matrix Room joined members // Hook to simplify watching Matrix Room joined members
export const useRoomMembers = (room: Room, throttleWait = 250): RoomMember[] => { export const useRoomMembers = (room: Room, throttleWait = 250): RoomMember[] => {
const [members, setMembers] = useState<RoomMember[]>(room.getJoinedMembers()); const [members, setMembers] = useState<RoomMember[]>(room.getJoinedMembers());
useTypedEventEmitter(
room.currentState, const throttledUpdate = useMemo(
RoomStateEvent.Members, () =>
throttle( throttle(
() => { () => {
setMembers(room.getJoinedMembers()); setMembers(room.getJoinedMembers());
}, },
throttleWait, throttleWait,
{ leading: true, trailing: true }, { leading: true, trailing: true },
), ),
[room, throttleWait],
); );
useTypedEventEmitter(room.currentState, RoomStateEvent.Members, throttledUpdate);
return members; return members;
}; };
@ -50,11 +53,11 @@ type RoomMemberCountOpts = {
* @param opts The options. * @param opts The options.
* @returns the room member count. * @returns the room member count.
*/ */
export const useRoomMemberCount = (room: Room, opts: RoomMemberCountOpts = { throttleWait: 250 }): number => { export const useRoomMemberCount = (
room: Room,
{ throttleWait }: RoomMemberCountOpts = { throttleWait: 250 },
): number => {
const [count, setCount] = useState<number>(room.getJoinedMemberCount()); const [count, setCount] = useState<number>(room.getJoinedMemberCount());
const { throttleWait } = opts;
const throttledUpdate = useMemo( const throttledUpdate = useMemo(
() => () =>
throttle( throttle(

5
src/i18n/strings/en_EN.json
View file

@ -897,7 +897,7 @@
"hidebold": "Hide notification dot (only display counters badges)", "hidebold": "Hide notification dot (only display counters badges)",
"intentional_mentions": "Enable intentional mentions", "intentional_mentions": "Enable intentional mentions",
"ask_to_join": "Enable ask to join", "ask_to_join": "Enable ask to join",
"new_room_decoration_ui": "Under active development, new room header & details interface" "new_room_decoration_ui": "New room header & details interface"
}, },
"Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.", "Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
"Notification Settings": "Notification Settings", "Notification Settings": "Notification Settings",
@ -1876,6 +1876,7 @@
"Room %(name)s": "Room %(name)s", "Room %(name)s": "Room %(name)s",
"Recently visited rooms": "Recently visited rooms", "Recently visited rooms": "Recently visited rooms",
"No recently visited rooms": "No recently visited rooms", "No recently visited rooms": "No recently visited rooms",
"Public room": "Public room",
"Untrusted": "Untrusted", "Untrusted": "Untrusted",
"%(count)s members": { "%(count)s members": {
"other": "%(count)s members", "other": "%(count)s members",
@ -1883,7 +1884,6 @@
}, },
"Video room": "Video room", "Video room": "Video room",
"Public space": "Public space", "Public space": "Public space",
"Public room": "Public room",
"Private space": "Private space", "Private space": "Private space",
"Private room": "Private room", "Private room": "Private room",
"%(names)s and %(name)s": "%(names)s and %(name)s", "%(names)s and %(name)s": "%(names)s and %(name)s",
@ -2112,6 +2112,7 @@
"Edit widgets, bridges & bots": "Edit widgets, bridges & bots", "Edit widgets, bridges & bots": "Edit widgets, bridges & bots",
"Add widgets, bridges & bots": "Add widgets, bridges & bots", "Add widgets, bridges & bots": "Add widgets, bridges & bots",
"Not encrypted": "Not encrypted", "Not encrypted": "Not encrypted",
"Search": "Search",
"Files": "Files", "Files": "Files",
"Poll history": "Poll history", "Poll history": "Poll history",
"Pinned": "Pinned", "Pinned": "Pinned",

1
src/settings/Settings.tsx
View file

@ -548,6 +548,7 @@ export const SETTINGS: { [setting: string]: ISetting } = {
isFeature: true, isFeature: true,
labsGroup: LabGroup.Rooms, labsGroup: LabGroup.Rooms,
displayName: _td("labs|new_room_decoration_ui"), displayName: _td("labs|new_room_decoration_ui"),
description: _td("labs|under_active_development"),
supportedLevels: LEVELS_FEATURE, supportedLevels: LEVELS_FEATURE,
default: false, default: false,
controller: new ReloadOnChangeController(), controller: new ReloadOnChangeController(),

14
test/components/structures/__snapshots__/RoomView-test.tsx.snap
View file

@ -24,7 +24,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 24px;" style="--cpd-avatar-size: 24px;"
title="" title="@user:example.com"
> >
u u
</span> </span>
@ -107,7 +107,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 24px;" style="--cpd-avatar-size: 24px;"
title="" title="@user:example.com"
> >
u u
</span> </span>
@ -187,7 +187,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
data-type="round" data-type="round"
role="button" role="button"
style="--cpd-avatar-size: 52px;" style="--cpd-avatar-size: 52px;"
title="" title="@user:example.com"
> >
u u
</button> </button>
@ -276,7 +276,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 24px;" style="--cpd-avatar-size: 24px;"
title="" title="@user:example.com"
> >
u u
</span> </span>
@ -356,7 +356,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
data-type="round" data-type="round"
role="button" role="button"
style="--cpd-avatar-size: 52px;" style="--cpd-avatar-size: 52px;"
title="" title="@user:example.com"
> >
u u
</button> </button>
@ -520,7 +520,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 24px;" style="--cpd-avatar-size: 24px;"
title="" title="@user:example.com"
> >
u u
</span> </span>
@ -599,7 +599,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
data-type="round" data-type="round"
role="button" role="button"
style="--cpd-avatar-size: 52px;" style="--cpd-avatar-size: 52px;"
title="" title="@user:example.com"
> >
u u
</button> </button>

8
test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
View file

@ -77,7 +77,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 20px;" style="--cpd-avatar-size: 20px;"
title="" title="room-id-2"
> >
U U
</span> </span>
@ -148,7 +148,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 20px;" style="--cpd-avatar-size: 20px;"
title="" title="room-id-3"
> >
U U
</span> </span>
@ -220,7 +220,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 20px;" style="--cpd-avatar-size: 20px;"
title="" title="space-id-4"
> >
N N
</span> </span>
@ -298,7 +298,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 20px;" style="--cpd-avatar-size: 20px;"
title="" title="room-id-5"
> >
N N
</span> </span>

2
test/components/structures/__snapshots__/UserMenu-test.tsx.snap
View file

@ -24,7 +24,7 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 32px;" style="--cpd-avatar-size: 32px;"
title="" title="@userId:matrix.org"
> >
u u
</span> </span>

6
test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
View file

@ -9,7 +9,7 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 36px;" style="--cpd-avatar-size: 36px;"
title="" title="@dm_user@example.com"
> >
D D
</span> </span>
@ -25,7 +25,7 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 36px;" style="--cpd-avatar-size: 36px;"
title="" title="@local_room_user@example.com"
> >
l l
</span> </span>
@ -41,7 +41,7 @@ exports[`RoomAvatar should render as expected for a Room 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 36px;" style="--cpd-avatar-size: 36px;"
title="" title="!room:example.com"
> >
t t
</span> </span>

2
test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
View file

@ -77,7 +77,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 20px;" style="--cpd-avatar-size: 20px;"
title="" title="!space:server"
> >
O O
</span> </span>

3
test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
View file

@ -120,7 +120,6 @@ exports[`AppTile for a pinned widget should render 1`] = `
loading="lazy" loading="lazy"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
src="image-file-stub" src="image-file-stub"
title=""
width="20px" width="20px"
/> />
</span> </span>
@ -209,7 +208,6 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
loading="lazy" loading="lazy"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
src="image-file-stub" src="image-file-stub"
title=""
width="20px" width="20px"
/> />
</span> </span>
@ -366,7 +364,6 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
loading="lazy" loading="lazy"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
src="image-file-stub" src="image-file-stub"
title=""
width="20px" width="20px"
/> />
</span> </span>

2
test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
View file

@ -16,7 +16,7 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 36px;" style="--cpd-avatar-size: 36px;"
title="" title="456"
> >
4 4
</span> </span>

16
test/components/views/elements/__snapshots__/Pill-test.tsx.snap
View file

@ -41,7 +41,7 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 16px;" style="--cpd-avatar-size: 16px;"
title="" title="!room1:example.com"
> >
R R
</span> </span>
@ -73,7 +73,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 16px;" style="--cpd-avatar-size: 16px;"
title="" title="@user2:example.com"
> >
U U
</span> </span>
@ -105,7 +105,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 16px;" style="--cpd-avatar-size: 16px;"
title="" title="!room1:example.com"
> >
R R
</span> </span>
@ -137,7 +137,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 16px;" style="--cpd-avatar-size: 16px;"
title="" title="@user1:example.com"
> >
U U
</span> </span>
@ -169,7 +169,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 16px;" style="--cpd-avatar-size: 16px;"
title="" title="!room1:example.com"
> >
R R
</span> </span>
@ -201,7 +201,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 16px;" style="--cpd-avatar-size: 16px;"
title="" title="!space1:example.com"
> >
S S
</span> </span>
@ -256,7 +256,7 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 16px;" style="--cpd-avatar-size: 16px;"
title="" title="!room1:example.com"
> >
R R
</span> </span>
@ -288,7 +288,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 16px;" style="--cpd-avatar-size: 16px;"
title="" title="@user1:example.com"
> >
U U
</span> </span>

2
test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
View file

@ -16,7 +16,7 @@ exports[`<RoomFacePile /> renders 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 28px;" style="--cpd-avatar-size: 28px;"
title="" title="@bob:example.org"
> >
b b
</span> </span>

2
test/components/views/messages/TextualBody-test.tsx
View file

@ -199,7 +199,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev }); const { container } = getComponent({ mxEvent: ev });
const content = container.querySelector(".mx_EventTile_body"); const content = container.querySelector(".mx_EventTile_body");
expect(content.innerHTML).toMatchInlineSnapshot( expect(content.innerHTML).toMatchInlineSnapshot(
`"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span title="" aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_2lhia_45" data-type="round" width="16px" height="16px" title="@member:domain.bla"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`, `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span title="@member:domain.bla" aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_2lhia_45" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
); );
}); });

22
test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
View file

@ -62,7 +62,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
data-testid="avatar-img" data-testid="avatar-img"
data-type="round" data-type="round"
style="--cpd-avatar-size: 16px;" style="--cpd-avatar-size: 16px;"
title="" title="@member:domain.bla"
> >
<img <img
alt="" alt=""
@ -73,7 +73,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
loading="lazy" loading="lazy"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
src="mxc://avatar.url/image.png" src="mxc://avatar.url/image.png"
title="@member:domain.bla"
width="16px" width="16px"
/> />
</span> </span>
@ -113,7 +112,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
data-testid="avatar-img" data-testid="avatar-img"
data-type="round" data-type="round"
style="--cpd-avatar-size: 16px;" style="--cpd-avatar-size: 16px;"
title="" title="!room1:example.com"
> >
<img <img
alt="" alt=""
@ -124,7 +123,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
loading="lazy" loading="lazy"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
src="mxc://avatar.url/room.png" src="mxc://avatar.url/room.png"
title="!room1:example.com"
width="16px" width="16px"
/> />
</span> </span>
@ -166,7 +164,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
data-testid="avatar-img" data-testid="avatar-img"
data-type="round" data-type="round"
style="--cpd-avatar-size: 16px;" style="--cpd-avatar-size: 16px;"
title="" title="!room1:example.com"
> >
<img <img
alt="" alt=""
@ -177,7 +175,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
loading="lazy" loading="lazy"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
src="mxc://avatar.url/room.png" src="mxc://avatar.url/room.png"
title="!room1:example.com"
width="16px" width="16px"
/> />
</span> </span>
@ -278,7 +275,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
data-testid="avatar-img" data-testid="avatar-img"
data-type="round" data-type="round"
style="--cpd-avatar-size: 16px;" style="--cpd-avatar-size: 16px;"
title="" title="@member:domain.bla"
> >
<img <img
alt="" alt=""
@ -289,7 +286,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
loading="lazy" loading="lazy"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
src="mxc://avatar.url/image.png" src="mxc://avatar.url/image.png"
title="@member:domain.bla"
width="16px" width="16px"
/> />
</span> </span>
@ -313,7 +309,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
href="https://matrix.to/#/!room1:example.com/%event_id%" href="https://matrix.to/#/!room1:example.com/%event_id%"
aria-describedby="mx_Pill_0.123456" aria-describedby="mx_Pill_0.123456"
><span ><span
title="" title="@member:domain.bla"
aria-label="Profile picture" aria-label="Profile picture"
aria-hidden="true" aria-hidden="true"
data-testid="avatar-img" data-testid="avatar-img"
@ -330,8 +326,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
class="_image_2lhia_45" class="_image_2lhia_45"
data-type="round" data-type="round"
width="16px" width="16px"
height="16px" height="16px" /></span
title="@member:domain.bla" /></span
><span class="mx_Pill_text">Message from Member</span></a ><span class="mx_Pill_text">Message from Member</span></a
></bdi ></bdi
></span ></span
@ -348,7 +343,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
href="https://matrix.to/#/!room2:example.com/%event_id%" href="https://matrix.to/#/!room2:example.com/%event_id%"
aria-describedby="mx_Pill_0.123456" aria-describedby="mx_Pill_0.123456"
><span ><span
title="" title="!room2:example.com"
aria-label="Avatar" aria-label="Avatar"
aria-hidden="true" aria-hidden="true"
data-testid="avatar-img" data-testid="avatar-img"
@ -365,8 +360,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
class="_image_2lhia_45" class="_image_2lhia_45"
data-type="round" data-type="round"
width="16px" width="16px"
height="16px" height="16px" /></span
title="!room2:example.com" /></span
><span class="mx_Pill_text">Message in Room 2</span></a ><span class="mx_Pill_text">Message in Room 2</span></a
></bdi ></bdi
></span ></span

9
test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View file

@ -26,7 +26,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 54px;" style="--cpd-avatar-size: 54px;"
title="" title="!room:domain.org"
> >
! !
</span> </span>
@ -69,6 +69,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
0 0
</span> </span>
</div> </div>
<div
class="mx_AccessibleButton mx_BaseCard_Button mx_RoomSummaryCard_Button mx_RoomSummaryCard_icon_search"
role="button"
tabindex="0"
>
Search
</div>
<div <div
class="mx_AccessibleButton mx_BaseCard_Button mx_RoomSummaryCard_Button mx_RoomSummaryCard_icon_files" class="mx_AccessibleButton mx_BaseCard_Button mx_RoomSummaryCard_Button mx_RoomSummaryCard_icon_files"
role="button" role="button"

2
test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
View file

@ -102,7 +102,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
data-type="round" data-type="round"
role="button" role="button"
style="--cpd-avatar-size: 230.39999999999998px;" style="--cpd-avatar-size: 230.39999999999998px;"
title="" title="@user:example.com"
> >
u u
</button> </button>

22
test/components/views/rooms/RoomHeader-test.tsx
View file

@ -17,7 +17,7 @@ limitations under the License.
import React from "react"; import React from "react";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call"; import { CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
import { EventType, MatrixClient, MatrixEvent, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix"; import { EventType, JoinRule, MatrixClient, MatrixEvent, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
import { getAllByTitle, getByLabelText, getByText, getByTitle, render, screen, waitFor } from "@testing-library/react"; import { getAllByTitle, getByLabelText, getByText, getByTitle, render, screen, waitFor } from "@testing-library/react";
import { mkEvent, stubClient, withClientContextRenderOptions } from "../../../test-utils"; import { mkEvent, stubClient, withClientContextRenderOptions } from "../../../test-utils";
@ -422,6 +422,26 @@ describe("RoomHeader", () => {
}); });
}); });
describe("public room", () => {
it("shows a globe", () => {
const joinRuleEvent = new MatrixEvent({
type: EventType.RoomJoinRules,
content: { join_rule: JoinRule.Public },
sender: MatrixClientPeg.get()!.getSafeUserId(),
state_key: "",
room_id: room.roomId,
});
room.addLiveEvents([joinRuleEvent]);
const { container } = render(
<RoomHeader room={room} />,
withClientContextRenderOptions(MatrixClientPeg.get()!),
);
expect(getByLabelText(container, "Public room")).toBeInTheDocument();
});
});
describe("dm", () => { describe("dm", () => {
let client: MatrixClient; let client: MatrixClient;
beforeEach(() => { beforeEach(() => {

2
test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
View file

@ -12,7 +12,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 24px;" style="--cpd-avatar-size: 24px;"
title="" title="@alice:server.org"
> >
a a
</span> </span>

34
test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
View file

@ -6,28 +6,24 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
class="mx_Flex mx_RoomHeader light-panel" class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);" style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
> >
<div <span
class="mx_DecoratedRoomAvatar" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
data-color="7"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
title="!1:example.org"
> >
<span !
class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" </span>
data-color="7"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
title=""
>
!
</span>
</div>
<div <div
class="mx_Box mx_RoomHeader_info mx_Box--flex" class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;" style="--mx-box-flex: 1;"
> >
<div <div
aria-level="1" aria-level="1"
class="_font-body-lg-semibold_1g2sj_89" class="_font-body-lg-semibold_1g2sj_89 mx_RoomHeader_heading"
dir="auto" dir="auto"
role="heading" role="heading"
title="!1:example.org" title="!1:example.org"
@ -40,7 +36,7 @@ exports[`RoomHeader 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);" 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 <button
class="_icon-button_yvmcf_17" class="_icon-button_1k9cw_17"
disabled="" disabled=""
style="--cpd-icon-button-size: 32px;" style="--cpd-icon-button-size: 32px;"
title="There's no one here to call" title="There's no one here to call"
@ -48,7 +44,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
<div /> <div />
</button> </button>
<button <button
class="_icon-button_yvmcf_17" class="_icon-button_1k9cw_17"
disabled="" disabled=""
style="--cpd-icon-button-size: 32px;" style="--cpd-icon-button-size: 32px;"
title="There's no one here to call" title="There's no one here to call"
@ -56,14 +52,14 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
<div /> <div />
</button> </button>
<button <button
class="_icon-button_yvmcf_17" class="_icon-button_1k9cw_17"
style="--cpd-icon-button-size: 32px;" style="--cpd-icon-button-size: 32px;"
title="Threads" title="Threads"
> >
<div /> <div />
</button> </button>
<button <button
class="_icon-button_yvmcf_17" class="_icon-button_1k9cw_17"
style="--cpd-icon-button-size: 32px;" style="--cpd-icon-button-size: 32px;"
title="Notifications" title="Notifications"
> >

8
test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
View file

@ -29,7 +29,7 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 36px;" style="--cpd-avatar-size: 36px;"
title="" title="RoomPreviewBar-test-room"
> >
R R
</span> </span>
@ -222,7 +222,7 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 36px;" style="--cpd-avatar-size: 36px;"
title="" title="RoomPreviewBar-test-room"
> >
R R
</span> </span>
@ -281,7 +281,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 36px;" style="--cpd-avatar-size: 36px;"
title="" title="RoomPreviewBar-test-room"
> >
R R
</span> </span>
@ -347,7 +347,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 36px;" style="--cpd-avatar-size: 36px;"
title="" title="RoomPreviewBar-test-room"
> >
R R
</span> </span>

8
test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
View file

@ -20,7 +20,7 @@ exports[`RoomTile when message previews are enabled and there is a message in a
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 32px;" style="--cpd-avatar-size: 32px;"
title="" title="!1:example.org"
> >
! !
</span> </span>
@ -95,7 +95,7 @@ exports[`RoomTile when message previews are enabled and there is a message in th
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 32px;" style="--cpd-avatar-size: 32px;"
title="" title="!1:example.org"
> >
! !
</span> </span>
@ -170,7 +170,7 @@ exports[`RoomTile when message previews are enabled should render a room without
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 32px;" style="--cpd-avatar-size: 32px;"
title="" title="!1:example.org"
> >
! !
</span> </span>
@ -233,7 +233,7 @@ exports[`RoomTile when message previews are not enabled should render the room 1
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 32px;" style="--cpd-avatar-size: 32px;"
title="" title="!1:example.org"
> >
! !
</span> </span>

3
test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
View file

@ -31,7 +31,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
data-testid="avatar-img" data-testid="avatar-img"
data-type="square" data-type="square"
style="--cpd-avatar-size: 40px;" style="--cpd-avatar-size: 40px;"
title="" title="!spaceid:example.com"
> >
<img <img
alt="" alt=""
@ -42,7 +42,6 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
loading="lazy" loading="lazy"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
src="http://this.is.a.url/avatar.url/room.png" src="http://this.is.a.url/avatar.url/room.png"
title="!spaceid:example.com"
width="40px" width="40px"
/> />
</span> </span>

4
test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
View file

@ -25,7 +25,7 @@ exports[`HTMLExport should export 1`] = `
<div class="mx_LegacyRoomHeader_wrapper" aria-owns="mx_RightPanel"> <div class="mx_LegacyRoomHeader_wrapper" aria-owns="mx_RightPanel">
<div class="mx_LegacyRoomHeader_avatar"> <div class="mx_LegacyRoomHeader_avatar">
<div class="mx_DecoratedRoomAvatar"> <div class="mx_DecoratedRoomAvatar">
<span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span> <span role="presentation" title="" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
</div> </div>
</div> </div>
<div class="mx_LegacyRoomHeader_name"> <div class="mx_LegacyRoomHeader_name">
@ -60,7 +60,7 @@ exports[`HTMLExport should export 1`] = `
role="list" role="list"
> >
<div class="mx_NewRoomIntro"> <div class="mx_NewRoomIntro">
<span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span> <span role="presentation" title="" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
<h2> !myroom:example.org </h2> <h2> !myroom:example.org </h2>
<p> created this room. <br/><br/> <p><span>This is the start of export of <b>!myroom:example.org</b>. Exported by <a href="https://matrix.to/#/%40userId%3Amatrix.org" target="_blank" rel="noopener noreferrer"><b>@userId:matrix.org</b></a> at 11/17/2022.</span></p> </p> <p> created this room. <br/><br/> <p><span>This is the start of export of <b>!myroom:example.org</b>. Exported by <a href="https://matrix.to/#/%40userId%3Amatrix.org" target="_blank" rel="noopener noreferrer"><b>@userId:matrix.org</b></a> at 11/17/2022.</span></p> </p>
<br/> <br/>

16
yarn.lock
View file

@ -1443,7 +1443,7 @@
dependencies: dependencies:
"@floating-ui/utils" "^0.1.1" "@floating-ui/utils" "^0.1.1"
"@floating-ui/dom@^1.3.0": "@floating-ui/dom@^1.5.1":
version "1.5.1" version "1.5.1"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7" resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw== integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==
@ -1452,11 +1452,11 @@
"@floating-ui/utils" "^0.1.1" "@floating-ui/utils" "^0.1.1"
"@floating-ui/react-dom@^2.0.0": "@floating-ui/react-dom@^2.0.0":
version "2.0.1" version "2.0.2"
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91" resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
integrity sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA== integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
dependencies: dependencies:
"@floating-ui/dom" "^1.3.0" "@floating-ui/dom" "^1.5.1"
"@floating-ui/utils@^0.1.1": "@floating-ui/utils@^0.1.1":
version "0.1.1" version "0.1.1"
@ -3064,9 +3064,9 @@
svg2vectordrawable "^2.9.1" svg2vectordrawable "^2.9.1"
"@vector-im/compound-web@^0.2.3": "@vector-im/compound-web@^0.2.3":
version "0.2.15" version "0.2.16"
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.2.15.tgz#89121053cae95cc4fa82b84fc4ebf87cdf75c564" resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.2.16.tgz#cdc578ec846999a7312d572131b5749b2cf7f86f"
integrity sha512-F4ay88XJH9LkGrHcpHyJnqqkWOdYmzwLbTQjbjokKwOPeDvcLJDZkTyRR03GbU8Ir/tlGYSx0TbrXA5XQI0g3A== integrity sha512-3ffijtHf4ibjLPsRoawTchf+DyaGbxtN6h/9WRvdOSTv+ML7oR7Aoo+jAPSTN+rNFuCIHKrayHJLl2YJOdeH8Q==
dependencies: dependencies:
"@radix-ui/react-form" "^0.0.3" "@radix-ui/react-form" "^0.0.3"
"@radix-ui/react-tooltip" "^1.0.6" "@radix-ui/react-tooltip" "^1.0.6"