@linktr.ee/messaging-react 4.3.1 → 4.3.2-rc-1787593676

package/package.json

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

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>