@instructure/ui-tray 8.25.1-snapshot-10 → 8.25.1-snapshot-15

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
+## [8.25.1-snapshot-15](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-15) (2022-06-23)
 
 **Note:** Version bump only for package @instructure/ui-tray
 

package/es/Tray/TrayLocator.js

@@ -22,5 +22,6 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { Tray } from './index';
+import { Tray } 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 TrayLocator = locator(Tray.selector);

package/es/Tray/index.js

@@ -1,7 +1,7 @@
 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", "border", "shadow"];
 
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -46,41 +46,26 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
-let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class Tray extends Component {
-  static displayName = "Tray";
-  static componentId = 'Tray';
-  static allowedProps = allowedProps;
-  static propTypes = propTypes;
-  static defaultProps = {
-    open: false,
-    onOpen: event => {},
-    onClose: event => {},
-    onDismiss: event => {},
-    onEnter: () => {},
-    onEntering: () => {},
-    onEntered: () => {},
-    onExit: () => {},
-    onExiting: () => {},
-    onExited: () => {},
-    mountNode: null,
-    insertAt: 'bottom',
-    liveRegion: null,
-    contentRef: el => {},
-    shouldCloseOnDocumentClick: false,
-    shouldContainFocus: true,
-    shouldReturnFocus: true,
-    defaultFocusElement: null,
-    size: 'small',
-    placement: 'start',
-    shadow: true,
-    border: false,
-    children: null
-  };
-  state = {
-    transitioning: false
-  };
-  ref = null;
+let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Tray extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      transitioning: false
+    };
+    this.ref = null;
+
+    this.handleTransitionComplete = _type => {
+      this.setState({
+        transitioning: false
+      });
+    };
+
+    this.handlePortalOpen = DOMNode => {
+      this.DOMNode = DOMNode;
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -88,7 +73,7 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
     (_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, snapshot) {
+  componentDidUpdate(prevProps, _prevState) {
     var _this$props$makeStyle2, _this$props2;
 
     if (this.props.open !== prevProps.open) {
@@ -129,16 +114,6 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
     return `slide-${this.direction}`;
   }
 
-  get defaultFocusElement() {
-    return this.props.defaultFocusElement || (() => this._closeButton);
-  }
-
-  handleTransitionComplete = _type => {
-    this.setState({
-      transitioning: false
-    });
-  };
-
   get DOMNode() {
     return this.ref;
   }
@@ -147,10 +122,6 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
     this.ref = el ? el : null;
   }
 
-  handlePortalOpen = DOMNode => {
-    this.DOMNode = DOMNode;
-  };
-
   render() {
     var _this$props$styles, _this$props$styles2;
 
@@ -207,7 +178,7 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
     }), this.state.transitioning ? children : jsx(Dialog, {
       as: "div",
       label: label,
-      defaultFocusElement: this.defaultFocusElement,
+      defaultFocusElement: defaultFocusElement,
       open: true,
       shouldContainFocus: shouldContainFocus,
       shouldReturnFocus: shouldReturnFocus,
@@ -220,6 +191,17 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
     }, children)))));
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "Tray", _class2.componentId = 'Tray', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
+  defaultFocusElement: null,
+  open: false,
+  insertAt: 'bottom',
+  shouldCloseOnDocumentClick: false,
+  shouldContainFocus: true,
+  shouldReturnFocus: true,
+  size: 'small',
+  placement: 'start',
+  shadow: true,
+  border: false
+}, _class2)) || _class) || _class) || _class);
 export default Tray;
 export { Tray };

package/es/Tray/props.js

@@ -26,123 +26,28 @@ import { element } from '@instructure/ui-prop-types';
 const propTypes = {
   label: PropTypes.string.isRequired,
   children: PropTypes.node,
-
-  /**
-   * The size (width) of the `<Tray />` when placement is `start` or `end`
-   */
   size: PropTypes.oneOf(['x-small', 'small', 'regular', 'medium', 'large']),
-
-  /**
-   * Placement to determine where the `<Tray />` should display in the viewport
-   */
   placement: PropTypes.oneOf(['top', 'bottom', 'start', 'end', 'center']),
-
-  /**
-   * Whether or not the `<Tray />` is open
-   */
   open: PropTypes.bool,
-
-  /**
-   * An element or a function returning an element to focus by default
-   */
   defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-
-  /**
-   *
-   * A function that returns a reference to the content element
-   */
   contentRef: PropTypes.func,
-
-  /**
-   * Whether focus should be contained within the `<Tray/>` when it is open
-   */
   shouldContainFocus: PropTypes.bool,
-
-  /**
-   * Whether focus should be restored when the `<Tray/>` is closed
-   */
   shouldReturnFocus: PropTypes.bool,
-
-  /**
-   * Should the `<Tray />` hide when clicks occur outside the content
-   */
   shouldCloseOnDocumentClick: PropTypes.bool,
-
-  /**
-   * Callback fired when `<Tray />` content has been mounted in the DOM
-   */
   onOpen: PropTypes.func,
-
-  /**
-   * Callback fired when `<Tray />` has been unmounted from the DOM
-   */
   onClose: PropTypes.func,
-
-  /**
-   * Callback fired when the `<Tray />` is requesting to be closed
-   */
   onDismiss: PropTypes.func,
-
-  /**
-   * An element or a function returning an element to use as the mount node
-   * for the `<Tray />` (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 element, function returning an element, or array of elements that will not be hidden from
-   * the screen reader when the `<Tray />` is open
-   */
   liveRegion: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.func]),
-
-  /**
-   * Callback fired when the <Tray /> transitions in/out
-   */
   onTransition: PropTypes.func,
-
-  /**
-   * Callback fired before the <Tray /> transitions in
-   */
   onEnter: PropTypes.func,
-
-  /**
-   * Callback fired as the <Tray /> begins to transition in
-   */
   onEntering: PropTypes.func,
-
-  /**
-   * Callback fired after the <Tray /> finishes transitioning in
-   */
   onEntered: PropTypes.func,
-
-  /**
-   * Callback fired right before the <Tray /> transitions out
-   */
   onExit: PropTypes.func,
-
-  /**
-   * Callback fired as the <Tray /> begins to transition out
-   */
   onExiting: PropTypes.func,
-
-  /**
-   * Callback fired after the <Tray /> finishes transitioning out
-   */
   onExited: PropTypes.func,
-
-  /**
-   * Should the `<Tray />` have a border
-   */
   border: PropTypes.bool,
-
-  /**
-   * Should the `<Tray />` have a box shadow
-   */
   shadow: PropTypes.bool
 };
 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', 'border', 'shadow'];

package/lib/Tray/TrayLocator.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 TrayLocator = (0, _locator.locator)(_index.Tray.selector);
 exports.TrayLocator = TrayLocator;

package/lib/Tray/index.js

@@ -37,47 +37,32 @@ var _props = require("./props");
 
 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", "border", "shadow"];
 
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
-let Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class Tray extends _react.Component {
-  static displayName = "Tray";
-  static componentId = 'Tray';
-  static allowedProps = _props.allowedProps;
-  static propTypes = _props.propTypes;
-  static defaultProps = {
-    open: false,
-    onOpen: event => {},
-    onClose: event => {},
-    onDismiss: event => {},
-    onEnter: () => {},
-    onEntering: () => {},
-    onEntered: () => {},
-    onExit: () => {},
-    onExiting: () => {},
-    onExited: () => {},
-    mountNode: null,
-    insertAt: 'bottom',
-    liveRegion: null,
-    contentRef: el => {},
-    shouldCloseOnDocumentClick: false,
-    shouldContainFocus: true,
-    shouldReturnFocus: true,
-    defaultFocusElement: null,
-    size: 'small',
-    placement: 'start',
-    shadow: true,
-    border: false,
-    children: null
-  };
-  state = {
-    transitioning: false
-  };
-  ref = null;
+let Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Tray extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      transitioning: false
+    };
+    this.ref = null;
+
+    this.handleTransitionComplete = _type => {
+      this.setState({
+        transitioning: false
+      });
+    };
+
+    this.handlePortalOpen = DOMNode => {
+      this.DOMNode = DOMNode;
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -85,7 +70,7 @@ let Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     (_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, snapshot) {
+  componentDidUpdate(prevProps, _prevState) {
     var _this$props$makeStyle2, _this$props2;
 
     if (this.props.open !== prevProps.open) {
@@ -126,16 +111,6 @@ let Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     return `slide-${this.direction}`;
   }
 
-  get defaultFocusElement() {
-    return this.props.defaultFocusElement || (() => this._closeButton);
-  }
-
-  handleTransitionComplete = _type => {
-    this.setState({
-      transitioning: false
-    });
-  };
-
   get DOMNode() {
     return this.ref;
   }
@@ -144,10 +119,6 @@ let Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     this.ref = el ? el : null;
   }
 
-  handlePortalOpen = DOMNode => {
-    this.DOMNode = DOMNode;
-  };
-
   render() {
     var _this$props$styles, _this$props$styles2;
 
@@ -203,7 +174,7 @@ let Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     }), this.state.transitioning ? children : (0, _emotion.jsx)(_Dialog.Dialog, {
       as: "div",
       label: label,
-      defaultFocusElement: this.defaultFocusElement,
+      defaultFocusElement: defaultFocusElement,
       open: true,
       shouldContainFocus: shouldContainFocus,
       shouldReturnFocus: shouldReturnFocus,
@@ -216,7 +187,18 @@ let Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     }, children)))));
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "Tray", _class2.componentId = 'Tray', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  defaultFocusElement: null,
+  open: false,
+  insertAt: 'bottom',
+  shouldCloseOnDocumentClick: false,
+  shouldContainFocus: true,
+  shouldReturnFocus: true,
+  size: 'small',
+  placement: 'start',
+  shadow: true,
+  border: false
+}, _class2)) || _class) || _class) || _class);
 exports.Tray = Tray;
 var _default = Tray;
 exports.default = _default;

package/lib/Tray/props.js

@@ -37,123 +37,28 @@ var _element = require("@instructure/ui-prop-types/lib/element.js");
 const propTypes = {
   label: _propTypes.default.string.isRequired,
   children: _propTypes.default.node,
-
-  /**
-   * The size (width) of the `<Tray />` when placement is `start` or `end`
-   */
   size: _propTypes.default.oneOf(['x-small', 'small', 'regular', 'medium', 'large']),
-
-  /**
-   * Placement to determine where the `<Tray />` should display in the viewport
-   */
   placement: _propTypes.default.oneOf(['top', 'bottom', 'start', 'end', 'center']),
-
-  /**
-   * Whether or not the `<Tray />` is open
-   */
   open: _propTypes.default.bool,
-
-  /**
-   * An element or a function returning an element to focus by default
-   */
   defaultFocusElement: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
-
-  /**
-   *
-   * A function that returns a reference to the content element
-   */
   contentRef: _propTypes.default.func,
-
-  /**
-   * Whether focus should be contained within the `<Tray/>` when it is open
-   */
   shouldContainFocus: _propTypes.default.bool,
-
-  /**
-   * Whether focus should be restored when the `<Tray/>` is closed
-   */
   shouldReturnFocus: _propTypes.default.bool,
-
-  /**
-   * Should the `<Tray />` hide when clicks occur outside the content
-   */
   shouldCloseOnDocumentClick: _propTypes.default.bool,
-
-  /**
-   * Callback fired when `<Tray />` content has been mounted in the DOM
-   */
   onOpen: _propTypes.default.func,
-
-  /**
-   * Callback fired when `<Tray />` has been unmounted from the DOM
-   */
   onClose: _propTypes.default.func,
-
-  /**
-   * Callback fired when the `<Tray />` is requesting to be closed
-   */
   onDismiss: _propTypes.default.func,
-
-  /**
-   * An element or a function returning an element to use as the mount node
-   * for the `<Tray />` (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 element, function returning an element, or array of elements that will not be hidden from
-   * the screen reader when the `<Tray />` is open
-   */
   liveRegion: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.element, _propTypes.default.func]),
-
-  /**
-   * Callback fired when the <Tray /> transitions in/out
-   */
   onTransition: _propTypes.default.func,
-
-  /**
-   * Callback fired before the <Tray /> transitions in
-   */
   onEnter: _propTypes.default.func,
-
-  /**
-   * Callback fired as the <Tray /> begins to transition in
-   */
   onEntering: _propTypes.default.func,
-
-  /**
-   * Callback fired after the <Tray /> finishes transitioning in
-   */
   onEntered: _propTypes.default.func,
-
-  /**
-   * Callback fired right before the <Tray /> transitions out
-   */
   onExit: _propTypes.default.func,
-
-  /**
-   * Callback fired as the <Tray /> begins to transition out
-   */
   onExiting: _propTypes.default.func,
-
-  /**
-   * Callback fired after the <Tray /> finishes transitioning out
-   */
   onExited: _propTypes.default.func,
-
-  /**
-   * Should the `<Tray />` have a border
-   */
   border: _propTypes.default.bool,
-
-  /**
-   * Should the `<Tray />` have a box shadow
-   */
   shadow: _propTypes.default.bool
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tray",
-  "version": "8.25.1-snapshot-10",
+  "version": "8.25.1-snapshot-15",
   "description": "Tray component for secondary/menu content",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,25 +24,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.25.1-snapshot-10",
-    "@instructure/emotion": "8.25.1-snapshot-10",
-    "@instructure/shared-types": "8.25.1-snapshot-10",
-    "@instructure/ui-dialog": "8.25.1-snapshot-10",
-    "@instructure/ui-i18n": "8.25.1-snapshot-10",
-    "@instructure/ui-motion": "8.25.1-snapshot-10",
-    "@instructure/ui-portal": "8.25.1-snapshot-10",
-    "@instructure/ui-position": "8.25.1-snapshot-10",
-    "@instructure/ui-prop-types": "8.25.1-snapshot-10",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-testable": "8.25.1-snapshot-10",
-    "@instructure/ui-utils": "8.25.1-snapshot-10",
+    "@instructure/console": "8.25.1-snapshot-15",
+    "@instructure/emotion": "8.25.1-snapshot-15",
+    "@instructure/shared-types": "8.25.1-snapshot-15",
+    "@instructure/ui-dialog": "8.25.1-snapshot-15",
+    "@instructure/ui-i18n": "8.25.1-snapshot-15",
+    "@instructure/ui-motion": "8.25.1-snapshot-15",
+    "@instructure/ui-portal": "8.25.1-snapshot-15",
+    "@instructure/ui-position": "8.25.1-snapshot-15",
+    "@instructure/ui-prop-types": "8.25.1-snapshot-15",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-15",
+    "@instructure/ui-testable": "8.25.1-snapshot-15",
+    "@instructure/ui-utils": "8.25.1-snapshot-15",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-10",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-themes": "8.25.1-snapshot-10"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-15",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-15",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-15",
+    "@instructure/ui-themes": "8.25.1-snapshot-15"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"