@mantine/notifications 4.2.9 → 5.0.0-alpha.10
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/NotificationsProvider/NotificationsProvider.js +12 -16
- package/cjs/NotificationsProvider/NotificationsProvider.js.map +1 -1
- package/cjs/NotificationsProvider/NotificationsProvider.styles.js +2 -2
- package/cjs/NotificationsProvider/NotificationsProvider.styles.js.map +1 -1
- package/cjs/NotificationsProvider/use-notifications-state/use-notifications-state.js +2 -2
- package/cjs/NotificationsProvider/use-notifications-state/use-notifications-state.js.map +1 -1
- package/cjs/events.js +7 -46
- package/cjs/events.js.map +1 -1
- package/esm/NotificationsProvider/NotificationsProvider.js +12 -16
- package/esm/NotificationsProvider/NotificationsProvider.js.map +1 -1
- package/esm/NotificationsProvider/NotificationsProvider.styles.js +2 -2
- package/esm/NotificationsProvider/NotificationsProvider.styles.js.map +1 -1
- package/esm/NotificationsProvider/use-notifications-state/use-notifications-state.js +2 -2
- package/esm/NotificationsProvider/use-notifications-state/use-notifications-state.js.map +1 -1
- package/esm/events.js +8 -46
- package/esm/events.js.map +1 -1
- package/lib/NotificationsProvider/NotificationsProvider.d.ts +1 -1
- package/lib/NotificationsProvider/NotificationsProvider.d.ts.map +1 -1
- package/lib/NotificationsProvider/NotificationsProvider.styles.d.ts +6 -2
- package/lib/NotificationsProvider/NotificationsProvider.styles.d.ts.map +1 -1
- package/lib/NotificationsProvider/use-notifications-state/use-notifications-state.d.ts +1 -1
- package/lib/NotificationsProvider/use-notifications-state/use-notifications-state.d.ts.map +1 -1
- package/lib/events.d.ts +16 -17
- package/lib/events.d.ts.map +1 -1
- package/lib/types.d.ts +0 -5
- package/lib/types.d.ts.map +1 -1
- package/package.json +4 -3
|
@@ -90,26 +90,24 @@ function NotificationsProvider(_a) {
|
|
|
90
90
|
clean,
|
|
91
91
|
cleanQueue
|
|
92
92
|
} = useNotificationsState['default']({ limit });
|
|
93
|
-
const
|
|
93
|
+
const { classes, cx, theme } = NotificationsProvider_styles['default']({ zIndex });
|
|
94
|
+
const shouldReduceMotion = hooks.useReducedMotion();
|
|
95
|
+
const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;
|
|
94
96
|
const duration = reduceMotion ? 1 : transitionDuration;
|
|
95
|
-
const { classes, cx, theme } = NotificationsProvider_styles['default']();
|
|
96
97
|
const positioning = (POSITIONS.includes(position) ? position : "bottom-right").split("-");
|
|
97
|
-
const ctx = {
|
|
98
|
-
notifications,
|
|
99
|
-
queue,
|
|
100
|
-
showNotification,
|
|
101
|
-
hideNotification,
|
|
102
|
-
updateNotification,
|
|
103
|
-
clean,
|
|
104
|
-
cleanQueue
|
|
105
|
-
};
|
|
106
98
|
hooks.useDidUpdate(() => {
|
|
107
99
|
if (notifications.length > previousLength.current) {
|
|
108
100
|
setTimeout(() => forceUpdate(), 0);
|
|
109
101
|
}
|
|
110
102
|
previousLength.current = notifications.length;
|
|
111
103
|
}, [notifications]);
|
|
112
|
-
events.useNotificationsEvents(
|
|
104
|
+
events.useNotificationsEvents({
|
|
105
|
+
show: showNotification,
|
|
106
|
+
hide: hideNotification,
|
|
107
|
+
update: updateNotification,
|
|
108
|
+
clean,
|
|
109
|
+
cleanQueue
|
|
110
|
+
});
|
|
113
111
|
const items = notifications.map((notification) => /* @__PURE__ */ React__default.createElement(reactTransitionGroup.Transition, {
|
|
114
112
|
key: notification.id,
|
|
115
113
|
timeout: duration,
|
|
@@ -134,10 +132,8 @@ function NotificationsProvider(_a) {
|
|
|
134
132
|
]
|
|
135
133
|
})));
|
|
136
134
|
return /* @__PURE__ */ React__default.createElement(Notifications_context.NotificationsContext.Provider, {
|
|
137
|
-
value:
|
|
138
|
-
}, /* @__PURE__ */ React__default.createElement(core.Portal, {
|
|
139
|
-
zIndex
|
|
140
|
-
}, /* @__PURE__ */ React__default.createElement(core.Box, __spreadValues({
|
|
135
|
+
value: { notifications, queue }
|
|
136
|
+
}, /* @__PURE__ */ React__default.createElement(core.Portal, null, /* @__PURE__ */ React__default.createElement(core.Box, __spreadValues({
|
|
141
137
|
className: cx(classes.notifications, className),
|
|
142
138
|
style,
|
|
143
139
|
sx: __spreadValues({
|
|
@@ -1 +1 @@
|
|
|
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 { useNotificationsEvents } from '../events';\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 const ctx = {\n notifications,\n queue,\n showNotification,\n hideNotification,\n updateNotification,\n clean,\n cleanQueue,\n };\n\n useDidUpdate(() => {\n if (notifications.length > previousLength.current) {\n setTimeout(() => forceUpdate(), 0);\n }\n previousLength.current = notifications.length;\n }, [notifications]);\n\n useNotificationsEvents(ctx);\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 {\n ...getNotificationStateStyles({\n state,\n positioning,\n transitionDuration: duration,\n maxHeight: notificationMaxHeight,\n }),\n },\n ...(Array.isArray(notification.sx) ? notification.sx : [notification.sx]),\n ]}\n />\n )}\n </Transition>\n ));\n\n return (\n <NotificationsContext.Provider value={ctx}>\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","useNotificationsEvents","React","Transition","NotificationContainer","getNotificationStateStyles","NotificationsContext","Portal","Box","getPositionStyles","TransitionGroup"],"mappings":"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"}
|
|
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 { useNotificationsEvents } from '../events';\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?: React.CSSProperties['zIndex'];\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\n const { classes, cx, theme } = useStyles({ zIndex });\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion ? 1 : transitionDuration;\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 useNotificationsEvents({\n show: showNotification,\n hide: hideNotification,\n update: updateNotification,\n clean,\n cleanQueue,\n });\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 {\n ...getNotificationStateStyles({\n state,\n positioning,\n transitionDuration: duration,\n maxHeight: notificationMaxHeight,\n }),\n },\n ...(Array.isArray(notification.sx) ? notification.sx : [notification.sx]),\n ]}\n />\n )}\n </Transition>\n ));\n\n return (\n <NotificationsContext.Provider value={{ notifications, queue }}>\n <Portal>\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","useStyles","useReducedMotion","useDidUpdate","useNotificationsEvents","React","Transition","NotificationContainer","getNotificationStateStyles","NotificationsContext","Portal","Box","getPositionStyles","TransitionGroup"],"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,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAYF,MAAM,SAAS,GAAG;AAClB,EAAE,UAAU;AACZ,EAAE,WAAW;AACb,EAAE,YAAY;AACd,EAAE,aAAa;AACf,EAAE,cAAc;AAChB,EAAE,eAAe;AACjB,CAAC,CAAC;AACK,SAAS,qBAAqB,CAAC,EAAE,EAAE;AAC1C,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;AACf,IAAI,SAAS;AACb,IAAI,QAAQ,GAAG,cAAc;AAC7B,IAAI,SAAS,GAAG,GAAG;AACnB,IAAI,kBAAkB,GAAG,GAAG;AAC5B,IAAI,cAAc,GAAG,GAAG;AACxB,IAAI,qBAAqB,GAAG,GAAG;AAC/B,IAAI,KAAK,GAAG,CAAC;AACb,IAAI,MAAM,GAAGA,qBAAgB,CAAC,SAAS,CAAC;AACxC,IAAI,KAAK;AACT,IAAI,QAAQ;AACZ,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,WAAW;AACf,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,oBAAoB;AACxB,IAAI,gBAAgB;AACpB,IAAI,uBAAuB;AAC3B,IAAI,OAAO;AACX,IAAI,QAAQ;AACZ,IAAI,OAAO;AACX,IAAI,UAAU;AACd,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,WAAW,GAAGC,oBAAc,EAAE,CAAC;AACvC,EAAE,MAAM,IAAI,GAAGC,YAAM,CAAC,EAAE,CAAC,CAAC;AAC1B,EAAE,MAAM,cAAc,GAAGA,YAAM,CAAC,CAAC,CAAC,CAAC;AACnC,EAAE,MAAM;AACR,IAAI,aAAa;AACjB,IAAI,KAAK;AACT,IAAI,gBAAgB;AACpB,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,KAAK;AACT,IAAI,UAAU;AACd,GAAG,GAAGC,gCAAqB,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;AACvC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,GAAGC,uCAAS,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;AACvD,EAAE,MAAM,kBAAkB,GAAGC,sBAAgB,EAAE,CAAC;AAChD,EAAE,MAAM,YAAY,GAAG,KAAK,CAAC,oBAAoB,GAAG,kBAAkB,GAAG,KAAK,CAAC;AAC/E,EAAE,MAAM,QAAQ,GAAG,YAAY,GAAG,CAAC,GAAG,kBAAkB,CAAC;AACzD,EAAE,MAAM,WAAW,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,QAAQ,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AAC5F,EAAEC,kBAAY,CAAC,MAAM;AACrB,IAAI,IAAI,aAAa,CAAC,MAAM,GAAG,cAAc,CAAC,OAAO,EAAE;AACvD,MAAM,UAAU,CAAC,MAAM,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC;AACzC,KAAK;AACL,IAAI,cAAc,CAAC,OAAO,GAAG,aAAa,CAAC,MAAM,CAAC;AAClD,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AACtB,EAAEC,6BAAsB,CAAC;AACzB,IAAI,IAAI,EAAE,gBAAgB;AAC1B,IAAI,IAAI,EAAE,gBAAgB;AAC1B,IAAI,MAAM,EAAE,kBAAkB;AAC9B,IAAI,KAAK;AACT,IAAI,UAAU;AACd,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,KAAK,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,qBAAqBC,cAAK,CAAC,aAAa,CAACC,+BAAU,EAAE;AACpG,IAAI,GAAG,EAAE,YAAY,CAAC,EAAE;AACxB,IAAI,OAAO,EAAE,QAAQ;AACrB,IAAI,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,YAAY;AAC7D,IAAI,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE;AACvD,GAAG,EAAE,CAAC,KAAK,qBAAqBD,cAAK,CAAC,aAAa,CAACE,gCAAqB,EAAE;AAC3E,IAAI,QAAQ,EAAE,CAAC,IAAI,KAAK;AACxB,MAAM,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;AAC3C,KAAK;AACL,IAAI,YAAY;AAChB,IAAI,MAAM,EAAE,gBAAgB;AAC5B,IAAI,SAAS,EAAE,OAAO,CAAC,YAAY;AACnC,IAAI,SAAS;AACb,IAAI,EAAE,EAAE;AACR,MAAM,cAAc,CAAC,EAAE,EAAEC,qCAA0B,CAAC;AACpD,QAAQ,KAAK;AACb,QAAQ,WAAW;AACnB,QAAQ,kBAAkB,EAAE,QAAQ;AACpC,QAAQ,SAAS,EAAE,qBAAqB;AACxC,OAAO,CAAC,CAAC;AACT,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;AAC7E,KAAK;AACL,GAAG,CAAC,CAAC,CAAC,CAAC;AACP,EAAE,uBAAuBH,cAAK,CAAC,aAAa,CAACI,0CAAoB,CAAC,QAAQ,EAAE;AAC5E,IAAI,KAAK,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE;AACnC,GAAG,kBAAkBJ,cAAK,CAAC,aAAa,CAACK,WAAM,EAAE,IAAI,kBAAkBL,cAAK,CAAC,aAAa,CAACM,QAAG,EAAE,cAAc,CAAC;AAC/G,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,aAAa,EAAE,SAAS,CAAC;AACnD,IAAI,KAAK;AACT,IAAI,EAAE,EAAE,cAAc,CAAC;AACvB,MAAM,QAAQ,EAAE,cAAc;AAC9B,KAAK,EAAEC,4BAAiB,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;AACxE,GAAG,EAAE,MAAM,CAAC,kBAAkBP,cAAK,CAAC,aAAa,CAACQ,oCAAe,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;AAC7F,CAAC;AACD,qBAAqB,CAAC,WAAW,GAAG,8CAA8C;;;;"}
|
|
@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var core = require('@mantine/core');
|
|
6
6
|
|
|
7
|
-
var useStyles = core.createStyles((theme) => ({
|
|
7
|
+
var useStyles = core.createStyles((theme, { zIndex }) => ({
|
|
8
8
|
notifications: {
|
|
9
9
|
width: `calc(100% - ${theme.spacing.md * 2}px)`,
|
|
10
10
|
boxSizing: "border-box",
|
|
11
11
|
position: "fixed",
|
|
12
|
-
zIndex
|
|
12
|
+
zIndex
|
|
13
13
|
},
|
|
14
14
|
notification: {
|
|
15
15
|
"&:not(:first-of-type)": {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsProvider.styles.js","sources":["../../src/NotificationsProvider/NotificationsProvider.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/core';\n\nexport default createStyles((theme) => ({\n notifications: {\n width: `calc(100% - ${theme.spacing.md * 2}px)`,\n boxSizing: 'border-box',\n position: 'fixed',\n zIndex
|
|
1
|
+
{"version":3,"file":"NotificationsProvider.styles.js","sources":["../../src/NotificationsProvider/NotificationsProvider.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/core';\n\ninterface NotificationsProviderStylesParams {\n zIndex: React.CSSProperties['zIndex'];\n}\n\nexport default createStyles((theme, { zIndex }: NotificationsProviderStylesParams) => ({\n notifications: {\n width: `calc(100% - ${theme.spacing.md * 2}px)`,\n boxSizing: 'border-box',\n position: 'fixed',\n zIndex,\n },\n\n notification: {\n '&:not(:first-of-type)': {\n marginTop: theme.spacing.sm,\n },\n },\n}));\n"],"names":["createStyles"],"mappings":";;;;;;AACA,gBAAeA,iBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM;AACpD,EAAE,aAAa,EAAE;AACjB,IAAI,KAAK,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC;AACnD,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,QAAQ,EAAE,OAAO;AACrB,IAAI,MAAM;AACV,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,uBAAuB,EAAE;AAC7B,MAAM,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AACjC,KAAK;AACL,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}
|
|
@@ -38,8 +38,8 @@ function useNotificationsState({ limit }) {
|
|
|
38
38
|
});
|
|
39
39
|
return id;
|
|
40
40
|
};
|
|
41
|
-
const updateNotification = (
|
|
42
|
-
const index = notifications.findIndex((n) => n.id === id);
|
|
41
|
+
const updateNotification = (notification) => update((notifications) => {
|
|
42
|
+
const index = notifications.findIndex((n) => n.id === notification.id);
|
|
43
43
|
if (index === -1) {
|
|
44
44
|
return notifications;
|
|
45
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-notifications-state.js","sources":["../../../src/NotificationsProvider/use-notifications-state/use-notifications-state.ts"],"sourcesContent":["import { useQueue, randomId } from '@mantine/hooks';\nimport { NotificationProps } from '../../types';\n\nexport default function useNotificationsState({ limit }: { limit: number }) {\n const { state, queue, update, cleanQueue } = useQueue<NotificationProps>({\n initialValues: [],\n limit,\n });\n\n const showNotification = (notification: NotificationProps) => {\n const id = notification.id || randomId();\n\n update((notifications) => {\n if (notification.id && notifications.some((n) => n.id === notification.id)) {\n return notifications;\n }\n\n return [...notifications, { ...notification, id }];\n });\n\n return id;\n };\n\n const updateNotification = (
|
|
1
|
+
{"version":3,"file":"use-notifications-state.js","sources":["../../../src/NotificationsProvider/use-notifications-state/use-notifications-state.ts"],"sourcesContent":["import { useQueue, randomId } from '@mantine/hooks';\nimport { NotificationProps } from '../../types';\n\nexport default function useNotificationsState({ limit }: { limit: number }) {\n const { state, queue, update, cleanQueue } = useQueue<NotificationProps>({\n initialValues: [],\n limit,\n });\n\n const showNotification = (notification: NotificationProps) => {\n const id = notification.id || randomId();\n\n update((notifications) => {\n if (notification.id && notifications.some((n) => n.id === notification.id)) {\n return notifications;\n }\n\n return [...notifications, { ...notification, id }];\n });\n\n return id;\n };\n\n const updateNotification = (notification: NotificationProps) =>\n update((notifications) => {\n const index = notifications.findIndex((n) => n.id === notification.id);\n\n if (index === -1) {\n return notifications;\n }\n\n const newNotifications = [...notifications];\n newNotifications[index] = notification;\n\n return newNotifications;\n });\n\n const hideNotification = (id: string) =>\n update((notifications) =>\n notifications.filter((notification) => {\n if (notification.id === id) {\n typeof notification.onClose === 'function' && notification.onClose(notification);\n return false;\n }\n\n return true;\n })\n );\n\n const clean = () => update(() => []);\n\n return {\n notifications: state,\n queue,\n showNotification,\n updateNotification,\n hideNotification,\n cleanQueue,\n clean,\n };\n}\n"],"names":["useQueue","randomId"],"mappings":"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"}
|
package/cjs/events.js
CHANGED
|
@@ -2,54 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var utils = require('@mantine/utils');
|
|
6
6
|
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
};
|
|
14
|
-
function createEvent(type, detail) {
|
|
15
|
-
return new CustomEvent(type, { detail });
|
|
16
|
-
}
|
|
17
|
-
function showNotification(notification) {
|
|
18
|
-
window.dispatchEvent(createEvent(NOTIFICATIONS_EVENTS.show, notification));
|
|
19
|
-
}
|
|
20
|
-
function updateNotification(notification) {
|
|
21
|
-
window.dispatchEvent(createEvent(NOTIFICATIONS_EVENTS.update, notification));
|
|
22
|
-
}
|
|
23
|
-
function hideNotification(id) {
|
|
24
|
-
window.dispatchEvent(createEvent(NOTIFICATIONS_EVENTS.hide, id));
|
|
25
|
-
}
|
|
26
|
-
function cleanNotifications() {
|
|
27
|
-
window.dispatchEvent(createEvent(NOTIFICATIONS_EVENTS.clean));
|
|
28
|
-
}
|
|
29
|
-
function cleanNotificationsQueue() {
|
|
30
|
-
window.dispatchEvent(createEvent(NOTIFICATIONS_EVENTS.cleanQueue));
|
|
31
|
-
}
|
|
32
|
-
function useNotificationsEvents(ctx) {
|
|
33
|
-
const events = {
|
|
34
|
-
show: (event) => ctx.showNotification(event.detail),
|
|
35
|
-
hide: (event) => ctx.hideNotification(event.detail),
|
|
36
|
-
update: (event) => ctx.updateNotification(event.detail.id, event.detail),
|
|
37
|
-
clean: ctx.clean,
|
|
38
|
-
cleanQueue: ctx.cleanQueue
|
|
39
|
-
};
|
|
40
|
-
React.useEffect(() => {
|
|
41
|
-
Object.keys(events).forEach((event) => {
|
|
42
|
-
window.addEventListener(NOTIFICATIONS_EVENTS[event], events[event]);
|
|
43
|
-
});
|
|
44
|
-
return () => {
|
|
45
|
-
Object.keys(events).forEach((event) => {
|
|
46
|
-
window.removeEventListener(NOTIFICATIONS_EVENTS[event], events[event]);
|
|
47
|
-
});
|
|
48
|
-
};
|
|
49
|
-
}, []);
|
|
50
|
-
}
|
|
7
|
+
const [useNotificationsEvents, createEvent] = utils.createUseExternalEvents("mantine-notifications");
|
|
8
|
+
const showNotification = createEvent("show");
|
|
9
|
+
const hideNotification = createEvent("hide");
|
|
10
|
+
const cleanNotifications = createEvent("clean");
|
|
11
|
+
const cleanNotificationsQueue = createEvent("cleanQueue");
|
|
12
|
+
const updateNotification = createEvent("update");
|
|
51
13
|
|
|
52
|
-
exports.NOTIFICATIONS_EVENTS = NOTIFICATIONS_EVENTS;
|
|
53
14
|
exports.cleanNotifications = cleanNotifications;
|
|
54
15
|
exports.cleanNotificationsQueue = cleanNotificationsQueue;
|
|
55
16
|
exports.createEvent = createEvent;
|
package/cjs/events.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"events.js","sources":["../src/events.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"events.js","sources":["../src/events.ts"],"sourcesContent":["import { createUseExternalEvents } from '@mantine/utils';\nimport type { NotificationProps } from './types';\n\nexport type NotificationsEvents = {\n show(notification: NotificationProps): void;\n hide(id: string): void;\n update(notification: NotificationProps & { id: string }): void;\n clean(): void;\n cleanQueue(): void;\n};\n\nexport const [useNotificationsEvents, createEvent] =\n createUseExternalEvents<NotificationsEvents>('mantine-notifications');\n\nexport const showNotification = createEvent('show');\nexport const hideNotification = createEvent('hide');\nexport const cleanNotifications = createEvent('clean');\nexport const cleanNotificationsQueue = createEvent('cleanQueue');\nexport const updateNotification = createEvent('update');\n"],"names":["createUseExternalEvents"],"mappings":";;;;;;AACY,MAAC,CAAC,sBAAsB,EAAE,WAAW,CAAC,GAAGA,6BAAuB,CAAC,uBAAuB,EAAE;AAC1F,MAAC,gBAAgB,GAAG,WAAW,CAAC,MAAM,EAAE;AACxC,MAAC,gBAAgB,GAAG,WAAW,CAAC,MAAM,EAAE;AACxC,MAAC,kBAAkB,GAAG,WAAW,CAAC,OAAO,EAAE;AAC3C,MAAC,uBAAuB,GAAG,WAAW,CAAC,YAAY,EAAE;AACrD,MAAC,kBAAkB,GAAG,WAAW,CAAC,QAAQ;;;;;;;;;;"}
|
|
@@ -82,26 +82,24 @@ function NotificationsProvider(_a) {
|
|
|
82
82
|
clean,
|
|
83
83
|
cleanQueue
|
|
84
84
|
} = useNotificationsState({ limit });
|
|
85
|
-
const
|
|
85
|
+
const { classes, cx, theme } = useStyles({ zIndex });
|
|
86
|
+
const shouldReduceMotion = useReducedMotion();
|
|
87
|
+
const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;
|
|
86
88
|
const duration = reduceMotion ? 1 : transitionDuration;
|
|
87
|
-
const { classes, cx, theme } = useStyles();
|
|
88
89
|
const positioning = (POSITIONS.includes(position) ? position : "bottom-right").split("-");
|
|
89
|
-
const ctx = {
|
|
90
|
-
notifications,
|
|
91
|
-
queue,
|
|
92
|
-
showNotification,
|
|
93
|
-
hideNotification,
|
|
94
|
-
updateNotification,
|
|
95
|
-
clean,
|
|
96
|
-
cleanQueue
|
|
97
|
-
};
|
|
98
90
|
useDidUpdate(() => {
|
|
99
91
|
if (notifications.length > previousLength.current) {
|
|
100
92
|
setTimeout(() => forceUpdate(), 0);
|
|
101
93
|
}
|
|
102
94
|
previousLength.current = notifications.length;
|
|
103
95
|
}, [notifications]);
|
|
104
|
-
useNotificationsEvents(
|
|
96
|
+
useNotificationsEvents({
|
|
97
|
+
show: showNotification,
|
|
98
|
+
hide: hideNotification,
|
|
99
|
+
update: updateNotification,
|
|
100
|
+
clean,
|
|
101
|
+
cleanQueue
|
|
102
|
+
});
|
|
105
103
|
const items = notifications.map((notification) => /* @__PURE__ */ React.createElement(Transition, {
|
|
106
104
|
key: notification.id,
|
|
107
105
|
timeout: duration,
|
|
@@ -126,10 +124,8 @@ function NotificationsProvider(_a) {
|
|
|
126
124
|
]
|
|
127
125
|
})));
|
|
128
126
|
return /* @__PURE__ */ React.createElement(NotificationsContext.Provider, {
|
|
129
|
-
value:
|
|
130
|
-
}, /* @__PURE__ */ React.createElement(Portal, {
|
|
131
|
-
zIndex
|
|
132
|
-
}, /* @__PURE__ */ React.createElement(Box, __spreadValues({
|
|
127
|
+
value: { notifications, queue }
|
|
128
|
+
}, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Box, __spreadValues({
|
|
133
129
|
className: cx(classes.notifications, className),
|
|
134
130
|
style,
|
|
135
131
|
sx: __spreadValues({
|
|
@@ -1 +1 @@
|
|
|
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 { useNotificationsEvents } from '../events';\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?:
|
|
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 { useNotificationsEvents } from '../events';\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?: React.CSSProperties['zIndex'];\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\n const { classes, cx, theme } = useStyles({ zIndex });\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion ? 1 : transitionDuration;\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 useNotificationsEvents({\n show: showNotification,\n hide: hideNotification,\n update: updateNotification,\n clean,\n cleanQueue,\n });\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 {\n ...getNotificationStateStyles({\n state,\n positioning,\n transitionDuration: duration,\n maxHeight: notificationMaxHeight,\n }),\n },\n ...(Array.isArray(notification.sx) ? notification.sx : [notification.sx]),\n ]}\n />\n )}\n </Transition>\n ));\n\n return (\n <NotificationsContext.Provider value={{ notifications, queue }}>\n <Portal>\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,11 +1,11 @@
|
|
|
1
1
|
import { createStyles } from '@mantine/core';
|
|
2
2
|
|
|
3
|
-
var useStyles = createStyles((theme) => ({
|
|
3
|
+
var useStyles = createStyles((theme, { zIndex }) => ({
|
|
4
4
|
notifications: {
|
|
5
5
|
width: `calc(100% - ${theme.spacing.md * 2}px)`,
|
|
6
6
|
boxSizing: "border-box",
|
|
7
7
|
position: "fixed",
|
|
8
|
-
zIndex
|
|
8
|
+
zIndex
|
|
9
9
|
},
|
|
10
10
|
notification: {
|
|
11
11
|
"&:not(:first-of-type)": {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsProvider.styles.js","sources":["../../src/NotificationsProvider/NotificationsProvider.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/core';\n\nexport default createStyles((theme) => ({\n notifications: {\n width: `calc(100% - ${theme.spacing.md * 2}px)`,\n boxSizing: 'border-box',\n position: 'fixed',\n zIndex
|
|
1
|
+
{"version":3,"file":"NotificationsProvider.styles.js","sources":["../../src/NotificationsProvider/NotificationsProvider.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/core';\n\ninterface NotificationsProviderStylesParams {\n zIndex: React.CSSProperties['zIndex'];\n}\n\nexport default createStyles((theme, { zIndex }: NotificationsProviderStylesParams) => ({\n notifications: {\n width: `calc(100% - ${theme.spacing.md * 2}px)`,\n boxSizing: 'border-box',\n position: 'fixed',\n zIndex,\n },\n\n notification: {\n '&:not(:first-of-type)': {\n marginTop: theme.spacing.sm,\n },\n },\n}));\n"],"names":[],"mappings":";;AACA,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM;AACpD,EAAE,aAAa,EAAE;AACjB,IAAI,KAAK,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC;AACnD,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,QAAQ,EAAE,OAAO;AACrB,IAAI,MAAM;AACV,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,uBAAuB,EAAE;AAC7B,MAAM,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AACjC,KAAK;AACL,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}
|
|
@@ -34,8 +34,8 @@ function useNotificationsState({ limit }) {
|
|
|
34
34
|
});
|
|
35
35
|
return id;
|
|
36
36
|
};
|
|
37
|
-
const updateNotification = (
|
|
38
|
-
const index = notifications.findIndex((n) => n.id === id);
|
|
37
|
+
const updateNotification = (notification) => update((notifications) => {
|
|
38
|
+
const index = notifications.findIndex((n) => n.id === notification.id);
|
|
39
39
|
if (index === -1) {
|
|
40
40
|
return notifications;
|
|
41
41
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-notifications-state.js","sources":["../../../src/NotificationsProvider/use-notifications-state/use-notifications-state.ts"],"sourcesContent":["import { useQueue, randomId } from '@mantine/hooks';\nimport { NotificationProps } from '../../types';\n\nexport default function useNotificationsState({ limit }: { limit: number }) {\n const { state, queue, update, cleanQueue } = useQueue<NotificationProps>({\n initialValues: [],\n limit,\n });\n\n const showNotification = (notification: NotificationProps) => {\n const id = notification.id || randomId();\n\n update((notifications) => {\n if (notification.id && notifications.some((n) => n.id === notification.id)) {\n return notifications;\n }\n\n return [...notifications, { ...notification, id }];\n });\n\n return id;\n };\n\n const updateNotification = (
|
|
1
|
+
{"version":3,"file":"use-notifications-state.js","sources":["../../../src/NotificationsProvider/use-notifications-state/use-notifications-state.ts"],"sourcesContent":["import { useQueue, randomId } from '@mantine/hooks';\nimport { NotificationProps } from '../../types';\n\nexport default function useNotificationsState({ limit }: { limit: number }) {\n const { state, queue, update, cleanQueue } = useQueue<NotificationProps>({\n initialValues: [],\n limit,\n });\n\n const showNotification = (notification: NotificationProps) => {\n const id = notification.id || randomId();\n\n update((notifications) => {\n if (notification.id && notifications.some((n) => n.id === notification.id)) {\n return notifications;\n }\n\n return [...notifications, { ...notification, id }];\n });\n\n return id;\n };\n\n const updateNotification = (notification: NotificationProps) =>\n update((notifications) => {\n const index = notifications.findIndex((n) => n.id === notification.id);\n\n if (index === -1) {\n return notifications;\n }\n\n const newNotifications = [...notifications];\n newNotifications[index] = notification;\n\n return newNotifications;\n });\n\n const hideNotification = (id: string) =>\n update((notifications) =>\n notifications.filter((notification) => {\n if (notification.id === id) {\n typeof notification.onClose === 'function' && notification.onClose(notification);\n return false;\n }\n\n return true;\n })\n );\n\n const clean = () => update(() => []);\n\n return {\n notifications: state,\n queue,\n showNotification,\n updateNotification,\n hideNotification,\n cleanQueue,\n clean,\n };\n}\n"],"names":[],"mappings":"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"}
|
package/esm/events.js
CHANGED
|
@@ -1,49 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { createUseExternalEvents } from '@mantine/utils';
|
|
2
2
|
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
function createEvent(type, detail) {
|
|
11
|
-
return new CustomEvent(type, { detail });
|
|
12
|
-
}
|
|
13
|
-
function showNotification(notification) {
|
|
14
|
-
window.dispatchEvent(createEvent(NOTIFICATIONS_EVENTS.show, notification));
|
|
15
|
-
}
|
|
16
|
-
function updateNotification(notification) {
|
|
17
|
-
window.dispatchEvent(createEvent(NOTIFICATIONS_EVENTS.update, notification));
|
|
18
|
-
}
|
|
19
|
-
function hideNotification(id) {
|
|
20
|
-
window.dispatchEvent(createEvent(NOTIFICATIONS_EVENTS.hide, id));
|
|
21
|
-
}
|
|
22
|
-
function cleanNotifications() {
|
|
23
|
-
window.dispatchEvent(createEvent(NOTIFICATIONS_EVENTS.clean));
|
|
24
|
-
}
|
|
25
|
-
function cleanNotificationsQueue() {
|
|
26
|
-
window.dispatchEvent(createEvent(NOTIFICATIONS_EVENTS.cleanQueue));
|
|
27
|
-
}
|
|
28
|
-
function useNotificationsEvents(ctx) {
|
|
29
|
-
const events = {
|
|
30
|
-
show: (event) => ctx.showNotification(event.detail),
|
|
31
|
-
hide: (event) => ctx.hideNotification(event.detail),
|
|
32
|
-
update: (event) => ctx.updateNotification(event.detail.id, event.detail),
|
|
33
|
-
clean: ctx.clean,
|
|
34
|
-
cleanQueue: ctx.cleanQueue
|
|
35
|
-
};
|
|
36
|
-
useEffect(() => {
|
|
37
|
-
Object.keys(events).forEach((event) => {
|
|
38
|
-
window.addEventListener(NOTIFICATIONS_EVENTS[event], events[event]);
|
|
39
|
-
});
|
|
40
|
-
return () => {
|
|
41
|
-
Object.keys(events).forEach((event) => {
|
|
42
|
-
window.removeEventListener(NOTIFICATIONS_EVENTS[event], events[event]);
|
|
43
|
-
});
|
|
44
|
-
};
|
|
45
|
-
}, []);
|
|
46
|
-
}
|
|
3
|
+
const [useNotificationsEvents, createEvent] = createUseExternalEvents("mantine-notifications");
|
|
4
|
+
const showNotification = createEvent("show");
|
|
5
|
+
const hideNotification = createEvent("hide");
|
|
6
|
+
const cleanNotifications = createEvent("clean");
|
|
7
|
+
const cleanNotificationsQueue = createEvent("cleanQueue");
|
|
8
|
+
const updateNotification = createEvent("update");
|
|
47
9
|
|
|
48
|
-
export {
|
|
10
|
+
export { cleanNotifications, cleanNotificationsQueue, createEvent, hideNotification, showNotification, updateNotification, useNotificationsEvents };
|
|
49
11
|
//# sourceMappingURL=events.js.map
|
package/esm/events.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"events.js","sources":["../src/events.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"events.js","sources":["../src/events.ts"],"sourcesContent":["import { createUseExternalEvents } from '@mantine/utils';\nimport type { NotificationProps } from './types';\n\nexport type NotificationsEvents = {\n show(notification: NotificationProps): void;\n hide(id: string): void;\n update(notification: NotificationProps & { id: string }): void;\n clean(): void;\n cleanQueue(): void;\n};\n\nexport const [useNotificationsEvents, createEvent] =\n createUseExternalEvents<NotificationsEvents>('mantine-notifications');\n\nexport const showNotification = createEvent('show');\nexport const hideNotification = createEvent('hide');\nexport const cleanNotifications = createEvent('clean');\nexport const cleanNotificationsQueue = createEvent('cleanQueue');\nexport const updateNotification = createEvent('update');\n"],"names":[],"mappings":";;AACY,MAAC,CAAC,sBAAsB,EAAE,WAAW,CAAC,GAAG,uBAAuB,CAAC,uBAAuB,EAAE;AAC1F,MAAC,gBAAgB,GAAG,WAAW,CAAC,MAAM,EAAE;AACxC,MAAC,gBAAgB,GAAG,WAAW,CAAC,MAAM,EAAE;AACxC,MAAC,kBAAkB,GAAG,WAAW,CAAC,OAAO,EAAE;AAC3C,MAAC,uBAAuB,GAAG,WAAW,CAAC,YAAY,EAAE;AACrD,MAAC,kBAAkB,GAAG,WAAW,CAAC,QAAQ;;;;"}
|
|
@@ -14,7 +14,7 @@ export interface NotificationProviderProps extends Omit<DefaultProps, MantineSty
|
|
|
14
14
|
/** Maximum amount of notifications displayed at a time, other new notifications will be added to queue */
|
|
15
15
|
limit?: number;
|
|
16
16
|
/** Notifications container z-index */
|
|
17
|
-
zIndex?:
|
|
17
|
+
zIndex?: React.CSSProperties['zIndex'];
|
|
18
18
|
}
|
|
19
19
|
export declare function NotificationsProvider({ className, position, autoClose, transitionDuration, containerWidth, notificationMaxHeight, limit, zIndex, style, children, ...others }: NotificationProviderProps): JSX.Element;
|
|
20
20
|
export declare namespace NotificationsProvider {
|
|
@@ -1 +1 @@
|
|
|
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;AAoBpG,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,
|
|
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;AAoBpG,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,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACxC;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,eAwF3B;yBApGe,qBAAqB"}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface NotificationsProviderStylesParams {
|
|
3
|
+
zIndex: React.CSSProperties['zIndex'];
|
|
4
|
+
}
|
|
5
|
+
declare const _default: (params: NotificationsProviderStylesParams, options?: import("@mantine/core").UseStylesOptions<"notifications" | "notification">) => {
|
|
6
|
+
classes: Record<"notifications" | "notification", string>;
|
|
3
7
|
cx: (...args: any) => string;
|
|
4
8
|
theme: import("@mantine/core").MantineTheme;
|
|
5
9
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsProvider.styles.d.ts","sourceRoot":"","sources":["../../src/NotificationsProvider/NotificationsProvider.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NotificationsProvider.styles.d.ts","sourceRoot":"","sources":["../../src/NotificationsProvider/NotificationsProvider.styles.ts"],"names":[],"mappings":";AAEA,UAAU,iCAAiC;IACzC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACvC;;;;;;AAED,wBAaI"}
|
|
@@ -5,7 +5,7 @@ export default function useNotificationsState({ limit }: {
|
|
|
5
5
|
notifications: NotificationProps[];
|
|
6
6
|
queue: NotificationProps[];
|
|
7
7
|
showNotification: (notification: NotificationProps) => string;
|
|
8
|
-
updateNotification: (
|
|
8
|
+
updateNotification: (notification: NotificationProps) => void;
|
|
9
9
|
hideNotification: (id: string) => void;
|
|
10
10
|
cleanQueue: () => void;
|
|
11
11
|
clean: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-notifications-state.d.ts","sourceRoot":"","sources":["../../../src/NotificationsProvider/use-notifications-state/use-notifications-state.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;;;qCAMhC,iBAAiB;
|
|
1
|
+
{"version":3,"file":"use-notifications-state.d.ts","sourceRoot":"","sources":["../../../src/NotificationsProvider/use-notifications-state/use-notifications-state.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;;;qCAMhC,iBAAiB;uCAcf,iBAAiB;2BAc7B,MAAM;;;EAuBrC"}
|
package/lib/events.d.ts
CHANGED
|
@@ -1,20 +1,19 @@
|
|
|
1
|
-
import type { NotificationProps
|
|
2
|
-
declare type
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import type { NotificationProps } from './types';
|
|
2
|
+
export declare type NotificationsEvents = {
|
|
3
|
+
show(notification: NotificationProps): void;
|
|
4
|
+
hide(id: string): void;
|
|
5
|
+
update(notification: NotificationProps & {
|
|
6
|
+
id: string;
|
|
7
|
+
}): void;
|
|
8
|
+
clean(): void;
|
|
9
|
+
cleanQueue(): void;
|
|
9
10
|
};
|
|
10
|
-
export declare
|
|
11
|
-
export declare
|
|
12
|
-
export declare
|
|
11
|
+
export declare const useNotificationsEvents: (events: NotificationsEvents) => void, createEvent: <EventKey extends keyof NotificationsEvents>(event: EventKey) => (...payload: Parameters<NotificationsEvents[EventKey]>[0] extends undefined ? [undefined?] : [Parameters<NotificationsEvents[EventKey]>[0]]) => void;
|
|
12
|
+
export declare const showNotification: (payload_0: NotificationProps) => void;
|
|
13
|
+
export declare const hideNotification: (payload_0: string) => void;
|
|
14
|
+
export declare const cleanNotifications: (payload_0?: undefined) => void;
|
|
15
|
+
export declare const cleanNotificationsQueue: (payload_0?: undefined) => void;
|
|
16
|
+
export declare const updateNotification: (payload_0: NotificationProps & {
|
|
13
17
|
id: string;
|
|
14
|
-
})
|
|
15
|
-
export declare function hideNotification(id: string): void;
|
|
16
|
-
export declare function cleanNotifications(): void;
|
|
17
|
-
export declare function cleanNotificationsQueue(): void;
|
|
18
|
-
export declare function useNotificationsEvents(ctx: NotificationsContextProps): void;
|
|
19
|
-
export {};
|
|
18
|
+
}) => void;
|
|
20
19
|
//# sourceMappingURL=events.d.ts.map
|
package/lib/events.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../src/events.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,
|
|
1
|
+
{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../src/events.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,oBAAY,mBAAmB,GAAG;IAChC,IAAI,CAAC,YAAY,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,IAAI,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,MAAM,CAAC,YAAY,EAAE,iBAAiB,GAAG;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC/D,KAAK,IAAI,IAAI,CAAC;IACd,UAAU,IAAI,IAAI,CAAC;CACpB,CAAC;AAEF,eAAO,MAAO,sBAAsB,yCAAE,WAAW,uNACsB,CAAC;AAExE,eAAO,MAAM,gBAAgB,wCAAsB,CAAC;AACpD,eAAO,MAAM,gBAAgB,6BAAsB,CAAC;AACpD,eAAO,MAAM,kBAAkB,iCAAuB,CAAC;AACvD,eAAO,MAAM,uBAAuB,iCAA4B,CAAC;AACjE,eAAO,MAAM,kBAAkB;QAZkB,MAAM;UAYA,CAAC"}
|
package/lib/types.d.ts
CHANGED
|
@@ -10,11 +10,6 @@ export interface NotificationProps extends Omit<NotificationComponentProps, 'onC
|
|
|
10
10
|
export interface NotificationsContextProps {
|
|
11
11
|
notifications: NotificationProps[];
|
|
12
12
|
queue: NotificationProps[];
|
|
13
|
-
showNotification(props: NotificationProps): string;
|
|
14
|
-
updateNotification(id: string, props: NotificationProps): void;
|
|
15
|
-
hideNotification(id: string): void;
|
|
16
|
-
clean(): void;
|
|
17
|
-
cleanQueue(): void;
|
|
18
13
|
}
|
|
19
14
|
export declare type NotificationsProviderPositioning = ['top' | 'bottom', 'left' | 'right' | 'center'];
|
|
20
15
|
//# sourceMappingURL=types.d.ts.map
|
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,iBAAiB,IAAI,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAErF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,SAAS,CAAC;IACpF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,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;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,iBAAiB,IAAI,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAErF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,SAAS,CAAC;IACpF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,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;CAC5B;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": "
|
|
4
|
+
"version": "5.0.0-alpha.10",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
7
7
|
"types": "lib/index.d.ts",
|
|
@@ -28,8 +28,9 @@
|
|
|
28
28
|
"notification-system"
|
|
29
29
|
],
|
|
30
30
|
"peerDependencies": {
|
|
31
|
-
"@mantine/core": "
|
|
32
|
-
"@mantine/hooks": "
|
|
31
|
+
"@mantine/core": "5.0.0-alpha.10",
|
|
32
|
+
"@mantine/hooks": "5.0.0-alpha.10",
|
|
33
|
+
"@mantine/utils": "5.0.0-alpha.10",
|
|
33
34
|
"react": ">=16.8.0",
|
|
34
35
|
"react-dom": ">=16.8.0"
|
|
35
36
|
},
|