@elliemae/ds-chat 2.4.2-rc.1 → 2.4.2-rc.13

package/cjs/exported-related/bubble/ChatBubble.js

@@ -33,7 +33,7 @@ const ChatBubble = props$1 => {
   } = propsWithDefault;
   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-".concat(dsId)
+    "data-testid": `ds-chat-bubble-${dsId}`
   }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledColoredBubble, {
     type: type
   }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledTitleBubble, {
@@ -43,22 +43,22 @@ const ChatBubble = props$1 => {
     className: "sr-only"
   }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledTitleLeftBubble, {
     alignItems: "center",
-    "data-testid": "chat-bubble-title-".concat(dsId)
+    "data-testid": `chat-bubble-title-${dsId}`
   }, void 0, title), /*#__PURE__*/_jsx__default["default"](styled.StyledTitleRightBubble, {
     alignItems: "center",
     type: type,
-    "data-testid": "chat-bubble-time-".concat(dsId)
+    "data-testid": `chat-bubble-time-${dsId}`
   }, void 0, time)), /*#__PURE__*/_jsx__default["default"](styled.StyleBodyWrapper, {
-    "data-testid": "chat-bubble-body-".concat(dsId)
-  }, void 0, bodyParts.map((item, index) => /*#__PURE__*/_jsx__default["default"](React__default["default"].Fragment, {}, "".concat(item, "-").concat(dsId), item, index < bodyParts.length - 1 ? _br || (_br = /*#__PURE__*/_jsx__default["default"]("br", {})) : null))), /*#__PURE__*/_jsx__default["default"](ChatBubbleArrow.ChatBubbleArrow, {
+    "data-testid": `chat-bubble-body-${dsId}`
+  }, void 0, bodyParts.map((item, index) => /*#__PURE__*/_jsx__default["default"](React__default["default"].Fragment, {}, `${item}-${dsId}`, 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-".concat(dsId),
+    "data-testid": `chat-bubble-error-message-${dsId}`,
     p: "xxs",
     gutter: "xxs",
     cols: [1, 'auto']
   }, 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),
+    "data-testid": `chat-bubble-help-message-${dsId}`,
     p: "xxs",
     gutter: "xxs",
     cols: [1, 'auto']

package/cjs/exported-related/bubble/styled.js

@@ -40,7 +40,36 @@ 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-57v3aa-8"
-})(["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    "));
+})(["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']};
+            }
+        }
+
+    `);
 
 exports.StyleBodyWrapper = StyleBodyWrapper;
 exports.StyleErrorMessage = StyleErrorMessage;

package/cjs/exported-related/chat-card/props.js

@@ -12,8 +12,8 @@ const defaultProps = {
   rightAddon: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {})
 };
 const propTypes = {
-  title: dsPropsHelpers.PropTypes.string.isRequired.description("Card's title"),
-  content: dsPropsHelpers.PropTypes.string.description("Card's content"),
+  title: dsPropsHelpers.PropTypes.string.isRequired.description(`Card's title`),
+  content: dsPropsHelpers.PropTypes.string.description(`Card's content`),
   time: dsPropsHelpers.PropTypes.string.description('Time'),
   rightAddon: dsPropsHelpers.PropTypes.element.description('Right addon, badge or icon')
 };

package/cjs/exported-related/chat-container-header/props.js

@@ -8,7 +8,7 @@ const defaultProps = {
   title: ''
 };
 const propTypes = {
-  title: dsPropsHelpers.PropTypes.string.isRequired.description("Card's title"),
+  title: dsPropsHelpers.PropTypes.string.isRequired.description(`Card's title`),
   children: dsPropsHelpers.PropTypes.node.description('Childrens')
 };
 

package/cjs/exported-related/chat-sidebar/SideBarChat.js

@@ -67,9 +67,7 @@ const SideBarChat = props$1 => {
     if (ref) listRef[ref.dataset.key] = ref;
   }, [listRef]);
   React__default["default"].useEffect(() => {
-    var _actionRef$current;
-
-    if ((_actionRef$current = actionRef.current) !== null && _actionRef$current !== void 0 && _actionRef$current.listRef) {
+    if (actionRef.current?.listRef) {
       actionRef.current.listRef = listRef;
     }
   }, [sidebarItems, expanded, actionRef, listRef]);

package/cjs/exported-related/chat-sidebar/props.js

@@ -32,7 +32,11 @@ const chatSidebarProps = {
   onHeaderExpand: reactDesc.PropTypes.func.description('The function to call when the chat is opened via the header').defaultValue(defaultProps.onHeaderExpand),
   onHeaderClose: reactDesc.PropTypes.func.description('The function to call when the chat is closed via the header').defaultValue(defaultProps.onHeaderClose),
   footerButtonExtraProps: reactDesc.PropTypes.object.description('Expand/collapse footer button extra props').defaultValue(defaultProps.footerButtonExtraProps),
-  actionRef: reactDesc.PropTypes.object.description("Action ref for sidebar\n  {\n    listRef: references to Tiles\n  }\n  ").defaultValue(defaultProps.actionRef)
+  actionRef: reactDesc.PropTypes.object.description(`Action ref for sidebar
+  {
+    listRef: references to Tiles
+  }
+  `).defaultValue(defaultProps.actionRef)
 };
 
 exports.chatSidebarProps = chatSidebarProps;

package/cjs/exported-related/chat-sidebar/sidebar-button/SidebarButton.js

@@ -40,7 +40,7 @@ const SidebarButton = _ref => {
     if (dsId) onClick(dsId);
   }, [onClick, dsId]);
   return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledSidebarButton, _objectSpread(_objectSpread({
-    "data-testid": "sidebar-button-".concat(dsId),
+    "data-testid": `sidebar-button-${dsId}`,
     onClick: handleClick
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx__default["default"](styled.StyledSidebarButtonIcon, {

package/cjs/exported-related/grid-influencer/styled.js

@@ -12,10 +12,14 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledChatContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-15373cc-0"
-})(["height:100%;width:", ";background:", ";box-shadow:-1px 0 0 0 ", ";transition:width ", " 350ms;"], props => props.expanded ? "".concat(props.expandedWidth, "px") : "".concat(styled$1.MIN_WIDTH_SIDEBAR, "px"), props => props.theme.colors.neutral['050'], props => props.theme.colors.neutral[100], props => props.expanded ? 'ease-out' : 'ease-in');
+})(["height:100%;width:", ";background:", ";box-shadow:-1px 0 0 0 ", ";transition:width ", " 350ms;"], props => props.expanded ? `${props.expandedWidth}px` : `${styled$1.MIN_WIDTH_SIDEBAR}px`, props => props.theme.colors.neutral['050'], props => props.theme.colors.neutral[100], props => props.expanded ? 'ease-out' : 'ease-in');
 const StyledChatContainerContent = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-15373cc-1"
-})(["height:100%;overflow:hidden;background:", ";", ""], props => props.theme.colors.neutral['050'], props => props.floating ? "\n  width: ".concat(props.expandedWidth, "px;\n") : "\n  width: ".concat(props.expandedWidth - styled$1.MIN_WIDTH_SIDEBAR, "px;\n"));
+})(["height:100%;overflow:hidden;background:", ";", ""], props => props.theme.colors.neutral['050'], props => props.floating ? `
+  width: ${props.expandedWidth}px;
+` : `
+  width: ${props.expandedWidth - styled$1.MIN_WIDTH_SIDEBAR}px;
+`);
 
 exports.StyledChatContainer = StyledChatContainer;
 exports.StyledChatContainerContent = StyledChatContainerContent;

package/cjs/exported-related/message-delimiter/styled.js

@@ -17,7 +17,7 @@ const Line = /*#__PURE__*/styled__default["default"].span.withConfig({
 })(["border-top:1px solid ", ";"], props => props.theme.colors.neutral['400']);
 const Text = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-1oelxl4-2"
-})(["color:", ";font-size:", ";font-weight:", ";margin:", ";"], props => props.theme.colors.neutral['600'], props => props.size === 's' ? '12px' : '14px', props => props.theme.fontWeights.semibold, props => typeof props.verticalMargin === 'number' ? "".concat(props.verticalMargin, "px 8px") : "".concat(props.verticalMargin, " 8px"));
+})(["color:", ";font-size:", ";font-weight:", ";margin:", ";"], props => props.theme.colors.neutral['600'], props => props.size === 's' ? '12px' : '14px', props => props.theme.fontWeights.semibold, props => typeof props.verticalMargin === 'number' ? `${props.verticalMargin}px 8px` : `${props.verticalMargin} 8px`);
 
 exports.Line = Line;
 exports.Text = Text;

package/cjs/exported-related/tile-button/TileButton.js

@@ -62,7 +62,7 @@ const TileButton = props$1 => {
   })), badge ? /*#__PURE__*/_jsx__default["default"](styled.StyledStatusBadge, {
     badgeColor: badgeColor,
     badgePosition: badgePosition,
-    "data-testid": "tile-badge-".concat(dsId)
+    "data-testid": `tile-badge-${dsId}`
   }) : null)), !isHeader ? /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     width: "100%",
     justifyContent: "center"
@@ -70,7 +70,7 @@ const TileButton = props$1 => {
   const Btn = React__default["default"].useMemo(() => /*#__PURE__*/jsxRuntime.jsx(styled.StyledTileButton, {
     isHeader: isHeader,
     value: dsId,
-    "data-testid": "tile-button-".concat(dsId),
+    "data-testid": `tile-button-${dsId}`,
     "data-key": dsId,
     onClick: handleClick,
     onFocus: onFocus,
@@ -88,11 +88,11 @@ const TileButton = props$1 => {
     }, void 0, _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, MainContent)), _StyledWrapperLeftBor || (_StyledWrapperLeftBor = /*#__PURE__*/_jsx__default["default"](styled.StyledWrapperLeftBorder, {})), showClose && !disabled ? /*#__PURE__*/_jsx__default["default"](styled.CloseButton, {
       onClick: onClose,
       value: dsId,
-      "data-testid": "tile-close-btn-".concat(dsId)
+      "data-testid": `tile-close-btn-${dsId}`
     }, void 0, _CloseXsmall || (_CloseXsmall = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {}))) : null)
   }, dsId), [MainContent, ariaLabel, badgeColor, badgePosition, disabled, dsId, handleClick, isHeader, onBlur, onClose, onFocus, selected, showClose, innerRef]);
   return title && !disableTooltip ? /*#__PURE__*/_jsx__default["default"](styled.StyledTooltipV3ButtonWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTooltip.DSTooltipV3, {
-    id: "ds-chat-tile-tooltip-button-".concat(dsId),
+    id: `ds-chat-tile-tooltip-button-${dsId}`,
     text: title,
     startPlacementPreference: tooltipPlacement
   }, void 0, Btn)) : Btn;

package/cjs/exported-related/tile-button/styled.js

@@ -2,17 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
 var dsGrid = require('@elliemae/ds-grid');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject;
+/* eslint-disable indent */
 const MIN_WIDTH_SIDEBAR = 48;
 const BUTTON_SIDEBAR_HEIGHT = 48; // Buttons
 
@@ -62,7 +60,7 @@ const StyledTooltipV3ButtonWrapper = /*#__PURE__*/styled__default["default"].div
 })(["height:", "px;width:", "px;"], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR);
 const StyledTileButton = /*#__PURE__*/styled__default["default"].button.withConfig({
   componentId: "sc-b69sbu-7"
-})(["outline:none;background:transparent;height:", "px;width:", "px;position:relative;padding:0;border:none;cursor:pointer;border-bottom:", ";&:focus,&:hover,&:active,&:disabled{background:", ";& ", "{border:2px solid ", ";margin-top:-2px;", ";}}&:focus,&:hover{& ", "{background:", ";}& ", "{color:", ";}& svg{fill:", ";}}&:active:not(:disabled){background:", ";& ", "{background:", ";}& ", "{color:", ";font-weight:600;}& svg{fill:", ";}& ", "{border:2px solid ", ";}}&:disabled{background:", ";", "{background:", ";}& ", "{background:", ";border:2px solid ", ";}", "{svg{fill:", ";}}", "{color:", ";}}", ""], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR, props => props.isHeader ? "1px solid  ".concat(props.theme.colors.neutral['200']) : 'none', props => props.theme.colors.neutral['080'], StyledStatusBadge, props => props.theme.colors.neutral['080'], props => {
+})(["outline:none;background:transparent;height:", "px;width:", "px;position:relative;padding:0;border:none;cursor:pointer;border-bottom:", ";&:focus,&:hover,&:active,&:disabled{background:", ";& ", "{border:2px solid ", ";margin-top:-2px;", ";}}&:focus,&:hover{& ", "{background:", ";}& ", "{color:", ";}& svg{fill:", ";}}&:active:not(:disabled){background:", ";& ", "{background:", ";}& ", "{color:", ";font-weight:600;}& svg{fill:", ";}& ", "{border:2px solid ", ";}}&:disabled{background:", ";", "{background:", ";}& ", "{background:", ";border:2px solid ", ";}", "{svg{fill:", ";}}", "{color:", ";}}", ""], BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR, props => props.isHeader ? `1px solid  ${props.theme.colors.neutral['200']}` : 'none', props => props.theme.colors.neutral['080'], StyledStatusBadge, props => props.theme.colors.neutral['080'], props => {
   switch (props.badgePosition) {
     case 'left':
       return 'margin-left: -2px;';
@@ -75,7 +73,11 @@ const StyledTileButton = /*#__PURE__*/styled__default["default"].button.withConf
   }
 }, StyledWrapperLeftBorder, props => props.theme.colors.brand[800], StyledTileButtonLabel, props => props.theme.colors.neutral[600], props => props.theme.colors.brand[800], props => props.theme.colors.neutral['050'], StyledWrapperLeftBorder, props => props.theme.colors.brand[600], StyledTileButtonLabel, props => props.theme.colors.neutral[600], props => props.theme.colors.brand[600], StyledStatusBadge, props => props.theme.colors.neutral['050'], props => props.theme.colors.neutral['080'], StyledWrapperLeftBorder, props => props.theme.colors.neutral['400'], StyledStatusBadge, props => props.theme.colors.neutral['500'], props => props.theme.colors.neutral['080'], StyledTileButtonIcon, props => props.theme.colors.neutral[400], StyledTileButtonLabel, props => props.theme.colors.neutral[400], props => {
   if (props.selected) {
-    return dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n        & ", " {\n          background: ", ";\n        }\n      "])), StyledWrapperLeftBorder, nestedProps => nestedProps.theme.colors.brand[600]);
+    return dsSystem.css`
+        & ${StyledWrapperLeftBorder} {
+          background: ${nestedProps => nestedProps.theme.colors.brand[600]};
+        }
+      `;
   }
 
   return '';

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

@@ -2,14 +2,13 @@
 
 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.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 _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var dsGrid = require('@elliemae/ds-grid');
 var dsIcons = require('@elliemae/ds-icons');
@@ -31,8 +30,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 const ChatComposer = props => {
-  var _input$current;
-
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.defaultPropsComposer);
   dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.ChatComposerPropTypes);
   const {
@@ -60,12 +57,10 @@ const ChatComposer = props => {
   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;
+    const newHeight = inputSize.current?.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;
     if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT) 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);
+    setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);
   }, [inputValue, internalMaxHeight, height, onResize]);
   React__default["default"].useEffect(() => {
     if (actionRef && actionRef.current) {
@@ -89,7 +84,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: "".concat(maxHeight, "px"),
+    maxHeight: `${maxHeight}px`,
     "data-testid": dataTestid
   }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: ['1fr', '24px'],
@@ -135,7 +130,7 @@ const ChatComposer = props => {
       pointerEvents: 'none',
       position: 'absolute',
       top: 0,
-      width: (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.clientWidth
+      width: input.current?.clientWidth
     },
     onChange: handleChange,
     value: inputValue
@@ -151,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, ariaMaxLengthMessage || "You have entered ".concat(inputLength, " characters and have exceeded the limit by ").concat(inputLength - inputMaxLength, ". Please limit to less than ").concat(inputMaxLength, " characters. ")), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
-  }) : '', inputMaxLength ? " ".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))));
+    }, void 0, ariaMaxLengthMessage || `You have entered ${inputLength} characters and have exceeded the limit by ${inputLength - inputMaxLength}. Please limit to less than ${inputMaxLength} characters. `), maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `]
+  }) : '', inputMaxLength ? ` ${inputLength} / ${inputMaxLength}` : ''), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))));
 };
 
 const ChatComposerWithSchema = dsPropsHelpers.describe(ChatComposer);

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

@@ -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.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]);
+})(["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' ? `${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:".concat(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:${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

@@ -35,8 +35,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 const ChatContainer = props => {
-  var _messagesListProps$me2, _containerRef$current;
-
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.defaultProps);
   dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.ChatContainerPropTypes);
   const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault);
@@ -84,23 +82,19 @@ const ChatContainer = props => {
       const ref = actionRef || listRef;
 
       if (e.shiftKey && e.key === 'Tab') {
-        var _messagesListProps$me;
-
-        if (((_messagesListProps$me = messagesListProps.messages) === null || _messagesListProps$me === void 0 ? void 0 : _messagesListProps$me.length) > 0) {
+        if (messagesListProps.messages?.length > 0) {
           e.preventDefault();
 
           if (['top', 'bottom'].includes(bannerPosition)) {
             bannerRef.current.focusOnWrapper();
           } else {
-            var _ref$current;
-
             const last = ref.current.getMessagesInView().pop();
-            (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focusToIndexWithoutScroll(last);
+            ref.current?.focusToIndexWithoutScroll(last);
           }
         }
       }
     }
-  }, [actionRef, onComposerKeyDown, bannerPosition, (_messagesListProps$me2 = messagesListProps.messages) === null || _messagesListProps$me2 === void 0 ? void 0 : _messagesListProps$me2.length]); // Map actions
+  }, [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length]); // Map actions
 
   React__default["default"].useEffect(() => {
     if (actionRef && actionRef.current) {
@@ -137,17 +131,17 @@ const ChatContainer = props => {
       isLoading: bannerPosition
     }, void 0, /*#__PURE__*/_jsx__default["default"](DSBanner__default["default"], {
       showCloseButton: true,
-      label: (bannerProps === null || bannerProps === void 0 ? void 0 : bannerProps.label) || 'Unread messages',
+      label: bannerProps?.label || 'Unread messages',
       containerProps: {
         id: 'ds-chat-banner'
       },
       actionLink: {
-        label: (bannerProps === null || bannerProps === void 0 ? void 0 : bannerProps.viewLabel) || 'View',
-        onClick: bannerProps === null || bannerProps === void 0 ? void 0 : bannerProps.onView
+        label: bannerProps?.viewLabel || 'View',
+        onClick: bannerProps?.onView
       },
-      onClose: bannerProps === null || bannerProps === void 0 ? void 0 : bannerProps.onClose,
+      onClose: bannerProps?.onClose,
       isOpen: true,
-      type: (bannerProps === null || bannerProps === void 0 ? void 0 : bannerProps.type) || DSBanner.BANNER_TYPES.INFO,
+      type: bannerProps?.type || DSBanner.BANNER_TYPES.INFO,
       actionRef: bannerRef
     })), sendingMessages && sendingMessages.length > 0 ? /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
       isLoading: "bottom",
@@ -160,7 +154,7 @@ const ChatContainer = props => {
     })) : 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?.clientHeight || 0) / 2,
       actionRef: actionRef || listRef
     }))]
   }));

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

@@ -18,7 +18,17 @@ 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"
-})(["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  " : '');
+})(["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' ? `
+  top: -41px;
+  transform: translate(0, 41px);
+  visibility: visible;
+  pointer-events: auto;
+  ` : '', props => props.isLoading === 'bottom' ? `
+  bottom: -41px;
+  transform: translate(0, -41px);
+  visibility: visible;
+  pointer-events: auto;
+  ` : '');
 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;}", "{font-size:16px;}"], styled$1.StyledTitleLeftBubble, styled$1.StyleBodyWrapper, styled$1.StyledTitleRightBubble, style.Wrapper, style.Title, style.Message, style.Time, styled$2.StyledComposerInput, StyledIndicatorContainer);