@atlaskit/modal-dialog - npm Package Compare versions

Comparing version 12.6.3 to 12.6.4

dist/cjs/internal/components/modal-dialog.js

@@ -11,2 +11,3 @@ "use strict";
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
@@ -19,2 +20,3 @@ var _react2 = require("@emotion/react");
 var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
@@ -26,5 +28,5 @@ var _constants = require("../constants");
 var _positioner = _interopRequireDefault(require("./positioner"));
+var _css;
 /** @jsx jsx */
-
-var dialogStyles = (0, _react2.css)({
+var dialogStyles = (0, _react2.css)((_css = {
   display: 'flex',
@@ -41,26 +43,19 @@ width: '100%',
   color: _constants.textColor,
-  pointerEvents: 'auto',
-  '@media (min-width: 480px)': {
-    width: 'var(--modal-dialog-width)',
-    maxWidth: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginRight: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginLeft: 'inherit',
-    borderRadius: _constants.borderRadius,
-    boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A), ")")
-  },
+  pointerEvents: 'auto'
+}, (0, _defineProperty2.default)(_css, _primitives.media.above.xs, {
+  width: 'var(--modal-dialog-width)',
+  maxWidth: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  marginRight: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  marginLeft: 'inherit',
+  borderRadius: _constants.borderRadius,
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A), ")")
+}), (0, _defineProperty2.default)(_css, '& > form:only-child', {
+  display: 'inherit',
+  maxHeight: 'inherit',
+  flexDirection: 'inherit'
+}), _css));
+var viewportScrollStyles = (0, _react2.css)((0, _defineProperty2.default)({
   /**
-   * This is to support scrolling if the modal's children are wrapped in
-   * a form.
-   */
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '& > form:only-child': {
-    display: 'inherit',
-    maxHeight: 'inherit',
-    flexDirection: 'inherit'
-  }
-});
-var viewportScrollStyles = (0, _react2.css)({
-  /**
    * This ensures that the element fills the viewport on mobile
@@ -71,13 +66,10 @@ * while also allowing it to overflow if its height is larger than
   minHeight: '100vh',
-  maxHeight: 'none',
-  '@media (min-width: 480px)': {
-    minHeight: 'var(--modal-dialog-height)'
-  }
-});
-var bodyScrollStyles = (0, _react2.css)({
-  '@media (min-width: 480px)': {
-    height: 'var(--modal-dialog-height)',
-    maxHeight: 'inherit'
-  }
-});
+  maxHeight: 'none'
+}, _primitives.media.above.xs, {
+  minHeight: 'var(--modal-dialog-height)'
+}));
+var bodyScrollStyles = (0, _react2.css)((0, _defineProperty2.default)({}, _primitives.media.above.xs, {
+  height: 'var(--modal-dialog-height)',
+  maxHeight: 'inherit'
+}));
 var ModalDialog = function ModalDialog(props) {
@@ -84,0 +76,0 @@ var _props$width = props.width,

dist/cjs/internal/components/positioner.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -7,5 +8,7 @@ value: true
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _curves = require("@atlaskit/motion/curves");
 var _durations = require("@atlaskit/motion/durations");
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("@atlaskit/theme/constants");
@@ -31,23 +34,20 @@ var _constants2 = require("../constants");
 });
-var viewportScrollStyles = (0, _react.css)({
+var viewportScrollStyles = (0, _react.css)((0, _defineProperty2.default)({
   height: 'auto',
-  position: 'relative',
-  '@media (min-width: 480px)': {
-    margin: "".concat(_constants2.gutter, "px auto"),
-    pointerEvents: 'none'
-  }
-});
-var bodyScrollStyles = (0, _react.css)({
-  '@media (min-width: 480px)': {
-    maxWidth: maxWidthDimensions,
-    maxHeight: maxHeightDimensions,
-    marginRight: 'auto',
-    marginLeft: 'auto',
-    position: 'absolute',
-    top: "".concat(_constants2.gutter, "px"),
-    right: 0,
-    left: 0,
-    pointerEvents: 'none'
-  }
-});
+  position: 'relative'
+}, _primitives.media.above.xs, {
+  margin: "".concat(_constants2.gutter, "px auto"),
+  pointerEvents: 'none'
+}));
+var bodyScrollStyles = (0, _react.css)((0, _defineProperty2.default)({}, _primitives.media.above.xs, {
+  maxWidth: maxWidthDimensions,
+  maxHeight: maxHeightDimensions,
+  marginRight: 'auto',
+  marginLeft: 'auto',
+  position: 'absolute',
+  top: "".concat(_constants2.gutter, "px"),
+  right: 0,
+  left: 0,
+  pointerEvents: 'none'
+}));
 var stackTransitionStyles = (0, _react.css)({
@@ -54,0 +54,0 @@ transitionDuration: "".concat(_durations.mediumDurationMs, "ms"),

dist/cjs/internal/components/scroll-container.js

@@ -10,2 +10,3 @@ "use strict";
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
@@ -20,2 +21,3 @@ var _react2 = require("@emotion/react");
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("../constants");
@@ -26,3 +28,3 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-var baseStyles = (0, _react2.css)({
+var baseStyles = (0, _react2.css)((0, _defineProperty2.default)({
   display: 'inherit',
@@ -34,8 +36,7 @@ margin: "var(--ds-space-0, 0px)",
   overflowX: 'hidden',
-  overflowY: 'auto',
-  '@media (min-width: 480px)': {
-    height: 'unset',
-    overflowY: 'auto'
-  }
-});
+  overflowY: 'auto'
+}, _primitives.media.above.xs, {
+  height: 'unset',
+  overflowY: 'auto'
+}));
 var topKeylineStyles = (0, _react2.css)({
@@ -42,0 +43,0 @@ borderTop: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)

dist/cjs/modal-wrapper.js

@@ -89,3 +89,3 @@ "use strict";
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.6.3"
+    packageVersion: "12.6.4"
   });
@@ -92,0 +92,0 @@ var onBlanketClicked = (0, _react.useCallback)(function (e) {

dist/cjs/version.json

 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.6.3",
+	"version": "12.6.4",
 	"sideEffects": false
 }

dist/es2019/internal/components/modal-dialog.js

@@ -10,2 +10,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import FadeIn from '@atlaskit/motion/fade-in';
+import { media } from '@atlaskit/primitives';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
@@ -30,3 +31,3 @@ import { borderRadius, textColor } from '../constants';
   pointerEvents: 'auto',
-  '@media (min-width: 480px)': {
+  [media.above.xs]: {
     width: 'var(--modal-dialog-width)',
@@ -45,3 +46,3 @@ maxWidth: 'inherit',
    */
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > form:only-child': {
@@ -61,3 +62,3 @@ display: 'inherit',
   maxHeight: 'none',
-  '@media (min-width: 480px)': {
+  [media.above.xs]: {
     minHeight: 'var(--modal-dialog-height)'
@@ -67,3 +68,3 @@ }
 const bodyScrollStyles = css({
-  '@media (min-width: 480px)': {
+  [media.above.xs]: {
     height: 'var(--modal-dialog-height)',
@@ -70,0 +71,0 @@ maxHeight: 'inherit'

dist/es2019/internal/components/positioner.js

@@ -7,2 +7,3 @@ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { mediumDurationMs } from '@atlaskit/motion/durations';
+import { media } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
@@ -28,3 +29,3 @@ import { gutter, verticalOffset } from '../constants';
   position: 'relative',
-  '@media (min-width: 480px)': {
+  [media.above.xs]: {
     margin: `${gutter}px auto`,
@@ -35,3 +36,3 @@ pointerEvents: 'none'
 const bodyScrollStyles = css({
-  '@media (min-width: 480px)': {
+  [media.above.xs]: {
     maxWidth: maxWidthDimensions,
@@ -38,0 +39,0 @@ maxHeight: maxHeightDimensions,

dist/es2019/internal/components/scroll-container.js

@@ -12,2 +12,3 @@ /** @jsx jsx */
 import FocusRing from '@atlaskit/focus-ring';
+import { media } from '@atlaskit/primitives';
 import { keylineColor, keylineHeight } from '../constants';
@@ -22,3 +23,3 @@ const baseStyles = css({
   overflowY: 'auto',
-  '@media (min-width: 480px)': {
+  [media.above.xs]: {
     height: 'unset',
@@ -25,0 +26,0 @@ overflowY: 'auto'

dist/es2019/modal-wrapper.js

@@ -75,3 +75,3 @@ import _extends from "@babel/runtime/helpers/extends";
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.6.3"
+    packageVersion: "12.6.4"
   });
@@ -78,0 +78,0 @@ const onBlanketClicked = useCallback(e => {

dist/es2019/version.json

 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.6.3",
+	"version": "12.6.4",
 	"sideEffects": false
 }

dist/esm/internal/components/modal-dialog.js

 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _css;
 /** @jsx jsx */
@@ -12,2 +14,3 @@ import { useMemo } from 'react';
 import FadeIn from '@atlaskit/motion/fade-in';
+import { media } from '@atlaskit/primitives';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
@@ -19,3 +22,3 @@ import { borderRadius, textColor } from '../constants';
 import Positioner from './positioner';
-var dialogStyles = css({
+var dialogStyles = css((_css = {
   display: 'flex',
@@ -32,26 +35,19 @@ width: '100%',
   color: textColor,
-  pointerEvents: 'auto',
-  '@media (min-width: 480px)': {
-    width: 'var(--modal-dialog-width)',
-    maxWidth: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginRight: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginLeft: 'inherit',
-    borderRadius: borderRadius,
-    boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")")
-  },
+  pointerEvents: 'auto'
+}, _defineProperty(_css, media.above.xs, {
+  width: 'var(--modal-dialog-width)',
+  maxWidth: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  marginRight: 'inherit',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  marginLeft: 'inherit',
+  borderRadius: borderRadius,
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")")
+}), _defineProperty(_css, '& > form:only-child', {
+  display: 'inherit',
+  maxHeight: 'inherit',
+  flexDirection: 'inherit'
+}), _css));
+var viewportScrollStyles = css(_defineProperty({
   /**
-   * This is to support scrolling if the modal's children are wrapped in
-   * a form.
-   */
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '& > form:only-child': {
-    display: 'inherit',
-    maxHeight: 'inherit',
-    flexDirection: 'inherit'
-  }
-});
-var viewportScrollStyles = css({
-  /**
    * This ensures that the element fills the viewport on mobile
@@ -62,13 +58,10 @@ * while also allowing it to overflow if its height is larger than
   minHeight: '100vh',
-  maxHeight: 'none',
-  '@media (min-width: 480px)': {
-    minHeight: 'var(--modal-dialog-height)'
-  }
-});
-var bodyScrollStyles = css({
-  '@media (min-width: 480px)': {
-    height: 'var(--modal-dialog-height)',
-    maxHeight: 'inherit'
-  }
-});
+  maxHeight: 'none'
+}, media.above.xs, {
+  minHeight: 'var(--modal-dialog-height)'
+}));
+var bodyScrollStyles = css(_defineProperty({}, media.above.xs, {
+  height: 'var(--modal-dialog-height)',
+  maxHeight: 'inherit'
+}));
 var ModalDialog = function ModalDialog(props) {
@@ -75,0 +68,0 @@ var _props$width = props.width,

dist/esm/internal/components/positioner.js

@@ -0,1 +1,2 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
@@ -7,2 +8,3 @@ /** @jsx jsx */
 import { mediumDurationMs } from '@atlaskit/motion/durations';
+import { media } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
@@ -25,23 +27,20 @@ import { gutter, verticalOffset } from '../constants';
 });
-var viewportScrollStyles = css({
+var viewportScrollStyles = css(_defineProperty({
   height: 'auto',
-  position: 'relative',
-  '@media (min-width: 480px)': {
-    margin: "".concat(gutter, "px auto"),
-    pointerEvents: 'none'
-  }
-});
-var bodyScrollStyles = css({
-  '@media (min-width: 480px)': {
-    maxWidth: maxWidthDimensions,
-    maxHeight: maxHeightDimensions,
-    marginRight: 'auto',
-    marginLeft: 'auto',
-    position: 'absolute',
-    top: "".concat(gutter, "px"),
-    right: 0,
-    left: 0,
-    pointerEvents: 'none'
-  }
-});
+  position: 'relative'
+}, media.above.xs, {
+  margin: "".concat(gutter, "px auto"),
+  pointerEvents: 'none'
+}));
+var bodyScrollStyles = css(_defineProperty({}, media.above.xs, {
+  maxWidth: maxWidthDimensions,
+  maxHeight: maxHeightDimensions,
+  marginRight: 'auto',
+  marginLeft: 'auto',
+  position: 'absolute',
+  top: "".concat(gutter, "px"),
+  right: 0,
+  left: 0,
+  pointerEvents: 'none'
+}));
 var stackTransitionStyles = css({
@@ -48,0 +47,0 @@ transitionDuration: "".concat(mediumDurationMs, "ms"),

dist/esm/internal/components/scroll-container.js

 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
@@ -13,4 +14,5 @@
 import FocusRing from '@atlaskit/focus-ring';
+import { media } from '@atlaskit/primitives';
 import { keylineColor, keylineHeight } from '../constants';
-var baseStyles = css({
+var baseStyles = css(_defineProperty({
   display: 'inherit',
@@ -22,8 +24,7 @@ margin: "var(--ds-space-0, 0px)",
   overflowX: 'hidden',
-  overflowY: 'auto',
-  '@media (min-width: 480px)': {
-    height: 'unset',
-    overflowY: 'auto'
-  }
-});
+  overflowY: 'auto'
+}, media.above.xs, {
+  height: 'unset',
+  overflowY: 'auto'
+}));
 var topKeylineStyles = css({
@@ -30,0 +31,0 @@ borderTop: "".concat(keylineHeight, "px solid ").concat(keylineColor)

dist/esm/modal-wrapper.js

@@ -79,3 +79,3 @@ import _extends from "@babel/runtime/helpers/extends";
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.6.3"
+    packageVersion: "12.6.4"
   });
@@ -82,0 +82,0 @@ var onBlanketClicked = useCallback(function (e) {

dist/esm/version.json

 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.6.3",
+	"version": "12.6.4",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.6.3",
+  "version": "12.6.4",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
@@ -15,22 +15,3 @@ "publishConfig": {
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
-  "af:exports": {
-    ".": "./src/index.tsx",
-    "./types": "./src/types.tsx",
-    "./hooks": "./src/hooks.tsx",
-    "./modal-dialog": "./src/modal-wrapper.tsx",
-    "./modal-header": "./src/modal-header.tsx",
-    "./modal-title": "./src/modal-title.tsx",
-    "./modal-body": "./src/modal-body.tsx",
-    "./modal-footer": "./src/modal-footer.tsx",
-    "./modal-transition": "./src/modal-transition.tsx"
-  },
   "atlaskit:src": "src/index.tsx",
@@ -57,4 +38,5 @@ "atlassian": {
     "@atlaskit/portal": "^4.3.0",
+    "@atlaskit/primitives": "^1.0.2",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
@@ -73,2 +55,3 @@ "@emotion/react": "^11.7.1",
     "@af/accessibility-testing": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/button": "*",
@@ -118,4 +101,23 @@ "@atlaskit/ssr": "*",
   },
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "af:exports": {
+    ".": "./src/index.tsx",
+    "./types": "./src/types.tsx",
+    "./hooks": "./src/hooks.tsx",
+    "./modal-dialog": "./src/modal-wrapper.tsx",
+    "./modal-header": "./src/modal-header.tsx",
+    "./modal-title": "./src/modal-title.tsx",
+    "./modal-body": "./src/modal-body.tsx",
+    "./modal-footer": "./src/modal-footer.tsx",
+    "./modal-transition": "./src/modal-transition.tsx"
+  },
   "homepage": "https://atlassian.design/components/modal-dialog/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

No alert changes

Improved metrics

Total package byte prevSize

432190

increased by0.25%

Worsened metrics

Dependency count

19

increased by5.56%

Dev dependency count

20

increased by5.26%

Lines of code

9507

decreased by-0.11%

Dependency changes

• + Added@atlaskit/primitives@^1.0.2

• + Added@atlaskit/app-provider@0.4.0(transitive)

• + Added@atlaskit/primitives@1.20.0(transitive)

• + Addedtiny-invariant@1.3.3(transitive)

• Updated@atlaskit/tokens@^1.13.0