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

A react component library for iTwinUI

import * as React from 'react';
import { Backdrop } from '../Backdrop/Backdrop.js';
import { useMergedRefs } from '../../utils/index.js';
import { useDialogContext } from './DialogContext.js';
import { useDialogMainContext } from './DialogMainContext.js';
import cx from 'classnames';
export const DialogBackdrop = React.forwardRef((props, ref) => {
  let dialogContext = useDialogContext();
  let dialogMainContext = useDialogMainContext();
  let {
    isVisible = dialogContext?.isOpen,
    isDismissible = dialogContext?.isDismissible,
    onClose = dialogContext?.onClose,
    closeOnExternalClick = dialogContext?.closeOnExternalClick,
    relativeTo = dialogContext?.relativeTo,
    onMouseDown,
    className,
    style,
    ...rest
  } = props;
  let backdropRef = React.useRef(null);
  let refs = useMergedRefs(backdropRef, ref);
  let handleMouseDown = (event) => {
    event.persist();
    if (event.target !== backdropRef.current) return;
    if (isDismissible && closeOnExternalClick && onClose) {
      dialogMainContext?.beforeClose();
      onClose(event);
    }
    onMouseDown?.(event);
  };
  return React.createElement(Backdrop, {
    isVisible: isVisible,
    className: cx(
      {
        'iui-backdrop-fixed': 'viewport' === relativeTo,
      },
      className,
    ),
    ref: refs,
    onMouseDown: handleMouseDown,
    style: {
      pointerEvents: 'auto',
      ...style,
    },
    ...rest,
  });
});
if ('development' === process.env.NODE_ENV)
  DialogBackdrop.displayName = 'Dialog.Backdrop';