@instructure/ui-drawer-layout 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-drawer-layout
 

package/es/DrawerLayout/DrawerContent/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -42,24 +42,32 @@ id: DrawerLayout.Content
 ---
 @tsProps
 **/
-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;
+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);
+      }
+    };
+  }
 
   get _content() {
     return this.ref;
   }
 
-  _resizeListener;
-  _debounced;
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
@@ -112,19 +120,6 @@ 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;
 
@@ -141,6 +136,8 @@ let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     }), this.props.children);
   }
 
-}) || _class) || _class);
+}, _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);
 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;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -50,31 +50,49 @@ id: DrawerLayout.Tray
 ---
 @tsProps
 **/
-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;
-
+let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class DrawerTray extends Component {
   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
@@ -99,12 +117,6 @@ 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,
@@ -121,30 +133,6 @@ 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;
   }
@@ -253,6 +241,15 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     });
   }
 
-}) || _class) || _class) || _class);
+}, _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);
 export default DrawerTray;
 export { DrawerTray };

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

@@ -27,22 +27,6 @@ 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,
@@ -70,4 +54,19 @@ 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;
+var _dec, _dec2, _dec3, _dec4, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -45,36 +45,74 @@ category: components
 ---
 @tsProps
 **/
-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);
+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
+      });
+    };
+
     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;
 
@@ -127,10 +165,6 @@ 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);
@@ -159,47 +193,6 @@ 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;
@@ -257,7 +250,9 @@ let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
     }), this.renderChildren()));
   }
 
-}) || _class) || _class) || _class) || _class);
+}, _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);
 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;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -34,24 +34,32 @@ id: DrawerLayout.Content
 ---
 @tsProps
 **/
-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;
+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);
+      }
+    };
+  }
 
   get _content() {
     return this.ref;
   }
 
-  _resizeListener;
-  _debounced;
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
@@ -104,19 +112,6 @@ 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;
 
@@ -133,7 +128,9 @@ let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
     }), this.props.children);
   }
 
-}) || _class) || _class);
+}, _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);
 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;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /**
 ---
@@ -48,31 +48,49 @@ 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 = 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;
-
+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 {
   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
@@ -97,12 +115,6 @@ 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,
@@ -119,30 +131,6 @@ 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;
   }
@@ -250,7 +238,16 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     });
   }
 
-}) || _class) || _class) || _class);
+}, _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);
 exports.DrawerTray = DrawerTray;
 var _default = DrawerTray;
 exports.default = _default;