@zohoim/chat-components 1.0.9-beta.2 → 1.0.9-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/es/AttachmentHandler/css/AttachmentHandler.module.css +10 -0
  2. package/es/AttachmentPreview/AttachmentPreview.js +5 -6
  3. package/es/AttachmentPreview/css/AttachmentPreview.module.css +12 -3
  4. package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css +2 -0
  5. package/es/Emoji/css/Emoji.module.css +3 -2
  6. package/es/EmojiPopup/css/EmojiPopup.module.css +7 -2
  7. package/es/Theme/themeVariables/dark/blueTheme.js +4 -1
  8. package/es/Theme/themeVariables/dark/greenTheme.js +4 -1
  9. package/es/Theme/themeVariables/dark/orangeTheme.js +4 -1
  10. package/es/Theme/themeVariables/dark/redTheme.js +4 -1
  11. package/es/Theme/themeVariables/dark/yellowTheme.js +4 -1
  12. package/es/Theme/themeVariables/light/blueTheme.js +4 -1
  13. package/es/Theme/themeVariables/light/greenTheme.js +5 -1
  14. package/es/Theme/themeVariables/light/orangeTheme.js +5 -1
  15. package/es/Theme/themeVariables/light/redTheme.js +5 -1
  16. package/es/Theme/themeVariables/light/yellowTheme.js +5 -1
  17. package/es/Theme/themeVariables/pureDark/blueTheme.js +4 -1
  18. package/es/Theme/themeVariables/pureDark/greenTheme.js +4 -1
  19. package/es/Theme/themeVariables/pureDark/orangeTheme.js +4 -1
  20. package/es/Theme/themeVariables/pureDark/redTheme.js +4 -1
  21. package/es/Theme/themeVariables/pureDark/yellowTheme.js +4 -1
  22. package/es/im/ReplyComposerFooter/css/ReplyComposerFooter.module.css +6 -1
  23. package/es/im/ReplyEditor/css/ReplyEditor.module.css +4 -0
  24. package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js +1 -0
  25. package/package.json +2 -2
package/es/AttachmentHandler/css/AttachmentHandler.module.css CHANGED
@@ -15,3 +15,13 @@
15
15
  .icon {
16
16
  color: initial;
17
17
  }
18
+
19
+
20
+ .icon :global .path1:before {
21
+ color: var(--imlib_chat_components_emojiPopup_ttIcon_path1_color) !important;
22
+ opacity: 1;
23
+ }
24
+
25
+ .icon :global .path2:before {
26
+ color: var(--imlib_chat_components_emojiPopup_ttIcon_path2_color) !important;
27
+ }
package/es/AttachmentPreview/AttachmentPreview.js CHANGED
@@ -78,13 +78,12 @@ export default function AttachmentPreview(props) {
78
78
  attachmentId
79
79
  } = selectedFile;
80
80
  const isImageFile = useMemo(() => mediaType === IMAGE, [mediaType]);
81
- return isShow ? /*#__PURE__*/React.createElement("div", {
82
- className: newStyle.attachmentPreview
83
- }, /*#__PURE__*/React.createElement(Container, {
81
+ return isShow ? /*#__PURE__*/React.createElement(Container, {
84
82
  align: "both",
85
- alignBox: "column"
83
+ alignBox: "column",
84
+ className: newStyle.attachmentPreview
86
85
  }, /*#__PURE__*/React.createElement("div", {
87
- className: `${newStyle.uploadPrev} ${newStyle.container}`
86
+ className: newStyle.uploadPrev
88
87
  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewHeader, {
89
88
  cancelText: cancelText,
90
89
  fileName: fileName,
@@ -106,7 +105,7 @@ export default function AttachmentPreview(props) {
106
105
  onEditorKeyDown: onEditorKeyDown,
107
106
  placeHolder: placeHolder,
108
107
  ...attachmentPreviewBodyProps
109
- }))))) : null;
108
+ })))) : null;
110
109
  }
111
110
  AttachmentPreview.propTypes = attachmentPreviewPropTypes;
112
111
  AttachmentPreview.defaultProps = attachmentPreviewDefaultProps;
package/es/AttachmentPreview/css/AttachmentPreview.module.css CHANGED
@@ -3,7 +3,6 @@
3
3
  position: fixed;
4
4
  top: 0 ;
5
5
  bottom: 0 ;
6
- /* z-index: 9999; */
7
6
  z-index: 2147483643;
8
7
  overflow: hidden;
9
8
  background-color: rgba(42, 45, 54, 0.94);
@@ -19,8 +18,18 @@
19
18
  right: 0 ;
20
19
  }
21
20
 
22
- .container {
23
- position: relative;
21
+ @keyframes scaleIn {
22
+ 0% {
23
+ -webkit-transform: scale(0.9);
24
+ transform: scale(0.9);
25
+ opacity: .7
26
+ }
27
+
28
+ 100% {
29
+ -webkit-transform: scale(1);
30
+ transform: scale(1);
31
+ opacity: 1
32
+ }
24
33
  }
25
34
 
26
35
  .uploadPrev {
package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css CHANGED
@@ -9,6 +9,8 @@
9
9
  flex-direction: column;
10
10
  height: 100% ;
11
11
  width: 100% ;
12
+ padding: 0 ;
13
+ margin-top: var(--zd_size40) ;
12
14
  }
13
15
 
14
16
  .editableDiv {
package/es/Emoji/css/Emoji.module.css CHANGED
@@ -11,8 +11,9 @@
11
11
  height: var(--emoji-width);
12
12
  overflow: hidden;
13
13
  font-size: 0 ;
14
- display: inline-block;
15
- vertical-align: -webkit-baseline-middle;
14
+ display: inline-flex;
15
+ align-items: center;
16
+ justify-content: center;
16
17
  cursor: pointer;
17
18
  margin: 0 var(--emoji-margin);
18
19
  text-align: center;
package/es/EmojiPopup/css/EmojiPopup.module.css CHANGED
@@ -41,10 +41,15 @@
41
41
  }
42
42
 
43
43
  .icon :global .path1:before {
44
- color: rgba(197,205,199,0.7) !important;
44
+ color: var(--imlib_chat_components_emojiPopup_ttIcon_path1_color) !important;
45
45
  opacity: 1;
46
46
  }
47
47
 
48
48
  .icon :global .path2:before {
49
- color: #000 !important;
49
+ color: var(--imlib_chat_components_emojiPopup_ttIcon_path2_color) !important;
50
50
  }
51
+
52
+ .icon :global .path2{
53
+ position: relative;
54
+ z-index: 1;
55
+ }
package/es/Theme/themeVariables/dark/blueTheme.js CHANGED
@@ -117,7 +117,10 @@ export default {
117
117
  border_color: '#2d3748'
118
118
  },
119
119
  replyEditor,
120
- emojiPopup,
120
+ emojiPopup: { ...emojiPopup,
121
+ ttIcon_path1_color: '#5f6478',
122
+ ttIcon_pathe2_color: 'var(--dot_platinum)'
123
+ },
121
124
  emojisHeader,
122
125
  attachmentPreviewHeader,
123
126
  attachmentPreviewBody: {
package/es/Theme/themeVariables/dark/greenTheme.js CHANGED
@@ -115,7 +115,10 @@ export default {
115
115
  tabLine: primaryGreen,
116
116
  border_color: '#2d3748'
117
117
  },
118
- emojiPopup,
118
+ emojiPopup: { ...emojiPopup,
119
+ ttIcon_path1_color: '#5f6478',
120
+ ttIcon_pathe2_color: 'var(--dot_platinum)'
121
+ },
119
122
  replyEditor,
120
123
  emojisHeader,
121
124
  attachmentPreviewHeader,
package/es/Theme/themeVariables/dark/orangeTheme.js CHANGED
@@ -115,7 +115,10 @@ export default {
115
115
  tabLine: primaryOrange,
116
116
  border_color: '#2d3748'
117
117
  },
118
- emojiPopup,
118
+ emojiPopup: { ...emojiPopup,
119
+ ttIcon_path1_color: '#5f6478',
120
+ ttIcon_pathe2_color: 'var(--dot_platinum)'
121
+ },
119
122
  replyEditor,
120
123
  emojisHeader,
121
124
  attachmentPreviewHeader,
package/es/Theme/themeVariables/dark/redTheme.js CHANGED
@@ -115,7 +115,10 @@ export default {
115
115
  tabLine: primaryRed,
116
116
  border_color: 'hsl(258.46deg 12.62% 23.2%)'
117
117
  },
118
- emojiPopup,
118
+ emojiPopup: { ...emojiPopup,
119
+ ttIcon_path1_color: '#5f6478',
120
+ ttIcon_pathe2_color: 'var(--dot_platinum)'
121
+ },
119
122
  replyEditor,
120
123
  emojisHeader,
121
124
  attachmentPreviewHeader,
package/es/Theme/themeVariables/dark/yellowTheme.js CHANGED
@@ -115,7 +115,10 @@ export default {
115
115
  tabLine: primaryYellow,
116
116
  border_color: '#2d3748'
117
117
  },
118
- emojiPopup,
118
+ emojiPopup: { ...emojiPopup,
119
+ ttIcon_path1_color: '#5f6478',
120
+ ttIcon_pathe2_color: 'var(--dot_platinum)'
121
+ },
119
122
  replyEditor,
120
123
  emojisHeader,
121
124
  attachmentPreviewHeader,
package/es/Theme/themeVariables/light/blueTheme.js CHANGED
@@ -115,7 +115,10 @@ export default {
115
115
  hover_bg_color: 'green'
116
116
  },
117
117
  replyEditor,
118
- emojiPopup,
118
+ emojiPopup: { ...emojiPopup,
119
+ ttIcon_path1_color: 'rgba(200, 203, 220, 0.7)',
120
+ ttIcon_pathe2_color: 'var(--dot_black)'
121
+ },
119
122
  emojiFooter: {
120
123
  tabLine: primaryBlue,
121
124
  border_color: '#ebf0f5'
package/es/Theme/themeVariables/light/greenTheme.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
2
+ import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
3
3
  export default {
4
4
  library: 'chat_components',
5
5
  variables: {
@@ -122,6 +122,10 @@ export default {
122
122
  editor_border_color: '#c5cdc7',
123
123
  editor_border_hover_color: '#788190',
124
124
  editor_border_active_color: '#26a942'
125
+ },
126
+ emojiPopup: { ...emojiPopup,
127
+ ttIcon_path1_color: 'rgba(197, 205, 199, 0.7)',
128
+ ttIcon_pathe2_color: 'var(--dot_black)'
125
129
  }
126
130
  }
127
131
  };
package/es/Theme/themeVariables/light/orangeTheme.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
2
+ import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
3
3
  export default {
4
4
  library: 'chat_components',
5
5
  variables: {
@@ -122,6 +122,10 @@ export default {
122
122
  editor_border_color: '#d1cbc6',
123
123
  editor_border_hover_color: '#788190',
124
124
  editor_border_active_color: '#e57717'
125
+ },
126
+ emojiPopup: { ...emojiPopup,
127
+ ttIcon_path1_color: 'rgba(204, 201, 199, 0.7)',
128
+ ttIcon_pathe2_color: 'var(--dot_black)'
125
129
  }
126
130
  }
127
131
  };
package/es/Theme/themeVariables/light/redTheme.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
2
+ import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
3
3
  export default {
4
4
  library: 'chat_components',
5
5
  variables: {
@@ -122,6 +122,10 @@ export default {
122
122
  editor_border_color: '#b9b2b4',
123
123
  editor_border_hover_color: '#788190',
124
124
  editor_border_active_color: '#de3535'
125
+ },
126
+ emojiPopup: { ...emojiPopup,
127
+ ttIcon_path1_color: 'rgba(204, 199, 201, 0.7)',
128
+ ttIcon_pathe2_color: 'var(--dot_black)'
125
129
  }
126
130
  }
127
131
  };
package/es/Theme/themeVariables/light/yellowTheme.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable camelcase */
2
- import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
2
+ import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
3
3
  export default {
4
4
  library: 'chat_components',
5
5
  variables: {
@@ -122,6 +122,10 @@ export default {
122
122
  editor_border_color: '#ccc2a4',
123
123
  editor_border_hover_color: '#788190',
124
124
  editor_border_active_color: '#e8b923'
125
+ },
126
+ emojiPopup: { ...emojiPopup,
127
+ ttIcon_path1_color: 'rgba(204, 203, 199, 0.7)',
128
+ ttIcon_pathe2_color: 'var(--dot_black)'
125
129
  }
126
130
  }
127
131
  };
package/es/Theme/themeVariables/pureDark/blueTheme.js CHANGED
@@ -116,7 +116,10 @@ export default {
116
116
  border_color: '#161515'
117
117
  },
118
118
  replyEditor,
119
- emojiPopup,
119
+ emojiPopup: { ...emojiPopup,
120
+ ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
121
+ ttIcon_pathe2_color: 'var(--dot_platinum)'
122
+ },
120
123
  emojisHeader,
121
124
  attachmentPreviewHeader,
122
125
  attachmentPreviewBody: {
package/es/Theme/themeVariables/pureDark/greenTheme.js CHANGED
@@ -116,7 +116,10 @@ export default {
116
116
  border_color: '#161515'
117
117
  },
118
118
  replyEditor,
119
- emojiPopup,
119
+ emojiPopup: { ...emojiPopup,
120
+ ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
121
+ ttIcon_pathe2_color: 'var(--dot_platinum)'
122
+ },
120
123
  emojisHeader,
121
124
  attachmentPreviewHeader,
122
125
  attachmentPreviewBody: {
package/es/Theme/themeVariables/pureDark/orangeTheme.js CHANGED
@@ -115,7 +115,10 @@ export default {
115
115
  tabLine: primaryOrange,
116
116
  border_color: '#161515'
117
117
  },
118
- emojiPopup,
118
+ emojiPopup: { ...emojiPopup,
119
+ ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
120
+ ttIcon_pathe2_color: 'var(--dot_platinum)'
121
+ },
119
122
  replyEditor,
120
123
  emojisHeader,
121
124
  attachmentPreviewHeader,
package/es/Theme/themeVariables/pureDark/redTheme.js CHANGED
@@ -115,7 +115,10 @@ export default {
115
115
  tabLine: primaryRed,
116
116
  border_color: '#161515'
117
117
  },
118
- emojiPopup,
118
+ emojiPopup: { ...emojiPopup,
119
+ ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
120
+ ttIcon_pathe2_color: 'var(--dot_platinum)'
121
+ },
119
122
  replyEditor,
120
123
  emojisHeader,
121
124
  attachmentPreviewHeader,
package/es/Theme/themeVariables/pureDark/yellowTheme.js CHANGED
@@ -115,7 +115,10 @@ export default {
115
115
  tabLine: primaryYellow,
116
116
  border_color: '#161515'
117
117
  },
118
- emojiPopup,
118
+ emojiPopup: { ...emojiPopup,
119
+ ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
120
+ ttIcon_pathe2_color: 'var(--dot_platinum)'
121
+ },
119
122
  replyEditor,
120
123
  emojisHeader,
121
124
  attachmentPreviewHeader,
package/es/im/ReplyComposerFooter/css/ReplyComposerFooter.module.css CHANGED
@@ -1,5 +1,10 @@
1
1
  /** ** Styles *** */
2
2
  .replyComposerFooter {
3
3
  display: flex;
4
- padding: 0 var(--zd_size16) var(--zd_size16) ;
4
+ }
5
+ [dir=ltr] .replyComposerFooter {
6
+ padding: 0 0 0 var(--zd_size16) ;
7
+ }
8
+ [dir=rtl] .replyComposerFooter {
9
+ padding: 0 var(--zd_size16) 0 0 ;
5
10
  }
package/es/im/ReplyEditor/css/ReplyEditor.module.css CHANGED
@@ -36,3 +36,7 @@
36
36
  .editor {
37
37
  /** ** Use this class for css customisations *** */
38
38
  }
39
+
40
+ .replyEditor :global(.prosemirror-suggestion) {
41
+ text-decoration: none !important;
42
+ }
package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js CHANGED
@@ -72,6 +72,7 @@ export function ReplyEditorSuggestionsPopupComp(props) {
72
72
  isActive: isPopupReady,
73
73
  isAnimate: true,
74
74
  isArrow: false,
75
+ isRestrictScroll: true,
75
76
  onClick: removeClose,
76
77
  portalId: EDITOR_POPUP_PORTAL,
77
78
  positionsOffset: positionsOffset,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohoim/chat-components",
3
- "version": "1.0.9-beta.2",
3
+ "version": "1.0.9-beta.3",
4
4
  "description": "Chat Components",
5
5
  "main": "es/index.js",
6
6
  "module": "es/index.js",
@@ -45,5 +45,5 @@
45
45
  "jsdom": "23.0.0",
46
46
  "react-to-jsx": "1.3.2"
47
47
  },
48
- "gitHead": "249c979f45728e88f3fc2f5db1fc2f55cb6548bf"
48
+ "gitHead": "0da64ee194d86cdd982dc2020fac8f2ff05686ae"
49
49
  }