syncfusion-react-popups

What this skill does

# Syncfusion React Popups Component

## Implementing Syncfusion React Dialog Component

The DialogComponent displays content in a floating window with support for modal and modeless modes, custom positioning, dragging, resizing, animations, templating, and comprehensive accessibility features.

### Component Overview

**DialogComponent Features:**
- **Modal/Modeless modes**: Control parent interaction blocking
- **9 preset positions + custom X/Y**: Flexible placement
- **Dragging**: Header-based drag and drop (allowDragging)
- **Resizing**: Diagonal resize grip (enableResize)
- **Templating**: Custom header, content, footer
- **Animations**: 16 effects (Fade, Zoom, Flip, Slide, FadeZoom, etc.)
- **Buttons**: Built-in action buttons with click handlers
- **Events**: open, close, beforeOpen, beforeClose, drag, dragStart, dragStop, resize events
- **Keyboard Navigation**: Tab, Escape (closeOnEscape), Enter
- **WCAG 2.2 Accessibility**: ARIA roles, focus management
- **Localization**: 20+ locales via locale property
- **RTL Support**: Right-to-left rendering

### Documentation & Navigation Guide

#### Getting Started
📄 **Read:** [references/getting-started.md](references/dialog-getting-started.md)
- Installation (`@syncfusion/ej2-react-popups`)
- CSS/theme imports (material, bootstrap, tailwind)
- Basic DialogComponent JSX structure
- show()/hide() methods and refs
- Functional component patterns with hooks
- Initial visibility with visible prop

#### Modal vs Modeless
📄 **Read:** [references/modal-vs-modeless.md](references/dialog-modal-vs-modeless.md)
- isModal boolean property (true/false)
- Modal overlay behavior and parent blocking
- Modeless floating behavior
- Focus management differences
- When to choose each mode
- Side-by-side comparisons

#### Positioning and Dragging
📄 **Read:** [references/positioning-and-dragging.md](references/dialog-positioning-and-dragging.md)
- position object (X: 'center'|'left'|'right'|number, Y: 'top'|'center'|'bottom'|number)
- 9 preset position combinations
- Custom pixel-based positioning
- allowDragging boolean property
- enableResize and resizeHandles configuration
- Target element constraints with target prop

#### Templates and Content
📄 **Read:** [references/templates-and-content.md](references/dialog-templates-and-content.md)
- content property (string, HTML, JSX function)
- header property (text or template)
- footerTemplate (custom footer JSX)
- Dynamic content updates
- HTML sanitization (enableHtmlSanitizer)
- Styling content and edge cases

#### Buttons and Actions
📄 **Read:** [references/buttons-and-actions.md](references/dialog-buttons-and-actions.md)
- buttons array with ButtonPropsModel[]
- ButtonPropsModel structure (buttonModel, click, isFlat, type)
- buttonModel properties (content, isPrimary, cssClass)
- Click event handlers
- Styling buttons with cssClass
- Button types (Button, Submit, Reset)

#### Animation Effects
📄 **Read:** [references/animation-effects.md](references/dialog-animation-effects.md)
- AnimationSettingsModel (effect, duration, delay)
- 16 animation effects (Fade, FadeZoom, FlipLeftDown, FlipLeftUp, etc.)
- Duration in milliseconds
- Delay before animation starts
- Disable animations (effect: 'None')
- Performance considerations

#### Localization and Accessibility
📄 **Read:** [references/localization-and-accessibility.md](references/dialog-localization-and-accessibility.md)
- locale property for culture/language
- WCAG 2.2 compliance
- Keyboard navigation (Tab, Enter, Escape)
- closeOnEscape behavior control
- ARIA roles and attributes
- Screen reader support
- RTL support with enableRtl
- Focus management patterns

#### Advanced Patterns
📄 **Read:** [references/advanced-patterns.md](references/dialog-advanced-patterns.md)
- Events: open, close, beforeOpen, beforeClose, drag, dragStart, dragStop, resizeStart, resizeStop, resizing
- Nested and stacked dialogs
- Forms with validation
- AJAX content loading
- Prevent close logic (beforeClose event)
- Full-screen dialogs
- HTML sanitization and security
- CSS classes and z-index management
- Enable persistence (enablePersistence)
- Common edge cases and troubleshooting

#### API Reference (Complete)
📄 **Read:** [references/api-reference.md](references/dialog-api-reference.md)
- All 24 DialogModel properties with types and defaults
- All 11 events with event arguments
- Methods: show(), hide(), refresh(), destroy()
- ButtonPropsModel structure (buttonModel, click, isFlat, type)
- AnimationSettingsModel with all 16 effects
- Types and enumerations
- Quick reference patterns

### Quick Start Example

> **⚠️ Dependency Alignment:** All `@syncfusion/ej2-*` packages must be on the **same major version** to avoid peer-dependency conflicts and supply-chain mismatches. Install them together:
> ```
> npm install @syncfusion/ej2-react-popups @syncfusion/ej2-base @syncfusion/ej2-buttons @syncfusion/ej2-popups
> ```

**Basic Modal Dialog:**

```jsx
import React, { useRef, useState } from 'react';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-buttons/styles/material.css';
import '@syncfusion/ej2-popups/styles/material.css';

export default function App() {
  const dialogRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    dialogRef.current?.show();
    setIsOpen(true);
  };

  const handleClose = () => {
    dialogRef.current?.hide();
    setIsOpen(false);
  };

  const buttons = [
    {
      buttonModel: {
        content: 'OK',
        cssClass: 'e-flat',
        isPrimary: true,
      },
      click: handleClose,
    },
    {
      buttonModel: {
        content: 'Cancel',
        cssClass: 'e-flat',
      },
      click: handleClose,
    },
  ];

  return (
    <div id="dialog-target" style={{ position: 'relative', width: '100%', minHeight: '400px' }}>
      <button onClick={handleOpen} className="e-control e-btn e-primary">
        Open Dialog
      </button>

      <DialogComponent
        ref={dialogRef}
        header="Confirm Action"
        buttons={buttons}
        showCloseIcon={true}
        target="#dialog-target"
        width="400px"
        isModal={true}
        visible={false}
      >
        <p>Are you sure you want to proceed with this action?</p>
      </DialogComponent>
    </div>
  );
}
```

### Common Patterns

#### Pattern 1: Confirmation Dialog
Delete action with confirmation buttons:
```jsx
const buttons = [
  {
    buttonModel: { content: 'Delete', cssClass: 'e-flat e-danger', isPrimary: true },
    click: () => { performDelete(); dialogRef.current?.hide(); }
  },
  {
    buttonModel: { content: 'Cancel', cssClass: 'e-flat' },
    click: () => dialogRef.current?.hide()
  }
];
```

#### Pattern 2: Form Dialog
Dialog with form inputs and validation:
```jsx
<DialogComponent header="Edit Profile" buttons={buttons} isModal={true} width="500px">
  <div style={{ padding: '16px' }}>
    <input type="text" placeholder="Name" className="form-control" />
    <input type="email" placeholder="Email" className="form-control" />
    <textarea placeholder="Bio" className="form-control"></textarea>
  </div>
</DialogComponent>
```

#### Pattern 3: Centered Dialog
Position dialog in center of screen:
```jsx
<DialogComponent
  header="Alert"
  position={{ X: 'center', Y: 'center' }}
  isModal={true}
  showCloseIcon={true}
  width="350px"
>
  This dialog is centered on the screen.
</DialogComponent>
```

#### Pattern 4: Draggable Floating Panel
Non-modal, draggable properties panel:
```jsx
<DialogComponent
  header="Properties"
  isModal={false}
  allowDragging={true}
  position={{ X: 200, Y: 150 }}
  width="300px"
  enableResize={true}
  resizeHandles={['All']}
  showCloseIcon={true}
>
  Drag me around! I don't block the page.
</DialogComponent>
```

#### Pattern 5: Animated Dialog
Dialog with Zoom animation:
```jsx
<DialogComponent
  header="Welcome"
  animationSettings={{ effect: 'Z