@sybilion/uilib 1.3.20 → 1.3.21

package/dist/esm/components/ui/Dialog/Dialog.js

@@ -1,13 +1,15 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import cn from 'classnames';
-import React__default, { useState, useRef, useId, useEffect } from 'react';
+import React__default, { useState, useRef, useId, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { Card, CardHeader, CardContent, CardFooter } from '../Card/Card.js';
+import { APP_MODAL_ID } from '../../../constants/appMount.js';
 import { XIcon } from '@phosphor-icons/react';
 import S from './Dialog.styl.js';
 
 function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disableCloseButton, icon, content, contentClassName, footer, footerClassName, footerAlignment = 'center', size = 'default', className, noScroll, maxHeight, autoScrollBottom, width, }) {
     const [isMounted, setIsMounted] = useState(false);
+    const [modalContainer, setModalContainer] = useState(null);
     const [isAnimating, setIsAnimating] = useState(false);
     const dialogRef = useRef(null);
     const triggerRef = useRef(null);
@@ -19,6 +21,9 @@ function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disabl
         setIsMounted(true);
         return () => setIsMounted(false);
     }, []);
+    useLayoutEffect(() => {
+        setModalContainer(document.getElementById(APP_MODAL_ID));
+    }, []);
     // Handle open/close animations
     useEffect(() => {
         if (open) {
@@ -120,7 +125,10 @@ function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disabl
                         : null,
                 }, children: [(title || subtitle || icon) && (jsx(CardHeader, { icon: icon, title: title, description: subtitle })), !disableCloseButton && (jsx("button", { className: S.dialogClose, onClick: handleCloseClick, "aria-label": "Close dialog", type: "button", children: jsx(XIcon, { size: 16 }) })), content && (jsx(CardContent, { className: contentClassName, noScroll: noScroll, autoScrollBottom: autoScrollBottom, children: content })), footer && (jsx(CardFooter, { className: cn(S.footer, S[`align-${footerAlignment}`], footerClassName), children: footer }))] })] }));
     const onTriggerClick = !disabled ? () => onOpenChange(true) : undefined;
-    return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open && !disabled && createPortal(dialogContent, document.body)] }));
+    return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open &&
+                !disabled &&
+                modalContainer &&
+                createPortal(dialogContent, modalContainer)] }));
 }
 
 export { Dialog, S as DialogStyles };

package/dist/esm/constants/appMount.js

@@ -0,0 +1,5 @@
+/** DOM id for the main React root mount (`#app-root`). */
+/** DOM id for modal/dialog portals (`#app-modal`). */
+const APP_MODAL_ID = 'app-modal';
+
+export { APP_MODAL_ID };

package/dist/esm/types/src/constants/appMount.d.ts

@@ -0,0 +1,4 @@
+/** DOM id for the main React root mount (`#app-root`). */
+export declare const APP_ROOT_ID = "app-root";
+/** DOM id for modal/dialog portals (`#app-modal`). */
+export declare const APP_MODAL_ID = "app-modal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.20",
+  "version": "1.3.21",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Dialog/Dialog.tsx

@@ -1,5 +1,11 @@
 import cn from 'classnames';
-import React, { useEffect, useId, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { createPortal } from 'react-dom';
 
 import {
@@ -8,6 +14,7 @@ import {
   CardFooter,
   CardHeader,
 } from '#uilib/components/ui/Card/Card';
+import { APP_MODAL_ID } from '#uilib/constants/appMount';
 import { XIcon } from '@phosphor-icons/react';
 
 import S from './Dialog.styl';
@@ -35,6 +42,9 @@ export function Dialog({
   width,
 }: DialogProps) {
   const [isMounted, setIsMounted] = useState(false);
+  const [modalContainer, setModalContainer] = useState<HTMLElement | null>(
+    null,
+  );
   const [isAnimating, setIsAnimating] = useState(false);
   const dialogRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLElement | null>(null);
@@ -48,6 +58,10 @@ export function Dialog({
     return () => setIsMounted(false);
   }, []);
 
+  useLayoutEffect(() => {
+    setModalContainer(document.getElementById(APP_MODAL_ID));
+  }, []);
+
   // Handle open/close animations
   useEffect(() => {
     if (open) {
@@ -228,7 +242,10 @@ export function Dialog({
   return (
     <>
       {trigger && <div onClick={onTriggerClick}>{trigger}</div>}
-      {open && !disabled && createPortal(dialogContent, document.body)}
+      {open &&
+        !disabled &&
+        modalContainer &&
+        createPortal(dialogContent, modalContainer)}
     </>
   );
 }

package/src/constants/appMount.ts

@@ -0,0 +1,5 @@
+/** DOM id for the main React root mount (`#app-root`). */
+export const APP_ROOT_ID = 'app-root';
+
+/** DOM id for modal/dialog portals (`#app-modal`). */
+export const APP_MODAL_ID = 'app-modal';

package/src/docs/index.tsx

@@ -1,12 +1,13 @@
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
+import { APP_ROOT_ID } from '#uilib/constants/appMount';
 import { DEFAULT_THEME_ACTIVE_COLOR } from '#uilib/docs/lib/theme';
 
 import App from './App/App';
 import { ThemeProvider } from './contexts/theme-context';
 
-const elem = document.getElementById('app-root') as HTMLElement;
+const elem = document.getElementById(APP_ROOT_ID) as HTMLElement;
 const root = createRoot(elem);
 
 root.render(