@instructure/ui-avatar 10.14.1-snapshot-4 → 10.14.1-snapshot-5

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.14.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.14.1-snapshot-4) (2025-03-27)
+## [10.14.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.14.1-snapshot-5) (2025-03-27)
 
-**Note:** Version bump only for package @instructure/ui-avatar
+
+### Features
+
+* **ui-avatar,emotion:** add theming solution to functional components ([9cbfd35](https://github.com/instructure/instructure-ui/commit/9cbfd35f038aed2942424707ec4669c820e3c820))
 
 
 

package/es/Avatar/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["onImageLoaded", "styles"];
-var _dec, _dec2, _class, _Avatar;
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * The MIT License (MIT)
  *
@@ -26,120 +24,126 @@ var _dec, _dec2, _class, _Avatar;
  */
 
 /** @jsx jsx */
-import { Component } from 'react';
+import { jsx, useStyle } from '@instructure/emotion';
+import { useState, useEffect } from 'react';
 import { View } from '@instructure/ui-view';
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
-import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { propTypes, allowedProps } from './props';
+
 /**
 ---
 category: components
 ---
 **/
-let Avatar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_Avatar = class Avatar extends Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      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
-      });
-      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);
 
+const Avatar = ({
+  size = 'medium',
+  color = 'default',
+  hasInverseColor = false,
+  showBorder = 'auto',
+  shape = 'circle',
+  display = 'inline-block',
+  onImageLoaded = _event => {},
+  src,
+  name,
+  renderIcon,
+  alt,
+  as,
+  margin,
+  themeOverride,
+  elementRef,
+  ...rest
+}) => {
+  const _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loaded = _useState2[0],
+    setLoaded = _useState2[1];
+  const styles = useStyle({
+    generateStyle,
+    generateComponentTheme,
+    params: {
+      loaded,
+      size,
+      color,
+      hasInverseColor,
+      shape,
+      src,
+      showBorder,
+      themeOverride
+    },
+    componentId: 'Avatar',
+    displayName: 'Avatar'
+  });
+  useEffect(() => {
     // in case the image is unset in an update, show icons/initials again
-    if (this.state.loaded && !this.props.src) {
-      this.setState({
-        loaded: false
-      });
+    if (loaded && !src) {
+      setLoaded(false);
     }
-  }
-  makeInitialsFromName() {
-    let name = this.props.name;
+  }, [loaded, src]);
+  const makeInitialsFromName = () => {
     if (!name || typeof name !== 'string') {
       return;
     }
-    name = name.trim();
-    if (name.length === 0) {
+    const currentName = name.trim();
+    if (currentName.length === 0) {
       return;
     }
-    if (name.match(/\s+/)) {
-      const names = name.split(/\s+/);
+    if (currentName.match(/\s+/)) {
+      const names = currentName.split(/\s+/);
       return (names[0][0] + names[names.length - 1][0]).toUpperCase();
     } else {
-      return name[0].toUpperCase();
+      return currentName[0].toUpperCase();
     }
-  }
-  renderInitials() {
-    var _this$props$styles;
+  };
+  const handleImageLoaded = event => {
+    setLoaded(true);
+    onImageLoaded(event);
+  };
+  const renderInitials = () => {
     return jsx("span", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.initials,
+      css: styles === null || styles === void 0 ? void 0 : styles.initials,
       "aria-hidden": "true"
-    }, this.makeInitialsFromName());
-  }
-  renderContent() {
-    const _this$props3 = this.props,
-      renderIcon = _this$props3.renderIcon,
-      styles = _this$props3.styles;
+    }, makeInitialsFromName());
+  };
+  const renderContent = () => {
     if (!renderIcon) {
-      return this.renderInitials();
+      return 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);
-    return jsx(View, Object.assign({}, passthroughProps(props), {
-      "aria-label": this.props.alt ? this.props.alt : void 0,
-      role: this.props.alt ? 'img' : void 0,
-      as: this.props.as,
-      elementRef: this.handleRef,
-      margin: this.props.margin,
-      css: styles === null || styles === void 0 ? void 0 : styles.avatar,
-      display: this.props.display
-    }), jsx("img", {
-      // This is visually hidden and is here for loading purposes only
-      src: this.props.src,
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.loadImage,
-      alt: this.props.alt,
-      onLoad: this.handleImageLoaded,
-      "aria-hidden": "true"
-    }), !this.state.loaded && this.renderContent());
-  }
-}, _Avatar.displayName = "Avatar", _Avatar.componentId = 'Avatar', _Avatar.propTypes = propTypes, _Avatar.allowedProps = allowedProps, _Avatar.defaultProps = {
-  size: 'medium',
-  color: 'default',
-  hasInverseColor: false,
-  showBorder: 'auto',
-  shape: 'circle',
-  display: 'inline-block',
-  onImageLoaded: _event => {}
-}, _Avatar)) || _class) || _class);
+  };
+  return jsx(View, Object.assign({}, passthroughProps({
+    size,
+    color,
+    hasInverseColor,
+    showBorder,
+    shape,
+    display,
+    src,
+    name,
+    renderIcon,
+    alt,
+    as,
+    margin,
+    ...rest
+  }), {
+    "aria-label": alt ? alt : void 0,
+    role: alt ? 'img' : void 0,
+    as: as,
+    elementRef: elementRef,
+    margin: margin,
+    css: styles === null || styles === void 0 ? void 0 : styles.avatar,
+    display: display
+  }), jsx("img", {
+    // This is visually hidden and is here for loading purposes only
+    src: src,
+    css: styles === null || styles === void 0 ? void 0 : styles.loadImage,
+    alt: alt,
+    onLoad: handleImageLoaded,
+    "aria-hidden": "true"
+  }), !loaded && renderContent());
+};
 export default Avatar;
 export { Avatar };

package/es/Avatar/styles.js

@@ -27,19 +27,18 @@
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @return The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props, state) => {
-  const size = props.size,
-    color = props.color,
-    hasInverseColor = props.hasInverseColor,
-    shape = props.shape,
-    src = props.src,
-    showBorder = props.showBorder;
-  const loaded = state.loaded;
+const generateStyle = (componentTheme, params) => {
+  const loaded = params.loaded,
+    size = params.size,
+    color = params.color,
+    hasInverseColor = params.hasInverseColor,
+    shape = params.shape,
+    src = params.src,
+    showBorder = params.showBorder;
   const sizeStyles = {
     auto: {
       fontSize: 'inherit',

package/es/Avatar/theme.js

@@ -25,8 +25,8 @@
 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.
- * @return {Object} The final theme object with the overrides and component variables
+ * @param theme The current theme object.
+ * @return The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
   var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8;

package/lib/Avatar/index.js

@@ -5,18 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Avatar = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _emotion = require("@instructure/emotion");
 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, _Avatar;
 /*
  * The MIT License (MIT)
  *
@@ -40,112 +36,122 @@ var _dec, _dec2, _class, _Avatar;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 /** @jsx jsx */
+
 /**
 ---
 category: components
 ---
 **/
-let Avatar = exports.Avatar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_Avatar = class Avatar extends _react.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      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
-      });
-      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);
 
+const Avatar = ({
+  size = 'medium',
+  color = 'default',
+  hasInverseColor = false,
+  showBorder = 'auto',
+  shape = 'circle',
+  display = 'inline-block',
+  onImageLoaded = _event => {},
+  src,
+  name,
+  renderIcon,
+  alt,
+  as,
+  margin,
+  themeOverride,
+  elementRef,
+  ...rest
+}) => {
+  const _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    loaded = _useState2[0],
+    setLoaded = _useState2[1];
+  const styles = (0, _emotion.useStyle)({
+    generateStyle: _styles.default,
+    generateComponentTheme: _theme.default,
+    params: {
+      loaded,
+      size,
+      color,
+      hasInverseColor,
+      shape,
+      src,
+      showBorder,
+      themeOverride
+    },
+    componentId: 'Avatar',
+    displayName: 'Avatar'
+  });
+  (0, _react.useEffect)(() => {
     // in case the image is unset in an update, show icons/initials again
-    if (this.state.loaded && !this.props.src) {
-      this.setState({
-        loaded: false
-      });
+    if (loaded && !src) {
+      setLoaded(false);
     }
-  }
-  makeInitialsFromName() {
-    let name = this.props.name;
+  }, [loaded, src]);
+  const makeInitialsFromName = () => {
     if (!name || typeof name !== 'string') {
       return;
     }
-    name = name.trim();
-    if (name.length === 0) {
+    const currentName = name.trim();
+    if (currentName.length === 0) {
       return;
     }
-    if (name.match(/\s+/)) {
-      const names = name.split(/\s+/);
+    if (currentName.match(/\s+/)) {
+      const names = currentName.split(/\s+/);
       return (names[0][0] + names[names.length - 1][0]).toUpperCase();
     } else {
-      return name[0].toUpperCase();
+      return currentName[0].toUpperCase();
     }
-  }
-  renderInitials() {
-    var _this$props$styles;
+  };
+  const handleImageLoaded = event => {
+    setLoaded(true);
+    onImageLoaded(event);
+  };
+  const renderInitials = () => {
     return (0, _emotion.jsx)("span", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.initials,
+      css: styles === null || styles === void 0 ? void 0 : styles.initials,
       "aria-hidden": "true"
-    }, this.makeInitialsFromName());
-  }
-  renderContent() {
-    const _this$props3 = this.props,
-      renderIcon = _this$props3.renderIcon,
-      styles = _this$props3.styles;
+    }, makeInitialsFromName());
+  };
+  const renderContent = () => {
     if (!renderIcon) {
-      return this.renderInitials();
+      return 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);
-    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,
-      as: this.props.as,
-      elementRef: this.handleRef,
-      margin: this.props.margin,
-      css: styles === null || styles === void 0 ? void 0 : styles.avatar,
-      display: this.props.display
-    }), (0, _emotion.jsx)("img", {
-      // This is visually hidden and is here for loading purposes only
-      src: this.props.src,
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.loadImage,
-      alt: this.props.alt,
-      onLoad: this.handleImageLoaded,
-      "aria-hidden": "true"
-    }), !this.state.loaded && this.renderContent());
-  }
-}, _Avatar.displayName = "Avatar", _Avatar.componentId = 'Avatar', _Avatar.propTypes = _props.propTypes, _Avatar.allowedProps = _props.allowedProps, _Avatar.defaultProps = {
-  size: 'medium',
-  color: 'default',
-  hasInverseColor: false,
-  showBorder: 'auto',
-  shape: 'circle',
-  display: 'inline-block',
-  onImageLoaded: _event => {}
-}, _Avatar)) || _class) || _class);
+  };
+  return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)({
+    size,
+    color,
+    hasInverseColor,
+    showBorder,
+    shape,
+    display,
+    src,
+    name,
+    renderIcon,
+    alt,
+    as,
+    margin,
+    ...rest
+  }), {
+    "aria-label": alt ? alt : void 0,
+    role: alt ? 'img' : void 0,
+    as: as,
+    elementRef: elementRef,
+    margin: margin,
+    css: styles === null || styles === void 0 ? void 0 : styles.avatar,
+    display: display
+  }), (0, _emotion.jsx)("img", {
+    // This is visually hidden and is here for loading purposes only
+    src: src,
+    css: styles === null || styles === void 0 ? void 0 : styles.loadImage,
+    alt: alt,
+    onLoad: handleImageLoaded,
+    "aria-hidden": "true"
+  }), !loaded && renderContent());
+};
+exports.Avatar = Avatar;
 var _default = exports.default = Avatar;

package/lib/Avatar/styles.js

@@ -33,19 +33,18 @@ exports.default = void 0;
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @return The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props, state) => {
-  const size = props.size,
-    color = props.color,
-    hasInverseColor = props.hasInverseColor,
-    shape = props.shape,
-    src = props.src,
-    showBorder = props.showBorder;
-  const loaded = state.loaded;
+const generateStyle = (componentTheme, params) => {
+  const loaded = params.loaded,
+    size = params.size,
+    color = params.color,
+    hasInverseColor = params.hasInverseColor,
+    shape = params.shape,
+    src = params.src,
+    showBorder = params.showBorder;
   const sizeStyles = {
     auto: {
       fontSize: 'inherit',

package/lib/Avatar/theme.js

@@ -31,8 +31,8 @@ var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
 
 /**
  * Generates the theme object for the component from the theme and provided additional information
- * @param  {Object} theme The actual theme object.
- * @return {Object} The final theme object with the overrides and component variables
+ * @param theme The current theme object.
+ * @return The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
   var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-avatar",
-  "version": "10.14.1-snapshot-4",
+  "version": "10.14.1-snapshot-5",
   "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.26.0",
-    "@instructure/emotion": "10.14.1-snapshot-4",
-    "@instructure/shared-types": "10.14.1-snapshot-4",
-    "@instructure/ui-icons": "10.14.1-snapshot-4",
-    "@instructure/ui-react-utils": "10.14.1-snapshot-4",
-    "@instructure/ui-testable": "10.14.1-snapshot-4",
-    "@instructure/ui-view": "10.14.1-snapshot-4",
+    "@instructure/emotion": "10.14.1-snapshot-5",
+    "@instructure/shared-types": "10.14.1-snapshot-5",
+    "@instructure/ui-icons": "10.14.1-snapshot-5",
+    "@instructure/ui-react-utils": "10.14.1-snapshot-5",
+    "@instructure/ui-testable": "10.14.1-snapshot-5",
+    "@instructure/ui-view": "10.14.1-snapshot-5",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.14.1-snapshot-4",
-    "@instructure/ui-babel-preset": "10.14.1-snapshot-4",
-    "@instructure/ui-color-utils": "10.14.1-snapshot-4",
-    "@instructure/ui-test-locator": "10.14.1-snapshot-4",
-    "@instructure/ui-test-utils": "10.14.1-snapshot-4",
-    "@instructure/ui-themes": "10.14.1-snapshot-4",
+    "@instructure/ui-axe-check": "10.14.1-snapshot-5",
+    "@instructure/ui-babel-preset": "10.14.1-snapshot-5",
+    "@instructure/ui-color-utils": "10.14.1-snapshot-5",
+    "@instructure/ui-test-locator": "10.14.1-snapshot-5",
+    "@instructure/ui-test-utils": "10.14.1-snapshot-5",
+    "@instructure/ui-themes": "10.14.1-snapshot-5",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "vitest": "^2.1.8"