stream-chat-react 14.11.0 → 14.12.0

package/dist/es/components/ChannelListItem/ChannelListItemUI.mjs

@@ -0,0 +1,118 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Badge } from "../Badge/Badge.mjs";
+import { ChannelAvatar } from "../Avatar/ChannelAvatar.mjs";
+import { useInteractionAnnouncements } from "../Accessibility/hooks/useInteractionAnnouncements.mjs";
+import { ChannelListItemActionButtons } from "./ChannelListItemActionButtons.mjs";
+import { ChannelListItemTimestamp } from "./ChannelListItemTimestamp.mjs";
+import { composeChannelListItemAccessibleLabel } from "./utils.a11y.mjs";
+import { SummarizedMessagePreview } from "../SummarizedMessagePreview/SummarizedMessagePreview.mjs";
+import React, { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/ChannelListItem/ChannelListItemUI.tsx
+var UnMemoizedChannelListItemUI = (props) => {
+	const { accessibleLabelConfig, active, channel, className: customClassName = "", displayImage, displayTitle, groupChannelDisplayInfo, lastMessage, messageDeliveryStatus, muted, onSelect: customOnSelectChannel, pinned, setActiveChannel, unread, watchers } = props;
+	const { Avatar = ChannelAvatar, ChannelListItemActionButtons: ChannelListItemActionButtons$1 = ChannelListItemActionButtons } = useComponentContext();
+	const { IconMute, IconPin } = useComponentContextIcons();
+	const { client, isMessageAIGenerated } = useChatContext("ChannelListItemUI");
+	const { t, tDateTimeParser, userLanguage } = useTranslationContext("ChannelListItemUI");
+	const { announceInteraction } = useInteractionAnnouncements();
+	const channelPreviewButton = useRef(null);
+	const accessibleLabel = useMemo(() => composeChannelListItemAccessibleLabel({
+		active,
+		channel,
+		client,
+		displayTitle,
+		isMessageAIGenerated,
+		latestMessage: lastMessage,
+		messageDeliveryStatus,
+		t,
+		tDateTimeParser,
+		unreadCount: unread,
+		userLanguage
+	}, accessibleLabelConfig), [
+		accessibleLabelConfig,
+		active,
+		channel,
+		client,
+		displayTitle,
+		isMessageAIGenerated,
+		lastMessage,
+		messageDeliveryStatus,
+		muted,
+		pinned,
+		t,
+		tDateTimeParser,
+		unread,
+		userLanguage
+	]);
+	const avatarName = displayTitle || channel.state.messages[channel.state.messages.length - 1]?.user?.id;
+	const onSelectChannel = (e) => {
+		if (customOnSelectChannel) customOnSelectChannel(e);
+		else if (setActiveChannel) {
+			setActiveChannel(channel, watchers);
+			if (!active && displayTitle) announceInteraction("channel.opened", { name: displayTitle });
+		}
+		if (channelPreviewButton?.current) channelPreviewButton.current.blur();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-list-item-container",
+		children: [/* @__PURE__ */ jsxs("button", {
+			"aria-label": accessibleLabel,
+			"aria-selected": active || void 0,
+			className: clsx("str-chat__channel-list-item", {
+				"str-chat__channel-list-item--muted": muted,
+				"str-chat__channel-list-item--pinned": pinned,
+				"str-chat__channel-list-item--unread": typeof unread === "number" && unread > 0
+			}, customClassName),
+			"data-testid": "channel-list-item-button",
+			onClick: onSelectChannel,
+			ref: channelPreviewButton,
+			role: "option",
+			children: [/* @__PURE__ */ jsx(Avatar, {
+				"aria-hidden": "true",
+				displayMembers: groupChannelDisplayInfo?.members,
+				imageUrl: displayImage,
+				size: "xl",
+				userName: avatarName
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "str-chat__channel-list-item-data",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "str-chat__channel-list-item-data__first-row",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "str-chat__channel-list-item-data__title",
+						children: [
+							/* @__PURE__ */ jsx("span", { children: displayTitle || "N/A" }),
+							pinned && /* @__PURE__ */ jsx(IconPin, {}),
+							muted && /* @__PURE__ */ jsx(IconMute, {})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "str-chat__channel-list-item-data__timestamp-and-badge",
+						children: [/* @__PURE__ */ jsx(ChannelListItemTimestamp, { lastMessage }), typeof unread === "number" && unread > 0 && /* @__PURE__ */ jsx(Badge, {
+							"data-testid": "unread-badge",
+							size: "md",
+							variant: "primary",
+							children: unread
+						})]
+					})]
+				}), /* @__PURE__ */ jsx(SummarizedMessagePreview, {
+					latestMessage: lastMessage,
+					messageDeliveryStatus,
+					participantCount: channel.data?.member_count
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(ChannelListItemActionButtons$1, {})]
+	});
+};
+/**
+* Used as preview component for channel item in [ChannelList](#channellist) component.
+* Its best suited for messenger type chat.
+*/
+var ChannelListItemUI = React.memo(UnMemoizedChannelListItemUI);
+//#endregion
+export { ChannelListItemUI };
+
+//# sourceMappingURL=ChannelListItemUI.mjs.map

package/dist/es/components/ChannelListItem/ChannelListItemUI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListItemUI.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/ChannelListItemUI.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { ChannelListItemActionButtons as DefaultChannelListItemActionButtons } from './ChannelListItemActionButtons';\nimport { ChannelListItemTimestamp } from './ChannelListItemTimestamp';\n\nimport { ChannelAvatar as DefaultChannelAvatar } from '../Avatar';\nimport { Badge } from '../Badge';\nimport { useInteractionAnnouncements } from '../Accessibility';\nimport {\n  useChatContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport type { ChannelListItemUIProps } from './ChannelListItem';\nimport { composeChannelListItemAccessibleLabel } from './utils.a11y';\nimport { SummarizedMessagePreview } from '../SummarizedMessagePreview';\n\nconst UnMemoizedChannelListItemUI = (props: ChannelListItemUIProps) => {\n  const {\n    accessibleLabelConfig,\n    active,\n    channel,\n    className: customClassName = '',\n    displayImage,\n    displayTitle,\n    groupChannelDisplayInfo,\n    lastMessage,\n    messageDeliveryStatus,\n    muted,\n    onSelect: customOnSelectChannel,\n    pinned,\n    setActiveChannel,\n    unread,\n    watchers,\n  } = props;\n\n  const {\n    Avatar = DefaultChannelAvatar,\n    ChannelListItemActionButtons = DefaultChannelListItemActionButtons,\n  } = useComponentContext();\n  const { IconMute, IconPin } = useComponentContextIcons();\n  const { client, isMessageAIGenerated } = useChatContext('ChannelListItemUI');\n  const { t, tDateTimeParser, userLanguage } = useTranslationContext('ChannelListItemUI');\n  const { announceInteraction } = useInteractionAnnouncements();\n\n  const channelPreviewButton = useRef<HTMLButtonElement | null>(null);\n\n  // Composed accessible name for the row. Built here (the overridable presentation component) so a\n  // `ComponentContext`-supplied `ChannelListItemUI` can configure it via `accessibleLabelConfig`.\n  const accessibleLabel = useMemo(\n    () =>\n      composeChannelListItemAccessibleLabel(\n        {\n          active,\n          channel,\n          client,\n          displayTitle,\n          isMessageAIGenerated,\n          latestMessage: lastMessage,\n          messageDeliveryStatus,\n          t,\n          tDateTimeParser,\n          unreadCount: unread,\n          userLanguage,\n        },\n        accessibleLabelConfig,\n      ),\n    // `muted`/`pinned` are intentional recompute triggers: the parts read\n    // `channel.state` / channel mute & membership state (which ESLint can't see and which do not\n    // themselves trigger a re-render), so we key on the state ChannelListItem already tracks.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      accessibleLabelConfig,\n      active,\n      channel,\n      client,\n      displayTitle,\n      isMessageAIGenerated,\n      lastMessage,\n      messageDeliveryStatus,\n      muted,\n      pinned,\n      t,\n      tDateTimeParser,\n      unread,\n      userLanguage,\n    ],\n  );\n\n  const avatarName =\n    displayTitle || channel.state.messages[channel.state.messages.length - 1]?.user?.id;\n\n  const onSelectChannel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (customOnSelectChannel) {\n      customOnSelectChannel(e);\n    } else if (setActiveChannel) {\n      setActiveChannel(channel, watchers);\n      // Confirm the opened channel to assistive tech. Only when actually switching (not re-selecting\n      // the open one) and only via the default selection path — a custom `onSelect` owns its own\n      // feedback. Debounced in the registry so it lands after the composer's focus announcement.\n      if (!active && displayTitle) {\n        announceInteraction('channel.opened', { name: displayTitle });\n      }\n    }\n    if (channelPreviewButton?.current) {\n      channelPreviewButton.current.blur();\n    }\n  };\n\n  return (\n    <div className='str-chat__channel-list-item-container'>\n      <button\n        aria-label={accessibleLabel}\n        // Single-select list: set aria-selected only on the active row. Setting it (false) on every\n        // other row makes screen readers announce \"not selected\" on each one — noise.\n        aria-selected={active || undefined}\n        className={clsx(\n          'str-chat__channel-list-item',\n          {\n            'str-chat__channel-list-item--muted': muted,\n            'str-chat__channel-list-item--pinned': pinned,\n            'str-chat__channel-list-item--unread':\n              typeof unread === 'number' && unread > 0,\n          },\n          customClassName,\n        )}\n        data-testid='channel-list-item-button'\n        onClick={onSelectChannel}\n        ref={channelPreviewButton}\n        role='option'\n      >\n        <Avatar\n          aria-hidden='true'\n          displayMembers={groupChannelDisplayInfo?.members}\n          imageUrl={displayImage}\n          size='xl'\n          userName={avatarName}\n        />\n        <div className='str-chat__channel-list-item-data'>\n          <div className='str-chat__channel-list-item-data__first-row'>\n            <div className='str-chat__channel-list-item-data__title'>\n              <span>{displayTitle || 'N/A'}</span>\n              {pinned && <IconPin />}\n              {muted && <IconMute />}\n            </div>\n            <div className='str-chat__channel-list-item-data__timestamp-and-badge'>\n              <ChannelListItemTimestamp lastMessage={lastMessage} />\n              {typeof unread === 'number' && unread > 0 && (\n                <Badge data-testid='unread-badge' size='md' variant='primary'>\n                  {unread}\n                </Badge>\n              )}\n            </div>\n          </div>\n          <SummarizedMessagePreview\n            latestMessage={lastMessage}\n            messageDeliveryStatus={messageDeliveryStatus}\n            participantCount={channel.data?.member_count}\n          />\n        </div>\n      </button>\n      <ChannelListItemActionButtons />\n    </div>\n  );\n};\n\n/**\n * Used as preview component for channel item in [ChannelList](#channellist) component.\n * Its best suited for messenger type chat.\n */\nexport const ChannelListItemUI = React.memo(\n  UnMemoizedChannelListItemUI,\n) as typeof UnMemoizedChannelListItemUI;\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,IAAM,+BAA+B,UAAkC;CACrE,MAAM,EACJ,uBACA,QACA,SACA,WAAW,kBAAkB,IAC7B,cACA,cACA,yBACA,aACA,uBACA,OACA,UAAU,uBACV,QACA,kBACA,QACA,aACE;CAEJ,MAAM,EACJ,SAAS,eACT,8BAAA,iCAA+B,iCAC7B,oBAAoB;CACxB,MAAM,EAAE,UAAU,YAAY,yBAAyB;CACvD,MAAM,EAAE,QAAQ,yBAAyB,eAAe,mBAAmB;CAC3E,MAAM,EAAE,GAAG,iBAAiB,iBAAiB,sBAAsB,mBAAmB;CACtF,MAAM,EAAE,wBAAwB,4BAA4B;CAE5D,MAAM,uBAAuB,OAAiC,IAAI;CAIlE,MAAM,kBAAkB,cAEpB,sCACE;EACE;EACA;EACA;EACA;EACA;EACA,eAAe;EACf;EACA;EACA;EACA,aAAa;EACb;CACF,GACA,qBACF,GAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,aACJ,gBAAgB,QAAQ,MAAM,SAAS,QAAQ,MAAM,SAAS,SAAS,EAAE,EAAE,MAAM;CAEnF,MAAM,mBAAmB,MAA2C;EAClE,IAAI,uBACF,sBAAsB,CAAC;OAClB,IAAI,kBAAkB;GAC3B,iBAAiB,SAAS,QAAQ;GAIlC,IAAI,CAAC,UAAU,cACb,oBAAoB,kBAAkB,EAAE,MAAM,aAAa,CAAC;EAEhE;EACA,IAAI,sBAAsB,SACxB,qBAAqB,QAAQ,KAAK;CAEtC;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,UAAD;GACE,cAAY;GAGZ,iBAAe,UAAU,KAAA;GACzB,WAAW,KACT,+BACA;IACE,sCAAsC;IACtC,uCAAuC;IACvC,uCACE,OAAO,WAAW,YAAY,SAAS;GAC3C,GACA,eACF;GACA,eAAY;GACZ,SAAS;GACT,KAAK;GACL,MAAK;aAlBP,CAoBE,oBAAC,QAAD;IACE,eAAY;IACZ,gBAAgB,yBAAyB;IACzC,UAAU;IACV,MAAK;IACL,UAAU;GACX,CAAA,GACD,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,oBAAC,QAAD,EAAA,UAAO,gBAAgB,MAAY,CAAA;OAClC,UAAU,oBAAC,SAAD,CAAU,CAAA;OACpB,SAAS,oBAAC,UAAD,CAAW,CAAA;MAClB;SACL,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,0BAAD,EAAuC,YAAc,CAAA,GACpD,OAAO,WAAW,YAAY,SAAS,KACtC,oBAAC,OAAD;OAAO,eAAY;OAAe,MAAK;OAAK,SAAQ;iBACjD;MACI,CAAA,CAEN;OACF;QACL,oBAAC,0BAAD;KACE,eAAe;KACQ;KACvB,kBAAkB,QAAQ,MAAM;IACjC,CAAA,CACE;KACC;MACR,oBAAC,gCAAD,CAA+B,CAAA,CAC5B;;AAET;;;;;AAMA,IAAa,oBAAoB,MAAM,KACrC,2BACF"}

package/dist/es/components/ChannelListItem/hooks/useChannelDisplayName.mjs

@@ -0,0 +1,56 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useEffect, useState } from "react";
+//#region src/components/ChannelListItem/hooks/useChannelDisplayName.ts
+/**
+* 1. channel.data.name
+* 2. DM (exactly 2 members): other member's name, then directMessageLabel
+* 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)
+* 4. undefined otherwise
+*/
+function computeChannelDisplayName(channel, directMessageLabel, currentUserId) {
+	const data = channel.data;
+	if (data?.name && typeof data.name === "string") return data.name;
+	const memberList = Object.values(channel.state.members);
+	const otherMembers = memberList.filter((m) => m.user?.id !== currentUserId);
+	if (memberList.length === 2 && otherMembers.length === 1) return otherMembers[0].user?.name || directMessageLabel;
+	if (otherMembers.length >= 2) {
+		const names = otherMembers.map((m) => m.user?.name).filter(Boolean).slice(0, 2);
+		if (names.length > 0) return names.join(", ");
+	}
+}
+/**
+* Channel display name with translation context.
+* 1. channel.data.name
+* 2. DM (exactly 2 members): other member's name, then translated "Direct message"
+* 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)
+* 4. undefined otherwise
+*/
+var useChannelDisplayName = (channel) => {
+	const { client } = useChatContext("useChannelDisplayName");
+	const { t } = useTranslationContext("useChannelDisplayName");
+	const directMessageLabel = t("Direct message");
+	const [displayName, setDisplayName] = useState(() => channel ? computeChannelDisplayName(channel, directMessageLabel, client.userID ?? void 0) : void 0);
+	useEffect(() => {
+		if (!channel) {
+			setDisplayName(void 0);
+			return;
+		}
+		const updateDisplayName = () => setDisplayName(computeChannelDisplayName(channel, directMessageLabel, client.userID ?? void 0));
+		updateDisplayName();
+		client.on("user.updated", updateDisplayName);
+		return () => {
+			client.off("user.updated", updateDisplayName);
+		};
+	}, [
+		channel,
+		channel?.data,
+		client,
+		directMessageLabel
+	]);
+	return displayName;
+};
+//#endregion
+export { useChannelDisplayName };
+
+//# sourceMappingURL=useChannelDisplayName.mjs.map

package/dist/es/components/ChannelListItem/hooks/useChannelDisplayName.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelDisplayName.mjs","names":[],"sources":["../../../../../src/components/ChannelListItem/hooks/useChannelDisplayName.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { Channel } from 'stream-chat';\n\nimport { useChatContext } from '../../../context';\nimport { useTranslationContext } from '../../../context/TranslationContext';\n\n/**\n * 1. channel.data.name\n * 2. DM (exactly 2 members): other member's name, then directMessageLabel\n * 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)\n * 4. undefined otherwise\n */\nfunction computeChannelDisplayName(\n  channel: Channel,\n  directMessageLabel: string,\n  currentUserId: string | undefined,\n): string | undefined {\n  const data = channel.data as { name?: string } | undefined;\n  if (data?.name && typeof data.name === 'string') return data.name;\n\n  const memberList = Object.values(channel.state.members);\n  const otherMembers = memberList.filter((m) => m.user?.id !== currentUserId);\n\n  if (memberList.length === 2 && otherMembers.length === 1) {\n    const name = otherMembers[0].user?.name;\n    return name || directMessageLabel;\n  }\n  if (otherMembers.length >= 2) {\n    const names = otherMembers\n      .map((m) => m.user?.name)\n      .filter(Boolean)\n      .slice(0, 2) as string[];\n    if (names.length > 0) return names.join(', ');\n  }\n  return undefined;\n}\n\n/**\n * Channel display name with translation context.\n * 1. channel.data.name\n * 2. DM (exactly 2 members): other member's name, then translated \"Direct message\"\n * 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)\n * 4. undefined otherwise\n */\nexport const useChannelDisplayName = (\n  channel: Channel | undefined,\n): string | undefined => {\n  const { client } = useChatContext('useChannelDisplayName');\n  const { t } = useTranslationContext('useChannelDisplayName');\n  const directMessageLabel = t('Direct message');\n\n  const [displayName, setDisplayName] = useState<string | undefined>(() =>\n    channel\n      ? computeChannelDisplayName(channel, directMessageLabel, client.userID ?? undefined)\n      : undefined,\n  );\n\n  useEffect(() => {\n    if (!channel) {\n      setDisplayName(undefined);\n      return;\n    }\n    const updateDisplayName = () =>\n      setDisplayName(\n        computeChannelDisplayName(\n          channel,\n          directMessageLabel,\n          client.userID ?? undefined,\n        ),\n      );\n    updateDisplayName();\n    client.on('user.updated', updateDisplayName);\n    return () => {\n      client.off('user.updated', updateDisplayName);\n    };\n  }, [channel, channel?.data, client, directMessageLabel]);\n\n  return displayName;\n};\n"],"mappings":";;;;;;;;;;AAYA,SAAS,0BACP,SACA,oBACA,eACoB;CACpB,MAAM,OAAO,QAAQ;CACrB,IAAI,MAAM,QAAQ,OAAO,KAAK,SAAS,UAAU,OAAO,KAAK;CAE7D,MAAM,aAAa,OAAO,OAAO,QAAQ,MAAM,OAAO;CACtD,MAAM,eAAe,WAAW,QAAQ,MAAM,EAAE,MAAM,OAAO,aAAa;CAE1E,IAAI,WAAW,WAAW,KAAK,aAAa,WAAW,GAErD,OADa,aAAa,EAAE,CAAC,MAAM,QACpB;CAEjB,IAAI,aAAa,UAAU,GAAG;EAC5B,MAAM,QAAQ,aACX,KAAK,MAAM,EAAE,MAAM,IAAI,CAAC,CACxB,OAAO,OAAO,CAAC,CACf,MAAM,GAAG,CAAC;EACb,IAAI,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,IAAI;CAC9C;AAEF;;;;;;;;AASA,IAAa,yBACX,YACuB;CACvB,MAAM,EAAE,WAAW,eAAe,uBAAuB;CACzD,MAAM,EAAE,MAAM,sBAAsB,uBAAuB;CAC3D,MAAM,qBAAqB,EAAE,gBAAgB;CAE7C,MAAM,CAAC,aAAa,kBAAkB,eACpC,UACI,0BAA0B,SAAS,oBAAoB,OAAO,UAAU,KAAA,CAAS,IACjF,KAAA,CACN;CAEA,gBAAgB;EACd,IAAI,CAAC,SAAS;GACZ,eAAe,KAAA,CAAS;GACxB;EACF;EACA,MAAM,0BACJ,eACE,0BACE,SACA,oBACA,OAAO,UAAU,KAAA,CACnB,CACF;EACF,kBAAkB;EAClB,OAAO,GAAG,gBAAgB,iBAAiB;EAC3C,aAAa;GACX,OAAO,IAAI,gBAAgB,iBAAiB;EAC9C;CACF,GAAG;EAAC;EAAS,SAAS;EAAM;EAAQ;CAAkB,CAAC;CAEvD,OAAO;AACT"}

package/dist/es/components/ChannelListItem/hooks/useChannelPreviewInfo.mjs

@@ -0,0 +1,51 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { getChannelDisplayImage, getGroupChannelDisplayInfo } from "../utils.mjs";
+import { useChannelDisplayName } from "./useChannelDisplayName.mjs";
+import { useEffect, useMemo, useState } from "react";
+//#region src/components/ChannelListItem/hooks/useChannelPreviewInfo.ts
+var emptyGroupInfo = {
+	members: [],
+	overflowCount: void 0
+};
+var useChannelPreviewInfo = (props) => {
+	const { channel, overrideImage, overrideTitle } = props;
+	const { client } = useChatContext();
+	const channelDisplayName = useChannelDisplayName(channel);
+	const displayTitle = overrideTitle ?? channelDisplayName;
+	const [displayImage, setDisplayImage] = useState(() => channel ? overrideImage ?? getChannelDisplayImage(channel, client.userID ?? void 0) : void 0);
+	const [groupChannelDisplayInfo, setGroupChannelDisplayInfo] = useState(() => channel ? getGroupChannelDisplayInfo(channel) ?? emptyGroupInfo : emptyGroupInfo);
+	useEffect(() => {
+		if (!channel) return;
+		if (overrideImage) return;
+		const updateInfo = () => {
+			setDisplayImage(getChannelDisplayImage(channel, client.userID ?? void 0));
+			setGroupChannelDisplayInfo(getGroupChannelDisplayInfo(channel) ?? emptyGroupInfo);
+		};
+		updateInfo();
+		const { unsubscribe: unsubscribeChannelUpdated } = channel.on("channel.updated", updateInfo);
+		const { unsubscribe: unsubscribeUserUpdated } = client.on("user.updated", updateInfo);
+		return () => {
+			unsubscribeChannelUpdated();
+			unsubscribeUserUpdated();
+		};
+	}, [
+		channel,
+		channel?.data,
+		client,
+		overrideImage
+	]);
+	return useMemo(() => ({
+		displayImage: overrideImage ?? displayImage,
+		displayTitle,
+		groupChannelDisplayInfo
+	}), [
+		displayImage,
+		displayTitle,
+		groupChannelDisplayInfo,
+		overrideImage
+	]);
+};
+//#endregion
+export { useChannelPreviewInfo };
+
+//# sourceMappingURL=useChannelPreviewInfo.mjs.map

package/dist/es/components/ChannelListItem/hooks/useChannelPreviewInfo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelPreviewInfo.mjs","names":[],"sources":["../../../../../src/components/ChannelListItem/hooks/useChannelPreviewInfo.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport type { Channel } from 'stream-chat';\n\nimport { useChatContext } from '../../../context';\nimport {\n  getChannelDisplayImage,\n  getGroupChannelDisplayInfo,\n  type GroupChannelDisplayInfo,\n} from '../utils';\nimport { useChannelDisplayName } from './useChannelDisplayName';\n\nconst emptyGroupInfo: GroupChannelDisplayInfo = {\n  members: [],\n  overflowCount: undefined,\n};\n\nexport type ChannelPreviewInfoParams = {\n  /** Channel to read display info from; when undefined, returns undefined display title/image */\n  channel?: Channel;\n  /** Manually set the image to render, defaults to the Channel image */\n  overrideImage?: string;\n  /** Set title manually */\n  overrideTitle?: string;\n};\n\nexport const useChannelPreviewInfo = (props: ChannelPreviewInfoParams) => {\n  const { channel, overrideImage, overrideTitle } = props;\n  const { client } = useChatContext();\n\n  const channelDisplayName = useChannelDisplayName(channel);\n  const displayTitle = overrideTitle ?? channelDisplayName;\n\n  const [displayImage, setDisplayImage] = useState<string | undefined>(() =>\n    channel\n      ? (overrideImage ?? getChannelDisplayImage(channel, client.userID ?? undefined))\n      : undefined,\n  );\n  const [groupChannelDisplayInfo, setGroupChannelDisplayInfo] =\n    useState<GroupChannelDisplayInfo>(() =>\n      channel ? (getGroupChannelDisplayInfo(channel) ?? emptyGroupInfo) : emptyGroupInfo,\n    );\n\n  useEffect(() => {\n    if (!channel) return;\n    if (overrideImage) return;\n\n    const updateInfo = () => {\n      setDisplayImage(getChannelDisplayImage(channel, client.userID ?? undefined));\n      setGroupChannelDisplayInfo(getGroupChannelDisplayInfo(channel) ?? emptyGroupInfo);\n    };\n\n    updateInfo();\n    const { unsubscribe: unsubscribeChannelUpdated } = channel.on(\n      'channel.updated',\n      updateInfo,\n    );\n    const { unsubscribe: unsubscribeUserUpdated } = client.on('user.updated', updateInfo);\n    return () => {\n      unsubscribeChannelUpdated();\n      unsubscribeUserUpdated();\n    };\n  }, [channel, channel?.data, client, overrideImage]);\n\n  return useMemo(\n    () => ({\n      displayImage: overrideImage ?? displayImage,\n      displayTitle,\n      groupChannelDisplayInfo,\n    }),\n    [displayImage, displayTitle, groupChannelDisplayInfo, overrideImage],\n  );\n};\n"],"mappings":";;;;;AAWA,IAAM,iBAA0C;CAC9C,SAAS,CAAC;CACV,eAAe,KAAA;AACjB;AAWA,IAAa,yBAAyB,UAAoC;CACxE,MAAM,EAAE,SAAS,eAAe,kBAAkB;CAClD,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,qBAAqB,sBAAsB,OAAO;CACxD,MAAM,eAAe,iBAAiB;CAEtC,MAAM,CAAC,cAAc,mBAAmB,eACtC,UACK,iBAAiB,uBAAuB,SAAS,OAAO,UAAU,KAAA,CAAS,IAC5E,KAAA,CACN;CACA,MAAM,CAAC,yBAAyB,8BAC9B,eACE,UAAW,2BAA2B,OAAO,KAAK,iBAAkB,cACtE;CAEF,gBAAgB;EACd,IAAI,CAAC,SAAS;EACd,IAAI,eAAe;EAEnB,MAAM,mBAAmB;GACvB,gBAAgB,uBAAuB,SAAS,OAAO,UAAU,KAAA,CAAS,CAAC;GAC3E,2BAA2B,2BAA2B,OAAO,KAAK,cAAc;EAClF;EAEA,WAAW;EACX,MAAM,EAAE,aAAa,8BAA8B,QAAQ,GACzD,mBACA,UACF;EACA,MAAM,EAAE,aAAa,2BAA2B,OAAO,GAAG,gBAAgB,UAAU;EACpF,aAAa;GACX,0BAA0B;GAC1B,uBAAuB;EACzB;CACF,GAAG;EAAC;EAAS,SAAS;EAAM;EAAQ;CAAa,CAAC;CAElD,OAAO,eACE;EACL,cAAc,iBAAiB;EAC/B;EACA;CACF,IACA;EAAC;EAAc;EAAc;EAAyB;CAAa,CACrE;AACF"}

package/dist/es/components/ChannelListItem/hooks/useIsChannelMuted.mjs

@@ -0,0 +1,33 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useEffect, useState } from "react";
+//#region src/components/ChannelListItem/hooks/useIsChannelMuted.ts
+/**
+* `channel.muteStatus()` throws in two cases:
+* - the channel has not been initialized yet (i.e. `.watch()`/`.query()` has not
+*   resolved) - the ChannelList can briefly hold such channels, e.g. a
+*   `message.new` for a channel that has not been watched yet (#2474);
+* - the channel is disconnected (e.g. after `client.disconnectUser()`), in which
+*   case `channel.getClient()` throws even though the channel stays initialized
+*   (#2393 failure class).
+* Guard against both to avoid crashing the whole app.
+*/
+var getMuteStatus = (channel) => channel.initialized && !channel.disconnected ? channel.muteStatus() : {
+	createdAt: null,
+	expiresAt: null,
+	muted: false
+};
+var useIsChannelMuted = (channel) => {
+	const { client } = useChatContext("useIsChannelMuted");
+	const [muted, setMuted] = useState(() => getMuteStatus(channel));
+	useEffect(() => {
+		const handleEvent = () => {
+			setMuted(getMuteStatus(channel));
+		};
+		return client.on("notification.channel_mutes_updated", handleEvent).unsubscribe;
+	}, [channel, client]);
+	return muted;
+};
+//#endregion
+export { useIsChannelMuted };
+
+//# sourceMappingURL=useIsChannelMuted.mjs.map

package/dist/es/components/ChannelListItem/hooks/useIsChannelMuted.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsChannelMuted.mjs","names":[],"sources":["../../../../../src/components/ChannelListItem/hooks/useIsChannelMuted.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useChatContext } from '../../../context/ChatContext';\n\nimport type { Channel } from 'stream-chat';\n\n/**\n * `channel.muteStatus()` throws in two cases:\n * - the channel has not been initialized yet (i.e. `.watch()`/`.query()` has not\n *   resolved) - the ChannelList can briefly hold such channels, e.g. a\n *   `message.new` for a channel that has not been watched yet (#2474);\n * - the channel is disconnected (e.g. after `client.disconnectUser()`), in which\n *   case `channel.getClient()` throws even though the channel stays initialized\n *   (#2393 failure class).\n * Guard against both to avoid crashing the whole app.\n */\nconst getMuteStatus = (channel: Channel) =>\n  channel.initialized && !channel.disconnected\n    ? channel.muteStatus()\n    : { createdAt: null, expiresAt: null, muted: false };\n\nexport const useIsChannelMuted = (channel: Channel) => {\n  const { client } = useChatContext('useIsChannelMuted');\n\n  const [muted, setMuted] = useState(() => getMuteStatus(channel));\n\n  useEffect(() => {\n    const handleEvent = () => {\n      setMuted(getMuteStatus(channel));\n    };\n\n    return client.on('notification.channel_mutes_updated', handleEvent).unsubscribe;\n  }, [channel, client]);\n\n  return muted;\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,iBAAiB,YACrB,QAAQ,eAAe,CAAC,QAAQ,eAC5B,QAAQ,WAAW,IACnB;CAAE,WAAW;CAAM,WAAW;CAAM,OAAO;AAAM;AAEvD,IAAa,qBAAqB,YAAqB;CACrD,MAAM,EAAE,WAAW,eAAe,mBAAmB;CAErD,MAAM,CAAC,OAAO,YAAY,eAAe,cAAc,OAAO,CAAC;CAE/D,gBAAgB;EACd,MAAM,oBAAoB;GACxB,SAAS,cAAc,OAAO,CAAC;EACjC;EAEA,OAAO,OAAO,GAAG,sCAAsC,WAAW,CAAC,CAAC;CACtE,GAAG,CAAC,SAAS,MAAM,CAAC;CAEpB,OAAO;AACT"}

package/dist/es/components/ChannelListItem/hooks/useIsUserMuted.mjs

@@ -0,0 +1,11 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useMemo } from "react";
+//#region src/components/ChannelListItem/hooks/useIsUserMuted.ts
+var useIsUserMuted = (targetUserId) => {
+	const { mutes } = useChatContext();
+	return useMemo(() => !!targetUserId && mutes.some((mute) => mute.target.id === targetUserId), [mutes, targetUserId]);
+};
+//#endregion
+export { useIsUserMuted };
+
+//# sourceMappingURL=useIsUserMuted.mjs.map

package/dist/es/components/ChannelListItem/hooks/useIsUserMuted.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsUserMuted.mjs","names":[],"sources":["../../../../../src/components/ChannelListItem/hooks/useIsUserMuted.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useChatContext } from '../../../context/ChatContext';\n\nexport const useIsUserMuted = (targetUserId?: string) => {\n  const { mutes } = useChatContext();\n\n  return useMemo(\n    () => !!targetUserId && mutes.some((mute) => mute.target.id === targetUserId),\n    [mutes, targetUserId],\n  );\n};\n"],"mappings":";;;AAIA,IAAa,kBAAkB,iBAA0B;CACvD,MAAM,EAAE,UAAU,eAAe;CAEjC,OAAO,cACC,CAAC,CAAC,gBAAgB,MAAM,MAAM,SAAS,KAAK,OAAO,OAAO,YAAY,GAC5E,CAAC,OAAO,YAAY,CACtB;AACF"}

package/dist/es/components/ChannelListItem/hooks/useMessageDeliveryStatus.mjs

@@ -0,0 +1,68 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useCallback, useEffect, useState } from "react";
+//#region src/components/ChannelListItem/hooks/useMessageDeliveryStatus.ts
+var MessageDeliveryStatus = /* @__PURE__ */ function(MessageDeliveryStatus) {
+	MessageDeliveryStatus["SENT"] = "sent";
+	MessageDeliveryStatus["DELIVERED"] = "delivered";
+	MessageDeliveryStatus["READ"] = "read";
+	return MessageDeliveryStatus;
+}({});
+var useMessageDeliveryStatus = ({ channel, lastMessage }) => {
+	const { client } = useChatContext();
+	const [messageDeliveryStatus, setMessageDeliveryStatus] = useState();
+	const isOwnMessage = useCallback((message) => client.user && message && message.user?.id === client.user.id, [client]);
+	useEffect(() => {
+		if (!lastMessage) setMessageDeliveryStatus(void 0);
+		const lastMessageIsOwn = isOwnMessage(lastMessage);
+		if (!lastMessage?.created_at || !lastMessageIsOwn) return;
+		const msgRef = {
+			msgId: lastMessage.id,
+			timestampMs: lastMessage.created_at.getTime()
+		};
+		const readersForMessage = channel.messageReceiptsTracker.readersForMessage(msgRef);
+		const deliveredForMessage = channel.messageReceiptsTracker.deliveredForMessage(msgRef);
+		setMessageDeliveryStatus(readersForMessage.length > 1 || readersForMessage.length === 1 && readersForMessage[0].id !== client.user?.id ? "read" : deliveredForMessage.length > 1 || deliveredForMessage.length === 1 && deliveredForMessage[0].id !== client.user?.id ? "delivered" : "sent");
+	}, [
+		channel,
+		client,
+		isOwnMessage,
+		lastMessage
+	]);
+	useEffect(() => {
+		const handleMessageNew = (event) => {
+			if (!isOwnMessage(event.message)) return setMessageDeliveryStatus(void 0);
+			return setMessageDeliveryStatus("sent");
+		};
+		channel.on("message.new", handleMessageNew);
+		return () => {
+			channel.off("message.new", handleMessageNew);
+		};
+	}, [channel, isOwnMessage]);
+	useEffect(() => {
+		if (!isOwnMessage(lastMessage)) return;
+		const handleMessageDelivered = (event) => {
+			if (event.user?.id !== client.user?.id && lastMessage && lastMessage.id === event.last_delivered_message_id) setMessageDeliveryStatus("delivered");
+		};
+		const handleMarkRead = (event) => {
+			if (event.user?.id !== client.user?.id) setMessageDeliveryStatus("read");
+		};
+		channel.on("message.delivered", handleMessageDelivered);
+		channel.on("message.read", handleMarkRead);
+		channel.on("message.read_locally", handleMarkRead);
+		return () => {
+			channel.off("message.delivered", handleMessageDelivered);
+			channel.off("message.read", handleMarkRead);
+			channel.off("message.read_locally", handleMarkRead);
+		};
+	}, [
+		channel,
+		client,
+		isOwnMessage,
+		lastMessage
+	]);
+	return { messageDeliveryStatus };
+};
+//#endregion
+export { MessageDeliveryStatus, useMessageDeliveryStatus };
+
+//# sourceMappingURL=useMessageDeliveryStatus.mjs.map

package/dist/es/components/ChannelListItem/hooks/useMessageDeliveryStatus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageDeliveryStatus.mjs","names":[],"sources":["../../../../../src/components/ChannelListItem/hooks/useMessageDeliveryStatus.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport type { Channel, Event, LocalMessage, UserResponse } from 'stream-chat';\n\nimport { useChatContext } from '../../../context';\n\nexport enum MessageDeliveryStatus {\n  SENT = 'sent',\n  DELIVERED = 'delivered',\n  READ = 'read',\n}\n\ntype UseMessageStatusParamsChannelPreviewProps = {\n  channel: Channel;\n  /** The last message received in a channel */\n  lastMessage?: LocalMessage;\n};\n\nexport const useMessageDeliveryStatus = ({\n  channel,\n  lastMessage,\n}: UseMessageStatusParamsChannelPreviewProps) => {\n  const { client } = useChatContext();\n  const [messageDeliveryStatus, setMessageDeliveryStatus] = useState<\n    MessageDeliveryStatus | undefined\n  >();\n\n  const isOwnMessage = useCallback(\n    (message?: { user?: UserResponse | null }) =>\n      client.user && message && message.user?.id === client.user.id,\n    [client],\n  );\n\n  useEffect(() => {\n    // empty channel\n    if (!lastMessage) {\n      setMessageDeliveryStatus(undefined);\n    }\n\n    const lastMessageIsOwn = isOwnMessage(lastMessage);\n    if (!lastMessage?.created_at || !lastMessageIsOwn) return;\n\n    const msgRef = {\n      msgId: lastMessage.id,\n      timestampMs: lastMessage.created_at.getTime(),\n    };\n    const readersForMessage = channel.messageReceiptsTracker.readersForMessage(msgRef);\n    const deliveredForMessage =\n      channel.messageReceiptsTracker.deliveredForMessage(msgRef);\n    setMessageDeliveryStatus(\n      readersForMessage.length > 1 ||\n        (readersForMessage.length === 1 && readersForMessage[0].id !== client.user?.id)\n        ? MessageDeliveryStatus.READ\n        : deliveredForMessage.length > 1 ||\n            (deliveredForMessage.length === 1 &&\n              deliveredForMessage[0].id !== client.user?.id)\n          ? MessageDeliveryStatus.DELIVERED\n          : MessageDeliveryStatus.SENT,\n    );\n  }, [channel, client, isOwnMessage, lastMessage]);\n\n  useEffect(() => {\n    const handleMessageNew = (event: Event) => {\n      // the last message is not mine, so do not show the delivery status\n      if (!isOwnMessage(event.message)) {\n        return setMessageDeliveryStatus(undefined);\n      }\n      return setMessageDeliveryStatus(MessageDeliveryStatus.SENT);\n    };\n\n    channel.on('message.new', handleMessageNew);\n\n    return () => {\n      channel.off('message.new', handleMessageNew);\n    };\n  }, [channel, isOwnMessage]);\n\n  useEffect(() => {\n    if (!isOwnMessage(lastMessage)) return;\n    const handleMessageDelivered = (event: Event) => {\n      if (\n        event.user?.id !== client.user?.id &&\n        lastMessage &&\n        lastMessage.id === event.last_delivered_message_id\n      )\n        setMessageDeliveryStatus(MessageDeliveryStatus.DELIVERED);\n    };\n\n    const handleMarkRead = (event: Event) => {\n      if (event.user?.id !== client.user?.id)\n        setMessageDeliveryStatus(MessageDeliveryStatus.READ);\n    };\n\n    channel.on('message.delivered', handleMessageDelivered);\n    channel.on('message.read', handleMarkRead);\n    channel.on('message.read_locally', handleMarkRead);\n\n    return () => {\n      channel.off('message.delivered', handleMessageDelivered);\n      channel.off('message.read', handleMarkRead);\n      channel.off('message.read_locally', handleMarkRead);\n    };\n  }, [channel, client, isOwnMessage, lastMessage]);\n\n  return {\n    messageDeliveryStatus,\n  };\n};\n"],"mappings":";;;AAKA,IAAY,wBAAL,yBAAA,uBAAA;CACL,sBAAA,UAAA;CACA,sBAAA,eAAA;CACA,sBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;AAQA,IAAa,4BAA4B,EACvC,SACA,kBAC+C;CAC/C,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,CAAC,uBAAuB,4BAA4B,SAExD;CAEF,MAAM,eAAe,aAClB,YACC,OAAO,QAAQ,WAAW,QAAQ,MAAM,OAAO,OAAO,KAAK,IAC7D,CAAC,MAAM,CACT;CAEA,gBAAgB;EAEd,IAAI,CAAC,aACH,yBAAyB,KAAA,CAAS;EAGpC,MAAM,mBAAmB,aAAa,WAAW;EACjD,IAAI,CAAC,aAAa,cAAc,CAAC,kBAAkB;EAEnD,MAAM,SAAS;GACb,OAAO,YAAY;GACnB,aAAa,YAAY,WAAW,QAAQ;EAC9C;EACA,MAAM,oBAAoB,QAAQ,uBAAuB,kBAAkB,MAAM;EACjF,MAAM,sBACJ,QAAQ,uBAAuB,oBAAoB,MAAM;EAC3D,yBACE,kBAAkB,SAAS,KACxB,kBAAkB,WAAW,KAAK,kBAAkB,EAAE,CAAC,OAAO,OAAO,MAAM,KAAA,SAE1E,oBAAoB,SAAS,KAC1B,oBAAoB,WAAW,KAC9B,oBAAoB,EAAE,CAAC,OAAO,OAAO,MAAM,KAAA,cAAA,MAGrD;CACF,GAAG;EAAC;EAAS;EAAQ;EAAc;CAAW,CAAC;CAE/C,gBAAgB;EACd,MAAM,oBAAoB,UAAiB;GAEzC,IAAI,CAAC,aAAa,MAAM,OAAO,GAC7B,OAAO,yBAAyB,KAAA,CAAS;GAE3C,OAAO,yBAAA,MAAmD;EAC5D;EAEA,QAAQ,GAAG,eAAe,gBAAgB;EAE1C,aAAa;GACX,QAAQ,IAAI,eAAe,gBAAgB;EAC7C;CACF,GAAG,CAAC,SAAS,YAAY,CAAC;CAE1B,gBAAgB;EACd,IAAI,CAAC,aAAa,WAAW,GAAG;EAChC,MAAM,0BAA0B,UAAiB;GAC/C,IACE,MAAM,MAAM,OAAO,OAAO,MAAM,MAChC,eACA,YAAY,OAAO,MAAM,2BAEzB,yBAAA,WAAwD;EAC5D;EAEA,MAAM,kBAAkB,UAAiB;GACvC,IAAI,MAAM,MAAM,OAAO,OAAO,MAAM,IAClC,yBAAA,MAAmD;EACvD;EAEA,QAAQ,GAAG,qBAAqB,sBAAsB;EACtD,QAAQ,GAAG,gBAAgB,cAAc;EACzC,QAAQ,GAAG,wBAAwB,cAAc;EAEjD,aAAa;GACX,QAAQ,IAAI,qBAAqB,sBAAsB;GACvD,QAAQ,IAAI,gBAAgB,cAAc;GAC1C,QAAQ,IAAI,wBAAwB,cAAc;EACpD;CACF,GAAG;EAAC;EAAS;EAAQ;EAAc;CAAW,CAAC;CAE/C,OAAO,EACL,sBACF;AACF"}

package/dist/es/components/ChannelListItem/utils.a11y.mjs

@@ -0,0 +1,121 @@
+import { getDateString, isDate } from "../../i18n/utils.mjs";
+import { getLatestMessagePreviewText } from "./utils.mjs";
+import { activeLabelPart, composeAccessibleLabel, unreadCountLabelPart } from "../../a11y/accessibleLabel.mjs";
+import { MessageDeliveryStatus } from "./hooks/useMessageDeliveryStatus.mjs";
+//#region src/components/ChannelListItem/utils.a11y.ts
+/**
+* The default, named label parts. Each is independently overridable via
+* {@link ChannelListItemLabelConfig.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 defaultChannelListItemLabelParts = {
+	active: activeLabelPart,
+	attachments: ({ latestMessage, t }) => {
+		const count = latestMessage?.attachments?.filter((attachment) => !attachment.og_scrape_url).length ?? 0;
+		if (count === 0 || count === 1 && !latestMessage?.text) return void 0;
+		return t("aria/{{ count }} attachment", { count });
+	},
+	deliveryStatus: ({ messageDeliveryStatus, t }) => {
+		if (!messageDeliveryStatus) return void 0;
+		return t("aria/Delivery status: {{ deliveryStatus }}", { deliveryStatus: {
+			[MessageDeliveryStatus.SENT]: t("aria/Sent"),
+			[MessageDeliveryStatus.DELIVERED]: t("aria/Delivered"),
+			[MessageDeliveryStatus.READ]: t("aria/Read")
+		}[messageDeliveryStatus] });
+	},
+	lastMessage: ({ channel, client, isMessageAIGenerated, latestMessage, t, userLanguage }) => {
+		const preview = getLatestMessagePreviewText(channel, t, userLanguage, isMessageAIGenerated, latestMessage);
+		if (!latestMessage) return preview;
+		const sender = !!client.userID && latestMessage.user?.id === client.userID ? t("You") : latestMessage.user?.name;
+		return sender ? t("aria/Last message from {{ sender }}: {{ messagePreview }}", {
+			messagePreview: preview,
+			sender
+		}) : t("aria/Last message: {{ messagePreview }}", { messagePreview: preview });
+	},
+	linkPreview: ({ latestMessage, t }) => {
+		const link = latestMessage?.attachments?.find((attachment) => attachment.og_scrape_url);
+		if (!link) return void 0;
+		return link.title ? t("aria/Shared a link with title: {{ linkTitle }}", { linkTitle: link.title }) : t("aria/Shared a link");
+	},
+	name: ({ displayTitle }) => displayTitle || void 0,
+	time: ({ latestMessage, t, tDateTimeParser }) => {
+		const createdAt = latestMessage?.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_CHANNEL_LIST_ITEM_LABEL_ORDER = [
+	"name",
+	"active",
+	"unreadCount",
+	"lastMessage",
+	"attachments",
+	"linkPreview",
+	"deliveryStatus",
+	"time"
+];
+/**
+* Composes a single, coherent accessible name for a channel list row from named parts. The default
+* reading order is name → unread → last message (sender + preview) → delivery status → time.
+*
+* ## Customizing the label
+*
+* The label is generated by `ChannelListItemUI`, which accepts an `accessibleLabelConfig` prop. To
+* customize it, supply your own `ChannelListItemUI` through `ComponentContext` (the same way the
+* component is overridden) and forward the config — no new plumbing:
+*
+* ```tsx
+* const MyChannelPreview = (props) => (
+*   <DefaultChannelListItemUI {...props} accessibleLabelConfig={accessibleLabelConfig} />
+* );
+* // <ComponentProvider value={{ ChannelListItemUI: MyChannelPreview }}> … </ComponentProvider>
+* ```
+*
+* ### Adding custom parts (e.g. Pinned, Muted, Frozen)
+*
+* - {@link ChannelListItemLabelConfig.parts} is merged over {@link defaultChannelListItemLabelParts},
+*   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 (so e.g. "Pinned" is only
+*   spoken when actually pinned).
+* - {@link ChannelListItemLabelConfig.order} decides which parts are included AND their sequence —
+*   **a part not listed in `order` is never rendered**, even if defined. Spread
+*   {@link DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER} to keep the defaults and insert your own.
+* - Each part receives {@link ChannelListItemLabelData}. `active`/`unreadCount`/
+*   `messageDeliveryStatus` are passed directly and `latestMessage` is pre-resolved by the composer
+*   (see its doc); everything else (mute/pin state, `frozen`, member count, custom `channel.data`) is
+*   read off `channel`. Parts call `t`, so provide your own i18n keys (or return plain strings) —
+*   the SDK does not ship `Pinned`/`Muted`/`Frozen` strings.
+*
+* ```tsx
+* const accessibleLabelConfig: ChannelListItemLabelConfig = {
+*   parts: {
+*     pinned: ({ channel, t }) => (channel.state.membership?.pinned_at ? t('Pinned') : undefined),
+*     muted: ({ channel, t }) => (channel.muteStatus().muted ? t('Muted') : undefined),
+*     frozen: ({ channel, t }) => (channel.data?.frozen ? t('Frozen') : undefined),
+*   },
+*   order: ['name', 'pinned', 'muted', 'frozen', ...DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER.slice(1)],
+* };
+* // → "General. Pinned. Muted. 3 unread messages. Last message from Alice: hi. 2 days ago"
+* ```
+*
+* For full control, set {@link ChannelListItemLabelConfig.build} (return the entire string), or
+* write a custom `ChannelListItemUI` that calls this function directly — importing
+* {@link defaultChannelListItemLabelParts} to reuse the built-ins.
+*/
+var composeChannelListItemAccessibleLabel = (data, config = {}) => composeAccessibleLabel({
+	...data,
+	latestMessage: data.latestMessage ?? data.channel.state.latestMessages[data.channel.state.latestMessages.length - 1]
+}, defaultChannelListItemLabelParts, DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER, config);
+//#endregion
+export { DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER, composeChannelListItemAccessibleLabel, defaultChannelListItemLabelParts };
+
+//# sourceMappingURL=utils.a11y.mjs.map

package/dist/es/components/ChannelListItem/utils.a11y.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.a11y.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/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';\nimport { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';\nimport { getLatestMessagePreviewText } from './utils';\n\n/**\n * Everything a label part needs. Gathered by `ChannelListItemUI` from its props + contexts and\n * handed to each {@link ChannelListItemLabelPart}.\n */\nexport type ChannelListItemLabelData = {\n  /** Whether the row is the active (currently open) channel. */\n  active?: boolean;\n  /** The channel whose latest message is summarized. */\n  channel: Channel;\n  /** Client, used to detect whether the latest message is the current user's own. */\n  client: StreamChat;\n  /** Channel display name. */\n  displayTitle?: string;\n  isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated'];\n  /**\n   * The channel's latest message. {@link composeChannelListItemAccessibleLabel} resolves this once\n   * (to the last entry of `channel.state.latestMessages` when omitted) and passes the SAME message\n   * to every part, so all segments (sender, preview, attachments, time) describe one message.\n   */\n  latestMessage?: LocalMessage;\n  /** Delivery/read status of the latest message when it is the current user's own. */\n  messageDeliveryStatus?: MessageDeliveryStatus;\n  t: TranslationContextValue['t'];\n  tDateTimeParser: TranslationContextValue['tDateTimeParser'];\n  /** Unread count for the channel. */\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 ChannelListItemLabelPart = AccessibleLabelPart<ChannelListItemLabelData>;\n\n/**\n * The default, named label parts. Each is independently overridable via\n * {@link ChannelListItemLabelConfig.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 defaultChannelListItemLabelParts = {\n  active: activeLabelPart,\n  // Announced alongside the last message text: the number of attachments. Link previews are\n  // excluded (the linkPreview part announces those). A single attachment with no text is skipped\n  // here because the lastMessage part already conveys it as \"Attachment <type>\".\n  attachments: ({ latestMessage, t }) => {\n    const count =\n      latestMessage?.attachments?.filter((attachment) => !attachment.og_scrape_url)\n        .length ?? 0;\n    if (count === 0 || (count === 1 && !latestMessage?.text)) return undefined;\n    return t('aria/{{ count }} attachment', { count });\n  },\n  deliveryStatus: ({ messageDeliveryStatus, t }) => {\n    if (!messageDeliveryStatus) return undefined;\n    const statusLabelByStatus: Record<MessageDeliveryStatus, string> = {\n      [MessageDeliveryStatus.SENT]: t('aria/Sent'),\n      [MessageDeliveryStatus.DELIVERED]: t('aria/Delivered'),\n      [MessageDeliveryStatus.READ]: t('aria/Read'),\n    };\n    return t('aria/Delivery status: {{ deliveryStatus }}', {\n      deliveryStatus: statusLabelByStatus[messageDeliveryStatus],\n    });\n  },\n  lastMessage: ({\n    channel,\n    client,\n    isMessageAIGenerated,\n    latestMessage,\n    t,\n    userLanguage,\n  }) => {\n    const preview = getLatestMessagePreviewText(\n      channel,\n      t,\n      userLanguage,\n      isMessageAIGenerated,\n      // `latestMessage` is pre-resolved by the composer, so the announced preview describes the same\n      // message as the sender/status/time segments.\n      latestMessage,\n    );\n    // Empty channel: announce there are no messages (\"Nothing yet...\").\n    if (!latestMessage) return preview;\n    const isOwn = !!client.userID && latestMessage.user?.id === client.userID;\n    // Use the sender's name (or \"You\" for the current user). When the name is unknown we omit the\n    // sender rather than reading out a raw user id.\n    const sender = isOwn ? t('You') : latestMessage.user?.name;\n    return sender\n      ? t('aria/Last message from {{ sender }}: {{ messagePreview }}', {\n          messagePreview: preview,\n          sender,\n        })\n      : t('aria/Last message: {{ messagePreview }}', { messagePreview: preview });\n  },\n  linkPreview: ({ latestMessage, t }) => {\n    const link = latestMessage?.attachments?.find(\n      (attachment) => attachment.og_scrape_url,\n    );\n    if (!link) return undefined;\n    return link.title\n      ? t('aria/Shared a link with title: {{ linkTitle }}', { linkTitle: link.title })\n      : t('aria/Shared a link');\n  },\n  name: ({ displayTitle }) => displayTitle || undefined,\n  time: ({ latestMessage, t, tDateTimeParser }) => {\n    const createdAt = latestMessage?.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    // Prefix the time so it is clearly its own segment (not read as part of the preceding\n    // delivery-status segment).\n    return when ? t('aria/Last activity: {{ time }}', { time: String(when) }) : undefined;\n  },\n  unreadCount: unreadCountLabelPart,\n} satisfies Record<string, ChannelListItemLabelPart>;\n\n/** Default order the parts are assembled in (reading order). */\nexport const DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER = [\n  'name',\n  'active',\n  'unreadCount',\n  'lastMessage',\n  'attachments',\n  'linkPreview',\n  'deliveryStatus',\n  'time',\n] as const;\n\nexport type ChannelListItemLabelConfig = AccessibleLabelConfig<ChannelListItemLabelData>;\n\n/**\n * Composes a single, coherent accessible name for a channel list row from named parts. The default\n * reading order is name → unread → last message (sender + preview) → delivery status → time.\n *\n * ## Customizing the label\n *\n * The label is generated by `ChannelListItemUI`, which accepts an `accessibleLabelConfig` prop. To\n * customize it, supply your own `ChannelListItemUI` through `ComponentContext` (the same way the\n * component is overridden) and forward the config — no new plumbing:\n *\n * ```tsx\n * const MyChannelPreview = (props) => (\n *   <DefaultChannelListItemUI {...props} accessibleLabelConfig={accessibleLabelConfig} />\n * );\n * // <ComponentProvider value={{ ChannelListItemUI: MyChannelPreview }}> … </ComponentProvider>\n * ```\n *\n * ### Adding custom parts (e.g. Pinned, Muted, Frozen)\n *\n * - {@link ChannelListItemLabelConfig.parts} is merged over {@link defaultChannelListItemLabelParts},\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 (so e.g. \"Pinned\" is only\n *   spoken when actually pinned).\n * - {@link ChannelListItemLabelConfig.order} decides which parts are included AND their sequence —\n *   **a part not listed in `order` is never rendered**, even if defined. Spread\n *   {@link DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER} to keep the defaults and insert your own.\n * - Each part receives {@link ChannelListItemLabelData}. `active`/`unreadCount`/\n *   `messageDeliveryStatus` are passed directly and `latestMessage` is pre-resolved by the composer\n *   (see its doc); everything else (mute/pin state, `frozen`, member count, custom `channel.data`) is\n *   read off `channel`. Parts call `t`, so provide your own i18n keys (or return plain strings) —\n *   the SDK does not ship `Pinned`/`Muted`/`Frozen` strings.\n *\n * ```tsx\n * const accessibleLabelConfig: ChannelListItemLabelConfig = {\n *   parts: {\n *     pinned: ({ channel, t }) => (channel.state.membership?.pinned_at ? t('Pinned') : undefined),\n *     muted: ({ channel, t }) => (channel.muteStatus().muted ? t('Muted') : undefined),\n *     frozen: ({ channel, t }) => (channel.data?.frozen ? t('Frozen') : undefined),\n *   },\n *   order: ['name', 'pinned', 'muted', 'frozen', ...DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER.slice(1)],\n * };\n * // → \"General. Pinned. Muted. 3 unread messages. Last message from Alice: hi. 2 days ago\"\n * ```\n *\n * For full control, set {@link ChannelListItemLabelConfig.build} (return the entire string), or\n * write a custom `ChannelListItemUI` that calls this function directly — importing\n * {@link defaultChannelListItemLabelParts} to reuse the built-ins.\n */\nexport const composeChannelListItemAccessibleLabel = (\n  data: ChannelListItemLabelData,\n  config: ChannelListItemLabelConfig = {},\n): string =>\n  composeAccessibleLabel(\n    // Resolve the latest message ONCE here so every part is handed the same message (sender,\n    // preview, attachments, link, time all stay in sync) instead of each re-deriving the channel's\n    // latest — which only stayed consistent as long as the duplicated fallbacks matched.\n    {\n      ...data,\n      latestMessage:\n        data.latestMessage ??\n        data.channel.state.latestMessages[data.channel.state.latestMessages.length - 1],\n    },\n    defaultChannelListItemLabelParts,\n    DEFAULT_CHANNEL_LIST_ITEM_LABEL_ORDER,\n    config,\n  );\n"],"mappings":";;;;;;;;;;;AAqDA,IAAa,mCAAmC;CAC9C,QAAQ;CAIR,cAAc,EAAE,eAAe,QAAQ;EACrC,MAAM,QACJ,eAAe,aAAa,QAAQ,eAAe,CAAC,WAAW,aAAa,CAAC,CAC1E,UAAU;EACf,IAAI,UAAU,KAAM,UAAU,KAAK,CAAC,eAAe,MAAO,OAAO,KAAA;EACjE,OAAO,EAAE,+BAA+B,EAAE,MAAM,CAAC;CACnD;CACA,iBAAiB,EAAE,uBAAuB,QAAQ;EAChD,IAAI,CAAC,uBAAuB,OAAO,KAAA;EAMnC,OAAO,EAAE,8CAA8C,EACrD,gBAAgB;IALf,sBAAsB,OAAO,EAAE,WAAW;IAC1C,sBAAsB,YAAY,EAAE,gBAAgB;IACpD,sBAAsB,OAAO,EAAE,WAAW;EAG3B,EAAoB,uBACtC,CAAC;CACH;CACA,cAAc,EACZ,SACA,QACA,sBACA,eACA,GACA,mBACI;EACJ,MAAM,UAAU,4BACd,SACA,GACA,cACA,sBAGA,aACF;EAEA,IAAI,CAAC,eAAe,OAAO;EAI3B,MAAM,SAHQ,CAAC,CAAC,OAAO,UAAU,cAAc,MAAM,OAAO,OAAO,SAG5C,EAAE,KAAK,IAAI,cAAc,MAAM;EACtD,OAAO,SACH,EAAE,6DAA6D;GAC7D,gBAAgB;GAChB;EACF,CAAC,IACD,EAAE,2CAA2C,EAAE,gBAAgB,QAAQ,CAAC;CAC9E;CACA,cAAc,EAAE,eAAe,QAAQ;EACrC,MAAM,OAAO,eAAe,aAAa,MACtC,eAAe,WAAW,aAC7B;EACA,IAAI,CAAC,MAAM,OAAO,KAAA;EAClB,OAAO,KAAK,QACR,EAAE,kDAAkD,EAAE,WAAW,KAAK,MAAM,CAAC,IAC7E,EAAE,oBAAoB;CAC5B;CACA,OAAO,EAAE,mBAAmB,gBAAgB,KAAA;CAC5C,OAAO,EAAE,eAAe,GAAG,sBAAsB;EAC/C,MAAM,YAAY,eAAe;EACjC,IAAI,CAAC,aAAa,CAAC,OAAO,SAAS,GAAG,OAAO,KAAA;EAC7C,MAAM,OAAO,cAAc;GACzB,kBAAkB,UAAU,YAAY;GACxC;GACA;GACA,yBAAyB;EAC3B,CAAC;EAGD,OAAO,OAAO,EAAE,kCAAkC,EAAE,MAAM,OAAO,IAAI,EAAE,CAAC,IAAI,KAAA;CAC9E;CACA,aAAa;AACf;;AAGA,IAAa,wCAAwC;CACnD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,IAAa,yCACX,MACA,SAAqC,CAAC,MAEtC,uBAIE;CACE,GAAG;CACH,eACE,KAAK,iBACL,KAAK,QAAQ,MAAM,eAAe,KAAK,QAAQ,MAAM,eAAe,SAAS;AACjF,GACA,kCACA,uCACA,MACF"}