@planningcenter/sweetest-alert 1.2.0 → 1.6.2
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 +73 -18
- package/dist/index.cjs +1 -1
- package/dist/index.js +102 -106
- package/dist/sweetest_alert.d.ts +45 -2
- package/package.json +11 -12
package/README.md
CHANGED
|
@@ -21,7 +21,7 @@ This package requires the following peer dependencies:
|
|
|
21
21
|
|
|
22
22
|
- `react` ^18.3.1
|
|
23
23
|
- `react-dom` ^18.3.1
|
|
24
|
-
- `@planningcenter/tapestry` ^2.10.1
|
|
24
|
+
- `@planningcenter/tapestry` ^2.10.1 || ^3.0.0
|
|
25
25
|
- `@planningcenter/icons` ^15.29.1
|
|
26
26
|
|
|
27
27
|
## Usage
|
|
@@ -29,7 +29,7 @@ This package requires the following peer dependencies:
|
|
|
29
29
|
### Basic Example
|
|
30
30
|
|
|
31
31
|
```jsx
|
|
32
|
-
import { SweetestAlert } from
|
|
32
|
+
import { SweetestAlert } from "@planningcenter/sweetest-alert"
|
|
33
33
|
|
|
34
34
|
// Simple notification
|
|
35
35
|
SweetestAlert({
|
|
@@ -46,10 +46,55 @@ SweetestAlert({
|
|
|
46
46
|
title: "Delete Item",
|
|
47
47
|
content: "Are you sure you want to delete this item?",
|
|
48
48
|
onConfirm: () => console.log("Confirmed"),
|
|
49
|
-
onCancel: () => console.log("Cancelled")
|
|
49
|
+
onCancel: () => console.log("Cancelled"),
|
|
50
50
|
})
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
+
### Promise-based Usage
|
|
54
|
+
|
|
55
|
+
`SweetestAlert` also returns a promise that resolves to `{ isConfirmed, isDismissed }`, so you can use `.then()`/`await` instead of (or alongside) `onConfirm`/`onCancel`:
|
|
56
|
+
|
|
57
|
+
```jsx
|
|
58
|
+
const { isConfirmed } = await SweetestAlert({
|
|
59
|
+
type: "danger",
|
|
60
|
+
title: "Delete Item",
|
|
61
|
+
content: "Are you sure you want to delete this item?",
|
|
62
|
+
})
|
|
63
|
+
|
|
64
|
+
if (isConfirmed) {
|
|
65
|
+
deleteItem()
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Or chain `.then()` when you can’t (or don’t want to) use `await`:
|
|
70
|
+
|
|
71
|
+
```jsx
|
|
72
|
+
SweetestAlert({
|
|
73
|
+
title: "Discard changes?",
|
|
74
|
+
content: "You have unsaved changes that will be lost.",
|
|
75
|
+
confirmButton: "Discard",
|
|
76
|
+
}).then(({ isConfirmed }) => {
|
|
77
|
+
if (isConfirmed) {
|
|
78
|
+
discardChanges()
|
|
79
|
+
}
|
|
80
|
+
})
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
`isDismissed` is handy when you want to react to a cancel or Escape too, not just a confirm:
|
|
84
|
+
|
|
85
|
+
```jsx
|
|
86
|
+
const { isConfirmed, isDismissed } = await SweetestAlert({
|
|
87
|
+
title: "Leave without saving?",
|
|
88
|
+
content: "Your draft will be lost if you leave now.",
|
|
89
|
+
})
|
|
90
|
+
|
|
91
|
+
if (isConfirmed) {
|
|
92
|
+
navigateAway()
|
|
93
|
+
} else if (isDismissed) {
|
|
94
|
+
trackEvent("leave_prompt_dismissed")
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
53
98
|
### Alert Types
|
|
54
99
|
|
|
55
100
|
The component supports five visual types:
|
|
@@ -59,28 +104,28 @@ The component supports five visual types:
|
|
|
59
104
|
SweetestAlert({
|
|
60
105
|
type: "info",
|
|
61
106
|
title: "Information",
|
|
62
|
-
content: "This is an informational message."
|
|
107
|
+
content: "This is an informational message.",
|
|
63
108
|
})
|
|
64
109
|
|
|
65
110
|
// Success alert
|
|
66
111
|
SweetestAlert({
|
|
67
112
|
type: "success",
|
|
68
113
|
title: "Success!",
|
|
69
|
-
content: "Operation completed successfully."
|
|
114
|
+
content: "Operation completed successfully.",
|
|
70
115
|
})
|
|
71
116
|
|
|
72
117
|
// Warning alert (default)
|
|
73
118
|
SweetestAlert({
|
|
74
119
|
type: "warning",
|
|
75
120
|
title: "Warning",
|
|
76
|
-
content: "Please proceed with caution."
|
|
121
|
+
content: "Please proceed with caution.",
|
|
77
122
|
})
|
|
78
123
|
|
|
79
124
|
// Error alert
|
|
80
125
|
SweetestAlert({
|
|
81
126
|
type: "error",
|
|
82
127
|
title: "Error",
|
|
83
|
-
content: "Something went wrong."
|
|
128
|
+
content: "Something went wrong.",
|
|
84
129
|
})
|
|
85
130
|
|
|
86
131
|
// Danger alert (for destructive actions)
|
|
@@ -88,7 +133,7 @@ SweetestAlert({
|
|
|
88
133
|
type: "danger",
|
|
89
134
|
title: "Delete Account",
|
|
90
135
|
content: "This action cannot be undone.",
|
|
91
|
-
confirmButton: "Delete"
|
|
136
|
+
confirmButton: "Delete",
|
|
92
137
|
})
|
|
93
138
|
```
|
|
94
139
|
|
|
@@ -108,7 +153,7 @@ SweetestAlert({
|
|
|
108
153
|
<li>Formatted text</li>
|
|
109
154
|
</ul>
|
|
110
155
|
</>
|
|
111
|
-
)
|
|
156
|
+
),
|
|
112
157
|
})
|
|
113
158
|
```
|
|
114
159
|
|
|
@@ -116,15 +161,25 @@ SweetestAlert({
|
|
|
116
161
|
|
|
117
162
|
### Parameters
|
|
118
163
|
|
|
119
|
-
| Parameter
|
|
120
|
-
|
|
121
|
-
| `title`
|
|
122
|
-
| `content`
|
|
123
|
-
| `type`
|
|
124
|
-
| `onConfirm`
|
|
125
|
-
| `onCancel`
|
|
126
|
-
| `confirmButton` |
|
|
127
|
-
| `hideCancel`
|
|
164
|
+
| Parameter | Description |
|
|
165
|
+
| --------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
|
166
|
+
| `title` | **Required.** The main heading text displayed at the top of the modal. |
|
|
167
|
+
| `content` | **Required.** The body content. Accepts plain text or React components (`string \| React.ReactNode`). |
|
|
168
|
+
| `type` | The visual type of alert (`info`, `success`, `error`, `danger`, `warning`), affects icon and styling. Defaults to "warning". |
|
|
169
|
+
| `onConfirm` | Callback executed when confirm button is clicked. |
|
|
170
|
+
| `onCancel` | Callback executed when cancel button is clicked. |
|
|
171
|
+
| `confirmButton` | Custom text for the confirm button. Defaults to "Okay". |
|
|
172
|
+
| `hideCancel` | When `true`, hides the cancel button for simple notifications. Defaults to `false`. |
|
|
173
|
+
|
|
174
|
+
### Return Value
|
|
175
|
+
|
|
176
|
+
`SweetestAlert` returns a promise that resolves to `{ isConfirmed, isDismissed }` when the dialog is closed (via confirm, cancel, or Escape), plus:
|
|
177
|
+
|
|
178
|
+
| Property | Description |
|
|
179
|
+
| --------- | ----------------------------------------------------------------------------------------------- |
|
|
180
|
+
| `show` | Re-opens the dialog (calls the native `showModal()`). |
|
|
181
|
+
| `close` | Closes the dialog (calls the native `close()`), resolving the promise with `isDismissed: true`. |
|
|
182
|
+
| `cleanup` | Unmounts the React root and removes the dialog from the DOM immediately. |
|
|
128
183
|
|
|
129
184
|
## Development
|
|
130
185
|
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);require("react");let t=require("@planningcenter/tapestry"),n=require("react/jsx-runtime");var r=e((e=>{var t=require("react-dom");if(process.env.NODE_ENV===`production`)e.createRoot=t.createRoot,e.hydrateRoot=t.hydrateRoot;else{var n=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;e.createRoot=function(e,r){n.usingClientEntryPoint=!0;try{return t.createRoot(e,r)}finally{n.usingClientEntryPoint=!1}},e.hydrateRoot=function(e,r,i){n.usingClientEntryPoint=!0;try{return t.hydrateRoot(e,r,i)}finally{n.usingClientEntryPoint=!1}}}}))(),i=`M8,0c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8c0,-4.41828 3.58172,-8 8,-8M12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z`,a=`M15.669,13.676c0.13528,0.2343 0.13541,0.52294 0.00036,0.75737c-0.13505,0.23443 -0.38481,0.37911 -0.65536,0.37963h-14.028c-0.27081,0.0001 -0.52105,-0.14447 -0.65623,-0.37913c-0.13518,-0.23466 -0.13471,-0.52366 0.00123,-0.75787l7.014,-12.115c0.13497,-0.23419 0.3847,-0.37849 0.655,-0.37849c0.2703,0 0.52003,0.14431 0.655,0.37849l7.014,12.115M8.757,11.028h-1.514v1.514h1.514zM8.757,6.485h-1.514v3.029h1.514z`,o=`M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8c0,-4.41828 3.58172,-8 8,-8`,s=`M11.395,10.262l-2.262,-2.262l2.262,-2.262l-1.132,-1.132l-2.262,2.262l-2.263,-2.262l-1.131,1.132l2.262,2.262l-2.262,2.262l1.131,1.132l2.263,-2.262l2.262,2.262zM13.659,2.343c3.12218,3.12514 3.12218,8.18886 0,11.314c-2.28834,2.28863 -5.73017,2.97305 -8.72,1.734c-2.99134,-1.23749 -4.94222,-4.15558 -4.94244,-7.39278c-0.00022,-3.2372 1.95027,-6.15555 4.94143,-7.39345c2.99117,-1.2379 6.43353,-0.55139 8.72101,1.73923`;function c(){let e;return{promise:new Promise(t=>{e=t}),resolve:e}}function l({onCancel:e,onConfirm:l,confirmButton:u=`Okay`,content:d,hideCancel:f=!1,title:p,type:m=`warning`}){let h=document.createElement(`dialog`);h.className=`pco-sweetest-alert`,document.body.appendChild(h);let g=(0,r.createRoot)(h),_=!1,{promise:v,resolve:y}=c(),b=()=>{_||(_=!0,y({isConfirmed:!1,isDismissed:!0}),g.unmount(),document.body.removeChild(h))},x=()=>{_||(y({isConfirmed:!0,isDismissed:!1}),b(),l?.())},S=()=>{_||(y({isConfirmed:!1,isDismissed:!0}),b(),e?.())};return g.render((0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`svg`,{className:`pco-sweetest-alert__icon pco-sweetest-alert--${m}`,width:`48`,height:`48`,viewBox:`0 0 16 16`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:(()=>{switch(m){case`success`:return i;case`error`:return s;case`info`:return o;case`danger`:case`warning`:return a}})()})}),(0,n.jsx)(`h2`,{className:`pco-sweetest-alert__title`,children:p}),(0,n.jsx)(`div`,{className:`pco-sweetest-alert__body`,children:typeof d==`string`?(0,n.jsx)(`p`,{children:d}):d}),(0,n.jsxs)(`div`,{className:`pco-sweetest-alert__actions`,children:[!f&&(0,n.jsx)(t.Button,{label:`Cancel`,kind:`ghost`,onClick:S}),(0,n.jsx)(t.Button,{label:u,kind:m===`danger`?`delete`:`primary`,onClick:x})]})]})),h.showModal(),h.addEventListener(`close`,S),Object.assign(v,{show:()=>h.showModal(),close:()=>h.close(),cleanup:b})}exports.SweetestAlert=l;
|
package/dist/index.js
CHANGED
|
@@ -1,108 +1,104 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
1
|
+
import "react";
|
|
2
|
+
import { Button as e } from "@planningcenter/tapestry";
|
|
3
|
+
import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
4
|
+
//#region \0rolldown/runtime.js
|
|
5
|
+
var i = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), a = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
|
|
6
|
+
if (typeof require < "u") return require.apply(this, arguments);
|
|
7
|
+
throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
|
|
8
|
+
}), o = (/* @__PURE__ */ i(((e) => {
|
|
9
|
+
var t = a("react-dom");
|
|
10
|
+
if (process.env.NODE_ENV === "production") e.createRoot = t.createRoot, e.hydrateRoot = t.hydrateRoot;
|
|
11
|
+
else {
|
|
12
|
+
var n = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
|
13
|
+
e.createRoot = function(e, r) {
|
|
14
|
+
n.usingClientEntryPoint = !0;
|
|
15
|
+
try {
|
|
16
|
+
return t.createRoot(e, r);
|
|
17
|
+
} finally {
|
|
18
|
+
n.usingClientEntryPoint = !1;
|
|
19
|
+
}
|
|
20
|
+
}, e.hydrateRoot = function(e, r, i) {
|
|
21
|
+
n.usingClientEntryPoint = !0;
|
|
22
|
+
try {
|
|
23
|
+
return t.hydrateRoot(e, r, i);
|
|
24
|
+
} finally {
|
|
25
|
+
n.usingClientEntryPoint = !1;
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
})))(), s = "M8,0c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8c0,-4.41828 3.58172,-8 8,-8M12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z", c = "M15.669,13.676c0.13528,0.2343 0.13541,0.52294 0.00036,0.75737c-0.13505,0.23443 -0.38481,0.37911 -0.65536,0.37963h-14.028c-0.27081,0.0001 -0.52105,-0.14447 -0.65623,-0.37913c-0.13518,-0.23466 -0.13471,-0.52366 0.00123,-0.75787l7.014,-12.115c0.13497,-0.23419 0.3847,-0.37849 0.655,-0.37849c0.2703,0 0.52003,0.14431 0.655,0.37849l7.014,12.115M8.757,11.028h-1.514v1.514h1.514zM8.757,6.485h-1.514v3.029h1.514z", l = "M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8c0,-4.41828 3.58172,-8 8,-8", u = "M11.395,10.262l-2.262,-2.262l2.262,-2.262l-1.132,-1.132l-2.262,2.262l-2.263,-2.262l-1.131,1.132l2.262,2.262l-2.262,2.262l1.131,1.132l2.263,-2.262l2.262,2.262zM13.659,2.343c3.12218,3.12514 3.12218,8.18886 0,11.314c-2.28834,2.28863 -5.73017,2.97305 -8.72,1.734c-2.99134,-1.23749 -4.94222,-4.15558 -4.94244,-7.39278c-0.00022,-3.2372 1.95027,-6.15555 4.94143,-7.39345c2.99117,-1.2379 6.43353,-0.55139 8.72101,1.73923";
|
|
30
|
+
//#endregion
|
|
31
|
+
//#region src/sweetest_alert.tsx
|
|
32
|
+
function d() {
|
|
33
|
+
let e;
|
|
34
|
+
return {
|
|
35
|
+
promise: new Promise((t) => {
|
|
36
|
+
e = t;
|
|
37
|
+
}),
|
|
38
|
+
resolve: e
|
|
39
|
+
};
|
|
30
40
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
{
|
|
93
|
-
label: l,
|
|
94
|
-
kind: s === "danger" ? "delete" : "primary",
|
|
95
|
-
onClick: p
|
|
96
|
-
}
|
|
97
|
-
)
|
|
98
|
-
] })
|
|
99
|
-
] })
|
|
100
|
-
), e.showModal(), e.addEventListener("close", h), {
|
|
101
|
-
show: () => e.showModal(),
|
|
102
|
-
close: () => e.close(),
|
|
103
|
-
cleanup: i
|
|
104
|
-
};
|
|
41
|
+
function f({ onCancel: i, onConfirm: a, confirmButton: f = "Okay", content: p, hideCancel: m = !1, title: h, type: g = "warning" }) {
|
|
42
|
+
let _ = document.createElement("dialog");
|
|
43
|
+
_.className = "pco-sweetest-alert", document.body.appendChild(_);
|
|
44
|
+
let v = (0, o.createRoot)(_), y = !1, { promise: b, resolve: x } = d(), S = () => {
|
|
45
|
+
y || (y = !0, x({
|
|
46
|
+
isConfirmed: !1,
|
|
47
|
+
isDismissed: !0
|
|
48
|
+
}), v.unmount(), document.body.removeChild(_));
|
|
49
|
+
}, C = () => {
|
|
50
|
+
y || (x({
|
|
51
|
+
isConfirmed: !0,
|
|
52
|
+
isDismissed: !1
|
|
53
|
+
}), S(), a?.());
|
|
54
|
+
}, w = () => {
|
|
55
|
+
y || (x({
|
|
56
|
+
isConfirmed: !1,
|
|
57
|
+
isDismissed: !0
|
|
58
|
+
}), S(), i?.());
|
|
59
|
+
};
|
|
60
|
+
return v.render(/* @__PURE__ */ r(t, { children: [
|
|
61
|
+
/* @__PURE__ */ n("svg", {
|
|
62
|
+
className: `pco-sweetest-alert__icon pco-sweetest-alert--${g}`,
|
|
63
|
+
width: "48",
|
|
64
|
+
height: "48",
|
|
65
|
+
viewBox: "0 0 16 16",
|
|
66
|
+
"aria-hidden": "true",
|
|
67
|
+
children: /* @__PURE__ */ n("path", { d: (() => {
|
|
68
|
+
switch (g) {
|
|
69
|
+
case "success": return s;
|
|
70
|
+
case "error": return u;
|
|
71
|
+
case "info": return l;
|
|
72
|
+
case "danger":
|
|
73
|
+
case "warning": return c;
|
|
74
|
+
}
|
|
75
|
+
})() })
|
|
76
|
+
}),
|
|
77
|
+
/* @__PURE__ */ n("h2", {
|
|
78
|
+
className: "pco-sweetest-alert__title",
|
|
79
|
+
children: h
|
|
80
|
+
}),
|
|
81
|
+
/* @__PURE__ */ n("div", {
|
|
82
|
+
className: "pco-sweetest-alert__body",
|
|
83
|
+
children: typeof p == "string" ? /* @__PURE__ */ n("p", { children: p }) : p
|
|
84
|
+
}),
|
|
85
|
+
/* @__PURE__ */ r("div", {
|
|
86
|
+
className: "pco-sweetest-alert__actions",
|
|
87
|
+
children: [!m && /* @__PURE__ */ n(e, {
|
|
88
|
+
label: "Cancel",
|
|
89
|
+
kind: "ghost",
|
|
90
|
+
onClick: w
|
|
91
|
+
}), /* @__PURE__ */ n(e, {
|
|
92
|
+
label: f,
|
|
93
|
+
kind: g === "danger" ? "delete" : "primary",
|
|
94
|
+
onClick: C
|
|
95
|
+
})]
|
|
96
|
+
})
|
|
97
|
+
] })), _.showModal(), _.addEventListener("close", w), Object.assign(b, {
|
|
98
|
+
show: () => _.showModal(),
|
|
99
|
+
close: () => _.close(),
|
|
100
|
+
cleanup: S
|
|
101
|
+
});
|
|
105
102
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
};
|
|
103
|
+
//#endregion
|
|
104
|
+
export { f as SweetestAlert };
|
package/dist/sweetest_alert.d.ts
CHANGED
|
@@ -1,14 +1,57 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
/** Visual type of alert; affects icon and border/hover color. */
|
|
2
3
|
type AlertTypes = "info" | "success" | "error" | "danger" | "warning";
|
|
3
|
-
|
|
4
|
+
/** Resolution value of the promise returned by {@link SweetestAlert}. */
|
|
5
|
+
type AlertResult = {
|
|
6
|
+
/** `true` when the user clicked the confirm button. */
|
|
7
|
+
isConfirmed: boolean;
|
|
8
|
+
/** `true` when the dialog was dismissed via cancel, Escape, `close()`, or `cleanup()`. */
|
|
9
|
+
isDismissed: boolean;
|
|
10
|
+
};
|
|
11
|
+
/** Options for {@link SweetestAlert}. */
|
|
12
|
+
type AlertOptions = {
|
|
13
|
+
/** Callback executed when the cancel button is clicked, the dialog is dismissed via Escape, or `close()` is called. */
|
|
4
14
|
onCancel?: () => void;
|
|
15
|
+
/** Callback executed when the confirm button is clicked. */
|
|
5
16
|
onConfirm?: () => void;
|
|
17
|
+
/** Text for the confirm button. Defaults to `"Okay"`. */
|
|
6
18
|
confirmButton?: string;
|
|
19
|
+
/** Required. The body content explaining the alert. Accepts a string or React node. */
|
|
7
20
|
content: string | React.ReactNode;
|
|
21
|
+
/** When `true`, hides the cancel button for simple notifications. Defaults to `false`. */
|
|
8
22
|
hideCancel?: boolean;
|
|
23
|
+
/** Required. The main heading text displayed at the top of the modal. */
|
|
9
24
|
title: string;
|
|
25
|
+
/** Visual type of alert; affects icon and styling. Defaults to `"warning"`. */
|
|
10
26
|
type?: AlertTypes;
|
|
11
|
-
}
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Shows a modal alert/confirmation dialog using a native `<dialog>` element.
|
|
30
|
+
*
|
|
31
|
+
* Creates the dialog, mounts a React root into it, and appends it to
|
|
32
|
+
* `document.body`. Not a traditional React component — call it directly
|
|
33
|
+
* from anywhere, including outside a React render tree.
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```ts
|
|
37
|
+
* const { isConfirmed } = await SweetestAlert({
|
|
38
|
+
* type: "danger",
|
|
39
|
+
* title: "Delete Item",
|
|
40
|
+
* content: "Are you sure you want to delete this item?",
|
|
41
|
+
* })
|
|
42
|
+
*
|
|
43
|
+
* if (isConfirmed) deleteItem()
|
|
44
|
+
* ```
|
|
45
|
+
*
|
|
46
|
+
* @returns A promise that resolves to {@link AlertResult} when the dialog
|
|
47
|
+
* closes (confirm, cancel, or Escape), merged with:
|
|
48
|
+
* - `show()` — re-opens the dialog (calls the native `showModal()`)
|
|
49
|
+
* - `close()` — closes the dialog (calls the native `close()`), resolving
|
|
50
|
+
* the promise with `isDismissed: true` and invoking `onCancel` if provided
|
|
51
|
+
* - `cleanup()` — unmounts the React root and removes the dialog from the
|
|
52
|
+
* DOM immediately
|
|
53
|
+
*/
|
|
54
|
+
export declare function SweetestAlert({ onCancel, onConfirm, confirmButton, content, hideCancel, title, type, }: AlertOptions): Promise<AlertResult> & {
|
|
12
55
|
show: () => void;
|
|
13
56
|
close: () => void;
|
|
14
57
|
cleanup: () => void;
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/sweetest-alert",
|
|
3
|
-
"version": "1.2
|
|
3
|
+
"version": "1.6.2",
|
|
4
4
|
"description": "The sweetest alert ever",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"packageManager": "yarn@1.
|
|
6
|
+
"packageManager": "yarn@4.14.1+sha512.64df448055b2d37ba269d7db535a469b8da93f8ef1140c25fd7a83c00a8fbaacb214ca0e02553b92a2c54cef78bb67d0b4817fab02001df0e24fac0faccc3b42",
|
|
7
7
|
"main": "./dist/index.cjs",
|
|
8
8
|
"module": "./dist/index.js",
|
|
9
9
|
"types": "./dist/index.d.ts",
|
|
@@ -35,13 +35,14 @@
|
|
|
35
35
|
"build:docs": "vite build --config vite.config.docs.ts",
|
|
36
36
|
"preview": "vite preview --config vite.config.docs.ts",
|
|
37
37
|
"test": "vitest",
|
|
38
|
+
"typecheck": "tsc --noEmit",
|
|
38
39
|
"lint:js": "eslint .",
|
|
39
40
|
"lint:css": "stylelint \"**/*.css\"",
|
|
40
41
|
"prepublishOnly": "yarn build:lib"
|
|
41
42
|
},
|
|
42
43
|
"peerDependencies": {
|
|
43
44
|
"@planningcenter/icons": "^15.29.1",
|
|
44
|
-
"@planningcenter/tapestry": "^2.10.1",
|
|
45
|
+
"@planningcenter/tapestry": "^2.10.1 || ^3.0.0",
|
|
45
46
|
"react": "^18.3.1 <19",
|
|
46
47
|
"react-dom": "^18.3.1"
|
|
47
48
|
},
|
|
@@ -49,18 +50,20 @@
|
|
|
49
50
|
"@eslint/js": "^9.37.0",
|
|
50
51
|
"@planningcenter/icons": "^15.29.1",
|
|
51
52
|
"@planningcenter/stylelint-config-pco": "^1.0.0",
|
|
52
|
-
"@planningcenter/tapestry": "^
|
|
53
|
+
"@planningcenter/tapestry": "^3.4.0",
|
|
53
54
|
"@testing-library/dom": "^10.4.1",
|
|
54
55
|
"@testing-library/jest-dom": "^6.9.1",
|
|
55
56
|
"@testing-library/react": "^16.3.0",
|
|
56
57
|
"@types/prismjs": "^1.26.5",
|
|
57
58
|
"@types/react": "^18.3.12",
|
|
58
59
|
"@types/react-dom": "^18.3.1",
|
|
59
|
-
"@vitejs/plugin-react": "^
|
|
60
|
+
"@vitejs/plugin-react": "^6.0.2",
|
|
60
61
|
"eslint": "^9.37.0",
|
|
62
|
+
"eslint-config-prettier": "^10.1.8",
|
|
61
63
|
"eslint-plugin-react": "^7.37.5",
|
|
62
64
|
"eslint-plugin-react-hooks": "^7.0.0",
|
|
63
|
-
"
|
|
65
|
+
"happy-dom": "^20.10.6",
|
|
66
|
+
"prettier": "^3.8.3",
|
|
64
67
|
"prismjs": "^1.30.0",
|
|
65
68
|
"react": "^18.3.1",
|
|
66
69
|
"react-dom": "^18.3.1",
|
|
@@ -68,11 +71,7 @@
|
|
|
68
71
|
"stylelint": "^16.25.0",
|
|
69
72
|
"typescript": "^5.9.3",
|
|
70
73
|
"typescript-eslint": "^8.46.1",
|
|
71
|
-
"vite": "^
|
|
72
|
-
"vitest": "
|
|
73
|
-
},
|
|
74
|
-
"volta": {
|
|
75
|
-
"node": "22.20.0",
|
|
76
|
-
"yarn": "1.22.22"
|
|
74
|
+
"vite": "^8.0.16",
|
|
75
|
+
"vitest": "4.1.8"
|
|
77
76
|
}
|
|
78
77
|
}
|