@instructure/ui-drawer-layout 10.26.1-snapshot-2 → 10.26.2

package/src/DrawerLayout/DrawerContent/props.ts

@@ -23,8 +23,10 @@
  */
 
 import { AriaRole } from 'react'
+import PropTypes from 'prop-types'
 
 import type {
+  PropValidators,
   DrawerLayoutContentTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -56,6 +58,15 @@ type DrawerLayoutContentProps = DrawerLayoutContentOwnProps &
   OtherHTMLAttributes<DrawerLayoutContentOwnProps>
 
 type DrawerLayoutContentStyle = ComponentStyle<'drawerContent'>
+
+const propTypes: PropValidators<PropKeys> = {
+  label: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  contentRef: PropTypes.func,
+  onSizeChange: PropTypes.func,
+  role: PropTypes.string
+}
+
 const allowedProps: AllowedPropKeys = [
   'label',
   'children',
@@ -70,4 +81,4 @@ export type {
   DrawerLayoutContentStyle,
   DrawerContentSize
 }
-export { allowedProps }
+export { propTypes, allowedProps }

package/src/DrawerLayout/DrawerTray/index.tsx

@@ -30,6 +30,7 @@ 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'
 import { Dialog } from '@instructure/ui-dialog'
 import { Portal } from '@instructure/ui-portal'
 import type { PortalNode } from '@instructure/ui-portal'
@@ -39,7 +40,7 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import { DrawerLayoutContext } from '../index'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type {
   DrawerLayoutTrayProps,
   DrawerLayoutTrayState,
@@ -55,6 +56,7 @@ id: DrawerLayout.Tray
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @textDirectionContextConsumer()
+@testable()
 class DrawerTray extends Component<
   DrawerLayoutTrayProps,
   DrawerLayoutTrayState
@@ -63,6 +65,7 @@ class DrawerTray extends Component<
 
   static locatorAttribute = 'data-drawer-tray'
 
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     shouldContainFocus: true,
@@ -243,7 +246,6 @@ class DrawerTray extends Component<
                 {...omitProps(props, DrawerTray.allowedProps)}
                 ref={this.handleContentRef}
                 css={trayStyles}
-                data-cid="DrawerTray"
               >
                 <Dialog
                   open

package/src/DrawerLayout/DrawerTray/props.ts

@@ -23,6 +23,11 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
+import { element } from '@instructure/ui-prop-types'
+import { textDirectionContextConsumer } from '@instructure/ui-i18n'
+
 import type { PositionMountNode } from '@instructure/ui-position'
 import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n'
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
@@ -30,6 +35,7 @@ import type {
   DrawerLayoutTrayTheme,
   LiveRegion,
   OtherHTMLAttributes,
+  PropValidators,
   UIElement
 } from '@instructure/shared-types'
 import {
@@ -102,6 +108,15 @@ type PropsPassedToDialog = {
    */
   liveRegion?: LiveRegion
 
+  /**
+   * Event fired when the underlying FocusRegion is dismissed in overlay mode.
+   * This can happen if:
+   * - `shouldCloseOnDocumentClick` is `true` and the user
+   * clicks outside the `<DrawerLayout.Tray />`
+   * - If `shouldCloseOnEscape` is `true` and the user presses the ESC key.
+   *
+   * This should be used to close the `<DrawerLayout.Tray />` in these cases
+   */
   onDismiss?: (
     event: React.UIEvent | React.FocusEvent,
     documentClick?: boolean
@@ -180,6 +195,40 @@ type DrawerLayoutTrayProps = DrawerLayoutTrayOwnProps &
 type DrawerLayoutTrayStyle = ComponentStyle<
   'drawerTray' | 'drawerTrayWithShadow' | 'drawerTrayContent'
 >
+
+const propTypes: PropValidators<PropKeys> = {
+  label: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  render: PropTypes.func,
+  placement: PropTypes.oneOf(['start', 'end']),
+  open: PropTypes.bool,
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func,
+  border: PropTypes.bool,
+  shadow: PropTypes.bool,
+  onTransition: PropTypes.func,
+  onEnter: PropTypes.func,
+  onEntering: PropTypes.func,
+  onEntered: PropTypes.func,
+  onExit: PropTypes.func,
+  onExiting: PropTypes.func,
+  onExited: PropTypes.func,
+  contentRef: PropTypes.func,
+  mountNode: PropTypes.oneOfType([element, PropTypes.func]),
+  defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  liveRegion: PropTypes.oneOfType([
+    element,
+    PropTypes.arrayOf(element),
+    PropTypes.func
+  ]),
+  onDismiss: PropTypes.func,
+  shouldContainFocus: PropTypes.bool,
+  shouldReturnFocus: PropTypes.bool,
+  shouldCloseOnDocumentClick: PropTypes.bool,
+  shouldCloseOnEscape: PropTypes.bool,
+  dir: PropTypes.oneOf(Object.values(textDirectionContextConsumer.DIRECTION))
+}
+
 const allowedProps: AllowedPropKeys = [
   'label',
   'children',
@@ -216,4 +265,4 @@ export type {
   DrawerLayoutTrayStyleProps,
   DrawerTrayPlacement
 }
-export { allowedProps }
+export { allowedProps, propTypes }

package/src/DrawerLayout/__fixtures__/DrawerLayout.fixture.tsx

@@ -23,6 +23,7 @@
  */
 
 import { Component } from 'react'
+import PropTypes from 'prop-types'
 
 import { DrawerLayout } from '../index'
 import type { DrawerLayoutProps } from '../props'
@@ -37,6 +38,14 @@ type DrawerLayoutFixtureProps = {
 }
 
 export default class DrawerLayoutFixture extends Component<DrawerLayoutFixtureProps> {
+  static propTypes = {
+    layoutWidth: PropTypes.string,
+    trayWidth: PropTypes.string,
+    placement: PropTypes.string,
+    open: PropTypes.bool,
+    onOverlayTrayChange: PropTypes.func
+  }
+
   static defaultProps = {
     layoutWidth: '600px',
     trayWidth: '200px',

package/src/DrawerLayout/index.tsx

@@ -33,6 +33,7 @@ import {
 import { getBoundingClientRect } from '@instructure/ui-dom-utils'
 import { createChainedFunction, px } from '@instructure/ui-utils'
 import { logError as error } from '@instructure/console'
+import { testable } from '@instructure/ui-testable'
 
 import { mirrorHorizontalPlacement } from '@instructure/ui-position'
 import type { PlacementPropValues } from '@instructure/ui-position'
@@ -48,7 +49,7 @@ import type { DrawerLayoutTrayProps } from './DrawerTray/props'
 import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { DrawerLayoutProps, DrawerLayoutState } from './props'
 
 type TrayChild = ComponentElement<
@@ -69,10 +70,12 @@ category: components
 @withDeterministicId()
 @withStyle(generateStyle, null)
 @textDirectionContextConsumer()
+@testable()
 class DrawerLayout extends Component<DrawerLayoutProps, DrawerLayoutState> {
   static readonly componentId = 'DrawerLayout'
 
   static locatorAttribute = 'data-drawer-layout'
+  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     minWidth: '30rem'
@@ -321,7 +324,6 @@ class DrawerLayout extends Component<DrawerLayoutProps, DrawerLayoutState> {
           {...props}
           css={this.props.styles?.drawerLayout}
           ref={this.handleRef}
-          data-cid="DrawerLayout"
         >
           {this.renderChildren()}
         </div>

package/src/DrawerLayout/props.ts

@@ -23,8 +23,17 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
+import { textDirectionContextConsumer } from '@instructure/ui-i18n'
+
+import { DrawerContent } from './DrawerContent'
+import { DrawerTray } from './DrawerTray'
+
 import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { PropValidators } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type DrawerLayoutOwnProps = {
@@ -61,6 +70,14 @@ type DrawerLayoutState = {
   trayWidth: number
   contentWidth: number
 }
+
+const propTypes: PropValidators<PropKeys> = {
+  children: ChildrenPropTypes.oneOfEach([DrawerContent, DrawerTray]),
+  minWidth: PropTypes.string,
+  onOverlayTrayChange: PropTypes.func,
+  dir: PropTypes.oneOf(Object.values(textDirectionContextConsumer.DIRECTION))
+}
+
 const allowedProps: AllowedPropKeys = [
   'children',
   'minWidth',
@@ -69,4 +86,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { DrawerLayoutProps, DrawerLayoutState, DrawerLayoutStyle }
-export { allowedProps }
+export { propTypes, allowedProps }

package/tsconfig.build.json

@@ -17,7 +17,9 @@
     { "path": "../ui-motion/tsconfig.build.json" },
     { "path": "../ui-portal/tsconfig.build.json" },
     { "path": "../ui-position/tsconfig.build.json" },
+    { "path": "../ui-prop-types/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
+    { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },
     { "path": "../ui-view/tsconfig.build.json" },
     { "path": "../uid/tsconfig.build.json" },