@atlaskit/modal-dialog
Version:
A modal dialog displays content that requires user interaction, in a layer above the page.
142 lines (139 loc) • 6.27 kB
JavaScript
/* modal-wrapper.tsx generated by @compiled/babel-plugin v0.36.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 FadeIn from '@atlaskit/motion/fade-in';
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
var autoFocusLock = typeof autoFocus === 'boolean' ? autoFocus : false;
var onCloseHandler = usePlatformLeafEventHandler({
fn: providedOnClose || noop,
action: 'closed',
componentName: 'modalDialog',
packageName: "@atlaskit/modal-dialog",
packageVersion: "14.3.3"
});
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();
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;
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()
}, /*#__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;