@linktr.ee/messaging-react 4.2.1 → 4.2.2-rc-1787413492

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Cd-uS2hf.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessagingLoggerProvider=e.MessagingLoggerProvider;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;exports.TipMessage=e.TipMessage;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isTipMessage=e.isTipMessage;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessaging=e.useMessaging;exports.useMessagingLogger=e.useMessagingLogger;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-B_tqW4H-.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessagingLoggerProvider=e.MessagingLoggerProvider;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;exports.TipMessage=e.TipMessage;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isTipMessage=e.isTipMessage;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessaging=e.useMessaging;exports.useMessagingLogger=e.useMessagingLogger;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as n, d as o, e as g, F as r, f as m, L as l, h as M, M as c, i as L, j as h, k as p, l as u, m as d, R as v, T as C, n as A, p as k, q as F, s as b, t as P, u as T, v as f, w as x, x as y, y as z, o as S, z as q, B, D, E, G as R, H as w, I as G, J as I } from "./index-wG3iH9e6.js";
+import { a as e, b as t, C as i, c as n, d as o, e as g, F as r, f as m, L as l, h as M, M as c, i as L, j as h, k as p, l as u, m as d, R as v, T as C, n as A, p as k, q as F, s as b, t as P, u as T, v as f, w as x, x as y, y as z, o as S, z as q, B, D, E, G as R, H as w, I as G, J as I } from "./index-BIT5ol4i.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.2.1",
+  "version": "4.2.2-rc-1787413492",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "^2.5.0",
+    "@linktr.ee/messaging-core": "2.5.0-rc-1787413492",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/MessageAttachment/_shared/MediaStackGrid.test.tsx

@@ -47,6 +47,34 @@ describe('MediaStackGrid', () => {
     })
   })
 
+  it.each([
+    [2, '+3', 'tile 2'],
+    [3, '+2', 'tile 3'],
+  ])(
+    'shows overflow on the last visible tile when maxVisible is %s',
+    (maxVisible, badge, lastTile) => {
+      const { container } = renderWithProviders(
+        <MediaStackGrid tiles={tiles(5)} maxVisible={maxVisible} />
+      )
+      expect(container.querySelectorAll('span')).toHaveLength(maxVisible)
+      expect(screen.getByText(badge)).toBeInTheDocument()
+      expect(screen.getByText(badge).parentElement).toHaveTextContent(lastTile)
+    }
+  )
+
+  it('shows overflow on the single visible tile', () => {
+    const { container } = renderWithProviders(
+      <MediaStackGrid tiles={tiles(3)} maxVisible={1} />
+    )
+    expect(container.querySelectorAll('span')).toHaveLength(1)
+    expect(screen.getByText('+2').parentElement).toHaveTextContent('tile 1')
+  })
+
+  it('does not show overflow when all tiles are visible', () => {
+    renderWithProviders(<MediaStackGrid tiles={tiles(3)} maxVisible={3} />)
+    expect(screen.queryByText(/^\+/)).toBeNull()
+  })
+
   it('renders activatable buttons with labels and indexes', () => {
     const onActivate = vi.fn()
     renderWithProviders(

package/src/components/MessageAttachment/_shared/MediaStackGrid.tsx

@@ -118,6 +118,12 @@ const MediaStackGrid: React.FC<MediaStackGridProps> = ({
 
   const visible = tiles.slice(0, Math.min(total, maxVisible))
   const overflow = total - visible.length
+  const overflowBadge =
+    overflow > 0 ? (
+      <div className="absolute inset-0 flex items-center justify-center bg-black/55 text-2xl font-semibold text-white">
+        +{overflow}
+      </div>
+    ) : null
 
   const renderTile = (
     tile: MediaStackTile,
@@ -174,7 +180,7 @@ const MediaStackGrid: React.FC<MediaStackGridProps> = ({
         )}
         style={singleTileStyle}
       >
-        {renderTile(visible[0], 0)}
+        {renderTile(visible[0], 0, overflowBadge)}
       </div>
     )
   }
@@ -187,7 +193,13 @@ const MediaStackGrid: React.FC<MediaStackGridProps> = ({
           className
         )}
       >
-        {visible.map((tile, index) => renderTile(tile, index))}
+        {visible.map((tile, index) =>
+          renderTile(
+            tile,
+            index,
+            index === visible.length - 1 ? overflowBadge : null
+          )
+        )}
       </div>
     )
   }
@@ -202,7 +214,7 @@ const MediaStackGrid: React.FC<MediaStackGridProps> = ({
       >
         <div className="row-span-2">{renderTile(visible[0], 0)}</div>
         {renderTile(visible[1], 1)}
-        {renderTile(visible[2], 2)}
+        {renderTile(visible[2], 2, overflowBadge)}
       </div>
     )
   }
@@ -227,11 +239,7 @@ const MediaStackGrid: React.FC<MediaStackGridProps> = ({
         return renderTile(
           tile,
           index,
-          isLastWithOverflow ? (
-            <div className="absolute inset-0 flex items-center justify-center bg-black/55 text-2xl font-semibold text-white">
-              +{overflow}
-            </div>
-          ) : null
+          isLastWithOverflow ? overflowBadge : null
         )
       })}
     </div>