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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PollOptionReorderHandle.mjs","names":[],"sources":["../../../../../src/components/Poll/PollCreationDialog/PollOptionReorderHandle.tsx"],"sourcesContent":["import type { KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport React, { useEffect, useRef } from 'react';\nimport type { PollComposerOption } from 'stream-chat';\n\nimport { useAriaLiveAnnouncer } from '../../Accessibility';\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\n\ntype PollOptionReorderHandleProps = {\n  index: number;\n  isActive: boolean;\n  onActivate: (optionId: string) => void;\n  onDeselect: () => void;\n  onMove: (direction: -1 | 1) => void;\n  option: PollComposerOption;\n  registerRef: (index: number, element: HTMLButtonElement | null) => void;\n  /** Total number of options. Used to embed \"position N of total\" into the\n   * active handle's aria-label so VoiceOver's native focus announcement after a\n   * move carries the new position instead of just \"Reorder option N\". */\n  totalOptionCount: number;\n};\n\nexport const PollOptionReorderHandle = ({\n  index,\n  isActive,\n  onActivate,\n  onDeselect,\n  onMove,\n  option,\n  registerRef,\n  totalOptionCount,\n}: PollOptionReorderHandleProps) => {\n  const { IconReorder } = useComponentContextIcons();\n  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

@@ -0,0 +1,50 @@
+import { useStateStore } from "../../store/hooks/useStateStore.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
+var pollStateSelector = (nextValue) => ({
+	enforce_unique_vote: nextValue.enforce_unique_vote,
+	is_closed: nextValue.is_closed,
+	max_votes_allowed: nextValue.max_votes_allowed,
+	name: nextValue.name,
+	options: nextValue.options
+});
+var PollHeader = () => {
+	const { t } = useTranslationContext();
+	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("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,
+		enforce_unique_vote,
+		max_votes_allowed,
+		options.length,
+		t
+	]);
+	if (!name) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__poll-header",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "str-chat__poll-title",
+			children: name
+		}), /* @__PURE__ */ jsx("div", {
+			className: "str-chat__poll-subtitle",
+			children: selectionInstructions
+		})]
+	});
+};
+//#endregion
+export { PollHeader };
+
+//# sourceMappingURL=PollHeader.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PollHeader.mjs","names":[],"sources":["../../../../src/components/Poll/PollHeader.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { usePollContext, useTranslationContext } from '../../context';\nimport { useStateStore } from '../../store';\nimport type { 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

@@ -0,0 +1,45 @@
+import { useStateStore } from "../../store/hooks/useStateStore.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";
+//#region src/components/Poll/PollOptionList.tsx
+var pollStateSelector = (nextValue) => ({ options: nextValue.options });
+var PollOptionList = ({ optionsDisplayCount, PollOptionsFullList: PollOptionsFullList$1 = PollOptionsFullList }) => {
+	const { PollOptionSelector: PollOptionSelector$1 = PollOptionSelector } = useComponentContext();
+	const { t } = useTranslationContext();
+	const { poll } = usePollContext();
+	const { options } = useStateStore(poll.state, pollStateSelector);
+	const [viewAllOptionsOpen, setViewAllOptionsOpen] = useState(false);
+	const closeViewAllOptions = useCallback(() => setViewAllOptionsOpen(false), []);
+	const openViewAllOptions = useCallback(() => setViewAllOptionsOpen(true), []);
+	const showMoreOptionsButton = typeof optionsDisplayCount === "number" && options.length > optionsDisplayCount;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__poll-option-list", { "str-chat__poll-option-list--full": typeof optionsDisplayCount === "undefined" }),
+		children: options.slice(0, optionsDisplayCount ?? options.length).map((option) => /* @__PURE__ */ jsx(PollOptionSelector$1, {
+			displayAvatarCount: 3,
+			option
+		}, `poll-option-${option.id}`))
+	}), showMoreOptionsButton && /* @__PURE__ */ jsx(PollAction, {
+		buttonText: t("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",
+		modalIsOpen: viewAllOptionsOpen,
+		openModal: openViewAllOptions,
+		children: /* @__PURE__ */ jsx(PollOptionsFullList$1, {})
+	})] });
+};
+//#endregion
+export { PollOptionList };
+
+//# sourceMappingURL=PollOptionList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PollOptionList.mjs","names":[],"sources":["../../../../src/components/Poll/PollOptionList.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useCallback, useState } from 'react';\nimport { PollAction } from './PollActions/PollAction';\nimport { PollOptionSelector as DefaultPollOptionSelector } from './PollOptionSelector';\nimport { useStateStore } from '../../store';\nimport {\n  useComponentContext,\n  usePollContext,\n  useTranslationContext,\n} from '../../context';\nimport type { 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

@@ -0,0 +1,105 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useMessageContext } from "../../context/MessageContext.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 debounce from "lodash.debounce";
+//#region src/components/Poll/PollOptionSelector.tsx
+var AmountBar = ({ amount, className }) => /* @__PURE__ */ jsx("div", {
+	"aria-hidden": "true",
+	className: clsx("str-chat__amount-bar", className),
+	"data-testid": "amount-bar",
+	style: { "--str-chat__amount-bar-fulfillment": amount + "%" }
+});
+var pollStateSelector = (nextValue) => ({
+	is_closed: nextValue.is_closed,
+	latest_votes_by_option: nextValue.latest_votes_by_option,
+	maxVotedOptionIds: nextValue.maxVotedOptionIds,
+	ownVotesByOptionId: nextValue.ownVotesByOptionId,
+	vote_counts_by_option: nextValue.vote_counts_by_option,
+	voting_visibility: nextValue.voting_visibility
+});
+var PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbose }) => {
+	const channel = useChannel();
+	const { t } = useTranslationContext();
+	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.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;
+	const toggleVote = useMemo(() => debounce(() => {
+		if (!canCastVote) return;
+		return !!ownVotesByOptionId[option.id] ? poll.removeVote(ownVotesByOptionId[option.id].id, message.id) : poll.castVote(option.id, message.id);
+	}, 100), [
+		canCastVote,
+		message.id,
+		option.id,
+		ownVotesByOptionId,
+		poll
+	]);
+	const avatarDisplayInfo = useMemo(() => latest_votes_by_option?.[option.id] && latest_votes_by_option[option.id].filter((vote) => !!vote.user && !isVoteAnswer(vote)).slice(0, displayAvatarCount).map(extractDisplayInfo$1), [
+		displayAvatarCount,
+		extractDisplayInfo$1,
+		latest_votes_by_option,
+		option.id
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-pressed": isInteractive ? isSelected : void 0,
+		className: clsx("str-chat__poll-option", { "str-chat__poll-option--votable": canCastVote }),
+		onClick: isInteractive ? toggleVote : void 0,
+		onKeyDown: isInteractive ? (event) => {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			toggleVote();
+		} : void 0,
+		role: isInteractive ? "button" : void 0,
+		tabIndex: isInteractive ? 0 : void 0,
+		children: [
+			canCastVote && /* @__PURE__ */ jsx(Checkbox, { checked: isSelected }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__poll-option-data",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "str-chat__poll-option-text",
+					children: option.text
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__poll-option-votes",
+					children: [displayAvatarCount && voting_visibility === "public" && /* @__PURE__ */ jsx("div", {
+						className: "str-chat__poll-option-voters",
+						children: /* @__PURE__ */ jsx(AvatarStack$1, {
+							displayInfo: avatarDisplayInfo,
+							size: "xs"
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "str-chat__poll-option-vote-count",
+						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
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx(AmountBar, {
+				amount: (winningOptionCount && (vote_counts_by_option[option.id] ?? 0) / winningOptionCount) * 100,
+				className: clsx("str-chat__poll-option__votes-bar", { "str-chat__poll-option__votes-bar--winner": is_closed && maxVotedOptionIds.length === 1 && maxVotedOptionIds[0] === option.id })
+			})
+		]
+	}, `base-poll-option-${option.id}`);
+};
+//#endregion
+export { AmountBar, PollOptionSelector };
+
+//# sourceMappingURL=PollOptionSelector.mjs.map

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

@@ -0,0 +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 {\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":";;;;;;;;;;;;;;;;AA2BA,IAAa,aAAa,EAAE,QAAQ,gBAClC,oBAAC,OAAD;CACE,eAAY;CACZ,WAAW,KAAK,wBAAwB,SAAS;CACjD,eAAY;CACZ,OACE,EACE,sCAAsC,SAAS,IACjD;AAEH,CAAA;AAWH,IAAM,qBAAqB,eAAwD;CACjF,WAAW,UAAU;CACrB,wBAAwB,UAAU;CAClC,mBAAmB,UAAU;CAC7B,oBAAoB,UAAU;CAC9B,uBAAuB,UAAU;CACjC,mBAAmB,UAAU;AAC/B;AAQA,IAAa,sBAAsB,EACjC,oBACA,QACA,uBAC6B;CAC7B,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,sBAAsB,uBAAuB,EAAE,KAAK,QAAQ,IAAI,CAAC;CACvE,MAAM,EAAE,YAAY,kBAAkB;CACtC,MAAM,EACJ,aAAA,gBAAc,aACd,oBAAA,uBAAqB,uBACnB,oBAAoB;CACxB,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,EACJ,WACA,wBACA,mBACA,oBACA,uBACA,sBACE,cAAc,KAAK,OAAO,iBAAiB;CAE/C,MAAM,cAAc,oBAAoB,IAAI,gBAAgB,KAAK,CAAC;CAClE,MAAM,gBAAgB,CAAC,CAAC;CACxB,MAAM,aAAa,CAAC,CAAC,mBAAmB,OAAO;CAC/C,MAAM,qBAAqB,kBAAkB,KACzC,sBAAsB,kBAAkB,MACxC;CAEJ,MAAM,aAAa,cAEf,eAAe;EACb,IAAI,CAAC,aAAa;EAElB,OAAO,CADwB,CAAC,mBAAmB,OAAO,MAEtD,KAAK,WAAW,mBAAmB,OAAO,GAAG,CAAC,IAAI,QAAQ,EAAE,IAC5D,KAAK,SAAS,OAAO,IAAI,QAAQ,EAAE;CACzC,GAAG,GAAG,GACR;EAAC;EAAa,QAAQ;EAAI,OAAO;EAAI;EAAoB;CAAI,CAC/D;CAEA,MAAM,oBAAoB,cAEtB,yBAAyB,OAAO,OAC/B,uBAAuB,OAAO,GAAG,CAC/B,QAAQ,SAAS,CAAC,CAAC,KAAK,QAAQ,CAAC,aAAa,IAAI,CAAC,CAAC,CACpD,MAAM,GAAG,kBAAkB,CAAC,CAC5B,IAAI,oBAAkB,GAC3B;EAAC;EAAoB;EAAoB;EAAwB,OAAO;CAAE,CAC5E;CAEA,OACE,qBAAC,OAAD;EACE,gBAAc,gBAAgB,aAAa,KAAA;EAC3C,WAAW,KAAK,yBAAyB,EACvC,kCAAkC,YACpC,CAAC;EAED,SAAS,gBAAgB,aAAa,KAAA;EACtC,WACE,iBACK,UAAU;GACT,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAChD,MAAM,eAAe;GACrB,WAAW;EACb,IACA,KAAA;EAEN,MAAM,gBAAgB,WAAW,KAAA;EACjC,UAAU,gBAAgB,IAAI,KAAA;YAjBhC;GAmBG,eAAe,oBAAC,UAAD,EAAU,SAAS,WAAa,CAAA;GAChD,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,KAAD;KAAG,WAAU;eAA8B,OAAO;IAAQ,CAAA,GAC1D,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,sBAAsB,sBAAsB,YAC3C,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,eAAD;OAAa,aAAa;OAAmB,MAAK;MAAM,CAAA;KACrD,CAAA,GAEP,oBAAC,OAAD;MAAK,WAAU;gBACZ,mBACG,EAAE,+BAA+B;OAC/B,OAAO,sBAAsB,OAAO,OAAO;OAC3C,kBAAkB;OAClB,oBAAoB;MACtB,CAAC,IACA,sBAAsB,OAAO,OAAO;KACtC,CAAA,CACF;MACF;;GACL,oBAAC,WAAD;IACE,SACG,uBACE,sBAAsB,OAAO,OAAO,KAAK,sBAAsB;IAEpE,WAAW,KAAK,oCAAoC,EAClD,4CACE,aACA,kBAAkB,WAAW,KAC7B,kBAAkB,OAAO,OAAO,GACpC,CAAC;GACF,CAAA;EACE;IA9CE,oBAAoB,OAAO,IA8C7B;AAET"}

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

@@ -0,0 +1,60 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Avatar } from "../Avatar/Avatar.mjs";
+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 = 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, {
+			offset: [0, 5],
+			placement: "bottom",
+			referenceElement,
+			visible: tooltipVisible,
+			children: t("timestamp.PollVoteTooltip", { timestamp: timestampDate })
+		})]
+	});
+};
+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("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, {
+			...extractDisplayInfo$1({ user: vote.user }),
+			className: "str-chat__avatar--poll-vote-author",
+			key: `poll-vote-${vote.id}-avatar-${vote.user.id}`,
+			size: "md"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "str-chat__poll-vote__author__name",
+			children: displayName
+		})]
+	});
+};
+var PollVote = ({ vote }) => /* @__PURE__ */ jsxs("div", {
+	className: "str-chat__poll-vote",
+	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",
+	children: votes.map((vote) => /* @__PURE__ */ jsx(PollVote, { vote }, `poll-vote-${vote.id}`))
+});
+//#endregion
+export { PollVote, PollVoteListing };
+
+//# sourceMappingURL=PollVote.mjs.map

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

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

@@ -0,0 +1,36 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useEffect, useState } from "react";
+import { isVoteAnswer } from "stream-chat";
+//#region src/components/Poll/hooks/useManagePollVotesRealtime.ts
+function useManagePollVotesRealtime(managedVoteType, cursorPaginatorState, optionId) {
+	const { client } = useChatContext();
+	const [votesInRealtime, setVotesInRealtime] = useState(cursorPaginatorState?.getLatestValue().items ?? []);
+	useEffect(() => cursorPaginatorState?.subscribeWithSelector((state) => [state.latestPageItems], ([latestPageItems]) => setVotesInRealtime((prev) => [...prev, ...latestPageItems])), [cursorPaginatorState]);
+	useEffect(() => {
+		const handleVoteEvent = (event) => {
+			if (!event.poll_vote) return;
+			const isAnswer = isVoteAnswer(event.poll_vote);
+			if (managedVoteType === "answer" && !isAnswer || managedVoteType === "vote" && (isAnswer || event.poll_vote.option_id !== optionId)) return;
+			if (event.type === "poll.vote_removed") setVotesInRealtime((prev) => event.poll_vote ? prev.filter((vote) => vote.id !== event.poll_vote.id) : prev);
+			if (event.type === "poll.vote_changed") setVotesInRealtime((prev) => event.poll_vote ? prev.filter((vote) => vote.id !== event.poll_vote.id) : prev);
+			if (["poll.vote_casted", "poll.vote_changed"].includes(event.type)) setVotesInRealtime((prev) => event.poll_vote ? [event.poll_vote, ...prev] : prev);
+		};
+		const voteCastedSubscription = client.on("poll.vote_casted", handleVoteEvent);
+		const voteRemovedSubscription = client.on("poll.vote_removed", handleVoteEvent);
+		const voteChangedSubscription = client.on("poll.vote_changed", handleVoteEvent);
+		return () => {
+			voteCastedSubscription.unsubscribe();
+			voteRemovedSubscription.unsubscribe();
+			voteChangedSubscription.unsubscribe();
+		};
+	}, [
+		client,
+		optionId,
+		managedVoteType
+	]);
+	return votesInRealtime;
+}
+//#endregion
+export { useManagePollVotesRealtime };
+
+//# sourceMappingURL=useManagePollVotesRealtime.mjs.map

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

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

@@ -0,0 +1,44 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.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) => [
+	state.error,
+	state.hasNextPage,
+	state.loading
+];
+var usePollAnswerPagination = ({ paginationParams } = {}) => {
+	const { poll } = usePollContext();
+	const { cursorPaginatorState, loadMore } = useCursorPaginator(useCallback(async (next) => {
+		const { next: newNext, votes } = await poll.queryAnswers({
+			filter: paginationParams?.filter,
+			options: !next ? paginationParams?.options : {
+				...paginationParams?.options,
+				next
+			},
+			sort: [{
+				direction: -1,
+				field: "created_at"
+			}, ...paginationParams?.sort ?? []]
+		});
+		return {
+			items: votes,
+			next: newNext
+		};
+	}, [paginationParams, poll]), true);
+	const answers = useManagePollVotesRealtime("answer", cursorPaginatorState);
+	const [error, hasNextPage, loading] = useStateStore(cursorPaginatorState, paginationStateSelector);
+	return {
+		answers,
+		error,
+		hasNextPage,
+		loading,
+		loadMore
+	};
+};
+//#endregion
+export { usePollAnswerPagination };
+
+//# sourceMappingURL=usePollAnswerPagination.mjs.map

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

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

@@ -0,0 +1,45 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.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) => [
+	state.error,
+	state.hasNextPage,
+	state.loading
+];
+var usePollOptionVotesPagination = ({ paginationParams }) => {
+	const { poll } = usePollContext();
+	const { cursorPaginatorState, loadMore } = useCursorPaginator(useCallback(async (next) => {
+		const { next: newNext, votes } = await poll.queryOptionVotes({
+			filter: paginationParams.filter,
+			options: !next ? paginationParams?.options : {
+				...paginationParams?.options,
+				limit: 5,
+				next
+			},
+			sort: [{
+				direction: -1,
+				field: "created_at"
+			}, ...paginationParams?.sort ?? []]
+		});
+		return {
+			items: votes,
+			next: newNext
+		};
+	}, [paginationParams, poll]), true);
+	const votes = useManagePollVotesRealtime("vote", cursorPaginatorState, paginationParams.filter.option_id);
+	const [error, hasNextPage, loading] = useStateStore(cursorPaginatorState, paginationStateSelector);
+	return {
+		error,
+		hasNextPage,
+		loading,
+		loadMore,
+		votes
+	};
+};
+//#endregion
+export { usePollOptionVotesPagination };
+
+//# sourceMappingURL=usePollOptionVotesPagination.mjs.map

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

@@ -0,0 +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, 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/Portal/Portal.mjs

@@ -0,0 +1,17 @@
+import { useLayoutEffect, useState } from "react";
+import { createPortal } from "react-dom";
+//#region src/components/Portal/Portal.ts
+var Portal = ({ children, getPortalDestination, isOpen }) => {
+	const [portalDestination, setPortalDestination] = useState(null);
+	useLayoutEffect(() => {
+		const destination = getPortalDestination();
+		if (!destination || !isOpen) return;
+		setPortalDestination(destination);
+	}, [getPortalDestination, isOpen]);
+	if (!portalDestination) return null;
+	return createPortal(children, portalDestination);
+};
+//#endregion
+export { Portal };
+
+//# sourceMappingURL=Portal.mjs.map

package/dist/es/components/Portal/Portal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.mjs","names":[],"sources":["../../../../src/components/Portal/Portal.ts"],"sourcesContent":["import type { PropsWithChildren, ReactPortal } from 'react';\nimport { useLayoutEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport type PortalProps = {\n  getPortalDestination: () => Element | null;\n  isOpen?: boolean;\n};\n\nexport const Portal = ({\n  children,\n  getPortalDestination,\n  isOpen,\n}: PropsWithChildren<PortalProps>): ReactPortal | null => {\n  const [portalDestination, setPortalDestination] = useState<Element | null>(null);\n\n  useLayoutEffect(() => {\n    const destination = getPortalDestination();\n    if (!destination || !isOpen) return;\n    setPortalDestination(destination);\n  }, [getPortalDestination, isOpen]);\n\n  if (!portalDestination) return null;\n\n  return createPortal(children, portalDestination);\n};\n"],"mappings":";;;AASA,IAAa,UAAU,EACrB,UACA,sBACA,aACwD;CACxD,MAAM,CAAC,mBAAmB,wBAAwB,SAAyB,IAAI;CAE/E,sBAAsB;EACpB,MAAM,cAAc,qBAAqB;EACzC,IAAI,CAAC,eAAe,CAAC,QAAQ;EAC7B,qBAAqB,WAAW;CAClC,GAAG,CAAC,sBAAsB,MAAM,CAAC;CAEjC,IAAI,CAAC,mBAAmB,OAAO;CAE/B,OAAO,aAAa,UAAU,iBAAiB;AACjD"}

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

@@ -0,0 +1,54 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.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 { nanoid } from "nanoid";
+import clsx from "clsx";
+//#region src/components/ReactFileUtilities/UploadButton.tsx
+var attachmentManagerConfigStateSelector = (state) => ({
+	acceptedFiles: state.attachments.acceptedFiles,
+	maxNumberOfFilesPerMessage: state.attachments.maxNumberOfFilesPerMessage
+});
+var FileInput = forwardRef(function FileInput({ onFileChange, resetOnChange = true, ...rest }, ref) {
+	return /* @__PURE__ */ jsx("input", {
+		onChange: useHandleFileChangeWrapper(resetOnChange, onFileChange),
+		ref,
+		type: "file",
+		...rest
+	});
+});
+var UploadFileInput = forwardRef(function UploadFileInput({ className, onFileChange: onFileChangeCustom, ...props }, ref) {
+	const { t } = useTranslationContext();
+	const { textareaRef } = useMessageComposerContext();
+	const messageComposer = useMessageComposerController();
+	const { attachmentManager } = messageComposer;
+	const { acceptedFiles, maxNumberOfFilesPerMessage } = useStateStore(messageComposer.configState, attachmentManagerConfigStateSelector);
+	const id = useMemo(() => nanoid(), []);
+	const onFileChange = useCallback((files) => {
+		attachmentManager.uploadFiles(files);
+		textareaRef.current?.focus();
+		onFileChangeCustom?.(files);
+	}, [
+		onFileChangeCustom,
+		attachmentManager,
+		textareaRef
+	]);
+	return /* @__PURE__ */ jsx(FileInput, {
+		accept: acceptedFiles?.join(","),
+		"aria-label": t("fileUpload.uploadButton.fileUpload.ariaLabel", "File upload"),
+		"data-testid": "file-input",
+		id,
+		multiple: maxNumberOfFilesPerMessage > 1,
+		...props,
+		className: clsx("str-chat__file-input", className),
+		onFileChange,
+		ref
+	});
+});
+//#endregion
+export { FileInput, UploadFileInput };
+
+//# sourceMappingURL=UploadButton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadButton.mjs","names":[],"sources":["../../../../src/components/ReactFileUtilities/UploadButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { nanoid } from 'nanoid';\nimport type { ComponentProps } from 'react';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\n\nimport { useHandleFileChangeWrapper } from './utils';\nimport { useMessageComposerContext, useTranslationContext } from '../../context';\nimport { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';\nimport { useStateStore } from '../../store';\nimport type { MessageComposerConfig } from 'stream-chat';\nimport type { PartialSelected } from '../../types/types';\n\nconst attachmentManagerConfigStateSelector = (state: MessageComposerConfig) => ({\n  acceptedFiles: state.attachments.acceptedFiles,\n  maxNumberOfFilesPerMessage: state.attachments.maxNumberOfFilesPerMessage,\n});\n\nexport type FileInputProps = {\n  onFileChange: (files: Array<File>) => void;\n  resetOnChange?: boolean;\n} & Omit<ComponentProps<'input'>, 'type' | 'onChange'>;\n\nexport const FileInput = forwardRef(function FileInput(\n  { onFileChange, resetOnChange = true, ...rest }: FileInputProps,\n  ref: React.ForwardedRef<HTMLInputElement>,\n) {\n  const handleInputChange = useHandleFileChangeWrapper(resetOnChange, onFileChange);\n\n  return <input onChange={handleInputChange} ref={ref} type='file' {...rest} />;\n});\n\nexport const UploadFileInput = forwardRef(function UploadFileInput(\n  {\n    className,\n    onFileChange: onFileChangeCustom,\n    ...props\n  }: PartialSelected<FileInputProps, 'onFileChange'>,\n  ref: React.ForwardedRef<HTMLInputElement>,\n) {\n  const { t } = useTranslationContext();\n  const { textareaRef } = useMessageComposerContext();\n  const messageComposer = useMessageComposerController();\n  const { attachmentManager } = messageComposer;\n  const { acceptedFiles, maxNumberOfFilesPerMessage } = useStateStore(\n    messageComposer.configState,\n    attachmentManagerConfigStateSelector,\n  );\n  const id = useMemo(() => nanoid(), []);\n\n  const onFileChange = useCallback(\n    (files: Array<File>) => {\n      attachmentManager.uploadFiles(files);\n      textareaRef.current?.focus();\n      onFileChangeCustom?.(files);\n    },\n    [onFileChangeCustom, attachmentManager, textareaRef],\n  );\n\n  return (\n    <FileInput\n      accept={acceptedFiles?.join(',')}\n      aria-label={t('fileUpload.uploadButton.fileUpload.ariaLabel', 'File upload')}\n      data-testid='file-input'\n      id={id}\n      multiple={maxNumberOfFilesPerMessage > 1}\n      {...props}\n      className={clsx('str-chat__file-input', className)}\n      onFileChange={onFileChange}\n      ref={ref}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;AAYA,IAAM,wCAAwC,WAAkC;CAC9E,eAAe,MAAM,YAAY;CACjC,4BAA4B,MAAM,YAAY;AAChD;AAOA,IAAa,YAAY,WAAW,SAAS,UAC3C,EAAE,cAAc,gBAAgB,MAAM,GAAG,QACzC,KACA;CAGA,OAAO,oBAAC,SAAD;EAAO,UAFY,2BAA2B,eAAe,YAE5C;EAAwB;EAAK,MAAK;EAAO,GAAI;CAAO,CAAA;AAC9E,CAAC;AAED,IAAa,kBAAkB,WAAW,SAAS,gBACjD,EACE,WACA,cAAc,oBACd,GAAG,SAEL,KACA;CACA,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,gBAAgB,0BAA0B;CAClD,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,sBAAsB;CAC9B,MAAM,EAAE,eAAe,+BAA+B,cACpD,gBAAgB,aAChB,oCACF;CACA,MAAM,KAAK,cAAc,OAAO,GAAG,CAAC,CAAC;CAErC,MAAM,eAAe,aAClB,UAAuB;EACtB,kBAAkB,YAAY,KAAK;EACnC,YAAY,SAAS,MAAM;EAC3B,qBAAqB,KAAK;CAC5B,GACA;EAAC;EAAoB;EAAmB;CAAW,CACrD;CAEA,OACE,oBAAC,WAAD;EACE,QAAQ,eAAe,KAAK,GAAG;EAC/B,cAAY,EAAE,gDAAgD,aAAa;EAC3E,eAAY;EACR;EACJ,UAAU,6BAA6B;EACvC,GAAI;EACJ,WAAW,KAAK,wBAAwB,SAAS;EACnC;EACT;CACN,CAAA;AAEL,CAAC"}

package/dist/es/{audioProcessing.766ca76c.mjs → components/ReactFileUtilities/utils.mjs}

@@ -72,36 +72,6 @@ var readFileAsArrayBuffer = (file) => new Promise((resolve, reject) => {
 	fileReader.readAsArrayBuffer(file);
 });
 //#endregion
-//#region src/components/MediaRecorder/transcode/audioProcessing.ts
-/**
-* In the context of resampling audio data, AudioContext is used to decode the input audio file into an AudioBuffer,
-* which is a fundamental data structure representing audio data.
-* @param file
-*/
-var toAudioBuffer = async (file) => {
-	const audioCtx = new AudioContext();
-	const arrayBuffer = await readFileAsArrayBuffer(file);
-	const decodedData = await audioCtx.decodeAudioData(arrayBuffer);
-	if (audioCtx.state !== "closed") await audioCtx.close();
-	return decodedData;
-};
-/**
-* OfflineAudioContext is a specialized type of AudioContext that does not render audio in real-time and is used for offline audio processing tasks.
-* It allows performing audio processing and rendering without actually playing the audio through speakers or outputting it to a destination.
-* In the context of resampling audio data, OfflineAudioContext is used to resample the decoded AudioBuffer from a file to the desired sample rate.
-* It provides more flexibility and control over audio processing, as it can operate at different sample rates and durations compared to real-time audio contexts.
-* @param audioBuffer
-* @param sampleRate
-*/
-var renderAudio = async (audioBuffer, sampleRate) => {
-	const offlineAudioCtx = new OfflineAudioContext(audioBuffer.numberOfChannels, audioBuffer.duration * sampleRate, sampleRate);
-	const source = offlineAudioCtx.createBufferSource();
-	source.buffer = audioBuffer;
-	source.connect(offlineAudioCtx.destination);
-	source.start();
-	return await offlineAudioCtx.startRendering();
-};
-//#endregion
-export { getExtensionFromMimeType as a, dataTransferItemsToFiles as i, toAudioBuffer as n, getRecordedMediaTypeFromMimeType as o, createFileFromBlobs as r, useHandleFileChangeWrapper as s, renderAudio as t };
+export { createFileFromBlobs, dataTransferItemsToFiles, getExtensionFromMimeType, getRecordedMediaTypeFromMimeType, readFileAsArrayBuffer, useHandleFileChangeWrapper };
 
-//# sourceMappingURL=audioProcessing.766ca76c.mjs.map
+//# sourceMappingURL=utils.mjs.map