@elliemae/ds-chat 2.2.0-alpha.4 → 3.0.0-next.2

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

@@ -1,15 +1,31 @@
-import * as React from "react";
-import React2 from "react";
-import { noop } from "lodash";
-import { describe } from "react-desc";
-import DSIndeterminateProgressIndicator from "@elliemae/ds-indeterminate-progress-indicator";
-import DSBanner, { BANNER_TYPES } from "@elliemae/ds-banner";
-import { ChatComposer } from "../chat-composer";
-import { ChatContainerMessagesList } from "../chat-container-messages-list";
-import { defaultProps, containerProps } from "./props";
-import { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from "./styled";
-import { useValidateProps } from "./config/useValidateProps";
-const ChatContainer = (props) => {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+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 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 { jsxs, jsx } from 'react/jsx-runtime';
+
+var _DSIndeterminateProgr;
+
+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; }
+
+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;
+
   useValidateProps(props, containerProps);
   const {
     sendingText,
@@ -18,7 +34,10 @@ const ChatContainer = (props) => {
     bannerProps,
     messagesListProps,
     composerProps,
-    composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },
+    composerProps: {
+      onResize: onComposerResize,
+      onKeyDown: onComposerKeyDown
+    },
     actionRef,
     device,
     isLoading,
@@ -26,103 +45,118 @@ const ChatContainer = (props) => {
     getMoreMessages,
     ariaLabel
   } = props;
-  const bannerRef = React2.useRef({ focusOnWrapper: noop, focusOnLink: noop });
-  const containerRef = React2.useRef();
-  const listRef = React2.useRef({ scrollToIndex: noop });
-  const onResize = React2.useCallback((height) => {
-    if (onComposerResize)
-      onComposerResize(height);
+  const bannerRef = React.useRef({
+    focusOnWrapper: noop,
+    focusOnLink: noop
+  });
+  const containerRef = React.useRef();
+  const listRef = React.useRef({
+    scrollToIndex: noop
+  });
+  const onResize = React.useCallback(height => {
+    if (onComposerResize) onComposerResize(height);
+    /*
+       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"
+        align: 'start'
       });
     }, 50);
   }, [onComposerResize, messagesListProps.messages, actionRef]);
-  const Container = device === "desktop" ? StyledChatContainerContent : MobileStyledChatContainerContent;
-  const handleTabs = React2.useCallback((e) => {
-    if (onComposerKeyDown)
-      onComposerKeyDown(e);
-    else {
+  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;
+  const handleTabs = React.useCallback(e => {
+    if (onComposerKeyDown) onComposerKeyDown(e);else {
       const ref = actionRef || listRef;
-      if (e.shiftKey && e.key === "Tab") {
-        if (messagesListProps.messages?.length > 0) {
+
+      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) {
           e.preventDefault();
-          if (["top", "bottom"].includes(bannerPosition)) {
+
+          if (['top', 'bottom'].includes(bannerPosition)) {
             bannerRef.current.focusOnWrapper();
           } else {
+            var _ref$current;
+
             const last = ref.current.getMessagesInView().pop();
-            ref.current?.focusToIndexWithoutScroll(last);
+            (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focusToIndexWithoutScroll(last);
           }
         }
       }
     }
-  }, [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length]);
-  React2.useEffect(() => {
+  }, [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) {
       actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;
       actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;
     }
   }, [actionRef]);
-  return /* @__PURE__ */ React2.createElement(Container, {
-    rows: ["minmax(0, 1fr)", "auto"],
+  return /*#__PURE__*/jsxs(Container, {
+    rows: ['minmax(0, 1fr)', 'auto'],
     ref: containerRef,
     role: "region",
-    "aria-label": ariaLabel
-  }, /* @__PURE__ */ React2.createElement("div", {
-    style: { position: "relative", overflow: "hidden" }
-  }, /* @__PURE__ */ React2.createElement(ChatContainerMessagesList, {
-    ...messagesListProps,
-    actionRef: actionRef || listRef,
-    isLoading,
-    hasMoreItems,
-    getMoreMessages,
-    sendingMessages,
-    sendingText,
-    bannerPosition,
-    bannerRef
-  }), ["top", "bottom"].includes(isLoading) ? /* @__PURE__ */ React2.createElement(StyledIndicatorContainer, {
-    isLoading,
-    "data-testid": "ds-chat-loading-indicator"
-  }, /* @__PURE__ */ React2.createElement(DSIndeterminateProgressIndicator, {
-    processing: true,
-    title: "Loading"
-  })) : null, /* @__PURE__ */ React2.createElement(StyledIndicatorContainer, {
-    linear: true,
-    isLoading: bannerPosition
-  }, /* @__PURE__ */ React2.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: bannerProps.type || BANNER_TYPES.INFO,
-    actionRef: bannerRef
-  })), sendingMessages && sendingMessages.length > 0 ? /* @__PURE__ */ React2.createElement(StyledIndicatorContainer, {
-    isLoading: "bottom",
-    linear: true,
-    "data-testid": "ds-chat-loading-indicator"
-  }, /* @__PURE__ */ React2.createElement(DSIndeterminateProgressIndicator, {
-    processing: true,
-    title: sendingText,
-    lineOnly: true
-  })) : null), /* @__PURE__ */ React2.createElement(ChatComposer, {
-    ...composerProps,
-    onKeyDown: handleTabs,
-    onResize,
-    maxHeight: (containerRef.current?.clientHeight || 0) / 2,
-    actionRef: actionRef || listRef
-  }));
+    "aria-label": ariaLabel,
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        position: 'relative',
+        overflow: 'hidden'
+      }
+    }, void 0, /*#__PURE__*/jsx(ChatContainerMessagesList, _objectSpread(_objectSpread({}, messagesListProps), {}, {
+      actionRef: actionRef || listRef,
+      isLoading: isLoading,
+      hasMoreItems: hasMoreItems,
+      getMoreMessages: getMoreMessages,
+      sendingMessages: sendingMessages,
+      sendingText: sendingText,
+      bannerPosition: bannerPosition,
+      bannerRef: bannerRef
+    })), ['top', 'bottom'].includes(isLoading) ? /*#__PURE__*/_jsx(StyledIndicatorContainer, {
+      isLoading: isLoading,
+      "data-testid": "ds-chat-loading-indicator"
+    }, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
+      processing: true,
+      title: "Loading"
+    }))) : null, /*#__PURE__*/_jsx(StyledIndicatorContainer, {
+      linear: true,
+      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: bannerProps.type || BANNER_TYPES.INFO,
+      actionRef: bannerRef
+    })), sendingMessages && sendingMessages.length > 0 ? /*#__PURE__*/_jsx(StyledIndicatorContainer, {
+      isLoading: "bottom",
+      linear: true,
+      "data-testid": "ds-chat-loading-indicator"
+    }, void 0, /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
+      processing: true,
+      title: sendingText,
+      lineOnly: true
+    })) : 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,
+      actionRef: actionRef || listRef
+    }))]
+  });
 };
-ChatContainer.propTypes = containerProps;
+
 ChatContainer.defaultProps = defaultProps;
 const ChatContainerWithSchema = describe(ChatContainer);
 ChatContainerWithSchema.propTypes = containerProps;
-export {
-  ChatContainer,
-  ChatContainerWithSchema
-};
-//# sourceMappingURL=ChatContainer.js.map
+
+export { ChatContainer, ChatContainerWithSchema };

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

@@ -1,9 +1,7 @@
-import * as React from "react";
-import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+
 const useValidateProps = (props, propTypes) => {
   useValidateTypescriptPropTypes(props, propTypes);
 };
-export {
-  useValidateProps
-};
-//# sourceMappingURL=useValidateProps.js.map
+
+export { useValidateProps };

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

@@ -1,7 +1 @@
-import * as React from "react";
-import { ChatContainer, ChatContainerWithSchema } from "./ChatContainer";
-export {
-  ChatContainer,
-  ChatContainerWithSchema
-};
-//# sourceMappingURL=index.js.map
+export { ChatContainer, ChatContainerWithSchema } from './ChatContainer.js';

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

@@ -1,65 +1,44 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
-import { noop } from "lodash";
-import { BANNER_TYPES } from "@elliemae/ds-banner";
-import {
-  defaultProps as defaultListProps
-} from "../chat-container-messages-list/props";
-import { defaultComposerPros } from "../chat-composer/props";
+import { PropTypes } from 'react-desc';
+import { noop } from 'lodash';
+import { BANNER_TYPES } from '@elliemae/ds-banner';
+import { defaultProps as defaultProps$1 } from '../chat-container-messages-list/props.js';
+import { defaultComposerPros } from '../chat-composer/props.js';
+
 const defaultProps = {
-  messagesListProps: defaultListProps,
+  messagesListProps: defaultProps$1,
   composerProps: defaultComposerPros,
-  actionRef: void 0,
+  actionRef: undefined,
   autoScroll: false,
-  device: "desktop",
-  isLoading: void 0,
-  hasMoreItems: void 0,
+  device: 'desktop',
+  isLoading: undefined,
+  hasMoreItems: undefined,
   getMoreMessages: noop,
-  bannerPosition: void 0,
+  bannerPosition: undefined,
   bannerProps: {
     type: BANNER_TYPES.INFO,
-    label: "Unread Messages",
-    viewLabel: "View",
+    label: 'Unread Messages',
+    viewLabel: 'View',
     onView: noop,
     onClose: noop
   },
-  sendingMessages: void 0,
-  sendingText: "Sending",
-  ariaLabel: "Chat window"
+  sendingMessages: undefined,
+  sendingText: 'Sending',
+  ariaLabel: 'Chat window'
 };
 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),
-  device: PropTypes.string.description("Option to render mobile or desktop style composer").defaultValue(defaultProps.device),
-  isLoading: PropTypes.oneOf(["top", "bottom", void 0]).description("Show Loading messages indicator at the `top` or `bottom` of the container"),
-  hasMoreItems: PropTypes.oneOf(["top", "bottom", void 0]).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", void 0]).description("Show Loading messages indicator at the `top` or `bottom` of the container"),
-  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: 
-        { 
-          scrollToIndex: (n: number) => void,
-          getMessagesInView: () => number[],
-          focusToIndex: (n: number) => void,
-          focusToList: () => void,
-          focusToComposer: () => void,
-          focusToSend: () => void,
-        }
-        
-      `).defaultValue(defaultProps.actionRef),
-  ariaLabel: PropTypes.string.description("Aria Label description for chat container").defaultValue(defaultProps.ariaLabel)
+  composerProps: PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),
+  autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),
+  device: PropTypes.string.description('Option to render mobile or desktop style composer').defaultValue(defaultProps.device),
+  isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Loading messages indicator at the `top` or `bottom` of the container'),
+  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),
+  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),
+  ariaLabel: PropTypes.string.description('Aria Label description for chat container').defaultValue(defaultProps.ariaLabel)
 };
-export {
-  containerProps,
-  defaultProps
-};
-//# sourceMappingURL=props.js.map
+
+export { containerProps, defaultProps };

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

@@ -1,81 +1,18 @@
-import * as React from "react";
-import styled from "styled-components";
-import { Grid } from "@elliemae/ds-grid";
-import { StyledTitleRightBubble, StyledTitleLeftBubble, StyleBodyWrapper } from "../bubble/styled";
-import { StyledComposerInput } from "../chat-composer/styled";
-import { Wrapper, Title, Time, Message } from "../system-message/style";
-const CONTAINER_WIDTH = 300;
-const StyledChatContainerContent = styled(Grid)`
-  height: 100%;
-  min-width: ${CONTAINER_WIDTH}px;
-  overflow: hidden;
-  background: ${(props) => props.theme.colors.neutral["050"]};
-  position: relative;
-`;
-const StyledIndicatorContainer = styled.div`
-  transition: 0.4s ease-in-out;
-  position: absolute;
-  visibility: hidden;
-  pointer-events: none;
-  width: 100%;
-  padding: 0 ${(props) => !props.linear ? props.theme.space.xxs : 0};
-  left: 0;
-  right: 0;
-  background: ${(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;
-  ` : ""}
-
-  & div,a {
-    font-size: 13px;
-  }
-`;
-const MobileStyledChatContainerContent = styled(StyledChatContainerContent)`
-  ${StyledTitleLeftBubble},
-  ${StyleBodyWrapper} {
-    font-size: 16px;
-  }
-
-  ${StyledTitleRightBubble} {
-    font-size: 13px;
-  }
-
-  ${Wrapper} {
-    background-color: #fff;
-    box-shadow: -0 1px 3px rgba(53, 60, 70, 0.8);
-  }
+import styled from 'styled-components';
+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';
 
-  ${Title},
-  ${Message} {
-    font-size: 16px;
-    text-align: left;
-  }
-
-  ${Time} {
-    font-size: 13px;
-  }
-
-  ${StyledComposerInput} {
-    font-size: 16px;
-  }
+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, 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  " : '');
+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);
 
-  ${StyledIndicatorContainer} {
-    font-size: 16px;
-  }
-`;
-export {
-  CONTAINER_WIDTH,
-  MobileStyledChatContainerContent,
-  StyledChatContainerContent,
-  StyledIndicatorContainer
-};
-//# sourceMappingURL=styled.js.map
+export { CONTAINER_WIDTH, MobileStyledChatContainerContent, StyledChatContainerContent, StyledIndicatorContainer };

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

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

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

@@ -1,15 +1,23 @@
-import * as React from "react";
-import React2 from "react";
-const validHeaderChilds = (children) => React2.Children.toArray(children).filter((e) => {
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.constructor.js';
+import 'core-js/modules/esnext.async-iterator.to-array.js';
+import 'core-js/modules/esnext.iterator.to-array.js';
+import React from 'react';
+
+const validHeaderChilds = children => React.Children.toArray(children).filter(e => {
   if (Array.isArray(e.props.children)) {
     return false;
   }
-  if (e.props.children === void 0 && e.$$typeof.toString() === "Symbol(react.element)") {
+
+  if (e.props.children === undefined && e.$$typeof.toString() === 'Symbol(react.element)') {
     return true;
   }
+
   return !!e.props.children;
-}).map(() => "32px");
-export {
-  validHeaderChilds
-};
-//# sourceMappingURL=helpers.js.map
+}).map(() => '32px');
+
+export { validHeaderChilds };

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

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