@linktr.ee/messaging-react 4.1.8-rc-1787240024 → 4.1.8

package/src/components/MessageAttachment/_shared/fileMeta.test.ts

@@ -25,6 +25,14 @@ describe('formatFileSize', () => {
     expect(formatFileSize(Infinity)).toBe('')
     expect(formatFileSize(-1)).toBe('')
   })
+
+  it('handles unit boundaries without crossing into the next unit early', () => {
+    expect(formatFileSize(1023)).toBe('1023 B')
+    expect(formatFileSize(1024 * 1024 - 1)).toBe('1024.0 KB')
+    expect(formatFileSize(1024 * 1024)).toBe('1.00 MB')
+    expect(formatFileSize(1024 ** 3 - 1)).toBe('1024.00 MB')
+    expect(formatFileSize(1024 ** 3)).toBe('1.00 GB')
+  })
 })
 
 describe('getFileExtensionLabel', () => {
@@ -43,6 +51,18 @@ describe('getFileExtensionLabel', () => {
     expect(getFileExtensionLabel('application/octet-stream')).toBeUndefined()
     expect(getFileExtensionLabel()).toBeUndefined()
   })
+
+  it('handles dot boundaries, extension length, and MIME fallbacks', () => {
+    expect(getFileExtensionLabel('text/plain', '.gitignore')).toBe('TXT')
+    expect(getFileExtensionLabel('text/plain', 'notes.')).toBe('TXT')
+    expect(getFileExtensionLabel('image/webp', 'photo.webp')).toBe('WEBP')
+    expect(getFileExtensionLabel('image/webp', 'photo.abcdef')).toBe('WEBP')
+    expect(getFileExtensionLabel('application/json', 'data.12345')).toBe(
+      '12345'
+    )
+    expect(getFileExtensionLabel('image/*')).toBeUndefined()
+    expect(getFileExtensionLabel('application/octet-stream')).toBeUndefined()
+  })
 })
 
 describe('buildCompactMetaLabel', () => {
@@ -59,6 +79,23 @@ describe('buildCompactMetaLabel', () => {
   it('returns undefined when nothing is renderable', () => {
     expect(buildCompactMetaLabel()).toBeUndefined()
   })
+
+  it('drops non-positive and non-number sizes while retaining size-only labels', () => {
+    expect(buildCompactMetaLabel('application/pdf', 'report.pdf', 0)).toBe(
+      'PDF'
+    )
+    expect(buildCompactMetaLabel('application/pdf', 'report.pdf', -1)).toBe(
+      'PDF'
+    )
+    expect(buildCompactMetaLabel(undefined, undefined, 1024)).toBe('1.0 KB')
+    expect(
+      buildCompactMetaLabel(
+        'application/octet-stream',
+        undefined,
+        '1024' as never
+      )
+    ).toBeUndefined()
+  })
 })
 
 describe('filenameFromUrl', () => {
@@ -77,4 +114,11 @@ describe('filenameFromUrl', () => {
   it('falls back to a default when the URL cannot be parsed', () => {
     expect(filenameFromUrl('not a url at all')).toBe('download')
   })
+
+  it('handles trailing slashes, deep paths, and query strings', () => {
+    expect(filenameFromUrl('https://cdn.example.com/folder/')).toBe('download')
+    expect(
+      filenameFromUrl('https://cdn.example.com/a/b/c/report.pdf?download=1')
+    ).toBe('report.pdf')
+  })
 })

package/src/components/MessageAttachment/_shared/triggerDownload.test.ts

@@ -0,0 +1,113 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { triggerDownload } from './triggerDownload'
+
+describe('triggerDownload', () => {
+  const fetchMock = vi.fn()
+  const openMock = vi.fn()
+  const createObjectURLMock = vi.fn()
+  const revokeObjectURLMock = vi.fn()
+  const clickMock = vi
+    .spyOn(HTMLAnchorElement.prototype, 'click')
+    .mockImplementation(() => undefined)
+
+  beforeEach(() => {
+    vi.stubGlobal('fetch', fetchMock)
+    vi.spyOn(window, 'open').mockImplementation(openMock)
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: createObjectURLMock,
+    })
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: revokeObjectURLMock,
+    })
+    fetchMock.mockReset()
+    openMock.mockReset()
+    createObjectURLMock.mockReset()
+    revokeObjectURLMock.mockReset()
+    clickMock.mockClear()
+  })
+
+  it('downloads a successful response with the supplied filename', async () => {
+    const blob = new Blob(['file'])
+    fetchMock.mockResolvedValue({
+      ok: true,
+      blob: () => Promise.resolve(blob),
+    })
+    createObjectURLMock.mockReturnValue('blob:attachment')
+    const appendSpy = vi.spyOn(document.body, 'appendChild')
+    const removeSpy = vi.spyOn(document.body, 'removeChild')
+
+    await expect(
+      triggerDownload('https://cdn.example.com/file.pdf', 'report.pdf')
+    ).resolves.toBeUndefined()
+
+    expect(fetchMock).toHaveBeenCalledWith('https://cdn.example.com/file.pdf', {
+      mode: 'cors',
+    })
+    expect(createObjectURLMock).toHaveBeenCalledWith(blob)
+    expect(clickMock).toHaveBeenCalledOnce()
+    expect(revokeObjectURLMock).toHaveBeenCalledWith('blob:attachment')
+    const anchor = appendSpy.mock.calls.at(-1)?.[0] as HTMLAnchorElement
+    expect(anchor.href).toBe('blob:attachment')
+    expect(anchor.download).toBe('report.pdf')
+    expect(anchor.style.display).toBe('none')
+    expect(removeSpy).toHaveBeenCalledWith(anchor)
+  })
+
+  it('uses the URL filename when no filename is supplied', async () => {
+    fetchMock.mockResolvedValue({
+      ok: true,
+      blob: () => Promise.resolve(new Blob()),
+    })
+    createObjectURLMock.mockReturnValue('blob:attachment')
+    const appendSpy = vi.spyOn(document.body, 'appendChild')
+
+    await triggerDownload('https://cdn.example.com/a/My%20file.pdf')
+
+    expect(
+      (appendSpy.mock.calls.at(-1)?.[0] as HTMLAnchorElement).download
+    ).toBe('My file.pdf')
+  })
+
+  it.each(['a non-ok response', 'a rejected fetch'])(
+    'falls back to a new window for %s',
+    async (label) => {
+      if (label === 'a non-ok response') {
+        fetchMock.mockResolvedValue({ ok: false, status: 404 })
+      } else {
+        fetchMock.mockRejectedValue(new Error('offline'))
+      }
+      openMock.mockReturnValue({})
+
+      await expect(
+        triggerDownload('https://cdn.example.com/file.pdf')
+      ).resolves.toBeUndefined()
+
+      expect(openMock).toHaveBeenCalledWith(
+        'https://cdn.example.com/file.pdf',
+        '_blank',
+        'noopener,noreferrer'
+      )
+    }
+  )
+
+  it('uses a raw-url anchor when the popup is blocked', async () => {
+    fetchMock.mockRejectedValue(new Error('offline'))
+    openMock.mockReturnValue(null)
+    const appendSpy = vi.spyOn(document.body, 'appendChild')
+    const removeSpy = vi.spyOn(document.body, 'removeChild')
+
+    await expect(
+      triggerDownload('https://cdn.example.com/file.pdf')
+    ).resolves.toBeUndefined()
+
+    const anchor = appendSpy.mock.calls.at(-1)?.[0] as HTMLAnchorElement
+    expect(anchor.href).toBe('https://cdn.example.com/file.pdf')
+    expect(anchor.download).toBe('file.pdf')
+    expect(anchor.target).toBe('_blank')
+    expect(anchor.rel).toBe('noopener noreferrer')
+    expect(removeSpy).toHaveBeenCalledWith(anchor)
+  })
+})

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

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../../test/utils'
+
+import { useCarousel } from './useCarousel'
+
+const Harness = ({
+  open,
+  length,
+  initialIndex = 0,
+}: {
+  open: boolean
+  length: number
+  initialIndex?: number
+}) => {
+  const { index, prev, next } = useCarousel({ open, length, initialIndex })
+  return (
+    <div>
+      <span data-testid="index">{index}</span>
+      <button type="button" onClick={prev}>
+        Prev
+      </button>
+      <button type="button" onClick={next}>
+        Next
+      </button>
+    </div>
+  )
+}
+
+describe('useCarousel', () => {
+  it('clamps initial index, wraps, and resets on reopen', () => {
+    const { rerender } = renderWithProviders(
+      <Harness open length={3} initialIndex={99} />
+    )
+    expect(screen.getByTestId('index')).toHaveTextContent('2')
+    fireEvent.click(screen.getByRole('button', { name: 'Next' }))
+    expect(screen.getByTestId('index')).toHaveTextContent('0')
+    fireEvent.click(screen.getByRole('button', { name: 'Prev' }))
+    expect(screen.getByTestId('index')).toHaveTextContent('2')
+    rerender(<Harness open={false} length={3} initialIndex={1} />)
+    rerender(<Harness open length={3} initialIndex={1} />)
+    expect(screen.getByTestId('index')).toHaveTextContent('1')
+  })
+
+  it('handles arrows only when open with multiple items', () => {
+    const { rerender } = renderWithProviders(
+      <Harness open length={2} initialIndex={0} />
+    )
+    const right = fireEvent.keyDown(window, { key: 'ArrowRight' })
+    expect(screen.getByTestId('index')).toHaveTextContent('1')
+    expect(right).toBe(false)
+    for (const tagName of ['video', 'audio'] as const) {
+      const media = document.createElement(tagName)
+      media.tabIndex = 0
+      document.body.appendChild(media)
+      media.focus()
+      fireEvent.keyDown(window, { key: 'ArrowLeft' })
+      expect(screen.getByTestId('index')).toHaveTextContent('1')
+      media.remove()
+    }
+    rerender(<Harness open length={1} />)
+    fireEvent.keyDown(window, { key: 'ArrowRight' })
+    expect(screen.getByTestId('index')).toHaveTextContent('0')
+    rerender(<Harness open={false} length={2} />)
+    fireEvent.keyDown(window, { key: 'ArrowRight' })
+    expect(screen.getByTestId('index')).toHaveTextContent('0')
+  })
+})

package/src/components/MessageAttachment/_shared/viewerChromeClasses.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+
+import { VIEWER_ACTION_CLASS, VIEWER_NAV_CLASS } from './viewerChromeClasses'
+
+describe('viewer chrome classes', () => {
+  it('keeps the load-bearing action button tokens', () => {
+    expect(VIEWER_ACTION_CLASS).toContain('size-10')
+    expect(VIEWER_ACTION_CLASS).toContain('rounded-full')
+  })
+
+  it('keeps the load-bearing navigation button tokens', () => {
+    expect(VIEWER_NAV_CLASS).toContain('absolute')
+    expect(VIEWER_NAV_CLASS).toContain('size-12')
+    expect(VIEWER_NAV_CLASS).toContain('-translate-y-1/2')
+  })
+})

package/src/styles.css

@@ -120,10 +120,6 @@
   }
 }
 
-.messaging-channel-layout {
-  --messaging-composer-fade-height: 2rem;
-}
-
 .messaging-composer-chrome--floating {
   position: relative;
   right: 0;
@@ -138,21 +134,10 @@
 
 .messaging-composer-chrome--floating .messaging-composer-backdrop {
   position: absolute;
-  top: calc(-1 * var(--messaging-composer-fade-height));
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   overflow: hidden;
   isolation: isolate;
   pointer-events: none;
-  /* Frosted band height, from the backdrop's top edge down to the composer
-     pill: the fade-height above the chrome plus the chrome's own top padding
-     (p-4 = 1rem). Blur/gradient stops are anchored to this fixed band so the
-     frosting stays in the gap above the composer and does not scale with the
-     (opaque) composer height. */
-  --messaging-composer-fade-band: calc(
-    var(--messaging-composer-fade-height) + 1rem
-  );
 }
 
 .messaging-composer-backdrop-blur {
@@ -161,99 +146,71 @@
   pointer-events: none;
 }
 
+/* Figma progressive background blur: (50%, 0%) → (50%, 100%), 0 → 16.
+   CSS has no spatially-varying blur, so five evenly spaced masked layers
+   approximate the linear ramp across the full parent height. */
 .messaging-composer-backdrop-blur:nth-child(1) {
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-  mask: linear-gradient(
-    to bottom,
-    transparent 0,
-    black calc(var(--messaging-composer-fade-band) * 0.12),
-    black calc(var(--messaging-composer-fade-band) * 0.32),
-    transparent calc(var(--messaging-composer-fade-band) * 0.5)
-  );
-  -webkit-mask: linear-gradient(
+  --messaging-composer-blur-mask: linear-gradient(
     to bottom,
-    transparent 0,
-    black calc(var(--messaging-composer-fade-band) * 0.12),
-    black calc(var(--messaging-composer-fade-band) * 0.32),
-    transparent calc(var(--messaging-composer-fade-band) * 0.5)
+    transparent 0%,
+    black 20%,
+    transparent 40%
   );
+  backdrop-filter: blur(3.2px);
+  -webkit-backdrop-filter: blur(3.2px);
+  mask: var(--messaging-composer-blur-mask);
+  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-blur:nth-child(2) {
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  mask: linear-gradient(
-    to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.2),
-    black calc(var(--messaging-composer-fade-band) * 0.38),
-    black calc(var(--messaging-composer-fade-band) * 0.55),
-    transparent calc(var(--messaging-composer-fade-band) * 0.7)
-  );
-  -webkit-mask: linear-gradient(
+  --messaging-composer-blur-mask: linear-gradient(
     to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.2),
-    black calc(var(--messaging-composer-fade-band) * 0.38),
-    black calc(var(--messaging-composer-fade-band) * 0.55),
-    transparent calc(var(--messaging-composer-fade-band) * 0.7)
+    transparent 20%,
+    black 40%,
+    transparent 60%
   );
+  backdrop-filter: blur(6.4px);
+  -webkit-backdrop-filter: blur(6.4px);
+  mask: var(--messaging-composer-blur-mask);
+  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-blur:nth-child(3) {
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  mask: linear-gradient(
+  --messaging-composer-blur-mask: linear-gradient(
     to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.4),
-    black calc(var(--messaging-composer-fade-band) * 0.58),
-    black calc(var(--messaging-composer-fade-band) * 0.72),
-    transparent calc(var(--messaging-composer-fade-band) * 0.85)
-  );
-  -webkit-mask: linear-gradient(
-    to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.4),
-    black calc(var(--messaging-composer-fade-band) * 0.58),
-    black calc(var(--messaging-composer-fade-band) * 0.72),
-    transparent calc(var(--messaging-composer-fade-band) * 0.85)
+    transparent 40%,
+    black 60%,
+    transparent 80%
   );
+  backdrop-filter: blur(9.6px);
+  -webkit-backdrop-filter: blur(9.6px);
+  mask: var(--messaging-composer-blur-mask);
+  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-blur:nth-child(4) {
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  mask: linear-gradient(
-    to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.55),
-    black calc(var(--messaging-composer-fade-band) * 0.72),
-    black calc(var(--messaging-composer-fade-band) * 0.88),
-    transparent var(--messaging-composer-fade-band)
-  );
-  -webkit-mask: linear-gradient(
+  --messaging-composer-blur-mask: linear-gradient(
     to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.55),
-    black calc(var(--messaging-composer-fade-band) * 0.72),
-    black calc(var(--messaging-composer-fade-band) * 0.88),
-    transparent var(--messaging-composer-fade-band)
+    transparent 60%,
+    black 80%,
+    transparent 100%
   );
+  backdrop-filter: blur(12.8px);
+  -webkit-backdrop-filter: blur(12.8px);
+  mask: var(--messaging-composer-blur-mask);
+  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-blur:nth-child(5) {
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  mask: linear-gradient(
+  --messaging-composer-blur-mask: linear-gradient(
     to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.7),
-    black calc(var(--messaging-composer-fade-band) * 0.9),
-    black var(--messaging-composer-fade-band),
-    transparent var(--messaging-composer-fade-band)
-  );
-  -webkit-mask: linear-gradient(
-    to bottom,
-    transparent calc(var(--messaging-composer-fade-band) * 0.7),
-    black calc(var(--messaging-composer-fade-band) * 0.9),
-    black var(--messaging-composer-fade-band),
-    transparent var(--messaging-composer-fade-band)
+    transparent 80%,
+    black 100%
   );
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  mask: var(--messaging-composer-blur-mask);
+  -webkit-mask: var(--messaging-composer-blur-mask);
 }
 
 .messaging-composer-backdrop-gradient {
@@ -261,9 +218,9 @@
   inset: 0;
   pointer-events: none;
   background: linear-gradient(
-    180deg,
-    rgba(251, 250, 249, 0) 0,
-    #fbfaf9 var(--messaging-composer-fade-band)
+    to bottom,
+    rgba(251, 250, 249, 0) 0%,
+    #fbfaf9 100%
   );
 }