|
@@ -1,4 +1,5 @@
|
|
|
import { useEffect, useRef } from "react";
|
|
import { useEffect, useRef } from "react";
|
|
|
|
|
+import { createPortal } from "react-dom";
|
|
|
import { AlertTriangle, X } from "lucide-react";
|
|
import { AlertTriangle, X } from "lucide-react";
|
|
|
|
|
|
|
|
interface ConfirmDialogProps {
|
|
interface ConfirmDialogProps {
|
|
@@ -34,10 +35,11 @@ export function ConfirmDialog({
|
|
|
}, [open, onCancel]);
|
|
}, [open, onCancel]);
|
|
|
|
|
|
|
|
if (!open) return null;
|
|
if (!open) return null;
|
|
|
|
|
+ if (typeof document === "undefined") return null;
|
|
|
|
|
|
|
|
const isDanger = variant === "danger";
|
|
const isDanger = variant === "danger";
|
|
|
|
|
|
|
|
- return (
|
|
|
|
|
|
|
+ return createPortal(
|
|
|
<div
|
|
<div
|
|
|
ref={overlayRef}
|
|
ref={overlayRef}
|
|
|
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm fade-in"
|
|
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm fade-in"
|
|
@@ -87,6 +89,7 @@ export function ConfirmDialog({
|
|
|
</button>
|
|
</button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </div>,
|
|
|
|
|
+ document.body,
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|