react-confirm-alert 3.1.1 → 3.3.0

package/Readme.md

@@ -16,20 +16,55 @@ npm install react-confirm-alert
 
 ```tsx
 import { confirm } from 'react-confirm-alert'
-import 'react-confirm-alert/src/react-confirm-alert.css'
+import 'react-confirm-alert/style.css'
 
 if (await confirm({ title: 'Delete file?', message: 'This cannot be undone.', tone: 'danger' })) {
   remove(file)
 }
 ```
 
+`style.css` needs 3.1.1 or later. The older path, `react-confirm-alert/src/react-confirm-alert.css`, still works.
+
 `confirm()` resolves `true` or `false`. `alert()` and `prompt()` work the same way, and `<DialogHost />` placed inside your providers lets dialogs read their context.
 
+## Custom UI
+
+Put your own form, list or warning in a dialog. Plain HTML gets the default look, even under Tailwind v4 preflight, and any class you add wins:
+
+```jsx
+import { DialogLayout, openDialog } from 'react-confirm-alert'
+
+const colour = await openDialog({
+  render: ({ close, dismiss }) => (
+    <DialogLayout title="Pick a colour" actions={[{ label: 'Cancel', onClick: dismiss }, { label: 'Blue', variant: 'primary', onClick: () => close('blue') }]}>
+      <p>Used for the team badge.</p>
+    </DialogLayout>
+  )
+}).result
+```
+
+3.0 `customUI` still works. Add `skin: true` for the new look:
+
+```jsx
+confirmAlert({
+  skin: true,
+  customUI: ({ onClose }) => (
+    <>
+      <h1>Leave the board?</h1>
+      <p>You can join again from the invite link.</p>
+      <button onClick={onClose}>Stay</button>
+    </>
+  )
+})
+```
+
+`confirm`, `alert` and `prompt` take `content` for JSX between the message and the buttons. See [Custom UI](https://ga-mo.github.io/react-confirm-alert/docs/custom-ui/).
+
 ## 3.0 code keeps working
 
 ```jsx
 import { confirmAlert } from 'react-confirm-alert'
-import 'react-confirm-alert/src/react-confirm-alert.css'
+import 'react-confirm-alert/style.css'
 
 confirmAlert({
   title: 'Confirm to submit',
@@ -47,7 +82,7 @@ Same options, DOM, class names and CSS path as 3.0.
 
 ```css
 @import 'tailwindcss';
-@import 'react-confirm-alert/src/react-confirm-alert.css' layer(components);
+@import 'react-confirm-alert/style.css' layer(components);
 ```
 
 ```tsx
@@ -60,11 +95,11 @@ Importing the CSS into `layer(components)` lets Tailwind utilities win without `
 
 | Import | gzip |
 |---|---|
-| `import { confirmAlert }` | 3,571 B |
-| `import { confirm }` | 3,851 B |
-| CSS | 1,095 B |
+| `import { confirmAlert }` | 3,769 B |
+| `import { confirm }` | 4,042 B |
+| CSS (the shipped file, not minified) | 2,909 B |
 
-Measured on 2026-10-23 with size-limit 14.3.0 (`npx size-limit`, config in `.size-limit.json`): the ESM build bundled and minified with React and React DOM excluded, then gzipped. 3.0.6 measured the same way is 2,396 B, including `prop-types`. The extra bytes are the native modal, focus handling, stacked and queued dialogs, and dialogs that render inside your providers.
+Measured on 2026-10-23 with size-limit 14.3.0 (`npx size-limit`, config in `.size-limit.json`): the ESM build bundled and minified with React and React DOM excluded, then gzipped. 3.0.6 measured the same way is 2,396 B, including `prop-types`. The extra bytes are the native modal, focus handling, stacked and queued dialogs, dialogs that render inside your providers, and the default look for your own content.
 
 ## Older versions
 

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 "use client";
-import { Component, createContext, useContext, useEffect, useId, useLayoutEffect, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { Component, Fragment, createContext, useContext, useEffect, useId, useLayoutEffect, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/store.ts
 var emptyState = {
 	entries: [],
@@ -159,6 +159,7 @@ var slotsFor = (layers) => (slot, extra) => ({
 });
 var SlotContext = createContext(slotsFor([]));
 var useSlot = () => useContext(SlotContext);
+var FrameContext = createContext({});
 function configureDialogs(defaults) {
 	runtime().defaults = defaults;
 }
@@ -171,7 +172,7 @@ function DialogStack({ target, host }) {
 	if (!(host ? hosts[hosts.length - 1] === host : target !== null || hosts.length === 0)) return null;
 	const openIds = entries.filter((e) => e.phase === "open").map((e) => e.id);
 	const top = openIds[openIds.length - 1];
-	return /* @__PURE__ */ jsx(Fragment, { children: entries.filter((e) => e.target === target && e.phase !== "queued").map((e) => /* @__PURE__ */ jsx(EntryView, {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: entries.filter((e) => e.target === target && e.phase !== "queued").map((e) => /* @__PURE__ */ jsx(EntryView, {
 		entry: e,
 		depth: openIds.indexOf(e.id),
 		topmost: e.id === top
@@ -213,6 +214,7 @@ function EntryView({ entry, depth, topmost }) {
 		closeOnClickOutside: (_ref2 = (_options$closeOnClick = options.closeOnClickOutside) !== null && _options$closeOnClick !== void 0 ? _options$closeOnClick : defaults.closeOnClickOutside) !== null && _ref2 !== void 0 ? _ref2 : true,
 		closeOnEscape: (_ref3 = (_options$closeOnEscap = options.closeOnEscape) !== null && _options$closeOnEscap !== void 0 ? _options$closeOnEscap : defaults.closeOnEscape) !== null && _ref3 !== void 0 ? _ref3 : true,
 		legacy: !!options.legacy,
+		skin: options.skin,
 		onClickOutside: options.onClickOutside,
 		onDismiss: dismiss,
 		children: /* @__PURE__ */ jsx(Render, {
@@ -221,6 +223,7 @@ function EntryView({ entry, depth, topmost }) {
 			descriptionId,
 			title: options.title,
 			message: options.message,
+			content: options.content,
 			buttons: (_options$buttons = options.buttons) !== null && _options$buttons !== void 0 ? _options$buttons : [],
 			close,
 			dismiss,
@@ -348,7 +351,7 @@ function closeDialog$1(id, { sync = true } = {}) {
 		commit(() => store.set(remove(store.get(), id)), sync);
 		return;
 	}
-	Promise.all(exits.map((a) => a.finished)).finally(() => store.set(remove(store.get(), id)));
+	Promise.all(exits.map((a) => a.finished.catch(() => {}))).then(() => store.set(remove(store.get(), id)));
 }
 var reopenQueued = false;
 function reopenClosedFrames() {
@@ -374,12 +377,15 @@ function animationsOf({ frame, panel }) {
 // src/DialogFrame.tsx
 var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
 function DialogFrame(props) {
-	var _props$tone, _props$depth, _props$topmost;
+	var _props$labelledBy, _props$tone, _props$depth, _props$topmost, _props$labelledBy2;
 	const frame = useRef(null);
 	const panel = useRef(null);
 	const pressedOn = useRef(null);
 	const stay = useRef(null);
 	const native = props.modal && canShowModal();
+	const layoutTitleId = useId();
+	const [layoutTitles, setLayoutTitles] = useState(0);
+	const labelledBy = (_props$labelledBy = props.labelledBy) !== null && _props$labelledBy !== void 0 ? _props$labelledBy : props.label || layoutTitles === 0 ? void 0 : layoutTitleId;
 	useLayoutEffect(() => {
 		var _panel$current, _panel$current2, _panel$current3;
 		const element = frame.current;
@@ -440,7 +446,10 @@ function DialogFrame(props) {
 	const isBusy = () => !!props.id && runtime().busy.has(props.id);
 	const onKeyDown = (e) => {
 		var _props$onKeyDown;
-		(_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, e, props.onDismiss);
+		(_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, e, () => {
+			e.preventDefault();
+			props.onDismiss();
+		});
 		if (!native && !props.legacy && e.key === "Escape" && props.closeOnEscape && !isBusy()) props.onDismiss();
 	};
 	const slot = slotsFor(props.layers);
@@ -448,11 +457,12 @@ function DialogFrame(props) {
 		...slot("dialog", props.extraClass),
 		role: props.role,
 		"aria-label": props.label,
-		"aria-labelledby": props.labelledBy,
+		"aria-labelledby": labelledBy,
 		"aria-describedby": props.describedBy,
 		"data-rca": "",
 		"data-state": props.state,
 		"data-kind": props.kind,
+		"data-skin": props.legacy && !props.skin ? void 0 : "",
 		"data-tone": (_props$tone = props.tone) !== null && _props$tone !== void 0 ? _props$tone : "default",
 		"data-depth": String((_props$depth = props.depth) !== null && _props$depth !== void 0 ? _props$depth : 0),
 		"data-topmost": ((_props$topmost = props.topmost) !== null && _props$topmost !== void 0 ? _props$topmost : true) ? "" : void 0,
@@ -466,7 +476,14 @@ function DialogFrame(props) {
 		tabIndex: -1,
 		children: /* @__PURE__ */ jsx(SlotContext.Provider, {
 			value: slot,
-			children: props.children
+			children: /* @__PURE__ */ jsx(FrameContext.Provider, {
+				value: {
+					id: props.id,
+					titleId: (_props$labelledBy2 = props.labelledBy) !== null && _props$labelledBy2 !== void 0 ? _props$labelledBy2 : layoutTitleId,
+					countTitle: setLayoutTitles
+				},
+				children: props.children
+			})
 		})
 	});
 	return native ? /* @__PURE__ */ jsx("dialog", {
@@ -494,9 +511,9 @@ var defaultButtons = [{
 	onClick: () => null
 }];
 function CustomUIHost({ render, args }) {
-	return /* @__PURE__ */ jsx(Fragment, { children: render(args) });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: render(args) });
 }
-function LegacyContent({ props, titleId, close, id }) {
+function LegacyContent({ props, titleId, close, id, skin }) {
 	var _props$buttons;
 	const latest = useRef({
 		props,
@@ -510,7 +527,12 @@ function LegacyContent({ props, titleId, close, id }) {
 		const keyboard = (event) => {
 			var _topmost, _props$keyCodeForClos, _props$closeOnEscape, _props$onkeyPress;
 			if (id && ((_topmost = topmost(store.get())) === null || _topmost === void 0 ? void 0 : _topmost.id) !== id) return;
-			const { props, close } = latest.current;
+			if (id && runtime().busy.has(id)) return;
+			const { props } = latest.current;
+			const close = () => {
+				event.preventDefault();
+				latest.current.close();
+			};
 			const keyCode = event.keyCode;
 			if (((_props$keyCodeForClos = props.keyCodeForClose) !== null && _props$keyCodeForClos !== void 0 ? _props$keyCodeForClos : []).includes(keyCode)) close();
 			if (((_props$closeOnEscape = props.closeOnEscape) !== null && _props$closeOnEscape !== void 0 ? _props$closeOnEscape : true) && keyCode === 27) {
@@ -524,17 +546,30 @@ function LegacyContent({ props, titleId, close, id }) {
 		return () => document.removeEventListener("keydown", keyboard, false);
 	}, []);
 	const slot = useSlot();
+	const frame = useContext(FrameContext);
 	const { title, message, customUI, childrenElement } = props;
 	const buttons = (_props$buttons = props.buttons) !== null && _props$buttons !== void 0 ? _props$buttons : defaultButtons;
-	if (customUI) return /* @__PURE__ */ jsx(CustomUIHost, {
-		render: customUI,
-		args: {
-			title,
-			message,
-			buttons,
-			onClose: close
-		}
-	});
+	if (customUI) {
+		const ui = /* @__PURE__ */ jsx(CustomUIHost, {
+			render: customUI,
+			args: {
+				title,
+				message,
+				buttons,
+				onClose: close
+			}
+		});
+		return skin ? /* @__PURE__ */ jsx("div", {
+			...slot("body"),
+			children: /* @__PURE__ */ jsx(FrameContext.Provider, {
+				value: {
+					...frame,
+					inBody: true
+				},
+				children: ui
+			})
+		}) : ui;
+	}
 	return /* @__PURE__ */ jsxs("div", {
 		...slot("body"),
 		children: [
@@ -561,19 +596,21 @@ function LegacyContent({ props, titleId, close, id }) {
 	});
 }
 function confirmAlert(properties) {
-	var _ref, _properties$modal, _runtime$defaults$con, _properties$closeOnCl, _properties$closeOnEs, _properties$targetId, _ref2, _properties$strategy, _runtime$defaults$con2;
+	var _ref, _properties$skin, _runtime$defaults$con, _ref2, _properties$modal, _runtime$defaults$con2, _properties$closeOnCl, _properties$closeOnEs, _properties$targetId, _ref3, _properties$strategy, _runtime$defaults$con3;
+	const skin = (_ref = (_properties$skin = properties.skin) !== null && _properties$skin !== void 0 ? _properties$skin : (_runtime$defaults$con = runtime().defaults.confirmAlert) === null || _runtime$defaults$con === void 0 ? void 0 : _runtime$defaults$con.skin) !== null && _ref !== void 0 ? _ref : false;
 	function Content({ id, titleId, dismiss }) {
 		return /* @__PURE__ */ jsx(LegacyContent, {
 			props: properties,
 			titleId,
 			close: dismiss,
-			id
+			id,
+			skin
 		});
 	}
 	openEntry({
 		kind: "custom",
 		title: properties.title,
-		modal: (_ref = (_properties$modal = properties.modal) !== null && _properties$modal !== void 0 ? _properties$modal : (_runtime$defaults$con = runtime().defaults.confirmAlert) === null || _runtime$defaults$con === void 0 ? void 0 : _runtime$defaults$con.modal) !== null && _ref !== void 0 ? _ref : false,
+		modal: (_ref2 = (_properties$modal = properties.modal) !== null && _properties$modal !== void 0 ? _properties$modal : (_runtime$defaults$con2 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con2 === void 0 ? void 0 : _runtime$defaults$con2.modal) !== null && _ref2 !== void 0 ? _ref2 : false,
 		unstyled: properties.unstyled,
 		classNames: properties.classNames,
 		closeOnClickOutside: (_properties$closeOnCl = properties.closeOnClickOutside) !== null && _properties$closeOnCl !== void 0 ? _properties$closeOnCl : true,
@@ -581,18 +618,20 @@ function confirmAlert(properties) {
 		overlayClassName: properties.overlayClassName,
 		onClickOutside: properties.onClickOutside,
 		legacy: true,
+		skin,
 		willUnmount: properties.willUnmount,
 		afterClose: properties.afterClose,
 		render: Content
-	}, (_properties$targetId = properties.targetId) !== null && _properties$targetId !== void 0 ? _properties$targetId : null, (_ref2 = (_properties$strategy = properties.strategy) !== null && _properties$strategy !== void 0 ? _properties$strategy : (_runtime$defaults$con2 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con2 === void 0 ? void 0 : _runtime$defaults$con2.strategy) !== null && _ref2 !== void 0 ? _ref2 : "replace");
+	}, (_properties$targetId = properties.targetId) !== null && _properties$targetId !== void 0 ? _properties$targetId : null, (_ref3 = (_properties$strategy = properties.strategy) !== null && _properties$strategy !== void 0 ? _properties$strategy : (_runtime$defaults$con3 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con3 === void 0 ? void 0 : _runtime$defaults$con3.strategy) !== null && _ref3 !== void 0 ? _ref3 : "replace");
 }
 function DeclarativeDialog(props) {
-	var _props$modal, _props$closeOnClickOu, _props$closeOnEscape2;
+	var _ref4, _props$skin, _runtime$defaults$con4, _props$modal, _props$closeOnClickOu, _props$closeOnEscape2;
 	const titleId = useId();
 	const close = () => {
 		var _props$afterClose;
 		return (_props$afterClose = props.afterClose) === null || _props$afterClose === void 0 ? void 0 : _props$afterClose.call(props);
 	};
+	const skin = (_ref4 = (_props$skin = props.skin) !== null && _props$skin !== void 0 ? _props$skin : (_runtime$defaults$con4 = runtime().defaults.confirmAlert) === null || _runtime$defaults$con4 === void 0 ? void 0 : _runtime$defaults$con4.skin) !== null && _ref4 !== void 0 ? _ref4 : false;
 	return /* @__PURE__ */ jsx(DialogFrame, {
 		modal: (_props$modal = props.modal) !== null && _props$modal !== void 0 ? _props$modal : false,
 		state: "open",
@@ -606,13 +645,15 @@ function DeclarativeDialog(props) {
 		closeOnClickOutside: (_props$closeOnClickOu = props.closeOnClickOutside) !== null && _props$closeOnClickOu !== void 0 ? _props$closeOnClickOu : true,
 		closeOnEscape: (_props$closeOnEscape2 = props.closeOnEscape) !== null && _props$closeOnEscape2 !== void 0 ? _props$closeOnEscape2 : true,
 		legacy: true,
+		skin,
 		role: "dialog",
 		onClickOutside: props.onClickOutside,
 		onDismiss: close,
 		children: /* @__PURE__ */ jsx(LegacyContent, {
 			props,
 			titleId,
-			close
+			close,
+			skin
 		})
 	});
 }
@@ -648,7 +689,7 @@ function open(options, dismissValue, body) {
 		(_options$signal = options.signal) === null || _options$signal === void 0 || _options$signal.removeEventListener("abort", onAbort);
 		resolve(value === void 0 ? dismissValue : value);
 	};
-	const render = (props) => /* @__PURE__ */ jsx(Fragment, { children: body(props, controller.signal) });
+	const render = (props) => /* @__PURE__ */ jsx(Fragment$1, { children: body(props, controller.signal) });
 	const onAbort = () => closeDialog$1(id);
 	const id = openEntry({
 		...options,
@@ -663,6 +704,7 @@ function open(options, dismissValue, body) {
 }
 function Body({ props, children }) {
 	const slot = useSlot();
+	const frame = useContext(FrameContext);
 	return /* @__PURE__ */ jsxs("div", {
 		...slot("body"),
 		children: [
@@ -671,22 +713,42 @@ function Body({ props, children }) {
 				...slot("title"),
 				children: props.title
 			}),
-			props.message != null && /* @__PURE__ */ jsx("p", {
+			props.message != null && (typeof props.message === "object" ? /* @__PURE__ */ jsx("div", {
+				id: props.descriptionId,
+				...slot("message"),
+				children: props.message
+			}) : /* @__PURE__ */ jsx("p", {
 				id: props.descriptionId,
 				...slot("message"),
 				children: props.message
+			})),
+			props.content != null && /* @__PURE__ */ jsx(FrameContext.Provider, {
+				value: {
+					...frame,
+					inBody: true
+				},
+				children: props.content
 			}),
 			children
 		]
 	});
 }
-function Buttons({ props, signal: getSignal, focus }) {
-	const slot = useSlot();
+function useBusy(id) {
 	const [busy, setBusy] = useState(null);
-	const markBusy = (on) => {
-		var _runtime$frames$get;
-		return (_runtime$frames$get = runtime().frames.get(props.id)) === null || _runtime$frames$get === void 0 ? void 0 : _runtime$frames$get.frame.toggleAttribute("data-busy", on);
+	const mark = (index) => {
+		if (id) {
+			var _runtime$frames$get;
+			(_runtime$frames$get = runtime().frames.get(id)) === null || _runtime$frames$get === void 0 || _runtime$frames$get.frame.toggleAttribute("data-busy", index !== null);
+			if (index === null) runtime().busy.delete(id);
+			else runtime().busy.add(id);
+		}
+		setBusy(index);
 	};
+	return [busy, mark];
+}
+function Buttons({ props, signal: getSignal, focus }) {
+	const slot = useSlot();
+	const [busy, setBusy] = useBusy(props.id);
 	const press = async (button, index) => {
 		const signal = getSignal();
 		let waiting = false;
@@ -703,16 +765,11 @@ function Buttons({ props, signal: getSignal, focus }) {
 			}
 			waiting = true;
 			setBusy(index);
-			markBusy(true);
-			runtime().busy.add(props.id);
 			if (await outcome !== false && !signal.aborted) props.close(button.value);
 		} catch (error) {
 			console.error(error);
 		} finally {
-			if (!waiting) return;
-			runtime().busy.delete(props.id);
-			markBusy(false);
-			if (!signal.aborted) setBusy(null);
+			if (waiting) setBusy(null);
 		}
 	};
 	return /* @__PURE__ */ jsx("div", {
@@ -984,6 +1041,7 @@ function ConfirmDialog(props) {
 		descriptionId,
 		title: props.title,
 		message: props.message,
+		content: props.content,
 		dismiss: hide,
 		onClose: hide
 	};
@@ -1055,4 +1113,53 @@ function ConfirmDialog(props) {
 		children: body
 	});
 }
-export { ConfirmDialog, Dialog, DialogHost, alert, closeAll, closeDialog, configureDialogs, confirm, confirmAlert, ReactConfirmAlert as default, openDialog, prompt, useDialog };
+// src/DialogLayout.tsx
+/** The default dialog layout for your own content: title, message, your children, then the actions. */
+function DialogLayout({ title, message, actions, children }) {
+	const slot = useSlot();
+	const frame = useContext(FrameContext);
+	const [busy, setBusy] = useBusy(frame.id);
+	const hasTitle = title != null;
+	const { countTitle } = frame;
+	useLayoutEffect(() => {
+		if (!hasTitle || !countTitle) return;
+		countTitle((n) => n + 1);
+		return () => countTitle((n) => n - 1);
+	}, [hasTitle, countTitle]);
+	const Body = frame.inBody ? Fragment : "div";
+	return /* @__PURE__ */ jsxs(Body, {
+		...frame.inBody ? {} : slot("body"),
+		children: [
+			title != null && /* @__PURE__ */ jsx("h1", {
+				id: frame.titleId,
+				...slot("title"),
+				children: title
+			}),
+			message != null && /* @__PURE__ */ jsx("div", {
+				...slot("message"),
+				children: message
+			}),
+			children,
+			actions && actions.length > 0 && /* @__PURE__ */ jsx("div", {
+				...slot("actions"),
+				children: actions.map(({ label, variant = "secondary", onClick, disabled, className, ...rest }, i) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					...rest,
+					...slot("button", className),
+					"data-variant": variant,
+					"data-busy": busy === i ? "" : void 0,
+					"aria-busy": busy === i || void 0,
+					disabled: disabled || busy !== null,
+					onClick: (event) => {
+						const outcome = onClick === null || onClick === void 0 ? void 0 : onClick(event);
+						if (!(outcome instanceof Promise)) return;
+						setBusy(i);
+						outcome.catch((error) => console.error(error)).finally(() => setBusy(null));
+					},
+					children: label
+				}, i))
+			})
+		]
+	});
+}
+export { ConfirmDialog, Dialog, DialogHost, DialogLayout, alert, closeAll, closeDialog, configureDialogs, confirm, confirmAlert, ReactConfirmAlert as default, openDialog, prompt, useDialog };