@instructure/ui-drawer-layout 8.8.1-snapshot.8 → 8.9.1

package/src/DrawerLayout/DrawerTray/props.ts

@@ -0,0 +1,205 @@
+/*
+ * 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 React from 'react'
+import PropTypes from 'prop-types'
+
+import { element } from '@instructure/ui-prop-types'
+import { bidirectional } from '@instructure/ui-i18n'
+
+import type { PositionMountNode } from '@instructure/ui-position'
+import type { BidirectionalProps } from '@instructure/ui-i18n'
+import type { WithStyleProps } from '@instructure/emotion'
+import type { PropValidators } from '@instructure/shared-types'
+
+type DrawerTrayPlacement = 'start' | 'end'
+
+type DrawerLayoutTrayOwnProps = {
+  label: string
+  children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
+  render?: (...args: any[]) => any
+  placement?: DrawerTrayPlacement
+  open?: boolean
+  onOpen?: (...args: any[]) => any
+  onClose?: (...args: any[]) => any
+  border?: boolean
+  shadow?: boolean
+  onTransition?: (...args: any[]) => any
+  onEnter?: (...args: any[]) => any
+  onEntering?: (...args: any[]) => any
+  onEntered?: (...args: any[]) => any
+  onExit?: (...args: any[]) => any
+  onExiting?: (...args: any[]) => any
+  onExited?: (...args: any[]) => any
+  contentRef?: (...args: any[]) => any
+  mountNode?: PositionMountNode
+  defaultFocusElement?: React.ReactElement | ((...args: any[]) => any)
+  liveRegion?:
+    | React.ReactElement[]
+    | React.ReactElement
+    | ((...args: any[]) => any)
+  onDismiss?: (...args: any[]) => any
+  shouldContainFocus?: boolean
+  shouldReturnFocus?: boolean
+  shouldCloseOnDocumentClick?: boolean
+  shouldCloseOnEscape?: boolean
+} & BidirectionalProps
+
+type DrawerLayoutTrayState = {
+  transitioning: boolean
+  portalOpen: boolean
+}
+
+type DrawerLayoutTrayStyleProps = {
+  placement: DrawerTrayPlacement
+}
+
+type PropKeys = keyof DrawerLayoutTrayOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type DrawerLayoutTrayProps = DrawerLayoutTrayOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  label: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  render: PropTypes.func,
+  /**
+   * Placement of the `<DrawerLayout.Tray />`
+   */
+  placement: PropTypes.oneOf(['start', 'end']),
+  /**
+   * If the tray is open or closed.
+   */
+  open: PropTypes.bool,
+  /**
+   * Called when the `<DrawerLayout.Tray />` is opened
+   */
+  onOpen: PropTypes.func,
+  /**
+   * Called when the `<DrawerLayout.Tray />` is closed
+   */
+  onClose: PropTypes.func,
+  /**
+   * Should the `<DrawerLayout.Tray />` have a border
+   */
+  border: PropTypes.bool,
+  /**
+   * Should the `<DrawerLayout.Tray />` have a shadow
+   */
+  shadow: PropTypes.bool,
+  /**
+   * Callback fired when the `<DrawerLayout.Tray />` transitions in/out
+   */
+  onTransition: PropTypes.func,
+  /**
+   * Callback fired before the `<DrawerLayout.Tray />` transitions in
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired as the `<DrawerLayout.Tray />` begins to transition in
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired after the `<DrawerLayout.Tray />` finishes transitioning in
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired right before the `<DrawerLayout.Tray />` transitions out
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired as the `<DrawerLayout.Tray />` begins to transition out
+   */
+  onExiting: PropTypes.func,
+  /**
+   * Callback fired after the `<DrawerLayout.Tray />` finishes transitioning out
+   */
+  onExited: PropTypes.func,
+  /**
+   * Ref function for the `<DrawerLayout.Tray />` content
+   */
+  contentRef: PropTypes.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.oneOfType([element, PropTypes.func]),
+  /**
+   * An element or a function returning an element to focus by default
+   */
+  defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.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.oneOfType([
+    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.element,
+    PropTypes.func
+  ]),
+  onDismiss: PropTypes.func,
+  shouldContainFocus: PropTypes.bool,
+  shouldReturnFocus: PropTypes.bool,
+  shouldCloseOnDocumentClick: PropTypes.bool,
+  shouldCloseOnEscape: PropTypes.bool,
+  dir: PropTypes.oneOf(Object.values(bidirectional.DIRECTION))
+}
+
+const allowedProps: AllowedPropKeys = [
+  'label',
+  'children',
+  'render',
+  'placement',
+  'open',
+  'onOpen',
+  'onClose',
+  'border',
+  'shadow',
+  'onTransition',
+  'onEnter',
+  'onEntering',
+  'onEntered',
+  'onExit',
+  'onExiting',
+  'onExited',
+  'contentRef',
+  'mountNode',
+  'defaultFocusElement',
+  'liveRegion',
+  'onDismiss',
+  'shouldContainFocus',
+  'shouldReturnFocus',
+  'shouldCloseOnDocumentClick',
+  'shouldCloseOnEscape',
+  'dir'
+]
+
+export type {
+  DrawerLayoutTrayProps,
+  DrawerLayoutTrayState,
+  DrawerLayoutTrayStyleProps,
+  DrawerTrayPlacement
+}
+export { propTypes, allowedProps }

package/src/DrawerLayout/DrawerTray/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { DrawerLayoutTrayTheme } from '@instructure/shared-types'
-import { DrawerLayoutTrayProps, DrawerLayoutTrayStyleProps } from './types'
+import { DrawerLayoutTrayProps, DrawerLayoutTrayStyleProps } from './props'
 
 /**
  * ---

package/src/DrawerLayout/index.tsx

@@ -24,10 +24,8 @@
 
 /** @jsx jsx */
 import { Children, Component, createContext } from 'react'
-import PropTypes from 'prop-types'
 
 import { bidirectional } from '@instructure/ui-i18n'
-import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 import {
   matchComponentTypes,
   safeCloneElement
@@ -44,7 +42,9 @@ import { DrawerTray } from './DrawerTray'
 
 import { withStyle, jsx } from '@instructure/emotion'
 import generateStyle from './styles'
-import { DrawerLayoutProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { DrawerLayoutProps } from './props'
 
 /**
 ---
@@ -58,29 +58,8 @@ class DrawerLayout extends Component<DrawerLayoutProps> {
   static readonly componentId = 'DrawerLayout'
 
   static locatorAttribute = 'data-drawer-layout'
-  static propTypes = {
-    /**
-     * Exactly one of each of the following child types: `DrawerLayout.Content`, `DrawerLayout.Tray`
-     */
-    children: ChildrenPropTypes.oneOfEach([DrawerContent, DrawerTray]),
-    /**
-     * Min width for the `<DrawerLayout.Content />`
-     */
-    minWidth: PropTypes.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.func,
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    // eslint-disable-next-line react/require-default-props
-    dir: PropTypes.oneOf(Object.values(bidirectional.DIRECTION))
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     children: null,
     minWidth: '30rem',
@@ -346,7 +325,7 @@ class DrawerLayout extends Component<DrawerLayoutProps> {
     return (
       // @ts-expect-error ts-migrate(2339) FIXME: Property 'shouldOverlayTray' does not exist on typ... Remove this comment to see the full error message
       <DrawerLayoutContext.Provider value={this.state.shouldOverlayTray}>
-        <div {...props} css={this.props.styles.drawerLayout}>
+        <div {...props} css={this.props.styles?.drawerLayout}>
           {this.renderChildren()}
         </div>
       </DrawerLayoutContext.Provider>

package/src/DrawerLayout/props.ts

@@ -0,0 +1,75 @@
+/*
+ * 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 PropTypes from 'prop-types'
+
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
+import { bidirectional } from '@instructure/ui-i18n'
+
+import { DrawerContent } from './DrawerContent'
+import { DrawerTray } from './DrawerTray'
+
+import type { BidirectionalProps } from '@instructure/ui-i18n'
+import type { WithStyleProps } from '@instructure/emotion'
+import type { PropValidators } from '@instructure/shared-types'
+
+type DrawerLayoutOwnProps = {
+  children?: React.ReactNode // TODO: oneOfEach([DrawerContent, DrawerTray])
+  minWidth?: string
+  onOverlayTrayChange?: (...args: any[]) => any
+} & BidirectionalProps
+
+type PropKeys = keyof DrawerLayoutOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type DrawerLayoutProps = DrawerLayoutOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  /**
+   * Exactly one of each of the following child types: `DrawerLayout.Content`, `DrawerLayout.Tray`
+   */
+  children: ChildrenPropTypes.oneOfEach([DrawerContent, DrawerTray]),
+  /**
+   * Min width for the `<DrawerLayout.Content />`
+   */
+  minWidth: PropTypes.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.func,
+  dir: PropTypes.oneOf(Object.values(bidirectional.DIRECTION))
+}
+
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'minWidth',
+  'onOverlayTrayChange',
+  'dir'
+]
+
+export type { DrawerLayoutProps }
+export { propTypes, allowedProps }

package/src/index.ts

@@ -24,6 +24,6 @@
 
 export { DrawerLayout, DrawerContent } from './DrawerLayout'
 
-export type { DrawerLayoutProps } from './DrawerLayout/types'
-export type { DrawerLayoutContentProps } from './DrawerLayout/DrawerContent/types'
-export type { DrawerLayoutTrayProps } from './DrawerLayout/DrawerTray/types'
+export type { DrawerLayoutProps } from './DrawerLayout/props'
+export type { DrawerLayoutContentProps } from './DrawerLayout/DrawerContent/props'
+export type { DrawerLayoutTrayProps } from './DrawerLayout/DrawerTray/props'

package/types/DrawerLayout/DrawerContent/index.d.ts

@@ -1,8 +1,7 @@
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { jsx } from '@instructure/emotion';
-import { DrawerLayoutContentProps, DrawerLayoutContentState } from './types';
+import type { DrawerLayoutContentProps, DrawerLayoutContentState } from './props';
 /**
 ---
 parent: DrawerLayout
@@ -12,18 +11,20 @@ id: DrawerLayout.Content
 declare class DrawerContent extends Component<DrawerLayoutContentProps, DrawerLayoutContentState> {
     static readonly componentId = "DrawerLayout.Content";
     static locatorAttribute: string;
-    static propTypes: {
-        label: PropTypes.Validator<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        contentRef: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Callback fired whenever the `<DrawerLayout.Content />` changes size
-         */
-        onSizeChange: PropTypes.Requireable<(...args: any[]) => any>;
-        role: PropTypes.Requireable<string>;
-        makeStyles: PropTypes.Requireable<(...args: any[]) => any>;
-        styles: PropTypes.Requireable<object>;
-    };
+    static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
+        label: string;
+        children?: import("react").ReactNode;
+        contentRef?: ((...args: any[]) => any) | undefined;
+        onSizeChange?: ((...args: any[]) => any) | undefined;
+        role?: string | undefined;
+    }>;
+    static allowedProps: readonly (keyof {
+        label: string;
+        children?: import("react").ReactNode;
+        contentRef?: ((...args: any[]) => any) | undefined;
+        onSizeChange?: ((...args: any[]) => any) | undefined;
+        role?: string | undefined;
+    })[];
     static defaultProps: {
         children: null;
         contentRef: (el: any) => void;

package/types/DrawerLayout/DrawerContent/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DrawerLayout/DrawerContent/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,SAAS,MAAM,YAAY,CAAA;AAMlC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAIrD,OAAO,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAE5E;;;;;GAKG;AACH,cAEM,aAAc,SAAQ,SAAS,CACnC,wBAAwB,EACxB,wBAAwB,CACzB;IACC,MAAM,CAAC,QAAQ,CAAC,WAAW,0BAAyB;IAEpD,MAAM,CAAC,gBAAgB,SAAwB;IAC/C,MAAM,CAAC,SAAS;;;;QAId;;WAEG;;;;;MAQJ;IAED,MAAM,CAAC,YAAY;;yBAGA,GAAG;6BAEC,GAAG;;MAEzB;IAED,KAAK,EAAE,wBAAwB,CAE9B;IAED,QAAQ,OAAO;IACf,eAAe,OAAO;IAEtB,UAAU,OAAO;IACjB,SAAS,UAAK;IAEd,iBAAiB;IAkCjB,kBAAkB,CAAC,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG;IAKhE,oBAAoB;IAgBpB,gBAAgB,SAAU,GAAG,UAK5B;IAED,MAAM;CAuBP;AAED,eAAe,aAAa,CAAA;AAC5B,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DrawerLayout/DrawerContent/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EACV,wBAAwB,EACxB,wBAAwB,EACzB,MAAM,SAAS,CAAA;AAEhB;;;;;GAKG;AACH,cAEM,aAAc,SAAQ,SAAS,CACnC,wBAAwB,EACxB,wBAAwB,CACzB;IACC,MAAM,CAAC,QAAQ,CAAC,WAAW,0BAAyB;IAEpD,MAAM,CAAC,gBAAgB,SAAwB;IAC/C,MAAM,CAAC,SAAS;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;yBAGA,GAAG;6BAEC,GAAG;;MAEzB;IAED,KAAK,EAAE,wBAAwB,CAE9B;IAED,QAAQ,OAAO;IACf,eAAe,OAAO;IAEtB,UAAU,OAAO;IACjB,SAAS,UAAK;IAEd,iBAAiB;IAkCjB,kBAAkB,CAAC,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG;IAKhE,oBAAoB;IAgBpB,gBAAgB,SAAU,GAAG,UAK5B;IAED,MAAM;CAuBP;AAED,eAAe,aAAa,CAAA;AAC5B,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/types/DrawerLayout/DrawerContent/props.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { PropValidators } from '@instructure/shared-types';
+import type { WithStyleProps } from '@instructure/emotion';
+declare type DrawerLayoutContentOwnProps = {
+    label: string;
+    children?: React.ReactNode;
+    contentRef?: (...args: any[]) => any;
+    onSizeChange?: (...args: any[]) => any;
+    role?: string;
+};
+declare type DrawerLayoutContentState = {
+    shouldTransition: boolean;
+};
+declare type PropKeys = keyof DrawerLayoutContentOwnProps;
+declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
+declare type DrawerLayoutContentProps = DrawerLayoutContentOwnProps & WithStyleProps;
+declare const propTypes: PropValidators<PropKeys>;
+declare const allowedProps: AllowedPropKeys;
+export type { DrawerLayoutContentProps, DrawerLayoutContentState };
+export { propTypes, allowedProps };
+//# sourceMappingURL=props.d.ts.map

package/types/DrawerLayout/DrawerContent/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/DrawerLayout/DrawerContent/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,aAAK,2BAA2B,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,aAAK,wBAAwB,GAAG;IAC9B,gBAAgB,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,2BAA2B,CAAA;AAEjD,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,wBAAwB,GAAG,2BAA2B,GAAG,cAAc,CAAA;AAE5E,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CASvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAMnB,CAAA;AAED,YAAY,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/DrawerLayout/DrawerContent/styles.d.ts

@@ -1,5 +1,5 @@
 import { DrawerLayoutContentTheme } from '@instructure/shared-types';
-import { DrawerLayoutContentProps, DrawerLayoutContentState } from './types';
+import { DrawerLayoutContentProps, DrawerLayoutContentState } from './props';
 /**
  * ---
  * private: true

package/types/DrawerLayout/DrawerTray/index.d.ts

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { jsx } from '@instructure/emotion';
 import type { PortalNode } from '@instructure/ui-portal';
-import { DrawerLayoutTrayProps, DrawerLayoutTrayState, DrawerLayoutTrayStyleProps, DrawerTrayPlacement } from './types';
+import type { DrawerLayoutTrayProps, DrawerLayoutTrayState, DrawerLayoutTrayStyleProps, DrawerTrayPlacement } from './props';
 /**
 ---
 parent: DrawerLayout
@@ -13,92 +12,10 @@ id: DrawerLayout.Tray
 declare class DrawerTray extends Component<DrawerLayoutTrayProps, DrawerLayoutTrayState> {
     static readonly componentId: "DrawerLayout.Tray";
     static locatorAttribute: string;
-    static propTypes: {
-        label: PropTypes.Validator<string>;
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        render: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Placement of the `<DrawerLayout.Tray />`
-         */
-        placement: PropTypes.Requireable<string>;
-        /**
-         * If the tray is open or closed.
-         */
-        open: PropTypes.Requireable<boolean>;
-        /**
-         * Called when the `<DrawerLayout.Tray />` is opened
-         */
-        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Called when the `<DrawerLayout.Tray />` is closed
-         */
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Should the `<DrawerLayout.Tray />` have a border
-         */
-        border: PropTypes.Requireable<boolean>;
-        /**
-         * Should the `<DrawerLayout.Tray />` have a shadow
-         */
-        shadow: PropTypes.Requireable<boolean>;
-        /**
-         * Callback fired when the `<DrawerLayout.Tray />` transitions in/out
-         */
-        onTransition: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Callback fired before the `<DrawerLayout.Tray />` transitions in
-         */
-        onEnter: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Callback fired as the `<DrawerLayout.Tray />` begins to transition in
-         */
-        onEntering: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Callback fired after the `<DrawerLayout.Tray />` finishes transitioning in
-         */
-        onEntered: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Callback fired right before the `<DrawerLayout.Tray />` transitions out
-         */
-        onExit: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Callback fired as the `<DrawerLayout.Tray />` begins to transition out
-         */
-        onExiting: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Callback fired after the `<DrawerLayout.Tray />` finishes transitioning out
-         */
-        onExited: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Ref function for the `<DrawerLayout.Tray />` content
-         */
-        contentRef: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * 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.Requireable<PropTypes.ReactElementLike | ((...args: any[]) => any) | Element>;
-        /**
-         * An element or a function returning an element to focus by default
-         */
-        defaultFocusElement: PropTypes.Requireable<PropTypes.ReactElementLike | ((...args: any[]) => any)>;
-        /**
-         * 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.Requireable<PropTypes.ReactElementLike | ((...args: any[]) => any) | (PropTypes.ReactElementLike | null | undefined)[]>;
-        onDismiss: PropTypes.Requireable<(...args: any[]) => any>;
-        shouldContainFocus: PropTypes.Requireable<boolean>;
-        shouldReturnFocus: PropTypes.Requireable<boolean>;
-        shouldCloseOnDocumentClick: PropTypes.Requireable<boolean>;
-        shouldCloseOnEscape: PropTypes.Requireable<boolean>;
-        makeStyles: PropTypes.Requireable<(...args: any[]) => any>;
-        styles: PropTypes.Requireable<object>;
-        dir: PropTypes.Requireable<string>;
-    };
+    static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<"label" | "children" | "contentRef" | "dir" | "border" | "render" | "placement" | "open" | "onOpen" | "onClose" | "shadow" | "onTransition" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "mountNode" | "defaultFocusElement" | "liveRegion" | "onDismiss" | "shouldContainFocus" | "shouldReturnFocus" | "shouldCloseOnDocumentClick" | "shouldCloseOnEscape">;
+    static allowedProps: readonly ("label" | "children" | "contentRef" | "dir" | "border" | "render" | "placement" | "open" | "onOpen" | "onClose" | "shadow" | "onTransition" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "mountNode" | "defaultFocusElement" | "liveRegion" | "onDismiss" | "shouldContainFocus" | "shouldReturnFocus" | "shouldCloseOnDocumentClick" | "shouldCloseOnEscape")[];
     static defaultProps: {
         children: null;
-        render: undefined;
         shouldContainFocus: boolean;
         shouldCloseOnEscape: boolean;
         shouldCloseOnDocumentClick: boolean;
@@ -116,11 +33,6 @@ declare class DrawerTray extends Component<DrawerLayoutTrayProps, DrawerLayoutTr
         onExiting: () => void;
         onExited: () => void;
         contentRef: (node: any) => void;
-        onClose: undefined;
-        onDismiss: undefined;
-        defaultFocusElement: undefined;
-        liveRegion: undefined;
-        onTransition: undefined;
     };
     state: DrawerLayoutTrayState;
     _DOMNode?: PortalNode;