@elliemae/ds-chat 2.1.0-rc.0 → 2.1.0-rc.4

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

@@ -92,6 +92,9 @@ const ChatComposer = props => {
     "data-testid": dataTestid
   }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: ['1fr', '24px'],
+    style: {
+      height: heightProps.height
+    },
     justifyContent: "center",
     alignItems: "flex-end",
     gutter: "xxs"
@@ -132,8 +135,7 @@ const ChatComposer = props => {
       width: (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.clientWidth
     },
     onChange: handleChange,
-    value: inputValue // maxLength={inputMaxLength}
-
+    value: inputValue
   }), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: ['1fr', '24px'],
     justifyContent: "flex-end",

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

@@ -67,18 +67,16 @@ const ChatContainer = props$1 => {
   });
   const onResize = React__default["default"].useCallback(height => {
     if (onComposerResize) onComposerResize(height);
-
-    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);
-    }
+
+    setTimeout(() => {
+      actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
+        align: 'start'
+      });
+    }, 50);
   }, [onComposerResize, messagesListProps.messages, actionRef]);
   const Container = device === 'desktop' ? styled.StyledChatContainerContent : styled.MobileStyledChatContainerContent;
   const handleTabs = React__default["default"].useCallback(e => {

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

@@ -18,7 +18,7 @@ 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' ? "\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;}", "{font-size:16px;}"], styled$1.StyledTitleLeftBubble, styled$1.StyleBodyWrapper, styled$1.StyledTitleRightBubble, style.Wrapper, style.Title, style.Message, style.Time, styled$2.StyledComposerInput, StyledIndicatorContainer);

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

@@ -19,6 +19,7 @@ var React = require('react');
 var reactDesc = require('react-desc');
 var reactVirtual = require('react-virtual');
 var DSButton = require('@elliemae/ds-button');
+var lodash = require('lodash');
 var ChatBubble = require('../bubble/ChatBubble.js');
 var props$1 = require('../bubble/props.js');
 var MessageDelimiter = require('../message-delimiter/MessageDelimiter.js');
@@ -67,6 +68,7 @@ const ChatContainerMessagesList = props$2 => {
     isLoading,
     bannerRef
   } = props$2;
+  const pendingOnScroll = React__default["default"].useRef(false);
   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
@@ -86,9 +88,15 @@ const ChatContainerMessagesList = props$2 => {
   })), {}, {
     estimateSize: React__default["default"].useCallback(() => 80, [])
   }));
-  const onScrollStop = React__default["default"].useCallback(() => {
+  const debouncedScroll = React__default["default"].useMemo(() => lodash.debounce(() => {
     var _virtualListRef$curre;
 
+    if (document.visibilityState === 'hidden') {
+      pendingOnScroll.current = true;
+      return [];
+    }
+
+    pendingOnScroll.current = false;
     const {
       bottom,
       top
@@ -97,15 +105,15 @@ const ChatContainerMessagesList = props$2 => {
     const indexList = [];
     list.forEach(item => {
       const {
-        top: itemTop,
-        bottom: itemBottom
+        top: itemTop
       } = item.getBoundingClientRect();
       const itemPadding = 10;
-      if (itemTop + itemPadding < bottom && itemBottom - itemPadding > top) indexList.push(item.dataset.index);
+      if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index);
     });
     if (onScrollEnds) onScrollEnds(indexList);
     return indexList;
-  }, [onScrollEnds]);
+  }, 500), [onScrollEnds]);
+  const onScrollStop = React__default["default"].useCallback(debouncedScroll, [debouncedScroll]);
   const onlyFocus = React__default["default"].useCallback(index => {
     setTimeout(() => {
       virtualListRef.current.querySelector("[data-index=\"".concat(index, "\"]")).focus();
@@ -117,7 +125,8 @@ const ChatContainerMessagesList = props$2 => {
     };
     vScroll(index, b);
     onlyFocus(index);
-  }, [onlyFocus, vScroll]);
+    onScrollStop();
+  }, [onScrollStop, onlyFocus, vScroll]);
   React__default["default"].useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.scrollToIndex = function (a) {
@@ -125,6 +134,7 @@ const ChatContainerMessagesList = props$2 => {
           align: 'center'
         };
         vScroll(a, b);
+        onScrollStop();
       };
 
       actionRef.current.getMessagesInView = onScrollStop;
@@ -138,7 +148,7 @@ const ChatContainerMessagesList = props$2 => {
 
       actionRef.current.focusToIndexWithoutScroll = onlyFocus;
 
-      actionRef.current.focusToList = a => {
+      actionRef.current.focusToList = () => {
         var _virtualListRef$curre2;
 
         (_virtualListRef$curre2 = virtualListRef.current) === null || _virtualListRef$curre2 === void 0 ? void 0 : _virtualListRef$curre2.focus();
@@ -222,9 +232,7 @@ const ChatContainerMessagesList = props$2 => {
       case 'ArrowUp':
         e.preventDefault();
 
-        if (document.activeElement === loadMoreRef.current) {
-          scrollAndFocus(messages.length - 1);
-        } else {
+        if (document.activeElement !== loadMoreRef.current) {
           onlyFocus(onScrollStop().shift());
         }
 
@@ -232,7 +240,13 @@ const ChatContainerMessagesList = props$2 => {
 
       case 'ArrowDown':
         e.preventDefault();
-        onlyFocus(onScrollStop().pop());
+
+        if (document.activeElement === loadMoreRef.current) {
+          virtualListRef.current.querySelector("[data-index=\"0\"]").focus();
+        } else {
+          onlyFocus(onScrollStop().pop());
+        }
+
         break;
 
       case 'Home':
@@ -274,6 +288,9 @@ const ChatContainerMessagesList = props$2 => {
         break;
     }
   }, [actionRef, hasMoreItems, messages.length, onScrollStop, onlyFocus, scrollAndFocus]);
+  const checkPendingOnScroll = React__default["default"].useCallback(() => {
+    if (pendingOnScroll.current === true) onScrollStop();
+  }, [onScrollStop]);
   React__default["default"].useEffect(() => {
     let handlerCallback = null;
     const localVirtualRef = virtualListRef.current;
@@ -287,11 +304,13 @@ const ChatContainerMessagesList = props$2 => {
       virtualListRef.current.addEventListener('scroll', onScroll);
     }
 
+    document.addEventListener('visibilitychange', checkPendingOnScroll);
     return () => {
       if (handlerCallback) clearTimeout(handlerCallback);
       if (onScrollEnds) localVirtualRef.removeEventListener('scroll', onScroll);
+      document.removeEventListener('visibilitychange', checkPendingOnScroll);
     };
-  }, [onScrollStop, onScrollEnds]);
+  }, [onScrollStop, onScrollEnds, checkPendingOnScroll]);
   const render = React__default["default"].useMemo(() => virtualItems.map(virtualItem => {
     const {
       index,

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

@@ -82,6 +82,9 @@ const ChatComposer = props => {
     "data-testid": dataTestid
   }, void 0, /*#__PURE__*/_jsx(Grid, {
     cols: ['1fr', '24px'],
+    style: {
+      height: heightProps.height
+    },
     justifyContent: "center",
     alignItems: "flex-end",
     gutter: "xxs"
@@ -122,8 +125,7 @@ const ChatComposer = props => {
       width: (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.clientWidth
     },
     onChange: handleChange,
-    value: inputValue // maxLength={inputMaxLength}
-
+    value: inputValue
   }), /*#__PURE__*/_jsx(Grid, {
     cols: ['1fr', '24px'],
     justifyContent: "flex-end",

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

@@ -55,18 +55,16 @@ const ChatContainer = props => {
   });
   const onResize = React.useCallback(height => {
     if (onComposerResize) onComposerResize(height);
-
-    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);
-    }
+
+    setTimeout(() => {
+      actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
+        align: 'start'
+      });
+    }, 50);
   }, [onComposerResize, messagesListProps.messages, actionRef]);
   const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;
   const handleTabs = React.useCallback(e => {

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

@@ -10,7 +10,7 @@ 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' ? "\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;}", "{font-size:16px;}"], StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble, Wrapper, Title, Message, Time, StyledComposerInput, StyledIndicatorContainer);

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

@@ -15,6 +15,7 @@ import React from 'react';
 import { describe } from 'react-desc';
 import { useVirtual } from 'react-virtual';
 import DSButton from '@elliemae/ds-button';
+import { debounce } from 'lodash';
 import { ChatBubble } from '../bubble/ChatBubble.js';
 import { BUBBLE_TYPES } from '../bubble/props.js';
 import { MessageDelimiter } from '../message-delimiter/MessageDelimiter.js';
@@ -56,6 +57,7 @@ const ChatContainerMessagesList = props => {
     isLoading,
     bannerRef
   } = props;
+  const pendingOnScroll = React.useRef(false);
   const loadMoreRef = React.useRef(null);
   const virtualListRef = React.useRef(); // estimateSize should not be really required given what was stated on
   // https://github.com/tannerlinsley/react-virtual/issues/23
@@ -75,9 +77,15 @@ const ChatContainerMessagesList = props => {
   })), {}, {
     estimateSize: React.useCallback(() => 80, [])
   }));
-  const onScrollStop = React.useCallback(() => {
+  const debouncedScroll = React.useMemo(() => debounce(() => {
     var _virtualListRef$curre;
 
+    if (document.visibilityState === 'hidden') {
+      pendingOnScroll.current = true;
+      return [];
+    }
+
+    pendingOnScroll.current = false;
     const {
       bottom,
       top
@@ -86,15 +94,15 @@ const ChatContainerMessagesList = props => {
     const indexList = [];
     list.forEach(item => {
       const {
-        top: itemTop,
-        bottom: itemBottom
+        top: itemTop
       } = item.getBoundingClientRect();
       const itemPadding = 10;
-      if (itemTop + itemPadding < bottom && itemBottom - itemPadding > top) indexList.push(item.dataset.index);
+      if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index);
     });
     if (onScrollEnds) onScrollEnds(indexList);
     return indexList;
-  }, [onScrollEnds]);
+  }, 500), [onScrollEnds]);
+  const onScrollStop = React.useCallback(debouncedScroll, [debouncedScroll]);
   const onlyFocus = React.useCallback(index => {
     setTimeout(() => {
       virtualListRef.current.querySelector("[data-index=\"".concat(index, "\"]")).focus();
@@ -106,7 +114,8 @@ const ChatContainerMessagesList = props => {
     };
     vScroll(index, b);
     onlyFocus(index);
-  }, [onlyFocus, vScroll]);
+    onScrollStop();
+  }, [onScrollStop, onlyFocus, vScroll]);
   React.useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.scrollToIndex = function (a) {
@@ -114,6 +123,7 @@ const ChatContainerMessagesList = props => {
           align: 'center'
         };
         vScroll(a, b);
+        onScrollStop();
       };
 
       actionRef.current.getMessagesInView = onScrollStop;
@@ -127,7 +137,7 @@ const ChatContainerMessagesList = props => {
 
       actionRef.current.focusToIndexWithoutScroll = onlyFocus;
 
-      actionRef.current.focusToList = a => {
+      actionRef.current.focusToList = () => {
         var _virtualListRef$curre2;
 
         (_virtualListRef$curre2 = virtualListRef.current) === null || _virtualListRef$curre2 === void 0 ? void 0 : _virtualListRef$curre2.focus();
@@ -211,9 +221,7 @@ const ChatContainerMessagesList = props => {
       case 'ArrowUp':
         e.preventDefault();
 
-        if (document.activeElement === loadMoreRef.current) {
-          scrollAndFocus(messages.length - 1);
-        } else {
+        if (document.activeElement !== loadMoreRef.current) {
           onlyFocus(onScrollStop().shift());
         }
 
@@ -221,7 +229,13 @@ const ChatContainerMessagesList = props => {
 
       case 'ArrowDown':
         e.preventDefault();
-        onlyFocus(onScrollStop().pop());
+
+        if (document.activeElement === loadMoreRef.current) {
+          virtualListRef.current.querySelector("[data-index=\"0\"]").focus();
+        } else {
+          onlyFocus(onScrollStop().pop());
+        }
+
         break;
 
       case 'Home':
@@ -263,6 +277,9 @@ const ChatContainerMessagesList = props => {
         break;
     }
   }, [actionRef, hasMoreItems, messages.length, onScrollStop, onlyFocus, scrollAndFocus]);
+  const checkPendingOnScroll = React.useCallback(() => {
+    if (pendingOnScroll.current === true) onScrollStop();
+  }, [onScrollStop]);
   React.useEffect(() => {
     let handlerCallback = null;
     const localVirtualRef = virtualListRef.current;
@@ -276,11 +293,13 @@ const ChatContainerMessagesList = props => {
       virtualListRef.current.addEventListener('scroll', onScroll);
     }
 
+    document.addEventListener('visibilitychange', checkPendingOnScroll);
     return () => {
       if (handlerCallback) clearTimeout(handlerCallback);
       if (onScrollEnds) localVirtualRef.removeEventListener('scroll', onScroll);
+      document.removeEventListener('visibilitychange', checkPendingOnScroll);
     };
-  }, [onScrollStop, onScrollEnds]);
+  }, [onScrollStop, onScrollEnds, checkPendingOnScroll]);
   const render = React.useMemo(() => virtualItems.map(virtualItem => {
     const {
       index,

package/package.json

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