stream-chat-react 12.7.1 → 12.8.0

package/dist/components/ChannelList/utils.js

@@ -1,5 +1,8 @@
 import uniqBy from 'lodash.uniqby';
 export const MAX_QUERY_CHANNELS_LIMIT = 30;
+/**
+ * @deprecated
+ */
 export const moveChannelUp = ({ activeChannel, channels, cid, }) => {
     // get index of channel to move up
     const channelIndex = channels.findIndex((channel) => channel.cid === cid);
@@ -9,3 +12,85 @@ export const moveChannelUp = ({ activeChannel, channels, cid, }) => {
     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;
+}
+/**
+ * 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 ??
+        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);
+    if (targetChannelAlreadyAtTheTop)
+        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 `{ pinned_at: -1 }` or `{ pinned_at: 1 }` option is first within the `sort` array.
+ */
+export const shouldConsiderPinnedChannels = (sort) => {
+    if (!sort)
+        return false;
+    if (!Array.isArray(sort))
+        return false;
+    const [option] = sort;
+    if (!option?.pinned_at)
+        return false;
+    return Math.abs(option.pinned_at) === 1;
+};
+/**
+ * Returns `true` only if `archived` property is set to `false` within `filters`.
+ */
+export const shouldConsiderArchivedChannels = (filters) => {
+    if (!filters)
+        return false;
+    return !filters.archived;
+};
+export const isChannelPinned = (channel) => {
+    if (!channel)
+        return false;
+    const member = channel.state.membership;
+    return !!member?.pinned_at;
+};
+export const isChannelArchived = (channel) => {
+    if (!channel)
+        return false;
+    const member = channel.state.membership;
+    return !!member?.archived_at;
+};

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

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

package/dist/components/ChannelPreview/ChannelPreviewActionButtons.js

@@ -0,0 +1,30 @@
+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,8 +1,8 @@
 import React from 'react';
-import type { ChannelPreviewUIComponentProps } from './ChannelPreview';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+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: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ChannelPreviewUIComponentProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const ChannelPreviewMessenger: <SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ChannelPreviewUIComponentProps<SCG>) => React.JSX.Element;

package/dist/components/ChannelPreview/ChannelPreviewMessenger.js

@@ -1,8 +1,11 @@
 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) => {
@@ -16,15 +19,17 @@ const UnMemoizedChannelPreviewMessenger = (props) => {
             channelPreviewButton.current.blur();
         }
     };
-    return (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))));
+    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.

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+export declare const Icon: {
+    ArchiveBox: (props: ComponentPropsWithoutRef<'svg'>) => React.JSX.Element;
+    Pin: (props: ComponentPropsWithoutRef<'svg'>) => React.JSX.Element;
+};

package/dist/components/ChannelPreview/icons.js

@@ -0,0 +1,8 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+export const Icon = {
+    ArchiveBox: (props) => (React.createElement("svg", { className: 'str-chat__icon str-chat__icon--archive-box', fill: 'currentColor', viewBox: '0 0 512 512', xmlns: 'http://www.w3.org/2000/svg', ...props },
+        React.createElement("path", { d: 'M32 32l448 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96L0 64C0 46.3 14.3 32 32 32zm0 128l448 0 0 256c0 35.3-28.7 64-64 64L96 480c-35.3 0-64-28.7-64-64l0-256zm128 80c0 8.8 7.2 16 16 16l160 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-160 0c-8.8 0-16 7.2-16 16z' }))),
+    Pin: (props) => (React.createElement("svg", { className: 'str-chat__icon str-chat__icon--pin', fill: 'currentColor', viewBox: '0 0 384 512', xmlns: 'http://www.w3.org/2000/svg', ...props },
+        React.createElement("path", { d: 'M32 32C32 14.3 46.3 0 64 0L320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-29.5 0 11.4 148.2c36.7 19.9 65.7 53.2 79.5 94.7l1 3c3.3 9.8 1.6 20.5-4.4 28.8s-15.7 13.3-26 13.3L32 352c-10.3 0-19.9-4.9-26-13.3s-7.7-19.1-4.4-28.8l1-3c13.8-41.5 42.8-74.8 79.5-94.7L93.5 64 64 64C46.3 64 32 49.7 32 32zM160 384l64 0 0 96c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-96z' }))),
+};

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

@@ -1,4 +1,5 @@
 export * from './ChannelPreview';
 export * from './ChannelPreviewMessenger';
+export * from './ChannelPreviewActionButtons';
 export * from './hooks';
 export * from './utils';

package/dist/components/ChannelPreview/index.js

@@ -1,4 +1,5 @@
 export * from './ChannelPreview';
 export * from './ChannelPreviewMessenger';
+export * from './ChannelPreviewActionButtons';
 export * from './hooks';
 export * from './utils';

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.7.1-${userAgent}`);
+            client.setUserAgent(`stream-chat-react-12.8.0-${userAgent}`);
         }
         client.threads.registerSubscriptions();
         client.polls.registerSubscriptions();

package/dist/context/ComponentContext.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LinkPreviewListProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, SuggestionItemProps, SuggestionListProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
+import { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LinkPreviewListProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, SuggestionItemProps, SuggestionListProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
 import type { CustomTrigger, DefaultStreamChatGenerics, PropsWithChildrenOnly, UnknownType } from '../types/types';
 import type { StopAIGenerationButtonProps } from '../components/MessageInput/StopAIGenerationButton';
 export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
@@ -21,6 +21,8 @@ export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGe
     Avatar?: React.ComponentType<AvatarProps<StreamChatGenerics>>;
     /** Custom UI component to display <img/> elements resp. a fallback in case of load error, defaults to and accepts same props as: [BaseImage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/BaseImage.tsx) */
     BaseImage?: React.ComponentType<BaseImageProps>;
+    /** Custom UI component to display set of action buttons within `ChannelPreviewMessenger` component, accepts same props as: [ChannelPreviewActionButtons](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelPreviewActionButtons.tsx) */
+    ChannelPreviewActionButtons?: React.ComponentType<ChannelPreviewActionButtonsProps<StreamChatGenerics>>;
     /** Custom UI component to display the slow mode cooldown timer, defaults to and accepts same props as: [CooldownTimer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/CooldownTimer.tsx) */
     CooldownTimer?: React.ComponentType<CooldownTimerProps>;
     /** Custom UI component to render set of buttons to be displayed in the MessageActionsBox, defaults to and accepts same props as: [CustomMessageActionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/CustomMessageActionsList.tsx) */