AlertDialog Test coverage improvement

src/components/ui/AlertDialog/AlertDialog.tsx

@@ -9,6 +9,10 @@ import AlertDialogCancel from './fragments/AlertDialogCancel';
 import AlertDialogAction from './fragments/AlertDialogAction';
 import AlertDialogTitle from './fragments/AlertDialogTitle';
 import AlertDialogDescription from './fragments/AlertDialogDescription';
+// Explicit extension to satisfy ESM linting/resolution
+export type {
+    AlertDialogRootProps as __fix_types_1
+} from './types.ts';
 
 const AlertDialog = () => {
     console.warn('Direct usage of AlertDialog is not supported. Please use AlertDialog.Root, AlertDialog.Content, etc. instead.');

src/components/ui/AlertDialog/contexts/AlertDialogContext.tsx

@@ -1,10 +1,22 @@
 'use client';
 import { createContext } from 'react';
 
-type AlertDialogContextType = {
+export type AlertDialogContextType = {
   rootClass: string;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  titleId?: string;
+  descriptionId?: string;
+  setTitleId: (id: string | undefined) => void;
+  setDescriptionId: (id: string | undefined) => void;
 };
 
 export const AlertDialogContext = createContext<AlertDialogContextType>({
-    rootClass: ''
+    rootClass: '',
+    isOpen: false,
+    setIsOpen: () => {},
+    titleId: undefined,
+    descriptionId: undefined,
+    setTitleId: () => {},
+    setDescriptionId: () => {}
 });

src/components/ui/AlertDialog/fragments/AlertDialogContent.tsx

@@ -9,12 +9,30 @@ type DialogPrimitiveContentProps = React.ComponentPropsWithoutRef<typeof DialogP
 
 export type AlertDialogContentProps = DialogPrimitiveContentProps & {
     className?: string;
+    asChild?: boolean;
+    forceMount?: boolean;
 };
 
-const AlertDialogContent = forwardRef<AlertDialogContentElement, AlertDialogContentProps>(({ children, className = '', ...props }, ref) => {
-    const { rootClass } = useContext(AlertDialogContext);
+const AlertDialogContent = forwardRef<AlertDialogContentElement, AlertDialogContentProps>(({
+    children,
+    className = '',
+    asChild = false,
+    forceMount = false,
+    ...props
+}, ref) => {
+    const { rootClass, titleId, descriptionId } = useContext(AlertDialogContext);
     return (
-        <DialogPrimitive.Content ref={ref} className={clsx(`${rootClass}-content`, className)} {...props}>
+        <DialogPrimitive.Content
+            ref={ref}
+            className={clsx(`${rootClass}-content`, className)}
+            asChild={asChild}
+            forceMount={forceMount}
+            role="alertdialog"
+            aria-modal={true}
+            aria-labelledby={titleId}
+            aria-describedby={descriptionId}
+            {...props}
+        >
             {children}
         </DialogPrimitive.Content>
     );

src/components/ui/AlertDialog/fragments/AlertDialogDescription.tsx

@@ -1,18 +1,63 @@
 'use client';
 
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext, useEffect, useRef } from 'react';
 import { AlertDialogContext } from '../contexts/AlertDialogContext';
+import Floater from '~/core/primitives/Floater';
 
 import Primitive from '~/core/primitives/Primitive';
 
 type AlertDialogDescriptionElement = React.ElementRef<typeof Primitive.p>;
 type PrimitivePProps = React.ComponentPropsWithoutRef<typeof Primitive.p>;
 
-export type AlertDialogDescriptionProps = PrimitivePProps & { className?: string };
+export type AlertDialogDescriptionProps = PrimitivePProps & {
+    className?: string;
+    asChild?: boolean;
+};
 
-const AlertDialogDescription = forwardRef<AlertDialogDescriptionElement, AlertDialogDescriptionProps>(({ children, className = '', ...props }, ref) => {
-    const { rootClass } = useContext(AlertDialogContext);
-    return <Primitive.p ref={ref} className={`${rootClass}-description ${className}`} {...props}>{children}</Primitive.p>;
+const AlertDialogDescription = forwardRef<AlertDialogDescriptionElement, AlertDialogDescriptionProps>(({
+    children,
+    className = '',
+    asChild = false,
+    id,
+    ...props
+}, ref) => {
+    const { rootClass, setDescriptionId, descriptionId: currentDescriptionId } = useContext(AlertDialogContext);
+    const generatedId = Floater.useId();
+    const descriptionId = id ?? generatedId;
+    const descriptionIdRef = useRef(descriptionId);
+    const latestCurrentDescriptionIdRef = useRef(currentDescriptionId);
+
+    // Update the latest current description ID ref whenever it changes
+    useEffect(() => {
+        latestCurrentDescriptionIdRef.current = currentDescriptionId;
+    }, [currentDescriptionId]);
+
+    useEffect(() => {
+        descriptionIdRef.current = descriptionId;
+        if (descriptionId) {
+            setDescriptionId(descriptionId);
+        }
+
+        // Cleanup: clear the descriptionId when this component unmounts
+        // Only clear if the stored id still matches to avoid clobbering other instances
+        return () => {
+            if (latestCurrentDescriptionIdRef.current === descriptionIdRef.current) {
+                setDescriptionId(undefined);
+            }
+        };
+    }, [descriptionId, setDescriptionId]);
+
+    return (
+        <Primitive.p
+            ref={ref}
+            id={descriptionId}
+            className={`${rootClass}-description ${className}`}
+            asChild={asChild}
+            {...props}
+        >
+            {children}
+        </Primitive.p>
+    );
 });
 
 AlertDialogDescription.displayName = 'AlertDialogDescription';

src/components/ui/AlertDialog/fragments/AlertDialogOverlay.tsx

@@ -8,14 +8,31 @@ import DialogPrimitive from '~/core/primitives/Dialog';
 type AlertDialogOverlayElement = React.ElementRef<typeof DialogPrimitive.Overlay>;
 type DialogPrimitiveOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
 
-type AlertDialogOverlayProps = DialogPrimitiveOverlayProps & {
+export type AlertDialogOverlayProps = DialogPrimitiveOverlayProps & {
     className?: string;
+    asChild?: boolean;
+    forceMount?: boolean;
+    children?: React.ReactNode;
 };
 
-const AlertDialogOverlay = forwardRef<AlertDialogOverlayElement, AlertDialogOverlayProps>(({ className = '', ...props }, ref) => {
+const AlertDialogOverlay = forwardRef<AlertDialogOverlayElement, AlertDialogOverlayProps>(({
+    className = '',
+    asChild = false,
+    forceMount = false,
+    children,
+    ...props
+}, ref) => {
     const { rootClass } = useContext(AlertDialogContext);
     return (
-        <DialogPrimitive.Overlay ref={ref} className={clsx(`${rootClass}-overlay`, className)} {...props}></DialogPrimitive.Overlay>
+        <DialogPrimitive.Overlay
+            ref={ref}
+            className={clsx(`${rootClass}-overlay`, className)}
+            asChild={asChild}
+            forceMount={forceMount}
+            {...props}
+        >
+            {children}
+        </DialogPrimitive.Overlay>
     );
 });
 

src/components/ui/AlertDialog/fragments/AlertDialogPortal.tsx

@@ -1,19 +1,27 @@
 'use client';
-import React, { forwardRef } from 'react';
+import React from 'react';
 import DialogPrimitive from '~/core/primitives/Dialog';
 
-type AlertDialogPortalElement = React.ElementRef<'div'>;
 type DialogPrimitivePortalProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
 
-export type AlertDialogPortalProps = DialogPrimitivePortalProps;
+export type AlertDialogPortalProps = DialogPrimitivePortalProps & {
+    container?: Element | null;
+    forceMount?: boolean;
+    keepMounted?: boolean;
+};
 
-const AlertDialogPortal = forwardRef<AlertDialogPortalElement, AlertDialogPortalProps>(({ children, ...props }, _ref) => {
+const AlertDialogPortal = ({
+    children,
+    ...props
+}: AlertDialogPortalProps) => {
     return (
-        <DialogPrimitive.Portal {...props}>
+        <DialogPrimitive.Portal
+            {...props}
+        >
             {children}
         </DialogPrimitive.Portal>
     );
-});
+};
 
 AlertDialogPortal.displayName = 'AlertDialogPortal';
 

src/components/ui/AlertDialog/fragments/AlertDialogRoot.tsx

@@ -1,27 +1,52 @@
 'use client';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { customClassSwitcher } from '~/core';
 import { AlertDialogContext } from '../contexts/AlertDialogContext';
 import { clsx } from 'clsx';
+import { useControllableState } from '~/core/hooks/useControllableState';
 
 import DialogPrimitive from '~/core/primitives/Dialog';
 
 type AlertDialogRootElement = React.ElementRef<typeof DialogPrimitive.Root>;
 type DialogPrimitiveRootProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
 
-export type AlertDialogRootProps = DialogPrimitiveRootProps & {
+export type AlertDialogRootProps = Omit<DialogPrimitiveRootProps, 'open' | 'onOpenChange'> & {
     customRootClass?: string;
     className?: string;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 };
 
 const COMPONENT_NAME = 'AlertDialog';
 
-const AlertDialogRoot = forwardRef<AlertDialogRootElement, AlertDialogRootProps>(({ children, className = '', customRootClass = '', open = false, ...props }, ref) => {
+const AlertDialogRoot = forwardRef<AlertDialogRootElement, AlertDialogRootProps>(({
+    children,
+    className = '',
+    customRootClass = '',
+    defaultOpen = false,
+    open,
+    onOpenChange,
+    ...props
+}, ref) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
-    const contextProps = { rootClass };
+    const [isOpen, setIsOpen] = useControllableState(open, defaultOpen, onOpenChange);
+    const [titleId, setTitleId] = useState<string | undefined>(undefined);
+    const [descriptionId, setDescriptionId] = useState<string | undefined>(undefined);
+
+    const contextProps = {
+        rootClass,
+        isOpen,
+        setIsOpen,
+        titleId,
+        descriptionId,
+        setTitleId,
+        setDescriptionId
+    };
+
     return (
-        <DialogPrimitive.Root open={open} className={clsx(rootClass, className)} {...props}>
+        <DialogPrimitive.Root open={isOpen} onOpenChange={setIsOpen} className={clsx(rootClass, className)} {...props}>
             <AlertDialogContext.Provider value={contextProps}>
                 <div ref={ref} className={clsx(rootClass, className)}>
                     {children}

src/components/ui/AlertDialog/fragments/AlertDialogTitle.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext, useEffect, useRef } from 'react';
 import { AlertDialogContext } from '../contexts/AlertDialogContext';
+import Floater from '~/core/primitives/Floater';
 
 import Primitive from '~/core/primitives/Primitive';
 
@@ -10,11 +11,53 @@ type PrimitiveH2Props = React.ComponentPropsWithoutRef<typeof Primitive.h2>;
 
 export type AlertDialogTitleProps = PrimitiveH2Props & {
     className?: string;
+    asChild?: boolean;
 };
 
-const AlertDialogTitle = forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(({ children, className = '', ...props }, ref) => {
-    const { rootClass } = useContext(AlertDialogContext);
-    return <Primitive.h2 ref={ref} className={`${rootClass}-title ${className}`} {...props}>{children}</Primitive.h2>;
+const AlertDialogTitle = forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(({
+    children,
+    className = '',
+    asChild = false,
+    id,
+    ...props
+}, ref) => {
+    const { rootClass, setTitleId, titleId: currentTitleId } = useContext(AlertDialogContext);
+    const generatedId = Floater.useId();
+    const titleId = id ?? generatedId;
+    const titleIdRef = useRef(titleId);
+    const latestCurrentTitleIdRef = useRef(currentTitleId);
+
+    // Update the latest current title ID ref whenever it changes
+    useEffect(() => {
+        latestCurrentTitleIdRef.current = currentTitleId;
+    }, [currentTitleId]);
+
+    useEffect(() => {
+        titleIdRef.current = titleId;
+        if (titleId) {
+            setTitleId(titleId);
+        }
+
+        // Cleanup: clear the titleId when this component unmounts
+        // Only clear if the stored id still matches to avoid clobbering other instances
+        return () => {
+            if (latestCurrentTitleIdRef.current === titleIdRef.current) {
+                setTitleId(undefined);
+            }
+        };
+    }, [titleId, setTitleId]);
+
+    return (
+        <Primitive.h2
+            ref={ref}
+            id={titleId}
+            className={`${rootClass}-title ${className}`}
+            asChild={asChild}
+            {...props}
+        >
+            {children}
+        </Primitive.h2>
+    );
 });
 
 AlertDialogTitle.displayName = 'AlertDialogTitle';

src/components/ui/AlertDialog/fragments/AlertDialogTrigger.tsx

@@ -10,16 +10,33 @@ type DialogPrimitiveTriggerProps = React.ComponentPropsWithoutRef<typeof DialogP
 
 export type AlertDialogTriggerProps = DialogPrimitiveTriggerProps & {
     className?: string;
+    disabled?: boolean;
 };
 
-const AlertDialogTrigger = forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(({ children, asChild, className = '', ...props }, ref) => {
-    const { rootClass } = useContext(AlertDialogContext);
+const AlertDialogTrigger = forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(({
+    children,
+    asChild,
+    className = '',
+    disabled = false,
+    ...props
+}, ref) => {
+    const { rootClass, isOpen } = useContext(AlertDialogContext);
+
+    const dataState = isOpen ? 'open' : 'closed';
+    const dataDisabled = disabled ? '' : undefined;
 
     return (
-        <DialogPrimitive.Trigger ref={ref} className={clsx(`${rootClass}-trigger`, className)} asChild={asChild} {...props}>
+        <DialogPrimitive.Trigger
+            ref={ref}
+            className={clsx(`${rootClass}-trigger`, className)}
+            asChild={asChild}
+            disabled={disabled}
+            data-state={dataState}
+            data-disabled={dataDisabled}
+            {...props}
+        >
             {children}
         </DialogPrimitive.Trigger>
-
     );
 });