react-strawberry-toast 2.1.0 → 2.2.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/dist/headless.js +1 -1
- package/dist/headless.mjs +1 -1
- package/dist/index.d.mts +20 -12
- package/dist/index.d.ts +20 -12
- 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 +2 -2
package/dist/headless.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var v=Object.defineProperty;var
|
|
1
|
+
"use strict";var v=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var g=(t,s)=>{for(var r in s)v(t,r,{get:s[r],enumerable:!0})},U=(t,s,r,d)=>{if(s&&typeof s=="object"||typeof s=="function")for(let T of x(s))!_.call(t,T)&&T!==r&&v(t,T,{get:()=>s[T],enumerable:!(d=w(s,T))||d.enumerable});return t};var D=t=>U(v({},"__esModule",{value:!0}),t);var L={};g(L,{toast:()=>n,useToasts:()=>H});module.exports=D(L);var b=require("react");var M=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var f=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(r=>r())}getSnapShot(){return this.state}};var h=t=>{let s=e=>{let a=t.toastTimers.get(e);clearTimeout(a),t.toastTimers.delete(e)},r=e=>{t.activatedToasts.add(e)},d=e=>t.activatedToasts.has(e),T=(e,a=200)=>{d(e)&&(t.activatedToasts.delete(e),setTimeout(()=>{t.state=t.state.filter(o=>o.toastId!==e),t.setState([...t.state])},a),s(e))},c=()=>{t.state.forEach(e=>{I(e.toastId,0)})},A=(e,a,o)=>{t.state=t.state.map(m=>m.toastId===e?{...m,...o,updated:new Date().getTime(),data:a}:m),t.setState([...t.state])},S=e=>{let a=new Date().getTime();t.state=t.state.map(o=>o.toastId===e?{...o,pausedAt:a}:o),s(e)},I=(e,a)=>{let o=window.setTimeout(()=>{var y;t.state=t.state.map(u=>u.toastId===e?{...u,isVisible:!1}:u),t.setState([...t.state]);let m=(y=t.state.find(u=>u.toastId===e))==null?void 0:y.removeTimeOut;T(e,m)},a>2147483647?2147483647:a);t.toastTimers.set(e,o)};return{setActive:r,isActive:d,disappear:I,resume:e=>{if(t.toastTimers.has(e))return;let a=t.state.find(m=>m.toastId===e);if(!a)return;let o=a.createdAt+(a.timeOut||3e3)-(a.pausedAt||0);I(e,o)},pause:S,replace:A,remove:T,allClear:c}};var i=new f,P=M(),R=()=>(t,s={})=>{let{timeOut:r=3e3,removeTimeOut:d=200,toastId:T}=s,c=T||P();if(n.isActive(c))throw new Error("A duplicate custom ID is not available.");let A=new Date().getTime(),S={timeOut:r>2147483647?2147483647:r,toastId:c,data:t,pausedAt:null,updated:null,createdAt:A,removeTimeOut:d,isVisible:!0};return i.state.push(S),i.setState([...i.state]),c},n=(t,s={})=>R()(t,s),p=h(i);n.setActive=p.setActive;n.isActive=p.isActive;n.disappear=p.disappear;n.resume=p.resume;n.pause=p.pause;n.replace=p.replace;n.remove=p.remove;n.allClear=p.allClear;var H=()=>(0,b.useSyncExternalStore)(i.subscribe.bind(i),i.getSnapShot.bind(i),i.getSnapShot.bind(i));
|
package/dist/headless.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useSyncExternalStore as
|
|
1
|
+
import{useSyncExternalStore as w}from"react";var y=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var f=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(a){return this.listeners.add(a),()=>{this.listeners.delete(a)}}setState(a){this.state=typeof a=="function"?a(this.state):a,this.listeners.forEach(p=>p())}getSnapShot(){return this.state}};var M=t=>{let a=e=>{let s=t.toastTimers.get(e);clearTimeout(s),t.toastTimers.delete(e)},p=e=>{t.activatedToasts.add(e)},u=e=>t.activatedToasts.has(e),l=(e,s=200)=>{u(e)&&(t.activatedToasts.delete(e),setTimeout(()=>{t.state=t.state.filter(r=>r.toastId!==e),t.setState([...t.state])},s),a(e))},d=()=>{t.state.forEach(e=>{I(e.toastId,0)})},A=(e,s,r)=>{t.state=t.state.map(T=>T.toastId===e?{...T,...r,updated:new Date().getTime(),data:s}:T),t.setState([...t.state])},S=e=>{let s=new Date().getTime();t.state=t.state.map(r=>r.toastId===e?{...r,pausedAt:s}:r),a(e)},I=(e,s)=>{let r=window.setTimeout(()=>{var O;t.state=t.state.map(m=>m.toastId===e?{...m,isVisible:!1}:m),t.setState([...t.state]);let T=(O=t.state.find(m=>m.toastId===e))==null?void 0:O.removeTimeOut;l(e,T)},s>2147483647?2147483647:s);t.toastTimers.set(e,r)};return{setActive:p,isActive:u,disappear:I,resume:e=>{if(t.toastTimers.has(e))return;let s=t.state.find(T=>T.toastId===e);if(!s)return;let r=s.createdAt+(s.timeOut||3e3)-(s.pausedAt||0);I(e,r)},pause:S,replace:A,remove:l,allClear:d}};var o=new f,h=y(),b=()=>(t,a={})=>{let{timeOut:p=3e3,removeTimeOut:u=200,toastId:l}=a,d=l||h();if(i.isActive(d))throw new Error("A duplicate custom ID is not available.");let A=new Date().getTime(),S={timeOut:p>2147483647?2147483647:p,toastId:d,data:t,pausedAt:null,updated:null,createdAt:A,removeTimeOut:u,isVisible:!0};return o.state.push(S),o.setState([...o.state]),d},i=(t,a={})=>b()(t,a),n=M(o);i.setActive=n.setActive;i.isActive=n.isActive;i.disappear=n.disappear;i.resume=n.resume;i.pause=n.pause;i.replace=n.replace;i.remove=n.remove;i.allClear=n.allClear;var X=()=>w(o.subscribe.bind(o),o.getSnapShot.bind(o),o.getSnapShot.bind(o));export{i as toast,X as useToasts};
|
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
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';
|
|
@@ -43,6 +43,23 @@ type NonHeadlessToastState = Required<Options & {
|
|
|
43
43
|
}> & Omit<ToastState, 'data'> & {
|
|
44
44
|
data: ToastDataWithCallback | ReactNode;
|
|
45
45
|
};
|
|
46
|
+
interface ToastContainerProps {
|
|
47
|
+
className?: string;
|
|
48
|
+
style?: React.CSSProperties;
|
|
49
|
+
position?: Position;
|
|
50
|
+
containerId?: string;
|
|
51
|
+
reverse?: boolean;
|
|
52
|
+
gap?: number;
|
|
53
|
+
pauseOnActivate?: boolean;
|
|
54
|
+
stack?: boolean;
|
|
55
|
+
}
|
|
56
|
+
type AddionalProps = {
|
|
57
|
+
order: number;
|
|
58
|
+
toastsBySamePosition: Array<NonHeadlessToastState>;
|
|
59
|
+
} & Required<Pick<ToastContainerProps, 'gap' | 'pauseOnActivate' | 'stack'>>;
|
|
60
|
+
interface ToasterProps {
|
|
61
|
+
toastProps: NonHeadlessToastState & AddionalProps;
|
|
62
|
+
}
|
|
46
63
|
|
|
47
64
|
type Listener = () => void;
|
|
48
65
|
declare class ToastStore<T = ToastState> {
|
|
@@ -85,17 +102,8 @@ declare const toast: {
|
|
|
85
102
|
}, options?: Options): void;
|
|
86
103
|
};
|
|
87
104
|
|
|
88
|
-
|
|
89
|
-
className?: string;
|
|
90
|
-
style?: React$1.CSSProperties;
|
|
91
|
-
position?: Position;
|
|
92
|
-
containerId?: string;
|
|
93
|
-
reverse?: boolean;
|
|
94
|
-
gap?: number;
|
|
95
|
-
pauseOnActivate?: boolean;
|
|
96
|
-
}
|
|
97
|
-
declare function ToastContainer({ className, style, position: globalPosition, containerId, gap, reverse, pauseOnActivate, }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
105
|
+
declare function ToastContainer({ className, style, position: globalPosition, containerId, gap, reverse, pauseOnActivate, stack, }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
98
106
|
|
|
99
107
|
declare const useToasts: () => Array<NonHeadlessToastState>;
|
|
100
108
|
|
|
101
|
-
export { type BaseOptions, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastDataCallback, type ToastDataWithCallback, type ToastState, type ToastType, toast, toastStore, useToasts };
|
|
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 };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
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';
|
|
@@ -43,6 +43,23 @@ type NonHeadlessToastState = Required<Options & {
|
|
|
43
43
|
}> & Omit<ToastState, 'data'> & {
|
|
44
44
|
data: ToastDataWithCallback | ReactNode;
|
|
45
45
|
};
|
|
46
|
+
interface ToastContainerProps {
|
|
47
|
+
className?: string;
|
|
48
|
+
style?: React.CSSProperties;
|
|
49
|
+
position?: Position;
|
|
50
|
+
containerId?: string;
|
|
51
|
+
reverse?: boolean;
|
|
52
|
+
gap?: number;
|
|
53
|
+
pauseOnActivate?: boolean;
|
|
54
|
+
stack?: boolean;
|
|
55
|
+
}
|
|
56
|
+
type AddionalProps = {
|
|
57
|
+
order: number;
|
|
58
|
+
toastsBySamePosition: Array<NonHeadlessToastState>;
|
|
59
|
+
} & Required<Pick<ToastContainerProps, 'gap' | 'pauseOnActivate' | 'stack'>>;
|
|
60
|
+
interface ToasterProps {
|
|
61
|
+
toastProps: NonHeadlessToastState & AddionalProps;
|
|
62
|
+
}
|
|
46
63
|
|
|
47
64
|
type Listener = () => void;
|
|
48
65
|
declare class ToastStore<T = ToastState> {
|
|
@@ -85,17 +102,8 @@ declare const toast: {
|
|
|
85
102
|
}, options?: Options): void;
|
|
86
103
|
};
|
|
87
104
|
|
|
88
|
-
|
|
89
|
-
className?: string;
|
|
90
|
-
style?: React$1.CSSProperties;
|
|
91
|
-
position?: Position;
|
|
92
|
-
containerId?: string;
|
|
93
|
-
reverse?: boolean;
|
|
94
|
-
gap?: number;
|
|
95
|
-
pauseOnActivate?: boolean;
|
|
96
|
-
}
|
|
97
|
-
declare function ToastContainer({ className, style, position: globalPosition, containerId, gap, reverse, pauseOnActivate, }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
105
|
+
declare function ToastContainer({ className, style, position: globalPosition, containerId, gap, reverse, pauseOnActivate, stack, }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
98
106
|
|
|
99
107
|
declare const useToasts: () => Array<NonHeadlessToastState>;
|
|
100
108
|
|
|
101
|
-
export { type BaseOptions, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastDataCallback, type ToastDataWithCallback, type ToastState, type ToastType, toast, toastStore, useToasts };
|
|
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 };
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var B=Object.defineProperty;var ct=Object.getOwnPropertyDescriptor;var lt=Object.getOwnPropertyNames;var pt=Object.prototype.hasOwnProperty;var dt=(t,s)=>{for(var e in s)B(t,e,{get:s[e],enumerable:!0})},ut=(t,s,e,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of lt(s))!pt.call(t,l)&&l!==e&&B(t,l,{get:()=>s[l],enumerable:!(c=ct(s,l))||c.enumerable});return t};var mt=t=>ut(B({},"__esModule",{value:!0}),t);var yt={};dt(yt,{ToastContainer:()=>vt,toast:()=>a,toastStore:()=>h,useToasts:()=>Y});module.exports=mt(yt);var q=()=>{let t=0;return()=>`react-strawberry-toast_${t++}`};var k=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 Tt(){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:"#1dca82"})]})}function J({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 ft(){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 K(){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 T={success:(0,m.jsx)(Tt,{}),error:(0,m.jsx)(J,{fill:"#eb2639"}),loading:(0,m.jsx)("div",{className:`${p}__loading`}),warn:(0,m.jsx)(ft,{}),info:(0,m.jsx)(J,{fill:"#5365e7"})};var Q=t=>{let s=r=>{let o=t.toastTimers.get(r);clearTimeout(o),t.toastTimers.delete(r)},e=r=>{t.activatedToasts.add(r)},c=r=>t.activatedToasts.has(r),l=(r,o=200)=>{c(r)&&(t.activatedToasts.delete(r),setTimeout(()=>{t.state=t.state.filter(n=>n.toastId!==r),t.setState([...t.state])},o),s(r))},v=()=>{t.state.forEach(r=>{u(r.toastId,0)})},d=(r,o,n)=>{t.state=t.state.map(i=>i.toastId===r?{...i,...n,updated:new Date().getTime(),data:o}:i),t.setState([...t.state])},y=r=>{let o=new Date().getTime();t.state=t.state.map(n=>n.toastId===r?{...n,pausedAt:o}:n),s(r)},u=(r,o)=>{let n=setTimeout(()=>{var w;t.state=t.state.map(b=>b.toastId===r?{...b,isVisible:!1}:b),t.setState([...t.state]);let i=(w=t.state.find(b=>b.toastId===r))==null?void 0:w.removeTimeOut;l(r,i)},o>2147483647?2147483647:o);t.toastTimers.set(r,n)};return{setActive:e,isActive:c,disappear:u,resume:r=>{if(t.toastTimers.has(r))return;let o=t.state.find(i=>i.toastId===r);if(!o)return;let n=o.createdAt+(o.timeOut||3e3)-(o.pausedAt||0);u(r,n)},pause:y,replace:d,remove:l,allClear:v}};var h=new k,ht=q(),E=(t="default")=>(s,e={})=>{let{timeOut:c=3e3,removeTimeOut:l=200,pauseOnHover:v=!0,toastId:d,className:y,style:u,target:f,closeButton:r}=e,o=d||ht();if(a.isActive(o))throw new Error("A duplicate custom ID is not available.");let n=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:o,data:s,createdAt:n,toastType:t,pauseOnHover:v,removeTimeOut:l,closeButton:r||!1,target:f||null,isVisible:!0};return h.state.push(i),h.setState([...h.state]),o},a=(t,s={})=>E()(t,s),A=Q(h);a.setActive=A.setActive;a.isActive=A.isActive;a.disappear=A.disappear;a.resume=A.resume;a.pause=A.pause;a.replace=A.replace;a.remove=A.remove;a.allClear=A.allClear;a.success=E("success");a.error=E("error");a.warn=E("warn");a.info=E("info");a.loading=E("loading");a.custom=E("custom");a.promise=(t,s,e={})=>{let{loading:c,success:l,error:v}=s,d=a.loading(c,{...e,timeOut:2147483647}),y={toastId:d,close:()=>a.disappear(d,0),immediatelyClose:()=>{a.disappear(d,0),a.remove(d,0)},icons:{success:T.success,error:T.error,warn:T.warn,loading:T.loading,info:T.info},isVisible:!0},u=e.timeOut||=3e3;t.then(f=>{a.replace(d,typeof l=="function"?l(f,y):l,{...e,timeOut:u>2147483647?2147483647:u,toastType:"success"})}).catch(f=>{a.replace(d,typeof v=="function"?v(f,y):v,{...e,timeOut:u>2147483647?2147483647:u,toastType:"error"})})};var _=require("react");var Z=require("react");function tt({condition:t,children:s}){let e=Z.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 et({children:t}){return t}function st({children:t}){return t}var ot=({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 P=require("react"),L=(t,s)=>{let e=(0,P.useRef)(s);(0,P.useEffect)(()=>{e.current=s},[s]),(0,P.useEffect)(()=>(window.addEventListener(t,e.current),()=>{window.removeEventListener(t,e.current)}),[t])};var g=require("react/jsx-runtime"),O=new Map;function U({toastProps:t}){let s=(0,_.useRef)(null),{toastId:e,isVisible:c,timeOut:l,containerId:v,className:d,style:y,icon:u,pauseOnActivate:f,updated:r,toastType:o,position:n,data:i,pauseOnHover:w,closeButton:b,samePositionLists:H,gap:x,order:C,target:N}=t,X=ot({isVisible:c,position:n}),F=typeof i=="function"?i({toastId:e,close:()=>a.disappear(e,0),immediatelyClose:()=>{a.disappear(e,0),a.remove(e,0)},icons:{success:T.success,error:T.error,warn:T.warn,loading:T.loading,info:T.info},isVisible:c}):i,rt=()=>{f&&a.resume(e)},nt=()=>{f&&a.pause(e)},G=()=>{N&&requestAnimationFrame(()=>{if(s.current){let M=N.element.getBoundingClientRect(),[D,W]=N.offset||[0,0];s.current.style.top=`${M.y+W+window.scrollY}px`,s.current.style.left=`${M.x+D+window.scrollX}px`}})};L("focus",rt),L("blur",nt),L("resize",G),(0,_.useEffect)(()=>{a.isActive(e)||(a.setActive(e),a.disappear(e,l)),G()},[e]),(0,_.useEffect)(()=>{if(s.current&&!N){let M=O.get(e)||s.current.getBoundingClientRect().height;O.set(e,M);let D=/left/.test(n)?50:/center/.test(n)?0:-50,W=/bottom/.test(n)?0:1,it=H.filter((z,$)=>$<=C-W).reduce((z,$)=>/bottom/.test(n)?z-=x+(O.get($.toastId)||0):z+=x+(O.get($.toastId)||0),0);s.current.style.transition="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",s.current.style.transform=`translate(${D}%, ${it}px)`}return()=>{O.delete(e)}},[C]),(0,_.useEffect)(()=>{r!==null&&a.disappear(e,l)},[r]);let j=u||(o==="custom"||o==="default"?null:T[o]);return(0,g.jsx)("output",{role:"status",ref:s,className:`${p}__toast-content-container`,"data-testid":`container-${v||"default"}`,onMouseEnter:()=>{w&&a.pause(e)},onMouseLeave:()=>{w&&a.resume(e)},children:(0,g.jsxs)(tt,{condition:o!=="custom",children:[(0,g.jsx)(et,{children:(0,g.jsxs)("div",{className:d??`${p}__toast-content ${p}__toast-${o} ${a.isActive(e)?"":X}`,style:y,children:[j&&(0,g.jsx)("span",{className:`${p}__toast-icon`,children:j}),F,b&&(0,g.jsx)("button",{"data-testid":`${e}__close-button`,className:`${p}__close-button`,onClick:()=>{a.disappear(e,0)},type:"button",children:(0,g.jsx)(K,{})})]})}),(0,g.jsx)(st,{children:(0,g.jsx)("div",{className:d??`${a.isActive(e)?"":X}`,children:F})})]})})}var at=require("react");var Y=()=>(0,at.useSyncExternalStore)(h.subscribe.bind(h),h.getSnapShot.bind(h),h.getSnapShot.bind(h));var I=require("react/jsx-runtime");function vt({className:t,style:s,position:e="top-center",containerId:c="",gap:l=9,reverse:v=!1,pauseOnActivate:d=!0}){let y=Y(),u=o=>{var n;return(n=o.target)==null?void 0:n.element},f=o=>c?o.containerId===c:!o.containerId,r=y.filter(o=>!u(o)).reduce((o,n)=>{let i=n.position||e;return n.position=i,o[i]=o[i]||[],o[i].push(n),o},{});return(0,I.jsxs)("div",{id:`${p}__root`,"data-container-id":c,children:[y.filter(u).filter(f).map((o,n,i)=>{let w=Object.assign(o,{gap:l,order:n,samePositionLists:i,pauseOnActivate:d});return(0,I.jsx)(U,{toastProps:w},o.toastId)}),Object.entries(r).map(([o,n])=>{let i=n.filter(f),w=v?i.reverse():i;return(0,I.jsx)("div",{"data-testid":o,className:`${p}__z9999 ${t??`${p}__toast-container ${p}__${o}`}`,style:s,children:w.map((b,H,x)=>{let C=Object.assign(b,{gap:l,order:H,samePositionLists:x,pauseOnActivate:d});return(0,I.jsx)(U,{toastProps:C},b.toastId)})},o)})]})}
|
|
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)})]})}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var
|
|
2
|
+
var et=()=>{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 T,jsxs as gt}from"react/jsx-runtime";function yt(){return gt("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:[T("path",{stroke:"none",d:"M0 0h24v24H0z"}),T("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 st({fill:t}){return T("svg",{stroke:"none",fill:t,strokeWidth:"2",viewBox:"0 0 24 24",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:T("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 T("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"0 0 1024 1024",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:T("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 ot(){return T("svg",{fill:"#8b8b8b",strokeWidth:"0",viewBox:"0 0 512 512",height:"15px",width:"15px",xmlns:"http://www.w3.org/2000/svg",children:T("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:T(yt,{}),error:T(st,{fill:"var(--toast-color-error)"}),loading:T("div",{className:`${c}__loading`}),warn:T(ht,{}),info:T(st,{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])},y=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(b=>b.toastId===a?{...b,isVisible:!1}:b),t.setState([...t.state]);let i=(u=t.state.find(b=>b.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:y,replace:p,remove:m,allClear:S}};var w=new z,St=et(),I=(t="default")=>(r,e={})=>{let{timeOut:l=3e3,removeTimeOut:m=200,pauseOnHover:S=!0,toastId:p,className:y,style:d,target:h,closeButton:a}=e,n=p||St();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:y||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={})=>I()(t,r),_=at(w);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=I("success");o.error=I("error");o.warn=I("warn");o.info=I("info");o.loading=I("loading");o.custom=I("custom");o.promise=(t,r,e={})=>{let{loading:l,success:m,error:S}=r,p=o.loading(l,{...e,timeOut:2147483647}),y={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},isVisible:!0},d=e.timeOut||=3e3;t.then(h=>{o.replace(p,typeof m=="function"?m(h,y):m,{...e,timeOut:d>2147483647?2147483647:d,toastType:"success"})}).catch(h=>{o.replace(p,typeof S=="function"?S(h,y):S,{...e,timeOut:d>2147483647?2147483647:d,toastType:"error"})})};import{useEffect as X,useRef as Et}from"react";import{Children as bt}from"react";function rt({condition:t,children:r}){let e=bt.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 wt}from"react";var W=(t,r)=>{let e=wt(r);lt(()=>{e.current=r},[r]),lt(()=>(window.addEventListener(t,e.current),()=>{window.removeEventListener(t,e.current)}),[t])};import{jsx as x,jsxs as pt}from"react/jsx-runtime";var R=new Map;function F({toastProps:t}){let r=Et(null),{toastId:e,isVisible:l,timeOut:m,containerId:S,className:p,style:y,icon:d,pauseOnActivate:h,updated:a,toastType:n,position:s,data:i,pauseOnHover:u,closeButton:b,toastsBySamePosition:C,gap:O,order:A,target:P,stack:L}=t,j=ct({isVisible:l,position:s}),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:l}):i,ut=()=>{h&&o.resume(e)},mt=()=>{h&&o.pause(e)},J=()=>{P&&requestAnimationFrame(()=>{if(r.current){let f=P.element.getBoundingClientRect(),[N,$]=P.offset||[0,0];r.current.style.top=`${f.y+$+window.scrollY}px`,r.current.style.left=`${f.x+N+window.scrollX}px`}})};W("focus",ut),W("blur",mt),W("resize",J),X(()=>{o.isActive(e)||(o.setActive(e),o.disappear(e,m)),J()},[e]),X(()=>{if(!r.current||P)return;let f=r.current,N=R.get(e)||f.getBoundingClientRect().height;R.set(e,N);let $=/left/.test(s)?50:/center/.test(s)?0:-50,H=/bottom/.test(s),Q=()=>{let M=H?-(O+N):0,k=C.slice(0,A).reduce((B,V)=>B+O+(R.get(V.toastId)||0),0);return M+(H?-k:k)};if(L){let M=C.length,k=M-1-A,B=C[M-1],V=R.get(B.toastId)||N,ft=1-k*.05,Z=k*12,Tt=H?-(V+O):0,vt=H?-Z:Z,U=()=>{f.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",f.style.transform=`translate(${$}%, ${Tt+vt}px) scale(${ft})`,f.style.zIndex=String(A+1),M-3>A&&(f.style.opacity="0")},tt=()=>{f.style.transition="transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease",f.style.transform=`translate(${$}%, ${Q()}px) scale(1)`,f.style.opacity="1"};U();let g=f.parentElement;return g==null||g.addEventListener("mouseenter",tt),g==null||g.addEventListener("mouseleave",U),()=>{g==null||g.removeEventListener("mouseenter",tt),g==null||g.removeEventListener("mouseleave",U)}}return f.style.transition="transform 0.2s cubic-bezier(0.43, 0.14, 0.2, 1.05)",f.style.transform=`translate(${$}%, ${Q()}px)`,()=>{R.delete(e)}},[A,L,C.length]),X(()=>{a!==null&&o.disappear(e,m)},[a]);let K=d||(n==="custom"||n==="default"?null:v[n]);return x("output",{role:"status",ref:r,className:`${c}__toast-content-container`,"data-testid":`container-${S||"default"}`,"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:[x(nt,{children:pt("div",{className:p??`${c}__toast-content ${c}__toast-${n} ${o.isActive(e)?"":j}`,style:y,children:[K&&x("span",{className:`${c}__toast-icon`,children:K}),q,b&&x("button",{"aria-label":"Close Toast Button","data-testid":`${e}__close-button`,className:`${c}__close-button`,onClick:()=>{o.disappear(e,0)},type:"button",children:x(ot,{})})]})}),x(it,{children:x("div",{className:p??`${o.isActive(e)?"":j}`,children:q})})]})})}import{useSyncExternalStore as _t}from"react";var dt=()=>_t(w.subscribe.bind(w),w.getSnapShot.bind(w),w.getSnapShot.bind(w));import{jsx as G,jsxs as At}from"react/jsx-runtime";function ie({className:t,style:r,position:e="top-center",containerId:l="",gap:m=9,reverse:S=!1,pauseOnActivate:p=!0,stack:y=!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 At("div",{id:`${c}__root`,"data-container-id":l,children:[d.filter(h).filter(a).map((s,i,u)=>{let b=Object.assign(s,{gap:m,order:i,toastsBySamePosition:u,pauseOnActivate:p,stack:y});return G(F,{toastProps:b},s.toastId)}),Object.entries(n).map(([s,i])=>{let u=i.filter(a),b=S&&!y?u.reverse():u,C=`${c}__z9999 ${t??`${c}__toast-container ${c}__${s}`}`;return G("div",{"data-testid":s,className:C,style:r,children:b.map((O,A,P)=>{let L=Object.assign(O,{gap:m,order:A,toastsBySamePosition:P,pauseOnActivate:p,stack:y});return G(F,{toastProps:L},O.toastId)})},s)})]})}export{ie as ToastContainer,o as toast,w as toastStore,dt as useToasts};
|
package/dist/style.css
CHANGED
|
@@ -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__z9999{z-index:9999}.react-strawberry-toast__toast-container{width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:
|
|
1
|
+
:root{--toast-namespace: "react-strawberry-toast";--toast-offset: 16px;--max-width: 368px;--border-radius: 8px;--toast-gap: 5px;--toast-padding: 10px;--box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, .1);--bg-white: #fff;--toast-color-success: #1dca82;--toast-color-error: #eb2639;--toast-color-warn: #fcba03;--toast-color-info: #5365e7}@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__z9999{z-index:9999}.react-strawberry-toast__toast-container{width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:var(--toast-offset);left:calc(-50% + var(--toast-offset))}.react-strawberry-toast__top-center{top:var(--toast-offset);left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:var(--toast-offset);right:calc(-50% + var(--toast-offset))}.react-strawberry-toast__bottom-left{bottom:calc(var(--toast-offset) - 8px);left:calc(-50% + var(--toast-offset))}.react-strawberry-toast__bottom-center{bottom:calc(var(--toast-offset) - 8px);left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:calc(var(--toast-offset) - 8px);right:calc(-50% + var(--toast-offset))}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:none}.react-strawberry-toast__toast-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.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{pointer-events:auto;box-sizing:border-box;background-color:var(--bg-white);padding:var(--toast-padding);display:flex;align-items:center;gap:var(--toast-gap);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width)}.react-strawberry-toast__close-button{background:transparent;border:none;outline:none;width:15px;height:15px;cursor:pointer}
|
package/dist/style2.css
CHANGED
|
@@ -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__z9999{z-index:9999}.react-strawberry-toast__toast-container{width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:
|
|
1
|
+
:root{--toast-namespace: "react-strawberry-toast";--toast-offset: 16px;--max-width: 368px;--border-radius: 8px;--toast-gap: 5px;--toast-padding: 10px;--box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, .1);--bg-white: #fff;--toast-color-success: #1dca82;--toast-color-error: #eb2639;--toast-color-warn: #fcba03;--toast-color-info: #5365e7}@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__z9999{z-index:9999}.react-strawberry-toast__toast-container{width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:var(--toast-offset);left:calc(-50% + var(--toast-offset))}.react-strawberry-toast__top-center{top:var(--toast-offset);left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:var(--toast-offset);right:calc(-50% + var(--toast-offset))}.react-strawberry-toast__bottom-left{bottom:calc(var(--toast-offset) - 8px);left:calc(-50% + var(--toast-offset))}.react-strawberry-toast__bottom-center{bottom:calc(var(--toast-offset) - 8px);left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:calc(var(--toast-offset) - 8px);right:calc(-50% + var(--toast-offset))}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:none}.react-strawberry-toast__toast-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.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{pointer-events:auto;box-sizing:border-box;background-color:var(--bg-white);padding:8px 8px 8px 12px;display:flex;align-items:center;gap:var(--toast-gap);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width);position:relative}.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:15px;height:15px;cursor:pointer;position:absolute;right:0;transform:translate(-10px)}
|
package/dist/style3.css
CHANGED
|
@@ -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__z9999{z-index:9999}.react-strawberry-toast__toast-container{width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:
|
|
1
|
+
:root{--toast-namespace: "react-strawberry-toast";--toast-offset: 16px;--max-width: 368px;--border-radius: 8px;--toast-gap: 5px;--toast-padding: 10px;--box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, .1);--bg-white: #fff;--toast-color-success: #1dca82;--toast-color-error: #eb2639;--toast-color-warn: #fcba03;--toast-color-info: #5365e7}@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__z9999{z-index:9999}.react-strawberry-toast__toast-container{width:100%;position:fixed;z-index:9999;display:flex;align-items:center;flex-direction:column}.react-strawberry-toast__top-left{top:var(--toast-offset);left:calc(-50% + var(--toast-offset))}.react-strawberry-toast__top-center{top:var(--toast-offset);left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:var(--toast-offset);right:calc(-50% + var(--toast-offset))}.react-strawberry-toast__bottom-left{bottom:calc(var(--toast-offset) - 8px);left:calc(-50% + var(--toast-offset))}.react-strawberry-toast__bottom-center{bottom:calc(var(--toast-offset) - 8px);left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:calc(var(--toast-offset) - 8px);right:calc(-50% + var(--toast-offset))}.react-strawberry-toast__toast-content-container{position:absolute;pointer-events:none}.react-strawberry-toast__toast-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.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{pointer-events:auto;box-sizing:border-box;padding:var(--toast-padding);display:flex;align-items:center;gap:var(--toast-gap);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width);position:relative;background-color:var(--bg-white)}.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:15px;height:15px;cursor:pointer;position:absolute;right:0;transform:translate(-10px)}svg .react-strawberry-toast-path{fill:var(--bg-white)}
|
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": "2.
|
|
4
|
+
"version": "2.2.0",
|
|
5
5
|
"author": "dkpark10",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"keywords": [
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"test:e2e": "npx playwright test",
|
|
58
58
|
"test:e2e:ui": "npx playwright test --ui",
|
|
59
59
|
"prepare": "cp ../../README.md ./README.md",
|
|
60
|
-
"deploy": "pnpm run prepare && pnpm run test --run && pnpm run
|
|
60
|
+
"deploy": "pnpm run prepare && pnpm run test --run && pnpm run build && npm publish --access=public"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"@playwright/test": "^1.50.1",
|