@zohoim/chat-components 1.1.1 → 1.1.2-beta.1

package/es/MessageBubble/MessageBubble.js

@@ -20,6 +20,7 @@ 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,
@@ -39,7 +40,9 @@ export default function MessageBubble(props) {
   const {
     onMouseEnter,
     onMouseLeave,
-    isRenderMessageActions
+    isRenderMessageActions,
+    onFocus,
+    onBlur
   } = useMessageBubbleAction(props);
   /* css classnames added based on logic */
 
@@ -67,7 +70,9 @@ export default function MessageBubble(props) {
   const messageActionsRenderer = useCallback(() => {
     const messageActions = isRenderMessageActions ? renderHandler(renderMessageActions)() : null;
     return messageActions ? /*#__PURE__*/React.createElement(Box, {
-      className: messageActionWrapperClass
+      className: messageActionWrapperClass,
+      role: "button",
+      tabIndex: "0"
     }, messageActions) : null;
   }, [isRenderMessageActions, renderMessageActions, messageActionWrapperClass]);
   /* Message Box Render */
@@ -84,12 +89,16 @@ 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, messageActions)) : null, [messageBox, messageActions, newStyle.messageContainer, newStyle.messageBoxWrapper]);
+  }, messageBox, /*#__PURE__*/React.createElement("div", {
+    id: uniqueId,
+    role: "menu"
+  }, messageActions))) : null, [messageBox, messageActions, newStyle.messageContainer, newStyle.messageBoxWrapper, uniqueId]);
   /* Message Footer Render */
 
   const messageFooterRenderer = useCallback(() => {
@@ -106,9 +115,16 @@ 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
+    onMouseLeave: onMouseLeave,
+    role: "button",
+    tabIndex: 0
   }, messageSender, messageBoxWithActions, messageFooter);
   return messageLayout;
 }

package/es/MoreActionItem/MoreActionItem.js

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

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

@@ -9,6 +9,7 @@
 
 .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,6 +67,24 @@ 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,20 +42,22 @@ export default function ThemeWrapper(props) {
   /** ** ThemeConfigurations Handling  *** */
 
   const {
-    themeConfigurations,
     mode,
     theme
   } = getThemeConfigurations({
     mode: propMode,
     theme: propTheme
   });
-  const configurations = propThemeConfigurations || themeConfigurations;
+  const configurations = propThemeConfigurations;
   /** ** Style Handling  *** */
 
   const selector = `#${styleTagId}`;
   const prefix = '--imlib_';
   const configuration = useMemo(() => [configurations], [configurations]);
-  const customizedVariables = useMemo(() => getCustomizedCssVariables(configuration, prefix), [configuration, prefix]);
+  const customizedVariables = useMemo(() => {
+    const cssVariables = propThemeConfigurations ? getCustomizedCssVariables(configuration, prefix) : null;
+    return cssVariables;
+  }, [configuration, prefix, propThemeConfigurations]);
   const wrapperDivProps = getWrapperDivProps({
     modeKey,
     themeKey,
@@ -71,9 +73,9 @@ export default function ThemeWrapper(props) {
   }), /*#__PURE__*/React.createElement("div", {
     "data-portal": EDITOR_POPUP_TARGET_PORTAL
   })), []);
-  const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
+  const renderStyle = useCallback(() => customizedVariables ? /*#__PURE__*/React.createElement("style", {
     id: "zoho-im-variables"
-  }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
+  }, `${selector}{${customizedVariables}}`) : null, [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/utils/getThemeConfigurations.js

@@ -1,19 +1,4 @@
 import { modeConstants, themeConstants } from '@zohoim/chat-components-utils/es/constants/themeConstants';
-import lightBlue from "../themeVariables/light/blueTheme";
-import lightGreen from "../themeVariables/light/greenTheme";
-import lightOrange from "../themeVariables/light/orangeTheme";
-import lightRed from "../themeVariables/light/redTheme";
-import lightYellow from "../themeVariables/light/yellowTheme";
-import darkBlue from "../themeVariables/dark/blueTheme";
-import darkGreen from "../themeVariables/dark/greenTheme";
-import darkOrange from "../themeVariables/dark/orangeTheme";
-import darkRed from "../themeVariables/dark/redTheme";
-import darkYellow from "../themeVariables/dark/yellowTheme";
-import pureDarkBlue from "../themeVariables/pureDark/blueTheme";
-import pureDarkGreen from "../themeVariables/pureDark/greenTheme";
-import pureDarkOrange from "../themeVariables/pureDark/orangeTheme";
-import pureDarkRed from "../themeVariables/pureDark/redTheme";
-import pureDarkYellow from "../themeVariables/pureDark/yellowTheme";
 const modeMapping = {
   [modeConstants.LIGHT]: 'light',
   [modeConstants.DARK]: 'dark',
@@ -26,56 +11,17 @@ const themeMapping = {
   [themeConstants.RED]: 'red',
   [themeConstants.YELLOW]: 'yellow'
 };
-const concatString = '_';
 const defaultTheme = themeMapping[themeConstants.BLUE];
 const defaultMode = modeMapping[modeConstants.LIGHT];
-const defaultThemeConfiguration = lightBlue;
-const themeConfigMapping = {
-  [`${modeConstants.LIGHT}${concatString}${themeConstants.BLUE}`]: lightBlue,
-  [`${modeConstants.LIGHT}${concatString}${themeConstants.GREEN}`]: lightGreen,
-  [`${modeConstants.LIGHT}${concatString}${themeConstants.ORANGE}`]: lightOrange,
-  [`${modeConstants.LIGHT}${concatString}${themeConstants.RED}`]: lightRed,
-  [`${modeConstants.LIGHT}${concatString}${themeConstants.YELLOW}`]: lightYellow,
-  [`${modeConstants.DARK}${concatString}${themeConstants.BLUE}`]: darkBlue,
-  [`${modeConstants.DARK}${concatString}${themeConstants.GREEN}`]: darkGreen,
-  [`${modeConstants.DARK}${concatString}${themeConstants.ORANGE}`]: darkOrange,
-  [`${modeConstants.DARK}${concatString}${themeConstants.RED}`]: darkRed,
-  [`${modeConstants.DARK}${concatString}${themeConstants.YELLOW}`]: darkYellow,
-  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.BLUE}`]: pureDarkBlue,
-  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.GREEN}`]: pureDarkGreen,
-  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.ORANGE}`]: pureDarkOrange,
-  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.RED}`]: pureDarkRed,
-  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.YELLOW}`]: pureDarkYellow
-};
-
-function getThemeName() {
-  let {
-    mode = modeConstants.LIGHT,
-    theme = themeConstants.BLUE
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const themeName = `${mode}${concatString}${theme}`;
-  return {
-    themeName
-  };
-}
-
 export default function getThemeConfigurations(_ref) {
   let {
     mode: propMode,
     theme: propTheme
   } = _ref;
-  const {
-    themeName
-  } = getThemeName({
-    mode: propMode,
-    theme: propTheme
-  });
   const mode = propMode ? modeMapping[propMode] || propMode : defaultMode;
   const theme = propTheme ? themeMapping[propTheme] || propTheme : defaultTheme;
-  const themeConfigurations = themeConfigMapping[themeName] || defaultThemeConfiguration;
   return {
     mode,
-    theme,
-    themeConfigurations
+    theme
   };
 }

package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css

@@ -64,9 +64,9 @@
 }
 
 .fontIcon :global .path1::before {
-  color: var(--imlib_chat_components_imIntegrationIcon_path0_color);
+  color: var(--imlib_chat_components_imIntegrationIcon_path0_color) !important;
 }
 
 .fontIcon :global .path2::before {
-  color: var(--imlib_chat_components_imIntegrationIcon_path1_color);
+  color: var(--imlib_chat_components_imIntegrationIcon_path1_color) !important;
 }

package/es/im/ReplyEditor/css/ReplyEditor.module.css

@@ -24,10 +24,10 @@
   font-family: var(--zd_regular) !important;
   line-height: 22px !important;
 
-  --rte-text-color: var(--imlib_chat_components_replyEditor_color) !important;
-  --rte-bg-color: var(--imlib_chat_components_replyEditor_bg) !important;
+  --rte-text-color: var(--imlib_chat_components_reply_editor_color) !important;
+  --rte-bg-color: var(--imlib_chat_components_reply_editor_bg) !important;
   --rte-placeholder-color: var(
-    --imlib_chat_components_replyEditor_placeholder
+    --imlib_chat_components_reply_editor_placeholder_color
   ) !important;
   --rte-link-text-color: var(
     --imlib_chat_components_replyEditor_color
@@ -35,7 +35,7 @@
 
   padding: var(--zd_size16)  !important;
   cursor: text !important;
-}
+}	
 
 .editorWrapper {
   /** ** Use this class for css customisations *** */