@atlaskit/modal-dialog - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

@@ -1,6 +0,16 @@
-<a name="2.0.0"></a>
-# 2.0.0 (2017-05-05)
+<a name="2.1.0"></a>
+# 2.1.0 (2017-05-06)
 
 
 
+<a name="2.1.0"></a>
+# 2.1.0 (2017-05-06)
+
+
+### Features
+
+* **component:** animated entry/exit of modal dialog ([e721aaa](https://bitbucket.org/atlassian/atlaskit/commits/e721aaa))
+
+
+
 <a name="2.0.0"></a>
@@ -7,0 +17,0 @@ # 2.0.0 (2017-05-05)

dist/bundle-cjs.js

@@ -102,4 +102,10 @@ module.exports = /******/
             _getPrototypeOf2.default)(ModalDialog)).call.apply(_ref, [ this ].concat(args))), 
-            _this.componentDidMount = function() {
+            _this.state = {
+                isAnimating: !1
+            }, _this.componentDidMount = function() {
                 document.addEventListener("keydown", _this.handleKeyDown);
+            }, _this.componentWillReceiveProps = function(nextProps) {
+                _this.props.isOpen !== nextProps.isOpen && _this.setState({
+                    isAnimating: !0
+                });
             }, _this.componentWillUnmount = function() {
@@ -113,11 +119,22 @@ document.removeEventListener("keydown", _this.handleKeyDown);
                 } : {};
+            }, _this.dismissModal = function(e) {
+                _this.props.isOpen && _this.props.onDialogDismissed(e);
+            }, _this.handleAnimationEnd = function() {
+                _this.setState({
+                    isAnimating: !1
+                });
             }, _this.handleKeyDown = function(e) {
                 var escapeKeyCode = 27;
-                e.keyCode === escapeKeyCode && _this.props.onDialogDismissed(e);
+                e.keyCode === escapeKeyCode && _this.dismissModal(e);
             }, _this.handlePositionerDirectClick = function(e) {
                 var target = e.target;
-                target && target === _this.modalPositionerRef && _this.props.onDialogDismissed(e);
+                target && target === _this.modalPositionerRef && _this.dismissModal(e);
             }, _ret = _temp, (0, _possibleConstructorReturn3.default)(_this, _ret);
         }
+        // when the isOpen prop is changed, ModalPositioner will detect the change and trigger an
+        // animation immediately, so we set isAnimating in state here.
         // If a custom width (number of percentage) is supplied, set inline style
+        // Helper function to guard the onDialogDismissed prop function. Saved doing the same isOpen
+        // check in multiple places.
+        // Once the ModalPositioner animation finishes, set isAnimating back to false.
         // Detects click directly on the full-height modal container, to make sure that clicks in that
@@ -128,6 +145,3 @@ // blanket region trigger onDialogDismissed as expected.
             value: function() {
-                var _this2 = this;
-                // don't render anything if isOpen = false
-                if (!this.props.isOpen) return null;
-                var _props = this.props, onDialogDismissed = _props.onDialogDismissed, header = _props.header, children = _props.children, footer = _props.footer, width = _props.width, hasHeader = !!header, hasFooter = !!footer, OptionalHeader = function() {
+                var _this2 = this, _props = this.props, header = _props.header, isOpen = _props.isOpen, children = _props.children, footer = _props.footer, width = _props.width, hasHeader = !!header, hasFooter = !!footer, OptionalHeader = function() {
                     return hasHeader ? _react2.default.createElement(_HeaderFooterWrapper2.default, {
@@ -149,11 +163,17 @@ headerOrFooter: "header"
                 };
-                return _react2.default.createElement(_ModalWrapper2.default, null, _react2.default.createElement(_blanket2.default, {
-                    isTinted: !0,
-                    onBlanketClicked: onDialogDismissed
-                }), _react2.default.createElement(_ModalPositioner2.default, (0, _extends3.default)({
+                return _react2.default.createElement(_ModalWrapper2.default, {
+                    isOpen: isOpen
+                }, _react2.default.createElement(_blanket2.default, {
+                    canClickThrough: !isOpen,
+                    isTinted: isOpen,
+                    onBlanketClicked: this.dismissModal
+                }), this.state.isAnimating || isOpen ? _react2.default.createElement(_ModalPositioner2.default, (0, 
+                _extends3.default)({
                     innerRef: function(ref) {
                         _this2.modalPositionerRef = ref;
                     },
+                    isOpen: isOpen,
                     width: width
                 }, this.getCustomWidth(), {
+                    onAnimationEnd: this.handleAnimationEnd,
                     onClick: this.handlePositionerDirectClick
@@ -163,3 +183,3 @@ }), _react2.default.createElement(_ModalContainer2.default, null, _react2.default.createElement(OptionalHeader, null), _react2.default.createElement(_ContentContainer2.default, {
                     hasFooter: hasFooter
-                }, _react2.default.createElement(HeaderKeylineMask, null), children, _react2.default.createElement(FooterKeylineMask, null)), _react2.default.createElement(OptionalFooter, null))));
+                }, _react2.default.createElement(HeaderKeylineMask, null), children, _react2.default.createElement(FooterKeylineMask, null)), _react2.default.createElement(OptionalFooter, null))) : null);
             }
@@ -223,7 +243,10 @@ } ]), ModalDialog;
         value: !0
-    });
+    }), exports.getPointerEvents = void 0;
     var _taggedTemplateLiteral2 = __webpack_require__(12), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ", ";\n" ], [ "\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ", ";\n" ]), _styledComponents = __webpack_require__(13), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(14);
+    _taggedTemplateLiteral3.default)([ "\n  height: 100%;\n  left: 0;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ", ";\n" ], [ "\n  height: 100%;\n  left: 0;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ", ";\n" ]), _styledComponents = __webpack_require__(13), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(14), getPointerEvents = exports.getPointerEvents = function(_ref) {
+        var isOpen = _ref.isOpen;
+        return isOpen ? "initial" : "none";
+    };
     // Fixed container to avoid position clashing with other elements
-    exports.default = _styledComponents2.default.div(_templateObject, _utilSharedStyles.akZIndexBlanket);
+    exports.default = _styledComponents2.default.div(_templateObject, getPointerEvents, _utilSharedStyles.akZIndexBlanket);
 }, /* 12 */
@@ -254,9 +277,13 @@ /***/
     var _taggedTemplateLiteral2 = __webpack_require__(12), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ", "px);\n  margin: 0 auto;\n  margin-top: ", "px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ", "px);\n  position: relative;\n  width: ", "px;\n  z-index: ", ";\n" ], [ "\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ", "px);\n  margin: 0 auto;\n  margin-top: ", "px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ", "px);\n  position: relative;\n  width: ", "px;\n  z-index: ", ";\n" ]), _styledComponents = __webpack_require__(13), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(14), _sharedVariables = __webpack_require__(16), viewportMargin = 7.5 * _utilSharedStyles.akGridSizeUnitless, doubleViewportMargin = 2 * viewportMargin, getWidth = function(_ref) {
+    _taggedTemplateLiteral3.default)([ "\n    0% {\n      opacity: ", ";\n      top: ", "px;\n    }\n\n    50% {\n      opacity: ", ";\n      top: ", "px;\n    }\n\n    100% {\n      opacity: ", ";\n      top: ", "px;\n    }\n  " ], [ "\n    0% {\n      opacity: ", ";\n      top: ", "px;\n    }\n\n    50% {\n      opacity: ", ";\n      top: ", "px;\n    }\n\n    100% {\n      opacity: ", ";\n      top: ", "px;\n    }\n  " ]), _templateObject2 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ", "px);\n  margin: 0 auto;\n  margin-top: ", "px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ", "px);\n  position: relative;\n  width: ", "px;\n  z-index: ", ";\n\n  animation: ", " ", "s ease-in-out;\n" ], [ "\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ", "px);\n  margin: 0 auto;\n  margin-top: ", "px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ", "px);\n  position: relative;\n  width: ", "px;\n  z-index: ", ";\n\n  animation: ", " ", "s ease-in-out;\n" ]), _styledComponents = __webpack_require__(13), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(14), _sharedVariables = __webpack_require__(16), viewportMargin = 7.5 * _utilSharedStyles.akGridSizeUnitless, doubleViewportMargin = 2 * viewportMargin, animationDistance = _utilSharedStyles.akGridSizeUnitless * -2, getWidth = function(_ref) {
         var width = _ref.width;
         return _sharedVariables.WIDTH_ENUM.widths[width];
+    }, getEntryExitAnimation = function(_ref2) {
+        var isOpen = _ref2.isOpen, topFrom = isOpen ? animationDistance : 0, topMid = isOpen ? .5 * _utilSharedStyles.akGridSizeUnitless : .6 * animationDistance, topEnd = isOpen ? 0 : animationDistance, opacityFrom = isOpen ? 0 : 1, opacityMid = isOpen ? .8 : .2, opacityTo = isOpen ? 1 : 0;
+        return (0, _styledComponents.keyframes)(_templateObject, opacityFrom, topFrom, opacityMid, topMid, opacityTo, topEnd);
     };
     // have to use height because of IE11 bug
     // The -1px in max-height is needed for IE11/Edge.
-    exports.default = _styledComponents2.default.div(_templateObject, doubleViewportMargin, viewportMargin, doubleViewportMargin, getWidth, _utilSharedStyles.akZIndexModal);
+    exports.default = _styledComponents2.default.div(_templateObject2, doubleViewportMargin, viewportMargin, doubleViewportMargin, getWidth, _utilSharedStyles.akZIndexModal, getEntryExitAnimation, _sharedVariables.modalAnimationDuration);
 }, /* 16 */
@@ -268,3 +295,3 @@ /***/
         value: !0
-    }), exports.WIDTH_ENUM = exports.modalBorderRadius = exports.modalShadowInnerSize = void 0;
+    }), exports.modalAnimationDuration = exports.WIDTH_ENUM = exports.modalBorderRadius = exports.modalShadowInnerSize = void 0;
     var _utilSharedStyles = __webpack_require__(14);
@@ -284,3 +311,3 @@ exports.modalShadowInnerSize = 2, exports.modalBorderRadius = _utilSharedStyles.akGridSizeUnitless / 2,
         defaultValue: "medium"
-    };
+    }, exports.modalAnimationDuration = .25;
 }, /* 17 */
@@ -287,0 +314,0 @@ /***/

dist/bundle-cjs.min.js

@@ -1,1 +0,1 @@
-module.exports=function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var t={};return n.m=e,n.c=t,n.p="",n(0)}([function(e,n,t){e.exports=t(1)},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=t(2),i=r(o);n.default=i.default},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(3),i=r(o),l=t(4),a=r(l),u=t(5),d=r(u),s=t(6),f=r(s),c=t(7),p=r(c),h=t(8),m=r(h),x=t(9),v=r(x),b=t(10),g=r(b),_=t(11),y=r(_),k=t(15),w=r(k),M=t(17),P=r(M),D=t(18),E=r(D),O=t(19),T=r(O),z=t(20),S=r(z),U=t(16),C=function(e){function n(){var e,t,r,o;(0,d.default)(this,n);for(var i=arguments.length,l=Array(i),u=0;u<i;u++)l[u]=arguments[u];return t=r=(0,p.default)(this,(e=n.__proto__||(0,a.default)(n)).call.apply(e,[this].concat(l))),r.componentDidMount=function(){document.addEventListener("keydown",r.handleKeyDown)},r.componentWillUnmount=function(){document.removeEventListener("keydown",r.handleKeyDown)},r.getCustomWidth=function(){return U.WIDTH_ENUM.values.indexOf(r.props.width)===-1?{style:{width:r.props.width}}:{}},r.handleKeyDown=function(e){var n=27;e.keyCode===n&&r.props.onDialogDismissed(e)},r.handlePositionerDirectClick=function(e){var n=e.target;n&&n===r.modalPositionerRef&&r.props.onDialogDismissed(e)},o=t,(0,p.default)(r,o)}return(0,m.default)(n,e),(0,f.default)(n,[{key:"render",value:function(){var e=this;if(!this.props.isOpen)return null;var n=this.props,t=n.onDialogDismissed,r=n.header,o=n.children,l=n.footer,a=n.width,u=!!r,d=!!l,s=function(){return u?v.default.createElement(E.default,{headerOrFooter:"header"},r):null},f=function(){return d?v.default.createElement(E.default,{headerOrFooter:"footer"},l):null},c=function(){return u?v.default.createElement(S.default,{headerOrFooter:"header"}):null},p=function(){return d?v.default.createElement(S.default,{headerOrFooter:"footer"}):null};return v.default.createElement(y.default,null,v.default.createElement(g.default,{isTinted:!0,onBlanketClicked:t}),v.default.createElement(w.default,(0,i.default)({innerRef:function(n){e.modalPositionerRef=n},width:a},this.getCustomWidth(),{onClick:this.handlePositionerDirectClick}),v.default.createElement(P.default,null,v.default.createElement(s,null),v.default.createElement(T.default,{hasHeader:u,hasFooter:d},v.default.createElement(c,null),o,v.default.createElement(p,null)),v.default.createElement(f,null))))}}]),n}(x.PureComponent);C.propTypes={isOpen:x.PropTypes.bool,header:x.PropTypes.node,children:x.PropTypes.node,footer:x.PropTypes.node,width:x.PropTypes.oneOfType([x.PropTypes.number,x.PropTypes.string,x.PropTypes.oneOf(U.WIDTH_ENUM.values)]),onDialogDismissed:x.PropTypes.func},C.defaultProps={isOpen:!1,onDialogDismissed:function(){},width:U.WIDTH_ENUM.defaultValue},n.default=C},function(e,n){e.exports=require("babel-runtime/helpers/extends")},function(e,n){e.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(e,n){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,n){e.exports=require("babel-runtime/helpers/createClass")},function(e,n){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,n){e.exports=require("babel-runtime/helpers/inherits")},function(e,n){e.exports=require("react")},function(e,n){e.exports=require("@atlaskit/blanket")},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(12),i=r(o),l=(0,i.default)(["\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ",";\n"],["\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ",";\n"]),a=t(13),u=r(a),d=t(14);n.default=u.default.div(l,d.akZIndexBlanket)},function(e,n){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,n){e.exports=require("styled-components")},function(e,n){e.exports=require("@atlaskit/util-shared-styles")},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(12),i=r(o),l=(0,i.default)(["\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ","px);\n  margin: 0 auto;\n  margin-top: ","px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ","px);\n  position: relative;\n  width: ","px;\n  z-index: ",";\n"],["\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ","px);\n  margin: 0 auto;\n  margin-top: ","px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ","px);\n  position: relative;\n  width: ","px;\n  z-index: ",";\n"]),a=t(13),u=r(a),d=t(14),s=t(16),f=7.5*d.akGridSizeUnitless,c=2*f,p=function(e){var n=e.width;return s.WIDTH_ENUM.widths[n]};n.default=u.default.div(l,c,f,c,p,d.akZIndexModal)},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.WIDTH_ENUM=n.modalBorderRadius=n.modalShadowInnerSize=void 0;var r=t(14);n.modalShadowInnerSize=2,n.modalBorderRadius=r.akGridSizeUnitless/2,n.WIDTH_ENUM={values:["small","medium","large","x-large"],widths:{small:50*r.akGridSizeUnitless,medium:75*r.akGridSizeUnitless,large:100*r.akGridSizeUnitless,"x-large":121*r.akGridSizeUnitless},defaultValue:"medium"}},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(12),i=r(o),l=(0,i.default)(["\n  background-color: ",";\n  border-radius: ","px;\n  display: flex;\n  flex-direction: column;\n  max-height: inherit;\n"],["\n  background-color: ",";\n  border-radius: ","px;\n  display: flex;\n  flex-direction: column;\n  max-height: inherit;\n"]),a=t(13),u=r(a),d=t(14);n.default=u.default.div(l,d.akColorN0,d.akGridSizeUnitless/2)},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(12),i=r(o),l=(0,i.default)(["\n  flex: 0 0 auto;\n  padding: ","px;\n\n  ","\n"],["\n  flex: 0 0 auto;\n  padding: ","px;\n\n  ","\n"]),a=t(13),u=r(a),d=t(14),s=t(16),f=function(e){var n=e.headerOrFooter,t="header"===n?s.modalBorderRadius:0,r="footer"===n?s.modalBorderRadius:0;return"\n    border-top-left-radius: "+t+";\n    border-top-right-radius: "+t+";\n    border-bottom-left-radius: "+r+";\n    border-bottom-right-radius: "+r+";\n  "};n.default=u.default.div(l,2*d.akGridSizeUnitless,f)},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(12),i=r(o),l=(0,i.default)(["\n  box-shadow: ",";\n  flex: 0 1 auto;\n  overflow-y: auto;\n  padding: 0 ","px;\n  position: relative;\n"],["\n  box-shadow: ",";\n  flex: 0 1 auto;\n  overflow-y: auto;\n  padding: 0 ","px;\n  position: relative;\n"]),a=t(13),u=r(a),d=t(14),s=t(16),f=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return"inset 0px "+s.modalShadowInnerSize*e+"px 0px 0px "+d.akColorN30},c=function(e){var n=e.hasHeader,t=e.hasFooter;return n&&t?f()+", "+f(-1):n?f():n?f(-1):"none"};n.default=u.default.div(l,c,2*d.akGridSizeUnitless)},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(12),i=r(o),l=(0,i.default)(["\n  background: ",';\n  content: "";\n  display: block;\n  height: ',"px;\n\n  ","\n"],["\n  background: ",';\n  content: "";\n  display: block;\n  height: ',"px;\n\n  ","\n"]),a=t(13),u=r(a),d=t(14),s=t(16),f=function(e){var n=e.headerOrFooter;return"header"===n?"\n      left: 0;\n      position: absolute;\n      top: 0;\n      right: 0;\n    ":"footer"===n?"\n      margin: 0 "+d.akGridSizeUnitless*-2+"px;\n    ":null};n.default=u.default.div(l,d.akColorN0,s.modalShadowInnerSize,f)}]);
+module.exports=function(e){function n(i){if(t[i])return t[i].exports;var o=t[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var t={};return n.m=e,n.c=t,n.p="",n(0)}([function(e,n,t){e.exports=t(1)},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=t(2),r=i(o);n.default=r.default},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(3),r=i(o),a=t(4),l=i(a),d=t(5),u=i(d),s=t(6),f=i(s),p=t(7),c=i(p),h=t(8),m=i(h),x=t(9),v=i(x),g=t(10),y=i(g),b=t(11),_=i(b),k=t(15),w=i(k),M=t(17),O=i(M),P=t(18),E=i(P),S=t(19),D=i(S),z=t(20),T=i(z),U=t(16),C=function(e){function n(){var e,t,i,o;(0,u.default)(this,n);for(var r=arguments.length,a=Array(r),d=0;d<r;d++)a[d]=arguments[d];return t=i=(0,c.default)(this,(e=n.__proto__||(0,l.default)(n)).call.apply(e,[this].concat(a))),i.state={isAnimating:!1},i.componentDidMount=function(){document.addEventListener("keydown",i.handleKeyDown)},i.componentWillReceiveProps=function(e){i.props.isOpen!==e.isOpen&&i.setState({isAnimating:!0})},i.componentWillUnmount=function(){document.removeEventListener("keydown",i.handleKeyDown)},i.getCustomWidth=function(){return U.WIDTH_ENUM.values.indexOf(i.props.width)===-1?{style:{width:i.props.width}}:{}},i.dismissModal=function(e){i.props.isOpen&&i.props.onDialogDismissed(e)},i.handleAnimationEnd=function(){i.setState({isAnimating:!1})},i.handleKeyDown=function(e){var n=27;e.keyCode===n&&i.dismissModal(e)},i.handlePositionerDirectClick=function(e){var n=e.target;n&&n===i.modalPositionerRef&&i.dismissModal(e)},o=t,(0,c.default)(i,o)}return(0,m.default)(n,e),(0,f.default)(n,[{key:"render",value:function(){var e=this,n=this.props,t=n.header,i=n.isOpen,o=n.children,a=n.footer,l=n.width,d=!!t,u=!!a,s=function(){return d?v.default.createElement(E.default,{headerOrFooter:"header"},t):null},f=function(){return u?v.default.createElement(E.default,{headerOrFooter:"footer"},a):null},p=function(){return d?v.default.createElement(T.default,{headerOrFooter:"header"}):null},c=function(){return u?v.default.createElement(T.default,{headerOrFooter:"footer"}):null};return v.default.createElement(_.default,{isOpen:i},v.default.createElement(y.default,{canClickThrough:!i,isTinted:i,onBlanketClicked:this.dismissModal}),this.state.isAnimating||i?v.default.createElement(w.default,(0,r.default)({innerRef:function(n){e.modalPositionerRef=n},isOpen:i,width:l},this.getCustomWidth(),{onAnimationEnd:this.handleAnimationEnd,onClick:this.handlePositionerDirectClick}),v.default.createElement(O.default,null,v.default.createElement(s,null),v.default.createElement(D.default,{hasHeader:d,hasFooter:u},v.default.createElement(p,null),o,v.default.createElement(c,null)),v.default.createElement(f,null))):null)}}]),n}(x.PureComponent);C.propTypes={isOpen:x.PropTypes.bool,header:x.PropTypes.node,children:x.PropTypes.node,footer:x.PropTypes.node,width:x.PropTypes.oneOfType([x.PropTypes.number,x.PropTypes.string,x.PropTypes.oneOf(U.WIDTH_ENUM.values)]),onDialogDismissed:x.PropTypes.func},C.defaultProps={isOpen:!1,onDialogDismissed:function(){},width:U.WIDTH_ENUM.defaultValue},n.default=C},function(e,n){e.exports=require("babel-runtime/helpers/extends")},function(e,n){e.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(e,n){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,n){e.exports=require("babel-runtime/helpers/createClass")},function(e,n){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,n){e.exports=require("babel-runtime/helpers/inherits")},function(e,n){e.exports=require("react")},function(e,n){e.exports=require("@atlaskit/blanket")},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.getPointerEvents=void 0;var o=t(12),r=i(o),a=(0,r.default)(["\n  height: 100%;\n  left: 0;\n  pointer-events: ",";\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ",";\n"],["\n  height: 100%;\n  left: 0;\n  pointer-events: ",";\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ",";\n"]),l=t(13),d=i(l),u=t(14),s=n.getPointerEvents=function(e){var n=e.isOpen;return n?"initial":"none"};n.default=d.default.div(a,s,u.akZIndexBlanket)},function(e,n){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,n){e.exports=require("styled-components")},function(e,n){e.exports=require("@atlaskit/util-shared-styles")},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(12),r=i(o),a=(0,r.default)(["\n    0% {\n      opacity: ",";\n      top: ","px;\n    }\n\n    50% {\n      opacity: ",";\n      top: ","px;\n    }\n\n    100% {\n      opacity: ",";\n      top: ","px;\n    }\n  "],["\n    0% {\n      opacity: ",";\n      top: ","px;\n    }\n\n    50% {\n      opacity: ",";\n      top: ","px;\n    }\n\n    100% {\n      opacity: ",";\n      top: ","px;\n    }\n  "]),l=(0,r.default)(["\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ","px);\n  margin: 0 auto;\n  margin-top: ","px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ","px);\n  position: relative;\n  width: ","px;\n  z-index: ",";\n\n  animation: "," ","s ease-in-out;\n"],["\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ","px);\n  margin: 0 auto;\n  margin-top: ","px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ","px);\n  position: relative;\n  width: ","px;\n  z-index: ",";\n\n  animation: "," ","s ease-in-out;\n"]),d=t(13),u=i(d),s=t(14),f=t(16),p=7.5*s.akGridSizeUnitless,c=2*p,h=s.akGridSizeUnitless*-2,m=function(e){var n=e.width;return f.WIDTH_ENUM.widths[n]},x=function(e){var n=e.isOpen,t=n?h:0,i=n?.5*s.akGridSizeUnitless:.6*h,o=n?0:h,r=n?0:1,l=n?.8:.2,u=n?1:0;return(0,d.keyframes)(a,r,t,l,i,u,o)};n.default=u.default.div(l,c,p,c,m,s.akZIndexModal,x,f.modalAnimationDuration)},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.modalAnimationDuration=n.WIDTH_ENUM=n.modalBorderRadius=n.modalShadowInnerSize=void 0;var i=t(14);n.modalShadowInnerSize=2,n.modalBorderRadius=i.akGridSizeUnitless/2,n.WIDTH_ENUM={values:["small","medium","large","x-large"],widths:{small:50*i.akGridSizeUnitless,medium:75*i.akGridSizeUnitless,large:100*i.akGridSizeUnitless,"x-large":121*i.akGridSizeUnitless},defaultValue:"medium"},n.modalAnimationDuration=.25},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(12),r=i(o),a=(0,r.default)(["\n  background-color: ",";\n  border-radius: ","px;\n  display: flex;\n  flex-direction: column;\n  max-height: inherit;\n"],["\n  background-color: ",";\n  border-radius: ","px;\n  display: flex;\n  flex-direction: column;\n  max-height: inherit;\n"]),l=t(13),d=i(l),u=t(14);n.default=d.default.div(a,u.akColorN0,u.akGridSizeUnitless/2)},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(12),r=i(o),a=(0,r.default)(["\n  flex: 0 0 auto;\n  padding: ","px;\n\n  ","\n"],["\n  flex: 0 0 auto;\n  padding: ","px;\n\n  ","\n"]),l=t(13),d=i(l),u=t(14),s=t(16),f=function(e){var n=e.headerOrFooter,t="header"===n?s.modalBorderRadius:0,i="footer"===n?s.modalBorderRadius:0;return"\n    border-top-left-radius: "+t+";\n    border-top-right-radius: "+t+";\n    border-bottom-left-radius: "+i+";\n    border-bottom-right-radius: "+i+";\n  "};n.default=d.default.div(a,2*u.akGridSizeUnitless,f)},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(12),r=i(o),a=(0,r.default)(["\n  box-shadow: ",";\n  flex: 0 1 auto;\n  overflow-y: auto;\n  padding: 0 ","px;\n  position: relative;\n"],["\n  box-shadow: ",";\n  flex: 0 1 auto;\n  overflow-y: auto;\n  padding: 0 ","px;\n  position: relative;\n"]),l=t(13),d=i(l),u=t(14),s=t(16),f=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return"inset 0px "+s.modalShadowInnerSize*e+"px 0px 0px "+u.akColorN30},p=function(e){var n=e.hasHeader,t=e.hasFooter;return n&&t?f()+", "+f(-1):n?f():n?f(-1):"none"};n.default=d.default.div(a,p,2*u.akGridSizeUnitless)},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(12),r=i(o),a=(0,r.default)(["\n  background: ",';\n  content: "";\n  display: block;\n  height: ',"px;\n\n  ","\n"],["\n  background: ",';\n  content: "";\n  display: block;\n  height: ',"px;\n\n  ","\n"]),l=t(13),d=i(l),u=t(14),s=t(16),f=function(e){var n=e.headerOrFooter;return"header"===n?"\n      left: 0;\n      position: absolute;\n      top: 0;\n      right: 0;\n    ":"footer"===n?"\n      margin: 0 "+u.akGridSizeUnitless*-2+"px;\n    ":null};n.default=d.default.div(a,u.akColorN0,s.modalShadowInnerSize,f)}]);

dist/bundle.js

@@ -105,4 +105,10 @@ !function(root, factory) {
                 _getPrototypeOf2.default)(ModalDialog)).call.apply(_ref, [ this ].concat(args))), 
-                _this.componentDidMount = function() {
+                _this.state = {
+                    isAnimating: !1
+                }, _this.componentDidMount = function() {
                     document.addEventListener("keydown", _this.handleKeyDown);
+                }, _this.componentWillReceiveProps = function(nextProps) {
+                    _this.props.isOpen !== nextProps.isOpen && _this.setState({
+                        isAnimating: !0
+                    });
                 }, _this.componentWillUnmount = function() {
@@ -116,11 +122,22 @@ document.removeEventListener("keydown", _this.handleKeyDown);
                     } : {};
+                }, _this.dismissModal = function(e) {
+                    _this.props.isOpen && _this.props.onDialogDismissed(e);
+                }, _this.handleAnimationEnd = function() {
+                    _this.setState({
+                        isAnimating: !1
+                    });
                 }, _this.handleKeyDown = function(e) {
                     var escapeKeyCode = 27;
-                    e.keyCode === escapeKeyCode && _this.props.onDialogDismissed(e);
+                    e.keyCode === escapeKeyCode && _this.dismissModal(e);
                 }, _this.handlePositionerDirectClick = function(e) {
                     var target = e.target;
-                    target && target === _this.modalPositionerRef && _this.props.onDialogDismissed(e);
+                    target && target === _this.modalPositionerRef && _this.dismissModal(e);
                 }, _ret = _temp, (0, _possibleConstructorReturn3.default)(_this, _ret);
             }
+            // when the isOpen prop is changed, ModalPositioner will detect the change and trigger an
+            // animation immediately, so we set isAnimating in state here.
             // If a custom width (number of percentage) is supplied, set inline style
+            // Helper function to guard the onDialogDismissed prop function. Saved doing the same isOpen
+            // check in multiple places.
+            // Once the ModalPositioner animation finishes, set isAnimating back to false.
             // Detects click directly on the full-height modal container, to make sure that clicks in that
@@ -131,6 +148,3 @@ // blanket region trigger onDialogDismissed as expected.
                 value: function() {
-                    var _this2 = this;
-                    // don't render anything if isOpen = false
-                    if (!this.props.isOpen) return null;
-                    var _props = this.props, onDialogDismissed = _props.onDialogDismissed, header = _props.header, children = _props.children, footer = _props.footer, width = _props.width, hasHeader = !!header, hasFooter = !!footer, OptionalHeader = function() {
+                    var _this2 = this, _props = this.props, header = _props.header, isOpen = _props.isOpen, children = _props.children, footer = _props.footer, width = _props.width, hasHeader = !!header, hasFooter = !!footer, OptionalHeader = function() {
                         return hasHeader ? _react2.default.createElement(_HeaderFooterWrapper2.default, {
@@ -152,11 +166,17 @@ headerOrFooter: "header"
                     };
-                    return _react2.default.createElement(_ModalWrapper2.default, null, _react2.default.createElement(_blanket2.default, {
-                        isTinted: !0,
-                        onBlanketClicked: onDialogDismissed
-                    }), _react2.default.createElement(_ModalPositioner2.default, (0, _extends3.default)({
+                    return _react2.default.createElement(_ModalWrapper2.default, {
+                        isOpen: isOpen
+                    }, _react2.default.createElement(_blanket2.default, {
+                        canClickThrough: !isOpen,
+                        isTinted: isOpen,
+                        onBlanketClicked: this.dismissModal
+                    }), this.state.isAnimating || isOpen ? _react2.default.createElement(_ModalPositioner2.default, (0, 
+                    _extends3.default)({
                         innerRef: function(ref) {
                             _this2.modalPositionerRef = ref;
                         },
+                        isOpen: isOpen,
                         width: width
                     }, this.getCustomWidth(), {
+                        onAnimationEnd: this.handleAnimationEnd,
                         onClick: this.handlePositionerDirectClick
@@ -166,3 +186,3 @@ }), _react2.default.createElement(_ModalContainer2.default, null, _react2.default.createElement(OptionalHeader, null), _react2.default.createElement(_ContentContainer2.default, {
                         hasFooter: hasFooter
-                    }, _react2.default.createElement(HeaderKeylineMask, null), children, _react2.default.createElement(FooterKeylineMask, null)), _react2.default.createElement(OptionalFooter, null))));
+                    }, _react2.default.createElement(HeaderKeylineMask, null), children, _react2.default.createElement(FooterKeylineMask, null)), _react2.default.createElement(OptionalFooter, null))) : null);
                 }
@@ -226,7 +246,10 @@ } ]), ModalDialog;
             value: !0
-        });
+        }), exports.getPointerEvents = void 0;
         var _taggedTemplateLiteral2 = __webpack_require__(12), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ", ";\n" ], [ "\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ", ";\n" ]), _styledComponents = __webpack_require__(13), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(14);
+        _taggedTemplateLiteral3.default)([ "\n  height: 100%;\n  left: 0;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ", ";\n" ], [ "\n  height: 100%;\n  left: 0;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ", ";\n" ]), _styledComponents = __webpack_require__(13), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(14), getPointerEvents = exports.getPointerEvents = function(_ref) {
+            var isOpen = _ref.isOpen;
+            return isOpen ? "initial" : "none";
+        };
         // Fixed container to avoid position clashing with other elements
-        exports.default = _styledComponents2.default.div(_templateObject, _utilSharedStyles.akZIndexBlanket);
+        exports.default = _styledComponents2.default.div(_templateObject, getPointerEvents, _utilSharedStyles.akZIndexBlanket);
     }, /* 12 */
@@ -257,9 +280,13 @@ /***/
         var _taggedTemplateLiteral2 = __webpack_require__(12), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ", "px);\n  margin: 0 auto;\n  margin-top: ", "px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ", "px);\n  position: relative;\n  width: ", "px;\n  z-index: ", ";\n" ], [ "\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ", "px);\n  margin: 0 auto;\n  margin-top: ", "px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ", "px);\n  position: relative;\n  width: ", "px;\n  z-index: ", ";\n" ]), _styledComponents = __webpack_require__(13), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(14), _sharedVariables = __webpack_require__(16), viewportMargin = 7.5 * _utilSharedStyles.akGridSizeUnitless, doubleViewportMargin = 2 * viewportMargin, getWidth = function(_ref) {
+        _taggedTemplateLiteral3.default)([ "\n    0% {\n      opacity: ", ";\n      top: ", "px;\n    }\n\n    50% {\n      opacity: ", ";\n      top: ", "px;\n    }\n\n    100% {\n      opacity: ", ";\n      top: ", "px;\n    }\n  " ], [ "\n    0% {\n      opacity: ", ";\n      top: ", "px;\n    }\n\n    50% {\n      opacity: ", ";\n      top: ", "px;\n    }\n\n    100% {\n      opacity: ", ";\n      top: ", "px;\n    }\n  " ]), _templateObject2 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ", "px);\n  margin: 0 auto;\n  margin-top: ", "px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ", "px);\n  position: relative;\n  width: ", "px;\n  z-index: ", ";\n\n  animation: ", " ", "s ease-in-out;\n" ], [ "\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ", "px);\n  margin: 0 auto;\n  margin-top: ", "px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ", "px);\n  position: relative;\n  width: ", "px;\n  z-index: ", ";\n\n  animation: ", " ", "s ease-in-out;\n" ]), _styledComponents = __webpack_require__(13), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(14), _sharedVariables = __webpack_require__(16), viewportMargin = 7.5 * _utilSharedStyles.akGridSizeUnitless, doubleViewportMargin = 2 * viewportMargin, animationDistance = _utilSharedStyles.akGridSizeUnitless * -2, getWidth = function(_ref) {
             var width = _ref.width;
             return _sharedVariables.WIDTH_ENUM.widths[width];
+        }, getEntryExitAnimation = function(_ref2) {
+            var isOpen = _ref2.isOpen, topFrom = isOpen ? animationDistance : 0, topMid = isOpen ? .5 * _utilSharedStyles.akGridSizeUnitless : .6 * animationDistance, topEnd = isOpen ? 0 : animationDistance, opacityFrom = isOpen ? 0 : 1, opacityMid = isOpen ? .8 : .2, opacityTo = isOpen ? 1 : 0;
+            return (0, _styledComponents.keyframes)(_templateObject, opacityFrom, topFrom, opacityMid, topMid, opacityTo, topEnd);
         };
         // have to use height because of IE11 bug
         // The -1px in max-height is needed for IE11/Edge.
-        exports.default = _styledComponents2.default.div(_templateObject, doubleViewportMargin, viewportMargin, doubleViewportMargin, getWidth, _utilSharedStyles.akZIndexModal);
+        exports.default = _styledComponents2.default.div(_templateObject2, doubleViewportMargin, viewportMargin, doubleViewportMargin, getWidth, _utilSharedStyles.akZIndexModal, getEntryExitAnimation, _sharedVariables.modalAnimationDuration);
     }, /* 16 */
@@ -271,3 +298,3 @@ /***/
             value: !0
-        }), exports.WIDTH_ENUM = exports.modalBorderRadius = exports.modalShadowInnerSize = void 0;
+        }), exports.modalAnimationDuration = exports.WIDTH_ENUM = exports.modalBorderRadius = exports.modalShadowInnerSize = void 0;
         var _utilSharedStyles = __webpack_require__(14);
@@ -287,3 +314,3 @@ exports.modalShadowInnerSize = 2, exports.modalBorderRadius = _utilSharedStyles.akGridSizeUnitless / 2,
             defaultValue: "medium"
-        };
+        }, exports.modalAnimationDuration = .25;
     }, /* 17 */
@@ -290,0 +317,0 @@ /***/

dist/bundle.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/helpers/extends"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("@atlaskit/blanket"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles")):"function"==typeof define&&define.amd?define(["babel-runtime/helpers/extends","babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","react","@atlaskit/blanket","babel-runtime/helpers/taggedTemplateLiteral","styled-components","@atlaskit/util-shared-styles"],t):"object"==typeof exports?exports["@atlaskit/modalDialog"]=t(require("babel-runtime/helpers/extends"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("@atlaskit/blanket"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles")):e["@atlaskit/modalDialog"]=t(e["babel-runtime/helpers/extends"],e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.react,e["@atlaskit/blanket"],e["babel-runtime/helpers/taggedTemplateLiteral"],e["styled-components"],e["@atlaskit/util-shared-styles"])}(this,function(e,t,n,r,i,l,o,a,u,d,s){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=n(2),l=r(i);t.default=l.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(3),l=r(i),o=n(4),a=r(o),u=n(5),d=r(u),s=n(6),f=r(s),p=n(7),c=r(p),h=n(8),m=r(h),b=n(9),x=r(b),g=n(10),y=r(g),v=n(11),k=r(v),_=n(15),w=r(_),C=n(17),M=r(C),D=n(18),P=r(D),q=n(19),T=r(q),E=n(20),O=r(E),j=n(16),z=function(e){function t(){var e,n,r,i;(0,d.default)(this,t);for(var l=arguments.length,o=Array(l),u=0;u<l;u++)o[u]=arguments[u];return n=r=(0,c.default)(this,(e=t.__proto__||(0,a.default)(t)).call.apply(e,[this].concat(o))),r.componentDidMount=function(){document.addEventListener("keydown",r.handleKeyDown)},r.componentWillUnmount=function(){document.removeEventListener("keydown",r.handleKeyDown)},r.getCustomWidth=function(){return j.WIDTH_ENUM.values.indexOf(r.props.width)===-1?{style:{width:r.props.width}}:{}},r.handleKeyDown=function(e){var t=27;e.keyCode===t&&r.props.onDialogDismissed(e)},r.handlePositionerDirectClick=function(e){var t=e.target;t&&t===r.modalPositionerRef&&r.props.onDialogDismissed(e)},i=n,(0,c.default)(r,i)}return(0,m.default)(t,e),(0,f.default)(t,[{key:"render",value:function(){var e=this;if(!this.props.isOpen)return null;var t=this.props,n=t.onDialogDismissed,r=t.header,i=t.children,o=t.footer,a=t.width,u=!!r,d=!!o,s=function(){return u?x.default.createElement(P.default,{headerOrFooter:"header"},r):null},f=function(){return d?x.default.createElement(P.default,{headerOrFooter:"footer"},o):null},p=function(){return u?x.default.createElement(O.default,{headerOrFooter:"header"}):null},c=function(){return d?x.default.createElement(O.default,{headerOrFooter:"footer"}):null};return x.default.createElement(k.default,null,x.default.createElement(y.default,{isTinted:!0,onBlanketClicked:n}),x.default.createElement(w.default,(0,l.default)({innerRef:function(t){e.modalPositionerRef=t},width:a},this.getCustomWidth(),{onClick:this.handlePositionerDirectClick}),x.default.createElement(M.default,null,x.default.createElement(s,null),x.default.createElement(T.default,{hasHeader:u,hasFooter:d},x.default.createElement(p,null),i,x.default.createElement(c,null)),x.default.createElement(f,null))))}}]),t}(b.PureComponent);z.propTypes={isOpen:b.PropTypes.bool,header:b.PropTypes.node,children:b.PropTypes.node,footer:b.PropTypes.node,width:b.PropTypes.oneOfType([b.PropTypes.number,b.PropTypes.string,b.PropTypes.oneOf(j.WIDTH_ENUM.values)]),onDialogDismissed:b.PropTypes.func},z.defaultProps={isOpen:!1,onDialogDismissed:function(){},width:j.WIDTH_ENUM.defaultValue},t.default=z},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t){e.exports=i},function(e,t){e.exports=l},function(e,t){e.exports=o},function(e,t){e.exports=a},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),l=r(i),o=(0,l.default)(["\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ",";\n"],["\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ",";\n"]),a=n(13),u=r(a),d=n(14);t.default=u.default.div(o,d.akZIndexBlanket)},function(e,t){e.exports=u},function(e,t){e.exports=d},function(e,t){e.exports=s},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),l=r(i),o=(0,l.default)(["\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ","px);\n  margin: 0 auto;\n  margin-top: ","px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ","px);\n  position: relative;\n  width: ","px;\n  z-index: ",";\n"],["\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ","px);\n  margin: 0 auto;\n  margin-top: ","px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ","px);\n  position: relative;\n  width: ","px;\n  z-index: ",";\n"]),a=n(13),u=r(a),d=n(14),s=n(16),f=7.5*d.akGridSizeUnitless,p=2*f,c=function(e){var t=e.width;return s.WIDTH_ENUM.widths[t]};t.default=u.default.div(o,p,f,p,c,d.akZIndexModal)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.WIDTH_ENUM=t.modalBorderRadius=t.modalShadowInnerSize=void 0;var r=n(14);t.modalShadowInnerSize=2,t.modalBorderRadius=r.akGridSizeUnitless/2,t.WIDTH_ENUM={values:["small","medium","large","x-large"],widths:{small:50*r.akGridSizeUnitless,medium:75*r.akGridSizeUnitless,large:100*r.akGridSizeUnitless,"x-large":121*r.akGridSizeUnitless},defaultValue:"medium"}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),l=r(i),o=(0,l.default)(["\n  background-color: ",";\n  border-radius: ","px;\n  display: flex;\n  flex-direction: column;\n  max-height: inherit;\n"],["\n  background-color: ",";\n  border-radius: ","px;\n  display: flex;\n  flex-direction: column;\n  max-height: inherit;\n"]),a=n(13),u=r(a),d=n(14);t.default=u.default.div(o,d.akColorN0,d.akGridSizeUnitless/2)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),l=r(i),o=(0,l.default)(["\n  flex: 0 0 auto;\n  padding: ","px;\n\n  ","\n"],["\n  flex: 0 0 auto;\n  padding: ","px;\n\n  ","\n"]),a=n(13),u=r(a),d=n(14),s=n(16),f=function(e){var t=e.headerOrFooter,n="header"===t?s.modalBorderRadius:0,r="footer"===t?s.modalBorderRadius:0;return"\n    border-top-left-radius: "+n+";\n    border-top-right-radius: "+n+";\n    border-bottom-left-radius: "+r+";\n    border-bottom-right-radius: "+r+";\n  "};t.default=u.default.div(o,2*d.akGridSizeUnitless,f)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),l=r(i),o=(0,l.default)(["\n  box-shadow: ",";\n  flex: 0 1 auto;\n  overflow-y: auto;\n  padding: 0 ","px;\n  position: relative;\n"],["\n  box-shadow: ",";\n  flex: 0 1 auto;\n  overflow-y: auto;\n  padding: 0 ","px;\n  position: relative;\n"]),a=n(13),u=r(a),d=n(14),s=n(16),f=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return"inset 0px "+s.modalShadowInnerSize*e+"px 0px 0px "+d.akColorN30},p=function(e){var t=e.hasHeader,n=e.hasFooter;return t&&n?f()+", "+f(-1):t?f():t?f(-1):"none"};t.default=u.default.div(o,p,2*d.akGridSizeUnitless)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),l=r(i),o=(0,l.default)(["\n  background: ",';\n  content: "";\n  display: block;\n  height: ',"px;\n\n  ","\n"],["\n  background: ",';\n  content: "";\n  display: block;\n  height: ',"px;\n\n  ","\n"]),a=n(13),u=r(a),d=n(14),s=n(16),f=function(e){var t=e.headerOrFooter;return"header"===t?"\n      left: 0;\n      position: absolute;\n      top: 0;\n      right: 0;\n    ":"footer"===t?"\n      margin: 0 "+d.akGridSizeUnitless*-2+"px;\n    ":null};t.default=u.default.div(o,d.akColorN0,s.modalShadowInnerSize,f)}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/helpers/extends"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("@atlaskit/blanket"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles")):"function"==typeof define&&define.amd?define(["babel-runtime/helpers/extends","babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","react","@atlaskit/blanket","babel-runtime/helpers/taggedTemplateLiteral","styled-components","@atlaskit/util-shared-styles"],t):"object"==typeof exports?exports["@atlaskit/modalDialog"]=t(require("babel-runtime/helpers/extends"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("@atlaskit/blanket"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles")):e["@atlaskit/modalDialog"]=t(e["babel-runtime/helpers/extends"],e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.react,e["@atlaskit/blanket"],e["babel-runtime/helpers/taggedTemplateLiteral"],e["styled-components"],e["@atlaskit/util-shared-styles"])}(this,function(e,t,n,r,i,o,a,l,u,s,d){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=n(2),o=r(i);t.default=o.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(3),o=r(i),a=n(4),l=r(a),u=n(5),s=r(u),d=n(6),p=r(d),c=n(7),f=r(c),h=n(8),m=r(h),b=n(9),x=r(b),y=n(10),g=r(y),v=n(11),k=r(v),_=n(15),w=r(_),M=n(17),C=r(M),O=n(18),P=r(O),E=n(19),D=r(E),T=n(20),q=r(T),S=n(16),j=function(e){function t(){var e,n,r,i;(0,s.default)(this,t);for(var o=arguments.length,a=Array(o),u=0;u<o;u++)a[u]=arguments[u];return n=r=(0,f.default)(this,(e=t.__proto__||(0,l.default)(t)).call.apply(e,[this].concat(a))),r.state={isAnimating:!1},r.componentDidMount=function(){document.addEventListener("keydown",r.handleKeyDown)},r.componentWillReceiveProps=function(e){r.props.isOpen!==e.isOpen&&r.setState({isAnimating:!0})},r.componentWillUnmount=function(){document.removeEventListener("keydown",r.handleKeyDown)},r.getCustomWidth=function(){return S.WIDTH_ENUM.values.indexOf(r.props.width)===-1?{style:{width:r.props.width}}:{}},r.dismissModal=function(e){r.props.isOpen&&r.props.onDialogDismissed(e)},r.handleAnimationEnd=function(){r.setState({isAnimating:!1})},r.handleKeyDown=function(e){var t=27;e.keyCode===t&&r.dismissModal(e)},r.handlePositionerDirectClick=function(e){var t=e.target;t&&t===r.modalPositionerRef&&r.dismissModal(e)},i=n,(0,f.default)(r,i)}return(0,m.default)(t,e),(0,p.default)(t,[{key:"render",value:function(){var e=this,t=this.props,n=t.header,r=t.isOpen,i=t.children,a=t.footer,l=t.width,u=!!n,s=!!a,d=function(){return u?x.default.createElement(P.default,{headerOrFooter:"header"},n):null},p=function(){return s?x.default.createElement(P.default,{headerOrFooter:"footer"},a):null},c=function(){return u?x.default.createElement(q.default,{headerOrFooter:"header"}):null},f=function(){return s?x.default.createElement(q.default,{headerOrFooter:"footer"}):null};return x.default.createElement(k.default,{isOpen:r},x.default.createElement(g.default,{canClickThrough:!r,isTinted:r,onBlanketClicked:this.dismissModal}),this.state.isAnimating||r?x.default.createElement(w.default,(0,o.default)({innerRef:function(t){e.modalPositionerRef=t},isOpen:r,width:l},this.getCustomWidth(),{onAnimationEnd:this.handleAnimationEnd,onClick:this.handlePositionerDirectClick}),x.default.createElement(C.default,null,x.default.createElement(d,null),x.default.createElement(D.default,{hasHeader:u,hasFooter:s},x.default.createElement(c,null),i,x.default.createElement(f,null)),x.default.createElement(p,null))):null)}}]),t}(b.PureComponent);j.propTypes={isOpen:b.PropTypes.bool,header:b.PropTypes.node,children:b.PropTypes.node,footer:b.PropTypes.node,width:b.PropTypes.oneOfType([b.PropTypes.number,b.PropTypes.string,b.PropTypes.oneOf(S.WIDTH_ENUM.values)]),onDialogDismissed:b.PropTypes.func},j.defaultProps={isOpen:!1,onDialogDismissed:function(){},width:S.WIDTH_ENUM.defaultValue},t.default=j},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t){e.exports=i},function(e,t){e.exports=o},function(e,t){e.exports=a},function(e,t){e.exports=l},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.getPointerEvents=void 0;var i=n(12),o=r(i),a=(0,o.default)(["\n  height: 100%;\n  left: 0;\n  pointer-events: ",";\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ",";\n"],["\n  height: 100%;\n  left: 0;\n  pointer-events: ",";\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: ",";\n"]),l=n(13),u=r(l),s=n(14),d=t.getPointerEvents=function(e){var t=e.isOpen;return t?"initial":"none"};t.default=u.default.div(a,d,s.akZIndexBlanket)},function(e,t){e.exports=u},function(e,t){e.exports=s},function(e,t){e.exports=d},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),o=r(i),a=(0,o.default)(["\n    0% {\n      opacity: ",";\n      top: ","px;\n    }\n\n    50% {\n      opacity: ",";\n      top: ","px;\n    }\n\n    100% {\n      opacity: ",";\n      top: ","px;\n    }\n  "],["\n    0% {\n      opacity: ",";\n      top: ","px;\n    }\n\n    50% {\n      opacity: ",";\n      top: ","px;\n    }\n\n    100% {\n      opacity: ",";\n      top: ","px;\n    }\n  "]),l=(0,o.default)(["\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ","px);\n  margin: 0 auto;\n  margin-top: ","px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ","px);\n  position: relative;\n  width: ","px;\n  z-index: ",";\n\n  animation: "," ","s ease-in-out;\n"],["\n  display: flex;\n  flex-direction: column;\n  height: calc(100% - ","px);\n  margin: 0 auto;\n  margin-top: ","px;\n  max-height: calc(100% - 1px);\n  max-width: calc(100% - ","px);\n  position: relative;\n  width: ","px;\n  z-index: ",";\n\n  animation: "," ","s ease-in-out;\n"]),u=n(13),s=r(u),d=n(14),p=n(16),c=7.5*d.akGridSizeUnitless,f=2*c,h=d.akGridSizeUnitless*-2,m=function(e){var t=e.width;return p.WIDTH_ENUM.widths[t]},b=function(e){var t=e.isOpen,n=t?h:0,r=t?.5*d.akGridSizeUnitless:.6*h,i=t?0:h,o=t?0:1,l=t?.8:.2,s=t?1:0;return(0,u.keyframes)(a,o,n,l,r,s,i)};t.default=s.default.div(l,f,c,f,m,d.akZIndexModal,b,p.modalAnimationDuration)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.modalAnimationDuration=t.WIDTH_ENUM=t.modalBorderRadius=t.modalShadowInnerSize=void 0;var r=n(14);t.modalShadowInnerSize=2,t.modalBorderRadius=r.akGridSizeUnitless/2,t.WIDTH_ENUM={values:["small","medium","large","x-large"],widths:{small:50*r.akGridSizeUnitless,medium:75*r.akGridSizeUnitless,large:100*r.akGridSizeUnitless,"x-large":121*r.akGridSizeUnitless},defaultValue:"medium"},t.modalAnimationDuration=.25},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),o=r(i),a=(0,o.default)(["\n  background-color: ",";\n  border-radius: ","px;\n  display: flex;\n  flex-direction: column;\n  max-height: inherit;\n"],["\n  background-color: ",";\n  border-radius: ","px;\n  display: flex;\n  flex-direction: column;\n  max-height: inherit;\n"]),l=n(13),u=r(l),s=n(14);t.default=u.default.div(a,s.akColorN0,s.akGridSizeUnitless/2)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),o=r(i),a=(0,o.default)(["\n  flex: 0 0 auto;\n  padding: ","px;\n\n  ","\n"],["\n  flex: 0 0 auto;\n  padding: ","px;\n\n  ","\n"]),l=n(13),u=r(l),s=n(14),d=n(16),p=function(e){var t=e.headerOrFooter,n="header"===t?d.modalBorderRadius:0,r="footer"===t?d.modalBorderRadius:0;return"\n    border-top-left-radius: "+n+";\n    border-top-right-radius: "+n+";\n    border-bottom-left-radius: "+r+";\n    border-bottom-right-radius: "+r+";\n  "};t.default=u.default.div(a,2*s.akGridSizeUnitless,p)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),o=r(i),a=(0,o.default)(["\n  box-shadow: ",";\n  flex: 0 1 auto;\n  overflow-y: auto;\n  padding: 0 ","px;\n  position: relative;\n"],["\n  box-shadow: ",";\n  flex: 0 1 auto;\n  overflow-y: auto;\n  padding: 0 ","px;\n  position: relative;\n"]),l=n(13),u=r(l),s=n(14),d=n(16),p=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return"inset 0px "+d.modalShadowInnerSize*e+"px 0px 0px "+s.akColorN30},c=function(e){var t=e.hasHeader,n=e.hasFooter;return t&&n?p()+", "+p(-1):t?p():t?p(-1):"none"};t.default=u.default.div(a,c,2*s.akGridSizeUnitless)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),o=r(i),a=(0,o.default)(["\n  background: ",';\n  content: "";\n  display: block;\n  height: ',"px;\n\n  ","\n"],["\n  background: ",';\n  content: "";\n  display: block;\n  height: ',"px;\n\n  ","\n"]),l=n(13),u=r(l),s=n(14),d=n(16),p=function(e){var t=e.headerOrFooter;return"header"===t?"\n      left: 0;\n      position: absolute;\n      top: 0;\n      right: 0;\n    ":"footer"===t?"\n      margin: 0 "+s.akGridSizeUnitless*-2+"px;\n    ":null};t.default=u.default.div(a,s.akColorN0,d.modalShadowInnerSize,p)}])});

package.json

 {
   "name": "@atlaskit/modal-dialog",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "config": {
@@ -5,0 +5,0 @@ "access": "public"

README.md

@@ -14,3 +14,3 @@ [![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://atlaskit.atlassian.com)
 
-Interact with a [live demo of the @atlaskit/modal-dialog component](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/modal-dialog/2.0.0/).
+Interact with a [live demo of the @atlaskit/modal-dialog component](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/modal-dialog/2.1.0/).
 
@@ -17,0 +17,0 @@ ## Installation

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78188

increased by10.69%

Lines of code

790

increased by7.92%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes