@instructure/ui-overlays 8.14.1-snapshot.21 → 8.14.1-snapshot.24

package/es/Mask/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _class2, _temp;
+var _dec, _dec2, _class, _class2, _temp;
 
 /*
  * The MIT License (MIT)
@@ -25,10 +25,10 @@ var _dec, _class, _class2, _temp;
  */
 
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import noScroll from 'no-scroll';
 import { withStyle, jsx } from '@instructure/emotion';
-import { ensureSingleChild, omitProps } from '@instructure/ui-react-utils';
+import { ensureSingleChild, omitProps, deprecated } from '@instructure/ui-react-utils';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -36,9 +36,12 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components/utilities
 ---
+@tsProps
 **/
 
-let Mask = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Mask extends Component {
+let Mask = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = deprecated('9.0.0', {
+  onDismiss: null
+}), _dec(_class = _dec2(_class = (_temp = _class2 = class Mask extends Component {
   constructor() {
     super(...arguments);
     this.ref = null;
@@ -52,6 +55,8 @@ let Mask = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       }
     };
 
+    this._content = void 0;
+
     this.contentRef = el => {
       this._content = el;
     };
@@ -100,9 +105,7 @@ let Mask = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
 
 }, _class2.displayName = "Mask", _class2.componentId = 'Mask', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   placement: 'center',
-  fullscreen: false,
-  children: null,
-  elementRef: el => {}
-}, _temp)) || _class);
+  fullscreen: false
+}, _temp)) || _class) || _class);
 export default Mask;
 export { Mask };

package/es/Mask/props.js

@@ -23,16 +23,14 @@
  */
 import PropTypes from 'prop-types';
 const propTypes = {
-  onDismiss: PropTypes.func,
   placement: PropTypes.oneOf(['top', 'center', 'bottom', 'stretch']),
   fullscreen: PropTypes.bool,
   children: PropTypes.node,
   onClick: PropTypes.func,
+  elementRef: PropTypes.func,
+  onDismiss: PropTypes.func // TODO: deprecated, remove in V9
 
-  /**
-   * provides a reference to the underlying html root element
-   */
-  elementRef: PropTypes.func
 };
-const allowedProps = ['onDismiss', 'placement', 'fullscreen', 'children', 'onClick', 'elementRef'];
+const allowedProps = ['placement', 'fullscreen', 'children', 'onClick', 'elementRef', // TODO: deprecated, remove in V9
+'onDismiss'];
 export { propTypes, allowedProps };

package/es/Overlay/OverlayLocator.js

@@ -22,5 +22,6 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { Overlay } from './index';
+import { Overlay } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const OverlayLocator = locator(Overlay.selector);

package/es/Overlay/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _class2, _temp;
+var _dec, _dec2, _class, _class2, _temp;
 
 /*
  * The MIT License (MIT)
@@ -24,10 +24,10 @@ var _dec, _class, _class2, _temp;
  * SOFTWARE.
  */
 import React, { Component } from 'react';
-import { Dialog } from '@instructure/ui-dialog';
 import { testable } from '@instructure/ui-testable';
 import { createChainedFunction } from '@instructure/ui-utils';
-import { omitProps, pickProps } from '@instructure/ui-react-utils';
+import { omitProps, pickProps, deprecated } from '@instructure/ui-react-utils';
+import { Dialog } from '@instructure/ui-dialog';
 import { Portal } from '@instructure/ui-portal';
 import { Transition } from '@instructure/ui-motion';
 import { allowedProps, propTypes } from './props';
@@ -35,13 +35,17 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
-let Overlay = (_dec = testable(), _dec(_class = (_temp = _class2 = class Overlay extends Component {
+let Overlay = (_dec = testable(), _dec2 = deprecated('9.0.0', {
+  applicationElement: null
+}), _dec(_class = _dec2(_class = (_temp = _class2 = class Overlay extends Component {
   constructor(props) {
     super(props);
     this._timeouts = [];
     this._DOMNode = null;
+    this._isMounted = false;
     this.ref = null;
 
     this.handleRef = el => {
@@ -81,7 +85,7 @@ let Overlay = (_dec = testable(), _dec(_class = (_temp = _class2 = class Overlay
     if (prevProps.open && !this.props.open) {
       // closing
       this.setState({
-        transitioning: prevProps.transition !== null
+        transitioning: !!prevProps.transition
       });
     }
   }
@@ -128,32 +132,17 @@ let Overlay = (_dec = testable(), _dec(_class = (_temp = _class2 = class Overlay
   }
 
 }, _class2.displayName = "Overlay", _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  children: null,
   open: false,
   insertAt: 'bottom',
-  onOpen: () => {},
-  onClose: () => {},
-  mountNode: null,
   shouldContainFocus: false,
   shouldReturnFocus: false,
   shouldCloseOnDocumentClick: false,
   shouldCloseOnEscape: true,
-  applicationElement: null,
-  defaultFocusElement: null,
-  contentElement: null,
-  onDismiss: () => {},
-  transition: null,
   in: false,
   unmountOnExit: false,
   transitionOnMount: false,
   transitionEnter: true,
-  transitionExit: true,
-  onEnter: function () {},
-  onEntering: function () {},
-  onEntered: function () {},
-  onExit: function () {},
-  onExiting: function () {},
-  onExited: function () {}
-}, _temp)) || _class);
+  transitionExit: true
+}, _temp)) || _class) || _class);
 export default Overlay;
 export { Overlay };

package/es/Overlay/props.js

@@ -26,122 +26,34 @@ import { element } from '@instructure/ui-prop-types';
 import { transitionTypePropType } from '@instructure/ui-motion';
 const propTypes = {
   children: PropTypes.node,
-
-  /**
-   * Whether or not the `<Overlay />` is open
-   */
   open: PropTypes.bool,
-
-  /**
-   * Callback fired when `<Portal />` content has been mounted in the DOM
-   */
   onOpen: PropTypes.func,
-
-  /**
-   * Callback fired when `<Portal />` has been unmounted from the DOM
-   */
   onClose: PropTypes.func,
-
-  /**
-   * An element or a function returning an element to use as the mount node
-   * for the `<Portal />` (defaults to `document.body`)
-   */
   mountNode: PropTypes.oneOfType([element, PropTypes.func]),
-
-  /**
-   * Insert the element at the 'top' of the mountNode or at the 'bottom'
-   */
   insertAt: PropTypes.oneOf(['bottom', 'top']),
-
-  /**
-   * An accessible label for the `<Overlay />` content
-   */
   label: PropTypes.string.isRequired,
-
-  /**
-   * Callback fired when the `<Overlay />` is requesting to be closed
-   */
   onDismiss: PropTypes.func,
-
-  /**
-   * An element or a function returning an element to focus by default
-   */
   defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-
-  /**
-   * An element or a function returning an element to apply `aria-hidden` to
-   */
-  applicationElement: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.func]),
-
-  /**
-   * An element or a function returning an element that wraps the content of the `<Overlay />`
-   */
   contentElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   shouldContainFocus: PropTypes.bool,
   shouldReturnFocus: PropTypes.bool,
   shouldCloseOnDocumentClick: PropTypes.bool,
   shouldCloseOnEscape: PropTypes.bool,
-
-  /**
-   * The type of `<Transition />` to use for animating in/out
-   */
   transition: transitionTypePropType,
-
-  /**
-   * Show the component; triggers the enter or exit animation
-   */
   in: PropTypes.bool,
-
-  /**
-   * Unmount the component (remove it from the DOM) when it is not shown
-   */
   unmountOnExit: PropTypes.bool,
-
-  /**
-   * Run the enter animation when the component mounts, if it is initially
-   * shown
-   */
   transitionOnMount: PropTypes.bool,
-
-  /**
-   * Run the enter animation
-   */
   transitionEnter: PropTypes.bool,
-
-  /**
-   * Run the exit animation
-   */
   transitionExit: PropTypes.bool,
-
-  /**
-   * Callback fired before the "entering" classes are applied
-   */
   onEnter: PropTypes.func,
-
-  /**
-   * Callback fired after the "entering" classes are applied
-   */
   onEntering: PropTypes.func,
-
-  /**
-   * Callback fired after the "enter" classes are applied
-   */
   onEntered: PropTypes.func,
-
-  /**
-   * Callback fired before the "exiting" classes are applied
-   */
   onExit: PropTypes.func,
-
-  /**
-   * Callback fired after the "exiting" classes are applied
-   */
   onExiting: PropTypes.func,
-
-  /**
-   * Callback fired after the "exited" classes are applied
-   */
-  onExited: PropTypes.func
+  onExited: PropTypes.func,
+  // TODO: deprecated, remove in V9
+  applicationElement: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.func])
 };
-const allowedProps = ['children', 'open', 'onOpen', 'onClose', 'mountNode', 'insertAt', 'label', 'onDismiss', 'defaultFocusElement', 'applicationElement', 'contentElement', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'shouldCloseOnEscape', 'transition', 'in', 'unmountOnExit', 'transitionOnMount', 'transitionEnter', 'transitionExit', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'];
+const allowedProps = ['children', 'open', 'onOpen', 'onClose', 'mountNode', 'insertAt', 'label', 'onDismiss', 'defaultFocusElement', 'contentElement', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'shouldCloseOnEscape', 'transition', 'in', 'unmountOnExit', 'transitionOnMount', 'transitionEnter', 'transitionExit', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', // TODO: deprecated, remove in V9
+'applicationElement'];
 export { propTypes, allowedProps };

package/lib/Mask/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Mask = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _noScroll = _interopRequireDefault(require("no-scroll"));
 
@@ -17,20 +19,25 @@ var _ensureSingleChild = require("@instructure/ui-react-utils/lib/ensureSingleCh
 
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 
+var _deprecated = require("@instructure/ui-react-utils/lib/deprecated.js");
+
 var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _class, _class2, _temp;
+var _dec, _dec2, _class, _class2, _temp;
 
 /**
 ---
 category: components/utilities
 ---
+@tsProps
 **/
-let Mask = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Mask extends _react.Component {
+let Mask = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _deprecated.deprecated)('9.0.0', {
+  onDismiss: null
+}), _dec(_class = _dec2(_class = (_temp = _class2 = class Mask extends _react.Component {
   constructor() {
     super(...arguments);
     this.ref = null;
@@ -44,6 +51,8 @@ let Mask = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       }
     };
 
+    this._content = void 0;
+
     this.contentRef = el => {
       this._content = el;
     };
@@ -92,10 +101,8 @@ let Mask = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
 
 }, _class2.displayName = "Mask", _class2.componentId = 'Mask', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   placement: 'center',
-  fullscreen: false,
-  children: null,
-  elementRef: el => {}
-}, _temp)) || _class);
+  fullscreen: false
+}, _temp)) || _class) || _class);
 exports.Mask = Mask;
 var _default = Mask;
 exports.default = _default;

package/lib/Mask/props.js

@@ -33,17 +33,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 const propTypes = {
-  onDismiss: _propTypes.default.func,
   placement: _propTypes.default.oneOf(['top', 'center', 'bottom', 'stretch']),
   fullscreen: _propTypes.default.bool,
   children: _propTypes.default.node,
   onClick: _propTypes.default.func,
+  elementRef: _propTypes.default.func,
+  onDismiss: _propTypes.default.func // TODO: deprecated, remove in V9
 
-  /**
-   * provides a reference to the underlying html root element
-   */
-  elementRef: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-const allowedProps = ['onDismiss', 'placement', 'fullscreen', 'children', 'onClick', 'elementRef'];
+const allowedProps = ['placement', 'fullscreen', 'children', 'onClick', 'elementRef', // TODO: deprecated, remove in V9
+'onDismiss'];
 exports.allowedProps = allowedProps;

package/lib/Overlay/OverlayLocator.js

@@ -32,5 +32,6 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const OverlayLocator = (0, _locator.locator)(_index.Overlay.selector);
 exports.OverlayLocator = OverlayLocator;

package/lib/Overlay/index.js

@@ -9,8 +9,6 @@ exports.default = exports.Overlay = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
@@ -19,24 +17,32 @@ var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 
+var _deprecated = require("@instructure/ui-react-utils/lib/deprecated.js");
+
+var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
+
 var _Portal = require("@instructure/ui-portal/lib/Portal");
 
 var _Transition = require("@instructure/ui-motion/lib/Transition");
 
 var _props = require("./props");
 
-var _dec, _class, _class2, _temp;
+var _dec, _dec2, _class, _class2, _temp;
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
-let Overlay = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2 = class Overlay extends _react.Component {
+let Overlay = (_dec = (0, _testable.testable)(), _dec2 = (0, _deprecated.deprecated)('9.0.0', {
+  applicationElement: null
+}), _dec(_class = _dec2(_class = (_temp = _class2 = class Overlay extends _react.Component {
   constructor(props) {
     super(props);
     this._timeouts = [];
     this._DOMNode = null;
+    this._isMounted = false;
     this.ref = null;
 
     this.handleRef = el => {
@@ -76,7 +82,7 @@ let Overlay = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2
     if (prevProps.open && !this.props.open) {
       // closing
       this.setState({
-        transitioning: prevProps.transition !== null
+        transitioning: !!prevProps.transition
       });
     }
   }
@@ -123,33 +129,18 @@ let Overlay = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2
   }
 
 }, _class2.displayName = "Overlay", _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
-  children: null,
   open: false,
   insertAt: 'bottom',
-  onOpen: () => {},
-  onClose: () => {},
-  mountNode: null,
   shouldContainFocus: false,
   shouldReturnFocus: false,
   shouldCloseOnDocumentClick: false,
   shouldCloseOnEscape: true,
-  applicationElement: null,
-  defaultFocusElement: null,
-  contentElement: null,
-  onDismiss: () => {},
-  transition: null,
   in: false,
   unmountOnExit: false,
   transitionOnMount: false,
   transitionEnter: true,
-  transitionExit: true,
-  onEnter: function () {},
-  onEntering: function () {},
-  onEntered: function () {},
-  onExit: function () {},
-  onExiting: function () {},
-  onExited: function () {}
-}, _temp)) || _class);
+  transitionExit: true
+}, _temp)) || _class) || _class);
 exports.Overlay = Overlay;
 var _default = Overlay;
 exports.default = _default;

package/lib/Overlay/props.js

@@ -38,123 +38,35 @@ var _uiMotion = require("@instructure/ui-motion");
  */
 const propTypes = {
   children: _propTypes.default.node,
-
-  /**
-   * Whether or not the `<Overlay />` is open
-   */
   open: _propTypes.default.bool,
-
-  /**
-   * Callback fired when `<Portal />` content has been mounted in the DOM
-   */
   onOpen: _propTypes.default.func,
-
-  /**
-   * Callback fired when `<Portal />` has been unmounted from the DOM
-   */
   onClose: _propTypes.default.func,
-
-  /**
-   * An element or a function returning an element to use as the mount node
-   * for the `<Portal />` (defaults to `document.body`)
-   */
   mountNode: _propTypes.default.oneOfType([_element.element, _propTypes.default.func]),
-
-  /**
-   * Insert the element at the 'top' of the mountNode or at the 'bottom'
-   */
   insertAt: _propTypes.default.oneOf(['bottom', 'top']),
-
-  /**
-   * An accessible label for the `<Overlay />` content
-   */
   label: _propTypes.default.string.isRequired,
-
-  /**
-   * Callback fired when the `<Overlay />` is requesting to be closed
-   */
   onDismiss: _propTypes.default.func,
-
-  /**
-   * An element or a function returning an element to focus by default
-   */
   defaultFocusElement: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
-
-  /**
-   * An element or a function returning an element to apply `aria-hidden` to
-   */
-  applicationElement: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.element, _propTypes.default.func]),
-
-  /**
-   * An element or a function returning an element that wraps the content of the `<Overlay />`
-   */
   contentElement: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
   shouldContainFocus: _propTypes.default.bool,
   shouldReturnFocus: _propTypes.default.bool,
   shouldCloseOnDocumentClick: _propTypes.default.bool,
   shouldCloseOnEscape: _propTypes.default.bool,
-
-  /**
-   * The type of `<Transition />` to use for animating in/out
-   */
   transition: _uiMotion.transitionTypePropType,
-
-  /**
-   * Show the component; triggers the enter or exit animation
-   */
   in: _propTypes.default.bool,
-
-  /**
-   * Unmount the component (remove it from the DOM) when it is not shown
-   */
   unmountOnExit: _propTypes.default.bool,
-
-  /**
-   * Run the enter animation when the component mounts, if it is initially
-   * shown
-   */
   transitionOnMount: _propTypes.default.bool,
-
-  /**
-   * Run the enter animation
-   */
   transitionEnter: _propTypes.default.bool,
-
-  /**
-   * Run the exit animation
-   */
   transitionExit: _propTypes.default.bool,
-
-  /**
-   * Callback fired before the "entering" classes are applied
-   */
   onEnter: _propTypes.default.func,
-
-  /**
-   * Callback fired after the "entering" classes are applied
-   */
   onEntering: _propTypes.default.func,
-
-  /**
-   * Callback fired after the "enter" classes are applied
-   */
   onEntered: _propTypes.default.func,
-
-  /**
-   * Callback fired before the "exiting" classes are applied
-   */
   onExit: _propTypes.default.func,
-
-  /**
-   * Callback fired after the "exiting" classes are applied
-   */
   onExiting: _propTypes.default.func,
-
-  /**
-   * Callback fired after the "exited" classes are applied
-   */
-  onExited: _propTypes.default.func
+  onExited: _propTypes.default.func,
+  // TODO: deprecated, remove in V9
+  applicationElement: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.element, _propTypes.default.func])
 };
 exports.propTypes = propTypes;
-const allowedProps = ['children', 'open', 'onOpen', 'onClose', 'mountNode', 'insertAt', 'label', 'onDismiss', 'defaultFocusElement', 'applicationElement', 'contentElement', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'shouldCloseOnEscape', 'transition', 'in', 'unmountOnExit', 'transitionOnMount', 'transitionEnter', 'transitionExit', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'];
+const allowedProps = ['children', 'open', 'onOpen', 'onClose', 'mountNode', 'insertAt', 'label', 'onDismiss', 'defaultFocusElement', 'contentElement', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'shouldCloseOnEscape', 'transition', 'in', 'unmountOnExit', 'transitionOnMount', 'transitionEnter', 'transitionExit', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', // TODO: deprecated, remove in V9
+'applicationElement'];
 exports.allowedProps = allowedProps;