Merge branch 'develop' into uploaded_files_fix

apps/meteor/app/ui-sidenav/client/sideNav.html

@@ -14,7 +14,7 @@
 				<i class="icon-down-big"></i> {{_ "More_unreads"}}
 			</div>
 		</div>
-		<div class="flex-nav animated-hidden">
+		<div class="flex-nav rcx-sidebar animated-hidden">
 			{{> Template.dynamic template=flexTemplate data=flexData }}
 		</div>
 		{{> sidebarFooter}}

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

@@ -12,7 +12,7 @@ const Header: FC<HeaderProps> = ({ title, onClose, children, ...props }) => (
 		{(title || onClose) && (
 			<Box display='flex' flexDirection='row' alignItems='center' pi='x24' justifyContent='space-between' flexGrow={1}>
 				{title && (
-					<Box color='default' fontSize='p2' fontWeight='p2' flexShrink={1} withTruncatedText>
+					<Box fontSize='p2' fontWeight='p2' flexShrink={1} withTruncatedText>
 						{title}
 					</Box>
 				)}

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

@@ -1,12 +1,12 @@
-import { css } from '@rocket.chat/css-in-js';
-import { Box } from '@rocket.chat/fuselage';
+import { Box, SidebarItem } from '@rocket.chat/fuselage';
 import type colors from '@rocket.chat/fuselage-tokens/colors';
 import type { ReactElement, ReactNode } from 'react';
 import React, { memo } from 'react';
 
 type SidebarGenericItemProps = {
 	href?: string;
 	active?: boolean;
+	featured?: boolean;
 	children: ReactNode;
 	customColors?: {
 		default: typeof colors[string];
@@ -16,42 +16,12 @@ type SidebarGenericItemProps = {
 	textColor?: string;
 };
 
-const SidebarGenericItem = ({
-	href,
-	active,
-	children,
-	customColors,
-	textColor = 'default',
-	...props
-}: SidebarGenericItemProps): ReactElement => (
-	<Box
-		is='a'
-		color={textColor}
-		pb='x8'
-		pi='x24'
-		href={href}
-		className={[
-			active && 'active',
-			css`
-				${customColors ? `background-color: ${customColors.default} !important;` : ''}
-				&:hover,
-				&:focus,
-
-				&.active:hover {
-					background-color: ${customColors?.hover || 'var(--sidebar-background-light-hover)'} !important;
-				}
-
-				&.active {
-					background-color: ${customColors?.active || 'var(--sidebar-background-light-active)'} !important;
-				}
-			`,
-		].filter(Boolean)}
-		{...props}
-	>
-		<Box mi='neg-x4' display='flex' flexDirection='row' alignItems='center'>
+const SidebarGenericItem = ({ href, active, children, ...props }: SidebarGenericItemProps): ReactElement => (
+	<SidebarItem {...{ ...props, selected: active }} clickable is='a' href={href}>
+		<Box display='flex' flexDirection='row' alignItems='center' pb='x8' pi='x12'>
 			{children}
 		</Box>
-	</Box>
+	</SidebarItem>
 );
 
 export default memo(SidebarGenericItem);

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

@@ -35,8 +35,8 @@ const SidebarNavigationItem: FC<SidebarNavigationItemProps> = ({
 	return (
 		<SidebarGenericItem active={isActive} href={path} key={path}>
 			{icon && <Icon name={icon} size='x20' mi='x4' />}
-			<Box withTruncatedText fontScale='p2' mi='x4' color='hint'>
-				{label} {tag && <Tag style={{ display: 'inline', backgroundColor: '#000', color: '#FFF', marginLeft: 4 }}>{tag}</Tag>}
+			<Box withTruncatedText fontScale='p2' mi='x4'>
+				{label} {tag && <Tag>{tag}</Tag>}
 			</Box>
 		</SidebarGenericItem>
 	);

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

@@ -10,7 +10,6 @@ import { useAvatarTemplate } from '../hooks/useAvatarTemplate';
 import { usePreventDefault } from '../hooks/usePreventDefault';
 import { useRoomList } from '../hooks/useRoomList';
 import { useShortcutOpenMenu } from '../hooks/useShortcutOpenMenu';
-import { useSidebarPaletteColor } from '../hooks/useSidebarPaletteColor';
 import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
 import RoomListRow from './RoomListRow';
 import ScrollerWithCustomProps from './ScrollerWithCustomProps';
@@ -43,7 +42,6 @@ const RoomList = (): ReactElement => {
 
 	usePreventDefault(ref);
 	useShortcutOpenMenu(ref);
-	useSidebarPaletteColor();
 
 	return (
 		<Box h='full' w='full' ref={ref}>

apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx

@@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Divider, Palette, SidebarFooter as Footer } from '@rocket.chat/fuselage';
+import { Box, SidebarDivider, Palette, SidebarFooter as Footer } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 import React from 'react';
 
@@ -20,7 +20,7 @@ const SidebarFooterDefault = (): ReactElement => {
 
 	return (
 		<Footer>
-			<Divider mbs={-2} mbe={0} borderColor='neutral-900-40' />
+			<SidebarDivider />
 			<Box
 				is='footer'
 				pb='x12'

apps/meteor/client/sidebar/header/index.tsx

@@ -3,7 +3,6 @@ import { useUser, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { memo } from 'react';
 
-import { useSidebarPaletteColor } from '../hooks/useSidebarPaletteColor';
 import UserAvatarButton from './UserAvatarButton';
 import Administration from './actions/Administration';
 import CreateRoom from './actions/CreateRoom';
@@ -16,7 +15,6 @@ import Sort from './actions/Sort';
 const HeaderWithData = (): ReactElement => {
 	const user = useUser();
 	const t = useTranslation();
-	useSidebarPaletteColor();
 
 	return (
 		<>

apps/meteor/client/sidebar/hooks/useSidebarPaletteColor.ts

@@ -160,7 +160,7 @@ const getStyle = (
 			--rcx-color-foreground-hint: ${toVar(colors.n600)};
 
 			--rcx-sidebar-title-color: var(--rcx-color-neutral-400, ${toVar(colors.n400)});
-			--rcx-sidebar-item-color: var(--rcx-color-neutral-400, ${toVar(colors.n400)});
+
 			--rcx-sidebar-item-color-hover: var(--rcx-color-neutral-400, ${toVar(colors.n400)});
 			--rcx-sidebar-item-color-selected: var(--rcx-color-neutral-400, ${toVar(colors.n400)});
 			--rcx-sidebar-footer-highlight-color: var(--rcx-color-neutral-400, ${toVar(colors.n400)});
@@ -174,9 +174,7 @@ const getStyle = (
 			--rcx-badge-colors-primary-background-color: ${toVar(colors.b500)}
 		}
 
-		.rcx-sidebar {
-			background-color: ${toVar(colors.sidebarSurface)};
-		}
+
 		`
 )(isIE11 ? ':root' : modifier);
 

apps/meteor/client/sidebar/sections/actions/OmnichannelLivechatToggle.tsx

@@ -1,12 +1,12 @@
 import { Sidebar } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ReactElement, ComponentProps } from 'react';
 import React from 'react';
 
 import { useOmnichannelAgentAvailable } from '../../../hooks/omnichannel/useOmnichannelAgentAvailable';
 
-export const OmnichannelLivechatToggle = (): ReactElement => {
+export const OmnichannelLivechatToggle = (props: Omit<ComponentProps<typeof Sidebar.TopBar.Action>, 'icon'>): ReactElement => {
 	const t = useTranslation();
 	const agentAvailable = useOmnichannelAgentAvailable();
 	const changeAgentStatus = useEndpoint('POST', '/v1/livechat/agent.status');
@@ -22,6 +22,7 @@ export const OmnichannelLivechatToggle = (): ReactElement => {
 
 	return (
 		<Sidebar.TopBar.Action
+			{...props}
 			id={'omnichannel-status-toggle'}
 			data-tooltip={agentAvailable ? t('Turn_off_answer_chats') : t('Turn_on_answer_chats')}
 			color={agentAvailable ? 'success' : undefined}

apps/meteor/client/views/admin/sidebar/UpgradeTab.tsx

@@ -1,5 +1,4 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
-import colors from '@rocket.chat/fuselage-tokens/colors';
 import { useRoutePath, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
@@ -9,12 +8,6 @@ import { getUpgradeTabLabel, isFullyFeature } from '../../../../lib/upgradeTab';
 import Emoji from '../../../components/Emoji';
 import Sidebar from '../../../components/Sidebar';
 
-const customColors = {
-	default: colors['s2-700'],
-	hover: colors['s2-800'],
-	active: colors['s2-900'],
-};
-
 type UpgradeTabProps = { type: UpgradeTabVariant; currentPath: string; trialEndDate: string | undefined };
 
 const UpgradeTab = ({ type, currentPath, trialEndDate }: UpgradeTabProps): ReactElement => {
@@ -34,9 +27,9 @@ const UpgradeTab = ({ type, currentPath, trialEndDate }: UpgradeTabProps): React
 	const displayEmoji = isFullyFeature(type);
 
 	return (
-		<Sidebar.GenericItem active={currentPath === path} href={String(path)} customColors={customColors} textColor='alternative'>
+		<Sidebar.GenericItem active={currentPath === path} href={String(path)} featured>
 			<Icon name='arrow-stack-up' size='x20' mi='x4' />
-			<Box withTruncatedText fontScale='p2' mi='x4' color='alternative'>
+			<Box withTruncatedText fontScale='p2' mi='x4'>
 				{t(label)} {displayEmoji && <Emoji emojiHandle=':zap:' />}
 			</Box>
 		</Sidebar.GenericItem>

apps/meteor/client/views/root/AppLayout.tsx

@@ -1,4 +1,5 @@
 import { PaletteStyleTag } from '@rocket.chat/ui-theming/src/PaletteStyleTag';
+import { SidebarPaletteStyleTag } from '@rocket.chat/ui-theming/src/SidebarPaletteStyleTag';
 import type { FC } from 'react';
 import React, { Fragment, Suspense } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
@@ -20,6 +21,7 @@ const AppLayout: FC = () => {
 	return (
 		<>
 			{theme && <PaletteStyleTag />}
+			<SidebarPaletteStyleTag />
 			<Suspense fallback={<PageLoading />}>{layout}</Suspense>
 			{portals.map(({ key, node }) => (
 				<Fragment key={key} children={node} />

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

@@ -20,13 +20,13 @@
 	"dependencies": {
 		"@rocket.chat/apps-engine": "^1.32.0",
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/emitter": "0.31.22",
+		"@rocket.chat/emitter": "next",
 		"@rocket.chat/message-parser": "0.31.22",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.22",
-		"@rocket.chat/ui-kit": "0.31.22",
+		"@rocket.chat/string-helpers": "next",
+		"@rocket.chat/ui-kit": "next",
 		"ajv": "^8.11.0",
 		"bcrypt": "^5.0.1",
 		"body-parser": "^1.20.0",
@@ -50,7 +50,7 @@
 		"ws": "^8.8.1"
 	},
 	"devDependencies": {
-		"@rocket.chat/icons": "0.31.22",
+		"@rocket.chat/icons": "next",
 		"@types/cookie": "^0.5.1",
 		"@types/cookie-parser": "^1.4.3",
 		"@types/ejson": "^2.2.0",

apps/meteor/package.json

@@ -209,35 +209,35 @@
 		"@rocket.chat/apps-engine": "1.36.0",
 		"@rocket.chat/cas-validate": "workspace:^",
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/css-in-js": "0.31.22",
-		"@rocket.chat/emitter": "0.31.22",
+		"@rocket.chat/css-in-js": "next",
+		"@rocket.chat/emitter": "next",
 		"@rocket.chat/favicon": "workspace:^",
 		"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.1",
 		"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.2",
-		"@rocket.chat/fuselage": "0.31.22",
-		"@rocket.chat/fuselage-hooks": "0.31.22",
-		"@rocket.chat/fuselage-polyfills": "0.31.22",
-		"@rocket.chat/fuselage-toastbar": "0.31.22",
-		"@rocket.chat/fuselage-tokens": "0.31.22",
-		"@rocket.chat/fuselage-ui-kit": "workspace:^",
+		"@rocket.chat/fuselage": "next",
+		"@rocket.chat/fuselage-hooks": "next",
+		"@rocket.chat/fuselage-polyfills": "next",
+		"@rocket.chat/fuselage-toastbar": "next",
+		"@rocket.chat/fuselage-tokens": "next",
+		"@rocket.chat/fuselage-ui-kit": "next",
 		"@rocket.chat/gazzodown": "workspace:^",
-		"@rocket.chat/icons": "0.31.22",
+		"@rocket.chat/icons": "next",
 		"@rocket.chat/layout": "next",
-		"@rocket.chat/logo": "0.31.22",
-		"@rocket.chat/memo": "0.31.22",
+		"@rocket.chat/logo": "next",
+		"@rocket.chat/memo": "next",
 		"@rocket.chat/message-parser": "0.31.22",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/mp3-encoder": "0.24.0",
-		"@rocket.chat/onboarding-ui": "0.31.22",
+		"@rocket.chat/onboarding-ui": "next",
 		"@rocket.chat/poplib": "workspace:^",
 		"@rocket.chat/presence": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.22",
+		"@rocket.chat/string-helpers": "next",
 		"@rocket.chat/ui-client": "workspace:^",
 		"@rocket.chat/ui-composer": "workspace:^",
 		"@rocket.chat/ui-contexts": "workspace:^",
-		"@rocket.chat/ui-kit": "0.31.22",
+		"@rocket.chat/ui-kit": "next",
 		"@rocket.chat/ui-theming": "workspace:^",
 		"@rocket.chat/ui-video-conf": "workspace:^",
 		"@rocket.chat/web-ui-registration": "workspace:^",

ee/apps/account-service/package.json

@@ -16,11 +16,11 @@
 	"author": "Rocket.Chat",
 	"dependencies": {
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/emitter": "0.31.22",
+		"@rocket.chat/emitter": "next",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.22",
+		"@rocket.chat/string-helpers": "next",
 		"@types/node": "^14.18.21",
 		"bcrypt": "^5.0.1",
 		"ejson": "^2.2.2",

ee/apps/authorization-service/package.json

@@ -16,11 +16,11 @@
 	"author": "Rocket.Chat",
 	"dependencies": {
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/emitter": "0.31.22",
+		"@rocket.chat/emitter": "next",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.22",
+		"@rocket.chat/string-helpers": "next",
 		"@types/node": "^14.18.21",
 		"ejson": "^2.2.2",
 		"eventemitter3": "^4.0.7",

ee/apps/ddp-streamer/package.json

@@ -17,11 +17,11 @@
 	"dependencies": {
 		"@rocket.chat/apps-engine": "^1.32.0",
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/emitter": "0.31.22",
+		"@rocket.chat/emitter": "next",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.22",
+		"@rocket.chat/string-helpers": "next",
 		"colorette": "^1.4.0",
 		"ejson": "^2.2.2",
 		"eventemitter3": "^4.0.7",

ee/apps/presence-service/package.json

@@ -16,11 +16,11 @@
 	"author": "Rocket.Chat",
 	"dependencies": {
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/emitter": "0.31.22",
+		"@rocket.chat/emitter": "next",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
 		"@rocket.chat/presence": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.22",
+		"@rocket.chat/string-helpers": "next",
 		"@types/node": "^14.18.21",
 		"ejson": "^2.2.2",
 		"eventemitter3": "^4.0.7",

ee/apps/stream-hub-service/package.json

@@ -16,10 +16,10 @@
 	"author": "Rocket.Chat",
 	"dependencies": {
 		"@rocket.chat/core-typings": "workspace:^",
-		"@rocket.chat/emitter": "0.31.22",
+		"@rocket.chat/emitter": "next",
 		"@rocket.chat/model-typings": "workspace:^",
 		"@rocket.chat/models": "workspace:^",
-		"@rocket.chat/string-helpers": "0.31.22",
+		"@rocket.chat/string-helpers": "next",
 		"@types/node": "^14.18.21",
 		"ejson": "^2.2.2",
 		"eventemitter3": "^4.0.7",

ee/packages/ui-theming/package.json

@@ -3,10 +3,10 @@
 	"version": "0.0.1",
 	"private": true,
 	"devDependencies": {
-		"@rocket.chat/css-in-js": "0.31.22",
-		"@rocket.chat/fuselage": "0.31.22",
-		"@rocket.chat/fuselage-hooks": "0.31.22",
-		"@rocket.chat/icons": "0.31.22",
+		"@rocket.chat/css-in-js": "next",
+		"@rocket.chat/fuselage": "next",
+		"@rocket.chat/fuselage-hooks": "next",
+		"@rocket.chat/icons": "next",
 		"@rocket.chat/ui-contexts": "workspace:~",
 		"@storybook/addon-actions": "~6.5.14",
 		"@storybook/addon-docs": "~6.5.14",