temp

apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx

@@ -1,13 +1,13 @@
 import { Palette } from '@rocket.chat/fuselage';
 import type { ScrollValues } from 'rc-scrollbars';
 import { Scrollbars } from 'rc-scrollbars';
-import type { MutableRefObject, CSSProperties, ReactNode } from 'react';
+import type { MutableRefObject, CSSProperties, ReactNode, HTMLAttributes } from 'react';
 import { memo, forwardRef, useCallback, useMemo } from 'react';
 
 export type CustomScrollbarsProps = {
 	overflowX?: boolean;
 	style?: CSSProperties;
-	children?: ReactNode;
+	children?: HTMLAttributes<HTMLElement>['children'];
 	onScroll?: (values: ScrollValues) => void;
 	renderView?: typeof Scrollbars.defaultProps.renderView;
 	renderTrackHorizontal?: typeof Scrollbars.defaultProps.renderTrackHorizontal;
@@ -26,7 +26,7 @@ const CustomScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function
 	const scrollbarsStyle = useMemo(() => ({ ...style, ...styleDefault }), [style]);
 
 	const refSetter = useCallback(
-		(scrollbarRef: Scrollbars) => {
+		(scrollbarRef: Scrollbars | null) => {
 			if (ref && scrollbarRef) {
 				if (typeof ref === 'function') {
 					ref(scrollbarRef.view ?? null);
@@ -52,7 +52,7 @@ const CustomScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function
 			renderThumbVertical={({ style, ...props }) => (
 				<div {...props} style={{ ...style, backgroundColor: Palette.stroke['stroke-dark'].toString(), borderRadius: '4px' }} />
 			)}
-			children={children}
+			children={children as ReactNode} // workaround for incompatible types between react-virtuoso and react-i18next
 			ref={refSetter}
 		/>
 	);

apps/meteor/client/components/CustomScrollbars/VirtuosoScrollbars.tsx

@@ -1,13 +1,13 @@
-import type { ComponentProps, Ref } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 import { forwardRef } from 'react';
 
 import CustomScrollbars from './CustomScrollbars';
 
-type VirtuosoScrollbarsProps = ComponentProps<typeof CustomScrollbars>;
+type VirtuosoScrollbarsProps = ComponentPropsWithoutRef<typeof CustomScrollbars>;
 
-const VirtuosoScrollbars = forwardRef(function VirtuosoScrollbars(
-	{ style, children, ...props }: VirtuosoScrollbarsProps,
-	ref: Ref<HTMLDivElement>,
+const VirtuosoScrollbars = forwardRef<HTMLDivElement, VirtuosoScrollbarsProps>(function VirtuosoScrollbars(
+	{ style, children, ...props },
+	ref,
 ) {
 	return (
 		<CustomScrollbars style={style} ref={ref} renderView={(viewProps) => <div {...viewProps} {...props} tabIndex={-1} />}>

apps/meteor/client/components/InfoPanel/InfoPanel.stories.tsx

@@ -20,12 +20,12 @@ export default {
 	component: InfoPanel,
 	subcomponents: {
 		InfoPanelAction: InfoPanelAction as ComponentType<any>,
-		InfoPanelActionGroup,
-		InfoPanelAvatar,
-		InfoPanelField,
-		InfoPanelLabel,
-		InfoPanelSection,
-		InfoPanelText,
+		InfoPanelActionGroup: InfoPanelActionGroup as ComponentType<any>,
+		InfoPanelAvatar: InfoPanelAvatar as ComponentType<any>,
+		InfoPanelField: InfoPanelField as ComponentType<any>,
+		InfoPanelLabel: InfoPanelLabel as ComponentType<any>,
+		InfoPanelSection: InfoPanelSection as ComponentType<any>,
+		InfoPanelText: InfoPanelText as ComponentType<any>,
 		InfoPanelTitle: InfoPanelTitle as ComponentType<any>,
 		RetentionPolicyCallout: RetentionPolicyCallout as ComponentType<any>,
 	},

apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx

@@ -80,7 +80,7 @@ const CloseChatModal = ({ department, visitorEmail, onCancel, onConfirm }: Close
 	};
 
 	const onSubmit = useCallback(
-		({ comment, tags, transcriptPDF, transcriptEmail, subject }: CloseChatModalFormData): void => {
+		({ comment, tags, transcriptPDF, transcriptEmail, subject }: CloseChatModalFormData) => {
 			const preferences = {
 				omnichannelTranscriptPDF: !!transcriptPDF,
 				omnichannelTranscriptEmail: alwaysSendTranscript ? true : !!transcriptEmail,

apps/meteor/client/components/Page/Page.stories.tsx

@@ -8,10 +8,10 @@ export default {
 	title: 'Components/Page',
 	component: Page,
 	subcomponents: {
-		PageContent,
+		PageContent: PageContent as ComponentType<any>,
 		PageHeader: PageHeader as ComponentType<any>,
-		PageScrollableContent,
-		PageScrollableContentWithShadow,
+		PageScrollableContent: PageScrollableContent as ComponentType<any>,
+		PageScrollableContentWithShadow: PageScrollableContentWithShadow as ComponentType<any>,
 	},
 	parameters: {
 		layout: 'fullscreen',

apps/meteor/client/components/SidebarToggler/SidebarTogglerBadge.tsx

@@ -15,7 +15,7 @@ const SidebarTogglerBadge = ({ children }: SidebarTogglerBadgeProps) => (
 			right: 3px;
 		`}
 	>
-		<Badge variant='danger' children={children} />
+		<Badge variant='danger'>{children}</Badge>
 	</Box>
 );
 

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

@@ -1,3 +1,4 @@
+import type { OptionType } from '@rocket.chat/fuselage';
 import { MultiSelectFiltered, Icon, Box, Chip } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
@@ -93,7 +94,7 @@ const UserAutoCompleteMultipleFederated = ({
 	);
 
 	return (
-		<OptionsContext.Provider value={{ options }}>
+		<OptionsContext.Provider value={{ options: options as unknown as OptionType[] }}>
 			<MultiSelectFiltered
 				{...props}
 				data-qa-type='user-auto-complete-input'

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

@@ -1,3 +1,4 @@
+import type { OptionType } from '@rocket.chat/fuselage';
 import { Options } from '@rocket.chat/fuselage';
 import type { ComponentProps, ReactElement, Ref } from 'react';
 import { forwardRef, createContext, useContext } from 'react';
@@ -9,7 +10,7 @@ import UserAutoCompleteMultipleOption from './UserAutoCompleteMultipleOption';
 // 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'];
+	options: OptionType[];
 };
 
 export const OptionsContext = createContext<OptionsContextValue>({

apps/meteor/client/hooks/useRoomIcon.tsx

@@ -7,7 +7,7 @@ import { ReactiveUserStatus } from '../components/UserStatus';
 
 export const useRoomIcon = (
 	room: Pick<IRoom, 't' | 'prid' | 'teamMain' | 'uids' | 'u'>,
-): ReactElement | ComponentProps<typeof Icon> | null => {
+): ComponentProps<typeof Icon> | ReactElement | null => {
 	if (isRoomFederated(room)) {
 		return { name: 'globe' };
 	}

apps/meteor/client/omnichannel/cannedResponses/CannedResponseEdit.tsx

@@ -56,6 +56,7 @@ const CannedResponseEdit = ({ cannedResponseData }: CannedResponseEditProps) =>
 			try {
 				await saveCannedResponse({
 					...data,
+					_id: cannedResponseData?._id ?? data._id,
 					...(departmentId && { departmentId }),
 				});
 				dispatchToastMessage({

apps/meteor/client/omnichannel/cannedResponses/components/CannedResponseForm.tsx

@@ -100,7 +100,11 @@ const CannedResponseForm = () => {
 				)}
 			</Field>
 			<Field>
-				<Controller name='tags' control={control} render={({ field: { value, onChange } }) => <Tags handler={onChange} tags={value} />} />
+				<Controller
+					name='tags'
+					control={control}
+					render={({ field: { value, onChange } }) => <Tags handler={onChange} tags={value as unknown as string[]} />} // FIXME: fix types
+				/>
 			</Field>
 			{(hasManagerPermission || hasMonitorPermission) && (
 				<>

apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx

@@ -27,7 +27,7 @@ type CannedResponseListProps = {
 	loading: boolean;
 	options: [string, string][];
 	text: string;
-	setText: FormEventHandler<HTMLOrSVGElement>;
+	setText: FormEventHandler<HTMLInputElement>;
 	type: string;
 	setType: Dispatch<SetStateAction<string>>;
 	isRoomOverMacLimit: boolean;

apps/meteor/client/omnichannel/cannedResponses/modals/CreateCannedResponse/CreateCannedResponseModal.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 import GenericModal from '../../../../components/GenericModal';
 import CannedResponseForm from '../../components/CannedResponseForm';
 
-type CreateCannedResponseModalFormData = {
+export type CreateCannedResponseModalFormData = {
 	_id: string;
 	shortcut: string;
 	text: string;
@@ -57,6 +57,7 @@ const CreateCannedResponseModal = ({ cannedResponseData, onClose, reloadCannedLi
 			try {
 				await saveCannedResponse({
 					...data,
+					_id: cannedResponseData?._id ?? data._id,
 					...(departmentId && { departmentId }),
 				});
 				dispatchToastMessage({

apps/meteor/client/sidebar/RoomList/useSidebarListNavigation.ts

@@ -33,27 +33,27 @@ export const useSidebarListNavigation = () => {
 					e.stopPropagation();
 
 					if (e.shiftKey) {
-						sidebarListFocusManager.focusPrevious({
+						sidebarListFocusManager?.focusPrevious({
 							accept: (node) => !isListItem(node) && !isListItemMenu(node),
 						});
 					} else if (isListItemMenu(e.target)) {
-						sidebarListFocusManager.focusNext({
+						sidebarListFocusManager?.focusNext({
 							accept: (node) => !isListItem(node) && !isListItemMenu(node),
 						});
 					} else {
-						sidebarListFocusManager.focusNext({
+						sidebarListFocusManager?.focusNext({
 							accept: (node) => !isListItem(node),
 						});
 					}
 				}
 
 				if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
 					if (e.key === 'ArrowUp') {
-						sidebarListFocusManager.focusPrevious({ accept: (node) => isListItem(node) });
+						sidebarListFocusManager?.focusPrevious({ accept: (node) => isListItem(node) });
 					}
 
 					if (e.key === 'ArrowDown') {
-						sidebarListFocusManager.focusNext({ accept: (node) => isListItem(node) });
+						sidebarListFocusManager?.focusNext({ accept: (node) => isListItem(node) });
 					}
 
 					lastItemFocused = document.activeElement as HTMLElement;

apps/meteor/client/sidebar/RoomMenu.tsx

@@ -219,7 +219,7 @@ const RoomMenu = ({
 			title={t('Options')}
 			mini
 			aria-keyshortcuts='alt'
-			options={menuOptions}
+			options={menuOptions as any} // FIXME
 			maxHeight={300}
 			renderItem={({ label: { label, icon }, ...props }): JSX.Element => <Option label={label} icon={icon} {...props} />}
 		/>

apps/meteor/client/sidebarv2/RoomList/useSidebarListNavigation.ts

@@ -34,15 +34,15 @@ export const useSidebarListNavigation = () => {
 					e.stopPropagation();
 
 					if (e.shiftKey) {
-						sidebarListFocusManager.focusPrevious({
+						sidebarListFocusManager?.focusPrevious({
 							accept: (node) => !isListItem(node) && !isListItemMenu(node) && !isCollapseGroup(node),
 						});
 					} else if (isListItemMenu(e.target)) {
-						sidebarListFocusManager.focusNext({
+						sidebarListFocusManager?.focusNext({
 							accept: (node) => !isListItem(node) && !isListItemMenu(node) && !isCollapseGroup(node),
 						});
 					} else {
-						sidebarListFocusManager.focusNext({
+						sidebarListFocusManager?.focusNext({
 							accept: (node) => !isListItem(node) && !isCollapseGroup(node),
 						});
 					}
@@ -53,11 +53,11 @@ export const useSidebarListNavigation = () => {
 					e.stopPropagation();
 
 					if (e.key === 'ArrowUp') {
-						sidebarListFocusManager.focusPrevious({ accept: (node) => isListItem(node) || isCollapseGroup(node) });
+						sidebarListFocusManager?.focusPrevious({ accept: (node) => isListItem(node) || isCollapseGroup(node) });
 					}
 
 					if (e.key === 'ArrowDown') {
-						sidebarListFocusManager.focusNext({ accept: (node) => isListItem(node) || isCollapseGroup(node) });
+						sidebarListFocusManager?.focusNext({ accept: (node) => isListItem(node) || isCollapseGroup(node) });
 					}
 
 					lastItemFocused = document.activeElement as HTMLElement;

apps/meteor/client/sidebarv2/RoomMenu.tsx

@@ -215,9 +215,9 @@ const RoomMenu = ({
 			title={t('Options')}
 			mini
 			aria-keyshortcuts='alt'
-			options={menuOptions}
+			options={menuOptions as any} // FIXME
 			maxHeight={300}
-			renderItem={({ label: { label, icon }, ...props }): JSX.Element => <Option label={label} icon={icon} {...props} />}
+			renderItem={({ label: { label, icon }, ...props }) => <Option label={label} icon={icon} {...props} />}
 		/>
 	);
 };

apps/meteor/client/sidebarv2/header/SearchSection.tsx

@@ -95,7 +95,7 @@ const SearchSection = () => {
 			'Shift+$mod+K': (event) => {
 				event.preventDefault();
 				setRecentButtonPressed(true);
-				focusManager.focusNext({ accept: (node) => isRecentButton(node) });
+				focusManager?.focusNext({ accept: (node) => isRecentButton(node) });
 			},
 			'Escape': (event) => {
 				event.preventDefault();

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

@@ -1,5 +1,5 @@
 import { Field, FieldLabel, FieldRow, InputBox, Select } from '@rocket.chat/fuselage';
-import type { FormEventHandler, ReactElement } from 'react';
+import type { FormEventHandler, Key, ReactElement } from 'react';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -62,7 +62,7 @@ function TimespanSettingInput({
 		setInternalValue(newValue);
 	};
 
-	const handleChangeTimeUnit = (nextTimeUnit: string | number) => {
+	const handleChangeTimeUnit = (nextTimeUnit: Key) => {
 		if (typeof nextTimeUnit !== 'string') {
 			return;
 		}
@@ -72,7 +72,7 @@ function TimespanSettingInput({
 
 	const timeUnitOptions = useMemo(() => {
 		return Object.entries(TIMEUNIT).map<readonly [TIMEUNIT, string]>(([label, value]) => [value, i18n.exists(label) ? t(label) : label]); // todo translate
-	}, [t]);
+	}, [i18n, t]);
 
 	const handleResetButtonClick = () => {
 		onResetButtonClick?.();

apps/meteor/client/views/composer/EmojiPicker/ToneSelector/ToneSelectorWrapper.tsx

@@ -1,7 +1,11 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { AllHTMLAttributes } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 
-const ToneSelectorWrapper = ({ caption, children, ...props }: { caption: string } & Omit<AllHTMLAttributes<HTMLDivElement>, 'is'>) => {
+type ToneSelectorWrapperProps = {
+	caption: string;
+} & Omit<ComponentPropsWithoutRef<typeof Box>, 'caption'>;
+
+const ToneSelectorWrapper = ({ caption, children, ...props }: ToneSelectorWrapperProps) => {
 	return (
 		<Box {...props} display='flex' alignItems='center'>
 			<Box fontScale='c2'>{caption}</Box>

apps/meteor/client/views/directory/RoomTags.tsx

@@ -1,9 +1,12 @@
 import type { IRoom, Serialized } from '@rocket.chat/core-typings';
 import { Box, Margins, Tag } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const RoomTags = ({ room }: { room: Serialized<IRoom> }): ReactElement => {
+type RoomTagsProps = {
+	room: Serialized<IRoom>;
+};
+
+const RoomTags = ({ room }: RoomTagsProps) => {
 	const { t } = useTranslation();
 
 	return (

apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTable.tsx

@@ -88,10 +88,7 @@ const UsersTable = ({ workspace = 'local' }): ReactElement => {
 
 	const handleClick = useCallback(
 		(username: IUser['username']) => (e: KeyboardEvent | MouseEvent) => {
-			if (!username) {
-				return;
-			}
-
+			if (!username) return;
 			if (e.type === 'click' || (e as KeyboardEvent).key === 'Enter') {
 				directRoute.push({ rid: username });
 			}

apps/meteor/client/views/modal/uikit/ModalBlock.tsx

@@ -82,12 +82,15 @@ const ModalBlock = ({ view, errors, onSubmit, onClose, onCancel }: ModalBlockPar
 		[previousFocus],
 	);
 
+	const formRef = useRef<HTMLFormElement>(null);
+
 	const handleKeyDown = useCallback(
 		(event: KeyboardEvent) => {
 			switch (event.keyCode) {
 				case KeyboardCode.get('ENTER'):
 					if ((event?.target as Node | null)?.nodeName !== 'TEXTAREA') {
-						return onSubmit(event as any); // FIXME
+						formRef.current?.submit();
+						return;
 					}
 					return;
 				case KeyboardCode.get('ESC'):
@@ -123,7 +126,7 @@ const ModalBlock = ({ view, errors, onSubmit, onClose, onCancel }: ModalBlockPar
 					}
 			}
 		},
-		[onClose, onSubmit],
+		[onClose],
 	);
 
 	useEffect(() => {
@@ -139,7 +142,7 @@ const ModalBlock = ({ view, errors, onSubmit, onClose, onCancel }: ModalBlockPar
 			return false;
 		};
 
-		const ignoreIfNotContains = (e: Event) => {
+		const ignoreIfNotContains = (e: KeyboardEvent) => {
 			if (e.target !== element) {
 				return;
 			}
@@ -168,7 +171,7 @@ const ModalBlock = ({ view, errors, onSubmit, onClose, onCancel }: ModalBlockPar
 						<Modal.Close tabIndex={-1} onClick={onClose} />
 					</Modal.Header>
 					<Modal.Content>
-						<Box is='form' method='post' action='#' onSubmit={onSubmit}>
+						<Box ref={formRef} is='form' method='post' action='#' onSubmit={onSubmit}>
 							<UiKitComponent render={UiKitModal} blocks={view.blocks} />
 						</Box>
 					</Modal.Content>