@mantine/notifications 9.5.1 → 9.6.0

package/cjs/Notifications.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Notifications.cjs","names":["_Transition","notificationsStore","useNotifications","getGroupedNotifications","positions","NotificationContainer","hideNotification","getNotificationStateStyles","OptionalPortal","Box","TransitionGroup","RemoveScroll","classes","notifications"],"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.cjs","names":["_Transition","getDefaultZIndex","notificationsStore","createVarsResolver","rem","factory","useProps","useMantineTheme","useNotifications","useForceUpdate","useReducedMotion","useRef","useState","useCallback","positions","getGroupedNotifications","useStyles","NotificationContainer","hideNotification","getNotificationStateStyles","OptionalPortal","Box","TransitionGroup","RemoveScroll","classes","notifications"],"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/cjs/Notifications.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Notifications.module.cjs","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.cjs","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/cjs/notifications.store.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"notifications.store.cjs","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,kCAAA,GAAA,eAAA,YAAA,CACqB;CAC9B,eAAe,CAAC;CAChB,OAAO,CAAC;CACR,iBAAiB;CACjB,OAAO;AACT,CAAC;AAEH,MAAa,qBAAqB,yBAAyB;AAC3D,MAAa,oBAAoB,QAA4B,wBAAA,GAAA,eAAA,SAAA,CAAgC,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,OAAA,GAAA,eAAA,SAAA,CAAe;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.cjs","names":["createStore","useStore","randomId"],"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,kCAAA,GACXA,eAAAA,YAAAA,CAAgC;CAC9B,eAAe,CAAC;CAChB,OAAO,CAAC;CACR,iBAAiB;CACjB,OAAO;AACT,CAAC;AAEH,MAAa,qBAAqB,yBAAyB;AAC3D,MAAa,oBAAoB,QAA4B,wBAAA,GAAuBC,eAAAA,SAAAA,CAAS,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,OAAA,GAAMC,eAAAA,SAAAA,CAAS;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/esm/NotificationContainer.mjs

@@ -2,25 +2,77 @@
 import { getAutoClose } from "./get-auto-close/get-auto-close.mjs";
 import { useDrag, useMergedRef } from "@mantine/hooks";
 import { useEffect, useEffectEvent, useRef, useState } from "react";
-import { Notification, getStyleObject, useMantineTheme } from "@mantine/core";
+import { Notification, extractStyleProps, getStyleObject, useMantineTheme } from "@mantine/core";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/notifications/src/NotificationContainer.tsx
 const SCROLL_DISMISS_RESET_TIMEOUT = 120;
-function NotificationContainer({ data, onHide, autoClose, transitionDuration, allowDragDismiss, allowScrollDismiss, paused, onHoverStart, onHoverEnd, ref, style, ...others }) {
+const MAX_VISIBLE_STACK_DEPTH = 4;
+/**
+* Props that belong to the default `Notification` rendering or to the Styles API and must
+* not reach the plain `div` used for custom rendering. Everything else is a valid div prop
+* and is forwarded – an allow list would silently drop supported props like `onClick`,
+* `dir`, `lang` or `hidden`.
+*/
+const NON_DOM_PROPS = /* @__PURE__ */ new Set([
+	"classNames",
+	"styles",
+	"unstyled",
+	"vars",
+	"attributes",
+	"variant",
+	"color",
+	"radius",
+	"icon",
+	"title",
+	"loading",
+	"withBorder",
+	"withCloseButton",
+	"closeButtonProps",
+	"className",
+	"style",
+	"role",
+	"ref",
+	"children",
+	"mod"
+]);
+function pickDomProps(props) {
+	const { rest } = extractStyleProps(props);
+	return Object.fromEntries(Object.entries(rest).filter(([key, value]) => !NON_DOM_PROPS.has(key) && value !== void 0));
+}
+function NotificationContainer({ data, onHide, autoClose, transitionDuration, allowDragDismiss, allowScrollDismiss, paused, onHoverStart, onHoverEnd, onExpandRequest, ref, style, renderNotification, layout, stackIndex, stackSize, stackPosition, stackExpanded, stackExpandedOffset, transitionState, ...others }) {
 	const [offset, setOffset] = useState(0);
 	const [dismissed, setDismissed] = useState(false);
 	const [dismissDirection, setDismissDirection] = useState(1);
 	const [scrollDismissActive, setScrollDismissActive] = useState(false);
 	const theme = useMantineTheme();
-	const { autoClose: _autoClose, message, allowClose, position: _position, style: dataStyle, withCloseButton, onOpen: _onOpen, priority: _priority, __sequence: _sequence, ...notificationProps } = data;
+	const { autoClose: _autoClose, message, allowClose, position: _position, style: dataStyle, withCloseButton, renderNotification: _renderNotification, onOpen: _onOpen, priority: _priority, __sequence: _sequence, ...notificationProps } = data;
 	const autoCloseDuration = getAutoClose(autoClose, data.autoClose);
 	const autoCloseTimeout = useRef(-1);
 	const hideTimeout = useRef(-1);
 	const scrollDismissTimeout = useRef(-1);
 	const notificationRef = useRef(null);
 	const hoveredRef = useRef(false);
+	const focusedRef = useRef(false);
+	const contributedActiveRef = useRef(false);
 	const offsetRef = useRef(0);
 	const isCloseDisabled = allowClose === false;
+	const syncActive = () => {
+		const shouldContribute = hoveredRef.current || focusedRef.current;
+		if (shouldContribute && !contributedActiveRef.current) {
+			contributedActiveRef.current = true;
+			onHoverStart?.();
+		} else if (!shouldContribute && contributedActiveRef.current) {
+			contributedActiveRef.current = false;
+			onHoverEnd?.();
+		}
+	};
+	const releaseActive = useEffectEvent(() => {
+		if (contributedActiveRef.current) {
+			contributedActiveRef.current = false;
+			onHoverEnd?.();
+		}
+	});
+	useEffect(() => () => releaseActive(), []);
 	const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);
 	const cancelHide = () => window.clearTimeout(hideTimeout.current);
 	const cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout.current);
@@ -34,8 +86,12 @@ function NotificationContainer({ data, onHide, autoClose, transitionDuration, al
 		cancelHide();
 		cancelScrollDismissReset();
 	};
+	const pausedRef = useRef(paused);
+	useEffect(() => {
+		pausedRef.current = paused;
+	});
 	const handleAutoClose = () => {
-		if (dismissed || active || paused || hoveredRef.current || typeof autoCloseDuration !== "number") return;
+		if (dismissed || active || hoveredRef.current || focusedRef.current || pausedRef.current || typeof autoCloseDuration !== "number") return;
 		cancelAutoClose();
 		autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);
 	};
@@ -102,22 +158,47 @@ function NotificationContainer({ data, onHide, autoClose, transitionDuration, al
 	const baseOpacity = typeof baseStyle.opacity === "number" ? baseStyle.opacity : 1;
 	const swipeOpacity = dismissed ? 0 : 1 - Math.min(Math.abs(offset) / 200, 1) * .6;
 	const resolvedTransitionDuration = baseStyle.transitionDuration ?? `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`;
+	const isStackedLayout = layout === "stacked";
+	const isStacked = isStackedLayout && stackIndex !== void 0 && stackIndex > 0;
+	const isCollapsed = isStacked && !stackExpanded;
+	const isExiting = transitionState === "exiting" || transitionState === "exited";
+	const stackDirection = stackPosition?.startsWith("top") ? 1 : -1;
+	const stackDepth = Math.min(stackIndex ?? 0, MAX_VISIBLE_STACK_DEPTH);
+	const collapsedOffset = isCollapsed ? stackDepth * 10 * stackDirection : 0;
+	const staggerDelay = isStackedLayout ? (stackIndex || 0) * 30 : 0;
+	const isDragging = active || scrollDismissActive;
+	const getStackedTransform = () => {
+		if (!isStackedLayout) return "var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)";
+		if (isExiting) return `translateY(${stackExpanded ? stackExpandedOffset || 0 : collapsedOffset}px) var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)`;
+		if (stackExpanded) return `translateY(${stackExpandedOffset || 0}px) translate3d(var(--notifications-swipe-offset), 0, 0)`;
+		if (isStacked) return `scale(${1 - stackDepth * .03}) translateY(${collapsedOffset}px)`;
+		return "var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)";
+	};
 	const notificationStyle = {
 		...baseStyle,
+		...isStackedLayout ? { maxHeight: void 0 } : {},
 		["--notifications-state-transform"]: typeof baseStyle.transform === "string" ? baseStyle.transform : "translateX(0)",
 		["--notifications-state-opacity"]: String(baseOpacity),
 		["--notifications-swipe-offset"]: `${offset}px`,
 		["--notifications-swipe-opacity"]: String(swipeOpacity),
-		transform: "var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)",
+		transform: getStackedTransform(),
 		opacity: "calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))",
-		transitionDuration: active || scrollDismissActive ? "0ms, 0ms, 0ms" : resolvedTransitionDuration,
+		transitionDuration: isDragging ? "0ms, 0ms, 0ms" : resolvedTransitionDuration,
 		cursor: "default",
-		touchAction: "pan-y"
+		touchAction: "pan-y",
+		...isStackedLayout ? {
+			gridArea: "1 / 1",
+			zIndex: (stackSize || 5) - (stackIndex ?? 0),
+			pointerEvents: isCollapsed ? "none" : void 0,
+			alignSelf: stackDirection === 1 ? "start" : "end",
+			transition: isDragging ? "none" : `transform ${transitionDuration}ms cubic-bezier(.51,.3,0,1.21), opacity ${transitionDuration}ms ease`,
+			transitionDelay: isDragging || isExiting ? "0ms" : `${staggerDelay}ms`
+		} : {}
 	};
 	const handleMouseEnter = () => {
 		hoveredRef.current = true;
 		cancelAutoClose();
-		onHoverStart?.();
+		syncActive();
 	};
 	const handleMouseLeave = () => {
 		hoveredRef.current = false;
@@ -125,7 +206,20 @@ function NotificationContainer({ data, onHide, autoClose, transitionDuration, al
 			resetSwipe();
 			handleAutoClose();
 		}
-		onHoverEnd?.();
+		syncActive();
+	};
+	const handleFocusCapture = isStackedLayout ? () => {
+		focusedRef.current = true;
+		cancelAutoClose();
+		syncActive();
+	} : void 0;
+	const handleBlurCapture = isStackedLayout ? () => {
+		focusedRef.current = false;
+		if (!scrollDismissActive) handleAutoClose();
+		syncActive();
+	} : void 0;
+	const handlePointerDownCapture = (event) => {
+		if (isStackedLayout && (event.pointerType === "touch" || event.pointerType === "pen")) onExpandRequest?.();
 	};
 	const handleWheel = useEffectEvent((event) => {
 		if (dismissed || active) return;
@@ -189,15 +283,52 @@ function NotificationContainer({ data, onHide, autoClose, transitionDuration, al
 		else handleAutoClose();
 		return cancelAutoClose;
 	}, [paused]);
+	const consumerProps = {
+		...others,
+		...notificationProps
+	};
+	const interactionProps = {
+		style: notificationStyle,
+		inert: isCollapsed,
+		onMouseEnter: (event) => {
+			consumerProps.onMouseEnter?.(event);
+			handleMouseEnter();
+		},
+		onMouseLeave: (event) => {
+			consumerProps.onMouseLeave?.(event);
+			handleMouseLeave();
+		},
+		onFocusCapture: (event) => {
+			consumerProps.onFocusCapture?.(event);
+			handleFocusCapture?.();
+		},
+		onBlurCapture: (event) => {
+			consumerProps.onBlurCapture?.(event);
+			handleBlurCapture?.();
+		},
+		onPointerDownCapture: (event) => {
+			consumerProps.onPointerDownCapture?.(event);
+			handlePointerDownCapture(event);
+		}
+	};
+	if (renderNotification) {
+		const classNames = [others.className, notificationProps.className].filter(Boolean).join(" ");
+		return /* @__PURE__ */ jsx("div", {
+			ref: mergedRef,
+			role: notificationProps.role || others.role || "alert",
+			...pickDomProps(consumerProps),
+			className: classNames || void 0,
+			...interactionProps,
+			children: renderNotification(data)
+		});
+	}
 	return /* @__PURE__ */ jsx(Notification, {
 		ref: mergedRef,
 		...others,
-		style: notificationStyle,
 		...notificationProps,
+		...interactionProps,
 		withCloseButton: isCloseDisabled ? false : withCloseButton,
 		onClose: handleHide,
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
 		children: message
 	});
 }

package/esm/NotificationContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationContainer.mjs","names":[],"sources":["../src/NotificationContainer.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { getStyleObject, Notification, NotificationProps, useMantineTheme } from '@mantine/core';\nimport { useDrag, useMergedRef } from '@mantine/hooks';\nimport { getAutoClose } from './get-auto-close/get-auto-close';\nimport { NotificationData } from './notifications.store';\n\nconst SCROLL_DISMISS_RESET_TIMEOUT = 120;\n\ninterface NotificationContainerProps extends NotificationProps {\n  data: NotificationData;\n  onHide: (id: string) => void;\n  autoClose: number | false;\n  transitionDuration: number;\n  allowDragDismiss: boolean;\n  allowScrollDismiss: boolean;\n  paused: boolean;\n  onHoverStart?: () => void;\n  onHoverEnd?: () => void;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nexport function NotificationContainer({\n  data,\n  onHide,\n  autoClose,\n  transitionDuration,\n  allowDragDismiss,\n  allowScrollDismiss,\n  paused,\n  onHoverStart,\n  onHoverEnd,\n  ref,\n  style,\n  ...others\n}: NotificationContainerProps) {\n  const [offset, setOffset] = useState(0);\n  const [dismissed, setDismissed] = useState(false);\n  const [dismissDirection, setDismissDirection] = useState<-1 | 1>(1);\n  const [scrollDismissActive, setScrollDismissActive] = useState(false);\n  const theme = useMantineTheme();\n  const {\n    autoClose: _autoClose,\n    message,\n    allowClose,\n    position: _position,\n    style: dataStyle,\n    withCloseButton,\n    onOpen: _onOpen,\n    priority: _priority,\n    __sequence: _sequence,\n    ...notificationProps\n  } = data as NotificationData & { __sequence?: number };\n  const autoCloseDuration = getAutoClose(autoClose, data.autoClose);\n  const autoCloseTimeout = useRef<number>(-1);\n  const hideTimeout = useRef<number>(-1);\n  const scrollDismissTimeout = useRef<number>(-1);\n  const notificationRef = useRef<HTMLDivElement>(null);\n  const hoveredRef = useRef(false);\n  const offsetRef = useRef(0);\n  const isCloseDisabled = allowClose === false;\n\n  const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);\n  const cancelHide = () => window.clearTimeout(hideTimeout.current);\n  const cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout.current);\n\n  const setSwipeOffset = (value: number) => {\n    offsetRef.current = value;\n    setOffset(value);\n  };\n\n  const handleHide = () => {\n    onHide(data.id!);\n    cancelAutoClose();\n    cancelHide();\n    cancelScrollDismissReset();\n  };\n\n  const handleAutoClose = () => {\n    if (\n      dismissed ||\n      active ||\n      paused ||\n      hoveredRef.current ||\n      typeof autoCloseDuration !== 'number'\n    ) {\n      return;\n    }\n\n    cancelAutoClose();\n    autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);\n  };\n\n  const getExitOffset = (direction: -1 | 1) => {\n    const width = notificationRef.current?.offsetWidth ?? 440;\n    return direction * (width + 40);\n  };\n\n  const shouldDismiss = (movement: number, velocity: number) => {\n    const width = notificationRef.current?.offsetWidth ?? 440;\n    return Math.abs(movement) > width * 0.35 || velocity > 0.5;\n  };\n\n  const resetSwipe = () => {\n    cancelScrollDismissReset();\n    setScrollDismissActive(false);\n    setSwipeOffset(0);\n  };\n\n  const dismissNotification = (direction: -1 | 1) => {\n    setDismissDirection(direction);\n    setDismissed(true);\n    setScrollDismissActive(false);\n    setSwipeOffset(getExitOffset(direction));\n    cancelAutoClose();\n    cancelHide();\n    cancelScrollDismissReset();\n    hideTimeout.current = window.setTimeout(handleHide, transitionDuration);\n  };\n\n  const scheduleScrollDismissReset = () => {\n    cancelScrollDismissReset();\n    scrollDismissTimeout.current = window.setTimeout(() => {\n      setScrollDismissActive(false);\n      setSwipeOffset(0);\n      handleAutoClose();\n    }, SCROLL_DISMISS_RESET_TIMEOUT);\n  };\n\n  const { ref: dragRef, active } = useDrag<HTMLDivElement>(\n    (state) => {\n      if (dismissed) {\n        return;\n      }\n\n      if (state.first) {\n        cancelAutoClose();\n      }\n\n      if (state.last) {\n        if (state.tap || state.canceled) {\n          setSwipeOffset(0);\n          handleAutoClose();\n          return;\n        }\n\n        const movement = state.movement[0];\n        const direction =\n          movement === 0 ? (state.direction[0] === -1 ? -1 : 1) : movement > 0 ? 1 : -1;\n\n        if (shouldDismiss(movement, state.velocity[0])) {\n          dismissNotification(direction);\n        } else {\n          setSwipeOffset(0);\n          handleAutoClose();\n        }\n      } else {\n        setSwipeOffset(state.movement[0]);\n      }\n    },\n    {\n      axis: 'x',\n      threshold: 5,\n      filterTaps: true,\n      enabled: allowDragDismiss && !isCloseDisabled && !dismissed,\n    }\n  );\n\n  const mergedRef = useMergedRef(ref, notificationRef, dragRef);\n  const resolvedStyle = getStyleObject(style, theme);\n  const resolvedDataStyle = getStyleObject(dataStyle, theme);\n  const baseStyle = { ...resolvedStyle, ...resolvedDataStyle };\n  const baseOpacity = typeof baseStyle.opacity === 'number' ? baseStyle.opacity : 1;\n  const swipeOpacity = dismissed ? 0 : 1 - Math.min(Math.abs(offset) / 200, 1) * 0.6;\n  const resolvedTransitionDuration =\n    baseStyle.transitionDuration ??\n    `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`;\n  const notificationStyle = {\n    ...baseStyle,\n    ['--notifications-state-transform' as string]:\n      typeof baseStyle.transform === 'string' ? baseStyle.transform : 'translateX(0)',\n    ['--notifications-state-opacity' as string]: String(baseOpacity),\n    ['--notifications-swipe-offset' as string]: `${offset}px`,\n    ['--notifications-swipe-opacity' as string]: String(swipeOpacity),\n    transform:\n      'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)',\n    opacity: 'calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))',\n    transitionDuration:\n      active || scrollDismissActive ? '0ms, 0ms, 0ms' : resolvedTransitionDuration,\n    cursor: 'default',\n    touchAction: 'pan-y',\n  } as React.CSSProperties;\n\n  const handleMouseEnter = () => {\n    hoveredRef.current = true;\n    cancelAutoClose();\n    onHoverStart?.();\n  };\n\n  const handleMouseLeave = () => {\n    hoveredRef.current = false;\n    if (!scrollDismissActive) {\n      resetSwipe();\n      handleAutoClose();\n    }\n    onHoverEnd?.();\n  };\n\n  const handleWheel = useEffectEvent((event: WheelEvent) => {\n    if (dismissed || active) {\n      return;\n    }\n\n    const isDocumentEvent = event.currentTarget === document;\n    if (!isDocumentEvent && !hoveredRef.current) {\n      return;\n    }\n\n    const { deltaX, deltaY } = event;\n    if (Math.abs(deltaX) <= Math.abs(deltaY) || deltaX === 0) {\n      return;\n    }\n\n    if (!allowScrollDismiss || isCloseDisabled) {\n      return;\n    }\n\n    if (!isDocumentEvent) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    cancelAutoClose();\n    setScrollDismissActive(true);\n\n    const nextOffset = offsetRef.current - deltaX;\n    const direction = nextOffset > 0 ? 1 : -1;\n\n    if (shouldDismiss(nextOffset, 0)) {\n      dismissNotification(direction);\n      return;\n    }\n\n    setSwipeOffset(nextOffset);\n    scheduleScrollDismissReset();\n  });\n\n  useEffect(() => {\n    if (!scrollDismissActive) {\n      return undefined;\n    }\n\n    document.addEventListener('wheel', handleWheel, { passive: false });\n    return () => document.removeEventListener('wheel', handleWheel, { passive: false } as any);\n  }, [scrollDismissActive]);\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (dismissed) {\n        setSwipeOffset(getExitOffset(dismissDirection));\n      }\n    };\n\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [dismissDirection, dismissed]);\n\n  useEffect(() => {\n    const node = notificationRef.current;\n    if (!node) {\n      return undefined;\n    }\n\n    node.addEventListener('wheel', handleWheel, { passive: false });\n    return () => node.removeEventListener('wheel', handleWheel, { passive: false } as any);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      cancelHide();\n      cancelScrollDismissReset();\n    };\n  }, []);\n\n  useEffect(() => {\n    data.onOpen?.(data);\n  }, []);\n\n  useEffect(() => {\n    handleAutoClose();\n    return cancelAutoClose;\n  }, [autoCloseDuration, active, dismissed]);\n\n  useEffect(() => {\n    if (paused) {\n      cancelAutoClose();\n    } else {\n      handleAutoClose();\n    }\n\n    return cancelAutoClose;\n  }, [paused]);\n\n  return (\n    <Notification\n      ref={mergedRef}\n      {...others}\n      style={notificationStyle}\n      {...notificationProps}\n      withCloseButton={isCloseDisabled ? false : withCloseButton}\n      onClose={handleHide}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {message}\n    </Notification>\n  );\n}\n\nNotificationContainer.displayName = '@mantine/notifications/NotificationContainer';\n"],"mappings":"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"}
+{"version":3,"file":"NotificationContainer.mjs","names":[],"sources":["../src/NotificationContainer.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport {\n  extractStyleProps,\n  getStyleObject,\n  Notification,\n  NotificationProps,\n  useMantineTheme,\n} from '@mantine/core';\nimport { useDrag, useMergedRef } from '@mantine/hooks';\nimport { getAutoClose } from './get-auto-close/get-auto-close';\nimport { NotificationData } from './notifications.store';\n\nconst SCROLL_DISMISS_RESET_TIMEOUT = 120;\n\ninterface NotificationContainerProps extends NotificationProps {\n  data: NotificationData;\n  onHide: (id: string) => void;\n  autoClose: number | false;\n  transitionDuration: number;\n  allowDragDismiss: boolean;\n  allowScrollDismiss: boolean;\n  paused: boolean;\n  onHoverStart?: () => void;\n  onHoverEnd?: () => void;\n  onExpandRequest?: () => void;\n  ref?: React.Ref<HTMLDivElement>;\n  renderNotification?: ((notification: NotificationData) => React.ReactNode) | null;\n  layout?: 'default' | 'stacked';\n  stackIndex?: number;\n  stackSize?: number;\n  stackPosition?: string;\n  stackExpanded?: boolean;\n  stackExpandedOffset?: number;\n  transitionState?: string;\n}\n\nconst MAX_VISIBLE_STACK_DEPTH = 4;\n\n/**\n * Props that belong to the default `Notification` rendering or to the Styles API and must\n * not reach the plain `div` used for custom rendering. Everything else is a valid div prop\n * and is forwarded – an allow list would silently drop supported props like `onClick`,\n * `dir`, `lang` or `hidden`.\n */\nconst NON_DOM_PROPS = new Set([\n  'classNames',\n  'styles',\n  'unstyled',\n  'vars',\n  'attributes',\n  'variant',\n  'color',\n  'radius',\n  'icon',\n  'title',\n  'loading',\n  'withBorder',\n  'withCloseButton',\n  'closeButtonProps',\n  'className',\n  'style',\n  'role',\n  'ref',\n  'children',\n  'mod',\n]);\n\nfunction pickDomProps(props: Record<string, any>) {\n  // Mantine style props (`mt`, `bg`, `w`, …) are valid `NotificationProps` but are not DOM\n  // attributes, so they are separated out rather than leaked onto the element.\n  const { rest } = extractStyleProps(props);\n\n  return Object.fromEntries(\n    Object.entries(rest).filter(([key, value]) => !NON_DOM_PROPS.has(key) && value !== undefined)\n  );\n}\n\nexport function NotificationContainer({\n  data,\n  onHide,\n  autoClose,\n  transitionDuration,\n  allowDragDismiss,\n  allowScrollDismiss,\n  paused,\n  onHoverStart,\n  onHoverEnd,\n  onExpandRequest,\n  ref,\n  style,\n  renderNotification,\n  layout,\n  stackIndex,\n  stackSize,\n  stackPosition,\n  stackExpanded,\n  stackExpandedOffset,\n  transitionState,\n  ...others\n}: NotificationContainerProps) {\n  const [offset, setOffset] = useState(0);\n  const [dismissed, setDismissed] = useState(false);\n  const [dismissDirection, setDismissDirection] = useState<-1 | 1>(1);\n  const [scrollDismissActive, setScrollDismissActive] = useState(false);\n  const theme = useMantineTheme();\n  const {\n    autoClose: _autoClose,\n    message,\n    allowClose,\n    position: _position,\n    style: dataStyle,\n    withCloseButton,\n    renderNotification: _renderNotification,\n    onOpen: _onOpen,\n    priority: _priority,\n    __sequence: _sequence,\n    ...notificationProps\n  } = data as NotificationData & { __sequence?: number };\n  const autoCloseDuration = getAutoClose(autoClose, data.autoClose);\n  const autoCloseTimeout = useRef<number>(-1);\n  const hideTimeout = useRef<number>(-1);\n  const scrollDismissTimeout = useRef<number>(-1);\n  const notificationRef = useRef<HTMLDivElement>(null);\n  const hoveredRef = useRef(false);\n  const focusedRef = useRef(false);\n\n  // Hover and focus both keep the notification \"active\". The contribution to the parent\n  // counter is tracked so it can be released on unmount – a notification dismissed while\n  // hovered or focused never fires `mouseleave` or `blur`, which would otherwise leave the\n  // stack expanded and auto close paused forever.\n  const contributedActiveRef = useRef(false);\n  const offsetRef = useRef(0);\n  const isCloseDisabled = allowClose === false;\n\n  const syncActive = () => {\n    const shouldContribute = hoveredRef.current || focusedRef.current;\n\n    if (shouldContribute && !contributedActiveRef.current) {\n      contributedActiveRef.current = true;\n      onHoverStart?.();\n    } else if (!shouldContribute && contributedActiveRef.current) {\n      contributedActiveRef.current = false;\n      onHoverEnd?.();\n    }\n  };\n\n  const releaseActive = useEffectEvent(() => {\n    if (contributedActiveRef.current) {\n      contributedActiveRef.current = false;\n      onHoverEnd?.();\n    }\n  });\n\n  useEffect(() => () => releaseActive(), []);\n\n  const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);\n  const cancelHide = () => window.clearTimeout(hideTimeout.current);\n  const cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout.current);\n\n  const setSwipeOffset = (value: number) => {\n    offsetRef.current = value;\n    setOffset(value);\n  };\n\n  const handleHide = () => {\n    onHide(data.id!);\n    cancelAutoClose();\n    cancelHide();\n    cancelScrollDismissReset();\n  };\n\n  // `handleAutoClose` is also called from timeouts scheduled in earlier renders, so the\n  // latest `paused` is read through a ref. Written in an effect rather than during render –\n  // this effect is declared before every effect that calls `handleAutoClose`, so it is\n  // always up to date by the time they run.\n  const pausedRef = useRef(paused);\n\n  useEffect(() => {\n    pausedRef.current = paused;\n  });\n\n  const handleAutoClose = () => {\n    if (\n      dismissed ||\n      active ||\n      hoveredRef.current ||\n      focusedRef.current ||\n      pausedRef.current ||\n      typeof autoCloseDuration !== 'number'\n    ) {\n      return;\n    }\n\n    cancelAutoClose();\n    autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);\n  };\n\n  const getExitOffset = (direction: -1 | 1) => {\n    const width = notificationRef.current?.offsetWidth ?? 440;\n    return direction * (width + 40);\n  };\n\n  const shouldDismiss = (movement: number, velocity: number) => {\n    const width = notificationRef.current?.offsetWidth ?? 440;\n    return Math.abs(movement) > width * 0.35 || velocity > 0.5;\n  };\n\n  const resetSwipe = () => {\n    cancelScrollDismissReset();\n    setScrollDismissActive(false);\n    setSwipeOffset(0);\n  };\n\n  const dismissNotification = (direction: -1 | 1) => {\n    setDismissDirection(direction);\n    setDismissed(true);\n    setScrollDismissActive(false);\n    setSwipeOffset(getExitOffset(direction));\n    cancelAutoClose();\n    cancelHide();\n    cancelScrollDismissReset();\n    hideTimeout.current = window.setTimeout(handleHide, transitionDuration);\n  };\n\n  const scheduleScrollDismissReset = () => {\n    cancelScrollDismissReset();\n    scrollDismissTimeout.current = window.setTimeout(() => {\n      setScrollDismissActive(false);\n      setSwipeOffset(0);\n      handleAutoClose();\n    }, SCROLL_DISMISS_RESET_TIMEOUT);\n  };\n\n  const { ref: dragRef, active } = useDrag<HTMLDivElement>(\n    (state) => {\n      if (dismissed) {\n        return;\n      }\n\n      if (state.first) {\n        cancelAutoClose();\n      }\n\n      if (state.last) {\n        if (state.tap || state.canceled) {\n          setSwipeOffset(0);\n          handleAutoClose();\n          return;\n        }\n\n        const movement = state.movement[0];\n        const direction =\n          movement === 0 ? (state.direction[0] === -1 ? -1 : 1) : movement > 0 ? 1 : -1;\n\n        if (shouldDismiss(movement, state.velocity[0])) {\n          dismissNotification(direction);\n        } else {\n          setSwipeOffset(0);\n          handleAutoClose();\n        }\n      } else {\n        setSwipeOffset(state.movement[0]);\n      }\n    },\n    {\n      axis: 'x',\n      threshold: 5,\n      filterTaps: true,\n      enabled: allowDragDismiss && !isCloseDisabled && !dismissed,\n    }\n  );\n\n  const mergedRef = useMergedRef(ref, notificationRef, dragRef);\n  const resolvedStyle = getStyleObject(style, theme);\n  const resolvedDataStyle = getStyleObject(dataStyle, theme);\n  const baseStyle = { ...resolvedStyle, ...resolvedDataStyle };\n  const baseOpacity = typeof baseStyle.opacity === 'number' ? baseStyle.opacity : 1;\n  const swipeOpacity = dismissed ? 0 : 1 - Math.min(Math.abs(offset) / 200, 1) * 0.6;\n  const resolvedTransitionDuration =\n    baseStyle.transitionDuration ??\n    `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`;\n\n  const isStackedLayout = layout === 'stacked';\n  const isStacked = isStackedLayout && stackIndex !== undefined && stackIndex > 0;\n  const isCollapsed = isStacked && !stackExpanded;\n  const isExiting = transitionState === 'exiting' || transitionState === 'exited';\n  const stackDirection = stackPosition?.startsWith('top') ? 1 : -1;\n\n  // Only a few layers are visible behind the front notification – without a cap the scale\n  // below reaches 0 at 34 stacked notifications and inverts beyond that, which `limit` can\n  // easily exceed.\n  const stackDepth = Math.min(stackIndex ?? 0, MAX_VISIBLE_STACK_DEPTH);\n  const collapsedOffset = isCollapsed ? stackDepth * 10 * stackDirection : 0;\n  const staggerDelay = isStackedLayout ? (stackIndex || 0) * 30 : 0;\n  const isDragging = active || scrollDismissActive;\n\n  const getStackedTransform = () => {\n    if (!isStackedLayout) {\n      return 'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)';\n    }\n\n    if (isExiting) {\n      const exitOffset = stackExpanded ? stackExpandedOffset || 0 : collapsedOffset;\n      return `translateY(${exitOffset}px) var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)`;\n    }\n\n    if (stackExpanded) {\n      return `translateY(${stackExpandedOffset || 0}px) translate3d(var(--notifications-swipe-offset), 0, 0)`;\n    }\n\n    if (isStacked) {\n      return `scale(${1 - stackDepth * 0.03}) translateY(${collapsedOffset}px)`;\n    }\n\n    return 'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)';\n  };\n\n  const notificationStyle = {\n    ...baseStyle,\n    ...(isStackedLayout ? { maxHeight: undefined } : {}),\n    ['--notifications-state-transform' as string]:\n      typeof baseStyle.transform === 'string' ? baseStyle.transform : 'translateX(0)',\n    ['--notifications-state-opacity' as string]: String(baseOpacity),\n    ['--notifications-swipe-offset' as string]: `${offset}px`,\n    ['--notifications-swipe-opacity' as string]: String(swipeOpacity),\n    transform: getStackedTransform(),\n    opacity: 'calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))',\n    transitionDuration: isDragging ? '0ms, 0ms, 0ms' : resolvedTransitionDuration,\n    cursor: 'default',\n    touchAction: 'pan-y',\n    ...(isStackedLayout\n      ? {\n          gridArea: '1 / 1' as const,\n          // `z-index` is not animatable, so it must not depend on `stackExpanded` – flipping\n          // the stack to a single layer on hover repaints every notification in front of the\n          // first one a frame before the reveal transform has moved anything.\n          zIndex: (stackSize || 5) - (stackIndex ?? 0),\n          pointerEvents: isCollapsed ? ('none' as const) : undefined,\n          alignSelf: stackDirection === 1 ? ('start' as const) : ('end' as const),\n          transition: isDragging\n            ? 'none'\n            : `transform ${transitionDuration}ms cubic-bezier(.51,.3,0,1.21), opacity ${transitionDuration}ms ease`,\n          transitionDelay: isDragging || isExiting ? '0ms' : `${staggerDelay}ms`,\n        }\n      : {}),\n  } as React.CSSProperties;\n\n  const handleMouseEnter = () => {\n    hoveredRef.current = true;\n    cancelAutoClose();\n    syncActive();\n  };\n\n  const handleMouseLeave = () => {\n    hoveredRef.current = false;\n    if (!scrollDismissActive) {\n      resetSwipe();\n      handleAutoClose();\n    }\n    syncActive();\n  };\n\n  // Keyboard users never trigger the hover handlers, and touch devices have no hover at\n  // all – both need a way to expand a collapsed stack. Scoped to the stacked layout: its\n  // only purpose is keeping the stack expanded, and applying it everywhere would silently\n  // change the default layout, where a notification that merely contains the focused\n  // element (an action button the user just clicked) would stop auto closing.\n  const handleFocusCapture = isStackedLayout\n    ? () => {\n        focusedRef.current = true;\n        cancelAutoClose();\n        syncActive();\n      }\n    : undefined;\n\n  const handleBlurCapture = isStackedLayout\n    ? () => {\n        focusedRef.current = false;\n        if (!scrollDismissActive) {\n          handleAutoClose();\n        }\n        syncActive();\n      }\n    : undefined;\n\n  const handlePointerDownCapture = (event: React.PointerEvent) => {\n    // Explicitly opt in for touch and pen: hover already covers the mouse, and an unknown\n    // pointer type should not pin the stack open.\n    if (isStackedLayout && (event.pointerType === 'touch' || event.pointerType === 'pen')) {\n      onExpandRequest?.();\n    }\n  };\n\n  const handleWheel = useEffectEvent((event: WheelEvent) => {\n    if (dismissed || active) {\n      return;\n    }\n\n    const isDocumentEvent = event.currentTarget === document;\n    if (!isDocumentEvent && !hoveredRef.current) {\n      return;\n    }\n\n    const { deltaX, deltaY } = event;\n    if (Math.abs(deltaX) <= Math.abs(deltaY) || deltaX === 0) {\n      return;\n    }\n\n    if (!allowScrollDismiss || isCloseDisabled) {\n      return;\n    }\n\n    if (!isDocumentEvent) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    cancelAutoClose();\n    setScrollDismissActive(true);\n\n    const nextOffset = offsetRef.current - deltaX;\n    const direction = nextOffset > 0 ? 1 : -1;\n\n    if (shouldDismiss(nextOffset, 0)) {\n      dismissNotification(direction);\n      return;\n    }\n\n    setSwipeOffset(nextOffset);\n    scheduleScrollDismissReset();\n  });\n\n  useEffect(() => {\n    if (!scrollDismissActive) {\n      return undefined;\n    }\n\n    document.addEventListener('wheel', handleWheel, { passive: false });\n    return () => document.removeEventListener('wheel', handleWheel, { passive: false } as any);\n  }, [scrollDismissActive]);\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (dismissed) {\n        setSwipeOffset(getExitOffset(dismissDirection));\n      }\n    };\n\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [dismissDirection, dismissed]);\n\n  useEffect(() => {\n    const node = notificationRef.current;\n    if (!node) {\n      return undefined;\n    }\n\n    node.addEventListener('wheel', handleWheel, { passive: false });\n    return () => node.removeEventListener('wheel', handleWheel, { passive: false } as any);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      cancelHide();\n      cancelScrollDismissReset();\n    };\n  }, []);\n\n  useEffect(() => {\n    data.onOpen?.(data);\n  }, []);\n\n  useEffect(() => {\n    handleAutoClose();\n    return cancelAutoClose;\n  }, [autoCloseDuration, active, dismissed]);\n\n  useEffect(() => {\n    if (paused) {\n      cancelAutoClose();\n    } else {\n      handleAutoClose();\n    }\n\n    return cancelAutoClose;\n  }, [paused]);\n\n  const consumerProps: Record<string, any> = { ...others, ...notificationProps };\n\n  // The interaction handlers below are internal, but the same events are part of the public\n  // props of both `Notifications` and every notification – they are composed with whatever\n  // the consumer passed instead of replacing it.\n  const interactionProps = {\n    style: notificationStyle,\n    // A collapsed notification is hidden behind the one in front of it – `pointer-events`\n    // alone does not take its controls out of the tab order or hide them from a screen\n    // reader, so it is fully inert until the stack is expanded.\n    inert: isCollapsed,\n    onMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => {\n      consumerProps.onMouseEnter?.(event);\n      handleMouseEnter();\n    },\n    onMouseLeave: (event: React.MouseEvent<HTMLDivElement>) => {\n      consumerProps.onMouseLeave?.(event);\n      handleMouseLeave();\n    },\n    onFocusCapture: (event: React.FocusEvent<HTMLDivElement>) => {\n      consumerProps.onFocusCapture?.(event);\n      handleFocusCapture?.();\n    },\n    onBlurCapture: (event: React.FocusEvent<HTMLDivElement>) => {\n      consumerProps.onBlurCapture?.(event);\n      handleBlurCapture?.();\n    },\n    onPointerDownCapture: (event: React.PointerEvent<HTMLDivElement>) => {\n      consumerProps.onPointerDownCapture?.(event);\n      handlePointerDownCapture(event);\n    },\n  };\n\n  if (renderNotification) {\n    const classNames = [others.className, notificationProps.className].filter(Boolean).join(' ');\n\n    return (\n      <div\n        ref={mergedRef}\n        role={notificationProps.role || others.role || 'alert'}\n        {...pickDomProps(consumerProps)}\n        className={classNames || undefined}\n        {...interactionProps}\n      >\n        {renderNotification(data)}\n      </div>\n    );\n  }\n\n  return (\n    <Notification\n      ref={mergedRef}\n      {...others}\n      {...notificationProps}\n      {...interactionProps}\n      withCloseButton={isCloseDisabled ? false : withCloseButton}\n      onClose={handleHide}\n    >\n      {message}\n    </Notification>\n  );\n}\n\nNotificationContainer.displayName = '@mantine/notifications/NotificationContainer';\n"],"mappings":"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"}