react-confirm-alert 3.0.6 → 3.1.0

package/dist/index.esm.js

@@ -0,0 +1,1058 @@
+"use client";
+import { Component, 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";
+// src/store.ts
+var emptyState = {
+	entries: [],
+	hosts: []
+};
+var isVisible = (entry) => entry.phase !== "queued";
+function push(state, entry, strategy) {
+	const busy = state.entries.some(isVisible);
+	if (strategy === "queue" && busy) return {
+		...state,
+		entries: [...state.entries, {
+			...entry,
+			phase: "queued"
+		}]
+	};
+	const entries = strategy === "replace" ? state.entries.map((e) => e.phase === "open" ? {
+		...e,
+		phase: "closing"
+	} : e) : state.entries;
+	return {
+		...state,
+		entries: [...entries, {
+			...entry,
+			phase: "open"
+		}]
+	};
+}
+function beginClose(state, id) {
+	const entry = state.entries.find((e) => e.id === id);
+	if (!entry || entry.phase !== "open") return state;
+	return {
+		...state,
+		entries: state.entries.map((e) => e === entry ? {
+			...e,
+			phase: "closing"
+		} : e)
+	};
+}
+function remove(state, id) {
+	const entry = state.entries.find((e) => e.id === id);
+	if (!entry || entry.phase === "open") return state;
+	return promoteQueued({
+		...state,
+		entries: state.entries.filter((e) => e !== entry)
+	});
+}
+function update(state, id, patch) {
+	if (!state.entries.some((e) => e.id === id)) return state;
+	return {
+		...state,
+		entries: state.entries.map((e) => e.id === id ? {
+			...e,
+			options: {
+				...e.options,
+				...patch
+			}
+		} : e)
+	};
+}
+function addHost(state, host) {
+	return {
+		...state,
+		hosts: [...state.hosts, host]
+	};
+}
+function removeHost(state, host) {
+	return {
+		...state,
+		hosts: state.hosts.filter((h) => h !== host)
+	};
+}
+function promoteQueued(state) {
+	if (state.entries.some(isVisible)) return state;
+	const next = state.entries.find((e) => e.phase === "queued");
+	if (!next) return state;
+	return {
+		...state,
+		entries: state.entries.map((e) => e === next ? {
+			...e,
+			phase: "open"
+		} : e)
+	};
+}
+function topmost(state) {
+	return [...state.entries].reverse().find((e) => e.phase === "open");
+}
+var key = Symbol.for("react-confirm-alert/runtime");
+var scope = globalThis;
+function runtime() {
+	var _scope$key;
+	return (_scope$key = scope[key]) !== null && _scope$key !== void 0 ? _scope$key : scope[key] = {
+		state: emptyState,
+		counter: 0,
+		listeners: /* @__PURE__ */ new Set(),
+		containers: /* @__PURE__ */ new Map(),
+		frames: /* @__PURE__ */ new Map(),
+		blurred: null,
+		busy: /* @__PURE__ */ new Set(),
+		pageSynced: false,
+		inPlace: 0,
+		defaults: {},
+		watchingContainers: false
+	};
+}
+var store = {
+	get: () => runtime().state,
+	set(next) {
+		const rt = runtime();
+		if (next === rt.state) return;
+		rt.state = next;
+		for (const listener of [...rt.listeners]) listener();
+	},
+	subscribe(listener) {
+		const { listeners } = runtime();
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	},
+	nextId: () => `rca-${++runtime().counter}`
+};
+// src/classNames.ts
+var builtIn = {
+	dialog: "react-confirm-alert-overlay",
+	panel: "react-confirm-alert",
+	body: "react-confirm-alert-body",
+	actions: "react-confirm-alert-button-group"
+};
+/**
+* Style layers from widest to narrowest. confirmAlert keeps the v3 look unless the app sets
+* confirmAlert defaults, so app-wide unstyled or classNames never reach it by surprise.
+*/
+function styleLayers(options, legacy) {
+	var _defaults$confirmAler;
+	const defaults = runtime().defaults;
+	return [legacy ? (_defaults$confirmAler = defaults.confirmAlert) !== null && _defaults$confirmAler !== void 0 ? _defaults$confirmAler : {} : defaults, options];
+}
+function classFor(slot, layers, extra) {
+	return [
+		layers.reduce((u, l) => {
+			var _l$unstyled;
+			return (_l$unstyled = l.unstyled) !== null && _l$unstyled !== void 0 ? _l$unstyled : u;
+		}, void 0) ? void 0 : builtIn[slot],
+		...layers.map((l) => {
+			var _l$classNames;
+			return (_l$classNames = l.classNames) === null || _l$classNames === void 0 ? void 0 : _l$classNames[slot];
+		}),
+		extra
+	].filter(Boolean).join(" ") || void 0;
+}
+var slotsFor = (layers) => (slot, extra) => ({
+	className: classFor(slot, layers, extra),
+	"data-slot": slot
+});
+var SlotContext = createContext(slotsFor([]));
+var useSlot = () => useContext(SlotContext);
+function configureDialogs(defaults) {
+	runtime().defaults = defaults;
+}
+// src/DialogStack.tsx
+var serverState = () => emptyState;
+function DialogStack({ target, host }) {
+	const { entries, hosts } = useSyncExternalStore(store.subscribe, store.get, serverState);
+	const [, rerender] = useReducer((n) => n + 1, 0);
+	useLayoutEffect(() => store.subscribe(rerender), []);
+	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, {
+		entry: e,
+		depth: openIds.indexOf(e.id),
+		topmost: e.id === top
+	}, e.id)) });
+}
+function EntryView({ entry, depth, topmost }) {
+	var _ref, _options$modal, _ref2, _options$closeOnClick, _ref3, _options$closeOnEscap, _options$buttons;
+	const { id, options } = entry;
+	const titleId = useId();
+	const descriptionId = useId();
+	useLayoutEffect(() => () => {
+		var _options$willUnmount, _options$afterClose;
+		if (store.get().entries.some((e) => e.id === id)) return;
+		(_options$willUnmount = options.willUnmount) === null || _options$willUnmount === void 0 || _options$willUnmount.call(options);
+		(_options$afterClose = options.afterClose) === null || _options$afterClose === void 0 || _options$afterClose.call(options);
+		entry.settle(void 0);
+	}, []);
+	const dismiss = () => closeDialog$1(id);
+	const close = (value) => {
+		entry.settle(value);
+		closeDialog$1(id);
+	};
+	const defaults = runtime().defaults;
+	const { render: Render } = options;
+	return /* @__PURE__ */ jsx(DialogFrame, {
+		id,
+		modal: (_ref = (_options$modal = options.modal) !== null && _options$modal !== void 0 ? _options$modal : defaults.modal) !== null && _ref !== void 0 ? _ref : true,
+		state: entry.phase === "closing" ? "closing" : "open",
+		kind: options.kind,
+		layers: styleLayers(options, !!options.legacy),
+		extraClass: options.overlayClassName,
+		tone: options.tone,
+		depth,
+		topmost,
+		labelledBy: options.title ? titleId : void 0,
+		describedBy: options.message ? descriptionId : void 0,
+		role: options.kind === "alert" || options.kind === "confirm" ? "alertdialog" : "dialog",
+		onKeyDown: options.onKeyDown,
+		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,
+		onClickOutside: options.onClickOutside,
+		onDismiss: dismiss,
+		children: /* @__PURE__ */ jsx(Render, {
+			id,
+			titleId,
+			descriptionId,
+			title: options.title,
+			message: options.message,
+			buttons: (_options$buttons = options.buttons) !== null && _options$buttons !== void 0 ? _options$buttons : [],
+			close,
+			dismiss,
+			onClose: dismiss
+		})
+	});
+}
+// src/page.ts
+var BODY_CLASS = "react-confirm-alert-body-element";
+var BLUR_CLASS = "react-confirm-alert-blur";
+function syncPage() {
+	const rt = runtime();
+	const open = store.get().entries.filter((e) => e.phase === "open");
+	document.body.classList.toggle(BODY_CLASS, rt.defaults.lockScroll !== false && open.length + rt.inPlace > 0);
+	const wantsBlur = open.some((e) => e.blur);
+	if (wantsBlur && !rt.blurred) {
+		var _document$body$childr, _rt$blurred;
+		rt.blurred = (_document$body$childr = document.body.children[0]) !== null && _document$body$childr !== void 0 ? _document$body$childr : null;
+		(_rt$blurred = rt.blurred) === null || _rt$blurred === void 0 || _rt$blurred.classList.add(BLUR_CLASS);
+	} else if (!wantsBlur && rt.blurred) {
+		rt.blurred.classList.remove(BLUR_CLASS);
+		rt.blurred = null;
+	}
+}
+function installPageEffects() {
+	const rt = runtime();
+	if (rt.pageSynced) return;
+	rt.pageSynced = true;
+	store.subscribe(syncPage);
+}
+// src/fallbackRoot.tsx
+var DEFAULT_ID = "react-confirm-alert";
+function ensureContainer(target) {
+	installPageEffects();
+	if (target !== null && !document.getElementById(target)) {
+		console.error("React Confirm Alert:", `Can not get element id (#${target})`);
+		target = null;
+	}
+	const { containers } = runtime();
+	if (target === null && store.get().hosts.length > 0) return {
+		target,
+		blur: false
+	};
+	let container = containers.get(target);
+	if (!container || !container.element.isConnected) {
+		var _target;
+		let element = document.getElementById((_target = target) !== null && _target !== void 0 ? _target : DEFAULT_ID);
+		const created = !element;
+		if (!element) {
+			element = document.createElement("div");
+			element.id = DEFAULT_ID;
+			document.body.appendChild(element);
+		}
+		const root = createRoot(element);
+		root.render(/* @__PURE__ */ jsx(DialogStack, { target }));
+		container = {
+			element,
+			root,
+			created
+		};
+		containers.set(target, container);
+		watchForEmptyContainers();
+	}
+	return {
+		target,
+		blur: target === null && container.created
+	};
+}
+function watchForEmptyContainers() {
+	const rt = runtime();
+	if (rt.watchingContainers) return;
+	rt.watchingContainers = true;
+	const { containers } = rt;
+	store.subscribe(() => {
+		queueMicrotask(() => {
+			for (const [target, container] of containers) {
+				if (store.get().entries.some((e) => e.target === target)) continue;
+				containers.delete(target);
+				container.root.unmount();
+				if (container.created) container.element.remove();
+			}
+		});
+	});
+}
+// src/lifecycle.ts
+function registerFrame(id, frame, panel) {
+	if (frame) runtime().frames.set(id, {
+		frame,
+		panel
+	});
+	else runtime().frames.delete(id);
+}
+function openEntry(options, target, strategy, settle = () => {}) {
+	const id = store.nextId();
+	const resolved = ensureContainer(target);
+	const entry = {
+		id,
+		options,
+		target: resolved.target,
+		blur: !!options.legacy && resolved.blur,
+		settle
+	};
+	const before = store.get().entries.filter((e) => e.phase === "open").map((e) => e.id);
+	store.set(push(store.get(), entry, strategy));
+	if (strategy === "replace") for (const old of before) store.set(remove(store.get(), old));
+	return id;
+}
+function commit(update, sync) {
+	if (sync && typeof window !== "undefined" && window.event !== void 0) flushSync(update);
+	else update();
+}
+function closeDialog$1(id, { sync = true } = {}) {
+	const entry = store.get().entries.find((e) => e.id === id);
+	if (!entry) return;
+	entry.settle(void 0);
+	if (entry.phase === "queued") {
+		commit(() => store.set(remove(store.get(), id)), sync);
+		return;
+	}
+	const node = runtime().frames.get(id);
+	const before = new Set(node ? animationsOf(node) : []);
+	commit(() => store.set(beginClose(store.get(), id)), sync);
+	const exits = node ? animationsOf(node).filter((a) => !before.has(a)) : [];
+	if (exits.length === 0) {
+		commit(() => store.set(remove(store.get(), id)), sync);
+		return;
+	}
+	Promise.all(exits.map((a) => a.finished)).finally(() => store.set(remove(store.get(), id)));
+}
+var reopenQueued = false;
+function reopenClosedFrames() {
+	if (reopenQueued) return;
+	reopenQueued = true;
+	queueMicrotask(() => {
+		reopenQueued = false;
+		for (const entry of store.get().entries) {
+			var _runtime$frames$get;
+			const frame = (_runtime$frames$get = runtime().frames.get(entry.id)) === null || _runtime$frames$get === void 0 ? void 0 : _runtime$frames$get.frame;
+			if (entry.phase === "open" && frame instanceof HTMLDialogElement && !frame.open) frame.showModal();
+		}
+	});
+}
+function animationsOf({ frame, panel }) {
+	if (typeof frame.getAnimations !== "function") return [];
+	return frame.getAnimations({ subtree: true }).filter((a) => {
+		var _a$effect;
+		const target = (_a$effect = a.effect) === null || _a$effect === void 0 ? void 0 : _a$effect.target;
+		return (target === frame || target === panel) && a.playState !== "finished";
+	});
+}
+// src/DialogFrame.tsx
+var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+function DialogFrame(props) {
+	var _props$tone, _props$depth, _props$topmost;
+	const frame = useRef(null);
+	const panel = useRef(null);
+	const pressedOn = useRef(null);
+	const stay = useRef(null);
+	const native = props.modal && canShowModal();
+	useLayoutEffect(() => {
+		var _panel$current, _panel$current2, _panel$current3;
+		const element = frame.current;
+		const previous = document.activeElement;
+		if (props.id) registerFrame(props.id, element, panel.current);
+		if (native) {
+			const dialog = element;
+			if (!dialog.open) dialog.showModal();
+		}
+		const marked = (_panel$current = panel.current) === null || _panel$current === void 0 ? void 0 : _panel$current.querySelector("[data-autofocus]");
+		const inside = (_panel$current2 = panel.current) === null || _panel$current2 === void 0 ? void 0 : _panel$current2.contains(document.activeElement);
+		if (props.legacy || !marked && !inside) (_panel$current3 = panel.current) === null || _panel$current3 === void 0 || _panel$current3.focus({ preventScroll: true });
+		else if (marked) marked.focus({ preventScroll: true });
+		return () => {
+			if (props.id) registerFrame(props.id, null, null);
+			const dialog = element;
+			if (native && dialog.open) dialog.close();
+			queueMicrotask(() => {
+				if (previous instanceof HTMLElement && previous.isConnected) previous.focus({ preventScroll: true });
+			});
+		};
+	}, []);
+	const onPointerDown = (e) => {
+		pressedOn.current = e.target;
+	};
+	const onClick = (e) => {
+		const pressed = pressedOn.current;
+		pressedOn.current = null;
+		const outside = e.target === frame.current && (pressed === null || pressed === frame.current);
+		if (props.closeOnClickOutside && outside && !isBusy()) {
+			var _props$onClickOutside;
+			(_props$onClickOutside = props.onClickOutside) === null || _props$onClickOutside === void 0 || _props$onClickOutside.call(props);
+			props.onDismiss();
+		}
+		e.stopPropagation();
+	};
+	const isTop = () => {
+		var _topmost;
+		return !props.id || !store.get().entries.some((e) => e.id === props.id) || ((_topmost = topmost(store.get())) === null || _topmost === void 0 ? void 0 : _topmost.id) === props.id;
+	};
+	const mustStay = () => !isTop() || !props.closeOnEscape || isBusy();
+	const onCancel = (e) => {
+		e.preventDefault();
+		stay.current = mustStay();
+		if (!stay.current && !props.legacy) props.onDismiss();
+	};
+	const onClose = (e) => {
+		var _stay$current;
+		const dialog = e.currentTarget;
+		if (dialog.open) return;
+		const keep = (_stay$current = stay.current) !== null && _stay$current !== void 0 ? _stay$current : mustStay();
+		stay.current = null;
+		if (props.state !== "open") return;
+		if (!keep) props.onDismiss();
+		else if (props.id && store.get().entries.some((x) => x.id === props.id)) reopenClosedFrames();
+		else dialog.showModal();
+	};
+	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);
+		if (!native && !props.legacy && e.key === "Escape" && props.closeOnEscape && !isBusy()) props.onDismiss();
+	};
+	const slot = slotsFor(props.layers);
+	const shared = {
+		...slot("dialog", props.extraClass),
+		role: props.role,
+		"aria-label": props.label,
+		"aria-labelledby": props.labelledBy,
+		"aria-describedby": props.describedBy,
+		"data-rca": "",
+		"data-state": props.state,
+		"data-kind": props.kind,
+		"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,
+		onPointerDown,
+		onClick,
+		onKeyDown
+	};
+	const content = /* @__PURE__ */ jsx("div", {
+		ref: panel,
+		...slot("panel"),
+		tabIndex: -1,
+		children: /* @__PURE__ */ jsx(SlotContext.Provider, {
+			value: slot,
+			children: props.children
+		})
+	});
+	return native ? /* @__PURE__ */ jsx("dialog", {
+		ref: (el) => {
+			frame.current = el;
+		},
+		...shared,
+		onCancel,
+		onClose,
+		children: content
+	}) : /* @__PURE__ */ jsx("div", {
+		ref: (el) => {
+			frame.current = el;
+		},
+		...shared,
+		children: content
+	});
+}
+// src/compat.tsx
+var defaultButtons = [{
+	label: "Cancel",
+	onClick: () => null
+}, {
+	label: "Confirm",
+	onClick: () => null
+}];
+function CustomUIHost({ render, args }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: render(args) });
+}
+function LegacyContent({ props, titleId, close, id }) {
+	var _props$buttons;
+	const latest = useRef({
+		props,
+		close
+	});
+	latest.current = {
+		props,
+		close
+	};
+	useLayoutEffect(() => {
+		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;
+			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) {
+				var _props$onKeypressEsca;
+				(_props$onKeypressEsca = props.onKeypressEscape) === null || _props$onKeypressEsca === void 0 || _props$onKeypressEsca.call(props, event);
+				close();
+			}
+			(_props$onkeyPress = props.onkeyPress) === null || _props$onkeyPress === void 0 || _props$onkeyPress.call(props, event, close);
+		};
+		document.addEventListener("keydown", keyboard, false);
+		return () => document.removeEventListener("keydown", keyboard, false);
+	}, []);
+	const slot = useSlot();
+	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
+		}
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...slot("body"),
+		children: [
+			title && /* @__PURE__ */ jsx("h1", {
+				id: titleId,
+				...slot("title"),
+				children: title
+			}),
+			message,
+			childrenElement === null || childrenElement === void 0 ? void 0 : childrenElement(),
+			/* @__PURE__ */ jsx("div", {
+				...slot("actions"),
+				children: buttons.map((button, i) => /* @__PURE__ */ jsx("button", {
+					...button,
+					...slot("button", button.className),
+					onClick: () => {
+						if (button.onClick) button.onClick();
+						close();
+					},
+					children: button.label
+				}, i))
+			})
+		]
+	});
+}
+function confirmAlert(properties) {
+	var _ref, _properties$modal, _runtime$defaults$con, _properties$closeOnCl, _properties$closeOnEs, _properties$targetId, _ref2, _properties$strategy, _runtime$defaults$con2;
+	function Content({ id, titleId, dismiss }) {
+		return /* @__PURE__ */ jsx(LegacyContent, {
+			props: properties,
+			titleId,
+			close: dismiss,
+			id
+		});
+	}
+	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,
+		unstyled: properties.unstyled,
+		classNames: properties.classNames,
+		closeOnClickOutside: (_properties$closeOnCl = properties.closeOnClickOutside) !== null && _properties$closeOnCl !== void 0 ? _properties$closeOnCl : true,
+		closeOnEscape: (_properties$closeOnEs = properties.closeOnEscape) !== null && _properties$closeOnEs !== void 0 ? _properties$closeOnEs : true,
+		overlayClassName: properties.overlayClassName,
+		onClickOutside: properties.onClickOutside,
+		legacy: true,
+		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");
+}
+function DeclarativeDialog(props) {
+	var _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);
+	};
+	return /* @__PURE__ */ jsx(DialogFrame, {
+		modal: (_props$modal = props.modal) !== null && _props$modal !== void 0 ? _props$modal : false,
+		state: "open",
+		kind: "custom",
+		layers: styleLayers({
+			unstyled: props.unstyled,
+			classNames: props.classNames
+		}, true),
+		extraClass: props.overlayClassName,
+		labelledBy: props.title ? titleId : void 0,
+		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,
+		role: "dialog",
+		onClickOutside: props.onClickOutside,
+		onDismiss: close,
+		children: /* @__PURE__ */ jsx(LegacyContent, {
+			props,
+			titleId,
+			close
+		})
+	});
+}
+/**
+* Rendered in place, open while mounted. The parent unmounts it from a button's onClick.
+* @deprecated use <ConfirmDialog open>
+*/
+var ReactConfirmAlert = class extends Component {
+	componentWillUnmount() {
+		var _this$props$willUnmou, _this$props;
+		(_this$props$willUnmou = (_this$props = this.props).willUnmount) === null || _this$props$willUnmou === void 0 || _this$props$willUnmou.call(_this$props);
+	}
+	render() {
+		return /* @__PURE__ */ jsx(DeclarativeDialog, { ...this.props });
+	}
+};
+// src/api.tsx
+function open(options, dismissValue, body) {
+	var _ref, _options$strategy, _options$signal2, _options$signal3;
+	if (typeof document === "undefined") return {
+		id: "",
+		result: Promise.reject(/* @__PURE__ */ new Error("react-confirm-alert: dialogs need a browser"))
+	};
+	const controller = new AbortController();
+	let resolve;
+	const result = new Promise((r) => {
+		resolve = r;
+	});
+	const settle = (value) => {
+		var _options$signal;
+		if (controller.signal.aborted) return;
+		controller.abort();
+		(_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 onAbort = () => closeDialog$1(id);
+	const id = openEntry({
+		...options,
+		render
+	}, null, (_ref = (_options$strategy = options.strategy) !== null && _options$strategy !== void 0 ? _options$strategy : runtime().defaults.strategy) !== null && _ref !== void 0 ? _ref : "stack", settle);
+	(_options$signal2 = options.signal) === null || _options$signal2 === void 0 || _options$signal2.addEventListener("abort", onAbort, { once: true });
+	if ((_options$signal3 = options.signal) === null || _options$signal3 === void 0 ? void 0 : _options$signal3.aborted) closeDialog$1(id);
+	return {
+		id,
+		result
+	};
+}
+function Body({ props, children }) {
+	const slot = useSlot();
+	return /* @__PURE__ */ jsxs("div", {
+		...slot("body"),
+		children: [
+			props.title && /* @__PURE__ */ jsx("h1", {
+				id: props.titleId,
+				...slot("title"),
+				children: props.title
+			}),
+			props.message != null && /* @__PURE__ */ jsx("p", {
+				id: props.descriptionId,
+				...slot("message"),
+				children: props.message
+			}),
+			children
+		]
+	});
+}
+function Buttons({ props, signal: getSignal, focus }) {
+	const slot = useSlot();
+	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 press = async (button, index) => {
+		const signal = getSignal();
+		let waiting = false;
+		try {
+			var _button$onClick;
+			const outcome = (_button$onClick = button.onClick) === null || _button$onClick === void 0 ? void 0 : _button$onClick.call(button, {
+				close: props.close,
+				dismiss: props.dismiss,
+				signal
+			});
+			if (!(outcome instanceof Promise)) {
+				if (outcome !== false) props.close(button.value);
+				return;
+			}
+			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);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...slot("actions"),
+		children: props.buttons.map(({ label, value, 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,
+			"data-autofocus": i === focus ? "" : void 0,
+			"aria-busy": busy === i || void 0,
+			disabled: disabled || busy !== null,
+			onClick: () => {
+				press(props.buttons[i], i);
+			},
+			children: label
+		}, i))
+	});
+}
+var choice = (focus) => (props, signal) => /* @__PURE__ */ jsx(Body, {
+	props,
+	children: /* @__PURE__ */ jsx(Buttons, {
+		props,
+		signal: () => signal,
+		focus
+	})
+});
+var normalize = (input) => typeof input === "string" ? { title: input } : input;
+function alert(input) {
+	var _ref2, _options$okLabel, _runtime$defaults$lab;
+	const options = normalize(input);
+	const buttons = [{
+		label: (_ref2 = (_options$okLabel = options.okLabel) !== null && _options$okLabel !== void 0 ? _options$okLabel : (_runtime$defaults$lab = runtime().defaults.labels) === null || _runtime$defaults$lab === void 0 ? void 0 : _runtime$defaults$lab.ok) !== null && _ref2 !== void 0 ? _ref2 : "OK",
+		variant: "primary"
+	}];
+	return open({
+		...options,
+		kind: "alert",
+		buttons
+	}, void 0, choice(0)).result;
+}
+function confirm(input) {
+	var _ref3, _options$cancelLabel, _runtime$defaults$lab2, _ref4, _options$confirmLabel, _runtime$defaults$lab3;
+	const options = normalize(input);
+	const danger = options.tone === "danger";
+	const { onConfirm } = options;
+	const buttons = [{
+		label: (_ref3 = (_options$cancelLabel = options.cancelLabel) !== null && _options$cancelLabel !== void 0 ? _options$cancelLabel : (_runtime$defaults$lab2 = runtime().defaults.labels) === null || _runtime$defaults$lab2 === void 0 ? void 0 : _runtime$defaults$lab2.cancel) !== null && _ref3 !== void 0 ? _ref3 : "Cancel",
+		value: false
+	}, {
+		label: (_ref4 = (_options$confirmLabel = options.confirmLabel) !== null && _options$confirmLabel !== void 0 ? _options$confirmLabel : (_runtime$defaults$lab3 = runtime().defaults.labels) === null || _runtime$defaults$lab3 === void 0 ? void 0 : _runtime$defaults$lab3.confirm) !== null && _ref4 !== void 0 ? _ref4 : "Confirm",
+		value: true,
+		variant: danger ? "danger" : "primary",
+		onClick: onConfirm && (({ signal }) => onConfirm({ signal }))
+	}];
+	return open({
+		...options,
+		kind: "confirm",
+		tone: options.tone,
+		buttons
+	}, false, choice(danger ? 0 : 1)).result;
+}
+function PromptBody({ props, options }) {
+	var _options$inputProps, _ref5, _options$cancelLabel2, _runtime$defaults$lab4, _ref6, _options$submitLabel, _runtime$defaults$lab5;
+	const [error, setError] = useState(null);
+	const [busy, setBusy] = useState(false);
+	const slot = useSlot();
+	const inputId = useId();
+	const errorId = useId();
+	const onSubmit = async (event) => {
+		event.preventDefault();
+		const value = event.currentTarget.elements.namedItem("value").value;
+		let message;
+		try {
+			var _options$validate, _options$validate2;
+			const check = (_options$validate = (_options$validate2 = options.validate) === null || _options$validate2 === void 0 ? void 0 : _options$validate2.call(options, value)) !== null && _options$validate !== void 0 ? _options$validate : null;
+			if (check instanceof Promise) setBusy(true);
+			message = await check;
+		} catch (error) {
+			console.error(error);
+			return;
+		} finally {
+			setBusy(false);
+		}
+		if (message) setError(message);
+		else props.close(value);
+	};
+	return /* @__PURE__ */ jsx("form", {
+		method: "dialog",
+		noValidate: true,
+		onSubmit: (e) => {
+			onSubmit(e);
+		},
+		children: /* @__PURE__ */ jsxs(Body, {
+			props,
+			children: [/* @__PURE__ */ jsxs("div", {
+				...slot("field"),
+				children: [
+					options.label && /* @__PURE__ */ jsx("label", {
+						htmlFor: inputId,
+						...slot("label"),
+						children: options.label
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id: inputId,
+						name: "value",
+						"data-autofocus": "",
+						defaultValue: options.defaultValue,
+						...options.inputProps,
+						...slot("input", (_options$inputProps = options.inputProps) === null || _options$inputProps === void 0 ? void 0 : _options$inputProps.className),
+						"aria-invalid": error ? true : void 0,
+						"aria-describedby": error ? errorId : void 0
+					}),
+					error && /* @__PURE__ */ jsx("p", {
+						id: errorId,
+						...slot("error"),
+						children: error
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				...slot("actions"),
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					...slot("button"),
+					"data-variant": "secondary",
+					onClick: props.dismiss,
+					children: (_ref5 = (_options$cancelLabel2 = options.cancelLabel) !== null && _options$cancelLabel2 !== void 0 ? _options$cancelLabel2 : (_runtime$defaults$lab4 = runtime().defaults.labels) === null || _runtime$defaults$lab4 === void 0 ? void 0 : _runtime$defaults$lab4.cancel) !== null && _ref5 !== void 0 ? _ref5 : "Cancel"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "submit",
+					...slot("button"),
+					"data-variant": "primary",
+					"aria-busy": busy || void 0,
+					disabled: busy,
+					children: (_ref6 = (_options$submitLabel = options.submitLabel) !== null && _options$submitLabel !== void 0 ? _options$submitLabel : (_runtime$defaults$lab5 = runtime().defaults.labels) === null || _runtime$defaults$lab5 === void 0 ? void 0 : _runtime$defaults$lab5.submit) !== null && _ref6 !== void 0 ? _ref6 : "OK"
+				})]
+			})]
+		})
+	});
+}
+function prompt(input) {
+	const options = normalize(input);
+	return open({
+		...options,
+		kind: "prompt"
+	}, null, (props) => /* @__PURE__ */ jsx(PromptBody, {
+		props,
+		options
+	})).result;
+}
+function openDialog(options) {
+	const { render: Render, ...rest } = options;
+	const { id, result } = open({
+		...rest,
+		kind: "custom"
+	}, void 0, (props) => /* @__PURE__ */ jsx(Render, { ...props }));
+	return {
+		id,
+		result,
+		close: (value) => {
+			var _store$get$entries$fi;
+			(_store$get$entries$fi = store.get().entries.find((e) => e.id === id)) === null || _store$get$entries$fi === void 0 || _store$get$entries$fi.settle(value);
+			closeDialog$1(id);
+		},
+		dismiss: () => closeDialog$1(id),
+		update: (patch) => store.set(update(store.get(), id, patch))
+	};
+}
+function closeDialog(id) {
+	closeDialog$1(id);
+}
+function closeAll() {
+	for (const entry of [...store.get().entries].reverse()) closeDialog$1(entry.id);
+}
+// src/DialogHost.tsx
+function DialogHost({ dismissKey }) {
+	const [host] = useState(() => Symbol("DialogHost"));
+	useLayoutEffect(() => {
+		installPageEffects();
+		store.set(addHost(store.get(), host));
+		return () => {
+			store.set(removeHost(store.get(), host));
+			if (store.get().hosts.length === 0 && store.get().entries.some((e) => e.target === null)) ensureContainer(null);
+		};
+	}, []);
+	const previous = useRef(dismissKey);
+	useEffect(() => {
+		if (Object.is(previous.current, dismissKey)) return;
+		previous.current = dismissKey;
+		closeAll();
+	}, [dismissKey]);
+	return /* @__PURE__ */ jsx(DialogStack, {
+		target: null,
+		host
+	});
+}
+var dialogs = {
+	alert,
+	confirm,
+	prompt,
+	openDialog,
+	closeAll
+};
+/** The same functions as the module exports, so a component reads as one that opens dialogs. */
+function useDialog() {
+	return dialogs;
+}
+// src/Dialog.tsx
+var subscribeNever = () => () => {};
+function useHydrated() {
+	return useSyncExternalStore(subscribeNever, () => true, () => false);
+}
+function useScrollLock(open) {
+	useLayoutEffect(() => {
+		if (!open) return;
+		runtime().inPlace++;
+		syncPage();
+		return () => {
+			runtime().inPlace--;
+			syncPage();
+		};
+	}, [open]);
+}
+/** A dialog rendered where it is placed, so its children read the latest state of the component (#63 #66). */
+function Dialog(props) {
+	var _ref, _props$modal, _ref2, _props$closeOnClickOu, _ref3, _props$closeOnEscape;
+	const id = useId();
+	const hydrated = useHydrated();
+	useScrollLock(props.open && hydrated);
+	if (!hydrated || !props.open) return null;
+	return /* @__PURE__ */ jsx(DialogFrame, {
+		id,
+		modal: (_ref = (_props$modal = props.modal) !== null && _props$modal !== void 0 ? _props$modal : runtime().defaults.modal) !== null && _ref !== void 0 ? _ref : true,
+		state: "open",
+		kind: "custom",
+		layers: styleLayers(props, false),
+		label: props["aria-label"],
+		labelledBy: props["aria-labelledby"],
+		describedBy: props["aria-describedby"],
+		role: "dialog",
+		closeOnClickOutside: (_ref2 = (_props$closeOnClickOu = props.closeOnClickOutside) !== null && _props$closeOnClickOu !== void 0 ? _props$closeOnClickOu : runtime().defaults.closeOnClickOutside) !== null && _ref2 !== void 0 ? _ref2 : true,
+		closeOnEscape: (_ref3 = (_props$closeOnEscape = props.closeOnEscape) !== null && _props$closeOnEscape !== void 0 ? _props$closeOnEscape : runtime().defaults.closeOnEscape) !== null && _ref3 !== void 0 ? _ref3 : true,
+		legacy: false,
+		onKeyDown: props.onKeyDown,
+		onDismiss: () => props.onOpenChange(false),
+		children: props.children
+	});
+}
+/** confirm, alert or prompt rendered in place and driven by `open`. */
+function ConfirmDialog(props) {
+	var _ref7, _props$modal2, _ref8, _props$closeOnClickOu2, _ref9, _props$closeOnEscape2;
+	const id = useId();
+	const titleId = useId();
+	const descriptionId = useId();
+	const hydrated = useHydrated();
+	const controller = useRef(new AbortController());
+	useLayoutEffect(() => {
+		if (!props.open) return;
+		const current = new AbortController();
+		controller.current = current;
+		return () => current.abort();
+	}, [props.open]);
+	useScrollLock(props.open && hydrated);
+	if (!hydrated || !props.open) return null;
+	const hide = () => props.onOpenChange(false);
+	const base = {
+		id,
+		titleId,
+		descriptionId,
+		title: props.title,
+		message: props.message,
+		dismiss: hide,
+		onClose: hide
+	};
+	let body;
+	if (props.kind === "prompt") {
+		const { onSubmit } = props;
+		const close = async (value) => {
+			try {
+				await onSubmit(value);
+				hide();
+			} catch (error) {
+				console.error(error);
+			}
+		};
+		body = /* @__PURE__ */ jsx(PromptBody, {
+			props: {
+				...base,
+				buttons: [],
+				close: (v) => {
+					close(v);
+				}
+			},
+			options: props
+		});
+	} else {
+		var _ref4, _props$okLabel, _runtime$defaults$lab, _ref5, _props$cancelLabel, _runtime$defaults$lab2, _ref6, _props$confirmLabel, _runtime$defaults$lab3;
+		const danger = props.kind === "confirm" && props.tone === "danger";
+		const buttons = props.kind === "alert" ? [{
+			label: (_ref4 = (_props$okLabel = props.okLabel) !== null && _props$okLabel !== void 0 ? _props$okLabel : (_runtime$defaults$lab = runtime().defaults.labels) === null || _runtime$defaults$lab === void 0 ? void 0 : _runtime$defaults$lab.ok) !== null && _ref4 !== void 0 ? _ref4 : "OK",
+			variant: "primary"
+		}] : [{
+			label: (_ref5 = (_props$cancelLabel = props.cancelLabel) !== null && _props$cancelLabel !== void 0 ? _props$cancelLabel : (_runtime$defaults$lab2 = runtime().defaults.labels) === null || _runtime$defaults$lab2 === void 0 ? void 0 : _runtime$defaults$lab2.cancel) !== null && _ref5 !== void 0 ? _ref5 : "Cancel",
+			value: false
+		}, {
+			label: (_ref6 = (_props$confirmLabel = props.confirmLabel) !== null && _props$confirmLabel !== void 0 ? _props$confirmLabel : (_runtime$defaults$lab3 = runtime().defaults.labels) === null || _runtime$defaults$lab3 === void 0 ? void 0 : _runtime$defaults$lab3.confirm) !== null && _ref6 !== void 0 ? _ref6 : "Confirm",
+			value: true,
+			variant: danger ? "danger" : "primary",
+			onClick: props.onConfirm && ((ctx) => props.onConfirm({ signal: ctx.signal }))
+		}];
+		const renderProps = {
+			...base,
+			buttons,
+			close: hide
+		};
+		body = /* @__PURE__ */ jsx(Body, {
+			props: renderProps,
+			children: /* @__PURE__ */ jsx(Buttons, {
+				props: renderProps,
+				signal: () => controller.current.signal,
+				focus: props.kind === "alert" || danger ? 0 : 1
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(DialogFrame, {
+		id,
+		modal: (_ref7 = (_props$modal2 = props.modal) !== null && _props$modal2 !== void 0 ? _props$modal2 : runtime().defaults.modal) !== null && _ref7 !== void 0 ? _ref7 : true,
+		state: "open",
+		kind: props.kind,
+		layers: styleLayers(props, false),
+		tone: props.kind === "confirm" ? props.tone : void 0,
+		labelledBy: props.title ? titleId : void 0,
+		describedBy: props.message ? descriptionId : void 0,
+		role: props.kind === "prompt" ? "dialog" : "alertdialog",
+		closeOnClickOutside: (_ref8 = (_props$closeOnClickOu2 = props.closeOnClickOutside) !== null && _props$closeOnClickOu2 !== void 0 ? _props$closeOnClickOu2 : runtime().defaults.closeOnClickOutside) !== null && _ref8 !== void 0 ? _ref8 : true,
+		closeOnEscape: (_ref9 = (_props$closeOnEscape2 = props.closeOnEscape) !== null && _props$closeOnEscape2 !== void 0 ? _props$closeOnEscape2 : runtime().defaults.closeOnEscape) !== null && _ref9 !== void 0 ? _ref9 : true,
+		legacy: false,
+		onKeyDown: props.onKeyDown,
+		onDismiss: hide,
+		children: body
+	});
+}
+export { ConfirmDialog, Dialog, DialogHost, alert, closeAll, closeDialog, configureDialogs, confirm, confirmAlert, ReactConfirmAlert as default, openDialog, prompt, useDialog };