@atlaskit/modal-dialog 13.0.3 → 13.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/dist/cjs/close-button.js +28 -0
- package/dist/cjs/index.js +7 -0
- package/dist/cjs/modal-wrapper.js +1 -1
- package/dist/es2019/close-button.js +20 -0
- package/dist/es2019/index.js +1 -0
- package/dist/es2019/modal-wrapper.js +1 -1
- package/dist/esm/close-button.js +21 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/modal-wrapper.js +1 -1
- package/dist/types/close-button.d.ts +13 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/internal/context.d.ts +1 -1
- package/dist/types-ts4.5/close-button.d.ts +13 -0
- package/dist/types-ts4.5/index.d.ts +1 -0
- package/dist/types-ts4.5/internal/context.d.ts +1 -1
- package/package.json +23 -19
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/modal-dialog
|
|
2
2
|
|
|
3
|
+
## 13.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#126435](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126435)
|
|
8
|
+
[`2d2f8bd9b056b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2d2f8bd9b056b) -
|
|
9
|
+
Release dedicated close button export. This can be used to add a close button to your modal
|
|
10
|
+
header.
|
|
11
|
+
|
|
12
|
+
## 13.0.4
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 13.0.3
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.CloseButton = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _new = require("@atlaskit/button/new");
|
|
10
|
+
var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--cross"));
|
|
11
|
+
/**
|
|
12
|
+
* __Close button__
|
|
13
|
+
*
|
|
14
|
+
* The close button is to be used for customized modal headers to ensure that
|
|
15
|
+
* all users have an accessible and obvious way to close the modal dialog.
|
|
16
|
+
*/
|
|
17
|
+
var CloseButton = exports.CloseButton = function CloseButton(_ref) {
|
|
18
|
+
var label = _ref.label,
|
|
19
|
+
onClick = _ref.onClick,
|
|
20
|
+
testId = _ref.testId;
|
|
21
|
+
return /*#__PURE__*/_react.default.createElement(_new.IconButton, {
|
|
22
|
+
testId: testId && "".concat(testId, "--close-button"),
|
|
23
|
+
appearance: "subtle",
|
|
24
|
+
icon: _closeCross.default,
|
|
25
|
+
label: label || 'Close Modal',
|
|
26
|
+
onClick: onClick
|
|
27
|
+
});
|
|
28
|
+
};
|
package/dist/cjs/index.js
CHANGED
|
@@ -4,6 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
+
Object.defineProperty(exports, "CloseButton", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _closeButton.CloseButton;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
7
13
|
Object.defineProperty(exports, "ModalBody", {
|
|
8
14
|
enumerable: true,
|
|
9
15
|
get: function get() {
|
|
@@ -52,4 +58,5 @@ var _modalHeader = _interopRequireDefault(require("./modal-header"));
|
|
|
52
58
|
var _modalTitle = _interopRequireDefault(require("./modal-title"));
|
|
53
59
|
var _modalBody = _interopRequireDefault(require("./modal-body"));
|
|
54
60
|
var _modalFooter = _interopRequireDefault(require("./modal-footer"));
|
|
61
|
+
var _closeButton = require("./close-button");
|
|
55
62
|
var _hooks = require("./hooks");
|
|
@@ -103,7 +103,7 @@ var ModalWrapper = function ModalWrapper(props) {
|
|
|
103
103
|
action: 'closed',
|
|
104
104
|
componentName: 'modalDialog',
|
|
105
105
|
packageName: "@atlaskit/modal-dialog",
|
|
106
|
-
packageVersion: "13.0
|
|
106
|
+
packageVersion: "13.1.0"
|
|
107
107
|
});
|
|
108
108
|
var onBlanketClicked = (0, _react.useCallback)(function (e) {
|
|
109
109
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IconButton } from '@atlaskit/button/new';
|
|
3
|
+
import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
|
|
4
|
+
/**
|
|
5
|
+
* __Close button__
|
|
6
|
+
*
|
|
7
|
+
* The close button is to be used for customized modal headers to ensure that
|
|
8
|
+
* all users have an accessible and obvious way to close the modal dialog.
|
|
9
|
+
*/
|
|
10
|
+
export const CloseButton = ({
|
|
11
|
+
label,
|
|
12
|
+
onClick,
|
|
13
|
+
testId
|
|
14
|
+
}) => /*#__PURE__*/React.createElement(IconButton, {
|
|
15
|
+
testId: testId && `${testId}--close-button`,
|
|
16
|
+
appearance: "subtle",
|
|
17
|
+
icon: CrossIcon,
|
|
18
|
+
label: label || 'Close Modal',
|
|
19
|
+
onClick: onClick
|
|
20
|
+
});
|
package/dist/es2019/index.js
CHANGED
|
@@ -4,4 +4,5 @@ export { default as ModalHeader } from './modal-header';
|
|
|
4
4
|
export { default as ModalTitle } from './modal-title';
|
|
5
5
|
export { default as ModalBody } from './modal-body';
|
|
6
6
|
export { default as ModalFooter } from './modal-footer';
|
|
7
|
+
export { CloseButton } from './close-button';
|
|
7
8
|
export { useModal } from './hooks';
|
|
@@ -88,7 +88,7 @@ const ModalWrapper = props => {
|
|
|
88
88
|
action: 'closed',
|
|
89
89
|
componentName: 'modalDialog',
|
|
90
90
|
packageName: "@atlaskit/modal-dialog",
|
|
91
|
-
packageVersion: "13.0
|
|
91
|
+
packageVersion: "13.1.0"
|
|
92
92
|
});
|
|
93
93
|
const onBlanketClicked = useCallback(e => {
|
|
94
94
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IconButton } from '@atlaskit/button/new';
|
|
3
|
+
import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
|
|
4
|
+
/**
|
|
5
|
+
* __Close button__
|
|
6
|
+
*
|
|
7
|
+
* The close button is to be used for customized modal headers to ensure that
|
|
8
|
+
* all users have an accessible and obvious way to close the modal dialog.
|
|
9
|
+
*/
|
|
10
|
+
export var CloseButton = function CloseButton(_ref) {
|
|
11
|
+
var label = _ref.label,
|
|
12
|
+
onClick = _ref.onClick,
|
|
13
|
+
testId = _ref.testId;
|
|
14
|
+
return /*#__PURE__*/React.createElement(IconButton, {
|
|
15
|
+
testId: testId && "".concat(testId, "--close-button"),
|
|
16
|
+
appearance: "subtle",
|
|
17
|
+
icon: CrossIcon,
|
|
18
|
+
label: label || 'Close Modal',
|
|
19
|
+
onClick: onClick
|
|
20
|
+
});
|
|
21
|
+
};
|
package/dist/esm/index.js
CHANGED
|
@@ -4,4 +4,5 @@ export { default as ModalHeader } from './modal-header';
|
|
|
4
4
|
export { default as ModalTitle } from './modal-title';
|
|
5
5
|
export { default as ModalBody } from './modal-body';
|
|
6
6
|
export { default as ModalFooter } from './modal-footer';
|
|
7
|
+
export { CloseButton } from './close-button';
|
|
7
8
|
export { useModal } from './hooks';
|
|
@@ -93,7 +93,7 @@ var ModalWrapper = function ModalWrapper(props) {
|
|
|
93
93
|
action: 'closed',
|
|
94
94
|
componentName: 'modalDialog',
|
|
95
95
|
packageName: "@atlaskit/modal-dialog",
|
|
96
|
-
packageVersion: "13.0
|
|
96
|
+
packageVersion: "13.1.0"
|
|
97
97
|
});
|
|
98
98
|
var onBlanketClicked = useCallback(function (e) {
|
|
99
99
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type OnCloseHandler } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* __Close button__
|
|
5
|
+
*
|
|
6
|
+
* The close button is to be used for customized modal headers to ensure that
|
|
7
|
+
* all users have an accessible and obvious way to close the modal dialog.
|
|
8
|
+
*/
|
|
9
|
+
export declare const CloseButton: ({ label, onClick, testId, }: {
|
|
10
|
+
label?: string | undefined;
|
|
11
|
+
onClick: OnCloseHandler;
|
|
12
|
+
testId?: string | undefined;
|
|
13
|
+
}) => React.JSX.Element;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -5,4 +5,5 @@ export { default as ModalHeader } from './modal-header';
|
|
|
5
5
|
export { default as ModalTitle } from './modal-title';
|
|
6
6
|
export { default as ModalBody } from './modal-body';
|
|
7
7
|
export { default as ModalFooter } from './modal-footer';
|
|
8
|
+
export { CloseButton } from './close-button';
|
|
8
9
|
export { useModal } from './hooks';
|
|
@@ -14,7 +14,7 @@ export type ModalAttributes = {
|
|
|
14
14
|
* Callback function called when the modal dialog is requesting to be closed,
|
|
15
15
|
* wrapped in modal dialog's analytic event context.
|
|
16
16
|
*/
|
|
17
|
-
onClose
|
|
17
|
+
onClose: OnCloseHandler;
|
|
18
18
|
};
|
|
19
19
|
export declare const ModalContext: import("react").Context<ModalAttributes | null>;
|
|
20
20
|
export declare const ScrollContext: import("react").Context<boolean | null>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type OnCloseHandler } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* __Close button__
|
|
5
|
+
*
|
|
6
|
+
* The close button is to be used for customized modal headers to ensure that
|
|
7
|
+
* all users have an accessible and obvious way to close the modal dialog.
|
|
8
|
+
*/
|
|
9
|
+
export declare const CloseButton: ({ label, onClick, testId, }: {
|
|
10
|
+
label?: string | undefined;
|
|
11
|
+
onClick: OnCloseHandler;
|
|
12
|
+
testId?: string | undefined;
|
|
13
|
+
}) => React.JSX.Element;
|
|
@@ -5,4 +5,5 @@ export { default as ModalHeader } from './modal-header';
|
|
|
5
5
|
export { default as ModalTitle } from './modal-title';
|
|
6
6
|
export { default as ModalBody } from './modal-body';
|
|
7
7
|
export { default as ModalFooter } from './modal-footer';
|
|
8
|
+
export { CloseButton } from './close-button';
|
|
8
9
|
export { useModal } from './hooks';
|
|
@@ -14,7 +14,7 @@ export type ModalAttributes = {
|
|
|
14
14
|
* Callback function called when the modal dialog is requesting to be closed,
|
|
15
15
|
* wrapped in modal dialog's analytic event context.
|
|
16
16
|
*/
|
|
17
|
-
onClose
|
|
17
|
+
onClose: OnCloseHandler;
|
|
18
18
|
};
|
|
19
19
|
export declare const ModalContext: import("react").Context<ModalAttributes | null>;
|
|
20
20
|
export declare const ScrollContext: import("react").Context<boolean | null>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/modal-dialog",
|
|
3
|
-
"version": "13.0
|
|
3
|
+
"version": "13.1.0",
|
|
4
4
|
"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -30,18 +30,19 @@
|
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@atlaskit/analytics-next": "^11.0.0",
|
|
32
32
|
"@atlaskit/blanket": "^15.0.0",
|
|
33
|
+
"@atlaskit/button": "^21.1.0",
|
|
33
34
|
"@atlaskit/codemod-utils": "^4.2.0",
|
|
34
35
|
"@atlaskit/ds-lib": "^4.0.0",
|
|
35
36
|
"@atlaskit/focus-ring": "^3.0.0",
|
|
36
|
-
"@atlaskit/icon": "^
|
|
37
|
+
"@atlaskit/icon": "^25.0.0",
|
|
37
38
|
"@atlaskit/layering": "^2.0.0",
|
|
38
|
-
"@atlaskit/motion": "^5.
|
|
39
|
+
"@atlaskit/motion": "^5.1.0",
|
|
39
40
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
40
|
-
"@atlaskit/portal": "^5.
|
|
41
|
+
"@atlaskit/portal": "^5.1.0",
|
|
41
42
|
"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
|
|
42
43
|
"@atlaskit/primitives": "^14.1.0",
|
|
43
44
|
"@atlaskit/theme": "^18.0.0",
|
|
44
|
-
"@atlaskit/tokens": "^4.
|
|
45
|
+
"@atlaskit/tokens": "^4.5.0",
|
|
45
46
|
"@babel/runtime": "^7.0.0",
|
|
46
47
|
"@emotion/react": "^11.7.1",
|
|
47
48
|
"bind-event-listener": "^3.0.0",
|
|
@@ -53,32 +54,31 @@
|
|
|
53
54
|
"react": "^18.2.0"
|
|
54
55
|
},
|
|
55
56
|
"devDependencies": {
|
|
56
|
-
"@af/accessibility-testing": "
|
|
57
|
-
"@af/integration-testing": "
|
|
58
|
-
"@af/visual-regression": "
|
|
59
|
-
"@atlaskit/avatar": "^
|
|
57
|
+
"@af/accessibility-testing": "^2.0.0",
|
|
58
|
+
"@af/integration-testing": "^0.5.0",
|
|
59
|
+
"@af/visual-regression": "^1.3.0",
|
|
60
|
+
"@atlaskit/avatar": "^25.0.0",
|
|
60
61
|
"@atlaskit/avatar-group": "^12.0.0",
|
|
61
|
-
"@atlaskit/banner": "^
|
|
62
|
+
"@atlaskit/banner": "^14.0.0",
|
|
62
63
|
"@atlaskit/breadcrumbs": "^15.0.0",
|
|
63
|
-
"@atlaskit/button": "*",
|
|
64
64
|
"@atlaskit/checkbox": "^17.0.0",
|
|
65
|
-
"@atlaskit/
|
|
66
|
-
"@atlaskit/
|
|
65
|
+
"@atlaskit/code": "^16.0.0",
|
|
66
|
+
"@atlaskit/datetime-picker": "^16.1.0",
|
|
67
|
+
"@atlaskit/docs": "^10.0.0",
|
|
67
68
|
"@atlaskit/dropdown-menu": "^13.0.0",
|
|
68
|
-
"@atlaskit/flag": "^16.
|
|
69
|
+
"@atlaskit/flag": "^16.2.0",
|
|
69
70
|
"@atlaskit/form": "^12.0.0",
|
|
70
71
|
"@atlaskit/heading": "^5.1.0",
|
|
71
|
-
"@atlaskit/image": "^2.0.0",
|
|
72
|
-
"@atlaskit/inline-dialog": "^17.0.0",
|
|
73
72
|
"@atlaskit/link": "^3.0.0",
|
|
74
73
|
"@atlaskit/popup": "^2.0.0",
|
|
75
74
|
"@atlaskit/radio": "^8.0.0",
|
|
76
|
-
"@atlaskit/section-message": "
|
|
75
|
+
"@atlaskit/section-message": "^8.1.0",
|
|
77
76
|
"@atlaskit/select": "^20.0.0",
|
|
78
|
-
"@atlaskit/ssr": "
|
|
77
|
+
"@atlaskit/ssr": "^0.4.0",
|
|
79
78
|
"@atlaskit/textfield": "^8.0.0",
|
|
80
79
|
"@atlaskit/tooltip": "^20.0.0",
|
|
81
|
-
"@atlaskit/visual-regression": "
|
|
80
|
+
"@atlaskit/visual-regression": "^0.10.0",
|
|
81
|
+
"@atlassian/feature-flags-test-utils": "^0.3.0",
|
|
82
82
|
"@testing-library/dom": "^10.1.0",
|
|
83
83
|
"@testing-library/react": "^13.4.0",
|
|
84
84
|
"@testing-library/user-event": "^14.4.3",
|
|
@@ -143,6 +143,10 @@
|
|
|
143
143
|
},
|
|
144
144
|
"platform_modal-dialog-heading-icon-a11y-fix": {
|
|
145
145
|
"type": "boolean"
|
|
146
|
+
},
|
|
147
|
+
"platform_design_system_motion_on_finish_fix": {
|
|
148
|
+
"type": "boolean",
|
|
149
|
+
"referenceOnly": "true"
|
|
146
150
|
}
|
|
147
151
|
},
|
|
148
152
|
"homepage": "https://atlassian.design/components/modal-dialog/"
|