stream-chat-react 14.11.0 → 14.12.0

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 "../Message/hooks/useReactionsFetcher.mjs";
+import { DialogAnchor } from "../Dialog/service/DialogAnchor.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("MessageReactions");
+	const { MessageReactionsDetail: MessageReactionsDetail$1 = MessageReactionsDetail } = useComponentContext();
+	const { isMyMessage, message } = useMessageContext("MessageReactions");
+	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("aria/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("aria/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("aria/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("aria/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('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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"}

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

@@ -0,0 +1,150 @@
+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 { ReactionSelector } from "./ReactionSelector.mjs";
+import { useFetchReactions } from "./hooks/useFetchReactions.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 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 [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 { t } = useTranslationContext();
+	const { handleReaction: contextHandleReaction, message, reactionDetailsSort: contextReactionDetailsSort } = useMessageContext(MessageReactionsDetail.name);
+	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("{{ count }} reactions", { count: totalReactionCount })
+			}),
+			/* @__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("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("aria/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("You") : user?.name || user?.id
+									}), belongsToCurrentUser && /* @__PURE__ */ jsx("button", {
+										"aria-label": t("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("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';\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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"}

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

@@ -0,0 +1,140 @@
+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 { 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 { 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 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) {
+			var _reaction$type;
+			map[_reaction$type = reaction.type] ?? (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("aria/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("aria/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("aria/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("ReactionSelector.ExtendedList");
+	const { closeReactionSelectorOnClick, handleReaction: contextHandleReaction, message } = useMessageContext("ReactionSelector");
+	const { t } = useTranslationContext("ReactionSelector");
+	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);
+		}
+		return map;
+	}, [ownReactions]);
+	if (Array.isArray(reactionOptions) || !reactionOptions.extended) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": t("aria/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-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';\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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"}

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

@@ -0,0 +1,51 @@
+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 { 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("ReactionSelectorWithButton");
+	const { isMyMessage, message, threadList } = useMessageContext("MessageOptions");
+	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("aria/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  /**\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"}

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

@@ -0,0 +1,34 @@
+import { getImageDimensions } from "./utils/utils.mjs";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/components/Reactions/SpriteImage.tsx
+var SpriteImage = ({ columns, fallback, height, position, rows, spriteUrl, style, width }) => {
+	const [[spriteWidth, spriteHeight], setSpriteDimensions] = useState([0, 0]);
+	useEffect(() => {
+		getImageDimensions(spriteUrl).then(setSpriteDimensions).catch(console.error);
+	}, [spriteUrl]);
+	const [x, y] = position;
+	if (!spriteHeight || !spriteWidth) return /* @__PURE__ */ jsx(Fragment$1, { children: fallback });
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": "sprite-image",
+		style: {
+			...style,
+			"--str-chat__sprite-image-resize-ratio": "var(--str-chat__sprite-image-resize-ratio-x, var(--str-chat__sprite-image-resize-ratio-y, 1))",
+			"--str-chat__sprite-image-resize-ratio-x": "calc(var(--str-chat__sprite-image-width) / var(--str-chat__sprite-item-width))",
+			"--str-chat__sprite-image-resize-ratio-y": "calc(var(--str-chat__sprite-image-height) / var(--str-chat__sprite-item-height))",
+			"--str-chat__sprite-item-height": `${spriteHeight / rows}`,
+			"--str-chat__sprite-item-width": `${spriteWidth / columns}`,
+			...Number.isFinite(height) ? { "--str-chat__sprite-image-height": `${height}px` } : {},
+			...Number.isFinite(width) ? { "--str-chat__sprite-image-width": `${width}px` } : {},
+			backgroundImage: `url('${spriteUrl}')`,
+			backgroundPosition: `${x * (100 / (columns - 1))}% ${y * (100 / (rows - 1))}%`,
+			backgroundSize: `${columns * 100}% ${rows * 100}%`,
+			height: "var(--str-chat__sprite-image-height, calc(var(--str-chat__sprite-item-height) * var(--str-chat__sprite-image-resize-ratio)))",
+			width: "var(--str-chat__sprite-image-width, calc(var(--str-chat__sprite-item-width) * var(--str-chat__sprite-image-resize-ratio)))"
+		}
+	});
+};
+//#endregion
+export { SpriteImage };
+
+//# sourceMappingURL=SpriteImage.mjs.map