@djangocfg/ui-core 2.1.339 → 2.1.341

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.339",
+  "version": "2.1.341",
   "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.339",
+    "@djangocfg/i18n": "^2.1.341",
     "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.339",
+    "@djangocfg/i18n": "^2.1.341",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.339",
+    "@djangocfg/typescript-config": "^2.1.341",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/overlay/dialog/index.tsx

@@ -58,6 +58,7 @@ const DialogContent = React.forwardRef<
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
+      aria-describedby={undefined}
       className={cn(
         "fixed z-600 bg-background duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         fullscreen
@@ -68,7 +69,6 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Description className="sr-only" />
       {closeButton === undefined ? (
         <DialogPrimitive.Close className="absolute right-4 top-4 cursor-pointer rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
           <Cross2Icon className="h-4 w-4" />

package/src/components/overlay/drawer/index.tsx

@@ -266,6 +266,7 @@ const DrawerContent = React.forwardRef<
       <DrawerOverlay />
       <DrawerPrimitive.Content
         ref={ref}
+        aria-describedby={undefined}
         className={cn(
           "fixed z-500 flex flex-col bg-background",
           directionStyles[direction],

package/src/components/overlay/hover-card/index.tsx

@@ -16,6 +16,7 @@ const HoverCardContent = React.forwardRef<
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
   <HoverCardPrimitive.Content
     ref={ref}
+    aria-describedby={undefined}
     align={align}
     sideOffset={sideOffset}
     className={cn(

package/src/components/overlay/popover/index.tsx

@@ -19,6 +19,7 @@ const PopoverContent = React.forwardRef<
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
+      aria-describedby={undefined}
       align={align}
       sideOffset={sideOffset}
       className={cn(

package/src/components/overlay/sheet/index.tsx

@@ -63,6 +63,7 @@ const SheetContent = React.forwardRef<
     <SheetOverlay />
     <SheetPrimitive.Content
       ref={ref}
+      aria-describedby={undefined}
       className={cn(sheetVariants({ side }), className)}
       {...props}
     >

package/src/components/overlay/side-panel/index.tsx

@@ -109,6 +109,7 @@ const SidePanelContent = React.forwardRef<
         <DrawerPrimitive.Portal>
             <DrawerPrimitive.Content
                 ref={ref}
+                aria-describedby={undefined}
                 className={cn(
                     'fixed z-500 flex flex-col bg-background shadow-2xl shadow-black/20',
                     'h-full max-w-[95vw]',

package/src/components/overlay/tooltip/index.tsx

@@ -19,6 +19,7 @@ const TooltipContent = React.forwardRef<
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       ref={ref}
+      aria-describedby={undefined}
       sideOffset={sideOffset}
       className={cn(
         "z-[700] overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",

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);
   }
 );