refactor(ui-composer): remove unnecessary ReactElement type annotations across components

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

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;

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} />
 );
 

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;

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;

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>;
 

packages/ui-composer/src/MessageComposer/MessageComposerHint.tsx

@@ -1,14 +1,14 @@
 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;
 	icon?: IconProps['name'];
 	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 && (

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} />
 );
 

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} />

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} />
 );
 

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);
 

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;

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}

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} />;
 });