@instructure/ui-drawer-layout 11.6.0 → 11.6.1-snapshot-129

package/es/DrawerLayout/v2/index.js

@@ -0,0 +1,224 @@
+var _dec, _dec2, _dec3, _class, _DrawerLayout;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Children, Component, createContext } from 'react';
+import { textDirectionContextConsumer } from '@instructure/ui-i18n';
+import { matchComponentTypes, safeCloneElement, withDeterministicId } from '@instructure/ui-react-utils';
+import { getBoundingClientRect } from '@instructure/ui-dom-utils';
+import { createChainedFunction, px } from '@instructure/ui-utils';
+import { logError as error } from '@instructure/console';
+import { mirrorHorizontalPlacement } from '@instructure/ui-position';
+import { DrawerContent } from "./DrawerContent/index.js";
+import { DrawerTray } from "./DrawerTray/index.js";
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+**/
+let DrawerLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec3 = textDirectionContextConsumer(), _dec(_class = _dec2(_class = _dec3(_class = (_DrawerLayout = 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 = ({
+      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 = ({
+      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();
+  }
+  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;
+    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 {
+      trayWidth,
+      contentWidth,
+      shouldOverlayTray
+    };
+  }
+  notifyOverlayTrayChange(shouldOverlayTray) {
+    const onOverlayTrayChange = this.props.onOverlayTrayChange;
+    if (typeof onOverlayTrayChange === 'function') {
+      onOverlayTrayChange(shouldOverlayTray);
+    }
+  }
+  renderChildren() {
+    let trayCount = 0;
+    let contentCount = 0;
+    const children = Children.map(this.props.children, (child, _index) => {
+      if (matchComponentTypes(child, [DrawerTray])) {
+        trayCount++;
+        return safeCloneElement(child, {
+          label: child.props.label,
+          key: child.props.label,
+          [DrawerTray.locatorAttribute]: this._id,
+          contentRef: this.handleTrayContentRef,
+          onEnter: this.handleTrayTransitionEnter,
+          onExit: this.handleTrayTransitionExit
+        });
+      } 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,
+          [DrawerContent.locatorAttribute]: this._id,
+          style: this.contentStyle,
+          onSizeChange: createChainedFunction(this.handleContentSizeChange, child.props.onSizeChange),
+          contentRef: handleContentRef
+        }) : null;
+      } else {
+        return child;
+      }
+    });
+    error(trayCount <= 1, `[DrawerLayout] Only one 'DrawerTray' per 'DrawerLayout' is supported.`);
+    error(contentCount <= 1, `[DrawerLayout] Only one 'DrawerContent' per 'DrawerLayout' is supported.`);
+    return children;
+  }
+  render() {
+    var _this$props$styles;
+    const props = {
+      [DrawerLayout.locatorAttribute]: this._id
+    };
+    return _jsx(DrawerLayoutContext.Provider, {
+      value: this.state.shouldOverlayTray,
+      children: _jsx("div", {
+        ...props,
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerLayout,
+        ref: this.handleRef,
+        "data-cid": "DrawerLayout",
+        children: this.renderChildren()
+      })
+    });
+  }
+}, _DrawerLayout.displayName = "DrawerLayout", _DrawerLayout.componentId = 'DrawerLayout', _DrawerLayout.locatorAttribute = 'data-drawer-layout', _DrawerLayout.allowedProps = allowedProps, _DrawerLayout.defaultProps = {
+  minWidth: '30rem'
+}, _DrawerLayout.Content = DrawerContent, _DrawerLayout.Tray = DrawerTray, _DrawerLayout)) || _class) || _class) || _class);
+export default DrawerLayout;
+export { DrawerLayout, DrawerContent, DrawerTray };
+export const DrawerLayoutContext = /*#__PURE__*/createContext(false);

package/es/DrawerLayout/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['children', 'minWidth', 'onOverlayTrayChange', 'dir'];
+export { allowedProps };

package/es/DrawerLayout/v2/styles.js

@@ -0,0 +1,44 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = () => {
+  return {
+    drawerLayout: {
+      label: 'drawerLayout',
+      position: 'relative',
+      height: '100%'
+    }
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { DrawerLayout, DrawerContent, DrawerTray } from "./DrawerLayout/index.js";
+export { DrawerLayout, DrawerContent, DrawerTray } from "../DrawerLayout/v1/index.js";

package/es/exports/b.js

@@ -0,0 +1,24 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { DrawerLayout, DrawerContent, DrawerTray } from "../DrawerLayout/v2/index.js";

package/lib/DrawerLayout/{DrawerContent → v1/DrawerContent}/index.js

@@ -44,7 +44,7 @@ parent: DrawerLayout
 id: DrawerLayout.Content
 ---
 **/
-let DrawerContent = exports.DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_DrawerContent = class DrawerContent extends _react.Component {
+let DrawerContent = exports.DrawerContent = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_DrawerContent = class DrawerContent extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;

package/lib/DrawerLayout/{DrawerTray → v1/DrawerTray}/index.js

@@ -51,7 +51,7 @@ parent: DrawerLayout
 id: DrawerLayout.Tray
 ---
 **/
-let DrawerTray = exports.DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec(_class = _dec2(_class = (_DrawerTray = class DrawerTray extends _react.Component {
+let DrawerTray = exports.DrawerTray = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec(_class = _dec2(_class = (_DrawerTray = class DrawerTray extends _react.Component {
   get _content() {
     return this.ref;
   }

package/lib/DrawerLayout/v1/index.js

@@ -0,0 +1,245 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DrawerContent", {
+  enumerable: true,
+  get: function () {
+    return _DrawerContent.DrawerContent;
+  }
+});
+exports.DrawerLayoutContext = exports.DrawerLayout = void 0;
+Object.defineProperty(exports, "DrawerTray", {
+  enumerable: true,
+  get: function () {
+    return _DrawerTray.DrawerTray;
+  }
+});
+exports.default = void 0;
+var _react = require("react");
+var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
+var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
+var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
+var _px = require("@instructure/ui-utils/lib/px.js");
+var _console = require("@instructure/console");
+var _mirrorHorizontalPlacement = require("@instructure/ui-position/lib/mirrorHorizontalPlacement.js");
+var _DrawerContent = require("./DrawerContent");
+var _DrawerTray = require("./DrawerTray");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props2 = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _dec2, _dec3, _class, _DrawerLayout;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+category: components
+---
+**/
+let DrawerLayout = exports.DrawerLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec3 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec(_class = _dec2(_class = _dec3(_class = (_DrawerLayout = class DrawerLayout extends _react.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 = ({
+      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 = ({
+      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 = (0, _getBoundingClientRect.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();
+  }
+  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 = _react.Children.toArray(this.props.children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_DrawerTray.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;
+    const isRtl = dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl;
+    return isRtl ? (0, _mirrorHorizontalPlacement.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 = (0, _px.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 {
+      trayWidth,
+      contentWidth,
+      shouldOverlayTray
+    };
+  }
+  notifyOverlayTrayChange(shouldOverlayTray) {
+    const onOverlayTrayChange = this.props.onOverlayTrayChange;
+    if (typeof onOverlayTrayChange === 'function') {
+      onOverlayTrayChange(shouldOverlayTray);
+    }
+  }
+  renderChildren() {
+    let trayCount = 0;
+    let contentCount = 0;
+    const children = _react.Children.map(this.props.children, (child, _index) => {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrawerTray.DrawerTray])) {
+        trayCount++;
+        return (0, _safeCloneElement.safeCloneElement)(child, {
+          label: child.props.label,
+          key: child.props.label,
+          [_DrawerTray.DrawerTray.locatorAttribute]: this._id,
+          contentRef: this.handleTrayContentRef,
+          onEnter: this.handleTrayTransitionEnter,
+          onExit: this.handleTrayTransitionExit
+        });
+      } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrawerContent.DrawerContent])) {
+        contentCount++;
+        const handleContentRef = el => {
+          const contentRef = child.props.contentRef;
+          this._content = el;
+          if (typeof contentRef === 'function') {
+            contentRef(el);
+          }
+        };
+        return this.state.trayWidth !== null ? (0, _safeCloneElement.safeCloneElement)(child, {
+          label: child.props.label,
+          key: child.props.label,
+          [_DrawerContent.DrawerContent.locatorAttribute]: this._id,
+          style: this.contentStyle,
+          onSizeChange: (0, _createChainedFunction.createChainedFunction)(this.handleContentSizeChange, child.props.onSizeChange),
+          contentRef: handleContentRef
+        }) : null;
+      } else {
+        return child;
+      }
+    });
+    (0, _console.logError)(trayCount <= 1, `[DrawerLayout] Only one 'DrawerTray' per 'DrawerLayout' is supported.`);
+    (0, _console.logError)(contentCount <= 1, `[DrawerLayout] Only one 'DrawerContent' per 'DrawerLayout' is supported.`);
+    return children;
+  }
+  render() {
+    var _this$props$styles;
+    const props = {
+      [DrawerLayout.locatorAttribute]: this._id
+    };
+    return (0, _jsxRuntime.jsx)(DrawerLayoutContext.Provider, {
+      value: this.state.shouldOverlayTray,
+      children: (0, _jsxRuntime.jsx)("div", {
+        ...props,
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerLayout,
+        ref: this.handleRef,
+        "data-cid": "DrawerLayout",
+        children: this.renderChildren()
+      })
+    });
+  }
+}, _DrawerLayout.displayName = "DrawerLayout", _DrawerLayout.componentId = 'DrawerLayout', _DrawerLayout.locatorAttribute = 'data-drawer-layout', _DrawerLayout.allowedProps = _props2.allowedProps, _DrawerLayout.defaultProps = {
+  minWidth: '30rem'
+}, _DrawerLayout.Content = _DrawerContent.DrawerContent, _DrawerLayout.Tray = _DrawerTray.DrawerTray, _DrawerLayout)) || _class) || _class) || _class);
+var _default = exports.default = DrawerLayout;
+const DrawerLayoutContext = exports.DrawerLayoutContext = /*#__PURE__*/(0, _react.createContext)(false);