@instructure/ui-modal 10.26.1 → 11.0.1-snapshot-0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "10.26.1",
+  "version": "11.0.1-snapshot-0",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,32 +24,29 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.26.1",
-    "@instructure/emotion": "10.26.1",
-    "@instructure/shared-types": "10.26.1",
-    "@instructure/ui-buttons": "10.26.1",
-    "@instructure/ui-dialog": "10.26.1",
-    "@instructure/ui-dom-utils": "10.26.1",
-    "@instructure/ui-motion": "10.26.1",
-    "@instructure/ui-overlays": "10.26.1",
-    "@instructure/ui-portal": "10.26.1",
-    "@instructure/ui-prop-types": "10.26.1",
-    "@instructure/ui-react-utils": "10.26.1",
-    "@instructure/ui-testable": "10.26.1",
-    "@instructure/ui-utils": "10.26.1",
-    "@instructure/ui-view": "10.26.1",
-    "prop-types": "^15.8.1"
+    "@instructure/console": "11.0.1-snapshot-0",
+    "@instructure/emotion": "11.0.1-snapshot-0",
+    "@instructure/shared-types": "11.0.1-snapshot-0",
+    "@instructure/ui-buttons": "11.0.1-snapshot-0",
+    "@instructure/ui-dialog": "11.0.1-snapshot-0",
+    "@instructure/ui-dom-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-motion": "11.0.1-snapshot-0",
+    "@instructure/ui-overlays": "11.0.1-snapshot-0",
+    "@instructure/ui-portal": "11.0.1-snapshot-0",
+    "@instructure/ui-react-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-view": "11.0.1-snapshot-0"
   },
   "peerDependencies": {
-    "react": ">=16.14 <=18"
+    "react": ">=18 <=19"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.26.1",
-    "@instructure/ui-color-utils": "10.26.1",
-    "@instructure/ui-position": "10.26.1",
-    "@instructure/ui-themes": "10.26.1",
+    "@instructure/ui-babel-preset": "11.0.1-snapshot-0",
+    "@instructure/ui-color-utils": "11.0.1-snapshot-0",
+    "@instructure/ui-position": "11.0.1-snapshot-0",
+    "@instructure/ui-themes": "11.0.1-snapshot-0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2"
   },

package/src/Modal/ModalBody/index.tsx

@@ -25,15 +25,14 @@
 import { Component } from 'react'
 
 import { View } from '@instructure/ui-view'
-import { testable } from '@instructure/ui-testable'
 import { omitProps } from '@instructure/ui-react-utils'
-import { getComputedStyle } from '@instructure/ui-dom-utils'
+import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils'
 
 import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { ModalBodyProps } from './props'
 import { UIElement } from '@instructure/shared-types'
 
@@ -44,11 +43,9 @@ id: Modal.Body
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class ModalBody extends Component<ModalBodyProps> {
   static readonly componentId = 'Modal.Body'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     padding: 'medium',
@@ -76,7 +73,7 @@ class ModalBody extends Component<ModalBodyProps> {
     this.props.makeStyles?.()
 
     // We detect if -moz- prefixed style is present to identify whether we are in Firefox browser
-    const style = this.ref && getComputedStyle(this.ref)
+    const style = this.ref && getCSSStyleDeclaration(this.ref)
     const isFirefox = !!(
       style &&
       Array.prototype.slice
@@ -125,6 +122,7 @@ class ModalBody extends Component<ModalBodyProps> {
       <View
         {...passthroughProps}
         display="block"
+        data-cid="ModalBody"
         width={isFit ? '100%' : undefined}
         height={isFit ? '100%' : undefined}
         elementRef={this.handleRef}

package/src/Modal/ModalBody/props.ts

@@ -23,8 +23,6 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import type {
   Spacing,
   WithStyleProps,
@@ -32,7 +30,6 @@ import type {
 } from '@instructure/emotion'
 import type {
   AsElementType,
-  PropValidators,
   ModalBodyTheme,
   OtherHTMLAttributes,
   UIElement
@@ -57,18 +54,9 @@ type ModalBodyProps = ModalBodyOwnProps &
 
 type ModalBodyStyle = ComponentStyle<'modalBody'>
 
-const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.node,
-  padding: PropTypes.string,
-  /**
-   * provides a reference to the underlying html root element
-   */
-  elementRef: PropTypes.func,
-  as: PropTypes.elementType,
-  variant: PropTypes.oneOf(['default', 'inverse']),
-  overflow: PropTypes.oneOf(['scroll', 'fit'])
+type ModalBodyState = {
+  isFirefox: boolean
 }
-
 const allowedProps: AllowedPropKeys = [
   'children',
   'padding',
@@ -78,5 +66,5 @@ const allowedProps: AllowedPropKeys = [
   'overflow'
 ]
 
-export type { ModalBodyProps, ModalBodyStyle }
-export { propTypes, allowedProps }
+export type { ModalBodyProps, ModalBodyState, ModalBodyStyle }
+export { allowedProps }

package/src/Modal/ModalFooter/index.tsx

@@ -25,12 +25,11 @@
 import { Component } from 'react'
 
 import { passthroughProps } from '@instructure/ui-react-utils'
-import { testable } from '@instructure/ui-testable'
 import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { ModalFooterProps } from './props'
 
 /**
@@ -40,11 +39,9 @@ id: Modal.Footer
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class ModalFooter extends Component<ModalFooterProps> {
   static readonly componentId = 'Modal.Footer'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     variant: 'default'
@@ -72,6 +69,7 @@ class ModalFooter extends Component<ModalFooterProps> {
         css={this.props.styles?.modalFooter}
         {...passthroughProps(rest)}
         ref={this.handleRef}
+        data-cid="ModalFooter"
       >
         {children}
       </div>

package/src/Modal/ModalFooter/props.ts

@@ -23,10 +23,7 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import type {
-  PropValidators,
   ModalFooterTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -46,13 +43,7 @@ type ModalFooterProps = ModalFooterOwnProps &
   OtherHTMLAttributes<ModalFooterOwnProps>
 
 type ModalFooterStyle = ComponentStyle<'modalFooter'>
-
-const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.node,
-  variant: PropTypes.oneOf(['default', 'inverse'])
-}
-
 const allowedProps: AllowedPropKeys = ['children', 'variant']
 
 export type { ModalFooterProps, ModalFooterStyle }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/Modal/ModalHeader/index.tsx

@@ -28,7 +28,6 @@ import {
   matchComponentTypes,
   passthroughProps
 } from '@instructure/ui-react-utils'
-import { testable } from '@instructure/ui-testable'
 
 import { withStyle } from '@instructure/emotion'
 
@@ -38,7 +37,7 @@ import type { CloseButtonProps } from '@instructure/ui-buttons'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { ModalHeaderProps, ModalHeaderStyleProps } from './props'
 
 type CloseButtonChild = ComponentElement<CloseButtonProps, CloseButton>
@@ -50,11 +49,9 @@ id: Modal.Header
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class ModalHeader extends Component<ModalHeaderProps> {
   static readonly componentId = 'Modal.Header'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     variant: 'default',
@@ -104,6 +101,7 @@ class ModalHeader extends Component<ModalHeaderProps> {
         css={this.props.styles?.modalHeader}
         {...passthroughProps(rest)}
         ref={this.handleRef}
+        data-cid="ModalHeader"
       >
         {children}
       </div>

package/src/Modal/ModalHeader/props.ts

@@ -23,10 +23,7 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import type {
-  PropValidators,
   ModalHeaderTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -51,14 +48,7 @@ type ModalHeaderProps = ModalHeaderOwnProps &
   OtherHTMLAttributes<ModalHeaderOwnProps>
 
 type ModalHeaderStyle = ComponentStyle<'modalHeader'>
-
-const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.node,
-  variant: PropTypes.oneOf(['default', 'inverse']),
-  spacing: PropTypes.oneOf(['default', 'compact'])
-}
-
 const allowedProps: AllowedPropKeys = ['children', 'variant', 'spacing']
 
 export type { ModalHeaderProps, ModalHeaderStyleProps, ModalHeaderStyle }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/Modal/index.tsx

@@ -26,7 +26,6 @@ import { Children, Component, isValidElement } from 'react'
 
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
 import { createChainedFunction } from '@instructure/ui-utils'
-import { testable } from '@instructure/ui-testable'
 
 import { Transition } from '@instructure/ui-motion'
 import { Portal } from '@instructure/ui-portal'
@@ -43,7 +42,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type {
   ModalProps,
   ModalState,
@@ -58,11 +57,9 @@ tags: overlay, portal, dialog
 ---
 **/
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class Modal extends Component<ModalProps, ModalState> {
   static readonly componentId = 'Modal'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     open: false,
@@ -282,6 +279,7 @@ class Modal extends Component<ModalProps, ModalState> {
         insertAt={insertAt}
         open={portalIsOpen}
         onOpen={this.handlePortalOpen}
+        data-cid="Modal"
       >
         <Transition
           in={open}

package/src/Modal/props.ts

@@ -23,16 +23,10 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
-import { element } from '@instructure/ui-prop-types'
-import { transitionTypePropType } from '@instructure/ui-motion'
-
 import { Dialog } from '@instructure/ui-dialog'
 
 import type {
   AsElementType,
-  PropValidators,
   ModalTheme,
   OtherHTMLAttributes,
   LiveRegion,
@@ -198,39 +192,6 @@ type ModalState = {
   open: boolean
   windowHeight: number
 }
-
-const propTypes: PropValidators<PropKeys> = {
-  label: PropTypes.string.isRequired,
-  children: PropTypes.node,
-  as: PropTypes.elementType,
-  size: PropTypes.oneOf(['auto', 'small', 'medium', 'large', 'fullscreen']),
-  variant: PropTypes.oneOf(['default', 'inverse']),
-  open: PropTypes.bool,
-  defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  shouldReturnFocus: PropTypes.bool,
-  shouldCloseOnDocumentClick: PropTypes.bool,
-  onOpen: PropTypes.func,
-  onClose: PropTypes.func,
-  onDismiss: PropTypes.func,
-  contentRef: PropTypes.func,
-  mountNode: PropTypes.oneOfType([element, PropTypes.func]),
-  insertAt: PropTypes.oneOf(['bottom', 'top']),
-  liveRegion: PropTypes.oneOfType([
-    element,
-    PropTypes.arrayOf(element),
-    PropTypes.func
-  ]),
-  transition: transitionTypePropType,
-  onEnter: PropTypes.func,
-  onEntering: PropTypes.func,
-  onEntered: PropTypes.func,
-  onExit: PropTypes.func,
-  onExiting: PropTypes.func,
-  onExited: PropTypes.func,
-  constrain: PropTypes.oneOf(['window', 'parent']),
-  overflow: PropTypes.oneOf(['scroll', 'fit'])
-}
-
 const allowedProps: AllowedPropKeys = [
   'label',
   'children',
@@ -267,4 +228,4 @@ export type {
   ModalPropsForTransition,
   ModalPropsForDialog
 }
-export { propTypes, allowedProps }
+export { allowedProps }

package/tsconfig.build.json

@@ -16,9 +16,7 @@
     { "path": "../ui-motion/tsconfig.build.json" },
     { "path": "../ui-overlays/tsconfig.build.json" },
     { "path": "../ui-portal/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": "../ui-babel-preset/tsconfig.build.json" },