@atlaskit/modal-dialog 12.1.0 → 12.2.2

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/modal-dialog
 
+## 12.2.2
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Bump raf-schd to latest (4.0.3), including better TS typings.
+- Updated dependencies
+
+## 12.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.2.0
+
+### Minor Changes
+
+- [`2d60dd3116d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d60dd3116d) - [ux] Modal dialogs which contain no focusable children will now lock focus to the modal container. The container will have a focus ring, so some VR tests may need to be regenerated.
+
+### Patch Changes
+
+- [`3fced6aa641`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fced6aa641) - Bumped `react-focus-lock` to version `^2.2.1`.
+- [`a8c55e479e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a8c55e479e8) - Removes unused dependency on emotion-styled
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 12.1.1
+
+### Patch Changes
+
+- [`2b2290121eb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b2290121eb) - Raised the minimum version carat range of focus ring to latest.
+
 ## 12.1.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -5,16 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "ModalBody", {
   enumerable: true,
   get: function get() {
-    return _modalWrapper.default;
+    return _modalBody.default;
   }
 });
-Object.defineProperty(exports, "ModalTransition", {
+Object.defineProperty(exports, "ModalFooter", {
   enumerable: true,
   get: function get() {
-    return _modalTransition.default;
+    return _modalFooter.default;
   }
 });
 Object.defineProperty(exports, "ModalHeader", {
@@ -29,16 +29,16 @@ Object.defineProperty(exports, "ModalTitle", {
     return _modalTitle.default;
   }
 });
-Object.defineProperty(exports, "ModalBody", {
+Object.defineProperty(exports, "ModalTransition", {
   enumerable: true,
   get: function get() {
-    return _modalBody.default;
+    return _modalTransition.default;
   }
 });
-Object.defineProperty(exports, "ModalFooter", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _modalFooter.default;
+    return _modalWrapper.default;
   }
 });
 Object.defineProperty(exports, "useModal", {

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

@@ -23,12 +23,12 @@ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+
 var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants = require("../constants");
 
 var _context = require("../context");
@@ -49,7 +49,7 @@ var dialogStyles = (0, _core.css)({
   maxHeight: '100vh',
   flex: '1 1 auto',
   flexDirection: 'column',
-  backgroundColor: (0, _tokens.token)('color.background.overlay', _colors.N0),
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   color: _constants.textColor,
   pointerEvents: 'auto',
   '@media (min-width: 480px)': {
@@ -58,7 +58,7 @@ var dialogStyles = (0, _core.css)({
     marginRight: 'inherit',
     marginLeft: 'inherit',
     borderRadius: _constants.borderRadius,
-    boxShadow: (0, _tokens.token)('shadow.overlay', "0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A))
+    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), ")")
   },
 
   /**
@@ -136,7 +136,7 @@ var ModalDialog = function ModalDialog(props) {
     entranceDirection: "bottom",
     onFinish: onMotionFinish
   }, function (bottomFadeInProps) {
-    return (0, _core.jsx)("section", (0, _extends2.default)({}, bottomFadeInProps, {
+    return (0, _core.jsx)(_focusRing.default, null, (0, _core.jsx)("section", (0, _extends2.default)({}, bottomFadeInProps, {
       ref: (0, _mergeRefs.default)([bottomFadeInProps.ref, motionRef]),
       style: {
         '--modal-dialog-width': (0, _utils.dialogWidth)(width),
@@ -149,7 +149,7 @@ var ModalDialog = function ModalDialog(props) {
       "data-modal-stack": stackIndex,
       tabIndex: -1,
       "aria-modal": true
-    }), children);
+    }), children));
   }))));
 };
 

package/dist/cjs/internal/constants.js

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.iconColor = exports.textColor = exports.keylineColor = exports.keylineHeight = exports.titleIconMargin = exports.footerItemGap = exports.padding = exports.verticalOffset = exports.borderRadius = exports.gutter = exports.width = void 0;
+exports.width = exports.verticalOffset = exports.titleIconMargin = exports.textColor = exports.padding = exports.keylineHeight = exports.keylineColor = exports.iconColor = exports.gutter = exports.footerItemGap = exports.borderRadius = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var width = {
   values: ['small', 'medium', 'large', 'x-large'],
   widths: {
@@ -37,12 +35,12 @@ var titleIconMargin = gridSize;
 exports.titleIconMargin = titleIconMargin;
 var keylineHeight = 2;
 exports.keylineHeight = keylineHeight;
-var keylineColor = (0, _tokens.token)('color.border.neutral', _colors.N30);
+var keylineColor = "var(--ds-border, ".concat(_colors.N30, ")");
 exports.keylineColor = keylineColor;
-var textColor = (0, _tokens.token)('color.text.highEmphasis', (0, _colors.text)());
+var textColor = "var(--ds-text, ".concat((0, _colors.text)(), ")");
 exports.textColor = textColor;
 var iconColor = {
-  danger: (0, _tokens.token)('color.iconBorder.danger', _colors.R400),
-  warning: (0, _tokens.token)('color.iconBorder.warning', _colors.Y400)
+  danger: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
+  warning: "var(--ds-icon-warning, ".concat(_colors.Y400, ")")
 };
 exports.iconColor = iconColor;

package/dist/cjs/internal/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dialogHeight = exports.dialogWidth = void 0;
+exports.dialogWidth = exports.dialogHeight = void 0;
 
 var _constants = require("./constants");
 

package/dist/cjs/modal-wrapper.js

@@ -41,11 +41,12 @@ var _useModalStack = _interopRequireDefault(require("./internal/hooks/use-modal-
 
 var _usePreventProgrammaticScroll = _interopRequireDefault(require("./internal/hooks/use-prevent-programmatic-scroll"));
 
+var _excluded = ["autoFocus", "shouldCloseOnEscapePress", "shouldCloseOnOverlayClick", "shouldScrollInViewport", "stackIndex", "onClose", "onStackChange", "isBlanketHidden", "testId"];
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/** @jsx jsx */
 var fillScreenStyles = (0, _core.css)({
   width: '100vw',
   height: '100vh',
@@ -72,7 +73,7 @@ var ModalWrapper = function ModalWrapper(props) {
       onStackChange = _props$onStackChange === void 0 ? _noop.default : _props$onStackChange,
       isBlanketHidden = props.isBlanketHidden,
       testId = props.testId,
-      modalDialogProps = (0, _objectWithoutProperties2.default)(props, ["autoFocus", "shouldCloseOnEscapePress", "shouldCloseOnOverlayClick", "shouldScrollInViewport", "stackIndex", "onClose", "onStackChange", "isBlanketHidden", "testId"]);
+      modalDialogProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var calculatedStackIndex = (0, _useModalStack.default)({
     onStackChange: onStackChange
   });
@@ -85,7 +86,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.1.0"
+    packageVersion: "12.2.2"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.1.0",
+	"version": "12.2.2",
 	"sideEffects": false
 }

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

@@ -6,9 +6,9 @@ import { css, jsx } from '@emotion/core';
 import { useUID } from 'react-uid';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import FocusRing from '@atlaskit/focus-ring';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
@@ -23,7 +23,7 @@ const dialogStyles = css({
   maxHeight: '100vh',
   flex: '1 1 auto',
   flexDirection: 'column',
-  backgroundColor: token('color.background.overlay', N0),
+  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   color: textColor,
   pointerEvents: 'auto',
   '@media (min-width: 480px)': {
@@ -32,7 +32,7 @@ const dialogStyles = css({
     marginRight: 'inherit',
     marginLeft: 'inherit',
     borderRadius,
-    boxShadow: token('shadow.overlay', `0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`)
+    boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`})`
   },
 
   /**
@@ -102,7 +102,7 @@ const ModalDialog = props => {
   }, jsx(FadeIn, {
     entranceDirection: "bottom",
     onFinish: onMotionFinish
-  }, bottomFadeInProps => jsx("section", _extends({}, bottomFadeInProps, {
+  }, bottomFadeInProps => jsx(FocusRing, null, jsx("section", _extends({}, bottomFadeInProps, {
     ref: mergeRefs([bottomFadeInProps.ref, motionRef]),
     style: {
       '--modal-dialog-width': dialogWidth(width),
@@ -115,7 +115,7 @@ const ModalDialog = props => {
     "data-modal-stack": stackIndex,
     tabIndex: -1,
     "aria-modal": true
-  }), children)))));
+  }), children))))));
 };
 
 export default ModalDialog;

package/dist/es2019/internal/constants.js

@@ -1,6 +1,5 @@
 import { N30, R400, text, Y400 } from '@atlaskit/theme/colors';
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export const width = {
   values: ['small', 'medium', 'large', 'x-large'],
   widths: {
@@ -19,9 +18,9 @@ export const padding = gridSize * 3;
 export const footerItemGap = gridSize;
 export const titleIconMargin = gridSize;
 export const keylineHeight = 2;
-export const keylineColor = token('color.border.neutral', N30);
-export const textColor = token('color.text.highEmphasis', text());
+export const keylineColor = `var(--ds-border, ${N30})`;
+export const textColor = `var(--ds-text, ${text()})`;
 export const iconColor = {
-  danger: token('color.iconBorder.danger', R400),
-  warning: token('color.iconBorder.warning', Y400)
+  danger: `var(--ds-icon-danger, ${R400})`,
+  warning: `var(--ds-icon-warning, ${Y400})`
 };

package/dist/es2019/modal-wrapper.js

@@ -50,7 +50,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.1.0"
+    packageVersion: "12.2.2"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.1.0",
+	"version": "12.2.2",
 	"sideEffects": false
 }

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

@@ -8,9 +8,9 @@ import { css, jsx } from '@emotion/core';
 import { useUID } from 'react-uid';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import FocusRing from '@atlaskit/focus-ring';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
@@ -25,7 +25,7 @@ var dialogStyles = css({
   maxHeight: '100vh',
   flex: '1 1 auto',
   flexDirection: 'column',
-  backgroundColor: token('color.background.overlay', N0),
+  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
   color: textColor,
   pointerEvents: 'auto',
   '@media (min-width: 480px)': {
@@ -34,7 +34,7 @@ var dialogStyles = css({
     marginRight: 'inherit',
     marginLeft: 'inherit',
     borderRadius: borderRadius,
-    boxShadow: token('shadow.overlay', "0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A))
+    boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")")
   },
 
   /**
@@ -112,7 +112,7 @@ var ModalDialog = function ModalDialog(props) {
     entranceDirection: "bottom",
     onFinish: onMotionFinish
   }, function (bottomFadeInProps) {
-    return jsx("section", _extends({}, bottomFadeInProps, {
+    return jsx(FocusRing, null, jsx("section", _extends({}, bottomFadeInProps, {
       ref: mergeRefs([bottomFadeInProps.ref, motionRef]),
       style: {
         '--modal-dialog-width': dialogWidth(width),
@@ -125,7 +125,7 @@ var ModalDialog = function ModalDialog(props) {
       "data-modal-stack": stackIndex,
       tabIndex: -1,
       "aria-modal": true
-    }), children);
+    }), children));
   }))));
 };
 

package/dist/esm/internal/constants.js

@@ -1,6 +1,5 @@
 import { N30, R400, text, Y400 } from '@atlaskit/theme/colors';
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export var width = {
   values: ['small', 'medium', 'large', 'x-large'],
   widths: {
@@ -19,9 +18,9 @@ export var padding = gridSize * 3;
 export var footerItemGap = gridSize;
 export var titleIconMargin = gridSize;
 export var keylineHeight = 2;
-export var keylineColor = token('color.border.neutral', N30);
-export var textColor = token('color.text.highEmphasis', text());
+export var keylineColor = "var(--ds-border, ".concat(N30, ")");
+export var textColor = "var(--ds-text, ".concat(text(), ")");
 export var iconColor = {
-  danger: token('color.iconBorder.danger', R400),
-  warning: token('color.iconBorder.warning', Y400)
+  danger: "var(--ds-icon-danger, ".concat(R400, ")"),
+  warning: "var(--ds-icon-warning, ".concat(Y400, ")")
 };

package/dist/esm/modal-wrapper.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["autoFocus", "shouldCloseOnEscapePress", "shouldCloseOnOverlayClick", "shouldScrollInViewport", "stackIndex", "onClose", "onStackChange", "isBlanketHidden", "testId"];
 
 /** @jsx jsx */
 import { useCallback } from 'react';
@@ -42,7 +43,7 @@ var ModalWrapper = function ModalWrapper(props) {
       onStackChange = _props$onStackChange === void 0 ? noop : _props$onStackChange,
       isBlanketHidden = props.isBlanketHidden,
       testId = props.testId,
-      modalDialogProps = _objectWithoutProperties(props, ["autoFocus", "shouldCloseOnEscapePress", "shouldCloseOnOverlayClick", "shouldScrollInViewport", "stackIndex", "onClose", "onStackChange", "isBlanketHidden", "testId"]);
+      modalDialogProps = _objectWithoutProperties(props, _excluded);
 
   var calculatedStackIndex = useModalStack({
     onStackChange: onStackChange
@@ -56,7 +57,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.1.0"
+    packageVersion: "12.2.2"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.1.0",
+	"version": "12.2.2",
 	"sideEffects": false
 }

package/dist/types/internal/components/modal-dialog.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ModalDialogProps } from '../../types';
 declare const ModalDialog: (props: ModalDialogProps) => JSX.Element;
 export default ModalDialog;

package/dist/types/internal/constants.d.ts

@@ -15,8 +15,8 @@ export declare const padding: number;
 export declare const footerItemGap: number;
 export declare const titleIconMargin: number;
 export declare const keylineHeight = 2;
-export declare const keylineColor: "var(--ds-border-neutral)";
-export declare const textColor: "var(--ds-text-highEmphasis)";
+export declare const keylineColor: "var(--ds-border)";
+export declare const textColor: "var(--ds-text)";
 export declare const iconColor: {
     [key in Appearance]: string;
 };

package/dist/types/modal-transition.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ExitingPersistenceProps } from '@atlaskit/motion/exiting-persistence';
 declare const ModalTransition: (props: Pick<ExitingPersistenceProps, 'children'>) => JSX.Element;
 export default ModalTransition;

package/dist/types/modal-wrapper.d.ts

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+/// <reference types="react" />
 import type { ModalDialogProps } from './types';
 export type { ModalDialogProps };
 declare const ModalWrapper: (props: ModalDialogProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.1.0",
+  "version": "12.2.2",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,6 @@
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Modal dialog"
@@ -41,16 +40,16 @@
     "@atlaskit/blanket": "^12.2.0",
     "@atlaskit/codemod-utils": "^3.4.0",
     "@atlaskit/ds-lib": "^1.3.0",
-    "@atlaskit/focus-ring": "0.2.4",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/focus-ring": "^0.2.4",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/motion": "^1.0.0",
     "@atlaskit/portal": "^4.1.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
-    "raf-schd": "^2.1.0",
-    "react-focus-lock": "^1.19.1",
+    "raf-schd": "^4.0.3",
+    "react-focus-lock": "^2.5.2",
     "react-scrolllock": "^5.0.1",
     "react-uid": "^2.2.0"
   },
@@ -61,7 +60,6 @@
     "@atlaskit/avatar": "*",
     "@atlaskit/avatar-group": "*",
     "@atlaskit/breadcrumbs": "*",
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "*",
     "@atlaskit/checkbox": "*",
     "@atlaskit/datetime-picker": "*",
@@ -83,6 +81,7 @@
     "@testing-library/dom": "^7.7.3",
     "@testing-library/react": "^8.0.1",
     "@testing-library/react-hooks": "^1.0.4",
+    "@types/raf-schd": "^4.0.1",
     "@types/react-beautiful-dnd": "^11.0.1",
     "jscodeshift": "^0.13.0",
     "react-beautiful-dnd": "^12.1.1",
@@ -106,7 +105,10 @@
       "analytics": "analytics-next",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
-      "styling": "emotion"
+      "styling": [
+        "static",
+        "emotion"
+      ]
     }
   },
   "homepage": "https://atlassian.design/components/modal-dialog/",