@mattermost/compass-ui 0.1.0-alpha.27 → 0.1.0-alpha.28

package/dist/components/channel-sidebar-item/ChannelSidebarItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelSidebarItem.cjs","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport GlobeIcon from '@mattermost/compass-icons/components/globe';\nimport LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';\nimport MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport ChartLineIcon from '@mattermost/compass-icons/components/chart-line';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport PhoneInTalkIcon from '@mattermost/compass-icons/components/phone-in-talk';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './ChannelSidebarItem.module.scss';\n\nexport type ChannelSidebarItemLeadingVisual =\n  | 'public'\n  | 'private'\n  | 'group-message'\n  | 'direct-message'\n  | 'drafts'\n  | 'insights'\n  | 'threads'\n  | 'dial-pad';\n\nexport type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';\n\nexport interface ChannelSidebarItemProps {\n  className?: string;\n  /** Channel or user display name. Accepts translated nodes. */\n  name: ReactNode;\n  /**\n   * Text-only row (e.g. System Console navigation): no channel glyph or\n   * overflow menu; name aligns with channel sidebar label padding.\n   */\n  hideLeadingVisual?: boolean;\n  /** Leading visual type. Default: Public. Ignored when `hideLeadingVisual`. */\n  leadingVisual?: ChannelSidebarItemLeadingVisual;\n  /** Read/unread/mention state. Default: Read. */\n  status?: ChannelSidebarItemStatus;\n  /** Highlighted as the currently active item. */\n  active?: boolean;\n  /** Muted channel — reduces visual prominence. */\n  muted?: boolean;\n  /** Shows a call-in-progress indicator on the right. */\n  callActive?: boolean;\n  /** Shows the shared-channel icon after the name. */\n  sharedChannel?: boolean;\n  /** Mention count shown in the badge when status='mention'. */\n  mentionCount?: number;\n  /** Member count shown in the group icon when leadingVisual='group-message'. */\n  memberCount?: number;\n  /** Avatar image URL for leadingVisual='direct-message'. */\n  avatarSrc?: string;\n  /** Avatar alt text for leadingVisual='direct-message'. */\n  avatarAlt?: string;\n  /** Shows status badge on the avatar when leadingVisual='direct-message'. */\n  showAvatarStatus?: boolean;\n  /** Custom status emoji shown after the name for leadingVisual='direct-message'. */\n  customStatusEmoji?: string;\n  onClick?: () => void;\n  /** Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. */\n  onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n  formatMentionLabel?: (count: number) => ReactNode;\n  /** Visually hidden unread hint. Default: \"unread\". */\n  unreadLabel?: ReactNode;\n  /** Accessible name for the overflow menu button. Default: \"Channel options\". */\n  menuLabel?: string;\n}\n\nconst defaultFormatMentions = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\nfunction LeadingVisualContent({\n  leadingVisual,\n  memberCount,\n  avatarSrc,\n  showAvatarStatus,\n}: {\n  leadingVisual: ChannelSidebarItemLeadingVisual;\n  memberCount: number | undefined;\n  avatarSrc: string | undefined;\n  showAvatarStatus: boolean | undefined;\n}) {\n  switch (leadingVisual) {\n    case 'private':\n      return <LockOutlineIcon size={16} />;\n    case 'group-message':\n      return (\n        <div className={styles['channel-sidebar-item__group-icon']}>\n          {memberCount ?? 2}\n        </div>\n      );\n    case 'direct-message':\n      return (\n        <UserAvatar\n          src={avatarSrc ?? ''}\n          alt=\"\"\n          size=\"20\"\n          status={!!showAvatarStatus}\n        />\n      );\n    case 'drafts':\n      return <SendOutlineIcon size={16} />;\n    case 'insights':\n      return <ChartLineIcon size={16} />;\n    case 'threads':\n      return <MessageTextOutlineIcon size={16} />;\n    case 'dial-pad':\n      return <DialpadIcon size={16} />;\n    case 'public':\n    default:\n      return <GlobeIcon size={16} />;\n  }\n}\n\n/**\n * The Channel Sidebar Item is the row people use to move between channels, DMs, and group\n * messages. It compresses a lot of state — channel type, unread, mention count, mute,\n * in-call — into a single, scannable line.\n */\nexport default function ChannelSidebarItem({\n  className,\n  name,\n  hideLeadingVisual = false,\n  leadingVisual = 'public',\n  status = 'read',\n  active = false,\n  muted = false,\n  callActive = false,\n  sharedChannel = false,\n  mentionCount,\n  memberCount,\n  avatarSrc,\n  showAvatarStatus = false,\n  customStatusEmoji,\n  onClick,\n  onMenuClick,\n  formatMentionLabel = defaultFormatMentions,\n  unreadLabel = 'unread',\n  menuLabel = 'Channel options',\n}: ChannelSidebarItemProps) {\n  const isDM = !hideLeadingVisual && leadingVisual === 'direct-message';\n  const isDrafts = !hideLeadingVisual && leadingVisual === 'drafts';\n  const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n  const hasMentionBadge = effectiveStatus === 'mention';\n  const isChannelOrDM =\n    !hideLeadingVisual &&\n    ['public', 'private', 'group-message', 'direct-message'].includes(\n      leadingVisual,\n    );\n\n  const rootClass = [\n    styles['channel-sidebar-item'],\n    hideLeadingVisual ? styles['channel-sidebar-item--text-only'] : '',\n    active ? styles['channel-sidebar-item--active'] : '',\n    muted ? styles['channel-sidebar-item--muted'] : '',\n    styles[`channel-sidebar-item--status-${effectiveStatus.toLowerCase()}`],\n    isDrafts ? styles['channel-sidebar-item--drafts'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconContainerClass = [\n    styles['channel-sidebar-item__icon-container'],\n    isDM ? styles['channel-sidebar-item__icon-container--dm'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const rightClass = styles['channel-sidebar-item__right'];\n\n  const statusHint =\n    effectiveStatus === 'mention'\n      ? formatMentionLabel(mentionCount ?? 1)\n      : effectiveStatus === 'unread'\n        ? unreadLabel\n        : undefined;\n\n  return (\n    <div className={rootClass}>\n      {active && (\n        <div className={styles['channel-sidebar-item__active-border']} />\n      )}\n      <button\n        type=\"button\"\n        className={styles['channel-sidebar-item__left']}\n        onClick={onClick}\n        aria-current={active ? true : undefined}\n      >\n        {!hideLeadingVisual && (\n          <div className={iconContainerClass} aria-hidden>\n            <LeadingVisualContent\n              leadingVisual={leadingVisual}\n              memberCount={memberCount}\n              avatarSrc={avatarSrc}\n              showAvatarStatus={showAvatarStatus}\n            />\n          </div>\n        )}\n        <div className={styles['channel-sidebar-item__content']}>\n          <span className={styles['channel-sidebar-item__name']}>{name}</span>\n          {statusHint && (\n            <span className={styles['channel-sidebar-item__status-hint']}>\n              {statusHint}\n            </span>\n          )}\n          {sharedChannel && (\n            <span\n              className={styles['channel-sidebar-item__shared-icon']}\n              aria-hidden\n            >\n              <CircleMultipleOutlineIcon size={12} />\n            </span>\n          )}\n          {isDM && customStatusEmoji && (\n            <span\n              className={styles['channel-sidebar-item__custom-status']}\n              aria-hidden\n            >\n              {customStatusEmoji}\n            </span>\n          )}\n        </div>\n      </button>\n      <div className={rightClass}>\n        {callActive && (\n          <div className={styles['channel-sidebar-item__call']} aria-hidden>\n            <PhoneInTalkIcon size={12} />\n          </div>\n        )}\n        {hasMentionBadge && (\n          <span\n            className={styles['channel-sidebar-item__mention-badge']}\n            aria-hidden\n          >\n            <MentionBadge\n              count={mentionCount ?? 1}\n              location=\"sidebar\"\n              size=\"medium\"\n            />\n          </span>\n        )}\n        {isChannelOrDM && (\n          <span className={styles['channel-sidebar-item__menu-button']}>\n            <IconButton\n              className={styles['channel-sidebar-item__menu-icon']}\n              size=\"x-small\"\n              style=\"inverted\"\n              icon={<Icon glyph={<DotsVerticalIcon />} />}\n              aria-label={menuLabel}\n              onClick={(e) => {\n                e.stopPropagation();\n                onMenuClick?.(e);\n              }}\n            />\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["defaultFormatMentions","count","LeadingVisualContent","leadingVisual","memberCount","avatarSrc","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","onClick","onMenuClick","formatMentionLabel","unreadLabel","menuLabel","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","statusHint","jsxs","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","Icon","DotsVerticalIcon","e"],"mappings":"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"}
+{"version":3,"file":"ChannelSidebarItem.cjs","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport GlobeIcon from '@mattermost/compass-icons/components/globe';\nimport LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';\nimport MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport ChartLineIcon from '@mattermost/compass-icons/components/chart-line';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport PhoneInTalkIcon from '@mattermost/compass-icons/components/phone-in-talk';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport Icon, { IconSlotContext } from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { mergeClassNames, type BuiltInButtonProps } from '@/utils/props';\nimport styles from './ChannelSidebarItem.module.scss';\n\nexport type ChannelSidebarItemLeadingVisual =\n  | 'public'\n  | 'private'\n  | 'group-message'\n  | 'direct-message'\n  | 'drafts'\n  | 'insights'\n  | 'threads'\n  | 'dial-pad';\n\nexport type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';\n\nexport interface ChannelSidebarItemProps {\n  className?: string;\n  /** Channel or user display name. Accepts translated nodes. */\n  name: ReactNode;\n  /**\n   * Text-only row (e.g. System Console navigation): no channel glyph or\n   * overflow menu; name aligns with channel sidebar label padding.\n   */\n  hideLeadingVisual?: boolean;\n  /**\n   * Leading visual. A built-in type string (`'public'`, `'private'`, …) keeps its\n   * glyph; any other node (not a string) replaces the icon, like `MenuItem`. Custom\n   * nodes render in the same 24px icon column, so the label stays aligned. For an\n   * icon use `<Icon glyph={<SomeIcon />} />` — the size (16) comes from context.\n   * A 16–24px element such as a 20px avatar is centered in the column.\n   * Default: Public. Ignored when `hideLeadingVisual`.\n   */\n  leadingVisual?: ChannelSidebarItemLeadingVisual | ReactNode;\n  /**\n   * Custom content for the trailing slot, after the name and before the mention\n   * badge / menu button (e.g. a responding indicator). Status-only: on rows with\n   * the overflow menu it fades out on hover / focus, like the mention badge, so\n   * don't put interactive content in it. `status` styling is independent of it.\n   * When omitted, nothing is rendered.\n   */\n  trailingVisual?: ReactNode;\n  /** Read/unread/mention state. Default: Read. */\n  status?: ChannelSidebarItemStatus;\n  /** Highlighted as the currently active item. */\n  active?: boolean;\n  /** Muted channel — reduces visual prominence. */\n  muted?: boolean;\n  /** Shows a call-in-progress indicator on the right. */\n  callActive?: boolean;\n  /** Shows the shared-channel icon after the name. */\n  sharedChannel?: boolean;\n  /** Mention count shown in the badge when status='mention'. */\n  mentionCount?: number;\n  /** Member count shown in the group icon when leadingVisual='group-message'. */\n  memberCount?: number;\n  /** Avatar image URL for leadingVisual='direct-message' (not used with a custom node). */\n  avatarSrc?: string;\n  /** Avatar alt text for leadingVisual='direct-message'. */\n  avatarAlt?: string;\n  /** Shows status badge on the avatar when leadingVisual='direct-message' (not used with a custom node). */\n  showAvatarStatus?: boolean;\n  /** Custom status emoji after the name for a direct message or a custom leading visual. A node can carry a tooltip trigger. */\n  customStatusEmoji?: ReactNode;\n  /**\n   * Visually hidden description of the custom status (for example \"🌴 Out of\n   * office\"), read with the row name. The emoji itself stays `aria-hidden`, so\n   * pass this whenever `customStatusEmoji` carries meaning. Accepts translated\n   * nodes.\n   */\n  customStatusLabel?: ReactNode;\n  onClick?: () => void;\n  /** Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. */\n  onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n  formatMentionLabel?: (count: number) => ReactNode;\n  /** Visually hidden unread hint. Default: \"unread\". */\n  unreadLabel?: ReactNode;\n  /** Accessible name for the overflow menu button. Default: \"Channel options\". */\n  menuLabel?: string;\n  /**\n   * Interactive controls (e.g. an `IconButton`) shown at the right edge, in the\n   * overflow menu's place: it replaces the built-in menu. Unlike\n   * `trailingVisual`, actions stay clickable. See `actionsReveal`.\n   */\n  actions?: ReactNode;\n  /**\n   * When `actions` show. `hover` (default): hidden until the row is hovered or\n   * has focus, like the built-in menu (the mention badge and `trailingVisual`\n   * give way). `always`: visible, slightly dimmed, at rest and at full\n   * strength on hover / focus; the badge and `trailingVisual` stay visible\n   * beside it.\n   */\n  actionsReveal?: 'hover' | 'always';\n  /** Keeps `actions` revealed, e.g. while a menu opened from them is open. */\n  actionsOpen?: boolean;\n  /** Hides the built-in overflow menu without adding `actions`. */\n  hideMenu?: boolean;\n  /**\n   * Turns the row into the parent of a collapsible group: shows a chevron\n   * toggle in the left gutter (revealed on hover / focus) and sets\n   * `aria-expanded` on it. The row itself stays a navigation control; the\n   * group's list and animation are up to the host. Omit for a normal row.\n   */\n  expanded?: boolean;\n  /** Called with the next state when the chevron toggle is activated. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /** `id` of the list the toggle controls (`aria-controls`). */\n  controlsId?: string;\n  /**\n   * Accessible name of the toggle. It stays the same in both states;\n   * `aria-expanded` carries the state. Default: \"Toggle\".\n   */\n  toggleLabel?: string;\n  /** Extra attributes for the chevron toggle button. */\n  toggleButtonProps?: BuiltInButtonProps;\n}\n\nconst defaultFormatMentions = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\nfunction isBuiltInLeadingVisual(\n  value: unknown,\n): value is ChannelSidebarItemLeadingVisual | undefined {\n  // Strings (and omitted) keep today's built-in behavior, including the\n  // fallback to the public glyph for unknown strings.\n  return value === undefined || typeof value === 'string';\n}\n\nfunction LeadingVisualContent({\n  leadingVisual,\n  memberCount,\n  avatarSrc,\n  showAvatarStatus,\n}: {\n  leadingVisual: ChannelSidebarItemLeadingVisual | undefined;\n  memberCount: number | undefined;\n  avatarSrc: string | undefined;\n  showAvatarStatus: boolean | undefined;\n}) {\n  switch (leadingVisual) {\n    case 'private':\n      return <LockOutlineIcon size={16} />;\n    case 'group-message':\n      return (\n        <div className={styles['channel-sidebar-item__group-icon']}>\n          {memberCount ?? 2}\n        </div>\n      );\n    case 'direct-message':\n      return (\n        <UserAvatar\n          src={avatarSrc ?? ''}\n          alt=\"\"\n          size=\"20\"\n          status={!!showAvatarStatus}\n        />\n      );\n    case 'drafts':\n      return <SendOutlineIcon size={16} />;\n    case 'insights':\n      return <ChartLineIcon size={16} />;\n    case 'threads':\n      return <MessageTextOutlineIcon size={16} />;\n    case 'dial-pad':\n      return <DialpadIcon size={16} />;\n    case 'public':\n    default:\n      return <GlobeIcon size={16} />;\n  }\n}\n\n/**\n * The Channel Sidebar Item is the row people use to move between channels, DMs, and group\n * messages. It compresses a lot of state — channel type, unread, mention count, mute,\n * in-call — into a single, scannable line.\n */\nexport default function ChannelSidebarItem({\n  className,\n  name,\n  hideLeadingVisual = false,\n  leadingVisual,\n  trailingVisual,\n  status = 'read',\n  active = false,\n  muted = false,\n  callActive = false,\n  sharedChannel = false,\n  mentionCount,\n  memberCount,\n  avatarSrc,\n  showAvatarStatus = false,\n  customStatusEmoji,\n  customStatusLabel,\n  onClick,\n  onMenuClick,\n  formatMentionLabel = defaultFormatMentions,\n  unreadLabel = 'unread',\n  menuLabel = 'Channel options',\n  actions,\n  actionsReveal = 'hover',\n  actionsOpen = false,\n  hideMenu = false,\n  expanded,\n  onExpandedChange,\n  controlsId,\n  toggleLabel = 'Toggle',\n  toggleButtonProps,\n}: ChannelSidebarItemProps) {\n  const isCustomVisual =\n    !hideLeadingVisual &&\n    leadingVisual !== null &&\n    !isBuiltInLeadingVisual(leadingVisual);\n  const builtInVisual: ChannelSidebarItemLeadingVisual = isBuiltInLeadingVisual(\n    leadingVisual,\n  )\n    ? (leadingVisual ?? 'public')\n    : 'public';\n  const isDM =\n    !hideLeadingVisual && builtInVisual === 'direct-message' && !isCustomVisual;\n  const isDrafts =\n    !hideLeadingVisual && builtInVisual === 'drafts' && !isCustomVisual;\n  const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n  const hasMentionBadge = effectiveStatus === 'mention';\n  const isChannelOrDM =\n    !hideLeadingVisual &&\n    (isCustomVisual ||\n      ['public', 'private', 'group-message', 'direct-message'].includes(\n        builtInVisual,\n      ));\n\n  const hasActions = actions != null && actions !== false;\n  const actionsAlways = hasActions && actionsReveal === 'always';\n  const showMenu = isChannelOrDM && !hideMenu && !hasActions;\n  // Trailing content gives way on hover only when something takes its place.\n  const revealsOnHover = showMenu || (hasActions && !actionsAlways);\n  const hasToggle = expanded !== undefined;\n\n  const rootClass = [\n    styles['channel-sidebar-item'],\n    hideLeadingVisual ? styles['channel-sidebar-item--text-only'] : '',\n    active ? styles['channel-sidebar-item--active'] : '',\n    muted ? styles['channel-sidebar-item--muted'] : '',\n    styles[`channel-sidebar-item--status-${effectiveStatus.toLowerCase()}`],\n    isDrafts ? styles['channel-sidebar-item--drafts'] : '',\n    actionsAlways ? styles['channel-sidebar-item--actions-always'] : '',\n    !revealsOnHover ? styles['channel-sidebar-item--no-hover-menu'] : '',\n    hasActions && actionsOpen && !actionsAlways\n      ? styles['channel-sidebar-item--actions-open']\n      : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconContainerClass = [\n    styles['channel-sidebar-item__icon-container'],\n    isDM ? styles['channel-sidebar-item__icon-container--dm'] : '',\n    isCustomVisual\n      ? styles['channel-sidebar-item__icon-container--custom']\n      : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const rightClass = styles['channel-sidebar-item__right'];\n\n  const statusHint =\n    effectiveStatus === 'mention'\n      ? formatMentionLabel(mentionCount ?? 1)\n      : effectiveStatus === 'unread'\n        ? unreadLabel\n        : undefined;\n\n  return (\n    <div className={rootClass}>\n      {active && (\n        <div className={styles['channel-sidebar-item__active-border']} />\n      )}\n      <button\n        type=\"button\"\n        className={styles['channel-sidebar-item__left']}\n        onClick={onClick}\n        aria-current={active ? true : undefined}\n      >\n        {!hideLeadingVisual && (\n          <div className={iconContainerClass} aria-hidden>\n            {isCustomVisual ? (\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual as ReactNode}\n              </IconSlotContext.Provider>\n            ) : (\n              <LeadingVisualContent\n                leadingVisual={builtInVisual}\n                memberCount={memberCount}\n                avatarSrc={avatarSrc}\n                showAvatarStatus={showAvatarStatus}\n              />\n            )}\n          </div>\n        )}\n        <div className={styles['channel-sidebar-item__content']}>\n          <span className={styles['channel-sidebar-item__name']}>{name}</span>\n          {statusHint && (\n            <span className={styles['channel-sidebar-item__status-hint']}>\n              {statusHint}\n            </span>\n          )}\n          {sharedChannel && (\n            <span\n              className={styles['channel-sidebar-item__shared-icon']}\n              aria-hidden\n            >\n              <Icon glyph={<CircleMultipleOutlineIcon />} size=\"12\" />\n            </span>\n          )}\n          {(isDM || isCustomVisual) && customStatusLabel && (\n            <span className={styles['channel-sidebar-item__status-hint']}>\n              {customStatusLabel}\n            </span>\n          )}\n          {(isDM || isCustomVisual) && customStatusEmoji && (\n            <span\n              className={styles['channel-sidebar-item__custom-status']}\n              aria-hidden\n            >\n              {customStatusEmoji}\n            </span>\n          )}\n        </div>\n      </button>\n      {hasToggle && (\n        <button\n          type=\"button\"\n          {...toggleButtonProps}\n          {...(controlsId ? { 'aria-controls': controlsId } : {})}\n          className={mergeClassNames(\n            styles['channel-sidebar-item__toggle'],\n            toggleButtonProps?.className,\n          )}\n          aria-expanded={expanded}\n          aria-label={toggleLabel}\n          onClick={(e) => {\n            toggleButtonProps?.onClick?.(e);\n            onExpandedChange?.(!expanded);\n          }}\n        >\n          <Icon\n            glyph={expanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n            size=\"12\"\n          />\n        </button>\n      )}\n      <div className={rightClass}>\n        {trailingVisual != null && trailingVisual !== false && (\n          <span\n            className={[\n              styles['channel-sidebar-item__trailing-visual'],\n              revealsOnHover\n                ? styles['channel-sidebar-item__trailing-visual--with-menu']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <IconSlotContext.Provider value={{ size: '16' }}>\n              {trailingVisual}\n            </IconSlotContext.Provider>\n          </span>\n        )}\n        {callActive && (\n          <div className={styles['channel-sidebar-item__call']} aria-hidden>\n            <PhoneInTalkIcon size={12} />\n          </div>\n        )}\n        {hasMentionBadge && (\n          <span\n            className={styles['channel-sidebar-item__mention-badge']}\n            aria-hidden\n          >\n            <MentionBadge\n              count={mentionCount ?? 1}\n              location=\"sidebar\"\n              size=\"medium\"\n            />\n          </span>\n        )}\n        {hasActions && (\n          <span\n            className={mergeClassNames(\n              styles['channel-sidebar-item__actions'],\n              actionsAlways && styles['channel-sidebar-item__actions--always'],\n              actionsOpen && styles['channel-sidebar-item__actions--open'],\n            )}\n          >\n            {actions}\n          </span>\n        )}\n        {showMenu && (\n          <span className={styles['channel-sidebar-item__menu-button']}>\n            <IconButton\n              className={styles['channel-sidebar-item__menu-icon']}\n              size=\"x-small\"\n              style=\"inverted\"\n              icon={<Icon glyph={<DotsVerticalIcon />} />}\n              aria-label={menuLabel}\n              onClick={(e) => {\n                e.stopPropagation();\n                onMenuClick?.(e);\n              }}\n            />\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["defaultFormatMentions","count","isBuiltInLeadingVisual","value","LeadingVisualContent","leadingVisual","memberCount","avatarSrc","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","trailingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","customStatusLabel","onClick","onMenuClick","formatMentionLabel","unreadLabel","menuLabel","actions","actionsReveal","actionsOpen","hideMenu","expanded","onExpandedChange","controlsId","toggleLabel","toggleButtonProps","isCustomVisual","builtInVisual","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","hasActions","actionsAlways","showMenu","revealsOnHover","hasToggle","rootClass","iconContainerClass","rightClass","statusHint","jsxs","IconSlotContext","Icon","CircleMultipleOutlineIcon","mergeClassNames","e","_a","ChevronDownIcon","ChevronRightIcon","PhoneInTalkIcon","MentionBadge","IconButton","DotsVerticalIcon"],"mappings":"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"}

package/dist/components/channel-sidebar-item/ChannelSidebarItem.css

@@ -1 +1 @@
-._channel-sidebar-item_m2jgi_2{position:relative;display:flex;align-items:center;height:32px;overflow:hidden;-webkit-user-select:none;user-select:none}._channel-sidebar-item__menu-button_m2jgi_10{position:absolute;top:50%;right:var(--spacing-l);display:flex;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item__mention-badge_m2jgi_20{transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item_m2jgi_2 ._channel-sidebar-item__menu-icon_m2jgi_23{--focus-ring-color: var(--sidebar-text-active-border)}._channel-sidebar-item_m2jgi_2:hover,._channel-sidebar-item_m2jgi_2:focus-within{overflow:visible}._channel-sidebar-item_m2jgi_2:hover ._channel-sidebar-item__menu-button_m2jgi_10,._channel-sidebar-item_m2jgi_2:focus-within ._channel-sidebar-item__menu-button_m2jgi_10{opacity:1;pointer-events:auto}._channel-sidebar-item_m2jgi_2:hover ._channel-sidebar-item__mention-badge_m2jgi_20,._channel-sidebar-item_m2jgi_2:focus-within ._channel-sidebar-item__mention-badge_m2jgi_20{opacity:0;pointer-events:none}._channel-sidebar-item_m2jgi_2:hover:not(._channel-sidebar-item--active_m2jgi_37),._channel-sidebar-item_m2jgi_2:focus-within:not(._channel-sidebar-item--active_m2jgi_37){background:rgba(var(--sidebar-text-rgb),.08)}._channel-sidebar-item__active-border_m2jgi_40{flex-shrink:0;width:2px;align-self:stretch;border-radius:0 2px 2px 0;background:var(--sidebar-text-active-border)}._channel-sidebar-item__left_m2jgi_47{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border:none;background:transparent;display:flex;align-items:center;flex:1;min-width:0;align-self:stretch;gap:var(--spacing-xxxxs);padding:var(--spacing-xxxxs) var(--spacing-xs) var(--spacing-xxxxs) 18px;cursor:pointer;font:inherit;color:inherit;text-align:left}._channel-sidebar-item__left_m2jgi_47:focus{outline:none}._channel-sidebar-item__left_m2jgi_47:focus-visible{box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._channel-sidebar-item__icon-container_m2jgi_70{display:flex;align-items:center;flex-shrink:0;padding:var(--spacing-xxxs);color:var(--sidebar-text);opacity:.64}._channel-sidebar-item__icon-container--dm_m2jgi_78{padding:var(--spacing-xxxxs);opacity:1;--status-badge-bg: var(--sidebar-bg)}._channel-sidebar-item__group-icon_m2jgi_83{width:var(--icon-size-16);height:var(--icon-size-16);display:flex;align-items:center;justify-content:center;background:rgba(var(--sidebar-text-rgb),.16);border-radius:var(--radius-s);font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-25);letter-spacing:.01em;color:var(--sidebar-text);opacity:.72}._channel-sidebar-item__content_m2jgi_99{display:flex;align-items:center;flex:1;min-width:0;gap:var(--spacing-xs);padding:2px var(--spacing-xxxxs)}._channel-sidebar-item__name_m2jgi_107{font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);letter-spacing:.02em;color:var(--sidebar-text);opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:144px}._channel-sidebar-item__status-hint_m2jgi_120{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._channel-sidebar-item__shared-icon_m2jgi_131{display:flex;align-items:center;flex-shrink:0;padding:var(--spacing-xxxs) 0;color:var(--sidebar-text);opacity:.72}._channel-sidebar-item__custom-status_m2jgi_139{display:flex;align-items:center;flex-shrink:0;font-size:var(--font-size-200);line-height:var(--line-height-25);opacity:.8}._channel-sidebar-item__right_m2jgi_147{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;gap:var(--spacing-xxxxs);padding-right:var(--spacing-l);color:var(--sidebar-text)}._channel-sidebar-item__call_m2jgi_156{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xxxs);border-radius:var(--radius-s)}._channel-sidebar-item--text-only_m2jgi_166 ._channel-sidebar-item__left_m2jgi_47{gap:0}._channel-sidebar-item--active_m2jgi_37{background:rgba(var(--sidebar-text-rgb),.12)}._channel-sidebar-item--active_m2jgi_37 ._channel-sidebar-item__left_m2jgi_47{padding-left:var(--spacing-l)}._channel-sidebar-item--active_m2jgi_37 ._channel-sidebar-item__name_m2jgi_107,._channel-sidebar-item--status-unread_m2jgi_178 ._channel-sidebar-item__icon-container_m2jgi_70,._channel-sidebar-item--status-mention_m2jgi_178 ._channel-sidebar-item__icon-container_m2jgi_70{opacity:1}._channel-sidebar-item--status-unread_m2jgi_178 ._channel-sidebar-item__name_m2jgi_107,._channel-sidebar-item--status-mention_m2jgi_178 ._channel-sidebar-item__name_m2jgi_107{font-weight:var(--font-weight-semibold);opacity:1}._channel-sidebar-item--drafts_m2jgi_185 ._channel-sidebar-item__icon-container_m2jgi_70{opacity:.64}._channel-sidebar-item--drafts_m2jgi_185 ._channel-sidebar-item__name_m2jgi_107{font-weight:var(--font-weight-regular);opacity:.72}._channel-sidebar-item--drafts_m2jgi_185 ._channel-sidebar-item__mention-badge_m2jgi_20>*{background-color:transparent;color:var(--sidebar-text);padding-left:0;padding-right:var(--spacing-xxs)}._channel-sidebar-item--drafts_m2jgi_185._channel-sidebar-item--active_m2jgi_37 ._channel-sidebar-item__name_m2jgi_107{opacity:1}._channel-sidebar-item--muted_m2jgi_201 ._channel-sidebar-item__icon-container_m2jgi_70,._channel-sidebar-item--muted_m2jgi_201 ._channel-sidebar-item__name_m2jgi_107,._channel-sidebar-item--muted_m2jgi_201 ._channel-sidebar-item__shared-icon_m2jgi_131{opacity:.4}
+._channel-sidebar-item_1w0n4_13{position:relative;display:flex;align-items:center;height:32px;overflow:hidden;-webkit-user-select:none;user-select:none}._channel-sidebar-item__menu-button_1w0n4_21,._channel-sidebar-item__actions_1w0n4_21{position:absolute;top:50%;right:var(--spacing-l);display:flex;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item__mention-badge_1w0n4_31{display:flex;align-items:center;justify-content:center;min-width:var(--icon-size-24);transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item__actions_1w0n4_21{align-items:center}._channel-sidebar-item__actions--always_1w0n4_41{opacity:var(--opacity-72);pointer-events:auto}._channel-sidebar-item__actions--open_1w0n4_45{opacity:1;pointer-events:auto}._channel-sidebar-item__toggle_1w0n4_49{outline:none}._channel-sidebar-item__toggle_1w0n4_49:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px;animation:_focus-ring-in_1w0n4_1 var(--duration-quick) var(--ease-transition)}@media(prefers-reduced-motion:reduce){._channel-sidebar-item__toggle_1w0n4_49:focus-visible{animation:none}}._channel-sidebar-item__toggle_1w0n4_49:not(._-host-shadow-a_1w0n4_62):not(._-host-shadow-b_1w0n4_62){box-shadow:none;border-radius:var(--radius-s)}@keyframes _focus-ring-in_1w0n4_1{0%{outline-color:transparent;outline-offset:0}}._channel-sidebar-item__toggle_1w0n4_49{position:absolute;top:50%;left:0;z-index:2;display:flex;align-items:center;justify-content:center;width:var(--icon-size-24);height:var(--icon-size-24);margin:0;padding:0;border:0;background:transparent;color:var(--sidebar-text);cursor:pointer;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item_1w0n4_13 ._channel-sidebar-item__menu-icon_1w0n4_93{--focus-ring-color: var(--sidebar-text-active-border)}._channel-sidebar-item_1w0n4_13:hover,._channel-sidebar-item_1w0n4_13:focus-within{overflow:visible}._channel-sidebar-item_1w0n4_13:hover ._channel-sidebar-item__menu-button_1w0n4_21,._channel-sidebar-item_1w0n4_13:focus-within ._channel-sidebar-item__menu-button_1w0n4_21{opacity:1;pointer-events:auto}._channel-sidebar-item_1w0n4_13:hover ._channel-sidebar-item__mention-badge_1w0n4_31,._channel-sidebar-item_1w0n4_13:focus-within ._channel-sidebar-item__mention-badge_1w0n4_31{opacity:0;pointer-events:none}._channel-sidebar-item_1w0n4_13:hover ._channel-sidebar-item__actions_1w0n4_21,._channel-sidebar-item_1w0n4_13:focus-within ._channel-sidebar-item__actions_1w0n4_21{opacity:1;pointer-events:auto}._channel-sidebar-item_1w0n4_13:hover ._channel-sidebar-item__toggle_1w0n4_49,._channel-sidebar-item_1w0n4_13:focus-within ._channel-sidebar-item__toggle_1w0n4_49{opacity:var(--opacity-72);pointer-events:auto}._channel-sidebar-item_1w0n4_13:hover:not(._channel-sidebar-item--active_1w0n4_115),._channel-sidebar-item_1w0n4_13:focus-within:not(._channel-sidebar-item--active_1w0n4_115){background:rgba(var(--sidebar-text-rgb),.08)}._channel-sidebar-item__active-border_1w0n4_118{flex-shrink:0;width:2px;align-self:stretch;border-radius:0 var(--radius-xs) var(--radius-xs) 0;background:var(--sidebar-text-active-border)}._channel-sidebar-item__left_1w0n4_125{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border:none;background:transparent;display:flex;align-items:center;flex:1;min-width:0;align-self:stretch;gap:var(--spacing-xxxxs);padding:var(--spacing-xxxxs) var(--spacing-xs) var(--spacing-xxxxs) 18px;cursor:pointer;font:inherit;color:inherit;text-align:left}._channel-sidebar-item__left_1w0n4_125:focus{outline:none}._channel-sidebar-item__left_1w0n4_125:focus-visible{box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._channel-sidebar-item__icon-container_1w0n4_148{display:flex;align-items:center;flex-shrink:0;padding:var(--spacing-xxxs);color:var(--sidebar-text);opacity:.64}._channel-sidebar-item__icon-container--dm_1w0n4_156{padding:var(--spacing-xxxxs);opacity:1;--status-badge-bg: var(--sidebar-bg)}._channel-sidebar-item__icon-container--custom_1w0n4_161{justify-content:center;width:var(--icon-size-24);height:var(--icon-size-24);padding:0;box-sizing:border-box;opacity:.72}._channel-sidebar-item__trailing-visual_1w0n4_169{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--icon-size-24);transition:opacity var(--duration-quick) var(--ease-transition)}._channel-sidebar-item_1w0n4_13:hover ._channel-sidebar-item__trailing-visual--with-menu_1w0n4_177,._channel-sidebar-item_1w0n4_13:focus-within ._channel-sidebar-item__trailing-visual--with-menu_1w0n4_177{opacity:0;pointer-events:none}._channel-sidebar-item__group-icon_1w0n4_181{width:var(--icon-size-16);height:var(--icon-size-16);display:flex;align-items:center;justify-content:center;background:rgba(var(--sidebar-text-rgb),.16);border-radius:var(--radius-s);font-family:var(--font-family-body);font-size:var(--font-size-50);font-weight:var(--font-weight-semibold);line-height:var(--line-height-25);letter-spacing:.01em;color:var(--sidebar-text);opacity:.72}._channel-sidebar-item__content_1w0n4_197{display:flex;align-items:center;flex:1;min-width:0;gap:var(--spacing-xs);padding:var(--spacing-xxxxs)}._channel-sidebar-item__name_1w0n4_205{font-family:var(--font-family-body);font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);letter-spacing:.02em;color:var(--sidebar-text);opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:144px}._channel-sidebar-item__status-hint_1w0n4_218{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._channel-sidebar-item__shared-icon_1w0n4_229{display:flex;align-items:center;flex-shrink:0;padding:var(--spacing-xxxs) 0;color:var(--sidebar-text);opacity:.72}._channel-sidebar-item__custom-status_1w0n4_237{display:flex;align-items:center;flex-shrink:0;font-size:var(--font-size-200);line-height:var(--line-height-25);opacity:.8}._channel-sidebar-item__right_1w0n4_245{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;gap:var(--spacing-xxxxs);padding-right:var(--spacing-l);color:var(--sidebar-text)}._channel-sidebar-item__call_1w0n4_254{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xxxs);border-radius:var(--radius-s)}._channel-sidebar-item--actions-open_1w0n4_261 ._channel-sidebar-item__mention-badge_1w0n4_31,._channel-sidebar-item--actions-open_1w0n4_261 ._channel-sidebar-item__trailing-visual--with-menu_1w0n4_177{opacity:0;pointer-events:none}._channel-sidebar-item--actions-always_1w0n4_266 ._channel-sidebar-item__right_1w0n4_245{padding-right:calc(var(--spacing-l) + var(--icon-size-24))}._channel-sidebar-item--no-hover-menu_1w0n4_269:hover ._channel-sidebar-item__mention-badge_1w0n4_31,._channel-sidebar-item--no-hover-menu_1w0n4_269:focus-within ._channel-sidebar-item__mention-badge_1w0n4_31{opacity:1;pointer-events:auto}._channel-sidebar-item--text-only_1w0n4_276 ._channel-sidebar-item__left_1w0n4_125{gap:0}._channel-sidebar-item--active_1w0n4_115{background:rgba(var(--sidebar-text-rgb),.12)}._channel-sidebar-item--active_1w0n4_115 ._channel-sidebar-item__left_1w0n4_125{padding-left:var(--spacing-l)}._channel-sidebar-item--active_1w0n4_115 ._channel-sidebar-item__name_1w0n4_205,._channel-sidebar-item--status-unread_1w0n4_288 ._channel-sidebar-item__icon-container_1w0n4_148,._channel-sidebar-item--status-mention_1w0n4_288 ._channel-sidebar-item__icon-container_1w0n4_148{opacity:1}._channel-sidebar-item--status-unread_1w0n4_288 ._channel-sidebar-item__name_1w0n4_205,._channel-sidebar-item--status-mention_1w0n4_288 ._channel-sidebar-item__name_1w0n4_205{font-weight:var(--font-weight-semibold);opacity:1}._channel-sidebar-item--drafts_1w0n4_295 ._channel-sidebar-item__icon-container_1w0n4_148{opacity:.64}._channel-sidebar-item--drafts_1w0n4_295 ._channel-sidebar-item__name_1w0n4_205{font-weight:var(--font-weight-regular);opacity:.72}._channel-sidebar-item--drafts_1w0n4_295 ._channel-sidebar-item__mention-badge_1w0n4_31{min-width:0}._channel-sidebar-item--drafts_1w0n4_295 ._channel-sidebar-item__mention-badge_1w0n4_31>*{background-color:transparent;color:var(--sidebar-text);padding-left:0;padding-right:var(--spacing-xxs)}._channel-sidebar-item--drafts_1w0n4_295._channel-sidebar-item--active_1w0n4_115 ._channel-sidebar-item__name_1w0n4_205{opacity:1}._channel-sidebar-item--muted_1w0n4_314 ._channel-sidebar-item__icon-container_1w0n4_148,._channel-sidebar-item--muted_1w0n4_314 ._channel-sidebar-item__name_1w0n4_205,._channel-sidebar-item--muted_1w0n4_314 ._channel-sidebar-item__shared-icon_1w0n4_229{opacity:.4}

package/dist/components/channel-sidebar-item/ChannelSidebarItem.d.ts

@@ -1,4 +1,5 @@
 import { MouseEvent, ReactNode } from 'react';
+import { BuiltInButtonProps } from '../../utils/props';
 export type ChannelSidebarItemLeadingVisual = 'public' | 'private' | 'group-message' | 'direct-message' | 'drafts' | 'insights' | 'threads' | 'dial-pad';
 export type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';
 export interface ChannelSidebarItemProps {
@@ -10,8 +11,23 @@ export interface ChannelSidebarItemProps {
      * overflow menu; name aligns with channel sidebar label padding.
      */
     hideLeadingVisual?: boolean;
-    /** Leading visual type. Default: Public. Ignored when `hideLeadingVisual`. */
-    leadingVisual?: ChannelSidebarItemLeadingVisual;
+    /**
+     * Leading visual. A built-in type string (`'public'`, `'private'`, …) keeps its
+     * glyph; any other node (not a string) replaces the icon, like `MenuItem`. Custom
+     * nodes render in the same 24px icon column, so the label stays aligned. For an
+     * icon use `<Icon glyph={<SomeIcon />} />` — the size (16) comes from context.
+     * A 16–24px element such as a 20px avatar is centered in the column.
+     * Default: Public. Ignored when `hideLeadingVisual`.
+     */
+    leadingVisual?: ChannelSidebarItemLeadingVisual | ReactNode;
+    /**
+     * Custom content for the trailing slot, after the name and before the mention
+     * badge / menu button (e.g. a responding indicator). Status-only: on rows with
+     * the overflow menu it fades out on hover / focus, like the mention badge, so
+     * don't put interactive content in it. `status` styling is independent of it.
+     * When omitted, nothing is rendered.
+     */
+    trailingVisual?: ReactNode;
     /** Read/unread/mention state. Default: Read. */
     status?: ChannelSidebarItemStatus;
     /** Highlighted as the currently active item. */
@@ -26,14 +42,21 @@ export interface ChannelSidebarItemProps {
     mentionCount?: number;
     /** Member count shown in the group icon when leadingVisual='group-message'. */
     memberCount?: number;
-    /** Avatar image URL for leadingVisual='direct-message'. */
+    /** Avatar image URL for leadingVisual='direct-message' (not used with a custom node). */
     avatarSrc?: string;
     /** Avatar alt text for leadingVisual='direct-message'. */
     avatarAlt?: string;
-    /** Shows status badge on the avatar when leadingVisual='direct-message'. */
+    /** Shows status badge on the avatar when leadingVisual='direct-message' (not used with a custom node). */
     showAvatarStatus?: boolean;
-    /** Custom status emoji shown after the name for leadingVisual='direct-message'. */
-    customStatusEmoji?: string;
+    /** Custom status emoji after the name for a direct message or a custom leading visual. A node can carry a tooltip trigger. */
+    customStatusEmoji?: ReactNode;
+    /**
+     * Visually hidden description of the custom status (for example "🌴 Out of
+     * office"), read with the row name. The emoji itself stays `aria-hidden`, so
+     * pass this whenever `customStatusEmoji` carries meaning. Accepts translated
+     * nodes.
+     */
+    customStatusLabel?: ReactNode;
     onClick?: () => void;
     /** Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. */
     onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -43,11 +66,47 @@ export interface ChannelSidebarItemProps {
     unreadLabel?: ReactNode;
     /** Accessible name for the overflow menu button. Default: "Channel options". */
     menuLabel?: string;
+    /**
+     * Interactive controls (e.g. an `IconButton`) shown at the right edge, in the
+     * overflow menu's place: it replaces the built-in menu. Unlike
+     * `trailingVisual`, actions stay clickable. See `actionsReveal`.
+     */
+    actions?: ReactNode;
+    /**
+     * When `actions` show. `hover` (default): hidden until the row is hovered or
+     * has focus, like the built-in menu (the mention badge and `trailingVisual`
+     * give way). `always`: visible, slightly dimmed, at rest and at full
+     * strength on hover / focus; the badge and `trailingVisual` stay visible
+     * beside it.
+     */
+    actionsReveal?: 'hover' | 'always';
+    /** Keeps `actions` revealed, e.g. while a menu opened from them is open. */
+    actionsOpen?: boolean;
+    /** Hides the built-in overflow menu without adding `actions`. */
+    hideMenu?: boolean;
+    /**
+     * Turns the row into the parent of a collapsible group: shows a chevron
+     * toggle in the left gutter (revealed on hover / focus) and sets
+     * `aria-expanded` on it. The row itself stays a navigation control; the
+     * group's list and animation are up to the host. Omit for a normal row.
+     */
+    expanded?: boolean;
+    /** Called with the next state when the chevron toggle is activated. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** `id` of the list the toggle controls (`aria-controls`). */
+    controlsId?: string;
+    /**
+     * Accessible name of the toggle. It stays the same in both states;
+     * `aria-expanded` carries the state. Default: "Toggle".
+     */
+    toggleLabel?: string;
+    /** Extra attributes for the chevron toggle button. */
+    toggleButtonProps?: BuiltInButtonProps;
 }
 /**
  * The Channel Sidebar Item is the row people use to move between channels, DMs, and group
  * messages. It compresses a lot of state — channel type, unread, mention count, mute,
  * in-call — into a single, scannable line.
  */
-export default function ChannelSidebarItem({ className, name, hideLeadingVisual, leadingVisual, status, active, muted, callActive, sharedChannel, mentionCount, memberCount, avatarSrc, showAvatarStatus, customStatusEmoji, onClick, onMenuClick, formatMentionLabel, unreadLabel, menuLabel, }: ChannelSidebarItemProps): import("react/jsx-runtime").JSX.Element;
+export default function ChannelSidebarItem({ className, name, hideLeadingVisual, leadingVisual, trailingVisual, status, active, muted, callActive, sharedChannel, mentionCount, memberCount, avatarSrc, showAvatarStatus, customStatusEmoji, customStatusLabel, onClick, onMenuClick, formatMentionLabel, unreadLabel, menuLabel, actions, actionsReveal, actionsOpen, hideMenu, expanded, onExpandedChange, controlsId, toggleLabel, toggleButtonProps, }: ChannelSidebarItemProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChannelSidebarItem.d.ts.map

package/dist/components/channel-sidebar-item/ChannelSidebarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelSidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBnD,MAAM,MAAM,+BAA+B,GACvC,QAAQ,GACR,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,QAAQ,GACR,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,+BAA+B,CAAC;IAChD,gDAAgD;IAChD,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yFAAyF;IACzF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7D,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,sDAAsD;IACtD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgDD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAS,EACT,IAAI,EACJ,iBAAyB,EACzB,aAAwB,EACxB,MAAe,EACf,MAAc,EACd,KAAa,EACb,UAAkB,EAClB,aAAqB,EACrB,YAAY,EACZ,WAAW,EACX,SAAS,EACT,gBAAwB,EACxB,iBAAiB,EACjB,OAAO,EACP,WAAW,EACX,kBAA0C,EAC1C,WAAsB,EACtB,SAA6B,GAC9B,EAAE,uBAAuB,2CAyHzB"}
+{"version":3,"file":"ChannelSidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"names":[],"mappings":"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"}

package/dist/components/channel-sidebar-item/ChannelSidebarItem.js

@@ -1,157 +1,227 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import __w from "@mattermost/compass-icons/components/globe.js";const w=__w&&__w.default?__w.default:__w;
-import __P from "@mattermost/compass-icons/components/lock-outline.js";const P=__P&&__P.default?__P.default:__P;
-import __S from "@mattermost/compass-icons/components/message-text-outline.js";const S=__S&&__S.default?__S.default:__S;
-import __T from "@mattermost/compass-icons/components/send-outline.js";const T=__T&&__T.default?__T.default:__T;
-import __A from "@mattermost/compass-icons/components/chart-line.js";const A=__A&&__A.default?__A.default:__A;
-import __F from "@mattermost/compass-icons/components/circle-multiple-outline.js";const F=__F&&__F.default?__F.default:__F;
-import __G from "@mattermost/compass-icons/components/phone-in-talk.js";const G=__G&&__G.default?__G.default:__G;
-import __H from "@mattermost/compass-icons/components/dots-vertical.js";const H=__H&&__H.default?__H.default:__H;
-import __U from "@mattermost/compass-icons/components/dialpad.js";const U=__U&&__U.default?__U.default:__U;
-import q from "../user-avatar/UserAvatar.js";
-import J from "../mention-badge/MentionBadge.js";
-import K from "../icon/Icon.js";
-import L from "../icon-button/IconButton.js";
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import __ae from "@mattermost/compass-icons/components/globe.js";const ae=__ae&&__ae.default?__ae.default:__ae;
+import __ie from "@mattermost/compass-icons/components/lock-outline.js";const ie=__ie&&__ie.default?__ie.default:__ie;
+import __ne from "@mattermost/compass-icons/components/message-text-outline.js";const ne=__ne&&__ne.default?__ne.default:__ne;
+import __se from "@mattermost/compass-icons/components/send-outline.js";const se=__se&&__se.default?__se.default:__se;
+import __re from "@mattermost/compass-icons/components/chart-line.js";const re=__re&&__re.default?__re.default:__re;
+import __te from "@mattermost/compass-icons/components/circle-multiple-outline.js";const te=__te&&__te.default?__te.default:__te;
+import __ce from "@mattermost/compass-icons/components/phone-in-talk.js";const ce=__ce&&__ce.default?__ce.default:__ce;
+import __le from "@mattermost/compass-icons/components/dots-vertical.js";const le=__le&&__le.default?__le.default:__le;
+import __me from "@mattermost/compass-icons/components/dialpad.js";const me=__me&&__me.default?__me.default:__me;
+import __oe from "@mattermost/compass-icons/components/chevron-down.js";const oe=__oe&&__oe.default?__oe.default:__oe;
+import __de from "@mattermost/compass-icons/components/chevron-right.js";const de=__de&&__de.default?__de.default:__de;
+import he from "../user-avatar/UserAvatar.js";
+import be from "../mention-badge/MentionBadge.js";
+import z, { IconSlotContext as S } from "../icon/Icon.js";
+import _e from "../icon-button/IconButton.js";
+import { mergeClassNames as k } from "../../utils/props.js";
 import a from "./ChannelSidebarItem.module.scss.js";
-const Q = (s) => `${s} mention${s === 1 ? "" : "s"}`;
-function R({
-  leadingVisual: s,
-  memberCount: c,
-  avatarSrc: n,
-  showAvatarStatus: t
+const fe = (i) => `${i} mention${i === 1 ? "" : "s"}`;
+function x(i) {
+  return i === void 0 || typeof i == "string";
+}
+function ue({
+  leadingVisual: i,
+  memberCount: _,
+  avatarSrc: s,
+  showAvatarStatus: r
 }) {
-  switch (s) {
+  switch (i) {
     case "private":
-      return /* @__PURE__ */ e(P, { size: 16 });
+      return /* @__PURE__ */ e(ie, { size: 16 });
     case "group-message":
-      return /* @__PURE__ */ e("div", { className: a["channel-sidebar-item__group-icon"], children: c ?? 2 });
+      return /* @__PURE__ */ e("div", { className: a["channel-sidebar-item__group-icon"], children: _ ?? 2 });
     case "direct-message":
       return /* @__PURE__ */ e(
-        q,
+        he,
         {
-          src: n ?? "",
+          src: s ?? "",
           alt: "",
           size: "20",
-          status: !!t
+          status: !!r
         }
       );
     case "drafts":
-      return /* @__PURE__ */ e(T, { size: 16 });
+      return /* @__PURE__ */ e(se, { size: 16 });
     case "insights":
-      return /* @__PURE__ */ e(A, { size: 16 });
+      return /* @__PURE__ */ e(re, { size: 16 });
     case "threads":
-      return /* @__PURE__ */ e(S, { size: 16 });
+      return /* @__PURE__ */ e(ne, { size: 16 });
     case "dial-pad":
-      return /* @__PURE__ */ e(U, { size: 16 });
+      return /* @__PURE__ */ e(me, { size: 16 });
     case "public":
     default:
-      return /* @__PURE__ */ e(w, { size: 16 });
+      return /* @__PURE__ */ e(ae, { size: 16 });
   }
 }
-function oe({
-  className: s,
-  name: c,
-  hideLeadingVisual: n = !1,
-  leadingVisual: t = "public",
-  status: m = "read",
-  active: o = !1,
-  muted: _ = !1,
-  callActive: N = !1,
-  sharedChannel: v = !1,
-  mentionCount: d,
-  memberCount: I,
-  avatarSrc: g,
-  showAvatarStatus: z = !1,
-  customStatusEmoji: h,
-  onClick: C,
-  onMenuClick: l,
-  formatMentionLabel: x = Q,
-  unreadLabel: y = "unread",
-  menuLabel: B = "Channel options"
+function xe({
+  className: i,
+  name: _,
+  hideLeadingVisual: s = !1,
+  leadingVisual: r,
+  trailingVisual: f,
+  status: y = "read",
+  active: u = !1,
+  muted: F = !1,
+  callActive: G = !1,
+  sharedChannel: R = !1,
+  mentionCount: C,
+  memberCount: U,
+  avatarSrc: q,
+  showAvatarStatus: J = !1,
+  customStatusEmoji: w,
+  customStatusLabel: D,
+  onClick: K,
+  onMenuClick: p,
+  formatMentionLabel: Q = fe,
+  unreadLabel: W = "unread",
+  menuLabel: X = "Channel options",
+  actions: v,
+  actionsReveal: Y = "hover",
+  actionsOpen: O = !1,
+  hideMenu: Z = !1,
+  expanded: l,
+  onExpandedChange: N,
+  controlsId: j,
+  toggleLabel: L = "Toggle",
+  toggleButtonProps: n
 }) {
-  const p = !n && t === "direct-message", u = !n && t === "drafts", i = u && m === "unread" ? "read" : m, D = i === "mention", O = !n && ["public", "private", "group-message", "direct-message"].includes(
-    t
-  ), j = [
+  const t = !s && r !== null && !x(r), m = x(
+    r
+  ) ? r ?? "public" : "public", I = !s && m === "direct-message" && !t, M = !s && m === "drafts" && !t, o = M && y === "unread" ? "read" : y, E = o === "mention", V = !s && (t || ["public", "private", "group-message", "direct-message"].includes(
+    m
+  )), c = v != null && v !== !1, d = c && Y === "always", T = V && !Z && !c, A = T || c && !d, B = l !== void 0, g = [
     a["channel-sidebar-item"],
-    n ? a["channel-sidebar-item--text-only"] : "",
-    o ? a["channel-sidebar-item--active"] : "",
-    _ ? a["channel-sidebar-item--muted"] : "",
-    a[`channel-sidebar-item--status-${i.toLowerCase()}`],
-    u ? a["channel-sidebar-item--drafts"] : "",
-    s
-  ].filter(Boolean).join(" "), M = [
+    s ? a["channel-sidebar-item--text-only"] : "",
+    u ? a["channel-sidebar-item--active"] : "",
+    F ? a["channel-sidebar-item--muted"] : "",
+    a[`channel-sidebar-item--status-${o.toLowerCase()}`],
+    M ? a["channel-sidebar-item--drafts"] : "",
+    d ? a["channel-sidebar-item--actions-always"] : "",
+    A ? "" : a["channel-sidebar-item--no-hover-menu"],
+    c && O && !d ? a["channel-sidebar-item--actions-open"] : "",
+    i
+  ].filter(Boolean).join(" "), P = [
     a["channel-sidebar-item__icon-container"],
-    p ? a["channel-sidebar-item__icon-container--dm"] : ""
-  ].filter(Boolean).join(" "), $ = a["channel-sidebar-item__right"], f = i === "mention" ? x(d ?? 1) : i === "unread" ? y : void 0;
-  return /* @__PURE__ */ r("div", { className: j, children: [
-    o && /* @__PURE__ */ e("div", { className: a["channel-sidebar-item__active-border"] }),
-    /* @__PURE__ */ r(
+    I ? a["channel-sidebar-item__icon-container--dm"] : "",
+    t ? a["channel-sidebar-item__icon-container--custom"] : ""
+  ].filter(Boolean).join(" "), ee = a["channel-sidebar-item__right"], $ = o === "mention" ? Q(C ?? 1) : o === "unread" ? W : void 0;
+  return /* @__PURE__ */ b("div", { className: g, children: [
+    u && /* @__PURE__ */ e("div", { className: a["channel-sidebar-item__active-border"] }),
+    /* @__PURE__ */ b(
       "button",
       {
         type: "button",
         className: a["channel-sidebar-item__left"],
-        onClick: C,
-        "aria-current": o ? !0 : void 0,
+        onClick: K,
+        "aria-current": u ? !0 : void 0,
         children: [
-          !n && /* @__PURE__ */ e("div", { className: M, "aria-hidden": !0, children: /* @__PURE__ */ e(
-            R,
+          !s && /* @__PURE__ */ e("div", { className: P, "aria-hidden": !0, children: t ? /* @__PURE__ */ e(S.Provider, { value: { size: "16" }, children: r }) : /* @__PURE__ */ e(
+            ue,
             {
-              leadingVisual: t,
-              memberCount: I,
-              avatarSrc: g,
-              showAvatarStatus: z
+              leadingVisual: m,
+              memberCount: U,
+              avatarSrc: q,
+              showAvatarStatus: J
             }
           ) }),
-          /* @__PURE__ */ r("div", { className: a["channel-sidebar-item__content"], children: [
-            /* @__PURE__ */ e("span", { className: a["channel-sidebar-item__name"], children: c }),
-            f && /* @__PURE__ */ e("span", { className: a["channel-sidebar-item__status-hint"], children: f }),
-            v && /* @__PURE__ */ e(
+          /* @__PURE__ */ b("div", { className: a["channel-sidebar-item__content"], children: [
+            /* @__PURE__ */ e("span", { className: a["channel-sidebar-item__name"], children: _ }),
+            $ && /* @__PURE__ */ e("span", { className: a["channel-sidebar-item__status-hint"], children: $ }),
+            R && /* @__PURE__ */ e(
               "span",
               {
                 className: a["channel-sidebar-item__shared-icon"],
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ e(F, { size: 12 })
+                children: /* @__PURE__ */ e(z, { glyph: /* @__PURE__ */ e(te, {}), size: "12" })
               }
             ),
-            p && h && /* @__PURE__ */ e(
+            (I || t) && D && /* @__PURE__ */ e("span", { className: a["channel-sidebar-item__status-hint"], children: D }),
+            (I || t) && w && /* @__PURE__ */ e(
               "span",
               {
                 className: a["channel-sidebar-item__custom-status"],
                 "aria-hidden": !0,
-                children: h
+                children: w
               }
             )
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ r("div", { className: $, children: [
-      N && /* @__PURE__ */ e("div", { className: a["channel-sidebar-item__call"], "aria-hidden": !0, children: /* @__PURE__ */ e(G, { size: 12 }) }),
-      D && /* @__PURE__ */ e(
+    B && /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        ...n,
+        ...j ? { "aria-controls": j } : {},
+        className: k(
+          a["channel-sidebar-item__toggle"],
+          n == null ? void 0 : n.className
+        ),
+        "aria-expanded": l,
+        "aria-label": L,
+        onClick: (h) => {
+          var H;
+          (H = n == null ? void 0 : n.onClick) == null || H.call(n, h), N == null || N(!l);
+        },
+        children: /* @__PURE__ */ e(
+          z,
+          {
+            glyph: l ? /* @__PURE__ */ e(oe, {}) : /* @__PURE__ */ e(de, {}),
+            size: "12"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ b("div", { className: ee, children: [
+      f != null && f !== !1 && /* @__PURE__ */ e(
+        "span",
+        {
+          className: [
+            a["channel-sidebar-item__trailing-visual"],
+            A ? a["channel-sidebar-item__trailing-visual--with-menu"] : ""
+          ].filter(Boolean).join(" "),
+          children: /* @__PURE__ */ e(S.Provider, { value: { size: "16" }, children: f })
+        }
+      ),
+      G && /* @__PURE__ */ e("div", { className: a["channel-sidebar-item__call"], "aria-hidden": !0, children: /* @__PURE__ */ e(ce, { size: 12 }) }),
+      E && /* @__PURE__ */ e(
         "span",
         {
           className: a["channel-sidebar-item__mention-badge"],
           "aria-hidden": !0,
           children: /* @__PURE__ */ e(
-            J,
+            be,
             {
-              count: d ?? 1,
+              count: C ?? 1,
               location: "sidebar",
               size: "medium"
             }
           )
         }
       ),
-      O && /* @__PURE__ */ e("span", { className: a["channel-sidebar-item__menu-button"], children: /* @__PURE__ */ e(
-        L,
+      c && /* @__PURE__ */ e(
+        "span",
+        {
+          className: k(
+            a["channel-sidebar-item__actions"],
+            d && a["channel-sidebar-item__actions--always"],
+            O && a["channel-sidebar-item__actions--open"]
+          ),
+          children: v
+        }
+      ),
+      T && /* @__PURE__ */ e("span", { className: a["channel-sidebar-item__menu-button"], children: /* @__PURE__ */ e(
+        _e,
         {
           className: a["channel-sidebar-item__menu-icon"],
           size: "x-small",
           style: "inverted",
-          icon: /* @__PURE__ */ e(K, { glyph: /* @__PURE__ */ e(H, {}) }),
-          "aria-label": B,
-          onClick: (b) => {
-            b.stopPropagation(), l == null || l(b);
+          icon: /* @__PURE__ */ e(z, { glyph: /* @__PURE__ */ e(le, {}) }),
+          "aria-label": X,
+          onClick: (h) => {
+            h.stopPropagation(), p == null || p(h);
           }
         }
       ) })
@@ -159,6 +229,6 @@ function oe({
   ] });
 }
 export {
-  oe as default
+  xe as default
 };
 //# sourceMappingURL=ChannelSidebarItem.js.map