stream-chat-react 12.2.2 → 12.4.0

package/dist/index.browser.cjs

@@ -17487,6 +17487,7 @@ __export(src_exports, {
   Message: () => Message,
   MessageActions: () => MessageActions,
   MessageActionsBox: () => MessageActionsBox,
+  MessageActionsWrapper: () => MessageActionsWrapper,
   MessageBounceProvider: () => MessageBounceProvider,
   MessageContext: () => MessageContext,
   MessageDeleted: () => MessageDeleted,
@@ -18026,20 +18027,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
@@ -34175,6 +34176,7 @@ var de_default = {
   "People matching": "Passende Personen",
   Pin: "Pin",
   "Pinned by": "Gepinnt von",
+  Quote: "Quote",
   "Recording format is not supported and cannot be reproduced": "Aufnahmeformat wird nicht unterst\xFCtzt und kann nicht wiedergegeben werden",
   Reply: "Antworten",
   "Reply to Message": "Auf Nachricht antworten",
@@ -34328,6 +34330,7 @@ var en_default = {
   "People matching": "People matching",
   Pin: "Pin",
   "Pinned by": "Pinned by",
+  Quote: "Quote",
   "Recording format is not supported and cannot be reproduced": "Recording format is not supported and cannot be reproduced",
   Reply: "Reply",
   "Reply to Message": "Reply to Message",
@@ -34471,6 +34474,7 @@ var es_default = {
   "People matching": "Personas que coinciden",
   Pin: "Alfiler",
   "Pinned by": "Fijado por",
+  Quote: "Quote",
   "Recording format is not supported and cannot be reproduced": "El formato de grabaci\xF3n no es compatible y no se puede reproducir",
   Reply: "Respuesta",
   "Reply to Message": "Responder al mensaje",
@@ -34628,6 +34632,7 @@ var fr_default = {
   "People matching": "Correspondance de personnes",
   Pin: "\xC9pingle",
   "Pinned by": "\xC9pingl\xE9 par",
+  Quote: "Quote",
   "Recording format is not supported and cannot be reproduced": "Le format d'enregistrement n'est pas pris en charge et ne peut pas \xEAtre reproduit",
   Reply: "R\xE9ponse",
   "Reply to Message": "R\xE9pondre au message",
@@ -34786,6 +34791,7 @@ var hi_default = {
   "People matching": "\u092E\u0947\u0932 \u0916\u093E\u0924\u0947 \u0932\u094B\u0917",
   Pin: "\u092A\u093F\u0928",
   "Pinned by": "\u0926\u094D\u0935\u093E\u0930\u093E \u092A\u093F\u0928 \u0915\u093F\u092F\u093E \u0917\u092F\u093E",
+  Quote: "Quote",
   "Recording format is not supported and cannot be reproduced": "\u0930\u0947\u0915\u0949\u0930\u094D\u0921\u093F\u0902\u0917 \u092B\u093C\u0949\u0930\u094D\u092E\u0947\u091F \u0938\u092E\u0930\u094D\u0925\u093F\u0924 \u0928\u0939\u0940\u0902 \u0939\u0948 \u0914\u0930 \u092A\u0941\u0928\u0903 \u0909\u0924\u094D\u092A\u0928\u094D\u0928 \u0928\u0939\u0940\u0902 \u0915\u093F\u092F\u093E \u091C\u093E \u0938\u0915\u0924\u093E",
   Reply: "\u091C\u0935\u093E\u092C \u0926\u0947 \u0926\u094B",
   "Reply to Message": "\u0938\u0902\u0926\u0947\u0936 \u0915\u093E \u091C\u0935\u093E\u092C \u0926\u0947\u0902",
@@ -34939,6 +34945,7 @@ var it_default = {
   "People matching": "Persone che corrispondono",
   Pin: "Pin",
   "Pinned by": "Appuntato da",
+  Quote: "Quote",
   "Recording format is not supported and cannot be reproduced": "Il formato di registrazione non \xE8 supportato e non pu\xF2 essere riprodotto",
   Reply: "Rispondere",
   "Reply to Message": "Rispondi al messaggio",
@@ -35096,6 +35103,7 @@ var ja_default = {
   "People matching": "\u4E00\u81F4\u3059\u308B\u4EBA",
   Pin: "\u30D4\u30F3",
   "Pinned by": "\u30D4\u30F3\u3057\u305F\u65B9",
+  Quote: "Quote",
   "Recording format is not supported and cannot be reproduced": "\u9332\u97F3\u5F62\u5F0F\u306F\u30B5\u30DD\u30FC\u30C8\u3055\u308C\u3066\u304A\u3089\u305A\u3001\u518D\u751F\u3067\u304D\u307E\u305B\u3093",
   Reply: "\u8FD4\u4E8B",
   "Reply to Message": "\u30E1\u30C3\u30BB\u30FC\u30B8\u306B\u8FD4\u4FE1",
@@ -35247,6 +35255,7 @@ var ko_default = {
   "People matching": "\uC77C\uCE58\uD558\uB294 \uC0AC\uB78C",
   Pin: "\uD540",
   "Pinned by": "\uD540\uD588\uB358 \uBD84:",
+  Quote: "Quote",
   "Recording format is not supported and cannot be reproduced": "\uB179\uC74C \uD615\uC2DD\uC774 \uC9C0\uC6D0\uB418\uC9C0 \uC54A\uC73C\uBBC0\uB85C \uC7AC\uC0DD\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4",
   Reply: "\uB2F5\uC7A5",
   "Reply to Message": "\uBA54\uC2DC\uC9C0\uC5D0 \uB2F5\uC7A5",
@@ -35398,6 +35407,7 @@ var nl_default = {
   "People matching": "Mensen die matchen",
   Pin: "Pin",
   "Pinned by": "Vastgemaakt door",
+  Quote: "Quote",
   "Recording format is not supported and cannot be reproduced": "Opnameformaat wordt niet ondersteund en kan niet worden gereproduceerd",
   Reply: "Antwoord",
   "Reply to Message": "Antwoord op bericht",
@@ -35551,6 +35561,7 @@ var pt_default = {
   "People matching": "Pessoas correspondentes",
   Pin: "Fixar",
   "Pinned by": "Fixado por",
+  Quote: "Quote",
   "Recording format is not supported and cannot be reproduced": "Formato de grava\xE7\xE3o n\xE3o \xE9 suportado e n\xE3o pode ser reproduzido",
   Reply: "Responder",
   "Reply to Message": "Responder a mensagem",
@@ -35708,6 +35719,7 @@ var ru_default = {
   "People matching": "\u0421\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044E\u0449\u0438\u0435 \u043B\u044E\u0434\u0438",
   Pin: "\u0428\u0442\u044B\u0440\u044C",
   "Pinned by": "\u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0435\u043D\u043E",
+  Quote: "Quote",
   "Recording format is not supported and cannot be reproduced": "\u0424\u043E\u0440\u043C\u0430\u0442 \u0437\u0430\u043F\u0438\u0441\u0438 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u0438 \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u0432\u043E\u0441\u043F\u0440\u043E\u0438\u0437\u0432\u0435\u0434\u0435\u043D",
   Reply: "\u041E\u0442\u0432\u0435\u0447\u0430\u0442\u044C",
   "Reply to Message": "\u041E\u0442\u0432\u0435\u0442\u0438\u0442\u044C \u043D\u0430 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435",
@@ -35869,6 +35881,7 @@ var tr_default = {
   "People matching": "E\u015Fle\u015Fen ki\u015Filer",
   Pin: "Toplu i\u011Fne",
   "Pinned by": "Sabitleyen",
+  Quote: "Quote",
   "Recording format is not supported and cannot be reproduced": "Kay\u0131t format\u0131 desteklenmiyor ve \xE7o\u011Falt\u0131lam\u0131yor",
   Reply: "Cevapla",
   "Reply to Message": "Mesaj\u0131 Cevapla",
@@ -39353,10 +39366,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 +39434,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 +39482,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 +39501,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 +39542,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,
@@ -40529,8 +40548,7 @@ var ReactionSelector = import_react108.default.memo(
 
 // src/components/Reactions/ReactionSelectorWithButton.tsx
 var ReactionSelectorWithButton = ({
-  ReactionIcon: ReactionIcon2,
-  theme
+  ReactionIcon: ReactionIcon2
 }) => {
   const { t: t2 } = useTranslationContext("ReactionSelectorWithButton");
   const { isMyMessage, message } = useMessageContext("MessageOptions");
@@ -40553,7 +40571,7 @@ var ReactionSelectorWithButton = ({
     {
       "aria-expanded": dialogIsOpen,
       "aria-label": t2("aria/Open Reaction Selector"),
-      className: `str-chat__message-${theme}__actions__action str-chat__message-${theme}__actions__action--reactions str-chat__message-reactions-button`,
+      className: "str-chat__message-reactions-button",
       "data-testid": "message-reaction-action",
       onClick: () => dialog?.toggle(),
       ref: buttonRef
@@ -40608,7 +40626,7 @@ var UnMemoizedMessageOptions = (props) => {
       },
       /* @__PURE__ */ import_react110.default.createElement(ThreadIcon2, { className: "str-chat__message-action-icon" })
     ),
-    shouldShowReactions && /* @__PURE__ */ import_react110.default.createElement(ReactionSelectorWithButton, { ReactionIcon: ReactionIcon2, theme })
+    shouldShowReactions && /* @__PURE__ */ import_react110.default.createElement(ReactionSelectorWithButton, { ReactionIcon: ReactionIcon2 })
   );
 };
 var MessageOptions = import_react110.default.memo(
@@ -42680,9 +42698,12 @@ var MessageSimpleWithContext = (props) => {
     Attachment: Attachment2 = Attachment,
     Avatar: Avatar2 = Avatar,
     EditMessageInput = EditMessageForm,
+    MessageOptions: MessageOptions2 = MessageOptions,
+    // TODO: remove this "passthrough" in the next
+    // major release and use the new default instead
+    MessageActions: MessageActions2 = MessageOptions2,
     MessageDeleted: MessageDeleted2 = MessageDeleted,
     MessageBouncePrompt: MessageBouncePrompt2 = MessageBouncePrompt,
-    MessageOptions: MessageOptions2 = MessageOptions,
     MessageRepliesCountButton: MessageRepliesCountButton2 = MessageRepliesCountButton,
     MessageStatus: MessageStatus2 = MessageStatus,
     MessageTimestamp: MessageTimestamp2 = MessageTimestamp,
@@ -42764,7 +42785,7 @@ var MessageSimpleWithContext = (props) => {
       onClick: handleClick,
       onKeyUp: handleClick
     },
-    /* @__PURE__ */ import_react152.default.createElement(MessageOptions2, null),
+    /* @__PURE__ */ import_react152.default.createElement(MessageActions2, null),
     /* @__PURE__ */ import_react152.default.createElement("div", { className: "str-chat__message-reactions-host" }, hasReactions && /* @__PURE__ */ import_react152.default.createElement(ReactionsList2, { reverse: true })),
     /* @__PURE__ */ import_react152.default.createElement("div", { className: "str-chat__message-bubble" }, message.attachments?.length && !message.quoted_message ? /* @__PURE__ */ import_react152.default.createElement(Attachment2, { actionHandler: handleAction, attachments: message.attachments }) : null, /* @__PURE__ */ import_react152.default.createElement(MessageText, { message, renderText: renderText2 }), message.mml && /* @__PURE__ */ import_react152.default.createElement(
       MML3,
@@ -46004,6 +46025,7 @@ var ChannelInner = (props) => {
       LinkPreviewList: props.LinkPreviewList,
       LoadingIndicator: props.LoadingIndicator,
       Message: props.Message,
+      MessageActions: props.MessageActions,
       MessageBouncePrompt: props.MessageBouncePrompt,
       MessageDeleted: props.MessageDeleted,
       MessageListNotifications: props.MessageListNotifications,
@@ -46053,6 +46075,7 @@ var ChannelInner = (props) => {
       props.LinkPreviewList,
       props.LoadingIndicator,
       props.Message,
+      props.MessageActions,
       props.MessageBouncePrompt,
       props.MessageDeleted,
       props.MessageListNotifications,
@@ -47789,12 +47812,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,
@@ -47809,7 +47832,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,
@@ -47841,7 +47864,7 @@ var ThreadInner = (props) => {
     loadingMoreNewer: isLoadingNext,
     loadMore: threadInstance.loadPrevPage,
     loadMoreNewer: threadInstance.loadNextPage,
-    messages: latestReplies
+    messages: replies
   } : {
     hasMore: threadHasMore,
     loadingMore: threadLoadingMore,