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

package/dist/es/components/Search/hooks/useSearchResultsKeyboardNavigation.mjs

@@ -0,0 +1,28 @@
+import { createRowActionKeyHandlers, useListboxKeyboardNavigation } from "../../../a11y/hooks/useListboxKeyboardNavigation.mjs";
+//#region src/components/Search/hooks/useSearchResultsKeyboardNavigation.ts
+var OPTION_SELECTOR = "[role=\"option\"]";
+var ROW_SELECTOR = ".str-chat__channel-list-item-container";
+var ACTION_BUTTON_SELECTOR = ".str-chat__channel-list-item__action-buttons button";
+/**
+* Keyboard navigation for the search results list (see {@link useListboxKeyboardNavigation}):
+* - **ArrowUp/ArrowDown/Home/End** rove the result options — from anywhere in the container, so the
+*   user can enter the list from the preceding filter tags (`enterScope: 'container'`) and so they
+*   keep working while focus is on a result's action button (moving relative to that result).
+* - **ArrowRight/ArrowLeft** move between a channel/message result and its actions button and back;
+*   user results have no actions, so the horizontal keys do nothing for them.
+*/
+var useSearchResultsKeyboardNavigation = (containerRef) => {
+	const { onKeyDown } = useListboxKeyboardNavigation(containerRef, {
+		enterScope: "container",
+		keyHandlers: createRowActionKeyHandlers({
+			actionSelector: ACTION_BUTTON_SELECTOR,
+			rowSelector: ROW_SELECTOR
+		}),
+		resolveActiveOption: (active) => active.closest(ROW_SELECTOR)?.querySelector(OPTION_SELECTOR) ?? null
+	});
+	return { onKeyDown };
+};
+//#endregion
+export { useSearchResultsKeyboardNavigation };
+
+//# sourceMappingURL=useSearchResultsKeyboardNavigation.mjs.map

package/dist/es/components/Search/hooks/useSearchResultsKeyboardNavigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearchResultsKeyboardNavigation.mjs","names":[],"sources":["../../../../../src/components/Search/hooks/useSearchResultsKeyboardNavigation.ts"],"sourcesContent":["import type { RefObject } from 'react';\n\nimport {\n  createRowActionKeyHandlers,\n  useListboxKeyboardNavigation,\n} from '../../../a11y/hooks/useListboxKeyboardNavigation';\n\n// Channel/message results render a `ChannelListItem` (same markup as the channel list), so they\n// carry a row container and action buttons. User results do not, so the horizontal keys no-op there.\nconst OPTION_SELECTOR = '[role=\"option\"]';\nconst ROW_SELECTOR = '.str-chat__channel-list-item-container';\nconst ACTION_BUTTON_SELECTOR = '.str-chat__channel-list-item__action-buttons button';\n\n/**\n * Keyboard navigation for the search results list (see {@link useListboxKeyboardNavigation}):\n * - **ArrowUp/ArrowDown/Home/End** rove the result options — from anywhere in the container, so the\n *   user can enter the list from the preceding filter tags (`enterScope: 'container'`) and so they\n *   keep working while focus is on a result's action button (moving relative to that result).\n * - **ArrowRight/ArrowLeft** move between a channel/message result and its actions button and back;\n *   user results have no actions, so the horizontal keys do nothing for them.\n */\nexport const useSearchResultsKeyboardNavigation = (\n  containerRef: RefObject<HTMLElement | null>,\n) => {\n  const { onKeyDown } = useListboxKeyboardNavigation(containerRef, {\n    enterScope: 'container',\n    keyHandlers: createRowActionKeyHandlers({\n      actionSelector: ACTION_BUTTON_SELECTOR,\n      rowSelector: ROW_SELECTOR,\n    }),\n    resolveActiveOption: (active) =>\n      active.closest(ROW_SELECTOR)?.querySelector<HTMLElement>(OPTION_SELECTOR) ?? null,\n  });\n\n  return { onKeyDown };\n};\n"],"mappings":";;AASA,IAAM,kBAAkB;AACxB,IAAM,eAAe;AACrB,IAAM,yBAAyB;;;;;;;;;AAU/B,IAAa,sCACX,iBACG;CACH,MAAM,EAAE,cAAc,6BAA6B,cAAc;EAC/D,YAAY;EACZ,aAAa,2BAA2B;GACtC,gBAAgB;GAChB,aAAa;EACf,CAAC;EACD,sBAAsB,WACpB,OAAO,QAAQ,YAAY,CAAC,EAAE,cAA2B,eAAe,KAAK;CACjF,CAAC;CAED,OAAO,EAAE,UAAU;AACrB"}

package/dist/es/components/SkipNavigation/SkipNavigation.mjs

@@ -0,0 +1,64 @@
+import { createElement, useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/components/SkipNavigation/SkipNavigation.tsx
+var normalizeTargetId = (targetId) => targetId.startsWith("#") ? targetId.slice(1) : targetId;
+var isActivationKey = (event) => event.key === "Enter" || event.key === " " || event.key === "Spacebar";
+var focusTargetElement = (targetId, focusCleanupRegistry) => {
+	const targetElement = document.getElementById(targetId);
+	if (!targetElement) return;
+	const hasTabIndexAttribute = targetElement.hasAttribute("tabindex");
+	if (!hasTabIndexAttribute) targetElement.setAttribute("tabindex", "-1");
+	targetElement.focus();
+	if (!hasTabIndexAttribute) {
+		const existingFocusCleanup = focusCleanupRegistry.current.get(targetElement);
+		if (existingFocusCleanup) existingFocusCleanup.cleanup();
+		const handleBlur = () => {
+			targetElement.removeAttribute("tabindex");
+			focusCleanupRegistry.current.delete(targetElement);
+		};
+		targetElement.addEventListener("blur", handleBlur, { once: true });
+		focusCleanupRegistry.current.set(targetElement, {
+			cleanup: () => targetElement.removeEventListener("blur", handleBlur),
+			hasTemporaryTabIndex: true
+		});
+	}
+};
+var SkipNavigation = ({ className, getLinkLabel, onClick, onKeyDown, targetIds, ...anchorProps }) => {
+	const focusCleanupRegistry = useRef(/* @__PURE__ */ new Map());
+	useEffect(() => () => {
+		focusCleanupRegistry.current.forEach(({ cleanup, hasTemporaryTabIndex }, targetElement) => {
+			cleanup();
+			if (hasTemporaryTabIndex && targetElement.getAttribute("tabindex") === "-1") targetElement.removeAttribute("tabindex");
+		});
+		focusCleanupRegistry.current.clear();
+	}, []);
+	if (!targetIds.length) return null;
+	const handleClick = (event, targetId) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		focusTargetElement(targetId, focusCleanupRegistry);
+	};
+	const handleKeyDown = (event, targetId) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || !isActivationKey(event)) return;
+		event.preventDefault();
+		focusTargetElement(targetId, focusCleanupRegistry);
+	};
+	return /* @__PURE__ */ jsx(Fragment$1, { children: targetIds.map((targetId, index) => {
+		const normalizedTargetId = normalizeTargetId(targetId);
+		const linkLabel = getLinkLabel?.(normalizedTargetId, index) ?? `Skip to ${normalizedTargetId}`;
+		return /* @__PURE__ */ createElement("a", {
+			...anchorProps,
+			className: ["str-chat__skip-navigation-link", className].filter(Boolean).join(" "),
+			href: `#${normalizedTargetId}`,
+			key: `${normalizedTargetId}-${index}`,
+			onClick: (event) => handleClick(event, normalizedTargetId),
+			onKeyDown: (event) => handleKeyDown(event, normalizedTargetId)
+		}, linkLabel);
+	}) });
+};
+//#endregion
+export { SkipNavigation };
+
+//# sourceMappingURL=SkipNavigation.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkipNavigation.mjs","names":[],"sources":["../../../../src/components/SkipNavigation/SkipNavigation.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\n/**\n * `SkipNavigation` is an opt-in skip links helper for integrators and is not rendered by `Chat`.\n *\n * Intended integration:\n * - Render as the first keyboard-focusable element in your chat layout.\n * - Pass `targetIds` ordered by keyboard priority (for example message composer first).\n * - Each value must be a DOM id (without `#`) so links keep native hash navigation semantics.\n *\n * Activation behavior:\n * - Renders one link per target id.\n * - Keeps native hash-link behavior via `href=\"#{targetId}\"`.\n * - Programmatically moves focus to each target element for reliable keyboard navigation.\n * - If the target is not naturally focusable, temporarily applies `tabindex=\"-1\"` and\n *   removes it on blur.\n *\n * The caller can intercept activation by passing `onClick` and calling `event.preventDefault()`.\n *\n * @example\n * ```tsx\n * <SkipNavigation\n *   getLinkLabel={(targetId) =>\n *     targetId === 'my-message-composer-textarea'\n *       ? 'Skip to message composer'\n *       : 'Skip to channel messages'\n *   }\n *   targetIds={['my-message-composer-textarea', 'my-channel-root']}\n * />\n * ```\n */\nexport type SkipNavigationProps = Omit<ComponentPropsWithoutRef<'a'>, 'href'> & {\n  /** Optional per-link label generator. Defaults to `Skip to {targetId}`. */\n  getLinkLabel?: (targetId: string, index: number) => ReactNode;\n  /** Ordered DOM ids of elements that should receive focus when links are activated. */\n  targetIds: string[];\n};\n\nconst normalizeTargetId = (targetId: string) =>\n  targetId.startsWith('#') ? targetId.slice(1) : targetId;\nconst isActivationKey = (event: React.KeyboardEvent<HTMLAnchorElement>) =>\n  event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar';\n\ntype FocusCleanupState = {\n  cleanup: () => void;\n  hasTemporaryTabIndex: boolean;\n};\n\nconst focusTargetElement = (\n  targetId: string,\n  focusCleanupRegistry: React.MutableRefObject<Map<HTMLElement, FocusCleanupState>>,\n) => {\n  const targetElement = document.getElementById(targetId);\n  if (!targetElement) return;\n\n  const hasTabIndexAttribute = targetElement.hasAttribute('tabindex');\n  if (!hasTabIndexAttribute) {\n    targetElement.setAttribute('tabindex', '-1');\n  }\n\n  targetElement.focus();\n\n  if (!hasTabIndexAttribute) {\n    const existingFocusCleanup = focusCleanupRegistry.current.get(targetElement);\n    if (existingFocusCleanup) {\n      existingFocusCleanup.cleanup();\n    }\n\n    const handleBlur = () => {\n      targetElement.removeAttribute('tabindex');\n      focusCleanupRegistry.current.delete(targetElement);\n    };\n\n    targetElement.addEventListener('blur', handleBlur, { once: true });\n\n    focusCleanupRegistry.current.set(targetElement, {\n      cleanup: () => targetElement.removeEventListener('blur', handleBlur),\n      hasTemporaryTabIndex: true,\n    });\n  }\n};\n\nexport const SkipNavigation = ({\n  className,\n  getLinkLabel,\n  onClick,\n  onKeyDown,\n  targetIds,\n  ...anchorProps\n}: SkipNavigationProps) => {\n  const focusCleanupRegistry = useRef<Map<HTMLElement, FocusCleanupState>>(new Map());\n\n  useEffect(\n    () => () => {\n      focusCleanupRegistry.current.forEach(\n        ({ cleanup, hasTemporaryTabIndex }, targetElement) => {\n          cleanup();\n          if (hasTemporaryTabIndex && targetElement.getAttribute('tabindex') === '-1') {\n            targetElement.removeAttribute('tabindex');\n          }\n        },\n      );\n\n      focusCleanupRegistry.current.clear();\n    },\n    [],\n  );\n\n  if (!targetIds.length) return null;\n\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>, targetId: string) => {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n\n    event.preventDefault();\n    focusTargetElement(targetId, focusCleanupRegistry);\n  };\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLAnchorElement>,\n    targetId: string,\n  ) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || !isActivationKey(event)) return;\n\n    event.preventDefault();\n    focusTargetElement(targetId, focusCleanupRegistry);\n  };\n\n  return (\n    <>\n      {targetIds.map((targetId, index) => {\n        const normalizedTargetId = normalizeTargetId(targetId);\n        const linkLabel =\n          getLinkLabel?.(normalizedTargetId, index) ?? `Skip to ${normalizedTargetId}`;\n\n        return (\n          <a\n            {...anchorProps}\n            className={['str-chat__skip-navigation-link', className]\n              .filter(Boolean)\n              .join(' ')}\n            href={`#${normalizedTargetId}`}\n            key={`${normalizedTargetId}-${index}`}\n            onClick={(event) => handleClick(event, normalizedTargetId)}\n            onKeyDown={(event) => handleKeyDown(event, normalizedTargetId)}\n          >\n            {linkLabel}\n          </a>\n        );\n      })}\n    </>\n  );\n};\n"],"mappings":";;;AAuCA,IAAM,qBAAqB,aACzB,SAAS,WAAW,GAAG,IAAI,SAAS,MAAM,CAAC,IAAI;AACjD,IAAM,mBAAmB,UACvB,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ;AAO9D,IAAM,sBACJ,UACA,yBACG;CACH,MAAM,gBAAgB,SAAS,eAAe,QAAQ;CACtD,IAAI,CAAC,eAAe;CAEpB,MAAM,uBAAuB,cAAc,aAAa,UAAU;CAClE,IAAI,CAAC,sBACH,cAAc,aAAa,YAAY,IAAI;CAG7C,cAAc,MAAM;CAEpB,IAAI,CAAC,sBAAsB;EACzB,MAAM,uBAAuB,qBAAqB,QAAQ,IAAI,aAAa;EAC3E,IAAI,sBACF,qBAAqB,QAAQ;EAG/B,MAAM,mBAAmB;GACvB,cAAc,gBAAgB,UAAU;GACxC,qBAAqB,QAAQ,OAAO,aAAa;EACnD;EAEA,cAAc,iBAAiB,QAAQ,YAAY,EAAE,MAAM,KAAK,CAAC;EAEjE,qBAAqB,QAAQ,IAAI,eAAe;GAC9C,eAAe,cAAc,oBAAoB,QAAQ,UAAU;GACnE,sBAAsB;EACxB,CAAC;CACH;AACF;AAEA,IAAa,kBAAkB,EAC7B,WACA,cACA,SACA,WACA,WACA,GAAG,kBACsB;CACzB,MAAM,uBAAuB,uBAA4C,IAAI,IAAI,CAAC;CAElF,sBACc;EACV,qBAAqB,QAAQ,SAC1B,EAAE,SAAS,wBAAwB,kBAAkB;GACpD,QAAQ;GACR,IAAI,wBAAwB,cAAc,aAAa,UAAU,MAAM,MACrE,cAAc,gBAAgB,UAAU;EAE5C,CACF;EAEA,qBAAqB,QAAQ,MAAM;CACrC,GACA,CAAC,CACH;CAEA,IAAI,CAAC,UAAU,QAAQ,OAAO;CAE9B,MAAM,eAAe,OAA4C,aAAqB;EACpF,UAAU,KAAK;EACf,IAAI,MAAM,kBAAkB;EAE5B,MAAM,eAAe;EACrB,mBAAmB,UAAU,oBAAoB;CACnD;CACA,MAAM,iBACJ,OACA,aACG;EACH,YAAY,KAAK;EACjB,IAAI,MAAM,oBAAoB,CAAC,gBAAgB,KAAK,GAAG;EAEvD,MAAM,eAAe;EACrB,mBAAmB,UAAU,oBAAoB;CACnD;CAEA,OACE,oBAAA,YAAA,EAAA,UACG,UAAU,KAAK,UAAU,UAAU;EAClC,MAAM,qBAAqB,kBAAkB,QAAQ;EACrD,MAAM,YACJ,eAAe,oBAAoB,KAAK,KAAK,WAAW;EAE1D,OACE,8BAAC,KAAD;GACE,GAAI;GACJ,WAAW,CAAC,kCAAkC,SAAS,CAAC,CACrD,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GACX,MAAM,IAAI;GACV,KAAK,GAAG,mBAAmB,GAAG;GAC9B,UAAU,UAAU,YAAY,OAAO,kBAAkB;GACzD,YAAY,UAAU,cAAc,OAAO,kBAAkB;EAG5D,GADA,SACA;CAEP,CAAC,EACD,CAAA;AAEN"}

package/dist/es/components/SummarizedMessagePreview/SummarizedMessagePreview.mjs

@@ -0,0 +1,55 @@
+import { useLatestMessagePreview } from "./hooks/useLatestMessagePreview.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx
+var SummarizedMessagePreview = ({ latestMessage, messageDeliveryStatus, participantCount }) => {
+	const { IconCamera, IconCheckmark1Small, IconChecks, IconClock, IconExclamationCircleFill, IconFile, IconGiphy, IconLink, IconLocation, IconNoSign, IconUnsupportedAttachment, IconVideo, IconVoice } = useComponentContextIcons();
+	const deliveryStatusIconMap = {
+		delivered: IconChecks,
+		read: IconChecks,
+		sending: IconClock,
+		sent: IconCheckmark1Small
+	};
+	const contentTypeIconMap = {
+		deleted: IconNoSign,
+		error: IconExclamationCircleFill,
+		file: IconFile,
+		giphy: IconGiphy,
+		image: IconCamera,
+		link: IconLink,
+		location: IconLocation,
+		unsupported: IconUnsupportedAttachment,
+		video: IconVideo,
+		voice: IconVoice
+	};
+	const { deliveryStatus, senderName, text, type } = useLatestMessagePreview({
+		latestMessage,
+		messageDeliveryStatus,
+		participantCount
+	});
+	const DeliveryStatusIcon = deliveryStatus ? deliveryStatusIconMap[deliveryStatus] : void 0;
+	const ContentTypeIcon = contentTypeIconMap[type];
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__summarized-message-preview", { [`str-chat__summarized-message-preview--${type}`]: type }),
+		children: [
+			type !== "error" && /* @__PURE__ */ jsxs(Fragment$1, { children: [DeliveryStatusIcon && /* @__PURE__ */ jsx("span", {
+				className: clsx("str-chat__summarized-message-preview__delivery-status", { [`str-chat__summarized-message-preview__delivery-status--${deliveryStatus}`]: deliveryStatus }),
+				children: /* @__PURE__ */ jsx(DeliveryStatusIcon, {})
+			}), senderName && /* @__PURE__ */ jsxs("span", {
+				className: "str-chat__summarized-message-preview__sender",
+				children: [senderName, ":"]
+			})] }),
+			ContentTypeIcon && /* @__PURE__ */ jsx(ContentTypeIcon, {}),
+			/* @__PURE__ */ jsx("span", {
+				className: "str-chat__summarized-message-preview__text",
+				children: text
+			})
+		]
+	});
+};
+//#endregion
+export { SummarizedMessagePreview };
+
+//# sourceMappingURL=SummarizedMessagePreview.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SummarizedMessagePreview.mjs","names":[],"sources":["../../../../src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport {\n  type ChannelPreviewDeliveryStatus,\n  type ChannelPreviewMessageType,\n  useLatestMessagePreview,\n  type UseLatestMessagePreviewParams,\n} from './hooks/useLatestMessagePreview';\nimport { useComponentContextIcons } from '../../context';\n\n/**\n * Props for {@link SummarizedMessagePreview}. Override the component via `ComponentContext`\n * (`<Chat>`/`<Channel>` prop `SummarizedMessagePreview`) to customize how a channel-list item renders\n * the preview of its latest message.\n */\nexport type SummarizedMessagePreviewProps = UseLatestMessagePreviewParams;\n\nexport const SummarizedMessagePreview = ({\n  latestMessage,\n  messageDeliveryStatus,\n  participantCount,\n}: UseLatestMessagePreviewParams) => {\n  const {\n    IconCamera,\n    IconCheckmark1Small,\n    IconChecks,\n    IconClock,\n    IconExclamationCircleFill,\n    IconFile,\n    IconGiphy,\n    IconLink,\n    IconLocation,\n    IconNoSign,\n    IconUnsupportedAttachment,\n    IconVideo,\n    IconVoice,\n  } = useComponentContextIcons();\n\n  const deliveryStatusIconMap: Record<ChannelPreviewDeliveryStatus, React.ComponentType> =\n    {\n      delivered: IconChecks,\n      read: IconChecks,\n      sending: IconClock,\n      sent: IconCheckmark1Small,\n    };\n\n  const contentTypeIconMap: Partial<\n    Record<ChannelPreviewMessageType, React.ComponentType>\n  > = {\n    deleted: IconNoSign,\n    error: IconExclamationCircleFill,\n    file: IconFile,\n    giphy: IconGiphy,\n    image: IconCamera,\n    link: IconLink,\n    location: IconLocation,\n    unsupported: IconUnsupportedAttachment,\n    video: IconVideo,\n    voice: IconVoice,\n  };\n\n  const { deliveryStatus, senderName, text, type } = useLatestMessagePreview({\n    latestMessage,\n    messageDeliveryStatus,\n    participantCount,\n  });\n\n  const DeliveryStatusIcon = deliveryStatus\n    ? deliveryStatusIconMap[deliveryStatus]\n    : undefined;\n  const ContentTypeIcon = contentTypeIconMap[type];\n\n  return (\n    <div\n      className={clsx('str-chat__summarized-message-preview', {\n        [`str-chat__summarized-message-preview--${type}`]: type,\n      })}\n    >\n      {type !== 'error' && (\n        <>\n          {DeliveryStatusIcon && (\n            <span\n              className={clsx('str-chat__summarized-message-preview__delivery-status', {\n                [`str-chat__summarized-message-preview__delivery-status--${deliveryStatus}`]:\n                  deliveryStatus,\n              })}\n            >\n              <DeliveryStatusIcon />\n            </span>\n          )}\n          {senderName && (\n            <span className='str-chat__summarized-message-preview__sender'>\n              {senderName}:\n            </span>\n          )}\n        </>\n      )}\n      {ContentTypeIcon && <ContentTypeIcon />}\n      <span className='str-chat__summarized-message-preview__text'>{text}</span>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAiBA,IAAa,4BAA4B,EACvC,eACA,uBACA,uBACmC;CACnC,MAAM,EACJ,YACA,qBACA,YACA,WACA,2BACA,UACA,WACA,UACA,cACA,YACA,2BACA,WACA,cACE,yBAAyB;CAE7B,MAAM,wBACJ;EACE,WAAW;EACX,MAAM;EACN,SAAS;EACT,MAAM;CACR;CAEF,MAAM,qBAEF;EACF,SAAS;EACT,OAAO;EACP,MAAM;EACN,OAAO;EACP,OAAO;EACP,MAAM;EACN,UAAU;EACV,aAAa;EACb,OAAO;EACP,OAAO;CACT;CAEA,MAAM,EAAE,gBAAgB,YAAY,MAAM,SAAS,wBAAwB;EACzE;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqB,iBACvB,sBAAsB,kBACtB,KAAA;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,wCAAwC,GACrD,yCAAyC,SAAS,KACrD,CAAC;YAHH;GAKG,SAAS,WACR,qBAAA,YAAA,EAAA,UAAA,CACG,sBACC,oBAAC,QAAD;IACE,WAAW,KAAK,yDAAyD,GACtE,0DAA0D,mBACzD,eACJ,CAAC;cAED,oBAAC,oBAAD,CAAqB,CAAA;GACjB,CAAA,GAEP,cACC,qBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,YAAW,GACR;KAER,EAAA,CAAA;GAEH,mBAAmB,oBAAC,iBAAD,CAAkB,CAAA;GACtC,oBAAC,QAAD;IAAM,WAAU;cAA8C;GAAW,CAAA;EACtE;;AAET"}

package/dist/es/components/SummarizedMessagePreview/hooks/useLatestMessagePreview.mjs

@@ -0,0 +1,141 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { getTranslatedMessageText } from "../../../context/MessageTranslationViewContext.mjs";
+import { isMessageDeleted } from "../../Message/utils.mjs";
+import { useMemo } from "react";
+import { isAudioAttachment, isFileAttachment, isImageAttachment, isScrapedContent, isVideoAttachment, isVoiceRecordingAttachment } from "stream-chat";
+//#region src/components/SummarizedMessagePreview/hooks/useLatestMessagePreview.ts
+var SUPPORTED_VIDEO_FORMATS = [
+	"video/mp4",
+	"video/ogg",
+	"video/webm",
+	"video/quicktime"
+];
+function getAttachmentContentType(attachment) {
+	if (!attachment) return "text";
+	if (attachment.type === "giphy") return "giphy";
+	if (isScrapedContent(attachment)) return "link";
+	if (isImageAttachment(attachment)) return "image";
+	if (isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) return "video";
+	if (isVoiceRecordingAttachment(attachment)) return "voice";
+	if (isAudioAttachment(attachment) || isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) return "file";
+	return "unsupported";
+}
+function getAttachmentFallbackText(type, count, t) {
+	switch (type) {
+		case "image": return t("messagePreview.latestMessagePreview.imageCount.label", {
+			count,
+			defaultValue_one: "Image",
+			defaultValue_other: "{{ count }} images"
+		});
+		case "video": return t("messagePreview.latestMessagePreview.videoCount.label", {
+			count,
+			defaultValue_one: "Video",
+			defaultValue_other: "{{ count }} videos"
+		});
+		case "voice": return t("messagePreview.latestMessagePreview.voiceMessageCount.label", {
+			count,
+			defaultValue_one: "Voice message",
+			defaultValue_other: "{{ count }} voice messages"
+		});
+		case "link": return t("messagePreview.latestMessagePreview.linkCount.label", {
+			count,
+			defaultValue_one: "Link",
+			defaultValue_other: "{{ count }} links"
+		});
+		case "file": return t("messagePreview.latestMessagePreview.fileCount.label", {
+			count,
+			defaultValue_one: "File",
+			defaultValue_other: "{{ count }} files"
+		});
+		case "unsupported": return t("common.unsupportedAttachment.text", "Unsupported attachment");
+		default: return t("messagePreview.latestMessagePreview.fileCount.label", {
+			count,
+			defaultValue_one: "File",
+			defaultValue_other: "{{ count }} files"
+		});
+	}
+}
+var useLatestMessagePreview = ({ latestMessage, messageDeliveryStatus, participantCount }) => {
+	const { client } = useChatContext();
+	const { t, userLanguage } = useTranslationContext();
+	return useMemo(() => {
+		if (!latestMessage) return {
+			text: t("common.nothingYet.text", "Nothing yet..."),
+			type: "empty"
+		};
+		if (latestMessage.status === "failed" || latestMessage.type === "error") return {
+			text: t("messagePreview.latestMessagePreview.messageFailedSend.text", "Message failed to send"),
+			type: "error"
+		};
+		const isOwnMessage = latestMessage.user?.id === client.user?.id;
+		let deliveryStatus;
+		if (isOwnMessage) deliveryStatus = messageDeliveryStatus ?? latestMessage.status;
+		let senderName;
+		if (isOwnMessage) senderName = t("common.you.label", "You");
+		else if (!isOwnMessage && participantCount !== void 0 && participantCount > 2) senderName = latestMessage.user?.name || latestMessage.user?.id;
+		if (isMessageDeleted(latestMessage)) return {
+			deliveryStatus,
+			senderName,
+			text: t("common.messageDeleted.text", "Message deleted"),
+			type: "deleted"
+		};
+		if (latestMessage.poll) return {
+			deliveryStatus,
+			senderName,
+			text: t("common.poll.label", "Poll"),
+			type: "poll"
+		};
+		const textContent = getTranslatedMessageText({
+			language: userLanguage,
+			message: latestMessage
+		}) || latestMessage.text;
+		if (latestMessage.shared_location) return {
+			deliveryStatus,
+			senderName,
+			text: textContent || t("common.location.text", "Location"),
+			type: "location"
+		};
+		if (latestMessage.attachments && latestMessage.attachments.length) {
+			const attachments = latestMessage.attachments;
+			let contentType;
+			const [firstAttachment] = attachments;
+			const firstAttachmentType = getAttachmentContentType(firstAttachment);
+			if (attachments.every((attachment) => getAttachmentContentType(attachment) === firstAttachmentType)) contentType = firstAttachmentType;
+			else contentType = "file";
+			let text = contentType === "giphy" ? `GIPHY ${firstAttachment.title ?? ""}`.trim() : textContent || (attachments.length === 1 && contentType !== "voice" && contentType !== "unsupported" ? firstAttachment.fallback || firstAttachment.title : "") || getAttachmentFallbackText(contentType, attachments.length, t);
+			const firstAttachmentDuration = firstAttachment.custom?.duration;
+			if (attachments.length === 1 && typeof firstAttachmentDuration === "number") {
+				const durationString = `${Math.floor(firstAttachmentDuration / 60)}:${(Math.ceil(firstAttachmentDuration) % 60).toString().padStart(2, "0")}`;
+				text += ` (${durationString})`;
+			}
+			return {
+				deliveryStatus,
+				senderName,
+				text,
+				type: contentType
+			};
+		}
+		if (textContent) return {
+			deliveryStatus,
+			senderName,
+			text: textContent,
+			type: "text"
+		};
+		return {
+			text: t("common.emptyMessage.text", "Empty message..."),
+			type: "empty"
+		};
+	}, [
+		client.user?.id,
+		latestMessage,
+		messageDeliveryStatus,
+		participantCount,
+		t,
+		userLanguage
+	]);
+};
+//#endregion
+export { useLatestMessagePreview };
+
+//# sourceMappingURL=useLatestMessagePreview.mjs.map

package/dist/es/components/SummarizedMessagePreview/hooks/useLatestMessagePreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLatestMessagePreview.mjs","names":[],"sources":["../../../../../src/components/SummarizedMessagePreview/hooks/useLatestMessagePreview.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Attachment, LocalMessage, VoiceRecordingAttachment } from 'stream-chat';\nimport {\n  isAudioAttachment,\n  isFileAttachment,\n  isImageAttachment,\n  isScrapedContent,\n  isVideoAttachment,\n  isVoiceRecordingAttachment,\n} from 'stream-chat';\n\nimport {\n  getTranslatedMessageText,\n  type TranslationContextValue,\n  useChatContext,\n  useTranslationContext,\n} from '../../../context';\nimport { isMessageDeleted } from '../../Message/utils';\n\nimport type { MessageDeliveryStatus } from '../../ChannelListItem';\n\nexport type ChannelPreviewMessageType =\n  | 'text'\n  | 'deleted'\n  | 'error'\n  | 'empty'\n  | 'image'\n  | 'giphy'\n  | 'video'\n  | 'voice'\n  | 'file'\n  | 'unsupported'\n  | 'link'\n  | 'location'\n  | 'poll';\n\nconst SUPPORTED_VIDEO_FORMATS: string[] = [\n  'video/mp4',\n  'video/ogg',\n  'video/webm',\n  'video/quicktime',\n];\n\n/**\n * Delivery status of the last own message.\n * Determines which delivery status icon to render in the preview.\n *\n * - `sending` — Clock icon\n * - `sent` — Single checkmark icon\n * - `delivered` — Double checkmark icon\n * - `read` — Double checkmark icon (with distinct color)\n */\nexport type ChannelPreviewDeliveryStatus = 'sending' | 'sent' | 'delivered' | 'read';\n\nexport type LatestMessagePreviewData = {\n  /**\n   * The type of content being previewed.\n   * Use this to render the appropriate content-type icon.\n   */\n  type: ChannelPreviewMessageType;\n  /**\n   * The preview text to display.\n   */\n  text: string;\n  /**\n   * Delivery status of own message.\n   * Only present for own messages that are not in error state.\n   * Use this to render the delivery status icon (clock, checkmark, double checkmark).\n   */\n  deliveryStatus?: ChannelPreviewDeliveryStatus;\n  /**\n   * Sender name prefix.\n   * - `\"You\"` (translated) for own messages\n   * - Sender's display name for incoming messages in group channels (>2 members)\n   * - `undefined` for incoming messages in direct conversations\n   */\n  senderName?: string;\n};\n\nfunction getAttachmentContentType(attachment: Attachment): ChannelPreviewMessageType {\n  if (!attachment) return 'text';\n\n  if (attachment.type === 'giphy') return 'giphy';\n  if (isScrapedContent(attachment)) return 'link';\n  if (isImageAttachment(attachment)) return 'image';\n  if (isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) return 'video';\n  if (isVoiceRecordingAttachment(attachment)) return 'voice';\n  if (\n    isAudioAttachment(attachment) ||\n    isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)\n  ) {\n    return 'file';\n  }\n\n  return 'unsupported';\n}\n\nfunction getAttachmentFallbackText(\n  type: ChannelPreviewMessageType,\n  count: number,\n  t: TranslationContextValue['t'],\n): string {\n  switch (type) {\n    case 'image':\n      return t('messagePreview.latestMessagePreview.imageCount.label', {\n        count,\n        defaultValue_one: 'Image',\n        defaultValue_other: '{{ count }} images',\n      });\n    case 'video':\n      return t('messagePreview.latestMessagePreview.videoCount.label', {\n        count,\n        defaultValue_one: 'Video',\n        defaultValue_other: '{{ count }} videos',\n      });\n    case 'voice':\n      return t('messagePreview.latestMessagePreview.voiceMessageCount.label', {\n        count,\n        defaultValue_one: 'Voice message',\n        defaultValue_other: '{{ count }} voice messages',\n      });\n    case 'link':\n      return t('messagePreview.latestMessagePreview.linkCount.label', {\n        count,\n        defaultValue_one: 'Link',\n        defaultValue_other: '{{ count }} links',\n      });\n    case 'file':\n      return t('messagePreview.latestMessagePreview.fileCount.label', {\n        count,\n        defaultValue_one: 'File',\n        defaultValue_other: '{{ count }} files',\n      });\n    case 'unsupported':\n      return t('common.unsupportedAttachment.text', 'Unsupported attachment');\n    default:\n      return t('messagePreview.latestMessagePreview.fileCount.label', {\n        count,\n        defaultValue_one: 'File',\n        defaultValue_other: '{{ count }} files',\n      });\n  }\n}\n\nexport type UseLatestMessagePreviewParams = {\n  /** The channel to generate preview for */\n  participantCount?: number;\n  /** The latest message in the channel */\n  latestMessage?: LocalMessage;\n  /**\n   * Delivery status from the `useMessageDeliveryStatus` hook.\n   * When provided, used to determine the delivery status icon.\n   * When omitted, delivery status icons are not shown.\n   */\n  messageDeliveryStatus?: MessageDeliveryStatus;\n};\n\nexport const useLatestMessagePreview = ({\n  latestMessage,\n  messageDeliveryStatus,\n  participantCount,\n}: UseLatestMessagePreviewParams): LatestMessagePreviewData => {\n  const { client } = useChatContext();\n  const { t, userLanguage } = useTranslationContext();\n\n  return useMemo(() => {\n    if (!latestMessage) {\n      return {\n        text: t('common.nothingYet.text', 'Nothing yet...'),\n        type: 'empty' as const,\n      };\n    }\n\n    if (latestMessage.status === 'failed' || latestMessage.type === 'error') {\n      return {\n        text: t(\n          'messagePreview.latestMessagePreview.messageFailedSend.text',\n          'Message failed to send',\n        ),\n        type: 'error' as const,\n      };\n    }\n\n    const isOwnMessage = latestMessage.user?.id === client.user?.id;\n\n    let deliveryStatus: ChannelPreviewDeliveryStatus | undefined;\n    if (isOwnMessage) {\n      deliveryStatus = messageDeliveryStatus ?? (latestMessage.status as 'sending');\n    }\n\n    let senderName: string | undefined;\n    if (isOwnMessage) {\n      senderName = t('common.you.label', 'You');\n    } else if (!isOwnMessage && participantCount !== undefined && participantCount > 2) {\n      senderName = latestMessage.user?.name || latestMessage.user?.id;\n    }\n\n    if (isMessageDeleted(latestMessage)) {\n      return {\n        deliveryStatus,\n        senderName,\n        text: t('common.messageDeleted.text', 'Message deleted'),\n        type: 'deleted' as const,\n      };\n    }\n\n    if (latestMessage.poll) {\n      return {\n        deliveryStatus,\n        senderName,\n        text: t('common.poll.label', 'Poll'),\n        type: 'poll' as const,\n      };\n    }\n\n    const textContent =\n      getTranslatedMessageText({ language: userLanguage, message: latestMessage }) ||\n      latestMessage.text;\n\n    if (latestMessage.shared_location) {\n      return {\n        deliveryStatus,\n        senderName,\n        text: textContent || t('common.location.text', 'Location'),\n        type: 'location' as const,\n      };\n    }\n\n    if (latestMessage.attachments && latestMessage.attachments.length) {\n      const attachments = latestMessage.attachments;\n\n      let contentType: ChannelPreviewMessageType;\n\n      const [firstAttachment] = attachments;\n      const firstAttachmentType = getAttachmentContentType(firstAttachment);\n\n      if (\n        attachments.every(\n          (attachment) => getAttachmentContentType(attachment) === firstAttachmentType,\n        )\n      ) {\n        contentType = firstAttachmentType;\n      } else {\n        contentType = 'file';\n      }\n\n      let text =\n        contentType === 'giphy'\n          ? `GIPHY ${firstAttachment.title ?? ''}`.trim()\n          : // prioritize message text content if available\n            textContent ||\n            // then fallback text of the single attachment if only one attachment is present and it's not a voice recording (fallback text is generic for voice recordings, so not useful in the preview)\n            (attachments.length === 1 &&\n            contentType !== 'voice' &&\n            contentType !== 'unsupported'\n              ? firstAttachment.fallback || firstAttachment.title\n              : '') ||\n            // then generic fallback text based on attachment type and count\n            getAttachmentFallbackText(contentType, attachments.length, t);\n\n      // attach duration for audio/video attachments if available\n      // `Attachment.custom` is typed as required by the OpenAPI models, but it is not guaranteed\n      // at runtime (og-scraped, giphy and custom-integration attachments arrive without it), and\n      // this cast is applied to attachments of ANY type - so it must be read defensively.\n      const firstAttachmentDuration = (firstAttachment as VoiceRecordingAttachment).custom\n        ?.duration;\n      if (attachments.length === 1 && typeof firstAttachmentDuration === 'number') {\n        const minutes = Math.floor(firstAttachmentDuration / 60);\n        const seconds = Math.ceil(firstAttachmentDuration) % 60;\n        const durationString = `${minutes}:${seconds.toString().padStart(2, '0')}`;\n        text += ` (${durationString})`;\n      }\n\n      return {\n        deliveryStatus,\n        senderName,\n        text,\n        type: contentType,\n      };\n    }\n\n    if (textContent) {\n      return {\n        deliveryStatus,\n        senderName,\n        text: textContent,\n        type: 'text' as const,\n      };\n    }\n\n    return {\n      text: t('common.emptyMessage.text', 'Empty message...'),\n      type: 'empty' as const,\n    };\n  }, [\n    client.user?.id,\n    latestMessage,\n    messageDeliveryStatus,\n    participantCount,\n    t,\n    userLanguage,\n  ]);\n};\n"],"mappings":";;;;;;;AAoCA,IAAM,0BAAoC;CACxC;CACA;CACA;CACA;AACF;AAsCA,SAAS,yBAAyB,YAAmD;CACnF,IAAI,CAAC,YAAY,OAAO;CAExB,IAAI,WAAW,SAAS,SAAS,OAAO;CACxC,IAAI,iBAAiB,UAAU,GAAG,OAAO;CACzC,IAAI,kBAAkB,UAAU,GAAG,OAAO;CAC1C,IAAI,kBAAkB,YAAY,uBAAuB,GAAG,OAAO;CACnE,IAAI,2BAA2B,UAAU,GAAG,OAAO;CACnD,IACE,kBAAkB,UAAU,KAC5B,iBAAiB,YAAY,uBAAuB,GAEpD,OAAO;CAGT,OAAO;AACT;AAEA,SAAS,0BACP,MACA,OACA,GACQ;CACR,QAAQ,MAAR;EACE,KAAK,SACH,OAAO,EAAE,wDAAwD;GAC/D;GACA,kBAAkB;GAClB,oBAAoB;EACtB,CAAC;EACH,KAAK,SACH,OAAO,EAAE,wDAAwD;GAC/D;GACA,kBAAkB;GAClB,oBAAoB;EACtB,CAAC;EACH,KAAK,SACH,OAAO,EAAE,+DAA+D;GACtE;GACA,kBAAkB;GAClB,oBAAoB;EACtB,CAAC;EACH,KAAK,QACH,OAAO,EAAE,uDAAuD;GAC9D;GACA,kBAAkB;GAClB,oBAAoB;EACtB,CAAC;EACH,KAAK,QACH,OAAO,EAAE,uDAAuD;GAC9D;GACA,kBAAkB;GAClB,oBAAoB;EACtB,CAAC;EACH,KAAK,eACH,OAAO,EAAE,qCAAqC,wBAAwB;EACxE,SACE,OAAO,EAAE,uDAAuD;GAC9D;GACA,kBAAkB;GAClB,oBAAoB;EACtB,CAAC;CACL;AACF;AAeA,IAAa,2BAA2B,EACtC,eACA,uBACA,uBAC6D;CAC7D,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,GAAG,iBAAiB,sBAAsB;CAElD,OAAO,cAAc;EACnB,IAAI,CAAC,eACH,OAAO;GACL,MAAM,EAAE,0BAA0B,gBAAgB;GAClD,MAAM;EACR;EAGF,IAAI,cAAc,WAAW,YAAY,cAAc,SAAS,SAC9D,OAAO;GACL,MAAM,EACJ,8DACA,wBACF;GACA,MAAM;EACR;EAGF,MAAM,eAAe,cAAc,MAAM,OAAO,OAAO,MAAM;EAE7D,IAAI;EACJ,IAAI,cACF,iBAAiB,yBAA0B,cAAc;EAG3D,IAAI;EACJ,IAAI,cACF,aAAa,EAAE,oBAAoB,KAAK;OACnC,IAAI,CAAC,gBAAgB,qBAAqB,KAAA,KAAa,mBAAmB,GAC/E,aAAa,cAAc,MAAM,QAAQ,cAAc,MAAM;EAG/D,IAAI,iBAAiB,aAAa,GAChC,OAAO;GACL;GACA;GACA,MAAM,EAAE,8BAA8B,iBAAiB;GACvD,MAAM;EACR;EAGF,IAAI,cAAc,MAChB,OAAO;GACL;GACA;GACA,MAAM,EAAE,qBAAqB,MAAM;GACnC,MAAM;EACR;EAGF,MAAM,cACJ,yBAAyB;GAAE,UAAU;GAAc,SAAS;EAAc,CAAC,KAC3E,cAAc;EAEhB,IAAI,cAAc,iBAChB,OAAO;GACL;GACA;GACA,MAAM,eAAe,EAAE,wBAAwB,UAAU;GACzD,MAAM;EACR;EAGF,IAAI,cAAc,eAAe,cAAc,YAAY,QAAQ;GACjE,MAAM,cAAc,cAAc;GAElC,IAAI;GAEJ,MAAM,CAAC,mBAAmB;GAC1B,MAAM,sBAAsB,yBAAyB,eAAe;GAEpE,IACE,YAAY,OACT,eAAe,yBAAyB,UAAU,MAAM,mBAC3D,GAEA,cAAc;QAEd,cAAc;GAGhB,IAAI,OACF,gBAAgB,UACZ,SAAS,gBAAgB,SAAS,KAAK,KAAK,IAE5C,gBAEC,YAAY,WAAW,KACxB,gBAAgB,WAChB,gBAAgB,gBACZ,gBAAgB,YAAY,gBAAgB,QAC5C,OAEJ,0BAA0B,aAAa,YAAY,QAAQ,CAAC;GAMlE,MAAM,0BAA2B,gBAA6C,QAC1E;GACJ,IAAI,YAAY,WAAW,KAAK,OAAO,4BAA4B,UAAU;IAG3E,MAAM,iBAAiB,GAFP,KAAK,MAAM,0BAA0B,EAE3B,EAAQ,IADlB,KAAK,KAAK,uBAAuB,IAAI,GAAA,CACR,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG;IACvE,QAAQ,KAAK,eAAe;GAC9B;GAEA,OAAO;IACL;IACA;IACA;IACA,MAAM;GACR;EACF;EAEA,IAAI,aACF,OAAO;GACL;GACA;GACA,MAAM;GACN,MAAM;EACR;EAGF,OAAO;GACL,MAAM,EAAE,4BAA4B,kBAAkB;GACtD,MAAM;EACR;CACF,GAAG;EACD,OAAO,MAAM;EACb;EACA;EACA;EACA;EACA;CACF,CAAC;AACH"}

package/dist/es/components/TextareaComposer/SuggestionList/CommandItem.mjs

@@ -0,0 +1,26 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { CommandContextMenuItem } from "../../MessageComposer/AttachmentSelector/CommandsMenu.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/TextareaComposer/SuggestionList/CommandItem.tsx
+var messageComposerStateSelector = ({ editedMessage, quotedMessage }) => ({
+	editedMessage,
+	quotedMessage
+});
+var CommandItem = (props) => {
+	const { enabled, entity, focused: _, ...buttonProps } = props;
+	const messageComposer = useMessageComposerController();
+	useStateStore(messageComposer.state, messageComposerStateSelector);
+	if (!entity.name) return null;
+	const resolvedEnabled = enabled ?? !messageComposer.isCommandDisabled(entity);
+	return /* @__PURE__ */ jsx(CommandContextMenuItem, {
+		...buttonProps,
+		command: entity,
+		enabled: resolvedEnabled
+	});
+};
+//#endregion
+export { CommandItem };
+
+//# sourceMappingURL=CommandItem.mjs.map

package/dist/es/components/TextareaComposer/SuggestionList/CommandItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandItem.mjs","names":[],"sources":["../../../../../src/components/TextareaComposer/SuggestionList/CommandItem.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport React from 'react';\nimport type { Command, MessageComposerState } from 'stream-chat';\nimport { CommandContextMenuItem } from '../../MessageComposer/AttachmentSelector/CommandsMenu';\nimport { useStateStore } from '../../../store';\nimport { useMessageComposerController } from '../../MessageComposer/hooks';\n\nexport type CommandItemProps = {\n  entity: Command;\n  enabled?: boolean;\n  focused?: boolean;\n} & ComponentProps<'button'>;\n\nconst messageComposerStateSelector = ({\n  editedMessage,\n  quotedMessage,\n}: MessageComposerState) => ({\n  editedMessage,\n  quotedMessage,\n});\n\nexport const CommandItem = (props: PropsWithChildren<CommandItemProps>) => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { enabled, entity, focused: _, ...buttonProps } = props;\n  const messageComposer = useMessageComposerController();\n  useStateStore(messageComposer.state, messageComposerStateSelector);\n\n  if (!entity.name) return null;\n\n  const resolvedEnabled =\n    enabled ?? !messageComposer.isCommandDisabled(entity as Command & { name: string });\n\n  return (\n    <CommandContextMenuItem\n      {...buttonProps}\n      command={entity as Command & { name: string }}\n      enabled={resolvedEnabled}\n    />\n  );\n};\n"],"mappings":";;;;;;AAaA,IAAM,gCAAgC,EACpC,eACA,qBAC2B;CAC3B;CACA;AACF;AAEA,IAAa,eAAe,UAA+C;CAEzE,MAAM,EAAE,SAAS,QAAQ,SAAS,GAAG,GAAG,gBAAgB;CACxD,MAAM,kBAAkB,6BAA6B;CACrD,cAAc,gBAAgB,OAAO,4BAA4B;CAEjE,IAAI,CAAC,OAAO,MAAM,OAAO;CAEzB,MAAM,kBACJ,WAAW,CAAC,gBAAgB,kBAAkB,MAAoC;CAEpF,OACE,oBAAC,wBAAD;EACE,GAAI;EACJ,SAAS;EACT,SAAS;CACV,CAAA;AAEL"}

package/dist/es/components/TextareaComposer/SuggestionList/EmoticonItem.mjs

@@ -0,0 +1,26 @@
+import { EmojiContextMenuButton } from "../../Dialog/components/ContextMenu.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TextareaComposer/SuggestionList/EmoticonItem.tsx
+var EmoticonItem = (props) => {
+	const { className, entity, focused: _, ...buttonProps } = props;
+	if (!Object.keys(entity).length) return null;
+	const { parts, token } = entity.tokenizedDisplayName ?? {};
+	return /* @__PURE__ */ jsx(EmojiContextMenuButton, {
+		...buttonProps,
+		className: clsx("str-chat__emoji-item", className),
+		emoji: entity.native,
+		children: parts?.map((part, i) => part.toLowerCase() === token ? /* @__PURE__ */ jsx("span", {
+			className: "str-chat__emoji-item--highlight",
+			children: part
+		}, `part-${i}`) : /* @__PURE__ */ jsx("span", {
+			className: "str-chat__emoji-item--part",
+			children: part
+		}, `part-${i}`)) ?? null
+	});
+};
+//#endregion
+export { EmoticonItem };
+
+//# sourceMappingURL=EmoticonItem.mjs.map

package/dist/es/components/TextareaComposer/SuggestionList/EmoticonItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmoticonItem.mjs","names":[],"sources":["../../../../../src/components/TextareaComposer/SuggestionList/EmoticonItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentProps } from 'react';\nimport React from 'react';\nimport { EmojiContextMenuButton } from '../../Dialog';\n\nexport type EmoticonItemProps = {\n  entity: {\n    /** Name for emoticon */\n    name: string;\n    /** Native value or actual emoticon */\n    native: string;\n    /** The parts of the Name property of the entity (or id if no name) that can be matched to the user input value.\n     * Default is bold for matches, but can be overwritten in css.\n     * */\n    tokenizedDisplayName: { token: string; parts: string[] };\n  };\n  focused?: boolean;\n} & ComponentProps<'button'>;\n\nexport const EmoticonItem = (props: EmoticonItemProps) => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { className, entity, focused: _, ...buttonProps } = props;\n  const hasEntity = Object.keys(entity).length;\n  if (!hasEntity) return null;\n\n  const { parts, token } = entity.tokenizedDisplayName ?? ({} as EmoticonItemProps);\n\n  return (\n    <EmojiContextMenuButton\n      {...buttonProps}\n      className={clsx('str-chat__emoji-item', className)}\n      emoji={entity.native}\n    >\n      {parts?.map((part, i) =>\n        part.toLowerCase() === token ? (\n          <span className='str-chat__emoji-item--highlight' key={`part-${i}`}>\n            {part}\n          </span>\n        ) : (\n          <span className='str-chat__emoji-item--part' key={`part-${i}`}>\n            {part}\n          </span>\n        ),\n      ) ?? null}\n    </EmojiContextMenuButton>\n  );\n};\n"],"mappings":";;;;;AAmBA,IAAa,gBAAgB,UAA6B;CAExD,MAAM,EAAE,WAAW,QAAQ,SAAS,GAAG,GAAG,gBAAgB;CAE1D,IAAI,CADc,OAAO,KAAK,MAAM,CAAC,CAAC,QACtB,OAAO;CAEvB,MAAM,EAAE,OAAO,UAAU,OAAO,wBAAyB,CAAC;CAE1D,OACE,oBAAC,wBAAD;EACE,GAAI;EACJ,WAAW,KAAK,wBAAwB,SAAS;EACjD,OAAO,OAAO;YAEb,OAAO,KAAK,MAAM,MACjB,KAAK,YAAY,MAAM,QACrB,oBAAC,QAAD;GAAM,WAAU;aACb;EACG,GAFiD,QAAQ,GAEzD,IAEN,oBAAC,QAAD;GAAM,WAAU;aACb;EACG,GAF4C,QAAQ,GAEpD,CAEV,KAAK;CACiB,CAAA;AAE5B"}

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.mjs

@@ -0,0 +1,32 @@
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { ListItemLayout } from "../../../ListItemLayout/ListItemLayout.mjs";
+import { MentionSuggestionTitle } from "./MentionSuggestionTitle.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsx
+var BroadcastMentionItem = ({ entity, focused, ...buttonProps }) => {
+	const { IconMegaphone } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsx(ListItemLayout, {
+		contentClassName: "str-chat__suggestion-list__item-content",
+		description: entity.mentionType === "channel" ? t("mention.channel.description", "Notify everyone in this channel") : t("mention.here.description", "Notify every online member in this channel"),
+		descriptionClassName: "str-chat__suggestion-list__item-details",
+		LeadingIcon: IconMegaphone,
+		RootElement: "button",
+		rootProps: {
+			...buttonProps,
+			className: clsx("str-chat__context-menu__button", buttonProps.className, "str-chat__suggestion-list__mention"),
+			role: buttonProps.role ?? "menuitem",
+			title: `@${entity.name}`
+		},
+		selected: focused,
+		title: /* @__PURE__ */ jsx(MentionSuggestionTitle, { children: entity.name }),
+		titleClassName: "str-chat__suggestion-list__item-title str-chat__suggestion-list__mention-item-title"
+	});
+};
+//#endregion
+export { BroadcastMentionItem };
+
+//# sourceMappingURL=BroadcastMentionItem.mjs.map

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BroadcastMentionItem.mjs","names":[],"sources":["../../../../../../src/components/TextareaComposer/SuggestionList/MentionItem/BroadcastMentionItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport type { ChannelMentionSuggestion, HereMentionSuggestion } from 'stream-chat';\nimport { ListItemLayout } from '../../../ListItemLayout';\nimport { useComponentContextIcons, useTranslationContext } from '../../../../context';\nimport { MentionSuggestionTitle } from './MentionSuggestionTitle';\nimport type { MentionItemComponentProps } from './types';\n\nexport type BroadcastMentionItemProps = MentionItemComponentProps<\n  ChannelMentionSuggestion | HereMentionSuggestion\n>;\n\nexport const BroadcastMentionItem = ({\n  entity,\n  focused,\n  ...buttonProps\n}: BroadcastMentionItemProps) => {\n  const { IconMegaphone } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const description =\n    entity.mentionType === 'channel'\n      ? t('mention.channel.description', 'Notify everyone in this channel')\n      : t('mention.here.description', 'Notify every online member in this channel');\n\n  return (\n    <ListItemLayout\n      contentClassName='str-chat__suggestion-list__item-content'\n      description={description}\n      descriptionClassName='str-chat__suggestion-list__item-details'\n      LeadingIcon={IconMegaphone}\n      RootElement='button'\n      rootProps={{\n        ...buttonProps,\n        className: clsx(\n          'str-chat__context-menu__button',\n          buttonProps.className,\n          'str-chat__suggestion-list__mention',\n        ),\n        role: buttonProps.role ?? 'menuitem',\n        title: `@${entity.name}`,\n      }}\n      selected={focused}\n      title={<MentionSuggestionTitle>{entity.name}</MentionSuggestionTitle>}\n      titleClassName='str-chat__suggestion-list__item-title str-chat__suggestion-list__mention-item-title'\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAYA,IAAa,wBAAwB,EACnC,QACA,SACA,GAAG,kBAC4B;CAC/B,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,MAAM,EAAE,MAAM,sBAAsB;CAMpC,OACE,oBAAC,gBAAD;EACE,kBAAiB;EACJ,aAPf,OAAO,gBAAgB,YACnB,EAAE,+BAA+B,iCAAiC,IAClE,EAAE,4BAA4B,4CAA4C;EAM5E,sBAAqB;EACrB,aAAa;EACb,aAAY;EACZ,WAAW;GACT,GAAG;GACH,WAAW,KACT,kCACA,YAAY,WACZ,oCACF;GACA,MAAM,YAAY,QAAQ;GAC1B,OAAO,IAAI,OAAO;EACpB;EACA,UAAU;EACV,OAAO,oBAAC,wBAAD,EAAA,UAAyB,OAAO,KAA6B,CAAA;EACpE,gBAAe;CAChB,CAAA;AAEL"}

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/MentionItem.mjs

@@ -0,0 +1,39 @@
+import { BroadcastMentionItem } from "./BroadcastMentionItem.mjs";
+import { RoleItem } from "./RoleItem.mjs";
+import { SpecialMentionItem } from "./SpecialMentionItem.mjs";
+import { UserGroupItem } from "./UserGroupItem.mjs";
+import { UserItem } from "./UserItem.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/TextareaComposer/SuggestionList/MentionItem/MentionItem.tsx
+var MentionItem = ({ BroadcastMentionItem: BroadcastMentionItem$1 = BroadcastMentionItem, entity, focused, RoleItem: RoleItem$1 = RoleItem, SpecialMentionItem: SpecialMentionItem$1 = SpecialMentionItem, UserGroupItem: UserGroupItem$1 = UserGroupItem, UserItem: UserItem$1 = UserItem, ...buttonProps }) => {
+	if (entity.mentionType === "user") return /* @__PURE__ */ jsx(UserItem$1, {
+		...buttonProps,
+		entity,
+		focused
+	});
+	if (entity.mentionType === "role") return /* @__PURE__ */ jsx(RoleItem$1, {
+		...buttonProps,
+		entity,
+		focused
+	});
+	if (entity.mentionType === "user_group") return /* @__PURE__ */ jsx(UserGroupItem$1, {
+		...buttonProps,
+		entity,
+		focused
+	});
+	if (entity.mentionType === "channel" || entity.mentionType === "here") return /* @__PURE__ */ jsx(BroadcastMentionItem$1, {
+		...buttonProps,
+		entity,
+		focused
+	});
+	return /* @__PURE__ */ jsx(SpecialMentionItem$1, {
+		...buttonProps,
+		entity,
+		focused
+	});
+};
+//#endregion
+export { MentionItem };
+
+//# sourceMappingURL=MentionItem.mjs.map

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/MentionItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionItem.mjs","names":[],"sources":["../../../../../../src/components/TextareaComposer/SuggestionList/MentionItem/MentionItem.tsx"],"sourcesContent":["import React from 'react';\nimport type { MentionSuggestion } from 'stream-chat';\nimport {\n  type BroadcastMentionItemProps,\n  BroadcastMentionItem as DefaultBroadcastMentionItem,\n} from './BroadcastMentionItem';\nimport { RoleItem as DefaultRoleItem, type RoleItemProps } from './RoleItem';\nimport {\n  SpecialMentionItem as DefaultSpecialMentionItem,\n  type SpecialMentionItemProps,\n} from './SpecialMentionItem';\nimport {\n  UserGroupItem as DefaultUserGroupItem,\n  type UserGroupItemProps,\n} from './UserGroupItem';\nimport { UserItem as DefaultUserItem, type UserItemProps } from './UserItem';\nimport type { MentionItemComponentProps } from './types';\n\nexport type MentionItemProps = MentionItemComponentProps<MentionSuggestion> & {\n  BroadcastMentionItem?: React.ComponentType<BroadcastMentionItemProps>;\n  RoleItem?: React.ComponentType<RoleItemProps>;\n  SpecialMentionItem?: React.ComponentType<SpecialMentionItemProps>;\n  UserGroupItem?: React.ComponentType<UserGroupItemProps>;\n  UserItem?: React.ComponentType<UserItemProps>;\n};\n\nexport const MentionItem = ({\n  BroadcastMentionItem = DefaultBroadcastMentionItem,\n  entity,\n  focused,\n  RoleItem = DefaultRoleItem,\n  SpecialMentionItem = DefaultSpecialMentionItem,\n  UserGroupItem = DefaultUserGroupItem,\n  UserItem = DefaultUserItem,\n  ...buttonProps\n}: MentionItemProps) => {\n  if (entity.mentionType === 'user') {\n    return <UserItem {...buttonProps} entity={entity} focused={focused} />;\n  }\n\n  if (entity.mentionType === 'role') {\n    return <RoleItem {...buttonProps} entity={entity} focused={focused} />;\n  }\n\n  if (entity.mentionType === 'user_group') {\n    return <UserGroupItem {...buttonProps} entity={entity} focused={focused} />;\n  }\n\n  if (entity.mentionType === 'channel' || entity.mentionType === 'here') {\n    return <BroadcastMentionItem {...buttonProps} entity={entity} focused={focused} />;\n  }\n\n  return <SpecialMentionItem {...buttonProps} entity={entity} focused={focused} />;\n};\n"],"mappings":";;;;;;;;AA0BA,IAAa,eAAe,EAC1B,sBAAA,yBAAuB,sBACvB,QACA,SACA,UAAA,aAAW,UACX,oBAAA,uBAAqB,oBACrB,eAAA,kBAAgB,eAChB,UAAA,aAAW,UACX,GAAG,kBACmB;CACtB,IAAI,OAAO,gBAAgB,QACzB,OAAO,oBAAC,YAAD;EAAU,GAAI;EAAqB;EAAiB;CAAU,CAAA;CAGvE,IAAI,OAAO,gBAAgB,QACzB,OAAO,oBAAC,YAAD;EAAU,GAAI;EAAqB;EAAiB;CAAU,CAAA;CAGvE,IAAI,OAAO,gBAAgB,cACzB,OAAO,oBAAC,iBAAD;EAAe,GAAI;EAAqB;EAAiB;CAAU,CAAA;CAG5E,IAAI,OAAO,gBAAgB,aAAa,OAAO,gBAAgB,QAC7D,OAAO,oBAAC,wBAAD;EAAsB,GAAI;EAAqB;EAAiB;CAAU,CAAA;CAGnF,OAAO,oBAAC,sBAAD;EAAoB,GAAI;EAAqB;EAAiB;CAAU,CAAA;AACjF"}

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/MentionSuggestionTitle.mjs

@@ -0,0 +1,7 @@
+import { Fragment, jsxs } from "react/jsx-runtime";
+//#region src/components/TextareaComposer/SuggestionList/MentionItem/MentionSuggestionTitle.tsx
+var MentionSuggestionTitle = ({ children }) => /* @__PURE__ */ jsxs(Fragment, { children: ["@", children] });
+//#endregion
+export { MentionSuggestionTitle };
+
+//# sourceMappingURL=MentionSuggestionTitle.mjs.map

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/MentionSuggestionTitle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionSuggestionTitle.mjs","names":[],"sources":["../../../../../../src/components/TextareaComposer/SuggestionList/MentionItem/MentionSuggestionTitle.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nexport type MentionSuggestionTitleProps = {\n  children: ReactNode;\n};\n\nexport const MentionSuggestionTitle = ({ children }: MentionSuggestionTitleProps) => (\n  <>@{children}</>\n);\n"],"mappings":";;AAMA,IAAa,0BAA0B,EAAE,eACvC,qBAAA,UAAA,EAAA,UAAA,CAAE,KAAE,QAAW,EAAA,CAAA"}

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.mjs

@@ -0,0 +1,34 @@
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { ListItemLayout } from "../../../ListItemLayout/ListItemLayout.mjs";
+import { MentionSuggestionTitle } from "./MentionSuggestionTitle.mjs";
+import { TokenizedSuggestionParts } from "../TokenizedSuggestionParts.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsx
+var RoleItem = ({ entity, focused, ...buttonProps }) => {
+	const { IconShield } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const role = entity.name;
+	return /* @__PURE__ */ jsx(ListItemLayout, {
+		contentClassName: "str-chat__suggestion-list__item-content",
+		LeadingIcon: IconShield,
+		RootElement: "button",
+		rootProps: {
+			...buttonProps,
+			className: clsx("str-chat__context-menu__button", buttonProps.className, "str-chat__suggestion-list__mention"),
+			role: buttonProps.role ?? "menuitem",
+			title: `@${role}`
+		},
+		selected: focused,
+		subtitle: t("textareaComposer.roleItem.notifyMembers.label", "Notify all {{ role }} members", { role }),
+		subtitleClassName: "str-chat__suggestion-list__item-details",
+		title: /* @__PURE__ */ jsx(MentionSuggestionTitle, { children: /* @__PURE__ */ jsx(TokenizedSuggestionParts, { tokenizedDisplayName: entity.tokenizedDisplayName }) }),
+		titleClassName: "str-chat__suggestion-list__item-title str-chat__suggestion-list__mention-item-title"
+	});
+};
+//#endregion
+export { RoleItem };
+
+//# sourceMappingURL=RoleItem.mjs.map

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoleItem.mjs","names":[],"sources":["../../../../../../src/components/TextareaComposer/SuggestionList/MentionItem/RoleItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport type { RoleMentionSuggestion } from 'stream-chat';\nimport { ListItemLayout } from '../../../ListItemLayout';\nimport { useComponentContextIcons, useTranslationContext } from '../../../../context';\nimport { MentionSuggestionTitle } from './MentionSuggestionTitle';\nimport type { MentionItemComponentProps } from './types';\nimport { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';\n\nexport type RoleItemProps = MentionItemComponentProps<RoleMentionSuggestion>;\n\nexport const RoleItem = ({ entity, focused, ...buttonProps }: RoleItemProps) => {\n  const { IconShield } = useComponentContextIcons();\n  void focused;\n  const { t } = useTranslationContext();\n  const role = entity.name;\n\n  return (\n    <ListItemLayout\n      contentClassName='str-chat__suggestion-list__item-content'\n      LeadingIcon={IconShield}\n      RootElement='button'\n      rootProps={{\n        ...buttonProps,\n        className: clsx(\n          'str-chat__context-menu__button',\n          buttonProps.className,\n          'str-chat__suggestion-list__mention',\n        ),\n        role: buttonProps.role ?? 'menuitem',\n        title: `@${role}`,\n      }}\n      selected={focused}\n      subtitle={t(\n        'textareaComposer.roleItem.notifyMembers.label',\n        'Notify all {{ role }} members',\n        { role },\n      )}\n      subtitleClassName='str-chat__suggestion-list__item-details'\n      title={\n        <MentionSuggestionTitle>\n          <TokenizedSuggestionParts tokenizedDisplayName={entity.tokenizedDisplayName} />\n        </MentionSuggestionTitle>\n      }\n      titleClassName='str-chat__suggestion-list__item-title str-chat__suggestion-list__mention-item-title'\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,IAAa,YAAY,EAAE,QAAQ,SAAS,GAAG,kBAAiC;CAC9E,MAAM,EAAE,eAAe,yBAAyB;CAEhD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,OAAO,OAAO;CAEpB,OACE,oBAAC,gBAAD;EACE,kBAAiB;EACjB,aAAa;EACb,aAAY;EACZ,WAAW;GACT,GAAG;GACH,WAAW,KACT,kCACA,YAAY,WACZ,oCACF;GACA,MAAM,YAAY,QAAQ;GAC1B,OAAO,IAAI;EACb;EACA,UAAU;EACV,UAAU,EACR,iDACA,iCACA,EAAE,KAAK,CACT;EACA,mBAAkB;EAClB,OACE,oBAAC,wBAAD,EAAA,UACE,oBAAC,0BAAD,EAA0B,sBAAsB,OAAO,qBAAuB,CAAA,EACxD,CAAA;EAE1B,gBAAe;CAChB,CAAA;AAEL"}

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/SpecialMentionItem.mjs

@@ -0,0 +1,6 @@
+//#region src/components/TextareaComposer/SuggestionList/MentionItem/SpecialMentionItem.tsx
+var SpecialMentionItem = () => null;
+//#endregion
+export { SpecialMentionItem };
+
+//# sourceMappingURL=SpecialMentionItem.mjs.map

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/SpecialMentionItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpecialMentionItem.mjs","names":[],"sources":["../../../../../../src/components/TextareaComposer/SuggestionList/MentionItem/SpecialMentionItem.tsx"],"sourcesContent":["import type { MentionItemComponentProps } from './types';\n\ntype MinimalMentionEntity = {\n  id: string;\n  mentionType: string;\n  name?: string;\n};\n\nexport type SpecialMentionItemProps = MentionItemComponentProps<MinimalMentionEntity>;\n\nexport const SpecialMentionItem = () => null;\n"],"mappings":";AAUA,IAAa,2BAA2B"}

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.mjs

@@ -0,0 +1,31 @@
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { ListItemLayout } from "../../../ListItemLayout/ListItemLayout.mjs";
+import { MentionSuggestionTitle } from "./MentionSuggestionTitle.mjs";
+import { TokenizedSuggestionParts } from "../TokenizedSuggestionParts.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsx
+var UserGroupItem = ({ entity, focused, ...buttonProps }) => {
+	const { IconUsers } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(ListItemLayout, {
+		contentClassName: "str-chat__suggestion-list__item-content",
+		LeadingIcon: IconUsers,
+		RootElement: "button",
+		rootProps: {
+			...buttonProps,
+			className: clsx("str-chat__context-menu__button", buttonProps.className, "str-chat__suggestion-list__mention"),
+			role: buttonProps.role ?? "menuitem",
+			title: `@${entity.name}`
+		},
+		selected: focused,
+		subtitle: entity.description,
+		subtitleClassName: "str-chat__suggestion-list__item-details",
+		title: /* @__PURE__ */ jsx(MentionSuggestionTitle, { children: /* @__PURE__ */ jsx(TokenizedSuggestionParts, { tokenizedDisplayName: entity.tokenizedDisplayName }) }),
+		titleClassName: "str-chat__suggestion-list__item-title str-chat__suggestion-list__mention-item-title"
+	});
+};
+//#endregion
+export { UserGroupItem };
+
+//# sourceMappingURL=UserGroupItem.mjs.map

package/dist/es/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserGroupItem.mjs","names":[],"sources":["../../../../../../src/components/TextareaComposer/SuggestionList/MentionItem/UserGroupItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport type { UserGroupMentionSuggestion } from 'stream-chat';\nimport { ListItemLayout } from '../../../ListItemLayout';\nimport { MentionSuggestionTitle } from './MentionSuggestionTitle';\nimport type { MentionItemComponentProps } from './types';\nimport { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';\nimport { useComponentContextIcons } from '../../../../context';\n\nexport type UserGroupItemProps = MentionItemComponentProps<UserGroupMentionSuggestion>;\n\nexport const UserGroupItem = ({\n  entity,\n  focused,\n  ...buttonProps\n}: UserGroupItemProps) => {\n  const { IconUsers } = useComponentContextIcons();\n  void focused;\n\n  return (\n    <ListItemLayout\n      contentClassName='str-chat__suggestion-list__item-content'\n      LeadingIcon={IconUsers}\n      RootElement='button'\n      rootProps={{\n        ...buttonProps,\n        className: clsx(\n          'str-chat__context-menu__button',\n          buttonProps.className,\n          'str-chat__suggestion-list__mention',\n        ),\n        role: buttonProps.role ?? 'menuitem',\n        title: `@${entity.name}`,\n      }}\n      selected={focused}\n      subtitle={entity.description}\n      subtitleClassName='str-chat__suggestion-list__item-details'\n      title={\n        <MentionSuggestionTitle>\n          <TokenizedSuggestionParts tokenizedDisplayName={entity.tokenizedDisplayName} />\n        </MentionSuggestionTitle>\n      }\n      titleClassName='str-chat__suggestion-list__item-title str-chat__suggestion-list__mention-item-title'\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAWA,IAAa,iBAAiB,EAC5B,QACA,SACA,GAAG,kBACqB;CACxB,MAAM,EAAE,cAAc,yBAAyB;CAG/C,OACE,oBAAC,gBAAD;EACE,kBAAiB;EACjB,aAAa;EACb,aAAY;EACZ,WAAW;GACT,GAAG;GACH,WAAW,KACT,kCACA,YAAY,WACZ,oCACF;GACA,MAAM,YAAY,QAAQ;GAC1B,OAAO,IAAI,OAAO;EACpB;EACA,UAAU;EACV,UAAU,OAAO;EACjB,mBAAkB;EAClB,OACE,oBAAC,wBAAD,EAAA,UACE,oBAAC,0BAAD,EAA0B,sBAAsB,OAAO,qBAAuB,CAAA,EACxD,CAAA;EAE1B,gBAAe;CAChB,CAAA;AAEL"}