@elliemae/ds-chat 2.0.0-rc.9 → 2.0.2

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 (15) hide show
  1. package/cjs/parts/chat-composer/ChatContainerComposer.js +2 -2
  2. package/cjs/parts/chat-composer/styled.js +1 -1
  3. package/cjs/parts/chat-container/ChatContainer.js +13 -8
  4. package/cjs/parts/chat-container/styled.js +2 -2
  5. package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +18 -6
  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 +2 -2
  9. package/esm/parts/chat-composer/styled.js +1 -1
  10. package/esm/parts/chat-container/ChatContainer.js +13 -8
  11. package/esm/parts/chat-container/styled.js +2 -2
  12. package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +18 -6
  13. package/esm/parts/chat-sidebar/SideBarChat.js +2 -2
  14. package/esm/parts/sidebar-button/SidebarButton.js +2 -2
  15. package/package.json +12 -11
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;
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
@@ -31,9 +31,9 @@ var DSBanner__default = /*#__PURE__*/_interopDefaultLegacy(DSBanner);
31
31
 
32
32
  var _DSIndeterminateProgr, _StyledIndicatorConta;
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,12 +68,18 @@ 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 {
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(() => {
@@ -302,6 +313,7 @@ const ChatContainerMessagesList = props$2 => {
302
313
  "data-testid": "chat-thread-container",
303
314
  tabIndex: 0,
304
315
  "aria-live": "polite",
316
+ "aria-relevant": "additions",
305
317
  ref: virtualListRef,
306
318
  role: "list",
307
319
  onKeyDown: handleListKey,
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;
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
@@ -19,9 +19,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
19
19
 
20
20
  var _DSIndeterminateProgr, _StyledIndicatorConta;
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,12 +56,18 @@ 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 {
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(() => {
@@ -291,6 +302,7 @@ const ChatContainerMessagesList = props => {
291
302
  "data-testid": "chat-thread-container",
292
303
  tabIndex: 0,
293
304
  "aria-live": "polite",
305
+ "aria-relevant": "additions",
294
306
  ref: virtualListRef,
295
307
  role: "list",
296
308
  onKeyDown: handleListKey,
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.0.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Chat",
6
6
  "module": "./esm/index.js",
@@ -305,23 +305,24 @@
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.0.2",
309
+ "@elliemae/ds-button": "2.0.2",
310
+ "@elliemae/ds-grid": "2.0.2",
311
+ "@elliemae/ds-icons": "2.0.2",
312
+ "@elliemae/ds-indeterminate-progress-indicator": "2.0.2",
313
+ "@elliemae/ds-props-helpers": "2.0.2",
314
+ "@elliemae/ds-system": "2.0.2",
315
+ "@elliemae/ds-tooltip": "2.0.2",
316
+ "@elliemae/ds-truncated-tooltip-text": "2.0.2",
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.0",
323
+ "@testing-library/jest-dom": "~5.15.1",
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": {