npm - stream-chat-react - Versions diffs - 14.12.0 → 15.0.0-rc.1 - Mend

stream-chat-react 14.12.0 → 15.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1428) hide show

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

@@ -1,11 +1,11 @@
-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 { useChatContext } from "../../../context/ChatContext.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 { useModalContext } from "../../../context/ModalContext.mjs";
+import { usePollContext } from "../../../context/PollContext.mjs";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Poll/PollActions/SuggestPollOptionPrompt.tsx
@@ -20,13 +20,16 @@ var SuggestPollOptionPrompt = () => {
 	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"));
+		if (!trimmed) return new Error(t("poll.addCommentPrompt.fieldCannotEmptyContain.label", "This field cannot be empty or contain only spaces"));
+		if (options.find((option) => option.text === trimmed)) return new Error(t("poll.suggestPollOption.optionAlreadyExists.label", "Option already exists"));
 	} }), [t, options]);
 	const { fieldErrors, handleSubmit, setFieldValue, value } = useFormState({
 		initialValue,
 		onSubmit: useCallback(async (formValue) => {
-			await client.createPollOption(poll.id, { text: formValue.optionText });
+			await client.createPollOption({
+				poll_id: poll.id,
+				text: formValue.optionText
+			});
 			close();
 		}, [
 			client,
@@ -43,19 +46,19 @@ var SuggestPollOptionPrompt = () => {
 		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")
+			description: t("poll.suggestPollOption.description", "Suggest a new option to add to this poll"),
+			title: t("poll.actions.suggestOption.label", "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"),
+				"aria-label": t("poll.actions.suggestOption.label", "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"),
+				placeholder: t("poll.pollOptionSuggestion.placeholder", "Enter a new option"),
 				ref: setInput,
 				required: true,
 				type: "text",
@@ -63,12 +66,12 @@ var SuggestPollOptionPrompt = () => {
 			}) }), /* @__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")
+				children: t("common.cancel.label", "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")
+				children: t("common.send.label", "Send")
 			})] }) })]
 		})]
 	});

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

	@@ -1 +1 @@
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"}
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 { PollOptionResponseData, PollState } from 'stream-chat';\nimport { Prompt } from '../../Dialog';\nimport { TextInput } from '../../Form';\nimport { useFormState } from '../../Form/hooks';\n\ntype PollStateSelectorReturnValue = { options: PollOptionResponseData[] };\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(\n t(\n 'poll.addCommentPrompt.fieldCannotEmptyContain.label',\n 'This field cannot be empty or contain only spaces',\n ),\n );\n }\n const existingOption = options.find((option) => option.text === trimmed);\n if (existingOption) {\n return new Error(\n t(\n 'poll.suggestPollOption.optionAlreadyExists.label',\n 'Option already exists',\n ),\n );\n }\n return undefined;\n },\n }),\n [t, options],\n );\n\n const onSubmit = useCallback(\n async (formValue: { optionText: string }) => {\n await client.createPollOption({\n poll_id: 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(\n 'poll.suggestPollOption.description',\n 'Suggest a new option to add to this poll',\n )}\n title={t('poll.actions.suggestOption.label', 'Suggest an Option')}\n />\n <form autoComplete='off' onSubmit={handleSubmit}>\n <Prompt.Body>\n <TextInput\n aria-label={t('poll.actions.suggestOption.label', '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('poll.pollOptionSuggestion.placeholder', 'Enter a new option')}\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('common.cancel.label', '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('common.send.label', '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,MACT,EACE,uDACA,mDACF,CACF;EAGF,IADuB,QAAQ,MAAM,WAAW,OAAO,SAAS,OAC5D,GACF,OAAO,IAAI,MACT,EACE,oDACA,uBACF,CACF;CAGJ,EACF,IACA,CAAC,GAAG,OAAO,CACb;CAaA,MAAM,EAAE,aAAa,cAAc,eAAe,UAAU,aAEzD;EACD;EACA,UAfe,YACf,OAAO,cAAsC;GAC3C,MAAM,OAAO,iBAAiB;IAC5B,SAAS,KAAK;IACd,MAAM,UAAU;GAClB,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,EACX,sCACA,0CACF;GACA,OAAO,EAAE,oCAAoC,mBAAmB;EACjE,CAAA,GACD,qBAAC,QAAD;GAAM,cAAa;GAAM,UAAU;aAAnC,CACE,oBAAC,OAAO,MAAR,EAAA,UACE,oBAAC,WAAD;IACE,cAAY,EAAE,oCAAoC,mBAAmB;IACrE,OAAO,CAAC,CAAC,YAAY;IACrB,cAAc,YAAY,YAAY;IACtC,IAAG;IACH,MAAK;IACL,WAAW,MAAM,cAAc,cAAc,EAAE,OAAO,KAAK;IAC3D,aAAa,EAAE,yCAAyC,oBAAoB;IAC5E,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,uBAAuB,QAAQ;GACE,CAAA,GACtC,oBAAC,OAAO,6BAAR;IACE,WAAU;IACV,UAAU,OAAO,KAAK,WAAW,CAAC,CAAC,SAAS,KAAK;IACjD,MAAK;cAEJ,EAAE,qBAAqB,MAAM;GACI,CAAA,CACf,EAAA,CAAA,EACV,CAAA,CACX;IACK;;AAEjB"}

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

@@ -1,9 +1,9 @@
-import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
-import { usePollContext } from "../../context/PollContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { PollHeader } from "./PollHeader.mjs";
 import { PollActions } from "./PollActions/PollActions.mjs";
 import { PollOptionList } from "./PollOptionList.mjs";
+import { usePollContext } from "../../context/PollContext.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";

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

@@ -1,9 +1,10 @@
 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 { NumericInput } from "../../Form/NumericInput.mjs";
+import { SwitchField, SwitchFieldLabel } from "../../Form/SwitchField.mjs";
 import { useMemo, useRef, useState } from "react";
+import { POLL_COMPOSER_VALIDATION_CODE, pollComposerValidationError } from "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Poll/PollCreationDialog/MultipleAnswersField.tsx
 var pollComposerStateSelector = (state) => ({
@@ -18,24 +19,25 @@ var MultipleAnswersField = () => {
 	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")
+		[POLL_COMPOSER_VALIDATION_CODE.maxVotesUniqueVoteEnforced]: t("poll.multipleAnswersField.enforceUniqueVoteEnabled.label", "Enforce unique vote is enabled"),
+		[POLL_COMPOSER_VALIDATION_CODE.maxVotesNotNumeric]: t("poll.multipleAnswersField.onlyNumbersAllowed.label", "Only numbers are allowed"),
+		[POLL_COMPOSER_VALIDATION_CODE.maxVotesOutOfRange]: t("poll.multipleAnswersField.typeNumber210.label", "Type a number from 2 to 10")
 	}), [t]);
 	const multipleVotesEnabled = !enforce_unique_vote;
-	const errorText = error && knownValidationErrors[error];
+	const errorText = error && (knownValidationErrors[error.code] ?? error.message);
 	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"),
+			description: t("poll.multipleAnswersField.selectMoreThanOne.description", "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")
+			title: t("poll.multipleAnswersField.multipleVotes.title", "Multiple Votes")
 		}), multipleVotesEnabled && /* @__PURE__ */ jsx(SwitchField, {
 			"aria-labelledby": voteLimitSwitchLabelId,
 			checked: voteLimitEnabled,
@@ -54,12 +56,12 @@ var MultipleAnswersField = () => {
 				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"),
+					description: t("poll.multipleAnswersField.chooseBetween210.description", "Choose Between 2 to 10 Options"),
 					htmlFor: voteLimitSwitchId,
 					id: voteLimitSwitchLabelId,
-					title: t("Limit votes per person")
+					title: t("poll.multipleAnswersField.limitVotesPerPerson.title", "Limit Votes per Person")
 				}), voteLimitEnabled && /* @__PURE__ */ jsx(NumericInput, {
-					"aria-label": t("Maximum votes per person"),
+					"aria-label": t("poll.multipleAnswersField.maximumVotesPerPerson.ariaLabel", "Maximum votes per person"),
 					id: "max_votes_allowed",
 					max: 10,
 					min: 2,
@@ -68,7 +70,7 @@ var MultipleAnswersField = () => {
 					},
 					onChange: (e) => {
 						const raw = e.target.value;
-						const nativeFieldValidation = raw !== "" && !/^\d+$/.test(raw) ? { max_votes_allowed: t("Only numbers are allowed") } : void 0;
+						const nativeFieldValidation = raw !== "" && !/^\d+$/.test(raw) ? { max_votes_allowed: pollComposerValidationError(POLL_COMPOSER_VALIDATION_CODE.maxVotesNotNumeric) } : void 0;
 						pollComposer.updateFields({ max_votes_allowed: nativeFieldValidation ? pollComposer.max_votes_allowed : raw }, nativeFieldValidation);
 					},
 					ref: maxVotesInputRef,

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"MultipleAnswersField.mjs","names":[],"sources":["../../../../../src/components/Poll/PollCreationDialog/MultipleAnswersField.tsx"],"sourcesContent":["import { POLL_COMPOSER_VALIDATION_CODE, pollComposerValidationError } from 'stream-chat';\nimport type { PollComposerState, PollComposerValidationCode } from 'stream-chat';\nimport 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';\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<\n Partial<Record<PollComposerValidationCode, string>>\n >(\n () => ({\n [POLL_COMPOSER_VALIDATION_CODE.maxVotesUniqueVoteEnforced]: t(\n 'poll.multipleAnswersField.enforceUniqueVoteEnabled.label',\n 'Enforce unique vote is enabled',\n ),\n [POLL_COMPOSER_VALIDATION_CODE.maxVotesNotNumeric]: t(\n 'poll.multipleAnswersField.onlyNumbersAllowed.label',\n 'Only numbers are allowed',\n ),\n [POLL_COMPOSER_VALIDATION_CODE.maxVotesOutOfRange]: t(\n 'poll.multipleAnswersField.typeNumber210.label',\n 'Type a number from 2 to 10',\n ),\n }),\n [t],\n );\n\n const multipleVotesEnabled = !enforce_unique_vote;\n const errorText = error && (knownValidationErrors[error.code] ?? error.message);\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(\n 'poll.multipleAnswersField.selectMoreThanOne.description',\n 'Select More Than One Option',\n )}\n id='enforce_unique_vote'\n onChange={(e) => {\n setVoteLimitEnabled(false);\n pollComposer.updateFields({ enforce_unique_vote: !e.target.checked });\n }}\n title={t('poll.multipleAnswersField.multipleVotes.title', '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(\n 'poll.multipleAnswersField.chooseBetween210.description',\n 'Choose Between 2 to 10 Options',\n )}\n htmlFor={voteLimitSwitchId}\n id={voteLimitSwitchLabelId}\n title={t(\n 'poll.multipleAnswersField.limitVotesPerPerson.title',\n 'Limit Votes per Person',\n )}\n />\n {voteLimitEnabled && (\n <NumericInput\n aria-label={t(\n 'poll.multipleAnswersField.maximumVotesPerPerson.ariaLabel',\n 'Maximum votes per person',\n )}\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 ? {\n // Injected field errors take the same shape core produces, so the render\n // path is identical whether the error came from here or from the composer.\n max_votes_allowed: pollComposerValidationError(\n POLL_COMPOSER_VALIDATION_CODE.maxVotesNotNumeric,\n ),\n }\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":";;;;;;;;;AASA,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,eAGrB;GACJ,8BAA8B,6BAA6B,EAC1D,4DACA,gCACF;GACC,8BAA8B,qBAAqB,EAClD,sDACA,0BACF;GACC,8BAA8B,qBAAqB,EAClD,iDACA,4BACF;CACF,IACA,CAAC,CAAC,CACJ;CAEA,MAAM,uBAAuB,CAAC;CAC9B,MAAM,YAAY,UAAU,sBAAsB,MAAM,SAAS,MAAM;CACvE,MAAM,oBAAoB;CAC1B,MAAM,yBAAyB,GAAG,kBAAkB;CAEpD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,aAAD;GACE,SAAS;GACT,aAAa,EACX,2DACA,6BACF;GACA,IAAG;GACH,WAAW,MAAM;IACf,oBAAoB,KAAK;IACzB,aAAa,aAAa,EAAE,qBAAqB,CAAC,EAAE,OAAO,QAAQ,CAAC;GACtE;GACA,OAAO,EAAE,iDAAiD,gBAAgB;EAC3E,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,EACX,0DACA,gCACF;KACA,SAAS;KACT,IAAI;KACJ,OAAO,EACL,uDACA,wBACF;IACD,CAAA,GACA,oBACC,oBAAC,cAAD;KACE,cAAY,EACV,6DACA,0BACF;KACA,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,EAGE,mBAAmB,4BACjB,8BAA8B,kBAChC,EACF,IACA,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 CHANGED Viewed

@@ -1,8 +1,9 @@
 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 { TextInput } from "../../Form/TextInput.mjs";
 import { useMemo } from "react";
+import { POLL_COMPOSER_VALIDATION_CODE } from "stream-chat";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Poll/PollCreationDialog/NameField.tsx
 var pollComposerStateSelector = (state) => ({
@@ -13,24 +14,24 @@ 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]);
+	const knownValidationErrors = useMemo(() => ({ [POLL_COMPOSER_VALIDATION_CODE.nameRequired]: t("poll.nameField.questionRequired.label", "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")
+			children: knownValidationErrors[error.code] ?? error.message
 		}) : void 0,
 		id: "name",
-		label: t("Question"),
+		label: t("poll.question.question.text", "Question"),
 		onBlur: () => {
 			pollComposer.handleFieldBlur("name");
 		},
 		onChange: (e) => {
 			pollComposer.updateFields({ name: e.target.value });
 		},
-		placeholder: t("Ask a question"),
+		placeholder: t("poll.nameField.askQuestion.placeholder", "Ask a Question"),
 		type: "text",
 		value: name
 	});

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

	@@ -1 +1 @@
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"}
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 { POLL_COMPOSER_VALIDATION_CODE } from 'stream-chat';\nimport type { PollComposerState, PollComposerValidationCode } 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 // Keyed on the stable validation code rather than on the English sentence `stream-chat` produced.\n // Matching on prose meant a copy edit in the LLC silently stopped the translation from applying.\n const knownValidationErrors = useMemo<\n Partial<Record<PollComposerValidationCode, string>>\n >(\n () => ({\n [POLL_COMPOSER_VALIDATION_CODE.nameRequired]: t(\n 'poll.nameField.questionRequired.label',\n 'Question is required',\n ),\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.code] ?? error.message}\n </span>\n ) : undefined\n }\n id='name'\n label={t('poll.question.question.text', 'Question')}\n onBlur={() => {\n pollComposer.handleFieldBlur('name');\n }}\n onChange={(e) => {\n pollComposer.updateFields({ name: e.target.value });\n }}\n placeholder={t('poll.nameField.askQuestion.placeholder', 'Ask a Question')}\n type='text'\n value={name}\n />\n );\n};\n"],"mappings":";;;;;;;;AAQA,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;CAGnF,MAAM,wBAAwB,eAGrB,GACJ,8BAA8B,eAAe,EAC5C,yCACA,sBACF,EACF,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,MAAM,SAAS,MAAM;EACxC,CAAA,IACJ,KAAA;EAEN,IAAG;EACH,OAAO,EAAE,+BAA+B,UAAU;EAClD,cAAc;GACZ,aAAa,gBAAgB,MAAM;EACrC;EACA,WAAW,MAAM;GACf,aAAa,aAAa,EAAE,MAAM,EAAE,OAAO,MAAM,CAAC;EACpD;EACA,aAAa,EAAE,0CAA0C,gBAAgB;EACzE,MAAK;EACL,OAAO;CACR,CAAA;AAEL"}

package/dist/es/components/Poll/PollCreationDialog/OptionFieldSet.mjs CHANGED Viewed

@@ -1,17 +1,18 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
 import { useAriaLiveAnnouncer } from "../../Accessibility/useAriaLiveAnnouncer.mjs";
 import { VisuallyHidden } from "../../VisuallyHidden/VisuallyHidden.mjs";
 import { useSettledAnnouncement } from "../../Accessibility/scheduling/useSettledAnnouncement.mjs";
-import { useStableId } from "../../UtilityComponents/useStableId.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { useInteractionAnnouncements } from "../../Accessibility/hooks/useInteractionAnnouncements.mjs";
+import { useStableId } from "../../UtilityComponents/useStableId.mjs";
+import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
 import { TextInput } from "../../Form/TextInput.mjs";
 import { TextInputFieldSet } from "../../Form/TextInputFieldSet.mjs";
 import { PollOptionReorderHandle } from "./PollOptionReorderHandle.mjs";
-import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { POLL_COMPOSER_VALIDATION_CODE } from "stream-chat";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
@@ -22,7 +23,7 @@ var pollComposerStateSelector = (state) => ({
 var OptionFieldSet = () => {
 	const { pollComposer } = useMessageComposerController();
 	const { errors, options } = useStateStore(pollComposer.state, pollComposerStateSelector);
-	const { t } = useTranslationContext("OptionFieldSet");
+	const { t } = useTranslationContext();
 	const announce = useAriaLiveAnnouncer();
 	const { announceInteraction } = useInteractionAnnouncements();
 	const optionInputRefs = useRef([]);
@@ -30,10 +31,10 @@ var OptionFieldSet = () => {
 	const pendingFocusIndexRef = useRef(null);
 	const [activeOptionId, setActiveOptionId] = useState(null);
 	const knownValidationErrors = useMemo(() => ({
-		"Option already exists": t("Option already exists"),
-		"Option is empty": t("Option is empty")
+		[POLL_COMPOSER_VALIDATION_CODE.optionDuplicate]: t("poll.suggestPollOption.optionAlreadyExists.label", "Option already exists"),
+		[POLL_COMPOSER_VALIDATION_CODE.optionEmpty]: t("poll.optionFieldSet.optionEmpty.label", "Option is empty")
 	}), [t]);
-	const labelForOption = useCallback((option, position) => option.text.trim() || t("aria/Option {{ position }}", { position }), [t]);
+	const labelForOption = useCallback((option, position) => option.text.trim() || t("poll.optionFieldSet.option.ariaLabel", "Option {{ position }}", { position }), [t]);
 	const registerHandleRef = useCallback((index, element) => {
 		handleRefs.current[index] = element;
 	}, []);
@@ -110,12 +111,12 @@ var OptionFieldSet = () => {
 	const optionsHintId = useStableId();
 	useSettledAnnouncement(announce, {
 		active: draggable,
-		message: t("aria/Options can now be reordered and removed."),
+		message: t("poll.optionFieldSet.optionsCanNowReordered.ariaLabel", "Options can now be reordered and removed."),
 		settleKey: options
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TextInputFieldSet, {
 		draggable,
-		label: t("Options"),
+		label: t("poll.optionFieldSet.options.label", "Options"),
 		onSetNewOrder,
 		children: options.map((option, i) => {
 			const error = errors?.[option.id];
@@ -142,7 +143,7 @@ var OptionFieldSet = () => {
 					}) : void 0,
 					message: error ? /* @__PURE__ */ jsx("span", {
 						"data-testid": "poll-option-input-field-error",
-						children: knownValidationErrors[error] ?? t("Error")
+						children: knownValidationErrors[error.code] ?? error.message
 					}) : void 0,
 					onBlur: () => {
 						pollComposer.handleFieldBlur("options");
@@ -157,12 +158,12 @@ var OptionFieldSet = () => {
 						const isFocusedLastOptionField = i === options.length - 1;
 						if (event.key === "Enter" && !isFocusedLastOptionField) optionInputRefs.current[i + 1]?.focus();
 					},
-					placeholder: t("Add an option"),
+					placeholder: t("poll.optionFieldSet.addOption.placeholder", "Add an Option"),
 					ref: (element) => {
 						optionInputRefs.current[i] = element;
 					},
 					trailing: draggable ? /* @__PURE__ */ jsx(RemoveOptionButton, {
-						"aria-label": t("aria/Remove option: {{ option }}", { option: labelForOption(option, i + 1) }),
+						"aria-label": t("poll.optionFieldSet.removeOption.ariaLabel", "Remove option: {{ option }}", { option: labelForOption(option, i + 1) }),
 						onClick: () => clearOption(option.id)
 					}) : void 0,
 					type: "text",
@@ -172,7 +173,7 @@ var OptionFieldSet = () => {
 		})
 	}), draggable && /* @__PURE__ */ jsx(VisuallyHidden, {
 		id: optionsHintId,
-		children: t("aria/This option can be reordered and removed.")
+		children: t("poll.optionFieldSet.optionCanReorderedRemoved.ariaLabel", "This option can be reordered and removed.")
 	})] });
 };
 var RemoveOptionButton = ({ className, ...props }) => {

package/dist/es/components/Poll/PollCreationDialog/OptionFieldSet.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OptionFieldSet.mjs","names":[],"sources":["../../../../../src/components/Poll/PollCreationDialog/OptionFieldSet.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { TextInput } from '../../Form/TextInput';\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\nimport { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController';\nimport { useStateStore } from '../../../store';\nimport type { PollComposerOption, PollComposerState } from 'stream-chat';\nimport { Button, type ButtonProps } from '../../Button';\nimport { TextInputFieldSet } from '../../Form/TextInputFieldSet';\nimport { VisuallyHidden } from '../../VisuallyHidden';\nimport { useStableId } from '../../UtilityComponents/useStableId';\nimport {\n useAriaLiveAnnouncer,\n useInteractionAnnouncements,\n useSettledAnnouncement,\n} from '../../Accessibility';\nimport { PollOptionReorderHandle } from './PollOptionReorderHandle';\n\nconst pollComposerStateSelector = (state: PollComposerState) => ({\n errors: state.errors.options,\n options: state.data.options,\n});\n\n// Option pickup/drop/removed confirmations go through the shared {@link useInteractionAnnouncements}\n// registry (poll.optionPickedUp / poll.optionDropped / poll.optionRemoved), while the one-shot\n// \"controls are now available\" cue uses {@link useSettledAnnouncement}. Both ultimately deliver via\n// `useAriaLiveAnnouncer`, which routes to the modal {@link AriaLiveOutlet} the poll-creation dialog\n// mounts (the Modal/Dialog system renders an outlet inside the active `aria-modal` subtree). Screen\n// readers suppress live regions outside an active aria-modal container, so the modal outlet keeps\n// these announcements in scope.\nexport const OptionFieldSet = () => {\n const { pollComposer } = useMessageComposerController();\n const { errors, options } = useStateStore(\n pollComposer.state,\n pollComposerStateSelector,\n );\n const { t } = useTranslationContext('OptionFieldSet');\n const announce = useAriaLiveAnnouncer();\n const { announceInteraction } = useInteractionAnnouncements();\n const optionInputRefs = useRef<Array<HTMLInputElement \| null>>([]);\n const handleRefs = useRef<Array<HTMLButtonElement \| null>>([]);\n const pendingFocusIndexRef = useRef<number \| null>(null);\n const [activeOptionId, setActiveOptionId] = useState<string \| null>(null);\n\n const knownValidationErrors = useMemo<Record<string, string>>(\n () => ({\n 'Option already exists': t('Option already exists'),\n 'Option is empty': t('Option is empty'),\n }),\n [t],\n );\n\n const labelForOption = useCallback(\n (option: PollComposerOption, position: number) =>\n option.text.trim() \|\| t('aria/Option {{ position }}', { position }),\n [t],\n );\n\n const registerHandleRef = useCallback(\n (index: number, element: HTMLButtonElement \| null) => {\n handleRefs.current[index] = element;\n },\n [],\n );\n\n const onSetNewOrder = useCallback(\n (newOrder: number[]) => {\n const prevOptions = pollComposer.options;\n pollComposer.updateFields({ options: newOrder.map((index) => prevOptions[index]) });\n },\n [pollComposer],\n );\n\n const clearOption = useCallback(\n (removedOptionId: string) => {\n const nextOptions = [...pollComposer.options];\n if (!nextOptions.length) return;\n\n const removedOptionIndex = pollComposer.options.findIndex(\n (option) => option.id === removedOptionId,\n );\n\n if (removedOptionIndex === -1) return;\n const [removedOption] = nextOptions.splice(removedOptionIndex, 1);\n\n pollComposer.updateFields({\n options: nextOptions,\n });\n\n // Confirm the removal, naming the option by its text (or its positional fallback). The\n // registry maps this to a polite message so it queues behind the focus move to the next field\n // (below) instead of interrupting it.\n announceInteraction('poll.optionRemoved', {\n option: labelForOption(removedOption, removedOptionIndex + 1),\n });\n\n if (activeOptionId === removedOptionId) {\n setActiveOptionId(null);\n }\n\n if (!nextOptions.length) return;\n const nextFocusedOptionIndex = Math.min(removedOptionIndex, nextOptions.length - 1);\n requestAnimationFrame(() => {\n optionInputRefs.current[nextFocusedOptionIndex]?.focus();\n });\n },\n [activeOptionId, announceInteraction, labelForOption, pollComposer],\n );\n\n const handleActivate = useCallback(\n (optionId: string) => {\n const idx = pollComposer.options.findIndex((option) => option.id === optionId);\n if (idx === -1) return;\n const option = pollComposer.options[idx];\n setActiveOptionId(optionId);\n announceInteraction('poll.optionPickedUp', {\n option: labelForOption(option, idx + 1),\n });\n },\n [announceInteraction, labelForOption, pollComposer],\n );\n\n const handleDeselect = useCallback(() => {\n if (!activeOptionId) return;\n const idx = pollComposer.options.findIndex((option) => option.id === activeOptionId);\n const option = idx === -1 ? null : pollComposer.options[idx];\n\n setActiveOptionId(null);\n\n if (!option) return;\n\n announceInteraction('poll.optionDropped', {\n option: labelForOption(option, idx + 1),\n position: idx + 1,\n });\n }, [activeOptionId, announceInteraction, labelForOption, pollComposer]);\n\n const handleMove = useCallback(\n (direction: -1 \| 1) => {\n if (!activeOptionId) return;\n const currentIndex = pollComposer.options.findIndex(\n (option) => option.id === activeOptionId,\n );\n if (currentIndex === -1) return;\n const targetIndex = currentIndex + direction;\n if (targetIndex < 0 \|\| targetIndex >= pollComposer.options.length) return;\n\n const nextOptions = [...pollComposer.options];\n const [moved] = nextOptions.splice(currentIndex, 1);\n nextOptions.splice(targetIndex, 0, moved);\n pollComposer.updateFields({ options: nextOptions });\n\n pendingFocusIndexRef.current = targetIndex;\n // No live-region announcement here on purpose. Once the focus moves to\n // the active option's new handle (in the layout effect below), VoiceOver\n // will speak that handle's aria-label, which already encodes the option\n // text and the new position (\"Reorder 'option B' at position 1 of 3\").\n // Emitting an additional polite \"moved to position\" message would just\n // duplicate that information.\n },\n [activeOptionId, pollComposer],\n );\n\n useLayoutEffect(() => {\n if (pendingFocusIndexRef.current === null) return;\n const idx = pendingFocusIndexRef.current;\n pendingFocusIndexRef.current = null;\n handleRefs.current[idx]?.focus();\n }, [options]);\n\n const draggable = options.length > 1;\n\n // The reorder handle and remove button only exist once there are 2+ options. Conveying that uses\n // two complementary mechanisms:\n //\n // 1. A persistent affordance: each option input's `aria-describedby` points at the hidden text\n // below, so the description is part of the field's accessible name/description (read on focus,\n // and again whenever the screen reader re-reads the field). Correct in the a11y tree and read\n // by screen readers that voice descriptions (e.g. NVDA).\n // 2. A spoken cue: VoiceOver does NOT reliably speak `aria-describedby` (\"hints\" are often delayed\n // or disabled), so additionally announce availability once via a polite live region. Announcing\n // it at the exact 1→2 moment fails — the screen reader re-reads the focused option field when\n // the list mutates, and that read-out supersedes any live message at any priority. So the cue\n // is deferred until the option list goes idle (keyed on `options`), landing in a calm moment.\n // See `useSettledAnnouncement`.\n const optionsHintId = useStableId();\n\n useSettledAnnouncement(announce, {\n active: draggable,\n message: t('aria/Options can now be reordered and removed.'),\n settleKey: options,\n });\n\n return (\n <>\n <TextInputFieldSet\n draggable={draggable}\n label={t('Options')}\n onSetNewOrder={onSetNewOrder}\n >\n {options.map((option, i) => {\n const error = errors?.[option.id];\n return (\n <div\n className={clsx('str-chat__form__input-field', {\n 'str-chat__form__input-field--draggable': draggable,\n 'str-chat__form__input-field--has-error': error,\n })}\n key={`option-row-${i}`}\n >\n <TextInput\n aria-describedby={draggable ? optionsHintId : undefined}\n className='str-chat__form__input-field__value'\n error={!!error}\n fieldMessagePlacement='inside'\n id={option.id}\n leading={\n draggable ? (\n <PollOptionReorderHandle\n index={i}\n isActive={option.id === activeOptionId}\n onActivate={handleActivate}\n onDeselect={handleDeselect}\n onMove={handleMove}\n option={option}\n registerRef={registerHandleRef}\n totalOptionCount={options.length}\n />\n ) : undefined\n }\n message={\n error ? (\n <span data-testid='poll-option-input-field-error'>\n {knownValidationErrors[error] ?? t('Error')}\n </span>\n ) : undefined\n }\n onBlur={() => {\n pollComposer.handleFieldBlur('options');\n }}\n onChange={(e) => {\n pollComposer.updateFields({\n options: { index: i, text: e.target.value },\n });\n }}\n onKeyUp={(event) => {\n const isFocusedLastOptionField = i === options.length - 1;\n if (event.key === 'Enter' && !isFocusedLastOptionField) {\n optionInputRefs.current[i + 1]?.focus();\n }\n }}\n placeholder={t('Add an option')}\n ref={(element) => {\n optionInputRefs.current[i] = element;\n }}\n trailing={\n draggable ? (\n <RemoveOptionButton\n // Name each button by its option so SR users can tell the rows apart.\n aria-label={t('aria/Remove option: {{ option }}', {\n option: labelForOption(option, i + 1),\n })}\n onClick={() => clearOption(option.id)}\n />\n ) : undefined\n }\n type='text'\n value={option.text}\n />\n </div>\n );\n })}\n </TextInputFieldSet>\n {draggable && (\n <VisuallyHidden id={optionsHintId}>\n {t('aria/This option can be reordered and removed.')}\n </VisuallyHidden>\n )}\n </>\n );\n};\n\nconst RemoveOptionButton = ({ className, ...props }: ButtonProps) => {\n const { IconMinusCircle } = useComponentContextIcons();\n return (\n <Button\n appearance='ghost'\n circular\n className={clsx('str-chat__form__remove-option-button', className)}\n size='xs'\n variant='secondary'\n {...props}\n >\n <IconMinusCircle />\n </Button>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"OptionFieldSet.mjs","names":[],"sources":["../../../../../src/components/Poll/PollCreationDialog/OptionFieldSet.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { TextInput } from '../../Form/TextInput';\nimport { useTranslationContext } from '../../../context';\nimport { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController';\nimport { useStateStore } from '../../../store';\nimport { POLL_COMPOSER_VALIDATION_CODE } from 'stream-chat';\nimport type {\n PollComposerOption,\n PollComposerState,\n PollComposerValidationCode,\n} from 'stream-chat';\nimport { useComponentContextIcons } from '../../../context';\nimport { Button, type ButtonProps } from '../../Button';\nimport { TextInputFieldSet } from '../../Form/TextInputFieldSet';\nimport { VisuallyHidden } from '../../VisuallyHidden';\nimport { useStableId } from '../../UtilityComponents/useStableId';\nimport {\n useAriaLiveAnnouncer,\n useInteractionAnnouncements,\n useSettledAnnouncement,\n} from '../../Accessibility';\nimport { PollOptionReorderHandle } from './PollOptionReorderHandle';\n\nconst pollComposerStateSelector = (state: PollComposerState) => ({\n errors: state.errors.options,\n options: state.data.options,\n});\n\n// Option pickup/drop/removed confirmations go through the shared {@link useInteractionAnnouncements}\n// registry (poll.optionPickedUp / poll.optionDropped / poll.optionRemoved), while the one-shot\n// \"controls are now available\" cue uses {@link useSettledAnnouncement}. Both ultimately deliver via\n// `useAriaLiveAnnouncer`, which routes to the modal {@link AriaLiveOutlet} the poll-creation dialog\n// mounts (the Modal/Dialog system renders an outlet inside the active `aria-modal` subtree). Screen\n// readers suppress live regions outside an active aria-modal container, so the modal outlet keeps\n// these announcements in scope.\nexport const OptionFieldSet = () => {\n const { pollComposer } = useMessageComposerController();\n const { errors, options } = useStateStore(\n pollComposer.state,\n pollComposerStateSelector,\n );\n const { t } = useTranslationContext();\n const announce = useAriaLiveAnnouncer();\n const { announceInteraction } = useInteractionAnnouncements();\n const optionInputRefs = useRef<Array<HTMLInputElement \| null>>([]);\n const handleRefs = useRef<Array<HTMLButtonElement \| null>>([]);\n const pendingFocusIndexRef = useRef<number \| null>(null);\n const [activeOptionId, setActiveOptionId] = useState<string \| null>(null);\n\n const knownValidationErrors = useMemo<\n Partial<Record<PollComposerValidationCode, string>>\n >(\n () => ({\n [POLL_COMPOSER_VALIDATION_CODE.optionDuplicate]: t(\n 'poll.suggestPollOption.optionAlreadyExists.label',\n 'Option already exists',\n ),\n [POLL_COMPOSER_VALIDATION_CODE.optionEmpty]: t(\n 'poll.optionFieldSet.optionEmpty.label',\n 'Option is empty',\n ),\n }),\n [t],\n );\n\n const labelForOption = useCallback(\n (option: PollComposerOption, position: number) =>\n option.text.trim() \|\|\n t('poll.optionFieldSet.option.ariaLabel', 'Option {{ position }}', { position }),\n [t],\n );\n\n const registerHandleRef = useCallback(\n (index: number, element: HTMLButtonElement \| null) => {\n handleRefs.current[index] = element;\n },\n [],\n );\n\n const onSetNewOrder = useCallback(\n (newOrder: number[]) => {\n const prevOptions = pollComposer.options;\n pollComposer.updateFields({ options: newOrder.map((index) => prevOptions[index]) });\n },\n [pollComposer],\n );\n\n const clearOption = useCallback(\n (removedOptionId: string) => {\n const nextOptions = [...pollComposer.options];\n if (!nextOptions.length) return;\n\n const removedOptionIndex = pollComposer.options.findIndex(\n (option) => option.id === removedOptionId,\n );\n\n if (removedOptionIndex === -1) return;\n const [removedOption] = nextOptions.splice(removedOptionIndex, 1);\n\n pollComposer.updateFields({\n options: nextOptions,\n });\n\n // Confirm the removal, naming the option by its text (or its positional fallback). The\n // registry maps this to a polite message so it queues behind the focus move to the next field\n // (below) instead of interrupting it.\n announceInteraction('poll.optionRemoved', {\n option: labelForOption(removedOption, removedOptionIndex + 1),\n });\n\n if (activeOptionId === removedOptionId) {\n setActiveOptionId(null);\n }\n\n if (!nextOptions.length) return;\n const nextFocusedOptionIndex = Math.min(removedOptionIndex, nextOptions.length - 1);\n requestAnimationFrame(() => {\n optionInputRefs.current[nextFocusedOptionIndex]?.focus();\n });\n },\n [activeOptionId, announceInteraction, labelForOption, pollComposer],\n );\n\n const handleActivate = useCallback(\n (optionId: string) => {\n const idx = pollComposer.options.findIndex((option) => option.id === optionId);\n if (idx === -1) return;\n const option = pollComposer.options[idx];\n setActiveOptionId(optionId);\n announceInteraction('poll.optionPickedUp', {\n option: labelForOption(option, idx + 1),\n });\n },\n [announceInteraction, labelForOption, pollComposer],\n );\n\n const handleDeselect = useCallback(() => {\n if (!activeOptionId) return;\n const idx = pollComposer.options.findIndex((option) => option.id === activeOptionId);\n const option = idx === -1 ? null : pollComposer.options[idx];\n\n setActiveOptionId(null);\n\n if (!option) return;\n\n announceInteraction('poll.optionDropped', {\n option: labelForOption(option, idx + 1),\n position: idx + 1,\n });\n }, [activeOptionId, announceInteraction, labelForOption, pollComposer]);\n\n const handleMove = useCallback(\n (direction: -1 \| 1) => {\n if (!activeOptionId) return;\n const currentIndex = pollComposer.options.findIndex(\n (option) => option.id === activeOptionId,\n );\n if (currentIndex === -1) return;\n const targetIndex = currentIndex + direction;\n if (targetIndex < 0 \|\| targetIndex >= pollComposer.options.length) return;\n\n const nextOptions = [...pollComposer.options];\n const [moved] = nextOptions.splice(currentIndex, 1);\n nextOptions.splice(targetIndex, 0, moved);\n pollComposer.updateFields({ options: nextOptions });\n\n pendingFocusIndexRef.current = targetIndex;\n // No live-region announcement here on purpose. Once the focus moves to\n // the active option's new handle (in the layout effect below), VoiceOver\n // will speak that handle's aria-label, which already encodes the option\n // text and the new position (\"Reorder 'option B' at position 1 of 3\").\n // Emitting an additional polite \"moved to position\" message would just\n // duplicate that information.\n },\n [activeOptionId, pollComposer],\n );\n\n useLayoutEffect(() => {\n if (pendingFocusIndexRef.current === null) return;\n const idx = pendingFocusIndexRef.current;\n pendingFocusIndexRef.current = null;\n handleRefs.current[idx]?.focus();\n }, [options]);\n\n const draggable = options.length > 1;\n\n // The reorder handle and remove button only exist once there are 2+ options. Conveying that uses\n // two complementary mechanisms:\n //\n // 1. A persistent affordance: each option input's `aria-describedby` points at the hidden text\n // below, so the description is part of the field's accessible name/description (read on focus,\n // and again whenever the screen reader re-reads the field). Correct in the a11y tree and read\n // by screen readers that voice descriptions (e.g. NVDA).\n // 2. A spoken cue: VoiceOver does NOT reliably speak `aria-describedby` (\"hints\" are often delayed\n // or disabled), so additionally announce availability once via a polite live region. Announcing\n // it at the exact 1→2 moment fails — the screen reader re-reads the focused option field when\n // the list mutates, and that read-out supersedes any live message at any priority. So the cue\n // is deferred until the option list goes idle (keyed on `options`), landing in a calm moment.\n // See `useSettledAnnouncement`.\n const optionsHintId = useStableId();\n\n useSettledAnnouncement(announce, {\n active: draggable,\n message: t(\n 'poll.optionFieldSet.optionsCanNowReordered.ariaLabel',\n 'Options can now be reordered and removed.',\n ),\n settleKey: options,\n });\n\n return (\n <>\n <TextInputFieldSet\n draggable={draggable}\n label={t('poll.optionFieldSet.options.label', 'Options')}\n onSetNewOrder={onSetNewOrder}\n >\n {options.map((option, i) => {\n const error = errors?.[option.id];\n return (\n <div\n className={clsx('str-chat__form__input-field', {\n 'str-chat__form__input-field--draggable': draggable,\n 'str-chat__form__input-field--has-error': error,\n })}\n key={`option-row-${i}`}\n >\n <TextInput\n aria-describedby={draggable ? optionsHintId : undefined}\n className='str-chat__form__input-field__value'\n error={!!error}\n fieldMessagePlacement='inside'\n id={option.id}\n leading={\n draggable ? (\n <PollOptionReorderHandle\n index={i}\n isActive={option.id === activeOptionId}\n onActivate={handleActivate}\n onDeselect={handleDeselect}\n onMove={handleMove}\n option={option}\n registerRef={registerHandleRef}\n totalOptionCount={options.length}\n />\n ) : undefined\n }\n message={\n error ? (\n <span data-testid='poll-option-input-field-error'>\n {knownValidationErrors[error.code] ?? error.message}\n </span>\n ) : undefined\n }\n onBlur={() => {\n pollComposer.handleFieldBlur('options');\n }}\n onChange={(e) => {\n pollComposer.updateFields({\n options: { index: i, text: e.target.value },\n });\n }}\n onKeyUp={(event) => {\n const isFocusedLastOptionField = i === options.length - 1;\n if (event.key === 'Enter' && !isFocusedLastOptionField) {\n optionInputRefs.current[i + 1]?.focus();\n }\n }}\n placeholder={t(\n 'poll.optionFieldSet.addOption.placeholder',\n 'Add an Option',\n )}\n ref={(element) => {\n optionInputRefs.current[i] = element;\n }}\n trailing={\n draggable ? (\n <RemoveOptionButton\n // Name each button by its option so SR users can tell the rows apart.\n aria-label={t(\n 'poll.optionFieldSet.removeOption.ariaLabel',\n 'Remove option: {{ option }}',\n {\n option: labelForOption(option, i + 1),\n },\n )}\n onClick={() => clearOption(option.id)}\n />\n ) : undefined\n }\n type='text'\n value={option.text}\n />\n </div>\n );\n })}\n </TextInputFieldSet>\n {draggable && (\n <VisuallyHidden id={optionsHintId}>\n {t(\n 'poll.optionFieldSet.optionCanReorderedRemoved.ariaLabel',\n 'This option can be reordered and removed.',\n )}\n </VisuallyHidden>\n )}\n </>\n );\n};\n\nconst RemoveOptionButton = ({ className, ...props }: ButtonProps) => {\n const { IconMinusCircle } = useComponentContextIcons();\n\n return (\n <Button\n appearance='ghost'\n circular\n className={clsx('str-chat__form__remove-option-button', className)}\n size='xs'\n variant='secondary'\n {...props}\n >\n <IconMinusCircle />\n </Button>\n );\n};\n"],"mappings":"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"}

package/dist/es/components/Poll/PollCreationDialog/PollCreationDialog.mjs CHANGED Viewed

@@ -1,16 +1,15 @@
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
-import { Prompt } from "../../Dialog/components/Prompt.mjs";
 import { useInteractionAnnouncements } from "../../Accessibility/hooks/useInteractionAnnouncements.mjs";
+import { Prompt } from "../../Dialog/components/Prompt.mjs";
+import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
 import { SwitchField } from "../../Form/SwitchField.mjs";
 import { MultipleAnswersField } from "./MultipleAnswersField.mjs";
 import { NameField } from "./NameField.mjs";
 import { OptionFieldSet } from "./OptionFieldSet.mjs";
 import { PollCreationDialogControls } from "./PollCreationDialogControls.mjs";
-import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
 import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { VotingVisibility } from "stream-chat";
 //#region src/components/Poll/PollCreationDialog/PollCreationDialog.tsx
 var pollComposerStateSelector = (state) => ({
 	allow_answers: state.data.allow_answers,
@@ -31,8 +30,8 @@ var PollCreationDialog = ({ close }) => {
 		children: [
 			/* @__PURE__ */ jsx(Prompt.Header, {
 				close,
-				description: t("Create a question, add options, and configure poll settings"),
-				title: t("Create poll")
+				description: t("common.createQuestionAddOptions.label", "Create a question, add options, and configure poll settings"),
+				title: t("poll.creationDialog.createPoll.title", "Create Poll")
 			}),
 			/* @__PURE__ */ jsx(Prompt.Body, { children: /* @__PURE__ */ jsxs("form", {
 				autoComplete: "off",
@@ -45,24 +44,24 @@ var PollCreationDialog = ({ close }) => {
 							/* @__PURE__ */ jsx(MultipleAnswersField, {}),
 							/* @__PURE__ */ jsx(SwitchField, {
 								checked: voting_visibility === "anonymous",
-								description: t("Hide who voted"),
+								description: t("poll.creationDialog.hideWhoVoted.description", "Hide Who Voted"),
 								id: "voting_visibility",
-								onChange: (e) => pollComposer.updateFields({ voting_visibility: e.target.checked ? VotingVisibility.anonymous : VotingVisibility.public }),
-								title: t("Anonymous poll")
+								onChange: (e) => pollComposer.updateFields({ voting_visibility: e.target.checked ? "anonymous" : "public" }),
+								title: t("poll.creationDialog.anonymousPoll.title", "Anonymous Poll")
 							}),
 							/* @__PURE__ */ jsx(SwitchField, {
 								checked: allow_user_suggested_options,
-								description: t("Let others add options"),
+								description: t("poll.creationDialog.letOthersAddOptions.description", "Let Others Add Options"),
 								id: "allow_user_suggested_options",
 								onChange: (e) => pollComposer.updateFields({ allow_user_suggested_options: e.target.checked }),
-								title: t("Suggest an option")
+								title: t("poll.actions.suggestOption.label", "Suggest an Option")
 							}),
 							/* @__PURE__ */ jsx(SwitchField, {
 								checked: allow_answers,
-								description: t("Allow others to add comments"),
+								description: t("poll.creationDialog.allowOthersAddComments.description", "Allow Others to Add Comments"),
 								id: "allow_answers",
 								onChange: (e) => pollComposer.updateFields({ allow_answers: e.target.checked }),
-								title: t("Add a comment")
+								title: t("poll.addCommentPrompt.addComment.label", "Add a Comment")
 							})
 						]
 					})

package/dist/es/components/Poll/PollCreationDialog/PollCreationDialog.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PollCreationDialog.mjs","names":[],"sources":["../../../../../src/components/Poll/PollCreationDialog/PollCreationDialog.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport type { PollComposerState } from 'stream-chat';\nimport { ~~VotingVisibility } from 'stream-chat';\nimport {~~ MultipleAnswersField } from './MultipleAnswersField';\nimport { NameField } from './NameField';\nimport { OptionFieldSet } from './OptionFieldSet';\nimport { PollCreationDialogControls } from './PollCreationDialogControls';\nimport { Prompt } from '../../Dialog';\nimport { SwitchField } from '../../Form/SwitchField';\nimport { useInteractionAnnouncements } from '../../Accessibility';\nimport { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController';\nimport { useTranslationContext } from '../../../context';\nimport { useStateStore } from '../../../store';\n\nexport type PollCreationDialogProps = {\n close: () => void;\n};\n\nconst pollComposerStateSelector = (state: PollComposerState) => ({\n allow_answers: state.data.allow_answers,\n allow_user_suggested_options: state.data.allow_user_suggested_options,\n voting_visibility: state.data.voting_visibility,\n});\n\nexport const PollCreationDialog = ({ close }: PollCreationDialogProps) => {\n const { t } = useTranslationContext();\n const { announceInteraction } = useInteractionAnnouncements();\n const { pollComposer } = useMessageComposerController();\n const { allow_answers, allow_user_suggested_options, voting_visibility } =\n useStateStore(pollComposer.state, pollComposerStateSelector);\n\n useEffect(() => {\n announceInteraction('poll.dialogOpened');\n }, [announceInteraction]);\n\n return (\n <Prompt.Root\n className='str-chat__poll-creation-dialog'\n data-testid='poll-creation-dialog'\n >\n <Prompt.Header\n close={close}\n description={t('Create a question, add options, and configure poll settings')}\n title={t('Create ~~poll~~')}\n />\n <Prompt.Body>\n <form autoComplete='off'>\n <NameField />\n <OptionFieldSet />\n <div className='str-chat__poll-creation-dialog__features-selectors'>\n <MultipleAnswersField />\n <SwitchField\n checked={voting_visibility === 'anonymous'}\n description={t('Hide ~~who~~ ~~voted~~')}\n id='voting_visibility'\n onChange={(e) =>\n pollComposer.updateFields({\n voting_visibility: e.target.checked\n ? ~~VotingVisibility.~~anonymous\n : ~~VotingVisibility.~~public,\n })\n }\n title={t('Anonymous ~~poll~~')}\n />\n <SwitchField\n checked={allow_user_suggested_options}\n description={t('Let ~~others~~ ~~add~~ ~~options~~')}\n id='allow_user_suggested_options'\n onChange={(e) =>\n pollComposer.updateFields({\n allow_user_suggested_options: e.target.checked,\n })\n }\n title={t('Suggest an ~~option~~')}\n />\n <SwitchField\n checked={allow_answers}\n description={t('Allow ~~others~~ to ~~add~~ ~~comments~~')}\n id='allow_answers'\n onChange={(e) =>\n pollComposer.updateFields({ allow_answers: e.target.checked })\n }\n title={t('Add a ~~comment~~')}\n />\n </div>\n </form>\n </Prompt.Body>\n <PollCreationDialogControls close={close} />\n </Prompt.Root>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;;;AAkBA~~,IAAM,6BAA6B,WAA8B;CAC/D,eAAe,MAAM,KAAK;CAC1B,8BAA8B,MAAM,KAAK;CACzC,mBAAmB,MAAM,KAAK;AAChC;AAEA,IAAa,sBAAsB,EAAE,YAAqC;CACxE,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,wBAAwB,4BAA4B;CAC5D,MAAM,EAAE,iBAAiB,6BAA6B;CACtD,MAAM,EAAE,eAAe,8BAA8B,sBACnD,cAAc,aAAa,OAAO,yBAAyB;CAE7D,gBAAgB;EACd,oBAAoB,mBAAmB;CACzC,GAAG,CAAC,mBAAmB,CAAC;CAExB,OACE,qBAAC,OAAO,MAAR;EACE,WAAU;EACV,eAAY;YAFd;GAIE,oBAAC,OAAO,QAAR;IACS;IACP,aAAa,~~EAAE~~,~~6DAA6D~~;~~IAC5E~~,OAAO,EAAE,aAAa;~~GACvB~~,CAAA;GACD,oBAAC,OAAO,MAAR,EAAA,UACE,qBAAC,QAAD;IAAM,cAAa;cAAnB;KACE,oBAAC,WAAD,CAAY,CAAA;KACZ,oBAAC,gBAAD,CAAiB,CAAA;KACjB,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,oBAAC,sBAAD,CAAuB,CAAA;OACvB,oBAAC,aAAD;QACE,SAAS,sBAAsB;QAC/B,aAAa,~~EAAE~~,~~gBAAgB~~;~~QAC/B~~,IAAG;QACH,WAAW,MACT,aAAa,aAAa,EACxB,mBAAmB,EAAE,OAAO,~~UACxB~~,~~iBAAiB~~,~~YACjB~~,~~iBAAiB,OACvB,~~CAAC;QAEH,OAAO,EAAE,gBAAgB;~~OAC1B~~,CAAA;OACD,oBAAC,aAAD;QACE,SAAS;QACT,aAAa,~~EAAE~~,~~wBAAwB~~;~~QACvC~~,IAAG;QACH,WAAW,MACT,aAAa,aAAa,EACxB,8BAA8B,EAAE,OAAO,QACzC,CAAC;QAEH,OAAO,EAAE,mBAAmB;~~OAC7B~~,CAAA;OACD,oBAAC,aAAD;QACE,SAAS;QACT,aAAa,~~EAAE~~,~~8BAA8B~~;~~QAC7C~~,IAAG;QACH,WAAW,MACT,aAAa,aAAa,EAAE,eAAe,EAAE,OAAO,QAAQ,CAAC;QAE/D,OAAO,EAAE,eAAe;~~OACzB~~,CAAA;MACE;;IACD;MACK,CAAA;GACb,oBAAC,4BAAD,EAAmC,MAAQ,CAAA;EAChC;;AAEjB"}
1	+ {"version":3,"file":"PollCreationDialog.mjs","names":[],"sources":["../../../../../src/components/Poll/PollCreationDialog/PollCreationDialog.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport type { PollComposerState } from 'stream-chat';\nimport { MultipleAnswersField } from './MultipleAnswersField';\nimport { NameField } from './NameField';\nimport { OptionFieldSet } from './OptionFieldSet';\nimport { PollCreationDialogControls } from './PollCreationDialogControls';\nimport { Prompt } from '../../Dialog';\nimport { SwitchField } from '../../Form/SwitchField';\nimport { useInteractionAnnouncements } from '../../Accessibility';\nimport { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController';\nimport { useTranslationContext } from '../../../context';\nimport { useStateStore } from '../../../store';\n\nexport type PollCreationDialogProps = {\n close: () => void;\n};\n\nconst pollComposerStateSelector = (state: PollComposerState) => ({\n allow_answers: state.data.allow_answers,\n allow_user_suggested_options: state.data.allow_user_suggested_options,\n voting_visibility: state.data.voting_visibility,\n});\n\nexport const PollCreationDialog = ({ close }: PollCreationDialogProps) => {\n const { t } = useTranslationContext();\n const { announceInteraction } = useInteractionAnnouncements();\n const { pollComposer } = useMessageComposerController();\n const { allow_answers, allow_user_suggested_options, voting_visibility } =\n useStateStore(pollComposer.state, pollComposerStateSelector);\n\n useEffect(() => {\n announceInteraction('poll.dialogOpened');\n }, [announceInteraction]);\n\n return (\n <Prompt.Root\n className='str-chat__poll-creation-dialog'\n data-testid='poll-creation-dialog'\n >\n <Prompt.Header\n close={close}\n description={t(\n 'common.createQuestionAddOptions.label',\n 'Create a question, add options, and configure poll settings',\n )}\n title={t('poll.creationDialog.createPoll.title', 'Create Poll')}\n />\n <Prompt.Body>\n <form autoComplete='off'>\n <NameField />\n <OptionFieldSet />\n <div className='str-chat__poll-creation-dialog__features-selectors'>\n <MultipleAnswersField />\n <SwitchField\n checked={voting_visibility === 'anonymous'}\n description={t(\n 'poll.creationDialog.hideWhoVoted.description',\n 'Hide Who Voted',\n )}\n id='voting_visibility'\n onChange={(e) =>\n pollComposer.updateFields({\n voting_visibility: e.target.checked ? 'anonymous' : 'public',\n })\n }\n title={t('poll.creationDialog.anonymousPoll.title', 'Anonymous Poll')}\n />\n <SwitchField\n checked={allow_user_suggested_options}\n description={t(\n 'poll.creationDialog.letOthersAddOptions.description',\n 'Let Others Add Options',\n )}\n id='allow_user_suggested_options'\n onChange={(e) =>\n pollComposer.updateFields({\n allow_user_suggested_options: e.target.checked,\n })\n }\n title={t('poll.actions.suggestOption.label', 'Suggest an Option')}\n />\n <SwitchField\n checked={allow_answers}\n description={t(\n 'poll.creationDialog.allowOthersAddComments.description',\n 'Allow Others to Add Comments',\n )}\n id='allow_answers'\n onChange={(e) =>\n pollComposer.updateFields({ allow_answers: e.target.checked })\n }\n title={t('poll.addCommentPrompt.addComment.label', 'Add a Comment')}\n />\n </div>\n </form>\n </Prompt.Body>\n <PollCreationDialogControls close={close} />\n </Prompt.Root>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAM,6BAA6B,WAA8B;CAC/D,eAAe,MAAM,KAAK;CAC1B,8BAA8B,MAAM,KAAK;CACzC,mBAAmB,MAAM,KAAK;AAChC;AAEA,IAAa,sBAAsB,EAAE,YAAqC;CACxE,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,wBAAwB,4BAA4B;CAC5D,MAAM,EAAE,iBAAiB,6BAA6B;CACtD,MAAM,EAAE,eAAe,8BAA8B,sBACnD,cAAc,aAAa,OAAO,yBAAyB;CAE7D,gBAAgB;EACd,oBAAoB,mBAAmB;CACzC,GAAG,CAAC,mBAAmB,CAAC;CAExB,OACE,qBAAC,OAAO,MAAR;EACE,WAAU;EACV,eAAY;YAFd;GAIE,oBAAC,OAAO,QAAR;IACS;IACP,aAAa,EACX,yCACA,6DACF;IACA,OAAO,EAAE,wCAAwC,aAAa;GAC/D,CAAA;GACD,oBAAC,OAAO,MAAR,EAAA,UACE,qBAAC,QAAD;IAAM,cAAa;cAAnB;KACE,oBAAC,WAAD,CAAY,CAAA;KACZ,oBAAC,gBAAD,CAAiB,CAAA;KACjB,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,oBAAC,sBAAD,CAAuB,CAAA;OACvB,oBAAC,aAAD;QACE,SAAS,sBAAsB;QAC/B,aAAa,EACX,gDACA,gBACF;QACA,IAAG;QACH,WAAW,MACT,aAAa,aAAa,EACxB,mBAAmB,EAAE,OAAO,UAAU,cAAc,SACtD,CAAC;QAEH,OAAO,EAAE,2CAA2C,gBAAgB;OACrE,CAAA;OACD,oBAAC,aAAD;QACE,SAAS;QACT,aAAa,EACX,uDACA,wBACF;QACA,IAAG;QACH,WAAW,MACT,aAAa,aAAa,EACxB,8BAA8B,EAAE,OAAO,QACzC,CAAC;QAEH,OAAO,EAAE,oCAAoC,mBAAmB;OACjE,CAAA;OACD,oBAAC,aAAD;QACE,SAAS;QACT,aAAa,EACX,0DACA,8BACF;QACA,IAAG;QACH,WAAW,MACT,aAAa,aAAa,EAAE,eAAe,EAAE,OAAO,QAAQ,CAAC;QAE/D,OAAO,EAAE,0CAA0C,eAAe;OACnE,CAAA;MACE;;IACD;MACK,CAAA;GACb,oBAAC,4BAAD,EAAmC,MAAQ,CAAA;EAChC;;AAEjB"}