@linktr.ee/messaging-react 4.4.7 → 4.5.0-rc-1788297811

package/src/components/RichCard/RichCard.test.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen, fireEvent } from '../../test/utils'
+import {
+  userEvent,
+  renderWithProviders,
+  screen,
+  fireEvent,
+} from '../../test/utils'
 
 import RichCard from '.'
 
@@ -41,6 +46,7 @@ describe('RichCard', () => {
     expect(card).toHaveTextContent('👋 Say hello as people arrive')
     expect(card).toHaveTextContent('✨ Spark conversations')
     expect(card).toHaveTextContent('💬 Add automated FAQs')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(card.querySelectorAll('br')).toHaveLength(2)
   })
 
@@ -57,6 +63,7 @@ describe('RichCard', () => {
     )
 
     const card = await screen.findByTestId('rich-card')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(card.querySelectorAll('br')).toHaveLength(0)
     expect(screen.getByText(/Say hello as people arrive/)).toHaveClass(
       'truncate'
@@ -197,6 +204,7 @@ describe('RichCard', () => {
   })
 
   it('renders a url action as an external anchor, others as buttons', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     renderWithProviders(
       <RichCard.Received
@@ -212,7 +220,7 @@ describe('RichCard', () => {
     expect(link).toHaveAttribute('href', 'https://tr.ee/x')
     expect(link).toHaveAttribute('target', '_blank')
 
-    fireEvent.click(screen.getByRole('button', { name: 'Set up' }))
+    await user.click(screen.getByRole('button', { name: 'Set up' }))
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 

package/src/styles.css

@@ -908,3 +908,123 @@
 .message-locked-attachment-text .str-chat__message-text-inner {
   color: inherit;
 }
+
+/* Audio attachment waveform — `MessageAttachment.Audio` (MES-1360).
+
+   Plain CSS rather than Tailwind utilities for two reasons: the per-bar
+   height is a floored custom property that has to be authored once
+   rather than repeated on 35 elements, and the played / unplayed fills
+   are the one design decision Figma left open (it draws the idle state
+   only), so keeping them in a single place is what makes them reviewable.
+   Follows the existing `.mes-media-viewer*` / `.mes-dialog` convention:
+   the package's shipped stylesheet is enough, with no Tailwind
+   dependency in the consumer.
+
+   Geometry is Figma `2754:17710` → `sound-wave` (`…;2754:8065`): a
+   138×30 track holding 35 bars at 2px with 2px gaps
+   (35 x 2 + 34 x 2 = 138). Bars flex from a zero basis, so the exact
+   2px falls out of the 138px track and a narrower container degrades
+   proportionally instead of clipping. */
+.mes-audio-wave {
+  position: relative;
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  align-items: center;
+  height: 30px;
+}
+
+.mes-audio-wave__track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  gap: 2px;
+}
+
+/* Figma's bars run 4px..30px on a 30px track, so the amplitude
+   percentage is floored at that 4px minimum: a silent sample — or the
+   all-zero fallback used when no waveform could be produced — still
+   draws the shortest bar the design already contains, keeping the
+   card's silhouette identical instead of collapsing it. */
+.mes-audio-wave__bar {
+  flex: 1 1 0;
+  min-width: 0;
+  height: max(4px, var(--mes-audio-wave-bar, 0%));
+  border-radius: 9999px;
+  background: rgb(255 255 255 / 0.4);
+}
+
+.mes-audio-wave__bar--played {
+  background: #ffffff;
+}
+
+.mes-audio-wave--light .mes-audio-wave__bar {
+  background: rgb(4 4 3 / 0.5);
+}
+
+.mes-audio-wave--light .mes-audio-wave__bar--played {
+  background: #040403;
+}
+
+/* Seek is a real `<input type="range">` stretched over the bars, which
+   supplies click, drag, arrow keys, Home / End and a screen-reader
+   slider role natively. The bars are the visible track, so the input
+   itself must not paint — but it must stay focusable, which is why the
+   thumb and track are cleared individually rather than the whole input
+   being given `opacity: 0`. */
+.mes-audio-wave__seek {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.mes-audio-wave__seek:disabled {
+  cursor: default;
+}
+
+.mes-audio-wave__seek::-webkit-slider-runnable-track {
+  background: transparent;
+}
+
+.mes-audio-wave__seek::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1px;
+  height: 100%;
+  opacity: 0;
+}
+
+.mes-audio-wave__seek::-moz-range-track {
+  background: transparent;
+}
+
+.mes-audio-wave__seek::-moz-range-thumb {
+  width: 1px;
+  height: 100%;
+  border: 0;
+  opacity: 0;
+}
+
+.mes-audio-wave__seek:focus {
+  outline: none;
+}
+
+/* The input is transparent, so the focus ring has to render on the
+   wrapper that actually has pixels. */
+.mes-audio-wave:has(.mes-audio-wave__seek:focus-visible) {
+  outline: 2px solid rgb(255 255 255 / 0.6);
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+
+.mes-audio-wave--light:has(.mes-audio-wave__seek:focus-visible) {
+  outline-color: rgb(4 4 3 / 0.6);
+}