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

package/esm/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","includes","label","id","viewLabel","onClick","onView","onClose","BANNER_TYPES","INFO","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","includes","label","id","viewLabel","onClick","onView","onClose","BANNER_TYPES","INFO","clientHeight","propTypes","containerProps","defaultProps","describe"],"mappings":"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"}

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

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

package/esm/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,oBAAoB,CAACF,KAAD,EAAQC,MAAR,CAApB;AACD;;;;"}

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

@@ -13,6 +13,8 @@ import '@elliemae/ds-icons/PaperAirplane';
 import '../chat-composer/styled.js';
 import 'styled-components';
 import '@elliemae/ds-button';
+import '../chat-composer/config/useValidateProps.js';
+import '@elliemae/ds-props-helpers';
 import '../chat-composer/props.js';
 import '../chat-container-messages-list/ChatContainerMessagesList.js';
 import 'react-virtual';
@@ -22,15 +24,20 @@ import '@elliemae/ds-icons/WarningCircleFill';
 import '../bubble/styled.js';
 import '../bubble/props.js';
 import 'prop-types';
+import '../bubble/config/useValidateProps.js';
 import '../bubble/ChatBubbleArrow.js';
 import '../message-delimiter/MessageDelimiter.js';
 import '../message-delimiter/styled.js';
 import '../message-delimiter/props.js';
+import '../message-delimiter/config/useValidateProps.js';
 import '../system-message/SystemMessage.js';
 import '../system-message/style.js';
 import '../system-message/props.js';
+import '../system-message/config/useValidateProps.js';
 import '../chat-container-messages-list/styled.js';
 import '../chat-container-messages-list/props.js';
+import '../chat-container-messages-list/config/useValidateProps.js';
 import './props.js';
 import './styled.js';
+import './config/useValidateProps.js';
 //# sourceMappingURL=index.js.map

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

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

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

@@ -6,7 +6,7 @@ import { defaultComposerPros } from '../chat-composer/props.js';
 var defaultProps = {
   messagesListProps: defaultProps$1,
   composerProps: defaultComposerPros,
-  actionRef: noop,
+  actionRef: undefined,
   autoScroll: false,
   device: 'desktop',
   isLoading: undefined,
@@ -33,7 +33,8 @@ var containerProps = {
   bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description('Show Loading messages indicator at the `top` or `bottom` of the container'),
   bannerProps: PropTypes.arrayOf(PropTypes.object).description('Banner configuration').defaultValue(defaultProps.bannerProps),
   sendingMessages: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description('Array of ids of sending messages').defaultValue(defaultProps.sendingMessages),
-  sendingText: PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText)
+  sendingText: PropTypes.string.description('Label description for messages in sending status').defaultValue(defaultProps.sendingText),
+  actionRef: PropTypes.object.description("Reference: \n        { \n          scrollToIndex: (n: number) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      ").defaultValue(defaultProps.actionRef)
 };
 
 export { containerProps, defaultProps };

package/esm/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,cAD2B;AAE9CC,EAAAA,aAAa,EAAEC,mBAF+B;AAG9CC,EAAAA,SAAS,EAAEC,IAHmC;AAI9CC,EAAAA,UAAU,EAAE,KAJkC;AAK9CC,EAAAA,MAAM,EAAE,SALsC;AAM9CC,EAAAA,SAAS,EAAEC,SANmC;AAO9CC,EAAAA,YAAY,EAAED,SAPgC;AAQ9CE,EAAAA,eAAe,EAAEN,IAR6B;AAS9CO,EAAAA,cAAc,EAAEH,SAT8B;AAU9CI,EAAAA,WAAW,EAAE;AACXC,IAAAA,KAAK,EAAE,iBADI;AAEXC,IAAAA,SAAS,EAAE,MAFA;AAGXC,IAAAA,MAAM,EAAEX,IAHG;AAIXY,IAAAA,OAAO,EAAEZ;AAJE,GAViC;AAgB9Ca,EAAAA,eAAe,EAAET,SAhB6B;AAiB9CU,EAAAA,WAAW,EAAE;AAjBiC;IAoBnCC,cAAc,GAAG;AAC5BpB,EAAAA,iBAAiB,EAAEqB,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EAChBC,WADgB,CACJ,mDADI,EAEhBC,YAFgB,CAEH1B,YAAY,CAACC,iBAFV,CADS;AAI5BE,EAAAA,aAAa,EAAEmB,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EACZC,WADY,CACA,wBADA,EAEZC,YAFY,CAEC1B,YAAY,CAACG,aAFd,CAJa;AAO5BI,EAAAA,UAAU,EAAEe,SAAS,CAACK,IAAV,CAAeF,WAAf,CAA2B,iCAA3B,EAA8DC,YAA9D,CAA2E1B,YAAY,CAACO,UAAxF,CAPgB;AAQ5BC,EAAAA,MAAM,EAAEc,SAAS,CAACM,MAAV,CACLH,WADK,CACO,mDADP,EAELC,YAFK,CAEQ1B,YAAY,CAACQ,MAFrB,CARoB;AAW5BC,EAAAA,SAAS,EAAEa,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBnB,SAAlB,CAAhB,EAA8Ce,WAA9C,CACT,2EADS,CAXiB;AAc5Bd,EAAAA,YAAY,EAAEW,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBnB,SAAlB,CAAhB,EAA8Ce,WAA9C,CACZ,iEADY,CAdc;AAiB5Bb,EAAAA,eAAe,EAAEU,SAAS,CAACQ,IAAV,CACdL,WADc,CACF,0CADE,EAEdC,YAFc,CAED1B,YAAY,CAACY,eAFZ,CAjBW;AAoB5BC,EAAAA,cAAc,EAAES,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBnB,SAAlB,CAAhB,EAA8Ce,WAA9C,CACd,2EADc,CApBY;AAuB5BX,EAAAA,WAAW,EAAEQ,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EACVC,WADU,CACE,sBADF,EAEVC,YAFU,CAEG1B,YAAY,CAACc,WAFhB,CAvBe;AA0B5BK,EAAAA,eAAe,EAAEG,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACS,SAAV,CAAoB,CAACT,SAAS,CAACM,MAAX,EAAmBN,SAAS,CAACU,MAA7B,CAApB,CAAlB,EACdP,WADc,CACF,kCADE,EAEdC,YAFc,CAED1B,YAAY,CAACmB,eAFZ,CA1BW;AA6B5BC,EAAAA,WAAW,EAAEE,SAAS,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,cAD2B;AAE9CC,EAAAA,aAAa,EAAEC,mBAF+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,IAR6B;AAS9CC,EAAAA,cAAc,EAAEP,SAT8B;AAU9CQ,EAAAA,WAAW,EAAE;AACXC,IAAAA,KAAK,EAAE,iBADI;AAEXC,IAAAA,SAAS,EAAE,MAFA;AAGXC,IAAAA,MAAM,EAAEL,IAHG;AAIXM,IAAAA,OAAO,EAAEN;AAJE,GAViC;AAgB9CO,EAAAA,eAAe,EAAEb,SAhB6B;AAiB9Cc,EAAAA,WAAW,EAAE;AAjBiC;IAoBnCC,cAAc,GAAG;AAC5BpB,EAAAA,iBAAiB,EAAEqB,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EAChBC,WADgB,CACJ,mDADI,EAEhBC,YAFgB,CAEH1B,YAAY,CAACC,iBAFV,CADS;AAI5BE,EAAAA,aAAa,EAAEmB,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EACZC,WADY,CACA,wBADA,EAEZC,YAFY,CAEC1B,YAAY,CAACG,aAFd,CAJa;AAO5BI,EAAAA,UAAU,EAAEe,SAAS,CAACK,IAAV,CAAeF,WAAf,CAA2B,iCAA3B,EAA8DC,YAA9D,CAA2E1B,YAAY,CAACO,UAAxF,CAPgB;AAQ5BC,EAAAA,MAAM,EAAEc,SAAS,CAACM,MAAV,CACLH,WADK,CACO,mDADP,EAELC,YAFK,CAEQ1B,YAAY,CAACQ,MAFrB,CARoB;AAW5BC,EAAAA,SAAS,EAAEa,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBvB,SAAlB,CAAhB,EAA8CmB,WAA9C,CACT,2EADS,CAXiB;AAc5Bf,EAAAA,YAAY,EAAEY,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBvB,SAAlB,CAAhB,EAA8CmB,WAA9C,CACZ,iEADY,CAdc;AAiB5Bd,EAAAA,eAAe,EAAEW,SAAS,CAACQ,IAAV,CACdL,WADc,CACF,0CADE,EAEdC,YAFc,CAED1B,YAAY,CAACW,eAFZ,CAjBW;AAoB5BE,EAAAA,cAAc,EAAES,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBvB,SAAlB,CAAhB,EAA8CmB,WAA9C,CACd,2EADc,CApBY;AAuB5BX,EAAAA,WAAW,EAAEQ,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EACVC,WADU,CACE,sBADF,EAEVC,YAFU,CAEG1B,YAAY,CAACc,WAFhB,CAvBe;AA0B5BK,EAAAA,eAAe,EAAEG,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACS,SAAV,CAAoB,CAACT,SAAS,CAACM,MAAX,EAAmBN,SAAS,CAACU,MAA7B,CAApB,CAAlB,EACdP,WADc,CACF,kCADE,EAEdC,YAFc,CAED1B,YAAY,CAACmB,eAFZ,CA1BW;AA6B5BC,EAAAA,WAAW,EAAEE,SAAS,CAACM,MAAV,CACVH,WADU,CACE,kDADF,EAEVC,YAFU,CAEG1B,YAAY,CAACoB,WAFhB,CA7Be;AAgC5Bf,EAAAA,SAAS,EAAEiB,SAAS,CAACE,MAAV,CACRC,WADQ,oTAcRC,YAdQ,CAcK1B,YAAY,CAACK,SAdlB;AAhCiB;;;;"}

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

@@ -1,11 +1,13 @@
 import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
 import { StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble } from '../bubble/styled.js';
+import { StyledComposerInput } from '../chat-composer/styled.js';
 import { Wrapper, Title, Message, Time } from '../system-message/style.js';
 import '../bubble/props.js';
 import 'prop-types';
 import 'react-desc';
 import 'lodash';
+import '@elliemae/ds-button';
 
 var CONTAINER_WIDTH = 300;
 var StyledChatContainerContent = /*#__PURE__*/styled(Grid).withConfig({
@@ -32,7 +34,7 @@ var StyledIndicatorContainer = /*#__PURE__*/styled.div.withConfig({
 });
 var MobileStyledChatContainerContent = /*#__PURE__*/styled(StyledChatContainerContent).withConfig({
   componentId: "sc-d732wo-2"
-})(["", ",", "{font-size:16px;}", "{font-size:13px;}", "{background-color:#fff;box-shadow:-0 1px 3px rgba(53,60,70,0.8);}", ",", "{font-size:16px;text-align:left;}", "{font-size:13px;}"], StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble, Wrapper, Title, Message, 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;}"], StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble, Wrapper, Title, Message, Time, StyledComposerInput);
 
 export { CONTAINER_WIDTH, MobileStyledChatContainerContent, StyledChatContainerContent, StyledIndicatorContainer };
 //# sourceMappingURL=styled.js.map

package/esm/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,MAAM,CAACC,IAAD,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,MAAM,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,MAAM,CAACD,0BAAD,CAAT;AAAA;AAAA,4LACzCc,qBADyC,EAEzCC,gBAFyC,EAMzCC,sBANyC,EAUzCC,OAVyC,EAezCC,KAfyC,EAgBzCC,OAhByC,EAqBzCC,IArByC;;;;"}
+{"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,MAAM,CAACC,IAAD,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,MAAM,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,MAAM,CAACD,0BAAD,CAAT;AAAA;AAAA,iNACzCc,qBADyC,EAEzCC,gBAFyC,EAMzCC,sBANyC,EAUzCC,OAVyC,EAezCC,KAfyC,EAgBzCC,OAhByC,EAqBzCC,IArByC,EAyBzCC,mBAzByC;;;;"}

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

@@ -8,19 +8,24 @@ import { ChatBubble } from '../bubble/ChatBubble.js';
 import { BUBBLE_TYPES } from '../bubble/props.js';
 import { MessageDelimiter } from '../message-delimiter/MessageDelimiter.js';
 import { SystemMessage } from '../system-message/SystemMessage.js';
-import { StyledWrapperListItem, StyledWrapper, StyledChatContainerContentList, StyledChatContainerContentListScroll, StyledLoadMoreContainer } from './styled.js';
+import { ListItem, StyledWrapperListItem, StyledWrapper, StyledChatContainerContentList, StyledChatContainerContentListScroll, StyledLoadMoreContainer } from './styled.js';
 import { listProps, defaultProps } from './props.js';
+import { useValidateProps } from './config/useValidateProps.js';
 import '@elliemae/ds-icons/WarningCircleFill';
 import '../bubble/styled.js';
 import 'styled-components';
 import '@elliemae/ds-grid';
+import '../bubble/config/useValidateProps.js';
+import '@elliemae/ds-props-helpers';
 import '../bubble/ChatBubbleArrow.js';
 import 'prop-types';
 import 'lodash';
 import '../message-delimiter/styled.js';
 import '../message-delimiter/props.js';
+import '../message-delimiter/config/useValidateProps.js';
 import '../system-message/style.js';
 import '../system-message/props.js';
+import '../system-message/config/useValidateProps.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -36,6 +41,7 @@ var getPadding = function getPadding(hasMoreItems) {
 };
 
 var ChatContainerMessagesList = function ChatContainerMessagesList(props) {
+  useValidateProps(props, ChatContainerMessagesListWithSchema.toJSON());
   var sendingText = props.sendingText,
       sendingMessages = props.sendingMessages,
       messages = props.messages,
@@ -76,17 +82,65 @@ var ChatContainerMessagesList = function ChatContainerMessagesList(props) {
     if (onScrollEnds) onScrollEnds(indexList);
     return indexList;
   }, [onScrollEnds]);
-  React.useImperativeHandle(actionRef, function () {
-    return {
-      scrollToIndex: function scrollToIndex(a) {
+  var scrollAndFocus = React.useCallback(function (index) {
+    vScroll(index, {
+      align: 'center'
+    });
+    setTimeout(function () {
+      virtualListRef.current.querySelector("[data-index=\"".concat(index, "\"]")).focus();
+    }, 300);
+  }, [vScroll]);
+  React.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.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.useEffect(function () {
     var handlerCallback = null;
     var localVirtualRef = virtualListRef.current;
@@ -121,12 +175,15 @@ var ChatContainerMessagesList = function ChatContainerMessagesList(props) {
         transform: "translateY(".concat(start, "px)"),
         width: '100%'
       };
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(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.createElement(StyledWrapperListItem, {
         type: row.type
       }, row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ?
@@ -136,12 +193,14 @@ var ChatContainerMessagesList = function ChatContainerMessagesList(props) {
         helpMessage: isSending ? sendingText : row.helpMessage
       })) : null, row.type === BUBBLE_TYPES.DELIMITER ? /*#__PURE__*/React.createElement(MessageDelimiter, row) : null, row.type === BUBBLE_TYPES.SYSTEM ? /*#__PURE__*/React.createElement(SystemMessage, row) : null));
     });
-  }, [virtualItems, messages, sendingMessages]);
+  }, [virtualItems, messages, sendingMessages, handleKey, sendingText]);
   return /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledChatContainerContentList, {
     "data-testid": "chat-thread-container",
     tabIndex: 0,
     "aria-live": "polite",
-    ref: virtualListRef
+    ref: virtualListRef,
+    role: "list",
+    onKeyDown: handleKey
   }, /*#__PURE__*/React.createElement(StyledChatContainerContentListScroll, {
     height: "".concat(totalSize, "px")
   }, render, !isLoading && hasMoreItems ? /*#__PURE__*/React.createElement(StyledLoadMoreContainer, {

package/esm/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","type","BUBBLE_TYPES","SENDER","RECIPIENT","helpMessage","DELIMITER","SYSTEM","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","type","BUBBLE_TYPES","SENDER","RECIPIENT","helpMessage","DELIMITER","SYSTEM","propTypes","listProps","defaultProps","describe"],"mappings":"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"}

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

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

package/esm/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,oBAAoB,CAACF,KAAD,EAAQC,MAAR,CAApB;AACD;;;;"}

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

@@ -13,13 +13,18 @@ import '@elliemae/ds-grid';
 import '../bubble/props.js';
 import 'prop-types';
 import 'lodash';
+import '../bubble/config/useValidateProps.js';
+import '@elliemae/ds-props-helpers';
 import '../bubble/ChatBubbleArrow.js';
 import '../message-delimiter/MessageDelimiter.js';
 import '../message-delimiter/styled.js';
 import '../message-delimiter/props.js';
+import '../message-delimiter/config/useValidateProps.js';
 import '../system-message/SystemMessage.js';
 import '../system-message/style.js';
 import '../system-message/props.js';
+import '../system-message/config/useValidateProps.js';
 import './styled.js';
 import './props.js';
+import './config/useValidateProps.js';
 //# sourceMappingURL=index.js.map

package/esm/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/esm/parts/chat-container-messages-list/props.js

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

package/esm/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,IAF+C;AAG1DC,EAAAA,YAAY,EAAE;AAAA,WAAM,EAAN;AAAA,GAH4C;AAI1DC,EAAAA,eAAe,EAAEF,IAJyC;AAK1DG,EAAAA,eAAe,EAAEC,SALyC;AAM1DC,EAAAA,WAAW,EAAE;AAN6C;IAS/CC,SAAS,GAAG;AACvBR,EAAAA,QAAQ,EAAES,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EACPC,WADO,CACK,iFADL,EAEPC,YAFO,CAEMd,YAAY,CAACC,QAFnB,CADa;AAIvBC,EAAAA,SAAS,EAAEQ,SAAS,CAACK,IAAV,CACRF,WADQ,sJAURC,YAVQ,CAUKd,YAAY,CAACC,QAVlB,CAJY;AAevBG,EAAAA,YAAY,EAAEM,SAAS,CAACK,IAAV,CAAeF,WAAf,iCAfS;AAgBvBG,EAAAA,SAAS,EAAEN,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBV,SAAlB,CAAhB,EAA8CM,WAA9C,CACT,4DADS,CAhBY;AAmBvBK,EAAAA,YAAY,EAAER,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBV,SAAlB,CAAhB,EAA8CM,WAA9C,CACZ,iEADY,CAnBS;AAsBvBR,EAAAA,eAAe,EAAEK,SAAS,CAACK,IAAV,CACdF,WADc,CACF,0CADE,EAEdC,YAFc,CAEDd,YAAY,CAACK,eAFZ,CAtBM;AAyBvBC,EAAAA,eAAe,EAAEI,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACS,SAAV,CAAoB,CAACT,SAAS,CAACU,MAAX,EAAmBV,SAAS,CAACW,MAA7B,CAApB,CAAlB,EACdR,WADc,CACF,kCADE,EAEdC,YAFc,CAEDd,YAAY,CAACM,eAFZ,CAzBM;AA4BvBE,EAAAA,WAAW,EAAEE,SAAS,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,IAF+C;AAG1DC,EAAAA,YAAY,EAAE;AAAA,WAAM,EAAN;AAAA,GAH4C;AAI1DC,EAAAA,eAAe,EAAEF,IAJyC;AAK1DG,EAAAA,eAAe,EAAEC,SALyC;AAM1DC,EAAAA,WAAW,EAAE;AAN6C;IAS/CC,SAAS,GAAG;AACvBR,EAAAA,QAAQ,EAAES,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EACPC,WADO,CACK,iFADL,EAEPC,YAFO,CAEMd,YAAY,CAACC,QAFnB,CADa;AAIvBC,EAAAA,SAAS,EAAEQ,SAAS,CAACE,MAAV,CACRC,WADQ,oTAcRC,YAdQ,CAcKd,YAAY,CAACE,SAdlB,CAJY;AAmBvBE,EAAAA,YAAY,EAAEM,SAAS,CAACK,IAAV,CAAeF,WAAf,iCAnBS;AAoBvBG,EAAAA,SAAS,EAAEN,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBV,SAAlB,CAAhB,EAA8CM,WAA9C,CACT,4DADS,CApBY;AAuBvBK,EAAAA,YAAY,EAAER,SAAS,CAACO,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBV,SAAlB,CAAhB,EAA8CM,WAA9C,CACZ,iEADY,CAvBS;AA0BvBR,EAAAA,eAAe,EAAEK,SAAS,CAACK,IAAV,CACdF,WADc,CACF,0CADE,EAEdC,YAFc,CAEDd,YAAY,CAACK,eAFZ,CA1BM;AA6BvBC,EAAAA,eAAe,EAAEI,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACS,SAAV,CAAoB,CAACT,SAAS,CAACU,MAAX,EAAmBV,SAAS,CAACW,MAA7B,CAApB,CAAlB,EACdR,WADc,CACF,kCADE,EAEdC,YAFc,CAEDd,YAAY,CAACM,eAFZ,CA7BM;AAgCvBE,EAAAA,WAAW,EAAEE,SAAS,CAACU,MAAV,CACVP,WADU,CACE,kDADF,EAEVC,YAFU,CAEGd,YAAY,CAACQ,WAFhB;AAhCU;;;;"}

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

@@ -2,12 +2,14 @@ import styled from 'styled-components';
 import '../bubble/ChatBubble.js';
 import { BUBBLE_TYPES } from '../bubble/props.js';
 import 'react';
+import 'react-desc';
 import '@elliemae/ds-icons/WarningCircleFill';
 import '../bubble/styled.js';
 import '@elliemae/ds-grid';
+import '../bubble/config/useValidateProps.js';
+import '@elliemae/ds-props-helpers';
 import '../bubble/ChatBubbleArrow.js';
 import 'prop-types';
-import 'react-desc';
 import 'lodash';
 
 var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
@@ -48,6 +50,11 @@ var StyledLoadMoreContainer = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.hasMoreItems === 'bottom' ? 'bottom: 0;' : '';
 });
+var ListItem = /*#__PURE__*/styled.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;
+});
 
-export { StyledChatContainerContentList, StyledChatContainerContentListScroll, StyledLoadMoreContainer, StyledWrapper, StyledWrapperListItem };
+export { ListItem, StyledChatContainerContentList, StyledChatContainerContentListScroll, StyledLoadMoreContainer, StyledWrapper, StyledWrapperListItem };
 //# sourceMappingURL=styled.js.map

package/esm/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,MAAM,CAACC,GAAV;AAAA;AAAA;;IAMbC,qBAAqB,gBAAGF,MAAM,CAACC,GAAV;AAAA;AAAA,uCAE9B,UAACE,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAeC,YAAY,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,YAAY,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,YAAY,CAACM,MAA5B,uBACYR,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAD9B,aADA;AAAA,CAX8B;IAiBrBG,8BAA8B,gBAAGZ,MAAM,CAACC,GAAV;AAAA;AAAA,gGAG9B,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBK,EAA7B;AAAA,CAH8B;IAQ9BC,oCAAoC,gBAAGd,MAAM,CAACC,GAAV;AAAA;AAAA,kDAErC,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACY,MAAjB;AAAA,CAFqC;IAMpCC,uBAAuB,gBAAGhB,MAAM,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,MAAM,CAACC,GAAV;AAAA;AAAA;;IAMbC,qBAAqB,gBAAGF,MAAM,CAACC,GAAV;AAAA;AAAA,uCAE9B,UAACE,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAeC,YAAY,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,YAAY,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,YAAY,CAACM,MAA5B,uBACYR,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAD9B,aADA;AAAA,CAX8B;IAiBrBG,8BAA8B,gBAAGZ,MAAM,CAACC,GAAV;AAAA;AAAA,gGAG9B,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBK,EAA7B;AAAA,CAH8B;IAQ9BC,oCAAoC,gBAAGd,MAAM,CAACC,GAAV;AAAA;AAAA,kDAErC,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACY,MAAjB;AAAA,CAFqC;IAMpCC,uBAAuB,gBAAGhB,MAAM,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,MAAM,CAACC,GAAV;AAAA;AAAA,4LAUM,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACI,KAAN,CAAYC,KAAZ,CAAkBC,GAA7B;AAAA,CAVN;;;;"}

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

@@ -1,12 +1,17 @@
 import React, { useMemo } from 'react';
+import { describe } from 'react-desc';
 import { Grid } from '@elliemae/ds-grid';
 import Communications from '@elliemae/ds-icons/Communications';
+import { emptyStateProps, defaultProps } from './props.js';
 import { MessageWrapper, ChatEmptyStateWrapper } from './styled.js';
+import { useValidateProps } from './config/useValidateProps.js';
 import 'styled-components';
+import '@elliemae/ds-props-helpers';
 
-var ChatEmptyState = function ChatEmptyState(_ref) {
-  var label = _ref.label,
-      action = _ref.action;
+var ChatEmptyState = function ChatEmptyState(props) {
+  useValidateProps(props, ChatEmptyStateListWithSchema.toJSON());
+  var label = props.label,
+      action = props.action;
   var MainContent = useMemo(function () {
     return /*#__PURE__*/React.createElement(Grid, {
       alignItems: "center",
@@ -31,5 +36,10 @@ var ChatEmptyState = function ChatEmptyState(_ref) {
   }, MainContent);
 };
 
-export { ChatEmptyState };
+ChatEmptyState.propTypes = emptyStateProps;
+ChatEmptyState.defaultProps = defaultProps;
+var ChatEmptyStateListWithSchema = describe(ChatEmptyState);
+ChatEmptyStateListWithSchema.propTypes = emptyStateProps;
+
+export { ChatEmptyState, ChatEmptyStateListWithSchema };
 //# sourceMappingURL=ChatEmptyState.js.map

package/esm/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"],"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,OAAO,CACzB;AAAA,wBACE,oBAAC,IAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,oBACE,oBAAC,IAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,oBACE,oBAAC,cAAD;AAAgB,MAAA,IAAI,EAAC,KAArB;AAA2B,MAAA,KAAK,EAAE,CAAC,SAAD,EAAY,GAAZ;AAAlC,MADF,CADF,eAIE,oBAAC,IAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,oBACE,oBAAC,cAAD,QAAiBH,KAAjB,CADF,CAJF,eAOE,oBAAC,IAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,OACGC,MADH,CAPF,CADF;AAAA,GADyB,EAczB,CAACD,KAAD,EAAQC,MAAR,CAdyB,CAA3B;AAgBA,sBACE,oBAAC,qBAAD;AAAuB,IAAA,UAAU,EAAC,QAAlC;AAA2C,IAAA,cAAc,EAAC;AAA1D,KACGC,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","propTypes","emptyStateProps","defaultProps","describe"],"mappings":";;;;;;;;;;IAQMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAA6C;AAClEC,EAAAA,gBAAgB,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,OAAO,CACzB;AAAA,wBACE,oBAAC,IAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,oBACE,oBAAC,IAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,oBACE,oBAAC,cAAD;AAAgB,MAAA,IAAI,EAAC,KAArB;AAA2B,MAAA,KAAK,EAAE,CAAC,SAAD,EAAY,GAAZ;AAAlC,MADF,CADF,eAIE,oBAAC,IAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,oBACE,oBAAC,cAAD,QAAiBH,KAAjB,CADF,CAJF,eAOE,oBAAC,IAAD;AAAM,MAAA,UAAU,EAAC,QAAjB;AAA0B,MAAA,cAAc,EAAC;AAAzC,OACGC,MADH,CAPF,CADF;AAAA,GADyB,EAczB,CAACD,KAAD,EAAQC,MAAR,CAdyB,CAA3B;AAgBA,sBACE,oBAAC,qBAAD;AAAuB,IAAA,UAAU,EAAC,QAAlC;AAA2C,IAAA,cAAc,EAAC;AAA1D,KACGC,WADH,CADF;AAKD;;AAEDP,cAAc,CAACS,SAAf,GAA2BC,eAA3B;AACAV,cAAc,CAACW,YAAf,GAA8BA,YAA9B;IACMR,4BAA4B,GAAGS,QAAQ,CAACZ,cAAD;AAC7CG,4BAA4B,CAACM,SAA7B,GAAyCC,eAAzC;;;;"}

package/esm/parts/chat-empty-state/config/useValidateProps.js

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

package/esm/parts/chat-empty-state/config/useValidateProps.js.map

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

package/esm/parts/chat-empty-state/props.js

@@ -5,7 +5,8 @@ var defaultProps = {
   action: null
 };
 var emptyStateProps = {
-  label: PropTypes.arrayOf(PropTypes.string).description('No Message to show text helper').defaultValue(defaultProps.label)
+  label: PropTypes.arrayOf(PropTypes.string).description('No Message to show text helper').defaultValue(defaultProps.label),
+  action: PropTypes.node.description('action element').defaultValue(defaultProps.action)
 };
 
 export { defaultProps, emptyStateProps };

package/esm/parts/chat-empty-state/props.js.map

@@ -1 +1 @@
-{"version":3,"file":"props.js","sources":["../../../../src/parts/chat-empty-state/props.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\n\nexport interface ChatEmptyStateProps {\n  label: string;\n  action: React.FC;\n}\n\nexport const defaultProps: ChatEmptyStateProps = {\n  label: 'No Messages Yet',\n  action: null,\n};\n\nexport const emptyStateProps = {\n  label: PropTypes.arrayOf(PropTypes.string)\n    .description('No Message to show text helper')\n    .defaultValue(defaultProps.label),\n};\n"],"names":["defaultProps","label","action","emptyStateProps","PropTypes","arrayOf","string","description","defaultValue"],"mappings":";;IAOaA,YAAiC,GAAG;AAC/CC,EAAAA,KAAK,EAAE,iBADwC;AAE/CC,EAAAA,MAAM,EAAE;AAFuC;IAKpCC,eAAe,GAAG;AAC7BF,EAAAA,KAAK,EAAEG,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EACJC,WADI,CACQ,gCADR,EAEJC,YAFI,CAESR,YAAY,CAACC,KAFtB;AADsB;;;;"}
+{"version":3,"file":"props.js","sources":["../../../../src/parts/chat-empty-state/props.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\n\nexport interface ChatEmptyStateProps {\n  label: string;\n  action: React.FC;\n}\n\nexport const defaultProps: ChatEmptyStateProps = {\n  label: 'No Messages Yet',\n  action: null,\n};\n\nexport const emptyStateProps = {\n  label: PropTypes.arrayOf(PropTypes.string)\n    .description('No Message to show text helper')\n    .defaultValue(defaultProps.label),\n  action: PropTypes.node.description('action element').defaultValue(defaultProps.action),\n};\n"],"names":["defaultProps","label","action","emptyStateProps","PropTypes","arrayOf","string","description","defaultValue","node"],"mappings":";;IAOaA,YAAiC,GAAG;AAC/CC,EAAAA,KAAK,EAAE,iBADwC;AAE/CC,EAAAA,MAAM,EAAE;AAFuC;IAKpCC,eAAe,GAAG;AAC7BF,EAAAA,KAAK,EAAEG,SAAS,CAACC,OAAV,CAAkBD,SAAS,CAACE,MAA5B,EACJC,WADI,CACQ,gCADR,EAEJC,YAFI,CAESR,YAAY,CAACC,KAFtB,CADsB;AAI7BC,EAAAA,MAAM,EAAEE,SAAS,CAACK,IAAV,CAAeF,WAAf,CAA2B,gBAA3B,EAA6CC,YAA7C,CAA0DR,YAAY,CAACE,MAAvE;AAJqB;;;;"}

package/esm/parts/chat-sidebar/SideBarChat.js

@@ -7,6 +7,7 @@ import { StyledSideBarContainer, StyledSideBarButtonsContainer } from './styled.
 import { TileButton } from '../tile-button/TileButton.js';
 import { SidebarButton } from '../sidebar-button/SidebarButton.js';
 import { chatSidebarProps, defaultProps } from './props.js';
+import { useValidateProps } from './config/useValidateProps.js';
 import 'styled-components';
 import '@elliemae/ds-grid';
 import '../../styled.js';
@@ -14,12 +15,14 @@ import '@elliemae/ds-tooltip';
 import '@elliemae/ds-icons/CloseXsmall';
 import '../tile-button/styled.js';
 import '../tile-button/props.js';
-import 'prop-types';
 import 'lodash';
 import '@elliemae/ds-icons/Comments';
+import '../tile-button/config/useValidateProps.js';
+import '@elliemae/ds-props-helpers';
 import '@babel/runtime/helpers/esm/objectWithoutProperties';
 import '../sidebar-button/styled.js';
 import '../sidebar-button/props.js';
+import 'prop-types';
 
 var FooterChat = function FooterChat(_ref) {
   var expanded = _ref.expanded,
@@ -36,13 +39,14 @@ var FooterChat = function FooterChat(_ref) {
   });
 };
 
-var SideBarChat = function SideBarChat(_ref2) {
-  var sidebarItems = _ref2.sidebarItems,
-      expanded = _ref2.expanded,
-      onFooterClose = _ref2.onFooterClose,
-      onFooterExpand = _ref2.onFooterExpand,
-      selectedItem = _ref2.selectedItem,
-      footerButtonExtraProps = _ref2.footerButtonExtraProps;
+var SideBarChat = function SideBarChat(props) {
+  useValidateProps(props, SideBarChatWithSchema.toJSON());
+  var sidebarItems = props.sidebarItems,
+      expanded = props.expanded,
+      onFooterClose = props.onFooterClose,
+      onFooterExpand = props.onFooterExpand,
+      selectedItem = props.selectedItem,
+      footerButtonExtraProps = props.footerButtonExtraProps;
   return /*#__PURE__*/React.createElement(StyledSideBarContainer, {
     rows: [1, 'auto']
   }, /*#__PURE__*/React.createElement(StyledSideBarButtonsContainer, null, sidebarItems.map(function (p) {