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

package/es/icons/iconSrc/messageStatus/DoubleTick.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "IM_doubleTick",
     viewBox: "0 0 64 64"
   }, " ", /*#__PURE__*/React.createElement("polygon", {

package/es/icons/iconSrc/messageStatus/Failed.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "IM_failed",
     viewBox: "0 0 64 64"
   }, " ", /*#__PURE__*/React.createElement("path", {

package/es/icons/iconSrc/messageStatus/Tick.js

@@ -2,7 +2,8 @@
 import React from 'react';
 import Icon from '@zohodesk/icon/es/Icon/Icon';
 export default function IconComponent(props) {
-  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React.createElement(Icon, { ...props
+  }, /*#__PURE__*/React.createElement("svg", {
     id: "IM_tick",
     viewBox: "0 0 64 64"
   }, " ", /*#__PURE__*/React.createElement("polygon", {

package/es/im/IMAttachmentHandler/IMAttachmentHandler.js

@@ -1,5 +1,3 @@
-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 *** */
@@ -36,15 +34,16 @@ export default function IMAttachmentHandler(props) {
     attachmentType,
     integrationService
   });
-  return /*#__PURE__*/React.createElement(AttachmentHandler, _extends({
+  return /*#__PURE__*/React.createElement(AttachmentHandler, {
     iconName: iconName,
     iconSize: iconSize,
     iconTitle: iconTitle,
     isMultiAttachment: isMultiAttachment,
     onAttach: onAttach,
     renderCustomIcon: renderCustomIcon,
-    supportedFileTypes: supportedTypes
-  }, attachmentHandlerProps));
+    supportedFileTypes: supportedTypes,
+    ...attachmentHandlerProps
+  });
 }
 IMAttachmentHandler.propTypes = imAttachmentHandlerPropTypes;
 IMAttachmentHandler.defaultProps = imAttachmentHandlerDefaultProps;

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

@@ -1,8 +1,8 @@
 .varClass {
-  --integrationIcon-small_height: 20px;
-  --integrationIcon-small_width: 20px;
-  --integrationIcon-medium_height: 26px;
-  --integrationIcon-medium_width: 26px;
+  --integrationIcon-small_height: var(--zd_size20);
+  --integrationIcon-small_width: var(--zd_size20);
+  --integrationIcon-medium_height: var(--zd_size26);
+  --integrationIcon-medium_width: var(--zd_size26);
 }
 
 .integrationIcon {

package/es/im/IMMessage/IMMessage.js

@@ -1,5 +1,3 @@
-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';
 /** ** Hooks *** */
@@ -99,18 +97,19 @@ export default function IMMessage(props) {
       displayDateTime,
       tooltip
     } = dateTimeDetails || {};
-    return /*#__PURE__*/React.createElement(IMMessageMeta, _extends({
+    return /*#__PURE__*/React.createElement(IMMessageMeta, {
       autoMessageType: autoMessageType,
       direction: direction,
       isValidAttachment: isValidAttachment,
       messageMetaInfoI18N: messageMetaInfoI18N,
       time: isShowMessageTime ? displayDateTime : '',
-      timeTooltip: tooltip
-    }, imMessageMetaProps));
+      timeTooltip: tooltip,
+      ...imMessageMetaProps
+    });
   }, [isShowMessageTime, dateTimeDetails, direction, autoMessageType, imMessageMetaProps, isValidAttachment, messageMetaInfoI18N]);
   /** ** Render Message Content *** */
 
-  const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, _extends({
+  const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, {
     deleteMessageText: deleteMessageText,
     isFailed: isFailedMessage,
     isSending: isSendingMessage,
@@ -122,8 +121,9 @@ export default function IMMessage(props) {
     onLoadFullMessage: onLoadFullMessage,
     replyText: replyText,
     seeMoreText: seeMoreText,
-    sessionDetails: sessionDetails
-  }, imMessageContentProps)), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, messageContentClickMapping, messageBubbleTitleI18N, onLoadFullMessage, onClickReply, isFailedMessage, isSendingMessage, imMessageContentProps, isShowFullContent]);
+    sessionDetails: sessionDetails,
+    ...imMessageContentProps
+  }), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, messageContentClickMapping, messageBubbleTitleI18N, onLoadFullMessage, onClickReply, isFailedMessage, isSendingMessage, imMessageContentProps, isShowFullContent]);
   /** ** Render Secondary Actions - TicketId *** */
 
   const handleRenderSecondaryActions = useCallback(() => {
@@ -136,19 +136,21 @@ export default function IMMessage(props) {
     const customStyle = {
       text: imTicketLinkClass
     };
-    return /*#__PURE__*/React.createElement(IMPermaLink, _extends({
+    return /*#__PURE__*/React.createElement(IMPermaLink, {
       customStyle: customStyle,
       href: ticketUrl,
       id: ticketId,
       onClick: onTicketClick,
-      text: ticketNumber ? `#${ticketNumber}` : ''
-    }, imTicketLinkProps));
+      text: ticketNumber ? `#${ticketNumber}` : '',
+      ...imTicketLinkProps
+    });
   }, [ticketNumber, ticketUrl, ticketId, onTicketClick, imTicketLinkProps, newStyle, isIncoming, isOutgoing]);
   /** ** Render Owner Status Icon *** */
 
-  const handleRenderIntegIcon = useCallback(() => /*#__PURE__*/React.createElement(IMIntegrationIcon, _extends({
-    integrationName: isShowIntegrationIcon ? integrationName : ''
-  }, imIntegrationIconProps)), [isShowIntegrationIcon, integrationName, imIntegrationIconProps]);
+  const handleRenderIntegIcon = useCallback(() => /*#__PURE__*/React.createElement(IMIntegrationIcon, {
+    integrationName: isShowIntegrationIcon ? integrationName : '',
+    ...imIntegrationIconProps
+  }), [isShowIntegrationIcon, integrationName, imIntegrationIconProps]);
   /** ** Construct Owner Details *** */
 
   const ownerDetails = useMemo(() => ({
@@ -174,7 +176,7 @@ export default function IMMessage(props) {
       }
     };
   }, [messageProps, handleRenderMessageBoxFooter]);
-  return /*#__PURE__*/React.createElement(Message, _extends({
+  return /*#__PURE__*/React.createElement(Message, {
     actions: actions,
     direction: direction,
     isActive: isHighlightMessage,
@@ -189,8 +191,9 @@ export default function IMMessage(props) {
     renderOwnerStatusIcon: handleRenderIntegIcon,
     renderSecondaryActions: handleRenderSecondaryActions,
     status: messageStatus,
-    statusTooltip: messageStatusTitle
-  }, messageCustomProps));
+    statusTooltip: messageStatusTitle,
+    ...messageCustomProps
+  });
 }
 IMMessage.propTypes = imMessagePropTypes;
 IMMessage.defaultProps = imMessageDefaultProps;

package/es/im/IMMessage/css/IMMessage.module.css

@@ -1,7 +1,7 @@
 .varClass {
-  --imTicketLink-top_gap: 5px;
-  --imTicketLink-font_size: 12px;
-  --imTicketLink-max_width: 150px;
+  --imTicketLink-top_gap: var(--zd_size5);
+  --imTicketLink-font_size: var(--zd_font_size12);
+  --imTicketLink-max_width: var(--zd_size150);
 }
 
 .ticketLink {

package/es/im/IMMessageContent/IMMessageContent.js

@@ -1,5 +1,3 @@
-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); }
-
 /* eslint-disable react/jsx-indent */
 
 /** ** Libraries *** */
@@ -86,42 +84,56 @@ export default function IMMessageContent(props) {
   };
   return /*#__PURE__*/React.createElement(Fragment, null, isShowLayoutBubble ? null : null, isShowDeleteBubble ? /*#__PURE__*/React.createElement("div", {
     className: newStyle.deleteBubble
-  }, deleteMessageText) : null, isShowReplyBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(IMReplyBubble, _extends({
+  }, deleteMessageText) : null, isShowReplyBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(IMReplyBubble, {
     isFailed: isFailed,
     messageDetails: replyToMessage,
     onClick: onClickReply,
-    replyText: replyText
-  }, imReplyBubbleProps))) : null, isShowCustomBubble ? renderCustomMessage({
+    replyText: replyText,
+    ...imReplyBubbleProps
+  })) : null, isShowCustomBubble ? renderCustomMessage({
     messageDetails,
     isFailed
-  }) : null, isShowImageBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(ImageBubble, _extends({
+  }) : null, isShowImageBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(ImageBubble, {
     imageDetails: attachmentDetails,
     isFailed: isFailed,
     isSending: isSending,
-    onClick: onImageBubbleClick
-  }, imageBubbleProps))) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(VideoBubble, _extends({
+    onClick: onImageBubbleClick,
+    ...imageBubbleProps
+  })) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(VideoBubble, {
     isFailed: isFailed,
-    videoDetails: attachmentDetails
-  }, videoBubbleProps))) : null, isShowAudioBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(AudioBubble, _extends({
+    videoDetails: attachmentDetails,
+    ...videoBubbleProps
+  })) : null, isShowAudioBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(AudioBubble, {
     audioDetails: attachmentDetails,
-    isFailed: isFailed
-  }, audioBubbleProps))) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(AttachmentBubble, _extends({
+    isFailed: isFailed,
+    ...audioBubbleProps
+  })) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(AttachmentBubble, {
     attachmentBubbleTitle: attachmentBubbleTitle,
     attachmentDetails: attachmentDetails,
     isFailed: isFailed,
     isSending: isSending,
-    onClick: onAttachmentBubbleClick
-  }, attachmentBubbleProps))) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(LocationBubble, _extends({
+    onClick: onAttachmentBubbleClick,
+    ...attachmentBubbleProps
+  })) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(LocationBubble, {
     isFailed: isFailed,
-    locationUrl: locationUrl
-  }, locationBubbleProps))) : null, isShowTextBubble ? /*#__PURE__*/React.createElement("div", wrapperDivProps, /*#__PURE__*/React.createElement(IMTextBubble, _extends({
+    locationUrl: locationUrl,
+    ...locationBubbleProps
+  })) : null, isShowTextBubble ? /*#__PURE__*/React.createElement("div", { ...wrapperDivProps
+  }, /*#__PURE__*/React.createElement(IMTextBubble, {
     isFailed: isFailed,
     isShowFullContent: isShowFullContent,
     messageDetails: messageDetails,
     moreText: seeMoreText,
     onLoadFullMessage: onLoadFullMessage,
-    sessionDetails: sessionDetails
-  }, imTextBubbleProps))) : null);
+    sessionDetails: sessionDetails,
+    ...imTextBubbleProps
+  })) : null);
 }
 IMMessageContent.propTypes = imMessageContentPropTypes;
 IMMessageContent.defaultProps = imMessageContentDefaultProps;

package/es/im/IMMessageMeta/IMMessageMeta.js

@@ -1,5 +1,3 @@
-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';
 /** ** Hooks *** */
@@ -57,10 +55,11 @@ export default function IMMessageMeta(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, imMessageMetaInfoContent || time ? /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     className: imMessageMetaClass
-  }, imMessageMetaInfoContent ? /*#__PURE__*/React.createElement(IMMessageMetaInfo, _extends({
+  }, imMessageMetaInfoContent ? /*#__PURE__*/React.createElement(IMMessageMetaInfo, {
     imMessageMetaInfoContent: imMessageMetaInfoContent,
-    imMessageMetaInfoTitle: imMessageMetaInfoTitle
-  }, imMessageMetaInfoProps)) : null, imMessageMetaInfoContent && time ? /*#__PURE__*/React.createElement("div", {
+    imMessageMetaInfoTitle: imMessageMetaInfoTitle,
+    ...imMessageMetaInfoProps
+  }) : null, imMessageMetaInfoContent && time ? /*#__PURE__*/React.createElement("div", {
     className: dotClass
   }, "\u22C5") : null, time ? /*#__PURE__*/React.createElement("div", {
     className: newStyle.dateTime,

package/es/im/IMMessageMeta/css/IMMessageMeta.module.css

@@ -1,7 +1,7 @@
 .varClass {
-  --imMessageMeta-gap: 5px;
-  --imMessageMeta-separator_gap: 5px;
-  --imMessageMeta-time_padding: 45px;
+  --imMessageMeta-gap: var(--zd_size5);
+  --imMessageMeta-separator_gap: var(--zd_size5);
+  --imMessageMeta-time_padding: var(--zd_size45);
 }
 
 .imMessageMeta {

package/es/im/IMMessageMetaInfo/css/IMMessageMetaInfo.module.css

@@ -1,6 +1,6 @@
 .varClass {
-  --imMessageMetaInfo-font_size: 13px;
-  --imMessageMetaInfo-max_width: 150px;
+  --imMessageMetaInfo-font_size: var(--zd_font_size13);
+  --imMessageMetaInfo-max_width: var(--zd_size150);
   --imMessageMetaInfo-letter_spacing: 0.2px;
 }
 

package/es/im/IMReplyBubble/IMReplyBubble.js

@@ -1,5 +1,3 @@
-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';
 /** ** Hooks *** */
@@ -35,17 +33,17 @@ export default function IMReplyBubble(props) {
     messageDetails,
     onClick: propOnClick
   });
-  return /*#__PURE__*/React.createElement(ReplyBubble, _extends({
+  return /*#__PURE__*/React.createElement(ReplyBubble, {
     attachmentDetails: attachmentDetails,
     dateTimeDetails: dateTimeDetails,
     locationUrl: locationUrl,
     message: message,
     onClick: onClick,
     replyText: replyText,
-    senderName: senderName
-  }, replyBubbleProps, {
+    senderName: senderName,
+    ...replyBubbleProps,
     isFailed: isFailed
-  }));
+  });
 }
 IMReplyBubble.propTypes = imReplyBubblePropTypes;
 IMReplyBubble.defaultProps = imReplyBubbleDefaultProps;

package/es/im/IMTextBubble/IMTextBubble.js

@@ -1,5 +1,3 @@
-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';
 /** ** Constants *** */
@@ -27,13 +25,13 @@ export default function IMTextBubble(props) {
     sanitizedDisplayMessage,
     isShowSeeMore
   } = useIMTextBubble(props);
-  return /*#__PURE__*/React.createElement(TextBubble, _extends({
+  return /*#__PURE__*/React.createElement(TextBubble, {
     message: sanitizedDisplayMessage,
     moreText: isShowSeeMore ? moreText : '',
-    onClickMore: onLoadFullMessage
-  }, textBubbleProps, {
+    onClickMore: onLoadFullMessage,
+    ...textBubbleProps,
     isFailed: isFailed
-  }));
+  });
 }
 IMTextBubble.propTypes = imTextBubblePropTypes;
 IMTextBubble.defaultProps = imTextBubbleDefaultProps;

package/es/im/ReplyComposer/ReplyComposer.js

@@ -1,5 +1,3 @@
-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 *** */
@@ -110,13 +108,14 @@ export default function ReplyComposer(props) {
   return /*#__PURE__*/React.createElement(Container, {
     className: newStyle.replyComposer,
     isCover: false
-  }, isShowSuggestion ? /*#__PURE__*/React.createElement(ReplyEditorSuggestions, _extends({
+  }, isShowSuggestion ? /*#__PURE__*/React.createElement(ReplyEditorSuggestions, {
     getMethods: getSuggetPopupMethods,
     onClose: onHideSuggestions,
     onSelect: onSelectSuggestion,
     suggestionDetails: suggestionDetails,
-    suggestionsMapping: suggestionsMapping
-  }, replyEditorSuggestionsProps)) : null, files.length > 0 ? /*#__PURE__*/React.createElement(AttachmentPreview, _extends({
+    suggestionsMapping: suggestionsMapping,
+    ...replyEditorSuggestionsProps
+  }) : null, files.length > 0 ? /*#__PURE__*/React.createElement(AttachmentPreview, {
     descriptionDetails: filesDescription,
     files: files,
     isDescriptionNeeded: true,
@@ -124,10 +123,11 @@ export default function ReplyComposer(props) {
     onCancel: onFileCancel,
     onDescriptionChange: onChangeFileDescription,
     onSubmit: onFileSubmit,
-    texts: attachmentPreviewTexts
-  }, attachmentPreviewCustomProps)) : null, isLoaded ? headerElement : null, stencilsElement || null, /*#__PURE__*/React.createElement("div", {
+    texts: attachmentPreviewTexts,
+    ...attachmentPreviewCustomProps
+  }) : null, isLoaded ? headerElement : null, stencilsElement || null, /*#__PURE__*/React.createElement("div", {
     className: replEditorWrapperClass
-  }, /*#__PURE__*/React.createElement(ReplyEditor, _extends({
+  }, /*#__PURE__*/React.createElement(ReplyEditor, {
     content: content,
     EDITORURL: EDITORURL,
     features: allFeatures,
@@ -138,13 +138,15 @@ export default function ReplyComposer(props) {
     onChange: onChange,
     onKeyDown: onKeyDown,
     onPaste: onPaste,
-    placeHolder: placeHolder
-  }, replyEditorCustomProps))), needFooter && isLoaded ? /*#__PURE__*/React.createElement(ReplyComposerFooter, _extends({
+    placeHolder: placeHolder,
+    ...replyEditorCustomProps
+  })), needFooter && isLoaded ? /*#__PURE__*/React.createElement(ReplyComposerFooter, {
     editor: editor,
     extensions: extensions,
     isHTMLContent: isHTMLContent,
-    renderButtons: renderFooter
-  }, replyComposerFooterProps)) : null);
+    renderButtons: renderFooter,
+    ...replyComposerFooterProps
+  }) : null);
 }
 ReplyComposer.propTypes = replyComposerPropTypes;
 ReplyComposer.defaultProps = replyComposerDefaultProps;

package/es/im/ReplyEditor/ReplyEditor.js

@@ -1,5 +1,3 @@
-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 *** */
@@ -81,7 +79,7 @@ export default function ReplyEditor(props) {
     className: newStyle.replyEditor
   }, isRenderEditor ? /*#__PURE__*/React.createElement(Container, {
     className: editorClass
-  }, /*#__PURE__*/React.createElement(Editor, _extends({
+  }, /*#__PURE__*/React.createElement(Editor, {
     appearance: appearance,
     content: content,
     customStyle: editorNewCustomStyle,
@@ -96,8 +94,9 @@ 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/css/ReplyEditor.module.css

@@ -37,6 +37,10 @@
   cursor: text !important;
 }	
 
+div.editableDiv[contenteditable="true"]{
+  outline-offset: -5px !important;
+}
+
 .editorWrapper {
   /** ** Use this class for css customisations *** */
 }

package/es/im/ReplyEditorExtensions/ReplyEditorExtensions.js

@@ -1,5 +1,3 @@
-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 *** */
@@ -41,7 +39,7 @@ export default function ReplyEditorExtensions(props) {
     const {
       needFocusOnSelect
     } = componentProps;
-    return /*#__PURE__*/React.createElement(EmojiPopup, _extends({
+    return /*#__PURE__*/React.createElement(EmojiPopup, {
       key: id,
       onPopupClose: onPopupClose,
       onPopupOpen: onPopupOpen,
@@ -50,32 +48,35 @@ export default function ReplyEditorExtensions(props) {
           content: value,
           needFocus: needFocusOnSelect
         });
-      }
-    }, componentProps));
+      },
+      ...componentProps
+    });
   }, []);
   const handleRenderImageExtension = useCallback(_ref2 => {
     let {
       id,
       componentProps
     } = _ref2;
-    return /*#__PURE__*/React.createElement(IMAttachmentHandler, _extends({
+    return /*#__PURE__*/React.createElement(IMAttachmentHandler, {
       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, _extends({
+    return /*#__PURE__*/React.createElement(IMAttachmentHandler, {
       key: id,
       attachmentType: "document",
       iconName: "ZD-TT-ttAttach",
-      iconSize: "14"
-    }, componentProps));
+      iconSize: "14",
+      ...componentProps
+    });
   }, []);
   const defaultRenderMethod = useMemo(() => ({
     emoji: {

package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js

@@ -1,5 +1,3 @@
-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 *** */
@@ -51,7 +49,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, _extends({
+    return isShowEmojiPopup ? /*#__PURE__*/React.createElement(Emojis, {
       emojisRowType: "single",
       getMethods: getMethods,
       isShowGroupBasedList: false,
@@ -63,8 +61,9 @@ export default function ReplyEditorSuggestions(props) {
           content: value
         });
       },
-      searchString: searchText
-    }, componentProps)) : null;
+      searchString: searchText,
+      ...componentProps
+    }) : null;
   }, []);
   const defaultRenderMethod = useMemo(() => ({
     ':': handleRenderEmoji,
@@ -83,11 +82,13 @@ export default function ReplyEditorSuggestions(props) {
   });
   return /*#__PURE__*/React.createElement(Container, {
     className: newStyle.suggestionPopup
-  }, /*#__PURE__*/React.createElement(ReplyEditorSuggestionsPopup, _extends({
+  }, /*#__PURE__*/React.createElement(ReplyEditorSuggestionsPopup, {
     onClose: onClose,
     suggestionElement: suggestionElement,
-    targetPosition: position
-  }, replyEditorSuggestionsPopupProps, popupProps)));
+    targetPosition: position,
+    ...replyEditorSuggestionsPopupProps,
+    ...popupProps
+  }));
 }
 ReplyEditorSuggestions.propTypes = replyEditorSuggestionsPropTypes;
 ReplyEditorSuggestions.defaultProps = replyEditorSuggestionsDefaultProps;

package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js

@@ -1,5 +1,3 @@
-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 *** */
@@ -69,7 +67,7 @@ export function ReplyEditorSuggestionsPopupComp(props) {
     ref: getTargetRef,
     className: newStyle.hiddenTarget,
     style: targetElementStyle
-  }))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, _extends({
+  }))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
     boxPosition: position,
     customStyle: dummyObject,
     getRef: getContainerRef,
@@ -80,8 +78,9 @@ 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