From 16a3bc94897705be535ce41d044f96ff7557534c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?=
 <60678893+juliajforesti@users.noreply.github.com>
Date: Mon, 21 Feb 2022 20:44:53 -0300
Subject: [PATCH] [IMPROVE] Replace AutoComplete in UserAutoComplete &
 UserAutoCompleteMultiple components (#24529)

* Replace AutoComplete with MultiSelectFiltered on CreateTeamModal/UsersInput

* Add addonIcon on CreateTeamModal/UsersInput multiSelect

* Replace Autocomplete with SelectFiltered on UserAutoComplete

* Replace AutoComplete in UserAutoCompleteMultiple & Unify with UsersInput

* Replace AutoComplete in UserAutoCompleteMultiple & Unify with UsersInput

* Update onChanges passed to UserAutoCompleteMultiple

* remove log

* chore: review

* Update fuselage, fuselage-hooks, fuselage-ui-kit e onboarding-ui versions to @next

* Fix typings

* Bump Fuselage one more time

Co-authored-by: dougfabris <devfabris@gmail.com>
Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
---
 .../CreateDiscussion/CreateDiscussion.tsx     |  10 +-
 client/components/UserAutoComplete/Avatar.js  |   8 -
 .../UserAutoComplete/UserAutoComplete.js      |  39 ++-
 .../UserAutoComplete/{index.js => index.ts}   |   0
 .../UserAutoCompleteMultiple/Avatar.js        |   8 -
 .../UserAutoCompleteMultiple.js               |  59 ++--
 .../sidebar/header/CreateChannelWithData.js   |  10 +-
 client/sidebar/header/CreateDirectMessage.tsx |  18 +-
 .../views/account/AccountIntegrationsPage.tsx |   4 +-
 .../FederationModal/FederationModal.tsx       |   4 +-
 .../omnichannel/triggers/TriggersForm.tsx     |   6 +-
 client/views/room/Header/ToolBox/ToolBox.tsx  |   6 +-
 .../ExportMessages/MailExportForm.js          |  10 +-
 .../PruneMessages/PruneMessagesWithData.js    |  10 +-
 .../RoomMembers/AddUsers/AddUsersWithData.js  |  10 +-
 client/views/room/lib/Toolbox/index.tsx       |   2 +-
 .../teams/CreateTeamModal/CreateTeamModal.tsx |  20 +-
 .../teams/CreateTeamModal/UsersInput.tsx      |  90 ------
 ee/client/audit/AuditPage.js                  |  10 +-
 .../cannedResponses/CannedResponseFilter.tsx  |   4 +-
 .../EngagementDashboardPage.tsx               |   2 +-
 .../users/BusiestChatTimesSection.tsx         |   2 +-
 package-lock.json                             | 265 ++++++------------
 package.json                                  |  28 +-
 24 files changed, 179 insertions(+), 446 deletions(-)
 delete mode 100644 client/components/UserAutoComplete/Avatar.js
 rename client/components/UserAutoComplete/{index.js => index.ts} (100%)
 delete mode 100644 client/components/UserAutoCompleteMultiple/Avatar.js
 delete mode 100644 client/views/teams/CreateTeamModal/UsersInput.tsx

diff --git a/client/components/CreateDiscussion/CreateDiscussion.tsx b/client/components/CreateDiscussion/CreateDiscussion.tsx
index b5f2a67ab9b..5fe9e6c12f9 100644
--- a/client/components/CreateDiscussion/CreateDiscussion.tsx
+++ b/client/components/CreateDiscussion/CreateDiscussion.tsx
@@ -65,14 +65,8 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
 		}
 	});
 
-	const onChangeUsers = useMutableCallback((value, action) => {
-		if (!action) {
-			if (usernames.includes(value)) {
-				return;
-			}
-			return handleUsernames([...usernames, value]);
-		}
-		handleUsernames(usernames.filter((current) => current !== value));
+	const onChangeUsers = useMutableCallback((value: CreateDiscussionFormValues['usernames']) => {
+		handleUsernames(value);
 	});
 
 	return (
diff --git a/client/components/UserAutoComplete/Avatar.js b/client/components/UserAutoComplete/Avatar.js
deleted file mode 100644
index 8e135268df9..00000000000
--- a/client/components/UserAutoComplete/Avatar.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Options } from '@rocket.chat/fuselage';
-import React from 'react';
-
-import UserAvatar from '../avatar/UserAvatar';
-
-const Avatar = ({ value, ...props }) => <UserAvatar size={Options.AvatarSize} username={value} {...props} />;
-
-export default Avatar;
diff --git a/client/components/UserAutoComplete/UserAutoComplete.js b/client/components/UserAutoComplete/UserAutoComplete.js
index b44a350cfc8..d2c3c507b3b 100644
--- a/client/components/UserAutoComplete/UserAutoComplete.js
+++ b/client/components/UserAutoComplete/UserAutoComplete.js
@@ -1,10 +1,9 @@
-import { AutoComplete, Option, Box, Chip } from '@rocket.chat/fuselage';
+import { SelectFiltered, Option, Box, Chip } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import React, { memo, useMemo, useState } from 'react';
 
 import { useEndpointData } from '../../hooks/useEndpointData';
 import UserAvatar from '../avatar/UserAvatar';
-import Avatar from './Avatar';
 
 const query = (term = '', conditions = {}) => ({ selector: JSON.stringify({ term, conditions }) });
 
@@ -18,29 +17,29 @@ const UserAutoComplete = (props) => {
 		useMemo(() => query(debouncedFilter, conditions), [filter]),
 	);
 
-	const options = useMemo(() => (data && data.items.map((user) => ({ value: user.username, label: user.name }))) || [], [data]);
+	const options = useMemo(() => (data && data.items.map((user) => [user.username, user.name])) || [], [data]);
+
+	const renderSelected = ({ value, label }) =>
+		value ? (
+			<Chip height='x20' value={value} onClick={() => props.onChange()} mie='x4'>
+				<UserAvatar size='x20' username={value} />
+				<Box verticalAlign='middle' is='span' margin='none' mi='x4'>
+					{label}
+				</Box>
+			</Chip>
+		) : null;
+
+	const renderItem = ({ value, ...props }) => <Option key={value} {...props} avatar={<UserAvatar size='x20' username={value} />} />;
 
 	return (
-		<AutoComplete
+		<SelectFiltered
 			{...props}
+			options={options}
 			filter={filter}
 			setFilter={setFilter}
-			renderSelected={({ value, label }) => {
-				if (!value) {
-					return '';
-				}
-
-				return (
-					<Chip height='x20' value={value} onClick={() => props.onChange()} mie='x4'>
-						<UserAvatar size='x20' username={value} />
-						<Box verticalAlign='middle' is='span' margin='none' mi='x4'>
-							{label}
-						</Box>
-					</Chip>
-				);
-			}}
-			renderItem={({ value, ...props }) => <Option key={value} {...props} avatar={<Avatar value={value} />} />}
-			options={options}
+			addonIcon='magnifier'
+			renderItem={renderItem}
+			renderSelected={renderSelected}
 		/>
 	);
 };
diff --git a/client/components/UserAutoComplete/index.js b/client/components/UserAutoComplete/index.ts
similarity index 100%
rename from client/components/UserAutoComplete/index.js
rename to client/components/UserAutoComplete/index.ts
diff --git a/client/components/UserAutoCompleteMultiple/Avatar.js b/client/components/UserAutoCompleteMultiple/Avatar.js
deleted file mode 100644
index 8e135268df9..00000000000
--- a/client/components/UserAutoCompleteMultiple/Avatar.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Options } from '@rocket.chat/fuselage';
-import React from 'react';
-
-import UserAvatar from '../avatar/UserAvatar';
-
-const Avatar = ({ value, ...props }) => <UserAvatar size={Options.AvatarSize} username={value} {...props} />;
-
-export default Avatar;
diff --git a/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.js b/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.js
index dea3b0ec81c..c1358530c19 100644
--- a/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.js
+++ b/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.js
@@ -1,5 +1,5 @@
-import { AutoComplete, Box, Option, Chip } from '@rocket.chat/fuselage';
-import { useMutableCallback, useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { MultiSelectFiltered, Box, Option, OptionAvatar, OptionContent, OptionDescription, Chip, CheckBox } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import React, { memo, useMemo, useState } from 'react';
 
 import { useEndpointData } from '../../hooks/useEndpointData';
@@ -14,39 +14,38 @@ const UserAutoCompleteMultiple = (props) => {
 		'users.autocomplete',
 		useMemo(() => query(debouncedFilter), [debouncedFilter]),
 	);
-	const options = useMemo(() => (data && data.items.map((user) => ({ value: user.username, label: user.name }))) || [], [data]);
-	const onClickRemove = useMutableCallback((e) => {
-		e.stopPropagation();
-		e.preventDefault();
-		props.onChange(e.currentTarget.value, 'remove');
-	});
+	const options = useMemo(() => (data && data.items.map((user) => [user.username, user.name])) || [], [data]);
+
+	const renderItem = ({ value, label, selected, ...props }) => (
+		<Option key={value} {...props}>
+			<OptionAvatar>
+				<UserAvatar username={value} size='x20' />
+			</OptionAvatar>
+			<OptionContent>
+				{label} <OptionDescription>({value})</OptionDescription>
+			</OptionContent>
+			<CheckBox checked={selected} />
+		</Option>
+	);
+
+	const renderSelected = ({ value, onMouseDown }) => (
+		<Chip {...props} key={value} value={value} onClick={onMouseDown} margin='x4'>
+			<UserAvatar size='x20' username={value} />
+			<Box is='span' margin='none' mis='x4'>
+				{value}
+			</Box>
+		</Chip>
+	);
 
 	return (
-		<AutoComplete
+		<MultiSelectFiltered
 			{...props}
+			options={options}
 			filter={filter}
 			setFilter={setFilter}
-			renderSelected={({ value: selected }) =>
-				selected?.map((value) => (
-					<Chip key={value} {...props} height='x20' value={value} onClick={onClickRemove} mie='x4'>
-						<UserAvatar size='x20' username={value} />
-						<Box is='span' margin='none' mis='x4'>
-							{value}
-						</Box>
-					</Chip>
-				))
-			}
-			renderItem={({ value, label, ...props }) => (
-				<Option key={value} {...props}>
-					<Option.Avatar>
-						<UserAvatar username={value} size='x20' />
-					</Option.Avatar>
-					<Option.Content>
-						{label} <Option.Description>({value})</Option.Description>
-					</Option.Content>
-				</Option>
-			)}
-			options={options}
+			renderSelected={renderSelected}
+			renderItem={renderItem}
+			addonIcon='magnifier'
 		/>
 	);
 };
diff --git a/client/sidebar/header/CreateChannelWithData.js b/client/sidebar/header/CreateChannelWithData.js
index e5f82012662..bb5e303e95f 100644
--- a/client/sidebar/header/CreateChannelWithData.js
+++ b/client/sidebar/header/CreateChannelWithData.js
@@ -38,14 +38,8 @@ const CreateChannelWithData = ({ onClose, teamId = '', reload }) => {
 	const { users, name, description, type, readOnly, broadcast, encrypted } = values;
 	const { handleUsers, handleEncrypted, handleType, handleBroadcast, handleReadOnly } = handlers;
 
-	const onChangeUsers = useMutableCallback((value, action) => {
-		if (!action) {
-			if (users.includes(value)) {
-				return;
-			}
-			return handleUsers([...users, value]);
-		}
-		handleUsers(users.filter((current) => current !== value));
+	const onChangeUsers = useMutableCallback((value) => {
+		handleUsers(value);
 	});
 
 	const onChangeType = useMutableCallback((value) => {
diff --git a/client/sidebar/header/CreateDirectMessage.tsx b/client/sidebar/header/CreateDirectMessage.tsx
index fecc80f43bd..01c454ee793 100644
--- a/client/sidebar/header/CreateDirectMessage.tsx
+++ b/client/sidebar/header/CreateDirectMessage.tsx
@@ -1,6 +1,6 @@
 import { Box, Modal, ButtonGroup, Button } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import React, { FC, useState, memo } from 'react';
+import React, { ReactElement, useState, memo } from 'react';
 
 import { IUser } from '../../../definition/IUser';
 import UserAutoCompleteMultiple from '../../components/UserAutoCompleteMultiple';
@@ -8,26 +8,18 @@ import { useTranslation } from '../../contexts/TranslationContext';
 import { useEndpointActionExperimental } from '../../hooks/useEndpointActionExperimental';
 import { goToRoomById } from '../../lib/utils/goToRoomById';
 
-type Username = IUser['username'];
-
 type CreateDirectMessageProps = {
 	onClose: () => void;
 };
 
-const CreateDirectMessage: FC<CreateDirectMessageProps> = ({ onClose }) => {
+const CreateDirectMessage = ({ onClose }: CreateDirectMessageProps): ReactElement => {
 	const t = useTranslation();
-	const [users, setUsers] = useState<Array<Username>>([]);
+	const [users, setUsers] = useState<Array<IUser['username']>>([]);
 
 	const createDirect = useEndpointActionExperimental('POST', 'dm.create');
 
-	const onChangeUsers = useMutableCallback((value: Username, action: string) => {
-		if (!action) {
-			if (users.includes(value)) {
-				return;
-			}
-			return setUsers([...users, value]);
-		}
-		setUsers(users.filter((current) => current !== value));
+	const onChangeUsers = useMutableCallback((value: IUser['username'][]) => {
+		setUsers(value);
 	});
 
 	const onCreate = useMutableCallback(async () => {
diff --git a/client/views/account/AccountIntegrationsPage.tsx b/client/views/account/AccountIntegrationsPage.tsx
index f07294640c0..df17799d910 100644
--- a/client/views/account/AccountIntegrationsPage.tsx
+++ b/client/views/account/AccountIntegrationsPage.tsx
@@ -1,4 +1,4 @@
-import { Box, Select, SelectOptions, Field, Button } from '@rocket.chat/fuselage';
+import { Box, Select, SelectOption, Field, Button } from '@rocket.chat/fuselage';
 import React, { useMemo, useCallback, ReactElement } from 'react';
 
 import { WebdavAccounts } from '../../../app/models/client';
@@ -28,7 +28,7 @@ const AccountIntegrationsPage = (): ReactElement => {
 		handlers: { handleSelected },
 	} = useForm({ selected: [] });
 
-	const options: SelectOptions = useMemo(() => accounts.map(({ _id, ...current }) => [_id, getServerName(current)]), [accounts]);
+	const options: SelectOption[] = useMemo(() => accounts.map(({ _id, ...current }) => [_id, getServerName(current)]), [accounts]);
 
 	const handleClickRemove = useCallback(() => {
 		try {
diff --git a/client/views/admin/info/FederationCard/components/FederationModal/FederationModal.tsx b/client/views/admin/info/FederationCard/components/FederationModal/FederationModal.tsx
index cab920568fa..845119584f7 100644
--- a/client/views/admin/info/FederationCard/components/FederationModal/FederationModal.tsx
+++ b/client/views/admin/info/FederationCard/components/FederationModal/FederationModal.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, ButtonGroup, Field, FieldGroup, Modal, Select, SelectOptions, Tabs, TextInput } from '@rocket.chat/fuselage';
+import { Box, Button, ButtonGroup, Field, FieldGroup, Modal, Select, SelectOption, Tabs, TextInput } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { parse as parseDomain, ParsedDomain } from 'psl';
 import React, { FC, ReactElement, useCallback, useState } from 'react';
@@ -37,7 +37,7 @@ export const FederationModal: FC<{ onClose: () => void }> = ({ onClose, ...props
 	const federationPublicKey = useSetting('FEDERATION_Public_Key') as string;
 
 	// Form
-	const discoveryOptions: SelectOptions = [
+	const discoveryOptions: SelectOption[] = [
 		['dns', 'DNS (recommended)'],
 		['hub', 'HUB'],
 	];
diff --git a/client/views/omnichannel/triggers/TriggersForm.tsx b/client/views/omnichannel/triggers/TriggersForm.tsx
index 82267680922..f218710830c 100644
--- a/client/views/omnichannel/triggers/TriggersForm.tsx
+++ b/client/views/omnichannel/triggers/TriggersForm.tsx
@@ -1,4 +1,4 @@
-import { Box, Field, TextInput, ToggleSwitch, Select, TextAreaInput, SelectOptions } from '@rocket.chat/fuselage';
+import { Box, Field, TextInput, ToggleSwitch, Select, TextAreaInput, SelectOption } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import React, { ComponentProps, FC, FormEvent, useMemo, useState } from 'react';
 
@@ -55,7 +55,7 @@ const TriggersForm: FC<TriggersFormProps> = ({ values, handlers, className }) =>
 		params: { sender: actionSender, msg: actionMsg, name: actionAgentName },
 	} = actions;
 
-	const conditionOptions: SelectOptions = useMemo(
+	const conditionOptions: SelectOption[] = useMemo(
 		() => [
 			['page-url', t('Visitor_page_URL')],
 			['time-on-site', t('Visitor_time_on_site')],
@@ -74,7 +74,7 @@ const TriggersForm: FC<TriggersFormProps> = ({ values, handlers, className }) =>
 
 	const conditionValuePlaceholder = conditionValuePlaceholders[conditionName];
 
-	const senderOptions: SelectOptions = useMemo(
+	const senderOptions: SelectOption[] = useMemo(
 		() => [
 			['queue', t('Impersonate_next_agent_from_queue')],
 			['custom', t('Custom_agent')],
diff --git a/client/views/room/Header/ToolBox/ToolBox.tsx b/client/views/room/Header/ToolBox/ToolBox.tsx
index fdb8a70fb5d..c1a19af0768 100644
--- a/client/views/room/Header/ToolBox/ToolBox.tsx
+++ b/client/views/room/Header/ToolBox/ToolBox.tsx
@@ -1,4 +1,4 @@
-import { Menu, Option, MenuProps, Box } from '@rocket.chat/fuselage';
+import { Menu, Option, Box } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import React, { memo, ReactNode, useRef, ComponentProps, FC, ReactElement } from 'react';
 // import tinykeys from 'tinykeys';
@@ -33,7 +33,7 @@ const ToolBox: FC<ToolBoxProps> = ({ className }) => {
 	const actions = (Array.from(mapActions.values()) as ToolboxActionConfig[]).sort((a, b) => (a.order || 0) - (b.order || 0));
 	const visibleActions = isMobile ? [] : actions.slice(0, 6);
 
-	const hiddenActions: MenuProps['options'] = Object.fromEntries(
+	const hiddenActions: Record<string, ToolboxActionConfig> = Object.fromEntries(
 		(isMobile ? actions : actions.slice(6)).map((item) => {
 			hiddenActionRenderers.current = {
 				...hiddenActionRenderers.current,
@@ -48,7 +48,7 @@ const ToolBox: FC<ToolBoxProps> = ({ className }) => {
 					},
 					...item,
 				},
-			] as any;
+			];
 		}),
 	);
 
diff --git a/client/views/room/contextualBar/ExportMessages/MailExportForm.js b/client/views/room/contextualBar/ExportMessages/MailExportForm.js
index d451f4ffd47..106d13a6da5 100644
--- a/client/views/room/contextualBar/ExportMessages/MailExportForm.js
+++ b/client/views/room/contextualBar/ExportMessages/MailExportForm.js
@@ -68,14 +68,8 @@ const MailExportForm = ({ onCancel, rid }) => {
 
 	const { handleToUsers, handleAdditionalEmails, handleSubject } = handlers;
 
-	const onChangeUsers = useMutableCallback((value, action) => {
-		if (!action) {
-			if (toUsers.includes(value)) {
-				return;
-			}
-			return handleToUsers([...toUsers, value]);
-		}
-		handleToUsers(toUsers.filter((current) => current !== value));
+	const onChangeUsers = useMutableCallback((value) => {
+		handleToUsers(value);
 	});
 
 	const roomsExport = useEndpoint('POST', 'rooms.export');
diff --git a/client/views/room/contextualBar/PruneMessages/PruneMessagesWithData.js b/client/views/room/contextualBar/PruneMessages/PruneMessagesWithData.js
index 4f435c67b9c..ca78b64f69b 100644
--- a/client/views/room/contextualBar/PruneMessages/PruneMessagesWithData.js
+++ b/client/views/room/contextualBar/PruneMessages/PruneMessagesWithData.js
@@ -65,14 +65,8 @@ const PruneMessagesWithData = ({ rid, tabBar }) => {
 		handleAttached,
 	} = handlers;
 
-	const onChangeUsers = useMutableCallback((value, action) => {
-		if (!action) {
-			if (users.includes(value)) {
-				return;
-			}
-			return handleUsers([...users, value]);
-		}
-		handleUsers(users.filter((current) => current !== value));
+	const onChangeUsers = useMutableCallback((value) => {
+		handleUsers(value);
 	});
 
 	const handlePrune = useMutableCallback(async () => {
diff --git a/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsersWithData.js b/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsersWithData.js
index 3383ccffbbb..f45acee9617 100644
--- a/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsersWithData.js
+++ b/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsersWithData.js
@@ -19,14 +19,8 @@ const AddUsersWithData = ({ rid, onClickBack, reload }) => {
 	const { users } = values;
 	const { handleUsers } = handlers;
 
-	const onChangeUsers = useMutableCallback((value, action) => {
-		if (!action) {
-			if (users.includes(value)) {
-				return;
-			}
-			return handleUsers([...users, value]);
-		}
-		handleUsers(users.filter((current) => current !== value));
+	const onChangeUsers = useMutableCallback((value) => {
+		handleUsers(value);
 	});
 
 	const handleSave = useMutableCallback(async () => {
diff --git a/client/views/room/lib/Toolbox/index.tsx b/client/views/room/lib/Toolbox/index.tsx
index a50a69e31a1..565190ebb90 100644
--- a/client/views/room/lib/Toolbox/index.tsx
+++ b/client/views/room/lib/Toolbox/index.tsx
@@ -30,7 +30,7 @@ export type ToolboxActionConfig = {
 	order?: number;
 	groups: Array<'group' | 'channel' | 'live' | 'direct' | 'direct_multiple' | 'team'>;
 	hotkey?: string;
-	action?: (e: MouseEvent<HTMLElement>) => void;
+	action?: (e?: MouseEvent<HTMLElement>) => void;
 	template?: string | FC | LazyExoticComponent<FC<{ rid: string; tabBar: any }>>;
 };
 
diff --git a/client/views/teams/CreateTeamModal/CreateTeamModal.tsx b/client/views/teams/CreateTeamModal/CreateTeamModal.tsx
index ae150730e1a..b231b7ec7cc 100644
--- a/client/views/teams/CreateTeamModal/CreateTeamModal.tsx
+++ b/client/views/teams/CreateTeamModal/CreateTeamModal.tsx
@@ -3,6 +3,7 @@ import { useMutableCallback, useDebouncedCallback, useAutoFocus } from '@rocket.
 import React, { FC, memo, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { IUser } from '../../../../definition/IUser';
+import UserAutoCompleteMultiple from '../../../components/UserAutoCompleteMultiple';
 import { usePermission } from '../../../contexts/AuthorizationContext';
 import { useMethod } from '../../../contexts/ServerContext';
 import { useSetting } from '../../../contexts/SettingsContext';
@@ -11,7 +12,6 @@ import { useEndpointActionExperimental } from '../../../hooks/useEndpointActionE
 import { useForm } from '../../../hooks/useForm';
 import { goToRoomById } from '../../../lib/utils/goToRoomById';
 import TeamNameInput from './TeamNameInput';
-import UsersInput from './UsersInput';
 
 type CreateTeamModalState = {
 	name: any;
@@ -82,10 +82,6 @@ const useCreateTeamModalState = (onClose: () => void): CreateTeamModalState => {
 		async (name: string) => {
 			setNameError(undefined);
 
-			if (!hasUnsavedChanges) {
-				return;
-			}
-
 			if (!name || name.length === 0) {
 				setNameError(t('Field_required'));
 				return;
@@ -136,16 +132,10 @@ const useCreateTeamModalState = (onClose: () => void): CreateTeamModalState => {
 	);
 
 	const onChangeMembers = useCallback(
-		(value, action) => {
-			if (!action) {
-				if (members.includes(value)) {
-					return;
-				}
-				return handleMembers([...members, value]);
-			}
-			handleMembers(members.filter((current) => current !== value));
+		(value) => {
+			handleMembers(value);
 		},
-		[handleMembers, members],
+		[handleMembers],
 	);
 
 	const canSave = hasUnsavedChanges && !nameError;
@@ -313,7 +303,7 @@ const CreateTeamModal: FC<CreateTeamModalProps> = ({ onClose }) => {
 								({t('optional')})
 							</Box>
 						</Field.Label>
-						<UsersInput value={members} onChange={onChangeMembers} />
+						<UserAutoCompleteMultiple value={members} onChange={onChangeMembers} />
 					</Field>
 				</FieldGroup>
 			</Modal.Content>
diff --git a/client/views/teams/CreateTeamModal/UsersInput.tsx b/client/views/teams/CreateTeamModal/UsersInput.tsx
deleted file mode 100644
index 339b6565d6e..00000000000
--- a/client/views/teams/CreateTeamModal/UsersInput.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { AutoComplete, Box, Option, Options, Chip, AutoCompleteProps } from '@rocket.chat/fuselage';
-import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import React, { FC, memo, useCallback, useMemo, useState } from 'react';
-
-import UserAvatar from '../../../components/avatar/UserAvatar';
-import { useEndpointData } from '../../../hooks/useEndpointData';
-
-type UsersInputProps = {
-	value: unknown[];
-	onChange: (value: unknown, action: 'remove' | undefined) => void;
-};
-
-type AutocompleteData = [AutoCompleteProps['options'], { [key: string]: string | undefined }];
-
-const useUsersAutoComplete = (term: string): AutocompleteData => {
-	const params = useMemo(
-		() => ({
-			selector: JSON.stringify({ term }),
-		}),
-		[term],
-	);
-	const { value: data } = useEndpointData('users.autocomplete', params);
-
-	return useMemo<AutocompleteData>(() => {
-		if (!data) {
-			return [[], {}];
-		}
-
-		const options =
-			data.items.map((user) => ({
-				label: user.name ?? '',
-				value: user._id ?? '',
-			})) || [];
-
-		const labelData = Object.fromEntries(data.items.map((user) => [user._id, user.username]) || []);
-
-		return [options, labelData];
-	}, [data]);
-};
-
-const UsersInput: FC<UsersInputProps> = ({ onChange, ...props }) => {
-	const [filter, setFilter] = useState('');
-	const [options, labelData] = useUsersAutoComplete(useDebouncedValue(filter, 1000));
-
-	const onClickSelected = useCallback(
-		(e) => {
-			e.stopPropagation();
-			e.preventDefault();
-			onChange(e.currentTarget.value, 'remove');
-		},
-		[onChange],
-	);
-
-	const renderSelected = useCallback<FC<{ value?: string[] }>>(
-		({ value: selected }) => (
-			<>
-				{selected?.map((value) => (
-					<Chip key={value} {...props} height='x20' value={value} onClick={onClickSelected} mie='x4'>
-						<UserAvatar size='x20' username={labelData[value] as string} />
-						<Box is='span' margin='none' mis='x4'>
-							{labelData[value]}
-						</Box>
-					</Chip>
-				))}
-			</>
-		),
-		[onClickSelected, props, labelData],
-	);
-
-	const renderItem = useCallback<FC<{ value: string }>>(
-		({ value, ...props }) => (
-			<Option key={value} {...props} avatar={<UserAvatar size={Options.AvatarSize} username={labelData[value] as string} />} />
-		),
-		[labelData],
-	);
-
-	return (
-		<AutoComplete
-			{...props}
-			filter={filter}
-			options={options}
-			renderSelected={renderSelected}
-			renderItem={renderItem}
-			setFilter={setFilter}
-			onChange={onChange}
-		/>
-	);
-};
-
-export default memo(UsersInput);
diff --git a/ee/client/audit/AuditPage.js b/ee/client/audit/AuditPage.js
index 2a94e4242dc..e2e33b69df0 100644
--- a/ee/client/audit/AuditPage.js
+++ b/ee/client/audit/AuditPage.js
@@ -38,14 +38,8 @@ const AuditPage = () => {
 
 	const { handleMsg, handleType, handleVisitor, handleAgent, handleUsers, handleRid, handleDateRange } = handlers;
 
-	const onChangeUsers = useMutableCallback((value, action) => {
-		if (!action) {
-			if (users.includes(value)) {
-				return;
-			}
-			return handleUsers([...users, value]);
-		}
-		handleUsers(users.filter((current) => current !== value));
+	const onChangeUsers = useMutableCallback((value) => {
+		handleUsers(value);
 	});
 
 	const apply = useMutableCallback(() => {
diff --git a/ee/client/omnichannel/cannedResponses/CannedResponseFilter.tsx b/ee/client/omnichannel/cannedResponses/CannedResponseFilter.tsx
index 38dad26ea9c..03e6c28d3a4 100644
--- a/ee/client/omnichannel/cannedResponses/CannedResponseFilter.tsx
+++ b/ee/client/omnichannel/cannedResponses/CannedResponseFilter.tsx
@@ -1,4 +1,4 @@
-import { Box, Icon, TextInput, Select, SelectOptions } from '@rocket.chat/fuselage';
+import { Box, Icon, TextInput, Select, SelectOption } from '@rocket.chat/fuselage';
 import React, { FC, FormEvent, memo, useCallback } from 'react';
 
 import AutoCompleteAgent from '../../../../client/components/AutoCompleteAgent';
@@ -23,7 +23,7 @@ const CannedResponsesFilter: FC<CannedResponsesFilterProps> = ({
 	...props
 }) => {
 	const t = useTranslation();
-	const sharingList: SelectOptions = [
+	const sharingList: SelectOption[] = [
 		['', t('All')],
 		['user', t('Private')],
 		['global', t('Public')],
diff --git a/ee/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx b/ee/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx
index 5335edb671f..e64d2f63144 100644
--- a/ee/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx
+++ b/ee/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx
@@ -15,7 +15,7 @@ type EngagementDashboardPageProps = {
 const EngagementDashboardPage = ({ tab = 'users', onSelectTab }: EngagementDashboardPageProps): ReactElement => {
 	const t = useTranslation();
 
-	const timezoneOptions = useMemo<readonly [timezone: 'utc' | 'local', label: string][]>(
+	const timezoneOptions = useMemo<[timezone: 'utc' | 'local', label: string][]>(
 		() => [
 			['utc', t('UTC_Timezone')],
 			['local', t('Local_Timezone')],
diff --git a/ee/client/views/admin/engagementDashboard/users/BusiestChatTimesSection.tsx b/ee/client/views/admin/engagementDashboard/users/BusiestChatTimesSection.tsx
index 839f0cfd6e9..da7a583b6f6 100644
--- a/ee/client/views/admin/engagementDashboard/users/BusiestChatTimesSection.tsx
+++ b/ee/client/views/admin/engagementDashboard/users/BusiestChatTimesSection.tsx
@@ -16,7 +16,7 @@ const BusiestChatTimesSection = ({ timezone }: BusiestChatTimesSectionProps): Re
 	const t = useTranslation();
 
 	const [timeUnit, setTimeUnit] = useState<TimeUnit>('hours');
-	const timeUnitOptions = useMemo<readonly [timeUnit: TimeUnit, label: string][]>(
+	const timeUnitOptions = useMemo<[timeUnit: TimeUnit, label: string][]>(
 		() => [
 			['hours', t('Hours')],
 			['days', t('Days')],
diff --git a/package-lock.json b/package-lock.json
index 123ee7675ff..ec295ff88c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5377,37 +5377,29 @@
       }
     },
     "@rocket.chat/css-in-js": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/css-in-js/-/css-in-js-0.31.3.tgz",
-      "integrity": "sha512-+jM4FApTkh++pROVBxKwg2vbyefu379JsEIDKNCLTidfJEQxh5OMHQU3KAGm7kDo0r9S77B4t7E1TZAYPRIIdA==",
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/css-in-js/-/css-in-js-0.6.3-dev.444.tgz",
+      "integrity": "sha512-5jALFeT5Y3imoGFsw10q1y3I/gO+aUl3odk5V6xNUAkQwhFfHlx1C0ik/v1vshuj9mnn7VpgAien1UOEQLrH6w==",
       "requires": {
         "@emotion/hash": "^0.8.0",
-        "@rocket.chat/css-supports": "^0.31.3",
-        "@rocket.chat/memo": "^0.31.3",
-        "@rocket.chat/stylis-logical-props-middleware": "^0.31.3",
-        "stylis": "^4.0.10"
+        "@rocket.chat/css-supports": "^0.6.3-dev.444+653a9cdf",
+        "@rocket.chat/memo": "^0.6.3-dev.444+653a9cdf",
+        "@rocket.chat/stylis-logical-props-middleware": "^0.6.3-dev.444+653a9cdf",
+        "stylis": "~4.0.13"
       }
     },
     "@rocket.chat/css-supports": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/css-supports/-/css-supports-0.31.3.tgz",
-      "integrity": "sha512-4x34zANsbD4Z2fmclrUwzW4HLRtZt9/t2yuEW6nreNGXtlQ9JVPIKXEFkxk1JAYd2frKcrbPa7EX076Lpt1S4Q==",
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/css-supports/-/css-supports-0.6.3-dev.444.tgz",
+      "integrity": "sha512-fJwg1RKYSd9hgXP+wje577IhAll6FQpTYvP8X5j/X2PnaK0ZsMmBKS6SFsxtGHRiJudkjGi4rbfueBdPQK4zvQ==",
       "requires": {
-        "@rocket.chat/memo": "^0.31.3",
-        "tslib": "^2.3.1"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
-        }
+        "@rocket.chat/memo": "^0.6.3-dev.444+653a9cdf"
       }
     },
     "@rocket.chat/emitter": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/emitter/-/emitter-0.31.3.tgz",
-      "integrity": "sha512-GVT7NepQK+j6tGj0OHHCvhM+J4Gu6UK4LegQqn5f54kla/ABviXpliJczsnfiHHcC0oC9ABWIZ+2/ZYK6lMb2A=="
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/emitter/-/emitter-0.6.3-dev.444.tgz",
+      "integrity": "sha512-GP2v7wJE5P2pBi647k5gNZCR3Kfm5c8I3mKA2T0G5Kd9CYYVp7VVXKZDstYVdyMKhRRzDOSQ0QNQD83uPfJLQw=="
     },
     "@rocket.chat/eslint-config": {
       "version": "0.4.0",
@@ -5419,30 +5411,30 @@
       }
     },
     "@rocket.chat/fuselage": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.31.3.tgz",
-      "integrity": "sha512-zyy8zJFznNOigT8Jojc5xdYQNJvfuvE/WNC7EuUnuulcRfAqYmkEgwrpCPh5mLlc7e0N8inhB+AlTQNDvPXchQ==",
-      "requires": {
-        "@rocket.chat/css-in-js": "^0.31.3",
-        "@rocket.chat/css-supports": "^0.31.3",
-        "@rocket.chat/fuselage-tokens": "^0.31.3",
-        "@rocket.chat/memo": "^0.31.3",
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.6.3-dev.444.tgz",
+      "integrity": "sha512-loNfRubNnx7z5271RixSS7lzS4YOZXDWYOjku9z52mwI/JFXy8XXlDciNjBmdtFxcfVF2uAHTllUy6DEB1abrQ==",
+      "requires": {
+        "@rocket.chat/css-in-js": "^0.6.3-dev.444+653a9cdf",
+        "@rocket.chat/css-supports": "^0.6.3-dev.444+653a9cdf",
+        "@rocket.chat/fuselage-tokens": "^0.6.3-dev.444+653a9cdf",
+        "@rocket.chat/memo": "^0.6.3-dev.444+653a9cdf",
         "invariant": "^2.2.4",
         "react-keyed-flatten-children": "^1.3.0"
       }
     },
     "@rocket.chat/fuselage-hooks": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.31.3.tgz",
-      "integrity": "sha512-HJsazdYa15z9FhPAbGjwXlWQqasx/jdja/16pru4xaiHvQ3U75bM4pXfsD33xsQGY8E+0UMAE0q34L+8id4tXQ==",
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.6.3-dev.444.tgz",
+      "integrity": "sha512-jBiHE2IZka0fLegJeXS/Y0wrn0DSUBdYeVW6rPHZ7AyDDAQNQTEgRfDWHm8IUBFlK70tChSqVMjZgjNM+ya6eQ==",
       "requires": {
         "@testing-library/user-event": "^13.5.0"
       }
     },
     "@rocket.chat/fuselage-polyfills": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-polyfills/-/fuselage-polyfills-0.31.3.tgz",
-      "integrity": "sha512-PwdXZNr5aTBpUQvA3xe5Gjtu2oiw0nfEpdKYgywzfoqxO/kzwLgMv358MwyeX6d/w9osssELaZ9KsImiZAaRzQ==",
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-polyfills/-/fuselage-polyfills-0.6.3-dev.444.tgz",
+      "integrity": "sha512-+UG7TYvb73Jj3x7ELMgggTdNmqdMkbAl2GwlwgEKtD6/WEvrHwGrBQhjeZn609hwOHw6ZZBX/eNt8oMb1sbIvg==",
       "requires": {
         "@juggle/resize-observer": "^3.3.1",
         "clipboard-polyfill": "^3.0.3",
@@ -5453,19 +5445,19 @@
       }
     },
     "@rocket.chat/fuselage-tokens": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.31.3.tgz",
-      "integrity": "sha512-jxpLtv8lmfy8H+PuqcGWn6/HzuzVMYOsiNnnkWvnJNtfk57QfB9OJbAwKdzuTDw6o+S7x3u6vvy8p3GccqcS+Q=="
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.6.3-dev.444.tgz",
+      "integrity": "sha512-sW4/21niRW2pyehGUYRjEJD7pPnw5coZCvMXap5qRcKTcMsRJGeMELFBmnXG1U7LdvwH++zhOwrn0V9ncj332Q=="
     },
     "@rocket.chat/fuselage-ui-kit": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-ui-kit/-/fuselage-ui-kit-0.31.3.tgz",
-      "integrity": "sha512-BmZ/sbvQtauFggkjqbQb1TQFvjvP1XzJonkXmfZ9tVwym7umhEQGjHX7oYK/IxrDUvjMCIMgY8tbO1tuisusdQ==",
-      "requires": {
-        "@rocket.chat/fuselage": "^0.31.3",
-        "@rocket.chat/fuselage-hooks": "^0.31.3",
-        "@rocket.chat/styled": "^0.31.3",
-        "@rocket.chat/ui-kit": "^0.31.3",
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-ui-kit/-/fuselage-ui-kit-0.6.3-dev.444.tgz",
+      "integrity": "sha512-kA9lic6Lfvd9nXASe1LB1RReNqPJHyciuqmvY/DdFGkUtS0qYdufPjyD+KxFAInGSUc7f8z6oM6vSzzNaUiSCw==",
+      "requires": {
+        "@rocket.chat/fuselage": "^0.6.3-dev.444+653a9cdf",
+        "@rocket.chat/fuselage-hooks": "^0.6.3-dev.444+653a9cdf",
+        "@rocket.chat/styled": "^0.6.3-dev.444+653a9cdf",
+        "@rocket.chat/ui-kit": "^0.6.3-dev.444+653a9cdf",
         "tslib": "^2.3.1"
       },
       "dependencies": {
@@ -5477,9 +5469,9 @@
       }
     },
     "@rocket.chat/icons": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/icons/-/icons-0.31.3.tgz",
-      "integrity": "sha512-WAXST1+xcrcI6hW/R40lnn+K12sZgRI7u8scHkW7mkNe7tpzyLlK4GEVeKojgTttVpKaju/sJvCjXFibWmUQkA=="
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/icons/-/icons-0.6.3-dev.444.tgz",
+      "integrity": "sha512-YRqzjcK3AuJoVkg0XpZO0toriGK34wFcUlfZBE4PRj/7bE+OoX4mOJsb8yqH3nxK09iZEaCIOKeUNEGrUfldgw=="
     },
     "@rocket.chat/livechat": {
       "version": "1.12.0",
@@ -5550,12 +5542,12 @@
       }
     },
     "@rocket.chat/logo": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/logo/-/logo-0.31.3.tgz",
-      "integrity": "sha512-o6E1N4Py5R5tfgDWCpGcqZpakP9GZVchsvYUa3jw//rq2HwEq2ut363o1vCcmAEhMbCFeoWYUbFCm0GDs2/UoA==",
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/logo/-/logo-0.6.3-dev.444.tgz",
+      "integrity": "sha512-Q7OWPA2xEw2reYEeDnOyejLH7wpb3GpEzNUH8A/c/KSXWsRZiDOcqlJZo0B9vSx/0OviA9K2QMdFBsRDNJxINA==",
       "requires": {
-        "@rocket.chat/fuselage-hooks": "^0.31.3",
-        "@rocket.chat/styled": "^0.31.3",
+        "@rocket.chat/fuselage-hooks": "^0.6.3-dev.444+653a9cdf",
+        "@rocket.chat/styled": "^0.6.3-dev.444+653a9cdf",
         "tslib": "^2.3.1"
       },
       "dependencies": {
@@ -5567,24 +5559,14 @@
       }
     },
     "@rocket.chat/memo": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/memo/-/memo-0.31.3.tgz",
-      "integrity": "sha512-NBSvTW60mqaBAC4kkvUHZrS0wG02gLUZ+xB04dra+7rwllKw4WtR4PotgrHV+y3t2qk92yTE+9p5G7h5YmOqlQ==",
-      "requires": {
-        "tslib": "^2.3.1"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
-        }
-      }
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/memo/-/memo-0.6.3-dev.444.tgz",
+      "integrity": "sha512-gZ/SfXbd430wYR+t/O8IfxY3L/TjL0XqkexCXOYZ21znKSkEua8tUmb70Cg8yATbCXDUvL/7Y74CuUJtW12uFQ=="
     },
     "@rocket.chat/message-parser": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/message-parser/-/message-parser-0.31.3.tgz",
-      "integrity": "sha512-X660+oI4AB+WyEgZFo4Q+LwzGuvGqarJp1dBaCsSk7GnM31fizWMXeQM05AcrpswSWb3sg8vAhnGNkbd9EBgNw=="
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/message-parser/-/message-parser-0.6.3-dev.444.tgz",
+      "integrity": "sha512-p/NiSxHWqpiM+v79z2olBVFKJys3tZW60Y6mh3AfpoVFGh6HdykPCPrbmJg+62SrpJ6UACYx10LCeKI5dHFNfg=="
     },
     "@rocket.chat/mp3-encoder": {
       "version": "0.24.0",
@@ -5595,108 +5577,21 @@
       }
     },
     "@rocket.chat/onboarding-ui": {
-      "version": "0.6.3-dev.431",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/onboarding-ui/-/onboarding-ui-0.6.3-dev.431.tgz",
-      "integrity": "sha512-fA5FdIisopH2O4QGs/nKmTxKj8VoHHwl7oKuSaalXrX6MOxwcgumjRAOxxypFTRq+jpLz0OT9Mv+caYyg7bS8w==",
-      "requires": {
-        "@rocket.chat/fuselage": "^0.6.3-dev.431+d3bbf85d",
-        "@rocket.chat/fuselage-hooks": "^0.6.3-dev.431+d3bbf85d",
-        "@rocket.chat/icons": "^0.6.3-dev.431+d3bbf85d",
-        "@rocket.chat/logo": "^0.6.3-dev.431+d3bbf85d",
-        "@rocket.chat/styled": "^0.6.3-dev.431+d3bbf85d",
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/onboarding-ui/-/onboarding-ui-0.6.3-dev.444.tgz",
+      "integrity": "sha512-1Xbd7JT9yOMqHHOGUFCioHjJcjWh0ismYIRERLyHCizvV7oV6EZr0vsODPsmwydj+hHYfYtSyBGiLdooBJyRZQ==",
+      "requires": {
+        "@rocket.chat/fuselage": "^0.6.3-dev.444+653a9cdf",
+        "@rocket.chat/fuselage-hooks": "^0.6.3-dev.444+653a9cdf",
+        "@rocket.chat/icons": "^0.6.3-dev.444+653a9cdf",
+        "@rocket.chat/logo": "^0.6.3-dev.444+653a9cdf",
+        "@rocket.chat/styled": "^0.6.3-dev.444+653a9cdf",
         "i18next": "~21.6.11",
         "react-hook-form": "~7.27.0",
         "react-i18next": "~11.15.4",
         "tslib": "~2.3.1"
       },
       "dependencies": {
-        "@rocket.chat/css-in-js": {
-          "version": "0.6.3-dev.431",
-          "resolved": "https://registry.npmjs.org/@rocket.chat/css-in-js/-/css-in-js-0.6.3-dev.431.tgz",
-          "integrity": "sha512-wsjUz52mTMfZXl1Trx9uxpl7lrFNxO4lLlfdXyOmuvbfE9xgKbqBKXBhN6IZjgCoVRoYwtXSd+1k2SiXx2/vJw==",
-          "requires": {
-            "@emotion/hash": "^0.8.0",
-            "@rocket.chat/css-supports": "^0.6.3-dev.431+d3bbf85d",
-            "@rocket.chat/memo": "^0.6.3-dev.431+d3bbf85d",
-            "@rocket.chat/stylis-logical-props-middleware": "^0.6.3-dev.431+d3bbf85d",
-            "stylis": "~4.0.13"
-          }
-        },
-        "@rocket.chat/css-supports": {
-          "version": "0.6.3-dev.431",
-          "resolved": "https://registry.npmjs.org/@rocket.chat/css-supports/-/css-supports-0.6.3-dev.431.tgz",
-          "integrity": "sha512-Xuus3OAWQXaWc3kvKTz8vh7/FVsNm05zK/dH6iH+o0XDqXmh35/jrR8dbeoA7uOIMfnreLrWW/h88tbn4HahLA==",
-          "requires": {
-            "@rocket.chat/memo": "^0.6.3-dev.431+d3bbf85d"
-          }
-        },
-        "@rocket.chat/fuselage": {
-          "version": "0.6.3-dev.431",
-          "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.6.3-dev.431.tgz",
-          "integrity": "sha512-1tRER6zctLHQrhalt8e2YMXuCA53bzlsNoqQEmDjHhZB5dSDYZs6Fn+iodu/iek+NzEZi4fXlB/VPKcfSxdT5Q==",
-          "requires": {
-            "@rocket.chat/css-in-js": "^0.6.3-dev.431+d3bbf85d",
-            "@rocket.chat/css-supports": "^0.6.3-dev.431+d3bbf85d",
-            "@rocket.chat/fuselage-tokens": "^0.6.3-dev.431+d3bbf85d",
-            "@rocket.chat/memo": "^0.6.3-dev.431+d3bbf85d",
-            "invariant": "^2.2.4",
-            "react-keyed-flatten-children": "^1.3.0"
-          }
-        },
-        "@rocket.chat/fuselage-hooks": {
-          "version": "0.6.3-dev.431",
-          "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.6.3-dev.431.tgz",
-          "integrity": "sha512-OJFzZ8rcKZLXUL8slr5ybmSuGBXo3yWDqY2fjvprDagqCScYHsvr4semVGaCT6QwTIClcZSLJOMM+Nunpp9beQ==",
-          "requires": {
-            "@testing-library/user-event": "^13.5.0"
-          }
-        },
-        "@rocket.chat/fuselage-tokens": {
-          "version": "0.6.3-dev.431",
-          "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.6.3-dev.431.tgz",
-          "integrity": "sha512-pySxIPVX6CYqxpRhzd6JlJKOon3lNfQqdzls6PherU35c237UmIQpcJxUB8R4j8WqtrjrY5/Cnw/D6W16iPxsQ=="
-        },
-        "@rocket.chat/icons": {
-          "version": "0.6.3-dev.431",
-          "resolved": "https://registry.npmjs.org/@rocket.chat/icons/-/icons-0.6.3-dev.431.tgz",
-          "integrity": "sha512-aVb8oKKFtl30d1hxp1jxduKNN++bP0gsvCriXWM6PqX0VH9Pa8lHQ7nlVeO2xsBHwGKr3dqwkQLSSZiEJxyMEQ=="
-        },
-        "@rocket.chat/logo": {
-          "version": "0.6.3-dev.431",
-          "resolved": "https://registry.npmjs.org/@rocket.chat/logo/-/logo-0.6.3-dev.431.tgz",
-          "integrity": "sha512-E1cSLj6+3y1r+Z7nh7vIIny0edDZZg855XRT0u6O9B2kooQg3tb8KsxA3NfmpQZfFc8IQ7uwGpjowbabtnY4ZA==",
-          "requires": {
-            "@rocket.chat/fuselage-hooks": "^0.6.3-dev.431+d3bbf85d",
-            "@rocket.chat/styled": "^0.6.3-dev.431+d3bbf85d",
-            "tslib": "^2.3.1"
-          }
-        },
-        "@rocket.chat/memo": {
-          "version": "0.6.3-dev.431",
-          "resolved": "https://registry.npmjs.org/@rocket.chat/memo/-/memo-0.6.3-dev.431.tgz",
-          "integrity": "sha512-GVfcJz738XbqsOQcDFQt/OLD0QYcHtKv7wwSAwqRbUvrz9OZ4elJZauNzkgDeq5w3ZGn/6oo9dCajrHYRlDVvQ==",
-          "requires": {
-            "tslib": "^2.3.1"
-          }
-        },
-        "@rocket.chat/styled": {
-          "version": "0.6.3-dev.431",
-          "resolved": "https://registry.npmjs.org/@rocket.chat/styled/-/styled-0.6.3-dev.431.tgz",
-          "integrity": "sha512-3gd9Q/P0MZ/6GJMzuGH14GQNO5lWo/pWAfbpfCogG2GhtuJZiN33VR+vzbzlTbjCc7TboorqOFByOXeyPz+aLQ==",
-          "requires": {
-            "@rocket.chat/css-in-js": "^0.6.3-dev.431+d3bbf85d",
-            "tslib": "^2.3.1"
-          }
-        },
-        "@rocket.chat/stylis-logical-props-middleware": {
-          "version": "0.6.3-dev.431",
-          "resolved": "https://registry.npmjs.org/@rocket.chat/stylis-logical-props-middleware/-/stylis-logical-props-middleware-0.6.3-dev.431.tgz",
-          "integrity": "sha512-uElC6eWkXzW8MHAhrR/GWmyTbMCGW+3l4X2+oQq/CyUYS7AjBGmczXFJYu+l2a+TRhlP6YZLb22TCTu+g7bEvA==",
-          "requires": {
-            "@rocket.chat/css-supports": "^0.6.3-dev.431+d3bbf85d",
-            "tslib": "^2.3.1"
-          }
-        },
         "i18next": {
           "version": "21.6.11",
           "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.6.11.tgz",
@@ -5706,9 +5601,9 @@
           }
         },
         "react-hook-form": {
-          "version": "7.27.0",
-          "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.27.0.tgz",
-          "integrity": "sha512-NEh3Qbz1Rg3w95SRZv0kHorHN3frtMKasplznMBr8RkFrE4pVxjd/zo3clnFXpD0FppUVHBMfsTMtTsa6wyQrA=="
+          "version": "7.27.1",
+          "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.27.1.tgz",
+          "integrity": "sha512-N3a7A6zIQ8DJeThisVZGtOUabTbJw+7DHJidmB9w8m3chckv2ZWKb5MHps9d2pPJqmCDoWe53Bos56bYmJms5w=="
         },
         "tslib": {
           "version": "2.3.1",
@@ -5760,9 +5655,9 @@
       }
     },
     "@rocket.chat/string-helpers": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/string-helpers/-/string-helpers-0.31.3.tgz",
-      "integrity": "sha512-3F0rE2nEbsGO2VmVtugYSuLSZs7qlCaDjmjKUawyOh2c5bULEZy1SP0puraoNds+JMeGZLCtW5R50UjLN1VFug==",
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/string-helpers/-/string-helpers-0.6.3-dev.444.tgz",
+      "integrity": "sha512-ts+Yp23oiYWJIb/1O/VD/cknJCiebj/pUVRFSEeSIgNNm838k9AmFacwHO7afz6X1QuJO/owAELEXWFtIoJpHQ==",
       "requires": {
         "tslib": "^2.3.1"
       },
@@ -5775,11 +5670,11 @@
       }
     },
     "@rocket.chat/styled": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/styled/-/styled-0.31.3.tgz",
-      "integrity": "sha512-VcEHAalYEbVXi21Myfme17lVlVDpaQohQi6CGRyPzRbiiwC8y+mCk66NOw+7OedhNi4pv09XGJfJCkJZRFbapA==",
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/styled/-/styled-0.6.3-dev.444.tgz",
+      "integrity": "sha512-6bxid5DPl0ep97G06m17Vd9x+XT6JLvPalI/pYnpCnGDD13ZAUNzfT4hstj1GEaBZmiYCu79HSAC/9/Otf8DjA==",
       "requires": {
-        "@rocket.chat/css-in-js": "^0.31.3",
+        "@rocket.chat/css-in-js": "^0.6.3-dev.444+653a9cdf",
         "tslib": "^2.3.1"
       },
       "dependencies": {
@@ -5791,11 +5686,11 @@
       }
     },
     "@rocket.chat/stylis-logical-props-middleware": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/stylis-logical-props-middleware/-/stylis-logical-props-middleware-0.31.3.tgz",
-      "integrity": "sha512-4/gb851u1E6UV6+w2FZ4uhgc/gCBSRwoweGPcGQuDsbXXF4b7u66pU0uTmk6peC3PvLtr1v6+5SJea1Cg6AiQg==",
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/stylis-logical-props-middleware/-/stylis-logical-props-middleware-0.6.3-dev.444.tgz",
+      "integrity": "sha512-xf+fcGJJscxfYNvi/YhKPCdCvRz8+z/sLEvKpGgdLjrwX42Nt/5l05gQKbxfhkXFwgm0X0qtYtTaB1Y1Dv/eSA==",
       "requires": {
-        "@rocket.chat/css-supports": "^0.31.3",
+        "@rocket.chat/css-supports": "^0.6.3-dev.444+653a9cdf",
         "tslib": "^2.3.1"
       },
       "dependencies": {
@@ -5807,9 +5702,9 @@
       }
     },
     "@rocket.chat/ui-kit": {
-      "version": "0.31.3",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/ui-kit/-/ui-kit-0.31.3.tgz",
-      "integrity": "sha512-dXdRYIvnoslKwoPrSFSeVm9055vYWmjNxEl06KLtMBXvlSmxUrJoTr48VWsagxS0jFhR7USUhrvEYItZXRexJg=="
+      "version": "0.6.3-dev.444",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/ui-kit/-/ui-kit-0.6.3-dev.444.tgz",
+      "integrity": "sha512-L5G6ugAcqQVOSDj6WQoxhM6LFLO5r+eyyVE3xB1Q2kvbfq+iuDEuw7Ft/RBu+uBZ2Q78YYSIgkBAFc5pLZ6GAA=="
     },
     "@samverschueren/stream-to-observable": {
       "version": "0.3.1",
@@ -24471,7 +24366,7 @@
       "dev": true
     },
     "lamejs": {
-      "version": "git+https://github.com/zhuker/lamejs.git#582bbba6a12f981b984d8fb9e1874499fed85675",
+      "version": "git+https://github.com/zhuker/lamejs.git#564612b5b57336238a5920ba4c301b49f7cb2bab",
       "from": "git+https://github.com/zhuker/lamejs.git",
       "requires": {
         "use-strict": "1.0.1"
diff --git a/package.json b/package.json
index 744d12b2e05..57170f466fb 100644
--- a/package.json
+++ b/package.json
@@ -177,21 +177,21 @@
 		"@nivo/line": "0.62.0",
 		"@nivo/pie": "0.73.0",
 		"@rocket.chat/apps-engine": "^1.31.0-alpha.5889",
-		"@rocket.chat/css-in-js": "^0.31.3",
-		"@rocket.chat/emitter": "^0.31.3",
-		"@rocket.chat/fuselage": "^0.31.3",
-		"@rocket.chat/fuselage-hooks": "^0.31.3",
-		"@rocket.chat/fuselage-polyfills": "^0.31.3",
-		"@rocket.chat/fuselage-tokens": "^0.31.3",
-		"@rocket.chat/fuselage-ui-kit": "^0.31.3",
-		"@rocket.chat/icons": "^0.31.3",
-		"@rocket.chat/logo": "^0.31.3",
-		"@rocket.chat/memo": "^0.31.3",
-		"@rocket.chat/message-parser": "^0.31.3",
+		"@rocket.chat/css-in-js": "~0.6.3-dev.444",
+		"@rocket.chat/emitter": "~0.6.3-dev.444",
+		"@rocket.chat/fuselage": "~0.6.3-dev.444",
+		"@rocket.chat/fuselage-hooks": "~0.6.3-dev.444",
+		"@rocket.chat/fuselage-polyfills": "~0.6.3-dev.444",
+		"@rocket.chat/fuselage-tokens": "~0.6.3-dev.444",
+		"@rocket.chat/fuselage-ui-kit": "~0.6.3-dev.444",
+		"@rocket.chat/icons": "~0.6.3-dev.444",
+		"@rocket.chat/logo": "~0.6.3-dev.444",
+		"@rocket.chat/memo": "~0.6.3-dev.444",
+		"@rocket.chat/message-parser": "~0.6.3-dev.444",
 		"@rocket.chat/mp3-encoder": "^0.24.0",
-		"@rocket.chat/onboarding-ui": "^0.6.3-dev.431",
-		"@rocket.chat/string-helpers": "^0.31.3",
-		"@rocket.chat/ui-kit": "^0.31.3",
+		"@rocket.chat/onboarding-ui": "~0.6.3-dev.444",
+		"@rocket.chat/string-helpers": "~0.6.3-dev.444",
+		"@rocket.chat/ui-kit": "~0.6.3-dev.444",
 		"@slack/client": "^4.12.0",
 		"@types/cookie": "^0.4.1",
 		"@types/lodash": "^4.14.177",