@elliemae/ds-chat 2.0.0-alpha.10 → 2.0.0-alpha.14

package/esm/ChatDataTestids.js

@@ -0,0 +1,23 @@
+const ChatDataTestIds = {
+  COMPOSER_TEXTAREA: 'chat-composer-textarea',
+  COMPOSER_SEND_BUTTON: 'chat-composer-send-button',
+  CARD_TITLE: 'chat-card-title',
+  CARD_WRAPPER: 'chat-card-wrapper',
+  CARD_TIME: 'chat-card-time',
+  CARD_RIGHT_ADDON: 'chat-right-addon',
+  CARD_CONTENT: 'chat-card-content',
+  LOADING_INDICATOR: 'ds-chat-loading-indicator',
+  HEADER_TITLE: 'chat-header-title',
+  HEADER_CHILDREN: 'chat-header-children',
+  THREAD_CONTAINER: 'chat-thread-container',
+  LOAD_MORE_BUTTON: 'ds-chat-load-more-btn',
+  FLOATING_BUTTON: 'chat-floating-button',
+  SYSTEM_MSG_TITLE: 'chat-system-message-title',
+  SYSTEM_MSG_BODY: 'chat-system-message-body',
+  SYSTEM_MSG_TIME: 'chat-system-message-time',
+  BUBBLE: 'ds-chat-bubble',
+  BUBBLE_TITLE: 'chat-bubble-title',
+  BUBBLE_BODY: 'chat-bubble-body'
+};
+
+export { ChatDataTestIds };

package/esm/parts/bubble/ChatBubble.js

@@ -1,14 +1,16 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/web.url.to-json.js';
-import 'react';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import React from 'react';
 import { describe } from 'react-desc';
-import Warning from '@elliemae/ds-icons/WarningCircleFill';
+import { WarningCircleFill } from '@elliemae/ds-icons';
 import { StyledWrapper, StyledColoredBubble, StyledTitleBubble, StyledTitleLeftBubble, StyledTitleRightBubble, StyleBodyWrapper, StyleErrorMessage, StyleHelpMessage } from './styled.js';
 import { propsBubbles } from './props.js';
 import { useValidateProps } from './config/useValidateProps.js';
 import { ChatBubbleArrow } from './ChatBubbleArrow.js';
 
-var _Warning;
+var _br, _WarningCircleFill;
 
 const ChatBubble = props => {
   useValidateProps(props, ChatBubbleWithSchema.toJSON());
@@ -21,8 +23,9 @@ const ChatBubble = props => {
     errorMessage,
     helpMessage
   } = props;
+  const bodyParts = React.useMemo(() => typeof body === 'string' ? body.split('\n') : [body], [body]);
   return /*#__PURE__*/_jsx(StyledWrapper, {
-    "data-testid": `ds-chat-bubble-${dsId}`,
+    "data-testid": "ds-chat-bubble-".concat(dsId),
     type: type
   }, void 0, /*#__PURE__*/_jsx(StyledColoredBubble, {
     type: type
@@ -33,22 +36,22 @@ const ChatBubble = props => {
     className: "sr-only"
   }, void 0, /*#__PURE__*/_jsx(StyledTitleLeftBubble, {
     alignItems: "center",
-    "data-testid": `chat-bubble-title-${dsId}`
+    "data-testid": "chat-bubble-title-".concat(dsId)
   }, void 0, title), /*#__PURE__*/_jsx(StyledTitleRightBubble, {
     alignItems: "center",
     type: type,
-    "data-testid": `chat-bubble-time-${dsId}`
+    "data-testid": "chat-bubble-time-".concat(dsId)
   }, void 0, time)), /*#__PURE__*/_jsx(StyleBodyWrapper, {
-    "data-testid": `chat-bubble-body-${dsId}`
-  }, void 0, body), /*#__PURE__*/_jsx(ChatBubbleArrow, {
+    "data-testid": "chat-bubble-body-".concat(dsId)
+  }, void 0, bodyParts.map((item, index) => /*#__PURE__*/_jsx(React.Fragment, {}, "".concat(item, "-").concat(index), item, index < bodyParts.length - 1 ? _br || (_br = /*#__PURE__*/_jsx("br", {})) : null))), /*#__PURE__*/_jsx(ChatBubbleArrow, {
     type: type
   })), errorMessage ? /*#__PURE__*/_jsx(StyleErrorMessage, {
-    "data-testid": `chat-bubble-error-message-${dsId}`,
+    "data-testid": "chat-bubble-error-message-".concat(dsId),
     p: "xxs",
     gutter: "xxs",
     cols: [1, 'auto']
-  }, void 0, /*#__PURE__*/_jsx("span", {}, void 0, errorMessage), _Warning || (_Warning = /*#__PURE__*/_jsx(Warning, {}))) : null, helpMessage ? /*#__PURE__*/_jsx(StyleHelpMessage, {
-    "data-testid": `chat-bubble-help-message-${dsId}`,
+  }, void 0, /*#__PURE__*/_jsx("span", {}, void 0, errorMessage), _WarningCircleFill || (_WarningCircleFill = /*#__PURE__*/_jsx(WarningCircleFill, {}))) : null, helpMessage ? /*#__PURE__*/_jsx(StyleHelpMessage, {
+    "data-testid": "chat-bubble-help-message-".concat(dsId),
     p: "xxs",
     gutter: "xxs",
     cols: [1, 'auto']

package/esm/parts/bubble/ChatBubbleArrow.js

@@ -4,66 +4,69 @@ import { StyledBubbleArrow } from './styled.js';
 import { BUBBLE_TYPES } from './props.js';
 
 var _svg, _svg2;
-const ChatBubbleArrow = ({
-  type
-}) => /*#__PURE__*/_jsx(StyledBubbleArrow, {}, void 0, type === BUBBLE_TYPES.RECIPIENT ? _svg || (_svg = /*#__PURE__*/_jsx("svg", {
-  width: "15px",
-  height: "14px",
-  viewBox: "0 0 15 14"
-}, void 0, /*#__PURE__*/_jsx("defs", {}, void 0, /*#__PURE__*/_jsx("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("filter", {
-  x: "-55.6%",
-  y: "-50.0%",
-  width: "211.1%",
-  height: "225.0%",
-  filterUnits: "objectBoundingBox",
-  id: "filter-2"
-}, void 0, /*#__PURE__*/_jsx("feOffset", {
-  dx: "2.3",
-  dy: "1.2",
-  in: "SourceAlpha",
-  result: "shadowOffsetOuter1"
-}), /*#__PURE__*/_jsx("feGaussianBlur", {
-  stdDeviation: "1.5",
-  in: "shadowOffsetOuter1",
-  result: "shadowBlurOuter1"
-}), /*#__PURE__*/_jsx("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("g", {
-  id: "[DSK]-Visual-Design",
-  stroke: "none",
-  strokeWidth: "1",
-  fill: "none",
-  fillRule: "evenodd"
-}, void 0, /*#__PURE__*/_jsx("g", {
-  id: "Path-Copy",
-  transform: "translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) "
-}, void 0, /*#__PURE__*/_jsx("use", {
-  fill: "black",
-  fillOpacity: "1",
-  filter: "url(#filter-2)",
-  xlinkHref: "#path-1"
-}), /*#__PURE__*/_jsx("use", {
-  fill: "#FFFFFF",
-  fillRule: "evenodd",
-  xlinkHref: "#path-1"
-}))))) : _svg2 || (_svg2 = /*#__PURE__*/_jsx("svg", {
-  width: "9px",
-  height: "8px",
-  viewBox: "0 0 9 8"
-}, void 0, /*#__PURE__*/_jsx("g", {
-  stroke: "none",
-  strokeWidth: "1",
-  fill: "none",
-  fillRule: "evenodd"
-}, void 0, /*#__PURE__*/_jsx("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(StyledBubbleArrow, {}, void 0, type === BUBBLE_TYPES.RECIPIENT ? _svg || (_svg = /*#__PURE__*/_jsx("svg", {
+    width: "15px",
+    height: "14px",
+    viewBox: "0 0 15 14"
+  }, void 0, /*#__PURE__*/_jsx("defs", {}, void 0, /*#__PURE__*/_jsx("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-chat-bubble"
+  }), /*#__PURE__*/_jsx("filter", {
+    x: "-55.6%",
+    y: "-50.0%",
+    width: "211.1%",
+    height: "225.0%",
+    filterUnits: "objectBoundingBox",
+    id: "filter-2"
+  }, void 0, /*#__PURE__*/_jsx("feOffset", {
+    dx: "2.3",
+    dy: "1.2",
+    in: "SourceAlpha",
+    result: "shadowOffsetOuter1"
+  }), /*#__PURE__*/_jsx("feGaussianBlur", {
+    stdDeviation: "1.5",
+    in: "shadowOffsetOuter1",
+    result: "shadowBlurOuter1"
+  }), /*#__PURE__*/_jsx("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("g", {
+    id: "[DSK]-Visual-Design",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, void 0, /*#__PURE__*/_jsx("g", {
+    id: "Path-Copy",
+    transform: "translate(7.500000, 6.000000) scale(-1, 1) translate(-7.500000, -6.000000) "
+  }, void 0, /*#__PURE__*/_jsx("use", {
+    fill: "black",
+    fillOpacity: "1",
+    filter: "url(#filter-2)",
+    xlinkHref: "#path-chat-bubble"
+  }), /*#__PURE__*/_jsx("use", {
+    fill: "#FFFFFF",
+    fillRule: "evenodd",
+    xlinkHref: "#path-chat-bubble"
+  }))))) : _svg2 || (_svg2 = /*#__PURE__*/_jsx("svg", {
+    width: "9px",
+    height: "8px",
+    viewBox: "0 0 9 8"
+  }, void 0, /*#__PURE__*/_jsx("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, void 0, /*#__PURE__*/_jsx("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"
+  })))));
+};
 
 export { ChatBubbleArrow };

package/esm/parts/bubble/config/useValidateProps.js

@@ -1,27 +1,26 @@
 import { useValidatePropTypes } from '@elliemae/ds-props-helpers';
 
 const throwError = message => {
-  throw new Error(`Bubble:: ${message}
-  `);
+  throw new Error("Bubble:: ".concat(message, "\n  "));
 };
 
 const useValidateProps = (props, schema) => {
   useValidatePropTypes(props, schema);
 
   if (typeof props.title === 'undefined') {
-    throwError(`Please provide a title property to use this component.`);
+    throwError("Please provide a title property to use this component.");
   }
 
   if (typeof props.time === 'undefined') {
-    throwError(`Please provide a time property to use this component.`);
+    throwError("Please provide a time property to use this component.");
   }
 
   if (typeof props.body === 'undefined') {
-    throwError(`Please provide a body property to use this component.`);
+    throwError("Please provide a body property to use this component.");
   }
 
   if (typeof props.type === 'undefined') {
-    throwError(`Please provide a type property to use this component.`);
+    throwError("Please provide a type property to use this component.");
   }
 };
 

package/esm/parts/bubble/props.js

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

package/esm/parts/bubble/styled.js

@@ -22,7 +22,7 @@ const StyleBodyWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["font-size:13px;font-weight:400;line-height:15px;min-height:18px;padding:0px 10px 8px 10px;"]);
 const StyleErrorMessage = /*#__PURE__*/styled.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(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
@@ -32,35 +32,6 @@ const StyledBubbleArrow = /*#__PURE__*/styled.div.withConfig({
 })(["display:block;content:'';position:absolute;bottom:10px;height:15px;"]);
 const StyledColoredBubble = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-fe8e9o-8"
-})(["min-width:224px;border-radius:10px;position:relative;", ""], props => props.type === BUBBLE_TYPES.SENDER ? `
-        border: 1px solid ${props.theme.colors.brand['700']};
-        background: ${props.theme.colors.brand[600]};
-        color: ${props.theme.colors.neutral['000']};
-        ${StyledBubbleArrow}{            
-            right: -9px;
-            bottom: 6px;
-            svg{
-                fill: ${props.theme.colors.brand[600]};
-            }
-        }
-
-        a {
-          color: #FFF;
-        }
-
-    ` : `
-        box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);
-        background: ${props.theme.colors.neutral['000']};
-        color: ${props.theme.colors.neutral[700]};
-
-        ${StyledBubbleArrow}{            
-            left: -11px;
-            bottom: 6px;
-            svg{
-                fill: ${props.theme.colors.neutral['000']};
-            }
-        }
-
-    `);
+})(["min-width:224px;border-radius:10px;position:relative;", ""], props => props.type === BUBBLE_TYPES.SENDER ? "\n        border: 1px solid ".concat(props.theme.colors.brand['700'], ";\n        background: ").concat(props.theme.colors.brand[600], ";\n        color: ").concat(props.theme.colors.neutral['000'], ";\n        ").concat(StyledBubbleArrow, "{            \n            right: -9px;\n            bottom: 6px;\n            svg{\n                fill: ").concat(props.theme.colors.brand[600], ";\n            }\n        }\n\n        a {\n          color: #FFF;\n        }\n\n    ") : "\n        box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n        background: ".concat(props.theme.colors.neutral['000'], ";\n        color: ").concat(props.theme.colors.neutral[700], ";\n\n        ").concat(StyledBubbleArrow, "{            \n            left: -11px;\n            bottom: 6px;\n            svg{\n                fill: ").concat(props.theme.colors.neutral['000'], ";\n            }\n        }\n\n    "));
 
 export { StyleBodyWrapper, StyleErrorMessage, StyleHelpMessage, StyledBubbleArrow, StyledColoredBubble, StyledTitleBubble, StyledTitleLeftBubble, StyledTitleRightBubble, StyledWrapper };

package/esm/parts/chat-card/props.js

@@ -1,8 +1,8 @@
 import { PropTypes } from 'react-desc';
 
 const propTypes = {
-  title: PropTypes.string.isRequired.description(`Card's title`),
-  content: PropTypes.string.description(`Card's content`),
+  title: PropTypes.string.isRequired.description("Card's title"),
+  content: PropTypes.string.description("Card's content"),
   time: PropTypes.string.description('Time'),
   rightAddon: PropTypes.element.description('Right addon, badge or icon')
 };

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

@@ -1,10 +1,16 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.url.to-json.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import React from 'react';
 import { Grid } from '@elliemae/ds-grid';
 import { describe } from 'react-desc';
-import PaperAirplane from '@elliemae/ds-icons/PaperAirplane';
+import { PaperAirplane } from '@elliemae/ds-icons';
 import { StyledChatContainerContentComposer, StyledComposerInput, StyledComposerButton, StyledCounterArea, StyledCounterErrorA11y } from './styled.js';
 import { useValidateProps } from './config/useValidateProps.js';
 import { composerProps, defaultComposerPros } from './props.js';
@@ -27,9 +33,11 @@ const ChatComposer = props => {
     onSend,
     onFocus,
     onBlur,
+    onKeyDown,
     maxHeight = 300,
     placeholder,
     inputMaxLength,
+    maxLengthMessage,
     buttonDisabled,
     dataTestid,
     actionRef
@@ -47,7 +55,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.useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.focusToComposer = () => {
@@ -58,7 +66,7 @@ const ChatComposer = props => {
         inputSend.current.focus();
       };
     }
-  }, [actionRef.current]);
+  }, [actionRef]);
   const handleChange = React.useCallback(e => {
     onChange(e.target.value);
   }, [onChange]);
@@ -70,7 +78,7 @@ const ChatComposer = props => {
   const hasError = React.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
   return /*#__PURE__*/_jsx(StyledChatContainerContentComposer, {
     rows: ['auto', '15px'],
-    maxHeight: `${maxHeight}px`,
+    maxHeight: "".concat(maxHeight, "px"),
     "data-testid": dataTestid
   }, void 0, /*#__PURE__*/_jsx(Grid, {
     cols: ['1fr', '24px'],
@@ -84,6 +92,7 @@ const ChatComposer = props => {
     value: inputValue,
     onFocus: onFocus,
     onBlur: onBlur,
+    onKeyDown: onKeyDown,
     placeholder: placeholder,
     "aria-label": "Message to send",
     "data-testid": "chat-composer-textarea"
@@ -127,8 +136,8 @@ const ChatComposer = props => {
   }, void 0, inputMaxLength && hasError ? /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/_jsx(StyledCounterErrorA11y, {
       role: "alert"
-    }, void 0, "You have exceeded the character limit by ", inputLength - inputMaxLength), "Please limit to less than ", inputMaxLength, " characters.", ' ']
-  }) : '', inputMaxLength ? `${inputLength} / ${inputMaxLength}` : ''), _Grid || (_Grid = /*#__PURE__*/_jsx(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(Grid, {}))));
 };
 
 ChatComposer.defaultProps = defaultComposerPros;

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

@@ -9,8 +9,10 @@ const defaultComposerPros = {
   onSend: noop,
   onFocus: noop,
   onBlur: noop,
+  onKeyDown: noop,
   maxHeight: 0,
   inputMaxLength: undefined,
+  maxLengthMessage: undefined,
   buttonDisabled: false,
   dataTestid: 'ds-chat-composer',
   actionRef: noop
@@ -18,26 +20,18 @@ const defaultComposerPros = {
 const composerProps = {
   placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultComposerPros.placeholder),
   inputValue: PropTypes.string.description('Input value').defaultValue(defaultComposerPros.inputValue),
+  maxLengthMessage: PropTypes.string.description('Max length message').defaultValue(defaultComposerPros.maxLengthMessage),
   onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultComposerPros.onChange),
   onResize: PropTypes.func.description('Called the input changes his height').defaultValue(defaultComposerPros.onResize),
   onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultComposerPros.onSend),
   onFocus: PropTypes.func.description('Input focus').defaultValue(defaultComposerPros.onFocus),
   onBlur: PropTypes.func.description('Input blur').defaultValue(defaultComposerPros.onBlur),
+  onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultComposerPros.onKeyDown),
   maxHeight: PropTypes.number.description('Max height of the composer. Use 0 for no limit').defaultValue(defaultComposerPros.onBlur),
   inputMaxLength: PropTypes.number.description('Max length of the composer. `undefined` for no limit').defaultValue(defaultComposerPros.inputMaxLength),
   buttonDisabled: PropTypes.bool.description('Control the disabled for the send button').defaultValue(defaultComposerPros.buttonDisabled),
   dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder),
-  actionRef: PropTypes.object.description(`Reference: 
-        { 
-          scrollToIndex: (n: number) => void,
-          getMessagesInView: () => number[],
-          focusToIndex: (n: number) => void,
-          focusToList: () => void,
-          focusToComposer: () => void,
-          focusToSend: () => void,
-        }
-        
-      `).defaultValue(defaultComposerPros.actionRef)
+  actionRef: 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(defaultComposerPros.actionRef)
 };
 
 export { composerProps, defaultComposerPros };

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

@@ -8,13 +8,13 @@ const StyledChatContainerContentComposer = /*#__PURE__*/styled(Grid).withConfig(
 })(["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);
 const StyledComposerInput = /*#__PURE__*/styled.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' ? `${props.height}px` : props.height, props => props.theme.colors.brand[600]);
+})(["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]);
 const StyledComposerButton = /*#__PURE__*/styled(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(Grid).withConfig({
   componentId: "sc-1ahwpce-3"
-})(["text-align:right;font-size:11px;height:15px;align-items:center;font-style:italic;", " position:relative;"], props => props.hasError ? `color:${props.theme.colors.danger[900]};` : '');
+})(["text-align:right;font-size:11px;height:15px;align-items:center;font-style:italic;", " position:relative;"], props => props.hasError ? "color:".concat(props.theme.colors.danger[900], ";") : '');
 const StyledCounterErrorA11y = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-1ahwpce-4"
 })(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);

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

@@ -1,9 +1,14 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import React from 'react';
 import { noop } from 'lodash';
 import { describe } from 'react-desc';
-import DSIndeterminateProgressIndicator from '@elliemae/ds-basic/IndeterminateProgressIndicator';
+import DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';
 import DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';
 import { ChatComposer } from '../chat-composer/ChatContainerComposer.js';
 import { ChatContainerMessagesList } from '../chat-container-messages-list/ChatContainerMessagesList.js';
@@ -21,7 +26,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const ChatContainer = props => {
   var _containerRef$current;
 
-  useValidateProps(props, ChatContainerWithSchema.toTypescript());
+  useValidateProps(props, containerProps);
   const {
     sendingText,
     sendingMessages,
@@ -30,15 +35,20 @@ const ChatContainer = props => {
     messagesListProps,
     composerProps,
     composerProps: {
-      onResize: onComposerResize
+      onResize: onComposerResize,
+      onKeyDown: onComposerKeyDown
     },
     actionRef,
-    autoScroll,
     device,
     isLoading,
     hasMoreItems,
-    getMoreMessages
+    getMoreMessages,
+    ariaLabel
   } = props;
+  const bannerRef = React.useRef({
+    focusOnWrapper: noop,
+    focusOnLink: noop
+  });
   const containerRef = React.useRef();
   const listRef = React.useRef({
     scrollToIndex: noop
@@ -46,21 +56,51 @@ const ChatContainer = props => {
   const onResize = React.useCallback(height => {
     if (onComposerResize) onComposerResize(height);
 
-    if (autoScroll) {
-      listRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
-        align: 'end'
-      });
+    if (height > 30) {
+      /*
+       setTimeout is used to equal the animation duration from the 
+       composer text area when increase its size
+      */
+      setTimeout(() => {
+        actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
+          align: 'start'
+        });
+      }, 50);
     }
-  }, [onComposerResize, messagesListProps.messages, autoScroll]);
+  }, [onComposerResize, messagesListProps.messages, actionRef]);
   const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;
+  const handleTabs = React.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.useEffect(() => {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;
+      actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;
+    }
+  }, [actionRef]);
   return /*#__PURE__*/jsxs(Container, {
     rows: ['minmax(0, 1fr)', 'auto'],
     ref: containerRef,
     role: "region",
-    "aria-label": "chat window",
+    "aria-label": ariaLabel,
     children: [/*#__PURE__*/_jsx("div", {
       style: {
-        position: 'relative'
+        position: 'relative',
+        overflow: 'hidden'
       }
     }, void 0, /*#__PURE__*/jsx(ChatContainerMessagesList, _objectSpread(_objectSpread({}, messagesListProps), {}, {
       actionRef: actionRef || listRef,
@@ -68,13 +108,17 @@ const ChatContainer = props => {
       hasMoreItems: hasMoreItems,
       getMoreMessages: getMoreMessages,
       sendingMessages: sendingMessages,
-      sendingText: sendingText
+      sendingText: sendingText,
+      bannerPosition: bannerPosition,
+      bannerRef: bannerRef
     })), ['top', 'bottom'].includes(isLoading) ? /*#__PURE__*/_jsx(StyledIndicatorContainer, {
-      isLoading: isLoading
+      isLoading: isLoading,
+      "data-testid": "ds-chat-loading-indicator"
     }, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
       processing: true,
       title: "Loading"
-    }))) : null, ['top', 'bottom'].includes(bannerPosition) ? /*#__PURE__*/_jsx(StyledIndicatorContainer, {
+    }))) : null, /*#__PURE__*/_jsx(StyledIndicatorContainer, {
+      linear: true,
       isLoading: bannerPosition
     }, void 0, /*#__PURE__*/_jsx(DSBanner, {
       showCloseButton: true,
@@ -88,15 +132,18 @@ const ChatContainer = props => {
       },
       onClose: bannerProps.onClose,
       isOpen: true,
-      type: BANNER_TYPES.INFO
-    })) : null, sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx(StyledIndicatorContainer, {
+      type: bannerProps.type || BANNER_TYPES.INFO,
+      actionRef: bannerRef
+    })), sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx(StyledIndicatorContainer, {
       isLoading: "bottom",
-      linear: true
+      linear: true,
+      "data-testid": "ds-chat-loading-indicator"
     }, void 0, /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
       processing: true,
       title: "Loading",
       lineOnly: true
     }))) : null), /*#__PURE__*/jsx(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/esm/parts/chat-container/config/useValidateProps.js

@@ -1,7 +1,7 @@
 import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 
-const useValidateProps = (props, schema) => {
-  useValidateTypescriptPropTypes(props, schema);
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes);
 };
 
 export { useValidateProps };