@instructure/ui-tray 8.25.1-snapshot.0 → 8.26.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.26.0](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.26.0) (2022-06-30)
+
+**Note:** Version bump only for package @instructure/ui-tray
+
 # [8.25.0](https://github.com/instructure/instructure-ui/compare/v8.24.5...v8.25.0) (2022-06-03)
 
 **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

@@ -46,6 +46,7 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Tray extends Component {
   constructor() {
@@ -72,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) {
@@ -113,10 +114,6 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
     return `slide-${this.direction}`;
   }
 
-  get defaultFocusElement() {
-    return this.props.defaultFocusElement || (() => this._closeButton);
-  }
-
   get DOMNode() {
     return this.ref;
   }
@@ -181,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,
@@ -195,29 +192,16 @@ let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
   }
 
 }, _class2.displayName = "Tray", _class2.componentId = 'Tray', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
+  defaultFocusElement: null,
   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
+  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

@@ -43,6 +43,7 @@ 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 = (_class2 = class Tray extends _react.Component {
   constructor() {
@@ -69,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) {
@@ -110,10 +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);
-  }
-
   get DOMNode() {
     return this.ref;
   }
@@ -177,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,
@@ -191,29 +188,16 @@ let Tray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
 }, _class2.displayName = "Tray", _class2.componentId = 'Tray', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  defaultFocusElement: null,
   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
+  border: false
 }, _class2)) || _class) || _class) || _class);
 exports.Tray = Tray;
 var _default = Tray;

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.0+59b6babce",
+  "version": "8.26.0",
   "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.0+59b6babce",
-    "@instructure/emotion": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/shared-types": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-dialog": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-i18n": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-motion": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-portal": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-position": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-prop-types": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-react-utils": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-testable": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-utils": "8.25.1-snapshot.0+59b6babce",
+    "@instructure/console": "8.26.0",
+    "@instructure/emotion": "8.26.0",
+    "@instructure/shared-types": "8.26.0",
+    "@instructure/ui-dialog": "8.26.0",
+    "@instructure/ui-i18n": "8.26.0",
+    "@instructure/ui-motion": "8.26.0",
+    "@instructure/ui-portal": "8.26.0",
+    "@instructure/ui-position": "8.26.0",
+    "@instructure/ui-prop-types": "8.26.0",
+    "@instructure/ui-react-utils": "8.26.0",
+    "@instructure/ui-testable": "8.26.0",
+    "@instructure/ui-utils": "8.26.0",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-test-locator": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-test-utils": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-themes": "8.25.1-snapshot.0+59b6babce"
+    "@instructure/ui-babel-preset": "8.26.0",
+    "@instructure/ui-test-locator": "8.26.0",
+    "@instructure/ui-test-utils": "8.26.0",
+    "@instructure/ui-themes": "8.26.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -50,6 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "59b6babce07a9242111475156f544ec11c1a9283"
+  "sideEffects": false
 }

package/src/Tray/index.tsx

@@ -39,12 +39,13 @@ import { withStyle, jsx } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import { propTypes, allowedProps } from './props'
-import type { TrayProps } from './props'
+import type { TrayProps, TrayState } from './props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @textDirectionContextConsumer()
@@ -56,47 +57,27 @@ class Tray extends Component<TrayProps> {
   static propTypes = propTypes
 
   static defaultProps = {
+    defaultFocusElement: null,
     open: false,
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onOpen: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onClose: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onDismiss: (event) => {},
-    onEnter: () => {},
-    onEntering: () => {},
-    onEntered: () => {},
-    onExit: () => {},
-    onExiting: () => {},
-    onExited: () => {},
-    mountNode: null,
     insertAt: 'bottom',
-    liveRegion: null,
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    contentRef: (el) => {},
     shouldCloseOnDocumentClick: false,
     shouldContainFocus: true,
     shouldReturnFocus: true,
-    defaultFocusElement: null,
     size: 'small',
     placement: 'start',
     shadow: true,
-    border: false,
-    children: null
+    border: false
   }
 
-  state = {
+  state: TrayState = {
     transitioning: false
   }
-
   ref: Element | null = null
-
   componentDidMount() {
     this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'prevProps' implicitly has an 'any' type... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate(prevProps: TrayProps, _prevState: TrayState) {
     if (this.props.open !== prevProps.open) {
       this.setState({ transitioning: true })
     }
@@ -123,15 +104,10 @@ class Tray extends Component<TrayProps> {
     }
   }
 
-  get transition() {
+  get transition(): TransitionType {
     return `slide-${this.direction}`
   }
 
-  get defaultFocusElement() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_closeButton' does not exist on type 'Tr... Remove this comment to see the full error message
-    return this.props.defaultFocusElement || (() => this._closeButton)
-  }
-
   handleTransitionComplete = (_type?: TransitionType) => {
     this.setState({ transitioning: false })
   }
@@ -194,7 +170,6 @@ class Tray extends Component<TrayProps> {
         {portalIsOpen && (
           <Transition
             in={open}
-            // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
             type={this.transition}
             onTransition={onTransition}
             onEnter={onEnter}
@@ -226,7 +201,7 @@ class Tray extends Component<TrayProps> {
                 <Dialog
                   as="div"
                   label={label}
-                  defaultFocusElement={this.defaultFocusElement}
+                  defaultFocusElement={defaultFocusElement}
                   open
                   shouldContainFocus={shouldContainFocus}
                   shouldReturnFocus={shouldReturnFocus}