@elliemae/ds-chat 2.0.0-rc.9 → 2.1.0-rc.0

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 (26) hide show
  1. package/cjs/parts/chat-composer/ChatContainerComposer.js +3 -3
  2. package/cjs/parts/chat-composer/styled.js +1 -1
  3. package/cjs/parts/chat-container/ChatContainer.js +28 -19
  4. package/cjs/parts/chat-container/styled.js +2 -2
  5. package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +57 -29
  6. package/cjs/parts/chat-sidebar/SideBarChat.js +2 -2
  7. package/cjs/parts/sidebar-button/SidebarButton.js +2 -2
  8. package/esm/parts/chat-composer/ChatContainerComposer.js +3 -3
  9. package/esm/parts/chat-composer/styled.js +1 -1
  10. package/esm/parts/chat-container/ChatContainer.js +28 -19
  11. package/esm/parts/chat-container/styled.js +2 -2
  12. package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +57 -29
  13. package/esm/parts/chat-sidebar/SideBarChat.js +2 -2
  14. package/esm/parts/sidebar-button/SidebarButton.js +2 -2
  15. package/package.json +11 -10
  16. package/types/parts/chat-card/ChatCard.d.ts +6 -6
  17. package/types/parts/chat-card/props.d.ts +6 -6
  18. package/types/parts/chat-composer/styled.d.ts +3 -155
  19. package/types/parts/chat-container/ChatContainer.d.ts +6 -6
  20. package/types/parts/chat-container-messages-list/ChatContainerMessagesList.d.ts +6 -6
  21. package/types/parts/message-delimiter/MessageDelimiter.d.ts +4 -4
  22. package/types/parts/message-delimiter/props.d.ts +4 -4
  23. package/types/parts/system-message/SystemMessage.d.ts +2 -2
  24. package/types/parts/system-message/props.d.ts +2 -2
  25. package/types/parts/tile-button/TileButton.d.ts +2 -2
  26. package/types/parts/tile-button/props.d.ts +2 -2
package/cjs/parts/chat-composer/ChatContainerComposer.js CHANGED
@@ -28,9 +28,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
28
28
 
29
29
  var _PaperAirplane, _Grid;
30
30
 
31
- 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; }
31
+ 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; }
32
32
 
33
- 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__default["default"](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; }
33
+ 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__default["default"](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; }
34
34
 
35
35
  const ChatComposer = props => {
36
36
  var _input$current;
@@ -146,7 +146,7 @@ const ChatComposer = props => {
146
146
  }, void 0, inputMaxLength && hasError ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
147
147
  children: [/*#__PURE__*/_jsx__default["default"](styled.StyledCounterErrorA11y, {
148
148
  role: "alert"
149
- }, void 0, maxLengthMessage || "You have exceeded the character limit by ".concat(inputLength - inputMaxLength)), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
149
+ }, void 0, maxLengthMessage || "You have entered ".concat(inputLength, " characters and have exceeded the limit by ").concat(inputLength - inputMaxLength, ". Please limit to less than ").concat(inputMaxLength, " characters. ")), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
150
150
  }) : '', inputMaxLength ? " ".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))));
151
151
  };
152
152
 
package/cjs/parts/chat-composer/styled.js CHANGED
@@ -16,7 +16,7 @@ const StyledChatContainerContentComposer = /*#__PURE__*/styled__default["default
16
16
  })(["width:100%;min-height:56px;background:", ";padding:", ";padding-bottom:3px;padding-top:6px;padding-left:", ";max-height:", ";border-top:1px solid #cbcfd7;"], props => props.theme.colors.neutral['050'], props => props.theme.space.xxs, props => props.theme.space.xs, props => props.maxHeight);
17
17
  const StyledComposerInput = /*#__PURE__*/styled__default["default"].textarea.withConfig({
18
18
  componentId: "sc-1ahwpce-1"
19
- })(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.3s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
19
+ })(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.05s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
20
20
  const StyledComposerButton = /*#__PURE__*/styled__default["default"](DSButton.DSButton).withConfig({
21
21
  componentId: "sc-1ahwpce-2"
22
22
  })(["&:disabled{background:none;svg{fill:#5d6775;}}svg{fill:", ";}&:focus{background:", ";}"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[200]);
package/cjs/parts/chat-container/ChatContainer.js CHANGED
@@ -29,11 +29,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
29
29
  var DSIndeterminateProgressIndicator__default = /*#__PURE__*/_interopDefaultLegacy(DSIndeterminateProgressIndicator);
30
30
  var DSBanner__default = /*#__PURE__*/_interopDefaultLegacy(DSBanner);
31
31
 
32
- var _DSIndeterminateProgr, _StyledIndicatorConta;
32
+ var _DSIndeterminateProgr;
33
33
 
34
- 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; }
34
+ 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; }
35
35
 
36
- 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__default["default"](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; }
36
+ 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__default["default"](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; }
37
37
 
38
38
  const ChatContainer = props$1 => {
39
39
  var _containerRef$current;
@@ -51,7 +51,6 @@ const ChatContainer = props$1 => {
51
51
  onKeyDown: onComposerKeyDown
52
52
  },
53
53
  actionRef,
54
- autoScroll,
55
54
  device,
56
55
  isLoading,
57
56
  hasMoreItems,
@@ -69,29 +68,39 @@ const ChatContainer = props$1 => {
69
68
  const onResize = React__default["default"].useCallback(height => {
70
69
  if (onComposerResize) onComposerResize(height);
71
70
 
72
- if (autoScroll) {
73
- listRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
74
- align: 'end'
75
- });
71
+ if (height > 30) {
72
+ /*
73
+ setTimeout is used to equal the animation duration from the
74
+ composer text area when increase its size
75
+ */
76
+ setTimeout(() => {
77
+ actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
78
+ align: 'start'
79
+ });
80
+ }, 50);
76
81
  }
77
- }, [onComposerResize, messagesListProps.messages, autoScroll]);
82
+ }, [onComposerResize, messagesListProps.messages, actionRef]);
78
83
  const Container = device === 'desktop' ? styled.StyledChatContainerContent : styled.MobileStyledChatContainerContent;
79
84
  const handleTabs = React__default["default"].useCallback(e => {
80
85
  if (onComposerKeyDown) onComposerKeyDown(e);else {
81
86
  const ref = actionRef || listRef;
82
87
 
83
88
  if (e.shiftKey && e.key === 'Tab') {
84
- e.preventDefault();
89
+ if (messagesListProps.messages.length > 0) {
90
+ e.preventDefault();
85
91
 
86
- if (['top', 'bottom'].includes(bannerPosition)) {
87
- bannerRef.current.focusOnWrapper();
88
- } else {
89
- const last = ref.current.getMessagesInView().pop();
90
- ref.current.focusToIndexWithoutScroll(last);
92
+ if (['top', 'bottom'].includes(bannerPosition)) {
93
+ bannerRef.current.focusOnWrapper();
94
+ } else {
95
+ var _ref$current;
96
+
97
+ const last = ref.current.getMessagesInView().pop();
98
+ (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focusToIndexWithoutScroll(last);
99
+ }
91
100
  }
92
101
  }
93
102
  }
94
- }, [actionRef, onComposerKeyDown, bannerPosition]); // Map actions
103
+ }, [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages.length]); // Map actions
95
104
 
96
105
  React__default["default"].useEffect(() => {
97
106
  if (actionRef && actionRef.current) {
@@ -141,15 +150,15 @@ const ChatContainer = props$1 => {
141
150
  isOpen: true,
142
151
  type: bannerProps.type || DSBanner.BANNER_TYPES.INFO,
143
152
  actionRef: bannerRef
144
- })), sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
153
+ })), sendingMessages && sendingMessages.length > 0 ? /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
145
154
  isLoading: "bottom",
146
155
  linear: true,
147
156
  "data-testid": "ds-chat-loading-indicator"
148
157
  }, void 0, /*#__PURE__*/_jsx__default["default"](DSIndeterminateProgressIndicator__default["default"], {
149
158
  processing: true,
150
- title: "Loading",
159
+ title: sendingText,
151
160
  lineOnly: true
152
- }))) : null), /*#__PURE__*/jsxRuntime.jsx(ChatContainerComposer.ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
161
+ })) : null), /*#__PURE__*/jsxRuntime.jsx(ChatContainerComposer.ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
153
162
  onKeyDown: handleTabs,
154
163
  onResize: onResize,
155
164
  maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,
package/cjs/parts/chat-container/styled.js CHANGED
@@ -18,10 +18,10 @@ 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:", ";", " ", ""], 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
- })(["", ",", "{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;}"], styled$1.StyledTitleLeftBubble, styled$1.StyleBodyWrapper, styled$1.StyledTitleRightBubble, style.Wrapper, style.Title, style.Message, style.Time, styled$2.StyledComposerInput);
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);
25
25
 
26
26
  exports.CONTAINER_WIDTH = CONTAINER_WIDTH;
27
27
  exports.MobileStyledChatContainerContent = MobileStyledChatContainerContent;
package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js CHANGED
@@ -4,8 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _jsx = require('@babel/runtime/helpers/jsx');
6
6
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
- require('core-js/modules/esnext.async-iterator.for-each.js');
7
+ require('core-js/modules/esnext.async-iterator.some.js');
8
8
  require('core-js/modules/esnext.iterator.constructor.js');
9
+ require('core-js/modules/esnext.iterator.some.js');
10
+ require('core-js/modules/esnext.async-iterator.for-each.js');
9
11
  require('core-js/modules/esnext.iterator.for-each.js');
10
12
  require('core-js/modules/esnext.async-iterator.map.js');
11
13
  require('core-js/modules/esnext.iterator.map.js');
@@ -33,16 +35,21 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
33
35
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
34
36
  var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
35
37
 
36
- 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; }
38
+ 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; }
37
39
 
38
- 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__default["default"](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; }
40
+ 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__default["default"](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; }
39
41
 
40
- const getPadding = hasMoreItems => {
42
+ const getPadding = _ref => {
43
+ let {
44
+ hasMoreItems,
45
+ bannerPosition,
46
+ isLoading
47
+ } = _ref;
41
48
  const padding = {
42
49
  paddingStart: 0,
43
50
  paddingEnd: -5
44
51
  };
45
- if (hasMoreItems === 'top') padding.paddingStart = 42;else if (hasMoreItems === 'bottom') padding.paddingEnd = 42;
52
+ if ([hasMoreItems, bannerPosition, isLoading].some(item => item === 'top')) padding.paddingStart = 42;else if ([hasMoreItems, bannerPosition, isLoading].some(item => item === 'bottom')) padding.paddingEnd = 42;
46
53
  return padding;
47
54
  };
48
55
 
@@ -72,7 +79,11 @@ const ChatContainerMessagesList = props$2 => {
72
79
  size: messages.length,
73
80
  parentRef: virtualListRef,
74
81
  overscan: 15
75
- }, getPadding(hasMoreItems)), {}, {
82
+ }, getPadding({
83
+ hasMoreItems,
84
+ bannerPosition,
85
+ isLoading
86
+ })), {}, {
76
87
  estimateSize: React__default["default"].useCallback(() => 80, [])
77
88
  }));
78
89
  const onScrollStop = React__default["default"].useCallback(() => {
@@ -144,7 +155,17 @@ const ChatContainerMessagesList = props$2 => {
144
155
  switch (key) {
145
156
  case 'ArrowUp':
146
157
  e.preventDefault();
147
- if (index > 0) virtualListRef.current.querySelector("[data-index=\"".concat(index - 1, "\"]")).focus();
158
+
159
+ if (index > 0) {
160
+ var _virtualListRef$curre3;
161
+
162
+ ((_virtualListRef$curre3 = virtualListRef.current) === null || _virtualListRef$curre3 === void 0 ? void 0 : _virtualListRef$curre3.querySelector("[data-index=\"".concat(index - 1, "\"]"))).focus();
163
+ } else if (hasMoreItems === 'top') {
164
+ var _loadMoreRef$current;
165
+
166
+ (_loadMoreRef$current = loadMoreRef.current) === null || _loadMoreRef$current === void 0 ? void 0 : _loadMoreRef$current.focus();
167
+ }
168
+
148
169
  break;
149
170
 
150
171
  case 'ArrowDown':
@@ -167,31 +188,31 @@ const ChatContainerMessagesList = props$2 => {
167
188
  break;
168
189
 
169
190
  case 'Tab':
170
- e.preventDefault();
171
-
172
191
  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
192
  var _loadMoreRef$current2;
178
193
 
194
+ e.preventDefault();
179
195
  (_loadMoreRef$current2 = loadMoreRef.current) === null || _loadMoreRef$current2 === void 0 ? void 0 : _loadMoreRef$current2.focus();
196
+ } else if (hasMoreItems === 'top' && e.shiftKey) {
197
+ var _loadMoreRef$current3;
198
+
199
+ e.preventDefault();
200
+ (_loadMoreRef$current3 = loadMoreRef.current) === null || _loadMoreRef$current3 === void 0 ? void 0 : _loadMoreRef$current3.focus();
180
201
  } else if (!e.shiftKey) {
181
202
  if (bannerPosition) {
203
+ e.preventDefault();
182
204
  bannerRef.current.focusOnWrapper();
183
- } else {
184
- actionRef.current.focusToComposer();
185
205
  }
186
206
  } else {
187
- var _virtualListRef$curre3;
207
+ var _virtualListRef$curre4;
188
208
 
189
- (_virtualListRef$curre3 = virtualListRef.current) === null || _virtualListRef$curre3 === void 0 ? void 0 : _virtualListRef$curre3.focus();
209
+ e.preventDefault();
210
+ (_virtualListRef$curre4 = virtualListRef.current) === null || _virtualListRef$curre4 === void 0 ? void 0 : _virtualListRef$curre4.focus();
190
211
  }
191
212
 
192
213
  break;
193
214
  }
194
- }, [actionRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
215
+ }, [actionRef, bannerRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
195
216
  const handleListKey = React__default["default"].useCallback(e => {
196
217
  const {
197
218
  key
@@ -200,7 +221,13 @@ const ChatContainerMessagesList = props$2 => {
200
221
  switch (key) {
201
222
  case 'ArrowUp':
202
223
  e.preventDefault();
203
- onlyFocus(onScrollStop().shift());
224
+
225
+ if (document.activeElement === loadMoreRef.current) {
226
+ scrollAndFocus(messages.length - 1);
227
+ } else {
228
+ onlyFocus(onScrollStop().shift());
229
+ }
230
+
204
231
  break;
205
232
 
206
233
  case 'ArrowDown':
@@ -221,15 +248,15 @@ const ChatContainerMessagesList = props$2 => {
221
248
  case 'Tab':
222
249
  if (document.activeElement !== loadMoreRef.current) {
223
250
  if (hasMoreItems === 'bottom' && !e.shiftKey) {
224
- var _loadMoreRef$current3;
251
+ var _loadMoreRef$current4;
225
252
 
226
253
  e.preventDefault();
227
- (_loadMoreRef$current3 = loadMoreRef.current) === null || _loadMoreRef$current3 === void 0 ? void 0 : _loadMoreRef$current3.focus();
254
+ (_loadMoreRef$current4 = loadMoreRef.current) === null || _loadMoreRef$current4 === void 0 ? void 0 : _loadMoreRef$current4.focus();
228
255
  } else if (hasMoreItems === 'top' && e.shiftKey) {
229
- var _loadMoreRef$current4;
256
+ var _loadMoreRef$current5;
230
257
 
231
258
  e.preventDefault();
232
- (_loadMoreRef$current4 = loadMoreRef.current) === null || _loadMoreRef$current4 === void 0 ? void 0 : _loadMoreRef$current4.focus();
259
+ (_loadMoreRef$current5 = loadMoreRef.current) === null || _loadMoreRef$current5 === void 0 ? void 0 : _loadMoreRef$current5.focus();
233
260
  } else if (!e.shiftKey) {
234
261
  e.preventDefault();
235
262
  actionRef.current.focusToComposer();
@@ -238,10 +265,10 @@ const ChatContainerMessagesList = props$2 => {
238
265
  e.preventDefault();
239
266
  actionRef.current.focusToComposer();
240
267
  } else {
241
- var _virtualListRef$curre4;
268
+ var _virtualListRef$curre5;
242
269
 
243
270
  e.preventDefault();
244
- (_virtualListRef$curre4 = virtualListRef.current) === null || _virtualListRef$curre4 === void 0 ? void 0 : _virtualListRef$curre4.focus();
271
+ (_virtualListRef$curre5 = virtualListRef.current) === null || _virtualListRef$curre5 === void 0 ? void 0 : _virtualListRef$curre5.focus();
245
272
  }
246
273
 
247
274
  break;
@@ -285,14 +312,14 @@ const ChatContainerMessagesList = props$2 => {
285
312
  "data-index": index,
286
313
  style: style,
287
314
  ref: measureRef,
288
- tabIndex: 0,
315
+ tabIndex: -1,
289
316
  onKeyDown: handleKey,
290
317
  role: "listitem",
291
318
  children: /*#__PURE__*/_jsx__default["default"](styled.StyledWrapperListItem, {
292
319
  type: row.type
293
320
  }, void 0, row.type === props$1.BUBBLE_TYPES.SENDER || row.type === props$1.BUBBLE_TYPES.RECIPIENT ?
294
321
  /*#__PURE__*/
295
- // eslint-disable-next-line
322
+ // eslint-disable-next-line eslint-comments/no-unlimited-disable
296
323
  jsxRuntime.jsx(ChatBubble.ChatBubble, _objectSpread(_objectSpread({}, row), {}, {
297
324
  helpMessage: isSending ? sendingText : row.helpMessage
298
325
  })) : null, row.type === props$1.BUBBLE_TYPES.DELIMITER ? /*#__PURE__*/jsxRuntime.jsx(MessageDelimiter.MessageDelimiter, _objectSpread({}, row)) : null, row.type === props$1.BUBBLE_TYPES.SYSTEM ? /*#__PURE__*/jsxRuntime.jsx(SystemMessage.SystemMessage, _objectSpread({}, row)) : null)
@@ -302,12 +329,13 @@ const ChatContainerMessagesList = props$2 => {
302
329
  "data-testid": "chat-thread-container",
303
330
  tabIndex: 0,
304
331
  "aria-live": "polite",
332
+ "aria-relevant": "additions",
305
333
  ref: virtualListRef,
306
334
  role: "list",
307
335
  onKeyDown: handleListKey,
308
336
  children: /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentListScroll, {
309
337
  height: "".concat(totalSize, "px")
310
- }, void 0, render, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx__default["default"](styled.StyledLoadMoreContainer, {
338
+ }, void 0, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx__default["default"](styled.StyledLoadMoreContainer, {
311
339
  hasMoreItems: hasMoreItems
312
340
  }, void 0, /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
313
341
  labelText: "Load More",
@@ -315,7 +343,7 @@ const ChatContainerMessagesList = props$2 => {
315
343
  onClick: getMoreMessages,
316
344
  "data-testid": "ds-chat-load-more-btn",
317
345
  innerRef: loadMoreRef
318
- })) : null)
346
+ })) : null, render)
319
347
  }));
320
348
  };
321
349
 
package/cjs/parts/chat-sidebar/SideBarChat.js CHANGED
@@ -28,9 +28,9 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
28
28
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
29
29
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
30
30
 
31
- 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; }
31
+ 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; }
32
32
 
33
- 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__default["default"](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; }
33
+ 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__default["default"](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; }
34
34
 
35
35
  const FooterChat = _ref => {
36
36
  let {
package/cjs/parts/sidebar-button/SidebarButton.js CHANGED
@@ -24,9 +24,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
24
 
25
25
  const _excluded = ["label", "dsId", "onClick", "Icon"];
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__default["default"](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__default["default"](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
  const SidebarButton = _ref => {
31
31
  let {
32
32
  label,
package/esm/parts/chat-composer/ChatContainerComposer.js CHANGED
@@ -18,9 +18,9 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
18
18
 
19
19
  var _PaperAirplane, _Grid;
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 ChatComposer = props => {
26
26
  var _input$current;
@@ -136,7 +136,7 @@ const ChatComposer = props => {
136
136
  }, void 0, inputMaxLength && hasError ? /*#__PURE__*/jsxs(Fragment, {
137
137
  children: [/*#__PURE__*/_jsx(StyledCounterErrorA11y, {
138
138
  role: "alert"
139
- }, void 0, maxLengthMessage || "You have exceeded the character limit by ".concat(inputLength - inputMaxLength)), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
139
+ }, void 0, maxLengthMessage || "You have entered ".concat(inputLength, " characters and have exceeded the limit by ").concat(inputLength - inputMaxLength, ". Please limit to less than ").concat(inputMaxLength, " characters. ")), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
140
140
  }) : '', inputMaxLength ? " ".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}))));
141
141
  };
142
142
 
package/esm/parts/chat-composer/styled.js CHANGED
@@ -8,7 +8,7 @@ const StyledChatContainerContentComposer = /*#__PURE__*/styled(Grid).withConfig(
8
8
  })(["width:100%;min-height:56px;background:", ";padding:", ";padding-bottom:3px;padding-top:6px;padding-left:", ";max-height:", ";border-top:1px solid #cbcfd7;"], props => props.theme.colors.neutral['050'], props => props.theme.space.xxs, props => props.theme.space.xs, props => props.maxHeight);
9
9
  const StyledComposerInput = /*#__PURE__*/styled.textarea.withConfig({
10
10
  componentId: "sc-1ahwpce-1"
11
- })(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.3s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
11
+ })(["padding:", ";resize:none;min-height:32px;border-radius:2px;border:solid 1px #cbcfd7;color:#25292f;height:", ";min-width:244px;overflow-y:auto;font-size:13px;font-weight:400;line-height:1;transition:height 0.05s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
12
12
  const StyledComposerButton = /*#__PURE__*/styled(DSButton).withConfig({
13
13
  componentId: "sc-1ahwpce-2"
14
14
  })(["&:disabled{background:none;svg{fill:#5d6775;}}svg{fill:", ";}&:focus{background:", ";}"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[200]);
package/esm/parts/chat-container/ChatContainer.js CHANGED
@@ -17,11 +17,11 @@ 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
27
  var _containerRef$current;
@@ -39,7 +39,6 @@ const ChatContainer = props => {
39
39
  onKeyDown: onComposerKeyDown
40
40
  },
41
41
  actionRef,
42
- autoScroll,
43
42
  device,
44
43
  isLoading,
45
44
  hasMoreItems,
@@ -57,29 +56,39 @@ const ChatContainer = props => {
57
56
  const onResize = React.useCallback(height => {
58
57
  if (onComposerResize) onComposerResize(height);
59
58
 
60
- if (autoScroll) {
61
- listRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
62
- align: 'end'
63
- });
59
+ if (height > 30) {
60
+ /*
61
+ setTimeout is used to equal the animation duration from the
62
+ composer text area when increase its size
63
+ */
64
+ setTimeout(() => {
65
+ actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
66
+ align: 'start'
67
+ });
68
+ }, 50);
64
69
  }
65
- }, [onComposerResize, messagesListProps.messages, autoScroll]);
70
+ }, [onComposerResize, messagesListProps.messages, actionRef]);
66
71
  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;
67
72
  const handleTabs = React.useCallback(e => {
68
73
  if (onComposerKeyDown) onComposerKeyDown(e);else {
69
74
  const ref = actionRef || listRef;
70
75
 
71
76
  if (e.shiftKey && e.key === 'Tab') {
72
- e.preventDefault();
77
+ if (messagesListProps.messages.length > 0) {
78
+ e.preventDefault();
73
79
 
74
- if (['top', 'bottom'].includes(bannerPosition)) {
75
- bannerRef.current.focusOnWrapper();
76
- } else {
77
- const last = ref.current.getMessagesInView().pop();
78
- ref.current.focusToIndexWithoutScroll(last);
80
+ if (['top', 'bottom'].includes(bannerPosition)) {
81
+ bannerRef.current.focusOnWrapper();
82
+ } else {
83
+ var _ref$current;
84
+
85
+ const last = ref.current.getMessagesInView().pop();
86
+ (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focusToIndexWithoutScroll(last);
87
+ }
79
88
  }
80
89
  }
81
90
  }
82
- }, [actionRef, onComposerKeyDown, bannerPosition]); // Map actions
91
+ }, [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages.length]); // Map actions
83
92
 
84
93
  React.useEffect(() => {
85
94
  if (actionRef && actionRef.current) {
@@ -129,15 +138,15 @@ const ChatContainer = props => {
129
138
  isOpen: true,
130
139
  type: bannerProps.type || BANNER_TYPES.INFO,
131
140
  actionRef: bannerRef
132
- })), sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx(StyledIndicatorContainer, {
141
+ })), sendingMessages && sendingMessages.length > 0 ? /*#__PURE__*/_jsx(StyledIndicatorContainer, {
133
142
  isLoading: "bottom",
134
143
  linear: true,
135
144
  "data-testid": "ds-chat-loading-indicator"
136
145
  }, void 0, /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
137
146
  processing: true,
138
- title: "Loading",
147
+ title: sendingText,
139
148
  lineOnly: true
140
- }))) : null), /*#__PURE__*/jsx(ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
149
+ })) : null), /*#__PURE__*/jsx(ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
141
150
  onKeyDown: handleTabs,
142
151
  onResize: onResize,
143
152
  maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,
package/esm/parts/chat-container/styled.js CHANGED
@@ -10,9 +10,9 @@ 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:", ";", " ", ""], 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
- })(["", ",", "{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;}"], StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble, Wrapper, Title, Message, Time, StyledComposerInput);
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);
17
17
 
18
18
  export { CONTAINER_WIDTH, MobileStyledChatContainerContent, StyledChatContainerContent, StyledIndicatorContainer };
package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js CHANGED
@@ -2,8 +2,10 @@ import 'core-js/modules/esnext.async-iterator.filter.js';
2
2
  import 'core-js/modules/esnext.iterator.filter.js';
3
3
  import _jsx from '@babel/runtime/helpers/esm/jsx';
4
4
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
5
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.async-iterator.some.js';
6
6
  import 'core-js/modules/esnext.iterator.constructor.js';
7
+ import 'core-js/modules/esnext.iterator.some.js';
8
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
7
9
  import 'core-js/modules/esnext.iterator.for-each.js';
8
10
  import 'core-js/modules/esnext.async-iterator.map.js';
9
11
  import 'core-js/modules/esnext.iterator.map.js';
@@ -22,16 +24,21 @@ import { listProps, defaultProps } from './props.js';
22
24
  import { useValidateProps } from './config/useValidateProps.js';
23
25
  import { jsx } from 'react/jsx-runtime';
24
26
 
25
- 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; }
26
28
 
27
- 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; }
28
30
 
29
- const getPadding = hasMoreItems => {
31
+ const getPadding = _ref => {
32
+ let {
33
+ hasMoreItems,
34
+ bannerPosition,
35
+ isLoading
36
+ } = _ref;
30
37
  const padding = {
31
38
  paddingStart: 0,
32
39
  paddingEnd: -5
33
40
  };
34
- if (hasMoreItems === 'top') padding.paddingStart = 42;else if (hasMoreItems === 'bottom') padding.paddingEnd = 42;
41
+ if ([hasMoreItems, bannerPosition, isLoading].some(item => item === 'top')) padding.paddingStart = 42;else if ([hasMoreItems, bannerPosition, isLoading].some(item => item === 'bottom')) padding.paddingEnd = 42;
35
42
  return padding;
36
43
  };
37
44
 
@@ -61,7 +68,11 @@ const ChatContainerMessagesList = props => {
61
68
  size: messages.length,
62
69
  parentRef: virtualListRef,
63
70
  overscan: 15
64
- }, getPadding(hasMoreItems)), {}, {
71
+ }, getPadding({
72
+ hasMoreItems,
73
+ bannerPosition,
74
+ isLoading
75
+ })), {}, {
65
76
  estimateSize: React.useCallback(() => 80, [])
66
77
  }));
67
78
  const onScrollStop = React.useCallback(() => {
@@ -133,7 +144,17 @@ const ChatContainerMessagesList = props => {
133
144
  switch (key) {
134
145
  case 'ArrowUp':
135
146
  e.preventDefault();
136
- if (index > 0) virtualListRef.current.querySelector("[data-index=\"".concat(index - 1, "\"]")).focus();
147
+
148
+ if (index > 0) {
149
+ var _virtualListRef$curre3;
150
+
151
+ ((_virtualListRef$curre3 = virtualListRef.current) === null || _virtualListRef$curre3 === void 0 ? void 0 : _virtualListRef$curre3.querySelector("[data-index=\"".concat(index - 1, "\"]"))).focus();
152
+ } else if (hasMoreItems === 'top') {
153
+ var _loadMoreRef$current;
154
+
155
+ (_loadMoreRef$current = loadMoreRef.current) === null || _loadMoreRef$current === void 0 ? void 0 : _loadMoreRef$current.focus();
156
+ }
157
+
137
158
  break;
138
159
 
139
160
  case 'ArrowDown':
@@ -156,31 +177,31 @@ const ChatContainerMessagesList = props => {
156
177
  break;
157
178
 
158
179
  case 'Tab':
159
- e.preventDefault();
160
-
161
180
  if (hasMoreItems === 'bottom' && !e.shiftKey) {
162
- var _loadMoreRef$current;
163
-
164
- (_loadMoreRef$current = loadMoreRef.current) === null || _loadMoreRef$current === void 0 ? void 0 : _loadMoreRef$current.focus();
165
- } else if (hasMoreItems === 'top' && e.shiftKey) {
166
181
  var _loadMoreRef$current2;
167
182
 
183
+ e.preventDefault();
168
184
  (_loadMoreRef$current2 = loadMoreRef.current) === null || _loadMoreRef$current2 === void 0 ? void 0 : _loadMoreRef$current2.focus();
185
+ } else if (hasMoreItems === 'top' && e.shiftKey) {
186
+ var _loadMoreRef$current3;
187
+
188
+ e.preventDefault();
189
+ (_loadMoreRef$current3 = loadMoreRef.current) === null || _loadMoreRef$current3 === void 0 ? void 0 : _loadMoreRef$current3.focus();
169
190
  } else if (!e.shiftKey) {
170
191
  if (bannerPosition) {
192
+ e.preventDefault();
171
193
  bannerRef.current.focusOnWrapper();
172
- } else {
173
- actionRef.current.focusToComposer();
174
194
  }
175
195
  } else {
176
- var _virtualListRef$curre3;
196
+ var _virtualListRef$curre4;
177
197
 
178
- (_virtualListRef$curre3 = virtualListRef.current) === null || _virtualListRef$curre3 === void 0 ? void 0 : _virtualListRef$curre3.focus();
198
+ e.preventDefault();
199
+ (_virtualListRef$curre4 = virtualListRef.current) === null || _virtualListRef$curre4 === void 0 ? void 0 : _virtualListRef$curre4.focus();
179
200
  }
180
201
 
181
202
  break;
182
203
  }
183
- }, [actionRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
204
+ }, [actionRef, bannerRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
184
205
  const handleListKey = React.useCallback(e => {
185
206
  const {
186
207
  key
@@ -189,7 +210,13 @@ const ChatContainerMessagesList = props => {
189
210
  switch (key) {
190
211
  case 'ArrowUp':
191
212
  e.preventDefault();
192
- onlyFocus(onScrollStop().shift());
213
+
214
+ if (document.activeElement === loadMoreRef.current) {
215
+ scrollAndFocus(messages.length - 1);
216
+ } else {
217
+ onlyFocus(onScrollStop().shift());
218
+ }
219
+
193
220
  break;
194
221
 
195
222
  case 'ArrowDown':
@@ -210,15 +237,15 @@ const ChatContainerMessagesList = props => {
210
237
  case 'Tab':
211
238
  if (document.activeElement !== loadMoreRef.current) {
212
239
  if (hasMoreItems === 'bottom' && !e.shiftKey) {
213
- var _loadMoreRef$current3;
240
+ var _loadMoreRef$current4;
214
241
 
215
242
  e.preventDefault();
216
- (_loadMoreRef$current3 = loadMoreRef.current) === null || _loadMoreRef$current3 === void 0 ? void 0 : _loadMoreRef$current3.focus();
243
+ (_loadMoreRef$current4 = loadMoreRef.current) === null || _loadMoreRef$current4 === void 0 ? void 0 : _loadMoreRef$current4.focus();
217
244
  } else if (hasMoreItems === 'top' && e.shiftKey) {
218
- var _loadMoreRef$current4;
245
+ var _loadMoreRef$current5;
219
246
 
220
247
  e.preventDefault();
221
- (_loadMoreRef$current4 = loadMoreRef.current) === null || _loadMoreRef$current4 === void 0 ? void 0 : _loadMoreRef$current4.focus();
248
+ (_loadMoreRef$current5 = loadMoreRef.current) === null || _loadMoreRef$current5 === void 0 ? void 0 : _loadMoreRef$current5.focus();
222
249
  } else if (!e.shiftKey) {
223
250
  e.preventDefault();
224
251
  actionRef.current.focusToComposer();
@@ -227,10 +254,10 @@ const ChatContainerMessagesList = props => {
227
254
  e.preventDefault();
228
255
  actionRef.current.focusToComposer();
229
256
  } else {
230
- var _virtualListRef$curre4;
257
+ var _virtualListRef$curre5;
231
258
 
232
259
  e.preventDefault();
233
- (_virtualListRef$curre4 = virtualListRef.current) === null || _virtualListRef$curre4 === void 0 ? void 0 : _virtualListRef$curre4.focus();
260
+ (_virtualListRef$curre5 = virtualListRef.current) === null || _virtualListRef$curre5 === void 0 ? void 0 : _virtualListRef$curre5.focus();
234
261
  }
235
262
 
236
263
  break;
@@ -274,14 +301,14 @@ const ChatContainerMessagesList = props => {
274
301
  "data-index": index,
275
302
  style: style,
276
303
  ref: measureRef,
277
- tabIndex: 0,
304
+ tabIndex: -1,
278
305
  onKeyDown: handleKey,
279
306
  role: "listitem",
280
307
  children: /*#__PURE__*/_jsx(StyledWrapperListItem, {
281
308
  type: row.type
282
309
  }, void 0, row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ?
283
310
  /*#__PURE__*/
284
- // eslint-disable-next-line
311
+ // eslint-disable-next-line eslint-comments/no-unlimited-disable
285
312
  jsx(ChatBubble, _objectSpread(_objectSpread({}, row), {}, {
286
313
  helpMessage: isSending ? sendingText : row.helpMessage
287
314
  })) : null, row.type === BUBBLE_TYPES.DELIMITER ? /*#__PURE__*/jsx(MessageDelimiter, _objectSpread({}, row)) : null, row.type === BUBBLE_TYPES.SYSTEM ? /*#__PURE__*/jsx(SystemMessage, _objectSpread({}, row)) : null)
@@ -291,12 +318,13 @@ const ChatContainerMessagesList = props => {
291
318
  "data-testid": "chat-thread-container",
292
319
  tabIndex: 0,
293
320
  "aria-live": "polite",
321
+ "aria-relevant": "additions",
294
322
  ref: virtualListRef,
295
323
  role: "list",
296
324
  onKeyDown: handleListKey,
297
325
  children: /*#__PURE__*/_jsx(StyledChatContainerContentListScroll, {
298
326
  height: "".concat(totalSize, "px")
299
- }, void 0, render, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx(StyledLoadMoreContainer, {
327
+ }, void 0, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx(StyledLoadMoreContainer, {
300
328
  hasMoreItems: hasMoreItems
301
329
  }, void 0, /*#__PURE__*/_jsx(DSButton, {
302
330
  labelText: "Load More",
@@ -304,7 +332,7 @@ const ChatContainerMessagesList = props => {
304
332
  onClick: getMoreMessages,
305
333
  "data-testid": "ds-chat-load-more-btn",
306
334
  innerRef: loadMoreRef
307
- })) : null)
335
+ })) : null, render)
308
336
  }));
309
337
  };
310
338
 
package/esm/parts/chat-sidebar/SideBarChat.js CHANGED
@@ -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 {
package/esm/parts/sidebar-button/SidebarButton.js CHANGED
@@ -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.0-rc.9",
3
+ "version": "2.1.0-rc.0",
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.0.0-rc.9",
309
- "@elliemae/ds-button": "2.0.0-rc.9",
310
- "@elliemae/ds-grid": "2.0.0-rc.9",
311
- "@elliemae/ds-icons": "2.0.0-rc.9",
312
- "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.9",
313
- "@elliemae/ds-props-helpers": "2.0.0-rc.9",
314
- "@elliemae/ds-system": "2.0.0-rc.9",
315
- "@elliemae/ds-tooltip": "2.0.0-rc.9",
316
- "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.9",
308
+ "@elliemae/ds-banner": "2.1.0-rc.0",
309
+ "@elliemae/ds-button": "2.1.0-rc.0",
310
+ "@elliemae/ds-grid": "2.1.0-rc.0",
311
+ "@elliemae/ds-icons": "2.1.0-rc.0",
312
+ "@elliemae/ds-indeterminate-progress-indicator": "2.1.0-rc.0",
313
+ "@elliemae/ds-props-helpers": "2.1.0-rc.0",
314
+ "@elliemae/ds-system": "2.1.0-rc.0",
315
+ "@elliemae/ds-tooltip": "2.1.0-rc.0",
316
+ "@elliemae/ds-truncated-tooltip-text": "2.1.0-rc.0",
317
317
  "prop-types": "~15.7.2",
318
318
  "react-desc": "~4.1.2",
319
319
  "react-virtual": "~2.3.2"
@@ -322,6 +322,7 @@
322
322
  "@testing-library/dom": "~8.11.1",
323
323
  "@testing-library/jest-dom": "~5.15.0",
324
324
  "@testing-library/react": "~12.1.2",
325
+ "@testing-library/user-event": "~13.5.0",
325
326
  "styled-components": "~5.3.3"
326
327
  },
327
328
  "peerDependencies": {
package/types/parts/chat-card/ChatCard.d.ts CHANGED
@@ -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
  };
package/types/parts/chat-card/props.d.ts CHANGED
@@ -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 {
package/types/parts/chat-composer/styled.d.ts CHANGED
@@ -1,157 +1,5 @@
1
- /// <reference path="../../../../../../shared/typings/react-desc.d.ts" />
2
- /// <reference types="react" />
3
- export declare const StyledChatContainerContentComposer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
1
+ export declare const StyledChatContainerContentComposer: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object, string | number | symbol>;
4
2
  export declare const StyledComposerInput: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, any, never>;
5
- export declare const StyledComposerButton: import("styled-components").StyledComponent<{
6
- ({ innerRef, disabled, buttonType, fluidWidth, size, labelText, icon, onBlur, onClick, onKeyPress, leftIcon, tabIndex, variant, intent, containerProps, className, as: Component, type, ...rest }: {
7
- [x: string]: any;
8
- innerRef: any;
9
- disabled: any;
10
- buttonType: any;
11
- fluidWidth: any;
12
- size: any;
13
- labelText: any;
14
- icon: any;
15
- onBlur: any;
16
- onClick: any;
17
- onKeyPress: any;
18
- leftIcon: any;
19
- tabIndex: any;
20
- variant: any;
21
- intent: any;
22
- containerProps: any;
23
- className: any;
24
- as: any;
25
- type: any;
26
- }): JSX.Element;
27
- defaultProps: {
28
- disabled: boolean;
29
- fluidWidth: boolean;
30
- labelText: string;
31
- icon: null;
32
- onBlur: () => null;
33
- onClick: () => null;
34
- onKeyPress: () => null;
35
- leftIcon: null;
36
- tabIndex: number;
37
- variant: string;
38
- containerProps: {};
39
- as: string;
40
- type: string;
41
- };
42
- propTypes: {
43
- tabIndex: {
44
- defaultValue<T = unknown>(arg: T): {
45
- deprecated: import("react-desc").PropTypesDescValidator;
46
- };
47
- isRequired: import("react-desc").PropTypesDescValidator;
48
- };
49
- className: {
50
- defaultValue<T_1 = unknown>(arg: T_1): {
51
- deprecated: import("react-desc").PropTypesDescValidator;
52
- };
53
- isRequired: import("react-desc").PropTypesDescValidator;
54
- };
55
- 'aria-disabled': {
56
- defaultValue<T_2 = unknown>(arg: T_2): {
57
- deprecated: import("react-desc").PropTypesDescValidator;
58
- };
59
- isRequired: import("react-desc").PropTypesDescValidator;
60
- };
61
- as: {
62
- deprecated: import("react-desc").PropTypesDescValidator;
63
- };
64
- disabled: {
65
- defaultValue<T_3 = unknown>(arg: T_3): {
66
- deprecated: import("react-desc").PropTypesDescValidator;
67
- };
68
- isRequired: import("react-desc").PropTypesDescValidator;
69
- };
70
- fluidWidth: {
71
- defaultValue<T_4 = unknown>(arg: T_4): {
72
- deprecated: import("react-desc").PropTypesDescValidator;
73
- };
74
- isRequired: import("react-desc").PropTypesDescValidator;
75
- };
76
- labelText: {
77
- defaultValue<T_5 = unknown>(arg: T_5): {
78
- deprecated: import("react-desc").PropTypesDescValidator;
79
- };
80
- isRequired: import("react-desc").PropTypesDescValidator;
81
- };
82
- icon: {
83
- defaultValue<T_6 = unknown>(arg: T_6): {
84
- deprecated: import("react-desc").PropTypesDescValidator;
85
- };
86
- isRequired: import("react-desc").PropTypesDescValidator;
87
- };
88
- leftIcon: {
89
- defaultValue<T_7 = unknown>(arg: T_7): {
90
- deprecated: import("react-desc").PropTypesDescValidator;
91
- };
92
- isRequired: import("react-desc").PropTypesDescValidator;
93
- };
94
- buttonType: {
95
- defaultValue<T_8 = unknown>(arg: T_8): {
96
- deprecated: import("react-desc").PropTypesDescValidator;
97
- };
98
- isRequired: import("react-desc").PropTypesDescValidator;
99
- };
100
- size: {
101
- defaultValue<T_9 = unknown>(arg: T_9): {
102
- deprecated: import("react-desc").PropTypesDescValidator;
103
- };
104
- isRequired: import("react-desc").PropTypesDescValidator;
105
- };
106
- type: {
107
- defaultValue<T_10 = unknown>(arg: T_10): {
108
- deprecated: import("react-desc").PropTypesDescValidator;
109
- };
110
- isRequired: import("react-desc").PropTypesDescValidator;
111
- };
112
- variant: {
113
- defaultValue<T_11 = unknown>(arg: T_11): {
114
- deprecated: import("react-desc").PropTypesDescValidator;
115
- };
116
- isRequired: import("react-desc").PropTypesDescValidator;
117
- };
118
- innerRef: {
119
- defaultValue<T_12 = unknown>(arg: T_12): {
120
- deprecated: import("react-desc").PropTypesDescValidator;
121
- };
122
- isRequired: import("react-desc").PropTypesDescValidator;
123
- };
124
- onBlur: {
125
- defaultValue<T_13 = unknown>(arg: T_13): {
126
- deprecated: import("react-desc").PropTypesDescValidator;
127
- };
128
- isRequired: import("react-desc").PropTypesDescValidator;
129
- };
130
- intent: {
131
- defaultValue<T_14 = unknown>(arg: T_14): {
132
- deprecated: import("react-desc").PropTypesDescValidator;
133
- };
134
- isRequired: import("react-desc").PropTypesDescValidator;
135
- };
136
- containerProps: {
137
- defaultValue<T_15 = unknown>(arg: T_15): {
138
- deprecated: import("react-desc").PropTypesDescValidator;
139
- };
140
- isRequired: import("react-desc").PropTypesDescValidator;
141
- };
142
- onClick: {
143
- defaultValue<T_16 = unknown>(arg: T_16): {
144
- deprecated: import("react-desc").PropTypesDescValidator;
145
- };
146
- isRequired: import("react-desc").PropTypesDescValidator;
147
- };
148
- onKeyPress: {
149
- defaultValue<T_17 = unknown>(arg: T_17): {
150
- deprecated: import("react-desc").PropTypesDescValidator;
151
- };
152
- isRequired: import("react-desc").PropTypesDescValidator;
153
- };
154
- };
155
- }, import("styled-components").DefaultTheme, {}, never>;
156
- export declare const StyledCounterArea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const StyledComposerButton: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object, string | number | symbol>;
4
+ export declare const StyledCounterArea: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object, string | number | symbol>;
157
5
  export declare const StyledCounterErrorA11y: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
package/types/parts/chat-container/ChatContainer.d.ts CHANGED
@@ -17,25 +17,25 @@ declare const ChatContainer: {
17
17
  deprecated: import("react-desc").PropTypesDescValidator;
18
18
  };
19
19
  isLoading: {
20
- defaultValue<T = unknown>(arg: T): {
20
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
21
21
  deprecated: import("react-desc").PropTypesDescValidator;
22
22
  };
23
- isRequired: import("react-desc").PropTypesDescValidator;
23
+ isRequired: import("react-desc").PropTypesDescValue;
24
24
  };
25
25
  hasMoreItems: {
26
- defaultValue<T = unknown>(arg: T): {
26
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
27
27
  deprecated: import("react-desc").PropTypesDescValidator;
28
28
  };
29
- isRequired: import("react-desc").PropTypesDescValidator;
29
+ isRequired: import("react-desc").PropTypesDescValue;
30
30
  };
31
31
  getMoreMessages: {
32
32
  deprecated: import("react-desc").PropTypesDescValidator;
33
33
  };
34
34
  bannerPosition: {
35
- defaultValue<T = unknown>(arg: T): {
35
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
36
36
  deprecated: import("react-desc").PropTypesDescValidator;
37
37
  };
38
- isRequired: import("react-desc").PropTypesDescValidator;
38
+ isRequired: import("react-desc").PropTypesDescValue;
39
39
  };
40
40
  bannerProps: {
41
41
  deprecated: import("react-desc").PropTypesDescValidator;
package/types/parts/chat-container-messages-list/ChatContainerMessagesList.d.ts CHANGED
@@ -11,22 +11,22 @@ declare const ChatContainerMessagesList: {
11
11
  deprecated: import("react-desc").PropTypesDescValidator;
12
12
  };
13
13
  onScrollEnds: {
14
- defaultValue<T = unknown>(arg: T): {
14
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
15
15
  deprecated: import("react-desc").PropTypesDescValidator;
16
16
  };
17
- isRequired: import("react-desc").PropTypesDescValidator;
17
+ isRequired: import("react-desc").PropTypesDescValue;
18
18
  };
19
19
  isLoading: {
20
- defaultValue<T = unknown>(arg: T): {
20
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
21
21
  deprecated: import("react-desc").PropTypesDescValidator;
22
22
  };
23
- isRequired: import("react-desc").PropTypesDescValidator;
23
+ isRequired: import("react-desc").PropTypesDescValue;
24
24
  };
25
25
  hasMoreItems: {
26
- defaultValue<T = unknown>(arg: T): {
26
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
27
27
  deprecated: import("react-desc").PropTypesDescValidator;
28
28
  };
29
- isRequired: import("react-desc").PropTypesDescValidator;
29
+ isRequired: import("react-desc").PropTypesDescValue;
30
30
  };
31
31
  getMoreMessages: {
32
32
  deprecated: import("react-desc").PropTypesDescValidator;
package/types/parts/message-delimiter/MessageDelimiter.d.ts CHANGED
@@ -10,16 +10,16 @@ declare const MessageDelimiter: {
10
10
  deprecated: import("react-desc").PropTypesDescValidator;
11
11
  };
12
12
  extraProps: {
13
- defaultValue<T = unknown>(arg: T): {
13
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
14
14
  deprecated: import("react-desc").PropTypesDescValidator;
15
15
  };
16
- isRequired: import("react-desc").PropTypesDescValidator;
16
+ isRequired: import("react-desc").PropTypesDescValue;
17
17
  };
18
18
  verticalMargin: {
19
- defaultValue<T = unknown>(arg: T): {
19
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
20
20
  deprecated: import("react-desc").PropTypesDescValidator;
21
21
  };
22
- isRequired: import("react-desc").PropTypesDescValidator;
22
+ isRequired: import("react-desc").PropTypesDescValue;
23
23
  };
24
24
  };
25
25
  };
package/types/parts/message-delimiter/props.d.ts CHANGED
@@ -12,15 +12,15 @@ export declare const messageDelimiterProps: {
12
12
  deprecated: import("react-desc").PropTypesDescValidator;
13
13
  };
14
14
  extraProps: {
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
  verticalMargin: {
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
  };
package/types/parts/system-message/SystemMessage.d.ts CHANGED
@@ -7,10 +7,10 @@ declare const SystemMessage: {
7
7
  propTypes: {
8
8
  title: any;
9
9
  time: {
10
- defaultValue<T = unknown>(arg: T): {
10
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
11
11
  deprecated: import("react-desc").PropTypesDescValidator;
12
12
  };
13
- isRequired: import("react-desc").PropTypesDescValidator;
13
+ isRequired: import("react-desc").PropTypesDescValue;
14
14
  };
15
15
  body: any;
16
16
  };
package/types/parts/system-message/props.d.ts CHANGED
@@ -8,10 +8,10 @@ export declare const defaultProps: SystemMessageProps;
8
8
  export declare const systemMessageProps: {
9
9
  title: any;
10
10
  time: {
11
- defaultValue<T = unknown>(arg: T): {
11
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
12
12
  deprecated: import("react-desc").PropTypesDescValidator;
13
13
  };
14
- isRequired: import("react-desc").PropTypesDescValidator;
14
+ isRequired: import("react-desc").PropTypesDescValue;
15
15
  };
16
16
  body: any;
17
17
  };
package/types/parts/tile-button/TileButton.d.ts CHANGED
@@ -59,10 +59,10 @@ declare const TileButton: {
59
59
  deprecated: import("react-desc").PropTypesDescValidator;
60
60
  };
61
61
  innerRef: {
62
- defaultValue<T = unknown>(arg: T): {
62
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
63
63
  deprecated: import("react-desc").PropTypesDescValidator;
64
64
  };
65
- isRequired: import("react-desc").PropTypesDescValidator;
65
+ isRequired: import("react-desc").PropTypesDescValue;
66
66
  };
67
67
  };
68
68
  defaultProps: TileButtonProps;
package/types/parts/tile-button/props.d.ts CHANGED
@@ -80,9 +80,9 @@ export declare const propsTileButton: {
80
80
  deprecated: import("react-desc").PropTypesDescValidator;
81
81
  };
82
82
  innerRef: {
83
- defaultValue<T = unknown>(arg: T): {
83
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
84
84
  deprecated: import("react-desc").PropTypesDescValidator;
85
85
  };
86
- isRequired: import("react-desc").PropTypesDescValidator;
86
+ isRequired: import("react-desc").PropTypesDescValue;
87
87
  };
88
88
  };