@elliemae/ds-chat 2.0.1 → 2.1.0-rc.10

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 (31) hide show
  1. package/cjs/ChatDataTestids.js +2 -1
  2. package/cjs/parts/chat-composer/ChatContainerComposer.js +14 -8
  3. package/cjs/parts/chat-composer/props.js +2 -0
  4. package/cjs/parts/chat-container/ChatContainer.js +27 -23
  5. package/cjs/parts/chat-container/styled.js +1 -1
  6. package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +65 -35
  7. package/cjs/parts/chat-sidebar/SideBarChat.js +2 -2
  8. package/cjs/parts/sidebar-button/SidebarButton.js +2 -2
  9. package/esm/ChatDataTestids.js +2 -1
  10. package/esm/parts/chat-composer/ChatContainerComposer.js +14 -8
  11. package/esm/parts/chat-composer/props.js +2 -0
  12. package/esm/parts/chat-container/ChatContainer.js +27 -23
  13. package/esm/parts/chat-container/styled.js +1 -1
  14. package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +63 -33
  15. package/esm/parts/chat-sidebar/SideBarChat.js +2 -2
  16. package/esm/parts/sidebar-button/SidebarButton.js +2 -2
  17. package/package.json +11 -11
  18. package/types/ChatDataTestids.d.ts +1 -0
  19. package/types/parts/chat-card/ChatCard.d.ts +6 -6
  20. package/types/parts/chat-card/props.d.ts +6 -6
  21. package/types/parts/chat-composer/ChatContainerComposer.d.ts +3 -0
  22. package/types/parts/chat-composer/styled.d.ts +3 -155
  23. package/types/parts/chat-container/ChatContainer.d.ts +6 -6
  24. package/types/parts/chat-container-messages-list/ChatContainerMessagesList.d.ts +6 -6
  25. package/types/parts/message-delimiter/MessageDelimiter.d.ts +4 -4
  26. package/types/parts/message-delimiter/props.d.ts +4 -4
  27. package/types/parts/system-message/SystemMessage.d.ts +2 -2
  28. package/types/parts/system-message/props.d.ts +2 -2
  29. package/types/parts/tile-button/TileButton.d.ts +2 -2
  30. package/types/parts/tile-button/props.d.ts +2 -2
  31. package/types/tests/utils.d.ts +1 -27
@@ -17,14 +17,14 @@ import { StyledIndicatorContainer, StyledChatContainerContent, MobileStyledChatC
17
17
  import { useValidateProps } from './config/useValidateProps.js';
18
18
  import { jsxs, jsx } from 'react/jsx-runtime';
19
19
 
20
- var _DSIndeterminateProgr, _StyledIndicatorConta;
20
+ var _DSIndeterminateProgr;
21
21
 
22
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
22
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
23
23
 
24
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
24
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
25
25
 
26
26
  const ChatContainer = props => {
27
- var _containerRef$current;
27
+ var _messagesListProps$me2, _containerRef$current;
28
28
 
29
29
  useValidateProps(props, containerProps);
30
30
  const {
@@ -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 => {
@@ -74,17 +72,23 @@ const ChatContainer = props => {
74
72
  const ref = actionRef || listRef;
75
73
 
76
74
  if (e.shiftKey && e.key === 'Tab') {
77
- e.preventDefault();
75
+ var _messagesListProps$me;
76
+
77
+ if (((_messagesListProps$me = messagesListProps.messages) === null || _messagesListProps$me === void 0 ? void 0 : _messagesListProps$me.length) > 0) {
78
+ e.preventDefault();
79
+
80
+ if (['top', 'bottom'].includes(bannerPosition)) {
81
+ bannerRef.current.focusOnWrapper();
82
+ } else {
83
+ var _ref$current;
78
84
 
79
- if (['top', 'bottom'].includes(bannerPosition)) {
80
- bannerRef.current.focusOnWrapper();
81
- } else {
82
- const last = ref.current.getMessagesInView().pop();
83
- ref.current.focusToIndexWithoutScroll(last);
85
+ const last = ref.current.getMessagesInView().pop();
86
+ (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focusToIndexWithoutScroll(last);
87
+ }
84
88
  }
85
89
  }
86
90
  }
87
- }, [actionRef, onComposerKeyDown, bannerPosition]); // Map actions
91
+ }, [actionRef, onComposerKeyDown, bannerPosition, (_messagesListProps$me2 = messagesListProps.messages) === null || _messagesListProps$me2 === void 0 ? void 0 : _messagesListProps$me2.length]); // Map actions
88
92
 
89
93
  React.useEffect(() => {
90
94
  if (actionRef && actionRef.current) {
@@ -134,15 +138,15 @@ const ChatContainer = props => {
134
138
  isOpen: true,
135
139
  type: bannerProps.type || BANNER_TYPES.INFO,
136
140
  actionRef: bannerRef
137
- })), sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx(StyledIndicatorContainer, {
141
+ })), sendingMessages && sendingMessages.length > 0 ? /*#__PURE__*/_jsx(StyledIndicatorContainer, {
138
142
  isLoading: "bottom",
139
143
  linear: true,
140
144
  "data-testid": "ds-chat-loading-indicator"
141
145
  }, void 0, /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
142
146
  processing: true,
143
- title: "Loading",
147
+ title: sendingText,
144
148
  lineOnly: true
145
- }))) : null), /*#__PURE__*/jsx(ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
149
+ })) : null), /*#__PURE__*/jsx(ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
146
150
  onKeyDown: handleTabs,
147
151
  onResize: onResize,
148
152
  maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,
@@ -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);
@@ -15,18 +15,18 @@ import React from 'react';
15
15
  import { describe } from 'react-desc';
16
16
  import { useVirtual } from 'react-virtual';
17
17
  import DSButton from '@elliemae/ds-button';
18
+ import { debounce } from 'lodash';
18
19
  import { ChatBubble } from '../bubble/ChatBubble.js';
19
20
  import { BUBBLE_TYPES } from '../bubble/props.js';
20
21
  import { MessageDelimiter } from '../message-delimiter/MessageDelimiter.js';
21
22
  import { SystemMessage } from '../system-message/SystemMessage.js';
22
23
  import { ListItem, StyledWrapperListItem, StyledWrapper, StyledChatContainerContentList, StyledChatContainerContentListScroll, StyledLoadMoreContainer } from './styled.js';
23
24
  import { listProps, defaultProps } from './props.js';
24
- import { useValidateProps } from './config/useValidateProps.js';
25
25
  import { jsx } from 'react/jsx-runtime';
26
26
 
27
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
27
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
28
28
 
29
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
29
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
30
30
 
31
31
  const getPadding = _ref => {
32
32
  let {
@@ -43,7 +43,6 @@ const getPadding = _ref => {
43
43
  };
44
44
 
45
45
  const ChatContainerMessagesList = props => {
46
- useValidateProps(props, listProps);
47
46
  const {
48
47
  sendingText,
49
48
  bannerPosition,
@@ -56,6 +55,7 @@ const ChatContainerMessagesList = props => {
56
55
  isLoading,
57
56
  bannerRef
58
57
  } = props;
58
+ const pendingOnScroll = React.useRef(false);
59
59
  const loadMoreRef = React.useRef(null);
60
60
  const virtualListRef = React.useRef(); // estimateSize should not be really required given what was stated on
61
61
  // https://github.com/tannerlinsley/react-virtual/issues/23
@@ -75,9 +75,16 @@ const ChatContainerMessagesList = props => {
75
75
  })), {}, {
76
76
  estimateSize: React.useCallback(() => 80, [])
77
77
  }));
78
- const onScrollStop = React.useCallback(() => {
78
+ const debouncedScroll = React.useMemo(() => debounce(() => {
79
79
  var _virtualListRef$curre;
80
80
 
81
+ if (document.visibilityState === 'hidden') {
82
+ pendingOnScroll.current = true;
83
+ return [];
84
+ }
85
+
86
+ if (!virtualListRef.current) return [];
87
+ pendingOnScroll.current = false;
81
88
  const {
82
89
  bottom,
83
90
  top
@@ -86,15 +93,15 @@ const ChatContainerMessagesList = props => {
86
93
  const indexList = [];
87
94
  list.forEach(item => {
88
95
  const {
89
- top: itemTop,
90
- bottom: itemBottom
96
+ top: itemTop
91
97
  } = item.getBoundingClientRect();
92
98
  const itemPadding = 10;
93
- if (itemTop + itemPadding < bottom && itemBottom - itemPadding > top) indexList.push(item.dataset.index);
99
+ if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index);
94
100
  });
95
101
  if (onScrollEnds) onScrollEnds(indexList);
96
102
  return indexList;
97
- }, [onScrollEnds]);
103
+ }, 500), [onScrollEnds]);
104
+ const onScrollStop = React.useCallback(debouncedScroll, [debouncedScroll]);
98
105
  const onlyFocus = React.useCallback(index => {
99
106
  setTimeout(() => {
100
107
  virtualListRef.current.querySelector("[data-index=\"".concat(index, "\"]")).focus();
@@ -106,7 +113,8 @@ const ChatContainerMessagesList = props => {
106
113
  };
107
114
  vScroll(index, b);
108
115
  onlyFocus(index);
109
- }, [onlyFocus, vScroll]);
116
+ onScrollStop();
117
+ }, [onScrollStop, onlyFocus, vScroll]);
110
118
  React.useEffect(() => {
111
119
  if (actionRef && actionRef.current) {
112
120
  actionRef.current.scrollToIndex = function (a) {
@@ -114,9 +122,11 @@ const ChatContainerMessagesList = props => {
114
122
  align: 'center'
115
123
  };
116
124
  vScroll(a, b);
125
+ onScrollStop();
117
126
  };
118
127
 
119
128
  actionRef.current.getMessagesInView = onScrollStop;
129
+ onScrollStop(); // init useMemo due to debounce use.
120
130
 
121
131
  actionRef.current.focusToIndex = function (a) {
122
132
  let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
@@ -127,7 +137,7 @@ const ChatContainerMessagesList = props => {
127
137
 
128
138
  actionRef.current.focusToIndexWithoutScroll = onlyFocus;
129
139
 
130
- actionRef.current.focusToList = a => {
140
+ actionRef.current.focusToList = () => {
131
141
  var _virtualListRef$curre2;
132
142
 
133
143
  (_virtualListRef$curre2 = virtualListRef.current) === null || _virtualListRef$curre2 === void 0 ? void 0 : _virtualListRef$curre2.focus();
@@ -144,7 +154,17 @@ const ChatContainerMessagesList = props => {
144
154
  switch (key) {
145
155
  case 'ArrowUp':
146
156
  e.preventDefault();
147
- if (index > 0) virtualListRef.current.querySelector("[data-index=\"".concat(index - 1, "\"]")).focus();
157
+
158
+ if (index > 0) {
159
+ var _virtualListRef$curre3;
160
+
161
+ ((_virtualListRef$curre3 = virtualListRef.current) === null || _virtualListRef$curre3 === void 0 ? void 0 : _virtualListRef$curre3.querySelector("[data-index=\"".concat(index - 1, "\"]"))).focus();
162
+ } else if (hasMoreItems === 'top') {
163
+ var _loadMoreRef$current;
164
+
165
+ (_loadMoreRef$current = loadMoreRef.current) === null || _loadMoreRef$current === void 0 ? void 0 : _loadMoreRef$current.focus();
166
+ }
167
+
148
168
  break;
149
169
 
150
170
  case 'ArrowDown':
@@ -167,31 +187,26 @@ const ChatContainerMessagesList = props => {
167
187
  break;
168
188
 
169
189
  case 'Tab':
170
- e.preventDefault();
171
-
172
190
  if (hasMoreItems === 'bottom' && !e.shiftKey) {
173
- var _loadMoreRef$current;
174
-
175
- (_loadMoreRef$current = loadMoreRef.current) === null || _loadMoreRef$current === void 0 ? void 0 : _loadMoreRef$current.focus();
176
- } else if (hasMoreItems === 'top' && e.shiftKey) {
177
191
  var _loadMoreRef$current2;
178
192
 
193
+ e.preventDefault();
179
194
  (_loadMoreRef$current2 = loadMoreRef.current) === null || _loadMoreRef$current2 === void 0 ? void 0 : _loadMoreRef$current2.focus();
180
- } else if (!e.shiftKey) {
195
+ } else if (hasMoreItems === 'top' && e.shiftKey) ; else if (!e.shiftKey) {
181
196
  if (bannerPosition) {
197
+ e.preventDefault();
182
198
  bannerRef.current.focusOnWrapper();
183
- } else {
184
- actionRef.current.focusToComposer();
185
199
  }
186
200
  } else {
187
- var _virtualListRef$curre3;
201
+ var _virtualListRef$curre4;
188
202
 
189
- (_virtualListRef$curre3 = virtualListRef.current) === null || _virtualListRef$curre3 === void 0 ? void 0 : _virtualListRef$curre3.focus();
203
+ e.preventDefault();
204
+ (_virtualListRef$curre4 = virtualListRef.current) === null || _virtualListRef$curre4 === void 0 ? void 0 : _virtualListRef$curre4.focus();
190
205
  }
191
206
 
192
207
  break;
193
208
  }
194
- }, [actionRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
209
+ }, [bannerRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
195
210
  const handleListKey = React.useCallback(e => {
196
211
  const {
197
212
  key
@@ -200,12 +215,22 @@ const ChatContainerMessagesList = props => {
200
215
  switch (key) {
201
216
  case 'ArrowUp':
202
217
  e.preventDefault();
203
- onlyFocus(onScrollStop().shift());
218
+
219
+ if (document.activeElement !== loadMoreRef.current) {
220
+ onlyFocus(onScrollStop().shift());
221
+ }
222
+
204
223
  break;
205
224
 
206
225
  case 'ArrowDown':
207
226
  e.preventDefault();
208
- onlyFocus(onScrollStop().pop());
227
+
228
+ if (document.activeElement === loadMoreRef.current) {
229
+ virtualListRef.current.querySelector("[data-index=\"0\"]").focus();
230
+ } else {
231
+ onlyFocus(onScrollStop().pop());
232
+ }
233
+
209
234
  break;
210
235
 
211
236
  case 'Home':
@@ -238,15 +263,18 @@ const ChatContainerMessagesList = props => {
238
263
  e.preventDefault();
239
264
  actionRef.current.focusToComposer();
240
265
  } else {
241
- var _virtualListRef$curre4;
266
+ var _virtualListRef$curre5;
242
267
 
243
268
  e.preventDefault();
244
- (_virtualListRef$curre4 = virtualListRef.current) === null || _virtualListRef$curre4 === void 0 ? void 0 : _virtualListRef$curre4.focus();
269
+ (_virtualListRef$curre5 = virtualListRef.current) === null || _virtualListRef$curre5 === void 0 ? void 0 : _virtualListRef$curre5.focus();
245
270
  }
246
271
 
247
272
  break;
248
273
  }
249
274
  }, [actionRef, hasMoreItems, messages.length, onScrollStop, onlyFocus, scrollAndFocus]);
275
+ const checkPendingOnScroll = React.useCallback(() => {
276
+ if (pendingOnScroll.current === true) onScrollStop();
277
+ }, [onScrollStop]);
250
278
  React.useEffect(() => {
251
279
  let handlerCallback = null;
252
280
  const localVirtualRef = virtualListRef.current;
@@ -260,11 +288,13 @@ const ChatContainerMessagesList = props => {
260
288
  virtualListRef.current.addEventListener('scroll', onScroll);
261
289
  }
262
290
 
291
+ document.addEventListener('visibilitychange', checkPendingOnScroll);
263
292
  return () => {
264
293
  if (handlerCallback) clearTimeout(handlerCallback);
265
294
  if (onScrollEnds) localVirtualRef.removeEventListener('scroll', onScroll);
295
+ document.removeEventListener('visibilitychange', checkPendingOnScroll);
266
296
  };
267
- }, [onScrollStop, onScrollEnds]);
297
+ }, [onScrollStop, onScrollEnds, checkPendingOnScroll]);
268
298
  const render = React.useMemo(() => virtualItems.map(virtualItem => {
269
299
  const {
270
300
  index,
@@ -285,14 +315,14 @@ const ChatContainerMessagesList = props => {
285
315
  "data-index": index,
286
316
  style: style,
287
317
  ref: measureRef,
288
- tabIndex: 0,
318
+ tabIndex: -1,
289
319
  onKeyDown: handleKey,
290
320
  role: "listitem",
291
321
  children: /*#__PURE__*/_jsx(StyledWrapperListItem, {
292
322
  type: row.type
293
323
  }, void 0, row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ?
294
324
  /*#__PURE__*/
295
- // eslint-disable-next-line
325
+ // eslint-disable-next-line eslint-comments/no-unlimited-disable
296
326
  jsx(ChatBubble, _objectSpread(_objectSpread({}, row), {}, {
297
327
  helpMessage: isSending ? sendingText : row.helpMessage
298
328
  })) : null, row.type === BUBBLE_TYPES.DELIMITER ? /*#__PURE__*/jsx(MessageDelimiter, _objectSpread({}, row)) : null, row.type === BUBBLE_TYPES.SYSTEM ? /*#__PURE__*/jsx(SystemMessage, _objectSpread({}, row)) : null)
@@ -308,7 +338,7 @@ const ChatContainerMessagesList = props => {
308
338
  onKeyDown: handleListKey,
309
339
  children: /*#__PURE__*/_jsx(StyledChatContainerContentListScroll, {
310
340
  height: "".concat(totalSize, "px")
311
- }, void 0, render, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx(StyledLoadMoreContainer, {
341
+ }, void 0, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx(StyledLoadMoreContainer, {
312
342
  hasMoreItems: hasMoreItems
313
343
  }, void 0, /*#__PURE__*/_jsx(DSButton, {
314
344
  labelText: "Load More",
@@ -316,7 +346,7 @@ const ChatContainerMessagesList = props => {
316
346
  onClick: getMoreMessages,
317
347
  "data-testid": "ds-chat-load-more-btn",
318
348
  innerRef: loadMoreRef
319
- })) : null)
349
+ })) : null, render)
320
350
  }));
321
351
  };
322
352
 
@@ -18,9 +18,9 @@ import { chatSidebarProps, defaultProps } from './props.js';
18
18
  import { useValidateProps } from './config/useValidateProps.js';
19
19
  import { jsxs, jsx } from 'react/jsx-runtime';
20
20
 
21
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
21
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
22
22
 
23
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
23
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
24
24
 
25
25
  const FooterChat = _ref => {
26
26
  let {
@@ -13,9 +13,9 @@ import { jsxs } from 'react/jsx-runtime';
13
13
 
14
14
  const _excluded = ["label", "dsId", "onClick", "Icon"];
15
15
 
16
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
16
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
17
17
 
18
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
18
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
19
19
  const SidebarButton = _ref => {
20
20
  let {
21
21
  label,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-chat",
3
- "version": "2.0.1",
3
+ "version": "2.1.0-rc.10",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Chat",
6
6
  "module": "./esm/index.js",
@@ -305,22 +305,22 @@
305
305
  "generateSubmodules": true
306
306
  },
307
307
  "dependencies": {
308
- "@elliemae/ds-banner": "2.0.1",
309
- "@elliemae/ds-button": "2.0.1",
310
- "@elliemae/ds-grid": "2.0.1",
311
- "@elliemae/ds-icons": "2.0.1",
312
- "@elliemae/ds-indeterminate-progress-indicator": "2.0.1",
313
- "@elliemae/ds-props-helpers": "2.0.1",
314
- "@elliemae/ds-system": "2.0.1",
315
- "@elliemae/ds-tooltip": "2.0.1",
316
- "@elliemae/ds-truncated-tooltip-text": "2.0.1",
308
+ "@elliemae/ds-banner": "2.1.0-rc.10",
309
+ "@elliemae/ds-button": "2.1.0-rc.10",
310
+ "@elliemae/ds-grid": "2.1.0-rc.10",
311
+ "@elliemae/ds-icons": "2.1.0-rc.10",
312
+ "@elliemae/ds-indeterminate-progress-indicator": "2.1.0-rc.10",
313
+ "@elliemae/ds-props-helpers": "2.1.0-rc.10",
314
+ "@elliemae/ds-system": "2.1.0-rc.10",
315
+ "@elliemae/ds-tooltip": "2.1.0-rc.10",
316
+ "@elliemae/ds-truncated-tooltip-text": "2.1.0-rc.10",
317
317
  "prop-types": "~15.7.2",
318
318
  "react-desc": "~4.1.2",
319
319
  "react-virtual": "~2.3.2"
320
320
  },
321
321
  "devDependencies": {
322
322
  "@testing-library/dom": "~8.11.1",
323
- "@testing-library/jest-dom": "~5.15.1",
323
+ "@testing-library/jest-dom": "~5.15.0",
324
324
  "@testing-library/react": "~12.1.2",
325
325
  "@testing-library/user-event": "~13.5.0",
326
326
  "styled-components": "~5.3.3"
@@ -18,4 +18,5 @@ export declare const ChatDataTestIds: {
18
18
  BUBBLE: string;
19
19
  BUBBLE_TITLE: string;
20
20
  BUBBLE_BODY: string;
21
+ BANNER: string;
21
22
  };
@@ -6,22 +6,22 @@ declare const ChatCard: {
6
6
  propTypes: {
7
7
  title: any;
8
8
  content: {
9
- defaultValue<T = unknown>(arg: T): {
9
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
10
10
  deprecated: import("react-desc").PropTypesDescValidator;
11
11
  };
12
- isRequired: import("react-desc").PropTypesDescValidator;
12
+ isRequired: import("react-desc").PropTypesDescValue;
13
13
  };
14
14
  time: {
15
- defaultValue<T = unknown>(arg: T): {
15
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
16
16
  deprecated: import("react-desc").PropTypesDescValidator;
17
17
  };
18
- isRequired: import("react-desc").PropTypesDescValidator;
18
+ isRequired: import("react-desc").PropTypesDescValue;
19
19
  };
20
20
  rightAddon: {
21
- defaultValue<T = unknown>(arg: T): {
21
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
22
22
  deprecated: import("react-desc").PropTypesDescValidator;
23
23
  };
24
- isRequired: import("react-desc").PropTypesDescValidator;
24
+ isRequired: import("react-desc").PropTypesDescValue;
25
25
  };
26
26
  };
27
27
  };
@@ -3,22 +3,22 @@
3
3
  export declare const propTypes: {
4
4
  title: any;
5
5
  content: {
6
- defaultValue<T = unknown>(arg: T): {
6
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
7
7
  deprecated: import("react-desc").PropTypesDescValidator;
8
8
  };
9
- isRequired: import("react-desc").PropTypesDescValidator;
9
+ isRequired: import("react-desc").PropTypesDescValue;
10
10
  };
11
11
  time: {
12
- defaultValue<T = unknown>(arg: T): {
12
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
13
13
  deprecated: import("react-desc").PropTypesDescValidator;
14
14
  };
15
- isRequired: import("react-desc").PropTypesDescValidator;
15
+ isRequired: import("react-desc").PropTypesDescValue;
16
16
  };
17
17
  rightAddon: {
18
- defaultValue<T = unknown>(arg: T): {
18
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
19
19
  deprecated: import("react-desc").PropTypesDescValidator;
20
20
  };
21
- isRequired: import("react-desc").PropTypesDescValidator;
21
+ isRequired: import("react-desc").PropTypesDescValue;
22
22
  };
23
23
  };
24
24
  export interface CardPropTypes {
@@ -10,6 +10,9 @@ declare const ChatComposer: {
10
10
  inputValue: {
11
11
  deprecated: import("react-desc").PropTypesDescValidator;
12
12
  };
13
+ ariaMaxLengthMessage: {
14
+ deprecated: import("react-desc").PropTypesDescValidator;
15
+ };
13
16
  maxLengthMessage: {
14
17
  deprecated: import("react-desc").PropTypesDescValidator;
15
18
  };