@mantine/notifications 3.6.0-alpha.1 → 3.6.3
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/cjs/NotificationContainer/NotificationContainer.js +3 -2
- package/cjs/NotificationContainer/NotificationContainer.js.map +1 -1
- package/cjs/NotificationsProvider/NotificationsProvider.js +5 -4
- package/cjs/NotificationsProvider/NotificationsProvider.js.map +1 -1
- package/cjs/NotificationsProvider/get-notification-state-styles/get-notification-state-styles.js.map +1 -1
- package/cjs/NotificationsProvider/get-position-styles/get-position-styles.js.map +1 -1
- package/esm/NotificationContainer/NotificationContainer.js +3 -2
- package/esm/NotificationContainer/NotificationContainer.js.map +1 -1
- package/esm/NotificationsProvider/NotificationsProvider.js +6 -5
- package/esm/NotificationsProvider/NotificationsProvider.js.map +1 -1
- package/esm/NotificationsProvider/get-notification-state-styles/get-notification-state-styles.js.map +1 -1
- package/esm/NotificationsProvider/get-position-styles/get-position-styles.js.map +1 -1
- package/lib/NotificationContainer/NotificationContainer.d.ts +1 -1
- package/lib/NotificationContainer/NotificationContainer.d.ts.map +1 -1
- package/lib/NotificationsProvider/NotificationsProvider.d.ts.map +1 -1
- package/lib/NotificationsProvider/get-notification-state-styles/get-notification-state-styles.d.ts +2 -2
- package/lib/NotificationsProvider/get-notification-state-styles/get-notification-state-styles.d.ts.map +1 -1
- package/lib/NotificationsProvider/get-position-styles/get-position-styles.d.ts +2 -2
- package/lib/NotificationsProvider/get-position-styles/get-position-styles.d.ts.map +1 -1
- package/lib/demos/root.d.ts.map +1 -1
- package/lib/types.d.ts +2 -1
- package/lib/types.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
12
12
|
|
|
13
13
|
function NotificationContainer({
|
|
14
14
|
className,
|
|
15
|
-
|
|
15
|
+
sx,
|
|
16
16
|
notification,
|
|
17
17
|
autoClose,
|
|
18
18
|
onHide
|
|
@@ -41,11 +41,12 @@ function NotificationContainer({
|
|
|
41
41
|
return cancelDelayedHide;
|
|
42
42
|
}, [autoClose, notification.autoClose]);
|
|
43
43
|
return /* @__PURE__ */ React__default.createElement(core.Notification, {
|
|
44
|
-
|
|
44
|
+
sx,
|
|
45
45
|
className,
|
|
46
46
|
title: notification.title,
|
|
47
47
|
onClose: handleHide,
|
|
48
48
|
color: notification.color,
|
|
49
|
+
radius: notification.radius,
|
|
49
50
|
icon: notification.icon,
|
|
50
51
|
loading: notification.loading,
|
|
51
52
|
disallowClose: notification.disallowClose,
|
|
@@ -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
|
|
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;;;;"}
|
|
@@ -101,7 +101,7 @@ function NotificationsProvider(_a) {
|
|
|
101
101
|
onHide: hideNotification,
|
|
102
102
|
className: classes.notification,
|
|
103
103
|
autoClose,
|
|
104
|
-
|
|
104
|
+
sx: __spreadValues({}, getNotificationStateStyles['default']({
|
|
105
105
|
state,
|
|
106
106
|
positioning,
|
|
107
107
|
transitionDuration: duration,
|
|
@@ -120,11 +120,12 @@ function NotificationsProvider(_a) {
|
|
|
120
120
|
}
|
|
121
121
|
}, /* @__PURE__ */ React__default.createElement(core.Portal, {
|
|
122
122
|
zIndex
|
|
123
|
-
}, /* @__PURE__ */ React__default.createElement(
|
|
123
|
+
}, /* @__PURE__ */ React__default.createElement(core.Box, __spreadValues({
|
|
124
124
|
className: cx(classes.notifications, className),
|
|
125
|
-
style
|
|
125
|
+
style,
|
|
126
|
+
sx: __spreadValues({
|
|
126
127
|
maxWidth: containerWidth
|
|
127
|
-
}, getPositionStyles['default'](positioning, containerWidth, theme.spacing.md))
|
|
128
|
+
}, getPositionStyles['default'](positioning, containerWidth, theme.spacing.md))
|
|
128
129
|
}, others), /* @__PURE__ */ React__default.createElement(reactTransitionGroup.TransitionGroup, null, items))), children);
|
|
129
130
|
}
|
|
130
131
|
NotificationsProvider.displayName = "@mantine/notifications/NotificationsProvider";
|
|
@@ -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, MantineMargin, getDefaultZIndex } from '@mantine/core';\nimport { useReducedMotion } 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, MantineMargin>,\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 {\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 const items = notifications.map((notification) => (\n <Transition\n key={notification.id}\n timeout={duration}\n unmountOnExit\n mountOnEnter\n onEnter={(node: any) => node.offsetHeight}\n >\n {(state) => (\n <NotificationContainer\n notification={notification}\n onHide={hideNotification}\n className={classes.notification}\n autoClose={autoClose}\n
|
|
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, MantineMargin, getDefaultZIndex, Box } from '@mantine/core';\nimport { useReducedMotion } 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, MantineMargin>,\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 {\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 const items = notifications.map((notification) => (\n <Transition\n key={notification.id}\n timeout={duration}\n unmountOnExit\n mountOnEnter\n onEnter={(node: any) => node.offsetHeight}\n >\n {(state) => (\n <NotificationContainer\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","useNotificationsState","useReducedMotion","useStyles","React","Transition","NotificationContainer","getNotificationStateStyles","NotificationsContext","Portal","Box","getPositionStyles","TransitionGroup"],"mappings":"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"}
|
package/cjs/NotificationsProvider/get-notification-state-styles/get-notification-state-styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-notification-state-styles.js","sources":["../../../src/NotificationsProvider/get-notification-state-styles/get-notification-state-styles.ts"],"sourcesContent":["import { TransitionStatus } from 'react-transition-group';\nimport { NotificationsProviderPositioning } from '../../types';\n\ninterface NotificationStateStylesProps {\n state: TransitionStatus;\n maxHeight: number;\n positioning: NotificationsProviderPositioning;\n transitionDuration: number;\n}\n\nconst transforms = {\n left: 'translateX(-100%)',\n right: 'translateX(100%)',\n 'top-center': 'translateY(-100%)',\n 'bottom-center': 'translateY(100%)',\n};\n\nconst noTransform = {\n left: 'translateX(0)',\n right: 'translateX(0)',\n 'top-center': 'translateY(0)',\n 'bottom-center': 'translateY(0)',\n};\n\nexport default function getNotificationStateStyles({\n state,\n maxHeight,\n positioning,\n transitionDuration,\n}: NotificationStateStylesProps):
|
|
1
|
+
{"version":3,"file":"get-notification-state-styles.js","sources":["../../../src/NotificationsProvider/get-notification-state-styles/get-notification-state-styles.ts"],"sourcesContent":["import { TransitionStatus } from 'react-transition-group';\nimport { CSSObject } from '@mantine/core';\nimport { NotificationsProviderPositioning } from '../../types';\n\ninterface NotificationStateStylesProps {\n state: TransitionStatus;\n maxHeight: number;\n positioning: NotificationsProviderPositioning;\n transitionDuration: number;\n}\n\nconst transforms = {\n left: 'translateX(-100%)',\n right: 'translateX(100%)',\n 'top-center': 'translateY(-100%)',\n 'bottom-center': 'translateY(100%)',\n};\n\nconst noTransform = {\n left: 'translateX(0)',\n right: 'translateX(0)',\n 'top-center': 'translateY(0)',\n 'bottom-center': 'translateY(0)',\n};\n\nexport default function getNotificationStateStyles({\n state,\n maxHeight,\n positioning,\n transitionDuration,\n}: NotificationStateStylesProps): CSSObject {\n const [vertical, horizontal] = positioning;\n const property = horizontal === 'center' ? `${vertical}-center` : horizontal;\n\n const commonStyles: CSSObject = {\n opacity: 0,\n maxHeight,\n transform: transforms[property],\n transitionDuration: `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`,\n transitionTimingFunction: 'cubic-bezier(.51,.3,0,1.21), cubic-bezier(.51,.3,0,1.21), linear',\n transitionProperty: 'opacity, transform, max-height',\n };\n\n const inState: CSSObject = {\n opacity: 1,\n transform: noTransform[property],\n };\n\n const outState: CSSObject = {\n opacity: 0,\n maxHeight: 0,\n transform: transforms[property],\n };\n\n const transitionStyles = {\n entering: inState,\n entered: inState,\n exiting: outState,\n exited: outState,\n };\n\n return { ...commonStyles, ...transitionStyles[state] };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-position-styles.js","sources":["../../../src/NotificationsProvider/get-position-styles/get-position-styles.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"get-position-styles.js","sources":["../../../src/NotificationsProvider/get-position-styles/get-position-styles.ts"],"sourcesContent":["import { CSSObject } from '@mantine/core';\nimport { NotificationsProviderPositioning } from '../../types';\n\nexport default function getPositionStyles(\n [vertical, horizontal]: NotificationsProviderPositioning,\n containerWidth: number,\n spacing: number\n) {\n const styles: CSSObject = {};\n\n vertical === 'top' && (styles.top = spacing);\n vertical === 'bottom' && (styles.bottom = spacing);\n\n horizontal === 'left' && (styles.left = spacing);\n horizontal === 'right' && (styles.right = spacing);\n horizontal === 'center' && (styles.left = `calc(50% - ${containerWidth / 2}px)`);\n\n return styles;\n}\n"],"names":[],"mappings":";;;;AAAe,SAAS,iBAAiB,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,cAAc,EAAE,OAAO,EAAE;AAC3F,EAAE,MAAM,MAAM,GAAG,EAAE,CAAC;AACpB,EAAE,QAAQ,KAAK,KAAK,KAAK,MAAM,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC;AAC/C,EAAE,QAAQ,KAAK,QAAQ,KAAK,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC;AACrD,EAAE,UAAU,KAAK,MAAM,KAAK,MAAM,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;AACnD,EAAE,UAAU,KAAK,OAAO,KAAK,MAAM,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC;AACrD,EAAE,UAAU,KAAK,QAAQ,KAAK,MAAM,CAAC,IAAI,GAAG,CAAC,WAAW,EAAE,cAAc,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AACnF,EAAE,OAAO,MAAM,CAAC;AAChB;;;;"}
|
|
@@ -4,7 +4,7 @@ import getAutoClose from './get-auto-close/get-auto-close.js';
|
|
|
4
4
|
|
|
5
5
|
function NotificationContainer({
|
|
6
6
|
className,
|
|
7
|
-
|
|
7
|
+
sx,
|
|
8
8
|
notification,
|
|
9
9
|
autoClose,
|
|
10
10
|
onHide
|
|
@@ -33,11 +33,12 @@ function NotificationContainer({
|
|
|
33
33
|
return cancelDelayedHide;
|
|
34
34
|
}, [autoClose, notification.autoClose]);
|
|
35
35
|
return /* @__PURE__ */ React.createElement(Notification, {
|
|
36
|
-
|
|
36
|
+
sx,
|
|
37
37
|
className,
|
|
38
38
|
title: notification.title,
|
|
39
39
|
onClose: handleHide,
|
|
40
40
|
color: notification.color,
|
|
41
|
+
radius: notification.radius,
|
|
41
42
|
icon: notification.icon,
|
|
42
43
|
loading: notification.loading,
|
|
43
44
|
disallowClose: notification.disallowClose,
|
|
@@ -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
|
|
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,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Transition, TransitionGroup } from 'react-transition-group';
|
|
3
|
-
import { getDefaultZIndex, Portal } from '@mantine/core';
|
|
3
|
+
import { getDefaultZIndex, Portal, Box } from '@mantine/core';
|
|
4
4
|
import { useReducedMotion } from '@mantine/hooks';
|
|
5
5
|
import { NotificationsContext } from '../Notifications.context.js';
|
|
6
6
|
import getPositionStyles from './get-position-styles/get-position-styles.js';
|
|
@@ -93,7 +93,7 @@ function NotificationsProvider(_a) {
|
|
|
93
93
|
onHide: hideNotification,
|
|
94
94
|
className: classes.notification,
|
|
95
95
|
autoClose,
|
|
96
|
-
|
|
96
|
+
sx: __spreadValues({}, getNotificationStateStyles({
|
|
97
97
|
state,
|
|
98
98
|
positioning,
|
|
99
99
|
transitionDuration: duration,
|
|
@@ -112,11 +112,12 @@ function NotificationsProvider(_a) {
|
|
|
112
112
|
}
|
|
113
113
|
}, /* @__PURE__ */ React.createElement(Portal, {
|
|
114
114
|
zIndex
|
|
115
|
-
}, /* @__PURE__ */ React.createElement(
|
|
115
|
+
}, /* @__PURE__ */ React.createElement(Box, __spreadValues({
|
|
116
116
|
className: cx(classes.notifications, className),
|
|
117
|
-
style
|
|
117
|
+
style,
|
|
118
|
+
sx: __spreadValues({
|
|
118
119
|
maxWidth: containerWidth
|
|
119
|
-
}, getPositionStyles(positioning, containerWidth, theme.spacing.md))
|
|
120
|
+
}, getPositionStyles(positioning, containerWidth, theme.spacing.md))
|
|
120
121
|
}, others), /* @__PURE__ */ React.createElement(TransitionGroup, null, items))), children);
|
|
121
122
|
}
|
|
122
123
|
NotificationsProvider.displayName = "@mantine/notifications/NotificationsProvider";
|
|
@@ -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, MantineMargin, getDefaultZIndex } from '@mantine/core';\nimport { useReducedMotion } 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, MantineMargin>,\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 {\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 const items = notifications.map((notification) => (\n <Transition\n key={notification.id}\n timeout={duration}\n unmountOnExit\n mountOnEnter\n onEnter={(node: any) => node.offsetHeight}\n >\n {(state) => (\n <NotificationContainer\n notification={notification}\n onHide={hideNotification}\n className={classes.notification}\n autoClose={autoClose}\n
|
|
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, MantineMargin, getDefaultZIndex, Box } from '@mantine/core';\nimport { useReducedMotion } 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, MantineMargin>,\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 {\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 const items = notifications.map((notification) => (\n <Transition\n key={notification.id}\n timeout={duration}\n unmountOnExit\n mountOnEnter\n onEnter={(node: any) => node.offsetHeight}\n >\n {(state) => (\n <NotificationContainer\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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"}
|
package/esm/NotificationsProvider/get-notification-state-styles/get-notification-state-styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-notification-state-styles.js","sources":["../../../src/NotificationsProvider/get-notification-state-styles/get-notification-state-styles.ts"],"sourcesContent":["import { TransitionStatus } from 'react-transition-group';\nimport { NotificationsProviderPositioning } from '../../types';\n\ninterface NotificationStateStylesProps {\n state: TransitionStatus;\n maxHeight: number;\n positioning: NotificationsProviderPositioning;\n transitionDuration: number;\n}\n\nconst transforms = {\n left: 'translateX(-100%)',\n right: 'translateX(100%)',\n 'top-center': 'translateY(-100%)',\n 'bottom-center': 'translateY(100%)',\n};\n\nconst noTransform = {\n left: 'translateX(0)',\n right: 'translateX(0)',\n 'top-center': 'translateY(0)',\n 'bottom-center': 'translateY(0)',\n};\n\nexport default function getNotificationStateStyles({\n state,\n maxHeight,\n positioning,\n transitionDuration,\n}: NotificationStateStylesProps):
|
|
1
|
+
{"version":3,"file":"get-notification-state-styles.js","sources":["../../../src/NotificationsProvider/get-notification-state-styles/get-notification-state-styles.ts"],"sourcesContent":["import { TransitionStatus } from 'react-transition-group';\nimport { CSSObject } from '@mantine/core';\nimport { NotificationsProviderPositioning } from '../../types';\n\ninterface NotificationStateStylesProps {\n state: TransitionStatus;\n maxHeight: number;\n positioning: NotificationsProviderPositioning;\n transitionDuration: number;\n}\n\nconst transforms = {\n left: 'translateX(-100%)',\n right: 'translateX(100%)',\n 'top-center': 'translateY(-100%)',\n 'bottom-center': 'translateY(100%)',\n};\n\nconst noTransform = {\n left: 'translateX(0)',\n right: 'translateX(0)',\n 'top-center': 'translateY(0)',\n 'bottom-center': 'translateY(0)',\n};\n\nexport default function getNotificationStateStyles({\n state,\n maxHeight,\n positioning,\n transitionDuration,\n}: NotificationStateStylesProps): CSSObject {\n const [vertical, horizontal] = positioning;\n const property = horizontal === 'center' ? `${vertical}-center` : horizontal;\n\n const commonStyles: CSSObject = {\n opacity: 0,\n maxHeight,\n transform: transforms[property],\n transitionDuration: `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`,\n transitionTimingFunction: 'cubic-bezier(.51,.3,0,1.21), cubic-bezier(.51,.3,0,1.21), linear',\n transitionProperty: 'opacity, transform, max-height',\n };\n\n const inState: CSSObject = {\n opacity: 1,\n transform: noTransform[property],\n };\n\n const outState: CSSObject = {\n opacity: 0,\n maxHeight: 0,\n transform: transforms[property],\n };\n\n const transitionStyles = {\n entering: inState,\n entered: inState,\n exiting: outState,\n exited: outState,\n };\n\n return { ...commonStyles, ...transitionStyles[state] };\n}\n"],"names":[],"mappings":"AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,MAAM,UAAU,GAAG;AACnB,EAAE,IAAI,EAAE,mBAAmB;AAC3B,EAAE,KAAK,EAAE,kBAAkB;AAC3B,EAAE,YAAY,EAAE,mBAAmB;AACnC,EAAE,eAAe,EAAE,kBAAkB;AACrC,CAAC,CAAC;AACF,MAAM,WAAW,GAAG;AACpB,EAAE,IAAI,EAAE,eAAe;AACvB,EAAE,KAAK,EAAE,eAAe;AACxB,EAAE,YAAY,EAAE,eAAe;AAC/B,EAAE,eAAe,EAAE,eAAe;AAClC,CAAC,CAAC;AACa,SAAS,0BAA0B,CAAC;AACnD,EAAE,KAAK;AACP,EAAE,SAAS;AACX,EAAE,WAAW;AACb,EAAE,kBAAkB;AACpB,CAAC,EAAE;AACH,EAAE,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,WAAW,CAAC;AAC7C,EAAE,MAAM,QAAQ,GAAG,UAAU,KAAK,QAAQ,GAAG,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC;AAC/E,EAAE,MAAM,YAAY,GAAG;AACvB,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,SAAS;AACb,IAAI,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC;AACnC,IAAI,kBAAkB,EAAE,CAAC,EAAE,kBAAkB,CAAC,IAAI,EAAE,kBAAkB,CAAC,IAAI,EAAE,kBAAkB,CAAC,EAAE,CAAC;AACnG,IAAI,wBAAwB,EAAE,kEAAkE;AAChG,IAAI,kBAAkB,EAAE,gCAAgC;AACxD,GAAG,CAAC;AACJ,EAAE,MAAM,OAAO,GAAG;AAClB,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC;AACpC,GAAG,CAAC;AACJ,EAAE,MAAM,QAAQ,GAAG;AACnB,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,SAAS,EAAE,CAAC;AAChB,IAAI,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC;AACnC,GAAG,CAAC;AACJ,EAAE,MAAM,gBAAgB,GAAG;AAC3B,IAAI,QAAQ,EAAE,OAAO;AACrB,IAAI,OAAO,EAAE,OAAO;AACpB,IAAI,OAAO,EAAE,QAAQ;AACrB,IAAI,MAAM,EAAE,QAAQ;AACpB,GAAG,CAAC;AACJ,EAAE,OAAO,cAAc,CAAC,cAAc,CAAC,EAAE,EAAE,YAAY,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;AACnF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-position-styles.js","sources":["../../../src/NotificationsProvider/get-position-styles/get-position-styles.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"get-position-styles.js","sources":["../../../src/NotificationsProvider/get-position-styles/get-position-styles.ts"],"sourcesContent":["import { CSSObject } from '@mantine/core';\nimport { NotificationsProviderPositioning } from '../../types';\n\nexport default function getPositionStyles(\n [vertical, horizontal]: NotificationsProviderPositioning,\n containerWidth: number,\n spacing: number\n) {\n const styles: CSSObject = {};\n\n vertical === 'top' && (styles.top = spacing);\n vertical === 'bottom' && (styles.bottom = spacing);\n\n horizontal === 'left' && (styles.left = spacing);\n horizontal === 'right' && (styles.right = spacing);\n horizontal === 'center' && (styles.left = `calc(50% - ${containerWidth / 2}px)`);\n\n return styles;\n}\n"],"names":[],"mappings":"AAAe,SAAS,iBAAiB,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,cAAc,EAAE,OAAO,EAAE;AAC3F,EAAE,MAAM,MAAM,GAAG,EAAE,CAAC;AACpB,EAAE,QAAQ,KAAK,KAAK,KAAK,MAAM,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC;AAC/C,EAAE,QAAQ,KAAK,QAAQ,KAAK,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC;AACrD,EAAE,UAAU,KAAK,MAAM,KAAK,MAAM,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;AACnD,EAAE,UAAU,KAAK,OAAO,KAAK,MAAM,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC;AACrD,EAAE,UAAU,KAAK,QAAQ,KAAK,MAAM,CAAC,IAAI,GAAG,CAAC,WAAW,EAAE,cAAc,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AACnF,EAAE,OAAO,MAAM,CAAC;AAChB;;;;"}
|
|
@@ -6,7 +6,7 @@ export interface NotificationContainerProps extends DefaultProps {
|
|
|
6
6
|
onHide(id: string): void;
|
|
7
7
|
autoClose: false | number;
|
|
8
8
|
}
|
|
9
|
-
declare function NotificationContainer({ className,
|
|
9
|
+
declare function NotificationContainer({ className, sx, notification, autoClose, onHide, }: NotificationContainerProps): JSX.Element;
|
|
10
10
|
declare namespace NotificationContainer {
|
|
11
11
|
var displayName: string;
|
|
12
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationContainer.d.ts","sourceRoot":"","sources":["../../src/NotificationContainer/NotificationContainer.tsx"],"names":[],"mappings":";AACA,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;CAC3B;AAED,iBAAwB,qBAAqB,CAAC,EAC5C,SAAS,EACT,
|
|
1
|
+
{"version":3,"file":"NotificationContainer.d.ts","sourceRoot":"","sources":["../../src/NotificationContainer/NotificationContainer.tsx"],"names":[],"mappings":";AACA,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;CAC3B;AAED,iBAAwB,qBAAqB,CAAC,EAC5C,SAAS,EACT,EAAE,EACF,YAAY,EACZ,SAAS,EACT,MAAM,GACP,EAAE,0BAA0B,eA+C5B;kBArDuB,qBAAqB;;;eAArB,qBAAqB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsProvider.d.ts","sourceRoot":"","sources":["../../src/NotificationsProvider/NotificationsProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAU,aAAa,
|
|
1
|
+
{"version":3,"file":"NotificationsProvider.d.ts","sourceRoot":"","sources":["../../src/NotificationsProvider/NotificationsProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAU,aAAa,EAAyB,MAAM,eAAe,CAAC;AAmB3F,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC,EACvC,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,eAyE3B;yBArFe,qBAAqB"}
|
package/lib/NotificationsProvider/get-notification-state-styles/get-notification-state-styles.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { TransitionStatus } from 'react-transition-group';
|
|
2
|
+
import { CSSObject } from '@mantine/core';
|
|
3
3
|
import { NotificationsProviderPositioning } from '../../types';
|
|
4
4
|
interface NotificationStateStylesProps {
|
|
5
5
|
state: TransitionStatus;
|
|
@@ -7,6 +7,6 @@ interface NotificationStateStylesProps {
|
|
|
7
7
|
positioning: NotificationsProviderPositioning;
|
|
8
8
|
transitionDuration: number;
|
|
9
9
|
}
|
|
10
|
-
export default function getNotificationStateStyles({ state, maxHeight, positioning, transitionDuration, }: NotificationStateStylesProps):
|
|
10
|
+
export default function getNotificationStateStyles({ state, maxHeight, positioning, transitionDuration, }: NotificationStateStylesProps): CSSObject;
|
|
11
11
|
export {};
|
|
12
12
|
//# sourceMappingURL=get-notification-state-styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-notification-state-styles.d.ts","sourceRoot":"","sources":["../../../src/NotificationsProvider/get-notification-state-styles/get-notification-state-styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"get-notification-state-styles.d.ts","sourceRoot":"","sources":["../../../src/NotificationsProvider/get-notification-state-styles/get-notification-state-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,gCAAgC,EAAE,MAAM,aAAa,CAAC;AAE/D,UAAU,4BAA4B;IACpC,KAAK,EAAE,gBAAgB,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,gCAAgC,CAAC;IAC9C,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAgBD,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,EACjD,KAAK,EACL,SAAS,EACT,WAAW,EACX,kBAAkB,GACnB,EAAE,4BAA4B,GAAG,SAAS,CAgC1C"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { CSSObject } from '@mantine/core';
|
|
2
2
|
import { NotificationsProviderPositioning } from '../../types';
|
|
3
|
-
export default function getPositionStyles([vertical, horizontal]: NotificationsProviderPositioning, containerWidth: number, spacing: number):
|
|
3
|
+
export default function getPositionStyles([vertical, horizontal]: NotificationsProviderPositioning, containerWidth: number, spacing: number): CSSObject;
|
|
4
4
|
//# sourceMappingURL=get-position-styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-position-styles.d.ts","sourceRoot":"","sources":["../../../src/NotificationsProvider/get-position-styles/get-position-styles.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"get-position-styles.d.ts","sourceRoot":"","sources":["../../../src/NotificationsProvider/get-position-styles/get-position-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,gCAAgC,EAAE,MAAM,aAAa,CAAC;AAE/D,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,gCAAgC,EACxD,cAAc,EAAE,MAAM,EACtB,OAAO,EAAE,MAAM,aAYhB"}
|
package/lib/demos/root.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/demos/root.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/demos/root.tsx"],"names":[],"mappings":"AAiHA,eAAO,MAAM,IAAI,EAAE,WAGlB,CAAC"}
|
package/lib/types.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { MantineColor } from '@mantine/core';
|
|
2
|
+
import type { MantineColor, MantineNumberSize } from '@mantine/core';
|
|
3
3
|
export interface NotificationProps {
|
|
4
4
|
id?: string;
|
|
5
5
|
color?: MantineColor;
|
|
6
|
+
radius?: MantineNumberSize;
|
|
6
7
|
className?: string;
|
|
7
8
|
style?: React.CSSProperties;
|
|
8
9
|
icon?: React.ReactNode;
|
package/lib/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAErE,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACzC,MAAM,CAAC,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,iBAAiB,EAAE,CAAC;IACnC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,CAAC;IACnD,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC/D,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,KAAK,IAAI,IAAI,CAAC;IACd,UAAU,IAAI,IAAI,CAAC;CACpB;AAED,oBAAY,gCAAgC,GAAG,CAAC,KAAK,GAAG,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC"}
|
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.6.
|
|
4
|
+
"version": "3.6.3",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
7
7
|
"types": "lib/index.d.ts",
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
"directory": "src/mantine-notifications"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
|
-
"@mantine/core": "3.6.
|
|
19
|
-
"@mantine/hooks": "3.6.
|
|
18
|
+
"@mantine/core": "3.6.3",
|
|
19
|
+
"@mantine/hooks": "3.6.3",
|
|
20
20
|
"react": ">=16.8.0",
|
|
21
21
|
"react-dom": ">=16.8.0"
|
|
22
22
|
},
|