stream-chat-react 12.8.2 → 12.10.0

package/dist/components/Attachment/components/WaveProgressBar.js

@@ -7,7 +7,7 @@ export const WaveProgressBar = ({ amplitudesCount = 40, progress = 0, relativeAm
     const isDragging = useRef(false);
     const [root, setRoot] = useState(null);
     const [trackAxisX, setTrackAxisX] = useState();
-    const lastRootWidth = useRef();
+    const lastRootWidth = useRef(undefined);
     const handleDragStart = (e) => {
         e.preventDefault();
         if (!progressIndicator)

package/dist/components/Attachment/hooks/useAudioController.d.ts

@@ -13,7 +13,7 @@ type AudioControllerParams = {
     playbackRates?: number[];
 };
 export declare const useAudioController: ({ durationSeconds, mimeType, playbackRates, }?: AudioControllerParams) => {
-    audioRef: import("react").MutableRefObject<HTMLAudioElement | null>;
+    audioRef: import("react").RefObject<HTMLAudioElement | null>;
     canPlayRecord: boolean;
     increasePlaybackRate: () => void;
     isPlaying: boolean;

package/dist/components/Attachment/hooks/useAudioController.js

@@ -13,7 +13,7 @@ export const useAudioController = ({ durationSeconds, mimeType, playbackRates =
     const [canPlayRecord, setCanPlayRecord] = useState(true);
     const [secondsElapsed, setSecondsElapsed] = useState(0);
     const [playbackRateIndex, setPlaybackRateIndex] = useState(0);
-    const playTimeout = useRef();
+    const playTimeout = useRef(undefined);
     const audioRef = useRef(null);
     const registerError = useCallback((e) => {
         logError(e);

package/dist/components/AutoCompleteTextarea/Textarea.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Textarea from 'react-textarea-autosize';
 import getCaretCoordinates from 'textarea-caret';
-import { isValidElementType } from 'react-is';
 import clsx from 'clsx';
 import { List as DefaultSuggestionList } from './List';
 import { DEFAULT_CARET_POSITION, defaultScrollToItem, errorMessage, triggerPropsCheck, } from './utils';
@@ -242,9 +241,6 @@ export class ReactTextareaAutocomplete extends React.Component {
                 if (!Array.isArray(data)) {
                     throw new Error('Trigger provider has to provide an array!');
                 }
-                if (!isValidElementType(component)) {
-                    throw new Error('Component should be defined!');
-                }
                 // throw away if we resolved old trigger
                 if (currentTrigger !== this.state.currentTrigger)
                     return;

package/dist/components/AutoCompleteTextarea/utils.js

@@ -1,4 +1,3 @@
-import { isValidElementType } from 'react-is';
 export const DEFAULT_CARET_POSITION = 'next';
 export function defaultScrollToItem(container, item) {
     if (!item)
@@ -26,10 +25,7 @@ export const triggerPropsCheck = ({ trigger }) => {
         }
         // $FlowFixMe
         const triggerSetting = settings;
-        const { callback, component, dataProvider, output } = triggerSetting;
-        if (!isValidElementType(component)) {
-            return Error('Invalid prop trigger: component should be defined.');
-        }
+        const { callback, dataProvider, output } = triggerSetting;
         if (!dataProvider || typeof dataProvider !== 'function') {
             return Error('Invalid prop trigger: dataProvider should be defined.');
         }

package/dist/components/Channel/Channel.js

@@ -4,7 +4,7 @@ import defaultsDeep from 'lodash.defaultsdeep';
 import throttle from 'lodash.throttle';
 import { nanoid } from 'nanoid';
 import clsx from 'clsx';
-import { channelReducer, initialState } from './channelState';
+import { initialState, makeChannelReducer } from './channelState';
 import { useCreateChannelStateContext } from './hooks/useCreateChannelStateContext';
 import { useCreateTypingContext } from './hooks/useCreateTypingContext';
 import { useEditMessageHandler } from './hooks/useEditMessageHandler';
@@ -63,6 +63,7 @@ const ChannelInner = (props) => {
     const [quotedMessage, setQuotedMessage] = useState();
     const [channelUnreadUiState, _setChannelUnreadUiState] = useState();
     const notificationTimeouts = useRef([]);
+    const channelReducer = useMemo(() => makeChannelReducer(), []);
     const [state, dispatch] = useReducer(channelReducer, 
     // channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used
     // => Channel will call channel.watch() in useLayoutEffect => state.loading is used to signal the watch() call state
@@ -73,7 +74,7 @@ const ChannelInner = (props) => {
     });
     const isMounted = useIsMounted();
     const originalTitle = useRef('');
-    const lastRead = useRef();
+    const lastRead = useRef(undefined);
     const online = useRef(true);
     const channelCapabilitiesArray = channel.data?.own_capabilities;
     const throttledCopyStateFromChannel = throttle(() => dispatch({ channel, type: 'copyStateFromChannelOnEvent' }), 500, {

package/dist/components/Channel/channelState.d.ts

@@ -1,4 +1,3 @@
-import type { Reducer } from 'react';
 import type { Channel, MessageResponse, ChannelState as StreamChannelState } from 'stream-chat';
 import type { ChannelState, StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -61,8 +60,7 @@ export type ChannelStateReducerAction<StreamChatGenerics extends DefaultStreamCh
 } | {
     type: 'jumpToLatestMessage';
 };
-export type ChannelStateReducer<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Reducer<ChannelState<StreamChatGenerics>, ChannelStateReducerAction<StreamChatGenerics>>;
-export declare const channelReducer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(state: ChannelState<StreamChatGenerics>, action: ChannelStateReducerAction<StreamChatGenerics>) => ChannelState<StreamChatGenerics>;
+export declare const makeChannelReducer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => (state: ChannelState<StreamChatGenerics>, action: ChannelStateReducerAction<StreamChatGenerics>) => ChannelState<StreamChatGenerics>;
 export declare const initialState: {
     error: null;
     hasMore: boolean;

package/dist/components/Channel/channelState.js

@@ -1,4 +1,4 @@
-export const channelReducer = (state, action) => {
+export const makeChannelReducer = () => (state, action) => {
     switch (action.type) {
         case 'closeThread': {
             return {

package/dist/components/Channel/hooks/useIsMounted.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const useIsMounted: () => import("react").MutableRefObject<boolean>;
+export declare const useIsMounted: () => import("react").RefObject<boolean>;

package/dist/components/ChannelList/hooks/useChannelListShape.d.ts

@@ -24,7 +24,7 @@ type HandleNotificationAddedToChannelParameters<SCG extends ExtendableGenerics>
 } & Required<Pick<ChannelListProps<SCG>, 'sort'>>;
 type HandleMemberUpdatedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & {
     lockChannelOrder: boolean;
-} & Required<Pick<ChannelListProps<SCG>, 'sort'>>;
+} & Required<Pick<ChannelListProps<SCG>, 'sort' | 'filters'>>;
 type HandleChannelDeletedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
 type HandleChannelHiddenParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
 type HandleChannelVisibleParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
@@ -37,9 +37,9 @@ export declare const useChannelListShapeDefaults: <SCG extends ExtendableGeneric
     handleChannelTruncated: ({ customHandler, event, setChannels }: HandleChannelTruncatedParameters<SCG>) => void;
     handleChannelUpdated: ({ customHandler, event, setChannels }: HandleChannelUpdatedParameters<SCG>) => void;
     handleChannelVisible: ({ customHandler, event, setChannels }: HandleChannelVisibleParameters<SCG>) => Promise<void>;
-    handleMemberUpdated: ({ event, lockChannelOrder, setChannels, sort }: HandleMemberUpdatedParameters<SCG>) => void;
+    handleMemberUpdated: ({ event, filters, lockChannelOrder, setChannels, sort, }: HandleMemberUpdatedParameters<SCG>) => void;
     handleMessageNew: ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, lockChannelOrder, setChannels, sort, }: HandleMessageNewParameters<SCG>) => void;
-    handleNotificationAddedToChannel: ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, setChannels, }: HandleNotificationAddedToChannelParameters<SCG>) => Promise<void>;
+    handleNotificationAddedToChannel: ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, setChannels, sort, }: HandleNotificationAddedToChannelParameters<SCG>) => Promise<void>;
     handleNotificationMessageNew: ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, setChannels, sort, }: HandleNotificationMessageNewParameters<SCG>) => Promise<void>;
     handleNotificationRemovedFromChannel: ({ customHandler, event, setChannels, }: HandleNotificationRemovedFromChannelParameters<SCG>) => void;
     handleUserPresenceChanged: ({ event, setChannels }: HandleUserPresenceChangedParameters<SCG>) => void;

package/dist/components/ChannelList/hooks/useChannelListShape.js

@@ -1,7 +1,7 @@
 // const defaults = useChannelListShapeDefaults();
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import uniqBy from 'lodash.uniqby';
-import { findLastPinnedChannelIndex, isChannelArchived, isChannelPinned, moveChannelUpwards, shouldConsiderArchivedChannels, shouldConsiderPinnedChannels, } from '../utils';
+import { extractSortValue, findLastPinnedChannelIndex, isChannelArchived, isChannelPinned, moveChannelUpwards, shouldConsiderArchivedChannels, shouldConsiderPinnedChannels, } from '../utils';
 import { useChatContext } from '../../../context';
 import { getChannel } from '../../../utils';
 const shared = ({ customHandler, event, setChannels, }) => {
@@ -22,39 +22,37 @@ export const useChannelListShapeDefaults = () => {
         if (typeof customHandler === 'function') {
             return customHandler(setChannels, event);
         }
-        setChannels((channels) => {
-            const targetChannelIndex = channels.findIndex((channel) => channel.cid === event.cid);
+        const channelType = event.channel_type;
+        const channelId = event.channel_id;
+        if (!channelType || !channelId)
+            return;
+        setChannels((currentChannels) => {
+            const targetChannel = client.channel(channelType, channelId);
+            const targetChannelIndex = currentChannels.indexOf(targetChannel);
             const targetChannelExistsWithinList = targetChannelIndex >= 0;
-            const targetChannel = channels[targetChannelIndex];
             const isTargetChannelPinned = isChannelPinned(targetChannel);
             const isTargetChannelArchived = isChannelArchived(targetChannel);
             const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
             const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
             if (
-            // target channel is archived
-            (isTargetChannelArchived && considerArchivedChannels) ||
-                // target channel is pinned
-                (isTargetChannelPinned && considerPinnedChannels) ||
+            // filter is defined, target channel is archived and filter option is set to false
+            (considerArchivedChannels && isTargetChannelArchived && !filters.archived) ||
+                // filter is defined, target channel isn't archived and filter option is set to true
+                (considerArchivedChannels && !isTargetChannelArchived && filters.archived) ||
+                // sort option is defined, target channel is pinned
+                (considerPinnedChannels && isTargetChannelPinned) ||
                 // list order is locked
                 lockChannelOrder ||
                 // target channel is not within the loaded list and loading from cache is disallowed
                 (!targetChannelExistsWithinList && !allowNewMessagesFromUnfilteredChannels)) {
-                return channels;
-            }
-            // we either have the channel to move or we pull it from the cache (or instantiate) if it's allowed
-            const channelToMove = channels[targetChannelIndex] ??
-                (allowNewMessagesFromUnfilteredChannels && event.channel_type
-                    ? client.channel(event.channel_type, event.channel_id)
-                    : null);
-            if (channelToMove) {
-                return moveChannelUpwards({
-                    channels,
-                    channelToMove,
-                    channelToMoveIndexWithinChannels: targetChannelIndex,
-                    sort,
-                });
+                return currentChannels;
             }
-            return channels;
+            return moveChannelUpwards({
+                channels: currentChannels,
+                channelToMove: targetChannel,
+                channelToMoveIndexWithinChannels: targetChannelIndex,
+                sort,
+            });
         });
     }, [client]);
     const handleNotificationMessageNew = useCallback(async ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, setChannels, sort, }) => {
@@ -70,7 +68,7 @@ export const useChannelListShapeDefaults = () => {
             type: event.channel.type,
         });
         const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
-        if (isChannelArchived(channel) && considerArchivedChannels) {
+        if (isChannelArchived(channel) && considerArchivedChannels && !filters.archived) {
             return;
         }
         if (!allowNewMessagesFromUnfilteredChannels) {
@@ -83,25 +81,31 @@ export const useChannelListShapeDefaults = () => {
             sort,
         }));
     }, [client]);
-    const handleNotificationAddedToChannel = useCallback(async ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, setChannels, }) => {
+    const handleNotificationAddedToChannel = useCallback(async ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, setChannels, sort, }) => {
         if (typeof customHandler === 'function') {
             return customHandler(setChannels, event);
         }
-        if (allowNewMessagesFromUnfilteredChannels && event.channel?.type) {
-            const channel = await getChannel({
-                client,
-                id: event.channel.id,
-                members: event.channel.members?.reduce((acc, { user, user_id }) => {
-                    const userId = user_id || user?.id;
-                    if (userId) {
-                        acc.push(userId);
-                    }
-                    return acc;
-                }, []),
-                type: event.channel.type,
-            });
-            setChannels((channels) => uniqBy([channel, ...channels], 'cid'));
+        if (!event.channel || !allowNewMessagesFromUnfilteredChannels) {
+            return;
         }
+        const channel = await getChannel({
+            client,
+            id: event.channel.id,
+            members: event.channel.members?.reduce((newMembers, { user, user_id }) => {
+                const userId = user_id || user?.id;
+                if (userId)
+                    newMembers.push(userId);
+                return newMembers;
+            }, []),
+            type: event.channel.type,
+        });
+        // membership has been reset (target channel shouldn't be pinned nor archived)
+        setChannels((channels) => moveChannelUpwards({
+            channels,
+            channelToMove: channel,
+            channelToMoveIndexWithinChannels: -1,
+            sort,
+        }));
     }, [client]);
     const handleNotificationRemovedFromChannel = useCallback(({ customHandler, event, setChannels, }) => {
         if (typeof customHandler === 'function') {
@@ -109,21 +113,22 @@ export const useChannelListShapeDefaults = () => {
         }
         setChannels((channels) => channels.filter((channel) => channel.cid !== event.channel?.cid));
     }, []);
-    const handleMemberUpdated = useCallback(({ event, lockChannelOrder, setChannels, sort }) => {
+    const handleMemberUpdated = useCallback(({ event, filters, lockChannelOrder, setChannels, sort, }) => {
         if (!event.member?.user || event.member.user.id !== client.userID || !event.channel_type) {
             return;
         }
-        const member = event.member;
         const channelType = event.channel_type;
         const channelId = event.channel_id;
         const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
-        // TODO: extract this and consider single property sort object too
-        const pinnedAtSort = Array.isArray(sort) ? sort[0]?.pinned_at ?? null : null;
+        const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+        const pinnedAtSort = extractSortValue({ atIndex: 0, sort, targetKey: 'pinned_at' });
         setChannels((currentChannels) => {
             const targetChannel = client.channel(channelType, channelId);
             // assumes that channel instances are not changing
             const targetChannelIndex = currentChannels.indexOf(targetChannel);
             const targetChannelExistsWithinList = targetChannelIndex >= 0;
+            const isTargetChannelArchived = isChannelArchived(targetChannel);
+            const isTargetChannelPinned = isChannelPinned(targetChannel);
             // handle pinning
             if (!considerPinnedChannels || lockChannelOrder)
                 return currentChannels;
@@ -132,14 +137,15 @@ export const useChannelListShapeDefaults = () => {
                 newChannels.splice(targetChannelIndex, 1);
             }
             // handle archiving (remove channel)
-            if (typeof member.archived_at === 'string') {
+            if ((considerArchivedChannels && isTargetChannelArchived && !filters.archived) ||
+                (considerArchivedChannels && !isTargetChannelArchived && filters.archived)) {
                 return newChannels;
             }
             let lastPinnedChannelIndex = null;
             // calculate last pinned channel index only if `pinned_at` sort is set to
             // ascending order or if it's in descending order while the pin is being removed, otherwise
             // we move to the top (index 0)
-            if (pinnedAtSort === 1 || (pinnedAtSort === -1 && !member.pinned_at)) {
+            if (pinnedAtSort === 1 || (pinnedAtSort === -1 && !isTargetChannelPinned)) {
                 lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });
             }
             const newTargetChannelIndex = typeof lastPinnedChannelIndex === 'number' ? lastPinnedChannelIndex + 1 : 0;
@@ -239,8 +245,8 @@ export const useChannelListShapeDefaults = () => {
 };
 export const usePrepareShapeHandlers = ({ allowNewMessagesFromUnfilteredChannels, customHandleChannelListShape, filters, lockChannelOrder, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, setChannels, sort, }) => {
     const defaults = useChannelListShapeDefaults();
-    const defaultHandleChannelListShapeRef = useRef();
-    const customHandleChannelListShapeRef = useRef();
+    const defaultHandleChannelListShapeRef = useRef(undefined);
+    const customHandleChannelListShapeRef = useRef(undefined);
     customHandleChannelListShapeRef.current = (event) => {
         // @ts-expect-error can't use ReturnType<typeof useChannelListShapeDefaults<SCG>> until we upgrade prettier to at least v2.7.0
         customHandleChannelListShape?.({ defaults, event, setChannels });
@@ -311,6 +317,7 @@ export const usePrepareShapeHandlers = ({ allowNewMessagesFromUnfilteredChannels
             case 'member.updated':
                 defaults.handleMemberUpdated({
                     event,
+                    filters,
                     lockChannelOrder,
                     setChannels,
                     sort,

package/dist/components/ChannelList/hooks/useChannelMembershipState.d.ts

@@ -1,2 +1,3 @@
-import type { Channel, ExtendableGenerics } from 'stream-chat';
-export declare const useChannelMembershipState: <SCG extends ExtendableGenerics>(channel?: Channel<SCG>) => import("stream-chat").ChannelMemberResponse<SCG>;
+import type { Channel, ChannelMemberResponse, ExtendableGenerics } from 'stream-chat';
+export declare function useChannelMembershipState<SCG extends ExtendableGenerics>(channel: Channel<SCG>): ChannelMemberResponse<SCG>;
+export declare function useChannelMembershipState<SCG extends ExtendableGenerics>(channel?: Channel<SCG> | undefined): ChannelMemberResponse<SCG> | undefined;

package/dist/components/ChannelList/hooks/useChannelMembershipState.js

@@ -1,15 +1,6 @@
-import { useEffect, useState } from 'react';
-import { useChatContext } from '../../../context';
-export const useChannelMembershipState = (channel) => {
-    const [membership, setMembership] = useState(channel?.state.membership || {});
-    const { client } = useChatContext();
-    useEffect(() => {
-        if (!channel)
-            return;
-        const subscriptions = ['member.updated'].map((v) => client.on(v, () => {
-            setMembership(channel.state.membership);
-        }));
-        return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
-    }, [client, channel]);
-    return membership;
-};
+import { useSelectedChannelState } from './useSelectedChannelState';
+const selector = (c) => c.state.membership;
+const keys = ['member.updated'];
+export function useChannelMembershipState(channel) {
+    return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });
+}

package/dist/components/ChannelList/hooks/useMobileNavigation.d.ts

@@ -1 +1 @@
-export declare const useMobileNavigation: (channelListRef: React.RefObject<HTMLDivElement>, navOpen: boolean, closeMobileNav?: () => void) => void;
+export declare const useMobileNavigation: (channelListRef: React.RefObject<HTMLDivElement | null>, navOpen: boolean, closeMobileNav?: () => void) => void;

package/dist/components/ChannelList/hooks/usePaginatedChannels.js

@@ -9,7 +9,7 @@ export const usePaginatedChannels = (client, filters, sort, options, activeChann
     const { channelsQueryState: { error, setError, setQueryInProgress }, } = useChatContext('usePaginatedChannels');
     const [channels, setChannels] = useState([]);
     const [hasNextPage, setHasNextPage] = useState(true);
-    const lastRecoveryTimestamp = useRef();
+    const lastRecoveryTimestamp = useRef(undefined);
     const recoveryThrottleInterval = recoveryThrottleIntervalMs < MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS
         ? MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS
         : recoveryThrottleIntervalMs ?? RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS;

package/dist/components/ChannelList/hooks/useSelectedChannelState.d.ts

@@ -0,0 +1,11 @@
+import type { Channel, EventTypes, ExtendableGenerics } from 'stream-chat';
+export declare function useSelectedChannelState<SCG extends ExtendableGenerics, O>(_: {
+    channel: Channel<SCG>;
+    selector: (channel: Channel<SCG>) => O;
+    stateChangeEventKeys?: EventTypes[];
+}): O;
+export declare function useSelectedChannelState<SCG extends ExtendableGenerics, O>(_: {
+    selector: (channel: Channel<SCG>) => O;
+    channel?: Channel<SCG> | undefined;
+    stateChangeEventKeys?: EventTypes[];
+}): O | undefined;

package/dist/components/ChannelList/hooks/useSelectedChannelState.js

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => { };
+export function useSelectedChannelState({ channel, stateChangeEventKeys = ['all'], selector, }) {
+    const subscribe = useCallback((onStoreChange) => {
+        if (!channel)
+            return noop;
+        const subscriptions = stateChangeEventKeys.map((et) => channel.on(et, () => {
+            onStoreChange(selector(channel));
+        }));
+        return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+    }, [channel, selector, stateChangeEventKeys]);
+    const getSnapshot = useCallback(() => {
+        if (!channel)
+            return undefined;
+        return selector(channel);
+    }, [channel, selector]);
+    return useSyncExternalStore(subscribe, getSnapshot);
+}

package/dist/components/ChannelList/utils.d.ts

@@ -1,4 +1,4 @@
-import type { Channel, ChannelSort, ExtendableGenerics } from 'stream-chat';
+import type { Channel, ChannelSort, ChannelSortBase, ExtendableGenerics } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ChannelListProps } from './ChannelList';
 export declare const MAX_QUERY_CHANNELS_LIMIT = 30;
@@ -29,18 +29,28 @@ type MoveChannelUpwardsParams<SCG extends DefaultStreamChatGenerics = DefaultStr
      */
     channelToMoveIndexWithinChannels?: number;
 };
-/**
- * This function should not be used to move pinned already channels.
- */
 export declare const moveChannelUpwards: <SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channels, channelToMove, channelToMoveIndexWithinChannels, sort, }: MoveChannelUpwardsParams<SCG>) => Channel<SCG>[];
 /**
- * Returns true only if `{ pinned_at: -1 }` or `{ pinned_at: 1 }` option is first within the `sort` array.
+ * Returns `true` only if object with `pinned_at` property is first within the `sort` array
+ * or if `pinned_at` key of the `sort` object gets picked first when using `for...in` looping mechanism
+ * and value of the `pinned_at` is either `1` or `-1`.
  */
 export declare const shouldConsiderPinnedChannels: <SCG extends ExtendableGenerics>(sort: ChannelListProps<SCG>['sort']) => boolean;
+export declare const extractSortValue: <SCG extends ExtendableGenerics>({ atIndex, sort, targetKey, }: {
+    atIndex: number;
+    targetKey: keyof ChannelSortBase<SCG>;
+    sort?: ChannelListProps<SCG>['sort'];
+}) => NonNullable<ChannelSortBase<SCG>["created_at" | "pinned_at" | "updated_at" | keyof SCG["channelType"] | "has_unread" | "last_message_at" | "last_updated" | "member_count" | "unread_count"]> | null;
 /**
- * Returns `true` only if `archived` property is set to `false` within `filters`.
+ * Returns `true` only if `archived` property is of type `boolean` within `filters` object.
  */
 export declare const shouldConsiderArchivedChannels: <SCG extends ExtendableGenerics>(filters: ChannelListProps<SCG>['filters']) => boolean;
+/**
+ * Returns `true` only if `pinned_at` property is of type `string` within `membership` object.
+ */
 export declare const isChannelPinned: <SCG extends ExtendableGenerics>(channel: Channel<SCG>) => boolean;
+/**
+ * Returns `true` only if `archived_at` property is of type `string` within `membership` object.
+ */
 export declare const isChannelArchived: <SCG extends ExtendableGenerics>(channel: Channel<SCG>) => boolean;
 export {};

package/dist/components/ChannelList/utils.js

@@ -31,9 +31,6 @@ export function findLastPinnedChannelIndex({ channels, }) {
     }
     return lastPinnedChannelIndex;
 }
-/**
- * This function should not be used to move pinned already channels.
- */
 export const moveChannelUpwards = ({ channels, channelToMove, channelToMoveIndexWithinChannels, sort, }) => {
     // get index of channel to move up
     const targetChannelIndex = channelToMoveIndexWithinChannels ??
@@ -44,8 +41,10 @@ export const moveChannelUpwards = ({ channels, channelToMove, channelToMoveIndex
     // receive messages and are not pinned should move upwards but only under the last pinned channel
     // in the list
     const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
-    if (targetChannelAlreadyAtTheTop)
+    const isTargetChannelPinned = isChannelPinned(channelToMove);
+    if (targetChannelAlreadyAtTheTop || (considerPinnedChannels && isTargetChannelPinned)) {
         return channels;
+    }
     const newChannels = [...channels];
     // target channel index is known, remove it from the list
     if (targetChannelExistsWithinList) {
@@ -62,35 +61,62 @@ export const moveChannelUpwards = ({ channels, channelToMove, channelToMoveIndex
     return newChannels;
 };
 /**
- * Returns true only if `{ pinned_at: -1 }` or `{ pinned_at: 1 }` option is first within the `sort` array.
+ * Returns `true` only if object with `pinned_at` property is first within the `sort` array
+ * or if `pinned_at` key of the `sort` object gets picked first when using `for...in` looping mechanism
+ * and value of the `pinned_at` is either `1` or `-1`.
  */
 export const shouldConsiderPinnedChannels = (sort) => {
-    if (!sort)
+    const value = extractSortValue({ atIndex: 0, sort, targetKey: 'pinned_at' });
+    if (typeof value !== 'number')
         return false;
-    if (!Array.isArray(sort))
-        return false;
-    const [option] = sort;
-    if (!option?.pinned_at)
-        return false;
-    return Math.abs(option.pinned_at) === 1;
+    return Math.abs(value) === 1;
+};
+export const extractSortValue = ({ atIndex, sort, targetKey, }) => {
+    if (!sort)
+        return null;
+    let option = null;
+    if (Array.isArray(sort)) {
+        option = sort[atIndex] ?? null;
+    }
+    else {
+        let index = 0;
+        for (const key in sort) {
+            if (index !== atIndex) {
+                index++;
+                continue;
+            }
+            if (key !== targetKey) {
+                return null;
+            }
+            option = sort;
+            break;
+        }
+    }
+    return option?.[targetKey] ?? null;
 };
 /**
- * Returns `true` only if `archived` property is set to `false` within `filters`.
+ * Returns `true` only if `archived` property is of type `boolean` within `filters` object.
  */
 export const shouldConsiderArchivedChannels = (filters) => {
     if (!filters)
         return false;
-    return !filters.archived;
+    return typeof filters.archived === 'boolean';
 };
+/**
+ * Returns `true` only if `pinned_at` property is of type `string` within `membership` object.
+ */
 export const isChannelPinned = (channel) => {
     if (!channel)
         return false;
-    const member = channel.state.membership;
-    return !!member?.pinned_at;
+    const membership = channel.state.membership;
+    return typeof membership.pinned_at === 'string';
 };
+/**
+ * Returns `true` only if `archived_at` property is of type `string` within `membership` object.
+ */
 export const isChannelArchived = (channel) => {
     if (!channel)
         return false;
-    const member = channel.state.membership;
-    return !!member?.archived_at;
+    const membership = channel.state.membership;
+    return typeof membership.archived_at === 'string';
 };

package/dist/components/ChannelSearch/SearchBar.d.ts

@@ -11,7 +11,7 @@ export type SearchBarController = {
     /** Flag determining whether the search input is focused */
     inputIsFocused: boolean;
     /** Ref object for the input wrapper in the SearchBar */
-    searchBarRef: React.RefObject<HTMLDivElement>;
+    searchBarRef: React.RefObject<HTMLDivElement | null>;
 };
 export type AdditionalSearchBarProps = {
     /** Application menu to be displayed  when clicked on MenuIcon */

package/dist/components/ChannelSearch/SearchInput.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export type SearchInputController = {
     /** Clears the channel search state */
     clearState: () => void;
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     /** Search input change handler */
     onSearch: React.ChangeEventHandler<HTMLInputElement>;
     /** Current search string */

package/dist/components/ChannelSearch/hooks/useChannelSearch.js

@@ -9,7 +9,7 @@ export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClick
     const [query, setQuery] = useState('');
     const [results, setResults] = useState([]);
     const [searching, setSearching] = useState(false);
-    const searchQueryPromiseInProgress = useRef();
+    const searchQueryPromiseInProgress = useRef(undefined);
     const shouldIgnoreQueryResults = useRef(false);
     const inputRef = useRef(null);
     const searchBarRef = useRef(null);

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

@@ -28,7 +28,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
             // the upper-case text between double underscores is replaced with the actual semantic version of the library
-            client.setUserAgent(`stream-chat-react-12.8.2-${userAgent}`);
+            client.setUserAgent(`stream-chat-react-12.10.0-${userAgent}`);
         }
         client.threads.registerSubscriptions();
         client.polls.registerSubscriptions();

package/dist/components/ChatAutoComplete/ChatAutoComplete.d.ts

@@ -53,6 +53,8 @@ export type SuggestionListProps<StreamChatGenerics extends DefaultStreamChatGene
     };
 }>;
 export type ChatAutoCompleteProps<T extends UnknownType = UnknownType> = {
+    /** Override the default disabled state of the underlying `textarea` component. */
+    disabled?: boolean;
     /** Function to override the default submit handler on the underlying `textarea` component */
     handleSubmit?: (event: React.BaseSyntheticEvent) => void;
     /** Function to run on blur of the underlying `textarea` component */

package/dist/components/ChatAutoComplete/ChatAutoComplete.js

@@ -28,6 +28,6 @@ const UnMemoizedChatAutoComplete = (props) => {
             innerRef.current = ref;
         }
     }, [innerRef]);
-    return (React.createElement(AutoCompleteTextarea, { additionalTextareaProps: messageInput.additionalTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: 'str-chat__textarea__textarea str-chat__message-textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea str-chat__message-textarea-react-host', disabled: disabled || !!cooldownRemaining, disableMentions: messageInput.disableMentions, grow: messageInput.grow, handleSubmit: props.handleSubmit || messageInput.handleSubmit, innerRef: updateInnerRef, loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, minRows: messageInput.minRows, onBlur: props.onBlur, onChange: props.onChange || messageInput.handleChange, onFocus: props.onFocus, onPaste: props.onPaste || messageInput.onPaste, placeholder: cooldownRemaining ? t('Slow Mode ON') : placeholder, replaceWord: emojiReplace, rows: props.rows || 1, shouldSubmit: messageInput.shouldSubmit, showCommandsList: messageInput.showCommandsList, showMentionsList: messageInput.showMentionsList, SuggestionItem: SuggestionItem, SuggestionList: SuggestionList, trigger: messageInput.autocompleteTriggers || {}, value: props.value || messageInput.text }));
+    return (React.createElement(AutoCompleteTextarea, { additionalTextareaProps: messageInput.additionalTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: 'str-chat__textarea__textarea str-chat__message-textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea str-chat__message-textarea-react-host', disabled: (props.disabled ?? disabled) || !!cooldownRemaining, disableMentions: messageInput.disableMentions, grow: messageInput.grow, handleSubmit: props.handleSubmit || messageInput.handleSubmit, innerRef: updateInnerRef, loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, minRows: messageInput.minRows, onBlur: props.onBlur, onChange: props.onChange || messageInput.handleChange, onFocus: props.onFocus, onPaste: props.onPaste || messageInput.onPaste, placeholder: cooldownRemaining ? t('Slow Mode ON') : placeholder, replaceWord: emojiReplace, rows: props.rows || 1, shouldSubmit: messageInput.shouldSubmit, showCommandsList: messageInput.showCommandsList, showMentionsList: messageInput.showMentionsList, SuggestionItem: SuggestionItem, SuggestionList: SuggestionList, trigger: messageInput.autocompleteTriggers || {}, value: props.value || messageInput.text }));
 };
 export const ChatAutoComplete = React.memo(UnMemoizedChatAutoComplete);

package/dist/components/Gallery/BaseImage.d.ts

@@ -1,5 +1,3 @@
 import React from 'react';
 export type BaseImageProps = React.ComponentPropsWithRef<'img'>;
-export declare const BaseImage: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
-}, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export declare const BaseImage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;