@elliemae/ds-chat 2.1.0-rc.4 → 2.2.0-alpha.1

package/cjs/ChatDataTestids.js

@@ -21,7 +21,8 @@ const ChatDataTestIds = {
   SYSTEM_MSG_TIME: 'chat-system-message-time',
   BUBBLE: 'ds-chat-bubble',
   BUBBLE_TITLE: 'chat-bubble-title',
-  BUBBLE_BODY: 'chat-bubble-body'
+  BUBBLE_BODY: 'chat-bubble-body',
+  BANNER: 'ds-banner-container'
 };
 
 exports.ChatDataTestIds = ChatDataTestIds;

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

@@ -52,6 +52,7 @@ const ChatComposer = props => {
     dataTestid,
     actionRef
   } = props;
+  const COMPOSER_MIN_HEIGHT = 32;
   const input = React__default["default"].useRef();
   const inputSize = React__default["default"].useRef();
   const inputSend = React__default["default"].useRef();
@@ -62,10 +63,10 @@ const ChatComposer = props => {
     var _inputSize$current, _inputSize$current2, _inputSize$current3, _inputSize$current4;
 
     const newHeight = ((_inputSize$current = inputSize.current) === null || _inputSize$current === void 0 ? void 0 : _inputSize$current.scrollHeight) > internalMaxHeight ? internalMaxHeight : (_inputSize$current2 = inputSize.current) === null || _inputSize$current2 === void 0 ? void 0 : _inputSize$current2.scrollHeight;
-    onResize(newHeight);
+    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT) onResize(newHeight);
     setHeight(newHeight);
     setShowScroll(((_inputSize$current3 = inputSize.current) === null || _inputSize$current3 === void 0 ? void 0 : _inputSize$current3.scrollHeight) - ((_inputSize$current4 = inputSize.current) === null || _inputSize$current4 === void 0 ? void 0 : _inputSize$current4.clientHeight) > 5);
-  }, [inputValue, internalMaxHeight, onResize]);
+  }, [inputValue, internalMaxHeight, height, onResize]);
   React__default["default"].useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.focusToComposer = () => {
@@ -108,7 +109,9 @@ const ChatComposer = props => {
     onKeyDown: onKeyDown,
     placeholder: placeholder,
     "aria-label": "Message to send",
-    "data-testid": "chat-composer-textarea"
+    "data-testid": "chat-composer-textarea",
+    name: "chat-composer-textarea",
+    id: "chat-composer-textarea"
   }), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     height: "32px",
     alignItems: "center"
@@ -149,7 +152,7 @@ const ChatComposer = props => {
     children: [/*#__PURE__*/_jsx__default["default"](styled.StyledCounterErrorA11y, {
       role: "alert"
     }, void 0, maxLengthMessage || "You have entered ".concat(inputLength, " characters and have exceeded the limit by ").concat(inputLength - inputMaxLength, ". Please limit to less than ").concat(inputMaxLength, " characters. ")), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
-  }) : '', inputMaxLength ? " ".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))));
+  }) : '', inputMaxLength && !maxLengthMessage ? " ".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))));
 };
 
 ChatComposer.defaultProps = props.defaultComposerPros;

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

@@ -36,7 +36,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 const ChatContainer = props$1 => {
-  var _containerRef$current;
+  var _messagesListProps$me2, _containerRef$current;
 
   useValidateProps.useValidateProps(props$1, props.containerProps);
   const {
@@ -84,7 +84,9 @@ const ChatContainer = props$1 => {
       const ref = actionRef || listRef;
 
       if (e.shiftKey && e.key === 'Tab') {
-        if (messagesListProps.messages.length > 0) {
+        var _messagesListProps$me;
+
+        if (((_messagesListProps$me = messagesListProps.messages) === null || _messagesListProps$me === void 0 ? void 0 : _messagesListProps$me.length) > 0) {
           e.preventDefault();
 
           if (['top', 'bottom'].includes(bannerPosition)) {
@@ -98,7 +100,7 @@ const ChatContainer = props$1 => {
         }
       }
     }
-  }, [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages.length]); // Map actions
+  }, [actionRef, onComposerKeyDown, bannerPosition, (_messagesListProps$me2 = messagesListProps.messages) === null || _messagesListProps$me2 === void 0 ? void 0 : _messagesListProps$me2.length]); // Map actions
 
   React__default["default"].useEffect(() => {
     if (actionRef && actionRef.current) {

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

@@ -26,7 +26,6 @@ var MessageDelimiter = require('../message-delimiter/MessageDelimiter.js');
 var SystemMessage = require('../system-message/SystemMessage.js');
 var styled = require('./styled.js');
 var props = require('./props.js');
-var useValidateProps = require('./config/useValidateProps.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -54,8 +53,7 @@ const getPadding = _ref => {
   return padding;
 };
 
-const ChatContainerMessagesList = props$2 => {
-  useValidateProps.useValidateProps(props$2, props.listProps);
+const ChatContainerMessagesList = props => {
   const {
     sendingText,
     bannerPosition,
@@ -67,7 +65,7 @@ const ChatContainerMessagesList = props$2 => {
     hasMoreItems,
     isLoading,
     bannerRef
-  } = props$2;
+  } = props;
   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
@@ -96,6 +94,7 @@ const ChatContainerMessagesList = props$2 => {
       return [];
     }
 
+    if (!virtualListRef.current) return [];
     pendingOnScroll.current = false;
     const {
       bottom,
@@ -138,6 +137,7 @@ const ChatContainerMessagesList = props$2 => {
       };
 
       actionRef.current.getMessagesInView = onScrollStop;
+      onScrollStop(); // init useMemo due to debounce use.
 
       actionRef.current.focusToIndex = function (a) {
         let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
@@ -203,12 +203,7 @@ const ChatContainerMessagesList = props$2 => {
 
           e.preventDefault();
           (_loadMoreRef$current2 = loadMoreRef.current) === null || _loadMoreRef$current2 === void 0 ? void 0 : _loadMoreRef$current2.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();
-        } else if (!e.shiftKey) {
+        } else if (hasMoreItems === 'top' && e.shiftKey) ; else if (!e.shiftKey) {
           if (bannerPosition) {
             e.preventDefault();
             bannerRef.current.focusOnWrapper();
@@ -222,7 +217,7 @@ const ChatContainerMessagesList = props$2 => {
 
         break;
     }
-  }, [actionRef, bannerRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
+  }, [bannerRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
   const handleListKey = React__default["default"].useCallback(e => {
     const {
       key
@@ -262,15 +257,15 @@ const ChatContainerMessagesList = props$2 => {
       case 'Tab':
         if (document.activeElement !== loadMoreRef.current) {
           if (hasMoreItems === 'bottom' && !e.shiftKey) {
-            var _loadMoreRef$current4;
+            var _loadMoreRef$current3;
 
             e.preventDefault();
-            (_loadMoreRef$current4 = loadMoreRef.current) === null || _loadMoreRef$current4 === void 0 ? void 0 : _loadMoreRef$current4.focus();
+            (_loadMoreRef$current3 = loadMoreRef.current) === null || _loadMoreRef$current3 === void 0 ? void 0 : _loadMoreRef$current3.focus();
           } else if (hasMoreItems === 'top' && e.shiftKey) {
-            var _loadMoreRef$current5;
+            var _loadMoreRef$current4;
 
             e.preventDefault();
-            (_loadMoreRef$current5 = loadMoreRef.current) === null || _loadMoreRef$current5 === void 0 ? void 0 : _loadMoreRef$current5.focus();
+            (_loadMoreRef$current4 = loadMoreRef.current) === null || _loadMoreRef$current4 === void 0 ? void 0 : _loadMoreRef$current4.focus();
           } else if (!e.shiftKey) {
             e.preventDefault();
             actionRef.current.focusToComposer();

package/esm/ChatDataTestids.js

@@ -17,7 +17,8 @@ const ChatDataTestIds = {
   SYSTEM_MSG_TIME: 'chat-system-message-time',
   BUBBLE: 'ds-chat-bubble',
   BUBBLE_TITLE: 'chat-bubble-title',
-  BUBBLE_BODY: 'chat-bubble-body'
+  BUBBLE_BODY: 'chat-bubble-body',
+  BANNER: 'ds-banner-container'
 };
 
 export { ChatDataTestIds };

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

@@ -42,6 +42,7 @@ const ChatComposer = props => {
     dataTestid,
     actionRef
   } = props;
+  const COMPOSER_MIN_HEIGHT = 32;
   const input = React.useRef();
   const inputSize = React.useRef();
   const inputSend = React.useRef();
@@ -52,10 +53,10 @@ const ChatComposer = props => {
     var _inputSize$current, _inputSize$current2, _inputSize$current3, _inputSize$current4;
 
     const newHeight = ((_inputSize$current = inputSize.current) === null || _inputSize$current === void 0 ? void 0 : _inputSize$current.scrollHeight) > internalMaxHeight ? internalMaxHeight : (_inputSize$current2 = inputSize.current) === null || _inputSize$current2 === void 0 ? void 0 : _inputSize$current2.scrollHeight;
-    onResize(newHeight);
+    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT) onResize(newHeight);
     setHeight(newHeight);
     setShowScroll(((_inputSize$current3 = inputSize.current) === null || _inputSize$current3 === void 0 ? void 0 : _inputSize$current3.scrollHeight) - ((_inputSize$current4 = inputSize.current) === null || _inputSize$current4 === void 0 ? void 0 : _inputSize$current4.clientHeight) > 5);
-  }, [inputValue, internalMaxHeight, onResize]);
+  }, [inputValue, internalMaxHeight, height, onResize]);
   React.useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.focusToComposer = () => {
@@ -98,7 +99,9 @@ const ChatComposer = props => {
     onKeyDown: onKeyDown,
     placeholder: placeholder,
     "aria-label": "Message to send",
-    "data-testid": "chat-composer-textarea"
+    "data-testid": "chat-composer-textarea",
+    name: "chat-composer-textarea",
+    id: "chat-composer-textarea"
   }), /*#__PURE__*/_jsx(Grid, {
     height: "32px",
     alignItems: "center"
@@ -139,7 +142,7 @@ const ChatComposer = props => {
     children: [/*#__PURE__*/_jsx(StyledCounterErrorA11y, {
       role: "alert"
     }, void 0, maxLengthMessage || "You have entered ".concat(inputLength, " characters and have exceeded the limit by ").concat(inputLength - inputMaxLength, ". Please limit to less than ").concat(inputMaxLength, " characters. ")), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
-  }) : '', inputMaxLength ? " ".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}))));
+  }) : '', inputMaxLength && !maxLengthMessage ? " ".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}))));
 };
 
 ChatComposer.defaultProps = defaultComposerPros;

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

@@ -24,7 +24,7 @@ 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 _containerRef$current;
+  var _messagesListProps$me2, _containerRef$current;
 
   useValidateProps(props, containerProps);
   const {
@@ -72,7 +72,9 @@ const ChatContainer = props => {
       const ref = actionRef || listRef;
 
       if (e.shiftKey && e.key === 'Tab') {
-        if (messagesListProps.messages.length > 0) {
+        var _messagesListProps$me;
+
+        if (((_messagesListProps$me = messagesListProps.messages) === null || _messagesListProps$me === void 0 ? void 0 : _messagesListProps$me.length) > 0) {
           e.preventDefault();
 
           if (['top', 'bottom'].includes(bannerPosition)) {
@@ -86,7 +88,7 @@ const ChatContainer = props => {
         }
       }
     }
-  }, [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages.length]); // Map actions
+  }, [actionRef, onComposerKeyDown, bannerPosition, (_messagesListProps$me2 = messagesListProps.messages) === null || _messagesListProps$me2 === void 0 ? void 0 : _messagesListProps$me2.length]); // Map actions
 
   React.useEffect(() => {
     if (actionRef && actionRef.current) {

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

@@ -22,7 +22,6 @@ import { MessageDelimiter } from '../message-delimiter/MessageDelimiter.js';
 import { SystemMessage } from '../system-message/SystemMessage.js';
 import { ListItem, StyledWrapperListItem, StyledWrapper, StyledChatContainerContentList, StyledChatContainerContentListScroll, StyledLoadMoreContainer } from './styled.js';
 import { listProps, defaultProps } from './props.js';
-import { useValidateProps } from './config/useValidateProps.js';
 import { jsx } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -44,7 +43,6 @@ const getPadding = _ref => {
 };
 
 const ChatContainerMessagesList = props => {
-  useValidateProps(props, listProps);
   const {
     sendingText,
     bannerPosition,
@@ -85,6 +83,7 @@ const ChatContainerMessagesList = props => {
       return [];
     }
 
+    if (!virtualListRef.current) return [];
     pendingOnScroll.current = false;
     const {
       bottom,
@@ -127,6 +126,7 @@ const ChatContainerMessagesList = props => {
       };
 
       actionRef.current.getMessagesInView = onScrollStop;
+      onScrollStop(); // init useMemo due to debounce use.
 
       actionRef.current.focusToIndex = function (a) {
         let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
@@ -192,12 +192,7 @@ const ChatContainerMessagesList = props => {
 
           e.preventDefault();
           (_loadMoreRef$current2 = loadMoreRef.current) === null || _loadMoreRef$current2 === void 0 ? void 0 : _loadMoreRef$current2.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();
-        } else if (!e.shiftKey) {
+        } else if (hasMoreItems === 'top' && e.shiftKey) ; else if (!e.shiftKey) {
           if (bannerPosition) {
             e.preventDefault();
             bannerRef.current.focusOnWrapper();
@@ -211,7 +206,7 @@ const ChatContainerMessagesList = props => {
 
         break;
     }
-  }, [actionRef, bannerRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
+  }, [bannerRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
   const handleListKey = React.useCallback(e => {
     const {
       key
@@ -251,15 +246,15 @@ const ChatContainerMessagesList = props => {
       case 'Tab':
         if (document.activeElement !== loadMoreRef.current) {
           if (hasMoreItems === 'bottom' && !e.shiftKey) {
-            var _loadMoreRef$current4;
+            var _loadMoreRef$current3;
 
             e.preventDefault();
-            (_loadMoreRef$current4 = loadMoreRef.current) === null || _loadMoreRef$current4 === void 0 ? void 0 : _loadMoreRef$current4.focus();
+            (_loadMoreRef$current3 = loadMoreRef.current) === null || _loadMoreRef$current3 === void 0 ? void 0 : _loadMoreRef$current3.focus();
           } else if (hasMoreItems === 'top' && e.shiftKey) {
-            var _loadMoreRef$current5;
+            var _loadMoreRef$current4;
 
             e.preventDefault();
-            (_loadMoreRef$current5 = loadMoreRef.current) === null || _loadMoreRef$current5 === void 0 ? void 0 : _loadMoreRef$current5.focus();
+            (_loadMoreRef$current4 = loadMoreRef.current) === null || _loadMoreRef$current4 === void 0 ? void 0 : _loadMoreRef$current4.focus();
           } else if (!e.shiftKey) {
             e.preventDefault();
             actionRef.current.focusToComposer();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-chat",
-  "version": "2.1.0-rc.4",
+  "version": "2.2.0-alpha.1",
   "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.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",
+    "@elliemae/ds-banner": "2.2.0-alpha.1",
+    "@elliemae/ds-button": "2.2.0-alpha.1",
+    "@elliemae/ds-grid": "2.2.0-alpha.1",
+    "@elliemae/ds-icons": "2.2.0-alpha.1",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.2.0-alpha.1",
+    "@elliemae/ds-props-helpers": "2.2.0-alpha.1",
+    "@elliemae/ds-system": "2.2.0-alpha.1",
+    "@elliemae/ds-tooltip": "2.2.0-alpha.1",
+    "@elliemae/ds-truncated-tooltip-text": "2.2.0-alpha.1",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.2",
     "react-virtual": "~2.3.2"

package/types/ChatDataTestids.d.ts

@@ -18,4 +18,5 @@ export declare const ChatDataTestIds: {
     BUBBLE: string;
     BUBBLE_TITLE: string;
     BUBBLE_BODY: string;
+    BANNER: string;
 };

package/types/tests/utils.d.ts

@@ -1,27 +1 @@
-export declare const preLoadMessages2: ({
-    dsId: string;
-    body: string;
-    type: string;
-    title: string;
-    time: string;
-    extraProps?: undefined;
-    helpMessage?: undefined;
-} | {
-    dsId: string;
-    type: string;
-    title: string;
-    extraProps: {
-        'data-testid': string;
-    };
-    body?: undefined;
-    time?: undefined;
-    helpMessage?: undefined;
-} | {
-    dsId: string;
-    body: string;
-    type: string;
-    title: string;
-    time: string;
-    helpMessage: string | null;
-    extraProps?: undefined;
-})[];
+export declare const loadMsgs: (q: number) => unknown;