@atlaskit/modal-dialog 12.6.10 → 12.7.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.
Files changed (10) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/internal/components/modal-dialog.js +6 -0
  3. package/dist/cjs/modal-wrapper.js +5 -8
  4. package/dist/es2019/internal/components/modal-dialog.js +6 -0
  5. package/dist/es2019/modal-wrapper.js +5 -8
  6. package/dist/esm/internal/components/modal-dialog.js +6 -0
  7. package/dist/esm/modal-wrapper.js +5 -8
  8. package/dist/types/internal/components/modal-dialog.d.ts +4 -2
  9. package/dist/types-ts4.5/internal/components/modal-dialog.d.ts +4 -2
  10. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/modal-dialog
2
2
 
3
+ ## 12.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`f355884a4aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f355884a4aa) - [ux] Support to press escape key and only close the top layer
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
3
13
  ## 12.6.10
4
14
 
5
15
  ### Patch Changes
package/dist/cjs/internal/components/modal-dialog.js CHANGED
@@ -15,6 +15,7 @@ var _reactUid = require("react-uid");
15
15
  var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
16
16
  var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
17
17
  var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
18
+ var _layering = require("@atlaskit/layering");
18
19
  var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
19
20
  var _primitives = require("@atlaskit/primitives");
20
21
  var _colors = require("@atlaskit/theme/colors");
@@ -72,6 +73,7 @@ var ModalDialog = function ModalDialog(props) {
72
73
  width = _props$width === void 0 ? 'medium' : _props$width,
73
74
  _props$shouldScrollIn = props.shouldScrollInViewport,
74
75
  shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
76
+ shouldCloseOnEscapePress = props.shouldCloseOnEscapePress,
75
77
  autoFocus = props.autoFocus,
76
78
  stackIndex = props.stackIndex,
77
79
  onClose = props.onClose,
@@ -100,6 +102,10 @@ var ModalDialog = function ModalDialog(props) {
100
102
  onClose: onClose
101
103
  };
102
104
  }, [testId, titleId, onClose]);
105
+ (0, _layering.useCloseOnEscapePress)({
106
+ onClose: onClose,
107
+ isDisabled: !shouldCloseOnEscapePress
108
+ });
103
109
  return (0, _react2.jsx)(_positioner.default, {
104
110
  stackIndex: stackIndex,
105
111
  shouldScrollInViewport: shouldScrollInViewport,
package/dist/cjs/modal-wrapper.js CHANGED
@@ -14,7 +14,7 @@ var _reactScrolllock = _interopRequireWildcard(require("react-scrolllock"));
14
14
  var _analyticsNext = require("@atlaskit/analytics-next");
15
15
  var _blanket = _interopRequireDefault(require("@atlaskit/blanket"));
16
16
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
17
- var _useCloseOnEscapePress = _interopRequireDefault(require("@atlaskit/ds-lib/use-close-on-escape-press"));
17
+ var _layering = require("@atlaskit/layering");
18
18
  var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
19
19
  var _portal = _interopRequireDefault(require("@atlaskit/portal"));
20
20
  var _constants = require("@atlaskit/theme/constants");
@@ -84,7 +84,7 @@ var ModalWrapper = function ModalWrapper(props) {
84
84
  action: 'closed',
85
85
  componentName: 'modalDialog',
86
86
  packageName: "@atlaskit/modal-dialog",
87
- packageVersion: "12.6.10"
87
+ packageVersion: "12.7.0"
88
88
  });
89
89
  var onBlanketClicked = (0, _react.useCallback)(function (e) {
90
90
  if (shouldCloseOnOverlayClick) {
@@ -92,10 +92,6 @@ var ModalWrapper = function ModalWrapper(props) {
92
92
  }
93
93
  }, [shouldCloseOnOverlayClick, onCloseHandler]);
94
94
  (0, _usePreventProgrammaticScroll.default)();
95
- (0, _useCloseOnEscapePress.default)({
96
- onClose: onCloseHandler,
97
- isDisabled: !shouldCloseOnEscapePress || !isForeground
98
- });
99
95
  var modalDialogWithBlanket = (0, _react2.jsx)(_blanket.default, {
100
96
  isTinted: !isBlanketHidden,
101
97
  onBlanketClicked: onBlanketClicked,
@@ -106,13 +102,14 @@ var ModalWrapper = function ModalWrapper(props) {
106
102
  autoFocus: autoFocus,
107
103
  stackIndex: stackIndex,
108
104
  onClose: onCloseHandler,
105
+ shouldCloseOnEscapePress: shouldCloseOnEscapePress && isForeground,
109
106
  shouldScrollInViewport: shouldScrollInViewport,
110
107
  height: height,
111
108
  width: width,
112
109
  onCloseComplete: onCloseComplete,
113
110
  onOpenComplete: onOpenComplete
114
111
  }, children));
115
- return (0, _react2.jsx)(_portal.default, {
112
+ return (0, _react2.jsx)(_layering.UNSAFE_LAYERING, null, (0, _react2.jsx)(_portal.default, {
116
113
  zIndex: _constants.layers.modal()
117
114
  }, (0, _react2.jsx)(_fadeIn.default, null, function (fadeInProps) {
118
115
  return (0, _react2.jsx)("div", (0, _extends2.default)({}, fadeInProps, {
@@ -124,7 +121,7 @@ var ModalWrapper = function ModalWrapper(props) {
124
121
  returnFocus: true,
125
122
  whiteList: whiteListElements
126
123
  }, (0, _react2.jsx)(_reactScrolllock.default, null), shouldScrollInViewport ? (0, _react2.jsx)(_reactScrolllock.TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket));
127
- }));
124
+ })));
128
125
  };
129
126
  var _default = ModalWrapper;
130
127
  exports.default = _default;
package/dist/es2019/internal/components/modal-dialog.js CHANGED
@@ -6,6 +6,7 @@ import { useUID } from 'react-uid';
6
6
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
7
7
  import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
8
8
  import FocusRing from '@atlaskit/focus-ring';
9
+ import { useCloseOnEscapePress } from '@atlaskit/layering';
9
10
  import FadeIn from '@atlaskit/motion/fade-in';
10
11
  import { media } from '@atlaskit/primitives';
11
12
  import { N0, N30A, N60A } from '@atlaskit/theme/colors';
@@ -72,6 +73,7 @@ const ModalDialog = props => {
72
73
  const {
73
74
  width = 'medium',
74
75
  shouldScrollInViewport = false,
76
+ shouldCloseOnEscapePress,
75
77
  autoFocus,
76
78
  stackIndex,
77
79
  onClose,
@@ -96,6 +98,10 @@ const ModalDialog = props => {
96
98
  titleId,
97
99
  onClose
98
100
  }), [testId, titleId, onClose]);
101
+ useCloseOnEscapePress({
102
+ onClose,
103
+ isDisabled: !shouldCloseOnEscapePress
104
+ });
99
105
  return jsx(Positioner, {
100
106
  stackIndex: stackIndex,
101
107
  shouldScrollInViewport: shouldScrollInViewport,
package/dist/es2019/modal-wrapper.js CHANGED
@@ -8,7 +8,7 @@ import ScrollLock, { TouchScrollable } from 'react-scrolllock';
8
8
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
9
9
  import Blanket from '@atlaskit/blanket';
10
10
  import noop from '@atlaskit/ds-lib/noop';
11
- import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
11
+ import { UNSAFE_LAYERING } from '@atlaskit/layering';
12
12
  import FadeIn from '@atlaskit/motion/fade-in';
13
13
  import Portal from '@atlaskit/portal';
14
14
  import { layers } from '@atlaskit/theme/constants';
@@ -70,7 +70,7 @@ const ModalWrapper = props => {
70
70
  action: 'closed',
71
71
  componentName: 'modalDialog',
72
72
  packageName: "@atlaskit/modal-dialog",
73
- packageVersion: "12.6.10"
73
+ packageVersion: "12.7.0"
74
74
  });
75
75
  const onBlanketClicked = useCallback(e => {
76
76
  if (shouldCloseOnOverlayClick) {
@@ -78,10 +78,6 @@ const ModalWrapper = props => {
78
78
  }
79
79
  }, [shouldCloseOnOverlayClick, onCloseHandler]);
80
80
  usePreventProgrammaticScroll();
81
- useCloseOnEscapePress({
82
- onClose: onCloseHandler,
83
- isDisabled: !shouldCloseOnEscapePress || !isForeground
84
- });
85
81
  const modalDialogWithBlanket = jsx(Blanket, {
86
82
  isTinted: !isBlanketHidden,
87
83
  onBlanketClicked: onBlanketClicked,
@@ -92,13 +88,14 @@ const ModalWrapper = props => {
92
88
  autoFocus: autoFocus,
93
89
  stackIndex: stackIndex,
94
90
  onClose: onCloseHandler,
91
+ shouldCloseOnEscapePress: shouldCloseOnEscapePress && isForeground,
95
92
  shouldScrollInViewport: shouldScrollInViewport,
96
93
  height: height,
97
94
  width: width,
98
95
  onCloseComplete: onCloseComplete,
99
96
  onOpenComplete: onOpenComplete
100
97
  }, children));
101
- return jsx(Portal, {
98
+ return jsx(UNSAFE_LAYERING, null, jsx(Portal, {
102
99
  zIndex: layers.modal()
103
100
  }, jsx(FadeIn, null, fadeInProps => jsx("div", _extends({}, fadeInProps, {
104
101
  css: fillScreenStyles,
@@ -108,6 +105,6 @@ const ModalWrapper = props => {
108
105
  disabled: !isForeground,
109
106
  returnFocus: true,
110
107
  whiteList: whiteListElements
111
- }, jsx(ScrollLock, null), shouldScrollInViewport ? jsx(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket))));
108
+ }, jsx(ScrollLock, null), shouldScrollInViewport ? jsx(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket)))));
112
109
  };
113
110
  export default ModalWrapper;
package/dist/esm/internal/components/modal-dialog.js CHANGED
@@ -10,6 +10,7 @@ import { useUID } from 'react-uid';
10
10
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
11
11
  import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
12
12
  import FocusRing from '@atlaskit/focus-ring';
13
+ import { useCloseOnEscapePress } from '@atlaskit/layering';
13
14
  import FadeIn from '@atlaskit/motion/fade-in';
14
15
  import { media } from '@atlaskit/primitives';
15
16
  import { N0, N30A, N60A } from '@atlaskit/theme/colors';
@@ -65,6 +66,7 @@ var ModalDialog = function ModalDialog(props) {
65
66
  width = _props$width === void 0 ? 'medium' : _props$width,
66
67
  _props$shouldScrollIn = props.shouldScrollInViewport,
67
68
  shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
69
+ shouldCloseOnEscapePress = props.shouldCloseOnEscapePress,
68
70
  autoFocus = props.autoFocus,
69
71
  stackIndex = props.stackIndex,
70
72
  onClose = props.onClose,
@@ -93,6 +95,10 @@ var ModalDialog = function ModalDialog(props) {
93
95
  onClose: onClose
94
96
  };
95
97
  }, [testId, titleId, onClose]);
98
+ useCloseOnEscapePress({
99
+ onClose: onClose,
100
+ isDisabled: !shouldCloseOnEscapePress
101
+ });
96
102
  return jsx(Positioner, {
97
103
  stackIndex: stackIndex,
98
104
  shouldScrollInViewport: shouldScrollInViewport,
package/dist/esm/modal-wrapper.js CHANGED
@@ -8,7 +8,7 @@ import ScrollLock, { TouchScrollable } from 'react-scrolllock';
8
8
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
9
9
  import Blanket from '@atlaskit/blanket';
10
10
  import noop from '@atlaskit/ds-lib/noop';
11
- import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
11
+ import { UNSAFE_LAYERING } from '@atlaskit/layering';
12
12
  import FadeIn from '@atlaskit/motion/fade-in';
13
13
  import Portal from '@atlaskit/portal';
14
14
  import { layers } from '@atlaskit/theme/constants';
@@ -74,7 +74,7 @@ var ModalWrapper = function ModalWrapper(props) {
74
74
  action: 'closed',
75
75
  componentName: 'modalDialog',
76
76
  packageName: "@atlaskit/modal-dialog",
77
- packageVersion: "12.6.10"
77
+ packageVersion: "12.7.0"
78
78
  });
79
79
  var onBlanketClicked = useCallback(function (e) {
80
80
  if (shouldCloseOnOverlayClick) {
@@ -82,10 +82,6 @@ var ModalWrapper = function ModalWrapper(props) {
82
82
  }
83
83
  }, [shouldCloseOnOverlayClick, onCloseHandler]);
84
84
  usePreventProgrammaticScroll();
85
- useCloseOnEscapePress({
86
- onClose: onCloseHandler,
87
- isDisabled: !shouldCloseOnEscapePress || !isForeground
88
- });
89
85
  var modalDialogWithBlanket = jsx(Blanket, {
90
86
  isTinted: !isBlanketHidden,
91
87
  onBlanketClicked: onBlanketClicked,
@@ -96,13 +92,14 @@ var ModalWrapper = function ModalWrapper(props) {
96
92
  autoFocus: autoFocus,
97
93
  stackIndex: stackIndex,
98
94
  onClose: onCloseHandler,
95
+ shouldCloseOnEscapePress: shouldCloseOnEscapePress && isForeground,
99
96
  shouldScrollInViewport: shouldScrollInViewport,
100
97
  height: height,
101
98
  width: width,
102
99
  onCloseComplete: onCloseComplete,
103
100
  onOpenComplete: onOpenComplete
104
101
  }, children));
105
- return jsx(Portal, {
102
+ return jsx(UNSAFE_LAYERING, null, jsx(Portal, {
106
103
  zIndex: layers.modal()
107
104
  }, jsx(FadeIn, null, function (fadeInProps) {
108
105
  return jsx("div", _extends({}, fadeInProps, {
@@ -114,6 +111,6 @@ var ModalWrapper = function ModalWrapper(props) {
114
111
  returnFocus: true,
115
112
  whiteList: whiteListElements
116
113
  }, jsx(ScrollLock, null), shouldScrollInViewport ? jsx(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket));
117
- }));
114
+ })));
118
115
  };
119
116
  export default ModalWrapper;
package/dist/types/internal/components/modal-dialog.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  import { jsx } from '@emotion/react';
2
- import type { ModalDialogProps } from '../../types';
3
- declare const ModalDialog: (props: ModalDialogProps) => jsx.JSX.Element;
2
+ import type { KeyboardOrMouseEvent, ModalDialogProps } from '../../types';
3
+ declare const ModalDialog: (props: ModalDialogProps & {
4
+ onClose: (value: KeyboardOrMouseEvent) => void;
5
+ }) => jsx.JSX.Element;
4
6
  export default ModalDialog;
package/dist/types-ts4.5/internal/components/modal-dialog.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  import { jsx } from '@emotion/react';
2
- import type { ModalDialogProps } from '../../types';
3
- declare const ModalDialog: (props: ModalDialogProps) => jsx.JSX.Element;
2
+ import type { KeyboardOrMouseEvent, ModalDialogProps } from '../../types';
3
+ declare const ModalDialog: (props: ModalDialogProps & {
4
+ onClose: (value: KeyboardOrMouseEvent) => void;
5
+ }) => jsx.JSX.Element;
4
6
  export default ModalDialog;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/modal-dialog",
3
- "version": "12.6.10",
3
+ "version": "12.7.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/"
@@ -32,11 +32,12 @@
32
32
  "@atlaskit/ds-lib": "^2.2.0",
33
33
  "@atlaskit/focus-ring": "^1.3.0",
34
34
  "@atlaskit/icon": "^21.12.0",
35
+ "@atlaskit/layering": "^0.2.0",
35
36
  "@atlaskit/motion": "^1.4.0",
36
37
  "@atlaskit/portal": "^4.3.0",
37
- "@atlaskit/primitives": "^1.4.0",
38
+ "@atlaskit/primitives": "^1.6.0",
38
39
  "@atlaskit/theme": "^12.6.0",
39
- "@atlaskit/tokens": "^1.21.0",
40
+ "@atlaskit/tokens": "^1.25.0",
40
41
  "@babel/runtime": "^7.0.0",
41
42
  "@emotion/react": "^11.7.1",
42
43
  "bind-event-listener": "^2.1.1",