@atlaskit/modal-dialog 14.0.2 → 14.0.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/modal-dialog
 
+## 14.0.4
+
+### Patch Changes
+
+- [#133231](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133231)
+  [`82b4213bf8e20`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/82b4213bf8e20) -
+  Update the DOM order of the modal header when using the `hasCloseButton` prop to give maximal
+  information to users of assistive technology.
+
+## 14.0.3
+
+### Patch Changes
+
+- [#126072](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126072)
+  [`bb86d48c26f65`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bb86d48c26f65) -
+  Checks for undefined children in `ModalTransition` to prevent potential runtime errors with React
+  17
+- Updated dependencies
+
 ## 14.0.2
 
 ### Patch Changes

package/dist/cjs/close-button.js

@@ -13,6 +13,12 @@ var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/
  *
  * The close button is to be used for customized modal headers to ensure that
  * all users have an accessible and obvious way to close the modal dialog.
+ *
+ * When using this in a custom header, ensure that the close button renders
+ * first in the DOM to make sure that users will encounter all elements of the
+ * modal dialog, including everything within the modal header. This can be done
+ * using a `Flex` primitive as the custom header's container with a flex
+ * direction of `row-reverse`.
  */
 var CloseButton = exports.CloseButton = function CloseButton(_ref) {
   var label = _ref.label,

package/dist/cjs/modal-header.js

@@ -13,15 +13,10 @@ var _primitives = require("@atlaskit/primitives");
 var _closeButton = require("./close-button");
 var _hooks = require("./hooks");
 var headerStyles = null;
-var gridStyles = (0, _primitives.xcss)({
+var flexStyles = (0, _primitives.xcss)({
+  flexDirection: 'row-reverse',
   width: '100%'
 });
-var closeContainerStyles = (0, _primitives.xcss)({
-  gridArea: 'close'
-});
-var titleContainerStyles = (0, _primitives.xcss)({
-  gridArea: 'title'
-});
 /**
  * __Modal header__
  *
@@ -50,20 +45,24 @@ var ModalHeader = function ModalHeader(props) {
     style: {
       "--_t7lu6v": (0, _runtime.ix)("calc(-1 * ".concat("var(--ds-border-width-outline, 2px)", ")"))
     }
-  }, shouldShowCloseButton ? /*#__PURE__*/_react.default.createElement(_primitives.Grid, {
+  }, shouldShowCloseButton ?
+  /*#__PURE__*/
+  // The reason we are putting the close button first in the DOM and then
+  // reordering them is to ensure that users of assistive technology get
+  // all the context of a modal when initial focus is placed on the close
+  // button, since it's the first interactive element.
+  _react.default.createElement(_primitives.Flex, {
     gap: "space.200",
-    templateAreas: ['title close'],
-    xcss: gridStyles
+    justifyContent: "space-between",
+    xcss: flexStyles
   }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
-    xcss: titleContainerStyles,
-    justifyContent: "start",
-    alignItems: "center"
-  }, children), /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
-    xcss: closeContainerStyles,
     justifyContent: "end"
   }, /*#__PURE__*/_react.default.createElement(_closeButton.CloseButton, {
     onClick: onClose,
     testId: modalTestId
-  }))) : children);
+  })), /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    justifyContent: "start",
+    alignItems: "center"
+  }, children)) : children);
 };
 var _default = exports.default = ModalHeader;

package/dist/cjs/modal-transition.js

@@ -17,8 +17,10 @@ var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiti
  * - [Usage](https://atlassian.design/components/modal-dialog/usage)
  */
 var ModalTransition = function ModalTransition(props) {
+  var _props$children;
   return /*#__PURE__*/_react.default.createElement(_exitingPersistence.default, {
     appear: true
-  }, props.children);
+  }, //Checking if children are undefined to prevent potential runtime errors in React 17
+  (_props$children = props.children) !== null && _props$children !== void 0 ? _props$children : null);
 };
 var _default = exports.default = ModalTransition;

package/dist/cjs/modal-wrapper.js

@@ -87,7 +87,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "14.0.2"
+    packageVersion: "14.0.4"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/close-button.js

@@ -6,6 +6,12 @@ import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
  *
  * The close button is to be used for customized modal headers to ensure that
  * all users have an accessible and obvious way to close the modal dialog.
+ *
+ * When using this in a custom header, ensure that the close button renders
+ * first in the DOM to make sure that users will encounter all elements of the
+ * modal dialog, including everything within the modal header. This can be done
+ * using a `Flex` primitive as the custom header's container with a flex
+ * direction of `row-reverse`.
  */
 export const CloseButton = ({
   label,

package/dist/es2019/modal-header.js

@@ -2,19 +2,14 @@
 import "./modal-header.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Flex, Grid, xcss } from '@atlaskit/primitives';
+import { Flex, xcss } from '@atlaskit/primitives';
 import { CloseButton } from './close-button';
 import { useModal } from './hooks';
 const headerStyles = null;
-const gridStyles = xcss({
+const flexStyles = xcss({
+  flexDirection: 'row-reverse',
   width: '100%'
 });
-const closeContainerStyles = xcss({
-  gridArea: 'close'
-});
-const titleContainerStyles = xcss({
-  gridArea: 'title'
-});
 /**
  * __Modal header__
  *
@@ -42,20 +37,24 @@ const ModalHeader = props => {
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     className: ax(["_18zr1ejb _1e0c1txw _kqswh2mm _4cvr1h6o _1bah1yb4 _6rth1ezb _85i5pxbi _1q511ejb"])
-  }, shouldShowCloseButton ? /*#__PURE__*/React.createElement(Grid, {
+  }, shouldShowCloseButton ?
+  /*#__PURE__*/
+  // The reason we are putting the close button first in the DOM and then
+  // reordering them is to ensure that users of assistive technology get
+  // all the context of a modal when initial focus is placed on the close
+  // button, since it's the first interactive element.
+  React.createElement(Flex, {
     gap: "space.200",
-    templateAreas: ['title close'],
-    xcss: gridStyles
+    justifyContent: "space-between",
+    xcss: flexStyles
   }, /*#__PURE__*/React.createElement(Flex, {
-    xcss: titleContainerStyles,
-    justifyContent: "start",
-    alignItems: "center"
-  }, children), /*#__PURE__*/React.createElement(Flex, {
-    xcss: closeContainerStyles,
     justifyContent: "end"
   }, /*#__PURE__*/React.createElement(CloseButton, {
     onClick: onClose,
     testId: modalTestId
-  }))) : children);
+  })), /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "start",
+    alignItems: "center"
+  }, children)) : children);
 };
 export default ModalHeader;

package/dist/es2019/modal-transition.js

@@ -11,8 +11,10 @@ import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
  * - [Usage](https://atlassian.design/components/modal-dialog/usage)
  */
 const ModalTransition = props => {
+  var _props$children;
   return /*#__PURE__*/React.createElement(ExitingPersistence, {
     appear: true
-  }, props.children);
+  }, //Checking if children are undefined to prevent potential runtime errors in React 17
+  (_props$children = props.children) !== null && _props$children !== void 0 ? _props$children : null);
 };
 export default ModalTransition;

package/dist/es2019/modal-wrapper.js

@@ -73,7 +73,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "14.0.2"
+    packageVersion: "14.0.4"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/close-button.js

@@ -6,6 +6,12 @@ import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
  *
  * The close button is to be used for customized modal headers to ensure that
  * all users have an accessible and obvious way to close the modal dialog.
+ *
+ * When using this in a custom header, ensure that the close button renders
+ * first in the DOM to make sure that users will encounter all elements of the
+ * modal dialog, including everything within the modal header. This can be done
+ * using a `Flex` primitive as the custom header's container with a flex
+ * direction of `row-reverse`.
  */
 export var CloseButton = function CloseButton(_ref) {
   var label = _ref.label,

package/dist/esm/modal-header.js

@@ -2,19 +2,14 @@
 import "./modal-header.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Flex, Grid, xcss } from '@atlaskit/primitives';
+import { Flex, xcss } from '@atlaskit/primitives';
 import { CloseButton } from './close-button';
 import { useModal } from './hooks';
 var headerStyles = null;
-var gridStyles = xcss({
+var flexStyles = xcss({
+  flexDirection: 'row-reverse',
   width: '100%'
 });
-var closeContainerStyles = xcss({
-  gridArea: 'close'
-});
-var titleContainerStyles = xcss({
-  gridArea: 'title'
-});
 /**
  * __Modal header__
  *
@@ -43,20 +38,24 @@ var ModalHeader = function ModalHeader(props) {
     style: {
       "--_t7lu6v": ix("calc(-1 * ".concat("var(--ds-border-width-outline, 2px)", ")"))
     }
-  }, shouldShowCloseButton ? /*#__PURE__*/React.createElement(Grid, {
+  }, shouldShowCloseButton ?
+  /*#__PURE__*/
+  // The reason we are putting the close button first in the DOM and then
+  // reordering them is to ensure that users of assistive technology get
+  // all the context of a modal when initial focus is placed on the close
+  // button, since it's the first interactive element.
+  React.createElement(Flex, {
     gap: "space.200",
-    templateAreas: ['title close'],
-    xcss: gridStyles
+    justifyContent: "space-between",
+    xcss: flexStyles
   }, /*#__PURE__*/React.createElement(Flex, {
-    xcss: titleContainerStyles,
-    justifyContent: "start",
-    alignItems: "center"
-  }, children), /*#__PURE__*/React.createElement(Flex, {
-    xcss: closeContainerStyles,
     justifyContent: "end"
   }, /*#__PURE__*/React.createElement(CloseButton, {
     onClick: onClose,
     testId: modalTestId
-  }))) : children);
+  })), /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "start",
+    alignItems: "center"
+  }, children)) : children);
 };
 export default ModalHeader;

package/dist/esm/modal-transition.js

@@ -11,8 +11,10 @@ import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
  * - [Usage](https://atlassian.design/components/modal-dialog/usage)
  */
 var ModalTransition = function ModalTransition(props) {
+  var _props$children;
   return /*#__PURE__*/React.createElement(ExitingPersistence, {
     appear: true
-  }, props.children);
+  }, //Checking if children are undefined to prevent potential runtime errors in React 17
+  (_props$children = props.children) !== null && _props$children !== void 0 ? _props$children : null);
 };
 export default ModalTransition;

package/dist/esm/modal-wrapper.js

@@ -77,7 +77,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "14.0.2"
+    packageVersion: "14.0.4"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/types/close-button.d.ts

@@ -1,13 +1,30 @@
 import React from 'react';
 import { type OnCloseHandler } from './types';
+type CloseButtonProps = {
+    /**
+     * The accessible name to give to the close button.
+     */
+    label?: string;
+    /**
+     * The same close handler you give to the top-level modal component.
+     */
+    onClick: OnCloseHandler;
+    /**
+     * The prefix to use. Renders as `{testId}--close-button`.
+     */
+    testId?: string;
+};
 /**
  * __Close button__
  *
  * The close button is to be used for customized modal headers to ensure that
  * all users have an accessible and obvious way to close the modal dialog.
+ *
+ * When using this in a custom header, ensure that the close button renders
+ * first in the DOM to make sure that users will encounter all elements of the
+ * modal dialog, including everything within the modal header. This can be done
+ * using a `Flex` primitive as the custom header's container with a flex
+ * direction of `row-reverse`.
  */
-export declare const CloseButton: ({ label, onClick, testId, }: {
-    label?: string | undefined;
-    onClick: OnCloseHandler;
-    testId?: string | undefined;
-}) => React.JSX.Element;
+export declare const CloseButton: ({ label, onClick, testId }: CloseButtonProps) => React.JSX.Element;
+export {};

package/dist/types/types.d.ts

@@ -14,8 +14,11 @@ export type { ModalFooterProps } from './modal-footer';
 export type { ModalAttributes } from './internal/context';
 export interface ModalDialogProps {
     /**
-     * Focus is moved to the first interactive element inside the modal dialog when `true`.
-     * Pass an element `ref` to focus on a specific element.
+     * Focus is moved to the first interactive element inside the modal dialog
+     * when `true`. It is not recommended to set to `false` as this creates
+     * accessibility regressions. Pass an element `ref` to focus on a specific element.
+     *
+     * Default value is `true`.
      */
     autoFocus?: boolean | RefObject<HTMLElement | null | undefined>;
     /**
@@ -98,6 +101,7 @@ export interface ModalDialogProps {
      * If not overridden using `testId` prop in the respective components, this will set `data-testid` on these elements when defined:
      * - Modal dialog: `{testId}`
      * - Modal header: `{testId}--header`
+     * - Close button: `{testId}--close-button`
      * - Modal title: `{testId}--title`
      * - Modal body: `{testId}--body`
      * - Modal footer: `{testId}--footer`

package/dist/types-ts4.5/close-button.d.ts

@@ -1,13 +1,30 @@
 import React from 'react';
 import { type OnCloseHandler } from './types';
+type CloseButtonProps = {
+    /**
+     * The accessible name to give to the close button.
+     */
+    label?: string;
+    /**
+     * The same close handler you give to the top-level modal component.
+     */
+    onClick: OnCloseHandler;
+    /**
+     * The prefix to use. Renders as `{testId}--close-button`.
+     */
+    testId?: string;
+};
 /**
  * __Close button__
  *
  * The close button is to be used for customized modal headers to ensure that
  * all users have an accessible and obvious way to close the modal dialog.
+ *
+ * When using this in a custom header, ensure that the close button renders
+ * first in the DOM to make sure that users will encounter all elements of the
+ * modal dialog, including everything within the modal header. This can be done
+ * using a `Flex` primitive as the custom header's container with a flex
+ * direction of `row-reverse`.
  */
-export declare const CloseButton: ({ label, onClick, testId, }: {
-    label?: string | undefined;
-    onClick: OnCloseHandler;
-    testId?: string | undefined;
-}) => React.JSX.Element;
+export declare const CloseButton: ({ label, onClick, testId }: CloseButtonProps) => React.JSX.Element;
+export {};

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

@@ -14,8 +14,11 @@ export type { ModalFooterProps } from './modal-footer';
 export type { ModalAttributes } from './internal/context';
 export interface ModalDialogProps {
     /**
-     * Focus is moved to the first interactive element inside the modal dialog when `true`.
-     * Pass an element `ref` to focus on a specific element.
+     * Focus is moved to the first interactive element inside the modal dialog
+     * when `true`. It is not recommended to set to `false` as this creates
+     * accessibility regressions. Pass an element `ref` to focus on a specific element.
+     *
+     * Default value is `true`.
      */
     autoFocus?: boolean | RefObject<HTMLElement | null | undefined>;
     /**
@@ -98,6 +101,7 @@ export interface ModalDialogProps {
      * If not overridden using `testId` prop in the respective components, this will set `data-testid` on these elements when defined:
      * - Modal dialog: `{testId}`
      * - Modal header: `{testId}--header`
+     * - Close button: `{testId}--close-button`
      * - Modal title: `{testId}--title`
      * - Modal body: `{testId}--body`
      * - Modal footer: `{testId}--footer`

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "14.0.2",
+	"version": "14.0.4",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -70,7 +70,7 @@
 		"@atlaskit/flag": "^17.1.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/link": "^3.0.0",
+		"@atlaskit/link": "^3.1.0",
 		"@atlaskit/popup": "^3.0.0",
 		"@atlaskit/radio": "^8.0.0",
 		"@atlaskit/section-message": "^8.2.0",