stream-chat-react 12.2.1 → 12.3.0

package/dist/components/ChatView/ChatView.js

@@ -83,10 +83,12 @@ const ThreadAdapter = ({ children }) => {
     useActiveThread({ activeThread });
     return React.createElement(ThreadProvider, { thread: activeThread }, children);
 };
-const selector = (nextValue) => [nextValue.unreadThreadCount];
+const selector = ({ unreadThreadCount }) => ({
+    unreadThreadCount,
+});
 const ChatViewSelector = () => {
     const { client } = useChatContext();
-    const [unreadThreadCount] = useStateStore(client.threads.state, selector);
+    const { unreadThreadCount } = useStateStore(client.threads.state, selector);
     const { activeChatView, setActiveChatView } = useContext(ChatViewContext);
     return (React.createElement("div", { className: 'str-chat__chat-view__selector' },
         React.createElement("button", { "aria-selected": activeChatView === 'channels', className: 'str-chat__chat-view__selector-button', onPointerDown: () => setActiveChatView('channels'), role: 'tab' },

package/dist/components/Dialog/hooks/useDialog.js

@@ -10,17 +10,17 @@ export const useDialog = ({ id }) => {
 };
 export const useDialogIsOpen = (id) => {
     const { dialogManager } = useDialogManager();
-    const dialogIsOpenSelector = useCallback(({ dialogsById }) => [!!dialogsById[id]?.isOpen], [id]);
-    return useStateStore(dialogManager.state, dialogIsOpenSelector)[0];
+    const dialogIsOpenSelector = useCallback(({ dialogsById }) => ({ isOpen: !!dialogsById[id]?.isOpen }), [id]);
+    return useStateStore(dialogManager.state, dialogIsOpenSelector).isOpen;
 };
-const openedDialogCountSelector = (nextValue) => [
-    Object.values(nextValue.dialogsById).reduce((count, dialog) => {
+const openedDialogCountSelector = (nextValue) => ({
+    openedDialogCount: Object.values(nextValue.dialogsById).reduce((count, dialog) => {
         if (dialog.isOpen)
             return count + 1;
         return count;
     }, 0),
-];
+});
 export const useOpenedDialogCount = () => {
     const { dialogManager } = useDialogManager();
-    return useStateStore(dialogManager.state, openedDialogCountSelector)[0];
+    return useStateStore(dialogManager.state, openedDialogCountSelector).openedDialogCount;
 };

package/dist/components/MessageList/MessageList.js

@@ -125,9 +125,12 @@ const MessageListWithContext = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [highlightedMessageId]);
     const showEmptyStateIndicator = elements.length === 0 && !threadList;
+    const dialogManagerId = threadList
+        ? 'message-list-dialog-manager-thread'
+        : 'message-list-dialog-manager';
     return (React.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } },
         React.createElement(MessageListMainPanel, null,
-            React.createElement(DialogManagerProvider, { id: 'message-list-dialog-manager' },
+            React.createElement(DialogManagerProvider, { id: dialogManagerId },
                 !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
                 React.createElement("div", { className: clsx(messageListClass, customClasses?.threadList), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React.createElement(EmptyStateIndicator, { listType: threadList ? 'thread' : 'message' })) : (React.createElement(InfiniteScroll, { className: 'str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React.createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React.createElement(LoadingIndicator, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore, threshold: loadMoreScrollThreshold, ...restInternalInfiniteScrollProps },
                     React.createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -189,9 +189,12 @@ const VirtualizedMessageListWithContext = (props) => {
     }, [highlightedMessageId, processedMessages]);
     if (!processedMessages)
         return null;
+    const dialogManagerId = threadList
+        ? 'virtualized-message-list-dialog-manager-thread'
+        : 'virtualized-message-list-dialog-manager';
     return (React.createElement(React.Fragment, null,
         React.createElement(MessageListMainPanel, null,
-            React.createElement(DialogManagerProvider, { id: 'virtualized-message-list-dialog-manager' },
+            React.createElement(DialogManagerProvider, { id: dialogManagerId },
                 !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
                 React.createElement("div", { className: customClasses?.virtualizedMessageList || 'str-chat__virtual-list' },
                     React.createElement(Virtuoso, { atBottomStateChange: atBottomStateChange, atBottomThreshold: 100, atTopStateChange: atTopStateChange, atTopThreshold: 100, className: 'str-chat__message-list-scroll', components: {

package/dist/components/Thread/Thread.js

@@ -21,16 +21,16 @@ export const Thread = (props) => {
     // FIXME: TS is having trouble here as at least one of the two would always be defined
     React.createElement(ThreadInner, { ...props, key: `thread-${(thread ?? threadInstance)?.id}-${channel?.cid}` }));
 };
-const selector = (nextValue) => [
-    nextValue.replies,
-    nextValue.pagination.isLoadingPrev,
-    nextValue.pagination.isLoadingNext,
-    nextValue.parentMessage,
-];
+const selector = (nextValue) => ({
+    isLoadingNext: nextValue.pagination.isLoadingNext,
+    isLoadingPrev: nextValue.pagination.isLoadingPrev,
+    parentMessage: nextValue.parentMessage,
+    replies: nextValue.replies,
+});
 const ThreadInner = (props) => {
     const { additionalMessageInputProps, additionalMessageListProps, additionalParentMessageProps, additionalVirtualizedMessageListProps, autoFocus = true, enableDateSeparator = false, Input: PropInput, Message: PropMessage, messageActions = Object.keys(MESSAGE_ACTIONS), virtualized, } = props;
     const threadInstance = useThreadContext();
-    const [latestReplies, isLoadingPrev, isLoadingNext, parentMessage] = useStateStore(threadInstance?.state, selector) ?? [];
+    const { isLoadingNext, isLoadingPrev, parentMessage, replies } = useStateStore(threadInstance?.state, selector) ?? {};
     const { thread, threadHasMore, threadLoadingMore, threadMessages = [], threadSuppressAutoscroll, } = useChannelStateContext('Thread');
     const { closeThread, loadMoreThread } = useChannelActionContext('Thread');
     const { customClasses } = useChatContext('Thread');
@@ -53,7 +53,7 @@ const ThreadInner = (props) => {
             loadingMoreNewer: isLoadingNext,
             loadMore: threadInstance.loadPrevPage,
             loadMoreNewer: threadInstance.loadNextPage,
-            messages: latestReplies,
+            messages: replies,
         }
         : {
             hasMore: threadHasMore,

package/dist/components/Threads/ThreadList/ThreadList.js

@@ -6,7 +6,7 @@ import { ThreadListUnseenThreadsBanner as DefaultThreadListUnseenThreadsBanner }
 import { ThreadListLoadingIndicator as DefaultThreadListLoadingIndicator } from './ThreadListLoadingIndicator';
 import { useChatContext, useComponentContext } from '../../../context';
 import { useStateStore } from '../../../store';
-const selector = (nextValue) => [nextValue.threads];
+const selector = (nextValue) => ({ threads: nextValue.threads });
 const computeItemKey = (_, item) => item.id;
 export const useThreadList = () => {
     const { client } = useChatContext();
@@ -30,7 +30,7 @@ export const useThreadList = () => {
 export const ThreadList = ({ virtuosoProps }) => {
     const { client } = useChatContext();
     const { ThreadListItem = DefaultThreadListItem, ThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder, ThreadListLoadingIndicator = DefaultThreadListLoadingIndicator, ThreadListUnseenThreadsBanner = DefaultThreadListUnseenThreadsBanner, } = useComponentContext();
-    const [threads] = useStateStore(client.threads.state, selector);
+    const { threads } = useStateStore(client.threads.state, selector);
     useThreadList();
     return (React.createElement("div", { className: 'str-chat__thread-list-container' },
         React.createElement(ThreadListUnseenThreadsBanner, null),

package/dist/components/Threads/ThreadList/ThreadListItemUI.js

@@ -42,14 +42,14 @@ export const ThreadListItemUI = (props) => {
     const { client } = useChatContext();
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const thread = useThreadListItemContext();
-    const selector = useCallback((nextValue) => [
-        nextValue.replies.at(-1),
-        (client.userID && nextValue.read[client.userID]?.unreadMessageCount) || 0,
-        nextValue.parentMessage,
-        nextValue.channel,
-        nextValue.deletedAt,
-    ], [client]);
-    const [latestReply, ownUnreadMessageCount, parentMessage, channel, deletedAt] = useStateStore(thread.state, selector);
+    const selector = useCallback((nextValue) => ({
+        channel: nextValue.channel,
+        deletedAt: nextValue.deletedAt,
+        latestReply: nextValue.replies.at(-1),
+        ownUnreadMessageCount: (client.userID && nextValue.read[client.userID]?.unreadMessageCount) || 0,
+        parentMessage: nextValue.parentMessage,
+    }), [client]);
+    const { channel, deletedAt, latestReply, ownUnreadMessageCount, parentMessage } = useStateStore(thread.state, selector);
     const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });
     const { activeThread, setActiveThread } = useThreadsViewContext();
     const avatarProps = deletedAt ? null : latestReply?.user;

package/dist/components/Threads/ThreadList/ThreadListLoadingIndicator.js

@@ -2,11 +2,13 @@ import React from 'react';
 import { LoadingIndicator as DefaultLoadingIndicator } from '../../Loading';
 import { useChatContext, useComponentContext } from '../../../context';
 import { useStateStore } from '../../../store';
-const selector = (nextValue) => [nextValue.pagination.isLoadingNext];
+const selector = (nextValue) => ({
+    isLoadingNext: nextValue.pagination.isLoadingNext,
+});
 export const ThreadListLoadingIndicator = () => {
     const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext();
     const { client } = useChatContext();
-    const [isLoadingNext] = useStateStore(client.threads.state, selector);
+    const { isLoadingNext } = useStateStore(client.threads.state, selector);
     if (!isLoadingNext)
         return null;
     return (React.createElement("div", { className: 'str-chat__thread-list-loading-indicator' },

package/dist/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.js

@@ -2,10 +2,12 @@ import React from 'react';
 import { Icon } from '../icons';
 import { useChatContext } from '../../../context';
 import { useStateStore } from '../../../store';
-const selector = (nextValue) => [nextValue.unseenThreadIds];
+const selector = (nextValue) => ({
+    unseenThreadIds: nextValue.unseenThreadIds,
+});
 export const ThreadListUnseenThreadsBanner = () => {
     const { client } = useChatContext();
-    const [unseenThreadIds] = useStateStore(client.threads.state, selector);
+    const { unseenThreadIds } = useStateStore(client.threads.state, selector);
     if (!unseenThreadIds.length)
         return null;
     return (React.createElement("div", { className: 'str-chat__unseen-threads-banner' },

package/dist/index.browser.cjs

@@ -18026,20 +18026,20 @@ var useDialog = ({ id }) => {
 var useDialogIsOpen = (id) => {
   const { dialogManager } = useDialogManager();
   const dialogIsOpenSelector = (0, import_react7.useCallback)(
-    ({ dialogsById }) => [!!dialogsById[id]?.isOpen],
+    ({ dialogsById }) => ({ isOpen: !!dialogsById[id]?.isOpen }),
     [id]
   );
-  return useStateStore(dialogManager.state, dialogIsOpenSelector)[0];
+  return useStateStore(dialogManager.state, dialogIsOpenSelector).isOpen;
 };
-var openedDialogCountSelector = (nextValue) => [
-  Object.values(nextValue.dialogsById).reduce((count, dialog) => {
+var openedDialogCountSelector = (nextValue) => ({
+  openedDialogCount: Object.values(nextValue.dialogsById).reduce((count, dialog) => {
     if (dialog.isOpen) return count + 1;
     return count;
   }, 0)
-];
+});
 var useOpenedDialogCount = () => {
   const { dialogManager } = useDialogManager();
-  return useStateStore(dialogManager.state, openedDialogCountSelector)[0];
+  return useStateStore(dialogManager.state, openedDialogCountSelector).openedDialogCount;
 };
 
 // src/components/Dialog/DialogPortal.tsx
@@ -39353,10 +39353,12 @@ var ThreadAdapter = ({ children }) => {
   useActiveThread({ activeThread });
   return /* @__PURE__ */ import_react89.default.createElement(ThreadProvider, { thread: activeThread }, children);
 };
-var selector = (nextValue) => [nextValue.unreadThreadCount];
+var selector = ({ unreadThreadCount }) => ({
+  unreadThreadCount
+});
 var ChatViewSelector = () => {
   const { client } = useChatContext();
-  const [unreadThreadCount] = useStateStore(client.threads.state, selector);
+  const { unreadThreadCount } = useStateStore(client.threads.state, selector);
   const { activeChatView, setActiveChatView } = (0, import_react89.useContext)(ChatViewContext);
   return /* @__PURE__ */ import_react89.default.createElement("div", { className: "str-chat__chat-view__selector" }, /* @__PURE__ */ import_react89.default.createElement(
     "button",
@@ -39419,16 +39421,16 @@ var ThreadListItemUI = (props) => {
   const { client } = useChatContext();
   const thread = useThreadListItemContext();
   const selector6 = (0, import_react90.useCallback)(
-    (nextValue) => [
-      nextValue.replies.at(-1),
-      client.userID && nextValue.read[client.userID]?.unreadMessageCount || 0,
-      nextValue.parentMessage,
-      nextValue.channel,
-      nextValue.deletedAt
-    ],
+    (nextValue) => ({
+      channel: nextValue.channel,
+      deletedAt: nextValue.deletedAt,
+      latestReply: nextValue.replies.at(-1),
+      ownUnreadMessageCount: client.userID && nextValue.read[client.userID]?.unreadMessageCount || 0,
+      parentMessage: nextValue.parentMessage
+    }),
     [client]
   );
-  const [latestReply, ownUnreadMessageCount, parentMessage, channel, deletedAt] = useStateStore(
+  const { channel, deletedAt, latestReply, ownUnreadMessageCount, parentMessage } = useStateStore(
     thread.state,
     selector6
   );
@@ -39467,10 +39469,12 @@ var ThreadListEmptyPlaceholder = () => /* @__PURE__ */ import_react92.default.cr
 
 // src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx
 var import_react93 = __toESM(require("react"));
-var selector2 = (nextValue) => [nextValue.unseenThreadIds];
+var selector2 = (nextValue) => ({
+  unseenThreadIds: nextValue.unseenThreadIds
+});
 var ThreadListUnseenThreadsBanner = () => {
   const { client } = useChatContext();
-  const [unseenThreadIds] = useStateStore(client.threads.state, selector2);
+  const { unseenThreadIds } = useStateStore(client.threads.state, selector2);
   if (!unseenThreadIds.length) return null;
   return /* @__PURE__ */ import_react93.default.createElement("div", { className: "str-chat__unseen-threads-banner" }, unseenThreadIds.length, " unread threads", /* @__PURE__ */ import_react93.default.createElement(
     "button",
@@ -39484,17 +39488,19 @@ var ThreadListUnseenThreadsBanner = () => {
 
 // src/components/Threads/ThreadList/ThreadListLoadingIndicator.tsx
 var import_react94 = __toESM(require("react"));
-var selector3 = (nextValue) => [nextValue.pagination.isLoadingNext];
+var selector3 = (nextValue) => ({
+  isLoadingNext: nextValue.pagination.isLoadingNext
+});
 var ThreadListLoadingIndicator = () => {
   const { LoadingIndicator: LoadingIndicator2 = LoadingIndicator } = useComponentContext();
   const { client } = useChatContext();
-  const [isLoadingNext] = useStateStore(client.threads.state, selector3);
+  const { isLoadingNext } = useStateStore(client.threads.state, selector3);
   if (!isLoadingNext) return null;
   return /* @__PURE__ */ import_react94.default.createElement("div", { className: "str-chat__thread-list-loading-indicator" }, /* @__PURE__ */ import_react94.default.createElement(LoadingIndicator2, null));
 };
 
 // src/components/Threads/ThreadList/ThreadList.tsx
-var selector4 = (nextValue) => [nextValue.threads];
+var selector4 = (nextValue) => ({ threads: nextValue.threads });
 var computeItemKey = (_, item2) => item2.id;
 var useThreadList = () => {
   const { client } = useChatContext();
@@ -39523,7 +39529,7 @@ var ThreadList = ({ virtuosoProps }) => {
     ThreadListLoadingIndicator: ThreadListLoadingIndicator2 = ThreadListLoadingIndicator,
     ThreadListUnseenThreadsBanner: ThreadListUnseenThreadsBanner2 = ThreadListUnseenThreadsBanner
   } = useComponentContext();
-  const [threads] = useStateStore(client.threads.state, selector4);
+  const { threads } = useStateStore(client.threads.state, selector4);
   useThreadList();
   return /* @__PURE__ */ import_react95.default.createElement("div", { className: "str-chat__thread-list-container" }, /* @__PURE__ */ import_react95.default.createElement(ThreadListUnseenThreadsBanner2, null), /* @__PURE__ */ import_react95.default.createElement(
     import_react_virtuoso.Virtuoso,
@@ -44267,7 +44273,8 @@ var MessageListWithContext = (props) => {
     }
   }, [highlightedMessageId]);
   const showEmptyStateIndicator = elements.length === 0 && !threadList;
-  return /* @__PURE__ */ import_react176.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react176.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react176.default.createElement(DialogManagerProvider, { id: "message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react176.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react176.default.createElement(
+  const dialogManagerId = threadList ? "message-list-dialog-manager-thread" : "message-list-dialog-manager";
+  return /* @__PURE__ */ import_react176.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react176.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react176.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react176.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react176.default.createElement(
     "div",
     {
       className: (0, import_clsx38.default)(messageListClass, customClasses?.threadList),
@@ -44980,7 +44987,8 @@ var VirtualizedMessageListWithContext = (props) => {
     };
   }, [highlightedMessageId, processedMessages]);
   if (!processedMessages) return null;
-  return /* @__PURE__ */ import_react186.default.createElement(import_react186.default.Fragment, null, /* @__PURE__ */ import_react186.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react186.default.createElement(DialogManagerProvider, { id: "virtualized-message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react186.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react186.default.createElement("div", { className: customClasses?.virtualizedMessageList || "str-chat__virtual-list" }, /* @__PURE__ */ import_react186.default.createElement(
+  const dialogManagerId = threadList ? "virtualized-message-list-dialog-manager-thread" : "virtualized-message-list-dialog-manager";
+  return /* @__PURE__ */ import_react186.default.createElement(import_react186.default.Fragment, null, /* @__PURE__ */ import_react186.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react186.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react186.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react186.default.createElement("div", { className: customClasses?.virtualizedMessageList || "str-chat__virtual-list" }, /* @__PURE__ */ import_react186.default.createElement(
     import_react_virtuoso3.Virtuoso,
     {
       atBottomStateChange,
@@ -47787,12 +47795,12 @@ var Thread = (props) => {
     /* @__PURE__ */ import_react222.default.createElement(ThreadInner, { ...props, key: `thread-${(thread ?? threadInstance)?.id}-${channel?.cid}` })
   );
 };
-var selector5 = (nextValue) => [
-  nextValue.replies,
-  nextValue.pagination.isLoadingPrev,
-  nextValue.pagination.isLoadingNext,
-  nextValue.parentMessage
-];
+var selector5 = (nextValue) => ({
+  isLoadingNext: nextValue.pagination.isLoadingNext,
+  isLoadingPrev: nextValue.pagination.isLoadingPrev,
+  parentMessage: nextValue.parentMessage,
+  replies: nextValue.replies
+});
 var ThreadInner = (props) => {
   const {
     additionalMessageInputProps,
@@ -47807,7 +47815,7 @@ var ThreadInner = (props) => {
     virtualized
   } = props;
   const threadInstance = useThreadContext();
-  const [latestReplies, isLoadingPrev, isLoadingNext, parentMessage] = useStateStore(threadInstance?.state, selector5) ?? [];
+  const { isLoadingNext, isLoadingPrev, parentMessage, replies } = useStateStore(threadInstance?.state, selector5) ?? {};
   const {
     thread,
     threadHasMore,
@@ -47839,7 +47847,7 @@ var ThreadInner = (props) => {
     loadingMoreNewer: isLoadingNext,
     loadMore: threadInstance.loadPrevPage,
     loadMoreNewer: threadInstance.loadNextPage,
-    messages: latestReplies
+    messages: replies
   } : {
     hasMore: threadHasMore,
     loadingMore: threadLoadingMore,