@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/Dialog/Dialog.test.tsx

@@ -14,20 +14,20 @@ import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import '@testing-library/jest-dom/vitest';
-import { 
-  Dialog, 
-  DialogTrigger, 
-  DialogContent, 
-  DialogHeader, 
-  DialogBody, 
-  DialogFooter, 
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
   DialogClose,
   DialogTitle,
-  DialogDescription
+  DialogDescription,
 } from './Dialog';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+import { waitForDialog, setupDialogEnv } from './Dialog.test-utils';
 
-// Mock logger - must define before other mocks
 const mockLogger = {
   debug: vi.fn(),
   info: vi.fn(),
@@ -39,33 +39,6 @@ vi.mock('../../utils/core/logger', () => ({
   createLogger: () => mockLogger,
 }));
 
-// Helper function to wait for dialog to be accessible
-// Native dialog elements are only accessible after showModal() completes
-// In test environments, we use querySelector as fallback since getByRole may not work
-// Note: In test environments (jsdom), dialog.open may not be set even when dialog is rendered
-const waitForDialog = async (): Promise<HTMLElement> => {
-  return await waitFor(
-    () => {
-      // Try getByRole first (works in browsers with full dialog support)
-      try {
-        const dialog = screen.getByRole('dialog');
-        expect(dialog).toBeInTheDocument();
-        return dialog;
-      } catch (_e) {
-        // Fallback: use querySelector for test environments that don't fully support dialog accessibility
-        const dialog = document.querySelector('dialog[role="dialog"]') as HTMLDialogElement;
-        if (!dialog) {
-          throw new Error('Dialog not found in DOM');
-        }
-        // In test environments, dialog.open may not be set even when dialog is rendered
-        // Just check that dialog exists in DOM - that's sufficient for testing
-        return dialog;
-      }
-    },
-    { timeout: 3000 }
-  );
-};
-
 // Mock lodash debounce to avoid timing issues in tests
 vi.mock('lodash', () => ({
   debounce: (fn: Function) => fn
@@ -106,24 +79,7 @@ vi.mock('../../hooks/useFocusTrap', () => ({
 describe('Dialog Component System', () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    // Mock console methods to avoid noise in tests
-    vi.spyOn(console, 'log').mockImplementation(() => {});
-    vi.spyOn(console, 'warn').mockImplementation(() => {});
-    
-    // Mock showModal for dialog elements (needed for test environments)
-    // Override the prototype methods to ensure they're always available
-    if (typeof HTMLDialogElement !== 'undefined') {
-      HTMLDialogElement.prototype.showModal = vi.fn(function(this: HTMLDialogElement) {
-        this.setAttribute('open', '');
-        this.open = true;
-        this.dispatchEvent(new Event('show', { bubbles: true }));
-      });
-      HTMLDialogElement.prototype.close = vi.fn(function(this: HTMLDialogElement) {
-        this.removeAttribute('open');
-        this.open = false;
-        this.dispatchEvent(new Event('close', { bubbles: true }));
-      });
-    }
+    setupDialogEnv();
   });
 
   describe('Dialog Root Component', () => {
@@ -1048,7 +1004,7 @@ describe('Dialog Component System', () => {
 
     it('renders multiple dialog triggers independently', () => {
       renderWithProviders(
-        <div>
+        <>
           <Dialog>
             <DialogTrigger asChild>
               <button>Open Dialog 1</button>
@@ -1069,7 +1025,7 @@ describe('Dialog Component System', () => {
               </DialogHeader>
             </DialogContent>
           </Dialog>
-        </div>
+        </>
       );
       
       expect(screen.getByRole('button', { name: 'Open Dialog 1' })).toBeInTheDocument();
@@ -1750,36 +1706,6 @@ describe('Dialog Component System', () => {
     });
   });
 
-  describe('DialogOverlay Component', () => {
-    it('does not render (native dialog provides backdrop automatically)', async () => {
-      // DialogOverlay component returns null because native <dialog> element
-      // provides ::backdrop automatically via CSS
-      // This test verifies that dialogs work correctly without DialogOverlay
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <Dialog>
-          <DialogTrigger asChild>
-            <button>Open Dialog</button>
-          </DialogTrigger>
-          <DialogContent title="Test Dialog">
-            <DialogHeader>
-              <h2>Test Dialog</h2>
-            </DialogHeader>
-          </DialogContent>
-        </Dialog>
-      );
-      
-      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
-      await waitForDialog();
-      
-      // Dialog should render and function correctly without DialogOverlay
-      // (backdrop is provided by native dialog element)
-      const dialog = document.querySelector('dialog[role="dialog"]');
-      expect(dialog).toBeInTheDocument();
-    });
-  });
-
   describe('Context Error Handling', () => {
     it('throws error when DialogTrigger is used outside Dialog', () => {
       // Suppress console.error for this test
@@ -2585,11 +2511,11 @@ describe('Dialog Component System', () => {
   });
 
   describe('DialogTrigger Edge Cases', () => {
-    it('handles asChild with non-React element gracefully', () => {
+    it('handles asChild with non-button element gracefully', () => {
       renderWithProviders(
         <Dialog>
           <DialogTrigger asChild>
-            <div>Not a button</div>
+            <span>Not a button</span>
           </DialogTrigger>
           <DialogContent title="Test Dialog">
             <DialogHeader>
@@ -2599,7 +2525,6 @@ describe('Dialog Component System', () => {
         </Dialog>
       );
       
-      // Should render the div
       expect(screen.getByText('Not a button')).toBeInTheDocument();
     });
 
@@ -2813,4 +2738,886 @@ describe('Dialog Component System', () => {
       unmountFirst();
     });
   });
+
+  describe('Ref Forwarding', () => {
+    it('forwards ref correctly to dialog element', async () => {
+      const user = userEvent.setup();
+      const ref = React.createRef<HTMLDialogElement>();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent ref={ref} title="Test Dialog">
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      const dialog = await waitForDialog();
+
+      expect(ref.current).toBeInstanceOf(HTMLDialogElement);
+      expect(ref.current).toBe(dialog);
+    });
+
+    it('ref persists when dialog is closed', async () => {
+      const user = userEvent.setup();
+      const ref = React.createRef<HTMLDialogElement>();
+      
+      const { rerender } = renderWithProviders(
+        <Dialog open={true}>
+          <DialogContent ref={ref} title="Test Dialog">
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await waitForDialog();
+      expect(ref.current).toBeInstanceOf(HTMLDialogElement);
+
+      // Close dialog
+      rerender(
+        <Dialog open={false}>
+          <DialogContent ref={ref} title="Test Dialog">
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      });
+
+      // React refs persist even when element is removed from DOM
+      // The ref.current will still point to the element until component unmounts
+      // This is expected React behavior
+      if (ref.current) {
+        expect(ref.current).toBeInstanceOf(HTMLDialogElement);
+      }
+    });
+
+    it('handles ref callback function', async () => {
+      const user = userEvent.setup();
+      let refElement: HTMLDialogElement | null = null;
+      const refCallback = (node: HTMLDialogElement | null) => {
+        refElement = node;
+      };
+
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent ref={refCallback} title="Test Dialog">
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      await waitForDialog();
+
+      expect(refElement).toBeInstanceOf(HTMLDialogElement);
+    });
+  });
+
+  describe('DialogContent Props Spreading', () => {
+    it('spreads additional props to dialog element', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent 
+            title="Test Dialog"
+            data-testid="custom-dialog"
+            data-custom-attr="custom-value"
+          >
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      const dialog = await waitForDialog();
+
+      expect(dialog).toHaveAttribute('data-testid', 'custom-dialog');
+      expect(dialog).toHaveAttribute('data-custom-attr', 'custom-value');
+    });
+
+    it('merges custom style with smart dimensions', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent
+            title="Test Dialog"
+            maxHeightPercent={80}
+          >
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      const dialog = await waitForDialog();
+
+      expect(dialog).toHaveStyle({ maxHeight: '80vh' });
+      const style = dialog.getAttribute('style');
+      expect(style).toBeTruthy();
+      expect(style).toContain('max-height');
+    });
+  });
+
+  describe('DialogBody Flex Container Detection Edge Cases', () => {
+    it('handles flex container detection when dialog is closed', () => {
+      renderWithProviders(
+        <Dialog open={false}>
+          <DialogContent title="Test Dialog" maxHeightPercent={80}>
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+            <DialogBody>
+              <p>Content</p>
+            </DialogBody>
+          </DialogContent>
+        </Dialog>
+      );
+
+      // Should not crash when dialog is closed
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
+    it('handles flex container detection timeout cleanup', async () => {
+      const user = userEvent.setup();
+      const { unmount } = renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Test Dialog" maxHeightPercent={80}>
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+            <DialogBody>
+              <p>Content</p>
+            </DialogBody>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      await waitForDialog();
+
+      // Unmount should clean up timeouts
+      unmount();
+      
+      // Should not crash
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('DialogTitle and DialogDescription Ref Forwarding', () => {
+    it('forwards ref correctly to DialogTitle', async () => {
+      const user = userEvent.setup();
+      const ref = React.createRef<HTMLHeadingElement>();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Test Dialog">
+            <DialogHeader>
+              <DialogTitle ref={ref}>Custom Title</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      await waitForDialog();
+
+      expect(ref.current).toBeInstanceOf(HTMLHeadingElement);
+      expect(ref.current?.tagName).toBe('H2');
+    });
+
+    it('forwards ref correctly to DialogDescription', async () => {
+      const user = userEvent.setup();
+      const ref = React.createRef<HTMLParagraphElement>();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Test Dialog">
+            <DialogHeader>
+              <DialogTitle>Test Dialog</DialogTitle>
+              <DialogDescription ref={ref}>Custom Description</DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      await waitForDialog();
+
+      expect(ref.current).toBeInstanceOf(HTMLParagraphElement);
+      expect(ref.current?.tagName).toBe('P');
+    });
+  });
+
+  describe('DialogHeader and DialogFooter Sticky Behavior', () => {
+    it('applies sticky styles correctly when enableScrolling is true', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Test Dialog" enableScrolling>
+            <DialogHeader sticky>
+              <h2>Sticky Header</h2>
+            </DialogHeader>
+            <DialogBody>
+              <p>Content</p>
+            </DialogBody>
+            <DialogFooter sticky>
+              <button>Save</button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      await waitForDialog();
+
+      const header = document.querySelector('dialog header');
+      const footer = document.querySelector('dialog footer');
+
+      expect(header).toHaveClass('sticky', 'top-0');
+      expect(footer).toHaveClass('sticky', 'bottom-0');
+    });
+
+    it('does not apply sticky styles when sticky prop is false', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Test Dialog" enableScrolling>
+            <DialogHeader sticky={false}>
+              <h2>Non-Sticky Header</h2>
+            </DialogHeader>
+            <DialogBody>
+              <p>Content</p>
+            </DialogBody>
+            <DialogFooter sticky={false}>
+              <button>Save</button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      await waitForDialog();
+
+      const header = document.querySelector('dialog header');
+      const footer = document.querySelector('dialog footer');
+
+      expect(header).not.toHaveClass('sticky');
+      expect(footer).not.toHaveClass('sticky');
+    });
+  });
+
+  describe('DialogContent Size Variants - Extended', () => {
+    it('applies correct classes for full size variant', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent size="full" title="Full Dialog">
+            <DialogHeader>
+              <h2>Full Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      const dialog = await waitForDialog();
+
+      expect(dialog).toHaveClass('max-w-full', 'size-full');
+    });
+
+    it('applies correct classes for auto size variant', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent size="auto" title="Auto Dialog">
+            <DialogHeader>
+              <h2>Auto Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      const dialog = await waitForDialog();
+
+      // Auto size applies w-fit and max-w-[90vw] sm:max-w-[80vw] classes
+      expect(dialog).toHaveClass('w-fit');
+      expect(dialog).toHaveClass('min-w-0');
+    });
+  });
+
+  describe('Dialog Persistence - Extended Scenarios', () => {
+    beforeEach(() => {
+      sessionStorage.clear();
+    });
+
+    it('handles persistence when title changes', async () => {
+      const user = userEvent.setup();
+      const { useSessionDraft } = await import('../../hooks/useSessionDraft');
+      const mockSetState = vi.fn();
+      
+      vi.mocked(useSessionDraft).mockReturnValue({
+        state: false,
+        setState: mockSetState,
+        clearDraft: vi.fn(),
+        wasRestored: false,
+        saveImmediately: vi.fn(),
+      });
+
+      const { rerender } = renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Original Title" persistOpenState={true}>
+            <DialogHeader>
+              <h2>Original Title</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      await waitForDialog();
+
+      // Change title
+      rerender(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="New Title" persistOpenState={true}>
+            <DialogHeader>
+              <h2>New Title</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      // Dialog should handle title change gracefully
+      await waitFor(() => {
+        const dialog = document.querySelector('dialog[role="dialog"]');
+        expect(dialog).toHaveAttribute('title', 'New Title');
+      });
+    });
+
+    it('handles persistence when description changes', async () => {
+      const user = userEvent.setup();
+      const { useSessionDraft } = await import('../../hooks/useSessionDraft');
+      
+      vi.mocked(useSessionDraft).mockReturnValue({
+        state: false,
+        setState: vi.fn(),
+        clearDraft: vi.fn(),
+        wasRestored: false,
+        saveImmediately: vi.fn(),
+      });
+
+      const { rerender } = renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Test Dialog" description="Original Description" persistOpenState={true}>
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      await waitForDialog();
+
+      // Change description
+      rerender(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Test Dialog" description="New Description" persistOpenState={true}>
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      // Dialog should handle description change gracefully
+      await waitFor(() => {
+        const dialog = document.querySelector('dialog[role="dialog"]');
+        expect(dialog).toHaveAttribute('aria-description', 'New Description');
+      });
+    });
+  });
+
+  describe('Dialog Lock Mechanism - Extended', () => {
+    beforeEach(() => {
+      sessionStorage.clear();
+    });
+
+    it('handles lock acquisition when another dialog is closing', async () => {
+      const user = userEvent.setup();
+      
+      // First dialog
+      const { unmount: unmountFirst } = renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog 1</button>
+          </DialogTrigger>
+          <DialogContent title="Dialog 1" persistOpenState={true}>
+            <DialogHeader>
+              <h2>Dialog 1</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog 1' }));
+      await waitForDialog();
+
+      // Close first dialog
+      const dialog1 = document.querySelector('dialog[role="dialog"]');
+      const closeIcon1 = dialog1?.querySelector('[data-testid="lucide-x"]');
+      const closeButton1 = closeIcon1?.closest('button') as HTMLButtonElement;
+      await user.click(closeButton1);
+
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      });
+
+      unmountFirst();
+
+      // Second dialog should be able to acquire lock
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog 2</button>
+          </DialogTrigger>
+          <DialogContent title="Dialog 2" persistOpenState={true}>
+            <DialogHeader>
+              <h2>Dialog 2</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog 2' }));
+      await waitForDialog();
+
+      // Second dialog should open successfully
+      const dialog2 = document.querySelector('dialog[role="dialog"]');
+      expect(dialog2).toBeInTheDocument();
+    });
+  });
+
+  describe('DialogContent Conditional Rendering', () => {
+    it('does not render when open is false', () => {
+      renderWithProviders(
+        <Dialog open={false}>
+          <DialogContent title="Test Dialog">
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
+    it('does not render when lock is not acquired', async () => {
+      const user = userEvent.setup();
+      
+      // Set a lock for another dialog
+      sessionStorage.setItem('pace-core:dialog:lock', JSON.stringify({
+        key: 'other-dialog-key',
+        timestamp: Date.now(),
+      }));
+
+      // Create a fake dialog in DOM to simulate another dialog being open
+      const fakeDialog = document.createElement('dialog');
+      fakeDialog.setAttribute('data-persistence-key', 'other-dialog-key');
+      fakeDialog.setAttribute('open', '');
+      document.body.appendChild(fakeDialog);
+
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Test Dialog" persistOpenState={true}>
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+
+      // Dialog should not render (lock not acquired)
+      await waitFor(() => {
+        const dialogs = document.querySelectorAll('dialog[role="dialog"]');
+        // Should only have the fake dialog, not the new one
+        expect(dialogs.length).toBeLessThanOrEqual(1);
+      }, { timeout: 1000 });
+
+      // Cleanup
+      document.body.removeChild(fakeDialog);
+    });
+  });
+
+  describe('DialogClose Context Integration', () => {
+    it('uses markClosedByUser from DialogContext when available', async () => {
+      const user = userEvent.setup();
+      const { useSessionDraft } = await import('../../hooks/useSessionDraft');
+      const mockClearDraft = vi.fn();
+      
+      vi.mocked(useSessionDraft).mockReturnValue({
+        state: false,
+        setState: vi.fn(),
+        clearDraft: mockClearDraft,
+        wasRestored: false,
+        saveImmediately: vi.fn(),
+      });
+
+      renderWithProviders(
+        <Dialog defaultOpen={true}>
+          <DialogContent title="Test Dialog" persistOpenState={true}>
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+            <DialogFooter>
+              <DialogClose />
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await waitForDialog();
+
+      // Close via DialogClose button
+      const dialog = document.querySelector('dialog[role="dialog"]');
+      const closeIcon = dialog?.querySelector('[data-testid="lucide-x"]');
+      const closeButton = closeIcon?.closest('button') as HTMLButtonElement;
+      await user.click(closeButton);
+
+      await waitFor(() => {
+        expect(mockClearDraft).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('DialogBody HTML Content Edge Cases', () => {
+    it('handles HTML content that becomes empty after sanitization', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Test Dialog">
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+            <DialogBody
+              htmlContent="<script>alert('xss')</script>"
+              allowHtml={true}
+            >
+              <p>Fallback Content</p>
+            </DialogBody>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      await waitForDialog();
+
+      // Should show fallback message or children
+      const body = document.querySelector('dialog main');
+      expect(body).toBeInTheDocument();
+    });
+
+    it('handles HTML content with only unsafe elements', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Test Dialog">
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+            <DialogBody
+              htmlContent="<script>alert('xss')</script><iframe src='evil.com'></iframe>"
+              allowHtml={true}
+            >
+              <p>Fallback Content</p>
+            </DialogBody>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      await waitForDialog();
+
+      // Should show fallback message
+      const body = document.querySelector('dialog main');
+      expect(body).toBeInTheDocument();
+    });
+  });
+
+  describe('DialogPortal Mount State', () => {
+    it('handles portal mount state correctly', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Test Dialog">
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      // Portal should mount after initial render
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      await waitForDialog();
+
+      // Dialog should be portaled to document.body
+      const dialog = document.querySelector('dialog[role="dialog"]');
+      expect(dialog?.parentElement).toBe(document.body);
+    });
+  });
+
+  describe('DialogContent Title and Description Updates', () => {
+    it('updates title attribute when title prop changes', async () => {
+      const user = userEvent.setup();
+      const { rerender } = renderWithProviders(
+        <Dialog open={true}>
+          <DialogContent title="Original Title">
+            <DialogHeader>
+              <h2>Original Title</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await waitForDialog();
+      let dialog = document.querySelector('dialog[role="dialog"]');
+      expect(dialog).toHaveAttribute('title', 'Original Title');
+
+      // Update title
+      rerender(
+        <Dialog open={true}>
+          <DialogContent title="Updated Title">
+            <DialogHeader>
+              <h2>Updated Title</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await waitFor(() => {
+        dialog = document.querySelector('dialog[role="dialog"]');
+        expect(dialog).toHaveAttribute('title', 'Updated Title');
+      });
+    });
+
+    it('updates aria-description when description prop changes', async () => {
+      const user = userEvent.setup();
+      const { rerender } = renderWithProviders(
+        <Dialog open={true}>
+          <DialogContent title="Test Dialog" description="Original Description">
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await waitForDialog();
+      let dialog = document.querySelector('dialog[role="dialog"]');
+      expect(dialog).toHaveAttribute('aria-description', 'Original Description');
+
+      // Update description
+      rerender(
+        <Dialog open={true}>
+          <DialogContent title="Test Dialog" description="Updated Description">
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await waitFor(() => {
+        dialog = document.querySelector('dialog[role="dialog"]');
+        expect(dialog).toHaveAttribute('aria-description', 'Updated Description');
+      });
+    });
+  });
+
+  describe('DialogContent Size and Dimension Combinations', () => {
+    it('handles size with custom maxWidth override', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent size="md" maxWidth="1200px" title="Test Dialog">
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      const dialog = await waitForDialog();
+
+      // Custom maxWidth should override size class
+      expect(dialog).toHaveStyle({ maxWidth: '1200px' });
+    });
+
+    it('handles size with custom maxHeight override', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent size="lg" maxHeight="600px" title="Test Dialog">
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      const dialog = await waitForDialog();
+
+      expect(dialog).toHaveStyle({ maxHeight: '600px' });
+    });
+  });
+
+  describe('DialogContent enableScrolling Behavior', () => {
+    it('applies flex layout when enableScrolling is true', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Test Dialog" enableScrolling>
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+            <DialogBody>
+              <p>Content</p>
+            </DialogBody>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      const dialog = await waitForDialog();
+
+      expect(dialog).toHaveClass('flex', 'flex-col');
+    });
+
+    it('applies default maxHeightPercent when enableScrolling is true', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger asChild>
+            <button>Open Dialog</button>
+          </DialogTrigger>
+          <DialogContent title="Test Dialog" enableScrolling>
+            <DialogHeader>
+              <h2>Test Dialog</h2>
+            </DialogHeader>
+            <DialogBody>
+              <p>Content</p>
+            </DialogBody>
+          </DialogContent>
+        </Dialog>
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Open Dialog' }));
+      const dialog = await waitForDialog();
+
+      // Should have default 80vh maxHeight when enableScrolling is true
+      expect(dialog).toHaveStyle({ maxHeight: '80vh' });
+    });
+  });
 });