react-strawberry-toast 3.0.0 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -2,9 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
A simple and customizable React toast library
|
|
4
4
|
|
|
5
|
+
## Demo
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- **Lightweight** - Less than 11kb bundle size ⚡
|
|
12
|
+
- **3 Built-in Themes** - Ready-to-use style presets (more coming soon)
|
|
13
|
+
- **Promise Support** - Handle async operations with loading, success, and error states
|
|
14
|
+
- **Headless Mode** - Full control over rendering with `useToasts` hook
|
|
15
|
+
- **Easy Customization** - Style with CSS, Tailwind, Emotion, or inline styles 🎨
|
|
16
|
+
- **Stack Mode** - Overlay toasts in a compact stacked view 🔔
|
|
17
|
+
- **Flexible Positioning** - Place toasts anywhere, even relative to target elements like tooltips
|
|
18
|
+
- **More Options Coming Soon** - Actively maintained and evolving 🍓
|
|
19
|
+
|
|
5
20
|
## Documentation
|
|
6
21
|
|
|
7
|
-
For more detailed information, please refer to the official [Documentation](https://
|
|
22
|
+
For more detailed information, please refer to the official [Documentation](https://react-strawberry-toast.com/)
|
|
8
23
|
|
|
9
24
|
## Installation
|
|
10
25
|
|
|
@@ -53,6 +68,7 @@ function App() {
|
|
|
53
68
|
| style | Style of ToastContainer | Object | |
|
|
54
69
|
| gap | Gap Between toasts | Number | 9 |
|
|
55
70
|
| pauseOnActivate | Pause Toast timer when blur events occurs | Boolean | true |
|
|
71
|
+
| stack | Allow toast overlap | Boolean | false |
|
|
56
72
|
|
|
57
73
|
|
|
58
74
|
### toast
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var q=Object.defineProperty;var gt=Object.getOwnPropertyDescriptor;var St=Object.getOwnPropertyNames;var Et=Object.prototype.hasOwnProperty;var bt=(t,s)=>{for(var e in s)q(t,e,{get:s[e],enumerable:!0})},wt=(t,s,e,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of St(s))!Et.call(t,l)&&l!==e&&q(t,l,{get:()=>s[l],enumerable:!(c=gt(s,l))||c.enumerable});return t};var It=t=>wt(q({},"__esModule",{value:!0}),t);var Ot={};bt(Ot,{ToastContainer:()=>Ct,toast:()=>o,toastStore:()=>S,useToasts:()=>Q});module.exports=It(Ot);var rt=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var U=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(s){return this.listeners.add(s),()=>{this.listeners.delete(s)}}setState(s){this.state=typeof s=="function"?s(this.state):s,this.listeners.forEach(e=>e())}getSnapShot(){return this.state}};var p="react-strawberry-toast";var T=require("react/jsx-runtime");function At(){return(0,T.jsx)("svg",{stroke:"none",fill:"none",strokeWidth:"0",viewBox:"2 2 20 20",strokeLinecap:"round",strokeLinejoin:"round",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:(0,T.jsx)("path",{className:"react-strawberry-toast-path",d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"var(--toast-color-success)"})})}function nt({fill:t}){return(0,T.jsx)("svg",{stroke:"none",fill:t,strokeWidth:"2",viewBox:"2 2 20 20",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:(0,T.jsx)("path",{className:"react-strawberry-toast-path",d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"})})}function _t(){return(0,T.jsx)("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"56 120 912 800",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:(0,T.jsx)("path",{className:"react-strawberry-toast-path",d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"})})}function W(){return(0,T.jsx)("svg",{fill:"var(--toast-close-button)",strokeWidth:"0",viewBox:"112 112 288 288",height:"8",width:"8",xmlns:"http://www.w3.org/2000/svg",children:(0,T.jsx)("path",{className:"react-strawberry-toast-path",d:"M400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z"})})}var v={success:(0,T.jsx)(At,{}),error:(0,T.jsx)(nt,{fill:"var(--toast-color-error)"}),loading:(0,T.jsx)("div",{className:`${p}__loading`}),warn:(0,T.jsx)(_t,{}),info:(0,T.jsx)(nt,{fill:"var(--toast-color-info)"})};var it=t=>{let s=r=>{let n=t.toastTimers.get(r);clearTimeout(n),t.toastTimers.delete(r)},e=r=>{t.activatedToasts.add(r)},c=r=>t.activatedToasts.has(r),l=(r,n=200)=>{c(r)&&(t.activatedToasts.delete(r),setTimeout(()=>{t.state=t.state.filter(a=>a.toastId!==r),t.setState([...t.state])},n),s(r))},b=()=>{t.state.forEach(r=>{u(r.toastId,0)})},d=(r,n,a)=>{t.state=t.state.map(i=>i.toastId===r?{...i,...a,updated:new Date().getTime(),data:n}:i),t.setState([...t.state])},y=r=>{let n=new Date().getTime();t.state=t.state.map(a=>a.toastId===r?{...a,pausedAt:n}:a),s(r)},u=(r,n)=>{let a=window.setTimeout(()=>{var m;t.state=t.state.map(w=>w.toastId===r?{...w,isVisible:!1}:w),t.setState([...t.state]);let i=(m=t.state.find(w=>w.toastId===r))==null?void 0:m.removeTimeOut;l(r,i)},n>2147483647?2147483647:n);t.toastTimers.set(r,a)};return{setActive:e,isActive:c,disappear:u,resume:r=>{if(t.toastTimers.has(r))return;let n=t.state.find(i=>i.toastId===r);if(!n)return;let a=n.createdAt+(n.timeOut||3e3)-(n.pausedAt||0);u(r,a)},pause:y,replace:d,remove:l,allClear:b}};var S=new U,xt=rt(),C=(t="default")=>(s,e={})=>{let{timeOut:c=3e3,removeTimeOut:l=200,pauseOnHover:b=!0,toastId:d,className:y,style:u,target:h,closeButton:r}=e,n=d||xt();if(o.isActive(n))throw new Error("A duplicate custom ID is not available.");let a=new Date().getTime(),i={updated:null,pausedAt:null,className:y||null,style:u||{},icon:e.icon||null,containerId:e.containerId||null,position:e.position||null,timeOut:c>2147483647?2147483647:c,toastId:n,data:s,createdAt:a,toastType:t,pauseOnHover:b,removeTimeOut:l,closeButton:r||!1,target:h||null,isVisible:!0};return S.state.push(i),S.setState([...S.state]),n},o=(t,s={})=>C()(t,s),_=it(S);o.setActive=_.setActive;o.isActive=_.isActive;o.disappear=_.disappear;o.resume=_.resume;o.pause=_.pause;o.replace=_.replace;o.remove=_.remove;o.allClear=_.allClear;o.success=C("success");o.error=C("error");o.warn=C("warn");o.info=C("info");o.loading=C("loading");o.custom=C("custom");o.promise=(t,s,e={})=>{let{loading:c,success:l,error:b}=s,d=o.loading(c,{...e,timeOut:2147483647}),y={toastId:d,close:()=>o.disappear(d,0),immediatelyClose:()=>{o.disappear(d,0),o.remove(d,0)},Icons:{Success:()=>v.success,Error:()=>v.error,Warn:()=>v.warn,Loading:()=>v.loading,Info:()=>v.info,Close:W},isVisible:!0},u=e.timeOut||=3e3;t.then(h=>{o.replace(d,typeof l=="function"?l(h,y):l,{...e,timeOut:u>2147483647?2147483647:u,toastType:"success"})}).catch(h=>{o.replace(d,typeof b=="function"?b(h,y):b,{...e,timeOut:u>2147483647?2147483647:u,toastType:"error"})})};var A=require("react");var ct=require("react");function lt({condition:t,children:s}){let e=ct.Children.toArray(s);if(e.length>2)throw new Error("The number of children exceeds two.");return e.find(c=>t?c.key===".0":c.key===".1")}function pt({children:t}){return t}function dt({children:t}){return t}var ut=({isVisible:t,position:s})=>s?t?/top/i.test(s)?`${p}__fade-in`:`${p}__fade-in-reverse`:/bottom/i.test(s)?`${p}__fade-out-reverse`:`${p}__fade-out`:t?`${p}__fade-in`:`${p}__fade-out`;var D=require("react"),X=(t,s)=>{let e=(0,D.useRef)(s);(0,D.useEffect)(()=>{e.current=s},[s]),(0,D.useEffect)(()=>(window.addEventListener(t,e.current),()=>{window.removeEventListener(t,e.current)}),[t])};var E=require("react/jsx-runtime"),z=new Map;function K({toastProps:t}){let s=(0,A.useRef)(null),{toastId:e,isVisible:c,timeOut:l,containerId:b,className:d,style:y,icon:u,pauseOnActivate:h,updated:r,toastType:n,position:a,data:i,pauseOnHover:m,closeButton:w,toastsBySamePosition:O,gap:P,order:x,target:N,stack:B}=t,Z=ut({isVisible:c,position:a}),$=typeof i=="function"?i({toastId:e,close:()=>o.disappear(e,0),immediatelyClose:()=>{o.disappear(e,0),o.remove(e,0)},Icons:{Success:()=>v.success,Error:()=>v.error,Warn:()=>v.warn,Loading:()=>v.loading,Info:()=>v.info,Close:W},isVisible:c}):i,ft=()=>{h&&o.resume(e)},Tt=()=>{h&&o.pause(e)},tt=()=>{N&&requestAnimationFrame(()=>{if(s.current){let f=N.element.getBoundingClientRect(),[k,R]=N.offset||[0,0];s.current.style.top=`${f.y+R+window.scrollY}px`,s.current.style.left=`${f.x+k+window.scrollX}px`}})};X("focus",ft),X("blur",Tt),X("resize",tt),(0,A.useEffect)(()=>{o.isActive(e)||(o.setActive(e),o.disappear(e,l)),tt()},[e]),(0,A.useEffect)(()=>{if(!s.current||N)return;let f=s.current,k=z.get(e)||f.getBoundingClientRect().height;z.set(e,k);let R=/left/.test(a)?50:/center/.test(a)?0:-50,V=/bottom/.test(a),st=()=>{let L=V?-(P+k):0,H=O.slice(0,x).reduce((F,G)=>F+P+(z.get(G.toastId)||0),0);return L+(V?-H:H)};if(B){let L=O.length,H=L-1-x,F=O[L-1],G=z.get(F.toastId)||k,yt=1-H*.05,ot=H*10,vt=V?-(G+P):0,ht=V?-ot:ot,j=()=>{f.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",f.style.transform=`translate(${R}%, ${vt+ht}px) scale(${yt})`,f.style.zIndex=String(x+1),L-3>x&&(f.style.opacity="0")},at=()=>{f.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",f.style.transform=`translate(${R}%, ${st()}px) scale(1)`,f.style.opacity="1"};j();let g=f.parentElement;return g==null||g.addEventListener("mouseenter",at),g==null||g.addEventListener("mouseleave",j),()=>{g==null||g.removeEventListener("mouseenter",at),g==null||g.removeEventListener("mouseleave",j)}}return f.style.transition="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",f.style.transform=`translate(${R}%, ${st()}px)`,()=>{z.delete(e)}},[x,B,O.length]),(0,A.useEffect)(()=>{r!==null&&o.disappear(e,l)},[r]);let et=u||(n==="custom"||n==="default"?null:v[n]);return(0,E.jsx)("output",{role:"status",ref:s,className:`${p}__toast-content-container`,"aria-live":n==="error"?"assertive":"polite",tabIndex:0,onMouseEnter:()=>{m&&o.pause(e)},onMouseLeave:()=>{m&&o.resume(e)},children:(0,E.jsxs)(lt,{condition:n!=="custom",children:[(0,E.jsx)(pt,{children:(0,E.jsxs)("div",{className:`${p}__toast-content ${p}__toast-${n} ${o.isActive(e)?"":Z} ${d}`,style:y,children:[et&&(0,E.jsx)(E.Fragment,{children:et}),$,w&&(0,E.jsx)("button",{"aria-label":"Close Toast Button",className:`${p}__close-button`,onClick:()=>{o.disappear(e,0)},type:"button",children:(0,E.jsx)(W,{})})]})}),(0,E.jsx)(dt,{children:(0,A.isValidElement)($)?(0,A.cloneElement)($,{style:{...$.props.style,...y},className:`${$.props.className||""} ${o.isActive(e)?"":Z} ${d}`.trim()}):$})]})})}var mt=require("react");var Q=()=>(0,mt.useSyncExternalStore)(S.subscribe.bind(S),S.getSnapShot.bind(S),S.getSnapShot.bind(S));var M=require("react/jsx-runtime");function Ct({className:t,style:s,position:e="top-center",containerId:c="",gap:l=9,reverse:b=!1,pauseOnActivate:d=!0,stack:y=!1}){let u=Q(),h=a=>{var i;return(i=a.target)==null?void 0:i.element},r=a=>c?a.containerId===c:!a.containerId,n=u.filter(a=>!h(a)).reduce((a,i)=>{let m=i.position||e;return i.position=m,a[m]=a[m]||[],a[m].push(i),a},{});return(0,M.jsxs)("div",{id:`${p}__root`,"data-container-id":c,children:[u.filter(h).filter(r).map((a,i,m)=>{let w=Object.assign(a,{gap:l,order:i,toastsBySamePosition:m,pauseOnActivate:d,stack:y});return(0,M.jsx)(K,{toastProps:w},a.toastId)}),Object.entries(n).map(([a,i])=>{let m=i.filter(r),w=b&&!y?m.reverse():m,O=`${p}__toast-container ${p}__${a} ${t}`;return(0,M.jsx)("div",{className:O,style:s,children:w.map((P,x,N)=>{let B=Object.assign(P,{gap:l,order:x,toastsBySamePosition:N,pauseOnActivate:d,stack:y});return(0,M.jsx)(K,{toastProps:B},P.toastId)})},a)})]})}
|
|
2
|
+
"use strict";var q=Object.defineProperty;var gt=Object.getOwnPropertyDescriptor;var St=Object.getOwnPropertyNames;var Et=Object.prototype.hasOwnProperty;var wt=(t,s)=>{for(var e in s)q(t,e,{get:s[e],enumerable:!0})},bt=(t,s,e,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of St(s))!Et.call(t,l)&&l!==e&&q(t,l,{get:()=>s[l],enumerable:!(c=gt(s,l))||c.enumerable});return t};var It=t=>bt(q({},"__esModule",{value:!0}),t);var Pt={};wt(Pt,{ToastContainer:()=>xt,toast:()=>o,toastStore:()=>S,useToasts:()=>Q});module.exports=It(Pt);var rt=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var U=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(s){return this.listeners.add(s),()=>{this.listeners.delete(s)}}setState(s){this.state=typeof s=="function"?s(this.state):s,this.listeners.forEach(e=>e())}getSnapShot(){return this.state}};var p="react-strawberry-toast";var T=require("react/jsx-runtime");function At(){return(0,T.jsx)("svg",{stroke:"none",fill:"none",strokeWidth:"0",viewBox:"2 2 20 20",strokeLinecap:"round",strokeLinejoin:"round",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:(0,T.jsx)("path",{className:"react-strawberry-toast-path",d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"var(--toast-color-success)"})})}function nt({fill:t}){return(0,T.jsx)("svg",{stroke:"none",fill:t,strokeWidth:"2",viewBox:"2 2 20 20",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:(0,T.jsx)("path",{className:"react-strawberry-toast-path",d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"})})}function _t(){return(0,T.jsx)("svg",{stroke:"none",fill:"var(--toast-color-warn)",strokeWidth:"0",viewBox:"56 120 912 800",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:(0,T.jsx)("path",{className:"react-strawberry-toast-path",d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"})})}function W(){return(0,T.jsx)("svg",{fill:"var(--toast-close-button)",strokeWidth:"0",viewBox:"112 112 288 288",height:"8",width:"8",xmlns:"http://www.w3.org/2000/svg",children:(0,T.jsx)("path",{className:"react-strawberry-toast-path",d:"M400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z"})})}var v={success:(0,T.jsx)(At,{}),error:(0,T.jsx)(nt,{fill:"var(--toast-color-error)"}),loading:(0,T.jsx)("div",{className:`${p}__loading`}),warn:(0,T.jsx)(_t,{}),info:(0,T.jsx)(nt,{fill:"var(--toast-color-info)"})};var it=t=>{let s=r=>{let n=t.toastTimers.get(r);clearTimeout(n),t.toastTimers.delete(r)},e=r=>{t.activatedToasts.add(r)},c=r=>t.activatedToasts.has(r),l=(r,n=200)=>{c(r)&&(t.activatedToasts.delete(r),setTimeout(()=>{t.state=t.state.filter(a=>a.toastId!==r),t.setState([...t.state])},n),s(r))},w=()=>{t.state.forEach(r=>{u(r.toastId,0)})},d=(r,n,a)=>{t.state=t.state.map(i=>i.toastId===r?{...i,...a,updated:new Date().getTime(),data:n}:i),t.setState([...t.state])},y=r=>{let n=new Date().getTime();t.state=t.state.map(a=>a.toastId===r?{...a,pausedAt:n}:a),s(r)},u=(r,n)=>{let a=window.setTimeout(()=>{var m;t.state=t.state.map(b=>b.toastId===r?{...b,isVisible:!1}:b),t.setState([...t.state]);let i=(m=t.state.find(b=>b.toastId===r))==null?void 0:m.removeTimeOut;l(r,i)},n>2147483647?2147483647:n);t.toastTimers.set(r,a)};return{setActive:e,isActive:c,disappear:u,resume:r=>{if(t.toastTimers.has(r))return;let n=t.state.find(i=>i.toastId===r);if(!n)return;let a=n.createdAt+(n.timeOut||3e3)-(n.pausedAt||0);u(r,a)},pause:y,replace:d,remove:l,allClear:w}};var S=new U,Ct=rt(),x=(t="default")=>(s,e={})=>{let{timeOut:c=3e3,removeTimeOut:l=200,pauseOnHover:w=!0,toastId:d,className:y,style:u,target:h,closeButton:r}=e,n=d||Ct();if(o.isActive(n))throw new Error("A duplicate custom ID is not available.");let a=new Date().getTime(),i={updated:null,pausedAt:null,className:y||null,style:u||{},icon:e.icon||null,containerId:e.containerId||null,position:e.position||null,timeOut:c>2147483647?2147483647:c,toastId:n,data:s,createdAt:a,toastType:t,pauseOnHover:w,removeTimeOut:l,closeButton:r||!1,target:h||null,isVisible:!0};return S.state.push(i),S.setState([...S.state]),n},o=(t,s={})=>x()(t,s),_=it(S);o.setActive=_.setActive;o.isActive=_.isActive;o.disappear=_.disappear;o.resume=_.resume;o.pause=_.pause;o.replace=_.replace;o.remove=_.remove;o.allClear=_.allClear;o.success=x("success");o.error=x("error");o.warn=x("warn");o.info=x("info");o.loading=x("loading");o.custom=x("custom");o.promise=(t,s,e={})=>{let{loading:c,success:l,error:w}=s,d=o.loading(c,{...e,timeOut:2147483647}),y={toastId:d,close:()=>o.disappear(d,0),immediatelyClose:()=>{o.disappear(d,0),o.remove(d,0)},Icons:{Success:()=>v.success,Error:()=>v.error,Warn:()=>v.warn,Loading:()=>v.loading,Info:()=>v.info,Close:W},isVisible:!0},u=e.timeOut||=3e3;t.then(h=>{o.replace(d,typeof l=="function"?l(h,y):l,{...e,timeOut:u>2147483647?2147483647:u,toastType:"success"})}).catch(h=>{o.replace(d,typeof w=="function"?w(h,y):w,{...e,timeOut:u>2147483647?2147483647:u,toastType:"error"})})};var A=require("react");var ct=require("react");function lt({condition:t,children:s}){let e=ct.Children.toArray(s);if(e.length>2)throw new Error("The number of children exceeds two.");return e.find(c=>t?c.key===".0":c.key===".1")}function pt({children:t}){return t}function dt({children:t}){return t}var ut=({isVisible:t,position:s})=>s?t?/top/i.test(s)?`${p}__fade-in`:`${p}__fade-in-reverse`:/bottom/i.test(s)?`${p}__fade-out-reverse`:`${p}__fade-out`:t?`${p}__fade-in`:`${p}__fade-out`;var D=require("react"),X=(t,s)=>{let e=(0,D.useRef)(s);(0,D.useEffect)(()=>{e.current=s},[s]),(0,D.useEffect)(()=>(window.addEventListener(t,e.current),()=>{window.removeEventListener(t,e.current)}),[t])};var E=require("react/jsx-runtime"),z=new Map;function K({toastProps:t}){let s=(0,A.useRef)(null),{toastId:e,isVisible:c,timeOut:l,containerId:w,className:d,style:y,icon:u,pauseOnActivate:h,updated:r,toastType:n,position:a,data:i,pauseOnHover:m,closeButton:b,toastsBySamePosition:P,gap:O,order:C,target:N,stack:B}=t,Z=ut({isVisible:c,position:a}),$=typeof i=="function"?i({toastId:e,close:()=>o.disappear(e,0),immediatelyClose:()=>{o.disappear(e,0),o.remove(e,0)},Icons:{Success:()=>v.success,Error:()=>v.error,Warn:()=>v.warn,Loading:()=>v.loading,Info:()=>v.info,Close:W},isVisible:c}):i,ft=()=>{h&&o.resume(e)},Tt=()=>{h&&o.pause(e)},tt=()=>{N&&requestAnimationFrame(()=>{if(s.current){let f=N.element.getBoundingClientRect(),[R,k]=N.offset||[0,0];s.current.style.top=`${f.y+k+window.scrollY}px`,s.current.style.left=`${f.x+R+window.scrollX}px`}})};X("focus",ft),X("blur",Tt),X("resize",tt),(0,A.useEffect)(()=>{o.isActive(e)||(o.setActive(e),o.disappear(e,l)),tt()},[e]),(0,A.useEffect)(()=>{if(!s.current||N)return;let f=s.current,R=z.get(e)||f.getBoundingClientRect().height;z.set(e,R);let k=/left/.test(a)?50:/center/.test(a)?0:-50,V=/bottom/.test(a),st=()=>{let L=V?-(O+R):0,H=P.slice(0,C).reduce((F,G)=>F+O+(z.get(G.toastId)||0),0);return L+(V?-H:H)};if(B){let L=P.length,H=L-1-C,F=P[L-1],G=z.get(F.toastId)||R,yt=1-H*.05,ot=H*10,vt=V?-(G+O):0,ht=V?-ot:ot,j=()=>{f.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",f.style.transform=`translate(${k}%, ${vt+ht}px) scale(${yt})`,f.style.zIndex=String(C+1),L-3>C&&(f.style.opacity="0")},at=()=>{f.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",f.style.transform=`translate(${k}%, ${st()}px) scale(1)`,f.style.opacity="1"};j();let g=f.parentElement;return g==null||g.addEventListener("mouseenter",at),g==null||g.addEventListener("mouseleave",j),()=>{g==null||g.removeEventListener("mouseenter",at),g==null||g.removeEventListener("mouseleave",j)}}return f.style.transition="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",f.style.transform=`translate(${k}%, ${st()}px)`,()=>{z.delete(e)}},[C,B,P.length]),(0,A.useEffect)(()=>{r!==null&&o.disappear(e,l)},[r]);let et=u||(n==="custom"||n==="default"?null:v[n]);return(0,E.jsx)("output",{role:"status",ref:s,className:`${p}__toast-content-container`,"aria-live":n==="error"?"assertive":"polite",tabIndex:0,onMouseEnter:()=>{m&&o.pause(e)},onMouseLeave:()=>{m&&o.resume(e)},children:(0,E.jsxs)(lt,{condition:n!=="custom",children:[(0,E.jsx)(pt,{children:(0,E.jsxs)("div",{className:`${p}__toast-content ${p}__toast-${n} ${o.isActive(e)?"":Z} ${d}`,style:y,children:[et&&(0,E.jsx)(E.Fragment,{children:et}),$,b&&(0,E.jsx)("button",{"aria-label":"Close Toast Button",className:`${p}__close-button`,onClick:()=>{o.disappear(e,0)},type:"button",children:(0,E.jsx)(W,{})})]})}),(0,E.jsx)(dt,{children:(0,A.isValidElement)($)?(0,A.cloneElement)($,{style:{...$.props.style,...y},className:`${$.props.className||""} ${o.isActive(e)?"":Z} ${d}`.trim()}):$})]})})}var mt=require("react");var Q=()=>(0,mt.useSyncExternalStore)(S.subscribe.bind(S),S.getSnapShot.bind(S),S.getSnapShot.bind(S));var M=require("react/jsx-runtime");function xt({className:t,style:s,position:e="top-center",containerId:c="",gap:l=9,reverse:w=!1,pauseOnActivate:d=!0,stack:y=!1}){let u=Q(),h=a=>{var i;return(i=a.target)==null?void 0:i.element},r=a=>c?a.containerId===c:!a.containerId,n=u.filter(a=>!h(a)).reduce((a,i)=>{let m=i.position||e;return i.position=m,a[m]=a[m]||[],a[m].push(i),a},{});return(0,M.jsxs)("div",{id:`${p}__root`,"data-container-id":c,children:[u.filter(h).filter(r).map((a,i,m)=>{let b=Object.assign(a,{gap:l,order:i,toastsBySamePosition:m,pauseOnActivate:d,stack:y});return(0,M.jsx)(K,{toastProps:b},a.toastId)}),Object.entries(n).map(([a,i])=>{let m=i.filter(r),b=w&&!y?m.reverse():m,P=`${p}__toast-container ${p}__${a} ${t}`;return(0,M.jsx)("div",{className:P,style:s,children:b.map((O,C,N)=>{let B=Object.assign(O,{gap:l,order:C,toastsBySamePosition:N,pauseOnActivate:d,stack:y});return(0,M.jsx)(K,{toastProps:B},O.toastId)})},a)})]})}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var st=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var z=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(r){return this.listeners.add(r),()=>{this.listeners.delete(r)}}setState(r){this.state=typeof r=="function"?r(this.state):r,this.listeners.forEach(e=>e())}getSnapShot(){return this.state}};var c="react-strawberry-toast";import{jsx as y}from"react/jsx-runtime";function vt(){return y("svg",{stroke:"none",fill:"none",strokeWidth:"0",viewBox:"2 2 20 20",strokeLinecap:"round",strokeLinejoin:"round",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:y("path",{className:"react-strawberry-toast-path",d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"var(--toast-color-success)"})})}function ot({fill:t}){return y("svg",{stroke:"none",fill:t,strokeWidth:"2",viewBox:"2 2 20 20",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:y("path",{className:"react-strawberry-toast-path",d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"})})}function ht(){return y("svg",{stroke:"none",fill:"
|
|
2
|
+
var st=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var z=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(r){return this.listeners.add(r),()=>{this.listeners.delete(r)}}setState(r){this.state=typeof r=="function"?r(this.state):r,this.listeners.forEach(e=>e())}getSnapShot(){return this.state}};var c="react-strawberry-toast";import{jsx as y}from"react/jsx-runtime";function vt(){return y("svg",{stroke:"none",fill:"none",strokeWidth:"0",viewBox:"2 2 20 20",strokeLinecap:"round",strokeLinejoin:"round",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:y("path",{className:"react-strawberry-toast-path",d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"var(--toast-color-success)"})})}function ot({fill:t}){return y("svg",{stroke:"none",fill:t,strokeWidth:"2",viewBox:"2 2 20 20",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:y("path",{className:"react-strawberry-toast-path",d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"})})}function ht(){return y("svg",{stroke:"none",fill:"var(--toast-color-warn)",strokeWidth:"0",viewBox:"56 120 912 800",height:"18",width:"18",xmlns:"http://www.w3.org/2000/svg",children:y("path",{className:"react-strawberry-toast-path",d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"})})}function L(){return y("svg",{fill:"var(--toast-close-button)",strokeWidth:"0",viewBox:"112 112 288 288",height:"8",width:"8",xmlns:"http://www.w3.org/2000/svg",children:y("path",{className:"react-strawberry-toast-path",d:"M400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z"})})}var v={success:y(vt,{}),error:y(ot,{fill:"var(--toast-color-error)"}),loading:y("div",{className:`${c}__loading`}),warn:y(ht,{}),info:y(ot,{fill:"var(--toast-color-info)"})};var at=t=>{let r=a=>{let n=t.toastTimers.get(a);clearTimeout(n),t.toastTimers.delete(a)},e=a=>{t.activatedToasts.add(a)},l=a=>t.activatedToasts.has(a),m=(a,n=200)=>{l(a)&&(t.activatedToasts.delete(a),setTimeout(()=>{t.state=t.state.filter(s=>s.toastId!==a),t.setState([...t.state])},n),r(a))},S=()=>{t.state.forEach(a=>{d(a.toastId,0)})},p=(a,n,s)=>{t.state=t.state.map(i=>i.toastId===a?{...i,...s,updated:new Date().getTime(),data:n}:i),t.setState([...t.state])},T=a=>{let n=new Date().getTime();t.state=t.state.map(s=>s.toastId===a?{...s,pausedAt:n}:s),r(a)},d=(a,n)=>{let s=window.setTimeout(()=>{var u;t.state=t.state.map(E=>E.toastId===a?{...E,isVisible:!1}:E),t.setState([...t.state]);let i=(u=t.state.find(E=>E.toastId===a))==null?void 0:u.removeTimeOut;m(a,i)},n>2147483647?2147483647:n);t.toastTimers.set(a,s)};return{setActive:e,isActive:l,disappear:d,resume:a=>{if(t.toastTimers.has(a))return;let n=t.state.find(i=>i.toastId===a);if(!n)return;let s=n.createdAt+(n.timeOut||3e3)-(n.pausedAt||0);d(a,s)},pause:T,replace:p,remove:m,allClear:S}};var w=new z,gt=st(),_=(t="default")=>(r,e={})=>{let{timeOut:l=3e3,removeTimeOut:m=200,pauseOnHover:S=!0,toastId:p,className:T,style:d,target:h,closeButton:a}=e,n=p||gt();if(o.isActive(n))throw new Error("A duplicate custom ID is not available.");let s=new Date().getTime(),i={updated:null,pausedAt:null,className:T||null,style:d||{},icon:e.icon||null,containerId:e.containerId||null,position:e.position||null,timeOut:l>2147483647?2147483647:l,toastId:n,data:r,createdAt:s,toastType:t,pauseOnHover:S,removeTimeOut:m,closeButton:a||!1,target:h||null,isVisible:!0};return w.state.push(i),w.setState([...w.state]),n},o=(t,r={})=>_()(t,r),I=at(w);o.setActive=I.setActive;o.isActive=I.isActive;o.disappear=I.disappear;o.resume=I.resume;o.pause=I.pause;o.replace=I.replace;o.remove=I.remove;o.allClear=I.allClear;o.success=_("success");o.error=_("error");o.warn=_("warn");o.info=_("info");o.loading=_("loading");o.custom=_("custom");o.promise=(t,r,e={})=>{let{loading:l,success:m,error:S}=r,p=o.loading(l,{...e,timeOut:2147483647}),T={toastId:p,close:()=>o.disappear(p,0),immediatelyClose:()=>{o.disappear(p,0),o.remove(p,0)},Icons:{Success:()=>v.success,Error:()=>v.error,Warn:()=>v.warn,Loading:()=>v.loading,Info:()=>v.info,Close:L},isVisible:!0},d=e.timeOut||=3e3;t.then(h=>{o.replace(p,typeof m=="function"?m(h,T):m,{...e,timeOut:d>2147483647?2147483647:d,toastType:"success"})}).catch(h=>{o.replace(p,typeof S=="function"?S(h,T):S,{...e,timeOut:d>2147483647?2147483647:d,toastType:"error"})})};import{useEffect as G,useRef as wt,cloneElement as bt,isValidElement as It}from"react";import{Children as St}from"react";function rt({condition:t,children:r}){let e=St.toArray(r);if(e.length>2)throw new Error("The number of children exceeds two.");return e.find(l=>t?l.key===".0":l.key===".1")}function nt({children:t}){return t}function it({children:t}){return t}var ct=({isVisible:t,position:r})=>r?t?/top/i.test(r)?`${c}__fade-in`:`${c}__fade-in-reverse`:/bottom/i.test(r)?`${c}__fade-out-reverse`:`${c}__fade-out`:t?`${c}__fade-in`:`${c}__fade-out`;import{useEffect as lt,useRef as Et}from"react";var V=(t,r)=>{let e=Et(r);lt(()=>{e.current=r},[r]),lt(()=>(window.addEventListener(t,e.current),()=>{window.removeEventListener(t,e.current)}),[t])};import{Fragment as At,jsx as N,jsxs as pt}from"react/jsx-runtime";var H=new Map;function j({toastProps:t}){let r=wt(null),{toastId:e,isVisible:l,timeOut:m,containerId:S,className:p,style:T,icon:d,pauseOnActivate:h,updated:a,toastType:n,position:s,data:i,pauseOnHover:u,closeButton:E,toastsBySamePosition:C,gap:x,order:A,target:P,stack:W}=t,J=ct({isVisible:l,position:s}),O=typeof i=="function"?i({toastId:e,close:()=>o.disappear(e,0),immediatelyClose:()=>{o.disappear(e,0),o.remove(e,0)},Icons:{Success:()=>v.success,Error:()=>v.error,Warn:()=>v.warn,Loading:()=>v.loading,Info:()=>v.info,Close:L},isVisible:l}):i,ut=()=>{h&&o.resume(e)},mt=()=>{h&&o.pause(e)},K=()=>{P&&requestAnimationFrame(()=>{if(r.current){let f=P.element.getBoundingClientRect(),[$,M]=P.offset||[0,0];r.current.style.top=`${f.y+M+window.scrollY}px`,r.current.style.left=`${f.x+$+window.scrollX}px`}})};V("focus",ut),V("blur",mt),V("resize",K),G(()=>{o.isActive(e)||(o.setActive(e),o.disappear(e,m)),K()},[e]),G(()=>{if(!r.current||P)return;let f=r.current,$=H.get(e)||f.getBoundingClientRect().height;H.set(e,$);let M=/left/.test(s)?50:/center/.test(s)?0:-50,D=/bottom/.test(s),Z=()=>{let R=D?-(x+$):0,k=C.slice(0,A).reduce((U,Y)=>U+x+(H.get(Y.toastId)||0),0);return R+(D?-k:k)};if(W){let R=C.length,k=R-1-A,U=C[R-1],Y=H.get(U.toastId)||$,ft=1-k*.05,tt=k*10,Tt=D?-(Y+x):0,yt=D?-tt:tt,X=()=>{f.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",f.style.transform=`translate(${M}%, ${Tt+yt}px) scale(${ft})`,f.style.zIndex=String(A+1),R-3>A&&(f.style.opacity="0")},et=()=>{f.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",f.style.transform=`translate(${M}%, ${Z()}px) scale(1)`,f.style.opacity="1"};X();let g=f.parentElement;return g==null||g.addEventListener("mouseenter",et),g==null||g.addEventListener("mouseleave",X),()=>{g==null||g.removeEventListener("mouseenter",et),g==null||g.removeEventListener("mouseleave",X)}}return f.style.transition="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",f.style.transform=`translate(${M}%, ${Z()}px)`,()=>{H.delete(e)}},[A,W,C.length]),G(()=>{a!==null&&o.disappear(e,m)},[a]);let Q=d||(n==="custom"||n==="default"?null:v[n]);return N("output",{role:"status",ref:r,className:`${c}__toast-content-container`,"aria-live":n==="error"?"assertive":"polite",tabIndex:0,onMouseEnter:()=>{u&&o.pause(e)},onMouseLeave:()=>{u&&o.resume(e)},children:pt(rt,{condition:n!=="custom",children:[N(nt,{children:pt("div",{className:`${c}__toast-content ${c}__toast-${n} ${o.isActive(e)?"":J} ${p}`,style:T,children:[Q&&N(At,{children:Q}),O,E&&N("button",{"aria-label":"Close Toast Button",className:`${c}__close-button`,onClick:()=>{o.disappear(e,0)},type:"button",children:N(L,{})})]})}),N(it,{children:It(O)?bt(O,{style:{...O.props.style,...T},className:`${O.props.className||""} ${o.isActive(e)?"":J} ${p}`.trim()}):O})]})})}import{useSyncExternalStore as _t}from"react";var dt=()=>_t(w.subscribe.bind(w),w.getSnapShot.bind(w),w.getSnapShot.bind(w));import{jsx as q,jsxs as Ct}from"react/jsx-runtime";function le({className:t,style:r,position:e="top-center",containerId:l="",gap:m=9,reverse:S=!1,pauseOnActivate:p=!0,stack:T=!1}){let d=dt(),h=s=>{var i;return(i=s.target)==null?void 0:i.element},a=s=>l?s.containerId===l:!s.containerId,n=d.filter(s=>!h(s)).reduce((s,i)=>{let u=i.position||e;return i.position=u,s[u]=s[u]||[],s[u].push(i),s},{});return Ct("div",{id:`${c}__root`,"data-container-id":l,children:[d.filter(h).filter(a).map((s,i,u)=>{let E=Object.assign(s,{gap:m,order:i,toastsBySamePosition:u,pauseOnActivate:p,stack:T});return q(j,{toastProps:E},s.toastId)}),Object.entries(n).map(([s,i])=>{let u=i.filter(a),E=S&&!T?u.reverse():u,C=`${c}__toast-container ${c}__${s} ${t}`;return q("div",{className:C,style:r,children:E.map((x,A,P)=>{let W=Object.assign(x,{gap:m,order:A,toastsBySamePosition:P,pauseOnActivate:p,stack:T});return q(j,{toastProps:W},x.toastId)})},s)})]})}export{le as ToastContainer,o as toast,w as toastStore,dt as useToasts};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-strawberry-toast",
|
|
3
3
|
"description": "A simple and customizable React toast library",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.1.0",
|
|
5
5
|
"author": "dkpark10",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"keywords": [
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"bugs": {
|
|
21
21
|
"url": "https://github.com/dkpark10/react-strawberry-toast/issues"
|
|
22
22
|
},
|
|
23
|
-
"homepage": "https://
|
|
23
|
+
"homepage": "https://react-strawberry-toast.com/",
|
|
24
24
|
"main": "./dist/index.js",
|
|
25
25
|
"types": "./dist/index.d.ts",
|
|
26
26
|
"exports": {
|
|
@@ -54,10 +54,11 @@
|
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "tsup",
|
|
56
56
|
"test": "vitest",
|
|
57
|
+
"test:coverage": "vitest run --coverage",
|
|
57
58
|
"test:e2e": "npx playwright test",
|
|
58
59
|
"test:e2e:ui": "npx playwright test --ui",
|
|
59
60
|
"test:e2e:update": "npx playwright test --update-snapshots",
|
|
60
|
-
"prepare": "cp ../../README.md ./README.md",
|
|
61
|
+
"prepare": "cp ../../README.md ./README.md && pnpm exec playwright install",
|
|
61
62
|
"deploy": "pnpm run prepare && pnpm run test --run && pnpm run test:e2e && pnpm run build && npm publish --access=public"
|
|
62
63
|
},
|
|
63
64
|
"devDependencies": {
|
|
@@ -67,6 +68,7 @@
|
|
|
67
68
|
"@types/node": "^20",
|
|
68
69
|
"@types/react": "^18",
|
|
69
70
|
"@types/react-dom": "^18",
|
|
71
|
+
"@vitest/coverage-v8": "^1.6.0",
|
|
70
72
|
"concurrently": "^9.1.0",
|
|
71
73
|
"esbuild-sass-plugin": "^3.3.1",
|
|
72
74
|
"jsdom": "^24.0.0",
|