stream-chat-react 12.15.1 → 12.15.2

package/dist/components/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "12.15.1";
+        const version = "12.15.2";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/Dialog/DialogManager.js

@@ -1,3 +1,4 @@
+import { nanoid } from 'nanoid';
 import { StateStore } from 'stream-chat';
 /**
  * Keeps a map of Dialog objects.
@@ -14,7 +15,7 @@ export class DialogManager {
         this.state = new StateStore({
             dialogsById: {},
         });
-        this.id = id ?? new Date().getTime().toString();
+        this.id = id ?? nanoid();
     }
     get openDialogCount() {
         return Object.values(this.state.getLatestValue().dialogsById).reduce((count, dialog) => {

package/dist/components/MessageInput/AttachmentSelector.js

@@ -1,5 +1,4 @@
-import { nanoid } from 'nanoid';
-import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { UploadIcon as DefaultUploadIcon } from './icons';
 import { CHANNEL_CONTAINER_ID } from '../Channel/constants';
 import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
@@ -10,11 +9,12 @@ import { Portal } from '../Portal/Portal';
 import { UploadFileInput } from '../ReactFileUtilities';
 import { useChannelStateContext, useComponentContext, useMessageInputContext, useTranslationContext, } from '../../context';
 import { AttachmentSelectorContextProvider, useAttachmentSelectorContext, } from '../../context/AttachmentSelectorContext';
+import { useStableId } from '../UtilityComponents/useStableId';
 export const SimpleAttachmentSelector = () => {
     const { AttachmentSelectorInitiationButtonContents, FileUploadIcon = DefaultUploadIcon, } = useComponentContext();
     const inputRef = useRef(null);
     const [labelElement, setLabelElement] = useState(null);
-    const id = useMemo(() => nanoid(), []);
+    const id = useStableId();
     useEffect(() => {
         if (!labelElement)
             return;

package/dist/components/MessageInput/MessageInput.js

@@ -9,6 +9,7 @@ import { useComponentContext, } from '../../context/ComponentContext';
 import { MessageInputContextProvider } from '../../context/MessageInputContext';
 import { DialogManagerProvider } from '../../context';
 import { useRegisterDropHandlers } from './WithDragAndDropUpload';
+import { useStableId } from '../UtilityComponents/useStableId';
 const MessageInputProvider = (props) => {
     const cooldownTimerState = useCooldownTimer();
     const messageInputState = useMessageInputState(props);
@@ -27,10 +28,11 @@ const UnMemoizedMessageInput = (props) => {
     const { Input: PropInput } = props;
     const { dragAndDropWindow } = useChannelStateContext();
     const { Input: ContextInput, TriggerProvider = DefaultTriggerProvider } = useComponentContext('MessageInput');
+    const id = useStableId();
     const Input = PropInput || ContextInput || MessageInputFlat;
     const dialogManagerId = props.isThreadInput
-        ? 'message-input-dialog-manager-thread'
-        : 'message-input-dialog-manager';
+        ? `message-input-dialog-manager-thread-${id}`
+        : `message-input-dialog-manager-${id}`;
     if (dragAndDropWindow)
         return (React.createElement(DialogManagerProvider, { id: dialogManagerId },
             React.createElement(TriggerProvider, null,

package/dist/components/MessageList/MessageList.js

@@ -17,6 +17,7 @@ import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
 import { defaultPinPermissions, MESSAGE_ACTIONS } from '../Message/utils';
 import { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';
 import { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';
+import { useStableId } from '../UtilityComponents/useStableId';
 import { defaultRenderMessages } from './renderMessages';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, } from '../../constants/limits';
 const MessageListWithContext = (props) => {
@@ -123,10 +124,11 @@ const MessageListWithContext = (props) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [highlightedMessageId]);
+    const id = useStableId();
     const showEmptyStateIndicator = elements.length === 0 && !threadList;
     const dialogManagerId = threadList
-        ? 'message-list-dialog-manager-thread'
-        : 'message-list-dialog-manager';
+        ? `message-list-dialog-manager-thread-${id}`
+        : `message-list-dialog-manager-${id}`;
     return (React.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } },
         React.createElement(MessageListMainPanel, null,
             React.createElement(DialogManagerProvider, { id: dialogManagerId },

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -21,6 +21,7 @@ import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext, } from '../../context/ComponentContext';
 import { VirtualizedMessageListContextProvider } from '../../context/VirtualizedMessageListContext';
 import { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';
+import { useStableId } from '../UtilityComponents/useStableId';
 function captureResizeObserverExceededError(e) {
     if (e.message === 'ResizeObserver loop completed with undelivered notifications.' ||
         e.message === 'ResizeObserver loop limit exceeded') {
@@ -194,11 +195,12 @@ const VirtualizedMessageListWithContext = (props) => {
             clearTimeout(scrollTimeout);
         };
     }, [highlightedMessageId, processedMessages]);
+    const id = useStableId();
     if (!processedMessages)
         return null;
     const dialogManagerId = threadList
-        ? 'virtualized-message-list-dialog-manager-thread'
-        : 'virtualized-message-list-dialog-manager';
+        ? `virtualized-message-list-dialog-manager-thread-${id}`
+        : `virtualized-message-list-dialog-manager-${id}`;
     return (React.createElement(VirtualizedMessageListContextProvider, { value: { scrollToBottom } },
         React.createElement(MessageListMainPanel, null,
             React.createElement(DialogManagerProvider, { id: dialogManagerId },

package/dist/components/Poll/PollCreationDialog/PollCreationDialog.js

@@ -64,8 +64,9 @@ export const PollCreationDialog = ({ close }) => {
                         React.createElement("div", { className: clsx('str-chat__form__input-field__value') },
                             React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-max-votes-allowed-input-field-error', text: multipleAnswerCountError }),
                             React.createElement("input", { id: 'max_votes_allowed', onChange: (e) => {
-                                    const isValidValue = !e.target.value ||
-                                        e.target.value.match(VALID_MAX_VOTES_VALUE_REGEX);
+                                    const isValidValue = e.target.validity.valid &&
+                                        (!e.target.value ||
+                                            e.target.value.match(VALID_MAX_VOTES_VALUE_REGEX));
                                     if (!isValidValue) {
                                         setMultipleAnswerCountError(t('Type a number from 2 to 10'));
                                     }

package/dist/components/UtilityComponents/useStableId.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The ID is generated using the `nanoid` library and is memoized to ensure
+ * that it remains the same across renders unless the key changes.
+ */
+export declare const useStableId: (key?: string) => string;

package/dist/components/UtilityComponents/useStableId.js

@@ -0,0 +1,11 @@
+import { nanoid } from 'nanoid';
+import { useMemo } from 'react';
+/**
+ * The ID is generated using the `nanoid` library and is memoized to ensure
+ * that it remains the same across renders unless the key changes.
+ */
+export const useStableId = (key) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const id = useMemo(() => nanoid(), [key]);
+    return id;
+};