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

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

@@ -0,0 +1,50 @@
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { Avatar } from "../../../Avatar/Avatar.mjs";
+import { extractDisplayInfo } from "../../../Avatar/utils.mjs";
+import { ListItemLayout } from "../../../ListItemLayout/ListItemLayout.mjs";
+import { TokenizedSuggestionParts } from "../TokenizedSuggestionParts.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TextareaComposer/SuggestionList/MentionItem/UserItem.tsx
+/**
+* UI component for mentions rendered in suggestion list
+*/
+var UserItem = ({ entity, focused, ...buttonProps }) => {
+	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
+	const hasEntity = !!Object.keys(entity).length;
+	const titleAttribute = entity.name || entity.id || "";
+	const LeadingSlot = useMemo(() => {
+		const displayInfo = extractDisplayInfo$1({ user: entity });
+		return function UserItemAvatar() {
+			return /* @__PURE__ */ jsx(Avatar$1, {
+				...displayInfo,
+				"aria-hidden": true,
+				size: "md"
+			});
+		};
+	}, [
+		Avatar$1,
+		entity,
+		extractDisplayInfo$1
+	]);
+	if (!hasEntity) return null;
+	return /* @__PURE__ */ jsx(ListItemLayout, {
+		contentClassName: "str-chat__context-menu__button__label",
+		LeadingSlot,
+		RootElement: "button",
+		rootProps: {
+			...buttonProps,
+			className: clsx("str-chat__context-menu__button", "str-chat__user-context-menu__button", buttonProps.className, "str-chat__suggestion-list__mention"),
+			role: buttonProps.role ?? "menuitem",
+			title: titleAttribute
+		},
+		selected: focused,
+		title: /* @__PURE__ */ jsx(TokenizedSuggestionParts, { tokenizedDisplayName: entity.tokenizedDisplayName }),
+		titleClassName: "str-chat__suggestion-list__mention-item-title"
+	});
+};
+//#endregion
+export { UserItem };
+
+//# sourceMappingURL=UserItem.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserItem.mjs","names":[],"sources":["../../../../../../src/components/TextareaComposer/SuggestionList/MentionItem/UserItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useMemo } from 'react';\nimport type { UserSuggestion } from 'stream-chat';\nimport { Avatar as DefaultAvatar } from '../../../Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../Avatar/utils';\nimport { ListItemLayout } from '../../../ListItemLayout';\nimport { useComponentContext } from '../../../../context';\nimport type { MentionItemComponentProps } from './types';\nimport {\n  type TokenizedSuggestionDisplayName,\n  TokenizedSuggestionParts,\n} from '../TokenizedSuggestionParts';\n\ntype LegacyUserSuggestionEntity = {\n  tokenizedDisplayName: TokenizedSuggestionDisplayName;\n  id?: string;\n  image?: string;\n  mentionType?: 'user';\n  name?: string;\n};\n\nexport type UserItemProps = MentionItemComponentProps<\n  LegacyUserSuggestionEntity | UserSuggestion\n>;\n\n/**\n * UI component for mentions rendered in suggestion list\n */\nexport const UserItem = ({ entity, focused, ...buttonProps }: UserItemProps) => {\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const hasEntity = !!Object.keys(entity).length;\n\n  const titleAttribute = entity.name || entity.id || '';\n  const LeadingSlot = useMemo(() => {\n    const displayInfo = extractDisplayInfo({ user: entity });\n\n    return function UserItemAvatar() {\n      // Decorative: the option's accessible name already carries the user's name (title +\n      // tokenized display name), so the avatar's fallback initials/role would only add noise.\n      return <Avatar {...displayInfo} aria-hidden size='md' />;\n    };\n  }, [Avatar, entity, extractDisplayInfo]);\n\n  if (!hasEntity) return null;\n\n  return (\n    <ListItemLayout\n      contentClassName='str-chat__context-menu__button__label'\n      LeadingSlot={LeadingSlot}\n      RootElement='button'\n      rootProps={{\n        ...buttonProps,\n        className: clsx(\n          'str-chat__context-menu__button',\n          'str-chat__user-context-menu__button',\n          buttonProps.className,\n          'str-chat__suggestion-list__mention',\n        ),\n        role: buttonProps.role ?? 'menuitem',\n        title: titleAttribute,\n      }}\n      selected={focused}\n      title={\n        <TokenizedSuggestionParts tokenizedDisplayName={entity.tokenizedDisplayName} />\n      }\n      titleClassName='str-chat__suggestion-list__mention-item-title'\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA4BA,IAAa,YAAY,EAAE,QAAQ,SAAS,GAAG,kBAAiC;CAC9E,MAAM,EAAE,QAAA,WAAS,QAAe,oBAAA,uBAAqB,uBACnD,oBAAoB;CACtB,MAAM,YAAY,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;CAExC,MAAM,iBAAiB,OAAO,QAAQ,OAAO,MAAM;CACnD,MAAM,cAAc,cAAc;EAChC,MAAM,cAAc,qBAAmB,EAAE,MAAM,OAAO,CAAC;EAEvD,OAAO,SAAS,iBAAiB;GAG/B,OAAO,oBAAC,UAAD;IAAQ,GAAI;IAAa,eAAA;IAAY,MAAK;GAAM,CAAA;EACzD;CACF,GAAG;EAAC;EAAQ;EAAQ;CAAkB,CAAC;CAEvC,IAAI,CAAC,WAAW,OAAO;CAEvB,OACE,oBAAC,gBAAD;EACE,kBAAiB;EACJ;EACb,aAAY;EACZ,WAAW;GACT,GAAG;GACH,WAAW,KACT,kCACA,uCACA,YAAY,WACZ,oCACF;GACA,MAAM,YAAY,QAAQ;GAC1B,OAAO;EACT;EACA,UAAU;EACV,OACE,oBAAC,0BAAD,EAA0B,sBAAsB,OAAO,qBAAuB,CAAA;EAEhF,gBAAe;CAChB,CAAA;AAEL"}

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

@@ -0,0 +1,198 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useInteractionAnnouncements } from "../../Accessibility/hooks/useInteractionAnnouncements.mjs";
+import { usePopoverPosition } from "../../Dialog/hooks/usePopoverPosition.mjs";
+import { useStableId } from "../../UtilityComponents/useStableId.mjs";
+import { ContextMenu } from "../../Dialog/components/ContextMenu.mjs";
+import { InfiniteScrollPaginator } from "../../InfiniteScrollPaginator/InfiniteScrollPaginator.mjs";
+import { getTextareaCaretRect } from "../../../utils/getTextareaCaretRect.mjs";
+import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useMessageComposerCommands } from "../../MessageComposer/hooks/useMessageComposerCommands.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { CommandsMenuClassName, CommandsMenuHeader } from "../../MessageComposer/AttachmentSelector/CommandsMenu.mjs";
+import { CommandItem } from "./CommandItem.mjs";
+import { EmoticonItem } from "./EmoticonItem.mjs";
+import { MentionItem } from "./MentionItem/MentionItem.mjs";
+import { SuggestionListItem } from "./SuggestionListItem.mjs";
+import { createElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TextareaComposer/SuggestionList/SuggestionList.tsx
+var textComposerStateSelector = ({ selection, suggestions }) => ({
+	selection,
+	suggestions
+});
+var searchSourceStateSelector = (nextValue) => ({ items: nextValue.items ?? [] });
+var defaultComponents = {
+	"/": (props) => /* @__PURE__ */ jsx(CommandItem, {
+		...props,
+		entity: props.entity
+	}),
+	":": (props) => /* @__PURE__ */ jsx(EmoticonItem, {
+		...props,
+		entity: props.entity
+	}),
+	"@": (props) => /* @__PURE__ */ jsx(MentionItem, {
+		...props,
+		entity: props.entity
+	})
+};
+/**
+* Whether the suggestion listbox should be considered shown for a given source.
+* For command suggestions the list is suppressed when every command is disabled.
+* Shared with {@link TextareaComposer} so the textarea's `aria-controls`/
+* `aria-activedescendant` are only set while the listbox is actually rendered
+* (otherwise they would reference a non-existent element).
+*/
+var hasEnabledCommandSuggestions = ({ commands, type }) => type !== "commands" || commands.some((command) => command.enabled);
+var SuggestionList = ({ className, closeOnClickOutside = true, containerClassName, focusedItemIndex, listboxId, setFocusedItemIndex, suggestionItemComponents = defaultComponents }) => {
+	const { t } = useTranslationContext();
+	const generatedListboxId = useStableId();
+	const resolvedListboxId = listboxId ?? generatedListboxId;
+	const { announceInteraction } = useInteractionAnnouncements();
+	const { AutocompleteSuggestionItem = SuggestionListItem, ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();
+	const { textareaRef } = useMessageComposerContext();
+	const messageComposer = useMessageComposerController();
+	const commands = useMessageComposerCommands();
+	const { textComposer } = messageComposer;
+	const { selection, suggestions } = useStateStore(textComposer.state, textComposerStateSelector);
+	const { items } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
+	const commandSuggestionsEnabled = useMemo(() => hasEnabledCommandSuggestions({
+		commands,
+		type: suggestions?.searchSource.type
+	}), [commands, suggestions?.searchSource.type]);
+	const [container, setContainer] = useState(null);
+	const caretRectRef = useRef(null);
+	const virtualCaretReference = useMemo(() => ({ getBoundingClientRect: () => caretRectRef.current ?? new DOMRect() }), []);
+	const { refs, strategy, update, x, y } = usePopoverPosition({
+		allowFlip: false,
+		offset: 8,
+		placement: "top-start",
+		shiftOptions: { crossAxis: true }
+	});
+	const component = suggestions?.trigger ? suggestionItemComponents[suggestions?.trigger] : void 0;
+	const contextMenuItems = useMemo(() => {
+		if (!component) return [];
+		return (items ?? []).map((item, i) => {
+			const Item = ({ ...props }) => /* @__PURE__ */ createElement(AutocompleteSuggestionItem, {
+				...props,
+				"aria-selected": focusedItemIndex === i,
+				component,
+				focused: focusedItemIndex === i,
+				id: `${resolvedListboxId}-option-${i}`,
+				item,
+				key: item.id.toString(),
+				onMouseEnter: () => setFocusedItemIndex?.(i),
+				role: "option"
+			});
+			return Item;
+		});
+	}, [
+		items,
+		component,
+		focusedItemIndex,
+		resolvedListboxId,
+		setFocusedItemIndex,
+		AutocompleteSuggestionItem
+	]);
+	const ItemsWrapper = useCallback(({ children }) => /* @__PURE__ */ jsx(InfiniteScrollPaginator, {
+		contentProps: { role: "presentation" },
+		loadNextOnScrollToBottom: suggestions?.searchSource.search,
+		role: "presentation",
+		threshold: 100,
+		children
+	}), [suggestions?.searchSource.search]);
+	useEffect(() => {
+		if (!closeOnClickOutside || !suggestions || !container) return;
+		const handleClick = (event) => {
+			if (container.contains(event.target)) return;
+			textComposer.closeSuggestions();
+		};
+		document.addEventListener("click", handleClick);
+		return () => {
+			document.removeEventListener("click", handleClick);
+		};
+	}, [
+		closeOnClickOutside,
+		suggestions,
+		container,
+		textComposer
+	]);
+	useEffect(() => {
+		refs.setFloating(container);
+	}, [container, refs]);
+	useLayoutEffect(() => {
+		if (!suggestions || !update) return;
+		const updatePosition = () => {
+			const rect = getTextareaCaretRect(textareaRef.current ?? null, selection?.end);
+			if (!rect) {
+				caretRectRef.current = null;
+				refs.setReference(null);
+				return;
+			}
+			caretRectRef.current = rect;
+			virtualCaretReference.contextElement = textareaRef.current ?? void 0;
+			refs.setReference(virtualCaretReference);
+			update();
+		};
+		updatePosition();
+	}, [
+		container,
+		items?.length,
+		refs,
+		selection?.end,
+		suggestions,
+		textareaRef,
+		update,
+		virtualCaretReference
+	]);
+	const showSuggestionsList = !!(suggestions && items?.length && component && commandSuggestionsEnabled);
+	const suggestionMenuLabel = useMemo(() => {
+		switch (suggestions?.searchSource.type) {
+			case "commands": return t("textareaComposer.suggestionList.commandSuggestions.ariaLabel", "Command Suggestions");
+			case "emoji": return t("textareaComposer.suggestionList.emojiSuggestions.ariaLabel", "Emoji Suggestions");
+			case "mentions": return t("textareaComposer.suggestionList.mentionSuggestions.ariaLabel", "Mention Suggestions");
+			default: return t("textareaComposer.suggestionList.suggestions.ariaLabel", "Suggestions");
+		}
+	}, [suggestions?.searchSource.type, t]);
+	useEffect(() => {
+		if (!showSuggestionsList) return;
+		announceInteraction("suggestions.count", {
+			count: items?.length ?? 0,
+			suggestionsLabel: suggestionMenuLabel
+		});
+	}, [
+		announceInteraction,
+		items,
+		showSuggestionsList,
+		suggestionMenuLabel
+	]);
+	if (!showSuggestionsList) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": suggestionMenuLabel,
+		className: clsx("str-chat__suggestion-list-container", containerClassName),
+		id: resolvedListboxId,
+		ref: setContainer,
+		role: "listbox",
+		style: {
+			left: x ?? 0,
+			position: strategy,
+			top: y ?? 0,
+			visibility: x == null || y == null ? "hidden" : void 0,
+			zIndex: 1e3
+		},
+		children: /* @__PURE__ */ jsx(ContextMenuComponent, {
+			className: clsx("str-chat__suggestion-list", className),
+			Header: suggestions.searchSource.type === "commands" ? CommandsMenuHeader : void 0,
+			items: contextMenuItems,
+			ItemsWrapper,
+			menuClassName: suggestions.searchSource.type === "commands" ? CommandsMenuClassName : void 0,
+			role: "presentation"
+		})
+	});
+};
+//#endregion
+export { SuggestionList, defaultComponents, hasEnabledCommandSuggestions };
+
+//# sourceMappingURL=SuggestionList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionList.mjs","names":[],"sources":["../../../../../src/components/TextareaComposer/SuggestionList/SuggestionList.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { VirtualElement } from '@floating-ui/react';\nimport type { CommandItemProps } from './CommandItem';\nimport { CommandItem } from './CommandItem';\nimport type { EmoticonItemProps } from './EmoticonItem';\nimport { EmoticonItem } from './EmoticonItem';\nimport { MentionItem } from './MentionItem';\nimport type { SuggestionListItemComponentProps } from './SuggestionListItem';\nimport { SuggestionListItem as DefaultSuggestionListItem } from './SuggestionListItem';\nimport { useInteractionAnnouncements } from '../../Accessibility';\nimport { useComponentContext } from '../../../context/ComponentContext';\nimport { useMessageComposerContext } from '../../../context/MessageComposerContext';\nimport { useStateStore } from '../../../store';\nimport { useStableId } from '../../UtilityComponents/useStableId';\nimport { getTextareaCaretRect } from '../../../utils/getTextareaCaretRect';\nimport type { ContextMenuItemComponent, ContextMenuItemProps } from '../../Dialog';\nimport { ContextMenu } from '../../Dialog';\nimport { usePopoverPosition } from '../../Dialog/hooks/usePopoverPosition';\nimport { InfiniteScrollPaginator } from '../../InfiniteScrollPaginator/InfiniteScrollPaginator';\nimport {\n  useMessageComposerCommands,\n  useMessageComposerController,\n} from '../../MessageComposer/hooks';\nimport { useTranslationContext } from '../../../context';\nimport type {\n  MentionSuggestion,\n  SearchSourceState,\n  TextComposerState,\n  TextComposerSuggestion,\n} from 'stream-chat';\nimport {\n  CommandsMenuClassName,\n  CommandsMenuHeader,\n} from '../../MessageComposer/AttachmentSelector/CommandsMenu';\n\ntype SuggestionTrigger = '/' | ':' | '@' | string;\n\nexport type SuggestionListProps = Partial<{\n  suggestionItemComponents: Record<\n    SuggestionTrigger,\n    React.ComponentType<SuggestionListItemComponentProps>\n  >;\n  className?: string;\n  closeOnClickOutside?: boolean;\n  containerClassName?: string;\n  focusedItemIndex: number;\n  /**\n   * Id applied to the listbox element. The controlling combobox (the composer textarea)\n   * points its `aria-controls`/`aria-activedescendant` at this id and at the derived\n   * per-option ids (`{listboxId}-option-{index}`), so the value must be shared between\n   * the textarea and this list. When omitted, a stable id is generated locally.\n   */\n  listboxId?: string;\n  setFocusedItemIndex: (index: number) => void;\n}>;\n\nconst textComposerStateSelector = ({ selection, suggestions }: TextComposerState) => ({\n  selection,\n  suggestions,\n});\n\nconst searchSourceStateSelector = (\n  nextValue: SearchSourceState<TextComposerSuggestion>,\n): { items: TextComposerSuggestion[] } => ({\n  items: nextValue.items ?? [],\n});\n\nexport const defaultComponents: Record<\n  SuggestionTrigger,\n  React.ComponentType<SuggestionListItemComponentProps>\n> = {\n  '/': (props: SuggestionListItemComponentProps) => (\n    <CommandItem {...props} entity={props.entity as CommandItemProps['entity']} />\n  ),\n  ':': (props: SuggestionListItemComponentProps) => (\n    <EmoticonItem {...props} entity={props.entity as EmoticonItemProps['entity']} />\n  ),\n  '@': (props: SuggestionListItemComponentProps) => (\n    <MentionItem {...props} entity={props.entity as MentionSuggestion} />\n  ),\n} as const;\n\n/**\n * Whether the suggestion listbox should be considered shown for a given source.\n * For command suggestions the list is suppressed when every command is disabled.\n * Shared with {@link TextareaComposer} so the textarea's `aria-controls`/\n * `aria-activedescendant` are only set while the listbox is actually rendered\n * (otherwise they would reference a non-existent element).\n */\nexport const hasEnabledCommandSuggestions = ({\n  commands,\n  type,\n}: {\n  commands: Array<{ enabled?: boolean }>;\n  type?: string;\n}) => type !== 'commands' || commands.some((command) => command.enabled);\n\nexport const SuggestionList = ({\n  className,\n  closeOnClickOutside = true,\n  containerClassName,\n  focusedItemIndex,\n  listboxId,\n  setFocusedItemIndex,\n  suggestionItemComponents = defaultComponents,\n}: SuggestionListProps) => {\n  const { t } = useTranslationContext();\n  const generatedListboxId = useStableId();\n  const resolvedListboxId = listboxId ?? generatedListboxId;\n  const { announceInteraction } = useInteractionAnnouncements();\n  const {\n    AutocompleteSuggestionItem = DefaultSuggestionListItem,\n    ContextMenu: ContextMenuComponent = ContextMenu,\n  } = useComponentContext();\n  const { textareaRef } = useMessageComposerContext();\n  const messageComposer = useMessageComposerController();\n  const commands = useMessageComposerCommands();\n  const { textComposer } = messageComposer;\n  const { selection, suggestions } = useStateStore(\n    textComposer.state,\n    textComposerStateSelector,\n  );\n  const { items } =\n    useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};\n  const commandSuggestionsEnabled = useMemo(\n    () =>\n      hasEnabledCommandSuggestions({ commands, type: suggestions?.searchSource.type }),\n    [commands, suggestions?.searchSource.type],\n  );\n\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const caretRectRef = useRef<DOMRect | null>(null);\n  const virtualCaretReference = useMemo<VirtualElement>(\n    () => ({\n      getBoundingClientRect: () => caretRectRef.current ?? new DOMRect(),\n    }),\n    [],\n  );\n\n  const { refs, strategy, update, x, y } = usePopoverPosition({\n    allowFlip: false,\n    offset: 8,\n    placement: 'top-start',\n    // For top placements, the cross-axis is X; we need this to allow flipping the list to the right when it overflows the right edge.\n    shiftOptions: { crossAxis: true },\n  });\n\n  const component = suggestions?.trigger\n    ? suggestionItemComponents[suggestions?.trigger]\n    : undefined;\n\n  const contextMenuItems = useMemo<ContextMenuItemComponent[]>(() => {\n    if (!component) return [];\n    // Render in the search source's own order — the SDK already orders results (commands by\n    // prefix-match relevance, then alphabetically), so we neither re-sort here nor in the composer's\n    // Enter handler; both index into the same `searchSource.items`, keeping the highlighted option\n    // and the inserted one in sync.\n    return (items ?? []).map((item, i) => {\n      const Item: ContextMenuItemComponent = ({ ...props }: ContextMenuItemProps) => (\n        <AutocompleteSuggestionItem\n          {...props}\n          aria-selected={focusedItemIndex === i}\n          component={component}\n          focused={focusedItemIndex === i}\n          id={`${resolvedListboxId}-option-${i}`}\n          item={item}\n          key={item.id.toString()}\n          onMouseEnter={() => setFocusedItemIndex?.(i)}\n          role='option'\n        />\n      );\n      return Item;\n    });\n  }, [\n    items,\n    component,\n    focusedItemIndex,\n    resolvedListboxId,\n    setFocusedItemIndex,\n    AutocompleteSuggestionItem,\n  ]);\n\n  const ItemsWrapper = useCallback(\n    ({ children }: React.ComponentProps<'div'>) => (\n      <InfiniteScrollPaginator\n        contentProps={{ role: 'presentation' }}\n        loadNextOnScrollToBottom={suggestions?.searchSource.search}\n        role='presentation'\n        threshold={100}\n      >\n        {children}\n      </InfiniteScrollPaginator>\n    ),\n    [suggestions?.searchSource.search],\n  );\n\n  useEffect(() => {\n    if (!closeOnClickOutside || !suggestions || !container) return;\n    const handleClick = (event: MouseEvent) => {\n      if (container.contains(event.target as Node)) return;\n      textComposer.closeSuggestions();\n    };\n    document.addEventListener('click', handleClick);\n    return () => {\n      document.removeEventListener('click', handleClick);\n    };\n  }, [closeOnClickOutside, suggestions, container, textComposer]);\n\n  useEffect(() => {\n    refs.setFloating(container);\n  }, [container, refs]);\n\n  useLayoutEffect(() => {\n    if (!suggestions || !update) return;\n    const updatePosition = () => {\n      const rect = getTextareaCaretRect(textareaRef.current ?? null, selection?.end);\n      if (!rect) {\n        caretRectRef.current = null;\n        refs.setReference(null);\n        return;\n      }\n      caretRectRef.current = rect;\n      virtualCaretReference.contextElement = textareaRef.current ?? undefined;\n      refs.setReference(virtualCaretReference);\n      update();\n    };\n\n    updatePosition();\n  }, [\n    container,\n    items?.length,\n    refs,\n    selection?.end,\n    suggestions,\n    textareaRef,\n    update,\n    virtualCaretReference,\n  ]);\n\n  const showSuggestionsList = !!(\n    suggestions &&\n    items?.length &&\n    component &&\n    commandSuggestionsEnabled\n  );\n\n  // A single localized label per suggestion type, used BOTH as the listbox's aria-label and\n  // in the count announcement (\"5 Command Suggestions\") — one source of truth, no second key.\n  // NOTE: the type strings must match the SDK search-source `type` values exactly — `commands`\n  // and `mentions` are plural, but the emoji source (EmojiSearchSource) uses the singular\n  // `emoji`. A mismatch silently falls through to the generic \"Suggestions\" label.\n  const suggestionMenuLabel = useMemo(() => {\n    switch (suggestions?.searchSource.type) {\n      case 'commands':\n        return t(\n          'textareaComposer.suggestionList.commandSuggestions.ariaLabel',\n          'Command Suggestions',\n        );\n      case 'emoji':\n        return t(\n          'textareaComposer.suggestionList.emojiSuggestions.ariaLabel',\n          'Emoji Suggestions',\n        );\n      case 'mentions':\n        return t(\n          'textareaComposer.suggestionList.mentionSuggestions.ariaLabel',\n          'Mention Suggestions',\n        );\n      default:\n        return t('textareaComposer.suggestionList.suggestions.ariaLabel', 'Suggestions');\n    }\n  }, [suggestions?.searchSource.type, t]);\n\n  // Announce the visible result count to assistive technology whenever the menu appears or the\n  // result set changes as the query filters. We depend on `items` (not just its length) so the\n  // count re-announces on every genuine re-filter even when the number is unchanged — e.g. emoji\n  // results are capped at a constant N, so without this the user would type and hear nothing\n  // after the first announcement. `announceInteraction('suggestions.count')` debounces (300ms),\n  // so continuous typing collapses to a single announcement once the user pauses; it no longer\n  // dedupes unchanged values (that policy moved here, where \"did the results actually change?\"\n  // is knowable). We deliberately do not announce while the list is hidden (count 0 / closed).\n  useEffect(() => {\n    if (!showSuggestionsList) return;\n    announceInteraction('suggestions.count', {\n      count: items?.length ?? 0,\n      suggestionsLabel: suggestionMenuLabel,\n    });\n  }, [announceInteraction, items, showSuggestionsList, suggestionMenuLabel]);\n\n  if (!showSuggestionsList) return null;\n\n  return (\n    <div\n      aria-label={suggestionMenuLabel}\n      className={clsx('str-chat__suggestion-list-container', containerClassName)}\n      id={resolvedListboxId}\n      ref={setContainer}\n      role='listbox'\n      style={{\n        left: x ?? 0,\n        position: strategy,\n        top: y ?? 0,\n        visibility: x == null || y == null ? 'hidden' : undefined,\n        zIndex: 1000,\n      }}\n    >\n      <ContextMenuComponent\n        className={clsx('str-chat__suggestion-list', className)}\n        Header={\n          suggestions.searchSource.type === 'commands' ? CommandsMenuHeader : undefined\n        }\n        items={contextMenuItems}\n        ItemsWrapper={ItemsWrapper}\n        menuClassName={\n          suggestions.searchSource.type === 'commands' ? CommandsMenuClassName : undefined\n        }\n        role='presentation'\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useCallback, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TextareaComposer/SuggestionList/SuggestionListItem.tsx
+var SuggestionListItem = ({ className, component: Component, focused, item, onClick, onKeyDown, onMouseEnter, ...restProps }) => {
+	const { textComposer } = useMessageComposerController();
+	const { textareaRef } = useMessageComposerContext();
+	const componentRef = useRef(null);
+	const handleSelect = useCallback(() => {
+		textComposer.handleSelect(item);
+		textareaRef.current?.focus();
+	}, [
+		item,
+		textareaRef,
+		textComposer
+	]);
+	useLayoutEffect(() => {
+		if (!focused) return;
+		componentRef.current?.scrollIntoView({
+			behavior: "instant",
+			block: "nearest"
+		});
+	}, [focused]);
+	return /* @__PURE__ */ jsx(Component, {
+		...restProps,
+		className: clsx("str-chat__suggestion-list-item", className, { "str-chat__suggestion-list-item--selected": focused }),
+		entity: item,
+		focused,
+		onClick: (e) => {
+			handleSelect();
+			onClick?.(e);
+		},
+		onKeyDown: (event) => {
+			if (event.key === "Enter") handleSelect();
+			onKeyDown?.(event);
+		},
+		onMouseEnter,
+		ref: componentRef
+	});
+};
+//#endregion
+export { SuggestionListItem };
+
+//# sourceMappingURL=SuggestionListItem.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionListItem.mjs","names":[],"sources":["../../../../../src/components/TextareaComposer/SuggestionList/SuggestionListItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { type ComponentProps, useRef } from 'react';\nimport React, { useCallback, useLayoutEffect } from 'react';\nimport { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController';\nimport type { TextComposerSuggestion } from 'stream-chat';\nimport type { CommandItemProps } from './CommandItem';\nimport type { EmoticonItemProps } from './EmoticonItem';\nimport type { MentionItemProps } from './MentionItem';\nimport { useMessageComposerContext } from '../../../context';\n\nexport type DefaultSuggestionListItemEntity =\n  | MentionItemProps['entity']\n  | CommandItemProps['entity']\n  | EmoticonItemProps['entity'];\n\nexport type SuggestionListItemComponentProps = {\n  entity: DefaultSuggestionListItemEntity | unknown;\n  focused: boolean;\n} & ComponentProps<'button'>;\n\nexport type SuggestionItemProps = ComponentProps<'button'> & {\n  component: React.ComponentType<SuggestionListItemComponentProps>;\n  item: TextComposerSuggestion;\n  focused: boolean;\n};\n\nexport const SuggestionListItem = ({\n  className,\n  component: Component,\n  focused,\n  item,\n  onClick,\n  onKeyDown,\n  onMouseEnter,\n  ...restProps\n}: SuggestionItemProps) => {\n  const { textComposer } = useMessageComposerController();\n  const { textareaRef } = useMessageComposerContext();\n  const componentRef = useRef<HTMLButtonElement | null>(null);\n\n  const handleSelect = useCallback(() => {\n    textComposer.handleSelect(item);\n    textareaRef.current?.focus();\n  }, [item, textareaRef, textComposer]);\n\n  useLayoutEffect(() => {\n    if (!focused) return;\n    componentRef.current?.scrollIntoView({ behavior: 'instant', block: 'nearest' });\n  }, [focused]);\n\n  return (\n    <Component\n      {...restProps}\n      className={clsx('str-chat__suggestion-list-item', className, {\n        'str-chat__suggestion-list-item--selected': focused,\n      })}\n      entity={item}\n      focused={focused}\n      onClick={(e) => {\n        handleSelect();\n        onClick?.(e);\n      }}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter') handleSelect();\n        onKeyDown?.(event);\n      }}\n      onMouseEnter={onMouseEnter}\n      ref={componentRef}\n    />\n  );\n};\n"],"mappings":";;;;;;AA0BA,IAAa,sBAAsB,EACjC,WACA,WAAW,WACX,SACA,MACA,SACA,WACA,cACA,GAAG,gBACsB;CACzB,MAAM,EAAE,iBAAiB,6BAA6B;CACtD,MAAM,EAAE,gBAAgB,0BAA0B;CAClD,MAAM,eAAe,OAAiC,IAAI;CAE1D,MAAM,eAAe,kBAAkB;EACrC,aAAa,aAAa,IAAI;EAC9B,YAAY,SAAS,MAAM;CAC7B,GAAG;EAAC;EAAM;EAAa;CAAY,CAAC;CAEpC,sBAAsB;EACpB,IAAI,CAAC,SAAS;EACd,aAAa,SAAS,eAAe;GAAE,UAAU;GAAW,OAAO;EAAU,CAAC;CAChF,GAAG,CAAC,OAAO,CAAC;CAEZ,OACE,oBAAC,WAAD;EACE,GAAI;EACJ,WAAW,KAAK,kCAAkC,WAAW,EAC3D,4CAA4C,QAC9C,CAAC;EACD,QAAQ;EACC;EACT,UAAU,MAAM;GACd,aAAa;GACb,UAAU,CAAC;EACb;EACA,YAAY,UAAU;GACpB,IAAI,MAAM,QAAQ,SAAS,aAAa;GACxC,YAAY,KAAK;EACnB;EACc;EACd,KAAK;CACN,CAAA;AAEL"}

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

@@ -0,0 +1,30 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TextareaComposer/SuggestionList/TokenizedSuggestionParts.tsx
+var HTML_SPACE = "\xA0";
+var isWhitespace = (char) => char.trim() === "";
+var replaceBoundaryWhitespaceWithHTMLSpace = (part) => {
+	if (!part) return part;
+	let startIndex = 0;
+	while (startIndex < part.length && isWhitespace(part[startIndex])) startIndex += 1;
+	if (startIndex === part.length) return HTML_SPACE;
+	let endIndex = part.length - 1;
+	while (endIndex >= startIndex && isWhitespace(part[endIndex])) endIndex -= 1;
+	return `${startIndex > 0 ? HTML_SPACE : ""}${part.slice(startIndex, endIndex + 1)}${endIndex < part.length - 1 ? HTML_SPACE : ""}`;
+};
+var TokenizedSuggestionParts = ({ tokenizedDisplayName }) => tokenizedDisplayName.parts.map((part, i) => {
+	const matches = part.toLowerCase() === tokenizedDisplayName.token;
+	const partWithHTMLSpacesAround = replaceBoundaryWhitespaceWithHTMLSpace(part);
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx({
+			"str-chat__emoji-item-part": !matches,
+			"str-chat__suggestion-item-part--match": matches
+		}),
+		children: partWithHTMLSpacesAround
+	}, `part-${i}`);
+});
+//#endregion
+export { TokenizedSuggestionParts };
+
+//# sourceMappingURL=TokenizedSuggestionParts.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenizedSuggestionParts.mjs","names":[],"sources":["../../../../../src/components/TextareaComposer/SuggestionList/TokenizedSuggestionParts.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\n\nexport type TokenizedSuggestionDisplayName = {\n  token: string;\n  parts: string[];\n};\n\nexport type TokenizedSuggestionPartsProps = {\n  tokenizedDisplayName: TokenizedSuggestionDisplayName;\n};\n\nconst HTML_SPACE = '\\u00A0';\n\nconst isWhitespace = (char: string) => char.trim() === '';\n\nconst replaceBoundaryWhitespaceWithHTMLSpace = (part: string) => {\n  if (!part) return part;\n\n  let startIndex = 0;\n  while (startIndex < part.length && isWhitespace(part[startIndex])) {\n    startIndex += 1;\n  }\n\n  if (startIndex === part.length) return HTML_SPACE;\n\n  let endIndex = part.length - 1;\n  while (endIndex >= startIndex && isWhitespace(part[endIndex])) {\n    endIndex -= 1;\n  }\n\n  return `${startIndex > 0 ? HTML_SPACE : ''}${part.slice(startIndex, endIndex + 1)}${\n    endIndex < part.length - 1 ? HTML_SPACE : ''\n  }`;\n};\n\nexport const TokenizedSuggestionParts = ({\n  tokenizedDisplayName,\n}: TokenizedSuggestionPartsProps) =>\n  tokenizedDisplayName.parts.map((part, i) => {\n    const matches = part.toLowerCase() === tokenizedDisplayName.token;\n    const partWithHTMLSpacesAround = replaceBoundaryWhitespaceWithHTMLSpace(part);\n\n    return (\n      <span\n        className={clsx({\n          'str-chat__emoji-item-part': !matches,\n          'str-chat__suggestion-item-part--match': matches,\n        })}\n        key={`part-${i}`}\n      >\n        {partWithHTMLSpacesAround}\n      </span>\n    );\n  });\n"],"mappings":";;;;AAYA,IAAM,aAAa;AAEnB,IAAM,gBAAgB,SAAiB,KAAK,KAAK,MAAM;AAEvD,IAAM,0CAA0C,SAAiB;CAC/D,IAAI,CAAC,MAAM,OAAO;CAElB,IAAI,aAAa;CACjB,OAAO,aAAa,KAAK,UAAU,aAAa,KAAK,WAAW,GAC9D,cAAc;CAGhB,IAAI,eAAe,KAAK,QAAQ,OAAO;CAEvC,IAAI,WAAW,KAAK,SAAS;CAC7B,OAAO,YAAY,cAAc,aAAa,KAAK,SAAS,GAC1D,YAAY;CAGd,OAAO,GAAG,aAAa,IAAI,aAAa,KAAK,KAAK,MAAM,YAAY,WAAW,CAAC,IAC9E,WAAW,KAAK,SAAS,IAAI,aAAa;AAE9C;AAEA,IAAa,4BAA4B,EACvC,2BAEA,qBAAqB,MAAM,KAAK,MAAM,MAAM;CAC1C,MAAM,UAAU,KAAK,YAAY,MAAM,qBAAqB;CAC5D,MAAM,2BAA2B,uCAAuC,IAAI;CAE5E,OACE,oBAAC,QAAD;EACE,WAAW,KAAK;GACd,6BAA6B,CAAC;GAC9B,yCAAyC;EAC3C,CAAC;YAGA;CACG,GAHC,QAAQ,GAGT;AAEV,CAAC"}