@linktr.ee/messaging-react 4.1.7-rc-1787240421 → 4.1.7-rc-1787247439

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.1.7-rc-1787240421",
+  "version": "4.1.7-rc-1787247439",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,19 +50,17 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.5.0-rc-1787240421",
+    "@linktr.ee/messaging-core": "2.5.0-rc-1787247439",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {
     "@linktr.ee/arbor": "25.0.0",
     "@linktr.ee/design-tokens": "14.0.0",
-    "@storybook/addon-essentials": "^8.5.0",
-    "@storybook/addon-interactions": "^8.5.0",
-    "@storybook/addon-links": "^8.5.0",
-    "@storybook/react": "^8.5.0",
-    "@storybook/react-vite": "^8.5.0",
-    "@storybook/test": "^8.5.0",
+    "@storybook/addon-docs": "10.5.7",
+    "@storybook/addon-links": "10.5.7",
+    "@storybook/react": "10.5.7",
+    "@storybook/react-vite": "10.5.7",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.1.5",
@@ -79,7 +77,7 @@
     "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^8.5.0",
+    "storybook": "10.5.7",
     "stream-chat": "^9.41.1",
     "stream-chat-react": "^13.14.5",
     "tailwindcss": "^3.4.17",

package/src/components/MessageAttachment/MessageAttachment.behavior.test.tsx

@@ -0,0 +1,182 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../test/utils'
+
+import { triggerDownload } from './_shared/triggerDownload'
+import { bubbleVariantForState, bubbleGroupPositionFromStream } from './types'
+
+import MessageAttachment from '.'
+
+vi.mock('./_shared/triggerDownload', () => ({
+  triggerDownload: vi.fn(() => Promise.resolve()),
+}))
+
+const mockedDownload = vi.mocked(triggerDownload)
+
+describe('MessageAttachment behavior', () => {
+  it('renders file rows with precedence, fallback names, and cancellation', () => {
+    const onClick = vi.fn(() => false)
+    const { rerender } = renderWithProviders(
+      <MessageAttachment.File.Sent
+        src="https://cdn.example.com/fallback.txt"
+        filename="fallback.txt"
+        items={[
+          {
+            src: 'https://cdn.example.com/first.pdf',
+            filename: 'first.pdf',
+          },
+          { src: 'https://cdn.example.com/second.pdf' },
+        ]}
+        onClick={onClick}
+      />
+    )
+    expect(screen.getByText('first.pdf')).toBeInTheDocument()
+    expect(screen.getByText('second.pdf')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Download first.pdf' }))
+    expect(onClick).toHaveBeenCalledWith(0)
+    expect(mockedDownload).not.toHaveBeenCalled()
+
+    rerender(
+      <MessageAttachment.File.Sent src="https://cdn.example.com/fallback.txt" />
+    )
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Download fallback.txt' })
+    )
+    expect(mockedDownload).toHaveBeenCalledWith(
+      'https://cdn.example.com/fallback.txt',
+      'fallback.txt'
+    )
+  })
+
+  it('renders no file when inputs are absent and supports composer dismissal', () => {
+    const { container } = renderWithProviders(
+      <MessageAttachment.File.Received />
+    )
+    expect(container.firstChild).toBeNull()
+    const onDismiss = vi.fn()
+    renderWithProviders(
+      <MessageAttachment.File.Composer
+        src="https://cdn.example.com/file"
+        onDismiss={onDismiss}
+      />
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
+    expect(onDismiss).toHaveBeenCalledOnce()
+  })
+
+  it('renders image stacks, forwards loading, and supports click cancellation', () => {
+    const onClick = vi.fn(() => false)
+    renderWithProviders(
+      <MessageAttachment.Image.Sent
+        src="https://cdn.example.com/fallback.jpg"
+        items={[
+          { src: 'https://cdn.example.com/one.jpg' },
+          { src: 'https://cdn.example.com/two.jpg', loading: 'eager' },
+        ]}
+        loading="lazy"
+        onClick={onClick}
+      />
+    )
+    expect(screen.getAllByRole('img')[0]).toHaveAttribute('loading', 'lazy')
+    expect(screen.getAllByRole('img')).toHaveLength(2)
+    fireEvent.click(screen.getByRole('button', { name: 'Open image 2 of 2' }))
+    expect(onClick).toHaveBeenCalledWith(1)
+    expect(screen.queryByTestId('image-viewer')).not.toHaveAttribute('open')
+  })
+
+  it('opens images at the clicked index and suffixes a shared filename', () => {
+    renderWithProviders(
+      <MessageAttachment.Image.Sent
+        filename="photos.jpg"
+        items={[
+          { src: 'https://cdn.example.com/one.jpg' },
+          { src: 'https://cdn.example.com/two.jpg' },
+        ]}
+      />
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Open image 2 of 2' }))
+    expect(screen.getByTestId('image-viewer')).toHaveAttribute(
+      'aria-label',
+      'photos.jpg (2)'
+    )
+    expect(screen.getByRole('img', { name: 'photos.jpg (2)' })).toHaveAttribute(
+      'src',
+      'https://cdn.example.com/two.jpg'
+    )
+  })
+
+  it('renders video poster and fallback, and wires viewer attributes', () => {
+    const onDismiss = vi.fn()
+    const { rerender } = renderWithProviders(
+      <MessageAttachment.Video.Composer
+        src="https://cdn.example.com/video.mp4"
+        poster="/poster.jpg"
+        mimeType="video/mp4"
+        preload="auto"
+        onDismiss={onDismiss}
+      />
+    )
+    expect(
+      screen.getByRole('img', { name: 'Video 1 thumbnail' })
+    ).toHaveAttribute('src', '/poster.jpg')
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
+    expect(onDismiss).toHaveBeenCalledOnce()
+    rerender(
+      <MessageAttachment.Video.Sent
+        items={[{ src: 'https://cdn.example.com/video.mp4' }]}
+      />
+    )
+    expect(screen.getByLabelText('Play video 1 of 1')).toBeInTheDocument()
+  })
+
+  it('supports PDF titles, download actions, dismiss, and viewer index', () => {
+    const onDismiss = vi.fn()
+    renderWithProviders(
+      <MessageAttachment.Pdf.Composer
+        src="https://cdn.example.com/report.pdf"
+        title="Quarterly report"
+        onDismiss={onDismiss}
+      />
+    )
+    expect(screen.getByText('Quarterly report')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
+    expect(onDismiss).toHaveBeenCalledOnce()
+
+    renderWithProviders(
+      <MessageAttachment.Pdf.Sent
+        items={[
+          { src: 'https://cdn.example.com/one.pdf' },
+          { src: 'https://cdn.example.com/two.pdf', filename: 'two.pdf' },
+        ]}
+      />
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Open two.pdf' }))
+    expect(screen.getAllByTestId('pdf-viewer').at(-1)).toHaveAttribute(
+      'aria-label',
+      'two.pdf'
+    )
+  })
+
+  it('maps state and stream grouping contracts', () => {
+    expect(bubbleVariantForState('composer')).toBe('dark')
+    expect(bubbleVariantForState('sent')).toBe('dark')
+    expect(bubbleVariantForState('received')).toBe('light')
+    expect(bubbleGroupPositionFromStream({})).toBe('single')
+    expect(
+      bubbleGroupPositionFromStream({
+        groupedByUser: true,
+        firstOfGroup: true,
+        endOfGroup: true,
+      })
+    ).toBe('single')
+    expect(
+      bubbleGroupPositionFromStream({ groupedByUser: true, firstOfGroup: true })
+    ).toBe('first')
+    expect(
+      bubbleGroupPositionFromStream({ groupedByUser: true, endOfGroup: true })
+    ).toBe('end')
+    expect(bubbleGroupPositionFromStream({ groupedByUser: true })).toBe(
+      'middle'
+    )
+  })
+})

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

@@ -0,0 +1,111 @@
+import { describe, expect, it } from 'vitest'
+
+import { renderWithProviders, screen } from '../../../test/utils'
+
+import Bubble from './Bubble'
+
+describe('Bubble', () => {
+  it.each([
+    [undefined, false],
+    [null, false],
+    ['', false],
+    ['caption', true],
+    [0, true],
+  ])('renders caption %j according to its value', (text, present) => {
+    renderWithProviders(
+      <Bubble variant="dark" text={text} data-testid="bubble">
+        <span>child</span>
+      </Bubble>
+    )
+    const bubble = screen.getByTestId('bubble')
+    if (present) expect(bubble.querySelector('p')).not.toBeNull()
+    else expect(bubble.querySelector('p')).toBeNull()
+    expect(bubble).toHaveClass(present ? 'pb-0' : 'py-2')
+  })
+
+  it('maps variants, group positions, borders, and forwarded content', () => {
+    const { rerender } = renderWithProviders(
+      <Bubble
+        variant="dark"
+        groupPosition="middle"
+        data-testid="bubble"
+        className="custom"
+      >
+        child
+      </Bubble>
+    )
+    let bubble = screen.getByTestId('bubble')
+    expect(bubble).toHaveAttribute('data-group-position', 'middle')
+    expect(bubble).toHaveClass('custom')
+    expect(bubble).toHaveTextContent('child')
+    const darkMiddle = bubble.className
+
+    rerender(
+      <Bubble
+        variant="light"
+        groupPosition="middle"
+        data-testid="bubble"
+        className="custom"
+      >
+        child
+      </Bubble>
+    )
+    bubble = screen.getByTestId('bubble')
+    const lightMiddle = bubble.className
+    expect(lightMiddle).not.toBe(darkMiddle)
+
+    rerender(
+      <Bubble
+        variant="light"
+        groupPosition="first"
+        data-testid="bubble"
+        className="custom"
+      >
+        child
+      </Bubble>
+    )
+    bubble = screen.getByTestId('bubble')
+    expect(bubble.className).not.toBe(lightMiddle)
+    const lightFirstBordered = bubble.className
+
+    rerender(
+      <Bubble
+        variant="light"
+        bordered={false}
+        groupPosition="first"
+        data-testid="bubble"
+        className="custom"
+      >
+        child
+      </Bubble>
+    )
+    bubble = screen.getByTestId('bubble')
+    const lightFirstBorderless = bubble.className
+    expect(lightFirstBorderless).not.toBe(lightFirstBordered)
+    expect(lightFirstBordered.split(/\s+/)).toEqual(
+      expect.arrayContaining(lightFirstBorderless.split(/\s+/))
+    )
+  })
+
+  it('lets an explicit radius replace the group corner table', () => {
+    const radiusClassName = 'rounded-[20px]'
+    const widthClassName = 'w-fit'
+    const paddingClassName = 'p-0.5'
+    renderWithProviders(
+      <Bubble
+        variant="light"
+        groupPosition="middle"
+        radiusClassName={radiusClassName}
+        widthClassName={widthClassName}
+        paddingClassName={paddingClassName}
+        data-testid="bubble"
+      >
+        child
+      </Bubble>
+    )
+    const bubble = screen.getByTestId('bubble')
+    expect(bubble).toHaveClass(radiusClassName, widthClassName)
+    expect(bubble).toHaveClass(paddingClassName)
+    expect(bubble.className).not.toMatch(/rounded-tl-\[4px\]/)
+  })
+})

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

@@ -0,0 +1,36 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../../test/utils'
+
+import CarouselNav from './CarouselNav'
+import { VIEWER_NAV_CLASS } from './viewerChromeClasses'
+
+describe('CarouselNav', () => {
+  it('uses default labels and independent handlers', () => {
+    const onPrev = vi.fn()
+    const onNext = vi.fn()
+    renderWithProviders(<CarouselNav onPrev={onPrev} onNext={onNext} />)
+
+    const prev = screen.getByRole('button', { name: 'Previous' })
+    const next = screen.getByRole('button', { name: 'Next' })
+    expect(prev).toHaveClass(VIEWER_NAV_CLASS, 'left-4')
+    expect(next).toHaveClass(VIEWER_NAV_CLASS, 'right-4')
+    fireEvent.click(prev)
+    fireEvent.click(next)
+    expect(onPrev).toHaveBeenCalledOnce()
+    expect(onNext).toHaveBeenCalledOnce()
+  })
+
+  it('supports custom accessible labels', () => {
+    renderWithProviders(
+      <CarouselNav
+        onPrev={vi.fn()}
+        onNext={vi.fn()}
+        prevLabel="Previous image"
+        nextLabel="Next image"
+      />
+    )
+    expect(screen.getByRole('button', { name: 'Previous image' })).toBeVisible()
+    expect(screen.getByRole('button', { name: 'Next image' })).toBeVisible()
+  })
+})

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

@@ -0,0 +1,114 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../../test/utils'
+
+import CompactDocumentRow from './CompactDocumentRow'
+
+describe('CompactDocumentRow', () => {
+  it('resolves title from title, filename, then File', () => {
+    const { rerender } = renderWithProviders(
+      <CompactDocumentRow variant="dark" title="Custom" filename="name.pdf" />
+    )
+    expect(screen.getByText('Custom')).toBeInTheDocument()
+    rerender(<CompactDocumentRow variant="dark" filename="name.pdf" />)
+    expect(screen.getByText('name.pdf')).toBeInTheDocument()
+    rerender(<CompactDocumentRow variant="dark" />)
+    expect(screen.getByText('File')).toBeInTheDocument()
+  })
+
+  it('renders metadata only when it has a value and defaults MIME type', () => {
+    const { container, rerender } = renderWithProviders(
+      <CompactDocumentRow
+        variant="dark"
+        filename="report.pdf"
+        fileSize={1024}
+      />
+    )
+    expect(screen.getByText('PDF · 1.0 KB')).toBeInTheDocument()
+    rerender(
+      <CompactDocumentRow
+        variant="dark"
+        filename="report"
+        mimeType="application/octet-stream"
+      />
+    )
+    expect(screen.queryByText(/·/)).toBeNull()
+    const genericIconMarkup = container.querySelector('svg')?.innerHTML
+    rerender(
+      <CompactDocumentRow
+        variant="dark"
+        filename="report.pdf"
+        mimeType="application/pdf"
+      />
+    )
+    expect(container.querySelector('svg')?.innerHTML).not.toBe(
+      genericIconMarkup
+    )
+  })
+
+  it('maps variant classes across metadata, icon, and activation', () => {
+    const onActivate = vi.fn()
+    const { container, rerender } = renderWithProviders(
+      <CompactDocumentRow
+        variant="dark"
+        filename="report.pdf"
+        onActivate={onActivate}
+        activateLabel="Open report"
+      />
+    )
+    const darkMetadata = screen.getByText('PDF').className
+    const darkIconTile = container.querySelector('div[aria-hidden]')
+    const darkTileClasses = darkIconTile?.className
+    const darkIconClasses = darkIconTile
+      ?.querySelector('svg')
+      ?.getAttribute('class')
+    expect(screen.getByRole('button', { name: 'Open report' })).toHaveClass(
+      'hover:bg-white/[0.04]'
+    )
+
+    rerender(
+      <CompactDocumentRow
+        variant="light"
+        filename="report.pdf"
+        onActivate={onActivate}
+        activateLabel="Open report"
+      />
+    )
+    expect(screen.getByText('PDF').className).not.toBe(darkMetadata)
+    const lightIconTile = container.querySelector('div[aria-hidden]')
+    expect(lightIconTile?.className).not.toBe(darkTileClasses)
+    expect(lightIconTile?.querySelector('svg')?.getAttribute('class')).not.toBe(
+      darkIconClasses
+    )
+    expect(screen.getByRole('button', { name: 'Open report' })).toHaveClass(
+      'hover:bg-black/[0.04]'
+    )
+  })
+
+  it('activates its body without nesting the trailing action', () => {
+    const onActivate = vi.fn()
+    renderWithProviders(
+      <CompactDocumentRow
+        variant="dark"
+        filename="report.pdf"
+        onActivate={onActivate}
+        activateLabel="Open report"
+        trailingAction={<button type="button">Download</button>}
+      />
+    )
+    const body = screen.getByRole('button', { name: 'Open report' })
+    expect(body).toBeInTheDocument()
+    expect(body).not.toContainElement(
+      screen.getByRole('button', { name: 'Download' })
+    )
+    fireEvent.click(body)
+    expect(onActivate).toHaveBeenCalledOnce()
+  })
+
+  it('renders a plain body when activation is omitted', () => {
+    renderWithProviders(
+      <CompactDocumentRow variant="dark" filename="report.pdf" />
+    )
+    expect(screen.queryByRole('button', { name: /report/ })).toBeNull()
+  })
+})

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

@@ -0,0 +1,42 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../../test/utils'
+
+import DismissButton from './DismissButton'
+
+describe('DismissButton', () => {
+  it('uses the default label, invokes the handler, and stops propagation', () => {
+    const onClick = vi.fn()
+    const outerClick = vi.fn()
+    renderWithProviders(
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      <div onClick={outerClick}>
+        <DismissButton onClick={onClick} />
+      </div>
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
+    expect(onClick).toHaveBeenCalledOnce()
+    expect(outerClick).not.toHaveBeenCalled()
+  })
+
+  it('supports a custom label and inline styling', () => {
+    const { rerender } = renderWithProviders(
+      <DismissButton onClick={vi.fn()} ariaLabel="Remove file" />
+    )
+    const overlayClasses = screen.getByRole('button', {
+      name: 'Remove file',
+    }).className
+
+    rerender(
+      <DismissButton
+        onClick={vi.fn()}
+        ariaLabel="Remove file"
+        variant="inline"
+      />
+    )
+    const button = screen.getByRole('button', { name: 'Remove file' })
+    expect(button).toHaveClass('hover:bg-white/25')
+    expect(button.className).not.toBe(overlayClasses)
+  })
+})