@elliemae/ds-chat 2.0.0-alpha.0 → 2.0.0-alpha.12

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

@@ -4,11 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 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');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -17,17 +25,17 @@ 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;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 const ChatComposer = props => {
   var _input$current;
 
+  useValidateProps.useValidateProps(props, ChatComposerWithSchema.toJSON());
   const {
     inputValue,
     onChange,
@@ -35,26 +43,41 @@ const ChatComposer = props => {
     onSend,
     onFocus,
     onBlur,
+    onKeyDown,
     maxHeight = 300,
     placeholder,
     inputMaxLength,
+    maxLengthMessage,
     buttonDisabled,
-    dataTestid
+    dataTestid,
+    actionRef
   } = props;
-  const input = React__default['default'].useRef();
-  const inputSize = React__default['default'].useRef();
-  const [height, setHeight] = React__default['default'].useState(32);
-  const internalMaxHeight = React__default['default'].useMemo(() => maxHeight - 24, [maxHeight]);
-  const [showScroll, setShowScroll] = React__default['default'].useState(true);
-  React__default['default'].useEffect(() => {
+  const input = React__default["default"].useRef();
+  const inputSize = React__default["default"].useRef();
+  const inputSend = React__default["default"].useRef();
+  const [height, setHeight] = React__default["default"].useState(32);
+  const internalMaxHeight = React__default["default"].useMemo(() => maxHeight - 24, [maxHeight]);
+  const [showScroll, setShowScroll] = React__default["default"].useState(true);
+  React__default["default"].useEffect(() => {
     var _inputSize$current, _inputSize$current2, _inputSize$current3, _inputSize$current4;
 
     const newHeight = ((_inputSize$current = inputSize.current) === null || _inputSize$current === void 0 ? void 0 : _inputSize$current.scrollHeight) > internalMaxHeight ? internalMaxHeight : (_inputSize$current2 = inputSize.current) === null || _inputSize$current2 === void 0 ? void 0 : _inputSize$current2.scrollHeight;
     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]);
-  const handleChange = React__default['default'].useCallback(e => {
+  }, [inputValue, internalMaxHeight, onResize]);
+  React__default["default"].useEffect(() => {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusToComposer = () => {
+        input.current.focus();
+      };
+
+      actionRef.current.focusToSend = () => {
+        inputSend.current.focus();
+      };
+    }
+  }, [actionRef]);
+  const handleChange = React__default["default"].useCallback(e => {
     onChange(e.target.value);
   }, [onChange]);
   const heightProps = {
@@ -62,12 +85,12 @@ const ChatComposer = props => {
     overflow: showScroll ? 'auto' : 'hidden'
   };
   const inputLength = String(inputValue || '').length;
-  const hasError = React__default['default'].useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
-  return /*#__PURE__*/_jsx__default['default'](styled.StyledChatContainerContentComposer, {
+  const hasError = React__default["default"].useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentComposer, {
     rows: ['auto', '15px'],
-    maxHeight: `${maxHeight}px`,
+    maxHeight: "".concat(maxHeight, "px"),
     "data-testid": dataTestid
-  }, void 0, /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: ['1fr', '24px'],
     justifyContent: "center",
     alignItems: "flex-end",
@@ -79,15 +102,16 @@ const ChatComposer = props => {
     value: inputValue,
     onFocus: onFocus,
     onBlur: onBlur,
+    onKeyDown: onKeyDown,
     placeholder: placeholder,
     "aria-label": "Message to send",
     "data-testid": "chat-composer-textarea"
-  }), /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
+  }), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     height: "32px",
     alignItems: "center"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledComposerButton, {
+  }, 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
     })),
@@ -95,7 +119,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__*/jsxRuntime.jsx(styled.StyledComposerInput, {
     ref: inputSize,
     style: {
@@ -109,20 +134,20 @@ const ChatComposer = props => {
     onChange: handleChange,
     value: inputValue // maxLength={inputMaxLength}
 
-  }), /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
+  }), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: ['1fr', '24px'],
     justifyContent: "flex-end",
     alignItems: "center",
     gutter: "xxs",
     pb: "xxs"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledCounterArea, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledCounterArea, {
     hasError: hasError,
     "data-testid": "composer-counter-area"
   }, void 0, inputMaxLength && hasError ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default['default'](styled.StyledCounterErrorA11y, {
+    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 ? `${inputLength} / ${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/config/useValidateProps.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+const useValidateProps = (props, schema) => {
+  dsPropsHelpers.useValidatePropTypes(props, schema);
+};
+
+exports.useValidateProps = useValidateProps;

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

@@ -13,23 +13,29 @@ 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'
+  dataTestid: 'ds-chat-composer',
+  actionRef: lodash.noop
 };
 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.string.description('Input blur').defaultValue(defaultComposerPros.onBlur),
+  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.number.description('Control the disabled for the send button').defaultValue(defaultComposerPros.buttonDisabled),
-  dataTestid: reactDesc.PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder)
+  buttonDisabled: reactDesc.PropTypes.bool.description('Control the disabled for the send button').defaultValue(defaultComposerPros.buttonDisabled),
+  dataTestid: reactDesc.PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder),
+  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(defaultComposerPros.actionRef)
 };
 
 exports.composerProps = composerProps;

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

@@ -4,26 +4,26 @@ 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 }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 // Composer
-const StyledChatContainerContentComposer = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+const StyledChatContainerContentComposer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1ahwpce-0"
 })(["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__default['default'].textarea.withConfig({
+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' ? `${props.height}px` : props.height, props => props.theme.colors.brand[600]);
-const StyledComposerButton = /*#__PURE__*/styled__default['default'](dsButton.DSButton).withConfig({
+})(["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__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({
+const StyledCounterArea = /*#__PURE__*/styled__default["default"](dsGrid.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]};` : '');
-const StyledCounterErrorA11y = /*#__PURE__*/styled__default['default'].span.withConfig({
+})(["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__default["default"].span.withConfig({
   componentId: "sc-1ahwpce-4"
 })(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
 

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

@@ -2,17 +2,23 @@
 
 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');
 var props = require('./props.js');
 var styled = require('./styled.js');
+var useValidateProps = require('./config/useValidateProps.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -27,11 +33,12 @@ var _DSIndeterminateProgr, _StyledIndicatorConta;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const ChatContainer = props => {
+const ChatContainer = props$1 => {
   var _containerRef$current;
 
+  useValidateProps.useValidateProps(props$1, props.containerProps);
   const {
     sendingText,
     sendingMessages,
@@ -40,37 +47,72 @@ const ChatContainer = props => {
     messagesListProps,
     composerProps,
     composerProps: {
-      onResize: onComposerResize
+      onResize: onComposerResize,
+      onKeyDown: onComposerKeyDown
     },
     actionRef,
-    autoScroll,
     device,
     isLoading,
     hasMoreItems,
-    getMoreMessages
-  } = props;
-  const containerRef = React__default['default'].useRef();
-  const listRef = React__default['default'].useRef({
+    getMoreMessages,
+    ariaLabel
+  } = props$1;
+  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
   });
-  const onResize = React__default['default'].useCallback(height => {
+  const onResize = React__default["default"].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' ? 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,
     role: "region",
-    "aria-label": "chat window",
-    children: [/*#__PURE__*/_jsx__default['default']("div", {
+    "aria-label": ariaLabel,
+    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,
@@ -78,15 +120,19 @@ const ChatContainer = props => {
       hasMoreItems: hasMoreItems,
       getMoreMessages: getMoreMessages,
       sendingMessages: sendingMessages,
-      sendingText: sendingText
-    })), ['top', 'bottom'].includes(isLoading) ? /*#__PURE__*/_jsx__default['default'](styled.StyledIndicatorContainer, {
-      isLoading: isLoading
-    }, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx__default['default'](DSIndeterminateProgressIndicator__default['default'], {
+      sendingText: sendingText,
+      bannerPosition: bannerPosition,
+      bannerRef: bannerRef
+    })), ['top', 'bottom'].includes(isLoading) ? /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
+      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'], {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DSBanner__default["default"], {
       showCloseButton: true,
       label: bannerProps.label || 'Unread messages',
       containerProps: {
@@ -98,17 +144,21 @@ 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
-    }, void 0, /*#__PURE__*/_jsx__default['default'](DSIndeterminateProgressIndicator__default['default'], {
+      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
+      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/config/useValidateProps.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+const useValidateProps = (props, propTypes) => {
+  dsPropsHelpers.useValidateTypescriptPropTypes(props, propTypes);
+};
+
+exports.useValidateProps = useValidateProps;

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

@@ -4,13 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
 var lodash = require('lodash');
+var DSBanner = require('@elliemae/ds-banner');
 var props = require('../chat-container-messages-list/props.js');
 var props$1 = require('../chat-composer/props.js');
 
 const defaultProps = {
   messagesListProps: props.defaultProps,
   composerProps: props$1.defaultComposerPros,
-  actionRef: lodash.noop,
+  actionRef: undefined,
   autoScroll: false,
   device: 'desktop',
   isLoading: undefined,
@@ -18,26 +19,30 @@ const defaultProps = {
   getMoreMessages: lodash.noop,
   bannerPosition: undefined,
   bannerProps: {
+    type: DSBanner.BANNER_TYPES.INFO,
     label: 'Unread Messages',
     viewLabel: 'View',
     onView: lodash.noop,
     onClose: lodash.noop
   },
   sendingMessages: undefined,
-  sendingText: 'Sending'
+  sendingText: 'Sending',
+  ariaLabel: 'Chat window'
 };
 const containerProps = {
-  messagesListProps: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object).description('ChatMessageList props "messages" / "onScrollEnds"').defaultValue(defaultProps.messagesListProps),
-  composerProps: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object).description('Composer configuration').defaultValue(defaultProps.composerProps),
+  messagesListProps: reactDesc.PropTypes.object.description('ChatMessageList props "messages" / "onScrollEnds"').defaultValue(defaultProps.messagesListProps),
+  composerProps: reactDesc.PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),
   autoScroll: reactDesc.PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),
   device: reactDesc.PropTypes.string.description('Option to render mobile or desktop style composer').defaultValue(defaultProps.device),
   isLoading: reactDesc.PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Loading messages indicator at the `top` or `bottom` of the container'),
   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.arrayOf(reactDesc.PropTypes.object).description('Banner configuration').defaultValue(defaultProps.bannerProps),
-  sendingMessages: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, 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)
+  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),
+  ariaLabel: reactDesc.PropTypes.string.description('Aria Label description for chat container').defaultValue(defaultProps.ariaLabel)
 };
 
 exports.containerProps = containerProps;

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

@@ -13,15 +13,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const CONTAINER_WIDTH = 300;
-const StyledChatContainerContent = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+const StyledChatContainerContent = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-d732wo-0"
 })(["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({
+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;' : '');
-const MobileStyledChatContainerContent = /*#__PURE__*/styled__default['default'](StyledChatContainerContent).withConfig({
+})(["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__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);
+})(["", ",", "{font-size:16px;}", "{font-size:13px;}", "{background-color:#fff;box-shadow:-0 1px 3px rgba(53,60,70,0.8);}", ",", "{font-size:16px;text-align:left;}", "{font-size:13px;}", "{font-size:16px;}", "{font-size:16px;}"], styled$1.StyledTitleLeftBubble, styled$1.StyleBodyWrapper, styled$1.StyledTitleRightBubble, style.Wrapper, style.Title, style.Message, style.Time, styled$2.StyledComposerInput, StyledIndicatorContainer);
 
 exports.CONTAINER_WIDTH = CONTAINER_WIDTH;
 exports.MobileStyledChatContainerContent = MobileStyledChatContainerContent;

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 {
@@ -18,19 +18,19 @@ const ChatContainerHeader = props => {
     floating,
     children
   } = props;
-  return /*#__PURE__*/_jsx__default['default'](styled.StyledChatContainerContentHeader, {
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentHeader, {
     alignItems: "center",
     cols: ['minmax(calc(100% - 64px), 1fr)', children ? 'auto' : '0px'],
     floating: floating,
     role: "heading"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](styled.StyledChatContainerContentHeaderLabel, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentHeaderLabel, {
     "data-testid": "chat-container-header-title",
     pl: "xxs",
     pr: "xxs"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+  }, 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'),
+  })), /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentHeaderActions, {
+    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;