@zohoim/chat-components 0.0.6 → 0.0.7

package/es/MessageBox/css/MessageBox.module.css

@@ -24,6 +24,12 @@
   border-radius: var(--messageBox-border_radius);
 }
 
+.messageBoxInner{
+  flex:1;
+  min-width: 0;
+  min-height: 0;
+}
+
 .messageContentWrapper {
   /*Use this class for message content customization*/
 }
@@ -47,3 +53,11 @@
 .failedMessageBox {
   background-color: var(--imlib_chat_components_messageBox_failed_bg_color);
 }
+
+.incomingMessageBox {
+  background-color: var(--imlib_chat_components_messageBox_incoming_bg_color);
+}
+
+.outgoingMessageBox {
+  background-color: var(--imlib_chat_components_messageBox_outgoing_bg_color);
+}

package/es/MessageBox/css/cssJSLogic.js

@@ -1,9 +1,19 @@
 /** ** Methods *** */
 import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(props, style) {
+  const {
+    isFailed,
+    isIncoming,
+    isOutgoing
+  } = props;
   const messageBoxClass = compileClassNames({
     [style.messageBoxContainer]: true,
-    [style.failedMessageBox]: props.isFailed === true
+    [style.failedMessageBox]: isFailed,
+    [style.incomingMessageBox]: isIncoming && !isFailed,
+    [style.outgoingMessageBox]: isOutgoing && !isFailed
+  });
+  const messageBoxInner = compileClassNames({
+    [style.messageBoxInner]: true
   });
   const messageContentWrapperClass = compileClassNames({
     [style.messageContentWrapper]: true
@@ -19,6 +29,7 @@ export default function cssJSLogic(props, style) {
   });
   return {
     messageBoxClass,
+    messageBoxInner,
     messageContentWrapperClass,
     messageHeaderWrapperClass,
     messageFooterWrapperClass,

package/es/MessageBox/props/defaultProps.js

@@ -2,5 +2,7 @@
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
 export default {
   customStyle: dummyObject,
-  isFailed: false
+  isFailed: false,
+  isIncoming: false,
+  isOutgoing: true
 };

package/es/MessageBox/props/propTypes.js

@@ -6,5 +6,7 @@ export default {
   renderMessageStatus: PropTypes.func,
   renderMessage: PropTypes.func.isRequired,
   customStyle: PropTypes.object,
-  isFailed: PropTypes.bool
+  isFailed: PropTypes.bool,
+  isIncoming: PropTypes.bool,
+  isOutgoing: PropTypes.bool
 };

package/es/MessageBoxFooter/MessageBoxFooter.js

@@ -14,7 +14,7 @@ import messageBoxFooterPropTypes from './props/propTypes';
 import style from './css/MessageBoxFooter.module.css';
 
 /** ** 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';
 function MessageBoxFooter(props) {
   const {

package/es/MessageBubble/MessageBubble.js

@@ -2,23 +2,23 @@
 /* eslint-disable sort-imports */
 
 /** ** Libraries *** */
-import React from "react";
+import React from 'react';
 
 /** ** Hooks *** */
-import { useMessageBubbleAction } from "@zohoim/chat-components-hooks/es/MessageBubble";
+import { useMessageBubbleAction } from '@zohoim/chat-components-hooks/es/MessageBubble';
 
 /** ** Constants *** */
-import messageBubbleDefaultProps from "./props/defaultProps";
-import messageBubblePropTypes from "./props/propTypes";
-import constantProps from "./props/propConstants";
+import messageBubbleDefaultProps from './props/defaultProps';
+import messageBubblePropTypes from './props/propTypes';
+import constantProps from './props/propConstants';
 
 /** ** 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';
 
 /** ** Styles *** */
-import style from "./css/MessageBubble.module.css";
+import style from './css/MessageBubble.module.css';
 export default function MessageBubble(props) {
   const {
     renderMessageBox,
@@ -75,4 +75,4 @@ export default function MessageBubble(props) {
 MessageBubble.propTypes = messageBubblePropTypes;
 MessageBubble.defaultProps = messageBubbleDefaultProps;
 MessageBubble.constantProps = constantProps;
-MessageBubble.displayName = "MessageBubble";
+MessageBubble.displayName = 'MessageBubble';

package/es/MessageWrapper/MessageWrapper.js

@@ -0,0 +1,37 @@
+/* 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 messageWrapperDefaultProps from './props/defaultProps';
+import messageWrapperPropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/MessageWrapper.module.css';
+export default function MessageWrapper(props) {
+  const {
+    customStyle
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imMessageClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: imMessageClass
+  }, "Test");
+}
+MessageWrapper.propTypes = messageWrapperPropTypes;
+MessageWrapper.defaultProps = messageWrapperDefaultProps;
+MessageWrapper.displayName = 'MessageWrapper';

package/es/MessageWrapper/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/MessageWrapper/index.js

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

package/es/MessageWrapper/props/defaultProps.js

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

package/es/MessageWrapper/props/propTypes.js

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

package/es/MoreActionItem/MoreActionItem.js

@@ -21,7 +21,7 @@ import ListContainer from '@zohodesk/components/es/ListItem/ListContainer';
 
 /** ** Methods *** */
 import cssJSLogic from './css/cssJSLogic';
-import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 export default function MoreActionItem(props) {
   const {
     displayText,
@@ -30,17 +30,17 @@ export default function MoreActionItem(props) {
     index,
     customStyle,
     renderIcon,
-    neddIcon
+    needIcon
   } = props;
-  function handleClick(id, value, index, e) {
+  function handleClick(e) {
     const {
-      onClick
+      onClick,
+      closePopup
     } = props;
+    closePopup && closePopup(e);
     onClick && onClick({
       e,
-      id,
-      value,
-      index
+      id
     });
   }
 
@@ -65,9 +65,9 @@ export default function MoreActionItem(props) {
   }, /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     align: "vertical"
-  }, /*#__PURE__*/React.createElement(Box, {
+  }, needIcon ? /*#__PURE__*/React.createElement(Box, {
     className: iconClass
-  }, neddIcon ? icon : null), /*#__PURE__*/React.createElement(Box, {
+  }, icon) : null, /*#__PURE__*/React.createElement(Box, {
     className: textClass
   }, displayText)));
 }

package/es/MoreActionItem/props/defaultProps.js

@@ -6,6 +6,6 @@ const moreActionItemDefaultProps = {
   id: '',
   index: 0,
   customStyle: dummyObject,
-  neddIcon: true
+  needIcon: true
 };
 export default moreActionItemDefaultProps;

package/es/MoreActionItem/props/propTypes.js

@@ -7,6 +7,6 @@ const moreActionItemPropTypes = {
   index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   customStyle: PropTypes.object,
   renderIcon: PropTypes.func,
-  neddIcon: PropTypes.bool
+  needIcon: PropTypes.bool
 };
 export default moreActionItemPropTypes;

package/es/ReplyBubble/ReplyBubble.js

@@ -0,0 +1,41 @@
+/* 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 replyBubbleDefaultProps from './props/defaultProps';
+import replyBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/ReplyBubble.module.css';
+export default function ReplyBubble(props) {
+  const {
+    customStyle,
+    headerCustomStyle,
+    time,
+    replyText,
+    timeCustomStyle
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    replyBubbleClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: replyBubbleClass
+  }, "Working On this...");
+}
+ReplyBubble.propTypes = replyBubblePropTypes;
+ReplyBubble.defaultProps = replyBubbleDefaultProps;
+ReplyBubble.displayName = 'ReplyBubble';

package/es/ReplyBubble/css/cssJSLogic.js

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

package/es/ReplyBubble/index.js

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

package/es/ReplyBubble/props/defaultProps.js

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

package/es/ReplyBubble/props/propTypes.js

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

package/es/ReplyBubbleHeader/ReplyBubbleHeader.js

@@ -0,0 +1,53 @@
+/* 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 replyBubbleHeaderDefaultProps from './props/defaultProps';
+import replyBubbleHeaderPropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/ReplyBubbleHeader.module.css';
+
+/** ** Components *** */
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import ReplyIcon from '@zohodesk/icon/es/general/Reply';
+import IMDateTime from '../IMDateTime/IMDateTime';
+export default function ReplyBubbleHeader(props) {
+  const {
+    customStyle,
+    replyText,
+    time,
+    timeCustomStyle
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    replyBubbleHeaderClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: replyBubbleHeaderClass
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row"
+  }, /*#__PURE__*/React.createElement(ReplyIcon, null), /*#__PURE__*/React.createElement(Box, null, replyText))), /*#__PURE__*/React.createElement(IMDateTime, {
+    customStyle: timeCustomStyle,
+    value: time
+  }));
+}
+ReplyBubbleHeader.propTypes = replyBubbleHeaderPropTypes;
+ReplyBubbleHeader.defaultProps = replyBubbleHeaderDefaultProps;
+ReplyBubbleHeader.displayName = 'ReplyBubbleHeader';

package/es/ReplyBubbleHeader/css/cssJSLogic.js

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

package/es/ReplyBubbleHeader/index.js

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

package/es/ReplyBubbleHeader/props/defaultProps.js

@@ -0,0 +1,9 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const replyBubbleHeaderDefaultProps = {
+  customStyle: dummyObject,
+  replyText: 'Reply',
+  time: '',
+  timeCustomStyle: dummyObject
+};
+export default replyBubbleHeaderDefaultProps;

package/es/ReplyBubbleHeader/props/propTypes.js

@@ -0,0 +1,9 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const replyBubbleHeaderPropTypes = {
+  customStyle: PropTypes.object,
+  replyText: PropTypes.string,
+  time: PropTypes.string,
+  timeCustomStyle: PropTypes.object
+};
+export default replyBubbleHeaderPropTypes;

package/es/TextBubble/TextBubble.js

@@ -0,0 +1,56 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useTextBubble from '@zohoim/chat-components-hooks/es/TextBubble/useTextBubble';
+
+/** ** Constants *** */
+import textBubbleDefaultProps from './props/defaultProps';
+import textBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/TextBubble.module.css';
+export default function TextBubble(props) {
+  const {
+    customStyle
+  } = props;
+  const {
+    moreText,
+    onClickMore,
+    message
+  } = useTextBubble(props);
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    textBubbleClass,
+    moreTextClass,
+    textBubbleWrapperClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: textBubbleWrapperClass
+  }, /*#__PURE__*/React.createElement("span", {
+    className: textBubbleClass
+    // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
+    ,
+    dangerouslySetInnerHTML: {
+      // __html: HTMLPurifier.sanitize(message)
+      __html: message
+    }
+  }), moreText ? /*#__PURE__*/React.createElement("div", {
+    className: moreTextClass,
+    onClick: onClickMore
+  }, moreText) : null);
+}
+TextBubble.propTypes = textBubblePropTypes;
+TextBubble.defaultProps = textBubbleDefaultProps;
+TextBubble.displayName = 'TextBubble';

package/es/TextBubble/css/TextBubble.module.css

@@ -0,0 +1 @@
+

package/es/TextBubble/css/cssJSLogic.js

@@ -0,0 +1,18 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const textBubbleClass = compileClassNames({
+    [style.textBubble]: true
+  });
+  const textBubbleWrapperClass = compileClassNames({
+    [style.textBubbleWrapper]: true
+  });
+  const moreTextClass = compileClassNames({
+    [style.moreText]: true
+  });
+  return {
+    textBubbleClass,
+    moreTextClass,
+    textBubbleWrapperClass
+  };
+}

package/es/TextBubble/index.js

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

package/es/TextBubble/props/defaultProps.js

@@ -0,0 +1,9 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const textBubbleDefaultProps = {
+  customStyle: dummyObject,
+  moreText: 'See More',
+  message: '',
+  isShowMoreText: false
+};
+export default textBubbleDefaultProps;

package/es/TextBubble/props/propTypes.js

@@ -0,0 +1,10 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const textBubblePropTypes = {
+  customStyle: PropTypes.object,
+  message: PropTypes.string,
+  onClickMore: PropTypes.func,
+  isShowMoreText: PropTypes.string,
+  moreText: PropTypes.string
+};
+export default textBubblePropTypes;

package/es/Theme/DeskAssets.js

@@ -0,0 +1,53 @@
+// Component Package default mode & themes
+import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css';
+
+// Component Package dark mode & themes
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css';
+
+/* pure dark mode & theme css */
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/mode/pureDarkMode.module.css';
+
+/** ** Desk Components Assets *** */
+import '@zohodesk/variables/assets/colorVariables.module.css';
+import '@zohodesk/variables/assets/dotVariables.module.css';
+import '@zohodesk/variables/assets/sizeVariables.module.css';
+import '@zohodesk/variables/assets/fontsizeVariables.module.css';
+import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+import '@zohodesk/variables/assets/transitionVariables.module.css';
+import '@zohodesk/variables/assets/no_transitionVariables.module.css';
+export default function DeskAssets(props) {
+  const {
+    children
+  } = props;
+  return children || null;
+}