From 7dddaf5c597058ceee2ef4aae99eac5713ad4223 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Mon, 15 Jan 2024 16:07:39 -0300
Subject: [PATCH 01/19] introduce users multi select POC

---
 .../UserAutoCompleteMultipleOption.tsx        |  36 ++++
 .../UserAutoCompleteMultipleOptions.tsx       |  37 ++++
 .../UsersSelectElement/UsersSelectElement.tsx | 169 ++++++++++++++++++
 .../src/stories/payloads/actions.ts           |  20 +--
 .../surfaces/ContextualBarSurfaceRenderer.tsx |  20 +++
 .../src/blocks/elements/UsersSelectElement.ts |   3 +-
 packages/ui-kit/src/rendering/ActionOf.ts     |   2 +-
 7 files changed, 275 insertions(+), 12 deletions(-)
 create mode 100644 packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOption.tsx
 create mode 100644 packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOptions.tsx
 create mode 100644 packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx

diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOption.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOption.tsx
new file mode 100644
index 000000000000..0e4a072464dc
--- /dev/null
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOption.tsx
@@ -0,0 +1,36 @@
+import type { IUser } from '@rocket.chat/core-typings';
+import { Option, OptionDescription } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+
+type UserAutoCompleteMultipleOptionProps = {
+  label: {
+    _federated?: boolean;
+  } & Pick<IUser, 'username' | 'name'>;
+};
+
+const UserAutoCompleteMultipleOption = ({
+  label,
+  ...props
+}: UserAutoCompleteMultipleOptionProps): ReactElement => {
+  const { name, username, _federated } = label;
+
+  return (
+    <Option
+      {...props}
+      data-qa-type='autocomplete-user-option'
+      icon={_federated ? 'globe' : undefined}
+      key={username}
+      label={
+        (
+          <>
+            {name || username}{' '}
+            {!_federated && <OptionDescription>({username})</OptionDescription>}
+          </>
+        ) as any
+      }
+      children={undefined}
+    />
+  );
+};
+
+export default UserAutoCompleteMultipleOption;
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOptions.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOptions.tsx
new file mode 100644
index 000000000000..4564d7e787d5
--- /dev/null
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOptions.tsx
@@ -0,0 +1,37 @@
+import { Options } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactElement, Ref } from 'react';
+import { forwardRef, createContext, useContext } from 'react';
+
+import UserAutoCompleteMultipleOption from './UserAutoCompleteMultipleOption';
+
+// This is a hack in order to bypass the MultiSelect filter.
+// The select requires a forwarded ref component in the renderOptions property
+// but we also need to pass internal state to this renderer, as well as the props that also come from the Select.
+
+type OptionsContextValue = {
+  options: ComponentProps<typeof Options>['options'];
+};
+
+export const OptionsContext = createContext<OptionsContextValue>({
+  options: [],
+});
+const UserAutoCompleteMultipleOptions = forwardRef(
+  function UserAutoCompleteMultipleOptions(
+    { onSelect, ...props }: ComponentProps<typeof Options>,
+    ref: Ref<HTMLElement>
+  ): ReactElement {
+    const { options } = useContext(OptionsContext);
+    return (
+      <Options
+        {...props}
+        key='AutocompleteOptions'
+        options={options}
+        onSelect={onSelect}
+        ref={ref}
+        renderItem={UserAutoCompleteMultipleOption}
+      />
+    );
+  }
+);
+
+export default UserAutoCompleteMultipleOptions;
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
new file mode 100644
index 000000000000..364685ab7542
--- /dev/null
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
@@ -0,0 +1,169 @@
+import { MultiSelectFiltered, Box, Chip } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import type * as UiKit from '@rocket.chat/ui-kit';
+import { useQuery } from '@tanstack/react-query';
+import type { ReactElement } from 'react';
+import { memo, useState, useCallback, useMemo } from 'react';
+
+import { useStringFromTextObject } from '../../hooks/useStringFromTextObject';
+import { useUiKitState } from '../../hooks/useUiKitState';
+import type { BlockProps } from '../../utils/BlockProps';
+import AutocompleteOptions, {
+  OptionsContext,
+} from './UserAutoCompleteMultipleOptions';
+
+type UsersSelectElementProps = BlockProps<UiKit.UsersSelectElement>;
+
+type UserAutoCompleteOptionType = {
+  name: string;
+  username: string;
+  _federated?: boolean;
+};
+
+type UserAutoCompleteOptions = {
+  [k: string]: UserAutoCompleteOptionType;
+};
+
+const matrixRegex = new RegExp('@(.*:.*)');
+
+const UsersSelectElement = ({
+  block,
+  context,
+}: UsersSelectElementProps): ReactElement => {
+  const [{ loading, value, error }, action] = useUiKitState(block, context);
+  const fromTextObjectToString = useStringFromTextObject();
+  const [filter, setFilter] = useState('');
+  const [selectedCache, setSelectedCache] = useState<UserAutoCompleteOptions>(
+    {}
+  );
+
+  const debouncedFilter = useDebouncedValue(filter, 500);
+  const getUsers = useEndpoint('GET', '/v1/users.autocomplete');
+
+  const { data } = useQuery(
+    ['users.autocomplete', debouncedFilter],
+    async () => {
+      const users = await getUsers({
+        selector: JSON.stringify({ term: debouncedFilter }),
+      });
+      const options = users.items.map(
+        (item): [string, UserAutoCompleteOptionType] => [item.username, item]
+      );
+
+      // Add extra option if filter text matches `username:server`
+      // Used to add federated users that do not exist yet
+      if (matrixRegex.test(debouncedFilter)) {
+        options.unshift([
+          debouncedFilter,
+          {
+            name: debouncedFilter,
+            username: debouncedFilter,
+            _federated: true,
+          },
+        ]);
+      }
+
+      return options;
+    },
+    { keepPreviousData: true }
+  );
+
+  const options = useMemo(() => data || [], [data]);
+
+  const onAddUser = useCallback(
+    (username: string): void => {
+      const user = options.find(([val]) => val === username)?.[1];
+      if (!user) {
+        throw new Error(
+          'UserAutoCompleteMultiple - onAddSelected - failed to cache option'
+        );
+      }
+      setSelectedCache((selectedCache) => ({
+        ...selectedCache,
+        [username]: user,
+      }));
+    },
+    [setSelectedCache, options]
+  );
+
+  const onRemoveUser = useCallback(
+    (username: string): void =>
+      setSelectedCache((selectedCache) => {
+        const users = { ...selectedCache };
+        delete users[username];
+        return users;
+      }),
+    [setSelectedCache]
+  );
+
+  const handleChange = useCallback(
+    (value) => {
+      action({ target: { value } });
+    },
+    [action]
+  );
+
+  const handleOnChange = useCallback(
+    (usernames: string[]) => {
+      handleChange(usernames);
+      const newAddedUsername = usernames.filter(
+        (username) => !value.includes(username)
+      )[0];
+      const removedUsername = value.filter(
+        (username) => !usernames.includes(username)
+      )[0];
+      setFilter('');
+      newAddedUsername && onAddUser(newAddedUsername);
+      removedUsername && onRemoveUser(removedUsername);
+    },
+    [handleChange, setFilter, onAddUser, onRemoveUser, value]
+  );
+
+  return (
+    <OptionsContext.Provider value={{ options }}>
+      <MultiSelectFiltered
+        error={error}
+        disabled={loading}
+        data-qa-type='user-auto-complete-input'
+        placeholder={fromTextObjectToString(block.placeholder)}
+        value={value}
+        onChange={handleOnChange}
+        filter={filter}
+        setFilter={setFilter}
+        renderSelected={({
+          value,
+          onMouseDown,
+        }: {
+          value: string;
+          onMouseDown: () => void;
+        }) => {
+          const currentCachedOption = selectedCache[value] || {};
+
+          return (
+            <Chip
+              key={value}
+              height='x20'
+              onMouseDown={onMouseDown}
+              mie={4}
+              mb={2}
+            >
+              <Box is='span' margin='none' mis={4}>
+                {currentCachedOption.name ||
+                  currentCachedOption.username ||
+                  value}
+              </Box>
+            </Chip>
+          );
+        }}
+        renderOptions={AutocompleteOptions}
+        options={options
+          .concat(Object.entries(selectedCache))
+          .map(([, item]) => [item.username, item.name || item.username])}
+        data-qa='create-channel-users-autocomplete'
+      />
+    </OptionsContext.Provider>
+  );
+};
+
+export default memo(UsersSelectElement);
diff --git a/packages/fuselage-ui-kit/src/stories/payloads/actions.ts b/packages/fuselage-ui-kit/src/stories/payloads/actions.ts
index 2b248412cc23..5a9ef9bd8cc4 100644
--- a/packages/fuselage-ui-kit/src/stories/payloads/actions.ts
+++ b/packages/fuselage-ui-kit/src/stories/payloads/actions.ts
@@ -31,11 +31,11 @@ export const actionsWithAllSelects: readonly UiKit.LayoutBlock[] = [
         blockId: 'dummy-block-id',
         actionId: 'dummy-action-id',
         type: 'users_select',
-        // placeholder: {
-        //   type: 'plain_text',
-        //   text: 'Select a user',
-        //   emoji: true,
-        // },
+        placeholder: {
+          type: 'plain_text',
+          text: 'Select a user',
+          emoji: true,
+        },
       },
       {
         appId: 'dummy-app-id',
@@ -122,11 +122,11 @@ export const actionsWithInitializedSelects: readonly UiKit.LayoutBlock[] = [
         blockId: 'dummy-block-id',
         actionId: 'dummy-action-id',
         type: 'users_select',
-        // placeholder: {
-        //   type: 'plain_text',
-        //   text: 'Select a user',
-        //   emoji: true,
-        // },
+        placeholder: {
+          type: 'plain_text',
+          text: 'Select a user',
+          emoji: true,
+        },
         // initialUser: 'U123',
       },
       {
diff --git a/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurfaceRenderer.tsx b/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurfaceRenderer.tsx
index 48b678365a7f..c18cfc5e5c26 100644
--- a/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurfaceRenderer.tsx
+++ b/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurfaceRenderer.tsx
@@ -3,6 +3,7 @@ import type { ReactElement } from 'react';
 
 import TabNavigationBlock from '../blocks/TabNavigationBlock';
 import { AppIdProvider } from '../contexts/AppIdContext';
+import UsersSelectElement from '../elements/UsersSelectElement/UsersSelectElement';
 import {
   FuselageSurfaceRenderer,
   renderTextObject,
@@ -27,6 +28,25 @@ export class ContextualBarSurfaceRenderer extends FuselageSurfaceRenderer {
 
   mrkdwn = renderTextObject;
 
+  users_select(
+    block: UiKit.UsersSelectElement,
+    context: UiKit.BlockContext,
+    index: number
+  ): ReactElement | null {
+    if (context === UiKit.BlockContext.FORM) {
+      return (
+        <UsersSelectElement
+          block={block}
+          context={context}
+          index={index}
+          surfaceRenderer={this}
+        />
+      );
+    }
+
+    return null;
+  }
+
   tab_navigation(
     block: UiKit.ExperimentalTabNavigationBlock,
     context: UiKit.BlockContext,
diff --git a/packages/ui-kit/src/blocks/elements/UsersSelectElement.ts b/packages/ui-kit/src/blocks/elements/UsersSelectElement.ts
index df49c6e7af76..2ab78dbd8749 100644
--- a/packages/ui-kit/src/blocks/elements/UsersSelectElement.ts
+++ b/packages/ui-kit/src/blocks/elements/UsersSelectElement.ts
@@ -1,6 +1,7 @@
 import type { Actionable } from '../Actionable';
+import type { PlainText } from '../text/PlainText';
 
-/** @todo */
 export type UsersSelectElement = Actionable<{
 	type: 'users_select';
+	placeholder?: PlainText;
 }>;
diff --git a/packages/ui-kit/src/rendering/ActionOf.ts b/packages/ui-kit/src/rendering/ActionOf.ts
index cae8829fde5c..9706b8246483 100644
--- a/packages/ui-kit/src/rendering/ActionOf.ts
+++ b/packages/ui-kit/src/rendering/ActionOf.ts
@@ -43,7 +43,7 @@ export type ActionOf<TElement extends ActionableElement> = TElement extends Butt
 	: TElement extends StaticSelectElement
 	? StaticSelectElement['initialValue']
 	: TElement extends UsersSelectElement
-	? unknown
+	? Option['value'][]
 	: TElement extends ToggleSwitchElement
 	? Option['value'][]
 	: TElement extends RadioButtonElement

From eeedaf2c013468e27d2d04d9a00d3f642f3193c9 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Mon, 12 Feb 2024 16:01:10 -0300
Subject: [PATCH 02/19] user auto complete

---
 ...> MulitUserAutoCompleteMultipleOption.tsx} |   2 +
 ... MultiUserAutoCompleteMultipleOptions.tsx} |   8 +-
 .../MultiUsersSelectElement.tsx               | 157 +++++++++++++++++
 .../UsersSelectElement/UsersSelectElement.tsx | 164 +++++-------------
 .../surfaces/ContextualBarSurfaceRenderer.tsx |  20 +++
 .../elements/MultiUsersSelectElement.ts       |   3 +-
 packages/ui-kit/src/rendering/ActionOf.ts     |   4 +-
 7 files changed, 226 insertions(+), 132 deletions(-)
 rename packages/fuselage-ui-kit/src/elements/UsersSelectElement/{UserAutoCompleteMultipleOption.tsx => MulitUserAutoCompleteMultipleOption.tsx} (88%)
 rename packages/fuselage-ui-kit/src/elements/UsersSelectElement/{UserAutoCompleteMultipleOptions.tsx => MultiUserAutoCompleteMultipleOptions.tsx} (80%)
 create mode 100644 packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx

diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOption.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserAutoCompleteMultipleOption.tsx
similarity index 88%
rename from packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOption.tsx
rename to packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserAutoCompleteMultipleOption.tsx
index 0e4a072464dc..49165d160660 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOption.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserAutoCompleteMultipleOption.tsx
@@ -1,5 +1,6 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { Option, OptionDescription } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import type { ReactElement } from 'react';
 
 type UserAutoCompleteMultipleOptionProps = {
@@ -18,6 +19,7 @@ const UserAutoCompleteMultipleOption = ({
     <Option
       {...props}
       data-qa-type='autocomplete-user-option'
+      avatar={<UserAvatar username={username || ''} size='x20' />}
       icon={_federated ? 'globe' : undefined}
       key={username}
       label={
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOptions.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUserAutoCompleteMultipleOptions.tsx
similarity index 80%
rename from packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOptions.tsx
rename to packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUserAutoCompleteMultipleOptions.tsx
index 4564d7e787d5..ae1a8210bd87 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserAutoCompleteMultipleOptions.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUserAutoCompleteMultipleOptions.tsx
@@ -2,7 +2,7 @@ import { Options } from '@rocket.chat/fuselage';
 import type { ComponentProps, ReactElement, Ref } from 'react';
 import { forwardRef, createContext, useContext } from 'react';
 
-import UserAutoCompleteMultipleOption from './UserAutoCompleteMultipleOption';
+import UserAutoCompleteMultipleOption from './MulitUserAutoCompleteMultipleOption';
 
 // This is a hack in order to bypass the MultiSelect filter.
 // The select requires a forwarded ref component in the renderOptions property
@@ -15,8 +15,8 @@ type OptionsContextValue = {
 export const OptionsContext = createContext<OptionsContextValue>({
   options: [],
 });
-const UserAutoCompleteMultipleOptions = forwardRef(
-  function UserAutoCompleteMultipleOptions(
+const MultiUserAutoCompleteMultipleOptions = forwardRef(
+  function MultiUserAutoCompleteMultipleOptions(
     { onSelect, ...props }: ComponentProps<typeof Options>,
     ref: Ref<HTMLElement>
   ): ReactElement {
@@ -34,4 +34,4 @@ const UserAutoCompleteMultipleOptions = forwardRef(
   }
 );
 
-export default UserAutoCompleteMultipleOptions;
+export default MultiUserAutoCompleteMultipleOptions;
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
new file mode 100644
index 000000000000..0293a04f21bf
--- /dev/null
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
@@ -0,0 +1,157 @@
+import { MultiSelectFiltered, Box, Chip } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import type * as UiKit from '@rocket.chat/ui-kit';
+import { useQuery } from '@tanstack/react-query';
+import type { ReactElement } from 'react';
+import { memo, useState, useCallback, useMemo } from 'react';
+
+import { useStringFromTextObject } from '../../hooks/useStringFromTextObject';
+import { useUiKitState } from '../../hooks/useUiKitState';
+import type { BlockProps } from '../../utils/BlockProps';
+import AutocompleteOptions, {
+  OptionsContext,
+} from './MultiUserAutoCompleteMultipleOptions';
+
+type MultiUsersSelectElementProps = BlockProps<UiKit.MultiUsersSelectElement>;
+
+type MultiUserAutoCompleteOptionType = {
+  name: string;
+  username: string;
+};
+
+type MultiUserAutoCompleteOptions = {
+  [k: string]: MultiUserAutoCompleteOptionType;
+};
+
+const MultiUsersSelectElement = ({
+  block,
+  context,
+}: MultiUsersSelectElementProps): ReactElement => {
+  const [{ loading, value, error }, action] = useUiKitState(block, context);
+  const fromTextObjectToString = useStringFromTextObject();
+  const [filter, setFilter] = useState('');
+  const [selectedCache, setSelectedCache] =
+    useState<MultiUserAutoCompleteOptions>({});
+
+  const debouncedFilter = useDebouncedValue(filter, 500);
+  const getUsers = useEndpoint('GET', '/v1/users.autocomplete');
+
+  const { data } = useQuery(
+    ['users.autocomplete', debouncedFilter],
+    async () => {
+      const users = await getUsers({
+        selector: JSON.stringify({ term: debouncedFilter }),
+      });
+      const options = users.items.map(
+        (item): [string, MultiUserAutoCompleteOptionType] => [
+          item.username,
+          item,
+        ]
+      );
+
+      return options;
+    },
+    { keepPreviousData: true }
+  );
+
+  const options = useMemo(() => data || [], [data]);
+
+  const onAddUser = useCallback(
+    (username: string): void => {
+      const user = options.find(([val]) => val === username)?.[1];
+      if (!user) {
+        throw new Error(
+          'UserAutoCompleteMultiple - onAddSelected - failed to cache option'
+        );
+      }
+      setSelectedCache((selectedCache) => ({
+        ...selectedCache,
+        [username]: user,
+      }));
+    },
+    [setSelectedCache, options]
+  );
+
+  const onRemoveUser = useCallback(
+    (username: string): void =>
+      setSelectedCache((selectedCache) => {
+        const users = { ...selectedCache };
+        delete users[username];
+        return users;
+      }),
+    [setSelectedCache]
+  );
+
+  const handleChange = useCallback(
+    (value) => {
+      action({ target: { value } });
+    },
+    [action]
+  );
+
+  const handleOnChange = useCallback(
+    (usernames: string[]) => {
+      handleChange(usernames);
+      const newAddedUsername = usernames.filter(
+        (username) => !value.includes(username)
+      )[0];
+      const removedUsername = value.filter(
+        (username) => !usernames.includes(username)
+      )[0];
+      setFilter('');
+      newAddedUsername && onAddUser(newAddedUsername);
+      removedUsername && onRemoveUser(removedUsername);
+    },
+    [handleChange, setFilter, onAddUser, onRemoveUser, value]
+  );
+
+  return (
+    <OptionsContext.Provider value={{ options }}>
+      <MultiSelectFiltered
+        error={error}
+        disabled={loading}
+        data-qa-type='user-auto-complete-input'
+        placeholder={fromTextObjectToString(block.placeholder)}
+        value={value}
+        onChange={handleOnChange}
+        filter={filter}
+        setFilter={setFilter}
+        renderSelected={({
+          value,
+          onMouseDown,
+        }: {
+          value: string;
+          onMouseDown: () => void;
+        }) => {
+          const currentCachedOption = selectedCache[value] || {};
+
+          return (
+            <Chip
+              key={value}
+              height='x20'
+              onMouseDown={onMouseDown}
+              mie={4}
+              mb={2}
+            >
+              <UserAvatar size='x20' username={value} />
+              <Box is='span' margin='none' mis={4}>
+                {currentCachedOption.name ||
+                  currentCachedOption.username ||
+                  value}
+              </Box>
+            </Chip>
+          );
+        }}
+        renderOptions={AutocompleteOptions}
+        options={options
+          .concat(Object.entries(selectedCache))
+          .map(([, item]) => [item.username, item.name || item.username])}
+        data-qa='create-channel-users-autocomplete'
+      />
+    </OptionsContext.Provider>
+  );
+};
+
+export default memo(MultiUsersSelectElement);
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
index 364685ab7542..df67d9e927ee 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
@@ -1,44 +1,26 @@
-import { MultiSelectFiltered, Box, Chip } from '@rocket.chat/fuselage';
+import { AutoComplete, Box, Chip, Option } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import type * as UiKit from '@rocket.chat/ui-kit';
 import { useQuery } from '@tanstack/react-query';
-import type { ReactElement } from 'react';
-import { memo, useState, useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
-import { useStringFromTextObject } from '../../hooks/useStringFromTextObject';
 import { useUiKitState } from '../../hooks/useUiKitState';
 import type { BlockProps } from '../../utils/BlockProps';
-import AutocompleteOptions, {
-  OptionsContext,
-} from './UserAutoCompleteMultipleOptions';
 
 type UsersSelectElementProps = BlockProps<UiKit.UsersSelectElement>;
 
 type UserAutoCompleteOptionType = {
-  name: string;
-  username: string;
-  _federated?: boolean;
+  value: string;
+  label: string;
 };
 
-type UserAutoCompleteOptions = {
-  [k: string]: UserAutoCompleteOptionType;
-};
-
-const matrixRegex = new RegExp('@(.*:.*)');
+const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
+  const [{ loading, value }, action] = useUiKitState(block, context);
 
-const UsersSelectElement = ({
-  block,
-  context,
-}: UsersSelectElementProps): ReactElement => {
-  const [{ loading, value, error }, action] = useUiKitState(block, context);
-  const fromTextObjectToString = useStringFromTextObject();
   const [filter, setFilter] = useState('');
-  const [selectedCache, setSelectedCache] = useState<UserAutoCompleteOptions>(
-    {}
-  );
-
-  const debouncedFilter = useDebouncedValue(filter, 500);
+  const debouncedFilter = useDebouncedValue(filter, 1000);
   const getUsers = useEndpoint('GET', '/v1/users.autocomplete');
 
   const { data } = useQuery(
@@ -48,22 +30,12 @@ const UsersSelectElement = ({
         selector: JSON.stringify({ term: debouncedFilter }),
       });
       const options = users.items.map(
-        (item): [string, UserAutoCompleteOptionType] => [item.username, item]
+        (item): UserAutoCompleteOptionType => ({
+          value: item._id,
+          label: item.name,
+        })
       );
 
-      // Add extra option if filter text matches `username:server`
-      // Used to add federated users that do not exist yet
-      if (matrixRegex.test(debouncedFilter)) {
-        options.unshift([
-          debouncedFilter,
-          {
-            name: debouncedFilter,
-            username: debouncedFilter,
-            _federated: true,
-          },
-        ]);
-      }
-
       return options;
     },
     { keepPreviousData: true }
@@ -71,32 +43,6 @@ const UsersSelectElement = ({
 
   const options = useMemo(() => data || [], [data]);
 
-  const onAddUser = useCallback(
-    (username: string): void => {
-      const user = options.find(([val]) => val === username)?.[1];
-      if (!user) {
-        throw new Error(
-          'UserAutoCompleteMultiple - onAddSelected - failed to cache option'
-        );
-      }
-      setSelectedCache((selectedCache) => ({
-        ...selectedCache,
-        [username]: user,
-      }));
-    },
-    [setSelectedCache, options]
-  );
-
-  const onRemoveUser = useCallback(
-    (username: string): void =>
-      setSelectedCache((selectedCache) => {
-        const users = { ...selectedCache };
-        delete users[username];
-        return users;
-      }),
-    [setSelectedCache]
-  );
-
   const handleChange = useCallback(
     (value) => {
       action({ target: { value } });
@@ -104,66 +50,34 @@ const UsersSelectElement = ({
     [action]
   );
 
-  const handleOnChange = useCallback(
-    (usernames: string[]) => {
-      handleChange(usernames);
-      const newAddedUsername = usernames.filter(
-        (username) => !value.includes(username)
-      )[0];
-      const removedUsername = value.filter(
-        (username) => !usernames.includes(username)
-      )[0];
-      setFilter('');
-      newAddedUsername && onAddUser(newAddedUsername);
-      removedUsername && onRemoveUser(removedUsername);
-    },
-    [handleChange, setFilter, onAddUser, onRemoveUser, value]
-  );
-
   return (
-    <OptionsContext.Provider value={{ options }}>
-      <MultiSelectFiltered
-        error={error}
-        disabled={loading}
-        data-qa-type='user-auto-complete-input'
-        placeholder={fromTextObjectToString(block.placeholder)}
-        value={value}
-        onChange={handleOnChange}
-        filter={filter}
-        setFilter={setFilter}
-        renderSelected={({
-          value,
-          onMouseDown,
-        }: {
-          value: string;
-          onMouseDown: () => void;
-        }) => {
-          const currentCachedOption = selectedCache[value] || {};
-
-          return (
-            <Chip
-              key={value}
-              height='x20'
-              onMouseDown={onMouseDown}
-              mie={4}
-              mb={2}
-            >
-              <Box is='span' margin='none' mis={4}>
-                {currentCachedOption.name ||
-                  currentCachedOption.username ||
-                  value}
-              </Box>
-            </Chip>
-          );
-        }}
-        renderOptions={AutocompleteOptions}
-        options={options
-          .concat(Object.entries(selectedCache))
-          .map(([, item]) => [item.username, item.name || item.username])}
-        data-qa='create-channel-users-autocomplete'
-      />
-    </OptionsContext.Provider>
+    <AutoComplete
+      //   error={error}
+      disabled={loading}
+      value={value}
+      options={options}
+      onChange={handleChange}
+      filter={filter}
+      setFilter={setFilter}
+      data-qa-id='UserAutoComplete'
+      renderSelected={({ selected: { value, label } }) => (
+        <Chip height='x20' value={value} mie={4}>
+          <UserAvatar size='x20' username={value} />
+          <Box verticalAlign='middle' is='span' margin='none' mi={4}>
+            {label}
+          </Box>
+        </Chip>
+      )}
+      renderItem={({ value, label, ...props }) => (
+        <Option
+          key={value}
+          label={label}
+          avatar={<UserAvatar size='x20' username={value} />}
+          {...props}
+        />
+      )}
+    />
   );
 };
 
-export default memo(UsersSelectElement);
+export default UsersSelectElement;
diff --git a/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurfaceRenderer.tsx b/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurfaceRenderer.tsx
index c18cfc5e5c26..ea7b37ac4126 100644
--- a/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurfaceRenderer.tsx
+++ b/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurfaceRenderer.tsx
@@ -3,6 +3,7 @@ import type { ReactElement } from 'react';
 
 import TabNavigationBlock from '../blocks/TabNavigationBlock';
 import { AppIdProvider } from '../contexts/AppIdContext';
+import MultiUsersSelectElement from '../elements/UsersSelectElement/MultiUsersSelectElement';
 import UsersSelectElement from '../elements/UsersSelectElement/UsersSelectElement';
 import {
   FuselageSurfaceRenderer,
@@ -47,6 +48,25 @@ export class ContextualBarSurfaceRenderer extends FuselageSurfaceRenderer {
     return null;
   }
 
+  multi_users_select(
+    block: UiKit.MultiUsersSelectElement,
+    context: UiKit.BlockContext,
+    index: number
+  ): ReactElement | null {
+    if (context === UiKit.BlockContext.FORM) {
+      return (
+        <MultiUsersSelectElement
+          block={block}
+          context={context}
+          index={index}
+          surfaceRenderer={this}
+        />
+      );
+    }
+
+    return null;
+  }
+
   tab_navigation(
     block: UiKit.ExperimentalTabNavigationBlock,
     context: UiKit.BlockContext,
diff --git a/packages/ui-kit/src/blocks/elements/MultiUsersSelectElement.ts b/packages/ui-kit/src/blocks/elements/MultiUsersSelectElement.ts
index 7600b551c833..d09f321e2292 100644
--- a/packages/ui-kit/src/blocks/elements/MultiUsersSelectElement.ts
+++ b/packages/ui-kit/src/blocks/elements/MultiUsersSelectElement.ts
@@ -1,6 +1,7 @@
 import type { Actionable } from '../Actionable';
+import type { PlainText } from '../text/PlainText';
 
-/** @todo */
 export type MultiUsersSelectElement = Actionable<{
 	type: 'multi_users_select';
+	placeholder?: PlainText;
 }>;
diff --git a/packages/ui-kit/src/rendering/ActionOf.ts b/packages/ui-kit/src/rendering/ActionOf.ts
index 9706b8246483..f355adf663fe 100644
--- a/packages/ui-kit/src/rendering/ActionOf.ts
+++ b/packages/ui-kit/src/rendering/ActionOf.ts
@@ -35,7 +35,7 @@ export type ActionOf<TElement extends ActionableElement> = TElement extends Butt
 	: TElement extends MultiStaticSelectElement
 	? MultiStaticSelectElement['initialValue']
 	: TElement extends MultiUsersSelectElement
-	? unknown
+	? Option['value'][]
 	: TElement extends OverflowElement
 	? OverflowElement['options'][number]['value']
 	: TElement extends PlainTextInputElement
@@ -43,7 +43,7 @@ export type ActionOf<TElement extends ActionableElement> = TElement extends Butt
 	: TElement extends StaticSelectElement
 	? StaticSelectElement['initialValue']
 	: TElement extends UsersSelectElement
-	? Option['value'][]
+	? Option['value']
 	: TElement extends ToggleSwitchElement
 	? Option['value'][]
 	: TElement extends RadioButtonElement

From c8e64772563ec3cd0dfe23252ca773edd27af337 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Wed, 14 Feb 2024 10:28:29 -0300
Subject: [PATCH 03/19] fix user selec

---
 .../src/elements/UsersSelectElement/UsersSelectElement.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
index df67d9e927ee..b4aa680aa506 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
@@ -24,14 +24,14 @@ const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
   const getUsers = useEndpoint('GET', '/v1/users.autocomplete');
 
   const { data } = useQuery(
-    ['users.autocomplete', debouncedFilter],
+    ['users.autoComplete', debouncedFilter],
     async () => {
       const users = await getUsers({
         selector: JSON.stringify({ term: debouncedFilter }),
       });
       const options = users.items.map(
         (item): UserAutoCompleteOptionType => ({
-          value: item._id,
+          value: item.username,
           label: item.name,
         })
       );

From 4eedcc258212c9ebbd0c40d42299b81eaae496d7 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Wed, 14 Feb 2024 13:51:50 -0300
Subject: [PATCH 04/19] move things

---
 .../surfaces/ContextualBarSurfaceRenderer.tsx | 40 -------------------
 .../src/surfaces/FuselageSurfaceRenderer.tsx  | 40 +++++++++++++++++++
 2 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurfaceRenderer.tsx b/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurfaceRenderer.tsx
index ea7b37ac4126..48b678365a7f 100644
--- a/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurfaceRenderer.tsx
+++ b/packages/fuselage-ui-kit/src/surfaces/ContextualBarSurfaceRenderer.tsx
@@ -3,8 +3,6 @@ import type { ReactElement } from 'react';
 
 import TabNavigationBlock from '../blocks/TabNavigationBlock';
 import { AppIdProvider } from '../contexts/AppIdContext';
-import MultiUsersSelectElement from '../elements/UsersSelectElement/MultiUsersSelectElement';
-import UsersSelectElement from '../elements/UsersSelectElement/UsersSelectElement';
 import {
   FuselageSurfaceRenderer,
   renderTextObject,
@@ -29,44 +27,6 @@ export class ContextualBarSurfaceRenderer extends FuselageSurfaceRenderer {
 
   mrkdwn = renderTextObject;
 
-  users_select(
-    block: UiKit.UsersSelectElement,
-    context: UiKit.BlockContext,
-    index: number
-  ): ReactElement | null {
-    if (context === UiKit.BlockContext.FORM) {
-      return (
-        <UsersSelectElement
-          block={block}
-          context={context}
-          index={index}
-          surfaceRenderer={this}
-        />
-      );
-    }
-
-    return null;
-  }
-
-  multi_users_select(
-    block: UiKit.MultiUsersSelectElement,
-    context: UiKit.BlockContext,
-    index: number
-  ): ReactElement | null {
-    if (context === UiKit.BlockContext.FORM) {
-      return (
-        <MultiUsersSelectElement
-          block={block}
-          context={context}
-          index={index}
-          surfaceRenderer={this}
-        />
-      );
-    }
-
-    return null;
-  }
-
   tab_navigation(
     block: UiKit.ExperimentalTabNavigationBlock,
     context: UiKit.BlockContext,
diff --git a/packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx b/packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx
index a2cbdb62d16c..8bddc53a1739 100644
--- a/packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx
+++ b/packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx
@@ -24,6 +24,8 @@ import RadioButtonElement from '../elements/RadioButtonElement';
 import StaticSelectElement from '../elements/StaticSelectElement';
 import TimePickerElement from '../elements/TimePickerElement';
 import ToggleSwitchElement from '../elements/ToggleSwitchElement';
+import MultiUsersSelectElement from '../elements/UsersSelectElement/MultiUsersSelectElement';
+import UsersSelectElement from '../elements/UsersSelectElement/UsersSelectElement';
 
 type TextObjectRenderers = {
   [TTextObject in UiKit.TextObject as TTextObject['type']]: (
@@ -528,4 +530,42 @@ export abstract class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer<Reac
       </AppIdProvider>
     );
   }
+
+  users_select(
+    block: UiKit.UsersSelectElement,
+    context: UiKit.BlockContext,
+    index: number
+  ): ReactElement | null {
+    if (context === UiKit.BlockContext.FORM) {
+      return (
+        <UsersSelectElement
+          block={block}
+          context={context}
+          index={index}
+          surfaceRenderer={this}
+        />
+      );
+    }
+
+    return null;
+  }
+
+  multi_users_select(
+    block: UiKit.MultiUsersSelectElement,
+    context: UiKit.BlockContext,
+    index: number
+  ): ReactElement | null {
+    if (context === UiKit.BlockContext.FORM) {
+      return (
+        <MultiUsersSelectElement
+          block={block}
+          context={context}
+          index={index}
+          surfaceRenderer={this}
+        />
+      );
+    }
+
+    return null;
+  }
 }

From 0626682e757c5a3a29c98a6b1f0df159e0368ee6 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Wed, 14 Feb 2024 14:10:21 -0300
Subject: [PATCH 05/19] last

---
 .../src/elements/UsersSelectElement/UsersSelectElement.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
index b4aa680aa506..3aa3c4425d9a 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
@@ -32,7 +32,7 @@ const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
       const options = users.items.map(
         (item): UserAutoCompleteOptionType => ({
           value: item.username,
-          label: item.name,
+          label: item.name || item.username,
         })
       );
 

From 24f5e1c942df510107371c0b50888fb77060ab0d Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Thu, 15 Feb 2024 13:54:46 -0300
Subject: [PATCH 06/19] Create cuddly-cycles-nail.md

---
 .changeset/cuddly-cycles-nail.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/cuddly-cycles-nail.md

diff --git a/.changeset/cuddly-cycles-nail.md b/.changeset/cuddly-cycles-nail.md
new file mode 100644
index 000000000000..21c7989e34d7
--- /dev/null
+++ b/.changeset/cuddly-cycles-nail.md
@@ -0,0 +1,6 @@
+---
+"@rocket.chat/fuselage-ui-kit": minor
+"@rocket.chat/ui-kit": minor
+---
+
+Introduce users select to UiKit

From ca862305b9b86955509c7ccdc9785c743b2ee097 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Thu, 15 Feb 2024 13:55:35 -0300
Subject: [PATCH 07/19] Update cuddly-cycles-nail.md

---
 .changeset/cuddly-cycles-nail.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/cuddly-cycles-nail.md b/.changeset/cuddly-cycles-nail.md
index 21c7989e34d7..0f11a6cb0a82 100644
--- a/.changeset/cuddly-cycles-nail.md
+++ b/.changeset/cuddly-cycles-nail.md
@@ -1,6 +1,6 @@
 ---
 "@rocket.chat/fuselage-ui-kit": minor
-"@rocket.chat/ui-kit": minor
+"@rocket.chat/ui-kit": patch
 ---
 
 Introduce users select to UiKit

From 8079bc1f9fe7b71e8e5862923198b55c3778f122 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Fri, 16 Feb 2024 09:22:54 -0300
Subject: [PATCH 08/19] fix review

---
 ...leOption.tsx => MulitUserSelectOption.tsx} | 17 ++++-----
 .../MultiUserAutoCompleteMultipleOptions.tsx  | 37 -------------------
 .../MultiUsersSelectElement.tsx               | 22 +++++------
 .../MultiUsersSelectOptions.tsx               | 35 ++++++++++++++++++
 4 files changed, 52 insertions(+), 59 deletions(-)
 rename packages/fuselage-ui-kit/src/elements/UsersSelectElement/{MulitUserAutoCompleteMultipleOption.tsx => MulitUserSelectOption.tsx} (56%)
 delete mode 100644 packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUserAutoCompleteMultipleOptions.tsx
 create mode 100644 packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectOptions.tsx

diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserAutoCompleteMultipleOption.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserSelectOption.tsx
similarity index 56%
rename from packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserAutoCompleteMultipleOption.tsx
rename to packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserSelectOption.tsx
index 49165d160660..0f1d66ee2815 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserAutoCompleteMultipleOption.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserSelectOption.tsx
@@ -3,30 +3,27 @@ import { Option, OptionDescription } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import type { ReactElement } from 'react';
 
-type UserAutoCompleteMultipleOptionProps = {
-  label: {
-    _federated?: boolean;
-  } & Pick<IUser, 'username' | 'name'>;
+type MulitUserSelectOptionProps = {
+  label: Pick<IUser, 'username' | 'name'>;
 };
 
-const UserAutoCompleteMultipleOption = ({
+const MulitUserSelectOption = ({
   label,
   ...props
-}: UserAutoCompleteMultipleOptionProps): ReactElement => {
-  const { name, username, _federated } = label;
+}: MulitUserSelectOptionProps): ReactElement => {
+  const { name, username } = label;
 
   return (
     <Option
       {...props}
       data-qa-type='autocomplete-user-option'
       avatar={<UserAvatar username={username || ''} size='x20' />}
-      icon={_federated ? 'globe' : undefined}
       key={username}
       label={
         (
           <>
             {name || username}{' '}
-            {!_federated && <OptionDescription>({username})</OptionDescription>}
+            <OptionDescription>({username})</OptionDescription>
           </>
         ) as any
       }
@@ -35,4 +32,4 @@ const UserAutoCompleteMultipleOption = ({
   );
 };
 
-export default UserAutoCompleteMultipleOption;
+export default MulitUserSelectOption;
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUserAutoCompleteMultipleOptions.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUserAutoCompleteMultipleOptions.tsx
deleted file mode 100644
index ae1a8210bd87..000000000000
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUserAutoCompleteMultipleOptions.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Options } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement, Ref } from 'react';
-import { forwardRef, createContext, useContext } from 'react';
-
-import UserAutoCompleteMultipleOption from './MulitUserAutoCompleteMultipleOption';
-
-// This is a hack in order to bypass the MultiSelect filter.
-// The select requires a forwarded ref component in the renderOptions property
-// but we also need to pass internal state to this renderer, as well as the props that also come from the Select.
-
-type OptionsContextValue = {
-  options: ComponentProps<typeof Options>['options'];
-};
-
-export const OptionsContext = createContext<OptionsContextValue>({
-  options: [],
-});
-const MultiUserAutoCompleteMultipleOptions = forwardRef(
-  function MultiUserAutoCompleteMultipleOptions(
-    { onSelect, ...props }: ComponentProps<typeof Options>,
-    ref: Ref<HTMLElement>
-  ): ReactElement {
-    const { options } = useContext(OptionsContext);
-    return (
-      <Options
-        {...props}
-        key='AutocompleteOptions'
-        options={options}
-        onSelect={onSelect}
-        ref={ref}
-        renderItem={UserAutoCompleteMultipleOption}
-      />
-    );
-  }
-);
-
-export default MultiUserAutoCompleteMultipleOptions;
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
index 0293a04f21bf..5527284a599b 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
@@ -10,19 +10,19 @@ import { memo, useState, useCallback, useMemo } from 'react';
 import { useStringFromTextObject } from '../../hooks/useStringFromTextObject';
 import { useUiKitState } from '../../hooks/useUiKitState';
 import type { BlockProps } from '../../utils/BlockProps';
-import AutocompleteOptions, {
+import MultiUsersSelectOptions, {
   OptionsContext,
-} from './MultiUserAutoCompleteMultipleOptions';
+} from './MultiUsersSelectOptions';
 
 type MultiUsersSelectElementProps = BlockProps<UiKit.MultiUsersSelectElement>;
 
-type MultiUserAutoCompleteOptionType = {
+type MultiUserSelectOptionType = {
   name: string;
   username: string;
 };
 
-type MultiUserAutoCompleteOptions = {
-  [k: string]: MultiUserAutoCompleteOptionType;
+type MultiUserSelectOptions = {
+  [k: string]: MultiUserSelectOptionType;
 };
 
 const MultiUsersSelectElement = ({
@@ -32,8 +32,9 @@ const MultiUsersSelectElement = ({
   const [{ loading, value, error }, action] = useUiKitState(block, context);
   const fromTextObjectToString = useStringFromTextObject();
   const [filter, setFilter] = useState('');
-  const [selectedCache, setSelectedCache] =
-    useState<MultiUserAutoCompleteOptions>({});
+  const [selectedCache, setSelectedCache] = useState<MultiUserSelectOptions>(
+    {}
+  );
 
   const debouncedFilter = useDebouncedValue(filter, 500);
   const getUsers = useEndpoint('GET', '/v1/users.autocomplete');
@@ -45,10 +46,7 @@ const MultiUsersSelectElement = ({
         selector: JSON.stringify({ term: debouncedFilter }),
       });
       const options = users.items.map(
-        (item): [string, MultiUserAutoCompleteOptionType] => [
-          item.username,
-          item,
-        ]
+        (item): [string, MultiUserSelectOptionType] => [item.username, item]
       );
 
       return options;
@@ -144,7 +142,7 @@ const MultiUsersSelectElement = ({
             </Chip>
           );
         }}
-        renderOptions={AutocompleteOptions}
+        renderOptions={MultiUsersSelectOptions}
         options={options
           .concat(Object.entries(selectedCache))
           .map(([, item]) => [item.username, item.name || item.username])}
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectOptions.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectOptions.tsx
new file mode 100644
index 000000000000..093f5b5fc2ef
--- /dev/null
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectOptions.tsx
@@ -0,0 +1,35 @@
+import { Options } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactElement, Ref } from 'react';
+import { forwardRef, createContext, useContext } from 'react';
+
+import MulitUserSelectOption from './MulitUserSelectOption';
+
+// This is a hack in order to bypass the MultiSelect filter.
+// The select requires a forwarded ref component in the renderOptions property
+// but we also need to pass internal state to this renderer, as well as the props that also come from the Select.
+
+type OptionsContextValue = {
+  options: ComponentProps<typeof Options>['options'];
+};
+
+export const OptionsContext = createContext<OptionsContextValue>({
+  options: [],
+});
+const MultiUsersSelectOptions = forwardRef(function MultiUsersSelectOptions(
+  { onSelect, ...props }: ComponentProps<typeof Options>,
+  ref: Ref<HTMLElement>
+): ReactElement {
+  const { options } = useContext(OptionsContext);
+  return (
+    <Options
+      {...props}
+      key='AutocompleteOptions'
+      options={options}
+      onSelect={onSelect}
+      ref={ref}
+      renderItem={MulitUserSelectOption}
+    />
+  );
+});
+
+export default MultiUsersSelectOptions;

From bca895f5605cd3111c01ba75b434aabbf85aa8e9 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Tue, 5 Mar 2024 13:41:31 -0300
Subject: [PATCH 09/19] simplify

---
 .../MulitUserSelectOption.tsx                 |  35 ----
 .../MultiUsersSelectElement.tsx               | 154 ++++++------------
 .../MultiUsersSelectOptions.tsx               |  35 ----
 .../UsersSelectElement/UsersSelectElement.tsx |   3 +-
 4 files changed, 48 insertions(+), 179 deletions(-)
 delete mode 100644 packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserSelectOption.tsx
 delete mode 100644 packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectOptions.tsx

diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserSelectOption.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserSelectOption.tsx
deleted file mode 100644
index 0f1d66ee2815..000000000000
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MulitUserSelectOption.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { IUser } from '@rocket.chat/core-typings';
-import { Option, OptionDescription } from '@rocket.chat/fuselage';
-import { UserAvatar } from '@rocket.chat/ui-avatar';
-import type { ReactElement } from 'react';
-
-type MulitUserSelectOptionProps = {
-  label: Pick<IUser, 'username' | 'name'>;
-};
-
-const MulitUserSelectOption = ({
-  label,
-  ...props
-}: MulitUserSelectOptionProps): ReactElement => {
-  const { name, username } = label;
-
-  return (
-    <Option
-      {...props}
-      data-qa-type='autocomplete-user-option'
-      avatar={<UserAvatar username={username || ''} size='x20' />}
-      key={username}
-      label={
-        (
-          <>
-            {name || username}{' '}
-            <OptionDescription>({username})</OptionDescription>
-          </>
-        ) as any
-      }
-      children={undefined}
-    />
-  );
-};
-
-export default MulitUserSelectOption;
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
index 5527284a599b..04710d065976 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
@@ -1,40 +1,36 @@
-import { MultiSelectFiltered, Box, Chip } from '@rocket.chat/fuselage';
+import {
+  Box,
+  Chip,
+  AutoComplete,
+  Option,
+  OptionAvatar,
+  OptionContent,
+  OptionDescription,
+} from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import type * as UiKit from '@rocket.chat/ui-kit';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
-import { memo, useState, useCallback, useMemo } from 'react';
+import { memo, useCallback, useState } from 'react';
 
-import { useStringFromTextObject } from '../../hooks/useStringFromTextObject';
 import { useUiKitState } from '../../hooks/useUiKitState';
 import type { BlockProps } from '../../utils/BlockProps';
-import MultiUsersSelectOptions, {
-  OptionsContext,
-} from './MultiUsersSelectOptions';
 
 type MultiUsersSelectElementProps = BlockProps<UiKit.MultiUsersSelectElement>;
 
 type MultiUserSelectOptionType = {
-  name: string;
-  username: string;
-};
-
-type MultiUserSelectOptions = {
-  [k: string]: MultiUserSelectOptionType;
+  label: string;
+  value: string;
 };
 
 const MultiUsersSelectElement = ({
   block,
   context,
 }: MultiUsersSelectElementProps): ReactElement => {
-  const [{ loading, value, error }, action] = useUiKitState(block, context);
-  const fromTextObjectToString = useStringFromTextObject();
+  const [{ loading, value }, action] = useUiKitState(block, context);
   const [filter, setFilter] = useState('');
-  const [selectedCache, setSelectedCache] = useState<MultiUserSelectOptions>(
-    {}
-  );
 
   const debouncedFilter = useDebouncedValue(filter, 500);
   const getUsers = useEndpoint('GET', '/v1/users.autocomplete');
@@ -45,43 +41,15 @@ const MultiUsersSelectElement = ({
       const users = await getUsers({
         selector: JSON.stringify({ term: debouncedFilter }),
       });
-      const options = users.items.map(
-        (item): [string, MultiUserSelectOptionType] => [item.username, item]
-      );
+      const options = users.items.map((item): MultiUserSelectOptionType => {
+        return { value: item.username, label: item.name || item.username };
+      });
 
       return options;
     },
     { keepPreviousData: true }
   );
 
-  const options = useMemo(() => data || [], [data]);
-
-  const onAddUser = useCallback(
-    (username: string): void => {
-      const user = options.find(([val]) => val === username)?.[1];
-      if (!user) {
-        throw new Error(
-          'UserAutoCompleteMultiple - onAddSelected - failed to cache option'
-        );
-      }
-      setSelectedCache((selectedCache) => ({
-        ...selectedCache,
-        [username]: user,
-      }));
-    },
-    [setSelectedCache, options]
-  );
-
-  const onRemoveUser = useCallback(
-    (username: string): void =>
-      setSelectedCache((selectedCache) => {
-        const users = { ...selectedCache };
-        delete users[username];
-        return users;
-      }),
-    [setSelectedCache]
-  );
-
   const handleChange = useCallback(
     (value) => {
       action({ target: { value } });
@@ -89,66 +57,38 @@ const MultiUsersSelectElement = ({
     [action]
   );
 
-  const handleOnChange = useCallback(
-    (usernames: string[]) => {
-      handleChange(usernames);
-      const newAddedUsername = usernames.filter(
-        (username) => !value.includes(username)
-      )[0];
-      const removedUsername = value.filter(
-        (username) => !usernames.includes(username)
-      )[0];
-      setFilter('');
-      newAddedUsername && onAddUser(newAddedUsername);
-      removedUsername && onRemoveUser(removedUsername);
-    },
-    [handleChange, setFilter, onAddUser, onRemoveUser, value]
-  );
-
   return (
-    <OptionsContext.Provider value={{ options }}>
-      <MultiSelectFiltered
-        error={error}
-        disabled={loading}
-        data-qa-type='user-auto-complete-input'
-        placeholder={fromTextObjectToString(block.placeholder)}
-        value={value}
-        onChange={handleOnChange}
-        filter={filter}
-        setFilter={setFilter}
-        renderSelected={({
-          value,
-          onMouseDown,
-        }: {
-          value: string;
-          onMouseDown: () => void;
-        }) => {
-          const currentCachedOption = selectedCache[value] || {};
-
-          return (
-            <Chip
-              key={value}
-              height='x20'
-              onMouseDown={onMouseDown}
-              mie={4}
-              mb={2}
-            >
-              <UserAvatar size='x20' username={value} />
-              <Box is='span' margin='none' mis={4}>
-                {currentCachedOption.name ||
-                  currentCachedOption.username ||
-                  value}
-              </Box>
-            </Chip>
-          );
-        }}
-        renderOptions={MultiUsersSelectOptions}
-        options={options
-          .concat(Object.entries(selectedCache))
-          .map(([, item]) => [item.username, item.name || item.username])}
-        data-qa='create-channel-users-autocomplete'
-      />
-    </OptionsContext.Provider>
+    <AutoComplete
+      disabled={loading}
+      filter={filter}
+      setFilter={setFilter}
+      onChange={handleChange}
+      multiple
+      renderSelected={({
+        selected: { value, label },
+        onRemove,
+        ...props
+      }): ReactElement => (
+        <Chip {...props} height='x20' value={value} onClick={onRemove} mie={4}>
+          <UserAvatar size='x20' username={value} />
+          <Box is='span' margin='none' mis={4}>
+            {label}
+          </Box>
+        </Chip>
+      )}
+      renderItem={({ value, label, ...props }): ReactElement => (
+        <Option data-qa-type='autocomplete-user-option' key={value} {...props}>
+          <OptionAvatar>
+            <UserAvatar username={value} size='x20' />
+          </OptionAvatar>
+          <OptionContent>
+            {label} <OptionDescription>({value})</OptionDescription>
+          </OptionContent>
+        </Option>
+      )}
+      options={data || []}
+      value={value as MultiUserSelectOptionType['value']}
+    />
   );
 };
 
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectOptions.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectOptions.tsx
deleted file mode 100644
index 093f5b5fc2ef..000000000000
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectOptions.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Options } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement, Ref } from 'react';
-import { forwardRef, createContext, useContext } from 'react';
-
-import MulitUserSelectOption from './MulitUserSelectOption';
-
-// This is a hack in order to bypass the MultiSelect filter.
-// The select requires a forwarded ref component in the renderOptions property
-// but we also need to pass internal state to this renderer, as well as the props that also come from the Select.
-
-type OptionsContextValue = {
-  options: ComponentProps<typeof Options>['options'];
-};
-
-export const OptionsContext = createContext<OptionsContextValue>({
-  options: [],
-});
-const MultiUsersSelectOptions = forwardRef(function MultiUsersSelectOptions(
-  { onSelect, ...props }: ComponentProps<typeof Options>,
-  ref: Ref<HTMLElement>
-): ReactElement {
-  const { options } = useContext(OptionsContext);
-  return (
-    <Options
-      {...props}
-      key='AutocompleteOptions'
-      options={options}
-      onSelect={onSelect}
-      ref={ref}
-      renderItem={MulitUserSelectOption}
-    />
-  );
-});
-
-export default MultiUsersSelectOptions;
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
index 3aa3c4425d9a..69172d30ab23 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
@@ -52,9 +52,8 @@ const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
 
   return (
     <AutoComplete
-      //   error={error}
       disabled={loading}
-      value={value}
+      value={value as UserAutoCompleteOptionType['value']}
       options={options}
       onChange={handleChange}
       filter={filter}

From a2d6dde4259b840c71c07968b2b1f420c2ac5352 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Tue, 5 Mar 2024 13:51:42 -0300
Subject: [PATCH 10/19] user data hoojk

---
 .../MultiUsersSelectElement.tsx               | 19 ++---------
 .../UsersSelectElement/UsersSelectElement.tsx | 24 ++------------
 .../UsersSelectElement/hooks/useUsersData.ts  | 32 +++++++++++++++++++
 3 files changed, 37 insertions(+), 38 deletions(-)
 create mode 100644 packages/fuselage-ui-kit/src/elements/UsersSelectElement/hooks/useUsersData.ts

diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
index 04710d065976..8e4cc486916c 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
@@ -9,14 +9,13 @@ import {
 } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
-import { useEndpoint } from '@rocket.chat/ui-contexts';
 import type * as UiKit from '@rocket.chat/ui-kit';
-import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import { memo, useCallback, useState } from 'react';
 
 import { useUiKitState } from '../../hooks/useUiKitState';
 import type { BlockProps } from '../../utils/BlockProps';
+import { useUsersData } from './hooks/useUsersData';
 
 type MultiUsersSelectElementProps = BlockProps<UiKit.MultiUsersSelectElement>;
 
@@ -33,22 +32,8 @@ const MultiUsersSelectElement = ({
   const [filter, setFilter] = useState('');
 
   const debouncedFilter = useDebouncedValue(filter, 500);
-  const getUsers = useEndpoint('GET', '/v1/users.autocomplete');
 
-  const { data } = useQuery(
-    ['users.autocomplete', debouncedFilter],
-    async () => {
-      const users = await getUsers({
-        selector: JSON.stringify({ term: debouncedFilter }),
-      });
-      const options = users.items.map((item): MultiUserSelectOptionType => {
-        return { value: item.username, label: item.name || item.username };
-      });
-
-      return options;
-    },
-    { keepPreviousData: true }
-  );
+  const data = useUsersData({ filter: debouncedFilter });
 
   const handleChange = useCallback(
     (value) => {
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
index 69172d30ab23..77fd6ca53ac7 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
@@ -1,17 +1,16 @@
 import { AutoComplete, Box, Chip, Option } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
-import { useEndpoint } from '@rocket.chat/ui-contexts';
 import type * as UiKit from '@rocket.chat/ui-kit';
-import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
 
 import { useUiKitState } from '../../hooks/useUiKitState';
 import type { BlockProps } from '../../utils/BlockProps';
+import { useUsersData } from './hooks/useUsersData';
 
 type UsersSelectElementProps = BlockProps<UiKit.UsersSelectElement>;
 
-type UserAutoCompleteOptionType = {
+export type UserAutoCompleteOptionType = {
   value: string;
   label: string;
 };
@@ -21,25 +20,8 @@ const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
 
   const [filter, setFilter] = useState('');
   const debouncedFilter = useDebouncedValue(filter, 1000);
-  const getUsers = useEndpoint('GET', '/v1/users.autocomplete');
 
-  const { data } = useQuery(
-    ['users.autoComplete', debouncedFilter],
-    async () => {
-      const users = await getUsers({
-        selector: JSON.stringify({ term: debouncedFilter }),
-      });
-      const options = users.items.map(
-        (item): UserAutoCompleteOptionType => ({
-          value: item.username,
-          label: item.name || item.username,
-        })
-      );
-
-      return options;
-    },
-    { keepPreviousData: true }
-  );
+  const data = useUsersData({ filter: debouncedFilter });
 
   const options = useMemo(() => data || [], [data]);
 
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/hooks/useUsersData.ts b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/hooks/useUsersData.ts
new file mode 100644
index 000000000000..cf90fdaa9748
--- /dev/null
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/hooks/useUsersData.ts
@@ -0,0 +1,32 @@
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+import type { UserAutoCompleteOptionType } from '../UsersSelectElement';
+
+type useUsersDataProps = {
+  filter: string;
+};
+
+export const useUsersData = ({ filter }: useUsersDataProps) => {
+  const getUsers = useEndpoint('GET', '/v1/users.autocomplete');
+
+  const { data } = useQuery(
+    ['users.autoComplete', filter],
+    async () => {
+      const users = await getUsers({
+        selector: JSON.stringify({ term: filter }),
+      });
+      const options = users.items.map(
+        (item): UserAutoCompleteOptionType => ({
+          value: item.username,
+          label: item.name || item.username,
+        })
+      );
+
+      return options;
+    },
+    { keepPreviousData: true }
+  );
+
+  return data;
+};

From c3a4ff2fae72822a90716c96345eeb4bcb6d1bcb Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Tue, 5 Mar 2024 15:31:38 -0300
Subject: [PATCH 11/19] fix

---
 .../UsersSelectElement/MultiUsersSelectElement.tsx        | 8 ++------
 .../elements/UsersSelectElement/UsersSelectElement.tsx    | 3 ++-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
index 8e4cc486916c..579c4d2ecad8 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
@@ -19,11 +19,6 @@ import { useUsersData } from './hooks/useUsersData';
 
 type MultiUsersSelectElementProps = BlockProps<UiKit.MultiUsersSelectElement>;
 
-type MultiUserSelectOptionType = {
-  label: string;
-  value: string;
-};
-
 const MultiUsersSelectElement = ({
   block,
   context,
@@ -44,6 +39,7 @@ const MultiUsersSelectElement = ({
 
   return (
     <AutoComplete
+      placeholder={block.placeholder?.text}
       disabled={loading}
       filter={filter}
       setFilter={setFilter}
@@ -72,7 +68,7 @@ const MultiUsersSelectElement = ({
         </Option>
       )}
       options={data || []}
-      value={value as MultiUserSelectOptionType['value']}
+      value={value}
     />
   );
 };
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
index 77fd6ca53ac7..8932a96b62af 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
@@ -34,8 +34,9 @@ const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
 
   return (
     <AutoComplete
+      placeholder={block.placeholder?.text}
       disabled={loading}
-      value={value as UserAutoCompleteOptionType['value']}
+      value={value}
       options={options}
       onChange={handleChange}
       filter={filter}

From a493d7f5313aa6ec5caeb272b56ce182b7b20f69 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Tue, 5 Mar 2024 15:35:00 -0300
Subject: [PATCH 12/19] review

---
 .../elements/UsersSelectElement/MultiUsersSelectElement.tsx | 2 +-
 .../src/elements/UsersSelectElement/UsersSelectElement.tsx  | 6 ++----
 .../src/elements/UsersSelectElement/hooks/useUsersData.ts   | 2 +-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
index 579c4d2ecad8..f5e7853887fc 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
@@ -67,7 +67,7 @@ const MultiUsersSelectElement = ({
           </OptionContent>
         </Option>
       )}
-      options={data || []}
+      options={data}
       value={value}
     />
   );
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
index 8932a96b62af..d268eb621e64 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
@@ -2,7 +2,7 @@ import { AutoComplete, Box, Chip, Option } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import type * as UiKit from '@rocket.chat/ui-kit';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useUiKitState } from '../../hooks/useUiKitState';
 import type { BlockProps } from '../../utils/BlockProps';
@@ -23,8 +23,6 @@ const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
 
   const data = useUsersData({ filter: debouncedFilter });
 
-  const options = useMemo(() => data || [], [data]);
-
   const handleChange = useCallback(
     (value) => {
       action({ target: { value } });
@@ -37,7 +35,7 @@ const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
       placeholder={block.placeholder?.text}
       disabled={loading}
       value={value}
-      options={options}
+      options={data}
       onChange={handleChange}
       filter={filter}
       setFilter={setFilter}
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/hooks/useUsersData.ts b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/hooks/useUsersData.ts
index cf90fdaa9748..6ab9ef43f03d 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/hooks/useUsersData.ts
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/hooks/useUsersData.ts
@@ -23,7 +23,7 @@ export const useUsersData = ({ filter }: useUsersDataProps) => {
         })
       );
 
-      return options;
+      return options || [];
     },
     { keepPreviousData: true }
   );

From 4818d5a29fc0cc330bc78b0592ee25b082185480 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Wed, 6 Mar 2024 14:23:25 -0300
Subject: [PATCH 13/19] fix value not iterabl

---
 .../MultiUsersSelectElement.tsx               |  9 ++++--
 .../UsersSelectElement/UsersSelectElement.tsx | 29 ++++++++++++-------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
index f5e7853887fc..5a3146497e4f 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
@@ -32,13 +32,18 @@ const MultiUsersSelectElement = ({
 
   const handleChange = useCallback(
     (value) => {
+      console.log(value);
       action({ target: { value } });
     },
     [action]
   );
 
+  console.log(value);
+
   return (
     <AutoComplete
+      value={value || []}
+      options={data}
       placeholder={block.placeholder?.text}
       disabled={loading}
       filter={filter}
@@ -58,7 +63,7 @@ const MultiUsersSelectElement = ({
         </Chip>
       )}
       renderItem={({ value, label, ...props }): ReactElement => (
-        <Option data-qa-type='autocomplete-user-option' key={value} {...props}>
+        <Option key={value} {...props}>
           <OptionAvatar>
             <UserAvatar username={value} size='x20' />
           </OptionAvatar>
@@ -67,8 +72,6 @@ const MultiUsersSelectElement = ({
           </OptionContent>
         </Option>
       )}
-      options={data}
-      value={value}
     />
   );
 };
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
index d268eb621e64..bc7c89438d43 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
@@ -1,4 +1,12 @@
-import { AutoComplete, Box, Chip, Option } from '@rocket.chat/fuselage';
+import {
+  AutoComplete,
+  Box,
+  Chip,
+  Option,
+  OptionAvatar,
+  OptionContent,
+  OptionDescription,
+} from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import type * as UiKit from '@rocket.chat/ui-kit';
@@ -16,7 +24,7 @@ export type UserAutoCompleteOptionType = {
 };
 
 const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
-  const [{ loading, value }, action] = useUiKitState(block, context);
+  const [{ value, loading }, action] = useUiKitState(block, context);
 
   const [filter, setFilter] = useState('');
   const debouncedFilter = useDebouncedValue(filter, 1000);
@@ -32,14 +40,13 @@ const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
 
   return (
     <AutoComplete
+      value={value}
       placeholder={block.placeholder?.text}
       disabled={loading}
-      value={value}
       options={data}
       onChange={handleChange}
       filter={filter}
       setFilter={setFilter}
-      data-qa-id='UserAutoComplete'
       renderSelected={({ selected: { value, label } }) => (
         <Chip height='x20' value={value} mie={4}>
           <UserAvatar size='x20' username={value} />
@@ -49,12 +56,14 @@ const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
         </Chip>
       )}
       renderItem={({ value, label, ...props }) => (
-        <Option
-          key={value}
-          label={label}
-          avatar={<UserAvatar size='x20' username={value} />}
-          {...props}
-        />
+        <Option key={value} {...props}>
+          <OptionAvatar>
+            <UserAvatar username={value} size='x20' />
+          </OptionAvatar>
+          <OptionContent>
+            {label} <OptionDescription>({value})</OptionDescription>
+          </OptionContent>
+        </Option>
       )}
     />
   );

From 0fc443131591231dba92b06e6de4a9f0b6882abb Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Wed, 6 Mar 2024 14:24:00 -0300
Subject: [PATCH 14/19] remove console

---
 .../elements/UsersSelectElement/MultiUsersSelectElement.tsx    | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
index 5a3146497e4f..bdf7bfef4a31 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
@@ -32,14 +32,11 @@ const MultiUsersSelectElement = ({
 
   const handleChange = useCallback(
     (value) => {
-      console.log(value);
       action({ target: { value } });
     },
     [action]
   );
 
-  console.log(value);
-
   return (
     <AutoComplete
       value={value || []}

From b271983168589a1689f60ea38f74b75a6319c32d Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Thu, 14 Mar 2024 18:59:24 -0300
Subject: [PATCH 15/19] Update .changeset/cuddly-cycles-nail.md

Co-authored-by: Marcos Spessatto Defendi <marcos.defendi@rocket.chat>
---
 .changeset/cuddly-cycles-nail.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/cuddly-cycles-nail.md b/.changeset/cuddly-cycles-nail.md
index 0f11a6cb0a82..21c7989e34d7 100644
--- a/.changeset/cuddly-cycles-nail.md
+++ b/.changeset/cuddly-cycles-nail.md
@@ -1,6 +1,6 @@
 ---
 "@rocket.chat/fuselage-ui-kit": minor
-"@rocket.chat/ui-kit": patch
+"@rocket.chat/ui-kit": minor
 ---
 
 Introduce users select to UiKit

From a2a993730c034183076c1ff62767da20fbb3600e Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Tue, 2 Apr 2024 10:33:53 -0300
Subject: [PATCH 16/19] Update .changeset/cuddly-cycles-nail.md

Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
---
 .changeset/cuddly-cycles-nail.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/cuddly-cycles-nail.md b/.changeset/cuddly-cycles-nail.md
index 21c7989e34d7..ee49600ee865 100644
--- a/.changeset/cuddly-cycles-nail.md
+++ b/.changeset/cuddly-cycles-nail.md
@@ -3,4 +3,4 @@
 "@rocket.chat/ui-kit": minor
 ---
 
-Introduce users select to UiKit
+Introduced new elements for apps to select users

From e50c03bae9896cd596b02fa1d93fbaa227a1a65c Mon Sep 17 00:00:00 2001
From: Tiago Evangelista <tiago.evangelista@rocket.chat>
Date: Wed, 3 Apr 2024 15:04:46 -0300
Subject: [PATCH 17/19] add tests

---
 packages/fuselage-ui-kit/jest.config.ts       | 30 ++++++++++
 packages/fuselage-ui-kit/jest.setup.ts        | 11 ++++
 packages/fuselage-ui-kit/package.json         |  4 ++
 .../UserSelectElement.spec.tsx                | 57 +++++++++++++++++++
 yarn.lock                                     | 24 +++++++-
 5 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 packages/fuselage-ui-kit/jest.config.ts
 create mode 100644 packages/fuselage-ui-kit/jest.setup.ts
 create mode 100644 packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserSelectElement.spec.tsx

diff --git a/packages/fuselage-ui-kit/jest.config.ts b/packages/fuselage-ui-kit/jest.config.ts
new file mode 100644
index 000000000000..ee826d7075d1
--- /dev/null
+++ b/packages/fuselage-ui-kit/jest.config.ts
@@ -0,0 +1,30 @@
+export default {
+  errorOnDeprecated: true,
+  testEnvironment: 'jsdom',
+  modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  testMatch: ['<rootDir>/src/**/**.spec.[jt]s?(x)'],
+  transform: {
+    '^.+\\.(t|j)sx?$': [
+      '@swc/jest',
+      {
+        jsc: {
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
+        },
+      },
+    ],
+  },
+  moduleNameMapper: {
+    '\\.css$': 'identity-obj-proxy',
+    '^react($|/.+)': '<rootDir>/../../node_modules/react$1',
+  },
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{ts,tsx}'],
+  setupFilesAfterEnv: [
+    '@testing-library/jest-dom/extend-expect',
+    '<rootDir>/jest.setup.ts',
+  ],
+};
diff --git a/packages/fuselage-ui-kit/jest.setup.ts b/packages/fuselage-ui-kit/jest.setup.ts
new file mode 100644
index 000000000000..657e42bbdea1
--- /dev/null
+++ b/packages/fuselage-ui-kit/jest.setup.ts
@@ -0,0 +1,11 @@
+import { TextEncoder, TextDecoder } from 'util';
+
+global.TextEncoder = TextEncoder;
+// @ts-ignore
+global.TextDecoder = TextDecoder;
+
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json
index 72f61f197aab..34c7c7028769 100644
--- a/packages/fuselage-ui-kit/package.json
+++ b/packages/fuselage-ui-kit/package.json
@@ -33,6 +33,7 @@
     ".:build:esm": "tsc -p tsconfig-esm.json",
     ".:build:cjs": "tsc -p tsconfig-cjs.json",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx .",
+    "testunit": "jest",
     "typecheck": "tsc --noEmit",
     "docs": "cross-env NODE_ENV=production build-storybook -o ../../static/fuselage-ui-kit",
     "storybook": "start-storybook -p 6006 --no-version-updates",
@@ -67,6 +68,7 @@
     "@rocket.chat/fuselage-hooks": "^0.33.0",
     "@rocket.chat/fuselage-polyfills": "~0.31.25",
     "@rocket.chat/icons": "^0.33.0",
+    "@rocket.chat/mock-providers": "workspace:^",
     "@rocket.chat/prettier-config": "~0.31.25",
     "@rocket.chat/styled": "~0.31.25",
     "@rocket.chat/ui-avatar": "workspace:^",
@@ -81,6 +83,7 @@
     "@storybook/source-loader": "~6.5.16",
     "@storybook/theming": "~6.5.16",
     "@tanstack/react-query": "^4.16.1",
+    "@testing-library/react": "^12.1.5",
     "@types/babel__core": "^7.20.3",
     "@types/babel__preset-env": "^7.9.4",
     "@types/react": "~17.0.69",
@@ -88,6 +91,7 @@
     "babel-loader": "~8.2.5",
     "cross-env": "^7.0.3",
     "eslint": "~8.45.0",
+    "jest": "^29.7.0",
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "~2.8.8",
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserSelectElement.spec.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserSelectElement.spec.tsx
new file mode 100644
index 000000000000..b610b28cc92c
--- /dev/null
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserSelectElement.spec.tsx
@@ -0,0 +1,57 @@
+import { MockedServerContext } from '@rocket.chat/mock-providers';
+import type {
+  UsersSelectElement as UsersSelectElementType,
+  MultiUsersSelectElement as MultiUsersSelectElementType,
+} from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
+import { render, screen } from '@testing-library/react';
+
+import { contextualBarParser } from '../../surfaces';
+import MultiUsersSelectElement from './MultiUsersSelectElement';
+import UsersSelectElement from './UsersSelectElement';
+
+const userBlock: UsersSelectElementType = {
+  type: 'users_select',
+  appId: 'test',
+  blockId: 'test',
+  actionId: 'test',
+};
+
+const multiUserBlock: MultiUsersSelectElementType = {
+  type: 'multi_users_select',
+  appId: 'test',
+  blockId: 'test',
+  actionId: 'test',
+};
+
+describe('UiKit UserSelect Element', () => {
+  it('should render a UiKit user selector', async () => {
+    render(
+      <MockedServerContext>
+        <UsersSelectElement
+          index={0}
+          block={userBlock}
+          context={BlockContext.FORM}
+          surfaceRenderer={contextualBarParser}
+        />
+      </MockedServerContext>
+    );
+
+    expect(await screen.findByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('should render a UiKit multi user selector', async () => {
+    render(
+      <MockedServerContext>
+        <MultiUsersSelectElement
+          index={0}
+          block={multiUserBlock}
+          context={BlockContext.FORM}
+          surfaceRenderer={contextualBarParser}
+        />
+      </MockedServerContext>
+    );
+
+    expect(await screen.findByRole('textbox')).toBeInTheDocument();
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 7c88ca377d17..f1e6131ab4a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9309,6 +9309,7 @@ __metadata:
     "@rocket.chat/fuselage-polyfills": ~0.31.25
     "@rocket.chat/gazzodown": "workspace:^"
     "@rocket.chat/icons": ^0.33.0
+    "@rocket.chat/mock-providers": "workspace:^"
     "@rocket.chat/prettier-config": ~0.31.25
     "@rocket.chat/styled": ~0.31.25
     "@rocket.chat/ui-avatar": "workspace:^"
@@ -9323,6 +9324,7 @@ __metadata:
     "@storybook/source-loader": ~6.5.16
     "@storybook/theming": ~6.5.16
     "@tanstack/react-query": ^4.16.1
+    "@testing-library/react": ^12.1.5
     "@types/babel__core": ^7.20.3
     "@types/babel__preset-env": ^7.9.4
     "@types/react": ~17.0.69
@@ -9330,6 +9332,7 @@ __metadata:
     babel-loader: ~8.2.5
     cross-env: ^7.0.3
     eslint: ~8.45.0
+    jest: ^29.7.0
     normalize.css: ^8.0.1
     npm-run-all: ^4.1.5
     prettier: ~2.8.8
@@ -27695,7 +27698,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-cli@npm:^29.5.0, jest-cli@npm:^29.6.4":
+"jest-cli@npm:^29.5.0, jest-cli@npm:^29.6.4, jest-cli@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-cli@npm:29.7.0"
   dependencies:
@@ -28224,6 +28227,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest@npm:29.7.0"
+  dependencies:
+    "@jest/core": ^29.7.0
+    "@jest/types": ^29.6.3
+    import-local: ^3.0.2
+    jest-cli: ^29.7.0
+  peerDependencies:
+    node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+  peerDependenciesMeta:
+    node-notifier:
+      optional: true
+  bin:
+    jest: bin/jest.js
+  checksum: 17ca8d67504a7dbb1998cf3c3077ec9031ba3eb512da8d71cb91bcabb2b8995c4e4b292b740cb9bf1cbff5ce3e110b3f7c777b0cefb6f41ab05445f248d0ee0b
+  languageName: node
+  linkType: hard
+
 "jest@npm:~29.5.0":
   version: 29.5.0
   resolution: "jest@npm:29.5.0"

From 8ccf3cbce7d16b2d8090907a69bae5ab92d6f735 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista <tiago.evangelista@rocket.chat>
Date: Wed, 10 Apr 2024 15:31:37 -0300
Subject: [PATCH 18/19] add more tests

---
 packages/fuselage-ui-kit/package.json         |   3 +-
 .../MultiUsersSelectElement.spec.tsx          | 120 ++++++++++++++++++
 .../UserSelectElement.spec.tsx                |  90 +++++++++----
 .../UsersSelectElement/UsersSelectElement.tsx |  26 ++--
 yarn.lock                                     |  14 +-
 5 files changed, 208 insertions(+), 45 deletions(-)
 create mode 100644 packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.spec.tsx

diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json
index b9ea58bb9904..6cc35aaa0fac 100644
--- a/packages/fuselage-ui-kit/package.json
+++ b/packages/fuselage-ui-kit/package.json
@@ -84,8 +84,9 @@
     "@storybook/source-loader": "~6.5.16",
     "@storybook/theming": "~6.5.16",
     "@tanstack/react-query": "^4.16.1",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/babel__core": "^7.20.3",
     "@types/babel__preset-env": "^7.9.4",
     "@types/react": "~17.0.69",
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.spec.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.spec.tsx
new file mode 100644
index 000000000000..f6db26b475b2
--- /dev/null
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.spec.tsx
@@ -0,0 +1,120 @@
+import { MockedServerContext } from '@rocket.chat/mock-providers';
+import type { MultiUsersSelectElement as MultiUsersSelectElementType } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { contextualBarParser } from '../../surfaces';
+import MultiUsersSelectElement from './MultiUsersSelectElement';
+import { useUsersData } from './hooks/useUsersData';
+
+const usersBlock: MultiUsersSelectElementType = {
+  type: 'multi_users_select',
+  appId: 'test',
+  blockId: 'test',
+  actionId: 'test',
+};
+
+jest.mock('./hooks/useUsersData');
+
+const mockedOptions = [
+  {
+    value: 'user1_id',
+    label: 'User 1',
+  },
+  {
+    value: 'user2_id',
+    label: 'User 2',
+  },
+  {
+    value: 'user3_id',
+    label: 'User 3',
+  },
+];
+
+const mockUseUsersData = jest.mocked(useUsersData);
+mockUseUsersData.mockReturnValue(mockedOptions);
+
+describe('UiKit MultiUsersSelect Element', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(() => {
+    render(
+      <MockedServerContext>
+        <MultiUsersSelectElement
+          index={0}
+          block={usersBlock}
+          context={BlockContext.FORM}
+          surfaceRenderer={contextualBarParser}
+        />
+      </MockedServerContext>
+    );
+  });
+
+  it('should render a UiKit multiple users selector', async () => {
+    expect(await screen.findByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('should open the users selector', async () => {
+    const input = await screen.findByRole('textbox');
+    input.focus();
+
+    expect(await screen.findByRole('listbox')).toBeInTheDocument();
+  });
+
+  it('should filter users', async () => {
+    const input = (await screen.findByRole('textbox')) as HTMLInputElement;
+
+    await userEvent.type(input, 'User 2', { delay: null });
+
+    mockUseUsersData.mockReturnValueOnce(
+      mockedOptions.filter((option) => option.label === input.value)
+    );
+
+    await waitFor(async () => {
+      const option = (await screen.findAllByRole('option'))[0];
+      expect(option).toHaveTextContent('User 2');
+    });
+  });
+
+  it('should select users', async () => {
+    const input = await screen.findByRole('textbox');
+
+    input.focus();
+
+    const option1 = (await screen.findAllByRole('option'))[0];
+    await userEvent.click(option1, { delay: null });
+
+    const option2 = (await screen.findAllByRole('option'))[2];
+    await userEvent.click(option2, { delay: null });
+
+    const selected = await screen.findAllByRole('button');
+    expect(selected[0]).toHaveValue('user1_id');
+    expect(selected[1]).toHaveValue('user3_id');
+  });
+
+  it('should remove a user', async () => {
+    const input = await screen.findByRole('textbox');
+
+    input.focus();
+
+    const option1 = (await screen.findAllByRole('option'))[0];
+    await userEvent.click(option1, { delay: null });
+
+    const option2 = (await screen.findAllByRole('option'))[2];
+    await userEvent.click(option2, { delay: null });
+
+    const selected1 = (await screen.findAllByRole('button'))[0];
+    expect(selected1).toHaveValue('user1_id');
+    await userEvent.click(selected1, { delay: null });
+
+    const remainingSelected = (await screen.findAllByRole('button'))[0];
+    expect(remainingSelected).toHaveValue('user3_id');
+  });
+});
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserSelectElement.spec.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserSelectElement.spec.tsx
index b610b28cc92c..9bce1f3049cb 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserSelectElement.spec.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserSelectElement.spec.tsx
@@ -1,14 +1,12 @@
 import { MockedServerContext } from '@rocket.chat/mock-providers';
-import type {
-  UsersSelectElement as UsersSelectElementType,
-  MultiUsersSelectElement as MultiUsersSelectElementType,
-} from '@rocket.chat/ui-kit';
+import type { UsersSelectElement as UsersSelectElementType } from '@rocket.chat/ui-kit';
 import { BlockContext } from '@rocket.chat/ui-kit';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { contextualBarParser } from '../../surfaces';
-import MultiUsersSelectElement from './MultiUsersSelectElement';
 import UsersSelectElement from './UsersSelectElement';
+import { useUsersData } from './hooks/useUsersData';
 
 const userBlock: UsersSelectElementType = {
   type: 'users_select',
@@ -17,15 +15,36 @@ const userBlock: UsersSelectElementType = {
   actionId: 'test',
 };
 
-const multiUserBlock: MultiUsersSelectElementType = {
-  type: 'multi_users_select',
-  appId: 'test',
-  blockId: 'test',
-  actionId: 'test',
-};
+jest.mock('./hooks/useUsersData');
+
+const mockedOptions = [
+  {
+    value: 'user1_id',
+    label: 'User 1',
+  },
+  {
+    value: 'user2_id',
+    label: 'User 2',
+  },
+  {
+    value: 'user3_id',
+    label: 'User 3',
+  },
+];
+
+const mockUseUsersData = jest.mocked(useUsersData);
+mockUseUsersData.mockReturnValue(mockedOptions);
 
 describe('UiKit UserSelect Element', () => {
-  it('should render a UiKit user selector', async () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(() => {
     render(
       <MockedServerContext>
         <UsersSelectElement
@@ -36,22 +55,45 @@ describe('UiKit UserSelect Element', () => {
         />
       </MockedServerContext>
     );
+  });
 
+  it('should render a UiKit user selector', async () => {
     expect(await screen.findByRole('textbox')).toBeInTheDocument();
   });
 
-  it('should render a UiKit multi user selector', async () => {
-    render(
-      <MockedServerContext>
-        <MultiUsersSelectElement
-          index={0}
-          block={multiUserBlock}
-          context={BlockContext.FORM}
-          surfaceRenderer={contextualBarParser}
-        />
-      </MockedServerContext>
+  it('should open the user selector', async () => {
+    const input = await screen.findByRole('textbox');
+    input.focus();
+
+    expect(await screen.findByRole('listbox')).toBeInTheDocument();
+  });
+
+  it('should filter users', async () => {
+    const input = (await screen.findByRole('textbox')) as HTMLInputElement;
+
+    await userEvent.type(input, 'User 2', { delay: null });
+
+    mockUseUsersData.mockReturnValueOnce(
+      mockedOptions.filter((option) => {
+        return option.label === input.value;
+      })
     );
 
-    expect(await screen.findByRole('textbox')).toBeInTheDocument();
+    await waitFor(async () => {
+      const option = (await screen.findAllByRole('option'))[0];
+      expect(option).toHaveTextContent('User 2');
+    });
+  });
+
+  it('should select a user', async () => {
+    const input = await screen.findByRole('textbox');
+
+    input.focus();
+
+    const option = (await screen.findAllByRole('option'))[0];
+    await userEvent.click(option, { delay: null });
+
+    const selected = await screen.findByRole('button');
+    expect(selected).toHaveValue('user1_id');
   });
 });
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
index bc7c89438d43..39e71bd4fce8 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
@@ -1,12 +1,4 @@
-import {
-  AutoComplete,
-  Box,
-  Chip,
-  Option,
-  OptionAvatar,
-  OptionContent,
-  OptionDescription,
-} from '@rocket.chat/fuselage';
+import { AutoComplete, Box, Chip, Option } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import type * as UiKit from '@rocket.chat/ui-kit';
@@ -27,7 +19,7 @@ const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
   const [{ value, loading }, action] = useUiKitState(block, context);
 
   const [filter, setFilter] = useState('');
-  const debouncedFilter = useDebouncedValue(filter, 1000);
+  const debouncedFilter = useDebouncedValue(filter, 300);
 
   const data = useUsersData({ filter: debouncedFilter });
 
@@ -56,14 +48,12 @@ const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
         </Chip>
       )}
       renderItem={({ value, label, ...props }) => (
-        <Option key={value} {...props}>
-          <OptionAvatar>
-            <UserAvatar username={value} size='x20' />
-          </OptionAvatar>
-          <OptionContent>
-            {label} <OptionDescription>({value})</OptionDescription>
-          </OptionContent>
-        </Option>
+        <Option
+          key={value}
+          {...props}
+          label={label}
+          avatar={<UserAvatar username={value} size='x20' />}
+        />
       )}
     />
   );
diff --git a/yarn.lock b/yarn.lock
index 76e465007298..563cb3113e3b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8761,8 +8761,9 @@ __metadata:
     "@storybook/source-loader": ~6.5.16
     "@storybook/theming": ~6.5.16
     "@tanstack/react-query": ^4.16.1
-    "@testing-library/react": ^12.1.5
+    "@testing-library/react": ^12.1.4
     "@testing-library/react-hooks": ^8.0.1
+    "@testing-library/user-event": ^14.5.2
     "@types/babel__core": ^7.20.3
     "@types/babel__preset-env": ^7.9.4
     "@types/react": ~17.0.69
@@ -12533,7 +12534,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:^12.1.5, @testing-library/react@npm:~12.1.5":
+"@testing-library/react@npm:^12.1.4, @testing-library/react@npm:^12.1.5, @testing-library/react@npm:~12.1.5":
   version: 12.1.5
   resolution: "@testing-library/react@npm:12.1.5"
   dependencies:
@@ -12581,6 +12582,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/user-event@npm:^14.5.2":
+  version: 14.5.2
+  resolution: "@testing-library/user-event@npm:14.5.2"
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: d76937dffcf0082fbf3bb89eb2b81a31bf5448048dd61c33928c5f10e33a58e035321d39145cefd469bb5a499c68a5b4086b22f1a44e3e7c7e817dc5f6782867
+  languageName: node
+  linkType: hard
+
 "@tokenizer/token@npm:^0.3.0":
   version: 0.3.0
   resolution: "@tokenizer/token@npm:0.3.0"

From 2b4b82a230bd95058d3f87295a36112ec6d3e2c7 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista <tiago.evangelista@rocket.chat>
Date: Mon, 15 Apr 2024 17:30:40 -0300
Subject: [PATCH 19/19] remove unnecessary test

---
 .../MultiUsersSelectElement.spec.tsx          | 17 +----------------
 .../UserSelectElement.spec.tsx                | 19 +------------------
 2 files changed, 2 insertions(+), 34 deletions(-)

diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.spec.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.spec.tsx
index f6db26b475b2..1a6afad6c614 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.spec.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.spec.tsx
@@ -1,7 +1,7 @@
 import { MockedServerContext } from '@rocket.chat/mock-providers';
 import type { MultiUsersSelectElement as MultiUsersSelectElementType } from '@rocket.chat/ui-kit';
 import { BlockContext } from '@rocket.chat/ui-kit';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { contextualBarParser } from '../../surfaces';
@@ -68,21 +68,6 @@ describe('UiKit MultiUsersSelect Element', () => {
     expect(await screen.findByRole('listbox')).toBeInTheDocument();
   });
 
-  it('should filter users', async () => {
-    const input = (await screen.findByRole('textbox')) as HTMLInputElement;
-
-    await userEvent.type(input, 'User 2', { delay: null });
-
-    mockUseUsersData.mockReturnValueOnce(
-      mockedOptions.filter((option) => option.label === input.value)
-    );
-
-    await waitFor(async () => {
-      const option = (await screen.findAllByRole('option'))[0];
-      expect(option).toHaveTextContent('User 2');
-    });
-  });
-
   it('should select users', async () => {
     const input = await screen.findByRole('textbox');
 
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserSelectElement.spec.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserSelectElement.spec.tsx
index 9bce1f3049cb..02f11d50951b 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserSelectElement.spec.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UserSelectElement.spec.tsx
@@ -1,7 +1,7 @@
 import { MockedServerContext } from '@rocket.chat/mock-providers';
 import type { UsersSelectElement as UsersSelectElementType } from '@rocket.chat/ui-kit';
 import { BlockContext } from '@rocket.chat/ui-kit';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { contextualBarParser } from '../../surfaces';
@@ -68,23 +68,6 @@ describe('UiKit UserSelect Element', () => {
     expect(await screen.findByRole('listbox')).toBeInTheDocument();
   });
 
-  it('should filter users', async () => {
-    const input = (await screen.findByRole('textbox')) as HTMLInputElement;
-
-    await userEvent.type(input, 'User 2', { delay: null });
-
-    mockUseUsersData.mockReturnValueOnce(
-      mockedOptions.filter((option) => {
-        return option.label === input.value;
-      })
-    );
-
-    await waitFor(async () => {
-      const option = (await screen.findAllByRole('option'))[0];
-      expect(option).toHaveTextContent('User 2');
-    });
-  });
-
   it('should select a user', async () => {
     const input = await screen.findByRole('textbox');