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

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

@@ -1 +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"}
+{"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/components/Reactions/MessageReactions.mjs

@@ -2,8 +2,8 @@ import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { useDialogIsOpen, useDialogOnNearestManager } from "../Dialog/hooks/useDialog.mjs";
 import { useMessageContext } from "../../context/MessageContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
-import "../Message/hooks/useReactionsFetcher.mjs";
 import { DialogAnchor } from "../Dialog/service/DialogAnchor.mjs";
+import "../Message/hooks/useReactionsFetcher.mjs";
 import { MessageReactionsDetail } from "./MessageReactionsDetail.mjs";
 import { useProcessReactions } from "./hooks/useProcessReactions.mjs";
 import React, { useMemo, useRef, useState } from "react";
@@ -25,9 +25,9 @@ var UnMemoizedMessageReactions = (props) => {
 	const { capLimit: { clustered: capLimitClustered = 5, segmented: capLimitSegmented = 4 } = {}, flipHorizontalPosition = false, handleFetchReactions, reactionDetailsSort, verticalPosition = "top", visualStyle = "clustered", ...rest } = props;
 	const { existingReactions, hasReactions, reactionGroups, totalReactionCount, uniqueReactionTypeCount } = useProcessReactions(rest);
 	const [selectedReactionType, setSelectedReactionType] = useState(null);
-	const { t } = useTranslationContext("MessageReactions");
+	const { t } = useTranslationContext();
 	const { MessageReactionsDetail: MessageReactionsDetail$1 = MessageReactionsDetail } = useComponentContext();
-	const { isMyMessage, message } = useMessageContext("MessageReactions");
+	const { isMyMessage, message } = useMessageContext();
 	const divRef = useRef(null);
 	const dialogId = MessageReactionsDetail.getDialogId({ messageId: message.id });
 	const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
@@ -66,7 +66,7 @@ var UnMemoizedMessageReactions = (props) => {
 	]);
 	if (!hasReactions) return null;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		"aria-label": t("aria/Reaction list"),
+		"aria-label": t("reactions.messageReactions.reactionList.ariaLabel", "Reaction list"),
 		className: clsx("str-chat__message-reactions", {
 			[`str-chat__message-reactions--flipped-horizontally`]: flipHorizontalPosition,
 			[`str-chat__message-reactions--${verticalPosition}`]: typeof verticalPosition === "string",
@@ -76,7 +76,7 @@ var UnMemoizedMessageReactions = (props) => {
 		role: "figure",
 		children: /* @__PURE__ */ jsxs(FragmentOrButton, {
 			"aria-expanded": isDialogOpen,
-			"aria-label": t("aria/Reaction list"),
+			"aria-label": t("reactions.messageReactions.reactionList.ariaLabel", "Reaction list"),
 			"aria-pressed": isDialogOpen,
 			buttonIf: visualStyle === "clustered",
 			className: "str-chat__message-reactions__list-button",
@@ -88,7 +88,7 @@ var UnMemoizedMessageReactions = (props) => {
 					className: "str-chat__message-reactions__list-item",
 					"data-testid": "message-reactions-list-item",
 					children: /* @__PURE__ */ jsxs(FragmentOrButton, {
-						"aria-label": t("aria/Select Reaction: {{ reactionName }}", { reactionName: reactionType }),
+						"aria-label": t("reactions.messageReactions.selectReaction.ariaLabel", "Select Reaction: {{ reactionName }}", { reactionName: reactionType }),
 						buttonIf: visualStyle === "segmented",
 						className: "str-chat__message-reactions__list-item-button",
 						onClick: () => handleReactionButtonClick(reactionType),
@@ -105,7 +105,7 @@ var UnMemoizedMessageReactions = (props) => {
 				}, reactionType)), uniqueReactionTypeCount > 4 && cappedExistingReactions && visualStyle === "segmented" && /* @__PURE__ */ jsx("li", {
 					className: "str-chat__message-reactions__list-item str-chat__message-reactions__list-item--more",
 					children: /* @__PURE__ */ jsx("button", {
-						"aria-label": t("aria/Reaction list"),
+						"aria-label": t("reactions.messageReactions.reactionList.ariaLabel", "Reaction list"),
 						className: "str-chat__message-reactions__list-item-button",
 						onClick: () => handleReactionButtonClick(null),
 						type: "button",

package/dist/es/components/Reactions/MessageReactions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageReactions.mjs","names":[],"sources":["../../../../src/components/Reactions/MessageReactions.tsx"],"sourcesContent":["import React, {\n  type ComponentPropsWithoutRef,\n  type ComponentRef,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport clsx from 'clsx';\n\nimport { MessageReactionsDetail as DefaultMessageReactionsDetail } from './MessageReactionsDetail';\nimport { useProcessReactions } from './hooks/useProcessReactions';\nimport type { MessageContextValue } from '../../context';\nimport {\n  useComponentContext,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\n\nimport { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';\n\nimport type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';\nimport type { ReactionsComparator, ReactionType } from './types';\nimport { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';\n\nexport type MessageReactionsProps = Partial<\n  Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>\n> & {\n  /** An array of the own reaction objects to distinguish own reactions visually */\n  own_reactions?: ReactionResponse[];\n  /** An object containing summary for each reaction type on a message */\n  reaction_groups?: Record<string, ReactionGroupResponse>;\n  /** An array of the reaction objects to display in the list */\n  reactions?: ReactionResponse[];\n  /** Display the reactions in the list in reverse order, defaults to false */\n  reverse?: boolean;\n  /** Comparator function to sort reactions, defaults to chronological order */\n  sortReactions?: ReactionsComparator;\n  /**\n   * Positioning of the reactions list relative to the message. Position is flipped by default for the messages of other users.\n   */\n  flipHorizontalPosition?: boolean;\n  verticalPosition?: 'top' | 'bottom' | null;\n  visualStyle?: 'clustered' | 'segmented' | null;\n  capLimit?: {\n    [key in Extract<MessageReactionsProps['visualStyle'], string>]?: number;\n  };\n};\n\n/**\n * Renders a button if `buttonIf` is true, otherwise renders a fragment. No props but children are passed to fragment, but all props are passed to button if it's rendered.\n */\nconst FragmentOrButton = ({\n  buttonIf: renderButton = false,\n  children,\n  type = 'button',\n  ...props\n}: ComponentPropsWithoutRef<'button'> & { buttonIf?: boolean }) => {\n  if (renderButton) {\n    return (\n      <button {...props} type={type}>\n        {children}\n      </button>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nconst UnMemoizedMessageReactions = (props: MessageReactionsProps) => {\n  const {\n    capLimit: { clustered: capLimitClustered = 5, segmented: capLimitSegmented = 4 } = {},\n    flipHorizontalPosition = false,\n    handleFetchReactions,\n    reactionDetailsSort,\n    verticalPosition = 'top',\n    visualStyle = 'clustered',\n    ...rest\n  } = props;\n\n  const {\n    existingReactions,\n    hasReactions,\n    reactionGroups,\n    totalReactionCount,\n    uniqueReactionTypeCount,\n  } = useProcessReactions(rest);\n  const [selectedReactionType, setSelectedReactionType] = useState<ReactionType | null>(\n    null,\n  );\n  const { t } = useTranslationContext('MessageReactions');\n  const { MessageReactionsDetail = DefaultMessageReactionsDetail } =\n    useComponentContext();\n  const { isMyMessage, message } = useMessageContext('MessageReactions');\n\n  const divRef = useRef<ComponentRef<'div'>>(null);\n  const dialogId = DefaultMessageReactionsDetail.getDialogId({\n    messageId: message.id,\n  });\n  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n  const isDialogOpen = useDialogIsOpen(dialogId, dialogManager?.id);\n\n  const handleReactionButtonClick = (reactionType: ReactionType | null) => {\n    if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {\n      return;\n    }\n\n    setSelectedReactionType(reactionType);\n\n    dialog.open();\n  };\n\n  /**\n   * In segmented style with top position we show max 4 reactions and a\n   * count of the rest, so we need to cap the existing reactions to display\n   * at 4 and calculate the count of the rest. For clustered(top/bottom) we cap\n   * the existing reactions to 5 but we don't calculate the count of the rest\n   * because we show the total count instead. For segmented style with bottom\n   * position we don't cap the existing reactions and we show all of them.\n   */\n  const cappedExistingReactions = useMemo(() => {\n    if (visualStyle === 'segmented' && verticalPosition !== 'top') return null;\n\n    const capLimit = visualStyle === 'segmented' ? capLimitSegmented : capLimitClustered;\n\n    const sliced = existingReactions.slice(0, capLimit);\n\n    return {\n      /**\n       * Accumulated reaction count of capped reaction types, first four in case of\n       * segmented(top) and first five in case of clustered(top/bottom) variations.\n       */\n      reactionCountToDisplay: sliced.reduce(\n        (accumulatedCount, { reactionCount }) => accumulatedCount + reactionCount,\n        0,\n      ),\n      reactionsToDisplay: sliced,\n    } as const;\n  }, [\n    capLimitClustered,\n    capLimitSegmented,\n    existingReactions,\n    verticalPosition,\n    visualStyle,\n  ]);\n\n  if (!hasReactions) return null;\n\n  return (\n    <>\n      <div\n        aria-label={t('aria/Reaction list')}\n        className={clsx('str-chat__message-reactions', {\n          [`str-chat__message-reactions--flipped-horizontally`]: flipHorizontalPosition,\n          [`str-chat__message-reactions--${verticalPosition}`]:\n            typeof verticalPosition === 'string',\n          [`str-chat__message-reactions--${visualStyle}`]:\n            typeof visualStyle === 'string',\n        })}\n        ref={divRef}\n        role='figure'\n      >\n        <FragmentOrButton\n          aria-expanded={isDialogOpen}\n          aria-label={t('aria/Reaction list')}\n          aria-pressed={isDialogOpen}\n          buttonIf={visualStyle === 'clustered'}\n          className='str-chat__message-reactions__list-button'\n          data-testid='message-reactions-list-button'\n          onClick={() => handleReactionButtonClick(null)}\n        >\n          <ul className='str-chat__message-reactions__list'>\n            {(cappedExistingReactions?.reactionsToDisplay ?? existingReactions).map(\n              ({ EmojiComponent, reactionCount, reactionType }) =>\n                EmojiComponent && (\n                  <li\n                    className='str-chat__message-reactions__list-item'\n                    data-testid='message-reactions-list-item'\n                    key={reactionType}\n                  >\n                    <FragmentOrButton\n                      aria-label={t('aria/Select Reaction: {{ reactionName }}', {\n                        reactionName: reactionType,\n                      })}\n                      buttonIf={visualStyle === 'segmented'}\n                      className='str-chat__message-reactions__list-item-button'\n                      onClick={() => handleReactionButtonClick(reactionType)}\n                    >\n                      <span\n                        className='str-chat__message-reactions__list-item-icon'\n                        data-testid='message-reactions-list-item-icon'\n                      >\n                        <EmojiComponent />\n                      </span>\n                      {visualStyle === 'segmented' && reactionCount > 1 && (\n                        <span\n                          className='str-chat__message-reactions__list-item-count'\n                          data-testclass='message-reactions-item-count'\n                        >\n                          {reactionCount}\n                        </span>\n                      )}\n                    </FragmentOrButton>\n                  </li>\n                ),\n            )}\n            {uniqueReactionTypeCount > 4 &&\n              cappedExistingReactions &&\n              visualStyle === 'segmented' && (\n                <li className='str-chat__message-reactions__list-item str-chat__message-reactions__list-item--more'>\n                  <button\n                    aria-label={t('aria/Reaction list')}\n                    className='str-chat__message-reactions__list-item-button'\n                    onClick={() => handleReactionButtonClick(null)}\n                    type='button'\n                  >\n                    <span className='str-chat__message-reactions__overflow-count'>\n                      +\n                      {totalReactionCount -\n                        cappedExistingReactions.reactionCountToDisplay}\n                    </span>\n                  </button>\n                </li>\n              )}\n          </ul>\n          {visualStyle === 'clustered' && (\n            <span\n              className='str-chat__message-reactions__total-count'\n              data-testid='message-reactions-total-count'\n            >\n              {totalReactionCount}\n            </span>\n          )}\n        </FragmentOrButton>\n      </div>\n\n      <DialogAnchor\n        dialogManagerId={dialogManager?.id}\n        id={dialogId}\n        offset={8}\n        placement={isMyMessage() ? 'bottom-end' : 'bottom-start'}\n        referenceElement={divRef.current}\n        trapFocus\n        updatePositionOnContentResize\n      >\n        <MessageReactionsDetail\n          handleFetchReactions={handleFetchReactions}\n          onSelectedReactionTypeChange={setSelectedReactionType}\n          reactionDetailsSort={reactionDetailsSort}\n          reactionGroups={reactionGroups}\n          reactions={existingReactions}\n          selectedReactionType={selectedReactionType}\n          totalReactionCount={totalReactionCount}\n        />\n      </DialogAnchor>\n    </>\n  );\n};\n\n/**\n * Component that displays a list of reactions on a message.\n */\nexport const MessageReactions = React.memo(\n  UnMemoizedMessageReactions,\n) as typeof UnMemoizedMessageReactions;\n"],"mappings":"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"}
+{"version":3,"file":"MessageReactions.mjs","names":[],"sources":["../../../../src/components/Reactions/MessageReactions.tsx"],"sourcesContent":["import React, {\n  type ComponentPropsWithoutRef,\n  type ComponentRef,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport clsx from 'clsx';\n\nimport { MessageReactionsDetail as DefaultMessageReactionsDetail } from './MessageReactionsDetail';\nimport { useProcessReactions } from './hooks/useProcessReactions';\nimport type { MessageContextValue } from '../../context';\nimport {\n  useComponentContext,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\n\nimport { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';\n\nimport type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';\nimport type { ReactionsComparator, ReactionType } from './types';\nimport { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';\n\nexport type MessageReactionsProps = Partial<\n  Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>\n> & {\n  /** An array of the own reaction objects to distinguish own reactions visually */\n  own_reactions?: ReactionResponse[];\n  /** An object containing summary for each reaction type on a message */\n  reaction_groups?: Record<string, ReactionGroupResponse>;\n  /** An array of the reaction objects to display in the list */\n  reactions?: ReactionResponse[];\n  /** Display the reactions in the list in reverse order, defaults to false */\n  reverse?: boolean;\n  /** Comparator function to sort reactions, defaults to chronological order */\n  sortReactions?: ReactionsComparator;\n  /**\n   * Positioning of the reactions list relative to the message. Position is flipped by default for the messages of other users.\n   */\n  flipHorizontalPosition?: boolean;\n  verticalPosition?: 'top' | 'bottom' | null;\n  visualStyle?: 'clustered' | 'segmented' | null;\n  capLimit?: {\n    [key in Extract<MessageReactionsProps['visualStyle'], string>]?: number;\n  };\n};\n\n/**\n * Renders a button if `buttonIf` is true, otherwise renders a fragment. No props but children are passed to fragment, but all props are passed to button if it's rendered.\n */\nconst FragmentOrButton = ({\n  buttonIf: renderButton = false,\n  children,\n  type = 'button',\n  ...props\n}: ComponentPropsWithoutRef<'button'> & { buttonIf?: boolean }) => {\n  if (renderButton) {\n    return (\n      <button {...props} type={type}>\n        {children}\n      </button>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nconst UnMemoizedMessageReactions = (props: MessageReactionsProps) => {\n  const {\n    capLimit: { clustered: capLimitClustered = 5, segmented: capLimitSegmented = 4 } = {},\n    flipHorizontalPosition = false,\n    handleFetchReactions,\n    reactionDetailsSort,\n    verticalPosition = 'top',\n    visualStyle = 'clustered',\n    ...rest\n  } = props;\n\n  const {\n    existingReactions,\n    hasReactions,\n    reactionGroups,\n    totalReactionCount,\n    uniqueReactionTypeCount,\n  } = useProcessReactions(rest);\n  const [selectedReactionType, setSelectedReactionType] = useState<ReactionType | null>(\n    null,\n  );\n  const { t } = useTranslationContext();\n  const { MessageReactionsDetail = DefaultMessageReactionsDetail } =\n    useComponentContext();\n  const { isMyMessage, message } = useMessageContext();\n\n  const divRef = useRef<ComponentRef<'div'>>(null);\n  const dialogId = DefaultMessageReactionsDetail.getDialogId({\n    messageId: message.id,\n  });\n  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n  const isDialogOpen = useDialogIsOpen(dialogId, dialogManager?.id);\n\n  const handleReactionButtonClick = (reactionType: ReactionType | null) => {\n    if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {\n      return;\n    }\n\n    setSelectedReactionType(reactionType);\n\n    dialog.open();\n  };\n\n  /**\n   * In segmented style with top position we show max 4 reactions and a\n   * count of the rest, so we need to cap the existing reactions to display\n   * at 4 and calculate the count of the rest. For clustered(top/bottom) we cap\n   * the existing reactions to 5 but we don't calculate the count of the rest\n   * because we show the total count instead. For segmented style with bottom\n   * position we don't cap the existing reactions and we show all of them.\n   */\n  const cappedExistingReactions = useMemo(() => {\n    if (visualStyle === 'segmented' && verticalPosition !== 'top') return null;\n\n    const capLimit = visualStyle === 'segmented' ? capLimitSegmented : capLimitClustered;\n\n    const sliced = existingReactions.slice(0, capLimit);\n\n    return {\n      /**\n       * Accumulated reaction count of capped reaction types, first four in case of\n       * segmented(top) and first five in case of clustered(top/bottom) variations.\n       */\n      reactionCountToDisplay: sliced.reduce(\n        (accumulatedCount, { reactionCount }) => accumulatedCount + reactionCount,\n        0,\n      ),\n      reactionsToDisplay: sliced,\n    } as const;\n  }, [\n    capLimitClustered,\n    capLimitSegmented,\n    existingReactions,\n    verticalPosition,\n    visualStyle,\n  ]);\n\n  if (!hasReactions) return null;\n\n  return (\n    <>\n      <div\n        aria-label={t(\n          'reactions.messageReactions.reactionList.ariaLabel',\n          'Reaction list',\n        )}\n        className={clsx('str-chat__message-reactions', {\n          [`str-chat__message-reactions--flipped-horizontally`]: flipHorizontalPosition,\n          [`str-chat__message-reactions--${verticalPosition}`]:\n            typeof verticalPosition === 'string',\n          [`str-chat__message-reactions--${visualStyle}`]:\n            typeof visualStyle === 'string',\n        })}\n        ref={divRef}\n        role='figure'\n      >\n        <FragmentOrButton\n          aria-expanded={isDialogOpen}\n          aria-label={t(\n            'reactions.messageReactions.reactionList.ariaLabel',\n            'Reaction list',\n          )}\n          aria-pressed={isDialogOpen}\n          buttonIf={visualStyle === 'clustered'}\n          className='str-chat__message-reactions__list-button'\n          data-testid='message-reactions-list-button'\n          onClick={() => handleReactionButtonClick(null)}\n        >\n          <ul className='str-chat__message-reactions__list'>\n            {(cappedExistingReactions?.reactionsToDisplay ?? existingReactions).map(\n              ({ EmojiComponent, reactionCount, reactionType }) =>\n                EmojiComponent && (\n                  <li\n                    className='str-chat__message-reactions__list-item'\n                    data-testid='message-reactions-list-item'\n                    key={reactionType}\n                  >\n                    <FragmentOrButton\n                      aria-label={t(\n                        'reactions.messageReactions.selectReaction.ariaLabel',\n                        'Select Reaction: {{ reactionName }}',\n                        {\n                          reactionName: reactionType,\n                        },\n                      )}\n                      buttonIf={visualStyle === 'segmented'}\n                      className='str-chat__message-reactions__list-item-button'\n                      onClick={() => handleReactionButtonClick(reactionType)}\n                    >\n                      <span\n                        className='str-chat__message-reactions__list-item-icon'\n                        data-testid='message-reactions-list-item-icon'\n                      >\n                        <EmojiComponent />\n                      </span>\n                      {visualStyle === 'segmented' && reactionCount > 1 && (\n                        <span\n                          className='str-chat__message-reactions__list-item-count'\n                          data-testclass='message-reactions-item-count'\n                        >\n                          {reactionCount}\n                        </span>\n                      )}\n                    </FragmentOrButton>\n                  </li>\n                ),\n            )}\n            {uniqueReactionTypeCount > 4 &&\n              cappedExistingReactions &&\n              visualStyle === 'segmented' && (\n                <li className='str-chat__message-reactions__list-item str-chat__message-reactions__list-item--more'>\n                  <button\n                    aria-label={t(\n                      'reactions.messageReactions.reactionList.ariaLabel',\n                      'Reaction list',\n                    )}\n                    className='str-chat__message-reactions__list-item-button'\n                    onClick={() => handleReactionButtonClick(null)}\n                    type='button'\n                  >\n                    <span className='str-chat__message-reactions__overflow-count'>\n                      +\n                      {totalReactionCount -\n                        cappedExistingReactions.reactionCountToDisplay}\n                    </span>\n                  </button>\n                </li>\n              )}\n          </ul>\n          {visualStyle === 'clustered' && (\n            <span\n              className='str-chat__message-reactions__total-count'\n              data-testid='message-reactions-total-count'\n            >\n              {totalReactionCount}\n            </span>\n          )}\n        </FragmentOrButton>\n      </div>\n\n      <DialogAnchor\n        dialogManagerId={dialogManager?.id}\n        id={dialogId}\n        offset={8}\n        placement={isMyMessage() ? 'bottom-end' : 'bottom-start'}\n        referenceElement={divRef.current}\n        trapFocus\n        updatePositionOnContentResize\n      >\n        <MessageReactionsDetail\n          handleFetchReactions={handleFetchReactions}\n          onSelectedReactionTypeChange={setSelectedReactionType}\n          reactionDetailsSort={reactionDetailsSort}\n          reactionGroups={reactionGroups}\n          reactions={existingReactions}\n          selectedReactionType={selectedReactionType}\n          totalReactionCount={totalReactionCount}\n        />\n      </DialogAnchor>\n    </>\n  );\n};\n\n/**\n * Component that displays a list of reactions on a message.\n */\nexport const MessageReactions = React.memo(\n  UnMemoizedMessageReactions,\n) as typeof UnMemoizedMessageReactions;\n"],"mappings":"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"}

package/dist/es/components/Reactions/MessageReactionsDetail.mjs

@@ -1,17 +1,20 @@
 import { useChatContext } from "../../context/ChatContext.mjs";
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useMessageContext } from "../../context/MessageContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
-import { defaultReactionOptions, getHasExtendedReactions } from "./reactionOptions.mjs";
 import { Avatar } from "../Avatar/Avatar.mjs";
 import { extractDisplayInfo } from "../Avatar/utils.mjs";
+import { defaultReactionOptions, getHasExtendedReactions } from "./reactionOptions.mjs";
 import { ReactionSelector } from "./ReactionSelector.mjs";
 import { useFetchReactions } from "./hooks/useFetchReactions.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Reactions/MessageReactionsDetail.tsx
-var defaultReactionDetailsSort = { created_at: -1 };
+var defaultReactionDetailsSort = [{
+	direction: -1,
+	field: "created_at"
+}];
 var MessageReactionsDetailLoadingIndicator = () => {
 	return /* @__PURE__ */ jsx(Fragment$1, { children: useMemo(() => Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__message-reactions-detail__skeleton-item",
@@ -19,12 +22,12 @@ var MessageReactionsDetailLoadingIndicator = () => {
 	}, index)), []) });
 };
 var MessageReactionsDetail = ({ handleFetchReactions, handleReaction, onSelectedReactionTypeChange, own_reactions, reactionDetailsSort: propReactionDetailsSort, reactionGroups, reactions, selectedReactionType, totalReactionCount }) => {
+	const { IconEmojiAdd } = useComponentContextIcons();
 	const [extendedReactionListOpen, setExtendedReactionListOpen] = useState(false);
 	const { client } = useChatContext();
-	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo, LoadingIndicator = MessageReactionsDetailLoadingIndicator, reactionOptions = defaultReactionOptions, ReactionSelectorExtendedList = ReactionSelector.ExtendedList } = useComponentContext(MessageReactionsDetail.name);
-	const { IconEmojiAdd } = useComponentContextIcons();
+	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo, LoadingIndicator = MessageReactionsDetailLoadingIndicator, reactionOptions = defaultReactionOptions, ReactionSelectorExtendedList = ReactionSelector.ExtendedList } = useComponentContext();
 	const { t } = useTranslationContext();
-	const { handleReaction: contextHandleReaction, message, reactionDetailsSort: contextReactionDetailsSort } = useMessageContext(MessageReactionsDetail.name);
+	const { handleReaction: contextHandleReaction, message, reactionDetailsSort: contextReactionDetailsSort } = useMessageContext();
 	const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
 	const hasExtendedReactions = getHasExtendedReactions(reactionOptions);
 	const { isLoading: areReactionsLoading, reactions: reactionDetails, refetch } = useFetchReactions({
@@ -52,7 +55,11 @@ var MessageReactionsDetail = ({ handleFetchReactions, handleReaction, onSelected
 		children: [
 			typeof totalReactionCount === "number" && /* @__PURE__ */ jsx("div", {
 				className: "str-chat__message-reactions-detail__total-count",
-				children: t("{{ count }} reactions", { count: totalReactionCount })
+				children: t("reactions.messageReactionsDetail.reactions.text", {
+					count: totalReactionCount,
+					defaultValue_one: "{{ count }} reaction",
+					defaultValue_other: "{{ count }} reactions"
+				})
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "str-chat__message-reactions-detail__reaction-type-list-container",
@@ -62,7 +69,7 @@ var MessageReactionsDetail = ({ handleFetchReactions, handleReaction, onSelected
 					children: [hasExtendedReactions && /* @__PURE__ */ jsx("li", {
 						className: "str-chat__message-reactions-detail__reaction-type-list-item",
 						children: /* @__PURE__ */ jsx("button", {
-							"aria-label": t("Add reaction"),
+							"aria-label": t("common.addReaction.text", "Add reaction"),
 							className: "str-chat__message-reactions-detail__reaction-type-list-item-button",
 							"data-testid": "add-reaction-button",
 							onClick: () => setExtendedReactionListOpen(true),
@@ -75,7 +82,7 @@ var MessageReactionsDetail = ({ handleFetchReactions, handleReaction, onSelected
 					}), reactions.map(({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ jsx("li", {
 						className: "str-chat__message-reactions-detail__reaction-type-list-item",
 						children: /* @__PURE__ */ jsxs("button", {
-							"aria-label": t("aria/Select Reaction: {{ reactionName }}", { reactionName: reactionType }),
+							"aria-label": t("reactions.messageReactions.selectReaction.ariaLabel", "Select Reaction: {{ reactionName }}", { reactionName: reactionType }),
 							"aria-pressed": reactionType === selectedReactionType,
 							className: "str-chat__message-reactions-detail__reaction-type-list-item-button",
 							onClick: () => onSelectedReactionTypeChange?.(selectedReactionType === reactionType ? null : reactionType),
@@ -115,9 +122,9 @@ var MessageReactionsDetail = ({ handleFetchReactions, handleReaction, onSelected
 									children: [/* @__PURE__ */ jsx("span", {
 										className: "str-chat__message-reactions-detail__user-list-item-username",
 										"data-testid": "reaction-user-username",
-										children: belongsToCurrentUser ? t("You") : user?.name || user?.id
+										children: belongsToCurrentUser ? t("common.you.label", "You") : user?.name || user?.id
 									}), belongsToCurrentUser && /* @__PURE__ */ jsx("button", {
-										"aria-label": t("Tap to remove: {{ reactionName }}", { reactionName }),
+										"aria-label": t("reactions.messageReactionsDetail.tapRemove.ariaLabel", "Tap to remove: {{ reactionName }}", { reactionName }),
 										className: "str-chat__message-reactions-detail__user-list-item-button",
 										"data-testid": "remove-reaction-button",
 										onClick: async (e) => {
@@ -127,7 +134,7 @@ var MessageReactionsDetail = ({ handleFetchReactions, handleReaction, onSelected
 											else refetch();
 										},
 										type: "button",
-										children: t("Tap to remove")
+										children: t("reactions.messageReactionsDetail.tapRemove.text", "Tap to remove")
 									})]
 								}),
 								/* @__PURE__ */ jsx("span", {

package/dist/es/components/Reactions/MessageReactionsDetail.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageReactionsDetail.mjs","names":[],"sources":["../../../../src/components/Reactions/MessageReactionsDetail.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nimport type { ReactionSummary, ReactionType } from './types';\n\nimport { useFetchReactions } from './hooks/useFetchReactions';\nimport { Avatar as DefaultAvatar } from '../Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';\nimport type { MessageContextValue } from '../../context';\nimport {\n  useChatContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\nimport type { ReactionSort } from 'stream-chat';\nimport { defaultReactionOptions, getHasExtendedReactions } from './reactionOptions';\nimport type { useProcessReactions } from './hooks/useProcessReactions';\nimport { ReactionSelector, type ReactionSelectorProps } from './ReactionSelector';\n\nexport type MessageReactionsDetailProps = Partial<\n  Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>\n> & {\n  reactions: ReactionSummary[];\n  selectedReactionType: ReactionType | null;\n  onSelectedReactionTypeChange?: (reactionType: ReactionType | null) => void;\n  sort?: ReactionSort;\n  totalReactionCount?: number;\n  reactionGroups?: ReturnType<typeof useProcessReactions>['reactionGroups'];\n} & ReactionSelectorProps;\n\nconst defaultReactionDetailsSort = { created_at: -1 } as const;\n\nexport const MessageReactionsDetailLoadingIndicator = () => {\n  const elements = useMemo(\n    () =>\n      Array.from({ length: 3 }, (_, index) => (\n        <div className='str-chat__message-reactions-detail__skeleton-item' key={index}>\n          <div className='str-chat__message-reactions-detail__skeleton-avatar' />\n          <div className='str-chat__message-reactions-detail__skeleton-line' />\n        </div>\n      )),\n    [],\n  );\n\n  return <>{elements}</>;\n};\n\ninterface MessageReactionsDetailInterface {\n  (props: MessageReactionsDetailProps): React.ReactNode;\n  displayName: string;\n  getDialogId: (_: { messageId: string }) => string;\n}\n\nexport const MessageReactionsDetail: MessageReactionsDetailInterface = ({\n  handleFetchReactions,\n  handleReaction,\n  onSelectedReactionTypeChange,\n  own_reactions,\n  reactionDetailsSort: propReactionDetailsSort,\n  reactionGroups,\n  reactions,\n  selectedReactionType,\n  totalReactionCount,\n}) => {\n  const [extendedReactionListOpen, setExtendedReactionListOpen] = useState(false);\n  const { client } = useChatContext();\n  const {\n    Avatar = DefaultAvatar,\n    extractDisplayInfo = defaultExtractDisplayInfo,\n    LoadingIndicator = MessageReactionsDetailLoadingIndicator,\n    reactionOptions = defaultReactionOptions,\n    ReactionSelectorExtendedList = ReactionSelector.ExtendedList,\n  } = useComponentContext(MessageReactionsDetail.name);\n  const { IconEmojiAdd } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  const {\n    handleReaction: contextHandleReaction,\n    message,\n    reactionDetailsSort: contextReactionDetailsSort,\n  } = useMessageContext(MessageReactionsDetail.name);\n\n  const reactionDetailsSort =\n    propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;\n\n  const hasExtendedReactions = getHasExtendedReactions(reactionOptions);\n\n  const {\n    isLoading: areReactionsLoading,\n    reactions: reactionDetails,\n    refetch,\n  } = useFetchReactions({\n    handleFetchReactions,\n    reactionType: selectedReactionType,\n    shouldFetch: true,\n    sort: reactionDetailsSort,\n  });\n\n  const getReactionName = (reactionType: string) => {\n    if (Array.isArray(reactionOptions)) {\n      return (\n        reactionOptions.find((reactionOption) => reactionOption.type === reactionType)\n          ?.name ?? reactionType\n      );\n    }\n\n    return (\n      reactionOptions.quick[reactionType]?.name ??\n      reactionOptions.extended?.[reactionType]?.name ??\n      reactionType\n    );\n  };\n\n  if (extendedReactionListOpen) {\n    return (\n      <div\n        className='str-chat__message-reactions-detail'\n        data-testid='message-reactions-detail'\n      >\n        <ReactionSelectorExtendedList\n          dialogId={MessageReactionsDetail.getDialogId({ messageId: message.id })}\n          handleReaction={handleReaction}\n          own_reactions={own_reactions}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className='str-chat__message-reactions-detail'\n      data-testid='message-reactions-detail'\n    >\n      {typeof totalReactionCount === 'number' && (\n        <div className='str-chat__message-reactions-detail__total-count'>\n          {t('{{ count }} reactions', { count: totalReactionCount })}\n        </div>\n      )}\n      <div className='str-chat__message-reactions-detail__reaction-type-list-container'>\n        <ul\n          className='str-chat__message-reactions-detail__reaction-type-list'\n          data-testid='reaction-type-list'\n        >\n          {hasExtendedReactions && (\n            <li className='str-chat__message-reactions-detail__reaction-type-list-item'>\n              <button\n                aria-label={t('Add reaction')}\n                className='str-chat__message-reactions-detail__reaction-type-list-item-button'\n                data-testid='add-reaction-button'\n                onClick={() => setExtendedReactionListOpen(true)}\n                type='button'\n              >\n                <span className='str-chat__message-reactions-detail__reaction-type-list-item-icon'>\n                  <IconEmojiAdd />\n                </span>\n              </button>\n            </li>\n          )}\n\n          {reactions.map(\n            ({ EmojiComponent, reactionCount, reactionType }) =>\n              EmojiComponent && (\n                <li\n                  className='str-chat__message-reactions-detail__reaction-type-list-item'\n                  key={reactionType}\n                >\n                  <button\n                    aria-label={t('aria/Select Reaction: {{ reactionName }}', {\n                      reactionName: reactionType,\n                    })}\n                    aria-pressed={reactionType === selectedReactionType}\n                    className='str-chat__message-reactions-detail__reaction-type-list-item-button'\n                    onClick={() =>\n                      onSelectedReactionTypeChange?.(\n                        selectedReactionType === reactionType ? null : reactionType,\n                      )\n                    }\n                    type='button'\n                  >\n                    <span className='str-chat__message-reactions-detail__reaction-type-list-item-icon'>\n                      <EmojiComponent />\n                    </span>\n                    <span\n                      className='str-chat__message-reactions-detail__reaction-type-list-item-count'\n                      data-testid='reaction-type-count'\n                    >\n                      {reactionCount}\n                    </span>\n                  </button>\n                </li>\n              ),\n          )}\n        </ul>\n      </div>\n      <div className='str-chat__message-reactions-detail__user-list-container'>\n        <div\n          className='str-chat__message-reactions-detail__user-list'\n          data-testid='all-reacting-users'\n        >\n          {areReactionsLoading && <LoadingIndicator />}\n          {!areReactionsLoading && (\n            <>\n              {reactionDetails.map(({ type, user }) => {\n                const belongsToCurrentUser = client.user?.id === user?.id;\n                const reactionName = getReactionName(type);\n                const EmojiComponent = Array.isArray(reactionOptions)\n                  ? undefined\n                  : (reactionOptions.quick[type]?.Component ??\n                    reactionOptions.extended?.[type]?.Component);\n\n                return (\n                  <div\n                    className='str-chat__message-reactions-detail__user-list-item'\n                    key={`${user?.id}-${type}`}\n                  >\n                    <Avatar\n                      {...extractDisplayInfo({ user: user ?? undefined })}\n                      className='str-chat__avatar--with-border'\n                      data-testid='avatar'\n                      size='md'\n                    />\n                    <div className='str-chat__message-reactions-detail__user-list-item-info'>\n                      <span\n                        className='str-chat__message-reactions-detail__user-list-item-username'\n                        data-testid='reaction-user-username'\n                      >\n                        {belongsToCurrentUser ? t('You') : user?.name || user?.id}\n                      </span>\n                      {belongsToCurrentUser && (\n                        <button\n                          aria-label={t('Tap to remove: {{ reactionName }}', {\n                            reactionName,\n                          })}\n                          className='str-chat__message-reactions-detail__user-list-item-button'\n                          data-testid='remove-reaction-button'\n                          onClick={async (e) => {\n                            const reactionCountBeforeRemoval =\n                              reactionGroups?.[type]?.count ?? 0;\n\n                            await contextHandleReaction(type, e);\n\n                            // was 1, should be 0 after removal, display all reactions\n                            if (\n                              selectedReactionType !== null &&\n                              reactionCountBeforeRemoval <= 1\n                            ) {\n                              onSelectedReactionTypeChange?.(null);\n                            } else {\n                              refetch();\n                            }\n                          }}\n                          type='button'\n                        >\n                          {t('Tap to remove')}\n                        </button>\n                      )}\n                    </div>\n                    <span className='str-chat__message-reactions-detail__user-list-item-icon'>\n                      {!selectedReactionType && EmojiComponent && <EmojiComponent />}\n                    </span>\n                  </div>\n                );\n              })}\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nMessageReactionsDetail.displayName = 'MessageReactionsDetail';\n\nMessageReactionsDetail.getDialogId = ({ messageId }) =>\n  `message-reactions-detail-${messageId}`;\n"],"mappings":"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"}
+{"version":3,"file":"MessageReactionsDetail.mjs","names":[],"sources":["../../../../src/components/Reactions/MessageReactionsDetail.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport type { SortParamRequest } from 'stream-chat';\n\nimport type { ReactionSummary, ReactionType } from './types';\n\nimport { useFetchReactions } from './hooks/useFetchReactions';\nimport { Avatar as DefaultAvatar } from '../Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';\nimport type { MessageContextValue } from '../../context';\nimport {\n  useChatContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\nimport { defaultReactionOptions, getHasExtendedReactions } from './reactionOptions';\nimport type { useProcessReactions } from './hooks/useProcessReactions';\nimport { ReactionSelector, type ReactionSelectorProps } from './ReactionSelector';\n\nexport type MessageReactionsDetailProps = Partial<\n  Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>\n> & {\n  reactions: ReactionSummary[];\n  selectedReactionType: ReactionType | null;\n  onSelectedReactionTypeChange?: (reactionType: ReactionType | null) => void;\n  sort?: SortParamRequest[];\n  totalReactionCount?: number;\n  reactionGroups?: ReturnType<typeof useProcessReactions>['reactionGroups'];\n} & ReactionSelectorProps;\n\nconst defaultReactionDetailsSort: SortParamRequest[] = [\n  { direction: -1, field: 'created_at' },\n];\n\nexport const MessageReactionsDetailLoadingIndicator = () => {\n  const elements = useMemo(\n    () =>\n      Array.from({ length: 3 }, (_, index) => (\n        <div className='str-chat__message-reactions-detail__skeleton-item' key={index}>\n          <div className='str-chat__message-reactions-detail__skeleton-avatar' />\n          <div className='str-chat__message-reactions-detail__skeleton-line' />\n        </div>\n      )),\n    [],\n  );\n\n  return <>{elements}</>;\n};\n\ninterface MessageReactionsDetailInterface {\n  (props: MessageReactionsDetailProps): React.ReactNode;\n  displayName: string;\n  getDialogId: (_: { messageId: string }) => string;\n}\n\nexport const MessageReactionsDetail: MessageReactionsDetailInterface = ({\n  handleFetchReactions,\n  handleReaction,\n  onSelectedReactionTypeChange,\n  own_reactions,\n  reactionDetailsSort: propReactionDetailsSort,\n  reactionGroups,\n  reactions,\n  selectedReactionType,\n  totalReactionCount,\n}) => {\n  const { IconEmojiAdd } = useComponentContextIcons();\n  const [extendedReactionListOpen, setExtendedReactionListOpen] = useState(false);\n  const { client } = useChatContext();\n  const {\n    Avatar = DefaultAvatar,\n    extractDisplayInfo = defaultExtractDisplayInfo,\n    LoadingIndicator = MessageReactionsDetailLoadingIndicator,\n    reactionOptions = defaultReactionOptions,\n    ReactionSelectorExtendedList = ReactionSelector.ExtendedList,\n  } = useComponentContext();\n  const { t } = useTranslationContext();\n\n  const {\n    handleReaction: contextHandleReaction,\n    message,\n    reactionDetailsSort: contextReactionDetailsSort,\n  } = useMessageContext();\n\n  const reactionDetailsSort =\n    propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;\n\n  const hasExtendedReactions = getHasExtendedReactions(reactionOptions);\n\n  const {\n    isLoading: areReactionsLoading,\n    reactions: reactionDetails,\n    refetch,\n  } = useFetchReactions({\n    handleFetchReactions,\n    reactionType: selectedReactionType,\n    shouldFetch: true,\n    sort: reactionDetailsSort,\n  });\n\n  const getReactionName = (reactionType: string) => {\n    if (Array.isArray(reactionOptions)) {\n      return (\n        reactionOptions.find((reactionOption) => reactionOption.type === reactionType)\n          ?.name ?? reactionType\n      );\n    }\n\n    return (\n      reactionOptions.quick[reactionType]?.name ??\n      reactionOptions.extended?.[reactionType]?.name ??\n      reactionType\n    );\n  };\n\n  if (extendedReactionListOpen) {\n    return (\n      <div\n        className='str-chat__message-reactions-detail'\n        data-testid='message-reactions-detail'\n      >\n        <ReactionSelectorExtendedList\n          dialogId={MessageReactionsDetail.getDialogId({ messageId: message.id })}\n          handleReaction={handleReaction}\n          own_reactions={own_reactions}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className='str-chat__message-reactions-detail'\n      data-testid='message-reactions-detail'\n    >\n      {typeof totalReactionCount === 'number' && (\n        <div className='str-chat__message-reactions-detail__total-count'>\n          {t('reactions.messageReactionsDetail.reactions.text', {\n            count: totalReactionCount,\n            defaultValue_one: '{{ count }} reaction',\n            defaultValue_other: '{{ count }} reactions',\n          })}\n        </div>\n      )}\n      <div className='str-chat__message-reactions-detail__reaction-type-list-container'>\n        <ul\n          className='str-chat__message-reactions-detail__reaction-type-list'\n          data-testid='reaction-type-list'\n        >\n          {hasExtendedReactions && (\n            <li className='str-chat__message-reactions-detail__reaction-type-list-item'>\n              <button\n                aria-label={t('common.addReaction.text', 'Add reaction')}\n                className='str-chat__message-reactions-detail__reaction-type-list-item-button'\n                data-testid='add-reaction-button'\n                onClick={() => setExtendedReactionListOpen(true)}\n                type='button'\n              >\n                <span className='str-chat__message-reactions-detail__reaction-type-list-item-icon'>\n                  <IconEmojiAdd />\n                </span>\n              </button>\n            </li>\n          )}\n\n          {reactions.map(\n            ({ EmojiComponent, reactionCount, reactionType }) =>\n              EmojiComponent && (\n                <li\n                  className='str-chat__message-reactions-detail__reaction-type-list-item'\n                  key={reactionType}\n                >\n                  <button\n                    aria-label={t(\n                      'reactions.messageReactions.selectReaction.ariaLabel',\n                      'Select Reaction: {{ reactionName }}',\n                      {\n                        reactionName: reactionType,\n                      },\n                    )}\n                    aria-pressed={reactionType === selectedReactionType}\n                    className='str-chat__message-reactions-detail__reaction-type-list-item-button'\n                    onClick={() =>\n                      onSelectedReactionTypeChange?.(\n                        selectedReactionType === reactionType ? null : reactionType,\n                      )\n                    }\n                    type='button'\n                  >\n                    <span className='str-chat__message-reactions-detail__reaction-type-list-item-icon'>\n                      <EmojiComponent />\n                    </span>\n                    <span\n                      className='str-chat__message-reactions-detail__reaction-type-list-item-count'\n                      data-testid='reaction-type-count'\n                    >\n                      {reactionCount}\n                    </span>\n                  </button>\n                </li>\n              ),\n          )}\n        </ul>\n      </div>\n      <div className='str-chat__message-reactions-detail__user-list-container'>\n        <div\n          className='str-chat__message-reactions-detail__user-list'\n          data-testid='all-reacting-users'\n        >\n          {areReactionsLoading && <LoadingIndicator />}\n          {!areReactionsLoading && (\n            <>\n              {reactionDetails.map(({ type, user }) => {\n                const belongsToCurrentUser = client.user?.id === user?.id;\n                const reactionName = getReactionName(type);\n                const EmojiComponent = Array.isArray(reactionOptions)\n                  ? undefined\n                  : (reactionOptions.quick[type]?.Component ??\n                    reactionOptions.extended?.[type]?.Component);\n\n                return (\n                  <div\n                    className='str-chat__message-reactions-detail__user-list-item'\n                    key={`${user?.id}-${type}`}\n                  >\n                    <Avatar\n                      {...extractDisplayInfo({ user: user ?? undefined })}\n                      className='str-chat__avatar--with-border'\n                      data-testid='avatar'\n                      size='md'\n                    />\n                    <div className='str-chat__message-reactions-detail__user-list-item-info'>\n                      <span\n                        className='str-chat__message-reactions-detail__user-list-item-username'\n                        data-testid='reaction-user-username'\n                      >\n                        {belongsToCurrentUser\n                          ? t('common.you.label', 'You')\n                          : user?.name || user?.id}\n                      </span>\n                      {belongsToCurrentUser && (\n                        <button\n                          aria-label={t(\n                            'reactions.messageReactionsDetail.tapRemove.ariaLabel',\n                            'Tap to remove: {{ reactionName }}',\n                            {\n                              reactionName,\n                            },\n                          )}\n                          className='str-chat__message-reactions-detail__user-list-item-button'\n                          data-testid='remove-reaction-button'\n                          onClick={async (e) => {\n                            const reactionCountBeforeRemoval =\n                              reactionGroups?.[type]?.count ?? 0;\n\n                            await contextHandleReaction(type, e);\n\n                            // was 1, should be 0 after removal, display all reactions\n                            if (\n                              selectedReactionType !== null &&\n                              reactionCountBeforeRemoval <= 1\n                            ) {\n                              onSelectedReactionTypeChange?.(null);\n                            } else {\n                              refetch();\n                            }\n                          }}\n                          type='button'\n                        >\n                          {t(\n                            'reactions.messageReactionsDetail.tapRemove.text',\n                            'Tap to remove',\n                          )}\n                        </button>\n                      )}\n                    </div>\n                    <span className='str-chat__message-reactions-detail__user-list-item-icon'>\n                      {!selectedReactionType && EmojiComponent && <EmojiComponent />}\n                    </span>\n                  </div>\n                );\n              })}\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nMessageReactionsDetail.displayName = 'MessageReactionsDetail';\n\nMessageReactionsDetail.getDialogId = ({ messageId }) =>\n  `message-reactions-detail-${messageId}`;\n"],"mappings":"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"}

package/dist/es/components/Reactions/ReactionSelector.mjs

@@ -1,22 +1,22 @@
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useDialogOnNearestManager } from "../Dialog/hooks/useDialog.mjs";
 import { useMessageContext } from "../../context/MessageContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { Button } from "../Button/Button.mjs";
 import { defaultReactionOptions, getHasExtendedReactions } from "./reactionOptions.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/Reactions/ReactionSelector.tsx
 var stableOwnReactions = [];
 var ReactionSelector = (props) => {
+	const { IconPlus } = useComponentContextIcons();
 	const { dialogId: propDialogId, handleReaction: propHandleReaction, own_reactions: propOwnReactions } = props;
 	const [extendedListOpen, setExtendedListOpen] = useState(false);
-	const { reactionOptions = defaultReactionOptions, ReactionSelectorExtendedList = ReactionSelector.ExtendedList } = useComponentContext("ReactionSelector");
-	const { IconPlus } = useComponentContextIcons();
-	const { closeReactionSelectorOnClick, handleReaction: contextHandleReaction, message, threadList } = useMessageContext("ReactionSelector");
-	const { t } = useTranslationContext("ReactionSelector");
+	const { reactionOptions = defaultReactionOptions, ReactionSelectorExtendedList = ReactionSelector.ExtendedList } = useComponentContext();
+	const { closeReactionSelectorOnClick, handleReaction: contextHandleReaction, message, threadList } = useMessageContext();
+	const { t } = useTranslationContext();
 	const dialogId = propDialogId ?? ReactionSelector.getDialogId({
 		messageId: message.id,
 		threadList
@@ -26,10 +26,7 @@ var ReactionSelector = (props) => {
 	const ownReactions = propOwnReactions ?? message?.own_reactions ?? stableOwnReactions;
 	const ownReactionByType = useMemo(() => {
 		const map = {};
-		for (const reaction of ownReactions) {
-			var _reaction$type;
-			map[_reaction$type = reaction.type] ?? (map[_reaction$type] = reaction);
-		}
+		for (const reaction of ownReactions) map[reaction.type] ??= reaction;
 		return map;
 	}, [ownReactions]);
 	const adjustedQuickReactionOptions = useMemo(() => {
@@ -43,7 +40,7 @@ var ReactionSelector = (props) => {
 	}, [reactionOptions]);
 	const hasExtendedReactions = getHasExtendedReactions(reactionOptions);
 	return /* @__PURE__ */ jsx("div", {
-		"aria-label": t("aria/Reaction list"),
+		"aria-label": t("reactions.messageReactions.reactionList.ariaLabel", "Reaction list"),
 		className: "str-chat__reaction-selector",
 		"data-testid": "reaction-selector",
 		role: "group",
@@ -53,7 +50,7 @@ var ReactionSelector = (props) => {
 			children: adjustedQuickReactionOptions.map(({ Component, name: reactionName, type: reactionType }) => /* @__PURE__ */ jsx("li", {
 				className: "str-chat__reaction-list-selector__item",
 				children: /* @__PURE__ */ jsx("button", {
-					"aria-label": t("aria/Select Reaction: {{ reactionName }}", { reactionName: reactionName || reactionType }),
+					"aria-label": t("reactions.messageReactions.selectReaction.ariaLabel", "Select Reaction: {{ reactionName }}", { reactionName: reactionName || reactionType }),
 					"aria-pressed": typeof ownReactionByType[reactionType] !== "undefined",
 					className: clsx("str-chat__reaction-selector-list__item-button"),
 					"data-testid": "select-reaction-button",
@@ -71,7 +68,7 @@ var ReactionSelector = (props) => {
 			}, reactionType))
 		}), hasExtendedReactions && /* @__PURE__ */ jsx(Button, {
 			appearance: "outline",
-			"aria-label": t("aria/Open Reaction Selector"),
+			"aria-label": t("common.openReactionSelector.ariaLabel", "Open Reaction Selector"),
 			circular: true,
 			className: "str-chat__reaction-selector__add-button",
 			"data-testid": "reaction-selector-add-button",
@@ -96,28 +93,25 @@ ReactionSelector.getDialogId = ({ messageId, threadList }) => {
 };
 ReactionSelector.displayName = "ReactionSelector";
 ReactionSelector.ExtendedList = function ReactionSelectorExtendedList({ dialogId, handleReaction: propHandleReaction, own_reactions: propOwnReactions }) {
-	const { reactionOptions = defaultReactionOptions } = useComponentContext("ReactionSelector.ExtendedList");
-	const { closeReactionSelectorOnClick, handleReaction: contextHandleReaction, message } = useMessageContext("ReactionSelector");
-	const { t } = useTranslationContext("ReactionSelector");
+	const { reactionOptions = defaultReactionOptions } = useComponentContext();
+	const { closeReactionSelectorOnClick, handleReaction: contextHandleReaction, message } = useMessageContext();
+	const { t } = useTranslationContext();
 	const handleReaction = propHandleReaction ?? contextHandleReaction;
 	const ownReactions = propOwnReactions ?? message?.own_reactions ?? stableOwnReactions;
 	const { dialog } = useDialogOnNearestManager({ id: dialogId || "" });
 	const ownReactionByType = useMemo(() => {
 		const map = {};
-		for (const reaction of ownReactions) {
-			var _reaction$type2;
-			map[_reaction$type2 = reaction.type] ?? (map[_reaction$type2] = reaction);
-		}
+		for (const reaction of ownReactions) map[reaction.type] ??= reaction;
 		return map;
 	}, [ownReactions]);
 	if (Array.isArray(reactionOptions) || !reactionOptions.extended) return null;
 	return /* @__PURE__ */ jsx("div", {
-		"aria-label": t("aria/Reaction list"),
+		"aria-label": t("reactions.messageReactions.reactionList.ariaLabel", "Reaction list"),
 		className: "str-chat__reaction-selector-extended-list",
 		"data-testid": "reaction-selector-extended-list",
 		role: "group",
 		children: Object.entries(reactionOptions.extended).map(([reactionType, { Component, name: reactionName }]) => /* @__PURE__ */ jsx("button", {
-			"aria-label": t("aria/Select Reaction: {{ reactionName }}", { reactionName: reactionName || reactionType }),
+			"aria-label": t("reactions.messageReactions.selectReaction.ariaLabel", "Select Reaction: {{ reactionName }}", { reactionName: reactionName || reactionType }),
 			"aria-pressed": typeof ownReactionByType[reactionType] !== "undefined",
 			className: "str-chat__reaction-selector-extended-list__button str-chat__button str-chat__button--ghost str-chat__button--size-sm str-chat__button--circular",
 			"data-testid": "select-reaction-button",

package/dist/es/components/Reactions/ReactionSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionSelector.mjs","names":[],"sources":["../../../../src/components/Reactions/ReactionSelector.tsx"],"sourcesContent":["import React, { type ReactNode, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useDialogOnNearestManager } from '../Dialog';\nimport { defaultReactionOptions, getHasExtendedReactions } from './reactionOptions';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { useMessageContext } from '../../context/MessageContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { Button } from '../Button';\n\nimport type { ReactionResponse } from 'stream-chat';\n\nimport { useComponentContextIcons } from '../../context';\nexport type ReactionSelectorProps = {\n  /** Override dialog id used by the selector popover. */\n  dialogId?: string;\n  /** Function that adds/removes a reaction on a message (overrides the function stored in `MessageContext`) */\n  handleReaction?: (\n    reactionType: string,\n    event: React.BaseSyntheticEvent,\n  ) => Promise<void>;\n  /** An array of the own reaction objects to distinguish own reactions visually */\n  own_reactions?: ReactionResponse[];\n};\n\ninterface ReactionSelectorInterface {\n  (props: ReactionSelectorProps): ReactNode;\n  getDialogId: (_: { messageId: string; threadList?: boolean }) => string;\n  displayName: string;\n  ExtendedList: React.ComponentType<ReactionSelectorProps & { dialogId?: string }>;\n}\n\nconst stableOwnReactions: ReactionResponse[] = [];\n\nexport const ReactionSelector: ReactionSelectorInterface = (props) => {\n  const {\n    dialogId: propDialogId,\n    handleReaction: propHandleReaction,\n    own_reactions: propOwnReactions,\n  } = props;\n  const [extendedListOpen, setExtendedListOpen] = useState(false);\n\n  const {\n    reactionOptions = defaultReactionOptions,\n    ReactionSelectorExtendedList = ReactionSelector.ExtendedList,\n  } = useComponentContext('ReactionSelector');\n  const { IconPlus } = useComponentContextIcons();\n\n  const {\n    closeReactionSelectorOnClick,\n    handleReaction: contextHandleReaction,\n    message,\n    threadList,\n  } = useMessageContext('ReactionSelector');\n  const { t } = useTranslationContext('ReactionSelector');\n  const dialogId =\n    propDialogId ??\n    ReactionSelector.getDialogId({\n      messageId: message.id,\n      threadList,\n    });\n  const { dialog } = useDialogOnNearestManager({ id: dialogId });\n\n  const handleReaction = propHandleReaction ?? contextHandleReaction;\n  const ownReactions = propOwnReactions ?? message?.own_reactions ?? stableOwnReactions;\n\n  const ownReactionByType = useMemo(() => {\n    const map: { [key: string]: ReactionResponse } = {};\n\n    for (const reaction of ownReactions) {\n      map[reaction.type] ??= reaction;\n    }\n\n    return map;\n  }, [ownReactions]);\n\n  const adjustedQuickReactionOptions = useMemo(() => {\n    if (Array.isArray(reactionOptions)) return reactionOptions;\n\n    return Object.entries(reactionOptions.quick).map(\n      ([type, { Component, name, unicode }]) => ({\n        Component,\n        name,\n        type,\n        unicode,\n      }),\n    );\n  }, [reactionOptions]);\n\n  const hasExtendedReactions = getHasExtendedReactions(reactionOptions);\n\n  return (\n    <div\n      aria-label={t('aria/Reaction list')}\n      className='str-chat__reaction-selector'\n      data-testid='reaction-selector'\n      role='group'\n    >\n      {!extendedListOpen ? (\n        <>\n          <ul\n            className='str-chat__reaction-selector-list'\n            data-testid='reaction-selector-list'\n          >\n            {adjustedQuickReactionOptions.map(\n              ({ Component, name: reactionName, type: reactionType }) => (\n                <li className='str-chat__reaction-list-selector__item' key={reactionType}>\n                  <button\n                    aria-label={t('aria/Select Reaction: {{ reactionName }}', {\n                      reactionName: reactionName || reactionType,\n                    })}\n                    aria-pressed={typeof ownReactionByType[reactionType] !== 'undefined'}\n                    className={clsx('str-chat__reaction-selector-list__item-button')}\n                    data-testid='select-reaction-button'\n                    data-text={reactionType}\n                    onClick={(event) => {\n                      handleReaction(reactionType, event);\n                      if (closeReactionSelectorOnClick) {\n                        dialog.close();\n                      }\n                    }}\n                    type='button'\n                  >\n                    <span className='str-chat__reaction-icon'>\n                      <Component />\n                    </span>\n                  </button>\n                </li>\n              ),\n            )}\n          </ul>\n          {hasExtendedReactions && (\n            <Button\n              appearance='outline'\n              aria-label={t('aria/Open Reaction Selector')}\n              circular\n              className='str-chat__reaction-selector__add-button'\n              data-testid='reaction-selector-add-button'\n              onClick={() => {\n                setExtendedListOpen(true);\n              }}\n              size='sm'\n              variant='secondary'\n            >\n              <IconPlus />\n            </Button>\n          )}\n        </>\n      ) : (\n        <ReactionSelectorExtendedList\n          {...props}\n          dialogId={dialogId}\n          handleReaction={async (reactionType, event) => {\n            await handleReaction(reactionType, event);\n            if (closeReactionSelectorOnClick) {\n              dialog.close();\n            }\n          }}\n        />\n      )}\n    </div>\n  );\n};\n\nReactionSelector.getDialogId = ({ messageId, threadList }) => {\n  const dialogIdNamespace = threadList ? '-thread' : '';\n  return `reaction-selector${dialogIdNamespace}-${messageId}`;\n};\n\nReactionSelector.displayName = 'ReactionSelector';\n\nReactionSelector.ExtendedList = function ReactionSelectorExtendedList({\n  dialogId,\n  handleReaction: propHandleReaction,\n  own_reactions: propOwnReactions,\n}) {\n  const { reactionOptions = defaultReactionOptions } = useComponentContext(\n    'ReactionSelector.ExtendedList',\n  );\n  const {\n    closeReactionSelectorOnClick,\n    handleReaction: contextHandleReaction,\n    message,\n  } = useMessageContext('ReactionSelector');\n  const { t } = useTranslationContext('ReactionSelector');\n\n  const handleReaction = propHandleReaction ?? contextHandleReaction;\n  const ownReactions = propOwnReactions ?? message?.own_reactions ?? stableOwnReactions;\n\n  const { dialog } = useDialogOnNearestManager({ id: dialogId || '' });\n\n  const ownReactionByType = useMemo(() => {\n    const map: { [key: string]: ReactionResponse } = {};\n\n    for (const reaction of ownReactions) {\n      map[reaction.type] ??= reaction;\n    }\n\n    return map;\n  }, [ownReactions]);\n\n  if (Array.isArray(reactionOptions) || !reactionOptions.extended) {\n    return null;\n  }\n\n  return (\n    <div\n      aria-label={t('aria/Reaction list')}\n      className='str-chat__reaction-selector-extended-list'\n      data-testid='reaction-selector-extended-list'\n      role='group'\n    >\n      {Object.entries(reactionOptions.extended).map(\n        ([reactionType, { Component, name: reactionName }]) => (\n          <button\n            aria-label={t('aria/Select Reaction: {{ reactionName }}', {\n              reactionName: reactionName || reactionType,\n            })}\n            aria-pressed={typeof ownReactionByType[reactionType] !== 'undefined'}\n            className='str-chat__reaction-selector-extended-list__button str-chat__button str-chat__button--ghost str-chat__button--size-sm str-chat__button--circular'\n            data-testid='select-reaction-button'\n            data-text={reactionType}\n            key={reactionType}\n            onClick={(event) => {\n              handleReaction(reactionType, event);\n              if (closeReactionSelectorOnClick) {\n                dialog.close();\n              }\n            }}\n            type='button'\n          >\n            <span className='str-chat__reaction-icon'>\n              <Component />\n            </span>\n          </button>\n        ),\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ReactionSelector.mjs","names":[],"sources":["../../../../src/components/Reactions/ReactionSelector.tsx"],"sourcesContent":["import React, { type ReactNode, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useDialogOnNearestManager } from '../Dialog';\nimport { defaultReactionOptions, getHasExtendedReactions } from './reactionOptions';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { useMessageContext } from '../../context/MessageContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { Button } from '../Button';\n\nimport type { ReactionResponse } from 'stream-chat';\nimport { useComponentContextIcons } from '../../context';\n\nexport type ReactionSelectorProps = {\n  /** Override dialog id used by the selector popover. */\n  dialogId?: string;\n  /** Function that adds/removes a reaction on a message (overrides the function stored in `MessageContext`) */\n  handleReaction?: (\n    reactionType: string,\n    event: React.BaseSyntheticEvent,\n  ) => Promise<void>;\n  /** An array of the own reaction objects to distinguish own reactions visually */\n  own_reactions?: ReactionResponse[];\n};\n\ninterface ReactionSelectorInterface {\n  (props: ReactionSelectorProps): ReactNode;\n  getDialogId: (_: { messageId: string; threadList?: boolean }) => string;\n  displayName: string;\n  ExtendedList: React.ComponentType<ReactionSelectorProps & { dialogId?: string }>;\n}\n\nconst stableOwnReactions: ReactionResponse[] = [];\n\nexport const ReactionSelector: ReactionSelectorInterface = (props) => {\n  const { IconPlus } = useComponentContextIcons();\n  const {\n    dialogId: propDialogId,\n    handleReaction: propHandleReaction,\n    own_reactions: propOwnReactions,\n  } = props;\n  const [extendedListOpen, setExtendedListOpen] = useState(false);\n\n  const {\n    reactionOptions = defaultReactionOptions,\n    ReactionSelectorExtendedList = ReactionSelector.ExtendedList,\n  } = useComponentContext();\n\n  const {\n    closeReactionSelectorOnClick,\n    handleReaction: contextHandleReaction,\n    message,\n    threadList,\n  } = useMessageContext();\n  const { t } = useTranslationContext();\n  const dialogId =\n    propDialogId ??\n    ReactionSelector.getDialogId({\n      messageId: message.id,\n      threadList,\n    });\n  const { dialog } = useDialogOnNearestManager({ id: dialogId });\n\n  const handleReaction = propHandleReaction ?? contextHandleReaction;\n  const ownReactions = propOwnReactions ?? message?.own_reactions ?? stableOwnReactions;\n\n  const ownReactionByType = useMemo(() => {\n    const map: { [key: string]: ReactionResponse } = {};\n\n    for (const reaction of ownReactions) {\n      map[reaction.type] ??= reaction;\n    }\n\n    return map;\n  }, [ownReactions]);\n\n  const adjustedQuickReactionOptions = useMemo(() => {\n    if (Array.isArray(reactionOptions)) return reactionOptions;\n\n    return Object.entries(reactionOptions.quick).map(\n      ([type, { Component, name, unicode }]) => ({\n        Component,\n        name,\n        type,\n        unicode,\n      }),\n    );\n  }, [reactionOptions]);\n\n  const hasExtendedReactions = getHasExtendedReactions(reactionOptions);\n\n  return (\n    <div\n      aria-label={t('reactions.messageReactions.reactionList.ariaLabel', 'Reaction list')}\n      className='str-chat__reaction-selector'\n      data-testid='reaction-selector'\n      role='group'\n    >\n      {!extendedListOpen ? (\n        <>\n          <ul\n            className='str-chat__reaction-selector-list'\n            data-testid='reaction-selector-list'\n          >\n            {adjustedQuickReactionOptions.map(\n              ({ Component, name: reactionName, type: reactionType }) => (\n                <li className='str-chat__reaction-list-selector__item' key={reactionType}>\n                  <button\n                    aria-label={t(\n                      'reactions.messageReactions.selectReaction.ariaLabel',\n                      'Select Reaction: {{ reactionName }}',\n                      {\n                        reactionName: reactionName || reactionType,\n                      },\n                    )}\n                    aria-pressed={typeof ownReactionByType[reactionType] !== 'undefined'}\n                    className={clsx('str-chat__reaction-selector-list__item-button')}\n                    data-testid='select-reaction-button'\n                    data-text={reactionType}\n                    onClick={(event) => {\n                      handleReaction(reactionType, event);\n                      if (closeReactionSelectorOnClick) {\n                        dialog.close();\n                      }\n                    }}\n                    type='button'\n                  >\n                    <span className='str-chat__reaction-icon'>\n                      <Component />\n                    </span>\n                  </button>\n                </li>\n              ),\n            )}\n          </ul>\n          {hasExtendedReactions && (\n            <Button\n              appearance='outline'\n              aria-label={t(\n                'common.openReactionSelector.ariaLabel',\n                'Open Reaction Selector',\n              )}\n              circular\n              className='str-chat__reaction-selector__add-button'\n              data-testid='reaction-selector-add-button'\n              onClick={() => {\n                setExtendedListOpen(true);\n              }}\n              size='sm'\n              variant='secondary'\n            >\n              <IconPlus />\n            </Button>\n          )}\n        </>\n      ) : (\n        <ReactionSelectorExtendedList\n          {...props}\n          dialogId={dialogId}\n          handleReaction={async (reactionType, event) => {\n            await handleReaction(reactionType, event);\n            if (closeReactionSelectorOnClick) {\n              dialog.close();\n            }\n          }}\n        />\n      )}\n    </div>\n  );\n};\n\nReactionSelector.getDialogId = ({ messageId, threadList }) => {\n  const dialogIdNamespace = threadList ? '-thread' : '';\n  return `reaction-selector${dialogIdNamespace}-${messageId}`;\n};\n\nReactionSelector.displayName = 'ReactionSelector';\n\nReactionSelector.ExtendedList = function ReactionSelectorExtendedList({\n  dialogId,\n  handleReaction: propHandleReaction,\n  own_reactions: propOwnReactions,\n}) {\n  const { reactionOptions = defaultReactionOptions } = useComponentContext();\n  const {\n    closeReactionSelectorOnClick,\n    handleReaction: contextHandleReaction,\n    message,\n  } = useMessageContext();\n  const { t } = useTranslationContext();\n\n  const handleReaction = propHandleReaction ?? contextHandleReaction;\n  const ownReactions = propOwnReactions ?? message?.own_reactions ?? stableOwnReactions;\n\n  const { dialog } = useDialogOnNearestManager({ id: dialogId || '' });\n\n  const ownReactionByType = useMemo(() => {\n    const map: { [key: string]: ReactionResponse } = {};\n\n    for (const reaction of ownReactions) {\n      map[reaction.type] ??= reaction;\n    }\n\n    return map;\n  }, [ownReactions]);\n\n  if (Array.isArray(reactionOptions) || !reactionOptions.extended) {\n    return null;\n  }\n\n  return (\n    <div\n      aria-label={t('reactions.messageReactions.reactionList.ariaLabel', 'Reaction list')}\n      className='str-chat__reaction-selector-extended-list'\n      data-testid='reaction-selector-extended-list'\n      role='group'\n    >\n      {Object.entries(reactionOptions.extended).map(\n        ([reactionType, { Component, name: reactionName }]) => (\n          <button\n            aria-label={t(\n              'reactions.messageReactions.selectReaction.ariaLabel',\n              'Select Reaction: {{ reactionName }}',\n              {\n                reactionName: reactionName || reactionType,\n              },\n            )}\n            aria-pressed={typeof ownReactionByType[reactionType] !== 'undefined'}\n            className='str-chat__reaction-selector-extended-list__button str-chat__button str-chat__button--ghost str-chat__button--size-sm str-chat__button--circular'\n            data-testid='select-reaction-button'\n            data-text={reactionType}\n            key={reactionType}\n            onClick={(event) => {\n              handleReaction(reactionType, event);\n              if (closeReactionSelectorOnClick) {\n                dialog.close();\n              }\n            }}\n            type='button'\n          >\n            <span className='str-chat__reaction-icon'>\n              <Component />\n            </span>\n          </button>\n        ),\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/es/components/Reactions/ReactionSelectorWithButton.mjs

@@ -1,11 +1,11 @@
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useDialogIsOpen, useDialogOnNearestManager } from "../Dialog/hooks/useDialog.mjs";
 import { useMessageContext } from "../../context/MessageContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { DialogAnchor } from "../Dialog/service/DialogAnchor.mjs";
 import { ReactionSelector } from "./ReactionSelector.mjs";
 import { QuickMessageActionsButton } from "../MessageActions/QuickMessageActionButton.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Reactions/ReactionSelectorWithButton.tsx
@@ -14,8 +14,8 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * cluttering the parent component.
 */
 var ReactionSelectorWithButton = ({ ReactionIcon }) => {
-	const { t } = useTranslationContext("ReactionSelectorWithButton");
-	const { isMyMessage, message, threadList } = useMessageContext("MessageOptions");
+	const { t } = useTranslationContext();
+	const { isMyMessage, message, threadList } = useMessageContext();
 	const { ReactionSelector: ReactionSelector$1 = ReactionSelector } = useComponentContext();
 	const { IconEmoji } = useComponentContextIcons();
 	const ResolvedReactionIcon = ReactionIcon ?? IconEmoji;
@@ -37,7 +37,7 @@ var ReactionSelectorWithButton = ({ ReactionIcon }) => {
 		children: /* @__PURE__ */ jsx(ReactionSelector$1, {})
 	}), /* @__PURE__ */ jsx(QuickMessageActionsButton, {
 		"aria-expanded": dialogIsOpen,
-		"aria-label": t("aria/Open Reaction Selector"),
+		"aria-label": t("common.openReactionSelector.ariaLabel", "Open Reaction Selector"),
 		className: "str-chat__message-reactions-button",
 		"data-testid": "message-reaction-action",
 		onClick: () => dialog?.toggle(),

package/dist/es/components/Reactions/ReactionSelectorWithButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionSelectorWithButton.mjs","names":[],"sources":["../../../../src/components/Reactions/ReactionSelectorWithButton.tsx"],"sourcesContent":["import type { ComponentRef } from 'react';\nimport React, { useRef } from 'react';\nimport { ReactionSelector as DefaultReactionSelector } from './ReactionSelector';\nimport { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\n\nimport type { IconProps } from '../../types/types';\nimport { QuickMessageActionsButton } from '../MessageActions';\n\ntype ReactionSelectorWithButtonProps = {\n  /**\n   * Custom component rendering the icon used in a button invoking reactions selector for a given message.\n   * @deprecated Use the `icons.IconEmoji` slot on `ComponentContext` (via `<WithComponents overrides={{ icons: { IconEmoji: ... } }}>`) instead.\n   * Passing this prop still wins over the context slot for backwards compatibility.\n   */\n  ReactionIcon?: React.ComponentType<IconProps>;\n};\n\n/**\n * Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents\n * cluttering the parent component.\n */\nexport const ReactionSelectorWithButton = ({\n  ReactionIcon,\n}: ReactionSelectorWithButtonProps) => {\n  const { t } = useTranslationContext('ReactionSelectorWithButton');\n  const { isMyMessage, message, threadList } = useMessageContext('MessageOptions');\n  const { ReactionSelector = DefaultReactionSelector } = useComponentContext();\n  const { IconEmoji } = useComponentContextIcons();\n  const ResolvedReactionIcon = ReactionIcon ?? IconEmoji;\n  const buttonRef = useRef<ComponentRef<'button'>>(null);\n  const dialogId = DefaultReactionSelector.getDialogId({\n    messageId: message.id,\n    threadList,\n  });\n  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);\n\n  return (\n    <>\n      <DialogAnchor\n        dialogManagerId={dialogManager?.id}\n        id={dialogId}\n        offset={8}\n        placement={isMyMessage() ? 'top-end' : 'top-start'}\n        referenceElement={buttonRef.current}\n        trapFocus\n        updatePositionOnContentResize\n      >\n        <ReactionSelector />\n      </DialogAnchor>\n      <QuickMessageActionsButton\n        aria-expanded={dialogIsOpen}\n        aria-label={t('aria/Open Reaction Selector')}\n        className='str-chat__message-reactions-button'\n        data-testid='message-reaction-action'\n        onClick={() => dialog?.toggle()}\n        ref={buttonRef}\n      >\n        <ResolvedReactionIcon className='str-chat__message-action-icon' />\n      </QuickMessageActionsButton>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,IAAa,8BAA8B,EACzC,mBACqC;CACrC,MAAM,EAAE,MAAM,sBAAsB,4BAA4B;CAChE,MAAM,EAAE,aAAa,SAAS,eAAe,kBAAkB,gBAAgB;CAC/E,MAAM,EAAE,kBAAA,qBAAmB,qBAA4B,oBAAoB;CAC3E,MAAM,EAAE,cAAc,yBAAyB;CAC/C,MAAM,uBAAuB,gBAAgB;CAC7C,MAAM,YAAY,OAA+B,IAAI;CACrD,MAAM,WAAW,iBAAwB,YAAY;EACnD,WAAW,QAAQ;EACnB;CACF,CAAC;CACD,MAAM,EAAE,QAAQ,kBAAkB,0BAA0B,EAAE,IAAI,SAAS,CAAC;CAC5E,MAAM,eAAe,gBAAgB,UAAU,eAAe,EAAE;CAEhE,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACE,iBAAiB,eAAe;EAChC,IAAI;EACJ,QAAQ;EACR,WAAW,YAAY,IAAI,YAAY;EACvC,kBAAkB,UAAU;EAC5B,WAAA;EACA,+BAAA;YAEA,oBAAC,oBAAD,CAAmB,CAAA;CACP,CAAA,GACd,oBAAC,2BAAD;EACE,iBAAe;EACf,cAAY,EAAE,6BAA6B;EAC3C,WAAU;EACV,eAAY;EACZ,eAAe,QAAQ,OAAO;EAC9B,KAAK;YAEL,oBAAC,sBAAD,EAAsB,WAAU,gCAAiC,CAAA;CACxC,CAAA,CAC3B,EAAA,CAAA;AAEN"}
+{"version":3,"file":"ReactionSelectorWithButton.mjs","names":[],"sources":["../../../../src/components/Reactions/ReactionSelectorWithButton.tsx"],"sourcesContent":["import type { ComponentRef } from 'react';\nimport React, { useRef } from 'react';\nimport { ReactionSelector as DefaultReactionSelector } from './ReactionSelector';\nimport { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\n\nimport type { IconProps } from '../../types/types';\nimport { QuickMessageActionsButton } from '../MessageActions';\n\ntype ReactionSelectorWithButtonProps = {\n  /* Custom component rendering the icon used in a button invoking reactions selector for a given message. Defaults to the `icons.IconEmoji` slot on `ComponentContext`. */\n  ReactionIcon?: React.ComponentType<IconProps>;\n};\n\n/**\n * Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents\n * cluttering the parent component.\n */\nexport const ReactionSelectorWithButton = ({\n  ReactionIcon,\n}: ReactionSelectorWithButtonProps) => {\n  const { t } = useTranslationContext();\n  const { isMyMessage, message, threadList } = useMessageContext();\n  const { ReactionSelector = DefaultReactionSelector } = useComponentContext();\n  const { IconEmoji } = useComponentContextIcons();\n  // The prop still wins: it targets one message's reaction button, the slot rebrands all of them.\n  const ResolvedReactionIcon = ReactionIcon ?? IconEmoji;\n  const buttonRef = useRef<ComponentRef<'button'>>(null);\n  // MUST match the id `MessageActions` derives via `ReactionSelector.getDialogId` — it\n  // uses that to keep `.str-chat__message-options--active` applied while the reaction\n  // dialog is open. If the ids diverge, the options (and this trigger button) hide when\n  // focus moves into the portaled dialog, the reference collapses to a 0-size rect, and\n  // the popover falls back to the 8,8 corner. Derive from the same shared helper.\n  const dialogId = DefaultReactionSelector.getDialogId({\n    messageId: message.id,\n    threadList,\n  });\n  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);\n\n  return (\n    <>\n      <DialogAnchor\n        dialogManagerId={dialogManager?.id}\n        id={dialogId}\n        offset={8}\n        placement={isMyMessage() ? 'top-end' : 'top-start'}\n        referenceElement={buttonRef.current}\n        trapFocus\n        updatePositionOnContentResize\n      >\n        <ReactionSelector />\n      </DialogAnchor>\n      <QuickMessageActionsButton\n        aria-expanded={dialogIsOpen}\n        aria-label={t('common.openReactionSelector.ariaLabel', 'Open Reaction Selector')}\n        className='str-chat__message-reactions-button'\n        data-testid='message-reaction-action'\n        onClick={() => dialog?.toggle()}\n        ref={buttonRef}\n      >\n        <ResolvedReactionIcon className='str-chat__message-action-icon' />\n      </QuickMessageActionsButton>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,IAAa,8BAA8B,EACzC,mBACqC;CACrC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,aAAa,SAAS,eAAe,kBAAkB;CAC/D,MAAM,EAAE,kBAAA,qBAAmB,qBAA4B,oBAAoB;CAC3E,MAAM,EAAE,cAAc,yBAAyB;CAE/C,MAAM,uBAAuB,gBAAgB;CAC7C,MAAM,YAAY,OAA+B,IAAI;CAMrD,MAAM,WAAW,iBAAwB,YAAY;EACnD,WAAW,QAAQ;EACnB;CACF,CAAC;CACD,MAAM,EAAE,QAAQ,kBAAkB,0BAA0B,EAAE,IAAI,SAAS,CAAC;CAC5E,MAAM,eAAe,gBAAgB,UAAU,eAAe,EAAE;CAEhE,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACE,iBAAiB,eAAe;EAChC,IAAI;EACJ,QAAQ;EACR,WAAW,YAAY,IAAI,YAAY;EACvC,kBAAkB,UAAU;EAC5B,WAAA;EACA,+BAAA;YAEA,oBAAC,oBAAD,CAAmB,CAAA;CACP,CAAA,GACd,oBAAC,2BAAD;EACE,iBAAe;EACf,cAAY,EAAE,yCAAyC,wBAAwB;EAC/E,WAAU;EACV,eAAY;EACZ,eAAe,QAAQ,OAAO;EAC9B,KAAK;YAEL,oBAAC,sBAAD,EAAsB,WAAU,gCAAiC,CAAA;CACxC,CAAA,CAC3B,EAAA,CAAA;AAEN"}

package/dist/es/components/Reactions/hooks/useFetchReactions.mjs

@@ -5,8 +5,8 @@ import { useCallback, useEffect, useState } from "react";
 //#region src/components/Reactions/hooks/useFetchReactions.ts
 function useFetchReactions(options) {
 	const { addNotification } = useNotificationApi();
-	const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext("useFetchReactions");
-	const { t } = useTranslationContext("useFetchReactions");
+	const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext();
+	const { t } = useTranslationContext();
 	const [reactions, setReactions] = useState([]);
 	const { handleFetchReactions: propHandleFetchReactions, reactionType, shouldFetch, sort } = options;
 	const [isLoading, setIsLoading] = useState(shouldFetch);
@@ -26,7 +26,7 @@ function useFetchReactions(options) {
 					addNotification({
 						emitter: "Reactions",
 						error: e instanceof Error ? e : void 0,
-						message: t("Error fetching reactions"),
+						message: t("reactions.fetchReactions.errorFetchingReactions.text", "Error loading reactions"),
 						severity: "error",
 						type: "api:message:reactions:fetch:failed"
 					});

package/dist/es/components/Reactions/hooks/useFetchReactions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFetchReactions.mjs","names":[],"sources":["../../../../../src/components/Reactions/hooks/useFetchReactions.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport type { ReactionResponse, ReactionSort } from 'stream-chat';\nimport type { MessageContextValue } from '../../../context';\nimport { useMessageContext, useTranslationContext } from '../../../context';\nimport { useNotificationApi } from '../../Notifications';\n\nimport type { ReactionType } from '../types';\n\nexport interface FetchReactionsOptions {\n  reactionType: ReactionType | null;\n  shouldFetch: boolean;\n  handleFetchReactions?: MessageContextValue['handleFetchReactions'];\n  sort?: ReactionSort;\n}\n\nexport function useFetchReactions(options: FetchReactionsOptions) {\n  const { addNotification } = useNotificationApi();\n  const { handleFetchReactions: contextHandleFetchReactions } =\n    useMessageContext('useFetchReactions');\n  const { t } = useTranslationContext('useFetchReactions');\n  const [reactions, setReactions] = useState<ReactionResponse[]>([]);\n  const {\n    handleFetchReactions: propHandleFetchReactions,\n    reactionType,\n    shouldFetch,\n    sort,\n  } = options;\n  const [isLoading, setIsLoading] = useState(shouldFetch);\n  const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;\n  const [refetchNonce, setRefetchNonce] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (!shouldFetch) {\n      return;\n    }\n\n    let cancel = false;\n\n    (async () => {\n      try {\n        setIsLoading(true);\n        const reactions = await handleFetchReactions(reactionType ?? undefined, sort);\n\n        if (!cancel) {\n          setReactions(reactions);\n        }\n      } catch (e) {\n        if (!cancel) {\n          setReactions([]);\n          addNotification({\n            emitter: 'Reactions',\n            error: e instanceof Error ? e : undefined,\n            message: t('Error fetching reactions'),\n            severity: 'error',\n            type: 'api:message:reactions:fetch:failed',\n          });\n        }\n      } finally {\n        if (!cancel) {\n          setIsLoading(false);\n        }\n      }\n    })();\n\n    return () => {\n      cancel = true;\n    };\n  }, [\n    addNotification,\n    handleFetchReactions,\n    reactionType,\n    refetchNonce,\n    shouldFetch,\n    sort,\n    t,\n  ]);\n\n  const refetch = useCallback(() => {\n    setRefetchNonce(Math.random());\n  }, []);\n\n  return { isLoading, reactions, refetch };\n}\n"],"mappings":";;;;;AAeA,SAAgB,kBAAkB,SAAgC;CAChE,MAAM,EAAE,oBAAoB,mBAAmB;CAC/C,MAAM,EAAE,sBAAsB,gCAC5B,kBAAkB,mBAAmB;CACvC,MAAM,EAAE,MAAM,sBAAsB,mBAAmB;CACvD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,CAAC,CAAC;CACjE,MAAM,EACJ,sBAAsB,0BACtB,cACA,aACA,SACE;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,WAAW;CACtD,MAAM,uBAAuB,4BAA4B;CACzD,MAAM,CAAC,cAAc,mBAAmB,SAAwB,IAAI;CAEpE,gBAAgB;EACd,IAAI,CAAC,aACH;EAGF,IAAI,SAAS;EAEb,CAAC,YAAY;GACX,IAAI;IACF,aAAa,IAAI;IACjB,MAAM,YAAY,MAAM,qBAAqB,gBAAgB,KAAA,GAAW,IAAI;IAE5E,IAAI,CAAC,QACH,aAAa,SAAS;GAE1B,SAAS,GAAG;IACV,IAAI,CAAC,QAAQ;KACX,aAAa,CAAC,CAAC;KACf,gBAAgB;MACd,SAAS;MACT,OAAO,aAAa,QAAQ,IAAI,KAAA;MAChC,SAAS,EAAE,0BAA0B;MACrC,UAAU;MACV,MAAM;KACR,CAAC;IACH;GACF,UAAU;IACR,IAAI,CAAC,QACH,aAAa,KAAK;GAEtB;EACF,EAAA,CAAG;EAEH,aAAa;GACX,SAAS;EACX;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAMD,OAAO;EAAE;EAAW;EAAW,SAJf,kBAAkB;GAChC,gBAAgB,KAAK,OAAO,CAAC;EAC/B,GAAG,CAAC,CAE2B;CAAQ;AACzC"}
+{"version":3,"file":"useFetchReactions.mjs","names":[],"sources":["../../../../../src/components/Reactions/hooks/useFetchReactions.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport type { ReactionResponse, SortParamRequest } from 'stream-chat';\nimport type { MessageContextValue } from '../../../context';\nimport { useMessageContext, useTranslationContext } from '../../../context';\nimport { useNotificationApi } from '../../Notifications';\n\nimport type { ReactionType } from '../types';\n\nexport interface FetchReactionsOptions {\n  reactionType: ReactionType | null;\n  shouldFetch: boolean;\n  handleFetchReactions?: MessageContextValue['handleFetchReactions'];\n  sort?: SortParamRequest[];\n}\n\nexport function useFetchReactions(options: FetchReactionsOptions) {\n  const { addNotification } = useNotificationApi();\n  const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext();\n  const { t } = useTranslationContext();\n  const [reactions, setReactions] = useState<ReactionResponse[]>([]);\n  const {\n    handleFetchReactions: propHandleFetchReactions,\n    reactionType,\n    shouldFetch,\n    sort,\n  } = options;\n  const [isLoading, setIsLoading] = useState(shouldFetch);\n  const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;\n  const [refetchNonce, setRefetchNonce] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (!shouldFetch) {\n      return;\n    }\n\n    let cancel = false;\n\n    (async () => {\n      try {\n        setIsLoading(true);\n        const reactions = await handleFetchReactions(reactionType ?? undefined, sort);\n\n        if (!cancel) {\n          setReactions(reactions);\n        }\n      } catch (e) {\n        if (!cancel) {\n          setReactions([]);\n          addNotification({\n            emitter: 'Reactions',\n            error: e instanceof Error ? e : undefined,\n            message: t(\n              'reactions.fetchReactions.errorFetchingReactions.text',\n              'Error loading reactions',\n            ),\n            severity: 'error',\n            type: 'api:message:reactions:fetch:failed',\n          });\n        }\n      } finally {\n        if (!cancel) {\n          setIsLoading(false);\n        }\n      }\n    })();\n\n    return () => {\n      cancel = true;\n    };\n  }, [\n    addNotification,\n    handleFetchReactions,\n    reactionType,\n    refetchNonce,\n    shouldFetch,\n    sort,\n    t,\n  ]);\n\n  const refetch = useCallback(() => {\n    setRefetchNonce(Math.random());\n  }, []);\n\n  return { isLoading, reactions, refetch };\n}\n"],"mappings":";;;;;AAeA,SAAgB,kBAAkB,SAAgC;CAChE,MAAM,EAAE,oBAAoB,mBAAmB;CAC/C,MAAM,EAAE,sBAAsB,gCAAgC,kBAAkB;CAChF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,CAAC,WAAW,gBAAgB,SAA6B,CAAC,CAAC;CACjE,MAAM,EACJ,sBAAsB,0BACtB,cACA,aACA,SACE;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,WAAW;CACtD,MAAM,uBAAuB,4BAA4B;CACzD,MAAM,CAAC,cAAc,mBAAmB,SAAwB,IAAI;CAEpE,gBAAgB;EACd,IAAI,CAAC,aACH;EAGF,IAAI,SAAS;EAEb,CAAC,YAAY;GACX,IAAI;IACF,aAAa,IAAI;IACjB,MAAM,YAAY,MAAM,qBAAqB,gBAAgB,KAAA,GAAW,IAAI;IAE5E,IAAI,CAAC,QACH,aAAa,SAAS;GAE1B,SAAS,GAAG;IACV,IAAI,CAAC,QAAQ;KACX,aAAa,CAAC,CAAC;KACf,gBAAgB;MACd,SAAS;MACT,OAAO,aAAa,QAAQ,IAAI,KAAA;MAChC,SAAS,EACP,wDACA,yBACF;MACA,UAAU;MACV,MAAM;KACR,CAAC;IACH;GACF,UAAU;IACR,IAAI,CAAC,QACH,aAAa,KAAK;GAEtB;EACF,EAAA,CAAG;EAEH,aAAa;GACX,SAAS;EACX;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAMD,OAAO;EAAE;EAAW;EAAW,SAJf,kBAAkB;GAChC,gBAAgB,KAAK,OAAO,CAAC;EAC/B,GAAG,CAAC,CAE2B;CAAQ;AACzC"}

package/dist/es/components/Reactions/hooks/useProcessReactions.mjs

@@ -2,6 +2,7 @@ import { useComponentContext } from "../../../context/ComponentContext.mjs";
 import { useMessageContext } from "../../../context/MessageContext.mjs";
 import { defaultReactionOptions } from "../reactionOptions.mjs";
 import { useCallback, useMemo } from "react";
+import { nsToDate } from "stream-chat";
 //#region src/components/Reactions/hooks/useProcessReactions.tsx
 var defaultReactionsSort = (a, b) => {
 	if (a.firstReactionAt && b.firstReactionAt) return +a.firstReactionAt - +b.firstReactionAt;
@@ -9,8 +10,8 @@ var defaultReactionsSort = (a, b) => {
 };
 var useProcessReactions = (params) => {
 	const { own_reactions: propOwnReactions, reaction_groups: propReactionGroups, reactions: propReactions, sortReactions: propSortReactions } = params;
-	const { message, sortReactions: contextSortReactions } = useMessageContext("useProcessReactions");
-	const { reactionOptions = defaultReactionOptions } = useComponentContext("useProcessReactions");
+	const { message, sortReactions: contextSortReactions } = useMessageContext();
+	const { reactionOptions = defaultReactionOptions } = useComponentContext();
 	const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;
 	const latestReactions = propReactions ?? message.latest_reactions;
 	const ownReactions = propOwnReactions ?? message?.own_reactions;
@@ -51,9 +52,9 @@ var useProcessReactions = (params) => {
 			const latestReactedUserNames = latestReactedUserNamesByType.get(reactionType) ?? [];
 			return [{
 				EmojiComponent: getEmojiByReactionType(reactionType),
-				firstReactionAt: first_reaction_at ? new Date(first_reaction_at) : null,
+				firstReactionAt: first_reaction_at != null ? nsToDate(first_reaction_at) : null,
 				isOwnReaction: isOwnReaction(reactionType),
-				lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
+				lastReactionAt: last_reaction_at != null ? nsToDate(last_reaction_at) : null,
 				latestReactedUserNames,
 				reactionCount: count,
 				reactionType,