@mantine-vue/notifications 3.4.0 → 3.6.0

package/esm/index.mjs

@@ -1,5 +1,5 @@
 import { createStore } from "@mantine-vue/store";
-import { Fragment, TransitionGroup, cloneVNode, computed, createBlock, createElementBlock, createVNode, defineComponent, isVNode, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderList, resolveDynamicComponent, unref, useAttrs, watch, withCtx } from "vue";
+import { Fragment, TransitionGroup, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, isVNode, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderList, resolveDynamicComponent, unref, useAttrs, watch, withCtx } from "vue";
 import { Box, Notification, OptionalPortal, createVarsResolver, getDefaultZIndex, rem, useMantineTheme, useProps, useStyles } from "@mantine-vue/core";
 import { useReducedMotion } from "@mantine-vue/hooks";
 //#region src/notifications.store.ts
@@ -80,6 +80,46 @@ function updateNotification(notification, store = notificationsStore) {
 	} : item));
 	return notification.id;
 }
+function resolvePromiseNotificationData(data, value) {
+	return typeof data === "function" ? data(value) : data;
+}
+function upsertNotification(notification, store) {
+	const state = store.getState();
+	return [...state.notifications, ...state.queue].some((item) => item.id === notification.id) ? updateNotification(notification, store) : showNotification(notification, store);
+}
+var pendingPromises = /* @__PURE__ */ new WeakMap();
+function promiseNotification(promise, options, store = notificationsStore) {
+	const id = options.id || randomId();
+	const owners = pendingPromises.get(store) || /* @__PURE__ */ new Map();
+	const owner = {};
+	pendingPromises.set(store, owners);
+	owners.set(id, owner);
+	upsertNotification({
+		loading: true,
+		autoClose: false,
+		...options.loading,
+		id
+	}, store);
+	const settle = (data) => {
+		if (owners.get(id) !== owner) return;
+		owners.delete(id);
+		upsertNotification({
+			...options.loading,
+			loading: false,
+			autoClose: void 0,
+			...data,
+			id
+		}, store);
+	};
+	promise.then((value) => settle({
+		color: "teal",
+		...resolvePromiseNotificationData(options.success, value)
+	}), (error) => settle({
+		color: "red",
+		...resolvePromiseNotificationData(options.error, error)
+	}));
+	return promise;
+}
 function cleanNotifications(store = notificationsStore) {
 	updateNotificationsState(store, () => []);
 }
@@ -91,6 +131,7 @@ var notifications = {
 	show: showNotification,
 	hide: hideNotification,
 	update: updateNotification,
+	promise: promiseNotification,
 	clean: cleanNotifications,
 	cleanQueue: cleanNotificationsQueue,
 	updateState: updateNotificationsState
@@ -105,6 +146,7 @@ function getAutoClose(autoClose, notificationAutoClose) {
 //#endregion
 //#region src/components/NotificationContainer/NotificationContainer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["role", "inert"];
+var _hoisted_2 = ["data-paused"];
 var SCROLL_DISMISS_RESET_TIMEOUT = 120;
 var MAX_VISIBLE_STACK_DEPTH = 4;
 //#endregion
@@ -120,6 +162,8 @@ var NotificationContainer_default = /* @__PURE__ */ defineComponent({
 		allowDragDismiss: { type: Boolean },
 		allowScrollDismiss: { type: Boolean },
 		paused: { type: Boolean },
+		withAutoCloseProgress: { type: Boolean },
+		progressProps: {},
 		renderNotification: { type: [Function, null] },
 		layout: {},
 		stackIndex: {},
@@ -148,6 +192,8 @@ var NotificationContainer_default = /* @__PURE__ */ defineComponent({
 		const scrollDismissActive = ref(false);
 		const hovered = ref(false);
 		const focused = ref(false);
+		const progressRunning = ref(false);
+		const progressCycle = ref(0);
 		const contributedActive = ref(false);
 		const startX = ref(0);
 		const startTime = ref(0);
@@ -156,6 +202,7 @@ var NotificationContainer_default = /* @__PURE__ */ defineComponent({
 		let scrollDismissTimeout = -1;
 		let resizeObserver;
 		const autoCloseDuration = computed(() => getAutoClose(props.autoClose, props.data.autoClose));
+		const hasAutoCloseProgress = computed(() => (props.data.withAutoCloseProgress ?? props.withAutoCloseProgress) && typeof autoCloseDuration.value === "number");
 		const isCloseDisabled = computed(() => props.data.allowClose === false);
 		function normalizeStyle(style) {
 			if (!style) return {};
@@ -175,7 +222,8 @@ var NotificationContainer_default = /* @__PURE__ */ defineComponent({
 				"id",
 				"renderNotification",
 				"priority",
-				"__sequence"
+				"__sequence",
+				"withAutoCloseProgress"
 			]);
 			return Object.fromEntries(Object.entries(props.data).filter(([key]) => !omittedKeys.has(key)).map(([key, value]) => [key, cloneRenderable(value)]));
 		}
@@ -232,7 +280,10 @@ var NotificationContainer_default = /* @__PURE__ */ defineComponent({
 			};
 		});
 		const isCollapsed = computed(() => props.layout === "stacked" && (props.stackIndex ?? 0) > 0 && !props.stackExpanded);
-		const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout);
+		const cancelAutoClose = () => {
+			window.clearTimeout(autoCloseTimeout);
+			progressRunning.value = false;
+		};
 		const cancelHide = () => window.clearTimeout(hideTimeout);
 		const cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout);
 		function handleHide() {
@@ -245,6 +296,10 @@ var NotificationContainer_default = /* @__PURE__ */ defineComponent({
 			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);
+			if (hasAutoCloseProgress.value) {
+				progressCycle.value += 1;
+				progressRunning.value = true;
+			}
 		}
 		function getExitOffset(direction) {
 			return direction * ((notificationRef.value?.offsetWidth ?? 440) + 40);
@@ -378,7 +433,8 @@ var NotificationContainer_default = /* @__PURE__ */ defineComponent({
 			autoCloseDuration,
 			active,
 			dismissed,
-			() => props.paused
+			() => props.paused,
+			hasAutoCloseProgress
 		], () => {
 			if (props.paused) cancelAutoClose();
 			else handleAutoClose();
@@ -443,7 +499,13 @@ var NotificationContainer_default = /* @__PURE__ */ defineComponent({
 				onPointerdownCapture: handlePointerDownCapture,
 				onPointerdown: handlePointerDown
 			}), {
-				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(renderMessage)))]),
+				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(renderMessage))), hasAutoCloseProgress.value ? (openBlock(), createElementBlock("div", mergeProps({
+					key: progressCycle.value,
+					"aria-hidden": "true"
+				}, props.progressProps, {
+					"data-paused": !progressRunning.value || void 0,
+					style: [props.progressProps.style, { "--notifications-progress-duration": `${autoCloseDuration.value}ms` }]
+				}), null, 16, _hoisted_2)) : createCommentVNode("", true)]),
 				_: 1
 			}, 16, [
 				"style",
@@ -521,8 +583,11 @@ function getNotificationStateStyles({ state, maxHeight, position, transitionDura
 	};
 }
 var Notifications_module_default = {
-	root: "_root_1hrsl_1",
-	notification: "_notification_1hrsl_40"
+	root: "_root_76vbt_1",
+	notification: "_notification_76vbt_40",
+	progress: "_progress_76vbt_56",
+	"notifications-progress": "_notifications-progress_76vbt_1",
+	"notifications-progress-fade-in": "_notifications-progress-fade-in_76vbt_1"
 };
 //#endregion
 //#region src/components/Notifications/Notifications.vue?vue&type=script&setup=true&lang.ts
@@ -564,6 +629,10 @@ var Notifications = Object.assign(/* @__PURE__ */ defineComponent({
 		pauseResetOnHover: { default: "all" },
 		renderNotification: {},
 		layout: { default: "default" },
+		withAutoCloseProgress: {
+			type: Boolean,
+			default: false
+		},
 		classNames: {},
 		styles: {},
 		vars: {},
@@ -591,8 +660,7 @@ var Notifications = Object.assign(/* @__PURE__ */ defineComponent({
 			name: "Notifications",
 			classes: Notifications_module_default,
 			props,
-			className: attrs.class,
-			style: attrs.style,
+			attrs,
 			classNames: props.classNames,
 			styles: props.styles,
 			unstyled: props.unstyled,
@@ -740,6 +808,8 @@ var Notifications = Object.assign(/* @__PURE__ */ defineComponent({
 									paused: unref(props).pauseResetOnHover === "all" && hoveredCount.value > 0 || unref(props).layout === "stacked" && !isStackExpanded(position) && stackIndex > 0,
 									"render-notification": "renderNotification" in notification ? notification.renderNotification : unref(props).renderNotification,
 									layout: unref(props).layout,
+									"with-auto-close-progress": unref(props).withAutoCloseProgress,
+									"progress-props": unref(getStyles)("progress"),
 									"stack-index": stackIndex,
 									"stack-size": orderedGroup(position).length,
 									"stack-position": position,
@@ -763,6 +833,8 @@ var Notifications = Object.assign(/* @__PURE__ */ defineComponent({
 									"paused",
 									"render-notification",
 									"layout",
+									"with-auto-close-progress",
+									"progress-props",
 									"stack-index",
 									"stack-size",
 									"stack-position",
@@ -801,11 +873,12 @@ var Notifications = Object.assign(/* @__PURE__ */ defineComponent({
 	show: notifications.show,
 	hide: notifications.hide,
 	update: notifications.update,
+	promise: notifications.promise,
 	clean: notifications.clean,
 	cleanQueue: notifications.cleanQueue,
 	updateState: notifications.updateState
 });
 //#endregion
-export { Notifications, cleanNotifications, cleanNotificationsQueue, createNotificationsStore, hideNotification, notifications, notificationsStore, showNotification, updateNotification, updateNotificationsState, useNotifications };
+export { Notifications, cleanNotifications, cleanNotificationsQueue, createNotificationsStore, hideNotification, notifications, notificationsStore, promiseNotification, showNotification, updateNotification, updateNotificationsState, useNotifications };
 
 //# sourceMappingURL=index.mjs.map

package/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/notifications.store.ts","../src/get-auto-close/get-auto-close.ts","../src/components/NotificationContainer/NotificationContainer.vue","../src/components/NotificationContainer/NotificationContainer.vue","../src/get-grouped-notifications/get-grouped-notifications.ts","../src/get-notification-state-styles.ts","../src/Notifications.module.css","../src/components/Notifications/Notifications.vue","../src/components/Notifications/Notifications.vue","../src/components/Notifications/Notifications.ts"],"sourcesContent":["import { type Ref, type VNodeChild } from 'vue'\nimport { createStore, type MantineStore } from '@mantine-vue/store'\n\nexport type NotificationPosition =\n  | 'top-left'\n  | 'top-right'\n  | 'top-center'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'bottom-center'\n\nexport interface NotificationData extends Record<`data-${string}`, any> {\n  /** Notification id, can be used to close or update notification. */\n  id?: string\n  /** Position of the notification, if not set, the position is determined based on `position` prop on Notifications component. */\n  position?: NotificationPosition\n  /** Notification message, required for all notifications. */\n  message: any\n  /** Display priority. Higher numbers are shown before lower ones when the number of active notifications exceeds `limit`. Notifications with equal priority keep insertion order (FIFO). @default 0 */\n  priority?: number\n  /** Determines whether notification should be closed automatically, number is auto close timeout in ms, overrides `autoClose` from `Notifications`. */\n  autoClose?: boolean | number\n  /** Determines whether notification can be closed with close button, drag or horizontal scroll swipe. @default true */\n  allowClose?: boolean\n  /** Called when notification closes. */\n  onClose?: (props: NotificationData) => void\n  /** Called when notification opens. */\n  onOpen?: (props: NotificationData) => void\n  /** Custom renderer that replaces the default notification. Set to `null` to use default rendering when a global renderer is configured. */\n  renderNotification?: ((notification: NotificationData) => VNodeChild) | null\n  style?: any\n  withCloseButton?: boolean\n  [key: string]: any\n}\n\nexport interface NotificationsState {\n  notifications: NotificationData[]\n  queue: NotificationData[]\n  defaultPosition: NotificationPosition\n  limit: number\n}\n\nexport type NotificationsStore = MantineStore<NotificationsState>\n\nfunction randomId() {\n  return `mantine-${Math.random().toString(36).slice(2, 11)}`\n}\n\nexport interface SequencedNotificationData extends NotificationData {\n  __sequence?: number\n}\n\nlet notificationSequence = 0\n\nfunction getDistributedNotifications(\n  data: SequencedNotificationData[],\n  defaultPosition: NotificationPosition,\n  limit: number,\n) {\n  const queue: NotificationData[] = []\n  const notifications: NotificationData[] = []\n  const groups = new Map<string, SequencedNotificationData[]>()\n\n  for (const item of data) {\n    const position = item.position || defaultPosition\n    const group = groups.get(position)\n    if (group) {\n      group.push(item)\n    } else {\n      groups.set(position, [item])\n    }\n  }\n\n  for (const group of groups.values()) {\n    group.sort(\n      (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (a.__sequence ?? 0) - (b.__sequence ?? 0),\n    )\n    group.forEach((item, index) => {\n      if (index < limit) notifications.push(item)\n      else queue.push(item)\n    })\n  }\n\n  return { notifications, queue }\n}\n\nexport const createNotificationsStore = () =>\n  createStore<NotificationsState>({\n    notifications: [],\n    queue: [],\n    defaultPosition: 'bottom-right',\n    limit: 5,\n  })\n\nexport const notificationsStore = createNotificationsStore()\nexport const useNotifications = (\n  store: NotificationsStore = notificationsStore,\n): Readonly<Ref<NotificationsState>> => store.value\n\nexport function updateNotificationsState(\n  store: NotificationsStore,\n  update: (notifications: NotificationData[]) => NotificationData[],\n) {\n  const state = store.getState()\n  const notifications = update([...state.notifications, ...state.queue])\n  for (const item of notifications as SequencedNotificationData[]) {\n    if (item.__sequence === undefined) {\n      item.__sequence = notificationSequence\n      notificationSequence += 1\n    }\n  }\n  const updated = getDistributedNotifications(notifications, state.defaultPosition, state.limit)\n\n  store.setState({\n    notifications: updated.notifications,\n    queue: updated.queue,\n    limit: state.limit,\n    defaultPosition: state.defaultPosition,\n  })\n}\n\nexport function showNotification(\n  notification: NotificationData,\n  store: NotificationsStore = notificationsStore,\n) {\n  const id = notification.id || randomId()\n\n  updateNotificationsState(store, (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\nexport function hideNotification(id: string, store: NotificationsStore = notificationsStore) {\n  updateNotificationsState(store, (notifications) =>\n    notifications.filter((notification) => {\n      if (notification.id === id) {\n        notification.onClose?.(notification)\n        return false\n      }\n\n      return true\n    }),\n  )\n\n  return id\n}\n\nexport function updateNotification(\n  notification: NotificationData,\n  store: NotificationsStore = notificationsStore,\n) {\n  updateNotificationsState(store, (notifications) =>\n    notifications.map((item) =>\n      item.id === notification.id ? { ...item, ...notification } : item,\n    ),\n  )\n\n  return notification.id\n}\n\nexport function cleanNotifications(store: NotificationsStore = notificationsStore) {\n  updateNotificationsState(store, () => [])\n}\n\nexport function cleanNotificationsQueue(store: NotificationsStore = notificationsStore) {\n  const { defaultPosition, limit } = store.getState()\n  updateNotificationsState(\n    store,\n    (notifications) =>\n      getDistributedNotifications(notifications, defaultPosition, limit).notifications,\n  )\n}\n\nexport const notifications = {\n  show: showNotification,\n  hide: hideNotification,\n  update: updateNotification,\n  clean: cleanNotifications,\n  cleanQueue: cleanNotificationsQueue,\n  updateState: updateNotificationsState,\n} as const\n","export function getAutoClose(\n  autoClose: boolean | number | undefined,\n  notificationAutoClose: boolean | number | undefined,\n) {\n  if (typeof notificationAutoClose === 'number') {\n    return notificationAutoClose\n  }\n\n  if (notificationAutoClose === false || autoClose === false) {\n    return false\n  }\n\n  return autoClose\n}\n","<script setup lang=\"ts\">\nimport {\n  cloneVNode,\n  computed,\n  isVNode,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useAttrs,\n  watch,\n  type CSSProperties,\n} from 'vue'\nimport { Notification } from '@mantine-vue/core'\nimport { getAutoClose } from '../../get-auto-close/get-auto-close'\nimport type {\n  NotificationContainerEmits,\n  NotificationContainerProps,\n} from './NotificationContainer.types'\n\ndefineOptions({ name: 'NotificationContainer', inheritAttrs: false })\n\nconst props = defineProps<NotificationContainerProps>()\nconst emit = defineEmits<NotificationContainerEmits>()\nconst attrs = useAttrs()\nconst SCROLL_DISMISS_RESET_TIMEOUT = 120\nconst MAX_VISIBLE_STACK_DEPTH = 4\n\nconst notificationRef = ref<HTMLElement | null>(null)\nconst offset = ref(0)\nconst dismissed = ref(false)\nconst dismissDirection = ref<-1 | 1>(1)\nconst active = ref(false)\nconst scrollDismissActive = ref(false)\nconst hovered = ref(false)\nconst focused = ref(false)\nconst contributedActive = ref(false)\nconst startX = ref(0)\nconst startTime = ref(0)\nlet autoCloseTimeout = -1\nlet hideTimeout = -1\nlet scrollDismissTimeout = -1\nlet resizeObserver: ResizeObserver | undefined\n\nconst autoCloseDuration = computed(() => getAutoClose(props.autoClose, props.data.autoClose))\nconst isCloseDisabled = computed(() => props.data.allowClose === false)\n\nfunction normalizeStyle(style: any): Record<string, any> {\n  if (!style) return {}\n  if (Array.isArray(style)) {\n    return style.reduce<Record<string, any>>(\n      (accumulator, item) => Object.assign(accumulator, normalizeStyle(item)),\n      {},\n    )\n  }\n  return typeof style === 'object' ? style : {}\n}\n\nfunction getNotificationProps() {\n  const omittedKeys = new Set([\n    'autoClose',\n    'message',\n    'allowClose',\n    'position',\n    'style',\n    'withCloseButton',\n    'onOpen',\n    'onClose',\n    'id',\n    'renderNotification',\n    'priority',\n    '__sequence',\n  ])\n  return Object.fromEntries(\n    Object.entries(props.data)\n      .filter(([key]) => !omittedKeys.has(key))\n      .map(([key, value]) => [key, cloneRenderable(value)]),\n  )\n}\n\nfunction cloneRenderable(value: any): any {\n  if (isVNode(value)) return cloneVNode(value)\n  if (Array.isArray(value)) return value.map(cloneRenderable)\n  return value\n}\n\nconst renderMessage = () =>\n  cloneRenderable(\n    typeof props.data.message === 'function' ? props.data.message() : props.data.message,\n  )\n\nconst renderCustomNotification = () => cloneRenderable(props.renderNotification?.(props.data))\n\nconst notificationStyle = computed<CSSProperties>(() => {\n  const baseStyle = { ...normalizeStyle(attrs.style), ...normalizeStyle(props.data.style) }\n  const baseOpacity = typeof baseStyle.opacity === 'number' ? baseStyle.opacity : 1\n  const swipeOpacity = dismissed.value ? 0 : 1 - Math.min(Math.abs(offset.value) / 200, 1) * 0.6\n  const transitionDuration =\n    baseStyle.transitionDuration ??\n    `${props.transitionDuration}ms, ${props.transitionDuration}ms, ${props.transitionDuration}ms`\n\n  const isStackedLayout = props.layout === 'stacked'\n  const isStacked = isStackedLayout && (props.stackIndex ?? 0) > 0\n  const isCollapsed = isStacked && !props.stackExpanded\n  const isExiting = props.transitionState === 'exiting' || props.transitionState === 'exited'\n  const stackDirection = props.stackPosition?.startsWith('top') ? 1 : -1\n  const stackDepth = Math.min(props.stackIndex ?? 0, MAX_VISIBLE_STACK_DEPTH)\n  const collapsedOffset = isCollapsed ? stackDepth * 10 * stackDirection : 0\n  const staggerDelay = isStackedLayout ? (props.stackIndex ?? 0) * 30 : 0\n  const isDragging = active.value || scrollDismissActive.value\n\n  let transform =\n    'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)'\n\n  if (isStackedLayout) {\n    if (isExiting) {\n      const exitOffset = props.stackExpanded ? (props.stackExpandedOffset ?? 0) : collapsedOffset\n      transform = `translateY(${exitOffset}px) ${transform}`\n    } else if (props.stackExpanded) {\n      transform = `translateY(${props.stackExpandedOffset ?? 0}px) translate3d(var(--notifications-swipe-offset), 0, 0)`\n    } else if (isStacked) {\n      transform = `scale(${1 - stackDepth * 0.03}) translateY(${collapsedOffset}px)`\n    }\n  }\n\n  return {\n    ...baseStyle,\n    ...(isStackedLayout ? { maxHeight: undefined } : {}),\n    '--notifications-state-transform':\n      typeof baseStyle.transform === 'string' ? baseStyle.transform : 'translateX(0)',\n    '--notifications-state-opacity': String(baseOpacity),\n    '--notifications-swipe-offset': `${offset.value}px`,\n    '--notifications-swipe-opacity': String(swipeOpacity),\n    transform,\n    opacity: 'calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))',\n    transitionDuration: isDragging ? '0ms, 0ms, 0ms' : transitionDuration,\n    cursor: 'default',\n    touchAction: 'pan-y',\n    ...(isStackedLayout\n      ? {\n          gridArea: '1 / 1',\n          zIndex: (props.stackSize ?? 5) - (props.stackIndex ?? 0),\n          pointerEvents: isCollapsed ? ('none' as const) : undefined,\n          alignSelf: stackDirection === 1 ? ('start' as const) : ('end' as const),\n          transition: isDragging\n            ? 'none'\n            : `transform ${props.transitionDuration}ms cubic-bezier(.51,.3,0,1.21), opacity ${props.transitionDuration}ms ease`,\n          transitionDelay: isDragging || isExiting ? '0ms' : `${staggerDelay}ms`,\n        }\n      : {}),\n  }\n})\n\nconst isCollapsed = computed(\n  () => props.layout === 'stacked' && (props.stackIndex ?? 0) > 0 && !props.stackExpanded,\n)\n\nconst cancelAutoClose = () => window.clearTimeout(autoCloseTimeout)\nconst cancelHide = () => window.clearTimeout(hideTimeout)\nconst cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout)\n\nfunction handleHide() {\n  emit('hide', props.data.id!)\n  cancelAutoClose()\n  cancelHide()\n  cancelScrollDismissReset()\n}\n\nfunction handleAutoClose() {\n  if (\n    typeof window === 'undefined' ||\n    dismissed.value ||\n    active.value ||\n    props.paused ||\n    hovered.value ||\n    focused.value ||\n    typeof autoCloseDuration.value !== 'number'\n  )\n    return\n\n  cancelAutoClose()\n  autoCloseTimeout = window.setTimeout(handleHide, autoCloseDuration.value)\n}\n\nfunction getExitOffset(direction: -1 | 1) {\n  return direction * ((notificationRef.value?.offsetWidth ?? 440) + 40)\n}\n\nfunction shouldDismiss(movement: number, velocity: number) {\n  return Math.abs(movement) > (notificationRef.value?.offsetWidth ?? 440) * 0.35 || velocity > 0.5\n}\n\nfunction resetSwipe() {\n  cancelScrollDismissReset()\n  scrollDismissActive.value = false\n  offset.value = 0\n}\n\nfunction dismissNotification(direction: -1 | 1) {\n  dismissDirection.value = direction\n  dismissed.value = true\n  scrollDismissActive.value = false\n  offset.value = getExitOffset(direction)\n  cancelAutoClose()\n  cancelHide()\n  cancelScrollDismissReset()\n  hideTimeout = window.setTimeout(handleHide, props.transitionDuration)\n}\n\nfunction scheduleScrollDismissReset() {\n  cancelScrollDismissReset()\n  scrollDismissTimeout = window.setTimeout(() => {\n    scrollDismissActive.value = false\n    offset.value = 0\n    handleAutoClose()\n  }, SCROLL_DISMISS_RESET_TIMEOUT)\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n  if (active.value && !dismissed.value) offset.value = event.clientX - startX.value\n}\n\nfunction finishPointerDrag(event: PointerEvent) {\n  if (!active.value) return\n  active.value = false\n  removePointerListeners()\n  const movement = event.clientX - startX.value\n  const velocity = Math.abs(movement) / Math.max(Date.now() - startTime.value, 1)\n  if (shouldDismiss(movement, velocity)) dismissNotification(movement >= 0 ? 1 : -1)\n  else {\n    offset.value = 0\n    handleAutoClose()\n  }\n}\n\nfunction removePointerListeners() {\n  window.removeEventListener('pointermove', handlePointerMove)\n  window.removeEventListener('pointerup', finishPointerDrag)\n  window.removeEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction cancelPointerDrag(restartAutoClose = true) {\n  active.value = false\n  removePointerListeners()\n  offset.value = 0\n  if (restartAutoClose) handleAutoClose()\n}\n\nconst cancelPointerDragEvent = () => cancelPointerDrag()\n\nfunction handlePointerDown(event: PointerEvent) {\n  if (!props.allowDragDismiss || isCloseDisabled.value || dismissed.value || event.button !== 0)\n    return\n  cancelAutoClose()\n  active.value = true\n  startX.value = event.clientX\n  startTime.value = Date.now()\n  window.addEventListener('pointermove', handlePointerMove)\n  window.addEventListener('pointerup', finishPointerDrag)\n  window.addEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction handleWheel(event: WheelEvent) {\n  if (dismissed.value || active.value) return\n  const documentEvent = event.currentTarget === document\n  if ((!documentEvent && !hovered.value) || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return\n  if (!props.allowScrollDismiss || isCloseDisabled.value) return\n  if (!documentEvent) {\n    event.preventDefault()\n    event.stopPropagation()\n  }\n  cancelAutoClose()\n  scrollDismissActive.value = true\n  const nextOffset = offset.value - event.deltaX\n  if (shouldDismiss(nextOffset, 0)) dismissNotification(nextOffset > 0 ? 1 : -1)\n  else {\n    offset.value = nextOffset\n    scheduleScrollDismissReset()\n  }\n}\n\nfunction handleMouseEnter() {\n  hovered.value = true\n  cancelAutoClose()\n  syncActiveContribution()\n}\n\nfunction syncActiveContribution() {\n  const isActive = hovered.value || focused.value\n  if (isActive && !contributedActive.value) {\n    contributedActive.value = true\n    emit('hoverStart')\n  } else if (!isActive && contributedActive.value) {\n    contributedActive.value = false\n    emit('hoverEnd')\n  }\n}\n\nfunction handleFocusIn() {\n  if (props.layout !== 'stacked') return\n  focused.value = true\n  cancelAutoClose()\n  syncActiveContribution()\n}\n\nfunction handleFocusOut(event: FocusEvent) {\n  if (props.layout !== 'stacked') return\n  const next = event.relatedTarget as Node | null\n  if (next && notificationRef.value?.contains(next)) return\n  focused.value = false\n  if (!scrollDismissActive.value) handleAutoClose()\n  syncActiveContribution()\n}\n\nfunction handlePointerDownCapture(event: PointerEvent) {\n  if (\n    props.layout === 'stacked' &&\n    (event.pointerType === 'touch' || event.pointerType === 'pen')\n  ) {\n    emit('expandRequest')\n  }\n}\n\nfunction handleMouseLeave() {\n  hovered.value = false\n  if (!scrollDismissActive.value) {\n    resetSwipe()\n    handleAutoClose()\n  }\n  syncActiveContribution()\n}\n\nwatch(scrollDismissActive, (enabled, _, onCleanup) => {\n  if (!enabled) return\n  document.addEventListener('wheel', handleWheel, { passive: false })\n  onCleanup(() => document.removeEventListener('wheel', handleWheel))\n})\n\nwatch(\n  [autoCloseDuration, active, dismissed, () => props.paused],\n  () => {\n    if (props.paused) cancelAutoClose()\n    else handleAutoClose()\n  },\n  { immediate: true },\n)\n\nonMounted(() => {\n  props.data.onOpen?.(props.data)\n  notificationRef.value?.addEventListener('wheel', handleWheel, { passive: false })\n  window.addEventListener('resize', handleResize)\n  if (notificationRef.value) {\n    emit('heightChange', notificationRef.value.offsetHeight)\n    if (typeof ResizeObserver !== 'undefined') {\n      resizeObserver = new ResizeObserver(() => {\n        if (notificationRef.value) emit('heightChange', notificationRef.value.offsetHeight)\n      })\n      resizeObserver.observe(notificationRef.value)\n    }\n  }\n})\n\nfunction handleResize() {\n  if (dismissed.value) offset.value = getExitOffset(dismissDirection.value)\n}\n\nonBeforeUnmount(() => {\n  hovered.value = false\n  focused.value = false\n  syncActiveContribution()\n  cancelAutoClose()\n  cancelHide()\n  cancelScrollDismissReset()\n  cancelPointerDrag(false)\n  notificationRef.value?.removeEventListener('wheel', handleWheel)\n  window.removeEventListener('resize', handleResize)\n  resizeObserver?.disconnect()\n})\n\nfunction setNotificationRef(node: any) {\n  notificationRef.value = node?.$el ?? node ?? null\n}\n</script>\n\n<template>\n  <div\n    v-if=\"props.renderNotification\"\n    v-bind=\"attrs\"\n    :ref=\"setNotificationRef\"\n    :style=\"notificationStyle\"\n    :role=\"(attrs.role as string) || 'alert'\"\n    :inert=\"isCollapsed || undefined\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    @focusin=\"handleFocusIn\"\n    @focusout=\"handleFocusOut\"\n    @pointerdown.capture=\"handlePointerDownCapture\"\n    @pointerdown=\"handlePointerDown\"\n  >\n    <component :is=\"renderCustomNotification\" />\n  </div>\n  <Notification\n    v-else\n    v-bind=\"{ ...attrs, ...getNotificationProps() }\"\n    :ref=\"setNotificationRef\"\n    :style=\"notificationStyle\"\n    :inert=\"isCollapsed || undefined\"\n    :with-close-button=\"isCloseDisabled ? false : props.data.withCloseButton\"\n    @close=\"handleHide\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    @focusin=\"handleFocusIn\"\n    @focusout=\"handleFocusOut\"\n    @pointerdown.capture=\"handlePointerDownCapture\"\n    @pointerdown=\"handlePointerDown\"\n  >\n    <component :is=\"renderMessage\" />\n  </Notification>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  cloneVNode,\n  computed,\n  isVNode,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useAttrs,\n  watch,\n  type CSSProperties,\n} from 'vue'\nimport { Notification } from '@mantine-vue/core'\nimport { getAutoClose } from '../../get-auto-close/get-auto-close'\nimport type {\n  NotificationContainerEmits,\n  NotificationContainerProps,\n} from './NotificationContainer.types'\n\ndefineOptions({ name: 'NotificationContainer', inheritAttrs: false })\n\nconst props = defineProps<NotificationContainerProps>()\nconst emit = defineEmits<NotificationContainerEmits>()\nconst attrs = useAttrs()\nconst SCROLL_DISMISS_RESET_TIMEOUT = 120\nconst MAX_VISIBLE_STACK_DEPTH = 4\n\nconst notificationRef = ref<HTMLElement | null>(null)\nconst offset = ref(0)\nconst dismissed = ref(false)\nconst dismissDirection = ref<-1 | 1>(1)\nconst active = ref(false)\nconst scrollDismissActive = ref(false)\nconst hovered = ref(false)\nconst focused = ref(false)\nconst contributedActive = ref(false)\nconst startX = ref(0)\nconst startTime = ref(0)\nlet autoCloseTimeout = -1\nlet hideTimeout = -1\nlet scrollDismissTimeout = -1\nlet resizeObserver: ResizeObserver | undefined\n\nconst autoCloseDuration = computed(() => getAutoClose(props.autoClose, props.data.autoClose))\nconst isCloseDisabled = computed(() => props.data.allowClose === false)\n\nfunction normalizeStyle(style: any): Record<string, any> {\n  if (!style) return {}\n  if (Array.isArray(style)) {\n    return style.reduce<Record<string, any>>(\n      (accumulator, item) => Object.assign(accumulator, normalizeStyle(item)),\n      {},\n    )\n  }\n  return typeof style === 'object' ? style : {}\n}\n\nfunction getNotificationProps() {\n  const omittedKeys = new Set([\n    'autoClose',\n    'message',\n    'allowClose',\n    'position',\n    'style',\n    'withCloseButton',\n    'onOpen',\n    'onClose',\n    'id',\n    'renderNotification',\n    'priority',\n    '__sequence',\n  ])\n  return Object.fromEntries(\n    Object.entries(props.data)\n      .filter(([key]) => !omittedKeys.has(key))\n      .map(([key, value]) => [key, cloneRenderable(value)]),\n  )\n}\n\nfunction cloneRenderable(value: any): any {\n  if (isVNode(value)) return cloneVNode(value)\n  if (Array.isArray(value)) return value.map(cloneRenderable)\n  return value\n}\n\nconst renderMessage = () =>\n  cloneRenderable(\n    typeof props.data.message === 'function' ? props.data.message() : props.data.message,\n  )\n\nconst renderCustomNotification = () => cloneRenderable(props.renderNotification?.(props.data))\n\nconst notificationStyle = computed<CSSProperties>(() => {\n  const baseStyle = { ...normalizeStyle(attrs.style), ...normalizeStyle(props.data.style) }\n  const baseOpacity = typeof baseStyle.opacity === 'number' ? baseStyle.opacity : 1\n  const swipeOpacity = dismissed.value ? 0 : 1 - Math.min(Math.abs(offset.value) / 200, 1) * 0.6\n  const transitionDuration =\n    baseStyle.transitionDuration ??\n    `${props.transitionDuration}ms, ${props.transitionDuration}ms, ${props.transitionDuration}ms`\n\n  const isStackedLayout = props.layout === 'stacked'\n  const isStacked = isStackedLayout && (props.stackIndex ?? 0) > 0\n  const isCollapsed = isStacked && !props.stackExpanded\n  const isExiting = props.transitionState === 'exiting' || props.transitionState === 'exited'\n  const stackDirection = props.stackPosition?.startsWith('top') ? 1 : -1\n  const stackDepth = Math.min(props.stackIndex ?? 0, MAX_VISIBLE_STACK_DEPTH)\n  const collapsedOffset = isCollapsed ? stackDepth * 10 * stackDirection : 0\n  const staggerDelay = isStackedLayout ? (props.stackIndex ?? 0) * 30 : 0\n  const isDragging = active.value || scrollDismissActive.value\n\n  let transform =\n    'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)'\n\n  if (isStackedLayout) {\n    if (isExiting) {\n      const exitOffset = props.stackExpanded ? (props.stackExpandedOffset ?? 0) : collapsedOffset\n      transform = `translateY(${exitOffset}px) ${transform}`\n    } else if (props.stackExpanded) {\n      transform = `translateY(${props.stackExpandedOffset ?? 0}px) translate3d(var(--notifications-swipe-offset), 0, 0)`\n    } else if (isStacked) {\n      transform = `scale(${1 - stackDepth * 0.03}) translateY(${collapsedOffset}px)`\n    }\n  }\n\n  return {\n    ...baseStyle,\n    ...(isStackedLayout ? { maxHeight: undefined } : {}),\n    '--notifications-state-transform':\n      typeof baseStyle.transform === 'string' ? baseStyle.transform : 'translateX(0)',\n    '--notifications-state-opacity': String(baseOpacity),\n    '--notifications-swipe-offset': `${offset.value}px`,\n    '--notifications-swipe-opacity': String(swipeOpacity),\n    transform,\n    opacity: 'calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))',\n    transitionDuration: isDragging ? '0ms, 0ms, 0ms' : transitionDuration,\n    cursor: 'default',\n    touchAction: 'pan-y',\n    ...(isStackedLayout\n      ? {\n          gridArea: '1 / 1',\n          zIndex: (props.stackSize ?? 5) - (props.stackIndex ?? 0),\n          pointerEvents: isCollapsed ? ('none' as const) : undefined,\n          alignSelf: stackDirection === 1 ? ('start' as const) : ('end' as const),\n          transition: isDragging\n            ? 'none'\n            : `transform ${props.transitionDuration}ms cubic-bezier(.51,.3,0,1.21), opacity ${props.transitionDuration}ms ease`,\n          transitionDelay: isDragging || isExiting ? '0ms' : `${staggerDelay}ms`,\n        }\n      : {}),\n  }\n})\n\nconst isCollapsed = computed(\n  () => props.layout === 'stacked' && (props.stackIndex ?? 0) > 0 && !props.stackExpanded,\n)\n\nconst cancelAutoClose = () => window.clearTimeout(autoCloseTimeout)\nconst cancelHide = () => window.clearTimeout(hideTimeout)\nconst cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout)\n\nfunction handleHide() {\n  emit('hide', props.data.id!)\n  cancelAutoClose()\n  cancelHide()\n  cancelScrollDismissReset()\n}\n\nfunction handleAutoClose() {\n  if (\n    typeof window === 'undefined' ||\n    dismissed.value ||\n    active.value ||\n    props.paused ||\n    hovered.value ||\n    focused.value ||\n    typeof autoCloseDuration.value !== 'number'\n  )\n    return\n\n  cancelAutoClose()\n  autoCloseTimeout = window.setTimeout(handleHide, autoCloseDuration.value)\n}\n\nfunction getExitOffset(direction: -1 | 1) {\n  return direction * ((notificationRef.value?.offsetWidth ?? 440) + 40)\n}\n\nfunction shouldDismiss(movement: number, velocity: number) {\n  return Math.abs(movement) > (notificationRef.value?.offsetWidth ?? 440) * 0.35 || velocity > 0.5\n}\n\nfunction resetSwipe() {\n  cancelScrollDismissReset()\n  scrollDismissActive.value = false\n  offset.value = 0\n}\n\nfunction dismissNotification(direction: -1 | 1) {\n  dismissDirection.value = direction\n  dismissed.value = true\n  scrollDismissActive.value = false\n  offset.value = getExitOffset(direction)\n  cancelAutoClose()\n  cancelHide()\n  cancelScrollDismissReset()\n  hideTimeout = window.setTimeout(handleHide, props.transitionDuration)\n}\n\nfunction scheduleScrollDismissReset() {\n  cancelScrollDismissReset()\n  scrollDismissTimeout = window.setTimeout(() => {\n    scrollDismissActive.value = false\n    offset.value = 0\n    handleAutoClose()\n  }, SCROLL_DISMISS_RESET_TIMEOUT)\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n  if (active.value && !dismissed.value) offset.value = event.clientX - startX.value\n}\n\nfunction finishPointerDrag(event: PointerEvent) {\n  if (!active.value) return\n  active.value = false\n  removePointerListeners()\n  const movement = event.clientX - startX.value\n  const velocity = Math.abs(movement) / Math.max(Date.now() - startTime.value, 1)\n  if (shouldDismiss(movement, velocity)) dismissNotification(movement >= 0 ? 1 : -1)\n  else {\n    offset.value = 0\n    handleAutoClose()\n  }\n}\n\nfunction removePointerListeners() {\n  window.removeEventListener('pointermove', handlePointerMove)\n  window.removeEventListener('pointerup', finishPointerDrag)\n  window.removeEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction cancelPointerDrag(restartAutoClose = true) {\n  active.value = false\n  removePointerListeners()\n  offset.value = 0\n  if (restartAutoClose) handleAutoClose()\n}\n\nconst cancelPointerDragEvent = () => cancelPointerDrag()\n\nfunction handlePointerDown(event: PointerEvent) {\n  if (!props.allowDragDismiss || isCloseDisabled.value || dismissed.value || event.button !== 0)\n    return\n  cancelAutoClose()\n  active.value = true\n  startX.value = event.clientX\n  startTime.value = Date.now()\n  window.addEventListener('pointermove', handlePointerMove)\n  window.addEventListener('pointerup', finishPointerDrag)\n  window.addEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction handleWheel(event: WheelEvent) {\n  if (dismissed.value || active.value) return\n  const documentEvent = event.currentTarget === document\n  if ((!documentEvent && !hovered.value) || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return\n  if (!props.allowScrollDismiss || isCloseDisabled.value) return\n  if (!documentEvent) {\n    event.preventDefault()\n    event.stopPropagation()\n  }\n  cancelAutoClose()\n  scrollDismissActive.value = true\n  const nextOffset = offset.value - event.deltaX\n  if (shouldDismiss(nextOffset, 0)) dismissNotification(nextOffset > 0 ? 1 : -1)\n  else {\n    offset.value = nextOffset\n    scheduleScrollDismissReset()\n  }\n}\n\nfunction handleMouseEnter() {\n  hovered.value = true\n  cancelAutoClose()\n  syncActiveContribution()\n}\n\nfunction syncActiveContribution() {\n  const isActive = hovered.value || focused.value\n  if (isActive && !contributedActive.value) {\n    contributedActive.value = true\n    emit('hoverStart')\n  } else if (!isActive && contributedActive.value) {\n    contributedActive.value = false\n    emit('hoverEnd')\n  }\n}\n\nfunction handleFocusIn() {\n  if (props.layout !== 'stacked') return\n  focused.value = true\n  cancelAutoClose()\n  syncActiveContribution()\n}\n\nfunction handleFocusOut(event: FocusEvent) {\n  if (props.layout !== 'stacked') return\n  const next = event.relatedTarget as Node | null\n  if (next && notificationRef.value?.contains(next)) return\n  focused.value = false\n  if (!scrollDismissActive.value) handleAutoClose()\n  syncActiveContribution()\n}\n\nfunction handlePointerDownCapture(event: PointerEvent) {\n  if (\n    props.layout === 'stacked' &&\n    (event.pointerType === 'touch' || event.pointerType === 'pen')\n  ) {\n    emit('expandRequest')\n  }\n}\n\nfunction handleMouseLeave() {\n  hovered.value = false\n  if (!scrollDismissActive.value) {\n    resetSwipe()\n    handleAutoClose()\n  }\n  syncActiveContribution()\n}\n\nwatch(scrollDismissActive, (enabled, _, onCleanup) => {\n  if (!enabled) return\n  document.addEventListener('wheel', handleWheel, { passive: false })\n  onCleanup(() => document.removeEventListener('wheel', handleWheel))\n})\n\nwatch(\n  [autoCloseDuration, active, dismissed, () => props.paused],\n  () => {\n    if (props.paused) cancelAutoClose()\n    else handleAutoClose()\n  },\n  { immediate: true },\n)\n\nonMounted(() => {\n  props.data.onOpen?.(props.data)\n  notificationRef.value?.addEventListener('wheel', handleWheel, { passive: false })\n  window.addEventListener('resize', handleResize)\n  if (notificationRef.value) {\n    emit('heightChange', notificationRef.value.offsetHeight)\n    if (typeof ResizeObserver !== 'undefined') {\n      resizeObserver = new ResizeObserver(() => {\n        if (notificationRef.value) emit('heightChange', notificationRef.value.offsetHeight)\n      })\n      resizeObserver.observe(notificationRef.value)\n    }\n  }\n})\n\nfunction handleResize() {\n  if (dismissed.value) offset.value = getExitOffset(dismissDirection.value)\n}\n\nonBeforeUnmount(() => {\n  hovered.value = false\n  focused.value = false\n  syncActiveContribution()\n  cancelAutoClose()\n  cancelHide()\n  cancelScrollDismissReset()\n  cancelPointerDrag(false)\n  notificationRef.value?.removeEventListener('wheel', handleWheel)\n  window.removeEventListener('resize', handleResize)\n  resizeObserver?.disconnect()\n})\n\nfunction setNotificationRef(node: any) {\n  notificationRef.value = node?.$el ?? node ?? null\n}\n</script>\n\n<template>\n  <div\n    v-if=\"props.renderNotification\"\n    v-bind=\"attrs\"\n    :ref=\"setNotificationRef\"\n    :style=\"notificationStyle\"\n    :role=\"(attrs.role as string) || 'alert'\"\n    :inert=\"isCollapsed || undefined\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    @focusin=\"handleFocusIn\"\n    @focusout=\"handleFocusOut\"\n    @pointerdown.capture=\"handlePointerDownCapture\"\n    @pointerdown=\"handlePointerDown\"\n  >\n    <component :is=\"renderCustomNotification\" />\n  </div>\n  <Notification\n    v-else\n    v-bind=\"{ ...attrs, ...getNotificationProps() }\"\n    :ref=\"setNotificationRef\"\n    :style=\"notificationStyle\"\n    :inert=\"isCollapsed || undefined\"\n    :with-close-button=\"isCloseDisabled ? false : props.data.withCloseButton\"\n    @close=\"handleHide\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    @focusin=\"handleFocusIn\"\n    @focusout=\"handleFocusOut\"\n    @pointerdown.capture=\"handlePointerDownCapture\"\n    @pointerdown=\"handlePointerDown\"\n  >\n    <component :is=\"renderMessage\" />\n  </Notification>\n</template>\n","import type { NotificationData, NotificationPosition } from '../notifications.store'\n\nexport type GroupedNotifications = Record<NotificationPosition, NotificationData[]>\n\nexport const positions: NotificationPosition[] = [\n  'bottom-center',\n  'bottom-left',\n  'bottom-right',\n  'top-center',\n  'top-left',\n  'top-right',\n]\n\nexport function getGroupedNotifications(\n  notifications: NotificationData[],\n  defaultPosition: NotificationPosition,\n) {\n  return notifications.reduce<GroupedNotifications>(\n    (acc, notification) => {\n      acc[notification.position || defaultPosition].push(notification)\n      return acc\n    },\n    positions.reduce<GroupedNotifications>((acc, item) => {\n      acc[item] = []\n      return acc\n    }, {} as GroupedNotifications),\n  )\n}\n","import type { CSSProperties } from 'vue'\nimport type { NotificationPosition } from './notifications.store'\n\nexport type NotificationTransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited'\n\ninterface NotificationStateStylesProps {\n  state: NotificationTransitionStatus\n  maxHeight: number | string\n  position: NotificationPosition\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\nfunction toCssLength(value: number | string): string {\n  return typeof value === 'number' ? `${value}px` : value\n}\n\nexport function getNotificationStateStyles({\n  state,\n  maxHeight,\n  position,\n  transitionDuration,\n}: NotificationStateStylesProps): CSSProperties {\n  const [vertical, horizontal] = position.split('-')\n  const property = (\n    horizontal === 'center' ? `${vertical}-center` : horizontal\n  ) as keyof typeof transforms\n\n  const commonStyles: CSSProperties = {\n    opacity: 0,\n    maxHeight: toCssLength(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: CSSProperties = {\n    opacity: 1,\n    transform: noTransform[property],\n  }\n\n  const outState: CSSProperties = {\n    opacity: 0,\n    maxHeight: toCssLength(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",".root {\n  width: calc(100% - var(--mantine-spacing-md) * 2);\n  position: fixed;\n  z-index: var(--notifications-z-index);\n  max-width: var(--notifications-container-width);\n\n  &:where([data-position='top-center']) {\n    top: var(--mantine-spacing-md);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &:where([data-position='top-left']) {\n    top: var(--mantine-spacing-md);\n    left: var(--mantine-spacing-md);\n  }\n\n  &:where([data-position='top-right']) {\n    top: var(--mantine-spacing-md);\n    right: var(--mantine-spacing-md);\n  }\n\n  &:where([data-position='bottom-center']) {\n    bottom: var(--mantine-spacing-md);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &:where([data-position='bottom-left']) {\n    bottom: var(--mantine-spacing-md);\n    left: var(--mantine-spacing-md);\n  }\n\n  &:where([data-position='bottom-right']) {\n    bottom: var(--mantine-spacing-md);\n    right: var(--mantine-spacing-md);\n  }\n}\n\n.notification {\n  & + & {\n    margin-top: var(--mantine-spacing-md);\n  }\n\n  :where([data-layout='stacked']) & {\n    margin-top: 0;\n  }\n}\n\n.root:where([data-layout='stacked']) {\n  & > * {\n    display: grid;\n  }\n}\n","<script lang=\"ts\">\nimport { createVarsResolver, rem } from '@mantine-vue/core'\n\nconst varsResolver = createVarsResolver<any>((_, { zIndex, containerWidth }) => ({\n  root: {\n    '--notifications-z-index': zIndex?.toString(),\n    '--notifications-container-width': rem(containerWidth),\n  },\n}))\n\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch } from 'vue'\nimport {\n  Box,\n  OptionalPortal,\n  getDefaultZIndex,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine-vue/core'\nimport { useReducedMotion } from '@mantine-vue/hooks'\nimport NotificationContainer from '../NotificationContainer/NotificationContainer.vue'\nimport {\n  getGroupedNotifications,\n  positions,\n} from '../../get-grouped-notifications/get-grouped-notifications'\nimport { getNotificationStateStyles } from '../../get-notification-state-styles'\nimport { hideNotification, notificationsStore, useNotifications } from '../../notifications.store'\nimport type {\n  NotificationData,\n  NotificationPosition,\n  SequencedNotificationData,\n} from '../../notifications.store'\nimport type { NotificationsProps } from './Notifications.types'\nimport classes from '../../Notifications.module.css'\n\ndefineOptions({ name: 'Notifications', inheritAttrs: false })\n\nconst rawProps = withDefaults(defineProps<NotificationsProps>(), {\n  position: 'bottom-right',\n  autoClose: 4000,\n  transitionDuration: 250,\n  allowDragDismiss: true,\n  allowScrollDismiss: true,\n  containerWidth: 440,\n  notificationMaxHeight: 200,\n  limit: 5,\n  zIndex: () => getDefaultZIndex('overlay'),\n  store: () => notificationsStore,\n  withinPortal: true,\n  pauseResetOnHover: 'all',\n  layout: 'default',\n})\nconst attrs = useAttrs()\nconst props = useProps('Notifications', null, rawProps)\nconst theme = useMantineTheme()\nconst shouldReduceMotion = useReducedMotion()\nconst STACK_EXPANDED_GAP = 16\nconst FALLBACK_NOTIFICATION_HEIGHT = 80\nconst hoveredCounts = ref<Partial<Record<NotificationPosition, number>>>({})\nconst hoveredGroups = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst expandedPositions = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst pinnedPosition = ref<NotificationPosition | null>(null)\nconst notificationHeights = ref<Record<string, number>>({})\nconst collapseTimeouts: Partial<Record<NotificationPosition, number>> = {}\nconst data = useNotifications(props.store)\nconst duration = computed(() =>\n  theme.value.respectReducedMotion && shouldReduceMotion.value ? 1 : props.transitionDuration,\n)\nconst grouped = computed(() => getGroupedNotifications(data.value.notifications, props.position))\nconst hoveredCount = computed(\n  () =>\n    Object.values(hoveredCounts.value).reduce((sum, value) => sum + (value ?? 0), 0) +\n    Object.values(hoveredGroups.value).filter(Boolean).length,\n)\n\nconst getStyles = useStyles({\n  name: 'Notifications',\n  classes,\n  props,\n  className: attrs.class,\n  style: attrs.style as any,\n  classNames: props.classNames as any,\n  styles: props.styles as any,\n  unstyled: props.unstyled,\n  vars: props.vars as any,\n  varsResolver,\n})\n\nwatch(\n  () => [props.limit, props.position, props.store] as const,\n  () => {\n    props.store.setState((current) => ({\n      ...current,\n      limit: props.limit || 5,\n      defaultPosition: props.position,\n    }))\n  },\n  { immediate: true },\n)\n\nfunction applyTransitionStyles(\n  element: Element,\n  state: 'entered' | 'exited' | 'exiting',\n  position: NotificationPosition,\n) {\n  Object.assign(\n    (element as HTMLElement).style,\n    getNotificationStateStyles({\n      state,\n      position,\n      transitionDuration: duration.value,\n      maxHeight: props.notificationMaxHeight,\n    }),\n  )\n}\n\nfunction enter(element: Element, done: () => void, position: NotificationPosition) {\n  void (element as HTMLElement).offsetHeight\n  applyTransitionStyles(element, 'entered', position)\n  window.setTimeout(done, duration.value)\n}\n\nfunction leave(element: Element, done: () => void, position: NotificationPosition) {\n  applyTransitionStyles(element, 'exiting', position)\n  window.setTimeout(done, duration.value)\n}\n\nfunction notificationData(notification: NotificationData) {\n  const data = { ...notification }\n  delete data.style\n  return data\n}\n\nfunction isStackExpanded(position: NotificationPosition) {\n  return props.layout === 'stacked' && Boolean(expandedPositions.value[position])\n}\n\nfunction orderedGroup(position: NotificationPosition) {\n  const items = grouped.value[position]\n  if (props.layout !== 'stacked') return items\n  return [...(items as SequencedNotificationData[])].sort(\n    (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (b.__sequence ?? 0) - (a.__sequence ?? 0),\n  )\n}\n\nfunction expandedOffset(position: NotificationPosition, index: number) {\n  if (!isStackExpanded(position)) return 0\n  const direction = position.startsWith('top') ? 1 : -1\n  return (\n    orderedGroup(position)\n      .slice(0, index)\n      .reduce(\n        (sum, item) =>\n          sum +\n          (notificationHeights.value[item.id!] ?? FALLBACK_NOTIFICATION_HEIGHT) +\n          STACK_EXPANDED_GAP,\n        0,\n      ) * direction\n  )\n}\n\nfunction setExpanded(position: NotificationPosition, expanded: boolean) {\n  expandedPositions.value = { ...expandedPositions.value, [position]: expanded }\n}\n\nfunction scheduleCollapse(position: NotificationPosition) {\n  window.clearTimeout(collapseTimeouts[position])\n  if (\n    (hoveredCounts.value[position] ?? 0) > 0 ||\n    hoveredGroups.value[position] ||\n    pinnedPosition.value === position\n  )\n    return\n  collapseTimeouts[position] = window.setTimeout(() => setExpanded(position, false), 200)\n}\n\nfunction handleHoverStart(position: NotificationPosition) {\n  hoveredCounts.value = {\n    ...hoveredCounts.value,\n    [position]: (hoveredCounts.value[position] ?? 0) + 1,\n  }\n  if (props.layout === 'stacked') setExpanded(position, true)\n}\n\nfunction handleHoverEnd(position: NotificationPosition) {\n  hoveredCounts.value = {\n    ...hoveredCounts.value,\n    [position]: Math.max(0, (hoveredCounts.value[position] ?? 0) - 1),\n  }\n  if (props.layout === 'stacked') scheduleCollapse(position)\n}\n\nfunction handleGroupHover(position: NotificationPosition, hovered: boolean) {\n  if (props.layout !== 'stacked') return\n  hoveredGroups.value = { ...hoveredGroups.value, [position]: hovered }\n  if (hovered) {\n    window.clearTimeout(collapseTimeouts[position])\n    setExpanded(position, true)\n  } else scheduleCollapse(position)\n}\n\nfunction handleExpandRequest(position: NotificationPosition) {\n  pinnedPosition.value = position\n  setExpanded(position, true)\n}\n\nfunction handleDocumentPointerDown(event: PointerEvent) {\n  if (!pinnedPosition.value) return\n  const target = event.target as Element | null\n  if (!target?.closest(`[data-notifications-position=\"${pinnedPosition.value}\"]`)) {\n    const previous = pinnedPosition.value\n    pinnedPosition.value = null\n    scheduleCollapse(previous)\n  }\n}\n\nwatch(\n  () => props.layout,\n  (layout) => {\n    if (layout !== 'stacked') {\n      pinnedPosition.value = null\n      hoveredGroups.value = {}\n      expandedPositions.value = {}\n    }\n  },\n)\n\nwatch(grouped, (groups) => {\n  if (pinnedPosition.value && groups[pinnedPosition.value].length === 0) {\n    pinnedPosition.value = null\n  }\n})\n\nonMounted(() => document.addEventListener('pointerdown', handleDocumentPointerDown))\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', handleDocumentPointerDown)\n  positions.forEach((position) => window.clearTimeout(collapseTimeouts[position]))\n})\n</script>\n\n<template>\n  <OptionalPortal v-bind=\"props.portalProps\" :within-portal=\"props.withinPortal\">\n    <Box\n      v-for=\"position in positions\"\n      :key=\"position\"\n      v-bind=\"{ ...attrs, ...getStyles('root') }\"\n      :data-position=\"position\"\n      :data-notifications-position=\"position\"\n      :data-layout=\"props.layout\"\n    >\n      <TransitionGroup\n        tag=\"div\"\n        :css=\"false\"\n        @mouseenter=\"handleGroupHover(position, true)\"\n        @mouseleave=\"handleGroupHover(position, false)\"\n        @focusin=\"handleGroupHover(position, true)\"\n        @focusout=\"handleGroupHover(position, false)\"\n        @before-enter=\"(element) => applyTransitionStyles(element, 'exited', position)\"\n        @enter=\"(element, done) => enter(element, done, position)\"\n        @leave=\"(element, done) => leave(element, done, position)\"\n      >\n        <NotificationContainer\n          v-for=\"(notification, stackIndex) in orderedGroup(position)\"\n          :key=\"notification.id\"\n          v-bind=\"getStyles('notification', { style: notification.style })\"\n          :data=\"notificationData(notification)\"\n          :auto-close=\"props.autoClose\"\n          :transition-duration=\"duration\"\n          :allow-drag-dismiss=\"props.allowDragDismiss\"\n          :allow-scroll-dismiss=\"props.allowScrollDismiss\"\n          :paused=\"\n            (props.pauseResetOnHover === 'all' && hoveredCount > 0) ||\n            (props.layout === 'stacked' && !isStackExpanded(position) && stackIndex > 0)\n          \"\n          :render-notification=\"\n            'renderNotification' in notification\n              ? notification.renderNotification\n              : props.renderNotification\n          \"\n          :layout=\"props.layout\"\n          :stack-index=\"stackIndex\"\n          :stack-size=\"orderedGroup(position).length\"\n          :stack-position=\"position\"\n          :stack-expanded=\"isStackExpanded(position)\"\n          :stack-expanded-offset=\"expandedOffset(position, stackIndex)\"\n          transition-state=\"entered\"\n          @hide=\"(id) => hideNotification(id, props.store)\"\n          @hover-start=\"handleHoverStart(position)\"\n          @hover-end=\"handleHoverEnd(position)\"\n          @expand-request=\"handleExpandRequest(position)\"\n          @height-change=\"\n            (height) =>\n              (notificationHeights = { ...notificationHeights, [notification.id!]: height })\n          \"\n        />\n      </TransitionGroup>\n    </Box>\n  </OptionalPortal>\n</template>\n","<script lang=\"ts\">\nimport { createVarsResolver, rem } from '@mantine-vue/core'\n\nconst varsResolver = createVarsResolver<any>((_, { zIndex, containerWidth }) => ({\n  root: {\n    '--notifications-z-index': zIndex?.toString(),\n    '--notifications-container-width': rem(containerWidth),\n  },\n}))\n\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch } from 'vue'\nimport {\n  Box,\n  OptionalPortal,\n  getDefaultZIndex,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine-vue/core'\nimport { useReducedMotion } from '@mantine-vue/hooks'\nimport NotificationContainer from '../NotificationContainer/NotificationContainer.vue'\nimport {\n  getGroupedNotifications,\n  positions,\n} from '../../get-grouped-notifications/get-grouped-notifications'\nimport { getNotificationStateStyles } from '../../get-notification-state-styles'\nimport { hideNotification, notificationsStore, useNotifications } from '../../notifications.store'\nimport type {\n  NotificationData,\n  NotificationPosition,\n  SequencedNotificationData,\n} from '../../notifications.store'\nimport type { NotificationsProps } from './Notifications.types'\nimport classes from '../../Notifications.module.css'\n\ndefineOptions({ name: 'Notifications', inheritAttrs: false })\n\nconst rawProps = withDefaults(defineProps<NotificationsProps>(), {\n  position: 'bottom-right',\n  autoClose: 4000,\n  transitionDuration: 250,\n  allowDragDismiss: true,\n  allowScrollDismiss: true,\n  containerWidth: 440,\n  notificationMaxHeight: 200,\n  limit: 5,\n  zIndex: () => getDefaultZIndex('overlay'),\n  store: () => notificationsStore,\n  withinPortal: true,\n  pauseResetOnHover: 'all',\n  layout: 'default',\n})\nconst attrs = useAttrs()\nconst props = useProps('Notifications', null, rawProps)\nconst theme = useMantineTheme()\nconst shouldReduceMotion = useReducedMotion()\nconst STACK_EXPANDED_GAP = 16\nconst FALLBACK_NOTIFICATION_HEIGHT = 80\nconst hoveredCounts = ref<Partial<Record<NotificationPosition, number>>>({})\nconst hoveredGroups = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst expandedPositions = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst pinnedPosition = ref<NotificationPosition | null>(null)\nconst notificationHeights = ref<Record<string, number>>({})\nconst collapseTimeouts: Partial<Record<NotificationPosition, number>> = {}\nconst data = useNotifications(props.store)\nconst duration = computed(() =>\n  theme.value.respectReducedMotion && shouldReduceMotion.value ? 1 : props.transitionDuration,\n)\nconst grouped = computed(() => getGroupedNotifications(data.value.notifications, props.position))\nconst hoveredCount = computed(\n  () =>\n    Object.values(hoveredCounts.value).reduce((sum, value) => sum + (value ?? 0), 0) +\n    Object.values(hoveredGroups.value).filter(Boolean).length,\n)\n\nconst getStyles = useStyles({\n  name: 'Notifications',\n  classes,\n  props,\n  className: attrs.class,\n  style: attrs.style as any,\n  classNames: props.classNames as any,\n  styles: props.styles as any,\n  unstyled: props.unstyled,\n  vars: props.vars as any,\n  varsResolver,\n})\n\nwatch(\n  () => [props.limit, props.position, props.store] as const,\n  () => {\n    props.store.setState((current) => ({\n      ...current,\n      limit: props.limit || 5,\n      defaultPosition: props.position,\n    }))\n  },\n  { immediate: true },\n)\n\nfunction applyTransitionStyles(\n  element: Element,\n  state: 'entered' | 'exited' | 'exiting',\n  position: NotificationPosition,\n) {\n  Object.assign(\n    (element as HTMLElement).style,\n    getNotificationStateStyles({\n      state,\n      position,\n      transitionDuration: duration.value,\n      maxHeight: props.notificationMaxHeight,\n    }),\n  )\n}\n\nfunction enter(element: Element, done: () => void, position: NotificationPosition) {\n  void (element as HTMLElement).offsetHeight\n  applyTransitionStyles(element, 'entered', position)\n  window.setTimeout(done, duration.value)\n}\n\nfunction leave(element: Element, done: () => void, position: NotificationPosition) {\n  applyTransitionStyles(element, 'exiting', position)\n  window.setTimeout(done, duration.value)\n}\n\nfunction notificationData(notification: NotificationData) {\n  const data = { ...notification }\n  delete data.style\n  return data\n}\n\nfunction isStackExpanded(position: NotificationPosition) {\n  return props.layout === 'stacked' && Boolean(expandedPositions.value[position])\n}\n\nfunction orderedGroup(position: NotificationPosition) {\n  const items = grouped.value[position]\n  if (props.layout !== 'stacked') return items\n  return [...(items as SequencedNotificationData[])].sort(\n    (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (b.__sequence ?? 0) - (a.__sequence ?? 0),\n  )\n}\n\nfunction expandedOffset(position: NotificationPosition, index: number) {\n  if (!isStackExpanded(position)) return 0\n  const direction = position.startsWith('top') ? 1 : -1\n  return (\n    orderedGroup(position)\n      .slice(0, index)\n      .reduce(\n        (sum, item) =>\n          sum +\n          (notificationHeights.value[item.id!] ?? FALLBACK_NOTIFICATION_HEIGHT) +\n          STACK_EXPANDED_GAP,\n        0,\n      ) * direction\n  )\n}\n\nfunction setExpanded(position: NotificationPosition, expanded: boolean) {\n  expandedPositions.value = { ...expandedPositions.value, [position]: expanded }\n}\n\nfunction scheduleCollapse(position: NotificationPosition) {\n  window.clearTimeout(collapseTimeouts[position])\n  if (\n    (hoveredCounts.value[position] ?? 0) > 0 ||\n    hoveredGroups.value[position] ||\n    pinnedPosition.value === position\n  )\n    return\n  collapseTimeouts[position] = window.setTimeout(() => setExpanded(position, false), 200)\n}\n\nfunction handleHoverStart(position: NotificationPosition) {\n  hoveredCounts.value = {\n    ...hoveredCounts.value,\n    [position]: (hoveredCounts.value[position] ?? 0) + 1,\n  }\n  if (props.layout === 'stacked') setExpanded(position, true)\n}\n\nfunction handleHoverEnd(position: NotificationPosition) {\n  hoveredCounts.value = {\n    ...hoveredCounts.value,\n    [position]: Math.max(0, (hoveredCounts.value[position] ?? 0) - 1),\n  }\n  if (props.layout === 'stacked') scheduleCollapse(position)\n}\n\nfunction handleGroupHover(position: NotificationPosition, hovered: boolean) {\n  if (props.layout !== 'stacked') return\n  hoveredGroups.value = { ...hoveredGroups.value, [position]: hovered }\n  if (hovered) {\n    window.clearTimeout(collapseTimeouts[position])\n    setExpanded(position, true)\n  } else scheduleCollapse(position)\n}\n\nfunction handleExpandRequest(position: NotificationPosition) {\n  pinnedPosition.value = position\n  setExpanded(position, true)\n}\n\nfunction handleDocumentPointerDown(event: PointerEvent) {\n  if (!pinnedPosition.value) return\n  const target = event.target as Element | null\n  if (!target?.closest(`[data-notifications-position=\"${pinnedPosition.value}\"]`)) {\n    const previous = pinnedPosition.value\n    pinnedPosition.value = null\n    scheduleCollapse(previous)\n  }\n}\n\nwatch(\n  () => props.layout,\n  (layout) => {\n    if (layout !== 'stacked') {\n      pinnedPosition.value = null\n      hoveredGroups.value = {}\n      expandedPositions.value = {}\n    }\n  },\n)\n\nwatch(grouped, (groups) => {\n  if (pinnedPosition.value && groups[pinnedPosition.value].length === 0) {\n    pinnedPosition.value = null\n  }\n})\n\nonMounted(() => document.addEventListener('pointerdown', handleDocumentPointerDown))\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', handleDocumentPointerDown)\n  positions.forEach((position) => window.clearTimeout(collapseTimeouts[position]))\n})\n</script>\n\n<template>\n  <OptionalPortal v-bind=\"props.portalProps\" :within-portal=\"props.withinPortal\">\n    <Box\n      v-for=\"position in positions\"\n      :key=\"position\"\n      v-bind=\"{ ...attrs, ...getStyles('root') }\"\n      :data-position=\"position\"\n      :data-notifications-position=\"position\"\n      :data-layout=\"props.layout\"\n    >\n      <TransitionGroup\n        tag=\"div\"\n        :css=\"false\"\n        @mouseenter=\"handleGroupHover(position, true)\"\n        @mouseleave=\"handleGroupHover(position, false)\"\n        @focusin=\"handleGroupHover(position, true)\"\n        @focusout=\"handleGroupHover(position, false)\"\n        @before-enter=\"(element) => applyTransitionStyles(element, 'exited', position)\"\n        @enter=\"(element, done) => enter(element, done, position)\"\n        @leave=\"(element, done) => leave(element, done, position)\"\n      >\n        <NotificationContainer\n          v-for=\"(notification, stackIndex) in orderedGroup(position)\"\n          :key=\"notification.id\"\n          v-bind=\"getStyles('notification', { style: notification.style })\"\n          :data=\"notificationData(notification)\"\n          :auto-close=\"props.autoClose\"\n          :transition-duration=\"duration\"\n          :allow-drag-dismiss=\"props.allowDragDismiss\"\n          :allow-scroll-dismiss=\"props.allowScrollDismiss\"\n          :paused=\"\n            (props.pauseResetOnHover === 'all' && hoveredCount > 0) ||\n            (props.layout === 'stacked' && !isStackExpanded(position) && stackIndex > 0)\n          \"\n          :render-notification=\"\n            'renderNotification' in notification\n              ? notification.renderNotification\n              : props.renderNotification\n          \"\n          :layout=\"props.layout\"\n          :stack-index=\"stackIndex\"\n          :stack-size=\"orderedGroup(position).length\"\n          :stack-position=\"position\"\n          :stack-expanded=\"isStackExpanded(position)\"\n          :stack-expanded-offset=\"expandedOffset(position, stackIndex)\"\n          transition-state=\"entered\"\n          @hide=\"(id) => hideNotification(id, props.store)\"\n          @hover-start=\"handleHoverStart(position)\"\n          @hover-end=\"handleHoverEnd(position)\"\n          @expand-request=\"handleExpandRequest(position)\"\n          @height-change=\"\n            (height) =>\n              (notificationHeights = { ...notificationHeights, [notification.id!]: height })\n          \"\n        />\n      </TransitionGroup>\n    </Box>\n  </OptionalPortal>\n</template>\n","import NotificationsComponent, { varsResolver } from './Notifications.vue'\nimport { notifications } from '../../notifications.store'\nimport classes from '../../Notifications.module.css'\n\nexport const Notifications = Object.assign(NotificationsComponent, {\n  classes,\n  varsResolver,\n  show: notifications.show,\n  hide: notifications.hide,\n  update: notifications.update,\n  clean: notifications.clean,\n  cleanQueue: notifications.cleanQueue,\n  updateState: notifications.updateState,\n})\n\nexport type {\n  NotificationsCssVariables,\n  NotificationsProps,\n  NotificationsStylesNames,\n} from './Notifications.types'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/notifications.store.ts","../src/get-auto-close/get-auto-close.ts","../src/components/NotificationContainer/NotificationContainer.vue","../src/components/NotificationContainer/NotificationContainer.vue","../src/get-grouped-notifications/get-grouped-notifications.ts","../src/get-notification-state-styles.ts","../src/Notifications.module.css","../src/components/Notifications/Notifications.vue","../src/components/Notifications/Notifications.vue","../src/components/Notifications/Notifications.ts"],"sourcesContent":["import { type Ref, type VNodeChild } from 'vue'\nimport { createStore, type MantineStore } from '@mantine-vue/store'\n\nexport type NotificationPosition =\n  | 'top-left'\n  | 'top-right'\n  | 'top-center'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'bottom-center'\n\nexport interface NotificationData extends Record<`data-${string}`, any> {\n  /** Notification id, can be used to close or update notification. */\n  id?: string\n  /** Position of the notification, if not set, the position is determined based on `position` prop on Notifications component. */\n  position?: NotificationPosition\n  /** Notification message, required for all notifications. */\n  message: any\n  /** Display priority. Higher numbers are shown before lower ones when the number of active notifications exceeds `limit`. Notifications with equal priority keep insertion order (FIFO). @default 0 */\n  priority?: number\n  /** Determines whether notification should be closed automatically, number is auto close timeout in ms, overrides `autoClose` from `Notifications`. */\n  autoClose?: boolean | number\n  /** Determines whether notification can be closed with close button, drag or horizontal scroll swipe. @default true */\n  allowClose?: boolean\n  /** Displays an auto-close progress line, overriding the Notifications default. */\n  withAutoCloseProgress?: boolean\n  /** Called when notification closes. */\n  onClose?: (props: NotificationData) => void\n  /** Called when notification opens. */\n  onOpen?: (props: NotificationData) => void\n  /** Custom renderer that replaces the default notification. Set to `null` to use default rendering when a global renderer is configured. */\n  renderNotification?: ((notification: NotificationData) => VNodeChild) | null\n  style?: any\n  withCloseButton?: boolean\n  [key: string]: any\n}\n\nexport interface NotificationsState {\n  notifications: NotificationData[]\n  queue: NotificationData[]\n  defaultPosition: NotificationPosition\n  limit: number\n}\n\nexport type NotificationsStore = MantineStore<NotificationsState>\n\nfunction randomId() {\n  return `mantine-${Math.random().toString(36).slice(2, 11)}`\n}\n\nexport interface SequencedNotificationData extends NotificationData {\n  __sequence?: number\n}\n\nlet notificationSequence = 0\n\nfunction getDistributedNotifications(\n  data: SequencedNotificationData[],\n  defaultPosition: NotificationPosition,\n  limit: number,\n) {\n  const queue: NotificationData[] = []\n  const notifications: NotificationData[] = []\n  const groups = new Map<string, SequencedNotificationData[]>()\n\n  for (const item of data) {\n    const position = item.position || defaultPosition\n    const group = groups.get(position)\n    if (group) {\n      group.push(item)\n    } else {\n      groups.set(position, [item])\n    }\n  }\n\n  for (const group of groups.values()) {\n    group.sort(\n      (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (a.__sequence ?? 0) - (b.__sequence ?? 0),\n    )\n    group.forEach((item, index) => {\n      if (index < limit) notifications.push(item)\n      else queue.push(item)\n    })\n  }\n\n  return { notifications, queue }\n}\n\nexport const createNotificationsStore = () =>\n  createStore<NotificationsState>({\n    notifications: [],\n    queue: [],\n    defaultPosition: 'bottom-right',\n    limit: 5,\n  })\n\nexport const notificationsStore = createNotificationsStore()\nexport const useNotifications = (\n  store: NotificationsStore = notificationsStore,\n): Readonly<Ref<NotificationsState>> => store.value\n\nexport function updateNotificationsState(\n  store: NotificationsStore,\n  update: (notifications: NotificationData[]) => NotificationData[],\n) {\n  const state = store.getState()\n  const notifications = update([...state.notifications, ...state.queue])\n  for (const item of notifications as SequencedNotificationData[]) {\n    if (item.__sequence === undefined) {\n      item.__sequence = notificationSequence\n      notificationSequence += 1\n    }\n  }\n  const updated = getDistributedNotifications(notifications, state.defaultPosition, state.limit)\n\n  store.setState({\n    notifications: updated.notifications,\n    queue: updated.queue,\n    limit: state.limit,\n    defaultPosition: state.defaultPosition,\n  })\n}\n\nexport function showNotification(\n  notification: NotificationData,\n  store: NotificationsStore = notificationsStore,\n) {\n  const id = notification.id || randomId()\n\n  updateNotificationsState(store, (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\nexport function hideNotification(id: string, store: NotificationsStore = notificationsStore) {\n  updateNotificationsState(store, (notifications) =>\n    notifications.filter((notification) => {\n      if (notification.id === id) {\n        notification.onClose?.(notification)\n        return false\n      }\n\n      return true\n    }),\n  )\n\n  return id\n}\n\nexport function updateNotification(\n  notification: NotificationData,\n  store: NotificationsStore = notificationsStore,\n) {\n  updateNotificationsState(store, (notifications) =>\n    notifications.map((item) =>\n      item.id === notification.id ? { ...item, ...notification } : item,\n    ),\n  )\n\n  return notification.id\n}\n\nexport type PromiseNotificationData = Omit<NotificationData, 'id'> &\n  Pick<NotificationData, 'message'>\n\nexport interface PromiseNotificationOptions<T> {\n  /** Notification id shared by all promise states. */\n  id?: string\n  /** Notification displayed while the promise is pending. */\n  loading: PromiseNotificationData\n  /** Notification displayed after resolution, or a function of the resolved value. */\n  success: PromiseNotificationData | ((value: T) => PromiseNotificationData)\n  /** Notification displayed after rejection, or a function of the rejection reason. */\n  error: PromiseNotificationData | ((error: unknown) => PromiseNotificationData)\n}\n\nfunction resolvePromiseNotificationData<T>(\n  data: PromiseNotificationData | ((value: T) => PromiseNotificationData),\n  value: T,\n) {\n  return typeof data === 'function' ? data(value) : data\n}\n\nfunction upsertNotification(notification: NotificationData, store: NotificationsStore) {\n  const state = store.getState()\n  const exists = [...state.notifications, ...state.queue].some(\n    (item) => item.id === notification.id,\n  )\n  return exists ? updateNotification(notification, store) : showNotification(notification, store)\n}\n\nconst pendingPromises = new WeakMap<NotificationsStore, Map<string, object>>()\n\nexport function promiseNotification<T>(\n  promise: Promise<T>,\n  options: PromiseNotificationOptions<T>,\n  store: NotificationsStore = notificationsStore,\n): Promise<T> {\n  const id = options.id || randomId()\n  const owners = pendingPromises.get(store) || new Map<string, object>()\n  const owner = {}\n  pendingPromises.set(store, owners)\n  owners.set(id, owner)\n\n  upsertNotification(\n    { loading: true, autoClose: false, ...options.loading, id } as NotificationData,\n    store,\n  )\n\n  const settle = (data: PromiseNotificationData) => {\n    if (owners.get(id) !== owner) return\n    owners.delete(id)\n    upsertNotification(\n      { ...options.loading, loading: false, autoClose: undefined, ...data, id } as NotificationData,\n      store,\n    )\n  }\n\n  promise.then(\n    (value) => settle({ color: 'teal', ...resolvePromiseNotificationData(options.success, value) }),\n    (error) => settle({ color: 'red', ...resolvePromiseNotificationData(options.error, error) }),\n  )\n\n  return promise\n}\n\nexport function cleanNotifications(store: NotificationsStore = notificationsStore) {\n  updateNotificationsState(store, () => [])\n}\n\nexport function cleanNotificationsQueue(store: NotificationsStore = notificationsStore) {\n  const { defaultPosition, limit } = store.getState()\n  updateNotificationsState(\n    store,\n    (notifications) =>\n      getDistributedNotifications(notifications, defaultPosition, limit).notifications,\n  )\n}\n\nexport const notifications = {\n  show: showNotification,\n  hide: hideNotification,\n  update: updateNotification,\n  promise: promiseNotification,\n  clean: cleanNotifications,\n  cleanQueue: cleanNotificationsQueue,\n  updateState: updateNotificationsState,\n} as const\n","export function getAutoClose(\n  autoClose: boolean | number | undefined,\n  notificationAutoClose: boolean | number | undefined,\n) {\n  if (typeof notificationAutoClose === 'number') {\n    return notificationAutoClose\n  }\n\n  if (notificationAutoClose === false || autoClose === false) {\n    return false\n  }\n\n  return autoClose\n}\n","<script setup lang=\"ts\">\nimport {\n  cloneVNode,\n  computed,\n  isVNode,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useAttrs,\n  watch,\n  type CSSProperties,\n} from 'vue'\nimport { Notification } from '@mantine-vue/core'\nimport { getAutoClose } from '../../get-auto-close/get-auto-close'\nimport type {\n  NotificationContainerEmits,\n  NotificationContainerProps,\n} from './NotificationContainer.types'\n\ndefineOptions({ name: 'NotificationContainer', inheritAttrs: false })\n\nconst props = defineProps<NotificationContainerProps>()\nconst emit = defineEmits<NotificationContainerEmits>()\nconst attrs = useAttrs()\nconst SCROLL_DISMISS_RESET_TIMEOUT = 120\nconst MAX_VISIBLE_STACK_DEPTH = 4\n\nconst notificationRef = ref<HTMLElement | null>(null)\nconst offset = ref(0)\nconst dismissed = ref(false)\nconst dismissDirection = ref<-1 | 1>(1)\nconst active = ref(false)\nconst scrollDismissActive = ref(false)\nconst hovered = ref(false)\nconst focused = ref(false)\nconst progressRunning = ref(false)\nconst progressCycle = ref(0)\nconst contributedActive = ref(false)\nconst startX = ref(0)\nconst startTime = ref(0)\nlet autoCloseTimeout = -1\nlet hideTimeout = -1\nlet scrollDismissTimeout = -1\nlet resizeObserver: ResizeObserver | undefined\n\nconst autoCloseDuration = computed(() => getAutoClose(props.autoClose, props.data.autoClose))\nconst hasAutoCloseProgress = computed(\n  () =>\n    (props.data.withAutoCloseProgress ?? props.withAutoCloseProgress) &&\n    typeof autoCloseDuration.value === 'number',\n)\nconst isCloseDisabled = computed(() => props.data.allowClose === false)\n\nfunction normalizeStyle(style: any): Record<string, any> {\n  if (!style) return {}\n  if (Array.isArray(style)) {\n    return style.reduce<Record<string, any>>(\n      (accumulator, item) => Object.assign(accumulator, normalizeStyle(item)),\n      {},\n    )\n  }\n  return typeof style === 'object' ? style : {}\n}\n\nfunction getNotificationProps() {\n  const omittedKeys = new Set([\n    'autoClose',\n    'message',\n    'allowClose',\n    'position',\n    'style',\n    'withCloseButton',\n    'onOpen',\n    'onClose',\n    'id',\n    'renderNotification',\n    'priority',\n    '__sequence',\n    'withAutoCloseProgress',\n  ])\n  return Object.fromEntries(\n    Object.entries(props.data)\n      .filter(([key]) => !omittedKeys.has(key))\n      .map(([key, value]) => [key, cloneRenderable(value)]),\n  )\n}\n\nfunction cloneRenderable(value: any): any {\n  if (isVNode(value)) return cloneVNode(value)\n  if (Array.isArray(value)) return value.map(cloneRenderable)\n  return value\n}\n\nconst renderMessage = () =>\n  cloneRenderable(\n    typeof props.data.message === 'function' ? props.data.message() : props.data.message,\n  )\n\nconst renderCustomNotification = () => cloneRenderable(props.renderNotification?.(props.data))\n\nconst notificationStyle = computed<CSSProperties>(() => {\n  const baseStyle = { ...normalizeStyle(attrs.style), ...normalizeStyle(props.data.style) }\n  const baseOpacity = typeof baseStyle.opacity === 'number' ? baseStyle.opacity : 1\n  const swipeOpacity = dismissed.value ? 0 : 1 - Math.min(Math.abs(offset.value) / 200, 1) * 0.6\n  const transitionDuration =\n    baseStyle.transitionDuration ??\n    `${props.transitionDuration}ms, ${props.transitionDuration}ms, ${props.transitionDuration}ms`\n\n  const isStackedLayout = props.layout === 'stacked'\n  const isStacked = isStackedLayout && (props.stackIndex ?? 0) > 0\n  const isCollapsed = isStacked && !props.stackExpanded\n  const isExiting = props.transitionState === 'exiting' || props.transitionState === 'exited'\n  const stackDirection = props.stackPosition?.startsWith('top') ? 1 : -1\n  const stackDepth = Math.min(props.stackIndex ?? 0, MAX_VISIBLE_STACK_DEPTH)\n  const collapsedOffset = isCollapsed ? stackDepth * 10 * stackDirection : 0\n  const staggerDelay = isStackedLayout ? (props.stackIndex ?? 0) * 30 : 0\n  const isDragging = active.value || scrollDismissActive.value\n\n  let transform =\n    'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)'\n\n  if (isStackedLayout) {\n    if (isExiting) {\n      const exitOffset = props.stackExpanded ? (props.stackExpandedOffset ?? 0) : collapsedOffset\n      transform = `translateY(${exitOffset}px) ${transform}`\n    } else if (props.stackExpanded) {\n      transform = `translateY(${props.stackExpandedOffset ?? 0}px) translate3d(var(--notifications-swipe-offset), 0, 0)`\n    } else if (isStacked) {\n      transform = `scale(${1 - stackDepth * 0.03}) translateY(${collapsedOffset}px)`\n    }\n  }\n\n  return {\n    ...baseStyle,\n    ...(isStackedLayout ? { maxHeight: undefined } : {}),\n    '--notifications-state-transform':\n      typeof baseStyle.transform === 'string' ? baseStyle.transform : 'translateX(0)',\n    '--notifications-state-opacity': String(baseOpacity),\n    '--notifications-swipe-offset': `${offset.value}px`,\n    '--notifications-swipe-opacity': String(swipeOpacity),\n    transform,\n    opacity: 'calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))',\n    transitionDuration: isDragging ? '0ms, 0ms, 0ms' : transitionDuration,\n    cursor: 'default',\n    touchAction: 'pan-y',\n    ...(isStackedLayout\n      ? {\n          gridArea: '1 / 1',\n          zIndex: (props.stackSize ?? 5) - (props.stackIndex ?? 0),\n          pointerEvents: isCollapsed ? ('none' as const) : undefined,\n          alignSelf: stackDirection === 1 ? ('start' as const) : ('end' as const),\n          transition: isDragging\n            ? 'none'\n            : `transform ${props.transitionDuration}ms cubic-bezier(.51,.3,0,1.21), opacity ${props.transitionDuration}ms ease`,\n          transitionDelay: isDragging || isExiting ? '0ms' : `${staggerDelay}ms`,\n        }\n      : {}),\n  }\n})\n\nconst isCollapsed = computed(\n  () => props.layout === 'stacked' && (props.stackIndex ?? 0) > 0 && !props.stackExpanded,\n)\n\nconst cancelAutoClose = () => {\n  window.clearTimeout(autoCloseTimeout)\n  progressRunning.value = false\n}\nconst cancelHide = () => window.clearTimeout(hideTimeout)\nconst cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout)\n\nfunction handleHide() {\n  emit('hide', props.data.id!)\n  cancelAutoClose()\n  cancelHide()\n  cancelScrollDismissReset()\n}\n\nfunction handleAutoClose() {\n  if (\n    typeof window === 'undefined' ||\n    dismissed.value ||\n    active.value ||\n    props.paused ||\n    hovered.value ||\n    focused.value ||\n    typeof autoCloseDuration.value !== 'number'\n  )\n    return\n\n  cancelAutoClose()\n  autoCloseTimeout = window.setTimeout(handleHide, autoCloseDuration.value)\n  if (hasAutoCloseProgress.value) {\n    progressCycle.value += 1\n    progressRunning.value = true\n  }\n}\n\nfunction getExitOffset(direction: -1 | 1) {\n  return direction * ((notificationRef.value?.offsetWidth ?? 440) + 40)\n}\n\nfunction shouldDismiss(movement: number, velocity: number) {\n  return Math.abs(movement) > (notificationRef.value?.offsetWidth ?? 440) * 0.35 || velocity > 0.5\n}\n\nfunction resetSwipe() {\n  cancelScrollDismissReset()\n  scrollDismissActive.value = false\n  offset.value = 0\n}\n\nfunction dismissNotification(direction: -1 | 1) {\n  dismissDirection.value = direction\n  dismissed.value = true\n  scrollDismissActive.value = false\n  offset.value = getExitOffset(direction)\n  cancelAutoClose()\n  cancelHide()\n  cancelScrollDismissReset()\n  hideTimeout = window.setTimeout(handleHide, props.transitionDuration)\n}\n\nfunction scheduleScrollDismissReset() {\n  cancelScrollDismissReset()\n  scrollDismissTimeout = window.setTimeout(() => {\n    scrollDismissActive.value = false\n    offset.value = 0\n    handleAutoClose()\n  }, SCROLL_DISMISS_RESET_TIMEOUT)\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n  if (active.value && !dismissed.value) offset.value = event.clientX - startX.value\n}\n\nfunction finishPointerDrag(event: PointerEvent) {\n  if (!active.value) return\n  active.value = false\n  removePointerListeners()\n  const movement = event.clientX - startX.value\n  const velocity = Math.abs(movement) / Math.max(Date.now() - startTime.value, 1)\n  if (shouldDismiss(movement, velocity)) dismissNotification(movement >= 0 ? 1 : -1)\n  else {\n    offset.value = 0\n    handleAutoClose()\n  }\n}\n\nfunction removePointerListeners() {\n  window.removeEventListener('pointermove', handlePointerMove)\n  window.removeEventListener('pointerup', finishPointerDrag)\n  window.removeEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction cancelPointerDrag(restartAutoClose = true) {\n  active.value = false\n  removePointerListeners()\n  offset.value = 0\n  if (restartAutoClose) handleAutoClose()\n}\n\nconst cancelPointerDragEvent = () => cancelPointerDrag()\n\nfunction handlePointerDown(event: PointerEvent) {\n  if (!props.allowDragDismiss || isCloseDisabled.value || dismissed.value || event.button !== 0)\n    return\n  cancelAutoClose()\n  active.value = true\n  startX.value = event.clientX\n  startTime.value = Date.now()\n  window.addEventListener('pointermove', handlePointerMove)\n  window.addEventListener('pointerup', finishPointerDrag)\n  window.addEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction handleWheel(event: WheelEvent) {\n  if (dismissed.value || active.value) return\n  const documentEvent = event.currentTarget === document\n  if ((!documentEvent && !hovered.value) || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return\n  if (!props.allowScrollDismiss || isCloseDisabled.value) return\n  if (!documentEvent) {\n    event.preventDefault()\n    event.stopPropagation()\n  }\n  cancelAutoClose()\n  scrollDismissActive.value = true\n  const nextOffset = offset.value - event.deltaX\n  if (shouldDismiss(nextOffset, 0)) dismissNotification(nextOffset > 0 ? 1 : -1)\n  else {\n    offset.value = nextOffset\n    scheduleScrollDismissReset()\n  }\n}\n\nfunction handleMouseEnter() {\n  hovered.value = true\n  cancelAutoClose()\n  syncActiveContribution()\n}\n\nfunction syncActiveContribution() {\n  const isActive = hovered.value || focused.value\n  if (isActive && !contributedActive.value) {\n    contributedActive.value = true\n    emit('hoverStart')\n  } else if (!isActive && contributedActive.value) {\n    contributedActive.value = false\n    emit('hoverEnd')\n  }\n}\n\nfunction handleFocusIn() {\n  if (props.layout !== 'stacked') return\n  focused.value = true\n  cancelAutoClose()\n  syncActiveContribution()\n}\n\nfunction handleFocusOut(event: FocusEvent) {\n  if (props.layout !== 'stacked') return\n  const next = event.relatedTarget as Node | null\n  if (next && notificationRef.value?.contains(next)) return\n  focused.value = false\n  if (!scrollDismissActive.value) handleAutoClose()\n  syncActiveContribution()\n}\n\nfunction handlePointerDownCapture(event: PointerEvent) {\n  if (\n    props.layout === 'stacked' &&\n    (event.pointerType === 'touch' || event.pointerType === 'pen')\n  ) {\n    emit('expandRequest')\n  }\n}\n\nfunction handleMouseLeave() {\n  hovered.value = false\n  if (!scrollDismissActive.value) {\n    resetSwipe()\n    handleAutoClose()\n  }\n  syncActiveContribution()\n}\n\nwatch(scrollDismissActive, (enabled, _, onCleanup) => {\n  if (!enabled) return\n  document.addEventListener('wheel', handleWheel, { passive: false })\n  onCleanup(() => document.removeEventListener('wheel', handleWheel))\n})\n\nwatch(\n  [autoCloseDuration, active, dismissed, () => props.paused, hasAutoCloseProgress],\n  () => {\n    if (props.paused) cancelAutoClose()\n    else handleAutoClose()\n  },\n  { immediate: true },\n)\n\nonMounted(() => {\n  props.data.onOpen?.(props.data)\n  notificationRef.value?.addEventListener('wheel', handleWheel, { passive: false })\n  window.addEventListener('resize', handleResize)\n  if (notificationRef.value) {\n    emit('heightChange', notificationRef.value.offsetHeight)\n    if (typeof ResizeObserver !== 'undefined') {\n      resizeObserver = new ResizeObserver(() => {\n        if (notificationRef.value) emit('heightChange', notificationRef.value.offsetHeight)\n      })\n      resizeObserver.observe(notificationRef.value)\n    }\n  }\n})\n\nfunction handleResize() {\n  if (dismissed.value) offset.value = getExitOffset(dismissDirection.value)\n}\n\nonBeforeUnmount(() => {\n  hovered.value = false\n  focused.value = false\n  syncActiveContribution()\n  cancelAutoClose()\n  cancelHide()\n  cancelScrollDismissReset()\n  cancelPointerDrag(false)\n  notificationRef.value?.removeEventListener('wheel', handleWheel)\n  window.removeEventListener('resize', handleResize)\n  resizeObserver?.disconnect()\n})\n\nfunction setNotificationRef(node: any) {\n  notificationRef.value = node?.$el ?? node ?? null\n}\n</script>\n\n<template>\n  <div\n    v-if=\"props.renderNotification\"\n    v-bind=\"attrs\"\n    :ref=\"setNotificationRef\"\n    :style=\"notificationStyle\"\n    :role=\"(attrs.role as string) || 'alert'\"\n    :inert=\"isCollapsed || undefined\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    @focusin=\"handleFocusIn\"\n    @focusout=\"handleFocusOut\"\n    @pointerdown.capture=\"handlePointerDownCapture\"\n    @pointerdown=\"handlePointerDown\"\n  >\n    <component :is=\"renderCustomNotification\" />\n  </div>\n  <Notification\n    v-else\n    v-bind=\"{ ...attrs, ...getNotificationProps() }\"\n    :ref=\"setNotificationRef\"\n    :style=\"notificationStyle\"\n    :inert=\"isCollapsed || undefined\"\n    :with-close-button=\"isCloseDisabled ? false : props.data.withCloseButton\"\n    @close=\"handleHide\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    @focusin=\"handleFocusIn\"\n    @focusout=\"handleFocusOut\"\n    @pointerdown.capture=\"handlePointerDownCapture\"\n    @pointerdown=\"handlePointerDown\"\n  >\n    <component :is=\"renderMessage\" />\n    <div\n      v-if=\"hasAutoCloseProgress\"\n      :key=\"progressCycle\"\n      aria-hidden=\"true\"\n      v-bind=\"props.progressProps\"\n      :data-paused=\"!progressRunning || undefined\"\n      :style=\"[\n        props.progressProps.style,\n        { '--notifications-progress-duration': `${autoCloseDuration}ms` },\n      ]\"\n    />\n  </Notification>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  cloneVNode,\n  computed,\n  isVNode,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useAttrs,\n  watch,\n  type CSSProperties,\n} from 'vue'\nimport { Notification } from '@mantine-vue/core'\nimport { getAutoClose } from '../../get-auto-close/get-auto-close'\nimport type {\n  NotificationContainerEmits,\n  NotificationContainerProps,\n} from './NotificationContainer.types'\n\ndefineOptions({ name: 'NotificationContainer', inheritAttrs: false })\n\nconst props = defineProps<NotificationContainerProps>()\nconst emit = defineEmits<NotificationContainerEmits>()\nconst attrs = useAttrs()\nconst SCROLL_DISMISS_RESET_TIMEOUT = 120\nconst MAX_VISIBLE_STACK_DEPTH = 4\n\nconst notificationRef = ref<HTMLElement | null>(null)\nconst offset = ref(0)\nconst dismissed = ref(false)\nconst dismissDirection = ref<-1 | 1>(1)\nconst active = ref(false)\nconst scrollDismissActive = ref(false)\nconst hovered = ref(false)\nconst focused = ref(false)\nconst progressRunning = ref(false)\nconst progressCycle = ref(0)\nconst contributedActive = ref(false)\nconst startX = ref(0)\nconst startTime = ref(0)\nlet autoCloseTimeout = -1\nlet hideTimeout = -1\nlet scrollDismissTimeout = -1\nlet resizeObserver: ResizeObserver | undefined\n\nconst autoCloseDuration = computed(() => getAutoClose(props.autoClose, props.data.autoClose))\nconst hasAutoCloseProgress = computed(\n  () =>\n    (props.data.withAutoCloseProgress ?? props.withAutoCloseProgress) &&\n    typeof autoCloseDuration.value === 'number',\n)\nconst isCloseDisabled = computed(() => props.data.allowClose === false)\n\nfunction normalizeStyle(style: any): Record<string, any> {\n  if (!style) return {}\n  if (Array.isArray(style)) {\n    return style.reduce<Record<string, any>>(\n      (accumulator, item) => Object.assign(accumulator, normalizeStyle(item)),\n      {},\n    )\n  }\n  return typeof style === 'object' ? style : {}\n}\n\nfunction getNotificationProps() {\n  const omittedKeys = new Set([\n    'autoClose',\n    'message',\n    'allowClose',\n    'position',\n    'style',\n    'withCloseButton',\n    'onOpen',\n    'onClose',\n    'id',\n    'renderNotification',\n    'priority',\n    '__sequence',\n    'withAutoCloseProgress',\n  ])\n  return Object.fromEntries(\n    Object.entries(props.data)\n      .filter(([key]) => !omittedKeys.has(key))\n      .map(([key, value]) => [key, cloneRenderable(value)]),\n  )\n}\n\nfunction cloneRenderable(value: any): any {\n  if (isVNode(value)) return cloneVNode(value)\n  if (Array.isArray(value)) return value.map(cloneRenderable)\n  return value\n}\n\nconst renderMessage = () =>\n  cloneRenderable(\n    typeof props.data.message === 'function' ? props.data.message() : props.data.message,\n  )\n\nconst renderCustomNotification = () => cloneRenderable(props.renderNotification?.(props.data))\n\nconst notificationStyle = computed<CSSProperties>(() => {\n  const baseStyle = { ...normalizeStyle(attrs.style), ...normalizeStyle(props.data.style) }\n  const baseOpacity = typeof baseStyle.opacity === 'number' ? baseStyle.opacity : 1\n  const swipeOpacity = dismissed.value ? 0 : 1 - Math.min(Math.abs(offset.value) / 200, 1) * 0.6\n  const transitionDuration =\n    baseStyle.transitionDuration ??\n    `${props.transitionDuration}ms, ${props.transitionDuration}ms, ${props.transitionDuration}ms`\n\n  const isStackedLayout = props.layout === 'stacked'\n  const isStacked = isStackedLayout && (props.stackIndex ?? 0) > 0\n  const isCollapsed = isStacked && !props.stackExpanded\n  const isExiting = props.transitionState === 'exiting' || props.transitionState === 'exited'\n  const stackDirection = props.stackPosition?.startsWith('top') ? 1 : -1\n  const stackDepth = Math.min(props.stackIndex ?? 0, MAX_VISIBLE_STACK_DEPTH)\n  const collapsedOffset = isCollapsed ? stackDepth * 10 * stackDirection : 0\n  const staggerDelay = isStackedLayout ? (props.stackIndex ?? 0) * 30 : 0\n  const isDragging = active.value || scrollDismissActive.value\n\n  let transform =\n    'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)'\n\n  if (isStackedLayout) {\n    if (isExiting) {\n      const exitOffset = props.stackExpanded ? (props.stackExpandedOffset ?? 0) : collapsedOffset\n      transform = `translateY(${exitOffset}px) ${transform}`\n    } else if (props.stackExpanded) {\n      transform = `translateY(${props.stackExpandedOffset ?? 0}px) translate3d(var(--notifications-swipe-offset), 0, 0)`\n    } else if (isStacked) {\n      transform = `scale(${1 - stackDepth * 0.03}) translateY(${collapsedOffset}px)`\n    }\n  }\n\n  return {\n    ...baseStyle,\n    ...(isStackedLayout ? { maxHeight: undefined } : {}),\n    '--notifications-state-transform':\n      typeof baseStyle.transform === 'string' ? baseStyle.transform : 'translateX(0)',\n    '--notifications-state-opacity': String(baseOpacity),\n    '--notifications-swipe-offset': `${offset.value}px`,\n    '--notifications-swipe-opacity': String(swipeOpacity),\n    transform,\n    opacity: 'calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))',\n    transitionDuration: isDragging ? '0ms, 0ms, 0ms' : transitionDuration,\n    cursor: 'default',\n    touchAction: 'pan-y',\n    ...(isStackedLayout\n      ? {\n          gridArea: '1 / 1',\n          zIndex: (props.stackSize ?? 5) - (props.stackIndex ?? 0),\n          pointerEvents: isCollapsed ? ('none' as const) : undefined,\n          alignSelf: stackDirection === 1 ? ('start' as const) : ('end' as const),\n          transition: isDragging\n            ? 'none'\n            : `transform ${props.transitionDuration}ms cubic-bezier(.51,.3,0,1.21), opacity ${props.transitionDuration}ms ease`,\n          transitionDelay: isDragging || isExiting ? '0ms' : `${staggerDelay}ms`,\n        }\n      : {}),\n  }\n})\n\nconst isCollapsed = computed(\n  () => props.layout === 'stacked' && (props.stackIndex ?? 0) > 0 && !props.stackExpanded,\n)\n\nconst cancelAutoClose = () => {\n  window.clearTimeout(autoCloseTimeout)\n  progressRunning.value = false\n}\nconst cancelHide = () => window.clearTimeout(hideTimeout)\nconst cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout)\n\nfunction handleHide() {\n  emit('hide', props.data.id!)\n  cancelAutoClose()\n  cancelHide()\n  cancelScrollDismissReset()\n}\n\nfunction handleAutoClose() {\n  if (\n    typeof window === 'undefined' ||\n    dismissed.value ||\n    active.value ||\n    props.paused ||\n    hovered.value ||\n    focused.value ||\n    typeof autoCloseDuration.value !== 'number'\n  )\n    return\n\n  cancelAutoClose()\n  autoCloseTimeout = window.setTimeout(handleHide, autoCloseDuration.value)\n  if (hasAutoCloseProgress.value) {\n    progressCycle.value += 1\n    progressRunning.value = true\n  }\n}\n\nfunction getExitOffset(direction: -1 | 1) {\n  return direction * ((notificationRef.value?.offsetWidth ?? 440) + 40)\n}\n\nfunction shouldDismiss(movement: number, velocity: number) {\n  return Math.abs(movement) > (notificationRef.value?.offsetWidth ?? 440) * 0.35 || velocity > 0.5\n}\n\nfunction resetSwipe() {\n  cancelScrollDismissReset()\n  scrollDismissActive.value = false\n  offset.value = 0\n}\n\nfunction dismissNotification(direction: -1 | 1) {\n  dismissDirection.value = direction\n  dismissed.value = true\n  scrollDismissActive.value = false\n  offset.value = getExitOffset(direction)\n  cancelAutoClose()\n  cancelHide()\n  cancelScrollDismissReset()\n  hideTimeout = window.setTimeout(handleHide, props.transitionDuration)\n}\n\nfunction scheduleScrollDismissReset() {\n  cancelScrollDismissReset()\n  scrollDismissTimeout = window.setTimeout(() => {\n    scrollDismissActive.value = false\n    offset.value = 0\n    handleAutoClose()\n  }, SCROLL_DISMISS_RESET_TIMEOUT)\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n  if (active.value && !dismissed.value) offset.value = event.clientX - startX.value\n}\n\nfunction finishPointerDrag(event: PointerEvent) {\n  if (!active.value) return\n  active.value = false\n  removePointerListeners()\n  const movement = event.clientX - startX.value\n  const velocity = Math.abs(movement) / Math.max(Date.now() - startTime.value, 1)\n  if (shouldDismiss(movement, velocity)) dismissNotification(movement >= 0 ? 1 : -1)\n  else {\n    offset.value = 0\n    handleAutoClose()\n  }\n}\n\nfunction removePointerListeners() {\n  window.removeEventListener('pointermove', handlePointerMove)\n  window.removeEventListener('pointerup', finishPointerDrag)\n  window.removeEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction cancelPointerDrag(restartAutoClose = true) {\n  active.value = false\n  removePointerListeners()\n  offset.value = 0\n  if (restartAutoClose) handleAutoClose()\n}\n\nconst cancelPointerDragEvent = () => cancelPointerDrag()\n\nfunction handlePointerDown(event: PointerEvent) {\n  if (!props.allowDragDismiss || isCloseDisabled.value || dismissed.value || event.button !== 0)\n    return\n  cancelAutoClose()\n  active.value = true\n  startX.value = event.clientX\n  startTime.value = Date.now()\n  window.addEventListener('pointermove', handlePointerMove)\n  window.addEventListener('pointerup', finishPointerDrag)\n  window.addEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction handleWheel(event: WheelEvent) {\n  if (dismissed.value || active.value) return\n  const documentEvent = event.currentTarget === document\n  if ((!documentEvent && !hovered.value) || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return\n  if (!props.allowScrollDismiss || isCloseDisabled.value) return\n  if (!documentEvent) {\n    event.preventDefault()\n    event.stopPropagation()\n  }\n  cancelAutoClose()\n  scrollDismissActive.value = true\n  const nextOffset = offset.value - event.deltaX\n  if (shouldDismiss(nextOffset, 0)) dismissNotification(nextOffset > 0 ? 1 : -1)\n  else {\n    offset.value = nextOffset\n    scheduleScrollDismissReset()\n  }\n}\n\nfunction handleMouseEnter() {\n  hovered.value = true\n  cancelAutoClose()\n  syncActiveContribution()\n}\n\nfunction syncActiveContribution() {\n  const isActive = hovered.value || focused.value\n  if (isActive && !contributedActive.value) {\n    contributedActive.value = true\n    emit('hoverStart')\n  } else if (!isActive && contributedActive.value) {\n    contributedActive.value = false\n    emit('hoverEnd')\n  }\n}\n\nfunction handleFocusIn() {\n  if (props.layout !== 'stacked') return\n  focused.value = true\n  cancelAutoClose()\n  syncActiveContribution()\n}\n\nfunction handleFocusOut(event: FocusEvent) {\n  if (props.layout !== 'stacked') return\n  const next = event.relatedTarget as Node | null\n  if (next && notificationRef.value?.contains(next)) return\n  focused.value = false\n  if (!scrollDismissActive.value) handleAutoClose()\n  syncActiveContribution()\n}\n\nfunction handlePointerDownCapture(event: PointerEvent) {\n  if (\n    props.layout === 'stacked' &&\n    (event.pointerType === 'touch' || event.pointerType === 'pen')\n  ) {\n    emit('expandRequest')\n  }\n}\n\nfunction handleMouseLeave() {\n  hovered.value = false\n  if (!scrollDismissActive.value) {\n    resetSwipe()\n    handleAutoClose()\n  }\n  syncActiveContribution()\n}\n\nwatch(scrollDismissActive, (enabled, _, onCleanup) => {\n  if (!enabled) return\n  document.addEventListener('wheel', handleWheel, { passive: false })\n  onCleanup(() => document.removeEventListener('wheel', handleWheel))\n})\n\nwatch(\n  [autoCloseDuration, active, dismissed, () => props.paused, hasAutoCloseProgress],\n  () => {\n    if (props.paused) cancelAutoClose()\n    else handleAutoClose()\n  },\n  { immediate: true },\n)\n\nonMounted(() => {\n  props.data.onOpen?.(props.data)\n  notificationRef.value?.addEventListener('wheel', handleWheel, { passive: false })\n  window.addEventListener('resize', handleResize)\n  if (notificationRef.value) {\n    emit('heightChange', notificationRef.value.offsetHeight)\n    if (typeof ResizeObserver !== 'undefined') {\n      resizeObserver = new ResizeObserver(() => {\n        if (notificationRef.value) emit('heightChange', notificationRef.value.offsetHeight)\n      })\n      resizeObserver.observe(notificationRef.value)\n    }\n  }\n})\n\nfunction handleResize() {\n  if (dismissed.value) offset.value = getExitOffset(dismissDirection.value)\n}\n\nonBeforeUnmount(() => {\n  hovered.value = false\n  focused.value = false\n  syncActiveContribution()\n  cancelAutoClose()\n  cancelHide()\n  cancelScrollDismissReset()\n  cancelPointerDrag(false)\n  notificationRef.value?.removeEventListener('wheel', handleWheel)\n  window.removeEventListener('resize', handleResize)\n  resizeObserver?.disconnect()\n})\n\nfunction setNotificationRef(node: any) {\n  notificationRef.value = node?.$el ?? node ?? null\n}\n</script>\n\n<template>\n  <div\n    v-if=\"props.renderNotification\"\n    v-bind=\"attrs\"\n    :ref=\"setNotificationRef\"\n    :style=\"notificationStyle\"\n    :role=\"(attrs.role as string) || 'alert'\"\n    :inert=\"isCollapsed || undefined\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    @focusin=\"handleFocusIn\"\n    @focusout=\"handleFocusOut\"\n    @pointerdown.capture=\"handlePointerDownCapture\"\n    @pointerdown=\"handlePointerDown\"\n  >\n    <component :is=\"renderCustomNotification\" />\n  </div>\n  <Notification\n    v-else\n    v-bind=\"{ ...attrs, ...getNotificationProps() }\"\n    :ref=\"setNotificationRef\"\n    :style=\"notificationStyle\"\n    :inert=\"isCollapsed || undefined\"\n    :with-close-button=\"isCloseDisabled ? false : props.data.withCloseButton\"\n    @close=\"handleHide\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    @focusin=\"handleFocusIn\"\n    @focusout=\"handleFocusOut\"\n    @pointerdown.capture=\"handlePointerDownCapture\"\n    @pointerdown=\"handlePointerDown\"\n  >\n    <component :is=\"renderMessage\" />\n    <div\n      v-if=\"hasAutoCloseProgress\"\n      :key=\"progressCycle\"\n      aria-hidden=\"true\"\n      v-bind=\"props.progressProps\"\n      :data-paused=\"!progressRunning || undefined\"\n      :style=\"[\n        props.progressProps.style,\n        { '--notifications-progress-duration': `${autoCloseDuration}ms` },\n      ]\"\n    />\n  </Notification>\n</template>\n","import type { NotificationData, NotificationPosition } from '../notifications.store'\n\nexport type GroupedNotifications = Record<NotificationPosition, NotificationData[]>\n\nexport const positions: NotificationPosition[] = [\n  'bottom-center',\n  'bottom-left',\n  'bottom-right',\n  'top-center',\n  'top-left',\n  'top-right',\n]\n\nexport function getGroupedNotifications(\n  notifications: NotificationData[],\n  defaultPosition: NotificationPosition,\n) {\n  return notifications.reduce<GroupedNotifications>(\n    (acc, notification) => {\n      acc[notification.position || defaultPosition].push(notification)\n      return acc\n    },\n    positions.reduce<GroupedNotifications>((acc, item) => {\n      acc[item] = []\n      return acc\n    }, {} as GroupedNotifications),\n  )\n}\n","import type { CSSProperties } from 'vue'\nimport type { NotificationPosition } from './notifications.store'\n\nexport type NotificationTransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited'\n\ninterface NotificationStateStylesProps {\n  state: NotificationTransitionStatus\n  maxHeight: number | string\n  position: NotificationPosition\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\nfunction toCssLength(value: number | string): string {\n  return typeof value === 'number' ? `${value}px` : value\n}\n\nexport function getNotificationStateStyles({\n  state,\n  maxHeight,\n  position,\n  transitionDuration,\n}: NotificationStateStylesProps): CSSProperties {\n  const [vertical, horizontal] = position.split('-')\n  const property = (\n    horizontal === 'center' ? `${vertical}-center` : horizontal\n  ) as keyof typeof transforms\n\n  const commonStyles: CSSProperties = {\n    opacity: 0,\n    maxHeight: toCssLength(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: CSSProperties = {\n    opacity: 1,\n    transform: noTransform[property],\n  }\n\n  const outState: CSSProperties = {\n    opacity: 0,\n    maxHeight: toCssLength(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",".root {\n  width: calc(100% - var(--mantine-spacing-md) * 2);\n  position: fixed;\n  z-index: var(--notifications-z-index);\n  max-width: var(--notifications-container-width);\n\n  &:where([data-position='top-center']) {\n    top: var(--mantine-spacing-md);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &:where([data-position='top-left']) {\n    top: var(--mantine-spacing-md);\n    left: var(--mantine-spacing-md);\n  }\n\n  &:where([data-position='top-right']) {\n    top: var(--mantine-spacing-md);\n    right: var(--mantine-spacing-md);\n  }\n\n  &:where([data-position='bottom-center']) {\n    bottom: var(--mantine-spacing-md);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &:where([data-position='bottom-left']) {\n    bottom: var(--mantine-spacing-md);\n    left: var(--mantine-spacing-md);\n  }\n\n  &:where([data-position='bottom-right']) {\n    bottom: var(--mantine-spacing-md);\n    right: var(--mantine-spacing-md);\n  }\n}\n\n.notification {\n  &:where(& + &) {\n    margin-top: var(--mantine-spacing-md);\n  }\n\n  :where([data-layout='stacked']) & {\n    margin-top: 0;\n  }\n}\n\n.root:where([data-layout='stacked']) {\n  & > * {\n    display: grid;\n  }\n}\n\n.progress {\n  position: absolute;\n  bottom: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  height: 3px;\n  background-color: var(--notification-color);\n  transform: scaleX(0);\n  transform-origin: left center;\n  transition: opacity 200ms ease;\n  animation:\n    notifications-progress var(--notifications-progress-duration) linear forwards,\n    notifications-progress-fade-in 200ms ease;\n\n  @mixin rtl {\n    transform-origin: right center;\n  }\n\n  &:where([data-paused]) {\n    opacity: 0;\n    animation-play-state: paused, running;\n  }\n}\n\n@keyframes notifications-progress {\n  from {\n    transform: scaleX(0);\n  }\n\n  to {\n    transform: scaleX(1);\n  }\n}\n\n@keyframes notifications-progress-fade-in {\n  from {\n    opacity: 0;\n  }\n}\n","<script lang=\"ts\">\nimport { createVarsResolver, rem } from '@mantine-vue/core'\n\nconst varsResolver = createVarsResolver<any>((_, { zIndex, containerWidth }) => ({\n  root: {\n    '--notifications-z-index': zIndex?.toString(),\n    '--notifications-container-width': rem(containerWidth),\n  },\n}))\n\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch } from 'vue'\nimport {\n  Box,\n  OptionalPortal,\n  getDefaultZIndex,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine-vue/core'\nimport { useReducedMotion } from '@mantine-vue/hooks'\nimport NotificationContainer from '../NotificationContainer/NotificationContainer.vue'\nimport {\n  getGroupedNotifications,\n  positions,\n} from '../../get-grouped-notifications/get-grouped-notifications'\nimport { getNotificationStateStyles } from '../../get-notification-state-styles'\nimport { hideNotification, notificationsStore, useNotifications } from '../../notifications.store'\nimport type {\n  NotificationData,\n  NotificationPosition,\n  SequencedNotificationData,\n} from '../../notifications.store'\nimport type { NotificationsProps } from './Notifications.types'\nimport classes from '../../Notifications.module.css'\n\ndefineOptions({ name: 'Notifications', inheritAttrs: false })\n\nconst rawProps = withDefaults(defineProps<NotificationsProps>(), {\n  position: 'bottom-right',\n  autoClose: 4000,\n  transitionDuration: 250,\n  allowDragDismiss: true,\n  allowScrollDismiss: true,\n  containerWidth: 440,\n  notificationMaxHeight: 200,\n  limit: 5,\n  zIndex: () => getDefaultZIndex('overlay'),\n  store: () => notificationsStore,\n  withinPortal: true,\n  pauseResetOnHover: 'all',\n  layout: 'default',\n  withAutoCloseProgress: false,\n})\nconst attrs = useAttrs()\nconst props = useProps('Notifications', null, rawProps)\nconst theme = useMantineTheme()\nconst shouldReduceMotion = useReducedMotion()\nconst STACK_EXPANDED_GAP = 16\nconst FALLBACK_NOTIFICATION_HEIGHT = 80\nconst hoveredCounts = ref<Partial<Record<NotificationPosition, number>>>({})\nconst hoveredGroups = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst expandedPositions = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst pinnedPosition = ref<NotificationPosition | null>(null)\nconst notificationHeights = ref<Record<string, number>>({})\nconst collapseTimeouts: Partial<Record<NotificationPosition, number>> = {}\nconst data = useNotifications(props.store)\nconst duration = computed(() =>\n  theme.value.respectReducedMotion && shouldReduceMotion.value ? 1 : props.transitionDuration,\n)\nconst grouped = computed(() => getGroupedNotifications(data.value.notifications, props.position))\nconst hoveredCount = computed(\n  () =>\n    Object.values(hoveredCounts.value).reduce((sum, value) => sum + (value ?? 0), 0) +\n    Object.values(hoveredGroups.value).filter(Boolean).length,\n)\n\nconst getStyles = useStyles({\n  name: 'Notifications',\n  classes,\n  props,\n  attrs,\n  classNames: props.classNames as any,\n  styles: props.styles as any,\n  unstyled: props.unstyled,\n  vars: props.vars as any,\n  varsResolver,\n})\n\nwatch(\n  () => [props.limit, props.position, props.store] as const,\n  () => {\n    props.store.setState((current) => ({\n      ...current,\n      limit: props.limit || 5,\n      defaultPosition: props.position,\n    }))\n  },\n  { immediate: true },\n)\n\nfunction applyTransitionStyles(\n  element: Element,\n  state: 'entered' | 'exited' | 'exiting',\n  position: NotificationPosition,\n) {\n  Object.assign(\n    (element as HTMLElement).style,\n    getNotificationStateStyles({\n      state,\n      position,\n      transitionDuration: duration.value,\n      maxHeight: props.notificationMaxHeight,\n    }),\n  )\n}\n\nfunction enter(element: Element, done: () => void, position: NotificationPosition) {\n  void (element as HTMLElement).offsetHeight\n  applyTransitionStyles(element, 'entered', position)\n  window.setTimeout(done, duration.value)\n}\n\nfunction leave(element: Element, done: () => void, position: NotificationPosition) {\n  applyTransitionStyles(element, 'exiting', position)\n  window.setTimeout(done, duration.value)\n}\n\nfunction notificationData(notification: NotificationData) {\n  const data = { ...notification }\n  delete data.style\n  return data\n}\n\nfunction isStackExpanded(position: NotificationPosition) {\n  return props.layout === 'stacked' && Boolean(expandedPositions.value[position])\n}\n\nfunction orderedGroup(position: NotificationPosition) {\n  const items = grouped.value[position]\n  if (props.layout !== 'stacked') return items\n  return [...(items as SequencedNotificationData[])].sort(\n    (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (b.__sequence ?? 0) - (a.__sequence ?? 0),\n  )\n}\n\nfunction expandedOffset(position: NotificationPosition, index: number) {\n  if (!isStackExpanded(position)) return 0\n  const direction = position.startsWith('top') ? 1 : -1\n  return (\n    orderedGroup(position)\n      .slice(0, index)\n      .reduce(\n        (sum, item) =>\n          sum +\n          (notificationHeights.value[item.id!] ?? FALLBACK_NOTIFICATION_HEIGHT) +\n          STACK_EXPANDED_GAP,\n        0,\n      ) * direction\n  )\n}\n\nfunction setExpanded(position: NotificationPosition, expanded: boolean) {\n  expandedPositions.value = { ...expandedPositions.value, [position]: expanded }\n}\n\nfunction scheduleCollapse(position: NotificationPosition) {\n  window.clearTimeout(collapseTimeouts[position])\n  if (\n    (hoveredCounts.value[position] ?? 0) > 0 ||\n    hoveredGroups.value[position] ||\n    pinnedPosition.value === position\n  )\n    return\n  collapseTimeouts[position] = window.setTimeout(() => setExpanded(position, false), 200)\n}\n\nfunction handleHoverStart(position: NotificationPosition) {\n  hoveredCounts.value = {\n    ...hoveredCounts.value,\n    [position]: (hoveredCounts.value[position] ?? 0) + 1,\n  }\n  if (props.layout === 'stacked') setExpanded(position, true)\n}\n\nfunction handleHoverEnd(position: NotificationPosition) {\n  hoveredCounts.value = {\n    ...hoveredCounts.value,\n    [position]: Math.max(0, (hoveredCounts.value[position] ?? 0) - 1),\n  }\n  if (props.layout === 'stacked') scheduleCollapse(position)\n}\n\nfunction handleGroupHover(position: NotificationPosition, hovered: boolean) {\n  if (props.layout !== 'stacked') return\n  hoveredGroups.value = { ...hoveredGroups.value, [position]: hovered }\n  if (hovered) {\n    window.clearTimeout(collapseTimeouts[position])\n    setExpanded(position, true)\n  } else scheduleCollapse(position)\n}\n\nfunction handleExpandRequest(position: NotificationPosition) {\n  pinnedPosition.value = position\n  setExpanded(position, true)\n}\n\nfunction handleDocumentPointerDown(event: PointerEvent) {\n  if (!pinnedPosition.value) return\n  const target = event.target as Element | null\n  if (!target?.closest(`[data-notifications-position=\"${pinnedPosition.value}\"]`)) {\n    const previous = pinnedPosition.value\n    pinnedPosition.value = null\n    scheduleCollapse(previous)\n  }\n}\n\nwatch(\n  () => props.layout,\n  (layout) => {\n    if (layout !== 'stacked') {\n      pinnedPosition.value = null\n      hoveredGroups.value = {}\n      expandedPositions.value = {}\n    }\n  },\n)\n\nwatch(grouped, (groups) => {\n  if (pinnedPosition.value && groups[pinnedPosition.value].length === 0) {\n    pinnedPosition.value = null\n  }\n})\n\nonMounted(() => document.addEventListener('pointerdown', handleDocumentPointerDown))\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', handleDocumentPointerDown)\n  positions.forEach((position) => window.clearTimeout(collapseTimeouts[position]))\n})\n</script>\n\n<template>\n  <OptionalPortal v-bind=\"props.portalProps\" :within-portal=\"props.withinPortal\">\n    <Box\n      v-for=\"position in positions\"\n      :key=\"position\"\n      v-bind=\"{ ...attrs, ...getStyles('root') }\"\n      :data-position=\"position\"\n      :data-notifications-position=\"position\"\n      :data-layout=\"props.layout\"\n    >\n      <TransitionGroup\n        tag=\"div\"\n        :css=\"false\"\n        @mouseenter=\"handleGroupHover(position, true)\"\n        @mouseleave=\"handleGroupHover(position, false)\"\n        @focusin=\"handleGroupHover(position, true)\"\n        @focusout=\"handleGroupHover(position, false)\"\n        @before-enter=\"(element) => applyTransitionStyles(element, 'exited', position)\"\n        @enter=\"(element, done) => enter(element, done, position)\"\n        @leave=\"(element, done) => leave(element, done, position)\"\n      >\n        <NotificationContainer\n          v-for=\"(notification, stackIndex) in orderedGroup(position)\"\n          :key=\"notification.id\"\n          v-bind=\"getStyles('notification', { style: notification.style })\"\n          :data=\"notificationData(notification)\"\n          :auto-close=\"props.autoClose\"\n          :transition-duration=\"duration\"\n          :allow-drag-dismiss=\"props.allowDragDismiss\"\n          :allow-scroll-dismiss=\"props.allowScrollDismiss\"\n          :paused=\"\n            (props.pauseResetOnHover === 'all' && hoveredCount > 0) ||\n            (props.layout === 'stacked' && !isStackExpanded(position) && stackIndex > 0)\n          \"\n          :render-notification=\"\n            'renderNotification' in notification\n              ? notification.renderNotification\n              : props.renderNotification\n          \"\n          :layout=\"props.layout\"\n          :with-auto-close-progress=\"props.withAutoCloseProgress\"\n          :progress-props=\"getStyles('progress')\"\n          :stack-index=\"stackIndex\"\n          :stack-size=\"orderedGroup(position).length\"\n          :stack-position=\"position\"\n          :stack-expanded=\"isStackExpanded(position)\"\n          :stack-expanded-offset=\"expandedOffset(position, stackIndex)\"\n          transition-state=\"entered\"\n          @hide=\"(id) => hideNotification(id, props.store)\"\n          @hover-start=\"handleHoverStart(position)\"\n          @hover-end=\"handleHoverEnd(position)\"\n          @expand-request=\"handleExpandRequest(position)\"\n          @height-change=\"\n            (height) =>\n              (notificationHeights = { ...notificationHeights, [notification.id!]: height })\n          \"\n        />\n      </TransitionGroup>\n    </Box>\n  </OptionalPortal>\n</template>\n","<script lang=\"ts\">\nimport { createVarsResolver, rem } from '@mantine-vue/core'\n\nconst varsResolver = createVarsResolver<any>((_, { zIndex, containerWidth }) => ({\n  root: {\n    '--notifications-z-index': zIndex?.toString(),\n    '--notifications-container-width': rem(containerWidth),\n  },\n}))\n\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch } from 'vue'\nimport {\n  Box,\n  OptionalPortal,\n  getDefaultZIndex,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine-vue/core'\nimport { useReducedMotion } from '@mantine-vue/hooks'\nimport NotificationContainer from '../NotificationContainer/NotificationContainer.vue'\nimport {\n  getGroupedNotifications,\n  positions,\n} from '../../get-grouped-notifications/get-grouped-notifications'\nimport { getNotificationStateStyles } from '../../get-notification-state-styles'\nimport { hideNotification, notificationsStore, useNotifications } from '../../notifications.store'\nimport type {\n  NotificationData,\n  NotificationPosition,\n  SequencedNotificationData,\n} from '../../notifications.store'\nimport type { NotificationsProps } from './Notifications.types'\nimport classes from '../../Notifications.module.css'\n\ndefineOptions({ name: 'Notifications', inheritAttrs: false })\n\nconst rawProps = withDefaults(defineProps<NotificationsProps>(), {\n  position: 'bottom-right',\n  autoClose: 4000,\n  transitionDuration: 250,\n  allowDragDismiss: true,\n  allowScrollDismiss: true,\n  containerWidth: 440,\n  notificationMaxHeight: 200,\n  limit: 5,\n  zIndex: () => getDefaultZIndex('overlay'),\n  store: () => notificationsStore,\n  withinPortal: true,\n  pauseResetOnHover: 'all',\n  layout: 'default',\n  withAutoCloseProgress: false,\n})\nconst attrs = useAttrs()\nconst props = useProps('Notifications', null, rawProps)\nconst theme = useMantineTheme()\nconst shouldReduceMotion = useReducedMotion()\nconst STACK_EXPANDED_GAP = 16\nconst FALLBACK_NOTIFICATION_HEIGHT = 80\nconst hoveredCounts = ref<Partial<Record<NotificationPosition, number>>>({})\nconst hoveredGroups = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst expandedPositions = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst pinnedPosition = ref<NotificationPosition | null>(null)\nconst notificationHeights = ref<Record<string, number>>({})\nconst collapseTimeouts: Partial<Record<NotificationPosition, number>> = {}\nconst data = useNotifications(props.store)\nconst duration = computed(() =>\n  theme.value.respectReducedMotion && shouldReduceMotion.value ? 1 : props.transitionDuration,\n)\nconst grouped = computed(() => getGroupedNotifications(data.value.notifications, props.position))\nconst hoveredCount = computed(\n  () =>\n    Object.values(hoveredCounts.value).reduce((sum, value) => sum + (value ?? 0), 0) +\n    Object.values(hoveredGroups.value).filter(Boolean).length,\n)\n\nconst getStyles = useStyles({\n  name: 'Notifications',\n  classes,\n  props,\n  attrs,\n  classNames: props.classNames as any,\n  styles: props.styles as any,\n  unstyled: props.unstyled,\n  vars: props.vars as any,\n  varsResolver,\n})\n\nwatch(\n  () => [props.limit, props.position, props.store] as const,\n  () => {\n    props.store.setState((current) => ({\n      ...current,\n      limit: props.limit || 5,\n      defaultPosition: props.position,\n    }))\n  },\n  { immediate: true },\n)\n\nfunction applyTransitionStyles(\n  element: Element,\n  state: 'entered' | 'exited' | 'exiting',\n  position: NotificationPosition,\n) {\n  Object.assign(\n    (element as HTMLElement).style,\n    getNotificationStateStyles({\n      state,\n      position,\n      transitionDuration: duration.value,\n      maxHeight: props.notificationMaxHeight,\n    }),\n  )\n}\n\nfunction enter(element: Element, done: () => void, position: NotificationPosition) {\n  void (element as HTMLElement).offsetHeight\n  applyTransitionStyles(element, 'entered', position)\n  window.setTimeout(done, duration.value)\n}\n\nfunction leave(element: Element, done: () => void, position: NotificationPosition) {\n  applyTransitionStyles(element, 'exiting', position)\n  window.setTimeout(done, duration.value)\n}\n\nfunction notificationData(notification: NotificationData) {\n  const data = { ...notification }\n  delete data.style\n  return data\n}\n\nfunction isStackExpanded(position: NotificationPosition) {\n  return props.layout === 'stacked' && Boolean(expandedPositions.value[position])\n}\n\nfunction orderedGroup(position: NotificationPosition) {\n  const items = grouped.value[position]\n  if (props.layout !== 'stacked') return items\n  return [...(items as SequencedNotificationData[])].sort(\n    (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (b.__sequence ?? 0) - (a.__sequence ?? 0),\n  )\n}\n\nfunction expandedOffset(position: NotificationPosition, index: number) {\n  if (!isStackExpanded(position)) return 0\n  const direction = position.startsWith('top') ? 1 : -1\n  return (\n    orderedGroup(position)\n      .slice(0, index)\n      .reduce(\n        (sum, item) =>\n          sum +\n          (notificationHeights.value[item.id!] ?? FALLBACK_NOTIFICATION_HEIGHT) +\n          STACK_EXPANDED_GAP,\n        0,\n      ) * direction\n  )\n}\n\nfunction setExpanded(position: NotificationPosition, expanded: boolean) {\n  expandedPositions.value = { ...expandedPositions.value, [position]: expanded }\n}\n\nfunction scheduleCollapse(position: NotificationPosition) {\n  window.clearTimeout(collapseTimeouts[position])\n  if (\n    (hoveredCounts.value[position] ?? 0) > 0 ||\n    hoveredGroups.value[position] ||\n    pinnedPosition.value === position\n  )\n    return\n  collapseTimeouts[position] = window.setTimeout(() => setExpanded(position, false), 200)\n}\n\nfunction handleHoverStart(position: NotificationPosition) {\n  hoveredCounts.value = {\n    ...hoveredCounts.value,\n    [position]: (hoveredCounts.value[position] ?? 0) + 1,\n  }\n  if (props.layout === 'stacked') setExpanded(position, true)\n}\n\nfunction handleHoverEnd(position: NotificationPosition) {\n  hoveredCounts.value = {\n    ...hoveredCounts.value,\n    [position]: Math.max(0, (hoveredCounts.value[position] ?? 0) - 1),\n  }\n  if (props.layout === 'stacked') scheduleCollapse(position)\n}\n\nfunction handleGroupHover(position: NotificationPosition, hovered: boolean) {\n  if (props.layout !== 'stacked') return\n  hoveredGroups.value = { ...hoveredGroups.value, [position]: hovered }\n  if (hovered) {\n    window.clearTimeout(collapseTimeouts[position])\n    setExpanded(position, true)\n  } else scheduleCollapse(position)\n}\n\nfunction handleExpandRequest(position: NotificationPosition) {\n  pinnedPosition.value = position\n  setExpanded(position, true)\n}\n\nfunction handleDocumentPointerDown(event: PointerEvent) {\n  if (!pinnedPosition.value) return\n  const target = event.target as Element | null\n  if (!target?.closest(`[data-notifications-position=\"${pinnedPosition.value}\"]`)) {\n    const previous = pinnedPosition.value\n    pinnedPosition.value = null\n    scheduleCollapse(previous)\n  }\n}\n\nwatch(\n  () => props.layout,\n  (layout) => {\n    if (layout !== 'stacked') {\n      pinnedPosition.value = null\n      hoveredGroups.value = {}\n      expandedPositions.value = {}\n    }\n  },\n)\n\nwatch(grouped, (groups) => {\n  if (pinnedPosition.value && groups[pinnedPosition.value].length === 0) {\n    pinnedPosition.value = null\n  }\n})\n\nonMounted(() => document.addEventListener('pointerdown', handleDocumentPointerDown))\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', handleDocumentPointerDown)\n  positions.forEach((position) => window.clearTimeout(collapseTimeouts[position]))\n})\n</script>\n\n<template>\n  <OptionalPortal v-bind=\"props.portalProps\" :within-portal=\"props.withinPortal\">\n    <Box\n      v-for=\"position in positions\"\n      :key=\"position\"\n      v-bind=\"{ ...attrs, ...getStyles('root') }\"\n      :data-position=\"position\"\n      :data-notifications-position=\"position\"\n      :data-layout=\"props.layout\"\n    >\n      <TransitionGroup\n        tag=\"div\"\n        :css=\"false\"\n        @mouseenter=\"handleGroupHover(position, true)\"\n        @mouseleave=\"handleGroupHover(position, false)\"\n        @focusin=\"handleGroupHover(position, true)\"\n        @focusout=\"handleGroupHover(position, false)\"\n        @before-enter=\"(element) => applyTransitionStyles(element, 'exited', position)\"\n        @enter=\"(element, done) => enter(element, done, position)\"\n        @leave=\"(element, done) => leave(element, done, position)\"\n      >\n        <NotificationContainer\n          v-for=\"(notification, stackIndex) in orderedGroup(position)\"\n          :key=\"notification.id\"\n          v-bind=\"getStyles('notification', { style: notification.style })\"\n          :data=\"notificationData(notification)\"\n          :auto-close=\"props.autoClose\"\n          :transition-duration=\"duration\"\n          :allow-drag-dismiss=\"props.allowDragDismiss\"\n          :allow-scroll-dismiss=\"props.allowScrollDismiss\"\n          :paused=\"\n            (props.pauseResetOnHover === 'all' && hoveredCount > 0) ||\n            (props.layout === 'stacked' && !isStackExpanded(position) && stackIndex > 0)\n          \"\n          :render-notification=\"\n            'renderNotification' in notification\n              ? notification.renderNotification\n              : props.renderNotification\n          \"\n          :layout=\"props.layout\"\n          :with-auto-close-progress=\"props.withAutoCloseProgress\"\n          :progress-props=\"getStyles('progress')\"\n          :stack-index=\"stackIndex\"\n          :stack-size=\"orderedGroup(position).length\"\n          :stack-position=\"position\"\n          :stack-expanded=\"isStackExpanded(position)\"\n          :stack-expanded-offset=\"expandedOffset(position, stackIndex)\"\n          transition-state=\"entered\"\n          @hide=\"(id) => hideNotification(id, props.store)\"\n          @hover-start=\"handleHoverStart(position)\"\n          @hover-end=\"handleHoverEnd(position)\"\n          @expand-request=\"handleExpandRequest(position)\"\n          @height-change=\"\n            (height) =>\n              (notificationHeights = { ...notificationHeights, [notification.id!]: height })\n          \"\n        />\n      </TransitionGroup>\n    </Box>\n  </OptionalPortal>\n</template>\n","import NotificationsComponent, { varsResolver } from './Notifications.vue'\nimport { notifications } from '../../notifications.store'\nimport classes from '../../Notifications.module.css'\n\nexport const Notifications = Object.assign(NotificationsComponent, {\n  classes,\n  varsResolver,\n  show: notifications.show,\n  hide: notifications.hide,\n  update: notifications.update,\n  promise: notifications.promise,\n  clean: notifications.clean,\n  cleanQueue: notifications.cleanQueue,\n  updateState: notifications.updateState,\n})\n\nexport type {\n  NotificationsCssVariables,\n  NotificationsProps,\n  NotificationsStylesNames,\n} from './Notifications.types'\n"],"mappings":"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"}

package/lib/components/NotificationContainer/NotificationContainer.types.d.ts

@@ -14,6 +14,10 @@ export interface NotificationContainerProps {
     allowScrollDismiss: boolean;
     /** Pauses the auto-close timer. */
     paused: boolean;
+    /** Default visibility of the auto-close progress line. */
+    withAutoCloseProgress: boolean;
+    /** Styles API props applied to the progress line. */
+    progressProps: Record<string, any>;
     /** Custom renderer used instead of the default Notification component. */
     renderNotification?: ((notification: NotificationData) => VNodeChild) | null;
     /** Notification layout inherited from the notifications container. */