@instructure/ui-modal 10.26.1-snapshot-2 → 10.26.2

package/package.json

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

package/src/Modal/ModalBody/index.tsx

@@ -25,14 +25,15 @@
 import { Component } from 'react'
 
 import { View } from '@instructure/ui-view'
+import { testable } from '@instructure/ui-testable'
 import { omitProps } from '@instructure/ui-react-utils'
-import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils'
+import { getComputedStyle } from '@instructure/ui-dom-utils'
 
 import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { ModalBodyProps } from './props'
 import { UIElement } from '@instructure/shared-types'
 
@@ -43,9 +44,11 @@ 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',
@@ -73,7 +76,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 && getCSSStyleDeclaration(this.ref)
+    const style = this.ref && getComputedStyle(this.ref)
     const isFirefox = !!(
       style &&
       Array.prototype.slice
@@ -122,7 +125,6 @@ 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,6 +23,8 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import type {
   Spacing,
   WithStyleProps,
@@ -30,6 +32,7 @@ import type {
 } from '@instructure/emotion'
 import type {
   AsElementType,
+  PropValidators,
   ModalBodyTheme,
   OtherHTMLAttributes,
   UIElement
@@ -54,9 +57,18 @@ type ModalBodyProps = ModalBodyOwnProps &
 
 type ModalBodyStyle = ComponentStyle<'modalBody'>
 
-type ModalBodyState = {
-  isFirefox: boolean
+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'])
 }
+
 const allowedProps: AllowedPropKeys = [
   'children',
   'padding',
@@ -66,5 +78,5 @@ const allowedProps: AllowedPropKeys = [
   'overflow'
 ]
 
-export type { ModalBodyProps, ModalBodyState, ModalBodyStyle }
-export { allowedProps }
+export type { ModalBodyProps, ModalBodyStyle }
+export { propTypes, allowedProps }

package/src/Modal/ModalFooter/index.tsx

@@ -25,11 +25,12 @@
 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 { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { ModalFooterProps } from './props'
 
 /**
@@ -39,9 +40,11 @@ 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'
@@ -69,7 +72,6 @@ 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,7 +23,10 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import type {
+  PropValidators,
   ModalFooterTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -43,7 +46,13 @@ 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 { allowedProps }
+export { propTypes, allowedProps }

package/src/Modal/ModalHeader/index.tsx

@@ -28,6 +28,7 @@ import {
   matchComponentTypes,
   passthroughProps
 } from '@instructure/ui-react-utils'
+import { testable } from '@instructure/ui-testable'
 
 import { withStyle } from '@instructure/emotion'
 
@@ -37,7 +38,7 @@ import type { CloseButtonProps } from '@instructure/ui-buttons'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type { ModalHeaderProps, ModalHeaderStyleProps } from './props'
 
 type CloseButtonChild = ComponentElement<CloseButtonProps, CloseButton>
@@ -49,9 +50,11 @@ 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',
@@ -101,7 +104,6 @@ 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,7 +23,10 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import type {
+  PropValidators,
   ModalHeaderTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
@@ -48,7 +51,14 @@ 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 { allowedProps }
+export { propTypes, allowedProps }

package/src/Modal/index.tsx

@@ -26,6 +26,7 @@ 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'
@@ -42,7 +43,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { allowedProps } from './props'
+import { propTypes, allowedProps } from './props'
 import type {
   ModalProps,
   ModalState,
@@ -57,9 +58,11 @@ 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,
@@ -279,7 +282,6 @@ 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,10 +23,16 @@
  */
 
 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,
@@ -192,6 +198,39 @@ 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',
@@ -228,4 +267,4 @@ export type {
   ModalPropsForTransition,
   ModalPropsForDialog
 }
-export { allowedProps }
+export { propTypes, allowedProps }

package/tsconfig.build.json

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