@mantine/notifications 9.0.0-alpha.6 → 9.0.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 (11) hide show
  1. package/cjs/NotificationContainer.cjs +18 -3
  2. package/cjs/NotificationContainer.cjs.map +1 -1
  3. package/cjs/Notifications.cjs +9 -2
  4. package/cjs/Notifications.cjs.map +1 -1
  5. package/esm/NotificationContainer.mjs +19 -4
  6. package/esm/NotificationContainer.mjs.map +1 -1
  7. package/esm/Notifications.mjs +10 -3
  8. package/esm/Notifications.mjs.map +1 -1
  9. package/lib/NotificationContainer.d.ts +4 -1
  10. package/lib/Notifications.d.ts +2 -0
  11. package/package.json +4 -4
package/cjs/NotificationContainer.cjs CHANGED
@@ -4,18 +4,28 @@ let react = require("react");
4
4
  let _mantine_core = require("@mantine/core");
5
5
  let react_jsx_runtime = require("react/jsx-runtime");
6
6
  //#region packages/@mantine/notifications/src/NotificationContainer.tsx
7
- function NotificationContainer({ data, onHide, autoClose, ...others }) {
7
+ function NotificationContainer({ data, onHide, autoClose, paused, onHoverStart, onHoverEnd, ...others }) {
8
8
  const { autoClose: _autoClose, message, ...notificationProps } = data;
9
9
  const autoCloseDuration = require_get_auto_close.getAutoClose(autoClose, data.autoClose);
10
10
  const autoCloseTimeout = (0, react.useRef)(-1);
11
+ const [hovered, setHovered] = (0, react.useState)(false);
11
12
  const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);
12
13
  const handleHide = () => {
13
14
  onHide(data.id);
14
15
  cancelAutoClose();
15
16
  };
16
17
  const handleAutoClose = () => {
18
+ cancelAutoClose();
17
19
  if (typeof autoCloseDuration === "number") autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);
18
20
  };
21
+ const handleMouseEnter = () => {
22
+ setHovered(true);
23
+ onHoverStart?.();
24
+ };
25
+ const handleMouseLeave = () => {
26
+ setHovered(false);
27
+ onHoverEnd?.();
28
+ };
19
29
  (0, react.useEffect)(() => {
20
30
  data.onOpen?.(data);
21
31
  }, []);
@@ -23,12 +33,17 @@ function NotificationContainer({ data, onHide, autoClose, ...others }) {
23
33
  handleAutoClose();
24
34
  return cancelAutoClose;
25
35
  }, [autoCloseDuration]);
36
+ (0, react.useEffect)(() => {
37
+ if (paused || hovered) cancelAutoClose();
38
+ else handleAutoClose();
39
+ return cancelAutoClose;
40
+ }, [paused, hovered]);
26
41
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Notification, {
27
42
  ...others,
28
43
  ...notificationProps,
29
44
  onClose: handleHide,
30
- onMouseEnter: cancelAutoClose,
31
- onMouseLeave: handleAutoClose,
45
+ onMouseEnter: handleMouseEnter,
46
+ onMouseLeave: handleMouseLeave,
32
47
  children: message
33
48
  });
34
49
  }
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 } 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}\n\nexport function NotificationContainer({\n data,\n onHide,\n autoClose,\n ...others\n}: NotificationContainerProps) {\n const { autoClose: _autoClose, message, ...notificationProps } = data;\n const autoCloseDuration = getAutoClose(autoClose, data.autoClose);\n const autoCloseTimeout = useRef<number>(-1);\n\n const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);\n\n const handleHide = () => {\n onHide(data.id!);\n cancelAutoClose();\n };\n\n const handleAutoClose = () => {\n if (typeof autoCloseDuration === 'number') {\n autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);\n }\n };\n\n useEffect(() => {\n data.onOpen?.(data);\n }, []);\n\n useEffect(() => {\n handleAutoClose();\n return cancelAutoClose;\n }, [autoCloseDuration]);\n\n return (\n <Notification\n {...others}\n {...notificationProps}\n onClose={handleHide}\n onMouseEnter={cancelAutoClose}\n onMouseLeave={handleAutoClose}\n >\n {message}\n </Notification>\n );\n}\n\nNotificationContainer.displayName = '@mantine/notifications/NotificationContainer';\n"],"mappings":";;;;;;AAWA,SAAgB,sBAAsB,EACpC,MACA,QACA,WACA,GAAG,UAC0B;CAC7B,MAAM,EAAE,WAAW,YAAY,SAAS,GAAG,sBAAsB;CACjE,MAAM,oBAAoBA,uBAAAA,aAAa,WAAW,KAAK,UAAU;CACjE,MAAM,oBAAA,GAAA,MAAA,QAAkC,GAAG;CAE3C,MAAM,wBAAwB,OAAO,aAAa,iBAAiB,QAAQ;CAE3E,MAAM,mBAAmB;AACvB,SAAO,KAAK,GAAI;AAChB,mBAAiB;;CAGnB,MAAM,wBAAwB;AAC5B,MAAI,OAAO,sBAAsB,SAC/B,kBAAiB,UAAU,OAAO,WAAW,YAAY,kBAAkB;;AAI/E,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,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, 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, ...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,GAAG,sBAAsB;CACjE,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"}
package/cjs/Notifications.cjs CHANGED
@@ -20,7 +20,8 @@ const defaultProps = {
20
20
  limit: 5,
21
21
  zIndex: (0, _mantine_core.getDefaultZIndex)("overlay"),
22
22
  store: require_notifications_store.notificationsStore,
23
- withinPortal: true
23
+ withinPortal: true,
24
+ pauseResetOnHover: "all"
24
25
  };
25
26
  const varsResolver = (0, _mantine_core.createVarsResolver)((_, { zIndex, containerWidth }) => ({ root: {
26
27
  "--notifications-z-index": zIndex?.toString(),
@@ -28,13 +29,16 @@ const varsResolver = (0, _mantine_core.createVarsResolver)((_, { zIndex, contain
28
29
  } }));
29
30
  const Notifications = (0, _mantine_core.factory)((_props) => {
30
31
  const props = (0, _mantine_core.useProps)("Notifications", defaultProps, _props);
31
- const { classNames, className, style, styles, unstyled, vars, attributes, position, autoClose, transitionDuration, containerWidth, notificationMaxHeight, limit, zIndex, store, portalProps, withinPortal, ...others } = props;
32
+ const { classNames, className, style, styles, unstyled, vars, attributes, position, autoClose, transitionDuration, containerWidth, notificationMaxHeight, limit, zIndex, store, portalProps, withinPortal, pauseResetOnHover, ...others } = props;
32
33
  const theme = (0, _mantine_core.useMantineTheme)();
33
34
  const data = require_notifications_store.useNotifications(store);
34
35
  const forceUpdate = (0, _mantine_hooks.useForceUpdate)();
35
36
  const shouldReduceMotion = (0, _mantine_hooks.useReducedMotion)();
36
37
  const refs = (0, react.useRef)({});
37
38
  const previousLength = (0, react.useRef)(0);
39
+ const [hoveredCount, setHoveredCount] = (0, react.useState)(0);
40
+ const handleHoverStart = (0, react.useCallback)(() => setHoveredCount((c) => c + 1), []);
41
+ const handleHoverEnd = (0, react.useCallback)(() => setHoveredCount((c) => Math.max(0, c - 1)), []);
38
42
  const duration = (theme.respectReducedMotion ? shouldReduceMotion : false) ? 1 : transitionDuration;
39
43
  const getStyles = (0, _mantine_core.useStyles)({
40
44
  name: "Notifications",
@@ -73,6 +77,9 @@ const Notifications = (0, _mantine_core.factory)((_props) => {
73
77
  data: notification,
74
78
  onHide: (id) => require_notifications_store.hideNotification(id, store),
75
79
  autoClose,
80
+ paused: pauseResetOnHover === "all" ? hoveredCount > 0 : false,
81
+ onHoverStart: handleHoverStart,
82
+ onHoverEnd: handleHoverEnd,
76
83
  ...getStyles("notification", { style: {
77
84
  ...require_get_notification_state_styles.getNotificationStateStyles({
78
85
  state,
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 { useEffect, useRef } 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\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} 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 ...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\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 {...getStyles('notification', {\n style: {\n ...getNotificationStateStyles({\n state,\n position: pos,\n transitionDuration: duration,\n maxHeight: notificationMaxHeight,\n }),\n ...notificationStyle,\n },\n })}\n />\n )}\n </Transition>\n ));\n\n return acc;\n },\n {} as Record<NotificationPosition, React.ReactNode>\n );\n\n return (\n <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n <Box {...getStyles('root')} data-position=\"top-center\" {...others}>\n <TransitionGroup>{groupedComponents['top-center']}</TransitionGroup>\n </Box>\n\n <Box {...getStyles('root')} data-position=\"top-left\" {...others}>\n <TransitionGroup>{groupedComponents['top-left']}</TransitionGroup>\n </Box>\n\n <Box\n {...getStyles('root', { className: RemoveScroll.classNames.fullWidth })}\n data-position=\"top-right\"\n {...others}\n >\n <TransitionGroup>{groupedComponents['top-right']}</TransitionGroup>\n </Box>\n\n <Box\n {...getStyles('root', { className: RemoveScroll.classNames.fullWidth })}\n data-position=\"bottom-right\"\n {...others}\n >\n <TransitionGroup>{groupedComponents['bottom-right']}</TransitionGroup>\n </Box>\n\n <Box {...getStyles('root')} data-position=\"bottom-left\" {...others}>\n <TransitionGroup>{groupedComponents['bottom-left']}</TransitionGroup>\n </Box>\n\n <Box {...getStyles('root')} data-position=\"bottom-center\" {...others}>\n <TransitionGroup>{groupedComponents['bottom-center']}</TransitionGroup>\n </Box>\n </OptionalPortal>\n );\n});\n\nNotifications.classes = classes;\nNotifications.varsResolver = varsResolver;\nNotifications.displayName = '@mantine/notifications/Notifications';\nNotifications.show = notifications.show;\nNotifications.hide = notifications.hide;\nNotifications.update = notifications.update;\nNotifications.clean = notifications.clean;\nNotifications.cleanQueue = notifications.cleanQueue;\nNotifications.updateState = notifications.updateState;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Notifications.cjs","names":["_Transition","notificationsStore","useNotifications","getGroupedNotifications","positions","NotificationContainer","hideNotification","getNotificationStateStyles","OptionalPortal","Box","TransitionGroup","RemoveScroll","classes","notifications"],"sources":["../src/Notifications.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n Transition as _Transition,\n TransitionGroup,\n TransitionStatus,\n} from 'react-transition-group';\nimport {\n BasePortalProps,\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getDefaultZIndex,\n OptionalPortal,\n rem,\n RemoveScroll,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { useDidUpdate, useForceUpdate, useReducedMotion } from '@mantine/hooks';\nimport {\n getGroupedNotifications,\n positions,\n} from './get-grouped-notifications/get-grouped-notifications';\nimport { getNotificationStateStyles } from './get-notification-state-styles';\nimport { NotificationContainer } from './NotificationContainer';\nimport {\n hideNotification,\n NotificationPosition,\n notifications,\n NotificationsStore,\n notificationsStore,\n useNotifications,\n} from './notifications.store';\nimport classes from './Notifications.module.css';\n\nconst Transition: any = _Transition;\n\nexport type NotificationsStylesNames = 'root' | 'notification';\nexport type NotificationsCssVariables = {\n root: '--notifications-z-index' | '--notifications-container-width';\n};\n\nexport interface NotificationsProps\n extends BoxProps, StylesApiProps<NotificationsFactory>, ElementProps<'div'> {\n /** Notifications default position @default 'bottom-right' */\n position?: NotificationPosition;\n\n /** Auto close timeout for all notifications in ms, `false` to disable auto close, can be overwritten for individual notifications in `notifications.show` function @default 4000 */\n autoClose?: number | false;\n\n /** Notification transition duration in ms @default 250 */\n transitionDuration?: number;\n\n /** 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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"}
package/esm/NotificationContainer.mjs CHANGED
@@ -1,21 +1,31 @@
1
1
  "use client";
2
2
  import { getAutoClose } from "./get-auto-close/get-auto-close.mjs";
3
- import { useEffect, useRef } from "react";
3
+ import { useEffect, useRef, useState } from "react";
4
4
  import { Notification } from "@mantine/core";
5
5
  import { jsx } from "react/jsx-runtime";
6
6
  //#region packages/@mantine/notifications/src/NotificationContainer.tsx
7
- function NotificationContainer({ data, onHide, autoClose, ...others }) {
7
+ function NotificationContainer({ data, onHide, autoClose, paused, onHoverStart, onHoverEnd, ...others }) {
8
8
  const { autoClose: _autoClose, message, ...notificationProps } = data;
9
9
  const autoCloseDuration = getAutoClose(autoClose, data.autoClose);
10
10
  const autoCloseTimeout = useRef(-1);
11
+ const [hovered, setHovered] = useState(false);
11
12
  const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);
12
13
  const handleHide = () => {
13
14
  onHide(data.id);
14
15
  cancelAutoClose();
15
16
  };
16
17
  const handleAutoClose = () => {
18
+ cancelAutoClose();
17
19
  if (typeof autoCloseDuration === "number") autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);
18
20
  };
21
+ const handleMouseEnter = () => {
22
+ setHovered(true);
23
+ onHoverStart?.();
24
+ };
25
+ const handleMouseLeave = () => {
26
+ setHovered(false);
27
+ onHoverEnd?.();
28
+ };
19
29
  useEffect(() => {
20
30
  data.onOpen?.(data);
21
31
  }, []);
@@ -23,12 +33,17 @@ function NotificationContainer({ data, onHide, autoClose, ...others }) {
23
33
  handleAutoClose();
24
34
  return cancelAutoClose;
25
35
  }, [autoCloseDuration]);
36
+ useEffect(() => {
37
+ if (paused || hovered) cancelAutoClose();
38
+ else handleAutoClose();
39
+ return cancelAutoClose;
40
+ }, [paused, hovered]);
26
41
  return /* @__PURE__ */ jsx(Notification, {
27
42
  ...others,
28
43
  ...notificationProps,
29
44
  onClose: handleHide,
30
- onMouseEnter: cancelAutoClose,
31
- onMouseLeave: handleAutoClose,
45
+ onMouseEnter: handleMouseEnter,
46
+ onMouseLeave: handleMouseLeave,
32
47
  children: message
33
48
  });
34
49
  }
package/esm/NotificationContainer.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationContainer.mjs","names":[],"sources":["../src/NotificationContainer.tsx"],"sourcesContent":["import { useEffect, useRef } 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}\n\nexport function NotificationContainer({\n data,\n onHide,\n autoClose,\n ...others\n}: NotificationContainerProps) {\n const { autoClose: _autoClose, message, ...notificationProps } = data;\n const autoCloseDuration = getAutoClose(autoClose, data.autoClose);\n const autoCloseTimeout = useRef<number>(-1);\n\n const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);\n\n const handleHide = () => {\n onHide(data.id!);\n cancelAutoClose();\n };\n\n const handleAutoClose = () => {\n if (typeof autoCloseDuration === 'number') {\n autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);\n }\n };\n\n useEffect(() => {\n data.onOpen?.(data);\n }, []);\n\n useEffect(() => {\n handleAutoClose();\n return cancelAutoClose;\n }, [autoCloseDuration]);\n\n return (\n <Notification\n {...others}\n {...notificationProps}\n onClose={handleHide}\n onMouseEnter={cancelAutoClose}\n onMouseLeave={handleAutoClose}\n >\n {message}\n </Notification>\n );\n}\n\nNotificationContainer.displayName = '@mantine/notifications/NotificationContainer';\n"],"mappings":";;;;;;AAWA,SAAgB,sBAAsB,EACpC,MACA,QACA,WACA,GAAG,UAC0B;CAC7B,MAAM,EAAE,WAAW,YAAY,SAAS,GAAG,sBAAsB;CACjE,MAAM,oBAAoB,aAAa,WAAW,KAAK,UAAU;CACjE,MAAM,mBAAmB,OAAe,GAAG;CAE3C,MAAM,wBAAwB,OAAO,aAAa,iBAAiB,QAAQ;CAE3E,MAAM,mBAAmB;AACvB,SAAO,KAAK,GAAI;AAChB,mBAAiB;;CAGnB,MAAM,wBAAwB;AAC5B,MAAI,OAAO,sBAAsB,SAC/B,kBAAiB,UAAU,OAAO,WAAW,YAAY,kBAAkB;;AAI/E,iBAAgB;AACd,OAAK,SAAS,KAAK;IAClB,EAAE,CAAC;AAEN,iBAAgB;AACd,mBAAiB;AACjB,SAAO;IACN,CAAC,kBAAkB,CAAC;AAEvB,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, 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, ...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,GAAG,sBAAsB;CACjE,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"}
package/esm/Notifications.mjs CHANGED
@@ -5,7 +5,7 @@ import { getNotificationStateStyles } from "./get-notification-state-styles.mjs"
5
5
  import { NotificationContainer } from "./NotificationContainer.mjs";
6
6
  import Notifications_module_default from "./Notifications.module.mjs";
7
7
  import { useDidUpdate, useForceUpdate, useReducedMotion } from "@mantine/hooks";
8
- import { useEffect, useRef } from "react";
8
+ import { useCallback, useEffect, useRef, useState } from "react";
9
9
  import { Transition, TransitionGroup } from "react-transition-group";
10
10
  import { Box, OptionalPortal, RemoveScroll, createVarsResolver, factory, getDefaultZIndex, rem, useMantineTheme, useProps, useStyles } from "@mantine/core";
11
11
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -20,7 +20,8 @@ const defaultProps = {
20
20
  limit: 5,
21
21
  zIndex: getDefaultZIndex("overlay"),
22
22
  store: notificationsStore,
23
- withinPortal: true
23
+ withinPortal: true,
24
+ pauseResetOnHover: "all"
24
25
  };
25
26
  const varsResolver = createVarsResolver((_, { zIndex, containerWidth }) => ({ root: {
26
27
  "--notifications-z-index": zIndex?.toString(),
@@ -28,13 +29,16 @@ const varsResolver = createVarsResolver((_, { zIndex, containerWidth }) => ({ ro
28
29
  } }));
29
30
  const Notifications = factory((_props) => {
30
31
  const props = useProps("Notifications", defaultProps, _props);
31
- const { classNames, className, style, styles, unstyled, vars, attributes, position, autoClose, transitionDuration, containerWidth, notificationMaxHeight, limit, zIndex, store, portalProps, withinPortal, ...others } = props;
32
+ const { classNames, className, style, styles, unstyled, vars, attributes, position, autoClose, transitionDuration, containerWidth, notificationMaxHeight, limit, zIndex, store, portalProps, withinPortal, pauseResetOnHover, ...others } = props;
32
33
  const theme = useMantineTheme();
33
34
  const data = useNotifications(store);
34
35
  const forceUpdate = useForceUpdate();
35
36
  const shouldReduceMotion = useReducedMotion();
36
37
  const refs = useRef({});
37
38
  const previousLength = useRef(0);
39
+ const [hoveredCount, setHoveredCount] = useState(0);
40
+ const handleHoverStart = useCallback(() => setHoveredCount((c) => c + 1), []);
41
+ const handleHoverEnd = useCallback(() => setHoveredCount((c) => Math.max(0, c - 1)), []);
38
42
  const duration = (theme.respectReducedMotion ? shouldReduceMotion : false) ? 1 : transitionDuration;
39
43
  const getStyles = useStyles({
40
44
  name: "Notifications",
@@ -73,6 +77,9 @@ const Notifications = factory((_props) => {
73
77
  data: notification,
74
78
  onHide: (id) => hideNotification(id, store),
75
79
  autoClose,
80
+ paused: pauseResetOnHover === "all" ? hoveredCount > 0 : false,
81
+ onHoverStart: handleHoverStart,
82
+ onHoverEnd: handleHoverEnd,
76
83
  ...getStyles("notification", { style: {
77
84
  ...getNotificationStateStyles({
78
85
  state,
package/esm/Notifications.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Notifications.mjs","names":["Transition","_Transition","classes"],"sources":["../src/Notifications.tsx"],"sourcesContent":["import { useEffect, useRef } 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\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} 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 ...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\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 {...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 /** 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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"}
package/lib/NotificationContainer.d.ts CHANGED
@@ -4,8 +4,11 @@ interface NotificationContainerProps extends NotificationProps {
4
4
  data: NotificationData;
5
5
  onHide: (id: string) => void;
6
6
  autoClose: number | false;
7
+ paused: boolean;
8
+ onHoverStart?: () => void;
9
+ onHoverEnd?: () => void;
7
10
  }
8
- export declare function NotificationContainer({ data, onHide, autoClose, ...others }: NotificationContainerProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function NotificationContainer({ data, onHide, autoClose, paused, onHoverStart, onHoverEnd, ...others }: NotificationContainerProps): import("react/jsx-runtime").JSX.Element;
9
12
  export declare namespace NotificationContainer {
10
13
  var displayName: string;
11
14
  }
package/lib/Notifications.d.ts CHANGED
@@ -25,6 +25,8 @@ export interface NotificationsProps extends BoxProps, StylesApiProps<Notificatio
25
25
  store?: NotificationsStore;
26
26
  /** Determines whether notifications container should be rendered inside `Portal` @default true */
27
27
  withinPortal?: boolean;
28
+ /** 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' */
29
+ pauseResetOnHover?: 'all' | 'notification';
28
30
  }
29
31
  export type NotificationsFactory = Factory<{
30
32
  props: NotificationsProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine/notifications",
3
- "version": "9.0.0-alpha.6",
3
+ "version": "9.0.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.0.0-alpha.6",
48
- "@mantine/hooks": "9.0.0-alpha.6",
47
+ "@mantine/core": "9.0.0",
48
+ "@mantine/hooks": "9.0.0",
49
49
  "react": "^19.2.0",
50
50
  "react-dom": "^19.2.0"
51
51
  },
52
52
  "dependencies": {
53
- "@mantine/store": "9.0.0-alpha.6",
53
+ "@mantine/store": "9.0.0",
54
54
  "react-transition-group": "4.4.5"
55
55
  },
56
56
  "devDependencies": {