@atlaskit/modal-dialog 14.11.5 → 14.13.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 +19 -0
- package/close-button/package.json +17 -0
- package/dist/cjs/internal/components/modal-wrapper.js +5 -2
- package/dist/es2019/internal/components/modal-wrapper.js +5 -2
- package/dist/esm/internal/components/modal-wrapper.js +5 -2
- package/modal-dialog.docs.tsx +172 -0
- package/package.json +15 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/modal-dialog
|
|
2
2
|
|
|
3
|
+
## 14.13.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`bbfd308f360d8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bbfd308f360d8) -
|
|
8
|
+
Add flag to remove internal focus lock from running when using `false` in `autoFocus`. This is in
|
|
9
|
+
service of eventually removing boolean `autoFocus` from the API.
|
|
10
|
+
|
|
11
|
+
## 14.12.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- [`1001eaeabe30f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1001eaeabe30f) -
|
|
16
|
+
Autofix: add explicit package exports (barrel removal)
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 14.11.5
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atlaskit/modal-dialog/close-button",
|
|
3
|
+
"main": "../dist/cjs/close-button.js",
|
|
4
|
+
"module": "../dist/esm/close-button.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/close-button.js",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"**/*.compiled.css"
|
|
8
|
+
],
|
|
9
|
+
"types": "../dist/types/close-button.d.ts",
|
|
10
|
+
"typesVersions": {
|
|
11
|
+
">=4.5 <5.9": {
|
|
12
|
+
"*": [
|
|
13
|
+
"../dist/types-ts4.5/close-button.d.ts"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -20,6 +20,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
|
20
20
|
var _layering = require("@atlaskit/layering");
|
|
21
21
|
var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
|
|
22
22
|
var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
|
|
23
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
23
24
|
var _portal = _interopRequireDefault(require("@atlaskit/portal"));
|
|
24
25
|
var _constants = require("@atlaskit/theme/constants");
|
|
25
26
|
var _useModalStack = _interopRequireDefault(require("../hooks/use-modal-stack"));
|
|
@@ -82,13 +83,15 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
|
|
|
82
83
|
var isForeground = stackIndex === 0;
|
|
83
84
|
|
|
84
85
|
// When a user supplies a ref to focus we skip auto focus via react-focus-lock
|
|
85
|
-
|
|
86
|
+
// When flag is true and a ref is not supplied, autofocus is true. See https://product-fabric.atlassian.net/browse/DSP-24307
|
|
87
|
+
// When we remove boolean `autoFocus`, we won't have to worry about this
|
|
88
|
+
var autoFocusLock = (0, _platformFeatureFlags.fg)('platform_dst_autofocus-never-false-2') ? typeof autoFocus === 'boolean' : typeof autoFocus === 'boolean' ? autoFocus : false;
|
|
86
89
|
var onCloseHandler = (0, _analyticsNext.usePlatformLeafEventHandler)({
|
|
87
90
|
fn: providedOnClose || _noop.default,
|
|
88
91
|
action: 'closed',
|
|
89
92
|
componentName: 'modalDialog',
|
|
90
93
|
packageName: "@atlaskit/modal-dialog",
|
|
91
|
-
packageVersion: "
|
|
94
|
+
packageVersion: "0.0.0-development"
|
|
92
95
|
});
|
|
93
96
|
var onBlanketClicked = (0, _react.useCallback)(function (e) {
|
|
94
97
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -12,6 +12,7 @@ import noop from '@atlaskit/ds-lib/noop';
|
|
|
12
12
|
import { Layering } from '@atlaskit/layering';
|
|
13
13
|
import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
|
|
14
14
|
import FadeIn from '@atlaskit/motion/fade-in';
|
|
15
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
16
|
import Portal from '@atlaskit/portal';
|
|
16
17
|
import { layers } from '@atlaskit/theme/constants';
|
|
17
18
|
import useModalStack from '../hooks/use-modal-stack';
|
|
@@ -69,13 +70,15 @@ const InternalModalWrapper = props => {
|
|
|
69
70
|
const isForeground = stackIndex === 0;
|
|
70
71
|
|
|
71
72
|
// When a user supplies a ref to focus we skip auto focus via react-focus-lock
|
|
72
|
-
|
|
73
|
+
// When flag is true and a ref is not supplied, autofocus is true. See https://product-fabric.atlassian.net/browse/DSP-24307
|
|
74
|
+
// When we remove boolean `autoFocus`, we won't have to worry about this
|
|
75
|
+
const autoFocusLock = fg('platform_dst_autofocus-never-false-2') ? typeof autoFocus === 'boolean' : typeof autoFocus === 'boolean' ? autoFocus : false;
|
|
73
76
|
const onCloseHandler = usePlatformLeafEventHandler({
|
|
74
77
|
fn: providedOnClose || noop,
|
|
75
78
|
action: 'closed',
|
|
76
79
|
componentName: 'modalDialog',
|
|
77
80
|
packageName: "@atlaskit/modal-dialog",
|
|
78
|
-
packageVersion: "
|
|
81
|
+
packageVersion: "0.0.0-development"
|
|
79
82
|
});
|
|
80
83
|
const onBlanketClicked = useCallback(e => {
|
|
81
84
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -12,6 +12,7 @@ import noop from '@atlaskit/ds-lib/noop';
|
|
|
12
12
|
import { Layering } from '@atlaskit/layering';
|
|
13
13
|
import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
|
|
14
14
|
import FadeIn from '@atlaskit/motion/fade-in';
|
|
15
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
16
|
import Portal from '@atlaskit/portal';
|
|
16
17
|
import { layers } from '@atlaskit/theme/constants';
|
|
17
18
|
import useModalStack from '../hooks/use-modal-stack';
|
|
@@ -73,13 +74,15 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
|
|
|
73
74
|
var isForeground = stackIndex === 0;
|
|
74
75
|
|
|
75
76
|
// When a user supplies a ref to focus we skip auto focus via react-focus-lock
|
|
76
|
-
|
|
77
|
+
// When flag is true and a ref is not supplied, autofocus is true. See https://product-fabric.atlassian.net/browse/DSP-24307
|
|
78
|
+
// When we remove boolean `autoFocus`, we won't have to worry about this
|
|
79
|
+
var autoFocusLock = fg('platform_dst_autofocus-never-false-2') ? typeof autoFocus === 'boolean' : typeof autoFocus === 'boolean' ? autoFocus : false;
|
|
77
80
|
var onCloseHandler = usePlatformLeafEventHandler({
|
|
78
81
|
fn: providedOnClose || noop,
|
|
79
82
|
action: 'closed',
|
|
80
83
|
componentName: 'modalDialog',
|
|
81
84
|
packageName: "@atlaskit/modal-dialog",
|
|
82
|
-
packageVersion: "
|
|
85
|
+
packageVersion: "0.0.0-development"
|
|
83
86
|
});
|
|
84
87
|
var onBlanketClicked = useCallback(function (e) {
|
|
85
88
|
if (shouldCloseOnOverlayClick) {
|
package/modal-dialog.docs.tsx
CHANGED
|
@@ -49,6 +49,178 @@ const documentation: ComponentStructuredContentSource[] = [
|
|
|
49
49
|
keywords: ['modal', 'dialog', 'popup', 'overlay', 'focused', 'interaction', 'layer'],
|
|
50
50
|
categories: ['overlay'],
|
|
51
51
|
},
|
|
52
|
+
{
|
|
53
|
+
name: 'ModalHeader',
|
|
54
|
+
description:
|
|
55
|
+
'The header section of a modal dialog, typically containing the title and optional close button.',
|
|
56
|
+
status: 'general-availability',
|
|
57
|
+
import: {
|
|
58
|
+
name: 'ModalHeader',
|
|
59
|
+
package: '@atlaskit/modal-dialog',
|
|
60
|
+
type: 'named',
|
|
61
|
+
packagePath: path.resolve(__dirname),
|
|
62
|
+
packageJson: require('./package.json'),
|
|
63
|
+
},
|
|
64
|
+
usageGuidelines: [
|
|
65
|
+
'Use as the first child of Modal',
|
|
66
|
+
'Use hasCloseButton prop for standard close affordance',
|
|
67
|
+
'Ensure header contains ModalTitle or equivalent for accessibility',
|
|
68
|
+
'For custom headers, use CloseButton as first element in DOM',
|
|
69
|
+
],
|
|
70
|
+
contentGuidelines: ['Use clear, descriptive titles', 'Keep header content focused'],
|
|
71
|
+
examples: [
|
|
72
|
+
{
|
|
73
|
+
name: 'Modal Header',
|
|
74
|
+
description: 'ModalHeader example',
|
|
75
|
+
source: path.resolve(__dirname, './examples/constellation/modal-header-default.tsx'),
|
|
76
|
+
},
|
|
77
|
+
],
|
|
78
|
+
keywords: ['modal', 'header', 'title', 'close'],
|
|
79
|
+
categories: ['overlay'],
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
name: 'ModalTitle',
|
|
83
|
+
description: 'The title element for a modal dialog. Renders as h1 for accessibility.',
|
|
84
|
+
status: 'general-availability',
|
|
85
|
+
import: {
|
|
86
|
+
name: 'ModalTitle',
|
|
87
|
+
package: '@atlaskit/modal-dialog',
|
|
88
|
+
type: 'named',
|
|
89
|
+
packagePath: path.resolve(__dirname),
|
|
90
|
+
packageJson: require('./package.json'),
|
|
91
|
+
},
|
|
92
|
+
usageGuidelines: [
|
|
93
|
+
'Use inside ModalHeader for the modal title',
|
|
94
|
+
'Modal must have a title for accessibility',
|
|
95
|
+
'Supports any valid React element as children',
|
|
96
|
+
],
|
|
97
|
+
contentGuidelines: ['Use clear, descriptive titles', 'Use sentence case'],
|
|
98
|
+
examples: [
|
|
99
|
+
{
|
|
100
|
+
name: 'Modal Title',
|
|
101
|
+
description: 'ModalTitle example',
|
|
102
|
+
source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
|
|
103
|
+
},
|
|
104
|
+
],
|
|
105
|
+
keywords: ['modal', 'title', 'heading'],
|
|
106
|
+
categories: ['overlay'],
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
name: 'ModalBody',
|
|
110
|
+
description: 'The main content area of a modal dialog.',
|
|
111
|
+
status: 'general-availability',
|
|
112
|
+
import: {
|
|
113
|
+
name: 'ModalBody',
|
|
114
|
+
package: '@atlaskit/modal-dialog',
|
|
115
|
+
type: 'named',
|
|
116
|
+
packagePath: path.resolve(__dirname),
|
|
117
|
+
packageJson: require('./package.json'),
|
|
118
|
+
},
|
|
119
|
+
usageGuidelines: [
|
|
120
|
+
'Use for the primary content between header and footer',
|
|
121
|
+
'Accepts any valid React element as children',
|
|
122
|
+
'Handles overflow and scrolling when content exceeds viewport',
|
|
123
|
+
],
|
|
124
|
+
contentGuidelines: ['Keep content focused on a single task', 'Use clear, readable content'],
|
|
125
|
+
examples: [
|
|
126
|
+
{
|
|
127
|
+
name: 'Modal Body',
|
|
128
|
+
description: 'ModalBody example',
|
|
129
|
+
source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
|
|
130
|
+
},
|
|
131
|
+
],
|
|
132
|
+
keywords: ['modal', 'body', 'content'],
|
|
133
|
+
categories: ['overlay'],
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
name: 'ModalFooter',
|
|
137
|
+
description: 'The footer section of a modal dialog, typically containing action buttons.',
|
|
138
|
+
status: 'general-availability',
|
|
139
|
+
import: {
|
|
140
|
+
name: 'ModalFooter',
|
|
141
|
+
package: '@atlaskit/modal-dialog',
|
|
142
|
+
type: 'named',
|
|
143
|
+
packagePath: path.resolve(__dirname),
|
|
144
|
+
packageJson: require('./package.json'),
|
|
145
|
+
},
|
|
146
|
+
usageGuidelines: [
|
|
147
|
+
'Use for primary and secondary actions',
|
|
148
|
+
'Primary button on the right of secondary',
|
|
149
|
+
'Include Cancel/Close for dismissal',
|
|
150
|
+
'Accepts any valid React element for custom layouts',
|
|
151
|
+
],
|
|
152
|
+
contentGuidelines: [
|
|
153
|
+
'Primary button label should reflect the modal title',
|
|
154
|
+
'Use action verbs in button labels',
|
|
155
|
+
],
|
|
156
|
+
examples: [
|
|
157
|
+
{
|
|
158
|
+
name: 'Modal Footer',
|
|
159
|
+
description: 'ModalFooter example',
|
|
160
|
+
source: path.resolve(__dirname, './examples/constellation/modal-footer-default.tsx'),
|
|
161
|
+
},
|
|
162
|
+
],
|
|
163
|
+
keywords: ['modal', 'footer', 'actions', 'buttons'],
|
|
164
|
+
categories: ['overlay'],
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
name: 'ModalTransition',
|
|
168
|
+
description: 'A wrapper that provides enter/exit transitions for modal content.',
|
|
169
|
+
status: 'general-availability',
|
|
170
|
+
import: {
|
|
171
|
+
name: 'ModalTransition',
|
|
172
|
+
package: '@atlaskit/modal-dialog',
|
|
173
|
+
type: 'named',
|
|
174
|
+
packagePath: path.resolve(__dirname),
|
|
175
|
+
packageJson: require('./package.json'),
|
|
176
|
+
},
|
|
177
|
+
usageGuidelines: [
|
|
178
|
+
'Wrap Modal with ModalTransition for animated open/close',
|
|
179
|
+
'Use when modal visibility is controlled by state',
|
|
180
|
+
'Children mount when visible and unmount when closed',
|
|
181
|
+
],
|
|
182
|
+
examples: [
|
|
183
|
+
{
|
|
184
|
+
name: 'Modal Transition',
|
|
185
|
+
description: 'ModalTransition example',
|
|
186
|
+
source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
|
|
187
|
+
},
|
|
188
|
+
],
|
|
189
|
+
keywords: ['modal', 'transition', 'animation'],
|
|
190
|
+
categories: ['overlay'],
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
name: 'CloseButton',
|
|
194
|
+
description:
|
|
195
|
+
'An accessible close button for use in custom modal headers. Ensures users have an obvious way to close the modal.',
|
|
196
|
+
status: 'general-availability',
|
|
197
|
+
import: {
|
|
198
|
+
name: 'CloseButton',
|
|
199
|
+
package: '@atlaskit/modal-dialog',
|
|
200
|
+
type: 'named',
|
|
201
|
+
packagePath: path.resolve(__dirname),
|
|
202
|
+
packageJson: require('./package.json'),
|
|
203
|
+
},
|
|
204
|
+
usageGuidelines: [
|
|
205
|
+
'Use when customizing ModalHeader without hasCloseButton',
|
|
206
|
+
'Render CloseButton first in DOM for proper focus order',
|
|
207
|
+
'Use Flex with row-reverse if close should appear on the right',
|
|
208
|
+
'Provide label prop for custom accessible name',
|
|
209
|
+
],
|
|
210
|
+
accessibilityGuidelines: [
|
|
211
|
+
'Close button is required for modals (consult a11y team for rare exceptions)',
|
|
212
|
+
'Ensure close button is keyboard accessible',
|
|
213
|
+
],
|
|
214
|
+
examples: [
|
|
215
|
+
{
|
|
216
|
+
name: 'Close Button',
|
|
217
|
+
description: 'CloseButton example',
|
|
218
|
+
source: path.resolve(__dirname, './examples/constellation/modal-header-custom.tsx'),
|
|
219
|
+
},
|
|
220
|
+
],
|
|
221
|
+
keywords: ['modal', 'close', 'button', 'dismiss'],
|
|
222
|
+
categories: ['overlay'],
|
|
223
|
+
},
|
|
52
224
|
];
|
|
53
225
|
|
|
54
226
|
export default documentation;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/modal-dialog",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.13.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/"
|
|
@@ -27,20 +27,20 @@
|
|
|
27
27
|
"watch": "tsc --watch --noEmit --project './tsconfig.json'"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@atlaskit/analytics-next": "^11.
|
|
30
|
+
"@atlaskit/analytics-next": "^11.2.0",
|
|
31
31
|
"@atlaskit/blanket": "^15.0.0",
|
|
32
32
|
"@atlaskit/button": "^23.10.0",
|
|
33
33
|
"@atlaskit/css": "^0.19.0",
|
|
34
34
|
"@atlaskit/ds-lib": "^6.0.0",
|
|
35
|
-
"@atlaskit/icon": "^33.
|
|
35
|
+
"@atlaskit/icon": "^33.1.0",
|
|
36
36
|
"@atlaskit/layering": "^3.6.0",
|
|
37
37
|
"@atlaskit/motion": "^5.4.0",
|
|
38
38
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
39
39
|
"@atlaskit/portal": "^5.2.0",
|
|
40
40
|
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
|
41
|
-
"@atlaskit/primitives": "^18.
|
|
41
|
+
"@atlaskit/primitives": "^18.1.0",
|
|
42
42
|
"@atlaskit/theme": "^22.0.0",
|
|
43
|
-
"@atlaskit/tokens": "^11.
|
|
43
|
+
"@atlaskit/tokens": "^11.3.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
45
|
"@compiled/react": "^0.20.0",
|
|
46
46
|
"bind-event-listener": "^3.0.0",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@af/accessibility-testing": "workspace:^",
|
|
56
56
|
"@af/integration-testing": "workspace:^",
|
|
57
57
|
"@af/visual-regression": "workspace:^",
|
|
58
|
-
"@atlaskit/avatar": "^25.
|
|
58
|
+
"@atlaskit/avatar": "^25.10.0",
|
|
59
59
|
"@atlaskit/avatar-group": "^12.4.0",
|
|
60
60
|
"@atlaskit/banner": "^14.0.0",
|
|
61
61
|
"@atlaskit/breadcrumbs": "^15.3.0",
|
|
@@ -63,20 +63,22 @@
|
|
|
63
63
|
"@atlaskit/code": "^17.4.0",
|
|
64
64
|
"@atlaskit/datetime-picker": "^17.5.0",
|
|
65
65
|
"@atlaskit/docs": "^11.7.0",
|
|
66
|
-
"@atlaskit/dropdown-menu": "^16.
|
|
66
|
+
"@atlaskit/dropdown-menu": "^16.8.0",
|
|
67
67
|
"@atlaskit/flag": "^17.8.0",
|
|
68
|
-
"@atlaskit/form": "^15.
|
|
68
|
+
"@atlaskit/form": "^15.5.0",
|
|
69
69
|
"@atlaskit/heading": "^5.3.0",
|
|
70
70
|
"@atlaskit/link": "^3.3.0",
|
|
71
|
-
"@atlaskit/popup": "^4.
|
|
71
|
+
"@atlaskit/popup": "^4.14.0",
|
|
72
72
|
"@atlaskit/radio": "^8.4.0",
|
|
73
73
|
"@atlaskit/section-message": "^8.12.0",
|
|
74
74
|
"@atlaskit/select": "^21.8.0",
|
|
75
75
|
"@atlaskit/spotlight": "^0.10.0",
|
|
76
76
|
"@atlaskit/textfield": "^8.2.0",
|
|
77
|
-
"@atlaskit/tooltip": "^
|
|
77
|
+
"@atlaskit/tooltip": "^21.0.0",
|
|
78
|
+
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
78
79
|
"@atlassian/ssr-tests": "workspace:^",
|
|
79
80
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
81
|
+
"@atlassian/testing-library": "^0.4.0",
|
|
80
82
|
"@testing-library/dom": "^10.1.0",
|
|
81
83
|
"@testing-library/react": "^16.3.0",
|
|
82
84
|
"@testing-library/user-event": "^14.4.3",
|
|
@@ -127,6 +129,9 @@
|
|
|
127
129
|
},
|
|
128
130
|
"platform-dst-shape-theme-default": {
|
|
129
131
|
"type": "boolean"
|
|
132
|
+
},
|
|
133
|
+
"platform_dst_autofocus-never-false-2": {
|
|
134
|
+
"type": "boolean"
|
|
130
135
|
}
|
|
131
136
|
},
|
|
132
137
|
"homepage": "https://atlassian.design/components/modal-dialog/"
|