@planningcenter/sweetest-alert 2.0.3 → 2.2.0

package/README.md

@@ -128,6 +128,8 @@ SweetestAlert({
 const { isConfirmed, isDismissed } = await SweetestAlert({
   title: "Leave without saving?",
   content: "Your draft will be lost if you leave now.",
+  confirmButton: "Leave",
+  cancelButton: "Stay",
 })
 
 if (isConfirmed) {
@@ -290,6 +292,7 @@ SweetestAlert({
 | `onConfirm`     | Callback executed when confirm button is clicked. If it returns a promise, the dialog stays open with a loading confirm button until it settles — see [Async Confirm](#async-confirm). |
 | `onCancel`      | Callback executed when cancel button is clicked. Not called when `onConfirm` rejects.                                        |
 | `confirmButton` | Custom text for the confirm button. Defaults to "Okay".                                                                      |
+| `cancelButton`  | Custom text for the cancel button. Defaults to "Cancel". An escape hatch, not a first choice — a consistent "Cancel" is what makes dialogs recognizable at a glance. Only override it when generic copy reads awkwardly next to a customized `confirmButton` (e.g. "Are you sure you want to cancel this registration?" paired with `confirmButton: "Yes, cancel it"` leaves the default `cancelButton: "Cancel"` ambiguous — does clicking it cancel the registration, or cancel out of the dialog?). |
 | `hideCancel`    | When `true`, hides the cancel button for simple notifications. Defaults to `false`.                                          |
 | `confirmation`  | When set (`{ match, label?, description? }`), requires the user to type `match` before the confirm button is enabled. Case-sensitive; surrounding whitespace is ignored. Pressing Enter in the box confirms. An empty or whitespace-only `match` means no requirement. Reserve for destructive actions — see [Confirmation Input](#confirmation-input). |
 

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("react");let e=require("react-dom/client"),t=require("@planningcenter/tapestry"),n=require("react/jsx-runtime");var r=`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`,i=`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`,a=`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`,o=`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`,s=`Uh oh!`,c=`Something went wrong, please try again. If the error continues, please contact support.`,l=e=>`Doesn’t match. Type ${e} exactly, including capitalization.`;function u(){let e;return{promise:new Promise(t=>{e=t}),resolve:e}}function d(e){return typeof(e!==null&&(typeof e==`object`||typeof e==`function`)?e.then:void 0)==`function`}function f({onCancel:f,onConfirm:p,confirmButton:m=`Okay`,confirmation:h,content:g,hideCancel:_=!1,title:v,type:y=`warning`}){let b=document.createElement(`dialog`);b.className=`pco-sweetest-alert`,document.body.appendChild(b);let x=(0,e.createRoot)(b),S=h?.match.trim()??``,C=S.length>0,w=!1,T=`idle`,E=``,D=!1,{promise:O,resolve:k}=u(),A=()=>{w||(w=!0,T=`idle`,k({isConfirmed:!1,isDismissed:!0}),x.unmount(),b.remove())},j=e=>{w||(k({isConfirmed:!1,isDismissed:!0}),A(),e&&f?.())},M=async e=>{T=`pending`,H();let t;try{t=await e}catch{if(w)return;T=`error`,H();return}w||(k({isConfirmed:!0,isDismissed:!1,value:t}),A())},N=()=>E.trim()===S,P=()=>{if(w||T!==`idle`||C&&!N())return;let e=p?.();if(!d(e)){k({isConfirmed:!0,isDismissed:!1}),A();return}M(e)},F=e=>{let t=N();E=e.target.value;let n=D&&E.trim()!==``&&!N(),r=N()!==t||n!==D;D=n,r&&H()},I=()=>{let e=E.trim()!==``&&!N();e!==D&&(D=e,H())},L=e=>{e.preventDefault(),P()},R=e=>{T===`pending`&&e.preventDefault()},z=()=>{w||T===`pending`||j(T!==`error`)},B=e=>{switch(e){case`success`:return r;case`error`:return o;case`info`:return a;case`danger`:case`warning`:return i}},V=()=>{let e=T===`error`,r=T===`pending`,i=e?`error`:y;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`svg`,{className:`pco-sweetest-alert__icon pco-sweetest-alert--${i}`,width:`48`,height:`48`,viewBox:`0 0 16 16`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:B(i)})}),(0,n.jsx)(`h2`,{className:`pco-sweetest-alert__title`,children:e?s:v}),(0,n.jsx)(`div`,{className:`pco-sweetest-alert__body`,children:e?(0,n.jsx)(`p`,{children:c}):typeof g==`string`?(0,n.jsx)(`p`,{children:g}):g}),!e&&C&&(0,n.jsx)(`form`,{className:`pco-sweetest-alert__confirmation`,onSubmit:L,children:(0,n.jsx)(t.Input,{autoCapitalize:`none`,autoComplete:`off`,autoFocus:!0,description:D?l(S):h.description,disabled:r,invalid:D,label:h.label??(0,n.jsxs)(n.Fragment,{children:[`Type `,(0,n.jsx)(`strong`,{children:S}),` to confirm`]}),onBlur:I,onChange:F,spellCheck:!1})}),(0,n.jsxs)(`div`,{className:`pco-sweetest-alert__actions`,children:[!e&&!_&&(0,n.jsx)(t.Button,{label:`Cancel`,kind:`ghost`,disabled:r,onClick:()=>j(!0)}),(0,n.jsx)(t.Button,{label:e?`Okay`:m,kind:!e&&y===`danger`?`delete`:`primary`,loading:r,disabled:!e&&C&&!N(),onClick:e?()=>j(!1):P})]})]})},H=()=>x.render(V());return H(),b.showModal(),b.addEventListener(`cancel`,R),b.addEventListener(`close`,z),Object.assign(O,{show:()=>b.showModal(),close:()=>{T!==`pending`&&b.close()},cleanup:A})}exports.SweetestAlert=f;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("react");let e=require("react-dom/client"),t=require("@planningcenter/tapestry"),n=require("react/jsx-runtime");var r=`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`,i=`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`,a=`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`,o=`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`,s=`Uh oh!`,c=`Something went wrong, please try again. If the error continues, please contact support.`,l=e=>`Doesn’t match. Type ${e} exactly, including capitalization.`;function u(){let e;return{promise:new Promise(t=>{e=t}),resolve:e}}function d(e){return typeof(e!==null&&(typeof e==`object`||typeof e==`function`)?e.then:void 0)==`function`}function f({onCancel:f,onConfirm:p,cancelButton:m=`Cancel`,confirmButton:h=`Okay`,confirmation:g,content:_,hideCancel:v=!1,title:y,type:b=`warning`}){let x=document.createElement(`dialog`);x.className=`pco-sweetest-alert`,document.body.appendChild(x);let S=(0,e.createRoot)(x),C=g?.match.trim()??``,w=C.length>0,T=!1,E=`idle`,D=``,O=!1,{promise:k,resolve:A}=u(),j=()=>{T||(T=!0,E=`idle`,A({isConfirmed:!1,isDismissed:!0}),S.unmount(),x.remove())},M=e=>{T||(A({isConfirmed:!1,isDismissed:!0}),j(),e&&f?.())},N=async e=>{E=`pending`,U();let t;try{t=await e}catch{if(T)return;E=`error`,U();return}T||(A({isConfirmed:!0,isDismissed:!1,value:t}),j())},P=()=>D.trim()===C,F=()=>{if(T||E!==`idle`||w&&!P())return;let e=p?.();if(!d(e)){A({isConfirmed:!0,isDismissed:!1}),j();return}N(e)},I=e=>{let t=P();D=e.target.value;let n=O&&D.trim()!==``&&!P(),r=P()!==t||n!==O;O=n,r&&U()},L=()=>{let e=D.trim()!==``&&!P();e!==O&&(O=e,U())},R=e=>{e.preventDefault(),F()},z=e=>{E===`pending`&&e.preventDefault()},B=()=>{T||E===`pending`||M(E!==`error`)},V=e=>{switch(e){case`success`:return r;case`error`:return o;case`info`:return a;case`danger`:case`warning`:return i}},H=()=>{let e=E===`error`,r=E===`pending`,i=e?`error`:b;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`svg`,{className:`pco-sweetest-alert__icon pco-sweetest-alert--${i}`,width:`48`,height:`48`,viewBox:`0 0 16 16`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:V(i)})}),(0,n.jsx)(`h2`,{className:`pco-sweetest-alert__title`,children:e?s:y}),(0,n.jsx)(`div`,{className:`pco-sweetest-alert__body`,children:e?(0,n.jsx)(`p`,{children:c}):typeof _==`string`?(0,n.jsx)(`p`,{children:_}):_}),!e&&w&&(0,n.jsx)(`form`,{className:`pco-sweetest-alert__confirmation`,onSubmit:R,children:(0,n.jsx)(t.Input,{autoCapitalize:`none`,autoComplete:`off`,autoFocus:!0,description:O?l(C):g.description,disabled:r,invalid:O,label:g.label??(0,n.jsxs)(n.Fragment,{children:[`Type `,(0,n.jsx)(`strong`,{children:C}),` to confirm`]}),onBlur:L,onChange:I,spellCheck:!1})}),(0,n.jsxs)(`div`,{className:`pco-sweetest-alert__actions`,children:[!e&&!v&&(0,n.jsx)(t.Button,{label:m,kind:`ghost`,disabled:r,onClick:()=>M(!0)}),(0,n.jsx)(t.Button,{label:e?`Okay`:h,kind:!e&&b===`danger`?`delete`:`primary`,loading:r,disabled:!e&&w&&!P(),onClick:e?()=>M(!1):F})]})]})},U=()=>S.render(H());return U(),x.showModal(),x.addEventListener(`cancel`,z),x.addEventListener(`close`,B),Object.assign(k,{show:()=>x.showModal(),close:()=>{E!==`pending`&&x.close()},cleanup:j})}exports.SweetestAlert=f;

package/dist/index.js

@@ -16,60 +16,60 @@ function p() {
 function m(e) {
 	return typeof (e !== null && (typeof e == "object" || typeof e == "function") ? e.then : void 0) == "function";
 }
-function h({ onCancel: h, onConfirm: g, confirmButton: _ = "Okay", confirmation: v, content: y, hideCancel: b = !1, title: x, type: S = "warning" }) {
-	let C = document.createElement("dialog");
-	C.className = "pco-sweetest-alert", document.body.appendChild(C);
-	let w = e(C), T = v?.match.trim() ?? "", E = T.length > 0, D = !1, O = "idle", k = "", A = !1, { promise: j, resolve: M } = p(), N = () => {
-		D || (D = !0, O = "idle", M({
+function h({ onCancel: h, onConfirm: g, cancelButton: _ = "Cancel", confirmButton: v = "Okay", confirmation: y, content: b, hideCancel: x = !1, title: S, type: C = "warning" }) {
+	let w = document.createElement("dialog");
+	w.className = "pco-sweetest-alert", document.body.appendChild(w);
+	let T = e(w), E = y?.match.trim() ?? "", D = E.length > 0, O = !1, k = "idle", A = "", j = !1, { promise: M, resolve: N } = p(), P = () => {
+		O || (O = !0, k = "idle", N({
 			isConfirmed: !1,
 			isDismissed: !0
-		}), w.unmount(), C.remove());
-	}, P = (e) => {
-		D || (M({
+		}), T.unmount(), w.remove());
+	}, F = (e) => {
+		O || (N({
 			isConfirmed: !1,
 			isDismissed: !0
-		}), N(), e && h?.());
-	}, F = async (e) => {
-		O = "pending", G();
+		}), P(), e && h?.());
+	}, I = async (e) => {
+		k = "pending", K();
 		let t;
 		try {
 			t = await e;
 		} catch {
-			if (D) return;
-			O = "error", G();
+			if (O) return;
+			k = "error", K();
 			return;
 		}
-		D || (M({
+		O || (N({
 			isConfirmed: !0,
 			isDismissed: !1,
 			value: t
-		}), N());
-	}, I = () => k.trim() === T, L = () => {
-		if (D || O !== "idle" || E && !I()) return;
+		}), P());
+	}, L = () => A.trim() === E, R = () => {
+		if (O || k !== "idle" || D && !L()) return;
 		let e = g?.();
 		if (!m(e)) {
-			M({
+			N({
 				isConfirmed: !0,
 				isDismissed: !1
-			}), N();
+			}), P();
 			return;
 		}
-		F(e);
-	}, R = (e) => {
-		let t = I();
-		k = e.target.value;
-		let n = A && k.trim() !== "" && !I(), r = I() !== t || n !== A;
-		A = n, r && G();
-	}, z = () => {
-		let e = k.trim() !== "" && !I();
-		e !== A && (A = e, G());
-	}, B = (e) => {
-		e.preventDefault(), L();
+		I(e);
+	}, z = (e) => {
+		let t = L();
+		A = e.target.value;
+		let n = j && A.trim() !== "" && !L(), r = L() !== t || n !== j;
+		j = n, r && K();
+	}, B = () => {
+		let e = A.trim() !== "" && !L();
+		e !== j && (j = e, K());
 	}, V = (e) => {
-		O === "pending" && e.preventDefault();
-	}, H = () => {
-		D || O === "pending" || P(O !== "error");
-	}, U = (e) => {
+		e.preventDefault(), R();
+	}, H = (e) => {
+		k === "pending" && e.preventDefault();
+	}, U = () => {
+		O || k === "pending" || F(k !== "error");
+	}, W = (e) => {
 		switch (e) {
 			case "success": return o;
 			case "error": return l;
@@ -77,8 +77,8 @@ function h({ onCancel: h, onConfirm: g, confirmButton: _ = "Okay", confirmation:
 			case "danger":
 			case "warning": return s;
 		}
-	}, W = () => {
-		let e = O === "error", o = O === "pending", s = e ? "error" : S;
+	}, G = () => {
+		let e = k === "error", o = k === "pending", s = e ? "error" : C;
 		return /* @__PURE__ */ a(r, { children: [
 			/* @__PURE__ */ i("svg", {
 				className: `pco-sweetest-alert__icon pco-sweetest-alert--${s}`,
@@ -86,59 +86,59 @@ function h({ onCancel: h, onConfirm: g, confirmButton: _ = "Okay", confirmation:
 				height: "48",
 				viewBox: "0 0 16 16",
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ i("path", { d: U(s) })
+				children: /* @__PURE__ */ i("path", { d: W(s) })
 			}),
 			/* @__PURE__ */ i("h2", {
 				className: "pco-sweetest-alert__title",
-				children: e ? u : x
+				children: e ? u : S
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "pco-sweetest-alert__body",
-				children: e ? /* @__PURE__ */ i("p", { children: d }) : typeof y == "string" ? /* @__PURE__ */ i("p", { children: y }) : y
+				children: e ? /* @__PURE__ */ i("p", { children: d }) : typeof b == "string" ? /* @__PURE__ */ i("p", { children: b }) : b
 			}),
-			!e && E && /* @__PURE__ */ i("form", {
+			!e && D && /* @__PURE__ */ i("form", {
 				className: "pco-sweetest-alert__confirmation",
-				onSubmit: B,
+				onSubmit: V,
 				children: /* @__PURE__ */ i(n, {
 					autoCapitalize: "none",
 					autoComplete: "off",
 					autoFocus: !0,
-					description: A ? f(T) : v.description,
+					description: j ? f(E) : y.description,
 					disabled: o,
-					invalid: A,
-					label: v.label ?? /* @__PURE__ */ a(r, { children: [
+					invalid: j,
+					label: y.label ?? /* @__PURE__ */ a(r, { children: [
 						"Type ",
-						/* @__PURE__ */ i("strong", { children: T }),
+						/* @__PURE__ */ i("strong", { children: E }),
 						" to confirm"
 					] }),
-					onBlur: z,
-					onChange: R,
+					onBlur: B,
+					onChange: z,
 					spellCheck: !1
 				})
 			}),
 			/* @__PURE__ */ a("div", {
 				className: "pco-sweetest-alert__actions",
-				children: [!e && !b && /* @__PURE__ */ i(t, {
-					label: "Cancel",
+				children: [!e && !x && /* @__PURE__ */ i(t, {
+					label: _,
 					kind: "ghost",
 					disabled: o,
-					onClick: () => P(!0)
+					onClick: () => F(!0)
 				}), /* @__PURE__ */ i(t, {
-					label: e ? "Okay" : _,
-					kind: !e && S === "danger" ? "delete" : "primary",
+					label: e ? "Okay" : v,
+					kind: !e && C === "danger" ? "delete" : "primary",
 					loading: o,
-					disabled: !e && E && !I(),
-					onClick: e ? () => P(!1) : L
+					disabled: !e && D && !L(),
+					onClick: e ? () => F(!1) : R
 				})]
 			})
 		] });
-	}, G = () => w.render(W());
-	return G(), C.showModal(), C.addEventListener("cancel", V), C.addEventListener("close", H), Object.assign(j, {
-		show: () => C.showModal(),
+	}, K = () => T.render(G());
+	return K(), w.showModal(), w.addEventListener("cancel", H), w.addEventListener("close", U), Object.assign(M, {
+		show: () => w.showModal(),
 		close: () => {
-			O !== "pending" && C.close();
+			k !== "pending" && w.close();
 		},
-		cleanup: N
+		cleanup: P
 	});
 }
 //#endregion

package/dist/style.css

@@ -7,6 +7,7 @@
   inset: var(--t-spacing-2);
   margin: auto;
   max-width: 600px;
+  min-width: min(400px, calc(100vw - var(--t-spacing-2) * 2));
   padding: var(--t-spacing-4) var(--t-spacing-4) 0;
   text-align: center;
 }

package/dist/sweetest_alert.d.ts

@@ -74,6 +74,19 @@ type AlertOptions = {
     onConfirm?: () => unknown;
     /** Text for the confirm button. Defaults to `"Okay"`. */
     confirmButton?: string;
+    /**
+     * Text for the cancel button. Defaults to `"Cancel"`.
+     *
+     * This is an escape hatch, not a first choice. A consistent "Cancel" across
+     * every dialog is what lets people recognize and dismiss one without
+     * reading it closely. Reach for this only when a generic "Cancel" reads
+     * awkwardly next to a customized `confirmButton` — e.g. on "Are you sure
+     * you want to cancel this registration?", pairing `confirmButton: "Yes,
+     * cancel it"` leaves the default `cancelButton: "Cancel"` ambiguous: does
+     * clicking it cancel the registration, or cancel out of this dialog?
+     * Leave it unset otherwise.
+     */
+    cancelButton?: string;
     /** Required. The body content explaining the alert. Accepts a string or React node. */
     content: string | React.ReactNode;
     /** When `true`, hides the cancel button for simple notifications. Defaults to `false`. */
@@ -137,7 +150,7 @@ type AlertOptions = {
  * - `cleanup()` — unmounts the React root and removes the dialog from the
  *   DOM immediately, regardless of pending state
  */
-export declare function SweetestAlert({ onCancel, onConfirm, confirmButton, confirmation, content, hideCancel, title, type, }: AlertOptions): Promise<AlertResult> & {
+export declare function SweetestAlert({ onCancel, onConfirm, cancelButton, confirmButton, confirmation, content, hideCancel, title, type, }: AlertOptions): Promise<AlertResult> & {
     show: () => void;
     close: () => void;
     cleanup: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/sweetest-alert",
-  "version": "2.0.3",
+  "version": "2.2.0",
   "description": "The sweetest alert ever",
   "type": "module",
   "packageManager": "yarn@4.14.1+sha512.64df448055b2d37ba269d7db535a469b8da93f8ef1140c25fd7a83c00a8fbaacb214ca0e02553b92a2c54cef78bb67d0b4817fab02001df0e24fac0faccc3b42",