@instructure/ui-modal 8.23.1-snapshot.7 → 8.24.0

package/lib/Modal/index.js

@@ -73,11 +73,13 @@ var _dec, _dec2, _class, _class2;
 category: components
 tags: overlay, portal, dialog
 ---
+@tsProps
 **/
 let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class Modal extends _react.Component {
   constructor(props) {
     super(props);
     this._DOMNode = null;
+    this._content = null;
     this.ref = null;
 
     this.handleRef = el => {
@@ -88,7 +90,7 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
       this.DOMNode = DOMNode;
     };
 
-    this.handleTransitionExited = _type => {
+    this.handleTransitionExited = () => {
       this.setState({
         transitioning: false
       });
@@ -108,10 +110,14 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props2;
+
     if (prevProps.open && !this.props.open) {
       // closing
       this.setState({
@@ -119,7 +125,7 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
       });
     }
 
-    this.props.makeStyles();
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   get defaultFocusElement() {
@@ -143,10 +149,10 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          variant = _this$props.variant,
-          overflow = _this$props.overflow;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          variant = _this$props3.variant,
+          overflow = _this$props3.overflow;
     return _react.Children.map(children, child => {
       if (!child) return; // ignore null, falsy children
 
@@ -164,16 +170,16 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   }
 
   renderDialog(props) {
-    const _this$props2 = this.props,
-          onDismiss = _this$props2.onDismiss,
-          label = _this$props2.label,
-          shouldCloseOnDocumentClick = _this$props2.shouldCloseOnDocumentClick,
-          shouldReturnFocus = _this$props2.shouldReturnFocus,
-          liveRegion = _this$props2.liveRegion,
-          size = _this$props2.size,
-          constrain = _this$props2.constrain,
-          as = _this$props2.as,
-          styles = _this$props2.styles;
+    const _this$props4 = this.props,
+          onDismiss = _this$props4.onDismiss,
+          label = _this$props4.label,
+          shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
+          shouldReturnFocus = _this$props4.shouldReturnFocus,
+          liveRegion = _this$props4.liveRegion,
+          size = _this$props4.size,
+          constrain = _this$props4.constrain,
+          as = _this$props4.as,
+          styles = _this$props4.styles;
     const isFullScreen = size === 'fullscreen';
     const dialog = (0, _emotion.jsx)(_Dialog.Dialog, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
       as: as,
@@ -203,22 +209,22 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   render() {
     var _this$props$styles;
 
-    const _this$props3 = this.props,
-          open = _this$props3.open,
-          onOpen = _this$props3.onOpen,
-          onClose = _this$props3.onClose,
-          mountNode = _this$props3.mountNode,
-          insertAt = _this$props3.insertAt,
-          transition = _this$props3.transition,
-          onEnter = _this$props3.onEnter,
-          onEntering = _this$props3.onEntering,
-          onEntered = _this$props3.onEntered,
-          onExit = _this$props3.onExit,
-          onExiting = _this$props3.onExiting,
-          onExited = _this$props3.onExited,
-          constrain = _this$props3.constrain,
-          overflow = _this$props3.overflow,
-          passthroughProps = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    const _this$props5 = this.props,
+          open = _this$props5.open,
+          onOpen = _this$props5.onOpen,
+          onClose = _this$props5.onClose,
+          mountNode = _this$props5.mountNode,
+          insertAt = _this$props5.insertAt,
+          transition = _this$props5.transition,
+          onEnter = _this$props5.onEnter,
+          onEntering = _this$props5.onEntering,
+          onEntered = _this$props5.onEntered,
+          onExit = _this$props5.onExit,
+          onExiting = _this$props5.onExiting,
+          onExited = _this$props5.onExited,
+          constrain = _this$props5.constrain,
+          overflow = _this$props5.overflow,
+          passthroughProps = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
     const portalIsOpen = open || this.state.transitioning;
     return (0, _emotion.jsx)(_Portal.Portal, {
       mountNode: mountNode,
@@ -248,24 +254,9 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   size: 'auto',
   variant: 'default',
   transition: 'fade',
-  onOpen: event => {},
-  onClose: event => {},
-  onDismiss: event => {},
-  onEnter: () => {},
-  onEntering: () => {},
-  onEntered: () => {},
-  onExit: () => {},
-  onExiting: () => {},
-  onExited: () => {},
-  as: void 0,
-  mountNode: null,
   insertAt: 'bottom',
-  liveRegion: null,
-  contentRef: el => {},
   shouldCloseOnDocumentClick: true,
   shouldReturnFocus: true,
-  defaultFocusElement: null,
-  children: null,
   constrain: 'window',
   overflow: 'scroll'
 }, _class2.Header = _ModalHeader.ModalHeader, _class2.Body = _ModalBody.ModalBody, _class2.Footer = _ModalFooter.ModalFooter, _class2)) || _class) || _class);

package/lib/Modal/props.js

@@ -45,129 +45,30 @@ var _ModalFooter = require("./ModalFooter");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * An accessible label for the `<Modal />` content
-   */
   label: _propTypes.default.string.isRequired,
-
-  /**
-   * The children to be rendered within the `<Modal />`
-   */
   children: _Children.Children.enforceOrder([_ModalHeader.ModalHeader, _ModalBody.ModalBody, _ModalFooter.ModalFooter], [_ModalHeader.ModalHeader, _ModalBody.ModalBody], [_ModalBody.ModalBody, _ModalFooter.ModalFooter], [_ModalBody.ModalBody]),
-
-  /**
-   * The element to render the dialog as, `span` by default
-   */
   as: _propTypes.default.elementType,
-
-  /**
-   * The size of the `<Modal />` content
-   */
   size: _propTypes.default.oneOf(['auto', 'small', 'medium', 'large', 'fullscreen']),
-
-  /**
-   * Designates the background style of the `<Modal />`
-   */
   variant: _propTypes.default.oneOf(['default', 'inverse']),
-
-  /**
-   * Whether or not the `<Modal />` is open
-   */
   open: _propTypes.default.bool,
-
-  /**
-   * An element or a function returning an element to focus by default
-   */
   defaultFocusElement: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
-
-  /**
-   * Whether focus should be returned to the trigger when the `<Modal/>` is closed
-   */
   shouldReturnFocus: _propTypes.default.bool,
-
-  /**
-   * Whether the `<Modal/>` should request close when the document is clicked
-   */
   shouldCloseOnDocumentClick: _propTypes.default.bool,
-
-  /**
-   * Callback fired when `<Modal />` content has been mounted in the DOM
-   */
   onOpen: _propTypes.default.func,
-
-  /**
-   * Callback fired when `<Modal />` has been unmounted from the DOM
-   */
   onClose: _propTypes.default.func,
-
-  /**
-   * Callback fired when the `<Modal />` is requesting to be closed
-   */
   onDismiss: _propTypes.default.func,
-
-  /**
-   *
-   * A function that returns a reference to the content element
-   */
   contentRef: _propTypes.default.func,
-
-  /**
-   * An element or a function returning an element to use as the mount node
-   * for the `<Modal />` (defaults to `document.body`)
-   */
   mountNode: _propTypes.default.oneOfType([_element.element, _propTypes.default.func]),
-
-  /**
-   * Insert the element at the 'top' of the mountNode or at the 'bottom'
-   */
   insertAt: _propTypes.default.oneOf(['bottom', 'top']),
-
-  /**
-   * An element, function returning an element, or array of elements that will not be hidden from
-   * the screen reader when the `<Modal />` is open
-   */
   liveRegion: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.element, _propTypes.default.func]),
   transition: _uiMotion.transitionTypePropType,
-
-  /**
-   * Callback fired before the <Modal /> transitions in
-   */
   onEnter: _propTypes.default.func,
-
-  /**
-   * Callback fired as the <Modal /> begins to transition in
-   */
   onEntering: _propTypes.default.func,
-
-  /**
-   * Callback fired after the <Modal /> finishes transitioning in
-   */
   onEntered: _propTypes.default.func,
-
-  /**
-   * Callback fired right before the <Modal /> transitions out
-   */
   onExit: _propTypes.default.func,
-
-  /**
-   * Callback fired as the <Modal /> begins to transition out
-   */
   onExiting: _propTypes.default.func,
-
-  /**
-   * Callback fired after the <Modal /> finishes transitioning out
-   */
   onExited: _propTypes.default.func,
-
-  /**
-   * Constrain the Modal to the document window or its closest positioned parent
-   */
   constrain: _propTypes.default.oneOf(['window', 'parent']),
-
-  /**
-   * Should ModalBody handle overflow with scrollbars, or fit its
-   * content within its own height?
-   */
   overflow: _propTypes.default.oneOf(['scroll', 'fit'])
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "8.23.1-snapshot.7+67fb0a5be",
+  "version": "8.24.0",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,35 +24,34 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/emotion": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/shared-types": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-buttons": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-dialog": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-motion": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-overlays": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-portal": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-prop-types": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-react-utils": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-testable": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-utils": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-view": "8.23.1-snapshot.7+67fb0a5be",
+    "@instructure/console": "8.24.0",
+    "@instructure/emotion": "8.24.0",
+    "@instructure/shared-types": "8.24.0",
+    "@instructure/ui-buttons": "8.24.0",
+    "@instructure/ui-dialog": "8.24.0",
+    "@instructure/ui-motion": "8.24.0",
+    "@instructure/ui-overlays": "8.24.0",
+    "@instructure/ui-portal": "8.24.0",
+    "@instructure/ui-prop-types": "8.24.0",
+    "@instructure/ui-react-utils": "8.24.0",
+    "@instructure/ui-testable": "8.24.0",
+    "@instructure/ui-utils": "8.24.0",
+    "@instructure/ui-view": "8.24.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-color-utils": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-position": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-test-locator": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-test-utils": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-themes": "8.23.1-snapshot.7+67fb0a5be"
+    "@instructure/ui-babel-preset": "8.24.0",
+    "@instructure/ui-color-utils": "8.24.0",
+    "@instructure/ui-position": "8.24.0",
+    "@instructure/ui-test-locator": "8.24.0",
+    "@instructure/ui-test-utils": "8.24.0",
+    "@instructure/ui-themes": "8.24.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "67fb0a5bed0138c5152872999bf1138dd2fd8fd7"
+  "sideEffects": false
 }

package/src/Modal/ModalBody/index.tsx

@@ -41,6 +41,7 @@ import type { ModalBodyProps } from './props'
 parent: Modal
 id: Modal.Body
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
@@ -52,8 +53,7 @@ class ModalBody extends Component<ModalBodyProps> {
   static defaultProps = {
     padding: 'medium',
     as: 'div',
-    variant: 'default',
-    children: null
+    variant: 'default'
   }
 
   ref: Element | null = null
@@ -69,26 +69,16 @@ class ModalBody extends Component<ModalBodyProps> {
   }
 
   componentDidMount() {
-    // @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()
+    this.props.makeStyles?.()
   }
 
-  // @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, prevState, snapshot) {
-    // @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()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   render() {
-    const {
-      as,
-      elementRef,
-      overflow,
-      variant,
-      padding,
-      children,
-      ...rest
-    } = this.props
+    const { as, elementRef, overflow, variant, padding, children, ...rest } =
+      this.props
 
     const passthroughProps = View.omitViewProps(
       omitProps(rest, ModalBody.allowedProps),

package/src/Modal/ModalFooter/index.tsx

@@ -39,6 +39,7 @@ import type { ModalFooterProps } from './props'
 parent: Modal
 id: Modal.Footer
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
@@ -48,25 +49,21 @@ class ModalFooter extends Component<ModalFooterProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    variant: 'default',
-    children: null
+    variant: 'default'
   }
 
-  ref: Element | null = null
+  ref: HTMLDivElement | null = null
 
-  handleRef = (el: Element | null) => {
+  handleRef = (el: HTMLDivElement | null) => {
     this.ref = el
   }
 
   componentDidMount() {
-    // @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()
+    this.props.makeStyles?.()
   }
 
-  // @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, prevState, snapshot) {
-    // @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()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   render() {

package/src/Modal/ModalHeader/index.tsx

@@ -42,11 +42,14 @@ import generateComponentTheme from './theme'
 import { propTypes, allowedProps } from './props'
 import type { ModalHeaderProps, ModalHeaderStyleProps } from './props'
 
+type CloseButtonChild = React.ComponentElement<CloseButtonProps, CloseButton>
+
 /**
 ---
 parent: Modal
 id: Modal.Header
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
@@ -56,26 +59,22 @@ class ModalHeader extends Component<ModalHeaderProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    children: null,
     variant: 'default',
     spacing: 'default'
   }
 
-  ref: Element | null = null
+  ref: HTMLDivElement | null = null
 
-  handleRef = (el: Element | null) => {
+  handleRef = (el: HTMLDivElement | null) => {
     this.ref = el
   }
 
   componentDidMount() {
-    // @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(this.makeStyleProps())
+    this.props.makeStyles?.(this.makeStyleProps())
   }
 
-  // @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, prevState, snapshot) {
-    // @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(this.makeStyleProps())
+  componentDidUpdate() {
+    this.props.makeStyles?.(this.makeStyleProps())
   }
 
   makeStyleProps = (): ModalHeaderStyleProps => {
@@ -90,9 +89,7 @@ class ModalHeader extends Component<ModalHeaderProps> {
     React.Children.forEach(this.props.children, (child) => {
       if (
         child &&
-        matchComponentTypes<
-          React.ComponentElement<CloseButtonProps, CloseButton>
-        >(child, [CloseButton])
+        matchComponentTypes<CloseButtonChild>(child, [CloseButton])
       ) {
         hasCloseButton = true
       }

package/src/Modal/index.tsx

@@ -34,7 +34,6 @@ import { createChainedFunction } from '@instructure/ui-utils'
 import { testable } from '@instructure/ui-testable'
 
 import { Transition } from '@instructure/ui-motion'
-import type { TransitionType } from '@instructure/ui-motion'
 import { Portal } from '@instructure/ui-portal'
 import type { PortalNode } from '@instructure/ui-portal'
 import { Dialog } from '@instructure/ui-dialog'
@@ -53,7 +52,12 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
 import { propTypes, allowedProps } from './props'
-import type { ModalProps } from './props'
+import type {
+  ModalProps,
+  ModalState,
+  ModalPropsForPortal,
+  ModalPropsForTransition
+} from './props'
 
 type HeaderChild = React.ComponentElement<ModalHeaderProps, ModalHeader>
 type BodyChild = React.ComponentElement<ModalBodyProps, ModalBody>
@@ -64,10 +68,11 @@ type FooterChild = React.ComponentElement<ModalFooterProps, ModalFooter>
 category: components
 tags: overlay, portal, dialog
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
-class Modal extends Component<ModalProps> {
+class Modal extends Component<ModalProps, ModalState> {
   static readonly componentId = 'Modal'
 
   static propTypes = propTypes
@@ -77,28 +82,9 @@ class Modal extends Component<ModalProps> {
     size: 'auto',
     variant: 'default',
     transition: 'fade',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onOpen: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onClose: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onDismiss: (event) => {},
-    onEnter: () => {},
-    onEntering: () => {},
-    onEntered: () => {},
-    onExit: () => {},
-    onExiting: () => {},
-    onExited: () => {},
-    as: undefined,
-    mountNode: null,
     insertAt: 'bottom',
-    liveRegion: null,
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    contentRef: (el) => {},
     shouldCloseOnDocumentClick: true,
     shouldReturnFocus: true,
-    defaultFocusElement: null,
-    children: null,
     constrain: 'window',
     overflow: 'scroll'
   }
@@ -107,8 +93,7 @@ class Modal extends Component<ModalProps> {
   static Body = ModalBody
   static Footer = ModalFooter
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
+  constructor(props: ModalProps) {
     super(props)
 
     this.state = {
@@ -117,6 +102,7 @@ class Modal extends Component<ModalProps> {
   }
 
   _DOMNode: PortalNode = null
+  _content: Dialog | null = null
 
   ref?: Element | null = null
 
@@ -125,20 +111,17 @@ class Modal extends Component<ModalProps> {
   }
 
   componentDidMount() {
-    // @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()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'prevProps' implicitly has an 'any' type... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate(prevProps: ModalProps) {
     if (prevProps.open && !this.props.open) {
       // closing
       this.setState({
         transitioning: prevProps.transition !== null
       })
     }
-    // @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()
+    this.props.makeStyles?.()
   }
 
   get defaultFocusElement() {
@@ -164,15 +147,13 @@ class Modal extends Component<ModalProps> {
     this.DOMNode = DOMNode
   }
 
-  handleTransitionExited = (_type?: TransitionType) => {
+  handleTransitionExited: ModalProps['onExited'] = () => {
     this.setState({
       transitioning: false
     })
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'el' implicitly has an 'any' type.
-  contentRef = (el) => {
-    // @ts-expect-error ts-migrate(2551) FIXME: Property '_content' does not exist on type 'Modal'... Remove this comment to see the full error message
+  contentRef = (el: Dialog | null) => {
     this._content = el
     if (typeof this.props.contentRef === 'function') {
       this.props.contentRef(el)
@@ -201,8 +182,15 @@ class Modal extends Component<ModalProps> {
     )
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  renderDialog(props) {
+  renderDialog(
+    props: Omit<
+      ModalProps,
+      | keyof ModalPropsForPortal
+      | keyof ModalPropsForTransition
+      | 'constrain'
+      | 'overflow'
+    >
+  ) {
     const {
       onDismiss,
       label,
@@ -269,7 +257,6 @@ class Modal extends Component<ModalProps> {
       ...passthroughProps
     } = this.props
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'transitioning' does not exist on type 'R... Remove this comment to see the full error message
     const portalIsOpen = open || this.state.transitioning
 
     return (