@atlaskit/modal-dialog 14.13.1 → 14.14.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 (11) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/internal/components/modal-dialog.compiled.css +3 -1
  3. package/dist/cjs/internal/components/modal-dialog.js +28 -2
  4. package/dist/cjs/internal/components/modal-wrapper.js +15 -3
  5. package/dist/es2019/internal/components/modal-dialog.compiled.css +3 -1
  6. package/dist/es2019/internal/components/modal-dialog.js +28 -2
  7. package/dist/es2019/internal/components/modal-wrapper.js +15 -3
  8. package/dist/esm/internal/components/modal-dialog.compiled.css +3 -1
  9. package/dist/esm/internal/components/modal-dialog.js +28 -2
  10. package/dist/esm/internal/components/modal-wrapper.js +15 -3
  11. package/package.json +12 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/modal-dialog
2
2
 
3
+ ## 14.14.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`6d543e4f58915`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d543e4f58915) -
8
+ [ux] Updated motion on opening and closing of Modal Dialog
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
3
14
  ## 14.13.1
4
15
 
5
16
  ### Patch Changes
package/dist/cjs/internal/components/modal-dialog.compiled.css CHANGED
@@ -11,15 +11,17 @@
11
11
  ._2lx21bp4{flex-direction:column}
12
12
  ._4t3i1osq{height:100%}
13
13
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
14
+ ._c71l1kw7{max-height:inherit}
14
15
  ._c71l1kxc{max-height:100vh}
15
16
  ._c71lglyw{max-height:none}
16
17
  ._i0dl1wug{flex-basis:auto}
17
18
  ._lcxv1wug{pointer-events:auto}
18
19
  ._m01u1kw7>form:only-child{max-height:inherit}
20
+ ._p12f1kw7{max-width:inherit}
19
21
  ._p12fauwl{max-width:100vw}
20
22
  ._syazi7uo{color:var(--ds-text,#292a2e)}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
21
23
  ._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
22
24
  ._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
23
25
  ._ra3xnqa1:focus-visible{outline-style:solid}
24
26
  @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
25
- @media (min-width:30rem){._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._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)}}
27
+ @media (min-width:30rem){._1jyk1osq{height:100%}._1jyk1wug{height:auto}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._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)}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}}
package/dist/cjs/internal/components/modal-dialog.js CHANGED
@@ -14,10 +14,12 @@ var _runtime = require("@compiled/react/runtime");
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
15
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
16
16
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
17
+ var _css = require("@atlaskit/css");
17
18
  var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
18
19
  var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
19
20
  var _useId = require("@atlaskit/ds-lib/use-id");
20
21
  var _layering = require("@atlaskit/layering");
22
+ var _motion = require("@atlaskit/motion");
21
23
  var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
22
24
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
23
25
  var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
@@ -33,7 +35,9 @@ var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
33
35
  var dialogStyles = {
34
36
  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",
35
37
  borderRadius: "_epkxfajl",
36
- borderRadiusT26Shape: "_epkxpb1k"
38
+ borderRadiusT26Shape: "_epkxpb1k",
39
+ motion: "_4t3i1osq _c71l1kw7 _p12f1kw7 _1jyk1wug _yakv1kw7 _4lht1kw7",
40
+ fullscreen: "_1jyk1osq"
37
41
  };
38
42
  var viewportScrollStyles = null;
39
43
  var bodyScrollStyles = null;
@@ -107,7 +111,29 @@ var ModalDialog = function ModalDialog(props) {
107
111
  value: modalDialogContext
108
112
  }, /*#__PURE__*/React.createElement(_context.ScrollContext.Provider, {
109
113
  value: shouldScrollInViewport
110
- }, /*#__PURE__*/React.createElement(_fadeIn.default
114
+ }, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(_motion.Motion, {
115
+ enteringAnimation: "var(--ds-modal-enter, 200ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn)",
116
+ exitingAnimation: "var(--ds-modal-exit, 200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut)",
117
+ onFinish: onMotionFinish,
118
+ xcss: (0, _css.cx)(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen)
119
+ }, /*#__PURE__*/React.createElement("section", {
120
+ "aria-label": label,
121
+ ref: motionRef,
122
+ style: {
123
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
124
+ '--modal-dialog-width': (0, _utils.dialogWidth)(width),
125
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
126
+ '--modal-dialog-height': (0, _utils.dialogHeight)(height)
127
+ },
128
+ role: "dialog",
129
+ "aria-labelledby": label ? undefined : titleId,
130
+ "data-testid": defaultTestId,
131
+ "data-modal-stack": stackIndex,
132
+ tabIndex: -1,
133
+ "aria-modal": true,
134
+ "data-ds--level": currentLevel,
135
+ 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"])
136
+ }, children)) : /*#__PURE__*/React.createElement(_fadeIn.default
111
137
  /**
112
138
  * We don't want a 'slide in' for the full screen modals.
113
139
  */, {
package/dist/cjs/internal/components/modal-wrapper.js CHANGED
@@ -19,6 +19,7 @@ var _blanket = _interopRequireDefault(require("@atlaskit/blanket"));
19
19
  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
+ var _motion = require("@atlaskit/motion");
22
23
  var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
23
24
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
24
25
  var _portal = _interopRequireDefault(require("@atlaskit/portal"));
@@ -91,7 +92,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
91
92
  action: 'closed',
92
93
  componentName: 'modalDialog',
93
94
  packageName: "@atlaskit/modal-dialog",
94
- packageVersion: "14.13.0"
95
+ packageVersion: "0.0.0-development"
95
96
  });
96
97
  var onBlanketClicked = (0, _react.useCallback)(function (e) {
97
98
  if (shouldCloseOnOverlayClick) {
@@ -133,7 +134,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
133
134
  isFullScreen: isFullScreen
134
135
  }, children));
135
136
  var returnFocus = true;
136
- var onDeactivation;
137
+ var onDeactivation = _noop.default;
137
138
  if ('boolean' === typeof shouldReturnFocus) {
138
139
  returnFocus = shouldReturnFocus;
139
140
  } else {
@@ -148,7 +149,18 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
148
149
  isDisabled: false
149
150
  }, /*#__PURE__*/React.createElement(_portal.default, {
150
151
  zIndex: _constants.layers.modal()
151
- }, /*#__PURE__*/React.createElement(_fadeIn.default, null, function (fadeInProps) {
152
+ }, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(_motion.Motion, {
153
+ enteringAnimation: "var(--ds-content-enter-medium, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn)",
154
+ exitingAnimation: "var(--ds-content-exit-long, 200ms cubic-bezier(0.4, 0, 0, 1) FadeOut)"
155
+ }, /*#__PURE__*/React.createElement("div", {
156
+ "aria-hidden": !isForeground,
157
+ className: (0, _runtime.ax)(["_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0"])
158
+ }, /*#__PURE__*/React.createElement(_reactFocusLock.default, {
159
+ autoFocus: autoFocusLock,
160
+ returnFocus: returnFocus,
161
+ onDeactivation: onDeactivation,
162
+ whiteList: allowListCallback
163
+ }, /*#__PURE__*/React.createElement(_reactScrolllock.default, null), shouldScrollInViewport ? /*#__PURE__*/React.createElement(_reactScrolllock.TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket))) : /*#__PURE__*/React.createElement(_fadeIn.default, null, function (fadeInProps) {
152
164
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, fadeInProps, {
153
165
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
154
166
  className: (0, _runtime.ax)(["_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0", fadeInProps.className]),
package/dist/es2019/internal/components/modal-dialog.compiled.css CHANGED
@@ -11,15 +11,17 @@
11
11
  ._2lx21bp4{flex-direction:column}
12
12
  ._4t3i1osq{height:100%}
13
13
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
14
+ ._c71l1kw7{max-height:inherit}
14
15
  ._c71l1kxc{max-height:100vh}
15
16
  ._c71lglyw{max-height:none}
16
17
  ._i0dl1wug{flex-basis:auto}
17
18
  ._lcxv1wug{pointer-events:auto}
18
19
  ._m01u1kw7>form:only-child{max-height:inherit}
20
+ ._p12f1kw7{max-width:inherit}
19
21
  ._p12fauwl{max-width:100vw}
20
22
  ._syazi7uo{color:var(--ds-text,#292a2e)}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
21
23
  ._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
22
24
  ._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
23
25
  ._ra3xnqa1:focus-visible{outline-style:solid}
24
26
  @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
25
- @media (min-width:30rem){._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._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)}}
27
+ @media (min-width:30rem){._1jyk1osq{height:100%}._1jyk1wug{height:auto}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._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)}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}}
package/dist/es2019/internal/components/modal-dialog.js CHANGED
@@ -4,10 +4,12 @@ import "./modal-dialog.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { useEffect, useMemo } from 'react';
7
+ import { cx } from '@atlaskit/css';
7
8
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
8
9
  import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
9
10
  import { useId } from '@atlaskit/ds-lib/use-id';
10
11
  import { useCloseOnEscapePress, useLayering } from '@atlaskit/layering';
12
+ import { Motion } from '@atlaskit/motion';
11
13
  import FadeIn from '@atlaskit/motion/fade-in';
12
14
  import { fg } from '@atlaskit/platform-feature-flags';
13
15
  import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -22,7 +24,9 @@ const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
22
24
  const dialogStyles = {
23
25
  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",
24
26
  borderRadius: "_epkxfajl",
25
- borderRadiusT26Shape: "_epkxpb1k"
27
+ borderRadiusT26Shape: "_epkxpb1k",
28
+ motion: "_4t3i1osq _c71l1kw7 _p12f1kw7 _1jyk1wug _yakv1kw7 _4lht1kw7",
29
+ fullscreen: "_1jyk1osq"
26
30
  };
27
31
  const viewportScrollStyles = null;
28
32
  const bodyScrollStyles = null;
@@ -91,7 +95,29 @@ const ModalDialog = props => {
91
95
  value: modalDialogContext
92
96
  }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
93
97
  value: shouldScrollInViewport
94
- }, /*#__PURE__*/React.createElement(FadeIn
98
+ }, fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Motion, {
99
+ enteringAnimation: "var(--ds-modal-enter, 200ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn)",
100
+ exitingAnimation: "var(--ds-modal-exit, 200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut)",
101
+ onFinish: onMotionFinish,
102
+ xcss: cx(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen)
103
+ }, /*#__PURE__*/React.createElement("section", {
104
+ "aria-label": label,
105
+ ref: motionRef,
106
+ style: {
107
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
108
+ '--modal-dialog-width': dialogWidth(width),
109
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
110
+ '--modal-dialog-height': dialogHeight(height)
111
+ },
112
+ role: "dialog",
113
+ "aria-labelledby": label ? undefined : titleId,
114
+ "data-testid": defaultTestId,
115
+ "data-modal-stack": stackIndex,
116
+ tabIndex: -1,
117
+ "aria-modal": true,
118
+ "data-ds--level": currentLevel,
119
+ className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
120
+ }, children)) : /*#__PURE__*/React.createElement(FadeIn
95
121
  /**
96
122
  * We don't want a 'slide in' for the full screen modals.
97
123
  */, {
package/dist/es2019/internal/components/modal-wrapper.js CHANGED
@@ -11,6 +11,7 @@ import Blanket from '@atlaskit/blanket';
11
11
  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
+ import { Motion } from '@atlaskit/motion';
14
15
  import FadeIn from '@atlaskit/motion/fade-in';
15
16
  import { fg } from '@atlaskit/platform-feature-flags';
16
17
  import Portal from '@atlaskit/portal';
@@ -78,7 +79,7 @@ const InternalModalWrapper = props => {
78
79
  action: 'closed',
79
80
  componentName: 'modalDialog',
80
81
  packageName: "@atlaskit/modal-dialog",
81
- packageVersion: "14.13.0"
82
+ packageVersion: "0.0.0-development"
82
83
  });
83
84
  const onBlanketClicked = useCallback(e => {
84
85
  if (shouldCloseOnOverlayClick) {
@@ -118,7 +119,7 @@ const InternalModalWrapper = props => {
118
119
  isFullScreen: isFullScreen
119
120
  }, children));
120
121
  let returnFocus = true;
121
- let onDeactivation;
122
+ let onDeactivation = noop;
122
123
  if ('boolean' === typeof shouldReturnFocus) {
123
124
  returnFocus = shouldReturnFocus;
124
125
  } else {
@@ -133,7 +134,18 @@ const InternalModalWrapper = props => {
133
134
  isDisabled: false
134
135
  }, /*#__PURE__*/React.createElement(Portal, {
135
136
  zIndex: layers.modal()
136
- }, /*#__PURE__*/React.createElement(FadeIn, null, fadeInProps => /*#__PURE__*/React.createElement("div", _extends({}, fadeInProps, {
137
+ }, fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Motion, {
138
+ enteringAnimation: "var(--ds-content-enter-medium, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn)",
139
+ exitingAnimation: "var(--ds-content-exit-long, 200ms cubic-bezier(0.4, 0, 0, 1) FadeOut)"
140
+ }, /*#__PURE__*/React.createElement("div", {
141
+ "aria-hidden": !isForeground,
142
+ className: ax(["_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0"])
143
+ }, /*#__PURE__*/React.createElement(FocusLock, {
144
+ autoFocus: autoFocusLock,
145
+ returnFocus: returnFocus,
146
+ onDeactivation: onDeactivation,
147
+ whiteList: allowListCallback
148
+ }, /*#__PURE__*/React.createElement(ScrollLock, null), shouldScrollInViewport ? /*#__PURE__*/React.createElement(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket))) : /*#__PURE__*/React.createElement(FadeIn, null, fadeInProps => /*#__PURE__*/React.createElement("div", _extends({}, fadeInProps, {
137
149
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
138
150
  className: ax(["_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0", fadeInProps.className]),
139
151
  "aria-hidden": !isForeground
package/dist/esm/internal/components/modal-dialog.compiled.css CHANGED
@@ -11,15 +11,17 @@
11
11
  ._2lx21bp4{flex-direction:column}
12
12
  ._4t3i1osq{height:100%}
13
13
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
14
+ ._c71l1kw7{max-height:inherit}
14
15
  ._c71l1kxc{max-height:100vh}
15
16
  ._c71lglyw{max-height:none}
16
17
  ._i0dl1wug{flex-basis:auto}
17
18
  ._lcxv1wug{pointer-events:auto}
18
19
  ._m01u1kw7>form:only-child{max-height:inherit}
20
+ ._p12f1kw7{max-width:inherit}
19
21
  ._p12fauwl{max-width:100vw}
20
22
  ._syazi7uo{color:var(--ds-text,#292a2e)}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
21
23
  ._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
22
24
  ._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
23
25
  ._ra3xnqa1:focus-visible{outline-style:solid}
24
26
  @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
25
- @media (min-width:30rem){._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._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)}}
27
+ @media (min-width:30rem){._1jyk1osq{height:100%}._1jyk1wug{height:auto}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._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)}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}}
package/dist/esm/internal/components/modal-dialog.js CHANGED
@@ -6,10 +6,12 @@ import "./modal-dialog.compiled.css";
6
6
  import * as React from 'react';
7
7
  import { ax, ix } from "@compiled/react/runtime";
8
8
  import { useEffect, useMemo } from 'react';
9
+ import { cx } from '@atlaskit/css';
9
10
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
10
11
  import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
11
12
  import { useId } from '@atlaskit/ds-lib/use-id';
12
13
  import { useCloseOnEscapePress, useLayering } from '@atlaskit/layering';
14
+ import { Motion } from '@atlaskit/motion';
13
15
  import FadeIn from '@atlaskit/motion/fade-in';
14
16
  import { fg } from '@atlaskit/platform-feature-flags';
15
17
  import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -24,7 +26,9 @@ var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
24
26
  var dialogStyles = {
25
27
  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",
26
28
  borderRadius: "_epkxfajl",
27
- borderRadiusT26Shape: "_epkxpb1k"
29
+ borderRadiusT26Shape: "_epkxpb1k",
30
+ motion: "_4t3i1osq _c71l1kw7 _p12f1kw7 _1jyk1wug _yakv1kw7 _4lht1kw7",
31
+ fullscreen: "_1jyk1osq"
28
32
  };
29
33
  var viewportScrollStyles = null;
30
34
  var bodyScrollStyles = null;
@@ -98,7 +102,29 @@ var ModalDialog = function ModalDialog(props) {
98
102
  value: modalDialogContext
99
103
  }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
100
104
  value: shouldScrollInViewport
101
- }, /*#__PURE__*/React.createElement(FadeIn
105
+ }, fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Motion, {
106
+ enteringAnimation: "var(--ds-modal-enter, 200ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn)",
107
+ exitingAnimation: "var(--ds-modal-exit, 200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut)",
108
+ onFinish: onMotionFinish,
109
+ xcss: cx(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen)
110
+ }, /*#__PURE__*/React.createElement("section", {
111
+ "aria-label": label,
112
+ ref: motionRef,
113
+ style: {
114
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
115
+ '--modal-dialog-width': dialogWidth(width),
116
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
117
+ '--modal-dialog-height': dialogHeight(height)
118
+ },
119
+ role: "dialog",
120
+ "aria-labelledby": label ? undefined : titleId,
121
+ "data-testid": defaultTestId,
122
+ "data-modal-stack": stackIndex,
123
+ tabIndex: -1,
124
+ "aria-modal": true,
125
+ "data-ds--level": currentLevel,
126
+ className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
127
+ }, children)) : /*#__PURE__*/React.createElement(FadeIn
102
128
  /**
103
129
  * We don't want a 'slide in' for the full screen modals.
104
130
  */, {
package/dist/esm/internal/components/modal-wrapper.js CHANGED
@@ -11,6 +11,7 @@ import Blanket from '@atlaskit/blanket';
11
11
  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
+ import { Motion } from '@atlaskit/motion';
14
15
  import FadeIn from '@atlaskit/motion/fade-in';
15
16
  import { fg } from '@atlaskit/platform-feature-flags';
16
17
  import Portal from '@atlaskit/portal';
@@ -82,7 +83,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
82
83
  action: 'closed',
83
84
  componentName: 'modalDialog',
84
85
  packageName: "@atlaskit/modal-dialog",
85
- packageVersion: "14.13.0"
86
+ packageVersion: "0.0.0-development"
86
87
  });
87
88
  var onBlanketClicked = useCallback(function (e) {
88
89
  if (shouldCloseOnOverlayClick) {
@@ -124,7 +125,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
124
125
  isFullScreen: isFullScreen
125
126
  }, children));
126
127
  var returnFocus = true;
127
- var onDeactivation;
128
+ var onDeactivation = noop;
128
129
  if ('boolean' === typeof shouldReturnFocus) {
129
130
  returnFocus = shouldReturnFocus;
130
131
  } else {
@@ -139,7 +140,18 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
139
140
  isDisabled: false
140
141
  }, /*#__PURE__*/React.createElement(Portal, {
141
142
  zIndex: layers.modal()
142
- }, /*#__PURE__*/React.createElement(FadeIn, null, function (fadeInProps) {
143
+ }, fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Motion, {
144
+ enteringAnimation: "var(--ds-content-enter-medium, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn)",
145
+ exitingAnimation: "var(--ds-content-exit-long, 200ms cubic-bezier(0.4, 0, 0, 1) FadeOut)"
146
+ }, /*#__PURE__*/React.createElement("div", {
147
+ "aria-hidden": !isForeground,
148
+ className: ax(["_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0"])
149
+ }, /*#__PURE__*/React.createElement(FocusLock, {
150
+ autoFocus: autoFocusLock,
151
+ returnFocus: returnFocus,
152
+ onDeactivation: onDeactivation,
153
+ whiteList: allowListCallback
154
+ }, /*#__PURE__*/React.createElement(ScrollLock, null), shouldScrollInViewport ? /*#__PURE__*/React.createElement(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket))) : /*#__PURE__*/React.createElement(FadeIn, null, function (fadeInProps) {
143
155
  return /*#__PURE__*/React.createElement("div", _extends({}, fadeInProps, {
144
156
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
145
157
  className: ax(["_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0", fadeInProps.className]),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/modal-dialog",
3
- "version": "14.13.1",
3
+ "version": "14.14.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/"
@@ -34,9 +34,9 @@
34
34
  "@atlaskit/ds-lib": "^6.0.0",
35
35
  "@atlaskit/icon": "^33.1.0",
36
36
  "@atlaskit/layering": "^3.6.0",
37
- "@atlaskit/motion": "^5.4.0",
37
+ "@atlaskit/motion": "^5.5.0",
38
38
  "@atlaskit/platform-feature-flags": "^1.1.0",
39
- "@atlaskit/portal": "^5.2.0",
39
+ "@atlaskit/portal": "^5.3.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",
@@ -55,8 +55,8 @@
55
55
  "@af/accessibility-testing": "workspace:^",
56
56
  "@af/integration-testing": "workspace:^",
57
57
  "@af/visual-regression": "workspace:^",
58
- "@atlaskit/avatar": "^25.10.0",
59
- "@atlaskit/avatar-group": "^12.4.0",
58
+ "@atlaskit/avatar": "^25.11.0",
59
+ "@atlaskit/avatar-group": "^12.5.0",
60
60
  "@atlaskit/banner": "^14.0.0",
61
61
  "@atlaskit/breadcrumbs": "^16.0.0",
62
62
  "@atlaskit/checkbox": "^17.3.0",
@@ -68,17 +68,17 @@
68
68
  "@atlaskit/form": "^15.5.0",
69
69
  "@atlaskit/heading": "^5.3.0",
70
70
  "@atlaskit/link": "^3.3.0",
71
- "@atlaskit/popup": "^4.14.0",
71
+ "@atlaskit/popup": "^4.15.0",
72
72
  "@atlaskit/radio": "^8.4.0",
73
73
  "@atlaskit/section-message": "^8.12.0",
74
- "@atlaskit/select": "^21.8.0",
75
- "@atlaskit/spotlight": "^0.10.0",
74
+ "@atlaskit/select": "^21.9.0",
75
+ "@atlaskit/spotlight": "^0.11.0",
76
76
  "@atlaskit/textfield": "^8.2.0",
77
77
  "@atlaskit/tooltip": "^21.0.0",
78
78
  "@atlassian/feature-flags-test-utils": "^1.0.0",
79
79
  "@atlassian/ssr-tests": "workspace:^",
80
80
  "@atlassian/structured-docs-types": "workspace:^",
81
- "@atlassian/testing-library": "^0.4.0",
81
+ "@atlassian/testing-library": "^0.5.0",
82
82
  "@testing-library/dom": "^10.1.0",
83
83
  "@testing-library/react": "^16.3.0",
84
84
  "@testing-library/user-event": "^14.4.3",
@@ -132,6 +132,9 @@
132
132
  },
133
133
  "platform_dst_autofocus-never-false-2": {
134
134
  "type": "boolean"
135
+ },
136
+ "platform-dst-motion-uplift": {
137
+ "type": "boolean"
135
138
  }
136
139
  },
137
140
  "homepage": "https://atlassian.design/components/modal-dialog/"