@mantine/notifications 3.6.14 → 3.7.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -11
- package/cjs/NotificationContainer/NotificationContainer.js +4 -2
- package/cjs/NotificationContainer/NotificationContainer.js.map +1 -1
- package/cjs/NotificationsProvider/NotificationsProvider.js +14 -3
- package/cjs/NotificationsProvider/NotificationsProvider.js.map +1 -1
- package/esm/NotificationContainer/NotificationContainer.js +4 -2
- package/esm/NotificationContainer/NotificationContainer.js.map +1 -1
- package/esm/NotificationsProvider/NotificationsProvider.js +16 -5
- package/esm/NotificationsProvider/NotificationsProvider.js.map +1 -1
- package/lib/NotificationContainer/NotificationContainer.d.ts +3 -2
- package/lib/NotificationContainer/NotificationContainer.d.ts.map +1 -1
- package/lib/NotificationsProvider/NotificationsProvider.d.ts +2 -2
- package/lib/NotificationsProvider/NotificationsProvider.d.ts.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,24 +1,19 @@
|
|
|
1
|
-
# Mantine
|
|
1
|
+
# Mantine notifications system
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Notifications system
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
[Documentation](https://mantine.dev/others/notifications/)
|
|
5
|
+
[View documentation](https://mantine.dev/)
|
|
8
6
|
|
|
9
7
|
## Installation
|
|
10
8
|
|
|
11
9
|
```sh
|
|
12
10
|
# With yarn
|
|
13
|
-
yarn add @mantine/
|
|
11
|
+
yarn add @mantine/hooks @mantine/core @mantine/notifications
|
|
14
12
|
|
|
15
13
|
# With npm
|
|
16
|
-
npm install @mantine/
|
|
17
|
-
|
|
18
|
-
# With install-peerdeps
|
|
19
|
-
npx install-peerdeps @mantine/notifications
|
|
14
|
+
npm install @mantine/hooks @mantine/core @mantine/notifications
|
|
20
15
|
```
|
|
21
16
|
|
|
22
17
|
## License
|
|
23
18
|
|
|
24
|
-
|
|
19
|
+
MIT
|
|
@@ -15,7 +15,8 @@ function NotificationContainer({
|
|
|
15
15
|
sx,
|
|
16
16
|
notification,
|
|
17
17
|
autoClose,
|
|
18
|
-
onHide
|
|
18
|
+
onHide,
|
|
19
|
+
innerRef
|
|
19
20
|
}) {
|
|
20
21
|
const autoCloseTimeout = getAutoClose['default'](autoClose, notification);
|
|
21
22
|
const hideTimeout = React.useRef();
|
|
@@ -51,7 +52,8 @@ function NotificationContainer({
|
|
|
51
52
|
loading: notification.loading,
|
|
52
53
|
disallowClose: notification.disallowClose,
|
|
53
54
|
onMouseEnter: cancelDelayedHide,
|
|
54
|
-
onMouseLeave: handleDelayedHide
|
|
55
|
+
onMouseLeave: handleDelayedHide,
|
|
56
|
+
ref: innerRef
|
|
55
57
|
}, notification.message);
|
|
56
58
|
}
|
|
57
59
|
NotificationContainer.displayName = "@mantine/notifications/NotificationContainer";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationContainer.js","sources":["../../src/NotificationContainer/NotificationContainer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Notification, DefaultProps } from '@mantine/core';\nimport getAutoClose from './get-auto-close/get-auto-close';\nimport { NotificationProps } from '../types';\n\nexport interface NotificationContainerProps extends DefaultProps {\n notification: NotificationProps;\n onHide(id: string): void;\n autoClose: false | number;\n}\n\nexport default function NotificationContainer({\n className,\n sx,\n notification,\n autoClose,\n onHide,\n}: NotificationContainerProps) {\n const autoCloseTimeout = getAutoClose(autoClose, notification);\n const hideTimeout = useRef<number>();\n\n const handleHide = () => {\n onHide(notification.id);\n window.clearTimeout(hideTimeout.current);\n };\n\n const cancelDelayedHide = () => {\n clearTimeout(hideTimeout.current);\n };\n\n const handleDelayedHide = () => {\n if (typeof autoCloseTimeout === 'number') {\n hideTimeout.current = window.setTimeout(handleHide, autoCloseTimeout);\n }\n };\n\n useEffect(() => {\n if (typeof notification.onOpen === 'function') {\n notification.onOpen(notification);\n }\n }, []);\n\n useEffect(() => {\n handleDelayedHide();\n return cancelDelayedHide;\n }, [autoClose, notification.autoClose]);\n\n return (\n <Notification\n sx={sx}\n className={className}\n title={notification.title}\n onClose={handleHide}\n color={notification.color}\n radius={notification.radius}\n icon={notification.icon}\n loading={notification.loading}\n disallowClose={notification.disallowClose}\n onMouseEnter={cancelDelayedHide}\n onMouseLeave={handleDelayedHide}\n >\n {notification.message}\n </Notification>\n );\n}\n\nNotificationContainer.displayName = '@mantine/notifications/NotificationContainer';\n"],"names":["getAutoClose","useRef","useEffect","React","Notification"],"mappings":";;;;;;;;;;;;AAGe,SAAS,qBAAqB,CAAC;AAC9C,EAAE,SAAS;AACX,EAAE,EAAE;AACJ,EAAE,YAAY;AACd,EAAE,SAAS;AACX,EAAE,MAAM;AACR,CAAC,EAAE;AACH,EAAE,MAAM,gBAAgB,GAAGA,uBAAY,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;AACjE,EAAE,MAAM,WAAW,GAAGC,YAAM,EAAE,CAAC;AAC/B,EAAE,MAAM,UAAU,GAAG,MAAM;AAC3B,IAAI,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;AAC5B,IAAI,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAC7C,GAAG,CAAC;AACJ,EAAE,MAAM,iBAAiB,GAAG,MAAM;AAClC,IAAI,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AACtC,GAAG,CAAC;AACJ,EAAE,MAAM,iBAAiB,GAAG,MAAM;AAClC,IAAI,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;AAC9C,MAAM,WAAW,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;AAC5E,KAAK;AACL,GAAG,CAAC;AACJ,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,OAAO,YAAY,CAAC,MAAM,KAAK,UAAU,EAAE;AACnD,MAAM,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;AACxC,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAEA,eAAS,CAAC,MAAM;AAClB,IAAI,iBAAiB,EAAE,CAAC;AACxB,IAAI,OAAO,iBAAiB,CAAC;AAC7B,GAAG,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;AAC1C,EAAE,uBAAuBC,cAAK,CAAC,aAAa,CAACC,iBAAY,EAAE;AAC3D,IAAI,EAAE;AACN,IAAI,SAAS;AACb,IAAI,KAAK,EAAE,YAAY,CAAC,KAAK;AAC7B,IAAI,OAAO,EAAE,UAAU;AACvB,IAAI,KAAK,EAAE,YAAY,CAAC,KAAK;AAC7B,IAAI,MAAM,EAAE,YAAY,CAAC,MAAM;AAC/B,IAAI,IAAI,EAAE,YAAY,CAAC,IAAI;AAC3B,IAAI,OAAO,EAAE,YAAY,CAAC,OAAO;AACjC,IAAI,aAAa,EAAE,YAAY,CAAC,aAAa;AAC7C,IAAI,YAAY,EAAE,iBAAiB;AACnC,IAAI,YAAY,EAAE,iBAAiB;AACnC,GAAG,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;AAC3B,CAAC;AACD,qBAAqB,CAAC,WAAW,GAAG,8CAA8C;;;;"}
|
|
1
|
+
{"version":3,"file":"NotificationContainer.js","sources":["../../src/NotificationContainer/NotificationContainer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Notification, DefaultProps } from '@mantine/core';\nimport getAutoClose from './get-auto-close/get-auto-close';\nimport { NotificationProps } from '../types';\n\nexport interface NotificationContainerProps extends DefaultProps {\n notification: NotificationProps;\n onHide(id: string): void;\n autoClose: false | number;\n innerRef: React.ForwardedRef<HTMLDivElement>;\n}\n\nexport default function NotificationContainer({\n className,\n sx,\n notification,\n autoClose,\n onHide,\n innerRef,\n}: NotificationContainerProps) {\n const autoCloseTimeout = getAutoClose(autoClose, notification);\n const hideTimeout = useRef<number>();\n\n const handleHide = () => {\n onHide(notification.id);\n window.clearTimeout(hideTimeout.current);\n };\n\n const cancelDelayedHide = () => {\n clearTimeout(hideTimeout.current);\n };\n\n const handleDelayedHide = () => {\n if (typeof autoCloseTimeout === 'number') {\n hideTimeout.current = window.setTimeout(handleHide, autoCloseTimeout);\n }\n };\n\n useEffect(() => {\n if (typeof notification.onOpen === 'function') {\n notification.onOpen(notification);\n }\n }, []);\n\n useEffect(() => {\n handleDelayedHide();\n return cancelDelayedHide;\n }, [autoClose, notification.autoClose]);\n\n return (\n <Notification\n sx={sx}\n className={className}\n title={notification.title}\n onClose={handleHide}\n color={notification.color}\n radius={notification.radius}\n icon={notification.icon}\n loading={notification.loading}\n disallowClose={notification.disallowClose}\n onMouseEnter={cancelDelayedHide}\n onMouseLeave={handleDelayedHide}\n ref={innerRef}\n >\n {notification.message}\n </Notification>\n );\n}\n\nNotificationContainer.displayName = '@mantine/notifications/NotificationContainer';\n"],"names":["getAutoClose","useRef","useEffect","React","Notification"],"mappings":";;;;;;;;;;;;AAGe,SAAS,qBAAqB,CAAC;AAC9C,EAAE,SAAS;AACX,EAAE,EAAE;AACJ,EAAE,YAAY;AACd,EAAE,SAAS;AACX,EAAE,MAAM;AACR,EAAE,QAAQ;AACV,CAAC,EAAE;AACH,EAAE,MAAM,gBAAgB,GAAGA,uBAAY,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;AACjE,EAAE,MAAM,WAAW,GAAGC,YAAM,EAAE,CAAC;AAC/B,EAAE,MAAM,UAAU,GAAG,MAAM;AAC3B,IAAI,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;AAC5B,IAAI,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAC7C,GAAG,CAAC;AACJ,EAAE,MAAM,iBAAiB,GAAG,MAAM;AAClC,IAAI,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AACtC,GAAG,CAAC;AACJ,EAAE,MAAM,iBAAiB,GAAG,MAAM;AAClC,IAAI,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;AAC9C,MAAM,WAAW,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;AAC5E,KAAK;AACL,GAAG,CAAC;AACJ,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,OAAO,YAAY,CAAC,MAAM,KAAK,UAAU,EAAE;AACnD,MAAM,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;AACxC,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAEA,eAAS,CAAC,MAAM;AAClB,IAAI,iBAAiB,EAAE,CAAC;AACxB,IAAI,OAAO,iBAAiB,CAAC;AAC7B,GAAG,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;AAC1C,EAAE,uBAAuBC,cAAK,CAAC,aAAa,CAACC,iBAAY,EAAE;AAC3D,IAAI,EAAE;AACN,IAAI,SAAS;AACb,IAAI,KAAK,EAAE,YAAY,CAAC,KAAK;AAC7B,IAAI,OAAO,EAAE,UAAU;AACvB,IAAI,KAAK,EAAE,YAAY,CAAC,KAAK;AAC7B,IAAI,MAAM,EAAE,YAAY,CAAC,MAAM;AAC/B,IAAI,IAAI,EAAE,YAAY,CAAC,IAAI;AAC3B,IAAI,OAAO,EAAE,YAAY,CAAC,OAAO;AACjC,IAAI,aAAa,EAAE,YAAY,CAAC,aAAa;AAC7C,IAAI,YAAY,EAAE,iBAAiB;AACnC,IAAI,YAAY,EAAE,iBAAiB;AACnC,IAAI,GAAG,EAAE,QAAQ;AACjB,GAAG,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;AAC3B,CAAC;AACD,qBAAqB,CAAC,WAAW,GAAG,8CAA8C;;;;"}
|
|
@@ -77,6 +77,9 @@ function NotificationsProvider(_a) {
|
|
|
77
77
|
"style",
|
|
78
78
|
"children"
|
|
79
79
|
]);
|
|
80
|
+
const forceUpdate = hooks.useForceUpdate();
|
|
81
|
+
const refs = React.useRef({});
|
|
82
|
+
const previousLength = React.useRef(0);
|
|
80
83
|
const {
|
|
81
84
|
notifications,
|
|
82
85
|
queue,
|
|
@@ -90,13 +93,21 @@ function NotificationsProvider(_a) {
|
|
|
90
93
|
const duration = reduceMotion ? 1 : transitionDuration;
|
|
91
94
|
const { classes, cx, theme } = NotificationsProvider_styles['default']();
|
|
92
95
|
const positioning = (POSITIONS.includes(position) ? position : "bottom-right").split("-");
|
|
96
|
+
hooks.useDidUpdate(() => {
|
|
97
|
+
if (notifications.length > previousLength.current) {
|
|
98
|
+
setTimeout(() => forceUpdate(), 0);
|
|
99
|
+
}
|
|
100
|
+
previousLength.current = notifications.length;
|
|
101
|
+
}, [notifications]);
|
|
93
102
|
const items = notifications.map((notification) => /* @__PURE__ */ React__default.createElement(reactTransitionGroup.Transition, {
|
|
94
103
|
key: notification.id,
|
|
95
104
|
timeout: duration,
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
onEnter: (node) => node.offsetHeight
|
|
105
|
+
onEnter: () => refs.current[notification.id].offsetHeight,
|
|
106
|
+
nodeRef: { current: refs.current[notification.id] }
|
|
99
107
|
}, (state) => /* @__PURE__ */ React__default.createElement(NotificationContainer['default'], {
|
|
108
|
+
innerRef: (node) => {
|
|
109
|
+
refs.current[notification.id] = node;
|
|
110
|
+
},
|
|
100
111
|
notification,
|
|
101
112
|
onHide: hideNotification,
|
|
102
113
|
className: classes.notification,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsProvider.js","sources":["../../src/NotificationsProvider/NotificationsProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { Transition, TransitionGroup } from 'react-transition-group';\nimport { DefaultProps, Portal,
|
|
1
|
+
{"version":3,"file":"NotificationsProvider.js","sources":["../../src/NotificationsProvider/NotificationsProvider.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Transition, TransitionGroup } from 'react-transition-group';\nimport { DefaultProps, Portal, MantineStyleSystemSize, getDefaultZIndex, Box } from '@mantine/core';\nimport { useReducedMotion, useForceUpdate, useDidUpdate } from '@mantine/hooks';\nimport { NotificationsContext } from '../Notifications.context';\nimport { NotificationsProviderPositioning } from '../types';\nimport getPositionStyles from './get-position-styles/get-position-styles';\nimport getNotificationStateStyles from './get-notification-state-styles/get-notification-state-styles';\nimport NotificationContainer from '../NotificationContainer/NotificationContainer';\nimport useStyles from './NotificationsProvider.styles';\nimport useNotificationsState from './use-notifications-state/use-notifications-state';\n\nconst POSITIONS = [\n 'top-left',\n 'top-right',\n 'top-center',\n 'bottom-left',\n 'bottom-right',\n 'bottom-center',\n] as const;\n\nexport interface NotificationProviderProps\n extends Omit<DefaultProps, MantineStyleSystemSize>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Notifications position */\n position?:\n | 'top-left'\n | 'top-right'\n | 'top-center'\n | 'bottom-left'\n | 'bottom-right'\n | 'bottom-center';\n\n /** Auto close timeout for all notifications, false to disable auto close, can be overwritten for individual notifications by showNotification function */\n autoClose?: number | false;\n\n /** Notification transitions duration, 0 to turn transitions off */\n transitionDuration?: number;\n\n /** Notification width in px, cannot exceed 100% */\n containerWidth?: number;\n\n /** Notification max-height in px, used for transitions */\n notificationMaxHeight?: number;\n\n /** Maximum amount of notifications displayed at a time, other new notifications will be added to queue */\n limit?: number;\n\n /** Notifications container z-index */\n zIndex?: number;\n}\n\nexport function NotificationsProvider({\n className,\n position = 'bottom-right',\n autoClose = 4000,\n transitionDuration = 250,\n containerWidth = 440,\n notificationMaxHeight = 200,\n limit = 5,\n zIndex = getDefaultZIndex('overlay'),\n style,\n children,\n ...others\n}: NotificationProviderProps) {\n const forceUpdate = useForceUpdate();\n const refs = useRef<Record<string, HTMLDivElement>>({});\n const previousLength = useRef<number>(0);\n const {\n notifications,\n queue,\n showNotification,\n updateNotification,\n hideNotification,\n clean,\n cleanQueue,\n } = useNotificationsState({ limit });\n const reduceMotion = useReducedMotion();\n const duration = reduceMotion ? 1 : transitionDuration;\n const { classes, cx, theme } = useStyles();\n const positioning = (POSITIONS.includes(position) ? position : 'bottom-right').split(\n '-'\n ) as NotificationsProviderPositioning;\n\n useDidUpdate(() => {\n if (notifications.length > previousLength.current) {\n setTimeout(() => forceUpdate(), 0);\n }\n previousLength.current = notifications.length;\n }, [notifications]);\n\n const items = notifications.map((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) => (\n <NotificationContainer\n innerRef={(node) => {\n refs.current[notification.id] = node;\n }}\n notification={notification}\n onHide={hideNotification}\n className={classes.notification}\n autoClose={autoClose}\n sx={{\n ...getNotificationStateStyles({\n state,\n positioning,\n transitionDuration: duration,\n maxHeight: notificationMaxHeight,\n }),\n }}\n />\n )}\n </Transition>\n ));\n\n return (\n <NotificationsContext.Provider\n value={{\n notifications,\n queue,\n showNotification,\n hideNotification,\n updateNotification,\n clean,\n cleanQueue,\n }}\n >\n <Portal zIndex={zIndex}>\n <Box\n className={cx(classes.notifications, className)}\n style={style}\n sx={{\n maxWidth: containerWidth,\n ...getPositionStyles(positioning, containerWidth, theme.spacing.md),\n }}\n {...others}\n >\n <TransitionGroup>{items}</TransitionGroup>\n </Box>\n </Portal>\n\n {children}\n </NotificationsContext.Provider>\n );\n}\n\nNotificationsProvider.displayName = '@mantine/notifications/NotificationsProvider';\n"],"names":["getDefaultZIndex","useForceUpdate","useRef","useNotificationsState","useReducedMotion","useStyles","useDidUpdate","React","Transition","NotificationContainer","getNotificationStateStyles","NotificationsContext","Portal","Box","getPositionStyles","TransitionGroup"],"mappings":"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"}
|
|
@@ -7,7 +7,8 @@ function NotificationContainer({
|
|
|
7
7
|
sx,
|
|
8
8
|
notification,
|
|
9
9
|
autoClose,
|
|
10
|
-
onHide
|
|
10
|
+
onHide,
|
|
11
|
+
innerRef
|
|
11
12
|
}) {
|
|
12
13
|
const autoCloseTimeout = getAutoClose(autoClose, notification);
|
|
13
14
|
const hideTimeout = useRef();
|
|
@@ -43,7 +44,8 @@ function NotificationContainer({
|
|
|
43
44
|
loading: notification.loading,
|
|
44
45
|
disallowClose: notification.disallowClose,
|
|
45
46
|
onMouseEnter: cancelDelayedHide,
|
|
46
|
-
onMouseLeave: handleDelayedHide
|
|
47
|
+
onMouseLeave: handleDelayedHide,
|
|
48
|
+
ref: innerRef
|
|
47
49
|
}, notification.message);
|
|
48
50
|
}
|
|
49
51
|
NotificationContainer.displayName = "@mantine/notifications/NotificationContainer";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationContainer.js","sources":["../../src/NotificationContainer/NotificationContainer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Notification, DefaultProps } from '@mantine/core';\nimport getAutoClose from './get-auto-close/get-auto-close';\nimport { NotificationProps } from '../types';\n\nexport interface NotificationContainerProps extends DefaultProps {\n notification: NotificationProps;\n onHide(id: string): void;\n autoClose: false | number;\n}\n\nexport default function NotificationContainer({\n className,\n sx,\n notification,\n autoClose,\n onHide,\n}: NotificationContainerProps) {\n const autoCloseTimeout = getAutoClose(autoClose, notification);\n const hideTimeout = useRef<number>();\n\n const handleHide = () => {\n onHide(notification.id);\n window.clearTimeout(hideTimeout.current);\n };\n\n const cancelDelayedHide = () => {\n clearTimeout(hideTimeout.current);\n };\n\n const handleDelayedHide = () => {\n if (typeof autoCloseTimeout === 'number') {\n hideTimeout.current = window.setTimeout(handleHide, autoCloseTimeout);\n }\n };\n\n useEffect(() => {\n if (typeof notification.onOpen === 'function') {\n notification.onOpen(notification);\n }\n }, []);\n\n useEffect(() => {\n handleDelayedHide();\n return cancelDelayedHide;\n }, [autoClose, notification.autoClose]);\n\n return (\n <Notification\n sx={sx}\n className={className}\n title={notification.title}\n onClose={handleHide}\n color={notification.color}\n radius={notification.radius}\n icon={notification.icon}\n loading={notification.loading}\n disallowClose={notification.disallowClose}\n onMouseEnter={cancelDelayedHide}\n onMouseLeave={handleDelayedHide}\n >\n {notification.message}\n </Notification>\n );\n}\n\nNotificationContainer.displayName = '@mantine/notifications/NotificationContainer';\n"],"names":[],"mappings":";;;;AAGe,SAAS,qBAAqB,CAAC;AAC9C,EAAE,SAAS;AACX,EAAE,EAAE;AACJ,EAAE,YAAY;AACd,EAAE,SAAS;AACX,EAAE,MAAM;AACR,CAAC,EAAE;AACH,EAAE,MAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;AACjE,EAAE,MAAM,WAAW,GAAG,MAAM,EAAE,CAAC;AAC/B,EAAE,MAAM,UAAU,GAAG,MAAM;AAC3B,IAAI,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;AAC5B,IAAI,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAC7C,GAAG,CAAC;AACJ,EAAE,MAAM,iBAAiB,GAAG,MAAM;AAClC,IAAI,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AACtC,GAAG,CAAC;AACJ,EAAE,MAAM,iBAAiB,GAAG,MAAM;AAClC,IAAI,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;AAC9C,MAAM,WAAW,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;AAC5E,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,OAAO,YAAY,CAAC,MAAM,KAAK,UAAU,EAAE;AACnD,MAAM,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;AACxC,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,iBAAiB,EAAE,CAAC;AACxB,IAAI,OAAO,iBAAiB,CAAC;AAC7B,GAAG,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;AAC1C,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE;AAC3D,IAAI,EAAE;AACN,IAAI,SAAS;AACb,IAAI,KAAK,EAAE,YAAY,CAAC,KAAK;AAC7B,IAAI,OAAO,EAAE,UAAU;AACvB,IAAI,KAAK,EAAE,YAAY,CAAC,KAAK;AAC7B,IAAI,MAAM,EAAE,YAAY,CAAC,MAAM;AAC/B,IAAI,IAAI,EAAE,YAAY,CAAC,IAAI;AAC3B,IAAI,OAAO,EAAE,YAAY,CAAC,OAAO;AACjC,IAAI,aAAa,EAAE,YAAY,CAAC,aAAa;AAC7C,IAAI,YAAY,EAAE,iBAAiB;AACnC,IAAI,YAAY,EAAE,iBAAiB;AACnC,GAAG,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;AAC3B,CAAC;AACD,qBAAqB,CAAC,WAAW,GAAG,8CAA8C;;;;"}
|
|
1
|
+
{"version":3,"file":"NotificationContainer.js","sources":["../../src/NotificationContainer/NotificationContainer.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Notification, DefaultProps } from '@mantine/core';\nimport getAutoClose from './get-auto-close/get-auto-close';\nimport { NotificationProps } from '../types';\n\nexport interface NotificationContainerProps extends DefaultProps {\n notification: NotificationProps;\n onHide(id: string): void;\n autoClose: false | number;\n innerRef: React.ForwardedRef<HTMLDivElement>;\n}\n\nexport default function NotificationContainer({\n className,\n sx,\n notification,\n autoClose,\n onHide,\n innerRef,\n}: NotificationContainerProps) {\n const autoCloseTimeout = getAutoClose(autoClose, notification);\n const hideTimeout = useRef<number>();\n\n const handleHide = () => {\n onHide(notification.id);\n window.clearTimeout(hideTimeout.current);\n };\n\n const cancelDelayedHide = () => {\n clearTimeout(hideTimeout.current);\n };\n\n const handleDelayedHide = () => {\n if (typeof autoCloseTimeout === 'number') {\n hideTimeout.current = window.setTimeout(handleHide, autoCloseTimeout);\n }\n };\n\n useEffect(() => {\n if (typeof notification.onOpen === 'function') {\n notification.onOpen(notification);\n }\n }, []);\n\n useEffect(() => {\n handleDelayedHide();\n return cancelDelayedHide;\n }, [autoClose, notification.autoClose]);\n\n return (\n <Notification\n sx={sx}\n className={className}\n title={notification.title}\n onClose={handleHide}\n color={notification.color}\n radius={notification.radius}\n icon={notification.icon}\n loading={notification.loading}\n disallowClose={notification.disallowClose}\n onMouseEnter={cancelDelayedHide}\n onMouseLeave={handleDelayedHide}\n ref={innerRef}\n >\n {notification.message}\n </Notification>\n );\n}\n\nNotificationContainer.displayName = '@mantine/notifications/NotificationContainer';\n"],"names":[],"mappings":";;;;AAGe,SAAS,qBAAqB,CAAC;AAC9C,EAAE,SAAS;AACX,EAAE,EAAE;AACJ,EAAE,YAAY;AACd,EAAE,SAAS;AACX,EAAE,MAAM;AACR,EAAE,QAAQ;AACV,CAAC,EAAE;AACH,EAAE,MAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;AACjE,EAAE,MAAM,WAAW,GAAG,MAAM,EAAE,CAAC;AAC/B,EAAE,MAAM,UAAU,GAAG,MAAM;AAC3B,IAAI,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;AAC5B,IAAI,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAC7C,GAAG,CAAC;AACJ,EAAE,MAAM,iBAAiB,GAAG,MAAM;AAClC,IAAI,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AACtC,GAAG,CAAC;AACJ,EAAE,MAAM,iBAAiB,GAAG,MAAM;AAClC,IAAI,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;AAC9C,MAAM,WAAW,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;AAC5E,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,OAAO,YAAY,CAAC,MAAM,KAAK,UAAU,EAAE;AACnD,MAAM,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;AACxC,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,iBAAiB,EAAE,CAAC;AACxB,IAAI,OAAO,iBAAiB,CAAC;AAC7B,GAAG,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;AAC1C,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE;AAC3D,IAAI,EAAE;AACN,IAAI,SAAS;AACb,IAAI,KAAK,EAAE,YAAY,CAAC,KAAK;AAC7B,IAAI,OAAO,EAAE,UAAU;AACvB,IAAI,KAAK,EAAE,YAAY,CAAC,KAAK;AAC7B,IAAI,MAAM,EAAE,YAAY,CAAC,MAAM;AAC/B,IAAI,IAAI,EAAE,YAAY,CAAC,IAAI;AAC3B,IAAI,OAAO,EAAE,YAAY,CAAC,OAAO;AACjC,IAAI,aAAa,EAAE,YAAY,CAAC,aAAa;AAC7C,IAAI,YAAY,EAAE,iBAAiB;AACnC,IAAI,YAAY,EAAE,iBAAiB;AACnC,IAAI,GAAG,EAAE,QAAQ;AACjB,GAAG,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;AAC3B,CAAC;AACD,qBAAqB,CAAC,WAAW,GAAG,8CAA8C;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
2
|
import { Transition, TransitionGroup } from 'react-transition-group';
|
|
3
3
|
import { getDefaultZIndex, Portal, Box } from '@mantine/core';
|
|
4
|
-
import { useReducedMotion } from '@mantine/hooks';
|
|
4
|
+
import { useForceUpdate, useReducedMotion, useDidUpdate } from '@mantine/hooks';
|
|
5
5
|
import { NotificationsContext } from '../Notifications.context.js';
|
|
6
6
|
import getPositionStyles from './get-position-styles/get-position-styles.js';
|
|
7
7
|
import getNotificationStateStyles from './get-notification-state-styles/get-notification-state-styles.js';
|
|
@@ -69,6 +69,9 @@ function NotificationsProvider(_a) {
|
|
|
69
69
|
"style",
|
|
70
70
|
"children"
|
|
71
71
|
]);
|
|
72
|
+
const forceUpdate = useForceUpdate();
|
|
73
|
+
const refs = useRef({});
|
|
74
|
+
const previousLength = useRef(0);
|
|
72
75
|
const {
|
|
73
76
|
notifications,
|
|
74
77
|
queue,
|
|
@@ -82,13 +85,21 @@ function NotificationsProvider(_a) {
|
|
|
82
85
|
const duration = reduceMotion ? 1 : transitionDuration;
|
|
83
86
|
const { classes, cx, theme } = useStyles();
|
|
84
87
|
const positioning = (POSITIONS.includes(position) ? position : "bottom-right").split("-");
|
|
88
|
+
useDidUpdate(() => {
|
|
89
|
+
if (notifications.length > previousLength.current) {
|
|
90
|
+
setTimeout(() => forceUpdate(), 0);
|
|
91
|
+
}
|
|
92
|
+
previousLength.current = notifications.length;
|
|
93
|
+
}, [notifications]);
|
|
85
94
|
const items = notifications.map((notification) => /* @__PURE__ */ React.createElement(Transition, {
|
|
86
95
|
key: notification.id,
|
|
87
96
|
timeout: duration,
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
onEnter: (node) => node.offsetHeight
|
|
97
|
+
onEnter: () => refs.current[notification.id].offsetHeight,
|
|
98
|
+
nodeRef: { current: refs.current[notification.id] }
|
|
91
99
|
}, (state) => /* @__PURE__ */ React.createElement(NotificationContainer, {
|
|
100
|
+
innerRef: (node) => {
|
|
101
|
+
refs.current[notification.id] = node;
|
|
102
|
+
},
|
|
92
103
|
notification,
|
|
93
104
|
onHide: hideNotification,
|
|
94
105
|
className: classes.notification,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsProvider.js","sources":["../../src/NotificationsProvider/NotificationsProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { Transition, TransitionGroup } from 'react-transition-group';\nimport { DefaultProps, Portal,
|
|
1
|
+
{"version":3,"file":"NotificationsProvider.js","sources":["../../src/NotificationsProvider/NotificationsProvider.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Transition, TransitionGroup } from 'react-transition-group';\nimport { DefaultProps, Portal, MantineStyleSystemSize, getDefaultZIndex, Box } from '@mantine/core';\nimport { useReducedMotion, useForceUpdate, useDidUpdate } from '@mantine/hooks';\nimport { NotificationsContext } from '../Notifications.context';\nimport { NotificationsProviderPositioning } from '../types';\nimport getPositionStyles from './get-position-styles/get-position-styles';\nimport getNotificationStateStyles from './get-notification-state-styles/get-notification-state-styles';\nimport NotificationContainer from '../NotificationContainer/NotificationContainer';\nimport useStyles from './NotificationsProvider.styles';\nimport useNotificationsState from './use-notifications-state/use-notifications-state';\n\nconst POSITIONS = [\n 'top-left',\n 'top-right',\n 'top-center',\n 'bottom-left',\n 'bottom-right',\n 'bottom-center',\n] as const;\n\nexport interface NotificationProviderProps\n extends Omit<DefaultProps, MantineStyleSystemSize>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Notifications position */\n position?:\n | 'top-left'\n | 'top-right'\n | 'top-center'\n | 'bottom-left'\n | 'bottom-right'\n | 'bottom-center';\n\n /** Auto close timeout for all notifications, false to disable auto close, can be overwritten for individual notifications by showNotification function */\n autoClose?: number | false;\n\n /** Notification transitions duration, 0 to turn transitions off */\n transitionDuration?: number;\n\n /** Notification width in px, cannot exceed 100% */\n containerWidth?: number;\n\n /** Notification max-height in px, used for transitions */\n notificationMaxHeight?: number;\n\n /** Maximum amount of notifications displayed at a time, other new notifications will be added to queue */\n limit?: number;\n\n /** Notifications container z-index */\n zIndex?: number;\n}\n\nexport function NotificationsProvider({\n className,\n position = 'bottom-right',\n autoClose = 4000,\n transitionDuration = 250,\n containerWidth = 440,\n notificationMaxHeight = 200,\n limit = 5,\n zIndex = getDefaultZIndex('overlay'),\n style,\n children,\n ...others\n}: NotificationProviderProps) {\n const forceUpdate = useForceUpdate();\n const refs = useRef<Record<string, HTMLDivElement>>({});\n const previousLength = useRef<number>(0);\n const {\n notifications,\n queue,\n showNotification,\n updateNotification,\n hideNotification,\n clean,\n cleanQueue,\n } = useNotificationsState({ limit });\n const reduceMotion = useReducedMotion();\n const duration = reduceMotion ? 1 : transitionDuration;\n const { classes, cx, theme } = useStyles();\n const positioning = (POSITIONS.includes(position) ? position : 'bottom-right').split(\n '-'\n ) as NotificationsProviderPositioning;\n\n useDidUpdate(() => {\n if (notifications.length > previousLength.current) {\n setTimeout(() => forceUpdate(), 0);\n }\n previousLength.current = notifications.length;\n }, [notifications]);\n\n const items = notifications.map((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) => (\n <NotificationContainer\n innerRef={(node) => {\n refs.current[notification.id] = node;\n }}\n notification={notification}\n onHide={hideNotification}\n className={classes.notification}\n autoClose={autoClose}\n sx={{\n ...getNotificationStateStyles({\n state,\n positioning,\n transitionDuration: duration,\n maxHeight: notificationMaxHeight,\n }),\n }}\n />\n )}\n </Transition>\n ));\n\n return (\n <NotificationsContext.Provider\n value={{\n notifications,\n queue,\n showNotification,\n hideNotification,\n updateNotification,\n clean,\n cleanQueue,\n }}\n >\n <Portal zIndex={zIndex}>\n <Box\n className={cx(classes.notifications, className)}\n style={style}\n sx={{\n maxWidth: containerWidth,\n ...getPositionStyles(positioning, containerWidth, theme.spacing.md),\n }}\n {...others}\n >\n <TransitionGroup>{items}</TransitionGroup>\n </Box>\n </Portal>\n\n {children}\n </NotificationsContext.Provider>\n );\n}\n\nNotificationsProvider.displayName = '@mantine/notifications/NotificationsProvider';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { DefaultProps } from '@mantine/core';
|
|
3
3
|
import { NotificationProps } from '../types';
|
|
4
4
|
export interface NotificationContainerProps extends DefaultProps {
|
|
5
5
|
notification: NotificationProps;
|
|
6
6
|
onHide(id: string): void;
|
|
7
7
|
autoClose: false | number;
|
|
8
|
+
innerRef: React.ForwardedRef<HTMLDivElement>;
|
|
8
9
|
}
|
|
9
|
-
declare function NotificationContainer({ className, sx, notification, autoClose, onHide, }: NotificationContainerProps): JSX.Element;
|
|
10
|
+
declare function NotificationContainer({ className, sx, notification, autoClose, onHide, innerRef, }: NotificationContainerProps): JSX.Element;
|
|
10
11
|
declare namespace NotificationContainer {
|
|
11
12
|
var displayName: string;
|
|
12
13
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationContainer.d.ts","sourceRoot":"","sources":["../../src/NotificationContainer/NotificationContainer.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"NotificationContainer.d.ts","sourceRoot":"","sources":["../../src/NotificationContainer/NotificationContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAgB,YAAY,EAAE,MAAM,eAAe,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,0BAA2B,SAAQ,YAAY;IAC9D,YAAY,EAAE,iBAAiB,CAAC;IAChC,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;CAC9C;AAED,iBAAwB,qBAAqB,CAAC,EAC5C,SAAS,EACT,EAAE,EACF,YAAY,EACZ,SAAS,EACT,MAAM,EACN,QAAQ,GACT,EAAE,0BAA0B,eAgD5B;kBAvDuB,qBAAqB;;;eAArB,qBAAqB"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { DefaultProps,
|
|
3
|
-
export interface NotificationProviderProps extends Omit<DefaultProps,
|
|
2
|
+
import { DefaultProps, MantineStyleSystemSize } from '@mantine/core';
|
|
3
|
+
export interface NotificationProviderProps extends Omit<DefaultProps, MantineStyleSystemSize>, React.ComponentPropsWithoutRef<'div'> {
|
|
4
4
|
/** Notifications position */
|
|
5
5
|
position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
|
|
6
6
|
/** Auto close timeout for all notifications, false to disable auto close, can be overwritten for individual notifications by showNotification function */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsProvider.d.ts","sourceRoot":"","sources":["../../src/NotificationsProvider/NotificationsProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"NotificationsProvider.d.ts","sourceRoot":"","sources":["../../src/NotificationsProvider/NotificationsProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAU,sBAAsB,EAAyB,MAAM,eAAe,CAAC;AAmBpG,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,YAAY,EAAE,sBAAsB,CAAC,EAChD,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACvC,6BAA6B;IAC7B,QAAQ,CAAC,EACL,UAAU,GACV,WAAW,GACX,YAAY,GACZ,aAAa,GACb,cAAc,GACd,eAAe,CAAC;IAEpB,0JAA0J;IAC1J,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE3B,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,0DAA0D;IAC1D,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,0GAA0G;IAC1G,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAyB,EACzB,SAAgB,EAChB,kBAAwB,EACxB,cAAoB,EACpB,qBAA2B,EAC3B,KAAS,EACT,MAAoC,EACpC,KAAK,EACL,QAAQ,EACR,GAAG,MAAM,EACV,EAAE,yBAAyB,eAqF3B;yBAjGe,qBAAqB"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/notifications",
|
|
3
3
|
"description": "Notification system based on Mantine components",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.7.0-alpha.2",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
7
7
|
"types": "lib/index.d.ts",
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"notification-system"
|
|
29
29
|
],
|
|
30
30
|
"peerDependencies": {
|
|
31
|
-
"@mantine/core": "3.
|
|
32
|
-
"@mantine/hooks": "3.
|
|
31
|
+
"@mantine/core": "3.7.0-alpha.2",
|
|
32
|
+
"@mantine/hooks": "3.7.0-alpha.2",
|
|
33
33
|
"react": ">=16.8.0",
|
|
34
34
|
"react-dom": ">=16.8.0"
|
|
35
35
|
},
|