@atlaskit/modal-dialog 14.14.2 → 14.14.3
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 +8 -0
- package/dist/cjs/internal/components/modal-dialog.js +22 -5
- package/dist/cjs/internal/components/modal-wrapper.js +1 -1
- package/dist/cjs/internal/width.js +16 -0
- package/dist/es2019/internal/components/modal-dialog.js +18 -1
- package/dist/es2019/internal/components/modal-wrapper.js +1 -1
- package/dist/es2019/internal/width.js +10 -0
- package/dist/esm/internal/components/modal-dialog.js +18 -1
- package/dist/esm/internal/components/modal-wrapper.js +1 -1
- package/dist/esm/internal/width.js +10 -0
- package/dist/types/internal/width.d.ts +10 -0
- package/dist/types-ts4.5/internal/width.d.ts +10 -0
- package/package.json +2 -2
- package/dist/cjs/internal/utils.js +0 -33
- package/dist/es2019/internal/utils.js +0 -27
- package/dist/esm/internal/utils.js +0 -27
- package/dist/types/internal/utils.d.ts +0 -12
- package/dist/types-ts4.5/internal/utils.d.ts +0 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/modal-dialog
|
|
2
2
|
|
|
3
|
+
## 14.14.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`c966e427a25c6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c966e427a25c6) -
|
|
8
|
+
Flattens internal util file
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 14.14.2
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -28,9 +28,26 @@ var _useOnMotionFinish3 = _interopRequireDefault(require("../hooks/use-on-motion
|
|
|
28
28
|
var _element = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element");
|
|
29
29
|
var _external = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external");
|
|
30
30
|
var _textSelection = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection");
|
|
31
|
-
var
|
|
31
|
+
var _width = require("../width");
|
|
32
32
|
var _positioner = _interopRequireDefault(require("./positioner"));
|
|
33
33
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
34
|
+
var dialogWidth = function dialogWidth(input) {
|
|
35
|
+
if (!input) {
|
|
36
|
+
return 'auto';
|
|
37
|
+
}
|
|
38
|
+
var isWidthName = _width.width.values.indexOf(input.toString()) !== -1;
|
|
39
|
+
var widthName = isWidthName && input;
|
|
40
|
+
if (widthName) {
|
|
41
|
+
return "".concat(_width.width.widths[widthName], "px");
|
|
42
|
+
}
|
|
43
|
+
return typeof input === 'number' ? "".concat(input, "px") : input;
|
|
44
|
+
};
|
|
45
|
+
var dialogHeight = function dialogHeight(input) {
|
|
46
|
+
if (!input) {
|
|
47
|
+
return 'auto';
|
|
48
|
+
}
|
|
49
|
+
return typeof input === 'number' ? "".concat(input, "px") : input;
|
|
50
|
+
};
|
|
34
51
|
var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
|
|
35
52
|
var dialogStyles = {
|
|
36
53
|
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",
|
|
@@ -121,9 +138,9 @@ var ModalDialog = function ModalDialog(props) {
|
|
|
121
138
|
ref: motionRef,
|
|
122
139
|
style: {
|
|
123
140
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
124
|
-
'--modal-dialog-width':
|
|
141
|
+
'--modal-dialog-width': dialogWidth(width),
|
|
125
142
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
126
|
-
'--modal-dialog-height':
|
|
143
|
+
'--modal-dialog-height': dialogHeight(height)
|
|
127
144
|
},
|
|
128
145
|
role: "dialog",
|
|
129
146
|
"aria-labelledby": label ? undefined : titleId,
|
|
@@ -145,9 +162,9 @@ var ModalDialog = function ModalDialog(props) {
|
|
|
145
162
|
ref: (0, _mergeRefs.default)([bottomFadeInProps.ref, motionRef]),
|
|
146
163
|
style: {
|
|
147
164
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
148
|
-
'--modal-dialog-width':
|
|
165
|
+
'--modal-dialog-width': dialogWidth(width),
|
|
149
166
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
150
|
-
'--modal-dialog-height':
|
|
167
|
+
'--modal-dialog-height': dialogHeight(height)
|
|
151
168
|
},
|
|
152
169
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
153
170
|
className: (0, _runtime.ax)([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
|
|
@@ -92,7 +92,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
|
|
|
92
92
|
action: 'closed',
|
|
93
93
|
componentName: 'modalDialog',
|
|
94
94
|
packageName: "@atlaskit/modal-dialog",
|
|
95
|
-
packageVersion: "14.14.
|
|
95
|
+
packageVersion: "14.14.2"
|
|
96
96
|
});
|
|
97
97
|
var onBlanketClicked = (0, _react.useCallback)(function (e) {
|
|
98
98
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.width = void 0;
|
|
7
|
+
var width = exports.width = {
|
|
8
|
+
values: ['small', 'medium', 'large', 'x-large'],
|
|
9
|
+
widths: {
|
|
10
|
+
small: 400,
|
|
11
|
+
medium: 600,
|
|
12
|
+
large: 800,
|
|
13
|
+
'x-large': 968
|
|
14
|
+
},
|
|
15
|
+
defaultValue: 'medium'
|
|
16
|
+
};
|
|
@@ -18,8 +18,25 @@ import useOnMotionFinish from '../hooks/use-on-motion-finish';
|
|
|
18
18
|
import { disableDraggingToCrossOriginIFramesForElement } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element';
|
|
19
19
|
import { disableDraggingToCrossOriginIFramesForExternal } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external';
|
|
20
20
|
import { disableDraggingToCrossOriginIFramesForTextSelection } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection';
|
|
21
|
-
import {
|
|
21
|
+
import { width } from '../width';
|
|
22
22
|
import Positioner from './positioner';
|
|
23
|
+
const dialogWidth = input => {
|
|
24
|
+
if (!input) {
|
|
25
|
+
return 'auto';
|
|
26
|
+
}
|
|
27
|
+
const isWidthName = width.values.indexOf(input.toString()) !== -1;
|
|
28
|
+
const widthName = isWidthName && input;
|
|
29
|
+
if (widthName) {
|
|
30
|
+
return `${width.widths[widthName]}px`;
|
|
31
|
+
}
|
|
32
|
+
return typeof input === 'number' ? `${input}px` : input;
|
|
33
|
+
};
|
|
34
|
+
const dialogHeight = input => {
|
|
35
|
+
if (!input) {
|
|
36
|
+
return 'auto';
|
|
37
|
+
}
|
|
38
|
+
return typeof input === 'number' ? `${input}px` : input;
|
|
39
|
+
};
|
|
23
40
|
const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
|
|
24
41
|
const dialogStyles = {
|
|
25
42
|
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",
|
|
@@ -79,7 +79,7 @@ const InternalModalWrapper = props => {
|
|
|
79
79
|
action: 'closed',
|
|
80
80
|
componentName: 'modalDialog',
|
|
81
81
|
packageName: "@atlaskit/modal-dialog",
|
|
82
|
-
packageVersion: "14.14.
|
|
82
|
+
packageVersion: "14.14.2"
|
|
83
83
|
});
|
|
84
84
|
const onBlanketClicked = useCallback(e => {
|
|
85
85
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -20,8 +20,25 @@ import useOnMotionFinish from '../hooks/use-on-motion-finish';
|
|
|
20
20
|
import { disableDraggingToCrossOriginIFramesForElement } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element';
|
|
21
21
|
import { disableDraggingToCrossOriginIFramesForExternal } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external';
|
|
22
22
|
import { disableDraggingToCrossOriginIFramesForTextSelection } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection';
|
|
23
|
-
import {
|
|
23
|
+
import { width } from '../width';
|
|
24
24
|
import Positioner from './positioner';
|
|
25
|
+
var dialogWidth = function dialogWidth(input) {
|
|
26
|
+
if (!input) {
|
|
27
|
+
return 'auto';
|
|
28
|
+
}
|
|
29
|
+
var isWidthName = width.values.indexOf(input.toString()) !== -1;
|
|
30
|
+
var widthName = isWidthName && input;
|
|
31
|
+
if (widthName) {
|
|
32
|
+
return "".concat(width.widths[widthName], "px");
|
|
33
|
+
}
|
|
34
|
+
return typeof input === 'number' ? "".concat(input, "px") : input;
|
|
35
|
+
};
|
|
36
|
+
var dialogHeight = function dialogHeight(input) {
|
|
37
|
+
if (!input) {
|
|
38
|
+
return 'auto';
|
|
39
|
+
}
|
|
40
|
+
return typeof input === 'number' ? "".concat(input, "px") : input;
|
|
41
|
+
};
|
|
25
42
|
var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
|
|
26
43
|
var dialogStyles = {
|
|
27
44
|
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",
|
|
@@ -83,7 +83,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
|
|
|
83
83
|
action: 'closed',
|
|
84
84
|
componentName: 'modalDialog',
|
|
85
85
|
packageName: "@atlaskit/modal-dialog",
|
|
86
|
-
packageVersion: "14.14.
|
|
86
|
+
packageVersion: "14.14.2"
|
|
87
87
|
});
|
|
88
88
|
var onBlanketClicked = useCallback(function (e) {
|
|
89
89
|
if (shouldCloseOnOverlayClick) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/modal-dialog",
|
|
3
|
-
"version": "14.14.
|
|
3
|
+
"version": "14.14.3",
|
|
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/"
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"@atlaskit/layering": "^3.6.0",
|
|
37
37
|
"@atlaskit/motion": "^5.5.0",
|
|
38
38
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
39
|
-
"@atlaskit/portal": "^5.
|
|
39
|
+
"@atlaskit/portal": "^5.4.0",
|
|
40
40
|
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
|
41
41
|
"@atlaskit/primitives": "^18.1.0",
|
|
42
42
|
"@atlaskit/theme": "^22.0.0",
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.width = exports.dialogWidth = exports.dialogHeight = void 0;
|
|
7
|
-
var width = exports.width = {
|
|
8
|
-
values: ['small', 'medium', 'large', 'x-large'],
|
|
9
|
-
widths: {
|
|
10
|
-
small: 400,
|
|
11
|
-
medium: 600,
|
|
12
|
-
large: 800,
|
|
13
|
-
'x-large': 968
|
|
14
|
-
},
|
|
15
|
-
defaultValue: 'medium'
|
|
16
|
-
};
|
|
17
|
-
var dialogWidth = exports.dialogWidth = function dialogWidth(input) {
|
|
18
|
-
if (!input) {
|
|
19
|
-
return 'auto';
|
|
20
|
-
}
|
|
21
|
-
var isWidthName = width.values.indexOf(input.toString()) !== -1;
|
|
22
|
-
var widthName = isWidthName && input;
|
|
23
|
-
if (widthName) {
|
|
24
|
-
return "".concat(width.widths[widthName], "px");
|
|
25
|
-
}
|
|
26
|
-
return typeof input === 'number' ? "".concat(input, "px") : input;
|
|
27
|
-
};
|
|
28
|
-
var dialogHeight = exports.dialogHeight = function dialogHeight(input) {
|
|
29
|
-
if (!input) {
|
|
30
|
-
return 'auto';
|
|
31
|
-
}
|
|
32
|
-
return typeof input === 'number' ? "".concat(input, "px") : input;
|
|
33
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
export const width = {
|
|
2
|
-
values: ['small', 'medium', 'large', 'x-large'],
|
|
3
|
-
widths: {
|
|
4
|
-
small: 400,
|
|
5
|
-
medium: 600,
|
|
6
|
-
large: 800,
|
|
7
|
-
'x-large': 968
|
|
8
|
-
},
|
|
9
|
-
defaultValue: 'medium'
|
|
10
|
-
};
|
|
11
|
-
export const dialogWidth = input => {
|
|
12
|
-
if (!input) {
|
|
13
|
-
return 'auto';
|
|
14
|
-
}
|
|
15
|
-
const isWidthName = width.values.indexOf(input.toString()) !== -1;
|
|
16
|
-
const widthName = isWidthName && input;
|
|
17
|
-
if (widthName) {
|
|
18
|
-
return `${width.widths[widthName]}px`;
|
|
19
|
-
}
|
|
20
|
-
return typeof input === 'number' ? `${input}px` : input;
|
|
21
|
-
};
|
|
22
|
-
export const dialogHeight = input => {
|
|
23
|
-
if (!input) {
|
|
24
|
-
return 'auto';
|
|
25
|
-
}
|
|
26
|
-
return typeof input === 'number' ? `${input}px` : input;
|
|
27
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
export var width = {
|
|
2
|
-
values: ['small', 'medium', 'large', 'x-large'],
|
|
3
|
-
widths: {
|
|
4
|
-
small: 400,
|
|
5
|
-
medium: 600,
|
|
6
|
-
large: 800,
|
|
7
|
-
'x-large': 968
|
|
8
|
-
},
|
|
9
|
-
defaultValue: 'medium'
|
|
10
|
-
};
|
|
11
|
-
export var dialogWidth = function dialogWidth(input) {
|
|
12
|
-
if (!input) {
|
|
13
|
-
return 'auto';
|
|
14
|
-
}
|
|
15
|
-
var isWidthName = width.values.indexOf(input.toString()) !== -1;
|
|
16
|
-
var widthName = isWidthName && input;
|
|
17
|
-
if (widthName) {
|
|
18
|
-
return "".concat(width.widths[widthName], "px");
|
|
19
|
-
}
|
|
20
|
-
return typeof input === 'number' ? "".concat(input, "px") : input;
|
|
21
|
-
};
|
|
22
|
-
export var dialogHeight = function dialogHeight(input) {
|
|
23
|
-
if (!input) {
|
|
24
|
-
return 'auto';
|
|
25
|
-
}
|
|
26
|
-
return typeof input === 'number' ? "".concat(input, "px") : input;
|
|
27
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { type ModalDialogProps, type WidthNames } from '../types';
|
|
2
|
-
interface Width {
|
|
3
|
-
values: string[];
|
|
4
|
-
widths: {
|
|
5
|
-
[index in WidthNames]: number;
|
|
6
|
-
};
|
|
7
|
-
defaultValue: string;
|
|
8
|
-
}
|
|
9
|
-
export declare const width: Width;
|
|
10
|
-
export declare const dialogWidth: (input?: ModalDialogProps["width"]) => string;
|
|
11
|
-
export declare const dialogHeight: (input?: ModalDialogProps["height"]) => string;
|
|
12
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { type ModalDialogProps, type WidthNames } from '../types';
|
|
2
|
-
interface Width {
|
|
3
|
-
values: string[];
|
|
4
|
-
widths: {
|
|
5
|
-
[index in WidthNames]: number;
|
|
6
|
-
};
|
|
7
|
-
defaultValue: string;
|
|
8
|
-
}
|
|
9
|
-
export declare const width: Width;
|
|
10
|
-
export declare const dialogWidth: (input?: ModalDialogProps["width"]) => string;
|
|
11
|
-
export declare const dialogHeight: (input?: ModalDialogProps["height"]) => string;
|
|
12
|
-
export {};
|