Dialog (components/ui/dialog.tsx)

Overview

A modal dialog component built with Radix UI that provides accessible overlay content with customizable header, content, and footer sections.

Features

• Modal overlay with backdrop blur
• Focus management and keyboard navigation
• Accessible dialog implementation
• Customizable header, content, and footer sections
• Animation support for open/close states
• Responsive design with mobile considerations
• Close button and escape key handling
• Custom positioning with centered layout
• Backdrop click handling for dismissal

Dependencies

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'

Props

interface DialogProps extends DialogPrimitive.DialogProps {
  children: ReactNode;
}

interface DialogTriggerProps extends DialogPrimitive.DialogTriggerProps {
  children: ReactNode;
}

interface DialogContentProps extends DialogPrimitive.DialogContentProps {
  className?: string;
  children: ReactNode;
}

interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  children: ReactNode;
}

interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  children: ReactNode;
}

interface DialogTitleProps extends DialogPrimitive.DialogTitleProps {
  className?: string;
  children: ReactNode;
}

interface DialogDescriptionProps extends DialogPrimitive.DialogDescriptionProps {
  className?: string;
  children: ReactNode;
}

Implementation

State Management

const [open, setOpen] = useState(false);

const handleOpenChange = (open: boolean) => {
  setOpen(open);
  onOpenChange?.(open);
};

Methods

const handleEscapeKeyDown = (event: KeyboardEvent) => {
  if (event.key === 'Escape') {
    setOpen(false);
  }
};

const handleOverlayClick = () => {
  if (closeOnOverlayClick) {
    setOpen(false);
  }
};

Unique Functionality

• Focus trap management for accessibility
• Animation states for smooth transitions
• Portal rendering for proper stacking context
• Overlay click handling for dismissal
• Keyboard navigation support
• Responsive position management

HTML Structure

<DialogPrimitive.Root>
  <DialogPrimitive.Trigger />
  <DialogPrimitive.Portal>
    <DialogPrimitive.Overlay />
    <DialogPrimitive.Content>
      {/* Dialog content structure */}
    </DialogPrimitive.Content>
  </DialogPrimitive.Portal>
</DialogPrimitive.Root>

API Integration

The Dialog component does not directly integrate with any APIs. It serves as a UI primitive for creating modal dialogs.

Components Used

• Dialog
• DialogTrigger
• DialogContent
• DialogHeader
• DialogFooter
• DialogTitle
• DialogDescription
• DialogClose

Notes

• Built using Radix UI primitives for robust accessibility
• Implements focus trapping for keyboard navigation
• Uses React Portal for proper DOM placement
• Supports custom animations and transitions
• Provides responsive layout adjustments
• Maintains ARIA compliance
• Customizable through className prop