@zohoim/chat-components 1.1.4-beta.1 → 1.1.4-beta.2

package/es/im/ReplyEditor/ReplyEditor.js

@@ -1,8 +1,10 @@
+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); }
+
 /** ** Libraries *** */
 import React, { useMemo } from 'react';
 /** ** Components *** */
 
-import Editor from "../../rte/Editor/Editor";
+import Editor from '../../rte/Editor/Editor';
 import { Container } from '@zohodesk/components/es/Layout';
 /** ** Hooks *** */
 
@@ -11,14 +13,14 @@ import useReplyEditor from '@zohoim/chat-components-hooks/es/im/ReplyEditor/useR
 /** ** Constants *** */
 
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-import replyEditorDefaultProps from "./props/defaultProps";
-import replyEditorPropTypes from "./props/propTypes";
+import replyEditorDefaultProps from './props/defaultProps';
+import replyEditorPropTypes from './props/propTypes';
 /** ** Methods *** */
 
-import cssJSLogic from "./css/cssJSLogic";
+import cssJSLogic from './css/cssJSLogic';
 /** ** Styles *** */
 
-import style from "./css/ReplyEditor.module.css";
+import style from './css/ReplyEditor.module.css';
 export default function ReplyEditor(props) {
   const {
     id,
@@ -79,7 +81,7 @@ export default function ReplyEditor(props) {
     className: newStyle.replyEditor
   }, isRenderEditor ? /*#__PURE__*/React.createElement(Container, {
     className: editorClass
-  }, /*#__PURE__*/React.createElement(Editor, {
+  }, /*#__PURE__*/React.createElement(Editor, _extends({
     appearance: appearance,
     content: content,
     customStyle: editorNewCustomStyle,
@@ -94,9 +96,8 @@ export default function ReplyEditor(props) {
     onKeyDown: onKeyDown,
     onPaste: onPaste,
     onReadyCallback: onReadyCallback,
-    placeHolder: placeHolder,
-    ...editorProps
-  })) : null);
+    placeHolder: placeHolder
+  }, editorProps))) : null);
 }
 ReplyEditor.propTypes = replyEditorPropTypes;
 ReplyEditor.defaultProps = replyEditorDefaultProps;

package/es/im/ReplyEditor/index.js

@@ -1 +1 @@
-export { default as ReplyEditor } from "./ReplyEditor";
+export { default as ReplyEditor } from './ReplyEditor';

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

@@ -2,7 +2,7 @@
 import PropTypes from 'prop-types';
 /** ** Constants *** */
 
-import { features, formats } from "../../../constants/propConstants/editorPropConstants";
+import { features, formats } from '../../../constants/propConstants/editorPropConstants';
 const replyEditorPropTypes = {
   customStyle: PropTypes.object,
   id: PropTypes.string,

package/es/im/ReplyEditorExtensions/ReplyEditorExtensions.js

@@ -1,10 +1,12 @@
+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); }
+
 /** ** Libraries *** */
 import React, { useCallback, useMemo } from 'react';
 /** ** Components *** */
 
 import { Container, Box } from '@zohodesk/components/es/Layout';
-import IMAttachmentHandler from "../IMAttachmentHandler/IMAttachmentHandler";
-import EmojiPopup from "../../EmojiPopup/EmojiPopup";
+import IMAttachmentHandler from '../IMAttachmentHandler/IMAttachmentHandler';
+import EmojiPopup from '../../EmojiPopup/EmojiPopup';
 /** ** Hooks *** */
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
@@ -12,11 +14,11 @@ import useReplyEditorExtensions from '@zohoim/chat-components-hooks/es/im/ReplyE
 /** ** Constants *** */
 
 import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-import replyEditorExtensionsDefaultProps from "./props/defaultProps";
-import replyEditorExtensionsPropTypes from "./props/propTypes";
+import replyEditorExtensionsDefaultProps from './props/defaultProps';
+import replyEditorExtensionsPropTypes from './props/propTypes';
 /** ** Styles *** */
 
-import style from "./css/ReplyEditorExtensions.module.css";
+import style from './css/ReplyEditorExtensions.module.css';
 export default function ReplyEditorExtensions(props) {
   const {
     customStyle,
@@ -39,7 +41,7 @@ export default function ReplyEditorExtensions(props) {
     const {
       needFocusOnSelect
     } = componentProps;
-    return /*#__PURE__*/React.createElement(EmojiPopup, {
+    return /*#__PURE__*/React.createElement(EmojiPopup, _extends({
       key: id,
       onPopupClose: onPopupClose,
       onPopupOpen: onPopupOpen,
@@ -48,35 +50,32 @@ export default function ReplyEditorExtensions(props) {
           content: value,
           needFocus: needFocusOnSelect
         });
-      },
-      ...componentProps
-    });
+      }
+    }, componentProps));
   }, []);
   const handleRenderImageExtension = useCallback(_ref2 => {
     let {
       id,
       componentProps
     } = _ref2;
-    return /*#__PURE__*/React.createElement(IMAttachmentHandler, {
+    return /*#__PURE__*/React.createElement(IMAttachmentHandler, _extends({
       key: id,
       attachmentType: "image",
       iconName: "ZD-TT-image",
-      iconSize: "14",
-      ...componentProps
-    });
+      iconSize: "14"
+    }, componentProps));
   }, []);
   const handleRenderFileExtension = useCallback(_ref3 => {
     let {
       id,
       componentProps
     } = _ref3;
-    return /*#__PURE__*/React.createElement(IMAttachmentHandler, {
+    return /*#__PURE__*/React.createElement(IMAttachmentHandler, _extends({
       key: id,
       attachmentType: "document",
       iconName: "ZD-TT-ttAttach",
-      iconSize: "14",
-      ...componentProps
-    });
+      iconSize: "14"
+    }, componentProps));
   }, []);
   const defaultRenderMethod = useMemo(() => ({
     emoji: {

package/es/im/ReplyEditorExtensions/index.js

@@ -1 +1 @@
-export { default as ReplyEditorExtensions } from "./ReplyEditorExtensions";
+export { default as ReplyEditorExtensions } from './ReplyEditorExtensions';

package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js

@@ -1,10 +1,12 @@
+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); }
+
 /** ** Libraries *** */
 import React, { useMemo, useCallback } from 'react';
 /** ** Components *** */
 
 import { Container } from '@zohodesk/components/es/Layout';
-import Emojis from "../../Emojis/Emojis";
-import ReplyEditorSuggestionsPopup from "../ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup";
+import Emojis from '../../Emojis/Emojis';
+import ReplyEditorSuggestionsPopup from '../ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup';
 /** ** Hooks *** */
 
 import useReplyEditorSuggestions from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestions/useReplyEditorSuggestions';
@@ -12,12 +14,12 @@ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
 
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
-import replyEditorSuggestionsDefaultProps from "./props/defaultProps";
-import replyEditorSuggestionsPropTypes from "./props/propTypes";
+import replyEditorSuggestionsDefaultProps from './props/defaultProps';
+import replyEditorSuggestionsPropTypes from './props/propTypes';
 import { emojiRegex } from '@zohoim/chat-components-utils/es/constants/regexConstants';
 /** ** Styles *** */
 
-import style from "./css/ReplyEditorSuggestions.module.css";
+import style from './css/ReplyEditorSuggestions.module.css';
 export default function ReplyEditorSuggestions(props) {
   const {
     customStyle,
@@ -49,7 +51,7 @@ export default function ReplyEditorSuggestions(props) {
     } = componentProps || {}; // (-1) -> ':' string is not valid for count.
 
     const isShowEmojiPopup = searchText.length - 1 >= searchTextLenForShow;
-    return isShowEmojiPopup ? /*#__PURE__*/React.createElement(Emojis, {
+    return isShowEmojiPopup ? /*#__PURE__*/React.createElement(Emojis, _extends({
       emojisRowType: "single",
       getMethods: getMethods,
       isShowGroupBasedList: false,
@@ -61,9 +63,8 @@ export default function ReplyEditorSuggestions(props) {
           content: value
         });
       },
-      searchString: searchText,
-      ...componentProps
-    }) : null;
+      searchString: searchText
+    }, componentProps)) : null;
   }, []);
   const defaultRenderMethod = useMemo(() => ({
     ':': handleRenderEmoji,
@@ -82,13 +83,11 @@ export default function ReplyEditorSuggestions(props) {
   });
   return /*#__PURE__*/React.createElement(Container, {
     className: newStyle.suggestionPopup
-  }, /*#__PURE__*/React.createElement(ReplyEditorSuggestionsPopup, {
+  }, /*#__PURE__*/React.createElement(ReplyEditorSuggestionsPopup, _extends({
     onClose: onClose,
     suggestionElement: suggestionElement,
-    targetPosition: position,
-    ...replyEditorSuggestionsPopupProps,
-    ...popupProps
-  }));
+    targetPosition: position
+  }, replyEditorSuggestionsPopupProps, popupProps)));
 }
 ReplyEditorSuggestions.propTypes = replyEditorSuggestionsPropTypes;
 ReplyEditorSuggestions.defaultProps = replyEditorSuggestionsDefaultProps;

package/es/im/ReplyEditorSuggestions/index.js

@@ -1 +1 @@
-export { default as ReplyEditorSuggestions } from "./ReplyEditorSuggestions";
+export { default as ReplyEditorSuggestions } from './ReplyEditorSuggestions';

package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js

@@ -1,3 +1,5 @@
+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); }
+
 /** ** Libraries *** */
 import React from 'react';
 /** ** Components *** */
@@ -11,13 +13,13 @@ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import useReplyEditorSuggestionsPopup from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestionsPopup/useReplyEditorSuggestionsPopup';
 /** ** Constants *** */
 
-import replyEditorSuggestionsPopupDefaultProps from "./props/defaultProps";
-import replyEditorSuggestionsPopupPropTypes from "./props/propTypes";
+import replyEditorSuggestionsPopupDefaultProps from './props/defaultProps';
+import replyEditorSuggestionsPopupPropTypes from './props/propTypes';
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
-import { EDITOR_POPUP_PORTAL, EDITOR_POPUP_TARGET_PORTAL } from "../../constants";
+import { EDITOR_POPUP_PORTAL, EDITOR_POPUP_TARGET_PORTAL } from '../../constants';
 /** ** Styles *** */
 
-import style from "./css/ReplyEditorSuggestionsPopup.module.css";
+import style from './css/ReplyEditorSuggestionsPopup.module.css';
 export function ReplyEditorSuggestionsPopupComp(props) {
   const {
     customStyle,
@@ -67,7 +69,7 @@ export function ReplyEditorSuggestionsPopupComp(props) {
     ref: getTargetRef,
     className: newStyle.hiddenTarget,
     style: targetElementStyle
-  }))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+  }))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, _extends({
     boxPosition: position,
     customStyle: dummyObject,
     getRef: getContainerRef,
@@ -78,9 +80,8 @@ export function ReplyEditorSuggestionsPopupComp(props) {
     onClick: removeClose,
     portalId: EDITOR_POPUP_PORTAL,
     positionsOffset: positionsOffset,
-    size: popupSize,
-    ...dropBoxProps
-  }, suggestionElement) : null);
+    size: popupSize
+  }, dropBoxProps), suggestionElement) : null);
 }
 const ReplyEditorSuggestionsPopup = Popup(ReplyEditorSuggestionsPopupComp, undefined, undefined, {
   isAbsolutePositioningNeeded: false

package/es/im/ReplyEditorSuggestionsPopup/index.js

@@ -1 +1 @@
-export { default as ReplyEditorSuggestionsPopup } from "./ReplyEditorSuggestionsPopup";
+export { default as ReplyEditorSuggestionsPopup } from './ReplyEditorSuggestionsPopup';

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

@@ -2,7 +2,7 @@
 import PropTypes from 'prop-types';
 /** ** Constants *** */
 
-import { popupSize, popupPosition } from "../../../constants/propConstants/popupPropConstants";
+import { popupSize, popupPosition } from '../../../constants/propConstants/popupPropConstants';
 const replyEditorSuggestionsPopupPropTypes = {
   customStyle: PropTypes.object,
   targetPosition: PropTypes.shape({

package/es/im/index.js

@@ -1,16 +1,16 @@
-export * from "./IMIntegrationIcon";
-export * from "./IMMessage";
-export * from "./IMPermaLink";
-export * from "./IMMessageMeta";
-export * from "./IMMessageMetaInfo";
-export * from "./IMMessageContent";
-export * from "./IMTextBubble";
-export * from "./IMReplyBubble";
-export * from "./ArticleBubble";
-export * from "./IMAttachmentHandler";
-export * from "./ReplyComposer";
-export * from "./ReplyEditor";
-export * from "./ReplyEditorSuggestions";
-export * from "./ReplyEditorExtensions";
-export * from "./ReplyComposerFooter";
-export * from "./ReplyEditorSuggestionsPopup";
+export * from './IMIntegrationIcon';
+export * from './IMMessage';
+export * from './IMPermaLink';
+export * from './IMMessageMeta';
+export * from './IMMessageMetaInfo';
+export * from './IMMessageContent';
+export * from './IMTextBubble';
+export * from './IMReplyBubble';
+export * from './ArticleBubble';
+export * from './IMAttachmentHandler';
+export * from './ReplyComposer';
+export * from './ReplyEditor';
+export * from './ReplyEditorSuggestions';
+export * from './ReplyEditorExtensions';
+export * from './ReplyComposerFooter';
+export * from './ReplyEditorSuggestionsPopup';

package/es/index.js

@@ -1,43 +1,43 @@
-export * from "./MessageBubble";
-export * from "./MessageActionsWrapper";
-export * from "./MessageActions";
-export * from "./MessageBox";
-export * from "./ActionIcon";
-export * from "./ActionIconWrapper";
-export * from "./MessageActionsMore";
-export * from "./MessageAvatar";
-export * from "./MoreActionItem";
-export * from "./MessageAction";
-export * from "./Theme";
-export * from "./Message";
-export * from "./AudioBubble";
-export * from "./AttachmentBubble";
-export * from "./AttachmentIcon";
-export * from "./VideoBubble";
-export * from "./ImageBubble";
-export * from "./TextBubble";
-export * from "./LocationBubble";
-export * from "./AttachmentBubbleInfo";
-export * from "./Audio";
-export * from "./Video";
-export * from "./ReplyBubble";
-export * from "./ReplyBubbleHeader";
-export * from "./LazyLoadImage";
-export * from "./ReplyBubbleContent";
-export * from "./MessageStatus";
-export * from "./im";
-export * from "./Emojis";
-export * from "./EmojisList";
-export * from "./Emoji";
-export * from "./EmojiPopup";
-export * from "./EmojisHeader";
-export * from "./EmojisFooter";
-export * from "./EmojisEmptyState";
-export * from "./rte";
-export * from "./AttachmentHandler";
-export * from "./AttachmentPreview";
-export * from "./AttachmentPreviewHeader";
-export * from "./AttachmentPreviewBody";
+export * from './MessageBubble';
+export * from './MessageActionsWrapper';
+export * from './MessageActions';
+export * from './MessageBox';
+export * from './ActionIcon';
+export * from './ActionIconWrapper';
+export * from './MessageActionsMore';
+export * from './MessageAvatar';
+export * from './MoreActionItem';
+export * from './MessageAction';
+export * from './Theme';
+export * from './Message';
+export * from './AudioBubble';
+export * from './AttachmentBubble';
+export * from './AttachmentIcon';
+export * from './VideoBubble';
+export * from './ImageBubble';
+export * from './TextBubble';
+export * from './LocationBubble';
+export * from './AttachmentBubbleInfo';
+export * from './Audio';
+export * from './Video';
+export * from './ReplyBubble';
+export * from './ReplyBubbleHeader';
+export * from './LazyLoadImage';
+export * from './ReplyBubbleContent';
+export * from './MessageStatus';
+export * from './im';
+export * from './Emojis';
+export * from './EmojisList';
+export * from './Emoji';
+export * from './EmojiPopup';
+export * from './EmojisHeader';
+export * from './EmojisFooter';
+export * from './EmojisEmptyState';
+export * from './rte';
+export * from './AttachmentHandler';
+export * from './AttachmentPreview';
+export * from './AttachmentPreviewHeader';
+export * from './AttachmentPreviewBody';
 /** * CONSTANTS ** */
 
-export * from "./constants";
+export * from './constants';

package/es/rte/Editor/Editor.js

@@ -6,12 +6,12 @@ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import useEditor from '@zohoim/chat-components-hooks/es/rte/Editor/useEditor';
 /** ** Constants *** */
 
-import editorDefaultProps from "./props/defaultProps";
-import editorPropTypes from "./props/propTypes";
-import { defaultEditorURL } from "../../constants";
+import editorDefaultProps from './props/defaultProps';
+import editorPropTypes from './props/propTypes';
+import { defaultEditorURL } from '../../constants';
 /** ** Styles *** */
 
-import style from "./css/Editor.module.css";
+import style from './css/Editor.module.css';
 export default function Editor(props) {
   const {
     customStyle,

package/es/rte/Editor/index.js

@@ -1 +1 @@
-export { default as Editor } from "./Editor";
+export { default as Editor } from './Editor';

package/es/rte/Editor/props/propTypes.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 /** ** Constants *** */
 
 import { modeConstants } from '@zohoim/chat-components-utils/es/constants/themeConstants';
-import { features, formats, langCode } from "../../../constants/propConstants/editorPropConstants";
+import { features, formats, langCode } from '../../../constants/propConstants/editorPropConstants';
 const editorPropTypes = {
   id: PropTypes.string.isRequired,
   domId: PropTypes.string,

package/es/rte/index.js

@@ -1 +1 @@
-export * from "./Editor";
+export * from './Editor';

package/lib/ActionIcon/ActionIcon.js

@@ -0,0 +1,97 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ActionIcon;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ActionIconWrapper = _interopRequireDefault(require("../ActionIconWrapper/ActionIconWrapper"));
+
+var _Reload = _interopRequireDefault(require("@zohodesk/icon/es/general/Reload"));
+
+var _Copy = _interopRequireDefault(require("@zohodesk/icon/es/general/Copy"));
+
+var _Cloud = _interopRequireDefault(require("@zohodesk/icon/es/general/Cloud"));
+
+var _Delete = _interopRequireDefault(require("@zohodesk/icon/es/general/Delete"));
+
+var _EmailForward = _interopRequireDefault(require("@zohodesk/icon/es/channels/EmailForward"));
+
+var _Reply = _interopRequireDefault(require("../icons/iconSrc/common/Reply"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _messageActionConstants = require("@zohoim/chat-components-utils/es/constants/messageActionConstants");
+
+var _ActionIconModule = _interopRequireDefault(require("./css/ActionIcon.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var REPLY = _messageActionConstants.defaultMessageActions.REPLY,
+    COPY = _messageActionConstants.defaultMessageActions.COPY,
+    DOWNLOAD = _messageActionConstants.defaultMessageActions.DOWNLOAD,
+    RESEND = _messageActionConstants.defaultMessageActions.RESEND,
+    DELETE = _messageActionConstants.defaultMessageActions.DELETE,
+    FORWARD = _messageActionConstants.defaultMessageActions.FORWARD;
+
+function ActionIcon(props) {
+  var customStyle = props.customStyle,
+      customProps = props.customProps,
+      onClick = props.onClick,
+      onMouseEnter = props.onMouseEnter,
+      id = props.id,
+      title = props.title,
+      isDisabled = props.isDisabled,
+      needIconOnly = props.needIconOnly,
+      isActive = props.isActive;
+  var _customProps$actionIc = customProps.actionIconWrapperProps,
+      actionIconWrapperProps = _customProps$actionIc === void 0 ? _emptyConstants.dummyObject : _customProps$actionIc;
+  /* External customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_ActionIconModule["default"], customStyle);
+  var iconStyle = (0, _react.useMemo)(function () {
+    return {
+      base: newStyle.icon
+    };
+  }, [newStyle.icon]);
+  var renderIcon = (0, _react.useCallback)(function () {
+    var _iconMapping;
+
+    var iconMapping = (_iconMapping = {}, _defineProperty(_iconMapping, REPLY, _Reply["default"]), _defineProperty(_iconMapping, COPY, _Copy["default"]), _defineProperty(_iconMapping, DOWNLOAD, _Cloud["default"]), _defineProperty(_iconMapping, RESEND, _Reload["default"]), _defineProperty(_iconMapping, DELETE, _Delete["default"]), _defineProperty(_iconMapping, FORWARD, _EmailForward["default"]), _iconMapping);
+    var IconComponent = iconMapping[id];
+    return IconComponent ? /*#__PURE__*/_react["default"].createElement(IconComponent, {
+      customStyle: iconStyle
+    }) : null;
+  }, [iconStyle, id]);
+  return needIconOnly ? renderIcon() : /*#__PURE__*/_react["default"].createElement(_ActionIconWrapper["default"], _extends({
+    id: id,
+    isActive: isActive,
+    isDisabled: isDisabled,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    renderIcon: renderIcon,
+    title: title
+  }, actionIconWrapperProps));
+}
+
+ActionIcon.propTypes = _propTypes["default"];
+ActionIcon.defaultProps = _defaultProps["default"];
+ActionIcon.displayName = 'ActionIcon';

package/lib/ActionIcon/css/ActionIcon.module.css

@@ -0,0 +1,8 @@
+.varClass {
+  --actionIcon_icon_size: 15px;
+}
+
+.icon {
+  width: var(--zd_size15) ;
+  height: var(--zd_size15) ;
+}

package/lib/ActionIcon/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ActionIcon", {
+  enumerable: true,
+  get: function get() {
+    return _ActionIcon["default"];
+  }
+});
+
+var _ActionIcon = _interopRequireDefault(require("./ActionIcon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/ActionIcon/props/defaultProps.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var actionIconDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  customProps: _emptyConstants.dummyObject,
+  needIconOnly: false
+};
+var _default = actionIconDefaultProps;
+exports["default"] = _default;

package/lib/ActionIcon/props/propTypes.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _messageActionConstants = require("@zohoim/chat-components-utils/es/constants/messageActionConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var actionIconPropTypes = {
+  id: _propTypes["default"].oneOf(Object.values(_messageActionConstants.defaultMessageActions)).isRequired,
+  onClick: _propTypes["default"].func.isRequired,
+  customProps: _propTypes["default"].shape({
+    actionIconWrapperProps: _propTypes["default"].object
+  }),
+  customStyle: _propTypes["default"].object,
+  isDisabled: _propTypes["default"].bool,
+  needIconOnly: _propTypes["default"].bool,
+  title: _propTypes["default"].string,
+  isActive: _propTypes["default"].bool
+};
+var _default = actionIconPropTypes;
+exports["default"] = _default;