@instructure/ui-tray 11.6.0 → 11.6.1-snapshot-129

package/es/Tray/v2/index.js

@@ -0,0 +1,221 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["label", "children", "size", "placement", "open", "defaultFocusElement", "contentRef", "shouldContainFocus", "shouldReturnFocus", "shouldCloseOnDocumentClick", "onOpen", "onClose", "onDismiss", "mountNode", "insertAt", "liveRegion", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onTransition", "transitionOnMount", "transitionEnter", "transitionExit", "border", "shadow", "role", "enableMask"];
+var _dec, _dec2, _class, _Tray;
+/*
+ * 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.
+ */
+
+import { Component, createRef } from 'react';
+import { Dialog } from '@instructure/ui-dialog';
+import { omitProps } from '@instructure/ui-react-utils';
+import { createChainedFunction } from '@instructure/ui-utils';
+import { textDirectionContextConsumer } from '@instructure/ui-i18n';
+import { Portal } from '@instructure/ui-portal';
+import { mirrorHorizontalPlacement } from '@instructure/ui-position';
+import { Transition } from '@instructure/ui-motion';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { Mask } from '@instructure/ui-overlays/latest';
+
+/**
+---
+category: components
+---
+**/
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+let Tray = (_dec = withStyle(generateStyle), _dec2 = textDirectionContextConsumer(), _dec(_class = _dec2(_class = (_Tray = class Tray extends Component {
+  constructor(props) {
+    var _props$open;
+    super(props);
+    this.ref = null;
+    this.dialogRef = /*#__PURE__*/createRef();
+    this.state = void 0;
+    this.handleTransitionComplete = _type => {
+      this.setState({
+        transitioning: false
+      });
+    };
+    this.handlePortalOpen = DOMNode => {
+      if (DOMNode) {
+        this.DOMNode = DOMNode;
+      }
+    };
+    this.state = {
+      transitioning: false,
+      open: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate(prevProps, _prevState) {
+    var _this$props$makeStyle2, _this$props2;
+    if (this.props.open !== prevProps.open) {
+      if (!this.props.open) {
+        var _this$dialogRef$curre;
+        // calling Dialog.close() to remove focusregion immediately when transition starts
+        // so if a new Tray is opened (during transition) the new focusregion won't get treated as a child of this one
+        (_this$dialogRef$curre = this.dialogRef.current) === null || _this$dialogRef$curre === void 0 ? void 0 : _this$dialogRef$curre.close();
+      }
+      this.setState({
+        transitioning: true,
+        open: this.props.open
+      });
+    }
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  get placement() {
+    const _this$props3 = this.props,
+      placement = _this$props3.placement,
+      dir = _this$props3.dir;
+    const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl;
+    return isRtl ? mirrorHorizontalPlacement(placement, ' ') : placement;
+  }
+  get direction() {
+    switch (this.placement) {
+      case 'top':
+        return 'up';
+      case 'bottom':
+        return 'down';
+      case 'end':
+        return 'right';
+      default:
+        // start
+        return 'left';
+    }
+  }
+  get transition() {
+    return `slide-${this.direction}`;
+  }
+  get DOMNode() {
+    // The DOMNode property is needed for Portal type components
+    return this.ref;
+  }
+  set DOMNode(el) {
+    this.ref = el ? el : null;
+  }
+  render() {
+    var _this$props$styles, _this$props$styles2;
+    const _this$props4 = this.props,
+      label = _this$props4.label,
+      children = _this$props4.children,
+      size = _this$props4.size,
+      placement = _this$props4.placement,
+      open = _this$props4.open,
+      defaultFocusElement = _this$props4.defaultFocusElement,
+      contentRef = _this$props4.contentRef,
+      shouldContainFocus = _this$props4.shouldContainFocus,
+      shouldReturnFocus = _this$props4.shouldReturnFocus,
+      shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
+      onOpen = _this$props4.onOpen,
+      onClose = _this$props4.onClose,
+      onDismiss = _this$props4.onDismiss,
+      mountNode = _this$props4.mountNode,
+      insertAt = _this$props4.insertAt,
+      liveRegion = _this$props4.liveRegion,
+      onEnter = _this$props4.onEnter,
+      onEntering = _this$props4.onEntering,
+      onEntered = _this$props4.onEntered,
+      onExit = _this$props4.onExit,
+      onExiting = _this$props4.onExiting,
+      onExited = _this$props4.onExited,
+      onTransition = _this$props4.onTransition,
+      transitionOnMount = _this$props4.transitionOnMount,
+      transitionEnter = _this$props4.transitionEnter,
+      transitionExit = _this$props4.transitionExit,
+      border = _this$props4.border,
+      shadow = _this$props4.shadow,
+      role = _this$props4.role,
+      enableMask = _this$props4.enableMask,
+      props = _objectWithoutProperties(_this$props4, _excluded);
+    const portalIsOpen = this.state.open || this.state.transitioning;
+    const content = _jsx(Transition, {
+      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: transitionOnMount,
+      transitionEnter: transitionEnter,
+      transitionExit: transitionExit,
+      children: _jsx("span", {
+        ...omitProps(props, Tray.allowedProps),
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.tray,
+        ref: contentRef,
+        children: _jsx(Dialog, {
+          ref: this.dialogRef,
+          as: "div",
+          label: label,
+          defaultFocusElement: defaultFocusElement,
+          open: true,
+          shouldContainFocus: shouldContainFocus,
+          shouldReturnFocus: shouldReturnFocus,
+          shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
+          shouldCloseOnEscape: true,
+          liveRegion: liveRegion,
+          onDismiss: onDismiss,
+          role: role,
+          children: _jsx("div", {
+            css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.content,
+            children: children
+          })
+        })
+      })
+    });
+    return _jsx(Portal, {
+      open: portalIsOpen,
+      onOpen: this.handlePortalOpen,
+      insertAt: insertAt,
+      mountNode: mountNode,
+      "data-cid": "Tray",
+      children: enableMask ? _jsx(Mask, {
+        placement: 'center',
+        fullscreen: true,
+        children: content
+      }) : content
+    });
+  }
+}, _Tray.displayName = "Tray", _Tray.componentId = 'Tray', _Tray.allowedProps = allowedProps, _Tray.defaultProps = {
+  defaultFocusElement: null,
+  open: false,
+  insertAt: 'bottom',
+  shouldCloseOnDocumentClick: false,
+  shouldContainFocus: true,
+  shouldReturnFocus: true,
+  size: 'small',
+  placement: 'start',
+  transitionOnMount: true,
+  transitionEnter: true,
+  transitionExit: true,
+  shadow: true,
+  border: false,
+  enableMask: false
+}, _Tray)) || _class) || _class);
+export default Tray;
+export { Tray };

package/es/Tray/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+const allowedProps = ['label', 'children', 'size', 'placement', 'open', 'defaultFocusElement', 'contentRef', 'shouldContainFocus', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'onOpen', 'onClose', 'onDismiss', 'mountNode', 'insertAt', 'liveRegion', 'onTransition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'transitionOnMount', 'transitionEnter', 'transitionExit', 'border', 'shadow', 'enableMask'];
+export { allowedProps };

package/es/Tray/v2/styles.js

@@ -0,0 +1,131 @@
+/*
+ * 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.
+ */
+
+import { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} params the props and passed through data of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, params) => {
+  const border = params.border,
+    shadow = params.shadow,
+    size = params.size,
+    placement = params.placement;
+  const borderStyle = {
+    borderWidth: 0,
+    borderColor: componentTheme.borderColor,
+    borderStyle: 'solid'
+  };
+  const shadowStyle = shadow ? {
+    boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow)
+  } : {};
+  const contentStyle = placement === 'start' || placement === 'end' || placement === 'center' ? {
+    label: 'tray__content',
+    minHeight: '100vh'
+  } : {};
+  const placementStyles = {
+    top: {
+      insetInlineStart: 0,
+      insetInlineEnd: 0,
+      top: 0
+    },
+    bottom: {
+      insetInlineStart: 0,
+      insetInlineEnd: 0,
+      bottom: 0
+    },
+    start: {
+      top: 0,
+      bottom: 0,
+      insetInlineStart: 0,
+      insetInlineEnd: 'auto'
+    },
+    end: {
+      top: 0,
+      bottom: 0,
+      insetInlineEnd: 0,
+      insetInlineStart: 'auto'
+    },
+    center: {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    }
+  };
+  const borderPlacementStyle = border ? {
+    start: {
+      borderInlineEndWidth: componentTheme.borderWidth
+    },
+    end: {
+      borderInlineStartWidth: componentTheme.borderWidth
+    },
+    top: {
+      borderBottomWidth: componentTheme.borderWidth
+    },
+    bottom: {
+      borderTopWidth: componentTheme.borderWidth
+    },
+    center: {}
+  } : {};
+  const sizeVariants = {
+    'x-small': componentTheme.widthXs,
+    small: componentTheme.widthSm,
+    regular: componentTheme.widthMd,
+    medium: componentTheme.widthLg,
+    large: componentTheme.widthXl
+  };
+  const sizeStyle = placement === 'start' || placement === 'end' ? {
+    width: sizeVariants[size]
+  } : {};
+  return {
+    tray: {
+      label: 'tray',
+      padding: componentTheme.padding,
+      backgroundColor: componentTheme.backgroundColor,
+      position: 'fixed',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      boxSizing: 'border-box',
+      zIndex: componentTheme.zIndex,
+      maxWidth: '100vw',
+      maxHeight: '100vh',
+      ...shadowStyle,
+      ...placementStyles[placement],
+      ...(border && borderStyle),
+      ...(border && borderPlacementStyle[placement]),
+      ...sizeStyle
+    },
+    content: {
+      label: 'tray__content',
+      ...contentStyle
+    }
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Tray } from "./Tray/index.js";
+export { Tray } from "../Tray/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,6 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-export { Tray } from './Tray'
-export type { TrayProps } from './Tray/props'
+export { Tray } from "../Tray/v2/index.js";

package/lib/Tray/v1/index.js

@@ -0,0 +1,226 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Tray = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
+var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
+var _Portal = require("@instructure/ui-portal/lib/Portal");
+var _mirrorHorizontalPlacement = require("@instructure/ui-position/lib/mirrorHorizontalPlacement.js");
+var _Transition = require("@instructure/ui-motion/lib/Transition");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _props = require("./props");
+var _v11_ = require("@instructure/ui-overlays/v11_6");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["label", "children", "size", "placement", "open", "defaultFocusElement", "contentRef", "shouldContainFocus", "shouldReturnFocus", "shouldCloseOnDocumentClick", "onOpen", "onClose", "onDismiss", "mountNode", "insertAt", "liveRegion", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onTransition", "transitionOnMount", "transitionEnter", "transitionExit", "border", "shadow", "role", "enableMask"];
+var _dec, _dec2, _class, _Tray;
+/*
+ * 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.
+ */
+/**
+---
+category: components
+---
+**/
+let Tray = exports.Tray = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec(_class = _dec2(_class = (_Tray = class Tray extends _react.Component {
+  constructor(props) {
+    var _props$open;
+    super(props);
+    this.ref = null;
+    this.dialogRef = /*#__PURE__*/(0, _react.createRef)();
+    this.state = void 0;
+    this.handleTransitionComplete = _type => {
+      this.setState({
+        transitioning: false
+      });
+    };
+    this.handlePortalOpen = DOMNode => {
+      if (DOMNode) {
+        this.DOMNode = DOMNode;
+      }
+    };
+    this.state = {
+      transitioning: false,
+      open: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate(prevProps, _prevState) {
+    var _this$props$makeStyle2, _this$props2;
+    if (this.props.open !== prevProps.open) {
+      if (!this.props.open) {
+        var _this$dialogRef$curre;
+        // calling Dialog.close() to remove focusregion immediately when transition starts
+        // so if a new Tray is opened (during transition) the new focusregion won't get treated as a child of this one
+        (_this$dialogRef$curre = this.dialogRef.current) === null || _this$dialogRef$curre === void 0 ? void 0 : _this$dialogRef$curre.close();
+      }
+      this.setState({
+        transitioning: true,
+        open: this.props.open
+      });
+    }
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  get placement() {
+    const _this$props3 = this.props,
+      placement = _this$props3.placement,
+      dir = _this$props3.dir;
+    const isRtl = dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl;
+    return isRtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement;
+  }
+  get direction() {
+    switch (this.placement) {
+      case 'top':
+        return 'up';
+      case 'bottom':
+        return 'down';
+      case 'end':
+        return 'right';
+      default:
+        // start
+        return 'left';
+    }
+  }
+  get transition() {
+    return `slide-${this.direction}`;
+  }
+  get DOMNode() {
+    // The DOMNode property is needed for Portal type components
+    return this.ref;
+  }
+  set DOMNode(el) {
+    this.ref = el ? el : null;
+  }
+  render() {
+    var _this$props$styles, _this$props$styles2;
+    const _this$props4 = this.props,
+      label = _this$props4.label,
+      children = _this$props4.children,
+      size = _this$props4.size,
+      placement = _this$props4.placement,
+      open = _this$props4.open,
+      defaultFocusElement = _this$props4.defaultFocusElement,
+      contentRef = _this$props4.contentRef,
+      shouldContainFocus = _this$props4.shouldContainFocus,
+      shouldReturnFocus = _this$props4.shouldReturnFocus,
+      shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
+      onOpen = _this$props4.onOpen,
+      onClose = _this$props4.onClose,
+      onDismiss = _this$props4.onDismiss,
+      mountNode = _this$props4.mountNode,
+      insertAt = _this$props4.insertAt,
+      liveRegion = _this$props4.liveRegion,
+      onEnter = _this$props4.onEnter,
+      onEntering = _this$props4.onEntering,
+      onEntered = _this$props4.onEntered,
+      onExit = _this$props4.onExit,
+      onExiting = _this$props4.onExiting,
+      onExited = _this$props4.onExited,
+      onTransition = _this$props4.onTransition,
+      transitionOnMount = _this$props4.transitionOnMount,
+      transitionEnter = _this$props4.transitionEnter,
+      transitionExit = _this$props4.transitionExit,
+      border = _this$props4.border,
+      shadow = _this$props4.shadow,
+      role = _this$props4.role,
+      enableMask = _this$props4.enableMask,
+      props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
+    const portalIsOpen = this.state.open || this.state.transitioning;
+    const content = (0, _jsxRuntime.jsx)(_Transition.Transition, {
+      in: open,
+      type: this.transition,
+      onTransition: onTransition,
+      onEnter: onEnter,
+      onEntering: onEntering,
+      onEntered: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onEntered, onOpen),
+      onExit: onExit,
+      onExiting: onExiting,
+      onExited: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onExited, onClose),
+      transitionOnMount: transitionOnMount,
+      transitionEnter: transitionEnter,
+      transitionExit: transitionExit,
+      children: (0, _jsxRuntime.jsx)("span", {
+        ...(0, _omitProps.omitProps)(props, Tray.allowedProps),
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.tray,
+        ref: contentRef,
+        children: (0, _jsxRuntime.jsx)(_Dialog.Dialog, {
+          ref: this.dialogRef,
+          as: "div",
+          label: label,
+          defaultFocusElement: defaultFocusElement,
+          open: true,
+          shouldContainFocus: shouldContainFocus,
+          shouldReturnFocus: shouldReturnFocus,
+          shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
+          shouldCloseOnEscape: true,
+          liveRegion: liveRegion,
+          onDismiss: onDismiss,
+          role: role,
+          children: (0, _jsxRuntime.jsx)("div", {
+            css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.content,
+            children: children
+          })
+        })
+      })
+    });
+    return (0, _jsxRuntime.jsx)(_Portal.Portal, {
+      open: portalIsOpen,
+      onOpen: this.handlePortalOpen,
+      insertAt: insertAt,
+      mountNode: mountNode,
+      "data-cid": "Tray",
+      children: enableMask ? (0, _jsxRuntime.jsx)(_v11_.Mask, {
+        placement: 'center',
+        fullscreen: true,
+        children: content
+      }) : content
+    });
+  }
+}, _Tray.displayName = "Tray", _Tray.componentId = 'Tray', _Tray.allowedProps = _props.allowedProps, _Tray.defaultProps = {
+  defaultFocusElement: null,
+  open: false,
+  insertAt: 'bottom',
+  shouldCloseOnDocumentClick: false,
+  shouldContainFocus: true,
+  shouldReturnFocus: true,
+  size: 'small',
+  placement: 'start',
+  transitionOnMount: true,
+  transitionEnter: true,
+  transitionExit: true,
+  shadow: true,
+  border: false,
+  enableMask: false
+}, _Tray)) || _class) || _class);
+var _default = exports.default = Tray;

package/lib/Tray/{index.js → v2/index.js}

@@ -16,9 +16,8 @@ var _mirrorHorizontalPlacement = require("@instructure/ui-position/lib/mirrorHor
 var _Transition = require("@instructure/ui-motion/lib/Transition");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-var _Mask = require("@instructure/ui-overlays/lib/Mask");
+var _latest = require("@instructure/ui-overlays/latest");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["label", "children", "size", "placement", "open", "defaultFocusElement", "contentRef", "shouldContainFocus", "shouldReturnFocus", "shouldCloseOnDocumentClick", "onOpen", "onClose", "onDismiss", "mountNode", "insertAt", "liveRegion", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onTransition", "transitionOnMount", "transitionEnter", "transitionExit", "border", "shadow", "role", "enableMask"];
 var _dec, _dec2, _class, _Tray;
@@ -50,7 +49,7 @@ var _dec, _dec2, _class, _Tray;
 category: components
 ---
 **/
-let Tray = exports.Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec(_class = _dec2(_class = (_Tray = class Tray extends _react.Component {
+let Tray = exports.Tray = (_dec = (0, _emotion.withStyle)(_styles.default), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec(_class = _dec2(_class = (_Tray = class Tray extends _react.Component {
   constructor(props) {
     var _props$open;
     super(props);
@@ -200,7 +199,7 @@ let Tray = exports.Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       insertAt: insertAt,
       mountNode: mountNode,
       "data-cid": "Tray",
-      children: enableMask ? (0, _jsxRuntime.jsx)(_Mask.Mask, {
+      children: enableMask ? (0, _jsxRuntime.jsx)(_latest.Mask, {
         placement: 'center',
         fullscreen: true,
         children: content

package/lib/Tray/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * 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.
+ */
+
+const allowedProps = exports.allowedProps = ['label', 'children', 'size', 'placement', 'open', 'defaultFocusElement', 'contentRef', 'shouldContainFocus', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'onOpen', 'onClose', 'onDismiss', 'mountNode', 'insertAt', 'liveRegion', 'onTransition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'transitionOnMount', 'transitionEnter', 'transitionExit', 'border', 'shadow', 'enableMask'];