@elliemae/ds-chat 2.1.0-rc.1 → 2.1.0-rc.5

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 (9) hide show
  1. package/cjs/parts/chat-composer/ChatContainerComposer.js +4 -2
  2. package/cjs/parts/chat-container/ChatContainer.js +7 -9
  3. package/cjs/parts/chat-container/styled.js +1 -1
  4. package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +1 -3
  5. package/esm/parts/chat-composer/ChatContainerComposer.js +4 -2
  6. package/esm/parts/chat-container/ChatContainer.js +7 -9
  7. package/esm/parts/chat-container/styled.js +1 -1
  8. package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +1 -3
  9. package/package.json +10 -10
package/cjs/parts/chat-composer/ChatContainerComposer.js CHANGED
@@ -92,6 +92,9 @@ const ChatComposer = props => {
92
92
  "data-testid": dataTestid
93
93
  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
94
94
  cols: ['1fr', '24px'],
95
+ style: {
96
+ height: heightProps.height
97
+ },
95
98
  justifyContent: "center",
96
99
  alignItems: "flex-end",
97
100
  gutter: "xxs"
@@ -132,8 +135,7 @@ const ChatComposer = props => {
132
135
  width: (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.clientWidth
133
136
  },
134
137
  onChange: handleChange,
135
- value: inputValue // maxLength={inputMaxLength}
136
-
138
+ value: inputValue
137
139
  }), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
138
140
  cols: ['1fr', '24px'],
139
141
  justifyContent: "flex-end",
package/cjs/parts/chat-container/ChatContainer.js CHANGED
@@ -67,18 +67,16 @@ const ChatContainer = props$1 => {
67
67
  });
68
68
  const onResize = React__default["default"].useCallback(height => {
69
69
  if (onComposerResize) onComposerResize(height);
70
-
71
- if (height > 30) {
72
- /*
70
+ /*
73
71
  setTimeout is used to equal the animation duration from the
74
72
  composer text area when increase its size
75
73
  */
76
- setTimeout(() => {
77
- actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
78
- align: 'start'
79
- });
80
- }, 50);
81
- }
74
+
75
+ setTimeout(() => {
76
+ actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
77
+ align: 'start'
78
+ });
79
+ }, 50);
82
80
  }, [onComposerResize, messagesListProps.messages, actionRef]);
83
81
  const Container = device === 'desktop' ? styled.StyledChatContainerContent : styled.MobileStyledChatContainerContent;
84
82
  const handleTabs = React__default["default"].useCallback(e => {
package/cjs/parts/chat-container/styled.js CHANGED
@@ -18,7 +18,7 @@ const StyledChatContainerContent = /*#__PURE__*/styled__default["default"](dsGri
18
18
  })(["height:100%;min-width:", "px;overflow:hidden;background:", ";position:relative;"], CONTAINER_WIDTH, props => props.theme.colors.neutral['050']);
19
19
  const StyledIndicatorContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
20
20
  componentId: "sc-d732wo-1"
21
- })(["transition:0.4s ease-in-out;position:absolute;visibility:hidden;pointer-events:none;width:100%;padding:0 ", ";left:0;right:0;background:", ";", " ", " & div,a{font-size:13px;}"], props => !props.linear ? props.theme.space.xxs : 0, props => props.theme.colors.neutral['000'], props => props.isLoading === 'top' ? "\n top: -41px;\n transform: translate(0, 41px);\n visibility: visible;\n pointer-events: auto\n " : '', props => props.isLoading === 'bottom' ? "\n bottom: -41px;\n transform: translate(0, -41px);\n visibility: visible;\n pointer-events: auto;\n " : '');
21
+ })(["transition:0.4s ease-in-out;position:absolute;visibility:hidden;pointer-events:none;width:100%;padding:0 ", ";left:0;right:0;background:", ";", " ", " & div,a{font-size:13px;}"], props => !props.linear ? props.theme.space.xxs : 0, props => props.theme.colors.neutral['000'], props => props.isLoading === 'top' ? "\n top: -41px;\n transform: translate(0, 41px);\n visibility: visible;\n pointer-events: auto;\n " : '', props => props.isLoading === 'bottom' ? "\n bottom: -41px;\n transform: translate(0, -41px);\n visibility: visible;\n pointer-events: auto;\n " : '');
22
22
  const MobileStyledChatContainerContent = /*#__PURE__*/styled__default["default"](StyledChatContainerContent).withConfig({
23
23
  componentId: "sc-d732wo-2"
24
24
  })(["", ",", "{font-size:16px;}", "{font-size:13px;}", "{background-color:#fff;box-shadow:-0 1px 3px rgba(53,60,70,0.8);}", ",", "{font-size:16px;text-align:left;}", "{font-size:13px;}", "{font-size:16px;}", "{font-size:16px;}"], styled$1.StyledTitleLeftBubble, styled$1.StyleBodyWrapper, styled$1.StyledTitleRightBubble, style.Wrapper, style.Title, style.Message, style.Time, styled$2.StyledComposerInput, StyledIndicatorContainer);
package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js CHANGED
@@ -232,9 +232,7 @@ const ChatContainerMessagesList = props$2 => {
232
232
  case 'ArrowUp':
233
233
  e.preventDefault();
234
234
 
235
- if (document.activeElement === loadMoreRef.current) {
236
- scrollAndFocus(messages.length - 1);
237
- } else {
235
+ if (document.activeElement !== loadMoreRef.current) {
238
236
  onlyFocus(onScrollStop().shift());
239
237
  }
240
238
 
package/esm/parts/chat-composer/ChatContainerComposer.js CHANGED
@@ -82,6 +82,9 @@ const ChatComposer = props => {
82
82
  "data-testid": dataTestid
83
83
  }, void 0, /*#__PURE__*/_jsx(Grid, {
84
84
  cols: ['1fr', '24px'],
85
+ style: {
86
+ height: heightProps.height
87
+ },
85
88
  justifyContent: "center",
86
89
  alignItems: "flex-end",
87
90
  gutter: "xxs"
@@ -122,8 +125,7 @@ const ChatComposer = props => {
122
125
  width: (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.clientWidth
123
126
  },
124
127
  onChange: handleChange,
125
- value: inputValue // maxLength={inputMaxLength}
126
-
128
+ value: inputValue
127
129
  }), /*#__PURE__*/_jsx(Grid, {
128
130
  cols: ['1fr', '24px'],
129
131
  justifyContent: "flex-end",
package/esm/parts/chat-container/ChatContainer.js CHANGED
@@ -55,18 +55,16 @@ const ChatContainer = props => {
55
55
  });
56
56
  const onResize = React.useCallback(height => {
57
57
  if (onComposerResize) onComposerResize(height);
58
-
59
- if (height > 30) {
60
- /*
58
+ /*
61
59
  setTimeout is used to equal the animation duration from the
62
60
  composer text area when increase its size
63
61
  */
64
- setTimeout(() => {
65
- actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
66
- align: 'start'
67
- });
68
- }, 50);
69
- }
62
+
63
+ setTimeout(() => {
64
+ actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
65
+ align: 'start'
66
+ });
67
+ }, 50);
70
68
  }, [onComposerResize, messagesListProps.messages, actionRef]);
71
69
  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;
72
70
  const handleTabs = React.useCallback(e => {
package/esm/parts/chat-container/styled.js CHANGED
@@ -10,7 +10,7 @@ const StyledChatContainerContent = /*#__PURE__*/styled(Grid).withConfig({
10
10
  })(["height:100%;min-width:", "px;overflow:hidden;background:", ";position:relative;"], CONTAINER_WIDTH, props => props.theme.colors.neutral['050']);
11
11
  const StyledIndicatorContainer = /*#__PURE__*/styled.div.withConfig({
12
12
  componentId: "sc-d732wo-1"
13
- })(["transition:0.4s ease-in-out;position:absolute;visibility:hidden;pointer-events:none;width:100%;padding:0 ", ";left:0;right:0;background:", ";", " ", " & div,a{font-size:13px;}"], props => !props.linear ? props.theme.space.xxs : 0, props => props.theme.colors.neutral['000'], props => props.isLoading === 'top' ? "\n top: -41px;\n transform: translate(0, 41px);\n visibility: visible;\n pointer-events: auto\n " : '', props => props.isLoading === 'bottom' ? "\n bottom: -41px;\n transform: translate(0, -41px);\n visibility: visible;\n pointer-events: auto;\n " : '');
13
+ })(["transition:0.4s ease-in-out;position:absolute;visibility:hidden;pointer-events:none;width:100%;padding:0 ", ";left:0;right:0;background:", ";", " ", " & div,a{font-size:13px;}"], props => !props.linear ? props.theme.space.xxs : 0, props => props.theme.colors.neutral['000'], props => props.isLoading === 'top' ? "\n top: -41px;\n transform: translate(0, 41px);\n visibility: visible;\n pointer-events: auto;\n " : '', props => props.isLoading === 'bottom' ? "\n bottom: -41px;\n transform: translate(0, -41px);\n visibility: visible;\n pointer-events: auto;\n " : '');
14
14
  const MobileStyledChatContainerContent = /*#__PURE__*/styled(StyledChatContainerContent).withConfig({
15
15
  componentId: "sc-d732wo-2"
16
16
  })(["", ",", "{font-size:16px;}", "{font-size:13px;}", "{background-color:#fff;box-shadow:-0 1px 3px rgba(53,60,70,0.8);}", ",", "{font-size:16px;text-align:left;}", "{font-size:13px;}", "{font-size:16px;}", "{font-size:16px;}"], StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble, Wrapper, Title, Message, Time, StyledComposerInput, StyledIndicatorContainer);
package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js CHANGED
@@ -221,9 +221,7 @@ const ChatContainerMessagesList = props => {
221
221
  case 'ArrowUp':
222
222
  e.preventDefault();
223
223
 
224
- if (document.activeElement === loadMoreRef.current) {
225
- scrollAndFocus(messages.length - 1);
226
- } else {
224
+ if (document.activeElement !== loadMoreRef.current) {
227
225
  onlyFocus(onScrollStop().shift());
228
226
  }
229
227
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-chat",
3
- "version": "2.1.0-rc.1",
3
+ "version": "2.1.0-rc.5",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Chat",
6
6
  "module": "./esm/index.js",
@@ -305,15 +305,15 @@
305
305
  "generateSubmodules": true
306
306
  },
307
307
  "dependencies": {
308
- "@elliemae/ds-banner": "2.1.0-rc.1",
309
- "@elliemae/ds-button": "2.1.0-rc.1",
310
- "@elliemae/ds-grid": "2.1.0-rc.1",
311
- "@elliemae/ds-icons": "2.1.0-rc.1",
312
- "@elliemae/ds-indeterminate-progress-indicator": "2.1.0-rc.1",
313
- "@elliemae/ds-props-helpers": "2.1.0-rc.1",
314
- "@elliemae/ds-system": "2.1.0-rc.1",
315
- "@elliemae/ds-tooltip": "2.1.0-rc.1",
316
- "@elliemae/ds-truncated-tooltip-text": "2.1.0-rc.1",
308
+ "@elliemae/ds-banner": "2.1.0-rc.5",
309
+ "@elliemae/ds-button": "2.1.0-rc.5",
310
+ "@elliemae/ds-grid": "2.1.0-rc.5",
311
+ "@elliemae/ds-icons": "2.1.0-rc.5",
312
+ "@elliemae/ds-indeterminate-progress-indicator": "2.1.0-rc.5",
313
+ "@elliemae/ds-props-helpers": "2.1.0-rc.5",
314
+ "@elliemae/ds-system": "2.1.0-rc.5",
315
+ "@elliemae/ds-tooltip": "2.1.0-rc.5",
316
+ "@elliemae/ds-truncated-tooltip-text": "2.1.0-rc.5",
317
317
  "prop-types": "~15.7.2",
318
318
  "react-desc": "~4.1.2",
319
319
  "react-virtual": "~2.3.2"