@atlaskit/modal-dialog 14.2.12 → 14.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/modal-dialog
 
+## 14.3.0
+
+### Minor Changes
+
+- [#173162](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173162)
+  [`a3b23b79f4d68`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a3b23b79f4d68) -
+  Adds a new `FullScreenModalDialog` component which is exposed behind the `/full-screen`
+  entrypoint.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.2.12
 
 ### Patch Changes

package/dist/cjs/full-screen.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullScreenModalDialog = FullScreenModalDialog;
+Object.defineProperty(exports, "ModalBody", {
+  enumerable: true,
+  get: function get() {
+    return _modalBody.default;
+  }
+});
+Object.defineProperty(exports, "ModalFooter", {
+  enumerable: true,
+  get: function get() {
+    return _modalFooter.default;
+  }
+});
+Object.defineProperty(exports, "ModalHeader", {
+  enumerable: true,
+  get: function get() {
+    return _modalHeader.default;
+  }
+});
+Object.defineProperty(exports, "ModalTitle", {
+  enumerable: true,
+  get: function get() {
+    return _modalTitle.default;
+  }
+});
+Object.defineProperty(exports, "ModalTransition", {
+  enumerable: true,
+  get: function get() {
+    return _modalTransition.default;
+  }
+});
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _modalWrapper = _interopRequireDefault(require("./internal/components/modal-wrapper"));
+var _modalTransition = _interopRequireDefault(require("./modal-transition"));
+var _modalHeader = _interopRequireDefault(require("./modal-header"));
+var _modalTitle = _interopRequireDefault(require("./modal-title"));
+var _modalBody = _interopRequireDefault(require("./modal-body"));
+var _modalFooter = _interopRequireDefault(require("./modal-footer"));
+function FullScreenModalDialog(props) {
+  return /*#__PURE__*/_react.default.createElement(_modalWrapper.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, props, {
+    /**
+     * Making this an internal-only prop and exposing it through a facade
+     * component so that we can keep public types simple.
+     *
+     * Otherwise we need complex conditional types that are harder to
+     * understand / maintain and aren't actually any better for consumers.
+     */
+    isFullScreen: true
+    /**
+     * Setting width and height to 100% because the `isFullScreen` prop just
+     * removes the spacing around the modal. We still need to set the size to
+     * be 100%.
+     *
+     * Intentionally reusing the existing internals as much as possible to
+     * keep complexity low and avoid duplication. It also makes the fullscreen
+     * changes easier to remove.
+     */,
+    width: "100%",
+    height: "100%"
+    /**
+     * Full screen modals only support body scrolling, so that the header
+     * and close button will always stay visible.
+     */,
+    shouldScrollInViewport: false
+    /**
+     * This prop is a noop for fullscreen modals, so we aren't exposing it to consumers.
+     * Using `false` internally to avoid potential bugs.
+     */,
+    shouldCloseOnOverlayClick: false
+    /**
+     * The blanket is only briefly visible for fullscreen modals when fading in,
+     * but provides a bit more of a visual cue that it has appeared on top.
+     *
+     * We don't want consumers to disable it.
+     */,
+    isBlanketHidden: false
+  }));
+}

package/dist/cjs/index.js

@@ -43,7 +43,7 @@ Object.defineProperty(exports, "ModalTransition", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _modalWrapper.default;
+    return _modalDialog.default;
   }
 });
 Object.defineProperty(exports, "useModal", {
@@ -52,7 +52,7 @@ Object.defineProperty(exports, "useModal", {
     return _hooks.useModal;
   }
 });
-var _modalWrapper = _interopRequireDefault(require("./modal-wrapper"));
+var _modalDialog = _interopRequireDefault(require("./modal-dialog"));
 var _modalTransition = _interopRequireDefault(require("./modal-transition"));
 var _modalHeader = _interopRequireDefault(require("./modal-header"));
 var _modalTitle = _interopRequireDefault(require("./modal-title"));

package/dist/cjs/internal/components/modal-dialog.js

@@ -30,7 +30,8 @@ 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 LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
 var 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 _epkx1sit _we1i1kw7 _zg7p1cd0 _yakv1kw7 _4lht1kw7 _1xlt6m9r"
+  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"
 };
 var viewportScrollStyles = null;
 var bodyScrollStyles = null;
@@ -49,7 +50,9 @@ var ModalDialog = function ModalDialog(props) {
     hasProvidedOnClose = props.hasProvidedOnClose,
     children = props.children,
     label = props.label,
-    testId = props.testId;
+    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';
@@ -79,9 +82,10 @@ var ModalDialog = function ModalDialog(props) {
       testId: defaultTestId,
       titleId: titleId,
       onClose: onClose,
-      hasProvidedOnClose: hasProvidedOnClose
+      hasProvidedOnClose: hasProvidedOnClose,
+      isFullScreen: isFullScreen
     };
-  }, [defaultTestId, titleId, onClose, hasProvidedOnClose]);
+  }, [defaultTestId, titleId, onClose, hasProvidedOnClose, isFullScreen]);
   (0, _layering.useCloseOnEscapePress)({
     onClose: onClose,
     isDisabled: !shouldCloseOnEscapePress
@@ -91,13 +95,17 @@ var ModalDialog = function ModalDialog(props) {
   return /*#__PURE__*/React.createElement(_positioner.default, {
     stackIndex: stackIndex,
     shouldScrollInViewport: shouldScrollInViewport,
-    testId: defaultTestId
+    testId: defaultTestId,
+    isFullScreen: isFullScreen
   }, /*#__PURE__*/React.createElement(_context.ModalContext.Provider, {
     value: modalDialogContext
   }, /*#__PURE__*/React.createElement(_context.ScrollContext.Provider, {
     value: shouldScrollInViewport
-  }, /*#__PURE__*/React.createElement(_fadeIn.default, {
-    entranceDirection: "bottom",
+  }, /*#__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, {
@@ -110,7 +118,7 @@ var ModalDialog = function ModalDialog(props) {
         '--modal-dialog-height': (0, _utils.dialogHeight)(height)
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-      className: (0, _runtime.ax)([dialogStyles.root, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
+      className: (0, _runtime.ax)([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
       role: "dialog",
       "aria-labelledby": label ? undefined : titleId,
       "data-testid": defaultTestId,

package/dist/cjs/{modal-wrapper.js → internal/components/modal-wrapper.js}

@@ -21,9 +21,9 @@ var _layering = require("@atlaskit/layering");
 var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
-var _modalDialog = _interopRequireDefault(require("./internal/components/modal-dialog"));
-var _useModalStack = _interopRequireDefault(require("./internal/hooks/use-modal-stack"));
-var _usePreventProgrammaticScroll = _interopRequireDefault(require("./internal/hooks/use-prevent-programmatic-scroll"));
+var _useModalStack = _interopRequireDefault(require("../hooks/use-modal-stack"));
+var _usePreventProgrammaticScroll = _interopRequireDefault(require("../hooks/use-prevent-programmatic-scroll"));
+var _modalDialog = _interopRequireDefault(require("./modal-dialog"));
 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" != _typeof(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 fillScreenStyles = null;
 var allowlistElements = function allowlistElements(element, callback) {
@@ -49,7 +49,7 @@ var allowlistElements = function allowlistElements(element, callback) {
  * - [Code](https://atlassian.design/components/modal-dialog/code)
  * - [Usage](https://atlassian.design/components/modal-dialog/usage)
  */
-var ModalWrapper = function ModalWrapper(props) {
+var InternalModalWrapper = function InternalModalWrapper(props) {
   var _props$autoFocus = props.autoFocus,
     autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
     focusLockAllowlist = props.focusLockAllowlist,
@@ -72,7 +72,8 @@ var ModalWrapper = function ModalWrapper(props) {
     onCloseComplete = props.onCloseComplete,
     onOpenComplete = props.onOpenComplete,
     label = props.label,
-    testId = props.testId;
+    testId = props.testId,
+    isFullScreen = props.isFullScreen;
   var calculatedStackIndex = (0, _useModalStack.default)({
     onStackChange: onStackChange
   });
@@ -86,7 +87,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "14.2.11"
+    packageVersion: "14.2.12"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -115,7 +116,8 @@ var ModalWrapper = function ModalWrapper(props) {
     width: width,
     onCloseComplete: onCloseComplete,
     onOpenComplete: onOpenComplete,
-    hasProvidedOnClose: Boolean(providedOnClose)
+    hasProvidedOnClose: Boolean(providedOnClose),
+    isFullScreen: isFullScreen
   }, children));
   var returnFocus = true;
   var onDeactivation;
@@ -146,4 +148,4 @@ var ModalWrapper = function ModalWrapper(props) {
     }, /*#__PURE__*/React.createElement(_reactScrolllock.default, null), shouldScrollInViewport ? /*#__PURE__*/React.createElement(_reactScrolllock.TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket));
   })));
 };
-var _default = exports.default = ModalWrapper;
+var _default = exports.default = InternalModalWrapper;

package/dist/cjs/internal/components/positioner.compiled.css

@@ -13,4 +13,4 @@
 ._t9ec1b95{transform:translateY(var(--modal-dialog-translate-y))}
 ._t9ecglyw{transform:none}
 @media (prefers-reduced-motion:reduce){._1bumglyw{animation:none}._sedtglyw{transition:none}}
-@media (min-width:30rem){._1leth4k2{margin:var(--_wekiuq)}._eoawglyw{pointer-events:none}._we1i18uh{max-width:calc(100vw - 90pt)}._e8uozwhf{max-height:calc(100vh - 119px)}._y1k5stnw{position:absolute}._5ee4up15{inset-block-start:var(--_1v97vzp)}._1urridpf{inset-inline-end:0}._1juqidpf{inset-inline-start:0}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}
+@media (min-width:30rem){._1sg41wqb{margin-top:60px}._maxs1wug{margin-right:auto}._1jvh1wqb{margin-bottom:60px}._1uca1wug{margin-left:auto}._eoawglyw{pointer-events:none}._we1i18uh{max-width:calc(100vw - 90pt)}._e8uozwhf{max-height:calc(100vh - 119px)}._y1k5stnw{position:absolute}._5ee41wqb{inset-block-start:60px}._1urridpf{inset-inline-end:0}._1juqidpf{inset-inline-start:0}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}

package/dist/cjs/internal/components/positioner.js

@@ -1,7 +1,6 @@
 /* positioner.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -10,42 +9,55 @@ exports.default = void 0;
 require("./positioner.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _curves = require("@atlaskit/motion/curves");
 var _durations = require("@atlaskit/motion/durations");
 var _constants = require("@atlaskit/theme/constants");
 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" != _typeof(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); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var gutter = 60;
 var maxWidthDimensions = "calc(100vw - ".concat(gutter * 2, "px)");
 var maxHeightDimensions = "calc(100vh - ".concat(gutter * 2 - 1, "px)");
 
 // Flex and min-content are set to constrain the height of the body and support multi-column scrolling experiences
 var positionerStyles = null;
-var viewportScrollStyles = null;
-var bodyScrollStyles = null;
+var scrollStyles = {
+  viewport: "_4t3i1wug _kqswh2mm _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug _eoawglyw",
+  body: "_we1i18uh _e8uozwhf _y1k5stnw _5ee41wqb _1urridpf _1juqidpf _yakv1wug _4lht1wug _eoawglyw",
+  fullScreen: ""
+};
 var stackTransitionStyles = null;
 var stackTransformStyles = null;
 var stackIdleStyles = null;
+function getScrollBehavior(_ref) {
+  var isFullScreen = _ref.isFullScreen,
+    shouldScrollInViewport = _ref.shouldScrollInViewport;
+  if (isFullScreen) {
+    return 'fullScreen';
+  }
+  if (shouldScrollInViewport) {
+    return 'viewport';
+  }
+  return 'body';
+}
 var Positioner = function Positioner(props) {
   var children = props.children,
     stackIndex = props.stackIndex,
     shouldScrollInViewport = props.shouldScrollInViewport,
-    testId = props.testId;
+    testId = props.testId,
+    isFullScreen = props.isFullScreen;
+  var scrollBehavior = getScrollBehavior({
+    isFullScreen: isFullScreen,
+    shouldScrollInViewport: shouldScrollInViewport
+  });
   return /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId && "".concat(testId, "--positioner"),
-    className: (0, _runtime.ax)(["_1e0c1txw _1bsb1osq _p12f1osq _4t3i1osq _kqsw1n9t _1pby16oo _2lx21bp4 _152tidpf _1e02idpf", "_k8m01e03 _1bumglyw _sedtglyw", stackIndex > 0 ? "_t9ec1b95" : "_t9ecglyw", shouldScrollInViewport ? "_4t3i1wug _kqswh2mm _1leth4k2 _eoawglyw" : "_we1i18uh _e8uozwhf _y1k5stnw _5ee4up15 _1urridpf _1juqidpf _yakv1wug _4lht1wug _eoawglyw"]),
-    style: _objectSpread(_objectSpread({}, {
+    style: {
       '--modal-dialog-translate-y': "calc(".concat(stackIndex, "px * ", "var(--ds-space-100, 8px)", ")"),
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       transitionDuration: "".concat(_durations.durations.medium, "ms"),
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       transitionTimingFunction: _curves.easeInOut
-    }), {}, {
-      "--_wekiuq": (0, _runtime.ix)("".concat(gutter, "px auto")),
-      "--_1v97vzp": (0, _runtime.ix)("".concat(gutter, "px"))
-    })
+    },
+    "data-testid": testId && "".concat(testId, "--positioner"),
+    className: (0, _runtime.ax)(["_1e0c1txw _1bsb1osq _p12f1osq _4t3i1osq _kqsw1n9t _1pby16oo _2lx21bp4 _152tidpf _1e02idpf", "_k8m01e03 _1bumglyw _sedtglyw", stackIndex > 0 ? "_t9ec1b95" : "_t9ecglyw", scrollStyles[scrollBehavior]])
   }, children);
 };
 

package/dist/cjs/internal/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/modal-body.js

@@ -14,21 +14,12 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _hooks = require("./hooks");
 var _scrollContainer = _interopRequireDefault(require("./internal/components/scroll-container"));
 var _useScroll = _interopRequireDefault(require("./internal/hooks/use-scroll"));
-var bodyStyles = null;
-var fontStyles = null;
-
-/**
- * Adding the padding here avoids cropping the keyline on its sides.
- * The combined vertical spacing is maintained by subtracting the
- * keyline height from header and footer using negative margins.
- */
-var bodyScrollStyles = null;
-
-/**
- * Keylines will not be shown if scrolling in viewport so we do
- * not account for them in this case.
- */
-var viewportScrollStyles = null;
+var styles = {
+  root: "_16jlkb7n _1o9zkb7n _i0dl1wug",
+  font: "_11c82smr",
+  paddingBlock: "_1rjc1bk5",
+  paddingInline: "_18zr1ejb"
+};
 /**
  * __Modal body__
  *
@@ -40,19 +31,26 @@ var viewportScrollStyles = null;
  */
 var ModalBody = function ModalBody(props) {
   var children = props.children,
-    userDefinedTestId = props.testId;
+    userDefinedTestId = props.testId,
+    _props$hasInlinePaddi = props.hasInlinePadding,
+    hasInlinePadding = _props$hasInlinePaddi === void 0 ? true : _props$hasInlinePaddi;
   var _useModal = (0, _hooks.useModal)(),
     modalTestId = _useModal.testId;
   var shouldScrollInViewport = (0, _useScroll.default)();
   var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--body");
   return shouldScrollInViewport ? /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": testId,
-    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug", "_18zr1ejb", (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && "_11c82smr"])
+    className: (0, _runtime.ax)([styles.root, hasInlinePadding && styles.paddingInline, (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && styles.font])
   }, children) : /*#__PURE__*/_react.default.createElement(_reactScrolllock.TouchScrollable, null, /*#__PURE__*/_react.default.createElement(_scrollContainer.default, {
     testId: userDefinedTestId || modalTestId
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": testId,
-    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug", "_1rjc1bk5 _18zr1ejb", (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && "_11c82smr"])
+    className: (0, _runtime.ax)([styles.root,
+    /**
+     * Adding block padding for scroll keylines, which are only shown when the scrolling
+     * is on the container.
+     */
+    styles.paddingBlock, hasInlinePadding && styles.paddingInline, (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && styles.font])
   }, children)));
 };
 var _default = exports.default = ModalBody;

package/dist/cjs/modal-dialog.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ModalWrapper;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _modalWrapper = _interopRequireDefault(require("./internal/components/modal-wrapper"));
+function ModalWrapper(props) {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  return /*#__PURE__*/_react.default.createElement(_modalWrapper.default, (0, _extends2.default)({}, props, {
+    isFullScreen: false
+  }));
+}

package/dist/es2019/full-screen.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import InternalModalWrapper from './internal/components/modal-wrapper';
+export function FullScreenModalDialog(props) {
+  return /*#__PURE__*/React.createElement(InternalModalWrapper
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, props, {
+    /**
+     * Making this an internal-only prop and exposing it through a facade
+     * component so that we can keep public types simple.
+     *
+     * Otherwise we need complex conditional types that are harder to
+     * understand / maintain and aren't actually any better for consumers.
+     */
+    isFullScreen: true
+    /**
+     * Setting width and height to 100% because the `isFullScreen` prop just
+     * removes the spacing around the modal. We still need to set the size to
+     * be 100%.
+     *
+     * Intentionally reusing the existing internals as much as possible to
+     * keep complexity low and avoid duplication. It also makes the fullscreen
+     * changes easier to remove.
+     */,
+    width: "100%",
+    height: "100%"
+    /**
+     * Full screen modals only support body scrolling, so that the header
+     * and close button will always stay visible.
+     */,
+    shouldScrollInViewport: false
+    /**
+     * This prop is a noop for fullscreen modals, so we aren't exposing it to consumers.
+     * Using `false` internally to avoid potential bugs.
+     */,
+    shouldCloseOnOverlayClick: false
+    /**
+     * The blanket is only briefly visible for fullscreen modals when fading in,
+     * but provides a bit more of a visual cue that it has appeared on top.
+     *
+     * We don't want consumers to disable it.
+     */,
+    isBlanketHidden: false
+  }));
+}
+export { default as ModalTransition } from './modal-transition';
+export { default as ModalHeader } from './modal-header';
+export { default as ModalTitle } from './modal-title';
+export { default as ModalBody } from './modal-body';
+export { default as ModalFooter } from './modal-footer';

package/dist/es2019/index.js

@@ -1,4 +1,4 @@
-export { default } from './modal-wrapper';
+export { default } from './modal-dialog';
 export { default as ModalTransition } from './modal-transition';
 export { default as ModalHeader } from './modal-header';
 export { default as ModalTitle } from './modal-title';

package/dist/es2019/internal/components/modal-dialog.js

@@ -19,7 +19,8 @@ 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 _epkx1sit _we1i1kw7 _zg7p1cd0 _yakv1kw7 _4lht1kw7 _1xlt6m9r"
+  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;
@@ -37,7 +38,8 @@ const ModalDialog = props => {
     hasProvidedOnClose,
     children,
     label,
-    testId
+    testId,
+    isFullScreen = false
   } = props;
   const id = useId();
   const titleId = `modal-dialog-title-${id}`;
@@ -64,8 +66,9 @@ const ModalDialog = props => {
     testId: defaultTestId,
     titleId,
     onClose,
-    hasProvidedOnClose
-  }), [defaultTestId, titleId, onClose, hasProvidedOnClose]);
+    hasProvidedOnClose,
+    isFullScreen
+  }), [defaultTestId, titleId, onClose, hasProvidedOnClose, isFullScreen]);
   useCloseOnEscapePress({
     onClose,
     isDisabled: !shouldCloseOnEscapePress
@@ -76,13 +79,17 @@ const ModalDialog = props => {
   return /*#__PURE__*/React.createElement(Positioner, {
     stackIndex: stackIndex,
     shouldScrollInViewport: shouldScrollInViewport,
-    testId: defaultTestId
+    testId: defaultTestId,
+    isFullScreen: isFullScreen
   }, /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: modalDialogContext
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
     value: shouldScrollInViewport
-  }, /*#__PURE__*/React.createElement(FadeIn, {
-    entranceDirection: "bottom",
+  }, /*#__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,
@@ -94,7 +101,7 @@ const ModalDialog = props => {
       '--modal-dialog-height': dialogHeight(height)
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax([dialogStyles.root, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
+    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,

package/dist/es2019/{modal-wrapper.js → internal/components/modal-wrapper.js}

@@ -13,9 +13,9 @@ import { Layering } from '@atlaskit/layering';
 import FadeIn from '@atlaskit/motion/fade-in';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
-import ModalDialog from './internal/components/modal-dialog';
-import useModalStack from './internal/hooks/use-modal-stack';
-import usePreventProgrammaticScroll from './internal/hooks/use-prevent-programmatic-scroll';
+import useModalStack from '../hooks/use-modal-stack';
+import usePreventProgrammaticScroll from '../hooks/use-prevent-programmatic-scroll';
+import ModalDialog from './modal-dialog';
 const fillScreenStyles = null;
 const allowlistElements = (element, callback) => {
   // Allow focus to reach elements outside the modal:
@@ -40,7 +40,7 @@ const allowlistElements = (element, callback) => {
  * - [Code](https://atlassian.design/components/modal-dialog/code)
  * - [Usage](https://atlassian.design/components/modal-dialog/usage)
  */
-const ModalWrapper = props => {
+const InternalModalWrapper = props => {
   const {
     autoFocus = true,
     focusLockAllowlist,
@@ -58,7 +58,8 @@ const ModalWrapper = props => {
     onCloseComplete,
     onOpenComplete,
     label,
-    testId
+    testId,
+    isFullScreen
   } = props;
   const calculatedStackIndex = useModalStack({
     onStackChange
@@ -73,7 +74,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "14.2.11"
+    packageVersion: "14.2.12"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {
@@ -100,7 +101,8 @@ const ModalWrapper = props => {
     width: width,
     onCloseComplete: onCloseComplete,
     onOpenComplete: onOpenComplete,
-    hasProvidedOnClose: Boolean(providedOnClose)
+    hasProvidedOnClose: Boolean(providedOnClose),
+    isFullScreen: isFullScreen
   }, children));
   let returnFocus = true;
   let onDeactivation;
@@ -129,4 +131,4 @@ const ModalWrapper = props => {
     whiteList: allowListCallback
   }, /*#__PURE__*/React.createElement(ScrollLock, null), shouldScrollInViewport ? /*#__PURE__*/React.createElement(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket)))));
 };
-export default ModalWrapper;
+export default InternalModalWrapper;

package/dist/es2019/internal/components/positioner.js

@@ -11,18 +11,38 @@ const maxHeightDimensions = `calc(100vh - ${gutter * 2 - 1}px)`;
 
 // Flex and min-content are set to constrain the height of the body and support multi-column scrolling experiences
 const positionerStyles = null;
-const viewportScrollStyles = null;
-const bodyScrollStyles = null;
+const scrollStyles = {
+  viewport: "_4t3i1wug _kqswh2mm _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug _eoawglyw",
+  body: "_we1i18uh _e8uozwhf _y1k5stnw _5ee41wqb _1urridpf _1juqidpf _yakv1wug _4lht1wug _eoawglyw",
+  fullScreen: ""
+};
 const stackTransitionStyles = null;
 const stackTransformStyles = null;
 const stackIdleStyles = null;
+function getScrollBehavior({
+  isFullScreen,
+  shouldScrollInViewport
+}) {
+  if (isFullScreen) {
+    return 'fullScreen';
+  }
+  if (shouldScrollInViewport) {
+    return 'viewport';
+  }
+  return 'body';
+}
 const Positioner = props => {
   const {
     children,
     stackIndex,
     shouldScrollInViewport,
-    testId
+    testId,
+    isFullScreen
   } = props;
+  const scrollBehavior = getScrollBehavior({
+    isFullScreen,
+    shouldScrollInViewport
+  });
   return /*#__PURE__*/React.createElement("div", {
     style: {
       '--modal-dialog-translate-y': `calc(${stackIndex}px * ${"var(--ds-space-100, 8px)"})`,
@@ -32,7 +52,7 @@ const Positioner = props => {
       transitionTimingFunction: easeInOut
     },
     "data-testid": testId && `${testId}--positioner`,
-    className: ax(["_1e0c1txw _1bsb1osq _p12f1osq _4t3i1osq _kqsw1n9t _1pby16oo _2lx21bp4 _152tidpf _1e02idpf", "_k8m01e03 _1bumglyw _sedtglyw", stackIndex > 0 ? "_t9ec1b95" : "_t9ecglyw", shouldScrollInViewport ? "_4t3i1wug _kqswh2mm _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug _eoawglyw" : "_we1i18uh _e8uozwhf _y1k5stnw _5ee41wqb _1urridpf _1juqidpf _yakv1wug _4lht1wug _eoawglyw"])
+    className: ax(["_1e0c1txw _1bsb1osq _p12f1osq _4t3i1osq _kqsw1n9t _1pby16oo _2lx21bp4 _152tidpf _1e02idpf", "_k8m01e03 _1bumglyw _sedtglyw", stackIndex > 0 ? "_t9ec1b95" : "_t9ecglyw", scrollStyles[scrollBehavior]])
   }, children);
 };
 

package/dist/es2019/internal/types.js

@@ -0,0 +1 @@
+export {};