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

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

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

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

@@ -0,0 +1,150 @@
+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 { 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";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Reactions/MessageReactions.tsx
+/**
+* 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.
+*/
+var FragmentOrButton = ({ buttonIf: renderButton = false, children, type = "button", ...props }) => {
+	if (renderButton) return /* @__PURE__ */ jsx("button", {
+		...props,
+		type,
+		children
+	});
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+};
+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();
+	const { MessageReactionsDetail: MessageReactionsDetail$1 = MessageReactionsDetail } = useComponentContext();
+	const { isMyMessage, message } = useMessageContext();
+	const divRef = useRef(null);
+	const dialogId = MessageReactionsDetail.getDialogId({ messageId: message.id });
+	const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+	const isDialogOpen = useDialogIsOpen(dialogId, dialogManager?.id);
+	const handleReactionButtonClick = (reactionType) => {
+		if (totalReactionCount > 1e3) return;
+		setSelectedReactionType(reactionType);
+		dialog.open();
+	};
+	/**
+	* In segmented style with top position we show max 4 reactions and a
+	* count of the rest, so we need to cap the existing reactions to display
+	* at 4 and calculate the count of the rest. For clustered(top/bottom) we cap
+	* the existing reactions to 5 but we don't calculate the count of the rest
+	* because we show the total count instead. For segmented style with bottom
+	* position we don't cap the existing reactions and we show all of them.
+	*/
+	const cappedExistingReactions = useMemo(() => {
+		if (visualStyle === "segmented" && verticalPosition !== "top") return null;
+		const capLimit = visualStyle === "segmented" ? capLimitSegmented : capLimitClustered;
+		const sliced = existingReactions.slice(0, capLimit);
+		return {
+			/**
+			* Accumulated reaction count of capped reaction types, first four in case of
+			* segmented(top) and first five in case of clustered(top/bottom) variations.
+			*/
+			reactionCountToDisplay: sliced.reduce((accumulatedCount, { reactionCount }) => accumulatedCount + reactionCount, 0),
+			reactionsToDisplay: sliced
+		};
+	}, [
+		capLimitClustered,
+		capLimitSegmented,
+		existingReactions,
+		verticalPosition,
+		visualStyle
+	]);
+	if (!hasReactions) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		"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",
+			[`str-chat__message-reactions--${visualStyle}`]: typeof visualStyle === "string"
+		}),
+		ref: divRef,
+		role: "figure",
+		children: /* @__PURE__ */ jsxs(FragmentOrButton, {
+			"aria-expanded": isDialogOpen,
+			"aria-label": t("reactions.messageReactions.reactionList.ariaLabel", "Reaction list"),
+			"aria-pressed": isDialogOpen,
+			buttonIf: visualStyle === "clustered",
+			className: "str-chat__message-reactions__list-button",
+			"data-testid": "message-reactions-list-button",
+			onClick: () => handleReactionButtonClick(null),
+			children: [/* @__PURE__ */ jsxs("ul", {
+				className: "str-chat__message-reactions__list",
+				children: [(cappedExistingReactions?.reactionsToDisplay ?? existingReactions).map(({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ jsx("li", {
+					className: "str-chat__message-reactions__list-item",
+					"data-testid": "message-reactions-list-item",
+					children: /* @__PURE__ */ jsxs(FragmentOrButton, {
+						"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),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "str-chat__message-reactions__list-item-icon",
+							"data-testid": "message-reactions-list-item-icon",
+							children: /* @__PURE__ */ jsx(EmojiComponent, {})
+						}), visualStyle === "segmented" && reactionCount > 1 && /* @__PURE__ */ jsx("span", {
+							className: "str-chat__message-reactions__list-item-count",
+							"data-testclass": "message-reactions-item-count",
+							children: reactionCount
+						})]
+					})
+				}, 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("reactions.messageReactions.reactionList.ariaLabel", "Reaction list"),
+						className: "str-chat__message-reactions__list-item-button",
+						onClick: () => handleReactionButtonClick(null),
+						type: "button",
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "str-chat__message-reactions__overflow-count",
+							children: ["+", totalReactionCount - cappedExistingReactions.reactionCountToDisplay]
+						})
+					})
+				})]
+			}), visualStyle === "clustered" && /* @__PURE__ */ jsx("span", {
+				className: "str-chat__message-reactions__total-count",
+				"data-testid": "message-reactions-total-count",
+				children: totalReactionCount
+			})]
+		})
+	}), /* @__PURE__ */ jsx(DialogAnchor, {
+		dialogManagerId: dialogManager?.id,
+		id: dialogId,
+		offset: 8,
+		placement: isMyMessage() ? "bottom-end" : "bottom-start",
+		referenceElement: divRef.current,
+		trapFocus: true,
+		updatePositionOnContentResize: true,
+		children: /* @__PURE__ */ jsx(MessageReactionsDetail$1, {
+			handleFetchReactions,
+			onSelectedReactionTypeChange: setSelectedReactionType,
+			reactionDetailsSort,
+			reactionGroups,
+			reactions: existingReactions,
+			selectedReactionType,
+			totalReactionCount
+		})
+	})] });
+};
+/**
+* Component that displays a list of reactions on a message.
+*/
+var MessageReactions = React.memo(UnMemoizedMessageReactions);
+//#endregion
+export { MessageReactions };
+
+//# sourceMappingURL=MessageReactions.mjs.map

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

@@ -0,0 +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();\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

@@ -0,0 +1,157 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useMessageContext } from "../../context/MessageContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.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 = [{
+	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",
+		children: [/* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }), /* @__PURE__ */ jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })]
+	}, 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();
+	const { t } = useTranslationContext();
+	const { handleReaction: contextHandleReaction, message, reactionDetailsSort: contextReactionDetailsSort } = useMessageContext();
+	const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
+	const hasExtendedReactions = getHasExtendedReactions(reactionOptions);
+	const { isLoading: areReactionsLoading, reactions: reactionDetails, refetch } = useFetchReactions({
+		handleFetchReactions,
+		reactionType: selectedReactionType,
+		shouldFetch: true,
+		sort: reactionDetailsSort
+	});
+	const getReactionName = (reactionType) => {
+		if (Array.isArray(reactionOptions)) return reactionOptions.find((reactionOption) => reactionOption.type === reactionType)?.name ?? reactionType;
+		return reactionOptions.quick[reactionType]?.name ?? reactionOptions.extended?.[reactionType]?.name ?? reactionType;
+	};
+	if (extendedReactionListOpen) return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__message-reactions-detail",
+		"data-testid": "message-reactions-detail",
+		children: /* @__PURE__ */ jsx(ReactionSelectorExtendedList, {
+			dialogId: MessageReactionsDetail.getDialogId({ messageId: message.id }),
+			handleReaction,
+			own_reactions
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__message-reactions-detail",
+		"data-testid": "message-reactions-detail",
+		children: [
+			typeof totalReactionCount === "number" && /* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-reactions-detail__total-count",
+				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",
+				children: /* @__PURE__ */ jsxs("ul", {
+					className: "str-chat__message-reactions-detail__reaction-type-list",
+					"data-testid": "reaction-type-list",
+					children: [hasExtendedReactions && /* @__PURE__ */ jsx("li", {
+						className: "str-chat__message-reactions-detail__reaction-type-list-item",
+						children: /* @__PURE__ */ jsx("button", {
+							"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),
+							type: "button",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "str-chat__message-reactions-detail__reaction-type-list-item-icon",
+								children: /* @__PURE__ */ jsx(IconEmojiAdd, {})
+							})
+						})
+					}), 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("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),
+							type: "button",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "str-chat__message-reactions-detail__reaction-type-list-item-icon",
+								children: /* @__PURE__ */ jsx(EmojiComponent, {})
+							}), /* @__PURE__ */ jsx("span", {
+								className: "str-chat__message-reactions-detail__reaction-type-list-item-count",
+								"data-testid": "reaction-type-count",
+								children: reactionCount
+							})]
+						})
+					}, reactionType))]
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-reactions-detail__user-list-container",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__message-reactions-detail__user-list",
+					"data-testid": "all-reacting-users",
+					children: [areReactionsLoading && /* @__PURE__ */ jsx(LoadingIndicator, {}), !areReactionsLoading && /* @__PURE__ */ jsx(Fragment$1, { children: reactionDetails.map(({ type, user }) => {
+						const belongsToCurrentUser = client.user?.id === user?.id;
+						const reactionName = getReactionName(type);
+						const EmojiComponent = Array.isArray(reactionOptions) ? void 0 : reactionOptions.quick[type]?.Component ?? reactionOptions.extended?.[type]?.Component;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "str-chat__message-reactions-detail__user-list-item",
+							children: [
+								/* @__PURE__ */ jsx(Avatar$1, {
+									...extractDisplayInfo$1({ user: user ?? void 0 }),
+									className: "str-chat__avatar--with-border",
+									"data-testid": "avatar",
+									size: "md"
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "str-chat__message-reactions-detail__user-list-item-info",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "str-chat__message-reactions-detail__user-list-item-username",
+										"data-testid": "reaction-user-username",
+										children: belongsToCurrentUser ? t("common.you.label", "You") : user?.name || user?.id
+									}), belongsToCurrentUser && /* @__PURE__ */ jsx("button", {
+										"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) => {
+											const reactionCountBeforeRemoval = reactionGroups?.[type]?.count ?? 0;
+											await contextHandleReaction(type, e);
+											if (selectedReactionType !== null && reactionCountBeforeRemoval <= 1) onSelectedReactionTypeChange?.(null);
+											else refetch();
+										},
+										type: "button",
+										children: t("reactions.messageReactionsDetail.tapRemove.text", "Tap to remove")
+									})]
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "str-chat__message-reactions-detail__user-list-item-icon",
+									children: !selectedReactionType && EmojiComponent && /* @__PURE__ */ jsx(EmojiComponent, {})
+								})
+							]
+						}, `${user?.id}-${type}`);
+					}) })]
+				})
+			})
+		]
+	});
+};
+MessageReactionsDetail.displayName = "MessageReactionsDetail";
+MessageReactionsDetail.getDialogId = ({ messageId }) => `message-reactions-detail-${messageId}`;
+//#endregion
+export { MessageReactionsDetail, MessageReactionsDetailLoadingIndicator };
+
+//# sourceMappingURL=MessageReactionsDetail.mjs.map

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

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

@@ -0,0 +1,134 @@
+import { useComponentContext } from "../../context/ComponentContext.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();
+	const { closeReactionSelectorOnClick, handleReaction: contextHandleReaction, message, threadList } = useMessageContext();
+	const { t } = useTranslationContext();
+	const dialogId = propDialogId ?? ReactionSelector.getDialogId({
+		messageId: message.id,
+		threadList
+	});
+	const { dialog } = useDialogOnNearestManager({ id: dialogId });
+	const handleReaction = propHandleReaction ?? contextHandleReaction;
+	const ownReactions = propOwnReactions ?? message?.own_reactions ?? stableOwnReactions;
+	const ownReactionByType = useMemo(() => {
+		const map = {};
+		for (const reaction of ownReactions) map[reaction.type] ??= reaction;
+		return map;
+	}, [ownReactions]);
+	const adjustedQuickReactionOptions = useMemo(() => {
+		if (Array.isArray(reactionOptions)) return reactionOptions;
+		return Object.entries(reactionOptions.quick).map(([type, { Component, name, unicode }]) => ({
+			Component,
+			name,
+			type,
+			unicode
+		}));
+	}, [reactionOptions]);
+	const hasExtendedReactions = getHasExtendedReactions(reactionOptions);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": t("reactions.messageReactions.reactionList.ariaLabel", "Reaction list"),
+		className: "str-chat__reaction-selector",
+		"data-testid": "reaction-selector",
+		role: "group",
+		children: !extendedListOpen ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("ul", {
+			className: "str-chat__reaction-selector-list",
+			"data-testid": "reaction-selector-list",
+			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("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",
+					"data-text": reactionType,
+					onClick: (event) => {
+						handleReaction(reactionType, event);
+						if (closeReactionSelectorOnClick) dialog.close();
+					},
+					type: "button",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "str-chat__reaction-icon",
+						children: /* @__PURE__ */ jsx(Component, {})
+					})
+				})
+			}, reactionType))
+		}), hasExtendedReactions && /* @__PURE__ */ jsx(Button, {
+			appearance: "outline",
+			"aria-label": t("common.openReactionSelector.ariaLabel", "Open Reaction Selector"),
+			circular: true,
+			className: "str-chat__reaction-selector__add-button",
+			"data-testid": "reaction-selector-add-button",
+			onClick: () => {
+				setExtendedListOpen(true);
+			},
+			size: "sm",
+			variant: "secondary",
+			children: /* @__PURE__ */ jsx(IconPlus, {})
+		})] }) : /* @__PURE__ */ jsx(ReactionSelectorExtendedList, {
+			...props,
+			dialogId,
+			handleReaction: async (reactionType, event) => {
+				await handleReaction(reactionType, event);
+				if (closeReactionSelectorOnClick) dialog.close();
+			}
+		})
+	});
+};
+ReactionSelector.getDialogId = ({ messageId, threadList }) => {
+	return `reaction-selector${threadList ? "-thread" : ""}-${messageId}`;
+};
+ReactionSelector.displayName = "ReactionSelector";
+ReactionSelector.ExtendedList = function ReactionSelectorExtendedList({ dialogId, handleReaction: propHandleReaction, own_reactions: propOwnReactions }) {
+	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) map[reaction.type] ??= reaction;
+		return map;
+	}, [ownReactions]);
+	if (Array.isArray(reactionOptions) || !reactionOptions.extended) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"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("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",
+			"data-text": reactionType,
+			onClick: (event) => {
+				handleReaction(reactionType, event);
+				if (closeReactionSelectorOnClick) dialog.close();
+			},
+			type: "button",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "str-chat__reaction-icon",
+				children: /* @__PURE__ */ jsx(Component, {})
+			})
+		}, reactionType))
+	});
+};
+//#endregion
+export { ReactionSelector };
+
+//# sourceMappingURL=ReactionSelector.mjs.map

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

@@ -0,0 +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';\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

@@ -0,0 +1,51 @@
+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 { 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
+/**
+* Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents
+* cluttering the parent component.
+*/
+var ReactionSelectorWithButton = ({ ReactionIcon }) => {
+	const { t } = useTranslationContext();
+	const { isMyMessage, message, threadList } = useMessageContext();
+	const { ReactionSelector: ReactionSelector$1 = ReactionSelector } = useComponentContext();
+	const { IconEmoji } = useComponentContextIcons();
+	const ResolvedReactionIcon = ReactionIcon ?? IconEmoji;
+	const buttonRef = useRef(null);
+	const dialogId = ReactionSelector.getDialogId({
+		messageId: message.id,
+		threadList
+	});
+	const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+	const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DialogAnchor, {
+		dialogManagerId: dialogManager?.id,
+		id: dialogId,
+		offset: 8,
+		placement: isMyMessage() ? "top-end" : "top-start",
+		referenceElement: buttonRef.current,
+		trapFocus: true,
+		updatePositionOnContentResize: true,
+		children: /* @__PURE__ */ jsx(ReactionSelector$1, {})
+	}), /* @__PURE__ */ jsx(QuickMessageActionsButton, {
+		"aria-expanded": dialogIsOpen,
+		"aria-label": t("common.openReactionSelector.ariaLabel", "Open Reaction Selector"),
+		className: "str-chat__message-reactions-button",
+		"data-testid": "message-reaction-action",
+		onClick: () => dialog?.toggle(),
+		ref: buttonRef,
+		children: /* @__PURE__ */ jsx(ResolvedReactionIcon, { className: "str-chat__message-action-icon" })
+	})] });
+};
+//#endregion
+export { ReactionSelectorWithButton };
+
+//# sourceMappingURL=ReactionSelectorWithButton.mjs.map

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

@@ -0,0 +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  /* 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"}