@mantine/notifications/cjs/NotificationContainer.cjs.map

Mantine notifications system

{"version":3,"file":"NotificationContainer.cjs","names":["getAutoClose","Notification"],"sources":["../src/NotificationContainer.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { getStyleObject, Notification, NotificationProps, useMantineTheme } from '@mantine/core';\nimport { useDrag, useMergedRef } from '@mantine/hooks';\nimport { getAutoClose } from './get-auto-close/get-auto-close';\nimport { NotificationData } from './notifications.store';\n\nconst SCROLL_DISMISS_RESET_TIMEOUT = 120;\n\ninterface NotificationContainerProps extends NotificationProps {\n  data: NotificationData;\n  onHide: (id: string) => void;\n  autoClose: number | false;\n  transitionDuration: number;\n  allowDragDismiss: boolean;\n  allowScrollDismiss: boolean;\n  paused: boolean;\n  onHoverStart?: () => void;\n  onHoverEnd?: () => void;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nexport function NotificationContainer({\n  data,\n  onHide,\n  autoClose,\n  transitionDuration,\n  allowDragDismiss,\n  allowScrollDismiss,\n  paused,\n  onHoverStart,\n  onHoverEnd,\n  ref,\n  style,\n  ...others\n}: NotificationContainerProps) {\n  const [offset, setOffset] = useState(0);\n  const [dismissed, setDismissed] = useState(false);\n  const [dismissDirection, setDismissDirection] = useState<-1 | 1>(1);\n  const [scrollDismissActive, setScrollDismissActive] = useState(false);\n  const theme = useMantineTheme();\n  const {\n    autoClose: _autoClose,\n    message,\n    allowClose,\n    position: _position,\n    style: dataStyle,\n    withCloseButton,\n    onOpen: _onOpen,\n    ...notificationProps\n  } = data;\n  const autoCloseDuration = getAutoClose(autoClose, data.autoClose);\n  const autoCloseTimeout = useRef<number>(-1);\n  const hideTimeout = useRef<number>(-1);\n  const scrollDismissTimeout = useRef<number>(-1);\n  const notificationRef = useRef<HTMLDivElement>(null);\n  const hoveredRef = useRef(false);\n  const offsetRef = useRef(0);\n  const isCloseDisabled = allowClose === false;\n\n  const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);\n  const cancelHide = () => window.clearTimeout(hideTimeout.current);\n  const cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout.current);\n\n  const setSwipeOffset = (value: number) => {\n    offsetRef.current = value;\n    setOffset(value);\n  };\n\n  const handleHide = () => {\n    onHide(data.id!);\n    cancelAutoClose();\n    cancelHide();\n    cancelScrollDismissReset();\n  };\n\n  const handleAutoClose = () => {\n    if (\n      dismissed ||\n      active ||\n      paused ||\n      hoveredRef.current ||\n      typeof autoCloseDuration !== 'number'\n    ) {\n      return;\n    }\n\n    autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);\n  };\n\n  const getExitOffset = (direction: -1 | 1) => {\n    const width = notificationRef.current?.offsetWidth ?? 440;\n    return direction * (width + 40);\n  };\n\n  const shouldDismiss = (movement: number, velocity: number) => {\n    const width = notificationRef.current?.offsetWidth ?? 440;\n    return Math.abs(movement) > width * 0.35 || velocity > 0.5;\n  };\n\n  const resetSwipe = () => {\n    cancelScrollDismissReset();\n    setScrollDismissActive(false);\n    setSwipeOffset(0);\n  };\n\n  const dismissNotification = (direction: -1 | 1) => {\n    setDismissDirection(direction);\n    setDismissed(true);\n    setScrollDismissActive(false);\n    setSwipeOffset(getExitOffset(direction));\n    cancelAutoClose();\n    cancelHide();\n    cancelScrollDismissReset();\n    hideTimeout.current = window.setTimeout(handleHide, transitionDuration);\n  };\n\n  const scheduleScrollDismissReset = () => {\n    cancelScrollDismissReset();\n    scrollDismissTimeout.current = window.setTimeout(() => {\n      setScrollDismissActive(false);\n      setSwipeOffset(0);\n      handleAutoClose();\n    }, SCROLL_DISMISS_RESET_TIMEOUT);\n  };\n\n  const { ref: dragRef, active } = useDrag<HTMLDivElement>(\n    (state) => {\n      if (dismissed) {\n        return;\n      }\n\n      if (state.first) {\n        cancelAutoClose();\n      }\n\n      if (state.last) {\n        if (state.tap || state.canceled) {\n          setSwipeOffset(0);\n          handleAutoClose();\n          return;\n        }\n\n        const movement = state.movement[0];\n        const direction =\n          movement === 0 ? (state.direction[0] === -1 ? -1 : 1) : movement > 0 ? 1 : -1;\n\n        if (shouldDismiss(movement, state.velocity[0])) {\n          dismissNotification(direction);\n        } else {\n          setSwipeOffset(0);\n          handleAutoClose();\n        }\n      } else {\n        setSwipeOffset(state.movement[0]);\n      }\n    },\n    {\n      axis: 'x',\n      threshold: 5,\n      filterTaps: true,\n      enabled: allowDragDismiss && !isCloseDisabled && !dismissed,\n    }\n  );\n\n  const mergedRef = useMergedRef(ref, notificationRef, dragRef);\n  const resolvedStyle = getStyleObject(style, theme);\n  const resolvedDataStyle = getStyleObject(dataStyle, theme);\n  const baseStyle = { ...resolvedStyle, ...resolvedDataStyle };\n  const baseOpacity = typeof baseStyle.opacity === 'number' ? baseStyle.opacity : 1;\n  const swipeOpacity = dismissed ? 0 : 1 - Math.min(Math.abs(offset) / 200, 1) * 0.6;\n  const resolvedTransitionDuration =\n    baseStyle.transitionDuration ??\n    `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`;\n  const notificationStyle = {\n    ...baseStyle,\n    ['--notifications-state-transform' as string]:\n      typeof baseStyle.transform === 'string' ? baseStyle.transform : 'translateX(0)',\n    ['--notifications-state-opacity' as string]: String(baseOpacity),\n    ['--notifications-swipe-offset' as string]: `${offset}px`,\n    ['--notifications-swipe-opacity' as string]: String(swipeOpacity),\n    transform:\n      'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)',\n    opacity: 'calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))',\n    transitionDuration:\n      active || scrollDismissActive ? '0ms, 0ms, 0ms' : resolvedTransitionDuration,\n    cursor: 'default',\n    touchAction: 'pan-y',\n  } as React.CSSProperties;\n\n  const handleMouseEnter = () => {\n    hoveredRef.current = true;\n    cancelAutoClose();\n    onHoverStart?.();\n  };\n\n  const handleMouseLeave = () => {\n    hoveredRef.current = false;\n    if (!scrollDismissActive) {\n      resetSwipe();\n      handleAutoClose();\n    }\n    onHoverEnd?.();\n  };\n\n  const handleWheel = useEffectEvent((event: WheelEvent) => {\n    if (dismissed || active) {\n      return;\n    }\n\n    const isDocumentEvent = event.currentTarget === document;\n    if (!isDocumentEvent && !hoveredRef.current) {\n      return;\n    }\n\n    const { deltaX, deltaY } = event;\n    if (Math.abs(deltaX) <= Math.abs(deltaY) || deltaX === 0) {\n      return;\n    }\n\n    if (!allowScrollDismiss || isCloseDisabled) {\n      return;\n    }\n\n    if (!isDocumentEvent) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    cancelAutoClose();\n    setScrollDismissActive(true);\n\n    const nextOffset = offsetRef.current - deltaX;\n    const direction = nextOffset > 0 ? 1 : -1;\n\n    if (shouldDismiss(nextOffset, 0)) {\n      dismissNotification(direction);\n      return;\n    }\n\n    setSwipeOffset(nextOffset);\n    scheduleScrollDismissReset();\n  });\n\n  useEffect(() => {\n    if (!scrollDismissActive) {\n      return undefined;\n    }\n\n    document.addEventListener('wheel', handleWheel, { passive: false });\n    return () => document.removeEventListener('wheel', handleWheel, { passive: false } as any);\n  }, [scrollDismissActive]);\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (dismissed) {\n        setSwipeOffset(getExitOffset(dismissDirection));\n      }\n    };\n\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [dismissDirection, dismissed]);\n\n  useEffect(() => {\n    const node = notificationRef.current;\n    if (!node) {\n      return undefined;\n    }\n\n    node.addEventListener('wheel', handleWheel, { passive: false });\n    return () => node.removeEventListener('wheel', handleWheel, { passive: false } as any);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      cancelHide();\n      cancelScrollDismissReset();\n    };\n  }, []);\n\n  useEffect(() => {\n    data.onOpen?.(data);\n  }, []);\n\n  useEffect(() => {\n    handleAutoClose();\n    return cancelAutoClose;\n  }, [autoCloseDuration, active, dismissed]);\n\n  useEffect(() => {\n    if (paused) {\n      cancelAutoClose();\n    } else {\n      handleAutoClose();\n    }\n\n    return cancelAutoClose;\n  }, [paused]);\n\n  return (\n    <Notification\n      ref={mergedRef}\n      {...others}\n      style={notificationStyle}\n      {...notificationProps}\n      withCloseButton={isCloseDisabled ? false : withCloseButton}\n      onClose={handleHide}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {message}\n    </Notification>\n  );\n}\n\nNotificationContainer.displayName = '@mantine/notifications/NotificationContainer';\n"],"mappings":";;;;;;;AAMA,MAAM,+BAA+B;AAerC,SAAgB,sBAAsB,EACpC,MACA,QACA,WACA,oBACA,kBACA,oBACA,QACA,cACA,YACA,KACA,OACA,GAAG,UAC0B;CAC7B,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,UAAsB,CAAC;CACtC,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAyB,KAAK;CAChD,MAAM,CAAC,kBAAkB,wBAAA,GAAA,MAAA,UAAwC,CAAC;CAClE,MAAM,CAAC,qBAAqB,2BAAA,GAAA,MAAA,UAAmC,KAAK;CACpE,MAAM,SAAA,GAAA,cAAA,iBAAwB;CAC9B,MAAM,EACJ,WAAW,YACX,SACA,YACA,UAAU,WACV,OAAO,WACP,iBACA,QAAQ,SACR,GAAG,sBACD;CACJ,MAAM,oBAAoBA,uBAAAA,aAAa,WAAW,KAAK,SAAS;CAChE,MAAM,oBAAA,GAAA,MAAA,QAAkC,EAAE;CAC1C,MAAM,eAAA,GAAA,MAAA,QAA6B,EAAE;CACrC,MAAM,wBAAA,GAAA,MAAA,QAAsC,EAAE;CAC9C,MAAM,mBAAA,GAAA,MAAA,QAAyC,IAAI;CACnD,MAAM,cAAA,GAAA,MAAA,QAAoB,KAAK;CAC/B,MAAM,aAAA,GAAA,MAAA,QAAmB,CAAC;CAC1B,MAAM,kBAAkB,eAAe;CAEvC,MAAM,wBAAwB,OAAO,aAAa,iBAAiB,OAAO;CAC1E,MAAM,mBAAmB,OAAO,aAAa,YAAY,OAAO;CAChE,MAAM,iCAAiC,OAAO,aAAa,qBAAqB,OAAO;CAEvF,MAAM,kBAAkB,UAAkB;EACxC,UAAU,UAAU;EACpB,UAAU,KAAK;CACjB;CAEA,MAAM,mBAAmB;EACvB,OAAO,KAAK,EAAG;EACf,gBAAgB;EAChB,WAAW;EACX,yBAAyB;CAC3B;CAEA,MAAM,wBAAwB;EAC5B,IACE,aACA,UACA,UACA,WAAW,WACX,OAAO,sBAAsB,UAE7B;EAGF,iBAAiB,UAAU,OAAO,WAAW,YAAY,iBAAiB;CAC5E;CAEA,MAAM,iBAAiB,cAAsB;EAE3C,OAAO,cADO,gBAAgB,SAAS,eAAe,OAC1B;CAC9B;CAEA,MAAM,iBAAiB,UAAkB,aAAqB;EAC5D,MAAM,QAAQ,gBAAgB,SAAS,eAAe;EACtD,OAAO,KAAK,IAAI,QAAQ,IAAI,QAAQ,OAAQ,WAAW;CACzD;CAEA,MAAM,mBAAmB;EACvB,yBAAyB;EACzB,uBAAuB,KAAK;EAC5B,eAAe,CAAC;CAClB;CAEA,MAAM,uBAAuB,cAAsB;EACjD,oBAAoB,SAAS;EAC7B,aAAa,IAAI;EACjB,uBAAuB,KAAK;EAC5B,eAAe,cAAc,SAAS,CAAC;EACvC,gBAAgB;EAChB,WAAW;EACX,yBAAyB;EACzB,YAAY,UAAU,OAAO,WAAW,YAAY,kBAAkB;CACxE;CAEA,MAAM,mCAAmC;EACvC,yBAAyB;EACzB,qBAAqB,UAAU,OAAO,iBAAiB;GACrD,uBAAuB,KAAK;GAC5B,eAAe,CAAC;GAChB,gBAAgB;EAClB,GAAG,4BAA4B;CACjC;CAEA,MAAM,EAAE,KAAK,SAAS,YAAA,GAAA,eAAA,UACnB,UAAU;EACT,IAAI,WACF;EAGF,IAAI,MAAM,OACR,gBAAgB;EAGlB,IAAI,MAAM,MAAM;GACd,IAAI,MAAM,OAAO,MAAM,UAAU;IAC/B,eAAe,CAAC;IAChB,gBAAgB;IAChB;GACF;GAEA,MAAM,WAAW,MAAM,SAAS;GAChC,MAAM,YACJ,aAAa,IAAK,MAAM,UAAU,OAAO,KAAK,KAAK,IAAK,WAAW,IAAI,IAAI;GAE7E,IAAI,cAAc,UAAU,MAAM,SAAS,EAAE,GAC3C,oBAAoB,SAAS;QACxB;IACL,eAAe,CAAC;IAChB,gBAAgB;GAClB;EACF,OACE,eAAe,MAAM,SAAS,EAAE;CAEpC,GACA;EACE,MAAM;EACN,WAAW;EACX,YAAY;EACZ,SAAS,oBAAoB,CAAC,mBAAmB,CAAC;CACpD,CACF;CAEA,MAAM,aAAA,GAAA,eAAA,cAAyB,KAAK,iBAAiB,OAAO;CAC5D,MAAM,iBAAA,GAAA,cAAA,gBAA+B,OAAO,KAAK;CACjD,MAAM,qBAAA,GAAA,cAAA,gBAAmC,WAAW,KAAK;CACzD,MAAM,YAAY;EAAE,GAAG;EAAe,GAAG;CAAkB;CAC3D,MAAM,cAAc,OAAO,UAAU,YAAY,WAAW,UAAU,UAAU;CAChF,MAAM,eAAe,YAAY,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,IAAI,KAAK,CAAC,IAAI;CAC/E,MAAM,6BACJ,UAAU,sBACV,GAAG,mBAAmB,MAAM,mBAAmB,MAAM,mBAAmB;CAC1E,MAAM,oBAAoB;EACxB,GAAG;GACF,oCACC,OAAO,UAAU,cAAc,WAAW,UAAU,YAAY;GACjE,kCAA4C,OAAO,WAAW;GAC9D,iCAA2C,GAAG,OAAO;GACrD,kCAA4C,OAAO,YAAY;EAChE,WACE;EACF,SAAS;EACT,oBACE,UAAU,sBAAsB,kBAAkB;EACpD,QAAQ;EACR,aAAa;CACf;CAEA,MAAM,yBAAyB;EAC7B,WAAW,UAAU;EACrB,gBAAgB;EAChB,eAAe;CACjB;CAEA,MAAM,yBAAyB;EAC7B,WAAW,UAAU;EACrB,IAAI,CAAC,qBAAqB;GACxB,WAAW;GACX,gBAAgB;EAClB;EACA,aAAa;CACf;CAEA,MAAM,eAAA,GAAA,MAAA,iBAA8B,UAAsB;EACxD,IAAI,aAAa,QACf;EAGF,MAAM,kBAAkB,MAAM,kBAAkB;EAChD,IAAI,CAAC,mBAAmB,CAAC,WAAW,SAClC;EAGF,MAAM,EAAE,QAAQ,WAAW;EAC3B,IAAI,KAAK,IAAI,MAAM,KAAK,KAAK,IAAI,MAAM,KAAK,WAAW,GACrD;EAGF,IAAI,CAAC,sBAAsB,iBACzB;EAGF,IAAI,CAAC,iBAAiB;GACpB,MAAM,eAAe;GACrB,MAAM,gBAAgB;EACxB;EAEA,gBAAgB;EAChB,uBAAuB,IAAI;EAE3B,MAAM,aAAa,UAAU,UAAU;EACvC,MAAM,YAAY,aAAa,IAAI,IAAI;EAEvC,IAAI,cAAc,YAAY,CAAC,GAAG;GAChC,oBAAoB,SAAS;GAC7B;EACF;EAEA,eAAe,UAAU;EACzB,2BAA2B;CAC7B,CAAC;CAED,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,CAAC,qBACH;EAGF,SAAS,iBAAiB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAC;EAClE,aAAa,SAAS,oBAAoB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAQ;CAC3F,GAAG,CAAC,mBAAmB,CAAC;CAExB,CAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,qBAAqB;GACzB,IAAI,WACF,eAAe,cAAc,gBAAgB,CAAC;EAElD;EAEA,OAAO,iBAAiB,UAAU,YAAY;EAC9C,aAAa,OAAO,oBAAoB,UAAU,YAAY;CAChE,GAAG,CAAC,kBAAkB,SAAS,CAAC;CAEhC,CAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,OAAO,gBAAgB;EAC7B,IAAI,CAAC,MACH;EAGF,KAAK,iBAAiB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAC;EAC9D,aAAa,KAAK,oBAAoB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAQ;CACvF,GAAG,CAAC,CAAC;CAEL,CAAA,GAAA,MAAA,iBAAgB;EACd,aAAa;GACX,WAAW;GACX,yBAAyB;EAC3B;CACF,GAAG,CAAC,CAAC;CAEL,CAAA,GAAA,MAAA,iBAAgB;EACd,KAAK,SAAS,IAAI;CACpB,GAAG,CAAC,CAAC;CAEL,CAAA,GAAA,MAAA,iBAAgB;EACd,gBAAgB;EAChB,OAAO;CACT,GAAG;EAAC;EAAmB;EAAQ;CAAS,CAAC;CAEzC,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,QACF,gBAAgB;OAEhB,gBAAgB;EAGlB,OAAO;CACT,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,cAAD;EACE,KAAK;EACL,GAAI;EACJ,OAAO;EACP,GAAI;EACJ,iBAAiB,kBAAkB,QAAQ;EAC3C,SAAS;EACT,cAAc;EACd,cAAc;YAEb;CACW,CAAA;AAElB;AAEA,sBAAsB,cAAc"}