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

package/cjs/ChatDataTestids.js

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

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-chat-bubble"
+  }), /*#__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-chat-bubble"
+  }), /*#__PURE__*/_jsx__default["default"]("use", {
+    fill: "#FFFFFF",
+    fillRule: "evenodd",
+    xlinkHref: "#path-chat-bubble"
+  }))))) : _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.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({
   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);"]);