@elliemae/ds-chat 2.0.0-rc.9 → 2.0.0

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

@@ -16,7 +16,7 @@ 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' ? "".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' ? "".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]);

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

@@ -51,7 +51,6 @@ const ChatContainer = props$1 => {
       onKeyDown: onComposerKeyDown
     },
     actionRef,
-    autoScroll,
     device,
     isLoading,
     hasMoreItems,
@@ -69,12 +68,18 @@ const ChatContainer = props$1 => {
   const onResize = React__default["default"].useCallback(height => {
     if (onComposerResize) onComposerResize(height);
 
-    if (autoScroll) {
-      listRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
-        align: 'end'
-      });
+    if (height > 30) {
+      /*
+       setTimeout is used to equal the animation duration from the 
+       composer text area when increase its size
+      */
+      setTimeout(() => {
+        actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
+          align: 'start'
+        });
+      }, 50);
     }
-  }, [onComposerResize, messagesListProps.messages, autoScroll]);
+  }, [onComposerResize, messagesListProps.messages, actionRef]);
   const Container = device === 'desktop' ? styled.StyledChatContainerContent : styled.MobileStyledChatContainerContent;
   const handleTabs = React__default["default"].useCallback(e => {
     if (onComposerKeyDown) onComposerKeyDown(e);else {

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

@@ -18,10 +18,10 @@ 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:", ";", " ", ""], 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' ? "\n  top: -41px;\n  transform: translate(0, 41px);\n  visibility: visible;\n  pointer-events: auto\n  " : '', props => props.isLoading === 'bottom' ? "\n  bottom: -41px;\n  transform: translate(0, -41px);\n  visibility: visible;\n  pointer-events: auto;\n  " : '');
 const MobileStyledChatContainerContent = /*#__PURE__*/styled__default["default"](StyledChatContainerContent).withConfig({
   componentId: "sc-d732wo-2"
-})(["", ",", "{font-size:16px;}", "{font-size:13px;}", "{background-color:#fff;box-shadow:-0 1px 3px rgba(53,60,70,0.8);}", ",", "{font-size:16px;text-align:left;}", "{font-size:13px;}", "{font-size:16px;}"], styled$1.StyledTitleLeftBubble, styled$1.StyleBodyWrapper, styled$1.StyledTitleRightBubble, style.Wrapper, style.Title, style.Message, style.Time, styled$2.StyledComposerInput);
+})(["", ",", "{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);
 
 exports.CONTAINER_WIDTH = CONTAINER_WIDTH;
 exports.MobileStyledChatContainerContent = MobileStyledChatContainerContent;

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

@@ -4,8 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.some.js');
 require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.some.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
@@ -37,12 +39,17 @@ 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 getPadding = hasMoreItems => {
+const getPadding = _ref => {
+  let {
+    hasMoreItems,
+    bannerPosition,
+    isLoading
+  } = _ref;
   const padding = {
     paddingStart: 0,
     paddingEnd: -5
   };
-  if (hasMoreItems === 'top') padding.paddingStart = 42;else if (hasMoreItems === 'bottom') padding.paddingEnd = 42;
+  if ([hasMoreItems, bannerPosition, isLoading].some(item => item === 'top')) padding.paddingStart = 42;else if ([hasMoreItems, bannerPosition, isLoading].some(item => item === 'bottom')) padding.paddingEnd = 42;
   return padding;
 };
 
@@ -72,7 +79,11 @@ const ChatContainerMessagesList = props$2 => {
     size: messages.length,
     parentRef: virtualListRef,
     overscan: 15
-  }, getPadding(hasMoreItems)), {}, {
+  }, getPadding({
+    hasMoreItems,
+    bannerPosition,
+    isLoading
+  })), {}, {
     estimateSize: React__default["default"].useCallback(() => 80, [])
   }));
   const onScrollStop = React__default["default"].useCallback(() => {
@@ -302,6 +313,7 @@ const ChatContainerMessagesList = props$2 => {
     "data-testid": "chat-thread-container",
     tabIndex: 0,
     "aria-live": "polite",
+    "aria-relevant": "additions",
     ref: virtualListRef,
     role: "list",
     onKeyDown: handleListKey,

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

@@ -8,7 +8,7 @@ const StyledChatContainerContentComposer = /*#__PURE__*/styled(Grid).withConfig(
 })(["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.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' ? "".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' ? "".concat(props.height, "px") : props.height, props => props.theme.colors.brand[600]);
 const StyledComposerButton = /*#__PURE__*/styled(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]);

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

@@ -39,7 +39,6 @@ const ChatContainer = props => {
       onKeyDown: onComposerKeyDown
     },
     actionRef,
-    autoScroll,
     device,
     isLoading,
     hasMoreItems,
@@ -57,12 +56,18 @@ const ChatContainer = props => {
   const onResize = React.useCallback(height => {
     if (onComposerResize) onComposerResize(height);
 
-    if (autoScroll) {
-      listRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
-        align: 'end'
-      });
+    if (height > 30) {
+      /*
+       setTimeout is used to equal the animation duration from the 
+       composer text area when increase its size
+      */
+      setTimeout(() => {
+        actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
+          align: 'start'
+        });
+      }, 50);
     }
-  }, [onComposerResize, messagesListProps.messages, autoScroll]);
+  }, [onComposerResize, messagesListProps.messages, actionRef]);
   const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;
   const handleTabs = React.useCallback(e => {
     if (onComposerKeyDown) onComposerKeyDown(e);else {

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

@@ -10,9 +10,9 @@ 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:", ";", " ", ""], 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' ? "\n  top: -41px;\n  transform: translate(0, 41px);\n  visibility: visible;\n  pointer-events: auto\n  " : '', props => props.isLoading === 'bottom' ? "\n  bottom: -41px;\n  transform: translate(0, -41px);\n  visibility: visible;\n  pointer-events: auto;\n  " : '');
 const MobileStyledChatContainerContent = /*#__PURE__*/styled(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;}"], StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble, Wrapper, Title, Message, Time, StyledComposerInput);
+})(["", ",", "{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);
 
 export { CONTAINER_WIDTH, MobileStyledChatContainerContent, StyledChatContainerContent, StyledIndicatorContainer };

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

@@ -2,8 +2,10 @@ import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.some.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
@@ -26,12 +28,17 @@ 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(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 getPadding = hasMoreItems => {
+const getPadding = _ref => {
+  let {
+    hasMoreItems,
+    bannerPosition,
+    isLoading
+  } = _ref;
   const padding = {
     paddingStart: 0,
     paddingEnd: -5
   };
-  if (hasMoreItems === 'top') padding.paddingStart = 42;else if (hasMoreItems === 'bottom') padding.paddingEnd = 42;
+  if ([hasMoreItems, bannerPosition, isLoading].some(item => item === 'top')) padding.paddingStart = 42;else if ([hasMoreItems, bannerPosition, isLoading].some(item => item === 'bottom')) padding.paddingEnd = 42;
   return padding;
 };
 
@@ -61,7 +68,11 @@ const ChatContainerMessagesList = props => {
     size: messages.length,
     parentRef: virtualListRef,
     overscan: 15
-  }, getPadding(hasMoreItems)), {}, {
+  }, getPadding({
+    hasMoreItems,
+    bannerPosition,
+    isLoading
+  })), {}, {
     estimateSize: React.useCallback(() => 80, [])
   }));
   const onScrollStop = React.useCallback(() => {
@@ -291,6 +302,7 @@ const ChatContainerMessagesList = props => {
     "data-testid": "chat-thread-container",
     tabIndex: 0,
     "aria-live": "polite",
+    "aria-relevant": "additions",
     ref: virtualListRef,
     role: "list",
     onKeyDown: handleListKey,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-chat",
-  "version": "2.0.0-rc.9",
+  "version": "2.0.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Chat",
   "module": "./esm/index.js",
@@ -305,23 +305,24 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-banner": "2.0.0-rc.9",
-    "@elliemae/ds-button": "2.0.0-rc.9",
-    "@elliemae/ds-grid": "2.0.0-rc.9",
-    "@elliemae/ds-icons": "2.0.0-rc.9",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.9",
-    "@elliemae/ds-props-helpers": "2.0.0-rc.9",
-    "@elliemae/ds-system": "2.0.0-rc.9",
-    "@elliemae/ds-tooltip": "2.0.0-rc.9",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.9",
+    "@elliemae/ds-banner": "2.0.0",
+    "@elliemae/ds-button": "2.0.0",
+    "@elliemae/ds-grid": "2.0.0",
+    "@elliemae/ds-icons": "2.0.0",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0",
+    "@elliemae/ds-props-helpers": "2.0.0",
+    "@elliemae/ds-system": "2.0.0",
+    "@elliemae/ds-tooltip": "2.0.0",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0",
     "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/jest-dom": "~5.15.1",
     "@testing-library/react": "~12.1.2",
+    "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.3"
   },
   "peerDependencies": {