@instructure/ui-avatar 10.16.3-snapshot--1 → 10.16.3

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.16.3-snapshot--1](https://github.com/instructure/instructure-ui/compare/v10.16.1...v10.16.3-snapshot--1) (2025-04-24)
+## [10.16.3](https://github.com/instructure/instructure-ui/compare/v10.16.1...v10.16.3) (2025-04-30)
 
-**Note:** Version bump only for package @instructure/ui-avatar
+
+### Bug Fixes
+
+* **ui-date-input,ui-avatar:** add ref support to functional components ([6a6ba49](https://github.com/instructure/instructure-ui/commit/6a6ba493634a22a515d59b5acbecbc2d93084e0f))
 
 
 

package/es/Avatar/__new-tests__/Avatar.test.js

@@ -29,7 +29,7 @@ import { runAxeCheck } from '@instructure/ui-axe-check';
 import '@testing-library/jest-dom';
 import Avatar from '../index';
 import { IconGroupLine } from '@instructure/ui-icons';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<Avatar />', () => {
   describe('for a11y', () => {
     it('should be accessible', async () => {
@@ -81,14 +81,25 @@ describe('<Avatar />', () => {
       const initials = screen.getByText('JJ');
       expect(getComputedStyle(initials).color).toBe('rgb(43, 122, 188)');
     });
-    it('should return the underlying component', async () => {
+    it('refs should return the underlying component', async () => {
       const elementRef = vi.fn();
-      const _render4 = render(_jsx(Avatar, {
-          name: "Avatar Name",
-          elementRef: elementRef
+      const ref = {
+        current: null
+      };
+      const _render4 = render(_jsxs(_Fragment, {
+          children: [_jsx(Avatar, {
+            id: "av1",
+            name: "Avatar Name",
+            elementRef: elementRef
+          }), _jsx(Avatar, {
+            id: "av2",
+            name: "Avatar Name2",
+            ref: ref
+          })]
         })),
         container = _render4.container;
-      expect(elementRef).toHaveBeenCalledWith(container.firstChild);
+      expect(ref.current.props.id).toBe('av2');
+      expect(elementRef).toHaveBeenCalledWith(container.querySelector('#av1'));
     });
   });
   describe('when the renderIcon prop is provided', () => {

package/es/Avatar/index.js

@@ -24,7 +24,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  */
 
 import { useStyle } from '@instructure/emotion';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, forwardRef } from 'react';
 import { View } from '@instructure/ui-view';
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
 import generateStyle from './styles';
@@ -36,7 +36,7 @@ category: components
 ---
 **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const Avatar = ({
+const Avatar = /*#__PURE__*/forwardRef(({
   size = 'medium',
   color = 'default',
   hasInverseColor = false,
@@ -53,7 +53,7 @@ const Avatar = ({
   themeOverride,
   elementRef,
   ...rest
-}) => {
+}, ref) => {
   const _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     loaded = _useState2[0],
@@ -131,6 +131,7 @@ const Avatar = ({
       margin,
       ...rest
     }),
+    ref: ref,
     "aria-label": alt ? alt : void 0,
     role: alt ? 'img' : void 0,
     as: as,
@@ -147,6 +148,6 @@ const Avatar = ({
       "aria-hidden": "true"
     }), !loaded && renderContent()]
   });
-};
+});
 export default Avatar;
 export { Avatar };

package/lib/Avatar/__new-tests__/Avatar.test.js

@@ -83,14 +83,25 @@ describe('<Avatar />', () => {
       const initials = _react.screen.getByText('JJ');
       expect(getComputedStyle(initials).color).toBe('rgb(43, 122, 188)');
     });
-    it('should return the underlying component', async () => {
+    it('refs should return the underlying component', async () => {
       const elementRef = _vitest.vi.fn();
-      const _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
-          name: "Avatar Name",
-          elementRef: elementRef
+      const ref = {
+        current: null
+      };
+      const _render4 = (0, _react.render)((0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [(0, _jsxRuntime.jsx)(_index.default, {
+            id: "av1",
+            name: "Avatar Name",
+            elementRef: elementRef
+          }), (0, _jsxRuntime.jsx)(_index.default, {
+            id: "av2",
+            name: "Avatar Name2",
+            ref: ref
+          })]
         })),
         container = _render4.container;
-      expect(elementRef).toHaveBeenCalledWith(container.firstChild);
+      expect(ref.current.props.id).toBe('av2');
+      expect(elementRef).toHaveBeenCalledWith(container.querySelector('#av1'));
     });
   });
   describe('when the renderIcon prop is provided', () => {

package/lib/Avatar/index.js

@@ -42,7 +42,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 ---
 category: components
 ---
-**/const Avatar = ({
+**/const Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(({
   size = 'medium',
   color = 'default',
   hasInverseColor = false,
@@ -59,7 +59,7 @@ category: components
   themeOverride,
   elementRef,
   ...rest
-}) => {
+}, ref) => {
   const _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     loaded = _useState2[0],
@@ -137,6 +137,7 @@ category: components
       margin,
       ...rest
     }),
+    ref: ref,
     "aria-label": alt ? alt : void 0,
     role: alt ? 'img' : void 0,
     as: as,
@@ -153,6 +154,5 @@ category: components
       "aria-hidden": "true"
     }), !loaded && renderContent()]
   });
-};
-exports.Avatar = Avatar;
+});
 var _default = exports.default = Avatar;

package/package.json

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

package/src/Avatar/__new-tests__/Avatar.test.tsx

@@ -29,6 +29,7 @@ import { runAxeCheck } from '@instructure/ui-axe-check'
 import '@testing-library/jest-dom'
 import Avatar from '../index'
 import { IconGroupLine } from '@instructure/ui-icons'
+import { View } from '@instructure/ui-view'
 
 describe('<Avatar />', () => {
   describe('for a11y', () => {
@@ -72,12 +73,17 @@ describe('<Avatar />', () => {
       expect(getComputedStyle(initials).color).toBe('rgb(43, 122, 188)')
     })
 
-    it('should return the underlying component', async () => {
+    it('refs should return the underlying component', async () => {
       const elementRef = vi.fn()
+      const ref: React.Ref<View> = { current: null }
       const { container } = render(
-        <Avatar name="Avatar Name" elementRef={elementRef} />
+        <>
+          <Avatar id="av1" name="Avatar Name" elementRef={elementRef} />
+          <Avatar id="av2" name="Avatar Name2" ref={ref} />
+        </>
       )
-      expect(elementRef).toHaveBeenCalledWith(container.firstChild)
+      expect(ref.current!.props.id).toBe('av2')
+      expect(elementRef).toHaveBeenCalledWith(container.querySelector('#av1'))
     })
   })
 

package/src/Avatar/index.tsx

@@ -23,7 +23,13 @@
  */
 
 import { useStyle } from '@instructure/emotion'
-import { useState, SyntheticEvent, useEffect } from 'react'
+import {
+  useState,
+  SyntheticEvent,
+  useEffect,
+  forwardRef,
+  ForwardedRef
+} from 'react'
 
 import { View } from '@instructure/ui-view'
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils'
@@ -37,125 +43,130 @@ import generateComponentTheme from './theme'
 category: components
 ---
 **/
+const Avatar = forwardRef(
+  (
+    {
+      size = 'medium',
+      color = 'default',
+      hasInverseColor = false,
+      showBorder = 'auto',
+      shape = 'circle',
+      display = 'inline-block',
+      onImageLoaded = (_event: SyntheticEvent) => {},
+      src,
+      name,
+      renderIcon,
+      alt,
+      as,
+      margin,
+      themeOverride,
+      elementRef,
+      ...rest
+    }: AvatarProps,
+    ref: ForwardedRef<View>
+  ) => {
+    const [loaded, setLoaded] = useState(false)
 
-const Avatar = ({
-  size = 'medium',
-  color = 'default',
-  hasInverseColor = false,
-  showBorder = 'auto',
-  shape = 'circle',
-  display = 'inline-block',
-  onImageLoaded = (_event: SyntheticEvent) => {},
-  src,
-  name,
-  renderIcon,
-  alt,
-  as,
-  margin,
-  themeOverride,
-  elementRef,
-  ...rest
-}: AvatarProps) => {
-  const [loaded, setLoaded] = useState(false)
+    const styles = useStyle({
+      generateStyle,
+      generateComponentTheme,
+      params: {
+        loaded,
+        size,
+        color,
+        hasInverseColor,
+        shape,
+        src,
+        showBorder,
+        themeOverride
+      },
+      componentId: 'Avatar',
+      displayName: 'Avatar'
+    })
 
-  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 (loaded && !src) {
+        setLoaded(false)
+      }
+    }, [loaded, src])
 
-  useEffect(() => {
-    // in case the image is unset in an update, show icons/initials again
-    if (loaded && !src) {
-      setLoaded(false)
-    }
-  }, [loaded, src])
+    const makeInitialsFromName = () => {
+      if (!name || typeof name !== 'string') {
+        return
+      }
+      const currentName = name.trim()
+      if (currentName.length === 0) {
+        return
+      }
 
-  const makeInitialsFromName = () => {
-    if (!name || typeof name !== 'string') {
-      return
+      if (currentName.match(/\s+/)) {
+        const names = currentName.split(/\s+/)
+        return (names[0][0] + names[names.length - 1][0]).toUpperCase()
+      } else {
+        return currentName[0].toUpperCase()
+      }
     }
-    const currentName = name.trim()
-    if (currentName.length === 0) {
-      return
+
+    const handleImageLoaded = (event: SyntheticEvent) => {
+      setLoaded(true)
+      onImageLoaded(event)
     }
 
-    if (currentName.match(/\s+/)) {
-      const names = currentName.split(/\s+/)
-      return (names[0][0] + names[names.length - 1][0]).toUpperCase()
-    } else {
-      return currentName[0].toUpperCase()
+    const renderInitials = () => {
+      return (
+        <span css={styles?.initials} aria-hidden="true">
+          {makeInitialsFromName()}
+        </span>
+      )
     }
-  }
 
-  const handleImageLoaded = (event: SyntheticEvent) => {
-    setLoaded(true)
-    onImageLoaded(event)
-  }
+    const renderContent = () => {
+      if (!renderIcon) {
+        return renderInitials()
+      }
 
-  const renderInitials = () => {
-    return (
-      <span css={styles?.initials} aria-hidden="true">
-        {makeInitialsFromName()}
-      </span>
-    )
-  }
-
-  const renderContent = () => {
-    if (!renderIcon) {
-      return renderInitials()
+      return <span css={styles?.iconSVG}>{callRenderProp(renderIcon)}</span>
     }
 
-    return <span css={styles?.iconSVG}>{callRenderProp(renderIcon)}</span>
+    return (
+      <View
+        {...passthroughProps({
+          size,
+          color,
+          hasInverseColor,
+          showBorder,
+          shape,
+          display,
+          src,
+          name,
+          renderIcon,
+          alt,
+          as,
+          margin,
+          ...rest
+        })}
+        ref={ref}
+        aria-label={alt ? alt : undefined}
+        role={alt ? 'img' : undefined}
+        as={as}
+        elementRef={elementRef}
+        margin={margin}
+        css={styles?.avatar}
+        display={display}
+      >
+        <img // This is visually hidden and is here for loading purposes only
+          src={src}
+          css={styles?.loadImage}
+          alt={alt}
+          onLoad={handleImageLoaded}
+          aria-hidden="true"
+        />
+        {!loaded && renderContent()}
+      </View>
+    )
   }
-
-  return (
-    <View
-      {...passthroughProps({
-        size,
-        color,
-        hasInverseColor,
-        showBorder,
-        shape,
-        display,
-        src,
-        name,
-        renderIcon,
-        alt,
-        as,
-        margin,
-        ...rest
-      })}
-      aria-label={alt ? alt : undefined}
-      role={alt ? 'img' : undefined}
-      as={as}
-      elementRef={elementRef}
-      margin={margin}
-      css={styles?.avatar}
-      display={display}
-    >
-      <img // This is visually hidden and is here for loading purposes only
-        src={src}
-        css={styles?.loadImage}
-        alt={alt}
-        onLoad={handleImageLoaded}
-        aria-hidden="true"
-      />
-      {!loaded && renderContent()}
-    </View>
-  )
-}
+)
 
 export default Avatar
 export { Avatar }