@mattermost/compass-ui 0.1.0-alpha.12 → 0.1.0-alpha.14

package/dist/components/thread-footer/ThreadFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadFooter.cjs","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '@/components/user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadFooter.module.scss';\n\nexport type ThreadFooterBadge = 'none' | 'unread' | 'mention';\n\nexport interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Reply count. Default: 3. */\n  replyCount?: number;\n  /** Participant avatars. Rendered with User Avatar Group (first 3 shown, overflow as +N). */\n  avatars?: UserAvatarGroupItem[];\n  /** Badge variant. Default: None. */\n  badge?: ThreadFooterBadge;\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Whether the current user is following the thread. Default: false. */\n  following?: boolean;\n  /** Last reply timestamp label. Shown on row hover when following. */\n  lastReplyTime?: string;\n  /** Called when Reply is clicked. */\n  onReply?: () => void;\n  /** Called when Follow/Following is clicked. */\n  onFollowToggle?: () => void;\n  /** Hover / active state for button highlight. Default: false. */\n  hovered?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * The Thread Footer is the reply summary bar at the bottom of a message. It shows\n * participants, reply count, follow state, and last-reply time — the information someone\n * needs to decide whether to dive in.\n */\nexport default function ThreadFooter({\n  replyCount = 3,\n  avatars = [],\n  badge = 'none',\n  mentionCount = 1,\n  following = false,\n  lastReplyTime,\n  onReply,\n  onFollowToggle,\n  hovered = false,\n  className = '',\n  ...rest\n}: ThreadFooterProps) {\n  const rootClass = [\n    styles['thread-footer'],\n    following ? styles['thread-footer--following'] : '',\n    hovered ? styles['thread-footer--hovered'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const badgeStatusHint =\n    badge === 'mention'\n      ? `${mentionCount} mention${mentionCount === 1 ? '' : 's'}`\n      : badge === 'unread'\n        ? 'Unread replies'\n        : undefined;\n\n  return (\n    <div className={rootClass} {...rest}>\n      <div className={styles['thread-footer__inner']}>\n        <div className={styles['thread-footer__avatars-group']}>\n          {badgeStatusHint && (\n            <span className={styles['thread-footer__status-hint']}>\n              {badgeStatusHint}\n            </span>\n          )}\n          {(badge === 'unread' || badge === 'mention') && (\n            <div\n              className={styles['thread-footer__badge-container']}\n              aria-hidden\n            >\n              {badge === 'unread' && (\n                <span className={styles['thread-footer__unread-dot']} />\n              )}\n              {badge === 'mention' && (\n                <span className={styles['thread-footer__mention-badge']}>\n                  <MentionBadge\n                    count={mentionCount}\n                    location=\"channel\"\n                    size=\"medium\"\n                  />\n                </span>\n              )}\n            </div>\n          )}\n\n          {avatars.length > 0 && (\n            <UserAvatarGroup avatars={avatars} max={3} size=\"20\" />\n          )}\n        </div>\n\n        {/* Buttons */}\n        <div className={styles['thread-footer__buttons']}>\n          {/* Reply button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__reply-btn'],\n              hovered ? styles['thread-footer__reply-btn--hovered'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onReply}\n            aria-label={`${replyCount} repl${replyCount === 1 ? 'y' : 'ies'}`}\n            leadingIcon={<Icon size=\"12\" glyph={<ReplyOutlineIcon />} />}\n          >\n            <span className={styles['thread-footer__btn-label']}>\n              {replyCount} {replyCount === 1 ? 'reply' : 'replies'}\n            </span>\n          </Button>\n\n          <div className={styles['thread-footer__divider']} aria-hidden />\n\n          {/* Follow / Following button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__follow-btn'],\n              following ? styles['thread-footer__follow-btn--following'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onFollowToggle}\n            aria-pressed={following}\n            aria-label={following ? 'Unfollow thread' : 'Follow thread'}\n          >\n            {following ? 'Following' : 'Follow'}\n          </Button>\n\n          {/* Last reply time — revealed on row hover when following */}\n          {following && lastReplyTime && (\n            <div className={styles['thread-footer__last-reply-group']}>\n              <div className={styles['thread-footer__divider']} aria-hidden />\n              <span className={styles['thread-footer__last-reply']}>\n                {lastReplyTime}\n              </span>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["ThreadFooter","replyCount","avatars","badge","mentionCount","following","lastReplyTime","onReply","onFollowToggle","hovered","className","rest","rootClass","styles","badgeStatusHint","jsx","jsxs","MentionBadge","UserAvatarGroup","Button","Icon","ReplyOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"ThreadFooter.cjs","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '@/components/user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadFooter.module.scss';\n\nexport type ThreadFooterBadge = 'none' | 'unread' | 'mention';\n\nexport interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Reply count. Default: 3. */\n  replyCount?: number;\n  /** Participant avatars. Rendered with User Avatar Group (first 3 shown, overflow as +N). */\n  avatars?: UserAvatarGroupItem[];\n  /** Badge variant. Default: None. */\n  badge?: ThreadFooterBadge;\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Whether the current user is following the thread. Default: false. */\n  following?: boolean;\n  /** Last reply timestamp label. Shown on row hover when following. */\n  lastReplyTime?: ReactNode;\n  /** Called when Reply is clicked. */\n  onReply?: () => void;\n  /** Called when Follow/Following is clicked. */\n  onFollowToggle?: () => void;\n  /** Hover / active state for button highlight. Default: false. */\n  hovered?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Visible reply count. Default: `{count} reply` / `{count} replies`. */\n  formatReplyCount?: (count: number) => ReactNode;\n  /** Accessible name for the reply button. Default: `{count} reply` / `{count} replies`. */\n  formatReplyLabel?: (count: number) => string;\n  /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n  formatMentionLabel?: (count: number) => ReactNode;\n  /** Visually hidden unread hint. Default: \"Unread replies\". */\n  unreadLabel?: ReactNode;\n  /** Visible follow button text when not following. Default: \"Follow\". */\n  followLabel?: ReactNode;\n  /** Visible follow button text when following. Default: \"Following\". */\n  followingLabel?: ReactNode;\n  /** Accessible name for the follow button when not following. Default: \"Follow thread\". */\n  followAriaLabel?: string;\n  /** Accessible name for the follow button when following. Default: \"Unfollow thread\". */\n  unfollowAriaLabel?: string;\n}\n\nconst defaultFormatReplies = (count: number) =>\n  `${count} ${count === 1 ? 'reply' : 'replies'}`;\nconst defaultFormatMentions = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\n/**\n * The Thread Footer is the reply summary bar at the bottom of a message. It shows\n * participants, reply count, follow state, and last-reply time — the information someone\n * needs to decide whether to dive in.\n */\nexport default function ThreadFooter({\n  replyCount = 3,\n  avatars = [],\n  badge = 'none',\n  mentionCount = 1,\n  following = false,\n  lastReplyTime,\n  onReply,\n  onFollowToggle,\n  hovered = false,\n  className = '',\n  formatReplyCount = defaultFormatReplies,\n  formatReplyLabel = defaultFormatReplies,\n  formatMentionLabel = defaultFormatMentions,\n  unreadLabel = 'Unread replies',\n  followLabel = 'Follow',\n  followingLabel = 'Following',\n  followAriaLabel = 'Follow thread',\n  unfollowAriaLabel = 'Unfollow thread',\n  ...rest\n}: ThreadFooterProps) {\n  const rootClass = [\n    styles['thread-footer'],\n    following ? styles['thread-footer--following'] : '',\n    hovered ? styles['thread-footer--hovered'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const badgeStatusHint =\n    badge === 'mention'\n      ? formatMentionLabel(mentionCount)\n      : badge === 'unread'\n        ? unreadLabel\n        : undefined;\n\n  return (\n    <div className={rootClass} {...rest}>\n      <div className={styles['thread-footer__inner']}>\n        <div className={styles['thread-footer__avatars-group']}>\n          {badgeStatusHint && (\n            <span className={styles['thread-footer__status-hint']}>\n              {badgeStatusHint}\n            </span>\n          )}\n          {(badge === 'unread' || badge === 'mention') && (\n            <div\n              className={styles['thread-footer__badge-container']}\n              aria-hidden\n            >\n              {badge === 'unread' && (\n                <span className={styles['thread-footer__unread-dot']} />\n              )}\n              {badge === 'mention' && (\n                <span className={styles['thread-footer__mention-badge']}>\n                  <MentionBadge\n                    count={mentionCount}\n                    location=\"channel\"\n                    size=\"medium\"\n                  />\n                </span>\n              )}\n            </div>\n          )}\n\n          {avatars.length > 0 && (\n            <UserAvatarGroup avatars={avatars} max={3} size=\"20\" />\n          )}\n        </div>\n\n        {/* Buttons */}\n        <div className={styles['thread-footer__buttons']}>\n          {/* Reply button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__reply-btn'],\n              hovered ? styles['thread-footer__reply-btn--hovered'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onReply}\n            aria-label={formatReplyLabel(replyCount)}\n            leadingIcon={<Icon size=\"12\" glyph={<ReplyOutlineIcon />} />}\n          >\n            <span className={styles['thread-footer__btn-label']}>\n              {formatReplyCount(replyCount)}\n            </span>\n          </Button>\n\n          <div className={styles['thread-footer__divider']} aria-hidden />\n\n          {/* Follow / Following button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__follow-btn'],\n              following ? styles['thread-footer__follow-btn--following'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onFollowToggle}\n            aria-pressed={following}\n            aria-label={following ? unfollowAriaLabel : followAriaLabel}\n          >\n            {following ? followingLabel : followLabel}\n          </Button>\n\n          {/* Last reply time — revealed on row hover when following */}\n          {following && lastReplyTime && (\n            <div className={styles['thread-footer__last-reply-group']}>\n              <div className={styles['thread-footer__divider']} aria-hidden />\n              <span className={styles['thread-footer__last-reply']}>\n                {lastReplyTime}\n              </span>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["defaultFormatReplies","count","defaultFormatMentions","ThreadFooter","replyCount","avatars","badge","mentionCount","following","lastReplyTime","onReply","onFollowToggle","hovered","className","formatReplyCount","formatReplyLabel","formatMentionLabel","unreadLabel","followLabel","followingLabel","followAriaLabel","unfollowAriaLabel","rest","rootClass","styles","badgeStatusHint","jsx","jsxs","MentionBadge","UserAvatarGroup","Button","Icon","ReplyOutlineIcon"],"mappings":"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"}

package/dist/components/thread-footer/ThreadFooter.css

@@ -1 +1 @@
-._thread-footer_b5kji_2{--thread-footer-focus-ring-color: var(--focus-ring-color);display:flex;flex-direction:column;align-items:flex-start}._thread-footer__inner_b5kji_8{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s)}._thread-footer__avatars-group_b5kji_14{display:inline-flex;align-items:center;padding-right:var(--spacing-xxxs)}._thread-footer__status-hint_b5kji_19{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._thread-footer__badge-container_b5kji_30{position:absolute;left:calc(var(--spacing-xxs) * -1);top:50%;transform:translate(-100%,-50%);display:flex;align-items:center;justify-content:flex-end}._thread-footer__unread-dot_b5kji_39{display:block;width:8px;height:8px;border-radius:var(--radius-full);background-color:var(--link-color)}._thread-footer__mention-badge_b5kji_46{display:inline-flex}._thread-footer__buttons_b5kji_49{display:inline-flex;align-items:center;gap:0}._thread-footer__reply-btn_b5kji_54,._thread-footer__follow-btn_b5kji_54{--focus-ring-color: var(--thread-footer-focus-ring-color)}._thread-footer_b5kji_2 ._thread-footer__reply-btn_b5kji_54[class*=button--emphasis-quaternary],._thread-footer_b5kji_2 ._thread-footer__follow-btn_b5kji_54:not(._thread-footer__follow-btn--following_b5kji_57)[class*=button--emphasis-quaternary]{color:rgba(var(--center-channel-color-rgb),.75)}._thread-footer_b5kji_2 ._thread-footer__reply-btn_b5kji_54[class*=button--emphasis-quaternary]:hover:not(:disabled),._thread-footer_b5kji_2 ._thread-footer__follow-btn_b5kji_54:not(._thread-footer__follow-btn--following_b5kji_57)[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_b5kji_2 ._thread-footer__reply-btn--hovered_b5kji_63[class*=button--emphasis-quaternary]{background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_b5kji_2 ._thread-footer__follow-btn--following_b5kji_57[class*=button--emphasis-quaternary]{color:var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._thread-footer_b5kji_2 ._thread-footer__follow-btn--following_b5kji_57[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._thread-footer__btn-label_b5kji_73{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:15px;white-space:nowrap}._thread-footer__divider_b5kji_80{box-sizing:border-box;width:1px;min-width:1px;max-width:1px;height:16px;padding:0;margin:0;border:0;background-color:rgba(var(--center-channel-color-rgb),.16);flex-shrink:0;transition:opacity var(--duration-quick) var(--ease-transition)}._thread-footer__buttons_b5kji_49:has(._thread-footer__follow-btn--following_b5kji_57)>._thread-footer__divider_b5kji_80:first-of-type,._thread-footer__buttons_b5kji_49:has(._thread-footer__follow-btn--following_b5kji_57)>._thread-footer__last-reply-group_b5kji_93>._thread-footer__divider_b5kji_80{opacity:0}._thread-footer__buttons_b5kji_49:not(:has(._thread-footer__follow-btn--following_b5kji_57)):has(._thread-footer__reply-btn_b5kji_54:hover,._thread-footer__reply-btn--hovered_b5kji_63,._thread-footer__reply-btn_b5kji_54:focus-visible,._thread-footer__follow-btn_b5kji_54:hover,._thread-footer__follow-btn_b5kji_54:focus-visible)>._thread-footer__divider_b5kji_80:first-of-type{opacity:0}._thread-footer__last-reply-group_b5kji_93{display:inline-flex;align-items:center;gap:0;overflow:hidden;max-width:0;opacity:0;transition:max-width var(--duration-quick) var(--ease-transition),opacity var(--duration-quick) var(--ease-transition)}._thread-footer--following_b5kji_112:hover ._thread-footer__last-reply-group_b5kji_93,._thread-footer--following_b5kji_112:focus-within ._thread-footer__last-reply-group_b5kji_93,._thread-footer--following_b5kji_112._thread-footer--hovered_b5kji_112 ._thread-footer__last-reply-group_b5kji_93{max-width:10rem;opacity:1}._thread-footer__last-reply_b5kji_93{padding:4.5px var(--spacing-s);color:rgba(var(--center-channel-color-rgb),.64);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;white-space:nowrap}
+._thread-footer_1sd7m_2{--thread-footer-focus-ring-color: var(--focus-ring-color);display:flex;flex-direction:column;align-items:flex-start}._thread-footer__inner_1sd7m_8{position:relative;display:inline-flex;align-items:center;border-radius:var(--radius-s)}._thread-footer__avatars-group_1sd7m_14{display:inline-flex;align-items:center;padding-right:var(--spacing-xxxs)}._thread-footer__status-hint_1sd7m_19{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._thread-footer__badge-container_1sd7m_30{position:absolute;left:calc(var(--spacing-xxs) * -1);top:50%;transform:translate(-100%,-50%);display:flex;align-items:center;justify-content:flex-end}._thread-footer__unread-dot_1sd7m_39{display:block;width:8px;height:8px;border-radius:var(--radius-pill);background-color:var(--link-color)}._thread-footer__mention-badge_1sd7m_46{display:inline-flex}._thread-footer__buttons_1sd7m_49{display:inline-flex;align-items:center;gap:0}._thread-footer__reply-btn_1sd7m_54,._thread-footer__follow-btn_1sd7m_54{--focus-ring-color: var(--thread-footer-focus-ring-color)}._thread-footer_1sd7m_2 ._thread-footer__reply-btn_1sd7m_54[class*=button--emphasis-quaternary],._thread-footer_1sd7m_2 ._thread-footer__follow-btn_1sd7m_54:not(._thread-footer__follow-btn--following_1sd7m_57)[class*=button--emphasis-quaternary]{color:rgba(var(--center-channel-color-rgb),.75)}._thread-footer_1sd7m_2 ._thread-footer__reply-btn_1sd7m_54[class*=button--emphasis-quaternary]:hover:not(:disabled),._thread-footer_1sd7m_2 ._thread-footer__follow-btn_1sd7m_54:not(._thread-footer__follow-btn--following_1sd7m_57)[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_1sd7m_2 ._thread-footer__reply-btn--hovered_1sd7m_63[class*=button--emphasis-quaternary]{background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_1sd7m_2 ._thread-footer__follow-btn--following_1sd7m_57[class*=button--emphasis-quaternary]{color:var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._thread-footer_1sd7m_2 ._thread-footer__follow-btn--following_1sd7m_57[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._thread-footer__btn-label_1sd7m_73{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:15px;white-space:nowrap}._thread-footer__divider_1sd7m_80{box-sizing:border-box;width:1px;min-width:1px;max-width:1px;height:16px;padding:0;margin:0;border:0;background-color:rgba(var(--center-channel-color-rgb),.16);flex-shrink:0;transition:opacity var(--duration-quick) var(--ease-transition)}._thread-footer__buttons_1sd7m_49:has(._thread-footer__follow-btn--following_1sd7m_57)>._thread-footer__divider_1sd7m_80:first-of-type,._thread-footer__buttons_1sd7m_49:has(._thread-footer__follow-btn--following_1sd7m_57)>._thread-footer__last-reply-group_1sd7m_93>._thread-footer__divider_1sd7m_80{opacity:0}._thread-footer__buttons_1sd7m_49:not(:has(._thread-footer__follow-btn--following_1sd7m_57)):has(._thread-footer__reply-btn_1sd7m_54:hover,._thread-footer__reply-btn--hovered_1sd7m_63,._thread-footer__reply-btn_1sd7m_54:focus-visible,._thread-footer__follow-btn_1sd7m_54:hover,._thread-footer__follow-btn_1sd7m_54:focus-visible)>._thread-footer__divider_1sd7m_80:first-of-type{opacity:0}._thread-footer__last-reply-group_1sd7m_93{display:inline-flex;align-items:center;gap:0;overflow:hidden;max-width:0;opacity:0;transition:max-width var(--duration-quick) var(--ease-transition),opacity var(--duration-quick) var(--ease-transition)}._thread-footer--following_1sd7m_112:hover ._thread-footer__last-reply-group_1sd7m_93,._thread-footer--following_1sd7m_112:focus-within ._thread-footer__last-reply-group_1sd7m_93,._thread-footer--following_1sd7m_112._thread-footer--hovered_1sd7m_112 ._thread-footer__last-reply-group_1sd7m_93{max-width:10rem;opacity:1}._thread-footer__last-reply_1sd7m_93{padding:4.5px var(--spacing-s);color:rgba(var(--center-channel-color-rgb),.64);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:15px;white-space:nowrap}

package/dist/components/thread-footer/ThreadFooter.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { UserAvatarGroupItem } from '../user-avatar-group/UserAvatarGroup';
 export type ThreadFooterBadge = 'none' | 'unread' | 'mention';
 export interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {
@@ -13,7 +13,7 @@ export interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {
     /** Whether the current user is following the thread. Default: false. */
     following?: boolean;
     /** Last reply timestamp label. Shown on row hover when following. */
-    lastReplyTime?: string;
+    lastReplyTime?: ReactNode;
     /** Called when Reply is clicked. */
     onReply?: () => void;
     /** Called when Follow/Following is clicked. */
@@ -22,11 +22,27 @@ export interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {
     hovered?: boolean;
     /** Optional CSS class name. */
     className?: string;
+    /** Visible reply count. Default: `{count} reply` / `{count} replies`. */
+    formatReplyCount?: (count: number) => ReactNode;
+    /** Accessible name for the reply button. Default: `{count} reply` / `{count} replies`. */
+    formatReplyLabel?: (count: number) => string;
+    /** Visually hidden mention hint. Default: `{count} mention(s)`. */
+    formatMentionLabel?: (count: number) => ReactNode;
+    /** Visually hidden unread hint. Default: "Unread replies". */
+    unreadLabel?: ReactNode;
+    /** Visible follow button text when not following. Default: "Follow". */
+    followLabel?: ReactNode;
+    /** Visible follow button text when following. Default: "Following". */
+    followingLabel?: ReactNode;
+    /** Accessible name for the follow button when not following. Default: "Follow thread". */
+    followAriaLabel?: string;
+    /** Accessible name for the follow button when following. Default: "Unfollow thread". */
+    unfollowAriaLabel?: string;
 }
 /**
  * The Thread Footer is the reply summary bar at the bottom of a message. It shows
  * participants, reply count, follow state, and last-reply time — the information someone
  * needs to decide whether to dive in.
  */
-export default function ThreadFooter({ replyCount, avatars, badge, mentionCount, following, lastReplyTime, onReply, onFollowToggle, hovered, className, ...rest }: ThreadFooterProps): import("react/jsx-runtime").JSX.Element;
+export default function ThreadFooter({ replyCount, avatars, badge, mentionCount, following, lastReplyTime, onReply, onFollowToggle, hovered, className, formatReplyCount, formatReplyLabel, formatMentionLabel, unreadLabel, followLabel, followingLabel, followAriaLabel, unfollowAriaLabel, ...rest }: ThreadFooterProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ThreadFooter.d.ts.map

package/dist/components/thread-footer/ThreadFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadFooter.d.ts","sourceRoot":"","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAwB,EACtB,KAAK,mBAAmB,EACzB,MAAM,8CAA8C,CAAC;AAGtD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,oCAAoC;IACpC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,UAAc,EACd,OAAY,EACZ,KAAc,EACd,YAAgB,EAChB,SAAiB,EACjB,aAAa,EACb,OAAO,EACP,cAAc,EACd,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAwGnB"}
+{"version":3,"file":"ThreadFooter.d.ts","sourceRoot":"","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,OAAwB,EACtB,KAAK,mBAAmB,EACzB,MAAM,8CAA8C,CAAC;AAGtD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,oCAAoC;IACpC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,8DAA8D;IAC9D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uEAAuE;IACvE,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,0FAA0F;IAC1F,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wFAAwF;IACxF,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAOD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,UAAc,EACd,OAAY,EACZ,KAAc,EACd,YAAgB,EAChB,SAAiB,EACjB,aAAa,EACb,OAAO,EACP,cAAc,EACd,OAAe,EACf,SAAc,EACd,gBAAuC,EACvC,gBAAuC,EACvC,kBAA0C,EAC1C,WAA8B,EAC9B,WAAsB,EACtB,cAA4B,EAC5B,eAAiC,EACjC,iBAAqC,EACrC,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAwGnB"}

package/dist/components/thread-footer/ThreadFooter.js

@@ -1,43 +1,52 @@
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import c from "../button/Button.js";
-import N from "../icon/Icon.js";
-import __v from "@mattermost/compass-icons/components/reply-outline.js";const v=__v&&__v.default?__v.default:__v;
-import b from "../mention-badge/MentionBadge.js";
-import y from "../user-avatar-group/UserAvatarGroup.js";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import m from "../button/Button.js";
+import $ from "../icon/Icon.js";
+import __w from "@mattermost/compass-icons/components/reply-outline.js";const w=__w&&__w.default?__w.default:__w;
+import I from "../mention-badge/MentionBadge.js";
+import U from "../user-avatar-group/UserAvatarGroup.js";
 import e from "./ThreadFooter.module.scss.js";
-function I({
-  replyCount: s = 3,
-  avatars: l = [],
-  badge: a = "none",
-  mentionCount: i = 1,
-  following: o = !1,
-  lastReplyTime: n,
-  onReply: m,
-  onFollowToggle: f,
+const c = (a) => `${a} ${a === 1 ? "reply" : "replies"}`, g = (a) => `${a} mention${a === 1 ? "" : "s"}`;
+function O({
+  replyCount: a = 3,
+  avatars: s = [],
+  badge: o = "none",
+  mentionCount: l = 1,
+  following: t = !1,
+  lastReplyTime: i,
+  onReply: f,
+  onFollowToggle: _,
   hovered: d = !1,
-  className: _ = "",
-  ...p
+  className: p = "",
+  formatReplyCount: u = c,
+  formatReplyLabel: N = c,
+  formatMentionLabel: v = g,
+  unreadLabel: y = "Unread replies",
+  followLabel: b = "Follow",
+  followingLabel: x = "Following",
+  followAriaLabel: F = "Follow thread",
+  unfollowAriaLabel: j = "Unfollow thread",
+  ...z
 }) {
-  const u = [
+  const B = [
     e["thread-footer"],
-    o ? e["thread-footer--following"] : "",
+    t ? e["thread-footer--following"] : "",
     d ? e["thread-footer--hovered"] : "",
-    _
-  ].filter(Boolean).join(" "), h = a === "mention" ? `${i} mention${i === 1 ? "" : "s"}` : a === "unread" ? "Unread replies" : void 0;
-  return /* @__PURE__ */ r("div", { className: u, ...p, children: /* @__PURE__ */ t("div", { className: e["thread-footer__inner"], children: [
-    /* @__PURE__ */ t("div", { className: e["thread-footer__avatars-group"], children: [
+    p
+  ].filter(Boolean).join(" "), h = o === "mention" ? v(l) : o === "unread" ? y : void 0;
+  return /* @__PURE__ */ r("div", { className: B, ...z, children: /* @__PURE__ */ n("div", { className: e["thread-footer__inner"], children: [
+    /* @__PURE__ */ n("div", { className: e["thread-footer__avatars-group"], children: [
       h && /* @__PURE__ */ r("span", { className: e["thread-footer__status-hint"], children: h }),
-      (a === "unread" || a === "mention") && /* @__PURE__ */ t(
+      (o === "unread" || o === "mention") && /* @__PURE__ */ n(
         "div",
         {
           className: e["thread-footer__badge-container"],
           "aria-hidden": !0,
           children: [
-            a === "unread" && /* @__PURE__ */ r("span", { className: e["thread-footer__unread-dot"] }),
-            a === "mention" && /* @__PURE__ */ r("span", { className: e["thread-footer__mention-badge"], children: /* @__PURE__ */ r(
-              b,
+            o === "unread" && /* @__PURE__ */ r("span", { className: e["thread-footer__unread-dot"] }),
+            o === "mention" && /* @__PURE__ */ r("span", { className: e["thread-footer__mention-badge"], children: /* @__PURE__ */ r(
+              I,
               {
-                count: i,
+                count: l,
                 location: "channel",
                 size: "medium"
               }
@@ -45,11 +54,11 @@ function I({
           ]
         }
       ),
-      l.length > 0 && /* @__PURE__ */ r(y, { avatars: l, max: 3, size: "20" })
+      s.length > 0 && /* @__PURE__ */ r(U, { avatars: s, max: 3, size: "20" })
     ] }),
-    /* @__PURE__ */ t("div", { className: e["thread-footer__buttons"], children: [
+    /* @__PURE__ */ n("div", { className: e["thread-footer__buttons"], children: [
       /* @__PURE__ */ r(
-        c,
+        m,
         {
           emphasis: "quaternary",
           size: "x-small",
@@ -57,40 +66,36 @@ function I({
             e["thread-footer__reply-btn"],
             d ? e["thread-footer__reply-btn--hovered"] : ""
           ].filter(Boolean).join(" "),
-          onClick: m,
-          "aria-label": `${s} repl${s === 1 ? "y" : "ies"}`,
-          leadingIcon: /* @__PURE__ */ r(N, { size: "12", glyph: /* @__PURE__ */ r(v, {}) }),
-          children: /* @__PURE__ */ t("span", { className: e["thread-footer__btn-label"], children: [
-            s,
-            " ",
-            s === 1 ? "reply" : "replies"
-          ] })
+          onClick: f,
+          "aria-label": N(a),
+          leadingIcon: /* @__PURE__ */ r($, { size: "12", glyph: /* @__PURE__ */ r(w, {}) }),
+          children: /* @__PURE__ */ r("span", { className: e["thread-footer__btn-label"], children: u(a) })
         }
       ),
       /* @__PURE__ */ r("div", { className: e["thread-footer__divider"], "aria-hidden": !0 }),
       /* @__PURE__ */ r(
-        c,
+        m,
         {
           emphasis: "quaternary",
           size: "x-small",
           className: [
             e["thread-footer__follow-btn"],
-            o ? e["thread-footer__follow-btn--following"] : ""
+            t ? e["thread-footer__follow-btn--following"] : ""
           ].filter(Boolean).join(" "),
-          onClick: f,
-          "aria-pressed": o,
-          "aria-label": o ? "Unfollow thread" : "Follow thread",
-          children: o ? "Following" : "Follow"
+          onClick: _,
+          "aria-pressed": t,
+          "aria-label": t ? j : F,
+          children: t ? x : b
         }
       ),
-      o && n && /* @__PURE__ */ t("div", { className: e["thread-footer__last-reply-group"], children: [
+      t && i && /* @__PURE__ */ n("div", { className: e["thread-footer__last-reply-group"], children: [
         /* @__PURE__ */ r("div", { className: e["thread-footer__divider"], "aria-hidden": !0 }),
-        /* @__PURE__ */ r("span", { className: e["thread-footer__last-reply"], children: n })
+        /* @__PURE__ */ r("span", { className: e["thread-footer__last-reply"], children: i })
       ] })
     ] })
   ] }) });
 }
 export {
-  I as default
+  O as default
 };
 //# sourceMappingURL=ThreadFooter.js.map

package/dist/components/thread-footer/ThreadFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadFooter.js","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '@/components/user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadFooter.module.scss';\n\nexport type ThreadFooterBadge = 'none' | 'unread' | 'mention';\n\nexport interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Reply count. Default: 3. */\n  replyCount?: number;\n  /** Participant avatars. Rendered with User Avatar Group (first 3 shown, overflow as +N). */\n  avatars?: UserAvatarGroupItem[];\n  /** Badge variant. Default: None. */\n  badge?: ThreadFooterBadge;\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Whether the current user is following the thread. Default: false. */\n  following?: boolean;\n  /** Last reply timestamp label. Shown on row hover when following. */\n  lastReplyTime?: string;\n  /** Called when Reply is clicked. */\n  onReply?: () => void;\n  /** Called when Follow/Following is clicked. */\n  onFollowToggle?: () => void;\n  /** Hover / active state for button highlight. Default: false. */\n  hovered?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * The Thread Footer is the reply summary bar at the bottom of a message. It shows\n * participants, reply count, follow state, and last-reply time — the information someone\n * needs to decide whether to dive in.\n */\nexport default function ThreadFooter({\n  replyCount = 3,\n  avatars = [],\n  badge = 'none',\n  mentionCount = 1,\n  following = false,\n  lastReplyTime,\n  onReply,\n  onFollowToggle,\n  hovered = false,\n  className = '',\n  ...rest\n}: ThreadFooterProps) {\n  const rootClass = [\n    styles['thread-footer'],\n    following ? styles['thread-footer--following'] : '',\n    hovered ? styles['thread-footer--hovered'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const badgeStatusHint =\n    badge === 'mention'\n      ? `${mentionCount} mention${mentionCount === 1 ? '' : 's'}`\n      : badge === 'unread'\n        ? 'Unread replies'\n        : undefined;\n\n  return (\n    <div className={rootClass} {...rest}>\n      <div className={styles['thread-footer__inner']}>\n        <div className={styles['thread-footer__avatars-group']}>\n          {badgeStatusHint && (\n            <span className={styles['thread-footer__status-hint']}>\n              {badgeStatusHint}\n            </span>\n          )}\n          {(badge === 'unread' || badge === 'mention') && (\n            <div\n              className={styles['thread-footer__badge-container']}\n              aria-hidden\n            >\n              {badge === 'unread' && (\n                <span className={styles['thread-footer__unread-dot']} />\n              )}\n              {badge === 'mention' && (\n                <span className={styles['thread-footer__mention-badge']}>\n                  <MentionBadge\n                    count={mentionCount}\n                    location=\"channel\"\n                    size=\"medium\"\n                  />\n                </span>\n              )}\n            </div>\n          )}\n\n          {avatars.length > 0 && (\n            <UserAvatarGroup avatars={avatars} max={3} size=\"20\" />\n          )}\n        </div>\n\n        {/* Buttons */}\n        <div className={styles['thread-footer__buttons']}>\n          {/* Reply button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__reply-btn'],\n              hovered ? styles['thread-footer__reply-btn--hovered'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onReply}\n            aria-label={`${replyCount} repl${replyCount === 1 ? 'y' : 'ies'}`}\n            leadingIcon={<Icon size=\"12\" glyph={<ReplyOutlineIcon />} />}\n          >\n            <span className={styles['thread-footer__btn-label']}>\n              {replyCount} {replyCount === 1 ? 'reply' : 'replies'}\n            </span>\n          </Button>\n\n          <div className={styles['thread-footer__divider']} aria-hidden />\n\n          {/* Follow / Following button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__follow-btn'],\n              following ? styles['thread-footer__follow-btn--following'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onFollowToggle}\n            aria-pressed={following}\n            aria-label={following ? 'Unfollow thread' : 'Follow thread'}\n          >\n            {following ? 'Following' : 'Follow'}\n          </Button>\n\n          {/* Last reply time — revealed on row hover when following */}\n          {following && lastReplyTime && (\n            <div className={styles['thread-footer__last-reply-group']}>\n              <div className={styles['thread-footer__divider']} aria-hidden />\n              <span className={styles['thread-footer__last-reply']}>\n                {lastReplyTime}\n              </span>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["ThreadFooter","replyCount","avatars","badge","mentionCount","following","lastReplyTime","onReply","onFollowToggle","hovered","className","rest","rootClass","styles","badgeStatusHint","jsx","jsxs","MentionBadge","UserAvatarGroup","Button","Icon","ReplyOutlineIcon"],"mappings":";;;;;;;AAwCA,SAAwBA,EAAa;AAAA,EACnC,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU,CAAA;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAY;AAAA,IAChBC,EAAO,eAAe;AAAA,IACtBR,IAAYQ,EAAO,0BAA0B,IAAI;AAAA,IACjDJ,IAAUI,EAAO,wBAAwB,IAAI;AAAA,IAC7CH;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELI,IACJX,MAAU,YACN,GAAGC,CAAY,WAAWA,MAAiB,IAAI,KAAK,GAAG,KACvDD,MAAU,WACR,mBACA;AAER,SACE,gBAAAY,EAAC,OAAA,EAAI,WAAWH,GAAY,GAAGD,GAC7B,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWH,EAAO,sBAAsB,GAC3C,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAO,8BAA8B,GAClD,UAAA;AAAA,MAAAC,uBACE,QAAA,EAAK,WAAWD,EAAO,4BAA4B,GACjD,UAAAC,GACH;AAAA,OAEAX,MAAU,YAAYA,MAAU,cAChC,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWH,EAAO,gCAAgC;AAAA,UAClD,eAAW;AAAA,UAEV,UAAA;AAAA,YAAAV,MAAU,YACT,gBAAAY,EAAC,QAAA,EAAK,WAAWF,EAAO,2BAA2B,GAAG;AAAA,YAEvDV,MAAU,aACT,gBAAAY,EAAC,UAAK,WAAWF,EAAO,8BAA8B,GACpD,UAAA,gBAAAE;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,OAAOb;AAAA,gBACP,UAAS;AAAA,gBACT,MAAK;AAAA,cAAA;AAAA,YAAA,EACP,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAKLF,EAAQ,SAAS,KAChB,gBAAAa,EAACG,KAAgB,SAAAhB,GAAkB,KAAK,GAAG,MAAK,KAAA,CAAK;AAAA,IAAA,GAEzD;AAAA,IAGA,gBAAAc,EAAC,OAAA,EAAI,WAAWH,EAAO,wBAAwB,GAE7C,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,MAAK;AAAA,UACL,WAAW;AAAA,YACTN,EAAO,0BAA0B;AAAA,YACjCJ,IAAUI,EAAO,mCAAmC,IAAI;AAAA,UAAA,EAEvD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UACX,SAASN;AAAA,UACT,cAAY,GAAGN,CAAU,QAAQA,MAAe,IAAI,MAAM,KAAK;AAAA,UAC/D,+BAAcmB,GAAA,EAAK,MAAK,MAAK,OAAO,gBAAAL,EAACM,KAAiB,GAAI;AAAA,UAE1D,UAAA,gBAAAL,EAAC,QAAA,EAAK,WAAWH,EAAO,0BAA0B,GAC/C,UAAA;AAAA,YAAAZ;AAAA,YAAW;AAAA,YAAEA,MAAe,IAAI,UAAU;AAAA,UAAA,EAAA,CAC7C;AAAA,QAAA;AAAA,MAAA;AAAA,wBAGD,OAAA,EAAI,WAAWY,EAAO,wBAAwB,GAAG,eAAW,IAAC;AAAA,MAG9D,gBAAAE;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,MAAK;AAAA,UACL,WAAW;AAAA,YACTN,EAAO,2BAA2B;AAAA,YAClCR,IAAYQ,EAAO,sCAAsC,IAAI;AAAA,UAAA,EAE5D,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UACX,SAASL;AAAA,UACT,gBAAcH;AAAA,UACd,cAAYA,IAAY,oBAAoB;AAAA,UAE3C,cAAY,cAAc;AAAA,QAAA;AAAA,MAAA;AAAA,MAI5BA,KAAaC,KACZ,gBAAAU,EAAC,SAAI,WAAWH,EAAO,iCAAiC,GACtD,UAAA;AAAA,QAAA,gBAAAE,EAAC,SAAI,WAAWF,EAAO,wBAAwB,GAAG,eAAW,IAAC;AAAA,0BAC7D,QAAA,EAAK,WAAWA,EAAO,2BAA2B,GAChD,UAAAP,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"ThreadFooter.js","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '@/components/user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadFooter.module.scss';\n\nexport type ThreadFooterBadge = 'none' | 'unread' | 'mention';\n\nexport interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Reply count. Default: 3. */\n  replyCount?: number;\n  /** Participant avatars. Rendered with User Avatar Group (first 3 shown, overflow as +N). */\n  avatars?: UserAvatarGroupItem[];\n  /** Badge variant. Default: None. */\n  badge?: ThreadFooterBadge;\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Whether the current user is following the thread. Default: false. */\n  following?: boolean;\n  /** Last reply timestamp label. Shown on row hover when following. */\n  lastReplyTime?: ReactNode;\n  /** Called when Reply is clicked. */\n  onReply?: () => void;\n  /** Called when Follow/Following is clicked. */\n  onFollowToggle?: () => void;\n  /** Hover / active state for button highlight. Default: false. */\n  hovered?: boolean;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Visible reply count. Default: `{count} reply` / `{count} replies`. */\n  formatReplyCount?: (count: number) => ReactNode;\n  /** Accessible name for the reply button. Default: `{count} reply` / `{count} replies`. */\n  formatReplyLabel?: (count: number) => string;\n  /** Visually hidden mention hint. Default: `{count} mention(s)`. */\n  formatMentionLabel?: (count: number) => ReactNode;\n  /** Visually hidden unread hint. Default: \"Unread replies\". */\n  unreadLabel?: ReactNode;\n  /** Visible follow button text when not following. Default: \"Follow\". */\n  followLabel?: ReactNode;\n  /** Visible follow button text when following. Default: \"Following\". */\n  followingLabel?: ReactNode;\n  /** Accessible name for the follow button when not following. Default: \"Follow thread\". */\n  followAriaLabel?: string;\n  /** Accessible name for the follow button when following. Default: \"Unfollow thread\". */\n  unfollowAriaLabel?: string;\n}\n\nconst defaultFormatReplies = (count: number) =>\n  `${count} ${count === 1 ? 'reply' : 'replies'}`;\nconst defaultFormatMentions = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\n/**\n * The Thread Footer is the reply summary bar at the bottom of a message. It shows\n * participants, reply count, follow state, and last-reply time — the information someone\n * needs to decide whether to dive in.\n */\nexport default function ThreadFooter({\n  replyCount = 3,\n  avatars = [],\n  badge = 'none',\n  mentionCount = 1,\n  following = false,\n  lastReplyTime,\n  onReply,\n  onFollowToggle,\n  hovered = false,\n  className = '',\n  formatReplyCount = defaultFormatReplies,\n  formatReplyLabel = defaultFormatReplies,\n  formatMentionLabel = defaultFormatMentions,\n  unreadLabel = 'Unread replies',\n  followLabel = 'Follow',\n  followingLabel = 'Following',\n  followAriaLabel = 'Follow thread',\n  unfollowAriaLabel = 'Unfollow thread',\n  ...rest\n}: ThreadFooterProps) {\n  const rootClass = [\n    styles['thread-footer'],\n    following ? styles['thread-footer--following'] : '',\n    hovered ? styles['thread-footer--hovered'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const badgeStatusHint =\n    badge === 'mention'\n      ? formatMentionLabel(mentionCount)\n      : badge === 'unread'\n        ? unreadLabel\n        : undefined;\n\n  return (\n    <div className={rootClass} {...rest}>\n      <div className={styles['thread-footer__inner']}>\n        <div className={styles['thread-footer__avatars-group']}>\n          {badgeStatusHint && (\n            <span className={styles['thread-footer__status-hint']}>\n              {badgeStatusHint}\n            </span>\n          )}\n          {(badge === 'unread' || badge === 'mention') && (\n            <div\n              className={styles['thread-footer__badge-container']}\n              aria-hidden\n            >\n              {badge === 'unread' && (\n                <span className={styles['thread-footer__unread-dot']} />\n              )}\n              {badge === 'mention' && (\n                <span className={styles['thread-footer__mention-badge']}>\n                  <MentionBadge\n                    count={mentionCount}\n                    location=\"channel\"\n                    size=\"medium\"\n                  />\n                </span>\n              )}\n            </div>\n          )}\n\n          {avatars.length > 0 && (\n            <UserAvatarGroup avatars={avatars} max={3} size=\"20\" />\n          )}\n        </div>\n\n        {/* Buttons */}\n        <div className={styles['thread-footer__buttons']}>\n          {/* Reply button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__reply-btn'],\n              hovered ? styles['thread-footer__reply-btn--hovered'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onReply}\n            aria-label={formatReplyLabel(replyCount)}\n            leadingIcon={<Icon size=\"12\" glyph={<ReplyOutlineIcon />} />}\n          >\n            <span className={styles['thread-footer__btn-label']}>\n              {formatReplyCount(replyCount)}\n            </span>\n          </Button>\n\n          <div className={styles['thread-footer__divider']} aria-hidden />\n\n          {/* Follow / Following button */}\n          <Button\n            emphasis=\"quaternary\"\n            size=\"x-small\"\n            className={[\n              styles['thread-footer__follow-btn'],\n              following ? styles['thread-footer__follow-btn--following'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onFollowToggle}\n            aria-pressed={following}\n            aria-label={following ? unfollowAriaLabel : followAriaLabel}\n          >\n            {following ? followingLabel : followLabel}\n          </Button>\n\n          {/* Last reply time — revealed on row hover when following */}\n          {following && lastReplyTime && (\n            <div className={styles['thread-footer__last-reply-group']}>\n              <div className={styles['thread-footer__divider']} aria-hidden />\n              <span className={styles['thread-footer__last-reply']}>\n                {lastReplyTime}\n              </span>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["defaultFormatReplies","count","defaultFormatMentions","ThreadFooter","replyCount","avatars","badge","mentionCount","following","lastReplyTime","onReply","onFollowToggle","hovered","className","formatReplyCount","formatReplyLabel","formatMentionLabel","unreadLabel","followLabel","followingLabel","followAriaLabel","unfollowAriaLabel","rest","rootClass","styles","badgeStatusHint","jsx","jsxs","MentionBadge","UserAvatarGroup","Button","Icon","ReplyOutlineIcon"],"mappings":"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"}

package/dist/components/thread-footer/ThreadFooter.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ThreadFooter.css');const e={"thread-footer":"_thread-footer_b5kji_2","thread-footer__inner":"_thread-footer__inner_b5kji_8","thread-footer__avatars-group":"_thread-footer__avatars-group_b5kji_14","thread-footer__status-hint":"_thread-footer__status-hint_b5kji_19","thread-footer__badge-container":"_thread-footer__badge-container_b5kji_30","thread-footer__unread-dot":"_thread-footer__unread-dot_b5kji_39","thread-footer__mention-badge":"_thread-footer__mention-badge_b5kji_46","thread-footer__buttons":"_thread-footer__buttons_b5kji_49","thread-footer__reply-btn":"_thread-footer__reply-btn_b5kji_54","thread-footer__follow-btn":"_thread-footer__follow-btn_b5kji_54","thread-footer__follow-btn--following":"_thread-footer__follow-btn--following_b5kji_57","thread-footer__reply-btn--hovered":"_thread-footer__reply-btn--hovered_b5kji_63","thread-footer__btn-label":"_thread-footer__btn-label_b5kji_73","thread-footer__divider":"_thread-footer__divider_b5kji_80","thread-footer__last-reply-group":"_thread-footer__last-reply-group_b5kji_93","thread-footer--following":"_thread-footer--following_b5kji_112","thread-footer--hovered":"_thread-footer--hovered_b5kji_112","thread-footer__last-reply":"_thread-footer__last-reply_b5kji_93"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ThreadFooter.css');const e={"thread-footer":"_thread-footer_1sd7m_2","thread-footer__inner":"_thread-footer__inner_1sd7m_8","thread-footer__avatars-group":"_thread-footer__avatars-group_1sd7m_14","thread-footer__status-hint":"_thread-footer__status-hint_1sd7m_19","thread-footer__badge-container":"_thread-footer__badge-container_1sd7m_30","thread-footer__unread-dot":"_thread-footer__unread-dot_1sd7m_39","thread-footer__mention-badge":"_thread-footer__mention-badge_1sd7m_46","thread-footer__buttons":"_thread-footer__buttons_1sd7m_49","thread-footer__reply-btn":"_thread-footer__reply-btn_1sd7m_54","thread-footer__follow-btn":"_thread-footer__follow-btn_1sd7m_54","thread-footer__follow-btn--following":"_thread-footer__follow-btn--following_1sd7m_57","thread-footer__reply-btn--hovered":"_thread-footer__reply-btn--hovered_1sd7m_63","thread-footer__btn-label":"_thread-footer__btn-label_1sd7m_73","thread-footer__divider":"_thread-footer__divider_1sd7m_80","thread-footer__last-reply-group":"_thread-footer__last-reply-group_1sd7m_93","thread-footer--following":"_thread-footer--following_1sd7m_112","thread-footer--hovered":"_thread-footer--hovered_1sd7m_112","thread-footer__last-reply":"_thread-footer__last-reply_1sd7m_93"};exports.default=e;
 //# sourceMappingURL=ThreadFooter.module.scss.cjs.map

package/dist/components/thread-footer/ThreadFooter.module.scss.js

@@ -1,22 +1,22 @@
 import './ThreadFooter.css';const _ = {
-  "thread-footer": "_thread-footer_b5kji_2",
-  "thread-footer__inner": "_thread-footer__inner_b5kji_8",
-  "thread-footer__avatars-group": "_thread-footer__avatars-group_b5kji_14",
-  "thread-footer__status-hint": "_thread-footer__status-hint_b5kji_19",
-  "thread-footer__badge-container": "_thread-footer__badge-container_b5kji_30",
-  "thread-footer__unread-dot": "_thread-footer__unread-dot_b5kji_39",
-  "thread-footer__mention-badge": "_thread-footer__mention-badge_b5kji_46",
-  "thread-footer__buttons": "_thread-footer__buttons_b5kji_49",
-  "thread-footer__reply-btn": "_thread-footer__reply-btn_b5kji_54",
-  "thread-footer__follow-btn": "_thread-footer__follow-btn_b5kji_54",
-  "thread-footer__follow-btn--following": "_thread-footer__follow-btn--following_b5kji_57",
-  "thread-footer__reply-btn--hovered": "_thread-footer__reply-btn--hovered_b5kji_63",
-  "thread-footer__btn-label": "_thread-footer__btn-label_b5kji_73",
-  "thread-footer__divider": "_thread-footer__divider_b5kji_80",
-  "thread-footer__last-reply-group": "_thread-footer__last-reply-group_b5kji_93",
-  "thread-footer--following": "_thread-footer--following_b5kji_112",
-  "thread-footer--hovered": "_thread-footer--hovered_b5kji_112",
-  "thread-footer__last-reply": "_thread-footer__last-reply_b5kji_93"
+  "thread-footer": "_thread-footer_1sd7m_2",
+  "thread-footer__inner": "_thread-footer__inner_1sd7m_8",
+  "thread-footer__avatars-group": "_thread-footer__avatars-group_1sd7m_14",
+  "thread-footer__status-hint": "_thread-footer__status-hint_1sd7m_19",
+  "thread-footer__badge-container": "_thread-footer__badge-container_1sd7m_30",
+  "thread-footer__unread-dot": "_thread-footer__unread-dot_1sd7m_39",
+  "thread-footer__mention-badge": "_thread-footer__mention-badge_1sd7m_46",
+  "thread-footer__buttons": "_thread-footer__buttons_1sd7m_49",
+  "thread-footer__reply-btn": "_thread-footer__reply-btn_1sd7m_54",
+  "thread-footer__follow-btn": "_thread-footer__follow-btn_1sd7m_54",
+  "thread-footer__follow-btn--following": "_thread-footer__follow-btn--following_1sd7m_57",
+  "thread-footer__reply-btn--hovered": "_thread-footer__reply-btn--hovered_1sd7m_63",
+  "thread-footer__btn-label": "_thread-footer__btn-label_1sd7m_73",
+  "thread-footer__divider": "_thread-footer__divider_1sd7m_80",
+  "thread-footer__last-reply-group": "_thread-footer__last-reply-group_1sd7m_93",
+  "thread-footer--following": "_thread-footer--following_1sd7m_112",
+  "thread-footer--hovered": "_thread-footer--hovered_1sd7m_112",
+  "thread-footer__last-reply": "_thread-footer__last-reply_1sd7m_93"
 };
 export {
   _ as default

package/dist/components/thread-list-item/ThreadListItem.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__I=require("@mattermost/compass-icons/components/dots-horizontal.js"),I=__I?.default??__I,q=require("../icon/Icon.cjs"),A=require("../icon-button/IconButton.cjs"),b=require("../tag/Tag.cjs"),R=require("../mention-badge/MentionBadge.cjs"),M=require("../unread-badge/UnreadBadge.cjs"),S=require("../user-avatar-group/UserAvatarGroup.cjs"),t=require("./ThreadListItem.module.scss.cjs"),B=[{key:"leonard",name:"Leonard Riley"},{key:"aiko",name:"Aiko Tan"},{key:"arjun",name:"Arjun Patel"},{key:"marco",name:"Marco Rinaldi"},{key:"sofia",name:"Sofia Bauer"}];function D({active:l=!1,badge:i="none",mentionCount:n=1,authorName:f="Martin Kraft",channelLabel:p="ENTERPRISE TEAM",previewText:j="Do we have a guideline for what minimum width we should support in the system console? I know that…",timestamp:x="5 mins ago",replyCount:d=3,participants:o,threadTitle:u,className:N="",onClick:a,onMenuClick:c}){const m=o===void 0?B:o,v=m.length>0,h=!l&&(i==="unread"||i==="mention"),g=d===1?"1 reply":`${d} replies`,y=[t.default["thread-list-item"],l?t.default["thread-list-item--active"]:"",N].filter(Boolean).join(" "),_=i==="mention"?`${n} mention${n===1?"":"s"}`:i==="unread"?"unread":void 0,w=s=>{const r=window.getSelection();(r==null?void 0:r.type)==="Range"&&r.toString().length>0&&s.currentTarget.contains(r.getRangeAt(0).commonAncestorContainer)||a==null||a()},T=s=>{s.key!=="Enter"&&s.key!==" "||(s.preventDefault(),a==null||a())};return e.jsxs("div",{className:y,children:[e.jsx("div",{className:t.default["thread-list-item__main"],role:a?"button":void 0,tabIndex:a?0:void 0,onClick:a?w:void 0,onKeyDown:a?T:void 0,"aria-current":l?!0:void 0,children:e.jsx("div",{className:t.default["thread-list-item__thread"],children:e.jsxs("div",{className:t.default["thread-list-item__container"],children:[e.jsxs("div",{className:t.default["thread-list-item__post-content"],children:[e.jsxs("div",{className:t.default["thread-list-item__gutter"],children:[h&&i==="unread"&&e.jsx("span",{className:t.default["thread-list-item__unread-gutter"],"aria-hidden":!0,children:e.jsx(M.default,{className:t.default["thread-list-item__unread-badge"],context:"icon-button"})}),h&&i==="mention"&&e.jsx("span",{className:t.default["thread-list-item__mention-gutter"],"aria-hidden":!0,children:e.jsx(R.default,{count:n,location:"channel",size:"medium"})})]}),e.jsx("div",{className:t.default["thread-list-item__post-body"],children:e.jsxs("div",{className:t.default["thread-list-item__post-body-content"],children:[e.jsxs("div",{className:t.default["thread-list-item__name-row"],children:[e.jsxs("div",{className:t.default["thread-list-item__name-group"],children:[e.jsx("span",{className:t.default["thread-list-item__author"],children:f}),e.jsx(b.default,{casing:"all-caps",label:p}),_&&e.jsx("span",{className:t.default["thread-list-item__status-hint"],children:_})]}),e.jsx("span",{className:t.default["thread-list-item__timestamp"],children:x})]}),u!=null&&e.jsx("div",{className:t.default["thread-list-item__title-row"],children:e.jsx("p",{className:t.default["thread-list-item__title"],children:u})}),e.jsx("p",{className:t.default["thread-list-item__preview"],children:j})]})})]}),e.jsx("div",{className:t.default["thread-list-item__replies"],children:e.jsxs("div",{className:t.default["thread-list-item__replies-inner"],children:[v&&e.jsx(S.default,{avatars:m,className:t.default["thread-list-item__avatar-group"],max:3,size:"20"}),e.jsx("span",{className:t.default["thread-list-item__reply-count"],children:g})]})})]})})}),c&&e.jsx("div",{className:t.default["thread-list-item__actions"],children:e.jsx("span",{className:t.default["thread-list-item__menu-button"],children:e.jsx(A.default,{"aria-label":"Thread actions",icon:e.jsx(q.default,{size:"16",glyph:e.jsx(I,{})}),padding:"compact",size:"small",style:"default",type:"button",onClick:s=>{s.stopPropagation(),c(s)}})})})]})}exports.default=D;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__b=require("@mattermost/compass-icons/components/dots-horizontal.js"),b=__b?.default??__b,M=require("../icon/Icon.cjs"),S=require("../icon-button/IconButton.cjs"),B=require("../tag/Tag.cjs"),D=require("../mention-badge/MentionBadge.cjs"),E=require("../unread-badge/UnreadBadge.cjs"),P=require("../user-avatar-group/UserAvatarGroup.cjs"),t=require("./ThreadListItem.module.scss.cjs"),z=[{key:"leonard",name:"Leonard Riley"},{key:"aiko",name:"Aiko Tan"},{key:"arjun",name:"Arjun Patel"},{key:"marco",name:"Marco Rinaldi"},{key:"sofia",name:"Sofia Bauer"}],L=s=>s===1?"1 reply":`${s} replies`,F=s=>`${s} mention${s===1?"":"s"}`;function K({active:s=!1,badge:r="none",mentionCount:n=1,authorName:_="Martin Kraft",channelLabel:f="ENTERPRISE TEAM",previewText:p="Do we have a guideline for what minimum width we should support in the system console? I know that…",timestamp:j="5 mins ago",replyCount:x=3,participants:d,threadTitle:o,className:N="",onClick:a,onMenuClick:u,formatReplyCount:v=L,formatMentionLabel:g=F,unreadLabel:y="unread",menuLabel:w="Thread actions"}){const c=d===void 0?z:d,T=c.length>0,m=!s&&(r==="unread"||r==="mention"),I=v(x),q=[t.default["thread-list-item"],s?t.default["thread-list-item--active"]:"",N].filter(Boolean).join(" "),h=r==="mention"?g(n):r==="unread"?y:void 0,A=i=>{const l=window.getSelection();(l==null?void 0:l.type)==="Range"&&l.toString().length>0&&i.currentTarget.contains(l.getRangeAt(0).commonAncestorContainer)||a==null||a()},R=i=>{i.key!=="Enter"&&i.key!==" "||(i.preventDefault(),a==null||a())};return e.jsxs("div",{className:q,children:[e.jsx("div",{className:t.default["thread-list-item__main"],role:a?"button":void 0,tabIndex:a?0:void 0,onClick:a?A:void 0,onKeyDown:a?R:void 0,"aria-current":s?!0:void 0,children:e.jsx("div",{className:t.default["thread-list-item__thread"],children:e.jsxs("div",{className:t.default["thread-list-item__container"],children:[e.jsxs("div",{className:t.default["thread-list-item__post-content"],children:[e.jsxs("div",{className:t.default["thread-list-item__gutter"],children:[m&&r==="unread"&&e.jsx("span",{className:t.default["thread-list-item__unread-gutter"],"aria-hidden":!0,children:e.jsx(E.default,{className:t.default["thread-list-item__unread-badge"],context:"icon-button"})}),m&&r==="mention"&&e.jsx("span",{className:t.default["thread-list-item__mention-gutter"],"aria-hidden":!0,children:e.jsx(D.default,{count:n,location:"channel",size:"medium"})})]}),e.jsx("div",{className:t.default["thread-list-item__post-body"],children:e.jsxs("div",{className:t.default["thread-list-item__post-body-content"],children:[e.jsxs("div",{className:t.default["thread-list-item__name-row"],children:[e.jsxs("div",{className:t.default["thread-list-item__name-group"],children:[e.jsx("span",{className:t.default["thread-list-item__author"],children:_}),e.jsx(B.default,{casing:"all-caps",label:f}),h&&e.jsx("span",{className:t.default["thread-list-item__status-hint"],children:h})]}),e.jsx("span",{className:t.default["thread-list-item__timestamp"],children:j})]}),o!=null&&e.jsx("div",{className:t.default["thread-list-item__title-row"],children:e.jsx("p",{className:t.default["thread-list-item__title"],children:o})}),e.jsx("p",{className:t.default["thread-list-item__preview"],children:p})]})})]}),e.jsx("div",{className:t.default["thread-list-item__replies"],children:e.jsxs("div",{className:t.default["thread-list-item__replies-inner"],children:[T&&e.jsx(P.default,{avatars:c,className:t.default["thread-list-item__avatar-group"],max:3,size:"20"}),e.jsx("span",{className:t.default["thread-list-item__reply-count"],children:I})]})})]})})}),u&&e.jsx("div",{className:t.default["thread-list-item__actions"],children:e.jsx("span",{className:t.default["thread-list-item__menu-button"],children:e.jsx(S.default,{"aria-label":w,icon:e.jsx(M.default,{size:"16",glyph:e.jsx(b,{})}),padding:"compact",size:"small",style:"default",type:"button",onClick:i=>{i.stopPropagation(),u(i)}})})})]})}exports.default=K;
 //# sourceMappingURL=ThreadListItem.cjs.map

package/dist/components/thread-list-item/ThreadListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadListItem.cjs","sources":["../../../src/components/thread-list-item/ThreadListItem.tsx"],"sourcesContent":["import DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '../mention-badge/MentionBadge';\nimport UnreadBadge from '../unread-badge/UnreadBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '../user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadListItem.module.scss';\n\nconst DEFAULT_PARTICIPANTS: UserAvatarGroupItem[] = [\n  { key: 'leonard', name: 'Leonard Riley' },\n  { key: 'aiko', name: 'Aiko Tan' },\n  { key: 'arjun', name: 'Arjun Patel' },\n  { key: 'marco', name: 'Marco Rinaldi' },\n  { key: 'sofia', name: 'Sofia Bauer' },\n];\n\nexport interface ThreadListItemProps {\n  /** Whether this item is the active/selected thread. */\n  active?: boolean;\n  /** Badge in the left gutter. Default: None. Hidden when `active` is true. */\n  badge?: 'none' | 'unread' | 'mention';\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Author name. */\n  authorName?: string;\n  /** Channel/team label. */\n  channelLabel?: string;\n  /** Message preview text. */\n  previewText?: string;\n  /** Timestamp label. */\n  timestamp?: string;\n  /** Number of replies. */\n  replyCount?: number;\n  /** Stacked avatars for recent participants. Pass `[]` to hide. When omitted, uses demo participants. */\n  participants?: UserAvatarGroupItem[];\n  /** Optional thread title. */\n  threadTitle?: string;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Opens the thread. Sibling of the overflow menu for keyboard reachability. */\n  onClick?: () => void;\n  /** Thread overflow menu handler. */\n  onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * The Thread List Item is a single entry in the Threads view. Each row gives the user enough\n * context — who, where, what, when — to decide whether to open the thread without opening\n * it.\n */\nexport default function ThreadListItem({\n  active = false,\n  badge = 'none',\n  mentionCount = 1,\n  authorName = 'Martin Kraft',\n  channelLabel = 'ENTERPRISE TEAM',\n  previewText = 'Do we have a guideline for what minimum width we should support in the system console? I know that…',\n  timestamp = '5 mins ago',\n  replyCount = 3,\n  participants: participantsProp,\n  threadTitle,\n  className = '',\n  onClick,\n  onMenuClick,\n}: ThreadListItemProps) {\n  const participants =\n    participantsProp === undefined ? DEFAULT_PARTICIPANTS : participantsProp;\n  const showParticipants = participants.length > 0;\n  const showGutterBadge =\n    !active && (badge === 'unread' || badge === 'mention');\n  const replyLabel = replyCount === 1 ? '1 reply' : `${replyCount} replies`;\n\n  const rootClass = [\n    styles['thread-list-item'],\n    active ? styles['thread-list-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const statusHint =\n    badge === 'mention'\n      ? `${mentionCount} mention${mentionCount === 1 ? '' : 's'}`\n      : badge === 'unread'\n        ? 'unread'\n        : undefined;\n\n  const handleMainClick = (event: MouseEvent<HTMLDivElement>) => {\n    const selection = window.getSelection();\n    if (\n      selection?.type === 'Range' &&\n      selection.toString().length > 0 &&\n      event.currentTarget.contains(\n        selection.getRangeAt(0).commonAncestorContainer,\n      )\n    ) {\n      return;\n    }\n    onClick?.();\n  };\n\n  const handleMainKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Enter' && event.key !== ' ') {\n      return;\n    }\n    event.preventDefault();\n    onClick?.();\n  };\n\n  return (\n    <div className={rootClass}>\n      <div\n        className={styles['thread-list-item__main']}\n        role={onClick ? 'button' : undefined}\n        tabIndex={onClick ? 0 : undefined}\n        onClick={onClick ? handleMainClick : undefined}\n        onKeyDown={onClick ? handleMainKeyDown : undefined}\n        aria-current={active ? true : undefined}\n      >\n        <div className={styles['thread-list-item__thread']}>\n          <div className={styles['thread-list-item__container']}>\n            <div className={styles['thread-list-item__post-content']}>\n              <div className={styles['thread-list-item__gutter']}>\n                {showGutterBadge && badge === 'unread' && (\n                  <span\n                    className={styles['thread-list-item__unread-gutter']}\n                    aria-hidden\n                  >\n                    <UnreadBadge\n                      className={styles['thread-list-item__unread-badge']}\n                      context=\"icon-button\"\n                    />\n                  </span>\n                )}\n                {showGutterBadge && badge === 'mention' && (\n                  <span\n                    className={styles['thread-list-item__mention-gutter']}\n                    aria-hidden\n                  >\n                    <MentionBadge\n                      count={mentionCount}\n                      location=\"channel\"\n                      size=\"medium\"\n                    />\n                  </span>\n                )}\n              </div>\n              <div className={styles['thread-list-item__post-body']}>\n                <div className={styles['thread-list-item__post-body-content']}>\n                  <div className={styles['thread-list-item__name-row']}>\n                    <div className={styles['thread-list-item__name-group']}>\n                      <span className={styles['thread-list-item__author']}>\n                        {authorName}\n                      </span>\n                      <Tag casing=\"all-caps\" label={channelLabel} />\n                      {statusHint && (\n                        <span\n                          className={styles['thread-list-item__status-hint']}\n                        >\n                          {statusHint}\n                        </span>\n                      )}\n                    </div>\n                    <span className={styles['thread-list-item__timestamp']}>\n                      {timestamp}\n                    </span>\n                  </div>\n                  {threadTitle != null && (\n                    <div className={styles['thread-list-item__title-row']}>\n                      <p className={styles['thread-list-item__title']}>\n                        {threadTitle}\n                      </p>\n                    </div>\n                  )}\n                  <p className={styles['thread-list-item__preview']}>\n                    {previewText}\n                  </p>\n                </div>\n              </div>\n            </div>\n            <div className={styles['thread-list-item__replies']}>\n              <div className={styles['thread-list-item__replies-inner']}>\n                {showParticipants && (\n                  <UserAvatarGroup\n                    avatars={participants}\n                    className={styles['thread-list-item__avatar-group']}\n                    max={3}\n                    size=\"20\"\n                  />\n                )}\n                <span className={styles['thread-list-item__reply-count']}>\n                  {replyLabel}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      {onMenuClick && (\n        <div className={styles['thread-list-item__actions']}>\n          <span className={styles['thread-list-item__menu-button']}>\n            <IconButton\n              aria-label=\"Thread actions\"\n              icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n              padding=\"compact\"\n              size=\"small\"\n              style=\"default\"\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onMenuClick(event);\n              }}\n            />\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_PARTICIPANTS","ThreadListItem","active","badge","mentionCount","authorName","channelLabel","previewText","timestamp","replyCount","participantsProp","threadTitle","className","onClick","onMenuClick","participants","showParticipants","showGutterBadge","replyLabel","rootClass","styles","statusHint","handleMainClick","event","selection","handleMainKeyDown","jsxs","jsx","UnreadBadge","MentionBadge","Tag","UserAvatarGroup","IconButton","Icon","DotsHorizontalIcon"],"mappings":"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"}
+{"version":3,"file":"ThreadListItem.cjs","sources":["../../../src/components/thread-list-item/ThreadListItem.tsx"],"sourcesContent":["import DotsHorizontalIcon from '@mattermost/compass-icons/components/dots-horizontal';\nimport type { KeyboardEvent, MouseEvent, ReactNode } from 'react';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '../mention-badge/MentionBadge';\nimport UnreadBadge from '../unread-badge/UnreadBadge';\nimport UserAvatarGroup, {\n  type UserAvatarGroupItem,\n} from '../user-avatar-group/UserAvatarGroup';\nimport styles from './ThreadListItem.module.scss';\n\nconst DEFAULT_PARTICIPANTS: UserAvatarGroupItem[] = [\n  { key: 'leonard', name: 'Leonard Riley' },\n  { key: 'aiko', name: 'Aiko Tan' },\n  { key: 'arjun', name: 'Arjun Patel' },\n  { key: 'marco', name: 'Marco Rinaldi' },\n  { key: 'sofia', name: 'Sofia Bauer' },\n];\n\nexport interface ThreadListItemProps {\n  /** Whether this item is the active/selected thread. */\n  active?: boolean;\n  /** Badge in the left gutter. Default: None. Hidden when `active` is true. */\n  badge?: 'none' | 'unread' | 'mention';\n  /** Shown when `badge` is Mention. Default: 1. */\n  mentionCount?: number;\n  /** Author name. */\n  authorName?: ReactNode;\n  /** Channel/team label. */\n  channelLabel?: ReactNode;\n  /** Message preview text. */\n  previewText?: ReactNode;\n  /** Timestamp label. */\n  timestamp?: ReactNode;\n  /** Number of replies. */\n  replyCount?: number;\n  /** Stacked avatars for recent participants. Pass `[]` to hide. When omitted, uses demo participants. */\n  participants?: UserAvatarGroupItem[];\n  /** Optional thread title. */\n  threadTitle?: ReactNode;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Opens the thread. Sibling of the overflow menu for keyboard reachability. */\n  onClick?: () => void;\n  /** Thread overflow menu handler. */\n  onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /** Visible reply count. Default: `1 reply` / `{count} replies`. */\n  formatReplyCount?: (count: number) => ReactNode;\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: \"Thread actions\". */\n  menuLabel?: string;\n}\n\nconst defaultFormatReplies = (count: number) =>\n  count === 1 ? '1 reply' : `${count} replies`;\nconst defaultFormatMentions = (count: number) =>\n  `${count} mention${count === 1 ? '' : 's'}`;\n\n/**\n * The Thread List Item is a single entry in the Threads view. Each row gives the user enough\n * context — who, where, what, when — to decide whether to open the thread without opening\n * it.\n */\nexport default function ThreadListItem({\n  active = false,\n  badge = 'none',\n  mentionCount = 1,\n  authorName = 'Martin Kraft',\n  channelLabel = 'ENTERPRISE TEAM',\n  previewText = 'Do we have a guideline for what minimum width we should support in the system console? I know that…',\n  timestamp = '5 mins ago',\n  replyCount = 3,\n  participants: participantsProp,\n  threadTitle,\n  className = '',\n  onClick,\n  onMenuClick,\n  formatReplyCount = defaultFormatReplies,\n  formatMentionLabel = defaultFormatMentions,\n  unreadLabel = 'unread',\n  menuLabel = 'Thread actions',\n}: ThreadListItemProps) {\n  const participants =\n    participantsProp === undefined ? DEFAULT_PARTICIPANTS : participantsProp;\n  const showParticipants = participants.length > 0;\n  const showGutterBadge =\n    !active && (badge === 'unread' || badge === 'mention');\n  const replyLabel = formatReplyCount(replyCount);\n\n  const rootClass = [\n    styles['thread-list-item'],\n    active ? styles['thread-list-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const statusHint =\n    badge === 'mention'\n      ? formatMentionLabel(mentionCount)\n      : badge === 'unread'\n        ? unreadLabel\n        : undefined;\n\n  const handleMainClick = (event: MouseEvent<HTMLDivElement>) => {\n    const selection = window.getSelection();\n    if (\n      selection?.type === 'Range' &&\n      selection.toString().length > 0 &&\n      event.currentTarget.contains(\n        selection.getRangeAt(0).commonAncestorContainer,\n      )\n    ) {\n      return;\n    }\n    onClick?.();\n  };\n\n  const handleMainKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Enter' && event.key !== ' ') {\n      return;\n    }\n    event.preventDefault();\n    onClick?.();\n  };\n\n  return (\n    <div className={rootClass}>\n      <div\n        className={styles['thread-list-item__main']}\n        role={onClick ? 'button' : undefined}\n        tabIndex={onClick ? 0 : undefined}\n        onClick={onClick ? handleMainClick : undefined}\n        onKeyDown={onClick ? handleMainKeyDown : undefined}\n        aria-current={active ? true : undefined}\n      >\n        <div className={styles['thread-list-item__thread']}>\n          <div className={styles['thread-list-item__container']}>\n            <div className={styles['thread-list-item__post-content']}>\n              <div className={styles['thread-list-item__gutter']}>\n                {showGutterBadge && badge === 'unread' && (\n                  <span\n                    className={styles['thread-list-item__unread-gutter']}\n                    aria-hidden\n                  >\n                    <UnreadBadge\n                      className={styles['thread-list-item__unread-badge']}\n                      context=\"icon-button\"\n                    />\n                  </span>\n                )}\n                {showGutterBadge && badge === 'mention' && (\n                  <span\n                    className={styles['thread-list-item__mention-gutter']}\n                    aria-hidden\n                  >\n                    <MentionBadge\n                      count={mentionCount}\n                      location=\"channel\"\n                      size=\"medium\"\n                    />\n                  </span>\n                )}\n              </div>\n              <div className={styles['thread-list-item__post-body']}>\n                <div className={styles['thread-list-item__post-body-content']}>\n                  <div className={styles['thread-list-item__name-row']}>\n                    <div className={styles['thread-list-item__name-group']}>\n                      <span className={styles['thread-list-item__author']}>\n                        {authorName}\n                      </span>\n                      <Tag casing=\"all-caps\" label={channelLabel} />\n                      {statusHint && (\n                        <span\n                          className={styles['thread-list-item__status-hint']}\n                        >\n                          {statusHint}\n                        </span>\n                      )}\n                    </div>\n                    <span className={styles['thread-list-item__timestamp']}>\n                      {timestamp}\n                    </span>\n                  </div>\n                  {threadTitle != null && (\n                    <div className={styles['thread-list-item__title-row']}>\n                      <p className={styles['thread-list-item__title']}>\n                        {threadTitle}\n                      </p>\n                    </div>\n                  )}\n                  <p className={styles['thread-list-item__preview']}>\n                    {previewText}\n                  </p>\n                </div>\n              </div>\n            </div>\n            <div className={styles['thread-list-item__replies']}>\n              <div className={styles['thread-list-item__replies-inner']}>\n                {showParticipants && (\n                  <UserAvatarGroup\n                    avatars={participants}\n                    className={styles['thread-list-item__avatar-group']}\n                    max={3}\n                    size=\"20\"\n                  />\n                )}\n                <span className={styles['thread-list-item__reply-count']}>\n                  {replyLabel}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      {onMenuClick && (\n        <div className={styles['thread-list-item__actions']}>\n          <span className={styles['thread-list-item__menu-button']}>\n            <IconButton\n              aria-label={menuLabel}\n              icon={<Icon size=\"16\" glyph={<DotsHorizontalIcon />} />}\n              padding=\"compact\"\n              size=\"small\"\n              style=\"default\"\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onMenuClick(event);\n              }}\n            />\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_PARTICIPANTS","defaultFormatReplies","count","defaultFormatMentions","ThreadListItem","active","badge","mentionCount","authorName","channelLabel","previewText","timestamp","replyCount","participantsProp","threadTitle","className","onClick","onMenuClick","formatReplyCount","formatMentionLabel","unreadLabel","menuLabel","participants","showParticipants","showGutterBadge","replyLabel","rootClass","styles","statusHint","handleMainClick","event","selection","handleMainKeyDown","jsxs","jsx","UnreadBadge","MentionBadge","Tag","UserAvatarGroup","IconButton","Icon","DotsHorizontalIcon"],"mappings":"mfAYMA,EAA8C,CAClD,CAAE,IAAK,UAAW,KAAM,eAAA,EACxB,CAAE,IAAK,OAAQ,KAAM,UAAA,EACrB,CAAE,IAAK,QAAS,KAAM,aAAA,EACtB,CAAE,IAAK,QAAS,KAAM,eAAA,EACtB,CAAE,IAAK,QAAS,KAAM,aAAA,CACxB,EAuCMC,EAAwBC,GAC5BA,IAAU,EAAI,UAAY,GAAGA,CAAK,WAC9BC,EAAyBD,GAC7B,GAAGA,CAAK,WAAWA,IAAU,EAAI,GAAK,GAAG,GAO3C,SAAwBE,EAAe,CACrC,OAAAC,EAAS,GACT,MAAAC,EAAQ,OACR,aAAAC,EAAe,EACf,WAAAC,EAAa,eACb,aAAAC,EAAe,kBACf,YAAAC,EAAc,sGACd,UAAAC,EAAY,aACZ,WAAAC,EAAa,EACb,aAAcC,EACd,YAAAC,EACA,UAAAC,EAAY,GACZ,QAAAC,EACA,YAAAC,EACA,iBAAAC,EAAmBjB,EACnB,mBAAAkB,EAAqBhB,EACrB,YAAAiB,EAAc,SACd,UAAAC,EAAY,gBACd,EAAwB,CACtB,MAAMC,EACJT,IAAqB,OAAYb,EAAuBa,EACpDU,EAAmBD,EAAa,OAAS,EACzCE,EACJ,CAACnB,IAAWC,IAAU,UAAYA,IAAU,WACxCmB,EAAaP,EAAiBN,CAAU,EAExCc,EAAY,CAChBC,EAAAA,QAAO,kBAAkB,EACzBtB,EAASsB,EAAAA,QAAO,0BAA0B,EAAI,GAC9CZ,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELa,EACJtB,IAAU,UACNa,EAAmBZ,CAAY,EAC/BD,IAAU,SACRc,EACA,OAEFS,EAAmBC,GAAsC,CAC7D,MAAMC,EAAY,OAAO,aAAA,GAEvBA,GAAA,YAAAA,EAAW,QAAS,SACpBA,EAAU,WAAW,OAAS,GAC9BD,EAAM,cAAc,SAClBC,EAAU,WAAW,CAAC,EAAE,uBAAA,GAK5Bf,GAAA,MAAAA,GACF,EAEMgB,EAAqBF,GAAyC,CAC9DA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,MAG3CA,EAAM,eAAA,EACNd,GAAA,MAAAA,IACF,EAEA,OACEiB,EAAAA,KAAC,MAAA,CAAI,UAAWP,EACd,SAAA,CAAAQ,EAAAA,IAAC,MAAA,CACC,UAAWP,EAAAA,QAAO,wBAAwB,EAC1C,KAAMX,EAAU,SAAW,OAC3B,SAAUA,EAAU,EAAI,OACxB,QAASA,EAAUa,EAAkB,OACrC,UAAWb,EAAUgB,EAAoB,OACzC,eAAc3B,EAAS,GAAO,OAE9B,SAAA6B,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,0BAA0B,EAC/C,SAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,6BAA6B,EAClD,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,gCAAgC,EACrD,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,0BAA0B,EAC9C,SAAA,CAAAH,GAAmBlB,IAAU,UAC5B4B,EAAAA,IAAC,OAAA,CACC,UAAWP,EAAAA,QAAO,iCAAiC,EACnD,cAAW,GAEX,SAAAO,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWR,EAAAA,QAAO,gCAAgC,EAClD,QAAQ,aAAA,CAAA,CACV,CAAA,EAGHH,GAAmBlB,IAAU,WAC5B4B,EAAAA,IAAC,OAAA,CACC,UAAWP,EAAAA,QAAO,kCAAkC,EACpD,cAAW,GAEX,SAAAO,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAO7B,EACP,SAAS,UACT,KAAK,QAAA,CAAA,CACP,CAAA,CACF,EAEJ,EACA2B,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,6BAA6B,EAClD,SAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,qCAAqC,EAC1D,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,8BAA8B,EACnD,SAAA,CAAAO,MAAC,OAAA,CAAK,UAAWP,EAAAA,QAAO,0BAA0B,EAC/C,SAAAnB,EACH,EACA0B,EAAAA,IAACG,EAAAA,QAAA,CAAI,OAAO,WAAW,MAAO5B,EAAc,EAC3CmB,GACCM,EAAAA,IAAC,OAAA,CACC,UAAWP,EAAAA,QAAO,+BAA+B,EAEhD,SAAAC,CAAA,CAAA,CACH,EAEJ,QACC,OAAA,CAAK,UAAWD,EAAAA,QAAO,6BAA6B,EAClD,SAAAhB,CAAA,CACH,CAAA,EACF,EACCG,GAAe,MACdoB,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,6BAA6B,EAClD,SAAAO,EAAAA,IAAC,KAAE,UAAWP,UAAO,yBAAyB,EAC3C,WACH,EACF,QAED,IAAA,CAAE,UAAWA,EAAAA,QAAO,2BAA2B,EAC7C,SAAAjB,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CACF,CAAA,EACF,EACAwB,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,2BAA2B,EAChD,SAAAM,EAAAA,KAAC,MAAA,CAAI,UAAWN,EAAAA,QAAO,iCAAiC,EACrD,SAAA,CAAAJ,GACCW,EAAAA,IAACI,EAAAA,QAAA,CACC,QAAShB,EACT,UAAWK,EAAAA,QAAO,gCAAgC,EAClD,IAAK,EACL,KAAK,IAAA,CAAA,QAGR,OAAA,CAAK,UAAWA,EAAAA,QAAO,+BAA+B,EACpD,SAAAF,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CAAA,EAEDR,GACCiB,EAAAA,IAAC,MAAA,CAAI,UAAWP,EAAAA,QAAO,2BAA2B,EAChD,SAAAO,EAAAA,IAAC,OAAA,CAAK,UAAWP,EAAAA,QAAO,+BAA+B,EACrD,SAAAO,EAAAA,IAACK,EAAAA,QAAA,CACC,aAAYlB,EACZ,WAAOmB,UAAA,CAAK,KAAK,KAAK,MAAON,MAACO,IAAmB,EAAI,EACrD,QAAQ,UACR,KAAK,QACL,MAAM,UACN,KAAK,SACL,QAAUX,GAAU,CAClBA,EAAM,gBAAA,EACNb,EAAYa,CAAK,CACnB,CAAA,CAAA,EAEJ,CAAA,CACF,CAAA,EAEJ,CAEJ"}

package/dist/components/thread-list-item/ThreadListItem.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, ReactNode } from 'react';
 import { UserAvatarGroupItem } from '../user-avatar-group/UserAvatarGroup';
 export interface ThreadListItemProps {
     /** Whether this item is the active/selected thread. */
@@ -8,30 +8,38 @@ export interface ThreadListItemProps {
     /** Shown when `badge` is Mention. Default: 1. */
     mentionCount?: number;
     /** Author name. */
-    authorName?: string;
+    authorName?: ReactNode;
     /** Channel/team label. */
-    channelLabel?: string;
+    channelLabel?: ReactNode;
     /** Message preview text. */
-    previewText?: string;
+    previewText?: ReactNode;
     /** Timestamp label. */
-    timestamp?: string;
+    timestamp?: ReactNode;
     /** Number of replies. */
     replyCount?: number;
     /** Stacked avatars for recent participants. Pass `[]` to hide. When omitted, uses demo participants. */
     participants?: UserAvatarGroupItem[];
     /** Optional thread title. */
-    threadTitle?: string;
+    threadTitle?: ReactNode;
     /** Optional CSS class name. */
     className?: string;
     /** Opens the thread. Sibling of the overflow menu for keyboard reachability. */
     onClick?: () => void;
     /** Thread overflow menu handler. */
     onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Visible reply count. Default: `1 reply` / `{count} replies`. */
+    formatReplyCount?: (count: number) => ReactNode;
+    /** Visually hidden mention hint. Default: `{count} mention(s)`. */
+    formatMentionLabel?: (count: number) => ReactNode;
+    /** Visually hidden unread hint. Default: "unread". */
+    unreadLabel?: ReactNode;
+    /** Accessible name for the overflow menu button. Default: "Thread actions". */
+    menuLabel?: string;
 }
 /**
  * The Thread List Item is a single entry in the Threads view. Each row gives the user enough
  * context — who, where, what, when — to decide whether to open the thread without opening
  * it.
  */
-export default function ThreadListItem({ active, badge, mentionCount, authorName, channelLabel, previewText, timestamp, replyCount, participants: participantsProp, threadTitle, className, onClick, onMenuClick, }: ThreadListItemProps): import("react/jsx-runtime").JSX.Element;
+export default function ThreadListItem({ active, badge, mentionCount, authorName, channelLabel, previewText, timestamp, replyCount, participants: participantsProp, threadTitle, className, onClick, onMenuClick, formatReplyCount, formatMentionLabel, unreadLabel, menuLabel, }: ThreadListItemProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ThreadListItem.d.ts.map

package/dist/components/thread-list-item/ThreadListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadListItem.d.ts","sourceRoot":"","sources":["../../../src/components/thread-list-item/ThreadListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AAMvD,OAAwB,EACtB,KAAK,mBAAmB,EACzB,MAAM,oCAAoC,CAAC;AAW5C,MAAM,WAAW,mBAAmB;IAClC,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtC,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wGAAwG;IACxG,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,MAAc,EACd,KAAc,EACd,YAAgB,EAChB,UAA2B,EAC3B,YAAgC,EAChC,WAAmH,EACnH,SAAwB,EACxB,UAAc,EACd,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EACX,SAAc,EACd,OAAO,EACP,WAAW,GACZ,EAAE,mBAAmB,2CA0JrB"}
+{"version":3,"file":"ThreadListItem.d.ts","sourceRoot":"","sources":["../../../src/components/thread-list-item/ThreadListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlE,OAAwB,EACtB,KAAK,mBAAmB,EACzB,MAAM,oCAAoC,CAAC;AAW5C,MAAM,WAAW,mBAAmB;IAClC,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtC,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uBAAuB;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wGAAwG;IACxG,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,6BAA6B;IAC7B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7D,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,sDAAsD;IACtD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,MAAc,EACd,KAAc,EACd,YAAgB,EAChB,UAA2B,EAC3B,YAAgC,EAChC,WAAmH,EACnH,SAAwB,EACxB,UAAc,EACd,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EACX,SAAc,EACd,OAAO,EACP,WAAW,EACX,gBAAuC,EACvC,kBAA0C,EAC1C,WAAsB,EACtB,SAA4B,GAC7B,EAAE,mBAAmB,2CA0JrB"}