@instructure/ui-alerts 8.33.2-snapshot-0 → 8.33.2

package/CHANGELOG.md

@@ -3,14 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.33.2-snapshot-0](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2-snapshot-0) (2023-01-13)
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
 
 **Note:** Version bump only for package @instructure/ui-alerts
 
-
-
-
-
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-alerts

package/es/Alert/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -23,7 +22,6 @@ var _dec, _dec2, _class, _class2;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 /** @jsx jsx */
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
@@ -39,7 +37,6 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -58,11 +55,9 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
       warning: IconWarningBorderlessSolid
     };
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
-
     this.handleTimeout = () => {
       if (this.props.timeout > 0) {
         this._timeouts.push(setTimeout(() => {
@@ -70,13 +65,11 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
         }, this.props.timeout));
       }
     };
-
     this.onExitTransition = () => {
       if (this.props.onDismiss) {
         this.props.onDismiss();
       }
     };
-
     this.close = () => {
       this.clearTimeouts();
       this.removeScreenreaderAlert();
@@ -88,70 +81,54 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
         }
       });
     };
-
     this.handleKeyUp = event => {
       if (this.props.renderCloseButtonLabel && event.keyCode === keycode.codes.esc) {
         this.close();
       }
     };
-
     this.srid = this.props.deterministicId();
     this.state = {
       open: true
     };
   }
-
   clearTimeouts() {
     this._timeouts.forEach(timeout => clearTimeout(timeout));
-
     this._timeouts = [];
   }
-
   // duck type for a dom node
   isDOMNode(n) {
     return n && typeof n === 'object' && n.nodeType === 1;
   }
-
   getLiveRegion() {
     let lr = null;
-
     if (typeof this.props.liveRegion === 'function') {
       lr = this.props.liveRegion();
     }
-
     return this.isDOMNode(lr) ? lr : null;
   }
-
   initLiveRegion(liveRegion) {
     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-relevant', 'additions text');
       liveRegion.setAttribute('aria-atomic', `${this.props.isLiveRegionAtomic}`);
     }
   }
-
   createScreenreaderContentNode() {
     return jsx(ScreenReaderContent, null, this.props.children);
   }
-
   createScreenreaderAlert() {
     const liveRegion = this.getLiveRegion();
-
     if (liveRegion) {
       const div = document.createElement('div');
       div.setAttribute('id', this.srid);
       liveRegion.appendChild(div);
     }
   }
-
   removeScreenreaderAlert() {
     const liveRegion = this.getLiveRegion();
-
     if (liveRegion) {
       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
@@ -164,48 +141,36 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
       }
     }
   }
-
   componentDidMount() {
     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) {
       this.initLiveRegion(liveRegion);
     }
-
     this.handleTimeout();
   }
-
   componentWillUnmount() {
     this.clearTimeouts();
   }
-
   componentDidUpdate(prevProps) {
     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
       // take place internally so the transition runs
       this.close();
     }
   }
-
   renderIcon() {
     var _this$props$styles;
-
     const Icon = this.variantUI[this.props.variant];
     return jsx("div", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
     }, jsx(Icon, null));
   }
-
   renderCloseButton() {
     var _this$props$styles2;
-
     const closeButtonLabel = this.props.renderCloseButtonLabel && callRenderProp(this.props.renderCloseButtonLabel);
     return closeButtonLabel ? jsx("div", {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.closeButton,
@@ -216,10 +181,8 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
       screenReaderLabel: closeButtonLabel
     })) : null;
   }
-
   renderAlert() {
     var _this$props$styles3, _this$props$styles4;
-
     return jsx(View, {
       as: "div",
       margin: this.props.margin,
@@ -230,27 +193,23 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
       css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.content
     }, 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() {
     const liveRegion = this.getLiveRegion();
-    const screenReaderContent = liveRegion ? this.createScreenReaderPortal(liveRegion) : null; // Don't render anything if screen reader only
-
+    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 screenReaderContent;
     }
-
     if (this.props.transition === 'none') {
       return this.state.open ? jsx(React.Fragment, null, screenReaderContent, this.renderAlert()) : null;
     }
-
     return jsx(React.Fragment, null, screenReaderContent, jsx(Transition, {
       type: this.props.transition,
       transitionOnMount: true,
@@ -259,7 +218,6 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
       onExited: this.onExitTransition
     }, this.renderAlert()));
   }
-
 }, _class2.displayName = "Alert", _class2.componentId = 'Alert', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   variant: 'info',
   margin: 'x-small 0',

package/es/Alert/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {

package/es/Alert/styles.js

@@ -34,7 +34,7 @@
  */
 const generateStyle = (componentTheme, props) => {
   const variant = props.variant,
-        hasShadow = props.hasShadow;
+    hasShadow = props.hasShadow;
   const variantStyles = {
     error: {
       alert: {
@@ -120,5 +120,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/Alert/theme.js

@@ -29,11 +29,11 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        spacing = theme.spacing,
-        borders = theme.borders,
-        typography = theme.typography,
-        shadows = theme.shadows,
-        themeName = theme.key;
+    spacing = theme.spacing,
+    borders = theme.borders,
+    typography = theme.typography,
+    shadows = theme.shadows,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark']
@@ -64,9 +64,9 @@ const generateComponentTheme = theme => {
     dangerIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
     boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth2
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 export default generateComponentTheme;

package/lib/Alert/index.js

@@ -1,52 +1,30 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Alert = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _keycode = _interopRequireDefault(require("keycode"));
-
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-
 var _CloseButton = require("@instructure/ui-buttons/lib/CloseButton");
-
 var _View = require("@instructure/ui-view/lib/View");
-
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
-
 var _IconCheckMarkSolid = require("@instructure/ui-icons/lib/IconCheckMarkSolid.js");
-
 var _IconInfoBorderlessSolid = require("@instructure/ui-icons/lib/IconInfoBorderlessSolid.js");
-
 var _IconWarningBorderlessSolid = require("@instructure/ui-icons/lib/IconWarningBorderlessSolid.js");
-
 var _IconNoSolid = require("@instructure/ui-icons/lib/IconNoSolid.js");
-
 var _Transition = require("@instructure/ui-motion/lib/Transition");
-
 var _console = require("@instructure/console");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 category: components
@@ -65,11 +43,9 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
       warning: _IconWarningBorderlessSolid.IconWarningBorderlessSolid
     };
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
-
     this.handleTimeout = () => {
       if (this.props.timeout > 0) {
         this._timeouts.push(setTimeout(() => {
@@ -77,13 +53,11 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
         }, this.props.timeout));
       }
     };
-
     this.onExitTransition = () => {
       if (this.props.onDismiss) {
         this.props.onDismiss();
       }
     };
-
     this.close = () => {
       this.clearTimeouts();
       this.removeScreenreaderAlert();
@@ -95,70 +69,54 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
         }
       });
     };
-
     this.handleKeyUp = event => {
       if (this.props.renderCloseButtonLabel && event.keyCode === _keycode.default.codes.esc) {
         this.close();
       }
     };
-
     this.srid = this.props.deterministicId();
     this.state = {
       open: true
     };
   }
-
   clearTimeouts() {
     this._timeouts.forEach(timeout => clearTimeout(timeout));
-
     this._timeouts = [];
   }
-
   // duck type for a dom node
   isDOMNode(n) {
     return n && typeof n === 'object' && n.nodeType === 1;
   }
-
   getLiveRegion() {
     let lr = null;
-
     if (typeof this.props.liveRegion === 'function') {
       lr = this.props.liveRegion();
     }
-
     return this.isDOMNode(lr) ? lr : null;
   }
-
   initLiveRegion(liveRegion) {
     (0, _console.logError)(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-relevant', 'additions text');
       liveRegion.setAttribute('aria-atomic', `${this.props.isLiveRegionAtomic}`);
     }
   }
-
   createScreenreaderContentNode() {
     return (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, this.props.children);
   }
-
   createScreenreaderAlert() {
     const liveRegion = this.getLiveRegion();
-
     if (liveRegion) {
       const div = document.createElement('div');
       div.setAttribute('id', this.srid);
       liveRegion.appendChild(div);
     }
   }
-
   removeScreenreaderAlert() {
     const liveRegion = this.getLiveRegion();
-
     if (liveRegion) {
       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
@@ -171,48 +129,36 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
       }
     }
   }
-
   componentDidMount() {
     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) {
       this.initLiveRegion(liveRegion);
     }
-
     this.handleTimeout();
   }
-
   componentWillUnmount() {
     this.clearTimeouts();
   }
-
   componentDidUpdate(prevProps) {
     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
       // take place internally so the transition runs
       this.close();
     }
   }
-
   renderIcon() {
     var _this$props$styles;
-
     const Icon = this.variantUI[this.props.variant];
     return (0, _emotion.jsx)("div", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
     }, (0, _emotion.jsx)(Icon, null));
   }
-
   renderCloseButton() {
     var _this$props$styles2;
-
     const closeButtonLabel = this.props.renderCloseButtonLabel && (0, _callRenderProp.callRenderProp)(this.props.renderCloseButtonLabel);
     return closeButtonLabel ? (0, _emotion.jsx)("div", {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.closeButton,
@@ -223,10 +169,8 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
       screenReaderLabel: closeButtonLabel
     })) : null;
   }
-
   renderAlert() {
     var _this$props$styles3, _this$props$styles4;
-
     return (0, _emotion.jsx)(_View.View, {
       as: "div",
       margin: this.props.margin,
@@ -237,27 +181,23 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
       css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.content
     }, 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() {
     const liveRegion = this.getLiveRegion();
-    const screenReaderContent = liveRegion ? this.createScreenReaderPortal(liveRegion) : null; // Don't render anything if screen reader only
-
+    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 screenReaderContent;
     }
-
     if (this.props.transition === 'none') {
       return this.state.open ? (0, _emotion.jsx)(_react.default.Fragment, null, screenReaderContent, this.renderAlert()) : null;
     }
-
     return (0, _emotion.jsx)(_react.default.Fragment, null, screenReaderContent, (0, _emotion.jsx)(_Transition.Transition, {
       type: this.props.transition,
       transitionOnMount: true,
@@ -266,7 +206,6 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
       onExited: this.onExitTransition
     }, this.renderAlert()));
   }
-
 }, _class2.displayName = "Alert", _class2.componentId = 'Alert', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   variant: 'info',
   margin: 'x-small 0',

package/lib/Alert/props.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _emotion = require("@instructure/emotion");
-
 /*
  * The MIT License (MIT)
  *
@@ -34,6 +30,7 @@ var _emotion = require("@instructure/emotion");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   children: _propTypes.default.node,
   variant: _propTypes.default.oneOf(['info', 'success', 'warning', 'error']),

package/lib/Alert/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -41,7 +40,7 @@ exports.default = void 0;
  */
 const generateStyle = (componentTheme, props) => {
   const variant = props.variant,
-        hasShadow = props.hasShadow;
+    hasShadow = props.hasShadow;
   const variantStyles = {
     error: {
       alert: {
@@ -127,6 +126,5 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/Alert/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,11 +35,11 @@ exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        spacing = theme.spacing,
-        borders = theme.borders,
-        typography = theme.typography,
-        shadows = theme.shadows,
-        themeName = theme.key;
+    spacing = theme.spacing,
+    borders = theme.borders,
+    typography = theme.typography,
+    shadows = theme.shadows,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark']
@@ -71,10 +70,10 @@ const generateComponentTheme = theme => {
     dangerIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
     boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth2
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Alert", {
     return _Alert.Alert;
   }
 });
-
 var _Alert = require("./Alert");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-alerts",
-  "version": "8.33.2-snapshot-0",
+  "version": "8.33.2",
   "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.33.2-snapshot-0",
-    "@instructure/ui-color-utils": "8.33.2-snapshot-0",
-    "@instructure/ui-test-utils": "8.33.2-snapshot-0"
+    "@instructure/ui-babel-preset": "8.33.2",
+    "@instructure/ui-color-utils": "8.33.2",
+    "@instructure/ui-test-utils": "8.33.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.33.2-snapshot-0",
-    "@instructure/emotion": "8.33.2-snapshot-0",
-    "@instructure/shared-types": "8.33.2-snapshot-0",
-    "@instructure/ui-a11y-content": "8.33.2-snapshot-0",
-    "@instructure/ui-buttons": "8.33.2-snapshot-0",
-    "@instructure/ui-icons": "8.33.2-snapshot-0",
-    "@instructure/ui-motion": "8.33.2-snapshot-0",
-    "@instructure/ui-react-utils": "8.33.2-snapshot-0",
-    "@instructure/ui-themes": "8.33.2-snapshot-0",
-    "@instructure/ui-utils": "8.33.2-snapshot-0",
-    "@instructure/ui-view": "8.33.2-snapshot-0",
-    "@instructure/uid": "8.33.2-snapshot-0",
+    "@instructure/console": "8.33.2",
+    "@instructure/emotion": "8.33.2",
+    "@instructure/shared-types": "8.33.2",
+    "@instructure/ui-a11y-content": "8.33.2",
+    "@instructure/ui-buttons": "8.33.2",
+    "@instructure/ui-icons": "8.33.2",
+    "@instructure/ui-motion": "8.33.2",
+    "@instructure/ui-react-utils": "8.33.2",
+    "@instructure/ui-themes": "8.33.2",
+    "@instructure/ui-utils": "8.33.2",
+    "@instructure/ui-view": "8.33.2",
+    "@instructure/uid": "8.33.2",
     "keycode": "^2",
     "prop-types": "^15"
   },