@instructure/ui-alerts 8.17.1-snapshot.21 → 8.17.1-snapshot.71

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 (6) hide show
  1. package/es/Alert/index.js +7 -19
  2. package/es/Alert/theme.js +23 -23
  3. package/lib/Alert/index.js +7 -19
  4. package/lib/Alert/theme.js +23 -23
  5. package/package.json +17 -17
  6. package/tsconfig.build.tsbuildinfo +1 -1
package/es/Alert/index.js CHANGED
@@ -177,8 +177,6 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
177
177
  const div = document.getElementById(this.srid);
178
178
 
179
179
  if (div) {
180
- var _div$parentNode;
181
-
182
180
  // Accessibility attributes must be removed for the deletion of the node
183
181
  // and then reapplied because JAWS/IE will not respect the
184
182
  // "aria-relevant" attribute and read when the node is deleted if
@@ -187,16 +185,14 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
187
185
  liveRegion.removeAttribute('aria-relevant');
188
186
  liveRegion.removeAttribute('aria-atomic');
189
187
  ReactDOM.unmountComponentAtNode(div);
190
- div === null || div === void 0 ? void 0 : (_div$parentNode = div.parentNode) === null || _div$parentNode === void 0 ? void 0 : _div$parentNode.removeChild(div);
188
+ div?.parentNode?.removeChild(div);
191
189
  this.initLiveRegion(liveRegion);
192
190
  }
193
191
  }
194
192
  }
195
193
 
196
194
  componentDidMount() {
197
- var _this$props$makeStyle, _this$props;
198
-
199
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
195
+ this.props.makeStyles?.();
200
196
  const liveRegion = this.getLiveRegion();
201
197
 
202
198
  if (liveRegion) {
@@ -208,9 +204,7 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
208
204
  }
209
205
 
210
206
  componentDidUpdate(prevProps) {
211
- var _this$props$makeStyle2, _this$props2;
212
-
213
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
207
+ this.props.makeStyles?.();
214
208
 
215
209
  if (!!this.props.open === false && !!this.props.open !== !!prevProps.open) {
216
210
  // this outside world is asking us to close the alert, which needs to
@@ -229,20 +223,16 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
229
223
  }
230
224
 
231
225
  renderIcon() {
232
- var _this$props$styles;
233
-
234
226
  const Icon = this.variantUI[this.props.variant];
235
227
  return jsx("div", {
236
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
228
+ css: this.props.styles?.icon
237
229
  }, jsx(Icon, null));
238
230
  }
239
231
 
240
232
  renderCloseButton() {
241
- var _this$props$styles2;
242
-
243
233
  const closeButtonLabel = this.props.renderCloseButtonLabel && callRenderProp(this.props.renderCloseButtonLabel);
244
234
  return closeButtonLabel ? jsx("div", {
245
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.closeButton,
235
+ css: this.props.styles?.closeButton,
246
236
  key: "closeButton"
247
237
  }, jsx(CloseButton, {
248
238
  onClick: this.close,
@@ -252,16 +242,14 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
252
242
  }
253
243
 
254
244
  renderAlert() {
255
- var _this$props$styles3, _this$props$styles4;
256
-
257
245
  return jsx(View, {
258
246
  as: "div",
259
247
  margin: this.props.margin,
260
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.alert,
248
+ css: this.props.styles?.alert,
261
249
  onKeyUp: this.handleKeyUp,
262
250
  elementRef: this.handleRef
263
251
  }, this.renderIcon(), jsx("div", {
264
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.content
252
+ css: this.props.styles?.content
265
253
  }, this.props.children), this.renderCloseButton());
266
254
  }
267
255
 
package/es/Alert/theme.js CHANGED
@@ -40,29 +40,29 @@ const generateComponentTheme = theme => {
40
40
  }
41
41
  };
42
42
  const componentVariables = {
43
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
44
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
45
- marginTop: spacing === null || spacing === void 0 ? void 0 : spacing.small,
46
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
47
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
48
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
49
- contentPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.small} ${spacing === null || spacing === void 0 ? void 0 : spacing.medium}`,
50
- contentFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
51
- contentFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
52
- contentFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
53
- contentLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
54
- closeButtonMarginTop: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
55
- closeButtonMarginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
56
- iconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
57
- successBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
58
- successIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
59
- infoBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderInfo,
60
- infoIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
61
- warningBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderWarning,
62
- warningIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
63
- dangerBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
64
- dangerIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
65
- boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth2
43
+ background: colors?.backgroundLightest,
44
+ color: colors?.textDarkest,
45
+ marginTop: spacing?.small,
46
+ borderRadius: borders?.radiusMedium,
47
+ borderWidth: borders?.widthMedium,
48
+ borderStyle: borders?.style,
49
+ contentPadding: `${spacing?.small} ${spacing?.medium}`,
50
+ contentFontSize: typography?.fontSizeMedium,
51
+ contentFontFamily: typography?.fontFamily,
52
+ contentFontWeight: typography?.fontWeightNormal,
53
+ contentLineHeight: typography?.lineHeightCondensed,
54
+ closeButtonMarginTop: spacing?.xSmall,
55
+ closeButtonMarginRight: spacing?.xxSmall,
56
+ iconColor: colors?.textLightest,
57
+ successBorderColor: colors?.borderSuccess,
58
+ successIconBackground: colors?.backgroundSuccess,
59
+ infoBorderColor: colors?.borderInfo,
60
+ infoIconBackground: colors?.backgroundInfo,
61
+ warningBorderColor: colors?.borderWarning,
62
+ warningIconBackground: colors?.backgroundWarning,
63
+ dangerBorderColor: colors?.borderDanger,
64
+ dangerIconBackground: colors?.backgroundDanger,
65
+ boxShadow: shadows?.depth2
66
66
  };
67
67
  return { ...componentVariables,
68
68
  ...themeSpecificStyle[themeName]
package/lib/Alert/index.js CHANGED
@@ -186,8 +186,6 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
186
186
  const div = document.getElementById(this.srid);
187
187
 
188
188
  if (div) {
189
- var _div$parentNode;
190
-
191
189
  // Accessibility attributes must be removed for the deletion of the node
192
190
  // and then reapplied because JAWS/IE will not respect the
193
191
  // "aria-relevant" attribute and read when the node is deleted if
@@ -198,16 +196,14 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
198
196
 
199
197
  _reactDom.default.unmountComponentAtNode(div);
200
198
 
201
- div === null || div === void 0 ? void 0 : (_div$parentNode = div.parentNode) === null || _div$parentNode === void 0 ? void 0 : _div$parentNode.removeChild(div);
199
+ div?.parentNode?.removeChild(div);
202
200
  this.initLiveRegion(liveRegion);
203
201
  }
204
202
  }
205
203
  }
206
204
 
207
205
  componentDidMount() {
208
- var _this$props$makeStyle, _this$props;
209
-
210
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
206
+ this.props.makeStyles?.();
211
207
  const liveRegion = this.getLiveRegion();
212
208
 
213
209
  if (liveRegion) {
@@ -219,9 +215,7 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
219
215
  }
220
216
 
221
217
  componentDidUpdate(prevProps) {
222
- var _this$props$makeStyle2, _this$props2;
223
-
224
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
218
+ this.props.makeStyles?.();
225
219
 
226
220
  if (!!this.props.open === false && !!this.props.open !== !!prevProps.open) {
227
221
  // this outside world is asking us to close the alert, which needs to
@@ -240,20 +234,16 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
240
234
  }
241
235
 
242
236
  renderIcon() {
243
- var _this$props$styles;
244
-
245
237
  const Icon = this.variantUI[this.props.variant];
246
238
  return (0, _emotion.jsx)("div", {
247
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
239
+ css: this.props.styles?.icon
248
240
  }, (0, _emotion.jsx)(Icon, null));
249
241
  }
250
242
 
251
243
  renderCloseButton() {
252
- var _this$props$styles2;
253
-
254
244
  const closeButtonLabel = this.props.renderCloseButtonLabel && (0, _callRenderProp.callRenderProp)(this.props.renderCloseButtonLabel);
255
245
  return closeButtonLabel ? (0, _emotion.jsx)("div", {
256
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.closeButton,
246
+ css: this.props.styles?.closeButton,
257
247
  key: "closeButton"
258
248
  }, (0, _emotion.jsx)(_CloseButton.CloseButton, {
259
249
  onClick: this.close,
@@ -263,16 +253,14 @@ let Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
263
253
  }
264
254
 
265
255
  renderAlert() {
266
- var _this$props$styles3, _this$props$styles4;
267
-
268
256
  return (0, _emotion.jsx)(_View.View, {
269
257
  as: "div",
270
258
  margin: this.props.margin,
271
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.alert,
259
+ css: this.props.styles?.alert,
272
260
  onKeyUp: this.handleKeyUp,
273
261
  elementRef: this.handleRef
274
262
  }, this.renderIcon(), (0, _emotion.jsx)("div", {
275
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.content
263
+ css: this.props.styles?.content
276
264
  }, this.props.children), this.renderCloseButton());
277
265
  }
278
266
 
package/lib/Alert/theme.js CHANGED
@@ -47,29 +47,29 @@ const generateComponentTheme = theme => {
47
47
  }
48
48
  };
49
49
  const componentVariables = {
50
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
51
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
52
- marginTop: spacing === null || spacing === void 0 ? void 0 : spacing.small,
53
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
54
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
55
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
56
- contentPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.small} ${spacing === null || spacing === void 0 ? void 0 : spacing.medium}`,
57
- contentFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
58
- contentFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
59
- contentFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
60
- contentLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
61
- closeButtonMarginTop: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
62
- closeButtonMarginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
63
- iconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
64
- successBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
65
- successIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
66
- infoBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderInfo,
67
- infoIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
68
- warningBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderWarning,
69
- warningIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
70
- dangerBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
71
- dangerIconBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
72
- boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth2
50
+ background: colors?.backgroundLightest,
51
+ color: colors?.textDarkest,
52
+ marginTop: spacing?.small,
53
+ borderRadius: borders?.radiusMedium,
54
+ borderWidth: borders?.widthMedium,
55
+ borderStyle: borders?.style,
56
+ contentPadding: `${spacing?.small} ${spacing?.medium}`,
57
+ contentFontSize: typography?.fontSizeMedium,
58
+ contentFontFamily: typography?.fontFamily,
59
+ contentFontWeight: typography?.fontWeightNormal,
60
+ contentLineHeight: typography?.lineHeightCondensed,
61
+ closeButtonMarginTop: spacing?.xSmall,
62
+ closeButtonMarginRight: spacing?.xxSmall,
63
+ iconColor: colors?.textLightest,
64
+ successBorderColor: colors?.borderSuccess,
65
+ successIconBackground: colors?.backgroundSuccess,
66
+ infoBorderColor: colors?.borderInfo,
67
+ infoIconBackground: colors?.backgroundInfo,
68
+ warningBorderColor: colors?.borderWarning,
69
+ warningIconBackground: colors?.backgroundWarning,
70
+ dangerBorderColor: colors?.borderDanger,
71
+ dangerIconBackground: colors?.backgroundDanger,
72
+ boxShadow: shadows?.depth2
73
73
  };
74
74
  return { ...componentVariables,
75
75
  ...themeSpecificStyle[themeName]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-alerts",
3
- "version": "8.17.1-snapshot.21+79d490548",
3
+ "version": "8.17.1-snapshot.71+34dfb2442",
4
4
  "description": "An alert component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,24 +23,24 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.17.1-snapshot.21+79d490548",
27
- "@instructure/ui-color-utils": "8.17.1-snapshot.21+79d490548",
28
- "@instructure/ui-test-utils": "8.17.1-snapshot.21+79d490548"
26
+ "@instructure/ui-babel-preset": "8.17.1-snapshot.71+34dfb2442",
27
+ "@instructure/ui-color-utils": "8.17.1-snapshot.71+34dfb2442",
28
+ "@instructure/ui-test-utils": "8.17.1-snapshot.71+34dfb2442"
29
29
  },
30
30
  "dependencies": {
31
31
  "@babel/runtime": "^7.13.10",
32
- "@instructure/console": "8.17.1-snapshot.21+79d490548",
33
- "@instructure/emotion": "8.17.1-snapshot.21+79d490548",
34
- "@instructure/shared-types": "8.17.1-snapshot.21+79d490548",
35
- "@instructure/ui-a11y-content": "8.17.1-snapshot.21+79d490548",
36
- "@instructure/ui-buttons": "8.17.1-snapshot.21+79d490548",
37
- "@instructure/ui-icons": "8.17.1-snapshot.21+79d490548",
38
- "@instructure/ui-motion": "8.17.1-snapshot.21+79d490548",
39
- "@instructure/ui-react-utils": "8.17.1-snapshot.21+79d490548",
40
- "@instructure/ui-themes": "8.17.1-snapshot.21+79d490548",
41
- "@instructure/ui-utils": "8.17.1-snapshot.21+79d490548",
42
- "@instructure/ui-view": "8.17.1-snapshot.21+79d490548",
43
- "@instructure/uid": "8.17.1-snapshot.21+79d490548",
32
+ "@instructure/console": "8.17.1-snapshot.71+34dfb2442",
33
+ "@instructure/emotion": "8.17.1-snapshot.71+34dfb2442",
34
+ "@instructure/shared-types": "8.17.1-snapshot.71+34dfb2442",
35
+ "@instructure/ui-a11y-content": "8.17.1-snapshot.71+34dfb2442",
36
+ "@instructure/ui-buttons": "8.17.1-snapshot.71+34dfb2442",
37
+ "@instructure/ui-icons": "8.17.1-snapshot.71+34dfb2442",
38
+ "@instructure/ui-motion": "8.17.1-snapshot.71+34dfb2442",
39
+ "@instructure/ui-react-utils": "8.17.1-snapshot.71+34dfb2442",
40
+ "@instructure/ui-themes": "8.17.1-snapshot.71+34dfb2442",
41
+ "@instructure/ui-utils": "8.17.1-snapshot.71+34dfb2442",
42
+ "@instructure/ui-view": "8.17.1-snapshot.71+34dfb2442",
43
+ "@instructure/uid": "8.17.1-snapshot.71+34dfb2442",
44
44
  "keycode": "^2",
45
45
  "prop-types": "^15"
46
46
  },
@@ -52,5 +52,5 @@
52
52
  "access": "public"
53
53
  },
54
54
  "sideEffects": false,
55
- "gitHead": "79d490548a0736feb2a7232bf5918857317b178b"
55
+ "gitHead": "34dfb2442c7ddce048d78ab1ecd5f3cbb78ee8d6"
56
56
  }