react-toastify
Version:
React notification made easy
1 lines • 87.2 kB
Source Map (JSON)
{"version":3,"sources":["../src/style.css","../src/utils/propValidator.ts","../src/utils/cssTransition.tsx","../src/utils/collapseToast.ts","../src/utils/mapper.ts","../src/components/CloseButton.tsx","../src/components/ProgressBar.tsx","../src/components/ToastContainer.tsx","../src/core/genToastId.ts","../src/core/containerObserver.ts","../src/core/store.ts","../src/core/toast.ts","../src/hooks/useToastContainer.ts","../src/hooks/useToast.ts","../src/hooks/useIsomorphicLayoutEffect.ts","../src/components/Toast.tsx","../src/components/Icons.tsx","../src/components/Transitions.tsx"],"sourcesContent":["\nfunction injectStyle(css) {\n if (!css || typeof document === 'undefined') return\n\n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if(head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n\n if(style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n}\ninjectStyle(\":root{--toastify-color-light: #fff;--toastify-color-dark: #121212;--toastify-color-info: #3498db;--toastify-color-success: #07bc0c;--toastify-color-warning: #f1c40f;--toastify-color-error: hsl(6, 78%, 57%);--toastify-color-transparent: rgba(255, 255, 255, .7);--toastify-icon-color-info: var(--toastify-color-info);--toastify-icon-color-success: var(--toastify-color-success);--toastify-icon-color-warning: var(--toastify-color-warning);--toastify-icon-color-error: var(--toastify-color-error);--toastify-container-width: fit-content;--toastify-toast-width: 320px;--toastify-toast-offset: 16px;--toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));--toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));--toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));--toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));--toastify-toast-background: #fff;--toastify-toast-padding: 14px;--toastify-toast-min-height: 64px;--toastify-toast-max-height: 800px;--toastify-toast-bd-radius: 6px;--toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1);--toastify-font-family: sans-serif;--toastify-z-index: 9999;--toastify-text-color-light: #757575;--toastify-text-color-dark: #fff;--toastify-text-color-info: #fff;--toastify-text-color-success: #fff;--toastify-text-color-warning: #fff;--toastify-text-color-error: #fff;--toastify-spinner-color: #616161;--toastify-spinner-color-empty-area: #e0e0e0;--toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);--toastify-color-progress-dark: #bb86fc;--toastify-color-progress-info: var(--toastify-color-info);--toastify-color-progress-success: var(--toastify-color-success);--toastify-color-progress-warning: var(--toastify-color-warning);--toastify-color-progress-error: var(--toastify-color-error);--toastify-color-progress-bgo: .2}.Toastify__toast-container{z-index:var(--toastify-z-index);-webkit-transform:translate3d(0,0,var(--toastify-z-index));position:fixed;width:var(--toastify-container-width);box-sizing:border-box;color:#fff;display:flex;flex-direction:column}.Toastify__toast-container--top-left{top:var(--toastify-toast-top);left:var(--toastify-toast-left)}.Toastify__toast-container--top-center{top:var(--toastify-toast-top);left:50%;transform:translate(-50%);align-items:center}.Toastify__toast-container--top-right{top:var(--toastify-toast-top);right:var(--toastify-toast-right);align-items:end}.Toastify__toast-container--bottom-left{bottom:var(--toastify-toast-bottom);left:var(--toastify-toast-left)}.Toastify__toast-container--bottom-center{bottom:var(--toastify-toast-bottom);left:50%;transform:translate(-50%);align-items:center}.Toastify__toast-container--bottom-right{bottom:var(--toastify-toast-bottom);right:var(--toastify-toast-right);align-items:end}.Toastify__toast{--y: 0;position:relative;touch-action:none;width:var(--toastify-toast-width);min-height:var(--toastify-toast-min-height);box-sizing:border-box;margin-bottom:1rem;padding:var(--toastify-toast-padding);border-radius:var(--toastify-toast-bd-radius);box-shadow:var(--toastify-toast-shadow);max-height:var(--toastify-toast-max-height);font-family:var(--toastify-font-family);z-index:0;display:flex;flex:1 auto;align-items:center;word-break:break-word}@media only screen and (max-width: 480px){.Toastify__toast-container{width:100vw;left:env(safe-area-inset-left);margin:0}.Toastify__toast-container--top-left,.Toastify__toast-container--top-center,.Toastify__toast-container--top-right{top:env(safe-area-inset-top);transform:translate(0)}.Toastify__toast-container--bottom-left,.Toastify__toast-container--bottom-center,.Toastify__toast-container--bottom-right{bottom:env(safe-area-inset-bottom);transform:translate(0)}.Toastify__toast-container--rtl{right:env(safe-area-inset-right);left:initial}.Toastify__toast{--toastify-toast-width: 100%;margin-bottom:0;border-radius:0}}.Toastify__toast-container[data-stacked=true]{width:var(--toastify-toast-width)}.Toastify__toast--stacked{position:absolute;width:100%;transform:translate3d(0,var(--y),0) scale(var(--s));transition:transform .3s}.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,.Toastify__toast--stacked[data-collapsed] .Toastify__close-button{transition:opacity .1s}.Toastify__toast--stacked[data-collapsed=false]{overflow:visible}.Toastify__toast--stacked[data-collapsed=true]:not(:last-child)>*{opacity:0}.Toastify__toast--stacked:after{content:\\\"\\\";position:absolute;left:0;right:0;height:calc(var(--g) * 1px);bottom:100%}.Toastify__toast--stacked[data-pos=top]{top:0}.Toastify__toast--stacked[data-pos=bot]{bottom:0}.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before{transform-origin:top}.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before{transform-origin:bottom}.Toastify__toast--stacked:before{content:\\\"\\\";position:absolute;left:0;right:0;bottom:0;height:100%;transform:scaleY(3);z-index:-1}.Toastify__toast--rtl{direction:rtl}.Toastify__toast--close-on-click{cursor:pointer}.Toastify__toast-icon{margin-inline-end:10px;width:22px;flex-shrink:0;display:flex}.Toastify--animate{animation-fill-mode:both;animation-duration:.5s}.Toastify--animate-icon{animation-fill-mode:both;animation-duration:.3s}.Toastify__toast-theme--dark{background:var(--toastify-color-dark);color:var(--toastify-text-color-dark)}.Toastify__toast-theme--light,.Toastify__toast-theme--colored.Toastify__toast--default{background:var(--toastify-color-light);color:var(--toastify-text-color-light)}.Toastify__toast-theme--colored.Toastify__toast--info{color:var(--toastify-text-color-info);background:var(--toastify-color-info)}.Toastify__toast-theme--colored.Toastify__toast--success{color:var(--toastify-text-color-success);background:var(--toastify-color-success)}.Toastify__toast-theme--colored.Toastify__toast--warning{color:var(--toastify-text-color-warning);background:var(--toastify-color-warning)}.Toastify__toast-theme--colored.Toastify__toast--error{color:var(--toastify-text-color-error);background:var(--toastify-color-error)}.Toastify__progress-bar-theme--light{background:var(--toastify-color-progress-light)}.Toastify__progress-bar-theme--dark{background:var(--toastify-color-progress-dark)}.Toastify__progress-bar--info{background:var(--toastify-color-progress-info)}.Toastify__progress-bar--success{background:var(--toastify-color-progress-success)}.Toastify__progress-bar--warning{background:var(--toastify-color-progress-warning)}.Toastify__progress-bar--error{background:var(--toastify-color-progress-error)}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error{background:var(--toastify-color-transparent)}.Toastify__close-button{color:#fff;position:absolute;top:6px;right:6px;background:transparent;outline:none;border:none;padding:0;cursor:pointer;opacity:.7;transition:.3s ease;z-index:1}.Toastify__toast--rtl .Toastify__close-button{left:6px;right:unset}.Toastify__close-button--light{color:#000;opacity:.3}.Toastify__close-button>svg{fill:currentColor;height:16px;width:14px}.Toastify__close-button:hover,.Toastify__close-button:focus{opacity:1}@keyframes Toastify__trackProgress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.Toastify__progress-bar{position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:1;opacity:.7;transform-origin:left}.Toastify__progress-bar--animated{animation:Toastify__trackProgress linear 1 forwards}.Toastify__progress-bar--controlled{transition:transform .2s}.Toastify__progress-bar--rtl{right:0;left:initial;transform-origin:right;border-bottom-left-radius:initial}.Toastify__progress-bar--wrp{position:absolute;overflow:hidden;bottom:0;left:0;width:100%;height:5px;border-bottom-left-radius:var(--toastify-toast-bd-radius);border-bottom-right-radius:var(--toastify-toast-bd-radius)}.Toastify__progress-bar--wrp[data-hidden=true]{opacity:0}.Toastify__progress-bar--bg{opacity:var(--toastify-color-progress-bgo);width:100%;height:100%}.Toastify__spinner{width:20px;height:20px;box-sizing:border-box;border:2px solid;border-radius:100%;border-color:var(--toastify-spinner-color-empty-area);border-right-color:var(--toastify-spinner-color);animation:Toastify__spin .65s linear infinite}@keyframes Toastify__bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes Toastify__bounceOutRight{20%{opacity:1;transform:translate3d(-20px,var(--y),0)}to{opacity:0;transform:translate3d(2000px,var(--y),0)}}@keyframes Toastify__bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes Toastify__bounceOutLeft{20%{opacity:1;transform:translate3d(20px,var(--y),0)}to{opacity:0;transform:translate3d(-2000px,var(--y),0)}}@keyframes Toastify__bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@keyframes Toastify__bounceOutUp{20%{transform:translate3d(0,calc(var(--y) - 10px),0)}40%,45%{opacity:1;transform:translate3d(0,calc(var(--y) + 20px),0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes Toastify__bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}@keyframes Toastify__bounceOutDown{20%{transform:translate3d(0,calc(var(--y) - 10px),0)}40%,45%{opacity:1;transform:translate3d(0,calc(var(--y) + 20px),0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.Toastify__bounce-enter--top-left,.Toastify__bounce-enter--bottom-left{animation-name:Toastify__bounceInLeft}.Toastify__bounce-enter--top-right,.Toastify__bounce-enter--bottom-right{animation-name:Toastify__bounceInRight}.Toastify__bounce-enter--top-center{animation-name:Toastify__bounceInDown}.Toastify__bounce-enter--bottom-center{animation-name:Toastify__bounceInUp}.Toastify__bounce-exit--top-left,.Toastify__bounce-exit--bottom-left{animation-name:Toastify__bounceOutLeft}.Toastify__bounce-exit--top-right,.Toastify__bounce-exit--bottom-right{animation-name:Toastify__bounceOutRight}.Toastify__bounce-exit--top-center{animation-name:Toastify__bounceOutUp}.Toastify__bounce-exit--bottom-center{animation-name:Toastify__bounceOutDown}@keyframes Toastify__zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes Toastify__zoomOut{0%{opacity:1}50%{opacity:0;transform:translate3d(0,var(--y),0) scale3d(.3,.3,.3)}to{opacity:0}}.Toastify__zoom-enter{animation-name:Toastify__zoomIn}.Toastify__zoom-exit{animation-name:Toastify__zoomOut}@keyframes Toastify__flipIn{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}@keyframes Toastify__flipOut{0%{transform:translate3d(0,var(--y),0) perspective(400px)}30%{transform:translate3d(0,var(--y),0) perspective(400px) rotateX(-20deg);opacity:1}to{transform:translate3d(0,var(--y),0) perspective(400px) rotateX(90deg);opacity:0}}.Toastify__flip-enter{animation-name:Toastify__flipIn}.Toastify__flip-exit{animation-name:Toastify__flipOut}@keyframes Toastify__slideInRight{0%{transform:translate3d(110%,0,0);visibility:visible}to{transform:translate3d(0,var(--y),0)}}@keyframes Toastify__slideInLeft{0%{transform:translate3d(-110%,0,0);visibility:visible}to{transform:translate3d(0,var(--y),0)}}@keyframes Toastify__slideInUp{0%{transform:translate3d(0,110%,0);visibility:visible}to{transform:translate3d(0,var(--y),0)}}@keyframes Toastify__slideInDown{0%{transform:translate3d(0,-110%,0);visibility:visible}to{transform:translate3d(0,var(--y),0)}}@keyframes Toastify__slideOutRight{0%{transform:translate3d(0,var(--y),0)}to{visibility:hidden;transform:translate3d(110%,var(--y),0)}}@keyframes Toastify__slideOutLeft{0%{transform:translate3d(0,var(--y),0)}to{visibility:hidden;transform:translate3d(-110%,var(--y),0)}}@keyframes Toastify__slideOutDown{0%{transform:translate3d(0,var(--y),0)}to{visibility:hidden;transform:translate3d(0,500px,0)}}@keyframes Toastify__slideOutUp{0%{transform:translate3d(0,var(--y),0)}to{visibility:hidden;transform:translate3d(0,-500px,0)}}.Toastify__slide-enter--top-left,.Toastify__slide-enter--bottom-left{animation-name:Toastify__slideInLeft}.Toastify__slide-enter--top-right,.Toastify__slide-enter--bottom-right{animation-name:Toastify__slideInRight}.Toastify__slide-enter--top-center{animation-name:Toastify__slideInDown}.Toastify__slide-enter--bottom-center{animation-name:Toastify__slideInUp}.Toastify__slide-exit--top-left,.Toastify__slide-exit--bottom-left{animation-name:Toastify__slideOutLeft;animation-timing-function:ease-in;animation-duration:.3s}.Toastify__slide-exit--top-right,.Toastify__slide-exit--bottom-right{animation-name:Toastify__slideOutRight;animation-timing-function:ease-in;animation-duration:.3s}.Toastify__slide-exit--top-center{animation-name:Toastify__slideOutUp;animation-timing-function:ease-in;animation-duration:.3s}.Toastify__slide-exit--bottom-center{animation-name:Toastify__slideOutDown;animation-timing-function:ease-in;animation-duration:.3s}@keyframes Toastify__spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\\n\");","import { isValidElement } from 'react';\nimport { Id } from '../types';\n\nexport const isNum = (v: any): v is Number => typeof v === 'number' && !isNaN(v);\n\nexport const isStr = (v: any): v is String => typeof v === 'string';\n\nexport const isFn = (v: any): v is Function => typeof v === 'function';\n\nexport const isId = (v: unknown): v is Id => isStr(v) || isNum(v);\n\nexport const parseClassName = (v: any) => (isStr(v) || isFn(v) ? v : null);\n\nexport const getAutoCloseDelay = (toastAutoClose?: false | number, containerAutoClose?: false | number) =>\n toastAutoClose === false || (isNum(toastAutoClose) && toastAutoClose > 0) ? toastAutoClose : containerAutoClose;\n\nexport const canBeRendered = <T>(content: T): boolean =>\n isValidElement(content) || isStr(content) || isFn(content) || isNum(content);\n","import React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { collapseToast } from './collapseToast';\nimport { Default } from './constant';\n\nimport { ToastTransitionProps } from '../types';\n\nexport interface CSSTransitionProps {\n /**\n * Css class to apply when toast enter\n */\n enter: string;\n\n /**\n * Css class to apply when toast leave\n */\n exit: string;\n\n /**\n * Append current toast position to the classname.\n * If multiple classes are provided, only the last one will get the position\n * For instance `myclass--top-center`...\n * `Default: false`\n */\n appendPosition?: boolean;\n\n /**\n * Collapse toast smoothly when exit animation end\n * `Default: true`\n */\n collapse?: boolean;\n\n /**\n * Collapse transition duration\n * `Default: 300`\n */\n collapseDuration?: number;\n}\n\nconst enum AnimationStep {\n Enter,\n Exit\n}\n\n/**\n * Css animation that just work.\n * You could use animate.css for instance\n *\n *\n * ```\n * cssTransition({\n * enter: \"animate__animated animate__bounceIn\",\n * exit: \"animate__animated animate__bounceOut\"\n * })\n * ```\n *\n */\nexport function cssTransition({\n enter,\n exit,\n appendPosition = false,\n collapse = true,\n collapseDuration = Default.COLLAPSE_DURATION\n}: CSSTransitionProps) {\n return function ToastTransition({\n children,\n position,\n preventExitTransition,\n done,\n nodeRef,\n isIn,\n playToast\n }: ToastTransitionProps) {\n const enterClassName = appendPosition ? `${enter}--${position}` : enter;\n const exitClassName = appendPosition ? `${exit}--${position}` : exit;\n const animationStep = useRef(AnimationStep.Enter);\n\n useLayoutEffect(() => {\n const node = nodeRef.current!;\n const classToToken = enterClassName.split(' ');\n\n const onEntered = (e: AnimationEvent) => {\n if (e.target !== nodeRef.current) return;\n\n playToast();\n node.removeEventListener('animationend', onEntered);\n node.removeEventListener('animationcancel', onEntered);\n if (animationStep.current === AnimationStep.Enter && e.type !== 'animationcancel') {\n node.classList.remove(...classToToken);\n }\n };\n\n const onEnter = () => {\n node.classList.add(...classToToken);\n node.addEventListener('animationend', onEntered);\n node.addEventListener('animationcancel', onEntered);\n };\n\n onEnter();\n }, []);\n\n useEffect(() => {\n const node = nodeRef.current!;\n\n const onExited = () => {\n node.removeEventListener('animationend', onExited);\n collapse ? collapseToast(node, done, collapseDuration) : done();\n };\n\n const onExit = () => {\n animationStep.current = AnimationStep.Exit;\n node.className += ` ${exitClassName}`;\n node.addEventListener('animationend', onExited);\n };\n\n if (!isIn) preventExitTransition ? onExited() : onExit();\n }, [isIn]);\n\n return <>{children}</>;\n };\n}\n","import { Default } from './constant';\n\n/**\n * Used to collapse toast after exit animation\n */\nexport function collapseToast(node: HTMLElement, done: () => void, duration = Default.COLLAPSE_DURATION) {\n const { scrollHeight, style } = node;\n\n requestAnimationFrame(() => {\n style.minHeight = 'initial';\n style.height = scrollHeight + 'px';\n style.transition = `all ${duration}ms`;\n\n requestAnimationFrame(() => {\n style.height = '0';\n style.padding = '0';\n style.margin = '0';\n setTimeout(done, duration as number);\n });\n });\n}\n","import { Toast, ToastContentProps, ToastItem, ToastItemStatus, ToastProps } from '../types';\nimport { cloneElement, isValidElement, ReactElement } from 'react';\nimport { isFn, isStr } from './propValidator';\n\nexport function toToastItem(toast: Toast, status: ToastItemStatus): ToastItem {\n return {\n content: renderContent(toast.content, toast.props),\n containerId: toast.props.containerId,\n id: toast.props.toastId,\n theme: toast.props.theme,\n type: toast.props.type,\n data: toast.props.data || {},\n isLoading: toast.props.isLoading,\n icon: toast.props.icon,\n reason: toast.removalReason,\n status\n };\n}\n\nexport function renderContent(content: unknown, props: ToastProps, isPaused: boolean = false) {\n if (isValidElement(content) && !isStr(content.type)) {\n return cloneElement<ToastContentProps>(content as ReactElement<any>, {\n closeToast: props.closeToast,\n toastProps: props,\n data: props.data,\n isPaused\n });\n } else if (isFn(content)) {\n return content({\n closeToast: props.closeToast,\n toastProps: props,\n data: props.data,\n isPaused\n });\n }\n\n return content;\n}\n","import React from 'react';\nimport { Default } from '../utils';\nimport { CloseToastFunc, Theme, TypeOptions } from '../types';\n\nexport interface CloseButtonProps {\n closeToast: CloseToastFunc;\n type: TypeOptions;\n ariaLabel?: string;\n theme: Theme;\n}\n\nexport function CloseButton({ closeToast, theme, ariaLabel = 'close' }: CloseButtonProps) {\n return (\n <button\n className={`${Default.CSS_NAMESPACE}__close-button ${Default.CSS_NAMESPACE}__close-button--${theme}`}\n type=\"button\"\n onClick={e => {\n e.stopPropagation();\n closeToast(true);\n }}\n aria-label={ariaLabel}\n >\n <svg aria-hidden=\"true\" viewBox=\"0 0 14 16\">\n <path\n fillRule=\"evenodd\"\n d=\"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z\"\n />\n </svg>\n </button>\n );\n}\n","import React from 'react';\nimport cx from 'clsx';\n\nimport { Default, isFn, Type } from '../utils';\nimport { Theme, ToastClassName, TypeOptions } from '../types';\n\nexport interface ProgressBarProps {\n /**\n * The animation delay which determine when to close the toast\n */\n delay: number;\n\n /**\n * The animation is running or paused\n */\n isRunning: boolean;\n\n /**\n * Func to close the current toast\n */\n closeToast: () => void;\n\n /**\n * Optional type : info, success ...\n */\n type?: TypeOptions;\n\n /**\n * The theme that is currently used\n */\n theme: Theme;\n\n /**\n * Hide or not the progress bar\n */\n hide?: boolean;\n\n /**\n * Optional className\n */\n className?: ToastClassName;\n\n /**\n * Tell whether a controlled progress bar is used\n */\n controlledProgress?: boolean;\n\n /**\n * Controlled progress value\n */\n progress?: number | string;\n\n /**\n * Support rtl content\n */\n rtl?: boolean;\n\n /**\n * Tell if the component is visible on screen or not\n */\n isIn?: boolean;\n}\n\nexport function ProgressBar({\n delay,\n isRunning,\n closeToast,\n type = Type.DEFAULT,\n hide,\n className,\n controlledProgress,\n progress,\n rtl,\n isIn,\n theme\n}: ProgressBarProps) {\n const isHidden = hide || (controlledProgress && progress === 0);\n const style: React.CSSProperties = {\n animationDuration: `${delay}ms`,\n animationPlayState: isRunning ? 'running' : 'paused'\n };\n\n if (controlledProgress) style.transform = `scaleX(${progress})`;\n const defaultClassName = cx(\n `${Default.CSS_NAMESPACE}__progress-bar`,\n controlledProgress\n ? `${Default.CSS_NAMESPACE}__progress-bar--controlled`\n : `${Default.CSS_NAMESPACE}__progress-bar--animated`,\n `${Default.CSS_NAMESPACE}__progress-bar-theme--${theme}`,\n `${Default.CSS_NAMESPACE}__progress-bar--${type}`,\n {\n [`${Default.CSS_NAMESPACE}__progress-bar--rtl`]: rtl\n }\n );\n const classNames = isFn(className)\n ? className({\n rtl,\n type,\n defaultClassName\n })\n : cx(defaultClassName, className);\n\n // 🧐 controlledProgress is derived from progress\n // so if controlledProgress is set\n // it means that this is also the case for progress\n const animationEvent = {\n [controlledProgress && (progress as number)! >= 1 ? 'onTransitionEnd' : 'onAnimationEnd']:\n controlledProgress && (progress as number)! < 1\n ? null\n : () => {\n isIn && closeToast();\n }\n };\n\n // TODO: add aria-valuenow, aria-valuemax, aria-valuemin\n\n return (\n <div className={`${Default.CSS_NAMESPACE}__progress-bar--wrp`} data-hidden={isHidden}>\n <div\n className={`${Default.CSS_NAMESPACE}__progress-bar--bg ${Default.CSS_NAMESPACE}__progress-bar-theme--${theme} ${Default.CSS_NAMESPACE}__progress-bar--${type}`}\n />\n <div\n role=\"progressbar\"\n aria-hidden={isHidden ? 'true' : 'false'}\n aria-label=\"notification timer\"\n className={classNames}\n style={style}\n {...animationEvent}\n />\n </div>\n );\n}\n","import cx from 'clsx';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { toast } from '../core';\nimport { useToastContainer } from '../hooks';\nimport { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';\nimport { ToastContainerProps, ToastPosition } from '../types';\nimport { Default, Direction, isFn, parseClassName } from '../utils';\nimport { Toast } from './Toast';\nimport { Bounce } from './Transitions';\n\nexport const defaultProps: ToastContainerProps = {\n position: 'top-right',\n transition: Bounce,\n autoClose: 5000,\n closeButton: true,\n pauseOnHover: true,\n pauseOnFocusLoss: true,\n draggable: 'touch',\n draggablePercent: Default.DRAGGABLE_PERCENT as number,\n draggableDirection: Direction.X,\n role: 'alert',\n theme: 'light',\n 'aria-label': 'Notifications Alt+T',\n hotKeys: e => e.altKey && e.code === 'KeyT'\n};\n\nexport function ToastContainer(props: ToastContainerProps) {\n let containerProps: ToastContainerProps = {\n ...defaultProps,\n ...props\n };\n const stacked = props.stacked;\n const [collapsed, setIsCollapsed] = useState(true);\n const containerRef = useRef<HTMLDivElement>(null);\n const { getToastToRender, isToastActive, count } = useToastContainer(containerProps);\n const { className, style, rtl, containerId, hotKeys } = containerProps;\n\n function getClassName(position: ToastPosition) {\n const defaultClassName = cx(\n `${Default.CSS_NAMESPACE}__toast-container`,\n `${Default.CSS_NAMESPACE}__toast-container--${position}`,\n { [`${Default.CSS_NAMESPACE}__toast-container--rtl`]: rtl }\n );\n return isFn(className)\n ? className({\n position,\n rtl,\n defaultClassName\n })\n : cx(defaultClassName, parseClassName(className));\n }\n\n function collapseAll() {\n if (stacked) {\n setIsCollapsed(true);\n toast.play();\n }\n }\n\n useIsomorphicLayoutEffect(() => {\n if (stacked) {\n const nodes = containerRef.current!.querySelectorAll('[data-in=\"true\"]');\n const gap = 12;\n const isTop = containerProps.position?.includes('top');\n let usedHeight = 0;\n let prevS = 0;\n\n Array.from(nodes)\n .reverse()\n .forEach((n, i) => {\n const node = n as HTMLElement;\n node.classList.add(`${Default.CSS_NAMESPACE}__toast--stacked`);\n\n if (i > 0) node.dataset.collapsed = `${collapsed}`;\n\n if (!node.dataset.pos) node.dataset.pos = isTop ? 'top' : 'bot';\n\n const y = usedHeight * (collapsed ? 0.2 : 1) + (collapsed ? 0 : gap * i);\n\n node.style.setProperty('--y', `${isTop ? y : y * -1}px`);\n node.style.setProperty('--g', `${gap}`);\n node.style.setProperty('--s', `${1 - (collapsed ? prevS : 0)}`);\n\n usedHeight += node.offsetHeight;\n prevS += 0.025;\n });\n }\n }, [collapsed, count, stacked]);\n\n useEffect(() => {\n function focusFirst(e: KeyboardEvent) {\n const node = containerRef.current;\n if (hotKeys(e)) {\n (node.querySelector('[tabIndex=\"0\"]') as HTMLElement)?.focus();\n setIsCollapsed(false);\n toast.pause();\n }\n if (e.key === 'Escape' && (document.activeElement === node || node?.contains(document.activeElement))) {\n setIsCollapsed(true);\n toast.play();\n }\n }\n\n document.addEventListener('keydown', focusFirst);\n\n return () => {\n document.removeEventListener('keydown', focusFirst);\n };\n }, [hotKeys]);\n\n return (\n <section\n ref={containerRef}\n className={Default.CSS_NAMESPACE as string}\n id={containerId as string}\n onMouseEnter={() => {\n if (stacked) {\n setIsCollapsed(false);\n toast.pause();\n }\n }}\n onMouseLeave={collapseAll}\n aria-live=\"polite\"\n aria-atomic=\"false\"\n aria-relevant=\"additions text\"\n aria-label={containerProps['aria-label']}\n >\n {getToastToRender((position, toastList) => {\n const containerStyle: React.CSSProperties = !toastList.length\n ? { ...style, pointerEvents: 'none' }\n : { ...style };\n\n return (\n <div\n tabIndex={-1}\n className={getClassName(position)}\n data-stacked={stacked}\n style={containerStyle}\n key={`c-${position}`}\n >\n {toastList.map(({ content, props: toastProps }) => {\n return (\n <Toast\n {...toastProps}\n stacked={stacked}\n collapseAll={collapseAll}\n isIn={isToastActive(toastProps.toastId, toastProps.containerId)}\n key={`t-${toastProps.key}`}\n >\n {content}\n </Toast>\n );\n })}\n </div>\n );\n })}\n </section>\n );\n}\n","let TOAST_ID = 1;\n\nexport const genToastId = () => `${TOAST_ID++}`;\n","import {\n Id,\n NotValidatedToastProps,\n OnChangeCallback,\n Toast,\n ToastContainerProps,\n ToastContent,\n ToastProps\n} from '../types';\nimport { canBeRendered, getAutoCloseDelay, isNum, parseClassName, toToastItem } from '../utils';\n\ntype Notify = () => void;\n\nexport type ContainerObserver = ReturnType<typeof createContainerObserver>;\n\nexport function createContainerObserver(\n id: Id,\n containerProps: ToastContainerProps,\n dispatchChanges: OnChangeCallback\n) {\n let toastKey = 1;\n let toastCount = 0;\n let queue: Toast[] = [];\n let snapshot: Toast[] = [];\n let props = containerProps;\n const toasts = new Map<Id, Toast>();\n const listeners = new Set<Notify>();\n\n const observe = (notify: Notify) => {\n listeners.add(notify);\n return () => listeners.delete(notify);\n };\n\n const notify = () => {\n snapshot = Array.from(toasts.values());\n listeners.forEach(cb => cb());\n };\n\n const shouldIgnoreToast = ({ containerId, toastId, updateId }: NotValidatedToastProps) => {\n const containerMismatch = containerId ? containerId !== id : id !== 1;\n const isDuplicate = toasts.has(toastId) && updateId == null;\n\n return containerMismatch || isDuplicate;\n };\n\n const toggle = (v: boolean, id?: Id) => {\n toasts.forEach(t => {\n if (id == null || id === t.props.toastId) t.toggle?.(v);\n });\n };\n\n const markAsRemoved = (v: Toast) => {\n v.props?.onClose?.(v.removalReason);\n v.isActive = false;\n };\n\n const removeToast = (id?: Id) => {\n if (id == null) {\n toasts.forEach(markAsRemoved);\n } else {\n const t = toasts.get(id);\n if (t) markAsRemoved(t);\n }\n notify();\n };\n\n const clearQueue = () => {\n toastCount -= queue.length;\n queue = [];\n };\n\n const addActiveToast = (toast: Toast) => {\n const { toastId, updateId } = toast.props;\n const isNew = updateId == null;\n\n if (toast.staleId) toasts.delete(toast.staleId);\n toast.isActive = true;\n\n toasts.set(toastId, toast);\n notify();\n dispatchChanges(toToastItem(toast, isNew ? 'added' : 'updated'));\n\n if (isNew) toast.props.onOpen?.();\n };\n\n const buildToast = <TData = unknown>(content: ToastContent<TData>, options: NotValidatedToastProps) => {\n if (shouldIgnoreToast(options)) return;\n\n const { toastId, updateId, data, staleId, delay } = options;\n\n const isNotAnUpdate = updateId == null;\n\n if (isNotAnUpdate) toastCount++;\n\n const toastProps = {\n ...props,\n style: props.toastStyle,\n key: toastKey++,\n ...Object.fromEntries(Object.entries(options).filter(([_, v]) => v != null)),\n toastId,\n updateId,\n data,\n isIn: false,\n className: parseClassName(options.className || props.toastClassName),\n progressClassName: parseClassName(options.progressClassName || props.progressClassName),\n autoClose: options.isLoading ? false : getAutoCloseDelay(options.autoClose, props.autoClose),\n closeToast(reason?: true) {\n toasts.get(toastId)!.removalReason = reason;\n removeToast(toastId);\n },\n deleteToast() {\n const toastToRemove = toasts.get(toastId);\n\n if (toastToRemove == null) return;\n\n dispatchChanges(toToastItem(toastToRemove, 'removed'));\n toasts.delete(toastId);\n\n toastCount--;\n if (toastCount < 0) toastCount = 0;\n\n if (queue.length > 0) {\n addActiveToast(queue.shift());\n return;\n }\n\n notify();\n }\n } as ToastProps;\n\n toastProps.closeButton = props.closeButton;\n\n if (options.closeButton === false || canBeRendered(options.closeButton)) {\n toastProps.closeButton = options.closeButton;\n } else if (options.closeButton === true) {\n toastProps.closeButton = canBeRendered(props.closeButton) ? props.closeButton : true;\n }\n\n const activeToast = {\n content,\n props: toastProps,\n staleId\n } as Toast;\n\n // not handling limit + delay by design. Waiting for user feedback first\n if (props.limit && props.limit > 0 && toastCount > props.limit && isNotAnUpdate) {\n queue.push(activeToast);\n } else if (isNum(delay)) {\n setTimeout(() => {\n addActiveToast(activeToast);\n }, delay);\n } else {\n addActiveToast(activeToast);\n }\n };\n\n return {\n id,\n props,\n observe,\n toggle,\n removeToast,\n toasts,\n clearQueue,\n buildToast,\n setProps(p: ToastContainerProps) {\n props = p;\n },\n setToggle: (id: Id, fn: (v: boolean) => void) => {\n const t = toasts.get(id);\n if (t) t.toggle = fn;\n },\n isToastActive: (id: Id) => toasts.get(id)?.isActive,\n getSnapshot: () => snapshot\n };\n}\n","import {\n ClearWaitingQueueParams,\n Id,\n NotValidatedToastProps,\n OnChangeCallback,\n ToastContainerProps,\n ToastContent,\n ToastItem,\n ToastOptions\n} from '../types';\nimport { Default, canBeRendered, isId } from '../utils';\nimport { ContainerObserver, createContainerObserver } from './containerObserver';\n\ninterface EnqueuedToast {\n content: ToastContent<any>;\n options: NotValidatedToastProps;\n}\n\ninterface RemoveParams {\n id?: Id;\n containerId: Id;\n}\n\nconst containers = new Map<Id, ContainerObserver>();\nlet renderQueue: EnqueuedToast[] = [];\nconst listeners = new Set<OnChangeCallback>();\n\nconst dispatchChanges = (data: ToastItem) => listeners.forEach(cb => cb(data));\n\nconst hasContainers = () => containers.size > 0;\n\nfunction flushRenderQueue() {\n renderQueue.forEach(v => pushToast(v.content, v.options));\n renderQueue = [];\n}\n\nexport const getToast = (id: Id, { containerId }: ToastOptions) =>\n containers.get(containerId || Default.CONTAINER_ID)?.toasts.get(id);\n\nexport function isToastActive(id: Id, containerId?: Id) {\n if (containerId) return !!containers.get(containerId)?.isToastActive(id);\n\n let isActive = false;\n containers.forEach(c => {\n if (c.isToastActive(id)) isActive = true;\n });\n\n return isActive;\n}\n\nexport function removeToast(params?: Id | RemoveParams) {\n if (!hasContainers()) {\n renderQueue = renderQueue.filter(v => params != null && v.options.toastId !== params);\n return;\n }\n\n if (params == null || isId(params)) {\n containers.forEach(c => {\n c.removeToast(params as Id);\n });\n } else if (params && ('containerId' in params || 'id' in params)) {\n const container = containers.get(params.containerId);\n container\n ? container.removeToast(params.id)\n : containers.forEach(c => {\n c.removeToast(params.id);\n });\n }\n}\n\nexport const clearWaitingQueue = (p: ClearWaitingQueueParams = {}) => {\n containers.forEach(c => {\n if (c.props.limit && (!p.containerId || c.id === p.containerId)) {\n c.clearQueue();\n }\n });\n};\n\nexport function pushToast<TData>(content: ToastContent<TData>, options: NotValidatedToastProps) {\n if (!canBeRendered(content)) return;\n if (!hasContainers()) renderQueue.push({ content, options });\n\n containers.forEach(c => {\n c.buildToast(content, options);\n });\n}\n\ninterface ToggleToastParams {\n id?: Id;\n containerId?: Id;\n}\n\ntype RegisterToggleOpts = {\n id: Id;\n containerId?: Id;\n fn: (v: boolean) => void;\n};\n\nexport function registerToggle(opts: RegisterToggleOpts) {\n containers.get(opts.containerId || Default.CONTAINER_ID)?.setToggle(opts.id, opts.fn);\n}\n\nexport function toggleToast(v: boolean, opt?: ToggleToastParams) {\n containers.forEach(c => {\n if (opt == null || !opt?.containerId) {\n c.toggle(v, opt?.id);\n } else if (opt?.containerId === c.id) {\n c.toggle(v, opt?.id);\n }\n });\n}\n\nexport function registerContainer(props: ToastContainerProps) {\n const id = props.containerId || Default.CONTAINER_ID;\n return {\n subscribe(notify: () => void) {\n const container = createContainerObserver(id, props, dispatchChanges);\n\n containers.set(id, container);\n const unobserve = container.observe(notify);\n flushRenderQueue();\n\n return () => {\n unobserve();\n containers.delete(id);\n };\n },\n setProps(p: ToastContainerProps) {\n containers.get(id)?.setProps(p);\n },\n getSnapshot() {\n return containers.get(id)?.getSnapshot();\n }\n };\n}\n\nexport function onChange(cb: OnChangeCallback) {\n listeners.add(cb);\n\n return () => {\n listeners.delete(cb);\n };\n}\n","import {\n ClearWaitingQueueFunc,\n Id,\n IdOpts,\n NotValidatedToastProps,\n OnChangeCallback,\n ToastContent,\n ToastOptions,\n ToastProps,\n TypeOptions,\n UpdateOptions\n} from '../types';\nimport { isFn, isNum, isStr, Type } from '../utils';\nimport { genToastId } from './genToastId';\nimport { clearWaitingQueue, getToast, isToastActive, onChange, pushToast, removeToast, toggleToast } from './store';\n\n/**\n * Generate a toastId or use the one provided\n */\nfunction getToastId<TData>(options?: ToastOptions<TData>) {\n return options && (isStr(options.toastId) || isNum(options.toastId)) ? options.toastId : genToastId();\n}\n\n/**\n * If the container is not mounted, the toast is enqueued\n */\nfunction dispatchToast<TData>(content: ToastContent<TData>, options: NotValidatedToastProps): Id {\n pushToast(content, options);\n return options.toastId;\n}\n\n/**\n * Merge provided options with the defaults settings and generate the toastId\n */\nfunction mergeOptions<TData>(type: string, options?: ToastOptions<TData>) {\n return {\n ...options,\n type: (options && options.type) || type,\n toastId: getToastId(options)\n } as NotValidatedToastProps;\n}\n\nfunction createToastByType(type: string) {\n return <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) =>\n dispatchToast(content, mergeOptions(type, options));\n}\n\nfunction toast<TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) {\n return dispatchToast(content, mergeOptions(Type.DEFAULT, options));\n}\n\ntoast.loading = <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) =>\n dispatchToast(\n content,\n mergeOptions(Type.DEFAULT, {\n isLoading: true,\n autoClose: false,\n closeOnClick: false,\n closeButton: false,\n draggable: false,\n ...options\n })\n );\n\nexport interface ToastPromiseParams<TData = unknown, TError = unknown, TPending = unknown> {\n pending?: string | UpdateOptions<TPending>;\n success?: string | UpdateOptions<TData>;\n error?: string | UpdateOptions<TError>;\n}\n\nfunction handlePromise<TData = unknown, TError = unknown, TPending = unknown>(\n promise: Promise<TData> | (() => Promise<TData>),\n { pending, error, success }: ToastPromiseParams<TData, TError, TPending>,\n options?: ToastOptions<TData>\n) {\n let id: Id;\n\n if (pending) {\n id = isStr(pending)\n ? toast.loading(pending, options)\n : toast.loading(pending.render, {\n ...options,\n ...(pending as ToastOptions)\n } as ToastOptions<TPending>);\n }\n\n const resetParams = {\n isLoading: null,\n autoClose: null,\n closeOnClick: null,\n closeButton: null,\n draggable: null\n };\n\n const resolver = <T>(type: TypeOptions, input: string | UpdateOptions<T> | undefined, result: T) => {\n // Remove the toast if the input has not been provided. This prevents the toast from hanging\n // in the pending state if a success/error toast has not been provided.\n if (input == null) {\n toast.dismiss(id);\n return;\n }\n\n const baseParams = {\n type,\n ...resetParams,\n ...options,\n data: result\n };\n const params = isStr(input) ? { render: input } : input;\n\n // if the id is set we know that it's an update\n if (id) {\n toast.update(id, {\n ...baseParams,\n ...params\n } as UpdateOptions);\n } else {\n // using toast.promise without loading\n toast(params!.render, {\n ...baseParams,\n ...params\n } as ToastOptions<T>);\n }\n\n return result;\n };\n\n const p = isFn(promise) ? promise() : promise;\n\n //call the resolvers only when needed\n p.then(result => resolver('success', success, result)).catch(err => resolver('error', error, err));\n\n return p;\n}\n\n/**\n * Supply a promise or a function that return a promise and the notification will be updated if it resolves or fails.\n * When the promise is pending a spinner is displayed by default.\n * `toast.promise` returns the provided promise so you can chain it.\n *\n * Simple example:\n *\n * ```\n * toast.promise(MyPromise,\n * {\n * pending: 'Promise is pending',\n * success: 'Promise resolved 👌',\n * error: 'Promise rejected 🤯'\n * }\n * )\n *\n * ```\n *\n * Advanced usage:\n * ```\n * toast.promise<{name: string}, {message: string}, undefined>(\n * resolveWithSomeData,\n * {\n * pending: {\n * render: () => \"I'm loading\",\n * icon: false,\n * },\n * success: {\n * render: ({data}) => `Hello ${data.name}`,\n * icon: \"🟢\",\n * },\n * error: {\n * render({data}){\n * // When the promise reject, data will contains the error\n * return <MyErrorComponent message={data.message} />\n * }\n * }\n * }\n * )\n * ```\n */\ntoast.promise = handlePromise;\ntoast.success = createToastByType(Type.SUCCESS);\ntoast.info = createToastByType(Type.INFO);\ntoast.error = createToastByType(Type.ERROR);\ntoast.warning = createToastByType(Type.WARNING);\ntoast.warn = toast.warning;\ntoast.dark = (content: ToastContent, options?: ToastOptions) =>\n dispatchToast(\n content,\n mergeOptions(Type.DEFAULT, {\n theme: 'dark',\n ...options\n })\n );\n\ninterface RemoveParams {\n id?: Id;\n containerId: Id;\n}\n\nfunction dismiss(params: RemoveParams): void;\nfunction dismiss(params?: Id): void;\nfunction dismiss(params?: Id | RemoveParams) {\n removeToast(params);\n}\n\n/**\n * Remove toast programmatically\n *\n * - Remove all toasts:\n * ```\n * toast.dismiss()\n * ```\n *\n * - Remove all toasts that belongs to a given container\n * ```\n * toast.dismiss({ container: \"123\" })\n * ```\n *\n * - Remove toast that has a given id regardless the container\n * ```\n * toast.dismiss({ id: \"123\" })\n * ```\n *\n * - Remove toast that has a given id for a specific container\n * ```\n * toast.dismiss({ id: \"123\", containerId: \"12\" })\n * ```\n */\ntoast.dismiss = dismiss;\n\n/**\n * Clear waiting queue when limit is used\n */\ntoast.clearWaitingQueue = clearWaitingQueue as ClearWaitingQueueFunc;\n\n/**\n * Check if a toast is active\n *\n * - Check regardless the container\n * ```\n * toast.isActive(\"123\")\n * ```\n *\n * - Check in a specific container\n * ```\n * toast.isActive(\"123\", \"containerId\")\n * ```\n */\ntoast.isActive = isToastActive;\n\n/**\n * Update a toast, see https://fkhadra.github.io/react-toastify/update-toast/ for more\n *\n * Example:\n * ```\n * // With a string\n * toast.update(toastId, {\n * render: \"New content\",\n * type: \"info\",\n * });\n *\n * // Or with a component\n * toast.update(toastId, {\n * render: MyComponent\n * });\n *\n * // Or a function\n * toast.update(toastId, {\n * render: () => <div>New content</div>\n * });\n *\n * // Apply a transition\n * toast.update(toastId, {\n * render: \"New Content\",\n * type: toast.TYPE.INFO,\n * transition: Rotate\n * })\n * ```\n */\ntoast.update = <TData = unknown>(toastId: Id, options: UpdateOptions<TData> = {}) => {\n const toast = getToast(toastId, options as ToastOptions);\n\n if (toast) {\n const { props: oldOptions, content: oldContent } = toast;\n\n const nextOptions = {\n delay: 100,\n ...oldOptions,\n ...options,\n toastId: options.toastId || toastId,\n updateId: genToastId()\n } as ToastProps & UpdateOptions;\n\n if (nextOptions.toastId !== toastId) nextOptions.staleId = toastId;\n\n const content = nextOptions.render || oldContent;\n delete nextOptions.render;\n\n dispatchToast(content, nextOptions);\n }\n};\n\n/**\n * Used for controlled progress bar. It will automatically close the notification.\n *\n * If you don't want your notification to be clsoed when the timer is done you should use `toast.update` instead as follow instead:\n *\n * ```\n * toast.update(id, {\n * progress: null, // remove controlled progress bar\n * render: \"ok\",\n * type: \"success\",\n * autoClose: 5000 // set autoClose to the desired value\n * });\n * ```\n */\ntoast.done = (id: Id) => {\n toast.update(id, {\n progress: 1\n });\n};\n\n/**\n * Subscribe to change when a toast is added, removed and updated\n *\n * Usage:\n * ```\n * const unsubscribe = toast.onChange((payload) => {\n * switch (payload.status) {\n * case \"added\":\n * // new toast added\n * break;\n * case \"updated\":\n * // toast updated\n * break;\n * case \"removed\":\n * // toast has been removed\n * break;\n * }\n * })\n * ```\n */\ntoast.onChange = onChange as (cb: OnChangeCallback) => () => void;\n\n/**\n * Play a toast(s) timer progammatically\n *\n * Usage:\n *\n * - Play all toasts\n * ```\n * toast.play()\n * ```\n *\n * - Play all toasts for a given container\n * ```\n * toast.play({ containerId: \"123\" })\n * ```\n *\n * - Play toast that has a given id regardless the container\n * ```\n * toast.play({ id: \"123\" })\n * ```\n *\n * - Play toast that has a given id for a specific container\n * ```\n * toast.play({ id: \"123\", containerId: \"12\" })\n * ```\n */\ntoast.play = (opts?: IdOpts) => toggleToast(true, opts);\n\n/**\n * Pause a toast(s) timer progammatically\n *\n * Usage:\n *\n * - Pause all toasts\n * ```\n * toast.pause()\n * ```\n *\n * - Pause all toasts for a given container\n * ```\n * toast.pause({ containerId: \"123\" })\n * ```\n *\n * - Pause toast that has a given id regardless the container\n * ```\n * toast.pause({ id: \"123\" })\n * ```\n *\n * - Pause toast that has a given id for a specific container\n * ```\n * toast.pause({ id: \"123\", containerId: \"12\" })\n * ```\n */\ntoast.pause = (opts?: IdOpts) => toggleToast(false, opts);\n\nexport { toast };\n","import { useRef, useSyncExternalStore } from 'react';\nimport { isToastActive, registerContainer } from '../core/store';\nimport { Toast, ToastContainerProps, ToastPosition } from '../types';\n\nexport function useToastContainer(props: ToastContainerProps) {\n const { subscribe, getSnapshot, setProps } = useRef(registerContainer(props)).current;\n setProps(props);\n const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)?.slice();\n\n function getToastToRender<T>(cb: (position: ToastPosition, toastList: Toast[]) => T) {\n if (!snapshot) return [];\n\n const toRender = new Map<ToastPosition, Toast[]>();\n\n if (props.newestOnTop) snapshot.reverse();\n\n snapshot.forEach(toast => {\n const { position } = toast.props;\n toRender.has(position) || toRender.set(position, []);\n toRender.get(position)!.push(toast);\n });\n\n return Array.from(toRender, p => cb(p[0], p[1]));\n }\n\n return {\n getToastToRender,\n isToastActive,\n count: snapshot?.length\n };\n}\n","import { DOMAttributes, useEffect, useRef, useState } from 'react';\n\nimport { ToastProps } from '../types';\nimport { Default, Direction } from '../utils';\nimport { registerToggle } from '../core/store';\n\ninterface Draggable {\n start: number;\n delta: number;\n removalDista