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

package/dist/es/components/ChannelListItem/ChannelListItemActionButtons.defaults.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListItemActionButtons.defaults.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ComponentPropsWithRef,\n  forwardRef,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { useChannelMembershipState, useChannelMembersState } from '../ChannelList';\nimport { useChannelListItemContext } from './ChannelListItem';\nimport { Button } from '../Button';\nimport { useIsChannelMuted } from './hooks/useIsChannelMuted';\nimport {\n  ContextMenuButton,\n  useContextMenuContext,\n  useDialogIsOpen,\n  useDialogOnNearestManager,\n} from '../Dialog';\nimport { useNotificationApi } from '../Notifications';\nimport { ChannelListItemActionButtons } from './ChannelListItemActionButtons';\n\ntype ChannelActionBehavior = {\n  /** Toggle state for actions that have one (mute/archive/pin); omit for one-shot actions (leave). */\n  'aria-pressed'?: boolean;\n  title: string;\n  toggle: () => Promise<void>;\n};\n\n// Core mute/unmute action — performs the API call and reports the result. No UI state: the placement\n// wrappers below own the busy/disabled affordance and the menu-close behavior.\nconst useMuteAction = (): ChannelActionBehavior => {\n  const { addNotification } = useNotificationApi();\n  const { channel } = useChannelListItemContext();\n  const { t } = useTranslationContext();\n  const { muted: isMuted } = useIsChannelMuted(channel);\n\n  const toggle = async () => {\n    try {\n      if (isMuted) {\n        await channel.unmute();\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('common.channelUnmuted.text', 'Channel unmuted'),\n          severity: 'success',\n          type: 'api:channel:unmute:success',\n        });\n      } else {\n        await channel.mute();\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('common.channelMuted.text', 'Channel muted'),\n          severity: 'success',\n          type: 'api:channel:mute:success',\n        });\n      }\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: ChannelListItemActionButtons.name,\n        error: error instanceof Error ? error : new Error('An unknown error occurred'),\n        message: t(\n          'channelListItem.failedUpdateChannelMute.text',\n          'Failed to update channel mute status',\n        ),\n        severity: 'error',\n        type: 'api:channel:mute:failed',\n      });\n    }\n  };\n\n  return {\n    'aria-pressed': isMuted,\n    title: isMuted ? t('common.unmute.title', 'Unmute') : t('common.mute.title', 'Mute'),\n    toggle,\n  };\n};\n\n// Core archive/unarchive action — performs the API call and reports the result.\nconst useArchiveAction = (): ChannelActionBehavior => {\n  const { channel } = useChannelListItemContext();\n  const { addNotification } = useNotificationApi();\n  const membership = useChannelMembershipState(channel);\n  const { t } = useTranslationContext();\n\n  const toggle = async () => {\n    try {\n      if (membership.archived_at != null) {\n        await channel.unarchive();\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('channelListItem.channelUnarchived.text', 'Channel unarchived'),\n          severity: 'success',\n          type: 'api:channel:unarchive:success',\n        });\n      } else {\n        await channel.archive();\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('channelListItem.channelArchived.text', 'Channel archived'),\n          severity: 'success',\n          type: 'api:channel:archive:success',\n        });\n      }\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: ChannelListItemActionButtons.name,\n        error: error instanceof Error ? error : new Error('An unknown error occurred'),\n        message: t(\n          'channelListItem.failedUpdateChannelArchive.text',\n          'Failed to update channel archive status',\n        ),\n        severity: 'error',\n        type: 'api:channel:archive:failed',\n      });\n    }\n  };\n\n  return {\n    'aria-pressed': membership.archived_at != null,\n    title:\n      membership.archived_at != null\n        ? t('channelListItem.unarchive.title', 'Unarchive')\n        : t('channelListItem.archive.title', 'Archive'),\n    toggle,\n  };\n};\n\n// Quick (hover/focus-revealed) action button. Marks itself busy with `aria-disabled`/`aria-busy` —\n// NOT the native `disabled` attribute, which would blur the button and collapse its hover-revealed\n// row, leaving it un-focusable. Keeps focus and guards against re-activation while in flight.\nconst useQuickActionButtonProps = ({\n  'aria-pressed': ariaPressed,\n  title,\n  toggle,\n}: ChannelActionBehavior) => {\n  // Ref latch flips synchronously in the handler so two clicks in the same tick (before the\n  // `setInProgress(true)` rerender commits) can't both call `toggle()` — the `aria-busy`/\n  // `aria-disabled` state only guards after the rerender, which is too late for non-idempotent\n  // actions (archive/leave/mute).\n  const inProgressRef = useRef(false);\n  const [inProgress, setInProgress] = useState(false);\n\n  return {\n    'aria-busy': inProgress || undefined,\n    'aria-disabled': inProgress || undefined,\n    'aria-pressed': ariaPressed,\n    onClick: async (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      if (inProgressRef.current) return; // busy: ignore re-activation while in flight\n      inProgressRef.current = true;\n      try {\n        setInProgress(true);\n        await toggle();\n      } finally {\n        inProgressRef.current = false;\n        setInProgress(false);\n      }\n    },\n    title,\n  } satisfies ComponentPropsWithoutRef<'button'>;\n};\n\n// Dropdown menu item. Standard menu behavior: activating closes the menu (which returns focus to the\n// toggle) and runs the action in the background, reporting via its notification — so the item needs\n// no busy/disabled state, it unmounts with the menu.\n//\n// The action is deferred to after the close commits, on the next animation frame. The open menu is an\n// aria-modal dialog with its OWN `AriaLiveOutlet` (the inert root outlet is ignored by assistive tech\n// while it is open); running the action synchronously can route its notification into that outlet\n// just as it is torn down — so the notification is never spoken. Deferring lets the menu (and its\n// outlet) unmount and focus return to the toggle first, so the notification lands in the root outlet,\n// in a calm window after the focus re-read.\nconst useDropdownActionButtonProps = ({\n  'aria-pressed': ariaPressed,\n  title,\n  toggle,\n}: ChannelActionBehavior) => {\n  const { closeMenu } = useContextMenuContext();\n\n  return {\n    'aria-pressed': ariaPressed,\n    onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      closeMenu();\n      requestAnimationFrame(() => void toggle());\n    },\n    title,\n  } satisfies ComponentPropsWithoutRef<'button'>;\n};\n\n// Core block/unblock action for the other member of a DM.\nconst useBanAction = (): ChannelActionBehavior => {\n  const { client } = useChatContext();\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext();\n  const { channel } = useChannelListItemContext();\n  const members = useChannelMembersState(channel);\n  const isUserBanned = Object.values(members || {}).some(\n    (member) => member.user?.id !== client.userID && member.banned,\n  );\n\n  const toggle = async () => {\n    try {\n      const otherUserId = Object.keys(channel.state.members).find(\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        (userId) => userId !== client.userID!,\n      );\n      if (!otherUserId) return;\n      if (isUserBanned) {\n        await channel.unbanUser(otherUserId);\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('common.userUnblocked.text', 'User unblocked'),\n          severity: 'success',\n          type: 'api:user:unban:success',\n        });\n      } else {\n        await channel.banUser(otherUserId, {});\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('common.userBlocked.text', 'User blocked'),\n          severity: 'success',\n          type: 'api:user:ban:success',\n        });\n      }\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: ChannelListItemActionButtons.name,\n        error: error instanceof Error ? error : new Error('An unknown error occurred'),\n        message: t('channelListItem.failedBlockUser.text', 'Failed to block user'),\n        severity: 'error',\n        type: 'api:user:ban:failed',\n      });\n    }\n  };\n\n  return {\n    'aria-pressed': isUserBanned,\n    title: isUserBanned\n      ? t('channelListItem.unblockUser.title', 'Unblock User')\n      : t('common.blockUser.title', 'Block User'),\n    toggle,\n  };\n};\n\n// Core leave-channel action (one-shot — not a toggle).\nconst useLeaveAction = (): ChannelActionBehavior => {\n  const { t } = useTranslationContext();\n  const { channel } = useChannelListItemContext();\n  const { client } = useChatContext();\n  const { addNotification } = useNotificationApi();\n\n  const toggle = async () => {\n    try {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      await channel.removeMembers([client.userID!]);\n      addNotification({\n        context: { channel },\n        emitter: ChannelListItemActionButtons.name,\n        message: t('common.leftChannel.text', 'Left channel'),\n        severity: 'success',\n        type: 'api:channel:leave:success',\n      });\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: ChannelListItemActionButtons.name,\n        error: error instanceof Error ? error : new Error('An unknown error occurred'),\n        message: t('common.failedLeaveChannel.text', 'Failed to leave channel'),\n        severity: 'error',\n        type: 'api:channel:leave:failed',\n      });\n    }\n  };\n\n  return { title: t('channelListItem.leaveChannel.title', 'Leave Channel'), toggle };\n};\n\n// Core pin/unpin action.\nconst usePinAction = (): ChannelActionBehavior => {\n  const { t } = useTranslationContext();\n  const { addNotification } = useNotificationApi();\n  const { channel } = useChannelListItemContext();\n  const membership = useChannelMembershipState(channel);\n\n  const toggle = async () => {\n    try {\n      if (membership.pinned_at != null) {\n        await channel.unpin();\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('channelListItem.channelUnpinned.text', 'Channel unpinned'),\n          severity: 'success',\n          type: 'api:channel:unpin:success',\n        });\n      } else {\n        await channel.pin();\n        addNotification({\n          context: { channel },\n          emitter: ChannelListItemActionButtons.name,\n          message: t('channelListItem.channelPinned.text', 'Channel pinned'),\n          severity: 'success',\n          type: 'api:channel:pin:success',\n        });\n      }\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: ChannelListItemActionButtons.name,\n        error: error instanceof Error ? error : new Error('An unknown error occurred'),\n        message: t(\n          'channelListItem.failedUpdateChannelPinned.text',\n          'Failed to update channel pinned status',\n        ),\n        severity: 'error',\n        type: 'api:channel:pin:failed',\n      });\n    }\n  };\n\n  return {\n    'aria-pressed': membership.pinned_at != null,\n    title:\n      membership.pinned_at != null\n        ? t('common.unpin.title', 'Unpin')\n        : t('common.pin.title', 'Pin'),\n    toggle,\n  };\n};\n\ntype ChannelActionItem =\n  | (({ placement: 'quick' } | { placement: 'dropdown' }) & {\n      type: string;\n      Component: React.ComponentType;\n    })\n  | {\n      placement: 'quick-dropdown-toggle';\n      Component: React.ComponentType<ComponentPropsWithRef<'button'>>;\n    };\n\nconst defaultComponents = {\n  dropdown: {\n    Archive() {\n      const { IconArchive } = useComponentContextIcons();\n      const behaviorProps = useDropdownActionButtonProps(useArchiveAction());\n\n      return (\n        <ContextMenuButton\n          aria-label={behaviorProps.title}\n          data-testid='dropdown-action-archive'\n          Icon={IconArchive}\n          {...behaviorProps}\n        >\n          {behaviorProps.title}\n        </ContextMenuButton>\n      );\n    },\n    Ban() {\n      const { IconNoSign } = useComponentContextIcons();\n      const behaviorProps = useDropdownActionButtonProps(useBanAction());\n\n      return (\n        <ContextMenuButton\n          aria-label={behaviorProps.title}\n          data-testid='dropdown-action-ban'\n          Icon={IconNoSign}\n          {...behaviorProps}\n        >\n          {behaviorProps.title}\n        </ContextMenuButton>\n      );\n    },\n    Leave() {\n      const { IconLeave } = useComponentContextIcons();\n      const behaviorProps = useDropdownActionButtonProps(useLeaveAction());\n\n      return (\n        <ContextMenuButton\n          aria-label={behaviorProps.title}\n          data-testid='dropdown-action-leave'\n          Icon={IconLeave}\n          variant='destructive'\n          {...behaviorProps}\n        >\n          {behaviorProps.title}\n        </ContextMenuButton>\n      );\n    },\n    Mute() {\n      const { IconMute } = useComponentContextIcons();\n      const behaviorProps = useDropdownActionButtonProps(useMuteAction());\n\n      return (\n        <ContextMenuButton\n          aria-label={behaviorProps.title}\n          data-testid='dropdown-action-mute'\n          Icon={IconMute}\n          {...behaviorProps}\n        >\n          {behaviorProps.title}\n        </ContextMenuButton>\n      );\n    },\n    Pin() {\n      const { IconPin } = useComponentContextIcons();\n      const behaviorProps = useDropdownActionButtonProps(usePinAction());\n\n      return (\n        <ContextMenuButton\n          aria-label={behaviorProps.title}\n          data-testid='dropdown-action-pin'\n          Icon={IconPin}\n          {...behaviorProps}\n        >\n          {behaviorProps.title}\n        </ContextMenuButton>\n      );\n    },\n  },\n  quick: {\n    Archive() {\n      const { IconArchive } = useComponentContextIcons();\n      const behaviorProps = useQuickActionButtonProps(useArchiveAction());\n\n      return (\n        <Button\n          appearance='ghost'\n          aria-label={behaviorProps.title}\n          circular\n          data-testid='quick-action-archive'\n          size='sm'\n          variant='secondary'\n          {...behaviorProps}\n        >\n          <IconArchive />\n        </Button>\n      );\n    },\n    Mute() {\n      const { IconMute } = useComponentContextIcons();\n      const behaviorProps = useQuickActionButtonProps(useMuteAction());\n\n      return (\n        <Button\n          appearance='ghost'\n          aria-label={behaviorProps.title}\n          circular\n          data-testid='quick-action-mute'\n          size='sm'\n          variant='secondary'\n          {...behaviorProps}\n        >\n          <IconMute />\n        </Button>\n      );\n    },\n  },\n  QuickDropdownToggle: forwardRef<HTMLButtonElement>((_, ref) => {\n    const { IconMore } = useComponentContextIcons();\n    const { channel } = useChannelListItemContext();\n    const { t } = useTranslationContext();\n\n    const dialogId = ChannelListItemActionButtons.getDialogId({\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      channelId: channel.id!,\n    });\n    const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n    const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);\n\n    return (\n      <Button\n        appearance='ghost'\n        aria-expanded={dialogIsOpen}\n        aria-label={t(\n          'channelListItem.openChannelActionsMenu.ariaLabel',\n          'Open Channel Actions Menu',\n        )}\n        aria-pressed={dialogIsOpen}\n        circular\n        data-testid='channel-list-item-dropdown-toggle'\n        onClick={(e) => {\n          e.stopPropagation();\n\n          dialog.toggle();\n        }}\n        ref={ref}\n        size='sm'\n        variant='secondary'\n      >\n        <IconMore />\n      </Button>\n    );\n  }),\n};\n\ndefaultComponents.QuickDropdownToggle.displayName = 'QuickDropdownToggle';\n\nexport const defaultChannelActionSet: ChannelActionItem[] = [\n  {\n    Component: defaultComponents.QuickDropdownToggle,\n    placement: 'quick-dropdown-toggle',\n  },\n  {\n    Component: defaultComponents.quick.Mute,\n    placement: 'quick',\n    type: 'mute',\n  },\n  {\n    Component: defaultComponents.dropdown.Archive,\n    placement: 'dropdown',\n    type: 'archive',\n  },\n  {\n    Component: defaultComponents.dropdown.Ban,\n    placement: 'dropdown',\n    type: 'ban',\n  },\n  {\n    Component: defaultComponents.dropdown.Pin,\n    placement: 'dropdown',\n    type: 'pin',\n  },\n  {\n    Component: defaultComponents.dropdown.Leave,\n    placement: 'dropdown',\n    type: 'leave',\n  },\n];\n\nexport const useBaseChannelActionSetFilter = (channelActionSet: ChannelActionItem[]) => {\n  const { channel } = useChannelListItemContext();\n  const membership = useChannelMembershipState(channel);\n  const memberCount = channel.data?.member_count ?? 0;\n  const connectedUserIsMember = typeof membership.user !== 'undefined';\n  const isDirectMessageChannel = connectedUserIsMember && memberCount === 2;\n\n  const ownCapabilities = channel.data?.own_capabilities;\n\n  return useMemo(() => {\n    const filtered = channelActionSet.filter((action) => {\n      if (action.placement === 'quick-dropdown-toggle') return true;\n\n      switch (action.type) {\n        case 'archive':\n          return connectedUserIsMember;\n        case 'mute':\n          return ownCapabilities?.includes('mute-channel');\n        case 'ban':\n          return (\n            isDirectMessageChannel && ownCapabilities?.includes('ban-channel-members')\n          );\n        case 'leave':\n          return ownCapabilities?.includes('leave-channel');\n        case 'pin':\n          return connectedUserIsMember;\n        default:\n          return true;\n      }\n    });\n\n    return filtered;\n  }, [channelActionSet, connectedUserIsMember, ownCapabilities, isDirectMessageChannel]);\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,67 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useDialogIsOpen, useDialogOnNearestManager } from "../Dialog/hooks/useDialog.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { ContextMenu } from "../Dialog/components/ContextMenu.mjs";
+import { defaultChannelActionSet, useBaseChannelActionSetFilter } from "./ChannelListItemActionButtons.defaults.mjs";
+import { useSplitActionSet } from "../Chat/hooks/useSplitActionSet.mjs";
+import { useChannelListItemContext } from "./ChannelListItem.mjs";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/ChannelListItem/ChannelListItemActionButtons.tsx
+var ChannelListItemActionButtons = () => {
+	const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();
+	const { t } = useTranslationContext();
+	const { channel } = useChannelListItemContext();
+	const [referenceElement, setReferenceElement] = React.useState(null);
+	const [isRestoringFocus, setIsRestoringFocus] = React.useState(false);
+	const dialogId = ChannelListItemActionButtons.getDialogId({ channelId: channel.id });
+	const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+	const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
+	const closeContextMenu = React.useCallback(() => {
+		setIsRestoringFocus(true);
+		dialog?.close();
+		requestAnimationFrame(() => {
+			if (!referenceElement?.isConnected) {
+				setIsRestoringFocus(false);
+				return;
+			}
+			referenceElement.focus();
+			requestAnimationFrame(() => {
+				if (document.activeElement !== referenceElement) setIsRestoringFocus(false);
+			});
+		});
+	}, [dialog, referenceElement]);
+	const { dropdownActionSet, quickActionSet, quickDropdownToggleAction } = useSplitActionSet(useBaseChannelActionSetFilter(defaultChannelActionSet));
+	if (quickActionSet.length + dropdownActionSet.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__channel-list-item__action-buttons", { "str-chat__channel-list-item__action-buttons--active": dialogIsOpen || isRestoringFocus }),
+		"data-testid": "channel-list-item-action-buttons",
+		onFocusCapture: () => {
+			setIsRestoringFocus(false);
+		},
+		children: [
+			quickDropdownToggleAction && dropdownActionSet.length > 0 && /* @__PURE__ */ jsx(quickDropdownToggleAction.Component, { ref: setReferenceElement }),
+			quickActionSet.map(({ Component, type }) => /* @__PURE__ */ jsx(Component, {}, type)),
+			/* @__PURE__ */ jsx(ContextMenuComponent, {
+				"aria-label": t("channelListItem.channelActions.ariaLabel", "Channel Actions"),
+				className: "str-chat__channel-list-item__action-buttons-context-menu",
+				"data-testid": "channel-list-item-context-menu",
+				dialogManagerId: dialogManager?.id,
+				id: dialog.id,
+				onClose: closeContextMenu,
+				placement: "bottom-start",
+				referenceElement,
+				tabIndex: -1,
+				trapFocus: true,
+				children: dropdownActionSet.map(({ Component, type }) => /* @__PURE__ */ jsx(Component, {}, type))
+			})
+		]
+	});
+};
+ChannelListItemActionButtons.getDialogId = ({ channelId }) => `channel-action-buttons-${channelId}`;
+ChannelListItemActionButtons.displayName = "ChannelListItemActionButtons";
+//#endregion
+export { ChannelListItemActionButtons };
+
+//# sourceMappingURL=ChannelListItemActionButtons.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListItemActionButtons.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/ChannelListItemActionButtons.tsx"],"sourcesContent":["import React, { type ComponentProps, type ComponentType, type ReactNode } from 'react';\n\nimport clsx from 'clsx';\nimport { ContextMenu, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';\nimport { useComponentContext, useTranslationContext } from '../../context';\nimport {\n  defaultChannelActionSet,\n  useBaseChannelActionSetFilter,\n} from './ChannelListItemActionButtons.defaults';\nimport { useSplitActionSet } from '../Chat/hooks/useSplitActionSet';\nimport { useChannelListItemContext } from './ChannelListItem';\n\nexport type ChannelListItemActionButtonsProps = ComponentProps<ComponentType>; // hack to allow empty props\n\ninterface ChannelListItemActionButtonsInterface {\n  (props: ChannelListItemActionButtonsProps): ReactNode;\n  getDialogId: (_: { channelId: string }) => string;\n  displayName: string;\n}\n\nexport const ChannelListItemActionButtons: ChannelListItemActionButtonsInterface = () => {\n  const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();\n  const { t } = useTranslationContext();\n  const { channel } = useChannelListItemContext();\n  const [referenceElement, setReferenceElement] =\n    React.useState<HTMLButtonElement | null>(null);\n  const [isRestoringFocus, setIsRestoringFocus] = React.useState(false);\n  const dialogId = ChannelListItemActionButtons.getDialogId({\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    channelId: channel.id!,\n  });\n  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });\n  const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);\n\n  const closeContextMenu = React.useCallback(() => {\n    setIsRestoringFocus(true);\n    dialog?.close();\n\n    requestAnimationFrame(() => {\n      if (!referenceElement?.isConnected) {\n        setIsRestoringFocus(false);\n        return;\n      }\n\n      referenceElement.focus();\n\n      requestAnimationFrame(() => {\n        if (document.activeElement !== referenceElement) {\n          setIsRestoringFocus(false);\n        }\n      });\n    });\n  }, [dialog, referenceElement]);\n\n  const filteredActionSet = useBaseChannelActionSetFilter(defaultChannelActionSet);\n  const { dropdownActionSet, quickActionSet, quickDropdownToggleAction } =\n    useSplitActionSet(filteredActionSet);\n\n  if (quickActionSet.length + dropdownActionSet.length === 0) {\n    // no buttons to render, omit rendering wrapper\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx('str-chat__channel-list-item__action-buttons', {\n        'str-chat__channel-list-item__action-buttons--active':\n          dialogIsOpen || isRestoringFocus,\n      })}\n      data-testid='channel-list-item-action-buttons'\n      onFocusCapture={() => {\n        setIsRestoringFocus(false);\n      }}\n    >\n      {quickDropdownToggleAction && dropdownActionSet.length > 0 && (\n        <quickDropdownToggleAction.Component ref={setReferenceElement} />\n      )}\n      {quickActionSet.map(({ Component, type }) => (\n        <Component key={type} />\n      ))}\n      <ContextMenuComponent\n        aria-label={t('channelListItem.channelActions.ariaLabel', 'Channel Actions')}\n        className='str-chat__channel-list-item__action-buttons-context-menu'\n        data-testid='channel-list-item-context-menu'\n        dialogManagerId={dialogManager?.id}\n        id={dialog.id}\n        onClose={closeContextMenu}\n        placement='bottom-start'\n        referenceElement={referenceElement}\n        tabIndex={-1}\n        trapFocus\n      >\n        {dropdownActionSet.map(({ Component, type }) => (\n          <Component key={type} />\n        ))}\n      </ContextMenuComponent>\n    </div>\n  );\n};\n\nChannelListItemActionButtons.getDialogId = ({ channelId }) =>\n  `channel-action-buttons-${channelId}`;\n\nChannelListItemActionButtons.displayName = 'ChannelListItemActionButtons';\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,qCAA4E;CACvF,MAAM,EAAE,aAAa,uBAAuB,gBAAgB,oBAAoB;CAChF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,YAAY,0BAA0B;CAC9C,MAAM,CAAC,kBAAkB,uBACvB,MAAM,SAAmC,IAAI;CAC/C,MAAM,CAAC,kBAAkB,uBAAuB,MAAM,SAAS,KAAK;CACpE,MAAM,WAAW,6BAA6B,YAAY,EAExD,WAAW,QAAQ,GACrB,CAAC;CACD,MAAM,EAAE,QAAQ,kBAAkB,0BAA0B,EAAE,IAAI,SAAS,CAAC;CAC5E,MAAM,eAAe,gBAAgB,UAAU,eAAe,EAAE;CAEhE,MAAM,mBAAmB,MAAM,kBAAkB;EAC/C,oBAAoB,IAAI;EACxB,QAAQ,MAAM;EAEd,4BAA4B;GAC1B,IAAI,CAAC,kBAAkB,aAAa;IAClC,oBAAoB,KAAK;IACzB;GACF;GAEA,iBAAiB,MAAM;GAEvB,4BAA4B;IAC1B,IAAI,SAAS,kBAAkB,kBAC7B,oBAAoB,KAAK;GAE7B,CAAC;EACH,CAAC;CACH,GAAG,CAAC,QAAQ,gBAAgB,CAAC;CAG7B,MAAM,EAAE,mBAAmB,gBAAgB,8BACzC,kBAFwB,8BAA8B,uBAEpC,CAAiB;CAErC,IAAI,eAAe,SAAS,kBAAkB,WAAW,GAEvD,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,+CAA+C,EAC7D,uDACE,gBAAgB,iBACpB,CAAC;EACD,eAAY;EACZ,sBAAsB;GACpB,oBAAoB,KAAK;EAC3B;YARF;GAUG,6BAA6B,kBAAkB,SAAS,KACvD,oBAAC,0BAA0B,WAA3B,EAAqC,KAAK,oBAAsB,CAAA;GAEjE,eAAe,KAAK,EAAE,WAAW,WAChC,oBAAC,WAAD,CAAuB,GAAP,IAAO,CACxB;GACD,oBAAC,sBAAD;IACE,cAAY,EAAE,4CAA4C,iBAAiB;IAC3E,WAAU;IACV,eAAY;IACZ,iBAAiB,eAAe;IAChC,IAAI,OAAO;IACX,SAAS;IACT,WAAU;IACQ;IAClB,UAAU;IACV,WAAA;cAEC,kBAAkB,KAAK,EAAE,WAAW,WACnC,oBAAC,WAAD,CAAuB,GAAP,IAAO,CACxB;GACmB,CAAA;EACnB;;AAET;AAEA,6BAA6B,eAAe,EAAE,gBAC5C,0BAA0B;AAE5B,6BAA6B,cAAc"}

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

@@ -0,0 +1,31 @@
+import { getDateString } from "../../i18n/utils.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useMemo } from "react";
+import { convertTimestampToDate } from "stream-chat";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ChannelListItem/ChannelListItemTimestamp.tsx
+function ChannelListItemTimestamp({ previewedMessage }) {
+	const { t, tDateTimeParser } = useTranslationContext();
+	const timestamp = previewedMessage?.created_at;
+	const normalizedTimestamp = timestamp != null ? convertTimestampToDate(timestamp)?.toISOString() : void 0;
+	const when = useMemo(() => getDateString({
+		messageCreatedAt: normalizedTimestamp,
+		t,
+		tDateTimeParser,
+		timestampTranslationKey: "timestamp.ChannelPreviewTimestamp"
+	}), [
+		normalizedTimestamp,
+		t,
+		tDateTimeParser
+	]);
+	if (!when) return null;
+	return /* @__PURE__ */ jsx("time", {
+		className: "str-chat__channel-list-item-timestamp",
+		dateTime: normalizedTimestamp,
+		children: when
+	});
+}
+//#endregion
+export { ChannelListItemTimestamp };
+
+//# sourceMappingURL=ChannelListItemTimestamp.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListItemTimestamp.mjs","names":[],"sources":["../../../../src/components/ChannelListItem/ChannelListItemTimestamp.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { LocalMessage } from 'stream-chat';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { getDateString } from '../../i18n/utils';\nimport { convertTimestampToDate } from 'stream-chat';\n\nexport type ChannelListItemTimestampProps = {\n  /** The message previewed by the item, used to extract the timestamp */\n  previewedMessage?: LocalMessage;\n};\n\nexport function ChannelListItemTimestamp({\n  previewedMessage,\n}: ChannelListItemTimestampProps) {\n  const { t, tDateTimeParser } = useTranslationContext();\n\n  const timestamp = previewedMessage?.created_at;\n  // `isDate` correctly reports that a wire number is not a `Date`, so the old idiom here returned\n  // `undefined` for every message and the timestamp vanished from the list. Convert instead.\n  const normalizedTimestamp =\n    timestamp != null ? convertTimestampToDate(timestamp)?.toISOString() : undefined;\n\n  const when = useMemo(\n    () =>\n      getDateString({\n        messageCreatedAt: normalizedTimestamp,\n        t,\n        tDateTimeParser,\n        timestampTranslationKey: 'timestamp.ChannelPreviewTimestamp',\n      }),\n    [normalizedTimestamp, t, tDateTimeParser],\n  );\n\n  if (!when) return null;\n\n  return (\n    <time\n      className='str-chat__channel-list-item-timestamp'\n      dateTime={normalizedTimestamp}\n    >\n      {when}\n    </time>\n  );\n}\n"],"mappings":";;;;;;AAYA,SAAgB,yBAAyB,EACvC,oBACgC;CAChC,MAAM,EAAE,GAAG,oBAAoB,sBAAsB;CAErD,MAAM,YAAY,kBAAkB;CAGpC,MAAM,sBACJ,aAAa,OAAO,uBAAuB,SAAS,CAAC,EAAE,YAAY,IAAI,KAAA;CAEzE,MAAM,OAAO,cAET,cAAc;EACZ,kBAAkB;EAClB;EACA;EACA,yBAAyB;CAC3B,CAAC,GACH;EAAC;EAAqB;EAAG;CAAe,CAC1C;CAEA,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,oBAAC,QAAD;EACE,WAAU;EACV,UAAU;YAET;CACG,CAAA;AAEV"}

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

@@ -0,0 +1,120 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.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 { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useWorkspaceNavigation } from "../../context/WorkspaceNavigationContext.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 { IconMute, IconPin } = useComponentContextIcons();
+	const { accessibleLabelConfig, active, channel, className: customClassName = "", displayImage, displayTitle, groupChannelDisplayInfo, messageDeliveryStatus, muted, onSelect: customOnSelectChannel, pinned, previewedMessage, unread } = props;
+	const { Avatar = ChannelAvatar, ChannelListItemActionButtons: ChannelListItemActionButtons$1 = ChannelListItemActionButtons, SummarizedMessagePreview: SummarizedMessagePreview$1 = SummarizedMessagePreview } = useComponentContext();
+	const { client, isMessageAIGenerated } = useChatContext();
+	const { t, tDateTimeParser, userLanguage } = useTranslationContext();
+	const { openChannel } = useWorkspaceNavigation();
+	const { announceInteraction } = useInteractionAnnouncements();
+	const channelPreviewButton = useRef(null);
+	const accessibleLabel = useMemo(() => composeChannelListItemAccessibleLabel({
+		active,
+		channel,
+		client,
+		displayTitle,
+		isMessageAIGenerated,
+		latestMessage: previewedMessage,
+		messageDeliveryStatus,
+		t,
+		tDateTimeParser,
+		unreadCount: unread,
+		userLanguage
+	}, accessibleLabelConfig), [
+		accessibleLabelConfig,
+		active,
+		channel,
+		client,
+		displayTitle,
+		isMessageAIGenerated,
+		messageDeliveryStatus,
+		muted,
+		pinned,
+		previewedMessage,
+		t,
+		tDateTimeParser,
+		unread,
+		userLanguage
+	]);
+	const avatarName = displayTitle || channel.messagePaginator.headmostItem?.user?.id;
+	const onSelectChannel = (e) => {
+		if (customOnSelectChannel) customOnSelectChannel(e);
+		else {
+			openChannel(channel, { event: e });
+			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, { previewedMessage }), typeof unread === "number" && unread > 0 && /* @__PURE__ */ jsx(Badge, {
+							"data-testid": "unread-badge",
+							size: "md",
+							variant: "primary",
+							children: unread
+						})]
+					})]
+				}), /* @__PURE__ */ jsx(SummarizedMessagePreview$1, {
+					latestMessage: previewedMessage,
+					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  useWorkspaceNavigation,\n} from '../../context';\nimport type { ChannelListItemUIProps } from './ChannelListItem';\nimport { composeChannelListItemAccessibleLabel } from './utils.a11y';\nimport { SummarizedMessagePreview as DefaultSummarizedMessagePreview } from '../SummarizedMessagePreview';\n\nconst UnMemoizedChannelListItemUI = (props: ChannelListItemUIProps) => {\n  const { IconMute, IconPin } = useComponentContextIcons();\n  const {\n    accessibleLabelConfig,\n    active,\n    channel,\n    className: customClassName = '',\n    displayImage,\n    displayTitle,\n    groupChannelDisplayInfo,\n    messageDeliveryStatus,\n    muted,\n    onSelect: customOnSelectChannel,\n    pinned,\n    previewedMessage,\n    unread,\n  } = props;\n\n  const {\n    Avatar = DefaultChannelAvatar,\n    ChannelListItemActionButtons = DefaultChannelListItemActionButtons,\n    SummarizedMessagePreview = DefaultSummarizedMessagePreview,\n  } = useComponentContext();\n  const { client, isMessageAIGenerated } = useChatContext();\n  const { t, tDateTimeParser, userLanguage } = useTranslationContext();\n  const { openChannel } = useWorkspaceNavigation();\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: previewedMessage,\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      messageDeliveryStatus,\n      muted,\n      pinned,\n      previewedMessage,\n      t,\n      tDateTimeParser,\n      unread,\n      userLanguage,\n    ],\n  );\n\n  const avatarName = displayTitle || channel.messagePaginator.headmostItem?.user?.id;\n\n  const onSelectChannel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (customOnSelectChannel) {\n      customOnSelectChannel(e);\n    } else {\n      // Selection is one navigation model: open the channel in the workspace. Forward the event so a\n      // consumer overriding `openChannel` (e.g. via ChatView's `deriveWorkspaceNavigation`) can honor\n      // ⌘/ctrl-click.\n      openChannel(channel, { event: e });\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 previewedMessage={previewedMessage} />\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={previewedMessage}\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":";;;;;;;;;;;;;;;;AAoBA,IAAM,+BAA+B,UAAkC;CACrE,MAAM,EAAE,UAAU,YAAY,yBAAyB;CACvD,MAAM,EACJ,uBACA,QACA,SACA,WAAW,kBAAkB,IAC7B,cACA,cACA,yBACA,uBACA,OACA,UAAU,uBACV,QACA,kBACA,WACE;CAEJ,MAAM,EACJ,SAAS,eACT,8BAAA,iCAA+B,8BAC/B,0BAAA,6BAA2B,6BACzB,oBAAoB;CACxB,MAAM,EAAE,QAAQ,yBAAyB,eAAe;CACxD,MAAM,EAAE,GAAG,iBAAiB,iBAAiB,sBAAsB;CACnE,MAAM,EAAE,gBAAgB,uBAAuB;CAC/C,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,aAAa,gBAAgB,QAAQ,iBAAiB,cAAc,MAAM;CAEhF,MAAM,mBAAmB,MAA2C;EAClE,IAAI,uBACF,sBAAsB,CAAC;OAClB;GAIL,YAAY,SAAS,EAAE,OAAO,EAAE,CAAC;GAIjC,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,EAA4C,iBAAmB,CAAA,GAC9D,OAAO,WAAW,YAAY,SAAS,KACtC,oBAAC,OAAD;OAAO,eAAY;OAAe,MAAK;OAAK,SAAQ;iBACjD;MACI,CAAA,CAEN;OACF;QACL,oBAAC,4BAAD;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.custom.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 name = channel.data?.custom?.name;
+	if (name && typeof name === "string") return 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.custom.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();
+	const { t } = useTranslationContext();
+	const directMessageLabel = t("channelListItem.channelDisplayName.directMessage.label", "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.custom.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 name = channel.data?.custom?.name;\n  if (name && typeof name === 'string') return 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.custom.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();\n  const { t } = useTranslationContext();\n  const directMessageLabel = t(\n    'channelListItem.channelDisplayName.directMessage.label',\n    'Direct message',\n  );\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,MAAM,QAAQ;CACnC,IAAI,QAAQ,OAAO,SAAS,UAAU,OAAO;CAE7C,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;CAClC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,qBAAqB,EACzB,0DACA,gBACF;CAEA,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,15 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+//#region src/components/ChannelListItem/hooks/useIsChannelMuted.ts
+var muteStatusSelector = (nextValue) => ({ muteStatus: nextValue.muteStatus });
+/**
+* Reactively reports whether the channel is muted for the current user.
+*
+* Reads the channel's `muteStatus` state slice, which the client keeps in sync with its own
+* `mutedChannels` (on `notification.channel_mutes_updated` and `health.check`) and republishes only
+* when the status actually changes.
+*/
+var useIsChannelMuted = (channel) => useStateStore(channel.state, muteStatusSelector).muteStatus;
+//#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 type { Channel, MuteStatusState } from 'stream-chat';\n\nimport { useStateStore } from '../../../store';\n\nconst muteStatusSelector = (nextValue: MuteStatusState) => ({\n  muteStatus: nextValue.muteStatus,\n});\n\n/**\n * Reactively reports whether the channel is muted for the current user.\n *\n * Reads the channel's `muteStatus` state slice, which the client keeps in sync with its own\n * `mutedChannels` (on `notification.channel_mutes_updated` and `health.check`) and republishes only\n * when the status actually changes.\n */\nexport const useIsChannelMuted = (channel: Channel) =>\n  useStateStore(channel.state, muteStatusSelector).muteStatus;\n"],"mappings":";;AAIA,IAAM,sBAAsB,eAAgC,EAC1D,YAAY,UAAU,WACxB;;;;;;;;AASA,IAAa,qBAAqB,YAChC,cAAc,QAAQ,OAAO,kBAAkB,CAAC,CAAC"}

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,QAAQ,OAAO,YAAY,GAC7E,CAAC,OAAO,YAAY,CACtB;AACF"}

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

@@ -0,0 +1,36 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useCallback, useMemo } 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;
+}({});
+/** Whether a cursor has reached this message. */
+var hasCursorReached = (message, cursor) => !!cursor && message.created_at <= cursor.timestamp;
+var trackerSnapshotSelector = (next) => ({
+	lastDeliveredRefByOthers: next.lastDeliveredRefByOthers,
+	lastReadRefByOthers: next.lastReadRefByOthers
+});
+var useMessageDeliveryStatus = ({ channel, lastMessage }) => {
+	const { client } = useChatContext();
+	const trackerSnapshot = useStateStore(channel.messageReceiptsTracker.snapshotStore, trackerSnapshotSelector);
+	const isOwnMessage = useCallback((message) => client.user && message && message.user?.id === client.user.id, [client]);
+	return { messageDeliveryStatus: useMemo(() => {
+		if (!lastMessage) return void 0;
+		if (!isOwnMessage(lastMessage)) return void 0;
+		if (hasCursorReached(lastMessage, trackerSnapshot?.lastReadRefByOthers ?? null)) return "read";
+		if (hasCursorReached(lastMessage, trackerSnapshot?.lastDeliveredRefByOthers ?? null)) return "delivered";
+		return "sent";
+	}, [
+		isOwnMessage,
+		lastMessage,
+		trackerSnapshot
+	]) };
+};
+//#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, useMemo } from 'react';\nimport type {\n  Channel,\n  LocalMessage,\n  MessageReceiptsSnapshot,\n  MsgRef,\n  UserResponse,\n} from 'stream-chat';\n\nimport { useChatContext } from '../../../context';\nimport { useStateStore } from '../../../store/hooks/useStateStore';\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\n/** Whether a cursor has reached this message. */\nconst hasCursorReached = (message: LocalMessage, cursor: MsgRef | null) =>\n  !!cursor && message.created_at <= cursor.timestamp;\n\nconst trackerSnapshotSelector = (next: MessageReceiptsSnapshot) => ({\n  lastDeliveredRefByOthers: next.lastDeliveredRefByOthers,\n  lastReadRefByOthers: next.lastReadRefByOthers,\n});\n\nexport const useMessageDeliveryStatus = ({\n  channel,\n  lastMessage,\n}: UseMessageStatusParamsChannelPreviewProps) => {\n  const { client } = useChatContext();\n  const trackerSnapshot = useStateStore(\n    channel.messageReceiptsTracker.snapshotStore,\n    trackerSnapshotSelector,\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  const messageDeliveryStatus = useMemo(() => {\n    // empty channel\n    if (!lastMessage) return undefined;\n\n    const lastMessageIsOwn = isOwnMessage(lastMessage);\n    if (!lastMessageIsOwn) return undefined;\n\n    // Read against the cursors rather than asking who sits on this message: a member whose cursor\n    // is behind the latest message has still received everything up to it, and the old lookup\n    // reported that as `SENT`.\n    if (hasCursorReached(lastMessage, trackerSnapshot?.lastReadRefByOthers ?? null)) {\n      return MessageDeliveryStatus.READ;\n    }\n    if (\n      hasCursorReached(lastMessage, trackerSnapshot?.lastDeliveredRefByOthers ?? null)\n    ) {\n      return MessageDeliveryStatus.DELIVERED;\n    }\n    return MessageDeliveryStatus.SENT;\n  }, [isOwnMessage, lastMessage, trackerSnapshot]);\n\n  return {\n    messageDeliveryStatus,\n  };\n};\n"],"mappings":";;;;AAYA,IAAY,wBAAL,yBAAA,uBAAA;CACL,sBAAA,UAAA;CACA,sBAAA,eAAA;CACA,sBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;;AASA,IAAM,oBAAoB,SAAuB,WAC/C,CAAC,CAAC,UAAU,QAAQ,cAAc,OAAO;AAE3C,IAAM,2BAA2B,UAAmC;CAClE,0BAA0B,KAAK;CAC/B,qBAAqB,KAAK;AAC5B;AAEA,IAAa,4BAA4B,EACvC,SACA,kBAC+C;CAC/C,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,kBAAkB,cACtB,QAAQ,uBAAuB,eAC/B,uBACF;CAEA,MAAM,eAAe,aAClB,YACC,OAAO,QAAQ,WAAW,QAAQ,MAAM,OAAO,OAAO,KAAK,IAC7D,CAAC,MAAM,CACT;CAuBA,OAAO,EACL,uBAtB4B,cAAc;EAE1C,IAAI,CAAC,aAAa,OAAO,KAAA;EAGzB,IAAI,CADqB,aAAa,WACjC,GAAkB,OAAO,KAAA;EAK9B,IAAI,iBAAiB,aAAa,iBAAiB,uBAAuB,IAAI,GAC5E,OAAA;EAEF,IACE,iBAAiB,aAAa,iBAAiB,4BAA4B,IAAI,GAE/E,OAAA;EAEF,OAAA;CACF,GAAG;EAAC;EAAc;EAAa;CAAe,CAG5C,EACF;AACF"}