From d32d5bc68fbcc218aef0da40302359ea252d0d2e Mon Sep 17 00:00:00 2001
From: Tasso <tasso.evangelista@rocket.chat>
Date: Fri, 14 Nov 2025 13:14:44 -0300
Subject: [PATCH 1/2] Invert spreaded props potentiallly overwriting other
 props

---
 packages/fuselage-ui-kit/README.md                        | 4 ++--
 packages/fuselage-ui-kit/package.json                     | 8 +++-----
 .../ChannelsSelectElement/ChannelsSelectElement.tsx       | 2 +-
 .../ChannelsSelectElement/MultiChannelsSelectElement.tsx  | 4 ++--
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/fuselage-ui-kit/README.md b/packages/fuselage-ui-kit/README.md
index 1f80bec94c631..de1b9fca87b21 100644
--- a/packages/fuselage-ui-kit/README.md
+++ b/packages/fuselage-ui-kit/README.md
@@ -25,11 +25,11 @@
 Firstly, install the peer dependencies (prerequisites):
 
 ```sh
-npm i @rocket.chat/fuselage @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons @rocket.chat/styled react react-dom
+npm i @rocket.chat/fuselage @rocket.chat/fuselage-hooks @rocket.chat/icons @rocket.chat/styled react react-dom
 
 # or, if you are using yarn:
 
-yarn add @rocket.chat/fuselage @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons @rocket.chat/styled react react-dom
+yarn add @rocket.chat/fuselage @rocket.chat/fuselage-hooks @rocket.chat/icons @rocket.chat/styled react react-dom
 ```
 
 Add `@rocket.chat/fuselage-ui-kit` as a dependency:
diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json
index a186cad3f4a70..77ba8bbaa86d9 100644
--- a/packages/fuselage-ui-kit/package.json
+++ b/packages/fuselage-ui-kit/package.json
@@ -53,11 +53,10 @@
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/emitter": "~0.31.25",
 		"@rocket.chat/eslint-config": "workspace:^",
-		"@rocket.chat/fuselage": "^0.68.1",
-		"@rocket.chat/fuselage-hooks": "~0.37.2",
-		"@rocket.chat/fuselage-polyfills": "~0.31.25",
+		"@rocket.chat/fuselage": "~0.68.1",
+		"@rocket.chat/fuselage-hooks": "~0.38.1",
 		"@rocket.chat/fuselage-tokens": "~0.33.2",
-		"@rocket.chat/icons": "^0.45.0",
+		"@rocket.chat/icons": "~0.45.0",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/mock-providers": "workspace:^",
 		"@rocket.chat/styled": "~0.32.0",
@@ -102,7 +101,6 @@
 		"@rocket.chat/eslint-config": "0.7.0",
 		"@rocket.chat/fuselage": "*",
 		"@rocket.chat/fuselage-hooks": "*",
-		"@rocket.chat/fuselage-polyfills": "*",
 		"@rocket.chat/icons": "*",
 		"@rocket.chat/styled": "*",
 		"@rocket.chat/ui-avatar": "workspace:^",
diff --git a/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/ChannelsSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/ChannelsSelectElement.tsx
index c5a3699907b97..d58adebf7b044 100644
--- a/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/ChannelsSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/ChannelsSelectElement.tsx
@@ -34,7 +34,7 @@ const ChannelsSelectElement = ({ block, context }: ChannelsSelectElementProps) =
 			setFilter={setFilter}
 			renderSelected={({ selected: { value, label } }) => (
 				<Chip height='x20' value={value} mie={4}>
-					<RoomAvatar size='x20' room={{ type: label?.type || 'c', _id: value, ...label }} />
+					<RoomAvatar size='x20' room={{ _id: value, ...label, type: label?.type || 'c' }} />
 					<Box verticalAlign='middle' is='span' margin='none' mi={4}>
 						{label.name}
 					</Box>
diff --git a/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/MultiChannelsSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/MultiChannelsSelectElement.tsx
index 2fd5e217b52ca..77bf367253c19 100644
--- a/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/MultiChannelsSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/MultiChannelsSelectElement.tsx
@@ -35,7 +35,7 @@ const MultiChannelsSelectElement = ({ block, context }: MultiChannelsSelectProps
 			multiple
 			renderSelected={({ selected: { value, label }, onRemove, ...props }) => (
 				<Chip key={value} {...props} value={value} onClick={onRemove}>
-					<RoomAvatar size='x20' room={{ type: label?.type || 'c', _id: value, ...label }} />
+					<RoomAvatar size='x20' room={{ _id: value, ...label, type: label?.type || 'c' }} />
 					<Box is='span' margin='none' mis={4}>
 						{label?.name}
 					</Box>
@@ -46,7 +46,7 @@ const MultiChannelsSelectElement = ({ block, context }: MultiChannelsSelectProps
 					key={value}
 					{...props}
 					label={label.name}
-					avatar={<RoomAvatar size='x20' room={{ type: label?.type || 'c', _id: value, ...label }} />}
+					avatar={<RoomAvatar size='x20' room={{ _id: value, ...label, type: label?.type || 'c' }} />}
 				/>
 			)}
 			options={options}

From c74fdeeffc2808f7f1fb62ca393670f2b677a32a Mon Sep 17 00:00:00 2001
From: Tasso <tasso.evangelista@rocket.chat>
Date: Fri, 14 Nov 2025 13:16:23 -0300
Subject: [PATCH 2/2] Explicitly discard potential passing ref

---
 .../AutoCompleteDepartmentMultiple.tsx        | 30 +++++++++----------
 .../components/AutoCompleteMonitors.tsx       |  5 ++--
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/apps/meteor/client/views/omnichannel/components/AutoCompleteDepartmentMultiple.tsx b/apps/meteor/client/views/omnichannel/components/AutoCompleteDepartmentMultiple.tsx
index 7e7b99b32d068..2d95ed8661b6e 100644
--- a/apps/meteor/client/views/omnichannel/components/AutoCompleteDepartmentMultiple.tsx
+++ b/apps/meteor/client/views/omnichannel/components/AutoCompleteDepartmentMultiple.tsx
@@ -1,7 +1,7 @@
 import { CheckOption, Option, PaginatedMultiSelectFiltered } from '@rocket.chat/fuselage';
 import type { PaginatedMultiSelectOption } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import type { ComponentProps, ComponentPropsWithoutRef, ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -53,20 +53,6 @@ const AutoCompleteDepartmentMultiple = ({
 		return [...departmentsItems, ...pending];
 	}, [departmentsItems, value]);
 
-	const renderItem = ({ label, value, ...props }: ComponentPropsWithoutRef<typeof Option>): ReactElement => {
-		if (withCheckbox) {
-			return (
-				<CheckOption
-					{...props}
-					label={<span style={{ whiteSpace: 'normal' }}>{label}</span>}
-					selected={value ? selectedValues.has(value) : false}
-				/>
-			);
-		}
-
-		return <Option {...props} label={label} />;
-	};
-
 	return (
 		<PaginatedMultiSelectFiltered
 			withTitle
@@ -80,7 +66,19 @@ const AutoCompleteDepartmentMultiple = ({
 			flexShrink={0}
 			flexGrow={0}
 			placeholder={t('Select_an_option')}
-			renderItem={renderItem}
+			renderItem={({ label, value, ref: _ref, ...props }) => {
+				if (withCheckbox) {
+					return (
+						<CheckOption
+							{...props}
+							label={<span style={{ whiteSpace: 'normal' }}>{label}</span>}
+							selected={value ? selectedValues.has(value) : false}
+						/>
+					);
+				}
+
+				return <Option {...props} label={label} />;
+			}}
 			endReached={() => fetchNextPage()}
 		/>
 	);
diff --git a/apps/meteor/client/views/omnichannel/components/AutoCompleteMonitors.tsx b/apps/meteor/client/views/omnichannel/components/AutoCompleteMonitors.tsx
index dde40a4d53a2c..3ee618092751d 100644
--- a/apps/meteor/client/views/omnichannel/components/AutoCompleteMonitors.tsx
+++ b/apps/meteor/client/views/omnichannel/components/AutoCompleteMonitors.tsx
@@ -1,7 +1,6 @@
-import type { Option } from '@rocket.chat/fuselage';
 import { CheckOption, PaginatedMultiSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import type { ComponentProps, ComponentPropsWithoutRef, ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -32,7 +31,7 @@ const AutoCompleteMonitors = ({ value = [], onBlur, onChange, ...props }: AutoCo
 			endReached={() => fetchNextPage()}
 			onBlur={onBlur}
 			onChange={onChange}
-			renderItem={({ label, value, ...props }: ComponentPropsWithoutRef<typeof Option>) => (
+			renderItem={({ label, value, ref: _ref, ...props }) => (
 				<CheckOption {...props} label={label} selected={value ? selectedValues.has(value) : false} />
 			)}
 		/>