@zohoim/chat-components 1.0.9-beta.5 → 1.0.9-beta.7

package/es/AttachmentPreview/AttachmentPreview.js

@@ -9,6 +9,7 @@ import AttachmentPreviewHeader from "../AttachmentPreviewHeader/AttachmentPrevie
 import AttachmentPreviewBody from "../AttachmentPreviewBody/AttachmentPreviewBody";
 /** ** Hooks *** */
 
+import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import useAttachmentPreview from '@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreview';
 import useAttachmentPreviewEditor from '@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreviewEditor';
@@ -36,7 +37,8 @@ export default function AttachmentPreview(props) {
     descriptionDetails,
     onDescriptionChange: propOnDescriptionChange,
     needCloseOnEscape,
-    needUploadOnEnter
+    needUploadOnEnter,
+    needAutoZindex
   } = props;
   const {
     editorProps = dummyObject,
@@ -51,6 +53,7 @@ export default function AttachmentPreview(props) {
   /* External customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  const getNextIndex = useZIndex();
   const {
     selectedFile,
     isShow,
@@ -84,7 +87,10 @@ export default function AttachmentPreview(props) {
   return isShow ? /*#__PURE__*/React.createElement(Container, {
     align: "both",
     alignBox: "column",
-    className: newStyle.attachmentPreview
+    className: newStyle.attachmentPreview,
+    style: needAutoZindex ? {
+      zIndex: `${getNextIndex()}`
+    } : {}
   }, /*#__PURE__*/React.createElement("div", {
     className: newStyle.uploadPrev
   }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewHeader, {

package/es/AttachmentPreview/props/defaultProps.js

@@ -3,6 +3,7 @@ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyCon
 const attachmentPreviewDefaultProps = {
   customStyle: dummyObject,
   needCloseOnEscape: true,
-  needUploadOnEnter: true
+  needUploadOnEnter: true,
+  needAutoZindex: true
 };
 export default attachmentPreviewDefaultProps;

package/es/AttachmentPreview/props/propTypes.js

@@ -27,6 +27,7 @@ const attachmentPreviewPropTypes = {
   descriptionDetails: PropTypes.object,
   onDescriptionChange: PropTypes.func,
   needCloseOnEscape: PropTypes.bool,
-  needUploadOnEnter: PropTypes.bool
+  needUploadOnEnter: PropTypes.bool,
+  needAutoZindex: PropTypes.bool
 };
 export default attachmentPreviewPropTypes;

package/es/AttachmentPreviewBody/AttachmentPreviewBody.js

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 /** ** Components *** */
 
 import { Container } from '@zohodesk/components/es/Layout';
-import ReplyEditor from "../im/ReplyEditor/ReplyEditor";
+import ReplyComposer from "../im/ReplyComposer/ReplyComposer";
 import AttachmentIcon from "../AttachmentIcon/AttachmentIcon";
 /** ** Hooks *** */
 
@@ -41,16 +41,33 @@ export default function AttachmentPreviewBody(props) {
   const iconCustomStyle = useMemo(() => ({
     icon: newStyle.attachmentIcon
   }), [newStyle.attachmentIcon]);
-  const editorCustomStyle = useMemo(() => ({
-    editorWrapper: newStyle.editorWrapper,
-    editableDiv: newStyle.editableDiv
-  }), [newStyle.editorWrapper, newStyle.editableDiv]);
-  const editorCustomProps = useMemo(() => ({
-    editorProps: {
-      needAutoFocus: true,
-      ...editorProps
-    }
-  }), [editorProps]);
+  const modifiedEditorProps = useMemo(() => {
+    const {
+      customProps,
+      customStyle: replyComposerCustomStyle
+    } = editorProps || dummyObject;
+    const {
+      replyEditorProps
+    } = customProps || dummyObject;
+    const {
+      customStyle = dummyObject
+    } = replyEditorProps || dummyObject;
+    return { ...editorProps,
+      customStyle: {
+        replyComposer: newStyle.replyComposer,
+        ...replyComposerCustomStyle
+      },
+      customProps: { ...customProps,
+        replyEditorProps: { ...replyEditorProps,
+          customStyle: {
+            editorWrapper: newStyle.editorWrapper,
+            editableDiv: newStyle.editableDiv,
+            ...customStyle
+          }
+        }
+      }
+    };
+  }, [editorProps, newStyle.replyComposer, newStyle.editorWrapper, newStyle.editableDiv]);
   return /*#__PURE__*/React.createElement(Container, {
     align: "both",
     alignBox: "column",
@@ -66,14 +83,13 @@ export default function AttachmentPreviewBody(props) {
     fileFormat: fileFormat,
     mediaType: mediaType,
     ...attachmentIconProps
-  }))), isDescriptionNeeded ? /*#__PURE__*/React.createElement(ReplyEditor, {
+  }))), isDescriptionNeeded ? /*#__PURE__*/React.createElement(ReplyComposer, {
     content: description,
-    customProps: editorCustomProps,
-    customStyle: editorCustomStyle,
     id: `${attachmentId}_Attach_Editor`,
     onChange: onDescriptionChange,
     onKeyDown: onEditorKeyDown,
-    placeHolder: placeHolder
+    placeHolder: placeHolder,
+    ...modifiedEditorProps
   }) : null);
 }
 AttachmentPreviewBody.propTypes = attachmentPreviewBodyPropTypes;

package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css

@@ -4,6 +4,10 @@
   height: var(--zd_size60)  !important;
 }
 
+.replyComposer {
+  width: 100% ;
+}
+
 .editorWrapper {
   display: flex;
   flex-direction: column;

package/es/im/ReplyComposer/ReplyComposer.js

@@ -20,6 +20,7 @@ import replyComposerPropTypes from "./props/propTypes";
 /** ** Methods *** */
 
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from "./css/cssJSLogic";
 /** ** Styles *** */
 
 import style from "./css/ReplyComposer.module.css";
@@ -47,6 +48,7 @@ export default function ReplyComposer(props) {
     attachmentPreviewTexts,
     renderHeader,
     renderFooter,
+    renderStencils,
     getEditorState: propGetEditorState,
     needFooter
   } = props;
@@ -75,7 +77,9 @@ export default function ReplyComposer(props) {
     onKeyDown,
     attachmentPreviewCustomProps,
     onFileCancel,
-    onFileSubmit
+    onFileSubmit,
+    isLoading,
+    isLoaded
   } = useReplyComposer({
     onKeyDown: propOnKeyDown,
     isShowSuggestion,
@@ -90,7 +94,17 @@ export default function ReplyComposer(props) {
   /* External customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+
+  const {
+    replEditorWrapperClass
+  } = cssJSLogic({
+    isLoaded
+  }, newStyle);
   const headerElement = useMemo(() => renderHandler(renderHeader)(), [renderHeader]);
+  const stencilsElement = useMemo(() => isLoading ? renderHandler(renderStencils)({
+    needFooter
+  }) : null, [renderStencils, needFooter, isLoading]);
   return /*#__PURE__*/React.createElement(Container, {
     className: newStyle.replyComposer,
     isCover: false
@@ -111,7 +125,9 @@ export default function ReplyComposer(props) {
     onSubmit: onFileSubmit,
     texts: attachmentPreviewTexts,
     ...attachmentPreviewCustomProps
-  }) : null, headerElement || null, /*#__PURE__*/React.createElement(ReplyEditor, {
+  }) : null, isLoaded ? headerElement : null, stencilsElement || null, /*#__PURE__*/React.createElement("div", {
+    className: replEditorWrapperClass
+  }, /*#__PURE__*/React.createElement(ReplyEditor, {
     content: content,
     EDITORURL: EDITORURL,
     features: allFeatures,
@@ -124,7 +140,7 @@ export default function ReplyComposer(props) {
     onPaste: onPaste,
     placeHolder: placeHolder,
     ...replyEditorProps
-  }), needFooter ? /*#__PURE__*/React.createElement(ReplyComposerFooter, {
+  })), needFooter && isLoaded ? /*#__PURE__*/React.createElement(ReplyComposerFooter, {
     editor: editor,
     extensions: extensions,
     isHTMLContent: isHTMLContent,

package/es/im/ReplyComposer/css/ReplyComposer.module.css

@@ -3,3 +3,8 @@
 .replyComposer {
   /** ** Use this class for css customisation *** */
 }
+
+.hidden {
+  visibility: hidden;
+  height: 0 ;
+}

package/es/im/ReplyComposer/css/cssJSLogic.js

@@ -0,0 +1,13 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isLoaded
+  } = props;
+  const replEditorWrapperClass = compileClassNames({
+    [style.hidden]: !isLoaded
+  });
+  return {
+    replEditorWrapperClass
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "1.0.9-beta.5",
+  "version": "1.0.9-beta.7",
   "description": "Chat Components",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -36,8 +36,8 @@
     "@zohodesk/utils": "1.3.13",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.13",
-    "@zohoim/chat-components-hooks": "^1.0.4-beta.3",
-    "@zohoim/chat-components-utils": "^1.0.4-beta.2"
+    "@zohoim/chat-components-hooks": "1.0.4-beta.7",
+    "@zohoim/chat-components-utils": "1.0.4-beta.3"
   },
   "devDependencies": {
     "@zohodesk-private/css-variable-migrator": "1.0.7",
@@ -45,5 +45,5 @@
     "jsdom": "23.0.0",
     "react-to-jsx": "1.3.2"
   },
-  "gitHead": "a5d758237514ccbb4ade84c3e3d315f36a9e9a0b"
+  "gitHead": "44f84bf3e27cc3b76db2abc64e889ab026a258b7"
 }