@instructure/ui-avatar 8.17.1-snapshot.20 → 8.17.1-snapshot.35

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/Avatar/index.js +13 -21
  2. package/es/Avatar/theme.js +7 -7
  3. package/lib/Avatar/index.js +13 -21
  4. package/lib/Avatar/theme.js +7 -7
  5. package/package.json +14 -14
  6. package/tsconfig.build.tsbuildinfo +1 -1
package/es/Avatar/index.js CHANGED
@@ -69,15 +69,11 @@ let Avatar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
69
69
  }
70
70
 
71
71
  componentDidMount() {
72
- var _this$props$makeStyle, _this$props;
73
-
74
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.state);
72
+ this.props.makeStyles?.(this.state);
75
73
  }
76
74
 
77
75
  componentDidUpdate() {
78
- var _this$props$makeStyle2, _this$props2;
79
-
80
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.state); // in case the image is unset in an update, show icons/initials again
76
+ this.props.makeStyles?.(this.state); // in case the image is unset in an update, show icons/initials again
81
77
 
82
78
  if (this.state.loaded && !this.props.src) {
83
79
  this.setState({
@@ -108,35 +104,31 @@ let Avatar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
108
104
  }
109
105
 
110
106
  renderInitials() {
111
- var _this$props$styles;
112
-
113
107
  return jsx("span", {
114
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.initials,
108
+ css: this.props.styles?.initials,
115
109
  "aria-hidden": "true"
116
110
  }, this.makeInitialsFromName());
117
111
  }
118
112
 
119
113
  renderContent() {
120
- const _this$props3 = this.props,
121
- renderIcon = _this$props3.renderIcon,
122
- styles = _this$props3.styles;
114
+ const _this$props = this.props,
115
+ renderIcon = _this$props.renderIcon,
116
+ styles = _this$props.styles;
123
117
 
124
118
  if (!renderIcon) {
125
119
  return this.renderInitials();
126
120
  }
127
121
 
128
122
  return jsx("span", {
129
- css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
123
+ css: styles?.iconSVG
130
124
  }, callRenderProp(renderIcon));
131
125
  }
132
126
 
133
127
  render() {
134
- var _this$props$styles2;
135
-
136
- const _this$props4 = this.props,
137
- onImageLoaded = _this$props4.onImageLoaded,
138
- styles = _this$props4.styles,
139
- props = _objectWithoutProperties(_this$props4, _excluded);
128
+ const _this$props2 = this.props,
129
+ onImageLoaded = _this$props2.onImageLoaded,
130
+ styles = _this$props2.styles,
131
+ props = _objectWithoutProperties(_this$props2, _excluded);
140
132
 
141
133
  return jsx(View, Object.assign({}, passthroughProps(props), {
142
134
  "aria-label": this.props.alt ? this.props.alt : void 0,
@@ -144,12 +136,12 @@ let Avatar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
144
136
  as: this.props.as,
145
137
  elementRef: this.handleRef,
146
138
  margin: this.props.margin,
147
- css: styles === null || styles === void 0 ? void 0 : styles.avatar,
139
+ css: styles?.avatar,
148
140
  display: this.props.display
149
141
  }), jsx("img", {
150
142
  // This is visually hidden and is here for loading purposes only
151
143
  src: this.props.src,
152
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.loadImage,
144
+ css: this.props.styles?.loadImage,
153
145
  alt: this.props.alt,
154
146
  onLoad: this.handleImageLoaded,
155
147
  "aria-hidden": "true"
package/es/Avatar/theme.js CHANGED
@@ -40,14 +40,14 @@ const generateComponentTheme = theme => {
40
40
  licorice = colors.licorice,
41
41
  ash = colors.ash;
42
42
  const componentVariables = {
43
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
44
- borderWidthSmall: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
45
- borderWidthMedium: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
46
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
47
- boxShadowColor: alpha(colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest, 12),
43
+ background: colors?.backgroundLightest,
44
+ borderWidthSmall: borders?.widthSmall,
45
+ borderWidthMedium: borders?.widthMedium,
46
+ borderColor: colors?.borderMedium,
47
+ boxShadowColor: alpha(colors?.backgroundDarkest, 12),
48
48
  boxShadowBlur: '1rem',
49
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
50
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
49
+ fontFamily: typography?.fontFamily,
50
+ fontWeight: typography?.fontWeightBold,
51
51
  // these colors have sufficient contrast with the white background
52
52
  // in the normal and high contrast themes
53
53
  color: brand,
package/lib/Avatar/index.js CHANGED
@@ -63,15 +63,11 @@ let Avatar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
63
63
  }
64
64
 
65
65
  componentDidMount() {
66
- var _this$props$makeStyle, _this$props;
67
-
68
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.state);
66
+ this.props.makeStyles?.(this.state);
69
67
  }
70
68
 
71
69
  componentDidUpdate() {
72
- var _this$props$makeStyle2, _this$props2;
73
-
74
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.state); // in case the image is unset in an update, show icons/initials again
70
+ this.props.makeStyles?.(this.state); // in case the image is unset in an update, show icons/initials again
75
71
 
76
72
  if (this.state.loaded && !this.props.src) {
77
73
  this.setState({
@@ -102,47 +98,43 @@ let Avatar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
102
98
  }
103
99
 
104
100
  renderInitials() {
105
- var _this$props$styles;
106
-
107
101
  return (0, _emotion.jsx)("span", {
108
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.initials,
102
+ css: this.props.styles?.initials,
109
103
  "aria-hidden": "true"
110
104
  }, this.makeInitialsFromName());
111
105
  }
112
106
 
113
107
  renderContent() {
114
- const _this$props3 = this.props,
115
- renderIcon = _this$props3.renderIcon,
116
- styles = _this$props3.styles;
108
+ const _this$props = this.props,
109
+ renderIcon = _this$props.renderIcon,
110
+ styles = _this$props.styles;
117
111
 
118
112
  if (!renderIcon) {
119
113
  return this.renderInitials();
120
114
  }
121
115
 
122
116
  return (0, _emotion.jsx)("span", {
123
- css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
117
+ css: styles?.iconSVG
124
118
  }, (0, _callRenderProp.callRenderProp)(renderIcon));
125
119
  }
126
120
 
127
121
  render() {
128
- var _this$props$styles2;
129
-
130
- const _this$props4 = this.props,
131
- onImageLoaded = _this$props4.onImageLoaded,
132
- styles = _this$props4.styles,
133
- props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
122
+ const _this$props2 = this.props,
123
+ onImageLoaded = _this$props2.onImageLoaded,
124
+ styles = _this$props2.styles,
125
+ props = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
134
126
  return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
135
127
  "aria-label": this.props.alt ? this.props.alt : void 0,
136
128
  role: this.props.alt ? 'img' : void 0,
137
129
  as: this.props.as,
138
130
  elementRef: this.handleRef,
139
131
  margin: this.props.margin,
140
- css: styles === null || styles === void 0 ? void 0 : styles.avatar,
132
+ css: styles?.avatar,
141
133
  display: this.props.display
142
134
  }), (0, _emotion.jsx)("img", {
143
135
  // This is visually hidden and is here for loading purposes only
144
136
  src: this.props.src,
145
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.loadImage,
137
+ css: this.props.styles?.loadImage,
146
138
  alt: this.props.alt,
147
139
  onLoad: this.handleImageLoaded,
148
140
  "aria-hidden": "true"
package/lib/Avatar/theme.js CHANGED
@@ -48,14 +48,14 @@ const generateComponentTheme = theme => {
48
48
  licorice = colors.licorice,
49
49
  ash = colors.ash;
50
50
  const componentVariables = {
51
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
52
- borderWidthSmall: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
53
- borderWidthMedium: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
54
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
55
- boxShadowColor: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest, 12),
51
+ background: colors?.backgroundLightest,
52
+ borderWidthSmall: borders?.widthSmall,
53
+ borderWidthMedium: borders?.widthMedium,
54
+ borderColor: colors?.borderMedium,
55
+ boxShadowColor: (0, _alpha.alpha)(colors?.backgroundDarkest, 12),
56
56
  boxShadowBlur: '1rem',
57
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
58
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
57
+ fontFamily: typography?.fontFamily,
58
+ fontWeight: typography?.fontWeightBold,
59
59
  // these colors have sufficient contrast with the white background
60
60
  // in the normal and high contrast themes
61
61
  color: brand,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-avatar",
3
- "version": "8.17.1-snapshot.20+86aa5ea0c",
3
+ "version": "8.17.1-snapshot.35+f91affce8",
4
4
  "description": "An image or letters that represents a user.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,21 +24,21 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.13.10",
27
- "@instructure/console": "8.17.1-snapshot.20+86aa5ea0c",
28
- "@instructure/emotion": "8.17.1-snapshot.20+86aa5ea0c",
29
- "@instructure/shared-types": "8.17.1-snapshot.20+86aa5ea0c",
30
- "@instructure/ui-icons": "8.17.1-snapshot.20+86aa5ea0c",
31
- "@instructure/ui-react-utils": "8.17.1-snapshot.20+86aa5ea0c",
32
- "@instructure/ui-testable": "8.17.1-snapshot.20+86aa5ea0c",
33
- "@instructure/ui-view": "8.17.1-snapshot.20+86aa5ea0c",
27
+ "@instructure/console": "8.17.1-snapshot.35+f91affce8",
28
+ "@instructure/emotion": "8.17.1-snapshot.35+f91affce8",
29
+ "@instructure/shared-types": "8.17.1-snapshot.35+f91affce8",
30
+ "@instructure/ui-icons": "8.17.1-snapshot.35+f91affce8",
31
+ "@instructure/ui-react-utils": "8.17.1-snapshot.35+f91affce8",
32
+ "@instructure/ui-testable": "8.17.1-snapshot.35+f91affce8",
33
+ "@instructure/ui-view": "8.17.1-snapshot.35+f91affce8",
34
34
  "prop-types": "^15"
35
35
  },
36
36
  "devDependencies": {
37
- "@instructure/ui-babel-preset": "8.17.1-snapshot.20+86aa5ea0c",
38
- "@instructure/ui-color-utils": "8.17.1-snapshot.20+86aa5ea0c",
39
- "@instructure/ui-test-locator": "8.17.1-snapshot.20+86aa5ea0c",
40
- "@instructure/ui-test-utils": "8.17.1-snapshot.20+86aa5ea0c",
41
- "@instructure/ui-themes": "8.17.1-snapshot.20+86aa5ea0c"
37
+ "@instructure/ui-babel-preset": "8.17.1-snapshot.35+f91affce8",
38
+ "@instructure/ui-color-utils": "8.17.1-snapshot.35+f91affce8",
39
+ "@instructure/ui-test-locator": "8.17.1-snapshot.35+f91affce8",
40
+ "@instructure/ui-test-utils": "8.17.1-snapshot.35+f91affce8",
41
+ "@instructure/ui-themes": "8.17.1-snapshot.35+f91affce8"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "react": ">=16.8 <=17"
@@ -47,5 +47,5 @@
47
47
  "access": "public"
48
48
  },
49
49
  "sideEffects": false,
50
- "gitHead": "86aa5ea0cfecaeb33b98ed6be30647dde07b258c"
50
+ "gitHead": "f91affce8a35b3259e8744b61df1cd5a2ac6b8a8"
51
51
  }