Merge branch 'develop' into Auto-Focus

app/ui-utils/client/lib/openRoom.js

@@ -103,7 +103,7 @@ export const openRoom = async function(type, name) {
 			const [mainNode, roomDom] = await replaceCenterDomBy(() => RoomManager.getDomOfRoom(type + name, room._id, roomTypes.getConfig(type).mainTemplate));
 
 			if (mainNode) {
-				if (roomDom.classList.contains('room-container .messages-box > .wrapper')) {
+				if (roomDom.classList.contains('.room-container .messages-box > .wrapper')) {
 					roomDom.querySelector('.messages-box > .wrapper').scrollTop = roomDom.oldScrollTop;
 				}
 			}

client/components/Header/Header.tsx

@@ -9,7 +9,7 @@ const Row: FC = (props: any) => <Box alignItems='center' flexShrink={1} flexGrow
 
 const HeaderIcon: FC<{ icon: JSX.Element | { name: string; color?: string } | null}> = ({ icon }) => icon && <Box display='flex' flexShrink={0} alignItems='center' size={18} overflow='hidden' justifyContent='center'>{React.isValidElement(icon) ? icon : <Icon color='info' size='x18' { ...{ name: (icon as any).name }} />}</Box>;
 
-const ToolBox: FC = (props: any) => <ButtonGroup small {...props}/>;
+const ToolBox: FC = (props: any) => <ButtonGroup mi='x4' medium {...props}/>;
 
 const ToolBoxAction: FC = ({ id, icon, title, action, className, tabId, index, ...props }: any) => <ActionButton
 	className={className}
@@ -38,7 +38,7 @@ const Avatar: FC = (props: any) => <Button width='x36' {...props}/>;
 const HeaderDivider: FC = () => <Divider { ...{ mbs: 'neg-x2', mbe: 0 } as any} />;
 
 const Header: FC & { ToolBoxAction: FC; Badge: FC<BadgeProps> } = (props: any) => <Box rcx-room-header is='header' height='x64' display='flex' justifyContent='center' flexDirection='column' overflow='hidden' flexShrink={0}>
-	<Box height='x64' pi='x24' display='flex' flexGrow={1} justifyContent='center' alignItems='center' overflow='hidden' flexDirection='row' {...props}/>
+	<Box height='x64' mi='neg-x4' pi='x24' display='flex' flexGrow={1} justifyContent='center' alignItems='center' overflow='hidden' flexDirection='row' {...props}/>
 	<HeaderDivider/>
 </Box>;
 

client/components/ScrollableContentWrapper.tsx

@@ -1,24 +1,24 @@
-import React, { CSSProperties, FC } from 'react';
+import React, { CSSProperties, useMemo, memo, forwardRef } from 'react';
 import SimpleBar from 'simplebar-react';
 import 'simplebar/src/simplebar.css';
 
 import { useDir } from '../hooks/useDir';
 
 
 const styleDefault = {
-	maxHeight: '100%', flexGrow: 1,
+	maxHeight: '100%', flexGrow: 1, overflowY: 'auto', willChange: 'transform',
 };
 
-
 type CustomScrollbarsProps = {
 	onScroll?: Function;
-	ref: React.Ref<unknown>;
 	style?: CSSProperties;
+	children?: React.ReactNode;
 }
 
-const ScrollableContentWrapper: FC<CustomScrollbarsProps> = React.memo(React.forwardRef(({ onScroll, children, style = styleDefault }, ref) => {
+const ScrollableContentWrapper = forwardRef<unknown, CustomScrollbarsProps>(({ onScroll, children, style }, ref) => {
 	const dir = useDir();
-	return <SimpleBar data-simplebar-direction={dir} direction={dir} style={style} scrollableNodeProps={{ ref, onScroll }} children={children}/>;
-}));
+	const simpleBarStyle = useMemo(() => ({ ...style, ...styleDefault }), [style]) as CSSProperties;
+	return <SimpleBar data-simplebar-direction={dir} direction={dir} style={simpleBarStyle} scrollableNodeProps={{ ref, onScroll }} children={children}/>;
+});
 
-export default ScrollableContentWrapper;
+export default memo(ScrollableContentWrapper);

client/components/VerticalBar.js

@@ -106,7 +106,7 @@ function VerticalBarAction({ name, ...props }) {
 }
 
 function VerticalBarActions(props) {
-	return <ButtonGroup small {...props} />;
+	return <ButtonGroup medium {...props} />;
 }
 
 function VerticalBarActionBack(props) {

client/views/room/Header/Header.js

@@ -36,10 +36,10 @@ const RoomHeader = ({ room }) => {
 	const { isMobile } = useLayout();
 	const avatar = <RoomAvatar room={room}/>;
 	return <Header>
-		<Header.ToolBox>
+		{ (isMobile || room.prid) && <Header.ToolBox>
 			{ isMobile && <Burger/>}
 			{ room.prid && <BackToRoom small={!isMobile} prid={room.prid}/>}
-		</Header.ToolBox>
+		</Header.ToolBox> }
 		{ avatar && <Header.Avatar>{avatar}</Header.Avatar> }
 		<Header.Content>
 			<Header.Content.Row>

client/views/room/Header/ToolBox/ToolBox.tsx

@@ -1,7 +1,7 @@
-import React, { memo, useContext, useEffect, ReactNode, useRef } from 'react';
+import React, { memo, useContext, ReactNode, useRef } from 'react';
 import { Menu, Option, BoxProps, MenuProps } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import tinykeys from 'tinykeys';
+// import tinykeys from 'tinykeys';
 
 // used to open the menu option by keyboard
 import Header from '../../../../components/Header';
@@ -44,20 +44,20 @@ const ToolBox = ({ className }: { className: BoxProps['className'] }): JSX.Eleme
 		openTabBar(actions[index].id);
 	});
 
-	const open = useMutableCallback((index) => {
-		openTabBar(actions[index].id);
-	});
+	// const open = useMutableCallback((index) => {
+	// 	openTabBar(actions[index].id);
+	// });
 
-	useEffect(() => {
-		if (!visibleActions.length) {
-			return;
-		}
-		const unsubscribe = tinykeys(window, Object.fromEntries(new Array(visibleActions.length).fill(true).map((_, index) => [`$mod+${ index + 1 }`, (): void => { open(index); }])));
+	// useEffect(() => {
+	// 	if (!visibleActions.length) {
+	// 		return;
+	// 	}
+	// 	const unsubscribe = tinykeys(window, Object.fromEntries(new Array(visibleActions.length).fill(true).map((_, index) => [`$mod+${ index + 1 }`, (): void => { open(index); }])));
 
-		return (): void => {
-			unsubscribe();
-		};
-	}, [visibleActions.length, open]);
+	// 	return (): void => {
+	// 		unsubscribe();
+	// 	};
+	// }, [visibleActions.length, open]);
 
 	return <>
 		{ visibleActions.map(({ renderAction, id, icon, title, action = actionDefault }, index) => {

client/views/room/providers/ToolboxProvider.tsx

@@ -68,19 +68,22 @@ export const ToolboxProvider = ({ children, room }: { children: ReactNode; room:
 	const tab = params?.tab;
 	const context = params?.context;
 
-	const open = useMutableCallback((actionId, context) => {
+	const close = useMutableCallback(() => {
 		router.push({
 			...params,
-			tab: actionId,
-			context,
+			tab: '',
+			context: '',
 		});
 	});
 
-	const close = useMutableCallback(() => {
+	const open = useMutableCallback((actionId, context) => {
+		if (actionId === activeTabBar[0]?.id) {
+			return close();
+		}
 		router.push({
 			...params,
-			tab: '',
-			context: '',
+			tab: actionId,
+			context,
 		});
 	});
 

package.json

@@ -138,15 +138,15 @@
 		"@nivo/line": "^0.61.1",
 		"@nivo/pie": "^0.61.1",
 		"@rocket.chat/apps-engine": "1.21.0-alpha.4235",
-		"@rocket.chat/css-in-js": "^0.20.0",
-		"@rocket.chat/emitter": "^0.20.0",
-		"@rocket.chat/fuselage": "^0.20.0",
-		"@rocket.chat/fuselage-hooks": "^0.20.0",
-		"@rocket.chat/fuselage-polyfills": "^0.20.0",
-		"@rocket.chat/fuselage-ui-kit": "^0.20.0",
-		"@rocket.chat/icons": "^0.20.0",
-		"@rocket.chat/mp3-encoder": "^0.20.0",
-		"@rocket.chat/ui-kit": "^0.20.0",
+		"@rocket.chat/css-in-js": "^0.20.1",
+		"@rocket.chat/emitter": "^0.20.1",
+		"@rocket.chat/fuselage": "^0.20.1",
+		"@rocket.chat/fuselage-hooks": "^0.20.1",
+		"@rocket.chat/fuselage-polyfills": "^0.20.1",
+		"@rocket.chat/fuselage-ui-kit": "^0.20.1",
+		"@rocket.chat/icons": "^0.20.1",
+		"@rocket.chat/mp3-encoder": "^0.20.1",
+		"@rocket.chat/ui-kit": "^0.20.1",
 		"@slack/client": "^4.12.0",
 		"@types/fibers": "^3.1.0",
 		"@types/mkdirp": "^1.0.1",