fix(striker-ui): allow ReactNode as MessageBox children

striker-ui/components/MessageBox.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, ReactNode, useCallback, useMemo, useState } from 'react';
 import {
   Box as MUIBox,
   BoxProps as MUIBoxProps,
@@ -30,13 +30,11 @@ type MessageBoxOptionalProps = {
   isAllowClose?: boolean;
   onClose?: MUIIconButtonProps['onClick'];
   onCloseAppend?: MUIIconButtonProps['onClick'];
+  text?: string;
   type?: MessageBoxType;
 };
 
-type MessageBoxProps = MUIBoxProps &
+type MessageBoxProps = MUIBoxProps & MessageBoxOptionalProps;
-  MessageBoxOptionalProps & {
-    text: string;
-  };
 
 const MESSAGE_BOX_CLASS_PREFIX = 'MessageBox';
 
@@ -53,18 +51,20 @@ const MESSAGE_BOX_TYPE_MAP_TO_ICON = {
 };
 
 const MESSAGE_BOX_DEFAULT_PROPS: Required<
-  Omit<MessageBoxOptionalProps, 'onClose' | 'onCloseAppend'>
+  Omit<MessageBoxOptionalProps, 'onClose' | 'onCloseAppend' | 'text'>
 > &
-  Pick<MessageBoxOptionalProps, 'onClose' | 'onCloseAppend'> = {
+  Pick<MessageBoxOptionalProps, 'onClose' | 'onCloseAppend' | 'text'> = {
   isShowInitially: true,
   isAllowClose: false,
   onClose: undefined,
   onCloseAppend: undefined,
+  text: undefined,
   type: 'info',
 };
 
 const MessageBox: FC<MessageBoxProps> = ({
-  isAllowClose,
+  children,
+  isAllowClose = MESSAGE_BOX_DEFAULT_PROPS.isAllowClose,
   isShowInitially = MESSAGE_BOX_DEFAULT_PROPS.isShowInitially,
   onClose,
   onCloseAppend,
@@ -76,21 +76,31 @@ const MessageBox: FC<MessageBoxProps> = ({
 
   const [isShow, setIsShow] = useState<boolean>(isShowInitially);
 
-  const isShowCloseButton = isAllowClose || onClose || onCloseAppend;
+  const isShowCloseButton: boolean = useMemo(
-
+    () => isAllowClose || onClose !== undefined || onCloseAppend !== undefined,
-  const buildMessageBoxClasses = (messageBoxType: MessageBoxType) =>
+    [isAllowClose, onClose, onCloseAppend],
-    MESSAGE_BOX_CLASSES[messageBoxType];
+  );
 
-  const buildMessageIcon = (messageBoxType: MessageBoxType) =>
+  const buildMessageBoxClasses = useCallback(
+    (messageBoxType: MessageBoxType) => MESSAGE_BOX_CLASSES[messageBoxType],
+    [],
+  );
+  const buildMessageIcon = useCallback(
+    (messageBoxType: MessageBoxType) =>
       MESSAGE_BOX_TYPE_MAP_TO_ICON[messageBoxType] === undefined
         ? MESSAGE_BOX_TYPE_MAP_TO_ICON.info
-      : MESSAGE_BOX_TYPE_MAP_TO_ICON[messageBoxType];
+        : MESSAGE_BOX_TYPE_MAP_TO_ICON[messageBoxType],
-
+    [],
-  const buildMessage = (message: string, messageBoxType: MessageBoxType) => (
+  );
-    <BodyText inverted={messageBoxType === 'info'} text={message} />
+  const buildMessage = useCallback(
+    (messageBoxType: MessageBoxType, message: ReactNode = children) => (
+      <BodyText inverted={messageBoxType === 'info'}>{message}</BodyText>
+    ),
+    [children],
   );
 
-  const combinedBoxSx: MUIBoxProps['sx'] = {
+  const combinedBoxSx: MUIBoxProps['sx'] = useMemo(
+    () => ({
       alignItems: 'center',
       borderRadius: BORDER_RADIUS,
       display: 'flex',
@@ -126,7 +136,9 @@ const MessageBox: FC<MessageBoxProps> = ({
       },
 
       ...boxSx,
-  };
+    }),
+    [boxSx],
+  );
 
   return isShow ? (
     <MUIBox
@@ -137,7 +149,7 @@ const MessageBox: FC<MessageBoxProps> = ({
       }}
     >
       {buildMessageIcon(type)}
-      {buildMessage(text, type)}
+      {buildMessage(type, text)}
       {isShowCloseButton && (
         <MUIIconButton
           onClick={