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

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

@@ -23,8 +23,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(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 = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, ChatContainerPropTypes);
   const globalAttributes = useGetGlobalAttributes(propsWithDefault);
@@ -72,23 +70,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.useEffect(() => {
     if (actionRef && actionRef.current) {
@@ -125,17 +119,17 @@ const ChatContainer = props => {
       isLoading: bannerPosition
     }, void 0, /*#__PURE__*/_jsx(DSBanner, {
       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) || BANNER_TYPES.INFO,
+      type: bannerProps?.type || BANNER_TYPES.INFO,
       actionRef: bannerRef
     })), sendingMessages && sendingMessages.length > 0 ? /*#__PURE__*/_jsx(StyledIndicatorContainer, {
       isLoading: "bottom",
@@ -148,7 +142,7 @@ const ChatContainer = props => {
     })) : null), /*#__PURE__*/jsx(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/esm/parts/chat-container/styled.js

@@ -10,7 +10,17 @@ const StyledChatContainerContent = /*#__PURE__*/styled(Grid).withConfig({
 })(["height:100%;min-width:", "px;overflow:hidden;background:", ";position:relative;"], CONTAINER_WIDTH, props => props.theme.colors.neutral['050']);
 const StyledIndicatorContainer = /*#__PURE__*/styled.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(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;}"], StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble, Wrapper, Title, Message, Time, StyledComposerInput, StyledIndicatorContainer);

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

@@ -69,7 +69,7 @@ const ChatContainerMessagesList = props => {
     totalSize,
     virtualItems
   } = useVirtual(_objectSpread(_objectSpread({
-    size: messages === null || messages === void 0 ? void 0 : messages.length,
+    size: messages?.length,
     parentRef: virtualListRef,
     overscan: 15
   }, getPadding({
@@ -81,8 +81,6 @@ const ChatContainerMessagesList = props => {
   }));
   const newMessages = useGetNewMessages(messages);
   const debouncedScroll = React.useMemo(() => debounce(() => {
-    var _virtualListRef$curre;
-
     if (document.visibilityState === 'hidden') {
       pendingOnScroll.current = true;
       return [];
@@ -93,7 +91,7 @@ const ChatContainerMessagesList = props => {
     const {
       bottom,
       top
-    } = (_virtualListRef$curre = virtualListRef.current) === null || _virtualListRef$curre === void 0 ? void 0 : _virtualListRef$curre.getBoundingClientRect();
+    } = virtualListRef.current?.getBoundingClientRect();
     const list = virtualListRef.current.querySelectorAll('[data-element="chat-element-list-item"]');
     const indexList = [];
     list.forEach(item => {
@@ -108,7 +106,7 @@ const ChatContainerMessagesList = props => {
   }, 500), [onScrollEnds]);
   const onScrollStop = React.useCallback(debouncedScroll, [debouncedScroll]);
   const onlyFocus = React.useCallback(index => {
-    virtualListRef.current.querySelector("[data-index=\"".concat(index, "\"]")).focus();
+    virtualListRef.current.querySelector(`[data-index="${index}"]`).focus();
   }, []);
   const scrollAndFocus = React.useCallback(function (index) {
     let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
@@ -146,9 +144,7 @@ const ChatContainerMessagesList = props => {
       actionRef.current.focusToIndexWithoutScroll = onlyFocus;
 
       actionRef.current.focusToList = () => {
-        var _virtualListRef$curre2;
-
-        (_virtualListRef$curre2 = virtualListRef.current) === null || _virtualListRef$curre2 === void 0 ? void 0 : _virtualListRef$curre2.focus();
+        virtualListRef.current?.focus();
       };
     }
   }, [actionRef, onScrollStop, onlyFocus, scrollAndFocus, vScroll]);
@@ -184,13 +180,9 @@ const ChatContainerMessagesList = props => {
         e.preventDefault();
 
         if (index > 0) {
-          var _virtualListRef$curre3;
-
-          ((_virtualListRef$curre3 = virtualListRef.current) === null || _virtualListRef$curre3 === void 0 ? void 0 : _virtualListRef$curre3.querySelector("[data-index=\"".concat(index - 1, "\"]"))).focus();
+          (virtualListRef.current?.querySelector(`[data-index="${index - 1}"]`)).focus();
         } else if (hasMoreItems === 'top') {
-          var _loadMoreRef$current;
-
-          (_loadMoreRef$current = loadMoreRef.current) === null || _loadMoreRef$current === void 0 ? void 0 : _loadMoreRef$current.focus();
+          loadMoreRef.current?.focus();
         }
 
         break;
@@ -198,10 +190,8 @@ const ChatContainerMessagesList = props => {
       case 'ArrowDown':
         e.preventDefault();
 
-        if (index < (messages === null || messages === void 0 ? void 0 : messages.length) - 1) {
-          var _virtualListRef$curre4;
-
-          ((_virtualListRef$curre4 = virtualListRef.current) === null || _virtualListRef$curre4 === void 0 ? void 0 : _virtualListRef$curre4.querySelector("[data-index=\"".concat(index + 1, "\"]"))).focus();
+        if (index < messages?.length - 1) {
+          (virtualListRef.current?.querySelector(`[data-index="${index + 1}"]`)).focus();
         }
 
         break;
@@ -213,37 +203,29 @@ const ChatContainerMessagesList = props => {
 
       case 'End':
         e.preventDefault();
-        scrollAndFocus((messages === null || messages === void 0 ? void 0 : messages.length) - 1);
+        scrollAndFocus(messages?.length - 1);
         break;
 
       case 'Tab':
         if (hasMoreItems === 'bottom' && !e.shiftKey) {
-          var _loadMoreRef$current2;
-
           e.preventDefault();
-          (_loadMoreRef$current2 = loadMoreRef.current) === null || _loadMoreRef$current2 === void 0 ? void 0 : _loadMoreRef$current2.focus();
+          loadMoreRef.current?.focus();
         } else if (hasMoreItems === 'top' && e.shiftKey) {
-          var _loadMoreRef$current3;
-
           e.preventDefault();
-          (_loadMoreRef$current3 = loadMoreRef.current) === null || _loadMoreRef$current3 === void 0 ? void 0 : _loadMoreRef$current3.focus();
+          loadMoreRef.current?.focus();
         } else if (!e.shiftKey) {
           if (bannerPosition) {
-            var _bannerRef$current;
-
             e.preventDefault();
-            bannerRef === null || bannerRef === void 0 ? void 0 : (_bannerRef$current = bannerRef.current) === null || _bannerRef$current === void 0 ? void 0 : _bannerRef$current.focusOnWrapper();
+            bannerRef?.current?.focusOnWrapper();
           }
         } else {
-          var _virtualListRef$curre5;
-
           e.preventDefault();
-          (_virtualListRef$curre5 = virtualListRef.current) === null || _virtualListRef$curre5 === void 0 ? void 0 : _virtualListRef$curre5.focus();
+          virtualListRef.current?.focus();
         }
 
         break;
     }
-  }, [bannerRef, hasMoreItems, messages === null || messages === void 0 ? void 0 : messages.length, bannerPosition, scrollAndFocus]);
+  }, [bannerRef, hasMoreItems, messages?.length, bannerPosition, scrollAndFocus]);
   const handleListKey = React.useCallback(e => {
     const {
       key
@@ -254,9 +236,7 @@ const ChatContainerMessagesList = props => {
         e.preventDefault();
 
         if (document.activeElement !== loadMoreRef.current) {
-          var _onScrollStop;
-
-          onlyFocus((_onScrollStop = onScrollStop()) === null || _onScrollStop === void 0 ? void 0 : _onScrollStop.shift());
+          onlyFocus(onScrollStop()?.shift());
         }
 
         break;
@@ -265,11 +245,9 @@ const ChatContainerMessagesList = props => {
         e.preventDefault();
 
         if (document.activeElement === loadMoreRef.current) {
-          virtualListRef.current.querySelector("[data-index=\"0\"]").focus();
+          virtualListRef.current.querySelector(`[data-index="0"]`).focus();
         } else {
-          var _onScrollStop2;
-
-          onlyFocus((_onScrollStop2 = onScrollStop()) === null || _onScrollStop2 === void 0 ? void 0 : _onScrollStop2.pop());
+          onlyFocus(onScrollStop()?.pop());
         }
 
         break;
@@ -281,16 +259,14 @@ const ChatContainerMessagesList = props => {
 
       case 'End':
         e.preventDefault();
-        scrollAndFocus((messages === null || messages === void 0 ? void 0 : messages.length) - 1);
+        scrollAndFocus(messages?.length - 1);
         break;
 
       case 'Tab':
         if (document.activeElement !== loadMoreRef.current) {
           if (hasMoreItems === 'bottom' && !e.shiftKey) {
-            var _loadMoreRef$current4;
-
             e.preventDefault();
-            (_loadMoreRef$current4 = loadMoreRef.current) === null || _loadMoreRef$current4 === void 0 ? void 0 : _loadMoreRef$current4.focus();
+            loadMoreRef.current?.focus();
           } else if (!e.shiftKey) {
             e.preventDefault();
             actionRef.current.focusToComposer();
@@ -299,15 +275,13 @@ const ChatContainerMessagesList = props => {
           e.preventDefault();
           actionRef.current.focusToComposer();
         } else {
-          var _virtualListRef$curre6;
-
           e.preventDefault();
-          (_virtualListRef$curre6 = virtualListRef.current) === null || _virtualListRef$curre6 === void 0 ? void 0 : _virtualListRef$curre6.focus();
+          virtualListRef.current?.focus();
         }
 
         break;
     }
-  }, [actionRef, hasMoreItems, messages === null || messages === void 0 ? void 0 : messages.length, onScrollStop, onlyFocus, scrollAndFocus]);
+  }, [actionRef, hasMoreItems, messages?.length, onScrollStop, onlyFocus, scrollAndFocus]);
   const render = React.useMemo(() => virtualItems.map(virtualItem => {
     const {
       index,
@@ -320,7 +294,7 @@ const ChatContainerMessagesList = props => {
       position: 'absolute',
       top: 0,
       left: 0,
-      transform: "translateY(".concat(start, "px)"),
+      transform: `translateY(${start}px)`,
       width: '100%'
     };
     return /*#__PURE__*/jsx(ListItem, {
@@ -339,7 +313,7 @@ const ChatContainerMessagesList = props => {
       jsx(ChatBubble, _objectSpread(_objectSpread({}, row), {}, {
         helpMessage: isSending ? sendingText : row.helpMessage
       })) : null, row.type === BUBBLE_TYPES.DELIMITER ? /*#__PURE__*/jsx(MessageDelimiter, _objectSpread({}, row)) : null, row.type === BUBBLE_TYPES.SYSTEM ? /*#__PURE__*/jsx(SystemMessage, _objectSpread({}, row)) : null)
-    }, "ds-chat-bubble-".concat(index, "-").concat(row.dsId, "-").concat(row.type));
+    }, `ds-chat-bubble-${index}-${row.dsId}-${row.type}`);
   }), [virtualItems, messages, sendingMessages, handleKey, sendingText]);
   return /*#__PURE__*/jsxs(StyledWrapper, _objectSpread(_objectSpread({}, globalAttributes), {}, {
     children: [/*#__PURE__*/jsx(StyledChatContainerContentList, {
@@ -349,7 +323,7 @@ const ChatContainerMessagesList = props => {
       role: "list",
       onKeyDown: handleListKey,
       children: /*#__PURE__*/_jsx(StyledChatContainerContentListScroll, {
-        height: "".concat(totalSize, "px")
+        height: `${totalSize}px`
       }, void 0, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx(StyledLoadMoreContainer, {
         hasMoreItems: hasMoreItems
       }, void 0, /*#__PURE__*/_jsx(DSButton, {

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

@@ -8,7 +8,11 @@ const StyledWrapper = /*#__PURE__*/styled.div.withConfig({
 
 const StyledWrapperListItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1jhprzr-1"
-})(["min-width:100%;", ";", ";", ";"], props => props.type === BUBBLE_TYPES.SENDER && "padding: ".concat(props.theme.space.xxs, " ").concat(props.theme.space.xxs, " ").concat(props.theme.space.xxs, " 13%\n  "), props => props.type === BUBBLE_TYPES.RECIPIENT && "padding: ".concat(props.theme.space.xxs, " 13% ").concat(props.theme.space.xxs, "\n    ").concat(props.theme.space.xxs, "\n  "), props => props.type === BUBBLE_TYPES.SYSTEM && "padding: ".concat(props.theme.space.xxs, " 0px\n  "));
+})(["min-width:100%;", ";", ";", ";"], props => props.type === BUBBLE_TYPES.SENDER && `padding: ${props.theme.space.xxs} ${props.theme.space.xxs} ${props.theme.space.xxs} 13%
+  `, props => props.type === BUBBLE_TYPES.RECIPIENT && `padding: ${props.theme.space.xxs} 13% ${props.theme.space.xxs}
+    ${props.theme.space.xxs}
+  `, props => props.type === BUBBLE_TYPES.SYSTEM && `padding: ${props.theme.space.xxs} 0px
+  `);
 const StyledChatContainerContentList = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1jhprzr-2"
 })(["width:100%;height:100%;padding:", ";padding-bottom:0;overflow-y:auto;overflow-x:hidden;"], props => props.theme.space.xs);

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

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.for-each.js';

package/esm/react-desc-prop-types.js

@@ -43,7 +43,17 @@ const ChatComposerPropTypes = {
   inputMaxLength: PropTypes.number.description('Max length of the composer. `undefined` for no limit').defaultValue(defaultPropsComposer.inputMaxLength),
   buttonDisabled: PropTypes.bool.description('Control the disabled for the send button').defaultValue(defaultPropsComposer.buttonDisabled),
   dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.placeholder),
-  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(defaultPropsComposer.actionRef)
+  actionRef: PropTypes.object.description(`Reference: 
+        { 
+          scrollToIndex: (n: number) => void,
+          getMessagesInView: () => number[],
+          focusToIndex: (n: number) => void,
+          focusToList: () => void,
+          focusToComposer: () => void,
+          focusToSend: () => void,
+        }
+        
+      `).defaultValue(defaultPropsComposer.actionRef)
 };
 const defaultPropsMessagesList = {
   messages: [],
@@ -57,8 +67,19 @@ const defaultPropsMessagesList = {
 };
 const ChatContainerMessagesListPropTypes = _objectSpread(_objectSpread({}, globalAttributesPropTypes), {}, {
   messages: PropTypes.arrayOf(PropTypes.object).description('The array of out-of-the-box items you want to render inside the ChatMessageList').defaultValue(defaultPropsMessagesList.messages),
-  actionRef: PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToIndexWithoutScroll: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultPropsMessagesList.actionRef),
-  onScrollEnds: PropTypes.func.description("Called when the scroll stops."),
+  actionRef: PropTypes.object.description(`Reference: 
+        { 
+          scrollToIndex: (n: number) => void,
+          getMessagesInView: () => number[],
+          focusToIndex: (n: number) => void,
+          focusToIndexWithoutScroll: (n: number) => void,
+          focusToList: () => void,
+          focusToComposer: () => void,
+          focusToSend: () => void,
+        }
+        
+      `).defaultValue(defaultPropsMessagesList.actionRef),
+  onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),
   isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description('Keeps the load more space while the loading is in progress'),
   hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Load More button at the `top` or `bottom` of the container'),
   getMoreMessages: PropTypes.func.description('Called when the user clicks on load more').defaultValue(defaultPropsMessagesList.getMoreMessages),
@@ -94,10 +115,26 @@ const ChatContainerPropTypes = _objectSpread(_objectSpread({}, globalAttributesP
   hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Load More button at the `top` or `bottom` of the container'),
   getMoreMessages: PropTypes.func.description('Called when the user clicks on load more').defaultValue(defaultProps.getMoreMessages),
   bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Loading messages indicator at the `top` or `bottom` of the container'),
-  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),
+  bannerProps: PropTypes.object.description(`Banner configuration:
+  label: string;
+  viewLabel: string;
+  type: BANNER_TYPES;
+  onView: () => void;
+  onClose: () => void;
+  `).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: 
+        { 
+          scrollToIndex: (n: number) => void,
+          getMessagesInView: () => number[],
+          focusToIndex: (n: number) => void,
+          focusToList: () => void,
+          focusToComposer: () => void,
+          focusToSend: () => void,
+        }
+        
+      `).defaultValue(defaultProps.actionRef)
 });
 
 export { ChatComposerPropTypes, ChatContainerMessagesListPropTypes, ChatContainerPropTypes, defaultProps, defaultPropsComposer, defaultPropsMessagesList };

package/esm/styled.js

@@ -3,6 +3,6 @@ const BUTTON_SIDEBAR_HEIGHT = 48;
 const BUTTON_FLOATING = 56;
 const BOX_SHADOW = '0 5px 8px 0 rgba(53,60,70,0.55)';
 const BOX_SHADOW_FLOATING = '0 5px 8px 0 rgba(53,60,70,0.35)';
-const BOX_SHADOW_INSET = "inset 100px 3px 4px 0 rgba(53,60,70,0.50)";
+const BOX_SHADOW_INSET = `inset 100px 3px 4px 0 rgba(53,60,70,0.50)`;
 
 export { BOX_SHADOW, BOX_SHADOW_FLOATING, BOX_SHADOW_INSET, BUTTON_FLOATING, BUTTON_SIDEBAR_HEIGHT, MIN_WIDTH_SIDEBAR };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-chat",
-  "version": "2.4.2-rc.12",
+  "version": "2.4.2-rc.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Chat",
   "module": "./esm/index.js",
@@ -261,15 +261,15 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-banner": "2.4.2-rc.12",
-    "@elliemae/ds-button": "2.4.2-rc.12",
-    "@elliemae/ds-grid": "2.4.2-rc.12",
-    "@elliemae/ds-icons": "2.4.2-rc.12",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.4.2-rc.12",
-    "@elliemae/ds-props-helpers": "2.4.2-rc.12",
-    "@elliemae/ds-system": "2.4.2-rc.12",
-    "@elliemae/ds-tooltip": "2.4.2-rc.12",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.12",
+    "@elliemae/ds-banner": "2.4.2-rc.13",
+    "@elliemae/ds-button": "2.4.2-rc.13",
+    "@elliemae/ds-grid": "2.4.2-rc.13",
+    "@elliemae/ds-icons": "2.4.2-rc.13",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.4.2-rc.13",
+    "@elliemae/ds-props-helpers": "2.4.2-rc.13",
+    "@elliemae/ds-system": "2.4.2-rc.13",
+    "@elliemae/ds-tooltip": "2.4.2-rc.13",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.13",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.2",
     "react-virtual": "~2.8.2"