@elliemae/ds-chat 3.4.3-rc.0 → 3.4.4-next.0

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

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

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/ChatContainerMessagesList.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React, { CSSProperties, WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport DSButton from '@elliemae/ds-button';\nimport { ChatBubble, BUBBLE_TYPES } from '../../exported-related/bubble';\nimport { MessageDelimiter } from '../../exported-related/message-delimiter';\nimport { SystemMessage } from '../../exported-related/system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n  StyledNewMessagesHiddenContainer,\n} from './styled';\nimport { DSChatT, ChatContainerMessagesListPropTypes } from '../../react-desc-prop-types';\nimport { useGetNewMessages } from './useGetNewMessages';\nimport { useChatContainerMessageList } from './useChatContainerMessageList';\n\nconst ChatContainerMessagesList: React.ComponentType<DSChatT.MessagesListProps> = (props) => {\n  const {\n    propsWithDefault,\n    globalAttributes,\n    useVirtualHelpers,\n    handleKey,\n    handleListKey,\n    loadMoreRef,\n    virtualListRef,\n  } = useChatContainerMessageList(props);\n\n  const { sendingText, sendingMessages, messages, getMoreMessages, hasMoreItems, isLoading } = propsWithDefault;\n  const { totalSize, virtualItems } = useVirtualHelpers;\n\n  const newMessages = useGetNewMessages(messages);\n\n  const render = React.useMemo(\n    () =>\n      virtualItems.map((virtualItem) => {\n        const { index, measureRef, start } = virtualItem;\n        const row = messages[index];\n        const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);\n        const style: CSSProperties = {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          transform: `translateY(${start}px)`,\n          width: '100%',\n        };\n\n        return (\n          <ListItem\n            data-element=\"chat-element-list-item\"\n            data-index={index}\n            key={`ds-chat-bubble-${index}-${row.dsId}-${row.type}`}\n            style={style}\n            ref={measureRef}\n            tabIndex={-1}\n            onKeyDown={handleKey}\n            role=\"listitem\"\n          >\n            <StyledWrapperListItem type={row.type}>\n              {row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? (\n                // eslint-disable-next-line eslint-comments/no-unlimited-disable\n                <ChatBubble {...row} helpMessage={isSending ? sendingText : row.helpMessage} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.DELIMITER ? <MessageDelimiter {...row} /> : null}\n              {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...row} /> : 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=\"chat-thread-container\"\n        tabIndex={0}\n        ref={virtualListRef as React.RefObject<HTMLDivElement>}\n        role=\"list\"\n        onKeyDown={handleListKey}\n      >\n        <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n          {!isLoading && hasMoreItems ? (\n            <StyledLoadMoreContainer hasMoreItems={hasMoreItems}>\n              <DSButton\n                labelText=\"Load More\"\n                buttonType=\"secondary\"\n                onClick={getMoreMessages}\n                data-testid=\"ds-chat-load-more-btn\"\n                innerRef={loadMoreRef}\n              />\n            </StyledLoadMoreContainer>\n          ) : null}\n          {render}\n        </StyledChatContainerContentListScroll>\n      </StyledChatContainerContentList>\n      {/* We repeat the render with the new available messages */}\n      <StyledNewMessagesHiddenContainer aria-live=\"polite\" aria-hidden=\"false\">\n        {newMessages.map((newMessage) => (\n          <p key={newMessage.dsId}>\n            {newMessage.title} {newMessage.time} {newMessage.body} {newMessage.errorMessage} {newMessage.helpMessage}\n          </p>\n        ))}\n      </StyledNewMessagesHiddenContainer>\n    </StyledWrapper>\n  );\n};\n\nChatContainerMessagesList.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\nChatContainerMessagesList.displayName = 'ChatContainerMessagesList';\nconst ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);\nChatContainerMessagesListWithSchema.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainerMessagesList, ChatContainerMessagesListWithSchema };\n"],
-  "mappings": "AAAA;ACGA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;AACA;AAEA,MAAM,4BAA4E,CAAC,UAAU;AAC3F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,4BAA4B,KAAK;AAErC,QAAM,EAAE,aAAa,iBAAiB,UAAU,iBAAiB,cAAc,cAAc;AAC7F,QAAM,EAAE,WAAW,iBAAiB;AAEpC,QAAM,cAAc,kBAAkB,QAAQ;AAE9C,QAAM,SAAS,OAAM,QACnB,MACE,aAAa,IAAI,CAAC,gBAAgB;AAChC,UAAM,EAAE,OAAO,YAAY,UAAU;AACrC,UAAM,MAAM,SAAS;AACrB,UAAM,YAAY,mBAAmB,gBAAgB,KAAK,CAAC,MAAM,MAAM,IAAI,IAAI;AAC/E,UAAM,QAAuB;AAAA,MAC3B,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW,cAAc;AAAA,MACzB,OAAO;AAAA,IACT;AAEA,WACE,qCAAC;AAAA,MACC,gBAAa;AAAA,MACb,cAAY;AAAA,MACZ,KAAK,kBAAkB,SAAS,IAAI,QAAQ,IAAI;AAAA,MAChD;AAAA,MACA,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,MAAK;AAAA,OAEL,qCAAC;AAAA,MAAsB,MAAM,IAAI;AAAA,OAC9B,IAAI,SAAS,aAAa,UAAU,IAAI,SAAS,aAAa,YAE7D,qCAAC;AAAA,MAAY,GAAG;AAAA,MAAK,aAAa,YAAY,cAAc,IAAI;AAAA,KAAa,IAC3E,MACH,IAAI,SAAS,aAAa,YAAY,qCAAC;AAAA,MAAkB,GAAG;AAAA,KAAK,IAAK,MACtE,IAAI,SAAS,aAAa,SAAS,qCAAC;AAAA,MAAe,GAAG;AAAA,KAAK,IAAK,IACnE,CACF;AAAA,EAEJ,CAAC,GACH,CAAC,cAAc,UAAU,iBAAiB,WAAW,WAAW,CAClE;AAEA,SACE,qCAAC;AAAA,IAAe,GAAG;AAAA,KACjB,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAK;AAAA,IACL,WAAW;AAAA,KAEX,qCAAC;AAAA,IAAqC,QAAQ,GAAG;AAAA,KAC9C,CAAC,aAAa,eACb,qCAAC;AAAA,IAAwB;AAAA,KACvB,qCAAC;AAAA,IACC,WAAU;AAAA,IACV,YAAW;AAAA,IACX,SAAS;AAAA,IACT,eAAY;AAAA,IACZ,UAAU;AAAA,GACZ,CACF,IACE,MACH,MACH,CACF,GAEA,qCAAC;AAAA,IAAiC,aAAU;AAAA,IAAS,eAAY;AAAA,KAC9D,YAAY,IAAI,CAAC,eAChB,qCAAC;AAAA,IAAE,KAAK,WAAW;AAAA,KAChB,WAAW,OAAM,KAAE,WAAW,MAAK,KAAE,WAAW,MAAK,KAAE,WAAW,cAAa,KAAE,WAAW,WAC/F,CACD,CACH,CACF;AAEJ;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,sCAAsC,SAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
-  "names": []
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAGA,OAAOA,YAAiD;AACxD,SAAS,gBAAgB;AACzB,OAAO,cAAc;AACrB,SAAS,YAAY,oBAAoB;AACzC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAkB,0CAA0C;AAC5D,SAAS,yBAAyB;AAClC,SAAS,mCAAmC;AAE5C,MAAM,4BAA4E,CAAC,UAAU;AAC3F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B,KAAK;AAErC,QAAM,EAAE,aAAa,iBAAiB,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAC7F,QAAM,EAAE,WAAW,aAAa,IAAI;AAEpC,QAAM,cAAc,kBAAkB,QAAQ;AAE9C,QAAM,SAASA,OAAM;AAAA,IACnB,MACE,aAAa,IAAI,CAAC,gBAAgB;AAChC,YAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,YAAM,MAAM,SAAS;AACrB,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;AAAA,QACzB,OAAO;AAAA,MACT;AAEA,aACE,oBAAC;AAAA,QACC,gBAAa;AAAA,QACb,cAAY;AAAA,QAEZ;AAAA,QACA,KAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAW;AAAA,QACX,MAAK;AAAA,QAEL,+BAAC;AAAA,UAAsB,MAAM,IAAI;AAAA,UAC9B;AAAA,gBAAI,SAAS,aAAa,UAAU,IAAI,SAAS,aAAa,YAE7D,oBAAC;AAAA,cAAY,GAAG;AAAA,cAAK,aAAa,YAAY,cAAc,IAAI;AAAA,aAAa,IAC3E;AAAA,YACH,IAAI,SAAS,aAAa,YAAY,oBAAC;AAAA,cAAkB,GAAG;AAAA,aAAK,IAAK;AAAA,YACtE,IAAI,SAAS,aAAa,SAAS,oBAAC;AAAA,cAAe,GAAG;AAAA,aAAK,IAAK;AAAA;AAAA,SACnE;AAAA,SAdK,kBAAkB,SAAS,IAAI,QAAQ,IAAI,MAelD;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,cAAc,UAAU,iBAAiB,WAAW,WAAW;AAAA,EAClE;AAEA,SACE,qBAAC;AAAA,IAAe,GAAG;AAAA,IACjB;AAAA,0BAAC;AAAA,QACC,eAAY;AAAA,QACZ,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAW;AAAA,QAEX,+BAAC;AAAA,UAAqC,QAAQ,GAAG;AAAA,UAC9C;AAAA,aAAC,aAAa,eACb,oBAAC;AAAA,cAAwB;AAAA,cACvB,8BAAC;AAAA,gBACC,WAAU;AAAA,gBACV,YAAW;AAAA,gBACX,SAAS;AAAA,gBACT,eAAY;AAAA,gBACZ,UAAU;AAAA,eACZ;AAAA,aACF,IACE;AAAA,YACH;AAAA;AAAA,SACH;AAAA,OACF;AAAA,MAEA,oBAAC;AAAA,QAAiC,aAAU;AAAA,QAAS,eAAY;AAAA,QAC9D,sBAAY,IAAI,CAAC,eAChB,qBAAC;AAAA,UACE;AAAA,uBAAW;AAAA,YAAM;AAAA,YAAE,WAAW;AAAA,YAAK;AAAA,YAAE,WAAW;AAAA,YAAK;AAAA,YAAE,WAAW;AAAA,YAAa;AAAA,YAAE,WAAW;AAAA;AAAA,WADvF,WAAW,IAEnB,CACD;AAAA,OACH;AAAA;AAAA,GACF;AAEJ;AAEA,0BAA0B,YAAY;AACtC,0BAA0B,cAAc;AACxC,MAAM,sCAAsC,SAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
+  "names": ["React"]
 }

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

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

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/styled.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { BUBBLE_TYPES } from '../../exported-related/bubble/index';\nimport { BubblePropsT } from '../../exported-related/bubble/props';\n\nexport const StyledWrapper = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\n// list\nexport const StyledWrapperListItem = styled.div<Partial<BubblePropsT>>`\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;ACAA;AACA;AAGO,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,OAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM;AAAA;AAAA,IAEhF,CAAC,UACD,MAAM,SAAS,aAAa,aAC5B,YAAY,MAAM,MAAM,MAAM,WAAW,MAAM,MAAM,MAAM;AAAA,MACzD,MAAM,MAAM,MAAM;AAAA;AAAA,IAEpB,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM;AAAA;AAAA;AAI3B,MAAM,iCAAiC,OAAO;AAAA;AAAA;AAAA,aAGxC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,mCAAmC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahD,MAAM,uCAAuC,OAAO;AAAA;AAAA,YAE/C,CAAC,UAAU,MAAM;AAAA;AAAA;AAItB,MAAM,0BAA0B,OAAO;AAAA;AAAA,uBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,aACvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,YAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAIrC,CAAC,UAAW,MAAM,iBAAiB,QAAQ,YAAY;AAAA,IACvD,CAAC,UAAW,MAAM,iBAAiB,WAAW,eAAe;AAAA;AAE1D,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAGtB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,OAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM;AAAA;AAAA,IAEhF,CAAC,UACD,MAAM,SAAS,aAAa,aAC5B,YAAY,MAAM,MAAM,MAAM,WAAW,MAAM,MAAM,MAAM;AAAA,MACzD,MAAM,MAAM,MAAM;AAAA;AAAA,IAEpB,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM;AAAA;AAAA;AAI3B,MAAM,iCAAiC,OAAO;AAAA;AAAA;AAAA,aAGxC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,mCAAmC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahD,MAAM,uCAAuC,OAAO;AAAA;AAAA,YAE/C,CAAC,UAAU,MAAM;AAAA;AAAA;AAItB,MAAM,0BAA0B,OAAO;AAAA;AAAA,uBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,aACvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,YAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAIrC,CAAC,UAAW,MAAM,iBAAiB,QAAQ,YAAY;AAAA,IACvD,CAAC,UAAW,MAAM,iBAAiB,WAAW,eAAe;AAAA;AAE1D,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "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 DebouncedFunc } from 'lodash';\nimport { useVirtual } from 'react-virtual';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseActionRefArgs = {\n  actionRef: DSChatT.ActionRef;\n  useVirtualHelpers: ReturnType<typeof useVirtual>;\n  virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n  onScrollStop: DebouncedFunc<() => string[]>;\n  onlyFocus: (index: number) => void;\n  scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n};\n\nexport const useActionRef = ({\n  actionRef,\n  useVirtualHelpers: { scrollToIndex: vScroll },\n  virtualListRef,\n  onScrollStop,\n  onlyFocus,\n  scrollAndFocus,\n}: UseActionRefArgs) => {\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      const scrollToIndex: DSChatT.ActionRef['current']['scrollToIndex'] = (index, opts = { align: 'center' }) => {\n        vScroll(index, opts);\n        onScrollStop();\n      };\n      const focusToIndex: DSChatT.ActionRef['current']['focusToIndex'] = (index, opts = { align: 'center' }) => {\n        scrollAndFocus(index, opts);\n      };\n      const focusToList = () => {\n        virtualListRef.current?.focus();\n      };\n\n      actionRef.current.scrollToIndex = scrollToIndex;\n      actionRef.current.getMessagesInView = onScrollStop;\n      // I have no idea what the next line refeers to\n      // keeping this from original code to avoid any possible breaking-change\n      onScrollStop(); // init useMemo due to debounce use.\n      actionRef.current.focusToIndex = focusToIndex;\n      actionRef.current.focusToIndexWithoutScroll = onlyFocus;\n      actionRef.current.focusToList = focusToList;\n    }\n  }, [actionRef, onScrollStop, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);\n};\n"],
-  "mappings": "AAAA;ACGA;AAcO,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,mBAAmB,EAAE,eAAe;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACsB;AACtB,SAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,YAAM,gBAA+D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AAC1G,gBAAQ,OAAO,IAAI;AACnB,qBAAa;AAAA,MACf;AACA,YAAM,eAA6D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AACxG,uBAAe,OAAO,IAAI;AAAA,MAC5B;AACA,YAAM,cAAc,MAAM;AACxB,uBAAe,SAAS,MAAM;AAAA,MAChC;AAEA,gBAAU,QAAQ,gBAAgB;AAClC,gBAAU,QAAQ,oBAAoB;AAGtC,mBAAa;AACb,gBAAU,QAAQ,eAAe;AACjC,gBAAU,QAAQ,4BAA4B;AAC9C,gBAAU,QAAQ,cAAc;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,WAAW,cAAc,WAAW,gBAAgB,SAAS,cAAc,CAAC;AAClF;",
-  "names": []
+  "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;AACF,MAAwB;AACtB,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,YAAM,gBAA+D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AAC1G,gBAAQ,OAAO,IAAI;AACnB,qBAAa;AAAA,MACf;AACA,YAAM,eAA6D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AACxG,uBAAe,OAAO,IAAI;AAAA,MAC5B;AACA,YAAM,cAAc,MAAM;AACxB,uBAAe,SAAS,MAAM;AAAA,MAChC;AAEA,gBAAU,QAAQ,gBAAgB;AAClC,gBAAU,QAAQ,oBAAoB;AAGtC,mBAAa;AACb,gBAAU,QAAQ,eAAe;AACjC,gBAAU,QAAQ,4BAA4B;AAC9C,gBAAU,QAAQ,cAAc;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,WAAW,cAAc,WAAW,gBAAgB,SAAS,cAAc,CAAC;AAClF;",
+  "names": ["React"]
 }

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

@@ -66,14 +66,17 @@ const useChatContainerMessageList = (props) => {
     onlyFocus,
     onScrollStop
   });
-  return React2.useMemo(() => ({
-    propsWithDefault,
-    globalAttributes,
-    useVirtualHelpers,
-    loadMoreRef,
-    virtualListRef,
-    ...keyboardMethods
-  }), [globalAttributes, keyboardMethods, propsWithDefault, useVirtualHelpers, loadMoreRef, virtualListRef]);
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      globalAttributes,
+      useVirtualHelpers,
+      loadMoreRef,
+      virtualListRef,
+      ...keyboardMethods
+    }),
+    [globalAttributes, keyboardMethods, propsWithDefault, useVirtualHelpers, loadMoreRef, virtualListRef]
+  );
 };
 export {
   useChatContainerMessageList

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

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

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

@@ -7,47 +7,59 @@ const useFocusAndScrollHelpers = ({
   pendingOnScroll,
   virtualListRef
 }) => {
-  const onScrollStop = React2.useMemo(() => debounce(() => {
-    if (document.visibilityState === "hidden") {
-      pendingOnScroll.current = true;
-      return [];
-    }
-    if (!virtualListRef.current)
-      return [];
-    pendingOnScroll.current = false;
-    const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};
-    const list = virtualListRef.current.querySelectorAll('[data-element="chat-element-list-item"]');
-    const indexList = [];
-    list.forEach((item) => {
-      const { top: itemTop } = item.getBoundingClientRect();
-      const itemPadding = 10;
-      if (itemTop + itemPadding < bottom && itemTop + itemPadding > top)
-        indexList.push(item.dataset.index || "");
-    });
-    if (onScrollEnds)
-      onScrollEnds(indexList);
-    return indexList;
-  }, 500), [onScrollEnds, pendingOnScroll, virtualListRef]);
-  const onlyFocus = React2.useCallback((index) => {
-    virtualListRef.current?.querySelector(`[data-index="${index}"]`)?.focus();
-  }, [virtualListRef]);
-  const scrollAndFocus = React2.useCallback((index, opts = { align: "center" }) => {
-    vScroll(index, opts);
-    setTimeout(() => {
-      onlyFocus(index);
-    }, 300);
-    onScrollStop();
-  }, [onScrollStop, onlyFocus, vScroll]);
+  const onScrollStop = React2.useMemo(
+    () => debounce(() => {
+      if (document.visibilityState === "hidden") {
+        pendingOnScroll.current = true;
+        return [];
+      }
+      if (!virtualListRef.current)
+        return [];
+      pendingOnScroll.current = false;
+      const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};
+      const list = virtualListRef.current.querySelectorAll('[data-element="chat-element-list-item"]');
+      const indexList = [];
+      list.forEach((item) => {
+        const { top: itemTop } = item.getBoundingClientRect();
+        const itemPadding = 10;
+        if (itemTop + itemPadding < bottom && itemTop + itemPadding > top)
+          indexList.push(item.dataset.index || "");
+      });
+      if (onScrollEnds)
+        onScrollEnds(indexList);
+      return indexList;
+    }, 500),
+    [onScrollEnds, pendingOnScroll, virtualListRef]
+  );
+  const onlyFocus = React2.useCallback(
+    (index) => {
+      virtualListRef.current?.querySelector(`[data-index="${index}"]`)?.focus();
+    },
+    [virtualListRef]
+  );
+  const scrollAndFocus = React2.useCallback(
+    (index, opts = { align: "center" }) => {
+      vScroll(index, opts);
+      setTimeout(() => {
+        onlyFocus(index);
+      }, 300);
+      onScrollStop();
+    },
+    [onScrollStop, onlyFocus, vScroll]
+  );
   const checkPendingOnScroll = React2.useCallback(() => {
     if (pendingOnScroll.current === true)
       onScrollStop();
   }, [onScrollStop, pendingOnScroll]);
-  return React2.useMemo(() => ({
-    onScrollStop,
-    onlyFocus,
-    scrollAndFocus,
-    checkPendingOnScroll
-  }), [onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll]);
+  return React2.useMemo(
+    () => ({
+      onScrollStop,
+      onlyFocus,
+      scrollAndFocus,
+      checkPendingOnScroll
+    }),
+    [onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll]
+  );
 };
 export {
   useFocusAndScrollHelpers

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

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

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useGetNewMessages.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState } from 'react';\nimport { BubblePropsT } from '../../exported-related/bubble/props';\n\nexport const useGetNewMessages = (messages: BubblePropsT[]) => {\n  const [seenMessages, setSeenMessages] = useState<Record<BubblePropsT['dsId'], true>>({});\n  const newMessages = useMemo(() => {\n    const list: BubblePropsT[] = [];\n    messages.forEach((message) => {\n      if (!(message.dsId in seenMessages)) {\n        list.push(message);\n      }\n    });\n    setSeenMessages(Object.fromEntries(messages.map((m) => [m.dsId, true])));\n    return list;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [messages]);\n\n  return newMessages;\n};\n"],
-  "mappings": "AAAA;ACAA;AAGO,MAAM,oBAAoB,CAAC,aAA6B;AAC7D,QAAM,CAAC,cAAc,mBAAmB,SAA6C,CAAC,CAAC;AACvF,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,OAAuB,CAAC;AAC9B,aAAS,QAAQ,CAAC,YAAY;AAC5B,UAAI,CAAE,SAAQ,QAAQ,eAAe;AACnC,aAAK,KAAK,OAAO;AAAA,MACnB;AAAA,IACF,CAAC;AACD,oBAAgB,OAAO,YAAY,SAAS,IAAI,CAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC;AACvE,WAAO;AAAA,EAET,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AACT;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,gBAAgB;AAG3B,MAAM,oBAAoB,CAAC,aAA6B;AAC7D,QAAM,CAAC,cAAc,eAAe,IAAI,SAA6C,CAAC,CAAC;AACvF,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,OAAuB,CAAC;AAC9B,aAAS,QAAQ,CAAC,YAAY;AAC5B,UAAI,EAAE,QAAQ,QAAQ,eAAe;AACnC,aAAK,KAAK,OAAO;AAAA,MACnB;AAAA,IACF,CAAC;AACD,oBAAgB,OAAO,YAAY,SAAS,IAAI,CAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC;AACvE,WAAO;AAAA,EAET,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AACT;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useGlobalEventListener.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { type DebouncedFunc } from 'lodash';\nimport { type DSChatT } from '../../react-desc-prop-types';\n\ntype UseGlobalEventListenerArgs = {\n  propsWithDefault: DSChatT.MessagesListProps;\n  virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n  onScrollStop: DebouncedFunc<() => string[]>;\n  checkPendingOnScroll: GenericFunc;\n};\n\nexport const useGlobalEventListener = ({\n  propsWithDefault: { onScrollEnds },\n  virtualListRef,\n  onScrollStop,\n  checkPendingOnScroll,\n}: UseGlobalEventListenerArgs) => {\n  React.useEffect(() => {\n    let handlerCallback: ReturnType<typeof setTimeout>;\n    const localVirtualRef = virtualListRef.current;\n    const onScroll = () => {\n      if (handlerCallback) clearTimeout(handlerCallback);\n      handlerCallback = setTimeout(onScrollStop, 300);\n    };\n    if (onScrollEnds) {\n      virtualListRef.current?.addEventListener('scroll', onScroll);\n    }\n    document.addEventListener('visibilitychange', checkPendingOnScroll);\n    return () => {\n      if (handlerCallback) clearTimeout(handlerCallback);\n      if (onScrollEnds) localVirtualRef.removeEventListener('scroll', onScroll);\n      document.removeEventListener('visibilitychange', checkPendingOnScroll);\n    };\n  }, [onScrollStop, onScrollEnds, checkPendingOnScroll, virtualListRef]);\n};\n"],
-  "mappings": "AAAA;ACAA;AAWO,MAAM,yBAAyB,CAAC;AAAA,EACrC,kBAAkB,EAAE;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,MACgC;AAChC,SAAM,UAAU,MAAM;AACpB,QAAI;AACJ,UAAM,kBAAkB,eAAe;AACvC,UAAM,WAAW,MAAM;AACrB,UAAI;AAAiB,qBAAa,eAAe;AACjD,wBAAkB,WAAW,cAAc,GAAG;AAAA,IAChD;AACA,QAAI,cAAc;AAChB,qBAAe,SAAS,iBAAiB,UAAU,QAAQ;AAAA,IAC7D;AACA,aAAS,iBAAiB,oBAAoB,oBAAoB;AAClE,WAAO,MAAM;AACX,UAAI;AAAiB,qBAAa,eAAe;AACjD,UAAI;AAAc,wBAAgB,oBAAoB,UAAU,QAAQ;AACxE,eAAS,oBAAoB,oBAAoB,oBAAoB;AAAA,IACvE;AAAA,EACF,GAAG,CAAC,cAAc,cAAc,sBAAsB,cAAc,CAAC;AACvE;",
-  "names": []
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAWX,MAAM,yBAAyB,CAAC;AAAA,EACrC,kBAAkB,EAAE,aAAa;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI;AACJ,UAAM,kBAAkB,eAAe;AACvC,UAAM,WAAW,MAAM;AACrB,UAAI;AAAiB,qBAAa,eAAe;AACjD,wBAAkB,WAAW,cAAc,GAAG;AAAA,IAChD;AACA,QAAI,cAAc;AAChB,qBAAe,SAAS,iBAAiB,UAAU,QAAQ;AAAA,IAC7D;AACA,aAAS,iBAAiB,oBAAoB,oBAAoB;AAClE,WAAO,MAAM;AACX,UAAI;AAAiB,qBAAa,eAAe;AACjD,UAAI;AAAc,wBAAgB,oBAAoB,UAAU,QAAQ;AACxE,eAAS,oBAAoB,oBAAoB,oBAAoB;AAAA,IACvE;AAAA,EACF,GAAG,CAAC,cAAc,cAAc,sBAAsB,cAAc,CAAC;AACvE;",
+  "names": ["React"]
 }

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

@@ -10,103 +10,109 @@ const useKeyboard = ({
   onlyFocus,
   onScrollStop
 }) => {
-  const handleKey = React2.useCallback((e) => {
-    const { key, currentTarget } = e;
-    const index = currentTarget.dataset?.index ? Number(currentTarget.dataset.index) : void 0;
-    const isIndexNumber = getIsNumber(index);
-    e.stopPropagation();
-    switch (key) {
-      case "ArrowUp":
-        e.preventDefault();
-        if (index && index > 0) {
-          (virtualListRef.current?.querySelector(`[data-index="${index - 1}"]`)).focus();
-        } else if (hasMoreItems === "top") {
-          loadMoreRef.current?.focus();
-        }
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        if (messages?.length && isIndexNumber && index < messages.length - 1) {
-          (virtualListRef.current?.querySelector(`[data-index="${index + 1}"]`)).focus();
-        }
-        break;
-      case "Home":
-        e.preventDefault();
-        scrollAndFocus(0);
-        break;
-      case "End":
-        e.preventDefault();
-        if (messages?.length)
-          scrollAndFocus(messages.length - 1);
-        break;
-      case "Tab":
-        if (hasMoreItems === "bottom" && !e.shiftKey) {
+  const handleKey = React2.useCallback(
+    (e) => {
+      const { key, currentTarget } = e;
+      const index = currentTarget.dataset?.index ? Number(currentTarget.dataset.index) : void 0;
+      const isIndexNumber = getIsNumber(index);
+      e.stopPropagation();
+      switch (key) {
+        case "ArrowUp":
           e.preventDefault();
-          loadMoreRef.current?.focus();
-        } else if (hasMoreItems === "top" && e.shiftKey) {
+          if (index && index > 0) {
+            (virtualListRef.current?.querySelector(`[data-index="${index - 1}"]`)).focus();
+          } else if (hasMoreItems === "top") {
+            loadMoreRef.current?.focus();
+          }
+          break;
+        case "ArrowDown":
           e.preventDefault();
-          loadMoreRef.current?.focus();
-        } else if (!e.shiftKey) {
-          if (bannerPosition) {
-            e.preventDefault();
-            bannerRef?.current?.focusOnWrapper();
+          if (messages?.length && isIndexNumber && index < messages.length - 1) {
+            (virtualListRef.current?.querySelector(`[data-index="${index + 1}"]`)).focus();
           }
-        } else {
+          break;
+        case "Home":
+          e.preventDefault();
+          scrollAndFocus(0);
+          break;
+        case "End":
           e.preventDefault();
-          virtualListRef.current?.focus();
-        }
-        break;
-      default:
-        break;
-    }
-  }, [hasMoreItems, messages.length, scrollAndFocus, virtualListRef, loadMoreRef, bannerPosition, bannerRef]);
-  const handleListKey = React2.useCallback((e) => {
-    const { key } = e;
-    switch (key) {
-      case "ArrowUp":
-        e.preventDefault();
-        if (document.activeElement !== loadMoreRef.current) {
-          onlyFocus(onScrollStop()?.shift());
-        }
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        if (document.activeElement === loadMoreRef.current) {
-          virtualListRef.current?.querySelector(`[data-index="0"]`)?.focus();
-        } else {
-          onlyFocus(onScrollStop()?.pop());
-        }
-        break;
-      case "Home":
-        e.preventDefault();
-        scrollAndFocus(0);
-        break;
-      case "End":
-        e.preventDefault();
-        if (messages?.length)
-          scrollAndFocus(messages.length - 1);
-        break;
-      case "Tab":
-        if (document.activeElement !== loadMoreRef.current) {
+          if (messages?.length)
+            scrollAndFocus(messages.length - 1);
+          break;
+        case "Tab":
           if (hasMoreItems === "bottom" && !e.shiftKey) {
             e.preventDefault();
             loadMoreRef.current?.focus();
+          } else if (hasMoreItems === "top" && e.shiftKey) {
+            e.preventDefault();
+            loadMoreRef.current?.focus();
           } else if (!e.shiftKey) {
+            if (bannerPosition) {
+              e.preventDefault();
+              bannerRef?.current?.focusOnWrapper();
+            }
+          } else {
             e.preventDefault();
-            actionRef.current?.focusToComposer?.();
+            virtualListRef.current?.focus();
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [hasMoreItems, messages.length, scrollAndFocus, virtualListRef, loadMoreRef, bannerPosition, bannerRef]
+  );
+  const handleListKey = React2.useCallback(
+    (e) => {
+      const { key } = e;
+      switch (key) {
+        case "ArrowUp":
+          e.preventDefault();
+          if (document.activeElement !== loadMoreRef.current) {
+            onlyFocus(onScrollStop()?.shift());
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (document.activeElement === loadMoreRef.current) {
+            virtualListRef.current?.querySelector(`[data-index="0"]`)?.focus();
+          } else {
+            onlyFocus(onScrollStop()?.pop());
           }
-        } else if (!e.shiftKey) {
+          break;
+        case "Home":
           e.preventDefault();
-          actionRef.current?.focusToComposer?.();
-        } else {
+          scrollAndFocus(0);
+          break;
+        case "End":
           e.preventDefault();
-          virtualListRef.current?.focus();
-        }
-        break;
-      default:
-        break;
-    }
-  }, [actionRef, hasMoreItems, loadMoreRef, messages.length, onScrollStop, onlyFocus, scrollAndFocus, virtualListRef]);
+          if (messages?.length)
+            scrollAndFocus(messages.length - 1);
+          break;
+        case "Tab":
+          if (document.activeElement !== loadMoreRef.current) {
+            if (hasMoreItems === "bottom" && !e.shiftKey) {
+              e.preventDefault();
+              loadMoreRef.current?.focus();
+            } else if (!e.shiftKey) {
+              e.preventDefault();
+              actionRef.current?.focusToComposer?.();
+            }
+          } else if (!e.shiftKey) {
+            e.preventDefault();
+            actionRef.current?.focusToComposer?.();
+          } else {
+            e.preventDefault();
+            virtualListRef.current?.focus();
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [actionRef, hasMoreItems, loadMoreRef, messages.length, onScrollStop, onlyFocus, scrollAndFocus, virtualListRef]
+  );
   return React2.useMemo(() => ({ handleKey, handleListKey }), [handleKey, handleListKey]);
 };
 export {