snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx

@@ -0,0 +1,130 @@
+import { MultiSelectFiltered } from '@rocket.chat/fuselage-forms';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import type { AllHTMLAttributes } from 'react';
+import { memo, useState, useCallback, useMemo, forwardRef } from 'react';
+
+import AutocompleteOptions, { OptionsContext } from './UserAutoCompleteMultipleOptions';
+import UserAvatarChip from './UserAvatarChip';
+import { usersQueryKeys } from '../../lib/queryKeys';
+
+export type UserAutoCompleteMultipleProps = {
+	onChange: (value: Array<string>) => void;
+	value: Array<string> | undefined;
+	placeholder?: string;
+	federated?: boolean;
+	exceptions?: string[];
+	error?: string;
+} & Omit<AllHTMLAttributes<HTMLInputElement>, 'is' | 'onChange' | 'value'>;
+
+type UserAutoCompleteOptionType = {
+	name: string;
+	username: string;
+	_federated?: boolean;
+};
+
+type UserAutoCompleteOptions = {
+	[k: string]: UserAutoCompleteOptionType;
+};
+
+const matrixRegex = new RegExp('@(.*:.*)');
+
+const UserAutoCompleteMultiple = forwardRef<HTMLInputElement, UserAutoCompleteMultipleProps>(
+	({ onChange, value, placeholder, federated, exceptions, ...props }, ref) => {
+		const [filter, setFilter] = useState('');
+		const [selectedCache, setSelectedCache] = useState<UserAutoCompleteOptions>({});
+
+		const debouncedFilter = useDebouncedValue(filter, 500);
+		const getUsers = useEndpoint('GET', '/v1/users.autocomplete');
+
+		const { data } = useQuery({
+			queryKey: usersQueryKeys.userAutoComplete(debouncedFilter, federated ?? false, exceptions),
+
+			queryFn: async () => {
+				const users = await getUsers({ selector: JSON.stringify({ term: debouncedFilter, ...(exceptions?.length && { exceptions }) }) });
+				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 (federated && matrixRegex.test(debouncedFilter)) {
+					options.unshift([debouncedFilter, { name: debouncedFilter, username: debouncedFilter, _federated: true }]);
+				}
+
+				return options;
+			},
+
+			placeholderData: keepPreviousData,
+		});
+
+		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 handleOnChange = useCallback(
+			(usernames: string[]) => {
+				onChange(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);
+			},
+			[onChange, setFilter, onAddUser, onRemoveUser, value],
+		);
+
+		return (
+			<OptionsContext.Provider value={{ options }}>
+				<MultiSelectFiltered
+					{...props}
+					ref={ref}
+					placeholder={placeholder}
+					value={value}
+					onChange={handleOnChange}
+					filter={filter}
+					setFilter={setFilter}
+					renderSelected={({ value: username, onMouseDown }) => {
+						const currentCachedOption = selectedCache[username] || {};
+
+						return (
+							<UserAvatarChip
+								marginInlineEnd={4}
+								marginBlock={2}
+								key={username}
+								federated={currentCachedOption._federated}
+								name={currentCachedOption.name}
+								username={currentCachedOption.username || username}
+								onMouseDown={onMouseDown}
+							/>
+						);
+					}}
+					renderOptions={AutocompleteOptions}
+					options={options.concat(Object.entries(selectedCache)).map(([, item]) => [item.username, item.name || item.username])}
+				/>
+			</OptionsContext.Provider>
+		);
+	},
+);
+
+UserAutoCompleteMultiple.displayName = 'UserAutoCompleteMultiple';
+
+export default memo(UserAutoCompleteMultiple);

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx

@@ -0,0 +1,46 @@
+import { Option, OptionDescription } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+
+import type { UserLabel } from './UserAutoCompleteMultipleOptions';
+import { normalizeUsername } from '../../../lib/utils/normalizeUsername';
+
+export type UserAutoCompleteMultipleOptionProps = {
+	label: UserLabel;
+	value: string | number;
+	selected?: boolean;
+	focus?: boolean;
+	role?: string;
+};
+
+const UserAutoCompleteMultipleOption = ({ label, ...props }: UserAutoCompleteMultipleOptionProps) => {
+	const { name, _federated } = label;
+	const useRealName = useSetting('UI_Use_Real_Name');
+	const username = normalizeUsername(label.username);
+
+	const optionLabel = useMemo(() => {
+		if (!useRealName || !name) {
+			return <>{username}</>;
+		}
+
+		return (
+			<>
+				{name} {!_federated && <OptionDescription>@{username}</OptionDescription>}
+			</>
+		);
+	}, [_federated, name, useRealName, username]);
+
+	return (
+		<Option
+			{...props}
+			aria-label={username}
+			avatar={_federated ? undefined : <UserAvatar username={username || ''} size='x20' />}
+			icon={_federated ? 'globe' : undefined}
+			key={username}
+			label={optionLabel}
+		/>
+	);
+};
+
+export default UserAutoCompleteMultipleOption;

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOptions.tsx

@@ -0,0 +1,42 @@
+import type { OptionType } from '@rocket.chat/fuselage';
+import { Options } from '@rocket.chat/fuselage';
+import type { ComponentProps, 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.
+
+export type UserLabel = {
+	_federated?: boolean;
+	username: string;
+	name?: string;
+};
+
+type OptionsContextValue = {
+	options: OptionType<string, UserLabel>[];
+};
+
+export const OptionsContext = createContext<OptionsContextValue>({
+	options: [],
+});
+const UserAutoCompleteMultipleOptions = forwardRef(function UserAutoCompleteMultipleOptions(
+	{ onSelect, ...props }: ComponentProps<typeof Options>,
+	ref: Ref<HTMLElement>,
+) {
+	const { options } = useContext(OptionsContext);
+	return (
+		<Options
+			{...props}
+			key='AutocompleteOptions'
+			options={options}
+			onSelect={onSelect}
+			ref={ref}
+			renderItem={UserAutoCompleteMultipleOption}
+		/>
+	);
+});
+
+export default UserAutoCompleteMultipleOptions;

apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.spec.tsx

@@ -0,0 +1,37 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import UserAvatarChip from './UserAvatarChip';
+import * as stories from './UserAvatarChip.stories';
+
+describe('UserAvatarChip', () => {
+	const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+	test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+		const { baseElement } = render(<Story />);
+		expect(baseElement).toMatchSnapshot();
+	});
+
+	test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+		const { container } = render(<Story />);
+
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+
+	it('should pass extra props to the Chip component', () => {
+		const handleClick = jest.fn();
+		render(<UserAvatarChip username='testuser' onClick={handleClick} />);
+		screen.getByRole('button').click();
+		expect(handleClick).toHaveBeenCalled();
+	});
+
+	it('should render real name if the setting is enabled', () => {
+		render(<UserAvatarChip username='testuser' name='Test User' />, {
+			wrapper: mockAppRoot().withSetting('UI_Use_Real_Name', true).build(),
+		});
+		expect(screen.getByText('Test User')).toBeInTheDocument();
+	});
+});

apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import UserAvatarChip from './UserAvatarChip';
+
+const meta = {
+	component: UserAvatarChip,
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies Meta<typeof UserAvatarChip>;
+
+export default meta;
+
+export const Default = {
+	args: {
+		onClick: action('onClick'),
+		name: 'John Doe',
+		username: 'johndoe',
+	},
+};
+
+export const Federated = {
+	args: {
+		onClick: action('onClick'),
+		name: 'John Doe',
+		username: 'johndoe',
+		federated: true,
+	},
+};
+
+export const WithoutName = {
+	args: {
+		onClick: action('onClick'),
+		username: 'johndoe',
+	},
+};
+
+export const WithoutClickEvent = {
+	args: {
+		username: 'johndoe',
+	},
+};

apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx

@@ -0,0 +1,24 @@
+import { Box, Chip, Icon } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
+import type { ComponentProps } from 'react';
+
+export type UserAvatarChipProps = ComponentProps<typeof Chip> & {
+	federated?: boolean;
+	username: string;
+	name?: string;
+};
+
+const UserAvatarChip = ({ federated, username, name, ...props }: UserAvatarChipProps) => {
+	const displayName = useUserDisplayName({ name, username });
+	return (
+		<Chip height='x20' {...props}>
+			{federated ? <Icon size='x20' name='globe' verticalAlign='middle' /> : <UserAvatar size='x20' username={username} />}
+			<Box is='span' margin='none' marginInlineStart={4} verticalAlign='middle'>
+				{displayName}
+			</Box>
+		</Chip>
+	);
+};
+
+export default UserAvatarChip;

apps/meteor/client/components/UserAutoCompleteMultiple/__snapshots__/UserAvatarChip.spec.tsx.snap

@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`UserAvatarChip renders Default without crashing 1`] = `
+<body>
+  <div>
+    <button
+      class="rcx-box rcx-chip rcx-css-u2ekhj"
+      type="button"
+    >
+      <span
+        class="rcx-box rcx-chip__text rcx-css-trljwa"
+      >
+        <figure
+          class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x20"
+        >
+          <img
+            alt="Avatar"
+            aria-hidden="true"
+            class="rcx-avatar__element rcx-avatar__element--x20"
+            data-username="johndoe"
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+            title="johndoe"
+          />
+        </figure>
+        <span
+          class="rcx-box rcx-box--full rcx-css-1wsppvb"
+        >
+          johndoe
+        </span>
+      </span>
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-trljwa rcx-css-1wv1vf9"
+      >
+        
+      </i>
+    </button>
+  </div>
+</body>
+`;
+
+exports[`UserAvatarChip renders Federated without crashing 1`] = `
+<body>
+  <div>
+    <button
+      class="rcx-box rcx-chip rcx-css-u2ekhj"
+      type="button"
+    >
+      <span
+        class="rcx-box rcx-chip__text rcx-css-trljwa"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-globe rcx-icon rcx-css-s0bbgk"
+        >
+          
+        </i>
+        <span
+          class="rcx-box rcx-box--full rcx-css-1wsppvb"
+        >
+          johndoe
+        </span>
+      </span>
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-trljwa rcx-css-1wv1vf9"
+      >
+        
+      </i>
+    </button>
+  </div>
+</body>
+`;
+
+exports[`UserAvatarChip renders WithoutClickEvent without crashing 1`] = `
+<body>
+  <div>
+    <button
+      class="rcx-box rcx-chip rcx-css-u2ekhj"
+      disabled=""
+      type="button"
+    >
+      <span
+        class="rcx-box rcx-chip__text rcx-css-trljwa"
+      >
+        <figure
+          class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x20"
+        >
+          <img
+            alt="Avatar"
+            aria-hidden="true"
+            class="rcx-avatar__element rcx-avatar__element--x20"
+            data-username="johndoe"
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+            title="johndoe"
+          />
+        </figure>
+        <span
+          class="rcx-box rcx-box--full rcx-css-1wsppvb"
+        >
+          johndoe
+        </span>
+      </span>
+    </button>
+  </div>
+</body>
+`;
+
+exports[`UserAvatarChip renders WithoutName without crashing 1`] = `
+<body>
+  <div>
+    <button
+      class="rcx-box rcx-chip rcx-css-u2ekhj"
+      type="button"
+    >
+      <span
+        class="rcx-box rcx-chip__text rcx-css-trljwa"
+      >
+        <figure
+          class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x20"
+        >
+          <img
+            alt="Avatar"
+            aria-hidden="true"
+            class="rcx-avatar__element rcx-avatar__element--x20"
+            data-username="johndoe"
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+            title="johndoe"
+          />
+        </figure>
+        <span
+          class="rcx-box rcx-box--full rcx-css-1wsppvb"
+        >
+          johndoe
+        </span>
+      </span>
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-trljwa rcx-css-1wv1vf9"
+      >
+        
+      </i>
+    </button>
+  </div>
+</body>
+`;

apps/meteor/client/components/UserAutoCompleteMultiple/index.ts

@@ -0,0 +1 @@
+export { default } from './UserAutoCompleteMultiple';