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

package/dist/components/Reactions/hooks/useProcessReactions.js

@@ -1,67 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { useComponentContext, useMessageContext } from '../../../context';
-import { defaultReactionOptions } from '../reactionOptions';
-export const defaultReactionsSort = (a, b) => {
-    if (a.firstReactionAt && b.firstReactionAt) {
-        return +a.firstReactionAt - +b.firstReactionAt;
-    }
-    return a.reactionType.localeCompare(b.reactionType, 'en');
-};
-export const useProcessReactions = (params) => {
-    const { own_reactions: propOwnReactions, reaction_groups: propReactionGroups, reactionOptions: propReactionOptions, reactions: propReactions, sortReactions: propSortReactions, } = params;
-    const { message, sortReactions: contextSortReactions } = useMessageContext('useProcessReactions');
-    const { reactionOptions: contextReactionOptions = defaultReactionOptions } = useComponentContext('useProcessReactions');
-    const reactionOptions = propReactionOptions ?? contextReactionOptions;
-    const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;
-    const latestReactions = propReactions || message.latest_reactions;
-    const ownReactions = propOwnReactions || message?.own_reactions;
-    const reactionGroups = propReactionGroups || message?.reaction_groups;
-    const isOwnReaction = useCallback((reactionType) => ownReactions?.some((reaction) => reaction.type === reactionType) ?? false, [ownReactions]);
-    const getEmojiByReactionType = useCallback((reactionType) => reactionOptions.find(({ type }) => type === reactionType)?.Component ?? null, [reactionOptions]);
-    const isSupportedReaction = useCallback((reactionType) => reactionOptions.some((reactionOption) => reactionOption.type === reactionType), [reactionOptions]);
-    const getLatestReactedUserNames = useCallback((reactionType) => latestReactions?.flatMap((reaction) => {
-        if (reactionType && reactionType === reaction.type) {
-            const username = reaction.user?.name || reaction.user?.id;
-            return username ? [username] : [];
-        }
-        return [];
-    }) ?? [], [latestReactions]);
-    const existingReactions = useMemo(() => {
-        if (!reactionGroups) {
-            return [];
-        }
-        const unsortedReactions = Object.entries(reactionGroups).flatMap(([reactionType, { count, first_reaction_at, last_reaction_at }]) => {
-            if (count === 0 || !isSupportedReaction(reactionType)) {
-                return [];
-            }
-            const latestReactedUserNames = getLatestReactedUserNames(reactionType);
-            return [
-                {
-                    EmojiComponent: getEmojiByReactionType(reactionType),
-                    firstReactionAt: first_reaction_at ? new Date(first_reaction_at) : null,
-                    isOwnReaction: isOwnReaction(reactionType),
-                    lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
-                    latestReactedUserNames,
-                    reactionCount: count,
-                    reactionType,
-                    unlistedReactedUserCount: count - latestReactedUserNames.length,
-                },
-            ];
-        });
-        return unsortedReactions.sort(sortReactions);
-    }, [
-        getEmojiByReactionType,
-        getLatestReactedUserNames,
-        isOwnReaction,
-        isSupportedReaction,
-        reactionGroups,
-        sortReactions,
-    ]);
-    const hasReactions = existingReactions.length > 0;
-    const totalReactionCount = useMemo(() => existingReactions.reduce((total, { reactionCount }) => total + reactionCount, 0), [existingReactions]);
-    return {
-        existingReactions,
-        hasReactions,
-        totalReactionCount,
-    };
-};

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

@@ -1,7 +0,0 @@
-export * from './ReactionSelector';
-export * from './ReactionsList';
-export * from './ReactionsListModal';
-export * from './SimpleReactionsList';
-export * from './SpriteImage';
-export * from './StreamEmoji';
-export * from './reactionOptions';

package/dist/components/Reactions/index.js

@@ -1,7 +0,0 @@
-export * from './ReactionSelector';
-export * from './ReactionsList';
-export * from './ReactionsListModal';
-export * from './SimpleReactionsList';
-export * from './SpriteImage';
-export * from './StreamEmoji';
-export * from './reactionOptions';

package/dist/components/Reactions/reactionOptions.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export type ReactionOptions = Array<{
-    Component: React.ComponentType;
-    type: string;
-    name?: string;
-}>;
-export declare const defaultReactionOptions: ReactionOptions;

package/dist/components/Reactions/reactionOptions.js

@@ -1,26 +0,0 @@
-/* eslint-disable sort-keys */
-import React from 'react';
-import { StreamEmoji } from './StreamEmoji';
-export const defaultReactionOptions = [
-    {
-        type: 'haha',
-        Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE02', type: 'haha' }),
-        name: 'Joy',
-    },
-    {
-        type: 'like',
-        Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDC4D', type: 'like' }),
-        name: 'Thumbs up',
-    },
-    {
-        type: 'love',
-        Component: () => React.createElement(StreamEmoji, { fallback: '\u2764\uFE0F', type: 'love' }),
-        name: 'Heart',
-    },
-    { type: 'sad', Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE14', type: 'sad' }), name: 'Sad' },
-    {
-        type: 'wow',
-        Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE32', type: 'wow' }),
-        name: 'Astonished',
-    },
-];

package/dist/components/Reactions/types.d.ts

@@ -1,15 +0,0 @@
-import type { ComponentType } from 'react';
-import type { ReactionResponse } from 'stream-chat';
-export interface ReactionSummary {
-    EmojiComponent: ComponentType | null;
-    firstReactionAt: Date | null;
-    isOwnReaction: boolean;
-    lastReactionAt: Date | null;
-    latestReactedUserNames: string[];
-    reactionCount: number;
-    reactionType: string;
-    unlistedReactedUserCount: number;
-}
-export type ReactionsComparator = (a: ReactionSummary, b: ReactionSummary) => number;
-export type ReactionDetailsComparator = (a: ReactionResponse, b: ReactionResponse) => number;
-export type ReactionType = ReactionResponse['type'];

package/dist/components/Reactions/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,3 +0,0 @@
-import type { ForwardedRef, MutableRefObject } from 'react';
-export declare const isMutableRef: <T>(ref: ForwardedRef<T> | null) => ref is MutableRefObject<T>;
-export declare const getImageDimensions: (source: string) => Promise<[number, number]>;

package/dist/components/Reactions/utils/utils.js

@@ -1,16 +0,0 @@
-export const isMutableRef = (ref) => {
-    if (ref) {
-        return ref.current !== undefined;
-    }
-    return false;
-};
-export const getImageDimensions = (source) => new Promise((resolve, reject) => {
-    const image = new Image();
-    image.addEventListener('load', () => {
-        resolve([image.width, image.height]);
-    }, { once: true });
-    image.addEventListener('error', () => reject(`Couldn't load image from ${source}`), {
-        once: true,
-    });
-    image.src = source;
-});

package/dist/components/SafeAnchor/SafeAnchor.d.ts

@@ -1,18 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-/**
- * Similar to a regular anchor tag, but it sanitizes the href value and prevents XSS
- */
-export type SafeAnchorProps = {
-    /** Set the className for the anchor tag element */
-    className?: string;
-    /** Specifies that the target (href attribute) will be downloaded instead of navigating to a file */
-    download?: boolean;
-    /** Set the href attribute for the anchor tag element */
-    href?: string;
-    /** Set the rel attribute for the anchor tag element */
-    rel?: string;
-    /** Set the target attribute for the anchor tag element */
-    target?: string;
-};
-export declare const SafeAnchor: (props: PropsWithChildren<SafeAnchorProps>) => React.JSX.Element | null;

package/dist/components/SafeAnchor/SafeAnchor.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { sanitizeUrl } from '@braintree/sanitize-url';
-import { useTranslationContext } from '../../context';
-const UnMemoizedSafeAnchor = (props) => {
-    const { children, className, download, href, rel, target } = props;
-    const { t } = useTranslationContext('SafeAnchor');
-    if (!href)
-        return null;
-    const sanitized = sanitizeUrl(href);
-    return (React.createElement("a", { "aria-label": t('aria/Attachment'), className: className, download: download, href: sanitized, rel: rel, target: target }, children));
-};
-export const SafeAnchor = React.memo(UnMemoizedSafeAnchor);

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

@@ -1 +0,0 @@
-export * from './SafeAnchor';

package/dist/components/SafeAnchor/index.js

@@ -1,2 +0,0 @@
-// export { default as SafeAnchor } from './SafeAnchor';
-export * from './SafeAnchor';

package/dist/components/TextareaComposer/SuggestionList/CommandItem.d.ts

@@ -1,7 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-import type { CommandResponse } from 'stream-chat';
-export type CommandItemProps = {
-    entity: CommandResponse;
-};
-export declare const CommandItem: (props: PropsWithChildren<CommandItemProps>) => React.JSX.Element;

package/dist/components/TextareaComposer/SuggestionList/CommandItem.js

@@ -1,29 +0,0 @@
-import { useMemo } from 'react';
-import React from 'react';
-import { useTranslationContext } from '../../../context';
-export const CommandItem = (props) => {
-    const { t } = useTranslationContext();
-    const { entity } = props;
-    const knownArgsTranslations = useMemo(() => ({
-        ban: t('ban-command-args'),
-        giphy: t('giphy-command-args'),
-        mute: t('mute-command-args'),
-        unban: t('unban-command-args'),
-        unmute: t('unmute-command-args'),
-    }), [t]);
-    const knownDescriptionTranslations = useMemo(() => ({
-        ban: t('ban-command-description'),
-        giphy: t('giphy-command-description'),
-        mute: t('mute-command-description'),
-        unban: t('unban-command-description'),
-        unmute: t('unmute-command-description'),
-    }), [t]);
-    return (React.createElement("div", { className: 'str-chat__slash-command' },
-        React.createElement("span", { className: 'str-chat__slash-command-header' },
-            React.createElement("strong", null, entity.name),
-            ' ',
-            entity.args && (knownArgsTranslations[entity.name ?? ''] ?? t(entity.args))),
-        React.createElement("br", null),
-        React.createElement("span", { className: 'str-chat__slash-command-description' }, entity.description &&
-            (knownDescriptionTranslations[entity.name ?? ''] ?? t(entity.description)))));
-};

package/dist/components/TextareaComposer/SuggestionList/EmoticonItem.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-export type EmoticonItemProps = {
-    entity: {
-        /** Name for emoticon */
-        name: string;
-        /** Native value or actual emoticon */
-        native: string;
-        /** The parts of the Name property of the entity (or id if no name) that can be matched to the user input value.
-         * Default is bold for matches, but can be overwritten in css.
-         * */
-        tokenizedDisplayName: {
-            token: string;
-            parts: string[];
-        };
-    };
-};
-export declare const EmoticonItem: (props: EmoticonItemProps) => React.JSX.Element | null;

package/dist/components/TextareaComposer/SuggestionList/EmoticonItem.js

@@ -1,12 +0,0 @@
-import React from 'react';
-export const EmoticonItem = (props) => {
-    const { entity } = props;
-    const hasEntity = Object.keys(entity).length;
-    if (!hasEntity)
-        return null;
-    const { parts, token } = entity.tokenizedDisplayName ?? {};
-    const renderName = () => parts?.map((part, i) => part.toLowerCase() === token ? (React.createElement("span", { className: 'str-chat__emoji-item--highlight', key: `part-${i}` }, part)) : (React.createElement("span", { className: 'str-chat__emoji-item--part', key: `part-${i}` }, part))) ?? null;
-    return (React.createElement("div", { className: 'str-chat__emoji-item' },
-        React.createElement("span", { className: 'str-chat__emoji-item--entity' }, entity.native),
-        React.createElement("span", { className: 'str-chat__emoji-item--name' }, renderName())));
-};

package/dist/components/TextareaComposer/SuggestionList/SuggestionList.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import type { SuggestionListItemComponentProps } from './SuggestionListItem';
-type SuggestionTrigger = '/' | ':' | '@' | string;
-export type SuggestionListProps = Partial<{
-    suggestionItemComponents: Record<SuggestionTrigger, React.ComponentType<SuggestionListItemComponentProps>>;
-    className?: string;
-    closeOnClickOutside?: boolean;
-    containerClassName?: string;
-    focusedItemIndex: number;
-    setFocusedItemIndex: (index: number) => void;
-}>;
-export declare const defaultComponents: Record<SuggestionTrigger, React.ComponentType<SuggestionListItemComponentProps>>;
-export declare const SuggestionList: ({ className, closeOnClickOutside, containerClassName, focusedItemIndex, setFocusedItemIndex, suggestionItemComponents, }: SuggestionListProps) => React.JSX.Element | null;
-export {};

package/dist/components/TextareaComposer/SuggestionList/SuggestionList.js

@@ -1,50 +0,0 @@
-import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
-import { CommandItem } from './CommandItem';
-import { EmoticonItem } from './EmoticonItem';
-import { SuggestionListItem as DefaultSuggestionListItem } from './SuggestionListItem';
-import { UserItem } from './UserItem';
-import { useComponentContext } from '../../../context/ComponentContext';
-import { useStateStore } from '../../../store';
-import { InfiniteScrollPaginator } from '../../InfiniteScrollPaginator/InfiniteScrollPaginator';
-import { useMessageComposer } from '../../MessageInput';
-const textComposerStateSelector = (state) => ({
-    suggestions: state.suggestions,
-});
-const searchSourceStateSelector = (nextValue) => ({
-    items: nextValue.items ?? [],
-});
-export const defaultComponents = {
-    '/': (props) => (React.createElement(CommandItem, { entity: props.entity })),
-    ':': (props) => (React.createElement(EmoticonItem, { entity: props.entity })),
-    '@': (props) => (React.createElement(UserItem, { entity: props.entity })),
-};
-export const SuggestionList = ({ className, closeOnClickOutside = true, containerClassName, focusedItemIndex, setFocusedItemIndex, suggestionItemComponents = defaultComponents, }) => {
-    const { AutocompleteSuggestionItem = DefaultSuggestionListItem } = useComponentContext();
-    const messageComposer = useMessageComposer();
-    const { textComposer } = messageComposer;
-    const { suggestions } = useStateStore(textComposer.state, textComposerStateSelector);
-    const { items } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
-    const [container, setContainer] = useState(null);
-    const component = suggestions?.trigger
-        ? suggestionItemComponents[suggestions?.trigger]
-        : undefined;
-    useEffect(() => {
-        if (!closeOnClickOutside || !suggestions || !container)
-            return;
-        const handleClick = (event) => {
-            if (container.contains(event.target))
-                return;
-            textComposer.closeSuggestions();
-        };
-        document.addEventListener('click', handleClick);
-        return () => {
-            document.removeEventListener('click', handleClick);
-        };
-    }, [closeOnClickOutside, suggestions, container, textComposer]);
-    if (!suggestions || !items?.length || !component)
-        return null;
-    return (React.createElement("div", { className: clsx('str-chat__suggestion-list-container', containerClassName), ref: setContainer },
-        React.createElement(InfiniteScrollPaginator, { loadNextOnScrollToBottom: suggestions.searchSource.search, threshold: 100 },
-            React.createElement("ul", { className: clsx('str-chat__suggestion-list str-chat__suggestion-list--react', className) }, items.map((item, i) => (React.createElement(AutocompleteSuggestionItem, { component: component, focused: focusedItemIndex === i, item: item, key: item.id.toString(), onMouseEnter: () => setFocusedItemIndex?.(i) })))))));
-};

package/dist/components/TextareaComposer/SuggestionList/SuggestionListItem.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import type { TextComposerSuggestion } from 'stream-chat';
-import type { UserItemProps } from './UserItem';
-import type { CommandItemProps } from './CommandItem';
-import type { EmoticonItemProps } from './EmoticonItem';
-export type DefaultSuggestionListItemEntity = UserItemProps['entity'] | CommandItemProps['entity'] | EmoticonItemProps['entity'];
-export type SuggestionListItemComponentProps = {
-    entity: DefaultSuggestionListItemEntity | unknown;
-    focused: boolean;
-};
-export type SuggestionItemProps = {
-    component: React.ComponentType<SuggestionListItemComponentProps>;
-    item: TextComposerSuggestion;
-    focused: boolean;
-    className?: string;
-    onMouseEnter?: () => void;
-};
-export declare const SuggestionListItem: React.ForwardRefExoticComponent<SuggestionItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/TextareaComposer/SuggestionList/SuggestionListItem.js

@@ -1,27 +0,0 @@
-import clsx from 'clsx';
-import React, { useCallback, useLayoutEffect, useRef } from 'react';
-import { useMessageComposer } from '../../MessageInput';
-import { useMessageInputContext } from '../../../context';
-export const SuggestionListItem = React.forwardRef(function SuggestionListItem({ className, component: Component, focused, item, onMouseEnter }, innerRef) {
-    const { textComposer } = useMessageComposer();
-    const { textareaRef } = useMessageInputContext();
-    const containerRef = useRef(null);
-    const handleSelect = useCallback(() => {
-        textComposer.handleSelect(item);
-        textareaRef.current?.focus();
-    }, [item, textareaRef, textComposer]);
-    useLayoutEffect(() => {
-        if (!focused)
-            return;
-        containerRef.current?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
-    }, [focused, containerRef]);
-    return (React.createElement("li", { className: clsx('str-chat__suggestion-list-item', className, {
-            'str-chat__suggestion-item--selected': focused,
-        }), onMouseEnter: onMouseEnter, ref: containerRef },
-        React.createElement("button", { onClick: handleSelect, onKeyDown: (event) => {
-                if (event.key === 'Enter') {
-                    handleSelect();
-                }
-            }, ref: innerRef },
-            React.createElement(Component, { entity: item, focused: focused }))));
-});

package/dist/components/TextareaComposer/SuggestionList/UserItem.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import type { AvatarProps } from '../../Avatar';
-export type UserItemProps = {
-    /** The user */
-    entity: {
-        /** The parts of the Name property of the entity (or id if no name) that can be matched to the user input value.
-         * Default is bold for matches, but can be overwritten in css.
-         * */
-        tokenizedDisplayName: {
-            token: string;
-            parts: string[];
-        };
-        /** Id of the user */
-        id?: string;
-        /** Image of the user */
-        image?: string;
-        /** Name of the user */
-        name?: string;
-    };
-    /** Custom UI component to display user avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
-    Avatar?: React.ComponentType<AvatarProps>;
-};
-/**
- * UI component for mentions rendered in suggestion list
- */
-export declare const UserItem: ({ Avatar, entity }: UserItemProps) => React.JSX.Element | null;

package/dist/components/TextareaComposer/SuggestionList/UserItem.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { Avatar as DefaultAvatar } from '../../Avatar';
-/**
- * UI component for mentions rendered in suggestion list
- */
-export const UserItem = ({ Avatar = DefaultAvatar, entity }) => {
-    const hasEntity = !!Object.keys(entity).length;
-    if (!hasEntity)
-        return null;
-    const { parts, token } = entity.tokenizedDisplayName;
-    const renderName = () => parts.map((part, i) => {
-        const matches = part.toLowerCase() === token;
-        const partWithHTMLSpacesAround = part.replace(/^\s+|\s+$/g, '\u00A0');
-        return (React.createElement("span", { className: clsx({
-                'str-chat__emoji-item--highlight': matches,
-                'str-chat__emoji-item--part': !matches,
-            }), key: `part-${i}` }, partWithHTMLSpacesAround));
-    });
-    return (React.createElement("div", { className: 'str-chat__user-item' },
-        React.createElement(Avatar, { className: 'str-chat__avatar--autocomplete-item', image: entity.image, name: entity.name || entity.id }),
-        React.createElement("span", { className: 'str-chat__user-item--name', "data-testid": 'user-item-name' }, renderName()),
-        React.createElement("div", { className: 'str-chat__user-item-at' }, "@")));
-};

package/dist/components/TextareaComposer/SuggestionList/index.d.ts

@@ -1,5 +0,0 @@
-export * from './CommandItem';
-export * from './EmoticonItem';
-export * from './SuggestionList';
-export * from './SuggestionListItem';
-export * from './UserItem';

package/dist/components/TextareaComposer/SuggestionList/index.js

@@ -1,5 +0,0 @@
-export * from './CommandItem';
-export * from './EmoticonItem';
-export * from './SuggestionList';
-export * from './SuggestionListItem';
-export * from './UserItem';

package/dist/components/TextareaComposer/TextareaComposer.d.ts

@@ -1,11 +0,0 @@
-import type { TextareaHTMLAttributes } from 'react';
-import React from 'react';
-export type TextareaComposerProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style' | 'defaultValue' | 'disabled' | 'value'> & {
-    closeSuggestionsOnClickOutside?: boolean;
-    containerClassName?: string;
-    listClassName?: string;
-    maxRows?: number;
-    minRows?: number;
-    shouldSubmit?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean;
-};
-export declare const TextareaComposer: ({ className, closeSuggestionsOnClickOutside, containerClassName, listClassName, maxRows: maxRowsProp, minRows: minRowsProp, onBlur, onChange, onKeyDown, onScroll, onSelect, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restTextareaProps }: TextareaComposerProps) => React.JSX.Element;