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

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

@@ -1,10 +1,10 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
-import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useNotificationApi } from "../../Notifications/hooks/useNotificationApi.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 { 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";
@@ -12,16 +12,17 @@ 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 { 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("Cancel")
+		children: t("common.cancel.label", "Cancel")
 	}), /* @__PURE__ */ jsxs(Prompt.FooterControlsButtonPrimary, {
 		className: clsx("str-chat__prompt__footer__controls-button--submit"),
 		disabled: !canCreatePoll,
@@ -33,27 +34,17 @@ var PollCreationDialogControls = ({ close }) => {
 			} catch {
 				return;
 			}
-			try {
-				await handleSubmitMessage();
-			} catch {
-				addNotification({
-					emitter: "PollCreationDialog",
-					message: t("Send message request failed"),
-					severity: "error",
-					type: "api:message:send:failed"
-				});
-				return;
-			}
+			if (await sendMessage() !== "sent") return;
 			addNotification({
 				ariaLive: "assertive",
 				emitter: "PollCreationDialog",
-				message: t("Poll sent"),
+				message: t("poll.creationDialog.pollSent.text", "Poll sent"),
 				severity: "success",
 				type: "api:poll:create:success"
 			});
 		},
 		type: "submit",
-		children: [/* @__PURE__ */ jsx(IconSend, {}), t("Send poll")]
+		children: [/* @__PURE__ */ jsx(IconSend, {}), t("poll.creationDialog.sendPoll.text", "Send Poll")]
 	})] }) });
 };
 //#endregion

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

@@ -1 +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"}
+{"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

@@ -1,6 +1,6 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 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
@@ -11,12 +11,12 @@ var PollOptionReorderHandle = ({ index, isActive, onActivate, onDeselect, onMove
 	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 }}", {
+	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("aria/Reorder option {{ position }}", { position });
+	}) : t("poll.optionReorder.reorderOption.ariaLabel", "Reorder option {{ position }}", { position });
 	useEffect(() => () => {
 		if (focusAnnouncementFrameRef.current === null) return;
 		cancelAnimationFrame(focusAnnouncementFrameRef.current);
@@ -61,7 +61,7 @@ var PollOptionReorderHandle = ({ index, isActive, onActivate, onDeselect, onMove
 			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" });
+				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;
 			});
 		},

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

@@ -1 +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"}
+{"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  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 =\n    option.text.trim() ||\n    t('poll.optionFieldSet.option.ariaLabel', '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(\n        'poll.optionReorder.reorderPosition.ariaLabel',\n        'Reorder \"{{ option }}\" at position {{ position }} of {{ total }}',\n        {\n          option: optionLabel,\n          position,\n          total: totalOptionCount,\n        },\n      )\n    : t('poll.optionReorder.reorderOption.ariaLabel', 'Reorder option {{ position }}', {\n        position,\n      });\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              'poll.optionReorder.pressSpaceSelectOption.ariaLabel',\n              '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;CACjD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,WAAW,qBAAqB;CACtC,MAAM,uBAAuB,OAAO,KAAK;CACzC,MAAM,4BAA4B,OAAsB,IAAI;CAE5D,MAAM,WAAW,QAAQ;CACzB,MAAM,cACJ,OAAO,KAAK,KAAK,KACjB,EAAE,wCAAwC,yBAAyB,EAAE,SAAS,CAAC;CAOjF,MAAM,YAAY,WACd,EACE,gDACA,sEACA;EACE,QAAQ;EACR;EACA,OAAO;CACT,CACF,IACA,EAAE,8CAA8C,iCAAiC,EAC/E,SACF,CAAC;CAEL,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,uDACA,sHACF,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

@@ -1,6 +1,6 @@
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
-import { usePollContext } from "../../context/PollContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { usePollContext } from "../../context/PollContext.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Poll/PollHeader.tsx
@@ -12,14 +12,18 @@ var pollStateSelector = (nextValue) => ({
 	options: nextValue.options
 });
 var PollHeader = () => {
-	const { t } = useTranslationContext("PollHeader");
+	const { t } = useTranslationContext();
 	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");
+		if (is_closed) return t("poll.header.voteEnded.label", "Vote ended");
+		if (enforce_unique_vote || options.length === 1) return t("poll.header.selectOne.label", "Select one");
+		if (max_votes_allowed) return t("poll.header.selectUp.label", {
+			count: max_votes_allowed > options.length ? options.length : max_votes_allowed,
+			defaultValue_one: "Select up to {{count}}",
+			defaultValue_other: "Select up to {{count}}"
+		});
+		if (options.length > 1) return t("poll.header.selectOneMore.label", "Select one or more");
 		return "";
 	}, [
 		is_closed,

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

@@ -1 +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"}
+{"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 { PollOptionResponseData, PollState } from 'stream-chat';\n\ntype PollStateSelectorReturnValue = {\n  enforce_unique_vote: boolean;\n  is_closed: boolean | undefined;\n  max_votes_allowed: number | undefined;\n  name: string;\n  options: PollOptionResponseData[];\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();\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('poll.header.voteEnded.label', 'Vote ended');\n    if (enforce_unique_vote || options.length === 1)\n      return t('poll.header.selectOne.label', 'Select one');\n    if (max_votes_allowed)\n      return t('poll.header.selectUp.label', {\n        count: max_votes_allowed > options.length ? options.length : max_votes_allowed,\n        defaultValue_one: 'Select up to {{count}}',\n        defaultValue_other: 'Select up to {{count}}',\n      });\n    if (options.length > 1)\n      return t('poll.header.selectOneMore.label', '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;CAEpC,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,+BAA+B,YAAY;EACnE,IAAI,uBAAuB,QAAQ,WAAW,GAC5C,OAAO,EAAE,+BAA+B,YAAY;EACtD,IAAI,mBACF,OAAO,EAAE,8BAA8B;GACrC,OAAO,oBAAoB,QAAQ,SAAS,QAAQ,SAAS;GAC7D,kBAAkB;GAClB,oBAAoB;EACtB,CAAC;EACH,IAAI,QAAQ,SAAS,GACnB,OAAO,EAAE,mCAAmC,oBAAoB;EAClE,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

@@ -1,10 +1,10 @@
-import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
-import { usePollContext } from "../../context/PollContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { PollAction } from "./PollActions/PollAction.mjs";
 import { PollOptionSelector } from "./PollOptionSelector.mjs";
 import { PollOptionsFullList } from "./PollActions/PollOptionsFullList.mjs";
+import { usePollContext } from "../../context/PollContext.mjs";
 import { useCallback, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -12,7 +12,7 @@ import clsx from "clsx";
 var pollStateSelector = (nextValue) => ({ options: nextValue.options });
 var PollOptionList = ({ optionsDisplayCount, PollOptionsFullList: PollOptionsFullList$1 = PollOptionsFullList }) => {
 	const { PollOptionSelector: PollOptionSelector$1 = PollOptionSelector } = useComponentContext();
-	const { t } = useTranslationContext("PollOptionList");
+	const { t } = useTranslationContext();
 	const { poll } = usePollContext();
 	const { options } = useStateStore(poll.state, pollStateSelector);
 	const [viewAllOptionsOpen, setViewAllOptionsOpen] = useState(false);
@@ -26,7 +26,11 @@ var PollOptionList = ({ optionsDisplayCount, PollOptionsFullList: PollOptionsFul
 			option
 		}, `poll-option-${option.id}`))
 	}), showMoreOptionsButton && /* @__PURE__ */ jsx(PollAction, {
-		buttonText: t("+{{count}} more options", { count: options.length }),
+		buttonText: t("poll.optionList.moreOptions.label", {
+			count: options.length,
+			defaultValue_one: "+{{count}} more option",
+			defaultValue_other: "+{{count}} more options"
+		}),
 		closeModal: closeViewAllOptions,
 		isAdditionalAction: true,
 		modalClassName: "str-chat__poll-action-modal",

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

@@ -1 +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"}
+{"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 { PollOptionResponseData, PollState } from 'stream-chat';\nimport { PollOptionsFullList as DefaultPollOptionsFullList } from './PollActions/PollOptionsFullList';\n\ntype PollStateSelectorReturnValue = { options: PollOptionResponseData[] };\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();\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('poll.optionList.moreOptions.label', {\n            count: options.length,\n            defaultValue_one: '+{{count}} more option',\n            defaultValue_other: '+{{count}} more options',\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;CACpC,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,qCAAqC;GACjD,OAAO,QAAQ;GACf,kBAAkB;GAClB,oBAAoB;EACtB,CAAC;EACD,YAAY;EACZ,oBAAA;EACA,gBAAe;EACf,aAAa;EACb,WAAW;YAEX,oBAAC,uBAAD,CAAsB,CAAA;CACZ,CAAA,CAEd,EAAA,CAAA;AAEN"}

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

@@ -1,16 +1,17 @@
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
-import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { useMessageContext } from "../../context/MessageContext.mjs";
-import { usePollContext } from "../../context/PollContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { AvatarStack } from "../Avatar/AvatarStack.mjs";
 import { extractDisplayInfo } from "../Avatar/utils.mjs";
+import { useChannelCapabilities } from "../Channel/hooks/useChannelCapabilities.mjs";
 import { Checkbox } from "../Form/Checkbox.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import { usePollContext } from "../../context/PollContext.mjs";
 import { useMemo } from "react";
+import { isVoteAnswer } from "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { isVoteAnswer } from "stream-chat";
 import debounce from "lodash.debounce";
 //#region src/components/Poll/PollOptionSelector.tsx
 var AmountBar = ({ amount, className }) => /* @__PURE__ */ jsx("div", {
@@ -28,13 +29,14 @@ var pollStateSelector = (nextValue) => ({
 	voting_visibility: nextValue.voting_visibility
 });
 var PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbose }) => {
+	const channel = useChannel();
 	const { t } = useTranslationContext();
-	const { channelCapabilities = {} } = useChannelStateContext("PollOptionsShortlist");
+	const channelCapabilities = useChannelCapabilities({ cid: channel.cid });
 	const { message } = useMessageContext();
 	const { AvatarStack: AvatarStack$1 = AvatarStack, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
 	const { poll } = usePollContext();
 	const { is_closed, latest_votes_by_option, maxVotedOptionIds, ownVotesByOptionId, vote_counts_by_option, voting_visibility } = useStateStore(poll.state, pollStateSelector);
-	const canCastVote = channelCapabilities["cast-poll-vote"] && !is_closed;
+	const canCastVote = channelCapabilities.has("cast-poll-vote") && !is_closed;
 	const isInteractive = !!canCastVote;
 	const isSelected = !!ownVotesByOptionId[option.id];
 	const winningOptionCount = maxVotedOptionIds[0] ? vote_counts_by_option[maxVotedOptionIds[0]] : 0;
@@ -82,7 +84,11 @@ var PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbose }) => {
 						})
 					}), /* @__PURE__ */ jsx("div", {
 						className: "str-chat__poll-option-vote-count",
-						children: voteCountVerbose ? t("{{count}} votes", { count: vote_counts_by_option[option.id] ?? 0 }) : vote_counts_by_option[option.id] ?? 0
+						children: voteCountVerbose ? t("poll.optionVotes.votes.text", {
+							count: vote_counts_by_option[option.id] ?? 0,
+							defaultValue_one: "{{count}} vote",
+							defaultValue_other: "{{count}} votes"
+						}) : vote_counts_by_option[option.id] ?? 0
 					})]
 				})]
 			}),

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

@@ -1 +1 @@
-{"version":3,"file":"PollOptionSelector.mjs","names":[],"sources":["../../../../src/components/Poll/PollOptionSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport debounce from 'lodash.debounce';\nimport React, { useMemo } from 'react';\nimport type { PollOption, PollState, PollVote, VotingVisibility } from 'stream-chat';\nimport { isVoteAnswer } from 'stream-chat';\nimport { AvatarStack as DefaultAvatarStack } from '../Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';\nimport {\n  useChannelStateContext,\n  useComponentContext,\n  useMessageContext,\n  usePollContext,\n  useTranslationContext,\n} from '../../context';\nimport { useStateStore } from '../../store';\nimport { Checkbox } from '../Form';\n\ntype AmountBarProps = {\n  amount: number;\n  className?: string;\n};\n\nexport const AmountBar = ({ amount, className }: AmountBarProps) => (\n  <div\n    aria-hidden='true'\n    className={clsx('str-chat__amount-bar', className)}\n    data-testid='amount-bar'\n    style={\n      {\n        '--str-chat__amount-bar-fulfillment': amount + '%',\n      } as React.CSSProperties\n    }\n  />\n);\n\ntype PollStateSelectorReturnValue = {\n  is_closed: boolean | undefined;\n  latest_votes_by_option: Record<string, PollVote[]>;\n  maxVotedOptionIds: string[];\n  ownVotesByOptionId: Record<string, PollVote>;\n  vote_counts_by_option: Record<string, number>;\n  voting_visibility: VotingVisibility | undefined;\n};\nconst pollStateSelector = (nextValue: PollState): PollStateSelectorReturnValue => ({\n  is_closed: nextValue.is_closed,\n  latest_votes_by_option: nextValue.latest_votes_by_option,\n  maxVotedOptionIds: nextValue.maxVotedOptionIds,\n  ownVotesByOptionId: nextValue.ownVotesByOptionId,\n  vote_counts_by_option: nextValue.vote_counts_by_option,\n  voting_visibility: nextValue.voting_visibility,\n});\n\nexport type PollOptionSelectorProps = {\n  option: PollOption;\n  displayAvatarCount?: number;\n  voteCountVerbose?: boolean;\n};\n\nexport const PollOptionSelector = ({\n  displayAvatarCount,\n  option,\n  voteCountVerbose,\n}: PollOptionSelectorProps) => {\n  const { t } = useTranslationContext();\n  const { channelCapabilities = {} } = useChannelStateContext('PollOptionsShortlist');\n  const { message } = useMessageContext();\n  const {\n    AvatarStack = DefaultAvatarStack,\n    extractDisplayInfo = defaultExtractDisplayInfo,\n  } = useComponentContext();\n  const { poll } = usePollContext();\n  const {\n    is_closed,\n    latest_votes_by_option,\n    maxVotedOptionIds,\n    ownVotesByOptionId,\n    vote_counts_by_option,\n    voting_visibility,\n  } = useStateStore(poll.state, pollStateSelector);\n\n  const canCastVote = channelCapabilities['cast-poll-vote'] && !is_closed;\n  const isInteractive = !!canCastVote;\n  const isSelected = !!ownVotesByOptionId[option.id];\n  const winningOptionCount = maxVotedOptionIds[0]\n    ? vote_counts_by_option[maxVotedOptionIds[0]]\n    : 0;\n\n  const toggleVote = useMemo(\n    () =>\n      debounce(() => {\n        if (!canCastVote) return;\n        const haveVotedForTheOption = !!ownVotesByOptionId[option.id];\n        return haveVotedForTheOption\n          ? poll.removeVote(ownVotesByOptionId[option.id].id, message.id)\n          : poll.castVote(option.id, message.id);\n      }, 100),\n    [canCastVote, message.id, option.id, ownVotesByOptionId, poll],\n  );\n\n  const avatarDisplayInfo = useMemo(\n    () =>\n      latest_votes_by_option?.[option.id] &&\n      (latest_votes_by_option[option.id] as PollVote[])\n        .filter((vote) => !!vote.user && !isVoteAnswer(vote))\n        .slice(0, displayAvatarCount)\n        .map(extractDisplayInfo),\n    [displayAvatarCount, extractDisplayInfo, latest_votes_by_option, option.id],\n  );\n\n  return (\n    <div\n      aria-pressed={isInteractive ? isSelected : undefined}\n      className={clsx('str-chat__poll-option', {\n        'str-chat__poll-option--votable': canCastVote,\n      })}\n      key={`base-poll-option-${option.id}`}\n      onClick={isInteractive ? toggleVote : undefined}\n      onKeyDown={\n        isInteractive\n          ? (event) => {\n              if (event.key !== 'Enter' && event.key !== ' ') return;\n              event.preventDefault();\n              toggleVote();\n            }\n          : undefined\n      }\n      role={isInteractive ? 'button' : undefined}\n      tabIndex={isInteractive ? 0 : undefined}\n    >\n      {canCastVote && <Checkbox checked={isSelected} />}\n      <div className='str-chat__poll-option-data'>\n        <p className='str-chat__poll-option-text'>{option.text}</p>\n        <div className='str-chat__poll-option-votes'>\n          {displayAvatarCount && voting_visibility === 'public' && (\n            <div className='str-chat__poll-option-voters'>\n              <AvatarStack displayInfo={avatarDisplayInfo} size='xs' />\n            </div>\n          )}\n          <div className='str-chat__poll-option-vote-count'>\n            {voteCountVerbose\n              ? t('{{count}} votes', {\n                  count: vote_counts_by_option[option.id] ?? 0,\n                })\n              : (vote_counts_by_option[option.id] ?? 0)}\n          </div>\n        </div>\n      </div>\n      <AmountBar\n        amount={\n          (winningOptionCount &&\n            (vote_counts_by_option[option.id] ?? 0) / winningOptionCount) * 100\n        }\n        className={clsx('str-chat__poll-option__votes-bar', {\n          'str-chat__poll-option__votes-bar--winner':\n            is_closed &&\n            maxVotedOptionIds.length === 1 &&\n            maxVotedOptionIds[0] === option.id,\n        })}\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PollOptionSelector.mjs","names":[],"sources":["../../../../src/components/Poll/PollOptionSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport debounce from 'lodash.debounce';\nimport React, { useMemo } from 'react';\nimport type {\n  PollOptionResponseData,\n  PollState,\n  PollVoteResponseData,\n} from 'stream-chat';\nimport { isVoteAnswer } from 'stream-chat';\nimport { AvatarStack as DefaultAvatarStack } from '../Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';\nimport {\n  useChannel,\n  useComponentContext,\n  useMessageContext,\n  usePollContext,\n  useTranslationContext,\n} from '../../context';\nimport { useStateStore } from '../../store';\nimport { Checkbox } from '../Form';\nimport { useChannelCapabilities } from '../Channel/hooks/useChannelCapabilities';\n\ntype AmountBarProps = {\n  amount: number;\n  className?: string;\n};\n\nexport const AmountBar = ({ amount, className }: AmountBarProps) => (\n  <div\n    aria-hidden='true'\n    className={clsx('str-chat__amount-bar', className)}\n    data-testid='amount-bar'\n    style={\n      {\n        '--str-chat__amount-bar-fulfillment': amount + '%',\n      } as React.CSSProperties\n    }\n  />\n);\n\ntype PollStateSelectorReturnValue = {\n  is_closed: boolean | undefined;\n  latest_votes_by_option: Record<string, PollVoteResponseData[]>;\n  maxVotedOptionIds: string[];\n  ownVotesByOptionId: Record<string, PollVoteResponseData>;\n  vote_counts_by_option: Record<string, number>;\n  voting_visibility: string | undefined;\n};\nconst pollStateSelector = (nextValue: PollState): PollStateSelectorReturnValue => ({\n  is_closed: nextValue.is_closed,\n  latest_votes_by_option: nextValue.latest_votes_by_option,\n  maxVotedOptionIds: nextValue.maxVotedOptionIds,\n  ownVotesByOptionId: nextValue.ownVotesByOptionId,\n  vote_counts_by_option: nextValue.vote_counts_by_option,\n  voting_visibility: nextValue.voting_visibility,\n});\n\nexport type PollOptionSelectorProps = {\n  option: PollOptionResponseData;\n  displayAvatarCount?: number;\n  voteCountVerbose?: boolean;\n};\n\nexport const PollOptionSelector = ({\n  displayAvatarCount,\n  option,\n  voteCountVerbose,\n}: PollOptionSelectorProps) => {\n  const channel = useChannel();\n  const { t } = useTranslationContext();\n  const channelCapabilities = useChannelCapabilities({ cid: channel.cid });\n  const { message } = useMessageContext();\n  const {\n    AvatarStack = DefaultAvatarStack,\n    extractDisplayInfo = defaultExtractDisplayInfo,\n  } = useComponentContext();\n  const { poll } = usePollContext();\n  const {\n    is_closed,\n    latest_votes_by_option,\n    maxVotedOptionIds,\n    ownVotesByOptionId,\n    vote_counts_by_option,\n    voting_visibility,\n  } = useStateStore(poll.state, pollStateSelector);\n\n  const canCastVote = channelCapabilities.has('cast-poll-vote') && !is_closed;\n  const isInteractive = !!canCastVote;\n  const isSelected = !!ownVotesByOptionId[option.id];\n  const winningOptionCount = maxVotedOptionIds[0]\n    ? vote_counts_by_option[maxVotedOptionIds[0]]\n    : 0;\n\n  const toggleVote = useMemo(\n    () =>\n      debounce(() => {\n        if (!canCastVote) return;\n        const haveVotedForTheOption = !!ownVotesByOptionId[option.id];\n        return haveVotedForTheOption\n          ? poll.removeVote(ownVotesByOptionId[option.id].id, message.id)\n          : poll.castVote(option.id, message.id);\n      }, 100),\n    [canCastVote, message.id, option.id, ownVotesByOptionId, poll],\n  );\n\n  const avatarDisplayInfo = useMemo(\n    () =>\n      latest_votes_by_option?.[option.id] &&\n      (latest_votes_by_option[option.id] as PollVoteResponseData[])\n        .filter((vote) => !!vote.user && !isVoteAnswer(vote))\n        .slice(0, displayAvatarCount)\n        .map(extractDisplayInfo),\n    [displayAvatarCount, extractDisplayInfo, latest_votes_by_option, option.id],\n  );\n\n  return (\n    <div\n      aria-pressed={isInteractive ? isSelected : undefined}\n      className={clsx('str-chat__poll-option', {\n        'str-chat__poll-option--votable': canCastVote,\n      })}\n      key={`base-poll-option-${option.id}`}\n      onClick={isInteractive ? toggleVote : undefined}\n      onKeyDown={\n        isInteractive\n          ? (event) => {\n              if (event.key !== 'Enter' && event.key !== ' ') return;\n              event.preventDefault();\n              toggleVote();\n            }\n          : undefined\n      }\n      role={isInteractive ? 'button' : undefined}\n      tabIndex={isInteractive ? 0 : undefined}\n    >\n      {canCastVote && <Checkbox checked={isSelected} />}\n      <div className='str-chat__poll-option-data'>\n        <p className='str-chat__poll-option-text'>{option.text}</p>\n        <div className='str-chat__poll-option-votes'>\n          {displayAvatarCount && voting_visibility === 'public' && (\n            <div className='str-chat__poll-option-voters'>\n              <AvatarStack displayInfo={avatarDisplayInfo} size='xs' />\n            </div>\n          )}\n          <div className='str-chat__poll-option-vote-count'>\n            {voteCountVerbose\n              ? t('poll.optionVotes.votes.text', {\n                  count: vote_counts_by_option[option.id] ?? 0,\n                  defaultValue_one: '{{count}} vote',\n                  defaultValue_other: '{{count}} votes',\n                })\n              : (vote_counts_by_option[option.id] ?? 0)}\n          </div>\n        </div>\n      </div>\n      <AmountBar\n        amount={\n          (winningOptionCount &&\n            (vote_counts_by_option[option.id] ?? 0) / winningOptionCount) * 100\n        }\n        className={clsx('str-chat__poll-option__votes-bar', {\n          'str-chat__poll-option__votes-bar--winner':\n            is_closed &&\n            maxVotedOptionIds.length === 1 &&\n            maxVotedOptionIds[0] === option.id,\n        })}\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -6,24 +6,25 @@ import { extractDisplayInfo } from "../Avatar/utils.mjs";
 import { PopperTooltip } from "../Tooltip/Tooltip.mjs";
 import { useEnterLeaveHandlers } from "../Tooltip/hooks/useEnterLeaveHandlers.mjs";
 import { createElement, useState } from "react";
+import { convertTimestampToDate } from "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Poll/PollVote.tsx
 var PollVoteTimestamp = ({ timestamp }) => {
 	const { t } = useTranslationContext();
 	const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
 	const [referenceElement, setReferenceElement] = useState(null);
-	const timestampDate = new Date(timestamp);
+	const timestampDate = timestamp ? new Date(timestamp) : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__poll-vote__timestamp",
 		onMouseEnter: handleEnter,
 		onMouseLeave: handleLeave,
 		ref: setReferenceElement,
-		children: [t("timestamp/PollVote", { timestamp: timestampDate }), /* @__PURE__ */ jsx(PopperTooltip, {
+		children: [t("timestamp.PollVote", { timestamp: timestampDate }), /* @__PURE__ */ jsx(PopperTooltip, {
 			offset: [0, 5],
 			placement: "bottom",
 			referenceElement,
 			visible: tooltipVisible,
-			children: t("timestamp/PollVoteTooltip", { timestamp: timestampDate })
+			children: t("timestamp.PollVoteTooltip", { timestamp: timestampDate })
 		})]
 	});
 };
@@ -31,7 +32,7 @@ var PollVoteAuthor = ({ vote }) => {
 	const { t } = useTranslationContext();
 	const { client } = useChatContext();
 	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
-	const displayName = client.user?.id && client.user.id === vote.user?.id ? t("You") : vote.user?.name || vote.user?.id || t("Anonymous");
+	const displayName = client.user?.id && client.user.id === vote.user?.id ? t("common.you.label", "You") : vote.user?.name || vote.user?.id || t("common.anonymous.label", "Anonymous");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__poll-vote__author",
 		children: [vote.user && /* @__PURE__ */ createElement(Avatar$1, {
@@ -47,7 +48,7 @@ var PollVoteAuthor = ({ vote }) => {
 };
 var PollVote = ({ vote }) => /* @__PURE__ */ jsxs("div", {
 	className: "str-chat__poll-vote",
-	children: [/* @__PURE__ */ jsx(PollVoteAuthor, { vote }), /* @__PURE__ */ jsx(PollVoteTimestamp, { timestamp: vote.created_at })]
+	children: [/* @__PURE__ */ jsx(PollVoteAuthor, { vote }), /* @__PURE__ */ jsx(PollVoteTimestamp, { timestamp: convertTimestampToDate(vote.created_at) })]
 });
 var PollVoteListing = ({ votes }) => /* @__PURE__ */ jsx("div", {
 	className: "str-chat__poll-vote-listing",

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

@@ -1 +1 @@
-{"version":3,"file":"PollVote.mjs","names":[],"sources":["../../../../src/components/Poll/PollVote.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Avatar as DefaultAvatar } from '../Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';\nimport { PopperTooltip } from '../Tooltip';\nimport { useEnterLeaveHandlers } from '../Tooltip/hooks';\nimport {\n  useChatContext,\n  useComponentContext,\n  useTranslationContext,\n} from '../../context';\n\nimport type { PollVote as PollVoteType } from 'stream-chat';\n\nconst PollVoteTimestamp = ({ timestamp }: { timestamp: string }) => {\n  const { t } = useTranslationContext();\n  const { handleEnter, handleLeave, tooltipVisible } =\n    useEnterLeaveHandlers<HTMLSpanElement>();\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);\n  const timestampDate = new Date(timestamp);\n  return (\n    <div\n      className='str-chat__poll-vote__timestamp'\n      onMouseEnter={handleEnter}\n      onMouseLeave={handleLeave}\n      ref={setReferenceElement}\n    >\n      {t('timestamp/PollVote', { timestamp: timestampDate })}\n      <PopperTooltip\n        offset={[0, 5]}\n        placement='bottom'\n        referenceElement={referenceElement}\n        visible={tooltipVisible}\n      >\n        {t('timestamp/PollVoteTooltip', { timestamp: timestampDate })}\n      </PopperTooltip>\n    </div>\n  );\n};\n\ntype PollVoteProps = {\n  vote: PollVoteType;\n};\n\ntype PollVoteAuthor = PollVoteProps;\n\nconst PollVoteAuthor = ({ vote }: PollVoteAuthor) => {\n  const { t } = useTranslationContext();\n  const { client } = useChatContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const displayName =\n    client.user?.id && client.user.id === vote.user?.id\n      ? t('You')\n      : vote.user?.name || vote.user?.id || t('Anonymous');\n\n  return (\n    <div className='str-chat__poll-vote__author'>\n      {vote.user && (\n        <Avatar\n          {...extractDisplayInfo({ user: vote.user })}\n          className='str-chat__avatar--poll-vote-author'\n          key={`poll-vote-${vote.id}-avatar-${vote.user.id}`}\n          size='md'\n        />\n      )}\n      <div className='str-chat__poll-vote__author__name'>{displayName}</div>\n    </div>\n  );\n};\n\nexport const PollVote = ({ vote }: PollVoteProps) => (\n  <div className='str-chat__poll-vote'>\n    <PollVoteAuthor vote={vote} />\n    <PollVoteTimestamp timestamp={vote.created_at} />\n  </div>\n);\n\nexport type PollVoteListingProps = {\n  votes: PollVoteType[];\n};\n\nexport const PollVoteListing = ({ votes }: PollVoteListingProps) => (\n  <div className='str-chat__poll-vote-listing'>\n    {votes.map((vote) => (\n      <PollVote key={`poll-vote-${vote.id}`} vote={vote} />\n    ))}\n  </div>\n);\n"],"mappings":";;;;;;;;;;AAaA,IAAM,qBAAqB,EAAE,gBAAuC;CAClE,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,aAAa,aAAa,mBAChC,sBAAuC;CACzC,MAAM,CAAC,kBAAkB,uBAAuB,SAAiC,IAAI;CACrF,MAAM,gBAAgB,IAAI,KAAK,SAAS;CACxC,OACE,qBAAC,OAAD;EACE,WAAU;EACV,cAAc;EACd,cAAc;EACd,KAAK;YAJP,CAMG,EAAE,sBAAsB,EAAE,WAAW,cAAc,CAAC,GACrD,oBAAC,eAAD;GACE,QAAQ,CAAC,GAAG,CAAC;GACb,WAAU;GACQ;GAClB,SAAS;aAER,EAAE,6BAA6B,EAAE,WAAW,cAAc,CAAC;EAC/C,CAAA,CACZ;;AAET;AAQA,IAAM,kBAAkB,EAAE,WAA2B;CACnD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAA,WAAS,QAAe,oBAAA,uBAAqB,uBACnD,oBAAoB;CACtB,MAAM,cACJ,OAAO,MAAM,MAAM,OAAO,KAAK,OAAO,KAAK,MAAM,KAC7C,EAAE,KAAK,IACP,KAAK,MAAM,QAAQ,KAAK,MAAM,MAAM,EAAE,WAAW;CAEvD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,KAAK,QACJ,8BAAC,UAAD;GACE,GAAI,qBAAmB,EAAE,MAAM,KAAK,KAAK,CAAC;GAC1C,WAAU;GACV,KAAK,aAAa,KAAK,GAAG,UAAU,KAAK,KAAK;GAC9C,MAAK;EACN,CAAA,GAEH,oBAAC,OAAD;GAAK,WAAU;aAAqC;EAAiB,CAAA,CAClE;;AAET;AAEA,IAAa,YAAY,EAAE,WACzB,qBAAC,OAAD;CAAK,WAAU;WAAf,CACE,oBAAC,gBAAD,EAAsB,KAAO,CAAA,GAC7B,oBAAC,mBAAD,EAAmB,WAAW,KAAK,WAAa,CAAA,CAC7C;;AAOP,IAAa,mBAAmB,EAAE,YAChC,oBAAC,OAAD;CAAK,WAAU;WACZ,MAAM,KAAK,SACV,oBAAC,UAAD,EAA6C,KAAO,GAArC,aAAa,KAAK,IAAmB,CACrD;AACE,CAAA"}
+{"version":3,"file":"PollVote.mjs","names":[],"sources":["../../../../src/components/Poll/PollVote.tsx"],"sourcesContent":["import { convertTimestampToDate } from 'stream-chat';\nimport React, { useState } from 'react';\nimport { Avatar as DefaultAvatar } from '../Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';\nimport { PopperTooltip } from '../Tooltip';\nimport { useEnterLeaveHandlers } from '../Tooltip/hooks';\nimport {\n  useChatContext,\n  useComponentContext,\n  useTranslationContext,\n} from '../../context';\n\nimport type { PollVoteResponseData as PollVoteType } from 'stream-chat';\n\nconst PollVoteTimestamp = ({ timestamp }: { timestamp?: string | Date }) => {\n  const { t } = useTranslationContext();\n  const { handleEnter, handleLeave, tooltipVisible } =\n    useEnterLeaveHandlers<HTMLSpanElement>();\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);\n  const timestampDate = timestamp ? new Date(timestamp) : undefined;\n  return (\n    <div\n      className='str-chat__poll-vote__timestamp'\n      onMouseEnter={handleEnter}\n      onMouseLeave={handleLeave}\n      ref={setReferenceElement}\n    >\n      {t('timestamp.PollVote', { timestamp: timestampDate })}\n      <PopperTooltip\n        offset={[0, 5]}\n        placement='bottom'\n        referenceElement={referenceElement}\n        visible={tooltipVisible}\n      >\n        {t('timestamp.PollVoteTooltip', { timestamp: timestampDate })}\n      </PopperTooltip>\n    </div>\n  );\n};\n\ntype PollVoteProps = {\n  vote: PollVoteType;\n};\n\ntype PollVoteAuthor = PollVoteProps;\n\nconst PollVoteAuthor = ({ vote }: PollVoteAuthor) => {\n  const { t } = useTranslationContext();\n  const { client } = useChatContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const displayName =\n    client.user?.id && client.user.id === vote.user?.id\n      ? t('common.you.label', 'You')\n      : vote.user?.name || vote.user?.id || t('common.anonymous.label', 'Anonymous');\n\n  return (\n    <div className='str-chat__poll-vote__author'>\n      {vote.user && (\n        <Avatar\n          {...extractDisplayInfo({ user: vote.user })}\n          className='str-chat__avatar--poll-vote-author'\n          key={`poll-vote-${vote.id}-avatar-${vote.user.id}`}\n          size='md'\n        />\n      )}\n      <div className='str-chat__poll-vote__author__name'>{displayName}</div>\n    </div>\n  );\n};\n\nexport const PollVote = ({ vote }: PollVoteProps) => (\n  <div className='str-chat__poll-vote'>\n    <PollVoteAuthor vote={vote} />\n    <PollVoteTimestamp timestamp={convertTimestampToDate(vote.created_at)} />\n  </div>\n);\n\nexport type PollVoteListingProps = {\n  votes: PollVoteType[];\n};\n\nexport const PollVoteListing = ({ votes }: PollVoteListingProps) => (\n  <div className='str-chat__poll-vote-listing'>\n    {votes.map((vote) => (\n      <PollVote key={`poll-vote-${vote.id}`} vote={vote} />\n    ))}\n  </div>\n);\n"],"mappings":";;;;;;;;;;;AAcA,IAAM,qBAAqB,EAAE,gBAA+C;CAC1E,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,aAAa,aAAa,mBAChC,sBAAuC;CACzC,MAAM,CAAC,kBAAkB,uBAAuB,SAAiC,IAAI;CACrF,MAAM,gBAAgB,YAAY,IAAI,KAAK,SAAS,IAAI,KAAA;CACxD,OACE,qBAAC,OAAD;EACE,WAAU;EACV,cAAc;EACd,cAAc;EACd,KAAK;YAJP,CAMG,EAAE,sBAAsB,EAAE,WAAW,cAAc,CAAC,GACrD,oBAAC,eAAD;GACE,QAAQ,CAAC,GAAG,CAAC;GACb,WAAU;GACQ;GAClB,SAAS;aAER,EAAE,6BAA6B,EAAE,WAAW,cAAc,CAAC;EAC/C,CAAA,CACZ;;AAET;AAQA,IAAM,kBAAkB,EAAE,WAA2B;CACnD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAA,WAAS,QAAe,oBAAA,uBAAqB,uBACnD,oBAAoB;CACtB,MAAM,cACJ,OAAO,MAAM,MAAM,OAAO,KAAK,OAAO,KAAK,MAAM,KAC7C,EAAE,oBAAoB,KAAK,IAC3B,KAAK,MAAM,QAAQ,KAAK,MAAM,MAAM,EAAE,0BAA0B,WAAW;CAEjF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,KAAK,QACJ,8BAAC,UAAD;GACE,GAAI,qBAAmB,EAAE,MAAM,KAAK,KAAK,CAAC;GAC1C,WAAU;GACV,KAAK,aAAa,KAAK,GAAG,UAAU,KAAK,KAAK;GAC9C,MAAK;EACN,CAAA,GAEH,oBAAC,OAAD;GAAK,WAAU;aAAqC;EAAiB,CAAA,CAClE;;AAET;AAEA,IAAa,YAAY,EAAE,WACzB,qBAAC,OAAD;CAAK,WAAU;WAAf,CACE,oBAAC,gBAAD,EAAsB,KAAO,CAAA,GAC7B,oBAAC,mBAAD,EAAmB,WAAW,uBAAuB,KAAK,UAAU,EAAI,CAAA,CACrE;;AAOP,IAAa,mBAAmB,EAAE,YAChC,oBAAC,OAAD;CAAK,WAAU;WACZ,MAAM,KAAK,SACV,oBAAC,UAAD,EAA6C,KAAO,GAArC,aAAa,KAAK,IAAmB,CACrD;AACE,CAAA"}

package/dist/es/components/Poll/hooks/useManagePollVotesRealtime.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useManagePollVotesRealtime.mjs","names":[],"sources":["../../../../../src/components/Poll/hooks/useManagePollVotesRealtime.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { isVoteAnswer } from 'stream-chat';\nimport { useChatContext } from '../../../context';\nimport type { Event, PollAnswer, PollVote } from 'stream-chat';\n\nimport type { CursorPaginatorStateStore } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';\n\nexport function useManagePollVotesRealtime<T extends PollVote | PollAnswer = PollVote>(\n  managedVoteType: 'answer' | 'vote',\n  cursorPaginatorState?: CursorPaginatorStateStore<T>,\n  optionId?: string,\n) {\n  const { client } = useChatContext();\n  const [votesInRealtime, setVotesInRealtime] = useState<T[]>(\n    cursorPaginatorState?.getLatestValue().items ?? [],\n  );\n\n  useEffect(\n    () =>\n      cursorPaginatorState?.subscribeWithSelector(\n        (state) => [state.latestPageItems],\n        ([latestPageItems]) =>\n          setVotesInRealtime((prev) => [...prev, ...latestPageItems]),\n      ),\n    [cursorPaginatorState],\n  );\n\n  useEffect(() => {\n    const handleVoteEvent = (event: Event) => {\n      if (!event.poll_vote) return;\n      const isAnswer = isVoteAnswer(event.poll_vote);\n      if (\n        (managedVoteType === 'answer' && !isAnswer) ||\n        (managedVoteType === 'vote' &&\n          (isAnswer || event.poll_vote.option_id !== optionId))\n      )\n        return;\n\n      if (event.type === 'poll.vote_removed') {\n        setVotesInRealtime((prev) =>\n          event.poll_vote\n            ? prev.filter((vote) => vote.id !== (event.poll_vote as T).id)\n            : prev,\n        );\n      }\n      if (event.type === 'poll.vote_changed') {\n        setVotesInRealtime((prev) =>\n          event.poll_vote\n            ? prev.filter((vote) => vote.id !== (event.poll_vote as T).id)\n            : prev,\n        );\n      }\n      if (['poll.vote_casted', 'poll.vote_changed'].includes(event.type)) {\n        setVotesInRealtime((prev) =>\n          event.poll_vote ? [event.poll_vote as T, ...prev] : prev,\n        );\n      }\n    };\n\n    const voteCastedSubscription = client.on('poll.vote_casted', handleVoteEvent);\n    const voteRemovedSubscription = client.on('poll.vote_removed', handleVoteEvent);\n    const voteChangedSubscription = client.on('poll.vote_changed', handleVoteEvent);\n\n    return () => {\n      voteCastedSubscription.unsubscribe();\n      voteRemovedSubscription.unsubscribe();\n      voteChangedSubscription.unsubscribe();\n    };\n  }, [client, optionId, managedVoteType]);\n\n  return votesInRealtime;\n}\n"],"mappings":";;;;AAOA,SAAgB,2BACd,iBACA,sBACA,UACA;CACA,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,sBAAsB,eAAe,CAAC,CAAC,SAAS,CAAC,CACnD;CAEA,gBAEI,sBAAsB,uBACnB,UAAU,CAAC,MAAM,eAAe,IAChC,CAAC,qBACA,oBAAoB,SAAS,CAAC,GAAG,MAAM,GAAG,eAAe,CAAC,CAC9D,GACF,CAAC,oBAAoB,CACvB;CAEA,gBAAgB;EACd,MAAM,mBAAmB,UAAiB;GACxC,IAAI,CAAC,MAAM,WAAW;GACtB,MAAM,WAAW,aAAa,MAAM,SAAS;GAC7C,IACG,oBAAoB,YAAY,CAAC,YACjC,oBAAoB,WAClB,YAAY,MAAM,UAAU,cAAc,WAE7C;GAEF,IAAI,MAAM,SAAS,qBACjB,oBAAoB,SAClB,MAAM,YACF,KAAK,QAAQ,SAAS,KAAK,OAAQ,MAAM,UAAgB,EAAE,IAC3D,IACN;GAEF,IAAI,MAAM,SAAS,qBACjB,oBAAoB,SAClB,MAAM,YACF,KAAK,QAAQ,SAAS,KAAK,OAAQ,MAAM,UAAgB,EAAE,IAC3D,IACN;GAEF,IAAI,CAAC,oBAAoB,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI,GAC/D,oBAAoB,SAClB,MAAM,YAAY,CAAC,MAAM,WAAgB,GAAG,IAAI,IAAI,IACtD;EAEJ;EAEA,MAAM,yBAAyB,OAAO,GAAG,oBAAoB,eAAe;EAC5E,MAAM,0BAA0B,OAAO,GAAG,qBAAqB,eAAe;EAC9E,MAAM,0BAA0B,OAAO,GAAG,qBAAqB,eAAe;EAE9E,aAAa;GACX,uBAAuB,YAAY;GACnC,wBAAwB,YAAY;GACpC,wBAAwB,YAAY;EACtC;CACF,GAAG;EAAC;EAAQ;EAAU;CAAe,CAAC;CAEtC,OAAO;AACT"}
+{"version":3,"file":"useManagePollVotesRealtime.mjs","names":[],"sources":["../../../../../src/components/Poll/hooks/useManagePollVotesRealtime.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { isVoteAnswer } from 'stream-chat';\nimport { useChatContext } from '../../../context';\nimport type { EventPayload, PollVoteResponseData } from 'stream-chat';\n\nimport type { CursorPaginatorStateStore } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';\n\nexport function useManagePollVotesRealtime<\n  T extends PollVoteResponseData = PollVoteResponseData,\n>(\n  managedVoteType: 'answer' | 'vote',\n  cursorPaginatorState?: CursorPaginatorStateStore<T>,\n  optionId?: string,\n) {\n  const { client } = useChatContext();\n  const [votesInRealtime, setVotesInRealtime] = useState<T[]>(\n    cursorPaginatorState?.getLatestValue().items ?? [],\n  );\n\n  useEffect(\n    () =>\n      cursorPaginatorState?.subscribeWithSelector(\n        (state) => [state.latestPageItems],\n        ([latestPageItems]) =>\n          setVotesInRealtime((prev) => [...prev, ...latestPageItems]),\n      ),\n    [cursorPaginatorState],\n  );\n\n  useEffect(() => {\n    const handleVoteEvent = (\n      event: EventPayload<'poll.vote_casted' | 'poll.vote_changed' | 'poll.vote_removed'>,\n    ) => {\n      if (!event.poll_vote) return;\n      const isAnswer = isVoteAnswer(event.poll_vote);\n      if (\n        (managedVoteType === 'answer' && !isAnswer) ||\n        (managedVoteType === 'vote' &&\n          (isAnswer || event.poll_vote.option_id !== optionId))\n      )\n        return;\n\n      if (event.type === 'poll.vote_removed') {\n        setVotesInRealtime((prev) =>\n          event.poll_vote\n            ? prev.filter((vote) => vote.id !== (event.poll_vote as T).id)\n            : prev,\n        );\n      }\n      if (event.type === 'poll.vote_changed') {\n        setVotesInRealtime((prev) =>\n          event.poll_vote\n            ? prev.filter((vote) => vote.id !== (event.poll_vote as T).id)\n            : prev,\n        );\n      }\n      if (['poll.vote_casted', 'poll.vote_changed'].includes(event.type)) {\n        setVotesInRealtime((prev) =>\n          event.poll_vote ? [event.poll_vote as T, ...prev] : prev,\n        );\n      }\n    };\n\n    const voteCastedSubscription = client.on('poll.vote_casted', handleVoteEvent);\n    const voteRemovedSubscription = client.on('poll.vote_removed', handleVoteEvent);\n    const voteChangedSubscription = client.on('poll.vote_changed', handleVoteEvent);\n\n    return () => {\n      voteCastedSubscription.unsubscribe();\n      voteRemovedSubscription.unsubscribe();\n      voteChangedSubscription.unsubscribe();\n    };\n  }, [client, optionId, managedVoteType]);\n\n  return votesInRealtime;\n}\n"],"mappings":";;;;AAOA,SAAgB,2BAGd,iBACA,sBACA,UACA;CACA,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,sBAAsB,eAAe,CAAC,CAAC,SAAS,CAAC,CACnD;CAEA,gBAEI,sBAAsB,uBACnB,UAAU,CAAC,MAAM,eAAe,IAChC,CAAC,qBACA,oBAAoB,SAAS,CAAC,GAAG,MAAM,GAAG,eAAe,CAAC,CAC9D,GACF,CAAC,oBAAoB,CACvB;CAEA,gBAAgB;EACd,MAAM,mBACJ,UACG;GACH,IAAI,CAAC,MAAM,WAAW;GACtB,MAAM,WAAW,aAAa,MAAM,SAAS;GAC7C,IACG,oBAAoB,YAAY,CAAC,YACjC,oBAAoB,WAClB,YAAY,MAAM,UAAU,cAAc,WAE7C;GAEF,IAAI,MAAM,SAAS,qBACjB,oBAAoB,SAClB,MAAM,YACF,KAAK,QAAQ,SAAS,KAAK,OAAQ,MAAM,UAAgB,EAAE,IAC3D,IACN;GAEF,IAAI,MAAM,SAAS,qBACjB,oBAAoB,SAClB,MAAM,YACF,KAAK,QAAQ,SAAS,KAAK,OAAQ,MAAM,UAAgB,EAAE,IAC3D,IACN;GAEF,IAAI,CAAC,oBAAoB,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI,GAC/D,oBAAoB,SAClB,MAAM,YAAY,CAAC,MAAM,WAAgB,GAAG,IAAI,IAAI,IACtD;EAEJ;EAEA,MAAM,yBAAyB,OAAO,GAAG,oBAAoB,eAAe;EAC5E,MAAM,0BAA0B,OAAO,GAAG,qBAAqB,eAAe;EAC9E,MAAM,0BAA0B,OAAO,GAAG,qBAAqB,eAAe;EAE9E,aAAa;GACX,uBAAuB,YAAY;GACnC,wBAAwB,YAAY;GACpC,wBAAwB,YAAY;EACtC;CACF,GAAG;EAAC;EAAQ;EAAU;CAAe,CAAC;CAEtC,OAAO;AACT"}

package/dist/es/components/Poll/hooks/usePollAnswerPagination.mjs

@@ -1,7 +1,7 @@
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
-import { usePollContext } from "../../../context/PollContext.mjs";
 import { useManagePollVotesRealtime } from "./useManagePollVotesRealtime.mjs";
 import { useCursorPaginator } from "../../InfiniteScrollPaginator/hooks/useCursorPaginator.mjs";
+import { usePollContext } from "../../../context/PollContext.mjs";
 import { useCallback } from "react";
 //#region src/components/Poll/hooks/usePollAnswerPagination.ts
 var paginationStateSelector = (state) => [
@@ -18,10 +18,10 @@ var usePollAnswerPagination = ({ paginationParams } = {}) => {
 				...paginationParams?.options,
 				next
 			},
-			sort: {
-				created_at: -1,
-				...paginationParams?.sort
-			}
+			sort: [{
+				direction: -1,
+				field: "created_at"
+			}, ...paginationParams?.sort ?? []]
 		});
 		return {
 			items: votes,

package/dist/es/components/Poll/hooks/usePollAnswerPagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePollAnswerPagination.mjs","names":[],"sources":["../../../../../src/components/Poll/hooks/usePollAnswerPagination.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useManagePollVotesRealtime } from './useManagePollVotesRealtime';\nimport type {\n  CursorPaginatorState,\n  PaginationFn,\n} from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';\nimport { useCursorPaginator } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';\nimport { usePollContext } from '../../../context';\n\nimport { useStateStore } from '../../../store';\nimport type { PollAnswer, PollAnswersQueryParams, PollVote } from 'stream-chat';\n\nconst paginationStateSelector = (\n  state: CursorPaginatorState<PollVote>,\n): [Error | undefined, boolean, boolean] => [\n  state.error,\n  state.hasNextPage,\n  state.loading,\n];\n\ntype UsePollAnswerPaginationParams = {\n  paginationParams?: PollAnswersQueryParams;\n};\n\nexport const usePollAnswerPagination = ({\n  paginationParams,\n}: UsePollAnswerPaginationParams = {}) => {\n  const { poll } = usePollContext();\n\n  const paginationFn = useCallback<PaginationFn<PollAnswer>>(\n    async (next) => {\n      const { next: newNext, votes } = await poll.queryAnswers({\n        filter: paginationParams?.filter,\n        options: !next\n          ? paginationParams?.options\n          : { ...paginationParams?.options, next },\n        sort: { created_at: -1, ...paginationParams?.sort },\n      });\n      return { items: votes, next: newNext };\n    },\n    [paginationParams, poll],\n  );\n\n  const { cursorPaginatorState, loadMore } = useCursorPaginator(paginationFn, true);\n  const answers = useManagePollVotesRealtime<PollAnswer>('answer', cursorPaginatorState);\n  const [error, hasNextPage, loading] = useStateStore(\n    cursorPaginatorState,\n    paginationStateSelector,\n  );\n\n  return {\n    answers,\n    error,\n    hasNextPage,\n    loading,\n    loadMore,\n  };\n};\n"],"mappings":";;;;;;AAYA,IAAM,2BACJ,UAC0C;CAC1C,MAAM;CACN,MAAM;CACN,MAAM;AACR;AAMA,IAAa,2BAA2B,EACtC,qBACiC,CAAC,MAAM;CACxC,MAAM,EAAE,SAAS,eAAe;CAgBhC,MAAM,EAAE,sBAAsB,aAAa,mBAdtB,YACnB,OAAO,SAAS;EACd,MAAM,EAAE,MAAM,SAAS,UAAU,MAAM,KAAK,aAAa;GACvD,QAAQ,kBAAkB;GAC1B,SAAS,CAAC,OACN,kBAAkB,UAClB;IAAE,GAAG,kBAAkB;IAAS;GAAK;GACzC,MAAM;IAAE,YAAY;IAAI,GAAG,kBAAkB;GAAK;EACpD,CAAC;EACD,OAAO;GAAE,OAAO;GAAO,MAAM;EAAQ;CACvC,GACA,CAAC,kBAAkB,IAAI,CAGqC,GAAc,IAAI;CAChF,MAAM,UAAU,2BAAuC,UAAU,oBAAoB;CACrF,MAAM,CAAC,OAAO,aAAa,WAAW,cACpC,sBACA,uBACF;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"usePollAnswerPagination.mjs","names":[],"sources":["../../../../../src/components/Poll/hooks/usePollAnswerPagination.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useManagePollVotesRealtime } from './useManagePollVotesRealtime';\nimport type {\n  CursorPaginatorState,\n  PaginationFn,\n} from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';\nimport { useCursorPaginator } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';\nimport { usePollContext } from '../../../context';\n\nimport { useStateStore } from '../../../store';\nimport type { PollAnswersQueryParams, PollVoteResponseData } from 'stream-chat';\n\nconst paginationStateSelector = (\n  state: CursorPaginatorState<PollVoteResponseData>,\n): [Error | undefined, boolean, boolean] => [\n  state.error,\n  state.hasNextPage,\n  state.loading,\n];\n\ntype UsePollAnswerPaginationParams = {\n  paginationParams?: PollAnswersQueryParams;\n};\n\nexport const usePollAnswerPagination = ({\n  paginationParams,\n}: UsePollAnswerPaginationParams = {}) => {\n  const { poll } = usePollContext();\n\n  const paginationFn = useCallback<PaginationFn<PollVoteResponseData>>(\n    async (next) => {\n      const { next: newNext, votes } = await poll.queryAnswers({\n        filter: paginationParams?.filter,\n        options: !next\n          ? paginationParams?.options\n          : { ...paginationParams?.options, next },\n        sort: [{ direction: -1, field: 'created_at' }, ...(paginationParams?.sort ?? [])],\n      });\n      return { items: votes, next: newNext };\n    },\n    [paginationParams, poll],\n  );\n\n  const { cursorPaginatorState, loadMore } = useCursorPaginator(paginationFn, true);\n  const answers = useManagePollVotesRealtime<PollVoteResponseData>(\n    'answer',\n    cursorPaginatorState,\n  );\n  const [error, hasNextPage, loading] = useStateStore(\n    cursorPaginatorState,\n    paginationStateSelector,\n  );\n\n  return {\n    answers,\n    error,\n    hasNextPage,\n    loading,\n    loadMore,\n  };\n};\n"],"mappings":";;;;;;AAYA,IAAM,2BACJ,UAC0C;CAC1C,MAAM;CACN,MAAM;CACN,MAAM;AACR;AAMA,IAAa,2BAA2B,EACtC,qBACiC,CAAC,MAAM;CACxC,MAAM,EAAE,SAAS,eAAe;CAgBhC,MAAM,EAAE,sBAAsB,aAAa,mBAdtB,YACnB,OAAO,SAAS;EACd,MAAM,EAAE,MAAM,SAAS,UAAU,MAAM,KAAK,aAAa;GACvD,QAAQ,kBAAkB;GAC1B,SAAS,CAAC,OACN,kBAAkB,UAClB;IAAE,GAAG,kBAAkB;IAAS;GAAK;GACzC,MAAM,CAAC;IAAE,WAAW;IAAI,OAAO;GAAa,GAAG,GAAI,kBAAkB,QAAQ,CAAC,CAAE;EAClF,CAAC;EACD,OAAO;GAAE,OAAO;GAAO,MAAM;EAAQ;CACvC,GACA,CAAC,kBAAkB,IAAI,CAGqC,GAAc,IAAI;CAChF,MAAM,UAAU,2BACd,UACA,oBACF;CACA,MAAM,CAAC,OAAO,aAAa,WAAW,cACpC,sBACA,uBACF;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/es/components/Poll/hooks/usePollOptionVotesPagination.mjs

@@ -1,7 +1,7 @@
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
-import { usePollContext } from "../../../context/PollContext.mjs";
 import { useManagePollVotesRealtime } from "./useManagePollVotesRealtime.mjs";
 import { useCursorPaginator } from "../../InfiniteScrollPaginator/hooks/useCursorPaginator.mjs";
+import { usePollContext } from "../../../context/PollContext.mjs";
 import { useCallback } from "react";
 //#region src/components/Poll/hooks/usePollOptionVotesPagination.ts
 var paginationStateSelector = (state) => [
@@ -16,12 +16,13 @@ var usePollOptionVotesPagination = ({ paginationParams }) => {
 			filter: paginationParams.filter,
 			options: !next ? paginationParams?.options : {
 				...paginationParams?.options,
+				limit: 5,
 				next
 			},
-			sort: {
-				created_at: -1,
-				...paginationParams?.sort
-			}
+			sort: [{
+				direction: -1,
+				field: "created_at"
+			}, ...paginationParams?.sort ?? []]
 		});
 		return {
 			items: votes,

package/dist/es/components/Poll/hooks/usePollOptionVotesPagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePollOptionVotesPagination.mjs","names":[],"sources":["../../../../../src/components/Poll/hooks/usePollOptionVotesPagination.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useManagePollVotesRealtime } from './useManagePollVotesRealtime';\nimport type {\n  CursorPaginatorState,\n  PaginationFn,\n} from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';\nimport { useCursorPaginator } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';\nimport { useStateStore } from '../../../store';\nimport { usePollContext } from '../../../context';\n\nimport type { PollOptionVotesQueryParams, PollVote } from 'stream-chat';\n\nconst paginationStateSelector = (\n  state: CursorPaginatorState<PollVote>,\n): [Error | undefined, boolean, boolean] => [\n  state.error,\n  state.hasNextPage,\n  state.loading,\n];\n\ntype UsePollOptionVotesPaginationParams = {\n  paginationParams: PollOptionVotesQueryParams;\n};\n\nexport const usePollOptionVotesPagination = ({\n  paginationParams,\n}: UsePollOptionVotesPaginationParams) => {\n  const { poll } = usePollContext();\n\n  const paginationFn = useCallback<PaginationFn<PollVote>>(\n    async (next) => {\n      const { next: newNext, votes } = await poll.queryOptionVotes({\n        filter: paginationParams.filter,\n        options: !next\n          ? paginationParams?.options\n          : { ...paginationParams?.options, next },\n        sort: { created_at: -1, ...paginationParams?.sort },\n      });\n      return { items: votes, next: newNext };\n    },\n    [paginationParams, poll],\n  );\n\n  const { cursorPaginatorState, loadMore } = useCursorPaginator(paginationFn, true);\n  const votes = useManagePollVotesRealtime<PollVote>(\n    'vote',\n    cursorPaginatorState,\n    paginationParams.filter.option_id,\n  );\n  const [error, hasNextPage, loading] = useStateStore(\n    cursorPaginatorState,\n    paginationStateSelector,\n  );\n\n  return {\n    error,\n    hasNextPage,\n    loading,\n    loadMore,\n    votes,\n  };\n};\n"],"mappings":";;;;;;AAYA,IAAM,2BACJ,UAC0C;CAC1C,MAAM;CACN,MAAM;CACN,MAAM;AACR;AAMA,IAAa,gCAAgC,EAC3C,uBACwC;CACxC,MAAM,EAAE,SAAS,eAAe;CAgBhC,MAAM,EAAE,sBAAsB,aAAa,mBAdtB,YACnB,OAAO,SAAS;EACd,MAAM,EAAE,MAAM,SAAS,UAAU,MAAM,KAAK,iBAAiB;GAC3D,QAAQ,iBAAiB;GACzB,SAAS,CAAC,OACN,kBAAkB,UAClB;IAAE,GAAG,kBAAkB;IAAS;GAAK;GACzC,MAAM;IAAE,YAAY;IAAI,GAAG,kBAAkB;GAAK;EACpD,CAAC;EACD,OAAO;GAAE,OAAO;GAAO,MAAM;EAAQ;CACvC,GACA,CAAC,kBAAkB,IAAI,CAGqC,GAAc,IAAI;CAChF,MAAM,QAAQ,2BACZ,QACA,sBACA,iBAAiB,OAAO,SAC1B;CACA,MAAM,CAAC,OAAO,aAAa,WAAW,cACpC,sBACA,uBACF;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"usePollOptionVotesPagination.mjs","names":[],"sources":["../../../../../src/components/Poll/hooks/usePollOptionVotesPagination.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useManagePollVotesRealtime } from './useManagePollVotesRealtime';\nimport type {\n  CursorPaginatorState,\n  PaginationFn,\n} from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';\nimport { useCursorPaginator } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';\nimport { useStateStore } from '../../../store';\nimport { usePollContext } from '../../../context';\n\nimport type { PollOptionVotesQueryParams, PollVoteResponseData } from 'stream-chat';\n\nconst paginationStateSelector = (\n  state: CursorPaginatorState<PollVoteResponseData>,\n): [Error | undefined, boolean, boolean] => [\n  state.error,\n  state.hasNextPage,\n  state.loading,\n];\n\ntype UsePollOptionVotesPaginationParams = {\n  paginationParams: PollOptionVotesQueryParams;\n};\n\nexport const usePollOptionVotesPagination = ({\n  paginationParams,\n}: UsePollOptionVotesPaginationParams) => {\n  const { poll } = usePollContext();\n\n  const paginationFn = useCallback<PaginationFn<PollVoteResponseData>>(\n    async (next) => {\n      const { next: newNext, votes } = await poll.queryOptionVotes({\n        filter: paginationParams.filter,\n        options: !next\n          ? paginationParams?.options\n          : { ...paginationParams?.options, limit: 5, next },\n        sort: [{ direction: -1, field: 'created_at' }, ...(paginationParams?.sort ?? [])],\n      });\n      return { items: votes, next: newNext };\n    },\n    [paginationParams, poll],\n  );\n\n  const { cursorPaginatorState, loadMore } = useCursorPaginator(paginationFn, true);\n  const votes = useManagePollVotesRealtime<PollVoteResponseData>(\n    'vote',\n    cursorPaginatorState,\n    paginationParams.filter.option_id,\n  );\n  const [error, hasNextPage, loading] = useStateStore(\n    cursorPaginatorState,\n    paginationStateSelector,\n  );\n\n  return {\n    error,\n    hasNextPage,\n    loading,\n    loadMore,\n    votes,\n  };\n};\n"],"mappings":";;;;;;AAYA,IAAM,2BACJ,UAC0C;CAC1C,MAAM;CACN,MAAM;CACN,MAAM;AACR;AAMA,IAAa,gCAAgC,EAC3C,uBACwC;CACxC,MAAM,EAAE,SAAS,eAAe;CAgBhC,MAAM,EAAE,sBAAsB,aAAa,mBAdtB,YACnB,OAAO,SAAS;EACd,MAAM,EAAE,MAAM,SAAS,UAAU,MAAM,KAAK,iBAAiB;GAC3D,QAAQ,iBAAiB;GACzB,SAAS,CAAC,OACN,kBAAkB,UAClB;IAAE,GAAG,kBAAkB;IAAS,OAAO;IAAG;GAAK;GACnD,MAAM,CAAC;IAAE,WAAW;IAAI,OAAO;GAAa,GAAG,GAAI,kBAAkB,QAAQ,CAAC,CAAE;EAClF,CAAC;EACD,OAAO;GAAE,OAAO;GAAO,MAAM;EAAQ;CACvC,GACA,CAAC,kBAAkB,IAAI,CAGqC,GAAc,IAAI;CAChF,MAAM,QAAQ,2BACZ,QACA,sBACA,iBAAiB,OAAO,SAC1B;CACA,MAAM,CAAC,OAAO,aAAa,WAAW,cACpC,sBACA,uBACF;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/es/components/ReactFileUtilities/UploadButton.mjs

@@ -1,12 +1,12 @@
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
-import { useMessageComposerContext } from "../../context/MessageComposerContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
-import { useHandleFileChangeWrapper } from "./utils.mjs";
 import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useHandleFileChangeWrapper } from "./utils.mjs";
+import { useMessageComposerContext } from "../../context/MessageComposerContext.mjs";
 import { forwardRef, useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
 import { nanoid } from "nanoid";
+import clsx from "clsx";
 //#region src/components/ReactFileUtilities/UploadButton.tsx
 var attachmentManagerConfigStateSelector = (state) => ({
 	acceptedFiles: state.attachments.acceptedFiles,
@@ -21,7 +21,7 @@ var FileInput = forwardRef(function FileInput({ onFileChange, resetOnChange = tr
 	});
 });
 var UploadFileInput = forwardRef(function UploadFileInput({ className, onFileChange: onFileChangeCustom, ...props }, ref) {
-	const { t } = useTranslationContext("UploadFileInput");
+	const { t } = useTranslationContext();
 	const { textareaRef } = useMessageComposerContext();
 	const messageComposer = useMessageComposerController();
 	const { attachmentManager } = messageComposer;
@@ -38,7 +38,7 @@ var UploadFileInput = forwardRef(function UploadFileInput({ className, onFileCha
 	]);
 	return /* @__PURE__ */ jsx(FileInput, {
 		accept: acceptedFiles?.join(","),
-		"aria-label": t("aria/File upload"),
+		"aria-label": t("fileUpload.uploadButton.fileUpload.ariaLabel", "File upload"),
 		"data-testid": "file-input",
 		id,
 		multiple: maxNumberOfFilesPerMessage > 1,