stream-chat-react 14.11.0 → 14.12.0

package/dist/es/components/MessageList/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../src/components/MessageList/utils.ts"],"sourcesContent":["import { nanoid } from 'nanoid';\n\nimport { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';\nimport { isMessageEdited } from '../Message/utils';\nimport { isDate } from '../../i18n';\n\nimport type { LocalMessage, MessageLabel } from 'stream-chat';\n\ntype IntroMessage = {\n  customType: typeof CUSTOM_MESSAGE_TYPE.intro;\n  id: string;\n};\n\ntype DateSeparatorMessage = {\n  customType: typeof CUSTOM_MESSAGE_TYPE.date;\n  date: Date;\n  id: string;\n  type: MessageLabel;\n  unread: boolean;\n};\n\nexport type RenderedMessage = LocalMessage | DateSeparatorMessage | IntroMessage;\n\ntype ProcessMessagesContext = {\n  /** the connected user ID */\n  userId: string;\n  /** Enable date separator */\n  enableDateSeparator?: boolean;\n  /** Enable deleted messages to be filtered out of resulting message list */\n  hideDeletedMessages?: boolean;\n  /** Disable date separator display for unread incoming messages */\n  hideNewMessageSeparator?: boolean;\n  /** Sets the threshold after everything is considered unread */\n  lastRead?: Date | null;\n};\n\nexport type ProcessMessagesParams = ProcessMessagesContext & {\n  messages: LocalMessage[];\n  reviewProcessedMessage?: (params: {\n    /** array of messages representing the changes applied around a given processed message */\n    changes: RenderedMessage[];\n    /** configuration params and information forwarded from `processMessages` */\n    context: ProcessMessagesContext;\n    /** index of the processed message in the original messages array */\n    index: number;\n    /** array of messages retrieved from the back-end */\n    messages: LocalMessage[];\n    /** newly built array of messages to be later rendered */\n    processedMessages: RenderedMessage[];\n  }) => LocalMessage[];\n  /** Signals whether to separate giphy preview as well as used to set the giphy preview state */\n  setGiphyPreviewMessage?: React.Dispatch<React.SetStateAction<LocalMessage | undefined>>;\n};\n\n/**\n * processMessages - Transform the input message list according to config parameters\n *\n * Inserts date separators btw. messages created on different dates or before unread incoming messages. By default:\n * - enabled in main message list\n * - disabled in virtualized message list\n * - disabled in thread\n *\n * Allows to filter out deleted messages, contolled by hideDeletedMessages param. This is disabled by default.\n *\n * Sets Giphy preview message for VirtualizedMessageList\n *\n * The only required params are messages and userId, the rest are config params:\n *\n * @return {LocalMessage[]} Transformed list of messages\n */\nexport const processMessages = (params: ProcessMessagesParams) => {\n  const { messages, reviewProcessedMessage, setGiphyPreviewMessage, ...context } = params;\n  const {\n    enableDateSeparator,\n    hideDeletedMessages,\n    hideNewMessageSeparator,\n    lastRead,\n    userId,\n  } = context;\n\n  let unread = false;\n  let ephemeralMessagePresent = false;\n  let lastDateSeparator;\n  const newMessages: RenderedMessage[] = [];\n\n  for (let i = 0; i < messages.length; i += 1) {\n    const message = messages[i];\n\n    if (hideDeletedMessages && message.type === 'deleted') {\n      continue;\n    }\n\n    if (\n      setGiphyPreviewMessage &&\n      message.type === 'ephemeral' &&\n      message.command === 'giphy'\n    ) {\n      ephemeralMessagePresent = true;\n      setGiphyPreviewMessage(message);\n      continue;\n    }\n\n    const changes: RenderedMessage[] = [];\n    const messageDate =\n      (message.created_at &&\n        isDate(message.created_at) &&\n        message.created_at.toDateString()) ||\n      '';\n    const previousMessage = messages[i - 1];\n    let prevMessageDate = messageDate;\n\n    if (\n      enableDateSeparator &&\n      previousMessage?.created_at &&\n      isDate(previousMessage.created_at)\n    ) {\n      prevMessageDate = previousMessage.created_at.toDateString();\n    }\n\n    if (!unread && !hideNewMessageSeparator) {\n      unread =\n        (lastRead && message.created_at && new Date(lastRead) < message.created_at) ||\n        false;\n\n      // do not show date separator for current user's messages\n      if (enableDateSeparator && unread && message.user?.id !== userId) {\n        changes.push({\n          customType: CUSTOM_MESSAGE_TYPE.date,\n          date: message.created_at,\n          id: makeDateMessageId(message.created_at),\n          unread,\n        } as DateSeparatorMessage);\n      }\n    }\n\n    if (\n      enableDateSeparator &&\n      (i === 0 || // always put date separator before the first message\n        messageDate !== prevMessageDate || // add date separator btw. 2 messages created on different date\n        // if hiding deleted messages replace the previous deleted message(s) with A separator if the last rendered message was created on different date\n        (hideDeletedMessages &&\n          previousMessage?.type === 'deleted' &&\n          lastDateSeparator !== messageDate)) &&\n      !isDateSeparatorMessage(changes[changes.length - 1]) // do not show two date separators in a row)\n    ) {\n      lastDateSeparator = messageDate;\n\n      changes.push(\n        {\n          customType: CUSTOM_MESSAGE_TYPE.date,\n          date: message.created_at,\n          id: makeDateMessageId(message.created_at),\n        } as DateSeparatorMessage,\n        message,\n      );\n    } else {\n      changes.push(message);\n    }\n\n    newMessages.push(\n      ...(reviewProcessedMessage?.({\n        changes,\n        context,\n        index: i,\n        messages,\n        processedMessages: newMessages,\n      }) || changes),\n    );\n  }\n\n  // clean up the giphy preview component state after a Cancel action\n  if (setGiphyPreviewMessage && !ephemeralMessagePresent) {\n    setGiphyPreviewMessage(undefined);\n  }\n\n  return newMessages;\n};\n\nexport const makeIntroMessage = (): IntroMessage => ({\n  customType: CUSTOM_MESSAGE_TYPE.intro,\n  id: nanoid(),\n});\n\nexport const makeDateMessageId = (date?: string | Date) => {\n  let idSuffix;\n  try {\n    idSuffix = !date ? nanoid() : date instanceof Date ? date.toISOString() : date;\n  } catch (e) {\n    idSuffix = nanoid();\n  }\n  return `${CUSTOM_MESSAGE_TYPE.date}-${idSuffix}`;\n};\n\n// fast since it usually iterates just the last few messages\nexport const getLastReceived = (messages: RenderedMessage[]) => {\n  for (let i = messages.length - 1; i > 0; i -= 1) {\n    if ((messages[i] as LocalMessage).status === 'received') {\n      return messages[i].id;\n    }\n  }\n\n  return null;\n};\n\nexport const insertIntro = (messages: RenderedMessage[], headerPosition?: number) => {\n  const newMessages = messages;\n  const intro = makeIntroMessage();\n\n  // if no headerPosition is set, HeaderComponent will go at the top\n  if (!headerPosition) {\n    newMessages.unshift(intro);\n    return newMessages;\n  }\n\n  // if no messages, intro gets inserted\n  if (!newMessages.length) {\n    newMessages.unshift(intro);\n    return newMessages;\n  }\n\n  // else loop over the messages\n  for (let i = 0; i < messages.length; i += 1) {\n    const messageTime = isDate((messages[i] as LocalMessage).created_at)\n      ? (messages[i] as LocalMessage).created_at.getTime()\n      : null;\n\n    const nextMessageTime = isDate((messages[i + 1] as LocalMessage).created_at)\n      ? (messages[i + 1] as LocalMessage).created_at.getTime()\n      : null;\n\n    // header position is smaller than message time so comes after;\n    if (messageTime && messageTime < headerPosition) {\n      // if header position is also smaller than message time continue;\n      if (nextMessageTime && nextMessageTime < headerPosition) {\n        if (messages[i + 1] && isDateSeparatorMessage(messages[i + 1])) continue;\n        if (!nextMessageTime) {\n          newMessages.push(intro);\n          return newMessages;\n        }\n      } else {\n        newMessages.splice(i + 1, 0, intro);\n        return newMessages;\n      }\n    }\n  }\n\n  return newMessages;\n};\n\nexport type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';\n\n// Allocation-free, early-exiting emptiness check. Avoids the throwaway array\n// that `Object.keys(obj).length > 0` allocates per message inside getGroupStyles.\nconst isNonEmptyRecord = (record: Record<string, unknown>) => {\n  for (const key in record) {\n    if (Object.prototype.hasOwnProperty.call(record, key)) return true;\n  }\n  return false;\n};\n\nexport const getGroupStyles = (\n  message: RenderedMessage,\n  previousMessage: RenderedMessage,\n  nextMessage: RenderedMessage,\n  noGroupByUser: boolean,\n  maxTimeBetweenGroupedMessages?: number,\n): GroupStyle => {\n  if (isDateSeparatorMessage(message) || isIntroMessage(message)) return '';\n\n  if (noGroupByUser || message.attachments?.length !== 0) return 'single';\n\n  const isTopMessage =\n    !previousMessage ||\n    isIntroMessage(previousMessage) ||\n    isDateSeparatorMessage(previousMessage) ||\n    previousMessage.type === 'system' ||\n    previousMessage.type === 'error' ||\n    previousMessage.attachments?.length !== 0 ||\n    message.user?.id !== previousMessage.user?.id ||\n    (message.reaction_groups && isNonEmptyRecord(message.reaction_groups)) ||\n    isMessageEdited(previousMessage) ||\n    (maxTimeBetweenGroupedMessages !== undefined &&\n      previousMessage.created_at &&\n      message.created_at &&\n      new Date(message.created_at).getTime() -\n        new Date(previousMessage.created_at).getTime() >\n        maxTimeBetweenGroupedMessages);\n\n  const isBottomMessage =\n    !nextMessage ||\n    isIntroMessage(nextMessage) ||\n    isDateSeparatorMessage(nextMessage) ||\n    nextMessage.type === 'system' ||\n    nextMessage.type === 'error' ||\n    nextMessage.attachments?.length !== 0 ||\n    message.user?.id !== nextMessage.user?.id ||\n    (nextMessage.reaction_groups && isNonEmptyRecord(nextMessage.reaction_groups)) ||\n    isMessageEdited(message) ||\n    (maxTimeBetweenGroupedMessages !== undefined &&\n      nextMessage.created_at &&\n      message.created_at &&\n      new Date(nextMessage.created_at).getTime() -\n        new Date(message.created_at).getTime() >\n        maxTimeBetweenGroupedMessages);\n\n  if (!isTopMessage && !isBottomMessage) {\n    if (message.type === 'error') return 'single';\n    return 'middle';\n  }\n\n  if (isBottomMessage) {\n    if (isTopMessage || message.type === 'error') return 'single';\n    return 'bottom';\n  }\n\n  if (isTopMessage) return 'top';\n\n  return '';\n};\n\n// \"Probably\" included, because it may happen that the last page was returned and it has exactly the size of the limit\n// but the back-end cannot provide us with information on whether it has still more messages in the DB\n// FIXME: once the pagination state is moved from Channel to MessageList, these should be moved as well.\n//  The MessageList should have configurable the limit for performing the requests.\n//  This parameter would then be used within these functions\nexport const hasMoreMessagesProbably = (returnedCountMessages: number, limit: number) =>\n  returnedCountMessages >= limit;\n\nexport function isIntroMessage(message: unknown): message is IntroMessage {\n  return (message as IntroMessage).customType === CUSTOM_MESSAGE_TYPE.intro;\n}\n\nexport function isDateSeparatorMessage(\n  message: unknown,\n): message is DateSeparatorMessage {\n  return (\n    message !== null &&\n    typeof message === 'object' &&\n    (message as DateSeparatorMessage).customType === CUSTOM_MESSAGE_TYPE.date &&\n    isDate((message as DateSeparatorMessage).date)\n  );\n}\n\nexport function isLocalMessage(message: unknown): message is LocalMessage {\n  return !isDateSeparatorMessage(message) && !isIntroMessage(message);\n}\n\nexport const getIsFirstUnreadMessage = ({\n  firstUnreadMessageId,\n  isFirstMessage,\n  lastReadDate,\n  lastReadMessageId,\n  message,\n  previousMessage,\n  unreadMessageCount = 0,\n}: {\n  isFirstMessage: boolean;\n  message: LocalMessage;\n  firstUnreadMessageId?: string;\n  lastReadDate?: Date;\n  lastReadMessageId?: string;\n  previousMessage?: RenderedMessage;\n  unreadMessageCount?: number;\n}) => {\n  // prevent showing unread indicator in threads\n  if (message.parent_id) return false;\n\n  const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();\n  const lastReadTimestamp = lastReadDate?.getTime();\n\n  const messageIsUnread =\n    !!createdAtTimestamp && !!lastReadTimestamp && createdAtTimestamp > lastReadTimestamp;\n\n  const previousMessageIsLastRead =\n    !!lastReadMessageId && lastReadMessageId === previousMessage?.id;\n\n  return (\n    firstUnreadMessageId === message.id ||\n    (!!unreadMessageCount &&\n      messageIsUnread &&\n      (isFirstMessage || previousMessageIsLastRead))\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsEA,IAAa,mBAAmB,WAAkC;CAChE,MAAM,EAAE,UAAU,wBAAwB,wBAAwB,GAAG,YAAY;CACjF,MAAM,EACJ,qBACA,qBACA,yBACA,UACA,WACE;CAEJ,IAAI,SAAS;CACb,IAAI,0BAA0B;CAC9B,IAAI;CACJ,MAAM,cAAiC,CAAC;CAExC,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GAAG;EAC3C,MAAM,UAAU,SAAS;EAEzB,IAAI,uBAAuB,QAAQ,SAAS,WAC1C;EAGF,IACE,0BACA,QAAQ,SAAS,eACjB,QAAQ,YAAY,SACpB;GACA,0BAA0B;GAC1B,uBAAuB,OAAO;GAC9B;EACF;EAEA,MAAM,UAA6B,CAAC;EACpC,MAAM,cACH,QAAQ,cACP,OAAO,QAAQ,UAAU,KACzB,QAAQ,WAAW,aAAa,KAClC;EACF,MAAM,kBAAkB,SAAS,IAAI;EACrC,IAAI,kBAAkB;EAEtB,IACE,uBACA,iBAAiB,cACjB,OAAO,gBAAgB,UAAU,GAEjC,kBAAkB,gBAAgB,WAAW,aAAa;EAG5D,IAAI,CAAC,UAAU,CAAC,yBAAyB;GACvC,SACG,YAAY,QAAQ,cAAc,IAAI,KAAK,QAAQ,IAAI,QAAQ,cAChE;GAGF,IAAI,uBAAuB,UAAU,QAAQ,MAAM,OAAO,QACxD,QAAQ,KAAK;IACX,YAAY,oBAAoB;IAChC,MAAM,QAAQ;IACd,IAAI,kBAAkB,QAAQ,UAAU;IACxC;GACF,CAAyB;EAE7B;EAEA,IACE,wBACC,MAAM,KACL,gBAAgB,mBAEf,uBACC,iBAAiB,SAAS,aAC1B,sBAAsB,gBAC1B,CAAC,uBAAuB,QAAQ,QAAQ,SAAS,EAAE,GACnD;GACA,oBAAoB;GAEpB,QAAQ,KACN;IACE,YAAY,oBAAoB;IAChC,MAAM,QAAQ;IACd,IAAI,kBAAkB,QAAQ,UAAU;GAC1C,GACA,OACF;EACF,OACE,QAAQ,KAAK,OAAO;EAGtB,YAAY,KACV,GAAI,yBAAyB;GAC3B;GACA;GACA,OAAO;GACP;GACA,mBAAmB;EACrB,CAAC,KAAK,OACR;CACF;CAGA,IAAI,0BAA0B,CAAC,yBAC7B,uBAAuB,KAAA,CAAS;CAGlC,OAAO;AACT;AAEA,IAAa,0BAAwC;CACnD,YAAY,oBAAoB;CAChC,IAAI,OAAO;AACb;AAEA,IAAa,qBAAqB,SAAyB;CACzD,IAAI;CACJ,IAAI;EACF,WAAW,CAAC,OAAO,OAAO,IAAI,gBAAgB,OAAO,KAAK,YAAY,IAAI;CAC5E,SAAS,GAAG;EACV,WAAW,OAAO;CACpB;CACA,OAAO,GAAG,oBAAoB,KAAK,GAAG;AACxC;AAGA,IAAa,mBAAmB,aAAgC;CAC9D,KAAK,IAAI,IAAI,SAAS,SAAS,GAAG,IAAI,GAAG,KAAK,GAC5C,IAAK,SAAS,EAAE,CAAkB,WAAW,YAC3C,OAAO,SAAS,EAAE,CAAC;CAIvB,OAAO;AACT;AAEA,IAAa,eAAe,UAA6B,mBAA4B;CACnF,MAAM,cAAc;CACpB,MAAM,QAAQ,iBAAiB;CAG/B,IAAI,CAAC,gBAAgB;EACnB,YAAY,QAAQ,KAAK;EACzB,OAAO;CACT;CAGA,IAAI,CAAC,YAAY,QAAQ;EACvB,YAAY,QAAQ,KAAK;EACzB,OAAO;CACT;CAGA,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GAAG;EAC3C,MAAM,cAAc,OAAQ,SAAS,EAAE,CAAkB,UAAU,IAC9D,SAAS,EAAE,CAAkB,WAAW,QAAQ,IACjD;EAEJ,MAAM,kBAAkB,OAAQ,SAAS,IAAI,EAAE,CAAkB,UAAU,IACtE,SAAS,IAAI,EAAE,CAAkB,WAAW,QAAQ,IACrD;EAGJ,IAAI,eAAe,cAAc,gBAE/B,IAAI,mBAAmB,kBAAkB,gBAAgB;GACvD,IAAI,SAAS,IAAI,MAAM,uBAAuB,SAAS,IAAI,EAAE,GAAG;GAChE,IAAI,CAAC,iBAAiB;IACpB,YAAY,KAAK,KAAK;IACtB,OAAO;GACT;EACF,OAAO;GACL,YAAY,OAAO,IAAI,GAAG,GAAG,KAAK;GAClC,OAAO;EACT;CAEJ;CAEA,OAAO;AACT;AAMA,IAAM,oBAAoB,WAAoC;CAC5D,KAAK,MAAM,OAAO,QAChB,IAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,GAAG,GAAG,OAAO;CAEhE,OAAO;AACT;AAEA,IAAa,kBACX,SACA,iBACA,aACA,eACA,kCACe;CACf,IAAI,uBAAuB,OAAO,KAAK,eAAe,OAAO,GAAG,OAAO;CAEvE,IAAI,iBAAiB,QAAQ,aAAa,WAAW,GAAG,OAAO;CAE/D,MAAM,eACJ,CAAC,mBACD,eAAe,eAAe,KAC9B,uBAAuB,eAAe,KACtC,gBAAgB,SAAS,YACzB,gBAAgB,SAAS,WACzB,gBAAgB,aAAa,WAAW,KACxC,QAAQ,MAAM,OAAO,gBAAgB,MAAM,MAC1C,QAAQ,mBAAmB,iBAAiB,QAAQ,eAAe,KACpE,gBAAgB,eAAe,KAC9B,kCAAkC,KAAA,KACjC,gBAAgB,cAChB,QAAQ,cACR,IAAI,KAAK,QAAQ,UAAU,CAAC,CAAC,QAAQ,IACnC,IAAI,KAAK,gBAAgB,UAAU,CAAC,CAAC,QAAQ,IAC7C;CAEN,MAAM,kBACJ,CAAC,eACD,eAAe,WAAW,KAC1B,uBAAuB,WAAW,KAClC,YAAY,SAAS,YACrB,YAAY,SAAS,WACrB,YAAY,aAAa,WAAW,KACpC,QAAQ,MAAM,OAAO,YAAY,MAAM,MACtC,YAAY,mBAAmB,iBAAiB,YAAY,eAAe,KAC5E,gBAAgB,OAAO,KACtB,kCAAkC,KAAA,KACjC,YAAY,cACZ,QAAQ,cACR,IAAI,KAAK,YAAY,UAAU,CAAC,CAAC,QAAQ,IACvC,IAAI,KAAK,QAAQ,UAAU,CAAC,CAAC,QAAQ,IACrC;CAEN,IAAI,CAAC,gBAAgB,CAAC,iBAAiB;EACrC,IAAI,QAAQ,SAAS,SAAS,OAAO;EACrC,OAAO;CACT;CAEA,IAAI,iBAAiB;EACnB,IAAI,gBAAgB,QAAQ,SAAS,SAAS,OAAO;EACrD,OAAO;CACT;CAEA,IAAI,cAAc,OAAO;CAEzB,OAAO;AACT;AAOA,IAAa,2BAA2B,uBAA+B,UACrE,yBAAyB;AAE3B,SAAgB,eAAe,SAA2C;CACxE,OAAQ,QAAyB,eAAe,oBAAoB;AACtE;AAEA,SAAgB,uBACd,SACiC;CACjC,OACE,YAAY,QACZ,OAAO,YAAY,YAClB,QAAiC,eAAe,oBAAoB,QACrE,OAAQ,QAAiC,IAAI;AAEjD;AAEA,SAAgB,eAAe,SAA2C;CACxE,OAAO,CAAC,uBAAuB,OAAO,KAAK,CAAC,eAAe,OAAO;AACpE;AAEA,IAAa,2BAA2B,EACtC,sBACA,gBACA,cACA,mBACA,SACA,iBACA,qBAAqB,QASjB;CAEJ,IAAI,QAAQ,WAAW,OAAO;CAE9B,MAAM,qBAAqB,QAAQ,cAAc,IAAI,KAAK,QAAQ,UAAU,CAAC,CAAC,QAAQ;CACtF,MAAM,oBAAoB,cAAc,QAAQ;CAEhD,MAAM,kBACJ,CAAC,CAAC,sBAAsB,CAAC,CAAC,qBAAqB,qBAAqB;CAEtE,MAAM,4BACJ,CAAC,CAAC,qBAAqB,sBAAsB,iBAAiB;CAEhE,OACE,yBAAyB,QAAQ,MAChC,CAAC,CAAC,sBACD,oBACC,kBAAkB;AAEzB"}

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

@@ -0,0 +1,157 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useModalDialog, useModalDialogIsOpen, useModalDialogIsTopmost } from "../Dialog/hooks/useDialog.mjs";
+import { DialogPortalEntry } from "../Dialog/service/DialogPortal.mjs";
+import { DialogManagerProvider, modalDialogManagerId } from "../../context/DialogManagerContext.mjs";
+import { ModalContextProvider } from "../../context/ModalContext.mjs";
+import { AriaLiveOutlet } from "../Accessibility/AriaLiveOutlet.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { useResolvedModalAriaProps } from "../../a11y/hooks/useResolvedModalAriaProps.mjs";
+import { NotificationList } from "../Notifications/NotificationList.mjs";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { FocusScope } from "@react-aria/focus";
+//#region src/components/Modal/GlobalModal.tsx
+var GlobalModal = ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, className, CloseButtonOnOverlay, dialogId, dialogRootProps, getInitialFocusElement, initialFocusStrategy, onClose, onCloseAttempt, open, role = "dialog" }) => {
+	const generatedDialogId = useStableId();
+	const resolvedDialogId = dialogId ?? `modal-dialog-${generatedDialogId}`;
+	const dialog = useModalDialog(resolvedDialogId);
+	const isOpen = useModalDialogIsOpen(resolvedDialogId);
+	const isTopmost = useModalDialogIsTopmost(resolvedDialogId);
+	const overlayRef = useRef(null);
+	const dialogRef = useRef(null);
+	const closeButtonRef = useRef(null);
+	const closingRef = useRef(false);
+	const { theme } = useChatContext();
+	const { NotificationList: NotificationList$1 = NotificationList } = useComponentContext();
+	const { className: dialogRootClassName, onKeyDown: dialogRootOnKeyDown, ...dialogRootPropsRest } = dialogRootProps ?? {};
+	const dialogLabelingBaseId = resolvedDialogId;
+	const resolvedInitialFocusStrategy = initialFocusStrategy ?? "firstElement";
+	const resolvedModalAriaProps = useResolvedModalAriaProps({
+		ariaDescribedby,
+		ariaLabel,
+		ariaLabelledby,
+		dialogId: dialogLabelingBaseId
+	});
+	const maybeClose = useCallback((source, event) => {
+		if (onCloseAttempt?.(source, event) !== false) {
+			dialog.close();
+			closingRef.current = true;
+			onClose?.(event);
+		}
+	}, [
+		dialog,
+		onClose,
+		onCloseAttempt
+	]);
+	const modalContextValue = useMemo(() => ({
+		close: () => maybeClose("button", {}),
+		dialogId: dialogLabelingBaseId
+	}), [dialogLabelingBaseId, maybeClose]);
+	const handleOverlayClick = (event) => {
+		if (!isTopmost) return;
+		const target = event.target;
+		if (overlayRef.current === target) maybeClose("overlay", event);
+	};
+	const handleCloseButtonClick = (event) => {
+		if (!isTopmost) return;
+		maybeClose("button", event);
+	};
+	const handleDialogKeyDown = (event) => {
+		dialogRootOnKeyDown?.(event);
+		if (event.defaultPrevented || !isTopmost) return;
+		if (event.key === "Escape") {
+			maybeClose("escape", event);
+			return;
+		}
+		if (event.key === "Enter" && event.target === dialogRef.current) {
+			const target = dialogRef.current?.querySelector("[data-autofocus]");
+			if (target) {
+				event.preventDefault();
+				target.focus();
+			}
+		}
+	};
+	useEffect(() => {
+		if (!open) {
+			closingRef.current = false;
+			if (isOpen) dialog.close();
+			return;
+		}
+		if (open && !isOpen && !closingRef.current) dialog.open();
+	}, [
+		dialog,
+		isOpen,
+		open
+	]);
+	useEffect(() => {
+		if (!open || !isOpen || !isTopmost || !getInitialFocusElement && resolvedInitialFocusStrategy === "firstElement") return;
+		const frame = requestAnimationFrame(() => {
+			const dialogElement = dialogRef.current;
+			if (!dialogElement) return;
+			(getInitialFocusElement?.(dialogElement) ?? dialogElement).focus();
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [
+		getInitialFocusElement,
+		isOpen,
+		isTopmost,
+		open,
+		resolvedInitialFocusStrategy
+	]);
+	if (!open || !isOpen) return null;
+	return /* @__PURE__ */ jsx(DialogPortalEntry, {
+		dialogId: resolvedDialogId,
+		dialogManagerId: modalDialogManagerId,
+		children: /* @__PURE__ */ jsx(ModalContextProvider, {
+			value: modalContextValue,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx("str-chat", theme, "str-chat__modal str-chat-react__modal str-chat__modal--open", className),
+				onClick: handleOverlayClick,
+				ref: overlayRef,
+				children: [
+					/* @__PURE__ */ jsx(FocusScope, {
+						autoFocus: isTopmost && !getInitialFocusElement && resolvedInitialFocusStrategy === "firstElement",
+						contain: isTopmost,
+						restoreFocus: true,
+						children: /* @__PURE__ */ jsx("div", {
+							...dialogRootPropsRest,
+							"aria-describedby": resolvedModalAriaProps["aria-describedby"],
+							"aria-label": resolvedModalAriaProps["aria-label"],
+							"aria-labelledby": resolvedModalAriaProps["aria-labelledby"],
+							"aria-modal": isTopmost ? "true" : void 0,
+							className: clsx("str-chat__modal__dialog", dialogRootClassName),
+							inert: isTopmost ? void 0 : true,
+							onKeyDown: handleDialogKeyDown,
+							ref: dialogRef,
+							role,
+							tabIndex: isTopmost ? 0 : -1,
+							children: /* @__PURE__ */ jsxs(DialogManagerProvider, {
+								id: `${resolvedDialogId}-floating-dialog-manager`,
+								portalDestinationProps: {
+									captureOutsideClicks: true,
+									className: "str-chat__modal__floating-dialog-overlay"
+								},
+								children: [children, isTopmost && /* @__PURE__ */ jsx(AriaLiveOutlet, { layer: 1 })]
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(NotificationList$1, {
+						className: "str-chat__modal__notification-list",
+						panel: "modal",
+						verticalAlignment: "top"
+					}),
+					CloseButtonOnOverlay && /* @__PURE__ */ jsx(CloseButtonOnOverlay, {
+						onClick: handleCloseButtonClick,
+						ref: closeButtonRef
+					})
+				]
+			})
+		})
+	});
+};
+//#endregion
+export { GlobalModal };
+
+//# sourceMappingURL=GlobalModal.mjs.map

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,91 @@
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { useNotificationApi } from "./hooks/useNotificationApi.mjs";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import "stream-chat";
+//#region src/components/Notifications/Notification.tsx
+var DefaultNotificationIcon = ({ notification }) => {
+	const { IconCheckmark, IconExclamationMark, IconExclamationTriangleFill, IconRefresh } = useComponentContextIcons();
+	if (!notification.severity) return null;
+	const Icon = {
+		error: IconExclamationMark,
+		info: null,
+		loading: IconRefresh,
+		success: IconCheckmark,
+		warning: IconExclamationTriangleFill
+	}[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 { IconXmark } = useComponentContextIcons();
+	const { removeNotification } = useNotificationApi();
+	const { t } = useTranslationContext();
+	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("aria/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  if (!notification.severity) return null;\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  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 { IconXmark } = useComponentContextIcons();\n\n    const { removeNotification } = useNotificationApi();\n    const { t } = useTranslationContext();\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('aria/Dismiss notification')}\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;CAC3B,IAAI,CAAC,aAAa,UAAU,OAAO;CAUnC,MAAM,OAAO;EAPX,OAAO;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,SAAS;CAGE,EAAgB,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,cAAc,yBAAyB;CAE/C,MAAM,EAAE,uBAAuB,mBAAmB;CAClD,MAAM,EAAE,MAAM,sBAAsB;CAEpC,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,EAAE,2BAA2B;IACzC,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"}