@atlaskit/modal-dialog 16.6.0 → 16.6.1
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 +7 -0
- package/dist/cjs/internal/components/modal-dialog.compiled.css +1 -1
- package/dist/cjs/internal/components/modal-dialog.js +13 -12
- package/dist/cjs/internal/components/modal-wrapper.js +1 -1
- package/dist/es2019/internal/components/modal-dialog.compiled.css +1 -1
- package/dist/es2019/internal/components/modal-dialog.js +12 -14
- package/dist/es2019/internal/components/modal-wrapper.js +1 -1
- package/dist/esm/internal/components/modal-dialog.compiled.css +1 -1
- package/dist/esm/internal/components/modal-dialog.js +13 -12
- package/dist/esm/internal/components/modal-wrapper.js +1 -1
- package/package.json +3 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/modal-dialog
|
|
2
2
|
|
|
3
|
+
## 16.6.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`d20edab2fda3a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d20edab2fda3a) -
|
|
8
|
+
Cleaned up new shape theme styles, making new border and radius values the default.
|
|
9
|
+
|
|
3
10
|
## 16.6.0
|
|
4
11
|
|
|
5
12
|
### Minor Changes
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
|
|
24
24
|
._ra3xnqa1:focus-visible{outline-style:solid}
|
|
25
25
|
@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
|
|
26
|
-
@media (min-width:30rem){._1jyk1jm9{height:var(--modal-dialog-height,auto)}._1jyk1osq{height:100%}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}.
|
|
26
|
+
@media (min-width:30rem){._1jyk1jm9{height:var(--modal-dialog-height,auto)}._1jyk1osq{height:100%}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}
|
|
27
27
|
@media (max-width:29.9375rem){._1if81osq{height:100%}}
|
|
@@ -37,8 +37,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
37
37
|
var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
|
|
38
38
|
var dialogStyles = {
|
|
39
39
|
root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p130s _yakv1kw7 _4lht1kw7 _1xlt6m9r",
|
|
40
|
-
borderRadius: "
|
|
41
|
-
borderRadiusT26Shape: "_epkxpb1k",
|
|
40
|
+
borderRadius: "_epkxpb1k",
|
|
42
41
|
motion: "_c71l1kw7 _p12f1kw7 _1e0c1txw _1jyk1jm9 _1if81osq",
|
|
43
42
|
rootMotion: "_yakv1wug _4lht1wug",
|
|
44
43
|
fullscreen: "_1jyk1osq"
|
|
@@ -69,15 +68,17 @@ var ModalDialog = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
69
68
|
var titleId = "modal-dialog-title-".concat(id);
|
|
70
69
|
var defaultTestId = testId || 'modal-dialog';
|
|
71
70
|
(0, _react.useEffect)(function () {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
71
|
+
return (
|
|
72
|
+
// Modal dialogs can appear on top of iframe elements that are on another domain.
|
|
73
|
+
// There is a Chrome bug where drag and drop in an element on top of a cross domain
|
|
74
|
+
// iframe is not working. We are applying the workaround for this bug in modal so
|
|
75
|
+
// that consumers of our modal don't have to worry about this bug and are free to
|
|
76
|
+
// create whatever drag and drop experience they like inside a modal
|
|
77
|
+
//
|
|
78
|
+
// Chrome bug: https://issues.chromium.org/issues/362301053
|
|
79
79
|
|
|
80
|
-
|
|
80
|
+
(0, _combine.combine)((0, _element.disableDraggingToCrossOriginIFramesForElement)(), (0, _textSelection.disableDraggingToCrossOriginIFramesForTextSelection)(), (0, _external.disableDraggingToCrossOriginIFramesForExternal)())
|
|
81
|
+
);
|
|
81
82
|
}, []);
|
|
82
83
|
(0, _useAutoFocus.default)(autoFocus,
|
|
83
84
|
// When a user supplies a ref to focus we enable this hook
|
|
@@ -140,7 +141,7 @@ var ModalDialog = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
140
141
|
tabIndex: -1,
|
|
141
142
|
"aria-modal": true,
|
|
142
143
|
"data-ds--level": currentLevel,
|
|
143
|
-
className: (0, _runtime.ax)([dialogStyles.root, dialogStyles.rootMotion, !isFullScreen && dialogStyles.borderRadius,
|
|
144
|
+
className: (0, _runtime.ax)([dialogStyles.root, dialogStyles.rootMotion, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
|
|
144
145
|
}, children)) : /*#__PURE__*/React.createElement(_fadeIn.default
|
|
145
146
|
/**
|
|
146
147
|
* We don't want a 'slide in' for the full screen modals.
|
|
@@ -158,7 +159,7 @@ var ModalDialog = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
158
159
|
'--modal-dialog-height': (0, _dialogHeight.dialogHeight)(height)
|
|
159
160
|
},
|
|
160
161
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
161
|
-
className: (0, _runtime.ax)([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius,
|
|
162
|
+
className: (0, _runtime.ax)([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
|
|
162
163
|
role: "dialog",
|
|
163
164
|
"aria-labelledby": label ? undefined : titleId,
|
|
164
165
|
"data-testid": defaultTestId,
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
|
|
24
24
|
._ra3xnqa1:focus-visible{outline-style:solid}
|
|
25
25
|
@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
|
|
26
|
-
@media (min-width:30rem){._1jyk1jm9{height:var(--modal-dialog-height,auto)}._1jyk1osq{height:100%}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}.
|
|
26
|
+
@media (min-width:30rem){._1jyk1jm9{height:var(--modal-dialog-height,auto)}._1jyk1osq{height:100%}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}
|
|
27
27
|
@media (max-width:29.9375rem){._1if81osq{height:100%}}
|
|
@@ -26,8 +26,7 @@ import Positioner from './positioner';
|
|
|
26
26
|
const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
|
|
27
27
|
const dialogStyles = {
|
|
28
28
|
root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p130s _yakv1kw7 _4lht1kw7 _1xlt6m9r",
|
|
29
|
-
borderRadius: "
|
|
30
|
-
borderRadiusT26Shape: "_epkxpb1k",
|
|
29
|
+
borderRadius: "_epkxpb1k",
|
|
31
30
|
motion: "_c71l1kw7 _p12f1kw7 _1e0c1txw _1jyk1jm9 _1if81osq",
|
|
32
31
|
rootMotion: "_yakv1wug _4lht1wug",
|
|
33
32
|
fullscreen: "_1jyk1osq"
|
|
@@ -55,17 +54,16 @@ const ModalDialog = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
55
54
|
const id = useId();
|
|
56
55
|
const titleId = `modal-dialog-title-${id}`;
|
|
57
56
|
const defaultTestId = testId || 'modal-dialog';
|
|
58
|
-
useEffect(() =>
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
57
|
+
useEffect(() =>
|
|
58
|
+
// Modal dialogs can appear on top of iframe elements that are on another domain.
|
|
59
|
+
// There is a Chrome bug where drag and drop in an element on top of a cross domain
|
|
60
|
+
// iframe is not working. We are applying the workaround for this bug in modal so
|
|
61
|
+
// that consumers of our modal don't have to worry about this bug and are free to
|
|
62
|
+
// create whatever drag and drop experience they like inside a modal
|
|
63
|
+
//
|
|
64
|
+
// Chrome bug: https://issues.chromium.org/issues/362301053
|
|
66
65
|
|
|
67
|
-
|
|
68
|
-
}, []);
|
|
66
|
+
combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal()), []);
|
|
69
67
|
useAutoFocus(autoFocus,
|
|
70
68
|
// When a user supplies a ref to focus we enable this hook
|
|
71
69
|
typeof autoFocus === 'object');
|
|
@@ -123,7 +121,7 @@ const ModalDialog = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
123
121
|
tabIndex: -1,
|
|
124
122
|
"aria-modal": true,
|
|
125
123
|
"data-ds--level": currentLevel,
|
|
126
|
-
className: ax([dialogStyles.root, dialogStyles.rootMotion, !isFullScreen && dialogStyles.borderRadius,
|
|
124
|
+
className: ax([dialogStyles.root, dialogStyles.rootMotion, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
|
|
127
125
|
}, children)) : /*#__PURE__*/React.createElement(FadeIn
|
|
128
126
|
/**
|
|
129
127
|
* We don't want a 'slide in' for the full screen modals.
|
|
@@ -140,7 +138,7 @@ const ModalDialog = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
140
138
|
'--modal-dialog-height': dialogHeight(height)
|
|
141
139
|
},
|
|
142
140
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
143
|
-
className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius,
|
|
141
|
+
className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
|
|
144
142
|
role: "dialog",
|
|
145
143
|
"aria-labelledby": label ? undefined : titleId,
|
|
146
144
|
"data-testid": defaultTestId,
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
|
|
24
24
|
._ra3xnqa1:focus-visible{outline-style:solid}
|
|
25
25
|
@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
|
|
26
|
-
@media (min-width:30rem){._1jyk1jm9{height:var(--modal-dialog-height,auto)}._1jyk1osq{height:100%}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}.
|
|
26
|
+
@media (min-width:30rem){._1jyk1jm9{height:var(--modal-dialog-height,auto)}._1jyk1osq{height:100%}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}
|
|
27
27
|
@media (max-width:29.9375rem){._1if81osq{height:100%}}
|
|
@@ -28,8 +28,7 @@ import Positioner from './positioner';
|
|
|
28
28
|
var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
|
|
29
29
|
var dialogStyles = {
|
|
30
30
|
root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p130s _yakv1kw7 _4lht1kw7 _1xlt6m9r",
|
|
31
|
-
borderRadius: "
|
|
32
|
-
borderRadiusT26Shape: "_epkxpb1k",
|
|
31
|
+
borderRadius: "_epkxpb1k",
|
|
33
32
|
motion: "_c71l1kw7 _p12f1kw7 _1e0c1txw _1jyk1jm9 _1if81osq",
|
|
34
33
|
rootMotion: "_yakv1wug _4lht1wug",
|
|
35
34
|
fullscreen: "_1jyk1osq"
|
|
@@ -60,15 +59,17 @@ var ModalDialog = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
60
59
|
var titleId = "modal-dialog-title-".concat(id);
|
|
61
60
|
var defaultTestId = testId || 'modal-dialog';
|
|
62
61
|
useEffect(function () {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
62
|
+
return (
|
|
63
|
+
// Modal dialogs can appear on top of iframe elements that are on another domain.
|
|
64
|
+
// There is a Chrome bug where drag and drop in an element on top of a cross domain
|
|
65
|
+
// iframe is not working. We are applying the workaround for this bug in modal so
|
|
66
|
+
// that consumers of our modal don't have to worry about this bug and are free to
|
|
67
|
+
// create whatever drag and drop experience they like inside a modal
|
|
68
|
+
//
|
|
69
|
+
// Chrome bug: https://issues.chromium.org/issues/362301053
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal())
|
|
72
|
+
);
|
|
72
73
|
}, []);
|
|
73
74
|
useAutoFocus(autoFocus,
|
|
74
75
|
// When a user supplies a ref to focus we enable this hook
|
|
@@ -131,7 +132,7 @@ var ModalDialog = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
131
132
|
tabIndex: -1,
|
|
132
133
|
"aria-modal": true,
|
|
133
134
|
"data-ds--level": currentLevel,
|
|
134
|
-
className: ax([dialogStyles.root, dialogStyles.rootMotion, !isFullScreen && dialogStyles.borderRadius,
|
|
135
|
+
className: ax([dialogStyles.root, dialogStyles.rootMotion, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
|
|
135
136
|
}, children)) : /*#__PURE__*/React.createElement(FadeIn
|
|
136
137
|
/**
|
|
137
138
|
* We don't want a 'slide in' for the full screen modals.
|
|
@@ -149,7 +150,7 @@ var ModalDialog = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
149
150
|
'--modal-dialog-height': dialogHeight(height)
|
|
150
151
|
},
|
|
151
152
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
152
|
-
className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius,
|
|
153
|
+
className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
|
|
153
154
|
role: "dialog",
|
|
154
155
|
"aria-labelledby": label ? undefined : titleId,
|
|
155
156
|
"data-testid": defaultTestId,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/modal-dialog",
|
|
3
|
-
"version": "16.6.
|
|
3
|
+
"version": "16.6.1",
|
|
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/"
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"@atlaskit/primitives": "^22.5.0",
|
|
49
49
|
"@atlaskit/react-compiler-gating": "^0.2.0",
|
|
50
50
|
"@atlaskit/theme": "^28.2.0",
|
|
51
|
-
"@atlaskit/tokens": "^16.
|
|
51
|
+
"@atlaskit/tokens": "^16.11.0",
|
|
52
52
|
"@atlaskit/top-layer": "^4.4.0",
|
|
53
53
|
"@babel/runtime": "^7.0.0",
|
|
54
54
|
"@compiled/react": "^1.0.2",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"@af/accessibility-testing": "workspace:^",
|
|
65
65
|
"@af/integration-testing": "workspace:^",
|
|
66
66
|
"@af/visual-regression": "workspace:^",
|
|
67
|
-
"@atlaskit/avatar": "^
|
|
67
|
+
"@atlaskit/avatar": "^28.0.0",
|
|
68
68
|
"@atlaskit/avatar-group": "^14.3.0",
|
|
69
69
|
"@atlaskit/banner": "^15.3.0",
|
|
70
70
|
"@atlaskit/breadcrumbs": "^17.7.0",
|
|
@@ -106,9 +106,6 @@
|
|
|
106
106
|
"platform_modal-dialog-heading-icon-a11y-fix": {
|
|
107
107
|
"type": "boolean"
|
|
108
108
|
},
|
|
109
|
-
"platform-dst-shape-theme-default": {
|
|
110
|
-
"type": "boolean"
|
|
111
|
-
},
|
|
112
109
|
"platform-dst-motion-uplift-modal": {
|
|
113
110
|
"type": "boolean"
|
|
114
111
|
},
|