@elliemae/ds-chat 2.0.0-alpha.1 → 2.0.0-alpha.13

package/esm/parts/bubble/styled.js

@@ -19,10 +19,10 @@ const StyledTitleRightBubble = /*#__PURE__*/styled(Grid).withConfig({
 })(["font-size:13px;font-weight:400;color:", ";"], props => props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489');
 const StyleBodyWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-fe8e9o-4"
-})(["font-size:13px;font-weight:400;line-height:15px;min-height:32px;padding:0px 10px 8px 10px;"]);
+})(["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/ChatCard.js

@@ -1,29 +1,35 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.url.to-json.js';
 import 'react';
 import { describe } from 'react-desc';
-import { propTypes } from './props.js';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { propTypes } from './props.js';
+import { useValidateProps } from './config/useValidateProps.js';
 import { Wrapper, MainContent, Title, Content, Time, RightAddon } from './styled.js';
 
-const ChatCard = ({
-  title,
-  content,
-  time,
-  rightAddon
-}) => /*#__PURE__*/_jsx(Wrapper, {
-  cols: ['1fr', 'auto'],
-  "data-testid": "chat-card-wrapper"
-}, void 0, /*#__PURE__*/_jsx(MainContent, {}, void 0, /*#__PURE__*/_jsx(Title, {
-  "data-testid": "chat-card-title"
-}, void 0, title), /*#__PURE__*/_jsx(Content, {
-  "data-testid": "chat-card-content"
-}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-  value: content
-})), time && /*#__PURE__*/_jsx(Time, {
-  "data-testid": "chat-card-time"
-}, void 0, time)), rightAddon && /*#__PURE__*/_jsx(RightAddon, {
-  "data-testid": "chat-card-right-addon"
-}, void 0, rightAddon));
+const ChatCard = props => {
+  useValidateProps(props, ChatCardWithSchema.toJSON());
+  const {
+    title,
+    content,
+    time,
+    rightAddon
+  } = props;
+  return /*#__PURE__*/_jsx(Wrapper, {
+    cols: ['1fr', 'auto'],
+    "data-testid": "chat-card-wrapper"
+  }, void 0, /*#__PURE__*/_jsx(MainContent, {}, void 0, /*#__PURE__*/_jsx(Title, {
+    "data-testid": "chat-card-title"
+  }, void 0, title), /*#__PURE__*/_jsx(Content, {
+    "data-testid": "chat-card-content"
+  }, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+    value: content
+  })), time && /*#__PURE__*/_jsx(Time, {
+    "data-testid": "chat-card-time"
+  }, void 0, time)), rightAddon && /*#__PURE__*/_jsx(RightAddon, {
+    "data-testid": "chat-card-right-addon"
+  }, void 0, rightAddon));
+};
 
 const ChatCardWithSchema = describe(ChatCard);
 ChatCardWithSchema.propTypes = propTypes;

package/esm/parts/chat-card/config/useValidateProps.js

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

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

@@ -1,10 +1,10 @@
 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.node.description('Right addon, badge or icon')
+  rightAddon: PropTypes.element.description('Right addon, badge or icon')
 };
 
 export { propTypes };

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

@@ -1,10 +1,18 @@
 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';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -17,6 +25,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const ChatComposer = props => {
   var _input$current;
 
+  useValidateProps(props, ChatComposerWithSchema.toJSON());
   const {
     inputValue,
     onChange,
@@ -24,14 +33,18 @@ const ChatComposer = props => {
     onSend,
     onFocus,
     onBlur,
+    onKeyDown,
     maxHeight = 300,
     placeholder,
     inputMaxLength,
+    maxLengthMessage,
     buttonDisabled,
-    dataTestid
+    dataTestid,
+    actionRef
   } = props;
   const input = React.useRef();
   const inputSize = React.useRef();
+  const inputSend = React.useRef();
   const [height, setHeight] = React.useState(32);
   const internalMaxHeight = React.useMemo(() => maxHeight - 24, [maxHeight]);
   const [showScroll, setShowScroll] = React.useState(true);
@@ -42,7 +55,18 @@ 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 = () => {
+        input.current.focus();
+      };
+
+      actionRef.current.focusToSend = () => {
+        inputSend.current.focus();
+      };
+    }
+  }, [actionRef]);
   const handleChange = React.useCallback(e => {
     onChange(e.target.value);
   }, [onChange]);
@@ -54,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'],
@@ -68,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"
@@ -84,7 +109,8 @@ const ChatComposer = props => {
     size: "s",
     disabled: !inputValue || buttonDisabled || hasError,
     "data-testid": "chat-composer-send-button",
-    "aria-label": "Send"
+    "aria-label": "Send",
+    innerRef: inputSend
   }))), /*#__PURE__*/jsx(StyledComposerInput, {
     ref: inputSize,
     style: {
@@ -110,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/config/useValidateProps.js

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

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

@@ -9,23 +9,29 @@ const defaultComposerPros = {
   onSend: noop,
   onFocus: noop,
   onBlur: noop,
+  onKeyDown: noop,
   maxHeight: 0,
   inputMaxLength: undefined,
+  maxLengthMessage: undefined,
   buttonDisabled: false,
-  dataTestid: 'ds-chat-composer'
+  dataTestid: 'ds-chat-composer',
+  actionRef: noop
 };
 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.string.description('Input blur').defaultValue(defaultComposerPros.onBlur),
+  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.number.description('Control the disabled for the send button').defaultValue(defaultComposerPros.buttonDisabled),
-  dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder)
+  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: \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,14 +1,20 @@
+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';
 import { containerProps, defaultProps } from './props.js';
 import { StyledIndicatorContainer, StyledChatContainerContent, MobileStyledChatContainerContent } from './styled.js';
+import { useValidateProps } from './config/useValidateProps.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _DSIndeterminateProgr, _StyledIndicatorConta;
@@ -20,6 +26,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const ChatContainer = props => {
   var _containerRef$current;
 
+  useValidateProps(props, containerProps);
   const {
     sendingText,
     sendingMessages,
@@ -28,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
@@ -44,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,
@@ -66,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,
@@ -86,17 +132,21 @@ 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
+      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

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

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

@@ -1,12 +1,13 @@
 import { PropTypes } from 'react-desc';
 import { noop } from 'lodash';
+import { BANNER_TYPES } from '@elliemae/ds-banner';
 import { defaultProps as defaultProps$1 } from '../chat-container-messages-list/props.js';
 import { defaultComposerPros } from '../chat-composer/props.js';
 
 const defaultProps = {
   messagesListProps: defaultProps$1,
   composerProps: defaultComposerPros,
-  actionRef: noop,
+  actionRef: undefined,
   autoScroll: false,
   device: 'desktop',
   isLoading: undefined,
@@ -14,26 +15,30 @@ const defaultProps = {
   getMoreMessages: noop,
   bannerPosition: undefined,
   bannerProps: {
+    type: BANNER_TYPES.INFO,
     label: 'Unread Messages',
     viewLabel: 'View',
     onView: noop,
     onClose: noop
   },
   sendingMessages: undefined,
-  sendingText: 'Sending'
+  sendingText: 'Sending',
+  ariaLabel: 'Chat window'
 };
 const containerProps = {
-  messagesListProps: PropTypes.arrayOf(PropTypes.object).description('ChatMessageList props "messages" / "onScrollEnds"').defaultValue(defaultProps.messagesListProps),
-  composerProps: PropTypes.arrayOf(PropTypes.object).description('Composer configuration').defaultValue(defaultProps.composerProps),
+  messagesListProps: PropTypes.object.description('ChatMessageList props "messages" / "onScrollEnds"').defaultValue(defaultProps.messagesListProps),
+  composerProps: PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),
   autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),
   device: PropTypes.string.description('Option to render mobile or desktop style composer').defaultValue(defaultProps.device),
   isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Loading messages indicator at the `top` or `bottom` of the container'),
   hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Load More button at the `top` or `bottom` of the container'),
   getMoreMessages: PropTypes.func.description('Called when the user clicks on load more').defaultValue(defaultProps.getMoreMessages),
   bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Loading messages indicator at the `top` or `bottom` of the container'),
-  bannerProps: PropTypes.arrayOf(PropTypes.object).description('Banner configuration').defaultValue(defaultProps.bannerProps),
-  sendingMessages: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description('Array of ids of sending messages').defaultValue(defaultProps.sendingMessages),
-  sendingText: PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText)
+  bannerProps: 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: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).description('Array of ids of sending messages').defaultValue(defaultProps.sendingMessages),
+  sendingText: PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText),
+  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(defaultProps.actionRef),
+  ariaLabel: PropTypes.string.description('Aria Label description for chat container').defaultValue(defaultProps.ariaLabel)
 };
 
 export { containerProps, defaultProps };

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

@@ -10,9 +10,9 @@ const StyledChatContainerContent = /*#__PURE__*/styled(Grid).withConfig({
 })(["height:100%;min-width:", "px;overflow:hidden;background:", ";position:relative;"], CONTAINER_WIDTH, props => props.theme.colors.neutral['050']);
 const StyledIndicatorContainer = /*#__PURE__*/styled.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:", ";", " ", " & 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  " : '');
 const MobileStyledChatContainerContent = /*#__PURE__*/styled(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;}"], StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble, Wrapper, Title, Message, Time, StyledComposerInput);
+})(["", ",", "{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);
 
 export { CONTAINER_WIDTH, MobileStyledChatContainerContent, StyledChatContainerContent, StyledIndicatorContainer };

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

@@ -1,7 +1,8 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import React from 'react';
+import 'react';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { StyledChatContainerContentHeader, StyledChatContainerContentHeaderLabel, StyledChatContainerContentHeaderActions } from './styled.js';
+import { validHeaderChilds } from './helpers.js';
 
 const ChatContainerHeader = props => {
   const {
@@ -21,7 +22,7 @@ const ChatContainerHeader = props => {
   }, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
     value: title
   })), /*#__PURE__*/_jsx(StyledChatContainerContentHeaderActions, {
-    cols: React.Children.toArray(children).filter(e => e).map(() => '32px'),
+    cols: validHeaderChilds(children),
     justifyContent: "flex-end",
     "data-testid": "chat-container-header-children"
   }, void 0, children));

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

@@ -0,0 +1,23 @@
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.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.constructor.js';
+import 'core-js/modules/esnext.async-iterator.to-array.js';
+import 'core-js/modules/esnext.iterator.to-array.js';
+import React from 'react';
+
+const validHeaderChilds = children => React.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');
+
+export { validHeaderChilds };

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

@@ -1,14 +1,14 @@
 import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
 
-const StyledChatContainerContentHeader = /*#__PURE__*/styled(Grid).withConfig({
+const StyledChatContainerContentHeaderActions = /*#__PURE__*/styled(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(Grid).withConfig({
+})(["max-width:80px;"]);
+const StyledChatContainerContentHeader = /*#__PURE__*/styled(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(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(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']);
 
 export { StyledChatContainerContentHeader, StyledChatContainerContentHeaderActions, StyledChatContainerContentHeaderLabel };