chore: Upgrade fuselage packages

apps/meteor/client/components/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { SidebarV2 as FuselageSidebar } from '@rocket.chat/fuselage';
+import { Sidebar as FuselageSidebar } from '@rocket.chat/fuselage';
 import type { ComponentPropsWithoutRef } from 'react';
 
 export type SidebarProps = ComponentPropsWithoutRef<typeof FuselageSidebar>;

apps/meteor/client/components/Sidebar/SidebarGenericItem.tsx

@@ -1,4 +1,4 @@
-import { Box, SidebarV2Item } from '@rocket.chat/fuselage';
+import { Box, SidebarItem } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 import { memo } from 'react';
 
@@ -10,11 +10,11 @@ export type SidebarGenericItemProps = {
 };
 
 const SidebarGenericItem = ({ href, active, externalUrl, children, ...props }: SidebarGenericItemProps) => (
-	<SidebarV2Item selected={active} is='a' href={href} {...(externalUrl && { target: '_blank', rel: 'noopener noreferrer' })} {...props}>
+	<SidebarItem selected={active} is='a' href={href} {...(externalUrl && { target: '_blank', rel: 'noopener noreferrer' })} {...props}>
 		<Box display='flex' flexDirection='row' alignItems='center' paddingBlock={8} width='100%'>
 			{children}
 		</Box>
-	</SidebarV2Item>
+	</SidebarItem>
 );
 
 export default memo(SidebarGenericItem);

apps/meteor/client/navbar/NavBarPagesGroup/NavBarItemCreateNew.tsx

@@ -1,4 +1,4 @@
-import { SidebarV2Action } from '@rocket.chat/fuselage';
+import { SidebarAction } from '@rocket.chat/fuselage';
 import { GenericMenu } from '@rocket.chat/ui-client';
 import type { HTMLAttributes } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,7 +12,7 @@ const NavBarItemCreateNew = (props: CreateRoomProps) => {
 
 	const sections = useCreateNewMenu();
 
-	return <GenericMenu icon='plus' sections={sections} title={t('Create_new')} is={SidebarV2Action} {...props} />;
+	return <GenericMenu icon='plus' sections={sections} title={t('Create_new')} is={SidebarAction} {...props} />;
 };
 
 export default NavBarItemCreateNew;

apps/meteor/client/navbar/NavBarPagesGroup/NavBarItemSort.tsx

@@ -1,4 +1,4 @@
-import { SidebarV2Action } from '@rocket.chat/fuselage';
+import { SidebarAction } from '@rocket.chat/fuselage';
 import { GenericMenu } from '@rocket.chat/ui-client';
 import type { HTMLAttributes } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,7 +12,7 @@ const NavBarItemSort = (props: NavBarItemSortProps) => {
 
 	const sections = useSortMenu();
 
-	return <GenericMenu icon='sort' sections={sections} title={t('Display')} selectionMode='multiple' is={SidebarV2Action} {...props} />;
+	return <GenericMenu icon='sort' sections={sections} title={t('Display')} selectionMode='multiple' is={SidebarAction} {...props} />;
 };
 
 export default NavBarItemSort;

apps/meteor/client/navbar/NavBarSearch/NavBarSearchFilterSuggestions.tsx

@@ -5,7 +5,7 @@ import {
 	type NavBarSearchFormValues,
 	type SearchFilterSuggestion,
 } from '@rocket.chat/ai-search';
-import { Box, Icon, SidebarV2Item, SidebarV2ItemIcon, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
+import { Box, Icon, SidebarItem, SidebarItemIcon, SidebarItemTitle } from '@rocket.chat/fuselage';
 import type { MouseEvent, ReactElement } from 'react';
 import { useCallback, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -67,13 +67,13 @@ const NavBarSearchFilterSuggestions = ({ suggestions }: NavBarSearchFilterSugges
 						{t(filterSuggestionGroupLabels[group])}
 					</Box>
 					{groupSuggestions.map((item) => (
-						<SidebarV2Item key={item.key} role='option' onClick={(event) => handleFilterSuggestion(event, item.value)}>
-							<SidebarV2ItemIcon icon={<Icon name={item.icon} size='x16' />} />
-							<SidebarV2ItemTitle>{item.title}</SidebarV2ItemTitle>
+						<SidebarItem key={item.key} role='option' onClick={(event) => handleFilterSuggestion(event, item.value)}>
+							<SidebarItemIcon icon={<Icon name={item.icon} size='x16' />} />
+							<SidebarItemTitle>{item.title}</SidebarItemTitle>
 							<Box color='hint' fontScale='c1' flexShrink={0}>
 								{item.description}
 							</Box>
-						</SidebarV2Item>
+						</SidebarItem>
 					))}
 				</Box>
 			))}

apps/meteor/client/navbar/NavBarSearch/NavBarSearchIntelligentSection.tsx

@@ -1,5 +1,5 @@
 import { emptySearchFilters, serializeSearchQuery, type NavBarSearchFormValues } from '@rocket.chat/ai-search';
-import { Box, Icon, SidebarV2ItemIcon } from '@rocket.chat/fuselage';
+import { Box, Icon, SidebarItemIcon } from '@rocket.chat/fuselage';
 import type { AISearchResult } from '@rocket.chat/rest-typings';
 import { useRouter } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -45,7 +45,7 @@ const NavBarSearchIntelligentSection = ({ items, onSelect, onClose }: NavBarSear
 			<NavBarSearchItem
 				title={t('View_all_results')}
 				avatar={null}
-				icon={<SidebarV2ItemIcon icon={<Icon name='arrow-forward' size='x16' />} />}
+				icon={<SidebarItemIcon icon={<Icon name='arrow-forward' size='x16' />} />}
 				href={searchHref}
 				onClick={onClose}
 			/>

apps/meteor/client/navbar/NavBarSearch/NavBarSearchItem.tsx

@@ -1,4 +1,4 @@
-import { SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
+import { SidebarItem, SidebarItemAvatarWrapper, SidebarItemTitle } from '@rocket.chat/fuselage';
 import type { HTMLAttributes, ReactNode } from 'react';
 
 export type NavBarSearchItemProps = {
@@ -15,13 +15,13 @@ export type NavBarSearchItemProps = {
 
 const NavBarSearchItem = ({ icon, title, avatar, actions, unread, badges, ...props }: NavBarSearchItemProps) => {
 	return (
-		<SidebarV2Item role='option' {...props}>
-			{avatar && <SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>}
+		<SidebarItem role='option' {...props}>
+			{avatar && <SidebarItemAvatarWrapper>{avatar}</SidebarItemAvatarWrapper>}
 			{icon && icon}
-			<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>
+			<SidebarItemTitle unread={unread}>{title}</SidebarItemTitle>
 			{badges && badges}
 			{actions && actions}
-		</SidebarV2Item>
+		</SidebarItem>
 	);
 };
 

apps/meteor/client/navbar/NavBarSearch/NavBarSearchItemSkeleton.tsx

@@ -1,19 +1,19 @@
-import { SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemTitle, Skeleton } from '@rocket.chat/fuselage';
+import { SidebarItem, SidebarItemAvatarWrapper, SidebarItemTitle, Skeleton } from '@rocket.chat/fuselage';
 
 // Placeholder row shown while the server spotlight results are still loading.
 // Decorative only: it has no `role='option'` so keyboard navigation skips it
 // (see useSearchNavigation), and `tabIndex={-1}` + `pointerEvents='none'` keep
 // it out of reach of focus and mouse clicks. Loading is conveyed via aria-busy.
 const NavBarSearchItemSkeleton = () => {
 	return (
-		<SidebarV2Item aria-hidden tabIndex={-1} style={{ pointerEvents: 'none' }}>
-			<SidebarV2ItemAvatarWrapper>
+		<SidebarItem aria-hidden tabIndex={-1} style={{ pointerEvents: 'none' }}>
+			<SidebarItemAvatarWrapper>
 				<Skeleton variant='rect' width={20} height={20} />
-			</SidebarV2ItemAvatarWrapper>
-			<SidebarV2ItemTitle>
+			</SidebarItemAvatarWrapper>
+			<SidebarItemTitle>
 				<Skeleton />
-			</SidebarV2ItemTitle>
-		</SidebarV2Item>
+			</SidebarItemTitle>
+		</SidebarItem>
 	);
 };
 

apps/meteor/client/navbar/NavBarSearch/NavBarSearchItemWithData.tsx

@@ -1,4 +1,4 @@
-import { SidebarV2ItemIcon } from '@rocket.chat/fuselage';
+import { SidebarItemIcon } from '@rocket.chat/fuselage';
 import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -23,7 +23,7 @@ const NavBarSearchItemWithData = ({ room, AvatarTemplate, ...props }: NavBarSear
 
 	const { unreadTitle, showUnread, highlightUnread: highlighted } = useUnreadDisplay(room);
 
-	const icon = <SidebarV2ItemIcon highlighted={highlighted} icon={<RoomIcon room={room} placement='sidebar' size='x20' />} />;
+	const icon = <SidebarItemIcon highlighted={highlighted} icon={<RoomIcon room={room} placement='sidebar' size='x20' />} />;
 
 	return (
 		<NavBarSearchItem

apps/meteor/client/navbar/NavBarSearch/NavBarSearchMessageRow.tsx

@@ -1,4 +1,4 @@
-import { Box, Icon, SidebarV2ItemIcon } from '@rocket.chat/fuselage';
+import { Box, Icon, SidebarItemIcon } from '@rocket.chat/fuselage';
 import type { AISearchResult } from '@rocket.chat/rest-typings';
 import type { ReactElement } from 'react';
 import { memo } from 'react';
@@ -43,7 +43,7 @@ const NavBarSearchMessageRow = ({ item, onClick }: NavBarSearchMessageRowProps):
 			onClick={onClick}
 			title={title}
 			avatar={null}
-			icon={<SidebarV2ItemIcon icon={<Icon name='stars' size='x16' />} />}
+			icon={<SidebarItemIcon icon={<Icon name='stars' size='x16' />} />}
 			actions={
 				roomLabel ? (
 					<Box color='hint' fontScale='c1' withTruncatedText flexShrink={0} maxWidth='x120'>

apps/meteor/client/navbar/NavBarSearch/NavBarSearchUserRow.tsx

@@ -1,4 +1,4 @@
-import { SidebarV2ItemIcon } from '@rocket.chat/fuselage';
+import { SidebarItemIcon } from '@rocket.chat/fuselage';
 import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
 import { useSetting } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactNode } from 'react';
@@ -17,7 +17,7 @@ export type NavBarSearchUserRowProps = {
 const NavBarSearchUserRow = ({ room, id, AvatarTemplate, ...props }: NavBarSearchUserRowProps) => {
 	const useRealName = useSetting('UI_Use_Real_Name');
 	const title = useRealName ? room.fname || room.name : room.name || room.fname || '';
-	const icon = <SidebarV2ItemIcon icon={<ReactiveUserStatus uid={room._id} />} />;
+	const icon = <SidebarItemIcon icon={<ReactiveUserStatus uid={room._id} />} />;
 	const href = roomCoordinator.getRouteLink(room.t, { name: room.name }) || '';
 
 	return <NavBarSearchItem {...props} id={id} href={href} title={title} avatar={AvatarTemplate} icon={icon} />;

apps/meteor/client/portals/SidebarPortal/SidebarPortal.tsx

@@ -12,7 +12,7 @@ const SidebarPortal = ({ children }: SidebarPortalProps) => {
 		return null;
 	}
 
-	return <>{createPortal(<Box className='rcx-sidebar flex-nav'>{children}</Box>, sidebarRoot)}</>;
+	return <>{createPortal(<Box className='sidebar-region-item flex-nav'>{children}</Box>, sidebarRoot)}</>;
 };
 
 export default memo(SidebarPortal);

apps/meteor/client/portals/SidebarPortal/SidebarPortalV2.tsx

@@ -28,7 +28,7 @@ const SidebarPortal = ({ children }: SidebarPortalProps) => {
 		<>
 			{createPortal(
 				<AnimatedVisibility visibility={AnimatedVisibility.UNHIDING}>
-					<Box className='rcx-sidebar flex-nav'>{children}</Box>
+					<Box className='flex-nav'>{children}</Box>
 				</AnimatedVisibility>,
 				sidebarRoot,
 			)}

apps/meteor/client/sidebar/Item/Condensed.tsx

@@ -1,4 +1,4 @@
-import { IconButton, SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemMenu, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
+import { IconButton, SidebarItem, SidebarItemAvatarWrapper, SidebarItemMenu, SidebarItemTitle } from '@rocket.chat/fuselage';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { memo } from 'react';
 
@@ -23,23 +23,23 @@ const Condensed = ({ icon, title, titleIcon, avatar, actions, unread, menu, badg
 	const { mounted: menuVisibility, requestMount, mountNow } = useDeferredMenuMount();
 
 	return (
-		<SidebarV2Item {...props} onFocus={mountNow} onPointerEnter={requestMount}>
-			{avatar && <SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>}
+		<SidebarItem {...props} onFocus={mountNow} onPointerEnter={requestMount}>
+			{avatar && <SidebarItemAvatarWrapper>{avatar}</SidebarItemAvatarWrapper>}
 			{icon}
-			<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>
+			<SidebarItemTitle unread={unread}>{title}</SidebarItemTitle>
 			{titleIcon}
 			{badges}
 			{actions}
 			{menu && (
-				<SidebarV2ItemMenu>
+				<SidebarItemMenu>
 					{menuVisibility ? (
 						menu()
 					) : (
-						<IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-v2-item__menu icon='kebab' onPointerDown={mountNow} />
+						<IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-item__menu icon='kebab' onPointerDown={mountNow} />
 					)}
-				</SidebarV2ItemMenu>
+				</SidebarItemMenu>
 			)}
-		</SidebarV2Item>
+		</SidebarItem>
 	);
 };
 

apps/meteor/client/sidebar/Item/Extended.tsx

@@ -1,12 +1,12 @@
 import {
-	SidebarV2Item,
-	SidebarV2ItemAvatarWrapper,
-	SidebarV2ItemCol,
-	SidebarV2ItemRow,
-	SidebarV2ItemTitle,
-	SidebarV2ItemTimestamp,
-	SidebarV2ItemContent,
-	SidebarV2ItemMenu,
+	SidebarItem,
+	SidebarItemAvatarWrapper,
+	SidebarItemCol,
+	SidebarItemRow,
+	SidebarItemTitle,
+	SidebarItemTimestamp,
+	SidebarItemContent,
+	SidebarItemMenu,
 	IconButton,
 } from '@rocket.chat/fuselage';
 import type { HTMLAttributes, ReactNode } from 'react';
@@ -53,31 +53,31 @@ const Extended = ({
 	const { mounted: menuVisibility, requestMount, mountNow } = useDeferredMenuMount();
 
 	return (
-		<SidebarV2Item href={href} selected={selected} {...props} onFocus={mountNow} onPointerEnter={requestMount}>
-			{avatar && <SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>}
-			<SidebarV2ItemCol>
-				<SidebarV2ItemRow>
+		<SidebarItem href={href} selected={selected} {...props} onFocus={mountNow} onPointerEnter={requestMount}>
+			{avatar && <SidebarItemAvatarWrapper>{avatar}</SidebarItemAvatarWrapper>}
+			<SidebarItemCol>
+				<SidebarItemRow>
 					{icon}
-					<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>
-					{time && <SidebarV2ItemTimestamp>{formatDate(time)}</SidebarV2ItemTimestamp>}
-				</SidebarV2ItemRow>
-				<SidebarV2ItemRow>
-					<SidebarV2ItemContent unread={unread}>{subtitle}</SidebarV2ItemContent>
+					<SidebarItemTitle unread={unread}>{title}</SidebarItemTitle>
+					{time && <SidebarItemTimestamp>{formatDate(time)}</SidebarItemTimestamp>}
+				</SidebarItemRow>
+				<SidebarItemRow>
+					<SidebarItemContent unread={unread}>{subtitle}</SidebarItemContent>
 					{titleIcon}
 					{badges}
 					{actions}
 					{menu && (
-						<SidebarV2ItemMenu>
+						<SidebarItemMenu>
 							{menuVisibility ? (
 								menu()
 							) : (
-								<IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-v2-item__menu icon='kebab' onPointerDown={mountNow} />
+								<IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-item__menu icon='kebab' onPointerDown={mountNow} />
 							)}
-						</SidebarV2ItemMenu>
+						</SidebarItemMenu>
 					)}
-				</SidebarV2ItemRow>
-			</SidebarV2ItemCol>
-		</SidebarV2Item>
+				</SidebarItemRow>
+			</SidebarItemCol>
+		</SidebarItem>
 	);
 };
 

apps/meteor/client/sidebar/Item/Medium.tsx

@@ -1,4 +1,4 @@
-import { IconButton, SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemMenu, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
+import { IconButton, SidebarItem, SidebarItemAvatarWrapper, SidebarItemMenu, SidebarItemTitle } from '@rocket.chat/fuselage';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { memo } from 'react';
 
@@ -22,23 +22,23 @@ const Medium = ({ icon, title, titleIcon, avatar, actions, badges, unread, menu,
 	const { mounted: menuVisibility, requestMount, mountNow } = useDeferredMenuMount();
 
 	return (
-		<SidebarV2Item {...props} onFocus={mountNow} onPointerEnter={requestMount}>
-			<SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>
+		<SidebarItem {...props} onFocus={mountNow} onPointerEnter={requestMount}>
+			<SidebarItemAvatarWrapper>{avatar}</SidebarItemAvatarWrapper>
 			{icon}
-			<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>
+			<SidebarItemTitle unread={unread}>{title}</SidebarItemTitle>
 			{titleIcon}
 			{badges}
 			{actions}
 			{menu && (
-				<SidebarV2ItemMenu>
+				<SidebarItemMenu>
 					{menuVisibility ? (
 						menu()
 					) : (
-						<IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-v2-item__menu icon='kebab' onPointerDown={mountNow} />
+						<IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-item__menu icon='kebab' onPointerDown={mountNow} />
 					)}
-				</SidebarV2ItemMenu>
+				</SidebarItemMenu>
 			)}
-		</SidebarV2Item>
+		</SidebarItem>
 	);
 };
 

apps/meteor/client/sidebar/RoomList/RoomListCollapser.tsx

@@ -1,5 +1,5 @@
 import type { ISubscription } from '@rocket.chat/core-typings';
-import { Badge, SidebarV2CollapseGroup } from '@rocket.chat/fuselage';
+import { Badge, SidebarCollapseGroup } from '@rocket.chat/fuselage';
 import type { HTMLAttributes, KeyboardEvent, MouseEventHandler } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -18,7 +18,7 @@ const RoomListCollapser = ({ groupTitle, unreadCount: unreadGroupCount, collapse
 	const { unreadTitle, unreadVariant, showUnread, unreadCount } = useUnreadDisplay(unreadGroupCount);
 
 	return (
-		<SidebarV2CollapseGroup
+		<SidebarCollapseGroup
 			title={t(groupTitle)}
 			expanded={!collapsedGroups.includes(groupTitle)}
 			badge={

apps/meteor/client/sidebar/RoomList/RoomListRowWrapper.tsx

@@ -1,11 +1,11 @@
-import { SidebarV2ListItem } from '@rocket.chat/fuselage';
+import { SidebarListItem } from '@rocket.chat/fuselage';
 import type { ForwardedRef, HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 
 export type RoomListRoomWrapperProps = HTMLAttributes<HTMLDivElement>;
 
 const RoomListRoomWrapper = forwardRef(function RoomListRoomWrapper(props: RoomListRoomWrapperProps, ref: ForwardedRef<HTMLDivElement>) {
-	return <SidebarV2ListItem ref={ref} {...props} />;
+	return <SidebarListItem ref={ref} {...props} />;
 });
 
 export default RoomListRoomWrapper;