stream-chat-react 12.4.1 → 12.5.0

package/dist/components/Poll/Poll.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PollContent as DefaultPollContent } from './PollContent';
+import { QuotedPoll as DefaultQuotedPoll } from './QuotedPoll';
+import { PollProvider, useComponentContext } from '../../context';
+export const Poll = ({ isQuoted, poll, }) => {
+    const { PollContent = DefaultPollContent, QuotedPoll = DefaultQuotedPoll, } = useComponentContext();
+    return poll ? (React.createElement(PollProvider, { poll: poll }, isQuoted ? React.createElement(QuotedPoll, null) : React.createElement(PollContent, null))) : null;
+};

package/dist/components/Poll/PollActions/AddCommentForm.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { DefaultStreamChatGenerics } from '../../../types';
+export type AddCommentFormProps = {
+    close: () => void;
+    messageId: string;
+};
+export declare const AddCommentForm: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, messageId, }: AddCommentFormProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/AddCommentForm.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FormDialog } from '../../Dialog/FormDialog';
+import { useStateStore } from '../../../store';
+import { usePollContext, useTranslationContext } from '../../../context';
+const pollStateSelector = (nextValue) => ({ ownAnswer: nextValue.ownAnswer });
+export const AddCommentForm = ({ close, messageId, }) => {
+    const { t } = useTranslationContext('AddCommentForm');
+    const { poll } = usePollContext();
+    const { ownAnswer } = useStateStore(poll.state, pollStateSelector);
+    return (React.createElement(FormDialog, { className: 'str-chat__prompt-dialog str-chat__modal__poll-add-comment', close: close, fields: {
+            comment: {
+                element: 'input',
+                props: {
+                    id: 'comment',
+                    name: 'comment',
+                    required: true,
+                    type: 'text',
+                    value: ownAnswer?.answer_text ?? '',
+                },
+            },
+        }, onSubmit: async (value) => {
+            await poll.addAnswer(value.comment, messageId);
+        }, shouldDisableSubmitButton: (value) => !value.comment || value.comment === ownAnswer?.answer_text, title: ownAnswer ? t('Update your comment') : t('Add a comment') }));
+};

package/dist/components/Poll/PollActions/EndPollDialog.d.ts

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

package/dist/components/Poll/PollActions/EndPollDialog.js

@@ -0,0 +1,19 @@
+import { PromptDialog } from '../../Dialog/PromptDialog';
+import React from 'react';
+import { usePollContext, useTranslationContext } from '../../../context';
+export const EndPollDialog = ({ close, }) => {
+    const { t } = useTranslationContext('SuggestPollOptionForm');
+    const { poll } = usePollContext();
+    return (React.createElement(PromptDialog, { actions: [
+            {
+                children: t('Cancel'),
+                className: 'str-chat__dialog__controls-button--cancel',
+                onClick: close,
+            },
+            {
+                children: t('End'),
+                className: '.str-chat__dialog__controls-button--submit str-chat__dialog__controls-button--end-poll',
+                onClick: poll.close,
+            },
+        ], className: 'str-chat__modal__end-vote', prompt: t('Nobody will be able to vote in this poll anymore.'), title: t('End vote') }));
+};

package/dist/components/Poll/PollActions/PollAction.d.ts

@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from 'react';
+export type PollActionProps = {
+    buttonText: string;
+    closeModal: () => void;
+    modalIsOpen: boolean;
+    openModal: () => void;
+    modalClassName?: string;
+};
+export declare const PollAction: ({ buttonText, children, closeModal, modalClassName, modalIsOpen, openModal, }: PropsWithChildren<PollActionProps>) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollAction.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Modal } from '../../Modal';
+export const PollAction = ({ buttonText, children, closeModal, modalClassName, modalIsOpen, openModal, }) => (React.createElement(React.Fragment, null,
+    React.createElement("button", { className: 'str-chat__poll-action', onClick: openModal }, buttonText),
+    React.createElement(Modal, { className: modalClassName, onClose: closeModal, open: modalIsOpen }, children)));

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { AddCommentFormProps } from './AddCommentForm';
+import { SuggestPollOptionFormProps } from './SuggestPollOptionForm';
+import { EndPollDialogProps } from './EndPollDialog';
+import { PollAnswerListProps } from './PollAnswerList';
+import { FullPollOptionsListingProps } from './PollOptionsFullList';
+import { PollResultsProps } from './PollResults';
+import type { DefaultStreamChatGenerics } from '../../../types';
+export type PollActionsProps = {
+    AddCommentForm?: React.ComponentType<AddCommentFormProps>;
+    EndPollDialog?: React.ComponentType<EndPollDialogProps>;
+    PollAnswerList?: React.ComponentType<PollAnswerListProps>;
+    PollOptionsFullList?: React.ComponentType<FullPollOptionsListingProps>;
+    PollResults?: React.ComponentType<PollResultsProps>;
+    SuggestPollOptionForm?: React.ComponentType<SuggestPollOptionFormProps>;
+};
+export declare const PollActions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ AddCommentForm, EndPollDialog, PollAnswerList, PollOptionsFullList, PollResults, SuggestPollOptionForm, }: PollActionsProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollActions.js

@@ -0,0 +1,46 @@
+import React, { useCallback, useState } from 'react';
+import { PollAction } from './PollAction';
+import { AddCommentForm as DefaultAddCommentForm } from './AddCommentForm';
+import { SuggestPollOptionForm as DefaultSuggestPollOptionForm, } from './SuggestPollOptionForm';
+import { EndPollDialog as DefaultEndPollDialog } from './EndPollDialog';
+import { PollAnswerList as DefaultPollAnswerList } from './PollAnswerList';
+import { PollOptionsFullList as DefaultPollOptionsFullList, } from './PollOptionsFullList';
+import { PollResults as DefaultPollResults } from './PollResults';
+import { MAX_OPTIONS_DISPLAYED, MAX_POLL_OPTIONS } from '../constants';
+import { useChannelStateContext, useChatContext, useMessageContext, usePollContext, useTranslationContext, } from '../../../context';
+import { useStateStore } from '../../../store';
+const pollStateSelector = (nextValue) => ({
+    allow_answers: nextValue.allow_answers,
+    allow_user_suggested_options: nextValue.allow_user_suggested_options,
+    answers_count: nextValue.answers_count,
+    created_by_id: nextValue.created_by_id,
+    is_closed: nextValue.is_closed,
+    options: nextValue.options,
+    ownAnswer: nextValue.ownAnswer,
+});
+export const PollActions = ({ AddCommentForm = DefaultAddCommentForm, EndPollDialog = DefaultEndPollDialog, PollAnswerList = DefaultPollAnswerList, PollOptionsFullList = DefaultPollOptionsFullList, PollResults = DefaultPollResults, SuggestPollOptionForm = DefaultSuggestPollOptionForm, }) => {
+    const { client } = useChatContext();
+    const { t } = useTranslationContext('PollActions');
+    const { channelCapabilities = {} } = useChannelStateContext('PollActions');
+    const { message } = useMessageContext('PollActions');
+    const { poll } = usePollContext();
+    const { allow_answers, allow_user_suggested_options, answers_count, created_by_id, is_closed, options, ownAnswer, } = useStateStore(poll.state, pollStateSelector);
+    const [modalOpen, setModalOpen] = useState();
+    const closeModal = useCallback(() => setModalOpen(undefined), []);
+    const onUpdateAnswerClick = useCallback(() => setModalOpen('add-comment'), []);
+    return (React.createElement("div", { className: 'str-chat__poll-actions' },
+        options.length > MAX_OPTIONS_DISPLAYED && (React.createElement(PollAction, { buttonText: t('See all options ({{count}})', {
+                count: options.length,
+            }), closeModal: closeModal, modalIsOpen: modalOpen === 'view-all-options', openModal: () => setModalOpen('view-all-options') },
+            React.createElement(PollOptionsFullList, { close: closeModal }))),
+        !is_closed && allow_user_suggested_options && options.length < MAX_POLL_OPTIONS && (React.createElement(PollAction, { buttonText: t('Suggest an option'), closeModal: closeModal, modalClassName: 'str-chat__suggest-poll-option-modal', modalIsOpen: modalOpen === 'suggest-option', openModal: () => setModalOpen('suggest-option') },
+            React.createElement(SuggestPollOptionForm, { close: closeModal, messageId: message.id }))),
+        !is_closed && allow_answers && (React.createElement(PollAction, { buttonText: ownAnswer ? t('Update your comment') : t('Add a comment'), closeModal: closeModal, modalClassName: 'str-chat__add-poll-answer-modal', modalIsOpen: modalOpen === 'add-comment', openModal: () => setModalOpen('add-comment') },
+            React.createElement(AddCommentForm, { close: closeModal, messageId: message.id }))),
+        answers_count > 0 && channelCapabilities['query-poll-votes'] && (React.createElement(PollAction, { buttonText: t('View {{count}} comments', { count: answers_count }), closeModal: closeModal, modalClassName: 'str-chat__poll-answer-list-modal', modalIsOpen: modalOpen === 'view-comments', openModal: () => setModalOpen('view-comments') },
+            React.createElement(PollAnswerList, { close: closeModal, onUpdateOwnAnswerClick: onUpdateAnswerClick }))),
+        React.createElement(PollAction, { buttonText: t('View results'), closeModal: closeModal, modalClassName: 'str-chat__poll-results-modal', modalIsOpen: modalOpen === 'view-results', openModal: () => setModalOpen('view-results') },
+            React.createElement(PollResults, { close: closeModal })),
+        !is_closed && created_by_id === client.user?.id && (React.createElement(PollAction, { buttonText: t('End vote'), closeModal: closeModal, modalClassName: 'str-chat__end-poll-modal', modalIsOpen: modalOpen === 'end-vote', openModal: () => setModalOpen('end-vote') },
+            React.createElement(EndPollDialog, { close: closeModal })))));
+};

package/dist/components/Poll/PollActions/PollAnswerList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { DefaultStreamChatGenerics } from '../../../types';
+export type PollAnswerListProps = {
+    onUpdateOwnAnswerClick: () => void;
+    close?: () => void;
+};
+export declare const PollAnswerList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, onUpdateOwnAnswerClick, }: PollAnswerListProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollAnswerList.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ModalHeader } from '../../Modal/ModalHeader';
+import { PollVote } from '../PollVote';
+import { usePollAnswerPagination } from '../hooks';
+import { InfiniteScrollPaginator } from '../../InfiniteScrollPaginator/InfiniteScrollPaginator';
+import { LoadingIndicator } from '../../Loading';
+import { useStateStore } from '../../../store';
+import { usePollContext, useTranslationContext } from '../../../context';
+const pollStateSelector = (nextValue) => ({
+    is_closed: nextValue.is_closed,
+    ownAnswer: nextValue.ownAnswer,
+});
+export const PollAnswerList = ({ close, onUpdateOwnAnswerClick, }) => {
+    const { t } = useTranslationContext();
+    const { poll } = usePollContext();
+    const { is_closed, ownAnswer } = useStateStore(poll.state, pollStateSelector);
+    const { answers, error, hasNextPage, loading, loadMore, } = usePollAnswerPagination();
+    return (React.createElement("div", { className: 'str-chat__modal__poll-answer-list' },
+        React.createElement(ModalHeader, { close: close, title: t('Poll comments') }),
+        React.createElement("div", { className: 'str-chat__modal__poll-answer-list__body' },
+            React.createElement(InfiniteScrollPaginator, { loadNextOnScrollToBottom: loadMore, threshold: 40 },
+                React.createElement("div", { className: 'str-chat__poll-answer-list' }, answers.map((answer) => (React.createElement("div", { className: 'str-chat__poll-answer', key: `comment-${answer.id}` },
+                    answer.answer_text && (React.createElement("p", { className: 'str-chat__poll-answer__text' }, answer.answer_text)),
+                    React.createElement(PollVote, { key: `poll-vote-${answer.id}`, vote: answer }))))),
+                hasNextPage && (React.createElement("div", { className: 'str-chat__loading-indicator-placeholder' }, loading && React.createElement(LoadingIndicator, null)))),
+            error?.message && React.createElement("div", null, error?.message)),
+        answers.length > 0 && !is_closed && (React.createElement("button", { className: 'str-chat__poll-action', onClick: onUpdateOwnAnswerClick }, ownAnswer ? t('Update your comment') : t('Add a comment')))));
+};

package/dist/components/Poll/PollActions/PollOptionsFullList.d.ts

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

package/dist/components/Poll/PollActions/PollOptionsFullList.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ModalHeader } from '../../Modal/ModalHeader';
+import { PollOptionList } from '../PollOptionList';
+import { useStateStore } from '../../../store';
+import { usePollContext, useTranslationContext } from '../../../context';
+const pollStateSelector = (nextValue) => ({ name: nextValue.name });
+export const PollOptionsFullList = ({ close, }) => {
+    const { t } = useTranslationContext();
+    const { poll } = usePollContext();
+    const { name } = useStateStore(poll.state, pollStateSelector);
+    return (React.createElement("div", { className: 'str-chat__modal__poll-option-list' },
+        React.createElement(ModalHeader, { close: close, title: t('Poll options') }),
+        React.createElement("div", { className: 'str-chat__modal__poll-option-list__body' },
+            React.createElement("div", { className: 'str-chat__modal__poll-option-list__title' }, name),
+            React.createElement(PollOptionList, null))));
+};

package/dist/components/Poll/PollActions/PollResults/PollOptionVotesList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { PollOption } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../../../types';
+export type PollOptionVotesListingProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    option: PollOption<StreamChatGenerics>;
+};
+export declare const PollOptionVotesList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ option, }: PollOptionVotesListingProps<StreamChatGenerics>) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollResults/PollOptionVotesList.js

@@ -0,0 +1,18 @@
+import React, { useMemo } from 'react';
+import { PollVoteListing } from '../../PollVote';
+import { usePollOptionVotesPagination } from '../../hooks';
+import { LoadingIndicator } from '../../../Loading';
+import { InfiniteScrollPaginator } from '../../../InfiniteScrollPaginator/InfiniteScrollPaginator';
+import { PollOptionWithVotesHeader } from './PollOptionWithVotesHeader';
+export const PollOptionVotesList = ({ option, }) => {
+    const paginationParams = useMemo(() => ({ filter: { option_id: option.id } }), [option.id]);
+    const { error, hasNextPage, loading, loadMore, votes, } = usePollOptionVotesPagination({
+        paginationParams,
+    });
+    return (React.createElement("div", { className: 'str-chat__poll-option str-chat__poll-option--full-vote-list' },
+        React.createElement(PollOptionWithVotesHeader, { option: option }),
+        React.createElement(InfiniteScrollPaginator, { loadNextOnScrollToBottom: loadMore, threshold: 40 },
+            React.createElement(PollVoteListing, { votes: votes }),
+            hasNextPage && (React.createElement("div", { className: 'str-chat__loading-indicator-placeholder' }, loading && React.createElement(LoadingIndicator, null)))),
+        error && error.message));
+};

package/dist/components/Poll/PollActions/PollResults/PollOptionWithLatestVotes.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PollOption } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../../../types';
+export type PollOptionWithVotesProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    option: PollOption<StreamChatGenerics>;
+    countVotesPreview?: number;
+    showAllVotes?: () => void;
+};
+export declare const PollOptionWithLatestVotes: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ countVotesPreview, option, showAllVotes, }: PollOptionWithVotesProps<StreamChatGenerics>) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollResults/PollOptionWithLatestVotes.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PollOptionWithVotesHeader } from './PollOptionWithVotesHeader';
+import { PollVoteListing } from '../../PollVote';
+import { useStateStore } from '../../../../store';
+import { useChannelStateContext, usePollContext, useTranslationContext } from '../../../../context';
+const pollStateSelector = (nextValue) => ({ latest_votes_by_option: nextValue.latest_votes_by_option });
+export const PollOptionWithLatestVotes = ({ countVotesPreview = 5, option, showAllVotes, }) => {
+    const { t } = useTranslationContext();
+    const { channelCapabilities = {} } = useChannelStateContext('PollOptionWithLatestVotes');
+    const { poll } = usePollContext();
+    const { latest_votes_by_option } = useStateStore(poll.state, pollStateSelector);
+    const votes = latest_votes_by_option && latest_votes_by_option[option.id];
+    return (React.createElement("div", { className: 'str-chat__poll-option' },
+        React.createElement(PollOptionWithVotesHeader, { option: option }),
+        votes && React.createElement(PollVoteListing, { votes: votes.slice(0, countVotesPreview) }),
+        channelCapabilities['query-poll-votes'] &&
+            showAllVotes &&
+            votes?.length > countVotesPreview && (React.createElement("button", { className: 'str-chat__poll-option__show-all-votes-button', onClick: showAllVotes }, t('Show all')))));
+};

package/dist/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { PollOption } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../../../types';
+export type PollResultOptionVoteCounterProps = {
+    optionId: string;
+};
+export declare const PollResultOptionVoteCounter: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ optionId, }: PollResultOptionVoteCounterProps) => React.JSX.Element;
+export type PollOptionWithVotesHeaderProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    option: PollOption<StreamChatGenerics>;
+};
+export declare const PollOptionWithVotesHeader: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ option, }: PollOptionWithVotesHeaderProps<StreamChatGenerics>) => React.JSX.Element;

package/dist/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useStateStore } from '../../../../store';
+import { usePollContext, useTranslationContext } from '../../../../context';
+const pollStateSelector = (nextValue) => ({
+    maxVotedOptionIds: nextValue.maxVotedOptionIds,
+    vote_counts_by_option: nextValue.vote_counts_by_option,
+});
+export const PollResultOptionVoteCounter = ({ optionId, }) => {
+    const { t } = useTranslationContext();
+    const { poll } = usePollContext();
+    const { maxVotedOptionIds, vote_counts_by_option } = useStateStore(poll.state, pollStateSelector);
+    return (React.createElement("div", { className: 'str-chat__poll-result-option-vote-counter' },
+        maxVotedOptionIds.length === 1 && maxVotedOptionIds[0] === optionId && (React.createElement("div", { className: 'str-chat__poll-result-winning-option-icon' })),
+        React.createElement("span", { className: 'str-chat__poll-result-option-vote-count' }, t('{{count}} votes', { count: vote_counts_by_option[optionId] ?? 0 }))));
+};
+export const PollOptionWithVotesHeader = ({ option, }) => (React.createElement("div", { className: 'str-chat__poll-option__header' },
+    React.createElement("div", { className: 'str-chat__poll-option__option-text' }, option.text),
+    React.createElement(PollResultOptionVoteCounter, { optionId: option.id })));

package/dist/components/Poll/PollActions/PollResults/PollResults.d.ts

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

package/dist/components/Poll/PollActions/PollResults/PollResults.js

@@ -0,0 +1,33 @@
+import clsx from 'clsx';
+import React, { useCallback, useState } from 'react';
+import { PollOptionVotesList } from './PollOptionVotesList';
+import { PollOptionWithLatestVotes } from './PollOptionWithLatestVotes';
+import { ModalHeader } from '../../../Modal/ModalHeader';
+import { useStateStore } from '../../../../store';
+import { usePollContext, useTranslationContext } from '../../../../context';
+const pollStateSelector = (nextValue) => ({
+    name: nextValue.name,
+    options: nextValue.options,
+    vote_counts_by_option: nextValue.vote_counts_by_option,
+});
+export const PollResults = ({ close, }) => {
+    const { t } = useTranslationContext();
+    const { poll } = usePollContext();
+    const { name, options, vote_counts_by_option } = useStateStore(poll.state, pollStateSelector);
+    const [optionToView, setOptionToView] = useState();
+    const goBack = useCallback(() => setOptionToView(undefined), []);
+    return (React.createElement("div", { className: clsx('str-chat__modal__poll-results', {
+            'str-chat__modal__poll-results--option-detail': optionToView,
+        }) }, optionToView ? (React.createElement(React.Fragment, null,
+        React.createElement(ModalHeader, { close: close, goBack: goBack, title: optionToView.text }),
+        React.createElement("div", { className: 'str-chat__modal__poll-results__body' },
+            React.createElement(PollOptionVotesList, { key: `poll-option-detail-${optionToView.id}`, option: optionToView })))) : (React.createElement(React.Fragment, null,
+        React.createElement(ModalHeader, { close: close, title: t('Poll results') }),
+        React.createElement("div", { className: 'str-chat__modal__poll-results__body' },
+            React.createElement("div", { className: 'str-chat__modal__poll-results__title' }, name),
+            React.createElement("div", { className: 'str-chat__modal__poll-results__option-list' }, options
+                .sort((next, current) => (vote_counts_by_option[current.id] ?? 0) >= (vote_counts_by_option[next.id] ?? 0)
+                ? 1
+                : -1)
+                .map((option) => (React.createElement(PollOptionWithLatestVotes, { key: `poll-option-${option.id}`, option: option, showAllVotes: () => setOptionToView(option) })))))))));
+};

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

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

package/dist/components/Poll/PollActions/PollResults/index.js

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

package/dist/components/Poll/PollActions/SuggestPollOptionForm.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { DefaultStreamChatGenerics } from '../../../types';
+export type SuggestPollOptionFormProps = {
+    close: () => void;
+    messageId: string;
+};
+export declare const SuggestPollOptionForm: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, messageId, }: SuggestPollOptionFormProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/SuggestPollOptionForm.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { FormDialog } from '../../Dialog/FormDialog';
+import { useChatContext, usePollContext, useTranslationContext } from '../../../context';
+import { useStateStore } from '../../../store';
+const pollStateSelector = (nextValue) => ({ options: nextValue.options });
+export const SuggestPollOptionForm = ({ close, messageId, }) => {
+    const { client } = useChatContext('SuggestPollOptionForm');
+    const { t } = useTranslationContext('SuggestPollOptionForm');
+    const { poll } = usePollContext();
+    const { options } = useStateStore(poll.state, pollStateSelector);
+    return (React.createElement(FormDialog, { className: 'str-chat__prompt-dialog str-chat__modal__suggest-poll-option', close: close, fields: {
+            optionText: {
+                element: 'input',
+                props: {
+                    id: 'optionText',
+                    name: 'optionText',
+                    required: true,
+                    type: 'text',
+                    value: '',
+                },
+                validator: (value) => {
+                    if (!value)
+                        return;
+                    const existingOption = options.find((option) => option.text === value.trim());
+                    if (existingOption) {
+                        return new Error(t('Option already exists'));
+                    }
+                    return;
+                },
+            },
+        }, onSubmit: async (value) => {
+            const { poll_option } = await client.createPollOption(poll.id, {
+                text: value.optionText,
+            });
+            poll.castVote(poll_option.id, messageId);
+        }, shouldDisableSubmitButton: (value) => !value.optionText, title: t('Suggest an option') }));
+};

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

@@ -0,0 +1,7 @@
+export * from './AddCommentForm';
+export * from './EndPollDialog';
+export * from './PollActions';
+export * from './PollAnswerList';
+export * from './PollOptionsFullList';
+export * from './PollResults';
+export * from './SuggestPollOptionForm';

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

@@ -0,0 +1,7 @@
+export * from './AddCommentForm';
+export * from './EndPollDialog';
+export * from './PollActions';
+export * from './PollAnswerList';
+export * from './PollOptionsFullList';
+export * from './PollResults';
+export * from './SuggestPollOptionForm';

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

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

package/dist/components/Poll/PollContent.js

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+import React from 'react';
+import { PollHeader as DefaultPollHeader } from './PollHeader';
+import { PollActions as DefaultPollActions } from './PollActions';
+import { PollOptionList } from './PollOptionList';
+import { MAX_OPTIONS_DISPLAYED } from './constants';
+import { useComponentContext, usePollContext } from '../../context';
+import { useStateStore } from '../../store';
+const pollStateSelectorPollContent = (nextValue) => ({ is_closed: nextValue.is_closed });
+export const PollContent = () => {
+    const { PollHeader = DefaultPollHeader, PollActions = DefaultPollActions, } = useComponentContext();
+    const { poll } = usePollContext();
+    const { is_closed } = useStateStore(poll.state, pollStateSelectorPollContent);
+    return (React.createElement("div", { className: clsx('str-chat__poll', { 'str-chat__poll--closed': is_closed }) },
+        React.createElement(PollHeader, null),
+        React.createElement(PollOptionList, { optionsDisplayCount: MAX_OPTIONS_DISPLAYED }),
+        React.createElement(PollActions, null)));
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { OptionErrors, PollFormState } from './types';
+export type OptionFieldSetProps = {
+    errors: OptionErrors;
+    options: PollFormState['options'];
+    setErrors: (fn: (prev: OptionErrors) => OptionErrors) => void;
+    setState: (fn: (prev: PollFormState) => PollFormState) => void;
+};
+export declare const OptionFieldSet: ({ errors, options, setErrors, setState }: OptionFieldSetProps) => React.JSX.Element;

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

@@ -0,0 +1,70 @@
+import clsx from 'clsx';
+import { MAX_POLL_OPTIONS } from '../constants';
+import { nanoid } from 'nanoid';
+import React, { useCallback } from 'react';
+import { FieldError } from '../../Form/FieldError';
+import { DragAndDropContainer } from '../../DragAndDrop/DragAndDropContainer';
+import { useTranslationContext } from '../../../context';
+const VALIDATION_ERRORS = { 'Option already exists': true };
+export const OptionFieldSet = ({ errors, options, setErrors, setState }) => {
+    const { t } = useTranslationContext('OptionFieldSet');
+    const findOptionDuplicate = (sourceOption) => {
+        const isDuplicateFilter = (option) => !!sourceOption.text.trim() && // do not include empty options into consideration
+            option.id !== sourceOption.id &&
+            option.text.trim() === sourceOption.text.trim();
+        return options.find(isDuplicateFilter);
+    };
+    const onSetNewOrder = useCallback((newOrder) => {
+        setState((prev) => ({ ...prev, options: newOrder.map((index) => prev.options[index]) }));
+    }, [setState]);
+    const draggable = options.length > 1;
+    return (React.createElement("fieldset", { className: 'str-chat__form__field str-chat__form__input-fieldset' },
+        React.createElement("legend", { className: 'str-chat__form__field-label' }, t('Options')),
+        React.createElement(DragAndDropContainer, { className: 'str-chat__form__input-fieldset__values', draggable: draggable, onSetNewOrder: onSetNewOrder }, options.map((option, i) => (React.createElement("div", { className: clsx('str-chat__form__input-field', {
+                'str-chat__form__input-field--draggable': draggable,
+                'str-chat__form__input-field--has-error': errors[option.id],
+            }), key: `new-poll-option-${i}` },
+            React.createElement("div", { className: 'str-chat__form__input-field__value' },
+                React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-option-input-field-error', text: errors[option.id] }),
+                React.createElement("input", { id: option.id, onBlur: (e) => {
+                        if (findOptionDuplicate({ id: e.target.id, text: e.target.value })) {
+                            setErrors((prev) => ({
+                                ...prev,
+                                [e.target.id]: t('Option already exists'),
+                            }));
+                        }
+                    }, onChange: (e) => {
+                        setState((prev) => {
+                            const shouldAddEmptyOption = prev.options.length < MAX_POLL_OPTIONS &&
+                                (!prev.options ||
+                                    (prev.options.slice(i + 1).length === 0 && !!e.target.value));
+                            const shouldRemoveOption = prev.options && prev.options.slice(i + 1).length > 0 && !e.target.value;
+                            const optionListHead = prev.options ? prev.options.slice(0, i) : [];
+                            const optionListTail = shouldAddEmptyOption
+                                ? [{ id: nanoid(), text: '' }]
+                                : (prev.options || []).slice(i + 1);
+                            if ((errors[option.id] && !e.target.value) ||
+                                (VALIDATION_ERRORS[errors[option.id]] &&
+                                    !findOptionDuplicate({ id: e.target.id, text: e.target.value }))) {
+                                setErrors((prev) => {
+                                    delete prev[option.id];
+                                    return prev;
+                                });
+                            }
+                            return {
+                                ...prev,
+                                options: [
+                                    ...optionListHead,
+                                    ...(shouldRemoveOption ? [] : [{ ...option, text: e.target.value }]),
+                                    ...optionListTail,
+                                ],
+                            };
+                        });
+                    }, onKeyUp: (event) => {
+                        if (event.key === 'Enter') {
+                            const nextInputId = options[i + 1].id;
+                            document.getElementById(nextInputId)?.focus();
+                        }
+                    }, placeholder: t('Add an option'), type: 'text', value: option.text })),
+            draggable && React.createElement("div", { className: 'str-chat__drag-handle' })))))));
+};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export type PollCreationDialogProps = {
+    close: () => void;
+};
+export declare const PollCreationDialog: ({ close }: PollCreationDialogProps) => React.JSX.Element;