stream-chat-react 13.0.0 → 13.0.2

package/dist/components/Attachment/index.d.ts

@@ -8,3 +8,4 @@ export * from './components';
 export * from './UnsupportedAttachment';
 export * from './FileAttachment';
 export * from './utils';
+export { useAudioController } from './hooks/useAudioController';

package/dist/components/Attachment/index.js

@@ -8,3 +8,4 @@ export * from './components';
 export * from './UnsupportedAttachment';
 export * from './FileAttachment';
 export * from './utils';
+export { useAudioController } from './hooks/useAudioController';

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 = "13.0.0";
+        const version = "13.0.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/FormDialog.js

@@ -57,16 +57,20 @@ export const FormDialog = ({ className, close, fields, onSubmit, shouldDisableSu
     return (React.createElement("div", { className: clsx('str-chat__dialog str-chat__dialog--form', className) },
         React.createElement("div", { className: 'str-chat__dialog__body' },
             title && React.createElement("div", { className: 'str-chat__dialog__title' }, title),
-            React.createElement("form", { autoComplete: 'off' }, Object.entries(fields).map(([id, fieldConfig]) => (React.createElement("div", { className: 'str-chat__dialog__field', key: `dialog-field-${id}` },
-                fieldConfig.label && (React.createElement("label", { className: clsx(`str-chat__dialog__title str-chat__dialog__title--${id}`), htmlFor: id }, fieldConfig.label)),
-                React.createElement(fieldConfig.element, {
-                    id,
-                    ...fieldConfig.props,
-                    onChange: handleChange,
-                    value: value[id],
-                }),
-                React.createElement(FieldError, { text: fieldErrors[id]?.message })))))),
-        React.createElement("div", { className: 'str-chat__dialog__controls' },
-            React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel', onClick: close }, t('Cancel')),
-            React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--submit', disabled: Object.keys(fieldErrors).length > 0 || shouldDisableSubmitButton?.(value), onClick: handleSubmit, type: 'submit' }, t('Send')))));
+            React.createElement("form", { autoComplete: 'off', onSubmit: (e) => {
+                    e.preventDefault();
+                    handleSubmit();
+                } },
+                Object.entries(fields).map(([id, fieldConfig]) => (React.createElement("div", { className: 'str-chat__dialog__field', key: `dialog-field-${id}` },
+                    fieldConfig.label && (React.createElement("label", { className: clsx(`str-chat__dialog__title str-chat__dialog__title--${id}`), htmlFor: id }, fieldConfig.label)),
+                    React.createElement(fieldConfig.element, {
+                        id,
+                        ...fieldConfig.props,
+                        onChange: handleChange,
+                        value: value[id],
+                    }),
+                    React.createElement(FieldError, { text: fieldErrors[id]?.message })))),
+                React.createElement("div", { className: 'str-chat__dialog__controls' },
+                    React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel', onClick: close }, t('Cancel')),
+                    React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--submit', disabled: Object.keys(fieldErrors).length > 0 || shouldDisableSubmitButton?.(value), type: 'submit' }, t('Send')))))));
 };

package/dist/components/MessageInput/hooks/useSubmitHandler.js

@@ -1,7 +1,24 @@
 import { useCallback } from 'react';
+import { MessageComposer } from 'stream-chat';
 import { useMessageComposer } from './useMessageComposer';
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
+const takeStateSnapshot = (messageComposer) => {
+    const textComposerState = messageComposer.textComposer.state.getLatestValue();
+    const attachmentManagerState = messageComposer.attachmentManager.state.getLatestValue();
+    const linkPreviewsManagerState = messageComposer.linkPreviewsManager.state.getLatestValue();
+    const pollComposerState = messageComposer.pollComposer.state.getLatestValue();
+    const customDataManagerState = messageComposer.customDataManager.state.getLatestValue();
+    const state = messageComposer.state.getLatestValue();
+    return () => {
+        messageComposer.state.next(state);
+        messageComposer.textComposer.state.next(textComposerState);
+        messageComposer.attachmentManager.state.next(attachmentManagerState);
+        messageComposer.linkPreviewsManager.state.next(linkPreviewsManagerState);
+        messageComposer.pollComposer.state.next(pollComposerState);
+        messageComposer.customDataManager.state.next(customDataManagerState);
+    };
+};
 export const useSubmitHandler = (props) => {
     const { clearEditingState, overrideSubmitHandler } = props;
     const { addNotification, editMessage, sendMessage } = useChannelActionContext('useSubmitHandler');
@@ -23,7 +40,20 @@ export const useSubmitHandler = (props) => {
             }
         }
         else {
+            const restoreComposerStateSnapshot = takeStateSnapshot(messageComposer);
             try {
+                // FIXME: once MessageComposer has sendMessage method, then the following condition should be encapsulated by it
+                // keep attachments, text, quoted message (treat them as draft) ... if sending a poll
+                const sentPollMessage = !!message.poll_id;
+                if (sentPollMessage) {
+                    messageComposer.state.partialNext({
+                        id: MessageComposer.generateId(),
+                        pollId: null,
+                    });
+                }
+                else {
+                    messageComposer.clear();
+                }
                 // todo: get rid of overrideSubmitHandler once MessageComposer supports submission flow
                 if (overrideSubmitHandler) {
                     await overrideSubmitHandler({
@@ -36,11 +66,11 @@ export const useSubmitHandler = (props) => {
                 else {
                     await sendMessage({ localMessage, message, options: sendOptions });
                 }
-                messageComposer.clear();
                 if (messageComposer.config.text.publishTypingEvents)
                     await messageComposer.channel.stopTyping();
             }
             catch (err) {
+                restoreComposerStateSnapshot();
                 addNotification(t('Send message request failed'), 'error');
             }
         }

package/dist/components/Poll/PollActions/PollResults/PollResults.js

@@ -7,7 +7,7 @@ import { useStateStore } from '../../../../store';
 import { usePollContext, useTranslationContext } from '../../../../context';
 const pollStateSelector = (nextValue) => ({
     name: nextValue.name,
-    options: nextValue.options,
+    options: [...nextValue.options],
     vote_counts_by_option: nextValue.vote_counts_by_option,
 });
 export const PollResults = ({ close }) => {

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

@@ -28,8 +28,15 @@ export const MultipleAnswersField = () => {
                 React.createElement("input", { id: 'max_votes_allowed', onBlur: () => {
                         pollComposer.handleFieldBlur('max_votes_allowed');
                     }, onChange: (e) => {
+                        const nativeFieldValidation = !e.target.validity.valid
+                            ? {
+                                max_votes_allowed: t('Only numbers are allowed'),
+                            }
+                            : undefined;
                         pollComposer.updateFields({
-                            max_votes_allowed: e.target.value,
-                        });
+                            max_votes_allowed: !nativeFieldValidation
+                                ? e.target.value
+                                : pollComposer.max_votes_allowed,
+                        }, nativeFieldValidation);
                     }, placeholder: t('Maximum number of votes (from 2 to 10)'), type: 'number', value: max_votes_allowed }))))));
 };

package/dist/components/Poll/PollHeader.js

@@ -15,13 +15,15 @@ export const PollHeader = () => {
     const selectionInstructions = useMemo(() => {
         if (is_closed)
             return t('Vote ended');
-        if (enforce_unique_vote)
+        if (enforce_unique_vote || options.length === 1)
             return t('Select one');
         if (max_votes_allowed)
             return t('Select up to {{count}}', {
                 count: max_votes_allowed > options.length ? options.length : max_votes_allowed,
             });
-        return t('Select one or more');
+        if (options.length > 1)
+            return t('Select one or more');
+        return '';
     }, [is_closed, enforce_unique_vote, max_votes_allowed, options.length, t]);
     if (!name)
         return;

package/dist/components/TextareaComposer/TextareaComposer.js

@@ -26,11 +26,11 @@ const configStateSelector = (state) => ({
  * In the long term, the fix should happen by handling keypress, but changing this has unknown implications.
  */
 const defaultShouldSubmit = (event) => event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;
-export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, containerClassName, listClassName, maxRows: maxRowsProp = 1, minRows: minRowsProp, onBlur, onChange, onKeyDown, onScroll, onSelect, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restTextareaProps }) => {
+export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, containerClassName, listClassName, maxRows: maxRowsProp, minRows: minRowsProp, onBlur, onChange, onKeyDown, onScroll, onSelect, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restTextareaProps }) => {
     const { t } = useTranslationContext();
     const { AutocompleteSuggestionList = DefaultSuggestionList } = useComponentContext();
     const { additionalTextareaProps, cooldownRemaining, handleSubmit, maxRows: maxRowsContext, minRows: minRowsContext, onPaste, shouldSubmit: shouldSubmitContext, textareaRef, } = useMessageInputContext();
-    const maxRows = maxRowsProp ?? maxRowsContext;
+    const maxRows = maxRowsProp ?? maxRowsContext ?? 1;
     const minRows = minRowsProp ?? minRowsContext;
     const placeholder = placeholderProp ?? additionalTextareaProps?.placeholder;
     const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;
@@ -68,16 +68,13 @@ export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, co
             onKeyDown(event);
             return;
         }
-        if (event.key === 'Enter') {
-            // allow next line only on Shift + Enter. Enter is reserved for submission.
-            event.preventDefault();
-        }
         if (textComposer.suggestions &&
             textComposer.suggestions.searchSource.items?.length) {
             if (event.key === 'Escape')
                 return textComposer.closeSuggestions();
             const loadedItems = textComposer.suggestions.searchSource.items;
             if (event.key === 'Enter') {
+                event.preventDefault();
                 textComposer.handleSelect(loadedItems[focusedItemIndex]);
             }
             if (event.key === 'ArrowUp') {