@instructure/ui-overlays - npm Package Compare versions

Comparing version 5.16.0-rc.7 to 5.16.0-rc.8

es/components/Modal/index.js

@@ -47,3 +47,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes';
-import { omitProps, pickProps } from '@instructure/ui-utils/lib/react/passthroughProps';
+import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps';
 import createChainedFunction from '@instructure/ui-utils/lib/createChainedFunction';
@@ -113,3 +113,4 @@ import deprecated from '@instructure/ui-utils/lib/react/deprecated';
 
-    _this.handlePortalOpen = function () {
+    _this.handlePortalOpen = function (DOMNode) {
+      _this.applyTheme(DOMNode);
       _this._timeouts.push(setTimeout(function () {
@@ -189,9 +190,27 @@ if (_this._isMounted) {
       var _props = this.props,
+          label = _props.label,
+          closeButtonLabel = _props.closeButtonLabel,
+          children = _props.children,
+          size = _props.size,
+          open = _props.open,
+          onOpen = _props.onOpen,
+          onClose = _props.onClose,
+          onDismiss = _props.onDismiss,
+          contentRef = _props.contentRef,
+          closeButtonRef = _props.closeButtonRef,
+          mountNode = _props.mountNode,
+          insertAt = _props.insertAt,
+          liveRegion = _props.liveRegion,
+          transition = _props.transition,
+          onEnter = _props.onEnter,
+          onEntering = _props.onEntering,
+          onEntered = _props.onEntered,
+          onExit = _props.onExit,
+          onExiting = _props.onExiting,
+          onExited = _props.onExited,
+          defaultFocusElement = _props.defaultFocusElement,
+          shouldReturnFocus = _props.shouldReturnFocus,
           shouldCloseOnDocumentClick = _props.shouldCloseOnDocumentClick,
           shouldCloseOnOverlayClick = _props.shouldCloseOnOverlayClick,
-          children = _props.children,
-          contentRef = _props.contentRef,
-          onDismiss = _props.onDismiss,
-          size = _props.size,
-          props = _objectWithoutProperties(_props, ['shouldCloseOnDocumentClick', 'shouldCloseOnOverlayClick', 'children', 'contentRef', 'onDismiss', 'size']);
+          props = _objectWithoutProperties(_props, ['label', 'closeButtonLabel', 'children', 'size', 'open', 'onOpen', 'onClose', 'onDismiss', 'contentRef', 'closeButtonRef', 'mountNode', 'insertAt', 'liveRegion', 'transition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'defaultFocusElement', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'shouldCloseOnOverlayClick']);
 
@@ -202,3 +221,4 @@ var ie11 = Browser.msie && Browser.version > 10;
         Dialog,
-        Object.assign({}, omitProps(props, Modal.propTypes), pickProps(this.props, Dialog.propTypes), {
+        Object.assign({}, omitProps(props, Modal.propTypes), {
+          onDismiss: onDismiss,
           label: this.props.label,
@@ -209,2 +229,4 @@ defaultFocusElement: this.defaultFocusElement,
           shouldContainFocus: true,
+          shouldReturnFocus: shouldReturnFocus,
+          liveRegion: liveRegion,
           open: this.state.open,
@@ -225,15 +247,23 @@ className: classnames((_classnames = {}, _defineProperty(_classnames, styles.content, true), _defineProperty(_classnames, styles[size], true), _defineProperty(_classnames, styles.ie11, ie11), _classnames)),
         Portal,
-        Object.assign({}, pickProps(this.props, Portal.propTypes), {
-          open: this.props.open || this.state.transitioning,
-          onOpen: createChainedFunction(this.handlePortalOpen, this.props.onOpen)
-        }),
+        {
+          mountNode: mountNode,
+          insertAt: insertAt,
+          open: open || this.state.transitioning,
+          onOpen: createChainedFunction(this.handlePortalOpen, onOpen),
+          onClose: onClose
+        },
         React.createElement(
           Transition,
-          Object.assign({}, pickProps(this.props, Transition.propTypes), {
-            'in': this.props.open,
+          {
+            'in': open,
             transitionOnMount: true,
             unmountOnExit: true,
-            type: this.props.transition,
-            onExited: createChainedFunction(this.handleTransitionExited, this.props.onExited)
-          }),
+            type: transition,
+            onEnter: onEnter,
+            onEntering: onEntering,
+            onEntered: onEntered,
+            onExit: onExit,
+            onExiting: onExiting,
+            onExited: createChainedFunction(this.handleTransitionExited, onExited)
+          },
           size === 'fullscreen' ? React.createElement(
@@ -240,0 +270,0 @@ 'span',

es/components/Tray/index.js

 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _dec, _dec2, _dec3, _dec4, _class, _class2, _temp;
+var _dec, _dec2, _dec3, _dec4, _class, _class2, _temp2;
 
@@ -45,7 +45,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 import CloseButton from '@instructure/ui-buttons/lib/components/CloseButton';
+import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps';
 
-import { pickProps, omitProps } from '@instructure/ui-utils/lib/react/passthroughProps';
 import createChainedFunction from '@instructure/ui-utils/lib/createChainedFunction';
 import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes';
-import requestAnimationFrame from '@instructure/ui-utils/lib/dom/requestAnimationFrame';
 import deprecated from '@instructure/ui-utils/lib/react/deprecated';
@@ -56,2 +55,3 @@ import bidirectional from '@instructure/ui-i18n/lib/bidirectional';
 import Portal from '@instructure/ui-portal/lib/components/Portal';
+import { mirrorHorizontalPlacement } from '@instructure/ui-layout/lib/utils/mirrorPlacement';
 
@@ -101,56 +101,34 @@ import Transition from '@instructure/ui-motion/lib/components/Transition';
   applicationElement: true
-}), _dec3 = bidirectional(), _dec4 = themeable(theme, styles), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = (_temp = _class2 = function (_Component) {
+}), _dec3 = bidirectional(), _dec4 = themeable(theme, styles), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = (_temp2 = _class2 = function (_Component) {
   _inherits(Tray, _Component);
 
-  function Tray(props) {
-    _classCallCheck(this, Tray);
+  function Tray() {
+    var _ref;
 
-    var _this = _possibleConstructorReturn(this, (Tray.__proto__ || Object.getPrototypeOf(Tray)).call(this, props));
+    var _temp, _this, _ret;
 
-    _this._raf = [];
+    _classCallCheck(this, Tray);
 
-    _this.handlePortalOpen = function () {
-      _this._raf.push(requestAnimationFrame(function () {
-        _this.setState({ portalOpen: true });
-      }));
-    };
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this.handleTransitionExited = function () {
-      _this.setState({
-        transitioning: false
-      });
-    };
-
-    _this.state = {
-      portalOpen: false,
-      transitioning: false,
-      dir: 'ltr'
-    };
-    return _this;
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tray.__proto__ || Object.getPrototypeOf(Tray)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      transitioning: false
+    }, _this.handleTransitionComplete = function () {
+      _this.setState({ transitioning: false });
+    }, _this.handlePortalOpen = function (DOMNode) {
+      // We apply the theme here because now we have a DOM node (provided by Portal)
+      _this.applyTheme(DOMNode);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Tray, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this._isMounted = true;
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (this.props.open && !nextProps.open) {
-        // closing
-        this.setState({
-          transitioning: true
-        });
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.open !== prevProps.open) {
+        this.setState({ transitioning: true });
       }
     }
   }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this._raf.forEach(function (request) {
-        return request.cancel();
-      });
-      this._raf = [];
-    }
-  }, {
     key: 'renderCloseButton',
@@ -178,51 +156,91 @@ value: function renderCloseButton() {
   }, {
+    key: 'renderContent',
+    value: function renderContent() {
+      return React.createElement(
+        'div',
+        null,
+        this.renderCloseButton(),
+        this.props.children
+      );
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _classnames,
-          _this3 = this;
+      var _classnames;
 
       var _props = this.props,
+          label = _props.label,
+          closeButtonLabel = _props.closeButtonLabel,
           children = _props.children,
+          size = _props.size,
+          placement = _props.placement,
+          open = _props.open,
+          defaultFocusElement = _props.defaultFocusElement,
           contentRef = _props.contentRef,
-          open = _props.open,
+          closeButtonRef = _props.closeButtonRef,
+          shouldContainFocus = _props.shouldContainFocus,
+          shouldReturnFocus = _props.shouldReturnFocus,
+          shouldCloseOnDocumentClick = _props.shouldCloseOnDocumentClick,
           onOpen = _props.onOpen,
-          props = _objectWithoutProperties(_props, ['children', 'contentRef', 'open', 'onOpen']);
+          onClose = _props.onClose,
+          onDismiss = _props.onDismiss,
+          mountNode = _props.mountNode,
+          insertAt = _props.insertAt,
+          liveRegion = _props.liveRegion,
+          onEnter = _props.onEnter,
+          onEntering = _props.onEntering,
+          onEntered = _props.onEntered,
+          onExit = _props.onExit,
+          onExiting = _props.onExiting,
+          onExited = _props.onExited,
+          onTransition = _props.onTransition,
+          closeButtonVariant = _props.closeButtonVariant,
+          border = _props.border,
+          shadow = _props.shadow,
+          props = _objectWithoutProperties(_props, ['label', 'closeButtonLabel', 'children', 'size', 'placement', 'open', 'defaultFocusElement', 'contentRef', 'closeButtonRef', 'shouldContainFocus', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'onOpen', 'onClose', 'onDismiss', 'mountNode', 'insertAt', 'liveRegion', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'onTransition', 'closeButtonVariant', 'border', 'shadow']);
 
       return React.createElement(
         Portal,
-        Object.assign({}, pickProps(props, Portal.propTypes), {
-          open: this.props.open || this.state.transitioning,
-          onOpen: createChainedFunction(this.handlePortalOpen, onOpen)
-        }),
+        {
+          open: open || this.state.transitioning,
+          onOpen: this.handlePortalOpen,
+          insertAt: insertAt,
+          mountNode: mountNode
+        },
         React.createElement(
           Transition,
-          Object.assign({}, pickProps(this.props, Transition.propTypes), {
-            'in': this.props.open,
+          {
+            'in': open,
+            type: this.transition,
+            onTransition: onTransition,
+            onEnter: onEnter,
+            onEntering: onEntering,
+            onEntered: createChainedFunction(this.handleTransitionComplete, onEntered, onOpen),
+            onExit: onExit,
+            onExiting: onExiting,
+            onExited: createChainedFunction(this.handleTransitionComplete, onExited, onClose),
             transitionOnMount: true,
-            transitionExit: true,
-            unmountOnExit: true,
-            type: this.transition,
-            onExited: createChainedFunction(this.handleTransitionExited, this.props.onExited)
-          }),
+            transitionEnter: true,
+            transitionExit: true
+          },
           React.createElement(
             'span',
-            Object.assign({}, omitProps(this.props, Tray.propTypes), {
-              className: classnames((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles.border, this.props.border), _defineProperty(_classnames, styles.shadow, this.props.shadow), _defineProperty(_classnames, styles[this.props.size], true), _defineProperty(_classnames, styles['placement--' + this.props.placement], true), _defineProperty(_classnames, this.props.className, this.props.className), _classnames)),
-              ref: function ref(el) {
-                _this3._content = el;
-
-                if (typeof contentRef === 'function') {
-                  contentRef(el);
-                }
-              }
+            Object.assign({}, omitProps(props, Tray.propTypes), {
+              className: classnames((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles.border, border), _defineProperty(_classnames, styles.shadow, shadow), _defineProperty(_classnames, styles[size], true), _defineProperty(_classnames, styles['placement--' + this.props.placement], true), _classnames)),
+              ref: contentRef
             }),
-            React.createElement(
+            this.state.transitioning ? this.renderContent() : React.createElement(
               Dialog,
-              Object.assign({}, pickProps(props, Dialog.propTypes), {
+              {
+                label: label,
                 defaultFocusElement: this.defaultFocusElement,
-                open: this.state.portalOpen || this.state.transitioning,
-                shouldCloseOnEscape: true
-              }),
-              this.renderCloseButton(),
-              children
+                open: true,
+                shouldContainFocus: shouldContainFocus,
+                shouldReturnFocus: shouldReturnFocus,
+                shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
+                shouldCloseOnEscape: true,
+                liveRegion: liveRegion,
+                onDismiss: onDismiss
+              },
+              this.renderContent()
             )
@@ -234,23 +252,35 @@ )
   }, {
-    key: 'transition',
+    key: 'placement',
     get: function get() {
-      var _classnames2;
+      var placement = this.props.placement;
 
-      var _props2 = this.props,
-          placement = _props2.placement,
-          open = _props2.open;
-
-
-      return classnames((_classnames2 = {
-        'slide-down': placement === 'top' && open || placement === 'bottom' && !open,
-        'slide-up': placement === 'bottom' && open || placement === 'top' && !open
-      }, _defineProperty(_classnames2, 'slide-' + (this.dir === 'rtl' ? 'right' : 'left'), placement === 'start' && !open || placement === 'end' && open), _defineProperty(_classnames2, 'slide-' + (this.dir === 'rtl' ? 'left' : 'right'), placement === 'end' && !open || placement === 'start' && open), _classnames2));
+      return this.rtl ? mirrorHorizontalPlacement(placement, ' ') : placement;
     }
   }, {
+    key: 'direction',
+    get: function get() {
+      switch (this.placement) {
+        case 'top':
+          return 'up';
+        case 'bottom':
+          return 'down';
+        case 'end':
+          return 'right';
+        default:
+          // start
+          return 'left';
+      }
+    }
+  }, {
+    key: 'transition',
+    get: function get() {
+      return 'slide-' + this.direction;
+    }
+  }, {
     key: 'defaultFocusElement',
     get: function get() {
-      var _this4 = this;
+      var _this3 = this;
 
       return this.props.defaultFocusElement || function () {
-        return _this4._closeButton;
+        return _this3._closeButton;
       };
@@ -279,3 +309,3 @@ }
   /**
-  * Placment to determine where the `<Tray />` should display in the viewport
+  * Placement to determine where the `<Tray />` should display in the viewport
   */
@@ -353,2 +383,6 @@ placement: PropTypes.oneOf(['top', 'bottom', 'start', 'end']),
   /**
+   * Callback fired when the <Tray /> transitions in/out
+   */
+  onTransition: PropTypes.func,
+  /**
    * Callback fired before the <Tray /> transitions in
@@ -413,5 +447,5 @@ */
   children: null
-}, _temp)) || _class) || _class) || _class) || _class);
+}, _temp2)) || _class) || _class) || _class) || _class);
 
 
 export default Tray;

lib/components/Modal/index.js

@@ -185,3 +185,4 @@ 'use strict';
 
-    _this.handlePortalOpen = function () {
+    _this.handlePortalOpen = function (DOMNode) {
+      _this.applyTheme(DOMNode);
       _this._timeouts.push(setTimeout(function () {
@@ -261,9 +262,27 @@ if (_this._isMounted) {
       var _props = this.props,
+          label = _props.label,
+          closeButtonLabel = _props.closeButtonLabel,
+          children = _props.children,
+          size = _props.size,
+          open = _props.open,
+          onOpen = _props.onOpen,
+          onClose = _props.onClose,
+          onDismiss = _props.onDismiss,
+          contentRef = _props.contentRef,
+          closeButtonRef = _props.closeButtonRef,
+          mountNode = _props.mountNode,
+          insertAt = _props.insertAt,
+          liveRegion = _props.liveRegion,
+          transition = _props.transition,
+          onEnter = _props.onEnter,
+          onEntering = _props.onEntering,
+          onEntered = _props.onEntered,
+          onExit = _props.onExit,
+          onExiting = _props.onExiting,
+          onExited = _props.onExited,
+          defaultFocusElement = _props.defaultFocusElement,
+          shouldReturnFocus = _props.shouldReturnFocus,
           shouldCloseOnDocumentClick = _props.shouldCloseOnDocumentClick,
           shouldCloseOnOverlayClick = _props.shouldCloseOnOverlayClick,
-          children = _props.children,
-          contentRef = _props.contentRef,
-          onDismiss = _props.onDismiss,
-          size = _props.size,
-          props = _objectWithoutProperties(_props, ['shouldCloseOnDocumentClick', 'shouldCloseOnOverlayClick', 'children', 'contentRef', 'onDismiss', 'size']);
+          props = _objectWithoutProperties(_props, ['label', 'closeButtonLabel', 'children', 'size', 'open', 'onOpen', 'onClose', 'onDismiss', 'contentRef', 'closeButtonRef', 'mountNode', 'insertAt', 'liveRegion', 'transition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'defaultFocusElement', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'shouldCloseOnOverlayClick']);
 
@@ -274,3 +293,4 @@ var ie11 = _Browser2.default.msie && _Browser2.default.version > 10;
         _Dialog2.default,
-        Object.assign({}, (0, _passthroughProps.omitProps)(props, Modal.propTypes), (0, _passthroughProps.pickProps)(this.props, _Dialog2.default.propTypes), {
+        Object.assign({}, (0, _passthroughProps.omitProps)(props, Modal.propTypes), {
+          onDismiss: onDismiss,
           label: this.props.label,
@@ -281,2 +301,4 @@ defaultFocusElement: this.defaultFocusElement,
           shouldContainFocus: true,
+          shouldReturnFocus: shouldReturnFocus,
+          liveRegion: liveRegion,
           open: this.state.open,
@@ -297,15 +319,23 @@ className: (0, _classnames3.default)((_classnames = {}, _defineProperty(_classnames, styles.content, true), _defineProperty(_classnames, styles[size], true), _defineProperty(_classnames, styles.ie11, ie11), _classnames)),
         _Portal2.default,
-        Object.assign({}, (0, _passthroughProps.pickProps)(this.props, _Portal2.default.propTypes), {
-          open: this.props.open || this.state.transitioning,
-          onOpen: (0, _createChainedFunction2.default)(this.handlePortalOpen, this.props.onOpen)
-        }),
+        {
+          mountNode: mountNode,
+          insertAt: insertAt,
+          open: open || this.state.transitioning,
+          onOpen: (0, _createChainedFunction2.default)(this.handlePortalOpen, onOpen),
+          onClose: onClose
+        },
         _react2.default.createElement(
           _Transition2.default,
-          Object.assign({}, (0, _passthroughProps.pickProps)(this.props, _Transition2.default.propTypes), {
-            'in': this.props.open,
+          {
+            'in': open,
             transitionOnMount: true,
             unmountOnExit: true,
-            type: this.props.transition,
-            onExited: (0, _createChainedFunction2.default)(this.handleTransitionExited, this.props.onExited)
-          }),
+            type: transition,
+            onEnter: onEnter,
+            onEntering: onEntering,
+            onEntered: onEntered,
+            onExit: onExit,
+            onExiting: onExiting,
+            onExited: (0, _createChainedFunction2.default)(this.handleTransitionExited, onExited)
+          },
           size === 'fullscreen' ? _react2.default.createElement(
@@ -312,0 +342,0 @@ 'span',

lib/components/Tray/index.js

@@ -9,25 +9,25 @@ 'use strict';
 
-var _dec, _dec2, _dec3, _dec4, _class, _class2, _temp; /*
-                                                        * The MIT License (MIT)
-                                                        *
-                                                        * Copyright (c) 2015 - present Instructure, Inc.
-                                                        *
-                                                        * Permission is hereby granted, free of charge, to any person obtaining a copy
-                                                        * of this software and associated documentation files (the "Software"), to deal
-                                                        * in the Software without restriction, including without limitation the rights
-                                                        * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-                                                        * copies of the Software, and to permit persons to whom the Software is
-                                                        * furnished to do so, subject to the following conditions:
-                                                        *
-                                                        * The above copyright notice and this permission notice shall be included in all
-                                                        * copies or substantial portions of the Software.
-                                                        *
-                                                        * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-                                                        * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-                                                        * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-                                                        * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-                                                        * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-                                                        * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-                                                        * SOFTWARE.
-                                                        */
+var _dec, _dec2, _dec3, _dec4, _class, _class2, _temp2; /*
+                                                         * The MIT License (MIT)
+                                                         *
+                                                         * Copyright (c) 2015 - present Instructure, Inc.
+                                                         *
+                                                         * Permission is hereby granted, free of charge, to any person obtaining a copy
+                                                         * of this software and associated documentation files (the "Software"), to deal
+                                                         * in the Software without restriction, including without limitation the rights
+                                                         * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+                                                         * copies of the Software, and to permit persons to whom the Software is
+                                                         * furnished to do so, subject to the following conditions:
+                                                         *
+                                                         * The above copyright notice and this permission notice shall be included in all
+                                                         * copies or substantial portions of the Software.
+                                                         *
+                                                         * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+                                                         * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+                                                         * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+                                                         * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+                                                         * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+                                                         * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+                                                         * SOFTWARE.
+                                                         */
 
@@ -42,5 +42,5 @@ var _react = require('react');
 
-var _classnames3 = require('classnames');
+var _classnames2 = require('classnames');
 
-var _classnames4 = _interopRequireDefault(_classnames3);
+var _classnames3 = _interopRequireDefault(_classnames2);
 
@@ -65,6 +65,2 @@ var _Dialog = require('@instructure/ui-a11y/lib/components/Dialog');
 
-var _requestAnimationFrame = require('@instructure/ui-utils/lib/dom/requestAnimationFrame');
-
-var _requestAnimationFrame2 = _interopRequireDefault(_requestAnimationFrame);
-
 var _deprecated = require('@instructure/ui-utils/lib/react/deprecated');
@@ -86,2 +82,4 @@
 
+var _mirrorPlacement = require('@instructure/ui-layout/lib/utils/mirrorPlacement');
+
 var _Transition = require('@instructure/ui-motion/lib/components/Transition');
@@ -147,56 +145,34 @@
   applicationElement: true
-}), _dec3 = (0, _bidirectional2.default)(), _dec4 = (0, _uiThemeable2.default)(_theme2.default, styles), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = (_temp = _class2 = function (_Component) {
+}), _dec3 = (0, _bidirectional2.default)(), _dec4 = (0, _uiThemeable2.default)(_theme2.default, styles), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = (_temp2 = _class2 = function (_Component) {
   _inherits(Tray, _Component);
 
-  function Tray(props) {
-    _classCallCheck(this, Tray);
+  function Tray() {
+    var _ref;
 
-    var _this = _possibleConstructorReturn(this, (Tray.__proto__ || Object.getPrototypeOf(Tray)).call(this, props));
+    var _temp, _this, _ret;
 
-    _this._raf = [];
+    _classCallCheck(this, Tray);
 
-    _this.handlePortalOpen = function () {
-      _this._raf.push((0, _requestAnimationFrame2.default)(function () {
-        _this.setState({ portalOpen: true });
-      }));
-    };
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this.handleTransitionExited = function () {
-      _this.setState({
-        transitioning: false
-      });
-    };
-
-    _this.state = {
-      portalOpen: false,
-      transitioning: false,
-      dir: 'ltr'
-    };
-    return _this;
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tray.__proto__ || Object.getPrototypeOf(Tray)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      transitioning: false
+    }, _this.handleTransitionComplete = function () {
+      _this.setState({ transitioning: false });
+    }, _this.handlePortalOpen = function (DOMNode) {
+      // We apply the theme here because now we have a DOM node (provided by Portal)
+      _this.applyTheme(DOMNode);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Tray, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this._isMounted = true;
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (this.props.open && !nextProps.open) {
-        // closing
-        this.setState({
-          transitioning: true
-        });
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.open !== prevProps.open) {
+        this.setState({ transitioning: true });
       }
     }
   }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this._raf.forEach(function (request) {
-        return request.cancel();
-      });
-      this._raf = [];
-    }
-  }, {
     key: 'renderCloseButton',
@@ -224,51 +200,91 @@ value: function renderCloseButton() {
   }, {
+    key: 'renderContent',
+    value: function renderContent() {
+      return _react2.default.createElement(
+        'div',
+        null,
+        this.renderCloseButton(),
+        this.props.children
+      );
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _classnames,
-          _this3 = this;
+      var _classnames;
 
       var _props = this.props,
+          label = _props.label,
+          closeButtonLabel = _props.closeButtonLabel,
           children = _props.children,
+          size = _props.size,
+          placement = _props.placement,
+          open = _props.open,
+          defaultFocusElement = _props.defaultFocusElement,
           contentRef = _props.contentRef,
-          open = _props.open,
+          closeButtonRef = _props.closeButtonRef,
+          shouldContainFocus = _props.shouldContainFocus,
+          shouldReturnFocus = _props.shouldReturnFocus,
+          shouldCloseOnDocumentClick = _props.shouldCloseOnDocumentClick,
           onOpen = _props.onOpen,
-          props = _objectWithoutProperties(_props, ['children', 'contentRef', 'open', 'onOpen']);
+          onClose = _props.onClose,
+          onDismiss = _props.onDismiss,
+          mountNode = _props.mountNode,
+          insertAt = _props.insertAt,
+          liveRegion = _props.liveRegion,
+          onEnter = _props.onEnter,
+          onEntering = _props.onEntering,
+          onEntered = _props.onEntered,
+          onExit = _props.onExit,
+          onExiting = _props.onExiting,
+          onExited = _props.onExited,
+          onTransition = _props.onTransition,
+          closeButtonVariant = _props.closeButtonVariant,
+          border = _props.border,
+          shadow = _props.shadow,
+          props = _objectWithoutProperties(_props, ['label', 'closeButtonLabel', 'children', 'size', 'placement', 'open', 'defaultFocusElement', 'contentRef', 'closeButtonRef', 'shouldContainFocus', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'onOpen', 'onClose', 'onDismiss', 'mountNode', 'insertAt', 'liveRegion', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'onTransition', 'closeButtonVariant', 'border', 'shadow']);
 
       return _react2.default.createElement(
         _Portal2.default,
-        Object.assign({}, (0, _passthroughProps.pickProps)(props, _Portal2.default.propTypes), {
-          open: this.props.open || this.state.transitioning,
-          onOpen: (0, _createChainedFunction2.default)(this.handlePortalOpen, onOpen)
-        }),
+        {
+          open: open || this.state.transitioning,
+          onOpen: this.handlePortalOpen,
+          insertAt: insertAt,
+          mountNode: mountNode
+        },
         _react2.default.createElement(
           _Transition2.default,
-          Object.assign({}, (0, _passthroughProps.pickProps)(this.props, _Transition2.default.propTypes), {
-            'in': this.props.open,
+          {
+            'in': open,
+            type: this.transition,
+            onTransition: onTransition,
+            onEnter: onEnter,
+            onEntering: onEntering,
+            onEntered: (0, _createChainedFunction2.default)(this.handleTransitionComplete, onEntered, onOpen),
+            onExit: onExit,
+            onExiting: onExiting,
+            onExited: (0, _createChainedFunction2.default)(this.handleTransitionComplete, onExited, onClose),
             transitionOnMount: true,
-            transitionExit: true,
-            unmountOnExit: true,
-            type: this.transition,
-            onExited: (0, _createChainedFunction2.default)(this.handleTransitionExited, this.props.onExited)
-          }),
+            transitionEnter: true,
+            transitionExit: true
+          },
           _react2.default.createElement(
             'span',
-            Object.assign({}, (0, _passthroughProps.omitProps)(this.props, Tray.propTypes), {
-              className: (0, _classnames4.default)((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles.border, this.props.border), _defineProperty(_classnames, styles.shadow, this.props.shadow), _defineProperty(_classnames, styles[this.props.size], true), _defineProperty(_classnames, styles['placement--' + this.props.placement], true), _defineProperty(_classnames, this.props.className, this.props.className), _classnames)),
-              ref: function ref(el) {
-                _this3._content = el;
-
-                if (typeof contentRef === 'function') {
-                  contentRef(el);
-                }
-              }
+            Object.assign({}, (0, _passthroughProps.omitProps)(props, Tray.propTypes), {
+              className: (0, _classnames3.default)((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles.border, border), _defineProperty(_classnames, styles.shadow, shadow), _defineProperty(_classnames, styles[size], true), _defineProperty(_classnames, styles['placement--' + this.props.placement], true), _classnames)),
+              ref: contentRef
             }),
-            _react2.default.createElement(
+            this.state.transitioning ? this.renderContent() : _react2.default.createElement(
               _Dialog2.default,
-              Object.assign({}, (0, _passthroughProps.pickProps)(props, _Dialog2.default.propTypes), {
+              {
+                label: label,
                 defaultFocusElement: this.defaultFocusElement,
-                open: this.state.portalOpen || this.state.transitioning,
-                shouldCloseOnEscape: true
-              }),
-              this.renderCloseButton(),
-              children
+                open: true,
+                shouldContainFocus: shouldContainFocus,
+                shouldReturnFocus: shouldReturnFocus,
+                shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
+                shouldCloseOnEscape: true,
+                liveRegion: liveRegion,
+                onDismiss: onDismiss
+              },
+              this.renderContent()
             )
@@ -280,23 +296,35 @@ )
   }, {
-    key: 'transition',
+    key: 'placement',
     get: function get() {
-      var _classnames2;
+      var placement = this.props.placement;
 
-      var _props2 = this.props,
-          placement = _props2.placement,
-          open = _props2.open;
-
-
-      return (0, _classnames4.default)((_classnames2 = {
-        'slide-down': placement === 'top' && open || placement === 'bottom' && !open,
-        'slide-up': placement === 'bottom' && open || placement === 'top' && !open
-      }, _defineProperty(_classnames2, 'slide-' + (this.dir === 'rtl' ? 'right' : 'left'), placement === 'start' && !open || placement === 'end' && open), _defineProperty(_classnames2, 'slide-' + (this.dir === 'rtl' ? 'left' : 'right'), placement === 'end' && !open || placement === 'start' && open), _classnames2));
+      return this.rtl ? (0, _mirrorPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement;
     }
   }, {
+    key: 'direction',
+    get: function get() {
+      switch (this.placement) {
+        case 'top':
+          return 'up';
+        case 'bottom':
+          return 'down';
+        case 'end':
+          return 'right';
+        default:
+          // start
+          return 'left';
+      }
+    }
+  }, {
+    key: 'transition',
+    get: function get() {
+      return 'slide-' + this.direction;
+    }
+  }, {
     key: 'defaultFocusElement',
     get: function get() {
-      var _this4 = this;
+      var _this3 = this;
 
       return this.props.defaultFocusElement || function () {
-        return _this4._closeButton;
+        return _this3._closeButton;
       };
@@ -325,3 +353,3 @@ }
   /**
-  * Placment to determine where the `<Tray />` should display in the viewport
+  * Placement to determine where the `<Tray />` should display in the viewport
   */
@@ -399,2 +427,6 @@ placement: _propTypes2.default.oneOf(['top', 'bottom', 'start', 'end']),
   /**
+   * Callback fired when the <Tray /> transitions in/out
+   */
+  onTransition: _propTypes2.default.func,
+  /**
    * Callback fired before the <Tray /> transitions in
@@ -459,3 +491,3 @@ */
   children: null
-}, _temp)) || _class) || _class) || _class) || _class);
+}, _temp2)) || _class) || _class) || _class) || _class);
 exports.default = Tray;

package.json

 {
   "name": "@instructure/ui-overlays",
-  "version": "5.16.0-rc.7",
+  "version": "5.16.0-rc.8",
   "description": "A UI component library made by Instructure Inc.",
@@ -25,5 +25,5 @@ "author": "Instructure, Inc. Engineering and Product Design",
   "devDependencies": {
-    "@instructure/ui-presets": "^5.16.0-rc.7",
-    "@instructure/ui-testbed": "^5.16.0-rc.7",
-    "@instructure/ui-themes": "^5.16.0-rc.7",
+    "@instructure/ui-presets": "^5.16.0-rc.8",
+    "@instructure/ui-testbed": "^5.16.0-rc.8",
+    "@instructure/ui-themes": "^5.16.0-rc.8",
     "react": "15.6.2",
@@ -33,11 +33,11 @@ "react-dom": "15.6.2"
   "dependencies": {
-    "@instructure/ui-a11y": "^5.16.0-rc.7",
-    "@instructure/ui-buttons": "^5.16.0-rc.7",
-    "@instructure/ui-elements": "^5.16.0-rc.7",
-    "@instructure/ui-i18n": "^5.16.0-rc.7",
-    "@instructure/ui-layout": "^5.16.0-rc.7",
-    "@instructure/ui-motion": "^5.16.0-rc.7",
-    "@instructure/ui-portal": "^5.16.0-rc.7",
-    "@instructure/ui-themeable": "^5.16.0-rc.7",
-    "@instructure/ui-utils": "^5.16.0-rc.7",
+    "@instructure/ui-a11y": "^5.16.0-rc.8",
+    "@instructure/ui-buttons": "^5.16.0-rc.8",
+    "@instructure/ui-elements": "^5.16.0-rc.8",
+    "@instructure/ui-i18n": "^5.16.0-rc.8",
+    "@instructure/ui-layout": "^5.16.0-rc.8",
+    "@instructure/ui-motion": "^5.16.0-rc.8",
+    "@instructure/ui-portal": "^5.16.0-rc.8",
+    "@instructure/ui-themeable": "^5.16.0-rc.8",
+    "@instructure/ui-utils": "^5.16.0-rc.8",
     "classnames": "^2.2.5",
@@ -55,3 +55,3 @@ "keycode": "^2.1.8",
   },
-  "gitHead": "5fba1f92c750153890578cdb6d3a8cd62e93674f"
+  "gitHead": "2c20181062d633c704ff1e26cd5c45fc9483fd5c"
 }

src/components/Modal/index.js

@@ -33,3 +33,3 @@ /*
 import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
-import { omitProps, pickProps } from '@instructure/ui-utils/lib/react/passthroughProps'
+import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
 import createChainedFunction from '@instructure/ui-utils/lib/createChainedFunction'
@@ -245,3 +245,4 @@ import deprecated from '@instructure/ui-utils/lib/react/deprecated'
 
-  handlePortalOpen = () => {
+  handlePortalOpen = (DOMNode) => {
+    this.applyTheme(DOMNode)
     this._timeouts.push(
@@ -289,8 +290,26 @@ setTimeout(() => {
     const {
+      label,
+      closeButtonLabel,
+      children,
+      size,
+      open,
+      onOpen,
+      onClose,
+      onDismiss,
+      contentRef,
+      closeButtonRef,
+      mountNode,
+      insertAt,
+      liveRegion,
+      transition,
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited,
+      defaultFocusElement,
+      shouldReturnFocus,
       shouldCloseOnDocumentClick,
       shouldCloseOnOverlayClick, // eslint-disable-line react/prop-types
-      children,
-      contentRef,
-      onDismiss,
-      size,
       ...props
@@ -304,3 +323,3 @@ } = this.props
         {...omitProps(props, Modal.propTypes)}
-        {...pickProps(this.props, Dialog.propTypes)}
+        onDismiss={onDismiss}
         label={this.props.label}
@@ -315,2 +334,4 @@ defaultFocusElement={this.defaultFocusElement}
         shouldContainFocus
+        shouldReturnFocus={shouldReturnFocus}
+        liveRegion={liveRegion}
         open={this.state.open}
@@ -336,13 +357,19 @@ className={classnames({
       <Portal
-        {...pickProps(this.props, Portal.propTypes)}
-        open={this.props.open || this.state.transitioning}
-        onOpen={createChainedFunction(this.handlePortalOpen, this.props.onOpen)}
+        mountNode={mountNode}
+        insertAt={insertAt}
+        open={open || this.state.transitioning}
+        onOpen={createChainedFunction(this.handlePortalOpen, onOpen)}
+        onClose={onClose}
       >
         <Transition
-          {...pickProps(this.props, Transition.propTypes)}
-          in={this.props.open}
+          in={open}
           transitionOnMount
           unmountOnExit
-          type={this.props.transition}
-          onExited={createChainedFunction(this.handleTransitionExited, this.props.onExited)}
+          type={transition}
+          onEnter={onEnter}
+          onEntering={onEntering}
+          onEntered={onEntered}
+          onExit={onExit}
+          onExiting={onExiting}
+          onExited={createChainedFunction(this.handleTransitionExited, onExited)}
         >
@@ -349,0 +376,0 @@ { size === 'fullscreen' ? (

src/components/Tray/index.js

@@ -31,7 +31,6 @@ /*
 import CloseButton from '@instructure/ui-buttons/lib/components/CloseButton'
+import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
 
-import { pickProps, omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
 import createChainedFunction from '@instructure/ui-utils/lib/createChainedFunction'
 import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
-import requestAnimationFrame from '@instructure/ui-utils/lib/dom/requestAnimationFrame'
 import deprecated from '@instructure/ui-utils/lib/react/deprecated'
@@ -42,2 +41,3 @@ import bidirectional from '@instructure/ui-i18n/lib/bidirectional'
 import Portal from '@instructure/ui-portal/lib/components/Portal'
+import { mirrorHorizontalPlacement } from '@instructure/ui-layout/lib/utils/mirrorPlacement'
 
@@ -87,3 +87,3 @@ import Transition from '@instructure/ui-motion/lib/components/Transition'
     /**
-    * Placment to determine where the `<Tray />` should display in the viewport
+    * Placement to determine where the `<Tray />` should display in the viewport
     */
@@ -161,2 +161,6 @@ placement: PropTypes.oneOf(['top', 'bottom', 'start', 'end']),
     /**
+     * Callback fired when the <Tray /> transitions in/out
+     */
+    onTransition: PropTypes.func,
+    /**
      * Callback fired before the <Tray /> transitions in
@@ -225,45 +229,32 @@ */
 
-  constructor (props) {
-    super(props)
+  state = {
+    transitioning: false
+  }
 
-    this.state = {
-      portalOpen: false,
-      transitioning: false,
-      dir: 'ltr'
+  componentDidUpdate (prevProps) {
+    if (this.props.open !== prevProps.open) {
+      this.setState({ transitioning: true })
     }
   }
 
-  _raf = []
-
-  componentDidMount () {
-    this._isMounted = true
+  get placement () {
+    const { placement } = this.props
+    return this.rtl ? mirrorHorizontalPlacement(placement, ' ') : placement
   }
 
-  componentWillReceiveProps (nextProps) {
-    if (this.props.open && !nextProps.open) {
-      // closing
-      this.setState({
-        transitioning: true
-      })
+  get direction () {
+    switch (this.placement) {
+      case 'top':
+        return 'up'
+      case 'bottom':
+        return 'down'
+      case 'end':
+        return 'right'
+      default: // start
+        return 'left'
     }
   }
 
-  componentWillUnmount () {
-    this._raf.forEach(request => request.cancel())
-    this._raf = []
-  }
-
   get transition () {
-    const { placement, open } = this.props
-
-    return classnames({
-      'slide-down':
-        (placement === 'top' && open) || (placement === 'bottom' && !open),
-      'slide-up':
-        (placement === 'bottom' && open) || (placement === 'top' && !open),
-      [`slide-${this.dir === 'rtl' ? 'right' : 'left'}`]:
-        (placement === 'start' && !open) || (placement === 'end' && open),
-      [`slide-${this.dir === 'rtl' ? 'left' : 'right'}`]:
-        (placement === 'end' && !open) || (placement === 'start' && open)
-    })
+    return `slide-${this.direction}`
   }
@@ -275,17 +266,14 @@
 
-  handlePortalOpen = () => {
-    this._raf.push(requestAnimationFrame(() => {
-      this.setState({ portalOpen: true })
-    }))
+  handleTransitionComplete = () => {
+    this.setState({ transitioning: false })
   }
 
-  handleTransitionExited = () => {
-    this.setState({
-      transitioning: false
-    })
+  handlePortalOpen = (DOMNode) => {
+    // We apply the theme here because now we have a DOM node (provided by Portal)
+    this.applyTheme(DOMNode)
   }
 
   renderCloseButton () {
-    return this.props.closeButtonLabel
-      ? <CloseButton
+    return this.props.closeButtonLabel ? (
+      <CloseButton
         placement={this.props.placement === 'end' ? 'start' : 'end'}
@@ -297,57 +285,103 @@ offset="x-small"
           if (typeof this.props.closeButtonRef === 'function') {
-            this.props.closeButtonRef(el)
+           this.props.closeButtonRef(el)
           }
         }}
         onClick={this.props.onDismiss}
-      >
-        {this.props.closeButtonLabel}
-      </CloseButton>
-      : null
+     >
+       {this.props.closeButtonLabel}
+     </CloseButton>
+    ) : null
   }
 
+  renderContent () {
+    return (
+      <div>
+        {this.renderCloseButton()}
+        {this.props.children}
+      </div>
+    )
+  }
+
   render () {
-    const { children, contentRef, open, onOpen, ...props } = this.props
+    const {
+      label,
+      closeButtonLabel,
+      children,
+      size,
+      placement,
+      open,
+      defaultFocusElement,
+      contentRef,
+      closeButtonRef,
+      shouldContainFocus,
+      shouldReturnFocus,
+      shouldCloseOnDocumentClick,
+      onOpen,
+      onClose,
+      onDismiss,
+      mountNode,
+      insertAt,
+      liveRegion,
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited,
+      onTransition,
+      closeButtonVariant,
+      border,
+      shadow,
+      ...props
+    } = this.props
 
     return (
       <Portal
-        {...pickProps(props, Portal.propTypes)}
-        open={this.props.open || this.state.transitioning}
-        onOpen={createChainedFunction(this.handlePortalOpen, onOpen)}
+        open={open || this.state.transitioning}
+        onOpen={this.handlePortalOpen}
+        insertAt={insertAt}
+        mountNode={mountNode}
       >
         <Transition
-          {...pickProps(this.props, Transition.propTypes)}
-          in={this.props.open}
+          in={open}
+          type={this.transition}
+          onTransition={onTransition}
+          onEnter={onEnter}
+          onEntering={onEntering}
+          onEntered={createChainedFunction(this.handleTransitionComplete, onEntered, onOpen)}
+          onExit={onExit}
+          onExiting={onExiting}
+          onExited={createChainedFunction(this.handleTransitionComplete, onExited, onClose)}
           transitionOnMount
+          transitionEnter
           transitionExit
-          unmountOnExit
-          type={this.transition}
-          onExited={createChainedFunction(this.handleTransitionExited, this.props.onExited)}
         >
           <span
-            {...omitProps(this.props, Tray.propTypes)}
+            {...omitProps(props, Tray.propTypes)}
             className={classnames({
               [styles.root]: true,
-              [styles.border]: this.props.border,
-              [styles.shadow]: this.props.shadow,
-              [styles[this.props.size]]: true,
-              [styles[`placement--${this.props.placement}`]]: true,
-              [this.props.className]: this.props.className // eslint-disable-line react/prop-types
+              [styles.border]: border,
+              [styles.shadow]: shadow,
+              [styles[size]]: true,
+              [styles[`placement--${this.props.placement}`]]: true
             })}
-            ref={(el) => {
-              this._content = el
-
-              if (typeof contentRef === 'function') {
-                contentRef(el)
-              }
-            }}
+            ref={contentRef}
           >
-            <Dialog
-              {...pickProps(props, Dialog.propTypes)}
-              defaultFocusElement={this.defaultFocusElement}
-              open={this.state.portalOpen || this.state.transitioning}
-              shouldCloseOnEscape
-            >
-              {this.renderCloseButton()}
-              {children}
-            </Dialog>
+            {
+              (this.state.transitioning) ? this.renderContent() : (
+                <Dialog
+                  label={label}
+                  defaultFocusElement={this.defaultFocusElement}
+                  open
+                  shouldContainFocus={shouldContainFocus}
+                  shouldReturnFocus={shouldReturnFocus}
+                  shouldCloseOnDocumentClick={shouldCloseOnDocumentClick}
+                  shouldCloseOnEscape
+                  liveRegion={liveRegion}
+                  onDismiss={onDismiss}
+                >
+                  {this.renderContent()}
+                </Dialog>
+              )
+            }
           </span>
@@ -354,0 +388,0 @@ </Transition>

src/components/Tray/README.md

@@ -16,2 +16,3 @@ ---
 ---
+const FPO = lorem.paragraph()
 class Example extends React.Component {
@@ -98,3 +99,3 @@ constructor (props) {
             <Heading>Hello</Heading>
-            <Text as="p" lineHeight="double">{lorem.paragraph()}</Text>
+            <Text as="p" lineHeight="double">{FPO}</Text>
           </View>
@@ -101,0 +102,0 @@ </Tray>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

324028

increased by1.87%

Lines of code

7301

increased by2.83%

Dependency changes

• Updated@instructure/ui-a11y@^5.16.0-rc.8

• Updated@instructure/ui-buttons@^5.16.0-rc.8

• Updated@instructure/ui-elements@^5.16.0-rc.8

• Updated@instructure/ui-i18n@^5.16.0-rc.8

• Updated@instructure/ui-layout@^5.16.0-rc.8

• Updated@instructure/ui-motion@^5.16.0-rc.8

• Updated@instructure/ui-portal@^5.16.0-rc.8

• Updated@instructure/ui-themeable@^5.16.0-rc.8

• Updated@instructure/ui-utils@^5.16.0-rc.8