@instructure/ui-alerts 8.17.1-snapshot.82 → 8.18.1-snapshot.1

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.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
+
+**Note:** Version bump only for package @instructure/ui-alerts
+
 # [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
 
 ### Bug Fixes

package/es/Alert/index.js

@@ -177,6 +177,8 @@ 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
@@ -185,14 +187,16 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
         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) {
@@ -204,7 +208,9 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
   }
 
   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
@@ -223,16 +229,20 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
   }
 
   renderIcon() {
+    var _this$props$styles;
+
     const Icon = this.variantUI[this.props.variant];
     return jsx("div", {
-      css: this.props.styles?.icon
+      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.styles?.closeButton,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.closeButton,
       key: "closeButton"
     }, jsx(CloseButton, {
       onClick: this.close,
@@ -242,14 +252,16 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
   }
 
   renderAlert() {
+    var _this$props$styles3, _this$props$styles4;
+
     return jsx(View, {
       as: "div",
       margin: this.props.margin,
-      css: this.props.styles?.alert,
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.alert,
       onKeyUp: this.handleKeyUp,
       elementRef: this.handleRef
     }, this.renderIcon(), jsx("div", {
-      css: this.props.styles?.content
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.content
     }, this.props.children), this.renderCloseButton());
   }
 

package/es/Alert/theme.js

@@ -40,29 +40,29 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    background: colors?.backgroundLightest,
-    color: colors?.textDarkest,
-    marginTop: spacing?.small,
-    borderRadius: borders?.radiusMedium,
-    borderWidth: borders?.widthMedium,
-    borderStyle: borders?.style,
-    contentPadding: `${spacing?.small} ${spacing?.medium}`,
-    contentFontSize: typography?.fontSizeMedium,
-    contentFontFamily: typography?.fontFamily,
-    contentFontWeight: typography?.fontWeightNormal,
-    contentLineHeight: typography?.lineHeightCondensed,
-    closeButtonMarginTop: spacing?.xSmall,
-    closeButtonMarginRight: spacing?.xxSmall,
-    iconColor: colors?.textLightest,
-    successBorderColor: colors?.borderSuccess,
-    successIconBackground: colors?.backgroundSuccess,
-    infoBorderColor: colors?.borderInfo,
-    infoIconBackground: colors?.backgroundInfo,
-    warningBorderColor: colors?.borderWarning,
-    warningIconBackground: colors?.backgroundWarning,
-    dangerBorderColor: colors?.borderDanger,
-    dangerIconBackground: colors?.backgroundDanger,
-    boxShadow: shadows?.depth2
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    marginTop: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    contentPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.small} ${spacing === null || spacing === void 0 ? void 0 : spacing.medium}`,
+    contentFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    contentFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    contentFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    contentLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
+    closeButtonMarginTop: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    closeButtonMarginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
+    iconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    successBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
+    successIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
+    infoBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderInfo,
+    infoIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
+    warningBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderWarning,
+    warningIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
+    dangerBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
+    dangerIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
+    boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth2
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/Alert/index.js

@@ -186,6 +186,8 @@ 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
@@ -196,14 +198,16 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
 
         _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) {
@@ -215,7 +219,9 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
   }
 
   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
@@ -234,16 +240,20 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
   }
 
   renderIcon() {
+    var _this$props$styles;
+
     const Icon = this.variantUI[this.props.variant];
     return (0, _emotion.jsx)("div", {
-      css: this.props.styles?.icon
+      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.styles?.closeButton,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.closeButton,
       key: "closeButton"
     }, (0, _emotion.jsx)(_CloseButton.CloseButton, {
       onClick: this.close,
@@ -253,14 +263,16 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
   }
 
   renderAlert() {
+    var _this$props$styles3, _this$props$styles4;
+
     return (0, _emotion.jsx)(_View.View, {
       as: "div",
       margin: this.props.margin,
-      css: this.props.styles?.alert,
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.alert,
       onKeyUp: this.handleKeyUp,
       elementRef: this.handleRef
     }, this.renderIcon(), (0, _emotion.jsx)("div", {
-      css: this.props.styles?.content
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.content
     }, this.props.children), this.renderCloseButton());
   }
 

package/lib/Alert/theme.js

@@ -47,29 +47,29 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    background: colors?.backgroundLightest,
-    color: colors?.textDarkest,
-    marginTop: spacing?.small,
-    borderRadius: borders?.radiusMedium,
-    borderWidth: borders?.widthMedium,
-    borderStyle: borders?.style,
-    contentPadding: `${spacing?.small} ${spacing?.medium}`,
-    contentFontSize: typography?.fontSizeMedium,
-    contentFontFamily: typography?.fontFamily,
-    contentFontWeight: typography?.fontWeightNormal,
-    contentLineHeight: typography?.lineHeightCondensed,
-    closeButtonMarginTop: spacing?.xSmall,
-    closeButtonMarginRight: spacing?.xxSmall,
-    iconColor: colors?.textLightest,
-    successBorderColor: colors?.borderSuccess,
-    successIconBackground: colors?.backgroundSuccess,
-    infoBorderColor: colors?.borderInfo,
-    infoIconBackground: colors?.backgroundInfo,
-    warningBorderColor: colors?.borderWarning,
-    warningIconBackground: colors?.backgroundWarning,
-    dangerBorderColor: colors?.borderDanger,
-    dangerIconBackground: colors?.backgroundDanger,
-    boxShadow: shadows?.depth2
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    marginTop: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    contentPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.small} ${spacing === null || spacing === void 0 ? void 0 : spacing.medium}`,
+    contentFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    contentFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    contentFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    contentLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
+    closeButtonMarginTop: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    closeButtonMarginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
+    iconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    successBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
+    successIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
+    infoBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderInfo,
+    infoIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
+    warningBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderWarning,
+    warningIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
+    dangerBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
+    dangerIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
+    boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth2
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-alerts",
-  "version": "8.17.1-snapshot.82+96244a097",
+  "version": "8.18.1-snapshot.1+669aa5892",
   "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.17.1-snapshot.82+96244a097",
-    "@instructure/ui-color-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-test-utils": "8.17.1-snapshot.82+96244a097"
+    "@instructure/ui-babel-preset": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-color-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-test-utils": "8.18.1-snapshot.1+669aa5892"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.17.1-snapshot.82+96244a097",
-    "@instructure/emotion": "8.17.1-snapshot.82+96244a097",
-    "@instructure/shared-types": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-a11y-content": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-buttons": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-icons": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-motion": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-react-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-themes": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-view": "8.17.1-snapshot.82+96244a097",
-    "@instructure/uid": "8.17.1-snapshot.82+96244a097",
+    "@instructure/console": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/emotion": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/shared-types": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-a11y-content": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-buttons": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-icons": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-motion": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-react-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-themes": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-view": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/uid": "8.18.1-snapshot.1+669aa5892",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "96244a097dffef5f10bbe7979c580581c787083e"
+  "gitHead": "669aa58926b123028bcb9e39427d36910b78b0d1"
 }