@fluentui/react-avatar 9.9.13 → 9.10.0

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @fluentui/react-avatar
 
-This log was last generated on Wed, 17 Dec 2025 18:06:04 GMT and should not be manually modified.
+This log was last generated on Thu, 12 Feb 2026 10:42:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.10.0)
+
+Thu, 12 Feb 2026 10:42:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.9.14..@fluentui/react-avatar_v9.10.0)
+
+### Minor changes
+
+- feat: add base hooks for Avatar component ([PR #35696](https://github.com/microsoft/fluentui/pull/35696) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-badge to v9.4.14 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-popover to v9.13.1 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-tooltip to v9.9.1 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+
+## [9.9.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.9.14)
+
+Thu, 22 Jan 2026 17:07:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.9.13..@fluentui/react-avatar_v9.9.14)
+
+### Patches
+
+- Bump @fluentui/react-badge to v9.4.13 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.14 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-popover to v9.13.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-tabster to v9.26.12 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-tooltip to v9.9.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+
 ## [9.9.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.9.13)
 
-Wed, 17 Dec 2025 18:06:04 GMT 
+Wed, 17 Dec 2025 18:10:11 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.9.12..@fluentui/react-avatar_v9.9.13)
 
 ### Patches

package/lib/Avatar.js

@@ -1 +1 @@
-export { Avatar, DEFAULT_STRINGS, avatarClassNames, renderAvatar_unstable, useAvatarStyles_unstable, useAvatar_unstable, useSizeStyles } from './components/Avatar/index';
+export { Avatar, DEFAULT_STRINGS, avatarClassNames, renderAvatar_unstable, useAvatarStyles_unstable, useAvatar_unstable, useAvatarBase_unstable, useSizeStyles } from './components/Avatar/index';

package/lib/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Avatar.ts"],"sourcesContent":["export type {\n  AvatarNamedColor,\n  AvatarProps,\n  AvatarShape,\n  AvatarSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSlots,\n  AvatarState,\n} from './components/Avatar/index';\nexport {\n  Avatar,\n  DEFAULT_STRINGS,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n  useSizeStyles,\n} from './components/Avatar/index';\n"],"names":["Avatar","DEFAULT_STRINGS","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useSizeStyles"],"mappings":"AAUA,SACEA,MAAM,EACNC,eAAe,EACfC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,aAAa,QACR,4BAA4B"}
+{"version":3,"sources":["../src/Avatar.ts"],"sourcesContent":["export type {\n  AvatarNamedColor,\n  AvatarBaseProps,\n  AvatarProps,\n  AvatarShape,\n  AvatarSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSlots,\n  AvatarBaseState,\n  AvatarState,\n} from './components/Avatar/index';\nexport {\n  Avatar,\n  DEFAULT_STRINGS,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n  useAvatarBase_unstable,\n  useSizeStyles,\n} from './components/Avatar/index';\n"],"names":["Avatar","DEFAULT_STRINGS","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useAvatarBase_unstable","useSizeStyles"],"mappings":"AAYA,SACEA,MAAM,EACNC,eAAe,EACfC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,EACtBC,aAAa,QACR,4BAA4B"}

package/lib/components/Avatar/Avatar.types.js

@@ -1,3 +1 @@
-/**
- * State used in rendering Avatar
- */ export { };
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Shape of the avatar\n */\nexport type AvatarShape = 'circular' | 'square';\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type 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/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name is used to determine the initials displayed when there is no image. It is also provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: AvatarShape;\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is needed, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSXElement;\n  };\n"],"names":[],"mappings":"AA6JA;;CAEC,GACD,WAWI"}
+{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Shape of the avatar\n */\nexport type AvatarShape = 'circular' | 'square';\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type 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/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name is used to determine the initials displayed when there is no image. It is also provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: AvatarShape;\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is needed, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\nexport type AvatarBaseProps = ComponentProps<Omit<AvatarSlots, 'badge'>> & Pick<AvatarProps, 'name'>;\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSXElement;\n  };\n\nexport type AvatarBaseState = ComponentState<Omit<AvatarSlots, 'badge'>> & Pick<AvatarState, 'activeAriaLabelElement'>;\n"],"names":[],"mappings":"AA+KA,WAAuH"}

package/lib/components/Avatar/index.js

@@ -1,4 +1,4 @@
 export { Avatar } from './Avatar';
 export { renderAvatar_unstable } from './renderAvatar';
-export { DEFAULT_STRINGS, useAvatar_unstable } from './useAvatar';
+export { DEFAULT_STRINGS, useAvatar_unstable, useAvatarBase_unstable } from './useAvatar';
 export { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Avatar/index.ts"],"sourcesContent":["export type {\n  AvatarNamedColor,\n  AvatarProps,\n  AvatarShape,\n  AvatarSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSlots,\n  AvatarState,\n} from './Avatar.types';\nexport { Avatar } from './Avatar';\nexport { renderAvatar_unstable } from './renderAvatar';\nexport { DEFAULT_STRINGS, useAvatar_unstable } from './useAvatar';\nexport { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';\n"],"names":["Avatar","renderAvatar_unstable","DEFAULT_STRINGS","useAvatar_unstable","avatarClassNames","useAvatarStyles_unstable","useSizeStyles"],"mappings":"AAUA,SAASA,MAAM,QAAQ,WAAW;AAClC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,cAAc;AAClE,SAASC,gBAAgB,EAAEC,wBAAwB,EAAEC,aAAa,QAAQ,2BAA2B"}
+{"version":3,"sources":["../src/components/Avatar/index.ts"],"sourcesContent":["export type {\n  AvatarNamedColor,\n  AvatarBaseProps,\n  AvatarProps,\n  AvatarShape,\n  AvatarSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSlots,\n  AvatarBaseState,\n  AvatarState,\n} from './Avatar.types';\nexport { Avatar } from './Avatar';\nexport { renderAvatar_unstable } from './renderAvatar';\nexport { DEFAULT_STRINGS, useAvatar_unstable, useAvatarBase_unstable } from './useAvatar';\nexport { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';\n"],"names":["Avatar","renderAvatar_unstable","DEFAULT_STRINGS","useAvatar_unstable","useAvatarBase_unstable","avatarClassNames","useAvatarStyles_unstable","useSizeStyles"],"mappings":"AAYA,SAASA,MAAM,QAAQ,WAAW;AAClC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,eAAe,EAAEC,kBAAkB,EAAEC,sBAAsB,QAAQ,cAAc;AAC1F,SAASC,gBAAgB,EAAEC,wBAAwB,EAAEC,aAAa,QAAQ,2BAA2B"}

package/lib/components/Avatar/useAvatar.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { getIntrinsicElementProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
+import { mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
 import { getInitials } from '../../utils/index';
 import { PersonRegular } from '@fluentui/react-icons';
 import { PresenceBadge } from '@fluentui/react-badge';
@@ -13,23 +13,96 @@ export const DEFAULT_STRINGS = {
 export const useAvatar_unstable = (props, ref)=>{
     const { dir } = useFluent();
     const { shape: contextShape, size: contextSize } = useAvatarContext();
-    const { name, size = contextSize !== null && contextSize !== void 0 ? contextSize : 32, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = props;
-    let { color = 'neutral' } = props;
+    const { size = contextSize !== null && contextSize !== void 0 ? contextSize : 32, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'circular', active = 'unset', activeAppearance = 'ring', idForColor, color: propColor = 'neutral', ...rest } = props;
+    const state = useAvatarBase_unstable(rest, ref);
+    var _ref;
     // Resolve 'colorful' to a specific color name
-    if (color === 'colorful') {
-        var _ref;
-        color = avatarColors[getHashCode((_ref = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _ref !== void 0 ? _ref : '') % avatarColors.length];
+    const color = propColor === 'colorful' ? avatarColors[getHashCode((_ref = idForColor !== null && idForColor !== void 0 ? idForColor : props.name) !== null && _ref !== void 0 ? _ref : '') % avatarColors.length] : propColor;
+    if (state.initials) {
+        var _state_initials;
+        state.initials = slot.optional(props.initials, {
+            renderByDefault: true,
+            defaultProps: {
+                children: getInitials(props.name, dir === 'rtl', {
+                    firstInitialOnly: size <= 16
+                }),
+                id: (_state_initials = state.initials) === null || _state_initials === void 0 ? void 0 : _state_initials.id
+            },
+            elementType: 'span'
+        });
+    }
+    if (state.icon) {
+        var _state_icon;
+        var _children;
+        (_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ React.createElement(PersonRegular, null);
+    }
+    const badge = slot.optional(props.badge, {
+        defaultProps: {
+            size: getBadgeSize(size),
+            id: state.root.id + '__badge'
+        },
+        elementType: PresenceBadge
+    });
+    let activeAriaLabelElement = state.activeAriaLabelElement;
+    // Enhance aria-label and/or aria-labelledby to include badge and active state
+    // Only process if aria attributes were not explicitly provided by the user
+    const userProvidedAriaLabel = props['aria-label'] !== undefined;
+    const userProvidedAriaLabelledby = props['aria-labelledby'] !== undefined;
+    if (!userProvidedAriaLabel && !userProvidedAriaLabelledby) {
+        if (props.name) {
+            if (badge) {
+                state.root['aria-labelledby'] = state.root.id + ' ' + badge.id;
+            }
+        } else if (state.initials) {
+            // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
+            state.root['aria-labelledby'] = state.initials.id + (badge ? ' ' + badge.id : '');
+            delete state.root['aria-label'];
+        }
+        // Add the active state to the aria label
+        if (active === 'active' || active === 'inactive') {
+            const activeText = DEFAULT_STRINGS[active];
+            if (state.root['aria-labelledby']) {
+                // If using aria-labelledby, render a hidden span and append it to the labelledby
+                const activeId = state.root.id + '__active';
+                state.root['aria-labelledby'] += ' ' + activeId;
+                activeAriaLabelElement = /*#__PURE__*/ React.createElement("span", {
+                    hidden: true,
+                    id: activeId
+                }, activeText);
+            } else if (state.root['aria-label']) {
+                // Otherwise, just append it to the aria-label
+                state.root['aria-label'] += ' ' + activeText;
+            }
+        }
     }
+    return {
+        ...state,
+        size,
+        shape,
+        active,
+        activeAppearance,
+        activeAriaLabelElement,
+        color,
+        badge,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        components: {
+            ...state.components,
+            badge: PresenceBadge
+        }
+    };
+};
+/**
+ * Base hook for Avatar component, manages state and structure common to all variants of Avatar
+ */ export const useAvatarBase_unstable = (props, ref)=>{
+    const { dir } = useFluent();
+    const { name, ...rest } = props;
     const baseId = useId('avatar-');
-    const root = slot.always(getIntrinsicElementProps('span', {
+    const root = slot.always({
         role: 'img',
         id: baseId,
-        // aria-label and/or aria-labelledby are resolved below
-        ...props,
-        ref
-    }, /* excludedPropNames: */ [
-        'name'
-    ]), {
+        ref,
+        ...rest
+    }, {
         elementType: 'span'
     });
     const [imageHidden, setImageHidden] = React.useState(undefined);
@@ -41,91 +114,62 @@ export const useAvatar_unstable = (props, ref)=>{
             hidden: imageHidden
         },
         elementType: 'img'
-    }); // Image shouldn't be rendered if its src is not set
+    });
+    // Image shouldn't be rendered if its src is not set
     if (!(image === null || image === void 0 ? void 0 : image.src)) {
         image = undefined;
-    } // Hide the image if it fails to load and restore it on a successful load
+    }
+    // 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.
+    }
+    // Resolve the initials slot, defaulted to getInitials
     let initials = slot.optional(props.initials, {
         renderByDefault: true,
         defaultProps: {
-            children: getInitials(name, dir === 'rtl', {
-                firstInitialOnly: size <= 16
-            }),
+            children: getInitials(name, dir === 'rtl'),
             id: baseId + '__initials'
         },
         elementType: 'span'
-    }); // Don't render the initials slot if it's empty
+    });
+    // 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
+    }
+    // Render the icon slot *only if* there aren't any initials or image to display
     let icon = undefined;
     if (!initials && (!image || imageHidden)) {
         icon = slot.optional(props.icon, {
             renderByDefault: true,
             defaultProps: {
-                children: /*#__PURE__*/ React.createElement(PersonRegular, null),
                 'aria-hidden': true
             },
             elementType: 'span'
         });
     }
-    const badge = slot.optional(props.badge, {
-        defaultProps: {
-            size: getBadgeSize(size),
-            id: baseId + '__badge'
-        },
-        elementType: PresenceBadge
-    });
-    let activeAriaLabelElement; // Resolve aria-label and/or aria-labelledby if not provided by the user
+    let activeAriaLabelElement;
+    // Resolve aria-label and/or aria-labelledby if not provided by the user
     if (!root['aria-label'] && !root['aria-labelledby']) {
         if (name) {
-            root['aria-label'] = name; // Include the badge in labelledby if it exists
-            if (badge) {
-                root['aria-labelledby'] = root.id + ' ' + badge.id;
-            }
+            root['aria-label'] = name;
         } else if (initials) {
             // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
-            root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');
-        } // Add the active state to the aria label
-        if (active === 'active' || active === 'inactive') {
-            const activeText = DEFAULT_STRINGS[active];
-            if (root['aria-labelledby']) {
-                // If using aria-labelledby, render a hidden span and append it to the labelledby
-                const activeId = baseId + '__active';
-                root['aria-labelledby'] += ' ' + activeId;
-                activeAriaLabelElement = /*#__PURE__*/ React.createElement("span", {
-                    hidden: true,
-                    id: activeId
-                }, activeText);
-            } else if (root['aria-label']) {
-                // Otherwise, just append it to the aria-label
-                root['aria-label'] += ' ' + activeText;
-            }
+            root['aria-labelledby'] = initials.id;
         }
     }
     return {
-        size,
-        shape,
-        active,
-        activeAppearance,
         activeAriaLabelElement,
-        color,
         components: {
             root: 'span',
             initials: 'span',
             icon: 'span',
-            image: 'img',
-            badge: PresenceBadge
+            image: 'img'
         },
         root,
         initials,
         icon,
-        image,
-        badge
+        image
     };
 };
 const getBadgeSize = (size)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Avatar/useAvatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, useId, slot } 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 { shape: contextShape, size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = contextShape ?? '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'] = slot.always(\n    getIntrinsicElementProps(\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    { elementType: 'span' },\n  );\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  let image: AvatarState['image'] = slot.optional(props.image, {\n    defaultProps: { alt: '', role: 'presentation', 'aria-hidden': true, hidden: imageHidden },\n    elementType: 'img',\n  }); // Image shouldn't be rendered if its src is not set\n  if (!image?.src) {\n    image = undefined;\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  } // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = slot.optional(props.initials, {\n    renderByDefault: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n    elementType: 'span',\n  }); // Don't render the initials slot if it's empty\n  if (!initials?.children) {\n    initials = undefined;\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 = slot.optional(props.icon, {\n      renderByDefault: true,\n      defaultProps: { children: <PersonRegular />, 'aria-hidden': true },\n      elementType: 'span',\n    });\n  }\n  const badge: AvatarState['badge'] = slot.optional(props.badge, {\n    defaultProps: { size: getBadgeSize(size), id: baseId + '__badge' },\n    elementType: PresenceBadge,\n  });\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement']; // 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; // 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    } // 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  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n    components: { root: 'span', initials: 'span', icon: 'span', image: 'img', badge: PresenceBadge },\n    root,\n    initials,\n    icon,\n    image,\n    badge,\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"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useId","slot","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","shape","contextShape","size","contextSize","name","activeAppearance","idForColor","color","avatarColors","getHashCode","length","baseId","root","always","role","id","elementType","imageHidden","setImageHidden","useState","undefined","image","optional","defaultProps","alt","hidden","src","onError","onLoad","initials","renderByDefault","children","firstInitialOnly","icon","badge","getBadgeSize","activeAriaLabelElement","activeText","activeId","span","components","str","hashCode","len","ch","charCodeAt","shift"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Avatar/useAvatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarBaseProps, AvatarBaseState, 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 { shape: contextShape, size: contextSize } = useAvatarContext();\n  const {\n    size = contextSize ?? (32 as const),\n    shape = contextShape ?? 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n    color: propColor = 'neutral',\n    ...rest\n  } = props;\n\n  const state = useAvatarBase_unstable(rest, ref);\n\n  // Resolve 'colorful' to a specific color name\n  const color: AvatarState['color'] =\n    propColor === 'colorful'\n      ? avatarColors[getHashCode(idForColor ?? props.name ?? '') % avatarColors.length]\n      : propColor;\n\n  if (state.initials) {\n    state.initials = slot.optional(props.initials, {\n      renderByDefault: true,\n      defaultProps: {\n        children: getInitials(props.name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n        id: state.initials?.id,\n      },\n      elementType: 'span',\n    });\n  }\n\n  if (state.icon) {\n    state.icon.children ??= <PersonRegular />;\n  }\n\n  const badge: AvatarState['badge'] = slot.optional(props.badge, {\n    defaultProps: { size: getBadgeSize(size), id: state.root.id + '__badge' },\n    elementType: PresenceBadge,\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'] = state.activeAriaLabelElement;\n\n  // Enhance aria-label and/or aria-labelledby to include badge and active state\n  // Only process if aria attributes were not explicitly provided by the user\n  const userProvidedAriaLabel = props['aria-label'] !== undefined;\n  const userProvidedAriaLabelledby = props['aria-labelledby'] !== undefined;\n\n  if (!userProvidedAriaLabel && !userProvidedAriaLabelledby) {\n    if (props.name) {\n      if (badge) {\n        state.root['aria-labelledby'] = state.root.id + ' ' + badge.id;\n      }\n    } else if (state.initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      state.root['aria-labelledby'] = state.initials.id + (badge ? ' ' + badge.id : '');\n      delete state.root['aria-label'];\n    }\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (state.root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = state.root.id + '__active';\n        state.root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (state.root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        state.root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    ...state,\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n    badge,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, badge: PresenceBadge },\n  };\n};\n\n/**\n * Base hook for Avatar component, manages state and structure common to all variants of Avatar\n */\nexport const useAvatarBase_unstable = (props: AvatarBaseProps, ref?: React.Ref<HTMLElement>): AvatarBaseState => {\n  const { dir } = useFluent();\n  const { name, ...rest } = props;\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarBaseState['root'] = slot.always(\n    {\n      role: 'img',\n      id: baseId,\n      ref,\n      ...rest,\n    },\n    { elementType: 'span' },\n  );\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n\n  let image: AvatarBaseState['image'] = slot.optional(props.image, {\n    defaultProps: { alt: '', role: 'presentation', 'aria-hidden': true, hidden: imageHidden },\n    elementType: 'img',\n  });\n\n  // Image shouldn't be rendered if its src is not set\n  if (!image?.src) {\n    image = undefined;\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: AvatarBaseState['initials'] = slot.optional(props.initials, {\n    renderByDefault: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl'),\n      id: baseId + '__initials',\n    },\n    elementType: 'span',\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: AvatarBaseState['icon'] = undefined;\n  if (!initials && (!image || imageHidden)) {\n    icon = slot.optional(props.icon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    });\n  }\n\n  let activeAriaLabelElement: AvatarBaseState['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    } 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;\n    }\n  }\n\n  return {\n    activeAriaLabelElement,\n    components: { root: 'span', initials: 'span', icon: 'span', image: 'img' },\n    root,\n    initials,\n    icon,\n    image,\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"],"names":["React","mergeCallbacks","useId","slot","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","shape","contextShape","size","contextSize","activeAppearance","idForColor","color","propColor","rest","state","useAvatarBase_unstable","avatarColors","getHashCode","name","length","initials","optional","renderByDefault","defaultProps","children","firstInitialOnly","id","elementType","icon","badge","getBadgeSize","root","activeAriaLabelElement","userProvidedAriaLabel","undefined","userProvidedAriaLabelledby","activeText","activeId","span","hidden","components","baseId","always","role","imageHidden","setImageHidden","useState","image","alt","src","onError","onLoad","str","hashCode","len","ch","charCodeAt","shift"],"mappings":"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"}

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js

@@ -18,7 +18,7 @@ import { useHasParentContext } from '@fluentui/react-context-selector';
     const groupSize = useAvatarGroupContext_unstable((ctx)=>ctx.size);
     const layout = useAvatarGroupContext_unstable((ctx)=>ctx.layout);
     // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.
-    const { style, className, ...avatarSlotProps } = props;
+    const { style, className, overflowLabel, ...avatarSlotProps } = props;
     const size = groupSize !== null && groupSize !== void 0 ? groupSize : defaultAvatarGroupSize;
     const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);
     if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {
@@ -50,7 +50,7 @@ import { useHasParentContext } from '@fluentui/react-context-selector';
             },
             elementType: Avatar
         }),
-        overflowLabel: slot.always(props.overflowLabel, {
+        overflowLabel: slot.always(overflowLabel, {
             defaultProps: {
                 // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.
                 'aria-hidden': true,

package/lib/components/AvatarGroupItem/useAvatarGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { slot } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n  props: AvatarGroupItemProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n  const { style, className, ...avatarSlotProps } = props;\n  const size = groupSize ?? defaultAvatarGroupSize;\n  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n    // eslint-disable-next-line no-console\n    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n  }\n\n  return {\n    isOverflowItem: groupIsOverflow,\n    layout,\n    size,\n    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: slot.always(props.root, {\n      defaultProps: {\n        style,\n        className,\n      },\n      elementType: groupIsOverflow ? 'li' : 'div',\n    }),\n    avatar: slot.always(props.avatar, {\n      defaultProps: {\n        ref,\n        size,\n        color: 'colorful',\n        ...avatarSlotProps,\n      },\n      elementType: Avatar,\n    }),\n    overflowLabel: slot.always(props.overflowLabel, {\n      defaultProps: {\n        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n        'aria-hidden': true,\n        children: props.name,\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","slot","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","overflowLabel","always","defaultProps","elementType","color","children","name"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ,oCAAoC;AACvG,SAASC,sBAAsB,QAAQ,gCAAgC;AACvE,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,mBAAmB,QAAQ,mCAAmC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,kBAAkBP,+BAA+BQ,CAAAA,MAAOA,IAAIC,UAAU;IAC5E,MAAMC,YAAYV,+BAA+BQ,CAAAA,MAAOA,IAAIG,IAAI;IAChE,MAAMC,SAASZ,+BAA+BQ,CAAAA,MAAOA,IAAII,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,iBAAiB,GAAGV;IACjD,MAAMM,OAAOD,sBAAAA,uBAAAA,YAAaT;IAC1B,MAAMe,wBAAwBb,oBAAoBJ;IAElD,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBf;QAChBK;QACAD;QACAY,YAAY;YACVC,MAAMjB,kBAAkB,OAAO;YAC/BkB,QAAQ3B;YACR4B,eAAe;QACjB;QACAF,MAAMtB,KAAKyB,MAAM,CAACtB,MAAMmB,IAAI,EAAE;YAC5BI,cAAc;gBACZf;gBACAC;YACF;YACAe,aAAatB,kBAAkB,OAAO;QACxC;QACAkB,QAAQvB,KAAKyB,MAAM,CAACtB,MAAMoB,MAAM,EAAE;YAChCG,cAAc;gBACZtB;gBACAK;gBACAmB,OAAO;gBACP,GAAGf,eAAe;YACpB;YACAc,aAAa/B;QACf;QACA4B,eAAexB,KAAKyB,MAAM,CAACtB,MAAMqB,aAAa,EAAE;YAC9CE,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfG,UAAU1B,MAAM2B,IAAI;YACtB;YACAH,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { slot } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n  props: AvatarGroupItemProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n  const { style, className, overflowLabel, ...avatarSlotProps } = props;\n  const size = groupSize ?? defaultAvatarGroupSize;\n  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n    // eslint-disable-next-line no-console\n    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n  }\n\n  return {\n    isOverflowItem: groupIsOverflow,\n    layout,\n    size,\n    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: slot.always(props.root, {\n      defaultProps: {\n        style,\n        className,\n      },\n      elementType: groupIsOverflow ? 'li' : 'div',\n    }),\n    avatar: slot.always(props.avatar, {\n      defaultProps: {\n        ref,\n        size,\n        color: 'colorful',\n        ...avatarSlotProps,\n      },\n      elementType: Avatar,\n    }),\n    overflowLabel: slot.always(overflowLabel, {\n      defaultProps: {\n        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n        'aria-hidden': true,\n        children: props.name,\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","slot","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","overflowLabel","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","always","defaultProps","elementType","color","children","name"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,kBAAkB,EAAEC,8BAA8B,QAAQ,oCAAoC;AACvG,SAASC,sBAAsB,QAAQ,gCAAgC;AACvE,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,mBAAmB,QAAQ,mCAAmC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,kBAAkBP,+BAA+BQ,CAAAA,MAAOA,IAAIC,UAAU;IAC5E,MAAMC,YAAYV,+BAA+BQ,CAAAA,MAAOA,IAAIG,IAAI;IAChE,MAAMC,SAASZ,+BAA+BQ,CAAAA,MAAOA,IAAII,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,aAAa,EAAE,GAAGC,iBAAiB,GAAGX;IAChE,MAAMM,OAAOD,sBAAAA,uBAAAA,YAAaT;IAC1B,MAAMgB,wBAAwBd,oBAAoBJ;IAElD,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBhB;QAChBK;QACAD;QACAa,YAAY;YACVC,MAAMlB,kBAAkB,OAAO;YAC/BmB,QAAQ5B;YACRiB,eAAe;QACjB;QACAU,MAAMvB,KAAKyB,MAAM,CAACtB,MAAMoB,IAAI,EAAE;YAC5BG,cAAc;gBACZf;gBACAC;YACF;YACAe,aAAatB,kBAAkB,OAAO;QACxC;QACAmB,QAAQxB,KAAKyB,MAAM,CAACtB,MAAMqB,MAAM,EAAE;YAChCE,cAAc;gBACZtB;gBACAK;gBACAmB,OAAO;gBACP,GAAGd,eAAe;YACpB;YACAa,aAAa/B;QACf;QACAiB,eAAeb,KAAKyB,MAAM,CAACZ,eAAe;YACxCa,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfG,UAAU1B,MAAM2B,IAAI;YACtB;YACAH,aAAa;QACf;IACF;AACF,EAAE"}

package/lib/index.js

@@ -4,3 +4,6 @@ export { AvatarGroup, avatarGroupClassNames, renderAvatarGroup_unstable, useAvat
 export { AvatarGroupItem, avatarGroupItemClassNames, renderAvatarGroupItem_unstable, useAvatarGroupItemStyles_unstable, useAvatarGroupItem_unstable } from './AvatarGroupItem';
 export { AvatarGroupPopover, avatarGroupPopoverClassNames, renderAvatarGroupPopover_unstable, useAvatarGroupPopover_unstable, useAvatarGroupPopoverContextValues_unstable, useAvatarGroupPopoverStyles_unstable } from './AvatarGroupPopover';
 export { AvatarContextProvider, AvatarGroupProvider, useAvatarContext, useAvatarGroupContext_unstable } from './contexts/index';
+ // Experimental APIs, will be undocumented in experimental branch
+ // export { useAvatarBase_unstable } from './Avatar';
+ // export type { AvatarBaseProps, AvatarBaseState } from './Avatar';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Avatar,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\nexport type {\n  AvatarNamedColor,\n  AvatarProps,\n  AvatarSlots,\n  AvatarState,\n  AvatarShape,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSize,\n} from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  renderAvatarGroup_unstable,\n  useAvatarGroupContextValues,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type {\n  AvatarGroupProps,\n  AvatarGroupSlots,\n  AvatarGroupState,\n  AvatarGroupContextValue,\n  AvatarGroupContextValues,\n} from './AvatarGroup';\nexport {\n  AvatarGroupItem,\n  avatarGroupItemClassNames,\n  renderAvatarGroupItem_unstable,\n  useAvatarGroupItemStyles_unstable,\n  useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\nexport {\n  AvatarGroupPopover,\n  avatarGroupPopoverClassNames,\n  renderAvatarGroupPopover_unstable,\n  useAvatarGroupPopover_unstable,\n  useAvatarGroupPopoverContextValues_unstable,\n  useAvatarGroupPopoverStyles_unstable,\n} from './AvatarGroupPopover';\nexport type { AvatarGroupPopoverProps, AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover';\nexport {\n  AvatarContextProvider,\n  AvatarGroupProvider,\n  useAvatarContext,\n  useAvatarGroupContext_unstable,\n} from './contexts/index';\nexport type { AvatarContextValue } from './contexts/index';\n"],"names":["Avatar","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","getInitials","partitionAvatarGroupItems","AvatarGroup","avatarGroupClassNames","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","AvatarContextProvider","AvatarGroupProvider","useAvatarContext","useAvatarGroupContext_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;AAWlB,SAASC,WAAW,EAAEC,yBAAyB,QAAQ,gBAAgB;AAEvE,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAQvB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAE3B,SACEC,kBAAkB,EAClBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,8BAA8B,EAC9BC,2CAA2C,EAC3CC,oCAAoC,QAC/B,uBAAuB;AAE9B,SACEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,8BAA8B,QACzB,mBAAmB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Avatar,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\nexport type {\n  AvatarNamedColor,\n  AvatarProps,\n  AvatarSlots,\n  AvatarState,\n  AvatarShape,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSize,\n} from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  renderAvatarGroup_unstable,\n  useAvatarGroupContextValues,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type {\n  AvatarGroupProps,\n  AvatarGroupSlots,\n  AvatarGroupState,\n  AvatarGroupContextValue,\n  AvatarGroupContextValues,\n} from './AvatarGroup';\nexport {\n  AvatarGroupItem,\n  avatarGroupItemClassNames,\n  renderAvatarGroupItem_unstable,\n  useAvatarGroupItemStyles_unstable,\n  useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\nexport {\n  AvatarGroupPopover,\n  avatarGroupPopoverClassNames,\n  renderAvatarGroupPopover_unstable,\n  useAvatarGroupPopover_unstable,\n  useAvatarGroupPopoverContextValues_unstable,\n  useAvatarGroupPopoverStyles_unstable,\n} from './AvatarGroupPopover';\nexport type { AvatarGroupPopoverProps, AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover';\nexport {\n  AvatarContextProvider,\n  AvatarGroupProvider,\n  useAvatarContext,\n  useAvatarGroupContext_unstable,\n} from './contexts/index';\nexport type { AvatarContextValue } from './contexts/index';\n\n// Experimental APIs, will be undocumented in experimental branch\n// export { useAvatarBase_unstable } from './Avatar';\n// export type { AvatarBaseProps, AvatarBaseState } from './Avatar';\n"],"names":["Avatar","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","getInitials","partitionAvatarGroupItems","AvatarGroup","avatarGroupClassNames","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","AvatarContextProvider","AvatarGroupProvider","useAvatarContext","useAvatarGroupContext_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;AAWlB,SAASC,WAAW,EAAEC,yBAAyB,QAAQ,gBAAgB;AAEvE,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAQvB,SACEC,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,oBAAoB;AAE3B,SACEC,kBAAkB,EAClBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,8BAA8B,EAC9BC,2CAA2C,EAC3CC,oCAAoC,QAC/B,uBAAuB;AAE9B,SACEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,8BAA8B,QACzB,mBAAmB;CAG1B,iEAAiE;CACjE,qDAAqD;CACrD,oEAAoE"}

package/lib-commonjs/Avatar.js

@@ -21,6 +21,9 @@ _export(exports, {
     renderAvatar_unstable: function() {
         return _index.renderAvatar_unstable;
     },
+    useAvatarBase_unstable: function() {
+        return _index.useAvatarBase_unstable;
+    },
     useAvatarStyles_unstable: function() {
         return _index.useAvatarStyles_unstable;
     },

package/lib-commonjs/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Avatar.ts"],"sourcesContent":["export type {\n  AvatarNamedColor,\n  AvatarProps,\n  AvatarShape,\n  AvatarSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSlots,\n  AvatarState,\n} from './components/Avatar/index';\nexport {\n  Avatar,\n  DEFAULT_STRINGS,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n  useSizeStyles,\n} from './components/Avatar/index';\n"],"names":["Avatar","DEFAULT_STRINGS","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useSizeStyles"],"mappings":";;;;;;;;;;;;eAWEA,aAAM;;;eACNC,sBAAe;;;eACfC,uBAAgB;;;eAChBC,4BAAqB;;;eACrBC,+BAAwB;;;eACxBC,yBAAkB;;;eAClBC,oBAAa;;;uBACR,4BAA4B"}
+{"version":3,"sources":["../src/Avatar.ts"],"sourcesContent":["export type {\n  AvatarNamedColor,\n  AvatarBaseProps,\n  AvatarProps,\n  AvatarShape,\n  AvatarSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSlots,\n  AvatarBaseState,\n  AvatarState,\n} from './components/Avatar/index';\nexport {\n  Avatar,\n  DEFAULT_STRINGS,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n  useAvatarBase_unstable,\n  useSizeStyles,\n} from './components/Avatar/index';\n"],"names":["Avatar","DEFAULT_STRINGS","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","useAvatarBase_unstable","useSizeStyles"],"mappings":";;;;;;;;;;;IAaEA;4BAAM;;;eACNC,sBAAe;;;eACfC,uBAAgB;;;eAChBC,4BAAqB;;0BAGC;eAAtBG;;;eAFAF,+BAAwB;;;eACxBC,yBAAkB;;;eAElBE,oBAAa;;;uBACR,4BAA4B"}

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

@@ -1,6 +1,4 @@
-/**
- * State used in rendering Avatar
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Shape of the avatar\n */\nexport type AvatarShape = 'circular' | 'square';\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type 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/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name is used to determine the initials displayed when there is no image. It is also provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: AvatarShape;\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is needed, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSXElement;\n  };\n"],"names":[],"mappings":"AA6JA;;CAEC,GACD,WAWI"}
+{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Shape of the avatar\n */\nexport type AvatarShape = 'circular' | 'square';\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type 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/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name is used to determine the initials displayed when there is no image. It is also provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: AvatarShape;\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is needed, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSize;\n};\n\nexport type AvatarBaseProps = ComponentProps<Omit<AvatarSlots, 'badge'>> & Pick<AvatarProps, 'name'>;\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n\n    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSXElement;\n  };\n\nexport type AvatarBaseState = ComponentState<Omit<AvatarSlots, 'badge'>> & Pick<AvatarState, 'activeAriaLabelElement'>;\n"],"names":[],"mappings":""}

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

@@ -21,6 +21,9 @@ _export(exports, {
     renderAvatar_unstable: function() {
         return _renderAvatar.renderAvatar_unstable;
     },
+    useAvatarBase_unstable: function() {
+        return _useAvatar.useAvatarBase_unstable;
+    },
     useAvatarStyles_unstable: function() {
         return _useAvatarStylesstyles.useAvatarStyles_unstable;
     },

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Avatar/index.ts"],"sourcesContent":["export type {\n  AvatarNamedColor,\n  AvatarProps,\n  AvatarShape,\n  AvatarSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSlots,\n  AvatarState,\n} from './Avatar.types';\nexport { Avatar } from './Avatar';\nexport { renderAvatar_unstable } from './renderAvatar';\nexport { DEFAULT_STRINGS, useAvatar_unstable } from './useAvatar';\nexport { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';\n"],"names":["Avatar","renderAvatar_unstable","DEFAULT_STRINGS","useAvatar_unstable","avatarClassNames","useAvatarStyles_unstable","useSizeStyles"],"mappings":";;;;;;;;;;;;eAUSA,cAAM;;;eAENE,0BAAe;;;eACfE,uCAAgB;;;eAFhBH,mCAAqB;;;eAEHI,+CAAwB;;;eADzBF,6BAAkB;;;eACSG,oCAAa;;;wBAH3C,WAAW;8BACI,iBAAiB;2BACH,cAAc;uCACQ,2BAA2B"}
+{"version":3,"sources":["../src/components/Avatar/index.ts"],"sourcesContent":["export type {\n  AvatarNamedColor,\n  AvatarBaseProps,\n  AvatarProps,\n  AvatarShape,\n  AvatarSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSlots,\n  AvatarBaseState,\n  AvatarState,\n} from './Avatar.types';\nexport { Avatar } from './Avatar';\nexport { renderAvatar_unstable } from './renderAvatar';\nexport { DEFAULT_STRINGS, useAvatar_unstable, useAvatarBase_unstable } from './useAvatar';\nexport { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';\n"],"names":["Avatar","renderAvatar_unstable","DEFAULT_STRINGS","useAvatar_unstable","useAvatarBase_unstable","avatarClassNames","useAvatarStyles_unstable","useSizeStyles"],"mappings":";;;;;;;;;;;IAYSA;6BAAM;;;eAENE,0BAAe;;IACfG;sDAAgB;;;eAFhBJ,mCAAqB;;0BACsC;eAAtBG;;;eACnBE,+CAAwB;;;eADzBH,6BAAkB;;;eACSI,oCAAa;;;wBAH3C,WAAW;8BACI,iBAAiB;2BACqB,cAAc;uCAChB,2BAA2B"}

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

@@ -13,6 +13,9 @@ _export(exports, {
     DEFAULT_STRINGS: function() {
         return DEFAULT_STRINGS;
     },
+    useAvatarBase_unstable: function() {
+        return useAvatarBase_unstable;
+    },
     useAvatar_unstable: function() {
         return useAvatar_unstable;
     }
@@ -32,23 +35,94 @@ const DEFAULT_STRINGS = {
 const useAvatar_unstable = (props, ref)=>{
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
     const { shape: contextShape, size: contextSize } = (0, _AvatarContext.useAvatarContext)();
-    const { name, size = contextSize !== null && contextSize !== void 0 ? contextSize : 32, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = props;
-    let { color = 'neutral' } = props;
+    const { size = contextSize !== null && contextSize !== void 0 ? contextSize : 32, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'circular', active = 'unset', activeAppearance = 'ring', idForColor, color: propColor = 'neutral', ...rest } = props;
+    const state = useAvatarBase_unstable(rest, ref);
+    var _ref;
     // Resolve 'colorful' to a specific color name
-    if (color === 'colorful') {
-        var _ref;
-        color = avatarColors[getHashCode((_ref = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _ref !== void 0 ? _ref : '') % avatarColors.length];
+    const color = propColor === 'colorful' ? avatarColors[getHashCode((_ref = idForColor !== null && idForColor !== void 0 ? idForColor : props.name) !== null && _ref !== void 0 ? _ref : '') % avatarColors.length] : propColor;
+    if (state.initials) {
+        var _state_initials;
+        state.initials = _reactutilities.slot.optional(props.initials, {
+            renderByDefault: true,
+            defaultProps: {
+                children: (0, _index.getInitials)(props.name, dir === 'rtl', {
+                    firstInitialOnly: size <= 16
+                }),
+                id: (_state_initials = state.initials) === null || _state_initials === void 0 ? void 0 : _state_initials.id
+            },
+            elementType: 'span'
+        });
+    }
+    if (state.icon) {
+        var _state_icon;
+        var _children;
+        (_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ _react.createElement(_reacticons.PersonRegular, null);
     }
+    const badge = _reactutilities.slot.optional(props.badge, {
+        defaultProps: {
+            size: getBadgeSize(size),
+            id: state.root.id + '__badge'
+        },
+        elementType: _reactbadge.PresenceBadge
+    });
+    let activeAriaLabelElement = state.activeAriaLabelElement;
+    // Enhance aria-label and/or aria-labelledby to include badge and active state
+    // Only process if aria attributes were not explicitly provided by the user
+    const userProvidedAriaLabel = props['aria-label'] !== undefined;
+    const userProvidedAriaLabelledby = props['aria-labelledby'] !== undefined;
+    if (!userProvidedAriaLabel && !userProvidedAriaLabelledby) {
+        if (props.name) {
+            if (badge) {
+                state.root['aria-labelledby'] = state.root.id + ' ' + badge.id;
+            }
+        } else if (state.initials) {
+            // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
+            state.root['aria-labelledby'] = state.initials.id + (badge ? ' ' + badge.id : '');
+            delete state.root['aria-label'];
+        }
+        // Add the active state to the aria label
+        if (active === 'active' || active === 'inactive') {
+            const activeText = DEFAULT_STRINGS[active];
+            if (state.root['aria-labelledby']) {
+                // If using aria-labelledby, render a hidden span and append it to the labelledby
+                const activeId = state.root.id + '__active';
+                state.root['aria-labelledby'] += ' ' + activeId;
+                activeAriaLabelElement = /*#__PURE__*/ _react.createElement("span", {
+                    hidden: true,
+                    id: activeId
+                }, activeText);
+            } else if (state.root['aria-label']) {
+                // Otherwise, just append it to the aria-label
+                state.root['aria-label'] += ' ' + activeText;
+            }
+        }
+    }
+    return {
+        ...state,
+        size,
+        shape,
+        active,
+        activeAppearance,
+        activeAriaLabelElement,
+        color,
+        badge,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        components: {
+            ...state.components,
+            badge: _reactbadge.PresenceBadge
+        }
+    };
+};
+const useAvatarBase_unstable = (props, ref)=>{
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const { name, ...rest } = props;
     const baseId = (0, _reactutilities.useId)('avatar-');
-    const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('span', {
+    const root = _reactutilities.slot.always({
         role: 'img',
         id: baseId,
-        // aria-label and/or aria-labelledby are resolved below
-        ...props,
-        ref
-    }, /* excludedPropNames: */ [
-        'name'
-    ]), {
+        ref,
+        ...rest
+    }, {
         elementType: 'span'
     });
     const [imageHidden, setImageHidden] = _react.useState(undefined);
@@ -60,91 +134,62 @@ const useAvatar_unstable = (props, ref)=>{
             hidden: imageHidden
         },
         elementType: 'img'
-    }); // Image shouldn't be rendered if its src is not set
+    });
+    // Image shouldn't be rendered if its src is not set
     if (!(image === null || image === void 0 ? void 0 : image.src)) {
         image = undefined;
-    } // Hide the image if it fails to load and restore it on a successful load
+    }
+    // Hide the image if it fails to load and restore it on a successful load
     if (image) {
         image.onError = (0, _reactutilities.mergeCallbacks)(image.onError, ()=>setImageHidden(true));
         image.onLoad = (0, _reactutilities.mergeCallbacks)(image.onLoad, ()=>setImageHidden(undefined));
-    } // Resolve the initials slot, defaulted to getInitials.
+    }
+    // Resolve the initials slot, defaulted to getInitials
     let initials = _reactutilities.slot.optional(props.initials, {
         renderByDefault: true,
         defaultProps: {
-            children: (0, _index.getInitials)(name, dir === 'rtl', {
-                firstInitialOnly: size <= 16
-            }),
+            children: (0, _index.getInitials)(name, dir === 'rtl'),
             id: baseId + '__initials'
         },
         elementType: 'span'
-    }); // Don't render the initials slot if it's empty
+    });
+    // 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
+    }
+    // Render the icon slot *only if* there aren't any initials or image to display
     let icon = undefined;
     if (!initials && (!image || imageHidden)) {
         icon = _reactutilities.slot.optional(props.icon, {
             renderByDefault: true,
             defaultProps: {
-                children: /*#__PURE__*/ _react.createElement(_reacticons.PersonRegular, null),
                 'aria-hidden': true
             },
             elementType: 'span'
         });
     }
-    const badge = _reactutilities.slot.optional(props.badge, {
-        defaultProps: {
-            size: getBadgeSize(size),
-            id: baseId + '__badge'
-        },
-        elementType: _reactbadge.PresenceBadge
-    });
-    let activeAriaLabelElement; // Resolve aria-label and/or aria-labelledby if not provided by the user
+    let activeAriaLabelElement;
+    // Resolve aria-label and/or aria-labelledby if not provided by the user
     if (!root['aria-label'] && !root['aria-labelledby']) {
         if (name) {
-            root['aria-label'] = name; // Include the badge in labelledby if it exists
-            if (badge) {
-                root['aria-labelledby'] = root.id + ' ' + badge.id;
-            }
+            root['aria-label'] = name;
         } else if (initials) {
             // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
-            root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');
-        } // Add the active state to the aria label
-        if (active === 'active' || active === 'inactive') {
-            const activeText = DEFAULT_STRINGS[active];
-            if (root['aria-labelledby']) {
-                // If using aria-labelledby, render a hidden span and append it to the labelledby
-                const activeId = baseId + '__active';
-                root['aria-labelledby'] += ' ' + activeId;
-                activeAriaLabelElement = /*#__PURE__*/ _react.createElement("span", {
-                    hidden: true,
-                    id: activeId
-                }, activeText);
-            } else if (root['aria-label']) {
-                // Otherwise, just append it to the aria-label
-                root['aria-label'] += ' ' + activeText;
-            }
+            root['aria-labelledby'] = initials.id;
         }
     }
     return {
-        size,
-        shape,
-        active,
-        activeAppearance,
         activeAriaLabelElement,
-        color,
         components: {
             root: 'span',
             initials: 'span',
             icon: 'span',
-            image: 'img',
-            badge: _reactbadge.PresenceBadge
+            image: 'img'
         },
         root,
         initials,
         icon,
-        image,
-        badge
+        image
     };
 };
 const getBadgeSize = (size)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Avatar/useAvatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, useId, slot } 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 { shape: contextShape, size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = contextShape ?? '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'] = slot.always(\n    getIntrinsicElementProps(\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    { elementType: 'span' },\n  );\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  let image: AvatarState['image'] = slot.optional(props.image, {\n    defaultProps: { alt: '', role: 'presentation', 'aria-hidden': true, hidden: imageHidden },\n    elementType: 'img',\n  }); // Image shouldn't be rendered if its src is not set\n  if (!image?.src) {\n    image = undefined;\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  } // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = slot.optional(props.initials, {\n    renderByDefault: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n    elementType: 'span',\n  }); // Don't render the initials slot if it's empty\n  if (!initials?.children) {\n    initials = undefined;\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 = slot.optional(props.icon, {\n      renderByDefault: true,\n      defaultProps: { children: <PersonRegular />, 'aria-hidden': true },\n      elementType: 'span',\n    });\n  }\n  const badge: AvatarState['badge'] = slot.optional(props.badge, {\n    defaultProps: { size: getBadgeSize(size), id: baseId + '__badge' },\n    elementType: PresenceBadge,\n  });\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement']; // 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; // 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    } // 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  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n    components: { root: 'span', initials: 'span', icon: 'span', image: 'img', badge: PresenceBadge },\n    root,\n    initials,\n    icon,\n    image,\n    badge,\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"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useId","slot","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","shape","contextShape","size","contextSize","name","activeAppearance","idForColor","color","avatarColors","getHashCode","length","baseId","root","always","role","id","elementType","imageHidden","setImageHidden","useState","undefined","image","optional","defaultProps","alt","hidden","src","onError","onLoad","initials","renderByDefault","children","firstInitialOnly","icon","badge","getBadgeSize","activeAriaLabelElement","activeText","activeId","span","components","str","hashCode","len","ch","charCodeAt","shift"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Avatar/useAvatar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarBaseProps, AvatarBaseState, 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 { shape: contextShape, size: contextSize } = useAvatarContext();\n  const {\n    size = contextSize ?? (32 as const),\n    shape = contextShape ?? 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n    color: propColor = 'neutral',\n    ...rest\n  } = props;\n\n  const state = useAvatarBase_unstable(rest, ref);\n\n  // Resolve 'colorful' to a specific color name\n  const color: AvatarState['color'] =\n    propColor === 'colorful'\n      ? avatarColors[getHashCode(idForColor ?? props.name ?? '') % avatarColors.length]\n      : propColor;\n\n  if (state.initials) {\n    state.initials = slot.optional(props.initials, {\n      renderByDefault: true,\n      defaultProps: {\n        children: getInitials(props.name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n        id: state.initials?.id,\n      },\n      elementType: 'span',\n    });\n  }\n\n  if (state.icon) {\n    state.icon.children ??= <PersonRegular />;\n  }\n\n  const badge: AvatarState['badge'] = slot.optional(props.badge, {\n    defaultProps: { size: getBadgeSize(size), id: state.root.id + '__badge' },\n    elementType: PresenceBadge,\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'] = state.activeAriaLabelElement;\n\n  // Enhance aria-label and/or aria-labelledby to include badge and active state\n  // Only process if aria attributes were not explicitly provided by the user\n  const userProvidedAriaLabel = props['aria-label'] !== undefined;\n  const userProvidedAriaLabelledby = props['aria-labelledby'] !== undefined;\n\n  if (!userProvidedAriaLabel && !userProvidedAriaLabelledby) {\n    if (props.name) {\n      if (badge) {\n        state.root['aria-labelledby'] = state.root.id + ' ' + badge.id;\n      }\n    } else if (state.initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      state.root['aria-labelledby'] = state.initials.id + (badge ? ' ' + badge.id : '');\n      delete state.root['aria-label'];\n    }\n    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (state.root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = state.root.id + '__active';\n        state.root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (state.root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        state.root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    ...state,\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\n    color,\n    badge,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, badge: PresenceBadge },\n  };\n};\n\n/**\n * Base hook for Avatar component, manages state and structure common to all variants of Avatar\n */\nexport const useAvatarBase_unstable = (props: AvatarBaseProps, ref?: React.Ref<HTMLElement>): AvatarBaseState => {\n  const { dir } = useFluent();\n  const { name, ...rest } = props;\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarBaseState['root'] = slot.always(\n    {\n      role: 'img',\n      id: baseId,\n      ref,\n      ...rest,\n    },\n    { elementType: 'span' },\n  );\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n\n  let image: AvatarBaseState['image'] = slot.optional(props.image, {\n    defaultProps: { alt: '', role: 'presentation', 'aria-hidden': true, hidden: imageHidden },\n    elementType: 'img',\n  });\n\n  // Image shouldn't be rendered if its src is not set\n  if (!image?.src) {\n    image = undefined;\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: AvatarBaseState['initials'] = slot.optional(props.initials, {\n    renderByDefault: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl'),\n      id: baseId + '__initials',\n    },\n    elementType: 'span',\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: AvatarBaseState['icon'] = undefined;\n  if (!initials && (!image || imageHidden)) {\n    icon = slot.optional(props.icon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'span',\n    });\n  }\n\n  let activeAriaLabelElement: AvatarBaseState['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    } 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;\n    }\n  }\n\n  return {\n    activeAriaLabelElement,\n    components: { root: 'span', initials: 'span', icon: 'span', image: 'img' },\n    root,\n    initials,\n    icon,\n    image,\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"],"names":["React","mergeCallbacks","useId","slot","getInitials","PersonRegular","PresenceBadge","useFluent_unstable","useFluent","useAvatarContext","DEFAULT_STRINGS","active","inactive","useAvatar_unstable","props","ref","dir","shape","contextShape","size","contextSize","activeAppearance","idForColor","color","propColor","rest","state","useAvatarBase_unstable","avatarColors","getHashCode","name","length","initials","optional","renderByDefault","defaultProps","children","firstInitialOnly","id","elementType","icon","badge","getBadgeSize","root","activeAriaLabelElement","userProvidedAriaLabel","undefined","userProvidedAriaLabelledby","activeText","activeId","span","hidden","components","baseId","always","role","imageHidden","setImageHidden","useState","image","alt","src","onError","onLoad","str","hashCode","len","ch","charCodeAt","shift"],"mappings":"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"}

package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js

@@ -21,7 +21,7 @@ const useAvatarGroupItem_unstable = (props, ref)=>{
     const groupSize = (0, _AvatarGroupContext.useAvatarGroupContext_unstable)((ctx)=>ctx.size);
     const layout = (0, _AvatarGroupContext.useAvatarGroupContext_unstable)((ctx)=>ctx.layout);
     // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.
-    const { style, className, ...avatarSlotProps } = props;
+    const { style, className, overflowLabel, ...avatarSlotProps } = props;
     const size = groupSize !== null && groupSize !== void 0 ? groupSize : _useAvatarGroup.defaultAvatarGroupSize;
     const hasAvatarGroupContext = (0, _reactcontextselector.useHasParentContext)(_AvatarGroupContext.AvatarGroupContext);
     if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {
@@ -53,7 +53,7 @@ const useAvatarGroupItem_unstable = (props, ref)=>{
             },
             elementType: _Avatar.Avatar
         }),
-        overflowLabel: _reactutilities.slot.always(props.overflowLabel, {
+        overflowLabel: _reactutilities.slot.always(overflowLabel, {
             defaultProps: {
                 // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.
                 'aria-hidden': true,

package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { slot } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n  props: AvatarGroupItemProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n  const { style, className, ...avatarSlotProps } = props;\n  const size = groupSize ?? defaultAvatarGroupSize;\n  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n    // eslint-disable-next-line no-console\n    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n  }\n\n  return {\n    isOverflowItem: groupIsOverflow,\n    layout,\n    size,\n    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: slot.always(props.root, {\n      defaultProps: {\n        style,\n        className,\n      },\n      elementType: groupIsOverflow ? 'li' : 'div',\n    }),\n    avatar: slot.always(props.avatar, {\n      defaultProps: {\n        ref,\n        size,\n        color: 'colorful',\n        ...avatarSlotProps,\n      },\n      elementType: Avatar,\n    }),\n    overflowLabel: slot.always(props.overflowLabel, {\n      defaultProps: {\n        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n        'aria-hidden': true,\n        children: props.name,\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","slot","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","overflowLabel","always","defaultProps","elementType","color","children","name"],"mappings":"AAAA;;;;;+BAmBaO;;;;;;;iEAjBU,QAAQ;wBACR,mBAAmB;oCACyB,oCAAoC;gCAChE,gCAAgC;gCAClD,4BAA4B;sCACb,mCAAmC;AAYhE,oCAAoC,CACzCC,OACAC;IAEA,MAAMC,sBAAkBP,kDAAAA,EAA+BQ,CAAAA,MAAOA,IAAIC,UAAU;IAC5E,MAAMC,gBAAYV,kDAAAA,EAA+BQ,CAAAA,MAAOA,IAAIG,IAAI;IAChE,MAAMC,aAASZ,kDAAAA,EAA+BQ,CAAAA,MAAOA,IAAII,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,iBAAiB,GAAGV;IACjD,MAAMM,OAAOD,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAaT,sCAAAA;IAC1B,MAAMe,4BAAwBb,yCAAAA,EAAoBJ,sCAAAA;IAElD,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBf;QAChBK;QACAD;QACAY,YAAY;YACVC,MAAMjB,kBAAkB,OAAO;YAC/BkB,QAAQ3B,cAAAA;YACR4B,eAAe;QACjB;QACAF,MAAMtB,oBAAAA,CAAKyB,MAAM,CAACtB,MAAMmB,IAAI,EAAE;YAC5BI,cAAc;gBACZf;gBACAC;YACF;YACAe,aAAatB,kBAAkB,OAAO;QACxC;QACAkB,QAAQvB,oBAAAA,CAAKyB,MAAM,CAACtB,MAAMoB,MAAM,EAAE;YAChCG,cAAc;gBACZtB;gBACAK;gBACAmB,OAAO;gBACP,GAAGf,eAAe;YACpB;YACAc,aAAa/B,cAAAA;QACf;QACA4B,eAAexB,oBAAAA,CAAKyB,MAAM,CAACtB,MAAMqB,aAAa,EAAE;YAC9CE,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfG,UAAU1B,MAAM2B,IAAI;YACtB;YACAH,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/AvatarGroupItem/useAvatarGroupItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Avatar } from '../Avatar/Avatar';\nimport { AvatarGroupContext, useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContext';\nimport { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';\nimport { slot } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { AvatarGroupItemProps, AvatarGroupItemState } from './AvatarGroupItem.types';\n\n/**\n * Create the state required to render AvatarGroupItem.\n *\n * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,\n * before being passed to renderAvatarGroupItem_unstable.\n *\n * @param props - props from this instance of AvatarGroupItem\n * @param ref - reference to root HTMLElement of AvatarGroupItem\n */\nexport const useAvatarGroupItem_unstable = (\n  props: AvatarGroupItemProps,\n  ref: React.Ref<HTMLElement>,\n): AvatarGroupItemState => {\n  const groupIsOverflow = useAvatarGroupContext_unstable(ctx => ctx.isOverflow);\n  const groupSize = useAvatarGroupContext_unstable(ctx => ctx.size);\n  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);\n  // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.\n  const { style, className, overflowLabel, ...avatarSlotProps } = props;\n  const size = groupSize ?? defaultAvatarGroupSize;\n  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);\n\n  if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {\n    // eslint-disable-next-line no-console\n    console.warn('AvatarGroupItem must only be used inside an AvatarGroup component.');\n  }\n\n  return {\n    isOverflowItem: groupIsOverflow,\n    layout,\n    size,\n    components: {\n      root: groupIsOverflow ? 'li' : 'div',\n      avatar: Avatar,\n      overflowLabel: 'span',\n    },\n    root: slot.always(props.root, {\n      defaultProps: {\n        style,\n        className,\n      },\n      elementType: groupIsOverflow ? 'li' : 'div',\n    }),\n    avatar: slot.always(props.avatar, {\n      defaultProps: {\n        ref,\n        size,\n        color: 'colorful',\n        ...avatarSlotProps,\n      },\n      elementType: Avatar,\n    }),\n    overflowLabel: slot.always(overflowLabel, {\n      defaultProps: {\n        // Avatar already has its aria-label set to the name, this will prevent the name to be read twice.\n        'aria-hidden': true,\n        children: props.name,\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","Avatar","AvatarGroupContext","useAvatarGroupContext_unstable","defaultAvatarGroupSize","slot","useHasParentContext","useAvatarGroupItem_unstable","props","ref","groupIsOverflow","ctx","isOverflow","groupSize","size","layout","style","className","overflowLabel","avatarSlotProps","hasAvatarGroupContext","process","env","NODE_ENV","console","warn","isOverflowItem","components","root","avatar","always","defaultProps","elementType","color","children","name"],"mappings":"AAAA;;;;;+BAmBaO;;;;;;;iEAjBU,QAAQ;wBACR,mBAAmB;oCACyB,oCAAoC;gCAChE,gCAAgC;gCAClD,4BAA4B;sCACb,mCAAmC;AAYhE,oCAAoC,CACzCC,OACAC;IAEA,MAAMC,sBAAkBP,kDAAAA,EAA+BQ,CAAAA,MAAOA,IAAIC,UAAU;IAC5E,MAAMC,gBAAYV,kDAAAA,EAA+BQ,CAAAA,MAAOA,IAAIG,IAAI;IAChE,MAAMC,aAASZ,kDAAAA,EAA+BQ,CAAAA,MAAOA,IAAII,MAAM;IAC/D,qGAAqG;IACrG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,aAAa,EAAE,GAAGC,iBAAiB,GAAGX;IAChE,MAAMM,OAAOD,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAaT,sCAAAA;IAC1B,MAAMgB,wBAAwBd,6CAAAA,EAAoBJ,sCAAAA;IAElD,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACH,uBAAuB;QACnE,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;QACLC,gBAAgBhB;QAChBK;QACAD;QACAa,YAAY;YACVC,MAAMlB,kBAAkB,OAAO;YAC/BmB,QAAQ5B,cAAAA;YACRiB,eAAe;QACjB;QACAU,MAAMvB,oBAAAA,CAAKyB,MAAM,CAACtB,MAAMoB,IAAI,EAAE;YAC5BG,cAAc;gBACZf;gBACAC;YACF;YACAe,aAAatB,kBAAkB,OAAO;QACxC;QACAmB,QAAQxB,oBAAAA,CAAKyB,MAAM,CAACtB,MAAMqB,MAAM,EAAE;YAChCE,cAAc;gBACZtB;gBACAK;gBACAmB,OAAO;gBACP,GAAGd,eAAe;YACpB;YACAa,aAAa/B,cAAAA;QACf;QACAiB,eAAeb,oBAAAA,CAAKyB,MAAM,CAACZ,eAAe;YACxCa,cAAc;gBACZ,kGAAkG;gBAClG,eAAe;gBACfG,UAAU1B,MAAM2B,IAAI;YACtB;YACAH,aAAa;QACf;IACF;AACF,EAAE"}

package/lib-commonjs/index.js

@@ -100,3 +100,6 @@ const _AvatarGroup = require("./AvatarGroup");
 const _AvatarGroupItem = require("./AvatarGroupItem");
 const _AvatarGroupPopover = require("./AvatarGroupPopover");
 const _index1 = require("./contexts/index");
+ // Experimental APIs, will be undocumented in experimental branch
+ // export { useAvatarBase_unstable } from './Avatar';
+ // export type { AvatarBaseProps, AvatarBaseState } from './Avatar';

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Avatar,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\nexport type {\n  AvatarNamedColor,\n  AvatarProps,\n  AvatarSlots,\n  AvatarState,\n  AvatarShape,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSize,\n} from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  renderAvatarGroup_unstable,\n  useAvatarGroupContextValues,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type {\n  AvatarGroupProps,\n  AvatarGroupSlots,\n  AvatarGroupState,\n  AvatarGroupContextValue,\n  AvatarGroupContextValues,\n} from './AvatarGroup';\nexport {\n  AvatarGroupItem,\n  avatarGroupItemClassNames,\n  renderAvatarGroupItem_unstable,\n  useAvatarGroupItemStyles_unstable,\n  useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\nexport {\n  AvatarGroupPopover,\n  avatarGroupPopoverClassNames,\n  renderAvatarGroupPopover_unstable,\n  useAvatarGroupPopover_unstable,\n  useAvatarGroupPopoverContextValues_unstable,\n  useAvatarGroupPopoverStyles_unstable,\n} from './AvatarGroupPopover';\nexport type { AvatarGroupPopoverProps, AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover';\nexport {\n  AvatarContextProvider,\n  AvatarGroupProvider,\n  useAvatarContext,\n  useAvatarGroupContext_unstable,\n} from './contexts/index';\nexport type { AvatarContextValue } from './contexts/index';\n"],"names":["Avatar","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","getInitials","partitionAvatarGroupItems","AvatarGroup","avatarGroupClassNames","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","AvatarContextProvider","AvatarGroupProvider","useAvatarContext","useAvatarGroupContext_unstable"],"mappings":";;;;;;;;;;;IACEA;6BAAM;;;eAmDNwB,6BAAqB;;;eAhCrBjB,wBAAW;;;eAeXM,gCAAe;;;eAQfK,sCAAkB;;uBAUC;eAAnBO;;;eAnDAxB,wBAAgB;;;eAmBhBO,kCAAqB;;;eAerBM,0CAAyB;;;eAQzBK,gDAA4B;;;eA3BrBd,kBAAW;;;eAAEC,gCAAyB;;;eAoB7CS,+CAA8B;;IAQ9BK,iCAAiC;;;;eAvBjCX,uCAA0B;;;eAnB1BP,6BAAqB;;;eAmDrBwB,wBAAgB;;IA/BhBhB;uDAA2B;;kCAgCG;eAA9BiB;;;eAjBAX,kDAAiC;;;eACjCC,4CAA2B;;;eAQ3BK,+DAA2C;;;eAC3CC,wDAAoC;;;eAFpCF,kDAA8B;;IAtB9BV;yDAA6B;;;eAC7BC,oCAAuB;;;eArBvBT,gCAAwB;;;eACxBC,0BAAkB;;;wBACb,WAAW;uBAWqC,gBAAgB;6BAShE,gBAAgB;iCAchB,oBAAoB;oCASpB,uBAAuB;wBAOvB,mBAAmB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Avatar,\n  avatarClassNames,\n  renderAvatar_unstable,\n  useAvatarStyles_unstable,\n  useAvatar_unstable,\n} from './Avatar';\nexport type {\n  AvatarNamedColor,\n  AvatarProps,\n  AvatarSlots,\n  AvatarState,\n  AvatarShape,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSize,\n} from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n  AvatarGroup,\n  avatarGroupClassNames,\n  renderAvatarGroup_unstable,\n  useAvatarGroupContextValues,\n  useAvatarGroupStyles_unstable,\n  useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type {\n  AvatarGroupProps,\n  AvatarGroupSlots,\n  AvatarGroupState,\n  AvatarGroupContextValue,\n  AvatarGroupContextValues,\n} from './AvatarGroup';\nexport {\n  AvatarGroupItem,\n  avatarGroupItemClassNames,\n  renderAvatarGroupItem_unstable,\n  useAvatarGroupItemStyles_unstable,\n  useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\nexport {\n  AvatarGroupPopover,\n  avatarGroupPopoverClassNames,\n  renderAvatarGroupPopover_unstable,\n  useAvatarGroupPopover_unstable,\n  useAvatarGroupPopoverContextValues_unstable,\n  useAvatarGroupPopoverStyles_unstable,\n} from './AvatarGroupPopover';\nexport type { AvatarGroupPopoverProps, AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover';\nexport {\n  AvatarContextProvider,\n  AvatarGroupProvider,\n  useAvatarContext,\n  useAvatarGroupContext_unstable,\n} from './contexts/index';\nexport type { AvatarContextValue } from './contexts/index';\n\n// Experimental APIs, will be undocumented in experimental branch\n// export { useAvatarBase_unstable } from './Avatar';\n// export type { AvatarBaseProps, AvatarBaseState } from './Avatar';\n"],"names":["Avatar","avatarClassNames","renderAvatar_unstable","useAvatarStyles_unstable","useAvatar_unstable","getInitials","partitionAvatarGroupItems","AvatarGroup","avatarGroupClassNames","renderAvatarGroup_unstable","useAvatarGroupContextValues","useAvatarGroupStyles_unstable","useAvatarGroup_unstable","AvatarGroupItem","avatarGroupItemClassNames","renderAvatarGroupItem_unstable","useAvatarGroupItemStyles_unstable","useAvatarGroupItem_unstable","AvatarGroupPopover","avatarGroupPopoverClassNames","renderAvatarGroupPopover_unstable","useAvatarGroupPopover_unstable","useAvatarGroupPopoverContextValues_unstable","useAvatarGroupPopoverStyles_unstable","AvatarContextProvider","AvatarGroupProvider","useAvatarContext","useAvatarGroupContext_unstable"],"mappings":";;;;;;;;;;;IACEA,MAAM;;;yBAmDe;eAArBwB;;;eAhCAjB,wBAAW;;;eAeXM,gCAAe;;;eAQfK,sCAAkB;;;eAUlBO,2BAAmB;;;eAnDnBxB,wBAAgB;;IAmBhBO,qBAAqB;;;6BAeI;eAAzBM;;;eAQAK,gDAA4B;;;eA3BrBd,kBAAW;;;eAAEC,gCAAyB;;IAoB7CS,8BAA8B;;;;eAQ9BK,qDAAiC;;;eAvBjCX,uCAA0B;;;eAnB1BP,6BAAqB;;;eAmDrBwB,wBAAgB;;;eA/BhBhB,wCAA2B;;;eAgC3BiB,sCAA8B;;IAjB9BX,iCAAiC;;;;eACjCC,4CAA2B;;;eAQ3BK,+DAA2C;;;eAC3CC,wDAAoC;;kCAFN;eAA9BF;;;eAtBAV,0CAA6B;;;eAC7BC,oCAAuB;;4BArBC;eAAxBT;;;eACAC,0BAAkB;;;wBACb,WAAW;uBAWqC,gBAAgB;6BAShE,gBAAgB;iCAchB,oBAAoB;oCASpB,uBAAuB;wBAOvB,mBAAmB;CAG1B,iEAAiE;CACjE,qDAAqD;CACrD,oEAAoE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-avatar",
-  "version": "9.9.13",
+  "version": "9.10.0",
   "description": "React components for building Microsoft web experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,25 +12,19 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/react-provider": "*",
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "*",
-    "es6-weak-map": "^2.0.2",
-    "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-cypress": "*"
+    "es6-weak-map": "^2.0.2"
   },
   "dependencies": {
-    "@fluentui/react-badge": "^9.4.12",
-    "@fluentui/react-context-selector": "^9.2.13",
+    "@fluentui/react-badge": "^9.4.14",
+    "@fluentui/react-context-selector": "^9.2.14",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-popover": "^9.12.13",
-    "@fluentui/react-shared-contexts": "^9.26.0",
-    "@fluentui/react-tabster": "^9.26.11",
-    "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-tooltip": "^9.8.12",
-    "@fluentui/react-utilities": "^9.26.0",
-    "@fluentui/react-jsx-runtime": "^9.3.4",
+    "@fluentui/react-popover": "^9.13.1",
+    "@fluentui/react-shared-contexts": "^9.26.1",
+    "@fluentui/react-tabster": "^9.26.12",
+    "@fluentui/react-theme": "^9.2.1",
+    "@fluentui/react-tooltip": "^9.9.1",
+    "@fluentui/react-utilities": "^9.26.1",
+    "@fluentui/react-jsx-runtime": "^9.4.0",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },