@mantine-vue/notifications 3.1.0 → 3.3.0

package/cjs/index.cjs

@@ -105,7 +105,9 @@ function getAutoClose(autoClose, notificationAutoClose) {
 }
 //#endregion
 //#region src/components/NotificationContainer/NotificationContainer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role", "inert"];
 var SCROLL_DISMISS_RESET_TIMEOUT = 120;
+var MAX_VISIBLE_STACK_DEPTH = 4;
 //#endregion
 //#region src/components/NotificationContainer/NotificationContainer.vue
 var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -118,12 +120,22 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		transitionDuration: {},
 		allowDragDismiss: { type: Boolean },
 		allowScrollDismiss: { type: Boolean },
-		paused: { type: Boolean }
+		paused: { type: Boolean },
+		renderNotification: { type: [Function, null] },
+		layout: {},
+		stackIndex: {},
+		stackSize: {},
+		stackPosition: {},
+		stackExpanded: { type: Boolean },
+		stackExpandedOffset: {},
+		transitionState: {}
 	},
 	emits: [
 		"hide",
 		"hoverStart",
-		"hoverEnd"
+		"hoverEnd",
+		"expandRequest",
+		"heightChange"
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
@@ -136,11 +148,14 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const active = (0, vue.ref)(false);
 		const scrollDismissActive = (0, vue.ref)(false);
 		const hovered = (0, vue.ref)(false);
+		const focused = (0, vue.ref)(false);
+		const contributedActive = (0, vue.ref)(false);
 		const startX = (0, vue.ref)(0);
 		const startTime = (0, vue.ref)(0);
 		let autoCloseTimeout = -1;
 		let hideTimeout = -1;
 		let scrollDismissTimeout = -1;
+		let resizeObserver;
 		const autoCloseDuration = (0, vue.computed)(() => getAutoClose(props.autoClose, props.data.autoClose));
 		const isCloseDisabled = (0, vue.computed)(() => props.data.allowClose === false);
 		function normalizeStyle(style) {
@@ -158,7 +173,10 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"withCloseButton",
 				"onOpen",
 				"onClose",
-				"id"
+				"id",
+				"renderNotification",
+				"priority",
+				"__sequence"
 			]);
 			return Object.fromEntries(Object.entries(props.data).filter(([key]) => !omittedKeys.has(key)).map(([key, value]) => [key, cloneRenderable(value)]));
 		}
@@ -168,6 +186,7 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return value;
 		}
 		const renderMessage = () => cloneRenderable(typeof props.data.message === "function" ? props.data.message() : props.data.message);
+		const renderCustomNotification = () => cloneRenderable(props.renderNotification?.(props.data));
 		const notificationStyle = (0, vue.computed)(() => {
 			const baseStyle = {
 				...normalizeStyle(attrs.style),
@@ -176,19 +195,44 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const baseOpacity = typeof baseStyle.opacity === "number" ? baseStyle.opacity : 1;
 			const swipeOpacity = dismissed.value ? 0 : 1 - Math.min(Math.abs(offset.value) / 200, 1) * .6;
 			const transitionDuration = baseStyle.transitionDuration ?? `${props.transitionDuration}ms, ${props.transitionDuration}ms, ${props.transitionDuration}ms`;
+			const isStackedLayout = props.layout === "stacked";
+			const isStacked = isStackedLayout && (props.stackIndex ?? 0) > 0;
+			const isCollapsed = isStacked && !props.stackExpanded;
+			const isExiting = props.transitionState === "exiting" || props.transitionState === "exited";
+			const stackDirection = props.stackPosition?.startsWith("top") ? 1 : -1;
+			const stackDepth = Math.min(props.stackIndex ?? 0, MAX_VISIBLE_STACK_DEPTH);
+			const collapsedOffset = isCollapsed ? stackDepth * 10 * stackDirection : 0;
+			const staggerDelay = isStackedLayout ? (props.stackIndex ?? 0) * 30 : 0;
+			const isDragging = active.value || scrollDismissActive.value;
+			let transform = "var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)";
+			if (isStackedLayout) {
+				if (isExiting) transform = `translateY(${props.stackExpanded ? props.stackExpandedOffset ?? 0 : collapsedOffset}px) ${transform}`;
+				else if (props.stackExpanded) transform = `translateY(${props.stackExpandedOffset ?? 0}px) translate3d(var(--notifications-swipe-offset), 0, 0)`;
+				else if (isStacked) transform = `scale(${1 - stackDepth * .03}) translateY(${collapsedOffset}px)`;
+			}
 			return {
 				...baseStyle,
+				...isStackedLayout ? { maxHeight: void 0 } : {},
 				"--notifications-state-transform": typeof baseStyle.transform === "string" ? baseStyle.transform : "translateX(0)",
 				"--notifications-state-opacity": String(baseOpacity),
 				"--notifications-swipe-offset": `${offset.value}px`,
 				"--notifications-swipe-opacity": String(swipeOpacity),
-				transform: "var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)",
+				transform,
 				opacity: "calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))",
-				transitionDuration: active.value || scrollDismissActive.value ? "0ms, 0ms, 0ms" : transitionDuration,
+				transitionDuration: isDragging ? "0ms, 0ms, 0ms" : transitionDuration,
 				cursor: "default",
-				touchAction: "pan-y"
+				touchAction: "pan-y",
+				...isStackedLayout ? {
+					gridArea: "1 / 1",
+					zIndex: (props.stackSize ?? 5) - (props.stackIndex ?? 0),
+					pointerEvents: isCollapsed ? "none" : void 0,
+					alignSelf: stackDirection === 1 ? "start" : "end",
+					transition: isDragging ? "none" : `transform ${props.transitionDuration}ms cubic-bezier(.51,.3,0,1.21), opacity ${props.transitionDuration}ms ease`,
+					transitionDelay: isDragging || isExiting ? "0ms" : `${staggerDelay}ms`
+				} : {}
 			};
 		});
+		const isCollapsed = (0, vue.computed)(() => props.layout === "stacked" && (props.stackIndex ?? 0) > 0 && !props.stackExpanded);
 		const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout);
 		const cancelHide = () => window.clearTimeout(hideTimeout);
 		const cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout);
@@ -199,7 +243,7 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			cancelScrollDismissReset();
 		}
 		function handleAutoClose() {
-			if (typeof window === "undefined" || dismissed.value || active.value || props.paused || hovered.value || typeof autoCloseDuration.value !== "number") return;
+			if (typeof window === "undefined" || dismissed.value || active.value || props.paused || hovered.value || focused.value || typeof autoCloseDuration.value !== "number") return;
 			cancelAutoClose();
 			autoCloseTimeout = window.setTimeout(handleHide, autoCloseDuration.value);
 		}
@@ -289,7 +333,34 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		function handleMouseEnter() {
 			hovered.value = true;
 			cancelAutoClose();
-			emit("hoverStart");
+			syncActiveContribution();
+		}
+		function syncActiveContribution() {
+			const isActive = hovered.value || focused.value;
+			if (isActive && !contributedActive.value) {
+				contributedActive.value = true;
+				emit("hoverStart");
+			} else if (!isActive && contributedActive.value) {
+				contributedActive.value = false;
+				emit("hoverEnd");
+			}
+		}
+		function handleFocusIn() {
+			if (props.layout !== "stacked") return;
+			focused.value = true;
+			cancelAutoClose();
+			syncActiveContribution();
+		}
+		function handleFocusOut(event) {
+			if (props.layout !== "stacked") return;
+			const next = event.relatedTarget;
+			if (next && notificationRef.value?.contains(next)) return;
+			focused.value = false;
+			if (!scrollDismissActive.value) handleAutoClose();
+			syncActiveContribution();
+		}
+		function handlePointerDownCapture(event) {
+			if (props.layout === "stacked" && (event.pointerType === "touch" || event.pointerType === "pen")) emit("expandRequest");
 		}
 		function handleMouseLeave() {
 			hovered.value = false;
@@ -297,7 +368,7 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				resetSwipe();
 				handleAutoClose();
 			}
-			emit("hoverEnd");
+			syncActiveContribution();
 		}
 		(0, vue.watch)(scrollDismissActive, (enabled, _, onCleanup) => {
 			if (!enabled) return;
@@ -317,35 +388,69 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			props.data.onOpen?.(props.data);
 			notificationRef.value?.addEventListener("wheel", handleWheel, { passive: false });
 			window.addEventListener("resize", handleResize);
+			if (notificationRef.value) {
+				emit("heightChange", notificationRef.value.offsetHeight);
+				if (typeof ResizeObserver !== "undefined") {
+					resizeObserver = new ResizeObserver(() => {
+						if (notificationRef.value) emit("heightChange", notificationRef.value.offsetHeight);
+					});
+					resizeObserver.observe(notificationRef.value);
+				}
+			}
 		});
 		function handleResize() {
 			if (dismissed.value) offset.value = getExitOffset(dismissDirection.value);
 		}
 		(0, vue.onBeforeUnmount)(() => {
-			if (hovered.value) emit("hoverEnd");
+			hovered.value = false;
+			focused.value = false;
+			syncActiveContribution();
 			cancelAutoClose();
 			cancelHide();
 			cancelScrollDismissReset();
 			cancelPointerDrag(false);
 			notificationRef.value?.removeEventListener("wheel", handleWheel);
 			window.removeEventListener("resize", handleResize);
+			resizeObserver?.disconnect();
 		});
+		function setNotificationRef(node) {
+			notificationRef.value = node?.$el ?? node ?? null;
+		}
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Notification), (0, vue.mergeProps)({
+			return props.renderNotification ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(attrs), {
+				ref: setNotificationRef,
+				style: notificationStyle.value,
+				role: (0, vue.unref)(attrs).role || "alert",
+				inert: isCollapsed.value || void 0,
+				onMouseenter: handleMouseEnter,
+				onMouseleave: handleMouseLeave,
+				onFocusin: handleFocusIn,
+				onFocusout: handleFocusOut,
+				onPointerdownCapture: handlePointerDownCapture,
+				onPointerdown: handlePointerDown
+			}), [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderCustomNotification)))], 16, _hoisted_1)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Notification), (0, vue.mergeProps)({ key: 1 }, {
 				...(0, vue.unref)(attrs),
 				...getNotificationProps()
 			}, {
-				ref: (node) => notificationRef.value = node?.$el ?? node,
+				ref: setNotificationRef,
 				style: notificationStyle.value,
+				inert: isCollapsed.value || void 0,
 				"with-close-button": isCloseDisabled.value ? false : props.data.withCloseButton,
 				onClose: handleHide,
 				onMouseenter: handleMouseEnter,
 				onMouseleave: handleMouseLeave,
+				onFocusin: handleFocusIn,
+				onFocusout: handleFocusOut,
+				onPointerdownCapture: handlePointerDownCapture,
 				onPointerdown: handlePointerDown
 			}), {
 				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderMessage)))]),
 				_: 1
-			}, 16, ["style", "with-close-button"]);
+			}, 16, [
+				"style",
+				"inert",
+				"with-close-button"
+			]));
 		};
 	}
 });
@@ -417,8 +522,8 @@ function getNotificationStateStyles({ state, maxHeight, position, transitionDura
 	};
 }
 var Notifications_module_default = {
-	root: "_root_1izcx_1",
-	notification: "_notification_1izcx_40"
+	root: "_root_1hrsl_1",
+	notification: "_notification_1hrsl_40"
 };
 //#endregion
 //#region src/components/Notifications/Notifications.vue?vue&type=script&setup=true&lang.ts
@@ -458,6 +563,8 @@ var Notifications = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
 			default: true
 		},
 		pauseResetOnHover: { default: "all" },
+		renderNotification: {},
+		layout: { default: "default" },
 		classNames: {},
 		styles: {},
 		vars: {},
@@ -469,10 +576,18 @@ var Notifications = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
 		const props = (0, _mantine_vue_core.useProps)("Notifications", null, rawProps);
 		const theme = (0, _mantine_vue_core.useMantineTheme)();
 		const shouldReduceMotion = (0, _mantine_vue_hooks.useReducedMotion)();
-		const hoveredCount = (0, vue.ref)(0);
+		const STACK_EXPANDED_GAP = 16;
+		const FALLBACK_NOTIFICATION_HEIGHT = 80;
+		const hoveredCounts = (0, vue.ref)({});
+		const hoveredGroups = (0, vue.ref)({});
+		const expandedPositions = (0, vue.ref)({});
+		const pinnedPosition = (0, vue.ref)(null);
+		const notificationHeights = (0, vue.ref)({});
+		const collapseTimeouts = {};
 		const data = useNotifications(props.store);
 		const duration = (0, vue.computed)(() => theme.value.respectReducedMotion && shouldReduceMotion.value ? 1 : props.transitionDuration);
 		const grouped = (0, vue.computed)(() => getGroupedNotifications(data.value.notifications, props.position));
+		const hoveredCount = (0, vue.computed)(() => Object.values(hoveredCounts.value).reduce((sum, value) => sum + (value ?? 0), 0) + Object.values(hoveredGroups.value).filter(Boolean).length);
 		const getStyles = (0, _mantine_vue_core.useStyles)({
 			name: "Notifications",
 			classes: Notifications_module_default,
@@ -518,47 +633,164 @@ var Notifications = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
 			delete data.style;
 			return data;
 		}
+		function isStackExpanded(position) {
+			return props.layout === "stacked" && Boolean(expandedPositions.value[position]);
+		}
+		function orderedGroup(position) {
+			const items = grouped.value[position];
+			if (props.layout !== "stacked") return items;
+			return [...items].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (b.__sequence ?? 0) - (a.__sequence ?? 0));
+		}
+		function expandedOffset(position, index) {
+			if (!isStackExpanded(position)) return 0;
+			const direction = position.startsWith("top") ? 1 : -1;
+			return orderedGroup(position).slice(0, index).reduce((sum, item) => sum + (notificationHeights.value[item.id] ?? FALLBACK_NOTIFICATION_HEIGHT) + STACK_EXPANDED_GAP, 0) * direction;
+		}
+		function setExpanded(position, expanded) {
+			expandedPositions.value = {
+				...expandedPositions.value,
+				[position]: expanded
+			};
+		}
+		function scheduleCollapse(position) {
+			window.clearTimeout(collapseTimeouts[position]);
+			if ((hoveredCounts.value[position] ?? 0) > 0 || hoveredGroups.value[position] || pinnedPosition.value === position) return;
+			collapseTimeouts[position] = window.setTimeout(() => setExpanded(position, false), 200);
+		}
+		function handleHoverStart(position) {
+			hoveredCounts.value = {
+				...hoveredCounts.value,
+				[position]: (hoveredCounts.value[position] ?? 0) + 1
+			};
+			if (props.layout === "stacked") setExpanded(position, true);
+		}
+		function handleHoverEnd(position) {
+			hoveredCounts.value = {
+				...hoveredCounts.value,
+				[position]: Math.max(0, (hoveredCounts.value[position] ?? 0) - 1)
+			};
+			if (props.layout === "stacked") scheduleCollapse(position);
+		}
+		function handleGroupHover(position, hovered) {
+			if (props.layout !== "stacked") return;
+			hoveredGroups.value = {
+				...hoveredGroups.value,
+				[position]: hovered
+			};
+			if (hovered) {
+				window.clearTimeout(collapseTimeouts[position]);
+				setExpanded(position, true);
+			} else scheduleCollapse(position);
+		}
+		function handleExpandRequest(position) {
+			pinnedPosition.value = position;
+			setExpanded(position, true);
+		}
+		function handleDocumentPointerDown(event) {
+			if (!pinnedPosition.value) return;
+			if (!event.target?.closest(`[data-notifications-position="${pinnedPosition.value}"]`)) {
+				const previous = pinnedPosition.value;
+				pinnedPosition.value = null;
+				scheduleCollapse(previous);
+			}
+		}
+		(0, vue.watch)(() => props.layout, (layout) => {
+			if (layout !== "stacked") {
+				pinnedPosition.value = null;
+				hoveredGroups.value = {};
+				expandedPositions.value = {};
+			}
+		});
+		(0, vue.watch)(grouped, (groups) => {
+			if (pinnedPosition.value && groups[pinnedPosition.value].length === 0) pinnedPosition.value = null;
+		});
+		(0, vue.onMounted)(() => document.addEventListener("pointerdown", handleDocumentPointerDown));
+		(0, vue.onBeforeUnmount)(() => {
+			document.removeEventListener("pointerdown", handleDocumentPointerDown);
+			positions.forEach((position) => window.clearTimeout(collapseTimeouts[position]));
+		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.OptionalPortal), (0, vue.mergeProps)((0, vue.unref)(props).portalProps, { "within-portal": (0, vue.unref)(props).withinPortal }), {
 				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(positions), (position) => {
 					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({ key: position }, { ref_for: true }, {
 						...(0, vue.unref)(attrs),
 						...(0, vue.unref)(getStyles)("root")
-					}, { "data-position": position }), {
+					}, {
+						"data-position": position,
+						"data-notifications-position": position,
+						"data-layout": (0, vue.unref)(props).layout
+					}), {
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)(vue.TransitionGroup, {
+							tag: "div",
 							css: false,
+							onMouseenter: ($event) => handleGroupHover(position, true),
+							onMouseleave: ($event) => handleGroupHover(position, false),
+							onFocusin: ($event) => handleGroupHover(position, true),
+							onFocusout: ($event) => handleGroupHover(position, false),
 							onBeforeEnter: (element) => applyTransitionStyles(element, "exited", position),
 							onEnter: (element, done) => enter(element, done, position),
 							onLeave: (element, done) => leave(element, done, position)
 						}, {
-							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(grouped.value[position], (notification) => {
+							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(orderedGroup(position), (notification, stackIndex) => {
 								return (0, vue.openBlock)(), (0, vue.createBlock)(NotificationContainer_default, (0, vue.mergeProps)({ key: notification.id }, { ref_for: true }, (0, vue.unref)(getStyles)("notification", { style: notification.style }), {
 									data: notificationData(notification),
 									"auto-close": (0, vue.unref)(props).autoClose,
 									"transition-duration": duration.value,
 									"allow-drag-dismiss": (0, vue.unref)(props).allowDragDismiss,
 									"allow-scroll-dismiss": (0, vue.unref)(props).allowScrollDismiss,
-									paused: (0, vue.unref)(props).pauseResetOnHover === "all" && hoveredCount.value > 0,
+									paused: (0, vue.unref)(props).pauseResetOnHover === "all" && hoveredCount.value > 0 || (0, vue.unref)(props).layout === "stacked" && !isStackExpanded(position) && stackIndex > 0,
+									"render-notification": "renderNotification" in notification ? notification.renderNotification : (0, vue.unref)(props).renderNotification,
+									layout: (0, vue.unref)(props).layout,
+									"stack-index": stackIndex,
+									"stack-size": orderedGroup(position).length,
+									"stack-position": position,
+									"stack-expanded": isStackExpanded(position),
+									"stack-expanded-offset": expandedOffset(position, stackIndex),
+									"transition-state": "entered",
 									onHide: _cache[0] || (_cache[0] = (id) => (0, vue.unref)(hideNotification)(id, (0, vue.unref)(props).store)),
-									onHoverStart: _cache[1] || (_cache[1] = ($event) => hoveredCount.value += 1),
-									onHoverEnd: _cache[2] || (_cache[2] = ($event) => hoveredCount.value = Math.max(0, hoveredCount.value - 1))
+									onHoverStart: ($event) => handleHoverStart(position),
+									onHoverEnd: ($event) => handleHoverEnd(position),
+									onExpandRequest: ($event) => handleExpandRequest(position),
+									onHeightChange: (height) => notificationHeights.value = {
+										...notificationHeights.value,
+										[notification.id]: height
+									}
 								}), null, 16, [
 									"data",
 									"auto-close",
 									"transition-duration",
 									"allow-drag-dismiss",
 									"allow-scroll-dismiss",
-									"paused"
+									"paused",
+									"render-notification",
+									"layout",
+									"stack-index",
+									"stack-size",
+									"stack-position",
+									"stack-expanded",
+									"stack-expanded-offset",
+									"onHoverStart",
+									"onHoverEnd",
+									"onExpandRequest",
+									"onHeightChange"
 								]);
 							}), 128))]),
 							_: 2
 						}, 1032, [
+							"onMouseenter",
+							"onMouseleave",
+							"onFocusin",
+							"onFocusout",
 							"onBeforeEnter",
 							"onEnter",
 							"onLeave"
 						])]),
 						_: 2
-					}, 1040, ["data-position"]);
+					}, 1040, [
+						"data-position",
+						"data-notifications-position",
+						"data-layout"
+					]);
 				}), 128))]),
 				_: 1
 			}, 16, ["within-portal"]);