@mantine/notifications 9.5.2 → 9.6.0

package/esm/Notifications.mjs

@@ -11,6 +11,10 @@ import { Box, OptionalPortal, RemoveScroll, createVarsResolver, factory, getDefa
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/notifications/src/Notifications.tsx
 const Transition$1 = Transition;
+/** Vertical gap between notifications of an expanded stack, in px */
+const STACK_EXPANDED_GAP = 16;
+/** Offset step used for a notification that has not been measured yet, in px */
+const FALLBACK_NOTIFICATION_HEIGHT = 80;
 const defaultProps = {
 	position: "bottom-right",
 	autoClose: 4e3,
@@ -23,7 +27,8 @@ const defaultProps = {
 	zIndex: getDefaultZIndex("overlay"),
 	store: notificationsStore,
 	withinPortal: true,
-	pauseResetOnHover: "all"
+	pauseResetOnHover: "all",
+	layout: "default"
 };
 const varsResolver = createVarsResolver((_, { zIndex, containerWidth }) => ({ root: {
 	"--notifications-z-index": zIndex?.toString(),
@@ -31,16 +36,134 @@ const varsResolver = createVarsResolver((_, { zIndex, containerWidth }) => ({ ro
 } }));
 const Notifications = factory((_props) => {
 	const props = useProps("Notifications", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, attributes, position, autoClose, transitionDuration, allowDragDismiss, allowScrollDismiss, containerWidth, notificationMaxHeight, limit, zIndex, store, portalProps, withinPortal, pauseResetOnHover, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, attributes, position, autoClose, transitionDuration, allowDragDismiss, allowScrollDismiss, containerWidth, notificationMaxHeight, limit, zIndex, store, portalProps, withinPortal, pauseResetOnHover, renderNotification, layout, ...others } = props;
 	const theme = useMantineTheme();
 	const data = useNotifications(store);
 	const forceUpdate = useForceUpdate();
 	const shouldReduceMotion = useReducedMotion();
 	const refs = useRef({});
 	const previousLength = useRef(0);
-	const [hoveredCount, setHoveredCount] = useState(0);
-	const handleHoverStart = useCallback(() => setHoveredCount((c) => c + 1), []);
-	const handleHoverEnd = useCallback(() => setHoveredCount((c) => Math.max(0, c - 1)), []);
+	const [hoveredCounts, setHoveredCounts] = useState({});
+	const [expandedPositions, setExpandedPositions] = useState({});
+	const [hoveredGroups, setHoveredGroups] = useState({});
+	const [pinnedPosition, setPinnedPosition] = useState(null);
+	const collapseTimeouts = useRef({});
+	const hoveredCount = Object.values(hoveredCounts).reduce((acc, count) => acc + (count ?? 0), 0) + Object.values(hoveredGroups).filter(Boolean).length;
+	const handleHoverStart = useCallback((pos) => setHoveredCounts((current) => ({
+		...current,
+		[pos]: (current[pos] ?? 0) + 1
+	})), []);
+	const handleHoverEnd = useCallback((pos) => setHoveredCounts((current) => ({
+		...current,
+		[pos]: Math.max(0, (current[pos] ?? 0) - 1)
+	})), []);
+	const getGroupHoverProps = useCallback((pos) => layout === "stacked" ? {
+		onMouseEnter: () => setHoveredGroups((current) => ({
+			...current,
+			[pos]: true
+		})),
+		onMouseLeave: () => setHoveredGroups((current) => ({
+			...current,
+			[pos]: false
+		}))
+	} : {}, [layout]);
+	const handleExpandRequest = useCallback((pos) => setPinnedPosition(pos), []);
+	useEffect(() => {
+		if (layout !== "stacked") return;
+		const timeouts = collapseTimeouts.current;
+		positions.forEach((pos) => {
+			if ((hoveredCounts[pos] ?? 0) > 0 || hoveredGroups[pos] || pinnedPosition === pos) {
+				window.clearTimeout(timeouts[pos]);
+				setExpandedPositions((current) => current[pos] ? current : {
+					...current,
+					[pos]: true
+				});
+			} else timeouts[pos] = window.setTimeout(() => {
+				setExpandedPositions((current) => current[pos] ? {
+					...current,
+					[pos]: false
+				} : current);
+			}, 200);
+		});
+		return () => positions.forEach((pos) => window.clearTimeout(timeouts[pos]));
+	}, [
+		hoveredCounts,
+		hoveredGroups,
+		pinnedPosition,
+		layout
+	]);
+	useEffect(() => {
+		if (!pinnedPosition) return;
+		const handlePointerDown = (event) => {
+			const target = event.target;
+			if (!(target !== null && Object.values(refs.current).some((element) => element?.contains(target)))) setPinnedPosition(null);
+		};
+		document.addEventListener("pointerdown", handlePointerDown);
+		return () => document.removeEventListener("pointerdown", handlePointerDown);
+	}, [pinnedPosition]);
+	const grouped = getGroupedNotifications(data.notifications, position);
+	const pinnedCount = pinnedPosition ? grouped[pinnedPosition].length : 0;
+	useEffect(() => {
+		if (layout !== "stacked" || pinnedPosition !== null && pinnedCount === 0) setPinnedPosition(null);
+	}, [
+		pinnedCount,
+		pinnedPosition,
+		layout
+	]);
+	useEffect(() => {
+		if (layout !== "stacked") setHoveredGroups((current) => Object.values(current).some(Boolean) ? {} : current);
+	}, [layout]);
+	const resizeObserver = useRef(null);
+	const measuredHeights = useRef({});
+	const observedIds = useRef(/* @__PURE__ */ new WeakMap());
+	const measureNotification = useCallback((id, element) => {
+		const height = element.offsetHeight;
+		if (measuredHeights.current[id] === height) return false;
+		measuredHeights.current[id] = height;
+		return true;
+	}, []);
+	useEffect(() => {
+		if (layout !== "stacked" || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver((entries) => {
+			let changed = false;
+			entries.forEach((entry) => {
+				const id = observedIds.current.get(entry.target);
+				if (id && measureNotification(id, entry.target)) changed = true;
+			});
+			if (changed) forceUpdate();
+		});
+		resizeObserver.current = observer;
+		Object.values(refs.current).forEach((element) => element && observer.observe(element));
+		return () => {
+			observer.disconnect();
+			resizeObserver.current = null;
+		};
+	}, [
+		layout,
+		forceUpdate,
+		measureNotification
+	]);
+	const refCallbacks = useRef({});
+	const getNotificationRef = useCallback((id) => {
+		if (!refCallbacks.current[id]) refCallbacks.current[id] = (node) => {
+			const previous = refs.current[id];
+			if (previous && previous !== node) {
+				resizeObserver.current?.unobserve(previous);
+				observedIds.current.delete(previous);
+			}
+			if (node) {
+				refs.current[id] = node;
+				observedIds.current.set(node, id);
+				measureNotification(id, node);
+				resizeObserver.current?.observe(node);
+			} else {
+				delete refs.current[id];
+				delete refCallbacks.current[id];
+				delete measuredHeights.current[id];
+			}
+		};
+		return refCallbacks.current[id];
+	}, [measureNotification]);
 	const duration = (theme.respectReducedMotion ? shouldReduceMotion : false) ? 1 : transitionDuration;
 	const getStyles = useStyles({
 		name: "Notifications",
@@ -66,37 +189,57 @@ const Notifications = factory((_props) => {
 		if (data.notifications.length > previousLength.current) setTimeout(() => forceUpdate(), 0);
 		previousLength.current = data.notifications.length;
 	}, [data.notifications]);
-	const grouped = getGroupedNotifications(data.notifications, position);
 	const groupedComponents = positions.reduce((acc, pos) => {
-		acc[pos] = grouped[pos].map(({ style: notificationStyle, ...notification }) => /* @__PURE__ */ jsx(Transition$1, {
-			timeout: duration,
-			onEnter: () => refs.current[notification.id].offsetHeight,
-			nodeRef: { current: refs.current[notification.id] },
-			children: (state) => /* @__PURE__ */ jsx(NotificationContainer, {
-				ref: (node) => {
-					if (node) refs.current[notification.id] = node;
-					else delete refs.current[notification.id];
-				},
-				data: notification,
-				onHide: (id) => hideNotification(id, store),
-				autoClose,
-				transitionDuration: duration,
-				allowDragDismiss,
-				allowScrollDismiss,
-				paused: pauseResetOnHover === "all" ? hoveredCount > 0 : false,
-				onHoverStart: handleHoverStart,
-				onHoverEnd: handleHoverEnd,
-				...getStyles("notification", { style: {
-					...getNotificationStateStyles({
-						state,
-						position: pos,
-						transitionDuration: duration,
-						maxHeight: notificationMaxHeight
-					}),
-					...notificationStyle
-				} })
-			})
-		}, notification.id));
+		const groupLength = grouped[pos].length;
+		const expandedOffsets = new Array(groupLength).fill(0);
+		const stackExpanded = layout === "stacked" && !!expandedPositions[pos];
+		const stackOrder = layout === "stacked" ? [...grouped[pos]].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (b.__sequence ?? 0) - (a.__sequence ?? 0)) : grouped[pos];
+		if (stackExpanded && groupLength > 0) {
+			const direction = pos.startsWith("top") ? 1 : -1;
+			let cumOffset = 0;
+			for (let i = 0; i < groupLength; i += 1) {
+				expandedOffsets[i] = cumOffset * direction;
+				cumOffset += (measuredHeights.current[stackOrder[i].id] || FALLBACK_NOTIFICATION_HEIGHT) + STACK_EXPANDED_GAP;
+			}
+		}
+		acc[pos] = stackOrder.map((item, stackIndex) => {
+			const { style: notificationStyle, ...notification } = item;
+			return /* @__PURE__ */ jsx(Transition$1, {
+				timeout: duration,
+				onEnter: () => refs.current[notification.id].offsetHeight,
+				nodeRef: { current: refs.current[notification.id] },
+				children: (state) => /* @__PURE__ */ jsx(NotificationContainer, {
+					ref: getNotificationRef(notification.id),
+					data: notification,
+					onHide: (id) => hideNotification(id, store),
+					autoClose,
+					transitionDuration: duration,
+					allowDragDismiss,
+					allowScrollDismiss,
+					paused: (pauseResetOnHover === "all" ? hoveredCount > 0 : false) || layout === "stacked" && !stackExpanded && stackIndex > 0,
+					onHoverStart: () => handleHoverStart(pos),
+					onHoverEnd: () => handleHoverEnd(pos),
+					onExpandRequest: () => handleExpandRequest(pos),
+					renderNotification: "renderNotification" in notification ? notification.renderNotification : renderNotification,
+					layout,
+					stackIndex,
+					stackSize: groupLength,
+					stackPosition: pos,
+					stackExpanded,
+					stackExpandedOffset: expandedOffsets[stackIndex],
+					transitionState: state,
+					...getStyles("notification", { style: {
+						...getNotificationStateStyles({
+							state,
+							position: pos,
+							transitionDuration: duration,
+							maxHeight: notificationMaxHeight
+						}),
+						...notificationStyle
+					} })
+				})
+			}, notification.id);
+		});
 		return acc;
 	}, {});
 	return /* @__PURE__ */ jsxs(OptionalPortal, {
@@ -106,38 +249,62 @@ const Notifications = factory((_props) => {
 			/* @__PURE__ */ jsx(Box, {
 				...getStyles("root"),
 				"data-position": "top-center",
+				"data-layout": layout,
 				...others,
-				children: /* @__PURE__ */ jsx(TransitionGroup, { children: groupedComponents["top-center"] })
+				children: /* @__PURE__ */ jsx(TransitionGroup, {
+					...getGroupHoverProps("top-center"),
+					children: groupedComponents["top-center"]
+				})
 			}),
 			/* @__PURE__ */ jsx(Box, {
 				...getStyles("root"),
 				"data-position": "top-left",
+				"data-layout": layout,
 				...others,
-				children: /* @__PURE__ */ jsx(TransitionGroup, { children: groupedComponents["top-left"] })
+				children: /* @__PURE__ */ jsx(TransitionGroup, {
+					...getGroupHoverProps("top-left"),
+					children: groupedComponents["top-left"]
+				})
 			}),
 			/* @__PURE__ */ jsx(Box, {
 				...getStyles("root", { className: RemoveScroll.classNames.fullWidth }),
 				"data-position": "top-right",
+				"data-layout": layout,
 				...others,
-				children: /* @__PURE__ */ jsx(TransitionGroup, { children: groupedComponents["top-right"] })
+				children: /* @__PURE__ */ jsx(TransitionGroup, {
+					...getGroupHoverProps("top-right"),
+					children: groupedComponents["top-right"]
+				})
 			}),
 			/* @__PURE__ */ jsx(Box, {
 				...getStyles("root", { className: RemoveScroll.classNames.fullWidth }),
 				"data-position": "bottom-right",
+				"data-layout": layout,
 				...others,
-				children: /* @__PURE__ */ jsx(TransitionGroup, { children: groupedComponents["bottom-right"] })
+				children: /* @__PURE__ */ jsx(TransitionGroup, {
+					...getGroupHoverProps("bottom-right"),
+					children: groupedComponents["bottom-right"]
+				})
 			}),
 			/* @__PURE__ */ jsx(Box, {
 				...getStyles("root"),
 				"data-position": "bottom-left",
+				"data-layout": layout,
 				...others,
-				children: /* @__PURE__ */ jsx(TransitionGroup, { children: groupedComponents["bottom-left"] })
+				children: /* @__PURE__ */ jsx(TransitionGroup, {
+					...getGroupHoverProps("bottom-left"),
+					children: groupedComponents["bottom-left"]
+				})
 			}),
 			/* @__PURE__ */ jsx(Box, {
 				...getStyles("root"),
 				"data-position": "bottom-center",
+				"data-layout": layout,
 				...others,
-				children: /* @__PURE__ */ jsx(TransitionGroup, { children: groupedComponents["bottom-center"] })
+				children: /* @__PURE__ */ jsx(TransitionGroup, {
+					...getGroupHoverProps("bottom-center"),
+					children: groupedComponents["bottom-center"]
+				})
 			})
 		]
 	});

package/esm/Notifications.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Notifications.mjs","names":["Transition","_Transition","classes"],"sources":["../src/Notifications.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  Transition as _Transition,\n  TransitionGroup,\n  TransitionStatus,\n} from 'react-transition-group';\nimport {\n  BasePortalProps,\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  OptionalPortal,\n  rem,\n  RemoveScroll,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useDidUpdate, useForceUpdate, useReducedMotion } from '@mantine/hooks';\nimport {\n  getGroupedNotifications,\n  positions,\n} from './get-grouped-notifications/get-grouped-notifications';\nimport { getNotificationStateStyles } from './get-notification-state-styles';\nimport { NotificationContainer } from './NotificationContainer';\nimport {\n  hideNotification,\n  NotificationPosition,\n  notifications,\n  NotificationsStore,\n  notificationsStore,\n  useNotifications,\n} from './notifications.store';\nimport classes from './Notifications.module.css';\n\nconst Transition: any = _Transition;\n\nexport type NotificationsStylesNames = 'root' | 'notification';\nexport type NotificationsCssVariables = {\n  root: '--notifications-z-index' | '--notifications-container-width';\n};\n\nexport interface NotificationsProps\n  extends BoxProps, StylesApiProps<NotificationsFactory>, ElementProps<'div'> {\n  /** Notifications default position @default 'bottom-right' */\n  position?: NotificationPosition;\n\n  /** Auto close timeout for all notifications in ms, `false` to disable auto close, can be overwritten for individual notifications in `notifications.show` function @default 4000 */\n  autoClose?: number | false;\n\n  /** Notification transition duration in ms @default 250 */\n  transitionDuration?: number;\n\n  /** Determines whether notifications can be dismissed by dragging left or right @default true */\n  allowDragDismiss?: boolean;\n\n  /** Determines whether notifications can be dismissed with horizontal scroll gesture while hovered @default true */\n  allowScrollDismiss?: boolean;\n\n  /** Notification width, cannot exceed 100% @default 440 */\n  containerWidth?: number | string;\n\n  /** Notification `max-height`, used for transitions @default 200 */\n  notificationMaxHeight?: number | string;\n\n  /** Maximum number of notifications displayed at a time, other new notifications will be added to queue @default 5 */\n  limit?: number;\n\n  /** Notifications container z-index @default 400 */\n  zIndex?: string | number;\n\n  /** Props passed down to the `Portal` component */\n  portalProps?: BasePortalProps;\n\n  /** Store for notifications state, can be used to create multiple instances of notifications system in your application */\n  store?: NotificationsStore;\n\n  /** Determines whether notifications container should be rendered inside `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Determines which notifications should pause auto close on hover, `'all'` – pauses auto close for all notifications when any notification is hovered, `'notification'` – pauses auto close only for the hovered notification @default 'all' */\n  pauseResetOnHover?: 'all' | 'notification';\n}\n\nexport type NotificationsFactory = Factory<{\n  props: NotificationsProps;\n  ref: HTMLDivElement;\n  stylesNames: NotificationsStylesNames;\n  vars: NotificationsCssVariables;\n  staticComponents: {\n    show: typeof notifications.show;\n    hide: typeof notifications.hide;\n    update: typeof notifications.update;\n    clean: typeof notifications.clean;\n    cleanQueue: typeof notifications.cleanQueue;\n    updateState: typeof notifications.updateState;\n  };\n}>;\n\nconst defaultProps = {\n  position: 'bottom-right',\n  autoClose: 4000,\n  transitionDuration: 250,\n  allowDragDismiss: true,\n  allowScrollDismiss: true,\n  containerWidth: 440,\n  notificationMaxHeight: 200,\n  limit: 5,\n  zIndex: getDefaultZIndex('overlay'),\n  store: notificationsStore,\n  withinPortal: true,\n  pauseResetOnHover: 'all',\n} satisfies Partial<NotificationsProps>;\n\nconst varsResolver = createVarsResolver<NotificationsFactory>((_, { zIndex, containerWidth }) => ({\n  root: {\n    '--notifications-z-index': zIndex?.toString(),\n    '--notifications-container-width': rem(containerWidth),\n  },\n}));\n\nexport const Notifications = factory<NotificationsFactory>((_props) => {\n  const props = useProps('Notifications', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    position,\n    autoClose,\n    transitionDuration,\n    allowDragDismiss,\n    allowScrollDismiss,\n    containerWidth,\n    notificationMaxHeight,\n    limit,\n    zIndex,\n    store,\n    portalProps,\n    withinPortal,\n    pauseResetOnHover,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const data = useNotifications(store);\n  const forceUpdate = useForceUpdate();\n  const shouldReduceMotion = useReducedMotion();\n  const refs = useRef<Record<string, HTMLDivElement>>({});\n  const previousLength = useRef<number>(0);\n  const [hoveredCount, setHoveredCount] = useState(0);\n\n  const handleHoverStart = useCallback(() => setHoveredCount((c) => c + 1), []);\n  const handleHoverEnd = useCallback(() => setHoveredCount((c) => Math.max(0, c - 1)), []);\n\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const duration = reduceMotion ? 1 : transitionDuration;\n\n  const getStyles = useStyles<NotificationsFactory>({\n    name: 'Notifications',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  useEffect(() => {\n    store?.updateState((current) => ({\n      ...current,\n      limit: limit || 5,\n      defaultPosition: position,\n    }));\n  }, [limit, position]);\n\n  useDidUpdate(() => {\n    if (data.notifications.length > previousLength.current) {\n      setTimeout(() => forceUpdate(), 0);\n    }\n    previousLength.current = data.notifications.length;\n  }, [data.notifications]);\n\n  const grouped = getGroupedNotifications(data.notifications, position);\n  const groupedComponents = positions.reduce(\n    (acc, pos) => {\n      acc[pos] = grouped[pos].map(({ style: notificationStyle, ...notification }) => (\n        <Transition\n          key={notification.id}\n          timeout={duration}\n          onEnter={() => refs.current[notification.id!].offsetHeight}\n          nodeRef={{ current: refs.current[notification.id!] }}\n        >\n          {(state: TransitionStatus) => (\n            <NotificationContainer\n              ref={(node) => {\n                if (node) {\n                  refs.current[notification.id!] = node;\n                } else {\n                  delete refs.current[notification.id!];\n                }\n              }}\n              data={notification}\n              onHide={(id) => hideNotification(id, store)}\n              autoClose={autoClose}\n              transitionDuration={duration}\n              allowDragDismiss={allowDragDismiss}\n              allowScrollDismiss={allowScrollDismiss}\n              paused={pauseResetOnHover === 'all' ? hoveredCount > 0 : false}\n              onHoverStart={handleHoverStart}\n              onHoverEnd={handleHoverEnd}\n              {...getStyles('notification', {\n                style: {\n                  ...getNotificationStateStyles({\n                    state,\n                    position: pos,\n                    transitionDuration: duration,\n                    maxHeight: notificationMaxHeight,\n                  }),\n                  ...notificationStyle,\n                },\n              })}\n            />\n          )}\n        </Transition>\n      ));\n\n      return acc;\n    },\n    {} as Record<NotificationPosition, React.ReactNode>\n  );\n\n  return (\n    <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n      <Box {...getStyles('root')} data-position=\"top-center\" {...others}>\n        <TransitionGroup>{groupedComponents['top-center']}</TransitionGroup>\n      </Box>\n\n      <Box {...getStyles('root')} data-position=\"top-left\" {...others}>\n        <TransitionGroup>{groupedComponents['top-left']}</TransitionGroup>\n      </Box>\n\n      <Box\n        {...getStyles('root', { className: RemoveScroll.classNames.fullWidth })}\n        data-position=\"top-right\"\n        {...others}\n      >\n        <TransitionGroup>{groupedComponents['top-right']}</TransitionGroup>\n      </Box>\n\n      <Box\n        {...getStyles('root', { className: RemoveScroll.classNames.fullWidth })}\n        data-position=\"bottom-right\"\n        {...others}\n      >\n        <TransitionGroup>{groupedComponents['bottom-right']}</TransitionGroup>\n      </Box>\n\n      <Box {...getStyles('root')} data-position=\"bottom-left\" {...others}>\n        <TransitionGroup>{groupedComponents['bottom-left']}</TransitionGroup>\n      </Box>\n\n      <Box {...getStyles('root')} data-position=\"bottom-center\" {...others}>\n        <TransitionGroup>{groupedComponents['bottom-center']}</TransitionGroup>\n      </Box>\n    </OptionalPortal>\n  );\n});\n\nNotifications.classes = classes;\nNotifications.varsResolver = varsResolver;\nNotifications.displayName = '@mantine/notifications/Notifications';\nNotifications.show = notifications.show;\nNotifications.hide = notifications.hide;\nNotifications.update = notifications.update;\nNotifications.clean = notifications.clean;\nNotifications.cleanQueue = notifications.cleanQueue;\nNotifications.updateState = notifications.updateState;\n"],"mappings":"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"}
+{"version":3,"file":"Notifications.mjs","names":["Transition","_Transition","classes"],"sources":["../src/Notifications.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  Transition as _Transition,\n  TransitionGroup,\n  TransitionStatus,\n} from 'react-transition-group';\nimport {\n  BasePortalProps,\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  OptionalPortal,\n  rem,\n  RemoveScroll,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useDidUpdate, useForceUpdate, useReducedMotion } from '@mantine/hooks';\nimport {\n  getGroupedNotifications,\n  positions,\n} from './get-grouped-notifications/get-grouped-notifications';\nimport { getNotificationStateStyles } from './get-notification-state-styles';\nimport { NotificationContainer } from './NotificationContainer';\nimport {\n  hideNotification,\n  NotificationData,\n  NotificationPosition,\n  notifications,\n  NotificationsStore,\n  notificationsStore,\n  SequencedNotificationData,\n  useNotifications,\n} from './notifications.store';\nimport classes from './Notifications.module.css';\n\nconst Transition: any = _Transition;\n\n/** Vertical gap between notifications of an expanded stack, in px */\nconst STACK_EXPANDED_GAP = 16;\n\n/** Offset step used for a notification that has not been measured yet, in px */\nconst FALLBACK_NOTIFICATION_HEIGHT = 80;\n\nexport type NotificationsStylesNames = 'root' | 'notification';\nexport type NotificationsCssVariables = {\n  root: '--notifications-z-index' | '--notifications-container-width';\n};\n\nexport interface NotificationsProps\n  extends BoxProps, StylesApiProps<NotificationsFactory>, ElementProps<'div'> {\n  /** Notifications default position @default 'bottom-right' */\n  position?: NotificationPosition;\n\n  /** Auto close timeout for all notifications in ms, `false` to disable auto close, can be overwritten for individual notifications in `notifications.show` function @default 4000 */\n  autoClose?: number | false;\n\n  /** Notification transition duration in ms @default 250 */\n  transitionDuration?: number;\n\n  /** Determines whether notifications can be dismissed by dragging left or right @default true */\n  allowDragDismiss?: boolean;\n\n  /** Determines whether notifications can be dismissed with horizontal scroll gesture while hovered @default true */\n  allowScrollDismiss?: boolean;\n\n  /** Notification width, cannot exceed 100% @default 440 */\n  containerWidth?: number | string;\n\n  /** Notification `max-height`, used for transitions @default 200 */\n  notificationMaxHeight?: number | string;\n\n  /** Maximum number of notifications displayed at a time, other new notifications will be added to queue @default 5 */\n  limit?: number;\n\n  /** Notifications container z-index @default 400 */\n  zIndex?: string | number;\n\n  /** Props passed down to the `Portal` component */\n  portalProps?: BasePortalProps;\n\n  /** Store for notifications state, can be used to create multiple instances of notifications system in your application */\n  store?: NotificationsStore;\n\n  /** Determines whether notifications container should be rendered inside `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Determines which notifications should pause auto close on hover, `'all'` – pauses auto close for all notifications when any notification is hovered, `'notification'` – pauses auto close only for the hovered notification @default 'all' */\n  pauseResetOnHover?: 'all' | 'notification';\n\n  /** Custom render function that replaces the default notification, can be overridden per notification */\n  renderNotification?: (notification: NotificationData) => React.ReactNode;\n\n  /** Controls how notifications are positioned in the stack, `'default'` – standard vertical list, `'stacked'` – only first notification is fully visible, rest are stacked behind @default 'default' */\n  layout?: 'default' | 'stacked';\n}\n\nexport type NotificationsFactory = Factory<{\n  props: NotificationsProps;\n  ref: HTMLDivElement;\n  stylesNames: NotificationsStylesNames;\n  vars: NotificationsCssVariables;\n  staticComponents: {\n    show: typeof notifications.show;\n    hide: typeof notifications.hide;\n    update: typeof notifications.update;\n    clean: typeof notifications.clean;\n    cleanQueue: typeof notifications.cleanQueue;\n    updateState: typeof notifications.updateState;\n  };\n}>;\n\nconst defaultProps = {\n  position: 'bottom-right',\n  autoClose: 4000,\n  transitionDuration: 250,\n  allowDragDismiss: true,\n  allowScrollDismiss: true,\n  containerWidth: 440,\n  notificationMaxHeight: 200,\n  limit: 5,\n  zIndex: getDefaultZIndex('overlay'),\n  store: notificationsStore,\n  withinPortal: true,\n  pauseResetOnHover: 'all',\n  layout: 'default',\n} satisfies Partial<NotificationsProps>;\n\nconst varsResolver = createVarsResolver<NotificationsFactory>((_, { zIndex, containerWidth }) => ({\n  root: {\n    '--notifications-z-index': zIndex?.toString(),\n    '--notifications-container-width': rem(containerWidth),\n  },\n}));\n\nexport const Notifications = factory<NotificationsFactory>((_props) => {\n  const props = useProps('Notifications', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    position,\n    autoClose,\n    transitionDuration,\n    allowDragDismiss,\n    allowScrollDismiss,\n    containerWidth,\n    notificationMaxHeight,\n    limit,\n    zIndex,\n    store,\n    portalProps,\n    withinPortal,\n    pauseResetOnHover,\n    renderNotification,\n    layout,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const data = useNotifications(store);\n  const forceUpdate = useForceUpdate();\n  const shouldReduceMotion = useReducedMotion();\n  const refs = useRef<Record<string, HTMLDivElement>>({});\n  const previousLength = useRef<number>(0);\n  // Every position renders its own stack, so hover, expansion and pinning are tracked per\n  // position – a single shared flag made hovering one corner expand all six of them.\n  const [hoveredCounts, setHoveredCounts] = useState<Partial<Record<NotificationPosition, number>>>(\n    {}\n  );\n  const [expandedPositions, setExpandedPositions] = useState<\n    Partial<Record<NotificationPosition, boolean>>\n  >({});\n  const [hoveredGroups, setHoveredGroups] = useState<\n    Partial<Record<NotificationPosition, boolean>>\n  >({});\n  const [pinnedPosition, setPinnedPosition] = useState<NotificationPosition | null>(null);\n  const collapseTimeouts = useRef<Partial<Record<NotificationPosition, number>>>({});\n\n  // `pauseResetOnHover=\"all\"` is documented as pausing every notification when any one of\n  // them is hovered, so this stays global while the stack state above does not.\n  const hoveredCount =\n    Object.values(hoveredCounts).reduce((acc, count) => acc + (count ?? 0), 0) +\n    Object.values(hoveredGroups).filter(Boolean).length;\n\n  const handleHoverStart = useCallback(\n    (pos: NotificationPosition) =>\n      setHoveredCounts((current) => ({ ...current, [pos]: (current[pos] ?? 0) + 1 })),\n    []\n  );\n\n  const handleHoverEnd = useCallback(\n    (pos: NotificationPosition) =>\n      setHoveredCounts((current) => ({ ...current, [pos]: Math.max(0, (current[pos] ?? 0) - 1) })),\n    []\n  );\n\n  // Stacked hover is also tracked on the group element that wraps a stack, not only on the\n  // individual notifications. When the hovered notification unmounts, React does not deliver\n  // `onMouseEnter` to the one that slides under a stationary pointer: the browser dispatches\n  // only a `mouseover` for the new target (no `mouseout`, the old node is gone), and the\n  // enter/leave plugin drops it because its `relatedTarget` still resolves to a React\n  // instance. The group is hovered throughout, so its state needs no event to stay correct\n  // and the stack stays open until the pointer really leaves.\n  // Kept apart from the notification counter above so that it can be released on its own –\n  // the group has no unmount hook to fall back on the way a notification does.\n  const getGroupHoverProps = useCallback(\n    (pos: NotificationPosition) =>\n      layout === 'stacked'\n        ? {\n            onMouseEnter: () => setHoveredGroups((current) => ({ ...current, [pos]: true })),\n            onMouseLeave: () => setHoveredGroups((current) => ({ ...current, [pos]: false })),\n          }\n        : {},\n    [layout]\n  );\n\n  // Touch devices have no hover, so tapping the stack pins it open until the next tap\n  // outside of it. Without this the notifications behind the first one are unreachable.\n  const handleExpandRequest = useCallback(\n    (pos: NotificationPosition) => setPinnedPosition(pos),\n    []\n  );\n\n  useEffect(() => {\n    if (layout !== 'stacked') {\n      return undefined;\n    }\n\n    const timeouts = collapseTimeouts.current;\n\n    positions.forEach((pos) => {\n      if ((hoveredCounts[pos] ?? 0) > 0 || hoveredGroups[pos] || pinnedPosition === pos) {\n        window.clearTimeout(timeouts[pos]);\n        setExpandedPositions((current) => (current[pos] ? current : { ...current, [pos]: true }));\n      } else {\n        timeouts[pos] = window.setTimeout(() => {\n          setExpandedPositions((current) =>\n            current[pos] ? { ...current, [pos]: false } : current\n          );\n        }, 200);\n      }\n    });\n\n    return () => positions.forEach((pos) => window.clearTimeout(timeouts[pos]));\n  }, [hoveredCounts, hoveredGroups, pinnedPosition, layout]);\n\n  useEffect(() => {\n    if (!pinnedPosition) {\n      return undefined;\n    }\n\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target as Node | null;\n      const insideStack =\n        target !== null && Object.values(refs.current).some((element) => element?.contains(target));\n\n      if (!insideStack) {\n        setPinnedPosition(null);\n      }\n    };\n\n    document.addEventListener('pointerdown', handlePointerDown);\n    return () => document.removeEventListener('pointerdown', handlePointerDown);\n  }, [pinnedPosition]);\n\n  const grouped = getGroupedNotifications(data.notifications, position);\n  const pinnedCount = pinnedPosition ? grouped[pinnedPosition].length : 0;\n\n  useEffect(() => {\n    if (layout !== 'stacked' || (pinnedPosition !== null && pinnedCount === 0)) {\n      setPinnedPosition(null);\n    }\n  }, [pinnedCount, pinnedPosition, layout]);\n\n  // Leaving the stacked layout takes the handlers below out of the tree, so nothing can ever\n  // deliver the `mouseleave` that would release the group and a stale flag would keep auto\n  // close paused forever. Emptying a stack needs no such handling – the browser drops the\n  // hover on its own once the last notification is removed, and releasing it here instead\n  // would fire while the dismissed notification is still exiting under the pointer.\n  useEffect(() => {\n    if (layout !== 'stacked') {\n      setHoveredGroups((current) => (Object.values(current).some(Boolean) ? {} : current));\n    }\n  }, [layout]);\n\n  // Expanded stack offsets need the height of every notification. Measuring during render\n  // would force a layout pass on every hover, focus and store update, so heights are cached\n  // here and refreshed from the ResizeObserver – which also covers a notification that grows\n  // after mount (image loads, async content, viewport reflow) and would otherwise leave the\n  // ones after it overlapping or gapped until something else triggered a render.\n  const resizeObserver = useRef<ResizeObserver | null>(null);\n  const measuredHeights = useRef<Record<string, number>>({});\n  const observedIds = useRef(new WeakMap<Element, string>());\n\n  const measureNotification = useCallback((id: string, element: HTMLElement) => {\n    const height = element.offsetHeight;\n\n    if (measuredHeights.current[id] === height) {\n      return false;\n    }\n\n    measuredHeights.current[id] = height;\n    return true;\n  }, []);\n\n  useEffect(() => {\n    if (layout !== 'stacked' || typeof ResizeObserver === 'undefined') {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver((entries) => {\n      let changed = false;\n\n      entries.forEach((entry) => {\n        const id = observedIds.current.get(entry.target);\n\n        if (id && measureNotification(id, entry.target as HTMLElement)) {\n          changed = true;\n        }\n      });\n\n      if (changed) {\n        forceUpdate();\n      }\n    });\n\n    resizeObserver.current = observer;\n    Object.values(refs.current).forEach((element) => element && observer.observe(element));\n\n    return () => {\n      observer.disconnect();\n      resizeObserver.current = null;\n    };\n  }, [layout, forceUpdate, measureNotification]);\n\n  const refCallbacks = useRef<Record<string, (node: HTMLDivElement | null) => void>>({});\n\n  const getNotificationRef = useCallback(\n    (id: string) => {\n      if (!refCallbacks.current[id]) {\n        refCallbacks.current[id] = (node: HTMLDivElement | null) => {\n          const previous = refs.current[id];\n\n          if (previous && previous !== node) {\n            resizeObserver.current?.unobserve(previous);\n            observedIds.current.delete(previous);\n          }\n\n          if (node) {\n            refs.current[id] = node;\n            observedIds.current.set(node, id);\n            // Measured here rather than during render – the commit phase is where a layout\n            // read is already paid for, and the ResizeObserver keeps the value fresh after.\n            measureNotification(id, node);\n            resizeObserver.current?.observe(node);\n          } else {\n            delete refs.current[id];\n            delete refCallbacks.current[id];\n            delete measuredHeights.current[id];\n          }\n        };\n      }\n\n      return refCallbacks.current[id];\n    },\n    [measureNotification]\n  );\n\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const duration = reduceMotion ? 1 : transitionDuration;\n\n  const getStyles = useStyles<NotificationsFactory>({\n    name: 'Notifications',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  useEffect(() => {\n    store?.updateState((current) => ({\n      ...current,\n      limit: limit || 5,\n      defaultPosition: position,\n    }));\n  }, [limit, position]);\n\n  useDidUpdate(() => {\n    if (data.notifications.length > previousLength.current) {\n      setTimeout(() => forceUpdate(), 0);\n    }\n    previousLength.current = data.notifications.length;\n  }, [data.notifications]);\n\n  const groupedComponents = positions.reduce(\n    (acc, pos) => {\n      const groupLength = grouped[pos].length;\n      const expandedOffsets: number[] = new Array(groupLength).fill(0);\n      const stackExpanded = layout === 'stacked' && !!expandedPositions[pos];\n\n      // `grouped[pos]` is sorted by priority descending, with equal priorities in insertion\n      // order. A stack is rendered front to back, so `stackOrder[0]` is the notification in\n      // front: the most urgent one, and the newest among equal priorities – only the\n      // tie-break is reversed here. Taking the front from the end of the priority-sorted\n      // array instead would put the *lowest* priority notification in front and leave an\n      // urgent one inert behind it.\n      // Rendering front first also keeps DOM order matching the visual stack – otherwise a\n      // forward Tab from the front notification (the only focusable one while collapsed)\n      // skips past the ones it just un-inerted and leaves the region. Placement is\n      // unaffected: stacked notifications share one grid cell and are positioned by\n      // transform and an explicit z-index.\n      const stackOrder =\n        layout === 'stacked'\n          ? [...(grouped[pos] as SequencedNotificationData[])].sort(\n              (a, b) =>\n                (b.priority ?? 0) - (a.priority ?? 0) || (b.__sequence ?? 0) - (a.__sequence ?? 0)\n            )\n          : grouped[pos];\n\n      if (stackExpanded && groupLength > 0) {\n        const direction = pos.startsWith('top') ? 1 : -1;\n        let cumOffset = 0;\n\n        for (let i = 0; i < groupLength; i += 1) {\n          expandedOffsets[i] = cumOffset * direction;\n          cumOffset +=\n            (measuredHeights.current[stackOrder[i].id!] || FALLBACK_NOTIFICATION_HEIGHT) +\n            STACK_EXPANDED_GAP;\n        }\n      }\n\n      acc[pos] = stackOrder.map((item, stackIndex) => {\n        const { style: notificationStyle, ...notification } = item;\n\n        return (\n          <Transition\n            key={notification.id}\n            timeout={duration}\n            onEnter={() => refs.current[notification.id!].offsetHeight}\n            nodeRef={{ current: refs.current[notification.id!] }}\n          >\n            {(state: TransitionStatus) => (\n              <NotificationContainer\n                ref={getNotificationRef(notification.id!)}\n                data={notification}\n                onHide={(id) => hideNotification(id, store)}\n                autoClose={autoClose}\n                transitionDuration={duration}\n                allowDragDismiss={allowDragDismiss}\n                allowScrollDismiss={allowScrollDismiss}\n                paused={\n                  (pauseResetOnHover === 'all' ? hoveredCount > 0 : false) ||\n                  (layout === 'stacked' && !stackExpanded && stackIndex > 0)\n                }\n                onHoverStart={() => handleHoverStart(pos)}\n                onHoverEnd={() => handleHoverEnd(pos)}\n                onExpandRequest={() => handleExpandRequest(pos)}\n                renderNotification={\n                  'renderNotification' in notification\n                    ? notification.renderNotification\n                    : renderNotification\n                }\n                layout={layout}\n                stackIndex={stackIndex}\n                stackSize={groupLength}\n                stackPosition={pos}\n                stackExpanded={stackExpanded}\n                stackExpandedOffset={expandedOffsets[stackIndex]}\n                transitionState={state}\n                {...getStyles('notification', {\n                  style: {\n                    ...getNotificationStateStyles({\n                      state,\n                      position: pos,\n                      transitionDuration: duration,\n                      maxHeight: notificationMaxHeight,\n                    }),\n                    ...notificationStyle,\n                  },\n                })}\n              />\n            )}\n          </Transition>\n        );\n      });\n\n      return acc;\n    },\n    {} as Record<NotificationPosition, React.ReactNode>\n  );\n\n  return (\n    <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n      <Box {...getStyles('root')} data-position=\"top-center\" data-layout={layout} {...others}>\n        <TransitionGroup {...getGroupHoverProps('top-center')}>\n          {groupedComponents['top-center']}\n        </TransitionGroup>\n      </Box>\n\n      <Box {...getStyles('root')} data-position=\"top-left\" data-layout={layout} {...others}>\n        <TransitionGroup {...getGroupHoverProps('top-left')}>\n          {groupedComponents['top-left']}\n        </TransitionGroup>\n      </Box>\n\n      <Box\n        {...getStyles('root', { className: RemoveScroll.classNames.fullWidth })}\n        data-position=\"top-right\"\n        data-layout={layout}\n        {...others}\n      >\n        <TransitionGroup {...getGroupHoverProps('top-right')}>\n          {groupedComponents['top-right']}\n        </TransitionGroup>\n      </Box>\n\n      <Box\n        {...getStyles('root', { className: RemoveScroll.classNames.fullWidth })}\n        data-position=\"bottom-right\"\n        data-layout={layout}\n        {...others}\n      >\n        <TransitionGroup {...getGroupHoverProps('bottom-right')}>\n          {groupedComponents['bottom-right']}\n        </TransitionGroup>\n      </Box>\n\n      <Box {...getStyles('root')} data-position=\"bottom-left\" data-layout={layout} {...others}>\n        <TransitionGroup {...getGroupHoverProps('bottom-left')}>\n          {groupedComponents['bottom-left']}\n        </TransitionGroup>\n      </Box>\n\n      <Box {...getStyles('root')} data-position=\"bottom-center\" data-layout={layout} {...others}>\n        <TransitionGroup {...getGroupHoverProps('bottom-center')}>\n          {groupedComponents['bottom-center']}\n        </TransitionGroup>\n      </Box>\n    </OptionalPortal>\n  );\n});\n\nNotifications.classes = classes;\nNotifications.varsResolver = varsResolver;\nNotifications.displayName = '@mantine/notifications/Notifications';\nNotifications.show = notifications.show;\nNotifications.hide = notifications.hide;\nNotifications.update = notifications.update;\nNotifications.clean = notifications.clean;\nNotifications.cleanQueue = notifications.cleanQueue;\nNotifications.updateState = notifications.updateState;\n"],"mappings":"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"}

package/esm/Notifications.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Notifications.module.mjs","names":[],"sources":["../src/Notifications.module.css"],"sourcesContent":[".root {\n  width: calc(100% - var(--mantine-spacing-md) * 2);\n  position: fixed;\n  z-index: var(--notifications-z-index);\n  max-width: var(--notifications-container-width);\n\n  &:where([data-position='top-center']) {\n    top: var(--mantine-spacing-md);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &:where([data-position='top-left']) {\n    top: var(--mantine-spacing-md);\n    left: var(--mantine-spacing-md);\n  }\n\n  &:where([data-position='top-right']) {\n    top: var(--mantine-spacing-md);\n    right: var(--mantine-spacing-md);\n  }\n\n  &:where([data-position='bottom-center']) {\n    bottom: var(--mantine-spacing-md);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &:where([data-position='bottom-left']) {\n    bottom: var(--mantine-spacing-md);\n    left: var(--mantine-spacing-md);\n  }\n\n  &:where([data-position='bottom-right']) {\n    bottom: var(--mantine-spacing-md);\n    right: var(--mantine-spacing-md);\n  }\n}\n\n.notification {\n  & + & {\n    margin-top: var(--mantine-spacing-md);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Notifications.module.mjs","names":[],"sources":["../src/Notifications.module.css"],"sourcesContent":[".root {\n  width: calc(100% - var(--mantine-spacing-md) * 2);\n  position: fixed;\n  z-index: var(--notifications-z-index);\n  max-width: var(--notifications-container-width);\n\n  &:where([data-position='top-center']) {\n    top: var(--mantine-spacing-md);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &:where([data-position='top-left']) {\n    top: var(--mantine-spacing-md);\n    left: var(--mantine-spacing-md);\n  }\n\n  &:where([data-position='top-right']) {\n    top: var(--mantine-spacing-md);\n    right: var(--mantine-spacing-md);\n  }\n\n  &:where([data-position='bottom-center']) {\n    bottom: var(--mantine-spacing-md);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &:where([data-position='bottom-left']) {\n    bottom: var(--mantine-spacing-md);\n    left: var(--mantine-spacing-md);\n  }\n\n  &:where([data-position='bottom-right']) {\n    bottom: var(--mantine-spacing-md);\n    right: var(--mantine-spacing-md);\n  }\n}\n\n.notification {\n  & + & {\n    margin-top: var(--mantine-spacing-md);\n  }\n\n  :where([data-layout='stacked']) & {\n    margin-top: 0;\n  }\n}\n\n.root:where([data-layout='stacked']) {\n  & > * {\n    display: grid;\n  }\n}\n"],"mappings":""}

package/esm/notifications.store.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"notifications.store.mjs","names":[],"sources":["../src/notifications.store.ts"],"sourcesContent":["import { NotificationProps } from '@mantine/core';\nimport { randomId } from '@mantine/hooks';\nimport { createStore, MantineStore, useStore } from '@mantine/store';\n\nexport type NotificationPosition =\n  | 'top-left'\n  | 'top-right'\n  | 'top-center'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'bottom-center';\n\nexport interface NotificationData\n  extends Omit<NotificationProps, 'onClose'>, Record<`data-${string}`, any> {\n  /** Notification id, can be used to close or update notification */\n  id?: string;\n\n  /** Position of the notification, if not set, the position is determined based on `position` prop on Notifications component */\n  position?: NotificationPosition;\n\n  /** Notification message, required for all notifications */\n  message: React.ReactNode;\n\n  /** Display priority. Higher numbers are shown before lower ones when the number of\n   *  active notifications exceeds `limit`. Notifications with equal priority keep insertion\n   *  order (FIFO). @default 0 */\n  priority?: number;\n\n  /** Determines whether notification should be closed automatically,\n   *  number is auto close timeout in ms, overrides `autoClose` from `Notifications`\n   * */\n  autoClose?: boolean | number;\n\n  /** Determines whether notification can be closed with close button, drag or horizontal scroll swipe, `true` by default */\n  allowClose?: boolean;\n\n  /** Called when notification closes */\n  onClose?: (props: NotificationData) => void;\n\n  /** Called when notification opens */\n  onOpen?: (props: NotificationData) => void;\n}\n\nexport interface NotificationsState {\n  notifications: NotificationData[];\n  queue: NotificationData[];\n  defaultPosition: NotificationPosition;\n  limit: number;\n}\n\nexport type NotificationsStore = MantineStore<NotificationsState>;\n\ninterface SequencedNotificationData extends NotificationData {\n  __sequence?: number;\n}\n\nlet notificationSequence = 0;\n\nfunction getDistributedNotifications(\n  data: SequencedNotificationData[],\n  defaultPosition: NotificationPosition,\n  limit: number\n) {\n  const queue: NotificationData[] = [];\n  const notifications: NotificationData[] = [];\n  const groups = new Map<string, SequencedNotificationData[]>();\n\n  for (const item of data) {\n    const position = item.position || defaultPosition;\n    const group = groups.get(position);\n    if (group) {\n      group.push(item);\n    } else {\n      groups.set(position, [item]);\n    }\n  }\n\n  for (const group of groups.values()) {\n    group.sort(\n      (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (a.__sequence ?? 0) - (b.__sequence ?? 0)\n    );\n    group.forEach((item, index) => {\n      if (index < limit) {\n        notifications.push(item);\n      } else {\n        queue.push(item);\n      }\n    });\n  }\n\n  return { notifications, queue };\n}\n\nexport const createNotificationsStore = () =>\n  createStore<NotificationsState>({\n    notifications: [],\n    queue: [],\n    defaultPosition: 'bottom-right',\n    limit: 5,\n  });\n\nexport const notificationsStore = createNotificationsStore();\nexport const useNotifications = (store: NotificationsStore = notificationsStore) => useStore(store);\n\nexport function updateNotificationsState(\n  store: NotificationsStore,\n  update: (notifications: NotificationData[]) => NotificationData[]\n) {\n  const state = store.getState();\n  const notifications = update([...state.notifications, ...state.queue]);\n\n  for (const item of notifications as SequencedNotificationData[]) {\n    if (item.__sequence === undefined) {\n      item.__sequence = notificationSequence;\n      notificationSequence += 1;\n    }\n  }\n\n  const updated = getDistributedNotifications(notifications, state.defaultPosition, state.limit);\n\n  store.setState({\n    notifications: updated.notifications,\n    queue: updated.queue,\n    limit: state.limit,\n    defaultPosition: state.defaultPosition,\n  });\n}\n\nexport function showNotification(\n  notification: NotificationData,\n  store: NotificationsStore = notificationsStore\n) {\n  const id = notification.id || randomId();\n\n  updateNotificationsState(store, (notifications) => {\n    if (notification.id && notifications.some((n) => n.id === notification.id)) {\n      return notifications;\n    }\n\n    return [...notifications, { ...notification, id }];\n  });\n\n  return id;\n}\n\nexport function hideNotification(id: string, store: NotificationsStore = notificationsStore) {\n  updateNotificationsState(store, (notifications) =>\n    notifications.filter((notification) => {\n      if (notification.id === id) {\n        notification.onClose?.(notification);\n        return false;\n      }\n\n      return true;\n    })\n  );\n\n  return id;\n}\n\nexport function updateNotification(\n  notification: NotificationData,\n  store: NotificationsStore = notificationsStore\n) {\n  updateNotificationsState(store, (notifications) =>\n    notifications.map((item) => {\n      if (item.id === notification.id) {\n        return { ...item, ...notification };\n      }\n\n      return item;\n    })\n  );\n\n  return notification.id;\n}\n\nexport function cleanNotifications(store: NotificationsStore = notificationsStore) {\n  updateNotificationsState(store, () => []);\n}\n\nexport function cleanNotificationsQueue(store: NotificationsStore = notificationsStore) {\n  const { defaultPosition, limit } = store.getState();\n  updateNotificationsState(\n    store,\n    (notifications) =>\n      getDistributedNotifications(notifications, defaultPosition, limit).notifications\n  );\n}\n\nexport const notifications = {\n  show: showNotification,\n  hide: hideNotification,\n  update: updateNotification,\n  clean: cleanNotifications,\n  cleanQueue: cleanNotificationsQueue,\n  updateState: updateNotificationsState,\n} as const;\n"],"mappings":";;;;AAwDA,IAAI,uBAAuB;AAE3B,SAAS,4BACP,MACA,iBACA,OACA;CACA,MAAM,QAA4B,CAAC;CACnC,MAAM,gBAAoC,CAAC;CAC3C,MAAM,yBAAS,IAAI,IAAyC;CAE5D,KAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,WAAW,KAAK,YAAY;EAClC,MAAM,QAAQ,OAAO,IAAI,QAAQ;EACjC,IAAI,OACF,MAAM,KAAK,IAAI;OAEf,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC;CAE/B;CAEA,KAAK,MAAM,SAAS,OAAO,OAAO,GAAG;EACnC,MAAM,MACH,GAAG,OAAO,EAAE,YAAY,MAAM,EAAE,YAAY,OAAO,EAAE,cAAc,MAAM,EAAE,cAAc,EAC5F;EACA,MAAM,SAAS,MAAM,UAAU;GAC7B,IAAI,QAAQ,OACV,cAAc,KAAK,IAAI;QAEvB,MAAM,KAAK,IAAI;EAEnB,CAAC;CACH;CAEA,OAAO;EAAE;EAAe;CAAM;AAChC;AAEA,MAAa,iCACX,YAAgC;CAC9B,eAAe,CAAC;CAChB,OAAO,CAAC;CACR,iBAAiB;CACjB,OAAO;AACT,CAAC;AAEH,MAAa,qBAAqB,yBAAyB;AAC3D,MAAa,oBAAoB,QAA4B,uBAAuB,SAAS,KAAK;AAElG,SAAgB,yBACd,OACA,QACA;CACA,MAAM,QAAQ,MAAM,SAAS;CAC7B,MAAM,gBAAgB,OAAO,CAAC,GAAG,MAAM,eAAe,GAAG,MAAM,KAAK,CAAC;CAErE,KAAK,MAAM,QAAQ,eACjB,IAAI,KAAK,eAAe,KAAA,GAAW;EACjC,KAAK,aAAa;EAClB,wBAAwB;CAC1B;CAGF,MAAM,UAAU,4BAA4B,eAAe,MAAM,iBAAiB,MAAM,KAAK;CAE7F,MAAM,SAAS;EACb,eAAe,QAAQ;EACvB,OAAO,QAAQ;EACf,OAAO,MAAM;EACb,iBAAiB,MAAM;CACzB,CAAC;AACH;AAEA,SAAgB,iBACd,cACA,QAA4B,oBAC5B;CACA,MAAM,KAAK,aAAa,MAAM,SAAS;CAEvC,yBAAyB,QAAQ,kBAAkB;EACjD,IAAI,aAAa,MAAM,cAAc,MAAM,MAAM,EAAE,OAAO,aAAa,EAAE,GACvE,OAAO;EAGT,OAAO,CAAC,GAAG,eAAe;GAAE,GAAG;GAAc;EAAG,CAAC;CACnD,CAAC;CAED,OAAO;AACT;AAEA,SAAgB,iBAAiB,IAAY,QAA4B,oBAAoB;CAC3F,yBAAyB,QAAQ,kBAC/B,cAAc,QAAQ,iBAAiB;EACrC,IAAI,aAAa,OAAO,IAAI;GAC1B,aAAa,UAAU,YAAY;GACnC,OAAO;EACT;EAEA,OAAO;CACT,CAAC,CACH;CAEA,OAAO;AACT;AAEA,SAAgB,mBACd,cACA,QAA4B,oBAC5B;CACA,yBAAyB,QAAQ,kBAC/B,cAAc,KAAK,SAAS;EAC1B,IAAI,KAAK,OAAO,aAAa,IAC3B,OAAO;GAAE,GAAG;GAAM,GAAG;EAAa;EAGpC,OAAO;CACT,CAAC,CACH;CAEA,OAAO,aAAa;AACtB;AAEA,SAAgB,mBAAmB,QAA4B,oBAAoB;CACjF,yBAAyB,aAAa,CAAC,CAAC;AAC1C;AAEA,SAAgB,wBAAwB,QAA4B,oBAAoB;CACtF,MAAM,EAAE,iBAAiB,UAAU,MAAM,SAAS;CAClD,yBACE,QACC,kBACC,4BAA4B,eAAe,iBAAiB,KAAK,CAAC,CAAC,aACvE;AACF;AAEA,MAAa,gBAAgB;CAC3B,MAAM;CACN,MAAM;CACN,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,aAAa;AACf"}
+{"version":3,"file":"notifications.store.mjs","names":[],"sources":["../src/notifications.store.ts"],"sourcesContent":["import { NotificationProps } from '@mantine/core';\nimport { randomId } from '@mantine/hooks';\nimport { createStore, MantineStore, useStore } from '@mantine/store';\n\nexport type NotificationPosition =\n  | 'top-left'\n  | 'top-right'\n  | 'top-center'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'bottom-center';\n\nexport interface NotificationData\n  extends Omit<NotificationProps, 'onClose'>, Record<`data-${string}`, any> {\n  /** Notification id, can be used to close or update notification */\n  id?: string;\n\n  /** Position of the notification, if not set, the position is determined based on `position` prop on Notifications component */\n  position?: NotificationPosition;\n\n  /** Notification message, required for all notifications */\n  message: React.ReactNode;\n\n  /** Display priority. Higher numbers are shown before lower ones when the number of\n   *  active notifications exceeds `limit`. Notifications with equal priority keep insertion\n   *  order (FIFO). @default 0 */\n  priority?: number;\n\n  /** Determines whether notification should be closed automatically,\n   *  number is auto close timeout in ms, overrides `autoClose` from `Notifications`\n   * */\n  autoClose?: boolean | number;\n\n  /** Determines whether notification can be closed with close button, drag or horizontal scroll swipe, `true` by default */\n  allowClose?: boolean;\n\n  /** Called when notification closes */\n  onClose?: (props: NotificationData) => void;\n\n  /** Called when notification opens */\n  onOpen?: (props: NotificationData) => void;\n\n  /** Custom render function that replaces the default notification, overrides `renderNotification` from `Notifications`. Set to `null` to use default rendering when a global `renderNotification` is set. */\n  renderNotification?: ((notification: NotificationData) => React.ReactNode) | null;\n}\n\nexport interface NotificationsState {\n  notifications: NotificationData[];\n  queue: NotificationData[];\n  defaultPosition: NotificationPosition;\n  limit: number;\n}\n\nexport type NotificationsStore = MantineStore<NotificationsState>;\n\nexport interface SequencedNotificationData extends NotificationData {\n  __sequence?: number;\n}\n\nlet notificationSequence = 0;\n\nfunction getDistributedNotifications(\n  data: SequencedNotificationData[],\n  defaultPosition: NotificationPosition,\n  limit: number\n) {\n  const queue: NotificationData[] = [];\n  const notifications: NotificationData[] = [];\n  const groups = new Map<string, SequencedNotificationData[]>();\n\n  for (const item of data) {\n    const position = item.position || defaultPosition;\n    const group = groups.get(position);\n    if (group) {\n      group.push(item);\n    } else {\n      groups.set(position, [item]);\n    }\n  }\n\n  for (const group of groups.values()) {\n    group.sort(\n      (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (a.__sequence ?? 0) - (b.__sequence ?? 0)\n    );\n    group.forEach((item, index) => {\n      if (index < limit) {\n        notifications.push(item);\n      } else {\n        queue.push(item);\n      }\n    });\n  }\n\n  return { notifications, queue };\n}\n\nexport const createNotificationsStore = () =>\n  createStore<NotificationsState>({\n    notifications: [],\n    queue: [],\n    defaultPosition: 'bottom-right',\n    limit: 5,\n  });\n\nexport const notificationsStore = createNotificationsStore();\nexport const useNotifications = (store: NotificationsStore = notificationsStore) => useStore(store);\n\nexport function updateNotificationsState(\n  store: NotificationsStore,\n  update: (notifications: NotificationData[]) => NotificationData[]\n) {\n  const state = store.getState();\n  const notifications = update([...state.notifications, ...state.queue]);\n\n  for (const item of notifications as SequencedNotificationData[]) {\n    if (item.__sequence === undefined) {\n      item.__sequence = notificationSequence;\n      notificationSequence += 1;\n    }\n  }\n\n  const updated = getDistributedNotifications(notifications, state.defaultPosition, state.limit);\n\n  store.setState({\n    notifications: updated.notifications,\n    queue: updated.queue,\n    limit: state.limit,\n    defaultPosition: state.defaultPosition,\n  });\n}\n\nexport function showNotification(\n  notification: NotificationData,\n  store: NotificationsStore = notificationsStore\n) {\n  const id = notification.id || randomId();\n\n  updateNotificationsState(store, (notifications) => {\n    if (notification.id && notifications.some((n) => n.id === notification.id)) {\n      return notifications;\n    }\n\n    return [...notifications, { ...notification, id }];\n  });\n\n  return id;\n}\n\nexport function hideNotification(id: string, store: NotificationsStore = notificationsStore) {\n  updateNotificationsState(store, (notifications) =>\n    notifications.filter((notification) => {\n      if (notification.id === id) {\n        notification.onClose?.(notification);\n        return false;\n      }\n\n      return true;\n    })\n  );\n\n  return id;\n}\n\nexport function updateNotification(\n  notification: NotificationData,\n  store: NotificationsStore = notificationsStore\n) {\n  updateNotificationsState(store, (notifications) =>\n    notifications.map((item) => {\n      if (item.id === notification.id) {\n        return { ...item, ...notification };\n      }\n\n      return item;\n    })\n  );\n\n  return notification.id;\n}\n\nexport function cleanNotifications(store: NotificationsStore = notificationsStore) {\n  updateNotificationsState(store, () => []);\n}\n\nexport function cleanNotificationsQueue(store: NotificationsStore = notificationsStore) {\n  const { defaultPosition, limit } = store.getState();\n  updateNotificationsState(\n    store,\n    (notifications) =>\n      getDistributedNotifications(notifications, defaultPosition, limit).notifications\n  );\n}\n\nexport const notifications = {\n  show: showNotification,\n  hide: hideNotification,\n  update: updateNotification,\n  clean: cleanNotifications,\n  cleanQueue: cleanNotificationsQueue,\n  updateState: updateNotificationsState,\n} as const;\n"],"mappings":";;;;AA2DA,IAAI,uBAAuB;AAE3B,SAAS,4BACP,MACA,iBACA,OACA;CACA,MAAM,QAA4B,CAAC;CACnC,MAAM,gBAAoC,CAAC;CAC3C,MAAM,yBAAS,IAAI,IAAyC;CAE5D,KAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,WAAW,KAAK,YAAY;EAClC,MAAM,QAAQ,OAAO,IAAI,QAAQ;EACjC,IAAI,OACF,MAAM,KAAK,IAAI;OAEf,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC;CAE/B;CAEA,KAAK,MAAM,SAAS,OAAO,OAAO,GAAG;EACnC,MAAM,MACH,GAAG,OAAO,EAAE,YAAY,MAAM,EAAE,YAAY,OAAO,EAAE,cAAc,MAAM,EAAE,cAAc,EAC5F;EACA,MAAM,SAAS,MAAM,UAAU;GAC7B,IAAI,QAAQ,OACV,cAAc,KAAK,IAAI;QAEvB,MAAM,KAAK,IAAI;EAEnB,CAAC;CACH;CAEA,OAAO;EAAE;EAAe;CAAM;AAChC;AAEA,MAAa,iCACX,YAAgC;CAC9B,eAAe,CAAC;CAChB,OAAO,CAAC;CACR,iBAAiB;CACjB,OAAO;AACT,CAAC;AAEH,MAAa,qBAAqB,yBAAyB;AAC3D,MAAa,oBAAoB,QAA4B,uBAAuB,SAAS,KAAK;AAElG,SAAgB,yBACd,OACA,QACA;CACA,MAAM,QAAQ,MAAM,SAAS;CAC7B,MAAM,gBAAgB,OAAO,CAAC,GAAG,MAAM,eAAe,GAAG,MAAM,KAAK,CAAC;CAErE,KAAK,MAAM,QAAQ,eACjB,IAAI,KAAK,eAAe,KAAA,GAAW;EACjC,KAAK,aAAa;EAClB,wBAAwB;CAC1B;CAGF,MAAM,UAAU,4BAA4B,eAAe,MAAM,iBAAiB,MAAM,KAAK;CAE7F,MAAM,SAAS;EACb,eAAe,QAAQ;EACvB,OAAO,QAAQ;EACf,OAAO,MAAM;EACb,iBAAiB,MAAM;CACzB,CAAC;AACH;AAEA,SAAgB,iBACd,cACA,QAA4B,oBAC5B;CACA,MAAM,KAAK,aAAa,MAAM,SAAS;CAEvC,yBAAyB,QAAQ,kBAAkB;EACjD,IAAI,aAAa,MAAM,cAAc,MAAM,MAAM,EAAE,OAAO,aAAa,EAAE,GACvE,OAAO;EAGT,OAAO,CAAC,GAAG,eAAe;GAAE,GAAG;GAAc;EAAG,CAAC;CACnD,CAAC;CAED,OAAO;AACT;AAEA,SAAgB,iBAAiB,IAAY,QAA4B,oBAAoB;CAC3F,yBAAyB,QAAQ,kBAC/B,cAAc,QAAQ,iBAAiB;EACrC,IAAI,aAAa,OAAO,IAAI;GAC1B,aAAa,UAAU,YAAY;GACnC,OAAO;EACT;EAEA,OAAO;CACT,CAAC,CACH;CAEA,OAAO;AACT;AAEA,SAAgB,mBACd,cACA,QAA4B,oBAC5B;CACA,yBAAyB,QAAQ,kBAC/B,cAAc,KAAK,SAAS;EAC1B,IAAI,KAAK,OAAO,aAAa,IAC3B,OAAO;GAAE,GAAG;GAAM,GAAG;EAAa;EAGpC,OAAO;CACT,CAAC,CACH;CAEA,OAAO,aAAa;AACtB;AAEA,SAAgB,mBAAmB,QAA4B,oBAAoB;CACjF,yBAAyB,aAAa,CAAC,CAAC;AAC1C;AAEA,SAAgB,wBAAwB,QAA4B,oBAAoB;CACtF,MAAM,EAAE,iBAAiB,UAAU,MAAM,SAAS;CAClD,yBACE,QACC,kBACC,4BAA4B,eAAe,iBAAiB,KAAK,CAAC,CAAC,aACvE;AACF;AAEA,MAAa,gBAAgB;CAC3B,MAAM;CACN,MAAM;CACN,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,aAAa;AACf"}

package/lib/NotificationContainer.d.ts

@@ -10,9 +10,18 @@ interface NotificationContainerProps extends NotificationProps {
     paused: boolean;
     onHoverStart?: () => void;
     onHoverEnd?: () => void;
+    onExpandRequest?: () => void;
     ref?: React.Ref<HTMLDivElement>;
+    renderNotification?: ((notification: NotificationData) => React.ReactNode) | null;
+    layout?: 'default' | 'stacked';
+    stackIndex?: number;
+    stackSize?: number;
+    stackPosition?: string;
+    stackExpanded?: boolean;
+    stackExpandedOffset?: number;
+    transitionState?: string;
 }
-export declare function NotificationContainer({ data, onHide, autoClose, transitionDuration, allowDragDismiss, allowScrollDismiss, paused, onHoverStart, onHoverEnd, ref, style, ...others }: NotificationContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationContainer({ data, onHide, autoClose, transitionDuration, allowDragDismiss, allowScrollDismiss, paused, onHoverStart, onHoverEnd, onExpandRequest, ref, style, renderNotification, layout, stackIndex, stackSize, stackPosition, stackExpanded, stackExpandedOffset, transitionState, ...others }: NotificationContainerProps): import("react").JSX.Element;
 export declare namespace NotificationContainer {
     var displayName: string;
 }

package/lib/Notifications.d.ts

@@ -1,5 +1,5 @@
 import { BasePortalProps, BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
-import { NotificationPosition, notifications, NotificationsStore } from './notifications.store';
+import { NotificationData, NotificationPosition, notifications, NotificationsStore } from './notifications.store';
 export type NotificationsStylesNames = 'root' | 'notification';
 export type NotificationsCssVariables = {
     root: '--notifications-z-index' | '--notifications-container-width';
@@ -31,6 +31,10 @@ export interface NotificationsProps extends BoxProps, StylesApiProps<Notificatio
     withinPortal?: boolean;
     /** Determines which notifications should pause auto close on hover, `'all'` – pauses auto close for all notifications when any notification is hovered, `'notification'` – pauses auto close only for the hovered notification @default 'all' */
     pauseResetOnHover?: 'all' | 'notification';
+    /** Custom render function that replaces the default notification, can be overridden per notification */
+    renderNotification?: (notification: NotificationData) => React.ReactNode;
+    /** Controls how notifications are positioned in the stack, `'default'` – standard vertical list, `'stacked'` – only first notification is fully visible, rest are stacked behind @default 'default' */
+    layout?: 'default' | 'stacked';
 }
 export type NotificationsFactory = Factory<{
     props: NotificationsProps;

package/lib/notifications.store.d.ts

@@ -22,6 +22,8 @@ export interface NotificationData extends Omit<NotificationProps, 'onClose'>, Re
     onClose?: (props: NotificationData) => void;
     /** Called when notification opens */
     onOpen?: (props: NotificationData) => void;
+    /** Custom render function that replaces the default notification, overrides `renderNotification` from `Notifications`. Set to `null` to use default rendering when a global `renderNotification` is set. */
+    renderNotification?: ((notification: NotificationData) => React.ReactNode) | null;
 }
 export interface NotificationsState {
     notifications: NotificationData[];
@@ -30,6 +32,9 @@ export interface NotificationsState {
     limit: number;
 }
 export type NotificationsStore = MantineStore<NotificationsState>;
+export interface SequencedNotificationData extends NotificationData {
+    __sequence?: number;
+}
 export declare const createNotificationsStore: () => MantineStore<NotificationsState>;
 export declare const notificationsStore: MantineStore<NotificationsState>;
 export declare const useNotifications: (store?: NotificationsStore) => NotificationsState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/notifications",
-  "version": "9.5.2",
+  "version": "9.6.0",
   "description": "Mantine notifications system",
   "homepage": "https://mantine.dev",
   "license": "MIT",
@@ -44,20 +44,20 @@
     "directory": "packages/@mantine/notifications"
   },
   "peerDependencies": {
-    "@mantine/core": "9.5.2",
-    "@mantine/hooks": "9.5.2",
+    "@mantine/core": "9.6.0",
+    "@mantine/hooks": "9.6.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@mantine/store": "9.5.2",
+    "@mantine/store": "9.6.0",
     "react-transition-group": "4.4.5"
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
     "@mantine/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.2.7",
-    "react-dom": "19.2.7"
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
   }
 }

package/styles.css

@@ -40,3 +40,11 @@
 .m_5ed0edd0 + .m_5ed0edd0 {
     margin-top: var(--mantine-spacing-md);
   }
+
+:where([data-layout='stacked']) .m_5ed0edd0 {
+    margin-top: 0;
+  }
+
+.m_b37d9ac7:where([data-layout='stacked']) > * {
+    display: grid;
+  }

package/styles.layer.css

@@ -40,4 +40,12 @@
 .m_5ed0edd0 + .m_5ed0edd0 {
     margin-top: var(--mantine-spacing-md);
   }
+
+:where([data-layout='stacked']) .m_5ed0edd0 {
+    margin-top: 0;
+  }
+
+.m_b37d9ac7:where([data-layout='stacked']) > * {
+    display: grid;
+  }
 }