stream-chat-react 14.11.0 → 14.12.0

package/dist/es/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.mjs

@@ -0,0 +1,44 @@
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { usePollContext } from "../../../../context/PollContext.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx
+var pollStateSelector = (nextValue) => ({
+	maxVotedOptionIds: nextValue.maxVotedOptionIds,
+	vote_counts_by_option: nextValue.vote_counts_by_option
+});
+var PollResultOptionVoteCounter = ({ optionId }) => {
+	const { IconTrophy } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { poll } = usePollContext();
+	const { maxVotedOptionIds, vote_counts_by_option } = useStateStore(poll.state, pollStateSelector);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__poll-result-option-vote-counter",
+		children: [maxVotedOptionIds.length === 1 && maxVotedOptionIds[0] === optionId && /* @__PURE__ */ jsx(IconTrophy, {}), /* @__PURE__ */ jsx("span", {
+			className: "str-chat__poll-result-option-vote-count",
+			children: t("{{count}} votes", { count: vote_counts_by_option[optionId] ?? 0 })
+		})]
+	});
+};
+var PollOptionWithVotesHeader = ({ option, optionOrderNumber }) => {
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__poll-option__header",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "str-chat__poll-option__header__label",
+			children: t("Question {{ optionOrderNumber}}", { optionOrderNumber })
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__poll-option__header__title",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "str-chat__poll-option__option-text",
+				children: option.text
+			}), /* @__PURE__ */ jsx(PollResultOptionVoteCounter, { optionId: option.id })]
+		})]
+	});
+};
+//#endregion
+export { PollOptionWithVotesHeader, PollResultOptionVoteCounter };
+
+//# sourceMappingURL=PollOptionWithVotesHeader.mjs.map

package/dist/es/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PollOptionWithVotesHeader.mjs","names":[],"sources":["../../../../../../src/components/Poll/PollActions/PollResults/PollOptionWithVotesHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { useStateStore } from '../../../../store';\nimport {\n  useComponentContextIcons,\n  usePollContext,\n  useTranslationContext,\n} from '../../../../context';\nimport type { PollOption, PollState } from 'stream-chat';\n\ntype PollStateSelectorReturnValue = {\n  maxVotedOptionIds: string[];\n  vote_counts_by_option: Record<string, number>;\n};\nconst pollStateSelector = (nextValue: PollState): PollStateSelectorReturnValue => ({\n  maxVotedOptionIds: nextValue.maxVotedOptionIds,\n  vote_counts_by_option: nextValue.vote_counts_by_option,\n});\n\nexport type PollResultOptionVoteCounterProps = {\n  optionId: string;\n};\n\nexport const PollResultOptionVoteCounter = ({\n  optionId,\n}: PollResultOptionVoteCounterProps) => {\n  const { IconTrophy } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  const { poll } = usePollContext();\n  const { maxVotedOptionIds, vote_counts_by_option } = useStateStore(\n    poll.state,\n    pollStateSelector,\n  );\n\n  return (\n    <div className='str-chat__poll-result-option-vote-counter'>\n      {maxVotedOptionIds.length === 1 && maxVotedOptionIds[0] === optionId && (\n        <IconTrophy />\n      )}\n      <span className='str-chat__poll-result-option-vote-count'>\n        {t('{{count}} votes', { count: vote_counts_by_option[optionId] ?? 0 })}\n      </span>\n    </div>\n  );\n};\n\nexport type PollOptionWithVotesHeaderProps = {\n  option: PollOption;\n  optionOrderNumber: number;\n};\n\nexport const PollOptionWithVotesHeader = ({\n  option,\n  optionOrderNumber,\n}: PollOptionWithVotesHeaderProps) => {\n  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__poll-option__header'>\n      <div className='str-chat__poll-option__header__label'>\n        {t('Question {{ optionOrderNumber}}', { optionOrderNumber })}\n      </div>\n      <div className='str-chat__poll-option__header__title'>\n        <div className='str-chat__poll-option__option-text'>{option.text}</div>\n        <PollResultOptionVoteCounter optionId={option.id} />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAaA,IAAM,qBAAqB,eAAwD;CACjF,mBAAmB,UAAU;CAC7B,uBAAuB,UAAU;AACnC;AAMA,IAAa,+BAA+B,EAC1C,eACsC;CACtC,MAAM,EAAE,eAAe,yBAAyB;CAEhD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,EAAE,mBAAmB,0BAA0B,cACnD,KAAK,OACL,iBACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,kBAAkB,WAAW,KAAK,kBAAkB,OAAO,YAC1D,oBAAC,YAAD,CAAa,CAAA,GAEf,oBAAC,QAAD;GAAM,WAAU;aACb,EAAE,mBAAmB,EAAE,OAAO,sBAAsB,aAAa,EAAE,CAAC;EACjE,CAAA,CACH;;AAET;AAOA,IAAa,6BAA6B,EACxC,QACA,wBACoC;CACpC,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aACZ,EAAE,mCAAmC,EAAE,kBAAkB,CAAC;EACxD,CAAA,GACL,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,OAAD;IAAK,WAAU;cAAsC,OAAO;GAAU,CAAA,GACtE,oBAAC,6BAAD,EAA6B,UAAU,OAAO,GAAK,CAAA,CAChD;IACF;;AAET"}

package/dist/es/components/Poll/PollActions/PollResults/PollOptionWithVotesList.mjs

@@ -0,0 +1,39 @@
+import { LoadingIndicator } from "../../../Loading/LoadingIndicator.mjs";
+import { PollVoteListing } from "../../PollVote.mjs";
+import { usePollOptionVotesPagination } from "../../hooks/usePollOptionVotesPagination.mjs";
+import { InfiniteScrollPaginator } from "../../../InfiniteScrollPaginator/InfiniteScrollPaginator.mjs";
+import { PollOptionWithVotesHeader } from "./PollOptionWithVotesHeader.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Poll/PollActions/PollResults/PollOptionWithVotesList.tsx
+var PollOptionWithVotesList = ({ option, optionOrderNumber }) => {
+	const { hasNextPage, loading, loadMore, votes } = usePollOptionVotesPagination({ paginationParams: useMemo(() => ({ filter: { option_id: option.id } }), [option.id]) });
+	return /* @__PURE__ */ jsx(InfiniteScrollPaginator, {
+		loadNextOnScrollToBottom: loadMore,
+		threshold: 40,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "str-chat_poll-option-with-votes-list",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "str-chat__poll-option",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__poll-option__votes-paginated-list",
+					children: [
+						/* @__PURE__ */ jsx(PollOptionWithVotesHeader, {
+							option,
+							optionOrderNumber
+						}),
+						/* @__PURE__ */ jsx(PollVoteListing, { votes }),
+						hasNextPage && /* @__PURE__ */ jsx("div", {
+							className: "str-chat__loading-indicator-placeholder",
+							children: loading && /* @__PURE__ */ jsx(LoadingIndicator, {})
+						})
+					]
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { PollOptionWithVotesList };
+
+//# sourceMappingURL=PollOptionWithVotesList.mjs.map

package/dist/es/components/Poll/PollActions/PollResults/PollOptionWithVotesList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PollOptionWithVotesList.mjs","names":[],"sources":["../../../../../../src/components/Poll/PollActions/PollResults/PollOptionWithVotesList.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { PollVoteListing } from '../../PollVote';\nimport { usePollOptionVotesPagination } from '../../hooks';\nimport { LoadingIndicator } from '../../../Loading';\nimport { InfiniteScrollPaginator } from '../../../InfiniteScrollPaginator/InfiniteScrollPaginator';\nimport type { PollOption, PollOptionVotesQueryParams } from 'stream-chat';\nimport { PollOptionWithVotesHeader } from './PollOptionWithVotesHeader';\n\nexport type PollOptionWithVotesListProps = {\n  option: PollOption;\n  optionOrderNumber: number;\n};\n\nexport const PollOptionWithVotesList = ({\n  option,\n  optionOrderNumber,\n}: PollOptionWithVotesListProps) => {\n  const paginationParams = useMemo<PollOptionVotesQueryParams>(\n    () => ({ filter: { option_id: option.id } }),\n    [option.id],\n  );\n  const { hasNextPage, loading, loadMore, votes } = usePollOptionVotesPagination({\n    paginationParams,\n  });\n\n  return (\n    <InfiniteScrollPaginator loadNextOnScrollToBottom={loadMore} threshold={40}>\n      <div className='str-chat_poll-option-with-votes-list'>\n        <div className='str-chat__poll-option'>\n          <div className='str-chat__poll-option__votes-paginated-list'>\n            <PollOptionWithVotesHeader\n              option={option}\n              optionOrderNumber={optionOrderNumber}\n            />\n            <PollVoteListing votes={votes} />\n            {hasNextPage && (\n              <div className='str-chat__loading-indicator-placeholder'>\n                {loading && <LoadingIndicator />}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </InfiniteScrollPaginator>\n  );\n};\n"],"mappings":";;;;;;;;AAaA,IAAa,2BAA2B,EACtC,QACA,wBACkC;CAKlC,MAAM,EAAE,aAAa,SAAS,UAAU,UAAU,6BAA6B,EAC7E,kBALuB,eAChB,EAAE,QAAQ,EAAE,WAAW,OAAO,GAAG,EAAE,IAC1C,CAAC,OAAO,EAAE,CAGV,EACF,CAAC;CAED,OACE,oBAAC,yBAAD;EAAyB,0BAA0B;EAAU,WAAW;YACtE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,oBAAC,2BAAD;OACU;OACW;MACpB,CAAA;MACD,oBAAC,iBAAD,EAAwB,MAAQ,CAAA;MAC/B,eACC,oBAAC,OAAD;OAAK,WAAU;iBACZ,WAAW,oBAAC,kBAAD,CAAmB,CAAA;MAC5B,CAAA;KAEJ;;GACF,CAAA;EACF,CAAA;CACkB,CAAA;AAE7B"}

package/dist/es/components/Poll/PollActions/PollResults/PollResults.mjs

@@ -0,0 +1,75 @@
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useModalContext } from "../../../../context/ModalContext.mjs";
+import { usePollContext } from "../../../../context/PollContext.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { Viewer } from "../../../Dialog/components/Viewer.mjs";
+import { PollOptionWithVotes } from "./PollOptionWithVotes.mjs";
+import { PollQuestion } from "../PollQuestion.mjs";
+import { PollOptionWithVotesList } from "./PollOptionWithVotesList.mjs";
+import { useCallback, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Poll/PollActions/PollResults/PollResults.tsx
+var pollStateSelector = ({ name, options, vote_count, vote_counts_by_option }) => ({
+	name,
+	options: [...options],
+	vote_count,
+	vote_counts_by_option
+});
+var PollResults = () => {
+	const { t } = useTranslationContext();
+	const { poll } = usePollContext();
+	const { close } = useModalContext();
+	const { name, options, vote_count, vote_counts_by_option } = useStateStore(poll.state, pollStateSelector);
+	const [optionToView, setOptionToView] = useState(null);
+	const goBack = useCallback(() => setOptionToView(null), []);
+	return /* @__PURE__ */ jsx(Viewer.Root, {
+		className: clsx("str-chat__modal__poll-results", { "str-chat__modal__poll-results--option-detail": optionToView }),
+		children: optionToView?.option ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Viewer.Header, {
+			close,
+			description: t("Review who voted for this option"),
+			goBack,
+			title: t("Votes")
+		}), /* @__PURE__ */ jsx(Viewer.Body, {
+			className: "str-chat__modal__poll-results__body",
+			children: /* @__PURE__ */ jsx(PollOptionWithVotesList, {
+				option: optionToView?.option,
+				optionOrderNumber: optionToView?.optionOrderNumber
+			})
+		})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Viewer.Header, {
+			close,
+			description: t("Review poll results and open an option to see detailed votes"),
+			title: t("Poll results")
+		}), /* @__PURE__ */ jsxs(Viewer.Body, {
+			className: "str-chat__modal__poll-results__body",
+			children: [/* @__PURE__ */ jsx(PollQuestion, { question: name }), /* @__PURE__ */ jsxs("div", {
+				className: "str-chat__modal__poll-results__options",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "str-chat__modal__poll-results__option-list",
+					children: options.sort((next, current) => (vote_counts_by_option[current.id] ?? 0) >= (vote_counts_by_option[next.id] ?? 0) ? 1 : -1).map((option, i) => {
+						const optionOrderNumber = i + 1;
+						return /* @__PURE__ */ jsx(PollOptionWithVotes, {
+							countVotesPreview: 5,
+							option,
+							orderNumber: optionOrderNumber,
+							showAllVotes: () => setOptionToView({
+								option,
+								optionOrderNumber
+							})
+						}, `poll-option-${option.id}`);
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "str-chat__modal__poll-results__options__footer",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "str-chat__modal__poll-results__options-total-count",
+						children: t("totalVoteCount", { count: vote_count })
+					})
+				})]
+			})]
+		})] })
+	});
+};
+//#endregion
+export { PollResults };
+
+//# sourceMappingURL=PollResults.mjs.map

package/dist/es/components/Poll/PollActions/PollResults/PollResults.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PollResults.mjs","names":[],"sources":["../../../../../../src/components/Poll/PollActions/PollResults/PollResults.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useCallback, useState } from 'react';\nimport { PollOptionWithVotes } from './PollOptionWithVotes';\nimport { Viewer } from '../../../Dialog';\nimport { useStateStore } from '../../../../store';\nimport {\n  useModalContext,\n  usePollContext,\n  useTranslationContext,\n} from '../../../../context';\nimport type { PollOption, PollState } from 'stream-chat';\nimport { COUNT_OPTION_VOTES_PREVIEW } from '../../constants';\nimport { PollQuestion } from '../PollQuestion';\nimport { PollOptionWithVotesList } from './PollOptionWithVotesList';\n\nconst pollStateSelector = ({\n  name,\n  options,\n  vote_count,\n  vote_counts_by_option,\n}: PollState) => ({\n  name,\n  options: [...options],\n  vote_count,\n  vote_counts_by_option,\n});\n\nexport const PollResults = () => {\n  const { t } = useTranslationContext();\n  const { poll } = usePollContext();\n  const { close } = useModalContext();\n  const { name, options, vote_count, vote_counts_by_option } = useStateStore(\n    poll.state,\n    pollStateSelector,\n  );\n  const [optionToView, setOptionToView] = useState<{\n    option: PollOption;\n    optionOrderNumber: number;\n  } | null>(null);\n\n  const goBack = useCallback(() => setOptionToView(null), []);\n\n  return (\n    <Viewer.Root\n      className={clsx('str-chat__modal__poll-results', {\n        'str-chat__modal__poll-results--option-detail': optionToView,\n      })}\n    >\n      {optionToView?.option ? (\n        <>\n          <Viewer.Header\n            close={close}\n            description={t('Review who voted for this option')}\n            goBack={goBack}\n            title={t('Votes')}\n          />\n          <Viewer.Body className='str-chat__modal__poll-results__body'>\n            <PollOptionWithVotesList\n              option={optionToView?.option}\n              optionOrderNumber={optionToView?.optionOrderNumber}\n            />\n          </Viewer.Body>\n        </>\n      ) : (\n        <>\n          <Viewer.Header\n            close={close}\n            description={t(\n              'Review poll results and open an option to see detailed votes',\n            )}\n            title={t('Poll results')}\n          />\n          <Viewer.Body className='str-chat__modal__poll-results__body'>\n            <PollQuestion question={name} />\n            <div className='str-chat__modal__poll-results__options'>\n              <div className='str-chat__modal__poll-results__option-list'>\n                {options\n                  .sort((next, current) =>\n                    (vote_counts_by_option[current.id] ?? 0) >=\n                    (vote_counts_by_option[next.id] ?? 0)\n                      ? 1\n                      : -1,\n                  )\n                  .map((option, i) => {\n                    const optionOrderNumber = i + 1;\n                    return (\n                      <PollOptionWithVotes\n                        countVotesPreview={COUNT_OPTION_VOTES_PREVIEW}\n                        key={`poll-option-${option.id}`}\n                        option={option}\n                        orderNumber={optionOrderNumber}\n                        showAllVotes={() =>\n                          setOptionToView({ option, optionOrderNumber })\n                        }\n                      />\n                    );\n                  })}\n              </div>\n              <div className='str-chat__modal__poll-results__options__footer'>\n                <div className='str-chat__modal__poll-results__options-total-count'>\n                  {t('totalVoteCount', { count: vote_count })}\n                </div>\n              </div>\n            </div>\n          </Viewer.Body>\n        </>\n      )}\n    </Viewer.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,qBAAqB,EACzB,MACA,SACA,YACA,6BACgB;CAChB;CACA,SAAS,CAAC,GAAG,OAAO;CACpB;CACA;AACF;AAEA,IAAa,oBAAoB;CAC/B,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,EAAE,MAAM,SAAS,YAAY,0BAA0B,cAC3D,KAAK,OACL,iBACF;CACA,MAAM,CAAC,cAAc,mBAAmB,SAG9B,IAAI;CAEd,MAAM,SAAS,kBAAkB,gBAAgB,IAAI,GAAG,CAAC,CAAC;CAE1D,OACE,oBAAC,OAAO,MAAR;EACE,WAAW,KAAK,iCAAiC,EAC/C,gDAAgD,aAClD,CAAC;YAEA,cAAc,SACb,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,OAAO,QAAR;GACS;GACP,aAAa,EAAE,kCAAkC;GACzC;GACR,OAAO,EAAE,OAAO;EACjB,CAAA,GACD,oBAAC,OAAO,MAAR;GAAa,WAAU;aACrB,oBAAC,yBAAD;IACE,QAAQ,cAAc;IACtB,mBAAmB,cAAc;GAClC,CAAA;EACU,CAAA,CACb,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,OAAO,QAAR;GACS;GACP,aAAa,EACX,8DACF;GACA,OAAO,EAAE,cAAc;EACxB,CAAA,GACD,qBAAC,OAAO,MAAR;GAAa,WAAU;aAAvB,CACE,oBAAC,cAAD,EAAc,UAAU,KAAO,CAAA,GAC/B,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ,QACE,MAAM,MAAM,aACV,sBAAsB,QAAQ,OAAO,OACrC,sBAAsB,KAAK,OAAO,KAC/B,IACA,EACN,CAAC,CACA,KAAK,QAAQ,MAAM;MAClB,MAAM,oBAAoB,IAAI;MAC9B,OACE,oBAAC,qBAAD;OACE,mBAAA;OAEQ;OACR,aAAa;OACb,oBACE,gBAAgB;QAAE;QAAQ;OAAkB,CAAC;MAEhD,GANM,eAAe,OAAO,IAM5B;KAEL,CAAC;IACA,CAAA,GACL,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MAAK,WAAU;gBACZ,EAAE,kBAAkB,EAAE,OAAO,WAAW,CAAC;KACvC,CAAA;IACF,CAAA,CACF;KACM;IACb,EAAA,CAAA;CAEO,CAAA;AAEjB"}

package/dist/es/components/Poll/PollActions/SuggestPollOptionPrompt.mjs

@@ -0,0 +1,79 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useModalContext } from "../../../context/ModalContext.mjs";
+import { usePollContext } from "../../../context/PollContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Prompt } from "../../Dialog/components/Prompt.mjs";
+import { TextInput } from "../../Form/TextInput.mjs";
+import { useFormState } from "../../Form/hooks/useFormState.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Poll/PollActions/SuggestPollOptionPrompt.tsx
+var pollStateSelector = (nextValue) => ({ options: nextValue.options });
+var SuggestPollOptionPrompt = () => {
+	const { client } = useChatContext();
+	const { t } = useTranslationContext();
+	const { poll } = usePollContext();
+	const { close } = useModalContext();
+	const { options } = useStateStore(poll.state, pollStateSelector);
+	const [input, setInput] = useState(null);
+	const initialValue = useMemo(() => ({ optionText: "" }), []);
+	const validators = useMemo(() => ({ optionText: (v) => {
+		const trimmed = typeof v === "string" ? v.trim() : "";
+		if (!trimmed) return new Error(t("This field cannot be empty or contain only spaces"));
+		if (options.find((option) => option.text === trimmed)) return new Error(t("Option already exists"));
+	} }), [t, options]);
+	const { fieldErrors, handleSubmit, setFieldValue, value } = useFormState({
+		initialValue,
+		onSubmit: useCallback(async (formValue) => {
+			await client.createPollOption(poll.id, { text: formValue.optionText });
+			close();
+		}, [
+			client,
+			poll,
+			close
+		]),
+		validators
+	});
+	useEffect(() => {
+		input?.focus();
+	}, [input]);
+	const submitDisabled = !value.optionText?.trim();
+	return /* @__PURE__ */ jsxs(Prompt.Root, {
+		className: "str-chat__modal__suggest-poll-option-prompt",
+		children: [/* @__PURE__ */ jsx(Prompt.Header, {
+			close,
+			description: t("Suggest a new option to add to this poll"),
+			title: t("Suggest an option")
+		}), /* @__PURE__ */ jsxs("form", {
+			autoComplete: "off",
+			onSubmit: handleSubmit,
+			children: [/* @__PURE__ */ jsx(Prompt.Body, { children: /* @__PURE__ */ jsx(TextInput, {
+				"aria-label": t("Suggest an option"),
+				error: !!fieldErrors.optionText,
+				errorMessage: fieldErrors.optionText?.message,
+				id: "optionText",
+				name: "optionText",
+				onChange: (e) => setFieldValue("optionText", e.target.value),
+				placeholder: t("placeholder/PollOptionSuggestion"),
+				ref: setInput,
+				required: true,
+				type: "text",
+				value: value.optionText
+			}) }), /* @__PURE__ */ jsx(Prompt.Footer, { children: /* @__PURE__ */ jsxs(Prompt.FooterControls, { children: [/* @__PURE__ */ jsx(Prompt.FooterControlsButtonSecondary, {
+				className: "str-chat__prompt__footer__controls-button--cancel",
+				onClick: close,
+				children: t("Cancel")
+			}), /* @__PURE__ */ jsx(Prompt.FooterControlsButtonPrimary, {
+				className: "str-chat__prompt__footer__controls-button--submit",
+				disabled: Object.keys(fieldErrors).length > 0 || submitDisabled,
+				type: "submit",
+				children: t("Send")
+			})] }) })]
+		})]
+	});
+};
+//#endregion
+export { SuggestPollOptionPrompt };
+
+//# sourceMappingURL=SuggestPollOptionPrompt.mjs.map

package/dist/es/components/Poll/PollActions/SuggestPollOptionPrompt.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestPollOptionPrompt.mjs","names":[],"sources":["../../../../../src/components/Poll/PollActions/SuggestPollOptionPrompt.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n  useChatContext,\n  useModalContext,\n  usePollContext,\n  useTranslationContext,\n} from '../../../context';\nimport { useStateStore } from '../../../store';\nimport type { PollOption, PollState } from 'stream-chat';\nimport { Prompt } from '../../Dialog';\nimport { TextInput } from '../../Form';\nimport { useFormState } from '../../Form/hooks';\n\ntype PollStateSelectorReturnValue = { options: PollOption[] };\nconst pollStateSelector = (nextValue: PollState): PollStateSelectorReturnValue => ({\n  options: nextValue.options,\n});\n\nexport type SuggestPollOptionFormProps = Record<string, never>;\n\nexport const SuggestPollOptionPrompt = () => {\n  const { client } = useChatContext();\n  const { t } = useTranslationContext();\n  const { poll } = usePollContext();\n  const { close } = useModalContext();\n  const { options } = useStateStore(poll.state, pollStateSelector);\n  const [input, setInput] = useState<HTMLInputElement | null>(null);\n\n  const initialValue = useMemo(() => ({ optionText: '' }), []);\n  const validators = useMemo(\n    () => ({\n      optionText: (v: string) => {\n        const trimmed = typeof v === 'string' ? v.trim() : '';\n        if (!trimmed) {\n          return new Error(t('This field cannot be empty or contain only spaces'));\n        }\n        const existingOption = options.find((option) => option.text === trimmed);\n        if (existingOption) {\n          return new Error(t('Option already exists'));\n        }\n        return undefined;\n      },\n    }),\n    [t, options],\n  );\n\n  const onSubmit = useCallback(\n    async (formValue: { optionText: string }) => {\n      await client.createPollOption(poll.id, {\n        text: formValue.optionText,\n      });\n      close();\n    },\n    [client, poll, close],\n  );\n\n  const { fieldErrors, handleSubmit, setFieldValue, value } = useFormState<{\n    optionText: string;\n  }>({\n    initialValue,\n    onSubmit,\n    validators,\n  });\n\n  useEffect(() => {\n    input?.focus();\n  }, [input]);\n\n  const submitDisabled = !value.optionText?.trim();\n\n  return (\n    <Prompt.Root className='str-chat__modal__suggest-poll-option-prompt'>\n      <Prompt.Header\n        close={close}\n        description={t('Suggest a new option to add to this poll')}\n        title={t('Suggest an option')}\n      />\n      <form autoComplete='off' onSubmit={handleSubmit}>\n        <Prompt.Body>\n          <TextInput\n            aria-label={t('Suggest an option')}\n            error={!!fieldErrors.optionText}\n            errorMessage={fieldErrors.optionText?.message}\n            id='optionText'\n            name='optionText'\n            onChange={(e) => setFieldValue('optionText', e.target.value)}\n            placeholder={t('placeholder/PollOptionSuggestion')}\n            ref={setInput}\n            required\n            type='text'\n            value={value.optionText}\n          />\n        </Prompt.Body>\n        <Prompt.Footer>\n          <Prompt.FooterControls>\n            <Prompt.FooterControlsButtonSecondary\n              className='str-chat__prompt__footer__controls-button--cancel'\n              onClick={close}\n            >\n              {t('Cancel')}\n            </Prompt.FooterControlsButtonSecondary>\n            <Prompt.FooterControlsButtonPrimary\n              className='str-chat__prompt__footer__controls-button--submit'\n              disabled={Object.keys(fieldErrors).length > 0 || submitDisabled}\n              type='submit'\n            >\n              {t('Send')}\n            </Prompt.FooterControlsButtonPrimary>\n          </Prompt.FooterControls>\n        </Prompt.Footer>\n      </form>\n    </Prompt.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAcA,IAAM,qBAAqB,eAAwD,EACjF,SAAS,UAAU,QACrB;AAIA,IAAa,gCAAgC;CAC3C,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,EAAE,YAAY,cAAc,KAAK,OAAO,iBAAiB;CAC/D,MAAM,CAAC,OAAO,YAAY,SAAkC,IAAI;CAEhE,MAAM,eAAe,eAAe,EAAE,YAAY,GAAG,IAAI,CAAC,CAAC;CAC3D,MAAM,aAAa,eACV,EACL,aAAa,MAAc;EACzB,MAAM,UAAU,OAAO,MAAM,WAAW,EAAE,KAAK,IAAI;EACnD,IAAI,CAAC,SACH,OAAO,IAAI,MAAM,EAAE,mDAAmD,CAAC;EAGzE,IADuB,QAAQ,MAAM,WAAW,OAAO,SAAS,OAC5D,GACF,OAAO,IAAI,MAAM,EAAE,uBAAuB,CAAC;CAG/C,EACF,IACA,CAAC,GAAG,OAAO,CACb;CAYA,MAAM,EAAE,aAAa,cAAc,eAAe,UAAU,aAEzD;EACD;EACA,UAde,YACf,OAAO,cAAsC;GAC3C,MAAM,OAAO,iBAAiB,KAAK,IAAI,EACrC,MAAM,UAAU,WAClB,CAAC;GACD,MAAM;EACR,GACA;GAAC;GAAQ;GAAM;EAAK,CAOpB;EACA;CACF,CAAC;CAED,gBAAgB;EACd,OAAO,MAAM;CACf,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,iBAAiB,CAAC,MAAM,YAAY,KAAK;CAE/C,OACE,qBAAC,OAAO,MAAR;EAAa,WAAU;YAAvB,CACE,oBAAC,OAAO,QAAR;GACS;GACP,aAAa,EAAE,0CAA0C;GACzD,OAAO,EAAE,mBAAmB;EAC7B,CAAA,GACD,qBAAC,QAAD;GAAM,cAAa;GAAM,UAAU;aAAnC,CACE,oBAAC,OAAO,MAAR,EAAA,UACE,oBAAC,WAAD;IACE,cAAY,EAAE,mBAAmB;IACjC,OAAO,CAAC,CAAC,YAAY;IACrB,cAAc,YAAY,YAAY;IACtC,IAAG;IACH,MAAK;IACL,WAAW,MAAM,cAAc,cAAc,EAAE,OAAO,KAAK;IAC3D,aAAa,EAAE,kCAAkC;IACjD,KAAK;IACL,UAAA;IACA,MAAK;IACL,OAAO,MAAM;GACd,CAAA,EACU,CAAA,GACb,oBAAC,OAAO,QAAR,EAAA,UACE,qBAAC,OAAO,gBAAR,EAAA,UAAA,CACE,oBAAC,OAAO,+BAAR;IACE,WAAU;IACV,SAAS;cAER,EAAE,QAAQ;GACyB,CAAA,GACtC,oBAAC,OAAO,6BAAR;IACE,WAAU;IACV,UAAU,OAAO,KAAK,WAAW,CAAC,CAAC,SAAS,KAAK;IACjD,MAAK;cAEJ,EAAE,MAAM;GACyB,CAAA,CACf,EAAA,CAAA,EACV,CAAA,CACX;IACK;;AAEjB"}

package/dist/es/components/Poll/PollContent.mjs

@@ -0,0 +1,28 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { usePollContext } from "../../context/PollContext.mjs";
+import { PollHeader } from "./PollHeader.mjs";
+import { PollActions } from "./PollActions/PollActions.mjs";
+import { PollOptionList } from "./PollOptionList.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Poll/PollContent.tsx
+var pollStateSelectorPollContent = (nextValue) => ({ is_closed: nextValue.is_closed });
+var PollContent = () => {
+	const { PollActions: PollActions$1 = PollActions, PollHeader: PollHeader$1 = PollHeader } = useComponentContext();
+	const { poll } = usePollContext();
+	const { is_closed } = useStateStore(poll.state, pollStateSelectorPollContent);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__poll", { "str-chat__poll--closed": is_closed }),
+		children: [
+			/* @__PURE__ */ jsx(PollHeader$1, {}),
+			/* @__PURE__ */ jsx(PollOptionList, { optionsDisplayCount: 5 }),
+			/* @__PURE__ */ jsx(PollActions$1, {})
+		]
+	});
+};
+//#endregion
+export { PollContent };
+
+//# sourceMappingURL=PollContent.mjs.map

package/dist/es/components/Poll/PollContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PollContent.mjs","names":[],"sources":["../../../../src/components/Poll/PollContent.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport { PollHeader as DefaultPollHeader } from './PollHeader';\nimport { PollActions as DefaultPollActions } from './PollActions';\nimport { PollOptionList } from './PollOptionList';\nimport { MAX_OPTIONS_DISPLAYED } from './constants';\nimport { useComponentContext, usePollContext } from '../../context';\nimport { useStateStore } from '../../store';\nimport type { PollState } from 'stream-chat';\n\ntype PollStateSelectorPollContentReturnValue = { is_closed: boolean | undefined };\nconst pollStateSelectorPollContent = (\n  nextValue: PollState,\n): PollStateSelectorPollContentReturnValue => ({ is_closed: nextValue.is_closed });\nexport const PollContent = () => {\n  const { PollActions = DefaultPollActions, PollHeader = DefaultPollHeader } =\n    useComponentContext();\n  const { poll } = usePollContext();\n  const { is_closed } = useStateStore(poll.state, pollStateSelectorPollContent);\n\n  return (\n    <div className={clsx('str-chat__poll', { 'str-chat__poll--closed': is_closed })}>\n      <PollHeader />\n      <PollOptionList optionsDisplayCount={MAX_OPTIONS_DISPLAYED} />\n      <PollActions />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAWA,IAAM,gCACJ,eAC6C,EAAE,WAAW,UAAU,UAAU;AAChF,IAAa,oBAAoB;CAC/B,MAAM,EAAE,aAAA,gBAAc,aAAoB,YAAA,eAAa,eACrD,oBAAoB;CACtB,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,EAAE,cAAc,cAAc,KAAK,OAAO,4BAA4B;CAE5E,OACE,qBAAC,OAAD;EAAK,WAAW,KAAK,kBAAkB,EAAE,0BAA0B,UAAU,CAAC;YAA9E;GACE,oBAAC,cAAD,CAAa,CAAA;GACb,oBAAC,gBAAD,EAAgB,qBAAA,EAA6C,CAAA;GAC7D,oBAAC,eAAD,CAAc,CAAA;EACX;;AAET"}

package/dist/es/components/Poll/PollCreationDialog/MultipleAnswersField.mjs

@@ -0,0 +1,84 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { SwitchField, SwitchFieldLabel } from "../../Form/SwitchField.mjs";
+import { NumericInput } from "../../Form/NumericInput.mjs";
+import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Poll/PollCreationDialog/MultipleAnswersField.tsx
+var pollComposerStateSelector = (state) => ({
+	enforce_unique_vote: state.data.enforce_unique_vote,
+	error: state.errors.max_votes_allowed,
+	max_votes_allowed: state.data.max_votes_allowed
+});
+var MultipleAnswersField = () => {
+	const { t } = useTranslationContext();
+	const { pollComposer } = useMessageComposerController();
+	const { enforce_unique_vote, error, max_votes_allowed } = useStateStore(pollComposer.state, pollComposerStateSelector);
+	const [voteLimitEnabled, setVoteLimitEnabled] = useState(false);
+	const maxVotesInputRef = useRef(null);
+	const knownValidationErrors = useMemo(() => ({
+		"Enforce unique vote is enabled": t("Enforce unique vote is enabled"),
+		"Type a number from 2 to 10": t("Type a number from 2 to 10")
+	}), [t]);
+	const multipleVotesEnabled = !enforce_unique_vote;
+	const errorText = error && knownValidationErrors[error];
+	const voteLimitSwitchId = "max_votes_allowed_enabled";
+	const voteLimitSwitchLabelId = `${voteLimitSwitchId}-label`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__form__switch-fieldset",
+		children: [/* @__PURE__ */ jsx(SwitchField, {
+			checked: multipleVotesEnabled,
+			description: t("Select more than one option"),
+			id: "enforce_unique_vote",
+			onChange: (e) => {
+				setVoteLimitEnabled(false);
+				pollComposer.updateFields({ enforce_unique_vote: !e.target.checked });
+			},
+			title: t("Multiple votes")
+		}), multipleVotesEnabled && /* @__PURE__ */ jsx(SwitchField, {
+			"aria-labelledby": voteLimitSwitchLabelId,
+			checked: voteLimitEnabled,
+			fieldClassName: "str-chat__multiple-answers-field__votes-limit-field",
+			id: voteLimitSwitchId,
+			onChange: (event) => {
+				const nextVoteLimitEnabled = event.target.checked;
+				setVoteLimitEnabled(nextVoteLimitEnabled);
+				pollComposer.updateFields({ max_votes_allowed: "2" });
+				if (!nextVoteLimitEnabled) return;
+				requestAnimationFrame(() => {
+					maxVotesInputRef.current?.focus();
+				});
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "str-chat__multiple-answers-field__votes-limit-field__numeric-field",
+				children: [/* @__PURE__ */ jsx(SwitchFieldLabel, {
+					asError: !!errorText,
+					description: t("Choose between 2 to 10 options"),
+					htmlFor: voteLimitSwitchId,
+					id: voteLimitSwitchLabelId,
+					title: t("Limit votes per person")
+				}), voteLimitEnabled && /* @__PURE__ */ jsx(NumericInput, {
+					"aria-label": t("Maximum votes per person"),
+					id: "max_votes_allowed",
+					max: 10,
+					min: 2,
+					onBlur: () => {
+						pollComposer.handleFieldBlur("max_votes_allowed");
+					},
+					onChange: (e) => {
+						const raw = e.target.value;
+						const nativeFieldValidation = raw !== "" && !/^\d+$/.test(raw) ? { max_votes_allowed: t("Only numbers are allowed") } : void 0;
+						pollComposer.updateFields({ max_votes_allowed: nativeFieldValidation ? pollComposer.max_votes_allowed : raw }, nativeFieldValidation);
+					},
+					ref: maxVotesInputRef,
+					value: max_votes_allowed ?? ""
+				})]
+			})
+		})]
+	});
+};
+//#endregion
+export { MultipleAnswersField };
+
+//# sourceMappingURL=MultipleAnswersField.mjs.map

package/dist/es/components/Poll/PollCreationDialog/MultipleAnswersField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleAnswersField.mjs","names":[],"sources":["../../../../../src/components/Poll/PollCreationDialog/MultipleAnswersField.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { NumericInput } from '../../Form/NumericInput';\nimport { SwitchField, SwitchFieldLabel } from '../../Form/SwitchField';\nimport { useTranslationContext } from '../../../context';\nimport { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController';\nimport { useStateStore } from '../../../store';\nimport type { PollComposerState } from 'stream-chat';\n\nconst pollComposerStateSelector = (state: PollComposerState) => ({\n  enforce_unique_vote: state.data.enforce_unique_vote,\n  error: state.errors.max_votes_allowed,\n  max_votes_allowed: state.data.max_votes_allowed,\n});\n\nexport const MultipleAnswersField = () => {\n  const { t } = useTranslationContext();\n  const { pollComposer } = useMessageComposerController();\n  const { enforce_unique_vote, error, max_votes_allowed } = useStateStore(\n    pollComposer.state,\n    pollComposerStateSelector,\n  );\n  const [voteLimitEnabled, setVoteLimitEnabled] = useState(false);\n  const maxVotesInputRef = useRef<HTMLInputElement | null>(null);\n\n  const knownValidationErrors = useMemo<Record<string, string>>(\n    () => ({\n      'Enforce unique vote is enabled': t('Enforce unique vote is enabled'),\n      'Type a number from 2 to 10': t('Type a number from 2 to 10'),\n    }),\n    [t],\n  );\n\n  const multipleVotesEnabled = !enforce_unique_vote;\n  const errorText = error && knownValidationErrors[error];\n  const voteLimitSwitchId = 'max_votes_allowed_enabled';\n  const voteLimitSwitchLabelId = `${voteLimitSwitchId}-label`;\n\n  return (\n    <div className='str-chat__form__switch-fieldset'>\n      <SwitchField\n        checked={multipleVotesEnabled}\n        description={t('Select more than one option')}\n        id='enforce_unique_vote'\n        onChange={(e) => {\n          setVoteLimitEnabled(false);\n          pollComposer.updateFields({ enforce_unique_vote: !e.target.checked });\n        }}\n        title={t('Multiple votes')}\n      />\n      {multipleVotesEnabled && (\n        <SwitchField\n          aria-labelledby={voteLimitSwitchLabelId}\n          checked={voteLimitEnabled}\n          fieldClassName='str-chat__multiple-answers-field__votes-limit-field'\n          id={voteLimitSwitchId}\n          onChange={(event) => {\n            const nextVoteLimitEnabled = event.target.checked;\n            setVoteLimitEnabled(nextVoteLimitEnabled);\n            pollComposer.updateFields({ max_votes_allowed: '2' });\n            if (!nextVoteLimitEnabled) return;\n            requestAnimationFrame(() => {\n              maxVotesInputRef.current?.focus();\n            });\n          }}\n        >\n          <div className='str-chat__multiple-answers-field__votes-limit-field__numeric-field'>\n            <SwitchFieldLabel\n              asError={!!errorText}\n              description={t('Choose between 2 to 10 options')}\n              htmlFor={voteLimitSwitchId}\n              id={voteLimitSwitchLabelId}\n              title={t('Limit votes per person')}\n            />\n            {voteLimitEnabled && (\n              <NumericInput\n                aria-label={t('Maximum votes per person')}\n                id='max_votes_allowed'\n                max={10}\n                min={2}\n                onBlur={() => {\n                  pollComposer.handleFieldBlur('max_votes_allowed');\n                }}\n                onChange={(e) => {\n                  const raw = e.target.value;\n                  const nativeFieldValidation =\n                    raw !== '' && !/^\\d+$/.test(raw)\n                      ? { max_votes_allowed: t('Only numbers are allowed') }\n                      : undefined;\n                  pollComposer.updateFields(\n                    {\n                      max_votes_allowed: nativeFieldValidation\n                        ? pollComposer.max_votes_allowed\n                        : raw,\n                    },\n                    nativeFieldValidation,\n                  );\n                }}\n                ref={maxVotesInputRef}\n                value={max_votes_allowed ?? ''}\n              />\n            )}\n          </div>\n        </SwitchField>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAQA,IAAM,6BAA6B,WAA8B;CAC/D,qBAAqB,MAAM,KAAK;CAChC,OAAO,MAAM,OAAO;CACpB,mBAAmB,MAAM,KAAK;AAChC;AAEA,IAAa,6BAA6B;CACxC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,iBAAiB,6BAA6B;CACtD,MAAM,EAAE,qBAAqB,OAAO,sBAAsB,cACxD,aAAa,OACb,yBACF;CACA,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,KAAK;CAC9D,MAAM,mBAAmB,OAAgC,IAAI;CAE7D,MAAM,wBAAwB,eACrB;EACL,kCAAkC,EAAE,gCAAgC;EACpE,8BAA8B,EAAE,4BAA4B;CAC9D,IACA,CAAC,CAAC,CACJ;CAEA,MAAM,uBAAuB,CAAC;CAC9B,MAAM,YAAY,SAAS,sBAAsB;CACjD,MAAM,oBAAoB;CAC1B,MAAM,yBAAyB,GAAG,kBAAkB;CAEpD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,aAAD;GACE,SAAS;GACT,aAAa,EAAE,6BAA6B;GAC5C,IAAG;GACH,WAAW,MAAM;IACf,oBAAoB,KAAK;IACzB,aAAa,aAAa,EAAE,qBAAqB,CAAC,EAAE,OAAO,QAAQ,CAAC;GACtE;GACA,OAAO,EAAE,gBAAgB;EAC1B,CAAA,GACA,wBACC,oBAAC,aAAD;GACE,mBAAiB;GACjB,SAAS;GACT,gBAAe;GACf,IAAI;GACJ,WAAW,UAAU;IACnB,MAAM,uBAAuB,MAAM,OAAO;IAC1C,oBAAoB,oBAAoB;IACxC,aAAa,aAAa,EAAE,mBAAmB,IAAI,CAAC;IACpD,IAAI,CAAC,sBAAsB;IAC3B,4BAA4B;KAC1B,iBAAiB,SAAS,MAAM;IAClC,CAAC;GACH;aAEA,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,kBAAD;KACE,SAAS,CAAC,CAAC;KACX,aAAa,EAAE,gCAAgC;KAC/C,SAAS;KACT,IAAI;KACJ,OAAO,EAAE,wBAAwB;IAClC,CAAA,GACA,oBACC,oBAAC,cAAD;KACE,cAAY,EAAE,0BAA0B;KACxC,IAAG;KACH,KAAK;KACL,KAAK;KACL,cAAc;MACZ,aAAa,gBAAgB,mBAAmB;KAClD;KACA,WAAW,MAAM;MACf,MAAM,MAAM,EAAE,OAAO;MACrB,MAAM,wBACJ,QAAQ,MAAM,CAAC,QAAQ,KAAK,GAAG,IAC3B,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,IACnD,KAAA;MACN,aAAa,aACX,EACE,mBAAmB,wBACf,aAAa,oBACb,IACN,GACA,qBACF;KACF;KACA,KAAK;KACL,OAAO,qBAAqB;IAC7B,CAAA,CAEA;;EACM,CAAA,CAEZ;;AAET"}

package/dist/es/components/Poll/PollCreationDialog/NameField.mjs

@@ -0,0 +1,41 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { TextInput } from "../../Form/TextInput.mjs";
+import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Poll/PollCreationDialog/NameField.tsx
+var pollComposerStateSelector = (state) => ({
+	error: state.errors.name,
+	name: state.data.name
+});
+var NameField = () => {
+	const { t } = useTranslationContext();
+	const { pollComposer } = useMessageComposerController();
+	const { error, name } = useStateStore(pollComposer.state, pollComposerStateSelector);
+	const knownValidationErrors = useMemo(() => ({ "Question is required": t("Question is required") }), [t]);
+	return /* @__PURE__ */ jsx(TextInput, {
+		className: "str-chat__form__input-field__value",
+		"data-autofocus": true,
+		error: !!error,
+		errorMessage: error ? /* @__PURE__ */ jsx("span", {
+			"data-testid": "poll-name-input-field-error",
+			children: knownValidationErrors[error] ?? t("Error")
+		}) : void 0,
+		id: "name",
+		label: t("Question"),
+		onBlur: () => {
+			pollComposer.handleFieldBlur("name");
+		},
+		onChange: (e) => {
+			pollComposer.updateFields({ name: e.target.value });
+		},
+		placeholder: t("Ask a question"),
+		type: "text",
+		value: name
+	});
+};
+//#endregion
+export { NameField };
+
+//# sourceMappingURL=NameField.mjs.map

package/dist/es/components/Poll/PollCreationDialog/NameField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NameField.mjs","names":[],"sources":["../../../../../src/components/Poll/PollCreationDialog/NameField.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { TextInput } from '../../Form';\nimport { useTranslationContext } from '../../../context';\nimport { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController';\nimport { useStateStore } from '../../../store';\nimport type { PollComposerState } from 'stream-chat';\n\nconst pollComposerStateSelector = (state: PollComposerState) => ({\n  error: state.errors.name,\n  name: state.data.name,\n});\n\nexport const NameField = () => {\n  const { t } = useTranslationContext();\n  const { pollComposer } = useMessageComposerController();\n  const { error, name } = useStateStore(pollComposer.state, pollComposerStateSelector);\n  const knownValidationErrors = useMemo<Record<string, string>>(\n    () => ({\n      'Question is required': t('Question is required'),\n    }),\n    [t],\n  );\n\n  return (\n    // `data-autofocus` marks this as the dialog's default field. Initial focus stays on the dialog\n    // surface so the SR announces the dialog identity/description; pressing Enter on the surface\n    // then moves focus here (see GlobalModal's keydown handling) so the user can start typing.\n    <TextInput\n      className='str-chat__form__input-field__value'\n      data-autofocus\n      error={!!error}\n      errorMessage={\n        error ? (\n          <span data-testid='poll-name-input-field-error'>\n            {knownValidationErrors[error] ?? t('Error')}\n          </span>\n        ) : undefined\n      }\n      id='name'\n      label={t('Question')}\n      onBlur={() => {\n        pollComposer.handleFieldBlur('name');\n      }}\n      onChange={(e) => {\n        pollComposer.updateFields({ name: e.target.value });\n      }}\n      placeholder={t('Ask a question')}\n      type='text'\n      value={name}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAM,6BAA6B,WAA8B;CAC/D,OAAO,MAAM,OAAO;CACpB,MAAM,MAAM,KAAK;AACnB;AAEA,IAAa,kBAAkB;CAC7B,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,iBAAiB,6BAA6B;CACtD,MAAM,EAAE,OAAO,SAAS,cAAc,aAAa,OAAO,yBAAyB;CACnF,MAAM,wBAAwB,eACrB,EACL,wBAAwB,EAAE,sBAAsB,EAClD,IACA,CAAC,CAAC,CACJ;CAEA,OAIE,oBAAC,WAAD;EACE,WAAU;EACV,kBAAA;EACA,OAAO,CAAC,CAAC;EACT,cACE,QACE,oBAAC,QAAD;GAAM,eAAY;aACf,sBAAsB,UAAU,EAAE,OAAO;EACtC,CAAA,IACJ,KAAA;EAEN,IAAG;EACH,OAAO,EAAE,UAAU;EACnB,cAAc;GACZ,aAAa,gBAAgB,MAAM;EACrC;EACA,WAAW,MAAM;GACf,aAAa,aAAa,EAAE,MAAM,EAAE,OAAO,MAAM,CAAC;EACpD;EACA,aAAa,EAAE,gBAAgB;EAC/B,MAAK;EACL,OAAO;CACR,CAAA;AAEL"}