refactor: update event types from FormEvent to ChangeEvent in various components

apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx

@@ -20,7 +20,7 @@ import {
 } from '@rocket.chat/fuselage';
 import { useEffectEvent, useLocalStorage } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useSetting, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
-import type { ChangeEvent, ComponentProps, FormEvent } from 'react';
+import type { ChangeEvent, ComponentProps } from 'react';
 import { useState, useCallback, useId } from 'react';
 
 import UserStatusMenu from '../../../components/UserStatusMenu';
@@ -76,7 +76,7 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa
 			wrapperFunction={(props: ComponentProps<typeof Box>) => (
 				<Box
 					is='form'
-					onSubmit={(e: FormEvent) => {
+					onSubmit={(e) => {
 						e.preventDefault();
 						handleSaveStatus();
 					}}

apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx

@@ -18,7 +18,7 @@ import {
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useSetModal, useTranslation, useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useState } from 'react';
 
 import MatrixFederationRemoveServerList from './MatrixFederationRemoveServerList';
@@ -90,7 +90,7 @@ const MatrixFederationAddServerModal = ({ onClickClose }: MatrixFederationAddSer
 						<TextInput
 							disabled={isPending}
 							value={serverName}
-							onChange={(e: FormEvent<HTMLInputElement>) => {
+							onChange={(e: ChangeEvent<HTMLInputElement>) => {
 								setServerName(e.currentTarget.value);
 								if (errorKey) {
 									setErrorKey(undefined);

apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx

@@ -2,7 +2,7 @@ import type { SelectOption } from '@rocket.chat/fuselage';
 import { Box, Select, TextInput } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { useSetModal } from '@rocket.chat/ui-contexts';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useCallback, useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -53,7 +53,7 @@ const MatrixFederationSearchModalContent = ({ defaultSelectedServer, servers }:
 					flexGrow={4}
 					flexShrink={0}
 					value={roomName}
-					onChange={(e: FormEvent<HTMLInputElement>) => setRoomName(e.currentTarget.value)}
+					onChange={(e: ChangeEvent<HTMLInputElement>) => setRoomName(e.currentTarget.value)}
 				/>
 			</Box>
 			<Box is='a' display='flex' flexDirection='row' mbe={16} onClick={manageServers}>

apps/meteor/client/views/account/security/TwoFactorEmail.tsx

@@ -1,6 +1,6 @@
 import { Box, Field, FieldLabel, FieldRow, Margins, ToggleSwitch } from '@rocket.chat/fuselage';
 import { useToastMessageDispatch, useUser } from '@rocket.chat/ui-contexts';
-import type { ComponentProps, FormEvent } from 'react';
+import type { ComponentProps, ChangeEvent } from 'react';
 import { useCallback, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -27,7 +27,7 @@ const TwoFactorEmail = (props: ComponentProps<typeof Box>) => {
 	});
 
 	const handleEnable = useCallback(
-		async (e: FormEvent<HTMLInputElement>) => {
+		async (e: ChangeEvent<HTMLInputElement>) => {
 			if (e.currentTarget.checked) {
 				await enable2faAction();
 			} else {

apps/meteor/client/views/account/security/TwoFactorTOTP.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, TextInput, Margins, Field, FieldRow, FieldLabel, ToggleSwitch } from '@rocket.chat/fuselage';
 import { useEffectEvent, useSafely } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useUser, useMethod } from '@rocket.chat/ui-contexts';
-import type { ComponentPropsWithoutRef, FormEvent } from 'react';
+import type { ComponentPropsWithoutRef, ChangeEvent } from 'react';
 import { useState, useCallback, useEffect, useId } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -92,7 +92,7 @@ const TwoFactorTOTP = (props: TwoFactorTOTPProps) => {
 		setModal(<TwoFactorTotpModal onConfirm={onDisable} onClose={closeModal} />);
 	});
 
-	const handleToggleTotp = useEffectEvent(async (e: FormEvent<HTMLInputElement>) => {
+	const handleToggleTotp = useEffectEvent(async (e: ChangeEvent<HTMLInputElement>) => {
 		if (e.currentTarget?.checked) {
 			void enableTotp();
 		} else {

apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx

@@ -2,7 +2,7 @@ import { Field, FieldLabel, FieldRow, TextInput, Box, Margins, Button, ButtonGro
 import { ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, type UploadResult } from '@rocket.chat/ui-contexts';
 import fileSize from 'filesize';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -86,7 +86,7 @@ const AddCustomSound = ({ goToNew, close, onChange, ...props }: AddCustomSoundPr
 					<FieldRow>
 						<TextInput
 							value={name}
-							onChange={(e: FormEvent<HTMLInputElement>): void => setName(e.currentTarget.value)}
+							onChange={(e: ChangeEvent<HTMLInputElement>): void => setName(e.currentTarget.value)}
 							placeholder={t('Name')}
 						/>
 					</FieldRow>

apps/meteor/client/views/admin/customSounds/EditSound.tsx

@@ -2,7 +2,7 @@ import { Box, Button, ButtonGroup, Margins, TextInput, Field, FieldLabel, FieldR
 import { GenericModal, ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
 import { useSetModal, useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
 import fileSize from 'filesize';
-import type { SyntheticEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useCallback, useState, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -117,7 +117,7 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps) {
 					<FieldRow>
 						<TextInput
 							value={name}
-							onChange={(e: SyntheticEvent<HTMLInputElement>): void => setName(e.currentTarget.value)}
+							onChange={(e: ChangeEvent<HTMLInputElement>): void => setName(e.currentTarget.value)}
 							placeholder={t('Name')}
 						/>
 					</FieldRow>

apps/meteor/client/views/admin/import/NewImportPage.tsx

@@ -19,7 +19,7 @@ import { Page, PageHeader, PageScrollableContentWithShadow } from '@rocket.chat/
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useToastMessageDispatch, useRouter, useRouteParameter, useSetting, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
-import type { ChangeEvent, DragEvent, FormEvent, Key, SyntheticEvent } from 'react';
+import type { ChangeEvent, DragEvent, Key, SyntheticEvent } from 'react';
 import { useState, useMemo, useEffect, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -146,7 +146,7 @@ function NewImportPage() {
 
 	const [fileUrl, setFileUrl] = useSafely(useState(''));
 
-	const handleFileUrlChange = (event: FormEvent<HTMLInputElement>) => {
+	const handleFileUrlChange = (event: ChangeEvent<HTMLInputElement>) => {
 		setFileUrl(event.currentTarget.value);
 	};
 
@@ -170,7 +170,7 @@ function NewImportPage() {
 
 	const [filePath, setFilePath] = useSafely(useState(''));
 
-	const handleFilePathChange = (event: FormEvent<HTMLInputElement>) => {
+	const handleFilePathChange = (event: ChangeEvent<HTMLInputElement>) => {
 		setFilePath(event.currentTarget.value);
 	};
 

apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx

@@ -1,6 +1,6 @@
 import { TextInput } from '@rocket.chat/fuselage';
 import { useEffectEvent, useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -13,7 +13,7 @@ const PermissionsTableFilter = ({ onChange }: { onChange: (debouncedFilter: stri
 		onChange(debouncedFilter);
 	}, [debouncedFilter, onChange]);
 
-	const handleFilter = useEffectEvent(({ currentTarget: { value } }: FormEvent<HTMLInputElement>) => {
+	const handleFilter = useEffectEvent(({ currentTarget: { value } }: ChangeEvent<HTMLInputElement>) => {
 		setFilter(value);
 	});
 

apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx

@@ -1,5 +1,5 @@
 import { Box, Field, FieldHint, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage';
-import type { SyntheticEvent } from 'react';
+import type { ChangeEvent } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -18,7 +18,7 @@ function BooleanSettingInput({
 	onChangeValue,
 	onResetButtonClick,
 }: BooleanSettingInputProps) {
-	const handleChange = (event: SyntheticEvent<HTMLInputElement>): void => {
+	const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
 		const value = event.currentTarget.checked;
 		onChangeValue?.(value);
 	};

apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.tsx

@@ -1,5 +1,5 @@
 import { Field, FieldHint, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
-import type { FormEventHandler } from 'react';
+import type { ChangeEventHandler } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -22,7 +22,7 @@ function FontSettingInput({
 	onChangeValue,
 	onResetButtonClick,
 }: FontSettingInputProps) {
-	const handleChange: FormEventHandler<HTMLInputElement> = (event): void => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event): void => {
 		onChangeValue?.(event.currentTarget.value);
 	};
 

apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.tsx

@@ -1,5 +1,5 @@
 import { Field, FieldHint, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
-import type { FormEventHandler } from 'react';
+import type { ChangeEventHandler } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -22,7 +22,7 @@ function GenericSettingInput({
 	onChangeValue,
 	onResetButtonClick,
 }: GenericSettingInputProps) {
-	const handleChange: FormEventHandler<HTMLInputElement> = (event): void => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event): void => {
 		onChangeValue?.(event.currentTarget.value);
 	};
 

apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.tsx

@@ -1,5 +1,5 @@
 import { Field, FieldHint, FieldLabel, FieldRow, InputBox } from '@rocket.chat/fuselage';
-import type { FormEventHandler } from 'react';
+import type { ChangeEventHandler } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -22,7 +22,7 @@ function IntSettingInput({
 	hasResetButton,
 	onResetButtonClick,
 }: IntSettingInputProps) {
-	const handleChange: FormEventHandler<HTMLInputElement> = (event) => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
 		onChangeValue?.(parseInt(event.currentTarget.value, 10));
 	};
 

apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.tsx

@@ -1,5 +1,5 @@
 import { Field, FieldHint, FieldLabel, FieldRow, PasswordInput } from '@rocket.chat/fuselage';
-import type { EventHandler, SyntheticEvent } from 'react';
+import type { ChangeEventHandler } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -20,7 +20,7 @@ function PasswordSettingInput({
 	onChangeValue,
 	onResetButtonClick,
 }: PasswordSettingInputProps) {
-	const handleChange: EventHandler<SyntheticEvent<HTMLInputElement>> = (event) => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
 		onChangeValue?.(event.currentTarget.value);
 	};
 

apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.tsx

@@ -1,6 +1,6 @@
 import { Field, FieldHint, FieldLabel, FieldRow, UrlInput } from '@rocket.chat/fuselage';
 import { useAbsoluteUrl } from '@rocket.chat/ui-contexts';
-import type { EventHandler, SyntheticEvent } from 'react';
+import type { ChangeEventHandler } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -23,7 +23,7 @@ function RelativeUrlSettingInput({
 }: RelativeUrlSettingInputProps) {
 	const getAbsoluteUrl = useAbsoluteUrl();
 
-	const handleChange: EventHandler<SyntheticEvent<HTMLInputElement>> = (event) => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
 		onChangeValue?.(event.currentTarget.value);
 	};
 

apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.tsx

@@ -1,5 +1,5 @@
 import { Field, FieldHint, FieldLabel, FieldRow, TextAreaInput, TextInput } from '@rocket.chat/fuselage';
-import type { EventHandler, SyntheticEvent } from 'react';
+import type { ChangeEventHandler } from 'react';
 
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
@@ -27,7 +27,7 @@ function StringSettingInput({
 	onChangeValue,
 	onResetButtonClick,
 }: StringSettingInputProps) {
-	const handleChange: EventHandler<SyntheticEvent<HTMLInputElement>> = (event) => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
 		onChangeValue?.(event.currentTarget.value);
 	};
 

apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx

@@ -1,5 +1,5 @@
 import { Field, FieldHint, FieldLabel, FieldRow, InputBox, Select } from '@rocket.chat/fuselage';
-import type { FormEventHandler, Key } from 'react';
+import type { ChangeEventHandler, Key } from 'react';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -55,7 +55,7 @@ function TimespanSettingInput({
 	const [timeUnit, setTimeUnit] = useState<TIMEUNIT>(getHighestTimeUnit(Number(value)));
 	const [internalValue, setInternalValue] = useState<number>(msToTimeUnit(timeUnit, Number(value)));
 
-	const handleChange: FormEventHandler<HTMLInputElement> = (event) => {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
 		const newValue = sanitizeInputValue(Number(event.currentTarget.value));
 
 		onChangeValue?.(timeUnitToMs(timeUnit, newValue));

apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.tsx

@@ -4,7 +4,7 @@ import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@rocket.chat/ui-client';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useToastMessageDispatch, useSettingsDispatch, useSettings } from '@rocket.chat/ui-contexts';
-import type { ReactNode, FormEvent, MouseEvent } from 'react';
+import type { ReactNode, MouseEvent, FormEvent } from 'react';
 import { useMemo, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 

apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx

@@ -3,7 +3,7 @@ import { Button, Box, TextInput, Field, FieldLabel, FieldRow } from '@rocket.cha
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { GenericModal } from '@rocket.chat/ui-client';
 import { useSetModal, useToastMessageDispatch, useSetting, useEndpoint } from '@rocket.chat/ui-contexts';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -53,7 +53,7 @@ function LDAPGroupPage({ _id, i18nLabel, onClickBack, ...group }: LDAPGroupPageP
 		try {
 			await testConnection();
 			let username = '';
-			const handleChangeUsername = (event: FormEvent<HTMLInputElement>): void => {
+			const handleChangeUsername = (event: ChangeEvent<HTMLInputElement>): void => {
 				username = event.currentTarget.value;
 			};
 
@@ -71,7 +71,7 @@ function LDAPGroupPage({ _id, i18nLabel, onClickBack, ...group }: LDAPGroupPageP
 					wrapperFunction={(props) => (
 						<Box
 							is='form'
-							onSubmit={(e: FormEvent) => {
+							onSubmit={(e) => {
 								e.preventDefault();
 								confirmSearch();
 							}}

apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx

@@ -3,7 +3,7 @@ import { Box, Icon, Margins, TextInput } from '@rocket.chat/fuselage';
 import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import type { OptionProp } from '@rocket.chat/ui-client';
 import { MultiSelectCustom } from '@rocket.chat/ui-client';
-import type { Dispatch, FormEvent, SetStateAction } from 'react';
+import type { ChangeEvent, Dispatch, SetStateAction } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -21,7 +21,7 @@ const UsersTableFilters = ({ roleData, setUsersFilters }: UsersTableFiltersProps
 	const [text, setText] = useState('');
 
 	const handleSearchTextChange = useCallback(
-		(event: FormEvent<HTMLInputElement>) => {
+		(event: ChangeEvent<HTMLInputElement>) => {
 			setText(event.currentTarget.value);
 			setUsersFilters({ text: event.currentTarget.value, roles: selectedRoles });
 		},
@@ -66,7 +66,7 @@ const UsersTableFilters = ({ roleData, setUsersFilters }: UsersTableFiltersProps
 		<Box
 			mb={16}
 			is='form'
-			onSubmit={(event: FormEvent<HTMLFormElement>) => {
+			onSubmit={(event) => {
 				event.preventDefault();
 			}}
 			display='flex'

apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx

@@ -2,7 +2,7 @@ import { Box, InputBox, Margins } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { GenericMenu } from '@rocket.chat/ui-client';
 import { startOfDay, endOfDay, startOfWeek, endOfWeek, startOfMonth, endOfMonth, subDays, subWeeks, subMonths, parseISO } from 'date-fns';
-import type { ComponentProps, SetStateAction, FormEvent } from 'react';
+import type { ComponentProps, SetStateAction, ChangeEvent } from 'react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -130,11 +130,11 @@ const DateRangePicker = ({ value, onChange, ...props }: DateRangePickerProps) =>
 		onChange?.(newRange);
 	});
 
-	const handleChangeStart = useEffectEvent(({ currentTarget }: FormEvent<HTMLInputElement>) => {
+	const handleChangeStart = useEffectEvent(({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
 		dispatch({ newStart: currentTarget.value });
 	});
 
-	const handleChangeEnd = useEffectEvent(({ currentTarget }: FormEvent<HTMLInputElement>) => {
+	const handleChangeEnd = useEffectEvent(({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
 		dispatch({ newEnd: currentTarget.value });
 	});