@elliemae/ds-chat 1.57.1 → 2.0.0-alpha.11

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

@@ -1,65 +1,49 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import React from 'react';
 import { noop } from 'lodash';
 import { describe } from 'react-desc';
-import DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';
+import DSIndeterminateProgressIndicator from '@elliemae/ds-basic/IndeterminateProgressIndicator';
 import DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';
 import { ChatComposer } from '../chat-composer/ChatContainerComposer.js';
 import { ChatContainerMessagesList } from '../chat-container-messages-list/ChatContainerMessagesList.js';
 import { containerProps, defaultProps } from './props.js';
 import { StyledIndicatorContainer, StyledChatContainerContent, MobileStyledChatContainerContent } from './styled.js';
 import { useValidateProps } from './config/useValidateProps.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-icons';
-import '../chat-composer/styled.js';
-import 'styled-components';
-import '@elliemae/ds-button';
-import '../chat-composer/config/useValidateProps.js';
-import '@elliemae/ds-props-helpers';
-import '../chat-composer/props.js';
-import 'react-virtual';
-import '../bubble/ChatBubble.js';
-import '../bubble/styled.js';
-import '../bubble/props.js';
-import 'prop-types';
-import '../bubble/config/useValidateProps.js';
-import '../bubble/ChatBubbleArrow.js';
-import '../message-delimiter/MessageDelimiter.js';
-import '../message-delimiter/styled.js';
-import '../message-delimiter/props.js';
-import '../message-delimiter/config/useValidateProps.js';
-import '../system-message/SystemMessage.js';
-import '../system-message/style.js';
-import '../system-message/props.js';
-import '../system-message/config/useValidateProps.js';
-import '../chat-container-messages-list/styled.js';
-import '../chat-container-messages-list/props.js';
-import '../chat-container-messages-list/config/useValidateProps.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-var ChatContainer = function ChatContainer(props) {
+var _DSIndeterminateProgr, _StyledIndicatorConta;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+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 ChatContainer = props => {
   var _containerRef$current;
 
   useValidateProps(props, ChatContainerWithSchema.toTypescript());
-  var sendingText = props.sendingText,
-      sendingMessages = props.sendingMessages,
-      bannerPosition = props.bannerPosition,
-      bannerProps = props.bannerProps,
-      messagesListProps = props.messagesListProps,
-      composerProps = props.composerProps,
-      onComposerResize = props.composerProps.onResize,
-      actionRef = props.actionRef,
-      autoScroll = props.autoScroll,
-      device = props.device,
-      isLoading = props.isLoading,
-      hasMoreItems = props.hasMoreItems,
-      getMoreMessages = props.getMoreMessages;
-  var containerRef = React.useRef();
-  var listRef = React.useRef({
+  const {
+    sendingText,
+    sendingMessages,
+    bannerPosition,
+    bannerProps,
+    messagesListProps,
+    composerProps,
+    composerProps: {
+      onResize: onComposerResize
+    },
+    actionRef,
+    autoScroll,
+    device,
+    isLoading,
+    hasMoreItems,
+    getMoreMessages
+  } = props;
+  const containerRef = React.useRef();
+  const listRef = React.useRef({
     scrollToIndex: noop
   });
-  var onResize = React.useCallback(function (height) {
+  const onResize = React.useCallback(height => {
     if (onComposerResize) onComposerResize(height);
 
     if (autoScroll) {
@@ -68,62 +52,60 @@ var ChatContainer = function ChatContainer(props) {
       });
     }
   }, [onComposerResize, messagesListProps.messages, autoScroll]);
-  var Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;
-  return /*#__PURE__*/React.createElement(Container, {
+  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;
+  return /*#__PURE__*/jsxs(Container, {
     rows: ['minmax(0, 1fr)', 'auto'],
     ref: containerRef,
     role: "region",
-    "aria-label": "chat window"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'relative',
-      overflow: 'hidden'
-    }
-  }, /*#__PURE__*/React.createElement(ChatContainerMessagesList, _extends({}, messagesListProps, {
-    actionRef: actionRef || listRef,
-    isLoading: isLoading,
-    hasMoreItems: hasMoreItems,
-    getMoreMessages: getMoreMessages,
-    sendingMessages: sendingMessages,
-    sendingText: sendingText
-  })), ['top', 'bottom'].includes(isLoading) ? /*#__PURE__*/React.createElement(StyledIndicatorContainer, {
-    isLoading: isLoading
-  }, /*#__PURE__*/React.createElement(DSIndeterminateProgressIndicator, {
-    processing: true,
-    title: "Loading"
-  })) : null, /*#__PURE__*/React.createElement(StyledIndicatorContainer, {
-    isLoading: bannerPosition
-  }, /*#__PURE__*/React.createElement(DSBanner, {
-    showCloseButton: true,
-    label: bannerProps.label || 'Unread messages',
-    containerProps: {
-      id: 'ds-chat-banner'
-    },
-    actionLink: {
-      label: bannerProps.viewLabel || 'View',
-      onClick: bannerProps.onView
-    },
-    onClose: bannerProps.onClose,
-    isOpen: true,
-    type: BANNER_TYPES.INFO
-  })), sendingMessages && sendingMessages.length > 0 ? /*#__PURE__*/React.createElement(StyledIndicatorContainer, {
-    isLoading: "bottom",
-    linear: true
-  }, /*#__PURE__*/React.createElement(DSIndeterminateProgressIndicator, {
-    processing: true,
-    title: "Loading",
-    lineOnly: true
-  })) : null), /*#__PURE__*/React.createElement(ChatComposer, _extends({}, composerProps, {
-    onResize: onResize,
-    maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,
-    actionRef: actionRef || listRef
-  })));
+    "aria-label": "chat window",
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        position: 'relative'
+      }
+    }, void 0, /*#__PURE__*/jsx(ChatContainerMessagesList, _objectSpread(_objectSpread({}, messagesListProps), {}, {
+      actionRef: actionRef || listRef,
+      isLoading: isLoading,
+      hasMoreItems: hasMoreItems,
+      getMoreMessages: getMoreMessages,
+      sendingMessages: sendingMessages,
+      sendingText: sendingText
+    })), ['top', 'bottom'].includes(isLoading) ? /*#__PURE__*/_jsx(StyledIndicatorContainer, {
+      isLoading: isLoading
+    }, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
+      processing: true,
+      title: "Loading"
+    }))) : null, ['top', 'bottom'].includes(bannerPosition) ? /*#__PURE__*/_jsx(StyledIndicatorContainer, {
+      isLoading: bannerPosition
+    }, void 0, /*#__PURE__*/_jsx(DSBanner, {
+      showCloseButton: true,
+      label: bannerProps.label || 'Unread messages',
+      containerProps: {
+        id: 'ds-chat-banner'
+      },
+      actionLink: {
+        label: bannerProps.viewLabel || 'View',
+        onClick: bannerProps.onView
+      },
+      onClose: bannerProps.onClose,
+      isOpen: true,
+      type: BANNER_TYPES.INFO
+    })) : null, sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx(StyledIndicatorContainer, {
+      isLoading: "bottom",
+      linear: true
+    }, void 0, /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
+      processing: true,
+      title: "Loading",
+      lineOnly: true
+    }))) : null), /*#__PURE__*/jsx(ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
+      onResize: onResize,
+      maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,
+      actionRef: actionRef || listRef
+    }))]
+  });
 };
 
-ChatContainer.propTypes = containerProps;
 ChatContainer.defaultProps = defaultProps;
-var ChatContainerWithSchema = describe(ChatContainer);
+const ChatContainerWithSchema = describe(ChatContainer);
 ChatContainerWithSchema.propTypes = containerProps;
 
 export { ChatContainer, ChatContainerWithSchema };
-//# sourceMappingURL=ChatContainer.js.map

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

@@ -1,8 +1,7 @@
 import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 
-var useValidateProps = function useValidateProps(props, schema) {
+const useValidateProps = (props, schema) => {
   useValidateTypescriptPropTypes(props, schema);
 };
 
 export { useValidateProps };
-//# sourceMappingURL=useValidateProps.js.map

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

@@ -1,41 +1 @@
 export { ChatContainer, ChatContainerWithSchema } from './ChatContainer.js';
-import '@babel/runtime/helpers/esm/extends';
-import 'react';
-import 'lodash';
-import 'react-desc';
-import '@elliemae/ds-indeterminate-progress-indicator';
-import '@elliemae/ds-banner';
-import '../chat-composer/ChatContainerComposer.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-icons';
-import '../chat-composer/styled.js';
-import 'styled-components';
-import '@elliemae/ds-button';
-import '../chat-composer/config/useValidateProps.js';
-import '@elliemae/ds-props-helpers';
-import '../chat-composer/props.js';
-import '../chat-container-messages-list/ChatContainerMessagesList.js';
-import 'react-virtual';
-import '../bubble/ChatBubble.js';
-import '../bubble/styled.js';
-import '../bubble/props.js';
-import 'prop-types';
-import '../bubble/config/useValidateProps.js';
-import '../bubble/ChatBubbleArrow.js';
-import '../message-delimiter/MessageDelimiter.js';
-import '../message-delimiter/styled.js';
-import '../message-delimiter/props.js';
-import '../message-delimiter/config/useValidateProps.js';
-import '../system-message/SystemMessage.js';
-import '../system-message/style.js';
-import '../system-message/props.js';
-import '../system-message/config/useValidateProps.js';
-import '../chat-container-messages-list/styled.js';
-import '../chat-container-messages-list/props.js';
-import '../chat-container-messages-list/config/useValidateProps.js';
-import './props.js';
-import './styled.js';
-import './config/useValidateProps.js';
-//# sourceMappingURL=index.js.map

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

@@ -3,7 +3,7 @@ import { noop } from 'lodash';
 import { defaultProps as defaultProps$1 } from '../chat-container-messages-list/props.js';
 import { defaultComposerPros } from '../chat-composer/props.js';
 
-var defaultProps = {
+const defaultProps = {
   messagesListProps: defaultProps$1,
   composerProps: defaultComposerPros,
   actionRef: undefined,
@@ -22,7 +22,7 @@ var defaultProps = {
   sendingMessages: undefined,
   sendingText: 'Sending'
 };
-var containerProps = {
+const containerProps = {
   messagesListProps: PropTypes.object.description('ChatMessageList props "messages" / "onScrollEnds"').defaultValue(defaultProps.messagesListProps),
   composerProps: PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),
   autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),
@@ -38,4 +38,3 @@ var containerProps = {
 };
 
 export { containerProps, defaultProps };
-//# sourceMappingURL=props.js.map

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

@@ -3,38 +3,16 @@ import { Grid } from '@elliemae/ds-grid';
 import { StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble } from '../bubble/styled.js';
 import { StyledComposerInput } from '../chat-composer/styled.js';
 import { Wrapper, Title, Message, Time } from '../system-message/style.js';
-import '../bubble/props.js';
-import 'prop-types';
-import 'react-desc';
-import 'lodash';
-import '@elliemae/ds-button';
 
-var CONTAINER_WIDTH = 300;
-var StyledChatContainerContent = /*#__PURE__*/styled(Grid).withConfig({
+const CONTAINER_WIDTH = 300;
+const StyledChatContainerContent = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-d732wo-0"
-})(["height:100%;min-width:", "px;overflow:hidden;background:", ";position:relative;"], CONTAINER_WIDTH, function (props) {
-  return props.theme.colors.neutral['050'];
-});
-var StyledIndicatorContainer = /*#__PURE__*/styled.div.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:calc(100% + ", ");padding:0 ", ";left:-", ";right:-", ";background:", ";", " ", ""], function (props) {
-  return props.theme.space.xxs * 2;
-}, function (props) {
-  return !props.linear ? props.theme.space.xxs : 0;
-}, function (props) {
-  return props.theme.space.xxs;
-}, function (props) {
-  return props.theme.space.xxs;
-}, function (props) {
-  return props.theme.colors.neutral['000'];
-}, function (props) {
-  return props.isLoading === 'top' ? "\n  top: -41px;\n  transform: translate(0, 41px);\n  visibility: visible;\n  pointer-events: auto\n  " : '';
-}, function (props) {
-  return props.isLoading === 'bottom' ? "\n  bottom: -41px;\n  transform: translate(0, -41px);\n  visibility: visible;\n  pointer-events: auto;\n  " : '';
-});
-var MobileStyledChatContainerContent = /*#__PURE__*/styled(StyledChatContainerContent).withConfig({
+})(["position:absolute;width:calc(100% + ", ");padding:", ";left:-", ";right:-", ";background:", ";", " ", ""], props => props.theme.space.xxs, props => !props.linear ? props.theme.space.xxs : 0, props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.theme.colors.neutral['000'], props => props.isLoading === 'top' ? 'top: 0;' : '', props => props.isLoading === 'bottom' ? 'bottom: 0;' : '');
+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);
 
 export { CONTAINER_WIDTH, MobileStyledChatContainerContent, StyledChatContainerContent, StyledIndicatorContainer };
-//# sourceMappingURL=styled.js.map

package/esm/parts/chat-container-header/ChatContainerHeader.js

@@ -1,31 +1,30 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React from 'react';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { StyledChatContainerContentHeader, StyledChatContainerContentHeaderLabel, StyledChatContainerContentHeaderActions } from './styled.js';
-import { validHeaderChilds } from './helpers.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
 
-var ChatContainerHeader = function ChatContainerHeader(props) {
-  var title = props.title,
-      floating = props.floating,
-      children = props.children;
-  return /*#__PURE__*/React.createElement(StyledChatContainerContentHeader, {
+const ChatContainerHeader = props => {
+  const {
+    title,
+    floating,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(StyledChatContainerContentHeader, {
     alignItems: "center",
     cols: ['minmax(calc(100% - 64px), 1fr)', children ? 'auto' : '0px'],
     floating: floating,
     role: "heading"
-  }, /*#__PURE__*/React.createElement(StyledChatContainerContentHeaderLabel, {
+  }, void 0, /*#__PURE__*/_jsx(StyledChatContainerContentHeaderLabel, {
     "data-testid": "chat-container-header-title",
     pl: "xxs",
     pr: "xxs"
-  }, /*#__PURE__*/React.createElement(SimpleTruncatedTooltipText, {
+  }, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
     value: title
-  })), /*#__PURE__*/React.createElement(StyledChatContainerContentHeaderActions, {
-    cols: validHeaderChilds(children),
+  })), /*#__PURE__*/_jsx(StyledChatContainerContentHeaderActions, {
+    cols: React.Children.toArray(children).filter(e => e).map(() => '32px'),
     justifyContent: "flex-end",
     "data-testid": "chat-container-header-children"
-  }, children));
+  }, void 0, children));
 };
 
 export { ChatContainerHeader };
-//# sourceMappingURL=ChatContainerHeader.js.map

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

@@ -1,21 +1,14 @@
 import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
 
-var StyledChatContainerContentHeaderActions = /*#__PURE__*/styled(Grid).withConfig({
+const StyledChatContainerContentHeader = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-jmynvr-0"
-})(["max-width:80px;"]);
-var StyledChatContainerContentHeader = /*#__PURE__*/styled(Grid).withConfig({
+})(["width:100%;min-height:48px;border-bottom:1px solid ", ";background:", ";"], props => props.theme.colors.neutral['200'], props => props.theme.colors.neutral['050']);
+const StyledChatContainerContentHeaderLabel = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-jmynvr-1"
-})(["width:100%;min-height:48px;border-bottom:1px solid ", ";background:", ";", "{& button{background:transparent;}}"], function (props) {
-  return props.theme.colors.neutral['200'];
-}, function (props) {
-  return props.theme.colors.neutral['050'];
-}, StyledChatContainerContentHeaderActions);
-var StyledChatContainerContentHeaderLabel = /*#__PURE__*/styled(Grid).withConfig({
+})(["justify-content:center;align-items:center;font-weight:bold;font-size:18px;color:", ";"], props => props.theme.colors.neutral['700']);
+const StyledChatContainerContentHeaderActions = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-jmynvr-2"
-})(["justify-content:center;align-items:center;font-weight:bold;font-size:18px;color:", ";"], function (props) {
-  return props.theme.colors.neutral['700'];
-});
+})(["max-width:80px;"]);
 
 export { StyledChatContainerContentHeader, StyledChatContainerContentHeaderActions, StyledChatContainerContentHeaderLabel };
-//# sourceMappingURL=styled.js.map