@instructure/ui-alerts 8.15.1-snapshot.0 → 8.16.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.16.0](https://github.com/instructure/instructure-ui/compare/v8.15.0...v8.16.0) (2022-02-03)
+
+**Note:** Version bump only for package @instructure/ui-alerts
+
 # [8.15.0](https://github.com/instructure/instructure-ui/compare/v8.14.0...v8.15.0) (2022-01-26)
 
 **Note:** Version bump only for package @instructure/ui-alerts

package/es/Alert/index.js

@@ -25,7 +25,7 @@ var _dec, _class, _class2, _temp;
  */
 
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import keycode from 'keycode';
 import { callRenderProp } from '@instructure/ui-react-utils';
@@ -46,11 +46,13 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 let Alert = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Alert extends Component {
   constructor(props) {
     super(props);
     this._timeouts = [];
+    this.srid = void 0;
     this.variantUI = {
       error: IconNoSolid,
       info: IconInfoBorderlessSolid,
@@ -127,7 +129,7 @@ let Alert = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
     if (liveRegion) {
       liveRegion.setAttribute('aria-live', this.props.liveRegionPoliteness);
       liveRegion.setAttribute('aria-relevant', 'additions text');
-      liveRegion.setAttribute('aria-atomic', this.props.isLiveRegionAtomic);
+      liveRegion.setAttribute('aria-atomic', `${this.props.isLiveRegionAtomic}`);
     }
   }
 
@@ -176,6 +178,8 @@ let Alert = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
       const div = document.getElementById(this.srid);
 
       if (div) {
+        var _div$parentNode;
+
         // Accessibility attributes must be removed for the deletion of the node
         // and then reapplied because JAWS/IE will not respect the
         // "aria-relevant" attribute and read when the node is deleted if
@@ -184,14 +188,16 @@ let Alert = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
         liveRegion.removeAttribute('aria-relevant');
         liveRegion.removeAttribute('aria-atomic');
         ReactDOM.unmountComponentAtNode(div);
-        div.parentNode.removeChild(div);
+        div === null || div === void 0 ? void 0 : (_div$parentNode = div.parentNode) === null || _div$parentNode === void 0 ? void 0 : _div$parentNode.removeChild(div);
         this.initLiveRegion(liveRegion);
       }
     }
   }
 
   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);
     const liveRegion = this.getLiveRegion();
 
     if (liveRegion) {
@@ -203,7 +209,9 @@ let Alert = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
   }
 
   componentDidUpdate(prevProps) {
-    this.props.makeStyles();
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
 
     if (!!this.props.open === false && !!this.props.open !== !!prevProps.open) {
       // this outside world is asking us to close the alert, which needs to
@@ -261,7 +269,7 @@ let Alert = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
   render() {
     // Don't render anything if screen reader only
     if (this.props.screenReaderOnly) {
-      error(this.getLiveRegion(), `[Alert] The 'screenReaderOnly' prop must be used in conjunction with 'liveRegion'.`);
+      error(!!this.getLiveRegion(), `[Alert] The 'screenReaderOnly' prop must be used in conjunction with 'liveRegion'.`);
       return null;
     }
 

package/es/Alert/props.js

@@ -24,72 +24,18 @@
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
-  /**
-   * content to be rendered within Alert
-   */
   children: PropTypes.node,
-
-  /**
-   * Determines color and icon
-   */
   variant: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing,
-
-  /**
-   * Function that returns the DIV where screenreader alerts will be placed.
-   */
   liveRegion: PropTypes.func,
-
-  /**
-   * Choose the politeness level of screenreader alerts.
-   */
   liveRegionPoliteness: PropTypes.oneOf(['polite', 'assertive']),
-
-  /**
-   * If the screenreader alert should be atomic
-   */
   isLiveRegionAtomic: PropTypes.bool,
-
-  /**
-   * If the alert should only be visible to screen readers
-   */
   screenReaderOnly: PropTypes.bool,
-
-  /**
-   * Milliseconds until the Alert is dismissed automatically
-   */
   timeout: PropTypes.number,
-
-  /**
-   * Close button label. Can be a React component
-   */
   renderCloseButtonLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-  /**
-   * Callback after the alert is closed
-   */
   onDismiss: PropTypes.func,
-
-  /**
-   * Transition used to make the alert appear and disappear
-   */
   transition: PropTypes.oneOf(['none', 'fade']),
-
-  /**
-   * if open transitions from truthy to falsey, it's a signal to close and unmount the alert.
-   * This is necessary to close the alert from the outside and still run the transition.
-   */
   open: PropTypes.bool,
-
-  /**
-   * If the alert should have a shadow.
-   */
   hasShadow: PropTypes.bool
 };
 const allowedProps = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow'];

package/lib/Alert/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Alert = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
@@ -51,11 +53,13 @@ var _dec, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let Alert = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Alert extends _react.Component {
   constructor(props) {
     super(props);
     this._timeouts = [];
+    this.srid = void 0;
     this.variantUI = {
       error: _IconNoSolid.IconNoSolid,
       info: _IconInfoBorderlessSolid.IconInfoBorderlessSolid,
@@ -132,7 +136,7 @@ let Alert = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     if (liveRegion) {
       liveRegion.setAttribute('aria-live', this.props.liveRegionPoliteness);
       liveRegion.setAttribute('aria-relevant', 'additions text');
-      liveRegion.setAttribute('aria-atomic', this.props.isLiveRegionAtomic);
+      liveRegion.setAttribute('aria-atomic', `${this.props.isLiveRegionAtomic}`);
     }
   }
 
@@ -182,6 +186,8 @@ let Alert = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
       const div = document.getElementById(this.srid);
 
       if (div) {
+        var _div$parentNode;
+
         // Accessibility attributes must be removed for the deletion of the node
         // and then reapplied because JAWS/IE will not respect the
         // "aria-relevant" attribute and read when the node is deleted if
@@ -192,14 +198,16 @@ let Alert = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
 
         _reactDom.default.unmountComponentAtNode(div);
 
-        div.parentNode.removeChild(div);
+        div === null || div === void 0 ? void 0 : (_div$parentNode = div.parentNode) === null || _div$parentNode === void 0 ? void 0 : _div$parentNode.removeChild(div);
         this.initLiveRegion(liveRegion);
       }
     }
   }
 
   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);
     const liveRegion = this.getLiveRegion();
 
     if (liveRegion) {
@@ -211,7 +219,9 @@ let Alert = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   }
 
   componentDidUpdate(prevProps) {
-    this.props.makeStyles();
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
 
     if (!!this.props.open === false && !!this.props.open !== !!prevProps.open) {
       // this outside world is asking us to close the alert, which needs to
@@ -269,7 +279,7 @@ let Alert = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   render() {
     // Don't render anything if screen reader only
     if (this.props.screenReaderOnly) {
-      (0, _console.logError)(this.getLiveRegion(), `[Alert] The 'screenReaderOnly' prop must be used in conjunction with 'liveRegion'.`);
+      (0, _console.logError)(!!this.getLiveRegion(), `[Alert] The 'screenReaderOnly' prop must be used in conjunction with 'liveRegion'.`);
       return null;
     }
 

package/lib/Alert/props.js

@@ -35,72 +35,18 @@ var _emotion = require("@instructure/emotion");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * content to be rendered within Alert
-   */
   children: _propTypes.default.node,
-
-  /**
-   * Determines color and icon
-   */
   variant: _propTypes.default.oneOf(['info', 'success', 'warning', 'error']),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: _emotion.ThemeablePropTypes.spacing,
-
-  /**
-   * Function that returns the DIV where screenreader alerts will be placed.
-   */
   liveRegion: _propTypes.default.func,
-
-  /**
-   * Choose the politeness level of screenreader alerts.
-   */
   liveRegionPoliteness: _propTypes.default.oneOf(['polite', 'assertive']),
-
-  /**
-   * If the screenreader alert should be atomic
-   */
   isLiveRegionAtomic: _propTypes.default.bool,
-
-  /**
-   * If the alert should only be visible to screen readers
-   */
   screenReaderOnly: _propTypes.default.bool,
-
-  /**
-   * Milliseconds until the Alert is dismissed automatically
-   */
   timeout: _propTypes.default.number,
-
-  /**
-   * Close button label. Can be a React component
-   */
   renderCloseButtonLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-
-  /**
-   * Callback after the alert is closed
-   */
   onDismiss: _propTypes.default.func,
-
-  /**
-   * Transition used to make the alert appear and disappear
-   */
   transition: _propTypes.default.oneOf(['none', 'fade']),
-
-  /**
-   * if open transitions from truthy to falsey, it's a signal to close and unmount the alert.
-   * This is necessary to close the alert from the outside and still run the transition.
-   */
   open: _propTypes.default.bool,
-
-  /**
-   * If the alert should have a shadow.
-   */
   hasShadow: _propTypes.default.bool
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-alerts",
-  "version": "8.15.1-snapshot.0+d331a2330",
+  "version": "8.16.0",
   "description": "An alert component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,24 +24,24 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.15.1-snapshot.0+d331a2330",
-    "@instructure/ui-color-utils": "8.15.1-snapshot.0+d331a2330",
-    "@instructure/ui-test-utils": "8.15.1-snapshot.0+d331a2330"
+    "@instructure/ui-babel-preset": "8.16.0",
+    "@instructure/ui-color-utils": "8.16.0",
+    "@instructure/ui-test-utils": "8.16.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.15.1-snapshot.0+d331a2330",
-    "@instructure/emotion": "8.15.1-snapshot.0+d331a2330",
-    "@instructure/shared-types": "8.15.1-snapshot.0+d331a2330",
-    "@instructure/ui-a11y-content": "8.15.1-snapshot.0+d331a2330",
-    "@instructure/ui-buttons": "8.15.1-snapshot.0+d331a2330",
-    "@instructure/ui-icons": "8.15.1-snapshot.0+d331a2330",
-    "@instructure/ui-motion": "8.15.1-snapshot.0+d331a2330",
-    "@instructure/ui-react-utils": "8.15.1-snapshot.0+d331a2330",
-    "@instructure/ui-themes": "8.15.1-snapshot.0+d331a2330",
-    "@instructure/ui-utils": "8.15.1-snapshot.0+d331a2330",
-    "@instructure/ui-view": "8.15.1-snapshot.0+d331a2330",
-    "@instructure/uid": "8.15.1-snapshot.0+d331a2330",
+    "@instructure/console": "8.16.0",
+    "@instructure/emotion": "8.16.0",
+    "@instructure/shared-types": "8.16.0",
+    "@instructure/ui-a11y-content": "8.16.0",
+    "@instructure/ui-buttons": "8.16.0",
+    "@instructure/ui-icons": "8.16.0",
+    "@instructure/ui-motion": "8.16.0",
+    "@instructure/ui-react-utils": "8.16.0",
+    "@instructure/ui-themes": "8.16.0",
+    "@instructure/ui-utils": "8.16.0",
+    "@instructure/ui-view": "8.16.0",
+    "@instructure/uid": "8.16.0",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -52,6 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "d331a2330d5b1d0e2353093d05c28b12b329b6b3"
+  "sideEffects": false
 }

package/src/Alert/index.tsx

@@ -22,13 +22,14 @@
  * SOFTWARE.
  */
 /** @jsx jsx */
-import { Component } from 'react'
+import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 import keycode from 'keycode'
 
 import { callRenderProp } from '@instructure/ui-react-utils'
 import { CloseButton } from '@instructure/ui-buttons'
 import { View } from '@instructure/ui-view'
+import type { ViewOwnProps } from '@instructure/ui-view'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import {
   IconCheckMarkSolid,
@@ -46,15 +47,16 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
 import { propTypes, allowedProps } from './props'
-import type { AlertProps } from './props'
+import type { AlertProps, AlertState } from './props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
-class Alert extends Component<AlertProps> {
+class Alert extends Component<AlertProps, AlertState> {
   static readonly componentId = 'Alert'
 
   static propTypes = propTypes
@@ -72,8 +74,7 @@ class Alert extends Component<AlertProps> {
     hasShadow: true
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
+  constructor(props: AlertProps) {
     super(props)
 
     this.state = {
@@ -81,7 +82,8 @@ class Alert extends Component<AlertProps> {
     }
   }
 
-  _timeouts = []
+  _timeouts: ReturnType<typeof setTimeout>[] = []
+  srid?: string
 
   variantUI = {
     error: IconNoSolid,
@@ -97,10 +99,8 @@ class Alert extends Component<AlertProps> {
   }
 
   handleTimeout = () => {
-    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-    if (this.props.timeout > 0) {
+    if (this.props.timeout! > 0) {
       this._timeouts.push(
-        // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'Timeout' is not assignable to pa... Remove this comment to see the full error message
         setTimeout(() => {
           this.close()
         }, this.props.timeout)
@@ -130,8 +130,7 @@ class Alert extends Component<AlertProps> {
   }
 
   // duck type for a dom node
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'n' implicitly has an 'any' type.
-  isDOMNode(n) {
+  isDOMNode(n: Element | null) {
     return n && typeof n === 'object' && n.nodeType === 1
   }
 
@@ -144,17 +143,19 @@ class Alert extends Component<AlertProps> {
     return this.isDOMNode(lr) ? lr : null
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'liveRegion' implicitly has an 'any' typ... Remove this comment to see the full error message
-  initLiveRegion(liveRegion) {
+  initLiveRegion(liveRegion: Element) {
     error(
       liveRegion.getAttribute('role') === 'alert',
       `[Alert] live region must have role='alert' set on page load in order to announce content`
     )
 
     if (liveRegion) {
-      liveRegion.setAttribute('aria-live', this.props.liveRegionPoliteness)
+      liveRegion.setAttribute('aria-live', this.props.liveRegionPoliteness!)
       liveRegion.setAttribute('aria-relevant', 'additions text')
-      liveRegion.setAttribute('aria-atomic', this.props.isLiveRegionAtomic)
+      liveRegion.setAttribute(
+        'aria-atomic',
+        `${this.props.isLiveRegionAtomic!}`
+      )
     }
   }
 
@@ -165,11 +166,9 @@ class Alert extends Component<AlertProps> {
   createScreenreaderAlert() {
     const liveRegion = this.getLiveRegion()
     if (liveRegion) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'srid' does not exist on type 'Alert'.
       this.srid = uid('Alert')
 
       const div = document.createElement('div')
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'srid' does not exist on type 'Alert'.
       div.setAttribute('id', this.srid)
 
       this.renderScreenreeaderAlert(div)
@@ -179,19 +178,16 @@ class Alert extends Component<AlertProps> {
 
   updateScreenreaderAlert() {
     if (this.getLiveRegion()) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'srid' does not exist on type 'Alert'.
-      const div = document.getElementById(this.srid)
+      const div = document.getElementById(this.srid!) as HTMLDivElement
       if (div) {
-        // @ts-expect-error FIXME should not pass null?
-        ReactDOM.render(null, div, () => {
+        ReactDOM.render(null as any, div, () => {
           this.renderScreenreeaderAlert(div)
         })
       }
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'div' implicitly has an 'any' type.
-  renderScreenreeaderAlert(div) {
+  renderScreenreeaderAlert(div: HTMLDivElement) {
     const content = this.createScreenreaderContentNode()
     ReactDOM.render(
       // since ScreenReaderContent gets rendered outside the app,
@@ -205,8 +201,7 @@ class Alert extends Component<AlertProps> {
   removeScreenreaderAlert() {
     const liveRegion = this.getLiveRegion()
     if (liveRegion) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'srid' does not exist on type 'Alert'.
-      const div = document.getElementById(this.srid)
+      const div = document.getElementById(this.srid!)
       if (div) {
         // Accessibility attributes must be removed for the deletion of the node
         // and then reapplied because JAWS/IE will not respect the
@@ -217,16 +212,14 @@ class Alert extends Component<AlertProps> {
         liveRegion.removeAttribute('aria-atomic')
 
         ReactDOM.unmountComponentAtNode(div)
-        // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-        div.parentNode.removeChild(div)
+        div?.parentNode?.removeChild(div)
 
         this.initLiveRegion(liveRegion)
       }
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleKeyUp = (event) => {
+  handleKeyUp = (event: React.KeyboardEvent<ViewOwnProps>) => {
     if (
       this.props.renderCloseButtonLabel &&
       event.keyCode === keycode.codes.esc
@@ -236,8 +229,7 @@ class Alert extends Component<AlertProps> {
   }
 
   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?.()
     const liveRegion = this.getLiveRegion()
     if (liveRegion) {
       this.initLiveRegion(liveRegion)
@@ -247,10 +239,8 @@ class Alert extends Component<AlertProps> {
     this.createScreenreaderAlert()
   }
 
-  // @ts-expect-error ts-migrate(2339) FIXME: Property 'open' does not exist on type 'Readonly<{... Remove this comment to see the full error message
-  componentDidUpdate(prevProps) {
-    // @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(prevProps: AlertProps) {
+    this.props.makeStyles?.()
     if (!!this.props.open === false && !!this.props.open !== !!prevProps.open) {
       // this outside world is asking us to close the alert, which needs to
       // take place internally so the transition runs
@@ -268,8 +258,7 @@ class Alert extends Component<AlertProps> {
   }
 
   renderIcon() {
-    // @ts-expect-error ts-migrate(2538) FIXME: Type 'undefined' cannot be used as an index type.
-    const Icon = this.variantUI[this.props.variant]
+    const Icon = this.variantUI[this.props.variant!]
     return (
       <div css={this.props.styles?.icon}>
         <Icon />
@@ -313,7 +302,7 @@ class Alert extends Component<AlertProps> {
     // Don't render anything if screen reader only
     if (this.props.screenReaderOnly) {
       error(
-        this.getLiveRegion(),
+        !!this.getLiveRegion(),
         `[Alert] The 'screenReaderOnly' prop must be used in conjunction with 'liveRegion'.`
       )
 
@@ -321,14 +310,12 @@ class Alert extends Component<AlertProps> {
     }
 
     if (this.props.transition === 'none') {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'open' does not exist on type 'Readonly<{... Remove this comment to see the full error message
       return this.state.open ? this.renderAlert() : null
     }
     return (
       <Transition
         type={this.props.transition}
         transitionOnMount
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'open' does not exist on type 'Readonly<{... Remove this comment to see the full error message
         in={this.state.open}
         unmountOnExit
         onExited={this.onExitTransition}