react-strawberry-toast 1.4.0 → 1.5.1
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.d.mts +4 -2
- package/dist/headless.d.ts +4 -2
- package/dist/headless.js +1 -1
- package/dist/headless.mjs +1 -1
- package/dist/index.d.mts +10 -6
- package/dist/index.d.ts +10 -6
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/style.css +1 -1
- package/package.json +7 -5
package/dist/headless.d.mts
CHANGED
|
@@ -22,7 +22,7 @@ interface Options extends BaseOptions {
|
|
|
22
22
|
position?: Position | null;
|
|
23
23
|
containerId?: string | null;
|
|
24
24
|
pauseOnHover?: boolean;
|
|
25
|
-
|
|
25
|
+
align?: 'left' | 'center' | 'right' | '';
|
|
26
26
|
}
|
|
27
27
|
interface ToastDataCallback {
|
|
28
28
|
toastId: ToastBaseState['toastId'];
|
|
@@ -33,7 +33,9 @@ interface ToastDataCallback {
|
|
|
33
33
|
}
|
|
34
34
|
type ToastState = ToastBaseState & BaseOptions;
|
|
35
35
|
type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
|
|
36
|
-
type NonHeadlessToastState = Required<Options
|
|
36
|
+
type NonHeadlessToastState = Required<Options & {
|
|
37
|
+
toastType: ToastType;
|
|
38
|
+
}> & Omit<ToastState, 'data'> & {
|
|
37
39
|
data: ToastDataWithCallback | ReactNode;
|
|
38
40
|
};
|
|
39
41
|
|
package/dist/headless.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ interface Options extends BaseOptions {
|
|
|
22
22
|
position?: Position | null;
|
|
23
23
|
containerId?: string | null;
|
|
24
24
|
pauseOnHover?: boolean;
|
|
25
|
-
|
|
25
|
+
align?: 'left' | 'center' | 'right' | '';
|
|
26
26
|
}
|
|
27
27
|
interface ToastDataCallback {
|
|
28
28
|
toastId: ToastBaseState['toastId'];
|
|
@@ -33,7 +33,9 @@ interface ToastDataCallback {
|
|
|
33
33
|
}
|
|
34
34
|
type ToastState = ToastBaseState & BaseOptions;
|
|
35
35
|
type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
|
|
36
|
-
type NonHeadlessToastState = Required<Options
|
|
36
|
+
type NonHeadlessToastState = Required<Options & {
|
|
37
|
+
toastType: ToastType;
|
|
38
|
+
}> & Omit<ToastState, 'data'> & {
|
|
37
39
|
data: ToastDataWithCallback | ReactNode;
|
|
38
40
|
};
|
|
39
41
|
|
package/dist/headless.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var I=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var w=(t,s)=>{for(var r in s)I(t,r,{get:s[r],enumerable:!0})},U=(t,s,r,m)=>{if(s&&typeof s=="object"||typeof s=="function")for(let T of g(s))!_.call(t,T)&&T!==r&&I(t,T,{get:()=>s[T],enumerable:!(m=x(s,T))||m.enumerable});return t};var D=t=>U(I({},"__esModule",{value:!0}),t);var L={};w(L,{toast:()=>n,useToasts:()=>H});module.exports=D(L);var b=require("react");var M=()=>{let t=0;return()=>String(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)},m=e=>t.activatedToasts.has(e),T=(e,a=200)=>{m(e)&&(t.activatedToasts.delete(e),setTimeout(()=>{t.state=t.state.filter(o=>o.toastId!==e),t.setState([...t.state])},a),s(e))},c=()=>{t.setState([])},A=(e,a,o)=>{t.state=t.state.map(d=>d.toastId===e?{...d,...o,updated:new Date().getTime(),data:a}:d),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)
|
|
1
|
+
"use strict";var I=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var w=(t,s)=>{for(var r in s)I(t,r,{get:s[r],enumerable:!0})},U=(t,s,r,m)=>{if(s&&typeof s=="object"||typeof s=="function")for(let T of g(s))!_.call(t,T)&&T!==r&&I(t,T,{get:()=>s[T],enumerable:!(m=x(s,T))||m.enumerable});return t};var D=t=>U(I({},"__esModule",{value:!0}),t);var L={};w(L,{toast:()=>n,useToasts:()=>H});module.exports=D(L);var b=require("react");var M=()=>{let t=0;return()=>String(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)},m=e=>t.activatedToasts.has(e),T=(e,a=200)=>{m(e)&&(t.activatedToasts.delete(e),setTimeout(()=>{t.state=t.state.filter(o=>o.toastId!==e),t.setState([...t.state])},a),s(e))},c=()=>{t.setState([])},A=(e,a,o)=>{t.state=t.state.map(d=>d.toastId===e?{...d,...o,updated:new Date().getTime(),data:a}:d),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)},O=(e,a)=>{let o=setTimeout(()=>{var y;t.state=t.state.map(u=>u.toastId===e?{...u,isVisible:!1}:u),t.setState([...t.state]);let d=(y=t.state.find(u=>u.toastId===e))==null?void 0:y.removeTimeOut;T(e,d)},a>2147483647?2147483647:a);t.toastTimers.set(e,o)};return{setActive:r,isActive:m,disappear:O,resume:e=>{if(t.toastTimers.has(e))return;let a=t.state.find(d=>d.toastId===e);if(!a)return;let o=a.createdAt+(a.timeOut||3e3)-(a.pausedAt||0);O(e,o)},pause:S,replace:A,remove:T,allClear:c}};var i=new f,P=M(),R=()=>(t,s={})=>{let{timeOut:r=3e3,removeTimeOut:m=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:m,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 x}from"react";var y=()=>{let t=0;return()=>String(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))},m=()=>{t.setState([])},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)
|
|
1
|
+
import{useSyncExternalStore as x}from"react";var y=()=>{let t=0;return()=>String(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))},m=()=>{t.setState([])},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)},E=(e,s)=>{let r=setTimeout(()=>{var O;t.state=t.state.map(d=>d.toastId===e?{...d,isVisible:!1}:d),t.setState([...t.state]);let T=(O=t.state.find(d=>d.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:E,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);E(e,r)},pause:S,replace:A,remove:l,allClear:m}};var o=new f,h=y(),b=()=>(t,a={})=>{let{timeOut:p=3e3,removeTimeOut:u=200,toastId:l}=a,m=l||h();if(i.isActive(m))throw new Error("A duplicate custom ID is not available.");let A=new Date().getTime(),S={timeOut:p>2147483647?2147483647:p,toastId:m,data:t,pausedAt:null,updated:null,createdAt:A,removeTimeOut:u,isVisible:!0};return o.state.push(S),o.setState([...o.state]),m},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=()=>x(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,5 @@
|
|
|
1
1
|
import React$1, { ReactNode } from 'react';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
3
|
|
|
3
4
|
type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
|
|
4
5
|
type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn';
|
|
@@ -22,7 +23,7 @@ interface Options extends BaseOptions {
|
|
|
22
23
|
position?: Position | null;
|
|
23
24
|
containerId?: string | null;
|
|
24
25
|
pauseOnHover?: boolean;
|
|
25
|
-
|
|
26
|
+
align?: 'left' | 'center' | 'right' | '';
|
|
26
27
|
}
|
|
27
28
|
interface ToastDataCallback {
|
|
28
29
|
toastId: ToastBaseState['toastId'];
|
|
@@ -33,7 +34,9 @@ interface ToastDataCallback {
|
|
|
33
34
|
}
|
|
34
35
|
type ToastState = ToastBaseState & BaseOptions;
|
|
35
36
|
type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
|
|
36
|
-
type NonHeadlessToastState = Required<Options
|
|
37
|
+
type NonHeadlessToastState = Required<Options & {
|
|
38
|
+
toastType: ToastType;
|
|
39
|
+
}> & Omit<ToastState, 'data'> & {
|
|
37
40
|
data: ToastDataWithCallback | ReactNode;
|
|
38
41
|
};
|
|
39
42
|
|
|
@@ -72,8 +75,8 @@ declare const toast: {
|
|
|
72
75
|
custom: (data: ReactNode | ToastDataWithCallback, options?: Options) => ToastState["toastId"];
|
|
73
76
|
promise<T>(promise: Promise<T>, promiseOption: {
|
|
74
77
|
loading: ReactNode;
|
|
75
|
-
success: ReactNode | ((response: T) => ReactNode);
|
|
76
|
-
error: ReactNode | ((err: any) => ReactNode);
|
|
78
|
+
success: ReactNode | ((response: T, opt: ToastDataCallback) => ReactNode);
|
|
79
|
+
error: ReactNode | ((err: any, opt: ToastDataCallback) => ReactNode);
|
|
77
80
|
}, options?: Options): void;
|
|
78
81
|
};
|
|
79
82
|
|
|
@@ -85,9 +88,10 @@ interface ToastContainerProps {
|
|
|
85
88
|
reverse?: boolean;
|
|
86
89
|
gap?: number;
|
|
87
90
|
pauseOnActivate?: boolean;
|
|
91
|
+
limit?: number;
|
|
88
92
|
}
|
|
89
|
-
declare function ToastContainer({ className, style, position: globalPosition, containerId, gap, reverse, pauseOnActivate, }: ToastContainerProps):
|
|
93
|
+
declare function ToastContainer({ className, style, limit, position: globalPosition, containerId, gap, reverse, pauseOnActivate, }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
90
94
|
|
|
91
95
|
declare const useToasts: () => Array<NonHeadlessToastState>;
|
|
92
96
|
|
|
93
|
-
export { type BaseOptions, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastDataWithCallback, type ToastState, type ToastType, toast, toastStore, useToasts };
|
|
97
|
+
export { type BaseOptions, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastDataCallback, type ToastDataWithCallback, type ToastState, type ToastType, toast, toastStore, useToasts };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React$1, { ReactNode } from 'react';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
3
|
|
|
3
4
|
type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
|
|
4
5
|
type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn';
|
|
@@ -22,7 +23,7 @@ interface Options extends BaseOptions {
|
|
|
22
23
|
position?: Position | null;
|
|
23
24
|
containerId?: string | null;
|
|
24
25
|
pauseOnHover?: boolean;
|
|
25
|
-
|
|
26
|
+
align?: 'left' | 'center' | 'right' | '';
|
|
26
27
|
}
|
|
27
28
|
interface ToastDataCallback {
|
|
28
29
|
toastId: ToastBaseState['toastId'];
|
|
@@ -33,7 +34,9 @@ interface ToastDataCallback {
|
|
|
33
34
|
}
|
|
34
35
|
type ToastState = ToastBaseState & BaseOptions;
|
|
35
36
|
type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
|
|
36
|
-
type NonHeadlessToastState = Required<Options
|
|
37
|
+
type NonHeadlessToastState = Required<Options & {
|
|
38
|
+
toastType: ToastType;
|
|
39
|
+
}> & Omit<ToastState, 'data'> & {
|
|
37
40
|
data: ToastDataWithCallback | ReactNode;
|
|
38
41
|
};
|
|
39
42
|
|
|
@@ -72,8 +75,8 @@ declare const toast: {
|
|
|
72
75
|
custom: (data: ReactNode | ToastDataWithCallback, options?: Options) => ToastState["toastId"];
|
|
73
76
|
promise<T>(promise: Promise<T>, promiseOption: {
|
|
74
77
|
loading: ReactNode;
|
|
75
|
-
success: ReactNode | ((response: T) => ReactNode);
|
|
76
|
-
error: ReactNode | ((err: any) => ReactNode);
|
|
78
|
+
success: ReactNode | ((response: T, opt: ToastDataCallback) => ReactNode);
|
|
79
|
+
error: ReactNode | ((err: any, opt: ToastDataCallback) => ReactNode);
|
|
77
80
|
}, options?: Options): void;
|
|
78
81
|
};
|
|
79
82
|
|
|
@@ -85,9 +88,10 @@ interface ToastContainerProps {
|
|
|
85
88
|
reverse?: boolean;
|
|
86
89
|
gap?: number;
|
|
87
90
|
pauseOnActivate?: boolean;
|
|
91
|
+
limit?: number;
|
|
88
92
|
}
|
|
89
|
-
declare function ToastContainer({ className, style, position: globalPosition, containerId, gap, reverse, pauseOnActivate, }: ToastContainerProps):
|
|
93
|
+
declare function ToastContainer({ className, style, limit, position: globalPosition, containerId, gap, reverse, pauseOnActivate, }: ToastContainerProps): react_jsx_runtime.JSX.Element;
|
|
90
94
|
|
|
91
95
|
declare const useToasts: () => Array<NonHeadlessToastState>;
|
|
92
96
|
|
|
93
|
-
export { type BaseOptions, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastDataWithCallback, type ToastState, type ToastType, toast, toastStore, useToasts };
|
|
97
|
+
export { type BaseOptions, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastDataCallback, type ToastDataWithCallback, type ToastState, type ToastType, toast, toastStore, useToasts };
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var
|
|
2
|
+
"use strict";var k=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.prototype.hasOwnProperty;var Z=(t,o)=>{for(var a in o)k(t,a,{get:o[a],enumerable:!0})},tt=(t,o,a,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of K(o))!Q.call(t,n)&&n!==a&&k(t,n,{get:()=>o[n],enumerable:!(c=J(o,n))||c.enumerable});return t};var et=t=>tt(k({},"__esModule",{value:!0}),t);var nt={};Z(nt,{ToastContainer:()=>it,toast:()=>r,toastStore:()=>u,useToasts:()=>N});module.exports=et(nt);var D=()=>{let t=0;return()=>String(t++)};var I=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(o){return this.listeners.add(o),()=>{this.listeners.delete(o)}}setState(o){this.state=typeof o=="function"?o(this.state):o,this.listeners.forEach(a=>a())}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",{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:"#1ab173"})]})}function ot(){return(0,m.jsx)("svg",{stroke:"none",fill:"#eb2639",strokeWidth:"2",viewBox:"0 0 24 24",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:(0,m.jsx)("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 rt(){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",{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"})})}var b={success:(0,m.jsx)(at,{}),error:(0,m.jsx)(ot,{}),loading:(0,m.jsx)("div",{className:`${p}__loading`}),warn:(0,m.jsx)(rt,{})};var L=t=>{let o=e=>{let s=t.toastTimers.get(e);clearTimeout(s),t.toastTimers.delete(e)},a=e=>{t.activatedToasts.add(e)},c=e=>t.activatedToasts.has(e),n=(e,s=200)=>{c(e)&&(t.activatedToasts.delete(e),setTimeout(()=>{t.state=t.state.filter(i=>i.toastId!==e),t.setState([...t.state])},s),o(e))},f=()=>{t.setState([])},d=(e,s,i)=>{t.state=t.state.map(l=>l.toastId===e?{...l,...i,updated:new Date().getTime(),data:s}:l),t.setState([...t.state])},_=e=>{let s=new Date().getTime();t.state=t.state.map(i=>i.toastId===e?{...i,pausedAt:s}:i),o(e)},T=(e,s)=>{let i=setTimeout(()=>{var A;t.state=t.state.map(g=>g.toastId===e?{...g,isVisible:!1}:g),t.setState([...t.state]);let l=(A=t.state.find(g=>g.toastId===e))==null?void 0:A.removeTimeOut;n(e,l)},s>2147483647?2147483647:s);t.toastTimers.set(e,i)};return{setActive:a,isActive:c,disappear:T,resume:e=>{if(t.toastTimers.has(e))return;let s=t.state.find(l=>l.toastId===e);if(!s)return;let i=s.createdAt+(s.timeOut||3e3)-(s.pausedAt||0);T(e,i)},pause:_,replace:d,remove:n,allClear:f}};var u=new I,st=D(),S=(t="default")=>(o,a={})=>{let{timeOut:c=3e3,removeTimeOut:n=200,pauseOnHover:f=!0,toastId:d,className:_,style:T,align:y}=a,e=d||st();if(r.isActive(e))throw new Error("A duplicate custom ID is not available.");let s=new Date().getTime(),i={updated:null,pausedAt:null,className:_||"",style:T||{},icon:a.icon||null,containerId:a.containerId||null,position:a.position||null,timeOut:c>2147483647?2147483647:c,align:y||"",toastId:e,data:o,createdAt:s,toastType:t,pauseOnHover:f,removeTimeOut:n,isVisible:!0};return u.state.push(i),u.setState([...u.state]),e},r=(t,o={})=>S()(t,o),h=L(u);r.setActive=h.setActive;r.isActive=h.isActive;r.disappear=h.disappear;r.resume=h.resume;r.pause=h.pause;r.replace=h.replace;r.remove=h.remove;r.allClear=h.allClear;r.success=S("success");r.error=S("error");r.warn=S("warn");r.loading=S("loading");r.custom=S("custom");r.promise=(t,o,a={})=>{let{loading:c,success:n,error:f}=o,d=r.loading(c,{...a,timeOut:2147483647}),_={toastId:d,close:()=>r.disappear(d,0),immediatelyClose:()=>{r.disappear(d,0),r.remove(d,0)},icons:{success:b.success,error:b.error,warn:b.warn,loading:b.loading},isVisible:!0},T=(a==null?void 0:a.timeOut)||3e3;t.then(y=>{r.replace(d,typeof n=="function"?n(y,_):n,{...a,timeOut:T,toastType:"success"})}).catch(y=>{r.replace(d,typeof f=="function"?f(y,_):f,{...a,timeOut:T,toastType:"error"})})};var P=require("react");var z=require("react");function H({condition:t,children:o}){let a=z.Children.toArray(o);if(a.length>2)throw new Error("The number of children exceeds two.");return a.find(c=>t?c.key===".0":c.key===".1")}function W({children:t}){return t}function Y({children:t}){return t}var U=({isVisible:t,position:o})=>t?/top/i.test(o)?`${p}__fade-in`:`${p}__fade-in-reverse`:/bottom/i.test(o)?`${p}__fade-out-reverse`:`${p}__fade-out`;var w=require("react/jsx-runtime");function V({toastProps:t,pauseOnActivate:o}){let{toastId:a,isVisible:c,timeOut:n,containerId:f,className:d,style:_,icon:T,updated:y,toastType:e,position:s,data:i,pauseOnHover:l,align:A}=t,g=U({isVisible:c,position:s}),M=typeof i=="function"?i({toastId:a,close:()=>r.disappear(a,0),immediatelyClose:()=>{r.disappear(a,0),r.remove(a,0)},icons:{success:b.success,error:b.error,warn:b.warn,loading:b.loading},isVisible:c}):i,G=()=>{l&&r.pause(a)},j=()=>{l&&r.resume(a)};(0,P.useEffect)(()=>{if(!o)return;let E=()=>{r.resume(a)},$=()=>{r.pause(a)};return window.addEventListener("focus",E),window.addEventListener("blur",$),()=>{window.removeEventListener("focus",E),window.removeEventListener("blur",$)}},[]),(0,P.useEffect)(()=>{r.isActive(a)||(r.setActive(a),r.disappear(a,n))},[a]),(0,P.useEffect)(()=>{if(y!==null){let E=n>=2147483647?3e3:n;r.disappear(a,E)}},[y]);let R=T||(e==="custom"||e==="default"?null:b[e]),q=/center/i.test(s)?"-center":/left/i.test(s)?"-left":"-right",F=e==="custom"?"":`${p}__toast${A?`-${A}`:q} ${g}`;return(0,w.jsx)("div",{role:"alert",className:F,"data-testid":`container-${f||"default"}`,onMouseEnter:G,onMouseLeave:j,children:(0,w.jsxs)(H,{condition:e!=="custom",children:[(0,w.jsx)(W,{children:(0,w.jsxs)("div",{className:d||`${p}__toast-content`,style:_,children:[R&&(0,w.jsx)("span",{className:`${p}__toast-icon`,children:R}),M]})}),(0,w.jsx)(Y,{children:M})]})})}var X=require("react");var N=()=>(0,X.useSyncExternalStore)(u.subscribe.bind(u),u.getSnapShot.bind(u),u.getSnapShot.bind(u));var B=({position:t,reverse:o=!1})=>/top/i.test(t)?o?"column-reverse":"column":/bottom/i.test(t)?o?"column":"column-reverse":"column";var O=require("react/jsx-runtime");function it({className:t,style:o,limit:a,position:c="top-center",containerId:n="",gap:f=9,reverse:d=!1,pauseOnActivate:_=!0}){let y=N().reduce((e,s)=>{let i=s.position||c;return s.position=i,e[i]=e[i]||[],e[i].push(s),e},{});return(0,O.jsx)("div",{id:`${p}__root`,children:Object.entries(y).map(([e,s])=>{let i=B({position:e,reverse:d});return(0,O.jsx)("div",{"data-testid":e,className:`${`${p}__z9999`} ${t||`${p}__toast-container ${p}__${e}`}`,style:{flexDirection:i,gap:f,...o},children:s.filter(l=>n?l.containerId===n:!l.containerId).slice(0,a).map(l=>(0,O.jsx)(V,{toastProps:l,pauseOnActivate:_},l.toastId))},e)})})}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var
|
|
2
|
+
var R=()=>{let t=0;return()=>String(t++)};var E=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(a=>a())}getSnapShot(){return this.state}};var c="react-strawberry-toast";import{jsx as _,jsxs as K}from"react/jsx-runtime";function q(){return K("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:[_("path",{stroke:"none",d:"M0 0h24v24H0z"}),_("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:"#1ab173"})]})}function F(){return _("svg",{stroke:"none",fill:"#eb2639",strokeWidth:"2",viewBox:"0 0 24 24",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:_("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 J(){return _("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"0 0 1024 1024",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg",children:_("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"})})}var T={success:_(q,{}),error:_(F,{}),loading:_("div",{className:`${c}__loading`}),warn:_(J,{})};var $=t=>{let r=e=>{let s=t.toastTimers.get(e);clearTimeout(s),t.toastTimers.delete(e)},a=e=>{t.activatedToasts.add(e)},l=e=>t.activatedToasts.has(e),p=(e,s=200)=>{l(e)&&(t.activatedToasts.delete(e),setTimeout(()=>{t.state=t.state.filter(i=>i.toastId!==e),t.setState([...t.state])},s),r(e))},m=()=>{t.setState([])},d=(e,s,i)=>{t.state=t.state.map(n=>n.toastId===e?{...n,...i,updated:new Date().getTime(),data:s}:n),t.setState([...t.state])},b=e=>{let s=new Date().getTime();t.state=t.state.map(i=>i.toastId===e?{...i,pausedAt:s}:i),r(e)},u=(e,s)=>{let i=setTimeout(()=>{var S;t.state=t.state.map(w=>w.toastId===e?{...w,isVisible:!1}:w),t.setState([...t.state]);let n=(S=t.state.find(w=>w.toastId===e))==null?void 0:S.removeTimeOut;p(e,n)},s>2147483647?2147483647:s);t.toastTimers.set(e,i)};return{setActive:a,isActive:l,disappear:u,resume:e=>{if(t.toastTimers.has(e))return;let s=t.state.find(n=>n.toastId===e);if(!s)return;let i=s.createdAt+(s.timeOut||3e3)-(s.pausedAt||0);u(e,i)},pause:b,replace:d,remove:p,allClear:m}};var y=new E,Q=R(),x=(t="default")=>(r,a={})=>{let{timeOut:l=3e3,removeTimeOut:p=200,pauseOnHover:m=!0,toastId:d,className:b,style:u,align:f}=a,e=d||Q();if(o.isActive(e))throw new Error("A duplicate custom ID is not available.");let s=new Date().getTime(),i={updated:null,pausedAt:null,className:b||"",style:u||{},icon:a.icon||null,containerId:a.containerId||null,position:a.position||null,timeOut:l>2147483647?2147483647:l,align:f||"",toastId:e,data:r,createdAt:s,toastType:t,pauseOnHover:m,removeTimeOut:p,isVisible:!0};return y.state.push(i),y.setState([...y.state]),e},o=(t,r={})=>x()(t,r),h=$(y);o.setActive=h.setActive;o.isActive=h.isActive;o.disappear=h.disappear;o.resume=h.resume;o.pause=h.pause;o.replace=h.replace;o.remove=h.remove;o.allClear=h.allClear;o.success=x("success");o.error=x("error");o.warn=x("warn");o.loading=x("loading");o.custom=x("custom");o.promise=(t,r,a={})=>{let{loading:l,success:p,error:m}=r,d=o.loading(l,{...a,timeOut:2147483647}),b={toastId:d,close:()=>o.disappear(d,0),immediatelyClose:()=>{o.disappear(d,0),o.remove(d,0)},icons:{success:T.success,error:T.error,warn:T.warn,loading:T.loading},isVisible:!0},u=(a==null?void 0:a.timeOut)||3e3;t.then(f=>{o.replace(d,typeof p=="function"?p(f,b):p,{...a,timeOut:u,toastType:"success"})}).catch(f=>{o.replace(d,typeof m=="function"?m(f,b):m,{...a,timeOut:u,toastType:"error"})})};import{useEffect as O}from"react";import{Children as Z}from"react";function D({condition:t,children:r}){let a=Z.toArray(r);if(a.length>2)throw new Error("The number of children exceeds two.");return a.find(l=>t?l.key===".0":l.key===".1")}function L({children:t}){return t}function z({children:t}){return t}var H=({isVisible:t,position:r})=>t?/top/i.test(r)?`${c}__fade-in`:`${c}__fade-in-reverse`:/bottom/i.test(r)?`${c}__fade-out-reverse`:`${c}__fade-out`;import{jsx as I,jsxs as W}from"react/jsx-runtime";function Y({toastProps:t,pauseOnActivate:r}){let{toastId:a,isVisible:l,timeOut:p,containerId:m,className:d,style:b,icon:u,updated:f,toastType:e,position:s,data:i,pauseOnHover:n,align:S}=t,w=H({isVisible:l,position:s}),C=typeof i=="function"?i({toastId:a,close:()=>o.disappear(a,0),immediatelyClose:()=>{o.disappear(a,0),o.remove(a,0)},icons:{success:T.success,error:T.error,warn:T.warn,loading:T.loading},isVisible:l}):i,X=()=>{n&&o.pause(a)},B=()=>{n&&o.resume(a)};O(()=>{if(!r)return;let A=()=>{o.resume(a)},M=()=>{o.pause(a)};return window.addEventListener("focus",A),window.addEventListener("blur",M),()=>{window.removeEventListener("focus",A),window.removeEventListener("blur",M)}},[]),O(()=>{o.isActive(a)||(o.setActive(a),o.disappear(a,p))},[a]),O(()=>{if(f!==null){let A=p>=2147483647?3e3:p;o.disappear(a,A)}},[f]);let N=u||(e==="custom"||e==="default"?null:T[e]),G=/center/i.test(s)?"-center":/left/i.test(s)?"-left":"-right",j=e==="custom"?"":`${c}__toast${S?`-${S}`:G} ${w}`;return I("div",{role:"alert",className:j,"data-testid":`container-${m||"default"}`,onMouseEnter:X,onMouseLeave:B,children:W(D,{condition:e!=="custom",children:[I(L,{children:W("div",{className:d||`${c}__toast-content`,style:b,children:[N&&I("span",{className:`${c}__toast-icon`,children:N}),C]})}),I(z,{children:C})]})})}import{useSyncExternalStore as tt}from"react";var U=()=>tt(y.subscribe.bind(y),y.getSnapShot.bind(y),y.getSnapShot.bind(y));var V=({position:t,reverse:r=!1})=>/top/i.test(t)?r?"column-reverse":"column":/bottom/i.test(t)?r?"column":"column-reverse":"column";import{jsx as k}from"react/jsx-runtime";function zt({className:t,style:r,limit:a,position:l="top-center",containerId:p="",gap:m=9,reverse:d=!1,pauseOnActivate:b=!0}){let f=U().reduce((e,s)=>{let i=s.position||l;return s.position=i,e[i]=e[i]||[],e[i].push(s),e},{});return k("div",{id:`${c}__root`,children:Object.entries(f).map(([e,s])=>{let i=V({position:e,reverse:d});return k("div",{"data-testid":e,className:`${`${c}__z9999`} ${t||`${c}__toast-container ${c}__${e}`}`,style:{flexDirection:i,gap:m,...r},children:s.filter(n=>p?n.containerId===p:!n.containerId).slice(0,a).map(n=>k(Y,{toastProps:n,pauseOnActivate:b},n.toastId))},e)})})}export{zt as ToastContainer,o as toast,y as toastStore,U 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%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.react-strawberry-toast__z9999{z-index:9999}.react-strawberry-toast__toast-container{pointer-events:auto;position:fixed;z-index:9999;display:flex}.react-strawberry-toast__top-left{top:16px;left:16px}.react-strawberry-toast__top-center{top:16px;left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:16px;right:16px}.react-strawberry-toast__bottom-left{bottom:16px;left:16px}.react-strawberry-toast__bottom-center{bottom:16px;left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:16px;right:16px}.react-strawberry-toast__toast-left{display:flex}.react-strawberry-toast__toast-center{display:flex;justify-content:center}.react-strawberry-toast__toast-right{display:flex;justify-content:flex-end}.react-strawberry-toast__toast-content{box-sizing:border-box;background-color:#fff;padding:10px;display:flex;align-items:center;gap:5px;border-radius:8px;box-shadow:2px 4px 10px #0000001a;min-height:47px}.react-strawberry-toast__toast-icon{width:
|
|
1
|
+
@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.react-strawberry-toast__z9999{z-index:9999}.react-strawberry-toast__toast-container{pointer-events:auto;position:fixed;z-index:9999;display:flex}.react-strawberry-toast__top-left{top:16px;left:16px}.react-strawberry-toast__top-center{top:16px;left:50%;transform:translate(-50%)}.react-strawberry-toast__top-right{top:16px;right:16px}.react-strawberry-toast__bottom-left{bottom:16px;left:16px}.react-strawberry-toast__bottom-center{bottom:16px;left:50%;transform:translate(-50%)}.react-strawberry-toast__bottom-right{bottom:16px;right:16px}.react-strawberry-toast__toast-left{display:flex}.react-strawberry-toast__toast-center{display:flex;justify-content:center}.react-strawberry-toast__toast-right{display:flex;justify-content:flex-end}.react-strawberry-toast__toast-content{box-sizing:border-box;background-color:#fff;padding:10px;display:flex;align-items:center;gap:5px;border-radius:8px;box-shadow:2px 4px 10px #0000001a;min-height:47px}.react-strawberry-toast__toast-icon{width:22px;height:22px}.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}
|
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": "1.
|
|
4
|
+
"version": "1.5.1",
|
|
5
5
|
"author": "dkpark10",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"keywords": [
|
|
@@ -53,23 +53,25 @@
|
|
|
53
53
|
"deploy:docs": "pnpm run --filter=react-strawberry-toast-docs deploy",
|
|
54
54
|
"build": "tsup",
|
|
55
55
|
"test": "vitest",
|
|
56
|
-
"test:
|
|
57
|
-
"test:ui": "
|
|
58
|
-
"test:coverage": "vitest --coverage",
|
|
56
|
+
"test:e2e": "npx playwright test",
|
|
57
|
+
"test:e2e:ui": "npx playwright test --ui",
|
|
59
58
|
"prepare": "husky install",
|
|
60
|
-
"deploy": "pnpm run test --run && pnpm run build && npm publish --access=public"
|
|
59
|
+
"deploy": "pnpm run test --run && pnpm run test:e2e && pnpm run build && npm publish --access=public"
|
|
61
60
|
},
|
|
62
61
|
"devDependencies": {
|
|
63
62
|
"@commitlint/cli": "^19.6.1",
|
|
64
63
|
"@commitlint/config-conventional": "^19.6.0",
|
|
64
|
+
"@playwright/test": "^1.50.1",
|
|
65
65
|
"@testing-library/jest-dom": "^6.6.3",
|
|
66
66
|
"@testing-library/react": "^15.0.7",
|
|
67
|
+
"@types/node": "^20",
|
|
67
68
|
"@types/react": "^18",
|
|
68
69
|
"@types/react-dom": "^18",
|
|
69
70
|
"concurrently": "^9.1.0",
|
|
70
71
|
"esbuild-sass-plugin": "^3.3.1",
|
|
71
72
|
"husky": "^8",
|
|
72
73
|
"jsdom": "^24.0.0",
|
|
74
|
+
"playwright": "^1.50.1",
|
|
73
75
|
"react": "^18",
|
|
74
76
|
"react-dom": "^18",
|
|
75
77
|
"rollup-preserve-directives": "^1.1.3",
|