@itwin/itwinui-react/esm/core/Dialog/Dialog.js

A react component library for iTwinUI

import * as React from 'react';
import cx from 'classnames';
import { DialogTitleBar } from './DialogTitleBar.js';
import { DialogContent } from './DialogContent.js';
import { DialogBackdrop } from './DialogBackdrop.js';
import { DialogContext } from './DialogContext.js';
import { DialogButtonBar } from './DialogButtonBar.js';
import { DialogMain } from './DialogMain.js';
import {
  useMergedRefs,
  Box,
  Portal,
  PortalContainerContext,
} from '../../utils/index.js';
let DialogComponent = React.forwardRef((props, forwardedRef) => {
  let {
    trapFocus = false,
    setFocus = trapFocus,
    preventDocumentScroll = false,
    isOpen = false,
    isDismissible = true,
    closeOnEsc = true,
    closeOnExternalClick = false,
    onClose,
    isDraggable = false,
    isResizable = false,
    relativeTo = 'viewport',
    placement,
    className,
    portal = false,
    ...rest
  } = props;
  let dialogRootRef = React.useRef(null);
  let [dialogElement, setDialogElement] = React.useState(null);
  let mergedRefs = useMergedRefs(forwardedRef, dialogRootRef);
  return isOpen
    ? React.createElement(
        DialogContext.Provider,
        {
          value: {
            isOpen,
            onClose,
            closeOnEsc,
            closeOnExternalClick,
            isDismissible,
            preventDocumentScroll,
            trapFocus,
            setFocus,
            isDraggable,
            isResizable,
            relativeTo,
            placement,
            dialogRootRef,
            setDialogElement,
          },
        },
        React.createElement(
          Portal,
          {
            portal: portal,
          },
          React.createElement(
            PortalContainerContext.Provider,
            {
              value: dialogElement,
            },
            React.createElement(Box, {
              className: cx('iui-dialog-wrapper', className),
              'data-iui-relative': 'container' === relativeTo,
              ref: mergedRefs,
              ...rest,
            }),
          ),
        ),
      )
    : null;
});
if ('development' === process.env.NODE_ENV)
  DialogComponent.displayName = 'Dialog';
export const Dialog = Object.assign(DialogComponent, {
  Backdrop: DialogBackdrop,
  Main: DialogMain,
  TitleBar: DialogTitleBar,
  Content: DialogContent,
  ButtonBar: DialogButtonBar,
});