@mantine/notifications 9.1.1 → 9.2.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 +162 -9
  2. package/cjs/NotificationContainer.cjs.map +1 -1
  3. package/cjs/Notifications.cjs +6 -1
  4. package/cjs/Notifications.cjs.map +1 -1
  5. package/cjs/notifications.store.cjs.map +1 -1
  6. package/esm/NotificationContainer.mjs +164 -11
  7. package/esm/NotificationContainer.mjs.map +1 -1
  8. package/esm/Notifications.mjs +6 -1
  9. package/esm/Notifications.mjs.map +1 -1
  10. package/esm/notifications.store.mjs.map +1 -1
  11. package/lib/NotificationContainer.d.ts +5 -1
  12. package/lib/Notifications.d.ts +4 -0
  13. package/lib/notifications.store.d.ts +2 -0
  14. package/package.json +4 -4
package/cjs/NotificationContainer.cjs CHANGED
@@ -1,46 +1,199 @@
1
1
  "use client";
2
2
  const require_get_auto_close = require("./get-auto-close/get-auto-close.cjs");
3
+ let _mantine_hooks = require("@mantine/hooks");
3
4
  let react = require("react");
4
5
  let _mantine_core = require("@mantine/core");
5
6
  let react_jsx_runtime = require("react/jsx-runtime");
6
7
  //#region packages/@mantine/notifications/src/NotificationContainer.tsx
7
- function NotificationContainer({ data, onHide, autoClose, paused, onHoverStart, onHoverEnd, ...others }) {
8
- const { autoClose: _autoClose, message, onOpen: _onOpen, ...notificationProps } = data;
8
+ const SCROLL_DISMISS_RESET_TIMEOUT = 120;
9
+ function NotificationContainer({ data, onHide, autoClose, transitionDuration, allowDragDismiss, allowScrollDismiss, paused, onHoverStart, onHoverEnd, ref, style, ...others }) {
10
+ const [offset, setOffset] = (0, react.useState)(0);
11
+ const [dismissed, setDismissed] = (0, react.useState)(false);
12
+ const [dismissDirection, setDismissDirection] = (0, react.useState)(1);
13
+ const [scrollDismissActive, setScrollDismissActive] = (0, react.useState)(false);
14
+ const theme = (0, _mantine_core.useMantineTheme)();
15
+ const { autoClose: _autoClose, message, allowClose, position: _position, style: dataStyle, withCloseButton, onOpen: _onOpen, ...notificationProps } = data;
9
16
  const autoCloseDuration = require_get_auto_close.getAutoClose(autoClose, data.autoClose);
10
17
  const autoCloseTimeout = (0, react.useRef)(-1);
11
- const [hovered, setHovered] = (0, react.useState)(false);
18
+ const hideTimeout = (0, react.useRef)(-1);
19
+ const scrollDismissTimeout = (0, react.useRef)(-1);
20
+ const notificationRef = (0, react.useRef)(null);
21
+ const hoveredRef = (0, react.useRef)(false);
22
+ const offsetRef = (0, react.useRef)(0);
23
+ const isCloseDisabled = allowClose === false;
12
24
  const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);
25
+ const cancelHide = () => window.clearTimeout(hideTimeout.current);
26
+ const cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout.current);
27
+ const setSwipeOffset = (value) => {
28
+ offsetRef.current = value;
29
+ setOffset(value);
30
+ };
13
31
  const handleHide = () => {
14
32
  onHide(data.id);
15
33
  cancelAutoClose();
34
+ cancelHide();
35
+ cancelScrollDismissReset();
16
36
  };
17
37
  const handleAutoClose = () => {
38
+ if (dismissed || active || paused || hoveredRef.current || typeof autoCloseDuration !== "number") return;
39
+ autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);
40
+ };
41
+ const getExitOffset = (direction) => {
42
+ return direction * ((notificationRef.current?.offsetWidth ?? 440) + 40);
43
+ };
44
+ const shouldDismiss = (movement, velocity) => {
45
+ const width = notificationRef.current?.offsetWidth ?? 440;
46
+ return Math.abs(movement) > width * .35 || velocity > .5;
47
+ };
48
+ const resetSwipe = () => {
49
+ cancelScrollDismissReset();
50
+ setScrollDismissActive(false);
51
+ setSwipeOffset(0);
52
+ };
53
+ const dismissNotification = (direction) => {
54
+ setDismissDirection(direction);
55
+ setDismissed(true);
56
+ setScrollDismissActive(false);
57
+ setSwipeOffset(getExitOffset(direction));
18
58
  cancelAutoClose();
19
- if (typeof autoCloseDuration === "number") autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);
59
+ cancelHide();
60
+ cancelScrollDismissReset();
61
+ hideTimeout.current = window.setTimeout(handleHide, transitionDuration);
62
+ };
63
+ const scheduleScrollDismissReset = () => {
64
+ cancelScrollDismissReset();
65
+ scrollDismissTimeout.current = window.setTimeout(() => {
66
+ setScrollDismissActive(false);
67
+ setSwipeOffset(0);
68
+ handleAutoClose();
69
+ }, SCROLL_DISMISS_RESET_TIMEOUT);
70
+ };
71
+ const { ref: dragRef, active } = (0, _mantine_hooks.useDrag)((state) => {
72
+ if (dismissed) return;
73
+ if (state.first) cancelAutoClose();
74
+ if (state.last) {
75
+ if (state.tap || state.canceled) {
76
+ setSwipeOffset(0);
77
+ handleAutoClose();
78
+ return;
79
+ }
80
+ const movement = state.movement[0];
81
+ const direction = movement === 0 ? state.direction[0] === -1 ? -1 : 1 : movement > 0 ? 1 : -1;
82
+ if (shouldDismiss(movement, state.velocity[0])) dismissNotification(direction);
83
+ else {
84
+ setSwipeOffset(0);
85
+ handleAutoClose();
86
+ }
87
+ } else setSwipeOffset(state.movement[0]);
88
+ }, {
89
+ axis: "x",
90
+ threshold: 5,
91
+ filterTaps: true,
92
+ enabled: allowDragDismiss && !isCloseDisabled && !dismissed
93
+ });
94
+ const mergedRef = (0, _mantine_hooks.useMergedRef)(ref, notificationRef, dragRef);
95
+ const resolvedStyle = (0, _mantine_core.getStyleObject)(style, theme);
96
+ const resolvedDataStyle = (0, _mantine_core.getStyleObject)(dataStyle, theme);
97
+ const baseStyle = {
98
+ ...resolvedStyle,
99
+ ...resolvedDataStyle
100
+ };
101
+ const baseOpacity = typeof baseStyle.opacity === "number" ? baseStyle.opacity : 1;
102
+ const swipeOpacity = dismissed ? 0 : 1 - Math.min(Math.abs(offset) / 200, 1) * .6;
103
+ const resolvedTransitionDuration = baseStyle.transitionDuration ?? `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`;
104
+ const notificationStyle = {
105
+ ...baseStyle,
106
+ ["--notifications-state-transform"]: typeof baseStyle.transform === "string" ? baseStyle.transform : "translateX(0)",
107
+ ["--notifications-state-opacity"]: String(baseOpacity),
108
+ ["--notifications-swipe-offset"]: `${offset}px`,
109
+ ["--notifications-swipe-opacity"]: String(swipeOpacity),
110
+ transform: "var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)",
111
+ opacity: "calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))",
112
+ transitionDuration: active || scrollDismissActive ? "0ms, 0ms, 0ms" : resolvedTransitionDuration,
113
+ cursor: "default",
114
+ touchAction: "pan-y"
20
115
  };
21
116
  const handleMouseEnter = () => {
22
- setHovered(true);
117
+ hoveredRef.current = true;
118
+ cancelAutoClose();
23
119
  onHoverStart?.();
24
120
  };
25
121
  const handleMouseLeave = () => {
26
- setHovered(false);
122
+ hoveredRef.current = false;
123
+ if (!scrollDismissActive) {
124
+ resetSwipe();
125
+ handleAutoClose();
126
+ }
27
127
  onHoverEnd?.();
28
128
  };
129
+ const handleWheel = (0, react.useEffectEvent)((event) => {
130
+ if (dismissed || active) return;
131
+ const isDocumentEvent = event.currentTarget === document;
132
+ if (!isDocumentEvent && !hoveredRef.current) return;
133
+ const { deltaX, deltaY } = event;
134
+ if (Math.abs(deltaX) <= Math.abs(deltaY) || deltaX === 0) return;
135
+ if (!allowScrollDismiss || isCloseDisabled) return;
136
+ if (!isDocumentEvent) {
137
+ event.preventDefault();
138
+ event.stopPropagation();
139
+ }
140
+ cancelAutoClose();
141
+ setScrollDismissActive(true);
142
+ const nextOffset = offsetRef.current - deltaX;
143
+ const direction = nextOffset > 0 ? 1 : -1;
144
+ if (shouldDismiss(nextOffset, 0)) {
145
+ dismissNotification(direction);
146
+ return;
147
+ }
148
+ setSwipeOffset(nextOffset);
149
+ scheduleScrollDismissReset();
150
+ });
151
+ (0, react.useEffect)(() => {
152
+ if (!scrollDismissActive) return;
153
+ document.addEventListener("wheel", handleWheel, { passive: false });
154
+ return () => document.removeEventListener("wheel", handleWheel, { passive: false });
155
+ }, [scrollDismissActive]);
156
+ (0, react.useEffect)(() => {
157
+ const handleResize = () => {
158
+ if (dismissed) setSwipeOffset(getExitOffset(dismissDirection));
159
+ };
160
+ window.addEventListener("resize", handleResize);
161
+ return () => window.removeEventListener("resize", handleResize);
162
+ }, [dismissDirection, dismissed]);
163
+ (0, react.useEffect)(() => {
164
+ const node = notificationRef.current;
165
+ if (!node) return;
166
+ node.addEventListener("wheel", handleWheel, { passive: false });
167
+ return () => node.removeEventListener("wheel", handleWheel, { passive: false });
168
+ }, []);
169
+ (0, react.useEffect)(() => {
170
+ return () => {
171
+ cancelHide();
172
+ cancelScrollDismissReset();
173
+ };
174
+ }, []);
29
175
  (0, react.useEffect)(() => {
30
176
  data.onOpen?.(data);
31
177
  }, []);
32
178
  (0, react.useEffect)(() => {
33
179
  handleAutoClose();
34
180
  return cancelAutoClose;
35
- }, [autoCloseDuration]);
181
+ }, [
182
+ autoCloseDuration,
183
+ active,
184
+ dismissed
185
+ ]);
36
186
  (0, react.useEffect)(() => {
37
- if (paused || hovered) cancelAutoClose();
187
+ if (paused) cancelAutoClose();
38
188
  else handleAutoClose();
39
189
  return cancelAutoClose;
40
- }, [paused, hovered]);
190
+ }, [paused]);
41
191
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Notification, {
192
+ ref: mergedRef,
42
193
  ...others,
194
+ style: notificationStyle,
43
195
  ...notificationProps,
196
+ withCloseButton: isCloseDisabled ? false : withCloseButton,
44
197
  onClose: handleHide,
45
198
  onMouseEnter: handleMouseEnter,
46
199
  onMouseLeave: handleMouseLeave,
package/cjs/NotificationContainer.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationContainer.cjs","names":["getAutoClose","Notification"],"sources":["../src/NotificationContainer.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { Notification, NotificationProps } from '@mantine/core';\nimport { getAutoClose } from './get-auto-close/get-auto-close';\nimport { NotificationData } from './notifications.store';\n\ninterface NotificationContainerProps extends NotificationProps {\n data: NotificationData;\n onHide: (id: string) => void;\n autoClose: number | false;\n paused: boolean;\n onHoverStart?: () => void;\n onHoverEnd?: () => void;\n}\n\nexport function NotificationContainer({\n data,\n onHide,\n autoClose,\n paused,\n onHoverStart,\n onHoverEnd,\n ...others\n}: NotificationContainerProps) {\n const { autoClose: _autoClose, message, onOpen: _onOpen, ...notificationProps } = data;\n const autoCloseDuration = getAutoClose(autoClose, data.autoClose);\n const autoCloseTimeout = useRef<number>(-1);\n const [hovered, setHovered] = useState(false);\n\n const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);\n\n const handleHide = () => {\n onHide(data.id!);\n cancelAutoClose();\n };\n\n const handleAutoClose = () => {\n cancelAutoClose();\n if (typeof autoCloseDuration === 'number') {\n autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);\n }\n };\n\n const handleMouseEnter = () => {\n setHovered(true);\n onHoverStart?.();\n };\n\n const handleMouseLeave = () => {\n setHovered(false);\n onHoverEnd?.();\n };\n\n useEffect(() => {\n data.onOpen?.(data);\n }, []);\n\n useEffect(() => {\n handleAutoClose();\n return cancelAutoClose;\n }, [autoCloseDuration]);\n\n useEffect(() => {\n if (paused || hovered) {\n cancelAutoClose();\n } else {\n handleAutoClose();\n }\n\n return cancelAutoClose;\n }, [paused, hovered]);\n\n return (\n <Notification\n {...others}\n {...notificationProps}\n onClose={handleHide}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {message}\n </Notification>\n );\n}\n\nNotificationContainer.displayName = '@mantine/notifications/NotificationContainer';\n"],"mappings":";;;;;;AAcA,SAAgB,sBAAsB,EACpC,MACA,QACA,WACA,QACA,cACA,YACA,GAAG,UAC0B;CAC7B,MAAM,EAAE,WAAW,YAAY,SAAS,QAAQ,SAAS,GAAG,sBAAsB;CAClF,MAAM,oBAAoBA,uBAAAA,aAAa,WAAW,KAAK,UAAU;CACjE,MAAM,oBAAA,GAAA,MAAA,QAAkC,GAAG;CAC3C,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAE7C,MAAM,wBAAwB,OAAO,aAAa,iBAAiB,QAAQ;CAE3E,MAAM,mBAAmB;AACvB,SAAO,KAAK,GAAI;AAChB,mBAAiB;;CAGnB,MAAM,wBAAwB;AAC5B,mBAAiB;AACjB,MAAI,OAAO,sBAAsB,SAC/B,kBAAiB,UAAU,OAAO,WAAW,YAAY,kBAAkB;;CAI/E,MAAM,yBAAyB;AAC7B,aAAW,KAAK;AAChB,kBAAgB;;CAGlB,MAAM,yBAAyB;AAC7B,aAAW,MAAM;AACjB,gBAAc;;AAGhB,EAAA,GAAA,MAAA,iBAAgB;AACd,OAAK,SAAS,KAAK;IAClB,EAAE,CAAC;AAEN,EAAA,GAAA,MAAA,iBAAgB;AACd,mBAAiB;AACjB,SAAO;IACN,CAAC,kBAAkB,CAAC;AAEvB,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,UAAU,QACZ,kBAAiB;MAEjB,kBAAiB;AAGnB,SAAO;IACN,CAAC,QAAQ,QAAQ,CAAC;AAErB,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,cAAD;EACE,GAAI;EACJ,GAAI;EACJ,SAAS;EACT,cAAc;EACd,cAAc;YAEb;EACY,CAAA;;AAInB,sBAAsB,cAAc"}
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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"}
package/cjs/Notifications.cjs CHANGED
@@ -15,6 +15,8 @@ const defaultProps = {
15
15
  position: "bottom-right",
16
16
  autoClose: 4e3,
17
17
  transitionDuration: 250,
18
+ allowDragDismiss: true,
19
+ allowScrollDismiss: true,
18
20
  containerWidth: 440,
19
21
  notificationMaxHeight: 200,
20
22
  limit: 5,
@@ -29,7 +31,7 @@ const varsResolver = (0, _mantine_core.createVarsResolver)((_, { zIndex, contain
29
31
  } }));
30
32
  const Notifications = (0, _mantine_core.factory)((_props) => {
31
33
  const props = (0, _mantine_core.useProps)("Notifications", defaultProps, _props);
32
- const { classNames, className, style, styles, unstyled, vars, attributes, position, autoClose, transitionDuration, containerWidth, notificationMaxHeight, limit, zIndex, store, portalProps, withinPortal, pauseResetOnHover, ...others } = props;
34
+ const { classNames, className, style, styles, unstyled, vars, attributes, position, autoClose, transitionDuration, allowDragDismiss, allowScrollDismiss, containerWidth, notificationMaxHeight, limit, zIndex, store, portalProps, withinPortal, pauseResetOnHover, ...others } = props;
33
35
  const theme = (0, _mantine_core.useMantineTheme)();
34
36
  const data = require_notifications_store.useNotifications(store);
35
37
  const forceUpdate = (0, _mantine_hooks.useForceUpdate)();
@@ -77,6 +79,9 @@ const Notifications = (0, _mantine_core.factory)((_props) => {
77
79
  data: notification,
78
80
  onHide: (id) => require_notifications_store.hideNotification(id, store),
79
81
  autoClose,
82
+ transitionDuration: duration,
83
+ allowDragDismiss,
84
+ allowScrollDismiss,
80
85
  paused: pauseResetOnHover === "all" ? hoveredCount > 0 : false,
81
86
  onHoverStart: handleHoverStart,
82
87
  onHoverEnd: handleHoverEnd,
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 /** 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 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 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 }\n }}\n data={notification}\n onHide={(id) => hideNotification(id, store)}\n autoClose={autoClose}\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,MAAM,aAAkBA,uBAAAA;AA0DxB,MAAM,eAAe;CACnB,UAAU;CACV,WAAW;CACX,oBAAoB;CACpB,gBAAgB;CAChB,uBAAuB;CACvB,OAAO;CACP,SAAA,GAAA,cAAA,kBAAyB,UAAU;CACnC,OAAOC,4BAAAA;CACP,cAAc;CACd,mBAAmB;CACpB;AAED,MAAM,gBAAA,GAAA,cAAA,qBAAyD,GAAG,EAAE,QAAQ,sBAAsB,EAChG,MAAM;CACJ,2BAA2B,QAAQ,UAAU;CAC7C,oCAAA,GAAA,cAAA,KAAuC,eAAe;CACvD,EACF,EAAE;AAEH,MAAa,iBAAA,GAAA,cAAA,UAA+C,WAAW;CACrE,MAAM,SAAA,GAAA,cAAA,UAAiB,iBAAiB,cAAc,OAAO;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,UACA,WACA,oBACA,gBACA,uBACA,OACA,QACA,OACA,aACA,cACA,mBACA,GAAG,WACD;CAEJ,MAAM,SAAA,GAAA,cAAA,kBAAyB;CAC/B,MAAM,OAAOC,4BAAAA,iBAAiB,MAAM;CACpC,MAAM,eAAA,GAAA,eAAA,iBAA8B;CACpC,MAAM,sBAAA,GAAA,eAAA,mBAAuC;CAC7C,MAAM,QAAA,GAAA,MAAA,QAA8C,EAAE,CAAC;CACvD,MAAM,kBAAA,GAAA,MAAA,QAAgC,EAAE;CACxC,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,UAA4B,EAAE;CAEnD,MAAM,oBAAA,GAAA,MAAA,mBAAqC,iBAAiB,MAAM,IAAI,EAAE,EAAE,EAAE,CAAC;CAC7E,MAAM,kBAAA,GAAA,MAAA,mBAAmC,iBAAiB,MAAM,KAAK,IAAI,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;CAGxF,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAEpC,MAAM,aAAA,GAAA,cAAA,WAA4C;EAChD,MAAM;EACN,SAAA,6BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,EAAA,GAAA,MAAA,iBAAgB;AACd,SAAO,aAAa,aAAa;GAC/B,GAAG;GACH,OAAO,SAAS;GAChB,iBAAiB;GAClB,EAAE;IACF,CAAC,OAAO,SAAS,CAAC;AAErB,EAAA,GAAA,eAAA,oBAAmB;AACjB,MAAI,KAAK,cAAc,SAAS,eAAe,QAC7C,kBAAiB,aAAa,EAAE,EAAE;AAEpC,iBAAe,UAAU,KAAK,cAAc;IAC3C,CAAC,KAAK,cAAc,CAAC;CAExB,MAAM,UAAUC,kCAAAA,wBAAwB,KAAK,eAAe,SAAS;CACrE,MAAM,oBAAoBC,kCAAAA,UAAU,QACjC,KAAK,QAAQ;AACZ,MAAI,OAAO,QAAQ,KAAK,KAAK,EAAE,OAAO,mBAAmB,GAAG,mBAC1D,iBAAA,GAAA,kBAAA,KAAC,YAAD;GAEE,SAAS;GACT,eAAe,KAAK,QAAQ,aAAa,IAAK;GAC9C,SAAS,EAAE,SAAS,KAAK,QAAQ,aAAa,KAAM;cAElD,UACA,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD;IACE,MAAM,SAAS;AACb,SAAI,KACF,MAAK,QAAQ,aAAa,MAAO;;IAGrC,MAAM;IACN,SAAS,OAAOC,4BAAAA,iBAAiB,IAAI,MAAM;IAChC;IACX,QAAQ,sBAAsB,QAAQ,eAAe,IAAI;IACzD,cAAc;IACd,YAAY;IACZ,GAAI,UAAU,gBAAgB,EAC5B,OAAO;KACL,GAAGC,sCAAAA,2BAA2B;MAC5B;MACA,UAAU;MACV,oBAAoB;MACpB,WAAW;MACZ,CAAC;KACF,GAAG;KACJ,EACF,CAAC;IACF,CAAA;GAEO,EA/BN,aAAa,GA+BP,CACb;AAEF,SAAO;IAET,EAAE,CACH;AAED,QACE,iBAAA,GAAA,kBAAA,MAACC,cAAAA,gBAAD;EAA8B;EAAc,GAAI;YAAhD;GACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,KAAD;IAAK,GAAI,UAAU,OAAO;IAAE,iBAAc;IAAa,GAAI;cACzD,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,iBAAD,EAAA,UAAkB,kBAAkB,eAAgC,CAAA;IAChE,CAAA;GAEN,iBAAA,GAAA,kBAAA,KAACD,cAAAA,KAAD;IAAK,GAAI,UAAU,OAAO;IAAE,iBAAc;IAAW,GAAI;cACvD,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,iBAAD,EAAA,UAAkB,kBAAkB,aAA8B,CAAA;IAC9D,CAAA;GAEN,iBAAA,GAAA,kBAAA,KAACD,cAAAA,KAAD;IACE,GAAI,UAAU,QAAQ,EAAE,WAAWE,cAAAA,aAAa,WAAW,WAAW,CAAC;IACvE,iBAAc;IACd,GAAI;cAEJ,iBAAA,GAAA,kBAAA,KAACD,uBAAAA,iBAAD,EAAA,UAAkB,kBAAkB,cAA+B,CAAA;IAC/D,CAAA;GAEN,iBAAA,GAAA,kBAAA,KAACD,cAAAA,KAAD;IACE,GAAI,UAAU,QAAQ,EAAE,WAAWE,cAAAA,aAAa,WAAW,WAAW,CAAC;IACvE,iBAAc;IACd,GAAI;cAEJ,iBAAA,GAAA,kBAAA,KAACD,uBAAAA,iBAAD,EAAA,UAAkB,kBAAkB,iBAAkC,CAAA;IAClE,CAAA;GAEN,iBAAA,GAAA,kBAAA,KAACD,cAAAA,KAAD;IAAK,GAAI,UAAU,OAAO;IAAE,iBAAc;IAAc,GAAI;cAC1D,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,iBAAD,EAAA,UAAkB,kBAAkB,gBAAiC,CAAA;IACjE,CAAA;GAEN,iBAAA,GAAA,kBAAA,KAACD,cAAAA,KAAD;IAAK,GAAI,UAAU,OAAO;IAAE,iBAAc;IAAgB,GAAI;cAC5D,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,iBAAD,EAAA,UAAkB,kBAAkB,kBAAmC,CAAA;IACnE,CAAA;GACS;;EAEnB;AAEF,cAAc,UAAUE,6BAAAA;AACxB,cAAc,eAAe;AAC7B,cAAc,cAAc;AAC5B,cAAc,OAAOC,4BAAAA,cAAc;AACnC,cAAc,OAAOA,4BAAAA,cAAc;AACnC,cAAc,SAASA,4BAAAA,cAAc;AACrC,cAAc,QAAQA,4BAAAA,cAAc;AACpC,cAAc,aAAaA,4BAAAA,cAAc;AACzC,cAAc,cAAcA,4BAAAA,cAAc"}
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 }\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/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 /** 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":";;;;AA4CA,SAAS,4BACP,MACA,iBACA,OACA;CACA,MAAM,QAA4B,EAAE;CACpC,MAAM,gBAAoC,EAAE;CAC5C,MAAM,QAAgC,EAAE;AAExC,MAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,WAAW,KAAK,YAAY;AAClC,QAAM,YAAY,MAAM,aAAa;AACrC,QAAM,aAAa;AAEnB,MAAI,MAAM,aAAa,MACrB,eAAc,KAAK,KAAK;MAExB,OAAM,KAAK,KAAK;;AAIpB,QAAO;EAAE;EAAe;EAAO;;AAGjC,MAAa,kCAAA,GAAA,eAAA,aACqB;CAC9B,eAAe,EAAE;CACjB,OAAO,EAAE;CACT,iBAAiB;CACjB,OAAO;CACR,CAAC;AAEJ,MAAa,qBAAqB,0BAA0B;AAC5D,MAAa,oBAAoB,QAA4B,wBAAA,GAAA,eAAA,UAAgC,MAAM;AAEnG,SAAgB,yBACd,OACA,QACA;CACA,MAAM,QAAQ,MAAM,UAAU;CAE9B,MAAM,UAAU,4BADM,OAAO,CAAC,GAAG,MAAM,eAAe,GAAG,MAAM,MAAM,CAAC,EACX,MAAM,iBAAiB,MAAM,MAAM;AAE9F,OAAM,SAAS;EACb,eAAe,QAAQ;EACvB,OAAO,QAAQ;EACf,OAAO,MAAM;EACb,iBAAiB,MAAM;EACxB,CAAC;;AAGJ,SAAgB,iBACd,cACA,QAA4B,oBAC5B;CACA,MAAM,KAAK,aAAa,OAAA,GAAA,eAAA,WAAgB;AAExC,0BAAyB,QAAQ,kBAAkB;AACjD,MAAI,aAAa,MAAM,cAAc,MAAM,MAAM,EAAE,OAAO,aAAa,GAAG,CACxE,QAAO;AAGT,SAAO,CAAC,GAAG,eAAe;GAAE,GAAG;GAAc;GAAI,CAAC;GAClD;AAEF,QAAO;;AAGT,SAAgB,iBAAiB,IAAY,QAA4B,oBAAoB;AAC3F,0BAAyB,QAAQ,kBAC/B,cAAc,QAAQ,iBAAiB;AACrC,MAAI,aAAa,OAAO,IAAI;AAC1B,gBAAa,UAAU,aAAa;AACpC,UAAO;;AAGT,SAAO;GACP,CACH;AAED,QAAO;;AAGT,SAAgB,mBACd,cACA,QAA4B,oBAC5B;AACA,0BAAyB,QAAQ,kBAC/B,cAAc,KAAK,SAAS;AAC1B,MAAI,KAAK,OAAO,aAAa,GAC3B,QAAO;GAAE,GAAG;GAAM,GAAG;GAAc;AAGrC,SAAO;GACP,CACH;AAED,QAAO,aAAa;;AAGtB,SAAgB,mBAAmB,QAA4B,oBAAoB;AACjF,0BAAyB,aAAa,EAAE,CAAC;;AAG3C,SAAgB,wBAAwB,QAA4B,oBAAoB;AACtF,0BAAyB,QAAQ,kBAC/B,cAAc,MAAM,GAAG,MAAM,UAAU,CAAC,MAAM,CAC/C;;AAGH,MAAa,gBAAgB;CAC3B,MAAM;CACN,MAAM;CACN,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,aAAa;CACd"}
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,EAAE;CACpC,MAAM,gBAAoC,EAAE;CAC5C,MAAM,QAAgC,EAAE;AAExC,MAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,WAAW,KAAK,YAAY;AAClC,QAAM,YAAY,MAAM,aAAa;AACrC,QAAM,aAAa;AAEnB,MAAI,MAAM,aAAa,MACrB,eAAc,KAAK,KAAK;MAExB,OAAM,KAAK,KAAK;;AAIpB,QAAO;EAAE;EAAe;EAAO;;AAGjC,MAAa,kCAAA,GAAA,eAAA,aACqB;CAC9B,eAAe,EAAE;CACjB,OAAO,EAAE;CACT,iBAAiB;CACjB,OAAO;CACR,CAAC;AAEJ,MAAa,qBAAqB,0BAA0B;AAC5D,MAAa,oBAAoB,QAA4B,wBAAA,GAAA,eAAA,UAAgC,MAAM;AAEnG,SAAgB,yBACd,OACA,QACA;CACA,MAAM,QAAQ,MAAM,UAAU;CAE9B,MAAM,UAAU,4BADM,OAAO,CAAC,GAAG,MAAM,eAAe,GAAG,MAAM,MAAM,CAAC,EACX,MAAM,iBAAiB,MAAM,MAAM;AAE9F,OAAM,SAAS;EACb,eAAe,QAAQ;EACvB,OAAO,QAAQ;EACf,OAAO,MAAM;EACb,iBAAiB,MAAM;EACxB,CAAC;;AAGJ,SAAgB,iBACd,cACA,QAA4B,oBAC5B;CACA,MAAM,KAAK,aAAa,OAAA,GAAA,eAAA,WAAgB;AAExC,0BAAyB,QAAQ,kBAAkB;AACjD,MAAI,aAAa,MAAM,cAAc,MAAM,MAAM,EAAE,OAAO,aAAa,GAAG,CACxE,QAAO;AAGT,SAAO,CAAC,GAAG,eAAe;GAAE,GAAG;GAAc;GAAI,CAAC;GAClD;AAEF,QAAO;;AAGT,SAAgB,iBAAiB,IAAY,QAA4B,oBAAoB;AAC3F,0BAAyB,QAAQ,kBAC/B,cAAc,QAAQ,iBAAiB;AACrC,MAAI,aAAa,OAAO,IAAI;AAC1B,gBAAa,UAAU,aAAa;AACpC,UAAO;;AAGT,SAAO;GACP,CACH;AAED,QAAO;;AAGT,SAAgB,mBACd,cACA,QAA4B,oBAC5B;AACA,0BAAyB,QAAQ,kBAC/B,cAAc,KAAK,SAAS;AAC1B,MAAI,KAAK,OAAO,aAAa,GAC3B,QAAO;GAAE,GAAG;GAAM,GAAG;GAAc;AAGrC,SAAO;GACP,CACH;AAED,QAAO,aAAa;;AAGtB,SAAgB,mBAAmB,QAA4B,oBAAoB;AACjF,0BAAyB,aAAa,EAAE,CAAC;;AAG3C,SAAgB,wBAAwB,QAA4B,oBAAoB;AACtF,0BAAyB,QAAQ,kBAC/B,cAAc,MAAM,GAAG,MAAM,UAAU,CAAC,MAAM,CAC/C;;AAGH,MAAa,gBAAgB;CAC3B,MAAM;CACN,MAAM;CACN,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,aAAa;CACd"}
package/esm/NotificationContainer.mjs CHANGED
@@ -1,46 +1,199 @@
1
1
  "use client";
2
2
  import { getAutoClose } from "./get-auto-close/get-auto-close.mjs";
3
- import { useEffect, useRef, useState } from "react";
4
- import { Notification } from "@mantine/core";
3
+ import { useDrag, useMergedRef } from "@mantine/hooks";
4
+ import { useEffect, useEffectEvent, useRef, useState } from "react";
5
+ import { Notification, getStyleObject, useMantineTheme } from "@mantine/core";
5
6
  import { jsx } from "react/jsx-runtime";
6
7
  //#region packages/@mantine/notifications/src/NotificationContainer.tsx
7
- function NotificationContainer({ data, onHide, autoClose, paused, onHoverStart, onHoverEnd, ...others }) {
8
- const { autoClose: _autoClose, message, onOpen: _onOpen, ...notificationProps } = data;
8
+ const SCROLL_DISMISS_RESET_TIMEOUT = 120;
9
+ function NotificationContainer({ data, onHide, autoClose, transitionDuration, allowDragDismiss, allowScrollDismiss, paused, onHoverStart, onHoverEnd, ref, style, ...others }) {
10
+ const [offset, setOffset] = useState(0);
11
+ const [dismissed, setDismissed] = useState(false);
12
+ const [dismissDirection, setDismissDirection] = useState(1);
13
+ const [scrollDismissActive, setScrollDismissActive] = useState(false);
14
+ const theme = useMantineTheme();
15
+ const { autoClose: _autoClose, message, allowClose, position: _position, style: dataStyle, withCloseButton, onOpen: _onOpen, ...notificationProps } = data;
9
16
  const autoCloseDuration = getAutoClose(autoClose, data.autoClose);
10
17
  const autoCloseTimeout = useRef(-1);
11
- const [hovered, setHovered] = useState(false);
18
+ const hideTimeout = useRef(-1);
19
+ const scrollDismissTimeout = useRef(-1);
20
+ const notificationRef = useRef(null);
21
+ const hoveredRef = useRef(false);
22
+ const offsetRef = useRef(0);
23
+ const isCloseDisabled = allowClose === false;
12
24
  const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);
25
+ const cancelHide = () => window.clearTimeout(hideTimeout.current);
26
+ const cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout.current);
27
+ const setSwipeOffset = (value) => {
28
+ offsetRef.current = value;
29
+ setOffset(value);
30
+ };
13
31
  const handleHide = () => {
14
32
  onHide(data.id);
15
33
  cancelAutoClose();
34
+ cancelHide();
35
+ cancelScrollDismissReset();
16
36
  };
17
37
  const handleAutoClose = () => {
38
+ if (dismissed || active || paused || hoveredRef.current || typeof autoCloseDuration !== "number") return;
39
+ autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);
40
+ };
41
+ const getExitOffset = (direction) => {
42
+ return direction * ((notificationRef.current?.offsetWidth ?? 440) + 40);
43
+ };
44
+ const shouldDismiss = (movement, velocity) => {
45
+ const width = notificationRef.current?.offsetWidth ?? 440;
46
+ return Math.abs(movement) > width * .35 || velocity > .5;
47
+ };
48
+ const resetSwipe = () => {
49
+ cancelScrollDismissReset();
50
+ setScrollDismissActive(false);
51
+ setSwipeOffset(0);
52
+ };
53
+ const dismissNotification = (direction) => {
54
+ setDismissDirection(direction);
55
+ setDismissed(true);
56
+ setScrollDismissActive(false);
57
+ setSwipeOffset(getExitOffset(direction));
18
58
  cancelAutoClose();
19
- if (typeof autoCloseDuration === "number") autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);
59
+ cancelHide();
60
+ cancelScrollDismissReset();
61
+ hideTimeout.current = window.setTimeout(handleHide, transitionDuration);
62
+ };
63
+ const scheduleScrollDismissReset = () => {
64
+ cancelScrollDismissReset();
65
+ scrollDismissTimeout.current = window.setTimeout(() => {
66
+ setScrollDismissActive(false);
67
+ setSwipeOffset(0);
68
+ handleAutoClose();
69
+ }, SCROLL_DISMISS_RESET_TIMEOUT);
70
+ };
71
+ const { ref: dragRef, active } = useDrag((state) => {
72
+ if (dismissed) return;
73
+ if (state.first) cancelAutoClose();
74
+ if (state.last) {
75
+ if (state.tap || state.canceled) {
76
+ setSwipeOffset(0);
77
+ handleAutoClose();
78
+ return;
79
+ }
80
+ const movement = state.movement[0];
81
+ const direction = movement === 0 ? state.direction[0] === -1 ? -1 : 1 : movement > 0 ? 1 : -1;
82
+ if (shouldDismiss(movement, state.velocity[0])) dismissNotification(direction);
83
+ else {
84
+ setSwipeOffset(0);
85
+ handleAutoClose();
86
+ }
87
+ } else setSwipeOffset(state.movement[0]);
88
+ }, {
89
+ axis: "x",
90
+ threshold: 5,
91
+ filterTaps: true,
92
+ enabled: allowDragDismiss && !isCloseDisabled && !dismissed
93
+ });
94
+ const mergedRef = useMergedRef(ref, notificationRef, dragRef);
95
+ const resolvedStyle = getStyleObject(style, theme);
96
+ const resolvedDataStyle = getStyleObject(dataStyle, theme);
97
+ const baseStyle = {
98
+ ...resolvedStyle,
99
+ ...resolvedDataStyle
100
+ };
101
+ const baseOpacity = typeof baseStyle.opacity === "number" ? baseStyle.opacity : 1;
102
+ const swipeOpacity = dismissed ? 0 : 1 - Math.min(Math.abs(offset) / 200, 1) * .6;
103
+ const resolvedTransitionDuration = baseStyle.transitionDuration ?? `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`;
104
+ const notificationStyle = {
105
+ ...baseStyle,
106
+ ["--notifications-state-transform"]: typeof baseStyle.transform === "string" ? baseStyle.transform : "translateX(0)",
107
+ ["--notifications-state-opacity"]: String(baseOpacity),
108
+ ["--notifications-swipe-offset"]: `${offset}px`,
109
+ ["--notifications-swipe-opacity"]: String(swipeOpacity),
110
+ transform: "var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)",
111
+ opacity: "calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))",
112
+ transitionDuration: active || scrollDismissActive ? "0ms, 0ms, 0ms" : resolvedTransitionDuration,
113
+ cursor: "default",
114
+ touchAction: "pan-y"
20
115
  };
21
116
  const handleMouseEnter = () => {
22
- setHovered(true);
117
+ hoveredRef.current = true;
118
+ cancelAutoClose();
23
119
  onHoverStart?.();
24
120
  };
25
121
  const handleMouseLeave = () => {
26
- setHovered(false);
122
+ hoveredRef.current = false;
123
+ if (!scrollDismissActive) {
124
+ resetSwipe();
125
+ handleAutoClose();
126
+ }
27
127
  onHoverEnd?.();
28
128
  };
129
+ const handleWheel = useEffectEvent((event) => {
130
+ if (dismissed || active) return;
131
+ const isDocumentEvent = event.currentTarget === document;
132
+ if (!isDocumentEvent && !hoveredRef.current) return;
133
+ const { deltaX, deltaY } = event;
134
+ if (Math.abs(deltaX) <= Math.abs(deltaY) || deltaX === 0) return;
135
+ if (!allowScrollDismiss || isCloseDisabled) return;
136
+ if (!isDocumentEvent) {
137
+ event.preventDefault();
138
+ event.stopPropagation();
139
+ }
140
+ cancelAutoClose();
141
+ setScrollDismissActive(true);
142
+ const nextOffset = offsetRef.current - deltaX;
143
+ const direction = nextOffset > 0 ? 1 : -1;
144
+ if (shouldDismiss(nextOffset, 0)) {
145
+ dismissNotification(direction);
146
+ return;
147
+ }
148
+ setSwipeOffset(nextOffset);
149
+ scheduleScrollDismissReset();
150
+ });
151
+ useEffect(() => {
152
+ if (!scrollDismissActive) return;
153
+ document.addEventListener("wheel", handleWheel, { passive: false });
154
+ return () => document.removeEventListener("wheel", handleWheel, { passive: false });
155
+ }, [scrollDismissActive]);
156
+ useEffect(() => {
157
+ const handleResize = () => {
158
+ if (dismissed) setSwipeOffset(getExitOffset(dismissDirection));
159
+ };
160
+ window.addEventListener("resize", handleResize);
161
+ return () => window.removeEventListener("resize", handleResize);
162
+ }, [dismissDirection, dismissed]);
163
+ useEffect(() => {
164
+ const node = notificationRef.current;
165
+ if (!node) return;
166
+ node.addEventListener("wheel", handleWheel, { passive: false });
167
+ return () => node.removeEventListener("wheel", handleWheel, { passive: false });
168
+ }, []);
169
+ useEffect(() => {
170
+ return () => {
171
+ cancelHide();
172
+ cancelScrollDismissReset();
173
+ };
174
+ }, []);
29
175
  useEffect(() => {
30
176
  data.onOpen?.(data);
31
177
  }, []);
32
178
  useEffect(() => {
33
179
  handleAutoClose();
34
180
  return cancelAutoClose;
35
- }, [autoCloseDuration]);
181
+ }, [
182
+ autoCloseDuration,
183
+ active,
184
+ dismissed
185
+ ]);
36
186
  useEffect(() => {
37
- if (paused || hovered) cancelAutoClose();
187
+ if (paused) cancelAutoClose();
38
188
  else handleAutoClose();
39
189
  return cancelAutoClose;
40
- }, [paused, hovered]);
190
+ }, [paused]);
41
191
  return /* @__PURE__ */ jsx(Notification, {
192
+ ref: mergedRef,
42
193
  ...others,
194
+ style: notificationStyle,
43
195
  ...notificationProps,
196
+ withCloseButton: isCloseDisabled ? false : withCloseButton,
44
197
  onClose: handleHide,
45
198
  onMouseEnter: handleMouseEnter,
46
199
  onMouseLeave: handleMouseLeave,
package/esm/NotificationContainer.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationContainer.mjs","names":[],"sources":["../src/NotificationContainer.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { Notification, NotificationProps } from '@mantine/core';\nimport { getAutoClose } from './get-auto-close/get-auto-close';\nimport { NotificationData } from './notifications.store';\n\ninterface NotificationContainerProps extends NotificationProps {\n data: NotificationData;\n onHide: (id: string) => void;\n autoClose: number | false;\n paused: boolean;\n onHoverStart?: () => void;\n onHoverEnd?: () => void;\n}\n\nexport function NotificationContainer({\n data,\n onHide,\n autoClose,\n paused,\n onHoverStart,\n onHoverEnd,\n ...others\n}: NotificationContainerProps) {\n const { autoClose: _autoClose, message, onOpen: _onOpen, ...notificationProps } = data;\n const autoCloseDuration = getAutoClose(autoClose, data.autoClose);\n const autoCloseTimeout = useRef<number>(-1);\n const [hovered, setHovered] = useState(false);\n\n const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);\n\n const handleHide = () => {\n onHide(data.id!);\n cancelAutoClose();\n };\n\n const handleAutoClose = () => {\n cancelAutoClose();\n if (typeof autoCloseDuration === 'number') {\n autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);\n }\n };\n\n const handleMouseEnter = () => {\n setHovered(true);\n onHoverStart?.();\n };\n\n const handleMouseLeave = () => {\n setHovered(false);\n onHoverEnd?.();\n };\n\n useEffect(() => {\n data.onOpen?.(data);\n }, []);\n\n useEffect(() => {\n handleAutoClose();\n return cancelAutoClose;\n }, [autoCloseDuration]);\n\n useEffect(() => {\n if (paused || hovered) {\n cancelAutoClose();\n } else {\n handleAutoClose();\n }\n\n return cancelAutoClose;\n }, [paused, hovered]);\n\n return (\n <Notification\n {...others}\n {...notificationProps}\n onClose={handleHide}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {message}\n </Notification>\n );\n}\n\nNotificationContainer.displayName = '@mantine/notifications/NotificationContainer';\n"],"mappings":";;;;;;AAcA,SAAgB,sBAAsB,EACpC,MACA,QACA,WACA,QACA,cACA,YACA,GAAG,UAC0B;CAC7B,MAAM,EAAE,WAAW,YAAY,SAAS,QAAQ,SAAS,GAAG,sBAAsB;CAClF,MAAM,oBAAoB,aAAa,WAAW,KAAK,UAAU;CACjE,MAAM,mBAAmB,OAAe,GAAG;CAC3C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,wBAAwB,OAAO,aAAa,iBAAiB,QAAQ;CAE3E,MAAM,mBAAmB;AACvB,SAAO,KAAK,GAAI;AAChB,mBAAiB;;CAGnB,MAAM,wBAAwB;AAC5B,mBAAiB;AACjB,MAAI,OAAO,sBAAsB,SAC/B,kBAAiB,UAAU,OAAO,WAAW,YAAY,kBAAkB;;CAI/E,MAAM,yBAAyB;AAC7B,aAAW,KAAK;AAChB,kBAAgB;;CAGlB,MAAM,yBAAyB;AAC7B,aAAW,MAAM;AACjB,gBAAc;;AAGhB,iBAAgB;AACd,OAAK,SAAS,KAAK;IAClB,EAAE,CAAC;AAEN,iBAAgB;AACd,mBAAiB;AACjB,SAAO;IACN,CAAC,kBAAkB,CAAC;AAEvB,iBAAgB;AACd,MAAI,UAAU,QACZ,kBAAiB;MAEjB,kBAAiB;AAGnB,SAAO;IACN,CAAC,QAAQ,QAAQ,CAAC;AAErB,QACE,oBAAC,cAAD;EACE,GAAI;EACJ,GAAI;EACJ,SAAS;EACT,cAAc;EACd,cAAc;YAEb;EACY,CAAA;;AAInB,sBAAsB,cAAc"}
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":";;;;;;;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,aAAa,SAAS,EAAE;CACvC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,MAAM;CACrE,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,EACJ,WAAW,YACX,SACA,YACA,UAAU,WACV,OAAO,WACP,iBACA,QAAQ,SACR,GAAG,sBACD;CACJ,MAAM,oBAAoB,aAAa,WAAW,KAAK,UAAU;CACjE,MAAM,mBAAmB,OAAe,GAAG;CAC3C,MAAM,cAAc,OAAe,GAAG;CACtC,MAAM,uBAAuB,OAAe,GAAG;CAC/C,MAAM,kBAAkB,OAAuB,KAAK;CACpD,MAAM,aAAa,OAAO,MAAM;CAChC,MAAM,YAAY,OAAO,EAAE;CAC3B,MAAM,kBAAkB,eAAe;CAEvC,MAAM,wBAAwB,OAAO,aAAa,iBAAiB,QAAQ;CAC3E,MAAM,mBAAmB,OAAO,aAAa,YAAY,QAAQ;CACjE,MAAM,iCAAiC,OAAO,aAAa,qBAAqB,QAAQ;CAExF,MAAM,kBAAkB,UAAkB;AACxC,YAAU,UAAU;AACpB,YAAU,MAAM;;CAGlB,MAAM,mBAAmB;AACvB,SAAO,KAAK,GAAI;AAChB,mBAAiB;AACjB,cAAY;AACZ,4BAA0B;;CAG5B,MAAM,wBAAwB;AAC5B,MACE,aACA,UACA,UACA,WAAW,WACX,OAAO,sBAAsB,SAE7B;AAGF,mBAAiB,UAAU,OAAO,WAAW,YAAY,kBAAkB;;CAG7E,MAAM,iBAAiB,cAAsB;AAE3C,SAAO,cADO,gBAAgB,SAAS,eAAe,OAC1B;;CAG9B,MAAM,iBAAiB,UAAkB,aAAqB;EAC5D,MAAM,QAAQ,gBAAgB,SAAS,eAAe;AACtD,SAAO,KAAK,IAAI,SAAS,GAAG,QAAQ,OAAQ,WAAW;;CAGzD,MAAM,mBAAmB;AACvB,4BAA0B;AAC1B,yBAAuB,MAAM;AAC7B,iBAAe,EAAE;;CAGnB,MAAM,uBAAuB,cAAsB;AACjD,sBAAoB,UAAU;AAC9B,eAAa,KAAK;AAClB,yBAAuB,MAAM;AAC7B,iBAAe,cAAc,UAAU,CAAC;AACxC,mBAAiB;AACjB,cAAY;AACZ,4BAA0B;AAC1B,cAAY,UAAU,OAAO,WAAW,YAAY,mBAAmB;;CAGzE,MAAM,mCAAmC;AACvC,4BAA0B;AAC1B,uBAAqB,UAAU,OAAO,iBAAiB;AACrD,0BAAuB,MAAM;AAC7B,kBAAe,EAAE;AACjB,oBAAiB;KAChB,6BAA6B;;CAGlC,MAAM,EAAE,KAAK,SAAS,WAAW,SAC9B,UAAU;AACT,MAAI,UACF;AAGF,MAAI,MAAM,MACR,kBAAiB;AAGnB,MAAI,MAAM,MAAM;AACd,OAAI,MAAM,OAAO,MAAM,UAAU;AAC/B,mBAAe,EAAE;AACjB,qBAAiB;AACjB;;GAGF,MAAM,WAAW,MAAM,SAAS;GAChC,MAAM,YACJ,aAAa,IAAK,MAAM,UAAU,OAAO,KAAK,KAAK,IAAK,WAAW,IAAI,IAAI;AAE7E,OAAI,cAAc,UAAU,MAAM,SAAS,GAAG,CAC5C,qBAAoB,UAAU;QACzB;AACL,mBAAe,EAAE;AACjB,qBAAiB;;QAGnB,gBAAe,MAAM,SAAS,GAAG;IAGrC;EACE,MAAM;EACN,WAAW;EACX,YAAY;EACZ,SAAS,oBAAoB,CAAC,mBAAmB,CAAC;EACnD,CACF;CAED,MAAM,YAAY,aAAa,KAAK,iBAAiB,QAAQ;CAC7D,MAAM,gBAAgB,eAAe,OAAO,MAAM;CAClD,MAAM,oBAAoB,eAAe,WAAW,MAAM;CAC1D,MAAM,YAAY;EAAE,GAAG;EAAe,GAAG;EAAmB;CAC5D,MAAM,cAAc,OAAO,UAAU,YAAY,WAAW,UAAU,UAAU;CAChF,MAAM,eAAe,YAAY,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,KAAK,EAAE,GAAG;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,YAAY;GAC/D,iCAA2C,GAAG,OAAO;GACrD,kCAA4C,OAAO,aAAa;EACjE,WACE;EACF,SAAS;EACT,oBACE,UAAU,sBAAsB,kBAAkB;EACpD,QAAQ;EACR,aAAa;EACd;CAED,MAAM,yBAAyB;AAC7B,aAAW,UAAU;AACrB,mBAAiB;AACjB,kBAAgB;;CAGlB,MAAM,yBAAyB;AAC7B,aAAW,UAAU;AACrB,MAAI,CAAC,qBAAqB;AACxB,eAAY;AACZ,oBAAiB;;AAEnB,gBAAc;;CAGhB,MAAM,cAAc,gBAAgB,UAAsB;AACxD,MAAI,aAAa,OACf;EAGF,MAAM,kBAAkB,MAAM,kBAAkB;AAChD,MAAI,CAAC,mBAAmB,CAAC,WAAW,QAClC;EAGF,MAAM,EAAE,QAAQ,WAAW;AAC3B,MAAI,KAAK,IAAI,OAAO,IAAI,KAAK,IAAI,OAAO,IAAI,WAAW,EACrD;AAGF,MAAI,CAAC,sBAAsB,gBACzB;AAGF,MAAI,CAAC,iBAAiB;AACpB,SAAM,gBAAgB;AACtB,SAAM,iBAAiB;;AAGzB,mBAAiB;AACjB,yBAAuB,KAAK;EAE5B,MAAM,aAAa,UAAU,UAAU;EACvC,MAAM,YAAY,aAAa,IAAI,IAAI;AAEvC,MAAI,cAAc,YAAY,EAAE,EAAE;AAChC,uBAAoB,UAAU;AAC9B;;AAGF,iBAAe,WAAW;AAC1B,8BAA4B;GAC5B;AAEF,iBAAgB;AACd,MAAI,CAAC,oBACH;AAGF,WAAS,iBAAiB,SAAS,aAAa,EAAE,SAAS,OAAO,CAAC;AACnE,eAAa,SAAS,oBAAoB,SAAS,aAAa,EAAE,SAAS,OAAO,CAAQ;IACzF,CAAC,oBAAoB,CAAC;AAEzB,iBAAgB;EACd,MAAM,qBAAqB;AACzB,OAAI,UACF,gBAAe,cAAc,iBAAiB,CAAC;;AAInD,SAAO,iBAAiB,UAAU,aAAa;AAC/C,eAAa,OAAO,oBAAoB,UAAU,aAAa;IAC9D,CAAC,kBAAkB,UAAU,CAAC;AAEjC,iBAAgB;EACd,MAAM,OAAO,gBAAgB;AAC7B,MAAI,CAAC,KACH;AAGF,OAAK,iBAAiB,SAAS,aAAa,EAAE,SAAS,OAAO,CAAC;AAC/D,eAAa,KAAK,oBAAoB,SAAS,aAAa,EAAE,SAAS,OAAO,CAAQ;IACrF,EAAE,CAAC;AAEN,iBAAgB;AACd,eAAa;AACX,eAAY;AACZ,6BAA0B;;IAE3B,EAAE,CAAC;AAEN,iBAAgB;AACd,OAAK,SAAS,KAAK;IAClB,EAAE,CAAC;AAEN,iBAAgB;AACd,mBAAiB;AACjB,SAAO;IACN;EAAC;EAAmB;EAAQ;EAAU,CAAC;AAE1C,iBAAgB;AACd,MAAI,OACF,kBAAiB;MAEjB,kBAAiB;AAGnB,SAAO;IACN,CAAC,OAAO,CAAC;AAEZ,QACE,oBAAC,cAAD;EACE,KAAK;EACL,GAAI;EACJ,OAAO;EACP,GAAI;EACJ,iBAAiB,kBAAkB,QAAQ;EAC3C,SAAS;EACT,cAAc;EACd,cAAc;YAEb;EACY,CAAA;;AAInB,sBAAsB,cAAc"}
package/esm/Notifications.mjs CHANGED
@@ -15,6 +15,8 @@ const defaultProps = {
15
15
  position: "bottom-right",
16
16
  autoClose: 4e3,
17
17
  transitionDuration: 250,
18
+ allowDragDismiss: true,
19
+ allowScrollDismiss: true,
18
20
  containerWidth: 440,
19
21
  notificationMaxHeight: 200,
20
22
  limit: 5,
@@ -29,7 +31,7 @@ const varsResolver = createVarsResolver((_, { zIndex, containerWidth }) => ({ ro
29
31
  } }));
30
32
  const Notifications = factory((_props) => {
31
33
  const props = useProps("Notifications", defaultProps, _props);
32
- const { classNames, className, style, styles, unstyled, vars, attributes, position, autoClose, transitionDuration, containerWidth, notificationMaxHeight, limit, zIndex, store, portalProps, withinPortal, pauseResetOnHover, ...others } = props;
34
+ const { classNames, className, style, styles, unstyled, vars, attributes, position, autoClose, transitionDuration, allowDragDismiss, allowScrollDismiss, containerWidth, notificationMaxHeight, limit, zIndex, store, portalProps, withinPortal, pauseResetOnHover, ...others } = props;
33
35
  const theme = useMantineTheme();
34
36
  const data = useNotifications(store);
35
37
  const forceUpdate = useForceUpdate();
@@ -77,6 +79,9 @@ const Notifications = factory((_props) => {
77
79
  data: notification,
78
80
  onHide: (id) => hideNotification(id, store),
79
81
  autoClose,
82
+ transitionDuration: duration,
83
+ allowDragDismiss,
84
+ allowScrollDismiss,
80
85
  paused: pauseResetOnHover === "all" ? hoveredCount > 0 : false,
81
86
  onHoverStart: handleHoverStart,
82
87
  onHoverEnd: handleHoverEnd,
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 /** 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 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 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 }\n }}\n data={notification}\n onHide={(id) => hideNotification(id, store)}\n autoClose={autoClose}\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 }\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/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 /** 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":";;;;AA4CA,SAAS,4BACP,MACA,iBACA,OACA;CACA,MAAM,QAA4B,EAAE;CACpC,MAAM,gBAAoC,EAAE;CAC5C,MAAM,QAAgC,EAAE;AAExC,MAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,WAAW,KAAK,YAAY;AAClC,QAAM,YAAY,MAAM,aAAa;AACrC,QAAM,aAAa;AAEnB,MAAI,MAAM,aAAa,MACrB,eAAc,KAAK,KAAK;MAExB,OAAM,KAAK,KAAK;;AAIpB,QAAO;EAAE;EAAe;EAAO;;AAGjC,MAAa,iCACX,YAAgC;CAC9B,eAAe,EAAE;CACjB,OAAO,EAAE;CACT,iBAAiB;CACjB,OAAO;CACR,CAAC;AAEJ,MAAa,qBAAqB,0BAA0B;AAC5D,MAAa,oBAAoB,QAA4B,uBAAuB,SAAS,MAAM;AAEnG,SAAgB,yBACd,OACA,QACA;CACA,MAAM,QAAQ,MAAM,UAAU;CAE9B,MAAM,UAAU,4BADM,OAAO,CAAC,GAAG,MAAM,eAAe,GAAG,MAAM,MAAM,CAAC,EACX,MAAM,iBAAiB,MAAM,MAAM;AAE9F,OAAM,SAAS;EACb,eAAe,QAAQ;EACvB,OAAO,QAAQ;EACf,OAAO,MAAM;EACb,iBAAiB,MAAM;EACxB,CAAC;;AAGJ,SAAgB,iBACd,cACA,QAA4B,oBAC5B;CACA,MAAM,KAAK,aAAa,MAAM,UAAU;AAExC,0BAAyB,QAAQ,kBAAkB;AACjD,MAAI,aAAa,MAAM,cAAc,MAAM,MAAM,EAAE,OAAO,aAAa,GAAG,CACxE,QAAO;AAGT,SAAO,CAAC,GAAG,eAAe;GAAE,GAAG;GAAc;GAAI,CAAC;GAClD;AAEF,QAAO;;AAGT,SAAgB,iBAAiB,IAAY,QAA4B,oBAAoB;AAC3F,0BAAyB,QAAQ,kBAC/B,cAAc,QAAQ,iBAAiB;AACrC,MAAI,aAAa,OAAO,IAAI;AAC1B,gBAAa,UAAU,aAAa;AACpC,UAAO;;AAGT,SAAO;GACP,CACH;AAED,QAAO;;AAGT,SAAgB,mBACd,cACA,QAA4B,oBAC5B;AACA,0BAAyB,QAAQ,kBAC/B,cAAc,KAAK,SAAS;AAC1B,MAAI,KAAK,OAAO,aAAa,GAC3B,QAAO;GAAE,GAAG;GAAM,GAAG;GAAc;AAGrC,SAAO;GACP,CACH;AAED,QAAO,aAAa;;AAGtB,SAAgB,mBAAmB,QAA4B,oBAAoB;AACjF,0BAAyB,aAAa,EAAE,CAAC;;AAG3C,SAAgB,wBAAwB,QAA4B,oBAAoB;AACtF,0BAAyB,QAAQ,kBAC/B,cAAc,MAAM,GAAG,MAAM,UAAU,CAAC,MAAM,CAC/C;;AAGH,MAAa,gBAAgB;CAC3B,MAAM;CACN,MAAM;CACN,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,aAAa;CACd"}
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,EAAE;CACpC,MAAM,gBAAoC,EAAE;CAC5C,MAAM,QAAgC,EAAE;AAExC,MAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,WAAW,KAAK,YAAY;AAClC,QAAM,YAAY,MAAM,aAAa;AACrC,QAAM,aAAa;AAEnB,MAAI,MAAM,aAAa,MACrB,eAAc,KAAK,KAAK;MAExB,OAAM,KAAK,KAAK;;AAIpB,QAAO;EAAE;EAAe;EAAO;;AAGjC,MAAa,iCACX,YAAgC;CAC9B,eAAe,EAAE;CACjB,OAAO,EAAE;CACT,iBAAiB;CACjB,OAAO;CACR,CAAC;AAEJ,MAAa,qBAAqB,0BAA0B;AAC5D,MAAa,oBAAoB,QAA4B,uBAAuB,SAAS,MAAM;AAEnG,SAAgB,yBACd,OACA,QACA;CACA,MAAM,QAAQ,MAAM,UAAU;CAE9B,MAAM,UAAU,4BADM,OAAO,CAAC,GAAG,MAAM,eAAe,GAAG,MAAM,MAAM,CAAC,EACX,MAAM,iBAAiB,MAAM,MAAM;AAE9F,OAAM,SAAS;EACb,eAAe,QAAQ;EACvB,OAAO,QAAQ;EACf,OAAO,MAAM;EACb,iBAAiB,MAAM;EACxB,CAAC;;AAGJ,SAAgB,iBACd,cACA,QAA4B,oBAC5B;CACA,MAAM,KAAK,aAAa,MAAM,UAAU;AAExC,0BAAyB,QAAQ,kBAAkB;AACjD,MAAI,aAAa,MAAM,cAAc,MAAM,MAAM,EAAE,OAAO,aAAa,GAAG,CACxE,QAAO;AAGT,SAAO,CAAC,GAAG,eAAe;GAAE,GAAG;GAAc;GAAI,CAAC;GAClD;AAEF,QAAO;;AAGT,SAAgB,iBAAiB,IAAY,QAA4B,oBAAoB;AAC3F,0BAAyB,QAAQ,kBAC/B,cAAc,QAAQ,iBAAiB;AACrC,MAAI,aAAa,OAAO,IAAI;AAC1B,gBAAa,UAAU,aAAa;AACpC,UAAO;;AAGT,SAAO;GACP,CACH;AAED,QAAO;;AAGT,SAAgB,mBACd,cACA,QAA4B,oBAC5B;AACA,0BAAyB,QAAQ,kBAC/B,cAAc,KAAK,SAAS;AAC1B,MAAI,KAAK,OAAO,aAAa,GAC3B,QAAO;GAAE,GAAG;GAAM,GAAG;GAAc;AAGrC,SAAO;GACP,CACH;AAED,QAAO,aAAa;;AAGtB,SAAgB,mBAAmB,QAA4B,oBAAoB;AACjF,0BAAyB,aAAa,EAAE,CAAC;;AAG3C,SAAgB,wBAAwB,QAA4B,oBAAoB;AACtF,0BAAyB,QAAQ,kBAC/B,cAAc,MAAM,GAAG,MAAM,UAAU,CAAC,MAAM,CAC/C;;AAGH,MAAa,gBAAgB;CAC3B,MAAM;CACN,MAAM;CACN,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,aAAa;CACd"}
package/lib/NotificationContainer.d.ts CHANGED
@@ -4,11 +4,15 @@ interface NotificationContainerProps extends NotificationProps {
4
4
  data: NotificationData;
5
5
  onHide: (id: string) => void;
6
6
  autoClose: number | false;
7
+ transitionDuration: number;
8
+ allowDragDismiss: boolean;
9
+ allowScrollDismiss: boolean;
7
10
  paused: boolean;
8
11
  onHoverStart?: () => void;
9
12
  onHoverEnd?: () => void;
13
+ ref?: React.Ref<HTMLDivElement>;
10
14
  }
11
- export declare function NotificationContainer({ data, onHide, autoClose, paused, onHoverStart, onHoverEnd, ...others }: NotificationContainerProps): import("react/jsx-runtime").JSX.Element;
15
+ export declare function NotificationContainer({ data, onHide, autoClose, transitionDuration, allowDragDismiss, allowScrollDismiss, paused, onHoverStart, onHoverEnd, ref, style, ...others }: NotificationContainerProps): import("react/jsx-runtime").JSX.Element;
12
16
  export declare namespace NotificationContainer {
13
17
  var displayName: string;
14
18
  }
package/lib/Notifications.d.ts CHANGED
@@ -11,6 +11,10 @@ export interface NotificationsProps extends BoxProps, StylesApiProps<Notificatio
11
11
  autoClose?: number | false;
12
12
  /** Notification transition duration in ms @default 250 */
13
13
  transitionDuration?: number;
14
+ /** Determines whether notifications can be dismissed by dragging left or right @default true */
15
+ allowDragDismiss?: boolean;
16
+ /** Determines whether notifications can be dismissed with horizontal scroll gesture while hovered @default true */
17
+ allowScrollDismiss?: boolean;
14
18
  /** Notification width, cannot exceed 100% @default 440 */
15
19
  containerWidth?: number | string;
16
20
  /** Notification `max-height`, used for transitions @default 200 */
package/lib/notifications.store.d.ts CHANGED
@@ -12,6 +12,8 @@ export interface NotificationData extends Omit<NotificationProps, 'onClose'>, Re
12
12
  * number is auto close timeout in ms, overrides `autoClose` from `Notifications`
13
13
  * */
14
14
  autoClose?: boolean | number;
15
+ /** Determines whether notification can be closed with close button, drag or horizontal scroll swipe, `true` by default */
16
+ allowClose?: boolean;
15
17
  /** Called when notification closes */
16
18
  onClose?: (props: NotificationData) => void;
17
19
  /** Called when notification opens */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine/notifications",
3
- "version": "9.1.1",
3
+ "version": "9.2.0",
4
4
  "description": "Mantine notifications system",
5
5
  "homepage": "https://mantine.dev",
6
6
  "license": "MIT",
@@ -44,13 +44,13 @@
44
44
  "directory": "packages/@mantine/notifications"
45
45
  },
46
46
  "peerDependencies": {
47
- "@mantine/core": "9.1.1",
48
- "@mantine/hooks": "9.1.1",
47
+ "@mantine/core": "9.2.0",
48
+ "@mantine/hooks": "9.2.0",
49
49
  "react": "^19.2.0",
50
50
  "react-dom": "^19.2.0"
51
51
  },
52
52
  "dependencies": {
53
- "@mantine/store": "9.1.1",
53
+ "@mantine/store": "9.2.0",
54
54
  "react-transition-group": "4.4.5"
55
55
  },
56
56
  "devDependencies": {