@elliemae/ds-chat-container 3.80.0-next.4 → 3.80.0-next.41

package/dist/cjs/DSChatContainerDefinitions.js

@@ -30,11 +30,17 @@ var DSChatContainerDefinitions_exports = {};
 __export(DSChatContainerDefinitions_exports, {
   DSChatContainerComposerName: () => DSChatContainerComposerName,
   DSChatContainerMessagesList: () => DSChatContainerMessagesList,
-  DSChatContainerName: () => DSChatContainerName
+  DSChatContainerName: () => DSChatContainerName,
+  DSChatContainerSlotName: () => DSChatContainerSlotName,
+  DSChatContainerSlots: () => DSChatContainerSlots
 });
 module.exports = __toCommonJS(DSChatContainerDefinitions_exports);
 var React = __toESM(require("react"));
 const DSChatContainerName = "DSChatcontainername";
 const DSChatContainerComposerName = "DSChatcontainercomposer";
 const DSChatContainerMessagesList = "DSChatcontainermessageslist";
+const DSChatContainerSlotName = "DSChatcontainer";
+const DSChatContainerSlots = {
+  MESSAGES_LIST_SCROLL_AREA: "messages-list-scroll-area"
+};
 //# sourceMappingURL=DSChatContainerDefinitions.js.map

package/dist/cjs/DSChatContainerDefinitions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSChatContainerDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSChatContainerName = 'DSChatcontainername';\nexport const DSChatContainerComposerName = 'DSChatcontainercomposer';\nexport const DSChatContainerMessagesList = 'DSChatcontainermessageslist';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,sBAAsB;AAC5B,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;",
+  "sourcesContent": ["export const DSChatContainerName = 'DSChatcontainername';\nexport const DSChatContainerComposerName = 'DSChatcontainercomposer';\nexport const DSChatContainerMessagesList = 'DSChatcontainermessageslist';\n\n/**\n * Slot system: the main component and its parts share one slot owner name, each part with its own slot\n * names (the convention of the `ds-chat-container-compliance` change, which moves these into `src/constants/`).\n */\nexport const DSChatContainerSlotName = 'DSChatcontainer';\nexport const DSChatContainerSlots = {\n  MESSAGES_LIST_SCROLL_AREA: 'messages-list-scroll-area',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,sBAAsB;AAC5B,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;AAMpC,MAAM,0BAA0B;AAChC,MAAM,uBAAuB;AAAA,EAClC,2BAA2B;AAC7B;",
   "names": []
 }

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

@@ -44,89 +44,154 @@ var import_styled = require("./styled.js");
 var import_react_desc_prop_types = require("../../react-desc-prop-types.js");
 var import_useGetNewMessages = require("./useGetNewMessages.js");
 var import_useChatContainerMessageList = require("./useChatContainerMessageList.js");
+var import_useMessageFocusTracker = require("./useMessageFocusTracker.js");
 var import_ChatContainerDataTestids = require("../../ChatContainerDataTestids.js");
+const ESTIMATED_MESSAGE_HEIGHT = 80;
+const estimateSize = () => ESTIMATED_MESSAGE_HEIGHT;
+const WRAPPER_LIST_PROPS = { role: "none" };
+const ItemRenderer = ({ index, extraItemProps }) => {
+  const { messages, sendingMessages, sendingText, focusRequest, focusCallbacks } = extraItemProps ?? {};
+  const row = messages?.[index];
+  const isFocusTarget = Boolean(
+    row && focusRequest && (focusRequest.messageId === (0, import_useMessageFocusTracker.getMessageFocusId)(row, index) || focusRequest.messageId === (0, import_useMessageFocusTracker.getMessagePositionId)(index))
+  );
+  const requestId = isFocusTarget && focusRequest ? focusRequest.requestId : 0;
+  const preventScroll = isFocusTarget && focusRequest ? focusRequest.preventScroll : false;
+  const focusRef = import_react.default.useCallback(
+    (node) => {
+      if (!node || !isFocusTarget || !focusCallbacks) return;
+      const item = node.closest("[data-index]");
+      const takeFocus = focusCallbacks.mayTakeFocus(requestId, item);
+      if (!takeFocus) return;
+      item?.focus({ preventScroll: takeFocus === "restore" || preventScroll });
+      focusCallbacks.markFulfilled(requestId);
+    },
+    [isFocusTarget, requestId, preventScroll, focusCallbacks]
+  );
+  if (!row) return null;
+  const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledWrapperListItem, { type: row.type, innerRef: focusRef, children: [
+    row.type === import_ds_chat_bubble.BUBBLE_TYPES.SENDER || row.type === import_ds_chat_bubble.BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_chat_bubble.ChatBubble, { ...row, helpMessage: isSending ? sendingText : row.helpMessage }) : null,
+    row.type === import_ds_chat_bubble.BUBBLE_TYPES.DELIMITER ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_chat_message_delimeter.MessageDelimiter, { ...row }) : null,
+    row.type === import_ds_chat_bubble.BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_chat_system_message.SystemMessage, { ...row }) : null
+  ] });
+};
 const ChatContainerMessagesList = (props) => {
   const {
     propsWithDefault,
     globalAttributes,
-    useVirtualHelpers,
+    fastListActionRef,
+    paddingStart,
+    paddingEnd,
     handleKey,
     handleListKey,
     loadMoreRef,
-    virtualListRef
+    virtualListRef,
+    focusTracker
   } = (0, import_useChatContainerMessageList.useChatContainerMessageList)(props);
   const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;
-  const { totalSize, virtualItems } = useVirtualHelpers;
   const newMessages = (0, import_useGetNewMessages.useGetNewMessages)(messages);
-  const render = import_react.default.useMemo(
-    () => virtualItems.map((virtualItem) => {
-      const { index, measureRef, start } = virtualItem;
-      const row = messages[index];
-      const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);
-      const style = {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        transform: `translateY(${start}px)`,
-        width: "100%"
-      };
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_styled.ListItem,
-        {
-          "data-element": "chat-element-list-item",
-          "data-index": index,
-          style,
-          innerRef: measureRef,
-          tabIndex: -1,
-          onKeyDown: handleKey,
-          role: "listitem",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledWrapperListItem, { type: row.type, children: [
-            row.type === import_ds_chat_bubble.BUBBLE_TYPES.SENDER || row.type === import_ds_chat_bubble.BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_chat_bubble.ChatBubble, { ...row, helpMessage: isSending ? sendingText : row.helpMessage }) : null,
-            row.type === import_ds_chat_bubble.BUBBLE_TYPES.DELIMITER ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_chat_message_delimeter.MessageDelimiter, { ...row }) : null,
-            row.type === import_ds_chat_bubble.BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_chat_system_message.SystemMessage, { ...row }) : null
-          ] })
-        },
-        `ds-chat-bubble-${index}-${row.dsId}-${row.type}`
-      );
-    }),
-    [virtualItems, messages, sendingMessages, handleKey, sendingText]
+  const getOwnerProps = import_react.default.useCallback(() => propsWithDefault, [propsWithDefault]);
+  const getId = import_react.default.useCallback(
+    (index) => `${index}-${messages[index].dsId}-${messages[index].type}`,
+    [messages]
+  );
+  const {
+    focusRequest,
+    mayTakeFocus,
+    markFulfilled,
+    trackFocusedMessage,
+    trackFocusResetter,
+    handleFocusOut,
+    listRootRef
+  } = focusTracker;
+  const focusCallbacks = import_react.default.useMemo(() => ({ mayTakeFocus, markFulfilled }), [mayTakeFocus, markFulfilled]);
+  const extraItemProps = import_react.default.useMemo(
+    () => ({ messages, sendingMessages, sendingText, focusRequest, focusCallbacks }),
+    [messages, sendingMessages, sendingText, focusRequest, focusCallbacks]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledWrapper, { ...globalAttributes, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_styled.StyledChatContainerContentList,
+  const { onFocus: onFocusFromConsumer, onBlur: onBlurFromConsumer } = globalAttributes;
+  const handleFocusIn = import_react.default.useCallback(
+    (e) => {
+      const item = e.target.closest('[data-element="chat-element-list-item"]');
+      const index = item?.dataset.index;
+      const position = Number(index);
+      const row = index !== void 0 ? messages[position] : void 0;
+      if (row) trackFocusedMessage((0, import_useMessageFocusTracker.getMessageFocusId)(row, position));
+      else trackFocusResetter();
+      onFocusFromConsumer?.(e);
+    },
+    [messages, trackFocusedMessage, trackFocusResetter, onFocusFromConsumer]
+  );
+  const handleFocusOutWithConsumer = import_react.default.useCallback(
+    (e) => {
+      handleFocusOut(e);
+      onBlurFromConsumer?.(e);
+    },
+    [handleFocusOut, onBlurFromConsumer]
+  );
+  const itemProps = import_react.default.useMemo(
+    () => ({ "data-element": "chat-element-list-item", tabIndex: -1, onKeyDown: handleKey }),
+    [handleKey]
+  );
+  const extraContent = import_react.default.useMemo(
+    () => !isLoading && hasMoreItems ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLoadMoreContainer, { hasMoreItems, role: "listitem", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_button_v2.DSButtonV2,
       {
-        "data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.THREAD_CONTAINER,
-        tabIndex: 0,
-        innerRef: virtualListRef,
-        role: "list",
-        onKeyDown: handleListKey,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledChatContainerContentListScroll, { height: `${totalSize}px`, children: [
-          !isLoading && hasMoreItems ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLoadMoreContainer, { hasMoreItems, role: "listitem", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ds_button_v2.DSButtonV2,
-            {
-              buttonType: "outline",
-              onClick: getMoreMessages,
-              "data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.LOAD_MORE_BUTTON,
-              innerRef: loadMoreRef,
-              children: "Load More"
-            }
-          ) }) : null,
-          render
-        ] })
+        buttonType: "outline",
+        onClick: getMoreMessages,
+        "data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.LOAD_MORE_BUTTON,
+        innerRef: loadMoreRef,
+        children: "Load More"
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledNewMessagesHiddenContainer, { "aria-live": "polite", "aria-hidden": "false", children: newMessages.map((newMessage) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-      newMessage.title,
-      " ",
-      newMessage.time,
-      " ",
-      newMessage.body,
-      " ",
-      newMessage.errorMessage,
-      " ",
-      newMessage.helpMessage
-    ] }, newMessage.dsId)) })
-  ] });
+    ) }) : null,
+    [isLoading, hasMoreItems, getMoreMessages, loadMoreRef]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledWrapper,
+    {
+      ...globalAttributes,
+      innerRef: listRootRef,
+      onFocus: handleFocusIn,
+      onBlur: handleFocusOutWithConsumer,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledFastList,
+          {
+            getOwnerProps,
+            "data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.THREAD_CONTAINER,
+            role: "list",
+            tabIndex: 0,
+            onKeyDown: handleListKey,
+            innerRef: virtualListRef,
+            actionRef: fastListActionRef,
+            remountOnCountChange: false,
+            count: messages.length,
+            getId,
+            estimateSize,
+            paddingStart,
+            paddingEnd,
+            ItemRenderer,
+            extraItemProps,
+            extraContent,
+            dsFastlistWrapperList: WRAPPER_LIST_PROPS,
+            dsFastlistItem: itemProps
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledNewMessagesHiddenContainer, { "aria-live": "polite", "aria-hidden": "false", children: newMessages.map((newMessage) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+          newMessage.title,
+          " ",
+          newMessage.time,
+          " ",
+          newMessage.body,
+          " ",
+          newMessage.errorMessage,
+          " ",
+          newMessage.helpMessage
+        ] }, newMessage.dsId)) })
+      ]
+    }
+  );
 };
 ChatContainerMessagesList.displayName = "ChatContainerMessagesList";
 const ChatContainerMessagesListWithSchema = (0, import_ds_props_helpers.describe)(ChatContainerMessagesList);

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

@@ -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 { 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  StyledFastList,\n  StyledWrapper,\n  StyledLoadMoreContainer,\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 { getMessageFocusId, getMessagePositionId } from './useMessageFocusTracker.js';\nimport type { MessageFocusRequest, useMessageFocusTracker } from './useMessageFocusTracker.js';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids.js';\n\ntype ButtonV2InnerRefT = DSButtonV2T.Props['innerRef'];\n\ntype FocusTracker = ReturnType<typeof useMessageFocusTracker>;\ntype ItemFocusCallbacks = Pick<FocusTracker, 'mayTakeFocus' | 'markFulfilled'>;\n\ntype ItemExtraProps = {\n  messages: DSChatT.MessagesListProps['messages'];\n  sendingMessages: DSChatT.MessagesListProps['sendingMessages'];\n  sendingText: DSChatT.MessagesListProps['sendingText'];\n  focusRequest: MessageFocusRequest | null;\n  focusCallbacks: ItemFocusCallbacks;\n};\n\nconst ESTIMATED_MESSAGE_HEIGHT = 80;\nconst estimateSize = () => ESTIMATED_MESSAGE_HEIGHT;\n// the wrapper `ds-fast-list` renders is neutral: the scroll container owns the `list` role\nconst WRAPPER_LIST_PROPS = { role: 'none' };\n\n/**\n * Module-level on purpose: `DSFastList` renders it as a component, so its identity must be stable or\n * every item would remount on each render of the list.\n */\nconst ItemRenderer: React.ComponentType<{ index: number; extraItemProps?: object }> = ({ index, extraItemProps }) => {\n  // `styled(DSFastList)` drops DSFastList's generic, so `extraItemProps` arrives typed as `object`\n  const { messages, sendingMessages, sendingText, focusRequest, focusCallbacks } = (extraItemProps ??\n    {}) as Partial<ItemExtraProps>;\n  const row = messages?.[index];\n  const isFocusTarget = Boolean(\n    row &&\n    focusRequest &&\n    (focusRequest.messageId === getMessageFocusId(row, index) ||\n      focusRequest.messageId === getMessagePositionId(index)),\n  );\n  const requestId = isFocusTarget && focusRequest ? focusRequest.requestId : 0;\n  const preventScroll = isFocusTarget && focusRequest ? focusRequest.preventScroll : false;\n  /**\n   * The only place a message is focused. It runs once React has committed the message, so a target that is\n   * not mounted yet (far away, or remounted after older messages were loaded) is focused when it mounts. The\n   * focusable element is the item wrapper `ds-fast-list` renders around this component, the one carrying\n   * `data-index` and QA's `data-element`, so it is reached with `closest` from this message's own node.\n   */\n  const focusRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      if (!node || !isFocusTarget || !focusCallbacks) return;\n      const item = node.closest<HTMLElement>('[data-index]');\n      const takeFocus = focusCallbacks.mayTakeFocus(requestId, item);\n      if (!takeFocus) return;\n      item?.focus({ preventScroll: takeFocus === 'restore' || preventScroll });\n      focusCallbacks.markFulfilled(requestId);\n    },\n    [isFocusTarget, requestId, preventScroll, focusCallbacks],\n  );\n  if (!row) return null;\n  const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);\n  return (\n    <StyledWrapperListItem type={row.type} innerRef={focusRef}>\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  );\n};\n\nconst ChatContainerMessagesList: React.ComponentType<DSChatT.MessagesListProps> = (props) => {\n  const {\n    propsWithDefault,\n    globalAttributes,\n    fastListActionRef,\n    paddingStart,\n    paddingEnd,\n    handleKey,\n    handleListKey,\n    loadMoreRef,\n    virtualListRef,\n    focusTracker,\n  } = useChatContainerMessageList(props);\n\n  const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;\n\n  const newMessages = useGetNewMessages(messages);\n\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  /**\n   * The key must carry the index. `ds-fast-list` reuses an item's DOM node for as long as its key is the same,\n   * but the virtualizer measures each node by its `data-index` and does not measure a node again when only its\n   * index changes. With a key made only of `dsId`, loading older messages (which shifts every index) keeps the\n   * nodes and leaves their measurements pointing at another position: items overlap or leave gaps, and the list\n   * flickers while scrolling. An index-bearing key recreates the shifted items so they are measured at their\n   * new index, as the list did before it was moved onto `ds-fast-list`.\n   */\n  const getId = React.useCallback(\n    (index: number) => `${index}-${messages[index].dsId}-${messages[index].type}`,\n    [messages],\n  );\n  const {\n    focusRequest,\n    mayTakeFocus,\n    markFulfilled,\n    trackFocusedMessage,\n    trackFocusResetter,\n    handleFocusOut,\n    listRootRef,\n  } = focusTracker;\n  const focusCallbacks = React.useMemo(() => ({ mayTakeFocus, markFulfilled }), [mayTakeFocus, markFulfilled]);\n  const extraItemProps = React.useMemo(\n    () => ({ messages, sendingMessages, sendingText, focusRequest, focusCallbacks }),\n    [messages, sendingMessages, sendingText, focusRequest, focusCallbacks],\n  );\n  const { onFocus: onFocusFromConsumer, onBlur: onBlurFromConsumer } = globalAttributes as {\n    onFocus?: React.FocusEventHandler<HTMLElement>;\n    onBlur?: React.FocusEventHandler<HTMLElement>;\n  };\n  /**\n   * Keeps the focus intent equal to the message that actually got the focus (keyboard, mouse or API), also when\n   * the focus is on a descendant of the message, and clears it when the focus moves to anything else in the list.\n   */\n  const handleFocusIn = React.useCallback(\n    (e: React.FocusEvent<HTMLElement>) => {\n      const item = (e.target as HTMLElement).closest<HTMLElement>('[data-element=\"chat-element-list-item\"]');\n      const index = item?.dataset.index;\n      const position = Number(index);\n      const row = index !== undefined ? messages[position] : undefined;\n      if (row) trackFocusedMessage(getMessageFocusId(row, position));\n      else trackFocusResetter();\n      onFocusFromConsumer?.(e);\n    },\n    [messages, trackFocusedMessage, trackFocusResetter, onFocusFromConsumer],\n  );\n  const handleFocusOutWithConsumer = React.useCallback(\n    (e: React.FocusEvent<HTMLElement>) => {\n      handleFocusOut(e);\n      onBlurFromConsumer?.(e);\n    },\n    [handleFocusOut, onBlurFromConsumer],\n  );\n  const itemProps = React.useMemo(\n    () => ({ 'data-element': 'chat-element-list-item', tabIndex: -1, onKeyDown: handleKey }),\n    [handleKey],\n  );\n  const extraContent = React.useMemo(\n    () =>\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    [isLoading, hasMoreItems, getMoreMessages, loadMoreRef],\n  );\n\n  return (\n    <StyledWrapper\n      {...globalAttributes}\n      innerRef={listRootRef}\n      onFocus={handleFocusIn}\n      onBlur={handleFocusOutWithConsumer}\n    >\n      <StyledFastList\n        getOwnerProps={getOwnerProps}\n        data-testid={ChatContainerDataTestIds.THREAD_CONTAINER}\n        role=\"list\"\n        tabIndex={0}\n        onKeyDown={handleListKey}\n        innerRef={virtualListRef}\n        actionRef={fastListActionRef}\n        remountOnCountChange={false}\n        count={messages.length}\n        getId={getId}\n        estimateSize={estimateSize}\n        paddingStart={paddingStart}\n        paddingEnd={paddingEnd}\n        ItemRenderer={ItemRenderer}\n        extraItemProps={extraItemProps}\n        extraContent={extraContent}\n        dsFastlistWrapperList={WRAPPER_LIST_PROPS}\n        dsFastlistItem={itemProps}\n      />\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

@@ -28,9 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styled_exports = {};
 __export(styled_exports, {
-  ListItem: () => ListItem,
-  StyledChatContainerContentList: () => StyledChatContainerContentList,
-  StyledChatContainerContentListScroll: () => StyledChatContainerContentListScroll,
+  StyledFastList: () => StyledFastList,
   StyledLoadMoreContainer: () => StyledLoadMoreContainer,
   StyledNewMessagesHiddenContainer: () => StyledNewMessagesHiddenContainer,
   StyledWrapper: () => StyledWrapper,
@@ -39,7 +37,9 @@ __export(styled_exports, {
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_fast_list = require("@elliemae/ds-fast-list");
 var import_ds_chat_bubble = require("@elliemae/ds-chat-bubble");
+var import_DSChatContainerDefinitions = require("../../DSChatContainerDefinitions.js");
 const StyledWrapper = import_ds_system.styled.div`
   width: 100%;
   height: 100%;
@@ -54,13 +54,36 @@ const StyledWrapperListItem = import_ds_system.styled.div`
   ${(props) => props.type === import_ds_chat_bubble.BUBBLE_TYPES.SYSTEM && `padding: ${props.theme.space.xxs} 0px
   `};
 `;
-const StyledChatContainerContentList = import_ds_system.styled.div`
-  width: 100%;
-  height: 100%;
-  padding: ${(props) => props.theme.space.xs};
-  padding-bottom: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
+const StyledFastList = (0, import_ds_system.styled)(import_ds_fast_list.DSFastList, {
+  name: import_DSChatContainerDefinitions.DSChatContainerSlotName,
+  slot: import_DSChatContainerDefinitions.DSChatContainerSlots.MESSAGES_LIST_SCROLL_AREA
+})`
+  && {
+    padding: 0 ${(props) => props.theme.space.xs} 0 ${(props) => props.theme.space.xs};
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  [data-element='chat-element-list-item'] {
+    &:focus,
+    &:focus-visible {
+      outline: none;
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: -${(props) => props.theme.space.xxs};
+        pointer-events: none;
+        border-radius: 2px;
+        background-color: #ebedf0;
+        width: calc(100% + 24px);
+        border: 2px solid #1e79c2;
+        height: 100%;
+        z-index: -1;
+      }
+    }
+  }
 `;
 const StyledNewMessagesHiddenContainer = import_ds_system.styled.div`
   position: absolute;
@@ -74,11 +97,6 @@ const StyledNewMessagesHiddenContainer = import_ds_system.styled.div`
   clip-path: inset(100%);
   white-space: nowrap;
 `;
-const StyledChatContainerContentListScroll = import_ds_system.styled.div`
-  width: 100%;
-  height: ${(props) => props.height};
-  position: relative;
-`;
 const StyledLoadMoreContainer = import_ds_system.styled.div`
   position: absolute;
   width: calc(100% + ${(props) => props.theme.space.xxs});
@@ -91,24 +109,4 @@ const StyledLoadMoreContainer = import_ds_system.styled.div`
   ${(props) => props.hasMoreItems === "top" ? "top: 0;" : ""}
   ${(props) => props.hasMoreItems === "bottom" ? "bottom: 0;" : ""}
 `;
-const ListItem = import_ds_system.styled.div`
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      left: -${(props) => props.theme.space.xxs};
-      pointer-events: none;
-      border-radius: 2px;
-      background-color: #ebedf0;
-      width: calc(100% + 24px);
-      border: 2px solid #1e79c2;
-      height: 100%;
-      z-index: -1;
-    }
-  }
-`;
 //# sourceMappingURL=styled.js.map

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

@@ -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 { DSFastList } from '@elliemae/ds-fast-list';\nimport type { DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { BUBBLE_TYPES } from '@elliemae/ds-chat-bubble';\nimport { DSChatContainerSlotName, DSChatContainerSlots } from '../../DSChatContainerDefinitions.js';\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\n/**\n * The scroll container is DSFastList's own container, so its horizontal padding and overflow rules are\n * applied through the class that `styled(DSFastList)` forwards to it. `&&` doubles the class so these\n * rules win over the container's own `overflow: auto` regardless of style injection order.\n *\n * No padding-top here on purpose: the scroll container is also the virtualizer's scroll element, and\n * the virtualizer compares the raw `scrollTop` with its own content-relative item positions with no\n * awareness of CSS padding, so a CSS top-padding would desync `getVisibleItems()` near the top boundary\n * by roughly the padding's own size. The equivalent top space is passed as the virtualizer's\n * `paddingStart` instead (see useChatContainerMessageList.ts).\n */\nexport const StyledFastList = styled(DSFastList, {\n  name: DSChatContainerSlotName,\n  slot: DSChatContainerSlots.MESSAGES_LIST_SCROLL_AREA,\n})`\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\n  [data-element='chat-element-list-item'] {\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`;\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 StyledLoadMoreContainer = styled.div<{ hasMoreItems?: 'top' | 'bottom' }>`\n  position: absolute;\n  width: calc(100% + ${(props) => props.theme.space.xxs});\n  padding: ${(props) => props.theme.space.xxs};\n  left: -${(props) => props.theme.space.xxs};\n  right: -${(props) => props.theme.space.xxs};\n  display: grid;\n  justify-content: center;\n  align-items: center;\n  ${(props) => (props.hasMoreItems === 'top' ? 'top: 0;' : '')}\n  ${(props) => (props.hasMoreItems === 'bottom' ? 'bottom: 0;' : '')}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,0BAA2B;AAE3B,4BAA6B;AAC7B,wCAA8D;AAEvD,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;AAcI,MAAM,qBAAiB,yBAAO,gCAAY;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,uDAAqB;AAC7B,CAAC;AAAA;AAAA,iBAEgB,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE,MAAM,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAcpE,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa1C,MAAM,mCAAmC,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahD,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;",
   "names": []
 }

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

@@ -35,9 +35,8 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 const useActionRef = ({
   actionRef,
-  useVirtualHelpers: { scrollToIndex: vScroll },
+  vScroll,
   virtualListRef,
-  updateCache,
   getMessagesInView,
   onlyFocus,
   scrollAndFocus
@@ -49,7 +48,6 @@ const useActionRef = ({
           vScroll(index, opts);
           requestAnimationFrame(() => {
             vScroll(index, opts);
-            updateCache();
           });
         }, 0);
       };
@@ -61,11 +59,10 @@ 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, vScroll, virtualListRef]);
 };
 //# sourceMappingURL=useActionRef.js.map

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

@@ -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  vScroll: (index: number, opts?: DSChatT.ScrollActionOptions) => void;\n  virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n  getMessagesInView: () => string[];\n  onlyFocus: (index: string) => void;\n  scrollAndFocus: (index: number, opts?: DSChatT.ScrollActionOptions) => void;\n};\n\nexport const useActionRef = ({\n  actionRef,\n  vScroll,\n  virtualListRef,\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 align the element with correct measurements\n           */\n          requestAnimationFrame(() => {\n            vScroll(index, opts);\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, vScroll, virtualListRef]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAYX,MAAM,eAAe,CAAC;AAAA,EAC3B;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;AASnB,gCAAsB,MAAM;AAC1B,oBAAQ,OAAO,IAAI;AAAA,UACrB,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,SAAS,cAAc,CAAC;AACvF;",
   "names": ["React"]
 }

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

@@ -33,12 +33,13 @@ __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_useActionRef = require("./useActionRef.js");
 var import_useGlobalEventListener = require("./useGlobalEventListener.js");
 var import_useKeyboard = require("./useKeyboard.js");
 var import_useFocusAndScrollHelpers = require("./useFocusAndScrollHelpers.js");
+var import_useMessageFocusTracker = require("./useMessageFocusTracker.js");
 var import_react_desc_prop_types = require("../../react-desc-prop-types.js");
 var import_DSChatContainerDefinitions = require("../../DSChatContainerDefinitions.js");
 const getPadding = ({ hasMoreItems, bannerPosition, isLoading }) => {
@@ -59,29 +60,27 @@ const useChatContainerMessageList = (props) => {
   );
   const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
   const loadMoreRef = import_react.default.useRef();
-  const virtualListRef = import_react.default.useRef();
+  const virtualListRef = import_react.default.useRef(null);
+  const fastListActionRef = 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,
-    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
-    estimateSize: import_react.default.useCallback(() => 80, [])
-  });
-  const { onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll } = (0, import_useFocusAndScrollHelpers.useFocusAndScrollHelpers)({
+  const { bannerPosition, actionRef, hasMoreItems, isLoading } = propsWithDefault;
+  const theme = (0, import_styled_components.useTheme)();
+  const containerPaddingStart = parseInt(theme.space.xs, 10);
+  const padding = getPadding({ hasMoreItems, bannerPosition, isLoading });
+  const paddingStart = padding.paddingStart + containerPaddingStart;
+  const { paddingEnd } = padding;
+  const focusTracker = (0, import_useMessageFocusTracker.useMessageFocusTracker)(virtualListRef);
+  const { trackFocusMessage } = focusTracker;
+  const { vScroll, onScrollStop, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll } = (0, import_useFocusAndScrollHelpers.useFocusAndScrollHelpers)({
     propsWithDefault,
-    useVirtualHelpers,
+    fastListActionRef,
     pendingOnScroll,
-    virtualListRef
+    trackFocusMessage
   });
   (0, import_useActionRef.useActionRef)({
     actionRef,
-    useVirtualHelpers,
+    vScroll,
     virtualListRef,
-    updateCache,
     getMessagesInView,
     onlyFocus,
     scrollAndFocus
@@ -99,18 +98,32 @@ const useChatContainerMessageList = (props) => {
     loadMoreRef,
     scrollAndFocus,
     onlyFocus,
-    getMessagesInView
+    getMessagesInView,
+    trackFocusMessage
   });
   return import_react.default.useMemo(
     () => ({
       propsWithDefault,
       globalAttributes,
-      useVirtualHelpers,
+      fastListActionRef,
+      paddingStart,
+      paddingEnd,
       loadMoreRef,
       virtualListRef,
+      focusTracker,
       ...keyboardMethods
     }),
-    [globalAttributes, keyboardMethods, propsWithDefault, useVirtualHelpers, loadMoreRef, virtualListRef]
+    [
+      globalAttributes,
+      keyboardMethods,
+      propsWithDefault,
+      fastListActionRef,
+      paddingStart,
+      paddingEnd,
+      loadMoreRef,
+      virtualListRef,
+      focusTracker
+    ]
   );
 };
 //# sourceMappingURL=useChatContainerMessageList.js.map