Modal Dialog Manager

Build a modal dialog system that handles complex modal interactions including nested dialogs, dialog queuing, and proper focus management. The system should support opening multiple dialogs, maintaining a dialog stack, and handling proper state transitions when dialogs are opened and closed.

Requirements

Dialog State Management

• Support opening a dialog with a unique identifier
• Support closing the currently active dialog
• Track which dialog is currently open
• Maintain proper state when no dialogs are open

Dialog Stacking

• Support opening a second dialog while the first is open (nested dialogs)
• Maintain a stack of open dialogs in the order they were opened
• When closing a dialog, return focus to the previous dialog in the stack
• Support programmatically closing all dialogs at once

Dialog Configuration

• Each dialog should accept a title and content
• Dialogs should support a callback that fires when they are closed
• Support controlled state where parent components manage dialog open/close state
• Allow dialogs to be closed via an explicit close button

Integration Requirements

• Dialogs must prevent background scrolling when open
• Dialogs must trap focus within the active dialog
• Clicking outside a dialog should close it
• Pressing Escape should close the currently active dialog

Implementation

@generates

API

export interface DialogConfig {
  id: string;
  title: string;
  content: React.ReactNode;
  onClose?: () => void;
}

export function DialogManager(props: {
  children: React.ReactNode;
}): JSX.Element;

export function useDialogManager(): {
  openDialog: (config: DialogConfig) => void;
  closeDialog: (id: string) => void;
  closeAllDialogs: () => void;
  activeDialogId: string | null;
  dialogStack: string[];
};

export function ManagedDialog(props: {
  id: string;
  isOpen: boolean;
  title: string;
  children: React.ReactNode;
  onClose: () => void;
}): JSX.Element;

Tests

Basic Dialog Tests

• Opening a dialog with openDialog() makes it visible and sets it as the active dialog @test
• Closing a dialog with closeDialog() removes it and clears the active dialog @test
• When a dialog is open, activeDialogId returns the correct dialog ID @test
• When no dialogs are open, activeDialogId returns null @test

Dialog Stacking Tests

• Opening two dialogs in sequence adds both to the dialogStack array @test
• The most recently opened dialog becomes the activeDialogId @test
• Closing the active dialog makes the previous dialog in the stack active @test
• Calling closeAllDialogs() removes all dialogs and clears the stack @test

Dialog Interaction Tests

• Clicking the close button in a dialog triggers its onClose callback @test
• Pressing Escape when a dialog is open closes the active dialog @test
• Clicking outside the dialog panel closes the dialog @test
• Focus is trapped within the dialog when open @test

Dependencies { .dependencies }

@headlessui/react { .dependency }

Provides state management primitives and accessible component patterns.

@satisfied-by