@atlaskit/modal-dialog 15.1.0 → 15.1.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.
Files changed (11) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/internal/components/modal-dialog.compiled.css +2 -1
  3. package/dist/cjs/internal/components/modal-dialog.js +10 -3
  4. package/dist/cjs/internal/components/modal-wrapper.js +1 -1
  5. package/dist/es2019/internal/components/modal-dialog.compiled.css +2 -1
  6. package/dist/es2019/internal/components/modal-dialog.js +10 -3
  7. package/dist/es2019/internal/components/modal-wrapper.js +1 -1
  8. package/dist/esm/internal/components/modal-dialog.compiled.css +2 -1
  9. package/dist/esm/internal/components/modal-dialog.js +10 -3
  10. package/dist/esm/internal/components/modal-wrapper.js +1 -1
  11. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/modal-dialog
2
2
 
3
+ ## 15.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`68077cab1f95d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/68077cab1f95d) -
8
+ Fixed styling related issues behind the new motion uplift
9
+ - Updated dependencies
10
+
3
11
  ## 15.1.0
4
12
 
5
13
  ### Minor Changes
package/dist/cjs/internal/components/modal-dialog.compiled.css CHANGED
@@ -24,4 +24,5 @@
24
24
  ._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
25
25
  ._ra3xnqa1:focus-visible{outline-style:solid}
26
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}}
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)}}
27
+ @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}._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)}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}
28
+ @media (max-width:29.9375rem){._1if81osq{height:100%}}
package/dist/cjs/internal/components/modal-dialog.js CHANGED
@@ -54,7 +54,8 @@ var dialogStyles = {
54
54
  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",
55
55
  borderRadius: "_epkxfajl",
56
56
  borderRadiusT26Shape: "_epkxpb1k",
57
- motion: "_4t3i1osq _c71l1kw7 _p12f1kw7 _1jyk1wug _yakv1kw7 _4lht1kw7",
57
+ motion: "_c71l1kw7 _p12f1kw7 _1e0c1txw _1jyk1jm9 _1if81osq",
58
+ rootMotion: "_yakv1wug _4lht1wug",
58
59
  fullscreen: "_1jyk1osq"
59
60
  };
60
61
  var viewportScrollStyles = null;
@@ -131,7 +132,13 @@ var ModalDialog = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
131
132
  enteringAnimation: "var(--ds-modal-enter, 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100)",
132
133
  exitingAnimation: "var(--ds-modal-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95)",
133
134
  onFinish: onMotionFinish,
134
- xcss: (0, _css.cx)(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen)
135
+ xcss: (0, _css.cx)(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen),
136
+ style: {
137
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
138
+ '--modal-dialog-width': dialogWidth(width),
139
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
140
+ '--modal-dialog-height': dialogHeight(height)
141
+ }
135
142
  }, /*#__PURE__*/React.createElement("section", {
136
143
  "aria-label": label,
137
144
  ref: (0, _mergeRefs.default)([motionRef, ref]),
@@ -148,7 +155,7 @@ var ModalDialog = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
148
155
  tabIndex: -1,
149
156
  "aria-modal": true,
150
157
  "data-ds--level": currentLevel,
151
- 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"])
158
+ className: (0, _runtime.ax)([dialogStyles.root, dialogStyles.rootMotion, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
152
159
  }, children)) : /*#__PURE__*/React.createElement(_fadeIn.default
153
160
  /**
154
161
  * We don't want a 'slide in' for the full screen modals.
package/dist/cjs/internal/components/modal-wrapper.js CHANGED
@@ -113,7 +113,7 @@ var InternalModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props,
113
113
  action: 'closed',
114
114
  componentName: 'modalDialog',
115
115
  packageName: "@atlaskit/modal-dialog",
116
- packageVersion: "15.0.4"
116
+ packageVersion: "0.0.0-development"
117
117
  });
118
118
  var onBlanketClicked = (0, _react.useCallback)(function (e) {
119
119
  if (shouldCloseOnOverlayClick) {
package/dist/es2019/internal/components/modal-dialog.compiled.css CHANGED
@@ -24,4 +24,5 @@
24
24
  ._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
25
25
  ._ra3xnqa1:focus-visible{outline-style:solid}
26
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}}
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)}}
27
+ @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}._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)}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}
28
+ @media (max-width:29.9375rem){._1if81osq{height:100%}}
package/dist/es2019/internal/components/modal-dialog.js CHANGED
@@ -43,7 +43,8 @@ const dialogStyles = {
43
43
  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",
44
44
  borderRadius: "_epkxfajl",
45
45
  borderRadiusT26Shape: "_epkxpb1k",
46
- motion: "_4t3i1osq _c71l1kw7 _p12f1kw7 _1jyk1wug _yakv1kw7 _4lht1kw7",
46
+ motion: "_c71l1kw7 _p12f1kw7 _1e0c1txw _1jyk1jm9 _1if81osq",
47
+ rootMotion: "_yakv1wug _4lht1wug",
47
48
  fullscreen: "_1jyk1osq"
48
49
  };
49
50
  const viewportScrollStyles = null;
@@ -114,7 +115,13 @@ const ModalDialog = /*#__PURE__*/forwardRef((props, ref) => {
114
115
  enteringAnimation: "var(--ds-modal-enter, 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100)",
115
116
  exitingAnimation: "var(--ds-modal-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95)",
116
117
  onFinish: onMotionFinish,
117
- xcss: cx(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen)
118
+ xcss: cx(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen),
119
+ style: {
120
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
121
+ '--modal-dialog-width': dialogWidth(width),
122
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
123
+ '--modal-dialog-height': dialogHeight(height)
124
+ }
118
125
  }, /*#__PURE__*/React.createElement("section", {
119
126
  "aria-label": label,
120
127
  ref: mergeRefs([motionRef, ref]),
@@ -131,7 +138,7 @@ const ModalDialog = /*#__PURE__*/forwardRef((props, ref) => {
131
138
  tabIndex: -1,
132
139
  "aria-modal": true,
133
140
  "data-ds--level": currentLevel,
134
- className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
141
+ className: ax([dialogStyles.root, dialogStyles.rootMotion, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
135
142
  }, children)) : /*#__PURE__*/React.createElement(FadeIn
136
143
  /**
137
144
  * We don't want a 'slide in' for the full screen modals.
package/dist/es2019/internal/components/modal-wrapper.js CHANGED
@@ -99,7 +99,7 @@ const InternalModalWrapper = /*#__PURE__*/forwardRef((props, ref) => {
99
99
  action: 'closed',
100
100
  componentName: 'modalDialog',
101
101
  packageName: "@atlaskit/modal-dialog",
102
- packageVersion: "15.0.4"
102
+ packageVersion: "0.0.0-development"
103
103
  });
104
104
  const onBlanketClicked = useCallback(e => {
105
105
  if (shouldCloseOnOverlayClick) {
package/dist/esm/internal/components/modal-dialog.compiled.css CHANGED
@@ -24,4 +24,5 @@
24
24
  ._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
25
25
  ._ra3xnqa1:focus-visible{outline-style:solid}
26
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}}
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)}}
27
+ @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}._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)}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}
28
+ @media (max-width:29.9375rem){._1if81osq{height:100%}}
package/dist/esm/internal/components/modal-dialog.js CHANGED
@@ -45,7 +45,8 @@ var dialogStyles = {
45
45
  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",
46
46
  borderRadius: "_epkxfajl",
47
47
  borderRadiusT26Shape: "_epkxpb1k",
48
- motion: "_4t3i1osq _c71l1kw7 _p12f1kw7 _1jyk1wug _yakv1kw7 _4lht1kw7",
48
+ motion: "_c71l1kw7 _p12f1kw7 _1e0c1txw _1jyk1jm9 _1if81osq",
49
+ rootMotion: "_yakv1wug _4lht1wug",
49
50
  fullscreen: "_1jyk1osq"
50
51
  };
51
52
  var viewportScrollStyles = null;
@@ -122,7 +123,13 @@ var ModalDialog = /*#__PURE__*/forwardRef(function (props, ref) {
122
123
  enteringAnimation: "var(--ds-modal-enter, 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100)",
123
124
  exitingAnimation: "var(--ds-modal-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95)",
124
125
  onFinish: onMotionFinish,
125
- xcss: cx(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen)
126
+ xcss: cx(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen),
127
+ style: {
128
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
129
+ '--modal-dialog-width': dialogWidth(width),
130
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
131
+ '--modal-dialog-height': dialogHeight(height)
132
+ }
126
133
  }, /*#__PURE__*/React.createElement("section", {
127
134
  "aria-label": label,
128
135
  ref: mergeRefs([motionRef, ref]),
@@ -139,7 +146,7 @@ var ModalDialog = /*#__PURE__*/forwardRef(function (props, ref) {
139
146
  tabIndex: -1,
140
147
  "aria-modal": true,
141
148
  "data-ds--level": currentLevel,
142
- className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
149
+ className: ax([dialogStyles.root, dialogStyles.rootMotion, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
143
150
  }, children)) : /*#__PURE__*/React.createElement(FadeIn
144
151
  /**
145
152
  * We don't want a 'slide in' for the full screen modals.
package/dist/esm/internal/components/modal-wrapper.js CHANGED
@@ -104,7 +104,7 @@ var InternalModalWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
104
104
  action: 'closed',
105
105
  componentName: 'modalDialog',
106
106
  packageName: "@atlaskit/modal-dialog",
107
- packageVersion: "15.0.4"
107
+ packageVersion: "0.0.0-development"
108
108
  });
109
109
  var onBlanketClicked = useCallback(function (e) {
110
110
  if (shouldCloseOnOverlayClick) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/modal-dialog",
3
- "version": "15.1.0",
3
+ "version": "15.1.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/"