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

package/dist/es/components/Threads/ThreadList/utils.a11y.mjs

@@ -0,0 +1,91 @@
+import { getDateString } from "../../../i18n/utils.mjs";
+import { activeLabelPart, composeAccessibleLabel, unreadCountLabelPart } from "../../../a11y/accessibleLabel.mjs";
+import { convertTimestampToDate } from "stream-chat";
+//#region src/components/Threads/ThreadList/utils.a11y.ts
+/**
+* The default, named label parts. Each is independently overridable via
+* {@link ThreadListItemLabelConfig.parts}. The active (currently open) state is announced here (not
+* left to the row's `aria-selected` alone, which is not reliably spoken across screen readers for an
+* option with a custom name); `aria-selected` is kept on the active row for listbox semantics.
+*/
+var defaultThreadListItemLabelParts = {
+	active: activeLabelPart,
+	name: ({ displayTitle, t }) => displayTitle ? t("threadList.chat.ariaLabel", "Chat: {{ channelName }}", { channelName: displayTitle }) : void 0,
+	parentMessage: ({ parentMessagePreview, parentMessageSender, t }) => {
+		if (!parentMessagePreview) return void 0;
+		return t("threadList.thread.ariaLabel", "Thread: {{ messagePreview }}", { messagePreview: parentMessageSender ? `${parentMessageSender}: ${parentMessagePreview}` : parentMessagePreview });
+	},
+	replyCount: ({ replyCount, t }) => typeof replyCount === "number" && replyCount > 0 ? t("common.replyCount.label", {
+		count: replyCount,
+		defaultValue_one: "1 reply",
+		defaultValue_other: "{{ count }} replies"
+	}) : void 0,
+	time: ({ latestReply, t, tDateTimeParser }) => {
+		const createdAt = latestReply?.created_at;
+		if (createdAt == null) return void 0;
+		const when = getDateString({
+			messageCreatedAt: convertTimestampToDate(createdAt)?.toISOString(),
+			t,
+			tDateTimeParser,
+			timestampTranslationKey: "timestamp.ChannelPreviewTimestamp"
+		});
+		return when ? t("common.lastActivity.ariaLabel", "Last activity: {{ time }}", { time: String(when) }) : void 0;
+	},
+	unreadCount: unreadCountLabelPart
+};
+/** Default order the parts are assembled in (reading order). */
+var DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER = [
+	"name",
+	"active",
+	"unreadCount",
+	"parentMessage",
+	"replyCount",
+	"time"
+];
+/**
+* Composes a single, coherent accessible name for a thread list row from named parts. The default
+* reading order is name (channel) → active → unread → parent message → reply count → last activity.
+*
+* ## Customizing the label
+*
+* The label is generated by `ThreadListItemUI`, which accepts an `accessibleLabelConfig` prop. To
+* customize it, supply your own `ThreadListItemUI` through `ComponentContext` (the same way the
+* component is overridden) and forward the config — no new plumbing:
+*
+* ```tsx
+* const MyThreadListItemUI = (props) => (
+*   <DefaultThreadListItemUI {...props} accessibleLabelConfig={accessibleLabelConfig} />
+* );
+* // <ComponentProvider value={{ ThreadListItemUI: MyThreadListItemUI }}> … </ComponentProvider>
+* ```
+*
+* ### Adding custom parts
+*
+* - {@link ThreadListItemLabelConfig.parts} is merged over {@link defaultThreadListItemLabelParts},
+*   so a new key is *added* and a same-named key *overrides* the default.
+* - A part returns its segment string, or `undefined`/`''` to be omitted.
+* - {@link ThreadListItemLabelConfig.order} decides which parts are included AND their sequence —
+*   **a part not listed in `order` is never rendered**. Spread
+*   {@link DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER} to keep the defaults and insert your own.
+* - Each part receives {@link ThreadListItemLabelData}. Parts call `t`, so provide your own i18n keys
+*   (or return plain strings).
+*
+* ```tsx
+* const accessibleLabelConfig: ThreadListItemLabelConfig = {
+*   parts: {
+*     participants: ({ participantCount, t }) =>
+*       participantCount ? t('{{ count }} participants', { count: participantCount }) : undefined,
+*   },
+*   order: ['name', 'participants', ...DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER.slice(1)],
+* };
+* ```
+*
+* For full control, set {@link ThreadListItemLabelConfig.build} (return the entire string), or write
+* a custom `ThreadListItemUI` that calls this function directly — importing
+* {@link defaultThreadListItemLabelParts} to reuse the built-ins.
+*/
+var composeThreadListItemAccessibleLabel = (data, config = {}) => composeAccessibleLabel(data, defaultThreadListItemLabelParts, DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER, config);
+//#endregion
+export { DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER, composeThreadListItemAccessibleLabel, defaultThreadListItemLabelParts };
+
+//# sourceMappingURL=utils.a11y.mjs.map

package/dist/es/components/Threads/ThreadList/utils.a11y.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.a11y.mjs","names":[],"sources":["../../../../../src/components/Threads/ThreadList/utils.a11y.ts"],"sourcesContent":["import type { Channel, LocalMessage, StreamChat } from 'stream-chat';\n\nimport type { ChatContextValue } from '../../../context';\nimport type { TranslationContextValue } from '../../../context/TranslationContext';\nimport {\n  type AccessibleLabelConfig,\n  type AccessibleLabelPart,\n  activeLabelPart,\n  composeAccessibleLabel,\n  unreadCountLabelPart,\n} from '../../../a11y/accessibleLabel';\nimport { getDateString } from '../../../i18n/utils';\nimport { convertTimestampToDate } from 'stream-chat';\n\n/**\n * Everything a label part needs. Gathered by `ThreadListItemUI` from the thread state + contexts and\n * handed to each {@link ThreadListItemLabelPart}.\n */\nexport type ThreadListItemLabelData = {\n  /** Whether the row is the active (currently open) thread. */\n  active?: boolean;\n  /** The channel the thread belongs to. */\n  channel?: Channel;\n  /** Client, used to detect whether a message is the current user's own. */\n  client: StreamChat;\n  /** The channel's display name (the thread row's title). */\n  displayTitle?: string;\n  isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated'];\n  /** The most recent reply in the thread. */\n  latestReply?: LocalMessage;\n  /** The message the thread is attached to (its subject); available for custom parts. */\n  parentMessage?: LocalMessage;\n  /**\n   * The parent message's display preview text — the SAME string the visible subtitle shows (from\n   * `useLatestMessagePreview`, covering text/attachment/poll/etc.). Used by the default\n   * `parentMessage` part so the announcement matches what is shown.\n   */\n  parentMessagePreview?: string;\n  /** The parent message's sender prefix, when the visible preview shows one (e.g. \"You\", a name). */\n  parentMessageSender?: string;\n  /** Number of participants in the thread. */\n  participantCount?: number;\n  /** Number of replies in the thread. */\n  replyCount?: number;\n  t: TranslationContextValue['t'];\n  tDateTimeParser: TranslationContextValue['tDateTimeParser'];\n  /** The current user's unread reply count for the thread. */\n  unreadCount?: number;\n  userLanguage?: TranslationContextValue['userLanguage'];\n};\n\n/** Produces one segment of the accessible name; return `undefined`/empty to omit it. */\nexport type ThreadListItemLabelPart = AccessibleLabelPart<ThreadListItemLabelData>;\n\n/**\n * The default, named label parts. Each is independently overridable via\n * {@link ThreadListItemLabelConfig.parts}. The active (currently open) state is announced here (not\n * left to the row's `aria-selected` alone, which is not reliably spoken across screen readers for an\n * option with a custom name); `aria-selected` is kept on the active row for listbox semantics.\n */\nexport const defaultThreadListItemLabelParts = {\n  active: activeLabelPart,\n  name: ({ displayTitle, t }) =>\n    displayTitle\n      ? t('threadList.chat.ariaLabel', 'Chat: {{ channelName }}', {\n          channelName: displayTitle,\n        })\n      : undefined,\n  // The message the thread is about (shown as the row's subtitle); same preview the subtitle shows.\n  parentMessage: ({ parentMessagePreview, parentMessageSender, t }) => {\n    if (!parentMessagePreview) return undefined;\n    const preview = parentMessageSender\n      ? `${parentMessageSender}: ${parentMessagePreview}`\n      : parentMessagePreview;\n    return t('threadList.thread.ariaLabel', 'Thread: {{ messagePreview }}', {\n      messagePreview: preview,\n    });\n  },\n  replyCount: ({ replyCount, t }) =>\n    typeof replyCount === 'number' && replyCount > 0\n      ? t('common.replyCount.label', {\n          count: replyCount,\n          defaultValue_one: '1 reply',\n          defaultValue_other: '{{ count }} replies',\n        })\n      : undefined,\n  time: ({ latestReply, t, tDateTimeParser }) => {\n    const createdAt = latestReply?.created_at;\n    if (createdAt == null) return undefined;\n    const when = getDateString({\n      messageCreatedAt: convertTimestampToDate(createdAt)?.toISOString(),\n      t,\n      tDateTimeParser,\n      timestampTranslationKey: 'timestamp.ChannelPreviewTimestamp',\n    });\n    return when\n      ? t('common.lastActivity.ariaLabel', 'Last activity: {{ time }}', {\n          time: String(when),\n        })\n      : undefined;\n  },\n  unreadCount: unreadCountLabelPart,\n} satisfies Record<string, ThreadListItemLabelPart>;\n\n/** Default order the parts are assembled in (reading order). */\nexport const DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER = [\n  'name',\n  'active',\n  'unreadCount',\n  'parentMessage',\n  'replyCount',\n  'time',\n] as const;\n\nexport type ThreadListItemLabelConfig = AccessibleLabelConfig<ThreadListItemLabelData>;\n\n/**\n * Composes a single, coherent accessible name for a thread list row from named parts. The default\n * reading order is name (channel) → active → unread → parent message → reply count → last activity.\n *\n * ## Customizing the label\n *\n * The label is generated by `ThreadListItemUI`, which accepts an `accessibleLabelConfig` prop. To\n * customize it, supply your own `ThreadListItemUI` through `ComponentContext` (the same way the\n * component is overridden) and forward the config — no new plumbing:\n *\n * ```tsx\n * const MyThreadListItemUI = (props) => (\n *   <DefaultThreadListItemUI {...props} accessibleLabelConfig={accessibleLabelConfig} />\n * );\n * // <ComponentProvider value={{ ThreadListItemUI: MyThreadListItemUI }}> … </ComponentProvider>\n * ```\n *\n * ### Adding custom parts\n *\n * - {@link ThreadListItemLabelConfig.parts} is merged over {@link defaultThreadListItemLabelParts},\n *   so a new key is *added* and a same-named key *overrides* the default.\n * - A part returns its segment string, or `undefined`/`''` to be omitted.\n * - {@link ThreadListItemLabelConfig.order} decides which parts are included AND their sequence —\n *   **a part not listed in `order` is never rendered**. Spread\n *   {@link DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER} to keep the defaults and insert your own.\n * - Each part receives {@link ThreadListItemLabelData}. Parts call `t`, so provide your own i18n keys\n *   (or return plain strings).\n *\n * ```tsx\n * const accessibleLabelConfig: ThreadListItemLabelConfig = {\n *   parts: {\n *     participants: ({ participantCount, t }) =>\n *       participantCount ? t('{{ count }} participants', { count: participantCount }) : undefined,\n *   },\n *   order: ['name', 'participants', ...DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER.slice(1)],\n * };\n * ```\n *\n * For full control, set {@link ThreadListItemLabelConfig.build} (return the entire string), or write\n * a custom `ThreadListItemUI` that calls this function directly — importing\n * {@link defaultThreadListItemLabelParts} to reuse the built-ins.\n */\nexport const composeThreadListItemAccessibleLabel = (\n  data: ThreadListItemLabelData,\n  config: ThreadListItemLabelConfig = {},\n): string =>\n  composeAccessibleLabel(\n    data,\n    defaultThreadListItemLabelParts,\n    DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER,\n    config,\n  );\n"],"mappings":";;;;;;;;;;AA4DA,IAAa,kCAAkC;CAC7C,QAAQ;CACR,OAAO,EAAE,cAAc,QACrB,eACI,EAAE,6BAA6B,2BAA2B,EACxD,aAAa,aACf,CAAC,IACD,KAAA;CAEN,gBAAgB,EAAE,sBAAsB,qBAAqB,QAAQ;EACnE,IAAI,CAAC,sBAAsB,OAAO,KAAA;EAIlC,OAAO,EAAE,+BAA+B,gCAAgC,EACtE,gBAJc,sBACZ,GAAG,oBAAoB,IAAI,yBAC3B,qBAGJ,CAAC;CACH;CACA,aAAa,EAAE,YAAY,QACzB,OAAO,eAAe,YAAY,aAAa,IAC3C,EAAE,2BAA2B;EAC3B,OAAO;EACP,kBAAkB;EAClB,oBAAoB;CACtB,CAAC,IACD,KAAA;CACN,OAAO,EAAE,aAAa,GAAG,sBAAsB;EAC7C,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,MAAM,OAAO,KAAA;EAC9B,MAAM,OAAO,cAAc;GACzB,kBAAkB,uBAAuB,SAAS,CAAC,EAAE,YAAY;GACjE;GACA;GACA,yBAAyB;EAC3B,CAAC;EACD,OAAO,OACH,EAAE,iCAAiC,6BAA6B,EAC9D,MAAM,OAAO,IAAI,EACnB,CAAC,IACD,KAAA;CACN;CACA,aAAa;AACf;;AAGA,IAAa,uCAAuC;CAClD;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,IAAa,wCACX,MACA,SAAoC,CAAC,MAErC,uBACE,MACA,iCACA,sCACA,MACF"}

package/dist/es/components/Threads/UnreadCountBadge.mjs

@@ -0,0 +1,16 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Threads/UnreadCountBadge.tsx
+var UnreadCountBadge = ({ children, count, position }) => /* @__PURE__ */ jsxs("div", {
+	className: "str-chat__unread-count-badge-container",
+	children: [children, count > 0 && /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: clsx("str-chat__unread-count-badge", position && `str-chat__unread-count-badge--${position}`),
+		children: count
+	})]
+});
+//#endregion
+export { UnreadCountBadge };
+
+//# sourceMappingURL=UnreadCountBadge.mjs.map

package/dist/es/components/Threads/UnreadCountBadge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadCountBadge.mjs","names":[],"sources":["../../../../src/components/Threads/UnreadCountBadge.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nexport const UnreadCountBadge = ({\n  children,\n  count,\n  position,\n}: PropsWithChildren<{\n  count: number;\n  position?: 'top-right' | 'bottom-right' | 'bottom-left' | 'top-left';\n}>) => (\n  // The wrapper stays in the a11y tree so arbitrary `children` remain exposed. Only the numeric\n  // badge is hidden: it duplicates a count the consumer must already convey via an accessible name\n  // (e.g. the threads selector button's aria-label includes the unread count), so exposing it would\n  // announce the number twice.\n  <div className='str-chat__unread-count-badge-container'>\n    {children}\n    {count > 0 && (\n      <div\n        aria-hidden='true'\n        className={clsx(\n          'str-chat__unread-count-badge',\n          position && `str-chat__unread-count-badge--${position}`,\n        )}\n      >\n        {count}\n      </div>\n    )}\n  </div>\n);\n"],"mappings":";;;;AAIA,IAAa,oBAAoB,EAC/B,UACA,OACA,eASA,qBAAC,OAAD;CAAK,WAAU;WAAf,CACG,UACA,QAAQ,KACP,oBAAC,OAAD;EACE,eAAY;EACZ,WAAW,KACT,gCACA,YAAY,iCAAiC,UAC/C;YAEC;CACE,CAAA,CAEJ"}

package/dist/es/components/Threads/hooks/useCloseThread.mjs

@@ -0,0 +1,30 @@
+import { useThreadContext } from "../ThreadContext.mjs";
+import { useWorkspaceNavigation, useWorkspacePanel } from "../../../context/WorkspaceNavigationContext.mjs";
+import { useCallback } from "react";
+//#region src/components/Threads/hooks/useCloseThread.ts
+/**
+* Closes the thread in context: releases the slot it occupies and drops the thread's own claim on
+* the client. Components that close a thread (`ThreadHeader`, custom headers) call this rather
+* than receiving a handler, so they work wherever a `ThreadProvider` is in scope. The panel the
+* caller renders in is passed along, so the right one closes when the thread is open in several.
+*/
+var useCloseThread = () => {
+	const { closeThread } = useWorkspaceNavigation();
+	const panel = useWorkspacePanel();
+	const thread = useThreadContext();
+	return useCallback((options) => {
+		closeThread(thread?.id, {
+			panel,
+			...options
+		});
+		thread?.deactivate();
+	}, [
+		closeThread,
+		panel,
+		thread
+	]);
+};
+//#endregion
+export { useCloseThread };
+
+//# sourceMappingURL=useCloseThread.mjs.map

package/dist/es/components/Threads/hooks/useCloseThread.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseThread.mjs","names":[],"sources":["../../../../../src/components/Threads/hooks/useCloseThread.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { useThreadContext } from '../ThreadContext';\nimport { useWorkspaceNavigation, useWorkspacePanel } from '../../../context';\nimport type { WorkspaceNavigationOptions } from '../../../context';\n\n/**\n * Closes the thread in context: releases the slot it occupies and drops the thread's own claim on\n * the client. Components that close a thread (`ThreadHeader`, custom headers) call this rather\n * than receiving a handler, so they work wherever a `ThreadProvider` is in scope. The panel the\n * caller renders in is passed along, so the right one closes when the thread is open in several.\n */\nexport const useCloseThread = () => {\n  const { closeThread } = useWorkspaceNavigation();\n  const panel = useWorkspacePanel();\n  const thread = useThreadContext();\n\n  return useCallback(\n    (options?: WorkspaceNavigationOptions) => {\n      closeThread(thread?.id, { panel, ...options });\n      // Keeps the thread from staying active when it was opened outside a workspace navigation flow.\n      thread?.deactivate();\n    },\n    [closeThread, panel, thread],\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,uBAAuB;CAClC,MAAM,EAAE,gBAAgB,uBAAuB;CAC/C,MAAM,QAAQ,kBAAkB;CAChC,MAAM,SAAS,iBAAiB;CAEhC,OAAO,aACJ,YAAyC;EACxC,YAAY,QAAQ,IAAI;GAAE;GAAO,GAAG;EAAQ,CAAC;EAE7C,QAAQ,WAAW;CACrB,GACA;EAAC;EAAa;EAAO;CAAM,CAC7B;AACF"}

package/dist/es/components/Tooltip/Tooltip.mjs

@@ -0,0 +1,39 @@
+import { usePopoverPosition } from "../Dialog/hooks/usePopoverPosition.mjs";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Tooltip/Tooltip.tsx
+var Tooltip = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: clsx("str-chat__tooltip", className),
+	...rest,
+	children
+});
+var PopperTooltip = ({ children, className, offset = [0, 10], placement = "top", referenceElement, visible = false }) => {
+	const [popperElement, setPopperElement] = useState(null);
+	const { placement: resolvedPlacement, refs, strategy, x, y } = usePopoverPosition({
+		offset,
+		placement
+	});
+	useEffect(() => {
+		refs.setReference(referenceElement);
+	}, [referenceElement, refs]);
+	useEffect(() => {
+		refs.setFloating(popperElement);
+	}, [popperElement, refs]);
+	if (!visible) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__tooltip", className),
+		"data-placement": resolvedPlacement,
+		ref: setPopperElement,
+		style: {
+			left: x ?? 0,
+			position: strategy,
+			top: y ?? 0
+		},
+		children
+	});
+};
+//#endregion
+export { PopperTooltip, Tooltip };
+
+//# sourceMappingURL=Tooltip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.mjs","names":[],"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport React, { useEffect, useState } from 'react';\nimport type { PopperLikePlacement } from '../Dialog';\nimport { usePopoverPosition } from '../Dialog/hooks/usePopoverPosition';\nimport clsx from 'clsx';\n\nexport const Tooltip = ({ children, className, ...rest }: ComponentProps<'div'>) => (\n  <div className={clsx('str-chat__tooltip', className)} {...rest}>\n    {children}\n  </div>\n);\n\nexport type PopperTooltipProps<T extends HTMLElement> = React.PropsWithChildren<{\n  /** Reference element to which the tooltip should attach to */\n  referenceElement: T | null;\n  /** Custom class to be merged along the defaults */\n  className?: string;\n  /** Popper's modifier (offset) property - [xAxis offset, yAxis offset], default [0, 10] */\n  offset?: [number, number];\n  /** Popper's placement property defining default position of the tooltip, default 'top' */\n  placement?: PopperLikePlacement;\n  /** Tells component whether to render its contents */\n  visible?: boolean;\n}>;\n\nexport const PopperTooltip = <T extends HTMLElement>({\n  children,\n  className,\n  offset = [0, 10],\n  placement = 'top',\n  referenceElement,\n  visible = false,\n}: PopperTooltipProps<T>) => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n  const {\n    placement: resolvedPlacement,\n    refs,\n    strategy,\n    x,\n    y,\n  } = usePopoverPosition({\n    offset,\n    placement,\n  });\n\n  useEffect(() => {\n    refs.setReference(referenceElement);\n  }, [referenceElement, refs]);\n\n  useEffect(() => {\n    refs.setFloating(popperElement);\n  }, [popperElement, refs]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      className={clsx('str-chat__tooltip', className)}\n      data-placement={resolvedPlacement}\n      ref={setPopperElement}\n      style={{ left: x ?? 0, position: strategy, top: y ?? 0 }}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAMA,IAAa,WAAW,EAAE,UAAU,WAAW,GAAG,WAChD,oBAAC,OAAD;CAAK,WAAW,KAAK,qBAAqB,SAAS;CAAG,GAAI;CACvD;AACE,CAAA;AAgBP,IAAa,iBAAwC,EACnD,UACA,WACA,SAAS,CAAC,GAAG,EAAE,GACf,YAAY,OACZ,kBACA,UAAU,YACiB;CAC3B,MAAM,CAAC,eAAe,oBAAoB,SAAgC,IAAI;CAC9E,MAAM,EACJ,WAAW,mBACX,MACA,UACA,GACA,MACE,mBAAmB;EACrB;EACA;CACF,CAAC;CAED,gBAAgB;EACd,KAAK,aAAa,gBAAgB;CACpC,GAAG,CAAC,kBAAkB,IAAI,CAAC;CAE3B,gBAAgB;EACd,KAAK,YAAY,aAAa;CAChC,GAAG,CAAC,eAAe,IAAI,CAAC;CAExB,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,qBAAqB,SAAS;EAC9C,kBAAgB;EAChB,KAAK;EACL,OAAO;GAAE,MAAM,KAAK;GAAG,UAAU;GAAU,KAAK,KAAK;EAAE;EAEtD;CACE,CAAA;AAET"}

package/dist/es/components/Tooltip/hooks/useEnterLeaveHandlers.mjs

@@ -0,0 +1,20 @@
+import { useCallback, useState } from "react";
+//#region src/components/Tooltip/hooks/useEnterLeaveHandlers.ts
+var useEnterLeaveHandlers = ({ onMouseEnter, onMouseLeave } = {}) => {
+	const [tooltipVisible, setTooltipVisible] = useState(false);
+	return {
+		handleEnter: useCallback((e) => {
+			setTooltipVisible(true);
+			onMouseEnter?.(e);
+		}, [onMouseEnter]),
+		handleLeave: useCallback((e) => {
+			setTooltipVisible(false);
+			onMouseLeave?.(e);
+		}, [onMouseLeave]),
+		tooltipVisible
+	};
+};
+//#endregion
+export { useEnterLeaveHandlers };
+
+//# sourceMappingURL=useEnterLeaveHandlers.mjs.map

package/dist/es/components/Tooltip/hooks/useEnterLeaveHandlers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnterLeaveHandlers.mjs","names":[],"sources":["../../../../../src/components/Tooltip/hooks/useEnterLeaveHandlers.ts"],"sourcesContent":["import type React from 'react';\nimport { useCallback, useState } from 'react';\n\nexport const useEnterLeaveHandlers = <T extends HTMLElement>({\n  onMouseEnter,\n  onMouseLeave,\n}: Partial<Record<'onMouseEnter' | 'onMouseLeave', React.MouseEventHandler<T>>> = {}) => {\n  const [tooltipVisible, setTooltipVisible] = useState(false);\n\n  const handleEnter: React.MouseEventHandler<T> = useCallback(\n    (e) => {\n      setTooltipVisible(true);\n      onMouseEnter?.(e);\n    },\n    [onMouseEnter],\n  );\n\n  const handleLeave: React.MouseEventHandler<T> = useCallback(\n    (e) => {\n      setTooltipVisible(false);\n      onMouseLeave?.(e);\n    },\n    [onMouseLeave],\n  );\n\n  return { handleEnter, handleLeave, tooltipVisible };\n};\n"],"mappings":";;AAGA,IAAa,yBAAgD,EAC3D,cACA,iBACgF,CAAC,MAAM;CACvF,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAkB1D,OAAO;EAAE,aAhBuC,aAC7C,MAAM;GACL,kBAAkB,IAAI;GACtB,eAAe,CAAC;EAClB,GACA,CAAC,YAAY,CAWN;EAAa,aAR0B,aAC7C,MAAM;GACL,kBAAkB,KAAK;GACvB,eAAe,CAAC;EAClB,GACA,CAAC,YAAY,CAGO;EAAa;CAAe;AACpD"}

package/dist/es/components/TypingIndicator/TypingIndicator.mjs

@@ -0,0 +1,85 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { AvatarStack } from "../Avatar/AvatarStack.mjs";
+import { extractDisplayInfo } from "../Avatar/utils.mjs";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
+import { TypingIndicatorDots } from "./TypingIndicatorDots.mjs";
+import { useDebouncedTypingActive } from "./hooks/useDebouncedTypingActive.mjs";
+import { getTypingStatusMessage } from "./utils/getTypingStatusMessage.mjs";
+import React, { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TypingIndicator/TypingIndicator.tsx
+var typingEventsStateSelector = ({ typingEvents }) => ({ typingEventsEnabled: typingEvents.enabled });
+var textComposerTypingSelector = ({ typing }) => ({ typing });
+var threadParentMessageSelector = ({ parentMessage }) => ({ parentMessage });
+/**
+* TypingIndicator shows avatars of users currently typing and a bubble with animated dots.
+* Renders only for other participants (never the current user), only when scrolled to the latest
+* message if `isMessageListScrolledToBottom` is provided. It must be a child of Channel component.
+*/
+var UnMemoizedTypingIndicator = (props) => {
+	const { isMessageListScrolledToBottom = true, scrollToBottom } = props;
+	const { AvatarStack: AvatarStack$1 = AvatarStack, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
+	const messageComposer = useMessageComposerController();
+	const { typingEventsEnabled } = useStateStore(messageComposer.channel.configState, typingEventsStateSelector);
+	const { client } = useChatContext();
+	const { t } = useTranslationContext();
+	const { typing = {} } = useStateStore(messageComposer.textComposer?.state, textComposerTypingSelector) ?? {};
+	const thread = useThreadContext();
+	const isThreadList = !!thread;
+	const { parentMessage } = useStateStore(thread?.state, threadParentMessageSelector) ?? {};
+	const typingEntries = Object.values(typing);
+	const typingInChannel = !isThreadList ? typingEntries.filter(({ parent_id, user }) => user?.id !== client.user?.id && !parent_id) : [];
+	const typingInThread = isThreadList ? typingEntries.filter(({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentMessage?.id) : [];
+	const { displayUsers } = useDebouncedTypingActive(isThreadList ? typingInThread : typingInChannel);
+	const showIndicator = displayUsers.length > 0;
+	const typingAnnouncement = useMemo(() => getTypingStatusMessage(displayUsers, t), [displayUsers, t]);
+	const displayInfo = useMemo(() => displayUsers.map(extractDisplayInfo$1), [displayUsers, extractDisplayInfo$1]);
+	useEffect(() => {
+		if (showIndicator && isMessageListScrolledToBottom) scrollToBottom?.();
+	}, [
+		scrollToBottom,
+		isMessageListScrolledToBottom,
+		showIndicator
+	]);
+	if (typingEventsEnabled === false || !showIndicator || !isMessageListScrolledToBottom) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__typing-indicator", "str-chat__typing-indicator--with-transition", { "str-chat__typing-indicator--typing": showIndicator }),
+		"data-testid": "typing-indicator",
+		children: [
+			displayInfo.length > 0 && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(AvatarStack$1, {
+					badgeSize: "md",
+					displayInfo,
+					size: "md"
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "str-chat__typing-indicator__bubble",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "str-chat__typing-indicator__dots",
+					children: /* @__PURE__ */ jsx(TypingIndicatorDots, {})
+				})
+			}),
+			/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", {
+				"aria-atomic": "true",
+				"aria-live": "polite",
+				"data-testid": "typing-indicator-status",
+				role: "status",
+				children: typingAnnouncement
+			}) })
+		]
+	});
+};
+var TypingIndicator = React.memo(UnMemoizedTypingIndicator);
+//#endregion
+export { TypingIndicator };
+
+//# sourceMappingURL=TypingIndicator.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicator.mjs","names":[],"sources":["../../../../src/components/TypingIndicator/TypingIndicator.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\nimport type {\n  ChannelConfig,\n  EventPayload,\n  TextComposerState,\n  ThreadState,\n} from 'stream-chat';\n\nimport { AvatarStack as DefaultAvatarStack } from '../Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';\nimport { TypingIndicatorDots } from './TypingIndicatorDots';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';\nimport { useThreadContext } from '../Threads/ThreadContext';\nimport {\n  useChatContext,\n  useComponentContext,\n  useTranslationContext,\n} from '../../context';\nimport { useStateStore } from '../../store';\n\nimport { useDebouncedTypingActive } from './hooks/useDebouncedTypingActive';\nimport { getTypingStatusMessage } from './utils/getTypingStatusMessage';\n\nconst typingEventsStateSelector = ({ typingEvents }: ChannelConfig) => ({\n  typingEventsEnabled: typingEvents.enabled,\n});\n\nconst textComposerTypingSelector = ({ typing }: TextComposerState) => ({ typing });\n\nconst threadParentMessageSelector = ({ parentMessage }: ThreadState) => ({\n  parentMessage,\n});\n\nexport type TypingIndicatorProps = {\n  /** When false, the indicator is not rendered (e.g. when list is not scrolled to bottom). Omit or true to show when typing. */\n  isMessageListScrolledToBottom?: boolean;\n  /** Scrolls the message list to the latest message; invoked when a typing indicator appears. */\n  scrollToBottom?: () => void;\n};\n\n/**\n * TypingIndicator shows avatars of users currently typing and a bubble with animated dots.\n * Renders only for other participants (never the current user), only when scrolled to the latest\n * message if `isMessageListScrolledToBottom` is provided. It must be a child of Channel component.\n */\nconst UnMemoizedTypingIndicator = (props: TypingIndicatorProps) => {\n  const { isMessageListScrolledToBottom = true, scrollToBottom } = props;\n\n  const {\n    AvatarStack = DefaultAvatarStack,\n    extractDisplayInfo = defaultExtractDisplayInfo,\n  } = useComponentContext();\n  const messageComposer = useMessageComposerController();\n  const { typingEventsEnabled } = useStateStore(\n    messageComposer.channel.configState,\n    typingEventsStateSelector,\n  );\n  const { client } = useChatContext();\n  const { t } = useTranslationContext();\n  const { typing = {} } =\n    useStateStore(messageComposer.textComposer?.state, textComposerTypingSelector) ?? {};\n  const thread = useThreadContext();\n  const isThreadList = !!thread;\n  const { parentMessage } =\n    useStateStore(thread?.state, threadParentMessageSelector) ?? {};\n\n  const typingEntries = Object.values(typing) as EventPayload<\n    'typing.start' | 'typing.stop'\n  >[];\n\n  const typingInChannel = !isThreadList\n    ? typingEntries.filter(\n        ({ parent_id, user }) => user?.id !== client.user?.id && !parent_id,\n      )\n    : [];\n\n  const typingInThread = isThreadList\n    ? typingEntries.filter(\n        ({ parent_id, user }) =>\n          user?.id !== client.user?.id && parent_id === parentMessage?.id,\n      )\n    : [];\n\n  const typingUsers = isThreadList ? typingInThread : typingInChannel;\n  const { displayUsers } = useDebouncedTypingActive(typingUsers);\n  const showIndicator = displayUsers.length > 0;\n  const typingAnnouncement = useMemo(\n    () => getTypingStatusMessage(displayUsers, t),\n    [displayUsers, t],\n  );\n\n  const displayInfo = useMemo(\n    () => displayUsers.map(extractDisplayInfo),\n    [displayUsers, extractDisplayInfo],\n  );\n\n  useEffect(() => {\n    if (showIndicator && isMessageListScrolledToBottom) scrollToBottom?.();\n  }, [scrollToBottom, isMessageListScrolledToBottom, showIndicator]);\n\n  if (typingEventsEnabled === false || !showIndicator || !isMessageListScrolledToBottom) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__typing-indicator',\n        'str-chat__typing-indicator--with-transition',\n        {\n          'str-chat__typing-indicator--typing': showIndicator,\n        },\n      )}\n      data-testid='typing-indicator'\n    >\n      {displayInfo.length > 0 && (\n        <div aria-hidden='true'>\n          <AvatarStack badgeSize='md' displayInfo={displayInfo} size='md' />\n        </div>\n      )}\n      <div aria-hidden='true' className='str-chat__typing-indicator__bubble'>\n        <div className='str-chat__typing-indicator__dots'>\n          <TypingIndicatorDots />\n        </div>\n      </div>\n      <VisuallyHidden>\n        <span\n          aria-atomic='true'\n          aria-live='polite'\n          data-testid='typing-indicator-status'\n          role='status'\n        >\n          {typingAnnouncement}\n        </span>\n      </VisuallyHidden>\n    </div>\n  );\n};\n\nexport const TypingIndicator = React.memo(\n  UnMemoizedTypingIndicator,\n) as typeof UnMemoizedTypingIndicator;\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAM,6BAA6B,EAAE,oBAAmC,EACtE,qBAAqB,aAAa,QACpC;AAEA,IAAM,8BAA8B,EAAE,cAAiC,EAAE,OAAO;AAEhF,IAAM,+BAA+B,EAAE,qBAAkC,EACvE,cACF;;;;;;AAcA,IAAM,6BAA6B,UAAgC;CACjE,MAAM,EAAE,gCAAgC,MAAM,mBAAmB;CAEjE,MAAM,EACJ,aAAA,gBAAc,aACd,oBAAA,uBAAqB,uBACnB,oBAAoB;CACxB,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,wBAAwB,cAC9B,gBAAgB,QAAQ,aACxB,yBACF;CACA,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,SAAS,CAAC,MAChB,cAAc,gBAAgB,cAAc,OAAO,0BAA0B,KAAK,CAAC;CACrF,MAAM,SAAS,iBAAiB;CAChC,MAAM,eAAe,CAAC,CAAC;CACvB,MAAM,EAAE,kBACN,cAAc,QAAQ,OAAO,2BAA2B,KAAK,CAAC;CAEhE,MAAM,gBAAgB,OAAO,OAAO,MAAM;CAI1C,MAAM,kBAAkB,CAAC,eACrB,cAAc,QACX,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,CAAC,SAC5D,IACA,CAAC;CAEL,MAAM,iBAAiB,eACnB,cAAc,QACX,EAAE,WAAW,WACZ,MAAM,OAAO,OAAO,MAAM,MAAM,cAAc,eAAe,EACjE,IACA,CAAC;CAGL,MAAM,EAAE,iBAAiB,yBADL,eAAe,iBAAiB,eACS;CAC7D,MAAM,gBAAgB,aAAa,SAAS;CAC5C,MAAM,qBAAqB,cACnB,uBAAuB,cAAc,CAAC,GAC5C,CAAC,cAAc,CAAC,CAClB;CAEA,MAAM,cAAc,cACZ,aAAa,IAAI,oBAAkB,GACzC,CAAC,cAAc,oBAAkB,CACnC;CAEA,gBAAgB;EACd,IAAI,iBAAiB,+BAA+B,iBAAiB;CACvE,GAAG;EAAC;EAAgB;EAA+B;CAAa,CAAC;CAEjE,IAAI,wBAAwB,SAAS,CAAC,iBAAiB,CAAC,+BACtD,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,WAAW,KACT,8BACA,+CACA,EACE,sCAAsC,cACxC,CACF;EACA,eAAY;YARd;GAUG,YAAY,SAAS,KACpB,oBAAC,OAAD;IAAK,eAAY;cACf,oBAAC,eAAD;KAAa,WAAU;KAAkB;KAAa,MAAK;IAAM,CAAA;GAC9D,CAAA;GAEP,oBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;cAChC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,qBAAD,CAAsB,CAAA;IACnB,CAAA;GACF,CAAA;GACL,oBAAC,gBAAD,EAAA,UACE,oBAAC,QAAD;IACE,eAAY;IACZ,aAAU;IACV,eAAY;IACZ,MAAK;cAEJ;GACG,CAAA,EACQ,CAAA;EACb;;AAET;AAEA,IAAa,kBAAkB,MAAM,KACnC,yBACF"}

package/dist/es/components/TypingIndicator/TypingIndicatorDots.mjs

@@ -0,0 +1,33 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TypingIndicator/TypingIndicatorDots.tsx
+/** Three dots for typing indicator; fill and opacity animation come from TypingIndicator.scss (--chat-text-typing-indicator). */
+var TypingIndicatorDots = () => /* @__PURE__ */ jsxs("svg", {
+	"aria-hidden": true,
+	fill: "none",
+	height: "5",
+	viewBox: "0 0 23 5",
+	width: "23",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: "2.5",
+			cy: "2.5",
+			r: "2.5"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "11.5",
+			cy: "2.5",
+			r: "2.5"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "20.5",
+			cy: "2.5",
+			r: "2.5"
+		})
+	]
+});
+//#endregion
+export { TypingIndicatorDots };
+
+//# sourceMappingURL=TypingIndicatorDots.mjs.map

package/dist/es/components/TypingIndicator/TypingIndicatorDots.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicatorDots.mjs","names":[],"sources":["../../../../src/components/TypingIndicator/TypingIndicatorDots.tsx"],"sourcesContent":["import React from 'react';\n\n/** Three dots for typing indicator; fill and opacity animation come from TypingIndicator.scss (--chat-text-typing-indicator). */\nexport const TypingIndicatorDots = () => (\n  <svg\n    aria-hidden\n    fill='none'\n    height='5'\n    viewBox='0 0 23 5'\n    width='23'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <circle cx='2.5' cy='2.5' r='2.5' />\n    <circle cx='11.5' cy='2.5' r='2.5' />\n    <circle cx='20.5' cy='2.5' r='2.5' />\n  </svg>\n);\n"],"mappings":";;;;AAGA,IAAa,4BACX,qBAAC,OAAD;CACE,eAAA;CACA,MAAK;CACL,QAAO;CACP,SAAQ;CACR,OAAM;CACN,OAAM;WANR;EAQE,oBAAC,UAAD;GAAQ,IAAG;GAAM,IAAG;GAAM,GAAE;EAAO,CAAA;EACnC,oBAAC,UAAD;GAAQ,IAAG;GAAO,IAAG;GAAM,GAAE;EAAO,CAAA;EACpC,oBAAC,UAAD;GAAQ,IAAG;GAAO,IAAG;GAAM,GAAE;EAAO,CAAA;CACjC"}

package/dist/es/components/TypingIndicator/TypingIndicatorHeader.mjs

@@ -0,0 +1,48 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
+import { TypingIndicatorDots } from "./TypingIndicatorDots.mjs";
+import { useDebouncedTypingActive } from "./hooks/useDebouncedTypingActive.mjs";
+import { getTypingStatusMessage } from "./utils/getTypingStatusMessage.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TypingIndicator/TypingIndicatorHeader.tsx
+var typingEventsStateSelector = ({ typingEvents }) => ({ typingEventsEnabled: typingEvents.enabled });
+var textComposerTypingSelector = ({ typing }) => ({ typing });
+/**
+* Inline typing indicator for ChannelHeader or ThreadHeader: text (1/2/3+ people) followed by animated dots.
+* Only shows other participants; respects the channel's resolved `typingEvents.enabled`.
+*/
+var TypingIndicatorHeader = (props) => {
+	const { threadList = false } = props;
+	const { t } = useTranslationContext();
+	const { typingEventsEnabled } = useStateStore(useChannel().configState, typingEventsStateSelector);
+	const parentId = useThreadContext()?.id;
+	const { client } = useChatContext();
+	const { typing = {} } = useStateStore(useMessageComposerController().textComposer?.state, textComposerTypingSelector) ?? {};
+	const typingEntries = Object.values(typing);
+	const typingInChannel = !threadList ? typingEntries.filter(({ parent_id, user }) => user?.id !== client.user?.id && !parent_id) : [];
+	const typingInThread = threadList ? typingEntries.filter(({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId) : [];
+	const { displayUsers } = useDebouncedTypingActive(threadList ? typingInThread : typingInChannel);
+	const label = getTypingStatusMessage(displayUsers, t);
+	if (typingEventsEnabled === false || displayUsers.length === 0) return null;
+	return /* @__PURE__ */ jsxs("span", {
+		className: clsx("str-chat__typing-indicator-header", { "str-chat__typing-indicator-header--thread": threadList }),
+		"data-testid": "typing-indicator-header",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "str-chat__typing-indicator-header__text",
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			className: "str-chat__typing-indicator__dots str-chat__typing-indicator-header__dots",
+			children: /* @__PURE__ */ jsx(TypingIndicatorDots, {})
+		})]
+	});
+};
+//#endregion
+export { TypingIndicatorHeader };
+
+//# sourceMappingURL=TypingIndicatorHeader.mjs.map

package/dist/es/components/TypingIndicator/TypingIndicatorHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicatorHeader.mjs","names":[],"sources":["../../../../src/components/TypingIndicator/TypingIndicatorHeader.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TypingIndicatorDots } from './TypingIndicatorDots';\nimport { useChannel } from '../../context';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';\nimport { useStateStore } from '../../store';\nimport { useThreadContext } from '../Threads';\nimport type { EventPayload, TextComposerState } from 'stream-chat';\n\nimport { useDebouncedTypingActive } from './hooks/useDebouncedTypingActive';\nimport { getTypingStatusMessage } from './utils/getTypingStatusMessage';\nimport type { ChannelConfig } from 'stream-chat';\n\nconst typingEventsStateSelector = ({ typingEvents }: ChannelConfig) => ({\n  typingEventsEnabled: typingEvents.enabled,\n});\n\nconst textComposerTypingSelector = ({ typing }: TextComposerState) => ({ typing });\n\nexport type TypingIndicatorHeaderProps = {\n  /** When true, show typing in the current thread only; when false, show typing in the channel. */\n  threadList?: boolean;\n};\n\n/**\n * Inline typing indicator for ChannelHeader or ThreadHeader: text (1/2/3+ people) followed by animated dots.\n * Only shows other participants; respects the channel's resolved `typingEvents.enabled`.\n */\nexport const TypingIndicatorHeader = (props: TypingIndicatorHeaderProps) => {\n  const { threadList = false } = props;\n\n  const { t } = useTranslationContext();\n  const channel = useChannel();\n  const { typingEventsEnabled } = useStateStore(\n    channel.configState,\n    typingEventsStateSelector,\n  );\n  const threadInstance = useThreadContext();\n  const parentId = threadInstance?.id;\n  const { client } = useChatContext();\n  const messageComposer = useMessageComposerController();\n  const { typing = {} } =\n    useStateStore(messageComposer.textComposer?.state, textComposerTypingSelector) ?? {};\n\n  const typingEntries = Object.values(typing) as EventPayload<\n    'typing.start' | 'typing.stop'\n  >[];\n\n  const typingInChannel = !threadList\n    ? typingEntries.filter(\n        ({ parent_id, user }) => user?.id !== client.user?.id && !parent_id,\n      )\n    : [];\n\n  const typingInThread = threadList\n    ? typingEntries.filter(\n        ({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId,\n      )\n    : [];\n\n  const typingUsers = threadList ? typingInThread : typingInChannel;\n  const { displayUsers } = useDebouncedTypingActive(typingUsers);\n  const label = getTypingStatusMessage(displayUsers, t);\n\n  if (typingEventsEnabled === false || displayUsers.length === 0) {\n    return null;\n  }\n\n  return (\n    <span\n      className={clsx('str-chat__typing-indicator-header', {\n        'str-chat__typing-indicator-header--thread': threadList,\n      })}\n      data-testid='typing-indicator-header'\n    >\n      <span className='str-chat__typing-indicator-header__text'>{label}</span>\n      <span className='str-chat__typing-indicator__dots str-chat__typing-indicator-header__dots'>\n        <TypingIndicatorDots />\n      </span>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,6BAA6B,EAAE,oBAAmC,EACtE,qBAAqB,aAAa,QACpC;AAEA,IAAM,8BAA8B,EAAE,cAAiC,EAAE,OAAO;;;;;AAWhF,IAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,aAAa,UAAU;CAE/B,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,EAAE,wBAAwB,cADhB,WAEd,CAAA,CAAQ,aACR,yBACF;CAEA,MAAM,WADiB,iBACN,CAAA,EAAgB;CACjC,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,EAAE,SAAS,CAAC,MAChB,cAFsB,6BAER,CAAA,CAAgB,cAAc,OAAO,0BAA0B,KAAK,CAAC;CAErF,MAAM,gBAAgB,OAAO,OAAO,MAAM;CAI1C,MAAM,kBAAkB,CAAC,aACrB,cAAc,QACX,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,CAAC,SAC5D,IACA,CAAC;CAEL,MAAM,iBAAiB,aACnB,cAAc,QACX,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,cAAc,QACzE,IACA,CAAC;CAGL,MAAM,EAAE,iBAAiB,yBADL,aAAa,iBAAiB,eACW;CAC7D,MAAM,QAAQ,uBAAuB,cAAc,CAAC;CAEpD,IAAI,wBAAwB,SAAS,aAAa,WAAW,GAC3D,OAAO;CAGT,OACE,qBAAC,QAAD;EACE,WAAW,KAAK,qCAAqC,EACnD,6CAA6C,WAC/C,CAAC;EACD,eAAY;YAJd,CAME,oBAAC,QAAD;GAAM,WAAU;aAA2C;EAAY,CAAA,GACvE,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,qBAAD,CAAsB,CAAA;EAClB,CAAA,CACF;;AAEV"}

package/dist/es/components/TypingIndicator/hooks/useDebouncedTypingActive.mjs

@@ -0,0 +1,53 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+//#region src/components/TypingIndicator/hooks/useDebouncedTypingActive.ts
+var DEFAULT_HIDE_DELAY_MS = 2e3;
+/**
+* Derive a stable key from typing users so that the effect only runs when the
+* actual set of users (by id) changes, not on every render due to new array
+* references.
+*
+* Important: callers must pass entries where `user` is an object with an `id`
+* field (not a plain string). If `user?.id` is undefined for every entry the
+* key degenerates to an empty string, the memo returns a new array each time
+* it is "invalidated" by React, and `setDisplayUsers` in the effect below will
+* loop infinitely because it always receives a fresh reference.
+*/
+var useStableTypingUsers = (typingUsers) => {
+	return useMemo(() => [...typingUsers], [typingUsers.map((entry) => entry.user?.id ?? "").sort().join(",")]);
+};
+/**
+* Debounces hiding the typing indicator: when typing users go to zero, keep showing for delayMs
+* to avoid flicker when typing stops and starts again quickly. Returns the list to display
+* (current typers or last non-empty list during the debounce period). Show the indicator
+* when displayUsers.length > 0.
+*/
+function useDebouncedTypingActive(typingUsers, delayMs = DEFAULT_HIDE_DELAY_MS) {
+	const stableTypingUsers = useStableTypingUsers(typingUsers);
+	const [displayUsers, setDisplayUsers] = useState([]);
+	const timerRef = useRef(null);
+	const hadTypersRef = useRef(false);
+	useEffect(() => {
+		if (stableTypingUsers.length > 0) {
+			if (timerRef.current) {
+				clearTimeout(timerRef.current);
+				timerRef.current = null;
+			}
+			hadTypersRef.current = true;
+			setDisplayUsers(stableTypingUsers);
+			return;
+		}
+		if (stableTypingUsers.length === 0 && hadTypersRef.current && !timerRef.current) timerRef.current = setTimeout(() => {
+			timerRef.current = null;
+			hadTypersRef.current = false;
+			setDisplayUsers([]);
+		}, delayMs);
+	}, [stableTypingUsers, delayMs]);
+	useEffect(() => () => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+	}, []);
+	return { displayUsers };
+}
+//#endregion
+export { useDebouncedTypingActive };
+
+//# sourceMappingURL=useDebouncedTypingActive.mjs.map

package/dist/es/components/TypingIndicator/hooks/useDebouncedTypingActive.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedTypingActive.mjs","names":[],"sources":["../../../../../src/components/TypingIndicator/hooks/useDebouncedTypingActive.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport type { EventPayload } from 'stream-chat';\n\nconst DEFAULT_HIDE_DELAY_MS = 2000;\n\nexport type TypingEntry = EventPayload<'typing.start' | 'typing.stop'>;\n\n/**\n * Derive a stable key from typing users so that the effect only runs when the\n * actual set of users (by id) changes, not on every render due to new array\n * references.\n *\n * Important: callers must pass entries where `user` is an object with an `id`\n * field (not a plain string). If `user?.id` is undefined for every entry the\n * key degenerates to an empty string, the memo returns a new array each time\n * it is \"invalidated\" by React, and `setDisplayUsers` in the effect below will\n * loop infinitely because it always receives a fresh reference.\n */\nconst useStableTypingUsers = (typingUsers: readonly TypingEntry[]) => {\n  const key = typingUsers\n    .map((entry) => entry.user?.id ?? '')\n    .sort()\n    .join(',');\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useMemo(() => [...typingUsers], [key]);\n};\n\n/**\n * Debounces hiding the typing indicator: when typing users go to zero, keep showing for delayMs\n * to avoid flicker when typing stops and starts again quickly. Returns the list to display\n * (current typers or last non-empty list during the debounce period). Show the indicator\n * when displayUsers.length > 0.\n */\nexport function useDebouncedTypingActive(\n  typingUsers: readonly TypingEntry[],\n  delayMs: number = DEFAULT_HIDE_DELAY_MS,\n): { displayUsers: TypingEntry[] } {\n  const stableTypingUsers = useStableTypingUsers(typingUsers);\n  const [displayUsers, setDisplayUsers] = useState<TypingEntry[]>([]);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const hadTypersRef = useRef(false);\n\n  useEffect(() => {\n    if (stableTypingUsers.length > 0) {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n      hadTypersRef.current = true;\n      setDisplayUsers(stableTypingUsers);\n      return;\n    }\n\n    if (stableTypingUsers.length === 0 && hadTypersRef.current && !timerRef.current) {\n      timerRef.current = setTimeout(() => {\n        timerRef.current = null;\n        hadTypersRef.current = false;\n        setDisplayUsers([]);\n      }, delayMs);\n    }\n  }, [stableTypingUsers, delayMs]);\n\n  useEffect(\n    () => () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    },\n    [],\n  );\n\n  return { displayUsers };\n}\n"],"mappings":";;AAGA,IAAM,wBAAwB;;;;;;;;;;;;AAe9B,IAAM,wBAAwB,gBAAwC;CAOpE,OAAO,cAAc,CAAC,GAAG,WAAW,GAAG,CAN3B,YACT,KAAK,UAAU,MAAM,MAAM,MAAM,EAAE,CAAC,CACpC,KAAK,CAAC,CACN,KAAK,GAGgC,CAAG,CAAC;AAC9C;;;;;;;AAQA,SAAgB,yBACd,aACA,UAAkB,uBACe;CACjC,MAAM,oBAAoB,qBAAqB,WAAW;CAC1D,MAAM,CAAC,cAAc,mBAAmB,SAAwB,CAAC,CAAC;CAClE,MAAM,WAAW,OAA6C,IAAI;CAClE,MAAM,eAAe,OAAO,KAAK;CAEjC,gBAAgB;EACd,IAAI,kBAAkB,SAAS,GAAG;GAChC,IAAI,SAAS,SAAS;IACpB,aAAa,SAAS,OAAO;IAC7B,SAAS,UAAU;GACrB;GACA,aAAa,UAAU;GACvB,gBAAgB,iBAAiB;GACjC;EACF;EAEA,IAAI,kBAAkB,WAAW,KAAK,aAAa,WAAW,CAAC,SAAS,SACtE,SAAS,UAAU,iBAAiB;GAClC,SAAS,UAAU;GACnB,aAAa,UAAU;GACvB,gBAAgB,CAAC,CAAC;EACpB,GAAG,OAAO;CAEd,GAAG,CAAC,mBAAmB,OAAO,CAAC;CAE/B,sBACc;EACV,IAAI,SAAS,SAAS,aAAa,SAAS,OAAO;CACrD,GACA,CAAC,CACH;CAEA,OAAO,EAAE,aAAa;AACxB"}

package/dist/es/components/TypingIndicator/utils/getTypingStatusMessage.mjs

@@ -0,0 +1,19 @@
+//#region src/components/TypingIndicator/utils/getTypingStatusMessage.ts
+/**
+* Build a localized typing-status message for screen-reader and inline indicator text.
+*/
+var getTypingStatusMessage = (displayUsers, t) => {
+	const namedUsers = displayUsers.map(({ user }) => user?.name?.trim() || user?.id || "").filter(Boolean);
+	const count = displayUsers.length;
+	if (count === 1 && namedUsers.length === 1) return t("typing.singleUser", "{{ typing }} is typing", { typing: namedUsers[0] });
+	if (count === 2 && namedUsers.length === 2) return t("typing.twoUsers", "{{ typing }} are typing", { typing: `${namedUsers[0]} and ${namedUsers[1]}` });
+	return t("typing.manyUsers", {
+		count,
+		defaultValue_one: "{{ count }} person is typing",
+		defaultValue_other: "{{ count }} people are typing"
+	});
+};
+//#endregion
+export { getTypingStatusMessage };
+
+//# sourceMappingURL=getTypingStatusMessage.mjs.map

package/dist/es/components/TypingIndicator/utils/getTypingStatusMessage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTypingStatusMessage.mjs","names":[],"sources":["../../../../../src/components/TypingIndicator/utils/getTypingStatusMessage.ts"],"sourcesContent":["import type { TranslationContextValue } from '../../../context/TranslationContext';\nimport type { TypingEntry } from '../hooks/useDebouncedTypingActive';\n\n/**\n * Build a localized typing-status message for screen-reader and inline indicator text.\n */\nexport const getTypingStatusMessage = (\n  displayUsers: readonly TypingEntry[],\n  t: TranslationContextValue['t'],\n) => {\n  const namedUsers = displayUsers\n    .map(({ user }) => user?.name?.trim() || user?.id || '')\n    .filter(Boolean);\n  const count = displayUsers.length;\n\n  if (count === 1 && namedUsers.length === 1) {\n    return t('typing.singleUser', '{{ typing }} is typing', { typing: namedUsers[0] });\n  }\n\n  if (count === 2 && namedUsers.length === 2) {\n    return t('typing.twoUsers', '{{ typing }} are typing', {\n      typing: `${namedUsers[0]} and ${namedUsers[1]}`,\n    });\n  }\n\n  return t('typing.manyUsers', {\n    count,\n    defaultValue_one: '{{ count }} person is typing',\n    defaultValue_other: '{{ count }} people are typing',\n  });\n};\n"],"mappings":";;;;AAMA,IAAa,0BACX,cACA,MACG;CACH,MAAM,aAAa,aAChB,KAAK,EAAE,WAAW,MAAM,MAAM,KAAK,KAAK,MAAM,MAAM,EAAE,CAAC,CACvD,OAAO,OAAO;CACjB,MAAM,QAAQ,aAAa;CAE3B,IAAI,UAAU,KAAK,WAAW,WAAW,GACvC,OAAO,EAAE,qBAAqB,0BAA0B,EAAE,QAAQ,WAAW,GAAG,CAAC;CAGnF,IAAI,UAAU,KAAK,WAAW,WAAW,GACvC,OAAO,EAAE,mBAAmB,2BAA2B,EACrD,QAAQ,GAAG,WAAW,GAAG,OAAO,WAAW,KAC7C,CAAC;CAGH,OAAO,EAAE,oBAAoB;EAC3B;EACA,kBAAkB;EAClB,oBAAoB;CACtB,CAAC;AACH"}

package/dist/es/components/UtilityComponents/ErrorBoundary.mjs

@@ -0,0 +1,22 @@
+import { Component } from "react";
+//#region src/components/UtilityComponents/ErrorBoundary.tsx
+var ErrorBoundary = class extends Component {
+	constructor(props) {
+		super(props);
+		this.state = { hasError: false };
+	}
+	static getDerivedStateFromError() {
+		return { hasError: true };
+	}
+	componentDidCatch(error, information) {
+		console.error(error, information);
+	}
+	render() {
+		if (this.state.hasError) return this.props.fallback;
+		return this.props.children;
+	}
+};
+//#endregion
+export { ErrorBoundary };
+
+//# sourceMappingURL=ErrorBoundary.mjs.map

package/dist/es/components/UtilityComponents/ErrorBoundary.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.mjs","names":[],"sources":["../../../../src/components/UtilityComponents/ErrorBoundary.tsx"],"sourcesContent":["import { Component } from 'react';\nimport type { PropsWithChildren, ReactNode } from 'react';\n\ntype ErrorBoundaryProps = PropsWithChildren<{ fallback?: ReactNode }>;\n\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, { hasError: boolean }> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error: unknown, information: unknown) {\n    console.error(error, information);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return this.props.fallback;\n    }\n\n    return this.props.children;\n  }\n}\n"],"mappings":";;AAKA,IAAa,gBAAb,cAAmC,UAAqD;CACtF,YAAY,OAA2B;EACrC,MAAM,KAAK;EACX,KAAK,QAAQ,EAAE,UAAU,MAAM;CACjC;CAEA,OAAO,2BAA2B;EAChC,OAAO,EAAE,UAAU,KAAK;CAC1B;CAEA,kBAAkB,OAAgB,aAAsB;EACtD,QAAQ,MAAM,OAAO,WAAW;CAClC;CAEA,SAAS;EACP,IAAI,KAAK,MAAM,UACb,OAAO,KAAK,MAAM;EAGpB,OAAO,KAAK,MAAM;CACpB;AACF"}

package/dist/es/components/UtilityComponents/hooks/useMutationObserver.mjs

@@ -0,0 +1,45 @@
+import { useStableCallback } from "../../../utils/useStableCallback.mjs";
+import { useEffect, useRef } from "react";
+//#region src/components/UtilityComponents/hooks/useMutationObserver.ts
+var DEFAULT_INIT = {
+	childList: true,
+	subtree: true
+};
+var NOOP = () => void 0;
+/**
+* Runs `onMutation` whenever the observed subtree of `ref` changes (and, by default, once on
+* connect). A thin, generic wrapper around `MutationObserver`: toggle with `enabled`, react to the
+* initial state with `runOnConnect`, and clean up side effects via `onDisconnect`. The latest
+* `onMutation`/`onDisconnect` are always used without reconnecting the observer.
+*
+* Note: like any `useEffect`-based hook, it (re)connects on `enabled` change or remount — not on a
+* silent `ref.current` swap. Drive remounts with a `key` or toggle `enabled` if the target changes.
+*/
+var useMutationObserver = (ref, onMutation, { enabled = true, init = DEFAULT_INIT, onDisconnect, runOnConnect = true } = {}) => {
+	const handleMutation = useStableCallback(onMutation);
+	const handleDisconnect = useStableCallback(onDisconnect ?? NOOP);
+	const initRef = useRef(init);
+	initRef.current = init;
+	useEffect(() => {
+		const target = ref.current;
+		if (!enabled || !target) return;
+		if (runOnConnect) handleMutation();
+		if (typeof MutationObserver === "undefined") return handleDisconnect;
+		const observer = new MutationObserver(() => handleMutation());
+		observer.observe(target, initRef.current);
+		return () => {
+			observer.disconnect();
+			handleDisconnect();
+		};
+	}, [
+		enabled,
+		handleDisconnect,
+		handleMutation,
+		ref,
+		runOnConnect
+	]);
+};
+//#endregion
+export { useMutationObserver };
+
+//# sourceMappingURL=useMutationObserver.mjs.map

package/dist/es/components/UtilityComponents/hooks/useMutationObserver.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMutationObserver.mjs","names":[],"sources":["../../../../../src/components/UtilityComponents/hooks/useMutationObserver.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nimport { useStableCallback } from '../../../utils/useStableCallback';\n\nconst DEFAULT_INIT: MutationObserverInit = { childList: true, subtree: true };\nconst NOOP = () => undefined;\n\nexport type UseMutationObserverOptions = {\n  /** When `false`, the observer is not connected (and `onDisconnect` runs if it was). Default `true`. */\n  enabled?: boolean;\n  /** `MutationObserver` init, read when (re)connecting. Default `{ childList: true, subtree: true }`. */\n  init?: MutationObserverInit;\n  /** Runs when observation stops — target/`enabled` change or unmount. Use to clean up side effects\n   * started in `onMutation` (e.g. cancel a pending announcement). */\n  onDisconnect?: () => void;\n  /** Also invoke `onMutation` once right after connecting, to react to the current DOM. Default `true`. */\n  runOnConnect?: boolean;\n};\n\n/**\n * Runs `onMutation` whenever the observed subtree of `ref` changes (and, by default, once on\n * connect). A thin, generic wrapper around `MutationObserver`: toggle with `enabled`, react to the\n * initial state with `runOnConnect`, and clean up side effects via `onDisconnect`. The latest\n * `onMutation`/`onDisconnect` are always used without reconnecting the observer.\n *\n * Note: like any `useEffect`-based hook, it (re)connects on `enabled` change or remount — not on a\n * silent `ref.current` swap. Drive remounts with a `key` or toggle `enabled` if the target changes.\n */\nexport const useMutationObserver = (\n  ref: RefObject<HTMLElement | null>,\n  onMutation: () => void,\n  {\n    enabled = true,\n    init = DEFAULT_INIT,\n    onDisconnect,\n    runOnConnect = true,\n  }: UseMutationObserverOptions = {},\n) => {\n  // Stable identities that always call the latest callback, so updating either does not reconnect\n  // the observer.\n  const handleMutation = useStableCallback(onMutation);\n  const handleDisconnect = useStableCallback(onDisconnect ?? NOOP);\n  // `init` is read only when (re)connecting; keep it off the effect deps so a fresh object literal\n  // each render does not reconnect.\n  const initRef = useRef(init);\n  initRef.current = init;\n\n  useEffect(() => {\n    const target = ref.current;\n    if (!enabled || !target) return;\n\n    if (runOnConnect) handleMutation();\n\n    // `MutationObserver` is available in every browser the SDK targets (and this runs only in an\n    // effect, never during SSR), but degrade gracefully if it is missing — e.g. a non-DOM test\n    // environment: react to the initial state and still run the disconnect cleanup, just without\n    // observing further changes.\n    if (typeof MutationObserver === 'undefined') return handleDisconnect;\n\n    const observer = new MutationObserver(() => handleMutation());\n    observer.observe(target, initRef.current);\n\n    return () => {\n      observer.disconnect();\n      handleDisconnect();\n    };\n  }, [enabled, handleDisconnect, handleMutation, ref, runOnConnect]);\n};\n"],"mappings":";;;AAKA,IAAM,eAAqC;CAAE,WAAW;CAAM,SAAS;AAAK;AAC5E,IAAM,aAAa,KAAA;;;;;;;;;;AAuBnB,IAAa,uBACX,KACA,YACA,EACE,UAAU,MACV,OAAO,cACP,cACA,eAAe,SACe,CAAC,MAC9B;CAGH,MAAM,iBAAiB,kBAAkB,UAAU;CACnD,MAAM,mBAAmB,kBAAkB,gBAAgB,IAAI;CAG/D,MAAM,UAAU,OAAO,IAAI;CAC3B,QAAQ,UAAU;CAElB,gBAAgB;EACd,MAAM,SAAS,IAAI;EACnB,IAAI,CAAC,WAAW,CAAC,QAAQ;EAEzB,IAAI,cAAc,eAAe;EAMjC,IAAI,OAAO,qBAAqB,aAAa,OAAO;EAEpD,MAAM,WAAW,IAAI,uBAAuB,eAAe,CAAC;EAC5D,SAAS,QAAQ,QAAQ,QAAQ,OAAO;EAExC,aAAa;GACX,SAAS,WAAW;GACpB,iBAAiB;EACnB;CACF,GAAG;EAAC;EAAS;EAAkB;EAAgB;EAAK;CAAY,CAAC;AACnE"}