chore: `Contextualbar` as `dialog` instead of `aside` (#31978)

apps/meteor/client/components/Contextualbar/Contextualbar.tsx

@@ -1,17 +0,0 @@
-import { Contextualbar as ContextualbarComponent } from '@rocket.chat/fuselage';
-import { useLayoutSizes, useLayoutContextualBarPosition } from '@rocket.chat/ui-contexts';
-import type { FC, ComponentProps } from 'react';
-import React, { memo } from 'react';
-
-const Contextualbar: FC<ComponentProps<typeof ContextualbarComponent>> = ({ children, bg = 'room', ...props }) => {
-	const sizes = useLayoutSizes();
-	const position = useLayoutContextualBarPosition();
-
-	return (
-		<ContextualbarComponent bg={bg} width={sizes.contextualBar} position={position} {...props}>
-			{children}
-		</ContextualbarComponent>
-	);
-};
-
-export default memo(Contextualbar);

apps/meteor/client/components/Contextualbar/ContextualbarDialog.tsx

@@ -0,0 +1,42 @@
+import { Contextualbar } from '@rocket.chat/fuselage';
+import { useLayoutSizes, useLayoutContextualBarPosition } from '@rocket.chat/ui-contexts';
+import type { ComponentProps, KeyboardEvent } from 'react';
+import React, { useCallback, useRef } from 'react';
+import type { AriaDialogProps } from 'react-aria';
+import { FocusScope, useDialog } from 'react-aria';
+
+import { useRoomToolbox } from '../../views/room/contexts/RoomToolboxContext';
+
+type ContextualbarDialogProps = AriaDialogProps & ComponentProps<typeof Contextualbar>;
+
+const ContextualbarDialog = (props: ContextualbarDialogProps) => {
+	const ref = useRef(null);
+	const { dialogProps } = useDialog({ 'aria-labelledby': 'contextualbarTitle', ...props }, ref);
+	const sizes = useLayoutSizes();
+	const position = useLayoutContextualBarPosition();
+	const { closeTab } = useRoomToolbox();
+
+	const callbackRef = useCallback(
+		(node) => {
+			if (!node) {
+				return;
+			}
+
+			ref.current = node;
+			node.addEventListener('keydown', (e: KeyboardEvent) => {
+				if (e.key === 'Escape') {
+					closeTab();
+				}
+			});
+		},
+		[closeTab],
+	);
+
+	return (
+		<FocusScope autoFocus restoreFocus>
+			<Contextualbar ref={callbackRef} width={sizes.contextualBar} position={position} {...dialogProps} {...props} />
+		</FocusScope>
+	);
+};
+
+export default ContextualbarDialog;

apps/meteor/client/components/Contextualbar/ContextualbarTitle.tsx

@@ -0,0 +1,9 @@
+import { ContextualbarTitle as ContextualbarTitleComponent } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+const ContextualbarTitle = (props: ComponentProps<typeof ContextualbarTitleComponent>) => (
+	<ContextualbarTitleComponent id='contextualbarTitle' {...props} />
+);
+
+export default ContextualbarTitle;

apps/meteor/client/components/Contextualbar/index.ts

@@ -1,23 +1,25 @@
 import {
+	Contextualbar,
 	ContextualbarAction,
 	ContextualbarActions,
 	ContextualbarContent,
 	ContextualbarSkeleton,
 	ContextualbarIcon,
 	ContextualbarFooter,
-	ContextualbarTitle,
 	ContextualbarEmptyContent,
 } from '@rocket.chat/fuselage';
 
-import Contextualbar from './Contextualbar';
 import ContextualbarBack from './ContextualbarBack';
 import ContextualbarClose from './ContextualbarClose';
+import ContextualbarDialog from './ContextualbarDialog';
 import ContextualbarHeader from './ContextualbarHeader';
 import ContextualbarInnerContent from './ContextualbarInnerContent';
 import ContextualbarScrollableContent from './ContextualbarScrollableContent';
+import ContextualbarTitle from './ContextualbarTitle';
 
 export {
 	Contextualbar,
+	ContextualbarDialog,
 	ContextualbarHeader,
 	ContextualbarAction,
 	ContextualbarActions,

apps/meteor/client/components/UserInfo/UserInfo.tsx

@@ -75,7 +75,7 @@ const UserInfo = ({
 					</InfoPanel.Avatar>
 				)}
 
-				{actions && <InfoPanel.Section>{actions}</InfoPanel.Section>}
+				{actions && <InfoPanel.ActionGroup>{actions}</InfoPanel.ActionGroup>}
 
 				<InfoPanel.Section>
 					{userDisplayName && <InfoPanel.Title icon={status} title={userDisplayName} />}

apps/meteor/client/views/admin/users/AdminUsersPage.tsx

@@ -63,7 +63,7 @@ const UsersPage = (): ReactElement => {
 				</PageContent>
 			</Page>
 			{context && (
-				<Contextualbar is='aside' aria-labelledby=''>
+				<Contextualbar>
 					<ContextualbarHeader>
 						{context === 'upgrade' && <ContextualbarIcon name='user-plus' />}
 						<ContextualbarTitle>

apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx

@@ -1,5 +1,5 @@
 import type { IGroupVideoConference } from '@rocket.chat/core-typings';
-import { Box, States, StatesIcon, StatesTitle, StatesSubtitle } from '@rocket.chat/fuselage';
+import { Box, States, StatesIcon, StatesTitle, StatesSubtitle, Throbber } from '@rocket.chat/fuselage';
 import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -7,7 +7,6 @@ import React from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 import {
-	ContextualbarSkeleton,
 	ContextualbarHeader,
 	ContextualbarIcon,
 	ContextualbarTitle,
@@ -36,10 +35,6 @@ const VideoConfList = ({ onClose, total, videoConfs, loading, error, reload, loa
 		debounceDelay: 200,
 	});
 
-	if (loading) {
-		return <ContextualbarSkeleton />;
-	}
-
 	return (
 		<>
 			<ContextualbarHeader>
@@ -49,6 +44,11 @@ const VideoConfList = ({ onClose, total, videoConfs, loading, error, reload, loa
 			</ContextualbarHeader>
 
 			<ContextualbarContent paddingInline={0} ref={ref}>
+				{loading && (
+					<Box pi={24} pb={12}>
+						<Throbber size='x12' />
+					</Box>
+				)}
 				{(total === 0 || error) && (
 					<Box display='flex' flexDirection='column' justifyContent='center' height='100%'>
 						{error && (
@@ -58,7 +58,7 @@ const VideoConfList = ({ onClose, total, videoConfs, loading, error, reload, loa
 								<StatesSubtitle>{getErrorMessage(error)}</StatesSubtitle>
 							</States>
 						)}
-						{!error && total === 0 && (
+						{!loading && total === 0 && (
 							<ContextualbarEmptyContent
 								icon='phone'
 								title={t('No_history')}
@@ -67,22 +67,28 @@ const VideoConfList = ({ onClose, total, videoConfs, loading, error, reload, loa
 						)}
 					</Box>
 				)}
-				{videoConfs.length > 0 && (
-					<Box flexGrow={1} flexShrink={1} overflow='hidden' display='flex'>
+				<Box flexGrow={1} flexShrink={1} overflow='hidden' display='flex'>
+					{videoConfs.length > 0 && (
 						<Virtuoso
 							style={{
 								height: blockSize,
 								width: inlineSize,
 							}}
 							totalCount={total}
-							endReached={(start): unknown => loadMoreItems(start, Math.min(50, total - start))}
+							endReached={
+								loading
+									? (): void => undefined
+									: (start) => {
+											loadMoreItems(start, Math.min(50, total - start));
+									  }
+							}
 							overscan={25}
 							data={videoConfs}
 							components={{ Scroller: VirtuosoScrollbars }}
 							itemContent={(_index, data): ReactElement => <VideoConfListItem videoConfData={data} reload={reload} />}
 						/>
-					</Box>
-				)}
+					)}
+				</Box>
 			</ContextualbarContent>
 		</>
 	);

apps/meteor/client/views/room/layout/RoomLayout.tsx

@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
 import React, { Suspense } from 'react';
 
-import { Contextualbar } from '../../../components/Contextualbar';
+import { ContextualbarDialog } from '../../../components/Contextualbar';
 import HeaderSkeleton from '../Header/HeaderSkeleton';
 
 type RoomLayoutProps = {
@@ -23,9 +23,9 @@ const RoomLayout = ({ header, body, footer, aside, ...props }: RoomLayoutProps):
 				{footer && <Suspense fallback={null}>{footer}</Suspense>}
 			</Box>
 			{aside && (
-				<Contextualbar is='aside'>
+				<ContextualbarDialog>
 					<Suspense fallback={null}>{aside}</Suspense>
-				</Contextualbar>
+				</ContextualbarDialog>
 			)}
 		</Box>
 	</Box>

apps/meteor/ee/server/services/package.json

@@ -50,7 +50,7 @@
 		"ws": "^8.8.1"
 	},
 	"devDependencies": {
-		"@rocket.chat/icons": "^0.33.0",
+		"@rocket.chat/icons": "^0.34.0",
 		"@types/cookie": "^0.5.3",
 		"@types/cookie-parser": "^1.4.5",
 		"@types/ejson": "^2.2.1",

apps/meteor/package.json

@@ -242,15 +242,15 @@
 		"@rocket.chat/favicon": "workspace:^",
 		"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.2",
 		"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.3",
-		"@rocket.chat/fuselage": "^0.50.1",
+		"@rocket.chat/fuselage": "^0.51.1",
 		"@rocket.chat/fuselage-hooks": "^0.33.0",
 		"@rocket.chat/fuselage-polyfills": "~0.31.25",
-		"@rocket.chat/fuselage-toastbar": "~0.31.25",
+		"@rocket.chat/fuselage-toastbar": "^0.31.26",
 		"@rocket.chat/fuselage-tokens": "^0.33.0",
 		"@rocket.chat/fuselage-ui-kit": "workspace:^",
 		"@rocket.chat/gazzodown": "workspace:^",
 		"@rocket.chat/i18n": "workspace:^",
-		"@rocket.chat/icons": "^0.33.0",
+		"@rocket.chat/icons": "^0.34.0",
 		"@rocket.chat/instance-status": "workspace:^",
 		"@rocket.chat/jwt": "workspace:^",
 		"@rocket.chat/layout": "~0.31.26",

apps/meteor/tests/e2e/channel-management.spec.ts

@@ -122,7 +122,7 @@ test.describe.serial('channel-management', () => {
 		await poHomeChannel.tabs.room.btnSave.click();
 	});
 
-	test('should edit name of "targetChannel"', async ({ page }) => {
+	test('should edit name of targetChannel', async ({ page }) => {
 		await poHomeChannel.sidenav.openChat(targetChannel);
 		await poHomeChannel.tabs.btnRoomInfo.click();
 		await poHomeChannel.tabs.room.btnEdit.click();
@@ -152,9 +152,9 @@ test.describe.serial('channel-management', () => {
 		await poHomeChannel.sidenav.openChat(targetChannel);
 		await page.getByRole('button', { name: targetChannel }).first().focus();
 		await page.keyboard.press('Space');
-		await page.getByRole('complementary').waitFor();
+		await page.getByRole('dialog').waitFor();
 	
-		await expect(page.getByRole('complementary')).toBeVisible();
+		await expect(page.getByRole('dialog')).toBeVisible();
 	});
 
 	test('should create a discussion using the message composer', async ({ page }) => {

apps/meteor/tests/e2e/federation/page-objects/fragments/home-content.ts

@@ -232,7 +232,7 @@ export class FederationHomeContent {
 	}
 
 	get threadInputMessage(): Locator {
-		return this.page.locator('//main//aside >> [name="msg"]').last();
+		return this.page.getByRole('dialog').locator('[name="msg"]').last();
 	}
 
 	async sendFileMessage(fileName: string): Promise<void> {
@@ -240,7 +240,7 @@ export class FederationHomeContent {
 	}
 
 	async sendThreadMessage(message: string): Promise<void> {
-		await this.page.locator('//main//aside >> [name="msg"]').last().fill(message);
+		await this.page.getByRole('dialog').locator('[name="msg"]').last().fill(message);
 		await this.page.keyboard.press('Enter');
 	}
 
@@ -251,7 +251,7 @@ export class FederationHomeContent {
 	}
 
 	threadSendToChannelAlso(): Locator {
-		return this.page.locator('//main//aside >> [name="alsoSendThreadToChannel"]');
+		return this.page.getByRole('dialog').locator('label', { hasText: 'Also send to channel' });
 	}
 
 	async quoteMessage(message: string): Promise<void> {
@@ -262,14 +262,14 @@ export class FederationHomeContent {
 	}
 
 	async openLastThreadMessageMenu(): Promise<void> {
-		await this.page.locator('//main//aside >> [data-qa-type="message"]').last().hover();
+		await this.page.getByRole('dialog').locator('[data-qa-type="message"]').last().hover();
 		await this.page
-			.locator('//main//aside >> [data-qa-type="message"]')
+			.getByRole('dialog').locator('[data-qa-type="message"]')
 			.last()
 			.locator('[data-qa-type="message-action-menu"][data-qa-id="menu"]')
 			.waitFor();
 		await this.page
-			.locator('//main//aside >> [data-qa-type="message"]')
+			.getByRole('dialog').locator('[data-qa-type="message"]')
 			.last()
 			.locator('[data-qa-type="message-action-menu"][data-qa-id="menu"]')
 			.click();

apps/meteor/tests/e2e/federation/page-objects/fragments/home-flextab-room.ts

@@ -20,19 +20,19 @@ export class FederationHomeFlextabRoom {
 	}
 
 	get inputName(): Locator {
-		return this.page.locator('//aside//label[contains(text(), "Name")]/..//input');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Name' });
 	}
 
 	get inputTopic(): Locator {
-		return this.page.locator('//main//aside//label[contains(text(), "Topic")]/..//textarea');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Topic' });
 	}
 
 	get inputAnnouncement(): Locator {
-		return this.page.locator('//main//aside//label[contains(text(), "Announcement")]/..//textarea');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Announcement' });
 	}
 
 	get inputDescription(): Locator {
-		return this.page.locator('//main//aside//label[contains(text(), "Description")]/..//textarea');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Description' });
 	}
 
 	get checkboxReadOnly(): Locator {

apps/meteor/tests/e2e/page-objects/fragments/home-content.ts

@@ -240,13 +240,13 @@ export class HomeContent {
 	}
 
 	async openLastThreadMessageMenu(): Promise<void> {
-		await this.page.locator('//main//aside >> [data-qa-type="message"]').last().hover();
-		await this.page.locator('//main//aside >> [data-qa-type="message"]').last().locator('role=button[name="More"]').waitFor();
-		await this.page.locator('//main//aside >> [data-qa-type="message"]').last().locator('role=button[name="More"]').click();
+		await this.page.getByRole('dialog').locator('[data-qa-type="message"]').last().hover();
+		await this.page.getByRole('dialog').locator('[data-qa-type="message"]').last().locator('role=button[name="More"]').waitFor();
+		await this.page.getByRole('dialog').locator('[data-qa-type="message"]').last().locator('role=button[name="More"]').click();
 	}
 
 	async toggleAlsoSendThreadToChannel(isChecked: boolean): Promise<void> {
-		await this.page.locator('//main//aside >> [name="alsoSendThreadToChannel"]').setChecked(isChecked);
+		await this.page.getByRole('dialog').locator('[name="alsoSendThreadToChannel"]').setChecked(isChecked);
 	}
 
 	get lastSystemMessageBody(): Locator {

apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts

@@ -23,7 +23,7 @@ export class HomeFlextabMembers {
 		await this.page.locator('role=button[name="More"]').click();
 		await this.page.locator('role=menuitem[name="Mute user"]').click();
 		await this.page.locator('.rcx-modal .rcx-button--danger').click();
-		await this.page.locator('(//main//aside/h3//button)[1]').click();
+		await this.page.getByRole('dialog').getByRole('button').first().click();
 	}
 
 	async setUserAsModerator(username: string) {

apps/meteor/tests/e2e/page-objects/fragments/home-flextab-room.ts

@@ -12,19 +12,19 @@ export class HomeFlextabRoom {
 	}
 
 	get inputName(): Locator {
-		return this.page.locator('//aside//label[contains(text(), "Name")]/..//input');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Name' });
 	}
 
 	get inputTopic(): Locator {
-		return this.page.locator('//main//aside//label[contains(text(), "Topic")]/..//textarea');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Topic' });
 	}
 
 	get inputAnnouncement(): Locator {
-		return this.page.locator('//main//aside//label[contains(text(), "Announcement")]/..//textarea');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Announcement' });
 	}
 
 	get inputDescription(): Locator {
-		return this.page.locator('//main//aside//label[contains(text(), "Description")]/..//textarea');
+		return this.page.getByRole('dialog').getByRole('textbox', { name: 'Description' });
 	}
 
 	get checkboxReadOnly(): Locator {

apps/meteor/tests/e2e/team-management.spec.ts

@@ -87,7 +87,7 @@ test.describe.serial('teams-management', () => {
 		await poHomeTeam.tabs.channels.inputChannels.type(targetChannel, { delay: 100 });
 		await page.locator(`.rcx-option__content:has-text("${targetChannel}")`).click();
 		await poHomeTeam.tabs.channels.btnAdd.click();
-		await expect(page.locator('//main//aside >> li')).toContainText(targetChannel);
+		await expect(page.getByRole('dialog').getByRole('listitem')).toContainText(targetChannel);
 	});
 
 	test('should access team channel through "targetTeam" header', async ({ page }) => {

apps/meteor/tests/e2e/threads.spec.ts

@@ -24,7 +24,7 @@ test.describe.serial('Threads', () => {
 		await expect(page).toHaveURL(/.*thread/);
 
 		await poHomeChannel.content.toggleAlsoSendThreadToChannel(true);
-		await page.locator('//main//aside >> [name="msg"]').last().fill('This is a thread message also sent in channel');
+		await page.getByRole('dialog').locator('[name="msg"]').last().fill('This is a thread message also sent in channel');
 		await page.keyboard.press('Enter');
 		await expect(poHomeChannel.content.lastThreadMessageText).toContainText('This is a thread message also sent in channel');
 		await expect(poHomeChannel.content.lastUserMessage).toContainText('This is a thread message also sent in channel');
@@ -108,7 +108,7 @@ test.describe.serial('Threads', () => {
 		});
 
 		test('expect quote the thread message', async ({ page }) => {
-			await page.locator('//main//aside >> [data-qa-type="message"]').last().hover();
+			await page.getByRole('dialog').locator('[data-qa-type="message"]').last().hover();
 			await page.locator('role=button[name="Quote"]').click();
 			await page.locator('[name="msg"]').last().fill('this is a quote message');
 			await page.keyboard.press('Enter');
@@ -144,7 +144,7 @@ test.describe.serial('Threads', () => {
 
 		test('expect close thread if has only one message and user press escape', async ({ page }) => {
 			await expect(page).toHaveURL(/.*thread/);
-			await expect(page.locator('//main//aside >> [data-qa-type="message"]')).toBeVisible();
+			await expect(page.getByRole('dialog').locator('[data-qa-type="message"]')).toBeVisible();
 			await expect(page.locator('[name="msg"]').last()).toBeFocused();
 			await page.keyboard.press('Escape');
 			await expect(page).not.toHaveURL(/.*thread/);

ee/packages/ui-theming/package.json

@@ -4,9 +4,9 @@
 	"private": true,
 	"devDependencies": {
 		"@rocket.chat/css-in-js": "~0.31.25",
-		"@rocket.chat/fuselage": "^0.50.1",
+		"@rocket.chat/fuselage": "^0.51.1",
 		"@rocket.chat/fuselage-hooks": "^0.33.0",
-		"@rocket.chat/icons": "^0.33.0",
+		"@rocket.chat/icons": "^0.34.0",
 		"@rocket.chat/ui-contexts": "workspace:~",
 		"@storybook/addon-actions": "~6.5.16",
 		"@storybook/addon-docs": "~6.5.16",

packages/core-services/package.json

@@ -36,7 +36,7 @@
 	"dependencies": {
 		"@rocket.chat/apps-engine": "1.42.0-alpha.619",
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/icons": "^0.33.0",
+		"@rocket.chat/icons": "^0.34.0",
 		"@rocket.chat/message-parser": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",

packages/core-typings/package.json

@@ -24,7 +24,7 @@
 	],
 	"dependencies": {
 		"@rocket.chat/apps-engine": "1.42.0-alpha.619",
-		"@rocket.chat/icons": "^0.33.0",
+		"@rocket.chat/icons": "^0.34.0",
 		"@rocket.chat/message-parser": "workspace:^",
 		"@rocket.chat/ui-kit": "workspace:~"
 	},

packages/fuselage-ui-kit/package.json

@@ -63,10 +63,10 @@
     "@babel/preset-typescript": "~7.22.15",
     "@rocket.chat/apps-engine": "1.42.0-alpha.619",
     "@rocket.chat/eslint-config": "workspace:^",
-    "@rocket.chat/fuselage": "^0.50.1",
+    "@rocket.chat/fuselage": "^0.51.1",
     "@rocket.chat/fuselage-hooks": "^0.33.0",
     "@rocket.chat/fuselage-polyfills": "~0.31.25",
-    "@rocket.chat/icons": "^0.33.0",
+    "@rocket.chat/icons": "^0.34.0",
     "@rocket.chat/prettier-config": "~0.31.25",
     "@rocket.chat/styled": "~0.31.25",
     "@rocket.chat/ui-avatar": "workspace:^",

packages/gazzodown/package.json

@@ -6,7 +6,7 @@
 		"@babel/core": "~7.22.20",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/css-in-js": "~0.31.25",
-		"@rocket.chat/fuselage": "^0.50.1",
+		"@rocket.chat/fuselage": "^0.51.1",
 		"@rocket.chat/fuselage-tokens": "^0.33.0",
 		"@rocket.chat/message-parser": "workspace:^",
 		"@rocket.chat/styled": "~0.31.25",

packages/ui-avatar/package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"devDependencies": {
 		"@babel/core": "~7.22.20",
-		"@rocket.chat/fuselage": "^0.50.1",
+		"@rocket.chat/fuselage": "^0.51.1",
 		"@rocket.chat/ui-contexts": "workspace:^",
 		"@types/babel__core": "~7.20.3",
 		"@types/react": "~17.0.69",

packages/ui-client/package.json

@@ -6,9 +6,9 @@
 		"@babel/core": "~7.22.20",
 		"@react-aria/toolbar": "^3.0.0-beta.1",
 		"@rocket.chat/css-in-js": "~0.31.25",
-		"@rocket.chat/fuselage": "^0.50.1",
+		"@rocket.chat/fuselage": "^0.51.1",
 		"@rocket.chat/fuselage-hooks": "^0.33.0",
-		"@rocket.chat/icons": "^0.33.0",
+		"@rocket.chat/icons": "^0.34.0",
 		"@rocket.chat/mock-providers": "workspace:^",
 		"@rocket.chat/ui-contexts": "workspace:~",
 		"@storybook/addon-actions": "~6.5.16",

packages/ui-composer/package.json

@@ -6,8 +6,8 @@
     "@babel/core": "~7.22.20",
     "@react-aria/toolbar": "^3.0.0-beta.1",
     "@rocket.chat/eslint-config": "workspace:^",
-    "@rocket.chat/fuselage": "^0.50.1",
-    "@rocket.chat/icons": "^0.33.0",
+    "@rocket.chat/fuselage": "^0.51.1",
+    "@rocket.chat/icons": "^0.34.0",
     "@storybook/addon-actions": "~6.5.16",
     "@storybook/addon-docs": "~6.5.16",
     "@storybook/addon-essentials": "~6.5.16",

packages/ui-video-conf/package.json

@@ -6,9 +6,9 @@
 		"@babel/core": "~7.22.20",
 		"@rocket.chat/css-in-js": "~0.31.25",
 		"@rocket.chat/eslint-config": "workspace:^",
-		"@rocket.chat/fuselage": "^0.50.1",
+		"@rocket.chat/fuselage": "^0.51.1",
 		"@rocket.chat/fuselage-hooks": "^0.33.0",
-		"@rocket.chat/icons": "^0.33.0",
+		"@rocket.chat/icons": "^0.34.0",
 		"@rocket.chat/styled": "~0.31.25",
 		"@rocket.chat/ui-avatar": "workspace:^",
 		"@rocket.chat/ui-contexts": "workspace:^",

packages/uikit-playground/package.json

@@ -15,13 +15,13 @@
     "@codemirror/tooltip": "^0.19.16",
     "@lezer/highlight": "^1.1.6",
     "@rocket.chat/css-in-js": "~0.31.25",
-    "@rocket.chat/fuselage": "^0.50.1",
+    "@rocket.chat/fuselage": "^0.51.1",
     "@rocket.chat/fuselage-hooks": "^0.33.0",
     "@rocket.chat/fuselage-polyfills": "~0.31.25",
-    "@rocket.chat/fuselage-toastbar": "^0.31.25",
+    "@rocket.chat/fuselage-toastbar": "^0.31.26",
     "@rocket.chat/fuselage-tokens": "^0.33.0",
     "@rocket.chat/fuselage-ui-kit": "workspace:~",
-    "@rocket.chat/icons": "^0.33.0",
+    "@rocket.chat/icons": "^0.34.0",
     "@rocket.chat/logo": "^0.31.29",
     "@rocket.chat/styled": "~0.31.25",
     "@rocket.chat/ui-avatar": "workspace:^",

yarn.lock

@@ -8435,7 +8435,7 @@ __metadata:
     "@rocket.chat/apps-engine": 1.42.0-alpha.619
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/icons": ^0.33.0
+    "@rocket.chat/icons": ^0.34.0
     "@rocket.chat/message-parser": "workspace:^"
     "@rocket.chat/models": "workspace:^"
     "@rocket.chat/rest-typings": "workspace:^"
@@ -8460,7 +8460,7 @@ __metadata:
   dependencies:
     "@rocket.chat/apps-engine": 1.42.0-alpha.619
     "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/icons": ^0.33.0
+    "@rocket.chat/icons": ^0.34.0
     "@rocket.chat/message-parser": "workspace:^"
     "@rocket.chat/ui-kit": "workspace:~"
     eslint: ~8.45.0
@@ -8701,9 +8701,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-toastbar@npm:^0.31.25, @rocket.chat/fuselage-toastbar@npm:~0.31.25":
-  version: 0.31.25
-  resolution: "@rocket.chat/fuselage-toastbar@npm:0.31.25"
+"@rocket.chat/fuselage-toastbar@npm:^0.31.26":
+  version: 0.31.26
+  resolution: "@rocket.chat/fuselage-toastbar@npm:0.31.26"
   peerDependencies:
     "@rocket.chat/fuselage": "*"
     "@rocket.chat/fuselage-hooks": "*"
@@ -8711,7 +8711,7 @@ __metadata:
     "@rocket.chat/styled": "*"
     react: ^17.0.2
     react-dom: ^17.0.2
-  checksum: 0dcc6e38c45594efefefe5763ef5bf98296cdf2f9b189f2f0c062d1d9bedf460b10508ccaaa689e2a656876f224eb9c9ac74e48fcd6acacb794c6fab3e8d4c33
+  checksum: 92b80ee312b03cfd36f3fbbceafaf81f57ce1c7bbe3232cf93ea1aeb26f73ec034f4eded9b57e1fc85e3141609af02af3ffcaa15f82c57163e398eef22fc1467
   languageName: node
   linkType: hard
 
@@ -8732,11 +8732,11 @@ __metadata:
     "@babel/preset-typescript": ~7.22.15
     "@rocket.chat/apps-engine": 1.42.0-alpha.619
     "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/fuselage": ^0.50.1
+    "@rocket.chat/fuselage": ^0.51.1
     "@rocket.chat/fuselage-hooks": ^0.33.0
     "@rocket.chat/fuselage-polyfills": ~0.31.25
     "@rocket.chat/gazzodown": "workspace:^"
-    "@rocket.chat/icons": ^0.33.0
+    "@rocket.chat/icons": ^0.34.0
     "@rocket.chat/prettier-config": ~0.31.25
     "@rocket.chat/styled": ~0.31.25
     "@rocket.chat/ui-avatar": "workspace:^"
@@ -8787,9 +8787,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rocket.chat/fuselage@npm:^0.50.1":
-  version: 0.50.1
-  resolution: "@rocket.chat/fuselage@npm:0.50.1"
+"@rocket.chat/fuselage@npm:^0.51.1":
+  version: 0.51.1
+  resolution: "@rocket.chat/fuselage@npm:0.51.1"
   dependencies:
     "@rocket.chat/css-in-js": ^0.31.25
     "@rocket.chat/css-supports": ^0.31.25
@@ -8807,7 +8807,7 @@ __metadata:
     react: ^17.0.2
     react-dom: ^17.0.2
     react-virtuoso: 1.2.4
-  checksum: 56a8599e1220a504da99ae7b8157933fce704e3b0fcbf4e834385d19ff09c3a3f01ff3aec535e32a5523b5768bfeefbb318af2a3e48fea4b502c867acb2bea52
+  checksum: f7f49a59d67a485a4aff8aa2684fb0bb290c73b643763c867da23ed00c19994b24b994c554d2bd63d48657ca7fdfbff9bf34bbe2436376972809b56cb15ee456
   languageName: node
   linkType: hard
 
@@ -8818,7 +8818,7 @@ __metadata:
     "@babel/core": ~7.22.20
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/css-in-js": ~0.31.25
-    "@rocket.chat/fuselage": ^0.50.1
+    "@rocket.chat/fuselage": ^0.51.1
     "@rocket.chat/fuselage-tokens": ^0.33.0
     "@rocket.chat/message-parser": "workspace:^"
     "@rocket.chat/styled": ~0.31.25
@@ -8891,10 +8891,10 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rocket.chat/icons@npm:^0.33.0":
-  version: 0.33.0
-  resolution: "@rocket.chat/icons@npm:0.33.0"
-  checksum: 83dcc3fe1ad8faa21168216bd3822316bb760cee0da2e51b61e99519aa6cd9426a425304cbb2ff85b6ef0c16e448885964ec89bd37478b66aeb9671521ed4857
+"@rocket.chat/icons@npm:^0.34.0":
+  version: 0.34.0
+  resolution: "@rocket.chat/icons@npm:0.34.0"
+  checksum: d84af3174b3ba75639be8ebbe31a4bb5ca6467a9d2a3db6e4d38589dfa378f0fdb118fd337dd938dfb0f8fd493352e53102956e96f310b6dbcb69d3b72a3266c
   languageName: node
   linkType: hard
 
@@ -9178,15 +9178,15 @@ __metadata:
     "@rocket.chat/favicon": "workspace:^"
     "@rocket.chat/forked-matrix-appservice-bridge": ^4.0.2
     "@rocket.chat/forked-matrix-bot-sdk": ^0.6.0-beta.3
-    "@rocket.chat/fuselage": ^0.50.1
+    "@rocket.chat/fuselage": ^0.51.1
     "@rocket.chat/fuselage-hooks": ^0.33.0
     "@rocket.chat/fuselage-polyfills": ~0.31.25
-    "@rocket.chat/fuselage-toastbar": ~0.31.25
+    "@rocket.chat/fuselage-toastbar": ^0.31.26
     "@rocket.chat/fuselage-tokens": ^0.33.0
     "@rocket.chat/fuselage-ui-kit": "workspace:^"
     "@rocket.chat/gazzodown": "workspace:^"
     "@rocket.chat/i18n": "workspace:^"
-    "@rocket.chat/icons": ^0.33.0
+    "@rocket.chat/icons": ^0.34.0
     "@rocket.chat/instance-status": "workspace:^"
     "@rocket.chat/jwt": "workspace:^"
     "@rocket.chat/layout": ~0.31.26
@@ -10058,7 +10058,7 @@ __metadata:
   resolution: "@rocket.chat/ui-avatar@workspace:packages/ui-avatar"
   dependencies:
     "@babel/core": ~7.22.20
-    "@rocket.chat/fuselage": ^0.50.1
+    "@rocket.chat/fuselage": ^0.51.1
     "@rocket.chat/ui-contexts": "workspace:^"
     "@types/babel__core": ~7.20.3
     "@types/react": ~17.0.69
@@ -10084,9 +10084,9 @@ __metadata:
     "@babel/core": ~7.22.20
     "@react-aria/toolbar": ^3.0.0-beta.1
     "@rocket.chat/css-in-js": ~0.31.25
-    "@rocket.chat/fuselage": ^0.50.1
+    "@rocket.chat/fuselage": ^0.51.1
     "@rocket.chat/fuselage-hooks": ^0.33.0
-    "@rocket.chat/icons": ^0.33.0
+    "@rocket.chat/icons": ^0.34.0
     "@rocket.chat/mock-providers": "workspace:^"
     "@rocket.chat/ui-contexts": "workspace:~"
     "@storybook/addon-actions": ~6.5.16
@@ -10137,8 +10137,8 @@ __metadata:
     "@babel/core": ~7.22.20
     "@react-aria/toolbar": ^3.0.0-beta.1
     "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/fuselage": ^0.50.1
-    "@rocket.chat/icons": ^0.33.0
+    "@rocket.chat/fuselage": ^0.51.1
+    "@rocket.chat/icons": ^0.34.0
     "@storybook/addon-actions": ~6.5.16
     "@storybook/addon-docs": ~6.5.16
     "@storybook/addon-essentials": ~6.5.16
@@ -10229,9 +10229,9 @@ __metadata:
   resolution: "@rocket.chat/ui-theming@workspace:ee/packages/ui-theming"
   dependencies:
     "@rocket.chat/css-in-js": ~0.31.25
-    "@rocket.chat/fuselage": ^0.50.1
+    "@rocket.chat/fuselage": ^0.51.1
     "@rocket.chat/fuselage-hooks": ^0.33.0
-    "@rocket.chat/icons": ^0.33.0
+    "@rocket.chat/icons": ^0.34.0
     "@rocket.chat/ui-contexts": "workspace:~"
     "@storybook/addon-actions": ~6.5.16
     "@storybook/addon-docs": ~6.5.16
@@ -10272,9 +10272,9 @@ __metadata:
     "@rocket.chat/css-in-js": ~0.31.25
     "@rocket.chat/emitter": ~0.31.25
     "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/fuselage": ^0.50.1
+    "@rocket.chat/fuselage": ^0.51.1
     "@rocket.chat/fuselage-hooks": ^0.33.0
-    "@rocket.chat/icons": ^0.33.0
+    "@rocket.chat/icons": ^0.34.0
     "@rocket.chat/styled": ~0.31.25
     "@rocket.chat/ui-avatar": "workspace:^"
     "@rocket.chat/ui-contexts": "workspace:^"
@@ -10317,13 +10317,13 @@ __metadata:
     "@codemirror/tooltip": ^0.19.16
     "@lezer/highlight": ^1.1.6
     "@rocket.chat/css-in-js": ~0.31.25
-    "@rocket.chat/fuselage": ^0.50.1
+    "@rocket.chat/fuselage": ^0.51.1
     "@rocket.chat/fuselage-hooks": ^0.33.0
     "@rocket.chat/fuselage-polyfills": ~0.31.25
-    "@rocket.chat/fuselage-toastbar": ^0.31.25
+    "@rocket.chat/fuselage-toastbar": ^0.31.26
     "@rocket.chat/fuselage-tokens": ^0.33.0
     "@rocket.chat/fuselage-ui-kit": "workspace:~"
-    "@rocket.chat/icons": ^0.33.0
+    "@rocket.chat/icons": ^0.34.0
     "@rocket.chat/logo": ^0.31.29
     "@rocket.chat/styled": ~0.31.25
     "@rocket.chat/ui-avatar": "workspace:^"
@@ -36184,7 +36184,7 @@ __metadata:
     "@rocket.chat/core-services": "workspace:^"
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/emitter": ~0.31.25
-    "@rocket.chat/icons": ^0.33.0
+    "@rocket.chat/icons": ^0.34.0
     "@rocket.chat/message-parser": "workspace:^"
     "@rocket.chat/model-typings": "workspace:^"
     "@rocket.chat/models": "workspace:^"