@instructure/ui-alerts 11.7.3-snapshot-25 → 11.7.3-snapshot-26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Alert/v1/index.js +82 -78
  3. package/es/Alert/v1/styles.js +4 -2
  4. package/es/Alert/v1/theme.js +31 -30
  5. package/es/Alert/v2/index.js +82 -78
  6. package/es/Alert/v2/styles.js +4 -2
  7. package/lib/Alert/v1/index.js +82 -78
  8. package/lib/Alert/v1/styles.js +4 -2
  9. package/lib/Alert/v1/theme.js +31 -30
  10. package/lib/Alert/v2/index.js +82 -78
  11. package/lib/Alert/v2/styles.js +4 -2
  12. package/package.json +16 -16
  13. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-25](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-25) (2026-04-30)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-alerts
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/Alert/v1/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["margin", "styles", "children", "onDismiss", "variantScreenReaderLabel"];
3
- var _dec, _dec2, _class, _Alert;
1
+ var _dec, _dec2, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -45,58 +43,69 @@ import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
45
43
  category: components
46
44
  ---
47
45
  **/
48
- let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_Alert = class Alert extends Component {
46
+ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class Alert extends Component {
47
+ static displayName = "Alert";
48
+ static componentId = 'Alert';
49
+ static allowedProps = allowedProps;
50
+ static defaultProps = {
51
+ variant: 'info',
52
+ margin: 'x-small 0',
53
+ timeout: 0,
54
+ transition: 'fade',
55
+ open: true,
56
+ screenReaderOnly: false,
57
+ liveRegionPoliteness: 'assertive',
58
+ isLiveRegionAtomic: false,
59
+ children: null,
60
+ hasShadow: true
61
+ };
49
62
  constructor(props) {
50
63
  super(props);
51
- this._timeouts = [];
52
- this.srid = void 0;
53
- this.variantUI = {
54
- error: IconNoSolid,
55
- info: IconInfoBorderlessSolid,
56
- success: IconCheckMarkSolid,
57
- warning: IconWarningBorderlessSolid
58
- };
59
- this.ref = null;
60
- this.handleRef = el => {
61
- this.ref = el;
62
- };
63
- this.handleTimeout = () => {
64
- if (this.props.timeout > 0) {
65
- this._timeouts.push(setTimeout(() => {
66
- this.close();
67
- }, this.props.timeout));
68
- }
69
- };
70
- this.onExitTransition = () => {
71
- if (this.props.onDismiss) {
72
- this.props.onDismiss();
73
- }
74
- };
75
- this.close = () => {
76
- this.clearTimeouts();
77
- this.removeScreenreaderAlert();
78
- this.setState({
79
- open: false
80
- }, () => {
81
- if (this.props.onDismiss && (this.props.transition === 'none' || this.props.screenReaderOnly)) {
82
- this.props.onDismiss();
83
- }
84
- });
85
- };
86
- this.handleKeyUp = event => {
87
- if (this.props.renderCloseButtonLabel && event.keyCode === keycode.codes.esc) {
88
- this.close();
89
- }
90
- };
91
64
  this.srid = this.props.deterministicId();
92
65
  this.state = {
93
66
  open: true
94
67
  };
95
68
  }
69
+ _timeouts = [];
70
+ srid;
71
+ variantUI = {
72
+ error: IconNoSolid,
73
+ info: IconInfoBorderlessSolid,
74
+ success: IconCheckMarkSolid,
75
+ warning: IconWarningBorderlessSolid
76
+ };
77
+ ref = null;
78
+ handleRef = el => {
79
+ this.ref = el;
80
+ };
81
+ handleTimeout = () => {
82
+ if (this.props.timeout > 0) {
83
+ this._timeouts.push(setTimeout(() => {
84
+ this.close();
85
+ }, this.props.timeout));
86
+ }
87
+ };
96
88
  clearTimeouts() {
97
89
  this._timeouts.forEach(timeout => clearTimeout(timeout));
98
90
  this._timeouts = [];
99
91
  }
92
+ onExitTransition = () => {
93
+ if (this.props.onDismiss) {
94
+ this.props.onDismiss();
95
+ }
96
+ };
97
+ close = () => {
98
+ this.clearTimeouts();
99
+ this.removeScreenreaderAlert();
100
+ this.setState({
101
+ open: false
102
+ }, () => {
103
+ if (this.props.onDismiss && (this.props.transition === 'none' || this.props.screenReaderOnly)) {
104
+ this.props.onDismiss();
105
+ }
106
+ });
107
+ };
108
+
100
109
  // duck type for a dom node
101
110
  isDOMNode(n) {
102
111
  return n && typeof n === 'object' && n.nodeType === 1;
@@ -145,9 +154,13 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
145
154
  }
146
155
  }
147
156
  }
157
+ handleKeyUp = event => {
158
+ if (this.props.renderCloseButtonLabel && event.keyCode === keycode.codes.esc) {
159
+ this.close();
160
+ }
161
+ };
148
162
  componentDidMount() {
149
- var _this$props$makeStyle, _this$props;
150
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
163
+ this.props.makeStyles?.();
151
164
  const liveRegion = this.getLiveRegion();
152
165
  if (liveRegion) {
153
166
  this.initLiveRegion(liveRegion);
@@ -158,8 +171,7 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
158
171
  this.clearTimeouts();
159
172
  }
160
173
  componentDidUpdate(prevProps) {
161
- var _this$props$makeStyle2, _this$props2;
162
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
174
+ this.props.makeStyles?.();
163
175
  if (!!this.props.open === false && !!this.props.open !== !!prevProps.open) {
164
176
  // this outside world is asking us to close the alert, which needs to
165
177
  // take place internally so the transition runs
@@ -167,21 +179,21 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
167
179
  }
168
180
  }
169
181
  renderIcon() {
170
- const _this$props3 = this.props,
171
- renderCustomIcon = _this$props3.renderCustomIcon,
172
- variant = _this$props3.variant,
173
- styles = _this$props3.styles;
182
+ const {
183
+ renderCustomIcon,
184
+ variant,
185
+ styles
186
+ } = this.props;
174
187
  const Icon = this.variantUI[variant];
175
188
  return _jsx("div", {
176
- css: styles === null || styles === void 0 ? void 0 : styles.icon,
189
+ css: styles?.icon,
177
190
  children: renderCustomIcon ? callRenderProp(renderCustomIcon) : _jsx(Icon, {})
178
191
  });
179
192
  }
180
193
  renderCloseButton() {
181
- var _this$props$styles;
182
194
  const closeButtonLabel = this.props.renderCloseButtonLabel && callRenderProp(this.props.renderCloseButtonLabel);
183
195
  return closeButtonLabel ? _jsx("div", {
184
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.closeButton,
196
+ css: this.props.styles?.closeButton,
185
197
  children: _jsx(CloseButton, {
186
198
  onClick: this.close,
187
199
  size: "small",
@@ -192,33 +204,36 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
192
204
  renderAlert() {
193
205
  // prevent onDismiss from being passed to the View component
194
206
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
195
- const _this$props4 = this.props,
196
- margin = _this$props4.margin,
197
- styles = _this$props4.styles,
198
- children = _this$props4.children,
199
- onDismiss = _this$props4.onDismiss,
200
- variantScreenReaderLabel = _this$props4.variantScreenReaderLabel,
201
- props = _objectWithoutProperties(_this$props4, _excluded);
207
+ const {
208
+ margin,
209
+ styles,
210
+ children,
211
+ onDismiss,
212
+ variantScreenReaderLabel,
213
+ ...props
214
+ } = this.props;
202
215
  return _jsxs(View, {
203
216
  ...passthroughProps({
204
217
  ...props
205
218
  }),
206
219
  as: "div",
207
220
  margin: margin,
208
- css: styles === null || styles === void 0 ? void 0 : styles.alert,
221
+ css: styles?.alert,
209
222
  onKeyUp: this.handleKeyUp,
210
223
  elementRef: this.handleRef,
211
224
  children: [this.renderIcon(), _jsxs("div", {
212
- css: styles === null || styles === void 0 ? void 0 : styles.content,
225
+ css: styles?.content,
213
226
  children: [variantScreenReaderLabel && _jsx("span", {
214
- css: styles === null || styles === void 0 ? void 0 : styles.variantScreenReaderLabel,
227
+ css: styles?.variantScreenReaderLabel,
215
228
  children: variantScreenReaderLabel
216
229
  }), children]
217
230
  }), this.renderCloseButton()]
218
231
  });
219
232
  }
220
233
  createScreenReaderPortal(liveRegion) {
221
- const open = this.state.open;
234
+ const {
235
+ open
236
+ } = this.state;
222
237
  return open ? /*#__PURE__*/ReactDOM.createPortal(_jsx("div", {
223
238
  id: this.srid,
224
239
  children: this.createScreenreaderContentNode()
@@ -248,17 +263,6 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
248
263
  })]
249
264
  });
250
265
  }
251
- }, _Alert.displayName = "Alert", _Alert.componentId = 'Alert', _Alert.allowedProps = allowedProps, _Alert.defaultProps = {
252
- variant: 'info',
253
- margin: 'x-small 0',
254
- timeout: 0,
255
- transition: 'fade',
256
- open: true,
257
- screenReaderOnly: false,
258
- liveRegionPoliteness: 'assertive',
259
- isLiveRegionAtomic: false,
260
- children: null,
261
- hasShadow: true
262
- }, _Alert)) || _class) || _class);
266
+ }) || _class) || _class);
263
267
  export default Alert;
264
268
  export { Alert };
package/es/Alert/v1/styles.js CHANGED
@@ -33,8 +33,10 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props) => {
36
- const variant = props.variant,
37
- hasShadow = props.hasShadow;
36
+ const {
37
+ variant,
38
+ hasShadow
39
+ } = props;
38
40
  const variantStyles = {
39
41
  error: {
40
42
  alert: {
package/es/Alert/v1/theme.js CHANGED
@@ -28,42 +28,43 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1;
32
- const colors = theme.colors,
33
- spacing = theme.spacing,
34
- borders = theme.borders,
35
- typography = theme.typography,
36
- shadows = theme.shadows,
37
- themeName = theme.key;
31
+ const {
32
+ colors,
33
+ spacing,
34
+ borders,
35
+ typography,
36
+ shadows,
37
+ key: themeName
38
+ } = theme;
38
39
  const themeSpecificStyle = {
39
40
  canvas: {
40
41
  color: theme['ic-brand-font-color-dark']
41
42
  }
42
43
  };
43
44
  const componentVariables = {
44
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
45
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
46
- marginTop: spacing === null || spacing === void 0 ? void 0 : spacing.small,
47
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
48
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
49
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
50
- contentPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.small} ${spacing === null || spacing === void 0 ? void 0 : spacing.medium}`,
51
- contentFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
52
- contentFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
53
- contentFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
54
- contentLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
55
- closeButtonMarginTop: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
56
- closeButtonMarginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
57
- iconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
58
- successBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.green4570,
59
- successIconBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.green4570,
60
- infoBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
61
- infoIconBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
62
- warningBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.orange4570,
63
- warningIconBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.orange4570,
64
- dangerBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.red4570,
65
- dangerIconBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.red4570,
66
- boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth2
45
+ background: colors?.contrasts?.white1010,
46
+ color: colors?.contrasts?.grey125125,
47
+ marginTop: spacing?.small,
48
+ borderRadius: borders?.radiusMedium,
49
+ borderWidth: borders?.widthMedium,
50
+ borderStyle: borders?.style,
51
+ contentPadding: `${spacing?.small} ${spacing?.medium}`,
52
+ contentFontSize: typography?.fontSizeMedium,
53
+ contentFontFamily: typography?.fontFamily,
54
+ contentFontWeight: typography?.fontWeightNormal,
55
+ contentLineHeight: typography?.lineHeightCondensed,
56
+ closeButtonMarginTop: spacing?.xSmall,
57
+ closeButtonMarginRight: spacing?.xxSmall,
58
+ iconColor: colors?.contrasts?.white1010,
59
+ successBorderColor: colors?.contrasts?.green4570,
60
+ successIconBackground: colors?.contrasts?.green4570,
61
+ infoBorderColor: colors?.contrasts?.blue4570,
62
+ infoIconBackground: colors?.contrasts?.blue4570,
63
+ warningBorderColor: colors?.contrasts?.orange4570,
64
+ warningIconBackground: colors?.contrasts?.orange4570,
65
+ dangerBorderColor: colors?.contrasts?.red4570,
66
+ dangerIconBackground: colors?.contrasts?.red4570,
67
+ boxShadow: shadows?.depth2
67
68
  };
68
69
  return {
69
70
  ...componentVariables,
package/es/Alert/v2/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["margin", "styles", "children", "onDismiss", "variantScreenReaderLabel"];
3
- var _dec, _dec2, _class, _Alert;
1
+ var _dec, _dec2, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -44,58 +42,69 @@ import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
44
42
  category: components
45
43
  ---
46
44
  **/
47
- let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_Alert = class Alert extends Component {
45
+ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = class Alert extends Component {
46
+ static displayName = "Alert";
47
+ static componentId = 'Alert';
48
+ static allowedProps = allowedProps;
49
+ static defaultProps = {
50
+ variant: 'info',
51
+ margin: 'x-small 0',
52
+ timeout: 0,
53
+ transition: 'fade',
54
+ open: true,
55
+ screenReaderOnly: false,
56
+ liveRegionPoliteness: 'assertive',
57
+ isLiveRegionAtomic: false,
58
+ children: null,
59
+ hasShadow: true
60
+ };
48
61
  constructor(props) {
49
62
  super(props);
50
- this._timeouts = [];
51
- this.srid = void 0;
52
- this.variantUI = {
53
- error: XCircleInstUIIcon,
54
- info: InfoInstUIIcon,
55
- success: CircleCheckInstUIIcon,
56
- warning: TriangleAlertInstUIIcon
57
- };
58
- this.ref = null;
59
- this.handleRef = el => {
60
- this.ref = el;
61
- };
62
- this.handleTimeout = () => {
63
- if (this.props.timeout > 0) {
64
- this._timeouts.push(setTimeout(() => {
65
- this.close();
66
- }, this.props.timeout));
67
- }
68
- };
69
- this.onExitTransition = () => {
70
- if (this.props.onDismiss) {
71
- this.props.onDismiss();
72
- }
73
- };
74
- this.close = () => {
75
- this.clearTimeouts();
76
- this.removeScreenreaderAlert();
77
- this.setState({
78
- open: false
79
- }, () => {
80
- if (this.props.onDismiss && (this.props.transition === 'none' || this.props.screenReaderOnly)) {
81
- this.props.onDismiss();
82
- }
83
- });
84
- };
85
- this.handleKeyUp = event => {
86
- if (this.props.renderCloseButtonLabel && event.keyCode === keycode.codes.esc) {
87
- this.close();
88
- }
89
- };
90
63
  this.srid = this.props.deterministicId();
91
64
  this.state = {
92
65
  open: true
93
66
  };
94
67
  }
68
+ _timeouts = [];
69
+ srid;
70
+ variantUI = {
71
+ error: XCircleInstUIIcon,
72
+ info: InfoInstUIIcon,
73
+ success: CircleCheckInstUIIcon,
74
+ warning: TriangleAlertInstUIIcon
75
+ };
76
+ ref = null;
77
+ handleRef = el => {
78
+ this.ref = el;
79
+ };
80
+ handleTimeout = () => {
81
+ if (this.props.timeout > 0) {
82
+ this._timeouts.push(setTimeout(() => {
83
+ this.close();
84
+ }, this.props.timeout));
85
+ }
86
+ };
95
87
  clearTimeouts() {
96
88
  this._timeouts.forEach(timeout => clearTimeout(timeout));
97
89
  this._timeouts = [];
98
90
  }
91
+ onExitTransition = () => {
92
+ if (this.props.onDismiss) {
93
+ this.props.onDismiss();
94
+ }
95
+ };
96
+ close = () => {
97
+ this.clearTimeouts();
98
+ this.removeScreenreaderAlert();
99
+ this.setState({
100
+ open: false
101
+ }, () => {
102
+ if (this.props.onDismiss && (this.props.transition === 'none' || this.props.screenReaderOnly)) {
103
+ this.props.onDismiss();
104
+ }
105
+ });
106
+ };
107
+
99
108
  // duck type for a dom node
100
109
  isDOMNode(n) {
101
110
  return n && typeof n === 'object' && n.nodeType === 1;
@@ -144,9 +153,13 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _de
144
153
  }
145
154
  }
146
155
  }
156
+ handleKeyUp = event => {
157
+ if (this.props.renderCloseButtonLabel && event.keyCode === keycode.codes.esc) {
158
+ this.close();
159
+ }
160
+ };
147
161
  componentDidMount() {
148
- var _this$props$makeStyle, _this$props;
149
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
162
+ this.props.makeStyles?.();
150
163
  const liveRegion = this.getLiveRegion();
151
164
  if (liveRegion) {
152
165
  this.initLiveRegion(liveRegion);
@@ -157,8 +170,7 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _de
157
170
  this.clearTimeouts();
158
171
  }
159
172
  componentDidUpdate(prevProps) {
160
- var _this$props$makeStyle2, _this$props2;
161
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
173
+ this.props.makeStyles?.();
162
174
  if (!!this.props.open === false && !!this.props.open !== !!prevProps.open) {
163
175
  // this outside world is asking us to close the alert, which needs to
164
176
  // take place internally so the transition runs
@@ -166,21 +178,21 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _de
166
178
  }
167
179
  }
168
180
  renderIcon() {
169
- const _this$props3 = this.props,
170
- renderCustomIcon = _this$props3.renderCustomIcon,
171
- variant = _this$props3.variant,
172
- styles = _this$props3.styles;
181
+ const {
182
+ renderCustomIcon,
183
+ variant,
184
+ styles
185
+ } = this.props;
173
186
  const Icon = this.variantUI[variant];
174
187
  return _jsx("div", {
175
- css: styles === null || styles === void 0 ? void 0 : styles.icon,
188
+ css: styles?.icon,
176
189
  children: renderCustomIcon ? callRenderProp(renderCustomIcon) : _jsx(Icon, {})
177
190
  });
178
191
  }
179
192
  renderCloseButton() {
180
- var _this$props$styles;
181
193
  const closeButtonLabel = this.props.renderCloseButtonLabel && callRenderProp(this.props.renderCloseButtonLabel);
182
194
  return closeButtonLabel ? _jsx("div", {
183
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.closeButton,
195
+ css: this.props.styles?.closeButton,
184
196
  children: _jsx(CloseButton, {
185
197
  onClick: this.close,
186
198
  size: "small",
@@ -191,33 +203,36 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _de
191
203
  renderAlert() {
192
204
  // prevent onDismiss from being passed to the View component
193
205
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
194
- const _this$props4 = this.props,
195
- margin = _this$props4.margin,
196
- styles = _this$props4.styles,
197
- children = _this$props4.children,
198
- onDismiss = _this$props4.onDismiss,
199
- variantScreenReaderLabel = _this$props4.variantScreenReaderLabel,
200
- props = _objectWithoutProperties(_this$props4, _excluded);
206
+ const {
207
+ margin,
208
+ styles,
209
+ children,
210
+ onDismiss,
211
+ variantScreenReaderLabel,
212
+ ...props
213
+ } = this.props;
201
214
  return _jsxs(View, {
202
215
  ...passthroughProps({
203
216
  ...props
204
217
  }),
205
218
  as: "div",
206
219
  margin: margin,
207
- css: styles === null || styles === void 0 ? void 0 : styles.alert,
220
+ css: styles?.alert,
208
221
  onKeyUp: this.handleKeyUp,
209
222
  elementRef: this.handleRef,
210
223
  children: [this.renderIcon(), _jsxs("div", {
211
- css: styles === null || styles === void 0 ? void 0 : styles.content,
224
+ css: styles?.content,
212
225
  children: [variantScreenReaderLabel && _jsx("span", {
213
- css: styles === null || styles === void 0 ? void 0 : styles.variantScreenReaderLabel,
226
+ css: styles?.variantScreenReaderLabel,
214
227
  children: variantScreenReaderLabel
215
228
  }), children]
216
229
  }), this.renderCloseButton()]
217
230
  });
218
231
  }
219
232
  createScreenReaderPortal(liveRegion) {
220
- const open = this.state.open;
233
+ const {
234
+ open
235
+ } = this.state;
221
236
  return open ? /*#__PURE__*/ReactDOM.createPortal(_jsx("div", {
222
237
  id: this.srid,
223
238
  children: this.createScreenreaderContentNode()
@@ -247,17 +262,6 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _de
247
262
  })]
248
263
  });
249
264
  }
250
- }, _Alert.displayName = "Alert", _Alert.componentId = 'Alert', _Alert.allowedProps = allowedProps, _Alert.defaultProps = {
251
- variant: 'info',
252
- margin: 'x-small 0',
253
- timeout: 0,
254
- transition: 'fade',
255
- open: true,
256
- screenReaderOnly: false,
257
- liveRegionPoliteness: 'assertive',
258
- isLiveRegionAtomic: false,
259
- children: null,
260
- hasShadow: true
261
- }, _Alert)) || _class) || _class);
265
+ }) || _class) || _class);
262
266
  export default Alert;
263
267
  export { Alert };
package/es/Alert/v2/styles.js CHANGED
@@ -33,8 +33,10 @@ import { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props, sharedTokens) => {
36
- const variant = props.variant,
37
- hasShadow = props.hasShadow;
36
+ const {
37
+ variant,
38
+ hasShadow
39
+ } = props;
38
40
  const variantStyles = {
39
41
  error: {
40
42
  alert: {