@forgedevstack/bear 1.2.5 → 1.2.7

package/dist/components/List/List.js

@@ -1,195 +1,205 @@
-import { jsx as b, jsxs as f } from "react/jsx-runtime";
-import { createContext as k, forwardRef as p, useContext as w } from "react";
-import { cn as n } from "../../utils/cn.js";
-import { LIST_VARIANT_CLASSES as A, LIST_SIZE_CLASSES as E, LIST_PADDING_CLASSES as _, LIST_BASE_CLASSES as D } from "./List.const.js";
-const v = k({}), T = () => w(v), P = p((r, e) => {
+import { jsx as s, jsxs as y } from "react/jsx-runtime";
+import { createContext as w, forwardRef as v, useContext as A } from "react";
+import { cn as i } from "../../utils/cn.js";
+import { LIST_VARIANT_CLASSES as D, LIST_SIZE_CLASSES as E, LIST_PADDING_CLASSES as B, LIST_BASE_CLASSES as T } from "./List.const.js";
+const L = w({}), P = () => A(L), K = v((a, e) => {
   const {
-    variant: s = "default",
-    size: a = "md",
-    hoverable: i = !1,
-    dense: t = !1,
-    disablePadding: x = !1,
-    className: o,
-    children: c,
-    testId: l,
-    ...m
-  } = r;
-  return /* @__PURE__ */ b(v.Provider, { value: { dense: t, hoverable: i }, children: /* @__PURE__ */ b(
+    variant: t = "default",
+    size: r = "md",
+    hoverable: o = !1,
+    dense: n = !1,
+    disablePadding: b = !1,
+    className: l,
+    children: m,
+    testId: g,
+    ...c
+  } = a;
+  return /* @__PURE__ */ s(L.Provider, { value: { dense: n, hoverable: o }, children: /* @__PURE__ */ s(
     "ul",
     {
       ref: e,
       role: "list",
-      className: n(
-        D,
-        !x && _,
-        E[a],
-        A[s],
-        o
+      className: i(
+        T,
+        !b && B,
+        E[r],
+        D[t],
+        l
       ),
-      "data-testid": l,
-      ...m,
-      children: c
+      "data-testid": g,
+      ...c,
+      children: m
     }
   ) });
 });
-P.displayName = "List";
-const j = p(({
-  primary: r,
+K.displayName = "List";
+const j = v(({
+  primary: a,
   secondary: e,
-  leading: s,
-  trailing: a,
-  selected: i = !1,
-  disabled: t = !1,
-  clickable: x = !1,
-  divider: o = !1,
-  dense: c,
-  onClick: l,
-  className: m,
-  children: h,
-  testId: u,
+  leading: t,
+  trailing: r,
+  secondaryAction: o,
+  selected: n = !1,
+  disabled: b = !1,
+  clickable: l = !1,
+  divider: m = !1,
+  dense: g,
+  onClick: c,
+  className: h,
+  children: u,
+  testId: I,
   ...N
 }, S) => {
-  const { dense: L, hoverable: I } = T(), g = c ?? L, d = x || !!l;
-  return /* @__PURE__ */ f(
+  const { dense: k, hoverable: _ } = P(), p = g ?? k, x = l || !!c, f = o ?? r;
+  return /* @__PURE__ */ y(
     "li",
     {
       ref: S,
-      role: d ? "button" : "listitem",
-      tabIndex: d && !t ? 0 : void 0,
-      "aria-selected": i,
-      "aria-disabled": t,
-      onClick: t ? void 0 : l,
-      onKeyDown: (y) => {
-        !t && (y.key === "Enter" || y.key === " ") && (y.preventDefault(), l == null || l());
+      role: x ? "button" : "listitem",
+      tabIndex: x && !b ? 0 : void 0,
+      "aria-selected": n,
+      "aria-disabled": b,
+      onClick: b ? void 0 : c,
+      onKeyDown: (d) => {
+        !b && (d.key === "Enter" || d.key === " ") && (d.preventDefault(), c == null || c());
       },
-      className: n(
+      className: i(
+        "Bear-ListItem",
         "bear-flex bear-items-center bear-gap-3",
-        g ? "bear-py-1 bear-px-3" : "bear-py-2 bear-px-4",
-        d && !t && "bear-cursor-pointer",
-        (I || d) && !t && "hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800",
-        i && "bear-bg-primary-50 dark:bear-bg-primary-900/20",
-        t && "bear-opacity-50 bear-cursor-not-allowed",
-        o && "bear-border-b bear-border-gray-200 dark:bear-border-gray-700",
-        m
+        p ? "bear-py-1 bear-px-3" : "bear-py-2 bear-px-4",
+        x && !b && "bear-cursor-pointer",
+        (_ || x) && !b && "hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800",
+        n && "bear-bg-primary-50 dark:bear-bg-primary-900/20",
+        b && "bear-opacity-50 bear-cursor-not-allowed",
+        m && "bear-border-b bear-border-gray-200 dark:bear-border-gray-700",
+        h
       ),
-      "data-testid": u,
+      "data-testid": I,
       ...N,
       children: [
-        s && /* @__PURE__ */ b("div", { className: "bear-flex-shrink-0 bear-text-gray-500 dark:bear-text-gray-400", children: s }),
-        r || e ? /* @__PURE__ */ f("div", { className: "bear-flex-1 bear-min-w-0", children: [
-          r && /* @__PURE__ */ b("div", { className: "bear-text-gray-900 dark:bear-text-gray-100 bear-truncate", children: r }),
-          e && /* @__PURE__ */ b("div", { className: n(
+        t && /* @__PURE__ */ s("div", { className: "Bear-ListItem__leading bear-flex-shrink-0 bear-text-gray-500 dark:bear-text-gray-400", children: t }),
+        a || e ? /* @__PURE__ */ y("div", { className: "Bear-ListItem__content bear-flex-1 bear-min-w-0", children: [
+          a && /* @__PURE__ */ s("div", { className: "bear-text-gray-900 dark:bear-text-gray-100 bear-truncate", children: a }),
+          e && /* @__PURE__ */ s("div", { className: i(
             "bear-text-gray-500 dark:bear-text-gray-400 bear-truncate",
-            g ? "bear-text-xs" : "bear-text-sm"
+            p ? "bear-text-xs" : "bear-text-sm"
           ), children: e })
-        ] }) : /* @__PURE__ */ b("div", { className: "bear-flex-1 bear-min-w-0", children: h }),
-        a && /* @__PURE__ */ b("div", { className: "bear-flex-shrink-0 bear-text-gray-500 dark:bear-text-gray-400", children: a })
+        ] }) : /* @__PURE__ */ s("div", { className: "Bear-ListItem__content bear-flex-1 bear-min-w-0", children: u }),
+        f && /* @__PURE__ */ s(
+          "div",
+          {
+            className: "Bear-ListItem__secondary-action bear-flex-shrink-0 bear-text-gray-500 dark:bear-text-gray-400",
+            onClick: (d) => d.stopPropagation(),
+            onKeyDown: (d) => d.stopPropagation(),
+            children: f
+          }
+        )
       ]
     }
   );
 });
 j.displayName = "ListItem";
-const G = ({
-  sticky: r = !1,
+const V = ({
+  sticky: a = !1,
   inset: e = !1,
-  className: s,
-  children: a,
-  testId: i,
-  ...t
-}) => /* @__PURE__ */ b(
+  className: t,
+  children: r,
+  testId: o,
+  ...n
+}) => /* @__PURE__ */ s(
   "li",
   {
     role: "presentation",
-    className: n(
+    className: i(
       "bear-py-2 bear-px-4 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider",
       "bear-text-gray-500 dark:bear-text-gray-400",
       "bear-bg-gray-50 dark:bear-bg-gray-800/50",
-      r && "bear-sticky bear-top-0 bear-z-10",
+      a && "bear-sticky bear-top-0 bear-z-10",
       e && "bear-pl-12",
-      s
+      t
     ),
-    "data-testid": i,
-    ...t,
-    children: a
+    "data-testid": o,
+    ...n,
+    children: r
   }
-), V = ({
-  primary: r,
+), Z = ({
+  primary: a,
   secondary: e,
-  inset: s = !1,
-  dense: a = !1,
-  className: i,
-  ...t
-}) => /* @__PURE__ */ f(
+  inset: t = !1,
+  dense: r = !1,
+  className: o,
+  ...n
+}) => /* @__PURE__ */ y(
   "div",
   {
-    className: n(
+    className: i(
       "bear-flex-1 bear-min-w-0",
-      s && "bear-pl-9",
-      i
+      t && "bear-pl-9",
+      o
     ),
-    ...t,
+    ...n,
     children: [
-      r && /* @__PURE__ */ b("div", { className: "bear-text-gray-900 dark:bear-text-gray-100", children: r }),
-      e && /* @__PURE__ */ b("div", { className: n(
+      a && /* @__PURE__ */ s("div", { className: "bear-text-gray-900 dark:bear-text-gray-100", children: a }),
+      e && /* @__PURE__ */ s("div", { className: i(
         "bear-text-gray-500 dark:bear-text-gray-400",
-        a ? "bear-text-xs" : "bear-text-sm"
+        r ? "bear-text-xs" : "bear-text-sm"
       ), children: e })
     ]
   }
-), Z = ({
-  align: r = "center",
+), q = ({
+  align: a = "center",
   className: e,
-  children: s,
-  ...a
-}) => /* @__PURE__ */ b(
+  children: t,
+  ...r
+}) => /* @__PURE__ */ s(
   "div",
   {
-    className: n(
+    className: i(
       "bear-flex-shrink-0 bear-min-w-[36px]",
       "bear-text-gray-500 dark:bear-text-gray-400",
-      r === "top" && "bear-self-start bear-mt-1",
+      a === "top" && "bear-self-start bear-mt-1",
       e
     ),
-    ...a,
-    children: s
+    ...r,
+    children: t
   }
-), q = ({
-  selected: r = !1,
+), F = ({
+  selected: a = !1,
   disabled: e = !1,
-  dense: s = !1,
-  onClick: a,
-  className: i,
-  children: t,
-  ...x
-}) => /* @__PURE__ */ b(
+  dense: t = !1,
+  onClick: r,
+  className: o,
+  children: n,
+  ...b
+}) => /* @__PURE__ */ s(
   "div",
   {
     role: "button",
     tabIndex: e ? -1 : 0,
-    "aria-selected": r,
+    "aria-selected": a,
     "aria-disabled": e,
-    onClick: e ? void 0 : a,
-    onKeyDown: (o) => {
-      !e && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), a == null || a());
+    onClick: e ? void 0 : r,
+    onKeyDown: (l) => {
+      !e && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), r == null || r());
     },
-    className: n(
+    className: i(
       "bear-flex bear-items-center bear-gap-3 bear-w-full bear-text-left",
-      s ? "bear-py-1 bear-px-3" : "bear-py-2 bear-px-4",
+      t ? "bear-py-1 bear-px-3" : "bear-py-2 bear-px-4",
       "bear-cursor-pointer bear-transition-colors",
       "hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800",
-      r && "bear-bg-primary-50 dark:bear-bg-primary-900/20",
+      a && "bear-bg-primary-50 dark:bear-bg-primary-900/20",
       e && "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none",
-      i
+      o
     ),
-    ...x,
-    children: t
+    ...b,
+    children: n
   }
 );
 export {
-  P as List,
+  K as List,
   j as ListItem,
-  q as ListItemButton,
-  Z as ListItemIcon,
-  V as ListItemText,
-  G as ListSubheader
+  F as ListItemButton,
+  q as ListItemIcon,
+  Z as ListItemText,
+  V as ListSubheader
 };

package/dist/components/List/List.types.d.ts

@@ -24,6 +24,8 @@ export interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
     leading?: ReactNode;
     /** Trailing content (icon, button, badge) */
     trailing?: ReactNode;
+    /** Secondary action rendered after content; clicks do not trigger the row onClick */
+    secondaryAction?: ReactNode;
     /** Whether item is selected */
     selected?: boolean;
     /** Whether item is disabled */

package/dist/components/MessageList/MessageList.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime"),E=require("react"),g=require("../Avatar/Avatar.cjs"),a=require("../Typography/Typography.cjs"),S=require("./MessageList.const.cjs"),d=require("./MessageList.utils.cjs"),s=require("../../utils/cn.cjs"),w=require("../../utils/generateBearId.utils.cjs"),Y=require("../../utils/useBearId.cjs"),W=({id:m,testId:p,messages:n,currentUserId:y,groupWindowMs:N=S.MESSAGE_LIST_GROUP_WINDOW_MS,showDaySeparators:x=!0,showAvatars:B=!0,showTimestamps:M=!0,autoScroll:u=!0,height:r=S.MESSAGE_LIST_DEFAULT_HEIGHT,renderMessage:A,emptyState:j,formatDayLabel:l,formatTimestamp:L,translations:v,onNewMessagesClick:i,className:b})=>{const $=Y.useBearId("MessageList"),f=w.resolveBearId(m,$),o=E.useRef(null),G=E.useRef(!0),T=E.useRef(null),[P,O]=E.useState(!1),I={...S.MESSAGE_LIST_DEFAULT_TRANSLATIONS,...v},R=d.buildMessageListItems(n,y,N,x),U=e=>(l==null?void 0:l(e))??d.getDefaultDayLabel(e,I),h=e=>(L==null?void 0:L(e))??d.getDefaultTimestamp(e),C=e=>{const t=o.current;t&&t.scrollTo({top:t.scrollHeight,behavior:e?"smooth":"auto"})},q=()=>{const e=o.current;if(!e)return;const c=e.scrollHeight-e.scrollTop-e.clientHeight<=S.MESSAGE_LIST_BOTTOM_THRESHOLD_PX;G.current=c,c&&O(!1)};E.useEffect(()=>{const e=n.length>0?n[n.length-1].id:null,t=T.current===null,c=e!==null&&e!==T.current;if(T.current=e,!!c){if(t||u&&G.current){C(!t);return}O(!0)}},[n,u]);const D=()=>{C(!0),O(!1),i==null||i()},H=e=>_.jsxs("div",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__group`,S.MESSAGE_LIST_GROUP_CLASSES,e.isOwn&&S.MESSAGE_LIST_GROUP_OWN_CLASSES),children:[B&&!e.isOwn&&_.jsx(g.Avatar,{src:e.author.avatar,initials:e.author.name[0],size:"sm",className:"bear-flex-shrink-0"}),_.jsxs("div",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__group-body`,S.MESSAGE_LIST_GROUP_BODY_CLASSES,e.isOwn&&S.MESSAGE_LIST_GROUP_BODY_OWN_CLASSES),children:[!e.isOwn&&_.jsxs("div",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__meta`,S.MESSAGE_LIST_META_CLASSES),children:[_.jsx(a.Typography,{variant:"caption",component:"span",className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__author`,S.MESSAGE_LIST_AUTHOR_CLASSES),children:e.author.name}),M&&_.jsx(a.Typography,{variant:"caption",component:"span",className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__timestamp`,S.MESSAGE_LIST_TIMESTAMP_CLASSES),children:h(e.messages[0].timestamp)})]}),e.messages.map(t=>_.jsx("div",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__bubble`,S.MESSAGE_LIST_BUBBLE_CLASSES,e.isOwn&&`${S.MESSAGE_LIST_ROOT_CLASS}__bubble--own`,e.isOwn&&S.MESSAGE_LIST_BUBBLE_OWN_CLASSES),children:(A==null?void 0:A(t))??t.content},t.id)),e.isOwn&&M&&_.jsx(a.Typography,{variant:"caption",component:"span",className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__timestamp`,S.MESSAGE_LIST_TIMESTAMP_CLASSES),children:h(e.messages[e.messages.length-1].timestamp)})]})]},e.key);return _.jsxs("div",{id:f,"data-testid":p,className:s.cn(S.MESSAGE_LIST_ROOT_CLASS,S.MESSAGE_LIST_BASE_CLASSES,b),style:{height:typeof r=="number"?`${r}px`:r},children:[_.jsxs("div",{ref:o,onScroll:q,className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__scroller`,S.MESSAGE_LIST_SCROLLER_CLASSES),role:"log","aria-live":"polite",children:[R.length===0&&_.jsx("div",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__empty`,S.MESSAGE_LIST_EMPTY_CLASSES),children:j??_.jsx(a.Typography,{variant:"body2",component:"span",children:I.emptyLabel})}),R.map(e=>e.kind==="day"?_.jsxs("div",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__day-separator`,S.MESSAGE_LIST_DAY_SEPARATOR_CLASSES),children:[_.jsx("span",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__day-line`,S.MESSAGE_LIST_DAY_LINE_CLASSES)}),_.jsx("span",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__day-label`,S.MESSAGE_LIST_DAY_LABEL_CLASSES),children:U(e.date)}),_.jsx("span",{className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__day-line`,S.MESSAGE_LIST_DAY_LINE_CLASSES)})]},e.key):H(e))]}),P&&_.jsx("button",{type:"button",onClick:D,className:s.cn(`${S.MESSAGE_LIST_ROOT_CLASS}__new-messages`,S.MESSAGE_LIST_NEW_MESSAGES_CLASSES),children:I.newMessages})]})};exports.MessageList=W;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),_=require("react"),eS=require("../Avatar/Avatar.cjs"),a=require("../Typography/Typography.cjs"),e=require("./MessageList.const.cjs"),A=require("./MessageList.utils.cjs"),n=require("../../utils/cn.cjs"),tS=require("../../utils/generateBearId.utils.cjs"),sS=require("../../utils/useBearId.cjs"),nS=({id:H,testId:B,messages:c,currentUserId:b,groupWindowMs:$=e.MESSAGE_LIST_GROUP_WINDOW_MS,showDaySeparators:g=!0,showAvatars:w=!0,showTimestamps:h=!0,autoScroll:p=!0,virtualized:P,overscan:U=e.MESSAGE_LIST_OVERSCAN,height:E=e.MESSAGE_LIST_DEFAULT_HEIGHT,renderMessage:L,emptyState:D,formatDayLabel:T,formatTimestamp:u,translations:q,onNewMessagesClick:d,className:Y})=>{const W=sS.useBearId("MessageList"),F=tS.resolveBearId(H,W),l=_.useRef(null),C=_.useRef(!0),I=_.useRef(null),O=_.useRef(null),M=_.useRef(null),[V,G]=_.useState(!1),[k,m]=_.useState(0),[z,f]=_.useState(typeof E=="number"?E:e.MESSAGE_LIST_DEFAULT_HEIGHT),R={...e.MESSAGE_LIST_DEFAULT_TRANSLATIONS,...q},o=A.buildMessageListItems(c,b,$,g),X=S=>(T==null?void 0:T(S))??A.getDefaultDayLabel(S,R),y=S=>(u==null?void 0:u(S))??A.getDefaultTimestamp(S),v=P??c.length>=e.MESSAGE_LIST_VIRTUALIZE_THRESHOLD,N=S=>{const s=l.current;s&&s.scrollTo({top:s.scrollHeight,behavior:S?"smooth":"auto"})},Z=()=>{const S=l.current;if(!S)return;m(S.scrollTop),f(S.clientHeight);const r=S.scrollHeight-S.scrollTop-S.clientHeight<=e.MESSAGE_LIST_BOTTOM_THRESHOLD_PX;C.current=r,r&&G(!1)};_.useEffect(()=>{const S=l.current;S&&f(S.clientHeight)},[E]),_.useEffect(()=>{const S=c.length>0?c[0].id:null,s=c.length>0?c[c.length-1].id:null,r=I.current===null,Q=S!==null&&O.current!==null&&S!==O.current,SS=s!==null&&s!==I.current;if(Q&&l.current&&(M.current=l.current.scrollHeight),O.current=S,I.current=s,!!SS){if(r||p&&C.current){N(!r);return}G(!0)}},[c,p]),_.useLayoutEffect(()=>{const S=l.current,s=M.current;if(!S||s===null)return;const r=S.scrollHeight-s;r>0&&(S.scrollTop+=r,m(S.scrollTop)),M.current=null},[c]);const J=()=>{N(!0),G(!1),d==null||d()},K=S=>t.jsxs("div",{className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__group`,e.MESSAGE_LIST_GROUP_CLASSES,S.isOwn&&e.MESSAGE_LIST_GROUP_OWN_CLASSES),children:[w&&!S.isOwn&&t.jsx(eS.Avatar,{src:S.author.avatar,initials:S.author.name[0],size:"sm",className:"bear-flex-shrink-0"}),t.jsxs("div",{className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__group-body`,e.MESSAGE_LIST_GROUP_BODY_CLASSES,S.isOwn&&e.MESSAGE_LIST_GROUP_BODY_OWN_CLASSES),children:[!S.isOwn&&t.jsxs("div",{className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__meta`,e.MESSAGE_LIST_META_CLASSES),children:[t.jsx(a.Typography,{variant:"caption",component:"span",className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__author`,e.MESSAGE_LIST_AUTHOR_CLASSES),children:S.author.name}),h&&t.jsx(a.Typography,{variant:"caption",component:"span",className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__timestamp`,e.MESSAGE_LIST_TIMESTAMP_CLASSES),children:y(S.messages[0].timestamp)})]}),S.messages.map(s=>t.jsx("div",{className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__bubble`,e.MESSAGE_LIST_BUBBLE_CLASSES,S.isOwn&&`${e.MESSAGE_LIST_ROOT_CLASS}__bubble--own`,S.isOwn&&e.MESSAGE_LIST_BUBBLE_OWN_CLASSES),children:(L==null?void 0:L(s))??s.content},s.id)),S.isOwn&&h&&t.jsx(a.Typography,{variant:"caption",component:"span",className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__timestamp`,e.MESSAGE_LIST_TIMESTAMP_CLASSES),children:y(S.messages[S.messages.length-1].timestamp)})]})]},S.key),x=S=>S.kind==="day"?t.jsxs("div",{className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__day-separator`,e.MESSAGE_LIST_DAY_SEPARATOR_CLASSES),children:[t.jsx("span",{className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__day-line`,e.MESSAGE_LIST_DAY_LINE_CLASSES)}),t.jsx("span",{className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__day-label`,e.MESSAGE_LIST_DAY_LABEL_CLASSES),children:X(S.date)}),t.jsx("span",{className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__day-line`,e.MESSAGE_LIST_DAY_LINE_CLASSES)})]},S.key):K(S),i=v?A.getMessageListWindow(o,k,z,U):null,j=i===null?o:o.slice(i.startIndex,i.endIndex+1);return t.jsxs("div",{id:F,"data-testid":B,className:n.cn(e.MESSAGE_LIST_ROOT_CLASS,e.MESSAGE_LIST_BASE_CLASSES,Y),style:{height:typeof E=="number"?`${E}px`:E},children:[t.jsxs("div",{ref:l,onScroll:Z,className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__scroller`,e.MESSAGE_LIST_SCROLLER_CLASSES),role:"log","aria-live":"polite",children:[o.length===0&&t.jsx("div",{className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__empty`,e.MESSAGE_LIST_EMPTY_CLASSES),children:D??t.jsx(a.Typography,{variant:"body2",component:"span",children:R.emptyLabel})}),v&&i?t.jsx("div",{className:`${e.MESSAGE_LIST_ROOT_CLASS}__virtual`,style:{height:i.totalHeight,position:"relative"},children:t.jsx("div",{style:{transform:`translateY(${i.offsetTop}px)`},children:j.map(S=>x(S))})}):j.map(S=>x(S))]}),V&&t.jsx("button",{type:"button",onClick:J,className:n.cn(`${e.MESSAGE_LIST_ROOT_CLASS}__new-messages`,e.MESSAGE_LIST_NEW_MESSAGES_CLASSES),children:R.newMessages})]})};exports.MessageList=nS;

package/dist/components/MessageList/MessageList.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S="Bear-MessageList",E=400,_=300*1e3,e=40,A=1440*60*1e3,L={newMessages:"New messages",today:"Today",yesterday:"Yesterday",emptyLabel:"No messages yet"},r="bear-relative bear-flex bear-flex-col bear-rounded-xl bear-border bear-overflow-hidden",a="bear-flex-1 bear-overflow-y-auto bear-p-4 bear-flex bear-flex-col bear-gap-3",T="bear-flex bear-items-center bear-gap-3 bear-my-1",b="bear-flex-1 bear-h-px",t="bear-text-xs bear-font-medium bear-whitespace-nowrap",M="bear-flex bear-gap-2",s="bear-flex-row-reverse",G="bear-flex bear-flex-col bear-gap-1 bear-min-w-0 bear-flex-1",o="bear-items-end",I="bear-px-4 bear-py-2 bear-rounded-2xl bear-text-sm bear-max-w-[70%] bear-w-fit",n="bear-self-end",O="bear-flex bear-items-baseline bear-gap-2 bear-mb-1",C="bear-text-xs bear-font-semibold",c="bear-text-xs",l="bear-absolute-x-center bear-bottom-4 bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-rounded-full bear-border-none bear-cursor-pointer bear-shadow-lg bear-text-xs bear-font-medium hover:bear-opacity-90",x="bear-flex-1 bear-flex bear-items-center bear-justify-center bear-text-sm";exports.MESSAGE_LIST_AUTHOR_CLASSES=C;exports.MESSAGE_LIST_BASE_CLASSES=r;exports.MESSAGE_LIST_BOTTOM_THRESHOLD_PX=e;exports.MESSAGE_LIST_BUBBLE_CLASSES=I;exports.MESSAGE_LIST_BUBBLE_OWN_CLASSES=n;exports.MESSAGE_LIST_DAY_LABEL_CLASSES=t;exports.MESSAGE_LIST_DAY_LINE_CLASSES=b;exports.MESSAGE_LIST_DAY_SEPARATOR_CLASSES=T;exports.MESSAGE_LIST_DEFAULT_HEIGHT=E;exports.MESSAGE_LIST_DEFAULT_TRANSLATIONS=L;exports.MESSAGE_LIST_EMPTY_CLASSES=x;exports.MESSAGE_LIST_GROUP_BODY_CLASSES=G;exports.MESSAGE_LIST_GROUP_BODY_OWN_CLASSES=o;exports.MESSAGE_LIST_GROUP_CLASSES=M;exports.MESSAGE_LIST_GROUP_OWN_CLASSES=s;exports.MESSAGE_LIST_GROUP_WINDOW_MS=_;exports.MESSAGE_LIST_META_CLASSES=O;exports.MESSAGE_LIST_MS_PER_DAY=A;exports.MESSAGE_LIST_NEW_MESSAGES_CLASSES=l;exports.MESSAGE_LIST_ROOT_CLASS=S;exports.MESSAGE_LIST_SCROLLER_CLASSES=a;exports.MESSAGE_LIST_TIMESTAMP_CLASSES=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S="Bear-MessageList",E=400,_=300*1e3,e=40,A=1440*60*1e3,L={newMessages:"New messages",today:"Today",yesterday:"Yesterday",emptyLabel:"No messages yet"},T="bear-relative bear-flex bear-flex-col bear-rounded-xl bear-border bear-overflow-hidden",r="bear-flex-1 bear-overflow-y-auto bear-p-4 bear-flex bear-flex-col bear-gap-3",a="bear-flex bear-items-center bear-gap-3 bear-my-1",M="bear-flex-1 bear-h-px",I="bear-text-xs bear-font-medium bear-whitespace-nowrap",t="bear-flex bear-gap-2",G="bear-flex-row-reverse",b="bear-flex bear-flex-col bear-gap-1 bear-min-w-0 bear-flex-1",s="bear-items-end",o="bear-px-4 bear-py-2 bear-rounded-2xl bear-text-sm bear-max-w-[70%] bear-w-fit",n="bear-self-end",O="bear-flex bear-items-baseline bear-gap-2 bear-mb-1",c="bear-text-xs bear-font-semibold",C="bear-text-xs",R="bear-absolute-x-center bear-bottom-4 bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-rounded-full bear-border-none bear-cursor-pointer bear-shadow-lg bear-text-xs bear-font-medium hover:bear-opacity-90",l="bear-flex-1 bear-flex bear-items-center bear-justify-center bear-text-sm",x=40,P=6,B=36,f=56,U=36,D=12;exports.MESSAGE_LIST_AUTHOR_CLASSES=c;exports.MESSAGE_LIST_BASE_CLASSES=T;exports.MESSAGE_LIST_BOTTOM_THRESHOLD_PX=e;exports.MESSAGE_LIST_BUBBLE_CLASSES=o;exports.MESSAGE_LIST_BUBBLE_ESTIMATE_PX=U;exports.MESSAGE_LIST_BUBBLE_OWN_CLASSES=n;exports.MESSAGE_LIST_DAY_ESTIMATE_PX=B;exports.MESSAGE_LIST_DAY_LABEL_CLASSES=I;exports.MESSAGE_LIST_DAY_LINE_CLASSES=M;exports.MESSAGE_LIST_DAY_SEPARATOR_CLASSES=a;exports.MESSAGE_LIST_DEFAULT_HEIGHT=E;exports.MESSAGE_LIST_DEFAULT_TRANSLATIONS=L;exports.MESSAGE_LIST_EMPTY_CLASSES=l;exports.MESSAGE_LIST_GROUP_BASE_ESTIMATE_PX=f;exports.MESSAGE_LIST_GROUP_BODY_CLASSES=b;exports.MESSAGE_LIST_GROUP_BODY_OWN_CLASSES=s;exports.MESSAGE_LIST_GROUP_CLASSES=t;exports.MESSAGE_LIST_GROUP_OWN_CLASSES=G;exports.MESSAGE_LIST_GROUP_WINDOW_MS=_;exports.MESSAGE_LIST_ITEM_GAP_PX=D;exports.MESSAGE_LIST_META_CLASSES=O;exports.MESSAGE_LIST_MS_PER_DAY=A;exports.MESSAGE_LIST_NEW_MESSAGES_CLASSES=R;exports.MESSAGE_LIST_OVERSCAN=P;exports.MESSAGE_LIST_ROOT_CLASS=S;exports.MESSAGE_LIST_SCROLLER_CLASSES=r;exports.MESSAGE_LIST_TIMESTAMP_CLASSES=C;exports.MESSAGE_LIST_VIRTUALIZE_THRESHOLD=x;

package/dist/components/MessageList/MessageList.const.d.ts

@@ -21,3 +21,9 @@ export declare const MESSAGE_LIST_AUTHOR_CLASSES = "bear-text-xs bear-font-semib
 export declare const MESSAGE_LIST_TIMESTAMP_CLASSES = "bear-text-xs";
 export declare const MESSAGE_LIST_NEW_MESSAGES_CLASSES = "bear-absolute-x-center bear-bottom-4 bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-rounded-full bear-border-none bear-cursor-pointer bear-shadow-lg bear-text-xs bear-font-medium hover:bear-opacity-90";
 export declare const MESSAGE_LIST_EMPTY_CLASSES = "bear-flex-1 bear-flex bear-items-center bear-justify-center bear-text-sm";
+export declare const MESSAGE_LIST_VIRTUALIZE_THRESHOLD = 40;
+export declare const MESSAGE_LIST_OVERSCAN = 6;
+export declare const MESSAGE_LIST_DAY_ESTIMATE_PX = 36;
+export declare const MESSAGE_LIST_GROUP_BASE_ESTIMATE_PX = 56;
+export declare const MESSAGE_LIST_BUBBLE_ESTIMATE_PX = 36;
+export declare const MESSAGE_LIST_ITEM_GAP_PX = 12;

package/dist/components/MessageList/MessageList.const.js

@@ -1,30 +1,36 @@
-const e = "Bear-MessageList", S = 400, r = 3e5, a = 40, E = 864e5, _ = {
+const S = "Bear-MessageList", e = 400, E = 3e5, _ = 40, r = 864e5, a = {
   newMessages: "New messages",
   today: "Today",
   yesterday: "Yesterday",
   emptyLabel: "No messages yet"
-}, b = "bear-relative bear-flex bear-flex-col bear-rounded-xl bear-border bear-overflow-hidden", t = "bear-flex-1 bear-overflow-y-auto bear-p-4 bear-flex bear-flex-col bear-gap-3", s = "bear-flex bear-items-center bear-gap-3 bear-my-1", A = "bear-flex-1 bear-h-px", o = "bear-text-xs bear-font-medium bear-whitespace-nowrap", L = "bear-flex bear-gap-2", n = "bear-flex-row-reverse", T = "bear-flex bear-flex-col bear-gap-1 bear-min-w-0 bear-flex-1", x = "bear-items-end", c = "bear-px-4 bear-py-2 bear-rounded-2xl bear-text-sm bear-max-w-[70%] bear-w-fit", l = "bear-self-end", M = "bear-flex bear-items-baseline bear-gap-2 bear-mb-1", G = "bear-text-xs bear-font-semibold", I = "bear-text-xs", f = "bear-absolute-x-center bear-bottom-4 bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-rounded-full bear-border-none bear-cursor-pointer bear-shadow-lg bear-text-xs bear-font-medium hover:bear-opacity-90", d = "bear-flex-1 bear-flex bear-items-center bear-justify-center bear-text-sm";
+}, b = "bear-relative bear-flex bear-flex-col bear-rounded-xl bear-border bear-overflow-hidden", t = "bear-flex-1 bear-overflow-y-auto bear-p-4 bear-flex bear-flex-col bear-gap-3", A = "bear-flex bear-items-center bear-gap-3 bear-my-1", s = "bear-flex-1 bear-h-px", L = "bear-text-xs bear-font-medium bear-whitespace-nowrap", o = "bear-flex bear-gap-2", T = "bear-flex-row-reverse", n = "bear-flex bear-flex-col bear-gap-1 bear-min-w-0 bear-flex-1", M = "bear-items-end", c = "bear-px-4 bear-py-2 bear-rounded-2xl bear-text-sm bear-max-w-[70%] bear-w-fit", I = "bear-self-end", G = "bear-flex bear-items-baseline bear-gap-2 bear-mb-1", x = "bear-text-xs bear-font-semibold", l = "bear-text-xs", f = "bear-absolute-x-center bear-bottom-4 bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-rounded-full bear-border-none bear-cursor-pointer bear-shadow-lg bear-text-xs bear-font-medium hover:bear-opacity-90", O = "bear-flex-1 bear-flex bear-items-center bear-justify-center bear-text-sm", d = 40, m = 6, C = 36, i = 56, p = 36, R = 12;
 export {
-  G as MESSAGE_LIST_AUTHOR_CLASSES,
+  x as MESSAGE_LIST_AUTHOR_CLASSES,
   b as MESSAGE_LIST_BASE_CLASSES,
-  a as MESSAGE_LIST_BOTTOM_THRESHOLD_PX,
+  _ as MESSAGE_LIST_BOTTOM_THRESHOLD_PX,
   c as MESSAGE_LIST_BUBBLE_CLASSES,
-  l as MESSAGE_LIST_BUBBLE_OWN_CLASSES,
-  o as MESSAGE_LIST_DAY_LABEL_CLASSES,
-  A as MESSAGE_LIST_DAY_LINE_CLASSES,
-  s as MESSAGE_LIST_DAY_SEPARATOR_CLASSES,
-  S as MESSAGE_LIST_DEFAULT_HEIGHT,
-  _ as MESSAGE_LIST_DEFAULT_TRANSLATIONS,
-  d as MESSAGE_LIST_EMPTY_CLASSES,
-  T as MESSAGE_LIST_GROUP_BODY_CLASSES,
-  x as MESSAGE_LIST_GROUP_BODY_OWN_CLASSES,
-  L as MESSAGE_LIST_GROUP_CLASSES,
-  n as MESSAGE_LIST_GROUP_OWN_CLASSES,
-  r as MESSAGE_LIST_GROUP_WINDOW_MS,
-  M as MESSAGE_LIST_META_CLASSES,
-  E as MESSAGE_LIST_MS_PER_DAY,
+  p as MESSAGE_LIST_BUBBLE_ESTIMATE_PX,
+  I as MESSAGE_LIST_BUBBLE_OWN_CLASSES,
+  C as MESSAGE_LIST_DAY_ESTIMATE_PX,
+  L as MESSAGE_LIST_DAY_LABEL_CLASSES,
+  s as MESSAGE_LIST_DAY_LINE_CLASSES,
+  A as MESSAGE_LIST_DAY_SEPARATOR_CLASSES,
+  e as MESSAGE_LIST_DEFAULT_HEIGHT,
+  a as MESSAGE_LIST_DEFAULT_TRANSLATIONS,
+  O as MESSAGE_LIST_EMPTY_CLASSES,
+  i as MESSAGE_LIST_GROUP_BASE_ESTIMATE_PX,
+  n as MESSAGE_LIST_GROUP_BODY_CLASSES,
+  M as MESSAGE_LIST_GROUP_BODY_OWN_CLASSES,
+  o as MESSAGE_LIST_GROUP_CLASSES,
+  T as MESSAGE_LIST_GROUP_OWN_CLASSES,
+  E as MESSAGE_LIST_GROUP_WINDOW_MS,
+  R as MESSAGE_LIST_ITEM_GAP_PX,
+  G as MESSAGE_LIST_META_CLASSES,
+  r as MESSAGE_LIST_MS_PER_DAY,
   f as MESSAGE_LIST_NEW_MESSAGES_CLASSES,
-  e as MESSAGE_LIST_ROOT_CLASS,
+  m as MESSAGE_LIST_OVERSCAN,
+  S as MESSAGE_LIST_ROOT_CLASS,
   t as MESSAGE_LIST_SCROLLER_CLASSES,
-  I as MESSAGE_LIST_TIMESTAMP_CLASSES
+  l as MESSAGE_LIST_TIMESTAMP_CLASSES,
+  d as MESSAGE_LIST_VIRTUALIZE_THRESHOLD
 };

package/dist/components/MessageList/MessageList.d.ts

@@ -1,19 +1,3 @@
 import { FC } from 'react';
 import { MessageListProps } from './MessageList.types';
-/**
- * MessageList - Chat message list with consecutive-author grouping,
- * day separators, and auto-scroll with a "new messages" affordance.
- *
- * Rendering is plain (non-virtualized); virtualization is planned as
- * future work for very long conversations.
- *
- * @example
- * ```tsx
- * <MessageList
- *   messages={messages}
- *   currentUserId="me"
- *   height={420}
- * />
- * ```
- */
 export declare const MessageList: FC<MessageListProps>;