@elliemae/ds-chat 2.0.0-next.6 → 2.0.0-rc.1

package/cjs/parts/bubble/ChatBubble.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/web.url.to-json.js');
-require('react');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
 var reactDesc = require('react-desc');
-var Warning = require('@elliemae/ds-icons/WarningCircleFill');
+var dsIcons = require('@elliemae/ds-icons');
 var styled = require('./styled.js');
 var props = require('./props.js');
 var useValidateProps = require('./config/useValidateProps.js');
@@ -15,9 +17,9 @@ var ChatBubbleArrow = require('./ChatBubbleArrow.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var Warning__default = /*#__PURE__*/_interopDefaultLegacy(Warning);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _Warning;
+var _br, _WarningCircleFill;
 
 const ChatBubble = props => {
   useValidateProps.useValidateProps(props, ChatBubbleWithSchema.toJSON());
@@ -30,6 +32,7 @@ const ChatBubble = props => {
     errorMessage,
     helpMessage
   } = props;
+  const bodyParts = React__default["default"].useMemo(() => typeof body === 'string' ? body.split('\n') : [body], [body]);
   return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {
     "data-testid": "ds-chat-bubble-".concat(dsId),
     type: type
@@ -49,14 +52,14 @@ const ChatBubble = props => {
     "data-testid": "chat-bubble-time-".concat(dsId)
   }, void 0, time)), /*#__PURE__*/_jsx__default["default"](styled.StyleBodyWrapper, {
     "data-testid": "chat-bubble-body-".concat(dsId)
-  }, void 0, body), /*#__PURE__*/_jsx__default["default"](ChatBubbleArrow.ChatBubbleArrow, {
+  }, void 0, bodyParts.map((item, index) => /*#__PURE__*/_jsx__default["default"](React__default["default"].Fragment, {}, "".concat(item, "-").concat(index), item, index < bodyParts.length - 1 ? _br || (_br = /*#__PURE__*/_jsx__default["default"]("br", {})) : null))), /*#__PURE__*/_jsx__default["default"](ChatBubbleArrow.ChatBubbleArrow, {
     type: type
   })), errorMessage ? /*#__PURE__*/_jsx__default["default"](styled.StyleErrorMessage, {
     "data-testid": "chat-bubble-error-message-".concat(dsId),
     p: "xxs",
     gutter: "xxs",
     cols: [1, 'auto']
-  }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, errorMessage), _Warning || (_Warning = /*#__PURE__*/_jsx__default["default"](Warning__default["default"], {}))) : null, helpMessage ? /*#__PURE__*/_jsx__default["default"](styled.StyleHelpMessage, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, errorMessage), _WarningCircleFill || (_WarningCircleFill = /*#__PURE__*/_jsx__default["default"](dsIcons.WarningCircleFill, {}))) : null, helpMessage ? /*#__PURE__*/_jsx__default["default"](styled.StyleHelpMessage, {
     "data-testid": "chat-bubble-help-message-".concat(dsId),
     p: "xxs",
     gutter: "xxs",

package/cjs/parts/bubble/ChatBubbleArrow.js

@@ -12,66 +12,69 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 var _svg, _svg2;
-const ChatBubbleArrow = ({
-  type
-}) => /*#__PURE__*/_jsx__default["default"](styled.StyledBubbleArrow, {}, void 0, type === props.BUBBLE_TYPES.RECIPIENT ? _svg || (_svg = /*#__PURE__*/_jsx__default["default"]("svg", {
-  width: "15px",
-  height: "14px",
-  viewBox: "0 0 15 14"
-}, void 0, /*#__PURE__*/_jsx__default["default"]("defs", {}, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
-  d: "M12,8.5 C12,7.9373169 11.6782751,7.4856453 11.2282104,7.196228 C11.2286673,7.1967363 3,2 3,2 L3,10 L10.5627441,10 L10.5658569,9.9933472 C11.3630371,9.9580688 12,9.3058472 12,8.5 Z",
-  id: "path-1"
-}), /*#__PURE__*/_jsx__default["default"]("filter", {
-  x: "-55.6%",
-  y: "-50.0%",
-  width: "211.1%",
-  height: "225.0%",
-  filterUnits: "objectBoundingBox",
-  id: "filter-2"
-}, void 0, /*#__PURE__*/_jsx__default["default"]("feOffset", {
-  dx: "2.3",
-  dy: "1.2",
-  in: "SourceAlpha",
-  result: "shadowOffsetOuter1"
-}), /*#__PURE__*/_jsx__default["default"]("feGaussianBlur", {
-  stdDeviation: "1.5",
-  in: "shadowOffsetOuter1",
-  result: "shadowBlurOuter1"
-}), /*#__PURE__*/_jsx__default["default"]("feColorMatrix", {
-  values: "0 0 0 0 0.207843137    0 0 0 0 0.235294118    0 0 0 0 0.274509804   0 0 0 0.8 0",
-  type: "matrix",
-  in: "shadowBlurOuter1"
-}))), /*#__PURE__*/_jsx__default["default"]("g", {
-  id: "[DSK]-Visual-Design",
-  stroke: "none",
-  strokeWidth: "1",
-  fill: "none",
-  fillRule: "evenodd"
-}, void 0, /*#__PURE__*/_jsx__default["default"]("g", {
-  id: "Path-Copy",
-  transform: "translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) "
-}, void 0, /*#__PURE__*/_jsx__default["default"]("use", {
-  fill: "black",
-  fillOpacity: "1",
-  filter: "url(#filter-2)",
-  xlinkHref: "#path-1"
-}), /*#__PURE__*/_jsx__default["default"]("use", {
-  fill: "#FFFFFF",
-  fillRule: "evenodd",
-  xlinkHref: "#path-1"
-}))))) : _svg2 || (_svg2 = /*#__PURE__*/_jsx__default["default"]("svg", {
-  width: "9px",
-  height: "8px",
-  viewBox: "0 0 9 8"
-}, void 0, /*#__PURE__*/_jsx__default["default"]("g", {
-  stroke: "none",
-  strokeWidth: "1",
-  fill: "none",
-  fillRule: "evenodd"
-}, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
-  d: "M9,6.5 C9,5.9373169 8.6782751,5.4856453 8.2282104,5.196228 C8.2286673,5.1967363 0,0 0,0 L0,8 L7.5627441,8 L7.5658569,7.9933472 C8.3630371,7.9580688 9,7.3058472 9,6.5 Z",
-  id: "Path",
-  fill: "#1E79C2"
-})))));
+const ChatBubbleArrow = _ref => {
+  let {
+    type
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledBubbleArrow, {}, void 0, type === props.BUBBLE_TYPES.RECIPIENT ? _svg || (_svg = /*#__PURE__*/_jsx__default["default"]("svg", {
+    width: "15px",
+    height: "14px",
+    viewBox: "0 0 15 14"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("defs", {}, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    d: "M12,8.5 C12,7.9373169 11.6782751,7.4856453 11.2282104,7.196228 C11.2286673,7.1967363 3,2 3,2 L3,10 L10.5627441,10 L10.5658569,9.9933472 C11.3630371,9.9580688 12,9.3058472 12,8.5 Z",
+    id: "path-1"
+  }), /*#__PURE__*/_jsx__default["default"]("filter", {
+    x: "-55.6%",
+    y: "-50.0%",
+    width: "211.1%",
+    height: "225.0%",
+    filterUnits: "objectBoundingBox",
+    id: "filter-2"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("feOffset", {
+    dx: "2.3",
+    dy: "1.2",
+    in: "SourceAlpha",
+    result: "shadowOffsetOuter1"
+  }), /*#__PURE__*/_jsx__default["default"]("feGaussianBlur", {
+    stdDeviation: "1.5",
+    in: "shadowOffsetOuter1",
+    result: "shadowBlurOuter1"
+  }), /*#__PURE__*/_jsx__default["default"]("feColorMatrix", {
+    values: "0 0 0 0 0.207843137    0 0 0 0 0.235294118    0 0 0 0 0.274509804   0 0 0 0.8 0",
+    type: "matrix",
+    in: "shadowBlurOuter1"
+  }))), /*#__PURE__*/_jsx__default["default"]("g", {
+    id: "[DSK]-Visual-Design",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("g", {
+    id: "Path-Copy",
+    transform: "translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) "
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("use", {
+    fill: "black",
+    fillOpacity: "1",
+    filter: "url(#filter-2)",
+    xlinkHref: "#path-1"
+  }), /*#__PURE__*/_jsx__default["default"]("use", {
+    fill: "#FFFFFF",
+    fillRule: "evenodd",
+    xlinkHref: "#path-1"
+  }))))) : _svg2 || (_svg2 = /*#__PURE__*/_jsx__default["default"]("svg", {
+    width: "9px",
+    height: "8px",
+    viewBox: "0 0 9 8"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
+    d: "M9,6.5 C9,5.9373169 8.6782751,5.4856453 8.2282104,5.196228 C8.2286673,5.1967363 0,0 0,0 L0,8 L7.5627441,8 L7.5658569,7.9933472 C8.3630371,7.9580688 9,7.3058472 9,6.5 Z",
+    id: "Path",
+    fill: "#1E79C2"
+  })))));
+};
 
 exports.ChatBubbleArrow = ChatBubbleArrow;

package/cjs/parts/bubble/props.js

@@ -36,7 +36,7 @@ const propsBubbles = {
   type: reactDesc.PropTypes.oneOf([BUBBLE_TYPES.RECIPIENT, BUBBLE_TYPES.SENDER]).isRequired.description('Define bubble type ').defaultValue(defaultBubbleProps.type),
   title: reactDesc.PropTypes.string.isRequired.description('Title of the bubble').defaultValue(defaultBubbleProps.title),
   time: reactDesc.PropTypes.string.isRequired.description('Time of the bubble').defaultValue(defaultBubbleProps.title),
-  body: reactDesc.PropTypes.oneOf(['string', 'element']).isRequired.description('Bubble content').defaultValue(defaultBubbleProps.body),
+  body: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.element]).isRequired.description('Bubble content').defaultValue(defaultBubbleProps.body),
   onClick: reactDesc.PropTypes.string.description('Callback when the bubble is tapped').defaultValue(defaultBubbleProps.onClick),
   errorMessage: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.element]).description('Error message to display at bottom of the bubble').defaultValue(defaultBubbleProps.onClick),
   helpMessage: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.element]).description('Help message to display at bottom of the bubble').defaultValue(defaultBubbleProps.onClick)

package/cjs/parts/bubble/styled.js

@@ -30,7 +30,7 @@ const StyleBodyWrapper = /*#__PURE__*/styled__default["default"].div.withConfig(
 })(["font-size:13px;font-weight:400;line-height:15px;min-height:18px;padding:0px 10px 8px 10px;"]);
 const StyleErrorMessage = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-fe8e9o-5"
-})(["font-size:12px;font-weight:400;padding-top:", ";padding-bottom:", ";color:", ";align-items:flex-end;justify-content:center;text-align:right;line-height:15px;svg{fill:", ";}a{font-size:12px;color:", ";}.em-ds-icon{margin-left:8px;}"], props => props.theme.space.xxxs, props => props.theme.space.xxxs, props => props.theme.colors.danger[900], props => props.theme.colors.danger[900], props => props.theme.colors.danger[900]);
+})(["font-size:12px;font-weight:400;padding-top:", ";color:", ";align-items:flex-end;justify-content:center;text-align:right;line-height:15px;svg{fill:", ";}a{font-size:12px;color:", ";}.em-ds-icon{margin-left:8px;}"], props => props.theme.space.xxxs, props => props.theme.colors.danger[900], props => props.theme.colors.danger[900], props => props.theme.colors.danger[900]);
 const StyleHelpMessage = /*#__PURE__*/styled__default["default"](StyleErrorMessage).withConfig({
   componentId: "sc-fe8e9o-6"
 })(["font-size:12px;line-height:15px;color:", ";svg{fill:", ";}a{font-size:12px;color:", ";}"], props => props.theme.colors.neutral[500], props => props.theme.colors.danger[500], props => props.theme.colors.danger[500]); // bubble sender/ recipient

package/cjs/parts/chat-composer/ChatContainerComposer.js

@@ -6,10 +6,15 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/web.url.to-json.js');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var dsGrid = require('@elliemae/ds-grid');
 var reactDesc = require('react-desc');
-var PaperAirplane = require('@elliemae/ds-icons/PaperAirplane');
+var dsIcons = require('@elliemae/ds-icons');
 var styled = require('./styled.js');
 var useValidateProps = require('./config/useValidateProps.js');
 var props = require('./props.js');
@@ -20,7 +25,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PaperAirplane__default = /*#__PURE__*/_interopDefaultLegacy(PaperAirplane);
 
 var _PaperAirplane, _Grid;
 
@@ -39,9 +43,11 @@ const ChatComposer = props => {
     onSend,
     onFocus,
     onBlur,
+    onKeyDown,
     maxHeight = 300,
     placeholder,
     inputMaxLength,
+    maxLengthMessage,
     buttonDisabled,
     dataTestid,
     actionRef
@@ -59,7 +65,7 @@ const ChatComposer = props => {
     onResize(newHeight);
     setHeight(newHeight);
     setShowScroll(((_inputSize$current3 = inputSize.current) === null || _inputSize$current3 === void 0 ? void 0 : _inputSize$current3.scrollHeight) - ((_inputSize$current4 = inputSize.current) === null || _inputSize$current4 === void 0 ? void 0 : _inputSize$current4.clientHeight) > 5);
-  }, [inputValue, internalMaxHeight]);
+  }, [inputValue, internalMaxHeight, onResize]);
   React__default["default"].useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.focusToComposer = () => {
@@ -70,7 +76,7 @@ const ChatComposer = props => {
         inputSend.current.focus();
       };
     }
-  }, [actionRef.current]);
+  }, [actionRef]);
   const handleChange = React__default["default"].useCallback(e => {
     onChange(e.target.value);
   }, [onChange]);
@@ -96,6 +102,7 @@ const ChatComposer = props => {
     value: inputValue,
     onFocus: onFocus,
     onBlur: onBlur,
+    onKeyDown: onKeyDown,
     placeholder: placeholder,
     "aria-label": "Message to send",
     "data-testid": "chat-composer-textarea"
@@ -104,7 +111,7 @@ const ChatComposer = props => {
     alignItems: "center"
   }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledComposerButton, {
     buttonType: "text",
-    icon: _PaperAirplane || (_PaperAirplane = /*#__PURE__*/_jsx__default["default"](PaperAirplane__default["default"], {
+    icon: _PaperAirplane || (_PaperAirplane = /*#__PURE__*/_jsx__default["default"](dsIcons.PaperAirplane, {
       width: 18,
       height: 18
     })),
@@ -139,8 +146,8 @@ const ChatComposer = props => {
   }, void 0, inputMaxLength && hasError ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/_jsx__default["default"](styled.StyledCounterErrorA11y, {
       role: "alert"
-    }, void 0, "You have exceeded the character limit by ", inputLength - inputMaxLength), "Please limit to less than ", inputMaxLength, " characters.", ' ']
-  }) : '', inputMaxLength ? "".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))));
+    }, void 0, maxLengthMessage || "You have exceeded the character limit by ".concat(inputLength - inputMaxLength)), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
+  }) : '', inputMaxLength ? " ".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))));
 };
 
 ChatComposer.defaultProps = props.defaultComposerPros;

package/cjs/parts/chat-composer/props.js

@@ -13,8 +13,10 @@ const defaultComposerPros = {
   onSend: lodash.noop,
   onFocus: lodash.noop,
   onBlur: lodash.noop,
+  onKeyDown: lodash.noop,
   maxHeight: 0,
   inputMaxLength: undefined,
+  maxLengthMessage: undefined,
   buttonDisabled: false,
   dataTestid: 'ds-chat-composer',
   actionRef: lodash.noop
@@ -22,11 +24,13 @@ const defaultComposerPros = {
 const composerProps = {
   placeholder: reactDesc.PropTypes.string.description('Input Placeholder').defaultValue(defaultComposerPros.placeholder),
   inputValue: reactDesc.PropTypes.string.description('Input value').defaultValue(defaultComposerPros.inputValue),
+  maxLengthMessage: reactDesc.PropTypes.string.description('Max length message').defaultValue(defaultComposerPros.maxLengthMessage),
   onChange: reactDesc.PropTypes.func.description('Called when the user types').defaultValue(defaultComposerPros.onChange),
   onResize: reactDesc.PropTypes.func.description('Called the input changes his height').defaultValue(defaultComposerPros.onResize),
   onSend: reactDesc.PropTypes.func.description('Called when the click send').defaultValue(defaultComposerPros.onSend),
   onFocus: reactDesc.PropTypes.func.description('Input focus').defaultValue(defaultComposerPros.onFocus),
   onBlur: reactDesc.PropTypes.func.description('Input blur').defaultValue(defaultComposerPros.onBlur),
+  onKeyDown: reactDesc.PropTypes.func.description('Input on key down').defaultValue(defaultComposerPros.onKeyDown),
   maxHeight: reactDesc.PropTypes.number.description('Max height of the composer. Use 0 for no limit').defaultValue(defaultComposerPros.onBlur),
   inputMaxLength: reactDesc.PropTypes.number.description('Max length of the composer. `undefined` for no limit').defaultValue(defaultComposerPros.inputMaxLength),
   buttonDisabled: reactDesc.PropTypes.bool.description('Control the disabled for the send button').defaultValue(defaultComposerPros.buttonDisabled),

package/cjs/parts/chat-composer/styled.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
 var dsGrid = require('@elliemae/ds-grid');
-var dsButton = require('@elliemae/ds-button');
+var DSButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,7 +17,7 @@ const StyledChatContainerContentComposer = /*#__PURE__*/styled__default["default
 const StyledComposerInput = /*#__PURE__*/styled__default["default"].textarea.withConfig({
   componentId: "sc-1ahwpce-1"
 })(["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]);
-const StyledComposerButton = /*#__PURE__*/styled__default["default"](dsButton.DSButton).withConfig({
+const StyledComposerButton = /*#__PURE__*/styled__default["default"](DSButton.DSButton).withConfig({
   componentId: "sc-1ahwpce-2"
 })(["&:disabled{background:none;svg{fill:#5d6775;}}svg{fill:", ";}&:focus{background:", ";}"], props => props.theme.colors.brand[600], props => props.theme.colors.brand[200]);
 const StyledCounterArea = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({

package/cjs/parts/chat-container/ChatContainer.js

@@ -2,12 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var lodash = require('lodash');
 var reactDesc = require('react-desc');
-var DSIndeterminateProgressIndicator = require('@elliemae/ds-basic/IndeterminateProgressIndicator');
+var DSIndeterminateProgressIndicator = require('@elliemae/ds-indeterminate-progress-indicator');
 var DSBanner = require('@elliemae/ds-banner');
 var ChatContainerComposer = require('../chat-composer/ChatContainerComposer.js');
 var ChatContainerMessagesList = require('../chat-container-messages-list/ChatContainerMessagesList.js');
@@ -42,7 +47,8 @@ const ChatContainer = props => {
     messagesListProps,
     composerProps,
     composerProps: {
-      onResize: onComposerResize
+      onResize: onComposerResize,
+      onKeyDown: onComposerKeyDown
     },
     actionRef,
     autoScroll,
@@ -51,6 +57,10 @@ const ChatContainer = props => {
     hasMoreItems,
     getMoreMessages
   } = props;
+  const bannerRef = React__default["default"].useRef({
+    focusOnWrapper: lodash.noop,
+    focusOnLink: lodash.noop
+  });
   const containerRef = React__default["default"].useRef();
   const listRef = React__default["default"].useRef({
     scrollToIndex: lodash.noop
@@ -65,6 +75,29 @@ const ChatContainer = props => {
     }
   }, [onComposerResize, messagesListProps.messages, autoScroll]);
   const Container = device === 'desktop' ? styled.StyledChatContainerContent : styled.MobileStyledChatContainerContent;
+  const handleTabs = React__default["default"].useCallback(e => {
+    if (onComposerKeyDown) onComposerKeyDown(e);else {
+      const ref = actionRef || listRef;
+
+      if (e.shiftKey && e.key === 'Tab') {
+        e.preventDefault();
+
+        if (['top', 'bottom'].includes(bannerPosition)) {
+          bannerRef.current.focusOnWrapper();
+        } else {
+          const last = ref.current.getMessagesInView().pop();
+          ref.current.focusToIndexWithoutScroll(last);
+        }
+      }
+    }
+  }, [actionRef, onComposerKeyDown, bannerPosition]); // Map actions
+
+  React__default["default"].useEffect(() => {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;
+      actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;
+    }
+  }, [actionRef]);
   return /*#__PURE__*/jsxRuntime.jsxs(Container, {
     rows: ['minmax(0, 1fr)', 'auto'],
     ref: containerRef,
@@ -72,7 +105,8 @@ const ChatContainer = props => {
     "aria-label": "chat window",
     children: [/*#__PURE__*/_jsx__default["default"]("div", {
       style: {
-        position: 'relative'
+        position: 'relative',
+        overflow: 'hidden'
       }
     }, void 0, /*#__PURE__*/jsxRuntime.jsx(ChatContainerMessagesList.ChatContainerMessagesList, _objectSpread(_objectSpread({}, messagesListProps), {}, {
       actionRef: actionRef || listRef,
@@ -80,13 +114,17 @@ const ChatContainer = props => {
       hasMoreItems: hasMoreItems,
       getMoreMessages: getMoreMessages,
       sendingMessages: sendingMessages,
-      sendingText: sendingText
+      sendingText: sendingText,
+      bannerPosition: bannerPosition,
+      bannerRef: bannerRef
     })), ['top', 'bottom'].includes(isLoading) ? /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
-      isLoading: isLoading
+      isLoading: isLoading,
+      "data-testid": "ds-chat-loading-indicator"
     }, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx__default["default"](DSIndeterminateProgressIndicator__default["default"], {
       processing: true,
       title: "Loading"
-    }))) : null, ['top', 'bottom'].includes(bannerPosition) ? /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
+    }))) : null, /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
+      linear: true,
       isLoading: bannerPosition
     }, void 0, /*#__PURE__*/_jsx__default["default"](DSBanner__default["default"], {
       showCloseButton: true,
@@ -100,15 +138,18 @@ const ChatContainer = props => {
       },
       onClose: bannerProps.onClose,
       isOpen: true,
-      type: DSBanner.BANNER_TYPES.INFO
-    })) : null, sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
+      type: bannerProps.type || DSBanner.BANNER_TYPES.INFO,
+      actionRef: bannerRef
+    })), sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
       isLoading: "bottom",
-      linear: true
+      linear: true,
+      "data-testid": "ds-chat-loading-indicator"
     }, void 0, /*#__PURE__*/_jsx__default["default"](DSIndeterminateProgressIndicator__default["default"], {
       processing: true,
       title: "Loading",
       lineOnly: true
     }))) : null), /*#__PURE__*/jsxRuntime.jsx(ChatContainerComposer.ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
+      onKeyDown: handleTabs,
       onResize: onResize,
       maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,
       actionRef: actionRef || listRef

package/cjs/parts/chat-container/props.js

@@ -35,7 +35,7 @@ const containerProps = {
   hasMoreItems: reactDesc.PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Load More button at the `top` or `bottom` of the container'),
   getMoreMessages: reactDesc.PropTypes.func.description('Called when the user clicks on load more').defaultValue(defaultProps.getMoreMessages),
   bannerPosition: reactDesc.PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Loading messages indicator at the `top` or `bottom` of the container'),
-  bannerProps: reactDesc.PropTypes.object.description('Banner configuration').defaultValue(defaultProps.bannerProps),
+  bannerProps: reactDesc.PropTypes.object.description("Banner configuration:\n  label: string;\n  viewLabel: string;\n  type: BANNER_TYPES;\n  onView: () => void;\n  onClose: () => void;\n  ").defaultValue(defaultProps.bannerProps),
   sendingMessages: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string), reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.number)]).description('Array of ids of sending messages').defaultValue(defaultProps.sendingMessages),
   sendingText: reactDesc.PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText),
   actionRef: reactDesc.PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultProps.actionRef)

package/cjs/parts/chat-container/styled.js

@@ -18,7 +18,7 @@ const StyledChatContainerContent = /*#__PURE__*/styled__default["default"](dsGri
 })(["height:100%;min-width:", "px;overflow:hidden;background:", ";position:relative;"], CONTAINER_WIDTH, props => props.theme.colors.neutral['050']);
 const StyledIndicatorContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-d732wo-1"
-})(["position:absolute;width:calc(100% + ", ");padding:", ";left:-", ";right:-", ";background:", ";", " ", ""], props => props.theme.space.xxs, props => !props.linear ? props.theme.space.xxs : 0, props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.theme.colors.neutral['000'], props => props.isLoading === 'top' ? 'top: 0;' : '', props => props.isLoading === 'bottom' ? 'bottom: 0;' : '');
+})(["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  " : '');
 const MobileStyledChatContainerContent = /*#__PURE__*/styled__default["default"](StyledChatContainerContent).withConfig({
   componentId: "sc-d732wo-2"
 })(["", ",", "{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);

package/cjs/parts/chat-container-header/ChatContainerHeader.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-var React = require('react');
+require('react');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var styled = require('./styled.js');
+var helpers = require('./helpers.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const ChatContainerHeader = props => {
   const {
@@ -30,7 +30,7 @@ const ChatContainerHeader = props => {
   }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
     value: title
   })), /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentHeaderActions, {
-    cols: React__default["default"].Children.toArray(children).filter(e => e).map(() => '32px'),
+    cols: helpers.validHeaderChilds(children),
     justifyContent: "flex-end",
     "data-testid": "chat-container-header-children"
   }, void 0, children));

package/cjs/parts/chat-container-header/helpers.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.constructor.js');
+require('core-js/modules/esnext.async-iterator.to-array.js');
+require('core-js/modules/esnext.iterator.to-array.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const validHeaderChilds = children => React__default["default"].Children.toArray(children).filter(e => {
+  if (Array.isArray(e.props.children)) {
+    return false;
+  }
+
+  if (e.props.children === undefined && e.$$typeof.toString() === 'Symbol(react.element)') {
+    return true;
+  }
+
+  return !!e.props.children;
+}).map(() => '32px');
+
+exports.validHeaderChilds = validHeaderChilds;

package/cjs/parts/chat-container-header/styled.js

@@ -9,15 +9,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledChatContainerContentHeader = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+const StyledChatContainerContentHeaderActions = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-jmynvr-0"
-})(["width:100%;min-height:48px;border-bottom:1px solid ", ";background:", ";"], props => props.theme.colors.neutral['200'], props => props.theme.colors.neutral['050']);
-const StyledChatContainerContentHeaderLabel = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+})(["max-width:80px;"]);
+const StyledChatContainerContentHeader = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-jmynvr-1"
-})(["justify-content:center;align-items:center;font-weight:bold;font-size:18px;color:", ";"], props => props.theme.colors.neutral['700']);
-const StyledChatContainerContentHeaderActions = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+})(["width:100%;min-height:48px;border-bottom:1px solid ", ";background:", ";", "{& button{background:transparent;}}"], props => props.theme.colors.neutral['200'], props => props.theme.colors.neutral['050'], StyledChatContainerContentHeaderActions);
+const StyledChatContainerContentHeaderLabel = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-jmynvr-2"
-})(["max-width:80px;"]);
+})(["justify-content:center;align-items:center;font-weight:bold;font-size:18px;color:", ";"], props => props.theme.colors.neutral['700']);
 
 exports.StyledChatContainerContentHeader = StyledChatContainerContentHeader;
 exports.StyledChatContainerContentHeaderActions = StyledChatContainerContentHeaderActions;