chore(dep): bump @atlaskit/modal-dialog 6.0.12 to 7.1.2

The package now requires using a ModalTransition component to handle animations. The existing DialogContainer component has been split into native and web implementations to support this change.
2018-12-20 20:01:27 -08:00 · 2018-12-20 20:01:27 -08:00 · 8b399e8caf
parent 6b68fba220
commit 8b399e8caf
8 changed files with 129 additions and 104 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -5,10 +5,12 @@
  "requires": true,
  "dependencies": {
    "@atlaskit/analytics-next": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@atlaskit/analytics-next/-/analytics-next-3.0.7.tgz",
-      "integrity": "sha512-osUW2nntOjVKvJBQx2JE21cZ5H13mk8drQkSNw1KJWhV8bDIjZLuDBGqUI6kKbE+M0dGZP4se8YcwILcx1Vdaw==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@atlaskit/analytics-next/-/analytics-next-3.1.2.tgz",
+      "integrity": "sha512-bkYDvl3Ojsnim+bsc9BALfvOjiL7xdb2rTp/4yqUP9pfidtf5HudbOJ849+dKcRCmk/rFbfB/nhDBRU6rv1Ueg==",
      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "babel-runtime": "^6.26.0",
        "prop-types": "^15.5.10"
      }
    },
@ -53,12 +55,24 @@
      }
    },
    "@atlaskit/blanket": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@atlaskit/blanket/-/blanket-7.0.7.tgz",
-      "integrity": "sha512-e2tyj0bBPMVk4ORCGxOXZx4PhDuWXctKkq+aKWeUy6bHFIpNp+r227JAp+MGt4dBj80JFATJXT0SUtxTdLqpTA==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@atlaskit/blanket/-/blanket-7.0.12.tgz",
+      "integrity": "sha512-IWnXU2N42M14kvTU1YhATiK7vGYPZPsk/c2A+b8tNhRJTcfcTxTPMfcmGOvWYPD128el2TSly4uOvn9B9WKc9A==",
      "requires": {
-        "@atlaskit/analytics-next": "^3.0.6",
-        "@atlaskit/theme": "^6.0.2"
+        "@atlaskit/analytics-next": "^3.1.2",
+        "@atlaskit/theme": "^7.0.1",
+        "@babel/runtime": "^7.0.0"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-7.0.1.tgz",
+          "integrity": "sha512-wxXDnkUablJketNCrQuNUuazufYEA7kv0Y6Yzv6uvqfuyNpWUQt4H1psz/MW8DbZmCdku9dEYbNVK3nFP5TDGg==",
+          "requires": {
+            "@babel/runtime": "^7.0.0",
+            "prop-types": "^15.5.10"
+          }
+        }
      }
    },
    "@atlaskit/button": {
@ -779,98 +793,44 @@
      }
    },
    "@atlaskit/modal-dialog": {
-      "version": "6.0.12",
-      "resolved": "https://registry.npmjs.org/@atlaskit/modal-dialog/-/modal-dialog-6.0.12.tgz",
-      "integrity": "sha512-/64iftFdwTCcizNoGHw1PsIbKkEn0wE0ziMYnEc3IetBZWfJPOzW1SlyuulNGdJl8ZzMVrf9fTt4qMKAUHVbbw==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@atlaskit/modal-dialog/-/modal-dialog-7.1.2.tgz",
+      "integrity": "sha512-rY8ojmtr0/9MxqQ8Ab9mtgv1VLRuJMNPCCbstjJzv+NLBu5tIh/on+iuzsxBL84E5hgrvg0wf7JHzKyOoQJQsw==",
      "requires": {
-        "@atlaskit/analytics-next": "^3.0.6",
-        "@atlaskit/blanket": "^7.0.7",
-        "@atlaskit/button": "^9.0.8",
-        "@atlaskit/icon": "^13.6.1",
-        "@atlaskit/layer-manager": "^5.0.9",
-        "@atlaskit/theme": "^6.0.2",
+        "@atlaskit/analytics-next": "^3.1.2",
+        "@atlaskit/blanket": "^7.0.12",
+        "@atlaskit/button": "^10.1.1",
+        "@atlaskit/icon": "^15.0.2",
+        "@atlaskit/portal": "^0.0.17",
+        "@atlaskit/theme": "^7.0.1",
+        "@babel/runtime": "^7.0.0",
+        "exenv": "^1.2.2",
        "prop-types": "^15.5.10",
        "raf-schd": "^2.1.0",
        "react-focus-lock": "^1.11.3",
-        "react-scrolllock": "^3.0.1",
-        "react-transition-group": "^2.2.1"
+        "react-scrolllock": "^3.0.2",
+        "react-transition-group": "^2.2.1",
+        "tiny-invariant": "^0.0.3"
      },
      "dependencies": {
-        "@atlaskit/button": {
-          "version": "9.0.16",
-          "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-9.0.16.tgz",
-          "integrity": "sha512-VFk7Qyp+IM2AxsPseHubrqU4ORq5BQPRDafWHVFqg/yf2AzKU1sDavRIX8jQfchnu5rBdBgmQjffX5cArzCawg==",
+        "@atlaskit/icon": {
+          "version": "15.0.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-15.0.3.tgz",
+          "integrity": "sha512-UAf7U0/+5giS2uMlOeVMYmhuWD4fQy0eRcp7r8oEDBqZXNH0yIuHrfu1bPgt2SbFotrjxZdPpOX1i1dXEu7y6g==",
          "requires": {
-            "@atlaskit/analytics-next": "^3.0.10",
-            "@atlaskit/spinner": "9.0.10",
-            "@atlaskit/theme": "^6.1.1",
-            "@babel/runtime": "^7.0.0",
-            "babel-runtime": "^6.26.0"
-          },
-          "dependencies": {
-            "@atlaskit/analytics-next": {
-              "version": "3.1.2",
-              "resolved": "https://registry.npmjs.org/@atlaskit/analytics-next/-/analytics-next-3.1.2.tgz",
-              "integrity": "sha512-bkYDvl3Ojsnim+bsc9BALfvOjiL7xdb2rTp/4yqUP9pfidtf5HudbOJ849+dKcRCmk/rFbfB/nhDBRU6rv1Ueg==",
-              "requires": {
-                "@babel/runtime": "^7.0.0",
-                "babel-runtime": "^6.26.0",
-                "prop-types": "^15.5.10"
-              }
-            },
-            "@atlaskit/theme": {
-              "version": "6.2.1",
-              "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.2.1.tgz",
-              "integrity": "sha512-6u0OxpnZ2n+G7Wc1wckgtOEiYl3wmJ2HvBd28N7d+Fi/fbi+C4TzfBvyeENUqtrp1UIEhweVbB2WLoVoKA5c/w==",
-              "requires": {
-                "@babel/runtime": "^7.0.0",
-                "prop-types": "^15.5.10"
-              }
-            }
-          }
-        },
-        "@atlaskit/spinner": {
-          "version": "9.0.10",
-          "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-9.0.10.tgz",
-          "integrity": "sha512-1akBXR6uC/cRWzwGPF4IfS7YpCsHdlncvo98p4W9ZGRn822SBQk9hiZBL0BfvkEFViAakPV7JZ5zZKc75UExhA==",
-          "requires": {
-            "@atlaskit/theme": "^6.1.1",
+            "@atlaskit/theme": "^7.0.1",
            "@babel/runtime": "^7.0.0",
            "babel-runtime": "^6.26.0",
-            "react-transition-group": "^2.2.1"
-          },
-          "dependencies": {
-            "@atlaskit/theme": {
-              "version": "6.2.1",
-              "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-6.2.1.tgz",
-              "integrity": "sha512-6u0OxpnZ2n+G7Wc1wckgtOEiYl3wmJ2HvBd28N7d+Fi/fbi+C4TzfBvyeENUqtrp1UIEhweVbB2WLoVoKA5c/w==",
-              "requires": {
-                "@babel/runtime": "^7.0.0",
-                "prop-types": "^15.5.10"
-              }
-            }
+            "uuid": "^3.1.0"
          }
        },
-        "react-transition-group": {
-          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
-          "integrity": "sha512-Xv5d55NkJUxUzLCImGSanK8Cl/30sgpOEMGc5m86t8+kZwrPxPCPcFqyx83kkr+5Lz5gs6djuvE5By+gce+VjA==",
+        "@atlaskit/theme": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-7.0.1.tgz",
+          "integrity": "sha512-wxXDnkUablJketNCrQuNUuazufYEA7kv0Y6Yzv6uvqfuyNpWUQt4H1psz/MW8DbZmCdku9dEYbNVK3nFP5TDGg==",
          "requires": {
-            "dom-helpers": "^3.3.1",
-            "loose-envify": "^1.3.1",
-            "prop-types": "^15.6.2",
-            "react-lifecycles-compat": "^3.0.4"
-          },
-          "dependencies": {
-            "prop-types": {
-              "version": "15.6.2",
-              "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
-              "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
-              "requires": {
-                "loose-envify": "^1.3.1",
-                "object-assign": "^4.1.1"
-              }
-            }
+            "@babel/runtime": "^7.0.0",
+            "prop-types": "^15.5.10"
          }
        }
      }
@ -924,6 +884,17 @@
        "react-popper": "1.0.2"
      }
    },
+    "@atlaskit/portal": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@atlaskit/portal/-/portal-0.0.17.tgz",
+      "integrity": "sha512-nn7b0xd1f/zHaAVCl18vmInPS5/P3zJyDP5pVBeH6Lg4Xo60BR1SDOca9EzKqvxs0FFE84HWcjpWSBRxHZ5sHw==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "babel-runtime": "^6.26.0",
+        "exenv": "^1.2.2",
+        "tiny-invariant": "^0.0.3"
+      }
+    },
    "@atlaskit/spinner": {
      "version": "9.0.13",
      "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-9.0.13.tgz",
--- a/package.json
+++ b/package.json
@ -27,7 +27,7 @@
    "@atlaskit/inline-message": "7.0.10",
    "@atlaskit/layer-manager": "5.0.19",
    "@atlaskit/lozenge": "6.2.4",
-    "@atlaskit/modal-dialog": "6.0.12",
+    "@atlaskit/modal-dialog": "7.1.2",
    "@atlaskit/multi-select": "11.0.13",
    "@atlaskit/spinner": "9.0.13",
    "@atlaskit/tabs": "8.0.11",
--- a/react/features/base/dialog/components/AbstractDialogContainer.js
+++ b/react/features/base/dialog/components/AbstractDialogContainer.js
@ -1,7 +1,6 @@
 /* @flow */

 import React, { Component } from 'react';
-import { connect } from 'react-redux';

 /**
 * The type of the React {@code Component} props of {@link DialogContainer}.
@ -25,18 +24,16 @@ type Props = {
 };

 /**
- * Implements a DialogContainer responsible for showing all dialogs. We will
- * need a separate container so we can handle multiple dialogs by showing them
- * simultaneously or queuing them.
+ * Implements a DialogContainer responsible for showing all dialogs.
 */
-export class DialogContainer extends Component<Props> {
+export default class AbstractDialogContainer extends Component<Props> {
    /**
-     * Implements React's {@link Component#render()}.
+     * Returns the dialog to be displayed.
     *
-     * @inheritdoc
-     * @returns {ReactElement}
+     * @private
+     * @returns {ReactElement|null}
     */
-    render() {
+    _renderDialogContent() {
        const {
            _component: component,
            _reducedUI: reducedUI
@ -50,8 +47,8 @@ export class DialogContainer extends Component<Props> {
 }

 /**
- * Maps (parts of) the redux state to the associated {@code DialogContainer}'s
- * props.
+ * Maps (parts of) the redux state to the associated
+ * {@code AbstractDialogContainer}'s props.
 *
 * @param {Object} state - The redux state.
 * @private
@ -61,7 +58,7 @@ export class DialogContainer extends Component<Props> {
 *     _reducedUI: boolean
 * }}
 */
-function _mapStateToProps(state) {
+export function abstractMapStateToProps(state: Object) {
    const stateFeaturesBaseDialog = state['features/base/dialog'];
    const { reducedUI } = state['features/base/responsive-ui'];

@ -71,5 +68,3 @@ function _mapStateToProps(state) {
        _reducedUI: reducedUI
    };
 }
-
-export default connect(_mapStateToProps)(DialogContainer);
--- a/react/features/base/dialog/components/index.js
+++ b/react/features/base/dialog/components/index.js
@ -2,5 +2,4 @@

 export * from './_';

-export { default as DialogContainer } from './DialogContainer';
 export { default as DialogContent } from './DialogContent';
--- a/react/features/base/dialog/components/native/DialogContainer.js
+++ b/react/features/base/dialog/components/native/DialogContainer.js
@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+
+import AbstractDialogContainer, {
+    abstractMapStateToProps
+} from '../AbstractDialogContainer';
+
+/**
+ * Implements a DialogContainer responsible for showing all dialogs. We will
+ * need a separate container so we can handle multiple dialogs by showing them
+ * simultaneously or queueing them.
+ *
+ * @extends AbstractDialogContainer
+ */
+class DialogContainer extends AbstractDialogContainer {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return this._renderDialogContent();
+    }
+}
+
+export default connect(abstractMapStateToProps)(DialogContainer);
--- a/react/features/base/dialog/components/native/index.js
+++ b/react/features/base/dialog/components/native/index.js
@ -3,6 +3,7 @@
 export { default as BottomSheet } from './BottomSheet';
 export { default as ConfirmDialog } from './ConfirmDialog';
 export { default as CustomDialog } from './CustomDialog';
+export { default as DialogContainer } from './DialogContainer';
 export { default as InputDialog } from './InputDialog';
 export { default as CustomSubmitDialog } from './CustomSubmitDialog';

--- a/react/features/base/dialog/components/web/DialogContainer.js
+++ b/react/features/base/dialog/components/web/DialogContainer.js
@ -0,0 +1,32 @@
+import { ModalTransition } from '@atlaskit/modal-dialog';
+import React from 'react';
+import { connect } from 'react-redux';
+
+import AbstractDialogContainer, {
+    abstractMapStateToProps
+} from '../AbstractDialogContainer';
+
+/**
+ * Implements a DialogContainer responsible for showing all dialogs. Necessary
+ * for supporting @atlaskit's modal animations.
+ *
+ * @extends AbstractDialogContainer
+ */
+class DialogContainer extends AbstractDialogContainer {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <ModalTransition>
+                { this._renderDialogContent() }
+            </ModalTransition>
+        );
+    }
+}
+
+export default connect(abstractMapStateToProps)(DialogContainer);
+
--- a/react/features/base/dialog/components/web/index.js
+++ b/react/features/base/dialog/components/web/index.js
@ -3,5 +3,6 @@
 export { default as AbstractDialogTab } from './AbstractDialogTab';
 export type { Props as AbstractDialogTabProps } from './AbstractDialogTab';
 export { default as Dialog } from './Dialog';
+export { default as DialogContainer } from './DialogContainer';
 export { default as DialogWithTabs } from './DialogWithTabs';
 export { default as StatelessDialog } from './StatelessDialog';