@elliemae/ds-chat-container 3.6.0-next.0

package/dist/esm/parts/chat-composer/styled.js

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { styled } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { DSButtonV2 } from "@elliemae/ds-button";
+const StyledChatContainerContentComposer = styled(Grid)`
+  width: 100%;
+  min-height: 56px;
+  background: ${(props) => props.theme.colors.neutral["050"]};
+  padding: ${(props) => props.theme.space.xxs};
+  padding-bottom: 3px;
+  padding-top: 6px;
+  padding-left: ${(props) => props.theme.space.xs};
+  max-height: ${(props) => props.maxHeight};
+  border-top: 1px solid #cbcfd7;
+`;
+const StyledComposerInput = styled.textarea`
+  padding: ${(props) => props.theme.space.xxs};
+  resize: none;
+  min-height: 32px;
+  border-radius: 2px;
+  border: solid 1px #cbcfd7;
+  color: #25292f;
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height};
+  min-width: 244px;
+  overflow-y: auto;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1;
+  transition: height 0.05s;
+  &:focus {
+    outline: none;
+    border: 1px solid ${(props) => props.theme.colors.brand[600]};
+    box-shadow: inset 0 0 0 1px #8cc2ed;
+    border-radius: 2px;
+  }
+`;
+const StyledComposerButton = styled(DSButtonV2)`
+  &:disabled {
+    background: none;
+    svg {
+      fill: #5d6775;
+    }
+  }
+  svg {
+    fill: ${(props) => props.theme.colors.brand[600]};
+  }
+  &:focus {
+    background: ${(props) => props.theme.colors.brand[200]};
+  }
+`;
+const StyledCounterArea = styled(Grid)`
+  text-align: right;
+  font-size: 11px;
+  height: 15px;
+  align-items: center;
+  font-style: italic;
+  ${(props) => props.hasError ? `color:${props.theme.colors.danger[900]};` : ""}
+  position:relative;
+`;
+const StyledCounterErrorA11y = styled.span`
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+`;
+export {
+  StyledChatContainerContentComposer,
+  StyledComposerButton,
+  StyledComposerInput,
+  StyledCounterArea,
+  StyledCounterErrorA11y
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/parts/chat-composer/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { TextAreaProps } from '../../react-desc-prop-types';\n\n// Composer\nexport const StyledChatContainerContentComposer = styled(Grid)<{ maxHeight: string }>`\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`\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.05s;\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(DSButtonV2)`\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)<{ hasError: boolean }>`\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAIpB,MAAM,qCAAqC,OAAO,IAAI;AAAA;AAAA;AAAA,gBAG7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,kBAGxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,gBAC/B,CAAC,UAAU,MAAM;AAAA;AAAA;AAI1B,MAAM,sBAAsB,OAAO;AAAA,aAC7B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM9B,CAAC,UAA0B,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAS9E,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKrD,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQzC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,kBAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAI/C,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxC,CAAC,UAAW,MAAM,WAAW,SAAS,MAAM,MAAM,OAAO,OAAO,UAAU;AAAA;AAAA;AAIvE,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,128 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { describe } from "@elliemae/ds-utilities";
+import DSButton from "@elliemae/ds-button";
+import { ChatBubble, BUBBLE_TYPES } from "@elliemae/ds-chat-bubble";
+import { MessageDelimiter } from "@elliemae/ds-chat-message-delimeter";
+import { SystemMessage } from "@elliemae/ds-chat-system-message";
+import {
+  StyledWrapperListItem,
+  StyledChatContainerContentList,
+  StyledChatContainerContentListScroll,
+  StyledWrapper,
+  StyledLoadMoreContainer,
+  ListItem,
+  StyledNewMessagesHiddenContainer
+} from "./styled";
+import { ChatContainerMessagesListPropTypes } from "../../react-desc-prop-types";
+import { useGetNewMessages } from "./useGetNewMessages";
+import { useChatContainerMessageList } from "./useChatContainerMessageList";
+import { ChatContainerDataTestIds } from "../../ChatContainerDataTestids";
+const ChatContainerMessagesList = (props) => {
+  const {
+    propsWithDefault,
+    globalAttributes,
+    useVirtualHelpers,
+    handleKey,
+    handleListKey,
+    loadMoreRef,
+    virtualListRef
+  } = useChatContainerMessageList(props);
+  const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;
+  const { totalSize, virtualItems } = useVirtualHelpers;
+  const newMessages = useGetNewMessages(messages);
+  const render = React2.useMemo(
+    () => virtualItems.map((virtualItem) => {
+      const { index, measureRef, start } = virtualItem;
+      const row = messages[index];
+      const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);
+      const style = {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        transform: `translateY(${start}px)`,
+        width: "100%"
+      };
+      return /* @__PURE__ */ jsx(ListItem, {
+        "data-element": "chat-element-list-item",
+        "data-index": index,
+        style,
+        ref: measureRef,
+        tabIndex: -1,
+        onKeyDown: handleKey,
+        role: "listitem",
+        children: /* @__PURE__ */ jsxs(StyledWrapperListItem, {
+          type: row.type,
+          children: [
+            row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ jsx(ChatBubble, {
+              ...row,
+              helpMessage: isSending ? sendingText : row.helpMessage
+            }) : null,
+            row.type === BUBBLE_TYPES.DELIMITER ? /* @__PURE__ */ jsx(MessageDelimiter, {
+              ...row
+            }) : null,
+            row.type === BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ jsx(SystemMessage, {
+              ...row
+            }) : null
+          ]
+        })
+      }, `ds-chat-bubble-${index}-${row.dsId}-${row.type}`);
+    }),
+    [virtualItems, messages, sendingMessages, handleKey, sendingText]
+  );
+  return /* @__PURE__ */ jsxs(StyledWrapper, {
+    ...globalAttributes,
+    children: [
+      /* @__PURE__ */ jsx(StyledChatContainerContentList, {
+        "data-testid": ChatContainerDataTestIds.THREAD_CONTAINER,
+        tabIndex: 0,
+        ref: virtualListRef,
+        role: "list",
+        onKeyDown: handleListKey,
+        children: /* @__PURE__ */ jsxs(StyledChatContainerContentListScroll, {
+          height: `${totalSize}px`,
+          children: [
+            !isLoading && hasMoreItems ? /* @__PURE__ */ jsx(StyledLoadMoreContainer, {
+              hasMoreItems,
+              children: /* @__PURE__ */ jsx(DSButton, {
+                labelText: "Load More",
+                buttonType: "secondary",
+                onClick: getMoreMessages,
+                "data-testid": ChatContainerDataTestIds.LOAD_MORE_BUTTON,
+                innerRef: loadMoreRef
+              })
+            }) : null,
+            render
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx(StyledNewMessagesHiddenContainer, {
+        "aria-live": "polite",
+        "aria-hidden": "false",
+        children: newMessages.map((newMessage) => /* @__PURE__ */ jsxs("p", {
+          children: [
+            newMessage.title,
+            " ",
+            newMessage.time,
+            " ",
+            newMessage.body,
+            " ",
+            newMessage.errorMessage,
+            " ",
+            newMessage.helpMessage
+          ]
+        }, newMessage.dsId))
+      })
+    ]
+  });
+};
+ChatContainerMessagesList.propTypes = ChatContainerMessagesListPropTypes;
+ChatContainerMessagesList.displayName = "ChatContainerMessagesList";
+const ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);
+ChatContainerMessagesListWithSchema.propTypes = ChatContainerMessagesListPropTypes;
+export {
+  ChatContainerMessagesList,
+  ChatContainerMessagesListWithSchema
+};
+//# sourceMappingURL=ChatContainerMessagesList.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/ChatContainerMessagesList.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React, { CSSProperties, WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport DSButton from '@elliemae/ds-button';\nimport { ChatBubble, BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport { MessageDelimiter, DSChatMessageDelimeterT } from '@elliemae/ds-chat-message-delimeter';\nimport { SystemMessage, DSChatSystemMessageT } from '@elliemae/ds-chat-system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n  StyledNewMessagesHiddenContainer,\n} from './styled';\nimport { DSChatT, ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types';\nimport { useGetNewMessages } from './useGetNewMessages';\nimport { useChatContainerMessageList } from './useChatContainerMessageList';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids';\n\nconst ChatContainerMessagesList: React.ComponentType<DSChatT.MessagesListProps> = (props) => {\n  const {\n    propsWithDefault,\n    globalAttributes,\n    useVirtualHelpers,\n    handleKey,\n    handleListKey,\n    loadMoreRef,\n    virtualListRef,\n  } = useChatContainerMessageList(props);\n\n  const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;\n  const { totalSize, virtualItems } = useVirtualHelpers;\n\n  const newMessages = useGetNewMessages(messages);\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}-${row.dsId}-${row.type}`}\n            style={style}\n            ref={measureRef}\n            tabIndex={-1}\n            onKeyDown={handleKey}\n            role=\"listitem\"\n          >\n            <StyledWrapperListItem type={row.type}>\n              {row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? (\n                <ChatBubble {...row} helpMessage={isSending ? sendingText : row.helpMessage} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.DELIMITER ? (\n                <MessageDelimiter {...(row as unknown as DSChatMessageDelimeterT.Props)} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...(row as DSChatSystemMessageT.Props)} /> : null}\n            </StyledWrapperListItem>\n          </ListItem>\n        );\n      }),\n    [virtualItems, messages, sendingMessages, handleKey, sendingText],\n  );\n\n  return (\n    <StyledWrapper {...globalAttributes}>\n      <StyledChatContainerContentList\n        data-testid={ChatContainerDataTestIds.THREAD_CONTAINER}\n        tabIndex={0}\n        ref={virtualListRef as React.RefObject<HTMLDivElement>}\n        role=\"list\"\n        onKeyDown={handleListKey}\n      >\n        <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n          {!isLoading && hasMoreItems ? (\n            <StyledLoadMoreContainer hasMoreItems={hasMoreItems}>\n              <DSButton\n                labelText=\"Load More\"\n                buttonType=\"secondary\"\n                onClick={getMoreMessages}\n                data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n                innerRef={loadMoreRef}\n              />\n            </StyledLoadMoreContainer>\n          ) : null}\n          {render}\n        </StyledChatContainerContentListScroll>\n      </StyledChatContainerContentList>\n      {/* We repeat the render with the new available messages */}\n      <StyledNewMessagesHiddenContainer aria-live=\"polite\" aria-hidden=\"false\">\n        {newMessages.map((newMessage) => (\n          <p key={newMessage.dsId}>\n            {newMessage.title} {newMessage.time} {newMessage.body} {newMessage.errorMessage} {newMessage.helpMessage}\n          </p>\n        ))}\n      </StyledNewMessagesHiddenContainer>\n    </StyledWrapper>\n  );\n};\n\nChatContainerMessagesList.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\nChatContainerMessagesList.displayName = 'ChatContainerMessagesList';\nconst ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);\nChatContainerMessagesListWithSchema.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainerMessagesList, ChatContainerMessagesListWithSchema };\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatContainerMessagesList, ChatContainerMessagesListWithSchema } from './ChatContainerMessagesList';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,2CAA2C;",
+  "names": []
+}

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

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { styled } from "@elliemae/ds-system";
+import { BUBBLE_TYPES } from "@elliemae/ds-chat-bubble";
+const StyledWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+const StyledWrapperListItem = styled.div`
+  min-width: 100%;
+  ${(props) => props.type === BUBBLE_TYPES.SENDER && `padding: ${props.theme.space.xxs} ${props.theme.space.xxs} ${props.theme.space.xxs} 13%
+  `};
+  ${(props) => props.type === BUBBLE_TYPES.RECIPIENT && `padding: ${props.theme.space.xxs} 13% ${props.theme.space.xxs}
+    ${props.theme.space.xxs}
+  `};
+  ${(props) => props.type === BUBBLE_TYPES.SYSTEM && `padding: ${props.theme.space.xxs} 0px
+  `};
+`;
+const StyledChatContainerContentList = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: ${(props) => props.theme.space.xs};
+  padding-bottom: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+const StyledNewMessagesHiddenContainer = styled.div`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  white-space: nowrap;
+`;
+const StyledChatContainerContentListScroll = styled.div`
+  width: 100%;
+  height: ${(props) => props.height};
+  position: relative;
+`;
+const StyledLoadMoreContainer = styled.div`
+  position: absolute;
+  width: calc(100% + ${(props) => props.theme.space.xxs});
+  padding: ${(props) => props.theme.space.xxs};
+  left: -${(props) => props.theme.space.xxs};
+  right: -${(props) => props.theme.space.xxs};
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  ${(props) => props.hasMoreItems === "top" ? "top: 0;" : ""}
+  ${(props) => props.hasMoreItems === "bottom" ? "bottom: 0;" : ""}
+`;
+const ListItem = styled.div`
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: -${(props) => props.theme.space.xxs};
+      pointer-events: none;
+      border-radius: 2px;
+      background-color: #ebedf0;
+      width: calc(100% + 24px);
+      border: 2px solid #1e79c2;
+      height: 100%;
+      z-index: -1;
+    }
+  }
+`;
+export {
+  ListItem,
+  StyledChatContainerContentList,
+  StyledChatContainerContentListScroll,
+  StyledLoadMoreContainer,
+  StyledNewMessagesHiddenContainer,
+  StyledWrapper,
+  StyledWrapperListItem
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { BUBBLE_TYPES, DSChatBubbleT } from '@elliemae/ds-chat-bubble';\n\nexport const StyledWrapper = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\n// list\nexport const StyledWrapperListItem = styled.div<Partial<DSChatBubbleT.Props>>`\n  min-width: 100%;\n  ${(props) =>\n    props.type === BUBBLE_TYPES.SENDER &&\n    `padding: ${props.theme.space.xxs} ${props.theme.space.xxs} ${props.theme.space.xxs} 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`;\n\nexport const StyledNewMessagesHiddenContainer = styled.div`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\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      top: 0;\n      left: -${(props) => props.theme.space.xxs};\n      pointer-events: none;\n      border-radius: 2px;\n      background-color: #ebedf0;\n      width: calc(100% + 24px);\n      border: 2px solid #1e79c2;\n      height: 100%;\n      z-index: -1;\n    }\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,oBAAmC;AAErC,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,OAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM;AAAA;AAAA,IAEhF,CAAC,UACD,MAAM,SAAS,aAAa,aAC5B,YAAY,MAAM,MAAM,MAAM,WAAW,MAAM,MAAM,MAAM;AAAA,MACzD,MAAM,MAAM,MAAM;AAAA;AAAA,IAEpB,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM;AAAA;AAAA;AAI3B,MAAM,iCAAiC,OAAO;AAAA;AAAA;AAAA,aAGxC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,mCAAmC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahD,MAAM,uCAAuC,OAAO;AAAA;AAAA,YAE/C,CAAC,UAAU,MAAM;AAAA;AAAA;AAItB,MAAM,0BAA0B,OAAO;AAAA;AAAA,uBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,aACvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,YAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAIrC,CAAC,UAAW,MAAM,iBAAiB,QAAQ,YAAY;AAAA,IACvD,CAAC,UAAW,MAAM,iBAAiB,WAAW,eAAe;AAAA;AAE1D,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/parts/chat-container-messages-list/useActionRef.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import React2 from "react";
+const useActionRef = ({
+  actionRef,
+  useVirtualHelpers: { scrollToIndex: vScroll },
+  virtualListRef,
+  onScrollStop,
+  onlyFocus,
+  scrollAndFocus
+}) => {
+  React2.useEffect(() => {
+    if (actionRef && actionRef.current) {
+      const scrollToIndex = (index, opts = { align: "center" }) => {
+        vScroll(index, opts);
+        onScrollStop();
+      };
+      const focusToIndex = (index, opts = { align: "center" }) => {
+        scrollAndFocus(index, opts);
+      };
+      const focusToList = () => {
+        virtualListRef.current?.focus();
+      };
+      actionRef.current.scrollToIndex = scrollToIndex;
+      actionRef.current.getMessagesInView = onScrollStop;
+      onScrollStop();
+      actionRef.current.focusToIndex = focusToIndex;
+      actionRef.current.focusToIndexWithoutScroll = onlyFocus;
+      actionRef.current.focusToList = focusToList;
+    }
+  }, [actionRef, onScrollStop, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);
+};
+export {
+  useActionRef
+};
+//# sourceMappingURL=useActionRef.js.map

package/dist/esm/parts/chat-container-messages-list/useActionRef.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useActionRef.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseActionRefArgs = {\n  actionRef: DSChatT.ActionRef;\n  useVirtualHelpers: ReturnType<typeof useVirtual>;\n  virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n  onScrollStop: () => string[];\n  onlyFocus: (index: string) => void;\n  scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n};\n\nexport const useActionRef = ({\n  actionRef,\n  useVirtualHelpers: { scrollToIndex: vScroll },\n  virtualListRef,\n  onScrollStop,\n  onlyFocus,\n  scrollAndFocus,\n}: UseActionRefArgs) => {\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      const scrollToIndex: DSChatT.ActionRef['current']['scrollToIndex'] = (index, opts = { align: 'center' }) => {\n        vScroll(index, opts);\n        onScrollStop();\n      };\n      const focusToIndex: DSChatT.ActionRef['current']['focusToIndex'] = (index, opts = { align: 'center' }) => {\n        scrollAndFocus(index, opts);\n      };\n      const focusToList = () => {\n        virtualListRef.current?.focus();\n      };\n\n      actionRef.current.scrollToIndex = scrollToIndex;\n      actionRef.current.getMessagesInView = onScrollStop;\n      // I have no idea what the next line refeers to\n      // keeping this from original code to avoid any possible breaking-change\n      onScrollStop(); // init useMemo due to debounce use.\n      actionRef.current.focusToIndex = focusToIndex;\n      actionRef.current.focusToIndexWithoutScroll = onlyFocus;\n      actionRef.current.focusToList = focusToList;\n    }\n  }, [actionRef, onScrollStop, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAaX,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,YAAM,gBAA+D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AAC1G,gBAAQ,OAAO,IAAI;AACnB,qBAAa;AAAA,MACf;AACA,YAAM,eAA6D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AACxG,uBAAe,OAAO,IAAI;AAAA,MAC5B;AACA,YAAM,cAAc,MAAM;AACxB,uBAAe,SAAS,MAAM;AAAA,MAChC;AAEA,gBAAU,QAAQ,gBAAgB;AAClC,gBAAU,QAAQ,oBAAoB;AAGtC,mBAAa;AACb,gBAAU,QAAQ,eAAe;AACjC,gBAAU,QAAQ,4BAA4B;AAC9C,gBAAU,QAAQ,cAAc;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,WAAW,cAAc,WAAW,gBAAgB,SAAS,cAAc,CAAC;AAClF;",
+  "names": ["React"]
+}

package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js

@@ -0,0 +1,84 @@
+import * as React from "react";
+import React2 from "react";
+import {
+  useMemoMergePropsWithDefault,
+  useGetGlobalAttributes,
+  useValidateTypescriptPropTypes
+} from "@elliemae/ds-utilities";
+import { useVirtual } from "react-virtual";
+import { useActionRef } from "./useActionRef";
+import { useGlobalEventListener } from "./useGlobalEventListener";
+import { useKeyboard } from "./useKeyboard";
+import { useFocusAndScrollHelpers } from "./useFocusAndScrollHelpers";
+import { ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from "../../react-desc-prop-types";
+const getPadding = ({ hasMoreItems, bannerPosition, isLoading }) => {
+  const padding = {
+    paddingStart: 0,
+    paddingEnd: -5
+  };
+  if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === "top"))
+    padding.paddingStart = 42;
+  else if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === "bottom"))
+    padding.paddingEnd = 42;
+  return padding;
+};
+const useChatContainerMessageList = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsMessagesList);
+  useValidateTypescriptPropTypes(propsWithDefault, ChatContainerMessagesListPropTypes);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefault);
+  const loadMoreRef = React2.useRef();
+  const virtualListRef = React2.useRef();
+  const pendingOnScroll = React2.useRef(false);
+  const { bannerPosition, messages, actionRef, hasMoreItems, isLoading } = propsWithDefault;
+  const useVirtualHelpers = useVirtual({
+    size: messages?.length,
+    parentRef: virtualListRef,
+    overscan: 15,
+    ...getPadding({ hasMoreItems, bannerPosition, isLoading }),
+    estimateSize: React2.useCallback(() => 80, [])
+  });
+  const { onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll } = useFocusAndScrollHelpers({
+    propsWithDefault,
+    useVirtualHelpers,
+    pendingOnScroll,
+    virtualListRef
+  });
+  useActionRef({
+    actionRef,
+    useVirtualHelpers,
+    virtualListRef,
+    onScrollStop,
+    onlyFocus,
+    scrollAndFocus
+  });
+  useGlobalEventListener({
+    propsWithDefault,
+    virtualListRef,
+    onScrollStop,
+    checkPendingOnScroll
+  });
+  const keyboardMethods = useKeyboard({
+    propsWithDefault,
+    actionRef,
+    virtualListRef,
+    loadMoreRef,
+    scrollAndFocus,
+    onlyFocus,
+    onScrollStop
+  });
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      globalAttributes,
+      useVirtualHelpers,
+      loadMoreRef,
+      virtualListRef,
+      ...keyboardMethods
+    }),
+    [globalAttributes, keyboardMethods, propsWithDefault, useVirtualHelpers, loadMoreRef, virtualListRef]
+  );
+};
+export {
+  useChatContainerMessageList
+};
+//# sourceMappingURL=useChatContainerMessageList.js.map

package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useChatContainerMessageList.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-utilities';\nimport { useVirtual } from 'react-virtual';\nimport { useActionRef } from './useActionRef';\nimport { useGlobalEventListener } from './useGlobalEventListener';\nimport { useKeyboard } from './useKeyboard';\nimport { useFocusAndScrollHelpers } from './useFocusAndScrollHelpers';\nimport { DSChatT, ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from '../../react-desc-prop-types';\n\nconst getPadding = ({ hasMoreItems, bannerPosition, isLoading }: DSChatT.GetPaddingT) => {\n  const padding = {\n    paddingStart: 0,\n    paddingEnd: -5,\n  };\n  if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'top')) padding.paddingStart = 42;\n  else if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'bottom')) padding.paddingEnd = 42;\n  return padding;\n};\n\ntype UseChatContainerMessageList = (props: DSChatT.MessagesListProps) => {\n  propsWithDefault: DSChatT.MessagesListProps;\n  globalAttributes: ReturnType<typeof useGetGlobalAttributes>;\n  useVirtualHelpers: ReturnType<typeof useVirtual>;\n  loadMoreRef: React.MutableRefObject<HTMLButtonElement | undefined>;\n  virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n} & ReturnType<typeof useKeyboard>;\n\nexport const useChatContainerMessageList: UseChatContainerMessageList = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.MessagesListProps>(props, defaultPropsMessagesList);\n  useValidateTypescriptPropTypes<DSChatT.MessagesListProps>(propsWithDefault, ChatContainerMessagesListPropTypes);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n  const loadMoreRef = React.useRef<HTMLButtonElement>();\n  const virtualListRef = React.useRef<HTMLDivElement>();\n\n  const pendingOnScroll = React.useRef(false);\n  const { bannerPosition, messages, actionRef, hasMoreItems, isLoading } = propsWithDefault;\n  const useVirtualHelpers = useVirtual({\n    size: messages?.length,\n    parentRef: virtualListRef,\n    overscan: 15,\n    ...getPadding({ hasMoreItems, bannerPosition, isLoading }),\n    // estimateSize should not be really required given what was stated on\n    // https://github.com/tannerlinsley/react-virtual/issues/23\n    estimateSize: React.useCallback(() => 80, []),\n  });\n\n  const { onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll } = useFocusAndScrollHelpers({\n    propsWithDefault,\n    useVirtualHelpers,\n    pendingOnScroll,\n    virtualListRef,\n  });\n\n  useActionRef({\n    actionRef,\n    useVirtualHelpers,\n    virtualListRef,\n    onScrollStop,\n    onlyFocus,\n    scrollAndFocus,\n  });\n\n  useGlobalEventListener({\n    propsWithDefault,\n    virtualListRef,\n    onScrollStop,\n    checkPendingOnScroll,\n  });\n\n  const keyboardMethods = useKeyboard({\n    propsWithDefault,\n    actionRef,\n    virtualListRef,\n    loadMoreRef,\n    scrollAndFocus,\n    onlyFocus,\n    onScrollStop,\n  });\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalAttributes,\n      useVirtualHelpers,\n      loadMoreRef,\n      virtualListRef,\n      ...keyboardMethods,\n    }),\n    [globalAttributes, keyboardMethods, propsWithDefault, useVirtualHelpers, loadMoreRef, virtualListRef],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAkB,oCAAoC,gCAAgC;AAEtF,MAAM,aAAa,CAAC,EAAE,cAAc,gBAAgB,UAAU,MAA2B;AACvF,QAAM,UAAU;AAAA,IACd,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACA,MAAI,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,KAAK;AAAG,YAAQ,eAAe;AAAA,WAC5F,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,QAAQ;AAAG,YAAQ,aAAa;AAC3G,SAAO;AACT;AAUO,MAAM,8BAA2D,CAAC,UAAU;AACjF,QAAM,mBAAmB,6BAAwD,OAAO,wBAAwB;AAChH,iCAA0D,kBAAkB,kCAAkC;AAC9G,QAAM,mBAAmB,uBAAuB,gBAAgB;AAChE,QAAM,cAAcA,OAAM,OAA0B;AACpD,QAAM,iBAAiBA,OAAM,OAAuB;AAEpD,QAAM,kBAAkBA,OAAM,OAAO,KAAK;AAC1C,QAAM,EAAE,gBAAgB,UAAU,WAAW,cAAc,UAAU,IAAI;AACzE,QAAM,oBAAoB,WAAW;AAAA,IACnC,MAAM,UAAU;AAAA,IAChB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,GAAG,WAAW,EAAE,cAAc,gBAAgB,UAAU,CAAC;AAAA,IAGzD,cAAcA,OAAM,YAAY,MAAM,IAAI,CAAC,CAAC;AAAA,EAC9C,CAAC;AAED,QAAM,EAAE,cAAc,WAAW,gBAAgB,qBAAqB,IAAI,yBAAyB;AAAA,IACjG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,eAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,yBAAuB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,kBAAkB,YAAY;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,iBAAiB,kBAAkB,mBAAmB,aAAa,cAAc;AAAA,EACtG;AACF;",
+  "names": ["React"]
+}

package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js

@@ -0,0 +1,67 @@
+import * as React from "react";
+import React2 from "react";
+import { debounce } from "lodash";
+const useFocusAndScrollHelpers = ({
+  propsWithDefault: { onScrollEnds },
+  useVirtualHelpers: { scrollToIndex: vScroll },
+  pendingOnScroll,
+  virtualListRef
+}) => {
+  const onScrollStop = React2.useMemo(
+    () => debounce(() => {
+      if (document.visibilityState === "hidden") {
+        pendingOnScroll.current = true;
+        return [];
+      }
+      if (!virtualListRef.current)
+        return [];
+      pendingOnScroll.current = false;
+      const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};
+      const list = virtualListRef.current.querySelectorAll('[data-element="chat-element-list-item"]');
+      const indexList = [];
+      list.forEach((item) => {
+        const { top: itemTop } = item.getBoundingClientRect();
+        const itemPadding = 10;
+        if (itemTop + itemPadding < bottom && itemTop + itemPadding > top)
+          indexList.push(item.dataset.index || "");
+      });
+      if (onScrollEnds)
+        onScrollEnds(indexList);
+      return indexList;
+    }, 500),
+    [onScrollEnds, pendingOnScroll, virtualListRef]
+  );
+  const onlyFocus = React2.useCallback(
+    (index) => {
+      virtualListRef.current?.querySelector(`[data-index="${index}"]`)?.focus();
+    },
+    [virtualListRef]
+  );
+  const scrollAndFocus = React2.useCallback(
+    (index) => {
+      vScroll(index, { align: "center" });
+      setTimeout(() => {
+        onlyFocus(index.toString());
+      }, 300);
+      onScrollStop();
+    },
+    [onScrollStop, onlyFocus, vScroll]
+  );
+  const checkPendingOnScroll = React2.useCallback(() => {
+    if (pendingOnScroll.current === true)
+      onScrollStop();
+  }, [onScrollStop, pendingOnScroll]);
+  return React2.useMemo(
+    () => ({
+      onScrollStop,
+      onlyFocus,
+      scrollAndFocus,
+      checkPendingOnScroll
+    }),
+    [onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll]
+  );
+};
+export {
+  useFocusAndScrollHelpers
+};
+//# sourceMappingURL=useFocusAndScrollHelpers.js.map

package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useFocusAndScrollHelpers.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { debounce } from 'lodash';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseFocusAndScrollHelpersArgs = {\n  propsWithDefault: DSChatT.MessagesListProps;\n  useVirtualHelpers: ReturnType<typeof useVirtual>;\n  pendingOnScroll: React.MutableRefObject<boolean>;\n  virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n};\n\nexport const useFocusAndScrollHelpers = ({\n  propsWithDefault: { onScrollEnds },\n  useVirtualHelpers: { scrollToIndex: vScroll },\n  pendingOnScroll,\n  virtualListRef,\n}: UseFocusAndScrollHelpersArgs) => {\n  const onScrollStop = React.useMemo(\n    () =>\n      debounce((): string[] => {\n        if (document.visibilityState === 'hidden') {\n          pendingOnScroll.current = true;\n          return [];\n        }\n        if (!virtualListRef.current) return [];\n        pendingOnScroll.current = false;\n        const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};\n\n        const list = virtualListRef.current.querySelectorAll<HTMLElement>('[data-element=\"chat-element-list-item\"]');\n        const indexList: Array<string> = [];\n        list.forEach((item: HTMLElement) => {\n          const { top: itemTop } = item.getBoundingClientRect();\n\n          const itemPadding = 10;\n          if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || '');\n        });\n        if (onScrollEnds) onScrollEnds(indexList);\n        return indexList;\n      }, 500),\n    [onScrollEnds, pendingOnScroll, virtualListRef],\n  ) as () => string[];\n\n  const onlyFocus = React.useCallback(\n    (index: string) => {\n      (virtualListRef.current?.querySelector(`[data-index=\"${index}\"]`) as HTMLDivElement)?.focus();\n    },\n    [virtualListRef],\n  );\n\n  const scrollAndFocus = React.useCallback(\n    (index: number) => {\n      vScroll(index, { align: 'center' });\n      setTimeout(() => {\n        onlyFocus(index.toString());\n      }, 300);\n      onScrollStop();\n    },\n    [onScrollStop, onlyFocus, vScroll],\n  );\n\n  const checkPendingOnScroll = React.useCallback(() => {\n    if (pendingOnScroll.current === true) onScrollStop();\n  }, [onScrollStop, pendingOnScroll]);\n\n  return React.useMemo(\n    () => ({\n      onScrollStop,\n      onlyFocus,\n      scrollAndFocus,\n      checkPendingOnScroll,\n    }),\n    [onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAElB,SAAS,gBAAgB;AAUlB,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE,aAAa;AAAA,EACjC,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AACF,MAAoC;AAClC,QAAM,eAAeA,OAAM;AAAA,IACzB,MACE,SAAS,MAAgB;AACvB,UAAI,SAAS,oBAAoB,UAAU;AACzC,wBAAgB,UAAU;AAC1B,eAAO,CAAC;AAAA,MACV;AACA,UAAI,CAAC,eAAe;AAAS,eAAO,CAAC;AACrC,sBAAgB,UAAU;AAC1B,YAAM,EAAE,QAAQ,IAAI,IAAI,eAAe,SAAS,sBAAsB,KAAK,CAAC;AAE5E,YAAM,OAAO,eAAe,QAAQ,iBAA8B,yCAAyC;AAC3G,YAAM,YAA2B,CAAC;AAClC,WAAK,QAAQ,CAAC,SAAsB;AAClC,cAAM,EAAE,KAAK,QAAQ,IAAI,KAAK,sBAAsB;AAEpD,cAAM,cAAc;AACpB,YAAI,UAAU,cAAc,UAAU,UAAU,cAAc;AAAK,oBAAU,KAAK,KAAK,QAAQ,SAAS,EAAE;AAAA,MAC5G,CAAC;AACD,UAAI;AAAc,qBAAa,SAAS;AACxC,aAAO;AAAA,IACT,GAAG,GAAG;AAAA,IACR,CAAC,cAAc,iBAAiB,cAAc;AAAA,EAChD;AAEA,QAAM,YAAYA,OAAM;AAAA,IACtB,CAAC,UAAkB;AACjB,MAAC,eAAe,SAAS,cAAc,gBAAgB,SAAS,GAAsB,MAAM;AAAA,IAC9F;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,iBAAiBA,OAAM;AAAA,IAC3B,CAAC,UAAkB;AACjB,cAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAClC,iBAAW,MAAM;AACf,kBAAU,MAAM,SAAS,CAAC;AAAA,MAC5B,GAAG,GAAG;AACN,mBAAa;AAAA,IACf;AAAA,IACA,CAAC,cAAc,WAAW,OAAO;AAAA,EACnC;AAEA,QAAM,uBAAuBA,OAAM,YAAY,MAAM;AACnD,QAAI,gBAAgB,YAAY;AAAM,mBAAa;AAAA,EACrD,GAAG,CAAC,cAAc,eAAe,CAAC;AAElC,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,WAAW,gBAAgB,oBAAoB;AAAA,EAChE;AACF;",
+  "names": ["React"]
+}

package/dist/esm/parts/chat-container-messages-list/useGetNewMessages.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { useMemo, useState } from "react";
+const useGetNewMessages = (messages) => {
+  const [seenMessages, setSeenMessages] = useState({});
+  const newMessages = useMemo(() => {
+    const list = [];
+    messages.forEach((message) => {
+      if (!(message.dsId in seenMessages)) {
+        list.push(message);
+      }
+    });
+    setSeenMessages(Object.fromEntries(messages.map((m) => [m.dsId, true])));
+    return list;
+  }, [messages]);
+  return newMessages;
+};
+export {
+  useGetNewMessages
+};
+//# sourceMappingURL=useGetNewMessages.js.map

package/dist/esm/parts/chat-container-messages-list/useGetNewMessages.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useGetNewMessages.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState } from 'react';\nimport type { DSChatBubbleT } from '@elliemae/ds-chat-bubble';\n\nexport const useGetNewMessages = (messages: DSChatBubbleT.Props[]) => {\n  const [seenMessages, setSeenMessages] = useState<Record<DSChatBubbleT.Props['dsId'], true>>({});\n  const newMessages = useMemo(() => {\n    const list: DSChatBubbleT.Props[] = [];\n    messages.forEach((message) => {\n      if (!(message.dsId in seenMessages)) {\n        list.push(message);\n      }\n    });\n    setSeenMessages(Object.fromEntries(messages.map((m) => [m.dsId, true])));\n    return list;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [messages]);\n\n  return newMessages;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,gBAAgB;AAG3B,MAAM,oBAAoB,CAAC,aAAoC;AACpE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAoD,CAAC,CAAC;AAC9F,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,OAA8B,CAAC;AACrC,aAAS,QAAQ,CAAC,YAAY;AAC5B,UAAI,EAAE,QAAQ,QAAQ,eAAe;AACnC,aAAK,KAAK,OAAO;AAAA,MACnB;AAAA,IACF,CAAC;AACD,oBAAgB,OAAO,YAAY,SAAS,IAAI,CAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC;AACvE,WAAO;AAAA,EAET,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/parts/chat-container-messages-list/useGlobalEventListener.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+import React2 from "react";
+const useGlobalEventListener = ({
+  propsWithDefault: { onScrollEnds },
+  virtualListRef,
+  onScrollStop,
+  checkPendingOnScroll
+}) => {
+  React2.useEffect(() => {
+    let handlerCallback;
+    const localVirtualRef = virtualListRef.current;
+    const onScroll = () => {
+      if (handlerCallback)
+        clearTimeout(handlerCallback);
+      handlerCallback = setTimeout(onScrollStop, 300);
+    };
+    if (onScrollEnds) {
+      virtualListRef.current?.addEventListener("scroll", onScroll);
+    }
+    document.addEventListener("visibilitychange", checkPendingOnScroll);
+    return () => {
+      if (handlerCallback)
+        clearTimeout(handlerCallback);
+      if (onScrollEnds && localVirtualRef)
+        localVirtualRef.removeEventListener("scroll", onScroll);
+      document.removeEventListener("visibilitychange", checkPendingOnScroll);
+    };
+  }, [onScrollStop, onScrollEnds, checkPendingOnScroll, virtualListRef]);
+};
+export {
+  useGlobalEventListener
+};
+//# sourceMappingURL=useGlobalEventListener.js.map