refactor(fuselage-ui-kit): remove unnecessary ReactElement type annotations in components

packages/fuselage-ui-kit/src/blocks/ActionsBlock.Action.tsx

@@ -4,11 +4,11 @@ import type { ReactElement } from 'react';
 
 type ActionProps = {
 	element: UiKit.ActionsBlock['elements'][number];
-	parser: UiKit.SurfaceRenderer<ReactElement>;
+	parser: UiKit.SurfaceRenderer<ReactElement<any>>;
 	index: number;
 };
 
-const Action = ({ element, parser, index }: ActionProps): ReactElement | null => {
+const Action = ({ element, parser, index }: ActionProps) => {
 	const renderedElement = parser.renderActionsBlockElement(element, index);
 
 	if (!renderedElement) {

packages/fuselage-ui-kit/src/blocks/ActionsBlock.tsx

@@ -1,6 +1,5 @@
 import { Box, Button } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 
 import Action from './ActionsBlock.Action';
@@ -9,7 +8,7 @@ import type { BlockProps } from '../utils/BlockProps';
 
 type ActionsBlockProps = BlockProps<UiKit.ActionsBlock>;
 
-const ActionsBlock = ({ className, block, surfaceRenderer }: ActionsBlockProps): ReactElement => {
+const ActionsBlock = ({ className, block, surfaceRenderer }: ActionsBlockProps) => {
 	const surfaceType = useSurfaceType();
 
 	const [showMoreVisible, setShowMoreVisible] = useState(() => block.elements.length > 5 && surfaceType !== 'banner');

packages/fuselage-ui-kit/src/blocks/CalloutBlock.tsx

@@ -1,12 +1,11 @@
 import { Callout } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 
 import type { BlockProps } from '../utils/BlockProps';
 
 type CalloutBlockProps = BlockProps<UiKit.CalloutBlock>;
 
-const CalloutBlock = ({ block, surfaceRenderer }: CalloutBlockProps): ReactElement => (
+const CalloutBlock = ({ block, surfaceRenderer }: CalloutBlockProps) => (
 	<Callout
 		type={block.variant}
 		title={block.title?.text}

packages/fuselage-ui-kit/src/blocks/ContextBlock.Item.tsx

@@ -4,11 +4,11 @@ import type { ReactElement } from 'react';
 
 type ItemProps = {
 	block: UiKit.ContextBlock['elements'][number];
-	surfaceRenderer: UiKit.SurfaceRenderer<ReactElement>;
+	surfaceRenderer: UiKit.SurfaceRenderer<ReactElement<any>>;
 	index: number;
 };
 
-const Item = ({ block: element, surfaceRenderer: parser, index }: ItemProps): ReactElement | null => {
+const Item = ({ block: element, surfaceRenderer: parser, index }: ItemProps) => {
 	const renderedElement = parser.renderContextBlockElement(element, index);
 
 	if (!renderedElement) {

packages/fuselage-ui-kit/src/blocks/ContextBlock.tsx

@@ -1,14 +1,13 @@
 import { Box } from '@rocket.chat/fuselage';
 import type * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 import { memo, useMemo } from 'react';
 
 import Item from './ContextBlock.Item';
 import type { BlockProps } from '../utils/BlockProps';
 
 type ContextBlockProps = BlockProps<UiKit.ContextBlock>;
 
-const ContextBlock = ({ className, block, surfaceRenderer }: ContextBlockProps): ReactElement => {
+const ContextBlock = ({ className, block, surfaceRenderer }: ContextBlockProps) => {
 	const itemElements = useMemo(
 		() =>
 			block.elements.map((element) => ({

packages/fuselage-ui-kit/src/blocks/DividerBlock.tsx

@@ -1,12 +1,11 @@
 import { Divider } from '@rocket.chat/fuselage';
 import type * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 import { memo } from 'react';
 
 import type { BlockProps } from '../utils/BlockProps';
 
 type DividerBlockProps = BlockProps<UiKit.DividerBlock>;
 
-const DividerBlock = ({ className }: DividerBlockProps): ReactElement => <Divider className={className} marginBlock={24} />;
+const DividerBlock = ({ className }: DividerBlockProps) => <Divider className={className} marginBlock={24} />;
 
 export default memo(DividerBlock);

packages/fuselage-ui-kit/src/blocks/ImageBlock.tsx

@@ -1,6 +1,5 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 import { memo, useEffect, useState } from 'react';
 
 import { Image } from './ImageBlock.styles';
@@ -32,7 +31,7 @@ const fetchImageState = (img: HTMLImageElement) => {
 
 type ImageBlockProps = BlockProps<UiKit.ImageBlock>;
 
-const ImageBlock = ({ className, block, surfaceRenderer }: ImageBlockProps): ReactElement => {
+const ImageBlock = ({ className, block, surfaceRenderer }: ImageBlockProps) => {
 	const surface = useSurfaceType();
 
 	const alignment = surface === 'banner' || surface === 'message' ? 'flex-start' : 'center';

packages/fuselage-ui-kit/src/blocks/InfoCard.tsx

@@ -1,13 +1,12 @@
 import { Box } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 
 import IconElement from '../elements/IconElement';
 import type { BlockProps } from '../utils/BlockProps';
 
 type InfoCardProps = BlockProps<UiKit.InfoCardBlock>;
 
-const InfoCard = ({ block, surfaceRenderer, context }: InfoCardProps): ReactElement => {
+const InfoCard = ({ block, surfaceRenderer, context }: InfoCardProps) => {
 	const { rows, blockId } = block;
 	return (
 		<Box

packages/fuselage-ui-kit/src/blocks/InputBlock.tsx

@@ -1,14 +1,13 @@
 import { Field, FieldLabel, FieldRow, FieldError, FieldHint } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 import { memo, useMemo } from 'react';
 
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
 type InputBlockProps = BlockProps<UiKit.InputBlock>;
 
-const InputBlock = ({ className, block, surfaceRenderer, context }: InputBlockProps): ReactElement => {
+const InputBlock = ({ className, block, surfaceRenderer, context }: InputBlockProps) => {
 	const inputElement = useMemo(
 		() => ({
 			...block.element,

packages/fuselage-ui-kit/src/blocks/PreviewBlock.tsx

@@ -10,15 +10,14 @@ import {
 } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
 import { isPreviewBlockWithThumb, isPreviewBlockWithPreview } from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 import { memo } from 'react';
 
 import ContextBlock from './ContextBlock';
 import type { BlockProps } from '../utils/BlockProps';
 
 type PreviewBlockProps = BlockProps<UiKit.PreviewBlock>;
 
-const PreviewBlock = ({ block, surfaceRenderer }: PreviewBlockProps): ReactElement => (
+const PreviewBlock = ({ block, surfaceRenderer }: PreviewBlockProps) => (
 	<Box>
 		<MessageGenericPreview>
 			{isPreviewBlockWithPreview(block) && block.preview?.dimensions && (

packages/fuselage-ui-kit/src/blocks/SectionBlock.Fields.tsx

@@ -12,10 +12,10 @@ const breakpoints = {
 
 type FieldsProps = {
 	fields: readonly UiKit.TextObject[];
-	surfaceRenderer: UiKit.SurfaceRenderer<ReactElement>;
+	surfaceRenderer: UiKit.SurfaceRenderer<ReactElement<any>>;
 };
 
-const Fields = ({ fields, surfaceRenderer }: FieldsProps): ReactElement => (
+const Fields = ({ fields, surfaceRenderer }: FieldsProps) => (
 	<Grid>
 		{fields.map((field, i) => (
 			<GridItem key={i} {...breakpoints}>

packages/fuselage-ui-kit/src/blocks/SectionBlock.tsx

@@ -1,14 +1,13 @@
 import { Box, Flex, Grid, GridItem } from '@rocket.chat/fuselage';
 import type * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 import { memo, useMemo } from 'react';
 
 import Fields from './SectionBlock.Fields';
 import type { BlockProps } from '../utils/BlockProps';
 
 type SectionBlockProps = BlockProps<UiKit.SectionBlock>;
 
-const SectionBlock = ({ className, block, surfaceRenderer }: SectionBlockProps): ReactElement => {
+const SectionBlock = ({ className, block, surfaceRenderer }: SectionBlockProps) => {
 	const { text, fields } = block;
 
 	const accessoryElement = useMemo(

packages/fuselage-ui-kit/src/blocks/TabNavigationBlock.tsx

@@ -1,14 +1,13 @@
 import { Tabs } from '@rocket.chat/fuselage';
 import type { ExperimentalTabNavigationBlock } from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 import { memo, useState } from 'react';
 
 import { TabElement } from '../elements/TabElement';
 import type { BlockProps } from '../utils/BlockProps';
 
 type TabNavigationBlockProps = BlockProps<ExperimentalTabNavigationBlock>;
 
-const TabNavigationBlock = (blockProps: TabNavigationBlockProps): ReactElement => {
+const TabNavigationBlock = (blockProps: TabNavigationBlockProps) => {
 	const {
 		block: { tabs },
 		context,

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

@@ -15,7 +15,7 @@ import {
 	VideoConfMessageActions,
 	VideoConfMessageAction,
 } from '@rocket.chat/ui-video-conf';
-import type { MouseEventHandler, ReactElement } from 'react';
+import type { MouseEventHandler } from 'react';
 import { useContext, memo, useMemo } from 'react';
 
 import { UiKitContext } from '../..';
@@ -27,7 +27,7 @@ type VideoConferenceBlockProps = BlockProps<UiKit.VideoConferenceBlock>;
 
 const MAX_USERS = 3;
 
-const VideoConferenceBlock = ({ block }: VideoConferenceBlockProps): ReactElement => {
+const VideoConferenceBlock = ({ block }: VideoConferenceBlockProps) => {
 	const t = useTranslation();
 	const { callId, appId = 'videoconf-core' } = block;
 	const surfaceType = useSurfaceType();

packages/fuselage-ui-kit/src/elements/ButtonElement.tsx

@@ -1,13 +1,13 @@
 import { Button, Throbber } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
-import type { MouseEventHandler, ReactElement } from 'react';
+import type { MouseEventHandler } from 'react';
 
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
 type ButtonElementProps = BlockProps<UiKit.ButtonElement>;
 
-const ButtonElement = ({ block, context, surfaceRenderer }: ButtonElementProps): ReactElement => {
+const ButtonElement = ({ block, context, surfaceRenderer }: ButtonElementProps) => {
 	const [{ loading }, action] = useUiKitState(block, context);
 	const { style, url, text, value, secondary } = block;
 

packages/fuselage-ui-kit/src/elements/CheckboxElement.tsx

@@ -1,13 +1,12 @@
 import { CheckBox, Box } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
 type CheckboxElementProps = BlockProps<UiKit.CheckboxElement>;
 
-const CheckboxElement = ({ block, context, surfaceRenderer }: CheckboxElementProps): ReactElement => {
+const CheckboxElement = ({ block, context, surfaceRenderer }: CheckboxElementProps) => {
 	const [{ loading, value }, action] = useUiKitState(block, context);
 	const { options } = block;
 

packages/fuselage-ui-kit/src/elements/DatePickerElement.tsx

@@ -1,14 +1,13 @@
 import { InputBox } from '@rocket.chat/fuselage';
 import type * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 
 import { useStringFromTextObject } from '../hooks/useStringFromTextObject';
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
 type DatePickerElementProps = BlockProps<UiKit.DatePickerElement>;
 
-const DatePickerElement = ({ block, context }: DatePickerElementProps): ReactElement => {
+const DatePickerElement = ({ block, context }: DatePickerElementProps) => {
 	const [{ loading, value, error }, action] = useUiKitState(block, context);
 	const { actionId, placeholder } = block;
 	const fromTextObjectToString = useStringFromTextObject();

packages/fuselage-ui-kit/src/elements/IconButtonElement.tsx

@@ -1,13 +1,13 @@
 import { IconButton } from '@rocket.chat/fuselage';
 import type * as UiKit from '@rocket.chat/ui-kit';
-import type { MouseEventHandler, ReactElement } from 'react';
+import type { MouseEventHandler } from 'react';
 
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
 type IconButtonElementProps = BlockProps<UiKit.IconButtonElement>;
 
-const IconButtonElement = ({ block, context }: IconButtonElementProps): ReactElement => {
+const IconButtonElement = ({ block, context }: IconButtonElementProps) => {
 	const [{ loading }, action] = useUiKitState(block, context);
 
 	const { url, value, label, icon } = block;

packages/fuselage-ui-kit/src/elements/IconElement.tsx

@@ -1,6 +1,6 @@
 import { Icon, FramedIcon } from '@rocket.chat/fuselage';
 import type * as UiKit from '@rocket.chat/ui-kit';
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 
 import type { BlockProps } from '../utils/BlockProps';
 
@@ -35,7 +35,7 @@ const getFramedIconProps = (
 	}
 };
 
-const IconElement = ({ block }: IconElementProps): ReactElement => {
+const IconElement = ({ block }: IconElementProps) => {
 	const { icon, variant, framed } = block;
 	if (framed) {
 		return <FramedIcon size={20} icon={icon} {...getFramedIconProps(variant)} />;

packages/fuselage-ui-kit/src/elements/ImageElement.tsx

@@ -1,12 +1,11 @@
 import * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 
 import { Element } from './ImageElement.styles';
 import type { BlockProps } from '../utils/BlockProps';
 
 type ImageElementProps = BlockProps<UiKit.ImageElement>;
 
-const ImageElement = ({ block, context }: ImageElementProps): ReactElement | null => {
+const ImageElement = ({ block, context }: ImageElementProps) => {
 	const size = (context === UiKit.BlockContext.SECTION && 88) || (context === UiKit.BlockContext.CONTEXT && 20) || undefined;
 
 	if (!size) {

packages/fuselage-ui-kit/src/elements/LinearScaleElement.tsx

@@ -1,14 +1,13 @@
 import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 import { memo, useMemo } from 'react';
 
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
 type LinearScaleElementProps = BlockProps<UiKit.LinearScaleElement>;
 
-const LinearScaleElement = ({ className, block, context, surfaceRenderer }: LinearScaleElementProps): ReactElement => {
+const LinearScaleElement = ({ className, block, context, surfaceRenderer }: LinearScaleElementProps) => {
 	const { minValue = 0, maxValue = 10, initialValue, preLabel, postLabel } = block;
 
 	const [{ loading, value = initialValue, error }, action] = useUiKitState(block, context);

packages/fuselage-ui-kit/src/elements/MultiStaticSelectElement.tsx

@@ -1,7 +1,6 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { MultiSelectFiltered } from '@rocket.chat/fuselage';
 import type * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 import { memo, useCallback, useMemo } from 'react';
 
 import { useStringFromTextObject } from '../hooks/useStringFromTextObject';
@@ -10,7 +9,7 @@ import type { BlockProps } from '../utils/BlockProps';
 
 type MultiStaticSelectElementProps = BlockProps<UiKit.MultiStaticSelectElement>;
 
-const MultiStaticSelectElement = ({ block, context }: MultiStaticSelectElementProps): ReactElement => {
+const MultiStaticSelectElement = ({ block, context }: MultiStaticSelectElementProps) => {
 	const [{ loading, value, error }, action] = useUiKitState(block, context);
 	const fromTextObjectToString = useStringFromTextObject();
 

packages/fuselage-ui-kit/src/elements/OverflowElement.tsx

@@ -1,7 +1,6 @@
 import type { OptionType } from '@rocket.chat/fuselage';
 import { IconButton, PositionAnimated, Options, useCursor } from '@rocket.chat/fuselage';
 import type * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 import { useRef, useCallback, useMemo } from 'react';
 
 import { useStringFromTextObject } from '../hooks/useStringFromTextObject';
@@ -10,7 +9,7 @@ import type { BlockProps } from '../utils/BlockProps';
 
 type OverflowElementProps = BlockProps<UiKit.OverflowElement>;
 
-const OverflowElement = ({ block, context }: OverflowElementProps): ReactElement => {
+const OverflowElement = ({ block, context }: OverflowElementProps) => {
 	const [{ loading }, action] = useUiKitState(block, context);
 	const fromTextObjectToString = useStringFromTextObject();
 

packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx

@@ -1,6 +1,5 @@
 import { TextAreaInput, TextInput } from '@rocket.chat/fuselage';
 import type * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 import { memo } from 'react';
 
 import { useStringFromTextObject } from '../hooks/useStringFromTextObject';
@@ -9,7 +8,7 @@ import type { BlockProps } from '../utils/BlockProps';
 
 type PlainTextInputElementProps = BlockProps<UiKit.PlainTextInputElement>;
 
-const PlainTextInputElement = ({ block, context }: PlainTextInputElementProps): ReactElement => {
+const PlainTextInputElement = ({ block, context }: PlainTextInputElementProps) => {
 	const [{ loading, value, error }, action] = useUiKitState(block, context);
 	const fromTextObjectToString = useStringFromTextObject();
 

packages/fuselage-ui-kit/src/elements/RadioButtonElement.tsx

@@ -1,13 +1,12 @@
 import { Box, RadioButton } from '@rocket.chat/fuselage';
 import * as UiKit from '@rocket.chat/ui-kit';
-import type { ReactElement } from 'react';
 
 import { useUiKitState } from '../hooks/useUiKitState';
 import type { BlockProps } from '../utils/BlockProps';
 
 type RadioButtonElementProps = BlockProps<UiKit.RadioButtonElement>;
 
-const RadioButtonElement = ({ block, context, surfaceRenderer }: RadioButtonElementProps): ReactElement => {
+const RadioButtonElement = ({ block, context, surfaceRenderer }: RadioButtonElementProps) => {
 	const [{ loading, value }, action] = useUiKitState(block, context);
 	const { options } = block;