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

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

@@ -0,0 +1,86 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.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) => ({
+	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(() => ({
+		[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.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("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("poll.multipleAnswersField.multipleVotes.title", "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("poll.multipleAnswersField.chooseBetween210.description", "Choose Between 2 to 10 Options"),
+					htmlFor: voteLimitSwitchId,
+					id: voteLimitSwitchLabelId,
+					title: t("poll.multipleAnswersField.limitVotesPerPerson.title", "Limit Votes per Person")
+				}), voteLimitEnabled && /* @__PURE__ */ jsx(NumericInput, {
+					"aria-label": t("poll.multipleAnswersField.maximumVotesPerPerson.ariaLabel", "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: pollComposerValidationError(POLL_COMPOSER_VALIDATION_CODE.maxVotesNotNumeric) } : 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 { 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

@@ -0,0 +1,42 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.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) => ({
+	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(() => ({ [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.code] ?? error.message
+		}) : void 0,
+		id: "name",
+		label: t("poll.question.question.text", "Question"),
+		onBlur: () => {
+			pollComposer.handleFieldBlur("name");
+		},
+		onChange: (e) => {
+			pollComposer.updateFields({ name: e.target.value });
+		},
+		placeholder: t("poll.nameField.askQuestion.placeholder", "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 { 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

@@ -0,0 +1,194 @@
+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 { 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 { 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
+var pollComposerStateSelector = (state) => ({
+	errors: state.errors.options,
+	options: state.data.options
+});
+var OptionFieldSet = () => {
+	const { pollComposer } = useMessageComposerController();
+	const { errors, options } = useStateStore(pollComposer.state, pollComposerStateSelector);
+	const { t } = useTranslationContext();
+	const announce = useAriaLiveAnnouncer();
+	const { announceInteraction } = useInteractionAnnouncements();
+	const optionInputRefs = useRef([]);
+	const handleRefs = useRef([]);
+	const pendingFocusIndexRef = useRef(null);
+	const [activeOptionId, setActiveOptionId] = useState(null);
+	const knownValidationErrors = useMemo(() => ({
+		[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("poll.optionFieldSet.option.ariaLabel", "Option {{ position }}", { position }), [t]);
+	const registerHandleRef = useCallback((index, element) => {
+		handleRefs.current[index] = element;
+	}, []);
+	const onSetNewOrder = useCallback((newOrder) => {
+		const prevOptions = pollComposer.options;
+		pollComposer.updateFields({ options: newOrder.map((index) => prevOptions[index]) });
+	}, [pollComposer]);
+	const clearOption = useCallback((removedOptionId) => {
+		const nextOptions = [...pollComposer.options];
+		if (!nextOptions.length) return;
+		const removedOptionIndex = pollComposer.options.findIndex((option) => option.id === removedOptionId);
+		if (removedOptionIndex === -1) return;
+		const [removedOption] = nextOptions.splice(removedOptionIndex, 1);
+		pollComposer.updateFields({ options: nextOptions });
+		announceInteraction("poll.optionRemoved", { option: labelForOption(removedOption, removedOptionIndex + 1) });
+		if (activeOptionId === removedOptionId) setActiveOptionId(null);
+		if (!nextOptions.length) return;
+		const nextFocusedOptionIndex = Math.min(removedOptionIndex, nextOptions.length - 1);
+		requestAnimationFrame(() => {
+			optionInputRefs.current[nextFocusedOptionIndex]?.focus();
+		});
+	}, [
+		activeOptionId,
+		announceInteraction,
+		labelForOption,
+		pollComposer
+	]);
+	const handleActivate = useCallback((optionId) => {
+		const idx = pollComposer.options.findIndex((option) => option.id === optionId);
+		if (idx === -1) return;
+		const option = pollComposer.options[idx];
+		setActiveOptionId(optionId);
+		announceInteraction("poll.optionPickedUp", { option: labelForOption(option, idx + 1) });
+	}, [
+		announceInteraction,
+		labelForOption,
+		pollComposer
+	]);
+	const handleDeselect = useCallback(() => {
+		if (!activeOptionId) return;
+		const idx = pollComposer.options.findIndex((option) => option.id === activeOptionId);
+		const option = idx === -1 ? null : pollComposer.options[idx];
+		setActiveOptionId(null);
+		if (!option) return;
+		announceInteraction("poll.optionDropped", {
+			option: labelForOption(option, idx + 1),
+			position: idx + 1
+		});
+	}, [
+		activeOptionId,
+		announceInteraction,
+		labelForOption,
+		pollComposer
+	]);
+	const handleMove = useCallback((direction) => {
+		if (!activeOptionId) return;
+		const currentIndex = pollComposer.options.findIndex((option) => option.id === activeOptionId);
+		if (currentIndex === -1) return;
+		const targetIndex = currentIndex + direction;
+		if (targetIndex < 0 || targetIndex >= pollComposer.options.length) return;
+		const nextOptions = [...pollComposer.options];
+		const [moved] = nextOptions.splice(currentIndex, 1);
+		nextOptions.splice(targetIndex, 0, moved);
+		pollComposer.updateFields({ options: nextOptions });
+		pendingFocusIndexRef.current = targetIndex;
+	}, [activeOptionId, pollComposer]);
+	useLayoutEffect(() => {
+		if (pendingFocusIndexRef.current === null) return;
+		const idx = pendingFocusIndexRef.current;
+		pendingFocusIndexRef.current = null;
+		handleRefs.current[idx]?.focus();
+	}, [options]);
+	const draggable = options.length > 1;
+	const optionsHintId = useStableId();
+	useSettledAnnouncement(announce, {
+		active: draggable,
+		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("poll.optionFieldSet.options.label", "Options"),
+		onSetNewOrder,
+		children: options.map((option, i) => {
+			const error = errors?.[option.id];
+			return /* @__PURE__ */ jsx("div", {
+				className: clsx("str-chat__form__input-field", {
+					"str-chat__form__input-field--draggable": draggable,
+					"str-chat__form__input-field--has-error": error
+				}),
+				children: /* @__PURE__ */ jsx(TextInput, {
+					"aria-describedby": draggable ? optionsHintId : void 0,
+					className: "str-chat__form__input-field__value",
+					error: !!error,
+					fieldMessagePlacement: "inside",
+					id: option.id,
+					leading: draggable ? /* @__PURE__ */ jsx(PollOptionReorderHandle, {
+						index: i,
+						isActive: option.id === activeOptionId,
+						onActivate: handleActivate,
+						onDeselect: handleDeselect,
+						onMove: handleMove,
+						option,
+						registerRef: registerHandleRef,
+						totalOptionCount: options.length
+					}) : void 0,
+					message: error ? /* @__PURE__ */ jsx("span", {
+						"data-testid": "poll-option-input-field-error",
+						children: knownValidationErrors[error.code] ?? error.message
+					}) : void 0,
+					onBlur: () => {
+						pollComposer.handleFieldBlur("options");
+					},
+					onChange: (e) => {
+						pollComposer.updateFields({ options: {
+							index: i,
+							text: e.target.value
+						} });
+					},
+					onKeyUp: (event) => {
+						const isFocusedLastOptionField = i === options.length - 1;
+						if (event.key === "Enter" && !isFocusedLastOptionField) optionInputRefs.current[i + 1]?.focus();
+					},
+					placeholder: t("poll.optionFieldSet.addOption.placeholder", "Add an Option"),
+					ref: (element) => {
+						optionInputRefs.current[i] = element;
+					},
+					trailing: draggable ? /* @__PURE__ */ jsx(RemoveOptionButton, {
+						"aria-label": t("poll.optionFieldSet.removeOption.ariaLabel", "Remove option: {{ option }}", { option: labelForOption(option, i + 1) }),
+						onClick: () => clearOption(option.id)
+					}) : void 0,
+					type: "text",
+					value: option.text
+				})
+			}, `option-row-${i}`);
+		})
+	}), draggable && /* @__PURE__ */ jsx(VisuallyHidden, {
+		id: optionsHintId,
+		children: t("poll.optionFieldSet.optionCanReorderedRemoved.ariaLabel", "This option can be reordered and removed.")
+	})] });
+};
+var RemoveOptionButton = ({ className, ...props }) => {
+	const { IconMinusCircle } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(Button, {
+		appearance: "ghost",
+		circular: true,
+		className: clsx("str-chat__form__remove-option-button", className),
+		size: "xs",
+		variant: "secondary",
+		...props,
+		children: /* @__PURE__ */ jsx(IconMinusCircle, {})
+	});
+};
+//#endregion
+export { OptionFieldSet };
+
+//# sourceMappingURL=OptionFieldSet.mjs.map

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

@@ -0,0 +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

@@ -0,0 +1,77 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.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 { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Poll/PollCreationDialog/PollCreationDialog.tsx
+var pollComposerStateSelector = (state) => ({
+	allow_answers: state.data.allow_answers,
+	allow_user_suggested_options: state.data.allow_user_suggested_options,
+	voting_visibility: state.data.voting_visibility
+});
+var PollCreationDialog = ({ close }) => {
+	const { t } = useTranslationContext();
+	const { announceInteraction } = useInteractionAnnouncements();
+	const { pollComposer } = useMessageComposerController();
+	const { allow_answers, allow_user_suggested_options, voting_visibility } = useStateStore(pollComposer.state, pollComposerStateSelector);
+	useEffect(() => {
+		announceInteraction("poll.dialogOpened");
+	}, [announceInteraction]);
+	return /* @__PURE__ */ jsxs(Prompt.Root, {
+		className: "str-chat__poll-creation-dialog",
+		"data-testid": "poll-creation-dialog",
+		children: [
+			/* @__PURE__ */ jsx(Prompt.Header, {
+				close,
+				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",
+				children: [
+					/* @__PURE__ */ jsx(NameField, {}),
+					/* @__PURE__ */ jsx(OptionFieldSet, {}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "str-chat__poll-creation-dialog__features-selectors",
+						children: [
+							/* @__PURE__ */ jsx(MultipleAnswersField, {}),
+							/* @__PURE__ */ jsx(SwitchField, {
+								checked: voting_visibility === "anonymous",
+								description: t("poll.creationDialog.hideWhoVoted.description", "Hide Who Voted"),
+								id: "voting_visibility",
+								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("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("poll.actions.suggestOption.label", "Suggest an Option")
+							}),
+							/* @__PURE__ */ jsx(SwitchField, {
+								checked: allow_answers,
+								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("poll.addCommentPrompt.addComment.label", "Add a Comment")
+							})
+						]
+					})
+				]
+			}) }),
+			/* @__PURE__ */ jsx(PollCreationDialogControls, { close })
+		]
+	});
+};
+//#endregion
+export { PollCreationDialog };
+
+//# sourceMappingURL=PollCreationDialog.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,53 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useNotificationApi } from "../../Notifications/hooks/useNotificationApi.mjs";
+import { Prompt } from "../../Dialog/components/Prompt.mjs";
+import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useCanCreatePoll } from "../../MessageComposer/hooks/useCanCreatePoll.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { flushSync } from "react-dom";
+//#region src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx
+var PollCreationDialogControls = ({ close }) => {
+	const { IconSend } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { textareaRef } = useMessageComposerContext();
+	const messageComposer = useMessageComposerController();
+	const sendMessage = messageComposer.send;
+	const canCreatePoll = useCanCreatePoll();
+	const { addNotification } = useNotificationApi();
+	return /* @__PURE__ */ jsx(Prompt.Footer, { children: /* @__PURE__ */ jsxs(Prompt.FooterControls, { children: [/* @__PURE__ */ jsx(Prompt.FooterControlsButtonSecondary, {
+		className: clsx("str-chat__prompt__footer__controls-button--cancel"),
+		onClick: close,
+		type: "button",
+		children: t("common.cancel.label", "Cancel")
+	}), /* @__PURE__ */ jsxs(Prompt.FooterControlsButtonPrimary, {
+		className: clsx("str-chat__prompt__footer__controls-button--submit"),
+		disabled: !canCreatePoll,
+		onClick: async () => {
+			flushSync(() => close());
+			textareaRef?.current?.focus();
+			try {
+				await messageComposer.createPoll();
+			} catch {
+				return;
+			}
+			if (await sendMessage() !== "sent") return;
+			addNotification({
+				ariaLive: "assertive",
+				emitter: "PollCreationDialog",
+				message: t("poll.creationDialog.pollSent.text", "Poll sent"),
+				severity: "success",
+				type: "api:poll:create:success"
+			});
+		},
+		type: "submit",
+		children: [/* @__PURE__ */ jsx(IconSend, {}), t("poll.creationDialog.sendPoll.text", "Send Poll")]
+	})] }) });
+};
+//#endregion
+export { PollCreationDialogControls };
+
+//# sourceMappingURL=PollCreationDialogControls.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PollCreationDialogControls.mjs","names":[],"sources":["../../../../../src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx"],"sourcesContent":["import React from 'react';\nimport { flushSync } from 'react-dom';\nimport { useCanCreatePoll } from '../../MessageComposer/hooks/useCanCreatePoll';\nimport { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController';\nimport {\n  useComponentContextIcons,\n  useMessageComposerContext,\n  useTranslationContext,\n} from '../../../context';\nimport clsx from 'clsx';\nimport { Prompt } from '../../Dialog';\nimport { useNotificationApi } from '../../Notifications';\n\nexport type PollCreationDialogControlsProps = {\n  close: () => void;\n};\n\nexport const PollCreationDialogControls = ({\n  close,\n}: PollCreationDialogControlsProps) => {\n  const { IconSend } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { textareaRef } = useMessageComposerContext();\n  const messageComposer = useMessageComposerController();\n  const sendMessage = messageComposer.send;\n  const canCreatePoll = useCanCreatePoll();\n  const { addNotification } = useNotificationApi();\n\n  return (\n    <Prompt.Footer>\n      <Prompt.FooterControls>\n        <Prompt.FooterControlsButtonSecondary\n          className={clsx('str-chat__prompt__footer__controls-button--cancel')}\n          onClick={close}\n          type='button'\n        >\n          {t('common.cancel.label', 'Cancel')}\n        </Prompt.FooterControlsButtonSecondary>\n        <Prompt.FooterControlsButtonPrimary\n          className={clsx('str-chat__prompt__footer__controls-button--submit')}\n          disabled={!canCreatePoll}\n          onClick={async () => {\n            // Close optimistically and move focus to the composer in the SAME synchronous turn,\n            // BEFORE the async work starts. `flushSync` unmounts the modal now; we then focus the\n            // textarea immediately, so it is the active element before any focus-restore runs.\n            // Both restorers (react-aria's FocusScope and AttachmentSelector's trigger restore)\n            // only act if focus fell to <body>, so moving it to the composer first suppresses\n            // them — avoiding a focus blip through the attachment \"+\" trigger (a screen reader\n            // would otherwise announce that extra jump before landing in the composer). Closing\n            // first also avoids the Send→Close button blip while createPoll() is in flight.\n            flushSync(() => close());\n            textareaRef?.current?.focus();\n            try {\n              await messageComposer.createPoll();\n            } catch {\n              // createPoll() in stream-chat-js already publishes an\n              // `api:poll:create:failed` notification (with the underlying error\n              // `reason`) via client.notifications.addError, so we swallow the\n              // rethrown error here only to avoid an unhandled rejection. The poll\n              // was not created, so do not attempt to send the message.\n              return;\n            }\n            // The poll exists now; sending the message is a separate step that can fail on its own\n            // (createPoll's self-notification only covers poll creation). `sendMessage()` never\n            // rejects — it reports its own `api:message:send:failed` notification and resolves with\n            // what happened — so the success announcement below is gated on that. Compared against\n            // `'sent'` rather than tested for truthiness: `'failed'` and `'nothing-to-send'` are\n            // both truthy strings, and announcing \"Poll sent\" after either would contradict the\n            // error notification.\n            if ((await sendMessage()) !== 'sent') return;\n            addNotification({\n              // Announce assertively: focus has just returned to the composer, so a polite\n              // \"Poll sent\" would be queued behind the textarea's focus announcement and read\n              // last (confusing). Assertive lets the confirmation be heard promptly.\n              ariaLive: 'assertive',\n              emitter: 'PollCreationDialog',\n              message: t('poll.creationDialog.pollSent.text', 'Poll sent'),\n              severity: 'success',\n              type: 'api:poll:create:success',\n            });\n          }}\n          type='submit'\n        >\n          <IconSend />\n          {t('poll.creationDialog.sendPoll.text', 'Send Poll')}\n        </Prompt.FooterControlsButtonPrimary>\n      </Prompt.FooterControls>\n    </Prompt.Footer>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAa,8BAA8B,EACzC,YACqC;CACrC,MAAM,EAAE,aAAa,yBAAyB;CAC9C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,gBAAgB,0BAA0B;CAClD,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,cAAc,gBAAgB;CACpC,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,EAAE,oBAAoB,mBAAmB;CAE/C,OACE,oBAAC,OAAO,QAAR,EAAA,UACE,qBAAC,OAAO,gBAAR,EAAA,UAAA,CACE,oBAAC,OAAO,+BAAR;EACE,WAAW,KAAK,mDAAmD;EACnE,SAAS;EACT,MAAK;YAEJ,EAAE,uBAAuB,QAAQ;CACE,CAAA,GACtC,qBAAC,OAAO,6BAAR;EACE,WAAW,KAAK,mDAAmD;EACnE,UAAU,CAAC;EACX,SAAS,YAAY;GASnB,gBAAgB,MAAM,CAAC;GACvB,aAAa,SAAS,MAAM;GAC5B,IAAI;IACF,MAAM,gBAAgB,WAAW;GACnC,QAAQ;IAMN;GACF;GAQA,IAAK,MAAM,YAAY,MAAO,QAAQ;GACtC,gBAAgB;IAId,UAAU;IACV,SAAS;IACT,SAAS,EAAE,qCAAqC,WAAW;IAC3D,UAAU;IACV,MAAM;GACR,CAAC;EACH;EACA,MAAK;YA3CP,CA6CE,oBAAC,UAAD,CAAW,CAAA,GACV,EAAE,qCAAqC,WAAW,CACjB;GACf,EAAA,CAAA,EACV,CAAA;AAEnB"}

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

@@ -0,0 +1,79 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useAriaLiveAnnouncer } from "../../Accessibility/useAriaLiveAnnouncer.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsx
+var PollOptionReorderHandle = ({ index, isActive, onActivate, onDeselect, onMove, option, registerRef, totalOptionCount }) => {
+	const { IconReorder } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const announce = useAriaLiveAnnouncer();
+	const hasAnnouncedFocusRef = useRef(false);
+	const focusAnnouncementFrameRef = useRef(null);
+	const position = index + 1;
+	const optionLabel = option.text.trim() || t("poll.optionFieldSet.option.ariaLabel", "Option {{ position }}", { position });
+	const ariaLabel = isActive ? t("poll.optionReorder.reorderPosition.ariaLabel", "Reorder \"{{ option }}\" at position {{ position }} of {{ total }}", {
+		option: optionLabel,
+		position,
+		total: totalOptionCount
+	}) : t("poll.optionReorder.reorderOption.ariaLabel", "Reorder option {{ position }}", { position });
+	useEffect(() => () => {
+		if (focusAnnouncementFrameRef.current === null) return;
+		cancelAnimationFrame(focusAnnouncementFrameRef.current);
+	}, []);
+	const onKeyDown = (event) => {
+		if (!isActive) return;
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			onMove(-1);
+			return;
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			onMove(1);
+			return;
+		}
+		if (event.key === "Escape" || event.key === "Esc") {
+			event.preventDefault();
+			onDeselect();
+		}
+	};
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": ariaLabel,
+		"aria-pressed": isActive,
+		className: "str-chat__drag-handle-button",
+		onBlur: () => {
+			if (focusAnnouncementFrameRef.current !== null) {
+				cancelAnimationFrame(focusAnnouncementFrameRef.current);
+				focusAnnouncementFrameRef.current = null;
+			}
+			hasAnnouncedFocusRef.current = false;
+			if (isActive) onDeselect();
+		},
+		onClick: () => {
+			if (isActive) {
+				onDeselect();
+				return;
+			}
+			onActivate(option.id);
+		},
+		onFocus: () => {
+			if (isActive || hasAnnouncedFocusRef.current) return;
+			hasAnnouncedFocusRef.current = true;
+			focusAnnouncementFrameRef.current = requestAnimationFrame(() => {
+				announce(t("poll.optionReorder.pressSpaceSelectOption.ariaLabel", "Press Space to select this option, use the Up and Down arrow keys to move it, then press Space again to deselect it."), { priority: "assertive" });
+				focusAnnouncementFrameRef.current = null;
+			});
+		},
+		onKeyDown,
+		ref: (element) => {
+			registerRef(index, element);
+		},
+		type: "button",
+		children: /* @__PURE__ */ jsx(IconReorder, { className: "str-chat__drag-handle" })
+	});
+};
+//#endregion
+export { PollOptionReorderHandle };
+
+//# sourceMappingURL=PollOptionReorderHandle.mjs.map