stream-chat-react 13.14.3 → 14.0.0-beta.2

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

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, StreamChat } from 'stream-chat';
-import type { ChannelsQueryState } from '../../Chat/hooks/useChannelsQueryState';
-type AllowedQueryType = Extract<ChannelsQueryState['queryInProgress'], 'reload' | 'load-more'>;
-export type CustomQueryChannelParams = {
-    currentChannels: Array<Channel>;
-    queryType: AllowedQueryType;
-    setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>;
-    setHasNextPage: React.Dispatch<React.SetStateAction<boolean>>;
-};
-export type CustomQueryChannelsFn = (params: CustomQueryChannelParams) => Promise<void>;
-export declare const usePaginatedChannels: (client: StreamChat, filters: ChannelFilters, sort: ChannelSort, options: ChannelOptions, activeChannelHandler: (channels: Array<Channel>, setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>) => void, recoveryThrottleIntervalMs?: number, customQueryChannels?: CustomQueryChannelsFn) => {
-    channels: Channel[];
-    hasNextPage: boolean;
-    loadNextPage: () => Promise<void>;
-    setChannels: import("react").Dispatch<import("react").SetStateAction<Channel[]>>;
-};
-export {};

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

@@ -1,90 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import uniqBy from 'lodash.uniqby';
-import { useChatContext } from '../../../context/ChatContext';
-const RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5000;
-const MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2000;
-export const usePaginatedChannels = (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS, customQueryChannels) => {
-    const { channelsQueryState: { error, setError, setQueryInProgress }, } = useChatContext('usePaginatedChannels');
-    const [channels, setChannels] = useState([]);
-    const [hasNextPage, setHasNextPage] = useState(true);
-    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);
-    // memoize props
-    const filterString = useMemo(() => JSON.stringify(filters), [filters]);
-    const sortString = useMemo(() => JSON.stringify(sort), [sort]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const queryChannels = async (queryType = 'load-more') => {
-        setError(null);
-        if (queryType === 'reload') {
-            setChannels([]);
-        }
-        setQueryInProgress(queryType);
-        try {
-            if (customQueryChannels) {
-                await customQueryChannels({
-                    currentChannels: channels,
-                    queryType: queryType,
-                    setChannels,
-                    setHasNextPage,
-                });
-            }
-            else {
-                const offset = queryType === 'reload' ? 0 : channels.length;
-                const newOptions = {
-                    offset,
-                    ...options,
-                };
-                const channelQueryResponse = await client.queryChannels(filters, sort || {}, newOptions);
-                const newChannels = queryType === 'reload'
-                    ? channelQueryResponse
-                    : uniqBy([...channels, ...channelQueryResponse], 'cid');
-                setChannels(newChannels);
-                setHasNextPage(channelQueryResponse.length >= (newOptions.limit ?? 1));
-                // Set active channel only on load of first page
-                if (!offset && activeChannelHandler) {
-                    activeChannelHandler(newChannels, setChannels);
-                }
-            }
-        }
-        catch (error) {
-            console.warn(error);
-            setError(error);
-        }
-        setQueryInProgress(null);
-    };
-    const throttleRecover = useCallback(() => {
-        const now = Date.now();
-        const isFirstRecovery = !lastRecoveryTimestamp.current;
-        const timeElapsedSinceLastRecoveryMs = lastRecoveryTimestamp.current
-            ? now - lastRecoveryTimestamp.current
-            : 0;
-        if (!isFirstRecovery &&
-            timeElapsedSinceLastRecoveryMs < recoveryThrottleInterval &&
-            !error) {
-            return;
-        }
-        lastRecoveryTimestamp.current = now;
-        queryChannels('reload');
-    }, [error, queryChannels, recoveryThrottleInterval]);
-    const loadNextPage = () => queryChannels();
-    useEffect(() => {
-        if (client.recoverStateOnReconnect)
-            return;
-        const { unsubscribe } = client.on('connection.recovered', throttleRecover);
-        return () => {
-            unsubscribe();
-        };
-    }, [client, throttleRecover]);
-    useEffect(() => {
-        queryChannels('reload');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filterString, sortString]);
-    return {
-        channels,
-        hasNextPage,
-        loadNextPage,
-        setChannels,
-    };
-};

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

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

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

@@ -1,20 +0,0 @@
-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, selector, stateChangeEventKeys = ['all'], }) {
-    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/hooks/useUserPresenceChangedListener.d.ts

@@ -1,2 +0,0 @@
-import type { Channel } from 'stream-chat';
-export declare const useUserPresenceChangedListener: (setChannels: React.Dispatch<React.SetStateAction<Array<Channel>>>) => void;

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

@@ -1,24 +0,0 @@
-import { useEffect } from 'react';
-import { useChatContext } from '../../../context/ChatContext';
-export const useUserPresenceChangedListener = (setChannels) => {
-    const { client } = useChatContext('useUserPresenceChangedListener');
-    useEffect(() => {
-        const handleEvent = (event) => {
-            setChannels((channels) => {
-                const newChannels = channels.map((channel) => {
-                    if (!event.user?.id || !channel.state.members[event.user.id]) {
-                        return channel;
-                    }
-                    const newChannel = channel; // dumb workaround for linter
-                    newChannel.state.members[event.user.id].user = event.user;
-                    return newChannel;
-                });
-                return [...newChannels];
-            });
-        };
-        client.on('user.presence.changed', handleEvent);
-        return () => {
-            client.off('user.presence.changed', handleEvent);
-        };
-    }, [client, setChannels]);
-};

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

@@ -1,4 +0,0 @@
-export * from './ChannelList';
-export * from './ChannelListMessenger';
-export * from './hooks';
-export * from './utils';

package/dist/components/ChannelList/index.js

@@ -1,4 +0,0 @@
-export * from './ChannelList';
-export * from './ChannelListMessenger';
-export * from './hooks';
-export * from './utils';

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

@@ -1,54 +0,0 @@
-import type { Channel, ChannelSort, ChannelSortBase } from 'stream-chat';
-import type { ChannelListProps } from './ChannelList';
-type MoveChannelUpParams = {
-    channels: Array<Channel>;
-    cid: string;
-    activeChannel?: Channel;
-};
-/**
- * @deprecated
- */
-export declare const moveChannelUp: ({ activeChannel, channels, cid }: MoveChannelUpParams) => Channel[];
-/**
- * Expects channel array sorted by `{ pinned_at: -1 }`.
- *
- * TODO: add support for the `{ pinned_at: 1 }`
- */
-export declare function findLastPinnedChannelIndex({ channels }: {
-    channels: Channel[];
-}): number | null;
-type MoveChannelUpwardsParams = {
-    channels: Array<Channel>;
-    channelToMove: Channel;
-    sort: ChannelSort;
-    /**
-     * If the index of the channel within `channels` list which is being moved upwards
-     * (`channelToMove`) is known, you can supply it to skip extra calculation.
-     */
-    channelToMoveIndexWithinChannels?: number;
-};
-export declare const moveChannelUpwards: ({ channels, channelToMove, channelToMoveIndexWithinChannels, sort, }: MoveChannelUpwardsParams) => Channel[];
-/**
- * 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: (sort: ChannelListProps['sort']) => boolean;
-export declare const extractSortValue: ({ atIndex, sort, targetKey, }: {
-    atIndex: number;
-    targetKey: keyof ChannelSortBase;
-    sort?: ChannelListProps['sort'];
-}) => import("stream-chat").AscDesc | null;
-/**
- * Returns `true` only if `archived` property is of type `boolean` within `filters` object.
- */
-export declare const shouldConsiderArchivedChannels: (filters: ChannelListProps['filters']) => boolean;
-/**
- * Returns `true` only if `pinned_at` property is of type `string` within `membership` object.
- */
-export declare const isChannelPinned: (channel: Channel) => boolean;
-/**
- * Returns `true` only if `archived_at` property is of type `string` within `membership` object.
- */
-export declare const isChannelArchived: (channel: Channel) => boolean;
-export {};

package/dist/components/ChannelList/utils.js

@@ -1,121 +0,0 @@
-import uniqBy from 'lodash.uniqby';
-/**
- * @deprecated
- */
-export const moveChannelUp = ({ activeChannel, channels, cid }) => {
-    // get index of channel to move up
-    const channelIndex = channels.findIndex((channel) => channel.cid === cid);
-    if (!activeChannel && channelIndex <= 0)
-        return channels;
-    // get channel to move up
-    const channel = activeChannel || channels[channelIndex];
-    return uniqBy([channel, ...channels], 'cid');
-};
-/**
- * Expects channel array sorted by `{ pinned_at: -1 }`.
- *
- * TODO: add support for the `{ pinned_at: 1 }`
- */
-export function findLastPinnedChannelIndex({ channels }) {
-    let lastPinnedChannelIndex = null;
-    for (const channel of channels) {
-        if (!isChannelPinned(channel))
-            break;
-        if (typeof lastPinnedChannelIndex === 'number') {
-            lastPinnedChannelIndex++;
-        }
-        else {
-            lastPinnedChannelIndex = 0;
-        }
-    }
-    return lastPinnedChannelIndex;
-}
-export const moveChannelUpwards = ({ channels, channelToMove, channelToMoveIndexWithinChannels, sort, }) => {
-    // get index of channel to move up
-    const targetChannelIndex = channelToMoveIndexWithinChannels ??
-        channels.findIndex((channel) => channel.cid === channelToMove.cid);
-    const targetChannelExistsWithinList = targetChannelIndex >= 0;
-    const targetChannelAlreadyAtTheTop = targetChannelIndex === 0;
-    // pinned channels should not move within the list based on recent activity, channels which
-    // receive messages and are not pinned should move upwards but only under the last pinned channel
-    // in the list
-    const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
-    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) {
-        newChannels.splice(targetChannelIndex, 1);
-    }
-    // as position of pinned channels has to stay unchanged, we need to
-    // find last pinned channel in the list to move the target channel after
-    let lastPinnedChannelIndex = null;
-    if (considerPinnedChannels) {
-        lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });
-    }
-    // re-insert it at the new place (to specific index if pinned channels are considered)
-    newChannels.splice(typeof lastPinnedChannelIndex === 'number' ? lastPinnedChannelIndex + 1 : 0, 0, channelToMove);
-    return newChannels;
-};
-/**
- * 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) => {
-    const value = extractSortValue({ atIndex: 0, sort, targetKey: 'pinned_at' });
-    if (typeof value !== 'number')
-        return false;
-    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 of type `boolean` within `filters` object.
- */
-export const shouldConsiderArchivedChannels = (filters) => {
-    if (!filters)
-        return false;
-    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 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 membership = channel.state.membership;
-    return typeof membership.archived_at === 'string';
-};

package/dist/components/ChannelPreview/ChannelPreview.d.ts

@@ -1,55 +0,0 @@
-import React from 'react';
-import type { ReactNode } from 'react';
-import type { Channel, LocalMessage } from 'stream-chat';
-import type { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
-import type { ChatContextValue } from '../../context/ChatContext';
-import type { ChannelAvatarProps } from '../Avatar/ChannelAvatar';
-import type { GroupChannelDisplayInfo } from './utils';
-import type { TranslationContextValue } from '../../context/TranslationContext';
-export type ChannelPreviewUIComponentProps = ChannelPreviewProps & {
-    /** Image of Channel to display */
-    displayImage?: string;
-    /** Title of Channel to display */
-    displayTitle?: string;
-    /** Title of Channel to display */
-    groupChannelDisplayInfo?: GroupChannelDisplayInfo;
-    /** The last message received in a channel */
-    lastMessage?: LocalMessage;
-    /** @deprecated Use latestMessagePreview prop instead. */
-    latestMessage?: ReactNode;
-    /** Latest message preview to display, will be a string or JSX element supporting markdown. */
-    latestMessagePreview?: ReactNode;
-    /** Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. */
-    messageDeliveryStatus?: MessageDeliveryStatus;
-    /** Number of unread Messages */
-    unread?: number;
-};
-export type ChannelPreviewProps = {
-    /** Comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from [ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) */
-    channel: Channel;
-    /** If the component's channel is the active (selected) Channel */
-    active?: boolean;
-    /** Current selected channel object */
-    activeChannel?: Channel;
-    /** UI component to display an avatar, defaults to [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) component and accepts the same props as: [ChannelAvatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/ChannelAvatar.tsx) */
-    Avatar?: React.ComponentType<ChannelAvatarProps>;
-    /** Forces the update of preview component on channel update */
-    channelUpdateCount?: number;
-    /** Custom class for the channel preview root */
-    className?: string;
-    /** Custom function that generates the message preview in ChannelPreview component */
-    getLatestMessagePreview?: (channel: Channel, t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage'], isMessageAIGenerated: ChatContextValue['isMessageAIGenerated']) => ReactNode;
-    key?: string;
-    /** Custom ChannelPreview click handler function */
-    onSelect?: (event: React.MouseEvent) => void;
-    /** Custom UI component to display the channel preview in the list, defaults to and accepts same props as: [ChannelPreviewMessenger](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelPreviewMessenger.tsx) */
-    Preview?: React.ComponentType<ChannelPreviewUIComponentProps>;
-    /** Setter for selected Channel */
-    setActiveChannel?: ChatContextValue['setActiveChannel'];
-    /** Object containing watcher parameters */
-    watchers?: {
-        limit?: number;
-        offset?: number;
-    };
-};
-export declare const ChannelPreview: (props: ChannelPreviewProps) => React.JSX.Element | null;

package/dist/components/ChannelPreview/ChannelPreview.js

@@ -1,95 +0,0 @@
-import throttle from 'lodash.throttle';
-import React, { useEffect, useMemo, useState } from 'react';
-import { ChannelPreviewMessenger } from './ChannelPreviewMessenger';
-import { useIsChannelMuted } from './hooks/useIsChannelMuted';
-import { useChannelPreviewInfo } from './hooks/useChannelPreviewInfo';
-import { getLatestMessagePreview as defaultGetLatestMessagePreview } from './utils';
-import { useChatContext } from '../../context/ChatContext';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
-export const ChannelPreview = (props) => {
-    const { active, channel, channelUpdateCount, getLatestMessagePreview = defaultGetLatestMessagePreview, Preview = ChannelPreviewMessenger, } = props;
-    const { channel: activeChannel, client, isMessageAIGenerated, setActiveChannel, } = useChatContext('ChannelPreview');
-    const { t, userLanguage } = useTranslationContext('ChannelPreview');
-    const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
-        channel,
-    });
-    const [lastMessage, setLastMessage] = useState(channel.state.messages[channel.state.messages.length - 1]);
-    const [latestMessagePreview, setLatestMessagePreview] = useState(() => getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated));
-    const [unread, setUnread] = useState(0);
-    const { messageDeliveryStatus } = useMessageDeliveryStatus({
-        channel,
-        lastMessage,
-    });
-    const isActive = typeof active === 'undefined' ? activeChannel?.cid === channel.cid : active;
-    const { muted } = useIsChannelMuted(channel);
-    useEffect(() => {
-        const handleEvent = (event) => {
-            if (!event.cid)
-                return setUnread(0);
-            if (channel.cid === event.cid)
-                setUnread(0);
-        };
-        client.on('notification.mark_read', handleEvent);
-        return () => client.off('notification.mark_read', handleEvent);
-    }, [channel, client]);
-    useEffect(() => {
-        const handleEvent = (event) => {
-            if (channel.cid !== event.cid)
-                return;
-            if (event.user?.id !== client.user?.id)
-                return;
-            setUnread(channel.countUnread());
-        };
-        channel.on('notification.mark_unread', handleEvent);
-        return () => {
-            channel.off('notification.mark_unread', handleEvent);
-        };
-    }, [channel, client]);
-    const refreshUnreadCount = useMemo(() => throttle(() => {
-        if (muted) {
-            setUnread(0);
-        }
-        else {
-            setUnread(channel.countUnread());
-        }
-    }, 400), [channel, muted]);
-    useEffect(() => {
-        refreshUnreadCount();
-        setLatestMessagePreview(getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated));
-        const handleEvent = (event) => {
-            const deletedMessagesInAnotherChannel = event.type === 'user.messages.deleted' && event.cid && event.cid !== channel.cid;
-            if (deletedMessagesInAnotherChannel)
-                return;
-            setLastMessage(channel.state.latestMessages[channel.state.latestMessages.length - 1]);
-            setLatestMessagePreview(getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated));
-            refreshUnreadCount();
-        };
-        channel.on('message.new', handleEvent);
-        channel.on('message.updated', handleEvent);
-        channel.on('message.deleted', handleEvent);
-        client.on('user.messages.deleted', handleEvent);
-        channel.on('message.undeleted', handleEvent);
-        channel.on('channel.truncated', handleEvent);
-        return () => {
-            channel.off('message.new', handleEvent);
-            channel.off('message.updated', handleEvent);
-            channel.off('message.deleted', handleEvent);
-            client.off('user.messages.deleted', handleEvent);
-            channel.off('message.undeleted', handleEvent);
-            channel.off('channel.truncated', handleEvent);
-        };
-    }, [
-        channel,
-        client,
-        refreshUnreadCount,
-        channelUpdateCount,
-        getLatestMessagePreview,
-        t,
-        userLanguage,
-        isMessageAIGenerated,
-    ]);
-    if (!Preview)
-        return null;
-    return (React.createElement(Preview, { ...props, active: isActive, displayImage: displayImage, displayTitle: displayTitle, groupChannelDisplayInfo: groupChannelDisplayInfo, lastMessage: lastMessage, latestMessage: latestMessagePreview, latestMessagePreview: latestMessagePreview, messageDeliveryStatus: messageDeliveryStatus, setActiveChannel: setActiveChannel, unread: unread }));
-};

package/dist/components/ChannelPreview/ChannelPreviewActionButtons.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { Channel } from 'stream-chat';
-export type ChannelPreviewActionButtonsProps = {
-    channel: Channel;
-};
-export declare function ChannelPreviewActionButtons({ channel, }: ChannelPreviewActionButtonsProps): React.JSX.Element;

package/dist/components/ChannelPreview/ChannelPreviewActionButtons.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { useChannelMembershipState } from '../ChannelList';
-import { Icon } from './icons';
-import { useTranslationContext } from '../../context';
-export function ChannelPreviewActionButtons({ channel, }) {
-    const membership = useChannelMembershipState(channel);
-    const { t } = useTranslationContext();
-    return (React.createElement("div", { className: 'str-chat__channel-preview__action-buttons' },
-        React.createElement("button", { "aria-label": membership.pinned_at ? t('Unpin') : t('Pin'), className: clsx('str-chat__channel-preview__action-button', 'str-chat__channel-preview__action-button--pin', membership.pinned_at && 'str-chat__channel-preview__action-button--active'), onClick: (e) => {
-                e.stopPropagation();
-                if (membership.pinned_at) {
-                    channel.unpin();
-                }
-                else {
-                    channel.pin();
-                }
-            }, title: membership.pinned_at ? t('Unpin') : t('Pin') },
-            React.createElement(Icon.Pin, null)),
-        React.createElement("button", { "aria-label": membership.archived_at ? t('Unarchive') : t('Archive'), className: clsx('str-chat__channel-preview__action-button', 'str-chat__channel-preview__action-button--archive', membership.archived_at && 'str-chat__channel-preview__action-button--active'), onClick: (e) => {
-                e.stopPropagation();
-                if (membership.archived_at) {
-                    channel.unarchive();
-                }
-                else {
-                    channel.archive();
-                }
-            }, title: membership.archived_at ? t('Unarchive') : t('Archive') },
-            React.createElement(Icon.ArchiveBox, null))));
-}

package/dist/components/ChannelPreview/ChannelPreviewMessenger.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { ChannelPreviewUIComponentProps } from './ChannelPreview';
-/**
- * Used as preview component for channel item in [ChannelList](#channellist) component.
- * Its best suited for messenger type chat.
- */
-export declare const ChannelPreviewMessenger: (props: ChannelPreviewUIComponentProps) => React.JSX.Element;

package/dist/components/ChannelPreview/ChannelPreviewMessenger.js

@@ -1,38 +0,0 @@
-import React, { useRef } from 'react';
-import clsx from 'clsx';
-import { ChannelPreviewActionButtons as DefaultChannelPreviewActionButtons } from './ChannelPreviewActionButtons';
-import { Avatar as DefaultAvatar } from '../Avatar';
-import { useComponentContext } from '../../context';
-const UnMemoizedChannelPreviewMessenger = (props) => {
-    const { active, Avatar = DefaultAvatar, channel, className: customClassName = '', displayImage, displayTitle, groupChannelDisplayInfo, latestMessagePreview, onSelect: customOnSelectChannel, setActiveChannel, unread, watchers, } = props;
-    const { ChannelPreviewActionButtons = DefaultChannelPreviewActionButtons } = useComponentContext();
-    const channelPreviewButton = useRef(null);
-    const avatarName = displayTitle || channel.state.messages[channel.state.messages.length - 1]?.user?.id;
-    const onSelectChannel = (e) => {
-        if (customOnSelectChannel) {
-            customOnSelectChannel(e);
-        }
-        else if (setActiveChannel) {
-            setActiveChannel(channel, watchers);
-        }
-        if (channelPreviewButton?.current) {
-            channelPreviewButton.current.blur();
-        }
-    };
-    return (React.createElement("div", { className: 'str-chat__channel-preview-container' },
-        React.createElement(ChannelPreviewActionButtons, { channel: channel }),
-        React.createElement("button", { "aria-label": `Select Channel: ${displayTitle || ''}`, "aria-selected": active, className: clsx(`str-chat__channel-preview-messenger str-chat__channel-preview`, active && 'str-chat__channel-preview-messenger--active', unread && unread >= 1 && 'str-chat__channel-preview-messenger--unread', customClassName), "data-testid": 'channel-preview-button', onClick: onSelectChannel, ref: channelPreviewButton, role: 'option' },
-            React.createElement("div", { className: 'str-chat__channel-preview-messenger--left' },
-                React.createElement(Avatar, { className: 'str-chat__avatar--channel-preview', groupChannelDisplayInfo: groupChannelDisplayInfo, image: displayImage, name: avatarName })),
-            React.createElement("div", { className: 'str-chat__channel-preview-end' },
-                React.createElement("div", { className: 'str-chat__channel-preview-end-first-row' },
-                    React.createElement("div", { className: 'str-chat__channel-preview-messenger--name' },
-                        React.createElement("span", null, displayTitle)),
-                    !!unread && (React.createElement("div", { className: 'str-chat__channel-preview-unread-badge', "data-testid": 'unread-badge' }, unread))),
-                React.createElement("div", { className: 'str-chat__channel-preview-messenger--last-message' }, latestMessagePreview)))));
-};
-/**
- * Used as preview component for channel item in [ChannelList](#channellist) component.
- * Its best suited for messenger type chat.
- */
-export const ChannelPreviewMessenger = React.memo(UnMemoizedChannelPreviewMessenger);

package/dist/components/ChannelPreview/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export { useChannelPreviewInfo } from './useChannelPreviewInfo';
-export { MessageDeliveryStatus } from './useMessageDeliveryStatus';

package/dist/components/ChannelPreview/hooks/index.js

@@ -1,2 +0,0 @@
-export { useChannelPreviewInfo } from './useChannelPreviewInfo';
-export { MessageDeliveryStatus } from './useMessageDeliveryStatus';

package/dist/components/ChannelPreview/hooks/useChannelPreviewInfo.d.ts

@@ -1,13 +0,0 @@
-import type { Channel } from 'stream-chat';
-export type ChannelPreviewInfoParams = {
-    channel: Channel;
-    /** Manually set the image to render, defaults to the Channel image */
-    overrideImage?: string;
-    /** Set title manually */
-    overrideTitle?: string;
-};
-export declare const useChannelPreviewInfo: (props: ChannelPreviewInfoParams) => {
-    displayImage: string | undefined;
-    displayTitle: string | undefined;
-    groupChannelDisplayInfo: import("../utils").GroupChannelDisplayInfo | undefined;
-};

package/dist/components/ChannelPreview/hooks/useChannelPreviewInfo.js

@@ -1,32 +0,0 @@
-import { useEffect, useState } from 'react';
-import { getDisplayImage, getDisplayTitle, getGroupChannelDisplayInfo } from '../utils';
-import { useChatContext } from '../../../context';
-export const useChannelPreviewInfo = (props) => {
-    const { channel, overrideImage, overrideTitle } = props;
-    const { client } = useChatContext('useChannelPreviewInfo');
-    const [displayTitle, setDisplayTitle] = useState(() => overrideTitle || getDisplayTitle(channel, client.user));
-    const [displayImage, setDisplayImage] = useState(() => overrideImage || getDisplayImage(channel, client.user));
-    const [groupChannelDisplayInfo, setGroupDisplayChannelInfo] = useState(() => getGroupChannelDisplayInfo(channel));
-    useEffect(() => {
-        if (overrideTitle && overrideImage)
-            return;
-        const updateInfo = () => {
-            if (!overrideTitle)
-                setDisplayTitle(getDisplayTitle(channel, client.user));
-            if (!overrideImage) {
-                setDisplayImage(getDisplayImage(channel, client.user));
-                setGroupDisplayChannelInfo(getGroupChannelDisplayInfo(channel));
-            }
-        };
-        updateInfo();
-        client.on('user.updated', updateInfo);
-        return () => {
-            client.off('user.updated', updateInfo);
-        };
-    }, [channel, channel.data, client, overrideImage, overrideTitle]);
-    return {
-        displayImage: overrideImage || displayImage,
-        displayTitle: overrideTitle || displayTitle,
-        groupChannelDisplayInfo,
-    };
-};