@mantine/notifications 9.6.0 → 9.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -191,7 +191,9 @@ function NotificationContainer({ data, onHide, autoClose, transitionDuration, al
|
|
|
191
191
|
zIndex: (stackSize || 5) - (stackIndex ?? 0),
|
|
192
192
|
pointerEvents: isCollapsed ? "none" : void 0,
|
|
193
193
|
alignSelf: stackDirection === 1 ? "start" : "end",
|
|
194
|
-
|
|
194
|
+
transitionProperty: isDragging ? "none" : "transform, opacity",
|
|
195
|
+
transitionDuration: `${transitionDuration}ms, ${transitionDuration}ms`,
|
|
196
|
+
transitionTimingFunction: "cubic-bezier(.51,.3,0,1.21), ease",
|
|
195
197
|
transitionDelay: isDragging || isExiting ? "0ms" : `${staggerDelay}ms`
|
|
196
198
|
} : {}
|
|
197
199
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationContainer.cjs","names":["extractStyleProps","useState","useMantineTheme","getAutoClose","useRef","useEffectEvent","useDrag","useMergedRef","getStyleObject","Notification"],"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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"}
|
|
1
|
+
{"version":3,"file":"NotificationContainer.cjs","names":["extractStyleProps","useState","useMantineTheme","getAutoClose","useRef","useEffectEvent","useDrag","useMergedRef","getStyleObject","Notification"],"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 transitionProperty: isDragging ? 'none' : 'transform, opacity',\n transitionDuration: `${transitionDuration}ms, ${transitionDuration}ms`,\n transitionTimingFunction: 'cubic-bezier(.51,.3,0,1.21), 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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"}
|
|
@@ -191,7 +191,9 @@ function NotificationContainer({ data, onHide, autoClose, transitionDuration, al
|
|
|
191
191
|
zIndex: (stackSize || 5) - (stackIndex ?? 0),
|
|
192
192
|
pointerEvents: isCollapsed ? "none" : void 0,
|
|
193
193
|
alignSelf: stackDirection === 1 ? "start" : "end",
|
|
194
|
-
|
|
194
|
+
transitionProperty: isDragging ? "none" : "transform, opacity",
|
|
195
|
+
transitionDuration: `${transitionDuration}ms, ${transitionDuration}ms`,
|
|
196
|
+
transitionTimingFunction: "cubic-bezier(.51,.3,0,1.21), ease",
|
|
195
197
|
transitionDelay: isDragging || isExiting ? "0ms" : `${staggerDelay}ms`
|
|
196
198
|
} : {}
|
|
197
199
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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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"}
|
|
1
|
+
{"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 transitionProperty: isDragging ? 'none' : 'transform, opacity',\n transitionDuration: `${transitionDuration}ms, ${transitionDuration}ms`,\n transitionTimingFunction: 'cubic-bezier(.51,.3,0,1.21), 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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/notifications",
|
|
3
|
-
"version": "9.6.
|
|
3
|
+
"version": "9.6.2",
|
|
4
4
|
"description": "Mantine notifications system",
|
|
5
5
|
"homepage": "https://mantine.dev",
|
|
6
6
|
"license": "MIT",
|
|
@@ -44,13 +44,13 @@
|
|
|
44
44
|
"directory": "packages/@mantine/notifications"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
|
-
"@mantine/core": "9.6.
|
|
48
|
-
"@mantine/hooks": "9.6.
|
|
47
|
+
"@mantine/core": "9.6.2",
|
|
48
|
+
"@mantine/hooks": "9.6.2",
|
|
49
49
|
"react": "^19.2.0",
|
|
50
50
|
"react-dom": "^19.2.0"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@mantine/store": "9.6.
|
|
53
|
+
"@mantine/store": "9.6.2",
|
|
54
54
|
"react-transition-group": "4.4.5"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|