stream-chat-react 14.11.1 → 14.12.0

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

@@ -0,0 +1,193 @@
+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 { TextInput } from "../../Form/TextInput.mjs";
+import { TextInputFieldSet } from "../../Form/TextInputFieldSet.mjs";
+import { PollOptionReorderHandle } from "./PollOptionReorderHandle.mjs";
+import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+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("OptionFieldSet");
+	const announce = useAriaLiveAnnouncer();
+	const { announceInteraction } = useInteractionAnnouncements();
+	const optionInputRefs = useRef([]);
+	const handleRefs = useRef([]);
+	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")
+	}), [t]);
+	const labelForOption = useCallback((option, position) => option.text.trim() || t("aria/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("aria/Options can now be reordered and removed."),
+		settleKey: options
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TextInputFieldSet, {
+		draggable,
+		label: t("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] ?? t("Error")
+					}) : 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("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) }),
+						onClick: () => clearOption(option.id)
+					}) : void 0,
+					type: "text",
+					value: option.text
+				})
+			}, `option-row-${i}`);
+		})
+	}), draggable && /* @__PURE__ */ jsx(VisuallyHidden, {
+		id: optionsHintId,
+		children: t("aria/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 { 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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"}

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

@@ -0,0 +1,78 @@
+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 { 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,
+	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("Create a question, add options, and configure poll settings"),
+				title: t("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("Hide who voted"),
+								id: "voting_visibility",
+								onChange: (e) => pollComposer.updateFields({ voting_visibility: e.target.checked ? VotingVisibility.anonymous : VotingVisibility.public }),
+								title: t("Anonymous poll")
+							}),
+							/* @__PURE__ */ jsx(SwitchField, {
+								checked: allow_user_suggested_options,
+								description: t("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")
+							}),
+							/* @__PURE__ */ jsx(SwitchField, {
+								checked: allow_answers,
+								description: t("Allow others to add comments"),
+								id: "allow_answers",
+								onChange: (e) => pollComposer.updateFields({ allow_answers: e.target.checked }),
+								title: t("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 { 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"}

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

@@ -0,0 +1,62 @@
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Prompt } from "../../Dialog/components/Prompt.mjs";
+import { useCanCreatePoll } from "../../MessageComposer/hooks/useCanCreatePoll.mjs";
+import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useNotificationApi } from "../../Notifications/hooks/useNotificationApi.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("PollCreationDialogControls");
+	const { handleSubmit: handleSubmitMessage, textareaRef } = useMessageComposerContext();
+	const messageComposer = useMessageComposerController();
+	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("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;
+			}
+			try {
+				await handleSubmitMessage();
+			} catch {
+				addNotification({
+					emitter: "PollCreationDialog",
+					message: t("Send message request failed"),
+					severity: "error",
+					type: "api:message:send:failed"
+				});
+				return;
+			}
+			addNotification({
+				ariaLive: "assertive",
+				emitter: "PollCreationDialog",
+				message: t("Poll sent"),
+				severity: "success",
+				type: "api:poll:create:success"
+			});
+		},
+		type: "submit",
+		children: [/* @__PURE__ */ jsx(IconSend, {}), t("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\n  const { t } = useTranslationContext('PollCreationDialogControls');\n  const { handleSubmit: handleSubmitMessage, textareaRef } = useMessageComposerContext();\n  const messageComposer = useMessageComposerController();\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('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. Keep it in its own\n            // try/catch so a send failure is surfaced (createPoll's self-notification only covers\n            // poll creation) instead of being swallowed alongside it.\n            try {\n              await handleSubmitMessage();\n            } catch {\n              addNotification({\n                emitter: 'PollCreationDialog',\n                message: t('Send message request failed'),\n                severity: 'error',\n                type: 'api:message:send:failed',\n              });\n              return;\n            }\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 sent'),\n              severity: 'success',\n              type: 'api:poll:create:success',\n            });\n          }}\n          type='submit'\n        >\n          <IconSend />\n          {t('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;CAE9C,MAAM,EAAE,MAAM,sBAAsB,4BAA4B;CAChE,MAAM,EAAE,cAAc,qBAAqB,gBAAgB,0BAA0B;CACrF,MAAM,kBAAkB,6BAA6B;CACrD,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,QAAQ;CACyB,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;GAIA,IAAI;IACF,MAAM,oBAAoB;GAC5B,QAAQ;IACN,gBAAgB;KACd,SAAS;KACT,SAAS,EAAE,6BAA6B;KACxC,UAAU;KACV,MAAM;IACR,CAAC;IACD;GACF;GACA,gBAAgB;IAId,UAAU;IACV,SAAS;IACT,SAAS,EAAE,WAAW;IACtB,UAAU;IACV,MAAM;GACR,CAAC;EACH;EACA,MAAK;YAjDP,CAmDE,oBAAC,UAAD,CAAW,CAAA,GACV,EAAE,WAAW,CACoB;GACf,EAAA,CAAA,EACV,CAAA;AAEnB"}

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

@@ -0,0 +1,79 @@
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useAriaLiveAnnouncer } from "../../Accessibility/useAriaLiveAnnouncer.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("aria/Option {{ position }}", { position });
+	const ariaLabel = isActive ? t("aria/Reorder \"{{ option }}\" at position {{ position }} of {{ total }}", {
+		option: optionLabel,
+		position,
+		total: totalOptionCount
+	}) : t("aria/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("aria/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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PollOptionReorderHandle.mjs","names":[],"sources":["../../../../../src/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsx"],"sourcesContent":["import type { KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport React, { useEffect, useRef } from 'react';\nimport type { PollComposerOption } from 'stream-chat';\n\nimport { useAriaLiveAnnouncer } from '../../Accessibility';\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\n\ntype PollOptionReorderHandleProps = {\n  index: number;\n  isActive: boolean;\n  onActivate: (optionId: string) => void;\n  onDeselect: () => void;\n  onMove: (direction: -1 | 1) => void;\n  option: PollComposerOption;\n  registerRef: (index: number, element: HTMLButtonElement | null) => void;\n  /** Total number of options. Used to embed \"position N of total\" into the\n   * active handle's aria-label so VoiceOver's native focus announcement after a\n   * move carries the new position instead of just \"Reorder option N\". */\n  totalOptionCount: number;\n};\n\nexport const PollOptionReorderHandle = ({\n  index,\n  isActive,\n  onActivate,\n  onDeselect,\n  onMove,\n  option,\n  registerRef,\n  totalOptionCount,\n}: PollOptionReorderHandleProps) => {\n  const { IconReorder } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  const announce = useAriaLiveAnnouncer();\n  const hasAnnouncedFocusRef = useRef(false);\n  const focusAnnouncementFrameRef = useRef<number | null>(null);\n\n  const position = index + 1;\n  const optionLabel = option.text.trim() || t('aria/Option {{ position }}', { position });\n  // While picked up, fold the option text + new position into the aria-label\n  // so VoiceOver speaks \"Reorder 'option B' at position 1 of 3\" on the focus\n  // event triggered by ArrowUp/ArrowDown. That replaces the otherwise\n  // redundant \"Reorder option N, selected, toggle button\" native announcement\n  // and removes the need for a duplicate live-region \"moved to position\"\n  // message.\n  const ariaLabel = isActive\n    ? t('aria/Reorder \"{{ option }}\" at position {{ position }} of {{ total }}', {\n        option: optionLabel,\n        position,\n        total: totalOptionCount,\n      })\n    : t('aria/Reorder option {{ position }}', { position });\n\n  useEffect(\n    () => () => {\n      if (focusAnnouncementFrameRef.current === null) return;\n      cancelAnimationFrame(focusAnnouncementFrameRef.current);\n    },\n    [],\n  );\n\n  const onKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {\n    if (!isActive) return;\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      onMove(-1);\n      return;\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      onMove(1);\n      return;\n    }\n    if (event.key === 'Escape' || event.key === 'Esc') {\n      event.preventDefault();\n      onDeselect();\n    }\n  };\n\n  return (\n    <button\n      aria-label={ariaLabel}\n      aria-pressed={isActive}\n      className='str-chat__drag-handle-button'\n      onBlur={() => {\n        if (focusAnnouncementFrameRef.current !== null) {\n          cancelAnimationFrame(focusAnnouncementFrameRef.current);\n          focusAnnouncementFrameRef.current = null;\n        }\n        hasAnnouncedFocusRef.current = false;\n        if (isActive) {\n          // Tabbing or clicking away while picked up drops the option.\n          onDeselect();\n        }\n      }}\n      onClick={() => {\n        if (isActive) {\n          onDeselect();\n          return;\n        }\n        onActivate(option.id);\n      }}\n      onFocus={() => {\n        if (isActive || hasAnnouncedFocusRef.current) return;\n\n        hasAnnouncedFocusRef.current = true;\n        focusAnnouncementFrameRef.current = requestAnimationFrame(() => {\n          announce(\n            t(\n              'aria/Press Space to select this option, use the Up and Down arrow keys to move it, then press Space again to deselect it.',\n            ),\n            { priority: 'assertive' },\n          );\n          focusAnnouncementFrameRef.current = null;\n        });\n      }}\n      onKeyDown={onKeyDown}\n      ref={(element) => {\n        registerRef(index, element);\n      }}\n      type='button'\n    >\n      <IconReorder className='str-chat__drag-handle' />\n    </button>\n  );\n};\n"],"mappings":";;;;;;AAqBA,IAAa,2BAA2B,EACtC,OACA,UACA,YACA,YACA,QACA,QACA,aACA,uBACkC;CAClC,MAAM,EAAE,gBAAgB,yBAAyB;CAEjD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,WAAW,qBAAqB;CACtC,MAAM,uBAAuB,OAAO,KAAK;CACzC,MAAM,4BAA4B,OAAsB,IAAI;CAE5D,MAAM,WAAW,QAAQ;CACzB,MAAM,cAAc,OAAO,KAAK,KAAK,KAAK,EAAE,8BAA8B,EAAE,SAAS,CAAC;CAOtF,MAAM,YAAY,WACd,EAAE,2EAAyE;EACzE,QAAQ;EACR;EACA,OAAO;CACT,CAAC,IACD,EAAE,sCAAsC,EAAE,SAAS,CAAC;CAExD,sBACc;EACV,IAAI,0BAA0B,YAAY,MAAM;EAChD,qBAAqB,0BAA0B,OAAO;CACxD,GACA,CAAC,CACH;CAEA,MAAM,aAAa,UAAiD;EAClE,IAAI,CAAC,UAAU;EAEf,IAAI,MAAM,QAAQ,WAAW;GAC3B,MAAM,eAAe;GACrB,OAAO,EAAE;GACT;EACF;EACA,IAAI,MAAM,QAAQ,aAAa;GAC7B,MAAM,eAAe;GACrB,OAAO,CAAC;GACR;EACF;EACA,IAAI,MAAM,QAAQ,YAAY,MAAM,QAAQ,OAAO;GACjD,MAAM,eAAe;GACrB,WAAW;EACb;CACF;CAEA,OACE,oBAAC,UAAD;EACE,cAAY;EACZ,gBAAc;EACd,WAAU;EACV,cAAc;GACZ,IAAI,0BAA0B,YAAY,MAAM;IAC9C,qBAAqB,0BAA0B,OAAO;IACtD,0BAA0B,UAAU;GACtC;GACA,qBAAqB,UAAU;GAC/B,IAAI,UAEF,WAAW;EAEf;EACA,eAAe;GACb,IAAI,UAAU;IACZ,WAAW;IACX;GACF;GACA,WAAW,OAAO,EAAE;EACtB;EACA,eAAe;GACb,IAAI,YAAY,qBAAqB,SAAS;GAE9C,qBAAqB,UAAU;GAC/B,0BAA0B,UAAU,4BAA4B;IAC9D,SACE,EACE,2HACF,GACA,EAAE,UAAU,YAAY,CAC1B;IACA,0BAA0B,UAAU;GACtC,CAAC;EACH;EACW;EACX,MAAM,YAAY;GAChB,YAAY,OAAO,OAAO;EAC5B;EACA,MAAK;YAEL,oBAAC,aAAD,EAAa,WAAU,wBAAyB,CAAA;CAC1C,CAAA;AAEZ"}

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

@@ -0,0 +1,46 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { usePollContext } from "../../context/PollContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Poll/PollHeader.tsx
+var pollStateSelector = (nextValue) => ({
+	enforce_unique_vote: nextValue.enforce_unique_vote,
+	is_closed: nextValue.is_closed,
+	max_votes_allowed: nextValue.max_votes_allowed,
+	name: nextValue.name,
+	options: nextValue.options
+});
+var PollHeader = () => {
+	const { t } = useTranslationContext("PollHeader");
+	const { poll } = usePollContext();
+	const { enforce_unique_vote, is_closed, max_votes_allowed, name, options } = useStateStore(poll.state, pollStateSelector);
+	const selectionInstructions = useMemo(() => {
+		if (is_closed) return t("Vote ended");
+		if (enforce_unique_vote || options.length === 1) return t("Select one");
+		if (max_votes_allowed) return t("Select up to {{count}}", { count: max_votes_allowed > options.length ? options.length : max_votes_allowed });
+		if (options.length > 1) return t("Select one or more");
+		return "";
+	}, [
+		is_closed,
+		enforce_unique_vote,
+		max_votes_allowed,
+		options.length,
+		t
+	]);
+	if (!name) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__poll-header",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "str-chat__poll-title",
+			children: name
+		}), /* @__PURE__ */ jsx("div", {
+			className: "str-chat__poll-subtitle",
+			children: selectionInstructions
+		})]
+	});
+};
+//#endregion
+export { PollHeader };
+
+//# sourceMappingURL=PollHeader.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PollHeader.mjs","names":[],"sources":["../../../../src/components/Poll/PollHeader.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { usePollContext, useTranslationContext } from '../../context';\nimport { useStateStore } from '../../store';\nimport type { PollOption, PollState } from 'stream-chat';\n\ntype PollStateSelectorReturnValue = {\n  enforce_unique_vote: boolean;\n  is_closed: boolean | undefined;\n  max_votes_allowed: number;\n  name: string;\n  options: PollOption[];\n};\nconst pollStateSelector = (nextValue: PollState): PollStateSelectorReturnValue => ({\n  enforce_unique_vote: nextValue.enforce_unique_vote,\n  is_closed: nextValue.is_closed,\n  max_votes_allowed: nextValue.max_votes_allowed,\n  name: nextValue.name,\n  options: nextValue.options,\n});\n\nexport const PollHeader = () => {\n  const { t } = useTranslationContext('PollHeader');\n\n  const { poll } = usePollContext();\n  const { enforce_unique_vote, is_closed, max_votes_allowed, name, options } =\n    useStateStore(poll.state, pollStateSelector);\n\n  const selectionInstructions = useMemo(() => {\n    if (is_closed) return t('Vote ended');\n    if (enforce_unique_vote || options.length === 1) return t('Select one');\n    if (max_votes_allowed)\n      return t('Select up to {{count}}', {\n        count: max_votes_allowed > options.length ? options.length : max_votes_allowed,\n      });\n    if (options.length > 1) return t('Select one or more');\n    return '';\n  }, [is_closed, enforce_unique_vote, max_votes_allowed, options.length, t]);\n\n  if (!name) return null;\n\n  return (\n    <div className='str-chat__poll-header'>\n      <div className='str-chat__poll-title'>{name}</div>\n      <div className='str-chat__poll-subtitle'>{selectionInstructions}</div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAM,qBAAqB,eAAwD;CACjF,qBAAqB,UAAU;CAC/B,WAAW,UAAU;CACrB,mBAAmB,UAAU;CAC7B,MAAM,UAAU;CAChB,SAAS,UAAU;AACrB;AAEA,IAAa,mBAAmB;CAC9B,MAAM,EAAE,MAAM,sBAAsB,YAAY;CAEhD,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,EAAE,qBAAqB,WAAW,mBAAmB,MAAM,YAC/D,cAAc,KAAK,OAAO,iBAAiB;CAE7C,MAAM,wBAAwB,cAAc;EAC1C,IAAI,WAAW,OAAO,EAAE,YAAY;EACpC,IAAI,uBAAuB,QAAQ,WAAW,GAAG,OAAO,EAAE,YAAY;EACtE,IAAI,mBACF,OAAO,EAAE,0BAA0B,EACjC,OAAO,oBAAoB,QAAQ,SAAS,QAAQ,SAAS,kBAC/D,CAAC;EACH,IAAI,QAAQ,SAAS,GAAG,OAAO,EAAE,oBAAoB;EACrD,OAAO;CACT,GAAG;EAAC;EAAW;EAAqB;EAAmB,QAAQ;EAAQ;CAAC,CAAC;CAEzE,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aAAwB;EAAU,CAAA,GACjD,oBAAC,OAAD;GAAK,WAAU;aAA2B;EAA2B,CAAA,CAClE;;AAET"}

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

@@ -0,0 +1,41 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { usePollContext } from "../../context/PollContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { PollAction } from "./PollActions/PollAction.mjs";
+import { PollOptionSelector } from "./PollOptionSelector.mjs";
+import { PollOptionsFullList } from "./PollActions/PollOptionsFullList.mjs";
+import { useCallback, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Poll/PollOptionList.tsx
+var pollStateSelector = (nextValue) => ({ options: nextValue.options });
+var PollOptionList = ({ optionsDisplayCount, PollOptionsFullList: PollOptionsFullList$1 = PollOptionsFullList }) => {
+	const { PollOptionSelector: PollOptionSelector$1 = PollOptionSelector } = useComponentContext();
+	const { t } = useTranslationContext("PollOptionList");
+	const { poll } = usePollContext();
+	const { options } = useStateStore(poll.state, pollStateSelector);
+	const [viewAllOptionsOpen, setViewAllOptionsOpen] = useState(false);
+	const closeViewAllOptions = useCallback(() => setViewAllOptionsOpen(false), []);
+	const openViewAllOptions = useCallback(() => setViewAllOptionsOpen(true), []);
+	const showMoreOptionsButton = typeof optionsDisplayCount === "number" && options.length > optionsDisplayCount;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__poll-option-list", { "str-chat__poll-option-list--full": typeof optionsDisplayCount === "undefined" }),
+		children: options.slice(0, optionsDisplayCount ?? options.length).map((option) => /* @__PURE__ */ jsx(PollOptionSelector$1, {
+			displayAvatarCount: 3,
+			option
+		}, `poll-option-${option.id}`))
+	}), showMoreOptionsButton && /* @__PURE__ */ jsx(PollAction, {
+		buttonText: t("+{{count}} more options", { count: options.length }),
+		closeModal: closeViewAllOptions,
+		isAdditionalAction: true,
+		modalClassName: "str-chat__poll-action-modal",
+		modalIsOpen: viewAllOptionsOpen,
+		openModal: openViewAllOptions,
+		children: /* @__PURE__ */ jsx(PollOptionsFullList$1, {})
+	})] });
+};
+//#endregion
+export { PollOptionList };
+
+//# sourceMappingURL=PollOptionList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PollOptionList.mjs","names":[],"sources":["../../../../src/components/Poll/PollOptionList.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useCallback, useState } from 'react';\nimport { PollAction } from './PollActions/PollAction';\nimport { PollOptionSelector as DefaultPollOptionSelector } from './PollOptionSelector';\nimport { useStateStore } from '../../store';\nimport {\n  useComponentContext,\n  usePollContext,\n  useTranslationContext,\n} from '../../context';\nimport type { PollOption, PollState } from 'stream-chat';\nimport { PollOptionsFullList as DefaultPollOptionsFullList } from './PollActions/PollOptionsFullList';\n\ntype PollStateSelectorReturnValue = { options: PollOption[] };\n\nconst pollStateSelector = (nextValue: PollState): PollStateSelectorReturnValue => ({\n  options: nextValue.options,\n});\n\nexport type PollOptionListProps = {\n  optionsDisplayCount?: number;\n  PollOptionsFullList?: React.ComponentType;\n};\n\nexport const PollOptionList = ({\n  optionsDisplayCount,\n  PollOptionsFullList = DefaultPollOptionsFullList,\n}: PollOptionListProps) => {\n  const { PollOptionSelector = DefaultPollOptionSelector } = useComponentContext();\n  const { t } = useTranslationContext('PollOptionList');\n  const { poll } = usePollContext();\n  const { options } = useStateStore(poll.state, pollStateSelector);\n  const [viewAllOptionsOpen, setViewAllOptionsOpen] = useState(false);\n  const closeViewAllOptions = useCallback(() => setViewAllOptionsOpen(false), []);\n  const openViewAllOptions = useCallback(() => setViewAllOptionsOpen(true), []);\n\n  const showMoreOptionsButton =\n    typeof optionsDisplayCount === 'number' && options.length > optionsDisplayCount;\n\n  return (\n    <>\n      <div\n        className={clsx('str-chat__poll-option-list', {\n          'str-chat__poll-option-list--full': typeof optionsDisplayCount === 'undefined',\n        })}\n      >\n        {options.slice(0, optionsDisplayCount ?? options.length).map((option) => (\n          <PollOptionSelector\n            displayAvatarCount={3}\n            key={`poll-option-${option.id}`}\n            option={option}\n          />\n        ))}\n      </div>\n      {showMoreOptionsButton && (\n        <PollAction\n          buttonText={t('+{{count}} more options', {\n            count: options.length,\n          })}\n          closeModal={closeViewAllOptions}\n          isAdditionalAction\n          modalClassName='str-chat__poll-action-modal'\n          modalIsOpen={viewAllOptionsOpen}\n          openModal={openViewAllOptions}\n        >\n          <PollOptionsFullList />\n        </PollAction>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAeA,IAAM,qBAAqB,eAAwD,EACjF,SAAS,UAAU,QACrB;AAOA,IAAa,kBAAkB,EAC7B,qBACA,qBAAA,wBAAsB,0BACG;CACzB,MAAM,EAAE,oBAAA,uBAAqB,uBAA8B,oBAAoB;CAC/E,MAAM,EAAE,MAAM,sBAAsB,gBAAgB;CACpD,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,EAAE,YAAY,cAAc,KAAK,OAAO,iBAAiB;CAC/D,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,KAAK;CAClE,MAAM,sBAAsB,kBAAkB,sBAAsB,KAAK,GAAG,CAAC,CAAC;CAC9E,MAAM,qBAAqB,kBAAkB,sBAAsB,IAAI,GAAG,CAAC,CAAC;CAE5E,MAAM,wBACJ,OAAO,wBAAwB,YAAY,QAAQ,SAAS;CAE9D,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EACE,WAAW,KAAK,8BAA8B,EAC5C,oCAAoC,OAAO,wBAAwB,YACrE,CAAC;YAEA,QAAQ,MAAM,GAAG,uBAAuB,QAAQ,MAAM,CAAC,CAAC,KAAK,WAC5D,oBAAC,sBAAD;GACE,oBAAoB;GAEZ;EACT,GAFM,eAAe,OAAO,IAE5B,CACF;CACE,CAAA,GACJ,yBACC,oBAAC,YAAD;EACE,YAAY,EAAE,2BAA2B,EACvC,OAAO,QAAQ,OACjB,CAAC;EACD,YAAY;EACZ,oBAAA;EACA,gBAAe;EACf,aAAa;EACb,WAAW;YAEX,oBAAC,uBAAD,CAAsB,CAAA;CACZ,CAAA,CAEd,EAAA,CAAA;AAEN"}