@zohoim/chat-components 0.0.11 → 0.0.14

package/es/ReplyBubbleContent/css/ReplyBubbleContent.module.css

@@ -1,50 +1,60 @@
 .replyBubbleContent {
-    position: relative;
-    background-color: #fff;
-    border-radius: 3px;
+  position: relative;
+  background-color: var(--imlib_chat_components_replyBubbleContent_bg_color);
+  border: 1px solid var(--imlib_chat_components_replyBubbleContent_border_color);
+  border-radius: 3px;
+  margin: var(--zd_size5) 0 ;
 }[dir=ltr] .replyBubbleContent {
-    padding: 10px 10px 10px 20px;
+  padding: var(--zd_size10) var(--zd_size10) var(--zd_size10) var(--zd_size20) ;
 }[dir=rtl] .replyBubbleContent {
-    padding: 10px 20px 10px 10px;
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size10) ;
 }
 
-.replyBubbleContent::after{
-    content: "";
-    width: 2px;
-    display: block;
-    position: absolute;
-    top: 10px;
-    bottom: 10px;
-    background-color: #cddbf2;
-    border-radius: 30px;
+.replyBubbleContent::after {
+  content: '';
+  width: var(--zd_size2) ;
+  display: block;
+  position: absolute;
+  top: var(--zd_size10) ;
+  bottom: var(--zd_size10) ;
+  background-color: var(--imlib_chat_components_replyBubbleContent_line_color);
+  border-radius: 30px;
 }
 
-[dir=ltr] .replyBubbleContent::after{
-    left: 10px;
+[dir=ltr] .replyBubbleContent::after {
+  left: var(--zd_size10) ;
 }
 
-[dir=rtl] .replyBubbleContent::after{
-    right: 10px;
+[dir=rtl] .replyBubbleContent::after {
+  right: var(--zd_size10) ;
 }
 
 .name {
-    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_replyBubbleContent_color);
+  font-size: var(--zd_font_size15) ;
+  line-height: 1.5;
+  overflow: hidden;
+  white-space: nowrap;
+  word-wrap: normal;
+  text-overflow: ellipsis;
+}
+
+[dir=ltr] .iconWrapper {
+  margin-right: var(--zd_size10) ;
+}
+
+[dir=rtl] .iconWrapper {
+  margin-left: var(--zd_size10) ;
 }
 
 .messageWrapper {
-    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_replyBubbleContent_color);
+  font-size: var(--zd_font_size13) ;
+  line-height: 1.5;
+  max-height: var(--zd_size40) ;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  overflow: hidden;
 }

package/es/ReplyBubbleContent/props/defaultProps.js

@@ -1,5 +1,5 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const replyBubbleContentDefaultProps = {
   customStyle: dummyObject
 };

package/es/ReplyBubbleContent/props/propTypes.js

@@ -1,9 +1,9 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const replyBubbleContentPropTypes = {
-  customStyle: PropTypes.object,
-  senderName: PropTypes.string,
-  renderIcon: PropTypes.func,
-  renderMessage: PropTypes.func
+  renderIcon: PropTypes.func.isRequired,
+  renderMessage: PropTypes.func.isRequired,
+  senderName: PropTypes.string.isRequired,
+  customStyle: PropTypes.object
 };
 export default replyBubbleContentPropTypes;

package/es/ReplyBubbleHeader/ReplyBubbleHeader.js

@@ -1,56 +1,52 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
-
 /** ** Libraries *** */
-import React from 'react';
-
+import React, { useMemo, useCallback } from 'react';
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+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';
 
+import style from './css/ReplyBubbleHeader.module.css';
 /** ** Components *** */
+
 import { Container, Box } from '@zohodesk/components/es/Layout';
+/** ** Icons *** */
+
 import ReplyIcon from '@zohodesk/icon/es/general/Reply';
-import IMDateTime from '../im/IMDateTime/IMDateTime';
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 export default function ReplyBubbleHeader(props) {
   const {
     customStyle,
     replyText,
     time,
-    timeCustomStyle
+    renderCustomReplyIcon
   } = props;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    replyBubbleHeaderClass
-  } = cssJSLogic(props, newStyle);
+  const iconStyle = useMemo(() => ({
+    base: newStyle.replyIcon
+  }), [newStyle.replyIcon]);
+  const renderIcon = useCallback(() => {
+    const customIcon = renderHandler(renderCustomReplyIcon)();
+    return customIcon || /*#__PURE__*/React.createElement(ReplyIcon, {
+      customStyle: iconStyle
+    });
+  }, [iconStyle, renderCustomReplyIcon]);
   return /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
-    className: replyBubbleHeaderClass
+    alignBox: "row"
   }, /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, /*#__PURE__*/React.createElement(Container, {
     alignBox: "row"
-  }, /*#__PURE__*/React.createElement(ReplyIcon, {
-    customStyle: {
-      base: newStyle.replyIcon
-    }
-  }), /*#__PURE__*/React.createElement(Box, null, replyText))), /*#__PURE__*/React.createElement(IMDateTime, {
-    customStyle: timeCustomStyle,
-    value: time
-  }));
+  }, renderIcon(), /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.replyText
+  }, replyText))), /*#__PURE__*/React.createElement("div", null, time));
 }
 ReplyBubbleHeader.propTypes = replyBubbleHeaderPropTypes;
 ReplyBubbleHeader.defaultProps = replyBubbleHeaderDefaultProps;

package/es/ReplyBubbleHeader/css/ReplyBubbleHeader.module.css

@@ -1,4 +1,12 @@
-.replyIcon{
-    width: 20px;
-    height: 20px;
-}
+.replyIcon {
+  width: var(--zd_size20) ;
+  height: var(--zd_size20) ;
+}
+
+.replyText {
+  max-width: var(--zd_size100) ;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--zd_font_size14) ;
+}

package/es/ReplyBubbleHeader/props/defaultProps.js

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

package/es/ReplyBubbleHeader/props/propTypes.js

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

package/es/TextBubble/TextBubble.js

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

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

@@ -1,5 +1,18 @@
+.textBubble {
+  /* Use this class name for css customisation */
+}
+
 .moreText {
-    text-transform: uppercase;
-    color: #0a73eb;
-    font-size: 11px;
+  text-transform: uppercase;
+  font-size: var(--zd_font_size11) ;
+  color: var(--imlib_chat_components_textBubble_see_more_color);
+  cursor: pointer;
+}
+
+.textBubble a {
+  color: var(--imlib_chat_components_textBubble_url_color);
+}
+
+.textBubble a:hover {
+  text-decoration: underline;
 }

package/es/TextBubble/props/defaultProps.js

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

package/es/TextBubble/props/propTypes.js

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

package/es/Theme/{DeskAssets.js → ThemeAssets.js}

@@ -1,4 +1,6 @@
-// Component Package default mode & themes
+/** ** Libraries *** */
+import PropTypes from 'prop-types'; // 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';
@@ -9,9 +11,8 @@ import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefault
 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';
+import '@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css'; // Component Package dark mode & themes
 
-// 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';
@@ -23,8 +24,8 @@ import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkComp
 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';
@@ -36,8 +37,8 @@ import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePure
 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';
@@ -50,4 +51,7 @@ export default function DeskAssets(props) {
     children
   } = props;
   return children || null;
-}
+}
+DeskAssets.propTypes = {
+  children: PropTypes.node
+};

package/es/Theme/ThemeWrapper.js

@@ -1,88 +1,88 @@
 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); }
-/* eslint-disable react/jsx-no-bind */
+
 /** ** Libraries *** */
-import React from "react";
-import ThemeProvider from "@zohodesk/theme/es/ThemeProvider";
-import sizeVariable from "@zohodesk/theme-defaults/es/sizeVariable";
-import fontSizeVariable from "@zohodesk/theme-defaults/es/fontSizeVariable";
-import fontVariable from "@zohodesk/theme-defaults/es/fontVariable";
-import { transitionVariable, motionTransitionVariable } from "@zohodesk/theme-defaults/es/transitionVariable";
-import chatDefaultTheme from "./defaultTheme";
-import chatDarkTheme from "./darkTheme";
-import { MSG_ACTION_POPUP_PORTAL } from "../constants";
-import { baseUnitLimit } from "./constants";
-import DeskAssets from "./DeskAssets";
-import TooltipWrapper from "./ToolttipWrapper";
-import { Container } from "@zohodesk/components/es/Layout";
-import themeWrapperPropTypes from "./props/propTypes";
-import themeWrapperDefaultProps from "./props/defaultProps";
-import getThemeConfigurations from "./utils/getThemeConfigurations";
-import { I18NProvider } from "@zohodesk/i18n";
-import datetime from "@zohodesk/datetimejs";
-import "../Fonts/puviFont.module.css";
+import React, { useMemo, useCallback } from 'react';
+/** ** Constants *** */
+
+import themeWrapperPropTypes from './props/propTypes';
+import themeWrapperDefaultProps from './props/defaultProps';
+import { styleTagId } from './constants';
+import { MSG_ACTION_POPUP_PORTAL } from '../constants';
+/** ** Components *** */
+
+import ThemeAssets from './ThemeAssets';
+import TooltipWrapper from './TooltipWrapper';
+import { Container } from '@zohodesk/components/es/Layout';
+/** ** Methods *** */
+
+import getThemeConfigurations from './utils/getThemeConfigurations';
+import getCustomizedCssVariables from './utils/getCustomizedCssVariables';
+import getWrapperDivProps from './utils/getWrapperDivProps';
+/** ** Fonts *** */
+
+import '../Fonts/puviFont.module.css';
 export default function ThemeWrapper(props) {
   const {
     children,
-    needDeskAssets,
+    needThemeAssets,
     needTooltip,
     themeConfigurations: propThemeConfigurations,
-    mode,
-    theme,
-    app,
+    mode: propMode,
+    theme: propTheme,
     modeKey,
     themeKey,
     tooltipCustomStyle
   } = props;
+  /** ** containerRef for Tooltip *** */
+
   const containerRef = React.useRef(null);
+  const getContainerRef = useCallback(() => containerRef.current, []);
+  /** ** ThemeConfigurations Handling  *** */
+
   const {
     themeConfigurations,
-    deskMode,
-    deskTheme
+    mode,
+    theme
   } = getThemeConfigurations({
-    app,
+    mode: propMode,
+    theme: propTheme
+  });
+  const configurations = propThemeConfigurations || themeConfigurations;
+  /** ** Style Handling  *** */
+
+  const selector = `#${styleTagId}`;
+  const prefix = '--imlib_';
+  const configuration = useMemo(() => [configurations], [configurations]);
+  const customizedVariables = useMemo(() => getCustomizedCssVariables(configuration, prefix), [configuration, prefix]);
+  const wrapperDivProps = getWrapperDivProps({
+    modeKey,
+    themeKey,
     mode,
     theme
   });
-  const configurations = propThemeConfigurations ? propThemeConfigurations : themeConfigurations;
-  function getContainerRef() {
-    return containerRef.current;
-  }
-  const wrapperDivProps = {
-    [modeKey]: deskMode,
-    [themeKey]: deskTheme
-  };
+  /** ** Children Render Functions   *** */
+
+  const renderPortal = useCallback(() => /*#__PURE__*/React.createElement("div", {
+    "data-portal": MSG_ACTION_POPUP_PORTAL
+  }), []);
+  const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
+    id: "zoho-im-variables"
+  }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
+  const renderAssets = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, needThemeAssets ? /*#__PURE__*/React.createElement(ThemeAssets, null) : null), /*#__PURE__*/React.createElement(React.Fragment, null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
+    containerRef: containerRef.current,
+    customStyle: tooltipCustomStyle,
+    getContainerRef: getContainerRef
+  }) : null)), [getContainerRef, needTooltip, needThemeAssets, tooltipCustomStyle]);
   return /*#__PURE__*/React.createElement("div", _extends({
-    id: "chat-components"
+    id: styleTagId
   }, wrapperDivProps, {
     style: {
-      width: "100%",
-      height: "100%"
+      width: '100%',
+      height: '100%'
     }
-  }), /*#__PURE__*/React.createElement(I18NProvider
-  // i18n={i18n}
-  , {
-    timeZone: "Asia/Kolkata",
-    datePattern: "DD/MM/YYYY",
-    isEnabledCurrentYear: true,
-    timeFormat: "hh:mm"
-    // tzdata should already have been fetched and set as default
-    // tzData={datetime.tz.data()}
-  }, /*#__PURE__*/React.createElement(ThemeProvider, {
-    selector: "#chat-components",
-    prefix: "--imlib_",
-    configuration: [sizeVariable(baseUnitLimit.size), fontSizeVariable(baseUnitLimit.fontSize), fontVariable, transitionVariable(baseUnitLimit.transition), motionTransitionVariable(baseUnitLimit.motionTransition), configurations
-    // themeConfigration
-    // chatDarkTheme
-    ]
-  }, /*#__PURE__*/React.createElement(Container, {
+  }), renderStyle(), /*#__PURE__*/React.createElement(Container, {
     eleRef: containerRef
-  }, children), /*#__PURE__*/React.createElement("div", {
-    "data-portal": MSG_ACTION_POPUP_PORTAL
-  }), needDeskAssets ? /*#__PURE__*/React.createElement(DeskAssets, null) : null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
-    containerRef: containerRef.current,
-    getContainerRef: getContainerRef,
-    customStyle: tooltipCustomStyle
-  }) : null)));
+  }, children), renderPortal(), renderAssets());
 }
 ThemeWrapper.propTypes = themeWrapperPropTypes;
 ThemeWrapper.defaultProps = themeWrapperDefaultProps;