@fluentui/react-avatar 9.2.8 → 9.2.9

package/CHANGELOG.json

@@ -2,7 +2,70 @@
   "name": "@fluentui/react-avatar",
   "entries": [
     {
-      "date": "Mon, 05 Dec 2022 18:25:18 GMT",
+      "date": "Tue, 20 Dec 2022 14:55:46 GMT",
+      "tag": "@fluentui/react-avatar_v9.2.9",
+      "version": "9.2.9",
+      "comments": {
+        "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-avatar",
+            "commit": "82bd84ff65c8316297ef7601154c5e5c321040ab",
+            "comment": "fix: Avatar shouldn't render an icon when displaying an image (performance)"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-badge to v9.0.15",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.3",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-popover to v9.3.4",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.1.3",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tabster to v9.3.3",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-theme to v9.1.4",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-tooltip to v9.1.4",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-avatar",
+            "comment": "Bump @fluentui/react-utilities to v9.3.0",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 05 Dec 2022 18:29:20 GMT",
       "tag": "@fluentui/react-avatar_v9.2.8",
       "version": "9.2.8",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Mon, 05 Dec 2022 18:25:18 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Dec 2022 14:55:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.9)
+
+Tue, 20 Dec 2022 14:55:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.8..@fluentui/react-avatar_v9.2.9)
+
+### Patches
+
+- fix: Avatar shouldn't render an icon when displaying an image (performance) ([PR #25945](https://github.com/microsoft/fluentui/pull/25945) by behowell@microsoft.com)
+- Bump @fluentui/react-badge to v9.0.15 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-popover to v9.3.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.1.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-tabster to v9.3.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-theme to v9.1.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-tooltip to v9.1.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-utilities to v9.3.0 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+
 ## [9.2.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.2.8)
 
-Mon, 05 Dec 2022 18:25:18 GMT 
+Mon, 05 Dec 2022 18:29:20 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.2.7..@fluentui/react-avatar_v9.2.8)
 
 ### Patches

package/lib/components/Avatar/useAvatar.js

@@ -43,7 +43,22 @@ export const useAvatar_unstable = (props, ref) => {
     ref
   },
   /* excludedPropNames: */
-  ['name']); // Resolve the initials slot, defaulted to getInitials.
+  ['name']);
+  const [imageHidden, setImageHidden] = React.useState(undefined);
+  const image = resolveShorthand(props.image, {
+    defaultProps: {
+      alt: '',
+      role: 'presentation',
+      'aria-hidden': true,
+      hidden: imageHidden
+    }
+  }); // Hide the image if it fails to load and restore it on a successful load
+
+  if (image) {
+    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));
+    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));
+  } // Resolve the initials slot, defaulted to getInitials.
+
 
   let initials = resolveShorthand(props.initials, {
     required: true,
@@ -53,12 +68,16 @@ export const useAvatar_unstable = (props, ref) => {
       }),
       id: baseId + '__initials'
     }
-  }); // Render the icon slot *only if* there aren't any initials to display.
-
-  let icon = undefined;
+  }); // Don't render the initials slot if it's empty
 
   if (!(initials === null || initials === void 0 ? void 0 : initials.children)) {
     initials = undefined;
+  } // Render the icon slot *only if* there aren't any initials or image to display
+
+
+  let icon = undefined;
+
+  if (!initials && (!image || imageHidden)) {
     icon = resolveShorthand(props.icon, {
       required: true,
       defaultProps: {
@@ -68,21 +87,6 @@ export const useAvatar_unstable = (props, ref) => {
     });
   }
 
-  const [imageHidden, setImageHidden] = React.useState(undefined);
-  const image = resolveShorthand(props.image, {
-    defaultProps: {
-      alt: '',
-      role: 'presentation',
-      'aria-hidden': true,
-      hidden: imageHidden
-    }
-  }); // Hide the image if it fails to load and restore it on a successful load
-
-  if (image) {
-    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));
-    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));
-  }
-
   const badge = resolveShorthand(props.badge, {
     defaultProps: {
       size: getBadgeSize(size),

package/lib/components/Avatar/useAvatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n  } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Render the icon slot *only if* there aren't any initials to display.\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials?.children) {\n    initials = undefined;\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = baseId + '__active';\n        root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n  } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Don't render the initials slot if it's empty\n  if (!initials?.children) {\n    initials = undefined;\n  }\n\n  // Render the icon slot *only if* there aren't any initials or image to display\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials && (!image || imageHidden)) {\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = baseId + '__active';\n        root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"sourceRoot":"../src/"}

package/lib-amd/components/Avatar/useAvatar.js

@@ -19,6 +19,20 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "..
         var baseId = react_utilities_1.useId('avatar-');
         var root = react_utilities_1.getNativeElementProps('span', tslib_1.__assign(tslib_1.__assign({ role: 'img', id: baseId }, props), { ref: ref }), 
         /* excludedPropNames: */ ['name']);
+        var _g = React.useState(undefined), imageHidden = _g[0], setImageHidden = _g[1];
+        var image = react_utilities_1.resolveShorthand(props.image, {
+            defaultProps: {
+                alt: '',
+                role: 'presentation',
+                'aria-hidden': true,
+                hidden: imageHidden,
+            },
+        });
+        // Hide the image if it fails to load and restore it on a successful load
+        if (image) {
+            image.onError = react_utilities_1.mergeCallbacks(image.onError, function () { return setImageHidden(true); });
+            image.onLoad = react_utilities_1.mergeCallbacks(image.onLoad, function () { return setImageHidden(undefined); });
+        }
         // Resolve the initials slot, defaulted to getInitials.
         var initials = react_utilities_1.resolveShorthand(props.initials, {
             required: true,
@@ -27,10 +41,13 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "..
                 id: baseId + '__initials',
             },
         });
-        // Render the icon slot *only if* there aren't any initials to display.
-        var icon = undefined;
+        // Don't render the initials slot if it's empty
         if (!(initials === null || initials === void 0 ? void 0 : initials.children)) {
             initials = undefined;
+        }
+        // Render the icon slot *only if* there aren't any initials or image to display
+        var icon = undefined;
+        if (!initials && (!image || imageHidden)) {
             icon = react_utilities_1.resolveShorthand(props.icon, {
                 required: true,
                 defaultProps: {
@@ -39,20 +56,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "..
                 },
             });
         }
-        var _g = React.useState(undefined), imageHidden = _g[0], setImageHidden = _g[1];
-        var image = react_utilities_1.resolveShorthand(props.image, {
-            defaultProps: {
-                alt: '',
-                role: 'presentation',
-                'aria-hidden': true,
-                hidden: imageHidden,
-            },
-        });
-        // Hide the image if it fails to load and restore it on a successful load
-        if (image) {
-            image.onError = react_utilities_1.mergeCallbacks(image.onError, function () { return setImageHidden(true); });
-            image.onLoad = react_utilities_1.mergeCallbacks(image.onLoad, function () { return setImageHidden(undefined); });
-        }
         var badge = react_utilities_1.resolveShorthand(props.badge, {
             defaultProps: {
                 size: getBadgeSize(size),

package/lib-amd/components/Avatar/useAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n  } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Render the icon slot *only if* there aren't any initials to display.\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials?.children) {\n    initials = undefined;\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = baseId + '__active';\n        root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"]}
+{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n  } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Don't render the initials slot if it's empty\n  if (!initials?.children) {\n    initials = undefined;\n  }\n\n  // Render the icon slot *only if* there aren't any initials or image to display\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials && (!image || imageHidden)) {\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = baseId + '__active';\n        root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"]}

package/lib-commonjs/components/Avatar/useAvatar.js

@@ -58,7 +58,22 @@ const useAvatar_unstable = (props, ref) => {
     ref
   },
   /* excludedPropNames: */
-  ['name']); // Resolve the initials slot, defaulted to getInitials.
+  ['name']);
+  const [imageHidden, setImageHidden] = React.useState(undefined);
+  const image = react_utilities_1.resolveShorthand(props.image, {
+    defaultProps: {
+      alt: '',
+      role: 'presentation',
+      'aria-hidden': true,
+      hidden: imageHidden
+    }
+  }); // Hide the image if it fails to load and restore it on a successful load
+
+  if (image) {
+    image.onError = react_utilities_1.mergeCallbacks(image.onError, () => setImageHidden(true));
+    image.onLoad = react_utilities_1.mergeCallbacks(image.onLoad, () => setImageHidden(undefined));
+  } // Resolve the initials slot, defaulted to getInitials.
+
 
   let initials = react_utilities_1.resolveShorthand(props.initials, {
     required: true,
@@ -68,12 +83,16 @@ const useAvatar_unstable = (props, ref) => {
       }),
       id: baseId + '__initials'
     }
-  }); // Render the icon slot *only if* there aren't any initials to display.
-
-  let icon = undefined;
+  }); // Don't render the initials slot if it's empty
 
   if (!(initials === null || initials === void 0 ? void 0 : initials.children)) {
     initials = undefined;
+  } // Render the icon slot *only if* there aren't any initials or image to display
+
+
+  let icon = undefined;
+
+  if (!initials && (!image || imageHidden)) {
     icon = react_utilities_1.resolveShorthand(props.icon, {
       required: true,
       defaultProps: {
@@ -83,21 +102,6 @@ const useAvatar_unstable = (props, ref) => {
     });
   }
 
-  const [imageHidden, setImageHidden] = React.useState(undefined);
-  const image = react_utilities_1.resolveShorthand(props.image, {
-    defaultProps: {
-      alt: '',
-      role: 'presentation',
-      'aria-hidden': true,
-      hidden: imageHidden
-    }
-  }); // Hide the image if it fails to load and restore it on a successful load
-
-  if (image) {
-    image.onError = react_utilities_1.mergeCallbacks(image.onError, () => setImageHidden(true));
-    image.onLoad = react_utilities_1.mergeCallbacks(image.onLoad, () => setImageHidden(undefined));
-  }
-
   const badge = react_utilities_1.resolveShorthand(props.badge, {
     defaultProps: {
       size: getBadgeSize(size),

package/lib-commonjs/components/Avatar/useAvatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n  } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Render the icon slot *only if* there aren't any initials to display.\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials?.children) {\n    initials = undefined;\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = baseId + '__active';\n        root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n  } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Don't render the initials slot if it's empty\n  if (!initials?.children) {\n    initials = undefined;\n  }\n\n  // Render the icon slot *only if* there aren't any initials or image to display\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials && (!image || imageHidden)) {\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = baseId + '__active';\n        root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-avatar",
-  "version": "9.2.8",
+  "version": "9.2.9",
   "description": "React components for building Microsoft web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,15 +34,15 @@
     "es6-weak-map": "^2.0.2"
   },
   "dependencies": {
-    "@fluentui/react-badge": "^9.0.14",
-    "@fluentui/react-context-selector": "^9.1.2",
+    "@fluentui/react-badge": "^9.0.15",
+    "@fluentui/react-context-selector": "^9.1.3",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-popover": "^9.3.3",
-    "@fluentui/react-shared-contexts": "^9.1.2",
-    "@fluentui/react-tabster": "^9.3.2",
-    "@fluentui/react-theme": "^9.1.3",
-    "@fluentui/react-tooltip": "^9.1.3",
-    "@fluentui/react-utilities": "^9.2.2",
+    "@fluentui/react-popover": "^9.3.4",
+    "@fluentui/react-shared-contexts": "^9.1.3",
+    "@fluentui/react-tabster": "^9.3.3",
+    "@fluentui/react-theme": "^9.1.4",
+    "@fluentui/react-tooltip": "^9.1.4",
+    "@fluentui/react-utilities": "^9.3.0",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },