@atlaskit/modal-dialog/dist/es2019/internal/components/modal-dialog.js

A modal dialog displays content that requires user interaction, in a layer above the page.

/* modal-dialog.tsx generated by @compiled/babel-plugin v0.36.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./modal-dialog.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useEffect, useMemo } from 'react';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
import { useId } from '@atlaskit/ds-lib/use-id';
import { useCloseOnEscapePress, useLayering } from '@atlaskit/layering';
import FadeIn from '@atlaskit/motion/fade-in';
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
import { ModalContext, ScrollContext } from '../context';
import useOnMotionFinish from '../hooks/use-on-motion-finish';
import { disableDraggingToCrossOriginIFramesForElement } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element';
import { disableDraggingToCrossOriginIFramesForExternal } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external';
import { disableDraggingToCrossOriginIFramesForTextSelection } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection';
import { dialogHeight, dialogWidth } from '../utils';
import Positioner from './positioner';
const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
const dialogStyles = {
  root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syaz1fxt _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1p6i _1ah31bk5 _ra3xnqa1 _128m1bk5 _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p1cd0 _yakv1kw7 _4lht1kw7 _1xlt6m9r",
  borderRadius: "_epkx1sit"
};
const viewportScrollStyles = null;
const bodyScrollStyles = null;
const ModalDialog = props => {
  const {
    width = 'medium',
    shouldScrollInViewport = false,
    shouldCloseOnEscapePress,
    autoFocus,
    stackIndex,
    onClose,
    onCloseComplete,
    onOpenComplete,
    height,
    hasProvidedOnClose,
    children,
    label,
    testId,
    isFullScreen = false
  } = props;
  const id = useId();
  const titleId = `modal-dialog-title-${id}`;
  const defaultTestId = testId || 'modal-dialog';
  useEffect(() => {
    // Modal dialogs can appear on top of iframe elements that are on another domain.
    // There is a Chrome bug where drag and drop in an element on top of a cross domain
    // iframe is not working. We are applying the workaround for this bug in modal so
    // that consumers of our modal don't have to worry about this bug and are free to
    // create whatever drag and drop experience they like inside a modal
    //
    // Chrome bug: https://issues.chromium.org/issues/362301053

    return combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal());
  }, []);
  useAutoFocus(typeof autoFocus === 'object' ? autoFocus : undefined,
  // When a user supplies  a ref to focus we enable this hook
  typeof autoFocus === 'object');
  const [motionRef, onMotionFinish] = useOnMotionFinish({
    onOpenComplete,
    onCloseComplete
  });
  const modalDialogContext = useMemo(() => ({
    testId: defaultTestId,
    titleId,
    onClose,
    hasProvidedOnClose,
    isFullScreen
  }), [defaultTestId, titleId, onClose, hasProvidedOnClose, isFullScreen]);
  useCloseOnEscapePress({
    onClose,
    isDisabled: !shouldCloseOnEscapePress
  });
  const {
    currentLevel
  } = useLayering();
  return /*#__PURE__*/React.createElement(Positioner, {
    stackIndex: stackIndex,
    shouldScrollInViewport: shouldScrollInViewport,
    testId: defaultTestId,
    isFullScreen: isFullScreen
  }, /*#__PURE__*/React.createElement(ModalContext.Provider, {
    value: modalDialogContext
  }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
    value: shouldScrollInViewport
  }, /*#__PURE__*/React.createElement(FadeIn
  /**
   * We don't want a 'slide in' for the full screen modals.
   */, {
    entranceDirection: isFullScreen ? undefined : 'bottom',
    onFinish: onMotionFinish
  }, bottomFadeInProps => /*#__PURE__*/React.createElement("section", _extends({}, bottomFadeInProps, {
    "aria-label": label,
    ref: mergeRefs([bottomFadeInProps.ref, motionRef]),
    style: {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
      '--modal-dialog-width': dialogWidth(width),
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
      '--modal-dialog-height': dialogHeight(height)
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
    role: "dialog",
    "aria-labelledby": label ? undefined : titleId,
    "data-testid": defaultTestId,
    "data-modal-stack": stackIndex,
    tabIndex: -1,
    "aria-modal": true,
    "data-ds--level": currentLevel
  }), children)))));
};

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default ModalDialog;