@jmruthers/pace-core 0.2.4

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

@@ -0,0 +1,1373 @@
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { renderWithProviders } from '../../../__tests__/shared';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+  type DialogSize,
+  DialogBody,
+} from '../Dialog';
+import { renderWithProviders, testComponentRendering, testComponentAccessibility } from '../../../__tests__/shared';
+
+// Mock Radix UI Dialog primitives
+vi.mock('@radix-ui/react-dialog', () => ({
+  Root: ({ children, open, onOpenChange }: { children: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void }) => (
+    <div data-testid="dialog-root" data-open={open === undefined ? 'false' : String(open)}>
+      {children}
+    </div>
+  ),
+  Trigger: React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(({ children, ...props }, ref) => (
+    <button ref={ref} data-testid="dialog-trigger" {...props}>
+      {children}
+    </button>
+  )),
+  Portal: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="dialog-portal">{children}</div>
+  ),
+  Overlay: React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
+    const baseClasses = 'fixed inset-0 z-50 bg-main-950/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0';
+    const finalClassName = className ? `${baseClasses} ${className}` : baseClasses;
+    return <div ref={ref} className={finalClassName} data-testid="dialog-overlay" {...props} />;
+  }),
+  Content: React.forwardRef<HTMLDialogElement, React.HTMLAttributes<HTMLDialogElement> & {
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onPointerDownOutside?: (event: Event) => void;
+    asChild?: boolean;
+  }>(({ children, className, onEscapeKeyDown, onPointerDownOutside, asChild, ...props }, ref) => {
+    // Handle asChild pattern for semantic HTML implementation
+    if (asChild && React.isValidElement(children)) {
+      const child = React.Children.only(children) as React.ReactElement<any>;
+      const mergedClassName = [child.props.className, className].filter(Boolean).join(' ');
+      return React.cloneElement(child, {
+        ...child.props,
+        ...props,
+        className: mergedClassName,
+        ref,
+        "data-testid": "dialog-content",
+        style: { ...child.props.style, ...props.style },
+      });
+    }
+    
+    return (
+      <dialog ref={ref} className={className} data-testid="dialog-content" {...props}>
+        {children}
+      </dialog>
+    );
+  }),
+  Title: React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ children, className, ...props }, ref) => (
+    <h2 ref={ref} className={className} data-testid="dialog-title" {...props}>
+      {children}
+    </h2>
+  )),
+  Description: React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ children, className, ...props }, ref) => (
+    <p ref={ref} className={className} data-testid="dialog-description" {...props}>
+      {children}
+    </p>
+  )),
+  Close: React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(({ children, className, ...props }, ref) => (
+    <button ref={ref} className={className} data-testid="dialog-close" {...props}>
+      {children}
+    </button>
+  )),
+}));
+
+// Mock lucide-react X icon
+vi.mock('lucide-react', () => ({
+  X: ({ className }: { className?: string }) => (
+    <svg className={className} data-testid="close-icon" />
+  ),
+}));
+
+describe('Dialog Component', () => {
+  describe('Dialog Root', () => {
+    it('renders with default state', () => {
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger>Open Dialog</DialogTrigger>
+          <DialogContent>Dialog content</DialogContent>
+        </Dialog>
+      );
+      
+      expect(screen.getByTestId('dialog-root')).toBeInTheDocument();
+      expect(screen.getByTestId('dialog-root')).toHaveAttribute('data-open', 'false');
+    });
+
+    it('renders with open state', () => {
+      renderWithProviders(
+        <Dialog open>
+          <DialogTrigger>Open Dialog</DialogTrigger>
+          <DialogContent>Dialog content</DialogContent>
+        </Dialog>
+      );
+      
+      expect(screen.getByTestId('dialog-root')).toHaveAttribute('data-open', 'true');
+    });
+
+    it('calls onOpenChange when state changes', () => {
+      const handleOpenChange = vi.fn();
+      renderWithProviders(
+        <Dialog onOpenChange={handleOpenChange}>
+          <DialogTrigger>Open Dialog</DialogTrigger>
+          <DialogContent>Dialog content</DialogContent>
+        </Dialog>
+      );
+      
+      // This would be tested with actual dialog interactions
+      expect(handleOpenChange).toBeDefined();
+    });
+  });
+
+  describe('DialogTrigger', () => {
+    it('renders trigger button', () => {
+      renderWithProviders(<DialogTrigger>Open Dialog</DialogTrigger>);
+      const trigger = screen.getByTestId('dialog-trigger');
+      expect(trigger).toBeInTheDocument();
+      expect(trigger).toHaveTextContent('Open Dialog');
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<DialogTrigger className="custom-trigger">Open</DialogTrigger>);
+      const trigger = screen.getByTestId('dialog-trigger');
+      expect(trigger).toHaveClass('custom-trigger');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      renderWithProviders(<DialogTrigger ref={ref}>Open</DialogTrigger>);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('spreads additional props', () => {
+      renderWithProviders(<DialogTrigger data-testid="custom-trigger" aria-label="Open dialog">Open</DialogTrigger>);
+      const trigger = screen.getByTestId('custom-trigger');
+      expect(trigger).toHaveAttribute('aria-label', 'Open dialog');
+    });
+  });
+
+  describe('DialogContent', () => {
+    it('renders content with portal and overlay', () => {
+      renderWithProviders(<DialogContent>Dialog content</DialogContent>);
+      
+      expect(screen.getByTestId('dialog-portal')).toBeInTheDocument();
+      expect(screen.getByTestId('dialog-overlay')).toBeInTheDocument();
+      expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
+      expect(screen.getByText('Dialog content')).toBeInTheDocument();
+    });
+
+    it('applies default styling with md size', () => {
+      renderWithProviders(<DialogContent>Content</DialogContent>);
+      const content = screen.getByTestId('dialog-content');
+      expect(content).toHaveClass(
+        'fixed',
+        'z-50',
+        'duration-200',
+        'data-[state=open]:animate-in',
+        'data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0',
+        'data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95',
+        'data-[state=open]:zoom-in-95',
+        'data-[state=closed]:slide-out-to-left-1/2',
+        'data-[state=closed]:slide-out-to-top-[48%]',
+        'data-[state=open]:slide-in-from-left-1/2',
+        'data-[state=open]:slide-in-from-top-[48%]',
+        'sm:rounded-lg',
+        'm-0',
+        'max-h-none',
+        'w-auto',
+        'h-auto',
+        'outline-none',
+        'border',
+        'bg-background',
+        'shadow-lg',
+        'grid',
+        'gap-4',
+        'p-6',
+        'max-w-md'
+      );
+    });
+
+    it('applies size variant classes', () => {
+      const sizes: DialogSize[] = ['sm', 'md', 'lg', 'xl', 'full'];
+      const expectedClasses = ['max-w-sm', 'max-w-md', 'max-w-lg', 'max-w-xl', 'max-w-full'];
+      
+      sizes.forEach((size, index) => {
+        const { unmount } = renderWithProviders(<DialogContent size={size}>Content</DialogContent>);
+        const content = screen.getByTestId('dialog-content');
+        expect(content).toHaveClass(expectedClasses[index]);
+        unmount();
+      });
+    });
+
+    it('applies full size special styling', () => {
+      renderWithProviders(<DialogContent size="full">Content</DialogContent>);
+      const content = screen.getByTestId('dialog-content');
+      expect(content).toHaveClass(
+        'fixed',
+        'z-50',
+        'duration-200',
+        'data-[state=open]:animate-in',
+        'data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0',
+        'data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95',
+        'data-[state=open]:zoom-in-95',
+        'data-[state=closed]:slide-out-to-left-1/2',
+        'data-[state=closed]:slide-out-to-top-[48%]',
+        'data-[state=open]:slide-in-from-left-1/2',
+        'data-[state=open]:slide-in-from-top-[48%]',
+        'm-0',
+        'max-h-none',
+        'w-auto',
+        'outline-none',
+        'border',
+        'bg-background',
+        'shadow-lg',
+        'max-w-full',
+        'grid',
+        'gap-4',
+        'p-6',
+        'sm:left-[50%]',
+        'sm:top-[50%]',
+        'sm:translate-x-[-50%]',
+        'sm:translate-y-[-50%]',
+        'left-0',
+        'top-0',
+        'translate-x-0',
+        'translate-y-0',
+        'h-full',
+        'rounded-none',
+        'sm:h-auto',
+        'sm:rounded-lg'
+      );
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<DialogContent className="custom-content">Content</DialogContent>);
+      const content = screen.getByTestId('dialog-content');
+      expect(content).toHaveClass('custom-content');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      renderWithProviders(<DialogContent ref={ref}>Content</DialogContent>);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('has correct role', () => {
+      renderWithProviders(<DialogContent>Content</DialogContent>);
+      const content = screen.getByTestId('dialog-content');
+      expect(content).toBeInTheDocument();
+      expect(content.tagName.toLowerCase()).toBe('dialog');
+    });
+
+    it('includes close button by default', () => {
+      renderWithProviders(<DialogContent>Content</DialogContent>);
+      const closeButton = screen.getByTestId('dialog-close');
+      expect(closeButton).toBeInTheDocument();
+      expect(closeButton).toHaveTextContent('Close');
+    });
+
+    it('hides close button when showCloseButton is false', () => {
+      renderWithProviders(<DialogContent showCloseButton={false}>Content</DialogContent>);
+      const closeButton = screen.queryByTestId('dialog-close');
+      expect(closeButton).not.toBeInTheDocument();
+    });
+
+    it('applies custom overlay className', () => {
+      renderWithProviders(<DialogContent overlayClassName="custom-overlay">Content</DialogContent>);
+      const overlay = screen.getByTestId('dialog-overlay');
+      expect(overlay).toHaveClass('custom-overlay');
+    });
+
+    it('handles preventCloseOnEscape prop', () => {
+      const mockPreventDefault = vi.fn();
+      const mockKeyboardEvent = { preventDefault: mockPreventDefault } as unknown as KeyboardEvent;
+      
+      renderWithProviders(<DialogContent preventCloseOnEscape>Content</DialogContent>);
+      
+      // The component should be set up to prevent escape, but testing the actual behavior
+      // would require more complex mocking of the Radix UI event system
+      expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
+    });
+
+    it('handles preventCloseOnOutsideClick prop', () => {
+      const mockPreventDefault = vi.fn();
+      const mockEvent = { preventDefault: mockPreventDefault } as unknown as Event;
+      
+      renderWithProviders(<DialogContent preventCloseOnOutsideClick>Content</DialogContent>);
+      
+      // The component should be set up to prevent outside clicks, but testing the actual behavior
+      // would require more complex mocking of the Radix UI event system
+      expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
+    });
+  });
+
+  describe('DialogOverlay', () => {
+    it('renders with default styling', () => {
+      renderWithProviders(<DialogContent>Content</DialogContent>);
+      const overlay = screen.getByTestId('dialog-overlay');
+      expect(overlay).toHaveClass(
+        'fixed',
+        'inset-0',
+        'z-50',
+        'bg-main-950/80',
+        'data-[state=open]:animate-in',
+        'data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0',
+        'data-[state=open]:fade-in-0'
+      );
+    });
+
+    it('applies custom className via overlayClassName', () => {
+      renderWithProviders(<DialogContent overlayClassName="custom-overlay-class">Content</DialogContent>);
+      const overlay = screen.getByTestId('dialog-overlay');
+      expect(overlay).toHaveClass('custom-overlay-class');
+    });
+  });
+
+  describe('DialogHeader', () => {
+    it('renders header with default styling', () => {
+      renderWithProviders(<DialogHeader>Header content</DialogHeader>);
+      const header = screen.getByText('Header content');
+      expect(header).toBeInTheDocument();
+      expect(header).toHaveClass(
+        'flex',
+        'flex-col',
+        'space-y-1.5',
+        'text-center',
+        'sm:text-left'
+      );
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<DialogHeader className="custom-header">Header</DialogHeader>);
+      const header = screen.getByText('Header');
+      expect(header).toHaveClass('custom-header');
+    });
+
+    it('spreads additional props', () => {
+      renderWithProviders(<DialogHeader data-testid="header" aria-label="Dialog header">Header</DialogHeader>);
+      const header = screen.getByTestId('header');
+      expect(header).toHaveAttribute('aria-label', 'Dialog header');
+    });
+  });
+
+  describe('DialogFooter', () => {
+    it('renders footer with default styling', () => {
+      renderWithProviders(<DialogFooter>Footer content</DialogFooter>);
+      const footer = screen.getByText('Footer content');
+      expect(footer).toBeInTheDocument();
+      expect(footer).toHaveClass(
+        'flex',
+        'flex-col-reverse',
+        'sm:flex-row',
+        'sm:justify-end',
+        'sm:space-x-2'
+      );
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<DialogFooter className="custom-footer">Footer</DialogFooter>);
+      const footer = screen.getByText('Footer');
+      expect(footer).toHaveClass('custom-footer');
+    });
+
+    it('spreads additional props', () => {
+      renderWithProviders(<DialogFooter data-testid="footer" aria-label="Dialog footer">Footer</DialogFooter>);
+      const footer = screen.getByTestId('footer');
+      expect(footer).toHaveAttribute('aria-label', 'Dialog footer');
+    });
+  });
+
+  describe('DialogTitle', () => {
+    it('renders title with default styling', () => {
+      renderWithProviders(<DialogTitle>Title content</DialogTitle>);
+      const title = screen.getByTestId('dialog-title');
+      expect(title).toBeInTheDocument();
+      expect(title).toHaveTextContent('Title content');
+      expect(title).toHaveClass(
+        'text-lg',
+        'font-semibold',
+        'leading-none',
+        'tracking-tight'
+      );
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<DialogTitle className="custom-title">Title</DialogTitle>);
+      const title = screen.getByTestId('dialog-title');
+      expect(title).toHaveClass('custom-title');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      renderWithProviders(<DialogTitle ref={ref}>Title</DialogTitle>);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('spreads additional props', () => {
+      renderWithProviders(<DialogTitle data-testid="title" aria-level={2}>Title</DialogTitle>);
+      const title = screen.getByTestId('title');
+      expect(title).toHaveAttribute('aria-level', '2');
+    });
+  });
+
+  describe('DialogDescription', () => {
+    it('renders description with default styling', () => {
+      renderWithProviders(<DialogDescription>Description content</DialogDescription>);
+      const description = screen.getByTestId('dialog-description');
+      expect(description).toBeInTheDocument();
+      expect(description).toHaveTextContent('Description content');
+      expect(description).toHaveClass('text-sm', 'text-muted-foreground');
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<DialogDescription className="custom-description">Description</DialogDescription>);
+      const description = screen.getByTestId('dialog-description');
+      expect(description).toHaveClass('custom-description');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      renderWithProviders(<DialogDescription ref={ref}>Description</DialogDescription>);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('spreads additional props', () => {
+      renderWithProviders(<DialogDescription data-testid="description" aria-label="Dialog description">Description</DialogDescription>);
+      const description = screen.getByTestId('description');
+      expect(description).toHaveAttribute('aria-label', 'Dialog description');
+    });
+  });
+
+  describe('DialogClose', () => {
+    it('renders close button', () => {
+      renderWithProviders(<DialogClose>Close</DialogClose>);
+      const closeButton = screen.getByTestId('dialog-close');
+      expect(closeButton).toBeInTheDocument();
+      expect(closeButton).toHaveTextContent('Close');
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<DialogClose className="custom-close">Close</DialogClose>);
+      const closeButton = screen.getByTestId('dialog-close');
+      expect(closeButton).toHaveClass('custom-close');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      renderWithProviders(<DialogClose ref={ref}>Close</DialogClose>);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('spreads additional props', () => {
+      renderWithProviders(<DialogClose data-testid="close" aria-label="Close dialog">Close</DialogClose>);
+      const closeButton = screen.getByTestId('close');
+      expect(closeButton).toHaveAttribute('aria-label', 'Close dialog');
+    });
+  });
+
+  describe('Dialog Composition', () => {
+    it('renders complete dialog structure', () => {
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger>Open Dialog</DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Dialog Title</DialogTitle>
+              <DialogDescription>Dialog description</DialogDescription>
+            </DialogHeader>
+            <div>Dialog content</div>
+            <DialogFooter>
+              <DialogClose>Cancel</DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      );
+
+      expect(screen.getByTestId('dialog-root')).toBeInTheDocument();
+      expect(screen.getByTestId('dialog-trigger')).toBeInTheDocument();
+      expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
+      expect(screen.getByTestId('dialog-title')).toBeInTheDocument();
+      expect(screen.getByTestId('dialog-description')).toBeInTheDocument();
+      expect(screen.getByText('Dialog content')).toBeInTheDocument();
+    });
+
+    it('renders dialog with size and custom styling', () => {
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger>Open</DialogTrigger>
+          <DialogContent 
+            size="lg" 
+            className="custom-content"
+            overlayClassName="custom-overlay"
+            showCloseButton={false}
+          >
+            <DialogHeader>
+              <DialogTitle>Large Dialog</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
+      );
+
+      const content = screen.getByTestId('dialog-content');
+      const overlay = screen.getByTestId('dialog-overlay');
+      
+      expect(content).toHaveClass('max-w-lg', 'custom-content');
+      expect(overlay).toHaveClass('custom-overlay');
+      expect(screen.queryByTestId('dialog-close')).not.toBeInTheDocument();
+    });
+
+    it('renders full-screen dialog correctly', () => {
+      renderWithProviders(
+        <Dialog>
+          <DialogTrigger>Open Full Screen</DialogTrigger>
+          <DialogContent size="full">
+            <DialogHeader>
+              <DialogTitle>Full Screen Dialog</DialogTitle>
+            </DialogHeader>
+            <div className="flex-1">Full screen content</div>
+          </DialogContent>
+        </Dialog>
+      );
+
+      const content = screen.getByTestId('dialog-content');
+      expect(content).toHaveClass(
+        'fixed',
+        'z-50',
+        'duration-200',
+        'data-[state=open]:animate-in',
+        'data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0',
+        'data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95',
+        'data-[state=open]:zoom-in-95',
+        'data-[state=closed]:slide-out-to-left-1/2',
+        'data-[state=closed]:slide-out-to-top-[48%]',
+        'data-[state=open]:slide-in-from-left-1/2',
+        'data-[state=open]:slide-in-from-top-[48%]',
+        'm-0',
+        'max-h-none',
+        'w-auto',
+        'outline-none',
+        'border',
+        'bg-background',
+        'shadow-lg',
+        'max-w-full',
+        'grid',
+        'gap-4',
+        'p-6',
+        'sm:left-[50%]',
+        'sm:top-[50%]',
+        'sm:translate-x-[-50%]',
+        'sm:translate-y-[-50%]',
+        'left-0',
+        'top-0',
+        'translate-x-0',
+        'translate-y-0',
+        'h-full',
+        'rounded-none',
+        'sm:h-auto',
+        'sm:rounded-lg'
+      );
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has correct dialog role', () => {
+      renderWithProviders(<DialogContent>Content</DialogContent>);
+      const dialog = screen.getByTestId('dialog-content');
+      expect(dialog).toBeInTheDocument();
+      expect(dialog.tagName.toLowerCase()).toBe('dialog');
+    });
+
+    it('includes screen reader text for close button', () => {
+      renderWithProviders(<DialogContent>Content</DialogContent>);
+      const closeButton = screen.getByTestId('dialog-close');
+      expect(closeButton).toBeInTheDocument();
+      expect(closeButton).toHaveTextContent('Close');
+    });
+
+    it('maintains accessibility when close button is hidden', () => {
+      renderWithProviders(<DialogContent showCloseButton={false}>Content</DialogContent>);
+      const dialog = screen.getByTestId('dialog-content');
+      expect(dialog).toBeInTheDocument();
+      expect(dialog.tagName.toLowerCase()).toBe('dialog');
+      expect(screen.queryByTestId('dialog-close')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Type Safety', () => {
+    it('accepts valid DialogSize types', () => {
+      // This test ensures TypeScript compilation
+      const validSizes: DialogSize[] = ['sm', 'md', 'lg', 'xl', 'full'];
+      
+      validSizes.forEach(size => {
+        const { unmount } = renderWithProviders(<DialogContent size={size}>Content</DialogContent>);
+        expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+
+  describe('New Enhanced Dialog Features', () => {
+    // Mock ResizeObserver for smart height tests
+    const mockResizeObserver = vi.fn(() => ({
+      observe: vi.fn(),
+      disconnect: vi.fn(),
+      unobserve: vi.fn(),
+    }));
+
+    beforeEach(() => {
+      global.ResizeObserver = mockResizeObserver;
+      // Mock window.innerHeight for height calculations
+      Object.defineProperty(window, 'innerHeight', {
+        writable: true,
+        configurable: true,
+        value: 800,
+      });
+    });
+
+    describe('Smart Height Functionality', () => {
+      it('applies smart height with default maxHeightPercent', () => {
+        renderWithProviders(
+          <DialogContent enableScrolling={true}>
+            <div>Content with smart height</div>
+          </DialogContent>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        // Check that the dialog is rendered with scrolling enabled
+        expect(content).toHaveClass('flex', 'flex-col');
+        expect(content).not.toHaveClass('grid');
+      });
+
+      it('applies custom maxHeightPercent', () => {
+        renderWithProviders(
+          <DialogContent enableScrolling={true} maxHeightPercent={75}>
+            <div>Content with custom height</div>
+          </DialogContent>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        // Check that maxHeight is applied as inline style
+        expect(content).toHaveAttribute('style');
+        const style = content.getAttribute('style');
+        expect(style).toContain('max-height');
+        expect(style).toMatch(/max-height:\s*75vh/);
+      });
+
+      it('applies custom maxHeight with CSS units', () => {
+        renderWithProviders(
+          <DialogContent enableScrolling={true} maxHeight="500px">
+            <div>Content with fixed height</div>
+          </DialogContent>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        expect(content).toHaveStyle({
+          maxHeight: '500px',
+        });
+      });
+
+      it('applies minHeight when provided', () => {
+        renderWithProviders(
+          <DialogContent enableScrolling={true} minHeight="300px">
+            <div>Content with min height</div>
+          </DialogContent>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        expect(content).toHaveStyle({
+          minHeight: '300px',
+        });
+      });
+
+      it('switches to flex layout when scrolling is enabled', () => {
+        renderWithProviders(
+          <DialogContent enableScrolling={true}>
+            <div>Scrollable content</div>
+          </DialogContent>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        expect(content).toHaveClass('flex', 'flex-col');
+        expect(content).not.toHaveClass('grid');
+      });
+
+      it('maintains grid layout when scrolling is disabled', () => {
+        renderWithProviders(
+          <DialogContent enableScrolling={false}>
+            <div>Non-scrollable content</div>
+          </DialogContent>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        expect(content).toHaveClass('grid');
+        expect(content).not.toHaveClass('flex', 'flex-col');
+      });
+
+      it('clamps maxHeightPercent to valid range', () => {
+        const { rerender } = renderWithProviders(
+          <DialogContent enableScrolling={true} maxHeightPercent={150}>
+            <div>Content</div>
+          </DialogContent>
+        );
+
+        let content = screen.getByTestId('dialog-content');
+        // Should still apply some maxHeight, even if percentage is over 100
+        expect(content).toHaveAttribute('style');
+        let style = content.getAttribute('style');
+        expect(style).toContain('max-height');
+
+        rerender(
+          <DialogContent enableScrolling={true} maxHeightPercent={-10}>
+            <div>Content</div>
+          </DialogContent>
+        );
+
+        content = screen.getByTestId('dialog-content');
+        // Should still apply some maxHeight, even if percentage is negative
+        expect(content).toHaveAttribute('style');
+        style = content.getAttribute('style');
+        expect(style).toContain('max-height');
+      });
+    });
+
+    describe('DialogBody Component', () => {
+      it('renders DialogBody with scrollable styling', () => {
+        renderWithProviders(
+          <DialogContent enableScrolling={true}>
+            <DialogBody>
+              <div>Scrollable body content</div>
+            </DialogBody>
+          </DialogContent>
+        );
+
+        const body = screen.getByRole('main', { hidden: true });
+        expect(body).toBeInTheDocument();
+        expect(body).toHaveClass(
+          'flex-1',
+          'overflow-y-auto',
+          'px-6',
+          'py-2'
+        );
+        expect(body).toHaveAttribute('aria-label', 'Dialog main content');
+        expect(screen.getByText('Scrollable body content')).toBeInTheDocument();
+      });
+
+      it('applies custom className to DialogBody', () => {
+        renderWithProviders(
+          <DialogBody className="custom-body-class">
+            <div>Custom styled body</div>
+          </DialogBody>
+        );
+
+        const body = screen.getByRole('main', { hidden: true });
+        expect(body).toHaveClass('custom-body-class');
+      });
+
+      it('spreads additional props on DialogBody', () => {
+        renderWithProviders(
+          <DialogBody data-testid="custom-body" aria-describedby="body-desc">
+            <div>Body with props</div>
+          </DialogBody>
+        );
+
+        const body = screen.getByTestId('custom-body');
+        expect(body).toHaveAttribute('aria-describedby', 'body-desc');
+      });
+    });
+
+    describe('Sticky Header and Footer', () => {
+      it('renders DialogHeader with sticky positioning', () => {
+        renderWithProviders(
+          <DialogContent enableScrolling={true}>
+            <DialogHeader sticky={true}>
+              <DialogTitle>Sticky Header</DialogTitle>
+            </DialogHeader>
+          </DialogContent>
+        );
+
+        const header = screen.getByText('Sticky Header').parentElement;
+        expect(header).toHaveClass('sticky');
+        expect(header).toHaveClass('top-0');
+        expect(header).toHaveClass('z-10');
+        expect(header).toHaveClass('bg-background');
+        expect(header).toHaveClass('border-b');
+        expect(header).toHaveClass('p-6');
+        expect(header).toHaveClass('pb-4');
+      });
+
+      it('renders DialogHeader without sticky positioning by default', () => {
+        renderWithProviders(
+          <DialogHeader>
+            <DialogTitle>Regular Header</DialogTitle>
+          </DialogHeader>
+        );
+
+        const header = screen.getByText('Regular Header').parentElement;
+        expect(header).not.toHaveClass('sticky', 'top-0', 'z-10', 'bg-background', 'border-b');
+        expect(header).toHaveClass(
+          'flex',
+          'flex-col',
+          'space-y-1.5',
+          'text-center',
+          'sm:text-left'
+        );
+      });
+
+      it('renders DialogFooter with sticky positioning', () => {
+        renderWithProviders(
+          <DialogContent enableScrolling={true}>
+            <DialogFooter sticky={true}>
+              <button>Save</button>
+            </DialogFooter>
+          </DialogContent>
+        );
+
+        const footer = screen.getByRole('button', { name: 'Save', hidden: true }).parentElement;
+        expect(footer).toHaveClass('sticky');
+        expect(footer).toHaveClass('bottom-0');
+        expect(footer).toHaveClass('z-10');
+        expect(footer).toHaveClass('bg-background');
+        expect(footer).toHaveClass('border-t');
+        expect(footer).toHaveClass('p-6');
+        expect(footer).toHaveClass('pt-4');
+      });
+
+      it('renders DialogFooter without sticky positioning by default', () => {
+        renderWithProviders(
+          <DialogFooter>
+            <button>Save</button>
+          </DialogFooter>
+        );
+
+        const footer = screen.getByRole('button', { name: 'Save' }).parentElement;
+        expect(footer).not.toHaveClass('sticky', 'bottom-0', 'z-10', 'bg-background', 'border-t');
+        expect(footer).toHaveClass(
+          'flex',
+          'flex-col-reverse',
+          'sm:flex-row',
+          'sm:justify-end',
+          'sm:space-x-2'
+        );
+      });
+
+      it('applies custom className with sticky header', () => {
+        renderWithProviders(
+          <DialogHeader sticky={true} className="custom-sticky-header">
+            <DialogTitle>Custom Sticky Header</DialogTitle>
+          </DialogHeader>
+        );
+
+        const header = screen.getByText('Custom Sticky Header').parentElement;
+        expect(header).toHaveClass('custom-sticky-header');
+        expect(header).toHaveClass('sticky', 'top-0', 'z-10');
+      });
+
+      it('applies custom className with sticky footer', () => {
+        renderWithProviders(
+          <DialogFooter sticky={true} className="custom-sticky-footer">
+            <button>Save</button>
+          </DialogFooter>
+        );
+
+        const footer = screen.getByRole('button', { name: 'Save' }).parentElement;
+        expect(footer).toHaveClass('custom-sticky-footer');
+        expect(footer).toHaveClass('sticky', 'bottom-0', 'z-10');
+      });
+    });
+
+    describe('Complete Scrollable Dialog Composition', () => {
+      it('renders complete scrollable dialog with all components', () => {
+        renderWithProviders(
+          <Dialog>
+            <DialogTrigger>Open Scrollable Dialog</DialogTrigger>
+            <DialogContent enableScrolling={true} maxHeightPercent={80}>
+              <DialogHeader sticky={true}>
+                <DialogTitle>Scrollable Dialog Title</DialogTitle>
+                <DialogDescription>This dialog has scrollable content</DialogDescription>
+              </DialogHeader>
+              <DialogBody>
+                <div>Long scrollable content that exceeds the dialog height</div>
+                <div>More content...</div>
+                <div>Even more content...</div>
+              </DialogBody>
+              <DialogFooter sticky={true}>
+                <DialogClose>Cancel</DialogClose>
+                <button>Save Changes</button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        );
+
+        // Check that all components are rendered
+        expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
+        expect(screen.getByText('Scrollable Dialog Title')).toBeInTheDocument();
+        expect(screen.getByText('This dialog has scrollable content')).toBeInTheDocument();
+        expect(screen.getByRole('main', { hidden: true })).toBeInTheDocument(); // DialogBody
+        expect(screen.getByText('Long scrollable content that exceeds the dialog height')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Cancel', hidden: true })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Save Changes', hidden: true })).toBeInTheDocument();
+
+        // Check layout styling
+        const content = screen.getByTestId('dialog-content');
+        expect(content).toHaveClass('flex', 'flex-col');
+        
+        // Check that maxHeight is applied as inline style
+        expect(content).toHaveAttribute('style');
+        const style = content.getAttribute('style');
+        expect(style).toContain('max-height');
+
+        // Check sticky styling
+        const header = screen.getByText('Scrollable Dialog Title').parentElement;
+        const footer = screen.getByRole('button', { name: 'Cancel', hidden: true }).parentElement;
+        expect(header).toHaveClass('sticky', 'top-0', 'border-b');
+        expect(footer).toHaveClass('sticky', 'bottom-0', 'border-t');
+
+        // Check body scrolling
+        const body = screen.getByRole('main', { hidden: true });
+        expect(body).toHaveClass('flex-1', 'overflow-y-auto');
+      });
+
+      it('renders without scrolling features when enableScrolling is false', () => {
+        renderWithProviders(
+          <Dialog>
+            <DialogTrigger>Open Regular Dialog</DialogTrigger>
+            <DialogContent enableScrolling={false}>
+              <DialogHeader sticky={true}>
+                <DialogTitle>Regular Dialog</DialogTitle>
+              </DialogHeader>
+              <DialogBody>
+                <div>Regular content</div>
+              </DialogBody>
+              <DialogFooter sticky={true}>
+                <button>Save</button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        expect(content).toHaveClass('grid');
+        expect(content).not.toHaveClass('flex', 'flex-col');
+        
+        // Should not have maxHeight when scrolling is disabled
+        const style = content.getAttribute('style');
+        expect(style).toBeNull();
+
+        // Headers and footers are still sticky if explicitly set, regardless of enableScrolling
+        const header = screen.getByText('Regular Dialog').parentElement;
+        const footer = screen.getByRole('button', { name: 'Save', hidden: true }).parentElement;
+        // Since sticky={true} was explicitly set, they should still be sticky
+        expect(header).toHaveClass('sticky', 'border-b');
+        expect(footer).toHaveClass('sticky', 'border-t');
+      });
+    });
+
+    describe('Responsive Behavior', () => {
+      it('adjusts height calculations for mobile screens', () => {
+        // Mock smaller mobile screen
+        Object.defineProperty(window, 'innerHeight', {
+          writable: true,
+          configurable: true,
+          value: 600,
+        });
+
+        renderWithProviders(
+          <DialogContent enableScrolling={true} maxHeightPercent={90}>
+            <div>Mobile content</div>
+          </DialogContent>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        // Check that maxHeight is applied based on mobile viewport
+        expect(content).toHaveAttribute('style');
+        const style = content.getAttribute('style');
+        expect(style).toContain('max-height');
+        expect(style).toMatch(/max-height:\s*\d+(px|vh)/);
+      });
+
+      it('maintains minimum viable height on very small screens', () => {
+        Object.defineProperty(window, 'innerHeight', {
+          writable: true,
+          configurable: true,
+          value: 300,
+        });
+
+        renderWithProviders(
+          <DialogContent enableScrolling={true} maxHeightPercent={90} minHeight="200px">
+            <div>Small screen content</div>
+          </DialogContent>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        expect(content).toHaveStyle({
+          minHeight: '200px',
+        });
+        
+        // Check that maxHeight is still calculated
+        const style = content.getAttribute('style');
+        expect(style).toContain('max-height');
+      });
+    });
+
+    describe('Accessibility Features', () => {
+      it('maintains proper ARIA attributes with scrolling', () => {
+        renderWithProviders(
+          <DialogContent enableScrolling={true}>
+            <DialogHeader>
+              <DialogTitle id="dialog-title">Accessible Dialog</DialogTitle>
+              <DialogDescription id="dialog-desc">Description text</DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div>Accessible content</div>
+            </DialogBody>
+          </DialogContent>
+        );
+
+        const content = screen.getByRole('dialog', { hidden: true });
+        const body = screen.getByRole('main', { hidden: true });
+        
+        expect(content).toBeInTheDocument();
+        expect(body).toHaveAttribute('aria-label', 'Dialog main content');
+      });
+
+      it('ensures keyboard navigation works with sticky elements', () => {
+        renderWithProviders(
+          <DialogContent enableScrolling={true}>
+            <DialogHeader sticky={true}>
+              <DialogTitle>Keyboard Navigation Test</DialogTitle>
+            </DialogHeader>
+            <DialogBody>
+              <button>Focusable button 1</button>
+              <button>Focusable button 2</button>
+            </DialogBody>
+            <DialogFooter sticky={true}>
+              <button>Footer button</button>
+            </DialogFooter>
+          </DialogContent>
+        );
+
+        const buttons = screen.getAllByRole('button', { hidden: true });
+        expect(buttons).toHaveLength(4); // 3 content buttons + 1 close button
+        
+        // All buttons should be in the document and focusable
+        buttons.forEach(button => {
+          expect(button).toBeInTheDocument();
+          expect(button).not.toHaveAttribute('tabindex', '-1');
+        });
+      });
+    });
+
+    describe('Error Handling and Edge Cases', () => {
+      it('handles invalid maxHeightPercent gracefully', () => {
+        const { rerender } = renderWithProviders(
+          <DialogContent enableScrolling={true} maxHeightPercent={NaN}>
+            <div>Content</div>
+          </DialogContent>
+        );
+
+        let content = screen.getByTestId('dialog-content');
+        // Should still apply default height when NaN - may not have style attribute if defaults are used
+        let style = content.getAttribute('style');
+        if (style) {
+          expect(style).toContain('max-height');
+        } else {
+          // If no style attribute, the component should still be rendered properly
+          expect(content).toBeInTheDocument();
+        }
+
+        rerender(
+          <DialogContent enableScrolling={true} maxHeightPercent={undefined}>
+            <div>Content</div>
+          </DialogContent>
+        );
+
+        content = screen.getByTestId('dialog-content');
+        // Should use default when undefined
+        style = content.getAttribute('style');
+        if (style) {
+          expect(style).toContain('max-height');
+        }
+      });
+
+      it('handles missing ResizeObserver gracefully', () => {
+        const originalResizeObserver = global.ResizeObserver;
+        delete (global as any).ResizeObserver;
+
+        // Should not throw error
+        expect(() => {
+          renderWithProviders(
+            <DialogContent enableScrolling={true}>
+              <div>Content without ResizeObserver</div>
+            </DialogContent>
+          );
+        }).not.toThrow();
+
+        const content = screen.getByTestId('dialog-content');
+        expect(content).toBeInTheDocument();
+
+        // Restore ResizeObserver
+        global.ResizeObserver = originalResizeObserver;
+      });
+
+      it('works correctly when enableScrolling prop changes dynamically', () => {
+        const { rerender, container } = renderWithProviders(
+          <Dialog open>
+            <DialogContent enableScrolling={false} data-testid="dialog-content">
+              <DialogHeader>
+                <DialogTitle>Test Dialog</DialogTitle>
+              </DialogHeader>
+              <DialogBody>Content</DialogBody>
+            </DialogContent>
+          </Dialog>
+        );
+
+        const content = container.querySelector('[data-testid="dialog-content"]') as HTMLElement;
+        expect(content).toHaveClass('grid');
+        let style = content.getAttribute('style');
+        expect(style).toBeNull();
+
+        rerender(
+          <Dialog open>
+            <DialogContent enableScrolling={true} data-testid="dialog-content">
+              <DialogHeader>
+                <DialogTitle>Test Dialog</DialogTitle>
+              </DialogHeader>
+              <DialogBody>Content</DialogBody>
+            </DialogContent>
+          </Dialog>
+        );
+
+        expect(content).toHaveClass('flex', 'flex-col');
+        style = content.getAttribute('style');
+        if (style) {
+          expect(style).toContain('max-height');
+        }
+      });
+    });
+
+    describe('Smart Width Features', () => {
+      it('applies smart width constraints when maxWidthPercent is set', () => {
+        renderWithProviders(
+          <Dialog open>
+            <DialogContent maxWidthPercent={75} data-testid="dialog-content">
+              <DialogHeader>
+                <DialogTitle>Test Dialog</DialogTitle>
+              </DialogHeader>
+              <div>Content</div>
+            </DialogContent>
+          </Dialog>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        const style = content.getAttribute('style');
+        expect(style).toContain('max-width:');
+        expect(style).toMatch(/max-width:\s*\d+(px|vw)/);
+      });
+
+      it('applies custom maxWidth when provided', () => {
+        renderWithProviders(
+          <Dialog open>
+            <DialogContent maxWidth="600px" data-testid="dialog-content">
+              <DialogHeader>
+                <DialogTitle>Test Dialog</DialogTitle>
+              </DialogHeader>
+              <div>Content</div>
+            </DialogContent>
+          </Dialog>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        const style = content.getAttribute('style');
+        expect(style).toContain('max-width: 600px');
+      });
+
+      it('applies minWidth when provided', () => {
+        renderWithProviders(
+          <Dialog open>
+            <DialogContent minWidth="400px" maxWidthPercent={80} data-testid="dialog-content">
+              <DialogHeader>
+                <DialogTitle>Test Dialog</DialogTitle>
+              </DialogHeader>
+              <div>Content</div>
+            </DialogContent>
+          </Dialog>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        const style = content.getAttribute('style');
+        expect(style).toContain('min-width: 400px');
+        expect(style).toContain('max-width:');
+      });
+
+      it('does not apply width constraints when not specified', () => {
+        renderWithProviders(
+          <Dialog open>
+            <DialogContent data-testid="dialog-content">
+              <DialogHeader>
+                <DialogTitle>Test Dialog</DialogTitle>
+              </DialogHeader>
+              <div>Content</div>
+            </DialogContent>
+          </Dialog>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        const style = content.getAttribute('style');
+        expect(style).toBeNull();
+      });
+
+      it('prioritizes maxWidth over maxWidthPercent', () => {
+        renderWithProviders(
+          <Dialog open>
+            <DialogContent maxWidth="500px" maxWidthPercent={90} data-testid="dialog-content">
+              <DialogHeader>
+                <DialogTitle>Test Dialog</DialogTitle>
+              </DialogHeader>
+              <div>Content</div>
+            </DialogContent>
+          </Dialog>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        const style = content.getAttribute('style');
+        // Should prioritize maxWidth over maxWidthPercent - should contain either the px value or the percentage
+        expect(style).toMatch(/max-width:\s*(500px|90vw)/);
+      });
+
+      it('handles extreme maxWidthPercent values', () => {
+        renderWithProviders(
+          <Dialog open>
+            <DialogContent maxWidthPercent={150} data-testid="dialog-content">
+              <DialogHeader>
+                <DialogTitle>Test Dialog</DialogTitle>
+              </DialogHeader>
+              <div>Content</div>
+            </DialogContent>
+          </Dialog>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        const style = content.getAttribute('style');
+        expect(style).toContain('max-width:');
+        // Should be clamped to reasonable maximum
+      });
+
+      it('combines smart width and height constraints', () => {
+        renderWithProviders(
+          <Dialog open>
+            <DialogContent 
+              maxWidthPercent={80} 
+              maxHeightPercent={70}
+              enableScrolling={true}
+              data-testid="dialog-content"
+            >
+              <DialogHeader>
+                <DialogTitle>Test Dialog</DialogTitle>
+              </DialogHeader>
+              <DialogBody>Content</DialogBody>
+            </DialogContent>
+          </Dialog>
+        );
+
+        const content = screen.getByTestId('dialog-content');
+        const style = content.getAttribute('style');
+        expect(style).toContain('max-width:');
+        expect(style).toContain('max-height:');
+      });
+
+      it('removes size classes when smart width is active', () => {
+        const { container } = renderWithProviders(
+          <Dialog open>
+            <DialogContent size="lg" maxWidthPercent={80} data-testid="dialog-content">
+              <DialogHeader>
+                <DialogTitle>Test Dialog</DialogTitle>
+              </DialogHeader>
+              <div>Content</div>
+            </DialogContent>
+          </Dialog>
+        );
+
+        const content = container.querySelector('[data-testid="dialog-content"]') as HTMLElement;
+        expect(content).not.toHaveClass('max-w-lg');
+        const style = content.getAttribute('style');
+        expect(style).toContain('max-width:');
+      });
+
+      it('preserves size classes when smart width is not active', () => {
+        const { container } = renderWithProviders(
+          <Dialog open>
+            <DialogContent size="lg" data-testid="dialog-content">
+              <DialogHeader>
+                <DialogTitle>Test Dialog</DialogTitle>
+              </DialogHeader>
+              <div>Content</div>
+            </DialogContent>
+          </Dialog>
+        );
+
+        const content = container.querySelector('[data-testid="dialog-content"]') as HTMLElement;
+        expect(content).toHaveClass('max-w-lg');
+        const style = content.getAttribute('style');
+        expect(style).toBeNull();
+      });
+    });
+  });
+
+  // Shared Utilities Tests
+  describe('Dialog - Shared Utilities Tests', () => {
+    testComponentRendering(Dialog, [
+      {
+        name: 'with default props',
+        props: { children: <DialogTrigger>Open</DialogTrigger> },
+        expectedText: 'Open'
+      },
+      {
+        name: 'with open state',
+        props: { open: true, children: <DialogTrigger>Open</DialogTrigger> },
+        expectedText: 'Open'
+      }
+    ]);
+
+    testComponentRendering(DialogTrigger, [
+      {
+        name: 'with text content',
+        props: { children: 'Open Dialog' },
+        expectedText: 'Open Dialog'
+      }
+    ]);
+
+    testComponentRendering(DialogContent, [
+      {
+        name: 'with content',
+        props: { children: 'Dialog content' },
+        expectedText: 'Dialog content'
+      },
+      {
+        name: 'with size variant',
+        props: { size: 'lg', children: 'Large dialog' },
+        expectedText: 'Large dialog'
+      }
+    ]);
+
+    testComponentAccessibility(DialogContent, {
+      requiredAttributes: [],
+      shouldBeKeyboardAccessible: false,
+      shouldHaveValidRole: false,
+      shouldHaveValidAriaLabel: false
+    }, {
+      children: 'Accessible dialog'
+    });
+  });
+});