@djangocfg/ui-core 2.1.340 → 2.1.342

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.340",
+  "version": "2.1.342",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -91,7 +91,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.340",
+    "@djangocfg/i18n": "^2.1.342",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -160,9 +160,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.340",
+    "@djangocfg/i18n": "^2.1.342",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.340",
+    "@djangocfg/typescript-config": "^2.1.342",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/specialized/portal/index.tsx

@@ -4,56 +4,54 @@ import * as React from 'react';
 import { createPortal } from 'react-dom';
 
 export interface PortalProps {
-  /**
-   * The content to be rendered inside the portal.
-   */
   children: React.ReactNode;
   /**
-   * The container element to render the portal into.
-   * Defaults to document.body.
-   * Can be a DOM element, a function returning a DOM element, or a ref.
+   * Target container. Defaults to document.body.
+   * Accepts a DOM element, a function returning one, or a ref.
    */
   container?: Element | (() => Element | null) | React.RefObject<Element | null> | null;
+  /** Render children in-place instead of teleporting. @default false */
+  disablePortal?: boolean;
   /**
-   * Disable the portal behavior.
-   * The children stay within the normal DOM hierarchy.
+   * Keep children mounted in the DOM even when the portal is "closed"
+   * (i.e. when the parent conditionally hides them via CSS / opacity).
+   * Useful for exit animations — the node stays in the DOM while the
+   * animation plays, then the parent unmounts it via its own state.
    * @default false
    */
-  disablePortal?: boolean;
+  keepMounted?: boolean;
 }
 
 /**
- * Portal component renders children into a different part of the DOM.
- * Similar to MUI Portal - useful for modals, tooltips, floating elements.
+ * Portal — renders children into a different part of the DOM tree,
+ * escaping any CSS stacking context (transform, filter, will-change).
  *
  * @example
  * ```tsx
- * // Render to document.body (default)
+ * // Default: teleport to document.body
  * <Portal>
- *   <div className="fixed inset-0 z-50">Modal content</div>
+ *   <div className="fixed inset-0 z-50">Modal</div>
  * </Portal>
  *
- * // Render to custom container
- * <Portal container={document.getElementById('modal-root')}>
- *   <div>Custom container content</div>
+ * // Custom container
+ * <Portal container={() => document.getElementById('modal-root')}>
+ *   <div>Content</div>
  * </Portal>
  *
- * // Disable portal (render in place)
- * <Portal disablePortal>
- *   <div>Rendered normally</div>
+ * // Keep mounted for exit animations — hide via CSS, unmount later
+ * <Portal keepMounted>
+ *   <div style={{ display: isOpen ? 'block' : 'none' }}>Animated panel</div>
  * </Portal>
  *
- * // With ref container
- * const containerRef = useRef<HTMLDivElement>(null);
- * <div ref={containerRef} />
- * <Portal container={containerRef}>
- *   <div>Content in ref container</div>
+ * // Disable portal (render in-place, e.g. in tests or SSR)
+ * <Portal disablePortal>
+ *   <div>In-place</div>
  * </Portal>
  * ```
  */
 export const Portal = React.forwardRef<HTMLDivElement, PortalProps>(
   function Portal(props, ref) {
-    const { children, container, disablePortal = false } = props;
+    const { children, container, disablePortal = false, keepMounted = false } = props;
     const [mountNode, setMountNode] = React.useState<Element | null>(null);
 
     React.useEffect(() => {
@@ -64,19 +62,18 @@ export const Portal = React.forwardRef<HTMLDivElement, PortalProps>(
 
     if (disablePortal) {
       if (React.isValidElement(children)) {
-        return React.cloneElement(children as React.ReactElement<{ ref?: React.Ref<HTMLDivElement> }>, {
-          ref: ref,
-        });
+        return React.cloneElement(children as React.ReactElement<{ ref?: React.Ref<HTMLDivElement> }>, { ref });
       }
       return <>{children}</>;
     }
 
-    if (mountNode) {
-      return createPortal(children, mountNode);
+    // SSR / before first effect: keepMounted renders in-place so content
+    // exists in the server HTML; otherwise return null (portal attaches client-side).
+    if (!mountNode) {
+      return keepMounted ? <>{children}</> : null;
     }
 
-    // SSR: return null until mounted
-    return null;
+    return createPortal(children, mountNode);
   }
 );
 

package/src/lib/dialog-service/dialogs/ConfirmDialogUI.tsx

@@ -71,6 +71,7 @@ export function ConfirmDialogUI({
           <AlertDialogAction
             onClick={onConfirm}
             className={dialogData.confirmClassName}
+            autoFocus
           >
             {dialogData.confirmText}
           </AlertDialogAction>