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

package/cjs/parts/bubble/ChatBubble.js

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

package/cjs/parts/bubble/ChatBubbleArrow.js

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

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

@@ -5,27 +5,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 
 const throwError = message => {
-  throw new Error(`Bubble:: ${message}
-  `);
+  throw new Error("Bubble:: ".concat(message, "\n  "));
 };
 
 const useValidateProps = (props, schema) => {
   dsPropsHelpers.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/cjs/parts/bubble/props.js

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

package/cjs/parts/bubble/styled.js

@@ -30,7 +30,7 @@ const StyleBodyWrapper = /*#__PURE__*/styled__default["default"].div.withConfig(
 })(["font-size:13px;font-weight:400;line-height:15px;min-height:18px;padding:0px 10px 8px 10px;"]);
 const StyleErrorMessage = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-fe8e9o-5"
-})(["font-size:12px;font-weight:400;padding-top:", ";padding-bottom:", ";color:", ";align-items:flex-end;justify-content:center;text-align:right;line-height:15px;svg{fill:", ";}a{font-size:12px;color:", ";}.em-ds-icon{margin-left:8px;}"], props => props.theme.space.xxxs, props => props.theme.space.xxxs, props => props.theme.colors.danger[900], props => props.theme.colors.danger[900], props => props.theme.colors.danger[900]);
+})(["font-size:12px;font-weight:400;padding-top:", ";color:", ";align-items:flex-end;justify-content:center;text-align:right;line-height:15px;svg{fill:", ";}a{font-size:12px;color:", ";}.em-ds-icon{margin-left:8px;}"], props => props.theme.space.xxxs, props => props.theme.colors.danger[900], props => props.theme.colors.danger[900], props => props.theme.colors.danger[900]);
 const StyleHelpMessage = /*#__PURE__*/styled__default["default"](StyleErrorMessage).withConfig({
   componentId: "sc-fe8e9o-6"
 })(["font-size:12px;line-height:15px;color:", ";svg{fill:", ";}a{font-size:12px;color:", ";}"], props => props.theme.colors.neutral[500], props => props.theme.colors.danger[500], props => props.theme.colors.danger[500]); // bubble sender/ recipient
@@ -40,36 +40,7 @@ const StyledBubbleArrow = /*#__PURE__*/styled__default["default"].div.withConfig
 })(["display:block;content:'';position:absolute;bottom:10px;height:15px;"]);
 const StyledColoredBubble = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-fe8e9o-8"
-})(["min-width:224px;border-radius:10px;position:relative;", ""], props$1 => props$1.type === props.BUBBLE_TYPES.SENDER ? `
-        border: 1px solid ${props$1.theme.colors.brand['700']};
-        background: ${props$1.theme.colors.brand[600]};
-        color: ${props$1.theme.colors.neutral['000']};
-        ${StyledBubbleArrow}{            
-            right: -9px;
-            bottom: 6px;
-            svg{
-                fill: ${props$1.theme.colors.brand[600]};
-            }
-        }
-
-        a {
-          color: #FFF;
-        }
-
-    ` : `
-        box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);
-        background: ${props$1.theme.colors.neutral['000']};
-        color: ${props$1.theme.colors.neutral[700]};
-
-        ${StyledBubbleArrow}{            
-            left: -11px;
-            bottom: 6px;
-            svg{
-                fill: ${props$1.theme.colors.neutral['000']};
-            }
-        }
-
-    `);
+})(["min-width:224px;border-radius:10px;position:relative;", ""], props$1 => props$1.type === props.BUBBLE_TYPES.SENDER ? "\n        border: 1px solid ".concat(props$1.theme.colors.brand['700'], ";\n        background: ").concat(props$1.theme.colors.brand[600], ";\n        color: ").concat(props$1.theme.colors.neutral['000'], ";\n        ").concat(StyledBubbleArrow, "{            \n            right: -9px;\n            bottom: 6px;\n            svg{\n                fill: ").concat(props$1.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$1.theme.colors.neutral['000'], ";\n        color: ").concat(props$1.theme.colors.neutral[700], ";\n\n        ").concat(StyledBubbleArrow, "{            \n            left: -11px;\n            bottom: 6px;\n            svg{\n                fill: ").concat(props$1.theme.colors.neutral['000'], ";\n            }\n        }\n\n    "));
 
 exports.StyleBodyWrapper = StyleBodyWrapper;
 exports.StyleErrorMessage = StyleErrorMessage;

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var reactDesc = require('react-desc');
 
 const propTypes = {
-  title: reactDesc.PropTypes.string.isRequired.description(`Card's title`),
-  content: reactDesc.PropTypes.string.description(`Card's content`),
+  title: reactDesc.PropTypes.string.isRequired.description("Card's title"),
+  content: reactDesc.PropTypes.string.description("Card's content"),
   time: reactDesc.PropTypes.string.description('Time'),
   rightAddon: reactDesc.PropTypes.element.description('Right addon, badge or icon')
 };

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

@@ -5,10 +5,16 @@ 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');
@@ -19,7 +25,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PaperAirplane__default = /*#__PURE__*/_interopDefaultLegacy(PaperAirplane);
 
 var _PaperAirplane, _Grid;
 
@@ -38,9 +43,11 @@ const ChatComposer = props => {
     onSend,
     onFocus,
     onBlur,
+    onKeyDown,
     maxHeight = 300,
     placeholder,
     inputMaxLength,
+    maxLengthMessage,
     buttonDisabled,
     dataTestid,
     actionRef
@@ -58,7 +65,7 @@ const ChatComposer = props => {
     onResize(newHeight);
     setHeight(newHeight);
     setShowScroll(((_inputSize$current3 = inputSize.current) === null || _inputSize$current3 === void 0 ? void 0 : _inputSize$current3.scrollHeight) - ((_inputSize$current4 = inputSize.current) === null || _inputSize$current4 === void 0 ? void 0 : _inputSize$current4.clientHeight) > 5);
-  }, [inputValue, internalMaxHeight]);
+  }, [inputValue, internalMaxHeight, onResize]);
   React__default["default"].useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.focusToComposer = () => {
@@ -69,7 +76,7 @@ const ChatComposer = props => {
         inputSend.current.focus();
       };
     }
-  }, [actionRef.current]);
+  }, [actionRef]);
   const handleChange = React__default["default"].useCallback(e => {
     onChange(e.target.value);
   }, [onChange]);
@@ -81,7 +88,7 @@ const ChatComposer = props => {
   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, {
     cols: ['1fr', '24px'],
@@ -95,6 +102,7 @@ const ChatComposer = props => {
     value: inputValue,
     onFocus: onFocus,
     onBlur: onBlur,
+    onKeyDown: onKeyDown,
     placeholder: placeholder,
     "aria-label": "Message to send",
     "data-testid": "chat-composer-textarea"
@@ -103,7 +111,7 @@ const ChatComposer = props => {
     alignItems: "center"
   }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledComposerButton, {
     buttonType: "text",
-    icon: _PaperAirplane || (_PaperAirplane = /*#__PURE__*/_jsx__default["default"](PaperAirplane__default["default"], {
+    icon: _PaperAirplane || (_PaperAirplane = /*#__PURE__*/_jsx__default["default"](dsIcons.PaperAirplane, {
       width: 18,
       height: 18
     })),
@@ -138,8 +146,8 @@ const ChatComposer = props => {
   }, void 0, inputMaxLength && hasError ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/_jsx__default["default"](styled.StyledCounterErrorA11y, {
       role: "alert"
-    }, void 0, "You have exceeded the character limit by ", inputLength - inputMaxLength), "Please limit to less than ", inputMaxLength, " characters.", ' ']
-  }) : '', inputMaxLength ? `${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/props.js

@@ -13,8 +13,10 @@ const defaultComposerPros = {
   onSend: lodash.noop,
   onFocus: lodash.noop,
   onBlur: lodash.noop,
+  onKeyDown: lodash.noop,
   maxHeight: 0,
   inputMaxLength: undefined,
+  maxLengthMessage: undefined,
   buttonDisabled: false,
   dataTestid: 'ds-chat-composer',
   actionRef: lodash.noop
@@ -22,26 +24,18 @@ const defaultComposerPros = {
 const composerProps = {
   placeholder: reactDesc.PropTypes.string.description('Input Placeholder').defaultValue(defaultComposerPros.placeholder),
   inputValue: reactDesc.PropTypes.string.description('Input value').defaultValue(defaultComposerPros.inputValue),
+  maxLengthMessage: reactDesc.PropTypes.string.description('Max length message').defaultValue(defaultComposerPros.maxLengthMessage),
   onChange: reactDesc.PropTypes.func.description('Called when the user types').defaultValue(defaultComposerPros.onChange),
   onResize: reactDesc.PropTypes.func.description('Called the input changes his height').defaultValue(defaultComposerPros.onResize),
   onSend: reactDesc.PropTypes.func.description('Called when the click send').defaultValue(defaultComposerPros.onSend),
   onFocus: reactDesc.PropTypes.func.description('Input focus').defaultValue(defaultComposerPros.onFocus),
   onBlur: reactDesc.PropTypes.func.description('Input blur').defaultValue(defaultComposerPros.onBlur),
+  onKeyDown: reactDesc.PropTypes.func.description('Input on key down').defaultValue(defaultComposerPros.onKeyDown),
   maxHeight: reactDesc.PropTypes.number.description('Max height of the composer. Use 0 for no limit').defaultValue(defaultComposerPros.onBlur),
   inputMaxLength: reactDesc.PropTypes.number.description('Max length of the composer. `undefined` for no limit').defaultValue(defaultComposerPros.inputMaxLength),
   buttonDisabled: reactDesc.PropTypes.bool.description('Control the disabled for the send button').defaultValue(defaultComposerPros.buttonDisabled),
   dataTestid: reactDesc.PropTypes.string.description('Data testid').defaultValue(defaultComposerPros.placeholder),
-  actionRef: reactDesc.PropTypes.object.description(`Reference: 
-        { 
-          scrollToIndex: (n: number) => void,
-          getMessagesInView: () => number[],
-          focusToIndex: (n: number) => void,
-          focusToList: () => void,
-          focusToComposer: () => void,
-          focusToSend: () => void,
-        }
-        
-      `).defaultValue(defaultComposerPros.actionRef)
+  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,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
 var dsGrid = require('@elliemae/ds-grid');
-var dsButton = require('@elliemae/ds-button');
+var DSButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -16,13 +16,13 @@ const StyledChatContainerContentComposer = /*#__PURE__*/styled__default["default
 })(["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({
   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.3s;&:focus{outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px #8cc2ed;border-radius:2px;}"], props => props.theme.space.xxs, props => typeof props.height === 'number' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
+const StyledComposerButton = /*#__PURE__*/styled__default["default"](DSButton.DSButton).withConfig({
   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({
   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__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,12 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var lodash = require('lodash');
 var reactDesc = require('react-desc');
-var DSIndeterminateProgressIndicator = require('@elliemae/ds-basic/IndeterminateProgressIndicator');
+var DSIndeterminateProgressIndicator = require('@elliemae/ds-indeterminate-progress-indicator');
 var DSBanner = require('@elliemae/ds-banner');
 var ChatContainerComposer = require('../chat-composer/ChatContainerComposer.js');
 var ChatContainerMessagesList = require('../chat-container-messages-list/ChatContainerMessagesList.js');
@@ -42,7 +47,8 @@ const ChatContainer = props => {
     messagesListProps,
     composerProps,
     composerProps: {
-      onResize: onComposerResize
+      onResize: onComposerResize,
+      onKeyDown: onComposerKeyDown
     },
     actionRef,
     autoScroll,
@@ -51,6 +57,10 @@ const ChatContainer = props => {
     hasMoreItems,
     getMoreMessages
   } = props;
+  const bannerRef = React__default["default"].useRef({
+    focusOnWrapper: lodash.noop,
+    focusOnLink: lodash.noop
+  });
   const containerRef = React__default["default"].useRef();
   const listRef = React__default["default"].useRef({
     scrollToIndex: lodash.noop
@@ -65,6 +75,29 @@ const ChatContainer = props => {
     }
   }, [onComposerResize, messagesListProps.messages, autoScroll]);
   const Container = device === 'desktop' ? styled.StyledChatContainerContent : styled.MobileStyledChatContainerContent;
+  const handleTabs = React__default["default"].useCallback(e => {
+    if (onComposerKeyDown) onComposerKeyDown(e);else {
+      const ref = actionRef || listRef;
+
+      if (e.shiftKey && e.key === 'Tab') {
+        e.preventDefault();
+
+        if (['top', 'bottom'].includes(bannerPosition)) {
+          bannerRef.current.focusOnWrapper();
+        } else {
+          const last = ref.current.getMessagesInView().pop();
+          ref.current.focusToIndexWithoutScroll(last);
+        }
+      }
+    }
+  }, [actionRef, onComposerKeyDown, bannerPosition]); // Map actions
+
+  React__default["default"].useEffect(() => {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;
+      actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;
+    }
+  }, [actionRef]);
   return /*#__PURE__*/jsxRuntime.jsxs(Container, {
     rows: ['minmax(0, 1fr)', 'auto'],
     ref: containerRef,
@@ -72,7 +105,8 @@ const ChatContainer = props => {
     "aria-label": "chat window",
     children: [/*#__PURE__*/_jsx__default["default"]("div", {
       style: {
-        position: 'relative'
+        position: 'relative',
+        overflow: 'hidden'
       }
     }, void 0, /*#__PURE__*/jsxRuntime.jsx(ChatContainerMessagesList.ChatContainerMessagesList, _objectSpread(_objectSpread({}, messagesListProps), {}, {
       actionRef: actionRef || listRef,
@@ -80,13 +114,17 @@ const ChatContainer = props => {
       hasMoreItems: hasMoreItems,
       getMoreMessages: getMoreMessages,
       sendingMessages: sendingMessages,
-      sendingText: sendingText
+      sendingText: sendingText,
+      bannerPosition: bannerPosition,
+      bannerRef: bannerRef
     })), ['top', 'bottom'].includes(isLoading) ? /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
-      isLoading: isLoading
+      isLoading: isLoading,
+      "data-testid": "ds-chat-loading-indicator"
     }, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx__default["default"](DSIndeterminateProgressIndicator__default["default"], {
       processing: true,
       title: "Loading"
-    }))) : null, ['top', 'bottom'].includes(bannerPosition) ? /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
+    }))) : null, /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
+      linear: true,
       isLoading: bannerPosition
     }, void 0, /*#__PURE__*/_jsx__default["default"](DSBanner__default["default"], {
       showCloseButton: true,
@@ -100,15 +138,18 @@ const ChatContainer = props => {
       },
       onClose: bannerProps.onClose,
       isOpen: true,
-      type: DSBanner.BANNER_TYPES.INFO
-    })) : null, sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
+      type: bannerProps.type || DSBanner.BANNER_TYPES.INFO,
+      actionRef: bannerRef
+    })), sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
       isLoading: "bottom",
-      linear: true
+      linear: true,
+      "data-testid": "ds-chat-loading-indicator"
     }, void 0, /*#__PURE__*/_jsx__default["default"](DSIndeterminateProgressIndicator__default["default"], {
       processing: true,
       title: "Loading",
       lineOnly: true
     }))) : null), /*#__PURE__*/jsxRuntime.jsx(ChatContainerComposer.ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
+      onKeyDown: handleTabs,
       onResize: onResize,
       maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,
       actionRef: actionRef || listRef

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

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

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

@@ -18,7 +18,7 @@ const StyledChatContainerContent = /*#__PURE__*/styled__default["default"](dsGri
 })(["height:100%;min-width:", "px;overflow:hidden;background:", ";position:relative;"], CONTAINER_WIDTH, props => props.theme.colors.neutral['050']);
 const StyledIndicatorContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-d732wo-1"
-})(["position:absolute;width:calc(100% + ", ");padding:", ";left:-", ";right:-", ";background:", ";", " ", ""], props => props.theme.space.xxs, props => !props.linear ? props.theme.space.xxs : 0, props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.theme.colors.neutral['000'], props => props.isLoading === 'top' ? 'top: 0;' : '', props => props.isLoading === 'bottom' ? 'bottom: 0;' : '');
+})(["transition:0.4s ease-in-out;position:absolute;visibility:hidden;pointer-events:none;width:100%;padding:0 ", ";left:0;right:0;background:", ";", " ", ""], props => !props.linear ? props.theme.space.xxs : 0, props => props.theme.colors.neutral['000'], props => props.isLoading === 'top' ? "\n  top: -41px;\n  transform: translate(0, 41px);\n  visibility: visible;\n  pointer-events: auto\n  " : '', props => props.isLoading === 'bottom' ? "\n  bottom: -41px;\n  transform: translate(0, -41px);\n  visibility: visible;\n  pointer-events: auto;\n  " : '');
 const MobileStyledChatContainerContent = /*#__PURE__*/styled__default["default"](StyledChatContainerContent).withConfig({
   componentId: "sc-d732wo-2"
 })(["", ",", "{font-size:16px;}", "{font-size:13px;}", "{background-color:#fff;box-shadow:-0 1px 3px rgba(53,60,70,0.8);}", ",", "{font-size:16px;text-align:left;}", "{font-size:13px;}", "{font-size:16px;}"], styled$1.StyledTitleLeftBubble, styled$1.StyleBodyWrapper, styled$1.StyledTitleRightBubble, style.Wrapper, style.Title, style.Message, style.Time, styled$2.StyledComposerInput);