stream-chat-react 13.14.1 → 14.0.0-beta.1

package/dist/components/ReactFileUtilities/utils.js

@@ -1,105 +0,0 @@
-import { useCallback } from 'react';
-export const useHandleFileChangeWrapper = (resetOnChange = false, handler) => useCallback(({ currentTarget }) => {
-    const { files } = currentTarget;
-    if (!files)
-        return;
-    try {
-        handler?.(Array.from(files));
-    }
-    catch (error) {
-        console.error(error);
-    }
-    if (resetOnChange)
-        currentTarget.value = '';
-}, [handler, resetOnChange]);
-export function dataTransferItemsHaveFiles(items) {
-    if (!items || !items.length) {
-        return false;
-    }
-    for (const item of items) {
-        if (item.kind === 'file' || item.type === 'text/html') {
-            return true;
-        }
-    }
-    return false;
-}
-export async function dataTransferItemsToFiles(items) {
-    if (!items || !items.length) {
-        return [];
-    }
-    // If there are files inside the DataTransferItem prefer those
-    const fileLikes = getFileLikes(items);
-    if (fileLikes.length) {
-        return fileLikes;
-    }
-    // Otherwise extract images from html
-    const blobPromises = [];
-    for (const item of items) {
-        if (item.type === 'text/html') {
-            blobPromises.push(new Promise((accept) => {
-                item.getAsString(async (s) => {
-                    const imagePromises = extractImageSources(s).map((src) => getImageSource(fileLikes, src));
-                    await Promise.all(imagePromises);
-                    accept();
-                });
-            }));
-        }
-    }
-    await Promise.all(blobPromises);
-    return fileLikes;
-}
-function getFileLikes(items) {
-    const fileLikes = [];
-    for (const item of items) {
-        if (item.kind === 'file') {
-            const file = item.getAsFile();
-            if (file) {
-                fileLikes.push(file);
-            }
-        }
-    }
-    return fileLikes;
-}
-async function getImageSource(fileLikes, src) {
-    let res;
-    try {
-        res = await fetch(src);
-    }
-    catch (e) {
-        return;
-    }
-    const contentType = res.headers.get('Content-type') || 'application/octet-stream';
-    const buf = await res.arrayBuffer();
-    const blob = new Blob([buf], { type: contentType });
-    fileLikes.push(blob);
-}
-const extractImageSources = (s) => {
-    const imageTags = new DOMParser()
-        .parseFromString(s, 'text/html')
-        .getElementsByTagName('img');
-    return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);
-};
-export const isBlobButNotFile = (obj) => obj instanceof Blob && !(obj instanceof File);
-export const createFileFromBlobs = ({ blobsArray, fileName, mimeType, }) => {
-    const concatenatedBlob = new Blob(blobsArray, { type: mimeType });
-    return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });
-};
-export const getExtensionFromMimeType = (mimeType) => {
-    const match = mimeType.match(/\/([^/;]+)/);
-    return match && match[1];
-};
-export const getRecordedMediaTypeFromMimeType = (mimeType) => {
-    const match = mimeType.match(/^(audio|video)\/.*$/);
-    return match && match[1];
-};
-export const readFileAsArrayBuffer = (file) => new Promise((resolve, reject) => {
-    const fileReader = new FileReader();
-    fileReader.onload = () => {
-        resolve(fileReader.result);
-    };
-    fileReader.onerror = () => {
-        reject(fileReader.error);
-    };
-    fileReader.readAsArrayBuffer(file);
-});
-export const generateFileName = (mimeType) => `file_${new Date().toISOString()}.${getExtensionFromMimeType(mimeType)}`;

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

@@ -1,34 +0,0 @@
-import React from 'react';
-import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
-import type { AvatarProps } from '../Avatar';
-import type { ReactionOptions } from './reactionOptions';
-export type ReactionSelectorProps = {
-    /** 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.ElementType<AvatarProps>;
-    /** If true, shows the user's avatar with the reaction */
-    detailedView?: boolean;
-    /** Function that adds/removes a reaction on a message (overrides the function stored in `MessageContext`) */
-    handleReaction?: (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>;
-    /** An array of the reaction objects to display in the list */
-    latest_reactions?: ReactionResponse[];
-    /** An array of the own reaction objects to distinguish own reactions visually */
-    own_reactions?: ReactionResponse[];
-    /**
-     * An object that keeps track of the count of each type of reaction on a message
-     * @deprecated This override value is no longer taken into account. Use `reaction_groups` to override reaction counts instead.
-     * */
-    reaction_counts?: Record<string, number>;
-    /** An object containing summary for each reaction type on a message */
-    reaction_groups?: Record<string, ReactionGroupResponse>;
-    /**
-     * @deprecated
-     * A list of the currently supported reactions on a message
-     * */
-    reactionOptions?: ReactionOptions;
-    /** If true, adds a CSS class that reverses the horizontal positioning of the selector */
-    reverse?: boolean;
-};
-/**
- * Component that allows a user to select a reaction.
- */
-export declare const ReactionSelector: (props: ReactionSelectorProps) => React.JSX.Element;

package/dist/components/Reactions/ReactionSelector.js

@@ -1,94 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
-import { Avatar as DefaultAvatar } from '../Avatar';
-import { useDialog } from '../Dialog';
-import { defaultReactionOptions } from './reactionOptions';
-import { isMutableRef } from './utils/utils';
-import { useComponentContext } from '../../context/ComponentContext';
-import { useMessageContext } from '../../context/MessageContext';
-const UnMemoizedReactionSelector = (props) => {
-    const { Avatar: propAvatar, detailedView = true, handleReaction: propHandleReaction, latest_reactions: propLatestReactions, own_reactions: propOwnReactions, reaction_groups: propReactionGroups, reactionOptions: propReactionOptions, reverse = false, } = props;
-    const { Avatar: contextAvatar, reactionOptions: contextReactionOptions = defaultReactionOptions, } = useComponentContext('ReactionSelector');
-    const { closeReactionSelectorOnClick, handleReaction: contextHandleReaction, message, } = useMessageContext('ReactionSelector');
-    const dialogId = `reaction-selector--${message.id}`;
-    const dialog = useDialog({ id: dialogId });
-    const reactionOptions = propReactionOptions ?? contextReactionOptions;
-    const Avatar = propAvatar || contextAvatar || DefaultAvatar;
-    const handleReaction = propHandleReaction || contextHandleReaction;
-    const latestReactions = propLatestReactions || message?.latest_reactions || [];
-    const ownReactions = propOwnReactions || message?.own_reactions || [];
-    const reactionGroups = propReactionGroups || message?.reaction_groups || {};
-    const [tooltipReactionType, setTooltipReactionType] = useState(null);
-    const [tooltipPositions, setTooltipPositions] = useState(null);
-    const rootRef = useRef(null);
-    const targetRef = useRef(null);
-    const tooltipRef = useRef(null);
-    const showTooltip = useCallback((event, reactionType) => {
-        targetRef.current = event.currentTarget;
-        setTooltipReactionType(reactionType);
-    }, []);
-    const hideTooltip = useCallback(() => {
-        setTooltipReactionType(null);
-        setTooltipPositions(null);
-    }, []);
-    useEffect(() => {
-        if (!tooltipReactionType || !rootRef.current)
-            return;
-        const tooltip = tooltipRef.current?.getBoundingClientRect();
-        const target = targetRef.current?.getBoundingClientRect();
-        const container = isMutableRef(rootRef)
-            ? rootRef.current?.getBoundingClientRect()
-            : null;
-        if (!tooltip || !target || !container)
-            return;
-        const tooltipPosition = tooltip.width === container.width || tooltip.x < container.x
-            ? 0
-            : target.left + target.width / 2 - container.left - tooltip.width / 2;
-        const arrowPosition = target.x - tooltip.x + target.width / 2 - tooltipPosition;
-        setTooltipPositions({
-            arrow: arrowPosition,
-            tooltip: tooltipPosition,
-        });
-    }, [tooltipReactionType, rootRef]);
-    const getUsersPerReactionType = (type) => latestReactions
-        .map((reaction) => {
-        if (reaction.type === type) {
-            return reaction.user?.name || reaction.user?.id;
-        }
-        return null;
-    })
-        .filter(Boolean);
-    const iHaveReactedWithReaction = (reactionType) => ownReactions.find((reaction) => reaction.type === reactionType);
-    const getLatestUserForReactionType = (type) => latestReactions.find((reaction) => reaction.type === type && !!reaction.user)?.user ||
-        undefined;
-    return (React.createElement("div", { className: clsx('str-chat__reaction-selector str-chat__message-reaction-selector str-chat-react__message-reaction-selector', {
-            'str-chat__reaction-selector--reverse': reverse,
-        }), "data-testid": 'reaction-selector', ref: rootRef },
-        !!tooltipReactionType && detailedView && (React.createElement("div", { className: 'str-chat__reaction-selector-tooltip', ref: tooltipRef, style: {
-                left: tooltipPositions?.tooltip,
-                visibility: tooltipPositions ? 'visible' : 'hidden',
-            } },
-            React.createElement("div", { className: 'arrow', style: { left: tooltipPositions?.arrow } }),
-            getUsersPerReactionType(tooltipReactionType)?.map((user, i, users) => (React.createElement("span", { className: 'latest-user-username', key: `key-${i}-${user}` }, `${user}${i < users.length - 1 ? ', ' : ''}`))))),
-        React.createElement("ul", { className: 'str-chat__message-reactions-list str-chat__message-reactions-options' }, reactionOptions.map(({ Component, name: reactionName, type: reactionType }) => {
-            const latestUser = getLatestUserForReactionType(reactionType);
-            const count = reactionGroups[reactionType]?.count ?? 0;
-            return (React.createElement("li", { key: reactionType },
-                React.createElement("button", { "aria-label": `Select Reaction: ${reactionName || reactionType}`, className: clsx('str-chat__message-reactions-list-item str-chat__message-reactions-option', {
-                        'str-chat__message-reactions-option-selected': iHaveReactedWithReaction(reactionType),
-                    }), "data-testid": 'select-reaction-button', "data-text": reactionType, onClick: (event) => {
-                        handleReaction(reactionType, event);
-                        if (closeReactionSelectorOnClick) {
-                            dialog.close();
-                        }
-                    } },
-                    !!count && detailedView && (React.createElement("div", { className: 'latest-user str-chat__message-reactions-last-user', onClick: hideTooltip, onMouseEnter: (e) => showTooltip(e, reactionType), onMouseLeave: hideTooltip }, latestUser ? (React.createElement(Avatar, { image: latestUser.image, name: latestUser.name, size: 20, user: latestUser })) : (React.createElement("div", { className: 'latest-user-not-found' })))),
-                    React.createElement("span", { className: 'str-chat__message-reaction-emoji' },
-                        React.createElement(Component, null)),
-                    Boolean(count) && detailedView && (React.createElement("span", { className: 'str-chat__message-reactions-list-item__count' }, count || '')))));
-        }))));
-};
-/**
- * Component that allows a user to select a reaction.
- */
-export const ReactionSelector = React.memo(UnMemoizedReactionSelector);

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import type { IconProps } from '../../types/types';
-type ReactionSelectorWithButtonProps = {
-    ReactionIcon: React.ComponentType<IconProps>;
-};
-/**
- * Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents
- * cluttering the parent component.
- */
-export declare const ReactionSelectorWithButton: ({ ReactionIcon, }: ReactionSelectorWithButtonProps) => React.JSX.Element;
-export {};

package/dist/components/Reactions/ReactionSelectorWithButton.js

@@ -1,23 +0,0 @@
-import React, { useRef } from 'react';
-import { ReactionSelector as DefaultReactionSelector } from './ReactionSelector';
-import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
-import { useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
-/**
- * Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents
- * cluttering the parent component.
- */
-export const ReactionSelectorWithButton = ({ ReactionIcon, }) => {
-    const { t } = useTranslationContext('ReactionSelectorWithButton');
-    const { isMyMessage, message, threadList } = useMessageContext('MessageOptions');
-    const { ReactionSelector = DefaultReactionSelector } = useComponentContext('MessageOptions');
-    const buttonRef = useRef(null);
-    const dialogIdNamespace = threadList ? '-thread-' : '';
-    const dialogId = `reaction-selector${dialogIdNamespace}--${message.id}`;
-    const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
-    const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(DialogAnchor, { dialogManagerId: dialogManager?.id, id: dialogId, placement: isMyMessage() ? 'top-end' : 'top-start', referenceElement: buttonRef.current, trapFocus: true },
-            React.createElement(ReactionSelector, null)),
-        React.createElement("button", { "aria-expanded": dialogIsOpen, "aria-label": t('aria/Open Reaction Selector'), className: 'str-chat__message-reactions-button', "data-testid": 'message-reaction-action', onClick: () => dialog?.toggle(), ref: buttonRef },
-            React.createElement(ReactionIcon, { className: 'str-chat__message-action-icon' }))));
-};

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import type { MessageContextValue } from '../../context';
-import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
-import type { ReactionOptions } from './reactionOptions';
-import type { ReactionDetailsComparator, ReactionsComparator } from './types';
-export type ReactionsListProps = Partial<Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
-    /** An array of the own reaction objects to distinguish own reactions visually */
-    own_reactions?: ReactionResponse[];
-    /**
-     * An object that keeps track of the count of each type of reaction on a message
-     * @deprecated This override value is no longer taken into account. Use `reaction_groups` to override reaction counts instead.
-     * */
-    reaction_counts?: Record<string, number>;
-    /** An object containing summary for each reaction type on a message */
-    reaction_groups?: Record<string, ReactionGroupResponse>;
-    /**
-     * @deprecated
-     * A list of the currently supported reactions on a message
-     * */
-    reactionOptions?: ReactionOptions;
-    /** An array of the reaction objects to display in the list */
-    reactions?: ReactionResponse[];
-    /** Display the reactions in the list in reverse order, defaults to false */
-    reverse?: boolean;
-    /** Comparator function to sort the list of reacted users
-     * @deprecated use `reactionDetailsSort` instead
-     */
-    sortReactionDetails?: ReactionDetailsComparator;
-    /** Comparator function to sort reactions, defaults to chronological order */
-    sortReactions?: ReactionsComparator;
-};
-/**
- * Component that displays a list of reactions on a message.
- */
-export declare const ReactionsList: (props: ReactionsListProps) => React.JSX.Element | null;

package/dist/components/Reactions/ReactionsList.js

@@ -1,44 +0,0 @@
-import React, { useState } from 'react';
-import clsx from 'clsx';
-import { ReactionsListModal as DefaultReactionsListModal } from './ReactionsListModal';
-import { useProcessReactions } from './hooks/useProcessReactions';
-import { useComponentContext, useTranslationContext } from '../../context';
-import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
-const UnMemoizedReactionsList = (props) => {
-    const { handleFetchReactions, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    reactionDetailsSort, reverse = false, sortReactionDetails, ...rest } = props;
-    const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
-    const [selectedReactionType, setSelectedReactionType] = useState(null);
-    const { t } = useTranslationContext('ReactionsList');
-    const { ReactionsListModal = DefaultReactionsListModal } = useComponentContext();
-    const handleReactionButtonClick = (reactionType) => {
-        if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
-            return;
-        }
-        setSelectedReactionType(reactionType);
-    };
-    if (!hasReactions)
-        return null;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { "aria-label": t('aria/Reaction list'), className: clsx('str-chat__reaction-list str-chat__message-reactions-container', {
-                // we are stuck with both classes as both are used in CSS
-                'str-chat__reaction-list--reverse': reverse,
-            }), "data-testid": 'reaction-list', role: 'figure' },
-            React.createElement("ul", { className: 'str-chat__message-reactions' },
-                existingReactions.map(({ EmojiComponent, isOwnReaction, reactionCount, reactionType }) => EmojiComponent && (React.createElement("li", { className: clsx('str-chat__message-reaction', {
-                        'str-chat__message-reaction-own': isOwnReaction,
-                    }), key: reactionType },
-                    React.createElement("button", { "aria-label": `Reactions: ${reactionType}`, "data-testid": `reactions-list-button-${reactionType}`, onClick: () => handleReactionButtonClick(reactionType), type: 'button' },
-                        React.createElement("span", { className: 'str-chat__message-reaction-emoji' },
-                            React.createElement(EmojiComponent, null)),
-                        "\u00A0",
-                        React.createElement("span", { className: 'str-chat__message-reaction-count', "data-testclass": 'reaction-list-reaction-count' }, reactionCount))))),
-                React.createElement("li", null,
-                    React.createElement("span", { className: 'str-chat__reaction-list--counter' }, totalReactionCount)))),
-        selectedReactionType !== null && (React.createElement(ReactionsListModal, { handleFetchReactions: handleFetchReactions, onClose: () => setSelectedReactionType(null), onSelectedReactionTypeChange: setSelectedReactionType, open: selectedReactionType !== null, reactions: existingReactions, selectedReactionType: selectedReactionType, sortReactionDetails: sortReactionDetails }))));
-};
-/**
- * Component that displays a list of reactions on a message.
- */
-export const ReactionsList = React.memo(UnMemoizedReactionsList);

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import type { ReactionDetailsComparator, ReactionSummary, ReactionType } from './types';
-import type { ReactionSort } from 'stream-chat';
-import type { ModalProps } from '../Modal';
-import type { MessageContextValue } from '../../context';
-export type ReactionsListModalProps = ModalProps & Partial<Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
-    reactions: ReactionSummary[];
-    selectedReactionType: ReactionType;
-    onSelectedReactionTypeChange?: (reactionType: ReactionType) => void;
-    sort?: ReactionSort;
-    /** @deprecated use `sort` instead */
-    sortReactionDetails?: ReactionDetailsComparator;
-};
-export declare function ReactionsListModal({ handleFetchReactions, onSelectedReactionTypeChange, reactionDetailsSort: propReactionDetailsSort, reactions, selectedReactionType, sortReactionDetails: propSortReactionDetails, ...modalProps }: ReactionsListModalProps): React.JSX.Element;

package/dist/components/Reactions/ReactionsListModal.js

@@ -1,39 +0,0 @@
-import React, { useMemo } from 'react';
-import clsx from 'clsx';
-import { Modal as DefaultModal } from '../Modal';
-import { useFetchReactions } from './hooks/useFetchReactions';
-import { LoadingIndicator } from '../Loading';
-import { Avatar } from '../Avatar';
-import { useComponentContext, useMessageContext } from '../../context';
-const defaultReactionDetailsSort = { created_at: -1 };
-export function ReactionsListModal({ handleFetchReactions, onSelectedReactionTypeChange, reactionDetailsSort: propReactionDetailsSort, reactions, selectedReactionType, sortReactionDetails: propSortReactionDetails, ...modalProps }) {
-    const { Modal = DefaultModal } = useComponentContext();
-    const selectedReaction = reactions.find(({ reactionType }) => reactionType === selectedReactionType);
-    const SelectedEmojiComponent = selectedReaction?.EmojiComponent ?? null;
-    const { reactionDetailsSort: contextReactionDetailsSort, sortReactionDetails: contextSortReactionDetails, } = useMessageContext('ReactionsListModal');
-    const legacySortReactionDetails = propSortReactionDetails ?? contextSortReactionDetails;
-    const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
-    const { isLoading: areReactionsLoading, reactions: reactionDetails } = useFetchReactions({
-        handleFetchReactions,
-        reactionType: selectedReactionType,
-        shouldFetch: modalProps.open,
-        sort: reactionDetailsSort,
-    });
-    const reactionDetailsWithLegacyFallback = useMemo(() => legacySortReactionDetails
-        ? [...reactionDetails].sort(legacySortReactionDetails)
-        : reactionDetails, [legacySortReactionDetails, reactionDetails]);
-    return (React.createElement(Modal, { ...modalProps, className: clsx('str-chat__message-reactions-details-modal', modalProps.className) },
-        React.createElement("div", { className: 'str-chat__message-reactions-details', "data-testid": 'reactions-list-modal' },
-            React.createElement("div", { className: 'str-chat__message-reactions-details-reaction-types' }, reactions.map(({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && (React.createElement("div", { className: clsx('str-chat__message-reactions-details-reaction-type', {
-                    'str-chat__message-reactions-details-reaction-type--selected': selectedReactionType === reactionType,
-                }), "data-testid": `reaction-details-selector-${reactionType}`, key: reactionType, onClick: () => onSelectedReactionTypeChange?.(reactionType) },
-                React.createElement("span", { className: 'str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback' },
-                    React.createElement(EmojiComponent, null)),
-                "\u00A0",
-                React.createElement("span", { className: 'str-chat__message-reaction-count' }, reactionCount))))),
-            SelectedEmojiComponent && (React.createElement("div", { className: 'str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback str-chat__message-reaction-emoji-big' },
-                React.createElement(SelectedEmojiComponent, null))),
-            React.createElement("div", { className: 'str-chat__message-reactions-details-reacting-users', "data-testid": 'all-reacting-users' }, areReactionsLoading ? (React.createElement(LoadingIndicator, null)) : (reactionDetailsWithLegacyFallback.map(({ user }) => (React.createElement("div", { className: 'str-chat__message-reactions-details-reacting-user', key: user?.id },
-                React.createElement(Avatar, { className: 'stream-chat__avatar--reaction', "data-testid": 'avatar', image: user?.image, name: user?.name || user?.id }),
-                React.createElement("span", { className: 'str-chat__user-item--name', "data-testid": 'reaction-user-username' }, user?.name || user?.id)))))))));
-}

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
-import type { MessageContextValue } from '../../context/MessageContext';
-import type { ReactionOptions } from './reactionOptions';
-export type SimpleReactionsListProps = Partial<Pick<MessageContextValue, 'handleFetchReactions' | 'handleReaction'>> & {
-    /** An array of the own reaction objects to distinguish own reactions visually */
-    own_reactions?: ReactionResponse[];
-    /**
-     * An object that keeps track of the count of each type of reaction on a message
-     * @deprecated This override value is no longer taken into account. Use `reaction_groups` to override reaction counts instead.
-     * */
-    reaction_counts?: Record<string, number>;
-    /** An object containing summary for each reaction type on a message */
-    reaction_groups?: Record<string, ReactionGroupResponse>;
-    /** A list of the currently supported reactions on a message */
-    reactionOptions?: ReactionOptions;
-    /** An array of the reaction objects to display in the list */
-    reactions?: ReactionResponse[];
-};
-export declare const SimpleReactionsList: (props: SimpleReactionsListProps) => React.JSX.Element | null;

package/dist/components/Reactions/SimpleReactionsList.js

@@ -1,36 +0,0 @@
-import React, { useState } from 'react';
-import clsx from 'clsx';
-import { useMessageContext } from '../../context/MessageContext';
-import { useProcessReactions } from './hooks/useProcessReactions';
-import { useEnterLeaveHandlers } from '../Tooltip/hooks';
-import { PopperTooltip } from '../Tooltip';
-const WithTooltip = ({ children, onMouseEnter, onMouseLeave, title, }) => {
-    const [referenceElement, setReferenceElement] = useState(null);
-    const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers({
-        onMouseEnter,
-        onMouseLeave,
-    });
-    return (React.createElement(React.Fragment, null,
-        React.createElement(PopperTooltip, { referenceElement: referenceElement, visible: tooltipVisible }, title),
-        React.createElement("span", { onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement }, children)));
-};
-const UnMemoizedSimpleReactionsList = (props) => {
-    const { handleReaction: propHandleReaction, ...rest } = props;
-    const { handleReaction: contextHandleReaction } = useMessageContext('SimpleReactionsList');
-    const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
-    const handleReaction = propHandleReaction || contextHandleReaction;
-    if (!hasReactions)
-        return null;
-    return (React.createElement("div", { className: 'str-chat__message-reactions-container' },
-        React.createElement("ul", { className: 'str-chat__simple-reactions-list str-chat__message-reactions', "data-testid": 'simple-reaction-list' },
-            existingReactions.map(({ EmojiComponent, isOwnReaction, latestReactedUserNames, reactionType }) => {
-                const tooltipContent = latestReactedUserNames.join(', ');
-                return (EmojiComponent && (React.createElement("li", { className: clsx('str-chat__simple-reactions-list-item', {
-                        'str-chat__message-reaction-own': isOwnReaction,
-                    }), key: reactionType, onClick: (event) => handleReaction(reactionType, event), onKeyUp: (event) => handleReaction(reactionType, event) },
-                    React.createElement(WithTooltip, { title: tooltipContent },
-                        React.createElement(EmojiComponent, null)))));
-            }),
-            React.createElement("li", { className: 'str-chat__simple-reactions-list-item--last-number' }, totalReactionCount))));
-};
-export const SimpleReactionsList = React.memo(UnMemoizedSimpleReactionsList);

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

@@ -1,12 +0,0 @@
-import React from 'react';
-export type SpriteImageProps = {
-    columns: number;
-    position: [number, number];
-    rows: number;
-    spriteUrl: string;
-    fallback?: React.ReactNode;
-    height?: number;
-    style?: React.CSSProperties;
-    width?: number;
-};
-export declare const SpriteImage: ({ columns, fallback, height, position, rows, spriteUrl, style, width, }: SpriteImageProps) => React.JSX.Element;

package/dist/components/Reactions/SpriteImage.js

@@ -1,30 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { getImageDimensions } from './utils/utils';
-export const SpriteImage = ({ columns, fallback, height, position, rows, spriteUrl, style, width, }) => {
-    const [[spriteWidth, spriteHeight], setSpriteDimensions] = useState([0, 0]);
-    useEffect(() => {
-        getImageDimensions(spriteUrl).then(setSpriteDimensions).catch(console.error);
-    }, [spriteUrl]);
-    const [x, y] = position;
-    if (!spriteHeight || !spriteWidth)
-        return React.createElement(React.Fragment, null, fallback);
-    return (React.createElement("div", { "data-testid": 'sprite-image', style: {
-            ...style,
-            '--str-chat__sprite-image-resize-ratio': 'var(--str-chat__sprite-image-resize-ratio-x, var(--str-chat__sprite-image-resize-ratio-y, 1))',
-            '--str-chat__sprite-image-resize-ratio-x': 'calc(var(--str-chat__sprite-image-width) / var(--str-chat__sprite-item-width))',
-            '--str-chat__sprite-image-resize-ratio-y': 'calc(var(--str-chat__sprite-image-height) / var(--str-chat__sprite-item-height))',
-            '--str-chat__sprite-item-height': `${spriteHeight / rows}`,
-            '--str-chat__sprite-item-width': `${spriteWidth / columns}`,
-            ...(Number.isFinite(height)
-                ? { '--str-chat__sprite-image-height': `${height}px` }
-                : {}),
-            ...(Number.isFinite(width)
-                ? { '--str-chat__sprite-image-width': `${width}px` }
-                : {}),
-            backgroundImage: `url('${spriteUrl}')`,
-            backgroundPosition: `${x * (100 / (columns - 1))}% ${y * (100 / (rows - 1))}%`,
-            backgroundSize: `${columns * 100}% ${rows * 100}%`,
-            height: 'var(--str-chat__sprite-image-height, calc(var(--str-chat__sprite-item-height) * var(--str-chat__sprite-image-resize-ratio)))',
-            width: 'var(--str-chat__sprite-image-width, calc(var(--str-chat__sprite-item-width) * var(--str-chat__sprite-image-resize-ratio)))',
-        } }));
-};

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import type { SpriteImageProps } from './SpriteImage';
-import type { Readable } from '../../types/types';
-declare const StreamSpriteEmojiPositions: {
-    angry: number[];
-    haha: number[];
-    like: number[];
-    love: number[];
-    sad: number[];
-    wow: number[];
-};
-type StreamEmojiType = keyof typeof StreamSpriteEmojiPositions;
-export declare const StreamEmoji: ({ fallback, type, }: Readable<{
-    type: StreamEmojiType;
-} & Pick<SpriteImageProps, 'fallback'>>) => React.JSX.Element;
-export {};

package/dist/components/Reactions/StreamEmoji.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { SpriteImage } from './SpriteImage';
-const StreamSpriteEmojiPositions = {
-    angry: [1, 1],
-    haha: [1, 0],
-    like: [0, 0],
-    love: [1, 2],
-    sad: [0, 1],
-    wow: [0, 2],
-};
-const STREAM_SPRITE_URL = 'https://getstream.imgix.net/images/emoji-sprite.png';
-export const StreamEmoji = ({ fallback, type, }) => {
-    const position = StreamSpriteEmojiPositions[type];
-    return (React.createElement(SpriteImage, { columns: 2, fallback: fallback, position: position, rows: 3, spriteUrl: STREAM_SPRITE_URL, style: {
-            '--str-chat__sprite-image-height': 'var(--str-chat__stream-emoji-size, 18px)',
-        } }));
-};

package/dist/components/Reactions/hooks/useFetchReactions.d.ts

@@ -1,13 +0,0 @@
-import type { ReactionResponse, ReactionSort } from 'stream-chat';
-import type { MessageContextValue } from '../../../context';
-import type { ReactionType } from '../types';
-export interface FetchReactionsOptions {
-    reactionType: ReactionType;
-    shouldFetch: boolean;
-    handleFetchReactions?: MessageContextValue['handleFetchReactions'];
-    sort?: ReactionSort;
-}
-export declare function useFetchReactions(options: FetchReactionsOptions): {
-    isLoading: boolean;
-    reactions: ReactionResponse[];
-};

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

@@ -1,38 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useMessageContext } from '../../../context';
-export function useFetchReactions(options) {
-    const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext('useFetchReactions');
-    const [reactions, setReactions] = useState([]);
-    const { handleFetchReactions: propHandleFetchReactions, reactionType, shouldFetch, sort, } = options;
-    const [isLoading, setIsLoading] = useState(shouldFetch);
-    const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;
-    useEffect(() => {
-        if (!shouldFetch) {
-            return;
-        }
-        let cancel = false;
-        (async () => {
-            try {
-                setIsLoading(true);
-                const reactions = await handleFetchReactions(reactionType, sort);
-                if (!cancel) {
-                    setReactions(reactions);
-                }
-            }
-            catch (e) {
-                if (!cancel) {
-                    setReactions([]);
-                }
-            }
-            finally {
-                if (!cancel) {
-                    setIsLoading(false);
-                }
-            }
-        })();
-        return () => {
-            cancel = true;
-        };
-    }, [handleFetchReactions, reactionType, shouldFetch, sort]);
-    return { isLoading, reactions };
-}

package/dist/components/Reactions/hooks/useProcessReactions.d.ts

@@ -1,13 +0,0 @@
-import type { ReactionsListProps } from '../ReactionsList';
-import type { ReactionsComparator, ReactionSummary } from '../types';
-type SharedReactionListProps = 'own_reactions' | 'reaction_counts' | 'reaction_groups' | 'reactionOptions' | 'reactions';
-type UseProcessReactionsParams = Pick<ReactionsListProps, SharedReactionListProps> & {
-    sortReactions?: ReactionsComparator;
-};
-export declare const defaultReactionsSort: ReactionsComparator;
-export declare const useProcessReactions: (params: UseProcessReactionsParams) => {
-    existingReactions: ReactionSummary[];
-    hasReactions: boolean;
-    totalReactionCount: number;
-};
-export {};