@zohoim/chat-components 0.0.6 → 0.0.8

package/es/LocationBubble/LocationBubble.js

@@ -0,0 +1,63 @@
+/* eslint-disable @zohodesk/zsecurity/no-protocol-check */
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import locationBubbleDefaultProps from './props/defaultProps';
+import locationBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/LocationBubble.module.css';
+import useLocationBubble from '@zohoim/chat-components-hooks/es/LocationBubble/useLocationBubble';
+export default function LocationBubble(props) {
+  const {
+    customStyle
+  } = props;
+  const {
+    locationURL
+  } = useLocationBubble(props);
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    locationBubbleClass,
+    imageWrapperClass,
+    imageClass,
+    imageLinkClass,
+    textWrapperClass,
+    textLinkClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: locationBubbleClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: imageWrapperClass
+  }, /*#__PURE__*/React.createElement("a", {
+    target: "_blank",
+    rel: "noreferrer noopener",
+    href: locationURL,
+    className: imageLinkClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: imageClass
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: textWrapperClass
+  }, /*#__PURE__*/React.createElement("a", {
+    target: "_blank",
+    rel: "noreferrer noopener",
+    href: locationURL,
+    className: textLinkClass
+  }, locationURL)));
+}
+LocationBubble.propTypes = locationBubblePropTypes;
+LocationBubble.defaultProps = locationBubbleDefaultProps;
+LocationBubble.displayName = 'LocationBubble';

package/es/LocationBubble/css/LocationBubble.module.css

@@ -0,0 +1,3 @@
+.image {
+  background-image: url('../images/location.png');
+}

package/es/LocationBubble/css/cssJSLogic.js

@@ -0,0 +1,30 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const locationBubbleClass = compileClassNames({
+    [style.locationBubble]: true
+  });
+  const imageWrapperClass = compileClassNames({
+    [style.imageWrapper]: true
+  });
+  const imageClass = compileClassNames({
+    [style.image]: true
+  });
+  const imageLinkClass = compileClassNames({
+    [style.imageLink]: true
+  });
+  const textWrapperClass = compileClassNames({
+    [style.textWrapper]: true
+  });
+  const textLinkClass = compileClassNames({
+    [style.textLink]: true
+  });
+  return {
+    locationBubbleClass,
+    imageWrapperClass,
+    imageClass,
+    imageLinkClass,
+    textWrapperClass,
+    textLinkClass
+  };
+}

package/es/LocationBubble/index.js

@@ -0,0 +1 @@
+export { default as LocationBubble } from './LocationBubble';

package/es/LocationBubble/props/defaultProps.js

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const locationBubbleDefaultProps = {
+  customStyle: dummyObject
+};
+export default locationBubbleDefaultProps;

package/es/LocationBubble/props/propTypes.js

@@ -0,0 +1,7 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const locationBubblePropTypes = {
+  customStyle: PropTypes.object,
+  locationURL: PropTypes.string
+};
+export default locationBubblePropTypes;

package/es/MediaControls/MediaControls.js

@@ -0,0 +1,60 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import mediaControlsDefaultProps from './props/defaultProps';
+import mediaControlsPropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/MediaControls.module.css';
+
+/** ** Icons *** */
+import PauseIcon from '@zohodesk/icon/es/general/Pause';
+import PlayIcon from '@zohodesk/icon/es/general/Copy';
+export default function MediaControls(props) {
+  const {
+    customStyle,
+    onTogglePlay,
+    isMediaPlayed,
+    progressPercentage,
+    currentTime,
+    durationTime
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    mediaControlsClass,
+    iconWrapperClass,
+    progressBarClass,
+    durationClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: mediaControlsClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: iconWrapperClass
+  }, /*#__PURE__*/React.createElement("span", {
+    onClick: onTogglePlay
+  }, isMediaPlayed ? /*#__PURE__*/React.createElement(PauseIcon, null) : /*#__PURE__*/React.createElement(PlayIcon, null))), /*#__PURE__*/React.createElement("div", {
+    className: progressBarClass,
+    style: {
+      width: progressPercentage
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: durationClass
+  }, `${currentTime} / ${durationTime}`));
+}
+MediaControls.propTypes = mediaControlsPropTypes;
+MediaControls.defaultProps = mediaControlsDefaultProps;
+MediaControls.displayName = 'MediaControls';

package/es/MediaControls/css/MediaControls.module.css

@@ -0,0 +1 @@
+

package/es/MediaControls/css/cssJSLogic.js

@@ -0,0 +1,22 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const mediaControlsClass = compileClassNames({
+    [style.mediaControls]: true
+  });
+  const iconWrapperClass = compileClassNames({
+    [style.iconWrapper]: true
+  });
+  const progressBarClass = compileClassNames({
+    [style.progressBar]: true
+  });
+  const durationClass = compileClassNames({
+    [style.duration]: true
+  });
+  return {
+    mediaControlsClass,
+    iconWrapperClass,
+    progressBarClass,
+    durationClass
+  };
+}

package/es/MediaControls/index.js

@@ -0,0 +1 @@
+export { default as MediaControls } from './MediaControls';

package/es/MediaControls/props/defaultProps.js

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const mediaControlsDefaultProps = {
+  customStyle: dummyObject
+};
+export default mediaControlsDefaultProps;

package/es/MediaControls/props/propTypes.js

@@ -0,0 +1,11 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const mediaControlsPropTypes = {
+  customStyle: PropTypes.object,
+  onTogglePlay: PropTypes.func,
+  isMediaPlayed: PropTypes.bool,
+  progressPercentage: PropTypes.string,
+  currentTime: PropTypes.string,
+  durationTime: PropTypes.string
+};
+export default mediaControlsPropTypes;

package/es/Message/Message.js

@@ -0,0 +1,136 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Constants *** */
+import messageDefaultProps from './props/defaultProps';
+import messagePropTypes from './props/propTypes';
+import { direction as directionConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+
+/** ** Components *** */
+import MessageBubble from '../MessageBubble/MessageBubble';
+import MessageBox from '../MessageBox/MessageBox';
+import IMMessageAvatar from '../IMMessageAvatar/IMMessageAvatar';
+import IMMessageActions from '../IMMessageActions/IMMessageActions';
+import IMMessageStatus from '../IMMessageStatus/IMMessageStatus';
+export default function Message(props) {
+  const {
+    customStyle,
+    direction,
+    isActive,
+    needMessageActions,
+    renderMessageBoxFooter,
+    /* Avatar Related Props Start */
+    needSender,
+    isShowSender,
+    senderSrc,
+    senderAlternateSrc,
+    senderTitle,
+    senderAvatarSize,
+    senderName,
+    avatarCustomStyle,
+    senderIntegrationIcon,
+    senderIntegrationIconSize,
+    senderIntegrationIconCustomStyle,
+    isCustomIntegrationIcon,
+    isCustomSenderAvatar,
+    renderCustomIntegrationIcon,
+    renderCustomSenderAvatar,
+    /*Avatar Related Props  End*/
+
+    /* MessageBox Props Start */
+    isFailedMessage,
+    needMessageBox,
+    renderMessage,
+    renderMessageFooter,
+    renderMessageHeader,
+    messageBoxCustomStyle,
+    /*MessageBox Props End */
+
+    /* MessageAction Props Start */
+    messageActions,
+    actionsDefaultShowCount,
+    actionIconCustomStyle,
+    moreActionItemCustomStyle,
+    onSelectAction,
+    messageActionCustomStyle,
+    moreActionPopupCustomStyle,
+    renderSecondaryActions,
+    /* MessageAction Props End */
+
+    /*MessageStatus Props Start */
+    messageStatus,
+    messageStatusCustomStyle,
+    statusTitle
+    /*MessageStatus Props End */
+  } = props;
+  function handleRenderMessageStatus() {
+    const props = {
+      messageStatus,
+      customStyle: messageStatusCustomStyle,
+      title: statusTitle
+    };
+    return messageStatus ? /*#__PURE__*/React.createElement(IMMessageStatus, props) : null;
+  }
+  function handleRenderMessageBox() {
+    const props = {
+      renderMessageFooter,
+      renderMessageHeader,
+      renderMessageStatus: handleRenderMessageStatus,
+      renderMessage,
+      customStyle: messageBoxCustomStyle,
+      isFailed: isFailedMessage,
+      isIncoming: direction === directionConstants.IN,
+      isOutgoing: direction === directionConstants.OUT
+    };
+    return /*#__PURE__*/React.createElement(MessageBox, props);
+  }
+  function handleRenderMessageOwner() {
+    const props = {
+      src: senderSrc,
+      alternateSrc: senderAlternateSrc,
+      title: senderTitle,
+      avatarSize: senderAvatarSize,
+      name: senderName,
+      customStyle: avatarCustomStyle,
+      integrationName: senderIntegrationIcon,
+      iconSize: senderIntegrationIconSize,
+      iconCustomStyle: senderIntegrationIconCustomStyle,
+      isCustomIcon: isCustomIntegrationIcon,
+      renderCustomIcon: renderCustomIntegrationIcon,
+      isCustomAvatar: isCustomSenderAvatar,
+      renderCustomAvatar: renderCustomSenderAvatar
+    };
+    return isShowSender ? /*#__PURE__*/React.createElement(IMMessageAvatar, props) : null;
+  }
+  function handleRenderMessageActions() {
+    const props = {
+      actions: messageActions,
+      renderSecondaryActions: renderSecondaryActions,
+      defaultShowCount: actionsDefaultShowCount,
+      actionIconCustomStyle: actionIconCustomStyle,
+      moreItemCustomStyle: moreActionItemCustomStyle,
+      onSelect: onSelectAction,
+      customStyle: messageActionCustomStyle,
+      morePopupCustomStyle: moreActionPopupCustomStyle
+    };
+    return /*#__PURE__*/React.createElement(IMMessageActions, props);
+  }
+  return /*#__PURE__*/React.createElement(MessageBubble, {
+    direction: direction,
+    isActive: isActive,
+    needMessageActions: needMessageActions,
+    renderMessageBox: handleRenderMessageBox,
+    renderMessageBoxFooter: renderMessageBoxFooter,
+    renderMessageOwner: handleRenderMessageOwner,
+    renderMessageActions: handleRenderMessageActions,
+    customStyle: customStyle,
+    needSender: needSender,
+    isShowSender: isShowSender
+  });
+}
+Message.propTypes = messagePropTypes;
+Message.defaultProps = messageDefaultProps;
+Message.displayName = 'Message';

package/es/Message/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const imMessageClass = compileClassNames({
+    [style.imMessage]: true
+  });
+  return {
+    imMessageClass
+  };
+}

package/es/Message/index.js

@@ -0,0 +1 @@
+export { default as Message } from './Message';

package/es/Message/props/defaultProps.js

@@ -0,0 +1,43 @@
+/** ** Constants *** */
+import { dummyObject, dummyArray } from '@zohoim/chat-components-utils/es/constants';
+import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
+import { actionsDefaultShowCount } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
+const messageDefaultProps = {
+  customStyle: dummyObject,
+  direction: direction.IN,
+  isActive: false,
+  needMessageActions: true,
+  needSender: true,
+  isShowSender: true,
+  senderSrc: '',
+  senderAlternateSrc: '',
+  senderTitle: '',
+  //'RAVI KUMAR',
+  senderAvatarSize: 'medium',
+  senderName: '',
+  //'Ravi kumar',
+  avatarCustomStyle: dummyObject,
+  senderIntegrationIcon: '',
+  //WHATSAPP
+  senderIntegrationIconSize: sizes.SMALL,
+  senderIntegrationIconCustomStyle: dummyObject,
+  isCustomIntegrationIcon: false,
+  isCustomSenderAvatar: false,
+  needMessageBox: true,
+  isFailedMessage: false,
+  messageBoxCustomStyle: dummyObject,
+  messageActions: dummyArray,
+  actionsDefaultShowCount: actionsDefaultShowCount,
+  actionIconCustomStyle: dummyObject,
+  moreActionItemCustomStyle: dummyObject,
+  messageActionCustomStyle: dummyObject,
+  moreActionPopupCustomStyle: dummyObject,
+  messageStatus: '',
+  // READ,
+  messageStatusCustomStyle: dummyObject,
+  statusTitle: '' // READ,
+  // renderMessage: () => <div>Test</div>
+};
+
+export default messageDefaultProps;

package/es/Message/props/propTypes.js

@@ -0,0 +1,98 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+
+/** ** Constants *** */
+import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
+import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
+import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
+import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
+const {
+  REPLY,
+  COPY,
+  DOWNLOAD,
+  CREATE_TICKET,
+  RESEND,
+  DELETE,
+  FORWARD
+} = defaultMessageActions;
+const {
+  WHATSAPP,
+  TELEGRAM,
+  INSTAGRAM,
+  ASAP,
+  WECHAT,
+  TWILLIO,
+  LINE
+} = integrationConstants;
+const {
+  SENT,
+  SAVED,
+  QUEUED,
+  DELIVERED,
+  READ,
+  UNSENT,
+  FAILED,
+  OUTGOING
+} = messageStatusConstants;
+const {
+  IN,
+  OUT
+} = direction;
+const messagePropTypes = {
+  customStyle: PropTypes.object,
+  direction: PropTypes.oneOf([IN, OUT]),
+  isActive: PropTypes.bool,
+  needMessageActions: PropTypes.bool,
+  renderMessageBoxFooter: PropTypes.func,
+  /* Avatar Related Props Start */
+  needSender: PropTypes.bool,
+  isShowSender: PropTypes.bool,
+  senderSrc: PropTypes.string,
+  senderAlternateSrc: PropTypes.string,
+  senderTitle: PropTypes.string,
+  senderAvatarSize: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  senderName: PropTypes.string,
+  avatarCustomStyle: PropTypes.object,
+  senderIntegrationIcon: PropTypes.oneOf([WHATSAPP, TELEGRAM, INSTAGRAM, ASAP, WECHAT, TWILLIO, LINE]),
+  senderIntegrationIconSize: PropTypes.oneOf([sizes.SMALL, sizes.MEDIUM]),
+  senderIntegrationIconCustomStyle: PropTypes.object,
+  isCustomIntegrationIcon: PropTypes.bool,
+  isCustomSenderAvatar: PropTypes.bool,
+  renderCustomIntegrationIcon: PropTypes.func,
+  renderCustomSenderAvatar: PropTypes.func,
+  /*Avatar Related Props  End*/
+
+  /* MessageBox Props Start */
+  needMessageBox: PropTypes.bool,
+  renderMessage: PropTypes.func.isRequired,
+  renderMessageFooter: PropTypes.func,
+  renderMessageHeader: PropTypes.func,
+  messageBoxCustomStyle: PropTypes.object,
+  isFailedMessage: PropTypes.bool,
+  /*MessageBox Props End */
+
+  /* MessageAction Props Start */
+  messageActions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([REPLY, COPY, DOWNLOAD, CREATE_TICKET, RESEND, DELETE, FORWARD])]).isRequired,
+    displayText: PropTypes.string,
+    renderFunction: PropTypes.func,
+    iconTitle: PropTypes.string
+  })),
+  renderSecondaryActions: PropTypes.func,
+  actionsDefaultShowCount: PropTypes.number,
+  actionIconCustomStyle: PropTypes.object,
+  moreActionItemCustomStyle: PropTypes.object,
+  onSelectAction: PropTypes.func,
+  messageActionCustomStyle: PropTypes.object,
+  moreActionPopupCustomStyle: PropTypes.object,
+  /* MessageAction Props End */
+
+  /* MessageStatus Props Start */
+  messageStatus: PropTypes.oneOf([SENT, SAVED, QUEUED, DELIVERED, READ, UNSENT, FAILED, OUTGOING]),
+  messageStatusCustomStyle: PropTypes.object,
+  statusTitle: PropTypes.string
+  /*MessageStatus Props End */
+};
+
+export default messagePropTypes;

package/es/MessageAction/MessageAction.js

@@ -20,7 +20,8 @@ export default function MessageAction(props) {
     isShowInMore,
     iconTitle,
     actionIconCustomStyle,
-    moreItemCustomStyle
+    moreItemCustomStyle,
+    closePopup
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, isShowInMore ? /*#__PURE__*/React.createElement(MoreActionItem, {
     displayText: displayText,
@@ -29,7 +30,8 @@ export default function MessageAction(props) {
     index: index,
     customStyle: moreItemCustomStyle,
     onClick: onClick,
-    renderIcon: renderIcon
+    renderIcon: renderIcon,
+    closePopup: closePopup
   }) : /*#__PURE__*/React.createElement(ActionIcon, {
     renderIcon: renderIcon,
     customStyle: actionIconCustomStyle,

package/es/MessageActions/MessageActions.js

@@ -16,7 +16,7 @@ import messageActionsPropTypes from './props/propTypes';
 import constantProps from './props/propConstants';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import cssJSLogic from './css/cssJSLogic';
 

package/es/MessageActionsMore/MessageActionsMore.js

@@ -13,8 +13,8 @@ import messageActionsMorePropTypes from './props/propTypes';
 import { MSG_ACTION_POPUP_PORTAL } from '../constants';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
-import cssJSLogic from './css/cssJsLogic';
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
 
 /** ** Hooks *** */
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
@@ -35,6 +35,7 @@ function MessageActionsMoreComp(props) {
     isPopupReady,
     isPopupOpen,
     removeClose,
+    closePopupOnly,
     isAbsolutePositioningNeeded,
     positionsOffset
   } = props;
@@ -74,7 +75,8 @@ function MessageActionsMoreComp(props) {
     return renderHandler(renderFunction)({
       id,
       isShowInMore: true,
-      action
+      action,
+      closePopup: closePopupOnly
     }); // id, isRenderInMorePopup
   })) : null);
 }

package/es/MessageAvatar/MessageAvatar.js

@@ -1,21 +1,21 @@
 /** ** Libraries *** */
-import React from "react";
+import React from 'react';
 
 /** ** Components *** */
-import Avatar from "@zohodesk/components/es/Avatar/Avatar";
-import { Container, Box } from "@zohodesk/components/es/Layout";
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 
 /** ** CSS *** */
-import style from "./css/MessageAvatar.module.css";
+import style from './css/MessageAvatar.module.css';
 
 /** ** Methods *** */
-import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
-import renderHandler from "@zohoim/chat-components-utils/es/renderHandler";
-import cssJSLogic from "./css/cssJSLogic";
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
 
 /** ** Constants *** */
-import messageAvatarDefaultProps from "./props/defaultProps";
-import messageAvatarPropTypes from "./props/propTypes";
+import messageAvatarDefaultProps from './props/defaultProps';
+import messageAvatarPropTypes from './props/propTypes';
 export default function MessageAvatar(props) {
   const {
     src,

package/es/MessageAvatar/props/defaultProps.js

@@ -2,8 +2,10 @@
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
 const messageAvatarDefaultProps = {
   customStyle: dummyObject,
-  name: 'RAVI KUMAR',
+  name: '',
+  //'RAVI KUMAR',
   size: 'small',
-  iconTitle: 'RK'
+  iconTitle: '' //'RAVI KUMAR',
 };
+
 export default messageAvatarDefaultProps;

package/es/MessageBox/MessageBox.js

@@ -11,7 +11,7 @@ import messageBoxDefaultProps from './props/defaultProps';
 import messageBoxPropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
@@ -31,6 +31,7 @@ function MessageBox(props) {
   /* css classnames added based on logic */
   const {
     messageBoxClass,
+    messageBoxInner,
     messageContentWrapperClass,
     messageHeaderWrapperClass,
     messageFooterWrapperClass,
@@ -44,7 +45,9 @@ function MessageBox(props) {
   const messageStatus = renderHandler(renderMessageStatus)();
   return /*#__PURE__*/React.createElement("div", {
     className: messageBoxClass
-  }, /*#__PURE__*/React.createElement("div", null, messageHeader ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: messageBoxInner
+  }, messageHeader ? /*#__PURE__*/React.createElement("div", {
     className: messageHeaderWrapperClass
   }, messageHeader) : null, messageConent ? /*#__PURE__*/React.createElement("div", {
     className: messageContentWrapperClass