stream-chat-react 12.4.1 → 12.5.0

package/dist/components/Poll/PollCreationDialog/PollCreationDialog.js

@@ -0,0 +1,87 @@
+import clsx from 'clsx';
+import { nanoid } from 'nanoid';
+import React, { useState } from 'react';
+import { FieldError } from '../../Form/FieldError';
+import { OptionFieldSet } from './OptionFieldSet';
+import { PollCreationDialogControls } from './PollCreationDialogControls';
+import { VALID_MAX_VOTES_VALUE_REGEX } from '../constants';
+import { ModalHeader } from '../../Modal/ModalHeader';
+import { SimpleSwitchField } from '../../Form/SwitchField';
+import { useChatContext, useTranslationContext } from '../../../context';
+export const PollCreationDialog = ({ close }) => {
+    const { client } = useChatContext();
+    const { t } = useTranslationContext();
+    const [nameError, setNameError] = useState();
+    const [optionsErrors, setOptionsErrors] = useState({});
+    const [multipleAnswerCountError, setMultipleAnswerCountError] = useState();
+    const [state, setState] = useState(() => ({
+        allow_answers: false,
+        allow_user_suggested_options: false,
+        description: '',
+        enforce_unique_vote: true,
+        id: nanoid(),
+        max_votes_allowed: '',
+        name: '',
+        options: [{ id: nanoid(), text: '' }],
+        user_id: client.user?.id,
+        voting_visibility: 'public',
+    }));
+    return (React.createElement("div", { className: 'str-chat__dialog str-chat__poll-creation-dialog', "data-testid": 'poll-creation-dialog' },
+        React.createElement(ModalHeader, { close: close, title: t('Create poll') }),
+        React.createElement("div", { className: 'str-chat__dialog__body' },
+            React.createElement("form", { autoComplete: 'off' },
+                React.createElement("div", { className: clsx('str-chat__form__field str-chat__form__input-field str-chat__form__input-field--with-label', {
+                        'str-chat__form__input-field--has-error': nameError,
+                    }) },
+                    React.createElement("label", { className: 'str-chat__form__field-label', htmlFor: 'name' }, t('Question')),
+                    React.createElement("div", { className: clsx('str-chat__form__input-field__value') },
+                        React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-name-input-field-error', text: nameError }),
+                        React.createElement("input", { id: 'name', onBlur: (e) => {
+                                if (!e.target.value) {
+                                    setNameError('The field is required');
+                                }
+                            }, onChange: (e) => {
+                                setState((prev) => ({ ...prev, name: e.target.value }));
+                                if (nameError && e.target.value) {
+                                    setNameError(undefined);
+                                }
+                            }, placeholder: t('Ask a question'), type: 'text', value: state.name }))),
+                React.createElement(OptionFieldSet, { errors: optionsErrors, options: state.options, setErrors: setOptionsErrors, setState: setState }),
+                React.createElement("div", { className: clsx('str-chat__form__expandable-field', {
+                        'str-chat__form__expandable-field--expanded': !state.enforce_unique_vote,
+                    }) },
+                    React.createElement(SimpleSwitchField, { checked: !state.enforce_unique_vote, id: 'enforce_unique_vote', labelText: t('Multiple answers'), onChange: (e) => {
+                            setState((prev) => ({
+                                ...prev,
+                                enforce_unique_vote: !e.target.checked,
+                                max_votes_allowed: '',
+                            }));
+                            setMultipleAnswerCountError(undefined);
+                        } }),
+                    !state.enforce_unique_vote && (React.createElement("div", { className: clsx('str-chat__form__input-field', {
+                            'str-chat__form__input-field--has-error': multipleAnswerCountError,
+                        }) },
+                        React.createElement("div", { className: clsx('str-chat__form__input-field__value') },
+                            React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-max-votes-allowed-input-field-error', text: multipleAnswerCountError }),
+                            React.createElement("input", { id: 'max_votes_allowed', onChange: (e) => {
+                                    const isValidValue = !e.target.value || e.target.value.match(VALID_MAX_VOTES_VALUE_REGEX);
+                                    if (!isValidValue) {
+                                        setMultipleAnswerCountError(t('Type a number from 2 to 10'));
+                                    }
+                                    else if (multipleAnswerCountError) {
+                                        setMultipleAnswerCountError(undefined);
+                                    }
+                                    setState((prev) => ({ ...prev, max_votes_allowed: e.target.value }));
+                                }, placeholder: t('Maximum number of votes (from 2 to 10)'), type: 'number', value: state.max_votes_allowed }))))),
+                React.createElement(SimpleSwitchField, { checked: state.voting_visibility === 'anonymous', id: 'voting_visibility', labelText: t('Anonymous poll'), onChange: (e) => setState((prev) => ({
+                        ...prev,
+                        voting_visibility: (e.target.checked ? 'anonymous' : 'public'),
+                    })) }),
+                React.createElement(SimpleSwitchField, { checked: state.allow_user_suggested_options, id: 'allow_user_suggested_options', labelText: t('Allow option suggestion'), onChange: (e) => setState((prev) => ({ ...prev, allow_user_suggested_options: e.target.checked })) }),
+                React.createElement(SimpleSwitchField, { checked: state.allow_answers, id: 'allow_answers', labelText: t('Allow comments'), onChange: (e) => setState((prev) => ({ ...prev, allow_answers: e.target.checked })) }))),
+        React.createElement(PollCreationDialogControls, { close: close, errors: [
+                ...(nameError ?? []),
+                ...(multipleAnswerCountError ?? []),
+                ...Object.keys(optionsErrors),
+            ], state: state })));
+};

package/dist/components/Poll/PollCreationDialog/PollCreationDialogControls.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { PollFormState } from './types';
+export type PollCreationDialogControlsProps = {
+    close: () => void;
+    errors: string[];
+    state: PollFormState;
+};
+export declare const PollCreationDialogControls: ({ close, errors, state, }: PollCreationDialogControlsProps) => React.JSX.Element;

package/dist/components/Poll/PollCreationDialog/PollCreationDialogControls.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { VALID_MAX_VOTES_VALUE_REGEX } from '../constants';
+import { useChatContext, useMessageInputContext, useTranslationContext } from '../../../context';
+export const PollCreationDialogControls = ({ close, errors, state, }) => {
+    const { client } = useChatContext();
+    const { t } = useTranslationContext('PollCreationDialogControls');
+    const { handleSubmit: handleSubmitMessage } = useMessageInputContext('PollCreationDialogControls');
+    const canSubmit = () => {
+        const hasAtLeastOneOption = state.options.filter((o) => !!o.text).length > 0;
+        const hasName = !!state.name;
+        const maxVotesAllowedNumber = parseInt(state.max_votes_allowed?.match(VALID_MAX_VOTES_VALUE_REGEX)?.[0] || '');
+        const validMaxVotesAllowed = state.max_votes_allowed === '' ||
+            (!!maxVotesAllowedNumber && (2 <= maxVotesAllowedNumber || maxVotesAllowedNumber <= 10));
+        const noErrors = errors.length === 0;
+        return hasAtLeastOneOption && hasName && validMaxVotesAllowed && noErrors;
+    };
+    return (React.createElement("div", { className: 'str-chat__dialog__controls' },
+        React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel', onClick: close }, t('Cancel')),
+        React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--submit', disabled: !canSubmit(), onClick: async (e) => {
+                let pollId;
+                try {
+                    const { poll } = await client.createPoll({
+                        ...state,
+                        max_votes_allowed: state.max_votes_allowed
+                            ? parseInt(state.max_votes_allowed)
+                            : undefined,
+                        options: state.options?.filter((o) => o.text).map((o) => ({ text: o.text })),
+                    });
+                    pollId = poll.id;
+                }
+                catch (e) {
+                    // todo: add notification
+                    return;
+                }
+                try {
+                    await handleSubmitMessage(e, { poll_id: pollId });
+                }
+                catch (e) {
+                    // todo: add notification
+                    return;
+                }
+                close();
+            }, type: 'submit' }, t('Create'))));
+};

package/dist/components/Poll/PollCreationDialog/index.d.ts

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

package/dist/components/Poll/PollCreationDialog/index.js

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

package/dist/components/Poll/PollCreationDialog/types.d.ts

@@ -0,0 +1,21 @@
+import type { VotingVisibility } from 'stream-chat';
+type Id = string;
+export type PollOptionFormData = {
+    id: Id;
+    text: string;
+};
+export type PollFormState = {
+    id: Id;
+    max_votes_allowed: string;
+    name: string;
+    options: PollOptionFormData[];
+    allow_answers?: boolean;
+    allow_user_suggested_options?: boolean;
+    description?: string;
+    enforce_unique_vote?: boolean;
+    is_closed?: boolean;
+    user_id?: string;
+    voting_visibility?: VotingVisibility;
+};
+export type OptionErrors = Record<Id, string>;
+export {};

package/dist/components/Poll/PollCreationDialog/types.js

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

package/dist/components/Poll/PollHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DefaultStreamChatGenerics } from '../../types';
+export declare const PollHeader: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element | undefined;

package/dist/components/Poll/PollHeader.js

@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+import { usePollContext, useTranslationContext } from '../../context';
+import { useStateStore } from '../../store';
+const pollStateSelector = (nextValue) => ({
+    enforce_unique_vote: nextValue.enforce_unique_vote,
+    is_closed: nextValue.is_closed,
+    max_votes_allowed: nextValue.max_votes_allowed,
+    name: nextValue.name,
+    options: nextValue.options,
+});
+export const PollHeader = () => {
+    const { t } = useTranslationContext('PollHeader');
+    const { poll } = usePollContext();
+    const { enforce_unique_vote, is_closed, max_votes_allowed, name, options } = useStateStore(poll.state, pollStateSelector);
+    const selectionInstructions = useMemo(() => {
+        if (is_closed)
+            return t('Vote ended');
+        if (enforce_unique_vote)
+            return t('Select one');
+        if (max_votes_allowed)
+            return t('Select up to {{count}}', {
+                count: max_votes_allowed > options.length ? options.length : max_votes_allowed,
+            });
+        return t('Select one or more');
+    }, [is_closed, enforce_unique_vote, max_votes_allowed, options.length, t]);
+    if (!name)
+        return;
+    return (React.createElement("div", { className: 'str-chat__poll-header' },
+        React.createElement("div", { className: 'str-chat__poll-title' }, name),
+        React.createElement("div", { className: 'str-chat__poll-subtitle' }, selectionInstructions)));
+};

package/dist/components/Poll/PollOptionList.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { DefaultStreamChatGenerics } from '../../types';
+export type PollOptionListProps = {
+    optionsDisplayCount?: number;
+};
+export declare const PollOptionList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ optionsDisplayCount, }: PollOptionListProps) => React.JSX.Element;

package/dist/components/Poll/PollOptionList.js

@@ -0,0 +1,14 @@
+import clsx from 'clsx';
+import React from 'react';
+import { PollOptionSelector as DefaultPollOptionSelector } from './PollOptionSelector';
+import { useStateStore } from '../../store';
+import { useComponentContext, usePollContext } from '../../context';
+const pollStateSelector = (nextValue) => ({ options: nextValue.options });
+export const PollOptionList = ({ optionsDisplayCount, }) => {
+    const { PollOptionSelector = DefaultPollOptionSelector, } = useComponentContext();
+    const { poll } = usePollContext();
+    const { options } = useStateStore(poll.state, pollStateSelector);
+    return (React.createElement("div", { className: clsx('str-chat__poll-option-list', {
+            'str-chat__poll-option-list--full': typeof optionsDisplayCount === 'undefined',
+        }) }, options.slice(0, optionsDisplayCount ?? options.length).map((option) => (React.createElement(PollOptionSelector, { displayAvatarCount: 3, key: `poll-option-${option.id}`, option: option })))));
+};

package/dist/components/Poll/PollOptionSelector.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { PollOption } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../types';
+type AmountBarProps = {
+    amount: number;
+    className?: string;
+};
+export declare const AmountBar: ({ amount, className }: AmountBarProps) => React.JSX.Element;
+export type CheckmarkProps = {
+    checked?: boolean;
+};
+export declare const Checkmark: ({ checked }: CheckmarkProps) => React.JSX.Element;
+export type PollOptionSelectorProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    option: PollOption<StreamChatGenerics>;
+    displayAvatarCount?: number;
+    voteCountVerbose?: boolean;
+};
+export declare const PollOptionSelector: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ displayAvatarCount, option, voteCountVerbose, }: PollOptionSelectorProps<StreamChatGenerics>) => React.JSX.Element;
+export {};

package/dist/components/Poll/PollOptionSelector.js

@@ -0,0 +1,53 @@
+import clsx from 'clsx';
+import debounce from 'lodash.debounce';
+import React, { useMemo } from 'react';
+import { isVoteAnswer } from 'stream-chat';
+import { Avatar } from '../Avatar';
+import { useChannelStateContext, useMessageContext, usePollContext, useTranslationContext, } from '../../context';
+import { useStateStore } from '../../store';
+export const AmountBar = ({ amount, className }) => (React.createElement("div", { className: clsx('str-chat__amount-bar', className), "data-testid": 'amount-bar', role: 'progressbar', style: {
+        '--str-chat__amount-bar-fulfillment': amount + '%',
+    } }));
+export const Checkmark = ({ checked }) => (React.createElement("div", { className: clsx('str-chat__checkmark', { 'str-chat__checkmark--checked': checked }) }));
+const pollStateSelector = (nextValue) => ({
+    is_closed: nextValue.is_closed,
+    latest_votes_by_option: nextValue.latest_votes_by_option,
+    maxVotedOptionIds: nextValue.maxVotedOptionIds,
+    ownVotesByOptionId: nextValue.ownVotesByOptionId,
+    vote_counts_by_option: nextValue.vote_counts_by_option,
+    voting_visibility: nextValue.voting_visibility,
+});
+export const PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbose, }) => {
+    const { t } = useTranslationContext();
+    const { channelCapabilities = {} } = useChannelStateContext('PollOptionsShortlist');
+    const { message } = useMessageContext();
+    const { poll } = usePollContext();
+    const { is_closed, latest_votes_by_option, maxVotedOptionIds, ownVotesByOptionId, vote_counts_by_option, voting_visibility, } = useStateStore(poll.state, pollStateSelector);
+    const canCastVote = channelCapabilities['cast-poll-vote'] && !is_closed;
+    const winningOptionCount = maxVotedOptionIds[0] ? vote_counts_by_option[maxVotedOptionIds[0]] : 0;
+    const toggleVote = useMemo(() => debounce(() => {
+        if (!canCastVote)
+            return;
+        const haveVotedForTheOption = !!ownVotesByOptionId[option.id];
+        return haveVotedForTheOption
+            ? poll.removeVote(ownVotesByOptionId[option.id].id, message.id)
+            : poll.castVote(option.id, message.id);
+    }, 100), [canCastVote, message.id, option.id, ownVotesByOptionId, poll]);
+    return (React.createElement("div", { className: clsx('str-chat__poll-option', {
+            'str-chat__poll-option--votable': canCastVote,
+        }), key: `base-poll-option-${option.id}`, onClick: toggleVote },
+        canCastVote && React.createElement(Checkmark, { checked: !!ownVotesByOptionId[option.id] }),
+        React.createElement("div", { className: 'str-chat__poll-option-data' },
+            React.createElement("p", { className: 'str-chat__poll-option-text' }, option.text),
+            displayAvatarCount && voting_visibility === 'public' && (React.createElement("div", { className: 'str-chat__poll-option-voters' }, latest_votes_by_option?.[option.id] &&
+                latest_votes_by_option[option.id]
+                    .filter((vote) => !!vote.user && !isVoteAnswer(vote))
+                    .slice(0, displayAvatarCount)
+                    .map(({ user }) => (React.createElement(Avatar, { image: user?.image, key: `poll-option-${option.id}-avatar-${user?.id}`, name: user?.name }))))),
+            React.createElement("div", { className: 'str-chat__poll-option-vote-count' }, voteCountVerbose
+                ? t('{{count}} votes', { count: vote_counts_by_option[option.id] ?? 0 })
+                : vote_counts_by_option[option.id] ?? 0)),
+        React.createElement(AmountBar, { amount: (winningOptionCount && (vote_counts_by_option[option.id] ?? 0) / winningOptionCount) * 100, className: clsx('str-chat__poll-option__votes-bar', {
+                'str-chat__poll-option__votes-bar--winner': is_closed && maxVotedOptionIds.length === 1 && maxVotedOptionIds[0] === option.id,
+            }) })));
+};

package/dist/components/Poll/PollVote.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { PollVote as PollVoteType } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../types';
+type PollVoteProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    vote: PollVoteType<StreamChatGenerics>;
+};
+export declare const PollVote: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ vote, }: PollVoteProps<StreamChatGenerics>) => React.JSX.Element;
+export type PollVoteListingProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    votes: PollVoteType<StreamChatGenerics>[];
+};
+export declare const PollVoteListing: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ votes, }: PollVoteListingProps<StreamChatGenerics>) => React.JSX.Element;
+export {};

package/dist/components/Poll/PollVote.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Avatar } from '../Avatar';
+import { PopperTooltip } from '../Tooltip';
+import { useEnterLeaveHandlers } from '../Tooltip/hooks';
+import { useChatContext, useTranslationContext } from '../../context';
+const PollVoteTimestamp = ({ timestamp }) => {
+    const { t } = useTranslationContext();
+    const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
+    const [referenceElement, setReferenceElement] = useState(null);
+    const timestampDate = new Date(timestamp);
+    return (React.createElement("div", { className: 'str-chat__poll-vote__timestamp', onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
+        t('timestamp/PollVote', { timestamp: timestampDate }),
+        React.createElement(PopperTooltip, { offset: [0, 5], placement: 'bottom', referenceElement: referenceElement, visible: tooltipVisible }, t('timestamp/PollVoteTooltip', { timestamp: timestampDate }))));
+};
+const PollVoteAuthor = ({ vote, }) => {
+    const { t } = useTranslationContext();
+    const { client } = useChatContext();
+    const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
+    const [referenceElement, setReferenceElement] = useState(null);
+    const displayName = client.user?.id && client.user.id === vote.user?.id
+        ? t('You')
+        : vote.user?.name || t('Anonymous');
+    return (React.createElement("div", { className: 'str-chat__poll-vote__author', onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
+        vote.user && (React.createElement(Avatar, { className: 'str-chat__avatar--poll-vote-author', image: vote.user.image, key: `poll-vote-${vote.id}-avatar-${vote.user.id}`, name: vote.user.name })),
+        React.createElement("div", { className: 'str-chat__poll-vote__author__name' }, displayName),
+        React.createElement(PopperTooltip, { offset: [0, 5], placement: 'bottom', referenceElement: referenceElement, visible: tooltipVisible }, displayName)));
+};
+export const PollVote = ({ vote, }) => (React.createElement("div", { className: 'str-chat__poll-vote' },
+    React.createElement(PollVoteAuthor, { vote: vote }),
+    React.createElement(PollVoteTimestamp, { timestamp: vote.created_at })));
+export const PollVoteListing = ({ votes, }) => (React.createElement("div", { className: 'str-chat__poll-vote-listing' }, votes.map((vote) => (React.createElement(PollVote, { key: `poll-vote-${vote.id}`, vote: vote })))));

package/dist/components/Poll/QuotedPoll.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DefaultStreamChatGenerics } from '../../types';
+export declare const QuotedPoll: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element;

package/dist/components/Poll/QuotedPoll.js

@@ -0,0 +1,17 @@
+import clsx from 'clsx';
+import React from 'react';
+import { usePollContext } from '../../context';
+import { useStateStore } from '../../store';
+const pollStateSelectorQuotedPoll = (nextValue) => ({
+    is_closed: nextValue.is_closed,
+    name: nextValue.name,
+});
+export const QuotedPoll = () => {
+    const { poll } = usePollContext();
+    const { is_closed, name } = useStateStore(poll.state, pollStateSelectorQuotedPoll);
+    return (React.createElement("div", { className: clsx('str-chat__quoted-poll-preview', {
+            'str-chat__quoted-poll-preview--closed': is_closed,
+        }) },
+        React.createElement("div", { className: 'str-chat__quoted-poll-preview__icon' }, "\uD83D\uDCCA"),
+        React.createElement("div", { className: 'str-chat__quoted-poll-preview__name' }, name)));
+};

package/dist/components/Poll/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const MAX_POLL_OPTIONS: 100;
+export declare const VALID_MAX_VOTES_VALUE_REGEX: RegExp;
+export declare const MAX_OPTIONS_DISPLAYED: 10;

package/dist/components/Poll/constants.js

@@ -0,0 +1,3 @@
+export const MAX_POLL_OPTIONS = 100;
+export const VALID_MAX_VOTES_VALUE_REGEX = /^([2-9]|10)$/;
+export const MAX_OPTIONS_DISPLAYED = 10;

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

@@ -0,0 +1,2 @@
+export * from './usePollAnswerPagination';
+export * from './usePollOptionVotesPagination';

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

@@ -0,0 +1,2 @@
+export * from './usePollAnswerPagination';
+export * from './usePollOptionVotesPagination';

package/dist/components/Poll/hooks/useManagePollVotesRealtime.d.ts

@@ -0,0 +1,4 @@
+import type { PollAnswer, PollVote } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../../types';
+import { CursorPaginatorStateStore } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
+export declare function useManagePollVotesRealtime<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, T extends PollVote<StreamChatGenerics> | PollAnswer<StreamChatGenerics> = PollVote<StreamChatGenerics>>(managedVoteType: 'answer' | 'vote', cursorPaginatorState?: CursorPaginatorStateStore<T>, optionId?: string): T[];

package/dist/components/Poll/hooks/useManagePollVotesRealtime.js

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import { isVoteAnswer } from 'stream-chat';
+import { useChatContext } from '../../../context';
+export function useManagePollVotesRealtime(managedVoteType, cursorPaginatorState, optionId) {
+    const { client } = useChatContext();
+    const [votesInRealtime, setVotesInRealtime] = useState(cursorPaginatorState?.getLatestValue().items ?? []);
+    useEffect(() => cursorPaginatorState?.subscribeWithSelector((state) => [state.latestPageItems], ([latestPageItems]) => setVotesInRealtime((prev) => [...prev, ...latestPageItems])), [cursorPaginatorState]);
+    useEffect(() => {
+        const handleVoteEvent = (event) => {
+            if (!event.poll_vote)
+                return;
+            const isAnswer = isVoteAnswer(event.poll_vote);
+            if ((managedVoteType === 'answer' && !isAnswer) ||
+                (managedVoteType === 'vote' && (isAnswer || event.poll_vote.option_id !== optionId)))
+                return;
+            if (event.type === 'poll.vote_removed') {
+                setVotesInRealtime((prev) => event.poll_vote ? prev.filter((vote) => vote.id !== event.poll_vote.id) : prev);
+            }
+            if (event.type === 'poll.vote_changed') {
+                setVotesInRealtime((prev) => event.poll_vote ? prev.filter((vote) => vote.id !== event.poll_vote.id) : prev);
+            }
+            if (['poll.vote_casted', 'poll.vote_changed'].includes(event.type)) {
+                setVotesInRealtime((prev) => (event.poll_vote ? [event.poll_vote, ...prev] : prev));
+            }
+        };
+        const voteCastedSubscription = client.on('poll.vote_casted', handleVoteEvent);
+        const voteRemovedSubscription = client.on('poll.vote_removed', handleVoteEvent);
+        const voteChangedSubscription = client.on('poll.vote_changed', handleVoteEvent);
+        return () => {
+            voteCastedSubscription.unsubscribe();
+            voteRemovedSubscription.unsubscribe();
+            voteChangedSubscription.unsubscribe();
+        };
+    }, [client, optionId, managedVoteType]);
+    return votesInRealtime;
+}

package/dist/components/Poll/hooks/usePollAnswerPagination.d.ts

@@ -0,0 +1,13 @@
+import type { PollAnswer, PollAnswersQueryParams } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../../types';
+type UsePollAnswerPaginationParams = {
+    paginationParams?: PollAnswersQueryParams;
+};
+export declare const usePollAnswerPagination: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ paginationParams }?: UsePollAnswerPaginationParams) => {
+    answers: PollAnswer<StreamChatGenerics>[];
+    error: Error | undefined;
+    hasNextPage: boolean;
+    loading: boolean;
+    loadMore: () => Promise<void>;
+};
+export {};

package/dist/components/Poll/hooks/usePollAnswerPagination.js

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import { useManagePollVotesRealtime } from './useManagePollVotesRealtime';
+import { useCursorPaginator, } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
+import { usePollContext } from '../../../context';
+import { useStateStore } from '../../../store';
+const paginationStateSelector = (state) => [state.error, state.hasNextPage, state.loading];
+export const usePollAnswerPagination = ({ paginationParams } = {}) => {
+    const { poll } = usePollContext();
+    const paginationFn = useCallback(async (next) => {
+        const { next: newNext, votes } = await poll.queryAnswers({
+            filter: paginationParams?.filter,
+            options: !next ? paginationParams?.options : { ...paginationParams?.options, next },
+            sort: { created_at: -1, ...paginationParams?.sort },
+        });
+        return { items: votes, next: newNext };
+    }, [paginationParams, poll]);
+    const { cursorPaginatorState, loadMore } = useCursorPaginator(paginationFn, true);
+    const answers = useManagePollVotesRealtime('answer', cursorPaginatorState);
+    const [error, hasNextPage, loading] = useStateStore(cursorPaginatorState, paginationStateSelector);
+    return {
+        answers,
+        error,
+        hasNextPage,
+        loading,
+        loadMore,
+    };
+};

package/dist/components/Poll/hooks/usePollOptionVotesPagination.d.ts

@@ -0,0 +1,13 @@
+import type { DefaultStreamChatGenerics } from '../../../types';
+import type { PollOptionVotesQueryParams, PollVote } from 'stream-chat';
+type UsePollOptionVotesPaginationParams = {
+    paginationParams: PollOptionVotesQueryParams;
+};
+export declare const usePollOptionVotesPagination: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ paginationParams, }: UsePollOptionVotesPaginationParams) => {
+    error: Error | undefined;
+    hasNextPage: boolean;
+    loading: boolean;
+    loadMore: () => Promise<void>;
+    votes: PollVote<StreamChatGenerics>[];
+};
+export {};

package/dist/components/Poll/hooks/usePollOptionVotesPagination.js

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import { useManagePollVotesRealtime } from './useManagePollVotesRealtime';
+import { useCursorPaginator, } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
+import { useStateStore } from '../../../store';
+import { usePollContext } from '../../../context';
+const paginationStateSelector = (state) => [state.error, state.hasNextPage, state.loading];
+export const usePollOptionVotesPagination = ({ paginationParams, }) => {
+    const { poll } = usePollContext();
+    const paginationFn = useCallback(async (next) => {
+        const { next: newNext, votes } = await poll.queryOptionVotes({
+            filter: paginationParams.filter,
+            options: !next ? paginationParams?.options : { ...paginationParams?.options, next },
+            sort: { created_at: -1, ...paginationParams?.sort },
+        });
+        return { items: votes, next: newNext };
+    }, [paginationParams, poll]);
+    const { cursorPaginatorState, loadMore } = useCursorPaginator(paginationFn, true);
+    const votes = useManagePollVotesRealtime('vote', cursorPaginatorState, paginationParams.filter.option_id);
+    const [error, hasNextPage, loading] = useStateStore(cursorPaginatorState, paginationStateSelector);
+    return {
+        error,
+        hasNextPage,
+        loading,
+        loadMore,
+        votes,
+    };
+};

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

@@ -0,0 +1,10 @@
+export * from './Poll';
+export * from './PollActions';
+export * from './PollContent';
+export * from './PollCreationDialog';
+export * from './PollHeader';
+export * from './PollOptionList';
+export * from './PollOptionSelector';
+export * from './PollVote';
+export * from './QuotedPoll';
+export * from './hooks';

package/dist/components/Poll/index.js

@@ -0,0 +1,10 @@
+export * from './Poll';
+export * from './PollActions';
+export * from './PollContent';
+export * from './PollCreationDialog';
+export * from './PollHeader';
+export * from './PollOptionList';
+export * from './PollOptionSelector';
+export * from './PollVote';
+export * from './QuotedPoll';
+export * from './hooks';

package/dist/components/Portal/Portal.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren, ReactPortal } from 'react';
+export type PortalProps = {
+    getPortalDestination: () => Element | null;
+    isOpen?: boolean;
+};
+export declare const Portal: ({ children, getPortalDestination, isOpen, }: PropsWithChildren<PortalProps>) => ReactPortal | null;

package/dist/components/Portal/Portal.js

@@ -0,0 +1,14 @@
+import { useLayoutEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+export const Portal = ({ children, getPortalDestination, isOpen, }) => {
+    const [portalDestination, setPortalDestination] = useState(null);
+    useLayoutEffect(() => {
+        const destination = getPortalDestination();
+        if (!destination || !isOpen)
+            return;
+        setPortalDestination(destination);
+    }, [getPortalDestination, isOpen]);
+    if (!portalDestination)
+        return null;
+    return createPortal(children, portalDestination);
+};

package/dist/components/ReactFileUtilities/UploadButton.d.ts

@@ -1,6 +1,16 @@
 import React, { ComponentProps } from 'react';
+import { PartialSelected } from '../../types/types';
+/**
+ * @deprecated Use FileInputProps instead.
+ */
 export type UploadButtonProps = {
     onFileChange: (files: Array<File>) => void;
     resetOnChange?: boolean;
 } & Omit<ComponentProps<'input'>, 'type' | 'onChange'>;
-export declare const UploadButton: ({ onFileChange, resetOnChange, ...rest }: UploadButtonProps) => React.JSX.Element;
+/**
+ * @deprecated Use FileInput instead
+ */
+export declare const UploadButton: React.ForwardRefExoticComponent<Omit<UploadButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export type FileInputProps = UploadButtonProps;
+export declare const FileInput: React.ForwardRefExoticComponent<Omit<UploadButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const UploadFileInput: React.ForwardRefExoticComponent<Omit<PartialSelected<UploadButtonProps, "onFileChange">, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/ReactFileUtilities/UploadButton.js

@@ -1,6 +1,24 @@
-import React from 'react';
+import clsx from 'clsx';
+import { nanoid } from 'nanoid';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import { useHandleFileChangeWrapper } from './utils';
-export const UploadButton = ({ onFileChange, resetOnChange = true, ...rest }) => {
+import { useChannelStateContext, useMessageInputContext, useTranslationContext, } from '../../context';
+/**
+ * @deprecated Use FileInput instead
+ */
+export const UploadButton = forwardRef(function UploadButton({ onFileChange, resetOnChange = true, ...rest }, ref) {
     const handleInputChange = useHandleFileChangeWrapper(resetOnChange, onFileChange);
-    return React.createElement("input", { onChange: handleInputChange, type: 'file', ...rest });
-};
+    return React.createElement("input", { onChange: handleInputChange, ref: ref, type: 'file', ...rest });
+});
+export const FileInput = UploadButton;
+export const UploadFileInput = forwardRef(function UploadFileInput({ className, onFileChange: onFileChangeCustom, ...props }, ref) {
+    const { t } = useTranslationContext('UploadFileInput');
+    const { acceptedFiles = [], multipleUploads } = useChannelStateContext('UploadFileInput');
+    const { isUploadEnabled, maxFilesLeft, uploadNewFiles, } = useMessageInputContext('UploadFileInput');
+    const id = useMemo(() => nanoid(), []);
+    const onFileChange = useCallback((files) => {
+        uploadNewFiles(files);
+        onFileChangeCustom?.(files);
+    }, [onFileChangeCustom, uploadNewFiles]);
+    return (React.createElement(FileInput, { accept: acceptedFiles?.join(','), "aria-label": t('aria/File upload'), "data-testid": 'file-input', disabled: !isUploadEnabled || maxFilesLeft === 0, id: id, multiple: multipleUploads, ...props, className: clsx('str-chat__file-input', className), onFileChange: onFileChange, ref: ref }));
+});