@zohoim/chat-components 1.1.4 → 1.1.6-beta.1

package/lib/MessageActions/props/propTypes.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _messageActionConstants = require("@zohoim/chat-components-utils/es/constants/messageActionConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var messageActionsPropTypes = {
+  actions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    displayText: _propTypes["default"].string.isRequired,
+    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].oneOf(Object.values(_messageActionConstants.defaultMessageActions))]).isRequired,
+    iconTitle: _propTypes["default"].string,
+    isDisabled: _propTypes["default"].bool,
+    renderFunction: _propTypes["default"].func
+  })).isRequired,
+  onSelect: _propTypes["default"].func.isRequired,
+  onMouseEnter: _propTypes["default"].func,
+  customProps: _propTypes["default"].shape({
+    actionIconWrapperProps: _propTypes["default"].object,
+    messageActionProps: _propTypes["default"].object,
+    messageActionsWrapperProps: _propTypes["default"].object
+  }),
+  customStyle: _propTypes["default"].object,
+  defaultShowCount: _propTypes["default"].number,
+  renderSecondaryActions: _propTypes["default"].func,
+  setRetainMessageActions: _propTypes["default"].func,
+  moreTitle: _propTypes["default"].string
+};
+var _default = messageActionsPropTypes;
+exports["default"] = _default;

package/lib/MessageActionsMore/MessageActionsMore.js

@@ -0,0 +1,128 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Popup = _interopRequireDefault(require("@zohodesk/components/es/Popup/Popup"));
+
+var _DropBox = _interopRequireDefault(require("@zohodesk/components/es/DropBox/DropBox"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _constants = require("../constants");
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _MessageActionsMoreModule = _interopRequireDefault(require("./css/MessageActionsMore.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** ** Libraries *** */
+
+/** ** Components *** */
+
+/** ** Constants *** */
+
+/** ** Methods *** */
+
+/** ** Hooks *** */
+
+/** ** Styles *** */
+function MessageActionsMoreComp(props) {
+  var actions = props.actions,
+      renderMoreIcon = props.renderMoreIcon,
+      customStyle = props.customStyle,
+      setRetainMessageActions = props.setRetainMessageActions,
+      popupSize = props.popupSize,
+      defaultPopupPosition = props.defaultPopupPosition,
+      getTargetRef = props.getTargetRef,
+      getContainerRef = props.getContainerRef,
+      position = props.position,
+      togglePopup = props.togglePopup,
+      isPopupReady = props.isPopupReady,
+      isPopupOpen = props.isPopupOpen,
+      removeClose = props.removeClose,
+      closePopupOnly = props.closePopupOnly,
+      isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
+      positionsOffset = props.positionsOffset;
+  var moreIcon = (0, _renderHandler["default"])(renderMoreIcon)({
+    isActive: isPopupReady
+  });
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_MessageActionsMoreModule["default"], customStyle);
+  var popupClass = (0, _react.useMemo)(function () {
+    return {
+      customDropBox: newStyle.popup,
+      customMobileDropBox: newStyle.mobilePopup,
+      customDropBoxWrap: newStyle.popupWrapper,
+      customMobileDropBoxWrap: newStyle.mobilePopupWrapper
+    };
+  }, [newStyle.popup, newStyle.mobilePopup, newStyle.popupWrapper, newStyle.mobilePopupWrapper]);
+
+  var handleTogglePopup = function handleTogglePopup(e) {
+    togglePopup(e, defaultPopupPosition);
+  };
+
+  var renderActions = (0, _react.useCallback)(function () {
+    return actions.map(function (action) {
+      var id = action.id,
+          renderFunction = action.renderFunction;
+      return (0, _renderHandler["default"])(renderFunction)({
+        id: id,
+        isShowInMore: true,
+        action: action,
+        setRetainMessageActions: setRetainMessageActions,
+        closePopup: closePopupOnly
+      }); // id, isRenderInMorePopup
+    });
+  }, [actions, closePopupOnly, setRetainMessageActions]);
+  var isRenderPopup = !!(moreIcon && isPopupOpen);
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: newStyle.morePopupContainer
+  }, moreIcon ? /*#__PURE__*/_react["default"].createElement("span", {
+    ref: getTargetRef,
+    onClick: handleTogglePopup
+  }, moreIcon) : null, isRenderPopup ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+    boxPosition: position,
+    customClass: popupClass,
+    customStyle: _emptyConstants.dummyObject,
+    getRef: getContainerRef,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    isActive: isPopupReady,
+    isAnimate: true,
+    isArrow: false,
+    onClick: removeClose,
+    portalId: _constants.MSG_ACTION_POPUP_PORTAL,
+    positionsOffset: positionsOffset,
+    size: popupSize // isModel
+
+  }, renderActions()) : null);
+}
+
+var MessageActionsMore = (0, _Popup["default"])(MessageActionsMoreComp, undefined, undefined, {
+  isAbsolutePositioningNeeded: true
+});
+MessageActionsMoreComp.defaultProps = _defaultProps["default"];
+MessageActionsMoreComp.propTypes = _propTypes["default"];
+MessageActionsMore.defaultProps = _defaultProps["default"];
+MessageActionsMore.propTypes = _propTypes["default"];
+MessageActionsMore.displayName = 'MessageActionsMore';
+var _default = MessageActionsMore;
+exports["default"] = _default;

package/lib/MessageActionsMore/css/MessageActionsMore.module.css

@@ -0,0 +1,24 @@
+.container {
+  display: inline-block;
+}
+
+.morePopupContainer {
+  composes: container;
+  position: relative;
+}
+
+.popup {
+  padding: var(--zd_size10) 0 ;
+}
+
+.popupWrapper {
+  composes: container;
+}
+
+.mobilePopup {
+  composes: container;
+}
+
+.mobilePopupWrapper {
+  composes: container;
+}

package/lib/MessageActionsMore/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MessageActionsMore", {
+  enumerable: true,
+  get: function get() {
+    return _MessageActionsMore["default"];
+  }
+});
+
+var _MessageActionsMore = _interopRequireDefault(require("./MessageActionsMore"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/MessageActionsMore/props/defaultProps.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var messageActionsMoreDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  actions: _emptyConstants.dummyArray,
+  popupSize: 'small',
+  defaultPopupPosition: 'bottomCenter'
+};
+var _default = messageActionsMoreDefaultProps;
+exports["default"] = _default;

package/lib/MessageActionsMore/props/propTypes.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _popupPropConstants = require("../../constants/propConstants/popupPropConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var messageActionsMorePropTypes = {
+  actions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string.isRequired,
+    renderFunction: _propTypes["default"].func
+  })).isRequired,
+  renderMoreIcon: _propTypes["default"].func.isRequired,
+  setRetainMessageActions: _propTypes["default"].func,
+  customStyle: _propTypes["default"].object,
+  popupSize: _propTypes["default"].oneOf(_popupPropConstants.popupSize),
+  defaultPopupPosition: _propTypes["default"].oneOf(_popupPropConstants.popupPosition)
+};
+var _default = messageActionsMorePropTypes;
+exports["default"] = _default;

package/lib/MessageActionsWrapper/MessageActionsWrapper.js

@@ -0,0 +1,91 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MessageActionsWrapper;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _MessageActionsMore = _interopRequireDefault(require("../MessageActionsMore/MessageActionsMore"));
+
+var _useMessageActionsWrapper = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/MessageActionsWrapper/useMessageActionsWrapper"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _MessageActionsWrapperModule = _interopRequireDefault(require("./css/MessageActionsWrapper.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function MessageActionsWrapper(props) {
+  var actions = props.actions,
+      renderMoreIcon = props.renderMoreIcon,
+      defaultShowCount = props.defaultShowCount,
+      customStyle = props.customStyle,
+      customProps = props.customProps,
+      setRetainMessageActions = props.setRetainMessageActions;
+  var _customProps$messageA = customProps.messageActionsMoreProps,
+      messageActionsMoreProps = _customProps$messageA === void 0 ? _emptyConstants.dummyObject : _customProps$messageA;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_MessageActionsWrapperModule["default"], customStyle);
+
+  var _useMessageActionsWra = (0, _useMessageActionsWrapper["default"])(actions, defaultShowCount),
+      isShowMoreIcon = _useMessageActionsWra.isShowMore,
+      _useMessageActionsWra2 = _useMessageActionsWra.actions,
+      defaultActions = _useMessageActionsWra2 === void 0 ? _emptyConstants.dummyArray : _useMessageActionsWra2,
+      _useMessageActionsWra3 = _useMessageActionsWra.moreActions,
+      moreActions = _useMessageActionsWra3 === void 0 ? _emptyConstants.dummyArray : _useMessageActionsWra3;
+
+  var renderDefaultActions = (0, _react.useCallback)(function () {
+    return defaultActions.map(function (action) {
+      var id = action.id,
+          renderFunction = action.renderFunction;
+      return (0, _renderHandler["default"])(renderFunction)({
+        id: id,
+        isShowInMore: false,
+        setRetainMessageActions: setRetainMessageActions,
+        action: action
+      }); // id, isRenderInMorePopup
+    });
+  }, [defaultActions, setRetainMessageActions]);
+  var renderMoreActions = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_MessageActionsMore["default"], _extends({
+      actions: moreActions,
+      renderMoreIcon: renderMoreIcon,
+      setRetainMessageActions: setRetainMessageActions
+    }, messageActionsMoreProps));
+  }, [moreActions, renderMoreIcon, messageActionsMoreProps, setRetainMessageActions]);
+  var renderRow = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      alignBox: "row",
+      className: newStyle.row,
+      isCover: false
+    }, renderDefaultActions(), isShowMoreIcon ? renderMoreActions() : null);
+  }, [renderDefaultActions, renderMoreActions, isShowMoreIcon]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.messageActionsWrapper
+  }, renderRow(defaultActions, isShowMoreIcon));
+}
+
+MessageActionsWrapper.defaultProps = _defaultProps["default"];
+MessageActionsWrapper.propTypes = _propTypes["default"];
+MessageActionsWrapper.displayName = 'MessageActionsWrapper';

package/lib/MessageActionsWrapper/css/MessageActionsWrapper.module.css

@@ -0,0 +1,7 @@
+.messageActionsWrapper {
+  /* Use this class for message actions customization */
+}
+
+.row{
+  gap: var(--zd_size2) ;
+}

package/lib/MessageActionsWrapper/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MessageActionsWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _MessageActionsWrapper["default"];
+  }
+});
+
+var _MessageActionsWrapper = _interopRequireDefault(require("./MessageActionsWrapper"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/MessageActionsWrapper/props/defaultProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _messageActionConstants = require("@zohoim/chat-components-utils/es/constants/messageActionConstants");
+
+/** ** Constants *** */
+var messageActionsWrapperDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  customProps: _emptyConstants.dummyObject,
+  defaultShowCount: _messageActionConstants.actionsDefaultShowCount
+};
+var _default = messageActionsWrapperDefaultProps;
+exports["default"] = _default;

package/lib/MessageActionsWrapper/props/propTypes.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var messageActionsWrapperPropTypes = {
+  actions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string.isRequired,
+    renderFunction: _propTypes["default"].func
+  })).isRequired,
+  customProps: _propTypes["default"].shape({
+    messageActionsMoreProps: _propTypes["default"].object
+  }),
+  customStyle: _propTypes["default"].object,
+  defaultShowCount: _propTypes["default"].number,
+  renderMoreIcon: _propTypes["default"].func,
+  setRetainMessageActions: _propTypes["default"].func
+};
+var _default = messageActionsWrapperPropTypes;
+exports["default"] = _default;

package/lib/MessageAvatar/MessageAvatar.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MessageAvatar;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Avatar = _interopRequireDefault(require("@zohodesk/components/es/Avatar/Avatar"));
+
+var _MessageAvatarModule = _interopRequireDefault(require("./css/MessageAvatar.module.css"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Components *** */
+
+/** ** CSS *** */
+
+/** ** Hooks *** */
+
+/** ** Methods *** */
+
+/** ** Constants *** */
+function MessageAvatar(props) {
+  var src = props.src,
+      alternateSrc = props.alternateSrc,
+      title = props.title,
+      size = props.size,
+      name = props.name,
+      customStyle = props.customStyle,
+      iconTitle = props.iconTitle,
+      renderIcon = props.renderIcon;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_MessageAvatarModule["default"], customStyle);
+  var icon = (0, _renderHandler["default"])(renderIcon)();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.msgAvatar
+  }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+    alternateSrc: alternateSrc,
+    customClass: newStyle.avatar,
+    name: name,
+    size: size,
+    src: src,
+    title: title
+  }), icon ? /*#__PURE__*/_react["default"].createElement("span", {
+    className: newStyle.icon,
+    "data-title": iconTitle
+  }, icon) : null);
+}
+
+MessageAvatar.defaultProps = _defaultProps["default"];
+MessageAvatar.propTypes = _propTypes["default"];

package/lib/MessageAvatar/css/MessageAvatar.module.css

@@ -0,0 +1,23 @@
+.msgAvatar {
+  position: relative;
+  display: inline-flex;
+}
+
+.icon {
+  position: absolute;
+  bottom: calc( var(--zd_size6) * -1 ) ;
+}
+
+[dir=ltr] .icon {
+  right: calc( var(--zd_size7) * -1 ) ;
+}
+
+[dir=rtl] .icon {
+  left: calc( var(--zd_size7) * -1 ) ;
+}
+
+.avatar {
+  /* Use this class name for external customization  */
+  width: var(--zd_size32) ;
+  height: var(--zd_size32) ;
+}

package/lib/MessageAvatar/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MessageAvatar", {
+  enumerable: true,
+  get: function get() {
+    return _MessageAvatar["default"];
+  }
+});
+
+var _MessageAvatar = _interopRequireDefault(require("./MessageAvatar"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/MessageAvatar/props/defaultProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var messageAvatarDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  size: 'medium'
+};
+var _default = messageAvatarDefaultProps;
+exports["default"] = _default;

package/lib/MessageAvatar/props/propTypes.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var messageAvatarPropTypes = {
+  src: _propTypes["default"].string.isRequired,
+  alternateSrc: _propTypes["default"].string,
+  customStyle: _propTypes["default"].object,
+  iconTitle: _propTypes["default"].string,
+  name: _propTypes["default"].string,
+  renderIcon: _propTypes["default"].func,
+  size: _propTypes["default"].oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  title: _propTypes["default"].string
+};
+var _default = messageAvatarPropTypes;
+exports["default"] = _default;

package/lib/MessageBox/MessageBox.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MessageBox;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _MessageBoxModule = _interopRequireDefault(require("./css/MessageBox.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Methods *** */
+
+/** ** Components *** */
+
+/** ** Styles *** */
+function MessageBox(props) {
+  var renderMessageContent = props.renderMessage,
+      renderMessageFooter = props.renderMessageFooter,
+      renderMessageHeader = props.renderMessageHeader,
+      customStyle = props.customStyle,
+      renderMessageStatus = props.renderMessageStatus,
+      isFailed = props.isFailed,
+      isIncoming = props.isIncoming,
+      isOutgoing = props.isOutgoing;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_MessageBoxModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed,
+    isIncoming: isIncoming,
+    isOutgoing: isOutgoing
+  }, newStyle),
+      messageBoxClass = _cssJSLogic.messageBoxClass;
+  /* Render Childrens */
+
+
+  var messageHeader = (0, _renderHandler["default"])(renderMessageHeader)();
+  var messageConent = (0, _renderHandler["default"])(renderMessageContent)();
+  var messageFooter = (0, _renderHandler["default"])(renderMessageFooter)();
+  var messageStatus = (0, _renderHandler["default"])(renderMessageStatus)();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: messageBoxClass
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.messageBoxInner,
+    flexible: true
+  }, messageHeader ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.messageHeaderWrapper
+  }, messageHeader) : null, messageConent ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.messageContentWrapper
+  }, messageConent) : null, messageFooter ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.messageFooterWrapper
+  }, messageFooter) : null), messageStatus ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.messageStatusWrapper
+  }, messageStatus) : null);
+}
+
+MessageBox.propTypes = _propTypes["default"];
+MessageBox.defaultProps = _defaultProps["default"];
+MessageBox.displayName = 'MessageBox';