@elliemae/ds-chat 1.53.4-rc.3 → 1.53.5

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/parts/chat-composer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButton } from '@elliemae/ds-button';\nimport { TextAreaProps } from './props';\n\n// Composer\nexport const StyledChatContainerContentComposer = styled(Grid)`\n  width: 100%;\n  min-height: 56px;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  padding: ${(props) => props.theme.space.xxs};\n  padding-bottom: 3px;\n  padding-top: 6px;\n  padding-left: ${(props) => props.theme.space.xs};\n  max-height: ${(props) => props.maxHeight};\n  border-top: 1px solid #cbcfd7;\n`;\n\nexport const StyledComposerInput = styled.textarea<any>`\n  padding: ${(props) => props.theme.space.xxs};\n  resize: none;\n  min-height: 32px;\n  border-radius: 2px;\n  border: solid 1px #cbcfd7;\n  color: #25292f;\n  height: ${(props: TextAreaProps) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};\n  min-width: 244px;\n  overflow-y: auto;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1;\n  transition: height 0.3s;\n  &:focus {\n    outline: none;\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n    box-shadow: inset 0 0 0 1px #8cc2ed;\n    border-radius: 2px;\n  }\n`;\nexport const StyledComposerButton = styled(DSButton)`\n  background: none;\n  &:disabled {\n    svg {\n      fill: #5d6775;\n    }\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand[600]};\n  }\n  &:focus {\n    background: ${(props) => props.theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledCounterArea = styled(Grid)`\n  text-align: right;\n  font-size: 11px;\n  height: 15px;\n  align-items: center;\n  font-style: italic;\n  ${(props) => (props.hasError ? `color:${props.theme.colors.danger[900]};` : '')}\n  position:relative;\n`;\n\nexport const StyledCounterErrorA11y = styled.span`\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n`;\n"],"names":["StyledChatContainerContentComposer","styled","Grid","props","theme","colors","neutral","space","xxs","xs","maxHeight","StyledComposerInput","textarea","height","brand","StyledComposerButton","DSButton","StyledCounterArea","hasError","danger","StyledCounterErrorA11y","span"],"mappings":";;;;;;;;;;;;AAKA;IACaA,kCAAkC,gBAAGC,0BAAM,CAACC,WAAD,CAAT;AAAA;AAAA,mKAG/B,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CAH+B,EAIlC,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYG,KAAZ,CAAkBC,GAA7B;AAAA,CAJkC,EAO7B,UAACL,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYG,KAAZ,CAAkBE,EAA7B;AAAA,CAP6B,EAQ/B,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACO,SAAjB;AAAA,CAR+B;IAYlCC,mBAAmB,gBAAGV,0BAAM,CAACW,QAAV;AAAA;AAAA,4TACnB,UAACT,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYG,KAAZ,CAAkBC,GAA7B;AAAA,CADmB,EAOpB,UAACL,KAAD;AAAA,SAA2B,OAAOA,KAAK,CAACU,MAAb,KAAwB,QAAxB,aAAsCV,KAAK,CAACU,MAA5C,UAAyDV,KAAK,CAACU,MAA1F;AAAA,CAPoB,EAgBR,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBS,KAAnB,CAAyB,GAAzB,CAAX;AAAA,CAhBQ;IAqBnBC,oBAAoB,gBAAGd,0BAAM,CAACe,iBAAD,CAAT;AAAA;AAAA,+FAQrB,UAACb,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBS,KAAnB,CAAyB,GAAzB,CAAX;AAAA,CARqB,EAWf,UAACX,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBS,KAAnB,CAAyB,GAAzB,CAAX;AAAA,CAXe;IAepBG,iBAAiB,gBAAGhB,0BAAM,CAACC,WAAD,CAAT;AAAA;AAAA,iHAM1B,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACe,QAAN,mBAA0Bf,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBc,MAAnB,CAA0B,GAA1B,CAA1B,SAA8D,EAA1E;AAAA,CAN0B;IAUjBC,sBAAsB,gBAAGnB,0BAAM,CAACoB,IAAV;AAAA;AAAA;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/parts/chat-composer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButton } from '@elliemae/ds-button';\nimport { TextAreaProps } from './props';\n\n// Composer\nexport const StyledChatContainerContentComposer = styled(Grid)`\n  width: 100%;\n  min-height: 56px;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  padding: ${(props) => props.theme.space.xxs};\n  padding-bottom: 3px;\n  padding-top: 6px;\n  padding-left: ${(props) => props.theme.space.xs};\n  max-height: ${(props) => props.maxHeight};\n  border-top: 1px solid #cbcfd7;\n`;\n\nexport const StyledComposerInput = styled.textarea<any>`\n  padding: ${(props) => props.theme.space.xxs};\n  resize: none;\n  min-height: 32px;\n  border-radius: 2px;\n  border: solid 1px #cbcfd7;\n  color: #25292f;\n  height: ${(props: TextAreaProps) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};\n  min-width: 244px;\n  overflow-y: auto;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1;\n  transition: height 0.3s;\n  &:focus {\n    outline: none;\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n    box-shadow: inset 0 0 0 1px #8cc2ed;\n    border-radius: 2px;\n  }\n`;\nexport const StyledComposerButton = styled(DSButton)`\n  &:disabled {\n    background: none;\n    svg {\n      fill: #5d6775;\n    }\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand[600]};\n  }\n  &:focus {\n    background: ${(props) => props.theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledCounterArea = styled(Grid)`\n  text-align: right;\n  font-size: 11px;\n  height: 15px;\n  align-items: center;\n  font-style: italic;\n  ${(props) => (props.hasError ? `color:${props.theme.colors.danger[900]};` : '')}\n  position:relative;\n`;\n\nexport const StyledCounterErrorA11y = styled.span`\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n`;\n"],"names":["StyledChatContainerContentComposer","styled","Grid","props","theme","colors","neutral","space","xxs","xs","maxHeight","StyledComposerInput","textarea","height","brand","StyledComposerButton","DSButton","StyledCounterArea","hasError","danger","StyledCounterErrorA11y","span"],"mappings":";;;;;;;;;;;;AAKA;IACaA,kCAAkC,gBAAGC,0BAAM,CAACC,WAAD,CAAT;AAAA;AAAA,mKAG/B,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CAH+B,EAIlC,UAACH,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYG,KAAZ,CAAkBC,GAA7B;AAAA,CAJkC,EAO7B,UAACL,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYG,KAAZ,CAAkBE,EAA7B;AAAA,CAP6B,EAQ/B,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACO,SAAjB;AAAA,CAR+B;IAYlCC,mBAAmB,gBAAGV,0BAAM,CAACW,QAAV;AAAA;AAAA,4TACnB,UAACT,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYG,KAAZ,CAAkBC,GAA7B;AAAA,CADmB,EAOpB,UAACL,KAAD;AAAA,SAA2B,OAAOA,KAAK,CAACU,MAAb,KAAwB,QAAxB,aAAsCV,KAAK,CAACU,MAA5C,UAAyDV,KAAK,CAACU,MAA1F;AAAA,CAPoB,EAgBR,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBS,KAAnB,CAAyB,GAAzB,CAAX;AAAA,CAhBQ;IAqBnBC,oBAAoB,gBAAGd,0BAAM,CAACe,iBAAD,CAAT;AAAA;AAAA,+FAQrB,UAACb,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBS,KAAnB,CAAyB,GAAzB,CAAX;AAAA,CARqB,EAWf,UAACX,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBS,KAAnB,CAAyB,GAAzB,CAAX;AAAA,CAXe;IAepBG,iBAAiB,gBAAGhB,0BAAM,CAACC,WAAD,CAAT;AAAA;AAAA,iHAM1B,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACe,QAAN,mBAA0Bf,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBc,MAAnB,CAA0B,GAA1B,CAA1B,SAA8D,EAA1E;AAAA,CAN0B;IAUjBC,sBAAsB,gBAAGnB,0BAAM,CAACoB,IAAV;AAAA;AAAA;;;;;;;;"}

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

@@ -12,6 +12,7 @@ var parts_chatComposer_ChatContainerComposer = require('../chat-composer/ChatCon
 var parts_chatContainerMessagesList_ChatContainerMessagesList = require('../chat-container-messages-list/ChatContainerMessagesList.js');
 var parts_chatContainer_props = require('./props.js');
 var parts_chatContainer_styled = require('./styled.js');
+var parts_chatContainer_config_useValidateProps = require('./config/useValidateProps.js');
 require('@babel/runtime/helpers/defineProperty');
 require('@babel/runtime/helpers/slicedToArray');
 require('@elliemae/ds-grid');
@@ -19,6 +20,8 @@ require('@elliemae/ds-icons/PaperAirplane');
 require('../chat-composer/styled.js');
 require('styled-components');
 require('@elliemae/ds-button');
+require('../chat-composer/config/useValidateProps.js');
+require('@elliemae/ds-props-helpers');
 require('../chat-composer/props.js');
 require('react-virtual');
 require('@elliemae/ds-basic/Button');
@@ -27,15 +30,19 @@ require('@elliemae/ds-icons/WarningCircleFill');
 require('../bubble/styled.js');
 require('../bubble/props.js');
 require('prop-types');
+require('../bubble/config/useValidateProps.js');
 require('../bubble/ChatBubbleArrow.js');
 require('../message-delimiter/MessageDelimiter.js');
 require('../message-delimiter/styled.js');
 require('../message-delimiter/props.js');
+require('../message-delimiter/config/useValidateProps.js');
 require('../system-message/SystemMessage.js');
 require('../system-message/style.js');
 require('../system-message/props.js');
+require('../system-message/config/useValidateProps.js');
 require('../chat-container-messages-list/styled.js');
 require('../chat-container-messages-list/props.js');
+require('../chat-container-messages-list/config/useValidateProps.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -47,6 +54,7 @@ var DSBanner__default = /*#__PURE__*/_interopDefaultLegacy(DSBanner);
 var ChatContainer = function ChatContainer(props) {
   var _containerRef$current;
 
+  parts_chatContainer_config_useValidateProps.useValidateProps(props, ChatContainerWithSchema.toJSON());
   var sendingText = props.sendingText,
       sendingMessages = props.sendingMessages,
       bannerPosition = props.bannerPosition,
@@ -119,7 +127,8 @@ var ChatContainer = function ChatContainer(props) {
     lineOnly: true
   })) : null), /*#__PURE__*/React__default['default'].createElement(parts_chatComposer_ChatContainerComposer.ChatComposer, _extends__default['default']({}, composerProps, {
     onResize: onResize,
-    maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2
+    maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,
+    actionRef: actionRef || listRef
   })));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ChatContainer.js","sources":["../../../../src/parts/chat-container/ChatContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { noop } from 'lodash';\nimport { describe } from 'react-desc';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-basic/IndeterminateProgressIndicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from '../chat-composer';\nimport { ChatContainerMessagesList } from '../chat-container-messages-list';\nimport { ChatContainerProps, defaultProps, containerProps } from './props';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled';\n\nconst ChatContainer = (props: ChatContainerProps): JSX.Element => {\n  const {\n    sendingText,\n    sendingMessages,\n    bannerPosition,\n    bannerProps,\n    messagesListProps,\n    composerProps,\n    composerProps: { onResize: onComposerResize },\n    actionRef,\n    autoScroll,\n    device,\n    isLoading,\n    hasMoreItems,\n    getMoreMessages,\n  } = props;\n\n  const containerRef = React.useRef<HTMLElement>();\n  const listRef = React.useRef({ scrollToIndex: noop });\n  const onResize = React.useCallback(\n    (height: number) => {\n      if (onComposerResize) onComposerResize(height);\n      if (autoScroll) {\n        listRef.current.scrollToIndex(messagesListProps.messages.length - 1, {\n          align: 'end',\n        });\n      }\n    },\n    [onComposerResize, messagesListProps.messages, autoScroll],\n  );\n  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n\n  return (\n    <Container rows={['minmax(0, 1fr)', 'auto']} ref={containerRef} role=\"region\" aria-label=\"chat window\">\n      <div style={{ position: 'relative' }}>\n        <ChatContainerMessagesList\n          {...messagesListProps}\n          actionRef={actionRef || listRef}\n          isLoading={isLoading}\n          hasMoreItems={hasMoreItems}\n          getMoreMessages={getMoreMessages}\n          sendingMessages={sendingMessages}\n          sendingText={sendingText}\n        />\n        {['top', 'bottom'].includes(isLoading) ? (\n          <StyledIndicatorContainer isLoading={isLoading}>\n            <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n          </StyledIndicatorContainer>\n        ) : null}\n        {['top', 'bottom'].includes(bannerPosition) ? (\n          <StyledIndicatorContainer isLoading={bannerPosition}>\n            <DSBanner\n              showCloseButton\n              label={bannerProps.label || 'Unread messages'}\n              containerProps={{ id: 'ds-chat-banner' }}\n              actionLink={{\n                label: bannerProps.viewLabel || 'View',\n                onClick: bannerProps.onView,\n              }}\n              onClose={bannerProps.onClose}\n              isOpen\n              type={BANNER_TYPES.INFO}\n            />\n          </StyledIndicatorContainer>\n        ) : null}\n        {sendingMessages && sendingMessages.length > 0 ? (\n          <StyledIndicatorContainer isLoading=\"bottom\" linear>\n            <DSIndeterminateProgressIndicator processing title=\"Loading\" lineOnly />\n          </StyledIndicatorContainer>\n        ) : null}\n      </div>\n      <ChatComposer {...composerProps} onResize={onResize} maxHeight={(containerRef.current?.clientHeight || 0) / 2} />\n    </Container>\n  );\n};\n\nChatContainer.propTypes = containerProps;\nChatContainer.defaultProps = defaultProps;\nconst ChatContainerWithSchema = describe(ChatContainer);\nChatContainerWithSchema.propTypes = containerProps;\n\nexport { ChatContainer, ChatContainerWithSchema };\n"],"names":["ChatContainer","props","sendingText","sendingMessages","bannerPosition","bannerProps","messagesListProps","composerProps","onComposerResize","onResize","actionRef","autoScroll","device","isLoading","hasMoreItems","getMoreMessages","containerRef","React","useRef","listRef","scrollToIndex","noop","useCallback","height","current","messages","length","align","Container","StyledChatContainerContent","MobileStyledChatContainerContent","position","ChatContainerMessagesList","includes","StyledIndicatorContainer","DSIndeterminateProgressIndicator","DSBanner","label","id","viewLabel","onClick","onView","onClose","BANNER_TYPES","INFO","ChatComposer","clientHeight","propTypes","containerProps","defaultProps","ChatContainerWithSchema","describe"],"mappings":"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"}
+{"version":3,"file":"ChatContainer.js","sources":["../../../../src/parts/chat-container/ChatContainer.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React from 'react';\nimport { noop } from 'lodash';\nimport { describe } from 'react-desc';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-basic/IndeterminateProgressIndicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from '../chat-composer';\nimport { ChatContainerMessagesList } from '../chat-container-messages-list';\nimport { ChatContainerProps, defaultProps, containerProps } from './props';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst ChatContainer = (props: ChatContainerProps): JSX.Element => {\n  useValidateProps(props, ChatContainerWithSchema.toJSON());\n\n  const {\n    sendingText,\n    sendingMessages,\n    bannerPosition,\n    bannerProps,\n    messagesListProps,\n    composerProps,\n    composerProps: { onResize: onComposerResize },\n    actionRef,\n    autoScroll,\n    device,\n    isLoading,\n    hasMoreItems,\n    getMoreMessages,\n  } = props;\n\n  const containerRef = React.useRef<HTMLElement>();\n  const listRef = React.useRef({ scrollToIndex: noop });\n  const onResize = React.useCallback(\n    (height: number) => {\n      if (onComposerResize) onComposerResize(height);\n      if (autoScroll) {\n        listRef.current.scrollToIndex(messagesListProps.messages.length - 1, {\n          align: 'end',\n        });\n      }\n    },\n    [onComposerResize, messagesListProps.messages, autoScroll],\n  );\n  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n\n  return (\n    <Container rows={['minmax(0, 1fr)', 'auto']} ref={containerRef} role=\"region\" aria-label=\"chat window\">\n      <div style={{ position: 'relative' }}>\n        <ChatContainerMessagesList\n          {...messagesListProps}\n          actionRef={actionRef || listRef}\n          isLoading={isLoading}\n          hasMoreItems={hasMoreItems}\n          getMoreMessages={getMoreMessages}\n          sendingMessages={sendingMessages}\n          sendingText={sendingText}\n        />\n        {['top', 'bottom'].includes(isLoading) ? (\n          <StyledIndicatorContainer isLoading={isLoading}>\n            <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n          </StyledIndicatorContainer>\n        ) : null}\n        {['top', 'bottom'].includes(bannerPosition) ? (\n          <StyledIndicatorContainer isLoading={bannerPosition}>\n            <DSBanner\n              showCloseButton\n              label={bannerProps.label || 'Unread messages'}\n              containerProps={{ id: 'ds-chat-banner' }}\n              actionLink={{\n                label: bannerProps.viewLabel || 'View',\n                onClick: bannerProps.onView,\n              }}\n              onClose={bannerProps.onClose}\n              isOpen\n              type={BANNER_TYPES.INFO}\n            />\n          </StyledIndicatorContainer>\n        ) : null}\n        {sendingMessages && sendingMessages.length > 0 ? (\n          <StyledIndicatorContainer isLoading=\"bottom\" linear>\n            <DSIndeterminateProgressIndicator processing title=\"Loading\" lineOnly />\n          </StyledIndicatorContainer>\n        ) : null}\n      </div>\n      <ChatComposer\n        {...composerProps}\n        onResize={onResize}\n        maxHeight={(containerRef.current?.clientHeight || 0) / 2}\n        actionRef={actionRef || listRef}\n      />\n    </Container>\n  );\n};\n\nChatContainer.propTypes = containerProps;\nChatContainer.defaultProps = defaultProps;\nconst ChatContainerWithSchema = describe(ChatContainer);\nChatContainerWithSchema.propTypes = containerProps;\n\nexport { ChatContainer, ChatContainerWithSchema };\n"],"names":["ChatContainer","props","useValidateProps","ChatContainerWithSchema","toJSON","sendingText","sendingMessages","bannerPosition","bannerProps","messagesListProps","composerProps","onComposerResize","onResize","actionRef","autoScroll","device","isLoading","hasMoreItems","getMoreMessages","containerRef","React","useRef","listRef","scrollToIndex","noop","useCallback","height","current","messages","length","align","Container","StyledChatContainerContent","MobileStyledChatContainerContent","position","ChatContainerMessagesList","includes","StyledIndicatorContainer","DSIndeterminateProgressIndicator","DSBanner","label","id","viewLabel","onClick","onView","onClose","BANNER_TYPES","INFO","ChatComposer","clientHeight","propTypes","containerProps","defaultProps","describe"],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+var useValidateProps = function useValidateProps(props, schema) {
+  dsPropsHelpers.useValidatePropTypes(props, schema);
+};
+
+exports.useValidateProps = useValidateProps;
+//# sourceMappingURL=useValidateProps.js.map

package/cjs/parts/chat-container/config/useValidateProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValidateProps.js","sources":["../../../../../src/parts/chat-container/config/useValidateProps.tsx"],"sourcesContent":["import { useValidatePropTypes } from '@elliemae/ds-props-helpers';\nimport { ChatContainerProps } from '../props';\n\nexport const useValidateProps = (props: ChatContainerProps, schema: unknown): void => {\n  useValidatePropTypes(props, schema);\n};\n"],"names":["useValidateProps","props","schema","useValidatePropTypes"],"mappings":";;;;;;IAGaA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAA4BC,MAA5B,EAAsD;AACpFC,EAAAA,mCAAoB,CAACF,KAAD,EAAQC,MAAR,CAApB;AACD;;;;"}

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

@@ -17,6 +17,8 @@ require('@elliemae/ds-icons/PaperAirplane');
 require('../chat-composer/styled.js');
 require('styled-components');
 require('@elliemae/ds-button');
+require('../chat-composer/config/useValidateProps.js');
+require('@elliemae/ds-props-helpers');
 require('../chat-composer/props.js');
 require('../chat-container-messages-list/ChatContainerMessagesList.js');
 require('react-virtual');
@@ -26,17 +28,22 @@ require('@elliemae/ds-icons/WarningCircleFill');
 require('../bubble/styled.js');
 require('../bubble/props.js');
 require('prop-types');
+require('../bubble/config/useValidateProps.js');
 require('../bubble/ChatBubbleArrow.js');
 require('../message-delimiter/MessageDelimiter.js');
 require('../message-delimiter/styled.js');
 require('../message-delimiter/props.js');
+require('../message-delimiter/config/useValidateProps.js');
 require('../system-message/SystemMessage.js');
 require('../system-message/style.js');
 require('../system-message/props.js');
+require('../system-message/config/useValidateProps.js');
 require('../chat-container-messages-list/styled.js');
 require('../chat-container-messages-list/props.js');
+require('../chat-container-messages-list/config/useValidateProps.js');
 require('./props.js');
 require('./styled.js');
+require('./config/useValidateProps.js');
 
 
 

package/cjs/parts/chat-container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -10,7 +10,7 @@ var parts_chatComposer_props = require('../chat-composer/props.js');
 var defaultProps = {
   messagesListProps: parts_chatContainerMessagesList_props.defaultProps,
   composerProps: parts_chatComposer_props.defaultComposerPros,
-  actionRef: lodash.noop,
+  actionRef: undefined,
   autoScroll: false,
   device: 'desktop',
   isLoading: undefined,
@@ -37,7 +37,8 @@ var containerProps = {
   bannerPosition: reactDesc.PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Loading messages indicator at the `top` or `bottom` of the container'),
   bannerProps: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object).description('Banner configuration').defaultValue(defaultProps.bannerProps),
   sendingMessages: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number])).description('Array of ids of sending messages').defaultValue(defaultProps.sendingMessages),
-  sendingText: reactDesc.PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText)
+  sendingText: reactDesc.PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText),
+  actionRef: reactDesc.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)
 };
 
 exports.containerProps = containerProps;

package/cjs/parts/chat-container/props.js.map

@@ -1 +1 @@
-{"version":3,"file":"props.js","sources":["../../../../src/parts/chat-container/props.ts"],"sourcesContent":["import { PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\nimport {\n  ChatContainerMessagesListProps,\n  defaultProps as defaultListProps,\n} from '../chat-container-messages-list/props';\nimport { defaultComposerPros, ChatComposerProps } from '../chat-composer/props';\n\ninterface ChatBannerProps {\n  label: string;\n  viewLabel: string;\n  onView: () => void;\n  onClose: () => void;\n}\nexport interface ChatContainerProps {\n  messagesListProps: Pick<ChatContainerMessagesListProps, 'messages' | 'onScrollEnds'>;\n  composerProps: ChatComposerProps;\n  actionRef: PropTypes.func;\n  autoScroll: boolean;\n  device: 'desktop' | 'mobile';\n  isLoading?: 'top' | 'bottom';\n  hasMoreItems?: 'top' | 'bottom';\n  getMoreMessages: PropTypes.func;\n  bannerPosition?: 'top' | 'bottom';\n  bannerProps?: ChatBannerProps;\n  sendingMessages?: string[] | number[];\n  sendingText: string;\n}\n\nexport const defaultProps: ChatContainerProps = {\n  messagesListProps: defaultListProps,\n  composerProps: defaultComposerPros,\n  actionRef: noop,\n  autoScroll: false,\n  device: 'desktop',\n  isLoading: undefined,\n  hasMoreItems: undefined,\n  getMoreMessages: noop,\n  bannerPosition: undefined,\n  bannerProps: {\n    label: 'Unread Messages',\n    viewLabel: 'View',\n    onView: noop,\n    onClose: noop,\n  },\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n};\n\nexport const containerProps = {\n  messagesListProps: PropTypes.arrayOf(PropTypes.object)\n    .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n    .defaultValue(defaultProps.messagesListProps),\n  composerProps: PropTypes.arrayOf(PropTypes.object)\n    .description('Composer configuration')\n    .defaultValue(defaultProps.composerProps),\n  autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),\n  device: PropTypes.string\n    .description('Option to render mobile or desktop style composer')\n    .defaultValue(defaultProps.device),\n  isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Loading messages indicator at the `top` or `bottom` of the container',\n  ),\n  hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Load More button at the `top` or `bottom` of the container',\n  ),\n  getMoreMessages: PropTypes.func\n    .description('Called when the user clicks on load more')\n    .defaultValue(defaultProps.getMoreMessages),\n  bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Loading messages indicator at the `top` or `bottom` of the container',\n  ),\n  bannerProps: PropTypes.arrayOf(PropTypes.object)\n    .description('Banner configuration')\n    .defaultValue(defaultProps.bannerProps),\n  sendingMessages: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultProps.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultProps.sendingText),\n};\n"],"names":["defaultProps","messagesListProps","defaultListProps","composerProps","defaultComposerPros","actionRef","noop","autoScroll","device","isLoading","undefined","hasMoreItems","getMoreMessages","bannerPosition","bannerProps","label","viewLabel","onView","onClose","sendingMessages","sendingText","containerProps","PropTypes","arrayOf","object","description","defaultValue","bool","string","oneOf","func","oneOfType","number"],"mappings":";;;;;;;;;IA6BaA,YAAgC,GAAG;AAC9CC,EAAAA,iBAAiB,EAAEC,kDAD2B;AAE9CC,EAAAA,aAAa,EAAEC,4CAF+B;AAG9CC,EAAAA,SAAS,EAAEC,WAHmC;AAI9CC,EAAAA,UAAU,EAAE,KAJkC;AAK9CC,EAAAA,MAAM,EAAE,SALsC;AAM9CC,EAAAA,SAAS,EAAEC,SANmC;AAO9CC,EAAAA,YAAY,EAAED,SAPgC;AAQ9CE,EAAAA,eAAe,EAAEN,WAR6B;AAS9CO,EAAAA,cAAc,EAAEH,SAT8B;AAU9CI,EAAAA,WAAW,EAAE;AACXC,IAAAA,KAAK,EAAE,iBADI;AAEXC,IAAAA,SAAS,EAAE,MAFA;AAGXC,IAAAA,MAAM,EAAEX,WAHG;AAIXY,IAAAA,OAAO,EAAEZ;AAJE,GAViC;AAgB9Ca,EAAAA,eAAe,EAAET,SAhB6B;AAiB9CU,EAAAA,WAAW,EAAE;AAjBiC;IAoBnCC,cAAc,GAAG;AAC5BpB,EAAAA,iBAAiB,EAAEqB,mBAAS,CAACC,OAAV,CAAkBD,mBAAS,CAACE,MAA5B,EAChBC,WADgB,CACJ,mDADI,EAEhBC,YAFgB,CAEH1B,YAAY,CAACC,iBAFV,CADS;AAI5BE,EAAAA,aAAa,EAAEmB,mBAAS,CAACC,OAAV,CAAkBD,mBAAS,CAACE,MAA5B,EACZC,WADY,CACA,wBADA,EAEZC,YAFY,CAEC1B,YAAY,CAACG,aAFd,CAJa;AAO5BI,EAAAA,UAAU,EAAEe,mBAAS,CAACK,IAAV,CAAeF,WAAf,CAA2B,iCAA3B,EAA8DC,YAA9D,CAA2E1B,YAAY,CAACO,UAAxF,CAPgB;AAQ5BC,EAAAA,MAAM,EAAEc,mBAAS,CAACM,MAAV,CACLH,WADK,CACO,mDADP,EAELC,YAFK,CAEQ1B,YAAY,CAACQ,MAFrB,CARoB;AAW5BC,EAAAA,SAAS,EAAEa,mBAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBnB,SAAlB,CAAhB,EAA8Ce,WAA9C,CACT,2EADS,CAXiB;AAc5Bd,EAAAA,YAAY,EAAEW,mBAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBnB,SAAlB,CAAhB,EAA8Ce,WAA9C,CACZ,iEADY,CAdc;AAiB5Bb,EAAAA,eAAe,EAAEU,mBAAS,CAACQ,IAAV,CACdL,WADc,CACF,0CADE,EAEdC,YAFc,CAED1B,YAAY,CAACY,eAFZ,CAjBW;AAoB5BC,EAAAA,cAAc,EAAES,mBAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBnB,SAAlB,CAAhB,EAA8Ce,WAA9C,CACd,2EADc,CApBY;AAuB5BX,EAAAA,WAAW,EAAEQ,mBAAS,CAACC,OAAV,CAAkBD,mBAAS,CAACE,MAA5B,EACVC,WADU,CACE,sBADF,EAEVC,YAFU,CAEG1B,YAAY,CAACc,WAFhB,CAvBe;AA0B5BK,EAAAA,eAAe,EAAEG,mBAAS,CAACC,OAAV,CAAkBD,mBAAS,CAACS,SAAV,CAAoB,CAACT,mBAAS,CAACM,MAAX,EAAmBN,mBAAS,CAACU,MAA7B,CAApB,CAAlB,EACdP,WADc,CACF,kCADE,EAEdC,YAFc,CAED1B,YAAY,CAACmB,eAFZ,CA1BW;AA6B5BC,EAAAA,WAAW,EAAEE,mBAAS,CAACM,MAAV,CACVH,WADU,CACE,kDADF,EAEVC,YAFU,CAEG1B,YAAY,CAACoB,WAFhB;AA7Be;;;;;"}
+{"version":3,"file":"props.js","sources":["../../../../src/parts/chat-container/props.ts"],"sourcesContent":["import { PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\nimport {\n  ChatContainerMessagesListProps,\n  defaultProps as defaultListProps,\n} from '../chat-container-messages-list/props';\nimport { defaultComposerPros, ChatComposerProps } from '../chat-composer/props';\n\ninterface ChatBannerProps {\n  label: string;\n  viewLabel: string;\n  onView: () => void;\n  onClose: () => void;\n}\nexport interface ChatContainerProps {\n  messagesListProps: Pick<ChatContainerMessagesListProps, 'messages' | 'onScrollEnds'>;\n  composerProps: ChatComposerProps;\n  actionRef: PropTypes.func;\n  autoScroll: boolean;\n  device: 'desktop' | 'mobile';\n  isLoading?: 'top' | 'bottom';\n  hasMoreItems?: 'top' | 'bottom';\n  getMoreMessages: PropTypes.func;\n  bannerPosition?: 'top' | 'bottom';\n  bannerProps?: ChatBannerProps;\n  sendingMessages?: string[] | number[];\n  sendingText: string;\n}\n\nexport const defaultProps: ChatContainerProps = {\n  messagesListProps: defaultListProps,\n  composerProps: defaultComposerPros,\n  actionRef: undefined,\n  autoScroll: false,\n  device: 'desktop',\n  isLoading: undefined,\n  hasMoreItems: undefined,\n  getMoreMessages: noop,\n  bannerPosition: undefined,\n  bannerProps: {\n    label: 'Unread Messages',\n    viewLabel: 'View',\n    onView: noop,\n    onClose: noop,\n  },\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n};\n\nexport const containerProps = {\n  messagesListProps: PropTypes.arrayOf(PropTypes.object)\n    .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n    .defaultValue(defaultProps.messagesListProps),\n  composerProps: PropTypes.arrayOf(PropTypes.object)\n    .description('Composer configuration')\n    .defaultValue(defaultProps.composerProps),\n  autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),\n  device: PropTypes.string\n    .description('Option to render mobile or desktop style composer')\n    .defaultValue(defaultProps.device),\n  isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Loading messages indicator at the `top` or `bottom` of the container',\n  ),\n  hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Load More button at the `top` or `bottom` of the container',\n  ),\n  getMoreMessages: PropTypes.func\n    .description('Called when the user clicks on load more')\n    .defaultValue(defaultProps.getMoreMessages),\n  bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Loading messages indicator at the `top` or `bottom` of the container',\n  ),\n  bannerProps: PropTypes.arrayOf(PropTypes.object)\n    .description('Banner configuration')\n    .defaultValue(defaultProps.bannerProps),\n  sendingMessages: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultProps.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultProps.sendingText),\n  actionRef: PropTypes.object\n    .description(\n      `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      `,\n    )\n    .defaultValue(defaultProps.actionRef),\n};\n"],"names":["defaultProps","messagesListProps","defaultListProps","composerProps","defaultComposerPros","actionRef","undefined","autoScroll","device","isLoading","hasMoreItems","getMoreMessages","noop","bannerPosition","bannerProps","label","viewLabel","onView","onClose","sendingMessages","sendingText","containerProps","PropTypes","arrayOf","object","description","defaultValue","bool","string","oneOf","func","oneOfType","number"],"mappings":";;;;;;;;;IA6BaA,YAAgC,GAAG;AAC9CC,EAAAA,iBAAiB,EAAEC,kDAD2B;AAE9CC,EAAAA,aAAa,EAAEC,4CAF+B;AAG9CC,EAAAA,SAAS,EAAEC,SAHmC;AAI9CC,EAAAA,UAAU,EAAE,KAJkC;AAK9CC,EAAAA,MAAM,EAAE,SALsC;AAM9CC,EAAAA,SAAS,EAAEH,SANmC;AAO9CI,EAAAA,YAAY,EAAEJ,SAPgC;AAQ9CK,EAAAA,eAAe,EAAEC,WAR6B;AAS9CC,EAAAA,cAAc,EAAEP,SAT8B;AAU9CQ,EAAAA,WAAW,EAAE;AACXC,IAAAA,KAAK,EAAE,iBADI;AAEXC,IAAAA,SAAS,EAAE,MAFA;AAGXC,IAAAA,MAAM,EAAEL,WAHG;AAIXM,IAAAA,OAAO,EAAEN;AAJE,GAViC;AAgB9CO,EAAAA,eAAe,EAAEb,SAhB6B;AAiB9Cc,EAAAA,WAAW,EAAE;AAjBiC;IAoBnCC,cAAc,GAAG;AAC5BpB,EAAAA,iBAAiB,EAAEqB,mBAAS,CAACC,OAAV,CAAkBD,mBAAS,CAACE,MAA5B,EAChBC,WADgB,CACJ,mDADI,EAEhBC,YAFgB,CAEH1B,YAAY,CAACC,iBAFV,CADS;AAI5BE,EAAAA,aAAa,EAAEmB,mBAAS,CAACC,OAAV,CAAkBD,mBAAS,CAACE,MAA5B,EACZC,WADY,CACA,wBADA,EAEZC,YAFY,CAEC1B,YAAY,CAACG,aAFd,CAJa;AAO5BI,EAAAA,UAAU,EAAEe,mBAAS,CAACK,IAAV,CAAeF,WAAf,CAA2B,iCAA3B,EAA8DC,YAA9D,CAA2E1B,YAAY,CAACO,UAAxF,CAPgB;AAQ5BC,EAAAA,MAAM,EAAEc,mBAAS,CAACM,MAAV,CACLH,WADK,CACO,mDADP,EAELC,YAFK,CAEQ1B,YAAY,CAACQ,MAFrB,CARoB;AAW5BC,EAAAA,SAAS,EAAEa,mBAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBvB,SAAlB,CAAhB,EAA8CmB,WAA9C,CACT,2EADS,CAXiB;AAc5Bf,EAAAA,YAAY,EAAEY,mBAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBvB,SAAlB,CAAhB,EAA8CmB,WAA9C,CACZ,iEADY,CAdc;AAiB5Bd,EAAAA,eAAe,EAAEW,mBAAS,CAACQ,IAAV,CACdL,WADc,CACF,0CADE,EAEdC,YAFc,CAED1B,YAAY,CAACW,eAFZ,CAjBW;AAoB5BE,EAAAA,cAAc,EAAES,mBAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBvB,SAAlB,CAAhB,EAA8CmB,WAA9C,CACd,2EADc,CApBY;AAuB5BX,EAAAA,WAAW,EAAEQ,mBAAS,CAACC,OAAV,CAAkBD,mBAAS,CAACE,MAA5B,EACVC,WADU,CACE,sBADF,EAEVC,YAFU,CAEG1B,YAAY,CAACc,WAFhB,CAvBe;AA0B5BK,EAAAA,eAAe,EAAEG,mBAAS,CAACC,OAAV,CAAkBD,mBAAS,CAACS,SAAV,CAAoB,CAACT,mBAAS,CAACM,MAAX,EAAmBN,mBAAS,CAACU,MAA7B,CAApB,CAAlB,EACdP,WADc,CACF,kCADE,EAEdC,YAFc,CAED1B,YAAY,CAACmB,eAFZ,CA1BW;AA6B5BC,EAAAA,WAAW,EAAEE,mBAAS,CAACM,MAAV,CACVH,WADU,CACE,kDADF,EAEVC,YAFU,CAEG1B,YAAY,CAACoB,WAFhB,CA7Be;AAgC5Bf,EAAAA,SAAS,EAAEiB,mBAAS,CAACE,MAAV,CACRC,WADQ,oTAcRC,YAdQ,CAcK1B,YAAY,CAACK,SAdlB;AAhCiB;;;;;"}

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

@@ -5,11 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styled = require('styled-components');
 var dsGrid = require('@elliemae/ds-grid');
 var parts_bubble_styled = require('../bubble/styled.js');
+var parts_chatComposer_styled = require('../chat-composer/styled.js');
 var parts_systemMessage_style = require('../system-message/style.js');
 require('../bubble/props.js');
 require('prop-types');
 require('react-desc');
 require('lodash');
+require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -40,7 +42,7 @@ var StyledIndicatorContainer = /*#__PURE__*/styled__default['default'].div.withC
 });
 var 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;}"], parts_bubble_styled.StyledTitleLeftBubble, parts_bubble_styled.StyleBodyWrapper, parts_bubble_styled.StyledTitleRightBubble, parts_systemMessage_style.Wrapper, parts_systemMessage_style.Title, parts_systemMessage_style.Message, parts_systemMessage_style.Time);
+})(["", ",", "{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;}"], parts_bubble_styled.StyledTitleLeftBubble, parts_bubble_styled.StyleBodyWrapper, parts_bubble_styled.StyledTitleRightBubble, parts_systemMessage_style.Wrapper, parts_systemMessage_style.Title, parts_systemMessage_style.Message, parts_systemMessage_style.Time, parts_chatComposer_styled.StyledComposerInput);
 
 exports.CONTAINER_WIDTH = CONTAINER_WIDTH;
 exports.MobileStyledChatContainerContent = MobileStyledChatContainerContent;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/parts/chat-container/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledTitleRightBubble, StyledTitleLeftBubble, StyleBodyWrapper } from '../bubble/styled';\nimport { Wrapper, Title, Time, Message } from '../system-message/style';\nexport const CONTAINER_WIDTH = 300;\n\nexport const StyledChatContainerContent = styled(Grid)`\n  height: 100%;\n  min-width: ${CONTAINER_WIDTH}px;\n  overflow: hidden;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  position: relative;\n`;\nexport const StyledIndicatorContainer = styled.div<{\n  isLoading?: 'top' | 'bottom';\n  linear?: boolean;\n}>`\n  position: absolute;\n  width: calc(100% + ${(props) => props.theme.space.xxs});\n  padding: ${(props) => (!props.linear ? props.theme.space.xxs : 0)};\n  left: -${(props) => props.theme.space.xxs};\n  right: -${(props) => props.theme.space.xxs};\n  background: ${(props) => props.theme.colors.neutral['000']};\n  ${(props) => (props.isLoading === 'top' ? 'top: 0;' : '')}\n  ${(props) => (props.isLoading === 'bottom' ? 'bottom: 0;' : '')}\n`;\n\nexport const MobileStyledChatContainerContent = styled(StyledChatContainerContent)`\n  ${StyledTitleLeftBubble},\n  ${StyleBodyWrapper} {\n    font-size: 16px;\n  }\n\n  ${StyledTitleRightBubble} {\n    font-size: 13px;\n  }\n\n  ${Wrapper} {\n    background-color: #fff;\n    box-shadow: -0 1px 3px rgba(53, 60, 70, 0.8);\n  }\n\n  ${Title},\n  ${Message} {\n    font-size: 16px;\n    text-align: left;\n  }\n\n  ${Time} {\n    font-size: 13px;\n  }\n`;\n"],"names":["CONTAINER_WIDTH","StyledChatContainerContent","styled","Grid","props","theme","colors","neutral","StyledIndicatorContainer","div","space","xxs","linear","isLoading","MobileStyledChatContainerContent","StyledTitleLeftBubble","StyleBodyWrapper","StyledTitleRightBubble","Wrapper","Title","Message","Time"],"mappings":";;;;;;;;;;;;;;;;;IAIaA,eAAe,GAAG;IAElBC,0BAA0B,gBAAGC,0BAAM,CAACC,WAAD,CAAT;AAAA;AAAA,wFAExBH,eAFwB,EAIvB,UAACI,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CAJuB;IAO1BC,wBAAwB,gBAAGN,0BAAM,CAACO,GAAV;AAAA;AAAA,gHAKd,UAACL,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAA7B;AAAA,CALc,EAMxB,UAACP,KAAD;AAAA,SAAY,CAACA,KAAK,CAACQ,MAAP,GAAgBR,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAAlC,GAAwC,CAApD;AAAA,CANwB,EAO1B,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAA7B;AAAA,CAP0B,EAQzB,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAA7B;AAAA,CARyB,EASrB,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CATqB,EAUjC,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACS,SAAN,KAAoB,KAApB,GAA4B,SAA5B,GAAwC,EAApD;AAAA,CAViC,EAWjC,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACS,SAAN,KAAoB,QAApB,GAA+B,YAA/B,GAA8C,EAA1D;AAAA,CAXiC;IAcxBC,gCAAgC,gBAAGZ,0BAAM,CAACD,0BAAD,CAAT;AAAA;AAAA,4LACzCc,yCADyC,EAEzCC,oCAFyC,EAMzCC,0CANyC,EAUzCC,iCAVyC,EAezCC,+BAfyC,EAgBzCC,iCAhByC,EAqBzCC,8BArByC;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/parts/chat-container/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledTitleRightBubble, StyledTitleLeftBubble, StyleBodyWrapper } from '../bubble/styled';\nimport { StyledComposerInput } from '../chat-composer/styled';\nimport { Wrapper, Title, Time, Message } from '../system-message/style';\nexport const CONTAINER_WIDTH = 300;\n\nexport const StyledChatContainerContent = styled(Grid)`\n  height: 100%;\n  min-width: ${CONTAINER_WIDTH}px;\n  overflow: hidden;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  position: relative;\n`;\nexport const StyledIndicatorContainer = styled.div<{\n  isLoading?: 'top' | 'bottom';\n  linear?: boolean;\n}>`\n  position: absolute;\n  width: calc(100% + ${(props) => props.theme.space.xxs});\n  padding: ${(props) => (!props.linear ? props.theme.space.xxs : 0)};\n  left: -${(props) => props.theme.space.xxs};\n  right: -${(props) => props.theme.space.xxs};\n  background: ${(props) => props.theme.colors.neutral['000']};\n  ${(props) => (props.isLoading === 'top' ? 'top: 0;' : '')}\n  ${(props) => (props.isLoading === 'bottom' ? 'bottom: 0;' : '')}\n`;\n\nexport const MobileStyledChatContainerContent = styled(StyledChatContainerContent)`\n  ${StyledTitleLeftBubble},\n  ${StyleBodyWrapper} {\n    font-size: 16px;\n  }\n\n  ${StyledTitleRightBubble} {\n    font-size: 13px;\n  }\n\n  ${Wrapper} {\n    background-color: #fff;\n    box-shadow: -0 1px 3px rgba(53, 60, 70, 0.8);\n  }\n\n  ${Title},\n  ${Message} {\n    font-size: 16px;\n    text-align: left;\n  }\n\n  ${Time} {\n    font-size: 13px;\n  }\n\n  ${StyledComposerInput} {\n    font-size: 16px;\n  }\n`;\n"],"names":["CONTAINER_WIDTH","StyledChatContainerContent","styled","Grid","props","theme","colors","neutral","StyledIndicatorContainer","div","space","xxs","linear","isLoading","MobileStyledChatContainerContent","StyledTitleLeftBubble","StyleBodyWrapper","StyledTitleRightBubble","Wrapper","Title","Message","Time","StyledComposerInput"],"mappings":";;;;;;;;;;;;;;;;;;;IAKaA,eAAe,GAAG;IAElBC,0BAA0B,gBAAGC,0BAAM,CAACC,WAAD,CAAT;AAAA;AAAA,wFAExBH,eAFwB,EAIvB,UAACI,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CAJuB;IAO1BC,wBAAwB,gBAAGN,0BAAM,CAACO,GAAV;AAAA;AAAA,gHAKd,UAACL,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAA7B;AAAA,CALc,EAMxB,UAACP,KAAD;AAAA,SAAY,CAACA,KAAK,CAACQ,MAAP,GAAgBR,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAAlC,GAAwC,CAApD;AAAA,CANwB,EAO1B,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAA7B;AAAA,CAP0B,EAQzB,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYK,KAAZ,CAAkBC,GAA7B;AAAA,CARyB,EASrB,UAACP,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CATqB,EAUjC,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACS,SAAN,KAAoB,KAApB,GAA4B,SAA5B,GAAwC,EAApD;AAAA,CAViC,EAWjC,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACS,SAAN,KAAoB,QAApB,GAA+B,YAA/B,GAA8C,EAA1D;AAAA,CAXiC;IAcxBC,gCAAgC,gBAAGZ,0BAAM,CAACD,0BAAD,CAAT;AAAA;AAAA,iNACzCc,yCADyC,EAEzCC,oCAFyC,EAMzCC,0CANyC,EAUzCC,iCAVyC,EAezCC,+BAfyC,EAgBzCC,iCAhByC,EAqBzCC,8BArByC,EAyBzCC,6CAzByC;;;;;;;"}

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

@@ -14,17 +14,22 @@ var parts_messageDelimiter_MessageDelimiter = require('../message-delimiter/Mess
 var parts_systemMessage_SystemMessage = require('../system-message/SystemMessage.js');
 var parts_chatContainerMessagesList_styled = require('./styled.js');
 var parts_chatContainerMessagesList_props = require('./props.js');
+var parts_chatContainerMessagesList_config_useValidateProps = require('./config/useValidateProps.js');
 require('@elliemae/ds-icons/WarningCircleFill');
 require('../bubble/styled.js');
 require('styled-components');
 require('@elliemae/ds-grid');
+require('../bubble/config/useValidateProps.js');
+require('@elliemae/ds-props-helpers');
 require('../bubble/ChatBubbleArrow.js');
 require('prop-types');
 require('lodash');
 require('../message-delimiter/styled.js');
 require('../message-delimiter/props.js');
+require('../message-delimiter/config/useValidateProps.js');
 require('../system-message/style.js');
 require('../system-message/props.js');
+require('../system-message/config/useValidateProps.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -47,6 +52,7 @@ var getPadding = function getPadding(hasMoreItems) {
 };
 
 var ChatContainerMessagesList = function ChatContainerMessagesList(props) {
+  parts_chatContainerMessagesList_config_useValidateProps.useValidateProps(props, ChatContainerMessagesListWithSchema.toJSON());
   var sendingText = props.sendingText,
       sendingMessages = props.sendingMessages,
       messages = props.messages,
@@ -87,17 +93,65 @@ var ChatContainerMessagesList = function ChatContainerMessagesList(props) {
     if (onScrollEnds) onScrollEnds(indexList);
     return indexList;
   }, [onScrollEnds]);
-  React__default['default'].useImperativeHandle(actionRef, function () {
-    return {
-      scrollToIndex: function scrollToIndex(a) {
+  var scrollAndFocus = React__default['default'].useCallback(function (index) {
+    vScroll(index, {
+      align: 'center'
+    });
+    setTimeout(function () {
+      virtualListRef.current.querySelector("[data-index=\"".concat(index, "\"]")).focus();
+    }, 300);
+  }, [vScroll]);
+  React__default['default'].useEffect(function () {
+    if (actionRef && actionRef.current) {
+      actionRef.current.scrollToIndex = function (a) {
         var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
           align: 'center'
         };
         vScroll(a, b);
-      },
-      getMessagesInView: onScrollStop
-    };
-  });
+      };
+
+      actionRef.current.getMessagesInView = onScrollStop;
+
+      actionRef.current.focusToIndex = function (a) {
+        scrollAndFocus(a);
+      };
+
+      actionRef.current.focusToList = function (a) {
+        var _virtualListRef$curre2;
+        (_virtualListRef$curre2 = virtualListRef.current) === null || _virtualListRef$curre2 === void 0 ? void 0 : _virtualListRef$curre2.focus();
+      };
+    }
+  }, [actionRef, onScrollStop, scrollAndFocus, vScroll]);
+  var handleKey = React__default['default'].useCallback(function (e) {
+    e.preventDefault();
+    var key = e.key;
+    var index = Number(e.currentTarget.dataset.index);
+
+    switch (key) {
+      case 'ArrowUp':
+        if (index > 0) virtualListRef.current.querySelector("[data-index=\"".concat(index - 1, "\"]")).focus();
+        break;
+
+      case 'ArrowDown':
+        if (index < messages.length - 1) {
+          virtualListRef.current.querySelector("[data-index=\"".concat(index + 1, "\"]")).focus();
+        }
+
+        break;
+
+      case 'Home':
+        scrollAndFocus(0);
+        break;
+
+      case 'End':
+        scrollAndFocus(messages.length - 1);
+        break;
+
+      case 'Tab':
+        actionRef.current.focusToComposer();
+        break;
+    }
+  }, [actionRef, messages.length, scrollAndFocus]);
   React__default['default'].useEffect(function () {
     var handlerCallback = null;
     var localVirtualRef = virtualListRef.current;
@@ -132,12 +186,15 @@ var ChatContainerMessagesList = function ChatContainerMessagesList(props) {
         transform: "translateY(".concat(start, "px)"),
         width: '100%'
       };
-      return /*#__PURE__*/React__default['default'].createElement("div", {
+      return /*#__PURE__*/React__default['default'].createElement(parts_chatContainerMessagesList_styled.ListItem, {
         "data-element": "chat-element-list-item",
         "data-index": index,
         key: "ds-chat-bubble-".concat(index),
         style: style,
-        ref: measureRef
+        ref: measureRef,
+        tabIndex: 0,
+        onKeyDown: handleKey,
+        role: "listitem"
       }, /*#__PURE__*/React__default['default'].createElement(parts_chatContainerMessagesList_styled.StyledWrapperListItem, {
         type: row.type
       }, row.type === parts_bubble_props.BUBBLE_TYPES.SENDER || row.type === parts_bubble_props.BUBBLE_TYPES.RECIPIENT ?
@@ -147,12 +204,14 @@ var ChatContainerMessagesList = function ChatContainerMessagesList(props) {
         helpMessage: isSending ? sendingText : row.helpMessage
       })) : null, row.type === parts_bubble_props.BUBBLE_TYPES.DELIMITER ? /*#__PURE__*/React__default['default'].createElement(parts_messageDelimiter_MessageDelimiter.MessageDelimiter, row) : null, row.type === parts_bubble_props.BUBBLE_TYPES.SYSTEM ? /*#__PURE__*/React__default['default'].createElement(parts_systemMessage_SystemMessage.SystemMessage, row) : null));
     });
-  }, [virtualItems, messages, sendingMessages]);
+  }, [virtualItems, messages, sendingMessages, handleKey, sendingText]);
   return /*#__PURE__*/React__default['default'].createElement(parts_chatContainerMessagesList_styled.StyledWrapper, null, /*#__PURE__*/React__default['default'].createElement(parts_chatContainerMessagesList_styled.StyledChatContainerContentList, {
     "data-testid": "chat-thread-container",
     tabIndex: 0,
     "aria-live": "polite",
-    ref: virtualListRef
+    ref: virtualListRef,
+    role: "list",
+    onKeyDown: handleKey
   }, /*#__PURE__*/React__default['default'].createElement(parts_chatContainerMessagesList_styled.StyledChatContainerContentListScroll, {
     height: "".concat(totalSize, "px")
   }, render, !isLoading && hasMoreItems ? /*#__PURE__*/React__default['default'].createElement(parts_chatContainerMessagesList_styled.StyledLoadMoreContainer, {

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

@@ -1 +1 @@
-{"version":3,"file":"ChatContainerMessagesList.js","sources":["../../../../src/parts/chat-container-messages-list/ChatContainerMessagesList.tsx"],"sourcesContent":["/* eslint-disable max-lines */\nimport React, { CSSProperties } from 'react';\nimport { describe } from 'react-desc';\nimport { useVirtual } from 'react-virtual';\nimport DSButton from '@elliemae/ds-basic/Button';\nimport { ChatBubble, BUBBLE_TYPES } from '../bubble';\nimport { MessageDelimiter } from '../message-delimiter';\nimport { SystemMessage } from '../system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n} from './styled';\nimport { defaultProps, listProps, ChatContainerMessagesListProps } from './props';\n\nconst getPadding = (hasMoreItems) => {\n  const padding = {\n    paddingStart: 0,\n    paddingEnd: -5,\n  };\n  if (hasMoreItems === 'top') padding.paddingStart = 42;\n  else if (hasMoreItems === 'bottom') padding.paddingEnd = 42;\n  return padding;\n};\n\nconst ChatContainerMessagesList = (props: ChatContainerMessagesListProps): JSX.Element => {\n  const { sendingText, sendingMessages, messages, actionRef, onScrollEnds, getMoreMessages, hasMoreItems, isLoading } =\n    props;\n  const virtualListRef = React.useRef<HTMLDivElement>();\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const {\n    scrollToIndex: vScroll,\n    totalSize,\n    virtualItems,\n  } = useVirtual({\n    size: messages.length,\n    parentRef: virtualListRef,\n    overscan: 15,\n    ...getPadding(hasMoreItems),\n    estimateSize: React.useCallback(() => 80, []),\n  });\n\n  const onScrollStop = React.useCallback((): number[] => {\n    const { bottom, top } = virtualListRef.current.getBoundingClientRect();\n    const list = virtualListRef.current.querySelectorAll(\n      '[data-element=\"chat-element-list-item\"]',\n    ) as NodeListOf<HTMLDivElement>;\n    const indexList = [];\n    list.forEach((item: HTMLDivElement) => {\n      const { top: itemTop } = item.getBoundingClientRect();\n      if (itemTop < bottom && itemTop > top) indexList.push(item.dataset.index);\n    });\n    if (onScrollEnds) onScrollEnds(indexList);\n    return indexList;\n  }, [onScrollEnds]);\n\n  React.useImperativeHandle(actionRef, () => ({\n    scrollToIndex: (a, b = { align: 'center' }) => {\n      vScroll(a, b);\n    },\n    getMessagesInView: onScrollStop,\n  }));\n\n  React.useEffect(() => {\n    let handlerCallback = null;\n    const localVirtualRef = virtualListRef.current;\n    const onScroll = () => {\n      if (handlerCallback) clearTimeout(handlerCallback);\n      handlerCallback = setTimeout(onScrollStop, 300);\n    };\n    if (onScrollEnds) {\n      virtualListRef.current.addEventListener('scroll', onScroll);\n    }\n    return () => {\n      if (handlerCallback) clearTimeout(handlerCallback);\n      if (onScrollEnds) localVirtualRef.removeEventListener('scroll', onScroll);\n    };\n  }, [onScrollStop, onScrollEnds]);\n\n  const render = React.useMemo(\n    () =>\n      virtualItems.map((virtualItem) => {\n        const { index, measureRef, start } = virtualItem;\n        const row = messages[index];\n        const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);\n        const style: CSSProperties = {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          transform: `translateY(${start}px)`,\n          width: '100%',\n        };\n\n        return (\n          <div\n            data-element=\"chat-element-list-item\"\n            data-index={index}\n            key={`ds-chat-bubble-${index}`}\n            style={style}\n            ref={measureRef}\n          >\n            <StyledWrapperListItem type={row.type}>\n              {row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? (\n                // eslint-disable-next-line\n                <ChatBubble {...(row as any)} helpMessage={isSending? sendingText : row.helpMessage }/>\n              ) : null}\n              {row.type === BUBBLE_TYPES.DELIMITER ? <MessageDelimiter {...(row as any)} /> : null}\n              {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...(row as any)} /> : null}\n            </StyledWrapperListItem>\n          </div>\n        );\n      }),\n    [virtualItems, messages, sendingMessages],\n  );\n\n  return (\n    <StyledWrapper>\n      <StyledChatContainerContentList\n        data-testid=\"chat-thread-container\"\n        tabIndex={0}\n        aria-live=\"polite\"\n        ref={virtualListRef}\n      >\n        <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n          {render}\n          {!isLoading && hasMoreItems ? (\n            <StyledLoadMoreContainer hasMoreItems={hasMoreItems}>\n              <DSButton labelText=\"Load More\" buttonType=\"secondary\" onClick={getMoreMessages} />\n            </StyledLoadMoreContainer>\n          ) : null}\n        </StyledChatContainerContentListScroll>\n      </StyledChatContainerContentList>\n    </StyledWrapper>\n  );\n};\n\nChatContainerMessagesList.propTypes = listProps;\nChatContainerMessagesList.defaultProps = defaultProps;\nconst ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);\nChatContainerMessagesListWithSchema.propTypes = listProps;\n\nexport { ChatContainerMessagesList, ChatContainerMessagesListWithSchema };\n"],"names":["getPadding","hasMoreItems","padding","paddingStart","paddingEnd","ChatContainerMessagesList","props","sendingText","sendingMessages","messages","actionRef","onScrollEnds","getMoreMessages","isLoading","virtualListRef","React","useRef","useVirtual","size","length","parentRef","overscan","estimateSize","useCallback","vScroll","scrollToIndex","totalSize","virtualItems","onScrollStop","current","getBoundingClientRect","bottom","top","list","querySelectorAll","indexList","forEach","item","itemTop","push","dataset","index","useImperativeHandle","a","b","align","getMessagesInView","useEffect","handlerCallback","localVirtualRef","onScroll","clearTimeout","setTimeout","addEventListener","removeEventListener","render","useMemo","map","virtualItem","measureRef","start","row","isSending","find","m","dsId","style","position","left","transform","width","StyledWrapperListItem","type","BUBBLE_TYPES","SENDER","RECIPIENT","ChatBubble","helpMessage","DELIMITER","MessageDelimiter","SYSTEM","SystemMessage","StyledWrapper","StyledChatContainerContentList","StyledChatContainerContentListScroll","StyledLoadMoreContainer","DSButton","propTypes","listProps","defaultProps","ChatContainerMessagesListWithSchema","describe"],"mappings":"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"}
+{"version":3,"file":"ChatContainerMessagesList.js","sources":["../../../../src/parts/chat-container-messages-list/ChatContainerMessagesList.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React, { CSSProperties } from 'react';\nimport { describe } from 'react-desc';\nimport { useVirtual } from 'react-virtual';\nimport DSButton from '@elliemae/ds-basic/Button';\nimport { ChatBubble, BUBBLE_TYPES } from '../bubble';\nimport { MessageDelimiter } from '../message-delimiter';\nimport { SystemMessage } from '../system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n} from './styled';\nimport { defaultProps, listProps, ChatContainerMessagesListProps } from './props';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst getPadding = (hasMoreItems) => {\n  const padding = {\n    paddingStart: 0,\n    paddingEnd: -5,\n  };\n  if (hasMoreItems === 'top') padding.paddingStart = 42;\n  else if (hasMoreItems === 'bottom') padding.paddingEnd = 42;\n  return padding;\n};\n\nconst ChatContainerMessagesList = (props: ChatContainerMessagesListProps): JSX.Element => {\n  useValidateProps(props, ChatContainerMessagesListWithSchema.toJSON());\n\n  const { sendingText, sendingMessages, messages, actionRef, onScrollEnds, getMoreMessages, hasMoreItems, isLoading } =\n    props;\n  const virtualListRef = React.useRef<HTMLDivElement>();\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const {\n    scrollToIndex: vScroll,\n    totalSize,\n    virtualItems,\n  } = useVirtual({\n    size: messages.length,\n    parentRef: virtualListRef,\n    overscan: 15,\n    ...getPadding(hasMoreItems),\n    estimateSize: React.useCallback(() => 80, []),\n  });\n\n  const onScrollStop = React.useCallback((): number[] => {\n    const { bottom, top } = virtualListRef.current.getBoundingClientRect();\n    const list = virtualListRef.current.querySelectorAll(\n      '[data-element=\"chat-element-list-item\"]',\n    ) as NodeListOf<HTMLDivElement>;\n    const indexList = [];\n    list.forEach((item: HTMLDivElement) => {\n      const { top: itemTop } = item.getBoundingClientRect();\n      if (itemTop < bottom && itemTop > top) indexList.push(item.dataset.index);\n    });\n    if (onScrollEnds) onScrollEnds(indexList);\n    return indexList;\n  }, [onScrollEnds]);\n\n  const scrollAndFocus = React.useCallback(\n    (index: number) => {\n      vScroll(index, { align: 'center' });\n      setTimeout(() => {\n        (virtualListRef.current.querySelector(`[data-index=\"${index}\"]`) as HTMLDivElement).focus();\n      }, 300);\n    },\n    [vScroll],\n  );\n\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.scrollToIndex = (a, b = { align: 'center' }) => {\n        vScroll(a, b);\n      };\n      actionRef.current.getMessagesInView = onScrollStop;\n      actionRef.current.focusToIndex = (a, b = { align: 'center' }) => {\n        scrollAndFocus(a);\n      };\n      actionRef.current.focusToList = (a, b = { align: 'center' }) => {\n        virtualListRef.current?.focus();\n      };\n    }\n  }, [actionRef, onScrollStop, scrollAndFocus, vScroll]);\n\n  const handleKey = React.useCallback(\n    (e) => {\n      e.preventDefault();\n      const { key } = e;\n      const index = Number(e.currentTarget.dataset.index);\n      switch (key) {\n        case 'ArrowUp':\n          if (index > 0)\n            (virtualListRef.current.querySelector(`[data-index=\"${index - 1}\"]`) as HTMLDivElement).focus();\n          break;\n        case 'ArrowDown':\n          if (index < messages.length - 1) {\n            (virtualListRef.current.querySelector(`[data-index=\"${index + 1}\"]`) as HTMLDivElement).focus();\n          }\n          break;\n        case 'Home':\n          scrollAndFocus(0);\n          break;\n        case 'End':\n          scrollAndFocus(messages.length - 1);\n          break;\n        case 'Tab':\n          actionRef.current.focusToComposer();\n          break;\n        default:\n          break;\n      }\n    },\n    [actionRef, messages.length, scrollAndFocus],\n  );\n\n  React.useEffect(() => {\n    let handlerCallback = null;\n    const localVirtualRef = virtualListRef.current;\n    const onScroll = () => {\n      if (handlerCallback) clearTimeout(handlerCallback);\n      handlerCallback = setTimeout(onScrollStop, 300);\n    };\n    if (onScrollEnds) {\n      virtualListRef.current.addEventListener('scroll', onScroll);\n    }\n    return () => {\n      if (handlerCallback) clearTimeout(handlerCallback);\n      if (onScrollEnds) localVirtualRef.removeEventListener('scroll', onScroll);\n    };\n  }, [onScrollStop, onScrollEnds]);\n\n  const render = React.useMemo(\n    () =>\n      virtualItems.map((virtualItem) => {\n        const { index, measureRef, start } = virtualItem;\n        const row = messages[index];\n        const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);\n        const style: CSSProperties = {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          transform: `translateY(${start}px)`,\n          width: '100%',\n        };\n\n        return (\n          <ListItem\n            data-element=\"chat-element-list-item\"\n            data-index={index}\n            key={`ds-chat-bubble-${index}`}\n            style={style}\n            ref={measureRef}\n            tabIndex={0}\n            onKeyDown={handleKey}\n            role=\"listitem\"\n          >\n            <StyledWrapperListItem type={row.type}>\n              {row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? (\n                // eslint-disable-next-line\n                <ChatBubble {...(row as any)} helpMessage={isSending ? sendingText : row.helpMessage} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.DELIMITER ? <MessageDelimiter {...(row as any)} /> : null}\n              {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...(row as any)} /> : null}\n            </StyledWrapperListItem>\n          </ListItem>\n        );\n      }),\n    [virtualItems, messages, sendingMessages, handleKey, sendingText],\n  );\n\n  return (\n    <StyledWrapper>\n      <StyledChatContainerContentList\n        data-testid=\"chat-thread-container\"\n        tabIndex={0}\n        aria-live=\"polite\"\n        ref={virtualListRef}\n        role=\"list\"\n        onKeyDown={handleKey}\n      >\n        <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n          {render}\n          {!isLoading && hasMoreItems ? (\n            <StyledLoadMoreContainer hasMoreItems={hasMoreItems}>\n              <DSButton labelText=\"Load More\" buttonType=\"secondary\" onClick={getMoreMessages} />\n            </StyledLoadMoreContainer>\n          ) : null}\n        </StyledChatContainerContentListScroll>\n      </StyledChatContainerContentList>\n    </StyledWrapper>\n  );\n};\n\nChatContainerMessagesList.propTypes = listProps;\nChatContainerMessagesList.defaultProps = defaultProps;\nconst ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);\nChatContainerMessagesListWithSchema.propTypes = listProps;\n\nexport { ChatContainerMessagesList, ChatContainerMessagesListWithSchema };\n"],"names":["getPadding","hasMoreItems","padding","paddingStart","paddingEnd","ChatContainerMessagesList","props","useValidateProps","ChatContainerMessagesListWithSchema","toJSON","sendingText","sendingMessages","messages","actionRef","onScrollEnds","getMoreMessages","isLoading","virtualListRef","React","useRef","useVirtual","size","length","parentRef","overscan","estimateSize","useCallback","vScroll","scrollToIndex","totalSize","virtualItems","onScrollStop","current","getBoundingClientRect","bottom","top","list","querySelectorAll","indexList","forEach","item","itemTop","push","dataset","index","scrollAndFocus","align","setTimeout","querySelector","focus","useEffect","a","b","getMessagesInView","focusToIndex","focusToList","handleKey","e","preventDefault","key","Number","currentTarget","focusToComposer","handlerCallback","localVirtualRef","onScroll","clearTimeout","addEventListener","removeEventListener","render","useMemo","map","virtualItem","measureRef","start","row","isSending","find","m","dsId","style","position","left","transform","width","ListItem","StyledWrapperListItem","type","BUBBLE_TYPES","SENDER","RECIPIENT","ChatBubble","helpMessage","DELIMITER","MessageDelimiter","SYSTEM","SystemMessage","StyledWrapper","StyledChatContainerContentList","StyledChatContainerContentListScroll","StyledLoadMoreContainer","DSButton","propTypes","listProps","defaultProps","describe"],"mappings":"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"}

package/cjs/parts/chat-container-messages-list/config/useValidateProps.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+var useValidateProps = function useValidateProps(props, schema) {
+  dsPropsHelpers.useValidatePropTypes(props, schema);
+};
+
+exports.useValidateProps = useValidateProps;
+//# sourceMappingURL=useValidateProps.js.map

package/cjs/parts/chat-container-messages-list/config/useValidateProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValidateProps.js","sources":["../../../../../src/parts/chat-container-messages-list/config/useValidateProps.tsx"],"sourcesContent":["import { useValidatePropTypes } from '@elliemae/ds-props-helpers';\nimport { ChatContainerMessagesListProps } from '../props';\n\nexport const useValidateProps = (props: ChatContainerMessagesListProps, schema: unknown): void => {\n  useValidatePropTypes(props, schema);\n};\n"],"names":["useValidateProps","props","schema","useValidatePropTypes"],"mappings":";;;;;;IAGaA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAwCC,MAAxC,EAAkE;AAChGC,EAAAA,mCAAoB,CAACF,KAAD,EAAQC,MAAR,CAApB;AACD;;;;"}

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

@@ -17,15 +17,20 @@ require('@elliemae/ds-grid');
 require('../bubble/props.js');
 require('prop-types');
 require('lodash');
+require('../bubble/config/useValidateProps.js');
+require('@elliemae/ds-props-helpers');
 require('../bubble/ChatBubbleArrow.js');
 require('../message-delimiter/MessageDelimiter.js');
 require('../message-delimiter/styled.js');
 require('../message-delimiter/props.js');
+require('../message-delimiter/config/useValidateProps.js');
 require('../system-message/SystemMessage.js');
 require('../system-message/style.js');
 require('../system-message/props.js');
+require('../system-message/config/useValidateProps.js');
 require('./styled.js');
 require('./props.js');
+require('./config/useValidateProps.js');
 
 
 

package/cjs/parts/chat-container-messages-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -17,7 +17,7 @@ var defaultProps = {
 };
 var listProps = {
   messages: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object).description('The array of out-of-the-box items you want to render inside the ChatMessageList').defaultValue(defaultProps.messages),
-  actionRef: reactDesc.PropTypes.func.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n        }\n        \n      ").defaultValue(defaultProps.messages),
+  actionRef: reactDesc.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),
   onScrollEnds: reactDesc.PropTypes.func.description("Called when the scroll stops."),
   isLoading: reactDesc.PropTypes.oneOf(['top', 'bottom', undefined]).description('Keeps the load more space while the loading is in progress'),
   hasMoreItems: reactDesc.PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Load More button at the `top` or `bottom` of the container'),

package/cjs/parts/chat-container-messages-list/props.js.map

@@ -1 +1 @@
-{"version":3,"file":"props.js","sources":["../../../../src/parts/chat-container-messages-list/props.ts"],"sourcesContent":["import { Ref } from 'react';\nimport { PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\nimport { BubbleProps } from '../bubble/props';\n\ninterface ActionRef {\n  scrollToIndex: (n: number, b: { align: 'end' | 'center' | 'start' }) => void;\n  getMessagesInView: () => number[];\n}\nexport interface ChatContainerMessagesListProps {\n  messages: BubbleProps[];\n  actionRef: Ref<ActionRef>;\n  onScrollEnds: (indexList: number[]) => number[];\n  isLoading?: 'top' | 'bottom';\n  hasMoreItems?: 'top' | 'bottom';\n  getMoreMessages: PropTypes.func;\n  sendingMessages?: Array<string | number>;\n  sendingText: string;\n}\n\nexport const defaultProps: ChatContainerMessagesListProps = {\n  messages: [],\n  actionRef: noop,\n  onScrollEnds: () => [],\n  getMoreMessages: noop,\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n};\n\nexport const listProps = {\n  messages: PropTypes.arrayOf(PropTypes.object)\n    .description('The array of out-of-the-box items you want to render inside the ChatMessageList')\n    .defaultValue(defaultProps.messages),\n  actionRef: PropTypes.func\n    .description(\n      `Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n        }\n        \n      `,\n    )\n    .defaultValue(defaultProps.messages),\n  onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),\n  isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Keeps the load more space while the loading is in progress',\n  ),\n  hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Load More button at the `top` or `bottom` of the container',\n  ),\n  getMoreMessages: PropTypes.func\n    .description('Called when the user clicks on load more')\n    .defaultValue(defaultProps.getMoreMessages),\n  sendingMessages: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultProps.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultProps.sendingText),\n};\n"],"names":["defaultProps","messages","actionRef","noop","onScrollEnds","getMoreMessages","sendingMessages","undefined","sendingText","listProps","PropTypes","arrayOf","object","description","defaultValue","func","isLoading","oneOf","hasMoreItems","oneOfType","string","number"],"mappings":";;;;;;;IAoBaA,YAA4C,GAAG;AAC1DC,EAAAA,QAAQ,EAAE,EADgD;AAE1DC,EAAAA,SAAS,EAAEC,WAF+C;AAG1DC,EAAAA,YAAY,EAAE;AAAA,WAAM,EAAN;AAAA,GAH4C;AAI1DC,EAAAA,eAAe,EAAEF,WAJyC;AAK1DG,EAAAA,eAAe,EAAEC,SALyC;AAM1DC,EAAAA,WAAW,EAAE;AAN6C;IAS/CC,SAAS,GAAG;AACvBR,EAAAA,QAAQ,EAAES,mBAAS,CAACC,OAAV,CAAkBD,mBAAS,CAACE,MAA5B,EACPC,WADO,CACK,iFADL,EAEPC,YAFO,CAEMd,YAAY,CAACC,QAFnB,CADa;AAIvBC,EAAAA,SAAS,EAAEQ,mBAAS,CAACK,IAAV,CACRF,WADQ,sJAURC,YAVQ,CAUKd,YAAY,CAACC,QAVlB,CAJY;AAevBG,EAAAA,YAAY,EAAEM,mBAAS,CAACK,IAAV,CAAeF,WAAf,iCAfS;AAgBvBG,EAAAA,SAAS,EAAEN,mBAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBV,SAAlB,CAAhB,EAA8CM,WAA9C,CACT,4DADS,CAhBY;AAmBvBK,EAAAA,YAAY,EAAER,mBAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBV,SAAlB,CAAhB,EAA8CM,WAA9C,CACZ,iEADY,CAnBS;AAsBvBR,EAAAA,eAAe,EAAEK,mBAAS,CAACK,IAAV,CACdF,WADc,CACF,0CADE,EAEdC,YAFc,CAEDd,YAAY,CAACK,eAFZ,CAtBM;AAyBvBC,EAAAA,eAAe,EAAEI,mBAAS,CAACC,OAAV,CAAkBD,mBAAS,CAACS,SAAV,CAAoB,CAACT,mBAAS,CAACU,MAAX,EAAmBV,mBAAS,CAACW,MAA7B,CAApB,CAAlB,EACdR,WADc,CACF,kCADE,EAEdC,YAFc,CAEDd,YAAY,CAACM,eAFZ,CAzBM;AA4BvBE,EAAAA,WAAW,EAAEE,mBAAS,CAACU,MAAV,CACVP,WADU,CACE,kDADF,EAEVC,YAFU,CAEGd,YAAY,CAACQ,WAFhB;AA5BU;;;;;"}
+{"version":3,"file":"props.js","sources":["../../../../src/parts/chat-container-messages-list/props.ts"],"sourcesContent":["import { Ref } from 'react';\nimport { PropTypes } from 'react-desc';\nimport { noop } from 'lodash';\nimport { BubbleProps } from '../bubble/props';\n\ninterface ActionRef {\n  scrollToIndex: (n: number, b: { align: 'end' | 'center' | 'start' }) => void;\n  getMessagesInView: () => number[];\n}\nexport interface ChatContainerMessagesListProps {\n  messages: BubbleProps[];\n  actionRef: any;\n  onScrollEnds: (indexList: number[]) => number[];\n  isLoading?: 'top' | 'bottom';\n  hasMoreItems?: 'top' | 'bottom';\n  getMoreMessages: PropTypes.func;\n  sendingMessages?: Array<string | number>;\n  sendingText: string;\n}\n\nexport const defaultProps: ChatContainerMessagesListProps = {\n  messages: [],\n  actionRef: noop,\n  onScrollEnds: () => [],\n  getMoreMessages: noop,\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n};\n\nexport const listProps = {\n  messages: PropTypes.arrayOf(PropTypes.object)\n    .description('The array of out-of-the-box items you want to render inside the ChatMessageList')\n    .defaultValue(defaultProps.messages),\n  actionRef: PropTypes.object\n    .description(\n      `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      `,\n    )\n    .defaultValue(defaultProps.actionRef),\n  onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),\n  isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Keeps the load more space while the loading is in progress',\n  ),\n  hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n    'Show Load More button at the `top` or `bottom` of the container',\n  ),\n  getMoreMessages: PropTypes.func\n    .description('Called when the user clicks on load more')\n    .defaultValue(defaultProps.getMoreMessages),\n  sendingMessages: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultProps.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultProps.sendingText),\n};\n"],"names":["defaultProps","messages","actionRef","noop","onScrollEnds","getMoreMessages","sendingMessages","undefined","sendingText","listProps","PropTypes","arrayOf","object","description","defaultValue","func","isLoading","oneOf","hasMoreItems","oneOfType","string","number"],"mappings":";;;;;;;IAoBaA,YAA4C,GAAG;AAC1DC,EAAAA,QAAQ,EAAE,EADgD;AAE1DC,EAAAA,SAAS,EAAEC,WAF+C;AAG1DC,EAAAA,YAAY,EAAE;AAAA,WAAM,EAAN;AAAA,GAH4C;AAI1DC,EAAAA,eAAe,EAAEF,WAJyC;AAK1DG,EAAAA,eAAe,EAAEC,SALyC;AAM1DC,EAAAA,WAAW,EAAE;AAN6C;IAS/CC,SAAS,GAAG;AACvBR,EAAAA,QAAQ,EAAES,mBAAS,CAACC,OAAV,CAAkBD,mBAAS,CAACE,MAA5B,EACPC,WADO,CACK,iFADL,EAEPC,YAFO,CAEMd,YAAY,CAACC,QAFnB,CADa;AAIvBC,EAAAA,SAAS,EAAEQ,mBAAS,CAACE,MAAV,CACRC,WADQ,oTAcRC,YAdQ,CAcKd,YAAY,CAACE,SAdlB,CAJY;AAmBvBE,EAAAA,YAAY,EAAEM,mBAAS,CAACK,IAAV,CAAeF,WAAf,iCAnBS;AAoBvBG,EAAAA,SAAS,EAAEN,mBAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBV,SAAlB,CAAhB,EAA8CM,WAA9C,CACT,4DADS,CApBY;AAuBvBK,EAAAA,YAAY,EAAER,mBAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBV,SAAlB,CAAhB,EAA8CM,WAA9C,CACZ,iEADY,CAvBS;AA0BvBR,EAAAA,eAAe,EAAEK,mBAAS,CAACK,IAAV,CACdF,WADc,CACF,0CADE,EAEdC,YAFc,CAEDd,YAAY,CAACK,eAFZ,CA1BM;AA6BvBC,EAAAA,eAAe,EAAEI,mBAAS,CAACC,OAAV,CAAkBD,mBAAS,CAACS,SAAV,CAAoB,CAACT,mBAAS,CAACU,MAAX,EAAmBV,mBAAS,CAACW,MAA7B,CAApB,CAAlB,EACdR,WADc,CACF,kCADE,EAEdC,YAFc,CAEDd,YAAY,CAACM,eAFZ,CA7BM;AAgCvBE,EAAAA,WAAW,EAAEE,mBAAS,CAACU,MAAV,CACVP,WADU,CACE,kDADF,EAEVC,YAFU,CAEGd,YAAY,CAACQ,WAFhB;AAhCU;;;;;"}

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

@@ -6,12 +6,14 @@ var styled = require('styled-components');
 require('../bubble/ChatBubble.js');
 var parts_bubble_props = require('../bubble/props.js');
 require('react');
+require('react-desc');
 require('@elliemae/ds-icons/WarningCircleFill');
 require('../bubble/styled.js');
 require('@elliemae/ds-grid');
+require('../bubble/config/useValidateProps.js');
+require('@elliemae/ds-props-helpers');
 require('../bubble/ChatBubbleArrow.js');
 require('prop-types');
-require('react-desc');
 require('lodash');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -56,7 +58,13 @@ var StyledLoadMoreContainer = /*#__PURE__*/styled__default['default'].div.withCo
 }, function (props) {
   return props.hasMoreItems === 'bottom' ? 'bottom: 0;' : '';
 });
+var ListItem = /*#__PURE__*/styled__default['default'].div.withConfig({
+  componentId: "sc-1jhprzr-5"
+})(["&:focus,&:focus-visible{outline:none;&:after{content:'';display:block;position:absolute;pointer-events:none;background:rgba(255,255,255,0.5);width:calc(100% + ", ");height:100%;}}"], function (props) {
+  return props.theme.space.xxs;
+});
 
+exports.ListItem = ListItem;
 exports.StyledChatContainerContentList = StyledChatContainerContentList;
 exports.StyledChatContainerContentListScroll = StyledChatContainerContentListScroll;
 exports.StyledLoadMoreContainer = StyledLoadMoreContainer;

package/cjs/parts/chat-container-messages-list/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/parts/chat-container-messages-list/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BUBBLE_TYPES } from '../bubble/index';\nimport { BubbleProps } from '../bubble/props';\n\nexport const StyledWrapper = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\n// list\nexport const StyledWrapperListItem = styled.div<Partial<BubbleProps>>`\n  min-width: 100%;\n  ${(props) =>\n    props.type === BUBBLE_TYPES.SENDER &&\n    `padding: ${props.theme.space.xxs} ${props.theme.space.xxs} 0px 13%\n  `};\n  ${(props) =>\n    props.type === BUBBLE_TYPES.RECIPIENT &&\n    `padding: ${props.theme.space.xxs} 13% ${props.theme.space.xxs}\n    ${props.theme.space.xxs}\n  `};\n  ${(props) =>\n    props.type === BUBBLE_TYPES.SYSTEM &&\n    `padding: ${props.theme.space.xxs} 0px\n  `};\n`;\n\nexport const StyledChatContainerContentList = styled.div`\n  width: 100%;\n  height: 100%;\n  padding: ${(props) => props.theme.space.xs};\n  padding-bottom: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n`;\nexport const StyledChatContainerContentListScroll = styled.div<{ height: string }>`\n  width: 100%;\n  height: ${(props) => props.height};\n  position: relative;\n`;\n\nexport const StyledLoadMoreContainer = styled.div<{ hasMoreItems?: 'top' | 'bottom' }>`\n  position: absolute;\n  width: calc(100% + ${(props) => props.theme.space.xxs});\n  padding: ${(props) => props.theme.space.xxs};\n  left: -${(props) => props.theme.space.xxs};\n  right: -${(props) => props.theme.space.xxs};\n  display: grid;\n  justify-content: center;\n  align-items: center;\n  ${(props) => (props.hasMoreItems === 'top' ? 'top: 0;' : '')}\n  ${(props) => (props.hasMoreItems === 'bottom' ? 'bottom: 0;' : '')}\n`;\n"],"names":["StyledWrapper","styled","div","StyledWrapperListItem","props","type","BUBBLE_TYPES","SENDER","theme","space","xxs","RECIPIENT","SYSTEM","StyledChatContainerContentList","xs","StyledChatContainerContentListScroll","height","StyledLoadMoreContainer","hasMoreItems"],"mappings":";;;;;;;;;;;;;;;;;;;;IAIaA,aAAa,gBAAGC,0BAAM,CAACC,GAAV;AAAA;AAAA;;IAMbC,qBAAqB,gBAAGF,0BAAM,CAACC,GAAV;AAAA;AAAA,uCAE9B,UAACE,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAeC,+BAAY,CAACC,MAA5B,uBACYH,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAD9B,cACqCN,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GADvD,iBADA;AAAA,CAF8B,EAM9B,UAACN,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAeC,+BAAY,CAACK,SAA5B,uBACYP,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAD9B,kBACyCN,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAD3D,mBAEEN,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAFpB,SADA;AAAA,CAN8B,EAW9B,UAACN,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAeC,+BAAY,CAACM,MAA5B,uBACYR,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAD9B,aADA;AAAA,CAX8B;IAiBrBG,8BAA8B,gBAAGZ,0BAAM,CAACC,GAAV;AAAA;AAAA,gGAG9B,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBK,EAA7B;AAAA,CAH8B;IAQ9BC,oCAAoC,gBAAGd,0BAAM,CAACC,GAAV;AAAA;AAAA,kDAErC,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACY,MAAjB;AAAA,CAFqC;IAMpCC,uBAAuB,gBAAGhB,0BAAM,CAACC,GAAV;AAAA;AAAA,uJAEb,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAA7B;AAAA,CAFa,EAGvB,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAA7B;AAAA,CAHuB,EAIzB,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAA7B;AAAA,CAJyB,EAKxB,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAA7B;AAAA,CALwB,EAShC,UAACN,KAAD;AAAA,SAAYA,KAAK,CAACc,YAAN,KAAuB,KAAvB,GAA+B,SAA/B,GAA2C,EAAvD;AAAA,CATgC,EAUhC,UAACd,KAAD;AAAA,SAAYA,KAAK,CAACc,YAAN,KAAuB,QAAvB,GAAkC,YAAlC,GAAiD,EAA7D;AAAA,CAVgC;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/parts/chat-container-messages-list/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BUBBLE_TYPES } from '../bubble/index';\nimport { BubbleProps } from '../bubble/props';\n\nexport const StyledWrapper = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\n// list\nexport const StyledWrapperListItem = styled.div<Partial<BubbleProps>>`\n  min-width: 100%;\n  ${(props) =>\n    props.type === BUBBLE_TYPES.SENDER &&\n    `padding: ${props.theme.space.xxs} ${props.theme.space.xxs} 0px 13%\n  `};\n  ${(props) =>\n    props.type === BUBBLE_TYPES.RECIPIENT &&\n    `padding: ${props.theme.space.xxs} 13% ${props.theme.space.xxs}\n    ${props.theme.space.xxs}\n  `};\n  ${(props) =>\n    props.type === BUBBLE_TYPES.SYSTEM &&\n    `padding: ${props.theme.space.xxs} 0px\n  `};\n`;\n\nexport const StyledChatContainerContentList = styled.div`\n  width: 100%;\n  height: 100%;\n  padding: ${(props) => props.theme.space.xs};\n  padding-bottom: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n`;\nexport const StyledChatContainerContentListScroll = styled.div<{ height: string }>`\n  width: 100%;\n  height: ${(props) => props.height};\n  position: relative;\n`;\n\nexport const StyledLoadMoreContainer = styled.div<{ hasMoreItems?: 'top' | 'bottom' }>`\n  position: absolute;\n  width: calc(100% + ${(props) => props.theme.space.xxs});\n  padding: ${(props) => props.theme.space.xxs};\n  left: -${(props) => props.theme.space.xxs};\n  right: -${(props) => props.theme.space.xxs};\n  display: grid;\n  justify-content: center;\n  align-items: center;\n  ${(props) => (props.hasMoreItems === 'top' ? 'top: 0;' : '')}\n  ${(props) => (props.hasMoreItems === 'bottom' ? 'bottom: 0;' : '')}\n`;\nexport const ListItem = styled.div`\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      pointer-events: none;\n      background: rgba(255, 255, 255, 0.5);\n      width: calc(100% + ${(props) => props.theme.space.xxs});\n      height: 100%;\n    }\n  }\n`;\n"],"names":["StyledWrapper","styled","div","StyledWrapperListItem","props","type","BUBBLE_TYPES","SENDER","theme","space","xxs","RECIPIENT","SYSTEM","StyledChatContainerContentList","xs","StyledChatContainerContentListScroll","height","StyledLoadMoreContainer","hasMoreItems","ListItem"],"mappings":";;;;;;;;;;;;;;;;;;;;;;IAIaA,aAAa,gBAAGC,0BAAM,CAACC,GAAV;AAAA;AAAA;;IAMbC,qBAAqB,gBAAGF,0BAAM,CAACC,GAAV;AAAA;AAAA,uCAE9B,UAACE,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAeC,+BAAY,CAACC,MAA5B,uBACYH,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAD9B,cACqCN,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GADvD,iBADA;AAAA,CAF8B,EAM9B,UAACN,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAeC,+BAAY,CAACK,SAA5B,uBACYP,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAD9B,kBACyCN,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAD3D,mBAEEN,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAFpB,SADA;AAAA,CAN8B,EAW9B,UAACN,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAeC,+BAAY,CAACM,MAA5B,uBACYR,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAD9B,aADA;AAAA,CAX8B;IAiBrBG,8BAA8B,gBAAGZ,0BAAM,CAACC,GAAV;AAAA;AAAA,gGAG9B,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBK,EAA7B;AAAA,CAH8B;IAQ9BC,oCAAoC,gBAAGd,0BAAM,CAACC,GAAV;AAAA;AAAA,kDAErC,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACY,MAAjB;AAAA,CAFqC;IAMpCC,uBAAuB,gBAAGhB,0BAAM,CAACC,GAAV;AAAA;AAAA,uJAEb,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAA7B;AAAA,CAFa,EAGvB,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAA7B;AAAA,CAHuB,EAIzB,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAA7B;AAAA,CAJyB,EAKxB,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAA7B;AAAA,CALwB,EAShC,UAACN,KAAD;AAAA,SAAYA,KAAK,CAACc,YAAN,KAAuB,KAAvB,GAA+B,SAA/B,GAA2C,EAAvD;AAAA,CATgC,EAUhC,UAACd,KAAD;AAAA,SAAYA,KAAK,CAACc,YAAN,KAAuB,QAAvB,GAAkC,YAAlC,GAAiD,EAA7D;AAAA,CAVgC;IAYvBC,QAAQ,gBAAGlB,0BAAM,CAACC,GAAV;AAAA;AAAA,4LAUM,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAA7B;AAAA,CAVN;;;;;;;;;"}

package/cjs/parts/chat-empty-state/ChatEmptyState.js

@@ -3,19 +3,24 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var reactDesc = require('react-desc');
 var dsGrid = require('@elliemae/ds-grid');
 var Communications = require('@elliemae/ds-icons/Communications');
+var parts_chatEmptyState_props = require('./props.js');
 var parts_chatEmptyState_styled = require('./styled.js');
+var parts_chatEmptyState_config_useValidateProps = require('./config/useValidateProps.js');
 require('styled-components');
+require('@elliemae/ds-props-helpers');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Communications__default = /*#__PURE__*/_interopDefaultLegacy(Communications);
 
-var ChatEmptyState = function ChatEmptyState(_ref) {
-  var label = _ref.label,
-      action = _ref.action;
+var ChatEmptyState = function ChatEmptyState(props) {
+  parts_chatEmptyState_config_useValidateProps.useValidateProps(props, ChatEmptyStateListWithSchema.toJSON());
+  var label = props.label,
+      action = props.action;
   var MainContent = React.useMemo(function () {
     return /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, {
       alignItems: "center",
@@ -40,5 +45,11 @@ var ChatEmptyState = function ChatEmptyState(_ref) {
   }, MainContent);
 };
 
+ChatEmptyState.propTypes = parts_chatEmptyState_props.emptyStateProps;
+ChatEmptyState.defaultProps = parts_chatEmptyState_props.defaultProps;
+var ChatEmptyStateListWithSchema = reactDesc.describe(ChatEmptyState);
+ChatEmptyStateListWithSchema.propTypes = parts_chatEmptyState_props.emptyStateProps;
+
 exports.ChatEmptyState = ChatEmptyState;
+exports.ChatEmptyStateListWithSchema = ChatEmptyStateListWithSchema;
 //# sourceMappingURL=ChatEmptyState.js.map

package/cjs/parts/chat-empty-state/ChatEmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatEmptyState.js","sources":["../../../../src/parts/chat-empty-state/ChatEmptyState.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport Communications from '@elliemae/ds-icons/Communications';\nimport { ChatEmptyStateProps } from './props';\nimport { ChatEmptyStateWrapper, MessageWrapper } from './styled';\n\nexport const ChatEmptyState = ({ label, action }: ChatEmptyStateProps): JSX.Element => {\n  const MainContent = useMemo(\n    () => (\n      <Grid alignItems=\"center\" justifyContent=\"center\">\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          <Communications size=\"xxl\" color={['neutral', 400]} />\n        </Grid>\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          <MessageWrapper>{label}</MessageWrapper>\n        </Grid>\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          {action}\n        </Grid>\n      </Grid>\n    ),\n    [label, action],\n  );\n  return (\n    <ChatEmptyStateWrapper alignItems=\"center\" justifyContent=\"center\">\n      {MainContent}\n    </ChatEmptyStateWrapper>\n  );\n};\n"],"names":["ChatEmptyState","label","action","MainContent","useMemo","React","Grid","Communications","MessageWrapper","ChatEmptyStateWrapper"],"mappings":";;;;;;;;;;;;;;;IAMaA,cAAc,GAAG,SAAjBA,cAAiB,OAAyD;AAAA,MAAtDC,KAAsD,QAAtDA,KAAsD;AAAA,MAA/CC,MAA+C,QAA/CA,MAA+C;AACrF,MAAMC,WAAW,GAAGC,aAAO,CACzB;AAAA,wBACEC,wCAACC,WAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,oBACED,wCAACC,WAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,oBACED,wCAACE,kCAAD;AAAgB,MAAA,IAAI,EAAC,KAArB;AAA2B,MAAA,KAAK,EAAE,CAAC,SAAD,EAAY,GAAZ;AAAlC,MADF,CADF,eAIEF,wCAACC,WAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,oBACED,wCAACG,0CAAD,QAAiBP,KAAjB,CADF,CAJF,eAOEI,wCAACC,WAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,OACGJ,MADH,CAPF,CADF;AAAA,GADyB,EAczB,CAACD,KAAD,EAAQC,MAAR,CAdyB,CAA3B;AAgBA,sBACEG,wCAACI,iDAAD;AAAuB,IAAA,UAAU,EAAC,QAAlC;AAA2C,IAAA,cAAc,EAAC;AAA1D,KACGN,WADH,CADF;AAKD;;;;"}
+{"version":3,"file":"ChatEmptyState.js","sources":["../../../../src/parts/chat-empty-state/ChatEmptyState.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { describe } from 'react-desc';\nimport { Grid } from '@elliemae/ds-grid';\nimport Communications from '@elliemae/ds-icons/Communications';\nimport { ChatEmptyStateProps, emptyStateProps, defaultProps } from './props';\nimport { ChatEmptyStateWrapper, MessageWrapper } from './styled';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst ChatEmptyState = (props: ChatEmptyStateProps): JSX.Element => {\n  useValidateProps(props, ChatEmptyStateListWithSchema.toJSON());\n  const { label, action } = props;\n  const MainContent = useMemo(\n    () => (\n      <Grid alignItems=\"center\" justifyContent=\"center\">\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          <Communications size=\"xxl\" color={['neutral', 400]} />\n        </Grid>\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          <MessageWrapper>{label}</MessageWrapper>\n        </Grid>\n        <Grid alignItems=\"center\" justifyContent=\"center\">\n          {action}\n        </Grid>\n      </Grid>\n    ),\n    [label, action],\n  );\n  return (\n    <ChatEmptyStateWrapper alignItems=\"center\" justifyContent=\"center\">\n      {MainContent}\n    </ChatEmptyStateWrapper>\n  );\n};\n\nChatEmptyState.propTypes = emptyStateProps;\nChatEmptyState.defaultProps = defaultProps;\nconst ChatEmptyStateListWithSchema = describe(ChatEmptyState);\nChatEmptyStateListWithSchema.propTypes = emptyStateProps;\n\nexport { ChatEmptyState, ChatEmptyStateListWithSchema };\n"],"names":["ChatEmptyState","props","useValidateProps","ChatEmptyStateListWithSchema","toJSON","label","action","MainContent","useMemo","React","Grid","Communications","MessageWrapper","ChatEmptyStateWrapper","propTypes","emptyStateProps","defaultProps","describe"],"mappings":";;;;;;;;;;;;;;;;;;;IAQMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAA6C;AAClEC,EAAAA,6DAAgB,CAACD,KAAD,EAAQE,4BAA4B,CAACC,MAA7B,EAAR,CAAhB;AACA,MAAQC,KAAR,GAA0BJ,KAA1B,CAAQI,KAAR;AAAA,MAAeC,MAAf,GAA0BL,KAA1B,CAAeK,MAAf;AACA,MAAMC,WAAW,GAAGC,aAAO,CACzB;AAAA,wBACEC,wCAACC,WAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,oBACED,wCAACC,WAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,oBACED,wCAACE,kCAAD;AAAgB,MAAA,IAAI,EAAC,KAArB;AAA2B,MAAA,KAAK,EAAE,CAAC,SAAD,EAAY,GAAZ;AAAlC,MADF,CADF,eAIEF,wCAACC,WAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,oBACED,wCAACG,0CAAD,QAAiBP,KAAjB,CADF,CAJF,eAOEI,wCAACC,WAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,OACGJ,MADH,CAPF,CADF;AAAA,GADyB,EAczB,CAACD,KAAD,EAAQC,MAAR,CAdyB,CAA3B;AAgBA,sBACEG,wCAACI,iDAAD;AAAuB,IAAA,UAAU,EAAC,QAAlC;AAA2C,IAAA,cAAc,EAAC;AAA1D,KACGN,WADH,CADF;AAKD;;AAEDP,cAAc,CAACc,SAAf,GAA2BC,0CAA3B;AACAf,cAAc,CAACgB,YAAf,GAA8BA,uCAA9B;IACMb,4BAA4B,GAAGc,kBAAQ,CAACjB,cAAD;AAC7CG,4BAA4B,CAACW,SAA7B,GAAyCC,0CAAzC;;;;;"}