@atlaskit/modal-dialog 13.0.4 → 13.1.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/modal-dialog
 
+## 13.1.0
+
+### Minor Changes
+
+- [#126435](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126435)
+  [`2d2f8bd9b056b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2d2f8bd9b056b) -
+  Release dedicated close button export. This can be used to add a close button to your modal
+  header.
+
 ## 13.0.4
 
 ### Patch Changes

package/dist/cjs/close-button.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CloseButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _new = require("@atlaskit/button/new");
+var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--cross"));
+/**
+ * __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.
+ */
+var CloseButton = exports.CloseButton = function CloseButton(_ref) {
+  var label = _ref.label,
+    onClick = _ref.onClick,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    testId: testId && "".concat(testId, "--close-button"),
+    appearance: "subtle",
+    icon: _closeCross.default,
+    label: label || 'Close Modal',
+    onClick: onClick
+  });
+};

package/dist/cjs/index.js

@@ -4,6 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CloseButton", {
+  enumerable: true,
+  get: function get() {
+    return _closeButton.CloseButton;
+  }
+});
 Object.defineProperty(exports, "ModalBody", {
   enumerable: true,
   get: function get() {
@@ -52,4 +58,5 @@ var _modalHeader = _interopRequireDefault(require("./modal-header"));
 var _modalTitle = _interopRequireDefault(require("./modal-title"));
 var _modalBody = _interopRequireDefault(require("./modal-body"));
 var _modalFooter = _interopRequireDefault(require("./modal-footer"));
+var _closeButton = require("./close-button");
 var _hooks = require("./hooks");

package/dist/cjs/modal-wrapper.js

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

package/dist/es2019/close-button.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { IconButton } from '@atlaskit/button/new';
+import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
+/**
+ * __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.
+ */
+export const CloseButton = ({
+  label,
+  onClick,
+  testId
+}) => /*#__PURE__*/React.createElement(IconButton, {
+  testId: testId && `${testId}--close-button`,
+  appearance: "subtle",
+  icon: CrossIcon,
+  label: label || 'Close Modal',
+  onClick: onClick
+});

package/dist/es2019/index.js

@@ -4,4 +4,5 @@ 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';
+export { CloseButton } from './close-button';
 export { useModal } from './hooks';

package/dist/es2019/modal-wrapper.js

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

package/dist/esm/close-button.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IconButton } from '@atlaskit/button/new';
+import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
+/**
+ * __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.
+ */
+export var CloseButton = function CloseButton(_ref) {
+  var label = _ref.label,
+    onClick = _ref.onClick,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(IconButton, {
+    testId: testId && "".concat(testId, "--close-button"),
+    appearance: "subtle",
+    icon: CrossIcon,
+    label: label || 'Close Modal',
+    onClick: onClick
+  });
+};

package/dist/esm/index.js

@@ -4,4 +4,5 @@ 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';
+export { CloseButton } from './close-button';
 export { useModal } from './hooks';

package/dist/esm/modal-wrapper.js

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

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type OnCloseHandler } from './types';
+/**
+ * __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.
+ */
+export declare const CloseButton: ({ label, onClick, testId, }: {
+    label?: string | undefined;
+    onClick: OnCloseHandler;
+    testId?: string | undefined;
+}) => React.JSX.Element;

package/dist/types/index.d.ts

@@ -5,4 +5,5 @@ 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';
+export { CloseButton } from './close-button';
 export { useModal } from './hooks';

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

@@ -14,7 +14,7 @@ export type ModalAttributes = {
      * Callback function called when the modal dialog is requesting to be closed,
      * wrapped in modal dialog's analytic event context.
      */
-    onClose?: OnCloseHandler;
+    onClose: OnCloseHandler;
 };
 export declare const ModalContext: import("react").Context<ModalAttributes | null>;
 export declare const ScrollContext: import("react").Context<boolean | null>;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type OnCloseHandler } from './types';
+/**
+ * __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.
+ */
+export declare const CloseButton: ({ label, onClick, testId, }: {
+    label?: string | undefined;
+    onClick: OnCloseHandler;
+    testId?: string | undefined;
+}) => React.JSX.Element;

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

@@ -5,4 +5,5 @@ 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';
+export { CloseButton } from './close-button';
 export { useModal } from './hooks';

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

@@ -14,7 +14,7 @@ export type ModalAttributes = {
      * Callback function called when the modal dialog is requesting to be closed,
      * wrapped in modal dialog's analytic event context.
      */
-    onClose?: OnCloseHandler;
+    onClose: OnCloseHandler;
 };
 export declare const ModalContext: import("react").Context<ModalAttributes | null>;
 export declare const ScrollContext: import("react").Context<boolean | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "13.0.4",
+	"version": "13.1.0",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,6 +30,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/blanket": "^15.0.0",
+		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/focus-ring": "^3.0.0",
@@ -41,7 +42,7 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.4.0",
+		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -60,16 +61,14 @@
 		"@atlaskit/avatar-group": "^12.0.0",
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.0.0",
-		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/checkbox": "^17.0.0",
+		"@atlaskit/code": "^16.0.0",
 		"@atlaskit/datetime-picker": "^16.1.0",
 		"@atlaskit/docs": "^10.0.0",
 		"@atlaskit/dropdown-menu": "^13.0.0",
 		"@atlaskit/flag": "^16.2.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/image": "^2.0.0",
-		"@atlaskit/inline-dialog": "^17.0.0",
 		"@atlaskit/link": "^3.0.0",
 		"@atlaskit/popup": "^2.0.0",
 		"@atlaskit/radio": "^8.0.0",