@elliemae/ds-chat 2.0.0-rc.1 → 2.0.0-rc.10

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/ChatBubbleArrow.js

@@ -22,7 +22,7 @@ const ChatBubbleArrow = _ref => {
     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"
+    id: "path-chat-bubble"
   }), /*#__PURE__*/_jsx__default["default"]("filter", {
     x: "-55.6%",
     y: "-50.0%",
@@ -56,11 +56,11 @@ const ChatBubbleArrow = _ref => {
     fill: "black",
     fillOpacity: "1",
     filter: "url(#filter-2)",
-    xlinkHref: "#path-1"
+    xlinkHref: "#path-chat-bubble"
   }), /*#__PURE__*/_jsx__default["default"]("use", {
     fill: "#FFFFFF",
     fillRule: "evenodd",
-    xlinkHref: "#path-1"
+    xlinkHref: "#path-chat-bubble"
   }))))) : _svg2 || (_svg2 = /*#__PURE__*/_jsx__default["default"]("svg", {
     width: "9px",
     height: "8px",

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

@@ -35,10 +35,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const ChatContainer = props => {
+const ChatContainer = props$1 => {
   var _containerRef$current;
 
-  useValidateProps.useValidateProps(props, ChatContainerWithSchema.toTypescript());
+  useValidateProps.useValidateProps(props$1, props.containerProps);
   const {
     sendingText,
     sendingMessages,
@@ -55,8 +55,9 @@ const ChatContainer = props => {
     device,
     isLoading,
     hasMoreItems,
-    getMoreMessages
-  } = props;
+    getMoreMessages,
+    ariaLabel
+  } = props$1;
   const bannerRef = React__default["default"].useRef({
     focusOnWrapper: lodash.noop,
     focusOnLink: lodash.noop
@@ -102,7 +103,7 @@ const ChatContainer = props => {
     rows: ['minmax(0, 1fr)', 'auto'],
     ref: containerRef,
     role: "region",
-    "aria-label": "chat window",
+    "aria-label": ariaLabel,
     children: [/*#__PURE__*/_jsx__default["default"]("div", {
       style: {
         position: 'relative',

package/cjs/parts/chat-container/config/useValidateProps.js

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

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
 var lodash = require('lodash');
+var DSBanner = require('@elliemae/ds-banner');
 var props = require('../chat-container-messages-list/props.js');
 var props$1 = require('../chat-composer/props.js');
 
@@ -18,13 +19,15 @@ const defaultProps = {
   getMoreMessages: lodash.noop,
   bannerPosition: undefined,
   bannerProps: {
+    type: DSBanner.BANNER_TYPES.INFO,
     label: 'Unread Messages',
     viewLabel: 'View',
     onView: lodash.noop,
     onClose: lodash.noop
   },
   sendingMessages: undefined,
-  sendingText: 'Sending'
+  sendingText: 'Sending',
+  ariaLabel: 'Chat window'
 };
 const containerProps = {
   messagesListProps: reactDesc.PropTypes.object.description('ChatMessageList props "messages" / "onScrollEnds"').defaultValue(defaultProps.messagesListProps),
@@ -38,7 +41,8 @@ const containerProps = {
   bannerProps: reactDesc.PropTypes.object.description("Banner configuration:\n  label: string;\n  viewLabel: string;\n  type: BANNER_TYPES;\n  onView: () => void;\n  onClose: () => void;\n  ").defaultValue(defaultProps.bannerProps),
   sendingMessages: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string), reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.number)]).description('Array of ids of sending messages').defaultValue(defaultProps.sendingMessages),
   sendingText: reactDesc.PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText),
-  actionRef: reactDesc.PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultProps.actionRef)
+  actionRef: reactDesc.PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultProps.actionRef),
+  ariaLabel: reactDesc.PropTypes.string.description('Aria Label description for chat container').defaultValue(defaultProps.ariaLabel)
 };
 
 exports.containerProps = containerProps;

package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js

@@ -46,8 +46,8 @@ const getPadding = hasMoreItems => {
   return padding;
 };
 
-const ChatContainerMessagesList = props => {
-  useValidateProps.useValidateProps(props, ChatContainerMessagesListWithSchema.toTypescript());
+const ChatContainerMessagesList = props$2 => {
+  useValidateProps.useValidateProps(props$2, props.listProps);
   const {
     sendingText,
     bannerPosition,
@@ -59,7 +59,7 @@ const ChatContainerMessagesList = props => {
     hasMoreItems,
     isLoading,
     bannerRef
-  } = props;
+  } = props$2;
   const loadMoreRef = React__default["default"].useRef(null);
   const virtualListRef = React__default["default"].useRef(); // estimateSize should not be really required given what was stated on
   // https://github.com/tannerlinsley/react-virtual/issues/23

package/cjs/parts/chat-container-messages-list/config/useValidateProps.js

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

package/cjs/parts/floating-button/FloatingButton.js

@@ -7,6 +7,7 @@ require('react');
 var dsIcons = require('@elliemae/ds-icons');
 var styled = require('./styled.js');
 var props = require('./props.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,14 +16,19 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _Comments;
 const FloatingButton = _ref => {
   let {
-    onClick
+    onClick,
+    onFocus,
+    innerRef
   } = _ref;
-  return /*#__PURE__*/_jsx__default["default"](styled.StyledFloatingButton, {
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledFloatingButton, {
+    onFocus: onFocus,
+    ref: innerRef,
     "data-testid": "chat-floating-button",
-    onClick: onClick
-  }, void 0, _Comments || (_Comments = /*#__PURE__*/_jsx__default["default"](dsIcons.Comments, {
-    size: "l"
-  })));
+    onClick: onClick,
+    children: _Comments || (_Comments = /*#__PURE__*/_jsx__default["default"](dsIcons.Comments, {
+      size: "l"
+    }))
+  });
 };
 FloatingButton.defaultProps = props.defaultFloatingButton;
 

package/cjs/parts/floating-button/props.js

@@ -6,10 +6,14 @@ var reactDesc = require('react-desc');
 var lodash = require('lodash');
 
 const defaultFloatingButton = {
-  onClick: lodash.noop
+  onClick: lodash.noop,
+  onFocus: lodash.noop,
+  innerRef: null
 };
 const propsFloatingButton = {
-  onClick: reactDesc.PropTypes.func.description('The function to call when the chat is opened via the footer').defaultValue(defaultFloatingButton.onClick)
+  onClick: reactDesc.PropTypes.func.description('The function to call when the chat is opened via the footer').defaultValue(defaultFloatingButton.onClick),
+  onFocus: reactDesc.PropTypes.func.description('The function to call when button is being focused').defaultValue(defaultFloatingButton.onFocus),
+  innerRef: reactDesc.PropTypes.object.description('Ref to the component container').defaultValue(null)
 };
 
 exports.defaultFloatingButton = defaultFloatingButton;

package/cjs/parts/tile-button/styled.js

@@ -2,14 +2,17 @@
 
 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);
 
-/* eslint-disable indent */
+var _templateObject;
 const MIN_WIDTH_SIDEBAR = 48;
 const BUTTON_SIDEBAR_HEIGHT = 48; // Buttons
 
@@ -72,7 +75,7 @@ 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 styled.css(["& ", "{background:", ";}"], StyledWrapperLeftBorder, nestedProps => nestedProps.theme.colors.brand[600]);
+    return dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n        & ", " {\n          background: ", ";\n        }\n      "])), StyledWrapperLeftBorder, nestedProps => nestedProps.theme.colors.brand[600]);
   }
 
   return '';

package/esm/ChatDataTestids.js

@@ -0,0 +1,23 @@
+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'
+};
+
+export { ChatDataTestIds };

package/esm/parts/bubble/ChatBubbleArrow.js

@@ -14,7 +14,7 @@ const ChatBubbleArrow = _ref => {
     viewBox: "0 0 15 14"
   }, void 0, /*#__PURE__*/_jsx("defs", {}, void 0, /*#__PURE__*/_jsx("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"
+    id: "path-chat-bubble"
   }), /*#__PURE__*/_jsx("filter", {
     x: "-55.6%",
     y: "-50.0%",
@@ -48,11 +48,11 @@ const ChatBubbleArrow = _ref => {
     fill: "black",
     fillOpacity: "1",
     filter: "url(#filter-2)",
-    xlinkHref: "#path-1"
+    xlinkHref: "#path-chat-bubble"
   }), /*#__PURE__*/_jsx("use", {
     fill: "#FFFFFF",
     fillRule: "evenodd",
-    xlinkHref: "#path-1"
+    xlinkHref: "#path-chat-bubble"
   }))))) : _svg2 || (_svg2 = /*#__PURE__*/_jsx("svg", {
     width: "9px",
     height: "8px",

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

@@ -26,7 +26,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const ChatContainer = props => {
   var _containerRef$current;
 
-  useValidateProps(props, ChatContainerWithSchema.toTypescript());
+  useValidateProps(props, containerProps);
   const {
     sendingText,
     sendingMessages,
@@ -43,7 +43,8 @@ const ChatContainer = props => {
     device,
     isLoading,
     hasMoreItems,
-    getMoreMessages
+    getMoreMessages,
+    ariaLabel
   } = props;
   const bannerRef = React.useRef({
     focusOnWrapper: noop,
@@ -90,7 +91,7 @@ const ChatContainer = props => {
     rows: ['minmax(0, 1fr)', 'auto'],
     ref: containerRef,
     role: "region",
-    "aria-label": "chat window",
+    "aria-label": ariaLabel,
     children: [/*#__PURE__*/_jsx("div", {
       style: {
         position: 'relative',

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

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

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

@@ -1,5 +1,6 @@
 import { PropTypes } from 'react-desc';
 import { noop } from 'lodash';
+import { BANNER_TYPES } from '@elliemae/ds-banner';
 import { defaultProps as defaultProps$1 } from '../chat-container-messages-list/props.js';
 import { defaultComposerPros } from '../chat-composer/props.js';
 
@@ -14,13 +15,15 @@ const defaultProps = {
   getMoreMessages: noop,
   bannerPosition: undefined,
   bannerProps: {
+    type: BANNER_TYPES.INFO,
     label: 'Unread Messages',
     viewLabel: 'View',
     onView: noop,
     onClose: noop
   },
   sendingMessages: undefined,
-  sendingText: 'Sending'
+  sendingText: 'Sending',
+  ariaLabel: 'Chat window'
 };
 const containerProps = {
   messagesListProps: PropTypes.object.description('ChatMessageList props "messages" / "onScrollEnds"').defaultValue(defaultProps.messagesListProps),
@@ -34,7 +37,8 @@ const containerProps = {
   bannerProps: PropTypes.object.description("Banner configuration:\n  label: string;\n  viewLabel: string;\n  type: BANNER_TYPES;\n  onView: () => void;\n  onClose: () => void;\n  ").defaultValue(defaultProps.bannerProps),
   sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).description('Array of ids of sending messages').defaultValue(defaultProps.sendingMessages),
   sendingText: PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText),
-  actionRef: PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultProps.actionRef)
+  actionRef: PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultProps.actionRef),
+  ariaLabel: PropTypes.string.description('Aria Label description for chat container').defaultValue(defaultProps.ariaLabel)
 };
 
 export { containerProps, defaultProps };

package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js

@@ -36,7 +36,7 @@ const getPadding = hasMoreItems => {
 };
 
 const ChatContainerMessagesList = props => {
-  useValidateProps(props, ChatContainerMessagesListWithSchema.toTypescript());
+  useValidateProps(props, listProps);
   const {
     sendingText,
     bannerPosition,

package/esm/parts/chat-container-messages-list/config/useValidateProps.js

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

package/esm/parts/floating-button/FloatingButton.js

@@ -3,18 +3,24 @@ import 'react';
 import { Comments } from '@elliemae/ds-icons';
 import { StyledFloatingButton } from './styled.js';
 import { defaultFloatingButton } from './props.js';
+import { jsx } from 'react/jsx-runtime';
 
 var _Comments;
 const FloatingButton = _ref => {
   let {
-    onClick
+    onClick,
+    onFocus,
+    innerRef
   } = _ref;
-  return /*#__PURE__*/_jsx(StyledFloatingButton, {
+  return /*#__PURE__*/jsx(StyledFloatingButton, {
+    onFocus: onFocus,
+    ref: innerRef,
     "data-testid": "chat-floating-button",
-    onClick: onClick
-  }, void 0, _Comments || (_Comments = /*#__PURE__*/_jsx(Comments, {
-    size: "l"
-  })));
+    onClick: onClick,
+    children: _Comments || (_Comments = /*#__PURE__*/_jsx(Comments, {
+      size: "l"
+    }))
+  });
 };
 FloatingButton.defaultProps = defaultFloatingButton;
 

package/esm/parts/floating-button/props.js

@@ -2,10 +2,14 @@ import { PropTypes } from 'react-desc';
 import { noop } from 'lodash';
 
 const defaultFloatingButton = {
-  onClick: noop
+  onClick: noop,
+  onFocus: noop,
+  innerRef: null
 };
 const propsFloatingButton = {
-  onClick: PropTypes.func.description('The function to call when the chat is opened via the footer').defaultValue(defaultFloatingButton.onClick)
+  onClick: PropTypes.func.description('The function to call when the chat is opened via the footer').defaultValue(defaultFloatingButton.onClick),
+  onFocus: PropTypes.func.description('The function to call when button is being focused').defaultValue(defaultFloatingButton.onFocus),
+  innerRef: PropTypes.object.description('Ref to the component container').defaultValue(null)
 };
 
 export { defaultFloatingButton, propsFloatingButton };

package/esm/parts/tile-button/styled.js

@@ -1,7 +1,9 @@
-import styled, { css } from 'styled-components';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { css } from '@elliemae/ds-system';
 import { Grid } from '@elliemae/ds-grid';
 
-/* eslint-disable indent */
+var _templateObject;
 const MIN_WIDTH_SIDEBAR = 48;
 const BUTTON_SIDEBAR_HEIGHT = 48; // Buttons
 
@@ -64,7 +66,7 @@ const StyledTileButton = /*#__PURE__*/styled.button.withConfig({
   }
 }, 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 css(["& ", "{background:", ";}"], StyledWrapperLeftBorder, nestedProps => nestedProps.theme.colors.brand[600]);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        & ", " {\n          background: ", ";\n        }\n      "])), StyledWrapperLeftBorder, nestedProps => nestedProps.theme.colors.brand[600]);
   }
 
   return '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-chat",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Chat",
   "module": "./esm/index.js",
@@ -11,6 +11,10 @@
       "import": "./esm/index.js",
       "require": "./cjs/index.js"
     },
+    "./tests/utils": {
+      "import": "./esm/tests/utils.js",
+      "require": "./cjs/tests/utils.js"
+    },
     "./styled": {
       "import": "./esm/styled.js",
       "require": "./cjs/styled.js"
@@ -274,6 +278,10 @@
     "./parts/bubble/ChatBubble": {
       "import": "./esm/parts/bubble/ChatBubble.js",
       "require": "./cjs/parts/bubble/ChatBubble.js"
+    },
+    "./ChatDataTestids": {
+      "import": "./esm/ChatDataTestids.js",
+      "require": "./cjs/ChatDataTestids.js"
     }
   },
   "repository": {
@@ -297,19 +305,23 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-banner": "2.0.0-rc.1",
-    "@elliemae/ds-basic": "2.0.0-rc.1",
-    "@elliemae/ds-button": "2.0.0-rc.1",
-    "@elliemae/ds-grid": "2.0.0-rc.1",
-    "@elliemae/ds-icons": "2.0.0-rc.1",
-    "@elliemae/ds-props-helpers": "2.0.0-rc.1",
-    "@elliemae/ds-tooltip": "2.0.0-rc.1",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.1",
+    "@elliemae/ds-banner": "2.0.0-rc.10",
+    "@elliemae/ds-button": "2.0.0-rc.10",
+    "@elliemae/ds-grid": "2.0.0-rc.10",
+    "@elliemae/ds-icons": "2.0.0-rc.10",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.10",
+    "@elliemae/ds-props-helpers": "2.0.0-rc.10",
+    "@elliemae/ds-system": "2.0.0-rc.10",
+    "@elliemae/ds-tooltip": "2.0.0-rc.10",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.10",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.2",
     "react-virtual": "~2.3.2"
   },
   "devDependencies": {
+    "@testing-library/dom": "~8.11.1",
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
     "styled-components": "~5.3.3"
   },
   "peerDependencies": {

package/types/ChatDataTestids.d.ts

@@ -0,0 +1,21 @@
+export declare const ChatDataTestIds: {
+    COMPOSER_TEXTAREA: string;
+    COMPOSER_SEND_BUTTON: string;
+    CARD_TITLE: string;
+    CARD_WRAPPER: string;
+    CARD_TIME: string;
+    CARD_RIGHT_ADDON: string;
+    CARD_CONTENT: string;
+    LOADING_INDICATOR: string;
+    HEADER_TITLE: string;
+    HEADER_CHILDREN: string;
+    THREAD_CONTAINER: string;
+    LOAD_MORE_BUTTON: string;
+    FLOATING_BUTTON: string;
+    SYSTEM_MSG_TITLE: string;
+    SYSTEM_MSG_BODY: string;
+    SYSTEM_MSG_TIME: string;
+    BUBBLE: string;
+    BUBBLE_TITLE: string;
+    BUBBLE_BODY: string;
+};

package/types/parts/bubble/ChatBubble.d.ts

@@ -1,17 +1,30 @@
+/// <reference path="../../../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 import { BubbleProps } from './props';
 declare const ChatBubble: {
     (props: BubbleProps): JSX.Element;
     propTypes: {
-        dsId: any;
+        dsId: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
         type: any;
         title: any;
         time: any;
         body: any;
-        onClick: any;
-        errorMessage: any;
-        helpMessage: any;
+        onClick: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        errorMessage: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        helpMessage: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const ChatBubbleWithSchema: any;
+declare const ChatBubbleWithSchema: {
+    (props?: BubbleProps | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { ChatBubble, ChatBubbleWithSchema };

package/types/parts/bubble/props.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../../../shared/typings/react-desc.d.ts" />
 import React from 'react';
 /**
  *
@@ -24,14 +25,22 @@ export interface BubbleProps {
 }
 export declare const defaultBubbleProps: BubbleProps;
 export declare const propsBubbles: {
-    dsId: any;
+    dsId: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
     type: any;
     title: any;
     time: any;
     body: any;
-    onClick: any;
-    errorMessage: any;
-    helpMessage: any;
+    onClick: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    errorMessage: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    helpMessage: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
 };
 /**
  *

package/types/parts/bubble/styled.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, any, never>;
-export declare const StyledTitleBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledTitleLeftBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledTitleRightBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyleBodyWrapper: import("styled-components").StyledComponent<"div", any, any, never>;
-export declare const StyleErrorMessage: import("styled-components").StyledComponent<"div", any, any, never>;
-export declare const StyleHelpMessage: import("styled-components").StyledComponent<"div", any, any, never>;
-export declare const StyledBubbleArrow: import("styled-components").StyledComponent<"div", any, any, never>;
-export declare const StyledColoredBubble: import("styled-components").StyledComponent<"div", any, any, never>;
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, any, never>;
+export declare const StyledTitleBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTitleLeftBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTitleRightBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyleBodyWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, any, never>;
+export declare const StyleErrorMessage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, any, never>;
+export declare const StyleHelpMessage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, any, never>;
+export declare const StyledBubbleArrow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, any, never>;
+export declare const StyledColoredBubble: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, any, never>;