@zohoim/chat-components 1.1.2-beta.3 → 1.1.2-beta.4

package/README.md

@@ -10,13 +10,9 @@ In this Library, We Provide Some Basic Message Components to Build Your Chat App
 
 > import MessageBubble from '@zohoim/chat-components/es/MessageBubble/MessageBubble’;
 
-# 1.1.2
-
-- Color contrast support added for components
-
 # 1.1.1
 
-- **@zohoim/chat-components-utils** version updated
+- **@zohoim/chat-components-utils** package updated
 
 # 1.1.0
 

package/es/ActionIconWrapper/ActionIconWrapper.js

@@ -53,14 +53,10 @@ export default function ActionIconWrapper(props) {
     id
   });
   return icon ? /*#__PURE__*/React.createElement("div", {
-    "aria-label": title,
     className: actionIconWrapperClass,
-    "data-a11y-focus": "true",
     "data-title": title,
     onClick: onClick,
-    onMouseEnter: onMouseEnter,
-    role: "menuitem",
-    tabIndex: 0
+    onMouseEnter: onMouseEnter
   }, icon) : null;
 }
 ActionIconWrapper.propTypes = actionIconWrapperPropTypes;

package/es/AttachmentHandler/AttachmentHandler.js

@@ -71,9 +71,6 @@ export default function AttachmentHandler(props) {
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "column"
   }, customIcon || /*#__PURE__*/React.createElement(IconButton, {
-    a11y: {
-      ariaLabel: iconTitle
-    },
     className: newStyle.iconButton,
     iconClass: newStyle.icon,
     iconName: iconName,

package/es/AttachmentHandler/css/AttachmentHandler.module.css

@@ -18,10 +18,10 @@
 
 
 .icon :global .path1:before {
-  color: var(--imlib_chat_components_twotone_icon_bg) !important;
+  color: var(--imlib_chat_components_emojiPopup_ttIcon_path1_color) !important;
   opacity: 1;
 }
 
 .icon :global .path2:before {
-  color: var(--imlib_chat_components_twotone_icon_border) !important;
+  color: var(--imlib_chat_components_emojiPopup_ttIcon_path2_color) !important;
 }

package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css

@@ -22,16 +22,21 @@
   max-height: var(--zd_size48)  !important;
   background-color: transparent !important;
   border: 0 !important;
-  border-bottom: 1px solid var(--zdt_textarea_default_border) !important;
+  border-bottom: 1px solid
+    var(--imlib_chat_components_attachmentPreviewBody_editor_border_color) !important;
   padding: 0  !important;
 }
 
 .editableDiv:hover {
-  border-color: var(--zdt_textarea_hover_border) !important;
+  border-color: var(
+    --imlib_chat_components_attachmentPreviewBody_editor_border_hover_color
+  ) !important;
 }
 
 .editableDiv:focus {
-  border-color: var(--zdt_textarea_focus_border) !important;
+  border-color: var(
+    --imlib_chat_components_attachmentPreviewBody_editor_border_active_color
+  ) !important;
 }
 
 .imgContent,
@@ -44,7 +49,6 @@
 .imgContent, .zoomContent {
   background-color: var(--imlib_chat_components_attachmentPreviewBody_bg_color);
   padding: var(--zd_size40);
-  background-color: var(--imlib_chat_components_attachmentPreview_body_bg_color);
 }
 
 [dir=ltr] .imgContent, [dir=ltr] .zoomContent {

package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css

@@ -2,10 +2,10 @@
 .imgPreviewerheader {
   position: relative;
   background-color: var(
-    --imlib_chat_components_attachmentPreview_bg_color
+    --imlib_chat_components_attachmentPreviewHeader_bg_color
   );
   padding: var(--zd_size15) var(--zd_size40);
-  border-bottom: var(--zd_size1) solid var(--imlib_chat_components_common_border);
+  border-bottom: var(--zd_size1) solid var(--zd_im_common_border);
 }
 [dir=ltr] .imgPreviewerheader {
   border-top-left-radius: var(--zd_size5);
@@ -17,7 +17,7 @@
 }
 
 .imgName {
-  color: var(--imlib_chat_components_attachmentPreview_name_color);
+  color: var(--imlib_chat_components_attachmentPreviewHeader_name_color);
   font-size: var(--zd_font_size17);
   font-family: var(--zd_semibold);
   composes: dotted from '../../css/common.module.css';
@@ -27,7 +27,7 @@
 
 .imgSize {
   font-size: var(--zd_font_size13);
-  color: var(--imlib_chat_components_attachmentPreview_size_color);
+  color: var(--imlib_chat_components_attachmentPreviewHeader_size_color);
   composes: dotted from '../../css/common.module.css';
   max-width: var(--zd_size150);
 }

package/es/Emoji/Emoji.js

@@ -58,12 +58,8 @@ export default function Emoji(props) {
   });
   return /*#__PURE__*/React.createElement("span", {
     ref: eleRef,
-    "aria-label": title,
     className: emojiClass,
-    "data-a11y-focus": "true",
-    onClick: onSelect,
-    role: "button",
-    tabIndex: 0
+    onClick: onSelect
   }, /*#__PURE__*/React.createElement("span", {
     className: newStyle.emojiContent,
     "data-smiley": emojiName,

package/es/EmojiPopup/EmojiPopup.js

@@ -83,10 +83,7 @@ function EmojiPopupComp(props) {
     isActive: isPopupOpen,
     onClick: onTogglePopup,
     title: tooltip,
-    ...iconProps,
-    a11y: {
-      ariaLabel: tooltip
-    }
+    ...iconProps
   }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
     boxPosition: position,
     customClass: popupClass,

package/es/EmojiPopup/css/EmojiPopup.module.css

@@ -41,10 +41,15 @@
 }
 
 .icon :global .path1:before {
-  color: var(--imlib_chat_components_twotone_icon_bg) !important;
+  color: var(--imlib_chat_components_emojiPopup_ttIcon_path1_color) !important;
   opacity: 1;
 }
 
 .icon :global .path2:before {
-  color: var(--imlib_chat_components_twotone_icon_border) !important;
+  color: var(--imlib_chat_components_emojiPopup_ttIcon_path2_color) !important;
+}
+
+.icon :global .path2{
+  position: relative;
+  z-index: 1;
 }

package/es/EmojisFooter/css/EmojisFooter.module.css

@@ -1,9 +1,10 @@
 .footerTab {
   position: relative;
-  border-top: 1px solid var(--imlib_chat_components_common_border);
+  border-top: 1px solid var(--imlib_chat_components_emojiFooter_border_color);
 }
 
 .tabIcon {
+  /* padding: var(--zd_size10) var(--zd_size16); */
   position: relative;
   height: var(--zd_size35) ;
   display: flex;
@@ -20,7 +21,7 @@
   height: var(--zd_size2) ;
   transition: 0.3s ease;
   width: 100% ;
-  background-color: var(--imlib_chat_components_emoji_tab_line_color);
+  background-color: var(--imlib_chat_components_emojiFooter_tabLine);
 }
 
 [dir=ltr] .tabLine {
@@ -35,5 +36,5 @@
   width: auto ;
   height: auto ;
   margin: 0 ;
-  padding: 0 8% ;
+  padding: 8% ;
 }

package/es/EmojisHeader/css/EmojisHeader.module.css

@@ -1,11 +1,12 @@
 .container {
   padding: var(--zd_size10) ;
-  border-bottom: 1px solid var(--imlib_chat_components_common_border);
+  border-bottom: 1px solid
+    var(--imlib_chat_components_emojisHeader_border_color);
 }
 
 .emojisSearch {
   position: relative;
-  background-color: var(--imlib_chat_components_emoji_popup_search_bg);
+  background-color: var(--imlib_chat_components_emojisHeader_bg_color);
 }
 
 .searchInput {
@@ -24,7 +25,6 @@
 
 .searchIcon {
   position: absolute;
-  color: var(--imlib_chat_components_primary_text);
 }
 
 [dir=ltr] .searchIcon {

package/es/MessageActions/MessageActions.js

@@ -29,8 +29,7 @@ export default function MessageActions(props) {
     setRetainMessageActions,
     renderSecondaryActions,
     customStyle,
-    customProps,
-    moreTitle
+    customProps
   } = props;
   const {
     messageActionProps = dummyObject,
@@ -107,7 +106,6 @@ export default function MessageActions(props) {
   }, /*#__PURE__*/React.createElement(MoreIcon, null)), [newStyle.moreIcon]);
   const renderMore = useCallback(componentProps => /*#__PURE__*/React.createElement(ActionIconWrapper, {
     renderIcon: renderMoreIcon,
-    title: moreTitle,
     ...componentProps,
     ...actionIconWrapperProps
   }), [actionIconWrapperProps, renderMoreIcon]);

package/es/MessageActions/props/propTypes.js

@@ -21,7 +21,6 @@ const messageActionsPropTypes = {
   customStyle: PropTypes.object,
   defaultShowCount: PropTypes.number,
   renderSecondaryActions: PropTypes.func,
-  setRetainMessageActions: PropTypes.func,
-  moreTitle: PropTypes.string
+  setRetainMessageActions: PropTypes.func
 };
 export default messageActionsPropTypes;

package/es/MessageBubble/MessageBubble.js

@@ -20,7 +20,6 @@ import { Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
 
 import style from "./css/MessageBubble.module.css";
-import generateUniqueId from '@zohoim/chat-components-utils/es/common/generateUniqueId';
 export default function MessageBubble(props) {
   const {
     renderMessageBox,
@@ -40,9 +39,7 @@ export default function MessageBubble(props) {
   const {
     onMouseEnter,
     onMouseLeave,
-    isRenderMessageActions,
-    onFocus,
-    onBlur
+    isRenderMessageActions
   } = useMessageBubbleAction(props);
   /* css classnames added based on logic */
 
@@ -70,9 +67,7 @@ export default function MessageBubble(props) {
   const messageActionsRenderer = useCallback(() => {
     const messageActions = isRenderMessageActions ? renderHandler(renderMessageActions)() : null;
     return messageActions ? /*#__PURE__*/React.createElement(Box, {
-      className: messageActionWrapperClass,
-      role: "button",
-      tabIndex: "0"
+      className: messageActionWrapperClass
     }, messageActions) : null;
   }, [isRenderMessageActions, renderMessageActions, messageActionWrapperClass]);
   /* Message Box Render */
@@ -89,16 +84,12 @@ export default function MessageBubble(props) {
 
   const messageBox = useMemo(() => messageBoxRenderer(), [messageBoxRenderer]);
   const messageActions = useMemo(() => messageActionsRenderer(), [messageActionsRenderer]);
-  const uniqueId = generateUniqueId();
   const messageBoxWithActionsRenderer = useCallback(() => messageBox || messageActions ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageContainer
   }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageBoxWrapper,
     flexible: true
-  }, messageBox, /*#__PURE__*/React.createElement("div", {
-    id: uniqueId,
-    role: "menu"
-  }, messageActions))) : null, [messageBox, messageActions, newStyle.messageContainer, newStyle.messageBoxWrapper, uniqueId]);
+  }, messageBox, messageActions)) : null, [messageBox, messageActions, newStyle.messageContainer, newStyle.messageBoxWrapper]);
   /* Message Footer Render */
 
   const messageFooterRenderer = useCallback(() => {
@@ -115,16 +106,9 @@ export default function MessageBubble(props) {
   /* Construct Layout */
 
   const messageLayout = /*#__PURE__*/React.createElement("div", {
-    "aria-controls": uniqueId,
-    "aria-expanded": isRenderMessageActions ? 'true' : 'false',
-    "aria-haspopup": "true",
     className: bubbleClass,
-    onBlur: onBlur,
-    onFocus: onFocus,
     onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    role: "button",
-    tabIndex: 0
+    onMouseLeave: onMouseLeave
   }, messageSender, messageBoxWithActions, messageFooter);
   return messageLayout;
 }

package/es/MoreActionItem/MoreActionItem.js

@@ -50,10 +50,6 @@ export default function MoreActionItem(props) {
     id
   });
   return /*#__PURE__*/React.createElement(ListContainer, {
-    a11y: {
-      'data-a11y-focus': true,
-      'data-a11y-click': true
-    },
     autoHover: true,
     customClass: newStyle.listItem,
     disableTitle: title,

package/es/TextBubble/TextBubble.js

@@ -39,12 +39,9 @@ export default function TextBubble(props) {
       // __html: HTMLPurifier.sanitize(message)
       __html: message
     }
-  }), moreText ? /*#__PURE__*/React.createElement("button", {
+  }), moreText ? /*#__PURE__*/React.createElement("div", {
     className: moreTextClass,
-    "data-a11y-click": "true",
-    "data-a11y-focus": "true",
-    onClick: onClickMore,
-    tabIndex: "0"
+    onClick: onClickMore
   }, moreText) : null);
 }
 TextBubble.propTypes = textBubblePropTypes;

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

@@ -9,7 +9,6 @@
 
 .moreText {
   color: var(--imlib_chat_components_textBubble_see_more_color);
-  composes: buttonReset from '~@zohodesk/components/es/semantic/Button/semanticButton.module.css';
   cursor: pointer;
 }
 

package/es/Theme/ThemeAssets.js

@@ -67,24 +67,6 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/es/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
-import "../../assets/Appearance/dark/mode/General_DarkMode.module.css";
-import "../../assets/Appearance/dark/themes/blue/blue_General_DarkTheme.module.css";
-import "../../assets/Appearance/dark/themes/green/green_General_DarkTheme.module.css";
-import "../../assets/Appearance/dark/themes/orange/orange_General_DarkTheme.module.css";
-import "../../assets/Appearance/dark/themes/red/red_General_DarkTheme.module.css";
-import "../../assets/Appearance/dark/themes/yellow/yellow_General_DarkTheme.module.css";
-import "../../assets/Appearance/light/mode/General_LightMode.module.css";
-import "../../assets/Appearance/light/themes/blue/blue_General_LightTheme.module.css";
-import "../../assets/Appearance/light/themes/green/green_General_LightTheme.module.css";
-import "../../assets/Appearance/light/themes/orange/orange_General_LightTheme.module.css";
-import "../../assets/Appearance/light/themes/red/red_General_LightTheme.module.css";
-import "../../assets/Appearance/light/themes/yellow/yellow_General_LightTheme.module.css";
-import "../../assets/Appearance/pureDark/mode/General_PureDarkMode.module.css";
-import "../../assets/Appearance/pureDark/themes/blue/blue_General_PureDarkTheme.module.css";
-import "../../assets/Appearance/pureDark/themes/green/green_General_PureDarkTheme.module.css";
-import "../../assets/Appearance/pureDark/themes/orange/orange_General_PureDarkTheme.module.css";
-import "../../assets/Appearance/pureDark/themes/red/red_General_PureDarkTheme.module.css";
-import "../../assets/Appearance/pureDark/themes/yellow/yellow_General_PureDarkTheme.module.css";
 export default function DeskAssets(props) {
   const {
     children

package/es/Theme/ThemeWrapper.js

@@ -42,22 +42,20 @@ export default function ThemeWrapper(props) {
   /** ** ThemeConfigurations Handling  *** */
 
   const {
+    themeConfigurations,
     mode,
     theme
   } = getThemeConfigurations({
     mode: propMode,
     theme: propTheme
   });
-  const configurations = propThemeConfigurations;
+  const configurations = propThemeConfigurations || themeConfigurations;
   /** ** Style Handling  *** */
 
   const selector = `#${styleTagId}`;
   const prefix = '--imlib_';
   const configuration = useMemo(() => [configurations], [configurations]);
-  const customizedVariables = useMemo(() => {
-    const cssVariables = propThemeConfigurations ? getCustomizedCssVariables(configuration, prefix) : null;
-    return cssVariables;
-  }, [configuration, prefix, propThemeConfigurations]);
+  const customizedVariables = useMemo(() => getCustomizedCssVariables(configuration, prefix), [configuration, prefix]);
   const wrapperDivProps = getWrapperDivProps({
     modeKey,
     themeKey,
@@ -73,9 +71,9 @@ export default function ThemeWrapper(props) {
   }), /*#__PURE__*/React.createElement("div", {
     "data-portal": EDITOR_POPUP_TARGET_PORTAL
   })), []);
-  const renderStyle = useCallback(() => customizedVariables ? /*#__PURE__*/React.createElement("style", {
+  const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
     id: "zoho-im-variables"
-  }, `${selector}{${customizedVariables}}`) : null, [selector, customizedVariables]);
+  }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
   const renderAssets = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, needThemeAssets ? /*#__PURE__*/React.createElement(ThemeAssets, null) : null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
     containerRef: containerRef.current,
     customStyle: tooltipCustomStyle,

package/es/Theme/themeVariables/commonThemeColorVariable.js

@@ -0,0 +1,17 @@
+export const imIntegrationIcon = {
+  path0_color: '#ffffff40',
+  path1_color: '#fff',
+  whatsapp_color: '#24d366',
+  telegram_color: '#4fa7d8',
+  wechat_color: '#2dc100',
+  line_color: '#01b901',
+  twillio_color: '#f22f46',
+  instagram_color: 'linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%)',
+  asap_color: 'linear-gradient(180deg, #A375FF 0%, #7732FF 100%)',
+  fb_color: '#006aff'
+};
+export const imTtIcon = {
+  path0_color: '#ffffff40',
+  path1_color: '#fff'
+};
+export const messagetextColor = '#e2e4e6';

package/es/Theme/themeVariables/dark/blueTheme.js

@@ -0,0 +1,133 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, replyEditor, emojiPopup, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#2c3b4d',
+      border_color: '#3f536b'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#479dff'
+    },
+    imageBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#2c3b4d',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor,
+      failed_text_color: '#000'
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#479dff',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryBlue,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    emojiFooter: {
+      tabLine: primaryBlue,
+      border_color: '#2d3748'
+    },
+    replyEditor,
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: '#5f6478',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262f3d',
+      editor_border_color: '#3e4d63',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#479dff'
+    }
+  }
+};

package/es/Theme/themeVariables/dark/commonColorVariable.js

@@ -0,0 +1,35 @@
+export const incomingBubbleBgColor = '#232b38';
+export const bubbleActiveBgColor = '#1b2e33';
+export const actionIconWrapperColor = '#e2e4e6';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';
+export const primaryBlue = '#479dff';
+export const primaryGreen = '#45a159';
+export const primaryOrange = '#ff801f';
+export const primaryRed = '#e94f4f';
+export const primaryYellow = '#d79835';
+export const failedBgWrapper = '#f4b5bc';
+export const failedBg = '#f6dcdf';
+export const failedBdr = '#eb9ea7';
+export const failedLine = '#eb9ea7';
+export const failedColor = '#000';
+export const failedUrlColor = '#0a73eb';
+export const emojiPopup = {
+  bg: '#f1f4f9',
+  border: '#f1f4f9',
+  titleColor: '#aaa'
+};
+export const replyEditor = {
+  bg: '#242b38',
+  color: '#e2e4e6',
+  placeholder: '#5a616f'
+};
+export const emojisHeader = {
+  bg_color: '#283442',
+  border_color: '#2d3748'
+};
+export const attachmentPreviewHeader = {
+  bg_color: '#232b38',
+  name_color: '#e2e4e6',
+  size_color: '#a8b0bd'
+};