@atlaskit/modal-dialog 13.1.1 → 13.3.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/modal-dialog
 
+## 13.3.0
+
+### Minor Changes
+
+- [#129312](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129312)
+  [`26ac9f1e06b2e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/26ac9f1e06b2e) -
+  Modal body now explicitly sets the font style to use typography tokens, instead of relying on the
+  CSS reset to be present. This change is behind the feature flag
+  `platform_ads_explicit_font_styles`.
+
+## 13.2.0
+
+### Minor Changes
+
+- [#127054](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127054)
+  [`fb709895d8d5c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fb709895d8d5c) -
+  [ux] Adds a new `hasCloseButton` prop to `ModalHeader` to add a close button. This uses the
+  exported `CloseButton` internally.
+
+  This is done to improve the accessibility of all modal dialogs and ensure that users of assistive
+  technology get full context of the modal and so that pointer users have a more clear way to close
+  the modal.
+
 ## 13.1.1
 
 ### Patch Changes

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

@@ -85,6 +85,7 @@ var ModalDialog = function ModalDialog(props) {
     onCloseComplete = props.onCloseComplete,
     onOpenComplete = props.onOpenComplete,
     height = props.height,
+    hasProvidedOnClose = props.hasProvidedOnClose,
     children = props.children,
     label = props.label,
     testId = props.testId;
@@ -115,9 +116,10 @@ var ModalDialog = function ModalDialog(props) {
     return {
       testId: testId,
       titleId: titleId,
-      onClose: onClose
+      onClose: onClose,
+      hasProvidedOnClose: hasProvidedOnClose
     };
-  }, [testId, titleId, onClose]);
+  }, [testId, titleId, onClose, hasProvidedOnClose]);
   (0, _layering.useCloseOnEscapePress)({
     onClose: onClose,
     isDisabled: !shouldCloseOnEscapePress

package/dist/cjs/modal-body.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactScrolllock = require("react-scrolllock");
+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"));
@@ -22,6 +23,9 @@ var bodyStyles = (0, _react2.css)({
   /* This ensures the body fills the whole space between header and footer. */
   flex: '1 1 auto'
 });
+var fontStyles = (0, _react2.css)({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
+});
 
 /**
  * Adding the padding here avoids cropping the keyline on its sides.
@@ -57,12 +61,12 @@ var ModalBody = function ModalBody(props) {
   var shouldScrollInViewport = (0, _useScroll.default)();
   var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--body");
   return shouldScrollInViewport ? (0, _react2.jsx)("div", {
-    css: [bodyStyles, viewportScrollStyles],
+    css: [bodyStyles, viewportScrollStyles, (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && fontStyles],
     "data-testid": testId
   }, children) : (0, _react2.jsx)(_reactScrolllock.TouchScrollable, null, (0, _react2.jsx)(_scrollContainer.default, {
     testId: userDefinedTestId || modalTestId
   }, (0, _react2.jsx)("div", {
-    css: [bodyStyles, bodyScrollStyles],
+    css: [bodyStyles, bodyScrollStyles, (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && fontStyles],
     "data-testid": testId
   }, children)));
 };

package/dist/cjs/modal-header.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
+var _primitives = require("@atlaskit/primitives");
+var _closeButton = require("./close-button");
 var _hooks = require("./hooks");
 /**
  * @jsxRuntime classic
@@ -25,6 +27,15 @@ var headerStyles = (0, _react2.css)({
   paddingBlockStart: "var(--ds-space-300, 24px)",
   paddingInline: "var(--ds-space-300, 24px)"
 });
+var gridStyles = (0, _primitives.xcss)({
+  width: '100%'
+});
+var closeContainerStyles = (0, _primitives.xcss)({
+  gridArea: 'close'
+});
+var titleContainerStyles = (0, _primitives.xcss)({
+  gridArea: 'title'
+});
 /**
  * __Modal header__
  *
@@ -36,13 +47,34 @@ var headerStyles = (0, _react2.css)({
  */
 var ModalHeader = function ModalHeader(props) {
   var children = props.children,
-    userDefinedTestId = props.testId;
+    userDefinedTestId = props.testId,
+    _props$hasCloseButton = props.hasCloseButton,
+    hasCloseButton = _props$hasCloseButton === void 0 ? false : _props$hasCloseButton;
   var _useModal = (0, _hooks.useModal)(),
+    hasProvidedOnClose = _useModal.hasProvidedOnClose,
+    onClose = _useModal.onClose,
     modalTestId = _useModal.testId;
   var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--header");
+
+  // Only show if an onClose was provided for the modal dialog
+  var shouldShowCloseButton = hasCloseButton && hasProvidedOnClose && onClose;
   return (0, _react2.jsx)("div", {
     css: headerStyles,
     "data-testid": testId
-  }, children);
+  }, shouldShowCloseButton ? (0, _react2.jsx)(_primitives.Grid, {
+    gap: "space.200",
+    templateAreas: ['title close'],
+    xcss: gridStyles
+  }, (0, _react2.jsx)(_primitives.Flex, {
+    xcss: titleContainerStyles,
+    justifyContent: "start",
+    alignItems: "center"
+  }, children), (0, _react2.jsx)(_primitives.Flex, {
+    xcss: closeContainerStyles,
+    justifyContent: "end"
+  }, (0, _react2.jsx)(_closeButton.CloseButton, {
+    onClick: onClose,
+    testId: modalTestId
+  }))) : children);
 };
 var _default = exports.default = ModalHeader;

package/dist/cjs/modal-title.js

@@ -21,6 +21,22 @@ var iconColor = {
   danger: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
   warning: "var(--ds-icon-warning, #D97008)"
 };
+var iconStyles = (0, _react.css)({
+  flex: '0 0 auto',
+  // The following properties have been added purely to avoid a global style override in Jira breaking alignment between the icon and title text.
+  // https://stash.atlassian.com/projects/JIRACLOUD/repos/jira/browse/jira-components/jira-legacy-frontend/jira-atlaskit-module/src/main/resources/jira-atlaskit-module/css/adg3-general-overrides.less?at=master#24
+  // When the override is removed, these can be removed.
+  color: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: 'inherit',
+  fontStyle: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontWeight: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  letterSpacing: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: 'inherit'
+});
 var titleStyles = (0, _react.css)({
   display: 'flex',
   minWidth: 0,
@@ -38,22 +54,6 @@ var textStyles = (0, _react.css)({
   flex: '1 1 auto',
   wordWrap: 'break-word'
 });
-var iconStyles = (0, _react.css)({
-  flex: '0 0 auto',
-  // The following properties have been added purely to avoid a global style override in Jira breaking alignment between the icon and title text.
-  // https://stash.atlassian.com/projects/JIRACLOUD/repos/jira/browse/jira-components/jira-legacy-frontend/jira-atlaskit-module/src/main/resources/jira-atlaskit-module/css/adg3-general-overrides.less?at=master#24
-  // When the override is removed, these can be removed.
-  color: 'inherit',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontSize: 'inherit',
-  fontStyle: 'inherit',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontWeight: 'inherit',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  letterSpacing: 'inherit',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 'inherit'
-});
 var truncatedTextStyles = (0, _react.css)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',

package/dist/cjs/modal-wrapper.js

@@ -78,8 +78,7 @@ var ModalWrapper = function ModalWrapper(props) {
     _props$shouldReturnFo = props.shouldReturnFocus,
     shouldReturnFocus = _props$shouldReturnFo === void 0 ? true : _props$shouldReturnFo,
     stackIndexOverride = props.stackIndex,
-    _props$onClose = props.onClose,
-    onClose = _props$onClose === void 0 ? _noop.default : _props$onClose,
+    providedOnClose = props.onClose,
     _props$onStackChange = props.onStackChange,
     onStackChange = _props$onStackChange === void 0 ? _noop.default : _props$onStackChange,
     isBlanketHidden = props.isBlanketHidden,
@@ -99,11 +98,11 @@ var ModalWrapper = function ModalWrapper(props) {
   // 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 = (0, _analyticsNext.usePlatformLeafEventHandler)({
-    fn: onClose,
+    fn: providedOnClose || _noop.default,
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "13.1.1"
+    packageVersion: "13.3.0"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -131,7 +130,8 @@ var ModalWrapper = function ModalWrapper(props) {
     height: height,
     width: width,
     onCloseComplete: onCloseComplete,
-    onOpenComplete: onOpenComplete
+    onOpenComplete: onOpenComplete,
+    hasProvidedOnClose: Boolean(providedOnClose)
   }, children));
   var returnFocus = true;
   var onDeactivation;

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

@@ -86,6 +86,7 @@ const ModalDialog = props => {
     onCloseComplete,
     onOpenComplete,
     height,
+    hasProvidedOnClose,
     children,
     label,
     testId
@@ -113,8 +114,9 @@ const ModalDialog = props => {
   const modalDialogContext = useMemo(() => ({
     testId,
     titleId,
-    onClose
-  }), [testId, titleId, onClose]);
+    onClose,
+    hasProvidedOnClose
+  }), [testId, titleId, onClose, hasProvidedOnClose]);
   useCloseOnEscapePress({
     onClose,
     isDisabled: !shouldCloseOnEscapePress

package/dist/es2019/modal-body.js

@@ -8,6 +8,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { TouchScrollable } from 'react-scrolllock';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useModal } from './hooks';
 import ScrollContainer from './internal/components/scroll-container';
 import useScroll from './internal/hooks/use-scroll';
@@ -15,6 +16,9 @@ const bodyStyles = css({
   /* This ensures the body fills the whole space between header and footer. */
   flex: '1 1 auto'
 });
+const fontStyles = css({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
+});
 
 /**
  * Adding the padding here avoids cropping the keyline on its sides.
@@ -53,12 +57,12 @@ const ModalBody = props => {
   const shouldScrollInViewport = useScroll();
   const testId = userDefinedTestId || modalTestId && `${modalTestId}--body`;
   return shouldScrollInViewport ? jsx("div", {
-    css: [bodyStyles, viewportScrollStyles],
+    css: [bodyStyles, viewportScrollStyles, fg('platform_ads_explicit_font_styles') && fontStyles],
     "data-testid": testId
   }, children) : jsx(TouchScrollable, null, jsx(ScrollContainer, {
     testId: userDefinedTestId || modalTestId
   }, jsx("div", {
-    css: [bodyStyles, bodyScrollStyles],
+    css: [bodyStyles, bodyScrollStyles, fg('platform_ads_explicit_font_styles') && fontStyles],
     "data-testid": testId
   }, children)));
 };

package/dist/es2019/modal-header.js

@@ -6,6 +6,8 @@ import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { Flex, Grid, xcss } from '@atlaskit/primitives';
+import { CloseButton } from './close-button';
 import { useModal } from './hooks';
 const headerStyles = css({
   display: 'flex',
@@ -17,6 +19,15 @@ const headerStyles = css({
   paddingBlockStart: "var(--ds-space-300, 24px)",
   paddingInline: "var(--ds-space-300, 24px)"
 });
+const gridStyles = xcss({
+  width: '100%'
+});
+const closeContainerStyles = xcss({
+  gridArea: 'close'
+});
+const titleContainerStyles = xcss({
+  gridArea: 'title'
+});
 /**
  * __Modal header__
  *
@@ -29,15 +40,35 @@ const headerStyles = css({
 const ModalHeader = props => {
   const {
     children,
-    testId: userDefinedTestId
+    testId: userDefinedTestId,
+    hasCloseButton = false
   } = props;
   const {
+    hasProvidedOnClose,
+    onClose,
     testId: modalTestId
   } = useModal();
   const testId = userDefinedTestId || modalTestId && `${modalTestId}--header`;
+
+  // Only show if an onClose was provided for the modal dialog
+  const shouldShowCloseButton = hasCloseButton && hasProvidedOnClose && onClose;
   return jsx("div", {
     css: headerStyles,
     "data-testid": testId
-  }, children);
+  }, shouldShowCloseButton ? jsx(Grid, {
+    gap: "space.200",
+    templateAreas: ['title close'],
+    xcss: gridStyles
+  }, jsx(Flex, {
+    xcss: titleContainerStyles,
+    justifyContent: "start",
+    alignItems: "center"
+  }, children), jsx(Flex, {
+    xcss: closeContainerStyles,
+    justifyContent: "end"
+  }, jsx(CloseButton, {
+    onClick: onClose,
+    testId: modalTestId
+  }))) : children);
 };
 export default ModalHeader;

package/dist/es2019/modal-title.js

@@ -13,6 +13,22 @@ const iconColor = {
   danger: `var(--ds-icon-danger, ${R400})`,
   warning: "var(--ds-icon-warning, #D97008)"
 };
+const iconStyles = css({
+  flex: '0 0 auto',
+  // The following properties have been added purely to avoid a global style override in Jira breaking alignment between the icon and title text.
+  // https://stash.atlassian.com/projects/JIRACLOUD/repos/jira/browse/jira-components/jira-legacy-frontend/jira-atlaskit-module/src/main/resources/jira-atlaskit-module/css/adg3-general-overrides.less?at=master#24
+  // When the override is removed, these can be removed.
+  color: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: 'inherit',
+  fontStyle: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontWeight: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  letterSpacing: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: 'inherit'
+});
 const titleStyles = css({
   display: 'flex',
   minWidth: 0,
@@ -30,22 +46,6 @@ const textStyles = css({
   flex: '1 1 auto',
   wordWrap: 'break-word'
 });
-const iconStyles = css({
-  flex: '0 0 auto',
-  // The following properties have been added purely to avoid a global style override in Jira breaking alignment between the icon and title text.
-  // https://stash.atlassian.com/projects/JIRACLOUD/repos/jira/browse/jira-components/jira-legacy-frontend/jira-atlaskit-module/src/main/resources/jira-atlaskit-module/css/adg3-general-overrides.less?at=master#24
-  // When the override is removed, these can be removed.
-  color: 'inherit',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontSize: 'inherit',
-  fontStyle: 'inherit',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontWeight: 'inherit',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  letterSpacing: 'inherit',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 'inherit'
-});
 const truncatedTextStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',

package/dist/es2019/modal-wrapper.js

@@ -64,7 +64,7 @@ const ModalWrapper = props => {
     shouldScrollInViewport = false,
     shouldReturnFocus = true,
     stackIndex: stackIndexOverride,
-    onClose = noop,
+    onClose: providedOnClose,
     onStackChange = noop,
     isBlanketHidden,
     children,
@@ -84,11 +84,11 @@ const ModalWrapper = props => {
   // When a user supplies a ref to focus we skip auto focus via react-focus-lock
   const autoFocusLock = typeof autoFocus === 'boolean' ? autoFocus : false;
   const onCloseHandler = usePlatformLeafEventHandler({
-    fn: onClose,
+    fn: providedOnClose || noop,
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "13.1.1"
+    packageVersion: "13.3.0"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {
@@ -114,7 +114,8 @@ const ModalWrapper = props => {
     height: height,
     width: width,
     onCloseComplete: onCloseComplete,
-    onOpenComplete: onOpenComplete
+    onOpenComplete: onOpenComplete,
+    hasProvidedOnClose: Boolean(providedOnClose)
   }, children));
   let returnFocus = true;
   let onDeactivation;

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

@@ -78,6 +78,7 @@ var ModalDialog = function ModalDialog(props) {
     onCloseComplete = props.onCloseComplete,
     onOpenComplete = props.onOpenComplete,
     height = props.height,
+    hasProvidedOnClose = props.hasProvidedOnClose,
     children = props.children,
     label = props.label,
     testId = props.testId;
@@ -108,9 +109,10 @@ var ModalDialog = function ModalDialog(props) {
     return {
       testId: testId,
       titleId: titleId,
-      onClose: onClose
+      onClose: onClose,
+      hasProvidedOnClose: hasProvidedOnClose
     };
-  }, [testId, titleId, onClose]);
+  }, [testId, titleId, onClose, hasProvidedOnClose]);
   useCloseOnEscapePress({
     onClose: onClose,
     isDisabled: !shouldCloseOnEscapePress

package/dist/esm/modal-body.js

@@ -8,6 +8,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { TouchScrollable } from 'react-scrolllock';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useModal } from './hooks';
 import ScrollContainer from './internal/components/scroll-container';
 import useScroll from './internal/hooks/use-scroll';
@@ -15,6 +16,9 @@ var bodyStyles = css({
   /* This ensures the body fills the whole space between header and footer. */
   flex: '1 1 auto'
 });
+var fontStyles = css({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
+});
 
 /**
  * Adding the padding here avoids cropping the keyline on its sides.
@@ -50,12 +54,12 @@ var ModalBody = function ModalBody(props) {
   var shouldScrollInViewport = useScroll();
   var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--body");
   return shouldScrollInViewport ? jsx("div", {
-    css: [bodyStyles, viewportScrollStyles],
+    css: [bodyStyles, viewportScrollStyles, fg('platform_ads_explicit_font_styles') && fontStyles],
     "data-testid": testId
   }, children) : jsx(TouchScrollable, null, jsx(ScrollContainer, {
     testId: userDefinedTestId || modalTestId
   }, jsx("div", {
-    css: [bodyStyles, bodyScrollStyles],
+    css: [bodyStyles, bodyScrollStyles, fg('platform_ads_explicit_font_styles') && fontStyles],
     "data-testid": testId
   }, children)));
 };

package/dist/esm/modal-header.js

@@ -6,6 +6,8 @@ import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { Flex, Grid, xcss } from '@atlaskit/primitives';
+import { CloseButton } from './close-button';
 import { useModal } from './hooks';
 var headerStyles = css({
   display: 'flex',
@@ -17,6 +19,15 @@ var headerStyles = css({
   paddingBlockStart: "var(--ds-space-300, 24px)",
   paddingInline: "var(--ds-space-300, 24px)"
 });
+var gridStyles = xcss({
+  width: '100%'
+});
+var closeContainerStyles = xcss({
+  gridArea: 'close'
+});
+var titleContainerStyles = xcss({
+  gridArea: 'title'
+});
 /**
  * __Modal header__
  *
@@ -28,13 +39,34 @@ var headerStyles = css({
  */
 var ModalHeader = function ModalHeader(props) {
   var children = props.children,
-    userDefinedTestId = props.testId;
+    userDefinedTestId = props.testId,
+    _props$hasCloseButton = props.hasCloseButton,
+    hasCloseButton = _props$hasCloseButton === void 0 ? false : _props$hasCloseButton;
   var _useModal = useModal(),
+    hasProvidedOnClose = _useModal.hasProvidedOnClose,
+    onClose = _useModal.onClose,
     modalTestId = _useModal.testId;
   var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--header");
+
+  // Only show if an onClose was provided for the modal dialog
+  var shouldShowCloseButton = hasCloseButton && hasProvidedOnClose && onClose;
   return jsx("div", {
     css: headerStyles,
     "data-testid": testId
-  }, children);
+  }, shouldShowCloseButton ? jsx(Grid, {
+    gap: "space.200",
+    templateAreas: ['title close'],
+    xcss: gridStyles
+  }, jsx(Flex, {
+    xcss: titleContainerStyles,
+    justifyContent: "start",
+    alignItems: "center"
+  }, children), jsx(Flex, {
+    xcss: closeContainerStyles,
+    justifyContent: "end"
+  }, jsx(CloseButton, {
+    onClick: onClose,
+    testId: modalTestId
+  }))) : children);
 };
 export default ModalHeader;

package/dist/esm/modal-title.js

@@ -13,6 +13,22 @@ var iconColor = {
   danger: "var(--ds-icon-danger, ".concat(R400, ")"),
   warning: "var(--ds-icon-warning, #D97008)"
 };
+var iconStyles = css({
+  flex: '0 0 auto',
+  // The following properties have been added purely to avoid a global style override in Jira breaking alignment between the icon and title text.
+  // https://stash.atlassian.com/projects/JIRACLOUD/repos/jira/browse/jira-components/jira-legacy-frontend/jira-atlaskit-module/src/main/resources/jira-atlaskit-module/css/adg3-general-overrides.less?at=master#24
+  // When the override is removed, these can be removed.
+  color: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: 'inherit',
+  fontStyle: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontWeight: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  letterSpacing: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: 'inherit'
+});
 var titleStyles = css({
   display: 'flex',
   minWidth: 0,
@@ -30,22 +46,6 @@ var textStyles = css({
   flex: '1 1 auto',
   wordWrap: 'break-word'
 });
-var iconStyles = css({
-  flex: '0 0 auto',
-  // The following properties have been added purely to avoid a global style override in Jira breaking alignment between the icon and title text.
-  // https://stash.atlassian.com/projects/JIRACLOUD/repos/jira/browse/jira-components/jira-legacy-frontend/jira-atlaskit-module/src/main/resources/jira-atlaskit-module/css/adg3-general-overrides.less?at=master#24
-  // When the override is removed, these can be removed.
-  color: 'inherit',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontSize: 'inherit',
-  fontStyle: 'inherit',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontWeight: 'inherit',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  letterSpacing: 'inherit',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 'inherit'
-});
 var truncatedTextStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',

package/dist/esm/modal-wrapper.js

@@ -68,8 +68,7 @@ var ModalWrapper = function ModalWrapper(props) {
     _props$shouldReturnFo = props.shouldReturnFocus,
     shouldReturnFocus = _props$shouldReturnFo === void 0 ? true : _props$shouldReturnFo,
     stackIndexOverride = props.stackIndex,
-    _props$onClose = props.onClose,
-    onClose = _props$onClose === void 0 ? noop : _props$onClose,
+    providedOnClose = props.onClose,
     _props$onStackChange = props.onStackChange,
     onStackChange = _props$onStackChange === void 0 ? noop : _props$onStackChange,
     isBlanketHidden = props.isBlanketHidden,
@@ -89,11 +88,11 @@ var ModalWrapper = function ModalWrapper(props) {
   // 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: onClose,
+    fn: providedOnClose || noop,
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "13.1.1"
+    packageVersion: "13.3.0"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -121,7 +120,8 @@ var ModalWrapper = function ModalWrapper(props) {
     height: height,
     width: width,
     onCloseComplete: onCloseComplete,
-    onOpenComplete: onOpenComplete
+    onOpenComplete: onOpenComplete,
+    hasProvidedOnClose: Boolean(providedOnClose)
   }, children));
   var returnFocus = true;
   var onDeactivation;

package/dist/types/internal/components/modal-dialog.d.ts

@@ -5,6 +5,12 @@
 import { jsx } from '@emotion/react';
 import type { KeyboardOrMouseEvent, ModalDialogProps } from '../../types';
 declare const ModalDialog: (props: ModalDialogProps & {
+    /**
+     * A boolean for if the onClose is provided. We define a `noop` as our onClose
+     * at the top level, but we need to know if one is provided for the close
+     * button to be rendered.
+     */
+    hasProvidedOnClose: boolean;
     onClose: (value: KeyboardOrMouseEvent) => void;
 }) => jsx.JSX.Element;
 export default ModalDialog;

package/dist/types/internal/context.d.ts

@@ -15,6 +15,12 @@ export type ModalAttributes = {
      * wrapped in modal dialog's analytic event context.
      */
     onClose: OnCloseHandler;
+    /**
+     * A boolean for if the onClose is provided. We define a `noop` as our onClose
+     * at the top level, but we need to know if one is provided for the close
+     * button to be rendered.
+     */
+    hasProvidedOnClose?: boolean;
 };
 export declare const ModalContext: import("react").Context<ModalAttributes | null>;
 export declare const ScrollContext: import("react").Context<boolean | null>;

package/dist/types/modal-header.d.ts

@@ -9,6 +9,11 @@ export interface ModalHeaderProps {
      * Children of modal dialog header.
      */
     children?: React.ReactNode;
+    /**
+     * Shows a close button at the end of the header.
+     * @default false
+     */
+    hasCloseButton?: boolean;
     /**
      * A `testId` prop is provided for specified elements,
      * which is a unique string that appears as a data attribute `data-testid` in the rendered code,

package/dist/types-ts4.5/internal/components/modal-dialog.d.ts

@@ -5,6 +5,12 @@
 import { jsx } from '@emotion/react';
 import type { KeyboardOrMouseEvent, ModalDialogProps } from '../../types';
 declare const ModalDialog: (props: ModalDialogProps & {
+    /**
+     * A boolean for if the onClose is provided. We define a `noop` as our onClose
+     * at the top level, but we need to know if one is provided for the close
+     * button to be rendered.
+     */
+    hasProvidedOnClose: boolean;
     onClose: (value: KeyboardOrMouseEvent) => void;
 }) => jsx.JSX.Element;
 export default ModalDialog;

package/dist/types-ts4.5/internal/context.d.ts

@@ -15,6 +15,12 @@ export type ModalAttributes = {
      * wrapped in modal dialog's analytic event context.
      */
     onClose: OnCloseHandler;
+    /**
+     * A boolean for if the onClose is provided. We define a `noop` as our onClose
+     * at the top level, but we need to know if one is provided for the close
+     * button to be rendered.
+     */
+    hasProvidedOnClose?: boolean;
 };
 export declare const ModalContext: import("react").Context<ModalAttributes | null>;
 export declare const ScrollContext: import("react").Context<boolean | null>;

package/dist/types-ts4.5/modal-header.d.ts

@@ -9,6 +9,11 @@ export interface ModalHeaderProps {
      * Children of modal dialog header.
      */
     children?: React.ReactNode;
+    /**
+     * Shows a close button at the end of the header.
+     * @default false
+     */
+    hasCloseButton?: boolean;
     /**
      * A `testId` prop is provided for specified elements,
      * which is a unique string that appears as a data attribute `data-testid` in the rendered code,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "13.1.1",
+	"version": "13.3.0",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/portal": "^5.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
@@ -66,13 +66,13 @@
 		"@atlaskit/datetime-picker": "^16.1.0",
 		"@atlaskit/docs": "^10.0.0",
 		"@atlaskit/dropdown-menu": "^13.0.0",
-		"@atlaskit/flag": "^16.2.0",
+		"@atlaskit/flag": "^17.1.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.1.0",
 		"@atlaskit/link": "^3.0.0",
 		"@atlaskit/popup": "^2.0.0",
 		"@atlaskit/radio": "^8.0.0",
-		"@atlaskit/section-message": "^8.1.0",
+		"@atlaskit/section-message": "^8.2.0",
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/ssr": "^0.4.0",
 		"@atlaskit/textfield": "^8.0.0",
@@ -147,6 +147,9 @@
 		"platform_design_system_motion_on_finish_fix": {
 			"type": "boolean",
 			"referenceOnly": "true"
+		},
+		"platform_ads_explicit_font_styles": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/modal-dialog/"