react-confirm-alert 3.1.1 → 3.3.0

package/style.css

@@ -32,6 +32,8 @@ body.react-confirm-alert-body-element {
   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);
+  /* confirmAlert renders message as text right in the body; keep its line breaks (#38). */
+  white-space: pre-line;
 }
 
 .react-confirm-alert-body > h1 {
@@ -125,3 +127,234 @@ dialog.react-confirm-alert-overlay::backdrop {
     opacity: 1;
   }
 }
+
+/* The default look of every dialog except confirmAlert, which has no data-skin and keeps the 3.0 look above; unstyled drops the overlay class, so none of this applies.
+   --_* are internal defaults: a --rca-* variable set by the app always wins over them. */
+.react-confirm-alert-overlay[data-skin] {
+  --_bg: #fff;
+  --_fg: #71717a;
+  --_title: #09090b;
+  --_border: #e4e4e7;
+  --_hover: #f4f4f5;
+  --_primary: #18181b;
+  --_primary-fg: #fff;
+  --_ring: #a1a1aa;
+  --_danger: #dc2626;
+  --_error: #dc2626;
+  box-sizing: border-box;
+  padding: 16px;
+  background: var(--rca-backdrop, rgba(0, 0, 0, 0.5));
+  opacity: 1;
+  animation: rca-in var(--rca-duration, 200ms) var(--rca-easing, cubic-bezier(0.32, 0.72, 0, 1)) both;
+}
+/* Dark is opt-in: the app's .dark class or data-theme="dark" on an ancestor, usually <html>. */
+:is(.dark, [data-theme=dark]) .react-confirm-alert-overlay[data-skin] {
+  --_bg: #18181b;
+  --_fg: #a1a1aa;
+  --_title: #fafafa;
+  --_border: #3f3f46;
+  --_hover: #27272a;
+  --_primary: #fafafa;
+  --_primary-fg: #18181b;
+  --_ring: #71717a;
+  --_error: #f87171;
+  color-scheme: dark;
+  background: var(--rca-backdrop, rgba(0, 0, 0, 0.7));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert {
+  max-width: 100%;
+  animation: rca-pop var(--rca-duration, 200ms) var(--rca-easing, cubic-bezier(0.32, 0.72, 0, 1)) both;
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-body {
+  box-sizing: border-box;
+  width: var(--rca-width, 420px);
+  max-width: 100%;
+  padding: var(--rca-padding, 24px);
+  border: 1px solid var(--rca-border, var(--_border));
+  border-radius: var(--rca-radius, 10px);
+  background: var(--rca-bg, var(--_bg));
+  box-shadow: var(--rca-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
+  color: var(--rca-fg, var(--_fg));
+  font-family: var(--rca-font, inherit);
+  font-size: 14px;
+  line-height: 1.5;
+}
+.react-confirm-alert-overlay[data-skin][data-state=closing] {
+  animation: rca-out 150ms ease-in both;
+}
+.react-confirm-alert-overlay[data-skin][data-state=closing] .react-confirm-alert {
+  animation: rca-pop-out 150ms ease-in both;
+}
+/* Plain elements inside a skinned dialog look like the slots. Their selectors are type selectors under
+   :where(), so they beat a CSS reset such as Tailwind preflight and lose to any class you add. */
+.react-confirm-alert-overlay[data-skin] [data-slot=title],
+:where(.react-confirm-alert-overlay[data-skin]) div :is(h1, h2, h3) {
+  margin: 0 0 8px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--rca-title, var(--_title));
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=field] {
+  margin-top: 16px;
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=label],
+:where(.react-confirm-alert-overlay[data-skin]) div label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rca-title, var(--_title));
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=input],
+:where(.react-confirm-alert-overlay[data-skin]) div :is(input:where(:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset], [type=image])), textarea, select) {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--rca-border, var(--_border));
+  border-radius: 6px;
+  background: transparent;
+  color: var(--rca-title, var(--_title));
+  font: inherit;
+  outline: none;
+  transition: border-color 150ms, box-shadow 150ms;
+}
+.react-confirm-alert-overlay[data-skin] textarea[data-slot=input],
+:where(.react-confirm-alert-overlay[data-skin]) div textarea {
+  height: auto;
+  min-height: 80px;
+  padding: 8px 12px;
+  resize: vertical;
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=input]:focus,
+:where(.react-confirm-alert-overlay[data-skin]) div :is(input, textarea, select):where(:focus) {
+  border-color: var(--rca-ring, var(--_ring));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rca-ring, var(--_ring)) 50%, transparent);
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=input][aria-invalid=true],
+:where(.react-confirm-alert-overlay[data-skin]) div :is(input, textarea, select):where([aria-invalid=true]) {
+  border-color: var(--rca-danger, var(--_error));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rca-danger, var(--_error)) 20%, transparent);
+}
+:where(.react-confirm-alert-overlay[data-skin]) div p {
+  margin: 0;
+}
+:where(.react-confirm-alert-overlay[data-skin]) div input:where([type=checkbox], [type=radio]) {
+  accent-color: var(--rca-button-bg, var(--_primary));
+}
+:where(.react-confirm-alert-overlay[data-skin]) div * + :is(p, label, input, textarea, select) {
+  margin-top: 12px;
+}
+:where(.react-confirm-alert-overlay[data-skin]) div label + :is(input, textarea, select) {
+  margin-top: 0;
+}
+.react-confirm-alert-overlay[data-skin] [data-slot=error] {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--rca-danger, var(--_error));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group {
+  justify-content: flex-end;
+  gap: var(--rca-gap, 8px);
+  margin-top: 24px;
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button,
+:where(.react-confirm-alert-overlay[data-skin]) div button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 36px;
+  margin: 0;
+  padding: 0 16px;
+  border: 1px solid var(--rca-border, var(--_border));
+  border-radius: var(--rca-button-radius, 6px);
+  background: var(--rca-bg, var(--_bg));
+  color: var(--rca-title, var(--_title));
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  transition: background-color 150ms, transform 150ms;
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=primary],
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=primary]) {
+  border-color: transparent;
+  background: var(--rca-button-bg, var(--_primary));
+  color: var(--rca-button-fg, var(--_primary-fg));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=danger],
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=danger]) {
+  border-color: transparent;
+  background: var(--rca-danger, var(--_danger));
+  color: #fff;
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > :not([data-variant=primary],[data-variant=danger]):enabled:hover,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:not([data-variant=primary],[data-variant=danger]):enabled:hover) {
+  background: var(--_hover);
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=primary]:enabled:hover,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=primary]:enabled:hover) {
+  background: var(--rca-button-bg-hover, color-mix(in srgb, var(--rca-button-bg, var(--_primary)) 85%, #000));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=danger]:enabled:hover,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([data-variant=danger]:enabled:hover) {
+  background: var(--rca-danger-hover, color-mix(in srgb, var(--rca-danger, var(--_danger)) 85%, #000));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:active,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:active) {
+  transform: scale(0.97);
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:focus-visible,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:focus-visible) {
+  outline: var(--rca-focus-ring, 2px solid var(--_ring));
+  outline-offset: 2px;
+}
+/* Not faded: white on a faded red is below 4.5:1. */
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:disabled:not([aria-busy=true]),
+:where(.react-confirm-alert-overlay[data-skin]) div button:where(:disabled:not([aria-busy=true])) {
+  cursor: default;
+  border-color: var(--rca-border, var(--_border));
+  background: var(--rca-bg, var(--_bg));
+  color: var(--rca-fg, var(--_fg));
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true],
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([aria-busy=true]) {
+  cursor: progress;
+}
+.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true]::before,
+:where(.react-confirm-alert-overlay[data-skin]) div button:where([aria-busy=true])::before {
+  content: '';
+  width: 12px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: rca-spin 700ms linear infinite;
+}
+@media (max-width: 480px) {
+  .react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group {
+    flex-direction: column-reverse;
+  }
+  .react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button {
+    height: 40px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .react-confirm-alert-overlay[data-skin],
+  .react-confirm-alert-overlay[data-skin] .react-confirm-alert {
+    animation: none;
+  }
+  .react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button {
+    transition: none;
+  }
+}
+@keyframes rca-in { from { opacity: 0; } }
+@keyframes rca-out { to { opacity: 0; } }
+@keyframes rca-pop { from { opacity: 0; transform: scale(0.95); } }
+@keyframes rca-pop-out { to { opacity: 0; transform: scale(0.95); } }
+@keyframes rca-spin { to { transform: rotate(360deg); } }

package/typings/DialogFrame.d.ts

@@ -20,6 +20,8 @@ export interface DialogFrameProps {
     closeOnEscape: boolean;
     /** the v3 API reads Escape from document keydown and focuses the panel */
     legacy: boolean;
+    /** confirmAlert opted into the new default look */
+    skin?: boolean | undefined;
     onKeyDown?: ((event: KeyboardEvent<HTMLElement>, close: () => void) => void) | undefined;
     onClickOutside?: (() => void) | undefined;
     onDismiss: () => void;

package/typings/DialogLayout.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { DialogLayoutProps } from './types';
+/** The default dialog layout for your own content: title, message, your children, then the actions. */
+export declare function DialogLayout({ title, message, actions, children }: DialogLayoutProps): ReactElement;

package/typings/api.d.ts

@@ -4,6 +4,7 @@ export declare function Body({ props, children }: {
     props: DialogRenderProps<any>;
     children: ReactNode;
 }): ReactElement;
+export declare function useBusy(id: DialogId | undefined): [number | null, (index: number | null) => void];
 export declare function Buttons<R>({ props, signal: getSignal, focus }: {
     props: DialogRenderProps<R>;
     signal: () => AbortSignal;

package/typings/classNames.d.ts

@@ -1,4 +1,4 @@
-import type { DialogClassNames, DialogDefaults, DialogSlot, StyleOptions } from './types';
+import type { DialogClassNames, DialogDefaults, DialogId, DialogSlot, StyleOptions } from './types';
 /**
  * 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.
@@ -12,5 +12,11 @@ export type SlotProps = (slot: DialogSlot, extra?: string) => {
 export declare const slotsFor: (layers: readonly StyleOptions[]) => SlotProps;
 export declare const SlotContext: import("react").Context<SlotProps>;
 export declare const useSlot: () => SlotProps;
+export declare const FrameContext: import("react").Context<{
+    id?: DialogId | undefined;
+    titleId?: string | undefined;
+    inBody?: boolean;
+    countTitle?: (change: (count: number) => number) => void;
+}>;
 export declare function configureDialogs(defaults: DialogDefaults): void;
 export type { DialogClassNames };

package/typings/compat.d.ts

@@ -35,6 +35,8 @@ export interface ReactConfirmAlertProps {
     unstyled?: boolean;
     /** classes per slot, added after the app defaults */
     classNames?: DialogClassNames;
+    /** use the new default look instead of the 3.0 one; customUI then sits in the dialog body */
+    skin?: boolean;
 }
 export type ConfirmAlertOptions = ReactConfirmAlertProps;
 export declare function confirmAlert(properties: ReactConfirmAlertProps): void;

package/typings/index.d.ts

@@ -5,5 +5,6 @@ export { DialogHost, useDialog } from './DialogHost';
 export { configureDialogs } from './classNames';
 export type { DialogHostProps } from './DialogHost';
 export { ConfirmDialog, Dialog } from './Dialog';
+export { DialogLayout } from './DialogLayout';
 export type { ConfirmDialogProps, DialogProps } from './Dialog';
-export type { AlertOptions, BaseOptions, ButtonContext, ButtonDataAttributes, DialogClassNames, DialogDataAttributes, DialogDefaults, DialogSlot, SlotDataAttributes, StyleOptions, ConfirmOptions, CustomOptions, DialogButton, DialogHandle, DialogId, DialogKind, DialogRenderProps, PromptOptions, Strategy } from './types';
+export type { AlertOptions, BaseOptions, ButtonContext, ButtonDataAttributes, DialogAction, DialogClassNames, DialogLayoutProps, DialogDataAttributes, DialogDefaults, DialogSlot, SlotDataAttributes, StyleOptions, ConfirmOptions, CustomOptions, DialogButton, DialogHandle, DialogId, DialogKind, DialogRenderProps, PromptOptions, Strategy } from './types';

package/typings/types.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ComponentType, InputHTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import type { ButtonHTMLAttributes, ComponentType, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 export type DialogId = string & {
     readonly __brand: 'DialogId';
 };
@@ -22,6 +22,7 @@ export interface DialogRenderProps<R> {
     descriptionId: string;
     title?: ReactNode | undefined;
     message?: ReactNode | undefined;
+    content?: ReactNode | undefined;
     buttons: readonly DialogButton<R>[];
     close: (value: R) => void;
     dismiss: () => void;
@@ -53,6 +54,7 @@ export interface DialogDefaults extends StyleOptions {
     confirmAlert?: (StyleOptions & {
         modal?: boolean | undefined;
         strategy?: Strategy | undefined;
+        skin?: boolean | undefined;
     }) | undefined;
 }
 /** Attributes on the frame, for CSS and Tailwind data-* variants. A type only, kept in step by tests. */
@@ -75,6 +77,8 @@ export interface ButtonDataAttributes extends SlotDataAttributes {
 export interface BaseOptions extends StyleOptions {
     title?: ReactNode | undefined;
     message?: ReactNode | undefined;
+    /** your own content between the message and the buttons */
+    content?: ReactNode | undefined;
     closeOnEscape?: boolean | undefined;
     closeOnClickOutside?: boolean | undefined;
     strategy?: Strategy | undefined;
@@ -124,6 +128,8 @@ export interface EntryOptions extends BaseOptions {
     onClickOutside?: (() => void) | undefined;
     /** @internal the v3 API: Escape from document keydown, blur on body.children[0] */
     legacy?: boolean | undefined;
+    /** @internal confirmAlert opted into the new default look */
+    skin?: boolean | undefined;
     /** @internal confirm's tone, shown as data-tone on the frame */
     tone?: 'default' | 'danger' | undefined;
     /** @internal v3 callback, runs before afterClose when the dialog unmounts */
@@ -136,3 +142,15 @@ export interface DialogHandle<R> {
     dismiss: () => void;
     update: (patch: Partial<Omit<CustomOptions<R>, 'kind'>>) => void;
 }
+export interface DialogAction extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children'> {
+    label: ReactNode;
+    variant?: 'primary' | 'secondary' | 'danger' | undefined;
+    /** return a Promise to show the button as busy until it settles; the dialog stays open */
+    onClick?: ((event: MouseEvent<HTMLButtonElement>) => void | Promise<unknown>) | undefined;
+}
+export interface DialogLayoutProps {
+    title?: ReactNode | undefined;
+    message?: ReactNode | undefined;
+    actions?: readonly DialogAction[] | undefined;
+    children?: ReactNode | undefined;
+}