stream-chat-react 14.12.0 → 15.0.0-rc.1

package/dist/es/components/Accessibility/hooks/useInteractionAnnouncements.mjs

@@ -5,45 +5,55 @@ import { useMemo, useRef } from "react";
 //#region src/components/Accessibility/hooks/useInteractionAnnouncements.ts
 /**
 * One entry per interaction — the single place an interaction is registered. Each
-* resolver contains a LITERAL `t('aria/…')` call so that `i18next-cli extract`
-* (run via `yarn build-translations`) discovers and generates the key across all
-* locales. Keys must never be built dynamically (e.g. `t(someVariable)`) or
-* extraction silently misses them. Adding an interaction = one line here + one
+* resolver contains a LITERAL `t(key, 'English copy')` call, which is what puts the key in the
+* catalog: `yarn build-translations` parses the call sites to generate `src/i18n/keys.ts`. Keys
+* must never be built dynamically (e.g. `t(someVariable)`) or they are missed, and an integrator
+* has no way to discover them. Adding an interaction = one line here + one
 * line in {@link InteractionAnnouncementParams} (+ an override in
 * {@link INTERACTION_PRIORITIES} only if it is not `polite`).
 */
 var INTERACTION_MESSAGES = {
-	"audioPlayer.playbackRateChanged": (t, params) => t("Playback speed {{ rate }}x", { rate: params.rate }),
-	"channel.opened": (t, params) => t("aria/Opened channel: {{ name }}", { name: params.name }),
-	"command.selected": (t, params) => t("aria/Command activated: {{ command }}", { command: params.command }),
-	"giphy.canceled": (t) => t("aria/Giphy canceled"),
-	"giphy.sent": (t) => t("aria/Giphy sent"),
-	"giphy.shuffled": (t, params) => params.title ? t("aria/Giphy image changed: {{ title }}", { title: params.title }) : t("aria/Giphy image changed"),
-	"poll.dialogOpened": (t) => `${t("aria/Poll dialog opened")}. ${t("Create a question, add options, and configure poll settings")}. ${t("aria/Press Enter to start typing")}.`,
-	"poll.optionDropped": (t, params) => t("aria/Dropped \"{{ option }}\" at position {{ position }}.", {
+	"audioPlayer.playbackRateChanged": (t, params) => t("common.playbackSpeedX.label", "Playback speed {{ rate }}x", { rate: params.rate }),
+	"channel.opened": (t, params) => t("a11y.interactionAnnouncements.openedChannel.ariaLabel", "Opened channel: {{ name }}", { name: params.name }),
+	"command.selected": (t, params) => t("a11y.interactionAnnouncements.commandActivated.ariaLabel", "Command activated: {{ command }}", { command: params.command }),
+	"giphy.canceled": (t) => t("a11y.interactionAnnouncements.giphyCanceled.ariaLabel", "Giphy canceled"),
+	"giphy.sent": (t) => t("a11y.interactionAnnouncements.giphySent.ariaLabel", "Giphy sent"),
+	"giphy.shuffled": (t, params) => params.title ? t("a11y.interactionAnnouncements.giphyImageChanged.withTitle.ariaLabel", "Giphy image changed: {{ title }}", { title: params.title }) : t("a11y.interactionAnnouncements.giphyImageChanged.ariaLabel", "Giphy image changed"),
+	"poll.dialogOpened": (t) => `${t("a11y.interactionAnnouncements.pollDialogOpened.ariaLabel", "Poll dialog opened")}. ${t("common.createQuestionAddOptions.label", "Create a question, add options, and configure poll settings")}. ${t("a11y.interactionAnnouncements.pressEnterStartTyping.ariaLabel", "Press Enter to start typing")}.`,
+	"poll.optionDropped": (t, params) => t("a11y.interactionAnnouncements.droppedPosition.ariaLabel", "Dropped \"{{ option }}\" at position {{ position }}.", {
 		option: params.option,
 		position: params.position
 	}),
-	"poll.optionPickedUp": (t, params) => t("aria/Picked up \"{{ option }}\". Use arrow keys to reorder. Press Space or Tab to drop.", { option: params.option }),
-	"poll.optionRemoved": (t, params) => t("aria/Removed option {{ option }}", { option: params.option }),
-	"poll.sent": (t) => t("aria/Poll sent"),
-	"search.cleared": (t) => t("aria/Search cleared"),
+	"poll.optionPickedUp": (t, params) => t("a11y.interactionAnnouncements.pickedUpUseArrow.ariaLabel", "Picked up \"{{ option }}\". Use arrow keys to reorder. Press Space or Tab to drop.", { option: params.option }),
+	"poll.optionRemoved": (t, params) => t("a11y.interactionAnnouncements.removedOption.ariaLabel", "Removed option {{ option }}", { option: params.option }),
+	"poll.sent": (t) => t("a11y.interactionAnnouncements.pollSent.ariaLabel", "Poll sent"),
+	"search.cleared": (t) => t("a11y.interactionAnnouncements.searchCleared.ariaLabel", "Search cleared"),
 	"search.resultCount": (t, params) => {
-		if (params.count <= 0) return t("aria/No search results found");
-		const count = t("aria/{{ count }} search results", { count: params.count });
-		return params.allResultsLoaded ? `${count}. ${t("All results loaded")}` : count;
+		if (params.count <= 0) return t("a11y.interactionAnnouncements.noSearchResultsFound.ariaLabel", "No search results found");
+		const count = t("a11y.interactionAnnouncements.searchResults.ariaLabel", {
+			count: params.count,
+			defaultValue_one: "{{ count }} search result",
+			defaultValue_other: "{{ count }} search results"
+		});
+		return params.allResultsLoaded ? `${count}. ${t("common.resultsLoaded.label", "All results loaded")}` : count;
 	},
-	"suggestions.count": (t, params) => params.suggestionsLabel ? t("aria/{{ count }} {{ suggestionsLabel }}", {
+	"suggestions.count": (t, params) => params.suggestionsLabel ? t("a11y.interactionAnnouncements.suggestionsWithLabel.ariaLabel", {
 		count: params.count,
+		defaultValue_one: "{{ count }} {{ suggestionsLabel }}",
+		defaultValue_other: "{{ count }} {{ suggestionsLabel }}",
 		suggestionsLabel: params.suggestionsLabel
-	}) : t("aria/{{ count }} suggestions", { count: params.count }),
-	"thread.opened": (t, params) => t("aria/Opened thread in {{ name }}", { name: params.name }),
-	"user.selected": (t, params) => t("aria/User selected: {{ user }}", { user: params.user }),
-	"voiceRecording.attached": (t) => t("aria/Voice recording attached"),
-	"voiceRecording.paused": (t) => t("aria/Recording paused"),
-	"voiceRecording.resumed": (t) => t("aria/Recording resumed"),
-	"voiceRecording.sent": (t) => t("aria/Voice message sent"),
-	"voiceRecording.started": (t) => t("aria/Recording started")
+	}) : t("a11y.interactionAnnouncements.suggestions.ariaLabel", {
+		count: params.count,
+		defaultValue_one: "{{ count }} suggestion",
+		defaultValue_other: "{{ count }} suggestions"
+	}),
+	"thread.opened": (t, params) => t("a11y.interactionAnnouncements.openedThread.ariaLabel", "Opened thread in {{ name }}", { name: params.name }),
+	"user.selected": (t, params) => t("a11y.interactionAnnouncements.userSelected.ariaLabel", "User selected: {{ user }}", { user: params.user }),
+	"voiceRecording.attached": (t) => t("a11y.interactionAnnouncements.voiceRecordingAttached.ariaLabel", "Voice recording attached"),
+	"voiceRecording.paused": (t) => t("a11y.interactionAnnouncements.recordingPaused.ariaLabel", "Recording paused"),
+	"voiceRecording.resumed": (t) => t("a11y.interactionAnnouncements.recordingResumed.ariaLabel", "Recording resumed"),
+	"voiceRecording.sent": (t) => t("a11y.interactionAnnouncements.voiceMessageSent.ariaLabel", "Voice message sent"),
+	"voiceRecording.started": (t) => t("a11y.interactionAnnouncements.recordingStarted.ariaLabel", "Recording started")
 };
 /**
 * Per-interaction aria-live priority. Interactions default to `polite`; list one

package/dist/es/components/Accessibility/hooks/useInteractionAnnouncements.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useInteractionAnnouncements.mjs","names":[],"sources":["../../../../../src/components/Accessibility/hooks/useInteractionAnnouncements.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\n\nimport type { AriaLivePriority } from '../useAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncer } from '../useAriaLiveAnnouncer';\nimport { useDebouncedAnnounce } from '../scheduling';\nimport { useTranslationContext } from '../../../context/TranslationContext';\n\ntype TranslateFn = ReturnType<typeof useTranslationContext>['t'];\n\n/**\n * Optional delivery overrides a call site may pass ALONGSIDE an interaction's message params.\n * These are not consumed by the message resolver — they only affect how the announcement is\n * delivered. `debounceMs` overrides that interaction's default debounce ({@link\n * INTERACTION_DEBOUNCE_MS}) for THIS call, and enables debouncing for an interaction that has no\n * default. `delayMs` overrides the default delay ({@link INTERACTION_DELAY_MS}) for the\n * (non-debounced) immediate path. Param-less (discrete) interactions are always immediate and do\n * not accept overrides.\n *\n * `debounceMs` vs `delayMs`: a debounce collapses rapid repeats on a per-call-site timer and is\n * **cancelled if that call site unmounts** — right for a value that keeps changing in place (a\n * result count). `delayMs` schedules a single deferred emit in the shared announcer PROVIDER, so it\n * **survives the caller unmounting** — right for a one-shot confirmation whose origin (e.g. a list\n * row) disappears on the very action being confirmed (opening a channel/thread hides the list on\n * mobile). Both let the message land after a competing focus/typing read-out. `debounceMs` wins if\n * both are given.\n */\nexport type InteractionDeliveryOptions = { debounceMs?: number; delayMs?: number };\n\n/**\n * Parameters accepted by each parameterized interaction announcement.\n * Interactions that take no parameters map to `undefined`. Param-ful interactions additionally\n * accept {@link InteractionDeliveryOptions} (e.g. a per-call `debounceMs`).\n */\nexport type InteractionAnnouncementParams = {\n  /** Audio playback speed was changed via the playback-rate button. `rate` is the new multiplier. */\n  'audioPlayer.playbackRateChanged': InteractionDeliveryOptions & { rate: number };\n  /** A channel was opened from the channel list. `name` is its display title. */\n  'channel.opened': InteractionDeliveryOptions & { name: string };\n  /** A slash command was activated from the Instant Commands menu. `command` is its name. */\n  'command.selected': InteractionDeliveryOptions & { command: string };\n  'giphy.canceled': undefined;\n  'giphy.sent': undefined;\n  'giphy.shuffled': InteractionDeliveryOptions & { title?: string };\n  'poll.dialogOpened': undefined;\n  /** A poll option was dropped at a new position during keyboard reorder. */\n  'poll.optionDropped': InteractionDeliveryOptions & {\n    option: string;\n    position: number;\n  };\n  /** A poll option was picked up to start a keyboard reorder. `option` is its text (or a fallback). */\n  'poll.optionPickedUp': InteractionDeliveryOptions & { option: string };\n  'poll.optionRemoved': InteractionDeliveryOptions & { option: string };\n  'poll.sent': undefined;\n  'search.cleared': undefined;\n  'search.resultCount': InteractionDeliveryOptions & {\n    /** Whether every active source is fully loaded — appends an \"all results loaded\" clause. */\n    allResultsLoaded?: boolean;\n    count: number;\n  };\n  'suggestions.count': InteractionDeliveryOptions & {\n    count: number;\n    suggestionsLabel?: string;\n  };\n  /** A thread was opened from the thread list. `name` is its channel's display title. */\n  'thread.opened': InteractionDeliveryOptions & { name: string };\n  'user.selected': InteractionDeliveryOptions & { user: string };\n  /** A finished voice recording was added to the composer (async multi-send: not sent yet). */\n  'voiceRecording.attached': undefined;\n  'voiceRecording.paused': undefined;\n  'voiceRecording.resumed': undefined;\n  /** A finished voice recording was sent immediately as a message. */\n  'voiceRecording.sent': undefined;\n  'voiceRecording.started': undefined;\n};\n\nexport type InteractionAnnouncementType = keyof InteractionAnnouncementParams;\n\n/**\n * One entry per interaction — the single place an interaction is registered. Each\n * resolver contains a LITERAL `t('aria/…')` call so that `i18next-cli extract`\n * (run via `yarn build-translations`) discovers and generates the key across all\n * locales. Keys must never be built dynamically (e.g. `t(someVariable)`) or\n * extraction silently misses them. Adding an interaction = one line here + one\n * line in {@link InteractionAnnouncementParams} (+ an override in\n * {@link INTERACTION_PRIORITIES} only if it is not `polite`).\n */\nconst INTERACTION_MESSAGES: {\n  [T in InteractionAnnouncementType]: (\n    t: TranslateFn,\n    params: InteractionAnnouncementParams[T],\n  ) => string;\n} = {\n  // Confirms the new audio playback speed after the user cycles it with the playback-rate button.\n  // Reuses the existing (already-localized) button label so the spoken text matches the control.\n  'audioPlayer.playbackRateChanged': (t, params) =>\n    t('Playback speed {{ rate }}x', { rate: params.rate }),\n  // Confirms which channel was opened after selecting it from the list. Delayed (see\n  // INTERACTION_DELAY_MS) so it lands AFTER the screen reader's announcement of the newly-focused\n  // element (the message composer auto-focuses on channel change) rather than competing with — and\n  // being superseded by — that native focus read-out. A provider-managed delay (not a per-row\n  // debounce) so it still fires when selecting the channel unmounts the list (mobile).\n  'channel.opened': (t, params) =>\n    t('aria/Opened channel: {{ name }}', { name: params.name }),\n  // Confirms which slash command was activated after picking it from the Instant Commands menu.\n  // Delayed (INTERACTION_DELAY_MS) for the same reason as the \"opened\" confirmations: selecting a\n  // command closes the menu and focuses the composer textarea (whose name changes, e.g. to\n  // \"Search GIFs\"), so the screen reader reads that focus first — this lands after it. A provider\n  // delay (not a debounce) because the menu that fired it unmounts on selection.\n  'command.selected': (t, params) =>\n    t('aria/Command activated: {{ command }}', { command: params.command }),\n  'giphy.canceled': (t) => t('aria/Giphy canceled'),\n  'giphy.sent': (t) => t('aria/Giphy sent'),\n  // Giphy payloads rarely carry a human title, so include it only when present; otherwise a\n  // generic \"changed\" confirmation. Both literal keys are extracted by i18next-cli.\n  'giphy.shuffled': (t, params) =>\n    params.title\n      ? t('aria/Giphy image changed: {{ title }}', { title: params.title })\n      : t('aria/Giphy image changed'),\n  // Spoken on poll-dialog open. Reuses the already-localized visible description for the middle\n  // clause (so the spoken and visible text stay consistent) and adds two short aria-only phrases:\n  // an explicit \"opened\" confirmation and the Enter affordance to step into the Question field.\n  'poll.dialogOpened': (t) =>\n    `${t('aria/Poll dialog opened')}. ${t(\n      'Create a question, add options, and configure poll settings',\n    )}. ${t('aria/Press Enter to start typing')}.`,\n  // Keyboard reorder pickup/drop. Assertive (see INTERACTION_PRIORITIES) — immediate drag feedback\n  // that must not be queued behind other polite messages.\n  'poll.optionDropped': (t, params) =>\n    t('aria/Dropped \"{{ option }}\" at position {{ position }}.', {\n      option: params.option,\n      position: params.position,\n    }),\n  'poll.optionPickedUp': (t, params) =>\n    t(\n      'aria/Picked up \"{{ option }}\". Use arrow keys to reorder. Press Space or Tab to drop.',\n      { option: params.option },\n    ),\n  // Confirms a poll option was removed, naming it by its text (or positional fallback). Polite so it\n  // queues behind the focus move to the next option field instead of interrupting it.\n  'poll.optionRemoved': (t, params) =>\n    t('aria/Removed option {{ option }}', { option: params.option }),\n  'poll.sent': (t) => t('aria/Poll sent'),\n  'search.cleared': (t) => t('aria/Search cleared'),\n  // The number of items currently listed in the search results; an empty result set is spelled out\n  // rather than announced as \"0\". When the list is fully loaded, the end-of-list status is folded\n  // into THIS one announcement (reusing the visible footer's \"All results loaded\" text) instead of a\n  // competing second live-region message that would supersede the count.\n  'search.resultCount': (t, params) => {\n    if (params.count <= 0) return t('aria/No search results found');\n    const count = t('aria/{{ count }} search results', { count: params.count });\n    return params.allResultsLoaded ? `${count}. ${t('All results loaded')}` : count;\n  },\n  // Name the suggestion type by reusing the already-localized list label (\"5 Command\n  // Suggestions\") so the user knows what the results are; fall back to the bare count when no\n  // label is given. Both literal keys are extracted.\n  'suggestions.count': (t, params) =>\n    params.suggestionsLabel\n      ? t('aria/{{ count }} {{ suggestionsLabel }}', {\n          count: params.count,\n          suggestionsLabel: params.suggestionsLabel,\n        })\n      : t('aria/{{ count }} suggestions', { count: params.count }),\n  // Confirms which thread was opened after selecting it from the list; `name` is the thread's\n  // channel display title. Delayed for the same reason as `channel.opened` (the thread composer\n  // auto-focuses on open, and its focus announcement would otherwise supersede this one).\n  'thread.opened': (t, params) =>\n    t('aria/Opened thread in {{ name }}', { name: params.name }),\n  'user.selected': (t, params) =>\n    t('aria/User selected: {{ user }}', { user: params.user }),\n  // Voice recorder lifecycle — discrete, immediate, polite confirmations. Cancellation is NOT here:\n  // it already emits an app notification (\"Voice message deleted\") announced by NotificationAnnouncer,\n  // and recording errors surface as error notifications; adding them here would double-announce.\n  'voiceRecording.attached': (t) => t('aria/Voice recording attached'),\n  'voiceRecording.paused': (t) => t('aria/Recording paused'),\n  'voiceRecording.resumed': (t) => t('aria/Recording resumed'),\n  'voiceRecording.sent': (t) => t('aria/Voice message sent'),\n  'voiceRecording.started': (t) => t('aria/Recording started'),\n};\n\n/**\n * Per-interaction aria-live priority. Interactions default to `polite`; list one\n * here only to override it (e.g. with `assertive`).\n */\nconst INTERACTION_PRIORITIES: Partial<\n  Record<InteractionAnnouncementType, AriaLivePriority>\n> = {\n  // Assertive on open: a polite update fired around the dialog's focus-entry announcement is\n  // dropped; assertive interrupts and is spoken (VoiceOver demotes the aria-describedby hint).\n  'poll.dialogOpened': 'assertive',\n  // Keyboard reorder feedback must be immediate (interrupt), not queued behind polite messages.\n  'poll.optionDropped': 'assertive',\n  'poll.optionPickedUp': 'assertive',\n};\n\n/**\n * Per-interaction dedupe window (ms): an identical message for this interaction is announced at\n * most once per window (see {@link AriaLiveAnnounceOptions.dedupeMs}). List an interaction here\n * only when the SAME open/mount can fire it more than once in quick succession — e.g. a mount\n * effect double-invoked by React StrictMode (dev) — so the user does not hear a duplicate.\n */\nconst INTERACTION_DEDUPE_MS: Partial<Record<InteractionAnnouncementType, number>> = {\n  // The audio player is pooled: if the same asset is rendered by two widgets they share one player,\n  // so a single rate change fires this from both consumers. Dedupe collapses the identical message.\n  // (Cycling always lands on a different rate → different text, so this never swallows a real change.)\n  'audioPlayer.playbackRateChanged': 300,\n  'poll.dialogOpened': 1000,\n};\n\n/**\n * Default per-interaction debounce delay (ms). Only list rapidly-updating streams where just the\n * settled value should be read (e.g. the autocomplete count as the query filters). Discrete\n * confirmations (Giphy/Poll sent, user selected) are NOT listed and announce immediately. A call\n * site can override (or opt into) a delay for a single call via `params.debounceMs` — see\n * {@link InteractionDeliveryOptions}.\n *\n * `suggestions.count` is a CONSEQUENCE OF TYPING, so the delay does double duty: it coalesces\n * rapid filters into the settled value AND lets the screen reader's per-keystroke typing echo\n * (the spoken character + field re-read) finish first. A polite update that lands mid-echo gets\n * queued behind a long re-read and is perceived as buried; waiting past the echo makes the count\n * the next thing spoken once the user pauses. This is a heuristic — echo length varies with the\n * SR's \"speak typed words/characters\" setting and field content — so tune if it still collides.\n */\nconst INTERACTION_DEBOUNCE_MS: Partial<Record<InteractionAnnouncementType, number>> = {\n  // Coalesce the result count as the query filters / results stream in, and let the screen reader's\n  // typing echo finish first (same rationale as `suggestions.count`, slightly longer as search\n  // results can arrive over the network in bursts). The end-of-list status rides along in this same\n  // message (see `search.resultCount` resolver), so there is no second announcement to compete.\n  'search.resultCount': 1000,\n  'suggestions.count': 500,\n};\n\n/**\n * Default per-interaction delay (ms) for the immediate (non-debounced) path — a single deferred\n * emit scheduled in the announcer PROVIDER (see {@link AriaLiveAnnounceOptions.delayMs}), so it\n * SURVIVES the calling component unmounting (unlike a debounce, whose timer is cleared on unmount).\n *\n * Opening a channel/thread moves focus to the (auto-focusing) message composer; the screen reader\n * announces that newly-focused element first, and a live-region message emitted alongside it is\n * superseded and dropped. The delay defers the confirmation past that focus read-out so it is spoken\n * next, in a calm moment. It is a provider delay rather than a debounce specifically because\n * selecting the item can unmount its list row (and the whole list, on mobile) — a per-row debounce\n * would be cancelled mid-flight, swallowing the confirmation.\n */\nconst INTERACTION_DELAY_MS: Partial<Record<InteractionAnnouncementType, number>> = {\n  'channel.opened': 1500,\n  'command.selected': 1500,\n  'thread.opened': 1500,\n};\n\n// Overloads enforce that parameterized interactions require their params and that\n// param-less interactions reject extra arguments.\ntype AnnounceInteraction = {\n  <T extends InteractionAnnouncementType>(\n    interaction: InteractionAnnouncementParams[T] extends undefined ? T : never,\n  ): void;\n  <T extends InteractionAnnouncementType>(\n    interaction: InteractionAnnouncementParams[T] extends undefined ? never : T,\n    params: InteractionAnnouncementParams[T],\n  ): void;\n};\n\nexport type UseInteractionAnnouncementsValue = {\n  /**\n   * Announce a predefined interaction event to assistive technology. The\n   * interaction name maps to a localized message and a baked-in aria-live\n   * priority.\n   */\n  announceInteraction: AnnounceInteraction;\n  /**\n   * Cancel pending (debounced, not-yet-spoken) announcements: a single `interaction`, or all when\n   * omitted. Call this when the source of a debounced announcement is torn down (e.g. search exited)\n   * so a queued message is not spoken after its context is gone. An announcement already emitted into\n   * the live region cannot be recalled.\n   */\n  cancelInteraction: (interaction?: InteractionAnnouncementType) => void;\n};\n\n/**\n * Thin, typed wrapper over the aria-live announcer exposing intention-revealing\n * helpers for transient, user-initiated UI interactions (e.g. a Giphy being\n * sent, a poll being created, a mention being picked). They map to i18n keys with\n * baked-in priorities and reuse the existing live region via\n * {@link useAriaLiveAnnouncer}. New interactions are registered as a single entry\n * in {@link INTERACTION_MESSAGES}.\n */\nexport const useInteractionAnnouncements = (): UseInteractionAnnouncementsValue => {\n  const announce = useAriaLiveAnnouncer();\n  const { t } = useTranslationContext();\n  // Per-interaction debounce: each type has its own timer + delay from INTERACTION_DEBOUNCE_MS,\n  // so e.g. the typing-driven `suggestions.count` can wait longer (to clear the screen reader's\n  // typing echo) without affecting any other debounced interaction.\n  const { announce: announceDebounced, cancel: cancelDebounced } =\n    useDebouncedAnnounce(announce);\n  // Cancel fn of the still-pending provider-delayed emit per interaction. A second trigger of the\n  // same interaction within its delay window supersedes the first (so only the latest is spoken).\n  // NOT cleared on unmount on purpose — provider-delayed emits are designed to survive the caller\n  // unmounting (e.g. channel.opened fires after its list row is gone).\n  const pendingImmediateCancelsRef = useRef<\n    Partial<Record<InteractionAnnouncementType, () => void>>\n  >({});\n\n  return useMemo(\n    () => ({\n      announceInteraction: (\n        interaction: InteractionAnnouncementType,\n        params?: InteractionAnnouncementParams[InteractionAnnouncementType],\n      ) => {\n        const resolveMessage = INTERACTION_MESSAGES[interaction] as (\n          t: TranslateFn,\n          params: InteractionAnnouncementParams[InteractionAnnouncementType],\n        ) => string;\n\n        if (!resolveMessage) return;\n\n        const message = resolveMessage(t, params as never);\n        const priority = INTERACTION_PRIORITIES[interaction] ?? 'polite';\n\n        // A per-call `params.debounceMs` overrides the registered default (and can opt an\n        // otherwise-immediate interaction into debouncing).\n        const debounceMs =\n          (params as InteractionDeliveryOptions | undefined)?.debounceMs ??\n          INTERACTION_DEBOUNCE_MS[interaction];\n        if (debounceMs === undefined) {\n          // Immediate path. `delayMs` (if any) is a provider-managed deferral that survives this\n          // call site unmounting — used by the \"opened\" confirmations, whose list row disappears on\n          // selection. `debounceMs` takes precedence over `delayMs` when both are set.\n          const delayMs =\n            (params as InteractionDeliveryOptions | undefined)?.delayMs ??\n            INTERACTION_DELAY_MS[interaction];\n          // Supersede a still-pending delayed emit of the same interaction so a rapid re-trigger\n          // (e.g. selecting a second channel within the 1500ms window) speaks only the latest.\n          pendingImmediateCancelsRef.current[interaction]?.();\n          pendingImmediateCancelsRef.current[interaction] = announce(message, {\n            dedupeMs: INTERACTION_DEDUPE_MS[interaction],\n            delayMs,\n            priority,\n          });\n          return;\n        }\n\n        // Debounced stream (e.g. suggestions.count): coalesce rapid updates into the settled\n        // value, on a channel keyed by interaction type with that type's own delay. We do NOT\n        // dedupe an unchanged message here — whether a repeat is meaningful is the caller's call\n        // (e.g. SuggestionList re-announces the count on each genuine re-filter so the user gets\n        // feedback even when the count is steady, such as emoji results capped at a constant N).\n        // The debounce window already collapses idle/rapid duplicates.\n        announceDebounced(interaction, message, debounceMs, priority);\n      },\n      cancelInteraction: (interaction?: InteractionAnnouncementType) => {\n        cancelDebounced(interaction);\n        const pending = pendingImmediateCancelsRef.current;\n        if (interaction) {\n          pending[interaction]?.();\n          delete pending[interaction];\n        } else {\n          Object.values(pending).forEach((cancel) => cancel?.());\n          pendingImmediateCancelsRef.current = {};\n        }\n      },\n    }),\n    [announce, announceDebounced, cancelDebounced, t],\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"useInteractionAnnouncements.mjs","names":[],"sources":["../../../../../src/components/Accessibility/hooks/useInteractionAnnouncements.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\n\nimport type { AriaLivePriority } from '../useAriaLiveAnnouncer';\nimport { useAriaLiveAnnouncer } from '../useAriaLiveAnnouncer';\nimport { useDebouncedAnnounce } from '../scheduling';\nimport { useTranslationContext } from '../../../context/TranslationContext';\n\ntype TranslateFn = ReturnType<typeof useTranslationContext>['t'];\n\n/**\n * Optional delivery overrides a call site may pass ALONGSIDE an interaction's message params.\n * These are not consumed by the message resolver — they only affect how the announcement is\n * delivered. `debounceMs` overrides that interaction's default debounce ({@link\n * INTERACTION_DEBOUNCE_MS}) for THIS call, and enables debouncing for an interaction that has no\n * default. `delayMs` overrides the default delay ({@link INTERACTION_DELAY_MS}) for the\n * (non-debounced) immediate path. Param-less (discrete) interactions are always immediate and do\n * not accept overrides.\n *\n * `debounceMs` vs `delayMs`: a debounce collapses rapid repeats on a per-call-site timer and is\n * **cancelled if that call site unmounts** — right for a value that keeps changing in place (a\n * result count). `delayMs` schedules a single deferred emit in the shared announcer PROVIDER, so it\n * **survives the caller unmounting** — right for a one-shot confirmation whose origin (e.g. a list\n * row) disappears on the very action being confirmed (opening a channel/thread hides the list on\n * mobile). Both let the message land after a competing focus/typing read-out. `debounceMs` wins if\n * both are given.\n */\nexport type InteractionDeliveryOptions = { debounceMs?: number; delayMs?: number };\n\n/**\n * Parameters accepted by each parameterized interaction announcement.\n * Interactions that take no parameters map to `undefined`. Param-ful interactions additionally\n * accept {@link InteractionDeliveryOptions} (e.g. a per-call `debounceMs`).\n */\nexport type InteractionAnnouncementParams = {\n  /** Audio playback speed was changed via the playback-rate button. `rate` is the new multiplier. */\n  'audioPlayer.playbackRateChanged': InteractionDeliveryOptions & { rate: number };\n  /** A channel was opened from the channel list. `name` is its display title. */\n  'channel.opened': InteractionDeliveryOptions & { name: string };\n  /** A slash command was activated from the Instant Commands menu. `command` is its name. */\n  'command.selected': InteractionDeliveryOptions & { command: string };\n  'giphy.canceled': undefined;\n  'giphy.sent': undefined;\n  'giphy.shuffled': InteractionDeliveryOptions & { title?: string };\n  'poll.dialogOpened': undefined;\n  /** A poll option was dropped at a new position during keyboard reorder. */\n  'poll.optionDropped': InteractionDeliveryOptions & {\n    option: string;\n    position: number;\n  };\n  /** A poll option was picked up to start a keyboard reorder. `option` is its text (or a fallback). */\n  'poll.optionPickedUp': InteractionDeliveryOptions & { option: string };\n  'poll.optionRemoved': InteractionDeliveryOptions & { option: string };\n  'poll.sent': undefined;\n  'search.cleared': undefined;\n  'search.resultCount': InteractionDeliveryOptions & {\n    /** Whether every active source is fully loaded — appends an \"all results loaded\" clause. */\n    allResultsLoaded?: boolean;\n    count: number;\n  };\n  'suggestions.count': InteractionDeliveryOptions & {\n    count: number;\n    suggestionsLabel?: string;\n  };\n  /** A thread was opened from the thread list. `name` is its channel's display title. */\n  'thread.opened': InteractionDeliveryOptions & { name: string };\n  'user.selected': InteractionDeliveryOptions & { user: string };\n  /** A finished voice recording was added to the composer (async multi-send: not sent yet). */\n  'voiceRecording.attached': undefined;\n  'voiceRecording.paused': undefined;\n  'voiceRecording.resumed': undefined;\n  /** A finished voice recording was sent immediately as a message. */\n  'voiceRecording.sent': undefined;\n  'voiceRecording.started': undefined;\n};\n\nexport type InteractionAnnouncementType = keyof InteractionAnnouncementParams;\n\n/**\n * One entry per interaction — the single place an interaction is registered. Each\n * resolver contains a LITERAL `t(key, 'English copy')` call, which is what puts the key in the\n * catalog: `yarn build-translations` parses the call sites to generate `src/i18n/keys.ts`. Keys\n * must never be built dynamically (e.g. `t(someVariable)`) or they are missed, and an integrator\n * has no way to discover them. Adding an interaction = one line here + one\n * line in {@link InteractionAnnouncementParams} (+ an override in\n * {@link INTERACTION_PRIORITIES} only if it is not `polite`).\n */\nconst INTERACTION_MESSAGES: {\n  [T in InteractionAnnouncementType]: (\n    t: TranslateFn,\n    params: InteractionAnnouncementParams[T],\n  ) => string;\n} = {\n  // Confirms the new audio playback speed after the user cycles it with the playback-rate button.\n  // Reuses the existing (already-localized) button label so the spoken text matches the control.\n  'audioPlayer.playbackRateChanged': (t, params) =>\n    t('common.playbackSpeedX.label', 'Playback speed {{ rate }}x', { rate: params.rate }),\n  // Confirms which channel was opened after selecting it from the list. Delayed (see\n  // INTERACTION_DELAY_MS) so it lands AFTER the screen reader's announcement of the newly-focused\n  // element (the message composer auto-focuses on channel change) rather than competing with — and\n  // being superseded by — that native focus read-out. A provider-managed delay (not a per-row\n  // debounce) so it still fires when selecting the channel unmounts the list (mobile).\n  'channel.opened': (t, params) =>\n    t(\n      'a11y.interactionAnnouncements.openedChannel.ariaLabel',\n      'Opened channel: {{ name }}',\n      { name: params.name },\n    ),\n  // Confirms which slash command was activated after picking it from the Instant Commands menu.\n  // Delayed (INTERACTION_DELAY_MS) for the same reason as the \"opened\" confirmations: selecting a\n  // command closes the menu and focuses the composer textarea (whose name changes, e.g. to\n  // \"Search GIFs\"), so the screen reader reads that focus first — this lands after it. A provider\n  // delay (not a debounce) because the menu that fired it unmounts on selection.\n  'command.selected': (t, params) =>\n    t(\n      'a11y.interactionAnnouncements.commandActivated.ariaLabel',\n      'Command activated: {{ command }}',\n      { command: params.command },\n    ),\n  'giphy.canceled': (t) =>\n    t('a11y.interactionAnnouncements.giphyCanceled.ariaLabel', 'Giphy canceled'),\n  'giphy.sent': (t) =>\n    t('a11y.interactionAnnouncements.giphySent.ariaLabel', 'Giphy sent'),\n  // Giphy payloads rarely carry a human title, so include it only when present; otherwise a\n  // generic \"changed\" confirmation. Both literal keys land in the catalog.\n  'giphy.shuffled': (t, params) =>\n    params.title\n      ? t(\n          'a11y.interactionAnnouncements.giphyImageChanged.withTitle.ariaLabel',\n          'Giphy image changed: {{ title }}',\n          { title: params.title },\n        )\n      : t(\n          'a11y.interactionAnnouncements.giphyImageChanged.ariaLabel',\n          'Giphy image changed',\n        ),\n  // Spoken on poll-dialog open. Reuses the already-localized visible description for the middle\n  // clause (so the spoken and visible text stay consistent) and adds two short aria-only phrases:\n  // an explicit \"opened\" confirmation and the Enter affordance to step into the Question field.\n  'poll.dialogOpened': (t) =>\n    `${t('a11y.interactionAnnouncements.pollDialogOpened.ariaLabel', 'Poll dialog opened')}. ${t(\n      'common.createQuestionAddOptions.label',\n      'Create a question, add options, and configure poll settings',\n    )}. ${t('a11y.interactionAnnouncements.pressEnterStartTyping.ariaLabel', 'Press Enter to start typing')}.`,\n  // Keyboard reorder pickup/drop. Assertive (see INTERACTION_PRIORITIES) — immediate drag feedback\n  // that must not be queued behind other polite messages.\n  'poll.optionDropped': (t, params) =>\n    t(\n      'a11y.interactionAnnouncements.droppedPosition.ariaLabel',\n      'Dropped \"{{ option }}\" at position {{ position }}.',\n      {\n        option: params.option,\n        position: params.position,\n      },\n    ),\n  'poll.optionPickedUp': (t, params) =>\n    t(\n      'a11y.interactionAnnouncements.pickedUpUseArrow.ariaLabel',\n      'Picked up \"{{ option }}\". Use arrow keys to reorder. Press Space or Tab to drop.',\n      { option: params.option },\n    ),\n  // Confirms a poll option was removed, naming it by its text (or positional fallback). Polite so it\n  // queues behind the focus move to the next option field instead of interrupting it.\n  'poll.optionRemoved': (t, params) =>\n    t(\n      'a11y.interactionAnnouncements.removedOption.ariaLabel',\n      'Removed option {{ option }}',\n      { option: params.option },\n    ),\n  'poll.sent': (t) => t('a11y.interactionAnnouncements.pollSent.ariaLabel', 'Poll sent'),\n  'search.cleared': (t) =>\n    t('a11y.interactionAnnouncements.searchCleared.ariaLabel', 'Search cleared'),\n  // The number of items currently listed in the search results; an empty result set is spelled out\n  // rather than announced as \"0\". When the list is fully loaded, the end-of-list status is folded\n  // into THIS one announcement (reusing the visible footer's \"All results loaded\" text) instead of a\n  // competing second live-region message that would supersede the count.\n  'search.resultCount': (t, params) => {\n    if (params.count <= 0)\n      return t(\n        'a11y.interactionAnnouncements.noSearchResultsFound.ariaLabel',\n        'No search results found',\n      );\n    const count = t('a11y.interactionAnnouncements.searchResults.ariaLabel', {\n      count: params.count,\n      defaultValue_one: '{{ count }} search result',\n      defaultValue_other: '{{ count }} search results',\n    });\n    return params.allResultsLoaded\n      ? `${count}. ${t('common.resultsLoaded.label', 'All results loaded')}`\n      : count;\n  },\n  // Name the suggestion type by reusing the already-localized list label (\"5 Command\n  // Suggestions\") so the user knows what the results are; fall back to the bare count when no\n  // label is given. Both literal keys are extracted.\n  'suggestions.count': (t, params) =>\n    params.suggestionsLabel\n      ? t('a11y.interactionAnnouncements.suggestionsWithLabel.ariaLabel', {\n          count: params.count,\n          defaultValue_one: '{{ count }} {{ suggestionsLabel }}',\n          defaultValue_other: '{{ count }} {{ suggestionsLabel }}',\n          suggestionsLabel: params.suggestionsLabel,\n        })\n      : t('a11y.interactionAnnouncements.suggestions.ariaLabel', {\n          count: params.count,\n          defaultValue_one: '{{ count }} suggestion',\n          defaultValue_other: '{{ count }} suggestions',\n        }),\n  // Confirms which thread was opened after selecting it from the list; `name` is the thread's\n  // channel display title. Delayed for the same reason as `channel.opened` (the thread composer\n  // auto-focuses on open, and its focus announcement would otherwise supersede this one).\n  'thread.opened': (t, params) =>\n    t(\n      'a11y.interactionAnnouncements.openedThread.ariaLabel',\n      'Opened thread in {{ name }}',\n      { name: params.name },\n    ),\n  'user.selected': (t, params) =>\n    t(\n      'a11y.interactionAnnouncements.userSelected.ariaLabel',\n      'User selected: {{ user }}',\n      { user: params.user },\n    ),\n  // Voice recorder lifecycle — discrete, immediate, polite confirmations. Cancellation is NOT here:\n  // it already emits an app notification (\"Voice message deleted\") announced by NotificationAnnouncer,\n  // and recording errors surface as error notifications; adding them here would double-announce.\n  'voiceRecording.attached': (t) =>\n    t(\n      'a11y.interactionAnnouncements.voiceRecordingAttached.ariaLabel',\n      'Voice recording attached',\n    ),\n  'voiceRecording.paused': (t) =>\n    t('a11y.interactionAnnouncements.recordingPaused.ariaLabel', 'Recording paused'),\n  'voiceRecording.resumed': (t) =>\n    t('a11y.interactionAnnouncements.recordingResumed.ariaLabel', 'Recording resumed'),\n  'voiceRecording.sent': (t) =>\n    t('a11y.interactionAnnouncements.voiceMessageSent.ariaLabel', 'Voice message sent'),\n  'voiceRecording.started': (t) =>\n    t('a11y.interactionAnnouncements.recordingStarted.ariaLabel', 'Recording started'),\n};\n\n/**\n * Per-interaction aria-live priority. Interactions default to `polite`; list one\n * here only to override it (e.g. with `assertive`).\n */\nconst INTERACTION_PRIORITIES: Partial<\n  Record<InteractionAnnouncementType, AriaLivePriority>\n> = {\n  // Assertive on open: a polite update fired around the dialog's focus-entry announcement is\n  // dropped; assertive interrupts and is spoken (VoiceOver demotes the aria-describedby hint).\n  'poll.dialogOpened': 'assertive',\n  // Keyboard reorder feedback must be immediate (interrupt), not queued behind polite messages.\n  'poll.optionDropped': 'assertive',\n  'poll.optionPickedUp': 'assertive',\n};\n\n/**\n * Per-interaction dedupe window (ms): an identical message for this interaction is announced at\n * most once per window (see {@link AriaLiveAnnounceOptions.dedupeMs}). List an interaction here\n * only when the SAME open/mount can fire it more than once in quick succession — e.g. a mount\n * effect double-invoked by React StrictMode (dev) — so the user does not hear a duplicate.\n */\nconst INTERACTION_DEDUPE_MS: Partial<Record<InteractionAnnouncementType, number>> = {\n  // The audio player is pooled: if the same asset is rendered by two widgets they share one player,\n  // so a single rate change fires this from both consumers. Dedupe collapses the identical message.\n  // (Cycling always lands on a different rate → different text, so this never swallows a real change.)\n  'audioPlayer.playbackRateChanged': 300,\n  'poll.dialogOpened': 1000,\n};\n\n/**\n * Default per-interaction debounce delay (ms). Only list rapidly-updating streams where just the\n * settled value should be read (e.g. the autocomplete count as the query filters). Discrete\n * confirmations (Giphy/Poll sent, user selected) are NOT listed and announce immediately. A call\n * site can override (or opt into) a delay for a single call via `params.debounceMs` — see\n * {@link InteractionDeliveryOptions}.\n *\n * `suggestions.count` is a CONSEQUENCE OF TYPING, so the delay does double duty: it coalesces\n * rapid filters into the settled value AND lets the screen reader's per-keystroke typing echo\n * (the spoken character + field re-read) finish first. A polite update that lands mid-echo gets\n * queued behind a long re-read and is perceived as buried; waiting past the echo makes the count\n * the next thing spoken once the user pauses. This is a heuristic — echo length varies with the\n * SR's \"speak typed words/characters\" setting and field content — so tune if it still collides.\n */\nconst INTERACTION_DEBOUNCE_MS: Partial<Record<InteractionAnnouncementType, number>> = {\n  // Coalesce the result count as the query filters / results stream in, and let the screen reader's\n  // typing echo finish first (same rationale as `suggestions.count`, slightly longer as search\n  // results can arrive over the network in bursts). The end-of-list status rides along in this same\n  // message (see `search.resultCount` resolver), so there is no second announcement to compete.\n  'search.resultCount': 1000,\n  'suggestions.count': 500,\n};\n\n/**\n * Default per-interaction delay (ms) for the immediate (non-debounced) path — a single deferred\n * emit scheduled in the announcer PROVIDER (see {@link AriaLiveAnnounceOptions.delayMs}), so it\n * SURVIVES the calling component unmounting (unlike a debounce, whose timer is cleared on unmount).\n *\n * Opening a channel/thread moves focus to the (auto-focusing) message composer; the screen reader\n * announces that newly-focused element first, and a live-region message emitted alongside it is\n * superseded and dropped. The delay defers the confirmation past that focus read-out so it is spoken\n * next, in a calm moment. It is a provider delay rather than a debounce specifically because\n * selecting the item can unmount its list row (and the whole list, on mobile) — a per-row debounce\n * would be cancelled mid-flight, swallowing the confirmation.\n */\nconst INTERACTION_DELAY_MS: Partial<Record<InteractionAnnouncementType, number>> = {\n  'channel.opened': 1500,\n  'command.selected': 1500,\n  'thread.opened': 1500,\n};\n\n// Overloads enforce that parameterized interactions require their params and that\n// param-less interactions reject extra arguments.\ntype AnnounceInteraction = {\n  <T extends InteractionAnnouncementType>(\n    interaction: InteractionAnnouncementParams[T] extends undefined ? T : never,\n  ): void;\n  <T extends InteractionAnnouncementType>(\n    interaction: InteractionAnnouncementParams[T] extends undefined ? never : T,\n    params: InteractionAnnouncementParams[T],\n  ): void;\n};\n\nexport type UseInteractionAnnouncementsValue = {\n  /**\n   * Announce a predefined interaction event to assistive technology. The\n   * interaction name maps to a localized message and a baked-in aria-live\n   * priority.\n   */\n  announceInteraction: AnnounceInteraction;\n  /**\n   * Cancel pending (debounced, not-yet-spoken) announcements: a single `interaction`, or all when\n   * omitted. Call this when the source of a debounced announcement is torn down (e.g. search exited)\n   * so a queued message is not spoken after its context is gone. An announcement already emitted into\n   * the live region cannot be recalled.\n   */\n  cancelInteraction: (interaction?: InteractionAnnouncementType) => void;\n};\n\n/**\n * Thin, typed wrapper over the aria-live announcer exposing intention-revealing\n * helpers for transient, user-initiated UI interactions (e.g. a Giphy being\n * sent, a poll being created, a mention being picked). They map to i18n keys with\n * baked-in priorities and reuse the existing live region via\n * {@link useAriaLiveAnnouncer}. New interactions are registered as a single entry\n * in {@link INTERACTION_MESSAGES}.\n */\nexport const useInteractionAnnouncements = (): UseInteractionAnnouncementsValue => {\n  const announce = useAriaLiveAnnouncer();\n  const { t } = useTranslationContext();\n  // Per-interaction debounce: each type has its own timer + delay from INTERACTION_DEBOUNCE_MS,\n  // so e.g. the typing-driven `suggestions.count` can wait longer (to clear the screen reader's\n  // typing echo) without affecting any other debounced interaction.\n  const { announce: announceDebounced, cancel: cancelDebounced } =\n    useDebouncedAnnounce(announce);\n  // Cancel fn of the still-pending provider-delayed emit per interaction. A second trigger of the\n  // same interaction within its delay window supersedes the first (so only the latest is spoken).\n  // NOT cleared on unmount on purpose — provider-delayed emits are designed to survive the caller\n  // unmounting (e.g. channel.opened fires after its list row is gone).\n  const pendingImmediateCancelsRef = useRef<\n    Partial<Record<InteractionAnnouncementType, () => void>>\n  >({});\n\n  return useMemo(\n    () => ({\n      announceInteraction: (\n        interaction: InteractionAnnouncementType,\n        params?: InteractionAnnouncementParams[InteractionAnnouncementType],\n      ) => {\n        const resolveMessage = INTERACTION_MESSAGES[interaction] as (\n          t: TranslateFn,\n          params: InteractionAnnouncementParams[InteractionAnnouncementType],\n        ) => string;\n\n        if (!resolveMessage) return;\n\n        const message = resolveMessage(t, params as never);\n        const priority = INTERACTION_PRIORITIES[interaction] ?? 'polite';\n\n        // A per-call `params.debounceMs` overrides the registered default (and can opt an\n        // otherwise-immediate interaction into debouncing).\n        const debounceMs =\n          (params as InteractionDeliveryOptions | undefined)?.debounceMs ??\n          INTERACTION_DEBOUNCE_MS[interaction];\n        if (debounceMs === undefined) {\n          // Immediate path. `delayMs` (if any) is a provider-managed deferral that survives this\n          // call site unmounting — used by the \"opened\" confirmations, whose list row disappears on\n          // selection. `debounceMs` takes precedence over `delayMs` when both are set.\n          const delayMs =\n            (params as InteractionDeliveryOptions | undefined)?.delayMs ??\n            INTERACTION_DELAY_MS[interaction];\n          // Supersede a still-pending delayed emit of the same interaction so a rapid re-trigger\n          // (e.g. selecting a second channel within the 1500ms window) speaks only the latest.\n          pendingImmediateCancelsRef.current[interaction]?.();\n          pendingImmediateCancelsRef.current[interaction] = announce(message, {\n            dedupeMs: INTERACTION_DEDUPE_MS[interaction],\n            delayMs,\n            priority,\n          });\n          return;\n        }\n\n        // Debounced stream (e.g. suggestions.count): coalesce rapid updates into the settled\n        // value, on a channel keyed by interaction type with that type's own delay. We do NOT\n        // dedupe an unchanged message here — whether a repeat is meaningful is the caller's call\n        // (e.g. SuggestionList re-announces the count on each genuine re-filter so the user gets\n        // feedback even when the count is steady, such as emoji results capped at a constant N).\n        // The debounce window already collapses idle/rapid duplicates.\n        announceDebounced(interaction, message, debounceMs, priority);\n      },\n      cancelInteraction: (interaction?: InteractionAnnouncementType) => {\n        cancelDebounced(interaction);\n        const pending = pendingImmediateCancelsRef.current;\n        if (interaction) {\n          pending[interaction]?.();\n          delete pending[interaction];\n        } else {\n          Object.values(pending).forEach((cancel) => cancel?.());\n          pendingImmediateCancelsRef.current = {};\n        }\n      },\n    }),\n    [announce, announceDebounced, cancelDebounced, t],\n  );\n};\n"],"mappings":"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"}

package/dist/es/components/Accessibility/useAriaLiveAnnouncer.mjs

@@ -2,14 +2,11 @@ import { createContext, useContext } from "react";
 //#region src/components/Accessibility/useAriaLiveAnnouncer.ts
 var noopAnnounce = () => () => void 0;
 var AriaLiveAnnouncerContext = createContext(void 0);
-var useAriaLiveAnnouncer = () => {
-	const contextValue = useContext(AriaLiveAnnouncerContext);
-	if (!contextValue) {
-		console.warn("The useAriaLiveAnnouncer hook was called outside of an AriaLiveAnnouncerProvider.");
-		return noopAnnounce;
-	}
-	return contextValue.announce;
-};
+/**
+* Announcements are a progressive enhancement: outside an `AriaLiveAnnouncerProvider` this is a
+* no-op rather than an error.
+*/
+var useAriaLiveAnnouncer = () => useContext(AriaLiveAnnouncerContext)?.announce ?? noopAnnounce;
 //#endregion
 export { AriaLiveAnnouncerContext, useAriaLiveAnnouncer };
 

package/dist/es/components/Accessibility/useAriaLiveAnnouncer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useAriaLiveAnnouncer.mjs","names":[],"sources":["../../../../src/components/Accessibility/useAriaLiveAnnouncer.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type AriaLivePriority = 'assertive' | 'polite';\n\nexport type AriaLiveAnnounceOptions = {\n  priority?: AriaLivePriority;\n  /**\n   * Delay (ms) before the message is placed in the live region. Use to let a competing\n   * screen-reader utterance settle first — e.g. a dialog-identity announcement made while a\n   * field is being auto-focused is otherwise superseded by the field's focus announcement.\n   * Omitted/0 announces immediately.\n   */\n  delayMs?: number;\n  /**\n   * When set, an identical `message` is announced at most once per this window (ms); a repeat\n   * within the window is suppressed (returns a no-op cancel). The window starts when the message\n   * is actually announced. Guards against duplicate announcements — e.g. an effect double-invoked\n   * by React StrictMode, or rapid re-renders firing the same message.\n   */\n  dedupeMs?: number;\n};\n\n/**\n * Announce `message` to assistive technology. Delivery is controlled by an options object\n * (`priority` defaults to `'polite'`). Returns a `cancel` function: for a delayed announcement it\n * prevents a still-pending message from being announced (call it from effect cleanup so a closing\n * surface does not announce after unmount); for an immediate announcement it is a no-op.\n */\nexport type AriaLiveAnnounce = (\n  message: string,\n  options?: AriaLiveAnnounceOptions,\n) => () => void;\n\nexport type AriaLiveAnnouncerContextValue = {\n  announce: AriaLiveAnnounce;\n};\n\nconst noopAnnounce: AriaLiveAnnounce = () => () => undefined;\n\nexport const AriaLiveAnnouncerContext = createContext<\n  AriaLiveAnnouncerContextValue | undefined\n>(undefined);\n\nexport const useAriaLiveAnnouncer = () => {\n  const contextValue = useContext(AriaLiveAnnouncerContext);\n\n  if (!contextValue) {\n    console.warn(\n      'The useAriaLiveAnnouncer hook was called outside of an AriaLiveAnnouncerProvider.',\n    );\n\n    return noopAnnounce;\n  }\n\n  return contextValue.announce;\n};\n"],"mappings":";;AAqCA,IAAM,2BAA6C,KAAA;AAEnD,IAAa,2BAA2B,cAEtC,KAAA,CAAS;AAEX,IAAa,6BAA6B;CACxC,MAAM,eAAe,WAAW,wBAAwB;CAExD,IAAI,CAAC,cAAc;EACjB,QAAQ,KACN,mFACF;EAEA,OAAO;CACT;CAEA,OAAO,aAAa;AACtB"}
+{"version":3,"file":"useAriaLiveAnnouncer.mjs","names":[],"sources":["../../../../src/components/Accessibility/useAriaLiveAnnouncer.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type AriaLivePriority = 'assertive' | 'polite';\n\nexport type AriaLiveAnnounceOptions = {\n  priority?: AriaLivePriority;\n  /**\n   * Delay (ms) before the message is placed in the live region. Use to let a competing\n   * screen-reader utterance settle first — e.g. a dialog-identity announcement made while a\n   * field is being auto-focused is otherwise superseded by the field's focus announcement.\n   * Omitted/0 announces immediately.\n   */\n  delayMs?: number;\n  /**\n   * When set, an identical `message` is announced at most once per this window (ms); a repeat\n   * within the window is suppressed (returns a no-op cancel). The window starts when the message\n   * is actually announced. Guards against duplicate announcements — e.g. an effect double-invoked\n   * by React StrictMode, or rapid re-renders firing the same message.\n   */\n  dedupeMs?: number;\n};\n\n/**\n * Announce `message` to assistive technology. Delivery is controlled by an options object\n * (`priority` defaults to `'polite'`). Returns a `cancel` function: for a delayed announcement it\n * prevents a still-pending message from being announced (call it from effect cleanup so a closing\n * surface does not announce after unmount); for an immediate announcement it is a no-op.\n */\nexport type AriaLiveAnnounce = (\n  message: string,\n  options?: AriaLiveAnnounceOptions,\n) => () => void;\n\nexport type AriaLiveAnnouncerContextValue = {\n  announce: AriaLiveAnnounce;\n};\n\nconst noopAnnounce: AriaLiveAnnounce = () => () => undefined;\n\nexport const AriaLiveAnnouncerContext = createContext<\n  AriaLiveAnnouncerContextValue | undefined\n>(undefined);\n\n/**\n * Announcements are a progressive enhancement: outside an `AriaLiveAnnouncerProvider` this is a\n * no-op rather than an error.\n */\nexport const useAriaLiveAnnouncer = () =>\n  useContext(AriaLiveAnnouncerContext)?.announce ?? noopAnnounce;\n"],"mappings":";;AAqCA,IAAM,2BAA6C,KAAA;AAEnD,IAAa,2BAA2B,cAEtC,KAAA,CAAS;;;;;AAMX,IAAa,6BACX,WAAW,wBAAwB,CAAC,EAAE,YAAY"}

package/dist/es/components/Attachment/Attachment.mjs

@@ -1,9 +1,10 @@
+import { AttachmentContextProvider, defaultAttachmentContextValue } from "../../context/AttachmentContext.mjs";
 import { SUPPORTED_VIDEO_FORMATS } from "./utils.mjs";
 import { defaultAttachmentActionsDefaultFocus } from "./AttachmentActions.mjs";
 import { CardContainer, FileContainer, GeolocationContainer, GiphyContainer, MediaContainer, UnsupportedAttachmentContainer } from "./AttachmentContainer.mjs";
 import { createElement, useMemo } from "react";
+import { isAudioAttachment, isFileAttachment, isImageAttachment, isScrapedContent, isSharedLocationResponseData, isVideoAttachment, isVoiceRecordingAttachment } from "stream-chat";
 import { jsx } from "react/jsx-runtime";
-import { isAudioAttachment, isFileAttachment, isImageAttachment, isScrapedContent, isSharedLocationResponse, isVideoAttachment, isVoiceRecordingAttachment } from "stream-chat";
 //#region src/components/Attachment/Attachment.tsx
 var ATTACHMENT_GROUPS_ORDER = [
 	"media",
@@ -17,21 +18,35 @@ var ATTACHMENT_GROUPS_ORDER = [
 * A component used for rendering message attachments.
 */
 var Attachment = (props) => {
-	const { attachmentActionsDefaultFocus = defaultAttachmentActionsDefaultFocus, attachments, ...rest } = props;
+	const { attachmentActionsDefaultFocus = defaultAttachmentActionsDefaultFocus, attachments, giphyVersion, imageAttachmentSizeHandler, shouldGenerateVideoThumbnail, videoAttachmentSizeHandler, ...rest } = props;
+	const attachmentContextValue = useMemo(() => ({
+		giphyVersion: giphyVersion ?? defaultAttachmentContextValue.giphyVersion,
+		imageAttachmentSizeHandler: imageAttachmentSizeHandler ?? defaultAttachmentContextValue.imageAttachmentSizeHandler,
+		shouldGenerateVideoThumbnail: shouldGenerateVideoThumbnail ?? defaultAttachmentContextValue.shouldGenerateVideoThumbnail,
+		videoAttachmentSizeHandler: videoAttachmentSizeHandler ?? defaultAttachmentContextValue.videoAttachmentSizeHandler
+	}), [
+		giphyVersion,
+		imageAttachmentSizeHandler,
+		shouldGenerateVideoThumbnail,
+		videoAttachmentSizeHandler
+	]);
 	const groupedAttachments = useMemo(() => renderGroupedAttachments({
 		attachmentActionsDefaultFocus,
 		attachments,
 		...rest
 	}), [attachments, attachmentActionsDefaultFocus]);
-	return /* @__PURE__ */ jsx("div", {
-		className: "str-chat__attachment-list",
-		children: ATTACHMENT_GROUPS_ORDER.reduce((acc, groupName) => [...acc, ...groupedAttachments[groupName]], [])
+	return /* @__PURE__ */ jsx(AttachmentContextProvider, {
+		value: attachmentContextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "str-chat__attachment-list",
+			children: ATTACHMENT_GROUPS_ORDER.reduce((acc, groupName) => [...acc, ...groupedAttachments[groupName]], [])
+		})
 	});
 };
 var renderGroupedAttachments = ({ attachments, ...rest }) => {
 	const mediaAttachments = [];
 	const containers = attachments.reduce((typeMap, attachment) => {
-		if (isSharedLocationResponse(attachment)) typeMap.geolocation.push(/* @__PURE__ */ createElement(GeolocationContainer, {
+		if (isSharedLocationResponseData(attachment)) typeMap.geolocation.push(/* @__PURE__ */ createElement(GeolocationContainer, {
 			...rest,
 			key: `geolocation-${typeMap.geolocation.length}`,
 			location: attachment

package/dist/es/components/Attachment/Attachment.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Attachment.mjs","names":[],"sources":["../../../../src/components/Attachment/Attachment.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { SharedLocationResponse, Attachment as StreamAttachment } from 'stream-chat';\nimport {\n  isAudioAttachment,\n  isFileAttachment,\n  isImageAttachment,\n  isScrapedContent,\n  isSharedLocationResponse,\n  isVideoAttachment,\n  isVoiceRecordingAttachment,\n} from 'stream-chat';\n\nimport {\n  CardContainer,\n  FileContainer,\n  GeolocationContainer,\n  GiphyContainer,\n  MediaContainer,\n  UnsupportedAttachmentContainer,\n} from './AttachmentContainer';\nimport type { GroupedRenderedAttachment } from './utils';\nimport { SUPPORTED_VIDEO_FORMATS } from './utils';\nimport type {\n  AttachmentActionsDefaultFocusByType,\n  AttachmentActionsProps,\n} from './AttachmentActions';\nimport { defaultAttachmentActionsDefaultFocus } from './AttachmentActions';\nimport type { AudioProps } from './Audio';\nimport type { VoiceRecordingProps } from './VoiceRecording';\nimport type { CardProps } from './LinkPreview/Card';\nimport type { FileAttachmentProps } from './FileAttachment';\nimport type { GalleryItem } from '../Gallery';\nimport type { UnsupportedAttachmentProps } from './UnsupportedAttachment';\nimport type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';\nimport type { GeolocationProps } from './Geolocation';\nimport type { GiphyAttachmentProps } from './Giphy';\nimport type { VideoPlayerProps } from '../VideoPlayer';\nimport type { ModalGalleryProps } from './ModalGallery';\nimport type { ImageProps } from './Image';\n\nexport const ATTACHMENT_GROUPS_ORDER = [\n  'media',\n  'giphy',\n  'card',\n  'geolocation',\n  'file',\n  'unsupported',\n] as const;\n\nexport type AttachmentProps = {\n  /** The message attachments to render, see [attachment structure](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) **/\n  attachments: (StreamAttachment | SharedLocationResponse)[];\n  /**\tThe handler function to call when an action is performed on an attachment, examples include canceling a \\/giphy command or shuffling the results. */\n  actionHandler?: ActionHandlerReturnType;\n  /**\n   * Which attachment action button receives focus on initial render, keyed by attachment type.\n   * Values must match an action's `value` (e.g. `'send'`, `'cancel'`, `'shuffle'` for giphy attachment).\n   * Default: `{ giphy: 'send' }`.\n   * To disable auto-focus (e.g. when rendering the Giphy preview above the composer so focus\n   * stays in the message input), pass an empty object: `attachmentActionsDefaultFocus={{}}`.\n   */\n  attachmentActionsDefaultFocus?: AttachmentActionsDefaultFocusByType;\n  /** Custom UI component for displaying attachment actions, defaults to and accepts same props as: [AttachmentActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/AttachmentActions.tsx) */\n  AttachmentActions?: React.ComponentType<AttachmentActionsProps>;\n  /** Custom UI component for displaying an audio type attachment, defaults to and accepts same props as: [Audio](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Audio.tsx) */\n  Audio?: React.ComponentType<AudioProps>;\n  /** Custom UI component for displaying a card type attachment, defaults to and accepts same props as: [Card](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Card.tsx) */\n  Card?: React.ComponentType<CardProps>;\n  /** Custom UI component for displaying a file type attachment, defaults to and accepts same props as: [File](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/FileAttachment.tsx) */\n  File?: React.ComponentType<FileAttachmentProps>;\n  /** Custom UI component for displaying a gallery of image type attachments, defaults to and accepts same props as: [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) */\n  ModalGallery?: React.ComponentType<ModalGalleryProps>;\n  Geolocation?: React.ComponentType<GeolocationProps>;\n  /** Custom UI component for displaying a Giphy image, defaults to and accepts same props as: [Giphy](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Giphy.tsx) */\n  Giphy?: React.ComponentType<GiphyAttachmentProps>;\n  /** Custom UI component for displaying an image type attachment, defaults to and accepts same props as: [Image](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Image.tsx) */\n  Image?: React.ComponentType<ImageProps>;\n  /** Optional flag to signal that an attachment is a displayed as a part of a quoted message */\n  isQuoted?: boolean;\n  /** Custom UI component for displaying a media type attachment, defaults to `ReactPlayer` from 'react-player' */\n  Media?: React.ComponentType<VideoPlayerProps>;\n  /** Custom UI component for displaying unsupported attachment types, defaults to NullComponent */\n  UnsupportedAttachment?: React.ComponentType<UnsupportedAttachmentProps>;\n  /** Custom UI component for displaying an audio recording attachment, defaults to and accepts same props as: [VoiceRecording](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/VoiceRecording.tsx) */\n  VoiceRecording?: React.ComponentType<VoiceRecordingProps>;\n};\n\n/**\n * A component used for rendering message attachments.\n */\nexport const Attachment = (props: AttachmentProps) => {\n  const {\n    attachmentActionsDefaultFocus = defaultAttachmentActionsDefaultFocus,\n    attachments,\n    ...rest\n  } = props;\n\n  const groupedAttachments = useMemo(\n    () =>\n      renderGroupedAttachments({\n        attachmentActionsDefaultFocus,\n        attachments,\n        ...rest,\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [attachments, attachmentActionsDefaultFocus],\n  );\n\n  return (\n    <div className='str-chat__attachment-list'>\n      {ATTACHMENT_GROUPS_ORDER.reduce(\n        (acc, groupName) => [...acc, ...groupedAttachments[groupName]],\n        [] as React.ReactNode[],\n      )}\n    </div>\n  );\n};\n\nconst renderGroupedAttachments = ({\n  attachments,\n  ...rest\n}: AttachmentProps): GroupedRenderedAttachment => {\n  const mediaAttachments: GalleryItem[] = [];\n  const containers = attachments.reduce<GroupedRenderedAttachment>(\n    (typeMap, attachment) => {\n      if (isSharedLocationResponse(attachment)) {\n        typeMap.geolocation.push(\n          <GeolocationContainer\n            {...rest}\n            key={`geolocation-${typeMap.geolocation.length}`}\n            location={attachment}\n          />,\n        );\n      } else if (attachment.type === 'giphy') {\n        typeMap.card.push(\n          <GiphyContainer\n            key={`giphy-${typeMap.giphy.length}`}\n            {...rest}\n            attachment={attachment}\n          />,\n        );\n      } else if (isScrapedContent(attachment)) {\n        typeMap.card.push(\n          <CardContainer\n            key={`card-${typeMap.card.length}`}\n            {...rest}\n            attachment={attachment}\n          />,\n        );\n      } else if (\n        isImageAttachment(attachment) ||\n        isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)\n      ) {\n        mediaAttachments.push(attachment as GalleryItem);\n      } else if (\n        isAudioAttachment(attachment) ||\n        isVoiceRecordingAttachment(attachment) ||\n        isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)\n      ) {\n        typeMap.file.push(\n          <FileContainer\n            key={`file-${typeMap.file.length}`}\n            {...rest}\n            attachment={attachment}\n          />,\n        );\n      } else {\n        typeMap.unsupported.push(\n          <UnsupportedAttachmentContainer\n            key={`unsupported-${typeMap.unsupported.length}`}\n            {...rest}\n            attachment={attachment}\n          />,\n        );\n      }\n\n      return typeMap;\n    },\n    {\n      card: [],\n      file: [],\n      geolocation: [],\n      giphy: [],\n      media: [],\n      unsupported: [],\n    },\n  );\n\n  if (mediaAttachments.length) {\n    containers.media.push(\n      <MediaContainer key='media-container' {...rest} attachments={mediaAttachments} />,\n    );\n  }\n\n  return containers;\n};\n"],"mappings":";;;;;;;AAwCA,IAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;AACF;;;;AA2CA,IAAa,cAAc,UAA2B;CACpD,MAAM,EACJ,gCAAgC,sCAChC,aACA,GAAG,SACD;CAEJ,MAAM,qBAAqB,cAEvB,yBAAyB;EACvB;EACA;EACA,GAAG;CACL,CAAC,GAEH,CAAC,aAAa,6BAA6B,CAC7C;CAEA,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,wBAAwB,QACtB,KAAK,cAAc,CAAC,GAAG,KAAK,GAAG,mBAAmB,UAAU,GAC7D,CAAC,CACH;CACG,CAAA;AAET;AAEA,IAAM,4BAA4B,EAChC,aACA,GAAG,WAC6C;CAChD,MAAM,mBAAkC,CAAC;CACzC,MAAM,aAAa,YAAY,QAC5B,SAAS,eAAe;EACvB,IAAI,yBAAyB,UAAU,GACrC,QAAQ,YAAY,KAClB,8BAAC,sBAAD;GACE,GAAI;GACJ,KAAK,eAAe,QAAQ,YAAY;GACxC,UAAU;EACX,CAAA,CACH;OACK,IAAI,WAAW,SAAS,SAC7B,QAAQ,KAAK,KACX,oBAAC,gBAAD;GAEE,GAAI;GACQ;EACb,GAHM,SAAS,QAAQ,MAAM,QAG7B,CACH;OACK,IAAI,iBAAiB,UAAU,GACpC,QAAQ,KAAK,KACX,oBAAC,eAAD;GAEE,GAAI;GACQ;EACb,GAHM,QAAQ,QAAQ,KAAK,QAG3B,CACH;OACK,IACL,kBAAkB,UAAU,KAC5B,kBAAkB,YAAY,uBAAuB,GAErD,iBAAiB,KAAK,UAAyB;OAC1C,IACL,kBAAkB,UAAU,KAC5B,2BAA2B,UAAU,KACrC,iBAAiB,YAAY,uBAAuB,GAEpD,QAAQ,KAAK,KACX,oBAAC,eAAD;GAEE,GAAI;GACQ;EACb,GAHM,QAAQ,QAAQ,KAAK,QAG3B,CACH;OAEA,QAAQ,YAAY,KAClB,oBAAC,gCAAD;GAEE,GAAI;GACQ;EACb,GAHM,eAAe,QAAQ,YAAY,QAGzC,CACH;EAGF,OAAO;CACT,GACA;EACE,MAAM,CAAC;EACP,MAAM,CAAC;EACP,aAAa,CAAC;EACd,OAAO,CAAC;EACR,OAAO,CAAC;EACR,aAAa,CAAC;CAChB,CACF;CAEA,IAAI,iBAAiB,QACnB,WAAW,MAAM,KACf,oBAAC,gBAAD;EAAsC,GAAI;EAAM,aAAa;CAAmB,GAA5D,iBAA4D,CAClF;CAGF,OAAO;AACT"}
+{"version":3,"file":"Attachment.mjs","names":[],"sources":["../../../../src/components/Attachment/Attachment.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type {\n  GiphyVersions,\n  SharedLocationResponseData,\n  Attachment as StreamAttachment,\n} from 'stream-chat';\nimport {\n  isAudioAttachment,\n  isFileAttachment,\n  isImageAttachment,\n  isScrapedContent,\n  isSharedLocationResponseData,\n  isVideoAttachment,\n  isVoiceRecordingAttachment,\n} from 'stream-chat';\n\nimport {\n  CardContainer,\n  FileContainer,\n  GeolocationContainer,\n  GiphyContainer,\n  MediaContainer,\n  UnsupportedAttachmentContainer,\n} from './AttachmentContainer';\nimport type { GroupedRenderedAttachment } from './utils';\nimport { SUPPORTED_VIDEO_FORMATS } from './utils';\nimport type {\n  AttachmentActionsDefaultFocusByType,\n  AttachmentActionsProps,\n} from './AttachmentActions';\nimport { defaultAttachmentActionsDefaultFocus } from './AttachmentActions';\nimport type { AudioProps } from './Audio';\nimport type { VoiceRecordingProps } from './VoiceRecording';\nimport type { CardProps } from './LinkPreview/Card';\nimport type { FileAttachmentProps } from './FileAttachment';\nimport type { UnsupportedAttachmentProps } from './UnsupportedAttachment';\nimport type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';\nimport type { GeolocationProps } from './Geolocation';\nimport type { GiphyAttachmentProps } from './Giphy';\nimport type { VideoPlayerProps } from '../VideoPlayer';\nimport type { ModalGalleryProps } from './ModalGallery';\nimport type { ImageProps } from './Image';\nimport {\n  AttachmentContextProvider,\n  defaultAttachmentContextValue,\n  type ImageAttachmentConfiguration,\n  type VideoAttachmentConfiguration,\n} from '../../context/AttachmentContext';\n\nexport const ATTACHMENT_GROUPS_ORDER = [\n  'media',\n  'giphy',\n  'card',\n  'geolocation',\n  'file',\n  'unsupported',\n] as const;\n\nexport type ImageAttachmentSizeHandler = (\n  attachment: StreamAttachment,\n  element: HTMLElement,\n) => ImageAttachmentConfiguration;\n\nexport type VideoAttachmentSizeHandler = (\n  attachment: StreamAttachment,\n  element: HTMLElement,\n  shouldGenerateVideoThumbnail: boolean,\n) => VideoAttachmentConfiguration;\n\nexport type AttachmentProps = {\n  /** The message attachments to render, see [attachment structure](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) **/\n  attachments: (StreamAttachment | SharedLocationResponseData)[];\n  /**\tThe handler function to call when an action is performed on an attachment, examples include canceling a \\/giphy command or shuffling the results. */\n  actionHandler?: ActionHandlerReturnType;\n  /**\n   * Which attachment action button receives focus on initial render, keyed by attachment type.\n   * Values must match an action's `value` (e.g. `'send'`, `'cancel'`, `'shuffle'` for giphy attachment).\n   * Default: `{ giphy: 'send' }`.\n   * To disable auto-focus (e.g. when rendering the Giphy preview above the composer so focus\n   * stays in the message input), pass an empty object: `attachmentActionsDefaultFocus={{}}`.\n   */\n  attachmentActionsDefaultFocus?: AttachmentActionsDefaultFocusByType;\n  /** Custom UI component for displaying attachment actions, defaults to and accepts same props as: [AttachmentActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/AttachmentActions.tsx) */\n  AttachmentActions?: React.ComponentType<AttachmentActionsProps>;\n  /** Custom UI component for displaying an audio type attachment, defaults to and accepts same props as: [Audio](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Audio.tsx) */\n  Audio?: React.ComponentType<AudioProps>;\n  /** Custom UI component for displaying a card type attachment, defaults to and accepts same props as: [Card](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Card.tsx) */\n  Card?: React.ComponentType<CardProps>;\n  /** Custom UI component for displaying a file type attachment, defaults to and accepts same props as: [File](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/FileAttachment.tsx) */\n  File?: React.ComponentType<FileAttachmentProps>;\n  /** Custom UI component for displaying a gallery of image type attachments, defaults to and accepts same props as: [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) */\n  ModalGallery?: React.ComponentType<ModalGalleryProps>;\n  Geolocation?: React.ComponentType<GeolocationProps>;\n  /** Custom UI component for displaying a Giphy image, defaults to and accepts same props as: [Giphy](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Giphy.tsx) */\n  Giphy?: React.ComponentType<GiphyAttachmentProps>;\n  /** Custom UI component for displaying an image type attachment, defaults to and accepts same props as: [Image](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Image.tsx) */\n  Image?: React.ComponentType<ImageProps>;\n  /** Giphy rendition to use when rendering giphy attachments */\n  giphyVersion?: GiphyVersions;\n  /** Handler used to size image attachments responsively */\n  imageAttachmentSizeHandler?: ImageAttachmentSizeHandler;\n  /** Optional flag to signal that an attachment is a displayed as a part of a quoted message */\n  isQuoted?: boolean;\n  /** Custom UI component for displaying a media type attachment, defaults to `ReactPlayer` from 'react-player' */\n  Media?: React.ComponentType<VideoPlayerProps>;\n  /** Whether a video thumbnail should be rendered before playback starts */\n  shouldGenerateVideoThumbnail?: boolean;\n  /** Custom UI component for displaying unsupported attachment types, defaults to NullComponent */\n  UnsupportedAttachment?: React.ComponentType<UnsupportedAttachmentProps>;\n  /** Handler used to size video attachments responsively */\n  videoAttachmentSizeHandler?: VideoAttachmentSizeHandler;\n  /** Custom UI component for displaying an audio recording attachment, defaults to and accepts same props as: [VoiceRecording](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/VoiceRecording.tsx) */\n  VoiceRecording?: React.ComponentType<VoiceRecordingProps>;\n};\n\n/**\n * A component used for rendering message attachments.\n */\nexport const Attachment = (props: AttachmentProps) => {\n  const {\n    attachmentActionsDefaultFocus = defaultAttachmentActionsDefaultFocus,\n    attachments,\n    giphyVersion,\n    imageAttachmentSizeHandler,\n    shouldGenerateVideoThumbnail,\n    videoAttachmentSizeHandler,\n    ...rest\n  } = props;\n  const attachmentContextValue = useMemo(\n    () => ({\n      giphyVersion: giphyVersion ?? defaultAttachmentContextValue.giphyVersion,\n      imageAttachmentSizeHandler:\n        imageAttachmentSizeHandler ??\n        defaultAttachmentContextValue.imageAttachmentSizeHandler,\n      shouldGenerateVideoThumbnail:\n        shouldGenerateVideoThumbnail ??\n        defaultAttachmentContextValue.shouldGenerateVideoThumbnail,\n      videoAttachmentSizeHandler:\n        videoAttachmentSizeHandler ??\n        defaultAttachmentContextValue.videoAttachmentSizeHandler,\n    }),\n    [\n      giphyVersion,\n      imageAttachmentSizeHandler,\n      shouldGenerateVideoThumbnail,\n      videoAttachmentSizeHandler,\n    ],\n  );\n\n  const groupedAttachments = useMemo(\n    () =>\n      renderGroupedAttachments({\n        attachmentActionsDefaultFocus,\n        attachments,\n        ...rest,\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [attachments, attachmentActionsDefaultFocus],\n  );\n\n  return (\n    <AttachmentContextProvider value={attachmentContextValue}>\n      <div className='str-chat__attachment-list'>\n        {ATTACHMENT_GROUPS_ORDER.reduce(\n          (acc, groupName) => [...acc, ...groupedAttachments[groupName]],\n          [] as React.ReactNode[],\n        )}\n      </div>\n    </AttachmentContextProvider>\n  );\n};\n\nconst renderGroupedAttachments = ({\n  attachments,\n  ...rest\n}: AttachmentProps): GroupedRenderedAttachment => {\n  const mediaAttachments: StreamAttachment[] = [];\n  const containers = attachments.reduce<GroupedRenderedAttachment>(\n    (typeMap, attachment) => {\n      if (isSharedLocationResponseData(attachment)) {\n        typeMap.geolocation.push(\n          <GeolocationContainer\n            {...rest}\n            key={`geolocation-${typeMap.geolocation.length}`}\n            location={attachment}\n          />,\n        );\n      } else if (attachment.type === 'giphy') {\n        typeMap.card.push(\n          <GiphyContainer\n            key={`giphy-${typeMap.giphy.length}`}\n            {...rest}\n            attachment={attachment}\n          />,\n        );\n      } else if (isScrapedContent(attachment)) {\n        typeMap.card.push(\n          <CardContainer\n            key={`card-${typeMap.card.length}`}\n            {...rest}\n            attachment={attachment}\n          />,\n        );\n      } else if (\n        isImageAttachment(attachment) ||\n        isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)\n      ) {\n        mediaAttachments.push(attachment);\n      } else if (\n        isAudioAttachment(attachment) ||\n        isVoiceRecordingAttachment(attachment) ||\n        isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)\n      ) {\n        typeMap.file.push(\n          <FileContainer\n            key={`file-${typeMap.file.length}`}\n            {...rest}\n            attachment={attachment}\n          />,\n        );\n      } else {\n        typeMap.unsupported.push(\n          <UnsupportedAttachmentContainer\n            key={`unsupported-${typeMap.unsupported.length}`}\n            {...rest}\n            attachment={attachment}\n          />,\n        );\n      }\n\n      return typeMap;\n    },\n    {\n      card: [],\n      file: [],\n      geolocation: [],\n      giphy: [],\n      media: [],\n      unsupported: [],\n    },\n  );\n\n  if (mediaAttachments.length) {\n    containers.media.push(\n      <MediaContainer key='media-container' {...rest} attachments={mediaAttachments} />,\n    );\n  }\n\n  return containers;\n};\n"],"mappings":";;;;;;;;AAiDA,IAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;AACF;;;;AA8DA,IAAa,cAAc,UAA2B;CACpD,MAAM,EACJ,gCAAgC,sCAChC,aACA,cACA,4BACA,8BACA,4BACA,GAAG,SACD;CACJ,MAAM,yBAAyB,eACtB;EACL,cAAc,gBAAgB,8BAA8B;EAC5D,4BACE,8BACA,8BAA8B;EAChC,8BACE,gCACA,8BAA8B;EAChC,4BACE,8BACA,8BAA8B;CAClC,IACA;EACE;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,qBAAqB,cAEvB,yBAAyB;EACvB;EACA;EACA,GAAG;CACL,CAAC,GAEH,CAAC,aAAa,6BAA6B,CAC7C;CAEA,OACE,oBAAC,2BAAD;EAA2B,OAAO;YAChC,oBAAC,OAAD;GAAK,WAAU;aACZ,wBAAwB,QACtB,KAAK,cAAc,CAAC,GAAG,KAAK,GAAG,mBAAmB,UAAU,GAC7D,CAAC,CACH;EACG,CAAA;CACoB,CAAA;AAE/B;AAEA,IAAM,4BAA4B,EAChC,aACA,GAAG,WAC6C;CAChD,MAAM,mBAAuC,CAAC;CAC9C,MAAM,aAAa,YAAY,QAC5B,SAAS,eAAe;EACvB,IAAI,6BAA6B,UAAU,GACzC,QAAQ,YAAY,KAClB,8BAAC,sBAAD;GACE,GAAI;GACJ,KAAK,eAAe,QAAQ,YAAY;GACxC,UAAU;EACX,CAAA,CACH;OACK,IAAI,WAAW,SAAS,SAC7B,QAAQ,KAAK,KACX,oBAAC,gBAAD;GAEE,GAAI;GACQ;EACb,GAHM,SAAS,QAAQ,MAAM,QAG7B,CACH;OACK,IAAI,iBAAiB,UAAU,GACpC,QAAQ,KAAK,KACX,oBAAC,eAAD;GAEE,GAAI;GACQ;EACb,GAHM,QAAQ,QAAQ,KAAK,QAG3B,CACH;OACK,IACL,kBAAkB,UAAU,KAC5B,kBAAkB,YAAY,uBAAuB,GAErD,iBAAiB,KAAK,UAAU;OAC3B,IACL,kBAAkB,UAAU,KAC5B,2BAA2B,UAAU,KACrC,iBAAiB,YAAY,uBAAuB,GAEpD,QAAQ,KAAK,KACX,oBAAC,eAAD;GAEE,GAAI;GACQ;EACb,GAHM,QAAQ,QAAQ,KAAK,QAG3B,CACH;OAEA,QAAQ,YAAY,KAClB,oBAAC,gCAAD;GAEE,GAAI;GACQ;EACb,GAHM,eAAe,QAAQ,YAAY,QAGzC,CACH;EAGF,OAAO;CACT,GACA;EACE,MAAM,CAAC;EACP,MAAM,CAAC;EACP,aAAa,CAAC;EACd,OAAO,CAAC;EACR,OAAO,CAAC;EACR,aAAa,CAAC;CAChB,CACF;CAEA,IAAI,iBAAiB,QACnB,WAAW,MAAM,KACf,oBAAC,gBAAD;EAAsC,GAAI;EAAM,aAAa;CAAmB,GAA5D,iBAA4D,CAClF;CAGF,OAAO;AACT"}

package/dist/es/components/Attachment/AttachmentActions.mjs

@@ -1,10 +1,11 @@
+import { asDynamicKey } from "../../i18n/utils.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.mjs";
-import { useStableId } from "../UtilityComponents/useStableId.mjs";
 import { Button } from "../Button/Button.mjs";
+import { useFocusReturn } from "../Accessibility/hooks/useFocusReturn.mjs";
 import { useInteractionAnnouncements } from "../Accessibility/hooks/useInteractionAnnouncements.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
 import { getGiphyDescriptiveTitle } from "./giphyAccessibility.mjs";
-import { useFocusReturn } from "../Accessibility/hooks/useFocusReturn.mjs";
 import React, { useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -12,7 +13,7 @@ import clsx from "clsx";
 var defaultAttachmentActionsDefaultFocus = { giphy: "send" };
 var UnMemoizedAttachmentActions = (props) => {
 	const { actionHandler, actions, defaultFocusedActionValue, giphy, id, image_url: imageUrl, text, thumb_url: thumbUrl, title, type } = props;
-	const { t } = useTranslationContext("UnMemoizedAttachmentActions");
+	const { t } = useTranslationContext();
 	const { announceInteraction } = useInteractionAnnouncements();
 	const { reserve: reserveFocusReturn, restore: restoreFocusReturn } = useFocusReturn();
 	const buttonRefs = useRef([]);
@@ -31,9 +32,9 @@ var UnMemoizedAttachmentActions = (props) => {
 		}
 	};
 	const knownActionText = useMemo(() => ({
-		Cancel: t("Cancel"),
-		Send: t("Send"),
-		Shuffle: t("Shuffle")
+		Cancel: t("common.cancel.label", "Cancel"),
+		Send: t("common.send.label", "Send"),
+		Shuffle: t("attachment.actions.shuffle.label", "Shuffle")
 	}), [t]);
 	const focusIndex = useMemo(() => {
 		if (!defaultFocusedActionValue) return null;
@@ -69,13 +70,13 @@ var UnMemoizedAttachmentActions = (props) => {
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "str-chat__message-attachment-actions-form",
 			...isGiphy ? {
-				"aria-label": t("aria/Giphy actions"),
+				"aria-label": t("attachment.actions.giphyActions.ariaLabel", "Giphy actions"),
 				role: "group"
 			} : {},
 			children: [
 				/* @__PURE__ */ jsx("span", { children: text }),
 				actions.map((action, index) => {
-					const label = action.text ? knownActionText[action.text] ?? t(action.text) : null;
+					const label = action.text ? knownActionText[action.text] ?? t(asDynamicKey(action.text)) : null;
 					return /* @__PURE__ */ jsx(Button, {
 						appearance: "ghost",
 						"aria-describedby": isGiphy && action.value === defaultFocusedActionValue ? giphyDescriptionId : void 0,
@@ -93,7 +94,7 @@ var UnMemoizedAttachmentActions = (props) => {
 				}),
 				isGiphy && /* @__PURE__ */ jsx(VisuallyHidden, {
 					id: giphyDescriptionId,
-					children: t("aria/Giphy preview, only visible to you. Use the Send, Shuffle, or Cancel actions.")
+					children: t("attachment.actions.giphyPreviewOnlyVisible.ariaLabel", "Giphy preview, only visible to you. Use the Send, Shuffle, or Cancel actions.")
 				})
 			]
 		})

package/dist/es/components/Attachment/AttachmentActions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentActions.mjs","names":[],"sources":["../../../../src/components/Attachment/AttachmentActions.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\nimport type { Action, Attachment } from 'stream-chat';\n\nimport { useTranslationContext } from '../../context';\n\nimport { useFocusReturn, useInteractionAnnouncements } from '../Accessibility';\nimport { getGiphyDescriptiveTitle } from './giphyAccessibility';\nimport type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';\nimport { Button } from '../Button';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport clsx from 'clsx';\n\nexport type AttachmentActionsProps = Attachment & {\n  /** A list of actions */\n  actions: Action[];\n  /** Unique id for action button key. Key is generated by concatenating this id with action value - {`${id}-${action.value}`} */\n  id: string;\n  /** The text for the form input */\n  text: string;\n  /** Click event handler */\n  actionHandler?: ActionHandlerReturnType;\n  /** Which action should be focused on initial render (match by action.value) */\n  defaultFocusedActionValue?: string;\n};\n\nexport type AttachmentActionsDefaultFocusByType = Partial<\n  Record<NonNullable<Attachment['type']>, string>\n>;\n\nexport const defaultAttachmentActionsDefaultFocus: AttachmentActionsDefaultFocusByType = {\n  giphy: 'send',\n};\n\nconst UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {\n  const {\n    actionHandler,\n    actions,\n    defaultFocusedActionValue,\n    giphy,\n    id,\n    image_url: imageUrl,\n    text,\n    thumb_url: thumbUrl,\n    title,\n    type,\n  } = props;\n  const { t } = useTranslationContext('UnMemoizedAttachmentActions');\n  const { announceInteraction } = useInteractionAnnouncements();\n  const { reserve: reserveFocusReturn, restore: restoreFocusReturn } = useFocusReturn();\n  const buttonRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n  const isGiphy = type === 'giphy';\n  // The giphy preview auto-focuses its primary action, so its purpose + available actions are\n  // FOCUS-COUPLED: describe them on the focused control (aria-describedby) so the text rides\n  // the focus event. A live-region announcement here would be preempted by that same focus\n  // change and never heard. See `.cursor/skills/accessibility/SKILL.md` §3 (focus-coupled vs\n  // decoupled) and specs/a11y-react-web/decisions.md.\n  const giphyDescriptionId = useStableId();\n\n  // A human, non-URL title for this giphy (usually absent — see RW6), reused for both the\n  // preview description and the shuffle announcement.\n  const descriptiveTitle = isGiphy ? getGiphyDescriptiveTitle(title) : undefined;\n  // Identity used to detect the GIF changing on Shuffle. A giphy attachment carries the unique\n  // GIF URL in `giphy.original.url` / `thumb_url` (there is usually no `image_url`); both change\n  // on every shuffle, so the canonical GIF URL is the identity.\n  const giphyImageIdentity = isGiphy\n    ? (giphy?.original?.url ?? thumbUrl ?? imageUrl ?? null)\n    : null;\n  const previousGiphyImageRef = useRef<string | null>(null);\n  const giphyImageInitializedRef = useRef(false);\n\n  const handleActionClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n    name?: string,\n    value?: string,\n  ) => {\n    actionHandler?.(name, value, event);\n\n    // For giphy actions, return focus to wherever it was before the preview stole it (the\n    // composer — but this code never names it; see useFocusReturn) and announce the outcome.\n    //\n    // Order matters: restore focus FIRST, then announce on the next frame. The screen reader\n    // speaks the focus change (\"Message input\") immediately and synchronously; a polite\n    // live-region message fired in the same tick races with it (and can be dropped). Deferring\n    // the announce to rAF makes the sequence deterministic — \"Message input\" then \"Giphy sent\" —\n    // and guarantees the confirmation is heard. The gap between the two utterances is governed\n    // by the screen reader's speech queue and is not controllable here. The rAF is intentionally\n    // NOT cancelled on unmount: the preview unmounts when the giphy is sent, but the announcer\n    // lives at the Chat root, so the confirmation must still fire.\n    if (isGiphy && (value === 'send' || value === 'cancel')) {\n      restoreFocusReturn();\n      const interaction = value === 'send' ? 'giphy.sent' : 'giphy.canceled';\n      requestAnimationFrame(() => announceInteraction(interaction));\n    }\n  };\n\n  const knownActionText = useMemo<Record<string, string>>(\n    () => ({\n      Cancel: t('Cancel'),\n      Send: t('Send'),\n      Shuffle: t('Shuffle'),\n    }),\n    [t],\n  );\n\n  const focusIndex = useMemo(() => {\n    if (!defaultFocusedActionValue) return null;\n    const index = actions.findIndex(\n      (action) => action.value === defaultFocusedActionValue,\n    );\n    return index >= 0 ? index : null;\n  }, [actions, defaultFocusedActionValue]);\n\n  useEffect(() => {\n    if (focusIndex === null) return;\n    const button = buttonRefs.current[focusIndex];\n    if (button && document.activeElement !== button) {\n      // Capture where focus is (e.g. the composer) BEFORE stealing it, so a terminal\n      // action can return focus there via restoreFocusReturn() — without this component\n      // knowing what that element is.\n      reserveFocusReturn();\n      button.focus();\n    }\n  }, [focusIndex, reserveFocusReturn]);\n\n  // Shuffle swaps the GIF in place without moving focus (it stays on the Shuffle button), so\n  // this is a DECOUPLED change → announce it via the live region (no focus/rAF dance). Skip the\n  // initial mount: the preview's appearance is conveyed by the focused control's description\n  // (RW4a), not a live announcement.\n  useEffect(() => {\n    if (!isGiphy) return;\n    if (!giphyImageInitializedRef.current) {\n      giphyImageInitializedRef.current = true;\n      previousGiphyImageRef.current = giphyImageIdentity;\n      return;\n    }\n    if (giphyImageIdentity === previousGiphyImageRef.current) return;\n    previousGiphyImageRef.current = giphyImageIdentity;\n    // Giphy payloads rarely have a human title, so this usually announces just \"Giphy image\n    // changed\"; the title is included only when one genuinely exists.\n    announceInteraction('giphy.shuffled', { title: descriptiveTitle });\n  }, [announceInteraction, descriptiveTitle, giphyImageIdentity, isGiphy]);\n\n  const groupProps = isGiphy\n    ? { 'aria-label': t('aria/Giphy actions'), role: 'group' as const }\n    : {};\n\n  return (\n    <div className='str-chat__message-attachment-actions'>\n      <div className='str-chat__message-attachment-actions-form' {...groupProps}>\n        <span>{text}</span>\n        {actions.map((action, index) => {\n          const label = action.text\n            ? (knownActionText[action.text] ?? t(action.text))\n            : null;\n\n          return (\n            <Button\n              appearance='ghost'\n              // aria-describedby: the auto-focused primary action carries the preview\n              // description so it is spoken as part of the focus announcement (focus-coupled,\n              // not a live region).\n              aria-describedby={\n                isGiphy && action.value === defaultFocusedActionValue\n                  ? giphyDescriptionId\n                  : undefined\n              }\n              // aria-label: for giphy actions, give each button a self-contained accessible\n              // name so it is not announced with surrounding list/group context (e.g.\n              // \"list 3 items\") swallowing the actual action label. Non-giphy untouched.\n              aria-label={isGiphy ? (label ?? undefined) : undefined}\n              className={clsx(\n                `str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--${action.style}`,\n              )}\n              data-testid={`${action.name}`}\n              data-value={action.value}\n              key={`${id}-${action.value}`}\n              onClick={(event) => handleActionClick(event, action.name, action.value)}\n              ref={(element) => {\n                buttonRefs.current[index] = element;\n              }}\n              variant='secondary'\n            >\n              {label}\n            </Button>\n          );\n        })}\n        {isGiphy && (\n          <VisuallyHidden id={giphyDescriptionId}>\n            {t(\n              'aria/Giphy preview, only visible to you. Use the Send, Shuffle, or Cancel actions.',\n            )}\n          </VisuallyHidden>\n        )}\n      </div>\n    </div>\n  );\n};\n\n/**\n * A component for rendering the actions you can take on an attachment.\n */\nexport const AttachmentActions = React.memo(\n  UnMemoizedAttachmentActions,\n) as typeof UnMemoizedAttachmentActions;\n"],"mappings":";;;;;;;;;;;AA8BA,IAAa,uCAA4E,EACvF,OAAO,OACT;AAEA,IAAM,+BAA+B,UAAkC;CACrE,MAAM,EACJ,eACA,SACA,2BACA,OACA,IACA,WAAW,UACX,MACA,WAAW,UACX,OACA,SACE;CACJ,MAAM,EAAE,MAAM,sBAAsB,6BAA6B;CACjE,MAAM,EAAE,wBAAwB,4BAA4B;CAC5D,MAAM,EAAE,SAAS,oBAAoB,SAAS,uBAAuB,eAAe;CACpF,MAAM,aAAa,OAAwC,CAAC,CAAC;CAE7D,MAAM,UAAU,SAAS;CAMzB,MAAM,qBAAqB,YAAY;CAIvC,MAAM,mBAAmB,UAAU,yBAAyB,KAAK,IAAI,KAAA;CAIrE,MAAM,qBAAqB,UACtB,OAAO,UAAU,OAAO,YAAY,YAAY,OACjD;CACJ,MAAM,wBAAwB,OAAsB,IAAI;CACxD,MAAM,2BAA2B,OAAO,KAAK;CAE7C,MAAM,qBACJ,OACA,MACA,UACG;EACH,gBAAgB,MAAM,OAAO,KAAK;EAalC,IAAI,YAAY,UAAU,UAAU,UAAU,WAAW;GACvD,mBAAmB;GACnB,MAAM,cAAc,UAAU,SAAS,eAAe;GACtD,4BAA4B,oBAAoB,WAAW,CAAC;EAC9D;CACF;CAEA,MAAM,kBAAkB,eACf;EACL,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,MAAM;EACd,SAAS,EAAE,SAAS;CACtB,IACA,CAAC,CAAC,CACJ;CAEA,MAAM,aAAa,cAAc;EAC/B,IAAI,CAAC,2BAA2B,OAAO;EACvC,MAAM,QAAQ,QAAQ,WACnB,WAAW,OAAO,UAAU,yBAC/B;EACA,OAAO,SAAS,IAAI,QAAQ;CAC9B,GAAG,CAAC,SAAS,yBAAyB,CAAC;CAEvC,gBAAgB;EACd,IAAI,eAAe,MAAM;EACzB,MAAM,SAAS,WAAW,QAAQ;EAClC,IAAI,UAAU,SAAS,kBAAkB,QAAQ;GAI/C,mBAAmB;GACnB,OAAO,MAAM;EACf;CACF,GAAG,CAAC,YAAY,kBAAkB,CAAC;CAMnC,gBAAgB;EACd,IAAI,CAAC,SAAS;EACd,IAAI,CAAC,yBAAyB,SAAS;GACrC,yBAAyB,UAAU;GACnC,sBAAsB,UAAU;GAChC;EACF;EACA,IAAI,uBAAuB,sBAAsB,SAAS;EAC1D,sBAAsB,UAAU;EAGhC,oBAAoB,kBAAkB,EAAE,OAAO,iBAAiB,CAAC;CACnE,GAAG;EAAC;EAAqB;EAAkB;EAAoB;CAAO,CAAC;CAMvE,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GAAK,WAAU;GAA4C,GAN5C,UACf;IAAE,cAAc,EAAE,oBAAoB;IAAG,MAAM;GAAiB,IAChE,CAAC;aAID;IACE,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA;IACjB,QAAQ,KAAK,QAAQ,UAAU;KAC9B,MAAM,QAAQ,OAAO,OAChB,gBAAgB,OAAO,SAAS,EAAE,OAAO,IAAI,IAC9C;KAEJ,OACE,oBAAC,QAAD;MACE,YAAW;MAIX,oBACE,WAAW,OAAO,UAAU,4BACxB,qBACA,KAAA;MAKN,cAAY,UAAW,SAAS,KAAA,IAAa,KAAA;MAC7C,WAAW,KACT,4FAA4F,OAAO,OACrG;MACA,eAAa,GAAG,OAAO;MACvB,cAAY,OAAO;MAEnB,UAAU,UAAU,kBAAkB,OAAO,OAAO,MAAM,OAAO,KAAK;MACtE,MAAM,YAAY;OAChB,WAAW,QAAQ,SAAS;MAC9B;MACA,SAAQ;gBAEP;KACK,GARD,GAAG,GAAG,GAAG,OAAO,OAQf;IAEZ,CAAC;IACA,WACC,oBAAC,gBAAD;KAAgB,IAAI;eACjB,EACC,oFACF;IACc,CAAA;GAEf;;CACF,CAAA;AAET;;;;AAKA,IAAa,oBAAoB,MAAM,KACrC,2BACF"}
+{"version":3,"file":"AttachmentActions.mjs","names":[],"sources":["../../../../src/components/Attachment/AttachmentActions.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\nimport type { Action, Attachment } from 'stream-chat';\n\nimport { useTranslationContext } from '../../context';\n\nimport { useFocusReturn, useInteractionAnnouncements } from '../Accessibility';\nimport { getGiphyDescriptiveTitle } from './giphyAccessibility';\nimport type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';\nimport { Button } from '../Button';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport clsx from 'clsx';\nimport { asDynamicKey } from '../../i18n/utils';\n\nexport type AttachmentActionsProps = Attachment & {\n  /** A list of actions */\n  actions: Action[];\n  /** Unique id for action button key. Key is generated by concatenating this id with action value - {`${id}-${action.value}`} */\n  id: string;\n  /** The text for the form input */\n  text: string;\n  /** Click event handler */\n  actionHandler?: ActionHandlerReturnType;\n  /** Which action should be focused on initial render (match by action.value) */\n  defaultFocusedActionValue?: string;\n};\n\nexport type AttachmentActionsDefaultFocusByType = Partial<\n  Record<NonNullable<Attachment['type']>, string>\n>;\n\nexport const defaultAttachmentActionsDefaultFocus: AttachmentActionsDefaultFocusByType = {\n  giphy: 'send',\n};\n\nconst UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {\n  const {\n    actionHandler,\n    actions,\n    defaultFocusedActionValue,\n    giphy,\n    id,\n    image_url: imageUrl,\n    text,\n    thumb_url: thumbUrl,\n    title,\n    type,\n  } = props;\n  const { t } = useTranslationContext();\n  const { announceInteraction } = useInteractionAnnouncements();\n  const { reserve: reserveFocusReturn, restore: restoreFocusReturn } = useFocusReturn();\n  const buttonRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n  const isGiphy = type === 'giphy';\n  // The giphy preview auto-focuses its primary action, so its purpose + available actions are\n  // FOCUS-COUPLED: describe them on the focused control (aria-describedby) so the text rides\n  // the focus event. A live-region announcement here would be preempted by that same focus\n  // change and never heard. See `.cursor/skills/accessibility/SKILL.md` §3 (focus-coupled vs\n  // decoupled) and specs/a11y-react-web/decisions.md.\n  const giphyDescriptionId = useStableId();\n\n  // A human, non-URL title for this giphy (usually absent — see RW6), reused for both the\n  // preview description and the shuffle announcement.\n  const descriptiveTitle = isGiphy ? getGiphyDescriptiveTitle(title) : undefined;\n  // Identity used to detect the GIF changing on Shuffle. A giphy attachment carries the unique\n  // GIF URL in `giphy.original.url` / `thumb_url` (there is usually no `image_url`); both change\n  // on every shuffle, so the canonical GIF URL is the identity.\n  const giphyImageIdentity = isGiphy\n    ? (giphy?.original?.url ?? thumbUrl ?? imageUrl ?? null)\n    : null;\n  const previousGiphyImageRef = useRef<string | null>(null);\n  const giphyImageInitializedRef = useRef(false);\n\n  const handleActionClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n    name?: string,\n    value?: string,\n  ) => {\n    actionHandler?.(name, value, event);\n\n    // For giphy actions, return focus to wherever it was before the preview stole it (the\n    // composer — but this code never names it; see useFocusReturn) and announce the outcome.\n    //\n    // Order matters: restore focus FIRST, then announce on the next frame. The screen reader\n    // speaks the focus change (\"Message input\") immediately and synchronously; a polite\n    // live-region message fired in the same tick races with it (and can be dropped). Deferring\n    // the announce to rAF makes the sequence deterministic — \"Message input\" then \"Giphy sent\" —\n    // and guarantees the confirmation is heard. The gap between the two utterances is governed\n    // by the screen reader's speech queue and is not controllable here. The rAF is intentionally\n    // NOT cancelled on unmount: the preview unmounts when the giphy is sent, but the announcer\n    // lives at the Chat root, so the confirmation must still fire.\n    if (isGiphy && (value === 'send' || value === 'cancel')) {\n      restoreFocusReturn();\n      const interaction = value === 'send' ? 'giphy.sent' : 'giphy.canceled';\n      requestAnimationFrame(() => announceInteraction(interaction));\n    }\n  };\n\n  const knownActionText = useMemo<Record<string, string>>(\n    () => ({\n      Cancel: t('common.cancel.label', 'Cancel'),\n      Send: t('common.send.label', 'Send'),\n      Shuffle: t('attachment.actions.shuffle.label', 'Shuffle'),\n    }),\n    [t],\n  );\n\n  const focusIndex = useMemo(() => {\n    if (!defaultFocusedActionValue) return null;\n    const index = actions.findIndex(\n      (action) => action.value === defaultFocusedActionValue,\n    );\n    return index >= 0 ? index : null;\n  }, [actions, defaultFocusedActionValue]);\n\n  useEffect(() => {\n    if (focusIndex === null) return;\n    const button = buttonRefs.current[focusIndex];\n    if (button && document.activeElement !== button) {\n      // Capture where focus is (e.g. the composer) BEFORE stealing it, so a terminal\n      // action can return focus there via restoreFocusReturn() — without this component\n      // knowing what that element is.\n      reserveFocusReturn();\n      button.focus();\n    }\n  }, [focusIndex, reserveFocusReturn]);\n\n  // Shuffle swaps the GIF in place without moving focus (it stays on the Shuffle button), so\n  // this is a DECOUPLED change → announce it via the live region (no focus/rAF dance). Skip the\n  // initial mount: the preview's appearance is conveyed by the focused control's description\n  // (RW4a), not a live announcement.\n  useEffect(() => {\n    if (!isGiphy) return;\n    if (!giphyImageInitializedRef.current) {\n      giphyImageInitializedRef.current = true;\n      previousGiphyImageRef.current = giphyImageIdentity;\n      return;\n    }\n    if (giphyImageIdentity === previousGiphyImageRef.current) return;\n    previousGiphyImageRef.current = giphyImageIdentity;\n    // Giphy payloads rarely have a human title, so this usually announces just \"Giphy image\n    // changed\"; the title is included only when one genuinely exists.\n    announceInteraction('giphy.shuffled', { title: descriptiveTitle });\n  }, [announceInteraction, descriptiveTitle, giphyImageIdentity, isGiphy]);\n\n  const groupProps = isGiphy\n    ? {\n        'aria-label': t('attachment.actions.giphyActions.ariaLabel', 'Giphy actions'),\n        role: 'group' as const,\n      }\n    : {};\n\n  return (\n    <div className='str-chat__message-attachment-actions'>\n      <div className='str-chat__message-attachment-actions-form' {...groupProps}>\n        <span>{text}</span>\n        {actions.map((action, index) => {\n          const label = action.text\n            ? (knownActionText[action.text] ?? t(asDynamicKey(action.text)))\n            : null;\n\n          return (\n            <Button\n              appearance='ghost'\n              // aria-describedby: the auto-focused primary action carries the preview\n              // description so it is spoken as part of the focus announcement (focus-coupled,\n              // not a live region).\n              aria-describedby={\n                isGiphy && action.value === defaultFocusedActionValue\n                  ? giphyDescriptionId\n                  : undefined\n              }\n              // aria-label: for giphy actions, give each button a self-contained accessible\n              // name so it is not announced with surrounding list/group context (e.g.\n              // \"list 3 items\") swallowing the actual action label. Non-giphy untouched.\n              aria-label={isGiphy ? (label ?? undefined) : undefined}\n              className={clsx(\n                `str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--${action.style}`,\n              )}\n              data-testid={`${action.name}`}\n              data-value={action.value}\n              key={`${id}-${action.value}`}\n              onClick={(event) => handleActionClick(event, action.name, action.value)}\n              ref={(element) => {\n                buttonRefs.current[index] = element;\n              }}\n              variant='secondary'\n            >\n              {label}\n            </Button>\n          );\n        })}\n        {isGiphy && (\n          <VisuallyHidden id={giphyDescriptionId}>\n            {t(\n              'attachment.actions.giphyPreviewOnlyVisible.ariaLabel',\n              'Giphy preview, only visible to you. Use the Send, Shuffle, or Cancel actions.',\n            )}\n          </VisuallyHidden>\n        )}\n      </div>\n    </div>\n  );\n};\n\n/**\n * A component for rendering the actions you can take on an attachment.\n */\nexport const AttachmentActions = React.memo(\n  UnMemoizedAttachmentActions,\n) as typeof UnMemoizedAttachmentActions;\n"],"mappings":"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"}

package/dist/es/components/Attachment/AttachmentContainer.mjs

@@ -1,6 +1,5 @@
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useAttachmentContext } from "../../context/AttachmentContext.mjs";
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { getAttachmentPreviewUrl, hasPendingUploadState } from "./hooks/useAttachmentUploadState.mjs";
 import { AttachmentUploadProgressIndicator } from "./components/AttachmentUploadProgressIndicator.mjs";
 import { SUPPORTED_VIDEO_FORMATS, getCssDimensionsVariables, isGalleryAttachmentType, isSvgAttachment } from "./utils.mjs";
 import { Audio } from "./Audio.mjs";
@@ -17,20 +16,35 @@ import { UnsupportedAttachment } from "./UnsupportedAttachment.mjs";
 import { VisibilityDisclaimer } from "./VisibilityDisclaimer.mjs";
 import { VideoAttachment } from "./VideoAttachment.mjs";
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { getAttachmentPreviewUrl, isAudioAttachment, isFileAttachment, isPendingUpload, isSharedLocationResponseData, isVideoAttachment, isVoiceRecordingAttachment } from "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { isAudioAttachment, isFileAttachment, isSharedLocationResponse, isVideoAttachment, isVoiceRecordingAttachment } from "stream-chat";
 //#region src/components/Attachment/AttachmentContainer.tsx
+/**
+* Whether there is anything to render the attachment from: a CDN url, or the local file while
+* its upload is in flight — or after it failed, since a failed message can be retried and the
+* user has to see what they are retrying.
+*
+* Deliberately non-reactive (payload only): `UploadManager` drops its record a microtask before
+* the resolved URL is written back, and gating on the live record would blink the attachment out
+* of the DOM in between.
+*/
+var hasRenderableSource = (attachment) => isPendingUpload(attachment) || !!getAttachmentPreviewUrl(attachment, attachment.asset_url);
 var AttachmentWithinContainer = ({ attachment, children, componentType }) => {
-	const isGAT = isGalleryAttachmentType(attachment);
 	let extra = "";
-	if (!isGAT && !isSharedLocationResponse(attachment)) extra = componentType === "card" && !attachment?.image_url && !attachment?.thumb_url ? "no-image" : attachment?.actions?.length ? "actions" : "";
+	let isSvg = false;
+	if (!isSharedLocationResponseData(attachment)) {
+		if (!isGalleryAttachmentType(attachment)) {
+			extra = componentType === "card" && !attachment?.image_url && !attachment?.thumb_url ? "no-image" : attachment?.actions?.length ? "actions" : "";
+			isSvg = isSvgAttachment(attachment);
+		}
+	}
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("str-chat__message-attachment str-chat__message-attachment-dynamic-size", {
 			[`str-chat__message-attachment--${componentType}`]: componentType,
 			[`str-chat__message-attachment--${attachment?.type}`]: attachment?.type,
 			[`str-chat__message-attachment--${componentType}--${extra}`]: componentType && extra,
-			"str-chat__message-attachment--svg-image": isSvgAttachment(attachment),
+			"str-chat__message-attachment--svg-image": isSvg,
 			"str-chat__message-attachment-with-actions": extra === "actions"
 		}),
 		children
@@ -107,16 +121,6 @@ var GiphyContainer = (props) => {
 		children: /* @__PURE__ */ jsx(Giphy$1, { attachment })
 	});
 };
-/**
-* Whether there is anything to render the attachment from: a CDN url, or the local file while
-* its upload is in flight — or after it failed, since a failed message can be retried and the
-* user has to see what they are retrying.
-*
-* Deliberately non-reactive (payload only): `UploadManager` drops its record a microtask before
-* the resolved URL is written back, and gating on the live record would blink the attachment out
-* of the DOM in between.
-*/
-var hasRenderableSource = (attachment) => hasPendingUploadState(attachment) || !!getAttachmentPreviewUrl(attachment, attachment.asset_url);
 var FileContainer = (props) => {
 	const { attachment } = props;
 	if (isVoiceRecordingAttachment(attachment)) return hasRenderableSource(attachment) ? /* @__PURE__ */ jsx(VoiceRecordingContainer, { ...props }) : null;
@@ -147,7 +151,7 @@ var ImageContainer = (props) => {
 	const { AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$2 = AttachmentUploadProgressIndicator } = useComponentContext();
 	const componentType = "image";
 	const imageElement = useRef(null);
-	const { imageAttachmentSizeHandler } = useChannelStateContext();
+	const { imageAttachmentSizeHandler } = useAttachmentContext();
 	const [attachmentConfiguration, setAttachmentConfiguration] = useState(void 0);
 	useLayoutEffect(() => {
 		if (imageElement.current && imageAttachmentSizeHandler) setAttachmentConfiguration(imageAttachmentSizeHandler(attachment, imageElement.current));