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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drawer-layout",
-  "version": "8.14.1-snapshot.7+845d7ec6c",
+  "version": "8.15.1-snapshot.2+00f55c738",
   "description": "A main-content-plus-tray layout component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,29 +25,29 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/debounce": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/emotion": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/shared-types": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-dialog": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-dom-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-i18n": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-motion": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-portal": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-position": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-prop-types": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-react-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-test-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-testable": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-view": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/uid": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/console": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/debounce": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/emotion": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/shared-types": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-dialog": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-dom-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-i18n": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-motion": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-portal": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-position": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-prop-types": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-react-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-test-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-testable": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-view": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/uid": "8.15.1-snapshot.2+00f55c738",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-test-locator": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-themes": "8.14.1-snapshot.7+845d7ec6c"
+    "@instructure/ui-babel-preset": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-test-locator": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-themes": "8.15.1-snapshot.2+00f55c738"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "845d7ec6c159d8946b22caa9d8fb3d0175167a6f"
+  "gitHead": "00f55c7382e82209ea553c107951c4356ba202bf"
 }

package/src/DrawerLayout/DrawerContent/index.tsx

@@ -26,6 +26,7 @@
 import { Component } from 'react'
 
 import { debounce } from '@instructure/debounce'
+import type { Debounced } from '@instructure/debounce'
 import { getBoundingClientRect } from '@instructure/ui-dom-utils'
 import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
@@ -37,7 +38,7 @@ import generateComponentTheme from './theme'
 import { propTypes, allowedProps } from './props'
 import type {
   DrawerLayoutContentProps,
-  DrawerLayoutContentState
+  DrawerLayoutContentStyleProps
 } from './props'
 
 /**
@@ -45,32 +46,22 @@ import type {
 parent: DrawerLayout
 id: DrawerLayout.Content
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
-class DrawerContent extends Component<
-  DrawerLayoutContentProps,
-  DrawerLayoutContentState
-> {
+class DrawerContent extends Component<DrawerLayoutContentProps> {
   static readonly componentId = 'DrawerLayout.Content'
 
   static locatorAttribute = 'data-drawer-content'
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    children: null,
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    contentRef: (el: any) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'node' is declared but its value is never read.
-    onSizeChange: (node: any) => {},
     role: 'region'
   }
 
-  state: DrawerLayoutContentState = {
-    shouldTransition: false
-  }
+  ref: HTMLDivElement | null = null
 
-  ref: Element | null = null
   get _content() {
     console.warn(
       '_content property is deprecated and will be removed in v9, please use ref instead'
@@ -78,10 +69,10 @@ class DrawerContent extends Component<
 
     return this.ref
   }
-  _resizeListener = null
 
-  _debounced = null
-  _timeouts = []
+  private _resizeListener?: ResizeObserver
+
+  private _debounced?: Debounced
 
   componentDidMount() {
     const rect = getBoundingClientRect(this.ref)
@@ -89,72 +80,62 @@ class DrawerContent extends Component<
       width: rect.width
     }
     // set initial size
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefined'.
-    this.props.onSizeChange({ width: rect.width, height: rect.height })
-    // listen for changes to size
-    // @ts-expect-error ts-migrate(2322) FIXME: Type 'Function' is not assignable to type 'null'.
-    this._debounced = debounce(this.props.onSizeChange, 100, {
-      leading: false,
-      trailing: true
-    })
-    // @ts-expect-error ts-migrate(2322) FIXME: Type 'ResizeObserver' is not assignable to type 'n... Remove this comment to see the full error message
+    if (typeof this.props.onSizeChange === 'function') {
+      this.props.onSizeChange({ width: rect.width, height: rect.height })
+
+      // listen for changes to size
+      this._debounced = 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) {
-          // @ts-expect-error ts-migrate(2721) FIXME: Cannot invoke an object which is possibly 'null'.
-          this._debounced(size)
+          this._debounced?.(size)
         }
       }
     })
 
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-    this._resizeListener.observe(this.ref)
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles({ shouldTransition: false })
+    this._resizeListener.observe(this.ref!)
+
+    this.props.makeStyles?.(this.makeStyleProps(false))
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps: any, prevState: any, snapshot: any) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles({ shouldTransition: true })
+  componentDidUpdate() {
+    this.props.makeStyles?.(this.makeStyleProps(true))
   }
 
   componentWillUnmount() {
-    if (this._resizeListener) {
-      // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-      this._resizeListener.disconnect()
-    }
+    this._resizeListener?.disconnect()
 
-    if (this._debounced) {
-      // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-      this._debounced.cancel()
-    }
+    this._debounced?.cancel()
+  }
 
-    this._timeouts.forEach((timeout) => {
-      clearTimeout(timeout)
-    })
+  makeStyleProps = (
+    shouldTransition: DrawerLayoutContentStyleProps['shouldTransition']
+  ): DrawerLayoutContentStyleProps => {
+    return { shouldTransition }
   }
 
-  handleContentRef = (node: Element | null) => {
+  handleContentRef = (node: HTMLDivElement | null) => {
     this.ref = node
-    this.props.contentRef?.(node)
+
+    if (typeof this.props.contentRef === 'function') {
+      this.props.contentRef(node)
+    }
   }
 
   render() {
-    const {
-      style, // eslint-disable-line react/prop-types
-      label,
-      role
-    } = this.props
+    const { style, label, role } = this.props
 
     return (
       <div
-        {...omitProps(this.props, DrawerContent.allowedProps, [
-          'shouldTransition'
-        ])}
+        {...omitProps(this.props, DrawerContent.allowedProps)}
         role={role}
         style={style}
         ref={this.handleContentRef}

package/src/DrawerLayout/DrawerContent/props.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React from 'react'
+import React, { AriaRole } from 'react'
 import PropTypes from 'prop-types'
 
 import type {
@@ -32,15 +32,20 @@ import type {
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
+type DrawerContentSize = { width: number; height: number }
+
 type DrawerLayoutContentOwnProps = {
   label: string
   children?: React.ReactNode
-  contentRef?: (...args: any[]) => any
-  onSizeChange?: (...args: any[]) => any
-  role?: string
+  contentRef?: (element: HTMLDivElement | null) => void
+  /**
+   * Callback fired whenever the `<DrawerLayout.Content />` changes size
+   */
+  onSizeChange?: (contentSize: DrawerContentSize) => void
+  role?: AriaRole
 }
 
-type DrawerLayoutContentState = {
+type DrawerLayoutContentStyleProps = {
   shouldTransition: boolean
 }
 
@@ -58,9 +63,6 @@ const propTypes: PropValidators<PropKeys> = {
   label: PropTypes.string.isRequired,
   children: PropTypes.node,
   contentRef: PropTypes.func,
-  /**
-   * Callback fired whenever the `<DrawerLayout.Content />` changes size
-   */
   onSizeChange: PropTypes.func,
   role: PropTypes.string
 }
@@ -75,7 +77,8 @@ const allowedProps: AllowedPropKeys = [
 
 export type {
   DrawerLayoutContentProps,
-  DrawerLayoutContentState,
-  DrawerLayoutContentStyle
+  DrawerLayoutContentStyleProps,
+  DrawerLayoutContentStyle,
+  DrawerContentSize
 }
 export { propTypes, allowedProps }

package/src/DrawerLayout/DrawerContent/styles.ts

@@ -25,7 +25,7 @@
 import type { DrawerLayoutContentTheme } from '@instructure/shared-types'
 import type {
   DrawerLayoutContentProps,
-  DrawerLayoutContentState,
+  DrawerLayoutContentStyleProps,
   DrawerLayoutContentStyle
 } from './props'
 
@@ -41,9 +41,8 @@ import type {
  */
 const generateStyle = (
   componentTheme: DrawerLayoutContentTheme,
-  // @ts-expect-error no props used here
-  props: DrawerLayoutContentProps,
-  state: DrawerLayoutContentState
+  _props: DrawerLayoutContentProps,
+  state: DrawerLayoutContentStyleProps
 ): DrawerLayoutContentStyle => {
   const { shouldTransition } = state
 

package/src/DrawerLayout/DrawerTray/index.tsx

@@ -27,6 +27,7 @@ import { Component } from 'react'
 import { withStyle, jsx } from '@instructure/emotion'
 import { textDirectionContextConsumer } from '@instructure/ui-i18n'
 import { Transition } from '@instructure/ui-motion'
+import type { TransitionType } from '@instructure/ui-motion'
 import { omitProps } from '@instructure/ui-react-utils'
 import { createChainedFunction } from '@instructure/ui-utils'
 import { testable } from '@instructure/ui-testable'
@@ -52,6 +53,7 @@ import type {
 parent: DrawerLayout
 id: DrawerLayout.Tray
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @textDirectionContextConsumer()
@@ -67,34 +69,20 @@ class DrawerTray extends Component<
   static propTypes = propTypes
   static allowedProps = allowedProps
   static 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: () => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'node' is declared but its value is never read.
-    contentRef: (node: any) => {}
+    placement: 'start'
   }
 
-  state: DrawerLayoutTrayState = {
-    transitioning: false,
-    portalOpen: false
-  }
+  ref: HTMLDivElement | null = null
+
+  private _DOMNode: PortalNode = null
 
-  _DOMNode: PortalNode = null
-  ref: Element | null = null
   get _content() {
     console.warn(
       '_content property is deprecated and will be removed in v9, please use ref instead'
@@ -103,18 +91,26 @@ class DrawerTray extends Component<
     return this.ref
   }
 
+  constructor(props: DrawerLayoutTrayProps) {
+    super(props)
+
+    this.state = {
+      transitioning: false,
+      portalOpen: false
+    }
+  }
+
   componentDidMount() {
-    ;(this.props as any).makeStyles(this.makeStyleProps())
+    this.props.makeStyles?.(this.makeStyleProps())
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevState' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps: any, prevState: any, snapshot: any) {
-    if ((this.props as any).open !== prevProps.open) {
+  componentDidUpdate(prevProps: DrawerLayoutTrayProps) {
+    if (this.props.open !== prevProps.open) {
       this.setState({
         transitioning: true
       })
     }
-    ;(this.props as any).makeStyles(this.makeStyleProps())
+    this.props.makeStyles?.(this.makeStyleProps())
   }
 
   makeStyleProps = (): DrawerLayoutTrayStyleProps => {
@@ -126,29 +122,32 @@ class DrawerTray extends Component<
   get placement() {
     const { placement, dir } = this.props
     const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl
-    return (isRtl
-      ? mirrorHorizontalPlacement(placement!, ' ')
-      : placement!) as DrawerTrayPlacement
+    return (
+      isRtl ? mirrorHorizontalPlacement(placement!, ' ') : placement!
+    ) as DrawerTrayPlacement
   }
 
   get direction() {
     return this.placement === 'end' ? 'right' : 'left'
   }
 
-  get transition() {
+  get transition(): TransitionType {
     return `slide-${this.direction}`
   }
 
-  handleContentRef = (node: Element | null) => {
+  handleContentRef = (node: HTMLDivElement | null) => {
     this.ref = node
-    this.props.contentRef?.(node)
+
+    if (typeof this.props.contentRef === 'function') {
+      this.props.contentRef(node)
+    }
   }
 
-  handleTransitionEntered = () => {
+  handleTransitionEntered = (_transitionType?: TransitionType) => {
     this.setState({ transitioning: false })
   }
 
-  handleTransitionExited = () => {
+  handleTransitionExited = (_transitionType?: TransitionType) => {
     this.setState({
       transitioning: false
     })
@@ -215,7 +214,7 @@ class DrawerTray extends Component<
       <DrawerLayoutContext.Consumer>
         {(shouldOverlayTray: boolean) => {
           const { portalOpen } = this.state
-          const needsPortal = shouldOverlayTray && mountNode
+          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
@@ -230,7 +229,6 @@ class DrawerTray extends Component<
           const content = (
             <Transition
               in={transitionIn}
-              // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
               type={this.transition}
               onTransition={onTransition}
               onEnter={onEnter}

package/src/DrawerLayout/DrawerTray/props.ts

@@ -35,38 +35,132 @@ import type {
   PropValidators,
   DrawerLayoutTrayTheme,
   OtherHTMLAttributes,
-  LiveRegion
+  LiveRegion,
+  UIElement
 } from '@instructure/shared-types'
+import {
+  BaseTransitionStatesType,
+  TransitionType
+} from '@instructure/ui-motion/src/Transition/BaseTransition/props'
 
 type DrawerTrayPlacement = 'start' | 'end'
 
 type DrawerLayoutTrayOwnProps = {
   label: string
-  children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
-  render?: (...args: any[]) => any
+
+  children?: React.ReactNode | (() => React.ReactNode)
+
+  render?: () => React.ReactNode
+
+  /**
+   * Placement of the `<DrawerLayout.Tray />`
+   */
   placement?: DrawerTrayPlacement
+
+  /**
+   * If the tray is open or closed.
+   */
   open?: boolean
-  onOpen?: (...args: any[]) => any
-  onClose?: (...args: any[]) => any
+
+  /**
+   * Called when the `<DrawerLayout.Tray />` is opened
+   */
+  onOpen?: (transitionType?: TransitionType) => void
+
+  /**
+   * Called when the `<DrawerLayout.Tray />` is closed
+   */
+  onClose?: (transitionType?: TransitionType) => void
+
+  /**
+   * Should the `<DrawerLayout.Tray />` have a border
+   */
   border?: boolean
+
+  /**
+   * Should the `<DrawerLayout.Tray />` have a shadow
+   */
   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
+
+  /**
+   * Ref function for the `<DrawerLayout.Tray />` content
+   */
+  contentRef?: (element: HTMLDivElement | null) => void
+
+  /**
+   * An element or a function returning an element to use as the mount node
+   * for the `<DrawerLayout.Tray />` when tray is overlaying content
+   */
   mountNode?: PositionMountNode
-  defaultFocusElement?: React.ReactElement | ((...args: any[]) => any)
+} & PropsPassedToDialog &
+  PropsPassedToTransition &
+  BidirectionalProps
+
+type PropsPassedToDialog = {
+  /**
+   * An element or a function returning an element to focus by default
+   */
+  defaultFocusElement?: UIElement
+
+  /**
+   * 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?: LiveRegion
-  onDismiss?: (...args: any[]) => any
+
+  onDismiss?: (
+    event: React.UIEvent | React.FocusEvent,
+    documentClick?: boolean
+  ) => void
+
   shouldContainFocus?: boolean
+
   shouldReturnFocus?: boolean
+
   shouldCloseOnDocumentClick?: boolean
+
   shouldCloseOnEscape?: boolean
-} & BidirectionalProps
+}
+
+type PropsPassedToTransition = {
+  /**
+   * Callback fired when the `<DrawerLayout.Tray />` transitions in/out
+   */
+  onTransition?: (
+    toState: BaseTransitionStatesType,
+    fromState: BaseTransitionStatesType
+  ) => void
+
+  /**
+   * Callback fired before the `<DrawerLayout.Tray />` transitions in
+   */
+  onEnter?: () => void
+
+  /**
+   * Callback fired as the `<DrawerLayout.Tray />` begins to transition in
+   */
+  onEntering?: () => void
+
+  /**
+   * Callback fired after the `<DrawerLayout.Tray />` finishes transitioning in
+   */
+  onEntered?: (type?: TransitionType) => void
+
+  /**
+   * Callback fired right before the `<DrawerLayout.Tray />` transitions out
+   */
+  onExit?: () => void
+
+  /**
+   * Callback fired as the `<DrawerLayout.Tray />` begins to transition out
+   */
+  onExiting?: () => void
+
+  /**
+   * Callback fired after the `<DrawerLayout.Tray />` finishes transitioning out
+   */
+  onExited?: (type?: TransitionType) => void
+}
 
 type DrawerLayoutTrayState = {
   transitioning: boolean
@@ -93,75 +187,22 @@ 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,