stream-chat-react 14.11.1 → 14.12.0

package/dist/es/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadListUnseenThreadsBanner.mjs","names":[],"sources":["../../../../../src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport type { ThreadManagerState } from 'stream-chat';\n\nimport {\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../context';\nimport { useStateStore } from '../../../store';\nimport { LoadingIndicator } from '../../Loading';\n\nconst selector = (nextValue: ThreadManagerState) => ({\n  isLoading: nextValue.pagination.isLoading,\n  unseenThreadIds: nextValue.unseenThreadIds,\n});\n\nexport const ThreadListUnseenThreadsBanner = () => {\n  const { IconRefresh } = useComponentContextIcons();\n\n  const { client } = useChatContext();\n  const { t } = useTranslationContext();\n  const { isLoading, unseenThreadIds } = useStateStore(client.threads.state, selector);\n\n  if (!unseenThreadIds.length) return null;\n\n  return (\n    <button\n      className={clsx('str-chat__unseen-threads-banner', {\n        'str-chat__unseen-threads-banner--loading': isLoading,\n      })}\n      disabled={isLoading}\n      onClick={() => client.threads.reload()}\n    >\n      {!isLoading && (\n        <>\n          <IconRefresh />\n          <span>\n            {t('ThreadListUnseenThreadsBanner/unreadThreads', {\n              count: unseenThreadIds.length,\n            })}\n          </span>\n        </>\n      )}\n      {isLoading && (\n        <>\n          <LoadingIndicator />\n          <span>{t('ThreadListUnseenThreadsBanner/loading')}</span>\n        </>\n      )}\n    </button>\n  );\n};\n"],"mappings":";;;;;;;;;AAaA,IAAM,YAAY,eAAmC;CACnD,WAAW,UAAU,WAAW;CAChC,iBAAiB,UAAU;AAC7B;AAEA,IAAa,sCAAsC;CACjD,MAAM,EAAE,gBAAgB,yBAAyB;CAEjD,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,oBAAoB,cAAc,OAAO,QAAQ,OAAO,QAAQ;CAEnF,IAAI,CAAC,gBAAgB,QAAQ,OAAO;CAEpC,OACE,qBAAC,UAAD;EACE,WAAW,KAAK,mCAAmC,EACjD,4CAA4C,UAC9C,CAAC;EACD,UAAU;EACV,eAAe,OAAO,QAAQ,OAAO;YALvC,CAOG,CAAC,aACA,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD,CAAc,CAAA,GACd,oBAAC,QAAD,EAAA,UACG,EAAE,+CAA+C,EAChD,OAAO,gBAAgB,OACzB,CAAC,EACG,CAAA,CACN,EAAA,CAAA,GAEH,aACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,CAAmB,CAAA,GACnB,oBAAC,QAAD,EAAA,UAAO,EAAE,uCAAuC,EAAQ,CAAA,CACxD,EAAA,CAAA,CAEE;;AAEZ"}

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

@@ -0,0 +1,86 @@
+import { getDateString, isDate } from "../../../i18n/utils.mjs";
+import { activeLabelPart, composeAccessibleLabel, unreadCountLabelPart } from "../../../a11y/accessibleLabel.mjs";
+//#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("aria/Chat: {{ channelName }}", { channelName: displayTitle }) : void 0,
+	parentMessage: ({ parentMessagePreview, parentMessageSender, t }) => {
+		if (!parentMessagePreview) return void 0;
+		return t("aria/Thread: {{ messagePreview }}", { messagePreview: parentMessageSender ? `${parentMessageSender}: ${parentMessagePreview}` : parentMessagePreview });
+	},
+	replyCount: ({ replyCount, t }) => typeof replyCount === "number" && replyCount > 0 ? t("replyCount", { count: replyCount }) : void 0,
+	time: ({ latestReply, t, tDateTimeParser }) => {
+		const createdAt = latestReply?.created_at;
+		if (!createdAt || !isDate(createdAt)) return void 0;
+		const when = getDateString({
+			messageCreatedAt: createdAt.toISOString(),
+			t,
+			tDateTimeParser,
+			timestampTranslationKey: "timestamp/ChannelPreviewTimestamp"
+		});
+		return when ? t("aria/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, isDate } from '../../../i18n/utils';\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('aria/Chat: {{ channelName }}', { channelName: displayTitle })\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('aria/Thread: {{ messagePreview }}', { messagePreview: preview });\n  },\n  replyCount: ({ replyCount, t }) =>\n    typeof replyCount === 'number' && replyCount > 0\n      ? t('replyCount', { count: replyCount })\n      : undefined,\n  time: ({ latestReply, t, tDateTimeParser }) => {\n    const createdAt = latestReply?.created_at;\n    if (!createdAt || !isDate(createdAt)) return undefined;\n    const when = getDateString({\n      messageCreatedAt: createdAt.toISOString(),\n      t,\n      tDateTimeParser,\n      timestampTranslationKey: 'timestamp/ChannelPreviewTimestamp',\n    });\n    return when ? t('aria/Last activity: {{ time }}', { time: String(when) }) : 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":";;;;;;;;;AA2DA,IAAa,kCAAkC;CAC7C,QAAQ;CACR,OAAO,EAAE,cAAc,QACrB,eACI,EAAE,gCAAgC,EAAE,aAAa,aAAa,CAAC,IAC/D,KAAA;CAEN,gBAAgB,EAAE,sBAAsB,qBAAqB,QAAQ;EACnE,IAAI,CAAC,sBAAsB,OAAO,KAAA;EAIlC,OAAO,EAAE,qCAAqC,EAAE,gBAHhC,sBACZ,GAAG,oBAAoB,IAAI,yBAC3B,qBACoE,CAAC;CAC3E;CACA,aAAa,EAAE,YAAY,QACzB,OAAO,eAAe,YAAY,aAAa,IAC3C,EAAE,cAAc,EAAE,OAAO,WAAW,CAAC,IACrC,KAAA;CACN,OAAO,EAAE,aAAa,GAAG,sBAAsB;EAC7C,MAAM,YAAY,aAAa;EAC/B,IAAI,CAAC,aAAa,CAAC,OAAO,SAAS,GAAG,OAAO,KAAA;EAC7C,MAAM,OAAO,cAAc;GACzB,kBAAkB,UAAU,YAAY;GACxC;GACA;GACA,yBAAyB;EAC3B,CAAC;EACD,OAAO,OAAO,EAAE,kCAAkC,EAAE,MAAM,OAAO,IAAI,EAAE,CAAC,IAAI,KAAA;CAC9E;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/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,79 @@
+import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useTypingContext } from "../../context/TypingContext.mjs";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.mjs";
+import { AvatarStack } from "../Avatar/AvatarStack.mjs";
+import { extractDisplayInfo } from "../Avatar/utils.mjs";
+import { TypingIndicatorDots } from "./TypingIndicatorDots.mjs";
+import { useDebouncedTypingActive } from "./hooks/useDebouncedTypingActive.mjs";
+import { getTypingStatusMessage } from "./utils/getTypingStatusMessage.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import React, { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TypingIndicator/TypingIndicator.tsx
+/**
+* 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 latest message if isMessageListScrolledToBottom is provided.
+* It must be a child of Channel component.
+*/
+var UnMemoizedTypingIndicator = (props) => {
+	const { isMessageListScrolledToBottom = true, scrollToBottom, threadList } = props;
+	const { AvatarStack: AvatarStack$1 = AvatarStack, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
+	const { channelConfig, thread } = useChannelStateContext("TypingIndicator");
+	const parentId = useThreadContext()?.id ?? thread?.id;
+	const { client } = useChatContext("TypingIndicator");
+	const { t } = useTranslationContext();
+	const { typing = {} } = useTypingContext("TypingIndicator");
+	const typingInChannel = !threadList ? Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && !parent_id) : [];
+	const typingInThread = threadList ? Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId) : [];
+	const { displayUsers } = useDebouncedTypingActive(threadList ? 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 (channelConfig?.typing_events === false) return null;
+	if (!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';\n\nimport { AvatarStack as DefaultAvatarStack } from '../Avatar';\nimport { TypingIndicatorDots } from './TypingIndicatorDots';\nimport { useChannelStateContext } from '../../context/ChannelStateContext';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useTypingContext } from '../../context/TypingContext';\nimport { useThreadContext } from '../Threads';\nimport { VisuallyHidden } from '../VisuallyHidden';\n\nimport { useDebouncedTypingActive } from './hooks/useDebouncedTypingActive';\nimport { getTypingStatusMessage } from './utils/getTypingStatusMessage';\nimport { useComponentContext } from '../../context';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';\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  scrollToBottom: () => void;\n  /** Whether the typing indicator is in a thread */\n  threadList?: boolean;\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 latest message if isMessageListScrolledToBottom is provided.\n * It must be a child of Channel component.\n */\nconst UnMemoizedTypingIndicator = (props: TypingIndicatorProps) => {\n  const { isMessageListScrolledToBottom = true, scrollToBottom, threadList } = props;\n\n  const {\n    AvatarStack = DefaultAvatarStack,\n    extractDisplayInfo = defaultExtractDisplayInfo,\n  } = useComponentContext();\n  const { channelConfig, thread } = useChannelStateContext('TypingIndicator');\n  const threadInstance = useThreadContext();\n  const parentId = threadInstance?.id ?? thread?.id;\n  const { client } = useChatContext('TypingIndicator');\n  const { t } = useTranslationContext();\n  const { typing = {} } = useTypingContext('TypingIndicator');\n\n  const typingInChannel = !threadList\n    ? Object.values(typing).filter(\n        ({ parent_id, user }) => user?.id !== client.user?.id && !parent_id,\n      )\n    : [];\n\n  const typingInThread = threadList\n    ? Object.values(typing).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 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 (channelConfig?.typing_events === false) {\n    return null;\n  }\n\n  if (!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":";;;;;;;;;;;;;;;;;;;;;AA8BA,IAAM,6BAA6B,UAAgC;CACjE,MAAM,EAAE,gCAAgC,MAAM,gBAAgB,eAAe;CAE7E,MAAM,EACJ,aAAA,gBAAc,aACd,oBAAA,uBAAqB,uBACnB,oBAAoB;CACxB,MAAM,EAAE,eAAe,WAAW,uBAAuB,iBAAiB;CAE1E,MAAM,WADiB,iBACN,CAAA,EAAgB,MAAM,QAAQ;CAC/C,MAAM,EAAE,WAAW,eAAe,iBAAiB;CACnD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,SAAS,CAAC,MAAM,iBAAiB,iBAAiB;CAE1D,MAAM,kBAAkB,CAAC,aACrB,OAAO,OAAO,MAAM,CAAC,CAAC,QACnB,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,CAAC,SAC5D,IACA,CAAC;CAEL,MAAM,iBAAiB,aACnB,OAAO,OAAO,MAAM,CAAC,CAAC,QACnB,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,cAAc,QACzE,IACA,CAAC;CAGL,MAAM,EAAE,iBAAiB,yBADL,aAAa,iBAAiB,eACW;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,eAAe;CACrE,GAAG;EAAC;EAAgB;EAA+B;CAAa,CAAC;CAEjE,IAAI,eAAe,kBAAkB,OACnC,OAAO;CAGT,IAAI,CAAC,iBAAiB,CAAC,+BACrB,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,44 @@
+import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useTypingContext } from "../../context/TypingContext.mjs";
+import { TypingIndicatorDots } from "./TypingIndicatorDots.mjs";
+import { useDebouncedTypingActive } from "./hooks/useDebouncedTypingActive.mjs";
+import { getTypingStatusMessage } from "./utils/getTypingStatusMessage.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TypingIndicator/TypingIndicatorHeader.tsx
+/**
+* Inline typing indicator for ChannelHeader or ThreadHeader: text (1/2/3+ people) followed by animated dots.
+* Only shows other participants; respects channelConfig.typing_events.
+*/
+var TypingIndicatorHeader = (props) => {
+	const { threadList = false } = props;
+	const { t } = useTranslationContext();
+	const { channelConfig, thread } = useChannelStateContext("TypingIndicatorHeader");
+	const parentId = useThreadContext()?.id ?? thread?.id;
+	const { client } = useChatContext("TypingIndicatorHeader");
+	const { typing = {} } = useTypingContext("TypingIndicatorHeader");
+	const typingInChannel = !threadList ? Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && !parent_id) : [];
+	const typingInThread = threadList ? Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId) : [];
+	const { displayUsers } = useDebouncedTypingActive(threadList ? typingInThread : typingInChannel);
+	const label = getTypingStatusMessage(displayUsers, t);
+	if (channelConfig?.typing_events === 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 { useChannelStateContext } from '../../context/ChannelStateContext';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useTypingContext } from '../../context/TypingContext';\nimport { useThreadContext } from '../Threads';\n\nimport { useDebouncedTypingActive } from './hooks/useDebouncedTypingActive';\nimport { getTypingStatusMessage } from './utils/getTypingStatusMessage';\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 channelConfig.typing_events.\n */\nexport const TypingIndicatorHeader = (props: TypingIndicatorHeaderProps) => {\n  const { threadList = false } = props;\n\n  const { t } = useTranslationContext();\n  const { channelConfig, thread } = useChannelStateContext('TypingIndicatorHeader');\n  const threadInstance = useThreadContext();\n  const parentId = threadInstance?.id ?? thread?.id;\n  const { client } = useChatContext('TypingIndicatorHeader');\n  const { typing = {} } = useTypingContext('TypingIndicatorHeader');\n\n  const typingInChannel = !threadList\n    ? Object.values(typing).filter(\n        ({ parent_id, user }) => user?.id !== client.user?.id && !parent_id,\n      )\n    : [];\n\n  const typingInThread = threadList\n    ? Object.values(typing).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 (channelConfig?.typing_events === 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":";;;;;;;;;;;;;;;;AAsBA,IAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,aAAa,UAAU;CAE/B,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,eAAe,WAAW,uBAAuB,uBAAuB;CAEhF,MAAM,WADiB,iBACN,CAAA,EAAgB,MAAM,QAAQ;CAC/C,MAAM,EAAE,WAAW,eAAe,uBAAuB;CACzD,MAAM,EAAE,SAAS,CAAC,MAAM,iBAAiB,uBAAuB;CAEhE,MAAM,kBAAkB,CAAC,aACrB,OAAO,OAAO,MAAM,CAAC,CAAC,QACnB,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,CAAC,SAC5D,IACA,CAAC;CAEL,MAAM,iBAAiB,aACnB,OAAO,OAAO,MAAM,CAAC,CAAC,QACnB,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,eAAe,kBAAkB,SAAS,aAAa,WAAW,GACpE,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 { ChannelState } from 'stream-chat';\n\nconst DEFAULT_HIDE_DELAY_MS = 2000;\n\nexport type TypingEntry = ChannelState['typing'][string];\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,15 @@
+//#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 }} is typing", { typing: namedUsers[0] });
+	if (count === 2 && namedUsers.length === 2) return t("{{ typing }} are typing", { typing: `${namedUsers[0]} and ${namedUsers[1]}` });
+	return t("{{ count }} people are typing", { count });
+};
+//#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 { TypingEntry } from '../hooks/useDebouncedTypingActive';\n\ntype TranslationFunction = (\n  key: string,\n  options?: Record<string, number | string>,\n) => string;\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: TranslationFunction,\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 }} is typing', { typing: namedUsers[0] });\n  }\n\n  if (count === 2 && namedUsers.length === 2) {\n    return t('{{ typing }} are typing', {\n      typing: `${namedUsers[0]} and ${namedUsers[1]}`,\n    });\n  }\n\n  return t('{{ count }} people are typing', { count });\n};\n"],"mappings":";;;;AAUA,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,0BAA0B,EAAE,QAAQ,WAAW,GAAG,CAAC;CAG9D,IAAI,UAAU,KAAK,WAAW,WAAW,GACvC,OAAO,EAAE,2BAA2B,EAClC,QAAQ,GAAG,WAAW,GAAG,OAAO,WAAW,KAC7C,CAAC;CAGH,OAAO,EAAE,iCAAiC,EAAE,MAAM,CAAC;AACrD"}

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/NullComponent.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NullComponent.mjs","names":[],"sources":["../../../../src/components/UtilityComponents/NullComponent.tsx"],"sourcesContent":["export const NullComponent = () => null;\n"],"mappings":";AAAA,IAAa,sBAAsB"}

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"}

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

@@ -0,0 +1,20 @@
+import React, { useMemo } from "react";
+import { nanoid } from "nanoid";
+//#region src/components/UtilityComponents/useStableId.ts
+var reactUseId = React.useId;
+var stripUseIdWrappers = (id) => id.replace(/[:«»]/g, "");
+/**
+* Returns a stable, unique string id.
+*
+* On React 18+ this delegates to `React.useId()` (with the surrounding wrapper
+* characters stripped so the value is safe to use anywhere an HTML id is expected)
+* and is SSR-stable. On React 17, it falls back to a client-only id generated via `nanoid`.
+*/
+var useStableId = () => {
+	if (reactUseId) return stripUseIdWrappers(reactUseId());
+	return useMemo(() => nanoid(), []);
+};
+//#endregion
+export { stripUseIdWrappers, useStableId };
+
+//# sourceMappingURL=useStableId.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStableId.mjs","names":[],"sources":["../../../../src/components/UtilityComponents/useStableId.ts"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport React, { useMemo } from 'react';\n\nconst reactUseId = React.useId as (() => string) | undefined;\n\n// Strips React.useId() wrapper characters so the value is safe as an HTML id:\n// from React 19.0 (`:r0:` -> `r0`) and 19.1 (`«r0»` -> `r0`);\n// 19.2+ uses `_r_1_` which is safe and doesn't need stripping\nexport const stripUseIdWrappers = (id: string): string => id.replace(/[:«»]/g, '');\n\n/**\n * Returns a stable, unique string id.\n *\n * On React 18+ this delegates to `React.useId()` (with the surrounding wrapper\n * characters stripped so the value is safe to use anywhere an HTML id is expected)\n * and is SSR-stable. On React 17, it falls back to a client-only id generated via `nanoid`.\n */\nexport const useStableId = () => {\n  if (reactUseId) return stripUseIdWrappers(reactUseId());\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return useMemo(() => nanoid(), []);\n};\n"],"mappings":";;;AAGA,IAAM,aAAa,MAAM;AAKzB,IAAa,sBAAsB,OAAuB,GAAG,QAAQ,UAAU,EAAE;;;;;;;;AASjF,IAAa,oBAAoB;CAC/B,IAAI,YAAY,OAAO,mBAAmB,WAAW,CAAC;CAEtD,OAAO,cAAc,OAAO,GAAG,CAAC,CAAC;AACnC"}