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

package/es/EmojisList/EmojisList.js

@@ -0,0 +1,130 @@
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React, { useCallback } from 'react';
+/** ** Components *** */
+
+import Emoji from "../Emoji/Emoji";
+import EmojisEmptyState from "../EmojisEmptyState/EmojisEmptyState";
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useEmojisList from '@zohoim/chat-components-hooks/es/EmojisList/useEmojisList';
+/** ** Constants *** */
+
+import emojisListDefaultProps from "./props/defaultProps";
+import emojisListPropTypes from "./props/propTypes";
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from "./css/cssJSLogic";
+/** ** Styles *** */
+
+import style from "./css/EmojisList.module.css";
+export default function EmojisList(props) {
+  const {
+    customStyle,
+    customProps,
+    searchString,
+    isShowGroupBasedList,
+    onChangeGroup,
+    getMethods,
+    onSelect,
+    selectedGroup,
+    rowType,
+    emojisList: propsEmojisList,
+    renderEmpty,
+    isShowOnlyContent
+  } = props;
+  const {
+    emojiProps = dummyObject,
+    emojisEmptyStateProps = dummyObject
+  } = customProps;
+  const {
+    emojisList,
+    setGroupRefs,
+    setContainerRef: listContainerRef,
+    isAllEmpty,
+    isGroupEmpty,
+    isRenderEmptyState,
+    isRenderElement
+  } = useEmojisList({
+    emojisList: propsEmojisList,
+    searchString,
+    isShowGroupBasedList,
+    onChangeGroup,
+    getMethods,
+    selectedGroup,
+    isShowOnlyContent
+  });
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+
+  const {
+    emojisListClass,
+    groupClass
+  } = cssJSLogic({
+    rowType,
+    isShowGroupBasedList,
+    isShowOnlyContent,
+    isEmpty: isAllEmpty
+  }, newStyle);
+  const renderGroup = useCallback(_ref => {
+    let {
+      groupName,
+      emojis
+    } = _ref;
+    const isEmptyGroup = isGroupEmpty[groupName];
+    return !isEmptyGroup ? /*#__PURE__*/React.createElement("div", {
+      key: groupName,
+      ref: el => {
+        setGroupRefs(el, groupName);
+      },
+      className: groupClass
+    }, isShowGroupBasedList ? /*#__PURE__*/React.createElement("div", {
+      className: newStyle.groupName
+    }, groupName) : null, Object.keys(emojis).map(emojiName => {
+      const emoji = emojis[emojiName];
+      const id = `emoji_${emojiName}`;
+      return /*#__PURE__*/React.createElement(Emoji, {
+        key: id,
+        emoji: emoji,
+        emojiName: emojiName,
+        onSelect: onSelect,
+        ...emojiProps
+      });
+    })) : null;
+  }, [emojiProps, isGroupEmpty, groupClass, isShowGroupBasedList, newStyle.groupName, onSelect, setGroupRefs]);
+  const renderDefaultEmptyState = useCallback(() => /*#__PURE__*/React.createElement(EmojisEmptyState, { ...emojisEmptyStateProps
+  }), [emojisEmptyStateProps]);
+  const renderEmptyState = useCallback(() => {
+    /* Render EmptyState */
+    if (isRenderEmptyState) {
+      const emptyState = renderHandler(renderEmpty || renderDefaultEmptyState)();
+
+      if (emptyState) {
+        return emptyState;
+      }
+
+      return null;
+    }
+
+    return null;
+  }, [renderEmpty, renderDefaultEmptyState, isRenderEmptyState]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderElement ? /*#__PURE__*/React.createElement("div", {
+    ref: listContainerRef,
+    className: emojisListClass
+  }, !isAllEmpty ? Object.keys(emojisList).map(groupName => {
+    const emojis = emojisList[groupName];
+    return renderGroup({
+      groupName,
+      emojis
+    });
+  }) : renderEmptyState()) : null);
+}
+EmojisList.propTypes = emojisListPropTypes;
+EmojisList.defaultProps = emojisListDefaultProps;
+EmojisList.displayName = 'EmojisList';

package/es/EmojisList/css/EmojisList.module.css

@@ -0,0 +1,50 @@
+.varClass {
+  --emoji-groupName-size: var(--zd_font_size13);
+  --emoji-singleList-size: var(--zd_size32);
+  --emoji-multipleList-size: var(--zd_size300);
+}
+
+.emojisList {
+  composes: varClass;
+  transition: 0.2s ease;
+  flex-direction: row;
+  flex-shrink: 0;
+  width: 100% ;
+  word-wrap: break-word;
+  font-size: 0 ;
+}
+
+.emojisListHide {
+  display: none;
+}
+
+.emojisListSingle {
+  height: var(--emoji-singleList-size);
+  white-space: nowrap;
+  overflow-x: auto;
+}
+
+.emojisListMultiple {
+  height: var(--emoji-multipleList-size);
+  overflow-y: auto;
+}
+
+.groupName {
+  width: 100% ;
+  font-size: var(--emoji-groupName-size);
+  text-transform: capitalize;
+  color: var(--imlib_chat_components_emojiPopup_titleColor);
+  padding: var(--zd_size8) var(--zd_size10) ;
+  margin-bottom: var(--zd_size5) ;
+}
+
+.groupContainer {
+  font-size: 0 ;
+}
+.groupSeperate {
+  display: inline-block;
+}
+
+.groupAll {
+  display: inline;
+}

package/es/EmojisList/css/cssJSLogic.js

@@ -0,0 +1,25 @@
+/** ** Methods *** */
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
+export default function cssJSLogic(props, style) {
+  const {
+    rowType,
+    isShowGroupBasedList,
+    isShowOnlyContent,
+    isEmpty
+  } = props;
+  const emojisListClass = compileClassNames({
+    [style.emojisList]: true,
+    [style.emojisListSingle]: rowType === 'single',
+    [style.emojisListMultiple]: rowType === 'multiple',
+    [style.emojisListHide]: isShowOnlyContent ? isEmpty : false
+  });
+  const groupClass = compileClassNames({
+    [style.groupContainer]: true,
+    [style.groupSeperate]: !!isShowGroupBasedList,
+    [style.groupAll]: !isShowGroupBasedList
+  });
+  return {
+    emojisListClass,
+    groupClass
+  };
+}

package/es/EmojisList/index.js

@@ -0,0 +1 @@
+export { default as EmojisList } from "./EmojisList";

package/es/EmojisList/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const emojisListDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject,
+  rowType: 'multiple',
+  isShowGroupBasedList: true,
+  isShowOnlyContent: false
+};
+export default emojisListDefaultProps;

package/es/EmojisList/props/propTypes.js

@@ -0,0 +1,20 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const emojisListPropTypes = {
+  emojisList: PropTypes.object.isRequired,
+  customProps: PropTypes.shape({
+    emojiProps: PropTypes.object,
+    emojisEmptyStateProps: PropTypes.object
+  }),
+  customStyle: PropTypes.object,
+  getMethods: PropTypes.func,
+  isShowGroupBasedList: PropTypes.bool,
+  isShowOnlyContent: PropTypes.bool,
+  onChangeGroup: PropTypes.func,
+  onSelect: PropTypes.func,
+  renderEmpty: PropTypes.func,
+  rowType: PropTypes.oneOf(['single', 'multiple']),
+  searchString: PropTypes.string,
+  selectedGroup: PropTypes.string
+};
+export default emojisListPropTypes;

package/es/MessageActionsMore/MessageActionsMore.js

@@ -2,8 +2,8 @@
 import React, { useCallback, useMemo } from 'react';
 /** ** Components *** */
 
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
+import Popup from '@zohodesk/components/es/Popup/Popup';
+import DropBox from '@zohodesk/components/es/DropBox/DropBox';
 /** ** Constants *** */
 
 import messageActionsMoreDefaultProps from "./props/defaultProps";

package/es/MessageActionsMore/props/propTypes.js

@@ -1,5 +1,8 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import { popupPosition, popupSize } from "../../constants/propConstants/popupPropConstants";
 const messageActionsMorePropTypes = {
   actions: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired,
@@ -8,7 +11,7 @@ const messageActionsMorePropTypes = {
   renderMoreIcon: PropTypes.func.isRequired,
   setRetainMessageActions: PropTypes.func,
   customStyle: PropTypes.object,
-  popupSize: PropTypes.oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
-  defaultPopupPosition: PropTypes.oneOf([['bottomCenter', 'bottomLeftToRight', 'bottomCenterToRight', 'bottomRightToLeft', 'bottomCenterToLeft', 'topCenter', 'topLeftToRight', 'topCenterToRight', 'topRightToLeft', 'topCenterToLeft', 'rightTopToBottom', 'rightCenterToBottom', 'rightCenter', 'rightBottomToTop', 'rightCenterToTop', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'bottomRight', 'bottomLeft', 'topRight', 'topLeft', 'rightBottom', 'rightTop', 'leftBottom', 'leftTop']])
+  popupSize: PropTypes.oneOf(popupSize),
+  defaultPopupPosition: PropTypes.oneOf(popupPosition)
 };
 export default messageActionsMorePropTypes;

package/es/MessageActionsWrapper/MessageActionsWrapper.js

@@ -2,7 +2,7 @@
 import React, { useCallback } from 'react';
 /** ** Components *** */
 
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/Layout';
 import MessageActionsMore from "../MessageActionsMore/MessageActionsMore";
 /** ** Hooks *** */
 

package/es/Theme/ThemeAssets.js

@@ -1,6 +1,6 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
-import '@zohodesk/components/lib/common/boxShadow.module.css';
+import '@zohodesk/components/es/common/boxShadow.module.css';
 /* component pkg - default mode, themes */
 
 import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css';
@@ -64,9 +64,27 @@ import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
 import '@zohodesk/variables/assets/fontsizeVariables.module.css';
-import '@zohodesk/variables/lib/fontFamilyVariables.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

@@ -1,11 +1,14 @@
 /** ** Libraries *** */
 import React, { useMemo, useCallback } from 'react';
+/** ** Providers *** */
+
+import ThemeContext from '@zohoim/chat-components-hooks/es/Theme/ThemeContext';
 /** ** Constants *** */
 
 import themeWrapperPropTypes from "./props/propTypes";
 import themeWrapperDefaultProps from "./props/defaultProps";
-import { styleTagId } from "./constants";
-import { MSG_ACTION_POPUP_PORTAL } from "../constants";
+import { styleTagId } from '@zohoim/chat-components-utils/es/constants/themeConstants';
+import { MSG_ACTION_POPUP_PORTAL, EDITOR_POPUP_PORTAL, EDITOR_POPUP_TARGET_PORTAL } from "../constants";
 /** ** Components *** */
 
 import ThemeAssets from "./ThemeAssets";
@@ -29,7 +32,8 @@ export default function ThemeWrapper(props) {
     theme: propTheme,
     modeKey,
     themeKey,
-    tooltipCustomStyle
+    tooltipCustomStyle,
+    direction
   } = props;
   /** ** containerRef for Tooltip *** */
 
@@ -38,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,
@@ -60,18 +66,27 @@ export default function ThemeWrapper(props) {
   });
   /** ** Children Render Functions   *** */
 
-  const renderPortal = useCallback(() => /*#__PURE__*/React.createElement("div", {
+  const renderPortal = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-portal": MSG_ACTION_POPUP_PORTAL
-  }), []);
-  const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-portal": EDITOR_POPUP_PORTAL
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-portal": EDITOR_POPUP_TARGET_PORTAL
+  })), []);
+  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,
     getContainerRef: getContainerRef
   }) : null), [getContainerRef, needTooltip, needThemeAssets, tooltipCustomStyle]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: {
+      mode: propMode,
+      direction
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     id: styleTagId,
     ...wrapperDivProps,
     style: {
@@ -80,7 +95,7 @@ export default function ThemeWrapper(props) {
     }
   }, renderStyle(), /*#__PURE__*/React.createElement(Container, {
     eleRef: containerRef
-  }, children), renderPortal(), renderAssets());
+  }, children), renderPortal(), renderAssets()));
 }
 ThemeWrapper.propTypes = themeWrapperPropTypes;
 ThemeWrapper.defaultProps = themeWrapperDefaultProps;

package/es/Theme/TooltipWrapper.js

@@ -9,7 +9,7 @@ import Tooltip from '@zohodesk/components/es/Tooltip/Tooltip';
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Methods *** */
 
-import { setLibraryConfig, getLibraryConfig } from '@zohodesk/components/lib/Provider/Config';
+import { setLibraryConfig, getLibraryConfig } from '@zohodesk/components/es/Provider/Config';
 /** ** Constants *** */
 
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';

package/es/Theme/props/defaultProps.js

@@ -5,6 +5,7 @@ const themeWrapperDefaultProps = {
   mode: 'LIGHT',
   theme: 'BLUE',
   needTooltip: true,
-  tooltipCustomStyle: dummyObject
+  tooltipCustomStyle: dummyObject,
+  direction: 'ltr'
 };
 export default themeWrapperDefaultProps;

package/es/Theme/props/propTypes.js

@@ -9,6 +9,7 @@ const themeWrapperPropTypes = {
   needTooltip: PropTypes.bool,
   themeConfigurations: PropTypes.object,
   themeKey: PropTypes.string,
-  tooltipCustomStyle: PropTypes.object
+  tooltipCustomStyle: PropTypes.object,
+  direction: PropTypes.oneOf(['ltr', 'rtl'])
 };
 export default themeWrapperPropTypes;

package/es/Theme/utils/getThemeConfigurations.js

@@ -1,19 +1,4 @@
-import { modeConstants, themeConstants } from "../constants";
-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";
+import { modeConstants, themeConstants } from '@zohoim/chat-components-utils/es/constants/themeConstants';
 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/constants/index.js

@@ -1 +1,8 @@
-export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
+export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
+export const EDITOR_POPUP_PORTAL = 'EDITOR_POPUP_PORTAL';
+export const EDITOR_POPUP_TARGET_PORTAL = 'EDITOR_POPUP_TARGET_PORTAL';
+const version = '1.4.9';
+export const defaultEditorURL = // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.js`;
+// `https://static.zohocdn.com/rtelibrary/${version}/js/rte.js`;
+// `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.min.js`;
+`https://static.zohocdn.com/rtelibrary/${version}/js/rte.min.js`;

package/es/constants/propConstants/editorPropConstants.js

@@ -0,0 +1,3 @@
+export const formats = ['strong', 'em', 'underline', 'link', 'strikeThrough', 'align', 'fontSize', 'fontFamily', 'fontColor', 'highlight', 'script', 'lineHeight', 'direction', 'headings', 'clearFormatting', 'inlineQuote', 'indent', 'formatPainter'];
+export const features = ['hr', 'images', 'tables', 'list', 'code_block', 'video', 'blockquote', 'embed', 'html'];
+export const langCode = ['en_US', 'ar', 'as', 'bg', 'bn', 'brx', 'ca', 'cs', 'da', 'de', 'doi', 'el', 'es', 'et', 'fi', 'fr', 'ga', 'gu', 'hi', 'hr', 'hu', 'id', 'in', 'it', 'iw', 'ja', 'kn', 'ko', 'kok', 'ks', 'lt', 'mai', 'ml', 'mni', 'mr', 'ms', 'my', 'ne', 'nl', 'no', 'or', 'pa', 'pl', 'pt_BR', 'pt', 'ro', 'ru', 'sa', 'sat', 'sd', 'si', 'sk', 'sv', 'ta', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh_CN', 'zh_HK', 'zh_TW', 'zh'];

package/es/constants/propConstants/popupPropConstants.js

@@ -0,0 +1,2 @@
+export const popupSize = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default'];
+export const popupPosition = ['bottomCenter', 'bottomLeftToRight', 'bottomCenterToRight', 'bottomRightToLeft', 'bottomCenterToLeft', 'topCenter', 'topLeftToRight', 'topCenterToRight', 'topRightToLeft', 'topCenterToLeft', 'rightTopToBottom', 'rightCenterToBottom', 'rightCenter', 'rightBottomToTop', 'rightCenterToTop', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'bottomRight', 'bottomLeft', 'topRight', 'topLeft', 'rightBottom', 'rightTop', 'leftBottom', 'leftTop'];

package/es/im/IMAttachmentHandler/IMAttachmentHandler.js

@@ -0,0 +1,50 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Components *** */
+
+import AttachmentHandler from "../../AttachmentHandler/AttachmentHandler";
+/** ** Hooks *** */
+
+import useIMAttachmentHandler from '@zohoim/chat-components-hooks/es/im/IMAttachmentHandler/useIMAttachmentHandler';
+/** ** Constants *** */
+
+import imAttachmentHandlerDefaultProps from "./props/defaultProps";
+import imAttachmentHandlerPropTypes from "./props/propTypes";
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+export default function IMAttachmentHandler(props) {
+  const {
+    customProps = dummyObject,
+    iconName,
+    iconSize,
+    iconTitle,
+    renderCustomIcon,
+    isMultiAttachment,
+    onAttach: propOnAttach,
+    attachmentType,
+    integrationService
+  } = props;
+  const {
+    attachmentHandlerProps = dummyObject
+  } = customProps;
+  const {
+    onAttach,
+    supportedTypes
+  } = useIMAttachmentHandler({
+    onAttach: propOnAttach,
+    attachmentType,
+    integrationService
+  });
+  return /*#__PURE__*/React.createElement(AttachmentHandler, {
+    iconName: iconName,
+    iconSize: iconSize,
+    iconTitle: iconTitle,
+    isMultiAttachment: isMultiAttachment,
+    onAttach: onAttach,
+    renderCustomIcon: renderCustomIcon,
+    supportedFileTypes: supportedTypes,
+    ...attachmentHandlerProps
+  });
+}
+IMAttachmentHandler.propTypes = imAttachmentHandlerPropTypes;
+IMAttachmentHandler.defaultProps = imAttachmentHandlerDefaultProps;
+IMAttachmentHandler.displayName = 'IMAttachmentHandler';

package/es/im/IMAttachmentHandler/index.js

@@ -0,0 +1 @@
+export { default as IMAttachmentHandler } from "./IMAttachmentHandler";

package/es/im/IMAttachmentHandler/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const imAttachmentHandlerDefaultProps = {
+  customStyle: dummyObject,
+  iconName: 'ZD-TT-image',
+  iconSize: '14',
+  iconTitle: 'Upload',
+  isMultiAttachment: false
+};
+export default imAttachmentHandlerDefaultProps;

package/es/im/IMAttachmentHandler/props/propTypes.js

@@ -0,0 +1,28 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import integrationConstants from '@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants';
+const {
+  WHATSAPP,
+  TELEGRAM,
+  INSTAGRAM,
+  WECHAT,
+  TWILLIO,
+  LINE,
+  IM_TALK,
+  FACEBOOKMESSENGER
+} = integrationConstants;
+const imAttachmentHandlerPropTypes = {
+  customStyle: PropTypes.object,
+  iconName: PropTypes.string.isRequired,
+  iconSize: PropTypes.string,
+  iconTitle: PropTypes.string,
+  renderCustomIcon: PropTypes.func,
+  isMultiAttachment: PropTypes.bool,
+  onAttach: PropTypes.func,
+  customProps: PropTypes.object,
+  attachmentType: PropTypes.oneOf(['image', 'document', 'documentAndImage']),
+  integrationService: PropTypes.oneOf([WHATSAPP, TELEGRAM, INSTAGRAM, WECHAT, TWILLIO, LINE, IM_TALK, FACEBOOKMESSENGER])
+};
+export default imAttachmentHandlerPropTypes;

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;
 }