@mantine/notifications 9.3.1 → 9.4.0

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.
Files changed (14) hide show
  1. package/cjs/NotificationContainer.cjs +1 -1
  2. package/cjs/NotificationContainer.cjs.map +1 -1
  3. package/cjs/Notifications.cjs.map +1 -1
  4. package/cjs/get-grouped-notifications/get-grouped-notifications.cjs.map +1 -1
  5. package/cjs/notifications.store.cjs +20 -7
  6. package/cjs/notifications.store.cjs.map +1 -1
  7. package/esm/NotificationContainer.mjs +1 -1
  8. package/esm/NotificationContainer.mjs.map +1 -1
  9. package/esm/Notifications.mjs.map +1 -1
  10. package/esm/get-grouped-notifications/get-grouped-notifications.mjs.map +1 -1
  11. package/esm/notifications.store.mjs +20 -7
  12. package/esm/notifications.store.mjs.map +1 -1
  13. package/lib/notifications.store.d.ts +4 -0
  14. package/package.json +6 -6
package/cjs/NotificationContainer.cjs CHANGED
@@ -12,7 +12,7 @@ function NotificationContainer({ data, onHide, autoClose, transitionDuration, al
12
12
  const [dismissDirection, setDismissDirection] = (0, react.useState)(1);
13
13
  const [scrollDismissActive, setScrollDismissActive] = (0, react.useState)(false);
14
14
  const theme = (0, _mantine_core.useMantineTheme)();
15
- const { autoClose: _autoClose, message, allowClose, position: _position, style: dataStyle, withCloseButton, onOpen: _onOpen, ...notificationProps } = data;
15
+ const { autoClose: _autoClose, message, allowClose, position: _position, style: dataStyle, withCloseButton, onOpen: _onOpen, priority: _priority, __sequence: _sequence, ...notificationProps } = data;
16
16
  const autoCloseDuration = require_get_auto_close.getAutoClose(autoClose, data.autoClose);
17
17
  const autoCloseTimeout = (0, react.useRef)(-1);
18
18
  const hideTimeout = (0, react.useRef)(-1);
package/cjs/NotificationContainer.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationContainer.cjs","names":["getAutoClose","Notification"],"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 ...notificationProps\n } = data;\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 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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"}
1
+ {"version":3,"file":"NotificationContainer.cjs","names":["getAutoClose","Notification"],"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 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":";;;;;;;AAMA,MAAM,+BAA+B;AAerC,SAAgB,sBAAsB,EACpC,MACA,QACA,WACA,oBACA,kBACA,oBACA,QACA,cACA,YACA,KACA,OACA,GAAG,UAC0B;CAC7B,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAsB,CAAC;CACtC,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,SAAA,CAAyB,KAAK;CAChD,MAAM,CAAC,kBAAkB,wBAAA,GAAA,MAAA,SAAA,CAAwC,CAAC;CAClE,MAAM,CAAC,qBAAqB,2BAAA,GAAA,MAAA,SAAA,CAAmC,KAAK;CACpE,MAAM,SAAA,GAAA,cAAA,gBAAA,CAAwB;CAC9B,MAAM,EACJ,WAAW,YACX,SACA,YACA,UAAU,WACV,OAAO,WACP,iBACA,QAAQ,SACR,UAAU,WACV,YAAY,WACZ,GAAG,sBACD;CACJ,MAAM,oBAAoBA,uBAAAA,aAAa,WAAW,KAAK,SAAS;CAChE,MAAM,oBAAA,GAAA,MAAA,OAAA,CAAkC,EAAE;CAC1C,MAAM,eAAA,GAAA,MAAA,OAAA,CAA6B,EAAE;CACrC,MAAM,wBAAA,GAAA,MAAA,OAAA,CAAsC,EAAE;CAC9C,MAAM,mBAAA,GAAA,MAAA,OAAA,CAAyC,IAAI;CACnD,MAAM,cAAA,GAAA,MAAA,OAAA,CAAoB,KAAK;CAC/B,MAAM,aAAA,GAAA,MAAA,OAAA,CAAmB,CAAC;CAC1B,MAAM,kBAAkB,eAAe;CAEvC,MAAM,wBAAwB,OAAO,aAAa,iBAAiB,OAAO;CAC1E,MAAM,mBAAmB,OAAO,aAAa,YAAY,OAAO;CAChE,MAAM,iCAAiC,OAAO,aAAa,qBAAqB,OAAO;CAEvF,MAAM,kBAAkB,UAAkB;EACxC,UAAU,UAAU;EACpB,UAAU,KAAK;CACjB;CAEA,MAAM,mBAAmB;EACvB,OAAO,KAAK,EAAG;EACf,gBAAgB;EAChB,WAAW;EACX,yBAAyB;CAC3B;CAEA,MAAM,wBAAwB;EAC5B,IACE,aACA,UACA,UACA,WAAW,WACX,OAAO,sBAAsB,UAE7B;EAGF,iBAAiB,UAAU,OAAO,WAAW,YAAY,iBAAiB;CAC5E;CAEA,MAAM,iBAAiB,cAAsB;EAE3C,OAAO,cADO,gBAAgB,SAAS,eAAe,OAC1B;CAC9B;CAEA,MAAM,iBAAiB,UAAkB,aAAqB;EAC5D,MAAM,QAAQ,gBAAgB,SAAS,eAAe;EACtD,OAAO,KAAK,IAAI,QAAQ,IAAI,QAAQ,OAAQ,WAAW;CACzD;CAEA,MAAM,mBAAmB;EACvB,yBAAyB;EACzB,uBAAuB,KAAK;EAC5B,eAAe,CAAC;CAClB;CAEA,MAAM,uBAAuB,cAAsB;EACjD,oBAAoB,SAAS;EAC7B,aAAa,IAAI;EACjB,uBAAuB,KAAK;EAC5B,eAAe,cAAc,SAAS,CAAC;EACvC,gBAAgB;EAChB,WAAW;EACX,yBAAyB;EACzB,YAAY,UAAU,OAAO,WAAW,YAAY,kBAAkB;CACxE;CAEA,MAAM,mCAAmC;EACvC,yBAAyB;EACzB,qBAAqB,UAAU,OAAO,iBAAiB;GACrD,uBAAuB,KAAK;GAC5B,eAAe,CAAC;GAChB,gBAAgB;EAClB,GAAG,4BAA4B;CACjC;CAEA,MAAM,EAAE,KAAK,SAAS,YAAA,GAAA,eAAA,QAAA,EACnB,UAAU;EACT,IAAI,WACF;EAGF,IAAI,MAAM,OACR,gBAAgB;EAGlB,IAAI,MAAM,MAAM;GACd,IAAI,MAAM,OAAO,MAAM,UAAU;IAC/B,eAAe,CAAC;IAChB,gBAAgB;IAChB;GACF;GAEA,MAAM,WAAW,MAAM,SAAS;GAChC,MAAM,YACJ,aAAa,IAAK,MAAM,UAAU,OAAO,KAAK,KAAK,IAAK,WAAW,IAAI,IAAI;GAE7E,IAAI,cAAc,UAAU,MAAM,SAAS,EAAE,GAC3C,oBAAoB,SAAS;QACxB;IACL,eAAe,CAAC;IAChB,gBAAgB;GAClB;EACF,OACE,eAAe,MAAM,SAAS,EAAE;CAEpC,GACA;EACE,MAAM;EACN,WAAW;EACX,YAAY;EACZ,SAAS,oBAAoB,CAAC,mBAAmB,CAAC;CACpD,CACF;CAEA,MAAM,aAAA,GAAA,eAAA,aAAA,CAAyB,KAAK,iBAAiB,OAAO;CAC5D,MAAM,iBAAA,GAAA,cAAA,eAAA,CAA+B,OAAO,KAAK;CACjD,MAAM,qBAAA,GAAA,cAAA,eAAA,CAAmC,WAAW,KAAK;CACzD,MAAM,YAAY;EAAE,GAAG;EAAe,GAAG;CAAkB;CAC3D,MAAM,cAAc,OAAO,UAAU,YAAY,WAAW,UAAU,UAAU;CAChF,MAAM,eAAe,YAAY,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,IAAI,KAAK,CAAC,IAAI;CAC/E,MAAM,6BACJ,UAAU,sBACV,GAAG,mBAAmB,MAAM,mBAAmB,MAAM,mBAAmB;CAC1E,MAAM,oBAAoB;EACxB,GAAG;GACF,oCACC,OAAO,UAAU,cAAc,WAAW,UAAU,YAAY;GACjE,kCAA4C,OAAO,WAAW;GAC9D,iCAA2C,GAAG,OAAO;GACrD,kCAA4C,OAAO,YAAY;EAChE,WACE;EACF,SAAS;EACT,oBACE,UAAU,sBAAsB,kBAAkB;EACpD,QAAQ;EACR,aAAa;CACf;CAEA,MAAM,yBAAyB;EAC7B,WAAW,UAAU;EACrB,gBAAgB;EAChB,eAAe;CACjB;CAEA,MAAM,yBAAyB;EAC7B,WAAW,UAAU;EACrB,IAAI,CAAC,qBAAqB;GACxB,WAAW;GACX,gBAAgB;EAClB;EACA,aAAa;CACf;CAEA,MAAM,eAAA,GAAA,MAAA,eAAA,EAA8B,UAAsB;EACxD,IAAI,aAAa,QACf;EAGF,MAAM,kBAAkB,MAAM,kBAAkB;EAChD,IAAI,CAAC,mBAAmB,CAAC,WAAW,SAClC;EAGF,MAAM,EAAE,QAAQ,WAAW;EAC3B,IAAI,KAAK,IAAI,MAAM,KAAK,KAAK,IAAI,MAAM,KAAK,WAAW,GACrD;EAGF,IAAI,CAAC,sBAAsB,iBACzB;EAGF,IAAI,CAAC,iBAAiB;GACpB,MAAM,eAAe;GACrB,MAAM,gBAAgB;EACxB;EAEA,gBAAgB;EAChB,uBAAuB,IAAI;EAE3B,MAAM,aAAa,UAAU,UAAU;EACvC,MAAM,YAAY,aAAa,IAAI,IAAI;EAEvC,IAAI,cAAc,YAAY,CAAC,GAAG;GAChC,oBAAoB,SAAS;GAC7B;EACF;EAEA,eAAe,UAAU;EACzB,2BAA2B;CAC7B,CAAC;CAED,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,qBACH;EAGF,SAAS,iBAAiB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAC;EAClE,aAAa,SAAS,oBAAoB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAQ;CAC3F,GAAG,CAAC,mBAAmB,CAAC;CAExB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,qBAAqB;GACzB,IAAI,WACF,eAAe,cAAc,gBAAgB,CAAC;EAElD;EAEA,OAAO,iBAAiB,UAAU,YAAY;EAC9C,aAAa,OAAO,oBAAoB,UAAU,YAAY;CAChE,GAAG,CAAC,kBAAkB,SAAS,CAAC;CAEhC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,OAAO,gBAAgB;EAC7B,IAAI,CAAC,MACH;EAGF,KAAK,iBAAiB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAC;EAC9D,aAAa,KAAK,oBAAoB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAQ;CACvF,GAAG,CAAC,CAAC;CAEL,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,aAAa;GACX,WAAW;GACX,yBAAyB;EAC3B;CACF,GAAG,CAAC,CAAC;CAEL,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,KAAK,SAAS,IAAI;CACpB,GAAG,CAAC,CAAC;CAEL,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,gBAAgB;EAChB,OAAO;CACT,GAAG;EAAC;EAAmB;EAAQ;CAAS,CAAC;CAEzC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,QACF,gBAAgB;OAEhB,gBAAgB;EAGlB,OAAO;CACT,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,cAAD;EACE,KAAK;EACL,GAAI;EACJ,OAAO;EACP,GAAI;EACJ,iBAAiB,kBAAkB,QAAQ;EAC3C,SAAS;EACT,cAAc;EACd,cAAc;YAEb;CACW,CAAA;AAElB;AAEA,sBAAsB,cAAc"}
package/cjs/Notifications.cjs.map CHANGED
@@ -1 +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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"}
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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"}
package/cjs/get-grouped-notifications/get-grouped-notifications.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"get-grouped-notifications.cjs","names":[],"sources":["../../src/get-grouped-notifications/get-grouped-notifications.ts"],"sourcesContent":["import { NotificationData, NotificationPosition } from '../notifications.store';\n\nexport type GroupedNotifications = Record<NotificationPosition, NotificationData[]>;\n\nexport const positions: NotificationPosition[] = [\n 'bottom-center',\n 'bottom-left',\n 'bottom-right',\n 'top-center',\n 'top-left',\n 'top-right',\n];\n\nexport function getGroupedNotifications(\n notifications: NotificationData[],\n defaultPosition: NotificationPosition\n) {\n return notifications.reduce<GroupedNotifications>(\n (acc, notification) => {\n acc[notification.position || defaultPosition].push(notification);\n return acc;\n },\n positions.reduce<GroupedNotifications>((acc, item) => {\n acc[item] = [];\n return acc;\n }, {} as GroupedNotifications)\n );\n}\n"],"mappings":";;AAIA,MAAa,YAAoC;CAC/C;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAgB,wBACd,eACA,iBACA;CACA,OAAO,cAAc,QAClB,KAAK,iBAAiB;EACrB,IAAI,aAAa,YAAY,iBAAiB,KAAK,YAAY;EAC/D,OAAO;CACT,GACA,UAAU,QAA8B,KAAK,SAAS;EACpD,IAAI,QAAQ,CAAC;EACb,OAAO;CACT,GAAG,CAAC,CAAyB,CAC/B;AACF"}
1
+ {"version":3,"file":"get-grouped-notifications.cjs","names":[],"sources":["../../src/get-grouped-notifications/get-grouped-notifications.ts"],"sourcesContent":["import { NotificationData, NotificationPosition } from '../notifications.store';\n\nexport type GroupedNotifications = Record<NotificationPosition, NotificationData[]>;\n\nexport const positions: NotificationPosition[] = [\n 'bottom-center',\n 'bottom-left',\n 'bottom-right',\n 'top-center',\n 'top-left',\n 'top-right',\n];\n\nexport function getGroupedNotifications(\n notifications: NotificationData[],\n defaultPosition: NotificationPosition\n) {\n return notifications.reduce<GroupedNotifications>(\n (acc, notification) => {\n acc[notification.position || defaultPosition].push(notification);\n return acc;\n },\n positions.reduce<GroupedNotifications>((acc, item) => {\n acc[item] = [];\n return acc;\n }, {} as GroupedNotifications)\n );\n}\n"],"mappings":";;AAIA,MAAa,YAAoC;CAC/C;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAgB,wBACd,eACA,iBACA;CACA,OAAO,cAAc,QAClB,KAAK,iBAAiB;EACrB,IAAI,aAAa,YAAY,gBAAgB,CAAC,KAAK,YAAY;EAC/D,OAAO;CACT,GACA,UAAU,QAA8B,KAAK,SAAS;EACpD,IAAI,QAAQ,CAAC;EACb,OAAO;CACT,GAAG,CAAC,CAAyB,CAC/B;AACF"}
package/cjs/notifications.store.cjs CHANGED
@@ -2,16 +2,23 @@
2
2
  let _mantine_hooks = require("@mantine/hooks");
3
3
  let _mantine_store = require("@mantine/store");
4
4
  //#region packages/@mantine/notifications/src/notifications.store.ts
5
+ let notificationSequence = 0;
5
6
  function getDistributedNotifications(data, defaultPosition, limit) {
6
7
  const queue = [];
7
8
  const notifications = [];
8
- const count = {};
9
+ const groups = /* @__PURE__ */ new Map();
9
10
  for (const item of data) {
10
11
  const position = item.position || defaultPosition;
11
- count[position] = count[position] || 0;
12
- count[position] += 1;
13
- if (count[position] <= limit) notifications.push(item);
14
- else queue.push(item);
12
+ const group = groups.get(position);
13
+ if (group) group.push(item);
14
+ else groups.set(position, [item]);
15
+ }
16
+ for (const group of groups.values()) {
17
+ group.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (a.__sequence ?? 0) - (b.__sequence ?? 0));
18
+ group.forEach((item, index) => {
19
+ if (index < limit) notifications.push(item);
20
+ else queue.push(item);
21
+ });
15
22
  }
16
23
  return {
17
24
  notifications,
@@ -28,7 +35,12 @@ const notificationsStore = createNotificationsStore();
28
35
  const useNotifications = (store = notificationsStore) => (0, _mantine_store.useStore)(store);
29
36
  function updateNotificationsState(store, update) {
30
37
  const state = store.getState();
31
- const updated = getDistributedNotifications(update([...state.notifications, ...state.queue]), state.defaultPosition, state.limit);
38
+ const notifications = update([...state.notifications, ...state.queue]);
39
+ for (const item of notifications) if (item.__sequence === void 0) {
40
+ item.__sequence = notificationSequence;
41
+ notificationSequence += 1;
42
+ }
43
+ const updated = getDistributedNotifications(notifications, state.defaultPosition, state.limit);
32
44
  store.setState({
33
45
  notifications: updated.notifications,
34
46
  queue: updated.queue,
@@ -71,7 +83,8 @@ function cleanNotifications(store = notificationsStore) {
71
83
  updateNotificationsState(store, () => []);
72
84
  }
73
85
  function cleanNotificationsQueue(store = notificationsStore) {
74
- updateNotificationsState(store, (notifications) => notifications.slice(0, store.getState().limit));
86
+ const { defaultPosition, limit } = store.getState();
87
+ updateNotificationsState(store, (notifications) => getDistributedNotifications(notifications, defaultPosition, limit).notifications);
75
88
  }
76
89
  const notifications = {
77
90
  show: showNotification,
package/cjs/notifications.store.cjs.map CHANGED
@@ -1 +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 /** 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\nfunction getDistributedNotifications(\n data: NotificationData[],\n defaultPosition: NotificationPosition,\n limit: number\n) {\n const queue: NotificationData[] = [];\n const notifications: NotificationData[] = [];\n const count: Record<string, number> = {};\n\n for (const item of data) {\n const position = item.position || defaultPosition;\n count[position] = count[position] || 0;\n count[position] += 1;\n\n if (count[position] <= limit) {\n notifications.push(item);\n } else {\n queue.push(item);\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 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 updateNotificationsState(store, (notifications) =>\n notifications.slice(0, store.getState().limit)\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":";;;;AA+CA,SAAS,4BACP,MACA,iBACA,OACA;CACA,MAAM,QAA4B,CAAC;CACnC,MAAM,gBAAoC,CAAC;CAC3C,MAAM,QAAgC,CAAC;CAEvC,KAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,WAAW,KAAK,YAAY;EAClC,MAAM,YAAY,MAAM,aAAa;EACrC,MAAM,aAAa;EAEnB,IAAI,MAAM,aAAa,OACrB,cAAc,KAAK,IAAI;OAEvB,MAAM,KAAK,IAAI;CAEnB;CAEA,OAAO;EAAE;EAAe;CAAM;AAChC;AAEA,MAAa,kCAAA,GAAA,eAAA,aACqB;CAC9B,eAAe,CAAC;CAChB,OAAO,CAAC;CACR,iBAAiB;CACjB,OAAO;AACT,CAAC;AAEH,MAAa,qBAAqB,yBAAyB;AAC3D,MAAa,oBAAoB,QAA4B,wBAAA,GAAA,eAAA,UAAgC,KAAK;AAElG,SAAgB,yBACd,OACA,QACA;CACA,MAAM,QAAQ,MAAM,SAAS;CAE7B,MAAM,UAAU,4BADM,OAAO,CAAC,GAAG,MAAM,eAAe,GAAG,MAAM,KAAK,CACZ,GAAG,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,UAAe;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,yBAAyB,QAAQ,kBAC/B,cAAc,MAAM,GAAG,MAAM,SAAS,EAAE,KAAK,CAC/C;AACF;AAEA,MAAa,gBAAgB;CAC3B,MAAM;CACN,MAAM;CACN,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,aAAa;AACf"}
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"}
package/esm/NotificationContainer.mjs CHANGED
@@ -12,7 +12,7 @@ function NotificationContainer({ data, onHide, autoClose, transitionDuration, al
12
12
  const [dismissDirection, setDismissDirection] = useState(1);
13
13
  const [scrollDismissActive, setScrollDismissActive] = useState(false);
14
14
  const theme = useMantineTheme();
15
- const { autoClose: _autoClose, message, allowClose, position: _position, style: dataStyle, withCloseButton, onOpen: _onOpen, ...notificationProps } = data;
15
+ const { autoClose: _autoClose, message, allowClose, position: _position, style: dataStyle, withCloseButton, onOpen: _onOpen, priority: _priority, __sequence: _sequence, ...notificationProps } = data;
16
16
  const autoCloseDuration = getAutoClose(autoClose, data.autoClose);
17
17
  const autoCloseTimeout = useRef(-1);
18
18
  const hideTimeout = useRef(-1);
package/esm/NotificationContainer.mjs.map CHANGED
@@ -1 +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 ...notificationProps\n } = data;\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 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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"}
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 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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"}
package/esm/Notifications.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Notifications.mjs","names":["Transition","_Transition","classes"],"sources":["../src/Notifications.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n Transition as _Transition,\n TransitionGroup,\n TransitionStatus,\n} from 'react-transition-group';\nimport {\n BasePortalProps,\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getDefaultZIndex,\n OptionalPortal,\n rem,\n RemoveScroll,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { useDidUpdate, useForceUpdate, useReducedMotion } from '@mantine/hooks';\nimport {\n getGroupedNotifications,\n positions,\n} from './get-grouped-notifications/get-grouped-notifications';\nimport { getNotificationStateStyles } from './get-notification-state-styles';\nimport { NotificationContainer } from './NotificationContainer';\nimport {\n hideNotification,\n NotificationPosition,\n notifications,\n NotificationsStore,\n notificationsStore,\n useNotifications,\n} from './notifications.store';\nimport classes from './Notifications.module.css';\n\nconst Transition: any = _Transition;\n\nexport type NotificationsStylesNames = 'root' | 'notification';\nexport type NotificationsCssVariables = {\n root: '--notifications-z-index' | '--notifications-container-width';\n};\n\nexport interface NotificationsProps\n extends BoxProps, StylesApiProps<NotificationsFactory>, ElementProps<'div'> {\n /** Notifications default position @default 'bottom-right' */\n position?: NotificationPosition;\n\n /** Auto close timeout for all notifications in ms, `false` to disable auto close, can be overwritten for individual notifications in `notifications.show` function @default 4000 */\n autoClose?: number | false;\n\n /** Notification transition duration in ms @default 250 */\n transitionDuration?: number;\n\n /** Determines whether notifications can be dismissed by dragging left or right @default true */\n allowDragDismiss?: boolean;\n\n /** Determines whether notifications can be dismissed with horizontal scroll gesture while hovered @default true */\n allowScrollDismiss?: boolean;\n\n /** Notification width, cannot exceed 100% @default 440 */\n containerWidth?: number | string;\n\n /** Notification `max-height`, used for transitions @default 200 */\n notificationMaxHeight?: number | string;\n\n /** Maximum number of notifications displayed at a time, other new notifications will be added to queue @default 5 */\n limit?: number;\n\n /** Notifications container z-index @default 400 */\n zIndex?: string | number;\n\n /** Props passed down to the `Portal` component */\n portalProps?: BasePortalProps;\n\n /** Store for notifications state, can be used to create multiple instances of notifications system in your application */\n store?: NotificationsStore;\n\n /** Determines whether notifications container should be rendered inside `Portal` @default true */\n withinPortal?: boolean;\n\n /** Determines which notifications should pause auto close on hover, `'all'` – pauses auto close for all notifications when any notification is hovered, `'notification'` – pauses auto close only for the hovered notification @default 'all' */\n pauseResetOnHover?: 'all' | 'notification';\n}\n\nexport type NotificationsFactory = Factory<{\n props: NotificationsProps;\n ref: HTMLDivElement;\n stylesNames: NotificationsStylesNames;\n vars: NotificationsCssVariables;\n staticComponents: {\n show: typeof notifications.show;\n hide: typeof notifications.hide;\n update: typeof notifications.update;\n clean: typeof notifications.clean;\n cleanQueue: typeof notifications.cleanQueue;\n updateState: typeof notifications.updateState;\n };\n}>;\n\nconst defaultProps = {\n position: 'bottom-right',\n autoClose: 4000,\n transitionDuration: 250,\n allowDragDismiss: true,\n allowScrollDismiss: true,\n containerWidth: 440,\n notificationMaxHeight: 200,\n limit: 5,\n zIndex: getDefaultZIndex('overlay'),\n store: notificationsStore,\n withinPortal: true,\n pauseResetOnHover: 'all',\n} satisfies Partial<NotificationsProps>;\n\nconst varsResolver = createVarsResolver<NotificationsFactory>((_, { zIndex, containerWidth }) => ({\n root: {\n '--notifications-z-index': zIndex?.toString(),\n '--notifications-container-width': rem(containerWidth),\n },\n}));\n\nexport const Notifications = factory<NotificationsFactory>((_props) => {\n const props = useProps('Notifications', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n position,\n autoClose,\n transitionDuration,\n allowDragDismiss,\n allowScrollDismiss,\n containerWidth,\n notificationMaxHeight,\n limit,\n zIndex,\n store,\n portalProps,\n withinPortal,\n pauseResetOnHover,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const data = useNotifications(store);\n const forceUpdate = useForceUpdate();\n const shouldReduceMotion = useReducedMotion();\n const refs = useRef<Record<string, HTMLDivElement>>({});\n const previousLength = useRef<number>(0);\n const [hoveredCount, setHoveredCount] = useState(0);\n\n const handleHoverStart = useCallback(() => setHoveredCount((c) => c + 1), []);\n const handleHoverEnd = useCallback(() => setHoveredCount((c) => Math.max(0, c - 1)), []);\n\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion ? 1 : transitionDuration;\n\n const getStyles = useStyles<NotificationsFactory>({\n name: 'Notifications',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n useEffect(() => {\n store?.updateState((current) => ({\n ...current,\n limit: limit || 5,\n defaultPosition: position,\n }));\n }, [limit, position]);\n\n useDidUpdate(() => {\n if (data.notifications.length > previousLength.current) {\n setTimeout(() => forceUpdate(), 0);\n }\n previousLength.current = data.notifications.length;\n }, [data.notifications]);\n\n const grouped = getGroupedNotifications(data.notifications, position);\n const groupedComponents = positions.reduce(\n (acc, pos) => {\n acc[pos] = grouped[pos].map(({ style: notificationStyle, ...notification }) => (\n <Transition\n key={notification.id}\n timeout={duration}\n onEnter={() => refs.current[notification.id!].offsetHeight}\n nodeRef={{ current: refs.current[notification.id!] }}\n >\n {(state: TransitionStatus) => (\n <NotificationContainer\n ref={(node) => {\n if (node) {\n refs.current[notification.id!] = node;\n } else {\n delete refs.current[notification.id!];\n }\n }}\n data={notification}\n onHide={(id) => hideNotification(id, store)}\n autoClose={autoClose}\n transitionDuration={duration}\n allowDragDismiss={allowDragDismiss}\n allowScrollDismiss={allowScrollDismiss}\n paused={pauseResetOnHover === 'all' ? hoveredCount > 0 : false}\n onHoverStart={handleHoverStart}\n onHoverEnd={handleHoverEnd}\n {...getStyles('notification', {\n style: {\n ...getNotificationStateStyles({\n state,\n position: pos,\n transitionDuration: duration,\n maxHeight: notificationMaxHeight,\n }),\n ...notificationStyle,\n },\n })}\n />\n )}\n </Transition>\n ));\n\n return acc;\n },\n {} as Record<NotificationPosition, React.ReactNode>\n );\n\n return (\n <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n <Box {...getStyles('root')} data-position=\"top-center\" {...others}>\n <TransitionGroup>{groupedComponents['top-center']}</TransitionGroup>\n </Box>\n\n <Box {...getStyles('root')} data-position=\"top-left\" {...others}>\n <TransitionGroup>{groupedComponents['top-left']}</TransitionGroup>\n </Box>\n\n <Box\n {...getStyles('root', { className: RemoveScroll.classNames.fullWidth })}\n data-position=\"top-right\"\n {...others}\n >\n <TransitionGroup>{groupedComponents['top-right']}</TransitionGroup>\n </Box>\n\n <Box\n {...getStyles('root', { className: RemoveScroll.classNames.fullWidth })}\n data-position=\"bottom-right\"\n {...others}\n >\n <TransitionGroup>{groupedComponents['bottom-right']}</TransitionGroup>\n </Box>\n\n <Box {...getStyles('root')} data-position=\"bottom-left\" {...others}>\n <TransitionGroup>{groupedComponents['bottom-left']}</TransitionGroup>\n </Box>\n\n <Box {...getStyles('root')} data-position=\"bottom-center\" {...others}>\n <TransitionGroup>{groupedComponents['bottom-center']}</TransitionGroup>\n </Box>\n </OptionalPortal>\n );\n});\n\nNotifications.classes = classes;\nNotifications.varsResolver = varsResolver;\nNotifications.displayName = '@mantine/notifications/Notifications';\nNotifications.show = notifications.show;\nNotifications.hide = notifications.hide;\nNotifications.update = notifications.update;\nNotifications.clean = notifications.clean;\nNotifications.cleanQueue = notifications.cleanQueue;\nNotifications.updateState = notifications.updateState;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Notifications.mjs","names":["Transition","_Transition","classes"],"sources":["../src/Notifications.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n Transition as _Transition,\n TransitionGroup,\n TransitionStatus,\n} from 'react-transition-group';\nimport {\n BasePortalProps,\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getDefaultZIndex,\n OptionalPortal,\n rem,\n RemoveScroll,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { useDidUpdate, useForceUpdate, useReducedMotion } from '@mantine/hooks';\nimport {\n getGroupedNotifications,\n positions,\n} from './get-grouped-notifications/get-grouped-notifications';\nimport { getNotificationStateStyles } from './get-notification-state-styles';\nimport { NotificationContainer } from './NotificationContainer';\nimport {\n hideNotification,\n NotificationPosition,\n notifications,\n NotificationsStore,\n notificationsStore,\n useNotifications,\n} from './notifications.store';\nimport classes from './Notifications.module.css';\n\nconst Transition: any = _Transition;\n\nexport type NotificationsStylesNames = 'root' | 'notification';\nexport type NotificationsCssVariables = {\n root: '--notifications-z-index' | '--notifications-container-width';\n};\n\nexport interface NotificationsProps\n extends BoxProps, StylesApiProps<NotificationsFactory>, ElementProps<'div'> {\n /** Notifications default position @default 'bottom-right' */\n position?: NotificationPosition;\n\n /** Auto close timeout for all notifications in ms, `false` to disable auto close, can be overwritten for individual notifications in `notifications.show` function @default 4000 */\n autoClose?: number | false;\n\n /** Notification transition duration in ms @default 250 */\n transitionDuration?: number;\n\n /** Determines whether notifications can be dismissed by dragging left or right @default true */\n allowDragDismiss?: boolean;\n\n /** Determines whether notifications can be dismissed with horizontal scroll gesture while hovered @default true */\n allowScrollDismiss?: boolean;\n\n /** Notification width, cannot exceed 100% @default 440 */\n containerWidth?: number | string;\n\n /** Notification `max-height`, used for transitions @default 200 */\n notificationMaxHeight?: number | string;\n\n /** Maximum number of notifications displayed at a time, other new notifications will be added to queue @default 5 */\n limit?: number;\n\n /** Notifications container z-index @default 400 */\n zIndex?: string | number;\n\n /** Props passed down to the `Portal` component */\n portalProps?: BasePortalProps;\n\n /** Store for notifications state, can be used to create multiple instances of notifications system in your application */\n store?: NotificationsStore;\n\n /** Determines whether notifications container should be rendered inside `Portal` @default true */\n withinPortal?: boolean;\n\n /** Determines which notifications should pause auto close on hover, `'all'` – pauses auto close for all notifications when any notification is hovered, `'notification'` – pauses auto close only for the hovered notification @default 'all' */\n pauseResetOnHover?: 'all' | 'notification';\n}\n\nexport type NotificationsFactory = Factory<{\n props: NotificationsProps;\n ref: HTMLDivElement;\n stylesNames: NotificationsStylesNames;\n vars: NotificationsCssVariables;\n staticComponents: {\n show: typeof notifications.show;\n hide: typeof notifications.hide;\n update: typeof notifications.update;\n clean: typeof notifications.clean;\n cleanQueue: typeof notifications.cleanQueue;\n updateState: typeof notifications.updateState;\n };\n}>;\n\nconst defaultProps = {\n position: 'bottom-right',\n autoClose: 4000,\n transitionDuration: 250,\n allowDragDismiss: true,\n allowScrollDismiss: true,\n containerWidth: 440,\n notificationMaxHeight: 200,\n limit: 5,\n zIndex: getDefaultZIndex('overlay'),\n store: notificationsStore,\n withinPortal: true,\n pauseResetOnHover: 'all',\n} satisfies Partial<NotificationsProps>;\n\nconst varsResolver = createVarsResolver<NotificationsFactory>((_, { zIndex, containerWidth }) => ({\n root: {\n '--notifications-z-index': zIndex?.toString(),\n '--notifications-container-width': rem(containerWidth),\n },\n}));\n\nexport const Notifications = factory<NotificationsFactory>((_props) => {\n const props = useProps('Notifications', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n position,\n autoClose,\n transitionDuration,\n allowDragDismiss,\n allowScrollDismiss,\n containerWidth,\n notificationMaxHeight,\n limit,\n zIndex,\n store,\n portalProps,\n withinPortal,\n pauseResetOnHover,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const data = useNotifications(store);\n const forceUpdate = useForceUpdate();\n const shouldReduceMotion = useReducedMotion();\n const refs = useRef<Record<string, HTMLDivElement>>({});\n const previousLength = useRef<number>(0);\n const [hoveredCount, setHoveredCount] = useState(0);\n\n const handleHoverStart = useCallback(() => setHoveredCount((c) => c + 1), []);\n const handleHoverEnd = useCallback(() => setHoveredCount((c) => Math.max(0, c - 1)), []);\n\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion ? 1 : transitionDuration;\n\n const getStyles = useStyles<NotificationsFactory>({\n name: 'Notifications',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n useEffect(() => {\n store?.updateState((current) => ({\n ...current,\n limit: limit || 5,\n defaultPosition: position,\n }));\n }, [limit, position]);\n\n useDidUpdate(() => {\n if (data.notifications.length > previousLength.current) {\n setTimeout(() => forceUpdate(), 0);\n }\n previousLength.current = data.notifications.length;\n }, [data.notifications]);\n\n const grouped = getGroupedNotifications(data.notifications, position);\n const groupedComponents = positions.reduce(\n (acc, pos) => {\n acc[pos] = grouped[pos].map(({ style: notificationStyle, ...notification }) => (\n <Transition\n key={notification.id}\n timeout={duration}\n onEnter={() => refs.current[notification.id!].offsetHeight}\n nodeRef={{ current: refs.current[notification.id!] }}\n >\n {(state: TransitionStatus) => (\n <NotificationContainer\n ref={(node) => {\n if (node) {\n refs.current[notification.id!] = node;\n } else {\n delete refs.current[notification.id!];\n }\n }}\n data={notification}\n onHide={(id) => hideNotification(id, store)}\n autoClose={autoClose}\n transitionDuration={duration}\n allowDragDismiss={allowDragDismiss}\n allowScrollDismiss={allowScrollDismiss}\n paused={pauseResetOnHover === 'all' ? hoveredCount > 0 : false}\n onHoverStart={handleHoverStart}\n onHoverEnd={handleHoverEnd}\n {...getStyles('notification', {\n style: {\n ...getNotificationStateStyles({\n state,\n position: pos,\n transitionDuration: duration,\n maxHeight: notificationMaxHeight,\n }),\n ...notificationStyle,\n },\n })}\n />\n )}\n </Transition>\n ));\n\n return acc;\n },\n {} as Record<NotificationPosition, React.ReactNode>\n );\n\n return (\n <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n <Box {...getStyles('root')} data-position=\"top-center\" {...others}>\n <TransitionGroup>{groupedComponents['top-center']}</TransitionGroup>\n </Box>\n\n <Box {...getStyles('root')} data-position=\"top-left\" {...others}>\n <TransitionGroup>{groupedComponents['top-left']}</TransitionGroup>\n </Box>\n\n <Box\n {...getStyles('root', { className: RemoveScroll.classNames.fullWidth })}\n data-position=\"top-right\"\n {...others}\n >\n <TransitionGroup>{groupedComponents['top-right']}</TransitionGroup>\n </Box>\n\n <Box\n {...getStyles('root', { className: RemoveScroll.classNames.fullWidth })}\n data-position=\"bottom-right\"\n {...others}\n >\n <TransitionGroup>{groupedComponents['bottom-right']}</TransitionGroup>\n </Box>\n\n <Box {...getStyles('root')} data-position=\"bottom-left\" {...others}>\n <TransitionGroup>{groupedComponents['bottom-left']}</TransitionGroup>\n </Box>\n\n <Box {...getStyles('root')} data-position=\"bottom-center\" {...others}>\n <TransitionGroup>{groupedComponents['bottom-center']}</TransitionGroup>\n </Box>\n </OptionalPortal>\n );\n});\n\nNotifications.classes = classes;\nNotifications.varsResolver = varsResolver;\nNotifications.displayName = '@mantine/notifications/Notifications';\nNotifications.show = notifications.show;\nNotifications.hide = notifications.hide;\nNotifications.update = notifications.update;\nNotifications.clean = notifications.clean;\nNotifications.cleanQueue = notifications.cleanQueue;\nNotifications.updateState = notifications.updateState;\n"],"mappings":";;;;;;;;;;;;AAwCA,MAAMA,eAAkBC;AAgExB,MAAM,eAAe;CACnB,UAAU;CACV,WAAW;CACX,oBAAoB;CACpB,kBAAkB;CAClB,oBAAoB;CACpB,gBAAgB;CAChB,uBAAuB;CACvB,OAAO;CACP,QAAQ,iBAAiB,SAAS;CAClC,OAAO;CACP,cAAc;CACd,mBAAmB;AACrB;AAEA,MAAM,eAAe,oBAA0C,GAAG,EAAE,QAAQ,sBAAsB,EAChG,MAAM;CACJ,2BAA2B,QAAQ,SAAS;CAC5C,mCAAmC,IAAI,cAAc;AACvD,EACF,EAAE;AAEF,MAAa,gBAAgB,SAA+B,WAAW;CACrE,MAAM,QAAQ,SAAS,iBAAiB,cAAc,MAAM;CAC5D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,UACA,WACA,oBACA,kBACA,oBACA,gBACA,uBACA,OACA,QACA,OACA,aACA,cACA,mBACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,OAAO,iBAAiB,KAAK;CACnC,MAAM,cAAc,eAAe;CACnC,MAAM,qBAAqB,iBAAiB;CAC5C,MAAM,OAAO,OAAuC,CAAC,CAAC;CACtD,MAAM,iBAAiB,OAAe,CAAC;CACvC,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC;CAElD,MAAM,mBAAmB,kBAAkB,iBAAiB,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;CAC5E,MAAM,iBAAiB,kBAAkB,iBAAiB,MAAM,KAAK,IAAI,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;CAGvF,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAEpC,MAAM,YAAY,UAAgC;EAChD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,gBAAgB;EACd,OAAO,aAAa,aAAa;GAC/B,GAAG;GACH,OAAO,SAAS;GAChB,iBAAiB;EACnB,EAAE;CACJ,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,mBAAmB;EACjB,IAAI,KAAK,cAAc,SAAS,eAAe,SAC7C,iBAAiB,YAAY,GAAG,CAAC;EAEnC,eAAe,UAAU,KAAK,cAAc;CAC9C,GAAG,CAAC,KAAK,aAAa,CAAC;CAEvB,MAAM,UAAU,wBAAwB,KAAK,eAAe,QAAQ;CACpE,MAAM,oBAAoB,UAAU,QACjC,KAAK,QAAQ;EACZ,IAAI,OAAO,QAAQ,IAAI,CAAC,KAAK,EAAE,OAAO,mBAAmB,GAAG,mBAC1D,oBAACD,cAAD;GAEE,SAAS;GACT,eAAe,KAAK,QAAQ,aAAa,GAAI,CAAC;GAC9C,SAAS,EAAE,SAAS,KAAK,QAAQ,aAAa,IAAK;cAEjD,UACA,oBAAC,uBAAD;IACE,MAAM,SAAS;KACb,IAAI,MACF,KAAK,QAAQ,aAAa,MAAO;UAEjC,OAAO,KAAK,QAAQ,aAAa;IAErC;IACA,MAAM;IACN,SAAS,OAAO,iBAAiB,IAAI,KAAK;IAC/B;IACX,oBAAoB;IACF;IACE;IACpB,QAAQ,sBAAsB,QAAQ,eAAe,IAAI;IACzD,cAAc;IACd,YAAY;IACZ,GAAI,UAAU,gBAAgB,EAC5B,OAAO;KACL,GAAG,2BAA2B;MAC5B;MACA,UAAU;MACV,oBAAoB;MACpB,WAAW;KACb,CAAC;KACD,GAAG;IACL,EACF,CAAC;GACF,CAAA;EAEO,GApCL,aAAa,EAoCR,CACb;EAED,OAAO;CACT,GACA,CAAC,CACH;CAEA,OACE,qBAAC,gBAAD;EAA8B;EAAc,GAAI;YAAhD;GACE,oBAAC,KAAD;IAAK,GAAI,UAAU,MAAM;IAAG,iBAAc;IAAa,GAAI;cACzD,oBAAC,iBAAD,EAAA,UAAkB,kBAAkB,cAA+B,CAAA;GAChE,CAAA;GAEL,oBAAC,KAAD;IAAK,GAAI,UAAU,MAAM;IAAG,iBAAc;IAAW,GAAI;cACvD,oBAAC,iBAAD,EAAA,UAAkB,kBAAkB,YAA6B,CAAA;GAC9D,CAAA;GAEL,oBAAC,KAAD;IACE,GAAI,UAAU,QAAQ,EAAE,WAAW,aAAa,WAAW,UAAU,CAAC;IACtE,iBAAc;IACd,GAAI;cAEJ,oBAAC,iBAAD,EAAA,UAAkB,kBAAkB,aAA8B,CAAA;GAC/D,CAAA;GAEL,oBAAC,KAAD;IACE,GAAI,UAAU,QAAQ,EAAE,WAAW,aAAa,WAAW,UAAU,CAAC;IACtE,iBAAc;IACd,GAAI;cAEJ,oBAAC,iBAAD,EAAA,UAAkB,kBAAkB,gBAAiC,CAAA;GAClE,CAAA;GAEL,oBAAC,KAAD;IAAK,GAAI,UAAU,MAAM;IAAG,iBAAc;IAAc,GAAI;cAC1D,oBAAC,iBAAD,EAAA,UAAkB,kBAAkB,eAAgC,CAAA;GACjE,CAAA;GAEL,oBAAC,KAAD;IAAK,GAAI,UAAU,MAAM;IAAG,iBAAc;IAAgB,GAAI;cAC5D,oBAAC,iBAAD,EAAA,UAAkB,kBAAkB,iBAAkC,CAAA;GACnE,CAAA;EACS;;AAEpB,CAAC;AAED,cAAc,UAAUE;AACxB,cAAc,eAAe;AAC7B,cAAc,cAAc;AAC5B,cAAc,OAAO,cAAc;AACnC,cAAc,OAAO,cAAc;AACnC,cAAc,SAAS,cAAc;AACrC,cAAc,QAAQ,cAAc;AACpC,cAAc,aAAa,cAAc;AACzC,cAAc,cAAc,cAAc"}
package/esm/get-grouped-notifications/get-grouped-notifications.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"get-grouped-notifications.mjs","names":[],"sources":["../../src/get-grouped-notifications/get-grouped-notifications.ts"],"sourcesContent":["import { NotificationData, NotificationPosition } from '../notifications.store';\n\nexport type GroupedNotifications = Record<NotificationPosition, NotificationData[]>;\n\nexport const positions: NotificationPosition[] = [\n 'bottom-center',\n 'bottom-left',\n 'bottom-right',\n 'top-center',\n 'top-left',\n 'top-right',\n];\n\nexport function getGroupedNotifications(\n notifications: NotificationData[],\n defaultPosition: NotificationPosition\n) {\n return notifications.reduce<GroupedNotifications>(\n (acc, notification) => {\n acc[notification.position || defaultPosition].push(notification);\n return acc;\n },\n positions.reduce<GroupedNotifications>((acc, item) => {\n acc[item] = [];\n return acc;\n }, {} as GroupedNotifications)\n );\n}\n"],"mappings":";;AAIA,MAAa,YAAoC;CAC/C;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAgB,wBACd,eACA,iBACA;CACA,OAAO,cAAc,QAClB,KAAK,iBAAiB;EACrB,IAAI,aAAa,YAAY,iBAAiB,KAAK,YAAY;EAC/D,OAAO;CACT,GACA,UAAU,QAA8B,KAAK,SAAS;EACpD,IAAI,QAAQ,CAAC;EACb,OAAO;CACT,GAAG,CAAC,CAAyB,CAC/B;AACF"}
1
+ {"version":3,"file":"get-grouped-notifications.mjs","names":[],"sources":["../../src/get-grouped-notifications/get-grouped-notifications.ts"],"sourcesContent":["import { NotificationData, NotificationPosition } from '../notifications.store';\n\nexport type GroupedNotifications = Record<NotificationPosition, NotificationData[]>;\n\nexport const positions: NotificationPosition[] = [\n 'bottom-center',\n 'bottom-left',\n 'bottom-right',\n 'top-center',\n 'top-left',\n 'top-right',\n];\n\nexport function getGroupedNotifications(\n notifications: NotificationData[],\n defaultPosition: NotificationPosition\n) {\n return notifications.reduce<GroupedNotifications>(\n (acc, notification) => {\n acc[notification.position || defaultPosition].push(notification);\n return acc;\n },\n positions.reduce<GroupedNotifications>((acc, item) => {\n acc[item] = [];\n return acc;\n }, {} as GroupedNotifications)\n );\n}\n"],"mappings":";;AAIA,MAAa,YAAoC;CAC/C;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAgB,wBACd,eACA,iBACA;CACA,OAAO,cAAc,QAClB,KAAK,iBAAiB;EACrB,IAAI,aAAa,YAAY,gBAAgB,CAAC,KAAK,YAAY;EAC/D,OAAO;CACT,GACA,UAAU,QAA8B,KAAK,SAAS;EACpD,IAAI,QAAQ,CAAC;EACb,OAAO;CACT,GAAG,CAAC,CAAyB,CAC/B;AACF"}
package/esm/notifications.store.mjs CHANGED
@@ -2,16 +2,23 @@
2
2
  import { randomId } from "@mantine/hooks";
3
3
  import { createStore, useStore } from "@mantine/store";
4
4
  //#region packages/@mantine/notifications/src/notifications.store.ts
5
+ let notificationSequence = 0;
5
6
  function getDistributedNotifications(data, defaultPosition, limit) {
6
7
  const queue = [];
7
8
  const notifications = [];
8
- const count = {};
9
+ const groups = /* @__PURE__ */ new Map();
9
10
  for (const item of data) {
10
11
  const position = item.position || defaultPosition;
11
- count[position] = count[position] || 0;
12
- count[position] += 1;
13
- if (count[position] <= limit) notifications.push(item);
14
- else queue.push(item);
12
+ const group = groups.get(position);
13
+ if (group) group.push(item);
14
+ else groups.set(position, [item]);
15
+ }
16
+ for (const group of groups.values()) {
17
+ group.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (a.__sequence ?? 0) - (b.__sequence ?? 0));
18
+ group.forEach((item, index) => {
19
+ if (index < limit) notifications.push(item);
20
+ else queue.push(item);
21
+ });
15
22
  }
16
23
  return {
17
24
  notifications,
@@ -28,7 +35,12 @@ const notificationsStore = createNotificationsStore();
28
35
  const useNotifications = (store = notificationsStore) => useStore(store);
29
36
  function updateNotificationsState(store, update) {
30
37
  const state = store.getState();
31
- const updated = getDistributedNotifications(update([...state.notifications, ...state.queue]), state.defaultPosition, state.limit);
38
+ const notifications = update([...state.notifications, ...state.queue]);
39
+ for (const item of notifications) if (item.__sequence === void 0) {
40
+ item.__sequence = notificationSequence;
41
+ notificationSequence += 1;
42
+ }
43
+ const updated = getDistributedNotifications(notifications, state.defaultPosition, state.limit);
32
44
  store.setState({
33
45
  notifications: updated.notifications,
34
46
  queue: updated.queue,
@@ -71,7 +83,8 @@ function cleanNotifications(store = notificationsStore) {
71
83
  updateNotificationsState(store, () => []);
72
84
  }
73
85
  function cleanNotificationsQueue(store = notificationsStore) {
74
- updateNotificationsState(store, (notifications) => notifications.slice(0, store.getState().limit));
86
+ const { defaultPosition, limit } = store.getState();
87
+ updateNotificationsState(store, (notifications) => getDistributedNotifications(notifications, defaultPosition, limit).notifications);
75
88
  }
76
89
  const notifications = {
77
90
  show: showNotification,
package/esm/notifications.store.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"notifications.store.mjs","names":[],"sources":["../src/notifications.store.ts"],"sourcesContent":["import { NotificationProps } from '@mantine/core';\nimport { randomId } from '@mantine/hooks';\nimport { createStore, MantineStore, useStore } from '@mantine/store';\n\nexport type NotificationPosition =\n | 'top-left'\n | 'top-right'\n | 'top-center'\n | 'bottom-left'\n | 'bottom-right'\n | 'bottom-center';\n\nexport interface NotificationData\n extends Omit<NotificationProps, 'onClose'>, Record<`data-${string}`, any> {\n /** Notification id, can be used to close or update notification */\n id?: string;\n\n /** Position of the notification, if not set, the position is determined based on `position` prop on Notifications component */\n position?: NotificationPosition;\n\n /** Notification message, required for all notifications */\n message: React.ReactNode;\n\n /** 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\nfunction getDistributedNotifications(\n data: NotificationData[],\n defaultPosition: NotificationPosition,\n limit: number\n) {\n const queue: NotificationData[] = [];\n const notifications: NotificationData[] = [];\n const count: Record<string, number> = {};\n\n for (const item of data) {\n const position = item.position || defaultPosition;\n count[position] = count[position] || 0;\n count[position] += 1;\n\n if (count[position] <= limit) {\n notifications.push(item);\n } else {\n queue.push(item);\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 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 updateNotificationsState(store, (notifications) =>\n notifications.slice(0, store.getState().limit)\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":";;;;AA+CA,SAAS,4BACP,MACA,iBACA,OACA;CACA,MAAM,QAA4B,CAAC;CACnC,MAAM,gBAAoC,CAAC;CAC3C,MAAM,QAAgC,CAAC;CAEvC,KAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,WAAW,KAAK,YAAY;EAClC,MAAM,YAAY,MAAM,aAAa;EACrC,MAAM,aAAa;EAEnB,IAAI,MAAM,aAAa,OACrB,cAAc,KAAK,IAAI;OAEvB,MAAM,KAAK,IAAI;CAEnB;CAEA,OAAO;EAAE;EAAe;CAAM;AAChC;AAEA,MAAa,iCACX,YAAgC;CAC9B,eAAe,CAAC;CAChB,OAAO,CAAC;CACR,iBAAiB;CACjB,OAAO;AACT,CAAC;AAEH,MAAa,qBAAqB,yBAAyB;AAC3D,MAAa,oBAAoB,QAA4B,uBAAuB,SAAS,KAAK;AAElG,SAAgB,yBACd,OACA,QACA;CACA,MAAM,QAAQ,MAAM,SAAS;CAE7B,MAAM,UAAU,4BADM,OAAO,CAAC,GAAG,MAAM,eAAe,GAAG,MAAM,KAAK,CACZ,GAAG,MAAM,iBAAiB,MAAM,KAAK;CAE7F,MAAM,SAAS;EACb,eAAe,QAAQ;EACvB,OAAO,QAAQ;EACf,OAAO,MAAM;EACb,iBAAiB,MAAM;CACzB,CAAC;AACH;AAEA,SAAgB,iBACd,cACA,QAA4B,oBAC5B;CACA,MAAM,KAAK,aAAa,MAAM,SAAS;CAEvC,yBAAyB,QAAQ,kBAAkB;EACjD,IAAI,aAAa,MAAM,cAAc,MAAM,MAAM,EAAE,OAAO,aAAa,EAAE,GACvE,OAAO;EAGT,OAAO,CAAC,GAAG,eAAe;GAAE,GAAG;GAAc;EAAG,CAAC;CACnD,CAAC;CAED,OAAO;AACT;AAEA,SAAgB,iBAAiB,IAAY,QAA4B,oBAAoB;CAC3F,yBAAyB,QAAQ,kBAC/B,cAAc,QAAQ,iBAAiB;EACrC,IAAI,aAAa,OAAO,IAAI;GAC1B,aAAa,UAAU,YAAY;GACnC,OAAO;EACT;EAEA,OAAO;CACT,CAAC,CACH;CAEA,OAAO;AACT;AAEA,SAAgB,mBACd,cACA,QAA4B,oBAC5B;CACA,yBAAyB,QAAQ,kBAC/B,cAAc,KAAK,SAAS;EAC1B,IAAI,KAAK,OAAO,aAAa,IAC3B,OAAO;GAAE,GAAG;GAAM,GAAG;EAAa;EAGpC,OAAO;CACT,CAAC,CACH;CAEA,OAAO,aAAa;AACtB;AAEA,SAAgB,mBAAmB,QAA4B,oBAAoB;CACjF,yBAAyB,aAAa,CAAC,CAAC;AAC1C;AAEA,SAAgB,wBAAwB,QAA4B,oBAAoB;CACtF,yBAAyB,QAAQ,kBAC/B,cAAc,MAAM,GAAG,MAAM,SAAS,EAAE,KAAK,CAC/C;AACF;AAEA,MAAa,gBAAgB;CAC3B,MAAM;CACN,MAAM;CACN,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,aAAa;AACf"}
1
+ {"version":3,"file":"notifications.store.mjs","names":[],"sources":["../src/notifications.store.ts"],"sourcesContent":["import { NotificationProps } from '@mantine/core';\nimport { randomId } from '@mantine/hooks';\nimport { createStore, MantineStore, useStore } from '@mantine/store';\n\nexport type NotificationPosition =\n | 'top-left'\n | 'top-right'\n | 'top-center'\n | 'bottom-left'\n | 'bottom-right'\n | 'bottom-center';\n\nexport interface NotificationData\n extends Omit<NotificationProps, 'onClose'>, Record<`data-${string}`, any> {\n /** Notification id, can be used to close or update notification */\n id?: string;\n\n /** Position of the notification, if not set, the position is determined based on `position` prop on Notifications component */\n position?: NotificationPosition;\n\n /** Notification message, required for all notifications */\n message: React.ReactNode;\n\n /** Display priority. Higher numbers are shown before lower ones when the number of\n * active notifications exceeds `limit`. Notifications with equal priority keep insertion\n * order (FIFO). @default 0 */\n priority?: number;\n\n /** Determines whether notification should be closed automatically,\n * number is auto close timeout in ms, overrides `autoClose` from `Notifications`\n * */\n autoClose?: boolean | number;\n\n /** Determines whether notification can be closed with close button, drag or horizontal scroll swipe, `true` by default */\n allowClose?: boolean;\n\n /** Called when notification closes */\n onClose?: (props: NotificationData) => void;\n\n /** Called when notification opens */\n onOpen?: (props: NotificationData) => void;\n}\n\nexport interface NotificationsState {\n notifications: NotificationData[];\n queue: NotificationData[];\n defaultPosition: NotificationPosition;\n limit: number;\n}\n\nexport type NotificationsStore = MantineStore<NotificationsState>;\n\ninterface SequencedNotificationData extends NotificationData {\n __sequence?: number;\n}\n\nlet notificationSequence = 0;\n\nfunction getDistributedNotifications(\n data: SequencedNotificationData[],\n defaultPosition: NotificationPosition,\n limit: number\n) {\n const queue: NotificationData[] = [];\n const notifications: NotificationData[] = [];\n const groups = new Map<string, SequencedNotificationData[]>();\n\n for (const item of data) {\n const position = item.position || defaultPosition;\n const group = groups.get(position);\n if (group) {\n group.push(item);\n } else {\n groups.set(position, [item]);\n }\n }\n\n for (const group of groups.values()) {\n group.sort(\n (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (a.__sequence ?? 0) - (b.__sequence ?? 0)\n );\n group.forEach((item, index) => {\n if (index < limit) {\n notifications.push(item);\n } else {\n queue.push(item);\n }\n });\n }\n\n return { notifications, queue };\n}\n\nexport const createNotificationsStore = () =>\n createStore<NotificationsState>({\n notifications: [],\n queue: [],\n defaultPosition: 'bottom-right',\n limit: 5,\n });\n\nexport const notificationsStore = createNotificationsStore();\nexport const useNotifications = (store: NotificationsStore = notificationsStore) => useStore(store);\n\nexport function updateNotificationsState(\n store: NotificationsStore,\n update: (notifications: NotificationData[]) => NotificationData[]\n) {\n const state = store.getState();\n const notifications = update([...state.notifications, ...state.queue]);\n\n for (const item of notifications as SequencedNotificationData[]) {\n if (item.__sequence === undefined) {\n item.__sequence = notificationSequence;\n notificationSequence += 1;\n }\n }\n\n const updated = getDistributedNotifications(notifications, state.defaultPosition, state.limit);\n\n store.setState({\n notifications: updated.notifications,\n queue: updated.queue,\n limit: state.limit,\n defaultPosition: state.defaultPosition,\n });\n}\n\nexport function showNotification(\n notification: NotificationData,\n store: NotificationsStore = notificationsStore\n) {\n const id = notification.id || randomId();\n\n updateNotificationsState(store, (notifications) => {\n if (notification.id && notifications.some((n) => n.id === notification.id)) {\n return notifications;\n }\n\n return [...notifications, { ...notification, id }];\n });\n\n return id;\n}\n\nexport function hideNotification(id: string, store: NotificationsStore = notificationsStore) {\n updateNotificationsState(store, (notifications) =>\n notifications.filter((notification) => {\n if (notification.id === id) {\n notification.onClose?.(notification);\n return false;\n }\n\n return true;\n })\n );\n\n return id;\n}\n\nexport function updateNotification(\n notification: NotificationData,\n store: NotificationsStore = notificationsStore\n) {\n updateNotificationsState(store, (notifications) =>\n notifications.map((item) => {\n if (item.id === notification.id) {\n return { ...item, ...notification };\n }\n\n return item;\n })\n );\n\n return notification.id;\n}\n\nexport function cleanNotifications(store: NotificationsStore = notificationsStore) {\n updateNotificationsState(store, () => []);\n}\n\nexport function cleanNotificationsQueue(store: NotificationsStore = notificationsStore) {\n const { defaultPosition, limit } = store.getState();\n updateNotificationsState(\n store,\n (notifications) =>\n getDistributedNotifications(notifications, defaultPosition, limit).notifications\n );\n}\n\nexport const notifications = {\n show: showNotification,\n hide: hideNotification,\n update: updateNotification,\n clean: cleanNotifications,\n cleanQueue: cleanNotificationsQueue,\n updateState: updateNotificationsState,\n} as const;\n"],"mappings":";;;;AAwDA,IAAI,uBAAuB;AAE3B,SAAS,4BACP,MACA,iBACA,OACA;CACA,MAAM,QAA4B,CAAC;CACnC,MAAM,gBAAoC,CAAC;CAC3C,MAAM,yBAAS,IAAI,IAAyC;CAE5D,KAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,WAAW,KAAK,YAAY;EAClC,MAAM,QAAQ,OAAO,IAAI,QAAQ;EACjC,IAAI,OACF,MAAM,KAAK,IAAI;OAEf,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC;CAE/B;CAEA,KAAK,MAAM,SAAS,OAAO,OAAO,GAAG;EACnC,MAAM,MACH,GAAG,OAAO,EAAE,YAAY,MAAM,EAAE,YAAY,OAAO,EAAE,cAAc,MAAM,EAAE,cAAc,EAC5F;EACA,MAAM,SAAS,MAAM,UAAU;GAC7B,IAAI,QAAQ,OACV,cAAc,KAAK,IAAI;QAEvB,MAAM,KAAK,IAAI;EAEnB,CAAC;CACH;CAEA,OAAO;EAAE;EAAe;CAAM;AAChC;AAEA,MAAa,iCACX,YAAgC;CAC9B,eAAe,CAAC;CAChB,OAAO,CAAC;CACR,iBAAiB;CACjB,OAAO;AACT,CAAC;AAEH,MAAa,qBAAqB,yBAAyB;AAC3D,MAAa,oBAAoB,QAA4B,uBAAuB,SAAS,KAAK;AAElG,SAAgB,yBACd,OACA,QACA;CACA,MAAM,QAAQ,MAAM,SAAS;CAC7B,MAAM,gBAAgB,OAAO,CAAC,GAAG,MAAM,eAAe,GAAG,MAAM,KAAK,CAAC;CAErE,KAAK,MAAM,QAAQ,eACjB,IAAI,KAAK,eAAe,KAAA,GAAW;EACjC,KAAK,aAAa;EAClB,wBAAwB;CAC1B;CAGF,MAAM,UAAU,4BAA4B,eAAe,MAAM,iBAAiB,MAAM,KAAK;CAE7F,MAAM,SAAS;EACb,eAAe,QAAQ;EACvB,OAAO,QAAQ;EACf,OAAO,MAAM;EACb,iBAAiB,MAAM;CACzB,CAAC;AACH;AAEA,SAAgB,iBACd,cACA,QAA4B,oBAC5B;CACA,MAAM,KAAK,aAAa,MAAM,SAAS;CAEvC,yBAAyB,QAAQ,kBAAkB;EACjD,IAAI,aAAa,MAAM,cAAc,MAAM,MAAM,EAAE,OAAO,aAAa,EAAE,GACvE,OAAO;EAGT,OAAO,CAAC,GAAG,eAAe;GAAE,GAAG;GAAc;EAAG,CAAC;CACnD,CAAC;CAED,OAAO;AACT;AAEA,SAAgB,iBAAiB,IAAY,QAA4B,oBAAoB;CAC3F,yBAAyB,QAAQ,kBAC/B,cAAc,QAAQ,iBAAiB;EACrC,IAAI,aAAa,OAAO,IAAI;GAC1B,aAAa,UAAU,YAAY;GACnC,OAAO;EACT;EAEA,OAAO;CACT,CAAC,CACH;CAEA,OAAO;AACT;AAEA,SAAgB,mBACd,cACA,QAA4B,oBAC5B;CACA,yBAAyB,QAAQ,kBAC/B,cAAc,KAAK,SAAS;EAC1B,IAAI,KAAK,OAAO,aAAa,IAC3B,OAAO;GAAE,GAAG;GAAM,GAAG;EAAa;EAGpC,OAAO;CACT,CAAC,CACH;CAEA,OAAO,aAAa;AACtB;AAEA,SAAgB,mBAAmB,QAA4B,oBAAoB;CACjF,yBAAyB,aAAa,CAAC,CAAC;AAC1C;AAEA,SAAgB,wBAAwB,QAA4B,oBAAoB;CACtF,MAAM,EAAE,iBAAiB,UAAU,MAAM,SAAS;CAClD,yBACE,QACC,kBACC,4BAA4B,eAAe,iBAAiB,KAAK,CAAC,CAAC,aACvE;AACF;AAEA,MAAa,gBAAgB;CAC3B,MAAM;CACN,MAAM;CACN,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,aAAa;AACf"}
package/lib/notifications.store.d.ts CHANGED
@@ -8,6 +8,10 @@ export interface NotificationData extends Omit<NotificationProps, 'onClose'>, Re
8
8
  position?: NotificationPosition;
9
9
  /** Notification message, required for all notifications */
10
10
  message: React.ReactNode;
11
+ /** Display priority. Higher numbers are shown before lower ones when the number of
12
+ * active notifications exceeds `limit`. Notifications with equal priority keep insertion
13
+ * order (FIFO). @default 0 */
14
+ priority?: number;
11
15
  /** Determines whether notification should be closed automatically,
12
16
  * number is auto close timeout in ms, overrides `autoClose` from `Notifications`
13
17
  * */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine/notifications",
3
- "version": "9.3.1",
3
+ "version": "9.4.0",
4
4
  "description": "Mantine notifications system",
5
5
  "homepage": "https://mantine.dev",
6
6
  "license": "MIT",
@@ -44,20 +44,20 @@
44
44
  "directory": "packages/@mantine/notifications"
45
45
  },
46
46
  "peerDependencies": {
47
- "@mantine/core": "9.3.1",
48
- "@mantine/hooks": "9.3.1",
47
+ "@mantine/core": "9.4.0",
48
+ "@mantine/hooks": "9.4.0",
49
49
  "react": "^19.2.0",
50
50
  "react-dom": "^19.2.0"
51
51
  },
52
52
  "dependencies": {
53
- "@mantine/store": "9.3.1",
53
+ "@mantine/store": "9.4.0",
54
54
  "react-transition-group": "4.4.5"
55
55
  },
56
56
  "devDependencies": {
57
57
  "@mantine-tests/core": "workspace:*",
58
58
  "@mantine/core": "workspace:*",
59
59
  "@mantine/hooks": "workspace:*",
60
- "react": "19.2.6",
61
- "react-dom": "19.2.6"
60
+ "react": "19.2.7",
61
+ "react-dom": "19.2.7"
62
62
  }
63
63
  }