@zohoim/chat-components 0.0.10 → 0.0.13

package/es/ActionIcon/ActionIcon.js

@@ -47,9 +47,9 @@ export default function ActionIcon(props) {
     id
   });
   return icon ? /*#__PURE__*/React.createElement("div", {
-    onClick: onClick,
     className: actionIconClass,
-    "data-title": title
+    "data-title": title,
+    onClick: onClick
   }, icon) : null;
 }
 ActionIcon.propTypes = actionIconPropTypes;

package/es/ArticleBubble/ArticleBubble.js

@@ -2,30 +2,32 @@
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
-import React from "react";
+import React from 'react';
 
 /** ** Hooks *** */
-import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
 /** ** Constants *** */
-import articleBubbleDefaultProps from "./props/defaultProps";
-import articleBubblePropTypes from "./props/propTypes";
+import articleBubbleDefaultProps from './props/defaultProps';
+import articleBubblePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
-import cssJSLogic from "./css/cssJSLogic";
-import { Container, Box } from "@zohodesk/components/es/Layout";
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Components *** */
+import { Container } from '@zohodesk/components/es/Layout';
 
 /** ** Styles *** */
-import style from "./css/ArticleBubble.module.css";
-import ArticleIcon from "../icons/iconSrc/common/Article";
+import style from './css/ArticleBubble.module.css';
+
+/** ** Icons *** */
+import ArticleIcon from '../icons/iconSrc/common/Article';
 export default function ArticleBubble(props) {
   const {
     customStyle,
     bubbleInfo,
     title,
-    summary,
-    articleURL
+    summary
   } = props;
 
   /* External customization */
@@ -43,10 +45,10 @@ export default function ArticleBubble(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: articleBubbleClass
   }, /*#__PURE__*/React.createElement(Container, {
-    isCover: false,
-    alignBox: "row",
     align: "vertical",
-    className: headerClass
+    alignBox: "row",
+    className: headerClass,
+    isCover: false
   }, /*#__PURE__*/React.createElement("div", {
     className: iconClass
   }, /*#__PURE__*/React.createElement(ArticleIcon, {
@@ -65,4 +67,4 @@ export default function ArticleBubble(props) {
 }
 ArticleBubble.propTypes = articleBubblePropTypes;
 ArticleBubble.defaultProps = articleBubbleDefaultProps;
-ArticleBubble.displayName = "ArticleBubble";
+ArticleBubble.displayName = 'ArticleBubble';

package/es/ArticleBubble/css/ArticleBubble.module.css

@@ -1,40 +1,48 @@
 .icon {
-    display: flex;
+  display: flex;
 }
 
-.articleWrapper { 
-    height: 80px;
-    padding: 8px 10px;
-    background-color: var(--imlib_chat_components_articleBubble_bg_color);
-    border-radius: 3px;
-    cursor: pointer;
-    border: 1px solid #ebf0f5;
-    margin: 4px 0 2px;
+.articleWrapper {
+  padding: var(--imlib_size_8) var(--imlib_size_10);
+  background-color: var(--imlib_chat_components_articleBubble_bg_color);
+  border-radius: var(--imlib_size_3);
+  cursor: pointer;
+  border: var(--imlib_size_1) solid
+    var(--imlib_chat_components_articleBubble_border_color);
+  margin: var(--imlib_size_4) 0 var(--imlib_size_2);
 }
 
 .title {
-    color: #000;
-    font-size: 15px;
-    line-height: 1.5;
-    overflow: hidden;
-    white-space: nowrap;
-    word-wrap: normal;
-    text-overflow: ellipsis;
+  color: var(--imlib_chat_components_articleBubble_color);
+  font-size: var(--imlib_size_15);
+  line-height: 1.5;
+  overflow: hidden;
+  white-space: nowrap;
+  word-wrap: normal;
+  text-overflow: ellipsis;
 }
 
 .summary {
-    color: #000;
-    font-size: 13px;
-    line-height: 1.5;
-    max-height: 40px;
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    word-break: break-word;
-    overflow: hidden;
+  color: var(--imlib_chat_components_articleBubble_color);
+  font-size: var(--imlib_size_13);
+  line-height: 1.5;
+  max-height: var(--imlib_size_40);
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  overflow: hidden;
 }
 
-.articleIcon{
-    width:16px;
-    height: 16px;
-}
+.articleIcon {
+  width: var(--imlib_size_16);
+  height: var(--imlib_size_16);
+}
+
+.articleIcon :global(.path-0) {
+  fill: var(--imlib_chat_components_imIntegrationIcon_path0_color);
+}
+
+.articleIcon :global(.path-1) {
+  fill: var(--imlib_chat_components_imIntegrationIcon_path1_color);
+}

package/es/AttachmentBubble/AttachmentBubble.js

@@ -2,23 +2,25 @@
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
-import React from "react";
+import React from 'react';
 
 /** ** Hooks *** */
-import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
 /** ** Constants *** */
-import attachmentBubbleDefaultProps from "./props/defaultProps";
-import attachmentBubblePropTypes from "./props/propTypes";
+import attachmentBubbleDefaultProps from './props/defaultProps';
+import attachmentBubblePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
-import cssJSLogic from "./css/cssJSLogic";
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
-import style from "./css/AttachmentBubble.module.css";
-import AttachmentBubbleInfo from "../AttachmentBubbleInfo/AttachmentBubbleInfo";
-import { Container, Box } from "@zohodesk/components/es/Layout";
+import style from './css/AttachmentBubble.module.css';
+
+/** ** Components *** */
+import AttachmentBubbleInfo from '../AttachmentBubbleInfo/AttachmentBubbleInfo';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 export default function AttachmentBubble(props) {
   const {
     customStyle,
@@ -43,8 +45,8 @@ export default function AttachmentBubble(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: attachmentBubbleIconClass
   }, fileIcon), /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    className: attachmentBubbleContentClass
+    className: attachmentBubbleContentClass,
+    flexible: true
   }, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, {
     customStyle: bubbleInfoCustomStyle,
     fileName: fileName,
@@ -53,4 +55,4 @@ export default function AttachmentBubble(props) {
 }
 AttachmentBubble.propTypes = attachmentBubblePropTypes;
 AttachmentBubble.defaultProps = attachmentBubbleDefaultProps;
-AttachmentBubble.displayName = "AttachmentBubble";
+AttachmentBubble.displayName = 'AttachmentBubble';

package/es/AttachmentBubble/css/AttachmentBubble.module.css

@@ -1,7 +1,7 @@
 .attachmentBubble {
     background-color: var(--imlib_chat_components_attachmentBubble_bg_color);
-    border-radius: 3px;
-    border: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
+    border-radius: var(--imlib_size_3);
+    border: var(--imlib_size_1) solid var(--imlib_chat_components_attachmentBubble_border_color);
 }
 
 .attachmentBubbleIcon{
@@ -12,11 +12,11 @@
 }
 
 [dir=ltr] .attachmentBubbleIcon{
-    border-right: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
+    border-right: var(--imlib_size_1) solid var(--imlib_chat_components_attachmentBubble_border_color);
 }
 
 [dir=rtl] .attachmentBubbleIcon{
-    border-left: 1px solid var(--imlib_chat_components_attachmentBubble_border_color);
+    border-left: var(--imlib_size_1) solid var(--imlib_chat_components_attachmentBubble_border_color);
 }
 
 .attachmentBubbleIcon, .attachmentBubbleContent{

package/es/AttachmentBubble/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 /** ** Methods *** */
-import { compileClassNames } from "@zohodesk/utils";
+import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(props, style) {
   const attachmentBubbleClass = compileClassNames({
     [style.attachmentBubble]: true

package/es/AttachmentBubbleInfo/AttachmentBubbleInfo.js

@@ -12,7 +12,6 @@ import attachmentBubbleInfoDefaultProps from './props/defaultProps';
 import attachmentBubbleInfoPropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */

package/es/AttachmentBubbleInfo/css/AttachmentBubbleInfo.module.css

@@ -13,6 +13,7 @@
 }
 
 .fileSize {
+    composes: varClass;
     font-size: var(--attachmentBubbleInfo-fileSize_font_size);
     color: var(--imlib_chat_components_attachmentBubbleInfo_fileSize_color);
 }

package/es/AttachmentBubbleInfo/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 /** ** Methods *** */
-import { compileClassNames } from "@zohodesk/utils";
+import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(props, style) {
   const attachmentBubbleInfoClass = compileClassNames({
     [style.attachmentBubbleInfo]: true

package/es/Audio/Audio.js

@@ -2,38 +2,38 @@
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
-import React from 'react';
+import React from "react";
 
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import useMedia from '@zohoim/chat-components-hooks/es/Media/useMedia';
+import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
+import useMedia from "@zohoim/chat-components-hooks/es/Media/useMedia";
 
 /** ** Constants *** */
-import audioDefaultProps from './props/defaultProps';
-import audioPropTypes from './props/propTypes';
+import audioDefaultProps from "./props/defaultProps";
+import audioPropTypes from "./props/propTypes";
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
+import cssJSLogic from "./css/cssJSLogic";
 
 /** ** Styles *** */
-import style from './css/Audio.module.css';
-// import MediaControls from '../MediaControls/MediaControls';
+import style from "./css/Audio.module.css";
+
+/** ** Components *** */
+// //import MediaControls from '../MediaControls/MediaControls';
 
 export default function Audio(props) {
   const {
     customStyle,
-    controlsCustomStyle,
-    fileType,
+    /* controlsCustomStyle, */fileType,
     fileURL
   } = props;
   const {
-    mediaElementRef,
-    durationTime,
-    onTogglePlay,
-    currentTime,
-    progressPercentage,
-    isMediaPlayed
+    mediaElementRef
+    // durationTime,
+    // onTogglePlay
+    // currentTime,
+    // progressPercentage,
+    // isMediaPlayed
   } = useMedia(props);
 
   /* External customization */
@@ -46,15 +46,15 @@ export default function Audio(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: audioWrapperClass
   }, /*#__PURE__*/React.createElement("audio", {
-    preload: "metadata",
+    className: audioClass,
     controls: true,
-    ref: mediaElementRef,
-    className: audioClass
+    preload: "metadata",
+    ref: mediaElementRef
   }, /*#__PURE__*/React.createElement("source", {
-    type: fileType,
-    "data-src": fileURL
+    "data-src": fileURL,
+    type: fileType
   })));
 }
 Audio.propTypes = audioPropTypes;
 Audio.defaultProps = audioDefaultProps;
-Audio.displayName = 'Audio';
+Audio.displayName = "Audio";

package/es/AudioBubble/AudioBubble.js

@@ -12,7 +12,6 @@ import audioBubbleDefaultProps from './props/defaultProps';
 import audioBubblePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
@@ -47,10 +46,10 @@ export default function AudioBubble(props) {
     fileName: fileName,
     fileSize: fileSize
   }), /*#__PURE__*/React.createElement(Audio, {
+    controlsCustomStyle: controlsCustomStyle,
     customStyle: audioCustomStyle,
-    fileURL: fileURL,
     fileType: fileType,
-    controlsCustomStyle: controlsCustomStyle
+    fileURL: fileURL
   }));
 }
 AudioBubble.propTypes = audioBubblePropTypes;

package/es/AudioBubble/css/cssJSLogic.js

@@ -1,7 +1,7 @@
 /** ** Methods *** */
-import { compileClassNames } from "@zohodesk/utils";
+import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(props, style) {
-  let {
+  const {
     headerCustomStyle: propHeaderCustomStyle
   } = props;
   const audioBubbleClass = compileClassNames({

package/es/ImageBubble/ImageBubble.js

@@ -6,18 +6,19 @@ import React from 'react';
 
 /** ** Hooks *** */
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import { Container, Box } from '@zohodesk/components/es/Layout';
 
 /** ** Constants *** */
 import imageBubbleDefaultProps from './props/defaultProps';
 import imageBubblePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
 import style from './css/ImageBubble.module.css';
+
+/** ** Components *** */
+import { Container } from '@zohodesk/components/es/Layout';
 import LazyLoadImage from '../LazyLoadImage/LazyLoadImage';
 export default function ImageBubble(props) {
   const {
@@ -38,13 +39,13 @@ export default function ImageBubble(props) {
     align: "both",
     className: imageBubbleWrapperClass
   }, /*#__PURE__*/React.createElement(LazyLoadImage, {
-    src: src,
+    alternate: alternate,
     customStyle: blurImageStyle,
-    alternate: alternate
+    src: src
   }), /*#__PURE__*/React.createElement(LazyLoadImage, {
-    src: src,
+    alternate: alternate,
     customStyle: imageStyle,
-    alternate: alternate
+    src: src
   }));
 }
 ImageBubble.propTypes = imageBubblePropTypes;

package/es/InfoBubble/InfoBubble.js

@@ -12,7 +12,6 @@ import infoBubbleDefaultProps from './props/defaultProps';
 import infoBubblePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */

package/es/LazyLoadImage/LazyLoadImage.js

@@ -6,18 +6,17 @@ import React from 'react';
 
 /** ** Hooks *** */
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useLazyLoadImage from '@zohoim/chat-components-hooks/es/ImageBubble/useLazyLoadImage';
 
 /** ** Constants *** */
 import lazyLoadImageDefaultProps from './props/defaultProps';
 import lazyLoadImagePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
 import style from './css/LazyLoadImage.module.css';
-import useLazyLoadImage from '@zohoim/chat-components-hooks/es/ImageBubble/useLazyLoadImage';
 export default function LazyLoadImage(props) {
   const {
     customStyle,
@@ -35,12 +34,12 @@ export default function LazyLoadImage(props) {
     lazyLoadImageClass
   } = cssJSLogic(props, newStyle);
   return /*#__PURE__*/React.createElement("img", {
-    ref: imageElementRef,
-    src: "",
+    alt: alternate,
+    className: `lazy ${lazyLoadImageClass || ''}`,
     "data-src": src,
     "data-srcset": src,
-    className: `lazy ${lazyLoadImageClass || ''}`,
-    alt: alternate
+    ref: imageElementRef,
+    src: ""
   });
 }
 LazyLoadImage.propTypes = lazyLoadImagePropTypes;

package/es/LocationBubble/LocationBubble.js

@@ -3,23 +3,22 @@
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
-import React from "react";
+import React from 'react';
 
 /** ** Hooks *** */
-import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useLocationBubble from '@zohoim/chat-components-hooks/es/LocationBubble/useLocationBubble';
 
 /** ** Constants *** */
-import locationBubbleDefaultProps from "./props/defaultProps";
-import locationBubblePropTypes from "./props/propTypes";
+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";
-import { Container, Box } from "@zohodesk/components/es/Layout";
+import cssJSLogic from './css/cssJSLogic';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 
 /** ** Styles *** */
-import style from "./css/LocationBubble.module.css";
-import useLocationBubble from "@zohoim/chat-components-hooks/es/LocationBubble/useLocationBubble";
+import style from './css/LocationBubble.module.css';
 export default function LocationBubble(props) {
   const {
     customStyle
@@ -40,29 +39,29 @@ export default function LocationBubble(props) {
     textLinkClass
   } = cssJSLogic(props, newStyle);
   return /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
     align: "vertical",
+    alignBox: "row",
     className: locationBubbleClass
   }, /*#__PURE__*/React.createElement(Box, {
-    shrink: true,
-    className: imageWrapperClass
+    className: imageWrapperClass,
+    shrink: true
   }, /*#__PURE__*/React.createElement("a", {
-    target: "_blank",
-    rel: "noreferrer noopener",
+    className: imageLinkClass,
     href: locationURL,
-    className: imageLinkClass
+    rel: "noreferrer noopener",
+    target: "_blank"
   }, /*#__PURE__*/React.createElement("div", {
     className: imageClass
   }))), /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    className: textWrapperClass
+    className: textWrapperClass,
+    flexible: true
   }, /*#__PURE__*/React.createElement("a", {
-    target: "_blank",
-    rel: "noreferrer noopener",
+    className: textLinkClass,
     href: locationURL,
-    className: textLinkClass
+    rel: "noreferrer noopener",
+    target: "_blank"
   }, locationURL)));
 }
 LocationBubble.propTypes = locationBubblePropTypes;
 LocationBubble.defaultProps = locationBubbleDefaultProps;
-LocationBubble.displayName = "LocationBubble";
+LocationBubble.displayName = 'LocationBubble';

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

@@ -1,13 +1,15 @@
 .imageWrapper {
-  width: 60px;
-  height: 60px;
+  width: var(--imlib_size_60);
+  height: var(--imlib_size_60);
 }
 
 .locationBubble {
   white-space: nowrap;
   width: 100%;
   background-color: var(--imlib_chat_components_locationBubble_bg_color);
-  padding: 10px;
+  border: var(--imlib_size_1) solid var(--imlib_chat_components_locationBubble_border_color);
+  padding: var(--imlib_size_10);
+  border-radius: var(--imlib_size_3);
 }
 
 .image {
@@ -16,15 +18,15 @@
   background-image: url('../images/location.png');
   background-repeat: no-repeat;
   background-size: cover;
-  border-radius: 3px;
+  border-radius: var(--imlib_size_3);
 }
 
 [dir=ltr] .textWrapper {
-  margin: 0 0 0 8px;
+  margin: 0 0 0 var(--imlib_size_8);
 }
 
 [dir=rtl] .textWrapper {
-  margin: 0 8px 0 0;
+  margin: 0 var(--imlib_size_8) 0 0;
 }
 
 .textLink {
@@ -32,5 +34,5 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #0a73eb;
+  color: var(--imlib_chat_components_locationBubble_color);
 }

package/es/MediaControls/MediaControls.js

@@ -12,7 +12,6 @@ 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 *** */