react-confirm-alert 3.1.0 → 3.1.1

package/Readme.md

@@ -1,10 +1,10 @@
 # react-confirm-alert
 
-Confirm, alert and prompt dialogs for React 18 and 19. `await confirm()`, a native modal, focus that moves in and back, and the v3 `confirmAlert` unchanged.
+Confirm, alert and prompt dialogs for React 18 and 19. `await confirm()`, a native modal, focus that moves in and back, and the 3.0 `confirmAlert` unchanged.
 
 [![npm version](https://badge.fury.io/js/react-confirm-alert.svg)](https://badge.fury.io/js/react-confirm-alert)
 
-[Docs](https://ga-mo.github.io/react-confirm-alert/docs/) · [Playground](https://ga-mo.github.io/react-confirm-alert/playground/) · [Migrate from v3](https://ga-mo.github.io/react-confirm-alert/docs/migrate-from-v3/)
+[Docs](https://ga-mo.github.io/react-confirm-alert/docs/) · [Playground](https://ga-mo.github.io/react-confirm-alert/playground/) · [What's new in 3.1](https://ga-mo.github.io/react-confirm-alert/docs/whats-new-in-3-1/)
 
 ## Install
 
@@ -25,7 +25,7 @@ if (await confirm({ title: 'Delete file?', message: 'This cannot be undone.', to
 
 `confirm()` resolves `true` or `false`. `alert()` and `prompt()` work the same way, and `<DialogHost />` placed inside your providers lets dialogs read their context.
 
-## v3 code keeps working
+## 3.0 code keeps working
 
 ```jsx
 import { confirmAlert } from 'react-confirm-alert'
@@ -41,7 +41,7 @@ confirmAlert({
 })
 ```
 
-Same options, DOM, class names and CSS path as v3.
+Same options, DOM, class names and CSS path as 3.0.
 
 ## Tailwind CSS
 
@@ -64,7 +64,7 @@ Importing the CSS into `layer(components)` lets Tailwind utilities win without `
 | `import { confirm }` | 3,851 B |
 | CSS | 1,095 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. v3.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, and dialogs that render inside your providers.
 
 ## Older versions
 

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-confirm-alert",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "react component confirm dialog.",
   "main": "lib/index.js",
   "module": "dist/index.esm.js",
   "scripts": {
-    "build": "vite build && node -e \"require('fs').rmSync('typings',{recursive:true,force:true})\" && tsc -p tsconfig.build.json",
+    "build": "vite build && node -e \"require('fs').rmSync('typings',{recursive:true,force:true})\" && tsc -p tsconfig.build.json && node -e \"require('fs').copyFileSync('src/react-confirm-alert.css','style.css')\"",
     "prepublishOnly": "npm run build",
     "test": "vitest run",
     "test:fixtures": "node fixtures/run.mjs",
@@ -42,6 +42,7 @@
     "dist",
     "typings",
     "src/react-confirm-alert.css",
+    "style.css",
     "index.d.ts"
   ],
   "devDependencies": {

package/style.css

@@ -0,0 +1,127 @@
+body.react-confirm-alert-body-element {
+  overflow: hidden;
+}
+
+.react-confirm-alert-blur {
+  filter: blur(var(--rca-blur, 2px));
+  -webkit-filter: blur(var(--rca-blur, 2px));
+}
+
+.react-confirm-alert-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--rca-z-index, 99);
+  background: var(--rca-backdrop, rgba(255, 255, 255, 0.9));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  animation: react-confirm-alert-fadeIn var(--rca-duration, 0.5s) var(--rca-easing, ease) var(--rca-delay, 0.2s) forwards;
+}
+
+.react-confirm-alert-body {
+  font-family: var(--rca-font, Arial, Helvetica, sans-serif);
+  width: var(--rca-width, 400px);
+  max-width: calc(100vw - 92px);
+  padding: var(--rca-padding, 30px);
+  text-align: left;
+  background: var(--rca-bg, #fff);
+  border-radius: var(--rca-radius, 10px);
+  box-shadow: var(--rca-shadow, 0 20px 75px rgba(0, 0, 0, 0.13));
+  color: var(--rca-fg, #666);
+}
+
+.react-confirm-alert-body > h1 {
+  margin-top: 0;
+}
+
+.react-confirm-alert-body > h3 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.react-confirm-alert-button-group {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 20px;
+}
+
+.react-confirm-alert-button-group > button {
+  outline: none;
+  background: var(--rca-button-bg, #333);
+  border: none;
+  display: inline-block;
+  padding: 6px 18px;
+  color: var(--rca-button-fg, #eee);
+  margin-right: var(--rca-gap, 10px);
+  border-radius: var(--rca-button-radius, 5px);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+/* Keyboard focus is visible again (B15); a mouse click shows no ring. */
+.react-confirm-alert-button-group > button:focus-visible {
+  outline: var(--rca-focus-ring, 2px solid Highlight);
+  outline-offset: 2px;
+}
+
+/* modal: true renders the overlay as a <dialog> in the top layer. Reset the browser's dialog box so it
+   looks like the v3 overlay, and never set display while it is closed. */
+dialog.react-confirm-alert-overlay {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: inherit;
+}
+
+dialog.react-confirm-alert-overlay:not([open]) {
+  display: none;
+}
+
+dialog.react-confirm-alert-overlay::backdrop {
+  background: transparent;
+}
+
+.react-confirm-alert-button-group > [data-variant='danger'] {
+  background: var(--rca-danger, #c62828);
+  color: #fff;
+}
+
+[data-rca]:not([data-kind='custom']) [data-slot='title'] {
+  margin: 0 0 8px;
+  font-size: 1.25em;
+  font-weight: 600;
+  color: var(--rca-title, #222);
+}
+
+.react-confirm-alert [data-slot='message'] {
+  margin: 0;
+  white-space: pre-line;
+}
+
+.react-confirm-alert:focus {
+  outline: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .react-confirm-alert-overlay {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+@keyframes react-confirm-alert-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}