From 2e2661e43df16ecbc2659210f08c68640491597b Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 1 Aug 2024 15:23:26 -0300
Subject: [PATCH 1/5] fix: remove nonsense props

---
 .../meteor/client/components/FilterByText.tsx | 30 ++++---------------
 .../directory/contacts/ContactTable.tsx       | 13 ++++----
 yarn.lock                                     |  4 +++
 3 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/apps/meteor/client/components/FilterByText.tsx b/apps/meteor/client/components/FilterByText.tsx
index 1aeeb29a0a57..285c04164ce3 100644
--- a/apps/meteor/client/components/FilterByText.tsx
+++ b/apps/meteor/client/components/FilterByText.tsx
@@ -1,26 +1,13 @@
-import { Box, Icon, TextInput, Button, Margins } from '@rocket.chat/fuselage';
+import { Box, Icon, TextInput, Margins } from '@rocket.chat/fuselage';
 import { useAutoFocus, useMergedRefs } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactNode, ChangeEvent, FormEvent } from 'react';
+import type { ChangeEvent, FormEvent, AllHTMLAttributes } from 'react';
 import React, { forwardRef, memo, useCallback, useEffect, useState } from 'react';
 
-type FilterByTextCommonProps = {
-	children?: ReactNode | undefined;
-	placeholder?: string;
+type FilterByTextProps = {
 	onChange: (filter: { text: string }) => void;
 	shouldAutoFocus?: boolean;
-};
-
-type FilterByTextPropsWithButton = FilterByTextCommonProps & {
-	displayButton: true;
-	textButton: string;
-	onButtonClick: () => void;
-};
-
-type FilterByTextProps = FilterByTextCommonProps | FilterByTextPropsWithButton;
-
-const isFilterByTextPropsWithButton = (props: any): props is FilterByTextPropsWithButton =>
-	'displayButton' in props && props.displayButton === true;
+} & Omit<AllHTMLAttributes<HTMLInputElement>, 'is' | 'onChange'>;
 
 const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function FilterByText(
 	{ placeholder, onChange: setFilter, shouldAutoFocus = false, children, ...props },
@@ -47,6 +34,7 @@ const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function Fi
 		<Box mb={16} mi='neg-x4' is='form' onSubmit={handleFormSubmit} display='flex' flexWrap='wrap' alignItems='center'>
 			<Box mi={4} display='flex' flexGrow={1}>
 				<TextInput
+					{...props}
 					placeholder={placeholder ?? t('Search')}
 					ref={mergedRefs}
 					addon={<Icon name='magnifier' size='x20' />}
@@ -57,13 +45,7 @@ const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function Fi
 					aria-label={placeholder ?? t('Search')}
 				/>
 			</Box>
-			{isFilterByTextPropsWithButton(props) ? (
-				<Button onClick={props.onButtonClick} mis={8} primary>
-					{props.textButton}
-				</Button>
-			) : (
-				children && <Margins all='x4'>{children}</Margins>
-			)}
+			{children && <Margins inline={4}>{children}</Margins>}
 		</Box>
 	);
 });
diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx b/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx
index 76fdce05c9bb..901bff74121d 100644
--- a/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx
@@ -1,4 +1,4 @@
-import { Pagination, States, StatesAction, StatesActions, StatesIcon, StatesTitle, Box } from '@rocket.chat/fuselage';
+import { Pagination, States, StatesAction, StatesActions, StatesIcon, StatesTitle, Box, Button } from '@rocket.chat/fuselage';
 import { useDebouncedState, useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import { hashQueryKey } from '@tanstack/react-query';
@@ -106,12 +106,11 @@ function ContactTable(): ReactElement {
 	return (
 		<>
 			{((isSuccess && data?.visitors.length > 0) || queryHasChanged) && (
-				<FilterByText
-					displayButton
-					textButton={t('New_contact')}
-					onButtonClick={onButtonNewClick}
-					onChange={({ text }): void => setTerm(text)}
-				/>
+				<FilterByText onChange={({ text }) => setTerm(text)}>
+					<Button onClick={onButtonNewClick} primary>
+						{t('New_contact')}
+					</Button>
+				</FilterByText>
 			)}
 			{isLoading && (
 				<GenericTable>
diff --git a/yarn.lock b/yarn.lock
index 89cea10584d5..b8c97e157126 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10370,12 +10370,16 @@ __metadata:
     "@storybook/testing-library": ~0.0.13
     "@types/babel__core": ~7.20.3
     "@types/jest": ~29.5.12
+    "@types/react": ~17.0.69
+    "@types/react-dom": ~17.0.22
     eslint: ~8.45.0
     eslint-plugin-react: ~7.32.2
     eslint-plugin-react-hooks: ~4.6.0
     eslint-plugin-storybook: ~0.6.15
     jest: ~29.7.0
+    react: ~17.0.2
     react-docgen-typescript-plugin: ~1.0.5
+    react-dom: ~17.0.2
     ts-jest: ~29.1.1
     typescript: ~5.3.3
   peerDependencies:

From 3e8be51b13487056dc3bafda0d2996414787105e Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 1 Aug 2024 15:24:38 -0300
Subject: [PATCH 2/5] chore: add margin in `AppsFilters` to compensate

---
 apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx b/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx
index f1332284c97f..c411366c6b1f 100644
--- a/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx
+++ b/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx
@@ -59,7 +59,7 @@ const AppsFilters = ({
 	const fixFiltersSize = breakpoints.includes('lg') ? { maxWidth: 'x200', minWidth: 'x200' } : null;
 
 	return (
-		<Box pi={24}>
+		<Box pi={24} mbe={4}>
 			<FilterByText placeholder={appsSearchPlaceholders[context]} onChange={({ text }): void => setText(text)}>
 				{!isPrivateAppsPage && (
 					<RadioDropDown group={freePaidFilterStructure} onSelected={freePaidFilterOnSelected} flexGrow={1} {...fixFiltersSize} />

From 52680277fc7bc806f40d1c39dcb088b1f3efca2c Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 1 Aug 2024 15:26:07 -0300
Subject: [PATCH 3/5] fix: marketplace `TagList` render

---
 .../components/CategoryFilter/TagList.tsx     | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/apps/meteor/client/views/marketplace/components/CategoryFilter/TagList.tsx b/apps/meteor/client/views/marketplace/components/CategoryFilter/TagList.tsx
index ec5fb13f0fab..3cba9e81b357 100644
--- a/apps/meteor/client/views/marketplace/components/CategoryFilter/TagList.tsx
+++ b/apps/meteor/client/views/marketplace/components/CategoryFilter/TagList.tsx
@@ -8,14 +8,20 @@ type TagListProps = {
 	onClick: CategoryDropDownListProps['onSelected'];
 };
 
-const TagList = ({ categories, onClick }: TagListProps) => (
-	<ButtonGroup wrap small>
-		{categories.map((category) => (
-			<Chip flexShrink={0} key={category.id} onClick={(): void => onClick(category)} disabled={undefined} mbe={8}>
-				{category.label}
-			</Chip>
-		))}
-	</ButtonGroup>
-);
+const TagList = ({ categories, onClick }: TagListProps) => {
+	if (!categories.length) {
+		return null;
+	}
+
+	return (
+		<ButtonGroup wrap small>
+			{categories.map((category) => (
+				<Chip key={category.id} onClick={() => onClick(category)}>
+					{category.label}
+				</Chip>
+			))}
+		</ButtonGroup>
+	);
+};
 
 export default TagList;

From ea8da5068c0c528c119f8fea66d21ed0b1b108c1 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 1 Aug 2024 18:25:13 -0300
Subject: [PATCH 4/5] chore: revert yarn.lock

---
 yarn.lock | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index b8c97e157126..89cea10584d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10370,16 +10370,12 @@ __metadata:
     "@storybook/testing-library": ~0.0.13
     "@types/babel__core": ~7.20.3
     "@types/jest": ~29.5.12
-    "@types/react": ~17.0.69
-    "@types/react-dom": ~17.0.22
     eslint: ~8.45.0
     eslint-plugin-react: ~7.32.2
     eslint-plugin-react-hooks: ~4.6.0
     eslint-plugin-storybook: ~0.6.15
     jest: ~29.7.0
-    react: ~17.0.2
     react-docgen-typescript-plugin: ~1.0.5
-    react-dom: ~17.0.2
     ts-jest: ~29.1.1
     typescript: ~5.3.3
   peerDependencies:

From e57bf2da871a62850491b383e2889f5ecbec47c1 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Fri, 2 Aug 2024 18:01:46 -0300
Subject: [PATCH 5/5] chore: sanitize `FilterByText` onChange handler

---
 apps/meteor/client/components/FilterByText.tsx  | 17 +++++++----------
 .../businessHours/BusinessHoursTable.tsx        |  2 +-
 .../omnichannel/monitors/MonitorsTable.tsx      |  2 +-
 .../client/omnichannel/slaPolicies/SlaTable.tsx |  2 +-
 .../client/omnichannel/tags/TagsTable.tsx       |  2 +-
 .../client/omnichannel/units/UnitsTable.tsx     |  2 +-
 .../views/admin/customEmoji/CustomEmoji.tsx     |  2 +-
 .../CustomSoundsTable/CustomSoundsTable.tsx     |  2 +-
 .../CustomUserStatusTable.tsx                   |  2 +-
 .../DeviceManagementAdminTable.tsx              |  2 +-
 .../admin/integrations/IntegrationsTable.tsx    |  2 +-
 .../moderation/helpers/ModerationFilter.tsx     |  6 ++----
 .../users/UsersTable/UsersTableFilters.tsx      |  2 +-
 .../channels/ChannelsTable/ChannelsTable.tsx    |  2 +-
 .../tabs/teams/TeamsTable/TeamsTable.tsx        |  2 +-
 .../tabs/users/UsersTable/UsersTable.tsx        |  2 +-
 .../views/marketplace/AppsPage/AppsFilters.tsx  |  2 +-
 .../agents/AgentsTable/AgentsTable.tsx          |  2 +-
 .../customFields/CustomFieldsTable.tsx          |  2 +-
 .../DepartmentsTable/DepartmentsTable.tsx       |  2 +-
 .../omnichannel/directory/calls/CallTable.tsx   |  2 +-
 .../omnichannel/directory/chats/ChatTable.tsx   |  2 +-
 .../directory/contacts/ContactTable.tsx         |  2 +-
 .../omnichannel/managers/ManagersTable.tsx      |  2 +-
 .../WebdavFilePickerModal.tsx                   |  2 +-
 25 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/apps/meteor/client/components/FilterByText.tsx b/apps/meteor/client/components/FilterByText.tsx
index 285c04164ce3..5c5a3d599e2f 100644
--- a/apps/meteor/client/components/FilterByText.tsx
+++ b/apps/meteor/client/components/FilterByText.tsx
@@ -1,13 +1,13 @@
 import { Box, Icon, TextInput, Margins } from '@rocket.chat/fuselage';
 import { useAutoFocus, useMergedRefs } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ChangeEvent, FormEvent, AllHTMLAttributes } from 'react';
-import React, { forwardRef, memo, useCallback, useEffect, useState } from 'react';
+import type { ChangeEvent, FormEvent, HTMLAttributes } from 'react';
+import React, { forwardRef, memo, useCallback, useState } from 'react';
 
 type FilterByTextProps = {
-	onChange: (filter: { text: string }) => void;
+	onChange: (filter: string) => void;
 	shouldAutoFocus?: boolean;
-} & Omit<AllHTMLAttributes<HTMLInputElement>, 'is' | 'onChange'>;
+} & Omit<HTMLAttributes<HTMLInputElement>, 'is' | 'onChange'>;
 
 const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function FilterByText(
 	{ placeholder, onChange: setFilter, shouldAutoFocus = false, children, ...props },
@@ -18,13 +18,10 @@ const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function Fi
 	const autoFocusRef = useAutoFocus(shouldAutoFocus);
 	const mergedRefs = useMergedRefs(ref, autoFocusRef);
 
-	const handleInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+	const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
 		setText(event.currentTarget.value);
-	}, []);
-
-	useEffect(() => {
-		setFilter({ text });
-	}, [setFilter, text]);
+		setFilter(event.currentTarget.value);
+	};
 
 	const handleFormSubmit = useCallback((event: FormEvent<HTMLFormElement>) => {
 		event.preventDefault();
diff --git a/apps/meteor/client/omnichannel/businessHours/BusinessHoursTable.tsx b/apps/meteor/client/omnichannel/businessHours/BusinessHoursTable.tsx
index 6fddd95859d8..b4220e420a9a 100644
--- a/apps/meteor/client/omnichannel/businessHours/BusinessHoursTable.tsx
+++ b/apps/meteor/client/omnichannel/businessHours/BusinessHoursTable.tsx
@@ -47,7 +47,7 @@ const BusinessHoursTable = () => {
 
 	return (
 		<>
-			<FilterByText onChange={({ text }) => setText(text)} />
+			<FilterByText onChange={setText} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/omnichannel/monitors/MonitorsTable.tsx b/apps/meteor/client/omnichannel/monitors/MonitorsTable.tsx
index a67057b9add1..62adc2a0405f 100644
--- a/apps/meteor/client/omnichannel/monitors/MonitorsTable.tsx
+++ b/apps/meteor/client/omnichannel/monitors/MonitorsTable.tsx
@@ -144,7 +144,7 @@ const MonitorsTable = () => {
 					</FieldRow>
 				</Field>
 			</Box>
-			{((isSuccess && data?.monitors.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setText(text)} />}
+			{((isSuccess && data?.monitors.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx b/apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx
index d550118a5017..01b4bfe90374 100644
--- a/apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx
+++ b/apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx
@@ -84,7 +84,7 @@ const SlaTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
 
 	return (
 		<>
-			{((isSuccess && data?.sla.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setFilter(text)} />}
+			{((isSuccess && data?.sla.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/omnichannel/tags/TagsTable.tsx b/apps/meteor/client/omnichannel/tags/TagsTable.tsx
index 3b9757134bed..a4b31cd4755c 100644
--- a/apps/meteor/client/omnichannel/tags/TagsTable.tsx
+++ b/apps/meteor/client/omnichannel/tags/TagsTable.tsx
@@ -70,7 +70,7 @@ const TagsTable = () => {
 
 	return (
 		<>
-			{((isSuccess && data?.tags.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setFilter(text)} />}
+			{((isSuccess && data?.tags.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/omnichannel/units/UnitsTable.tsx b/apps/meteor/client/omnichannel/units/UnitsTable.tsx
index fe95bc90d8a2..93734acb8de0 100644
--- a/apps/meteor/client/omnichannel/units/UnitsTable.tsx
+++ b/apps/meteor/client/omnichannel/units/UnitsTable.tsx
@@ -69,7 +69,7 @@ const UnitsTable = () => {
 
 	return (
 		<>
-			{((isSuccess && data?.units.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setFilter(text)} />}
+			{((isSuccess && data?.units.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
 			{isLoading && (
 				<GenericTable aria-busy>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx b/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx
index abfa438d9ced..2bd795c3ccab 100644
--- a/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx
+++ b/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx
@@ -66,7 +66,7 @@ const CustomEmoji = ({ onClick, reload }: CustomEmojiProps) => {
 
 	return (
 		<>
-			<FilterByText onChange={({ text }): void => setText(text)} />
+			<FilterByText onChange={setText} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx b/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx
index 58b1c4ea7b8a..5e8bd0c0fac9 100644
--- a/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx
+++ b/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx
@@ -64,7 +64,7 @@ const CustomSoundsTable = ({ reload, onClick }: CustomSoundsTableProps) => {
 
 	return (
 		<>
-			<FilterByText onChange={({ text }): void => setParams(text)} />
+			<FilterByText onChange={setParams} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusTable.tsx b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusTable.tsx
index 59c4cdd74eb3..d18fc4a706a8 100644
--- a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusTable.tsx
+++ b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusTable.tsx
@@ -70,7 +70,7 @@ const CustomUserStatus = ({ reload, onClick }: CustomUserStatusProps): ReactElem
 
 	return (
 		<>
-			<FilterByText onChange={({ text }): void => setText(text)} />
+			<FilterByText onChange={setText} />
 			{data.length === 0 && <GenericNoResult />}
 			{data && data.length > 0 && (
 				<>
diff --git a/apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminTable.tsx b/apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminTable.tsx
index 026f1cb0de30..ebd1e762ff80 100644
--- a/apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminTable.tsx
+++ b/apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminTable.tsx
@@ -76,7 +76,7 @@ const DeviceManagementAdminTable = ({ reloadRef }: { reloadRef: MutableRefObject
 
 	return (
 		<>
-			<FilterByText placeholder={t('Search_Devices_Users')} onChange={({ text }): void => setText(text)} />
+			<FilterByText placeholder={t('Search_Devices_Users')} onChange={setText} />
 			<DeviceManagementTable
 				data={data}
 				phase={phase}
diff --git a/apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx b/apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx
index e2942f384c9d..2fd828f1507c 100644
--- a/apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx
+++ b/apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx
@@ -96,7 +96,7 @@ const IntegrationsTable = ({ type }: { type?: string }) => {
 
 	return (
 		<>
-			<FilterByText placeholder={t('Search_Integrations')} onChange={({ text }): void => setText(text)} />
+			<FilterByText placeholder={t('Search_Integrations')} onChange={setText} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/views/admin/moderation/helpers/ModerationFilter.tsx b/apps/meteor/client/views/admin/moderation/helpers/ModerationFilter.tsx
index 4fde3568b2aa..5414e3d06aa5 100644
--- a/apps/meteor/client/views/admin/moderation/helpers/ModerationFilter.tsx
+++ b/apps/meteor/client/views/admin/moderation/helpers/ModerationFilter.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import FilterByText from '../../../../components/FilterByText';
 import DateRangePicker from './DateRangePicker';
@@ -12,10 +12,8 @@ type ModerationFilterProps = {
 const ModerationFilter = ({ setText, setDateRange }: ModerationFilterProps) => {
 	const t = useTranslation();
 
-	const handleChange = useCallback(({ text }): void => setText(text), [setText]);
-
 	return (
-		<FilterByText shouldAutoFocus placeholder={t('Search')} onChange={handleChange}>
+		<FilterByText shouldAutoFocus placeholder={t('Search')} onChange={setText}>
 			<DateRangePicker onChange={setDateRange} />
 		</FilterByText>
 	);
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx
index 28508ac94ac5..e3b919ae4a02 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx
@@ -20,7 +20,7 @@ const UsersTableFilters = ({ roleData, setUsersFilters }: UsersTableFiltersProps
 	const [text, setText] = useState('');
 
 	const handleSearchTextChange = useCallback(
-		({ text }) => {
+		(text) => {
 			setUsersFilters({ text, roles: selectedRoles });
 			setText(text);
 		},
diff --git a/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx b/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx
index 8ec510eed76d..cbd4671bc076 100644
--- a/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx
+++ b/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx
@@ -96,7 +96,7 @@ const ChannelsTable = () => {
 
 	return (
 		<>
-			<FilterByText placeholder={t('Search_Channels')} onChange={({ text }): void => setText(text)} />
+			<FilterByText placeholder={t('Search_Channels')} onChange={setText} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx b/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx
index f33b359e4b07..43e6e0e6cdf6 100644
--- a/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx
+++ b/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx
@@ -73,7 +73,7 @@ const TeamsTable = () => {
 
 	return (
 		<>
-			<FilterByText placeholder={t('Teams_Search_teams')} onChange={({ text }): void => setText(text)} />
+			<FilterByText placeholder={t('Teams_Search_teams')} onChange={setText} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTable.tsx b/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTable.tsx
index 5b69a59909ca..db01bdf59201 100644
--- a/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTable.tsx
+++ b/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTable.tsx
@@ -95,7 +95,7 @@ const UsersTable = ({ workspace = 'local' }): ReactElement => {
 
 	return (
 		<>
-			<FilterByText placeholder={t('Search_Users')} onChange={({ text }): void => setText(text)} />
+			<FilterByText placeholder={t('Search_Users')} onChange={setText} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx b/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx
index c411366c6b1f..a1f486395dbb 100644
--- a/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx
+++ b/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx
@@ -60,7 +60,7 @@ const AppsFilters = ({
 
 	return (
 		<Box pi={24} mbe={4}>
-			<FilterByText placeholder={appsSearchPlaceholders[context]} onChange={({ text }): void => setText(text)}>
+			<FilterByText placeholder={appsSearchPlaceholders[context]} onChange={setText}>
 				{!isPrivateAppsPage && (
 					<RadioDropDown group={freePaidFilterStructure} onSelected={freePaidFilterOnSelected} flexGrow={1} {...fixFiltersSize} />
 				)}
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx
index 5d0e89e1008a..13e1498d7422 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx
@@ -73,7 +73,7 @@ const AgentsTable = () => {
 	return (
 		<>
 			<AddAgent reload={refetch} />
-			{((isSuccess && data?.users.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setFilter(text)} />}
+			{((isSuccess && data?.users.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx b/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx
index d8609293c2c5..f8043a178857 100644
--- a/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx
+++ b/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx
@@ -75,7 +75,7 @@ const CustomFieldsTable = () => {
 
 	return (
 		<>
-			{((isSuccess && data?.customFields.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setFilter(text)} />}
+			{((isSuccess && data?.customFields.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx
index 7aee3f534d42..46ef80d5b0e3 100644
--- a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx
@@ -91,7 +91,7 @@ const DepartmentsTable = ({ archived }: { archived: boolean }) => {
 
 	return (
 		<>
-			{((isSuccess && data?.departments.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setText(text)} />}
+			{((isSuccess && data?.departments.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx b/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx
index 916a866b0431..2b529999fea1 100644
--- a/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx
@@ -95,7 +95,7 @@ const CallTable = () => {
 
 	return (
 		<>
-			{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setText(text)} />}
+			{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx
index e11a1c332066..c6d090c7547c 100644
--- a/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx
@@ -134,7 +134,7 @@ const ChatTable = () => {
 
 	return (
 		<>
-			{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setText(text)} />}
+			{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx b/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx
index 901bff74121d..09ec19e6a2fe 100644
--- a/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx
@@ -106,7 +106,7 @@ function ContactTable(): ReactElement {
 	return (
 		<>
 			{((isSuccess && data?.visitors.length > 0) || queryHasChanged) && (
-				<FilterByText onChange={({ text }) => setTerm(text)}>
+				<FilterByText onChange={setTerm}>
 					<Button onClick={onButtonNewClick} primary>
 						{t('New_contact')}
 					</Button>
diff --git a/apps/meteor/client/views/omnichannel/managers/ManagersTable.tsx b/apps/meteor/client/views/omnichannel/managers/ManagersTable.tsx
index afb2ae8f351b..a60d41c0c3aa 100644
--- a/apps/meteor/client/views/omnichannel/managers/ManagersTable.tsx
+++ b/apps/meteor/client/views/omnichannel/managers/ManagersTable.tsx
@@ -80,7 +80,7 @@ const ManagersTable = () => {
 	return (
 		<>
 			<AddManager reload={refetch} />
-			{((isSuccess && data?.users.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setText(text)} />}
+			{((isSuccess && data?.users.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
 			{isLoading && (
 				<GenericTable aria-busy>
 					<GenericTableHeader>{headers}</GenericTableHeader>
diff --git a/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerModal.tsx b/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerModal.tsx
index 4b75e496cefe..38895d4c211e 100644
--- a/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerModal.tsx
+++ b/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerModal.tsx
@@ -196,7 +196,7 @@ const WebdavFilePickerModal = ({ onUpload, onClose, account }: WebdavFilePickerM
 					</Box>
 				</Box>
 				<Box display='flex' flexDirection='column'>
-					<FilterByText onChange={({ text }): void => setFilterText(text)}>
+					<FilterByText onChange={setFilterText}>
 						{typeView === 'grid' && (
 							<Select value={sortBy} onChange={(value): void => handleSort(value as WebdavSortOptions)} options={options} />
 						)}