@instructure/ui-drawer-layout 8.33.1 → 8.33.2-snapshot-5

package/es/DrawerLayout/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _dec3, _dec4, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -38,7 +37,6 @@ import { DrawerTray } from './DrawerTray';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -52,59 +50,46 @@ let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
     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,
@@ -112,70 +97,56 @@ let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
     };
     this._id = _props.deterministicId();
   }
-
   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() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   get trayProps() {
     const tray = Children.toArray(this.props.children).filter(child => matchComponentTypes(child, [DrawerTray]))[0];
     return tray.props;
   }
-
   get trayPlacement() {
     const _this$trayProps = this.trayProps,
-          placement = _this$trayProps.placement,
-          _this$trayProps$dir = _this$trayProps.dir,
-          dir = _this$trayProps$dir === void 0 ? this.props.dir : _this$trayProps$dir;
+      placement = _this$trayProps.placement,
+      _this$trayProps$dir = _this$trayProps.dir,
+      dir = _this$trayProps$dir === void 0 ? this.props.dir : _this$trayProps$dir;
     const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl;
     return isRtl ? mirrorHorizontalPlacement(placement, ' ') : placement;
   }
-
   get contentMargin() {
     const trayWidth = this.state.trayWidth || 0;
     return this.state.shouldOverlayTray ? 0 : trayWidth;
   }
-
   get contentStyle() {
     const shouldOverlayTray = this.shouldOverlayTray(this.props.minWidth, this.state.trayWidth, this.state.contentWidth, this.state.shouldOverlayTray);
     let marginLeft = 0;
     let marginRight = 0;
-
     if (!shouldOverlayTray) {
       if (this.trayPlacement === 'start') {
         marginLeft = this.contentMargin;
       }
-
       if (this.trayPlacement === 'end') {
         marginRight = this.contentMargin;
       }
     }
-
     return {
       marginLeft: `${marginLeft}px`,
       marginRight: `${marginRight}px`
     };
   }
-
   shouldOverlayTray(minWidth, trayWidth, contentWidth, trayIsOverlayed) {
     if (!this._content) return false;
     const minWidthPx = px(minWidth, this._content);
-
     if (trayIsOverlayed) {
       return contentWidth - trayWidth < minWidthPx;
     } else {
       return contentWidth < minWidthPx;
     }
   }
-
   getNextState(minWidth, trayWidth, contentWidth, trayIsOverlayed) {
     const shouldOverlayTray = this.shouldOverlayTray(minWidth, trayWidth, contentWidth, trayIsOverlayed);
     return {
@@ -184,15 +155,12 @@ let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
       shouldOverlayTray
     };
   }
-
   notifyOverlayTrayChange(shouldOverlayTray) {
     const onOverlayTrayChange = this.props.onOverlayTrayChange;
-
     if (typeof onOverlayTrayChange === 'function') {
       onOverlayTrayChange(shouldOverlayTray);
     }
   }
-
   renderChildren() {
     let trayCount = 0;
     let contentCount = 0;
@@ -209,16 +177,13 @@ let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
         });
       } else if (matchComponentTypes(child, [DrawerContent])) {
         contentCount++;
-
         const handleContentRef = el => {
           const contentRef = child.props.contentRef;
           this._content = el;
-
           if (typeof contentRef === 'function') {
             contentRef(el);
           }
         };
-
         return this.state.trayWidth !== null ? safeCloneElement(child, {
           label: child.props.label,
           key: child.props.label,
@@ -235,10 +200,8 @@ let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
     error(contentCount <= 1, `[DrawerLayout] Only one 'DrawerContent' per 'DrawerLayout' is supported.`);
     return children;
   }
-
   render() {
     var _this$props$styles;
-
     const props = {
       [DrawerLayout.locatorAttribute]: this._id
     };
@@ -249,7 +212,6 @@ let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyl
       ref: this.handleRef
     }), 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);

package/es/DrawerLayout/locator.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { DrawerLayoutLocator } from './DrawerLayoutLocator';
 export { DrawerContentLocator, DrawerTrayLocator } from './DrawerLayoutLocator';
 export { DrawerLayoutLocator };

package/es/DrawerLayout/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { textDirectionContextConsumer } from '@instructure/ui-i18n';

package/es/DrawerLayout/styles.js

@@ -41,5 +41,4 @@ const generateStyle = () => {
     }
   };
 };
-
 export default generateStyle;

package/es/index.js

@@ -21,4 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export { DrawerLayout, DrawerContent } from './DrawerLayout';

package/lib/DrawerLayout/DrawerContent/DrawerContentLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DrawerContentLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ 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 DrawerContentLocator = (0, _locator.locator)(_index.DrawerContent.selector);
 exports.DrawerContentLocator = DrawerContentLocator;

package/lib/DrawerLayout/DrawerContent/index.js

@@ -1,32 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DrawerContent = void 0;
-
 var _react = require("react");
-
 var _debounce = require("@instructure/debounce");
-
 var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 parent: DrawerLayout
@@ -40,85 +28,69 @@ let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
     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;
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     const rect = (0, _getBoundingClientRect.getBoundingClientRect)(this.ref);
     const origSize = {
       width: rect.width
-    }; // set initial size
-
+    };
+    // set initial size
     if (typeof this.props.onSizeChange === 'function') {
       this.props.onSizeChange({
         width: rect.width,
         height: rect.height
-      }); // listen for changes to size
+      });
 
+      // listen for changes to size
       this._debounced = (0, _debounce.debounce)(this.props.onSizeChange, 100, {
         leading: false,
         trailing: true
       });
     }
-
     this._resizeListener = new ResizeObserver(entries => {
       for (const entry of entries) {
         const size = {
           width: entry.contentRect.width
         };
-
         if (size.width !== origSize.width) {
           var _this$_debounced;
-
           (_this$_debounced = this._debounced) === null || _this$_debounced === void 0 ? void 0 : _this$_debounced.call(this, size);
         }
       }
     });
-
     this._resizeListener.observe(this.ref);
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps(false));
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps(true));
   }
-
   componentWillUnmount() {
     var _this$_resizeListener, _this$_debounced2;
-
     (_this$_resizeListener = this._resizeListener) === null || _this$_resizeListener === void 0 ? void 0 : _this$_resizeListener.disconnect();
     (_this$_debounced2 = this._debounced) === null || _this$_debounced2 === void 0 ? void 0 : _this$_debounced2.cancel();
   }
-
   render() {
     var _this$props$styles;
-
     const _this$props3 = this.props,
-          style = _this$props3.style,
-          label = _this$props3.label,
-          role = _this$props3.role;
+      style = _this$props3.style,
+      label = _this$props3.label,
+      role = _this$props3.role;
     return (0, _emotion.jsx)("div", Object.assign({}, (0, _omitProps.omitProps)(this.props, DrawerContent.allowedProps), {
       role: role,
       style: style,
@@ -127,7 +99,6 @@ let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerContent
     }), 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);

package/lib/DrawerLayout/DrawerContent/props.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   label: _propTypes.default.string.isRequired,
   children: _propTypes.default.node,

package/lib/DrawerLayout/DrawerContent/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -54,6 +53,5 @@ const generateStyle = (componentTheme, _props, state) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/DrawerLayout/DrawerContent/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -41,6 +40,5 @@ const generateComponentTheme = theme => {
     overflowY: 'auto'
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/DrawerLayout/DrawerLayoutLocator.js

@@ -16,15 +16,10 @@ Object.defineProperty(exports, "DrawerTrayLocator", {
     return _DrawerTrayLocator.DrawerTrayLocator;
   }
 });
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 var _DrawerContentLocator = require("./DrawerContent/DrawerContentLocator");
-
 var _DrawerTrayLocator = require("./DrawerTray/DrawerTrayLocator");
-
 /*
  * The MIT License (MIT)
  *
@@ -48,6 +43,7 @@ var _DrawerTrayLocator = require("./DrawerTray/DrawerTrayLocator");
  * 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 DrawerLayoutLocator = (0, _locator.locator)(_index.DrawerLayout.selector, {
   findContent: function () {
@@ -56,11 +52,9 @@ const DrawerLayoutLocator = (0, _locator.locator)(_index.DrawerLayout.selector,
   findTray: function (element) {
     if (element && element.getAttribute) {
       const id = element.getAttribute(_index.DrawerLayout.locatorAttribute);
-
       for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
         args[_key - 1] = arguments[_key];
       }
-
       return (0, _locator.locator)(`[${_index.DrawerLayout.Tray.locatorAttribute}="${id}"]`).find(...args);
     } else {
       return null;

package/lib/DrawerLayout/DrawerTray/DrawerTrayLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DrawerTrayLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ 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 DrawerTrayLocator = (0, _locator.locator)(_index.DrawerTray.selector);
 exports.DrawerTrayLocator = DrawerTrayLocator;