@instructure/ui-drawer-layout 10.26.1 → 11.0.0

package/src/DrawerLayout/DrawerContent/props.ts

@@ -23,10 +23,8 @@
  */
 
 import { AriaRole } from 'react'
-import PropTypes from 'prop-types'
 
 import type {
-  PropValidators,
   DrawerLayoutContentTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -58,15 +56,6 @@ 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',
@@ -81,4 +70,4 @@ export type {
   DrawerLayoutContentStyle,
   DrawerContentSize
 }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/DrawerLayout/DrawerTray/index.tsx

@@ -30,7 +30,6 @@ 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'
@@ -40,7 +39,7 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import { DrawerLayoutContext } from '../index'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type {
   DrawerLayoutTrayProps,
   DrawerLayoutTrayState,
@@ -56,7 +55,6 @@ id: DrawerLayout.Tray
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @textDirectionContextConsumer()
-@testable()
 class DrawerTray extends Component<
   DrawerLayoutTrayProps,
   DrawerLayoutTrayState
@@ -65,7 +63,6 @@ class DrawerTray extends Component<
 
   static locatorAttribute = 'data-drawer-tray'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     shouldContainFocus: true,
@@ -246,6 +243,7 @@ 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,11 +23,6 @@
  */
 
 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'
@@ -35,7 +30,6 @@ import type {
   DrawerLayoutTrayTheme,
   LiveRegion,
   OtherHTMLAttributes,
-  PropValidators,
   UIElement
 } from '@instructure/shared-types'
 import {
@@ -186,40 +180,6 @@ 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',
@@ -256,4 +216,4 @@ export type {
   DrawerLayoutTrayStyleProps,
   DrawerTrayPlacement
 }
-export { allowedProps, propTypes }
+export { allowedProps }

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

@@ -23,7 +23,6 @@
  */
 
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import { DrawerLayout } from '../index'
 import type { DrawerLayoutProps } from '../props'
@@ -38,14 +37,6 @@ 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,7 +33,6 @@ 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'
@@ -49,7 +48,7 @@ import type { DrawerLayoutTrayProps } from './DrawerTray/props'
 import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { DrawerLayoutProps, DrawerLayoutState } from './props'
 
 type TrayChild = ComponentElement<
@@ -70,12 +69,10 @@ 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'
@@ -324,6 +321,7 @@ 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,17 +23,8 @@
  */
 
 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 = {
@@ -70,14 +61,6 @@ 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',
@@ -86,4 +69,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { DrawerLayoutProps, DrawerLayoutState, DrawerLayoutStyle }
-export { propTypes, allowedProps }
+export { allowedProps }

package/tsconfig.build.json

@@ -17,9 +17,7 @@
     { "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" },