@mantine/notifications/cjs/Notifications.cjs

Mantine notifications system

"use client";
const require_notifications_store = require("./notifications.store.cjs");
const require_get_grouped_notifications = require("./get-grouped-notifications/get-grouped-notifications.cjs");
const require_get_notification_state_styles = require("./get-notification-state-styles.cjs");
const require_NotificationContainer = require("./NotificationContainer.cjs");
const require_Notifications_module = require("./Notifications.module.cjs");
let _mantine_hooks = require("@mantine/hooks");
let react = require("react");
let react_transition_group = require("react-transition-group");
let _mantine_core = require("@mantine/core");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/notifications/src/Notifications.tsx
const Transition = react_transition_group.Transition;
const defaultProps = {
	position: "bottom-right",
	autoClose: 4e3,
	transitionDuration: 250,
	allowDragDismiss: true,
	allowScrollDismiss: true,
	containerWidth: 440,
	notificationMaxHeight: 200,
	limit: 5,
	zIndex: (0, _mantine_core.getDefaultZIndex)("overlay"),
	store: require_notifications_store.notificationsStore,
	withinPortal: true,
	pauseResetOnHover: "all"
};
const varsResolver = (0, _mantine_core.createVarsResolver)((_, { zIndex, containerWidth }) => ({ root: {
	"--notifications-z-index": zIndex?.toString(),
	"--notifications-container-width": (0, _mantine_core.rem)(containerWidth)
} }));
const Notifications = (0, _mantine_core.factory)((_props) => {
	const props = (0, _mantine_core.useProps)("Notifications", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, attributes, position, autoClose, transitionDuration, allowDragDismiss, allowScrollDismiss, containerWidth, notificationMaxHeight, limit, zIndex, store, portalProps, withinPortal, pauseResetOnHover, ...others } = props;
	const theme = (0, _mantine_core.useMantineTheme)();
	const data = require_notifications_store.useNotifications(store);
	const forceUpdate = (0, _mantine_hooks.useForceUpdate)();
	const shouldReduceMotion = (0, _mantine_hooks.useReducedMotion)();
	const refs = (0, react.useRef)({});
	const previousLength = (0, react.useRef)(0);
	const [hoveredCount, setHoveredCount] = (0, react.useState)(0);
	const handleHoverStart = (0, react.useCallback)(() => setHoveredCount((c) => c + 1), []);
	const handleHoverEnd = (0, react.useCallback)(() => setHoveredCount((c) => Math.max(0, c - 1)), []);
	const duration = (theme.respectReducedMotion ? shouldReduceMotion : false) ? 1 : transitionDuration;
	const getStyles = (0, _mantine_core.useStyles)({
		name: "Notifications",
		classes: require_Notifications_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	(0, react.useEffect)(() => {
		store?.updateState((current) => ({
			...current,
			limit: limit || 5,
			defaultPosition: position
		}));
	}, [limit, position]);
	(0, _mantine_hooks.useDidUpdate)(() => {
		if (data.notifications.length > previousLength.current) setTimeout(() => forceUpdate(), 0);
		previousLength.current = data.notifications.length;
	}, [data.notifications]);
	const grouped = require_get_grouped_notifications.getGroupedNotifications(data.notifications, position);
	const groupedComponents = require_get_grouped_notifications.positions.reduce((acc, pos) => {
		acc[pos] = grouped[pos].map(({ style: notificationStyle, ...notification }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Transition, {
			timeout: duration,
			onEnter: () => refs.current[notification.id].offsetHeight,
			nodeRef: { current: refs.current[notification.id] },
			children: (state) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationContainer.NotificationContainer, {
				ref: (node) => {
					if (node) refs.current[notification.id] = node;
				},
				data: notification,
				onHide: (id) => require_notifications_store.hideNotification(id, store),
				autoClose,
				transitionDuration: duration,
				allowDragDismiss,
				allowScrollDismiss,
				paused: pauseResetOnHover === "all" ? hoveredCount > 0 : false,
				onHoverStart: handleHoverStart,
				onHoverEnd: handleHoverEnd,
				...getStyles("notification", { style: {
					...require_get_notification_state_styles.getNotificationStateStyles({
						state,
						position: pos,
						transitionDuration: duration,
						maxHeight: notificationMaxHeight
					}),
					...notificationStyle
				} })
			})
		}, notification.id));
		return acc;
	}, {});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.OptionalPortal, {
		withinPortal,
		...portalProps,
		children: [
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
				...getStyles("root"),
				"data-position": "top-center",
				...others,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.TransitionGroup, { children: groupedComponents["top-center"] })
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
				...getStyles("root"),
				"data-position": "top-left",
				...others,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.TransitionGroup, { children: groupedComponents["top-left"] })
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
				...getStyles("root", { className: _mantine_core.RemoveScroll.classNames.fullWidth }),
				"data-position": "top-right",
				...others,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.TransitionGroup, { children: groupedComponents["top-right"] })
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
				...getStyles("root", { className: _mantine_core.RemoveScroll.classNames.fullWidth }),
				"data-position": "bottom-right",
				...others,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.TransitionGroup, { children: groupedComponents["bottom-right"] })
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
				...getStyles("root"),
				"data-position": "bottom-left",
				...others,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.TransitionGroup, { children: groupedComponents["bottom-left"] })
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
				...getStyles("root"),
				"data-position": "bottom-center",
				...others,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.TransitionGroup, { children: groupedComponents["bottom-center"] })
			})
		]
	});
});
Notifications.classes = require_Notifications_module.default;
Notifications.varsResolver = varsResolver;
Notifications.displayName = "@mantine/notifications/Notifications";
Notifications.show = require_notifications_store.notifications.show;
Notifications.hide = require_notifications_store.notifications.hide;
Notifications.update = require_notifications_store.notifications.update;
Notifications.clean = require_notifications_store.notifications.clean;
Notifications.cleanQueue = require_notifications_store.notifications.cleanQueue;
Notifications.updateState = require_notifications_store.notifications.updateState;
//#endregion
exports.Notifications = Notifications;

//# sourceMappingURL=Notifications.cjs.map