stream-chat-react 14.11.1 → 14.12.0

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

@@ -0,0 +1,314 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useNotifications } from "./hooks/useNotifications.mjs";
+import { hasSystemNotificationTag, useNotificationApi } from "./hooks/useNotificationApi.mjs";
+import { Notification } from "./Notification.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Notifications/NotificationList.tsx
+var ENTER_TRANSLATION = {
+	bottom: {
+		x: "0%",
+		y: "100%"
+	},
+	left: {
+		x: "-100%",
+		y: "0%"
+	},
+	right: {
+		x: "100%",
+		y: "0%"
+	},
+	top: {
+		x: "0%",
+		y: "-100%"
+	}
+};
+var EXIT_ANIMATION_MS = 340;
+var DEFAULT_MIN_DISPLAY_MS = 1e3;
+var isEnterFrom = (value) => value === "bottom" || value === "left" || value === "right" || value === "top";
+var getNotificationEnterFrom = (notification, fallbackEnterFrom) => {
+	if (!notification) return fallbackEnterFrom;
+	const metadataEnterFrom = notification.metadata?.entryDirection;
+	if (isEnterFrom(metadataEnterFrom)) return metadataEnterFrom;
+	const originEnterFrom = notification.origin.context?.entryDirection;
+	if (isEnterFrom(originEnterFrom)) return originEnterFrom;
+	return fallbackEnterFrom;
+};
+var isPersistent = (notification) => !notification.duration;
+var haveSameType = (a, b) => !!a?.type && !!b?.type && a.type === b.type;
+/** FIFO queue selector — oldest `createdAt` other than `displayed` wins. */
+var pickOldest = (notifications, displayed) => {
+	const excludeId = displayed?.id ?? null;
+	let oldest = null;
+	for (const notification of notifications) {
+		if (notification.id === excludeId) continue;
+		if (!oldest || notification.createdAt < oldest.createdAt) oldest = notification;
+	}
+	return oldest;
+};
+/** LIFO queue selector — newest `createdAt` other than `displayed` wins. */
+var pickNewest = (notifications, displayed) => {
+	const excludeId = displayed?.id ?? null;
+	let newest = null;
+	for (const notification of notifications) {
+		if (notification.id === excludeId) continue;
+		if (!newest || notification.createdAt > newest.createdAt) newest = notification;
+	}
+	return newest;
+};
+var pickNewestPersistent = (notifications, excludeId) => {
+	let newest = null;
+	for (const notification of notifications) {
+		if (notification.id === excludeId) continue;
+		if (!isPersistent(notification)) continue;
+		if (!newest || notification.createdAt > newest.createdAt) newest = notification;
+	}
+	return newest;
+};
+var pickNewestOfType = (notifications, type, excludeId) => {
+	if (!type) return null;
+	let newest = null;
+	for (const notification of notifications) {
+		if (notification.id === excludeId) continue;
+		if (notification.type !== type) continue;
+		if (!newest || notification.createdAt > newest.createdAt) newest = notification;
+	}
+	return newest;
+};
+/**
+* Builds the default `PickNextNotification` selector with a configurable queue fallback.
+* Encodes the snackbar concurrency rules from the design spec — the scheduling effect
+* only decides *when* to swap, the returned function decides *what* to swap to.
+*
+* Rules, in order of precedence:
+*   1. **Persistent wins.** Persistent variants (no `duration`) jump ahead of any
+*      queued transient because they carry an action the user must acknowledge.
+*   2. **Persistent ↛ replaced by transient.** While a persistent is displayed it stays
+*      put until dismissed externally or a *newer* persistent arrives.
+*   3. **Same-type refresh.** While a transient is displayed, a repeated trigger of the
+*      same `type` collapses to its latest occurrence. (The scheduling effect detects
+*      this via `haveSameType` and bypasses the dwell window so the refresh feels
+*      instant; this function just makes sure the latest same-type is returned.)
+*   4. **Queue fallback.** Otherwise, `pickFromQueue` selects the next notification
+*      (default: `pickOldest` / FIFO).
+*
+* Exported so callers that want to layer behavior on top of the design rules can wrap
+* the result instead of rewriting it.
+*/
+var createDefaultPickNext = (pickFromQueue = pickOldest) => (notifications, displayed) => {
+	if (notifications.length === 0) return null;
+	const newestPersistent = pickNewestPersistent(notifications, null);
+	if (!displayed) return newestPersistent ?? pickFromQueue(notifications, null);
+	if (!notifications.some(({ id }) => id === displayed.id)) return newestPersistent ?? pickFromQueue(notifications, null);
+	if (isPersistent(displayed)) {
+		const newerPersistent = newestPersistent && newestPersistent.id !== displayed.id ? newestPersistent : pickNewestPersistent(notifications, displayed.id);
+		if (newerPersistent && newerPersistent.createdAt > displayed.createdAt) return newerPersistent;
+		return displayed;
+	}
+	const sameTypeNewest = pickNewestOfType(notifications, displayed.type, displayed.id);
+	if (sameTypeNewest) return sameTypeNewest;
+	if (newestPersistent) return newestPersistent;
+	return pickFromQueue(notifications, displayed) ?? displayed;
+};
+/** Default selector — design-spec rules with FIFO queue fallback (`pickOldest`). */
+var defaultPickNext = createDefaultPickNext(pickOldest);
+var NotificationList = ({ className, enterFrom = "bottom", fallbackPanel, filter, minDisplayMs = DEFAULT_MIN_DISPLAY_MS, panel, pickNext = defaultPickNext, verticalAlignment = "bottom" }) => {
+	const { Notification: NotificationComponent = Notification } = useComponentContext();
+	const { t } = useTranslationContext();
+	const { removeNotification, startNotificationTimeout } = useNotificationApi();
+	const exitTimeoutRef = useRef(null);
+	const replacementTimeoutRef = useRef(null);
+	const candidateRef = useRef(null);
+	const displayedAtRef = useRef(null);
+	const listRef = useRef(null);
+	const observedElementRef = useRef(null);
+	const startedTimeoutIdsRef = useRef(null);
+	if (!startedTimeoutIdsRef.current) startedTimeoutIdsRef.current = /* @__PURE__ */ new Set();
+	const [displayedNotification, setDisplayedNotification] = useState(null);
+	const [transitionState, setTransitionState] = useState("enter");
+	const notifications = useNotifications({
+		applyDisplayFilter: true,
+		fallbackPanel,
+		filter: useCallback((notification) => {
+			if (hasSystemNotificationTag(notification)) return false;
+			return filter ? filter(notification) : true;
+		}, [filter]),
+		panel
+	});
+	const dismiss = useCallback((id) => {
+		startedTimeoutIdsRef.current?.delete(id);
+		removeNotification(id);
+	}, [removeNotification]);
+	useEffect(() => {
+		const notificationIds = new Set(notifications.map(({ id }) => id));
+		startedTimeoutIdsRef.current?.forEach((id) => {
+			if (!notificationIds.has(id)) startedTimeoutIdsRef.current?.delete(id);
+		});
+	}, [notifications]);
+	const clearReplacementTimeout = useCallback(() => {
+		if (replacementTimeoutRef.current !== null) {
+			window.clearTimeout(replacementTimeoutRef.current);
+			replacementTimeoutRef.current = null;
+		}
+	}, []);
+	useEffect(() => () => {
+		clearReplacementTimeout();
+		if (exitTimeoutRef.current !== null) {
+			window.clearTimeout(exitTimeoutRef.current);
+			exitTimeoutRef.current = null;
+		}
+	}, [clearReplacementTimeout]);
+	useEffect(() => {
+		candidateRef.current = pickNext(notifications, displayedNotification);
+	}, [
+		displayedNotification,
+		notifications,
+		pickNext
+	]);
+	useEffect(() => {
+		if (transitionState === "exit") return;
+		if (!displayedNotification) {
+			const candidate = pickNext(notifications, null);
+			if (candidate) {
+				displayedAtRef.current = Date.now();
+				setDisplayedNotification(candidate);
+				setTransitionState("enter");
+			}
+			return;
+		}
+		const candidate = pickNext(notifications, displayedNotification);
+		if (!candidate) {
+			clearReplacementTimeout();
+			setTransitionState("exit");
+			exitTimeoutRef.current = window.setTimeout(() => {
+				exitTimeoutRef.current = null;
+				displayedAtRef.current = null;
+				setDisplayedNotification(null);
+				setTransitionState("enter");
+			}, EXIT_ANIMATION_MS);
+			return;
+		}
+		if (candidate.id === displayedNotification.id) {
+			clearReplacementTimeout();
+			return;
+		}
+		const displayedInStore = notifications.some(({ id }) => id === displayedNotification.id);
+		const startSwap = () => {
+			replacementTimeoutRef.current = null;
+			setTransitionState("exit");
+			const previousId = displayedNotification.id;
+			const wasInStore = displayedInStore;
+			exitTimeoutRef.current = window.setTimeout(() => {
+				exitTimeoutRef.current = null;
+				if (wasInStore) {
+					startedTimeoutIdsRef.current?.delete(previousId);
+					removeNotification(previousId);
+				}
+				const next = candidateRef.current;
+				if (next && next.id !== previousId) {
+					displayedAtRef.current = Date.now();
+					setDisplayedNotification(next);
+					setTransitionState("enter");
+				} else {
+					displayedAtRef.current = null;
+					setDisplayedNotification(null);
+					setTransitionState("enter");
+				}
+			}, EXIT_ANIMATION_MS);
+		};
+		if (!displayedInStore) {
+			clearReplacementTimeout();
+			startSwap();
+			return;
+		}
+		if (haveSameType(displayedNotification, candidate)) {
+			clearReplacementTimeout();
+			startSwap();
+			return;
+		}
+		const elapsed = displayedAtRef.current ? Date.now() - displayedAtRef.current : 0;
+		const remaining = Math.max(0, minDisplayMs - elapsed);
+		if (remaining === 0) {
+			clearReplacementTimeout();
+			startSwap();
+		} else if (replacementTimeoutRef.current === null) replacementTimeoutRef.current = window.setTimeout(startSwap, remaining);
+	}, [
+		clearReplacementTimeout,
+		displayedNotification,
+		minDisplayMs,
+		notifications,
+		pickNext,
+		removeNotification,
+		transitionState
+	]);
+	const notification = displayedNotification;
+	const notificationEnterFrom = getNotificationEnterFrom(notification, enterFrom);
+	useEffect(() => {
+		const element = observedElementRef.current;
+		if (!element || !notification || transitionState === "exit") return;
+		const startTimeout = () => {
+			if (!startedTimeoutIdsRef.current || startedTimeoutIdsRef.current.has(notification.id)) return;
+			startedTimeoutIdsRef.current.add(notification.id);
+			startNotificationTimeout(notification.id);
+		};
+		if (typeof IntersectionObserver === "undefined") {
+			startTimeout();
+			return;
+		}
+		const observer = new IntersectionObserver((entries) => {
+			const [entry] = entries;
+			if (!entry?.isIntersecting) return;
+			startTimeout();
+			observer.disconnect();
+		}, {
+			root: listRef.current,
+			threshold: .5
+		});
+		observer.observe(element);
+		return () => {
+			observer.disconnect();
+		};
+	}, [
+		notification,
+		startNotificationTimeout,
+		transitionState
+	]);
+	if (!notification) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-label": t("aria/Notifications"),
+		className: clsx("str-chat__notification-list", `str-chat__notification-list--enter-from-${notificationEnterFrom}`, `str-chat__notification-list--position-${verticalAlignment}`, panel && `str-chat__notification-list--${panel}`, className),
+		"data-testid": "notification-list",
+		ref: listRef,
+		role: "region",
+		style: {
+			"--str-chat__notification-list-enter-x": ENTER_TRANSLATION[notificationEnterFrom].x,
+			"--str-chat__notification-list-enter-y": ENTER_TRANSLATION[notificationEnterFrom].y
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "str-chat__notification-list__edge str-chat__notification-list__edge--top"
+			}),
+			/* @__PURE__ */ jsx(NotificationComponent, {
+				entryDirection: notificationEnterFrom,
+				notification,
+				onDismiss: () => dismiss(notification.id),
+				ref: (element) => {
+					observedElementRef.current = element;
+				},
+				showClose: !notification.duration,
+				transitionState
+			}, notification.id),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "str-chat__notification-list__edge str-chat__notification-list__edge--bottom"
+			})
+		]
+	});
+};
+//#endregion
+export { NotificationList, createDefaultPickNext, pickNewest, pickOldest };
+
+//# sourceMappingURL=NotificationList.mjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,107 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useModalDialogManager } from "../../../context/DialogManagerContext.mjs";
+import { addNotificationTargetTag, getNotificationTargetTag } from "../notificationTarget.mjs";
+import { useNotificationTarget } from "./useNotificationTarget.mjs";
+import { useCallback } from "react";
+//#region src/components/Notifications/hooks/useNotificationApi.ts
+var modalDialogManagerStateSelector = ({ dialogsById, openedDialogIds }) => ({ hasOpenDialog: openedDialogIds ? openedDialogIds.length > 0 : Object.values(dialogsById).some((dialog) => dialog.isOpen) });
+/** Tag used for full-width system banners (e.g. connection status). Excluded from `NotificationList` by default. */
+var SYSTEM_NOTIFICATION_TAG = "system";
+var hasSystemNotificationTag = (notification) => notification.tags?.includes("system") ?? false;
+var getTargetTags = (targetPanels, inferredPanel, tags, modalManagerHasOpenDialog) => {
+	if (targetPanels) {
+		const effectiveTargetPanels = modalManagerHasOpenDialog && targetPanels.length > 0 ? [...targetPanels, "modal"] : targetPanels;
+		return Array.from(/* @__PURE__ */ new Set([...effectiveTargetPanels.map(getNotificationTargetTag), ...tags ?? []]));
+	}
+	if (modalManagerHasOpenDialog) return Array.from(/* @__PURE__ */ new Set([
+		...inferredPanel ? [getNotificationTargetTag(inferredPanel)] : [],
+		getNotificationTargetTag("modal"),
+		...tags ?? []
+	]));
+	return addNotificationTargetTag(inferredPanel, tags);
+};
+var getTypeFromIncident = ({ incident, severity, type }) => {
+	if (type) return type;
+	if (!incident) return void 0;
+	const status = incident.status ?? (severity === "error" ? "failed" : severity === "success" ? "success" : severity);
+	return [
+		incident.domain,
+		incident.entity,
+		incident.operation,
+		status
+	].filter((segment) => !!segment).join(":");
+};
+var useNotificationApi = () => {
+	const { client } = useChatContext();
+	const inferredPanel = useNotificationTarget();
+	const modalManagerHasOpenDialog = useStateStore(useModalDialogManager()?.state, modalDialogManagerStateSelector)?.hasOpenDialog ?? false;
+	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);
+		}, [client]),
+		startNotificationTimeout: useCallback((id) => {
+			client.notifications.startTimeout(id);
+		}, [client])
+	};
+};
+//#endregion
+export { SYSTEM_NOTIFICATION_TAG, hasSystemNotificationTag, useNotificationApi };
+
+//# sourceMappingURL=useNotificationApi.mjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,25 @@
+import { useChannelListContext } from "../../../context/ChannelListContext.mjs";
+import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
+import { useLegacyThreadContext } from "../../Thread/LegacyThreadContext.mjs";
+import { useThreadContext } from "../../Threads/ThreadContext.mjs";
+import { ChatViewContext } from "../../ChatView/ChatView.mjs";
+import { useContext } from "react";
+//#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";
+	if (channel) return "channel";
+	if (chatViewContext?.activeChatView === "threads") return "thread-list";
+	if (channels) return "channel-list";
+};
+//#endregion
+export { useNotificationTarget };
+
+//# sourceMappingURL=useNotificationTarget.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,39 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useNotificationConfigurationContext } from "../NotificationConfigurationContext.mjs";
+import { isNotificationForPanel } from "../notificationTarget.mjs";
+import { useCallback } from "react";
+//#region src/components/Notifications/hooks/useNotifications.ts
+/**
+* Subscribes to client.notifications.store and returns the list of notifications.
+* Optionally pass a filter so only notifications that match are returned (e.g. for a specific NotificationList).
+*/
+var useNotifications = (options) => {
+	const { client } = useChatContext();
+	const { displayFilter } = useNotificationConfigurationContext();
+	const { applyDisplayFilter, fallbackPanel, filter, panel } = options ?? {};
+	const selector = useCallback((state) => {
+		return { notifications: state.notifications.filter((notification) => {
+			if (panel && !isNotificationForPanel(notification, panel, { fallbackPanel })) return false;
+			if (applyDisplayFilter && !displayFilter({
+				fallbackPanel,
+				filter,
+				notification,
+				panel
+			})) return false;
+			return filter ? filter(notification) : true;
+		}) };
+	}, [
+		applyDisplayFilter,
+		displayFilter,
+		fallbackPanel,
+		filter,
+		panel
+	]);
+	const { notifications } = useStateStore(client.notifications.store, selector);
+	return notifications;
+};
+//#endregion
+export { useNotifications };
+
+//# sourceMappingURL=useNotifications.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNotifications.mjs","names":[],"sources":["../../../../../src/components/Notifications/hooks/useNotifications.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useChatContext } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport type { Notification, NotificationManagerState } from 'stream-chat';\nimport { useNotificationConfigurationContext } from '../NotificationConfigurationContext';\nimport { isNotificationForPanel } from '../notificationTarget';\n\nimport type { NotificationTargetPanel } from '../notificationTarget';\n\nexport type UseNotificationsFilter = (notification: Notification) => boolean;\n\nexport type UseNotificationsOptions = {\n  /**\n   * When true, the configured Chat-level notificationDisplayFilter is applied after\n   * panel routing and before the local filter.\n   */\n  applyDisplayFilter?: boolean;\n  /**\n   * When provided, only notifications that pass this filter are returned.\n   * Use to have a given NotificationList consume only a subset of client.notifications\n   * (e.g. by origin.emitter, origin.context, or metadata).\n   */\n  filter?: UseNotificationsFilter;\n  /**\n   * Panel target consumed by a specific notification list.\n   */\n  panel?: NotificationTargetPanel;\n  /**\n   * Fallback panel used when origin.context.panel is absent.\n   * Defaults to `channel`.\n   */\n  fallbackPanel?: NotificationTargetPanel;\n};\n\n/**\n * Subscribes to client.notifications.store and returns the list of notifications.\n * Optionally pass a filter so only notifications that match are returned (e.g. for a specific NotificationList).\n */\nexport const useNotifications = (options?: UseNotificationsOptions): Notification[] => {\n  const { client } = useChatContext();\n  const { displayFilter } = useNotificationConfigurationContext();\n  const { applyDisplayFilter, fallbackPanel, filter, panel } = options ?? {};\n  const selector = useCallback(\n    (state: NotificationManagerState) => {\n      const notifications = state.notifications;\n      return {\n        notifications: notifications.filter((notification) => {\n          if (\n            panel &&\n            !isNotificationForPanel(notification, panel, {\n              fallbackPanel,\n            })\n          ) {\n            return false;\n          }\n\n          if (\n            applyDisplayFilter &&\n            !displayFilter({\n              fallbackPanel,\n              filter,\n              notification,\n              panel,\n            })\n          ) {\n            return false;\n          }\n\n          return filter ? filter(notification) : true;\n        }),\n      };\n    },\n    [applyDisplayFilter, displayFilter, fallbackPanel, filter, panel],\n  );\n\n  const { notifications } = useStateStore(client.notifications.store, selector);\n\n  return notifications;\n};\n"],"mappings":";;;;;;;;;;AAsCA,IAAa,oBAAoB,YAAsD;CACrF,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,kBAAkB,oCAAoC;CAC9D,MAAM,EAAE,oBAAoB,eAAe,QAAQ,UAAU,WAAW,CAAC;CACzE,MAAM,WAAW,aACd,UAAoC;EAEnC,OAAO,EACL,eAFoB,MAAM,cAEG,QAAQ,iBAAiB;GACpD,IACE,SACA,CAAC,uBAAuB,cAAc,OAAO,EAC3C,cACF,CAAC,GAED,OAAO;GAGT,IACE,sBACA,CAAC,cAAc;IACb;IACA;IACA;IACA;GACF,CAAC,GAED,OAAO;GAGT,OAAO,SAAS,OAAO,YAAY,IAAI;EACzC,CAAC,EACH;CACF,GACA;EAAC;EAAoB;EAAe;EAAe;EAAQ;CAAK,CAClE;CAEA,MAAM,EAAE,kBAAkB,cAAc,OAAO,cAAc,OAAO,QAAQ;CAE5E,OAAO;AACT"}

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

@@ -0,0 +1,22 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { hasSystemNotificationTag } from "./useNotificationApi.mjs";
+import { useCallback } from "react";
+//#region src/components/Notifications/hooks/useSystemNotifications.ts
+/**
+* Subscribes to `client.notifications` and returns only **system** banner notifications
+* (same subset `NotificationList` excludes from toasts). Optional `filter` narrows further.
+*/
+var useSystemNotifications = (options) => {
+	const { client } = useChatContext();
+	const selector = useCallback((state) => {
+		const withSystemTag = state.notifications.filter(hasSystemNotificationTag);
+		return { notifications: options?.filter ? withSystemTag.filter(options.filter) : withSystemTag };
+	}, [options?.filter]);
+	const { notifications } = useStateStore(client.notifications.store, selector);
+	return notifications;
+};
+//#endregion
+export { useSystemNotifications };
+
+//# sourceMappingURL=useSystemNotifications.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSystemNotifications.mjs","names":[],"sources":["../../../../../src/components/Notifications/hooks/useSystemNotifications.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport type { Notification, NotificationManagerState } from 'stream-chat';\n\nimport { useChatContext } from '../../../context';\nimport { useStateStore } from '../../../store';\n\nimport { hasSystemNotificationTag } from './useNotificationApi';\n\nexport type UseSystemNotificationsFilter = (notification: Notification) => boolean;\n\nexport type UseSystemNotificationsOptions = {\n  /**\n   * Applied after the built-in filter that keeps only notifications tagged for the system banner.\n   */\n  filter?: UseSystemNotificationsFilter;\n};\n\n/**\n * Subscribes to `client.notifications` and returns only **system** banner notifications\n * (same subset `NotificationList` excludes from toasts). Optional `filter` narrows further.\n */\nexport const useSystemNotifications = (\n  options?: UseSystemNotificationsOptions,\n): Notification[] => {\n  const { client } = useChatContext();\n  const selector = useCallback(\n    (state: NotificationManagerState) => {\n      const withSystemTag = state.notifications.filter(hasSystemNotificationTag);\n      const notifications = options?.filter\n        ? withSystemTag.filter(options.filter)\n        : withSystemTag;\n\n      return { notifications };\n    },\n    [options?.filter],\n  );\n\n  const { notifications } = useStateStore(client.notifications.store, selector);\n\n  return notifications;\n};\n"],"mappings":";;;;;;;;;AAsBA,IAAa,0BACX,YACmB;CACnB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,WAAW,aACd,UAAoC;EACnC,MAAM,gBAAgB,MAAM,cAAc,OAAO,wBAAwB;EAKzE,OAAO,EAAE,eAJa,SAAS,SAC3B,cAAc,OAAO,QAAQ,MAAM,IACnC,cAEmB;CACzB,GACA,CAAC,SAAS,MAAM,CAClB;CAEA,MAAM,EAAE,kBAAkB,cAAc,OAAO,cAAc,OAAO,QAAQ;CAE5E,OAAO;AACT"}