stream-chat-react 14.11.0 → 14.12.0

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

@@ -0,0 +1,99 @@
+import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.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 { Checkbox } from "../Form/Checkbox.mjs";
+import { useMemo } from "react";
+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", {
+	"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 { t } = useTranslationContext();
+	const { channelCapabilities = {} } = useChannelStateContext("PollOptionsShortlist");
+	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 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("{{count}} votes", { count: vote_counts_by_option[option.id] ?? 0 }) : 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 { 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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"}

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

@@ -0,0 +1,59 @@
+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 { 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);
+	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("You") : vote.user?.name || vote.user?.id || t("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: 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 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"}

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 { 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"}

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

@@ -0,0 +1,44 @@
+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 { 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: {
+				created_at: -1,
+				...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 { 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"}

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

@@ -0,0 +1,44 @@
+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 { 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,
+				next
+			},
+			sort: {
+				created_at: -1,
+				...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, 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"}

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 { useMessageComposerContext } from "../../context/MessageComposerContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useHandleFileChangeWrapper } from "./utils.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
+import { forwardRef, useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { nanoid } from "nanoid";
+//#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("UploadFileInput");
+	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("aria/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('UploadFileInput');\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('aria/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,iBAAiB;CACrD,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,kBAAkB;EAChC,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

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../src/components/ReactFileUtilities/utils.ts"],"sourcesContent":["import type { FileLike, RecordedMediaType } from './types';\nimport type { ChangeEvent } from 'react';\nimport { useCallback } from 'react';\n\nexport const useHandleFileChangeWrapper = (\n  resetOnChange = false,\n  handler?: (files: Array<File>) => void,\n) =>\n  useCallback(\n    ({ currentTarget }: ChangeEvent<HTMLInputElement>) => {\n      const { files } = currentTarget;\n\n      if (!files) return;\n\n      try {\n        handler?.(Array.from(files));\n      } catch (error) {\n        console.error(error);\n      }\n\n      if (resetOnChange) currentTarget.value = '';\n    },\n    [handler, resetOnChange],\n  );\n\nexport function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean {\n  if (!items || !items.length) {\n    return false;\n  }\n  for (const item of items) {\n    if (item.kind === 'file' || item.type === 'text/html') {\n      return true;\n    }\n  }\n  return false;\n}\n\nexport async function dataTransferItemsToFiles(\n  items?: DataTransferItem[],\n): Promise<FileLike[]> {\n  if (!items || !items.length) {\n    return [];\n  }\n\n  // If there are files inside the DataTransferItem prefer those\n  const fileLikes = getFileLikes(items);\n  if (fileLikes.length) {\n    return fileLikes;\n  }\n\n  // Otherwise extract images from html\n  const blobPromises = [];\n  for (const item of items) {\n    if (item.type === 'text/html') {\n      blobPromises.push(\n        new Promise<void>((accept) => {\n          item.getAsString(async (s) => {\n            const imagePromises = extractImageSources(s).map((src) =>\n              getImageSource(fileLikes, src),\n            );\n\n            await Promise.all(imagePromises);\n            accept();\n          });\n        }),\n      );\n    }\n  }\n  await Promise.all(blobPromises);\n  return fileLikes;\n}\n\nfunction getFileLikes(items: DataTransferItem[]) {\n  const fileLikes = [];\n  for (const item of items) {\n    if (item.kind === 'file') {\n      const file = item.getAsFile();\n      if (file) {\n        fileLikes.push(file);\n      }\n    }\n  }\n  return fileLikes;\n}\n\nasync function getImageSource(fileLikes: FileLike[], src: string) {\n  let res;\n  try {\n    res = await fetch(src);\n  } catch (e) {\n    return;\n  }\n  const contentType = res.headers.get('Content-type') || 'application/octet-stream';\n  const buf = await res.arrayBuffer();\n  const blob = new Blob([buf], { type: contentType });\n  fileLikes.push(blob);\n}\n\nconst extractImageSources = (s: string) => {\n  const imageTags = new DOMParser()\n    .parseFromString(s, 'text/html')\n    .getElementsByTagName('img');\n  return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);\n};\n\nexport const isBlobButNotFile = (obj: unknown): obj is Blob =>\n  obj instanceof Blob && !(obj instanceof File);\n\nexport const createFileFromBlobs = ({\n  blobsArray,\n  fileName,\n  mimeType,\n}: {\n  blobsArray: Blob[];\n  fileName: string;\n  mimeType: string;\n}) => {\n  const concatenatedBlob = new Blob(blobsArray, { type: mimeType });\n  return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });\n};\n\nexport const getExtensionFromMimeType = (mimeType: string) => {\n  const match = mimeType.match(/\\/([^/;]+)/);\n  return match && match[1];\n};\n\nexport const getRecordedMediaTypeFromMimeType = (\n  mimeType: string,\n): RecordedMediaType | null => {\n  const match = mimeType.match(/^(audio|video)\\/.*$/);\n  return match && (match[1] as RecordedMediaType);\n};\n\nexport const readFileAsArrayBuffer = (file: File): Promise<ArrayBuffer> =>\n  new Promise((resolve, reject) => {\n    const fileReader = new FileReader();\n    fileReader.onload = () => {\n      resolve(fileReader.result as ArrayBuffer);\n    };\n\n    fileReader.onerror = () => {\n      reject(fileReader.error);\n    };\n\n    fileReader.readAsArrayBuffer(file);\n  });\n\nexport const generateFileName = (mimeType: string) =>\n  `file_${new Date().toISOString()}.${getExtensionFromMimeType(mimeType)}`;\n"],"mappings":";;AAIA,IAAa,8BACX,gBAAgB,OAChB,YAEA,aACG,EAAE,oBAAmD;CACpD,MAAM,EAAE,UAAU;CAElB,IAAI,CAAC,OAAO;CAEZ,IAAI;EACF,UAAU,MAAM,KAAK,KAAK,CAAC;CAC7B,SAAS,OAAO;EACd,QAAQ,MAAM,KAAK;CACrB;CAEA,IAAI,eAAe,cAAc,QAAQ;AAC3C,GACA,CAAC,SAAS,aAAa,CACzB;AAcF,eAAsB,yBACpB,OACqB;CACrB,IAAI,CAAC,SAAS,CAAC,MAAM,QACnB,OAAO,CAAC;CAIV,MAAM,YAAY,aAAa,KAAK;CACpC,IAAI,UAAU,QACZ,OAAO;CAIT,MAAM,eAAe,CAAC;CACtB,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,SAAS,aAChB,aAAa,KACX,IAAI,SAAe,WAAW;EAC5B,KAAK,YAAY,OAAO,MAAM;GAC5B,MAAM,gBAAgB,oBAAoB,CAAC,CAAC,CAAC,KAAK,QAChD,eAAe,WAAW,GAAG,CAC/B;GAEA,MAAM,QAAQ,IAAI,aAAa;GAC/B,OAAO;EACT,CAAC;CACH,CAAC,CACH;CAGJ,MAAM,QAAQ,IAAI,YAAY;CAC9B,OAAO;AACT;AAEA,SAAS,aAAa,OAA2B;CAC/C,MAAM,YAAY,CAAC;CACnB,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,SAAS,QAAQ;EACxB,MAAM,OAAO,KAAK,UAAU;EAC5B,IAAI,MACF,UAAU,KAAK,IAAI;CAEvB;CAEF,OAAO;AACT;AAEA,eAAe,eAAe,WAAuB,KAAa;CAChE,IAAI;CACJ,IAAI;EACF,MAAM,MAAM,MAAM,GAAG;CACvB,SAAS,GAAG;EACV;CACF;CACA,MAAM,cAAc,IAAI,QAAQ,IAAI,cAAc,KAAK;CACvD,MAAM,MAAM,MAAM,IAAI,YAAY;CAClC,MAAM,OAAO,IAAI,KAAK,CAAC,GAAG,GAAG,EAAE,MAAM,YAAY,CAAC;CAClD,UAAU,KAAK,IAAI;AACrB;AAEA,IAAM,uBAAuB,MAAc;CACzC,MAAM,YAAY,IAAI,UAAU,CAAC,CAC9B,gBAAgB,GAAG,WAAW,CAAC,CAC/B,qBAAqB,KAAK;CAC7B,OAAO,MAAM,KAAK,YAAY,QAAQ,IAAI,GAAG,CAAC,CAAC,QAAQ,QAAQ,GAAG;AACpE;AAKA,IAAa,uBAAuB,EAClC,YACA,UACA,eAKI;CACJ,MAAM,mBAAmB,IAAI,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;CAChE,OAAO,IAAI,KAAK,CAAC,gBAAgB,GAAG,UAAU,EAAE,MAAM,iBAAiB,KAAK,CAAC;AAC/E;AAEA,IAAa,4BAA4B,aAAqB;CAC5D,MAAM,QAAQ,SAAS,MAAM,YAAY;CACzC,OAAO,SAAS,MAAM;AACxB;AAEA,IAAa,oCACX,aAC6B;CAC7B,MAAM,QAAQ,SAAS,MAAM,qBAAqB;CAClD,OAAO,SAAU,MAAM;AACzB;AAEA,IAAa,yBAAyB,SACpC,IAAI,SAAS,SAAS,WAAW;CAC/B,MAAM,aAAa,IAAI,WAAW;CAClC,WAAW,eAAe;EACxB,QAAQ,WAAW,MAAqB;CAC1C;CAEA,WAAW,gBAAgB;EACzB,OAAO,WAAW,KAAK;CACzB;CAEA,WAAW,kBAAkB,IAAI;AACnC,CAAC"}