@instructure/ui-avatar 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-avatar
 
-
-
-
-
 ## [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-avatar

package/es/Avatar/AvatarLocator.js

@@ -21,7 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { locator } from '@instructure/ui-test-locator';
-import { Avatar } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { Avatar } from './index';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const AvatarLocator = locator(Avatar.selector);

package/es/Avatar/__examples__/Avatar.examples.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React from 'react';
 import { IconGroupLine } from '@instructure/ui-icons';
 export default {
@@ -35,19 +36,15 @@ export default {
     if (props.color !== 'default' && props.size !== 'medium') {
       return true;
     }
-
     if (props.renderIcon && props.src) {
       return true;
     }
-
     if (props.src && props.color !== 'default') {
       return true;
     }
-
     if (props.hasInverseColor && (props.size !== 'medium' || props.display !== 'block')) {
       return true;
     }
-
     return false;
   },
   getComponentProps: () => {

package/es/Avatar/index.js

@@ -1,8 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["onImageLoaded", "styles"];
-
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,7 +34,6 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -50,16 +47,13 @@ let Avatar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
       loaded: false
     };
     this.ref = null;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.handleImageLoaded = event => {
       this.setState({
         loaded: true
@@ -67,38 +61,30 @@ let Avatar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
       this.props.onImageLoaded(event);
     };
   }
-
   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, this.state);
   }
-
   componentDidUpdate() {
     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, this.state);
 
-    (_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
-
+    // in case the image is unset in an update, show icons/initials again
     if (this.state.loaded && !this.props.src) {
       this.setState({
         loaded: false
       });
     }
   }
-
   makeInitialsFromName() {
     let name = this.props.name;
-
     if (!name || typeof name !== 'string') {
       return;
     }
-
     name = name.trim();
-
     if (name.length === 0) {
       return;
     }
-
     if (name.match(/\s+/)) {
       const names = name.split(/\s+/);
       return (names[0][0] + names[names.length - 1][0]).toUpperCase();
@@ -106,38 +92,30 @@ let Avatar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
       return name[0].toUpperCase();
     }
   }
-
   renderInitials() {
     var _this$props$styles;
-
     return jsx("span", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.initials,
       "aria-hidden": "true"
     }, this.makeInitialsFromName());
   }
-
   renderContent() {
     const _this$props3 = this.props,
-          renderIcon = _this$props3.renderIcon,
-          styles = _this$props3.styles;
-
+      renderIcon = _this$props3.renderIcon,
+      styles = _this$props3.styles;
     if (!renderIcon) {
       return this.renderInitials();
     }
-
     return jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
     }, callRenderProp(renderIcon));
   }
-
   render() {
     var _this$props$styles2;
-
     const _this$props4 = this.props,
-          onImageLoaded = _this$props4.onImageLoaded,
-          styles = _this$props4.styles,
-          props = _objectWithoutProperties(_this$props4, _excluded);
-
+      onImageLoaded = _this$props4.onImageLoaded,
+      styles = _this$props4.styles,
+      props = _objectWithoutProperties(_this$props4, _excluded);
     return jsx(View, Object.assign({}, passthroughProps(props), {
       "aria-label": this.props.alt ? this.props.alt : void 0,
       role: this.props.alt ? 'img' : void 0,
@@ -155,7 +133,6 @@ let Avatar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
       "aria-hidden": "true"
     }), !this.state.loaded && this.renderContent());
   }
-
 }, _class2.displayName = "Avatar", _class2.componentId = 'Avatar', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   size: 'medium',
   color: 'default',

package/es/Avatar/locator.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { AvatarLocator } from './AvatarLocator';
 export { AvatarLocator };
 export default AvatarLocator;

package/es/Avatar/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/Avatar/styles.js

@@ -34,10 +34,10 @@
  */
 const generateStyle = (componentTheme, props, state) => {
   const size = props.size,
-        color = props.color,
-        hasInverseColor = props.hasInverseColor,
-        shape = props.shape,
-        src = props.src;
+    color = props.color,
+    hasInverseColor = props.hasInverseColor,
+    shape = props.shape,
+    src = props.src;
   const loaded = state.loaded;
   const sizeStyles = {
     auto: {
@@ -153,5 +153,4 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
 };
-
 export default generateStyle;

package/es/Avatar/theme.js

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { alpha } from '@instructure/ui-color-utils';
 
+import { alpha } from '@instructure/ui-color-utils';
 /**
  * Generates the theme object for the component from the theme and provided additional information
  * @param  {Object} theme The actual theme object.
@@ -30,15 +30,15 @@ import { alpha } from '@instructure/ui-color-utils';
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        borders = theme.borders,
-        typography = theme.typography;
+    borders = theme.borders,
+    typography = theme.typography;
   const brand = colors.brand,
-        shamrock = colors.shamrock,
-        barney = colors.barney,
-        crimson = colors.crimson,
-        fire = colors.fire,
-        licorice = colors.licorice,
-        ash = colors.ash;
+    shamrock = colors.shamrock,
+    barney = colors.barney,
+    crimson = colors.crimson,
+    fire = colors.fire,
+    licorice = colors.licorice,
+    ash = colors.ash;
   const componentVariables = {
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
     borderWidthSmall: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
@@ -58,8 +58,8 @@ const generateComponentTheme = theme => {
     colorLicorice: licorice,
     colorAsh: ash
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;

package/lib/Avatar/AvatarLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AvatarLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const AvatarLocator = (0, _locator.locator)(_index.Avatar.selector);
 exports.AvatarLocator = AvatarLocator;

package/lib/Avatar/__examples__/Avatar.examples.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _IconGroupLine = require("@instructure/ui-icons/lib/IconGroupLine.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -46,19 +42,15 @@ var _default = {
     if (props.color !== 'default' && props.size !== 'medium') {
       return true;
     }
-
     if (props.renderIcon && props.src) {
       return true;
     }
-
     if (props.src && props.color !== 'default') {
       return true;
     }
-
     if (props.hasInverseColor && (props.size !== 'medium' || props.display !== 'block')) {
       return true;
     }
-
     return false;
   },
   getComponentProps: () => {

package/lib/Avatar/index.js

@@ -1,36 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Avatar = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("react");
-
 var _View = require("@instructure/ui-view/lib/View");
-
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 const _excluded = ["onImageLoaded", "styles"];
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 category: components
@@ -44,16 +30,13 @@ let Avatar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       loaded: false
     };
     this.ref = null;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.handleImageLoaded = event => {
       this.setState({
         loaded: true
@@ -61,38 +44,30 @@ let Avatar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       this.props.onImageLoaded(event);
     };
   }
-
   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, this.state);
   }
-
   componentDidUpdate() {
     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, this.state);
 
-    (_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
-
+    // in case the image is unset in an update, show icons/initials again
     if (this.state.loaded && !this.props.src) {
       this.setState({
         loaded: false
       });
     }
   }
-
   makeInitialsFromName() {
     let name = this.props.name;
-
     if (!name || typeof name !== 'string') {
       return;
     }
-
     name = name.trim();
-
     if (name.length === 0) {
       return;
     }
-
     if (name.match(/\s+/)) {
       const names = name.split(/\s+/);
       return (names[0][0] + names[names.length - 1][0]).toUpperCase();
@@ -100,37 +75,30 @@ let Avatar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       return name[0].toUpperCase();
     }
   }
-
   renderInitials() {
     var _this$props$styles;
-
     return (0, _emotion.jsx)("span", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.initials,
       "aria-hidden": "true"
     }, this.makeInitialsFromName());
   }
-
   renderContent() {
     const _this$props3 = this.props,
-          renderIcon = _this$props3.renderIcon,
-          styles = _this$props3.styles;
-
+      renderIcon = _this$props3.renderIcon,
+      styles = _this$props3.styles;
     if (!renderIcon) {
       return this.renderInitials();
     }
-
     return (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
     }, (0, _callRenderProp.callRenderProp)(renderIcon));
   }
-
   render() {
     var _this$props$styles2;
-
     const _this$props4 = this.props,
-          onImageLoaded = _this$props4.onImageLoaded,
-          styles = _this$props4.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
+      onImageLoaded = _this$props4.onImageLoaded,
+      styles = _this$props4.styles,
+      props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
       "aria-label": this.props.alt ? this.props.alt : void 0,
       role: this.props.alt ? 'img' : void 0,
@@ -148,7 +116,6 @@ let Avatar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       "aria-hidden": "true"
     }), !this.state.loaded && this.renderContent());
   }
-
 }, _class2.displayName = "Avatar", _class2.componentId = 'Avatar', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   size: 'medium',
   color: 'default',

package/lib/Avatar/locator.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "AvatarLocator", {
   }
 });
 exports.default = void 0;
-
 var _AvatarLocator = require("./AvatarLocator");
-
 /*
  * The MIT License (MIT)
  *

package/lib/Avatar/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 = {
   name: _propTypes.default.string.isRequired,
   src: _propTypes.default.string,

package/lib/Avatar/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -41,10 +40,10 @@ exports.default = void 0;
  */
 const generateStyle = (componentTheme, props, state) => {
   const size = props.size,
-        color = props.color,
-        hasInverseColor = props.hasInverseColor,
-        shape = props.shape,
-        src = props.src;
+    color = props.color,
+    hasInverseColor = props.hasInverseColor,
+    shape = props.shape,
+    src = props.src;
   const loaded = state.loaded;
   const sizeStyles = {
     auto: {
@@ -160,6 +159,5 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/Avatar/theme.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -38,15 +36,15 @@ var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        borders = theme.borders,
-        typography = theme.typography;
+    borders = theme.borders,
+    typography = theme.typography;
   const brand = colors.brand,
-        shamrock = colors.shamrock,
-        barney = colors.barney,
-        crimson = colors.crimson,
-        fire = colors.fire,
-        licorice = colors.licorice,
-        ash = colors.ash;
+    shamrock = colors.shamrock,
+    barney = colors.barney,
+    crimson = colors.crimson,
+    fire = colors.fire,
+    licorice = colors.licorice,
+    ash = colors.ash;
   const componentVariables = {
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
     borderWidthSmall: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
@@ -66,9 +64,9 @@ const generateComponentTheme = theme => {
     colorLicorice: licorice,
     colorAsh: ash
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-avatar",
-  "version": "8.33.2-snapshot-0",
+  "version": "8.33.2",
   "description": "An image or letters that represents a user.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,21 +24,21 @@
   "license": "MIT",
   "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-icons": "8.33.2-snapshot-0",
-    "@instructure/ui-react-utils": "8.33.2-snapshot-0",
-    "@instructure/ui-testable": "8.33.2-snapshot-0",
-    "@instructure/ui-view": "8.33.2-snapshot-0",
+    "@instructure/console": "8.33.2",
+    "@instructure/emotion": "8.33.2",
+    "@instructure/shared-types": "8.33.2",
+    "@instructure/ui-icons": "8.33.2",
+    "@instructure/ui-react-utils": "8.33.2",
+    "@instructure/ui-testable": "8.33.2",
+    "@instructure/ui-view": "8.33.2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.33.2-snapshot-0",
-    "@instructure/ui-color-utils": "8.33.2-snapshot-0",
-    "@instructure/ui-test-locator": "8.33.2-snapshot-0",
-    "@instructure/ui-test-utils": "8.33.2-snapshot-0",
-    "@instructure/ui-themes": "8.33.2-snapshot-0"
+    "@instructure/ui-babel-preset": "8.33.2",
+    "@instructure/ui-color-utils": "8.33.2",
+    "@instructure/ui-test-locator": "8.33.2",
+    "@instructure/ui-test-utils": "8.33.2",
+    "@instructure/ui-themes": "8.33.2"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"