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

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 *** */