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

package/dist/es/components/Notifications/NotificationList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationList.mjs","names":[],"sources":["../../../../src/components/Notifications/NotificationList.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport type { Notification } from 'stream-chat';\n\nimport { hasSystemNotificationTag, useNotificationApi } from './hooks/useNotificationApi';\nimport { useNotifications } from './hooks/useNotifications';\nimport { Notification as DefaultNotification } from './Notification';\nimport { useComponentContext, useTranslationContext } from '../../context';\n\nimport type { NotificationTargetPanel } from './notificationTarget';\n\nexport type NotificationListFilter = (notification: Notification) => boolean;\nexport type NotificationListEnterFrom = 'bottom' | 'left' | 'right' | 'top';\nexport type NotificationListVerticalAlignment = 'bottom' | 'top';\n/**\n * Selects the candidate notification to display. Receives the current store contents and\n * the currently displayed notification (or `null` when nothing is mounted). Returning\n * `displayed` (or any notification with the same id) means \"no swap\"; returning a\n * different notification triggers a swap (immediate or after `minDisplayMs`, see the\n * scheduling effect); returning `null` triggers the empty-slot exit.\n *\n * Default: `createDefaultPickNext(pickOldest)` — applies persistent-wins,\n * same-type-refresh and FIFO queue rules from the design spec. Pass\n * `pickNext={createDefaultPickNext(pickNewest)}` to swap FIFO for LIFO without\n * reimplementing those rules, or your own `pickNext` to opt out entirely.\n */\nexport type PickNextNotification = (\n  notifications: Notification[],\n  displayed: Notification | null,\n) => Notification | null;\n\n/**\n * Picks the next queued notification when no higher-priority rule applies (persistent\n * wins, same-type refresh). Used by `createDefaultPickNext`.\n */\nexport type PickFromQueue = (\n  notifications: Notification[],\n  displayed: Notification | null,\n) => Notification | null;\n\nexport type NotificationListProps = {\n  /** Optional class name for the list container */\n  className?: string;\n  /**\n   * Direction from which the replacement notification enters the single visible slot.\n   * Travel distance is configured in `ENTER_TRANSLATION` below.\n   */\n  enterFrom?: NotificationListEnterFrom;\n  /**\n   * When provided, this list only shows notifications that pass the filter.\n   * Use to declare which notifications this list consumes (e.g. by origin.emitter, origin.context.channelId, or metadata).\n   */\n  filter?: NotificationListFilter;\n  /**\n   * Minimum time in milliseconds the active notification stays visible before a queued one\n   * can replace it. Replacements scheduled while the dwell window is open wait until it has\n   * elapsed; arrivals after that window replace the active notification immediately.\n   * Same-type repeated triggers and external dismissals bypass this dwell.\n   * Defaults to 1000ms.\n   */\n  minDisplayMs?: number;\n  /**\n   * Override the candidate-selection policy. The function decides which notification\n   * should be displayed given the store and the currently displayed one. Defaults to\n   * `createDefaultPickNext(pickOldest)`. Pass `createDefaultPickNext(pickNewest)` for LIFO.\n   */\n  pickNext?: PickNextNotification;\n  /** Panel target consumed by this list. */\n  panel?: NotificationTargetPanel;\n  /** Fallback panel when emitted notifications do not include origin.context.panel. */\n  fallbackPanel?: NotificationTargetPanel;\n  /** Vertical alignment of the single notification slot within its parent. Defaults to `bottom`. */\n  verticalAlignment?: NotificationListVerticalAlignment;\n};\n\n// Entry motion is controlled through CSS variables so the keyframe can stay shared in SCSS.\n// Use full-size percentages on the active axis to make a replacement notification slide in\n// from outside its slot. If future tuning needs more travel, prefer `calc(100% + gap)` here.\nconst ENTER_TRANSLATION: Record<NotificationListEnterFrom, { x: string; y: string }> = {\n  bottom: { x: '0%', y: '100%' },\n  left: { x: '-100%', y: '0%' },\n  right: { x: '100%', y: '0%' },\n  top: { x: '0%', y: '-100%' },\n};\n\nconst EXIT_ANIMATION_MS = 340;\nconst DEFAULT_MIN_DISPLAY_MS = 1000;\n\nconst isEnterFrom = (value: unknown): value is NotificationListEnterFrom =>\n  value === 'bottom' || value === 'left' || value === 'right' || value === 'top';\n\nconst getNotificationEnterFrom = (\n  notification: Notification | null,\n  fallbackEnterFrom: NotificationListEnterFrom,\n) => {\n  if (!notification) return fallbackEnterFrom;\n\n  const metadataEnterFrom = notification.metadata?.entryDirection;\n  if (isEnterFrom(metadataEnterFrom)) return metadataEnterFrom;\n\n  const originEnterFrom = notification.origin.context?.entryDirection;\n  if (isEnterFrom(originEnterFrom)) return originEnterFrom;\n\n  return fallbackEnterFrom;\n};\n\nconst isPersistent = (notification: Notification) => !notification.duration;\n\nconst haveSameType = (a: Notification | null, b: Notification | null) =>\n  !!a?.type && !!b?.type && a.type === b.type;\n\n/** FIFO queue selector — oldest `createdAt` other than `displayed` wins. */\nexport const pickOldest: PickFromQueue = (notifications, displayed) => {\n  const excludeId = displayed?.id ?? null;\n  let oldest: Notification | null = null;\n  for (const notification of notifications) {\n    if (notification.id === excludeId) continue;\n    if (!oldest || notification.createdAt < oldest.createdAt) {\n      oldest = notification;\n    }\n  }\n  return oldest;\n};\n\n/** LIFO queue selector — newest `createdAt` other than `displayed` wins. */\nexport const pickNewest: PickFromQueue = (notifications, displayed) => {\n  const excludeId = displayed?.id ?? null;\n  let newest: Notification | null = null;\n  for (const notification of notifications) {\n    if (notification.id === excludeId) continue;\n    if (!newest || notification.createdAt > newest.createdAt) {\n      newest = notification;\n    }\n  }\n  return newest;\n};\n\nconst pickNewestPersistent = (\n  notifications: Notification[],\n  excludeId: string | null,\n): Notification | null => {\n  let newest: Notification | null = null;\n  for (const notification of notifications) {\n    if (notification.id === excludeId) continue;\n    if (!isPersistent(notification)) continue;\n    if (!newest || notification.createdAt > newest.createdAt) {\n      newest = notification;\n    }\n  }\n  return newest;\n};\n\nconst pickNewestOfType = (\n  notifications: Notification[],\n  type: string | undefined | null,\n  excludeId: string | null,\n): Notification | null => {\n  if (!type) return null;\n  let newest: Notification | null = null;\n  for (const notification of notifications) {\n    if (notification.id === excludeId) continue;\n    if (notification.type !== type) continue;\n    if (!newest || notification.createdAt > newest.createdAt) {\n      newest = notification;\n    }\n  }\n  return newest;\n};\n\n/**\n * Builds the default `PickNextNotification` selector with a configurable queue fallback.\n * Encodes the snackbar concurrency rules from the design spec — the scheduling effect\n * only decides *when* to swap, the returned function decides *what* to swap to.\n *\n * Rules, in order of precedence:\n *   1. **Persistent wins.** Persistent variants (no `duration`) jump ahead of any\n *      queued transient because they carry an action the user must acknowledge.\n *   2. **Persistent ↛ replaced by transient.** While a persistent is displayed it stays\n *      put until dismissed externally or a *newer* persistent arrives.\n *   3. **Same-type refresh.** While a transient is displayed, a repeated trigger of the\n *      same `type` collapses to its latest occurrence. (The scheduling effect detects\n *      this via `haveSameType` and bypasses the dwell window so the refresh feels\n *      instant; this function just makes sure the latest same-type is returned.)\n *   4. **Queue fallback.** Otherwise, `pickFromQueue` selects the next notification\n *      (default: `pickOldest` / FIFO).\n *\n * Exported so callers that want to layer behavior on top of the design rules can wrap\n * the result instead of rewriting it.\n */\nexport const createDefaultPickNext =\n  (pickFromQueue: PickFromQueue = pickOldest): PickNextNotification =>\n  (notifications, displayed) => {\n    if (notifications.length === 0) return null;\n\n    const newestPersistent = pickNewestPersistent(notifications, null);\n\n    if (!displayed) {\n      return newestPersistent ?? pickFromQueue(notifications, null);\n    }\n\n    const displayedInStore = notifications.some(({ id }) => id === displayed.id);\n    if (!displayedInStore) {\n      return newestPersistent ?? pickFromQueue(notifications, null);\n    }\n\n    if (isPersistent(displayed)) {\n      // Currently showing a persistent: only a newer persistent can replace it. Reuse the\n      // earlier lookup when it already points at a different persistent.\n      const newerPersistent =\n        newestPersistent && newestPersistent.id !== displayed.id\n          ? newestPersistent\n          : pickNewestPersistent(notifications, displayed.id);\n      if (newerPersistent && newerPersistent.createdAt > displayed.createdAt) {\n        return newerPersistent;\n      }\n      return displayed;\n    }\n\n    // Currently showing a transient.\n    // 1. Same-type \"refresh of current\" wins immediately — a repeated trigger of the\n    //    displayed snackbar collapses to the latest occurrence of that type.\n    const sameTypeNewest = pickNewestOfType(notifications, displayed.type, displayed.id);\n    if (sameTypeNewest) return sameTypeNewest;\n\n    // 2. Any queued persistent jumps ahead of the queue.\n    if (newestPersistent) return newestPersistent;\n\n    // 3. Queue fallback.\n    return pickFromQueue(notifications, displayed) ?? displayed;\n  };\n\n/** Default selector — design-spec rules with FIFO queue fallback (`pickOldest`). */\nconst defaultPickNext = createDefaultPickNext(pickOldest);\n\nexport const NotificationList = ({\n  className,\n  enterFrom = 'bottom',\n  fallbackPanel,\n  filter,\n  minDisplayMs = DEFAULT_MIN_DISPLAY_MS,\n  panel,\n  pickNext = defaultPickNext,\n  verticalAlignment = 'bottom',\n}: NotificationListProps) => {\n  const { Notification: NotificationComponent = DefaultNotification } =\n    useComponentContext();\n  const { t } = useTranslationContext();\n  const { removeNotification, startNotificationTimeout } = useNotificationApi();\n  // Holds the timer that runs the exit animation. Set when we flip `transitionState` to\n  // `'exit'`; when it fires, the previously displayed notification is removed and either the\n  // next candidate is mounted (entering) or the list collapses to empty. Only one exit\n  // animation can be in flight at a time.\n  const exitTimeoutRef = useRef<number | null>(null);\n  // Holds the dwell timer that defers a swap until `minDisplayMs` has elapsed since the\n  // active notification became visible. It only exists while we're waiting out the dwell\n  // window; same-type triggers, external dismissals and arrivals after the dwell window\n  // bypass it and trigger the exit animation directly.\n  const replacementTimeoutRef = useRef<number | null>(null);\n  const candidateRef = useRef<Notification | null>(null);\n  const displayedAtRef = useRef<number | null>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const observedElementRef = useRef<HTMLDivElement | null>(null);\n  const startedTimeoutIdsRef = useRef<Set<string> | null>(null);\n\n  if (!startedTimeoutIdsRef.current) {\n    startedTimeoutIdsRef.current = new Set<string>();\n  }\n\n  const [displayedNotification, setDisplayedNotification] = useState<Notification | null>(\n    null,\n  );\n  const [transitionState, setTransitionState] = useState<'enter' | 'exit'>('enter');\n  const combinedFilter = useCallback(\n    (notification: Notification) => {\n      if (hasSystemNotificationTag(notification)) return false;\n      return filter ? filter(notification) : true;\n    },\n    [filter],\n  );\n  const notifications = useNotifications({\n    applyDisplayFilter: true,\n    fallbackPanel,\n    filter: combinedFilter,\n    panel,\n  });\n\n  const dismiss = useCallback(\n    (id: string) => {\n      startedTimeoutIdsRef.current?.delete(id);\n      removeNotification(id);\n    },\n    [removeNotification],\n  );\n\n  // Drop any stale entries from the started-timeouts set whenever the store changes.\n  useEffect(() => {\n    const notificationIds = new Set(notifications.map(({ id }) => id));\n\n    startedTimeoutIdsRef.current?.forEach((id) => {\n      if (!notificationIds.has(id)) {\n        startedTimeoutIdsRef.current?.delete(id);\n      }\n    });\n  }, [notifications]);\n\n  const clearReplacementTimeout = useCallback(() => {\n    if (replacementTimeoutRef.current !== null) {\n      window.clearTimeout(replacementTimeoutRef.current);\n      replacementTimeoutRef.current = null;\n    }\n  }, []);\n\n  // Cleanup pending timers on unmount.\n  useEffect(\n    () => () => {\n      clearReplacementTimeout();\n      if (exitTimeoutRef.current !== null) {\n        window.clearTimeout(exitTimeoutRef.current);\n        exitTimeoutRef.current = null;\n      }\n    },\n    [clearReplacementTimeout],\n  );\n\n  // Keep the freshest candidate around so swap completion can read the latest value, even\n  // when a new notification arrives mid-exit-animation.\n  useEffect(() => {\n    candidateRef.current = pickNext(notifications, displayedNotification);\n  }, [displayedNotification, notifications, pickNext]);\n\n  // Main scheduling effect — owns *when* swaps happen. The *what* is delegated entirely\n  // to `pickNext` (default: `createDefaultPickNext(pickOldest)`).\n  //\n  // Runs on every change to `displayedNotification`, `notifications`, `pickNext`, or\n  // `transitionState`, and decides one of four outcomes:\n  //   1. Do nothing (the right notification is already on screen, or an exit animation\n  //      is mid-flight and will re-trigger this effect when it finishes).\n  //   2. Mount the first notification (no `displayedNotification` yet).\n  //   3. Unmount the current one (`pickNext` returned `null`, the store became empty).\n  //   4. Swap the displayed one for the new candidate — either immediately or after the\n  //      `minDisplayMs` dwell window has elapsed.\n  //\n  // Timing rules applied here (independent of selection policy):\n  //   - **Dwell window.** When `pickNext` returns a different candidate, hold the active\n  //     notification on screen until at least `minDisplayMs` has passed since it became\n  //     visible. Replacements that arrive after that window swap immediately.\n  //   - **Same-type bypass.** If the candidate has the same `type` as the displayed\n  //     notification, swap immediately (no dwell) — this is the \"repeated trigger\n  //     refreshes the snackbar and resets the auto-dismiss timer\" behavior. The timer\n  //     reset is achieved by removing the previously displayed notification on swap\n  //     (which clears its `NotificationManager` timer) so the new one starts its own\n  //     when it next intersects the slot.\n  //   - **External-dismiss bypass.** If the displayed notification is no longer in the\n  //     store (user clicked the close button, `NotificationManager` auto-removed it,\n  //     etc.), swap immediately — we should not stall an empty slot for the dwell.\n  useEffect(() => {\n    // An exit animation is already in flight. Once its timer fires it sets new state\n    // (either the next notification or `null`), which will re-run this effect from a\n    // clean baseline.\n    if (transitionState === 'exit') return;\n\n    // No notification is mounted yet — pick whatever the candidate logic prefers and\n    // mount it directly with an enter animation. No swap required.\n    if (!displayedNotification) {\n      const candidate = pickNext(notifications, null);\n      if (candidate) {\n        displayedAtRef.current = Date.now();\n        setDisplayedNotification(candidate);\n        setTransitionState('enter');\n      }\n      return;\n    }\n\n    const candidate = pickNext(notifications, displayedNotification);\n\n    // The store has been drained while a notification was visible. Play the exit\n    // animation, then unmount.\n    if (!candidate) {\n      clearReplacementTimeout();\n      setTransitionState('exit');\n      exitTimeoutRef.current = window.setTimeout(() => {\n        exitTimeoutRef.current = null;\n        displayedAtRef.current = null;\n        setDisplayedNotification(null);\n        setTransitionState('enter');\n      }, EXIT_ANIMATION_MS);\n      return;\n    }\n\n    // The candidate is the displayed notification itself — nothing to do. Cancel any\n    // dwell timer that may have been queued by an earlier run that has since become\n    // moot (e.g. the incoming notification was removed before its dwell expired).\n    if (candidate.id === displayedNotification.id) {\n      clearReplacementTimeout();\n      return;\n    }\n\n    const displayedInStore = notifications.some(\n      ({ id }) => id === displayedNotification.id,\n    );\n\n    // Swap routine shared by the immediate and dwell-deferred branches below. Captures\n    // `previousId` / `wasInStore` from the effect's closure so the exit timer can run\n    // the right cleanup even if state has moved on by the time it fires.\n    const startSwap = () => {\n      replacementTimeoutRef.current = null;\n      setTransitionState('exit');\n      const previousId = displayedNotification.id;\n      const wasInStore = displayedInStore;\n      exitTimeoutRef.current = window.setTimeout(() => {\n        exitTimeoutRef.current = null;\n        if (wasInStore) {\n          // Remove the previously displayed notification from the store so it does not\n          // re-appear, and so its NotificationManager auto-dismiss timer is cleared.\n          startedTimeoutIdsRef.current?.delete(previousId);\n          removeNotification(previousId);\n        }\n        // Read the latest candidate at the moment the exit animation actually completes —\n        // it may differ from the one decided when `startSwap` was queued because new\n        // notifications could have arrived during the 340ms exit window.\n        const next = candidateRef.current;\n        if (next && next.id !== previousId) {\n          displayedAtRef.current = Date.now();\n          setDisplayedNotification(next);\n          setTransitionState('enter');\n        } else {\n          displayedAtRef.current = null;\n          setDisplayedNotification(null);\n          setTransitionState('enter');\n        }\n      }, EXIT_ANIMATION_MS);\n    };\n\n    // External dismissal or auto-dismiss removed the displayed notification: swap right\n    // away (no dwell wait — the slot would otherwise stall empty for `minDisplayMs`).\n    if (!displayedInStore) {\n      clearReplacementTimeout();\n      startSwap();\n      return;\n    }\n\n    // Repeated triggers of the same snackbar replace the active one and reset the\n    // auto-dismiss timer immediately — feedback for the same condition should feel like\n    // a single, persistent thing being refreshed.\n    if (haveSameType(displayedNotification, candidate)) {\n      clearReplacementTimeout();\n      startSwap();\n      return;\n    }\n\n    // Default branch: enforce the dwell window. `displayedAtRef` is stamped synchronously\n    // every time we set `displayedNotification` (initial mount and swap completion), so it\n    // is in sync with what is on screen by the time this effect runs.\n    const elapsed = displayedAtRef.current ? Date.now() - displayedAtRef.current : 0;\n    const remaining = Math.max(0, minDisplayMs - elapsed);\n\n    if (remaining === 0) {\n      // Dwell already elapsed; swap right now.\n      clearReplacementTimeout();\n      startSwap();\n    } else if (replacementTimeoutRef.current === null) {\n      // A swap is pending but the dwell hasn't elapsed yet. Schedule the swap once —\n      // subsequent re-runs of this effect (e.g. as even newer notifications arrive)\n      // intentionally do NOT reschedule. `candidateRef` keeps tracking the freshest\n      // candidate, so when the timer fires `startSwap` → exit completes → the latest\n      // candidate is picked up automatically.\n      replacementTimeoutRef.current = window.setTimeout(startSwap, remaining);\n    }\n  }, [\n    clearReplacementTimeout,\n    displayedNotification,\n    minDisplayMs,\n    notifications,\n    pickNext,\n    removeNotification,\n    transitionState,\n  ]);\n\n  const notification = displayedNotification;\n  const notificationEnterFrom = getNotificationEnterFrom(notification, enterFrom);\n\n  useEffect(() => {\n    const element = observedElementRef.current;\n    if (!element || !notification || transitionState === 'exit') return;\n\n    const startTimeout = () => {\n      if (\n        !startedTimeoutIdsRef.current ||\n        startedTimeoutIdsRef.current.has(notification.id)\n      )\n        return;\n\n      startedTimeoutIdsRef.current.add(notification.id);\n      startNotificationTimeout(notification.id);\n    };\n\n    if (typeof IntersectionObserver === 'undefined') {\n      startTimeout();\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const [entry] = entries;\n        if (!entry?.isIntersecting) return;\n\n        startTimeout();\n        observer.disconnect();\n      },\n      {\n        root: listRef.current,\n        threshold: 0.5,\n      },\n    );\n\n    observer.observe(element);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [notification, startNotificationTimeout, transitionState]);\n\n  if (!notification) return null;\n\n  return (\n    <div\n      aria-label={t('aria/Notifications')}\n      className={clsx(\n        'str-chat__notification-list',\n        `str-chat__notification-list--enter-from-${notificationEnterFrom}`,\n        `str-chat__notification-list--position-${verticalAlignment}`,\n        panel && `str-chat__notification-list--${panel}`,\n        className,\n      )}\n      data-testid='notification-list'\n      ref={listRef}\n      role='region'\n      style={\n        {\n          '--str-chat__notification-list-enter-x':\n            ENTER_TRANSLATION[notificationEnterFrom].x,\n          '--str-chat__notification-list-enter-y':\n            ENTER_TRANSLATION[notificationEnterFrom].y,\n        } as React.CSSProperties\n      }\n    >\n      <div\n        aria-hidden\n        className='str-chat__notification-list__edge str-chat__notification-list__edge--top'\n      />\n      <NotificationComponent\n        entryDirection={notificationEnterFrom}\n        key={notification.id}\n        notification={notification}\n        onDismiss={() => dismiss(notification.id)}\n        ref={(element) => {\n          observedElementRef.current = element;\n        }}\n        showClose={!notification.duration}\n        transitionState={transitionState}\n      />\n      <div\n        aria-hidden\n        className='str-chat__notification-list__edge str-chat__notification-list__edge--bottom'\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"NotificationList.mjs","names":[],"sources":["../../../../src/components/Notifications/NotificationList.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport type { Notification } from 'stream-chat';\n\nimport { hasSystemNotificationTag, useNotificationApi } from './hooks/useNotificationApi';\nimport { useNotifications } from './hooks/useNotifications';\nimport { Notification as DefaultNotification } from './Notification';\nimport { useComponentContext, useTranslationContext } from '../../context';\n\nimport type { NotificationTargetPanel } from './notificationTarget';\n\nexport type NotificationListFilter = (notification: Notification) => boolean;\nexport type NotificationListEnterFrom = 'bottom' | 'left' | 'right' | 'top';\nexport type NotificationListVerticalAlignment = 'bottom' | 'top';\n/**\n * Selects the candidate notification to display. Receives the current store contents and\n * the currently displayed notification (or `null` when nothing is mounted). Returning\n * `displayed` (or any notification with the same id) means \"no swap\"; returning a\n * different notification triggers a swap (immediate or after `minDisplayMs`, see the\n * scheduling effect); returning `null` triggers the empty-slot exit.\n *\n * Default: `createDefaultPickNext(pickOldest)` — applies persistent-wins,\n * same-type-refresh and FIFO queue rules from the design spec. Pass\n * `pickNext={createDefaultPickNext(pickNewest)}` to swap FIFO for LIFO without\n * reimplementing those rules, or your own `pickNext` to opt out entirely.\n */\nexport type PickNextNotification = (\n  notifications: Notification[],\n  displayed: Notification | null,\n) => Notification | null;\n\n/**\n * Picks the next queued notification when no higher-priority rule applies (persistent\n * wins, same-type refresh). Used by `createDefaultPickNext`.\n */\nexport type PickFromQueue = (\n  notifications: Notification[],\n  displayed: Notification | null,\n) => Notification | null;\n\nexport type NotificationListProps = {\n  /** Optional class name for the list container */\n  className?: string;\n  /**\n   * Direction from which the replacement notification enters the single visible slot.\n   * Travel distance is configured in `ENTER_TRANSLATION` below.\n   */\n  enterFrom?: NotificationListEnterFrom;\n  /**\n   * When provided, this list only shows notifications that pass the filter.\n   * Use to declare which notifications this list consumes (e.g. by origin.emitter, origin.context.channelId, or metadata).\n   */\n  filter?: NotificationListFilter;\n  /**\n   * Minimum time in milliseconds the active notification stays visible before a queued one\n   * can replace it. Replacements scheduled while the dwell window is open wait until it has\n   * elapsed; arrivals after that window replace the active notification immediately.\n   * Same-type repeated triggers and external dismissals bypass this dwell.\n   * Defaults to 1000ms.\n   */\n  minDisplayMs?: number;\n  /**\n   * Override the candidate-selection policy. The function decides which notification\n   * should be displayed given the store and the currently displayed one. Defaults to\n   * `createDefaultPickNext(pickOldest)`. Pass `createDefaultPickNext(pickNewest)` for LIFO.\n   */\n  pickNext?: PickNextNotification;\n  /** Panel target consumed by this list. */\n  panel?: NotificationTargetPanel;\n  /** Fallback panel when emitted notifications do not include origin.context.panel. */\n  fallbackPanel?: NotificationTargetPanel;\n  /** Vertical alignment of the single notification slot within its parent. Defaults to `bottom`. */\n  verticalAlignment?: NotificationListVerticalAlignment;\n};\n\n// Entry motion is controlled through CSS variables so the keyframe can stay shared in SCSS.\n// Use full-size percentages on the active axis to make a replacement notification slide in\n// from outside its slot. If future tuning needs more travel, prefer `calc(100% + gap)` here.\nconst ENTER_TRANSLATION: Record<NotificationListEnterFrom, { x: string; y: string }> = {\n  bottom: { x: '0%', y: '100%' },\n  left: { x: '-100%', y: '0%' },\n  right: { x: '100%', y: '0%' },\n  top: { x: '0%', y: '-100%' },\n};\n\nconst EXIT_ANIMATION_MS = 340;\nconst DEFAULT_MIN_DISPLAY_MS = 1000;\n\nconst isEnterFrom = (value: unknown): value is NotificationListEnterFrom =>\n  value === 'bottom' || value === 'left' || value === 'right' || value === 'top';\n\nconst getNotificationEnterFrom = (\n  notification: Notification | null,\n  fallbackEnterFrom: NotificationListEnterFrom,\n) => {\n  if (!notification) return fallbackEnterFrom;\n\n  const metadataEnterFrom = notification.metadata?.entryDirection;\n  if (isEnterFrom(metadataEnterFrom)) return metadataEnterFrom;\n\n  const originEnterFrom = notification.origin.context?.entryDirection;\n  if (isEnterFrom(originEnterFrom)) return originEnterFrom;\n\n  return fallbackEnterFrom;\n};\n\nconst isPersistent = (notification: Notification) => !notification.duration;\n\nconst haveSameType = (a: Notification | null, b: Notification | null) =>\n  !!a?.type && !!b?.type && a.type === b.type;\n\n/** FIFO queue selector — oldest `createdAt` other than `displayed` wins. */\nexport const pickOldest: PickFromQueue = (notifications, displayed) => {\n  const excludeId = displayed?.id ?? null;\n  let oldest: Notification | null = null;\n  for (const notification of notifications) {\n    if (notification.id === excludeId) continue;\n    if (!oldest || notification.createdAt < oldest.createdAt) {\n      oldest = notification;\n    }\n  }\n  return oldest;\n};\n\n/** LIFO queue selector — newest `createdAt` other than `displayed` wins. */\nexport const pickNewest: PickFromQueue = (notifications, displayed) => {\n  const excludeId = displayed?.id ?? null;\n  let newest: Notification | null = null;\n  for (const notification of notifications) {\n    if (notification.id === excludeId) continue;\n    if (!newest || notification.createdAt > newest.createdAt) {\n      newest = notification;\n    }\n  }\n  return newest;\n};\n\nconst pickNewestPersistent = (\n  notifications: Notification[],\n  excludeId: string | null,\n): Notification | null => {\n  let newest: Notification | null = null;\n  for (const notification of notifications) {\n    if (notification.id === excludeId) continue;\n    if (!isPersistent(notification)) continue;\n    if (!newest || notification.createdAt > newest.createdAt) {\n      newest = notification;\n    }\n  }\n  return newest;\n};\n\nconst pickNewestOfType = (\n  notifications: Notification[],\n  type: string | undefined | null,\n  excludeId: string | null,\n): Notification | null => {\n  if (!type) return null;\n  let newest: Notification | null = null;\n  for (const notification of notifications) {\n    if (notification.id === excludeId) continue;\n    if (notification.type !== type) continue;\n    if (!newest || notification.createdAt > newest.createdAt) {\n      newest = notification;\n    }\n  }\n  return newest;\n};\n\n/**\n * Builds the default `PickNextNotification` selector with a configurable queue fallback.\n * Encodes the snackbar concurrency rules from the design spec — the scheduling effect\n * only decides *when* to swap, the returned function decides *what* to swap to.\n *\n * Rules, in order of precedence:\n *   1. **Persistent wins.** Persistent variants (no `duration`) jump ahead of any\n *      queued transient because they carry an action the user must acknowledge.\n *   2. **Persistent ↛ replaced by transient.** While a persistent is displayed it stays\n *      put until dismissed externally or a *newer* persistent arrives.\n *   3. **Same-type refresh.** While a transient is displayed, a repeated trigger of the\n *      same `type` collapses to its latest occurrence. (The scheduling effect detects\n *      this via `haveSameType` and bypasses the dwell window so the refresh feels\n *      instant; this function just makes sure the latest same-type is returned.)\n *   4. **Queue fallback.** Otherwise, `pickFromQueue` selects the next notification\n *      (default: `pickOldest` / FIFO).\n *\n * Exported so callers that want to layer behavior on top of the design rules can wrap\n * the result instead of rewriting it.\n */\nexport const createDefaultPickNext =\n  (pickFromQueue: PickFromQueue = pickOldest): PickNextNotification =>\n  (notifications, displayed) => {\n    if (notifications.length === 0) return null;\n\n    const newestPersistent = pickNewestPersistent(notifications, null);\n\n    if (!displayed) {\n      return newestPersistent ?? pickFromQueue(notifications, null);\n    }\n\n    const displayedInStore = notifications.some(({ id }) => id === displayed.id);\n    if (!displayedInStore) {\n      return newestPersistent ?? pickFromQueue(notifications, null);\n    }\n\n    if (isPersistent(displayed)) {\n      // Currently showing a persistent: only a newer persistent can replace it. Reuse the\n      // earlier lookup when it already points at a different persistent.\n      const newerPersistent =\n        newestPersistent && newestPersistent.id !== displayed.id\n          ? newestPersistent\n          : pickNewestPersistent(notifications, displayed.id);\n      if (newerPersistent && newerPersistent.createdAt > displayed.createdAt) {\n        return newerPersistent;\n      }\n      return displayed;\n    }\n\n    // Currently showing a transient.\n    // 1. Same-type \"refresh of current\" wins immediately — a repeated trigger of the\n    //    displayed snackbar collapses to the latest occurrence of that type.\n    const sameTypeNewest = pickNewestOfType(notifications, displayed.type, displayed.id);\n    if (sameTypeNewest) return sameTypeNewest;\n\n    // 2. Any queued persistent jumps ahead of the queue.\n    if (newestPersistent) return newestPersistent;\n\n    // 3. Queue fallback.\n    return pickFromQueue(notifications, displayed) ?? displayed;\n  };\n\n/** Default selector — design-spec rules with FIFO queue fallback (`pickOldest`). */\nconst defaultPickNext = createDefaultPickNext(pickOldest);\n\nexport const NotificationList = ({\n  className,\n  enterFrom = 'bottom',\n  fallbackPanel,\n  filter,\n  minDisplayMs = DEFAULT_MIN_DISPLAY_MS,\n  panel,\n  pickNext = defaultPickNext,\n  verticalAlignment = 'bottom',\n}: NotificationListProps) => {\n  const { Notification: NotificationComponent = DefaultNotification } =\n    useComponentContext();\n  const { t } = useTranslationContext();\n  const { ensureNotificationTimeout, removeNotification } = useNotificationApi();\n  // Holds the timer that runs the exit animation. Set when we flip `transitionState` to\n  // `'exit'`; when it fires, the previously displayed notification is removed and either the\n  // next candidate is mounted (entering) or the list collapses to empty. Only one exit\n  // animation can be in flight at a time.\n  const exitTimeoutRef = useRef<number | null>(null);\n  // Holds the dwell timer that defers a swap until `minDisplayMs` has elapsed since the\n  // active notification became visible. It only exists while we're waiting out the dwell\n  // window; same-type triggers, external dismissals and arrivals after the dwell window\n  // bypass it and trigger the exit animation directly.\n  const replacementTimeoutRef = useRef<number | null>(null);\n  const candidateRef = useRef<Notification | null>(null);\n  const displayedAtRef = useRef<number | null>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const observedElementRef = useRef<HTMLDivElement | null>(null);\n\n  const [displayedNotification, setDisplayedNotification] = useState<Notification | null>(\n    null,\n  );\n  const [transitionState, setTransitionState] = useState<'enter' | 'exit'>('enter');\n  const combinedFilter = useCallback(\n    (notification: Notification) => {\n      if (hasSystemNotificationTag(notification)) return false;\n      return filter ? filter(notification) : true;\n    },\n    [filter],\n  );\n  const notifications = useNotifications({\n    applyDisplayFilter: true,\n    fallbackPanel,\n    filter: combinedFilter,\n    panel,\n  });\n\n  const dismiss = useCallback(\n    (id: string) => {\n      removeNotification(id);\n    },\n    [removeNotification],\n  );\n\n  const clearReplacementTimeout = useCallback(() => {\n    if (replacementTimeoutRef.current !== null) {\n      window.clearTimeout(replacementTimeoutRef.current);\n      replacementTimeoutRef.current = null;\n    }\n  }, []);\n\n  // Cleanup pending timers on unmount.\n  useEffect(\n    () => () => {\n      clearReplacementTimeout();\n      if (exitTimeoutRef.current !== null) {\n        window.clearTimeout(exitTimeoutRef.current);\n        exitTimeoutRef.current = null;\n      }\n    },\n    [clearReplacementTimeout],\n  );\n\n  // Keep the freshest candidate around so swap completion can read the latest value, even\n  // when a new notification arrives mid-exit-animation.\n  useEffect(() => {\n    candidateRef.current = pickNext(notifications, displayedNotification);\n  }, [displayedNotification, notifications, pickNext]);\n\n  // Main scheduling effect — owns *when* swaps happen. The *what* is delegated entirely\n  // to `pickNext` (default: `createDefaultPickNext(pickOldest)`).\n  //\n  // Runs on every change to `displayedNotification`, `notifications`, `pickNext`, or\n  // `transitionState`, and decides one of four outcomes:\n  //   1. Do nothing (the right notification is already on screen, or an exit animation\n  //      is mid-flight and will re-trigger this effect when it finishes).\n  //   2. Mount the first notification (no `displayedNotification` yet).\n  //   3. Unmount the current one (`pickNext` returned `null`, the store became empty).\n  //   4. Swap the displayed one for the new candidate — either immediately or after the\n  //      `minDisplayMs` dwell window has elapsed.\n  //\n  // Timing rules applied here (independent of selection policy):\n  //   - **Dwell window.** When `pickNext` returns a different candidate, hold the active\n  //     notification on screen until at least `minDisplayMs` has passed since it became\n  //     visible. Replacements that arrive after that window swap immediately.\n  //   - **Same-type bypass.** If the candidate has the same `type` as the displayed\n  //     notification, swap immediately (no dwell) — this is the \"repeated trigger\n  //     refreshes the snackbar and resets the auto-dismiss timer\" behavior. The timer\n  //     reset is achieved by removing the previously displayed notification on swap\n  //     (which clears its `NotificationManager` timer) so the new one starts its own\n  //     when it next intersects the slot.\n  //   - **External-dismiss bypass.** If the displayed notification is no longer in the\n  //     store (user clicked the close button, `NotificationManager` auto-removed it,\n  //     etc.), swap immediately — we should not stall an empty slot for the dwell.\n  useEffect(() => {\n    // An exit animation is already in flight. Once its timer fires it sets new state\n    // (either the next notification or `null`), which will re-run this effect from a\n    // clean baseline.\n    if (transitionState === 'exit') return;\n\n    // No notification is mounted yet — pick whatever the candidate logic prefers and\n    // mount it directly with an enter animation. No swap required.\n    if (!displayedNotification) {\n      const candidate = pickNext(notifications, null);\n      if (candidate) {\n        displayedAtRef.current = Date.now();\n        setDisplayedNotification(candidate);\n        setTransitionState('enter');\n      }\n      return;\n    }\n\n    const candidate = pickNext(notifications, displayedNotification);\n\n    // The store has been drained while a notification was visible. Play the exit\n    // animation, then unmount.\n    if (!candidate) {\n      clearReplacementTimeout();\n      setTransitionState('exit');\n      exitTimeoutRef.current = window.setTimeout(() => {\n        exitTimeoutRef.current = null;\n        displayedAtRef.current = null;\n        setDisplayedNotification(null);\n        setTransitionState('enter');\n      }, EXIT_ANIMATION_MS);\n      return;\n    }\n\n    // The candidate is the displayed notification itself — nothing to do. Cancel any\n    // dwell timer that may have been queued by an earlier run that has since become\n    // moot (e.g. the incoming notification was removed before its dwell expired).\n    if (candidate.id === displayedNotification.id) {\n      clearReplacementTimeout();\n      return;\n    }\n\n    const displayedInStore = notifications.some(\n      ({ id }) => id === displayedNotification.id,\n    );\n\n    // Swap routine shared by the immediate and dwell-deferred branches below. Captures\n    // `previousId` / `wasInStore` from the effect's closure so the exit timer can run\n    // the right cleanup even if state has moved on by the time it fires.\n    const startSwap = () => {\n      replacementTimeoutRef.current = null;\n      setTransitionState('exit');\n      const previousId = displayedNotification.id;\n      const wasInStore = displayedInStore;\n      exitTimeoutRef.current = window.setTimeout(() => {\n        exitTimeoutRef.current = null;\n        if (wasInStore) {\n          // Remove the previously displayed notification from the store so it does not\n          // re-appear, and so its NotificationManager auto-dismiss timer is cleared.\n          removeNotification(previousId);\n        }\n        // Read the latest candidate at the moment the exit animation actually completes —\n        // it may differ from the one decided when `startSwap` was queued because new\n        // notifications could have arrived during the 340ms exit window.\n        const next = candidateRef.current;\n        if (next && next.id !== previousId) {\n          displayedAtRef.current = Date.now();\n          setDisplayedNotification(next);\n          setTransitionState('enter');\n        } else {\n          displayedAtRef.current = null;\n          setDisplayedNotification(null);\n          setTransitionState('enter');\n        }\n      }, EXIT_ANIMATION_MS);\n    };\n\n    // External dismissal or auto-dismiss removed the displayed notification: swap right\n    // away (no dwell wait — the slot would otherwise stall empty for `minDisplayMs`).\n    if (!displayedInStore) {\n      clearReplacementTimeout();\n      startSwap();\n      return;\n    }\n\n    // Repeated triggers of the same snackbar replace the active one and reset the\n    // auto-dismiss timer immediately — feedback for the same condition should feel like\n    // a single, persistent thing being refreshed.\n    if (haveSameType(displayedNotification, candidate)) {\n      clearReplacementTimeout();\n      startSwap();\n      return;\n    }\n\n    // Default branch: enforce the dwell window. `displayedAtRef` is stamped synchronously\n    // every time we set `displayedNotification` (initial mount and swap completion), so it\n    // is in sync with what is on screen by the time this effect runs.\n    const elapsed = displayedAtRef.current ? Date.now() - displayedAtRef.current : 0;\n    const remaining = Math.max(0, minDisplayMs - elapsed);\n\n    if (remaining === 0) {\n      // Dwell already elapsed; swap right now.\n      clearReplacementTimeout();\n      startSwap();\n    } else if (replacementTimeoutRef.current === null) {\n      // A swap is pending but the dwell hasn't elapsed yet. Schedule the swap once —\n      // subsequent re-runs of this effect (e.g. as even newer notifications arrive)\n      // intentionally do NOT reschedule. `candidateRef` keeps tracking the freshest\n      // candidate, so when the timer fires `startSwap` → exit completes → the latest\n      // candidate is picked up automatically.\n      replacementTimeoutRef.current = window.setTimeout(startSwap, remaining);\n    }\n  }, [\n    clearReplacementTimeout,\n    displayedNotification,\n    minDisplayMs,\n    notifications,\n    pickNext,\n    removeNotification,\n    transitionState,\n  ]);\n\n  const notification = displayedNotification;\n  const notificationEnterFrom = getNotificationEnterFrom(notification, enterFrom);\n\n  useEffect(() => {\n    const element = observedElementRef.current;\n    if (!element || !notification || transitionState === 'exit') return;\n\n    // `ensureTimeout` leaves a running countdown alone, so this can be called whenever the\n    // notification becomes visible without tracking which ones have been started already -- and\n    // without a second view of the same notification pushing its deadline out.\n    const startTimeout = () => {\n      ensureNotificationTimeout(notification.id);\n    };\n\n    if (typeof IntersectionObserver === 'undefined') {\n      startTimeout();\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const [entry] = entries;\n        if (!entry?.isIntersecting) return;\n\n        startTimeout();\n        observer.disconnect();\n      },\n      {\n        root: listRef.current,\n        threshold: 0.5,\n      },\n    );\n\n    observer.observe(element);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [ensureNotificationTimeout, notification, transitionState]);\n\n  if (!notification) return null;\n\n  return (\n    <div\n      aria-label={t('notification.list.notifications.ariaLabel', 'Notifications')}\n      className={clsx(\n        'str-chat__notification-list',\n        `str-chat__notification-list--enter-from-${notificationEnterFrom}`,\n        `str-chat__notification-list--position-${verticalAlignment}`,\n        panel && `str-chat__notification-list--${panel}`,\n        className,\n      )}\n      data-testid='notification-list'\n      ref={listRef}\n      role='region'\n      style={\n        {\n          '--str-chat__notification-list-enter-x':\n            ENTER_TRANSLATION[notificationEnterFrom].x,\n          '--str-chat__notification-list-enter-y':\n            ENTER_TRANSLATION[notificationEnterFrom].y,\n        } as React.CSSProperties\n      }\n    >\n      <div\n        aria-hidden\n        className='str-chat__notification-list__edge str-chat__notification-list__edge--top'\n      />\n      <NotificationComponent\n        entryDirection={notificationEnterFrom}\n        key={notification.id}\n        notification={notification}\n        onDismiss={() => dismiss(notification.id)}\n        ref={(element) => {\n          observedElementRef.current = element;\n        }}\n        showClose={!notification.duration}\n        transitionState={transitionState}\n      />\n      <div\n        aria-hidden\n        className='str-chat__notification-list__edge str-chat__notification-list__edge--bottom'\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AA8EA,IAAM,oBAAiF;CACrF,QAAQ;EAAE,GAAG;EAAM,GAAG;CAAO;CAC7B,MAAM;EAAE,GAAG;EAAS,GAAG;CAAK;CAC5B,OAAO;EAAE,GAAG;EAAQ,GAAG;CAAK;CAC5B,KAAK;EAAE,GAAG;EAAM,GAAG;CAAQ;AAC7B;AAEA,IAAM,oBAAoB;AAC1B,IAAM,yBAAyB;AAE/B,IAAM,eAAe,UACnB,UAAU,YAAY,UAAU,UAAU,UAAU,WAAW,UAAU;AAE3E,IAAM,4BACJ,cACA,sBACG;CACH,IAAI,CAAC,cAAc,OAAO;CAE1B,MAAM,oBAAoB,aAAa,UAAU;CACjD,IAAI,YAAY,iBAAiB,GAAG,OAAO;CAE3C,MAAM,kBAAkB,aAAa,OAAO,SAAS;CACrD,IAAI,YAAY,eAAe,GAAG,OAAO;CAEzC,OAAO;AACT;AAEA,IAAM,gBAAgB,iBAA+B,CAAC,aAAa;AAEnE,IAAM,gBAAgB,GAAwB,MAC5C,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,EAAE,SAAS,EAAE;;AAGzC,IAAa,cAA6B,eAAe,cAAc;CACrE,MAAM,YAAY,WAAW,MAAM;CACnC,IAAI,SAA8B;CAClC,KAAK,MAAM,gBAAgB,eAAe;EACxC,IAAI,aAAa,OAAO,WAAW;EACnC,IAAI,CAAC,UAAU,aAAa,YAAY,OAAO,WAC7C,SAAS;CAEb;CACA,OAAO;AACT;;AAGA,IAAa,cAA6B,eAAe,cAAc;CACrE,MAAM,YAAY,WAAW,MAAM;CACnC,IAAI,SAA8B;CAClC,KAAK,MAAM,gBAAgB,eAAe;EACxC,IAAI,aAAa,OAAO,WAAW;EACnC,IAAI,CAAC,UAAU,aAAa,YAAY,OAAO,WAC7C,SAAS;CAEb;CACA,OAAO;AACT;AAEA,IAAM,wBACJ,eACA,cACwB;CACxB,IAAI,SAA8B;CAClC,KAAK,MAAM,gBAAgB,eAAe;EACxC,IAAI,aAAa,OAAO,WAAW;EACnC,IAAI,CAAC,aAAa,YAAY,GAAG;EACjC,IAAI,CAAC,UAAU,aAAa,YAAY,OAAO,WAC7C,SAAS;CAEb;CACA,OAAO;AACT;AAEA,IAAM,oBACJ,eACA,MACA,cACwB;CACxB,IAAI,CAAC,MAAM,OAAO;CAClB,IAAI,SAA8B;CAClC,KAAK,MAAM,gBAAgB,eAAe;EACxC,IAAI,aAAa,OAAO,WAAW;EACnC,IAAI,aAAa,SAAS,MAAM;EAChC,IAAI,CAAC,UAAU,aAAa,YAAY,OAAO,WAC7C,SAAS;CAEb;CACA,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAa,yBACV,gBAA+B,gBAC/B,eAAe,cAAc;CAC5B,IAAI,cAAc,WAAW,GAAG,OAAO;CAEvC,MAAM,mBAAmB,qBAAqB,eAAe,IAAI;CAEjE,IAAI,CAAC,WACH,OAAO,oBAAoB,cAAc,eAAe,IAAI;CAI9D,IAAI,CADqB,cAAc,MAAM,EAAE,SAAS,OAAO,UAAU,EACpE,GACH,OAAO,oBAAoB,cAAc,eAAe,IAAI;CAG9D,IAAI,aAAa,SAAS,GAAG;EAG3B,MAAM,kBACJ,oBAAoB,iBAAiB,OAAO,UAAU,KAClD,mBACA,qBAAqB,eAAe,UAAU,EAAE;EACtD,IAAI,mBAAmB,gBAAgB,YAAY,UAAU,WAC3D,OAAO;EAET,OAAO;CACT;CAKA,MAAM,iBAAiB,iBAAiB,eAAe,UAAU,MAAM,UAAU,EAAE;CACnF,IAAI,gBAAgB,OAAO;CAG3B,IAAI,kBAAkB,OAAO;CAG7B,OAAO,cAAc,eAAe,SAAS,KAAK;AACpD;;AAGF,IAAM,kBAAkB,sBAAsB,UAAU;AAExD,IAAa,oBAAoB,EAC/B,WACA,YAAY,UACZ,eACA,QACA,eAAe,wBACf,OACA,WAAW,iBACX,oBAAoB,eACO;CAC3B,MAAM,EAAE,cAAc,wBAAwB,iBAC5C,oBAAoB;CACtB,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,2BAA2B,uBAAuB,mBAAmB;CAK7E,MAAM,iBAAiB,OAAsB,IAAI;CAKjD,MAAM,wBAAwB,OAAsB,IAAI;CACxD,MAAM,eAAe,OAA4B,IAAI;CACrD,MAAM,iBAAiB,OAAsB,IAAI;CACjD,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,qBAAqB,OAA8B,IAAI;CAE7D,MAAM,CAAC,uBAAuB,4BAA4B,SACxD,IACF;CACA,MAAM,CAAC,iBAAiB,sBAAsB,SAA2B,OAAO;CAQhF,MAAM,gBAAgB,iBAAiB;EACrC,oBAAoB;EACpB;EACA,QAVqB,aACpB,iBAA+B;GAC9B,IAAI,yBAAyB,YAAY,GAAG,OAAO;GACnD,OAAO,SAAS,OAAO,YAAY,IAAI;EACzC,GACA,CAAC,MAAM,CAKC;EACR;CACF,CAAC;CAED,MAAM,UAAU,aACb,OAAe;EACd,mBAAmB,EAAE;CACvB,GACA,CAAC,kBAAkB,CACrB;CAEA,MAAM,0BAA0B,kBAAkB;EAChD,IAAI,sBAAsB,YAAY,MAAM;GAC1C,OAAO,aAAa,sBAAsB,OAAO;GACjD,sBAAsB,UAAU;EAClC;CACF,GAAG,CAAC,CAAC;CAGL,sBACc;EACV,wBAAwB;EACxB,IAAI,eAAe,YAAY,MAAM;GACnC,OAAO,aAAa,eAAe,OAAO;GAC1C,eAAe,UAAU;EAC3B;CACF,GACA,CAAC,uBAAuB,CAC1B;CAIA,gBAAgB;EACd,aAAa,UAAU,SAAS,eAAe,qBAAqB;CACtE,GAAG;EAAC;EAAuB;EAAe;CAAQ,CAAC;CA2BnD,gBAAgB;EAId,IAAI,oBAAoB,QAAQ;EAIhC,IAAI,CAAC,uBAAuB;GAC1B,MAAM,YAAY,SAAS,eAAe,IAAI;GAC9C,IAAI,WAAW;IACb,eAAe,UAAU,KAAK,IAAI;IAClC,yBAAyB,SAAS;IAClC,mBAAmB,OAAO;GAC5B;GACA;EACF;EAEA,MAAM,YAAY,SAAS,eAAe,qBAAqB;EAI/D,IAAI,CAAC,WAAW;GACd,wBAAwB;GACxB,mBAAmB,MAAM;GACzB,eAAe,UAAU,OAAO,iBAAiB;IAC/C,eAAe,UAAU;IACzB,eAAe,UAAU;IACzB,yBAAyB,IAAI;IAC7B,mBAAmB,OAAO;GAC5B,GAAG,iBAAiB;GACpB;EACF;EAKA,IAAI,UAAU,OAAO,sBAAsB,IAAI;GAC7C,wBAAwB;GACxB;EACF;EAEA,MAAM,mBAAmB,cAAc,MACpC,EAAE,SAAS,OAAO,sBAAsB,EAC3C;EAKA,MAAM,kBAAkB;GACtB,sBAAsB,UAAU;GAChC,mBAAmB,MAAM;GACzB,MAAM,aAAa,sBAAsB;GACzC,MAAM,aAAa;GACnB,eAAe,UAAU,OAAO,iBAAiB;IAC/C,eAAe,UAAU;IACzB,IAAI,YAGF,mBAAmB,UAAU;IAK/B,MAAM,OAAO,aAAa;IAC1B,IAAI,QAAQ,KAAK,OAAO,YAAY;KAClC,eAAe,UAAU,KAAK,IAAI;KAClC,yBAAyB,IAAI;KAC7B,mBAAmB,OAAO;IAC5B,OAAO;KACL,eAAe,UAAU;KACzB,yBAAyB,IAAI;KAC7B,mBAAmB,OAAO;IAC5B;GACF,GAAG,iBAAiB;EACtB;EAIA,IAAI,CAAC,kBAAkB;GACrB,wBAAwB;GACxB,UAAU;GACV;EACF;EAKA,IAAI,aAAa,uBAAuB,SAAS,GAAG;GAClD,wBAAwB;GACxB,UAAU;GACV;EACF;EAKA,MAAM,UAAU,eAAe,UAAU,KAAK,IAAI,IAAI,eAAe,UAAU;EAC/E,MAAM,YAAY,KAAK,IAAI,GAAG,eAAe,OAAO;EAEpD,IAAI,cAAc,GAAG;GAEnB,wBAAwB;GACxB,UAAU;EACZ,OAAO,IAAI,sBAAsB,YAAY,MAM3C,sBAAsB,UAAU,OAAO,WAAW,WAAW,SAAS;CAE1E,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,eAAe;CACrB,MAAM,wBAAwB,yBAAyB,cAAc,SAAS;CAE9E,gBAAgB;EACd,MAAM,UAAU,mBAAmB;EACnC,IAAI,CAAC,WAAW,CAAC,gBAAgB,oBAAoB,QAAQ;EAK7D,MAAM,qBAAqB;GACzB,0BAA0B,aAAa,EAAE;EAC3C;EAEA,IAAI,OAAO,yBAAyB,aAAa;GAC/C,aAAa;GACb;EACF;EAEA,MAAM,WAAW,IAAI,sBAClB,YAAY;GACX,MAAM,CAAC,SAAS;GAChB,IAAI,CAAC,OAAO,gBAAgB;GAE5B,aAAa;GACb,SAAS,WAAW;EACtB,GACA;GACE,MAAM,QAAQ;GACd,WAAW;EACb,CACF;EAEA,SAAS,QAAQ,OAAO;EAExB,aAAa;GACX,SAAS,WAAW;EACtB;CACF,GAAG;EAAC;EAA2B;EAAc;CAAe,CAAC;CAE7D,IAAI,CAAC,cAAc,OAAO;CAE1B,OACE,qBAAC,OAAD;EACE,cAAY,EAAE,6CAA6C,eAAe;EAC1E,WAAW,KACT,+BACA,2CAA2C,yBAC3C,yCAAyC,qBACzC,SAAS,gCAAgC,SACzC,SACF;EACA,eAAY;EACZ,KAAK;EACL,MAAK;EACL,OACE;GACE,yCACE,kBAAkB,sBAAsB,CAAC;GAC3C,yCACE,kBAAkB,sBAAsB,CAAC;EAC7C;YAlBJ;GAqBE,oBAAC,OAAD;IACE,eAAA;IACA,WAAU;GACX,CAAA;GACD,oBAAC,uBAAD;IACE,gBAAgB;IAEF;IACd,iBAAiB,QAAQ,aAAa,EAAE;IACxC,MAAM,YAAY;KAChB,mBAAmB,UAAU;IAC/B;IACA,WAAW,CAAC,aAAa;IACR;GAClB,GARM,aAAa,EAQnB;GACD,oBAAC,OAAD;IACE,eAAA;IACA,WAAU;GACX,CAAA;EACE;;AAET"}

package/dist/es/components/Notifications/hooks/useNotificationApi.mjs

@@ -1,5 +1,5 @@
-import { useChatContext } from "../../../context/ChatContext.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
 import { useModalDialogManager } from "../../../context/DialogManagerContext.mjs";
 import { addNotificationTargetTag, getNotificationTargetTag } from "../notificationTarget.mjs";
 import { useNotificationTarget } from "./useNotificationTarget.mjs";
@@ -36,69 +36,76 @@ var useNotificationApi = () => {
 	const { client } = useChatContext();
 	const inferredPanel = useNotificationTarget();
 	const modalManagerHasOpenDialog = useStateStore(useModalDialogManager()?.state, modalDialogManagerStateSelector)?.hasOpenDialog ?? false;
+	const addNotification = useCallback(({ actions, ariaLive, context, duration, emitter, error, incident, message, severity, tags, targetPanels, type }) => {
+		const notificationTags = getTargetTags(targetPanels, inferredPanel, tags, modalManagerHasOpenDialog);
+		const resolvedType = getTypeFromIncident({
+			incident,
+			severity,
+			type
+		});
+		const origin = context ? {
+			context,
+			emitter
+		} : { emitter };
+		const options = {
+			...actions ? { actions } : {},
+			...typeof duration === "number" ? { duration } : {},
+			...error ? { originalError: error } : {},
+			...ariaLive ? { metadata: { ariaLive } } : {},
+			...notificationTags.length > 0 ? { tags: notificationTags } : {},
+			...severity ? { severity } : {},
+			...resolvedType ? { type: resolvedType } : {}
+		};
+		client.notifications.add({
+			message,
+			options,
+			origin
+		});
+	}, [
+		client,
+		inferredPanel,
+		modalManagerHasOpenDialog
+	]);
+	const addSystemNotification = useCallback(({ actions, ariaLive, context, duration, emitter, error, incident, message, severity, tags, type }) => {
+		const notificationTags = Array.from(/* @__PURE__ */ new Set([SYSTEM_NOTIFICATION_TAG, ...tags ?? []]));
+		const resolvedType = getTypeFromIncident({
+			incident,
+			severity,
+			type
+		});
+		const origin = context ? {
+			context,
+			emitter
+		} : { emitter };
+		const options = {
+			...actions ? { actions } : {},
+			...typeof duration === "number" ? { duration } : {},
+			...error ? { originalError: error } : {},
+			...ariaLive ? { metadata: { ariaLive } } : {},
+			...notificationTags.length > 0 ? { tags: notificationTags } : {},
+			...severity ? { severity } : {},
+			...resolvedType ? { type: resolvedType } : {}
+		};
+		return client.notifications.add({
+			message,
+			options,
+			origin
+		});
+	}, [client]);
+	const removeNotification = useCallback((id) => {
+		client.notifications.remove(id);
+	}, [client]);
+	const startNotificationTimeout = useCallback((id) => {
+		client.notifications.startTimeout(id);
+	}, [client]);
 	return {
-		addNotification: useCallback(({ actions, ariaLive, context, duration, emitter, error, incident, message, severity, tags, targetPanels, type }) => {
-			const notificationTags = getTargetTags(targetPanels, inferredPanel, tags, modalManagerHasOpenDialog);
-			const resolvedType = getTypeFromIncident({
-				incident,
-				severity,
-				type
-			});
-			const origin = context ? {
-				context,
-				emitter
-			} : { emitter };
-			const options = {
-				...actions ? { actions } : {},
-				...typeof duration === "number" ? { duration } : {},
-				...error ? { originalError: error } : {},
-				...ariaLive ? { metadata: { ariaLive } } : {},
-				...notificationTags.length > 0 ? { tags: notificationTags } : {},
-				...severity ? { severity } : {},
-				...resolvedType ? { type: resolvedType } : {}
-			};
-			client.notifications.add({
-				message,
-				options,
-				origin
-			});
-		}, [
-			client,
-			inferredPanel,
-			modalManagerHasOpenDialog
-		]),
-		addSystemNotification: useCallback(({ actions, ariaLive, context, duration, emitter, error, incident, message, severity, tags, type }) => {
-			const notificationTags = Array.from(/* @__PURE__ */ new Set([SYSTEM_NOTIFICATION_TAG, ...tags ?? []]));
-			const resolvedType = getTypeFromIncident({
-				incident,
-				severity,
-				type
-			});
-			const origin = context ? {
-				context,
-				emitter
-			} : { emitter };
-			const options = {
-				...actions ? { actions } : {},
-				...typeof duration === "number" ? { duration } : {},
-				...error ? { originalError: error } : {},
-				...ariaLive ? { metadata: { ariaLive } } : {},
-				...notificationTags.length > 0 ? { tags: notificationTags } : {},
-				...severity ? { severity } : {},
-				...resolvedType ? { type: resolvedType } : {}
-			};
-			return client.notifications.add({
-				message,
-				options,
-				origin
-			});
-		}, [client]),
-		removeNotification: useCallback((id) => {
-			client.notifications.remove(id);
+		addNotification,
+		addSystemNotification,
+		ensureNotificationTimeout: useCallback((id) => {
+			client.notifications.ensureTimeout(id);
 		}, [client]),
-		startNotificationTimeout: useCallback((id) => {
-			client.notifications.startTimeout(id);
-		}, [client])
+		removeNotification,
+		startNotificationTimeout
 	};
 };
 //#endregion

package/dist/es/components/Notifications/hooks/useNotificationApi.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useNotificationApi.mjs","names":[],"sources":["../../../../../src/components/Notifications/hooks/useNotificationApi.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport type { Notification, NotificationAction, NotificationSeverity } from 'stream-chat';\n\nimport type { AriaLivePriority } from '../../Accessibility';\nimport { useChatContext, useModalDialogManager } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport {\n  addNotificationTargetTag,\n  getNotificationTargetTag,\n  type NotificationTargetPanel,\n} from '../notificationTarget';\nimport { useNotificationTarget } from './useNotificationTarget';\n\nimport type { DialogManagerState } from '../../Dialog/service/DialogManager';\n\nconst modalDialogManagerStateSelector = ({\n  dialogsById,\n  openedDialogIds,\n}: DialogManagerState) => ({\n  hasOpenDialog: openedDialogIds\n    ? openedDialogIds.length > 0\n    : Object.values(dialogsById).some((dialog) => dialog.isOpen),\n});\n\n/** Tag used for full-width system banners (e.g. connection status). Excluded from `NotificationList` by default. */\nexport const SYSTEM_NOTIFICATION_TAG = 'system' as const;\n\nexport const hasSystemNotificationTag = (notification: Notification) =>\n  notification.tags?.includes(SYSTEM_NOTIFICATION_TAG) ?? false;\n\nexport type NotificationIncidentDescriptor = {\n  /** Where the incident happened (e.g. api, browser, validation, permission). */\n  domain: string;\n  /** Entity being operated on (e.g. message, poll, location, attachment). */\n  entity: string;\n  /** Attempted operation (e.g. send, end, share, upload). */\n  operation: string;\n  /** Status of the operation (e.g. failed, success, blocked). */\n  status?: string;\n};\n\nexport type AddNotificationParams = {\n  /** Optional interactive actions rendered by the notification component. */\n  actions?: NotificationAction[];\n  /**\n   * Overrides the aria-live priority the notification is announced with. Defaults to severity-based\n   * (`error` → `assertive`, otherwise `polite`). Set `assertive` for a confirmation that should be\n   * heard promptly rather than queued behind a competing announcement (e.g. a focus change).\n   */\n  ariaLive?: AriaLivePriority;\n  /** Arbitrary context metadata stored in `origin.context`. */\n  context?: Record<string, unknown>;\n  /** Duration in milliseconds after which the notification auto-dismisses. */\n  duration?: number;\n  /** Logical source emitting the notification (e.g. component or feature name). */\n  emitter: string;\n  /** Underlying error object attached as `options.originalError`. */\n  error?: Error;\n  /** Human-readable notification message. */\n  message: string;\n  /** Notification severity visualized by the UI. */\n  severity?: NotificationSeverity;\n  /** Additional tags appended to target panel tags. */\n  tags?: string[];\n  /** Explicit target panels; when provided, inferred panel is ignored. */\n  targetPanels?: NotificationTargetPanel[];\n  /** Structured descriptor of the incident this notification reports on. */\n  incident?: NotificationIncidentDescriptor;\n  /**\n   * Optional machine-readable notification type identifier (domain:entity:operation:status).\n   * Used by notification consumers to route behavior, including translation lookup\n   * via notification-type registries.\n   * When omitted, `type` is generated from `incident` if `incident` is provided.\n   */\n  type?: string;\n};\n\n/**\n * Same shape as {@link AddNotificationParams} except `targetPanels` is omitted — system\n * banners are global and do not receive `target:*` panel tags (they are filtered by the\n * `system` tag for `NotificationList` vs banner UIs).\n */\nexport type AddSystemNotificationParams = Omit<AddNotificationParams, 'targetPanels'>;\n\nexport type AddNotification = (params: AddNotificationParams) => void;\n/** Returns the notification id (for removal / timeouts). */\nexport type AddSystemNotification = (params: AddSystemNotificationParams) => string;\nexport type RemoveNotification = (id: string) => void;\nexport type StartNotificationTimeout = (id: string) => void;\n\nexport type NotificationApi = {\n  addNotification: AddNotification;\n  addSystemNotification: AddSystemNotification;\n  removeNotification: RemoveNotification;\n  startNotificationTimeout: StartNotificationTimeout;\n};\n\nconst getTargetTags = (\n  targetPanels: NotificationTargetPanel[] | undefined,\n  inferredPanel: NotificationTargetPanel | undefined,\n  tags: string[] | undefined,\n  modalManagerHasOpenDialog: boolean,\n) => {\n  if (targetPanels) {\n    const effectiveTargetPanels =\n      modalManagerHasOpenDialog && targetPanels.length > 0\n        ? [...targetPanels, 'modal' as const]\n        : targetPanels;\n\n    return Array.from(\n      new Set([...effectiveTargetPanels.map(getNotificationTargetTag), ...(tags ?? [])]),\n    );\n  }\n\n  if (modalManagerHasOpenDialog) {\n    return Array.from(\n      new Set([\n        ...(inferredPanel ? [getNotificationTargetTag(inferredPanel)] : []),\n        getNotificationTargetTag('modal'),\n        ...(tags ?? []),\n      ]),\n    );\n  }\n\n  return addNotificationTargetTag(inferredPanel, tags);\n};\n\nconst getTypeFromIncident = ({\n  incident,\n  severity,\n  type,\n}: Pick<AddNotificationParams, 'incident' | 'severity' | 'type'>) => {\n  if (type) return type;\n  if (!incident) return undefined;\n\n  const status =\n    incident.status ??\n    (severity === 'error' ? 'failed' : severity === 'success' ? 'success' : severity);\n\n  return [incident.domain, incident.entity, incident.operation, status]\n    .filter((segment): segment is string => !!segment)\n    .join(':');\n};\n\nexport const useNotificationApi = (): NotificationApi => {\n  const { client } = useChatContext();\n  const inferredPanel = useNotificationTarget();\n  const modalDialogManager = useModalDialogManager();\n  const modalManagerHasOpenDialog =\n    useStateStore(modalDialogManager?.state, modalDialogManagerStateSelector)\n      ?.hasOpenDialog ?? false;\n\n  const addNotification: AddNotification = useCallback(\n    ({\n      actions,\n      ariaLive,\n      context,\n      duration,\n      emitter,\n      error,\n      incident,\n      message,\n      severity,\n      tags,\n      targetPanels,\n      type,\n    }: AddNotificationParams) => {\n      const notificationTags = getTargetTags(\n        targetPanels,\n        inferredPanel,\n        tags,\n        modalManagerHasOpenDialog,\n      );\n      const resolvedType = getTypeFromIncident({ incident, severity, type });\n      const origin = context ? { context, emitter } : { emitter };\n\n      const options = {\n        ...(actions ? { actions } : {}),\n        ...(typeof duration === 'number' ? { duration } : {}),\n        ...(error ? { originalError: error } : {}),\n        ...(ariaLive ? { metadata: { ariaLive } } : {}),\n        ...(notificationTags.length > 0 ? { tags: notificationTags } : {}),\n        ...(severity ? { severity } : {}),\n        ...(resolvedType ? { type: resolvedType } : {}),\n      };\n\n      client.notifications.add({\n        message,\n        options,\n        origin,\n      });\n    },\n    [client, inferredPanel, modalManagerHasOpenDialog],\n  );\n\n  const addSystemNotification: AddSystemNotification = useCallback(\n    ({\n      actions,\n      ariaLive,\n      context,\n      duration,\n      emitter,\n      error,\n      incident,\n      message,\n      severity,\n      tags,\n      type,\n    }: AddSystemNotificationParams) => {\n      const notificationTags = Array.from(\n        new Set([SYSTEM_NOTIFICATION_TAG, ...(tags ?? [])]),\n      );\n      const resolvedType = getTypeFromIncident({ incident, severity, type });\n      const origin = context ? { context, emitter } : { emitter };\n\n      const options = {\n        ...(actions ? { actions } : {}),\n        ...(typeof duration === 'number' ? { duration } : {}),\n        ...(error ? { originalError: error } : {}),\n        ...(ariaLive ? { metadata: { ariaLive } } : {}),\n        ...(notificationTags.length > 0 ? { tags: notificationTags } : {}),\n        ...(severity ? { severity } : {}),\n        ...(resolvedType ? { type: resolvedType } : {}),\n      };\n\n      return client.notifications.add({\n        message,\n        options,\n        origin,\n      });\n    },\n    [client],\n  );\n\n  const removeNotification: RemoveNotification = useCallback(\n    (id) => {\n      client.notifications.remove(id);\n    },\n    [client],\n  );\n\n  const startNotificationTimeout: StartNotificationTimeout = useCallback(\n    (id) => {\n      client.notifications.startTimeout(id);\n    },\n    [client],\n  );\n\n  return {\n    addNotification,\n    addSystemNotification,\n    removeNotification,\n    startNotificationTimeout,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"file":"useNotificationApi.mjs","names":[],"sources":["../../../../../src/components/Notifications/hooks/useNotificationApi.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport type { Notification, NotificationAction, NotificationSeverity } from 'stream-chat';\n\nimport type { AriaLivePriority } from '../../Accessibility';\nimport { useChatContext, useModalDialogManager } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport {\n  addNotificationTargetTag,\n  getNotificationTargetTag,\n  type NotificationTargetPanel,\n} from '../notificationTarget';\nimport { useNotificationTarget } from './useNotificationTarget';\n\nimport type { DialogManagerState } from '../../Dialog/service/DialogManager';\n\nconst modalDialogManagerStateSelector = ({\n  dialogsById,\n  openedDialogIds,\n}: DialogManagerState) => ({\n  hasOpenDialog: openedDialogIds\n    ? openedDialogIds.length > 0\n    : Object.values(dialogsById).some((dialog) => dialog.isOpen),\n});\n\n/** Tag used for full-width system banners (e.g. connection status). Excluded from `NotificationList` by default. */\nexport const SYSTEM_NOTIFICATION_TAG = 'system' as const;\n\nexport const hasSystemNotificationTag = (notification: Notification) =>\n  notification.tags?.includes(SYSTEM_NOTIFICATION_TAG) ?? false;\n\nexport type NotificationIncidentDescriptor = {\n  /** Where the incident happened (e.g. api, browser, validation, permission). */\n  domain: string;\n  /** Entity being operated on (e.g. message, poll, location, attachment). */\n  entity: string;\n  /** Attempted operation (e.g. send, end, share, upload). */\n  operation: string;\n  /** Status of the operation (e.g. failed, success, blocked). */\n  status?: string;\n};\n\nexport type AddNotificationParams = {\n  /** Optional interactive actions rendered by the notification component. */\n  actions?: NotificationAction[];\n  /**\n   * Overrides the aria-live priority the notification is announced with. Defaults to severity-based\n   * (`error` → `assertive`, otherwise `polite`). Set `assertive` for a confirmation that should be\n   * heard promptly rather than queued behind a competing announcement (e.g. a focus change).\n   */\n  ariaLive?: AriaLivePriority;\n  /** Arbitrary context metadata stored in `origin.context`. */\n  context?: Record<string, unknown>;\n  /** Duration in milliseconds after which the notification auto-dismisses. */\n  duration?: number;\n  /** Logical source emitting the notification (e.g. component or feature name). */\n  emitter: string;\n  /** Underlying error object attached as `options.originalError`. */\n  error?: Error;\n  /** Human-readable notification message. */\n  message: string;\n  /** Notification severity visualized by the UI. */\n  severity?: NotificationSeverity;\n  /** Additional tags appended to target panel tags. */\n  tags?: string[];\n  /** Explicit target panels; when provided, inferred panel is ignored. */\n  targetPanels?: NotificationTargetPanel[];\n  /** Structured descriptor of the incident this notification reports on. */\n  incident?: NotificationIncidentDescriptor;\n  /**\n   * Optional machine-readable notification type identifier (domain:entity:operation:status).\n   * Used by notification consumers to route behavior, including translation lookup\n   * via notification-type registries.\n   * When omitted, `type` is generated from `incident` if `incident` is provided.\n   */\n  type?: string;\n};\n\n/**\n * Same shape as {@link AddNotificationParams} except `targetPanels` is omitted — system\n * banners are global and do not receive `target:*` panel tags (they are filtered by the\n * `system` tag for `NotificationList` vs banner UIs).\n */\nexport type AddSystemNotificationParams = Omit<AddNotificationParams, 'targetPanels'>;\n\nexport type AddNotification = (params: AddNotificationParams) => void;\n/** Returns the notification id (for removal / timeouts). */\nexport type AddSystemNotification = (params: AddSystemNotificationParams) => string;\nexport type RemoveNotification = (id: string) => void;\nexport type StartNotificationTimeout = (id: string) => void;\n/** Starts a notification's countdown unless one is already running. */\nexport type EnsureNotificationTimeout = (id: string) => void;\n\nexport type NotificationApi = {\n  addNotification: AddNotification;\n  addSystemNotification: AddSystemNotification;\n  ensureNotificationTimeout: EnsureNotificationTimeout;\n  removeNotification: RemoveNotification;\n  startNotificationTimeout: StartNotificationTimeout;\n};\n\nconst getTargetTags = (\n  targetPanels: NotificationTargetPanel[] | undefined,\n  inferredPanel: NotificationTargetPanel | undefined,\n  tags: string[] | undefined,\n  modalManagerHasOpenDialog: boolean,\n) => {\n  if (targetPanels) {\n    const effectiveTargetPanels =\n      modalManagerHasOpenDialog && targetPanels.length > 0\n        ? [...targetPanels, 'modal' as const]\n        : targetPanels;\n\n    return Array.from(\n      new Set([...effectiveTargetPanels.map(getNotificationTargetTag), ...(tags ?? [])]),\n    );\n  }\n\n  if (modalManagerHasOpenDialog) {\n    return Array.from(\n      new Set([\n        ...(inferredPanel ? [getNotificationTargetTag(inferredPanel)] : []),\n        getNotificationTargetTag('modal'),\n        ...(tags ?? []),\n      ]),\n    );\n  }\n\n  return addNotificationTargetTag(inferredPanel, tags);\n};\n\nconst getTypeFromIncident = ({\n  incident,\n  severity,\n  type,\n}: Pick<AddNotificationParams, 'incident' | 'severity' | 'type'>) => {\n  if (type) return type;\n  if (!incident) return undefined;\n\n  const status =\n    incident.status ??\n    (severity === 'error' ? 'failed' : severity === 'success' ? 'success' : severity);\n\n  return [incident.domain, incident.entity, incident.operation, status]\n    .filter((segment): segment is string => !!segment)\n    .join(':');\n};\n\nexport const useNotificationApi = (): NotificationApi => {\n  const { client } = useChatContext();\n  const inferredPanel = useNotificationTarget();\n  const modalDialogManager = useModalDialogManager();\n  const modalManagerHasOpenDialog =\n    useStateStore(modalDialogManager?.state, modalDialogManagerStateSelector)\n      ?.hasOpenDialog ?? false;\n\n  const addNotification: AddNotification = useCallback(\n    ({\n      actions,\n      ariaLive,\n      context,\n      duration,\n      emitter,\n      error,\n      incident,\n      message,\n      severity,\n      tags,\n      targetPanels,\n      type,\n    }: AddNotificationParams) => {\n      const notificationTags = getTargetTags(\n        targetPanels,\n        inferredPanel,\n        tags,\n        modalManagerHasOpenDialog,\n      );\n      const resolvedType = getTypeFromIncident({ incident, severity, type });\n      const origin = context ? { context, emitter } : { emitter };\n\n      const options = {\n        ...(actions ? { actions } : {}),\n        ...(typeof duration === 'number' ? { duration } : {}),\n        ...(error ? { originalError: error } : {}),\n        ...(ariaLive ? { metadata: { ariaLive } } : {}),\n        ...(notificationTags.length > 0 ? { tags: notificationTags } : {}),\n        ...(severity ? { severity } : {}),\n        ...(resolvedType ? { type: resolvedType } : {}),\n      };\n\n      client.notifications.add({\n        message,\n        options,\n        origin,\n      });\n    },\n    [client, inferredPanel, modalManagerHasOpenDialog],\n  );\n\n  const addSystemNotification: AddSystemNotification = useCallback(\n    ({\n      actions,\n      ariaLive,\n      context,\n      duration,\n      emitter,\n      error,\n      incident,\n      message,\n      severity,\n      tags,\n      type,\n    }: AddSystemNotificationParams) => {\n      const notificationTags = Array.from(\n        new Set([SYSTEM_NOTIFICATION_TAG, ...(tags ?? [])]),\n      );\n      const resolvedType = getTypeFromIncident({ incident, severity, type });\n      const origin = context ? { context, emitter } : { emitter };\n\n      const options = {\n        ...(actions ? { actions } : {}),\n        ...(typeof duration === 'number' ? { duration } : {}),\n        ...(error ? { originalError: error } : {}),\n        ...(ariaLive ? { metadata: { ariaLive } } : {}),\n        ...(notificationTags.length > 0 ? { tags: notificationTags } : {}),\n        ...(severity ? { severity } : {}),\n        ...(resolvedType ? { type: resolvedType } : {}),\n      };\n\n      return client.notifications.add({\n        message,\n        options,\n        origin,\n      });\n    },\n    [client],\n  );\n\n  const removeNotification: RemoveNotification = useCallback(\n    (id) => {\n      client.notifications.remove(id);\n    },\n    [client],\n  );\n\n  const startNotificationTimeout: StartNotificationTimeout = useCallback(\n    (id) => {\n      client.notifications.startTimeout(id);\n    },\n    [client],\n  );\n\n  // Starting is the manager's to make idempotent: a caller that cannot know whether the countdown\n  // is already running -- a component that remounts, a second view of the same notification --\n  // would otherwise hand it another full lifetime and lose the original deadline.\n  const ensureNotificationTimeout: EnsureNotificationTimeout = useCallback(\n    (id) => {\n      client.notifications.ensureTimeout(id);\n    },\n    [client],\n  );\n\n  return {\n    addNotification,\n    addSystemNotification,\n    ensureNotificationTimeout,\n    removeNotification,\n    startNotificationTimeout,\n  };\n};\n"],"mappings":"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"}

package/dist/es/components/Notifications/hooks/useNotificationTarget.mjs

@@ -1,23 +1,19 @@
 import { useChannelListContext } from "../../../context/ChannelListContext.mjs";
-import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
-import { useLegacyThreadContext } from "../../Thread/LegacyThreadContext.mjs";
+import { useChannelInstanceContext } from "../../../context/ChannelInstanceContext.mjs";
 import { useThreadContext } from "../../Threads/ThreadContext.mjs";
-import { ChatViewContext } from "../../ChatView/ChatView.mjs";
-import { useContext } from "react";
+import { useWorkspaceNavigation } from "../../../context/WorkspaceNavigationContext.mjs";
 //#region src/components/Notifications/hooks/useNotificationTarget.ts
 /**
 * Resolves the panel target where notifications emitted by the current component should be displayed.
 */
 var useNotificationTarget = () => {
-	const chatViewContext = useContext(ChatViewContext);
-	const { channels } = useChannelListContext();
-	const { channel } = useChannelStateContext();
-	const threadInstance = useThreadContext();
-	const { legacyThread } = useLegacyThreadContext();
-	if (threadInstance || legacyThread) return "thread";
+	const { isThreadsView } = useWorkspaceNavigation();
+	const { paginator } = useChannelListContext();
+	const { channel } = useChannelInstanceContext();
+	if (useThreadContext()) return "thread";
 	if (channel) return "channel";
-	if (chatViewContext?.activeChatView === "threads") return "thread-list";
-	if (channels) return "channel-list";
+	if (isThreadsView) return "thread-list";
+	if (paginator) return "channel-list";
 };
 //#endregion
 export { useNotificationTarget };

package/dist/es/components/Notifications/hooks/useNotificationTarget.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useNotificationTarget.mjs","names":[],"sources":["../../../../../src/components/Notifications/hooks/useNotificationTarget.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport { ChatViewContext } from '../../ChatView';\nimport { useChannelListContext, useChannelStateContext } from '../../../context';\nimport { useThreadContext } from '../../Threads/ThreadContext';\n\nimport type { NotificationTargetPanel } from '../notificationTarget';\nimport { useLegacyThreadContext } from '../../Thread';\n\n/**\n * Resolves the panel target where notifications emitted by the current component should be displayed.\n */\nexport const useNotificationTarget = (): NotificationTargetPanel | undefined => {\n  const chatViewContext = useContext(ChatViewContext);\n  const { channels } = useChannelListContext();\n  const { channel } = useChannelStateContext();\n  const threadInstance = useThreadContext();\n  const { legacyThread } = useLegacyThreadContext();\n\n  if (threadInstance || legacyThread) return 'thread';\n  if (channel) return 'channel';\n  if (chatViewContext?.activeChatView === 'threads') return 'thread-list';\n  if (channels) return 'channel-list';\n  return undefined;\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,8BAAmE;CAC9E,MAAM,kBAAkB,WAAW,eAAe;CAClD,MAAM,EAAE,aAAa,sBAAsB;CAC3C,MAAM,EAAE,YAAY,uBAAuB;CAC3C,MAAM,iBAAiB,iBAAiB;CACxC,MAAM,EAAE,iBAAiB,uBAAuB;CAEhD,IAAI,kBAAkB,cAAc,OAAO;CAC3C,IAAI,SAAS,OAAO;CACpB,IAAI,iBAAiB,mBAAmB,WAAW,OAAO;CAC1D,IAAI,UAAU,OAAO;AAEvB"}
+{"version":3,"file":"useNotificationTarget.mjs","names":[],"sources":["../../../../../src/components/Notifications/hooks/useNotificationTarget.ts"],"sourcesContent":["import { useChannelListContext, useWorkspaceNavigation } from '../../../context';\n// MERGE-RECONCILE: the deleted ChannelStateContext's `channel` is read here only to detect\n// whether a channel is in scope; migrated to useChannelInstanceContext (safe — returns\n// undefined channel outside a Channel subtree, unlike useChannel which throws).\nimport { useChannelInstanceContext } from '../../../context/ChannelInstanceContext';\nimport { useThreadContext } from '../../Threads/ThreadContext';\n\nimport type { NotificationTargetPanel } from '../notificationTarget';\n\n/**\n * Resolves the panel target where notifications emitted by the current component should be displayed.\n */\nexport const useNotificationTarget = (): NotificationTargetPanel | undefined => {\n  const { isThreadsView } = useWorkspaceNavigation();\n  const { paginator } = useChannelListContext();\n  const { channel } = useChannelInstanceContext();\n  const threadInstance = useThreadContext();\n\n  if (threadInstance) return 'thread';\n  if (channel) return 'channel';\n  if (isThreadsView) return 'thread-list';\n  if (paginator) return 'channel-list';\n  return undefined;\n};\n"],"mappings":";;;;;;;;AAYA,IAAa,8BAAmE;CAC9E,MAAM,EAAE,kBAAkB,uBAAuB;CACjD,MAAM,EAAE,cAAc,sBAAsB;CAC5C,MAAM,EAAE,YAAY,0BAA0B;CAG9C,IAFuB,iBAEnB,GAAgB,OAAO;CAC3B,IAAI,SAAS,OAAO;CACpB,IAAI,eAAe,OAAO;CAC1B,IAAI,WAAW,OAAO;AAExB"}

package/dist/es/components/Notifications/hooks/useNotifications.mjs

@@ -1,5 +1,5 @@
-import { useChatContext } from "../../../context/ChatContext.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
 import { useNotificationConfigurationContext } from "../NotificationConfigurationContext.mjs";
 import { isNotificationForPanel } from "../notificationTarget.mjs";
 import { useCallback } from "react";

package/dist/es/components/Notifications/hooks/useSystemNotifications.mjs

@@ -1,5 +1,5 @@
-import { useChatContext } from "../../../context/ChatContext.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
 import { hasSystemNotificationTag } from "./useNotificationApi.mjs";
 import { useCallback } from "react";
 //#region src/components/Notifications/hooks/useSystemNotifications.ts

package/dist/es/components/Notifications/notificationTarget.mjs

@@ -7,6 +7,18 @@ var NOTIFICATION_TARGET_PANELS = [
 	"modal"
 ];
 var isNotificationTargetPanel = (value) => typeof value === "string" && NOTIFICATION_TARGET_PANELS.includes(value);
+/**
+* Panel implied by the composer that raised a notification. `stream-chat` cannot name a panel -- it
+* has no notion of one -- but every composer-scoped emitter puts the composer in `origin.context`,
+* and a thread composer's upload failure belongs in that thread rather than in the channel the
+* thread hangs off. Only the two contexts that correspond to a panel are mapped; `message` and
+* `legacy_thread` have none.
+*/
+var getPanelFromComposerContext = (notification) => {
+	const composer = notification.origin.context?.composer;
+	if (composer?.contextType === "thread") return "thread";
+	if (composer?.contextType === "channel") return "channel";
+};
 var getNotificationTargetPanel = (notification) => {
 	const targetTag = notification.tags?.find((tag) => tag.startsWith("target:"));
 	if (targetTag) {
@@ -14,13 +26,16 @@ var getNotificationTargetPanel = (notification) => {
 		if (isNotificationTargetPanel(candidate)) return candidate;
 	}
 	const panel = notification.origin.context?.panel;
-	return isNotificationTargetPanel(panel) ? panel : void 0;
+	if (isNotificationTargetPanel(panel)) return panel;
+	return getPanelFromComposerContext(notification);
 };
 var getNotificationTargetPanels = (notification) => {
 	const targetPanels = (notification.tags ?? []).filter((tag) => tag.startsWith("target:")).map((tag) => tag.slice(7)).filter((value) => isNotificationTargetPanel(value));
 	if (targetPanels.length > 0) return Array.from(new Set(targetPanels));
 	const panel = notification.origin.context?.panel;
-	return isNotificationTargetPanel(panel) ? [panel] : [];
+	if (isNotificationTargetPanel(panel)) return [panel];
+	const composerPanel = getPanelFromComposerContext(notification);
+	return composerPanel ? [composerPanel] : [];
 };
 var getNotificationTargetTag = (panel) => `target:${panel}`;
 var addNotificationTargetTag = (panel, tags) => {

package/dist/es/components/Notifications/notificationTarget.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"notificationTarget.mjs","names":[],"sources":["../../../../src/components/Notifications/notificationTarget.ts"],"sourcesContent":["import type { Notification } from 'stream-chat';\n\nconst NOTIFICATION_TARGET_PANELS = [\n  'channel',\n  'thread',\n  'channel-list',\n  'thread-list',\n  'modal',\n] as const;\n\n/**\n * Panel where a notification should be consumed.\n * Use in origin.context.panel when publishing so NotificationList can filter by panel.\n */\nexport type NotificationTargetPanel = (typeof NOTIFICATION_TARGET_PANELS)[number];\n\nexport const isNotificationTargetPanel = (\n  value: unknown,\n): value is NotificationTargetPanel =>\n  typeof value === 'string' &&\n  (NOTIFICATION_TARGET_PANELS as readonly string[]).includes(value);\n\nexport const getNotificationTargetPanel = (\n  notification: Notification,\n): NotificationTargetPanel | undefined => {\n  const targetTag = notification.tags?.find((tag) => tag.startsWith('target:'));\n  if (targetTag) {\n    const candidate = targetTag.slice('target:'.length);\n    if (isNotificationTargetPanel(candidate)) return candidate;\n  }\n  const panel = notification.origin.context?.panel;\n  return isNotificationTargetPanel(panel) ? panel : undefined;\n};\n\nexport const getNotificationTargetPanels = (\n  notification: Notification,\n): NotificationTargetPanel[] => {\n  const targetPanels = (notification.tags ?? [])\n    .filter((tag) => tag.startsWith('target:'))\n    .map((tag) => tag.slice('target:'.length))\n    .filter((value): value is NotificationTargetPanel =>\n      isNotificationTargetPanel(value),\n    );\n\n  if (targetPanels.length > 0) {\n    return Array.from(new Set(targetPanels));\n  }\n\n  const panel = notification.origin.context?.panel;\n  return isNotificationTargetPanel(panel) ? [panel] : [];\n};\n\nexport const getNotificationTargetTag = (panel: NotificationTargetPanel) =>\n  `target:${panel}` as const;\n\nexport const addNotificationTargetTag = (\n  panel: NotificationTargetPanel | undefined,\n  tags?: string[],\n) => {\n  if (!panel) return tags ?? [];\n  return Array.from(new Set([getNotificationTargetTag(panel), ...(tags ?? [])]));\n};\n\nexport const isNotificationForPanel = (\n  notification: Notification,\n  panel: NotificationTargetPanel,\n  options?: { fallbackPanel?: NotificationTargetPanel },\n) => {\n  const explicitTargetPanels = getNotificationTargetPanels(notification);\n  if (explicitTargetPanels.length > 0) {\n    return explicitTargetPanels.includes(panel);\n  }\n\n  const resolvedPanel = options?.fallbackPanel ?? 'channel';\n  return resolvedPanel === panel;\n};\n"],"mappings":";AAEA,IAAM,6BAA6B;CACjC;CACA;CACA;CACA;CACA;AACF;AAQA,IAAa,6BACX,UAEA,OAAO,UAAU,YAChB,2BAAiD,SAAS,KAAK;AAElE,IAAa,8BACX,iBACwC;CACxC,MAAM,YAAY,aAAa,MAAM,MAAM,QAAQ,IAAI,WAAW,SAAS,CAAC;CAC5E,IAAI,WAAW;EACb,MAAM,YAAY,UAAU,MAAM,CAAgB;EAClD,IAAI,0BAA0B,SAAS,GAAG,OAAO;CACnD;CACA,MAAM,QAAQ,aAAa,OAAO,SAAS;CAC3C,OAAO,0BAA0B,KAAK,IAAI,QAAQ,KAAA;AACpD;AAEA,IAAa,+BACX,iBAC8B;CAC9B,MAAM,gBAAgB,aAAa,QAAQ,CAAC,EAAA,CACzC,QAAQ,QAAQ,IAAI,WAAW,SAAS,CAAC,CAAC,CAC1C,KAAK,QAAQ,IAAI,MAAM,CAAgB,CAAC,CAAC,CACzC,QAAQ,UACP,0BAA0B,KAAK,CACjC;CAEF,IAAI,aAAa,SAAS,GACxB,OAAO,MAAM,KAAK,IAAI,IAAI,YAAY,CAAC;CAGzC,MAAM,QAAQ,aAAa,OAAO,SAAS;CAC3C,OAAO,0BAA0B,KAAK,IAAI,CAAC,KAAK,IAAI,CAAC;AACvD;AAEA,IAAa,4BAA4B,UACvC,UAAU;AAEZ,IAAa,4BACX,OACA,SACG;CACH,IAAI,CAAC,OAAO,OAAO,QAAQ,CAAC;CAC5B,OAAO,MAAM,qBAAK,IAAI,IAAI,CAAC,yBAAyB,KAAK,GAAG,GAAI,QAAQ,CAAC,CAAE,CAAC,CAAC;AAC/E;AAEA,IAAa,0BACX,cACA,OACA,YACG;CACH,MAAM,uBAAuB,4BAA4B,YAAY;CACrE,IAAI,qBAAqB,SAAS,GAChC,OAAO,qBAAqB,SAAS,KAAK;CAI5C,QADsB,SAAS,iBAAiB,eACvB;AAC3B"}
+{"version":3,"file":"notificationTarget.mjs","names":[],"sources":["../../../../src/components/Notifications/notificationTarget.ts"],"sourcesContent":["import type { Notification } from 'stream-chat';\n\nconst NOTIFICATION_TARGET_PANELS = [\n  'channel',\n  'thread',\n  'channel-list',\n  'thread-list',\n  'modal',\n] as const;\n\n/**\n * Panel where a notification should be consumed.\n * Use in origin.context.panel when publishing so NotificationList can filter by panel.\n */\nexport type NotificationTargetPanel = (typeof NOTIFICATION_TARGET_PANELS)[number];\n\nexport const isNotificationTargetPanel = (\n  value: unknown,\n): value is NotificationTargetPanel =>\n  typeof value === 'string' &&\n  (NOTIFICATION_TARGET_PANELS as readonly string[]).includes(value);\n\n/**\n * Panel implied by the composer that raised a notification. `stream-chat` cannot name a panel -- it\n * has no notion of one -- but every composer-scoped emitter puts the composer in `origin.context`,\n * and a thread composer's upload failure belongs in that thread rather than in the channel the\n * thread hangs off. Only the two contexts that correspond to a panel are mapped; `message` and\n * `legacy_thread` have none.\n */\nconst getPanelFromComposerContext = (\n  notification: Notification,\n): NotificationTargetPanel | undefined => {\n  const composer = notification.origin.context?.composer as\n    | { contextType?: unknown }\n    | undefined;\n\n  if (composer?.contextType === 'thread') return 'thread';\n  if (composer?.contextType === 'channel') return 'channel';\n  return undefined;\n};\n\nexport const getNotificationTargetPanel = (\n  notification: Notification,\n): NotificationTargetPanel | undefined => {\n  const targetTag = notification.tags?.find((tag) => tag.startsWith('target:'));\n  if (targetTag) {\n    const candidate = targetTag.slice('target:'.length);\n    if (isNotificationTargetPanel(candidate)) return candidate;\n  }\n  const panel = notification.origin.context?.panel;\n  if (isNotificationTargetPanel(panel)) return panel;\n  return getPanelFromComposerContext(notification);\n};\n\nexport const getNotificationTargetPanels = (\n  notification: Notification,\n): NotificationTargetPanel[] => {\n  const targetPanels = (notification.tags ?? [])\n    .filter((tag) => tag.startsWith('target:'))\n    .map((tag) => tag.slice('target:'.length))\n    .filter((value): value is NotificationTargetPanel =>\n      isNotificationTargetPanel(value),\n    );\n\n  if (targetPanels.length > 0) {\n    return Array.from(new Set(targetPanels));\n  }\n\n  const panel = notification.origin.context?.panel;\n  if (isNotificationTargetPanel(panel)) return [panel];\n\n  const composerPanel = getPanelFromComposerContext(notification);\n  return composerPanel ? [composerPanel] : [];\n};\n\nexport const getNotificationTargetTag = (panel: NotificationTargetPanel) =>\n  `target:${panel}` as const;\n\nexport const addNotificationTargetTag = (\n  panel: NotificationTargetPanel | undefined,\n  tags?: string[],\n) => {\n  if (!panel) return tags ?? [];\n  return Array.from(new Set([getNotificationTargetTag(panel), ...(tags ?? [])]));\n};\n\nexport const isNotificationForPanel = (\n  notification: Notification,\n  panel: NotificationTargetPanel,\n  options?: { fallbackPanel?: NotificationTargetPanel },\n) => {\n  const explicitTargetPanels = getNotificationTargetPanels(notification);\n  if (explicitTargetPanels.length > 0) {\n    return explicitTargetPanels.includes(panel);\n  }\n\n  const resolvedPanel = options?.fallbackPanel ?? 'channel';\n  return resolvedPanel === panel;\n};\n"],"mappings":";AAEA,IAAM,6BAA6B;CACjC;CACA;CACA;CACA;CACA;AACF;AAQA,IAAa,6BACX,UAEA,OAAO,UAAU,YAChB,2BAAiD,SAAS,KAAK;;;;;;;;AASlE,IAAM,+BACJ,iBACwC;CACxC,MAAM,WAAW,aAAa,OAAO,SAAS;CAI9C,IAAI,UAAU,gBAAgB,UAAU,OAAO;CAC/C,IAAI,UAAU,gBAAgB,WAAW,OAAO;AAElD;AAEA,IAAa,8BACX,iBACwC;CACxC,MAAM,YAAY,aAAa,MAAM,MAAM,QAAQ,IAAI,WAAW,SAAS,CAAC;CAC5E,IAAI,WAAW;EACb,MAAM,YAAY,UAAU,MAAM,CAAgB;EAClD,IAAI,0BAA0B,SAAS,GAAG,OAAO;CACnD;CACA,MAAM,QAAQ,aAAa,OAAO,SAAS;CAC3C,IAAI,0BAA0B,KAAK,GAAG,OAAO;CAC7C,OAAO,4BAA4B,YAAY;AACjD;AAEA,IAAa,+BACX,iBAC8B;CAC9B,MAAM,gBAAgB,aAAa,QAAQ,CAAC,EAAA,CACzC,QAAQ,QAAQ,IAAI,WAAW,SAAS,CAAC,CAAC,CAC1C,KAAK,QAAQ,IAAI,MAAM,CAAgB,CAAC,CAAC,CACzC,QAAQ,UACP,0BAA0B,KAAK,CACjC;CAEF,IAAI,aAAa,SAAS,GACxB,OAAO,MAAM,KAAK,IAAI,IAAI,YAAY,CAAC;CAGzC,MAAM,QAAQ,aAAa,OAAO,SAAS;CAC3C,IAAI,0BAA0B,KAAK,GAAG,OAAO,CAAC,KAAK;CAEnD,MAAM,gBAAgB,4BAA4B,YAAY;CAC9D,OAAO,gBAAgB,CAAC,aAAa,IAAI,CAAC;AAC5C;AAEA,IAAa,4BAA4B,UACvC,UAAU;AAEZ,IAAa,4BACX,OACA,SACG;CACH,IAAI,CAAC,OAAO,OAAO,QAAQ,CAAC;CAC5B,OAAO,MAAM,qBAAK,IAAI,IAAI,CAAC,yBAAyB,KAAK,GAAG,GAAI,QAAQ,CAAC,CAAE,CAAC,CAAC;AAC/E;AAEA,IAAa,0BACX,cACA,OACA,YACG;CACH,MAAM,uBAAuB,4BAA4B,YAAY;CACrE,IAAI,qBAAqB,SAAS,GAChC,OAAO,qBAAqB,SAAS,KAAK;CAI5C,QADsB,SAAS,iBAAiB,eACvB;AAC3B"}

package/dist/es/components/Poll/Poll.mjs

@@ -1,6 +1,6 @@
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { PollProvider } from "../../context/PollContext.mjs";
 import { PollContent } from "./PollContent.mjs";
+import { PollProvider } from "../../context/PollContext.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Poll/Poll.tsx

package/dist/es/components/Poll/PollActions/AddCommentPrompt.mjs

@@ -1,10 +1,10 @@
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
-import { useModalContext } from "../../../context/ModalContext.mjs";
-import { usePollContext } from "../../../context/PollContext.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
 import { Prompt } from "../../Dialog/components/Prompt.mjs";
 import { TextInput } from "../../Form/TextInput.mjs";
 import { useFormState } from "../../Form/hooks/useFormState.mjs";
+import { useModalContext } from "../../../context/ModalContext.mjs";
+import { usePollContext } from "../../../context/PollContext.mjs";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Poll/PollActions/AddCommentPrompt.tsx
@@ -18,7 +18,7 @@ var AddCommentPrompt = ({ messageId }) => {
 	const initialComment = ownAnswer?.answer_text ?? "";
 	const initialValue = useMemo(() => ({ comment: initialComment }), [initialComment]);
 	const validators = useMemo(() => ({ comment: (v) => {
-		if (!(typeof v === "string" ? v.trim() : "")) return new Error(t("This field cannot be empty or contain only spaces"));
+		if (!(typeof v === "string" ? v.trim() : "")) return new Error(t("poll.addCommentPrompt.fieldCannotEmptyContain.label", "This field cannot be empty or contain only spaces"));
 	} }), [t]);
 	const { fieldErrors, handleSubmit, setFieldValue, value } = useFormState({
 		initialValue,
@@ -35,8 +35,8 @@ var AddCommentPrompt = ({ messageId }) => {
 	useEffect(() => {
 		input?.focus();
 	}, [input]);
-	const title = ownAnswer ? t("Update your comment") : t("Add a comment");
-	const description = ownAnswer ? t("Update the comment attached to your poll answer") : t("Add a comment to your poll answer");
+	const title = ownAnswer ? t("poll.addCommentPrompt.updateComment.label", "Update Your Comment") : t("poll.addCommentPrompt.addComment.label", "Add a Comment");
+	const description = ownAnswer ? t("poll.addCommentPrompt.updateCommentAttachedPoll.label", "Update the comment attached to your poll answer") : t("poll.addCommentPrompt.addCommentPollAnswer.label", "Add a comment to your poll answer");
 	const submitDisabled = !value.comment?.trim() || value.comment === ownAnswer?.answer_text;
 	return /* @__PURE__ */ jsxs(Prompt.Root, {
 		className: "str-chat__modal__poll-add-comment",
@@ -54,7 +54,7 @@ var AddCommentPrompt = ({ messageId }) => {
 				id: "comment",
 				name: "comment",
 				onChange: (e) => setFieldValue("comment", e.target.value),
-				placeholder: t("placeholder/PollComment"),
+				placeholder: t("poll.pollComment.placeholder", "Your comment"),
 				ref: setInput,
 				required: true,
 				type: "text",
@@ -63,12 +63,12 @@ var AddCommentPrompt = ({ messageId }) => {
 				className: "str-chat__prompt__footer__controls-button--cancel",
 				onClick: close,
 				type: "button",
-				children: t("Cancel")
+				children: t("common.cancel.label", "Cancel")
 			}), /* @__PURE__ */ jsx(Prompt.FooterControlsButtonPrimary, {
 				className: "str-chat__prompt__footer__controls-button--submit",
 				disabled: Object.keys(fieldErrors).length > 0 || submitDisabled,
 				type: "submit",
-				children: initialComment ? t("Update") : t("Send")
+				children: initialComment ? t("poll.addCommentPrompt.update.text", "Update") : t("common.send.label", "Send")
 			})] }) })]
 		})]
 	});

package/dist/es/components/Poll/PollActions/AddCommentPrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AddCommentPrompt.mjs","names":[],"sources":["../../../../../src/components/Poll/PollActions/AddCommentPrompt.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useStateStore } from '../../../store';\nimport { useModalContext, usePollContext, useTranslationContext } from '../../../context';\nimport type { PollAnswer, PollState } from 'stream-chat';\nimport { Prompt } from '../../Dialog';\nimport { TextInput } from '../../Form';\nimport { useFormState } from '../../Form/hooks';\n\ntype PollStateSelectorReturnValue = { ownAnswer: PollAnswer | undefined };\nconst pollStateSelector = (nextValue: PollState): PollStateSelectorReturnValue => ({\n  ownAnswer: nextValue.ownAnswer,\n});\n\nexport type AddCommentPromptProps = {\n  messageId: string;\n};\n\nexport const AddCommentPrompt = ({ messageId }: AddCommentPromptProps) => {\n  const { t } = useTranslationContext();\n  const { close } = useModalContext();\n  const { poll } = usePollContext();\n  const { ownAnswer } = useStateStore(poll.state, pollStateSelector);\n  const [input, setInput] = useState<HTMLInputElement | null>(null);\n\n  const initialComment = ownAnswer?.answer_text ?? '';\n  const initialValue = useMemo(() => ({ comment: initialComment }), [initialComment]);\n  const validators = useMemo(\n    () => ({\n      comment: (v: string) => {\n        const trimmed = typeof v === 'string' ? v.trim() : '';\n        if (!trimmed) {\n          return new Error(t('This field cannot be empty or contain only spaces'));\n        }\n        return undefined;\n      },\n    }),\n    [t],\n  );\n  const onSubmit = useCallback(\n    async (formValue: { comment: string }) => {\n      await poll.addAnswer(formValue.comment, messageId);\n      close();\n    },\n    [poll, messageId, close],\n  );\n  const { fieldErrors, handleSubmit, setFieldValue, value } = useFormState<{\n    comment: string;\n  }>({\n    initialValue,\n    onSubmit,\n    validators,\n  });\n\n  useEffect(() => {\n    input?.focus();\n  }, [input]);\n\n  const title = ownAnswer ? t('Update your comment') : t('Add a comment');\n  const description = ownAnswer\n    ? t('Update the comment attached to your poll answer')\n    : t('Add a comment to your poll answer');\n  const submitDisabled =\n    !value.comment?.trim() || value.comment === ownAnswer?.answer_text;\n\n  return (\n    <Prompt.Root className='str-chat__modal__poll-add-comment'>\n      {title && <Prompt.Header close={close} description={description} title={title} />}\n      <form autoComplete='off' onSubmit={handleSubmit}>\n        <Prompt.Body>\n          <TextInput\n            aria-label={title}\n            error={!!fieldErrors.comment}\n            errorMessage={fieldErrors.comment?.message}\n            id='comment'\n            name='comment'\n            onChange={(e) => setFieldValue('comment', e.target.value)}\n            placeholder={t('placeholder/PollComment')}\n            ref={setInput}\n            required\n            type='text'\n            value={value.comment}\n          />\n        </Prompt.Body>\n        <Prompt.Footer>\n          <Prompt.FooterControls>\n            <Prompt.FooterControlsButtonSecondary\n              className='str-chat__prompt__footer__controls-button--cancel'\n              onClick={close}\n              type='button'\n            >\n              {t('Cancel')}\n            </Prompt.FooterControlsButtonSecondary>\n            <Prompt.FooterControlsButtonPrimary\n              className='str-chat__prompt__footer__controls-button--submit'\n              disabled={Object.keys(fieldErrors).length > 0 || submitDisabled}\n              type='submit'\n            >\n              {initialComment ? t('Update') : t('Send')}\n            </Prompt.FooterControlsButtonPrimary>\n          </Prompt.FooterControls>\n        </Prompt.Footer>\n      </form>\n    </Prompt.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;AASA,IAAM,qBAAqB,eAAwD,EACjF,WAAW,UAAU,UACvB;AAMA,IAAa,oBAAoB,EAAE,gBAAuC;CACxE,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,EAAE,cAAc,cAAc,KAAK,OAAO,iBAAiB;CACjE,MAAM,CAAC,OAAO,YAAY,SAAkC,IAAI;CAEhE,MAAM,iBAAiB,WAAW,eAAe;CACjD,MAAM,eAAe,eAAe,EAAE,SAAS,eAAe,IAAI,CAAC,cAAc,CAAC;CAClF,MAAM,aAAa,eACV,EACL,UAAU,MAAc;EAEtB,IAAI,EADY,OAAO,MAAM,WAAW,EAAE,KAAK,IAAI,KAEjD,OAAO,IAAI,MAAM,EAAE,mDAAmD,CAAC;CAG3E,EACF,IACA,CAAC,CAAC,CACJ;CAQA,MAAM,EAAE,aAAa,cAAc,eAAe,UAAU,aAEzD;EACD;EACA,UAXe,YACf,OAAO,cAAmC;GACxC,MAAM,KAAK,UAAU,UAAU,SAAS,SAAS;GACjD,MAAM;EACR,GACA;GAAC;GAAM;GAAW;EAAK,CAMvB;EACA;CACF,CAAC;CAED,gBAAgB;EACd,OAAO,MAAM;CACf,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,YAAY,EAAE,qBAAqB,IAAI,EAAE,eAAe;CACtE,MAAM,cAAc,YAChB,EAAE,iDAAiD,IACnD,EAAE,mCAAmC;CACzC,MAAM,iBACJ,CAAC,MAAM,SAAS,KAAK,KAAK,MAAM,YAAY,WAAW;CAEzD,OACE,qBAAC,OAAO,MAAR;EAAa,WAAU;YAAvB,CACG,SAAS,oBAAC,OAAO,QAAR;GAAsB;GAAoB;GAAoB;EAAQ,CAAA,GAChF,qBAAC,QAAD;GAAM,cAAa;GAAM,UAAU;aAAnC,CACE,oBAAC,OAAO,MAAR,EAAA,UACE,oBAAC,WAAD;IACE,cAAY;IACZ,OAAO,CAAC,CAAC,YAAY;IACrB,cAAc,YAAY,SAAS;IACnC,IAAG;IACH,MAAK;IACL,WAAW,MAAM,cAAc,WAAW,EAAE,OAAO,KAAK;IACxD,aAAa,EAAE,yBAAyB;IACxC,KAAK;IACL,UAAA;IACA,MAAK;IACL,OAAO,MAAM;GACd,CAAA,EACU,CAAA,GACb,oBAAC,OAAO,QAAR,EAAA,UACE,qBAAC,OAAO,gBAAR,EAAA,UAAA,CACE,oBAAC,OAAO,+BAAR;IACE,WAAU;IACV,SAAS;IACT,MAAK;cAEJ,EAAE,QAAQ;GACyB,CAAA,GACtC,oBAAC,OAAO,6BAAR;IACE,WAAU;IACV,UAAU,OAAO,KAAK,WAAW,CAAC,CAAC,SAAS,KAAK;IACjD,MAAK;cAEJ,iBAAiB,EAAE,QAAQ,IAAI,EAAE,MAAM;GACN,CAAA,CACf,EAAA,CAAA,EACV,CAAA,CACX;IACK;;AAEjB"}
+{"version":3,"file":"AddCommentPrompt.mjs","names":[],"sources":["../../../../../src/components/Poll/PollActions/AddCommentPrompt.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useStateStore } from '../../../store';\nimport { useModalContext, usePollContext, useTranslationContext } from '../../../context';\nimport type { PollState, PollVoteResponseData } from 'stream-chat';\nimport { Prompt } from '../../Dialog';\nimport { TextInput } from '../../Form';\nimport { useFormState } from '../../Form/hooks';\n\ntype PollStateSelectorReturnValue = { ownAnswer: PollVoteResponseData | undefined };\nconst pollStateSelector = (nextValue: PollState): PollStateSelectorReturnValue => ({\n  ownAnswer: nextValue.ownAnswer,\n});\n\nexport type AddCommentPromptProps = {\n  messageId: string;\n};\n\nexport const AddCommentPrompt = ({ messageId }: AddCommentPromptProps) => {\n  const { t } = useTranslationContext();\n  const { close } = useModalContext();\n  const { poll } = usePollContext();\n  const { ownAnswer } = useStateStore(poll.state, pollStateSelector);\n  const [input, setInput] = useState<HTMLInputElement | null>(null);\n\n  const initialComment = ownAnswer?.answer_text ?? '';\n  const initialValue = useMemo(() => ({ comment: initialComment }), [initialComment]);\n  const validators = useMemo(\n    () => ({\n      comment: (v: string) => {\n        const trimmed = typeof v === 'string' ? v.trim() : '';\n        if (!trimmed) {\n          return new Error(\n            t(\n              'poll.addCommentPrompt.fieldCannotEmptyContain.label',\n              'This field cannot be empty or contain only spaces',\n            ),\n          );\n        }\n        return undefined;\n      },\n    }),\n    [t],\n  );\n  const onSubmit = useCallback(\n    async (formValue: { comment: string }) => {\n      await poll.addAnswer(formValue.comment, messageId);\n      close();\n    },\n    [poll, messageId, close],\n  );\n  const { fieldErrors, handleSubmit, setFieldValue, value } = useFormState<{\n    comment: string;\n  }>({\n    initialValue,\n    onSubmit,\n    validators,\n  });\n\n  useEffect(() => {\n    input?.focus();\n  }, [input]);\n\n  const title = ownAnswer\n    ? t('poll.addCommentPrompt.updateComment.label', 'Update Your Comment')\n    : t('poll.addCommentPrompt.addComment.label', 'Add a Comment');\n  const description = ownAnswer\n    ? t(\n        'poll.addCommentPrompt.updateCommentAttachedPoll.label',\n        'Update the comment attached to your poll answer',\n      )\n    : t(\n        'poll.addCommentPrompt.addCommentPollAnswer.label',\n        'Add a comment to your poll answer',\n      );\n  const submitDisabled =\n    !value.comment?.trim() || value.comment === ownAnswer?.answer_text;\n\n  return (\n    <Prompt.Root className='str-chat__modal__poll-add-comment'>\n      {title && <Prompt.Header close={close} description={description} title={title} />}\n      <form autoComplete='off' onSubmit={handleSubmit}>\n        <Prompt.Body>\n          <TextInput\n            aria-label={title}\n            error={!!fieldErrors.comment}\n            errorMessage={fieldErrors.comment?.message}\n            id='comment'\n            name='comment'\n            onChange={(e) => setFieldValue('comment', e.target.value)}\n            placeholder={t('poll.pollComment.placeholder', 'Your comment')}\n            ref={setInput}\n            required\n            type='text'\n            value={value.comment}\n          />\n        </Prompt.Body>\n        <Prompt.Footer>\n          <Prompt.FooterControls>\n            <Prompt.FooterControlsButtonSecondary\n              className='str-chat__prompt__footer__controls-button--cancel'\n              onClick={close}\n              type='button'\n            >\n              {t('common.cancel.label', 'Cancel')}\n            </Prompt.FooterControlsButtonSecondary>\n            <Prompt.FooterControlsButtonPrimary\n              className='str-chat__prompt__footer__controls-button--submit'\n              disabled={Object.keys(fieldErrors).length > 0 || submitDisabled}\n              type='submit'\n            >\n              {initialComment\n                ? t('poll.addCommentPrompt.update.text', 'Update')\n                : t('common.send.label', 'Send')}\n            </Prompt.FooterControlsButtonPrimary>\n          </Prompt.FooterControls>\n        </Prompt.Footer>\n      </form>\n    </Prompt.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;AASA,IAAM,qBAAqB,eAAwD,EACjF,WAAW,UAAU,UACvB;AAMA,IAAa,oBAAoB,EAAE,gBAAuC;CACxE,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,EAAE,cAAc,cAAc,KAAK,OAAO,iBAAiB;CACjE,MAAM,CAAC,OAAO,YAAY,SAAkC,IAAI;CAEhE,MAAM,iBAAiB,WAAW,eAAe;CACjD,MAAM,eAAe,eAAe,EAAE,SAAS,eAAe,IAAI,CAAC,cAAc,CAAC;CAClF,MAAM,aAAa,eACV,EACL,UAAU,MAAc;EAEtB,IAAI,EADY,OAAO,MAAM,WAAW,EAAE,KAAK,IAAI,KAEjD,OAAO,IAAI,MACT,EACE,uDACA,mDACF,CACF;CAGJ,EACF,IACA,CAAC,CAAC,CACJ;CAQA,MAAM,EAAE,aAAa,cAAc,eAAe,UAAU,aAEzD;EACD;EACA,UAXe,YACf,OAAO,cAAmC;GACxC,MAAM,KAAK,UAAU,UAAU,SAAS,SAAS;GACjD,MAAM;EACR,GACA;GAAC;GAAM;GAAW;EAAK,CAMvB;EACA;CACF,CAAC;CAED,gBAAgB;EACd,OAAO,MAAM;CACf,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,YACV,EAAE,6CAA6C,qBAAqB,IACpE,EAAE,0CAA0C,eAAe;CAC/D,MAAM,cAAc,YAChB,EACE,yDACA,iDACF,IACA,EACE,oDACA,mCACF;CACJ,MAAM,iBACJ,CAAC,MAAM,SAAS,KAAK,KAAK,MAAM,YAAY,WAAW;CAEzD,OACE,qBAAC,OAAO,MAAR;EAAa,WAAU;YAAvB,CACG,SAAS,oBAAC,OAAO,QAAR;GAAsB;GAAoB;GAAoB;EAAQ,CAAA,GAChF,qBAAC,QAAD;GAAM,cAAa;GAAM,UAAU;aAAnC,CACE,oBAAC,OAAO,MAAR,EAAA,UACE,oBAAC,WAAD;IACE,cAAY;IACZ,OAAO,CAAC,CAAC,YAAY;IACrB,cAAc,YAAY,SAAS;IACnC,IAAG;IACH,MAAK;IACL,WAAW,MAAM,cAAc,WAAW,EAAE,OAAO,KAAK;IACxD,aAAa,EAAE,gCAAgC,cAAc;IAC7D,KAAK;IACL,UAAA;IACA,MAAK;IACL,OAAO,MAAM;GACd,CAAA,EACU,CAAA,GACb,oBAAC,OAAO,QAAR,EAAA,UACE,qBAAC,OAAO,gBAAR,EAAA,UAAA,CACE,oBAAC,OAAO,+BAAR;IACE,WAAU;IACV,SAAS;IACT,MAAK;cAEJ,EAAE,uBAAuB,QAAQ;GACE,CAAA,GACtC,oBAAC,OAAO,6BAAR;IACE,WAAU;IACV,UAAU,OAAO,KAAK,WAAW,CAAC,CAAC,SAAS,KAAK;IACjD,MAAK;cAEJ,iBACG,EAAE,qCAAqC,QAAQ,IAC/C,EAAE,qBAAqB,MAAM;GACC,CAAA,CACf,EAAA,CAAA,EACV,CAAA,CACX;IACK;;AAEjB"}