fix: Fixed type error.

src/ui/AdminMessage/index.tsx

@@ -12,7 +12,7 @@ interface AdminMessageProps {
 export default function AdminMessage({
   className = '',
   message,
-}: AdminMessageProps): ReactElement {
+}: AdminMessageProps): ReactElement | null {
   if (!(message?.isAdminMessage || message?.messageType) || !message?.isAdminMessage?.() || message?.messageType !== 'admin') {
     return null;
   }

src/ui/Avatar/index.tsx

@@ -153,47 +153,46 @@ interface AvatarProps {
   customDefaultComponent?({ width, height }: { width: number | string, height: number | string }): ReactElement;
 }
 
-function Avatar(
-  {
-    className = '',
-    src = '',
-    alt = '',
-    width = '56px',
-    height = '56px',
-    zIndex = 0,
-    left = '',
-    onClick,
-    customDefaultComponent,
-  }: AvatarProps,
-  ref?: RefObject<HTMLDivElement>,
-): ReactElement {
-  return (
-    <div
-      className={[
-        ...(Array.isArray(className) ? className : [className]),
-        'sendbird-avatar',
-      ].join(' ')}
-      role="button"
-      ref={ref}
-      style={{
-        height,
-        width,
-        zIndex,
-        left,
-      }}
-      onClick={onClick}
-      onKeyDown={onClick}
-      tabIndex={0}
-    >
-      <AvatarInner
-        src={src}
-        width={width}
-        height={height}
-        alt={alt}
-        customDefaultComponent={customDefaultComponent}
-      />
-    </div>
-  );
-}
-
-export default React.forwardRef(Avatar);
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  (
+    {
+      className = '',
+      src = '',
+      alt = '',
+      width = '56px',
+      height = '56px',
+      zIndex = 0,
+      left = '',
+      onClick,
+      customDefaultComponent,
+    }: AvatarProps,
+    ref: RefObject<HTMLDivElement>) => {
+    return (
+      <div
+        className={[
+          ...(Array.isArray(className) ? className : [className]),
+          'sendbird-avatar',
+        ].join(' ')}
+        role="button"
+        ref={ref}
+        style={{
+          height,
+          width,
+          zIndex,
+          left,
+        }}
+        onClick={onClick}
+        onKeyDown={onClick}
+        tabIndex={0}
+      >
+        <AvatarInner
+          src={src}
+          width={width}
+          height={height}
+          alt={alt}
+          customDefaultComponent={customDefaultComponent}
+        />
+      </div>
+    );
+  });
+export default Avatar;

src/ui/BottomSheet/index.tsx

@@ -18,7 +18,7 @@ const BottomSheet: React.FunctionComponent<BottomSheetProps> = (props: BottomShe
   } = props;
 
   // https://github.com/testing-library/react-testing-library/issues/62#issuecomment-438653348
-  const portalRoot = useRef<HTMLElement>();
+  const portalRoot = useRef<HTMLElement| null>();
   portalRoot.current = document.getElementById(MODAL_ROOT);
   if (!portalRoot.current) {
     portalRoot.current = document.createElement('div');
@@ -43,7 +43,7 @@ const BottomSheet: React.FunctionComponent<BottomSheetProps> = (props: BottomShe
         `}
         onClick={(e) => {
           e?.stopPropagation();
-          onBackdropClick();
+          onBackdropClick?.();
         }}
       />
     </div>,

src/ui/Button/utils.ts

@@ -8,14 +8,14 @@ export function changeTypeToClassName(type: ButtonTypes): string {
     case ButtonTypes.DISABLED: return 'sendbird-button--disabled';
     case ButtonTypes.WARNING: return 'sendbird-button--warning';
 
-    default: return null;
+    default: return '';
   }
 }
 
 export function changeSizeToClassName(size: ButtonSizes): string {
   switch (size) {
     case ButtonSizes.BIG: return 'sendbird-button--big';
     case ButtonSizes.SMALL: return 'sendbird-button--small';
-    default: return null;
+    default: return '';
   }
 }

src/ui/ChannelAvatar/utils.ts

@@ -3,10 +3,11 @@ import type { OpenChannel } from '@sendbird/chat/openChannel';
 
 export const DEFAULT_URL_PREFIX = 'https://static.sendbird.com/sample/cover/cover_';
 
-export const getOpenChannelAvatar = (channel: OpenChannel): string => {
+export const getOpenChannelAvatar = (channel: OpenChannel): string | undefined => {
   if (channel?.coverUrl) {
     return channel.coverUrl;
   }
+  return undefined;
 };
 
 export const getChannelAvatarSource = (channel: GroupChannel, currentUserId: string): string | Array<string> => {

src/ui/ContextMenu/MenuItems.tsx

@@ -11,7 +11,7 @@ interface MenuItemsProps {
   closeDropdown: () => void;
 }
 
-type MenuStyleType = { top?: number, left?: number };
+type MenuStyleType = { top: number, left: number };
 interface MenuItemsState {
   menuStyle: MenuStyleType;
   handleClickOutside: (e: MouseEvent) => void;
@@ -24,7 +24,7 @@ export default class MenuItems extends React.Component<MenuItemsProps, MenuItems
   constructor(props: MenuItemsProps) {
     super(props);
     this.state = {
-      menuStyle: {},
+      menuStyle: {top: 0, left: 0},
       handleClickOutside: () => { /* noop */ },
     };
   }
@@ -99,10 +99,15 @@ export default class MenuItems extends React.Component<MenuItemsProps, MenuItems
     this.setState({ menuStyle });
     return menuStyle;
   };
-
+  
   render(): ReactElement {
+    const portalElement = document.getElementById('sendbird-dropdown-portal');
+    if (!portalElement)
+      return <></>;
+
     const { menuStyle } = this.state;
     const { children, style, className = '' } = this.props;
+
     return (
       createPortal(
         (
@@ -123,7 +128,7 @@ export default class MenuItems extends React.Component<MenuItemsProps, MenuItems
             </ul>
           </div>
         ),
-        document.getElementById('sendbird-dropdown-portal'),
+        portalElement
       )
     );
   }

src/ui/DateSeparator/index.tsx

@@ -15,7 +15,7 @@ export interface DateSeparatorProps {
   separatorColor?: Colors;
 }
 const DateSeparator = ({
-  children = null,
+  children = undefined,
   className = '',
   separatorColor = Colors.ONBACKGROUND_4,
 }: DateSeparatorProps): ReactElement => {

src/ui/FileMessageItemBody/index.tsx

@@ -19,15 +19,15 @@ interface Props {
 }
 
 export default function FileMessageItemBody({
-  className,
+  className = '',
   message,
   isByMe = false,
   mouseHover = false,
   isReactionEnabled = false,
-  truncateLimit = null,
+  truncateLimit = undefined,
 }: Props): ReactElement {
   const { isMobile } = useMediaQueryContext();
-  const truncateMaxNum = truncateLimit || (isMobile ? 20 : null);
+  const truncateMaxNum = truncateLimit || (isMobile ? 20 : undefined);
   return (
     <div className={getClassName([
       className,

src/ui/FileViewer/index.tsx

@@ -166,7 +166,7 @@ export default function FileViewer({
             return {
               name: fileInfo.fileName || '',
               type: fileInfo.mimeType || '',
-              url: fileInfo.url,
+              url: fileInfo.url || '',
             };
           })
         }

src/ui/Icon/type.ts

@@ -61,4 +61,4 @@ export const Types = {
   FEEDBACK_LIKE: 'FEEDBACK_LIKE',
   FEEDBACK_DISLIKE: 'FEEDBACK_DISLIKE',
 } as const;
-export type Types = typeof Types[keyof typeof Types];
+export type Types = typeof Types[keyof typeof Types] | undefined;

src/ui/ImageGrid/index.tsx

@@ -19,7 +19,7 @@ export default function ImageGrid({
   return (
     <div className='sendbird-image-grid-wrap'>
       <div className={getClassName([
-        className,
+        className ?? '',
         'sendbird-image-grid',
         (isReactionEnabled && message?.reactions?.length > 0) ? 'reactions' : '',
       ])}>

src/ui/ImageRenderer/index.tsx

@@ -6,7 +6,7 @@ import { useDynamicSideLength } from './useDynamicSideLength';
 import { useLazyImageLoader } from '../../modules/Channel/components/Message/hooks/useLazyImageLoader';
 import { noop } from '../../utils/utils';
 
-export function getBorderRadiusForImageRenderer(circle = false, borderRadius: string | number = null): string {
+export function getBorderRadiusForImageRenderer(circle = false, borderRadius: string | number | null = null): string {
   return circle ? '50%' : numberToPx(borderRadius);
 }
 
@@ -24,14 +24,14 @@ export interface ImageRendererProps {
   className?: string | Array<string>;
   url: string;
   alt?: string;
-  width?: string | number;
-  maxSideLength?: string;
-  height?: string | number;
+  width?: string | number | null;
+  maxSideLength?: string | null;
+  height?: string | number | null;
   circle?: boolean;
   fixedSize?: boolean;
-  placeHolder?: ((props: { style: Record<string, string | number> }) => ReactElement) | ReactElement;
-  defaultComponent?: (() => ReactElement) | ReactElement;
-  borderRadius?: string | number;
+  placeHolder?: ((props: { style: Record<string, string | number> }) => ReactElement) | ReactElement | null;
+  defaultComponent?: (() => ReactElement) | ReactElement | null;
+  borderRadius?: string | number | null;
   onLoad?: () => void;
   onError?: () => void;
   shadeOnHover?: boolean;
@@ -64,7 +64,7 @@ const ImageRenderer = ({
   const ref = useRef(null);
   const isLoaded = useLazyImageLoader(ref);
   const internalUrl = isLoaded ? url : null;
-
+  
   const [defaultComponentVisible, setDefaultComponentVisible] = useState(false);
   const [placeholderVisible, setPlaceholderVisible] = useState(true);
   const [dynamicMinWidth, dynamicMinHeight] = useDynamicSideLength({
@@ -73,7 +73,7 @@ const ImageRenderer = ({
     maxSideLength,
     defaultMinLength: '400px',
   });
-
+  
   const renderPlaceholder = () => {
     if (typeof placeHolder === 'function') {
       return placeHolder({
@@ -91,20 +91,20 @@ const ImageRenderer = ({
     }
     return placeHolder;
   };
-
+  
   const renderDefault = () => {
     if (typeof defaultComponent === 'function') return defaultComponent();
     return defaultComponent;
   };
-
+  
   const renderImage = () => {
     const backgroundStyle = internalUrl ? {
       backgroundRepeat: 'no-repeat',
       backgroundPosition: 'center',
       backgroundSize: 'cover',
       backgroundImage: `url(${internalUrl})`,
     } : {};
-
+    
     return (
       <div
         className="sendbird-image-renderer__image"
@@ -120,7 +120,7 @@ const ImageRenderer = ({
       />
     );
   };
-
+  
   return (
     dynamicMinWidth
     && dynamicMinHeight && (
@@ -164,8 +164,7 @@ const ImageRenderer = ({
           }}
         />}
       </div>
-    )
-  );
+    )) as React.ReactElement;
 };
 
 // Image is loaded as a background-image, but this component serves as a hidden component to receive events indicating whether the image has actually been loaded.

src/ui/ImageRenderer/useDynamicSideLength.ts

@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import { getDynamicMinLengthInPx } from './utils';
 
 interface DynamicSideLengthProps {
-  width: string | number;
-  height: string | number;
+  width: string | number | null;
+  height: string | number | null;
   maxSideLength: string | null;
   defaultMinLength: string
 }

src/ui/ImageRenderer/utils.ts

@@ -1,7 +1,7 @@
 import numberToPx from '../../utils/numberToPx';
 
 export function getDynamicMinLengthInPx(
-  sideLength: string | number,
+  sideLength: string | number | null,
   maxSideLength: string | null,
   defaultMinLength: string,
 ): string {