@ttt-productions/ui-core 0.11.39 → 0.11.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -25,9 +25,10 @@ export interface ConsequenceDialogProps {
|
|
|
25
25
|
confirmLabel: React.ReactNode;
|
|
26
26
|
cancelLabel?: React.ReactNode;
|
|
27
27
|
destructive?: boolean;
|
|
28
|
+
confirmHeld?: React.ReactNode;
|
|
28
29
|
onConfirm: () => void | Promise<void>;
|
|
29
30
|
onCloseAutoFocus?: (event: Event) => void;
|
|
30
31
|
}
|
|
31
32
|
/** The confirm is a plain `Button`, not `AlertDialogAction`, so Radix does not close the dialog on click. */
|
|
32
|
-
export declare function ConsequenceDialog({ trigger, open, onOpenChange, title, immediateEffect, delayedEffect, reversibility, reason, typedConfirmation, confirmLabel, cancelLabel, destructive, onConfirm, onCloseAutoFocus, }: ConsequenceDialogProps): import("react").JSX.Element;
|
|
33
|
+
export declare function ConsequenceDialog({ trigger, open, onOpenChange, title, immediateEffect, delayedEffect, reversibility, reason, typedConfirmation, confirmLabel, cancelLabel, destructive, confirmHeld, onConfirm, onCloseAutoFocus, }: ConsequenceDialogProps): import("react").JSX.Element;
|
|
33
34
|
//# sourceMappingURL=consequence-dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consequence-dialog.d.ts","sourceRoot":"","sources":["../../../src/react/components/consequence-dialog.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,oCAAoC,CAAC;AAG5C,MAAM,WAAW,uBAAuB;IACtC,WAAW,EAAE,mBAAmB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACxC;AAED,MAAM,WAAW,kCAAkC;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,iBAAiB,CAAC,EAAE,kCAAkC,CAAC;IAEvD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"consequence-dialog.d.ts","sourceRoot":"","sources":["../../../src/react/components/consequence-dialog.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,oCAAoC,CAAC;AAG5C,MAAM,WAAW,uBAAuB;IACtC,WAAW,EAAE,mBAAmB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACxC;AAED,MAAM,WAAW,kCAAkC;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,iBAAiB,CAAC,EAAE,kCAAkC,CAAC;IAEvD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEtC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC3C;AA2BD,6GAA6G;AAC7G,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,eAAe,EACf,aAAa,EACb,aAAa,EACb,MAAM,EACN,iBAAiB,EACjB,YAAY,EACZ,WAAsB,EACtB,WAAmB,EACnB,WAAW,EACX,SAAS,EACT,gBAAgB,GACjB,EAAE,sBAAsB,+BAuJxB"}
|
|
@@ -14,7 +14,7 @@ function ConsequenceRow({ icon: Icon, label, children, }) {
|
|
|
14
14
|
return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Icon, { className: SLOT_ICON_CLASS, "aria-hidden": "true" }), _jsxs("div", { className: "stack-1 min-w-0", children: [_jsx("div", { className: "text-caption font-medium uppercase tracking-wide text-muted-foreground", children: label }), _jsx("div", { className: "text-small text-foreground", children: children })] })] }));
|
|
15
15
|
}
|
|
16
16
|
/** The confirm is a plain `Button`, not `AlertDialogAction`, so Radix does not close the dialog on click. */
|
|
17
|
-
export function ConsequenceDialog({ trigger, open, onOpenChange, title, immediateEffect, delayedEffect, reversibility, reason, typedConfirmation, confirmLabel, cancelLabel = 'Cancel', destructive = false, onConfirm, onCloseAutoFocus, }) {
|
|
17
|
+
export function ConsequenceDialog({ trigger, open, onOpenChange, title, immediateEffect, delayedEffect, reversibility, reason, typedConfirmation, confirmLabel, cancelLabel = 'Cancel', destructive = false, confirmHeld, onConfirm, onCloseAutoFocus, }) {
|
|
18
18
|
const isControlled = open !== undefined;
|
|
19
19
|
const [internalOpen, setInternalOpen] = useState(false);
|
|
20
20
|
const [typedValue, setTypedValue] = useState('');
|
|
@@ -23,6 +23,8 @@ export function ConsequenceDialog({ trigger, open, onOpenChange, title, immediat
|
|
|
23
23
|
const reasonId = useId();
|
|
24
24
|
const reasonHintId = useId();
|
|
25
25
|
const typedId = useId();
|
|
26
|
+
const heldId = useId();
|
|
27
|
+
const held = confirmHeld !== undefined && confirmHeld !== null && confirmHeld !== false;
|
|
26
28
|
const setOpenState = useCallback((next) => {
|
|
27
29
|
if (isControlled)
|
|
28
30
|
onOpenChange?.(next);
|
|
@@ -36,7 +38,7 @@ export function ConsequenceDialog({ trigger, open, onOpenChange, title, immediat
|
|
|
36
38
|
setOpenState(next);
|
|
37
39
|
}, [pending, setOpenState]);
|
|
38
40
|
const handleConfirm = useCallback(async () => {
|
|
39
|
-
if (pending)
|
|
41
|
+
if (pending || held)
|
|
40
42
|
return;
|
|
41
43
|
setPending(true);
|
|
42
44
|
try {
|
|
@@ -50,7 +52,7 @@ export function ConsequenceDialog({ trigger, open, onOpenChange, title, immediat
|
|
|
50
52
|
finally {
|
|
51
53
|
setPending(false);
|
|
52
54
|
}
|
|
53
|
-
}, [pending, onConfirm, setOpenState]);
|
|
55
|
+
}, [pending, held, onConfirm, setOpenState]);
|
|
54
56
|
const reasonOk = !reason || checkInputFormat(reason.value, reason.inputFormat).ok;
|
|
55
57
|
const typedOk = !typedConfirmation ? true : typedValue === typedConfirmation.phrase;
|
|
56
58
|
const phrase = typedConfirmation?.phrase ?? '';
|
|
@@ -60,6 +62,6 @@ export function ConsequenceDialog({ trigger, open, onOpenChange, title, immediat
|
|
|
60
62
|
return (_jsxs(AlertDialog, { open: actualOpen, onOpenChange: handleOpenChange, children: [trigger ? _jsx(AlertDialogTrigger, { asChild: true, children: trigger }) : null, _jsxs(AlertDialogContent, { onEscapeKeyDown: (e) => {
|
|
61
63
|
if (pending)
|
|
62
64
|
e.preventDefault();
|
|
63
|
-
}, onCloseAutoFocus: onCloseAutoFocus, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { asChild: true, children: _jsxs("div", { className: "stack-3 text-left", children: [immediateEffect ? (_jsx(ConsequenceRow, { icon: Zap, label: "Immediately", children: immediateEffect })) : null, delayedEffect ? (_jsx(ConsequenceRow, { icon: Clock, label: "Afterward", children: delayedEffect })) : null, reversibility ? (_jsx(ConsequenceRow, { icon: RotateCcw, label: "Reversibility", children: reversibility })) : null] }) })] }), reason ? (_jsxs("div", { className: "stack-2", children: [_jsx(Label, { htmlFor: reasonId, children: reason.label ?? 'Reason' }), _jsx(Textarea, { id: reasonId, value: reason.value, onChange: (e) => reason.onChange(e.target.value), placeholder: reason.placeholder, inputFormat: reason.inputFormat, rows: reason.rows ?? 3, disabled: pending, "aria-describedby": reason.hint ? reasonHintId : undefined }), reason.hint ? reason.hint(reasonHintId) : null] })) : null, typedConfirmation && typedFormat ? (_jsxs("div", { className: "stack-2", children: [_jsx(Label, { htmlFor: typedId, children: typedConfirmation.label ?? (_jsxs(_Fragment, { children: ["Type ", _jsx("span", { className: "font-mono", children: typedConfirmation.phrase }), " to confirm"] })) }), _jsx(Input, { id: typedId, value: typedValue, onChange: (e) => setTypedValue(e.target.value), placeholder: typedConfirmation.phrase, inputFormat: typedFormat, disabled: pending, autoComplete: "off" })] })) : null, _jsxs(AlertDialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => handleOpenChange(false), disabled: pending, children: cancelLabel }), _jsx(Button, { variant: destructive ? 'destructive' : 'default', onClick: handleConfirm, disabled: !reasonOk || !typedOk, pending: pending, children: confirmLabel })] })] })] }));
|
|
65
|
+
}, onCloseAutoFocus: onCloseAutoFocus, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { asChild: true, children: _jsxs("div", { className: "stack-3 text-left", children: [immediateEffect ? (_jsx(ConsequenceRow, { icon: Zap, label: "Immediately", children: immediateEffect })) : null, delayedEffect ? (_jsx(ConsequenceRow, { icon: Clock, label: "Afterward", children: delayedEffect })) : null, reversibility ? (_jsx(ConsequenceRow, { icon: RotateCcw, label: "Reversibility", children: reversibility })) : null] }) })] }), reason ? (_jsxs("div", { className: "stack-2", children: [_jsx(Label, { htmlFor: reasonId, children: reason.label ?? 'Reason' }), _jsx(Textarea, { id: reasonId, value: reason.value, onChange: (e) => reason.onChange(e.target.value), placeholder: reason.placeholder, inputFormat: reason.inputFormat, rows: reason.rows ?? 3, disabled: pending, "aria-describedby": reason.hint ? reasonHintId : undefined }), reason.hint ? reason.hint(reasonHintId) : null] })) : null, typedConfirmation && typedFormat ? (_jsxs("div", { className: "stack-2", children: [_jsx(Label, { htmlFor: typedId, children: typedConfirmation.label ?? (_jsxs(_Fragment, { children: ["Type ", _jsx("span", { className: "font-mono", children: typedConfirmation.phrase }), " to confirm"] })) }), _jsx(Input, { id: typedId, value: typedValue, onChange: (e) => setTypedValue(e.target.value), placeholder: typedConfirmation.phrase, inputFormat: typedFormat, disabled: pending, autoComplete: "off" })] })) : null, held ? (_jsx("div", { id: heldId, role: "status", className: "text-small text-muted-foreground", children: confirmHeld })) : null, _jsxs(AlertDialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => handleOpenChange(false), disabled: pending, children: cancelLabel }), _jsx(Button, { variant: destructive ? 'destructive' : 'default', onClick: handleConfirm, disabled: !reasonOk || !typedOk || held, "aria-describedby": held ? heldId : undefined, pending: pending, children: confirmLabel })] })] })] }));
|
|
64
66
|
}
|
|
65
67
|
//# sourceMappingURL=consequence-dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consequence-dialog.js","sourceRoot":"","sources":["../../../src/react/components/consequence-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useCallback, useId, useMemo, useState } from 'react';\nimport {\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n} from './alert-dialog.js';\nimport { Button } from './button.js';\nimport { Textarea } from './textarea.js';\nimport { Input } from './input.js';\nimport { Label } from './label.js';\nimport {\n checkInputFormat,\n defineInputFormat,\n type DeclaredInputFormat,\n} from '@ttt-productions/input-format-core';\nimport { Zap, Clock, RotateCcw } from 'lucide-react';\n\nexport interface ConsequenceDialogReason {\n inputFormat: DeclaredInputFormat;\n placeholder?: string;\n label?: React.ReactNode;\n value: string;\n onChange: (value: string) => void;\n rows?: number;\n hint?: (id: string) => React.ReactNode;\n}\n\nexport interface ConsequenceDialogTypedConfirmation {\n phrase: string;\n label?: React.ReactNode;\n}\n\nexport interface ConsequenceDialogProps {\n trigger?: React.ReactNode;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n\n title: React.ReactNode;\n\n immediateEffect?: React.ReactNode;\n delayedEffect?: React.ReactNode;\n reversibility?: React.ReactNode;\n\n reason?: ConsequenceDialogReason;\n typedConfirmation?: ConsequenceDialogTypedConfirmation;\n\n confirmLabel: React.ReactNode;\n cancelLabel?: React.ReactNode;\n destructive?: boolean;\n\n onConfirm: () => void | Promise<void>;\n\n onCloseAutoFocus?: (event: Event) => void;\n}\n\nconst SLOT_ICON_CLASS = 'icon-xs mt-0.5 shrink-0 text-muted-foreground';\n\n/** Every element is a block: the `stack-*` spacing is a vertical margin, which an inline element ignores. */\nfunction ConsequenceRow({\n icon: Icon,\n label,\n children,\n}: {\n icon: typeof Zap;\n label: string;\n children: React.ReactNode;\n}) {\n return (\n <div className=\"flex items-start gap-2\">\n <Icon className={SLOT_ICON_CLASS} aria-hidden=\"true\" />\n <div className=\"stack-1 min-w-0\">\n <div className=\"text-caption font-medium uppercase tracking-wide text-muted-foreground\">\n {label}\n </div>\n <div className=\"text-small text-foreground\">{children}</div>\n </div>\n </div>\n );\n}\n\n/** The confirm is a plain `Button`, not `AlertDialogAction`, so Radix does not close the dialog on click. */\nexport function ConsequenceDialog({\n trigger,\n open,\n onOpenChange,\n title,\n immediateEffect,\n delayedEffect,\n reversibility,\n reason,\n typedConfirmation,\n confirmLabel,\n cancelLabel = 'Cancel',\n destructive = false,\n onConfirm,\n onCloseAutoFocus,\n}: ConsequenceDialogProps) {\n const isControlled = open !== undefined;\n const [internalOpen, setInternalOpen] = useState(false);\n const [typedValue, setTypedValue] = useState('');\n const [pending, setPending] = useState(false);\n\n const actualOpen = isControlled ? open : internalOpen;\n\n const reasonId = useId();\n const reasonHintId = useId();\n const typedId = useId();\n\n const setOpenState = useCallback(\n (next: boolean) => {\n if (isControlled) onOpenChange?.(next);\n else setInternalOpen(next);\n },\n [isControlled, onOpenChange],\n );\n\n const handleOpenChange = useCallback(\n (next: boolean) => {\n if (pending) return;\n setTypedValue('');\n setOpenState(next);\n },\n [pending, setOpenState],\n );\n\n const handleConfirm = useCallback(async () => {\n if (pending) return;\n setPending(true);\n try {\n await onConfirm();\n setTypedValue('');\n setOpenState(false);\n } catch {\n // The caller's onConfirm owns its failure's surface; a rejection only keeps the dialog open.\n } finally {\n setPending(false);\n }\n }, [pending, onConfirm, setOpenState]);\n\n const reasonOk = !reason || checkInputFormat(reason.value, reason.inputFormat).ok;\n\n const typedOk = !typedConfirmation ? true : typedValue === typedConfirmation.phrase;\n const phrase = typedConfirmation?.phrase ?? '';\n const typedFormat = useMemo(\n () =>\n phrase.length > 0\n ? defineInputFormat({ format: 'singleLine', min: 1, max: phrase.length })\n : null,\n [phrase],\n );\n\n return (\n <AlertDialog open={actualOpen} onOpenChange={handleOpenChange}>\n {trigger ? <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger> : null}\n <AlertDialogContent\n onEscapeKeyDown={(e) => {\n if (pending) e.preventDefault();\n }}\n onCloseAutoFocus={onCloseAutoFocus}\n >\n <AlertDialogHeader>\n <AlertDialogTitle>{title}</AlertDialogTitle>\n {/* A div, not the primitive's default <p>: the rows are blocks, which a <p> cannot hold. */}\n <AlertDialogDescription asChild>\n <div className=\"stack-3 text-left\">\n {immediateEffect ? (\n <ConsequenceRow icon={Zap} label=\"Immediately\">\n {immediateEffect}\n </ConsequenceRow>\n ) : null}\n {delayedEffect ? (\n <ConsequenceRow icon={Clock} label=\"Afterward\">\n {delayedEffect}\n </ConsequenceRow>\n ) : null}\n {reversibility ? (\n <ConsequenceRow icon={RotateCcw} label=\"Reversibility\">\n {reversibility}\n </ConsequenceRow>\n ) : null}\n </div>\n </AlertDialogDescription>\n </AlertDialogHeader>\n\n {reason ? (\n <div className=\"stack-2\">\n <Label htmlFor={reasonId}>{reason.label ?? 'Reason'}</Label>\n <Textarea\n id={reasonId}\n value={reason.value}\n onChange={(e) => reason.onChange(e.target.value)}\n placeholder={reason.placeholder}\n inputFormat={reason.inputFormat}\n rows={reason.rows ?? 3}\n disabled={pending}\n aria-describedby={reason.hint ? reasonHintId : undefined}\n />\n {reason.hint ? reason.hint(reasonHintId) : null}\n </div>\n ) : null}\n\n {typedConfirmation && typedFormat ? (\n <div className=\"stack-2\">\n <Label htmlFor={typedId}>\n {typedConfirmation.label ?? (\n <>\n Type <span className=\"font-mono\">{typedConfirmation.phrase}</span> to confirm\n </>\n )}\n </Label>\n <Input\n id={typedId}\n value={typedValue}\n onChange={(e) => setTypedValue(e.target.value)}\n placeholder={typedConfirmation.phrase}\n inputFormat={typedFormat}\n disabled={pending}\n autoComplete=\"off\"\n />\n </div>\n ) : null}\n\n <AlertDialogFooter>\n <Button variant=\"outline\" onClick={() => handleOpenChange(false)} disabled={pending}>\n {cancelLabel}\n </Button>\n <Button\n variant={destructive ? 'destructive' : 'default'}\n onClick={handleConfirm}\n disabled={!reasonOk || !typedOk}\n pending={pending}\n >\n {confirmLabel}\n </Button>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"consequence-dialog.js","sourceRoot":"","sources":["../../../src/react/components/consequence-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useCallback, useId, useMemo, useState } from 'react';\nimport {\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n} from './alert-dialog.js';\nimport { Button } from './button.js';\nimport { Textarea } from './textarea.js';\nimport { Input } from './input.js';\nimport { Label } from './label.js';\nimport {\n checkInputFormat,\n defineInputFormat,\n type DeclaredInputFormat,\n} from '@ttt-productions/input-format-core';\nimport { Zap, Clock, RotateCcw } from 'lucide-react';\n\nexport interface ConsequenceDialogReason {\n inputFormat: DeclaredInputFormat;\n placeholder?: string;\n label?: React.ReactNode;\n value: string;\n onChange: (value: string) => void;\n rows?: number;\n hint?: (id: string) => React.ReactNode;\n}\n\nexport interface ConsequenceDialogTypedConfirmation {\n phrase: string;\n label?: React.ReactNode;\n}\n\nexport interface ConsequenceDialogProps {\n trigger?: React.ReactNode;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n\n title: React.ReactNode;\n\n immediateEffect?: React.ReactNode;\n delayedEffect?: React.ReactNode;\n reversibility?: React.ReactNode;\n\n reason?: ConsequenceDialogReason;\n typedConfirmation?: ConsequenceDialogTypedConfirmation;\n\n confirmLabel: React.ReactNode;\n cancelLabel?: React.ReactNode;\n destructive?: boolean;\n confirmHeld?: React.ReactNode;\n\n onConfirm: () => void | Promise<void>;\n\n onCloseAutoFocus?: (event: Event) => void;\n}\n\nconst SLOT_ICON_CLASS = 'icon-xs mt-0.5 shrink-0 text-muted-foreground';\n\n/** Every element is a block: the `stack-*` spacing is a vertical margin, which an inline element ignores. */\nfunction ConsequenceRow({\n icon: Icon,\n label,\n children,\n}: {\n icon: typeof Zap;\n label: string;\n children: React.ReactNode;\n}) {\n return (\n <div className=\"flex items-start gap-2\">\n <Icon className={SLOT_ICON_CLASS} aria-hidden=\"true\" />\n <div className=\"stack-1 min-w-0\">\n <div className=\"text-caption font-medium uppercase tracking-wide text-muted-foreground\">\n {label}\n </div>\n <div className=\"text-small text-foreground\">{children}</div>\n </div>\n </div>\n );\n}\n\n/** The confirm is a plain `Button`, not `AlertDialogAction`, so Radix does not close the dialog on click. */\nexport function ConsequenceDialog({\n trigger,\n open,\n onOpenChange,\n title,\n immediateEffect,\n delayedEffect,\n reversibility,\n reason,\n typedConfirmation,\n confirmLabel,\n cancelLabel = 'Cancel',\n destructive = false,\n confirmHeld,\n onConfirm,\n onCloseAutoFocus,\n}: ConsequenceDialogProps) {\n const isControlled = open !== undefined;\n const [internalOpen, setInternalOpen] = useState(false);\n const [typedValue, setTypedValue] = useState('');\n const [pending, setPending] = useState(false);\n\n const actualOpen = isControlled ? open : internalOpen;\n\n const reasonId = useId();\n const reasonHintId = useId();\n const typedId = useId();\n const heldId = useId();\n const held = confirmHeld !== undefined && confirmHeld !== null && confirmHeld !== false;\n\n const setOpenState = useCallback(\n (next: boolean) => {\n if (isControlled) onOpenChange?.(next);\n else setInternalOpen(next);\n },\n [isControlled, onOpenChange],\n );\n\n const handleOpenChange = useCallback(\n (next: boolean) => {\n if (pending) return;\n setTypedValue('');\n setOpenState(next);\n },\n [pending, setOpenState],\n );\n\n const handleConfirm = useCallback(async () => {\n if (pending || held) return;\n setPending(true);\n try {\n await onConfirm();\n setTypedValue('');\n setOpenState(false);\n } catch {\n // The caller's onConfirm owns its failure's surface; a rejection only keeps the dialog open.\n } finally {\n setPending(false);\n }\n }, [pending, held, onConfirm, setOpenState]);\n\n const reasonOk = !reason || checkInputFormat(reason.value, reason.inputFormat).ok;\n\n const typedOk = !typedConfirmation ? true : typedValue === typedConfirmation.phrase;\n const phrase = typedConfirmation?.phrase ?? '';\n const typedFormat = useMemo(\n () =>\n phrase.length > 0\n ? defineInputFormat({ format: 'singleLine', min: 1, max: phrase.length })\n : null,\n [phrase],\n );\n\n return (\n <AlertDialog open={actualOpen} onOpenChange={handleOpenChange}>\n {trigger ? <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger> : null}\n <AlertDialogContent\n onEscapeKeyDown={(e) => {\n if (pending) e.preventDefault();\n }}\n onCloseAutoFocus={onCloseAutoFocus}\n >\n <AlertDialogHeader>\n <AlertDialogTitle>{title}</AlertDialogTitle>\n {/* A div, not the primitive's default <p>: the rows are blocks, which a <p> cannot hold. */}\n <AlertDialogDescription asChild>\n <div className=\"stack-3 text-left\">\n {immediateEffect ? (\n <ConsequenceRow icon={Zap} label=\"Immediately\">\n {immediateEffect}\n </ConsequenceRow>\n ) : null}\n {delayedEffect ? (\n <ConsequenceRow icon={Clock} label=\"Afterward\">\n {delayedEffect}\n </ConsequenceRow>\n ) : null}\n {reversibility ? (\n <ConsequenceRow icon={RotateCcw} label=\"Reversibility\">\n {reversibility}\n </ConsequenceRow>\n ) : null}\n </div>\n </AlertDialogDescription>\n </AlertDialogHeader>\n\n {reason ? (\n <div className=\"stack-2\">\n <Label htmlFor={reasonId}>{reason.label ?? 'Reason'}</Label>\n <Textarea\n id={reasonId}\n value={reason.value}\n onChange={(e) => reason.onChange(e.target.value)}\n placeholder={reason.placeholder}\n inputFormat={reason.inputFormat}\n rows={reason.rows ?? 3}\n disabled={pending}\n aria-describedby={reason.hint ? reasonHintId : undefined}\n />\n {reason.hint ? reason.hint(reasonHintId) : null}\n </div>\n ) : null}\n\n {typedConfirmation && typedFormat ? (\n <div className=\"stack-2\">\n <Label htmlFor={typedId}>\n {typedConfirmation.label ?? (\n <>\n Type <span className=\"font-mono\">{typedConfirmation.phrase}</span> to confirm\n </>\n )}\n </Label>\n <Input\n id={typedId}\n value={typedValue}\n onChange={(e) => setTypedValue(e.target.value)}\n placeholder={typedConfirmation.phrase}\n inputFormat={typedFormat}\n disabled={pending}\n autoComplete=\"off\"\n />\n </div>\n ) : null}\n\n {held ? (\n <div id={heldId} role=\"status\" className=\"text-small text-muted-foreground\">\n {confirmHeld}\n </div>\n ) : null}\n\n <AlertDialogFooter>\n <Button variant=\"outline\" onClick={() => handleOpenChange(false)} disabled={pending}>\n {cancelLabel}\n </Button>\n <Button\n variant={destructive ? 'destructive' : 'default'}\n onClick={handleConfirm}\n disabled={!reasonOk || !typedOk || held}\n aria-describedby={held ? heldId : undefined}\n pending={pending}\n >\n {confirmLabel}\n </Button>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n );\n}\n"]}
|