@instructure/ui-drawer-layout 8.14.1-snapshot.7 → 8.15.1-snapshot.2

package/lib/DrawerLayout/DrawerContent/index.js

@@ -32,23 +32,27 @@ var _dec, _dec2, _class, _class2, _temp;
 parent: DrawerLayout
 id: DrawerLayout.Content
 ---
+@tsProps
 **/
 let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class DrawerContent extends _react.Component {
   constructor() {
     super(...arguments);
-    this.state = {
-      shouldTransition: false
-    };
     this.ref = null;
-    this._resizeListener = null;
-    this._debounced = null;
-    this._timeouts = [];
+    this._resizeListener = void 0;
+    this._debounced = void 0;
 
-    this.handleContentRef = node => {
-      var _this$props$contentRe, _this$props;
+    this.makeStyleProps = shouldTransition => {
+      return {
+        shouldTransition
+      };
+    };
 
+    this.handleContentRef = node => {
       this.ref = node;
-      (_this$props$contentRe = (_this$props = this.props).contentRef) === null || _this$props$contentRe === void 0 ? void 0 : _this$props$contentRe.call(_this$props, node);
+
+      if (typeof this.props.contentRef === 'function') {
+        this.props.contentRef(node);
+      }
     };
   }
 
@@ -57,20 +61,25 @@ let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
   }
 
   componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+
     const rect = (0, _getBoundingClientRect.getBoundingClientRect)(this.ref);
     const origSize = {
       width: rect.width
     }; // set initial size
 
-    this.props.onSizeChange({
-      width: rect.width,
-      height: rect.height
-    }); // listen for changes to size
+    if (typeof this.props.onSizeChange === 'function') {
+      this.props.onSizeChange({
+        width: rect.width,
+        height: rect.height
+      }); // listen for changes to size
+
+      this._debounced = (0, _debounce.debounce)(this.props.onSizeChange, 100, {
+        leading: false,
+        trailing: true
+      });
+    }
 
-    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 = {
@@ -78,46 +87,39 @@ let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
         };
 
         if (size.width !== origSize.width) {
-          this._debounced(size);
+          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.makeStyles({
-      shouldTransition: false
-    });
+    (_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(prevProps, prevState, snapshot) {
-    this.props.makeStyles({
-      shouldTransition: true
-    });
+  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() {
-    if (this._resizeListener) {
-      this._resizeListener.disconnect();
-    }
-
-    if (this._debounced) {
-      this._debounced.cancel();
-    }
+    var _this$_resizeListener, _this$_debounced2;
 
-    this._timeouts.forEach(timeout => {
-      clearTimeout(timeout);
-    });
+    (_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$props2 = this.props,
-          style = _this$props2.style,
-          label = _this$props2.label,
-          role = _this$props2.role;
-    return (0, _emotion.jsx)("div", Object.assign({}, (0, _omitProps.omitProps)(this.props, DrawerContent.allowedProps, ['shouldTransition']), {
+    const _this$props3 = this.props,
+          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,
       ref: this.handleContentRef,
@@ -127,9 +129,6 @@ let DrawerContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
   }
 
 }, _class2.displayName = "DrawerContent", _class2.componentId = 'DrawerLayout.Content', _class2.locatorAttribute = 'data-drawer-content', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  children: null,
-  contentRef: el => {},
-  onSizeChange: node => {},
   role: 'region'
 }, _temp)) || _class) || _class);
 exports.DrawerContent = DrawerContent;

package/lib/DrawerLayout/DrawerContent/props.js

@@ -36,10 +36,6 @@ const propTypes = {
   label: _propTypes.default.string.isRequired,
   children: _propTypes.default.node,
   contentRef: _propTypes.default.func,
-
-  /**
-   * Callback fired whenever the `<DrawerLayout.Content />` changes size
-   */
   onSizeChange: _propTypes.default.func,
   role: _propTypes.default.string
 };

package/lib/DrawerLayout/DrawerContent/styles.js

@@ -39,7 +39,7 @@ exports.default = void 0;
  * @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 = (componentTheme, props, state) => {
+const generateStyle = (componentTheme, _props, state) => {
   const shouldTransition = state.shouldTransition;
   const transitionState = shouldTransition ? {
     transition: `margin ${componentTheme.duration}`

package/lib/DrawerLayout/DrawerLayoutLocator.js

@@ -48,6 +48,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 () {
     return _DrawerContentLocator.DrawerContentLocator.find(...arguments);

package/lib/DrawerLayout/DrawerTray/DrawerTrayLocator.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 DrawerTrayLocator = (0, _locator.locator)(_index.DrawerTray.selector);
 exports.DrawerTrayLocator = DrawerTrayLocator;

package/lib/DrawerLayout/DrawerTray/index.js

@@ -46,16 +46,17 @@ var _dec, _dec2, _dec3, _class, _class2, _temp;
 parent: DrawerLayout
 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 = (_temp = _class2 = class DrawerTray extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      transitioning: false,
-      portalOpen: false
-    };
-    this._DOMNode = null;
+  get _content() {
+    return this.ref;
+  }
+
+  constructor(props) {
+    super(props);
     this.ref = null;
+    this._DOMNode = null;
 
     this.makeStyleProps = () => {
       return {
@@ -64,19 +65,20 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     };
 
     this.handleContentRef = node => {
-      var _this$props$contentRe, _this$props;
-
       this.ref = node;
-      (_this$props$contentRe = (_this$props = this.props).contentRef) === null || _this$props$contentRe === void 0 ? void 0 : _this$props$contentRe.call(_this$props, node);
+
+      if (typeof this.props.contentRef === 'function') {
+        this.props.contentRef(node);
+      }
     };
 
-    this.handleTransitionEntered = () => {
+    this.handleTransitionEntered = _transitionType => {
       this.setState({
         transitioning: false
       });
     };
 
-    this.handleTransitionExited = () => {
+    this.handleTransitionExited = _transitionType => {
       this.setState({
         transitioning: false
       });
@@ -88,32 +90,35 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
         portalOpen: true
       });
     };
-  }
 
-  get _content() {
-    return this.ref;
+    this.state = {
+      transitioning: false,
+      portalOpen: false
+    };
   }
 
   componentDidMount() {
-    ;
-    this.props.makeStyles(this.makeStyleProps());
+    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, this.makeStyleProps());
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props2;
+
     if (this.props.open !== prevProps.open) {
       this.setState({
         transitioning: true
       });
     }
 
-    ;
-    this.props.makeStyles(this.makeStyleProps());
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
 
   get placement() {
-    const _this$props2 = this.props,
-          placement = _this$props2.placement,
-          dir = _this$props2.dir;
+    const _this$props3 = this.props,
+          placement = _this$props3.placement,
+          dir = _this$props3.dir;
     const isRtl = dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl;
     return isRtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement;
   }
@@ -135,9 +140,9 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   renderContent() {
-    const _this$props3 = this.props,
-          children = _this$props3.children,
-          render = _this$props3.render;
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          render = _this$props4.render;
 
     if (typeof render === 'function') {
       return render();
@@ -149,39 +154,39 @@ let DrawerTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   render() {
-    const _this$props4 = this.props,
-          label = _this$props4.label,
-          children = _this$props4.children,
-          render = _this$props4.render,
-          placement = _this$props4.placement,
-          open = _this$props4.open,
-          onOpen = _this$props4.onOpen,
-          onClose = _this$props4.onClose,
-          border = _this$props4.border,
-          shadow = _this$props4.shadow,
-          onEnter = _this$props4.onEnter,
-          onEntering = _this$props4.onEntering,
-          onEntered = _this$props4.onEntered,
-          onExit = _this$props4.onExit,
-          onExiting = _this$props4.onExiting,
-          onExited = _this$props4.onExited,
-          contentRef = _this$props4.contentRef,
-          mountNode = _this$props4.mountNode,
-          defaultFocusElement = _this$props4.defaultFocusElement,
-          liveRegion = _this$props4.liveRegion,
-          onDismiss = _this$props4.onDismiss,
-          onTransition = _this$props4.onTransition,
-          shouldReturnFocus = _this$props4.shouldReturnFocus,
-          shouldCloseOnEscape = _this$props4.shouldCloseOnEscape,
-          shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
-          shouldContainFocus = _this$props4.shouldContainFocus,
-          styles = _this$props4.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
+    const _this$props5 = this.props,
+          label = _this$props5.label,
+          children = _this$props5.children,
+          render = _this$props5.render,
+          placement = _this$props5.placement,
+          open = _this$props5.open,
+          onOpen = _this$props5.onOpen,
+          onClose = _this$props5.onClose,
+          border = _this$props5.border,
+          shadow = _this$props5.shadow,
+          onEnter = _this$props5.onEnter,
+          onEntering = _this$props5.onEntering,
+          onEntered = _this$props5.onEntered,
+          onExit = _this$props5.onExit,
+          onExiting = _this$props5.onExiting,
+          onExited = _this$props5.onExited,
+          contentRef = _this$props5.contentRef,
+          mountNode = _this$props5.mountNode,
+          defaultFocusElement = _this$props5.defaultFocusElement,
+          liveRegion = _this$props5.liveRegion,
+          onDismiss = _this$props5.onDismiss,
+          onTransition = _this$props5.onTransition,
+          shouldReturnFocus = _this$props5.shouldReturnFocus,
+          shouldCloseOnEscape = _this$props5.shouldCloseOnEscape,
+          shouldCloseOnDocumentClick = _this$props5.shouldCloseOnDocumentClick,
+          shouldContainFocus = _this$props5.shouldContainFocus,
+          styles = _this$props5.styles,
+          props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
     return (0, _emotion.jsx)(_index.DrawerLayoutContext.Consumer, null, shouldOverlayTray => {
       var _this$props$styles;
 
       const portalOpen = this.state.portalOpen;
-      const needsPortal = shouldOverlayTray && mountNode; // we have to handle the shadow version here,
+      const needsPortal = shouldOverlayTray && !!mountNode; // we have to handle the shadow version here,
       // because passing and handling it in styles.js makes it
       // rerender the component during the transition, breaking it
 
@@ -234,24 +239,14 @@ 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 = {
-  children: null,
   shouldContainFocus: true,
   shouldCloseOnEscape: true,
   shouldCloseOnDocumentClick: true,
   shouldReturnFocus: true,
   open: false,
-  onOpen: () => {},
   shadow: true,
   border: true,
-  placement: 'start',
-  mountNode: null,
-  onEnter: () => {},
-  onEntering: () => {},
-  onEntered: () => {},
-  onExit: () => {},
-  onExiting: () => {},
-  onExited: () => {},
-  contentRef: node => {}
+  placement: 'start'
 }, _temp)) || _class) || _class) || _class);
 exports.DrawerTray = DrawerTray;
 var _default = DrawerTray;

package/lib/DrawerLayout/DrawerTray/props.js

@@ -40,92 +40,22 @@ const propTypes = {
   label: _propTypes.default.string.isRequired,
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   render: _propTypes.default.func,
-
-  /**
-   * Placement of the `<DrawerLayout.Tray />`
-   */
   placement: _propTypes.default.oneOf(['start', 'end']),
-
-  /**
-   * If the tray is open or closed.
-   */
   open: _propTypes.default.bool,
-
-  /**
-   * Called when the `<DrawerLayout.Tray />` is opened
-   */
   onOpen: _propTypes.default.func,
-
-  /**
-   * Called when the `<DrawerLayout.Tray />` is closed
-   */
   onClose: _propTypes.default.func,
-
-  /**
-   * Should the `<DrawerLayout.Tray />` have a border
-   */
   border: _propTypes.default.bool,
-
-  /**
-   * Should the `<DrawerLayout.Tray />` have a shadow
-   */
   shadow: _propTypes.default.bool,
-
-  /**
-   * Callback fired when the `<DrawerLayout.Tray />` transitions in/out
-   */
   onTransition: _propTypes.default.func,
-
-  /**
-   * Callback fired before the `<DrawerLayout.Tray />` transitions in
-   */
   onEnter: _propTypes.default.func,
-
-  /**
-   * Callback fired as the `<DrawerLayout.Tray />` begins to transition in
-   */
   onEntering: _propTypes.default.func,
-
-  /**
-   * Callback fired after the `<DrawerLayout.Tray />` finishes transitioning in
-   */
   onEntered: _propTypes.default.func,
-
-  /**
-   * Callback fired right before the `<DrawerLayout.Tray />` transitions out
-   */
   onExit: _propTypes.default.func,
-
-  /**
-   * Callback fired as the `<DrawerLayout.Tray />` begins to transition out
-   */
   onExiting: _propTypes.default.func,
-
-  /**
-   * Callback fired after the `<DrawerLayout.Tray />` finishes transitioning out
-   */
   onExited: _propTypes.default.func,
-
-  /**
-   * Ref function for the `<DrawerLayout.Tray />` content
-   */
   contentRef: _propTypes.default.func,
-
-  /**
-   * An element or a function returning an element to use as the mount node
-   * for the `<DrawerLayout.Tray />` when tray is overlaying content
-   */
   mountNode: _propTypes.default.oneOfType([_element.element, _propTypes.default.func]),
-
-  /**
-   * An element or a function returning an element to focus by default
-   */
   defaultFocusElement: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
-
-  /**
-   * An element, function returning an element, or array of elements that will not be hidden from
-   * the screen reader when the `<DrawerLayout.Tray />` is open
-   */
   liveRegion: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.element, _propTypes.default.func]),
   onDismiss: _propTypes.default.func,
   shouldContainFocus: _propTypes.default.bool,

package/lib/DrawerLayout/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -20,7 +22,7 @@ Object.defineProperty(exports, "DrawerTray", {
 });
 exports.default = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
 
@@ -58,11 +60,14 @@ var _dec, _dec2, _dec3, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let DrawerLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = 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 => {
@@ -126,11 +131,15 @@ let DrawerLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  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() {
@@ -205,12 +214,12 @@ let DrawerLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2
   renderChildren() {
     let trayCount = 0;
     let contentCount = 0;
-    const shouldOverlayTray = this.shouldOverlayTray(this.props.minWidth, this.state.trayWidth, this.state.contentWidth, this.state.shouldOverlayTray);
 
-    const children = _react.Children.map(this.props.children, (child, index) => {
+    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,
@@ -221,20 +230,21 @@ let DrawerLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2
         contentCount++;
 
         const handleContentRef = el => {
+          const contentRef = child.props.contentRef;
           this._content = el;
 
-          if (typeof child.props.contentRef === 'function') {
-            child.props.contentRef(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,
-          shouldTransition: !shouldOverlayTray
+          contentRef: handleContentRef
         }) : null;
       } else {
         return child;
@@ -261,9 +271,7 @@ let DrawerLayout = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2
   }
 
 }, _class2.displayName = "DrawerLayout", _class2.componentId = 'DrawerLayout', _class2.locatorAttribute = 'data-drawer-layout', _class2.propTypes = _props2.propTypes, _class2.allowedProps = _props2.allowedProps, _class2.defaultProps = {
-  children: null,
-  minWidth: '30rem',
-  onOverlayTrayChange: shouldOverlayTray => {}
+  minWidth: '30rem'
 }, _class2.Content = _DrawerContent.DrawerContent, _class2.Tray = _DrawerTray.DrawerTray, _temp)) || _class) || _class) || _class);
 exports.DrawerLayout = DrawerLayout;
 var _default = DrawerLayout;

package/lib/DrawerLayout/props.js

@@ -41,21 +41,8 @@ var _DrawerTray = require("./DrawerTray");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * Exactly one of each of the following child types: `DrawerLayout.Content`, `DrawerLayout.Tray`
-   */
   children: _Children.Children.oneOfEach([_DrawerContent.DrawerContent, _DrawerTray.DrawerTray]),
-
-  /**
-   * Min width for the `<DrawerLayout.Content />`
-   */
   minWidth: _propTypes.default.string,
-
-  /**
-   * Function called when the `<DrawerLayout.Content />` is resized and hits the `minWidth` breakpoint
-   * Called with a boolean value, `true` if the tray is now overlaying the content or `false` if
-   * it is side by side
-   */
   onOverlayTrayChange: _propTypes.default.func,
   dir: _propTypes.default.oneOf(Object.values(_textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION))
 };