@atlaskit/modal-dialog/dist/esm/internal/components/modal-wrapper.js

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

/* modal-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./modal-wrapper.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useCallback } from 'react';
import FocusLock from 'react-focus-lock';
import ScrollLock, { TouchScrollable } from 'react-scrolllock';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
import Blanket from '@atlaskit/blanket';
import noop from '@atlaskit/ds-lib/noop';
import { Layering } from '@atlaskit/layering';
import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
import { Motion } from '@atlaskit/motion';
import FadeIn from '@atlaskit/motion/fade-in';
import { fg } from '@atlaskit/platform-feature-flags';
import Portal from '@atlaskit/portal';
import { layers } from '@atlaskit/theme/constants';
import useModalStack from '../hooks/use-modal-stack';
import usePreventProgrammaticScroll from '../hooks/use-prevent-programmatic-scroll';
import ModalDialog from './modal-dialog';
var fillScreenStyles = null;
var allowlistElements = function allowlistElements(element, callback) {
  // Allow focus to reach elements outside the modal:
  // if AUI dialog is allowListed and visible
  if (!!document.querySelector('.aui-blanket:not([hidden])')) {
    return false;
  }
  // allows to pass a callback function to allow elements be ignored by focus lock
  if (typeof callback === 'function') {
    return callback(element);
  }
  return true;
};

/**
 * __Modal wrapper__
 *
 * A modal wrapper displays content that requires user interaction, in a layer above the page.
 * This component is primary container for other modal components.
 *
 * - [Examples](https://atlassian.design/components/modal-dialog/examples)
 * - [Code](https://atlassian.design/components/modal-dialog/code)
 * - [Usage](https://atlassian.design/components/modal-dialog/usage)
 */
var InternalModalWrapper = function InternalModalWrapper(props) {
  var _props$autoFocus = props.autoFocus,
    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
    focusLockAllowlist = props.focusLockAllowlist,
    _props$shouldCloseOnE = props.shouldCloseOnEscapePress,
    shouldCloseOnEscapePress = _props$shouldCloseOnE === void 0 ? true : _props$shouldCloseOnE,
    _props$shouldCloseOnO = props.shouldCloseOnOverlayClick,
    shouldCloseOnOverlayClick = _props$shouldCloseOnO === void 0 ? true : _props$shouldCloseOnO,
    _props$shouldScrollIn = props.shouldScrollInViewport,
    shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
    _props$shouldReturnFo = props.shouldReturnFocus,
    shouldReturnFocus = _props$shouldReturnFo === void 0 ? true : _props$shouldReturnFo,
    stackIndexOverride = props.stackIndex,
    providedOnClose = props.onClose,
    _props$onStackChange = props.onStackChange,
    onStackChange = _props$onStackChange === void 0 ? noop : _props$onStackChange,
    isBlanketHidden = props.isBlanketHidden,
    children = props.children,
    height = props.height,
    width = props.width,
    onCloseComplete = props.onCloseComplete,
    onOpenComplete = props.onOpenComplete,
    label = props.label,
    testId = props.testId,
    isFullScreen = props.isFullScreen;
  var calculatedStackIndex = useModalStack({
    onStackChange: onStackChange
  });
  var stackIndex = stackIndexOverride || calculatedStackIndex;
  var isForeground = stackIndex === 0;

  // When a user supplies a ref to focus we skip auto focus via react-focus-lock
  // When flag is true and a ref is not supplied, autofocus is true. See https://product-fabric.atlassian.net/browse/DSP-24307
  // When we remove boolean `autoFocus`, we won't have to worry about this
  var autoFocusLock = fg('platform_dst_autofocus-never-false-2') ? typeof autoFocus === 'boolean' : typeof autoFocus === 'boolean' ? autoFocus : false;
  var onCloseHandler = usePlatformLeafEventHandler({
    fn: providedOnClose || noop,
    action: 'closed',
    componentName: 'modalDialog',
    packageName: "@atlaskit/modal-dialog",
    packageVersion: "14.14.2"
  });
  var onBlanketClicked = useCallback(function (e) {
    if (shouldCloseOnOverlayClick) {
      onCloseHandler(e);
    }
  }, [shouldCloseOnOverlayClick, onCloseHandler]);

  // This ensures to prevent additional re-renders while nothing is passed to focusLockAllowlist explicitly.
  var allowListCallback = useCallback(function (element) {
    return allowlistElements(element, focusLockAllowlist);
  }, [focusLockAllowlist]);
  usePreventProgrammaticScroll();
  useNotifyOpenLayerObserver({
    type: 'modal',
    // Modal dialog is conditionally rendered when visible, so when this runs it is always open.
    isOpen: true,
    // Passing a no-op for now, as there isn't a real use case for closing the modal dialog programmatically
    // by the OpenLayerObserver. The only current use case is closing layers when resizing the nav layout,
    // which cannot happen while a modal dialog is open.
    onClose: noop
  });
  var modalDialogWithBlanket = /*#__PURE__*/React.createElement(Blanket, {
    isTinted: !isBlanketHidden,
    onBlanketClicked: onBlanketClicked,
    testId: testId && "".concat(testId, "--blanket")
  }, /*#__PURE__*/React.createElement(ModalDialog, {
    testId: testId,
    label: label,
    autoFocus: autoFocus,
    stackIndex: stackIndex,
    onClose: onCloseHandler,
    shouldCloseOnEscapePress: shouldCloseOnEscapePress && isForeground,
    shouldScrollInViewport: shouldScrollInViewport,
    height: height,
    width: width,
    onCloseComplete: onCloseComplete,
    onOpenComplete: onOpenComplete,
    hasProvidedOnClose: Boolean(providedOnClose),
    isFullScreen: isFullScreen
  }, children));
  var returnFocus = true;
  var onDeactivation = noop;
  if ('boolean' === typeof shouldReturnFocus) {
    returnFocus = shouldReturnFocus;
  } else {
    onDeactivation = function onDeactivation() {
      window.setTimeout(function () {
        var _shouldReturnFocus$cu;
        (_shouldReturnFocus$cu = shouldReturnFocus.current) === null || _shouldReturnFocus$cu === void 0 || _shouldReturnFocus$cu.focus();
      }, 0);
    };
  }
  return /*#__PURE__*/React.createElement(Layering, {
    isDisabled: false
  }, /*#__PURE__*/React.createElement(Portal, {
    zIndex: layers.modal()
  }, fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Motion, {
    enteringAnimation: "var(--ds-content-enter-medium, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn)",
    exitingAnimation: "var(--ds-content-exit-long, 200ms cubic-bezier(0.4, 0, 0, 1) FadeOut)"
  }, /*#__PURE__*/React.createElement("div", {
    "aria-hidden": !isForeground,
    className: ax(["_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0"])
  }, /*#__PURE__*/React.createElement(FocusLock, {
    autoFocus: autoFocusLock,
    returnFocus: returnFocus,
    onDeactivation: onDeactivation,
    whiteList: allowListCallback
  }, /*#__PURE__*/React.createElement(ScrollLock, null), shouldScrollInViewport ? /*#__PURE__*/React.createElement(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket))) : /*#__PURE__*/React.createElement(FadeIn, null, function (fadeInProps) {
    return /*#__PURE__*/React.createElement("div", _extends({}, fadeInProps, {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
      className: ax(["_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0", fadeInProps.className]),
      "aria-hidden": !isForeground
    }), /*#__PURE__*/React.createElement(FocusLock, {
      autoFocus: autoFocusLock,
      returnFocus: returnFocus,
      onDeactivation: onDeactivation,
      whiteList: allowListCallback
    }, /*#__PURE__*/React.createElement(ScrollLock, null), shouldScrollInViewport ? /*#__PURE__*/React.createElement(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket));
  })));
};
export default InternalModalWrapper;