npm - @mattermost/compass-ui - Versions diffs - 0.1.0-alpha.4 → 0.1.0-alpha.6 - Mend

@mattermost/compass-ui 0.1.0-alpha.4 → 0.1.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (970) hide show

package/dist/components/text-input/TextInput.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .~~_textInput_14l3m_2~~{display:flex;flex-direction:column;width:100%}.~~_textInput__wrapper_14l3m_7~~{position:relative;display:flex;flex-direction:column;min-height:0;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition);cursor:text}.~~_textInput_14l3m_2~~:has(.~~_textInput__input_14l3m_18~~:not(:disabled)):hover:not(:focus-within) .~~_textInput__wrapper_14l3m_7~~{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}.~~_textInput_14l3m_2~~:has(.~~_textInput__input_14l3m_18~~:focus-visible) .~~_textInput__wrapper_14l3m_7~~{box-shadow:inset 0 0 0 1px var(--~~button~~-bg),0 0 0 1px var(--~~button~~-bg)}.~~_textInput_14l3m_2~~:has(.~~_textInput__input_14l3m_18~~:disabled) .~~_textInput__wrapper_14l3m_7~~{background-color:var(--center-channel-bg);opacity:.56;cursor:not-allowed}.~~_textInput__label_14l3m_29~~{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}.~~_textInput~~--label-~~floated_14l3m_49~~ .~~_textInput__label_14l3m_29~~{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}.~~_textInput__inner_14l3m_56~~{display:flex;align-items:center;flex:1;width:100%;min-width:0;box-sizing:border-box;margin:0;cursor:text}.~~_textInput__input_14l3m_18~~{flex:1 1 0;width:100%;min-width:0;min-height:100%;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}.~~_textInput__input_14l3m_18~~:focus{outline:none}.~~_textInput__input_14l3m_18~~::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}.~~_textInput__leadingIcon_14l3m_87~~,.~~_textInput__trailingIcon_14l3m_87~~{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}.~~_textInput__leadingIcon_14l3m_87~~{margin-right:var(--spacing-xs)}.~~_textInput__trailingIcon_14l3m_87~~{margin-left:var(--spacing-xs)}.~~_textInput__counter_14l3m_100~~{margin-top:var(--spacing-xxxs);font-family:Open Sans,sans-serif;font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}.~~_textInput~~--size-~~small_14l3m_107~~ .~~_textInput__wrapper_14l3m_7~~{min-height:32px}.~~_textInput~~--size-~~small_14l3m_107~~ .~~_textInput__inner_14l3m_56~~{padding:var(--spacing-xs) var(--spacing-m)}.~~_textInput~~--size-~~small_14l3m_107~~ .~~_textInput__input_14l3m_18~~{font-size:var(--font-size-75);line-height:var(--line-height-25)}.~~_textInput~~--size-~~small_14l3m_107~~.~~_textInput~~--label-~~floated_14l3m_49~~ .~~_textInput__label_14l3m_29~~{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}.~~_textInput~~--size-~~medium_14l3m_123~~ .~~_textInput__wrapper_14l3m_7~~{min-height:40px}.~~_textInput~~--size-~~medium_14l3m_123~~ .~~_textInput__inner_14l3m_56~~{padding:var(--spacing-s) var(--spacing-l)}.~~_textInput~~--size-~~medium_14l3m_123~~ .~~_textInput__input_14l3m_18~~{font-size:var(--font-size-100);line-height:var(--line-height-100)}.~~_textInput~~--size-~~medium_14l3m_123~~ .~~_textInput__label_14l3m_29~~{font-size:var(--font-size-100);left:var(--spacing-m)}.~~_textInput~~--size-~~medium_14l3m_123~~.~~_textInput~~--label-~~floated_14l3m_49~~ .~~_textInput__label_14l3m_29~~{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}.~~_textInput~~--size-~~large_14l3m_143~~ .~~_textInput__wrapper_14l3m_7~~{min-height:48px}.~~_textInput~~--size-~~large_14l3m_143~~ .~~_textInput__inner_14l3m_56~~{padding:var(--spacing-m) var(--spacing-l)}.~~_textInput~~--size-~~large_14l3m_143~~ .~~_textInput__input_14l3m_18~~{font-size:var(--font-size-200);line-height:var(--line-height-200)}.~~_textInput~~--size-~~large_14l3m_143~~ .~~_textInput__label_14l3m_29~~{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}.~~_textInput~~--size-~~large_14l3m_143~~.~~_textInput~~--label-~~floated_14l3m_49~~ .~~_textInput__label_14l3m_29~~{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}.~~_textInput~~--has-leading-~~icon_14l3m_164~~ .~~_textInput__label_14l3m_29~~{left:var(--spacing-xxxl)}.~~_textInput~~--has-leading-~~icon_14l3m_164~~.~~_textInput~~--label-~~floated_14l3m_49~~ .~~_textInput__label_14l3m_29~~{left:var(--spacing-xs)}.~~_textInput~~--has-leading-~~icon_14l3m_164~~.~~_textInput~~--size-~~medium_14l3m_123~~ .~~_textInput__label_14l3m_29~~,.~~_textInput~~--has-leading-~~icon_14l3m_164~~.~~_textInput~~--size-~~large_14l3m_143~~ .~~_textInput__label_14l3m_29~~{left:36px}.~~_textInput~~--has-leading-~~icon_14l3m_164~~.~~_textInput~~--size-~~medium_14l3m_123~~.~~_textInput~~--label-~~floated_14l3m_49~~ .~~_textInput__label_14l3m_29~~,.~~_textInput~~--has-leading-~~icon_14l3m_164~~.~~_textInput~~--size-~~large_14l3m_143~~.~~_textInput~~--label-~~floated_14l3m_49~~ .~~_textInput__label_14l3m_29~~{left:var(--spacing-m)}.~~_textInput_14l3m_2~~:has(.~~_textInput__input_14l3m_18~~:focus-visible) .~~_textInput__label_14l3m_29~~{color:var(--button-bg)}.~~_textInput_14l3m_2~~:has(.~~_textInput__label_14l3m_29~~):not(.~~_textInput~~--label-~~floated_14l3m_49~~) .~~_textInput__input_14l3m_18~~::placeholder{color:transparent}.~~_textInput~~--~~invalid_14l3m_182~~ .~~_textInput__wrapper_14l3m_7~~{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}.~~_textInput~~--~~invalid_14l3m_182~~:has(.~~_textInput__input_14l3m_18~~:focus-visible) .~~_textInput__wrapper_14l3m_7~~{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}.~~_textInput~~--~~invalid_14l3m_182~~ .~~_textInput__label_14l3m_29~~{color:var(--error-text, var(--color-danger))}.~~_textInput~~--~~invalid_14l3m_182~~:has(.~~_textInput__input_14l3m_18~~:focus-visible) .~~_textInput__label_14l3m_29~~{color:var(--error-text, var(--color-danger))}
1	+ ._text-input_16ayx_2{display:flex;flex-direction:column;width:100%}._text-input__wrapper_16ayx_7{position:relative;display:flex;flex-direction:column;min-height:0;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition);cursor:text}._text-input_16ayx_2:has(._text-input__input_16ayx_18:not(:disabled)):hover:not(:focus-within) ._text-input__wrapper_16ayx_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._text-input_16ayx_2:has(._text-input__input_16ayx_18:focus-visible) ._text-input__wrapper_16ayx_7{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._text-input_16ayx_2:has(._text-input__input_16ayx_18:disabled) ._text-input__wrapper_16ayx_7{background-color:var(--center-channel-bg);opacity:.56;cursor:not-allowed}._text-input__label_16ayx_29{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._text-input__inner_16ayx_56{display:flex;align-items:center;flex:1;width:100%;min-width:0;box-sizing:border-box;margin:0;cursor:text}._text-input__input_16ayx_18{flex:1 1 0;width:100%;min-width:0;min-height:100%;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._text-input__input_16ayx_18:focus{outline:none}._text-input__input_16ayx_18::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._text-input__leading-icon_16ayx_87,._text-input__trailing-icon_16ayx_87{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._text-input__leading-icon_16ayx_87{margin-right:var(--spacing-xs)}._text-input__trailing-icon_16ayx_87{margin-left:var(--spacing-xs)}._text-input__counter_16ayx_100{margin-top:var(--spacing-xxxs);font-family:Open Sans,sans-serif;font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._text-input--size-small_16ayx_107 ._text-input__wrapper_16ayx_7{min-height:32px}._text-input--size-small_16ayx_107 ._text-input__inner_16ayx_56{padding:var(--spacing-xs) var(--spacing-m)}._text-input--size-small_16ayx_107 ._text-input__input_16ayx_18{font-size:var(--font-size-75);line-height:var(--line-height-25)}._text-input--size-small_16ayx_107._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._text-input--size-medium_16ayx_123 ._text-input__wrapper_16ayx_7{min-height:40px}._text-input--size-medium_16ayx_123 ._text-input__inner_16ayx_56{padding:var(--spacing-s) var(--spacing-l)}._text-input--size-medium_16ayx_123 ._text-input__input_16ayx_18{font-size:var(--font-size-100);line-height:var(--line-height-100)}._text-input--size-medium_16ayx_123 ._text-input__label_16ayx_29{font-size:var(--font-size-100);left:var(--spacing-m)}._text-input--size-medium_16ayx_123._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._text-input--size-large_16ayx_143 ._text-input__wrapper_16ayx_7{min-height:48px}._text-input--size-large_16ayx_143 ._text-input__inner_16ayx_56{padding:var(--spacing-m) var(--spacing-l)}._text-input--size-large_16ayx_143 ._text-input__input_16ayx_18{font-size:var(--font-size-200);line-height:var(--line-height-200)}._text-input--size-large_16ayx_143 ._text-input__label_16ayx_29{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._text-input--size-large_16ayx_143._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._text-input--has-leading-icon_16ayx_164 ._text-input__label_16ayx_29{left:var(--spacing-xxxl)}._text-input--has-leading-icon_16ayx_164._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{left:var(--spacing-xs)}._text-input--has-leading-icon_16ayx_164._text-input--size-medium_16ayx_123 ._text-input__label_16ayx_29,._text-input--has-leading-icon_16ayx_164._text-input--size-large_16ayx_143 ._text-input__label_16ayx_29{left:36px}._text-input--has-leading-icon_16ayx_164._text-input--size-medium_16ayx_123._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29,._text-input--has-leading-icon_16ayx_164._text-input--size-large_16ayx_143._text-input--label-floated_16ayx_49 ._text-input__label_16ayx_29{left:var(--spacing-m)}._text-input_16ayx_2:has(._text-input__input_16ayx_18:focus-visible) ._text-input__label_16ayx_29{color:var(--button-bg)}._text-input_16ayx_2:has(._text-input__label_16ayx_29):not(._text-input--label-floated_16ayx_49) ._text-input__input_16ayx_18::placeholder{color:transparent}._text-input--invalid_16ayx_182 ._text-input__wrapper_16ayx_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._text-input--invalid_16ayx_182:has(._text-input__input_16ayx_18:focus-visible) ._text-input__wrapper_16ayx_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._text-input--invalid_16ayx_182 ._text-input__label_16ayx_29{color:var(--error-text, var(--color-danger))}._text-input--invalid_16ayx_182:has(._text-input__input_16ayx_18:focus-visible) ._text-input__label_16ayx_29{color:var(--error-text, var(--color-danger))}

package/dist/components/text-input/TextInput.module.scss.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TextInput.module.css');const t="_textInput_14l3m_2",_="_textInput__wrapper_14l3m_7",e="_textInput__input_14l3m_18",n="_textInput__label_14l3m_29",u="_textInput__inner_14l3m_56",p="_textInput__leadingIcon_14l3m_87",l="_textInput__trailingIcon_14l3m_87",I="_textInput__counter_14l3m_100",x={textInput:t,textInput__wrapper:_,textInput__input:e,textInput__label:n,"textInput--label-floated":"_textInput--label-floated_14l3m_49",textInput__inner:u,textInput__leadingIcon:p,textInput__trailingIcon:l,textInput__counter:I,"textInput--size-small":"_textInput--size-small_14l3m_107","textInput--size-medium":"_textInput--size-medium_14l3m_123","textInput--size-large":"_textInput--size-large_14l3m_143","textInput--has-leading-icon":"_textInput--has-leading-icon_14l3m_164","textInput--invalid":"_textInput--invalid_14l3m_182"};exports.default=x;exports.textInput=t;exports.textInput__counter=I;exports.textInput__inner=u;exports.textInput__input=e;exports.textInput__label=n;exports.textInput__leadingIcon=p;exports.textInput__trailingIcon=l;exports.textInput__wrapper=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./TextInput.module.css');const t={"text-input":"_text-input_16ayx_2","text-input__wrapper":"_text-input__wrapper_16ayx_7","text-input__input":"_text-input__input_16ayx_18","text-input__label":"_text-input__label_16ayx_29","text-input--label-floated":"_text-input--label-floated_16ayx_49","text-input__inner":"_text-input__inner_16ayx_56","text-input__leading-icon":"_text-input__leading-icon_16ayx_87","text-input__trailing-icon":"_text-input__trailing-icon_16ayx_87","text-input__counter":"_text-input__counter_16ayx_100","text-input--size-small":"_text-input--size-small_16ayx_107","text-input--size-medium":"_text-input--size-medium_16ayx_123","text-input--size-large":"_text-input--size-large_16ayx_143","text-input--has-leading-icon":"_text-input--has-leading-icon_16ayx_164","text-input--invalid":"_text-input--invalid_16ayx_182"};exports.default=t;
 //# sourceMappingURL=TextInput.module.scss.cjs.map

package/dist/components/text-input/TextInput.module.scss.js CHANGED Viewed

@@ -1,28 +1,20 @@
-import './TextInput.module.css';const t = "_textInput_14l3m_2", _ = "_textInput__wrapper_14l3m_7", n = "_textInput__input_14l3m_18", e = "_textInput__label_14l3m_29", p = "_textInput__inner_14l3m_56", u = "_textInput__leadingIcon_14l3m_87", l = "_textInput__trailingIcon_14l3m_87", I = "_textInput__counter_14l3m_100", x = {
-  textInput: t,
-  textInput__wrapper: _,
-  textInput__input: n,
-  textInput__label: e,
-  "textInput--label-floated": "_textInput--label-floated_14l3m_49",
-  textInput__inner: p,
-  textInput__leadingIcon: u,
-  textInput__trailingIcon: l,
-  textInput__counter: I,
-  "textInput--size-small": "_textInput--size-small_14l3m_107",
-  "textInput--size-medium": "_textInput--size-medium_14l3m_123",
-  "textInput--size-large": "_textInput--size-large_14l3m_143",
-  "textInput--has-leading-icon": "_textInput--has-leading-icon_14l3m_164",
-  "textInput--invalid": "_textInput--invalid_14l3m_182"
+import './TextInput.module.css';const t = {
+  "text-input": "_text-input_16ayx_2",
+  "text-input__wrapper": "_text-input__wrapper_16ayx_7",
+  "text-input__input": "_text-input__input_16ayx_18",
+  "text-input__label": "_text-input__label_16ayx_29",
+  "text-input--label-floated": "_text-input--label-floated_16ayx_49",
+  "text-input__inner": "_text-input__inner_16ayx_56",
+  "text-input__leading-icon": "_text-input__leading-icon_16ayx_87",
+  "text-input__trailing-icon": "_text-input__trailing-icon_16ayx_87",
+  "text-input__counter": "_text-input__counter_16ayx_100",
+  "text-input--size-small": "_text-input--size-small_16ayx_107",
+  "text-input--size-medium": "_text-input--size-medium_16ayx_123",
+  "text-input--size-large": "_text-input--size-large_16ayx_143",
+  "text-input--has-leading-icon": "_text-input--has-leading-icon_16ayx_164",
+  "text-input--invalid": "_text-input--invalid_16ayx_182"
 };
 export {
-  x as default,
-  t as textInput,
-  I as textInput__counter,
-  p as textInput__inner,
-  n as textInput__input,
-  e as textInput__label,
-  u as textInput__leadingIcon,
-  l as textInput__trailingIcon,
-  _ as textInput__wrapper
+  t as default
 };
 //# sourceMappingURL=TextInput.module.scss.js.map

package/dist/components/thread-footer/ThreadFooter.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),p=require("../user-avatar/UserAvatar.cjs"),c=require("../button/Button.cjs"),N=require("../icon/Icon.cjs"),__b=require("@mattermost/compass-icons/components/reply-outline.js"),b=__b?.default??__b,a=require("./ThreadFooter.module.scss.cjs");function g({replyCount:t=3,avatars:l=[],badge:n="none",following:r=!1,lastReplyTime:i,onReply:h,onFollowToggle:u,hovered:_=!1,className:m="",...j}){const x=[a.default["thread-footer"],m].filter(Boolean).join(" "),o=3,d=l.slice(0,o),f=l.length>o?l.length-o:0;return e.jsx("div",{className:x,...j,children:e.jsxs("div",{className:a.default["thread-footer__inner"],children:[e.jsxs("div",{className:a.default["thread-footer__avatars-group"],children:[n==="unread"&&e.jsx("span",{className:a.default["thread-footer__unread-dot"],"aria-label":"Unread replies"}),n==="mention"&&e.jsx("span",{className:a.default["thread-footer__mention-badge"],children:"@"}),d.length>0&&e.jsxs("div",{className:a.default["thread-footer__avatars"],children:[d.map((s,v)=>e.jsx(p.default,{src:s.src,alt:s.alt,size:"20",className:a.default["thread-footer__avatar"]},v)),f>0&&e.jsxs("span",{className:a.default["thread-footer__avatar-overflow"],children:["+",f]})]}),d.length===0&&e.jsxs("div",{className:a.default["thread-footer__avatars"],children:[[0,1,2].map(s=>e.jsx("span",{className:a.default["thread-footer__avatar-placeholder"]},s)),e.jsx("span",{className:a.default["thread-footer__avatar-overflow"],children:"+2"})]})]}),e.jsxs("div",{className:a.default["thread-footer__buttons"],children:[e.jsx(c.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__reply-btn"],_?a.default["thread-footer__reply-btn--hovered"]:""].filter(Boolean).join(" "),onClick:h,"aria-label":`${t} repl${t===1?"y":"ies"}`,leadingIcon:e.jsx(N.default,{size:"12",glyph:e.jsx(b,{})}),children:e.jsxs("span",{className:a.default["thread-footer__btn-label"],children:[t," ",t===1?"reply":"replies"]})}),e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx(c.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__follow-btn"],r?a.default["thread-footer__follow-btn--following"]:""].filter(Boolean).join(" "),onClick:u,"aria-pressed":r,"aria-label":r?"Unfollow thread":"Follow thread",children:r?"Following":"Follow"}),r&&i&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx("span",{className:a.default["thread-footer__last-reply"],children:i})]})]})]})})}exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../button/Button.cjs"),j=require("../icon/Icon.cjs"),__x=require("@mattermost/compass-icons/components/reply-outline.js"),x=__x?.default??__x,p=require("../mention-badge/MentionBadge.cjs"),v=require("../user-avatar-group/UserAvatarGroup.cjs"),a=require("./ThreadFooter.module.scss.cjs");function N({replyCount:r=3,avatars:d=[],badge:s="none",mentionCount:l=1,following:t=!1,lastReplyTime:o,onReply:f,onFollowToggle:c,hovered:i=!1,className:h="",..._}){const m=[a.default["thread-footer"],t?a.default["thread-footer--following"]:"",i?a.default["thread-footer--hovered"]:"",h].filter(Boolean).join(" "),n=s==="mention"?`${l} mention${l===1?"":"s"}`:s==="unread"?"Unread replies":void 0;return e.jsx("div",{className:m,..._,children:e.jsxs("div",{className:a.default["thread-footer__inner"],children:[e.jsxs("div",{className:a.default["thread-footer__avatars-group"],children:[n&&e.jsx("span",{className:a.default["thread-footer__status-hint"],children:n}),s==="unread"&&e.jsx("span",{className:a.default["thread-footer__unread-dot"],"aria-hidden":!0}),s==="mention"&&e.jsx("span",{className:a.default["thread-footer__mention-badge"],"aria-hidden":!0,children:e.jsx(p.default,{count:l,location:"channel",size:"medium"})}),d.length>0&&e.jsx(v.default,{avatars:d,max:3,size:"20"})]}),e.jsxs("div",{className:a.default["thread-footer__buttons"],children:[e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__reply-btn"],i?a.default["thread-footer__reply-btn--hovered"]:""].filter(Boolean).join(" "),onClick:f,"aria-label":`${r} repl${r===1?"y":"ies"}`,leadingIcon:e.jsx(j.default,{size:"12",glyph:e.jsx(x,{})}),children:e.jsxs("span",{className:a.default["thread-footer__btn-label"],children:[r," ",r===1?"reply":"replies"]})}),e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx(u.default,{emphasis:"quaternary",size:"x-small",className:[a.default["thread-footer__follow-btn"],t?a.default["thread-footer__follow-btn--following"]:""].filter(Boolean).join(" "),onClick:c,"aria-pressed":t,"aria-label":t?"Unfollow thread":"Follow thread",children:t?"Following":"Follow"}),t&&o&&e.jsxs("div",{className:a.default["thread-footer__last-reply-group"],children:[e.jsx("div",{className:a.default["thread-footer__divider"],"aria-hidden":!0}),e.jsx("span",{className:a.default["thread-footer__last-reply"],children:o})]})]})]})})}exports.default=N;
 //# sourceMappingURL=ThreadFooter.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ThreadFooter.cjs","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport ~~UserAvatar from '@/components/user-avatar/UserAvatar';\nimport~~ Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport styles from './ThreadFooter.module.scss';\n\nexport type ThreadFooterBadge = 'none' \| 'unread' \| 'mention';\n\nexport interface ~~AvatarData {\n src: string;\n alt: string;\n}\n\nexport interface~~ ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {\n /** Reply count. Default: 3. /\n replyCount?: number;\n /* Participant avatars (first 3 shown, overflow as +N). /\n avatars?: ~~AvatarData~~[];\n /* Badge variant. Default: None. /\n badge?: ThreadFooterBadge;\n /* Whether the current user is following the thread. Default: false. /\n following?: boolean;\n /* Last reply timestamp label. Shown 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 following = false,\n lastReplyTime,\n onReply,\n onFollowToggle,\n hovered = false,\n className = '',\n ...rest\n}: ThreadFooterProps) {\n const rootClass = [styles['thread-footer'], className]\n .filter(Boolean)\n .join(' ');\n\n const ~~MAX_VISIBLE~~ = ~~3;\~~n ~~const~~ ~~visibleAvatars~~ = ~~avatars.slice(0,~~ ~~MAX_VISIBLE);\n const~~ ~~overflowCount~~ =\n ~~avatars.length~~ > ~~MAX_VISIBLE~~ ? ~~avatars.length~~ ~~- MAX_VISIBLE~~ : 0;\n\n return (\n <div className={rootClass} {...rest}>\n <div className={styles['thread-footer__inner']}>\n ~~{/ Badge + Avatars /}\n~~ <div className={styles['thread-footer__avatars-group']}>\n {~~badge~~ ~~=== 'unread'~~ && (\n <span\n className={styles['thread-~~footer__unread~~-~~dot~~']}\n ~~aria-label=\"Unread replies~~\"\n ~~/>\~~n )}\n {badge === '~~mention~~' && (\n <span className={styles['thread-~~footer__mention~~-~~badge~~']}~~>@</span>\n )}~~\n\n ~~{/ Avatar stack /~~}\n {~~visibleAvatars.length~~ > 0 && (\n <~~div~~ className={styles['thread-~~footer__avatars~~']}>\n ~~{visibleAvatars.map((av, i) => (~~\n <~~UserAvatar~~\n ~~key~~={i}\n ~~src={av.src}~~\~~n alt={av.alt}~~\n size=\"20\"\n ~~className={styles['thread-footer__avatar']}\n~~ />\n ~~))}\n {overflowCount > 0 && (\n <span className={styles['thread-footer__avatar-overflow']}>\n +{overflowCount}\n~~ </span>\n ~~)}\n </div>\n~~ )}\n\n {~~/ Placeholder~~ avatars ~~when none provided /}\n {visibleAvatars~~.length ~~===~~ 0 && (\n <~~div~~ ~~className~~={~~styles['thread-footer__avatars']~~}~~>\n {[0,~~ ~~1, 2].map((i) => (\n <span\n key~~={i}\~~n className={styles['thread-footer__avatar-placeholder']}\n~~ />\n ~~))}\n <span className={styles['thread-footer__avatar-overflow']}>\n +2\n </span>\n </div>\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 — ~~visible~~ when following */}\n {following && lastReplyTime && (\n ~~<>\~~n <div className={styles['thread-footer__divider']} aria-hidden />\n <span className={styles['thread-footer__last-reply']}>\n {lastReplyTime}\n </span>\n ~~</>\~~n )}\n </div>\n </div>\n </div>\n );\n}\n"],"names":["ThreadFooter","replyCount","avatars","badge","following","lastReplyTime","onReply","onFollowToggle","hovered","className","rest","rootClass","styles","~~MAX_VISIBLE~~","~~visibleAvatars","overflowCount","~~jsx","jsxs","av","i","~~UserAvatar","~~Button","Icon","ReplyOutlineIcon"~~,"Fragment"~~],"mappings":"~~uWAwCA~~,SAAwBA,EAAa,CACnC,WAAAC,EAAa,EACb,QAAAC,EAAU,CAAA,EACV,MAAAC,EAAQ,OACR,UAAAC,EAAY,GACZ,cAAAC,EACA,QAAAC,EACA,eAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,~~CAACC~~,~~UAAO~~,eAAe,~~EAAGH~~,~~CAAS~~,~~EAClD~~,OAAO,OAAO,EACd,KAAK,GAAG,EAELI,~~EAAc~~,~~EACdC~~,~~EAAiBZ~~,~~EAAQ~~,~~MAAM~~,~~EAAGW~~,~~CAAW~~,~~EAC7CE~~,~~EACJb~~,~~EAAQ~~,~~OAASW~~,~~EAAcX~~,~~EAAQ~~,~~OAASW~~,~~EAAc~~,~~EAEhE~~,~~OACEG,~~EAAAA,IAAC,MAAA,CAAI,~~UAAWL~~,EAAY,GAAGD,EAC7B,~~SAAAO~~,EAAAA,KAAC,MAAA,CAAI,~~UAAWL~~,EAAAA,QAAO,sBAAsB,~~EAE3C~~,SAAA,~~CAAAK~~,EAAAA,KAAC,MAAA,CAAI,~~UAAWL~~,EAAAA,QAAO,8BAA8B,EAClD,SAAA,~~CAAAT~~,~~IAAU~~,~~UACTa,EAAAA,IAAC,~~OAAA,~~CACC~~,~~UAAWJ~~,EAAAA,QAAO,~~2BAA2B~~,~~EAC7C~~,~~aAAW~~,~~gBAAA~~,~~CAAA~~,~~EAGdT,~~IAAU,~~WACTa~~,~~MAAC,OAAA,CAAK,UAAWJ,~~EAAAA,~~QAAO,8BAA8B,EAAG,SAAA,~~IAAC,~~EAI3DE~~,~~EAAe~~,~~OAAS~~,~~GACvBG,OAAC,OAAI,UAAWL,~~EAAAA,QAAO,~~wBAAwB~~,~~EAC5C~~,~~SAAA~~,~~CAAAE~~,~~EAAe~~,~~IAAI~~,~~CAACI~~,~~EAAIC~~,~~IACvBH,~~EAAAA,~~IAACI~~,~~EAAAA~~,~~QAAA~~,~~CAEC~~,~~IAAKF,EAAG,IACR,IAAKA,EAAG,IACR,KAAK,KACL,UAAWN,~~EAAAA,QAAO,~~uBAAuB~~,~~CAAA~~,~~EAJpCO~~,~~CAAA~~,~~CAMR~~,~~EACAJ,EAAgB,GACfE,~~EAAAA,~~KAAC~~,~~QAAK,UAAWL,~~EAAAA,~~QAAO~~,~~gCAAgC~~,~~EAAG~~,~~SAAA~~,~~CAAA~~,~~IACvDG~~,~~CAAA~~,~~CAAA~~,~~CACJ,~~CAAA,~~EAEJ~~,~~EAIDD,EAAe,SAAW,GACzBG,OAAC,OAAI,UAAWL,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,~~CAAA,~~CAAC~~,~~EAAG~~,~~EAAG~~,~~CAAC~~,~~EAAE,IAAKO,GACdH,~~EAAAA,~~IAAC~~,~~OAAA,CAEC,UAAWJ,~~EAAAA,~~QAAO~~,~~mCAAmC~~,~~CAAA~~,~~EADhDO~~,~~CAAA,CAGR,QACA,OAAA,CAAK,UAAWP,EAAAA,QAAO,gCAAgC,~~EAAG,~~SAAA~~,IAAA,~~CAE3D~~,CAAA,~~CAAA~~,~~CACF~~,~~CAAA,EAEJ,EAGAK,~~EAAAA,KAAC,MAAA,CAAI,~~UAAWL~~,EAAAA,QAAO,wBAAwB,EAE7C,SAAA,~~CAAAI~~,EAAAA,~~IAACK~~,EAAAA,QAAA,CACC,SAAS,aACT,KAAK,UACL,UAAW,~~CACTT~~,EAAAA,QAAO,0BAA0B,EACjCJ,EAAUI,EAAAA,QAAO,mCAAmC,EAAI,EAAA,EAEvD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASN,EACT,aAAY,~~GAAGL~~,CAAU,QAAQA,IAAe,EAAI,IAAM,KAAK,GAC/D,~~kBAAcqB~~,UAAA,CAAK,KAAK,KAAK,~~MAAON~~,~~MAACO~~,IAAiB,EAAI,EAE1D,~~SAAAN~~,EAAAA,KAAC,OAAA,CAAK,~~UAAWL~~,UAAO,0BAA0B,EAC/C,SAAA,~~CAAAX~~,EAAW,IAAEA,IAAe,EAAI,QAAU,SAAA,CAAA,CAC7C,CAAA,CAAA,QAGD,MAAA,CAAI,~~UAAWW~~,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAAC,~~EAG9DI~~,EAAAA,~~IAACK~~,EAAAA,QAAA,CACC,SAAS,aACT,KAAK,UACL,UAAW,~~CACTT~~,EAAAA,QAAO,2BAA2B,EAClCR,EAAYQ,EAAAA,QAAO,sCAAsC,EAAI,EAAA,EAE5D,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASL,EACT,eAAcH,EACd,aAAYA,EAAY,kBAAoB,gBAE3C,WAAY,YAAc,QAAA,CAAA,EAI5BA,GAAaC,~~GACZY~~,EAAAA,~~KAAAO~~,EAAAA,~~SAAA~~,~~CACE~~,SAAA,~~CAAAR~~,MAAC,OAAI,~~UAAWJ~~,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAAC,QAC7D,OAAA,CAAK,UAAWA,EAAAA,QAAO,2BAA2B,EAChD,SAAAP,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,CACF,CAEJ"}
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' && (\n <span\n className={styles['thread-footer__unread-dot']}\n aria-hidden\n />\n )}\n {badge === 'mention' && (\n <span\n className={styles['thread-footer__mention-badge']}\n aria-hidden\n >\n <MentionBadge\n count={mentionCount}\n location=\"channel\"\n size=\"medium\"\n />\n </span>\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":"+ZAwCA,SAAwBA,EAAa,CACnC,WAAAC,EAAa,EACb,QAAAC,EAAU,CAAA,EACV,MAAAC,EAAQ,OACR,aAAAC,EAAe,EACf,UAAAC,EAAY,GACZ,cAAAC,EACA,QAAAC,EACA,eAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBR,EAAYQ,EAAAA,QAAO,0BAA0B,EAAI,GACjDJ,EAAUI,EAAAA,QAAO,wBAAwB,EAAI,GAC7CH,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELI,EACJX,IAAU,UACN,GAAGC,CAAY,WAAWA,IAAiB,EAAI,GAAK,GAAG,GACvDD,IAAU,SACR,iBACA,OAER,OACEY,EAAAA,IAAC,MAAA,CAAI,UAAWH,EAAY,GAAGD,EAC7B,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,sBAAsB,EAC3C,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,8BAA8B,EAClD,SAAA,CAAAC,SACE,OAAA,CAAK,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAAC,EACH,EAEDX,IAAU,UACTY,EAAAA,IAAC,OAAA,CACC,UAAWF,EAAAA,QAAO,2BAA2B,EAC7C,cAAW,EAAA,CAAA,EAGdV,IAAU,WACTY,EAAAA,IAAC,OAAA,CACC,UAAWF,EAAAA,QAAO,8BAA8B,EAChD,cAAW,GAEX,SAAAE,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAOb,EACP,SAAS,UACT,KAAK,QAAA,CAAA,CACP,CAAA,EAIHF,EAAQ,OAAS,GAChBa,EAAAA,IAACG,EAAAA,SAAgB,QAAAhB,EAAkB,IAAK,EAAG,KAAK,IAAA,CAAK,CAAA,EAEzD,EAGAc,EAAAA,KAAC,MAAA,CAAI,UAAWH,EAAAA,QAAO,wBAAwB,EAE7C,SAAA,CAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,SAAS,aACT,KAAK,UACL,UAAW,CACTN,EAAAA,QAAO,0BAA0B,EACjCJ,EAAUI,EAAAA,QAAO,mCAAmC,EAAI,EAAA,EAEvD,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASN,EACT,aAAY,GAAGN,CAAU,QAAQA,IAAe,EAAI,IAAM,KAAK,GAC/D,kBAAcmB,UAAA,CAAK,KAAK,KAAK,MAAOL,MAACM,IAAiB,EAAI,EAE1D,SAAAL,EAAAA,KAAC,OAAA,CAAK,UAAWH,UAAO,0BAA0B,EAC/C,SAAA,CAAAZ,EAAW,IAAEA,IAAe,EAAI,QAAU,SAAA,CAAA,CAC7C,CAAA,CAAA,QAGD,MAAA,CAAI,UAAWY,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAAC,EAG9DE,EAAAA,IAACI,EAAAA,QAAA,CACC,SAAS,aACT,KAAK,UACL,UAAW,CACTN,EAAAA,QAAO,2BAA2B,EAClCR,EAAYQ,EAAAA,QAAO,sCAAsC,EAAI,EAAA,EAE5D,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASL,EACT,eAAcH,EACd,aAAYA,EAAY,kBAAoB,gBAE3C,WAAY,YAAc,QAAA,CAAA,EAI5BA,GAAaC,GACZU,EAAAA,KAAC,OAAI,UAAWH,EAAAA,QAAO,iCAAiC,EACtD,SAAA,CAAAE,MAAC,OAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAAG,cAAW,GAAC,QAC7D,OAAA,CAAK,UAAWA,EAAAA,QAAO,2BAA2B,EAChD,SAAAP,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,CACF,CAEJ"}

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

@@ -1,19 +1,18 @@
 import { HTMLAttributes } from 'react';
+import { UserAvatarGroupItem } from '../user-avatar-group/UserAvatarGroup';
 export type ThreadFooterBadge = 'none' | 'unread' | 'mention';
-export interface AvatarData {
-    src: string;
-    alt: string;
-}
 export interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {
     /** Reply count. Default: 3. */
     replyCount?: number;
-    /** Participant avatars (first 3 shown, overflow as +N). */
-    avatars?: AvatarData[];
+    /** Participant avatars. Rendered with User Avatar Group (first 3 shown, overflow as +N). */
+    avatars?: UserAvatarGroupItem[];
     /** Badge variant. Default: None. */
     badge?: ThreadFooterBadge;
+    /** Shown when `badge` is Mention. Default: 1. */
+    mentionCount?: number;
     /** Whether the current user is following the thread. Default: false. */
     following?: boolean;
-    /** Last reply timestamp label. Shown when following. */
+    /** Last reply timestamp label. Shown on row hover when following. */
     lastReplyTime?: string;
     /** Called when Reply is clicked. */
     onReply?: () => void;
@@ -29,5 +28,5 @@ export interface ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {
  * 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, 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, ...rest }: ThreadFooterProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ThreadFooter.d.ts.map

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

	@@ -1 +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;~~AAO5C~~,~~MAAM~~,~~MAAM~~,~~iBAAiB~~,~~GAAG~~,MAAM,~~GAAG~~,~~QAAQ,GAAG,SAAS,~~CAAC;~~AAE9D~~,MAAM,~~WAAW~~,~~UAAU;IACzB~~,GAAG,~~EAAE,~~MAAM,~~CAAC;IACZ~~,GAAG,~~EAAE~~,~~MAAM,~~CAAC;~~CACb;AAED~~,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,~~2DAA2D~~;~~IAC3D~~,OAAO,CAAC,EAAE,~~UAAU~~,EAAE,CAAC;~~IACvB~~,oCAAoC;IACpC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,~~wDAAwD~~;~~IACxD~~,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,SAAiB,EACjB,aAAa,EACb,OAAO,EACP,cAAc,EACd,OAAe,EACf,SAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,~~2CAkHnB~~"}
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,2CAuGnB"}

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

@@ -1,103 +1,100 @@
-import { jsx as a, jsxs as r, Fragment as g } from "react/jsx-runtime";
-import w from "../user-avatar/UserAvatar.js";
-import _ from "../button/Button.js";
-import y from "../icon/Icon.js";
-import __j from "@mattermost/compass-icons/components/reply-outline.js";const j=__j&&__j.default?__j.default:__j;
+import { jsx as r, jsxs as o } 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 e from "./ThreadFooter.module.scss.js";
-function U({
+function w({
   replyCount: t = 3,
-  avatars: s = [],
-  badge: d = "none",
-  following: o = !1,
-  lastReplyTime: h,
+  avatars: l = [],
+  badge: s = "none",
+  mentionCount: i = 1,
+  following: a = !1,
+  lastReplyTime: d,
   onReply: m,
   onFollowToggle: f,
-  hovered: p = !1,
-  className: v = "",
-  ...N
+  hovered: n = !1,
+  className: _ = "",
+  ...p
 }) {
-  const b = [e["thread-footer"], v].filter(Boolean).join(" "), n = 3, i = s.slice(0, n), c = s.length > n ? s.length - n : 0;
-  return /* @__PURE__ */ a("div", { className: b, ...N, children: /* @__PURE__ */ r("div", { className: e["thread-footer__inner"], children: [
-    /* @__PURE__ */ r("div", { className: e["thread-footer__avatars-group"], children: [
-      d === "unread" && /* @__PURE__ */ a(
+  const u = [
+    e["thread-footer"],
+    a ? e["thread-footer--following"] : "",
+    n ? e["thread-footer--hovered"] : "",
+    _
+  ].filter(Boolean).join(" "), h = s === "mention" ? `${i} mention${i === 1 ? "" : "s"}` : s === "unread" ? "Unread replies" : void 0;
+  return /* @__PURE__ */ r("div", { className: u, ...p, children: /* @__PURE__ */ o("div", { className: e["thread-footer__inner"], children: [
+    /* @__PURE__ */ o("div", { className: e["thread-footer__avatars-group"], children: [
+      h && /* @__PURE__ */ r("span", { className: e["thread-footer__status-hint"], children: h }),
+      s === "unread" && /* @__PURE__ */ r(
         "span",
         {
           className: e["thread-footer__unread-dot"],
-          "aria-label": "Unread replies"
+          "aria-hidden": !0
         }
       ),
-      d === "mention" && /* @__PURE__ */ a("span", { className: e["thread-footer__mention-badge"], children: "@" }),
-      i.length > 0 && /* @__PURE__ */ r("div", { className: e["thread-footer__avatars"], children: [
-        i.map((l, u) => /* @__PURE__ */ a(
-          w,
-          {
-            src: l.src,
-            alt: l.alt,
-            size: "20",
-            className: e["thread-footer__avatar"]
-          },
-          u
-        )),
-        c > 0 && /* @__PURE__ */ r("span", { className: e["thread-footer__avatar-overflow"], children: [
-          "+",
-          c
-        ] })
-      ] }),
-      i.length === 0 && /* @__PURE__ */ r("div", { className: e["thread-footer__avatars"], children: [
-        [0, 1, 2].map((l) => /* @__PURE__ */ a(
-          "span",
-          {
-            className: e["thread-footer__avatar-placeholder"]
-          },
-          l
-        )),
-        /* @__PURE__ */ a("span", { className: e["thread-footer__avatar-overflow"], children: "+2" })
-      ] })
+      s === "mention" && /* @__PURE__ */ r(
+        "span",
+        {
+          className: e["thread-footer__mention-badge"],
+          "aria-hidden": !0,
+          children: /* @__PURE__ */ r(
+            b,
+            {
+              count: i,
+              location: "channel",
+              size: "medium"
+            }
+          )
+        }
+      ),
+      l.length > 0 && /* @__PURE__ */ r(y, { avatars: l, max: 3, size: "20" })
     ] }),
-    /* @__PURE__ */ r("div", { className: e["thread-footer__buttons"], children: [
-      /* @__PURE__ */ a(
-        _,
+    /* @__PURE__ */ o("div", { className: e["thread-footer__buttons"], children: [
+      /* @__PURE__ */ r(
+        c,
         {
           emphasis: "quaternary",
           size: "x-small",
           className: [
             e["thread-footer__reply-btn"],
-            p ? e["thread-footer__reply-btn--hovered"] : ""
+            n ? e["thread-footer__reply-btn--hovered"] : ""
           ].filter(Boolean).join(" "),
           onClick: m,
           "aria-label": `${t} repl${t === 1 ? "y" : "ies"}`,
-          leadingIcon: /* @__PURE__ */ a(y, { size: "12", glyph: /* @__PURE__ */ a(j, {}) }),
-          children: /* @__PURE__ */ r("span", { className: e["thread-footer__btn-label"], children: [
+          leadingIcon: /* @__PURE__ */ r(N, { size: "12", glyph: /* @__PURE__ */ r(v, {}) }),
+          children: /* @__PURE__ */ o("span", { className: e["thread-footer__btn-label"], children: [
             t,
             " ",
             t === 1 ? "reply" : "replies"
           ] })
         }
       ),
-      /* @__PURE__ */ a("div", { className: e["thread-footer__divider"], "aria-hidden": !0 }),
-      /* @__PURE__ */ a(
-        _,
+      /* @__PURE__ */ r("div", { className: e["thread-footer__divider"], "aria-hidden": !0 }),
+      /* @__PURE__ */ r(
+        c,
         {
           emphasis: "quaternary",
           size: "x-small",
           className: [
             e["thread-footer__follow-btn"],
-            o ? e["thread-footer__follow-btn--following"] : ""
+            a ? 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"
+          "aria-pressed": a,
+          "aria-label": a ? "Unfollow thread" : "Follow thread",
+          children: a ? "Following" : "Follow"
         }
       ),
-      o && h && /* @__PURE__ */ r(g, { children: [
-        /* @__PURE__ */ a("div", { className: e["thread-footer__divider"], "aria-hidden": !0 }),
-        /* @__PURE__ */ a("span", { className: e["thread-footer__last-reply"], children: h })
+      a && d && /* @__PURE__ */ o("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: d })
       ] })
     ] })
   ] }) });
 }
 export {
-  U as default
+  w as default
 };
 //# sourceMappingURL=ThreadFooter.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ThreadFooter.js","sources":["../../../src/components/thread-footer/ThreadFooter.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport ~~UserAvatar from '@/components/user-avatar/UserAvatar';\nimport~~ Button from '@/components/button/Button';\nimport Icon from '@/components/icon/Icon';\nimport ReplyOutlineIcon from '@mattermost/compass-icons/components/reply-outline';\nimport styles from './ThreadFooter.module.scss';\n\nexport type ThreadFooterBadge = 'none' \| 'unread' \| 'mention';\n\nexport interface ~~AvatarData {\n src: string;\n alt: string;\n}\n\nexport interface~~ ThreadFooterProps extends HTMLAttributes<HTMLDivElement> {\n /** Reply count. Default: 3. /\n replyCount?: number;\n /* Participant avatars (first 3 shown, overflow as +N). /\n avatars?: ~~AvatarData~~[];\n /* Badge variant. Default: None. /\n badge?: ThreadFooterBadge;\n /* Whether the current user is following the thread. Default: false. /\n following?: boolean;\n /* Last reply timestamp label. Shown 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 following = false,\n lastReplyTime,\n onReply,\n onFollowToggle,\n hovered = false,\n className = '',\n ...rest\n}: ThreadFooterProps) {\n const rootClass = [styles['thread-footer'], className]\n .filter(Boolean)\n .join(' ');\n\n const ~~MAX_VISIBLE~~ = ~~3;\~~n ~~const~~ ~~visibleAvatars~~ = ~~avatars.slice(0,~~ ~~MAX_VISIBLE);\n const~~ ~~overflowCount~~ =\n ~~avatars.length~~ > ~~MAX_VISIBLE~~ ? ~~avatars.length~~ ~~- MAX_VISIBLE~~ : 0;\n\n return (\n <div className={rootClass} {...rest}>\n <div className={styles['thread-footer__inner']}>\n ~~{/ Badge + Avatars /}\n~~ <div className={styles['thread-footer__avatars-group']}>\n {~~badge~~ ~~=== 'unread'~~ && (\n <span\n className={styles['thread-~~footer__unread~~-~~dot~~']}\n ~~aria-label=\"Unread replies~~\"\n ~~/>\~~n )}\n {badge === '~~mention~~' && (\n <span className={styles['thread-~~footer__mention~~-~~badge~~']}~~>@</span>\n )}~~\n\n ~~{/ Avatar stack /~~}\n {~~visibleAvatars.length~~ > 0 && (\n <~~div~~ className={styles['thread-~~footer__avatars~~']}>\n ~~{visibleAvatars.map((av, i) => (~~\n <~~UserAvatar~~\n ~~key~~={i}\n ~~src={av.src}~~\~~n alt={av.alt}~~\n size=\"20\"\n ~~className={styles['thread-footer__avatar']}\n~~ />\n ~~))}\n {overflowCount > 0 && (\n <span className={styles['thread-footer__avatar-overflow']}>\n +{overflowCount}\n~~ </span>\n ~~)}\n </div>\n~~ )}\n\n {~~/ Placeholder~~ avatars ~~when none provided /}\n {visibleAvatars~~.length ~~===~~ 0 && (\n <~~div~~ ~~className~~={~~styles['thread-footer__avatars']~~}~~>\n {[0,~~ ~~1, 2].map((i) => (\n <span\n key~~={i}\~~n className={styles['thread-footer__avatar-placeholder']}\n~~ />\n ~~))}\n <span className={styles['thread-footer__avatar-overflow']}>\n +2\n </span>\n </div>\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 — ~~visible~~ when following */}\n {following && lastReplyTime && (\n ~~<>\~~n <div className={styles['thread-footer__divider']} aria-hidden />\n <span className={styles['thread-footer__last-reply']}>\n {lastReplyTime}\n </span>\n ~~</>\~~n )}\n </div>\n </div>\n </div>\n );\n}\n"],"names":["ThreadFooter","replyCount","avatars","badge","following","lastReplyTime","onReply","onFollowToggle","hovered","className","rest","rootClass","styles","~~MAX_VISIBLE~~","~~visibleAvatars","overflowCount","~~jsx","jsxs","av","i","~~UserAvatar","~~Button","Icon","ReplyOutlineIcon"~~,"Fragment"~~],"mappings":"~~;;;;;;~~AAwCA,SAAwBA,EAAa;AAAA,EACnC,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU,CAAA;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,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,~~CAACC~~,EAAO,eAAe,~~GAAGH~~,~~CAAS~~,~~EAClD~~,OAAO,OAAO,EACd,KAAK,GAAG,GAELI,~~IAAc~~,~~GACdC~~,~~IAAiBZ~~,~~EAAQ~~,~~MAAM~~,~~GAAGW~~,~~CAAW~~,~~GAC7CE~~,~~IACJb~~,~~EAAQ~~,~~SAASW~~,~~IAAcX~~,~~EAAQ~~,~~SAASW,IAAc~~;~~AAEhE~~,SACE,~~gBAAAG~~,EAAC,OAAA,EAAI,~~WAAWL~~,GAAY,GAAGD,GAC7B,UAAA,~~gBAAAO~~,EAAC,OAAA,EAAI,~~WAAWL~~,EAAO,sBAAsB,~~GAE3C~~,UAAA;AAAA,IAAA,~~gBAAAK~~,EAAC,OAAA,EAAI,~~WAAWL~~,EAAO,8BAA8B,GAClD,UAAA;AAAA,~~MAAAT~~,MAAU,YACT,~~gBAAAa~~;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,~~WAAWJ~~,EAAO,2BAA2B;AAAA,UAC7C,~~cAAW~~;AAAA,QAAA;AAAA,MAAA;AAAA,~~MAGdT~~,MAAU,aACT,~~gBAAAa,EAAC,QAAA,EAAK,WAAWJ,EAAO,8BAA8B,GAAG,UAAA,KAAC~~;AAAA,~~MAI3DE,EAAe,SAAS,KACvB,gBAAAG,EAAC,SAAI,WAAWL,EAAO,wBAAwB,GAC5C,UAAA~~;AAAA,~~QAAAE,EAAe,IAAI,CAACI,GAAIC,MACvB,gBAAAH~~;AAAA,~~UAACI;AAAA~~,~~UAAA;AAAA~~,~~YAEC~~,~~KAAKF,EAAG~~;AAAA,~~YACR~~,~~KAAKA,EAAG~~;AAAA,~~YACR~~,~~MAAK;AAAA,YACL,WAAWN,EAAO,uBAAuB;AAAA,~~UAAA~~;AAAA~~,~~UAJpCO;AAAA,QAAA,CAMR;AAAA,QACAJ,IAAgB,KACf,~~gBAAAE~~,EAAC,UAAK,WAAWL,EAAO,gCAAgC,GAAG,UAAA~~;AAAA,~~UAAA~~;AAAA,~~UACvDG~~;AAAA,~~QAAA~~,~~EAAA,CACJ~~;AAAA,~~MAAA~~,~~GAEJ~~;AAAA,~~MAIDD~~,~~EAAe,WAAW,KACzB,gBAAAG,EAAC,SAAI,WAAWL,EAAO,wBAAwB,GAC5C,UAAA~~;AAAA,~~QAAA,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAACO,MACd,gBAAAH~~;AAAA,~~UAAC;AAAA,~~UAAA;AAAA,~~YAEC,WAAWJ,EAAO,mCAAmC~~;AAAA,~~UAAA~~;AAAA,~~UADhDO;AAAA~~,~~QAAA~~,~~CAGR;AAAA~~,~~0BACA~~,~~QAAA~~,~~EAAK~~,~~WAAWP~~,~~EAAO~~,~~gCAAgC~~,GAAG,~~UAAA~~,KAAA,~~CAE3D~~;AAAA,~~MAAA,EAAA,CACF;AAAA,~~IAAA,~~GAEJ~~;AAAA,IAGA,~~gBAAAK~~,EAAC,OAAA,EAAI,~~WAAWL~~,EAAO,wBAAwB,GAE7C,UAAA;AAAA,MAAA,~~gBAAAI~~;AAAA,~~QAACK~~;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,MAAK;AAAA,UACL,WAAW;AAAA,~~YACTT~~,EAAO,0BAA0B;AAAA,YACjCJ,IAAUI,EAAO,mCAAmC,IAAI;AAAA,UAAA,EAEvD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UACX,SAASN;AAAA,UACT,cAAY,~~GAAGL~~,CAAU,QAAQA,MAAe,IAAI,MAAM,KAAK;AAAA,UAC/D,+~~BAAcqB~~,GAAA,EAAK,MAAK,MAAK,OAAO,~~gBAAAN~~,~~EAACO~~,KAAiB,GAAI;AAAA,UAE1D,UAAA,~~gBAAAN~~,EAAC,QAAA,EAAK,~~WAAWL~~,EAAO,0BAA0B,GAC/C,UAAA;AAAA,~~YAAAX~~;AAAA,YAAW;AAAA,YAAEA,MAAe,IAAI,UAAU;AAAA,UAAA,EAAA,CAC7C;AAAA,QAAA;AAAA,MAAA;AAAA,wBAGD,OAAA,EAAI,~~WAAWW~~,EAAO,wBAAwB,GAAG,eAAW,IAAC;AAAA,MAG9D,~~gBAAAI~~;AAAA,~~QAACK~~;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,MAAK;AAAA,UACL,WAAW;AAAA,~~YACTT~~,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,~~gBAAAY~~,~~EAAAO~~,~~GAAA~~,~~EACE~~,UAAA;AAAA,QAAA,~~gBAAAR~~,EAAC,SAAI,~~WAAWJ~~,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;"}
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' && (\n <span\n className={styles['thread-footer__unread-dot']}\n aria-hidden\n />\n )}\n {badge === 'mention' && (\n <span\n className={styles['thread-footer__mention-badge']}\n aria-hidden\n >\n <MentionBadge\n count={mentionCount}\n location=\"channel\"\n size=\"medium\"\n />\n </span>\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,MAEDX,MAAU,YACT,gBAAAY;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWF,EAAO,2BAA2B;AAAA,UAC7C,eAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAGdV,MAAU,aACT,gBAAAY;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWF,EAAO,8BAA8B;AAAA,UAChD,eAAW;AAAA,UAEX,UAAA,gBAAAE;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,OAAOb;AAAA,cACP,UAAS;AAAA,cACT,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACP;AAAA,MAAA;AAAA,MAIHF,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;"}

package/dist/components/thread-footer/ThreadFooter.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- ._thread-~~footer_v5ros_2~~{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-s) var(--spacing-l)}._thread-~~footer__inner_v5ros_8~~{display:inline-flex;align-items:center;padding:0 var(--spacing-s);border-radius:var(--radius-s)}._thread-footer__avatars-~~group_v5ros_14~~{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding-right:var(--spacing-xxxs)}._thread-~~footer__unread~~-~~dot_v5ros_20~~{~~display~~:~~block~~;width:~~8px~~;height:~~8px~~;~~border-radius~~:~~var(--radius-full)~~;~~background-color~~:~~var~~(~~--link-color~~);~~flex~~-~~shrink~~:0}._thread-~~footer__mention~~-~~badge_v5ros_28~~{display:~~inline-flex~~;~~align-items:center;justify-content:center;min-~~width:~~16px~~;height:~~16px~~;~~padding:0 var(--spacing-xxxs);~~border-radius:var(--radius-s);background-color:var(--~~mention~~-~~bg);~~color~~:var(--mention-color~~);~~font~~-~~family~~:~~var(--font~~-~~family~~-~~body);font-size~~:~~var(--font~~-~~size-25)~~;~~font~~-~~weight~~:~~var(--font-weight-semibold);line-height:1~~}._thread-~~footer__avatars_v5ros_14~~{display:inline-flex;align-items:center;~~padding-right~~:~~3px~~}._thread-~~footer__avatar_v5ros_14{border:1px solid var(--center~~-~~channel-bg);border-radius:var(--radius-full);margin-right:-3px;flex-shrink:0}.~~_thread-~~footer__avatar~~-~~placeholder_v5ros_54~~{~~display:block;width:24px;height:24px;border-radius:var(~~--~~radius~~-~~full);border~~:~~1px~~ ~~solid~~ var(--~~center~~-~~channel~~-~~bg);background~~-~~color:rgba(var(--center~~-~~channel-~~color~~-rgb~~)~~,.16);margin-right:-3px;flex-shrink:0~~}._thread-~~footer__avatar~~-~~overflow_v5ros_64{display:inline~~-~~flex;align~~-~~items:center;justify~~-~~content:center;width:24px;height:24px;border~~-~~radius:var(--radius~~-~~full);border~~:~~1px solid var~~(~~--center~~-~~channel~~-bg)~~;background-color:var(~~--~~center~~-~~channel-bg);~~color:rgba(var(--center-channel-color-rgb),.56)~~;font~~-~~family:var(--font~~-~~family~~-~~body);font~~-~~size~~:~~var~~(~~--font-size-75);font-weight~~:~~var(--font-weight-semibold~~)~~;margin~~-~~right:-3px;flex-shrink:0}~~._thread-~~footer__buttons_v5ros_80{display:inline~~-~~flex;align-items~~:~~center;gap:var~~(~~--spacing-xxxxs)}~~._thread-~~footer__reply~~-~~btn_v5ros_85{display:inline-flex;align-items:center;gap:var(~~--~~spacing-xxxs~~)~~;padding:4.5px var(~~--~~spacing~~-~~s);border~~:~~none;border-radius~~:~~var~~(~~--radius-s~~);background-color:~~transparent;color:~~rgba(var(--center-channel-color-rgb),.75)~~;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition)~~}._thread-~~footer__reply-btn_v5ros_85:hover,.~~_thread-footer__reply-btn--~~hovered_v5ros_97~~{background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-~~footer__reply~~-~~btn_v5ros_85:focus~~-~~visible~~{~~outline~~:~~2px solid~~ var(--link-color);~~outline~~-~~offset~~:~~1px~~}._thread-~~footer__btn~~-~~icon_v5ros_104{display:inline~~-~~flex;align~~-~~items~~:~~center;flex~~-~~shrink:0;~~color:rgba(var(--~~center~~-~~channel-~~color-rgb),.75)}._thread-footer__btn-~~label_v5ros_110~~{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_v5ros_117~~{width:1px;height:16px;background-color:rgba(var(--center-channel-color-rgb),.16);flex-shrink:0~~}._thread-footer__follow-btn_v5ros_123{display:inline-flex~~;~~align-items~~:~~center;padding:4.5px~~ var(--~~spacing~~-s)~~;border:none;border-radius:~~var(--~~radius~~-s)~~;background~~-~~color~~:~~transparent;color:rgba~~(~~var(~~--~~center~~-~~channel~~-~~color~~-~~rgb)~~,.~~75);font~~-~~family~~:~~var~~(~~--font~~-~~family~~-~~body~~)~~;font~~-~~size~~:~~var~~(~~--font~~-~~size~~-75)~~;font~~-~~weight~~:~~var(~~--~~font~~-~~weight~~-~~semibold~~);~~line~~-~~height~~:~~15px~~;~~white~~-~~space~~:~~nowrap~~;~~cursor~~:~~pointer~~;transition:~~background~~-~~color~~ var(--duration-quick) var(--ease-transition),~~color~~ var(--duration-quick) var(--ease-transition)}._thread-~~footer__follow-btn_v5ros_123~~:hover~~{background~~-~~color:rgba(var(--center~~-~~channel~~-~~color-rgb)~~,.~~08)}.~~_thread-~~footer__follow-btn_v5ros_123~~:focus-~~visible{outline:2px~~ ~~solid var(--link-color);outline-offset:1px}~~._thread-~~footer__follow~~-~~btn--following_v5ros_146{color:var(--link~~-~~color);background~~-~~color:rgba(var(~~--~~link~~-~~color-rgb),.08)}~~._thread-~~footer__follow~~-~~btn--following_v5ros_146:hover~~{~~background~~-~~color~~:~~rgba(var(--link-color-rgb),.12)~~}._thread-footer__last-~~reply_v5ros_153~~{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}
1	+ ._thread-footer_953ir_2{--thread-footer-focus-ring-color: var(--focus-ring-color);display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-s) var(--spacing-l)}._thread-footer__inner_953ir_9{display:inline-flex;align-items:center;padding:0 var(--spacing-s);border-radius:var(--radius-s)}._thread-footer__avatars-group_953ir_15{display:inline-flex;align-items:center;gap:var(--spacing-xxxs);padding-right:var(--spacing-xxxs)}._thread-footer__status-hint_953ir_21{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__unread-dot_953ir_32{display:block;width:8px;height:8px;border-radius:var(--radius-full);background-color:var(--link-color);flex-shrink:0}._thread-footer__mention-badge_953ir_40{display:inline-flex;flex-shrink:0}._thread-footer__buttons_953ir_44{display:inline-flex;align-items:center;gap:0}._thread-footer__reply-btn_953ir_49,._thread-footer__follow-btn_953ir_49{--focus-ring-color: var(--thread-footer-focus-ring-color)}._thread-footer_953ir_2 ._thread-footer__reply-btn_953ir_49[class=button--emphasis-quaternary],._thread-footer_953ir_2 ._thread-footer__follow-btn_953ir_49:not(._thread-footer__follow-btn--following_953ir_52)[class=button--emphasis-quaternary]{color:rgba(var(--center-channel-color-rgb),.75)}._thread-footer_953ir_2 ._thread-footer__reply-btn_953ir_49[class=button--emphasis-quaternary]:hover:not(:disabled),._thread-footer_953ir_2 ._thread-footer__follow-btn_953ir_49:not(._thread-footer__follow-btn--following_953ir_52)[class=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_953ir_2 ._thread-footer__reply-btn--hovered_953ir_58[class=button--emphasis-quaternary]{background-color:rgba(var(--center-channel-color-rgb),.08)}._thread-footer_953ir_2 ._thread-footer__follow-btn--following_953ir_52[class=button--emphasis-quaternary]{color:var(--link-color);background-color:rgba(var(--link-color-rgb),.08)}._thread-footer_953ir_2 ._thread-footer__follow-btn--following_953ir_52[class*=button--emphasis-quaternary]:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._thread-footer__btn-label_953ir_68{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_953ir_75{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_953ir_44:has(._thread-footer__follow-btn--following_953ir_52)>._thread-footer__divider_953ir_75:first-of-type,._thread-footer__buttons_953ir_44:has(._thread-footer__follow-btn--following_953ir_52)>._thread-footer__last-reply-group_953ir_88>._thread-footer__divider_953ir_75{opacity:0}._thread-footer__buttons_953ir_44:not(:has(._thread-footer__follow-btn--following_953ir_52)):has(._thread-footer__reply-btn_953ir_49:hover,._thread-footer__reply-btn--hovered_953ir_58,._thread-footer__reply-btn_953ir_49:focus-visible,._thread-footer__follow-btn_953ir_49:hover,._thread-footer__follow-btn_953ir_49:focus-visible)>._thread-footer__divider_953ir_75:first-of-type{opacity:0}._thread-footer__last-reply-group_953ir_88{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_953ir_107:hover ._thread-footer__last-reply-group_953ir_88,._thread-footer--following_953ir_107:focus-within ._thread-footer__last-reply-group_953ir_88,._thread-footer--following_953ir_107._thread-footer--hovered_953ir_107 ._thread-footer__last-reply-group_953ir_88{max-width:10rem;opacity:1}._thread-footer__last-reply_953ir_88{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.module.scss.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ThreadFooter.module.css');const r={"thread-footer":"_thread-footer_v5ros_2","thread-footer__inner":"_thread-footer__inner_v5ros_8","thread-footer__avatars-group":"_thread-footer__avatars-group_v5ros_14","thread-footer__unread-dot":"_thread-footer__unread-dot_v5ros_20","thread-footer__mention-badge":"_thread-footer__mention-badge_v5ros_28","thread-footer__avatars":"_thread-footer__avatars_v5ros_14","thread-footer__avatar":"_thread-footer__avatar_v5ros_14","thread-footer__avatar-placeholder":"_thread-footer__avatar-placeholder_v5ros_54","thread-footer__avatar-overflow":"_thread-footer__avatar-overflow_v5ros_64","thread-footer__buttons":"_thread-footer__buttons_v5ros_80","thread-footer__reply-btn":"_thread-footer__reply-btn_v5ros_85","thread-footer__reply-btn--hovered":"_thread-footer__reply-btn--hovered_v5ros_97","thread-footer__btn-label":"_thread-footer__btn-label_v5ros_110","thread-footer__divider":"_thread-footer__divider_v5ros_117","thread-footer__follow-btn":"_thread-footer__follow-btn_v5ros_123","thread-footer__follow-btn--following":"_thread-footer__follow-btn--following_v5ros_146","thread-footer__last-reply":"_thread-footer__last-reply_v5ros_153"};exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ThreadFooter.module.css');const r={"thread-footer":"_thread-footer_953ir_2","thread-footer__inner":"_thread-footer__inner_953ir_9","thread-footer__avatars-group":"_thread-footer__avatars-group_953ir_15","thread-footer__status-hint":"_thread-footer__status-hint_953ir_21","thread-footer__unread-dot":"_thread-footer__unread-dot_953ir_32","thread-footer__mention-badge":"_thread-footer__mention-badge_953ir_40","thread-footer__buttons":"_thread-footer__buttons_953ir_44","thread-footer__reply-btn":"_thread-footer__reply-btn_953ir_49","thread-footer__follow-btn":"_thread-footer__follow-btn_953ir_49","thread-footer__follow-btn--following":"_thread-footer__follow-btn--following_953ir_52","thread-footer__reply-btn--hovered":"_thread-footer__reply-btn--hovered_953ir_58","thread-footer__btn-label":"_thread-footer__btn-label_953ir_68","thread-footer__divider":"_thread-footer__divider_953ir_75","thread-footer__last-reply-group":"_thread-footer__last-reply-group_953ir_88","thread-footer--following":"_thread-footer--following_953ir_107","thread-footer--hovered":"_thread-footer--hovered_953ir_107","thread-footer__last-reply":"_thread-footer__last-reply_953ir_88"};exports.default=r;
 //# sourceMappingURL=ThreadFooter.module.scss.cjs.map

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

@@ -1,21 +1,21 @@
 import './ThreadFooter.module.css';const r = {
-  "thread-footer": "_thread-footer_v5ros_2",
-  "thread-footer__inner": "_thread-footer__inner_v5ros_8",
-  "thread-footer__avatars-group": "_thread-footer__avatars-group_v5ros_14",
-  "thread-footer__unread-dot": "_thread-footer__unread-dot_v5ros_20",
-  "thread-footer__mention-badge": "_thread-footer__mention-badge_v5ros_28",
-  "thread-footer__avatars": "_thread-footer__avatars_v5ros_14",
-  "thread-footer__avatar": "_thread-footer__avatar_v5ros_14",
-  "thread-footer__avatar-placeholder": "_thread-footer__avatar-placeholder_v5ros_54",
-  "thread-footer__avatar-overflow": "_thread-footer__avatar-overflow_v5ros_64",
-  "thread-footer__buttons": "_thread-footer__buttons_v5ros_80",
-  "thread-footer__reply-btn": "_thread-footer__reply-btn_v5ros_85",
-  "thread-footer__reply-btn--hovered": "_thread-footer__reply-btn--hovered_v5ros_97",
-  "thread-footer__btn-label": "_thread-footer__btn-label_v5ros_110",
-  "thread-footer__divider": "_thread-footer__divider_v5ros_117",
-  "thread-footer__follow-btn": "_thread-footer__follow-btn_v5ros_123",
-  "thread-footer__follow-btn--following": "_thread-footer__follow-btn--following_v5ros_146",
-  "thread-footer__last-reply": "_thread-footer__last-reply_v5ros_153"
+  "thread-footer": "_thread-footer_953ir_2",
+  "thread-footer__inner": "_thread-footer__inner_953ir_9",
+  "thread-footer__avatars-group": "_thread-footer__avatars-group_953ir_15",
+  "thread-footer__status-hint": "_thread-footer__status-hint_953ir_21",
+  "thread-footer__unread-dot": "_thread-footer__unread-dot_953ir_32",
+  "thread-footer__mention-badge": "_thread-footer__mention-badge_953ir_40",
+  "thread-footer__buttons": "_thread-footer__buttons_953ir_44",
+  "thread-footer__reply-btn": "_thread-footer__reply-btn_953ir_49",
+  "thread-footer__follow-btn": "_thread-footer__follow-btn_953ir_49",
+  "thread-footer__follow-btn--following": "_thread-footer__follow-btn--following_953ir_52",
+  "thread-footer__reply-btn--hovered": "_thread-footer__reply-btn--hovered_953ir_58",
+  "thread-footer__btn-label": "_thread-footer__btn-label_953ir_68",
+  "thread-footer__divider": "_thread-footer__divider_953ir_75",
+  "thread-footer__last-reply-group": "_thread-footer__last-reply-group_953ir_88",
+  "thread-footer--following": "_thread-footer--following_953ir_107",
+  "thread-footer--hovered": "_thread-footer--hovered_953ir_107",
+  "thread-footer__last-reply": "_thread-footer__last-reply_953ir_88"
 };
 export {
   r as default

package/dist/components/thread-footer/index.d.ts CHANGED Viewed

@@ -1,3 +1,9 @@
 export { default as ThreadFooter } from './ThreadFooter';
-export type { ThreadFooterProps, AvatarData } from './ThreadFooter';
+export type { ThreadFooterProps } from './ThreadFooter';
+export type { UserAvatarGroupItem } from '../user-avatar-group/UserAvatarGroup';
+/** @deprecated Use `UserAvatarGroupItem` (`key`, `name`, optional `src`). */
+export interface AvatarData {
+    src: string;
+    alt: string;
+}
 //# sourceMappingURL=index.d.ts.map

package/dist/components/thread-footer/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/thread-footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,~~gBAAgB~~,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/thread-footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAE9E,6EAA6E;AAC7E,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__g=require("@mattermost/compass-icons/components/dots-horizontal.js"),g=__g?.default??__g,w=require("react"),b=require("../icon/Icon.cjs"),q=require("../icon-button/IconButton.cjs"),I=require("../tag/Tag.cjs"),T=require("../mention-badge/MentionBadge.cjs"),A=require("../unread-badge/UnreadBadge.cjs"),R=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:r=!1,badge:i="none",mentionCount:m=1,authorName:h="Martin Kraft",channelLabel:_="ENTERPRISE TEAM",previewText:f="Do we have a guideline for what minimum width we should support in the system console? I know that…",timestamp:p="5 mins ago",replyCount:d=3,participants:n,threadTitle:o,className:j="",onClick:a,onMenuClick:l}){const c=n===void 0?B:n,x=c.length>0,u=!r&&(i==="unread"||i==="mention"),N=d===1?"1 reply":`${d} replies`,v=[t.default["thread-list-item"],r?t.default["thread-list-item--active"]:"",j].filter(Boolean).join(" "),y=w.useCallback(s=>{a&&(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),a())},[a]);return e.jsxs("div",{className:v,onClick:a,role:a?"button":void 0,tabIndex:a?0:void 0,onKeyDown:a?y: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:[u&&i==="unread"&&e.jsx(A.default,{className:t.default["thread-list-item__unread-badge"],context:"icon-button"}),u&&i==="mention"&&e.jsx("span",{className:t.default["thread-list-item__mention-gutter"],children:e.jsx(T.default,{count:m,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:h}),e.jsx(I.default,{casing:"all-caps",label:_})]}),e.jsx("span",{className:t.default["thread-list-item__timestamp"],children:p})]}),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:f})]})})]}),e.jsx("div",{className:t.default["thread-list-item__replies"],children:e.jsxs("div",{className:t.default["thread-list-item__replies-inner"],children:[x&&e.jsx(R.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:N})]})})]})}),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(q.default,{"aria-label":"Thread actions",icon:e.jsx(b.default,{size:"16",glyph:e.jsx(g,{})}),padding:"compact",size:"small",style:"default",type:"button",onClick:s=>{s.stopPropagation(),l==null||l(s)}})})})]})}exports.default=D;
+"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;
 //# sourceMappingURL=ThreadListItem.cjs.map