@atlaskit/modal-dialog
Version:
A modal dialog displays content that requires user interaction, in a layer above the page.
183 lines (180 loc) • 10.2 kB
JavaScript
/* modal-dialog.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./modal-dialog.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _css = require("@atlaskit/css");
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
var _useId = require("@atlaskit/ds-lib/use-id");
var _layering = require("@atlaskit/layering");
var _motion = require("@atlaskit/motion");
var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
var _context = require("../context");
var _useOnMotionFinish3 = _interopRequireDefault(require("../hooks/use-on-motion-finish"));
var _element = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element");
var _external = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external");
var _textSelection = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection");
var _width = require("../width");
var _positioner = _interopRequireDefault(require("./positioner"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var dialogWidth = function dialogWidth(input) {
if (!input) {
return 'auto';
}
var isWidthName = _width.width.values.indexOf(input.toString()) !== -1;
var widthName = isWidthName && input;
if (widthName) {
return "".concat(_width.width.widths[widthName], "px");
}
return typeof input === 'number' ? "".concat(input, "px") : input;
};
var dialogHeight = function dialogHeight(input) {
if (!input) {
return 'auto';
}
return typeof input === 'number' ? "".concat(input, "px") : input;
};
var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
var dialogStyles = {
root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p130s _yakv1kw7 _4lht1kw7 _1xlt6m9r",
borderRadius: "_epkxfajl",
borderRadiusT26Shape: "_epkxpb1k",
motion: "_4t3i1osq _c71l1kw7 _p12f1kw7 _1jyk1wug _yakv1kw7 _4lht1kw7",
fullscreen: "_1jyk1osq"
};
var viewportScrollStyles = null;
var bodyScrollStyles = null;
var ModalDialog = function ModalDialog(props) {
var _props$width = props.width,
width = _props$width === void 0 ? 'medium' : _props$width,
_props$shouldScrollIn = props.shouldScrollInViewport,
shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
shouldCloseOnEscapePress = props.shouldCloseOnEscapePress,
providedAutoFocus = props.autoFocus,
stackIndex = props.stackIndex,
onClose = props.onClose,
onCloseComplete = props.onCloseComplete,
onOpenComplete = props.onOpenComplete,
height = props.height,
hasProvidedOnClose = props.hasProvidedOnClose,
children = props.children,
label = props.label,
testId = props.testId,
_props$isFullScreen = props.isFullScreen,
isFullScreen = _props$isFullScreen === void 0 ? false : _props$isFullScreen;
var id = (0, _useId.useId)();
var titleId = "modal-dialog-title-".concat(id);
var defaultTestId = testId || 'modal-dialog';
// https://product-fabric.atlassian.net/browse/DSP-24307
// If flag and falsy, use true instead.
// When we remove boolean `autoFocus`, we won't have to worry about this
var autoFocus = !providedAutoFocus ? true : providedAutoFocus;
(0, _react.useEffect)(function () {
// 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 (0, _combine.combine)((0, _element.disableDraggingToCrossOriginIFramesForElement)(), (0, _textSelection.disableDraggingToCrossOriginIFramesForTextSelection)(), (0, _external.disableDraggingToCrossOriginIFramesForExternal)());
}, []);
(0, _useAutoFocus.default)((0, _typeof2.default)(autoFocus) === 'object' ? autoFocus : undefined,
// When a user supplies a ref to focus we enable this hook
(0, _typeof2.default)(autoFocus) === 'object');
var _useOnMotionFinish = (0, _useOnMotionFinish3.default)({
onOpenComplete: onOpenComplete,
onCloseComplete: onCloseComplete
}),
_useOnMotionFinish2 = (0, _slicedToArray2.default)(_useOnMotionFinish, 2),
motionRef = _useOnMotionFinish2[0],
onMotionFinish = _useOnMotionFinish2[1];
var modalDialogContext = (0, _react.useMemo)(function () {
return {
testId: defaultTestId,
titleId: titleId,
onClose: onClose,
hasProvidedOnClose: hasProvidedOnClose,
isFullScreen: isFullScreen
};
}, [defaultTestId, titleId, onClose, hasProvidedOnClose, isFullScreen]);
(0, _layering.useCloseOnEscapePress)({
onClose: onClose,
isDisabled: !shouldCloseOnEscapePress
});
var _useLayering = (0, _layering.useLayering)(),
currentLevel = _useLayering.currentLevel;
return /*#__PURE__*/React.createElement(_positioner.default, {
stackIndex: stackIndex,
shouldScrollInViewport: shouldScrollInViewport,
testId: defaultTestId,
isFullScreen: isFullScreen
}, /*#__PURE__*/React.createElement(_context.ModalContext.Provider, {
value: modalDialogContext
}, /*#__PURE__*/React.createElement(_context.ScrollContext.Provider, {
value: shouldScrollInViewport
}, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(_motion.Motion, {
enteringAnimation: "var(--ds-modal-enter, 200ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn)",
exitingAnimation: "var(--ds-modal-exit, 200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut)",
onFinish: onMotionFinish,
xcss: (0, _css.cx)(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen)
}, /*#__PURE__*/React.createElement("section", {
"aria-label": label,
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)
},
role: "dialog",
"aria-labelledby": label ? undefined : titleId,
"data-testid": defaultTestId,
"data-modal-stack": stackIndex,
tabIndex: -1,
"aria-modal": true,
"data-ds--level": currentLevel,
className: (0, _runtime.ax)([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
}, children)) : /*#__PURE__*/React.createElement(_fadeIn.default
/**
* We don't want a 'slide in' for the full screen modals.
*/, {
entranceDirection: isFullScreen ? undefined : 'bottom',
onFinish: onMotionFinish
}, function (bottomFadeInProps) {
return /*#__PURE__*/React.createElement("section", (0, _extends2.default)({}, bottomFadeInProps, {
"aria-label": label,
ref: (0, _mergeRefs.default)([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: (0, _runtime.ax)([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, 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
var _default = exports.default = ModalDialog;