fix: add fallback to Modal portal container

2026-05-08 21:19:54 +05:30
parent a7cced71ee
commit ffe588c3ec
1 changed files with 34 additions and 34 deletions
@@ -3,42 +3,42 @@ import type { ReactNode } from "react";
 import { createPortal } from "react-dom";
 interface ModalProps {
-  isOpen: boolean;
+    isOpen: boolean;
-  onClose?: () => void;
+    onClose?: () => void;
-  children: ReactNode;
+    children: ReactNode;
-  "data-testid"?: string;
+    "data-testid"?: string;
 }
 export function Modal({
-  isOpen,
+    isOpen,
-  onClose,
+    onClose,
-  children,
+    children,
-  "data-testid": testId,
+    "data-testid": testId,
 }: ModalProps) {
-  if (!isOpen) return null;
+    if (!isOpen) return null;
-  // render the modal top of all elements and position them to document viewport (/ the main wrapper).
+    // render the modal top of all elements and position them to document viewport (/ the main wrapper).
-  // NOTE: this is recommended approach for modals as it shouldn't be bound to the parent box.
+    // NOTE: this is recommended approach for modals as it shouldn't be bound to the parent box.
-  const mainContainer = document.querySelector("main");
+    const mainContainer = document.querySelector("main") || document.body;
-  return createPortal(
+    return createPortal(
-    <div
+        <div
-      data-testid={testId}
+            data-testid={testId}
-      className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/textures/noise.gif')]"
+            className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/textures/noise.gif')]"
-    >
+        >
-      <div className="modal-box border border-neutral/60 relative bg-base-100/60 flex flex-col items-center text-center gap-6">
+            <div className="modal-box border border-neutral/60 relative bg-base-100/60 flex flex-col items-center text-center gap-6">
-        {onClose && (
+                {onClose && (
-          <button
+                    <button
-            type="button"
+                        type="button"
-            data-testid="modal-close-btn"
+                        data-testid="modal-close-btn"
-            className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
+                        className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
-            onClick={onClose}
+                        onClick={onClose}
-            aria-label="Close"
+                        aria-label="Close"
-          >
+                    >
-            <XCircleIcon size={18} weight="bold" />
+                        <XCircleIcon size={18} weight="bold" />
-          </button>
+                    </button>
-        )}
+                )}
-        {children}
+                {children}
-      </div>
+            </div>
-    </div>,
+        </div>,
-    mainContainer,
+        mainContainer,
-  );
+    );
 }