npm - @elliemae/ds-chat-container - Versions diffs - 3.80.0-next.2 → 3.80.0-next.20 - Mend

@elliemae/ds-chat-container 3.80.0-next.2 → 3.80.0-next.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

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

@@ -56,11 +56,13 @@ const ChatContainerMessagesList = (props) => {
     virtualListRef
   } = (0, import_useChatContainerMessageList.useChatContainerMessageList)(props);
   const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;
-  const { totalSize, virtualItems } = useVirtualHelpers;
+  const totalSize = useVirtualHelpers.getTotalSize();
+  const virtualItems = useVirtualHelpers.getVirtualItems();
+  const { measureElement } = useVirtualHelpers;
   const newMessages = (0, import_useGetNewMessages.useGetNewMessages)(messages);
   const render = import_react.default.useMemo(
     () => virtualItems.map((virtualItem) => {
-      const { index, measureRef, start } = virtualItem;
+      const { index, start } = virtualItem;
       const row = messages[index];
       const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);
       const style = {
@@ -76,7 +78,7 @@ const ChatContainerMessagesList = (props) => {
           "data-element": "chat-element-list-item",
           "data-index": index,
           style,
-          innerRef: measureRef,
+          innerRef: measureElement,
           tabIndex: -1,
           onKeyDown: handleKey,
           role: "listitem",
@@ -89,7 +91,7 @@ const ChatContainerMessagesList = (props) => {
         `ds-chat-bubble-${index}-${row.dsId}-${row.type}`
       );
     }),
-    [virtualItems, messages, sendingMessages, handleKey, sendingText]
+    [virtualItems, messages, sendingMessages, handleKey, sendingText, measureElement]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledWrapper, { ...globalAttributes, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/chat-container-messages-list/ChatContainerMessagesList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport type { CSSProperties, WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { ChatBubble, BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport type { DSChatMessageDelimeterT } from '@elliemae/ds-chat-message-delimeter';\nimport { MessageDelimiter } from '@elliemae/ds-chat-message-delimeter';\nimport type { DSChatSystemMessageT } from '@elliemae/ds-chat-system-message';\nimport { SystemMessage } from '@elliemae/ds-chat-system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n  StyledNewMessagesHiddenContainer,\n} from './styled.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types.js';\nimport { useGetNewMessages } from './useGetNewMessages.js';\nimport { useChatContainerMessageList } from './useChatContainerMessageList.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\n\ntype ButtonV2InnerRefT = DSButtonV2T.Props['innerRef'];\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            innerRef={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        innerRef={virtualListRef as React.RefObject<HTMLDivElement>}\n        role=\"list\"\n        onKeyDown={handleListKey}\n      >\n        <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n          {!isLoading && hasMoreItems ? (\n            <StyledLoadMoreContainer hasMoreItems={hasMoreItems} role=\"listitem\">\n              <DSButtonV2\n                buttonType=\"outline\"\n                onClick={getMoreMessages}\n                data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n                innerRef={loadMoreRef as ButtonV2InnerRefT}\n              >\n                Load More\n              </DSButtonV2>\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.displayName = 'ChatContainerMessagesList';\nconst ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);\nChatContainerMessagesListWithSchema.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainerMessagesList, ChatContainerMessagesListWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEX;AAlEZ,mBAAkB;AAClB,8BAAyB;AACzB,0BAA6C;AAC7C,4BAAyC;AAEzC,uCAAiC;AAEjC,oCAA8B;AAC9B,oBAQO;AAEP,mCAAmD;AACnD,+BAAkC;AAClC,yCAA4C;AAC5C,sCAAyC;AAIzC,MAAM,4BAA4E,CAAC,UAAU;AAC3F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,gEAA4B,KAAK;AAErC,QAAM,EAAE,aAAa,iBAAiB,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAC7F,QAAM,EAAE,WAAW,aAAa,IAAI;AAEpC,QAAM,kBAAc,4CAAkB,QAAQ;AAE9C,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,MACE,aAAa,IAAI,CAAC,gBAAgB;AAChC,YAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,YAAM,MAAM,SAAS,KAAK;AAC1B,YAAM,YAAY,mBAAmB,gBAAgB,KAAK,CAAC,MAAM,MAAM,IAAI,IAAI;AAC/E,YAAM,QAAuB;AAAA,QAC3B,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW,cAAc,KAAK;AAAA,QAC9B,OAAO;AAAA,MACT;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAa;AAAA,UACb,cAAY;AAAA,UAEZ;AAAA,UACA,UAAU;AAAA,UACV,UAAU;AAAA,UACV,WAAW;AAAA,UACX,MAAK;AAAA,UAEL,uDAAC,uCAAsB,MAAM,IAAI,MAC9B;AAAA,gBAAI,SAAS,mCAAa,UAAU,IAAI,SAAS,mCAAa,YAC7D,4CAAC,oCAAY,GAAG,KAAK,aAAa,YAAY,cAAc,IAAI,aAAa,IAC3E;AAAA,YACH,IAAI,SAAS,mCAAa,YACzB,4CAAC,qDAAkB,GAAI,KAAkD,IACvE;AAAA,YACH,IAAI,SAAS,mCAAa,SAAS,4CAAC,+CAAe,GAAI,KAAoC,IAAK;AAAA,aACnG;AAAA;AAAA,QAfK,kBAAkB,KAAK,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI;AAAA,MAgBtD;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,cAAc,UAAU,iBAAiB,WAAW,WAAW;AAAA,EAClE;AAEA,SACE,6CAAC,+BAAe,GAAG,kBACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,yDAAyB;AAAA,QACtC,UAAU;AAAA,QACV,UAAU;AAAA,QACV,MAAK;AAAA,QACL,WAAW;AAAA,QAEX,uDAAC,sDAAqC,QAAQ,GAAG,SAAS,MACvD;AAAA,WAAC,aAAa,eACb,4CAAC,yCAAwB,cAA4B,MAAK,YACxD;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,SAAS;AAAA,cACT,eAAa,yDAAyB;AAAA,cACtC,UAAU;AAAA,cACX;AAAA;AAAA,UAED,GACF,IACE;AAAA,UACH;AAAA,WACH;AAAA;AAAA,IACF;AAAA,IAEA,4CAAC,kDAAiC,aAAU,UAAS,eAAY,SAC9D,sBAAY,IAAI,CAAC,eAChB,6CAAC,OACE;AAAA,iBAAW;AAAA,MAAM;AAAA,MAAE,WAAW;AAAA,MAAK;AAAA,MAAE,WAAW;AAAA,MAAK;AAAA,MAAE,WAAW;AAAA,MAAa;AAAA,MAAE,WAAW;AAAA,SADvF,WAAW,IAEnB,CACD,GACH;AAAA,KACF;AAEJ;AAEA,0BAA0B,cAAc;AACxC,MAAM,0CAAsC,kCAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport type { CSSProperties, WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { ChatBubble, BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport type { DSChatMessageDelimeterT } from '@elliemae/ds-chat-message-delimeter';\nimport { MessageDelimiter } from '@elliemae/ds-chat-message-delimeter';\nimport type { DSChatSystemMessageT } from '@elliemae/ds-chat-system-message';\nimport { SystemMessage } from '@elliemae/ds-chat-system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n  StyledNewMessagesHiddenContainer,\n} from './styled.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types.js';\nimport { useGetNewMessages } from './useGetNewMessages.js';\nimport { useChatContainerMessageList } from './useChatContainerMessageList.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\n\ntype ButtonV2InnerRefT = DSButtonV2T.Props['innerRef'];\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 = useVirtualHelpers.getTotalSize();\n  const virtualItems = useVirtualHelpers.getVirtualItems();\n  const { measureElement } = useVirtualHelpers;\n\n  const newMessages = useGetNewMessages(messages);\n\n  const render = React.useMemo(\n    () =>\n      virtualItems.map((virtualItem) => {\n        const { index, 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            innerRef={measureElement}\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, measureElement],\n  );\n\n  return (\n    <StyledWrapper {...globalAttributes}>\n      <StyledChatContainerContentList\n        data-testid={ChatContainerDataTestIds.THREAD_CONTAINER}\n        tabIndex={0}\n        innerRef={virtualListRef as React.RefObject<HTMLDivElement>}\n        role=\"list\"\n        onKeyDown={handleListKey}\n      >\n        <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n          {!isLoading && hasMoreItems ? (\n            <StyledLoadMoreContainer hasMoreItems={hasMoreItems} role=\"listitem\">\n              <DSButtonV2\n                buttonType=\"outline\"\n                onClick={getMoreMessages}\n                data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n                innerRef={loadMoreRef as ButtonV2InnerRefT}\n              >\n                Load More\n              </DSButtonV2>\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.displayName = 'ChatContainerMessagesList';\nconst ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);\nChatContainerMessagesListWithSchema.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainerMessagesList, ChatContainerMessagesListWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -57,8 +57,16 @@ const StyledWrapperListItem = import_ds_system.styled.div`
 const StyledChatContainerContentList = import_ds_system.styled.div`
   width: 100%;
   height: 100%;
-  padding: ${(props) => props.theme.space.xs};
-  padding-bottom: 0;
+  /**
+   * No padding-top here on purpose: this element is also react-virtual's getScrollElement, and
+   * virtual-core compares raw el.scrollTop against its own content-relative item positions with no
+   * padding awareness — a CSS top-padding on the scroll element itself desyncs those two frames,
+   * making calculateRange() (and therefore getMessagesInView()) misjudge the visible range near the
+   * top boundary by roughly the padding's own size. The equivalent top space is provided instead via
+   * the virtualizer's own paddingStart option (useChatContainerMessageList.ts), which is baked into
+   * its measurements and stays in the same frame as scrollTop.
+   */
+  padding: 0 ${(props) => props.theme.space.xs} 0 ${(props) => props.theme.space.xs};
   overflow-y: auto;
   overflow-x: hidden;
 `;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/chat-container-messages-list/styled.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { BUBBLE_TYPES } 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEvB,4BAA6B;AAEtB,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,wBAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,mCAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,MAAM,GAAG;AAAA,GACpF;AAAA,IACC,CAAC,UACD,MAAM,SAAS,mCAAa,aAC5B,YAAY,MAAM,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,MAAM,GAAG;AAAA,MAC5D,MAAM,MAAM,MAAM,GAAG;AAAA,GACxB;AAAA,IACC,CAAC,UACD,MAAM,SAAS,mCAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,GAAG;AAAA,GAClC;AAAA;AAGI,MAAM,iCAAiC,wBAAO;AAAA;AAAA;AAAA,aAGxC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,mCAAmC,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahD,MAAM,uCAAuC,wBAAO;AAAA;AAAA,YAE/C,CAAC,UAAU,MAAM,MAAM;AAAA;AAAA;AAI5B,MAAM,0BAA0B,wBAAO;AAAA;AAAA,uBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,aAC1C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,WAClC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,YAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA,IAIxC,CAAC,UAAW,MAAM,iBAAiB,QAAQ,YAAY,EAAG;AAAA,IAC1D,CAAC,UAAW,MAAM,iBAAiB,WAAW,eAAe,EAAG;AAAA;AAE7D,MAAM,WAAW,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { BUBBLE_TYPES } 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  /**\n   * No padding-top here on purpose: this element is also react-virtual's getScrollElement, and\n   * virtual-core compares raw el.scrollTop against its own content-relative item positions with no\n   * padding awareness \u2014 a CSS top-padding on the scroll element itself desyncs those two frames,\n   * making calculateRange() (and therefore getMessagesInView()) misjudge the visible range near the\n   * top boundary by roughly the padding's own size. The equivalent top space is provided instead via\n   * the virtualizer's own paddingStart option (useChatContainerMessageList.ts), which is baked into\n   * its measurements and stays in the same frame as scrollTop.\n   */\n  padding: 0 ${(props) => props.theme.space.xs} 0 ${(props) => props.theme.space.xs};\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEvB,4BAA6B;AAEtB,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,wBAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,mCAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,MAAM,GAAG;AAAA,GACpF;AAAA,IACC,CAAC,UACD,MAAM,SAAS,mCAAa,aAC5B,YAAY,MAAM,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,MAAM,GAAG;AAAA,MAC5D,MAAM,MAAM,MAAM,GAAG;AAAA,GACxB;AAAA,IACC,CAAC,UACD,MAAM,SAAS,mCAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,GAAG;AAAA,GAClC;AAAA;AAGI,MAAM,iCAAiC,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAYtC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE,MAAM,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAK5E,MAAM,mCAAmC,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahD,MAAM,uCAAuC,wBAAO;AAAA;AAAA,YAE/C,CAAC,UAAU,MAAM,MAAM;AAAA;AAAA;AAI5B,MAAM,0BAA0B,wBAAO;AAAA;AAAA,uBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,aAC1C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,WAClC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,YAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA,IAIxC,CAAC,UAAW,MAAM,iBAAiB,QAAQ,YAAY,EAAG;AAAA,IAC1D,CAAC,UAAW,MAAM,iBAAiB,WAAW,eAAe,EAAG;AAAA;AAE7D,MAAM,WAAW,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/chat-container-messages-list/useActionRef.js CHANGED Viewed

@@ -40,7 +40,8 @@ const useActionRef = ({
   updateCache,
   getMessagesInView,
   onlyFocus,
-  scrollAndFocus
+  scrollAndFocus,
+  hasVirtualItems
 }) => {
   import_react.default.useEffect(() => {
     if (actionRef && actionRef.current) {
@@ -61,11 +62,13 @@ const useActionRef = ({
       };
       actionRef.current.scrollToIndex = scrollToIndex;
       actionRef.current.getMessagesInView = getMessagesInView;
-      updateCache();
       actionRef.current.focusToIndex = focusToIndex;
       actionRef.current.focusToIndexWithoutScroll = onlyFocus;
       actionRef.current.focusToList = focusToList;
     }
-  }, [actionRef, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);
+  }, [actionRef, getMessagesInView, onlyFocus, scrollAndFocus, updateCache, vScroll, virtualListRef]);
+  import_react.default.useEffect(() => {
+    if (hasVirtualItems) updateCache();
+  }, [hasVirtualItems, updateCache]);
 };
 //# sourceMappingURL=useActionRef.js.map

package/dist/cjs/parts/chat-container-messages-list/useActionRef.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/chat-container-messages-list/useActionRef.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\n\ntype UseActionRefArgs = {\n  actionRef: DSChatT.ActionRef;\n  useVirtualHelpers: ReturnType<typeof useVirtual>;\n  virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n  updateCache: () => void;\n  getMessagesInView: () => 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  updateCache,\n  getMessagesInView,\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        setTimeout(() => {\n          vScroll(index, opts);\n          /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n           * requestAnimationFrame is needed because the first scroll might not calculate positions\n           * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n           * frame, we ensure that:\n           * 1. The DOM has been updated with new positions after the first scroll\n           * 2. Element height and position measurements are accurate\n           * 3. The second scroll can center the element with correct measurements\n           *\n           * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n           * synchronization better. This RAF workaround might not be necessary with v3.\n           */\n          requestAnimationFrame(() => {\n            vScroll(index, opts);\n            updateCache();\n          });\n        }, 0);\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 = getMessagesInView;\n      updateCache(); // populate cache immediately on mount \u2014 leading throttle fires synchronously\n      actionRef.current.focusToIndex = focusToIndex;\n      actionRef.current.focusToIndexWithoutScroll = onlyFocus;\n      actionRef.current.focusToList = focusToList;\n    }\n  }, [actionRef, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAcX,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,YAAM,gBAA+D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AAC1G,mBAAW,MAAM;AACf,kBAAQ,OAAO,IAAI;AAYnB,gCAAsB,MAAM;AAC1B,oBAAQ,OAAO,IAAI;AACnB,wBAAY;AAAA,UACd,CAAC;AAAA,QACH,GAAG,CAAC;AAAA,MACN;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;AACtC,kBAAY;AACZ,gBAAU,QAAQ,eAAe;AACjC,gBAAU,QAAQ,4BAA4B;AAC9C,gBAAU,QAAQ,cAAc;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,WAAW,aAAa,mBAAmB,WAAW,gBAAgB,SAAS,cAAc,CAAC;AACpG;",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\n\ntype UseActionRefArgs = {\n  actionRef: DSChatT.ActionRef;\n  useVirtualHelpers: DSChatT.ChatVirtualizer;\n  virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n  updateCache: () => void;\n  getMessagesInView: () => string[];\n  onlyFocus: (index: string) => void;\n  scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n  hasVirtualItems: boolean;\n};\n\nexport const useActionRef = ({\n  actionRef,\n  useVirtualHelpers: { scrollToIndex: vScroll },\n  virtualListRef,\n  updateCache,\n  getMessagesInView,\n  onlyFocus,\n  scrollAndFocus,\n  hasVirtualItems,\n}: UseActionRefArgs) => {\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      const scrollToIndex: DSChatT.ActionRef['current']['scrollToIndex'] = (index, opts = { align: 'center' }) => {\n        setTimeout(() => {\n          vScroll(index, opts);\n          /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n           * requestAnimationFrame is needed because the first scroll might not calculate positions\n           * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n           * frame, we ensure that:\n           * 1. The DOM has been updated with new positions after the first scroll\n           * 2. Element height and position measurements are accurate\n           * 3. The second scroll can center the element with correct measurements\n           *\n           * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n           * synchronization better. This RAF workaround might not be necessary with v3.\n           */\n          requestAnimationFrame(() => {\n            vScroll(index, opts);\n            updateCache();\n          });\n        }, 0);\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 = getMessagesInView;\n      actionRef.current.focusToIndex = focusToIndex;\n      actionRef.current.focusToIndexWithoutScroll = onlyFocus;\n      actionRef.current.focusToList = focusToList;\n    }\n  }, [actionRef, getMessagesInView, onlyFocus, scrollAndFocus, updateCache, vScroll, virtualListRef]);\n\n  /**\n   * Populates the visible-items cache once the virtualizer has actually rendered rows. Unlike v2 \u2014\n   * whose calculateRange never gated on the scroll container's measured size, so it always rendered\n   * overscan+1 rows synchronously on the first commit \u2014 v3 gates rendering on a real, measured\n   * container size, so `getVirtualItems()` is empty for the first render(s) until that measurement\n   * resolves (confirmed empirically: 2 empty renders observed before the first non-empty one).\n   * Calling updateCache() unconditionally on mount (the v2-era approach) raced this and cached an\n   * empty list, which Shift+Tab-from-composer then read once and never revisited.\n   *\n   * Residual, narrower risk: interacting with the thread in the brief window before `hasVirtualItems`\n   * flips true (the first render, before real layout exists) still finds an empty cache \u2014 this is a\n   * known, accepted limitation of `onlyFocus`'s querySelector-based focus lookup, not something this\n   * migration introduces new architecture to close. See KNOWN_INTENTIONAL_DEVIATIONS.md.\n   */\n  React.useEffect(() => {\n    if (hasVirtualItems) updateCache();\n  }, [hasVirtualItems, updateCache]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAcX,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,YAAM,gBAA+D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AAC1G,mBAAW,MAAM;AACf,kBAAQ,OAAO,IAAI;AAYnB,gCAAsB,MAAM;AAC1B,oBAAQ,OAAO,IAAI;AACnB,wBAAY;AAAA,UACd,CAAC;AAAA,QACH,GAAG,CAAC;AAAA,MACN;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;AACtC,gBAAU,QAAQ,eAAe;AACjC,gBAAU,QAAQ,4BAA4B;AAC9C,gBAAU,QAAQ,cAAc;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,WAAW,mBAAmB,WAAW,gBAAgB,aAAa,SAAS,cAAc,CAAC;AAgBlG,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,gBAAiB,aAAY;AAAA,EACnC,GAAG,CAAC,iBAAiB,WAAW,CAAC;AACnC;",
   "names": ["React"]
 }

package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js CHANGED Viewed

@@ -33,8 +33,9 @@ __export(useChatContainerMessageList_exports, {
 module.exports = __toCommonJS(useChatContainerMessageList_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
+var import_styled_components = require("styled-components");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_react_virtual = require("react-virtual");
+var import_react_virtual = require("@tanstack/react-virtual");
 var import_useActionRef = require("./useActionRef.js");
 var import_useGlobalEventListener = require("./useGlobalEventListener.js");
 var import_useKeyboard = require("./useKeyboard.js");
@@ -62,13 +63,16 @@ const useChatContainerMessageList = (props) => {
   const virtualListRef = import_react.default.useRef();
   const pendingOnScroll = import_react.default.useRef(false);
   const { bannerPosition, messages, actionRef, hasMoreItems, isLoading } = propsWithDefault;
-  const useVirtualHelpers = (0, import_react_virtual.useVirtual)({
-    size: messages?.length,
-    parentRef: virtualListRef,
+  const theme = (0, import_styled_components.useTheme)();
+  const containerPaddingStart = parseInt(theme.space.xs, 10);
+  const padding = getPadding({ hasMoreItems, bannerPosition, isLoading });
+  const useVirtualHelpers = (0, import_react_virtual.useVirtualizer)({
+    count: messages?.length ?? 0,
+    getScrollElement: () => virtualListRef.current ?? null,
     overscan: 15,
-    ...getPadding({ hasMoreItems, bannerPosition, isLoading }),
-    // estimateSize should not be really required given what was stated on
-    // https://github.com/tannerlinsley/react-virtual/issues/23
+    paddingStart: padding.paddingStart + containerPaddingStart,
+    paddingEnd: padding.paddingEnd,
+    // Unlike v2, v3 has no internal default for estimateSize — it's required, not optional.
     estimateSize: import_react.default.useCallback(() => 80, [])
   });
   const { onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll } = (0, import_useFocusAndScrollHelpers.useFocusAndScrollHelpers)({
@@ -84,7 +88,8 @@ const useChatContainerMessageList = (props) => {
     updateCache,
     getMessagesInView,
     onlyFocus,
-    scrollAndFocus
+    scrollAndFocus,
+    hasVirtualItems: useVirtualHelpers.getVirtualItems().length > 0
   });
   (0, import_useGlobalEventListener.useGlobalEventListener)({
     propsWithDefault,

package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/chat-container-messages-list/useChatContainerMessageList.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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-props-helpers';\nimport { useVirtual } from 'react-virtual';\nimport { useActionRef } from './useActionRef.js';\nimport { useGlobalEventListener } from './useGlobalEventListener.js';\nimport { useKeyboard } from './useKeyboard.js';\nimport { useFocusAndScrollHelpers } from './useFocusAndScrollHelpers.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from '../../react-desc-prop-types.js';\nimport { DSChatContainerMessagesList } from '../../DSChatContainerDefinitions.js';\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>(\n    propsWithDefault,\n    ChatContainerMessagesListPropTypes,\n    DSChatContainerMessagesList,\n  );\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, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll } =\n    useFocusAndScrollHelpers({\n      propsWithDefault,\n      useVirtualHelpers,\n      pendingOnScroll,\n      virtualListRef,\n    });\n\n  useActionRef({\n    actionRef,\n    useVirtualHelpers,\n    virtualListRef,\n    updateCache,\n    getMessagesInView,\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    getMessagesInView,\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAClB,8BAIO;AACP,2BAA2B;AAC3B,0BAA6B;AAC7B,oCAAuC;AACvC,yBAA4B;AAC5B,sCAAyC;AAEzC,mCAA6E;AAC7E,wCAA4C;AAE5C,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,EAAG,SAAQ,eAAe;AAAA,WAC5F,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,QAAQ,EAAG,SAAQ,aAAa;AAC3G,SAAO;AACT;AAUO,MAAM,8BAA2D,CAAC,UAAU;AACjF,QAAM,uBAAmB,sDAAwD,OAAO,qDAAwB;AAChH;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,uBAAmB,gDAAuB,gBAAgB;AAChE,QAAM,cAAc,aAAAA,QAAM,OAA0B;AACpD,QAAM,iBAAiB,aAAAA,QAAM,OAAuB;AAEpD,QAAM,kBAAkB,aAAAA,QAAM,OAAO,KAAK;AAC1C,QAAM,EAAE,gBAAgB,UAAU,WAAW,cAAc,UAAU,IAAI;AACzE,QAAM,wBAAoB,iCAAW;AAAA,IACnC,MAAM,UAAU;AAAA,IAChB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,GAAG,WAAW,EAAE,cAAc,gBAAgB,UAAU,CAAC;AAAA;AAAA;AAAA,IAGzD,cAAc,aAAAA,QAAM,YAAY,MAAM,IAAI,CAAC,CAAC;AAAA,EAC9C,CAAC;AAED,QAAM,EAAE,cAAc,aAAa,mBAAmB,WAAW,gBAAgB,qBAAqB,QACpG,0DAAyB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,wCAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,4DAAuB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,sBAAkB,gCAAY;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,aAAAA,QAAM;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;",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { useTheme } from 'styled-components';\nimport {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { useActionRef } from './useActionRef.js';\nimport { useGlobalEventListener } from './useGlobalEventListener.js';\nimport { useKeyboard } from './useKeyboard.js';\nimport { useFocusAndScrollHelpers } from './useFocusAndScrollHelpers.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from '../../react-desc-prop-types.js';\nimport { DSChatContainerMessagesList } from '../../DSChatContainerDefinitions.js';\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: DSChatT.ChatVirtualizer;\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>(\n    propsWithDefault,\n    ChatContainerMessagesListPropTypes,\n    DSChatContainerMessagesList,\n  );\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 theme = useTheme();\n  // The scroll container's own CSS top-padding was removed (see styled.ts's StyledChatContainerContentList)\n  // and replaced with this \u2014 an equivalent virtualizer-space paddingStart keeps calculateRange()'s\n  // scrollOffset comparisons in the same frame as its item measurements.\n  const containerPaddingStart = parseInt(theme.space.xs, 10);\n  const padding = getPadding({ hasMoreItems, bannerPosition, isLoading });\n  const useVirtualHelpers = useVirtualizer<HTMLDivElement, HTMLDivElement>({\n    count: messages?.length ?? 0,\n    getScrollElement: () => virtualListRef.current ?? null,\n    overscan: 15,\n    paddingStart: padding.paddingStart + containerPaddingStart,\n    paddingEnd: padding.paddingEnd,\n    // Unlike v2, v3 has no internal default for estimateSize \u2014 it's required, not optional.\n    estimateSize: React.useCallback(() => 80, []),\n  });\n\n  const { onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll } =\n    useFocusAndScrollHelpers({\n      propsWithDefault,\n      useVirtualHelpers,\n      pendingOnScroll,\n      virtualListRef,\n    });\n\n  useActionRef({\n    actionRef,\n    useVirtualHelpers,\n    virtualListRef,\n    updateCache,\n    getMessagesInView,\n    onlyFocus,\n    scrollAndFocus,\n    hasVirtualItems: useVirtualHelpers.getVirtualItems().length > 0,\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    getMessagesInView,\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAClB,+BAAyB;AACzB,8BAIO;AACP,2BAA+B;AAC/B,0BAA6B;AAC7B,oCAAuC;AACvC,yBAA4B;AAC5B,sCAAyC;AAEzC,mCAA6E;AAC7E,wCAA4C;AAE5C,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,EAAG,SAAQ,eAAe;AAAA,WAC5F,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,QAAQ,EAAG,SAAQ,aAAa;AAC3G,SAAO;AACT;AAUO,MAAM,8BAA2D,CAAC,UAAU;AACjF,QAAM,uBAAmB,sDAAwD,OAAO,qDAAwB;AAChH;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,uBAAmB,gDAAuB,gBAAgB;AAChE,QAAM,cAAc,aAAAA,QAAM,OAA0B;AACpD,QAAM,iBAAiB,aAAAA,QAAM,OAAuB;AAEpD,QAAM,kBAAkB,aAAAA,QAAM,OAAO,KAAK;AAC1C,QAAM,EAAE,gBAAgB,UAAU,WAAW,cAAc,UAAU,IAAI;AACzE,QAAM,YAAQ,mCAAS;AAIvB,QAAM,wBAAwB,SAAS,MAAM,MAAM,IAAI,EAAE;AACzD,QAAM,UAAU,WAAW,EAAE,cAAc,gBAAgB,UAAU,CAAC;AACtE,QAAM,wBAAoB,qCAA+C;AAAA,IACvE,OAAO,UAAU,UAAU;AAAA,IAC3B,kBAAkB,MAAM,eAAe,WAAW;AAAA,IAClD,UAAU;AAAA,IACV,cAAc,QAAQ,eAAe;AAAA,IACrC,YAAY,QAAQ;AAAA;AAAA,IAEpB,cAAc,aAAAA,QAAM,YAAY,MAAM,IAAI,CAAC,CAAC;AAAA,EAC9C,CAAC;AAED,QAAM,EAAE,cAAc,aAAa,mBAAmB,WAAW,gBAAgB,qBAAqB,QACpG,0DAAyB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,wCAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB,kBAAkB,gBAAgB,EAAE,SAAS;AAAA,EAChE,CAAC;AAED,4DAAuB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,sBAAkB,gCAAY;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,aAAAA,QAAM;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/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js CHANGED Viewed

@@ -36,7 +36,7 @@ var import_react = __toESM(require("react"));
 var import_lodash_es = require("lodash-es");
 const useFocusAndScrollHelpers = ({
   propsWithDefault: { onScrollEnds },
-  useVirtualHelpers: { scrollToIndex: vScroll },
+  useVirtualHelpers: { scrollToIndex: vScroll, calculateRange },
   pendingOnScroll,
   virtualListRef
 }) => {
@@ -45,18 +45,13 @@ const useFocusAndScrollHelpers = ({
       pendingOnScroll.current = true;
       return [];
     }
-    if (!virtualListRef.current) return [];
+    const range = calculateRange();
+    if (!range) 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 || "");
-    });
+    for (let index = range.startIndex; index <= range.endIndex; index += 1) indexList.push(String(index));
     return indexList;
-  }, [pendingOnScroll, virtualListRef]);
+  }, [calculateRange, pendingOnScroll]);
   const visibleItemsCache = import_react.default.useRef([]);
   const updateCache = import_react.default.useMemo(
     () => (0, import_lodash_es.throttle)(

package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/chat-container-messages-list/useFocusAndScrollHelpers.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport { debounce, throttle } from 'lodash-es';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\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  // Pure DOM read \u2014 no side effects beyond pendingOnScroll flag and getBoundingClientRect queries.\n  const computeVisibleItems = React.useCallback((): 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    const list = virtualListRef.current.querySelectorAll<HTMLElement>('[data-element=\"chat-element-list-item\"]');\n    const indexList: string[] = [];\n    list.forEach((item: HTMLElement) => {\n      const { top: itemTop } = item.getBoundingClientRect();\n      const itemPadding = 10;\n      if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || '');\n    });\n    return indexList;\n  }, [pendingOnScroll, virtualListRef]);\n\n  // Throttled with leading: populates the cache immediately on first call and keeps it\n  // fresh. No side effects beyond DOM reads \u2014 onScrollEnds is not involved.\n  const visibleItemsCache = React.useRef<string[]>([]);\n  const updateCache = React.useMemo(\n    () =>\n      throttle(\n        () => {\n          visibleItemsCache.current = computeVisibleItems();\n        },\n        500,\n        { leading: true },\n      ),\n    [computeVisibleItems],\n  );\n\n  // Synchronous getter \u2014 returns a copy so callers using .pop()/.shift() don't mutate the cache.\n  const getMessagesInView = React.useCallback((): string[] => [...visibleItemsCache.current], []);\n\n  // Debounced trailing: notifies onScrollEnds consumers after scrolling settles.\n  // Semantics and timing unchanged \u2014 this path is isolated from the cache.\n  const onScrollStop = React.useMemo(\n    () =>\n      debounce((): string[] => {\n        const indexList = computeVisibleItems();\n        if (onScrollEnds) onScrollEnds(indexList);\n        return indexList;\n      }, 500),\n    [computeVisibleItems, onScrollEnds],\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      /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n       * requestAnimationFrame is needed because the first scroll might not calculate positions\n       * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n       * frame, we ensure that:\n       * 1. The DOM has been updated with new positions after the first scroll\n       * 2. Element height and position measurements are accurate\n       * 3. The second scroll can center the element with correct measurements\n       *\n       * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n       * synchronization better. This RAF workaround might not be necessary with v3.\n       */\n      requestAnimationFrame(() => {\n        vScroll(index, { align: 'center' });\n      });\n\n      setTimeout(() => {\n        onlyFocus(index.toString());\n      }, 300);\n\n      updateCache();\n    },\n    [updateCache, onlyFocus, vScroll],\n  );\n\n  const checkPendingOnScroll = React.useCallback(() => {\n    if (pendingOnScroll.current === true) {\n      updateCache();\n      onScrollStop();\n    }\n  }, [updateCache, onScrollStop, pendingOnScroll]);\n\n  return React.useMemo(\n    () => ({\n      onScrollStop,\n      updateCache,\n      getMessagesInView,\n      onlyFocus,\n      scrollAndFocus,\n      checkPendingOnScroll,\n    }),\n    [onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAElB,uBAAmC;AAU5B,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE,aAAa;AAAA,EACjC,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AACF,MAAoC;AAElC,QAAM,sBAAsB,aAAAA,QAAM,YAAY,MAAgB;AAC5D,QAAI,SAAS,oBAAoB,UAAU;AACzC,sBAAgB,UAAU;AAC1B,aAAO,CAAC;AAAA,IACV;AACA,QAAI,CAAC,eAAe,QAAS,QAAO,CAAC;AACrC,oBAAgB,UAAU;AAC1B,UAAM,EAAE,QAAQ,IAAI,IAAI,eAAe,QAAQ,sBAAsB;AACrE,UAAM,OAAO,eAAe,QAAQ,iBAA8B,yCAAyC;AAC3G,UAAM,YAAsB,CAAC;AAC7B,SAAK,QAAQ,CAAC,SAAsB;AAClC,YAAM,EAAE,KAAK,QAAQ,IAAI,KAAK,sBAAsB;AACpD,YAAM,cAAc;AACpB,UAAI,UAAU,cAAc,UAAU,UAAU,cAAc,IAAK,WAAU,KAAK,KAAK,QAAQ,SAAS,EAAE;AAAA,IAC5G,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAIpC,QAAM,oBAAoB,aAAAA,QAAM,OAAiB,CAAC,CAAC;AACnD,QAAM,cAAc,aAAAA,QAAM;AAAA,IACxB,UACE;AAAA,MACE,MAAM;AACJ,0BAAkB,UAAU,oBAAoB;AAAA,MAClD;AAAA,MACA;AAAA,MACA,EAAE,SAAS,KAAK;AAAA,IAClB;AAAA,IACF,CAAC,mBAAmB;AAAA,EACtB;AAGA,QAAM,oBAAoB,aAAAA,QAAM,YAAY,MAAgB,CAAC,GAAG,kBAAkB,OAAO,GAAG,CAAC,CAAC;AAI9F,QAAM,eAAe,aAAAA,QAAM;AAAA,IACzB,UACE,2BAAS,MAAgB;AACvB,YAAM,YAAY,oBAAoB;AACtC,UAAI,aAAc,cAAa,SAAS;AACxC,aAAO;AAAA,IACT,GAAG,GAAG;AAAA,IACR,CAAC,qBAAqB,YAAY;AAAA,EACpC;AAEA,QAAM,YAAY,aAAAA,QAAM;AAAA,IACtB,CAAC,UAAkB;AACjB,MAAC,eAAe,SAAS,cAAc,gBAAgB,KAAK,IAAI,GAAsB,MAAM;AAAA,IAC9F;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CAAC,UAAkB;AACjB,cAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAYlC,4BAAsB,MAAM;AAC1B,gBAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAAA,MACpC,CAAC;AAED,iBAAW,MAAM;AACf,kBAAU,MAAM,SAAS,CAAC;AAAA,MAC5B,GAAG,GAAG;AAEN,kBAAY;AAAA,IACd;AAAA,IACA,CAAC,aAAa,WAAW,OAAO;AAAA,EAClC;AAEA,QAAM,uBAAuB,aAAAA,QAAM,YAAY,MAAM;AACnD,QAAI,gBAAgB,YAAY,MAAM;AACpC,kBAAY;AACZ,mBAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,aAAa,mBAAmB,WAAW,gBAAgB,oBAAoB;AAAA,EAChG;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { debounce, throttle } from 'lodash-es';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\n\ntype UseFocusAndScrollHelpersArgs = {\n  propsWithDefault: DSChatT.MessagesListProps;\n  useVirtualHelpers: DSChatT.ChatVirtualizer;\n  pendingOnScroll: React.MutableRefObject<boolean>;\n  virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n};\n\nexport const useFocusAndScrollHelpers = ({\n  propsWithDefault: { onScrollEnds },\n  useVirtualHelpers: { scrollToIndex: vScroll, calculateRange },\n  pendingOnScroll,\n  virtualListRef,\n}: UseFocusAndScrollHelpersArgs) => {\n  /**\n   * `calculateRange()` is the virtualizer's own pre-overscan viewport calculation (pure scroll\n   * geometry, no DOM scraping) \u2014 mirrors the pattern already shipped in ds-fast-list/ds-virtual-list\n   * (PUI-17898's `actionRef.getVisibleItems`). It returns `null` before the container's first real\n   * measurement, same gating condition `getVirtualItems()` uses (see useActionRef.ts's\n   * `hasVirtualItems`). Replaces the previous `getBoundingClientRect()`/`querySelectorAll` DOM scan,\n   * which re-measured real layout on every call instead of reading the virtualizer's own tracked\n   * scroll state.\n   */\n  const computeVisibleItems = React.useCallback((): string[] => {\n    if (document.visibilityState === 'hidden') {\n      pendingOnScroll.current = true;\n      return [];\n    }\n    const range = calculateRange();\n    if (!range) return [];\n    pendingOnScroll.current = false;\n    const indexList: string[] = [];\n    for (let index = range.startIndex; index <= range.endIndex; index += 1) indexList.push(String(index));\n    return indexList;\n  }, [calculateRange, pendingOnScroll]);\n\n  // Throttled with leading: populates the cache immediately on first call and keeps it\n  // fresh. No side effects beyond DOM reads \u2014 onScrollEnds is not involved.\n  const visibleItemsCache = React.useRef<string[]>([]);\n  const updateCache = React.useMemo(\n    () =>\n      throttle(\n        () => {\n          visibleItemsCache.current = computeVisibleItems();\n        },\n        500,\n        { leading: true },\n      ),\n    [computeVisibleItems],\n  );\n\n  // Synchronous getter \u2014 returns a copy so callers using .pop()/.shift() don't mutate the cache.\n  const getMessagesInView = React.useCallback((): string[] => [...visibleItemsCache.current], []);\n\n  // Debounced trailing: notifies onScrollEnds consumers after scrolling settles.\n  // Semantics and timing unchanged \u2014 this path is isolated from the cache.\n  const onScrollStop = React.useMemo(\n    () =>\n      debounce((): string[] => {\n        const indexList = computeVisibleItems();\n        if (onScrollEnds) onScrollEnds(indexList);\n        return indexList;\n      }, 500),\n    [computeVisibleItems, onScrollEnds],\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      /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n       * requestAnimationFrame is needed because the first scroll might not calculate positions\n       * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n       * frame, we ensure that:\n       * 1. The DOM has been updated with new positions after the first scroll\n       * 2. Element height and position measurements are accurate\n       * 3. The second scroll can center the element with correct measurements\n       *\n       * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n       * synchronization better. This RAF workaround might not be necessary with v3.\n       */\n      requestAnimationFrame(() => {\n        vScroll(index, { align: 'center' });\n      });\n\n      setTimeout(() => {\n        onlyFocus(index.toString());\n      }, 300);\n\n      updateCache();\n    },\n    [updateCache, onlyFocus, vScroll],\n  );\n\n  const checkPendingOnScroll = React.useCallback(() => {\n    if (pendingOnScroll.current === true) {\n      updateCache();\n      onScrollStop();\n    }\n  }, [updateCache, onScrollStop, pendingOnScroll]);\n\n  return React.useMemo(\n    () => ({\n      onScrollStop,\n      updateCache,\n      getMessagesInView,\n      onlyFocus,\n      scrollAndFocus,\n      checkPendingOnScroll,\n    }),\n    [onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAClB,uBAAmC;AAU5B,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE,aAAa;AAAA,EACjC,mBAAmB,EAAE,eAAe,SAAS,eAAe;AAAA,EAC5D;AAAA,EACA;AACF,MAAoC;AAUlC,QAAM,sBAAsB,aAAAA,QAAM,YAAY,MAAgB;AAC5D,QAAI,SAAS,oBAAoB,UAAU;AACzC,sBAAgB,UAAU;AAC1B,aAAO,CAAC;AAAA,IACV;AACA,UAAM,QAAQ,eAAe;AAC7B,QAAI,CAAC,MAAO,QAAO,CAAC;AACpB,oBAAgB,UAAU;AAC1B,UAAM,YAAsB,CAAC;AAC7B,aAAS,QAAQ,MAAM,YAAY,SAAS,MAAM,UAAU,SAAS,EAAG,WAAU,KAAK,OAAO,KAAK,CAAC;AACpG,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAIpC,QAAM,oBAAoB,aAAAA,QAAM,OAAiB,CAAC,CAAC;AACnD,QAAM,cAAc,aAAAA,QAAM;AAAA,IACxB,UACE;AAAA,MACE,MAAM;AACJ,0BAAkB,UAAU,oBAAoB;AAAA,MAClD;AAAA,MACA;AAAA,MACA,EAAE,SAAS,KAAK;AAAA,IAClB;AAAA,IACF,CAAC,mBAAmB;AAAA,EACtB;AAGA,QAAM,oBAAoB,aAAAA,QAAM,YAAY,MAAgB,CAAC,GAAG,kBAAkB,OAAO,GAAG,CAAC,CAAC;AAI9F,QAAM,eAAe,aAAAA,QAAM;AAAA,IACzB,UACE,2BAAS,MAAgB;AACvB,YAAM,YAAY,oBAAoB;AACtC,UAAI,aAAc,cAAa,SAAS;AACxC,aAAO;AAAA,IACT,GAAG,GAAG;AAAA,IACR,CAAC,qBAAqB,YAAY;AAAA,EACpC;AAEA,QAAM,YAAY,aAAAA,QAAM;AAAA,IACtB,CAAC,UAAkB;AACjB,MAAC,eAAe,SAAS,cAAc,gBAAgB,KAAK,IAAI,GAAsB,MAAM;AAAA,IAC9F;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CAAC,UAAkB;AACjB,cAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAYlC,4BAAsB,MAAM;AAC1B,gBAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAAA,MACpC,CAAC;AAED,iBAAW,MAAM;AACf,kBAAU,MAAM,SAAS,CAAC;AAAA,MAC5B,GAAG,GAAG;AAEN,kBAAY;AAAA,IACd;AAAA,IACA,CAAC,aAAa,WAAW,OAAO;AAAA,EAClC;AAEA,QAAM,uBAAuB,aAAAA,QAAM,YAAY,MAAM;AACnD,QAAI,gBAAgB,YAAY,MAAM;AACpC,kBAAY;AACZ,mBAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,aAAa,mBAAmB,WAAW,gBAAgB,oBAAoB;AAAA,EAChG;AACF;",
   "names": ["React"]
 }

package/dist/cjs/react-desc-prop-types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { useVirtual } from 'react-virtual';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { type DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport declare namespace DSChatT {\n  interface ChatBannerProps {\n    label: string;\n    viewLabel: string;\n    type?: 'info' | 'success' | 'danger' | 'warning';\n    onView: () => void;\n    onClose: () => void;\n  }\n  export type ScrollToIndexOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n  export type ActionRef = React.MutableRefObject<{\n    scrollToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n    focusToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n    getMessagesInView?: () => string[];\n    focusToIndexWithoutScroll?: (index: string) => void;\n    focusToList?: () => void;\n    focusToComposer?: () => void;\n    focusToSend?: () => void;\n    focusOnBanner?: () => void;\n    focusOnBannerLink?: () => void;\n  }>;\n\n  export interface ComposerProps extends Record<string, unknown> {\n    placeholder?: string;\n    inputValue?: string;\n    ariaMaxLengthMessage?: string;\n    maxLengthMessage?: string;\n    onChange: (value: string) => void;\n    onResize?: (value: number) => void;\n    onSend: (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => void;\n    maxHeight?: number;\n    inputMaxLength?: number;\n    buttonDisabled: boolean;\n    dataTestid?: string;\n    actionRef?: ActionRef;\n  }\n\n  export interface MessagesListProps extends Record<string, unknown> {\n    messages: DSChatBubbleT.Props[];\n    actionRef: ActionRef;\n    onScrollEnds?: (indexList: string[]) => void;\n    isLoading?: 'top' | 'bottom';\n    hasMoreItems?: 'top' | 'bottom';\n    getMoreMessages: () => void;\n    sendingMessages?: Array<string | number>;\n    sendingText: string;\n    bannerPosition?: 'top' | 'bottom';\n    bannerRef?: React.MutableRefObject<{\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      focusOnWrapper: (...args: any[]) => void;\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      focusOnLink: (...args: any[]) => void;\n    }>;\n  }\n\n  export interface ContainerProps extends Record<string, unknown> {\n    messagesListProps: Pick<MessagesListProps, 'messages' | 'onScrollEnds'>;\n    composerProps: ComposerProps;\n    actionRef?: ActionRef;\n    autoScroll: boolean;\n    device: 'desktop' | 'mobile';\n    isLoading?: 'top' | 'bottom';\n    hasMoreItems?: 'top' | 'bottom';\n    getMoreMessages: () => void;\n    bannerPosition?: 'top' | 'bottom';\n    bannerProps?: ChatBannerProps;\n    sendingMessages?: string[] | number[];\n    sendingText: string;\n  }\n\n  export interface GetPaddingT {\n    hasMoreItems: string | undefined;\n    bannerPosition: string | undefined;\n    isLoading: string | undefined;\n  }\n}\n\nexport interface TextAreaProps {\n  height: string | number;\n  style: React.CSSProperties;\n}\n\nexport const defaultPropsComposer: DSChatT.ComposerProps = {\n  placeholder: 'Type your message',\n  inputValue: '',\n  ariaMaxLengthMessage: '',\n  onChange: noop,\n  onResize: noop,\n  onSend: noop,\n  onFocus: noop,\n  onBlur: noop,\n  onKeyDown: noop,\n  maxHeight: 0,\n  inputMaxLength: undefined,\n  maxLengthMessage: undefined,\n  buttonDisabled: false,\n  dataTestid: 'ds-chat-composer',\n  actionRef: undefined,\n};\n\nexport const ChatComposerPropTypes = {\n  placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultPropsComposer.placeholder),\n  inputValue: PropTypes.string.description('Input value').defaultValue(defaultPropsComposer.inputValue),\n  ariaMaxLengthMessage: PropTypes.string\n    .description('Aria message for Max length message when exceeded')\n    .defaultValue(defaultPropsComposer.maxLengthMessage),\n  maxLengthMessage: PropTypes.string\n    .description('Max length message')\n    .defaultValue(defaultPropsComposer.maxLengthMessage),\n  onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultPropsComposer.onChange),\n  onResize: PropTypes.func\n    .description('Called the input changes his height')\n    .defaultValue(defaultPropsComposer.onResize),\n  onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultPropsComposer.onSend),\n  onFocus: PropTypes.func.description('Input focus').defaultValue(defaultPropsComposer.onFocus),\n  onBlur: PropTypes.func.description('Input blur').defaultValue(defaultPropsComposer.onBlur),\n  onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultPropsComposer.onKeyDown),\n  maxHeight: PropTypes.number\n    .description('Max height of the composer. Use 0 for no limit')\n    .defaultValue(defaultPropsComposer.onBlur),\n  inputMaxLength: PropTypes.number\n    .description('Max length of the composer. `undefined` for no limit')\n    .defaultValue(defaultPropsComposer.inputMaxLength),\n  buttonDisabled: PropTypes.bool\n    .description('Control the disabled for the send button')\n    .defaultValue(defaultPropsComposer.buttonDisabled),\n  dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.placeholder),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n          getMessagesInView?: () => number[],\n          focusToIndex?: (n: number) => void,\n          focusToList?: () => void,\n          focusToComposer?: () => void,\n          focusToSend?: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultPropsComposer.actionRef),\n};\n\nexport const defaultPropsMessagesList: DSChatT.MessagesListProps = {\n  messages: [],\n  actionRef: { current: {} },\n  // we don't want this to exist \"by default\" since this loads document.addEventListener\n  // the code is already checking for this callback existence everytime it's invoked anyway\n  // onScrollEnds: () => [],\n  getMoreMessages: noop,\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n  bannerPosition: undefined,\n  bannerRef: undefined,\n};\n\nexport const ChatContainerMessagesListPropTypes = {\n  ...globalAttributesPropTypes,\n\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(defaultPropsMessagesList.messages),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToIndexWithoutScroll: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultPropsMessagesList.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(defaultPropsMessagesList.getMoreMessages),\n  sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultPropsMessagesList.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultPropsMessagesList.sendingText),\n};\n\nexport const defaultProps: DSChatT.ContainerProps = {\n  messagesListProps: defaultPropsMessagesList,\n  composerProps: defaultPropsComposer,\n  actionRef: undefined,\n  autoScroll: false,\n  device: 'desktop',\n  isLoading: undefined,\n  hasMoreItems: undefined,\n  getMoreMessages: noop,\n  bannerPosition: undefined,\n  bannerProps: {\n    type: BANNER_TYPES.INFO,\n    label: 'Unread Messages',\n    viewLabel: 'View',\n    onView: noop,\n    onClose: noop,\n  },\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n};\n\nexport const ChatContainerPropTypes = {\n  ...globalAttributesPropTypes,\n  messagesListProps: PropTypes.object\n    .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n    .defaultValue(defaultProps.messagesListProps),\n  composerProps: PropTypes.object.description('Composer configuration').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.object\n    .description(\n      `Banner configuration:\n  label: string;\n  viewLabel: string;\n  type: BANNER_TYPES;\n  onView: () => void;\n  onClose: () => void;\n  `,\n    )\n    .defaultValue(defaultProps.bannerProps),\n  sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { Virtualizer } from '@tanstack/react-virtual';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { type DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport declare namespace DSChatT {\n  interface ChatBannerProps {\n    label: string;\n    viewLabel: string;\n    type?: 'info' | 'success' | 'danger' | 'warning';\n    onView: () => void;\n    onClose: () => void;\n  }\n  /**\n   * Single source of truth for the virtualizer's element generics \u2014 reused across every file that\n   * types `useVirtualHelpers`, so they can't drift out of sync with each other (which previously\n   * produced a real dts build failure: `Virtualizer<HTMLDivElement, Element>` vs `Virtualizer<Element, Element>`).\n   */\n  export type ChatVirtualizer = Virtualizer<HTMLDivElement, HTMLDivElement>;\n  export type ScrollToIndexOptions = Parameters<ChatVirtualizer['scrollToIndex']>[1];\n  export type ActionRef = React.MutableRefObject<{\n    scrollToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n    focusToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n    getMessagesInView?: () => string[];\n    focusToIndexWithoutScroll?: (index: string) => void;\n    focusToList?: () => void;\n    focusToComposer?: () => void;\n    focusToSend?: () => void;\n    focusOnBanner?: () => void;\n    focusOnBannerLink?: () => void;\n  }>;\n\n  export interface ComposerProps extends Record<string, unknown> {\n    placeholder?: string;\n    inputValue?: string;\n    ariaMaxLengthMessage?: string;\n    maxLengthMessage?: string;\n    onChange: (value: string) => void;\n    onResize?: (value: number) => void;\n    onSend: (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => void;\n    maxHeight?: number;\n    inputMaxLength?: number;\n    buttonDisabled: boolean;\n    dataTestid?: string;\n    actionRef?: ActionRef;\n  }\n\n  export interface MessagesListProps extends Record<string, unknown> {\n    messages: DSChatBubbleT.Props[];\n    actionRef: ActionRef;\n    onScrollEnds?: (indexList: string[]) => void;\n    isLoading?: 'top' | 'bottom';\n    hasMoreItems?: 'top' | 'bottom';\n    getMoreMessages: () => void;\n    sendingMessages?: Array<string | number>;\n    sendingText: string;\n    bannerPosition?: 'top' | 'bottom';\n    bannerRef?: React.MutableRefObject<{\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      focusOnWrapper: (...args: any[]) => void;\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      focusOnLink: (...args: any[]) => void;\n    }>;\n  }\n\n  export interface ContainerProps extends Record<string, unknown> {\n    messagesListProps: Pick<MessagesListProps, 'messages' | 'onScrollEnds'>;\n    composerProps: ComposerProps;\n    actionRef?: ActionRef;\n    autoScroll: boolean;\n    device: 'desktop' | 'mobile';\n    isLoading?: 'top' | 'bottom';\n    hasMoreItems?: 'top' | 'bottom';\n    getMoreMessages: () => void;\n    bannerPosition?: 'top' | 'bottom';\n    bannerProps?: ChatBannerProps;\n    sendingMessages?: string[] | number[];\n    sendingText: string;\n  }\n\n  export interface GetPaddingT {\n    hasMoreItems: string | undefined;\n    bannerPosition: string | undefined;\n    isLoading: string | undefined;\n  }\n}\n\nexport interface TextAreaProps {\n  height: string | number;\n  style: React.CSSProperties;\n}\n\nexport const defaultPropsComposer: DSChatT.ComposerProps = {\n  placeholder: 'Type your message',\n  inputValue: '',\n  ariaMaxLengthMessage: '',\n  onChange: noop,\n  onResize: noop,\n  onSend: noop,\n  onFocus: noop,\n  onBlur: noop,\n  onKeyDown: noop,\n  maxHeight: 0,\n  inputMaxLength: undefined,\n  maxLengthMessage: undefined,\n  buttonDisabled: false,\n  dataTestid: 'ds-chat-composer',\n  actionRef: undefined,\n};\n\nexport const ChatComposerPropTypes = {\n  placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultPropsComposer.placeholder),\n  inputValue: PropTypes.string.description('Input value').defaultValue(defaultPropsComposer.inputValue),\n  ariaMaxLengthMessage: PropTypes.string\n    .description('Aria message for Max length message when exceeded')\n    .defaultValue(defaultPropsComposer.maxLengthMessage),\n  maxLengthMessage: PropTypes.string\n    .description('Max length message')\n    .defaultValue(defaultPropsComposer.maxLengthMessage),\n  onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultPropsComposer.onChange),\n  onResize: PropTypes.func\n    .description('Called the input changes his height')\n    .defaultValue(defaultPropsComposer.onResize),\n  onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultPropsComposer.onSend),\n  onFocus: PropTypes.func.description('Input focus').defaultValue(defaultPropsComposer.onFocus),\n  onBlur: PropTypes.func.description('Input blur').defaultValue(defaultPropsComposer.onBlur),\n  onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultPropsComposer.onKeyDown),\n  maxHeight: PropTypes.number\n    .description('Max height of the composer. Use 0 for no limit')\n    .defaultValue(defaultPropsComposer.onBlur),\n  inputMaxLength: PropTypes.number\n    .description('Max length of the composer. `undefined` for no limit')\n    .defaultValue(defaultPropsComposer.inputMaxLength),\n  buttonDisabled: PropTypes.bool\n    .description('Control the disabled for the send button')\n    .defaultValue(defaultPropsComposer.buttonDisabled),\n  dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.placeholder),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n          getMessagesInView?: () => number[],\n          focusToIndex?: (n: number) => void,\n          focusToList?: () => void,\n          focusToComposer?: () => void,\n          focusToSend?: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultPropsComposer.actionRef),\n};\n\nexport const defaultPropsMessagesList: DSChatT.MessagesListProps = {\n  messages: [],\n  actionRef: { current: {} },\n  // we don't want this to exist \"by default\" since this loads document.addEventListener\n  // the code is already checking for this callback existence everytime it's invoked anyway\n  // onScrollEnds: () => [],\n  getMoreMessages: noop,\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n  bannerPosition: undefined,\n  bannerRef: undefined,\n};\n\nexport const ChatContainerMessagesListPropTypes = {\n  ...globalAttributesPropTypes,\n\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(defaultPropsMessagesList.messages),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToIndexWithoutScroll: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultPropsMessagesList.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(defaultPropsMessagesList.getMoreMessages),\n  sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultPropsMessagesList.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultPropsMessagesList.sendingText),\n};\n\nexport const defaultProps: DSChatT.ContainerProps = {\n  messagesListProps: defaultPropsMessagesList,\n  composerProps: defaultPropsComposer,\n  actionRef: undefined,\n  autoScroll: false,\n  device: 'desktop',\n  isLoading: undefined,\n  hasMoreItems: undefined,\n  getMoreMessages: noop,\n  bannerPosition: undefined,\n  bannerProps: {\n    type: BANNER_TYPES.INFO,\n    label: 'Unread Messages',\n    viewLabel: 'View',\n    onView: noop,\n    onClose: noop,\n  },\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n};\n\nexport const ChatContainerPropTypes = {\n  ...globalAttributesPropTypes,\n  messagesListProps: PropTypes.object\n    .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n    .defaultValue(defaultProps.messagesListProps),\n  composerProps: PropTypes.object.description('Composer configuration').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.object\n    .description(\n      `Banner configuration:\n  label: string;\n  viewLabel: string;\n  type: BANNER_TYPES;\n  onView: () => void;\n  onClose: () => void;\n  `,\n    )\n    .defaultValue(defaultProps.bannerProps),\n  sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -30,11 +30,13 @@ const ChatContainerMessagesList = (props) => {
     virtualListRef
   } = useChatContainerMessageList(props);
   const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;
-  const { totalSize, virtualItems } = useVirtualHelpers;
+  const totalSize = useVirtualHelpers.getTotalSize();
+  const virtualItems = useVirtualHelpers.getVirtualItems();
+  const { measureElement } = useVirtualHelpers;
   const newMessages = useGetNewMessages(messages);
   const render = React2.useMemo(
     () => virtualItems.map((virtualItem) => {
-      const { index, measureRef, start } = virtualItem;
+      const { index, start } = virtualItem;
       const row = messages[index];
       const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);
       const style = {
@@ -50,7 +52,7 @@ const ChatContainerMessagesList = (props) => {
           "data-element": "chat-element-list-item",
           "data-index": index,
           style,
-          innerRef: measureRef,
+          innerRef: measureElement,
           tabIndex: -1,
           onKeyDown: handleKey,
           role: "listitem",
@@ -63,7 +65,7 @@ const ChatContainerMessagesList = (props) => {
         `ds-chat-bubble-${index}-${row.dsId}-${row.type}`
       );
     }),
-    [virtualItems, messages, sendingMessages, handleKey, sendingText]
+    [virtualItems, messages, sendingMessages, handleKey, sendingText, measureElement]
   );
   return /* @__PURE__ */ jsxs(StyledWrapper, { ...globalAttributes, children: [
     /* @__PURE__ */ jsx(

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

@@ -1,7 +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 type { CSSProperties, WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { ChatBubble, BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport type { DSChatMessageDelimeterT } from '@elliemae/ds-chat-message-delimeter';\nimport { MessageDelimiter } from '@elliemae/ds-chat-message-delimeter';\nimport type { DSChatSystemMessageT } from '@elliemae/ds-chat-system-message';\nimport { SystemMessage } from '@elliemae/ds-chat-system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n  StyledNewMessagesHiddenContainer,\n} from './styled.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types.js';\nimport { useGetNewMessages } from './useGetNewMessages.js';\nimport { useChatContainerMessageList } from './useChatContainerMessageList.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\n\ntype ButtonV2InnerRefT = DSButtonV2T.Props['innerRef'];\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            innerRef={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        innerRef={virtualListRef as React.RefObject<HTMLDivElement>}\n        role=\"list\"\n        onKeyDown={handleListKey}\n      >\n        <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n          {!isLoading && hasMoreItems ? (\n            <StyledLoadMoreContainer hasMoreItems={hasMoreItems} role=\"listitem\">\n              <DSButtonV2\n                buttonType=\"outline\"\n                onClick={getMoreMessages}\n                data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n                innerRef={loadMoreRef as ButtonV2InnerRefT}\n              >\n                Load More\n              </DSButtonV2>\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.displayName = 'ChatContainerMessagesList';\nconst ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);\nChatContainerMessagesListWithSchema.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainerMessagesList, ChatContainerMessagesListWithSchema };\n"],
-  "mappings": "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",
+  "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 type { CSSProperties, WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, type DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { ChatBubble, BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport type { DSChatMessageDelimeterT } from '@elliemae/ds-chat-message-delimeter';\nimport { MessageDelimiter } from '@elliemae/ds-chat-message-delimeter';\nimport type { DSChatSystemMessageT } from '@elliemae/ds-chat-system-message';\nimport { SystemMessage } from '@elliemae/ds-chat-system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n  StyledNewMessagesHiddenContainer,\n} from './styled.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types.js';\nimport { useGetNewMessages } from './useGetNewMessages.js';\nimport { useChatContainerMessageList } from './useChatContainerMessageList.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\n\ntype ButtonV2InnerRefT = DSButtonV2T.Props['innerRef'];\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 = useVirtualHelpers.getTotalSize();\n  const virtualItems = useVirtualHelpers.getVirtualItems();\n  const { measureElement } = useVirtualHelpers;\n\n  const newMessages = useGetNewMessages(messages);\n\n  const render = React.useMemo(\n    () =>\n      virtualItems.map((virtualItem) => {\n        const { index, 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            innerRef={measureElement}\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, measureElement],\n  );\n\n  return (\n    <StyledWrapper {...globalAttributes}>\n      <StyledChatContainerContentList\n        data-testid={ChatContainerDataTestIds.THREAD_CONTAINER}\n        tabIndex={0}\n        innerRef={virtualListRef as React.RefObject<HTMLDivElement>}\n        role=\"list\"\n        onKeyDown={handleListKey}\n      >\n        <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n          {!isLoading && hasMoreItems ? (\n            <StyledLoadMoreContainer hasMoreItems={hasMoreItems} role=\"listitem\">\n              <DSButtonV2\n                buttonType=\"outline\"\n                onClick={getMoreMessages}\n                data-testid={ChatContainerDataTestIds.LOAD_MORE_BUTTON}\n                innerRef={loadMoreRef as ButtonV2InnerRefT}\n              >\n                Load More\n              </DSButtonV2>\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.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/styled.js CHANGED Viewed

@@ -18,8 +18,16 @@ const StyledWrapperListItem = styled.div`
 const StyledChatContainerContentList = styled.div`
   width: 100%;
   height: 100%;
-  padding: ${(props) => props.theme.space.xs};
-  padding-bottom: 0;
+  /**
+   * No padding-top here on purpose: this element is also react-virtual's getScrollElement, and
+   * virtual-core compares raw el.scrollTop against its own content-relative item positions with no
+   * padding awareness — a CSS top-padding on the scroll element itself desyncs those two frames,
+   * making calculateRange() (and therefore getMessagesInView()) misjudge the visible range near the
+   * top boundary by roughly the padding's own size. The equivalent top space is provided instead via
+   * the virtualizer's own paddingStart option (useChatContainerMessageList.ts), which is baked into
+   * its measurements and stays in the same frame as scrollTop.
+   */
+  padding: 0 ${(props) => props.theme.space.xs} 0 ${(props) => props.theme.space.xs};
   overflow-y: auto;
   overflow-x: hidden;
 `;

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

@@ -1,7 +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 type { DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { BUBBLE_TYPES } 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;AAEvB,SAAS,oBAAoB;AAEtB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,OAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,MAAM,GAAG;AAAA,GACpF;AAAA,IACC,CAAC,UACD,MAAM,SAAS,aAAa,aAC5B,YAAY,MAAM,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,MAAM,GAAG;AAAA,MAC5D,MAAM,MAAM,MAAM,GAAG;AAAA,GACxB;AAAA,IACC,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,GAAG;AAAA,GAClC;AAAA;AAGI,MAAM,iCAAiC,OAAO;AAAA;AAAA;AAAA,aAGxC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAMrC,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,MAAM;AAAA;AAAA;AAI5B,MAAM,0BAA0B,OAAO;AAAA;AAAA,uBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,aAC1C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,WAClC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,YAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA,IAIxC,CAAC,UAAW,MAAM,iBAAiB,QAAQ,YAAY,EAAG;AAAA,IAC1D,CAAC,UAAW,MAAM,iBAAiB,WAAW,eAAe,EAAG;AAAA;AAE7D,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { BUBBLE_TYPES } 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  /**\n   * No padding-top here on purpose: this element is also react-virtual's getScrollElement, and\n   * virtual-core compares raw el.scrollTop against its own content-relative item positions with no\n   * padding awareness \u2014 a CSS top-padding on the scroll element itself desyncs those two frames,\n   * making calculateRange() (and therefore getMessagesInView()) misjudge the visible range near the\n   * top boundary by roughly the padding's own size. The equivalent top space is provided instead via\n   * the virtualizer's own paddingStart option (useChatContainerMessageList.ts), which is baked into\n   * its measurements and stays in the same frame as scrollTop.\n   */\n  padding: 0 ${(props) => props.theme.space.xs} 0 ${(props) => props.theme.space.xs};\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;AAEvB,SAAS,oBAAoB;AAEtB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,OAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,MAAM,GAAG;AAAA,GACpF;AAAA,IACC,CAAC,UACD,MAAM,SAAS,aAAa,aAC5B,YAAY,MAAM,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,MAAM,GAAG;AAAA,MAC5D,MAAM,MAAM,MAAM,GAAG;AAAA,GACxB;AAAA,IACC,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,GAAG;AAAA,GAClC;AAAA;AAGI,MAAM,iCAAiC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAYtC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE,MAAM,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAK5E,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,MAAM;AAAA;AAAA;AAI5B,MAAM,0BAA0B,OAAO;AAAA;AAAA,uBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,aAC1C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,WAClC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,YAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA,IAIxC,CAAC,UAAW,MAAM,iBAAiB,QAAQ,YAAY,EAAG;AAAA,IAC1D,CAAC,UAAW,MAAM,iBAAiB,WAAW,eAAe,EAAG;AAAA;AAE7D,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -7,7 +7,8 @@ const useActionRef = ({
   updateCache,
   getMessagesInView,
   onlyFocus,
-  scrollAndFocus
+  scrollAndFocus,
+  hasVirtualItems
 }) => {
   React2.useEffect(() => {
     if (actionRef && actionRef.current) {
@@ -28,12 +29,14 @@ const useActionRef = ({
       };
       actionRef.current.scrollToIndex = scrollToIndex;
       actionRef.current.getMessagesInView = getMessagesInView;
-      updateCache();
       actionRef.current.focusToIndex = focusToIndex;
       actionRef.current.focusToIndexWithoutScroll = onlyFocus;
       actionRef.current.focusToList = focusToList;
     }
-  }, [actionRef, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);
+  }, [actionRef, getMessagesInView, onlyFocus, scrollAndFocus, updateCache, vScroll, virtualListRef]);
+  React2.useEffect(() => {
+    if (hasVirtualItems) updateCache();
+  }, [hasVirtualItems, updateCache]);
 };
 export {
   useActionRef

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

@@ -1,7 +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 type { useVirtual } from 'react-virtual';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\n\ntype UseActionRefArgs = {\n  actionRef: DSChatT.ActionRef;\n  useVirtualHelpers: ReturnType<typeof useVirtual>;\n  virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n  updateCache: () => void;\n  getMessagesInView: () => 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  updateCache,\n  getMessagesInView,\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        setTimeout(() => {\n          vScroll(index, opts);\n          /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n           * requestAnimationFrame is needed because the first scroll might not calculate positions\n           * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n           * frame, we ensure that:\n           * 1. The DOM has been updated with new positions after the first scroll\n           * 2. Element height and position measurements are accurate\n           * 3. The second scroll can center the element with correct measurements\n           *\n           * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n           * synchronization better. This RAF workaround might not be necessary with v3.\n           */\n          requestAnimationFrame(() => {\n            vScroll(index, opts);\n            updateCache();\n          });\n        }, 0);\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 = getMessagesInView;\n      updateCache(); // populate cache immediately on mount \u2014 leading throttle fires synchronously\n      actionRef.current.focusToIndex = focusToIndex;\n      actionRef.current.focusToIndexWithoutScroll = onlyFocus;\n      actionRef.current.focusToList = focusToList;\n    }\n  }, [actionRef, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAcX,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;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,mBAAW,MAAM;AACf,kBAAQ,OAAO,IAAI;AAYnB,gCAAsB,MAAM;AAC1B,oBAAQ,OAAO,IAAI;AACnB,wBAAY;AAAA,UACd,CAAC;AAAA,QACH,GAAG,CAAC;AAAA,MACN;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;AACtC,kBAAY;AACZ,gBAAU,QAAQ,eAAe;AACjC,gBAAU,QAAQ,4BAA4B;AAC9C,gBAAU,QAAQ,cAAc;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,WAAW,aAAa,mBAAmB,WAAW,gBAAgB,SAAS,cAAc,CAAC;AACpG;",
+  "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 type { DSChatT } from '../../react-desc-prop-types.js';\n\ntype UseActionRefArgs = {\n  actionRef: DSChatT.ActionRef;\n  useVirtualHelpers: DSChatT.ChatVirtualizer;\n  virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n  updateCache: () => void;\n  getMessagesInView: () => string[];\n  onlyFocus: (index: string) => void;\n  scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n  hasVirtualItems: boolean;\n};\n\nexport const useActionRef = ({\n  actionRef,\n  useVirtualHelpers: { scrollToIndex: vScroll },\n  virtualListRef,\n  updateCache,\n  getMessagesInView,\n  onlyFocus,\n  scrollAndFocus,\n  hasVirtualItems,\n}: UseActionRefArgs) => {\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      const scrollToIndex: DSChatT.ActionRef['current']['scrollToIndex'] = (index, opts = { align: 'center' }) => {\n        setTimeout(() => {\n          vScroll(index, opts);\n          /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n           * requestAnimationFrame is needed because the first scroll might not calculate positions\n           * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n           * frame, we ensure that:\n           * 1. The DOM has been updated with new positions after the first scroll\n           * 2. Element height and position measurements are accurate\n           * 3. The second scroll can center the element with correct measurements\n           *\n           * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n           * synchronization better. This RAF workaround might not be necessary with v3.\n           */\n          requestAnimationFrame(() => {\n            vScroll(index, opts);\n            updateCache();\n          });\n        }, 0);\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 = getMessagesInView;\n      actionRef.current.focusToIndex = focusToIndex;\n      actionRef.current.focusToIndexWithoutScroll = onlyFocus;\n      actionRef.current.focusToList = focusToList;\n    }\n  }, [actionRef, getMessagesInView, onlyFocus, scrollAndFocus, updateCache, vScroll, virtualListRef]);\n\n  /**\n   * Populates the visible-items cache once the virtualizer has actually rendered rows. Unlike v2 \u2014\n   * whose calculateRange never gated on the scroll container's measured size, so it always rendered\n   * overscan+1 rows synchronously on the first commit \u2014 v3 gates rendering on a real, measured\n   * container size, so `getVirtualItems()` is empty for the first render(s) until that measurement\n   * resolves (confirmed empirically: 2 empty renders observed before the first non-empty one).\n   * Calling updateCache() unconditionally on mount (the v2-era approach) raced this and cached an\n   * empty list, which Shift+Tab-from-composer then read once and never revisited.\n   *\n   * Residual, narrower risk: interacting with the thread in the brief window before `hasVirtualItems`\n   * flips true (the first render, before real layout exists) still finds an empty cache \u2014 this is a\n   * known, accepted limitation of `onlyFocus`'s querySelector-based focus lookup, not something this\n   * migration introduces new architecture to close. See KNOWN_INTENTIONAL_DEVIATIONS.md.\n   */\n  React.useEffect(() => {\n    if (hasVirtualItems) updateCache();\n  }, [hasVirtualItems, updateCache]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAcX,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;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,mBAAW,MAAM;AACf,kBAAQ,OAAO,IAAI;AAYnB,gCAAsB,MAAM;AAC1B,oBAAQ,OAAO,IAAI;AACnB,wBAAY;AAAA,UACd,CAAC;AAAA,QACH,GAAG,CAAC;AAAA,MACN;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;AACtC,gBAAU,QAAQ,eAAe;AACjC,gBAAU,QAAQ,4BAA4B;AAC9C,gBAAU,QAAQ,cAAc;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,WAAW,mBAAmB,WAAW,gBAAgB,aAAa,SAAS,cAAc,CAAC;AAgBlG,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,gBAAiB,aAAY;AAAA,EACnC,GAAG,CAAC,iBAAiB,WAAW,CAAC;AACnC;",
   "names": ["React"]
 }

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

@@ -1,11 +1,12 @@
 import * as React from "react";
 import React2 from "react";
+import { useTheme } from "styled-components";
 import {
   useMemoMergePropsWithDefault,
   useGetGlobalAttributes,
   useValidateTypescriptPropTypes
 } from "@elliemae/ds-props-helpers";
-import { useVirtual } from "react-virtual";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { useActionRef } from "./useActionRef.js";
 import { useGlobalEventListener } from "./useGlobalEventListener.js";
 import { useKeyboard } from "./useKeyboard.js";
@@ -33,13 +34,16 @@ const useChatContainerMessageList = (props) => {
   const virtualListRef = React2.useRef();
   const pendingOnScroll = React2.useRef(false);
   const { bannerPosition, messages, actionRef, hasMoreItems, isLoading } = propsWithDefault;
-  const useVirtualHelpers = useVirtual({
-    size: messages?.length,
-    parentRef: virtualListRef,
+  const theme = useTheme();
+  const containerPaddingStart = parseInt(theme.space.xs, 10);
+  const padding = getPadding({ hasMoreItems, bannerPosition, isLoading });
+  const useVirtualHelpers = useVirtualizer({
+    count: messages?.length ?? 0,
+    getScrollElement: () => virtualListRef.current ?? null,
     overscan: 15,
-    ...getPadding({ hasMoreItems, bannerPosition, isLoading }),
-    // estimateSize should not be really required given what was stated on
-    // https://github.com/tannerlinsley/react-virtual/issues/23
+    paddingStart: padding.paddingStart + containerPaddingStart,
+    paddingEnd: padding.paddingEnd,
+    // Unlike v2, v3 has no internal default for estimateSize — it's required, not optional.
     estimateSize: React2.useCallback(() => 80, [])
   });
   const { onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll } = useFocusAndScrollHelpers({
@@ -55,7 +59,8 @@ const useChatContainerMessageList = (props) => {
     updateCache,
     getMessagesInView,
     onlyFocus,
-    scrollAndFocus
+    scrollAndFocus,
+    hasVirtualItems: useVirtualHelpers.getVirtualItems().length > 0
   });
   useGlobalEventListener({
     propsWithDefault,

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

@@ -1,7 +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-props-helpers';\nimport { useVirtual } from 'react-virtual';\nimport { useActionRef } from './useActionRef.js';\nimport { useGlobalEventListener } from './useGlobalEventListener.js';\nimport { useKeyboard } from './useKeyboard.js';\nimport { useFocusAndScrollHelpers } from './useFocusAndScrollHelpers.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from '../../react-desc-prop-types.js';\nimport { DSChatContainerMessagesList } from '../../DSChatContainerDefinitions.js';\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>(\n    propsWithDefault,\n    ChatContainerMessagesListPropTypes,\n    DSChatContainerMessagesList,\n  );\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, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll } =\n    useFocusAndScrollHelpers({\n      propsWithDefault,\n      useVirtualHelpers,\n      pendingOnScroll,\n      virtualListRef,\n    });\n\n  useActionRef({\n    actionRef,\n    useVirtualHelpers,\n    virtualListRef,\n    updateCache,\n    getMessagesInView,\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    getMessagesInView,\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;AAEzC,SAAS,oCAAoC,gCAAgC;AAC7E,SAAS,mCAAmC;AAE5C,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,EAAG,SAAQ,eAAe;AAAA,WAC5F,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,QAAQ,EAAG,SAAQ,aAAa;AAC3G,SAAO;AACT;AAUO,MAAM,8BAA2D,CAAC,UAAU;AACjF,QAAM,mBAAmB,6BAAwD,OAAO,wBAAwB;AAChH;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,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;AAAA;AAAA,IAGzD,cAAcA,OAAM,YAAY,MAAM,IAAI,CAAC,CAAC;AAAA,EAC9C,CAAC;AAED,QAAM,EAAE,cAAc,aAAa,mBAAmB,WAAW,gBAAgB,qBAAqB,IACpG,yBAAyB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,eAAa;AAAA,IACX;AAAA,IACA;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;",
+  "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 { useTheme } from 'styled-components';\nimport {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { useActionRef } from './useActionRef.js';\nimport { useGlobalEventListener } from './useGlobalEventListener.js';\nimport { useKeyboard } from './useKeyboard.js';\nimport { useFocusAndScrollHelpers } from './useFocusAndScrollHelpers.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from '../../react-desc-prop-types.js';\nimport { DSChatContainerMessagesList } from '../../DSChatContainerDefinitions.js';\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: DSChatT.ChatVirtualizer;\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>(\n    propsWithDefault,\n    ChatContainerMessagesListPropTypes,\n    DSChatContainerMessagesList,\n  );\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 theme = useTheme();\n  // The scroll container's own CSS top-padding was removed (see styled.ts's StyledChatContainerContentList)\n  // and replaced with this \u2014 an equivalent virtualizer-space paddingStart keeps calculateRange()'s\n  // scrollOffset comparisons in the same frame as its item measurements.\n  const containerPaddingStart = parseInt(theme.space.xs, 10);\n  const padding = getPadding({ hasMoreItems, bannerPosition, isLoading });\n  const useVirtualHelpers = useVirtualizer<HTMLDivElement, HTMLDivElement>({\n    count: messages?.length ?? 0,\n    getScrollElement: () => virtualListRef.current ?? null,\n    overscan: 15,\n    paddingStart: padding.paddingStart + containerPaddingStart,\n    paddingEnd: padding.paddingEnd,\n    // Unlike v2, v3 has no internal default for estimateSize \u2014 it's required, not optional.\n    estimateSize: React.useCallback(() => 80, []),\n  });\n\n  const { onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll } =\n    useFocusAndScrollHelpers({\n      propsWithDefault,\n      useVirtualHelpers,\n      pendingOnScroll,\n      virtualListRef,\n    });\n\n  useActionRef({\n    actionRef,\n    useVirtualHelpers,\n    virtualListRef,\n    updateCache,\n    getMessagesInView,\n    onlyFocus,\n    scrollAndFocus,\n    hasVirtualItems: useVirtualHelpers.getVirtualItems().length > 0,\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    getMessagesInView,\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,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AAEzC,SAAS,oCAAoC,gCAAgC;AAC7E,SAAS,mCAAmC;AAE5C,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,EAAG,SAAQ,eAAe;AAAA,WAC5F,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,QAAQ,EAAG,SAAQ,aAAa;AAC3G,SAAO;AACT;AAUO,MAAM,8BAA2D,CAAC,UAAU;AACjF,QAAM,mBAAmB,6BAAwD,OAAO,wBAAwB;AAChH;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,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,QAAQ,SAAS;AAIvB,QAAM,wBAAwB,SAAS,MAAM,MAAM,IAAI,EAAE;AACzD,QAAM,UAAU,WAAW,EAAE,cAAc,gBAAgB,UAAU,CAAC;AACtE,QAAM,oBAAoB,eAA+C;AAAA,IACvE,OAAO,UAAU,UAAU;AAAA,IAC3B,kBAAkB,MAAM,eAAe,WAAW;AAAA,IAClD,UAAU;AAAA,IACV,cAAc,QAAQ,eAAe;AAAA,IACrC,YAAY,QAAQ;AAAA;AAAA,IAEpB,cAAcA,OAAM,YAAY,MAAM,IAAI,CAAC,CAAC;AAAA,EAC9C,CAAC;AAED,QAAM,EAAE,cAAc,aAAa,mBAAmB,WAAW,gBAAgB,qBAAqB,IACpG,yBAAyB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,eAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB,kBAAkB,gBAAgB,EAAE,SAAS;AAAA,EAChE,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 CHANGED Viewed

@@ -3,7 +3,7 @@ import React2 from "react";
 import { debounce, throttle } from "lodash-es";
 const useFocusAndScrollHelpers = ({
   propsWithDefault: { onScrollEnds },
-  useVirtualHelpers: { scrollToIndex: vScroll },
+  useVirtualHelpers: { scrollToIndex: vScroll, calculateRange },
   pendingOnScroll,
   virtualListRef
 }) => {
@@ -12,18 +12,13 @@ const useFocusAndScrollHelpers = ({
       pendingOnScroll.current = true;
       return [];
     }
-    if (!virtualListRef.current) return [];
+    const range = calculateRange();
+    if (!range) 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 || "");
-    });
+    for (let index = range.startIndex; index <= range.endIndex; index += 1) indexList.push(String(index));
     return indexList;
-  }, [pendingOnScroll, virtualListRef]);
+  }, [calculateRange, pendingOnScroll]);
   const visibleItemsCache = React2.useRef([]);
   const updateCache = React2.useMemo(
     () => throttle(

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

@@ -1,7 +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 type { useVirtual } from 'react-virtual';\nimport { debounce, throttle } from 'lodash-es';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\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  // Pure DOM read \u2014 no side effects beyond pendingOnScroll flag and getBoundingClientRect queries.\n  const computeVisibleItems = React.useCallback((): 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    const list = virtualListRef.current.querySelectorAll<HTMLElement>('[data-element=\"chat-element-list-item\"]');\n    const indexList: string[] = [];\n    list.forEach((item: HTMLElement) => {\n      const { top: itemTop } = item.getBoundingClientRect();\n      const itemPadding = 10;\n      if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || '');\n    });\n    return indexList;\n  }, [pendingOnScroll, virtualListRef]);\n\n  // Throttled with leading: populates the cache immediately on first call and keeps it\n  // fresh. No side effects beyond DOM reads \u2014 onScrollEnds is not involved.\n  const visibleItemsCache = React.useRef<string[]>([]);\n  const updateCache = React.useMemo(\n    () =>\n      throttle(\n        () => {\n          visibleItemsCache.current = computeVisibleItems();\n        },\n        500,\n        { leading: true },\n      ),\n    [computeVisibleItems],\n  );\n\n  // Synchronous getter \u2014 returns a copy so callers using .pop()/.shift() don't mutate the cache.\n  const getMessagesInView = React.useCallback((): string[] => [...visibleItemsCache.current], []);\n\n  // Debounced trailing: notifies onScrollEnds consumers after scrolling settles.\n  // Semantics and timing unchanged \u2014 this path is isolated from the cache.\n  const onScrollStop = React.useMemo(\n    () =>\n      debounce((): string[] => {\n        const indexList = computeVisibleItems();\n        if (onScrollEnds) onScrollEnds(indexList);\n        return indexList;\n      }, 500),\n    [computeVisibleItems, onScrollEnds],\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      /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n       * requestAnimationFrame is needed because the first scroll might not calculate positions\n       * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n       * frame, we ensure that:\n       * 1. The DOM has been updated with new positions after the first scroll\n       * 2. Element height and position measurements are accurate\n       * 3. The second scroll can center the element with correct measurements\n       *\n       * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n       * synchronization better. This RAF workaround might not be necessary with v3.\n       */\n      requestAnimationFrame(() => {\n        vScroll(index, { align: 'center' });\n      });\n\n      setTimeout(() => {\n        onlyFocus(index.toString());\n      }, 300);\n\n      updateCache();\n    },\n    [updateCache, onlyFocus, vScroll],\n  );\n\n  const checkPendingOnScroll = React.useCallback(() => {\n    if (pendingOnScroll.current === true) {\n      updateCache();\n      onScrollStop();\n    }\n  }, [updateCache, onScrollStop, pendingOnScroll]);\n\n  return React.useMemo(\n    () => ({\n      onScrollStop,\n      updateCache,\n      getMessagesInView,\n      onlyFocus,\n      scrollAndFocus,\n      checkPendingOnScroll,\n    }),\n    [onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAElB,SAAS,UAAU,gBAAgB;AAU5B,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE,aAAa;AAAA,EACjC,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AACF,MAAoC;AAElC,QAAM,sBAAsBA,OAAM,YAAY,MAAgB;AAC5D,QAAI,SAAS,oBAAoB,UAAU;AACzC,sBAAgB,UAAU;AAC1B,aAAO,CAAC;AAAA,IACV;AACA,QAAI,CAAC,eAAe,QAAS,QAAO,CAAC;AACrC,oBAAgB,UAAU;AAC1B,UAAM,EAAE,QAAQ,IAAI,IAAI,eAAe,QAAQ,sBAAsB;AACrE,UAAM,OAAO,eAAe,QAAQ,iBAA8B,yCAAyC;AAC3G,UAAM,YAAsB,CAAC;AAC7B,SAAK,QAAQ,CAAC,SAAsB;AAClC,YAAM,EAAE,KAAK,QAAQ,IAAI,KAAK,sBAAsB;AACpD,YAAM,cAAc;AACpB,UAAI,UAAU,cAAc,UAAU,UAAU,cAAc,IAAK,WAAU,KAAK,KAAK,QAAQ,SAAS,EAAE;AAAA,IAC5G,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAIpC,QAAM,oBAAoBA,OAAM,OAAiB,CAAC,CAAC;AACnD,QAAM,cAAcA,OAAM;AAAA,IACxB,MACE;AAAA,MACE,MAAM;AACJ,0BAAkB,UAAU,oBAAoB;AAAA,MAClD;AAAA,MACA;AAAA,MACA,EAAE,SAAS,KAAK;AAAA,IAClB;AAAA,IACF,CAAC,mBAAmB;AAAA,EACtB;AAGA,QAAM,oBAAoBA,OAAM,YAAY,MAAgB,CAAC,GAAG,kBAAkB,OAAO,GAAG,CAAC,CAAC;AAI9F,QAAM,eAAeA,OAAM;AAAA,IACzB,MACE,SAAS,MAAgB;AACvB,YAAM,YAAY,oBAAoB;AACtC,UAAI,aAAc,cAAa,SAAS;AACxC,aAAO;AAAA,IACT,GAAG,GAAG;AAAA,IACR,CAAC,qBAAqB,YAAY;AAAA,EACpC;AAEA,QAAM,YAAYA,OAAM;AAAA,IACtB,CAAC,UAAkB;AACjB,MAAC,eAAe,SAAS,cAAc,gBAAgB,KAAK,IAAI,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;AAYlC,4BAAsB,MAAM;AAC1B,gBAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAAA,MACpC,CAAC;AAED,iBAAW,MAAM;AACf,kBAAU,MAAM,SAAS,CAAC;AAAA,MAC5B,GAAG,GAAG;AAEN,kBAAY;AAAA,IACd;AAAA,IACA,CAAC,aAAa,WAAW,OAAO;AAAA,EAClC;AAEA,QAAM,uBAAuBA,OAAM,YAAY,MAAM;AACnD,QAAI,gBAAgB,YAAY,MAAM;AACpC,kBAAY;AACZ,mBAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,aAAa,mBAAmB,WAAW,gBAAgB,oBAAoB;AAAA,EAChG;AACF;",
+  "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 { debounce, throttle } from 'lodash-es';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\n\ntype UseFocusAndScrollHelpersArgs = {\n  propsWithDefault: DSChatT.MessagesListProps;\n  useVirtualHelpers: DSChatT.ChatVirtualizer;\n  pendingOnScroll: React.MutableRefObject<boolean>;\n  virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n};\n\nexport const useFocusAndScrollHelpers = ({\n  propsWithDefault: { onScrollEnds },\n  useVirtualHelpers: { scrollToIndex: vScroll, calculateRange },\n  pendingOnScroll,\n  virtualListRef,\n}: UseFocusAndScrollHelpersArgs) => {\n  /**\n   * `calculateRange()` is the virtualizer's own pre-overscan viewport calculation (pure scroll\n   * geometry, no DOM scraping) \u2014 mirrors the pattern already shipped in ds-fast-list/ds-virtual-list\n   * (PUI-17898's `actionRef.getVisibleItems`). It returns `null` before the container's first real\n   * measurement, same gating condition `getVirtualItems()` uses (see useActionRef.ts's\n   * `hasVirtualItems`). Replaces the previous `getBoundingClientRect()`/`querySelectorAll` DOM scan,\n   * which re-measured real layout on every call instead of reading the virtualizer's own tracked\n   * scroll state.\n   */\n  const computeVisibleItems = React.useCallback((): string[] => {\n    if (document.visibilityState === 'hidden') {\n      pendingOnScroll.current = true;\n      return [];\n    }\n    const range = calculateRange();\n    if (!range) return [];\n    pendingOnScroll.current = false;\n    const indexList: string[] = [];\n    for (let index = range.startIndex; index <= range.endIndex; index += 1) indexList.push(String(index));\n    return indexList;\n  }, [calculateRange, pendingOnScroll]);\n\n  // Throttled with leading: populates the cache immediately on first call and keeps it\n  // fresh. No side effects beyond DOM reads \u2014 onScrollEnds is not involved.\n  const visibleItemsCache = React.useRef<string[]>([]);\n  const updateCache = React.useMemo(\n    () =>\n      throttle(\n        () => {\n          visibleItemsCache.current = computeVisibleItems();\n        },\n        500,\n        { leading: true },\n      ),\n    [computeVisibleItems],\n  );\n\n  // Synchronous getter \u2014 returns a copy so callers using .pop()/.shift() don't mutate the cache.\n  const getMessagesInView = React.useCallback((): string[] => [...visibleItemsCache.current], []);\n\n  // Debounced trailing: notifies onScrollEnds consumers after scrolling settles.\n  // Semantics and timing unchanged \u2014 this path is isolated from the cache.\n  const onScrollStop = React.useMemo(\n    () =>\n      debounce((): string[] => {\n        const indexList = computeVisibleItems();\n        if (onScrollEnds) onScrollEnds(indexList);\n        return indexList;\n      }, 500),\n    [computeVisibleItems, onScrollEnds],\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      /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n       * requestAnimationFrame is needed because the first scroll might not calculate positions\n       * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n       * frame, we ensure that:\n       * 1. The DOM has been updated with new positions after the first scroll\n       * 2. Element height and position measurements are accurate\n       * 3. The second scroll can center the element with correct measurements\n       *\n       * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n       * synchronization better. This RAF workaround might not be necessary with v3.\n       */\n      requestAnimationFrame(() => {\n        vScroll(index, { align: 'center' });\n      });\n\n      setTimeout(() => {\n        onlyFocus(index.toString());\n      }, 300);\n\n      updateCache();\n    },\n    [updateCache, onlyFocus, vScroll],\n  );\n\n  const checkPendingOnScroll = React.useCallback(() => {\n    if (pendingOnScroll.current === true) {\n      updateCache();\n      onScrollStop();\n    }\n  }, [updateCache, onScrollStop, pendingOnScroll]);\n\n  return React.useMemo(\n    () => ({\n      onScrollStop,\n      updateCache,\n      getMessagesInView,\n      onlyFocus,\n      scrollAndFocus,\n      checkPendingOnScroll,\n    }),\n    [onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAClB,SAAS,UAAU,gBAAgB;AAU5B,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE,aAAa;AAAA,EACjC,mBAAmB,EAAE,eAAe,SAAS,eAAe;AAAA,EAC5D;AAAA,EACA;AACF,MAAoC;AAUlC,QAAM,sBAAsBA,OAAM,YAAY,MAAgB;AAC5D,QAAI,SAAS,oBAAoB,UAAU;AACzC,sBAAgB,UAAU;AAC1B,aAAO,CAAC;AAAA,IACV;AACA,UAAM,QAAQ,eAAe;AAC7B,QAAI,CAAC,MAAO,QAAO,CAAC;AACpB,oBAAgB,UAAU;AAC1B,UAAM,YAAsB,CAAC;AAC7B,aAAS,QAAQ,MAAM,YAAY,SAAS,MAAM,UAAU,SAAS,EAAG,WAAU,KAAK,OAAO,KAAK,CAAC;AACpG,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAIpC,QAAM,oBAAoBA,OAAM,OAAiB,CAAC,CAAC;AACnD,QAAM,cAAcA,OAAM;AAAA,IACxB,MACE;AAAA,MACE,MAAM;AACJ,0BAAkB,UAAU,oBAAoB;AAAA,MAClD;AAAA,MACA;AAAA,MACA,EAAE,SAAS,KAAK;AAAA,IAClB;AAAA,IACF,CAAC,mBAAmB;AAAA,EACtB;AAGA,QAAM,oBAAoBA,OAAM,YAAY,MAAgB,CAAC,GAAG,kBAAkB,OAAO,GAAG,CAAC,CAAC;AAI9F,QAAM,eAAeA,OAAM;AAAA,IACzB,MACE,SAAS,MAAgB;AACvB,YAAM,YAAY,oBAAoB;AACtC,UAAI,aAAc,cAAa,SAAS;AACxC,aAAO;AAAA,IACT,GAAG,GAAG;AAAA,IACR,CAAC,qBAAqB,YAAY;AAAA,EACpC;AAEA,QAAM,YAAYA,OAAM;AAAA,IACtB,CAAC,UAAkB;AACjB,MAAC,eAAe,SAAS,cAAc,gBAAgB,KAAK,IAAI,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;AAYlC,4BAAsB,MAAM;AAC1B,gBAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAAA,MACpC,CAAC;AAED,iBAAW,MAAM;AACf,kBAAU,MAAM,SAAS,CAAC;AAAA,MAC5B,GAAG,GAAG;AAEN,kBAAY;AAAA,IACd;AAAA,IACA,CAAC,aAAa,WAAW,OAAO;AAAA,EAClC;AAEA,QAAM,uBAAuBA,OAAM,YAAY,MAAM;AACnD,QAAI,gBAAgB,YAAY,MAAM;AACpC,kBAAY;AACZ,mBAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,aAAa,mBAAmB,WAAW,gBAAgB,oBAAoB;AAAA,EAChG;AACF;",
   "names": ["React"]
 }

package/dist/esm/react-desc-prop-types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { useVirtual } from 'react-virtual';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { type DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport declare namespace DSChatT {\n  interface ChatBannerProps {\n    label: string;\n    viewLabel: string;\n    type?: 'info' | 'success' | 'danger' | 'warning';\n    onView: () => void;\n    onClose: () => void;\n  }\n  export type ScrollToIndexOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n  export type ActionRef = React.MutableRefObject<{\n    scrollToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n    focusToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n    getMessagesInView?: () => string[];\n    focusToIndexWithoutScroll?: (index: string) => void;\n    focusToList?: () => void;\n    focusToComposer?: () => void;\n    focusToSend?: () => void;\n    focusOnBanner?: () => void;\n    focusOnBannerLink?: () => void;\n  }>;\n\n  export interface ComposerProps extends Record<string, unknown> {\n    placeholder?: string;\n    inputValue?: string;\n    ariaMaxLengthMessage?: string;\n    maxLengthMessage?: string;\n    onChange: (value: string) => void;\n    onResize?: (value: number) => void;\n    onSend: (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => void;\n    maxHeight?: number;\n    inputMaxLength?: number;\n    buttonDisabled: boolean;\n    dataTestid?: string;\n    actionRef?: ActionRef;\n  }\n\n  export interface MessagesListProps extends Record<string, unknown> {\n    messages: DSChatBubbleT.Props[];\n    actionRef: ActionRef;\n    onScrollEnds?: (indexList: string[]) => void;\n    isLoading?: 'top' | 'bottom';\n    hasMoreItems?: 'top' | 'bottom';\n    getMoreMessages: () => void;\n    sendingMessages?: Array<string | number>;\n    sendingText: string;\n    bannerPosition?: 'top' | 'bottom';\n    bannerRef?: React.MutableRefObject<{\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      focusOnWrapper: (...args: any[]) => void;\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      focusOnLink: (...args: any[]) => void;\n    }>;\n  }\n\n  export interface ContainerProps extends Record<string, unknown> {\n    messagesListProps: Pick<MessagesListProps, 'messages' | 'onScrollEnds'>;\n    composerProps: ComposerProps;\n    actionRef?: ActionRef;\n    autoScroll: boolean;\n    device: 'desktop' | 'mobile';\n    isLoading?: 'top' | 'bottom';\n    hasMoreItems?: 'top' | 'bottom';\n    getMoreMessages: () => void;\n    bannerPosition?: 'top' | 'bottom';\n    bannerProps?: ChatBannerProps;\n    sendingMessages?: string[] | number[];\n    sendingText: string;\n  }\n\n  export interface GetPaddingT {\n    hasMoreItems: string | undefined;\n    bannerPosition: string | undefined;\n    isLoading: string | undefined;\n  }\n}\n\nexport interface TextAreaProps {\n  height: string | number;\n  style: React.CSSProperties;\n}\n\nexport const defaultPropsComposer: DSChatT.ComposerProps = {\n  placeholder: 'Type your message',\n  inputValue: '',\n  ariaMaxLengthMessage: '',\n  onChange: noop,\n  onResize: noop,\n  onSend: noop,\n  onFocus: noop,\n  onBlur: noop,\n  onKeyDown: noop,\n  maxHeight: 0,\n  inputMaxLength: undefined,\n  maxLengthMessage: undefined,\n  buttonDisabled: false,\n  dataTestid: 'ds-chat-composer',\n  actionRef: undefined,\n};\n\nexport const ChatComposerPropTypes = {\n  placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultPropsComposer.placeholder),\n  inputValue: PropTypes.string.description('Input value').defaultValue(defaultPropsComposer.inputValue),\n  ariaMaxLengthMessage: PropTypes.string\n    .description('Aria message for Max length message when exceeded')\n    .defaultValue(defaultPropsComposer.maxLengthMessage),\n  maxLengthMessage: PropTypes.string\n    .description('Max length message')\n    .defaultValue(defaultPropsComposer.maxLengthMessage),\n  onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultPropsComposer.onChange),\n  onResize: PropTypes.func\n    .description('Called the input changes his height')\n    .defaultValue(defaultPropsComposer.onResize),\n  onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultPropsComposer.onSend),\n  onFocus: PropTypes.func.description('Input focus').defaultValue(defaultPropsComposer.onFocus),\n  onBlur: PropTypes.func.description('Input blur').defaultValue(defaultPropsComposer.onBlur),\n  onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultPropsComposer.onKeyDown),\n  maxHeight: PropTypes.number\n    .description('Max height of the composer. Use 0 for no limit')\n    .defaultValue(defaultPropsComposer.onBlur),\n  inputMaxLength: PropTypes.number\n    .description('Max length of the composer. `undefined` for no limit')\n    .defaultValue(defaultPropsComposer.inputMaxLength),\n  buttonDisabled: PropTypes.bool\n    .description('Control the disabled for the send button')\n    .defaultValue(defaultPropsComposer.buttonDisabled),\n  dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.placeholder),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n          getMessagesInView?: () => number[],\n          focusToIndex?: (n: number) => void,\n          focusToList?: () => void,\n          focusToComposer?: () => void,\n          focusToSend?: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultPropsComposer.actionRef),\n};\n\nexport const defaultPropsMessagesList: DSChatT.MessagesListProps = {\n  messages: [],\n  actionRef: { current: {} },\n  // we don't want this to exist \"by default\" since this loads document.addEventListener\n  // the code is already checking for this callback existence everytime it's invoked anyway\n  // onScrollEnds: () => [],\n  getMoreMessages: noop,\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n  bannerPosition: undefined,\n  bannerRef: undefined,\n};\n\nexport const ChatContainerMessagesListPropTypes = {\n  ...globalAttributesPropTypes,\n\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(defaultPropsMessagesList.messages),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToIndexWithoutScroll: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultPropsMessagesList.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(defaultPropsMessagesList.getMoreMessages),\n  sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultPropsMessagesList.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultPropsMessagesList.sendingText),\n};\n\nexport const defaultProps: DSChatT.ContainerProps = {\n  messagesListProps: defaultPropsMessagesList,\n  composerProps: defaultPropsComposer,\n  actionRef: undefined,\n  autoScroll: false,\n  device: 'desktop',\n  isLoading: undefined,\n  hasMoreItems: undefined,\n  getMoreMessages: noop,\n  bannerPosition: undefined,\n  bannerProps: {\n    type: BANNER_TYPES.INFO,\n    label: 'Unread Messages',\n    viewLabel: 'View',\n    onView: noop,\n    onClose: noop,\n  },\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n};\n\nexport const ChatContainerPropTypes = {\n  ...globalAttributesPropTypes,\n  messagesListProps: PropTypes.object\n    .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n    .defaultValue(defaultProps.messagesListProps),\n  composerProps: PropTypes.object.description('Composer configuration').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.object\n    .description(\n      `Banner configuration:\n  label: string;\n  viewLabel: string;\n  type: BANNER_TYPES;\n  onView: () => void;\n  onClose: () => void;\n  `,\n    )\n    .defaultValue(defaultProps.bannerProps),\n  sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { Virtualizer } from '@tanstack/react-virtual';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { type DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport declare namespace DSChatT {\n  interface ChatBannerProps {\n    label: string;\n    viewLabel: string;\n    type?: 'info' | 'success' | 'danger' | 'warning';\n    onView: () => void;\n    onClose: () => void;\n  }\n  /**\n   * Single source of truth for the virtualizer's element generics \u2014 reused across every file that\n   * types `useVirtualHelpers`, so they can't drift out of sync with each other (which previously\n   * produced a real dts build failure: `Virtualizer<HTMLDivElement, Element>` vs `Virtualizer<Element, Element>`).\n   */\n  export type ChatVirtualizer = Virtualizer<HTMLDivElement, HTMLDivElement>;\n  export type ScrollToIndexOptions = Parameters<ChatVirtualizer['scrollToIndex']>[1];\n  export type ActionRef = React.MutableRefObject<{\n    scrollToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n    focusToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n    getMessagesInView?: () => string[];\n    focusToIndexWithoutScroll?: (index: string) => void;\n    focusToList?: () => void;\n    focusToComposer?: () => void;\n    focusToSend?: () => void;\n    focusOnBanner?: () => void;\n    focusOnBannerLink?: () => void;\n  }>;\n\n  export interface ComposerProps extends Record<string, unknown> {\n    placeholder?: string;\n    inputValue?: string;\n    ariaMaxLengthMessage?: string;\n    maxLengthMessage?: string;\n    onChange: (value: string) => void;\n    onResize?: (value: number) => void;\n    onSend: (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => void;\n    maxHeight?: number;\n    inputMaxLength?: number;\n    buttonDisabled: boolean;\n    dataTestid?: string;\n    actionRef?: ActionRef;\n  }\n\n  export interface MessagesListProps extends Record<string, unknown> {\n    messages: DSChatBubbleT.Props[];\n    actionRef: ActionRef;\n    onScrollEnds?: (indexList: string[]) => void;\n    isLoading?: 'top' | 'bottom';\n    hasMoreItems?: 'top' | 'bottom';\n    getMoreMessages: () => void;\n    sendingMessages?: Array<string | number>;\n    sendingText: string;\n    bannerPosition?: 'top' | 'bottom';\n    bannerRef?: React.MutableRefObject<{\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      focusOnWrapper: (...args: any[]) => void;\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      focusOnLink: (...args: any[]) => void;\n    }>;\n  }\n\n  export interface ContainerProps extends Record<string, unknown> {\n    messagesListProps: Pick<MessagesListProps, 'messages' | 'onScrollEnds'>;\n    composerProps: ComposerProps;\n    actionRef?: ActionRef;\n    autoScroll: boolean;\n    device: 'desktop' | 'mobile';\n    isLoading?: 'top' | 'bottom';\n    hasMoreItems?: 'top' | 'bottom';\n    getMoreMessages: () => void;\n    bannerPosition?: 'top' | 'bottom';\n    bannerProps?: ChatBannerProps;\n    sendingMessages?: string[] | number[];\n    sendingText: string;\n  }\n\n  export interface GetPaddingT {\n    hasMoreItems: string | undefined;\n    bannerPosition: string | undefined;\n    isLoading: string | undefined;\n  }\n}\n\nexport interface TextAreaProps {\n  height: string | number;\n  style: React.CSSProperties;\n}\n\nexport const defaultPropsComposer: DSChatT.ComposerProps = {\n  placeholder: 'Type your message',\n  inputValue: '',\n  ariaMaxLengthMessage: '',\n  onChange: noop,\n  onResize: noop,\n  onSend: noop,\n  onFocus: noop,\n  onBlur: noop,\n  onKeyDown: noop,\n  maxHeight: 0,\n  inputMaxLength: undefined,\n  maxLengthMessage: undefined,\n  buttonDisabled: false,\n  dataTestid: 'ds-chat-composer',\n  actionRef: undefined,\n};\n\nexport const ChatComposerPropTypes = {\n  placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultPropsComposer.placeholder),\n  inputValue: PropTypes.string.description('Input value').defaultValue(defaultPropsComposer.inputValue),\n  ariaMaxLengthMessage: PropTypes.string\n    .description('Aria message for Max length message when exceeded')\n    .defaultValue(defaultPropsComposer.maxLengthMessage),\n  maxLengthMessage: PropTypes.string\n    .description('Max length message')\n    .defaultValue(defaultPropsComposer.maxLengthMessage),\n  onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultPropsComposer.onChange),\n  onResize: PropTypes.func\n    .description('Called the input changes his height')\n    .defaultValue(defaultPropsComposer.onResize),\n  onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultPropsComposer.onSend),\n  onFocus: PropTypes.func.description('Input focus').defaultValue(defaultPropsComposer.onFocus),\n  onBlur: PropTypes.func.description('Input blur').defaultValue(defaultPropsComposer.onBlur),\n  onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultPropsComposer.onKeyDown),\n  maxHeight: PropTypes.number\n    .description('Max height of the composer. Use 0 for no limit')\n    .defaultValue(defaultPropsComposer.onBlur),\n  inputMaxLength: PropTypes.number\n    .description('Max length of the composer. `undefined` for no limit')\n    .defaultValue(defaultPropsComposer.inputMaxLength),\n  buttonDisabled: PropTypes.bool\n    .description('Control the disabled for the send button')\n    .defaultValue(defaultPropsComposer.buttonDisabled),\n  dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.placeholder),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n          getMessagesInView?: () => number[],\n          focusToIndex?: (n: number) => void,\n          focusToList?: () => void,\n          focusToComposer?: () => void,\n          focusToSend?: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultPropsComposer.actionRef),\n};\n\nexport const defaultPropsMessagesList: DSChatT.MessagesListProps = {\n  messages: [],\n  actionRef: { current: {} },\n  // we don't want this to exist \"by default\" since this loads document.addEventListener\n  // the code is already checking for this callback existence everytime it's invoked anyway\n  // onScrollEnds: () => [],\n  getMoreMessages: noop,\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n  bannerPosition: undefined,\n  bannerRef: undefined,\n};\n\nexport const ChatContainerMessagesListPropTypes = {\n  ...globalAttributesPropTypes,\n\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(defaultPropsMessagesList.messages),\n  actionRef: PropTypes.object\n    .description(\n      `Reference: \n        { \n          scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n          getMessagesInView: () => number[],\n          focusToIndex: (n: number) => void,\n          focusToIndexWithoutScroll: (n: number) => void,\n          focusToList: () => void,\n          focusToComposer: () => void,\n          focusToSend: () => void,\n        }\n        \n      `,\n    )\n    .defaultValue(defaultPropsMessagesList.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(defaultPropsMessagesList.getMoreMessages),\n  sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n    .description('Array of ids of sending messages')\n    .defaultValue(defaultPropsMessagesList.sendingMessages),\n  sendingText: PropTypes.string\n    .description('Label description for messages in sending status')\n    .defaultValue(defaultPropsMessagesList.sendingText),\n};\n\nexport const defaultProps: DSChatT.ContainerProps = {\n  messagesListProps: defaultPropsMessagesList,\n  composerProps: defaultPropsComposer,\n  actionRef: undefined,\n  autoScroll: false,\n  device: 'desktop',\n  isLoading: undefined,\n  hasMoreItems: undefined,\n  getMoreMessages: noop,\n  bannerPosition: undefined,\n  bannerProps: {\n    type: BANNER_TYPES.INFO,\n    label: 'Unread Messages',\n    viewLabel: 'View',\n    onView: noop,\n    onClose: noop,\n  },\n  sendingMessages: undefined,\n  sendingText: 'Sending',\n};\n\nexport const ChatContainerPropTypes = {\n  ...globalAttributesPropTypes,\n  messagesListProps: PropTypes.object\n    .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n    .defaultValue(defaultProps.messagesListProps),\n  composerProps: PropTypes.object.description('Composer configuration').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.object\n    .description(\n      `Banner configuration:\n  label: string;\n  viewLabel: string;\n  type: BANNER_TYPES;\n  onView: () => void;\n  onClose: () => void;\n  `,\n    )\n    .defaultValue(defaultProps.bannerProps),\n  sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(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"],
+  "mappings": "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",
   "names": []
 }

package/dist/types/parts/chat-container-messages-list/useActionRef.d.ts CHANGED Viewed

@@ -1,14 +1,14 @@
 import React from 'react';
-import type { useVirtual } from 'react-virtual';
 import type { DSChatT } from '../../react-desc-prop-types.js';
 type UseActionRefArgs = {
     actionRef: DSChatT.ActionRef;
-    useVirtualHelpers: ReturnType<typeof useVirtual>;
+    useVirtualHelpers: DSChatT.ChatVirtualizer;
     virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;
     updateCache: () => void;
     getMessagesInView: () => string[];
     onlyFocus: (index: string) => void;
     scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;
+    hasVirtualItems: boolean;
 };
-export declare const useActionRef: ({ actionRef, useVirtualHelpers: { scrollToIndex: vScroll }, virtualListRef, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, }: UseActionRefArgs) => void;
+export declare const useActionRef: ({ actionRef, useVirtualHelpers: { scrollToIndex: vScroll }, virtualListRef, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, hasVirtualItems, }: UseActionRefArgs) => void;
 export {};

package/dist/types/parts/chat-container-messages-list/useChatContainerMessageList.d.ts CHANGED Viewed

@@ -1,12 +1,11 @@
 import React from 'react';
 import { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
-import { useVirtual } from 'react-virtual';
 import { useKeyboard } from './useKeyboard.js';
 import type { DSChatT } from '../../react-desc-prop-types.js';
 type UseChatContainerMessageList = (props: DSChatT.MessagesListProps) => {
     propsWithDefault: DSChatT.MessagesListProps;
     globalAttributes: ReturnType<typeof useGetGlobalAttributes>;
-    useVirtualHelpers: ReturnType<typeof useVirtual>;
+    useVirtualHelpers: DSChatT.ChatVirtualizer;
     loadMoreRef: React.MutableRefObject<HTMLButtonElement | undefined>;
     virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;
 } & ReturnType<typeof useKeyboard>;

package/dist/types/parts/chat-container-messages-list/useFocusAndScrollHelpers.d.ts CHANGED Viewed

@@ -1,13 +1,12 @@
 import React from 'react';
-import type { useVirtual } from 'react-virtual';
 import type { DSChatT } from '../../react-desc-prop-types.js';
 type UseFocusAndScrollHelpersArgs = {
     propsWithDefault: DSChatT.MessagesListProps;
-    useVirtualHelpers: ReturnType<typeof useVirtual>;
+    useVirtualHelpers: DSChatT.ChatVirtualizer;
     pendingOnScroll: React.MutableRefObject<boolean>;
     virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;
 };
-export declare const useFocusAndScrollHelpers: ({ propsWithDefault: { onScrollEnds }, useVirtualHelpers: { scrollToIndex: vScroll }, pendingOnScroll, virtualListRef, }: UseFocusAndScrollHelpersArgs) => {
+export declare const useFocusAndScrollHelpers: ({ propsWithDefault: { onScrollEnds }, useVirtualHelpers: { scrollToIndex: vScroll, calculateRange }, pendingOnScroll, virtualListRef, }: UseFocusAndScrollHelpersArgs) => {
     onScrollStop: () => string[];
     updateCache: import("lodash").DebouncedFuncLeading<() => void>;
     getMessagesInView: () => string[];

package/dist/types/react-desc-prop-types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { useVirtual } from 'react-virtual';
+import type { Virtualizer } from '@tanstack/react-virtual';
 import { type DSChatBubbleT } from '@elliemae/ds-chat-bubble';
 import { type DSButtonT } from '@elliemae/ds-button-v2';
 export declare namespace DSChatT {
@@ -9,7 +9,13 @@ export declare namespace DSChatT {
         onView: () => void;
         onClose: () => void;
     }
-    type ScrollToIndexOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];
+    /**
+     * Single source of truth for the virtualizer's element generics — reused across every file that
+     * types `useVirtualHelpers`, so they can't drift out of sync with each other (which previously
+     * produced a real dts build failure: `Virtualizer<HTMLDivElement, Element>` vs `Virtualizer<Element, Element>`).
+     */
+    type ChatVirtualizer = Virtualizer<HTMLDivElement, HTMLDivElement>;
+    type ScrollToIndexOptions = Parameters<ChatVirtualizer['scrollToIndex']>[1];
     type ActionRef = React.MutableRefObject<{
         scrollToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;
         focusToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-chat-container",
-  "version": "3.80.0-next.2",
+  "version": "3.80.0-next.20",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Chat Container",
   "files": [
@@ -36,27 +36,27 @@
     "typeSafety": true
   },
   "dependencies": {
-    "react-virtual": "~2.10.4",
-    "@elliemae/ds-banner": "3.80.0-next.2",
-    "@elliemae/ds-button-v2": "3.80.0-next.2",
-    "@elliemae/ds-chat-container-header": "3.80.0-next.2",
-    "@elliemae/ds-chat-system-message": "3.80.0-next.2",
-    "@elliemae/ds-chat-bubble": "3.80.0-next.2",
-    "@elliemae/ds-chat-message-delimeter": "3.80.0-next.2",
-    "@elliemae/ds-grid": "3.80.0-next.2",
-    "@elliemae/ds-props-helpers": "3.80.0-next.2",
-    "@elliemae/ds-indeterminate-progress-indicator": "3.80.0-next.2",
-    "@elliemae/ds-system": "3.80.0-next.2",
-    "@elliemae/ds-typescript-helpers": "3.80.0-next.2",
-    "@elliemae/ds-icons": "3.80.0-next.2"
+    "@elliemae/ds-banner": "3.80.0-next.20",
+    "@elliemae/ds-button-v2": "3.80.0-next.20",
+    "@elliemae/ds-chat-bubble": "3.80.0-next.20",
+    "@elliemae/ds-chat-container-header": "3.80.0-next.20",
+    "@elliemae/ds-chat-message-delimeter": "3.80.0-next.20",
+    "@elliemae/ds-chat-system-message": "3.80.0-next.20",
+    "@elliemae/ds-grid": "3.80.0-next.20",
+    "@elliemae/ds-icons": "3.80.0-next.20",
+    "@elliemae/ds-indeterminate-progress-indicator": "3.80.0-next.20",
+    "@elliemae/ds-props-helpers": "3.80.0-next.20",
+    "@elliemae/ds-system": "3.80.0-next.20",
+    "@elliemae/ds-typescript-helpers": "3.80.0-next.20",
+    "@tanstack/react-virtual": "3.13.18"
   },
   "devDependencies": {
+    "@elliemae/ds-monorepo-devops": "3.80.0-next.20",
+    "@elliemae/ds-test-utils": "3.80.0-next.20",
     "@playwright/experimental-ct-react": "1.61.1",
     "@types/react": "^18.0.0",
     "jest": "^30.0.0",
-    "styled-components": "~5.3.11",
-    "@elliemae/ds-monorepo-devops": "3.80.0-next.2",
-    "@elliemae/ds-test-utils": "3.80.0-next.2"
+    "styled-components": "~5.3.11"
   },
   "peerDependencies": {
     "lodash-es": "^4.18.1",