@atlaskit/modal-dialog 12.0.3 → 12.2.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/modal-dialog
 
+## 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
+
+- [`993eb469fcb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/993eb469fcb) - Instrumented `@atlaskit/modal-dialog` with the new theming package, `@atlaskit/tokens`. Tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.0.3
 
 ### Patch 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,6 +23,8 @@ 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");
@@ -47,7 +49,7 @@ var dialogStyles = (0, _core.css)({
   maxHeight: '100vh',
   flex: '1 1 auto',
   flexDirection: 'column',
-  backgroundColor: _colors.N0,
+  backgroundColor: "var(--ds-background-overlay, ".concat(_colors.N0, ")"),
   color: _constants.textColor,
   pointerEvents: 'auto',
   '@media (min-width: 480px)': {
@@ -56,7 +58,7 @@ var dialogStyles = (0, _core.css)({
     marginRight: 'inherit',
     marginLeft: 'inherit',
     borderRadius: _constants.borderRadius,
-    boxShadow: "0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A)
+    boxShadow: "var(--ds-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A), ")")
   },
 
   /**
@@ -134,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),
@@ -147,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,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.iconColor = exports.focusOutlineColor = 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");
 
@@ -35,14 +35,12 @@ var titleIconMargin = gridSize;
 exports.titleIconMargin = titleIconMargin;
 var keylineHeight = 2;
 exports.keylineHeight = keylineHeight;
-var keylineColor = _colors.N30;
+var keylineColor = "var(--ds-border-neutral, ".concat(_colors.N30, ")");
 exports.keylineColor = keylineColor;
-var textColor = (0, _colors.text)();
+var textColor = "var(--ds-text-highEmphasis, ".concat((0, _colors.text)(), ")");
 exports.textColor = textColor;
-var focusOutlineColor = _colors.N800;
-exports.focusOutlineColor = focusOutlineColor;
 var iconColor = {
-  danger: _colors.R400,
-  warning: _colors.Y400
+  danger: "var(--ds-iconBorder-danger, ".concat(_colors.R400, ")"),
+  warning: "var(--ds-iconBorder-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.0.3"
+    packageVersion: "12.2.1"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/cjs/version.json

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

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

@@ -6,6 +6,7 @@ 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 { borderRadius, textColor } from '../constants';
@@ -22,7 +23,7 @@ const dialogStyles = css({
   maxHeight: '100vh',
   flex: '1 1 auto',
   flexDirection: 'column',
-  backgroundColor: N0,
+  backgroundColor: `var(--ds-background-overlay, ${N0})`,
   color: textColor,
   pointerEvents: 'auto',
   '@media (min-width: 480px)': {
@@ -31,7 +32,7 @@ const dialogStyles = css({
     marginRight: 'inherit',
     marginLeft: 'inherit',
     borderRadius,
-    boxShadow: `0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`
+    boxShadow: `var(--ds-overlay, ${`0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`})`
   },
 
   /**
@@ -101,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),
@@ -114,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,4 +1,4 @@
-import { text as getTextColor, N30, N800, R400, Y400 } from '@atlaskit/theme/colors';
+import { N30, R400, text, Y400 } from '@atlaskit/theme/colors';
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
 export const width = {
   values: ['small', 'medium', 'large', 'x-large'],
@@ -18,10 +18,9 @@ export const padding = gridSize * 3;
 export const footerItemGap = gridSize;
 export const titleIconMargin = gridSize;
 export const keylineHeight = 2;
-export const keylineColor = N30;
-export const textColor = getTextColor();
-export const focusOutlineColor = N800;
+export const keylineColor = `var(--ds-border-neutral, ${N30})`;
+export const textColor = `var(--ds-text-highEmphasis, ${text()})`;
 export const iconColor = {
-  danger: R400,
-  warning: Y400
+  danger: `var(--ds-iconBorder-danger, ${R400})`,
+  warning: `var(--ds-iconBorder-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.0.3"
+    packageVersion: "12.2.1"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/version.json

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

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

@@ -8,6 +8,7 @@ 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 { borderRadius, textColor } from '../constants';
@@ -24,7 +25,7 @@ var dialogStyles = css({
   maxHeight: '100vh',
   flex: '1 1 auto',
   flexDirection: 'column',
-  backgroundColor: N0,
+  backgroundColor: "var(--ds-background-overlay, ".concat(N0, ")"),
   color: textColor,
   pointerEvents: 'auto',
   '@media (min-width: 480px)': {
@@ -33,7 +34,7 @@ var dialogStyles = css({
     marginRight: 'inherit',
     marginLeft: 'inherit',
     borderRadius: borderRadius,
-    boxShadow: "0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A)
+    boxShadow: "var(--ds-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")")
   },
 
   /**
@@ -111,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),
@@ -124,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,4 +1,4 @@
-import { text as getTextColor, N30, N800, R400, Y400 } from '@atlaskit/theme/colors';
+import { N30, R400, text, Y400 } from '@atlaskit/theme/colors';
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
 export var width = {
   values: ['small', 'medium', 'large', 'x-large'],
@@ -18,10 +18,9 @@ export var padding = gridSize * 3;
 export var footerItemGap = gridSize;
 export var titleIconMargin = gridSize;
 export var keylineHeight = 2;
-export var keylineColor = N30;
-export var textColor = getTextColor();
-export var focusOutlineColor = N800;
+export var keylineColor = "var(--ds-border-neutral, ".concat(N30, ")");
+export var textColor = "var(--ds-text-highEmphasis, ".concat(text(), ")");
 export var iconColor = {
-  danger: R400,
-  warning: Y400
+  danger: "var(--ds-iconBorder-danger, ".concat(R400, ")"),
+  warning: "var(--ds-iconBorder-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.0.3"
+    packageVersion: "12.2.1"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.0.3",
+	"version": "12.2.1",
 	"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,11 +15,9 @@ export declare const padding: number;
 export declare const footerItemGap: number;
 export declare const titleIconMargin: number;
 export declare const keylineHeight = 2;
-export declare const keylineColor = "#EBECF0";
-export declare const textColor: string;
-export declare const focusOutlineColor = "#172B4D";
-declare type IconColor = {
+export declare const keylineColor: "var(--ds-border-neutral)";
+export declare const textColor: "var(--ds-text-highEmphasis)";
+export declare const iconColor: {
     [key in Appearance]: string;
 };
-export declare const iconColor: IconColor;
 export {};

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.0.3",
+  "version": "12.2.1",
   "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,15 +40,16 @@
     "@atlaskit/blanket": "^12.2.0",
     "@atlaskit/codemod-utils": "^3.4.0",
     "@atlaskit/ds-lib": "^1.3.0",
-    "@atlaskit/focus-ring": "0.2.3",
-    "@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/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "raf-schd": "^2.1.0",
-    "react-focus-lock": "^1.19.1",
+    "react-focus-lock": "^2.5.2",
     "react-scrolllock": "^5.0.1",
     "react-uid": "^2.2.0"
   },
@@ -60,7 +60,6 @@
     "@atlaskit/avatar": "*",
     "@atlaskit/avatar-group": "*",
     "@atlaskit/breadcrumbs": "*",
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "*",
     "@atlaskit/checkbox": "*",
     "@atlaskit/datetime-picker": "*",
@@ -103,9 +102,12 @@
     "@repo/internal": {
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "theming": "new-theming-api",
+      "theming": "tokens",
       "deprecation": "no-deprecated-imports",
-      "styling": "emotion"
+      "styling": [
+        "static",
+        "emotion"
+      ]
     }
   },
   "homepage": "https://atlassian.design/components/modal-dialog/",