react-strawberry-toast 2.2.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/headless.d.mts +2 -1
- package/dist/headless.d.ts +2 -1
- package/dist/index.d.mts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/style.css +1 -1
- package/dist/style2.css +1 -1
- package/dist/style3.css +1 -1
- package/package.json +7 -4
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/headless.d.mts
CHANGED
|
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
|
|
3
3
|
type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
|
|
4
4
|
type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn' | 'info';
|
|
5
|
+
type CapitalizedToastType = Capitalize<ToastType>;
|
|
5
6
|
interface BaseOptions {
|
|
6
7
|
toastId?: string;
|
|
7
8
|
timeOut?: number;
|
|
@@ -33,7 +34,7 @@ interface ToastDataCallback {
|
|
|
33
34
|
close: () => void;
|
|
34
35
|
immediatelyClose: () => void;
|
|
35
36
|
isVisible: boolean;
|
|
36
|
-
|
|
37
|
+
Icons: Record<Exclude<CapitalizedToastType, 'Default' | 'Custom'> | 'Close', () => ReactNode>;
|
|
37
38
|
}
|
|
38
39
|
type ToastState = ToastBaseState & BaseOptions;
|
|
39
40
|
type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
|
package/dist/headless.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
|
|
3
3
|
type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
|
|
4
4
|
type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn' | 'info';
|
|
5
|
+
type CapitalizedToastType = Capitalize<ToastType>;
|
|
5
6
|
interface BaseOptions {
|
|
6
7
|
toastId?: string;
|
|
7
8
|
timeOut?: number;
|
|
@@ -33,7 +34,7 @@ interface ToastDataCallback {
|
|
|
33
34
|
close: () => void;
|
|
34
35
|
immediatelyClose: () => void;
|
|
35
36
|
isVisible: boolean;
|
|
36
|
-
|
|
37
|
+
Icons: Record<Exclude<CapitalizedToastType, 'Default' | 'Custom'> | 'Close', () => ReactNode>;
|
|
37
38
|
}
|
|
38
39
|
type ToastState = ToastBaseState & BaseOptions;
|
|
39
40
|
type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
|
package/dist/index.d.mts
CHANGED
|
@@ -3,6 +3,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
3
3
|
|
|
4
4
|
type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
|
|
5
5
|
type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn' | 'info';
|
|
6
|
+
type CapitalizedToastType = Capitalize<ToastType>;
|
|
6
7
|
interface BaseOptions {
|
|
7
8
|
toastId?: string;
|
|
8
9
|
timeOut?: number;
|
|
@@ -34,7 +35,7 @@ interface ToastDataCallback {
|
|
|
34
35
|
close: () => void;
|
|
35
36
|
immediatelyClose: () => void;
|
|
36
37
|
isVisible: boolean;
|
|
37
|
-
|
|
38
|
+
Icons: Record<Exclude<CapitalizedToastType, 'Default' | 'Custom'> | 'Close', () => ReactNode>;
|
|
38
39
|
}
|
|
39
40
|
type ToastState = ToastBaseState & BaseOptions;
|
|
40
41
|
type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
|
|
@@ -106,4 +107,4 @@ declare function ToastContainer({ className, style, position: globalPosition, co
|
|
|
106
107
|
|
|
107
108
|
declare const useToasts: () => Array<NonHeadlessToastState>;
|
|
108
109
|
|
|
109
|
-
export { type AddionalProps, type BaseOptions, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastContainerProps, type ToastDataCallback, type ToastDataWithCallback, type ToastState, type ToastType, type ToasterProps, toast, toastStore, useToasts };
|
|
110
|
+
export { type AddionalProps, type BaseOptions, type CapitalizedToastType, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastContainerProps, type ToastDataCallback, type ToastDataWithCallback, type ToastState, type ToastType, type ToasterProps, toast, toastStore, useToasts };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
3
3
|
|
|
4
4
|
type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
|
|
5
5
|
type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn' | 'info';
|
|
6
|
+
type CapitalizedToastType = Capitalize<ToastType>;
|
|
6
7
|
interface BaseOptions {
|
|
7
8
|
toastId?: string;
|
|
8
9
|
timeOut?: number;
|
|
@@ -34,7 +35,7 @@ interface ToastDataCallback {
|
|
|
34
35
|
close: () => void;
|
|
35
36
|
immediatelyClose: () => void;
|
|
36
37
|
isVisible: boolean;
|
|
37
|
-
|
|
38
|
+
Icons: Record<Exclude<CapitalizedToastType, 'Default' | 'Custom'> | 'Close', () => ReactNode>;
|
|
38
39
|
}
|
|
39
40
|
type ToastState = ToastBaseState & BaseOptions;
|
|
40
41
|
type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
|
|
@@ -106,4 +107,4 @@ declare function ToastContainer({ className, style, position: globalPosition, co
|
|
|
106
107
|
|
|
107
108
|
declare const useToasts: () => Array<NonHeadlessToastState>;
|
|
108
109
|
|
|
109
|
-
export { type AddionalProps, type BaseOptions, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastContainerProps, type ToastDataCallback, type ToastDataWithCallback, type ToastState, type ToastType, type ToasterProps, toast, toastStore, useToasts };
|
|
110
|
+
export { type AddionalProps, type BaseOptions, type CapitalizedToastType, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastContainerProps, type ToastDataCallback, type ToastDataWithCallback, type ToastState, type ToastType, type ToasterProps, toast, toastStore, useToasts };
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var G=Object.defineProperty;var gt=Object.getOwnPropertyDescriptor;var St=Object.getOwnPropertyNames;var bt=Object.prototype.hasOwnProperty;var wt=(t,s)=>{for(var e in s)G(t,e,{get:s[e],enumerable:!0})},Et=(t,s,e,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of St(s))!bt.call(t,l)&&l!==e&&G(t,l,{get:()=>s[l],enumerable:!(c=gt(s,l))||c.enumerable});return t};var _t=t=>Et(G({},"__esModule",{value:!0}),t);var Ot={};wt(Ot,{ToastContainer:()=>Ct,toast:()=>o,toastStore:()=>S,useToasts:()=>J});module.exports=_t(Ot);var at=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var B=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 m=require("react/jsx-runtime");function At(){return(0,m.jsxs)("svg",{stroke:"none",fill:"none",strokeWidth:"2",viewBox:"0 0 24 24",strokeLinecap:"round",strokeLinejoin:"round",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:[(0,m.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z"}),(0,m.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 rt({fill:t}){return(0,m.jsx)("svg",{stroke:"none",fill:t,strokeWidth:"2",viewBox:"0 0 24 24",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:(0,m.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 It(){return(0,m.jsx)("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"0 0 1024 1024",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:(0,m.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 nt(){return(0,m.jsx)("svg",{fill:"#8b8b8b",strokeWidth:"0",viewBox:"0 0 512 512",height:"15px",width:"15px",xmlns:"http://www.w3.org/2000/svg",children:(0,m.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,m.jsx)(At,{}),error:(0,m.jsx)(rt,{fill:"var(--toast-color-error)"}),loading:(0,m.jsx)("div",{className:`${p}__loading`}),warn:(0,m.jsx)(It,{}),info:(0,m.jsx)(rt,{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 f;t.state=t.state.map(w=>w.toastId===r?{...w,isVisible:!1}:w),t.setState([...t.state]);let i=(f=t.state.find(w=>w.toastId===r))==null?void 0:f.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 B,xt=at(),x=(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={})=>x()(t,s),A=it(S);o.setActive=A.setActive;o.isActive=A.isActive;o.disappear=A.disappear;o.resume=A.resume;o.pause=A.pause;o.replace=A.replace;o.remove=A.remove;o.allClear=A.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: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},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 N=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 H=require("react"),U=(t,s)=>{let e=(0,H.useRef)(s);(0,H.useEffect)(()=>{e.current=s},[s]),(0,H.useEffect)(()=>(window.addEventListener(t,e.current),()=>{window.removeEventListener(t,e.current)}),[t])};var E=require("react/jsx-runtime"),z=new Map;function q({toastProps:t}){let s=(0,N.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:f,closeButton:w,toastsBySamePosition:C,gap:O,order:I,target:P,stack:D}=t,K=ut({isVisible:c,position:a}),Q=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},isVisible:c}):i,ft=()=>{h&&o.resume(e)},Tt=()=>{h&&o.pause(e)},Z=()=>{P&&requestAnimationFrame(()=>{if(s.current){let T=P.element.getBoundingClientRect(),[M,k]=P.offset||[0,0];s.current.style.top=`${T.y+k+window.scrollY}px`,s.current.style.left=`${T.x+M+window.scrollX}px`}})};U("focus",ft),U("blur",Tt),U("resize",Z),(0,N.useEffect)(()=>{o.isActive(e)||(o.setActive(e),o.disappear(e,l)),Z()},[e]),(0,N.useEffect)(()=>{if(!s.current||P)return;let T=s.current,M=z.get(e)||T.getBoundingClientRect().height;z.set(e,M);let k=/left/.test(a)?50:/center/.test(a)?0:-50,W=/bottom/.test(a),et=()=>{let R=W?-(O+M):0,L=C.slice(0,I).reduce((Y,X)=>Y+O+(z.get(X.toastId)||0),0);return R+(W?-L:L)};if(D){let R=C.length,L=R-1-I,Y=C[R-1],X=z.get(Y.toastId)||M,vt=1-L*.05,st=L*12,yt=W?-(X+O):0,ht=W?-st:st,F=()=>{T.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",T.style.transform=`translate(${k}%, ${yt+ht}px) scale(${vt})`,T.style.zIndex=String(I+1),R-3>I&&(T.style.opacity="0")},ot=()=>{T.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",T.style.transform=`translate(${k}%, ${et()}px) scale(1)`,T.style.opacity="1"};F();let g=T.parentElement;return g==null||g.addEventListener("mouseenter",ot),g==null||g.addEventListener("mouseleave",F),()=>{g==null||g.removeEventListener("mouseenter",ot),g==null||g.removeEventListener("mouseleave",F)}}return T.style.transition="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",T.style.transform=`translate(${k}%, ${et()}px)`,()=>{z.delete(e)}},[I,D,C.length]),(0,N.useEffect)(()=>{r!==null&&o.disappear(e,l)},[r]);let tt=u||(n==="custom"||n==="default"?null:v[n]);return(0,E.jsx)("output",{role:"status",ref:s,className:`${p}__toast-content-container`,"data-testid":`container-${b||"default"}`,"aria-live":n==="error"?"assertive":"polite",tabIndex:0,onMouseEnter:()=>{f&&o.pause(e)},onMouseLeave:()=>{f&&o.resume(e)},children:(0,E.jsxs)(lt,{condition:n!=="custom",children:[(0,E.jsx)(pt,{children:(0,E.jsxs)("div",{className:d??`${p}__toast-content ${p}__toast-${n} ${o.isActive(e)?"":K}`,style:y,children:[tt&&(0,E.jsx)("span",{className:`${p}__toast-icon`,children:tt}),Q,w&&(0,E.jsx)("button",{"aria-label":"Close Toast Button","data-testid":`${e}__close-button`,className:`${p}__close-button`,onClick:()=>{o.disappear(e,0)},type:"button",children:(0,E.jsx)(nt,{})})]})}),(0,E.jsx)(dt,{children:(0,E.jsx)("div",{className:d??`${o.isActive(e)?"":K}`,children:Q})})]})})}var mt=require("react");var J=()=>(0,mt.useSyncExternalStore)(S.subscribe.bind(S),S.getSnapShot.bind(S),S.getSnapShot.bind(S));var $=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=J(),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 f=i.position||e;return i.position=f,a[f]=a[f]||[],a[f].push(i),a},{});return(0,$.jsxs)("div",{id:`${p}__root`,"data-container-id":c,children:[u.filter(h).filter(r).map((a,i,f)=>{let w=Object.assign(a,{gap:l,order:i,toastsBySamePosition:f,pauseOnActivate:d,stack:y});return(0,$.jsx)(q,{toastProps:w},a.toastId)}),Object.entries(n).map(([a,i])=>{let f=i.filter(r),w=b&&!y?f.reverse():f,C=`${p}__z9999 ${t??`${p}__toast-container ${p}__${a}`}`;return(0,$.jsx)("div",{"data-testid":a,className:C,style:s,children:w.map((O,I,P)=>{let D=Object.assign(O,{gap:l,order:I,toastsBySamePosition:P,pauseOnActivate:d,stack:y});return(0,$.jsx)(q,{toastProps:D},O.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
|
|
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/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__toast-container{--toast-color-success: #1dca82;--toast-color-error: #eb2639;--toast-color-warn: #fcba03;--toast-color-info: #5365e7;--toast-close-button: #8b8b8b;width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column;pointer-events:none}.react-strawberry-toast__top-left{top:var(--toast-offset, 16px);left:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__top-center{top:var(--toast-offset, 16px);left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:var(--toast-offset, 16px);right:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__bottom-left{bottom:calc(var(--toast-offset, 16px) - 8px);left:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__bottom-center{bottom:calc(var(--toast-offset, 16px) - 8px);left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:calc(var(--toast-offset, 16px) - 8px);right:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:auto}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}.react-strawberry-toast__toast-content{display:flex;align-items:center;box-sizing:border-box;background-color:var(--toast-bg, #fff);padding:var(--toast-padding-x, 8px) var(--toast-padding-y, 12px);gap:var(--toast-gap, 6px);border-radius:var(--toast-border-radius, 8px);box-shadow:var(--toast-box-shadow, 2px 2px 6px 2px rgba(0, 0, 0, .1));max-width:var(--toast-max-width, 368px)}.react-strawberry-toast__close-button{background:transparent;border:none;outline:none;width:8px;height:8px;cursor:pointer}
|
package/dist/style2.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__toast-container{--toast-color-success: #1dca82;--toast-color-error: #eb2639;--toast-color-warn: #fcba03;--toast-color-info: #5365e7;--toast-close-button: #8b8b8b;width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column;pointer-events:none}.react-strawberry-toast__top-left{top:var(--toast-offset, 16px);left:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__top-center{top:var(--toast-offset, 16px);left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:var(--toast-offset, 16px);right:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__bottom-left{bottom:calc(var(--toast-offset, 16px) - 8px);left:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__bottom-center{bottom:calc(var(--toast-offset, 16px) - 8px);left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:calc(var(--toast-offset, 16px) - 8px);right:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:auto}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}.react-strawberry-toast__toast-content{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--toast-gap, 6px);border-radius:var(--toast-border-radius, 8px);box-shadow:var(--toast-box-shadow, 2px 2px 6px 2px rgba(0, 0, 0, .1));max-width:var(--toast-max-width, 368px);background-color:var(--toast-bg, #fff);padding:var(--toast-padding-x, 8px) var(--toast-padding-y, 12px)}.react-strawberry-toast__toast-success:before{content:"";display:inline-block;top:0;left:0;width:6px;height:100%;position:absolute;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:var(--toast-color-success)}.react-strawberry-toast__toast-error:before{content:"";display:inline-block;top:0;left:0;width:6px;height:100%;position:absolute;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:var(--toast-color-error)}.react-strawberry-toast__toast-warn:before{content:"";display:inline-block;top:0;left:0;width:6px;height:100%;position:absolute;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:var(--toast-color-warn)}.react-strawberry-toast__toast-info:before{content:"";display:inline-block;top:0;left:0;width:6px;height:100%;position:absolute;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:var(--toast-color-info)}.react-strawberry-toast__close-button{background:transparent;border:none;outline:none;width:8px;height:8px;cursor:pointer;position:absolute;right:0;transform:translate(-10px)}
|
package/dist/style3.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:.2}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%) scale(.2);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.2}}.react-strawberry-toast__toast-container{--toast-color-success: #1dca82;--toast-color-error: #eb2639;--toast-color-warn: #fcba03;--toast-color-info: #5365e7;--toast-close-button: #8b8b8b;width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column;pointer-events:none}.react-strawberry-toast__top-left{top:var(--toast-offset, 16px);left:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__top-center{top:var(--toast-offset, 16px);left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:var(--toast-offset, 16px);right:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__bottom-left{bottom:calc(var(--toast-offset, 16px) - 8px);left:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__bottom-center{bottom:calc(var(--toast-offset, 16px) - 8px);left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:calc(var(--toast-offset, 16px) - 8px);right:calc(-50% + var(--toast-offset, 16px))}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:auto}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s cubic-bezier(.43,.14,.2,1.05)}.react-strawberry-toast__loading{width:18px;padding:3.5px;aspect-ratio:1;border-radius:50%;background:#6f6f70;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}.react-strawberry-toast__toast-content{position:relative;box-sizing:border-box;display:flex;align-items:center;padding:var(--toast-padding-x, 8px) var(--toast-padding-y, 12px);gap:var(--toast-gap, 6px);border-radius:var(--toast-border-radius, 8px);box-shadow:var(--toast-box-shadow, 2px 2px 6px 2px rgba(0, 0, 0, .1));max-width:var(--toast-max-width, 368px);background-color:var(--toast-bg, #fff)}.react-strawberry-toast__toast-success{color:#fff;background-color:var(--toast-color-success)}.react-strawberry-toast__toast-error{color:#fff;background-color:var(--toast-color-error)}.react-strawberry-toast__toast-warn{color:#fff;background-color:var(--toast-color-warn)}.react-strawberry-toast__toast-info{color:#fff;background-color:var(--toast-color-info)}.react-strawberry-toast__close-button{background:transparent;border:none;outline:none;width:8px;height:8px;cursor:pointer;position:absolute;right:0;transform:translate(-10px)}svg .react-strawberry-toast-path{fill:var(--toast-bg, #fff)}
|
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": "
|
|
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,12 @@
|
|
|
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
|
-
"
|
|
60
|
+
"test:e2e:update": "npx playwright test --update-snapshots",
|
|
61
|
+
"prepare": "cp ../../README.md ./README.md && pnpm exec playwright install",
|
|
62
|
+
"deploy": "pnpm run prepare && pnpm run test --run && pnpm run test:e2e && pnpm run build && npm publish --access=public"
|
|
61
63
|
},
|
|
62
64
|
"devDependencies": {
|
|
63
65
|
"@playwright/test": "^1.50.1",
|
|
@@ -66,6 +68,7 @@
|
|
|
66
68
|
"@types/node": "^20",
|
|
67
69
|
"@types/react": "^18",
|
|
68
70
|
"@types/react-dom": "^18",
|
|
71
|
+
"@vitest/coverage-v8": "^1.6.0",
|
|
69
72
|
"concurrently": "^9.1.0",
|
|
70
73
|
"esbuild-sass-plugin": "^3.3.1",
|
|
71
74
|
"jsdom": "^24.0.0",
|