@instructure/ui-drawer-layout 8.25.1-snapshot-7 → 8.25.1-snapshot-10

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-7](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-7) (2022-06-13)
+## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
 
 **Note:** Version bump only for package @instructure/ui-drawer-layout
 

package/es/DrawerLayout/DrawerContent/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -42,32 +42,24 @@ id: DrawerLayout.Content
 ---
 @tsProps
 **/
-let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class DrawerContent extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-    this._resizeListener = void 0;
-    this._debounced = void 0;
-
-    this.makeStyleProps = shouldTransition => {
-      return {
-        shouldTransition
-      };
-    };
-
-    this.handleContentRef = node => {
-      this.ref = node;
-
-      if (typeof this.props.contentRef === 'function') {
-        this.props.contentRef(node);
-      }
-    };
-  }
+let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class DrawerContent extends Component {
+  static displayName = "DrawerContent";
+  static componentId = 'DrawerLayout.Content';
+  static locatorAttribute = 'data-drawer-content';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    role: 'region'
+  };
+  ref = null;
 
   get _content() {
     return this.ref;
   }
 
+  _resizeListener;
+  _debounced;
+
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
@@ -120,6 +112,19 @@ let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     (_this$_debounced2 = this._debounced) === null || _this$_debounced2 === void 0 ? void 0 : _this$_debounced2.cancel();
   }
 
+  makeStyleProps = shouldTransition => {
+    return {
+      shouldTransition
+    };
+  };
+  handleContentRef = node => {
+    this.ref = node;
+
+    if (typeof this.props.contentRef === 'function') {
+      this.props.contentRef(node);
+    }
+  };
+
   render() {
     var _this$props$styles;
 
@@ -136,8 +141,6 @@ let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     }), this.props.children);
   }
 
-}, _class2.displayName = "DrawerContent", _class2.componentId = 'DrawerLayout.Content', _class2.locatorAttribute = 'data-drawer-content', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  role: 'region'
-}, _class2)) || _class) || _class);
+}) || _class) || _class);
 export default DrawerContent;
 export { DrawerContent };

package/es/DrawerLayout/DrawerTray/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["label", "children", "render", "placement", "open", "onOpen", "onClose", "border", "shadow", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "contentRef", "mountNode", "defaultFocusElement", "liveRegion", "onDismiss", "onTransition", "shouldReturnFocus", "shouldCloseOnEscape", "shouldCloseOnDocumentClick", "shouldContainFocus", "styles"];
 
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _dec3, _class;
 
 /*
  * The MIT License (MIT)
@@ -50,49 +50,31 @@ id: DrawerLayout.Tray
 ---
 @tsProps
 **/
-let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class DrawerTray extends Component {
+let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class DrawerTray extends Component {
+  static displayName = "DrawerTray";
+  static componentId = 'DrawerLayout.Tray';
+  static locatorAttribute = 'data-drawer-tray';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    shouldContainFocus: true,
+    shouldCloseOnEscape: true,
+    shouldCloseOnDocumentClick: true,
+    shouldReturnFocus: true,
+    open: false,
+    shadow: true,
+    border: true,
+    placement: 'start'
+  };
+  ref = null;
+  _DOMNode = null;
+
   get _content() {
     return this.ref;
   }
 
   constructor(props) {
     super(props);
-    this.ref = null;
-    this._DOMNode = null;
-
-    this.makeStyleProps = () => {
-      return {
-        placement: this.placement
-      };
-    };
-
-    this.handleContentRef = node => {
-      this.ref = node;
-
-      if (typeof this.props.contentRef === 'function') {
-        this.props.contentRef(node);
-      }
-    };
-
-    this.handleTransitionEntered = _transitionType => {
-      this.setState({
-        transitioning: false
-      });
-    };
-
-    this.handleTransitionExited = _transitionType => {
-      this.setState({
-        transitioning: false
-      });
-    };
-
-    this.handlePortalOpen = DOMNode => {
-      this.DOMNode = DOMNode;
-      this.setState({
-        portalOpen: true
-      });
-    };
-
     this.state = {
       transitioning: false,
       portalOpen: false
@@ -117,6 +99,12 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
 
+  makeStyleProps = () => {
+    return {
+      placement: this.placement
+    };
+  };
+
   get placement() {
     const _this$props3 = this.props,
           placement = _this$props3.placement,
@@ -133,6 +121,30 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     return `slide-${this.direction}`;
   }
 
+  handleContentRef = node => {
+    this.ref = node;
+
+    if (typeof this.props.contentRef === 'function') {
+      this.props.contentRef(node);
+    }
+  };
+  handleTransitionEntered = _transitionType => {
+    this.setState({
+      transitioning: false
+    });
+  };
+  handleTransitionExited = _transitionType => {
+    this.setState({
+      transitioning: false
+    });
+  };
+  handlePortalOpen = DOMNode => {
+    this.DOMNode = DOMNode;
+    this.setState({
+      portalOpen: true
+    });
+  };
+
   get DOMNode() {
     return this._DOMNode;
   }
@@ -241,15 +253,6 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     });
   }
 
-}, _class2.displayName = "DrawerTray", _class2.componentId = 'DrawerLayout.Tray', _class2.locatorAttribute = 'data-drawer-tray', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  shouldContainFocus: true,
-  shouldCloseOnEscape: true,
-  shouldCloseOnDocumentClick: true,
-  shouldReturnFocus: true,
-  open: false,
-  shadow: true,
-  border: true,
-  placement: 'start'
-}, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 export default DrawerTray;
 export { DrawerTray };

package/es/DrawerLayout/__fixtures__/DrawerLayout.fixture.js

@@ -27,6 +27,22 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { DrawerLayout } from '../index';
 export default class DrawerLayoutFixture extends Component {
+  static displayName = "DrawerLayoutFixture";
+  static propTypes = {
+    layoutWidth: PropTypes.string,
+    trayWidth: PropTypes.string,
+    placement: PropTypes.string,
+    open: PropTypes.bool,
+    onOverlayTrayChange: PropTypes.func
+  };
+  static defaultProps = {
+    layoutWidth: '600px',
+    trayWidth: '200px',
+    open: false,
+    placement: 'start',
+    onOverlayTrayChange: () => {}
+  };
+
   render() {
     const _this$props = this.props,
           layoutWidth = _this$props.layoutWidth,
@@ -54,19 +70,4 @@ export default class DrawerLayoutFixture extends Component {
     }, /*#__PURE__*/React.createElement("div", null, "Hello from content", /*#__PURE__*/React.createElement("button", null, "Expand"))))));
   }
 
-}
-DrawerLayoutFixture.displayName = "DrawerLayoutFixture";
-DrawerLayoutFixture.propTypes = {
-  layoutWidth: PropTypes.string,
-  trayWidth: PropTypes.string,
-  placement: PropTypes.string,
-  open: PropTypes.bool,
-  onOverlayTrayChange: PropTypes.func
-};
-DrawerLayoutFixture.defaultProps = {
-  layoutWidth: '600px',
-  trayWidth: '200px',
-  open: false,
-  placement: 'start',
-  onOverlayTrayChange: () => {}
-};
+}

package/es/DrawerLayout/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _dec4, _class, _class2;
+var _dec, _dec2, _dec3, _dec4, _class;
 
 /*
  * The MIT License (MIT)
@@ -45,74 +45,36 @@ category: components
 ---
 @tsProps
 **/
-let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec3 = textDirectionContextConsumer(), _dec4 = testable(), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = (_class2 = class DrawerLayout extends Component {
-  constructor(_props) {
-    super(_props);
-    this._id = void 0;
-    this._content = null;
-    this._tray = null;
-    this.ref = null;
-
-    this.handleRef = el => {
-      this.ref = el;
-    };
-
-    this.handleTrayContentRef = el => {
-      this._tray = el;
-    };
-
-    this.handleContentSizeChange = _ref => {
-      let width = _ref.width;
-      this.setState((state, props) => {
-        const nextState = this.getNextState(props.minWidth, state.trayWidth, width, state.shouldOverlayTray);
-
-        if (state.shouldOverlayTray !== nextState.shouldOverlayTray) {
-          this.notifyOverlayTrayChange(nextState.shouldOverlayTray);
-        }
-
-        return nextState;
-      });
-    };
-
-    this.handleTraySizeChange = _ref2 => {
-      let width = _ref2.width;
-      this.setState((state, props) => {
-        const nextState = this.getNextState(props.minWidth, width, state.contentWidth, true);
-
-        if (state.shouldOverlayTray !== nextState.shouldOverlayTray) {
-          this.notifyOverlayTrayChange(nextState.shouldOverlayTray);
-        }
-
-        return nextState;
-      });
-    };
-
-    this.handleTrayTransitionEnter = () => {
-      let width = 0;
-
-      if (this._tray) {
-        width = getBoundingClientRect(this._tray).width;
-      }
-
-      this.handleTraySizeChange({
-        width
-      });
-    };
-
-    this.handleTrayTransitionExit = () => {
-      this.handleTraySizeChange({
-        width: 0
-      });
-    };
-
+let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec3 = textDirectionContextConsumer(), _dec4 = testable(), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = class DrawerLayout extends Component {
+  static displayName = "DrawerLayout";
+  static componentId = 'DrawerLayout';
+  static locatorAttribute = 'data-drawer-layout';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    minWidth: '30rem'
+  };
+  static Content = DrawerContent;
+  static Tray = DrawerTray;
+
+  constructor(props) {
+    super(props);
     this.state = {
       shouldOverlayTray: false,
       trayWidth: 0,
       contentWidth: 0
     };
-    this._id = _props.deterministicId();
+    this._id = props.deterministicId();
   }
 
+  _id;
+  _content = null;
+  _tray = null;
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
+
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
@@ -165,6 +127,10 @@ let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
     };
   }
 
+  handleTrayContentRef = el => {
+    this._tray = el;
+  };
+
   shouldOverlayTray(minWidth, trayWidth, contentWidth, trayIsOverlayed) {
     if (!this._content) return false;
     const minWidthPx = px(minWidth, this._content);
@@ -193,6 +159,47 @@ let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
     }
   }
 
+  handleContentSizeChange = _ref => {
+    let width = _ref.width;
+    this.setState((state, props) => {
+      const nextState = this.getNextState(props.minWidth, state.trayWidth, width, state.shouldOverlayTray);
+
+      if (state.shouldOverlayTray !== nextState.shouldOverlayTray) {
+        this.notifyOverlayTrayChange(nextState.shouldOverlayTray);
+      }
+
+      return nextState;
+    });
+  };
+  handleTraySizeChange = _ref2 => {
+    let width = _ref2.width;
+    this.setState((state, props) => {
+      const nextState = this.getNextState(props.minWidth, width, state.contentWidth, true);
+
+      if (state.shouldOverlayTray !== nextState.shouldOverlayTray) {
+        this.notifyOverlayTrayChange(nextState.shouldOverlayTray);
+      }
+
+      return nextState;
+    });
+  };
+  handleTrayTransitionEnter = () => {
+    let width = 0;
+
+    if (this._tray) {
+      width = getBoundingClientRect(this._tray).width;
+    }
+
+    this.handleTraySizeChange({
+      width
+    });
+  };
+  handleTrayTransitionExit = () => {
+    this.handleTraySizeChange({
+      width: 0
+    });
+  };
+
   renderChildren() {
     let trayCount = 0;
     let contentCount = 0;
@@ -250,9 +257,7 @@ let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
     }), this.renderChildren()));
   }
 
-}, _class2.displayName = "DrawerLayout", _class2.componentId = 'DrawerLayout', _class2.locatorAttribute = 'data-drawer-layout', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  minWidth: '30rem'
-}, _class2.Content = DrawerContent, _class2.Tray = DrawerTray, _class2)) || _class) || _class) || _class) || _class);
+}) || _class) || _class) || _class) || _class);
 export default DrawerLayout;
 export { DrawerLayout, DrawerContent, DrawerTray };
 export const DrawerLayoutContext = /*#__PURE__*/createContext(false);

package/lib/DrawerLayout/DrawerContent/index.js

@@ -25,7 +25,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /**
 ---
@@ -34,32 +34,24 @@ id: DrawerLayout.Content
 ---
 @tsProps
 **/
-let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class DrawerContent extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-    this._resizeListener = void 0;
-    this._debounced = void 0;
-
-    this.makeStyleProps = shouldTransition => {
-      return {
-        shouldTransition
-      };
-    };
-
-    this.handleContentRef = node => {
-      this.ref = node;
-
-      if (typeof this.props.contentRef === 'function') {
-        this.props.contentRef(node);
-      }
-    };
-  }
+let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class DrawerContent extends _react.Component {
+  static displayName = "DrawerContent";
+  static componentId = 'DrawerLayout.Content';
+  static locatorAttribute = 'data-drawer-content';
+  static propTypes = _props.propTypes;
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    role: 'region'
+  };
+  ref = null;
 
   get _content() {
     return this.ref;
   }
 
+  _resizeListener;
+  _debounced;
+
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
@@ -112,6 +104,19 @@ let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
     (_this$_debounced2 = this._debounced) === null || _this$_debounced2 === void 0 ? void 0 : _this$_debounced2.cancel();
   }
 
+  makeStyleProps = shouldTransition => {
+    return {
+      shouldTransition
+    };
+  };
+  handleContentRef = node => {
+    this.ref = node;
+
+    if (typeof this.props.contentRef === 'function') {
+      this.props.contentRef(node);
+    }
+  };
+
   render() {
     var _this$props$styles;
 
@@ -128,9 +133,7 @@ let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
     }), this.props.children);
   }
 
-}, _class2.displayName = "DrawerContent", _class2.componentId = 'DrawerLayout.Content', _class2.locatorAttribute = 'data-drawer-content', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  role: 'region'
-}, _class2)) || _class) || _class);
+}) || _class) || _class);
 exports.DrawerContent = DrawerContent;
 var _default = DrawerContent;
 exports.default = _default;

package/lib/DrawerLayout/DrawerTray/index.js

@@ -39,7 +39,7 @@ var _props = require("./props");
 
 const _excluded = ["label", "children", "render", "placement", "open", "onOpen", "onClose", "border", "shadow", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "contentRef", "mountNode", "defaultFocusElement", "liveRegion", "onDismiss", "onTransition", "shouldReturnFocus", "shouldCloseOnEscape", "shouldCloseOnDocumentClick", "shouldContainFocus", "styles"];
 
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _dec3, _class;
 
 /**
 ---
@@ -48,49 +48,31 @@ id: DrawerLayout.Tray
 ---
 @tsProps
 **/
-let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class DrawerTray extends _react.Component {
+let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class DrawerTray extends _react.Component {
+  static displayName = "DrawerTray";
+  static componentId = 'DrawerLayout.Tray';
+  static locatorAttribute = 'data-drawer-tray';
+  static propTypes = _props.propTypes;
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    shouldContainFocus: true,
+    shouldCloseOnEscape: true,
+    shouldCloseOnDocumentClick: true,
+    shouldReturnFocus: true,
+    open: false,
+    shadow: true,
+    border: true,
+    placement: 'start'
+  };
+  ref = null;
+  _DOMNode = null;
+
   get _content() {
     return this.ref;
   }
 
   constructor(props) {
     super(props);
-    this.ref = null;
-    this._DOMNode = null;
-
-    this.makeStyleProps = () => {
-      return {
-        placement: this.placement
-      };
-    };
-
-    this.handleContentRef = node => {
-      this.ref = node;
-
-      if (typeof this.props.contentRef === 'function') {
-        this.props.contentRef(node);
-      }
-    };
-
-    this.handleTransitionEntered = _transitionType => {
-      this.setState({
-        transitioning: false
-      });
-    };
-
-    this.handleTransitionExited = _transitionType => {
-      this.setState({
-        transitioning: false
-      });
-    };
-
-    this.handlePortalOpen = DOMNode => {
-      this.DOMNode = DOMNode;
-      this.setState({
-        portalOpen: true
-      });
-    };
-
     this.state = {
       transitioning: false,
       portalOpen: false
@@ -115,6 +97,12 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
 
+  makeStyleProps = () => {
+    return {
+      placement: this.placement
+    };
+  };
+
   get placement() {
     const _this$props3 = this.props,
           placement = _this$props3.placement,
@@ -131,6 +119,30 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     return `slide-${this.direction}`;
   }
 
+  handleContentRef = node => {
+    this.ref = node;
+
+    if (typeof this.props.contentRef === 'function') {
+      this.props.contentRef(node);
+    }
+  };
+  handleTransitionEntered = _transitionType => {
+    this.setState({
+      transitioning: false
+    });
+  };
+  handleTransitionExited = _transitionType => {
+    this.setState({
+      transitioning: false
+    });
+  };
+  handlePortalOpen = DOMNode => {
+    this.DOMNode = DOMNode;
+    this.setState({
+      portalOpen: true
+    });
+  };
+
   get DOMNode() {
     return this._DOMNode;
   }
@@ -238,16 +250,7 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     });
   }
 
-}, _class2.displayName = "DrawerTray", _class2.componentId = 'DrawerLayout.Tray', _class2.locatorAttribute = 'data-drawer-tray', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  shouldContainFocus: true,
-  shouldCloseOnEscape: true,
-  shouldCloseOnDocumentClick: true,
-  shouldReturnFocus: true,
-  open: false,
-  shadow: true,
-  border: true,
-  placement: 'start'
-}, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 exports.DrawerTray = DrawerTray;
 var _default = DrawerTray;
 exports.default = _default;