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

package/dist/es/components/Modal/GlobalModal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalModal.mjs","names":[],"sources":["../../../../src/components/Modal/GlobalModal.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, {\n  type ComponentProps,\n  type ComponentType,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { FocusScope } from '@react-aria/focus';\n\nimport { AriaLiveOutlet } from '../Accessibility';\nimport { NotificationList as DefaultNotificationList } from '../Notifications';\nimport {\n  DialogManagerProvider,\n  ModalContextProvider,\n  modalDialogManagerId,\n  useChatContext,\n  useComponentContext,\n} from '../../context';\nimport {\n  DialogPortalEntry,\n  modalDialogId,\n  useModalDialog,\n  useModalDialogIsOpen,\n  useModalDialogIsTopmost,\n} from '../Dialog';\nimport { useResolvedModalAriaProps } from '../../a11y/hooks/useResolvedModalAriaProps';\nimport { useStableId } from '../UtilityComponents/useStableId';\n\nexport type ModalCloseEvent =\n  | KeyboardEvent\n  | React.KeyboardEvent\n  | React.MouseEvent<HTMLButtonElement | HTMLDivElement>;\n\nexport type ModalCloseSource = 'overlay' | 'button' | 'escape';\nexport type ModalInitialFocusStrategy = 'dialog' | 'firstElement';\n\nexport type ModalProps = {\n  /** If true, modal is opened or visible. */\n  open: boolean;\n  /** Custom class to be applied to the modal root div */\n  className?: string;\n  /** Optional stable id for this modal instance. Generated automatically when omitted. */\n  dialogId?: string;\n  /** Properties forwarded to the root div within which the dialog content is rendered */\n  dialogRootProps?: Omit<\n    ComponentProps<'div'>,\n    'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'role'\n  >;\n  /** Accessible label for the modal dialog. Ignored when aria-labelledby is provided. */\n  'aria-label'?: string;\n  /** ID of the element that labels the modal dialog. */\n  'aria-labelledby'?: string;\n  /** ID of the element that describes the modal dialog. */\n  'aria-describedby'?: string;\n  /** ARIA role for the modal dialog surface. */\n  role?: 'alertdialog' | 'dialog';\n  /** Controls whether the dialog surface or the first focusable descendant receives initial focus. */\n  initialFocusStrategy?: ModalInitialFocusStrategy;\n  /** Resolves a custom initial focus element. When provided, it overrides `initialFocusStrategy` and falls back to the dialog surface when no element is returned. */\n  getInitialFocusElement?: (dialogElement: HTMLDivElement) => HTMLElement | null;\n  /** If provided, the close button is rendered on overlay */\n  CloseButtonOnOverlay?: ComponentType<ComponentProps<'button'>>;\n  /** Callback handler for closing of modal. */\n  onClose?: (event: ModalCloseEvent) => void;\n  /** Optional handler to intercept closing logic. Return false to prevent onClose. */\n  onCloseAttempt?: (source: ModalCloseSource, event: ModalCloseEvent) => boolean;\n};\n\nexport const GlobalModal = ({\n  'aria-describedby': ariaDescribedby,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  children,\n  className,\n  CloseButtonOnOverlay,\n  dialogId,\n  dialogRootProps,\n  getInitialFocusElement,\n  initialFocusStrategy,\n  onClose,\n  onCloseAttempt,\n  open,\n  role = 'dialog',\n}: PropsWithChildren<ModalProps>) => {\n  const generatedDialogId = useStableId();\n  const resolvedDialogId = dialogId ?? `${modalDialogId}-${generatedDialogId}`;\n  const dialog = useModalDialog(resolvedDialogId);\n  const isOpen = useModalDialogIsOpen(resolvedDialogId);\n  const isTopmost = useModalDialogIsTopmost(resolvedDialogId);\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const dialogRef = useRef<HTMLDivElement | null>(null);\n  const closeButtonRef = useRef<HTMLButtonElement | null>(null);\n  const closingRef = useRef(false);\n  const { theme } = useChatContext();\n  const { NotificationList = DefaultNotificationList } = useComponentContext();\n  const {\n    className: dialogRootClassName,\n    onKeyDown: dialogRootOnKeyDown,\n    ...dialogRootPropsRest\n  } = dialogRootProps ?? {};\n  // Base for label/description ids must be unique per modal. `resolvedDialogId` already carries a\n  // per-instance suffix; the shared `modalDialogId` fallback would collide across stacked modals.\n  const dialogLabelingBaseId = resolvedDialogId;\n  const resolvedInitialFocusStrategy: ModalInitialFocusStrategy =\n    initialFocusStrategy ?? 'firstElement';\n  const resolvedModalAriaProps = useResolvedModalAriaProps({\n    ariaDescribedby,\n    ariaLabel,\n    ariaLabelledby,\n    dialogId: dialogLabelingBaseId,\n  });\n\n  const maybeClose = useCallback(\n    (source: ModalCloseSource, event: ModalCloseEvent) => {\n      const allow = onCloseAttempt?.(source, event);\n      if (allow !== false) {\n        dialog.close();\n        closingRef.current = true;\n        onClose?.(event);\n      }\n    },\n    [dialog, onClose, onCloseAttempt],\n  );\n\n  const modalContextValue = useMemo<{ close: () => void; dialogId?: string }>(\n    () => ({\n      close: () => maybeClose('button', {} as ModalCloseEvent),\n      dialogId: dialogLabelingBaseId,\n    }),\n    [dialogLabelingBaseId, maybeClose],\n  );\n\n  const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!isTopmost) return;\n    const target = event.target as HTMLDivElement;\n    if (overlayRef.current === target) {\n      maybeClose('overlay', event);\n    }\n  };\n\n  const handleCloseButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    if (!isTopmost) return;\n    maybeClose('button', event);\n  };\n\n  const handleDialogKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    dialogRootOnKeyDown?.(event);\n    if (event.defaultPrevented || !isTopmost) return;\n\n    if (event.key === 'Escape') {\n      maybeClose('escape', event);\n      return;\n    }\n\n    // Initial focus lands on the dialog surface so the screen reader announces the dialog\n    // identity/description (a child field's focus would supersede that). Enter on the surface then\n    // steps the user into the dialog's declared default field (`[data-autofocus]`), so they can\n    // start interacting without hunting for it. `event.target === dialogRef.current` ensures we\n    // only react to Enter on the surface itself, never one bubbling up from a control inside.\n    if (event.key === 'Enter' && event.target === dialogRef.current) {\n      const target = dialogRef.current?.querySelector<HTMLElement>('[data-autofocus]');\n      if (target) {\n        event.preventDefault();\n        target.focus();\n      }\n    }\n  };\n\n  // Sync open prop to dialog state.\n  // closingRef blocks re-open when we just closed and parent hasn't set open=false yet.\n  useEffect(() => {\n    if (!open) {\n      closingRef.current = false;\n      if (isOpen) {\n        dialog.close();\n      }\n      return;\n    }\n    if (open && !isOpen && !closingRef.current) {\n      dialog.open();\n    }\n  }, [dialog, isOpen, open]);\n\n  useEffect(() => {\n    if (\n      !open ||\n      !isOpen ||\n      // Only the topmost modal may take initial focus; a non-topmost (inert) stacked modal must not\n      // pull focus behind the active one (mirrors the FocusScope/AriaLiveOutlet topmost gating).\n      !isTopmost ||\n      (!getInitialFocusElement && resolvedInitialFocusStrategy === 'firstElement')\n    )\n      return;\n\n    const frame = requestAnimationFrame(() => {\n      const dialogElement = dialogRef.current;\n      if (!dialogElement) return;\n\n      const target = getInitialFocusElement?.(dialogElement) ?? dialogElement;\n\n      target.focus();\n    });\n\n    return () => cancelAnimationFrame(frame);\n  }, [getInitialFocusElement, isOpen, isTopmost, open, resolvedInitialFocusStrategy]);\n\n  if (!open || !isOpen) return null;\n\n  return (\n    <DialogPortalEntry dialogId={resolvedDialogId} dialogManagerId={modalDialogManagerId}>\n      <ModalContextProvider value={modalContextValue}>\n        <div\n          className={clsx(\n            'str-chat',\n            theme,\n            'str-chat__modal str-chat-react__modal str-chat__modal--open',\n            className,\n          )}\n          onClick={handleOverlayClick}\n          ref={overlayRef}\n        >\n          <FocusScope\n            autoFocus={\n              isTopmost &&\n              !getInitialFocusElement &&\n              resolvedInitialFocusStrategy === 'firstElement'\n            }\n            contain={isTopmost}\n            restoreFocus\n          >\n            <div\n              {...dialogRootPropsRest}\n              aria-describedby={resolvedModalAriaProps['aria-describedby']}\n              aria-label={resolvedModalAriaProps['aria-label']}\n              aria-labelledby={resolvedModalAriaProps['aria-labelledby']}\n              aria-modal={isTopmost ? 'true' : undefined}\n              className={clsx('str-chat__modal__dialog', dialogRootClassName)}\n              inert={isTopmost ? undefined : true}\n              onKeyDown={handleDialogKeyDown}\n              ref={dialogRef}\n              role={role}\n              tabIndex={isTopmost ? 0 : -1}\n            >\n              <DialogManagerProvider\n                id={`${resolvedDialogId}-floating-dialog-manager`}\n                portalDestinationProps={{\n                  captureOutsideClicks: true,\n                  className: 'str-chat__modal__floating-dialog-overlay',\n                }}\n              >\n                {children}\n                {/* Render the live-region outlet inside the active modal subtree\n                  (only the topmost dialog carries `aria-modal`) so announcements\n                  are not suppressed by assistive technologies. */}\n                {isTopmost && <AriaLiveOutlet layer={1} />}\n              </DialogManagerProvider>\n            </div>\n          </FocusScope>\n          <NotificationList\n            className='str-chat__modal__notification-list'\n            panel='modal'\n            verticalAlignment='top'\n          />\n          {CloseButtonOnOverlay && (\n            <CloseButtonOnOverlay onClick={handleCloseButtonClick} ref={closeButtonRef} />\n          )}\n        </div>\n      </ModalContextProvider>\n    </DialogPortalEntry>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,92 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useNotificationApi } from "./hooks/useNotificationApi.mjs";
+import { Button } from "../Button/Button.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { forwardRef } from "react";
+import "stream-chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Notifications/Notification.tsx
+var DefaultNotificationIcon = ({ notification }) => {
+	const { IconCheckmark, IconExclamationMark, IconExclamationTriangleFill, IconRefresh } = useComponentContextIcons();
+	const IconsBySeverity = {
+		error: IconExclamationMark,
+		info: null,
+		loading: IconRefresh,
+		success: IconCheckmark,
+		warning: IconExclamationTriangleFill
+	};
+	if (!notification.severity) return null;
+	const Icon = IconsBySeverity[notification.severity] ?? null;
+	return Icon && /* @__PURE__ */ jsx("div", {
+		className: "str-chat__notification-icon",
+		children: /* @__PURE__ */ jsx(Icon, {})
+	});
+};
+var Notification = forwardRef(({ className, entryDirection, Icon = DefaultNotificationIcon, notification, onDismiss, showClose = false, transitionState }, ref) => {
+	const { removeNotification } = useNotificationApi();
+	const { t } = useTranslationContext();
+	const { IconXmark } = useComponentContextIcons();
+	const displayMessage = t("translationBuilderTopic.notification", {
+		notification,
+		value: notification.message
+	});
+	const handleDismiss = () => {
+		if (onDismiss) {
+			onDismiss();
+			return;
+		}
+		removeNotification(notification.id);
+	};
+	const isPersistent = !notification.duration;
+	const severity = notification.severity;
+	const ariaLiveOverride = notification.metadata?.ariaLive;
+	const livePriority = ariaLiveOverride === "assertive" || ariaLiveOverride === "polite" ? ariaLiveOverride : severity === "error" ? "assertive" : "polite";
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__notification", entryDirection && `str-chat__notification--enter-from-${entryDirection}`, transitionState === "enter" && "str-chat__notification--is-entering", transitionState === "exit" && "str-chat__notification--is-exiting", severity && `str-chat__notification--${severity}`, severity === "loading" && "str-chat__notification--loading", className),
+		"data-testid": "notification",
+		ref,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__notification-content",
+				children: [Icon && /* @__PURE__ */ jsx(Icon, { notification }), /* @__PURE__ */ jsx("div", {
+					"aria-atomic": "true",
+					"aria-live": livePriority,
+					className: "str-chat__notification-message",
+					role: livePriority === "assertive" ? "alert" : "status",
+					children: displayMessage
+				})]
+			}),
+			notification.actions && notification.actions.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "str-chat__notification-actions",
+				children: notification.actions.map((action, index) => /* @__PURE__ */ jsx(Button, {
+					appearance: "outline",
+					className: "str-chat__notification-action",
+					inverseTheme: true,
+					onClick: () => {
+						action.handler();
+					},
+					size: "sm",
+					variant: "secondary",
+					children: action.label
+				}, index))
+			}),
+			(showClose || isPersistent) && /* @__PURE__ */ jsx(Button, {
+				appearance: "ghost",
+				"aria-label": t("notification.dismissNotification.ariaLabel", "Dismiss notification"),
+				circular: true,
+				className: "str-chat__notification-close-button",
+				inverseTheme: true,
+				onClick: handleDismiss,
+				size: "sm",
+				variant: "secondary",
+				children: /* @__PURE__ */ jsx(IconXmark, {})
+			})
+		]
+	});
+});
+Notification.displayName = "Notification";
+//#endregion
+export { Notification };
+
+//# sourceMappingURL=Notification.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.mjs","names":[],"sources":["../../../../src/components/Notifications/Notification.tsx"],"sourcesContent":["import React, { type ComponentType, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { NotificationSeverity } from 'stream-chat';\nimport { type Notification as NotificationType } from 'stream-chat';\n\nimport { useComponentContextIcons } from '../../context';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { Button } from '../Button';\nimport { useNotificationApi } from './hooks/useNotificationApi';\n\ntype NotificationEntryDirection = 'bottom' | 'left' | 'right' | 'top';\ntype NotificationTransitionState = 'enter' | 'exit';\n\nexport type NotificationIconProps = {\n  notification: NotificationType;\n};\n\nconst DefaultNotificationIcon = ({ notification }: NotificationIconProps) => {\n  const { IconCheckmark, IconExclamationMark, IconExclamationTriangleFill, IconRefresh } =\n    useComponentContextIcons();\n\n  const IconsBySeverity: Record<NotificationSeverity, ComponentType | null> = {\n    error: IconExclamationMark,\n    info: null,\n    loading: IconRefresh,\n    success: IconCheckmark,\n    warning: IconExclamationTriangleFill,\n  };\n\n  if (!notification.severity) return null;\n\n  const Icon = IconsBySeverity[notification.severity] ?? null;\n  return (\n    Icon && (\n      <div className='str-chat__notification-icon'>\n        <Icon />\n      </div>\n    )\n  );\n};\n\nexport type NotificationProps = {\n  /** Notification from client.notifications state */\n  notification: NotificationType;\n  /** Optional class name */\n  className?: string;\n  /** Direction from which the notification enters. */\n  entryDirection?: NotificationEntryDirection;\n  /** Optional custom icon component. */\n  Icon?: React.ComponentType<NotificationIconProps>;\n  /** Optional dismiss handler */\n  onDismiss?: () => void;\n  /** Show close button (for persistent notifications) */\n  showClose?: boolean;\n  /** Optional transition state applied by NotificationList. */\n  transitionState?: NotificationTransitionState;\n};\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n  (\n    {\n      className,\n      entryDirection,\n      Icon = DefaultNotificationIcon,\n      notification,\n      onDismiss,\n      showClose = false,\n      transitionState,\n    }: NotificationProps,\n    ref,\n  ) => {\n    const { removeNotification } = useNotificationApi();\n    const { t } = useTranslationContext();\n    const { IconXmark } = useComponentContextIcons();\n\n    const displayMessage = t('translationBuilderTopic.notification', {\n      notification,\n      value: notification.message,\n    });\n\n    const handleDismiss = () => {\n      if (onDismiss) {\n        onDismiss();\n        return;\n      }\n\n      removeNotification(notification.id);\n    };\n\n    const isPersistent = !notification.duration;\n\n    const severity = notification.severity;\n    // Priority defaults from severity (errors interrupt; everything else is polite), but a\n    // notification may explicitly opt into a different aria-live priority via\n    // `metadata.ariaLive` — e.g. a success confirmation that should be heard promptly rather than\n    // queued behind a focus-change announcement (see `addNotification`'s `ariaLive` option).\n    const ariaLiveOverride = notification.metadata?.ariaLive;\n    const livePriority: 'assertive' | 'polite' =\n      ariaLiveOverride === 'assertive' || ariaLiveOverride === 'polite'\n        ? ariaLiveOverride\n        : severity === 'error'\n          ? 'assertive'\n          : 'polite';\n\n    return (\n      <div\n        className={clsx(\n          'str-chat__notification',\n          entryDirection && `str-chat__notification--enter-from-${entryDirection}`,\n          transitionState === 'enter' && 'str-chat__notification--is-entering',\n          transitionState === 'exit' && 'str-chat__notification--is-exiting',\n          severity && `str-chat__notification--${severity}`,\n          severity === 'loading' && 'str-chat__notification--loading',\n          className,\n        )}\n        data-testid='notification'\n        ref={ref}\n      >\n        <div className='str-chat__notification-content'>\n          {Icon && <Icon notification={notification} />}\n          <div\n            aria-atomic='true'\n            aria-live={livePriority}\n            className='str-chat__notification-message'\n            role={livePriority === 'assertive' ? 'alert' : 'status'}\n          >\n            {displayMessage}\n          </div>\n        </div>\n        {notification.actions && notification.actions.length > 0 && (\n          <div className='str-chat__notification-actions'>\n            {notification.actions.map((action, index) => (\n              <Button\n                appearance='outline'\n                className='str-chat__notification-action'\n                inverseTheme\n                key={index}\n                onClick={() => {\n                  action.handler();\n                }}\n                size='sm'\n                variant='secondary'\n              >\n                {action.label}\n              </Button>\n            ))}\n          </div>\n        )}\n        {(showClose || isPersistent) && (\n          <Button\n            appearance='ghost'\n            aria-label={t(\n              'notification.dismissNotification.ariaLabel',\n              'Dismiss notification',\n            )}\n            circular\n            className='str-chat__notification-close-button'\n            inverseTheme\n            onClick={handleDismiss}\n            size='sm'\n            variant='secondary'\n          >\n            <IconXmark />\n          </Button>\n        )}\n      </div>\n    );\n  },\n);\n\nNotification.displayName = 'Notification';\n"],"mappings":";;;;;;;;;AAiBA,IAAM,2BAA2B,EAAE,mBAA0C;CAC3E,MAAM,EAAE,eAAe,qBAAqB,6BAA6B,gBACvE,yBAAyB;CAE3B,MAAM,kBAAsE;EAC1E,OAAO;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,SAAS;CACX;CAEA,IAAI,CAAC,aAAa,UAAU,OAAO;CAEnC,MAAM,OAAO,gBAAgB,aAAa,aAAa;CACvD,OACE,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,MAAD,CAAO,CAAA;CACJ,CAAA;AAGX;AAmBA,IAAa,eAAe,YAExB,EACE,WACA,gBACA,OAAO,yBACP,cACA,WACA,YAAY,OACZ,mBAEF,QACG;CACH,MAAM,EAAE,uBAAuB,mBAAmB;CAClD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,cAAc,yBAAyB;CAE/C,MAAM,iBAAiB,EAAE,wCAAwC;EAC/D;EACA,OAAO,aAAa;CACtB,CAAC;CAED,MAAM,sBAAsB;EAC1B,IAAI,WAAW;GACb,UAAU;GACV;EACF;EAEA,mBAAmB,aAAa,EAAE;CACpC;CAEA,MAAM,eAAe,CAAC,aAAa;CAEnC,MAAM,WAAW,aAAa;CAK9B,MAAM,mBAAmB,aAAa,UAAU;CAChD,MAAM,eACJ,qBAAqB,eAAe,qBAAqB,WACrD,mBACA,aAAa,UACX,cACA;CAER,OACE,qBAAC,OAAD;EACE,WAAW,KACT,0BACA,kBAAkB,sCAAsC,kBACxD,oBAAoB,WAAW,uCAC/B,oBAAoB,UAAU,sCAC9B,YAAY,2BAA2B,YACvC,aAAa,aAAa,mCAC1B,SACF;EACA,eAAY;EACP;YAXP;GAaE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,QAAQ,oBAAC,MAAD,EAAoB,aAAe,CAAA,GAC5C,oBAAC,OAAD;KACE,eAAY;KACZ,aAAW;KACX,WAAU;KACV,MAAM,iBAAiB,cAAc,UAAU;eAE9C;IACE,CAAA,CACF;;GACJ,aAAa,WAAW,aAAa,QAAQ,SAAS,KACrD,oBAAC,OAAD;IAAK,WAAU;cACZ,aAAa,QAAQ,KAAK,QAAQ,UACjC,oBAAC,QAAD;KACE,YAAW;KACX,WAAU;KACV,cAAA;KAEA,eAAe;MACb,OAAO,QAAQ;KACjB;KACA,MAAK;KACL,SAAQ;eAEP,OAAO;IACF,GARD,KAQC,CACT;GACE,CAAA;IAEL,aAAa,iBACb,oBAAC,QAAD;IACE,YAAW;IACX,cAAY,EACV,8CACA,sBACF;IACA,UAAA;IACA,WAAU;IACV,cAAA;IACA,SAAS;IACT,MAAK;IACL,SAAQ;cAER,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA;EAEP;;AAET,CACF;AAEA,aAAa,cAAc"}

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

@@ -0,0 +1,19 @@
+import React, { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Notifications/NotificationConfigurationContext.tsx
+var defaultNotificationDisplayFilter = () => true;
+var defaultNotificationConfigurationContextValue = { displayFilter: defaultNotificationDisplayFilter };
+var NotificationConfigurationContext = React.createContext(defaultNotificationConfigurationContextValue);
+var NotificationConfigurationProvider = ({ children, displayFilter }) => {
+	const parentConfiguration = useContext(NotificationConfigurationContext);
+	const value = useMemo(() => ({ displayFilter: displayFilter ?? parentConfiguration.displayFilter }), [displayFilter, parentConfiguration.displayFilter]);
+	return /* @__PURE__ */ jsx(NotificationConfigurationContext.Provider, {
+		value,
+		children
+	});
+};
+var useNotificationConfigurationContext = () => useContext(NotificationConfigurationContext);
+//#endregion
+export { NotificationConfigurationProvider, useNotificationConfigurationContext };
+
+//# sourceMappingURL=NotificationConfigurationContext.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationConfigurationContext.mjs","names":[],"sources":["../../../../src/components/Notifications/NotificationConfigurationContext.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react';\n\nimport type { Notification } from 'stream-chat';\nimport type { PropsWithChildrenOnly } from '../../types/types';\nimport type { NotificationTargetPanel } from './notificationTarget';\nimport type { NotificationListFilter } from './NotificationList';\n\nexport type NotificationDisplayFilterParams = {\n  /** Fallback panel used by the receiving NotificationList when a notification has no explicit target. */\n  fallbackPanel?: NotificationTargetPanel;\n  /** Local NotificationList filter. Runs only after the display filter accepts the notification. */\n  filter?: NotificationListFilter;\n  /** Notification being evaluated after panel/fallback routing matched it to this list. */\n  notification: Notification;\n  /** Panel of the NotificationList currently evaluating the notification. */\n  panel?: NotificationTargetPanel;\n};\n\nexport type NotificationDisplayFilter = (\n  params: NotificationDisplayFilterParams,\n) => boolean;\n\nexport type NotificationConfigurationContextValue = {\n  displayFilter: NotificationDisplayFilter;\n};\n\nconst defaultNotificationDisplayFilter: NotificationDisplayFilter = () => true;\n\nconst defaultNotificationConfigurationContextValue: NotificationConfigurationContextValue =\n  {\n    displayFilter: defaultNotificationDisplayFilter,\n  };\n\nconst NotificationConfigurationContext =\n  React.createContext<NotificationConfigurationContextValue>(\n    defaultNotificationConfigurationContextValue,\n  );\n\nexport type NotificationConfigurationProviderProps = PropsWithChildrenOnly & {\n  displayFilter?: NotificationDisplayFilter;\n};\n\nexport const NotificationConfigurationProvider = ({\n  children,\n  displayFilter,\n}: NotificationConfigurationProviderProps) => {\n  const parentConfiguration = useContext(NotificationConfigurationContext);\n  const value = useMemo<NotificationConfigurationContextValue>(\n    () => ({\n      displayFilter: displayFilter ?? parentConfiguration.displayFilter,\n    }),\n    [displayFilter, parentConfiguration.displayFilter],\n  );\n\n  return (\n    <NotificationConfigurationContext.Provider value={value}>\n      {children}\n    </NotificationConfigurationContext.Provider>\n  );\n};\n\nexport const useNotificationConfigurationContext = () =>\n  useContext(NotificationConfigurationContext);\n"],"mappings":";;;AA0BA,IAAM,yCAAoE;AAE1E,IAAM,+CACJ,EACE,eAAe,iCACjB;AAEF,IAAM,mCACJ,MAAM,cACJ,4CACF;AAMF,IAAa,qCAAqC,EAChD,UACA,oBAC4C;CAC5C,MAAM,sBAAsB,WAAW,gCAAgC;CACvE,MAAM,QAAQ,eACL,EACL,eAAe,iBAAiB,oBAAoB,cACtD,IACA,CAAC,eAAe,oBAAoB,aAAa,CACnD;CAEA,OACE,oBAAC,iCAAiC,UAAlC;EAAkD;EAC/C;CACwC,CAAA;AAE/C;AAEA,IAAa,4CACX,WAAW,gCAAgC"}

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

@@ -0,0 +1,300 @@
+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 { ensureNotificationTimeout, removeNotification } = 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 [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) => {
+		removeNotification(id);
+	}, [removeNotification]);
+	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) 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 = () => {
+			ensureNotificationTimeout(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();
+		};
+	}, [
+		ensureNotificationTimeout,
+		notification,
+		transitionState
+	]);
+	if (!notification) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-label": t("notification.list.notifications.ariaLabel", "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 { 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":"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"}

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

@@ -0,0 +1,114 @@
+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";
+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;
+	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,
+		addSystemNotification,
+		ensureNotificationTimeout: useCallback((id) => {
+			client.notifications.ensureTimeout(id);
+		}, [client]),
+		removeNotification,
+		startNotificationTimeout
+	};
+};
+//#endregion
+export { SYSTEM_NOTIFICATION_TAG, hasSystemNotificationTag, useNotificationApi };
+
+//# sourceMappingURL=useNotificationApi.mjs.map