From 19009674bd5c01b64f6d022ceefb042c69cb3be6 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 2 Jun 2026 20:33:45 -0300
Subject: [PATCH] refactor(ui-composer): remove unnecessary ReactElement type
 annotations across components

---
 packages/ui-composer/src/MessageComposer/MessageComposer.tsx | 4 ++--
 .../src/MessageComposer/MessageComposerAction.tsx            | 4 ++--
 .../src/MessageComposer/MessageComposerActionsDivider.tsx    | 4 ++--
 .../src/MessageComposer/MessageComposerButton.tsx            | 4 ++--
 .../MessageComposerFile/MessageComposerFile.tsx              | 5 +++--
 .../MessageComposerFile/MessageComposerFileError.tsx         | 4 ++--
 .../ui-composer/src/MessageComposer/MessageComposerHint.tsx  | 4 ++--
 .../ui-composer/src/MessageComposer/MessageComposerIcon.tsx  | 4 ++--
 .../src/MessageComposer/MessageComposerSkeleton.tsx          | 3 +--
 .../src/MessageComposer/MessageComposerToolbar.tsx           | 4 ++--
 .../src/MessageComposer/MessageComposerToolbarActions.tsx    | 4 ++--
 .../src/MessageComposer/MessageComposerToolbarSubmit.tsx     | 4 ++--
 .../src/MessageFooterCallout/MessageFooterCallout.tsx        | 4 ++--
 .../src/MessageFooterCallout/MessageFooterCalloutDivider.tsx | 3 +--
 14 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/packages/ui-composer/src/MessageComposer/MessageComposer.tsx b/packages/ui-composer/src/MessageComposer/MessageComposer.tsx
index d7cce444d7bb0..a30cb639e9c24 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposer.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposer.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ElementType, HTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
 
 type MessageComposerProps = Omit<HTMLAttributes<HTMLElement>, 'is'> & {
@@ -8,7 +8,7 @@ type MessageComposerProps = Omit<HTMLAttributes<HTMLElement>, 'is'> & {
 	variant?: 'default' | 'error' | 'editing';
 };
 
-const MessageComposer = forwardRef<HTMLElement, MessageComposerProps>(function MessageComposer({ variant, ...props }, ref): ReactElement {
+const MessageComposer = forwardRef<HTMLElement, MessageComposerProps>(function MessageComposer({ variant, ...props }, ref) {
 	return (
 		<Box
 			rcx-input-box__wrapper
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerAction.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerAction.tsx
index 5233f78499c74..f439732fe88df 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerAction.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerAction.tsx
@@ -1,6 +1,6 @@
 import { IconButton } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 
-const MessageComposerAction = (props: ComponentProps<typeof IconButton>): ReactElement => <IconButton small {...props} />;
+const MessageComposerAction = (props: ComponentProps<typeof IconButton>) => <IconButton small {...props} />;
 
 export default MessageComposerAction;
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerActionsDivider.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerActionsDivider.tsx
index d7c7698e72c8e..2f21ccbab7136 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerActionsDivider.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerActionsDivider.tsx
@@ -1,7 +1,7 @@
 import { Divider } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 
-const MessageComposerActionsDivider = ({ height = 'x20', ...props }: ComponentProps<typeof Divider>): ReactElement => (
+const MessageComposerActionsDivider = ({ height = 'x20', ...props }: ComponentProps<typeof Divider>) => (
 	<Divider vertical mi={4} borderColor='light' mb={0} backgroundColor='selected' height={height} {...props} />
 );
 
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerButton.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerButton.tsx
index 51316bff7b08e..fdf70a5adbf5c 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerButton.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerButton.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 
-const MessageComposerButton = (props: ComponentProps<typeof Button>): ReactElement => <Button small {...props} />;
+const MessageComposerButton = (props: ComponentProps<typeof Button>) => <Button small {...props} />;
 
 export default MessageComposerButton;
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFile.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFile.tsx
index 4314de88cc165..51d82fdad5a27 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFile.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFile.tsx
@@ -2,7 +2,8 @@ import { css } from '@rocket.chat/css-in-js';
 import { Avatar, Box, Palette, Skeleton } from '@rocket.chat/fuselage';
 import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
 import { FilePreviewIcon } from '@rocket.chat/ui-client';
-import { useMemo, type KeyboardEvent, type MouseEvent, type AllHTMLAttributes, type ReactElement } from 'react';
+import type { ReactNode, KeyboardEvent, MouseEvent, AllHTMLAttributes } from 'react';
+import { useMemo } from 'react';
 
 type MessageComposerFileProps = {
 	fileTitle: string;
@@ -11,7 +12,7 @@ type MessageComposerFileProps = {
 	showPreview?: boolean;
 	previewUrl?: string;
 	alt?: string;
-	actionIcon: ReactElement;
+	actionIcon: ReactNode;
 	error?: boolean;
 	disabled?: boolean;
 	onClick: () => void;
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFileError.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFileError.tsx
index de40b587cab38..aea4a6966914e 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFileError.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFileError.tsx
@@ -1,4 +1,4 @@
-import type { AllHTMLAttributes, ReactElement } from 'react';
+import type { AllHTMLAttributes, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import MessageComposerFile from './MessageComposerFile';
@@ -7,7 +7,7 @@ type MessageComposerFileErrorProps = {
 	fileTitle: string;
 	fileFormat: string;
 	error: Error;
-	actionIcon: ReactElement;
+	actionIcon: ReactNode;
 	onClick: () => void;
 } & AllHTMLAttributes<HTMLButtonElement>;
 
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerHint.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerHint.tsx
index 61f4abba70662..1489d3fed459a 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerHint.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerHint.tsx
@@ -1,6 +1,6 @@
 import type { IconProps } from '@rocket.chat/fuselage';
 import { Box, Icon, Tag } from '@rocket.chat/fuselage';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 type MessageComposerHintProps = {
 	children: string;
@@ -8,7 +8,7 @@ type MessageComposerHintProps = {
 	helperText?: ReactNode;
 };
 
-const MessageComposerHint = ({ icon, children, helperText }: MessageComposerHintProps): ReactElement => (
+const MessageComposerHint = ({ icon, children, helperText }: MessageComposerHintProps) => (
 	<Box pbs={0} pbe={4} display='flex' flexDirection='row' justifyContent='space-between' alignItems='center'>
 		<Tag icon={icon ? <Icon mie={4} name={icon} size='x12' /> : undefined}>{children}</Tag>
 		{helperText && (
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerIcon.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerIcon.tsx
index fa0ae9f38aae0..5be730c9adf88 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerIcon.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerIcon.tsx
@@ -1,8 +1,8 @@
 import { Icon } from '@rocket.chat/fuselage';
 import type { Keys } from '@rocket.chat/icons';
-import type { HTMLAttributes, ReactElement } from 'react';
+import type { HTMLAttributes } from 'react';
 
-const MessageComposerIcon = ({ name, ...props }: { name: Keys } & Omit<HTMLAttributes<HTMLElement>, 'is'>): ReactElement => (
+const MessageComposerIcon = ({ name, ...props }: { name: Keys } & Omit<HTMLAttributes<HTMLElement>, 'is'>) => (
 	<Icon name={name} size='x20' mie={4} {...props} />
 );
 
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerSkeleton.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerSkeleton.tsx
index d222d09199be8..43682004cfa0b 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerSkeleton.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerSkeleton.tsx
@@ -1,9 +1,8 @@
 import { Skeleton, Box } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
 
 import { MessageComposer, MessageComposerToolbar } from '.';
 
-const MessageComposerSkeleton = (): ReactElement => (
+const MessageComposerSkeleton = () => (
 	<MessageComposer>
 		<Box width='100%' display='flex' alignItems='center' height='x52' pi={12}>
 			<Skeleton width='100%' height={36} />
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerToolbar.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerToolbar.tsx
index a4e22e4c426a7..b558f29b452c3 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerToolbar.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerToolbar.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 
-const MessageComposerToolbar = (props: ComponentProps<typeof Box>): ReactElement => (
+const MessageComposerToolbar = (props: ComponentProps<typeof Box>) => (
 	<Box backgroundColor='surface-neutral' p={4} display='flex' justifyContent='space-between' w='full' {...props} />
 );
 
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerToolbarActions.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerToolbarActions.tsx
index bc462178c7f0b..ff7360e5bc556 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerToolbarActions.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerToolbarActions.tsx
@@ -1,8 +1,8 @@
 import { useToolbar } from '@react-aria/toolbar';
 import { ButtonGroup } from '@rocket.chat/fuselage';
-import { useRef, type ComponentProps, type ReactElement } from 'react';
+import { useRef, type ComponentProps } from 'react';
 
-const MessageComposerToolbarActions = (props: ComponentProps<typeof ButtonGroup>): ReactElement => {
+const MessageComposerToolbarActions = (props: ComponentProps<typeof ButtonGroup>) => {
 	const ref = useRef(null);
 	const { toolbarProps } = useToolbar(props, ref);
 
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerToolbarSubmit.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerToolbarSubmit.tsx
index 4ae5f91721968..79c5a3d62c5d1 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerToolbarSubmit.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerToolbarSubmit.tsx
@@ -1,6 +1,6 @@
 import { ButtonGroup } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 
-const MessageComposerToolbarSubmit = (props: ComponentProps<typeof ButtonGroup>): ReactElement => <ButtonGroup small {...props} />;
+const MessageComposerToolbarSubmit = (props: ComponentProps<typeof ButtonGroup>) => <ButtonGroup small {...props} />;
 
 export default MessageComposerToolbarSubmit;
diff --git a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.tsx b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.tsx
index 63d1e9adc590d..24a339745bafa 100644
--- a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.tsx
+++ b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ElementType, HTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
 
 const MessageFooterCallout = forwardRef<
@@ -10,7 +10,7 @@ const MessageFooterCallout = forwardRef<
 		variant?: 'default' | 'error';
 		dashed?: boolean;
 	}
->(function MessageFooterCallout({ dashed, ...props }, ref): ReactElement {
+>(function MessageFooterCallout({ dashed, ...props }, ref) {
 	return (
 		<Box
 			ref={ref}
diff --git a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutDivider.tsx b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutDivider.tsx
index cff6b7fd92b3f..daa1a00178192 100644
--- a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutDivider.tsx
+++ b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutDivider.tsx
@@ -1,8 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
 import { forwardRef } from 'react';
 
-const MessageFooterCalloutDivider = forwardRef<HTMLButtonElement>(function MessageFooterCalloutDivider(props, ref): ReactElement {
+const MessageFooterCalloutDivider = forwardRef<HTMLButtonElement>(function MessageFooterCalloutDivider(props, ref) {
 	return <Box is='hr' ref={ref} borderInlineStart='1px solid' mi={4} flexShrink={0} {...props} />;
 });