@cookbookdev/sonner
Version:
An opinionated toast component for React.
2 lines • 15.8 kB
JavaScript
"use client";import t from"react";import Je from"react-dom";import S from"react";var Be=r=>{switch(r){case"success":return $e;case"info":return _e;case"warning":return We;case"error":return Ve;default:return null}},ze=Array(12).fill(0),Ce=({visible:r})=>S.createElement("div",{className:"sonner-loading-wrapper","data-visible":r},S.createElement("div",{className:"sonner-spinner"},ze.map((s,e)=>S.createElement("div",{className:"sonner-loading-bar",key:`spinner-bar-${e}`})))),$e=S.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",height:"20",width:"20"},S.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",clipRule:"evenodd"})),We=S.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",height:"20",width:"20"},S.createElement("path",{fillRule:"evenodd",d:"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",clipRule:"evenodd"})),_e=S.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",height:"20",width:"20"},S.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",clipRule:"evenodd"})),Ve=S.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",height:"20",width:"20"},S.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",clipRule:"evenodd"}));import Ie from"react";var De=()=>{let[r,s]=Ie.useState(document.hidden);return Ie.useEffect(()=>{let e=()=>{s(document.hidden)};return document.addEventListener("visibilitychange",e),()=>window.removeEventListener("visibilitychange",e)},[]),r};var ue=1,de=class{constructor(){this.subscribe=s=>(this.subscribers.push(s),()=>{let e=this.subscribers.indexOf(s);this.subscribers.splice(e,1)});this.publish=s=>{this.subscribers.forEach(e=>e(s))};this.addToast=s=>{this.publish(s),this.toasts=[...this.toasts,s]};this.create=s=>{var h;let{message:e,...a}=s,T=typeof(s==null?void 0:s.id)=="number"||((h=s.id)==null?void 0:h.length)>0?s.id:ue++,d=this.toasts.find(l=>l.id===T),g=s.dismissible===void 0?!0:s.dismissible;return d?this.toasts=this.toasts.map(l=>l.id===T?(this.publish({...l,...s,id:T,title:e}),{...l,...s,id:T,dismissible:g,title:e}):l):this.addToast({title:e,...a,dismissible:g,id:T}),T};this.dismiss=s=>(s||this.toasts.forEach(e=>{this.subscribers.forEach(a=>a({id:e.id,dismiss:!0}))}),this.subscribers.forEach(e=>e({id:s,dismiss:!0})),s);this.message=(s,e)=>this.create({...e,message:s});this.error=(s,e)=>this.create({...e,message:s,type:"error"});this.success=(s,e)=>this.create({...e,type:"success",message:s});this.info=(s,e)=>this.create({...e,type:"info",message:s});this.warning=(s,e)=>this.create({...e,type:"warning",message:s});this.loading=(s,e)=>this.create({...e,type:"loading",message:s});this.promise=(s,e)=>{if(!e)return;let a;e.loading!==void 0&&(a=this.create({...e,promise:s,type:"loading",message:e.loading,description:typeof e.description!="function"?e.description:void 0}));let T=s instanceof Promise?s:s(),d=a!==void 0;return T.then(async g=>{if(Ue(g)&&!g.ok){d=!1;let h=typeof e.error=="function"?await e.error(`HTTP error! status: ${g.status}`):e.error,l=typeof e.description=="function"?await e.description(`HTTP error! status: ${g.status}`):e.description;this.create({id:a,type:"error",message:h,description:l})}else if(e.success!==void 0){d=!1;let h=typeof e.success=="function"?await e.success(g):e.success,l=typeof e.description=="function"?await e.description(g):e.description;this.create({id:a,type:"success",message:h,description:l})}}).catch(async g=>{if(e.error!==void 0){d=!1;let h=typeof e.error=="function"?await e.error(g):e.error,l=typeof e.description=="function"?await e.description(g):e.description;this.create({id:a,type:"error",message:h,description:l})}}).finally(()=>{var g;d&&(this.dismiss(a),a=void 0),(g=e.finally)==null||g.call(e)}),a};this.custom=(s,e)=>{let a=(e==null?void 0:e.id)||ue++;return this.create({jsx:s(a),id:a,...e}),a};this.subscribers=[],this.toasts=[]}},x=new de,Oe=(r,s)=>{let e=(s==null?void 0:s.id)||ue++;return x.addToast({title:r,...s,id:e}),e},Ue=r=>r&&typeof r=="object"&&"ok"in r&&typeof r.ok=="boolean"&&"status"in r&&typeof r.status=="number",Ke=Oe,Xe=()=>x.toasts,Ye=Object.assign(Ke,{success:x.success,info:x.info,warning:x.warning,error:x.error,custom:x.custom,message:x.message,promise:x.promise,dismiss:x.dismiss,loading:x.loading},{getHistory:Xe});function O(r){return r.label!==void 0}var Ge=3,qe="32px",Qe=4e3,Ze=356,et=14,tt=20,st=200;function nt(...r){return r.filter(Boolean).join(" ")}var it=r=>{var he,ye,be,xe,we,ve,Re,Se,Ee,Pe;let{invert:s,toast:e,unstyled:a,interacting:T,setHeights:d,visibleToasts:g,heights:h,index:l,toasts:q,expanded:W,removeToast:U,defaultRichColors:Q,closeButton:o,style:K,cancelButtonStyle:X,actionButtonStyle:Z,className:ee="",descriptionClassName:te="",duration:Y,position:se,gap:C,loadingIcon:j,expandByDefault:_,classNames:i,icons:I,closeButtonAriaLabel:ne="Close toast",pauseWhenPageIsHidden:D,cn:v}=r,[F,ie]=t.useState(!1),[H,M]=t.useState(!1),[oe,E]=t.useState(!1),[A,re]=t.useState(!1),[u,p]=t.useState(0),[y,w]=t.useState(0),k=t.useRef(null),c=t.useRef(null),V=l===0,J=l+1<=g,b=e.type,P=e.dismissible!==!1,Me=e.className||"",Ae=e.descriptionClassName||"",G=t.useMemo(()=>h.findIndex(n=>n.toastId===e.id)||0,[h,e.id]),ke=t.useMemo(()=>{var n;return(n=e.closeButton)!=null?n:o},[e.closeButton,o]),me=t.useMemo(()=>e.duration||Y||Qe,[e.duration,Y]),ae=t.useRef(0),z=t.useRef(0),pe=t.useRef(0),$=t.useRef(null),[fe,Le]=se.split("-"),ge=t.useMemo(()=>h.reduce((n,m,f)=>f>=G?n:n+m.height,0),[h,G]),Te=De(),Fe=e.invert||s,ce=b==="loading";z.current=t.useMemo(()=>G*C+ge,[G,ge]),t.useEffect(()=>{ie(!0)},[]),t.useLayoutEffect(()=>{if(!F)return;let n=c.current,m=n.style.height;n.style.height="auto";let f=n.getBoundingClientRect().height;n.style.height=m,w(f),d(N=>N.find(R=>R.toastId===e.id)?N.map(R=>R.toastId===e.id?{...R,height:f}:R):[{toastId:e.id,height:f,position:e.position},...N])},[F,e.title,e.description,d,e.id]);let L=t.useCallback(()=>{M(!0),p(z.current),d(n=>n.filter(m=>m.toastId!==e.id)),setTimeout(()=>{U(e)},st)},[e,U,d,z]);t.useEffect(()=>{if(e.promise&&b==="loading"||e.duration===1/0||e.type==="loading")return;let n,m=me;return W||T||D&&Te?(()=>{if(pe.current<ae.current){let B=new Date().getTime()-ae.current;m=m-B}pe.current=new Date().getTime()})():(()=>{m!==1/0&&(ae.current=new Date().getTime(),n=setTimeout(()=>{var B;(B=e.onAutoClose)==null||B.call(e,e),L()},m))})(),()=>clearTimeout(n)},[W,T,_,e,me,L,e.promise,b,D,Te]),t.useEffect(()=>{let n=c.current;if(n){let m=n.getBoundingClientRect().height;return w(m),d(f=>[{toastId:e.id,height:m,position:e.position},...f]),()=>d(f=>f.filter(N=>N.toastId!==e.id))}},[d,e.id]),t.useEffect(()=>{e.delete&&L()},[L,e.delete]);function je(){return I!=null&&I.loading?t.createElement("div",{className:"sonner-loader","data-visible":b==="loading"},I.loading):j?t.createElement("div",{className:"sonner-loader","data-visible":b==="loading"},j):t.createElement(Ce,{visible:b==="loading"})}return t.createElement("li",{"aria-live":e.important?"assertive":"polite","aria-atomic":"true",role:"status",tabIndex:0,ref:c,className:v(ee,Me,i==null?void 0:i.toast,(he=e==null?void 0:e.classNames)==null?void 0:he.toast,i==null?void 0:i.default,i==null?void 0:i[b],(ye=e==null?void 0:e.classNames)==null?void 0:ye[b]),"data-sonner-toast":"","data-rich-colors":(be=e.richColors)!=null?be:Q,"data-styled":!(e.jsx||e.unstyled||a),"data-mounted":F,"data-promise":!!e.promise,"data-removed":H,"data-visible":J,"data-y-position":fe,"data-x-position":Le,"data-index":l,"data-front":V,"data-swiping":oe,"data-dismissible":P,"data-type":b,"data-invert":Fe,"data-swipe-out":A,"data-expanded":!!(W||_&&F),style:{"--index":l,"--toasts-before":l,"--z-index":q.length-l,"--offset":`${H?u:z.current}px`,"--initial-height":_?"auto":`${y}px`,...K,...e.style},onPointerDown:n=>{ce||!P||(k.current=new Date,p(z.current),n.target.setPointerCapture(n.pointerId),n.target.tagName!=="BUTTON"&&(E(!0),$.current={x:n.clientX,y:n.clientY}))},onPointerUp:()=>{var N,B,R,le;if(A||!P)return;$.current=null;let n=Number(((N=c.current)==null?void 0:N.style.getPropertyValue("--swipe-amount").replace("px",""))||0),m=new Date().getTime()-((B=k.current)==null?void 0:B.getTime()),f=Math.abs(n)/m;if(Math.abs(n)>=tt||f>.11){p(z.current),(R=e.onDismiss)==null||R.call(e,e),L(),re(!0);return}(le=c.current)==null||le.style.setProperty("--swipe-amount","0px"),E(!1)},onPointerMove:n=>{var Ne;if(!$.current||!P)return;let m=n.clientY-$.current.y,f=n.clientX-$.current.x,B=(fe==="top"?Math.min:Math.max)(0,m),R=n.pointerType==="touch"?10:2;Math.abs(B)>R?(Ne=c.current)==null||Ne.style.setProperty("--swipe-amount",`${m}px`):Math.abs(f)>R&&($.current=null)}},ke&&!e.jsx?t.createElement("button",{"aria-label":ne,"data-disabled":ce,"data-close-button":!0,onClick:ce||!P?()=>{}:()=>{var n;L(),(n=e.onDismiss)==null||n.call(e,e)},className:v(i==null?void 0:i.closeButton,(xe=e==null?void 0:e.classNames)==null?void 0:xe.closeButton)},t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"},t.createElement("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),t.createElement("line",{x1:"6",y1:"6",x2:"18",y2:"18"}))):null,e.jsx||t.isValidElement(e.title)?e.jsx||e.title:t.createElement(t.Fragment,null,b||e.icon||e.promise?t.createElement("div",{"data-icon":"",className:v(i==null?void 0:i.icon,(we=e==null?void 0:e.classNames)==null?void 0:we.icon)},e.promise||e.type==="loading"&&!e.icon?e.icon||je():null,e.type!=="loading"?e.icon||(I==null?void 0:I[b])||Be(b):null):null,t.createElement("div",{"data-content":"",className:v(i==null?void 0:i.content,(ve=e==null?void 0:e.classNames)==null?void 0:ve.content)},t.createElement("div",{"data-title":"",className:v(i==null?void 0:i.title,(Re=e==null?void 0:e.classNames)==null?void 0:Re.title)},e.title),e.description?t.createElement("div",{"data-description":"",className:v(te,Ae,i==null?void 0:i.description,(Se=e==null?void 0:e.classNames)==null?void 0:Se.description)},e.description):null),t.isValidElement(e.cancel)?e.cancel:e.cancel&&O(e.cancel)?t.createElement("button",{"data-button":!0,"data-cancel":!0,style:e.cancelButtonStyle||X,onClick:n=>{var m,f;O(e.cancel)&&P&&((f=(m=e.cancel).onClick)==null||f.call(m,n),L())},className:v(i==null?void 0:i.cancelButton,(Ee=e==null?void 0:e.classNames)==null?void 0:Ee.cancelButton)},e.cancel.label):null,t.isValidElement(e.action)?e.action:e.action&&O(e.action)?t.createElement("button",{"data-button":!0,"data-action":!0,style:e.actionButtonStyle||Z,onClick:n=>{var m,f;O(e.action)&&(n.defaultPrevented||((f=(m=e.action).onClick)==null||f.call(m,n),L()))},className:v(i==null?void 0:i.actionButton,(Pe=e==null?void 0:e.classNames)==null?void 0:Pe.actionButton)},e.action.label):null))};function He(){if(typeof window=="undefined"||typeof document=="undefined")return"ltr";let r=document.documentElement.getAttribute("dir");return r==="auto"||!r?window.getComputedStyle(document.documentElement).direction:r}function ht(){let[r,s]=t.useState([]);return t.useEffect(()=>x.subscribe(e=>{s(a=>{if("dismiss"in e&&e.dismiss)return a.filter(d=>d.id!==e.id);let T=a.findIndex(d=>d.id===e.id);if(T!==-1){let d=[...a];return d[T]={...d[T],...e},d}else return[e,...a]})}),[]),{toasts:r}}var yt=r=>{let{invert:s,position:e="bottom-right",hotkey:a=["altKey","KeyT"],expand:T,closeButton:d,className:g,offset:h,theme:l="light",richColors:q,duration:W,style:U,visibleToasts:Q=Ge,toastOptions:o,dir:K=He(),gap:X=et,loadingIcon:Z,icons:ee,containerAriaLabel:te="Notifications",pauseWhenPageIsHidden:Y,cn:se=nt}=r,[C,j]=t.useState([]),_=t.useMemo(()=>Array.from(new Set([e].concat(C.filter(u=>u.position).map(u=>u.position)))),[C,e]),[i,I]=t.useState([]),[ne,D]=t.useState(!1),[v,F]=t.useState(!1),[ie,H]=t.useState(l!=="system"?l:typeof window!="undefined"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),M=t.useRef(null),oe=a.join("+").replace(/Key/g,"").replace(/Digit/g,""),E=t.useRef(null),A=t.useRef(!1),re=t.useCallback(u=>{j(p=>{var y;return(y=p.find(w=>w.id===u.id))!=null&&y.delete||x.dismiss(u.id),p.filter(({id:w})=>w!==u.id)})},[]);return t.useEffect(()=>x.subscribe(u=>{if(u.dismiss){j(p=>p.map(y=>y.id===u.id?{...y,delete:!0}:y));return}setTimeout(()=>{Je.flushSync(()=>{j(p=>{let y=p.findIndex(w=>w.id===u.id);return y!==-1?[...p.slice(0,y),{...p[y],...u},...p.slice(y+1)]:[u,...p]})})})}),[]),t.useEffect(()=>{if(l!=="system"){H(l);return}l==="system"&&(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?H("dark"):H("light")),typeof window!="undefined"&&window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",({matches:u})=>{H(u?"dark":"light")})},[l]),t.useEffect(()=>{C.length<=1&&D(!1)},[C]),t.useEffect(()=>{let u=p=>{var w,k;a.every(c=>p[c]||p.code===c)&&(D(!0),(w=M.current)==null||w.focus()),p.code==="Escape"&&(document.activeElement===M.current||(k=M.current)!=null&&k.contains(document.activeElement))&&D(!1)};return document.addEventListener("keydown",u),()=>document.removeEventListener("keydown",u)},[a]),t.useEffect(()=>{if(M.current)return()=>{E.current&&(E.current.focus({preventScroll:!0}),E.current=null,A.current=!1)}},[M.current]),C.length?t.createElement("section",{"aria-label":`${te} ${oe}`,tabIndex:-1},_.map((u,p)=>{var k;let[y,w]=u.split("-");return t.createElement("ol",{key:u,dir:K==="auto"?He():K,tabIndex:-1,ref:M,className:g,"data-sonner-toaster":!0,"data-theme":ie,"data-y-position":y,"data-x-position":w,style:{"--front-toast-height":`${((k=i[0])==null?void 0:k.height)||0}px`,"--offset":typeof h=="number"?`${h}px`:h||qe,"--width":`${Ze}px`,"--gap":`${X}px`,...U},onBlur:c=>{A.current&&!c.currentTarget.contains(c.relatedTarget)&&(A.current=!1,E.current&&(E.current.focus({preventScroll:!0}),E.current=null))},onFocus:c=>{c.target instanceof HTMLElement&&c.target.dataset.dismissible==="false"||A.current||(A.current=!0,E.current=c.relatedTarget)},onMouseEnter:()=>D(!0),onMouseMove:()=>D(!0),onMouseLeave:()=>{v||D(!1)},onPointerDown:c=>{c.target instanceof HTMLElement&&c.target.dataset.dismissible==="false"||F(!0)},onPointerUp:()=>F(!1)},C.filter(c=>!c.position&&p===0||c.position===u).map((c,V)=>{var J,b;return t.createElement(it,{key:c.id,icons:ee,index:V,toast:c,defaultRichColors:q,duration:(J=o==null?void 0:o.duration)!=null?J:W,className:o==null?void 0:o.className,descriptionClassName:o==null?void 0:o.descriptionClassName,invert:s,visibleToasts:Q,closeButton:(b=o==null?void 0:o.closeButton)!=null?b:d,interacting:v,position:u,style:o==null?void 0:o.style,unstyled:o==null?void 0:o.unstyled,classNames:o==null?void 0:o.classNames,cancelButtonStyle:o==null?void 0:o.cancelButtonStyle,actionButtonStyle:o==null?void 0:o.actionButtonStyle,removeToast:re,toasts:C.filter(P=>P.position==c.position),heights:i.filter(P=>P.position==c.position),setHeights:I,expandByDefault:T,gap:X,loadingIcon:Z,expanded:ne,pauseWhenPageIsHidden:Y,cn:se})}))})):null};export{yt as Toaster,Ye as toast,ht as useSonner};
//# sourceMappingURL=index.mjs.map