import { DialogExamples, MDXLayoutNext } from '@/components';
import { FluidProvider } from '@fluid-design/fluid-ui';

export const meta = {
  templateTitle: 'Dialog',
  description:
    'Learn how to create engaging and interactive dialogs using Fluid Design. Discover all the features and options available to enhance the user experience.',
  date: '2023-04-01',
  author: 'Oliver Pan',
  tags: [
    'fluid ui',
    'react',
    'framer motion',
    'headless ui',
    'tailwindcss',
    'dialog',
    'modal',
  ],
};

export default (props) => (
  <MDXLayoutNext meta={meta} components={DialogExamples} {...props} />
);

# Dialog

Dialog (Modal) is used to display content that requires user interaction. They are used to display information, ask for input, or require a decision.

## Basic Usage

<DialogExamples.Simple />

```jsx
import { Button, Dialog, useModal } from '@fluid-design/fluid-ui';
const SimpleModal = ({ dismiss, onConfirm }) => {
  return (
    <Dialog>
      <Dialog.Header>
        <Dialog.Title>Modal Title</Dialog.Title>
        <Dialog.CloseButton dismiss={dismiss} />
      </Dialog.Header>
      <Dialog.Body className='bg-whtie'>
        <Dialog.Description>
          This is a simple modal. It has a title, a description, and a footer.
        </Dialog.Description>
        <p>Modal Content</p>
      </Dialog.Body>
    </Dialog>
  );
};

const SimpleComponent = () => {
  const [presentModal] = useModal(SimpleModal, {
    // You can pass any props to the modal component
    onConfirm: () => console.log('Confirmed'),
  });
  return <Button label='Present Modal' onClick={() => presentModal()} />;
};
```

## Nested Modal

Nested modals are often used to display a confirmation dialog after a user has performed an action.
Since the modal is built using Headless UI, it supports focus trapping out of the box.
This means that when a modal is open, the user will be unable to interact with the rest of the page until the modal is closed.
The keyboard focus will be trapped inside the modal, and the user will be able to navigate the modal using the keyboard.

<DialogExamples.Nested />

<CH.Code>

```tsx Button.tsx
import { Button, useModal } from '@fluid-design/fluid-ui';

const NestedComponent = () => {
  const [presentModal] = useModal(NestedModal1);
  return <Button label='Nested Modal' onClick={() => presentModal()} />;
};
```

```tsx Modal.tsx
import { Button, Dialog, useModal } from '@fluid-design/fluid-ui';
const NestedModal2 = ({ dismiss }) => {
  const [nestedModal] = useModal(NestedModal1);
  return (
    <Dialog>
      <Dialog.Body>
        <Dialog.Title>Are you sure?</Dialog.Title>
        <Dialog.Description>
          You have unsaved changes. Are you sure you want to cancel? All unsaved
          changes will be lost.
        </Dialog.Description>
      </Dialog.Body>
      <Dialog.Footer>
        <Button onClick={nestedModal} type='button' color='emerald'>
          Nest ME!
        </Button>
        <Button onClick={dismiss} type='button'>
          Close
        </Button>
      </Dialog.Footer>
    </Dialog>
  );
};

const NestedModal1 = ({ dismiss }) => {
  const [nestedModal] = useModal(NestedModal2);
  return (
    <Dialog>
      <Dialog.Body>
        <Dialog.Title>Are you sure?</Dialog.Title>
        <Dialog.Description>
          You have unsaved changes. Are you sure you want to cancel? All unsaved
          changes will be lost.
        </Dialog.Description>
      </Dialog.Body>
      <Dialog.Footer>
        <Button onClick={nestedModal} type='button' color='emerald'>
          Nest ME!
        </Button>
        <Button onClick={dismiss} type='button'>
          Close
        </Button>
      </Dialog.Footer>
    </Dialog>
  );
};
```

</CH.Code>

## Dialog with Form

Having a form inside a modal is a common pattern.
You can programmatically control weather the modal can be dismissed by clicking outside of
the modal or pressing the escape key by passing the `onClose` prop to the `useModal` hook.

<DialogExamples.Form />

## Component API

### Dialog.Title

| Prop      | Default | Description                                                                        |
| --------- | ------- | ---------------------------------------------------------------------------------- |
| className |         | `string` <Table.D>The CSS class to apply to the component's root element</Table.D> |
| children  |         | `ReactNode` <Table.D>The content to display inside the component</Table.D>         |

### Dialog.Description

| Prop      | Default | Description                                                                        |
| --------- | ------- | ---------------------------------------------------------------------------------- |
| className |         | `string` <Table.D>The CSS class to apply to the component's root element</Table.D> |
| children  |         | `ReactNode` <Table.D>The content to display inside the component</Table.D>         |

### Dialog.Header

| Prop          | Default | Description                                                                        |
| ------------- | ------- | ---------------------------------------------------------------------------------- |
| className     |         | `string` <Table.D>The CSS class to apply to the component's root element</Table.D> |
| transparentBg | `false` | `boolean` <Table.D>If true, the background will be transparent</Table.D>           |
| children      |         | `ReactNode` <Table.D>The content to display inside the component</Table.D>         |

### Dialog.Body

| Prop      | Default | Description                                                                        |
| --------- | ------- | ---------------------------------------------------------------------------------- |
| className |         | `string` <Table.D>The CSS class to apply to the component's root element</Table.D> |
| children  |         | `ReactNode` <Table.D>The content to display inside the component</Table.D>         |

### Dialog.Footer

| Prop          | Default | Description                                                                        |
| ------------- | ------- | ---------------------------------------------------------------------------------- |
| className     |         | `string` <Table.D>The CSS class to apply to the component's root element</Table.D> |
| transparentBg | `false` | `boolean` <Table.D>If true, the background will be transparent</Table.D>           |
| children      |         | `ReactNode` <Table.D>The content to display inside the component</Table.D>         |

### Dialog.CloseButton

| Prop      | Default | Description                                                                        |
| --------- | ------- | ---------------------------------------------------------------------------------- |
| className |         | `string` <Table.D>The CSS class to apply to the component's root element</Table.D> |
| dismiss   |         | `() => void` <Table.D>The function to call when the button is clicked</Table.D>    |

### Dialog

| Prop      | Default | Description                                                                        |
| --------- | ------- | ---------------------------------------------------------------------------------- |
| className |         | `string` <Table.D>The CSS class to apply to the component's root element</Table.D> |
| children  |         | `ReactNode` <Table.D>The content to display inside the component</Table.D>         |