@instructure/ui-alerts 8.28.1-snapshot-2 → 8.28.1

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.28.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.28.0...v8.28.1-snapshot-2) (2022-09-02)
+## [8.28.1](https://github.com/instructure/instructure-ui/compare/v8.28.0...v8.28.1) (2022-09-12)
 
-**Note:** Version bump only for package @instructure/ui-alerts
+
+### Bug Fixes
+
+* support react 18 ([972bb93](https://github.com/instructure/instructure-ui/commit/972bb93d2835fcca3548d624b1ba2497661b4243))
 
 
 

package/es/Alert/index.js

@@ -35,8 +35,7 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconCheckMarkSolid, IconInfoBorderlessSolid, IconWarningBorderlessSolid, IconNoSolid } from '@instructure/ui-icons';
 import { Transition } from '@instructure/ui-motion';
 import { logError as error } from '@instructure/console';
-import { canvas } from '@instructure/ui-themes';
-import { withStyle, jsx, InstUISettingsProvider } from '@instructure/emotion';
+import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
@@ -96,6 +95,7 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
       }
     };
 
+    this.srid = this.props.deterministicId();
     this.state = {
       open: true
     };
@@ -140,36 +140,12 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
     const liveRegion = this.getLiveRegion();
 
     if (liveRegion) {
-      this.srid = this.props.deterministicId();
       const div = document.createElement('div');
       div.setAttribute('id', this.srid);
-      this.renderScreenreeaderAlert(div);
       liveRegion.appendChild(div);
     }
   }
 
-  updateScreenreaderAlert() {
-    if (this.getLiveRegion()) {
-      const div = document.getElementById(this.srid);
-
-      if (div) {
-        ReactDOM.render(null, div, () => {
-          this.renderScreenreeaderAlert(div);
-        });
-      }
-    }
-  }
-
-  renderScreenreeaderAlert(div) {
-    const content = this.createScreenreaderContentNode();
-    ReactDOM.render( // since ScreenReaderContent gets rendered outside the app,
-    // and uses the withStyle decorator, we need to provide a theme for it,
-    // otherwise throws warning (any theme, doesn't use any theme variables)
-    jsx(InstUISettingsProvider, {
-      theme: canvas
-    }, content), div);
-  }
-
   removeScreenreaderAlert() {
     const liveRegion = this.getLiveRegion();
 
@@ -177,8 +153,6 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
       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
@@ -186,8 +160,6 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
         liveRegion.removeAttribute('aria-live');
         liveRegion.removeAttribute('aria-relevant');
         liveRegion.removeAttribute('aria-atomic');
-        ReactDOM.unmountComponentAtNode(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);
       }
     }
@@ -204,7 +176,10 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
     }
 
     this.handleTimeout();
-    this.createScreenreaderAlert();
+  }
+
+  componentWillUnmount() {
+    this.clearTimeouts();
   }
 
   componentDidUpdate(prevProps) {
@@ -216,18 +191,9 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
       // this outside world is asking us to close the alert, which needs to
       // take place internally so the transition runs
       this.close();
-    } else {
-      if (this.props.children !== prevProps.children) {
-        this.updateScreenreaderAlert();
-      }
     }
   }
 
-  componentWillUnmount() {
-    this.removeScreenreaderAlert();
-    this.clearTimeouts();
-  }
-
   renderIcon() {
     var _this$props$styles;
 
@@ -265,24 +231,33 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
     }, this.props.children), this.renderCloseButton());
   }
 
+  createScreenReaderPortal(liveRegion) {
+    const open = this.state.open;
+    return open ? /*#__PURE__*/ReactDOM.createPortal(jsx("div", {
+      id: this.srid
+    }, this.createScreenreaderContentNode()), liveRegion) : null;
+  }
+
   render() {
-    // Don't render anything if screen reader only
+    const liveRegion = this.getLiveRegion();
+    const screenReaderContent = liveRegion ? this.createScreenReaderPortal(liveRegion) : null; // 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'.`);
-      return null;
+      return screenReaderContent;
     }
 
     if (this.props.transition === 'none') {
-      return this.state.open ? this.renderAlert() : null;
+      return this.state.open ? jsx(React.Fragment, null, screenReaderContent, this.renderAlert()) : null;
     }
 
-    return jsx(Transition, {
+    return jsx(React.Fragment, null, screenReaderContent, jsx(Transition, {
       type: this.props.transition,
       transitionOnMount: true,
       in: this.state.open,
       unmountOnExit: true,
       onExited: this.onExitTransition
-    }, this.renderAlert());
+    }, this.renderAlert()));
   }
 
 }, _class2.displayName = "Alert", _class2.componentId = 'Alert', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {

package/lib/Alert/index.js

@@ -37,8 +37,6 @@ var _Transition = require("@instructure/ui-motion/lib/Transition");
 
 var _console = require("@instructure/console");
 
-var _uiThemes = require("@instructure/ui-themes");
-
 var _emotion = require("@instructure/emotion");
 
 var _styles = _interopRequireDefault(require("./styles"));
@@ -104,6 +102,7 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
       }
     };
 
+    this.srid = this.props.deterministicId();
     this.state = {
       open: true
     };
@@ -148,37 +147,12 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
     const liveRegion = this.getLiveRegion();
 
     if (liveRegion) {
-      this.srid = this.props.deterministicId();
       const div = document.createElement('div');
       div.setAttribute('id', this.srid);
-      this.renderScreenreeaderAlert(div);
       liveRegion.appendChild(div);
     }
   }
 
-  updateScreenreaderAlert() {
-    if (this.getLiveRegion()) {
-      const div = document.getElementById(this.srid);
-
-      if (div) {
-        _reactDom.default.render(null, div, () => {
-          this.renderScreenreeaderAlert(div);
-        });
-      }
-    }
-  }
-
-  renderScreenreeaderAlert(div) {
-    const content = this.createScreenreaderContentNode();
-
-    _reactDom.default.render( // since ScreenReaderContent gets rendered outside the app,
-    // and uses the withStyle decorator, we need to provide a theme for it,
-    // otherwise throws warning (any theme, doesn't use any theme variables)
-    (0, _emotion.jsx)(_emotion.InstUISettingsProvider, {
-      theme: _uiThemes.canvas
-    }, content), div);
-  }
-
   removeScreenreaderAlert() {
     const liveRegion = this.getLiveRegion();
 
@@ -186,8 +160,6 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
       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
@@ -195,10 +167,6 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
         liveRegion.removeAttribute('aria-live');
         liveRegion.removeAttribute('aria-relevant');
         liveRegion.removeAttribute('aria-atomic');
-
-        _reactDom.default.unmountComponentAtNode(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);
       }
     }
@@ -215,7 +183,10 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
     }
 
     this.handleTimeout();
-    this.createScreenreaderAlert();
+  }
+
+  componentWillUnmount() {
+    this.clearTimeouts();
   }
 
   componentDidUpdate(prevProps) {
@@ -227,18 +198,9 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
       // this outside world is asking us to close the alert, which needs to
       // take place internally so the transition runs
       this.close();
-    } else {
-      if (this.props.children !== prevProps.children) {
-        this.updateScreenreaderAlert();
-      }
     }
   }
 
-  componentWillUnmount() {
-    this.removeScreenreaderAlert();
-    this.clearTimeouts();
-  }
-
   renderIcon() {
     var _this$props$styles;
 
@@ -276,24 +238,33 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
     }, this.props.children), this.renderCloseButton());
   }
 
+  createScreenReaderPortal(liveRegion) {
+    const open = this.state.open;
+    return open ? /*#__PURE__*/_reactDom.default.createPortal((0, _emotion.jsx)("div", {
+      id: this.srid
+    }, this.createScreenreaderContentNode()), liveRegion) : null;
+  }
+
   render() {
-    // Don't render anything if screen reader only
+    const liveRegion = this.getLiveRegion();
+    const screenReaderContent = liveRegion ? this.createScreenReaderPortal(liveRegion) : null; // 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'.`);
-      return null;
+      return screenReaderContent;
     }
 
     if (this.props.transition === 'none') {
-      return this.state.open ? this.renderAlert() : null;
+      return this.state.open ? (0, _emotion.jsx)(_react.default.Fragment, null, screenReaderContent, this.renderAlert()) : null;
     }
 
-    return (0, _emotion.jsx)(_Transition.Transition, {
+    return (0, _emotion.jsx)(_react.default.Fragment, null, screenReaderContent, (0, _emotion.jsx)(_Transition.Transition, {
       type: this.props.transition,
       transitionOnMount: true,
       in: this.state.open,
       unmountOnExit: true,
       onExited: this.onExitTransition
-    }, this.renderAlert());
+    }, this.renderAlert()));
   }
 
 }, _class2.displayName = "Alert", _class2.componentId = 'Alert', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-alerts",
-  "version": "8.28.1-snapshot-2",
+  "version": "8.28.1",
   "description": "An alert component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,24 +23,24 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.28.1-snapshot-2",
-    "@instructure/ui-color-utils": "8.28.1-snapshot-2",
-    "@instructure/ui-test-utils": "8.28.1-snapshot-2"
+    "@instructure/ui-babel-preset": "8.28.1",
+    "@instructure/ui-color-utils": "8.28.1",
+    "@instructure/ui-test-utils": "8.28.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.28.1-snapshot-2",
-    "@instructure/emotion": "8.28.1-snapshot-2",
-    "@instructure/shared-types": "8.28.1-snapshot-2",
-    "@instructure/ui-a11y-content": "8.28.1-snapshot-2",
-    "@instructure/ui-buttons": "8.28.1-snapshot-2",
-    "@instructure/ui-icons": "8.28.1-snapshot-2",
-    "@instructure/ui-motion": "8.28.1-snapshot-2",
-    "@instructure/ui-react-utils": "8.28.1-snapshot-2",
-    "@instructure/ui-themes": "8.28.1-snapshot-2",
-    "@instructure/ui-utils": "8.28.1-snapshot-2",
-    "@instructure/ui-view": "8.28.1-snapshot-2",
-    "@instructure/uid": "8.28.1-snapshot-2",
+    "@instructure/console": "8.28.1",
+    "@instructure/emotion": "8.28.1",
+    "@instructure/shared-types": "8.28.1",
+    "@instructure/ui-a11y-content": "8.28.1",
+    "@instructure/ui-buttons": "8.28.1",
+    "@instructure/ui-icons": "8.28.1",
+    "@instructure/ui-motion": "8.28.1",
+    "@instructure/ui-react-utils": "8.28.1",
+    "@instructure/ui-themes": "8.28.1",
+    "@instructure/ui-utils": "8.28.1",
+    "@instructure/ui-view": "8.28.1",
+    "@instructure/uid": "8.28.1",
     "keycode": "^2",
     "prop-types": "^15"
   },

package/src/Alert/index.tsx

@@ -42,8 +42,7 @@ import {
 } from '@instructure/ui-icons'
 import { Transition } from '@instructure/ui-motion'
 import { logError as error } from '@instructure/console'
-import { canvas } from '@instructure/ui-themes'
-import { withStyle, jsx, InstUISettingsProvider } from '@instructure/emotion'
+import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
@@ -80,13 +79,14 @@ class Alert extends Component<AlertProps, AlertState> {
   constructor(props: AlertProps) {
     super(props)
 
+    this.srid = this.props.deterministicId!()
     this.state = {
       open: true
     }
   }
 
   _timeouts: ReturnType<typeof setTimeout>[] = []
-  srid?: string
+  srid: string
 
   variantUI = {
     error: IconNoSolid,
@@ -169,38 +169,13 @@ class Alert extends Component<AlertProps, AlertState> {
   createScreenreaderAlert() {
     const liveRegion = this.getLiveRegion()
     if (liveRegion) {
-      this.srid = this.props.deterministicId!()
-
       const div = document.createElement('div')
       div.setAttribute('id', this.srid)
 
-      this.renderScreenreeaderAlert(div)
       liveRegion.appendChild(div)
     }
   }
 
-  updateScreenreaderAlert() {
-    if (this.getLiveRegion()) {
-      const div = document.getElementById(this.srid!) as HTMLDivElement
-      if (div) {
-        ReactDOM.render(null as any, div, () => {
-          this.renderScreenreeaderAlert(div)
-        })
-      }
-    }
-  }
-
-  renderScreenreeaderAlert(div: HTMLDivElement) {
-    const content = this.createScreenreaderContentNode()
-    ReactDOM.render(
-      // since ScreenReaderContent gets rendered outside the app,
-      // and uses the withStyle decorator, we need to provide a theme for it,
-      // otherwise throws warning (any theme, doesn't use any theme variables)
-      <InstUISettingsProvider theme={canvas}>{content}</InstUISettingsProvider>,
-      div
-    )
-  }
-
   removeScreenreaderAlert() {
     const liveRegion = this.getLiveRegion()
     if (liveRegion) {
@@ -214,9 +189,6 @@ class Alert extends Component<AlertProps, AlertState> {
         liveRegion.removeAttribute('aria-relevant')
         liveRegion.removeAttribute('aria-atomic')
 
-        ReactDOM.unmountComponentAtNode(div)
-        div?.parentNode?.removeChild(div)
-
         this.initLiveRegion(liveRegion)
       }
     }
@@ -239,7 +211,10 @@ class Alert extends Component<AlertProps, AlertState> {
     }
 
     this.handleTimeout()
-    this.createScreenreaderAlert()
+  }
+
+  componentWillUnmount() {
+    this.clearTimeouts()
   }
 
   componentDidUpdate(prevProps: AlertProps) {
@@ -248,18 +223,9 @@ class Alert extends Component<AlertProps, AlertState> {
       // this outside world is asking us to close the alert, which needs to
       // take place internally so the transition runs
       this.close()
-    } else {
-      if (this.props.children !== prevProps.children) {
-        this.updateScreenreaderAlert()
-      }
     }
   }
 
-  componentWillUnmount() {
-    this.removeScreenreaderAlert()
-    this.clearTimeouts()
-  }
-
   renderIcon() {
     const Icon = this.variantUI[this.props.variant!]
     return (
@@ -301,7 +267,22 @@ class Alert extends Component<AlertProps, AlertState> {
     )
   }
 
+  createScreenReaderPortal(liveRegion: Element) {
+    const { open } = this.state
+
+    return open
+      ? ReactDOM.createPortal(
+          <div id={this.srid}>{this.createScreenreaderContentNode()}</div>,
+          liveRegion
+        )
+      : null
+  }
+
   render() {
+    const liveRegion = this.getLiveRegion()
+    const screenReaderContent = liveRegion
+      ? this.createScreenReaderPortal(liveRegion)
+      : null
     // Don't render anything if screen reader only
     if (this.props.screenReaderOnly) {
       error(
@@ -309,22 +290,30 @@ class Alert extends Component<AlertProps, AlertState> {
         `[Alert] The 'screenReaderOnly' prop must be used in conjunction with 'liveRegion'.`
       )
 
-      return null
+      return screenReaderContent
     }
 
     if (this.props.transition === 'none') {
-      return this.state.open ? this.renderAlert() : null
+      return this.state.open ? (
+        <React.Fragment>
+          {screenReaderContent}
+          {this.renderAlert()}
+        </React.Fragment>
+      ) : null
     }
     return (
-      <Transition
-        type={this.props.transition}
-        transitionOnMount
-        in={this.state.open}
-        unmountOnExit
-        onExited={this.onExitTransition}
-      >
-        {this.renderAlert()}
-      </Transition>
+      <React.Fragment>
+        {screenReaderContent}
+        <Transition
+          type={this.props.transition}
+          transitionOnMount
+          in={this.state.open}
+          unmountOnExit
+          onExited={this.onExitTransition}
+        >
+          {this.renderAlert()}
+        </Transition>
+      </React.Fragment>
     )
   }
 }