feat: support function provider for portal.root

Allow passing a function to `portal.root` that returns the mount point.
Useful when targeting an element managed by a React ref, since refs are
not populated when the lightbox first renders.

Author: igordanchenko

docs/documentation.md

@@ -206,14 +206,18 @@ import "yet-another-react-lightbox/styles.css";
       <td>portal</td>
       <td>
         &#123;<br />
-        &nbsp;&nbsp;root?: DocumentFragment | Element | null;<br />
+        &nbsp;&nbsp;root?: (() =&gt; DocumentFragment | Element | null) | DocumentFragment | Element | null;<br />
         &nbsp;&nbsp;container?: React.HTMLAttributes&lt;HTMLDivElement&gt;;<br />
         &#125;
       </td>
       <td>
         <p>Portal settings.</p>
         <ul>
-          <li>`root` - custom portal mount point. By default, the portal is mounted as a child of the document body.</li>
+          <li>
+            `root` - custom portal mount point. By default, the portal is mounted as a child of the document body.
+            Can also be a function that returns the mount point - useful when targeting an element managed by a React
+            ref (e.g. `root: () => portalRootRef.current`).
+          </li>
           <li>`container` - HTML attributes for the portal container element (e.g., `{ dir: "rtl" }`).</li>
         </ul>
       </td>

src/modules/Portal.tsx

@@ -149,7 +149,7 @@ export function Portal({
         >
           {children}
         </LightboxRoot>,
-        root || document.body,
+        (typeof root === "function" ? root() : root) || document.body,
       )
     : null;
 }

src/types.ts

@@ -255,7 +255,7 @@ export interface ControllerRef {
 /** Portal settings */
 export interface PortalSettings {
   /** portal mount point */
-  root?: DocumentFragment | Element | null;
+  root?: (() => DocumentFragment | Element | null) | DocumentFragment | Element | null;
   /** HTML attributes for the portal container */
   container?: React.HTMLAttributes<HTMLDivElement>;
 }